/* --- reel.css, copied verbatim from the Onsite app --- */
/* Onsite — the hero reel.

   Every class is prefixed r- because this draws a picture of the app inside
   the app, and nine of its names (.chip, .rail, .brand, .pill, .rota …) are
   already taken by the real thing in globals.css. Prefixing keeps the two
   apart without a build step and without hashed names, which matters because
   the animation addresses these elements by selector.

   The colours are Onsite's light theme written out as literals rather than
   read from --accent and friends. The reel depicts a laptop showing the app,
   and a depicted screen does not change colour because the person looking at
   it switched their own theme to dark. */

.r-root {
  --r-paper: #e9eef0;
  --r-surface: #ffffff;
  --r-surface-2: #e6ecef;
  --r-surface-3: #f4f8f9;
  --r-ink: #0d181f;
  --r-ink-2: #465864;
  --r-ink-3: #788b96;
  --r-rule: #ccd8de;
  --r-rule-2: #e2eaee;
  --r-accent: #0d6b50;
  --r-accent-2: #084330;
  --r-accent-soft: #d7ece3;
  --r-gold: #8a5312;
  --r-gold-soft: #f6e8d6;

  display: grid;
  gap: 0.9rem;
}

.r-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-width: 100%;
  border-radius: var(--r-lg, 14px);
  overflow: hidden;
  box-shadow: 0 28px 64px -30px rgba(13, 24, 31, 0.5), 0 0 0 1px rgba(13, 24, 31, 0.08);
}
.r-stage {
  position: absolute;
  left: 0;
  top: 0;
  width: 1280px;
  height: 720px;
  transform-origin: 0 0;
  overflow: hidden;
  perspective: 1500px;
  font-family: var(--font-ui), system-ui, sans-serif;
  color: var(--r-ink);
  /* Green top-left for rooms, copper bottom-right for shifts: the two halves
     of the product, lit the way the stylesheet already distinguishes them. */
  background:
    radial-gradient(900px 560px at 10% -8%, rgba(13, 107, 80, 0.16), transparent 62%),
    radial-gradient(760px 520px at 96% 104%, rgba(138, 83, 18, 0.14), transparent 62%),
    var(--r-paper);
}
.r-camera { position: absolute; inset: 0; transform-origin: 640px 360px; will-change: transform; }
.r-scene { position: absolute; inset: 0; visibility: hidden; }

/* ---------- the app window ---------- */
.r-win {
  position: absolute;
  background: var(--r-surface);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 40px 90px -34px rgba(13, 24, 31, 0.5), 0 0 0 1px rgba(13, 24, 31, 0.07);
}
.r-rail {
  background: var(--r-surface-3);
  border-right: 1px solid var(--r-rule-2);
  padding: 20px 14px;
  display: grid;
  align-content: start;
  gap: 3px;
}
.r-brand { display: flex; align-items: center; gap: 9px; margin-bottom: 20px; }
.r-mark {
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: 9px;
  display: grid;
  place-items: center;
  font-family: var(--font-display), sans-serif;
  font-weight: 700;
  font-size: 15px;
  color: #ffffff;
  background: linear-gradient(160deg, var(--r-accent), var(--r-accent-2));
  box-shadow: 0 2px 8px -2px rgba(13, 107, 80, 0.55);
}
.r-brandtext { display: grid; line-height: 1.15; min-width: 0; }
.r-brandtext b {
  font-family: var(--font-display), sans-serif;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.03em;
}
.r-brandtext small { font-size: 11px; color: var(--r-ink-3); }
.r-nav {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--r-ink-2);
}
.r-nav.r-on { background: var(--r-accent-soft); color: var(--r-accent-2); font-weight: 600; }
.r-nav i { width: 7px; height: 7px; border-radius: 2px; background: currentColor; opacity: 0.55; flex: none; }
.r-nav.r-on i { opacity: 1; }

.r-pane { padding: 22px 26px; background: var(--r-paper); }
.r-panehead { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.r-panehead h2 {
  font-family: var(--font-display), sans-serif;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.028em;
  margin: 0;
}
.r-sub { font-size: 12.5px; color: var(--r-ink-3); margin: 3px 0 0; }
.r-btn {
  font-size: 12.5px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 8px;
  background: var(--r-accent);
  color: #ffffff;
  white-space: nowrap;
}

/* ---------- scene 1: the address bar ---------- */
.r-browser { left: 200px; top: 112px; width: 880px; height: 496px; }
.r-toolbar { height: 46px; background: var(--r-surface-3); border-bottom: 1px solid var(--r-rule-2); position: relative; }
.r-dots { position: absolute; left: 16px; top: 17px; display: flex; gap: 7px; }
.r-dots i { width: 11px; height: 11px; border-radius: 50%; background: var(--r-rule); }
.r-urlbar {
  position: absolute;
  left: 112px;
  top: 10px;
  width: 560px;
  height: 27px;
  border-radius: 14px;
  background: var(--r-surface-2);
  display: flex;
  align-items: center;
  padding-left: 15px;
  font-family: var(--font-mono), ui-monospace, Menlo, monospace;
  font-size: 14px;
  color: var(--r-ink);
}
.r-ph { color: var(--r-ink-3); position: absolute; left: 15px; }
.r-caret {
  display: inline-block;
  width: 2px;
  height: 15px;
  background: var(--r-accent);
  margin-left: 1px;
  animation: r-blink 1s steps(1) infinite;
}
@keyframes r-blink { 50% { opacity: 0 } }
.r-newtab { position: absolute; inset: 46px 0 0 0; display: grid; place-content: center; gap: 24px; justify-items: center; }
.r-newtab .r-g { width: 380px; height: 42px; border-radius: 21px; border: 1px solid var(--r-rule-2); }
.r-tiles { display: flex; gap: 20px; }
.r-tiles span { width: 58px; height: 58px; border-radius: 14px; background: var(--r-surface-3); }

/* ---------- scene 2: the rota ---------- */
.r-app { left: 68px; top: 60px; width: 1144px; height: 600px; display: grid; grid-template-columns: 186px 1fr; }
.r-grid { display: grid; grid-template-columns: 112px repeat(5, 1fr); gap: 6px; }
.r-hd {
  font-family: var(--font-mono), ui-monospace, Menlo, monospace;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--r-ink-3);
  padding: 0 0 4px 2px;
}
.r-room { font-size: 12.5px; font-weight: 600; color: var(--r-ink-2); display: flex; align-items: center; padding-left: 2px; }
.r-cell {
  min-height: 60px;
  border-radius: 9px;
  background: var(--r-surface);
  border: 1px solid var(--r-rule-2);
  padding: 5px;
  display: grid;
  gap: 4px;
  align-content: start;
}
.r-cell.r-shut { background: repeating-linear-gradient(135deg, var(--r-surface-2) 0 5px, var(--r-surface) 5px 10px); }
.r-chip {
  font-size: 11px;
  font-weight: 500;
  padding: 4px 6px;
  border-radius: 6px;
  background: var(--r-accent-soft);
  color: var(--r-accent-2);
  display: flex;
  justify-content: space-between;
  gap: 5px;
}
.r-chip em { font-style: normal; font-family: var(--font-mono), ui-monospace, monospace; font-size: 9.5px; opacity: 0.72; }
.r-chip.r-wide { background: linear-gradient(90deg, var(--r-accent-soft), #c9e6da); }
.r-chip.r-ghost { background: var(--r-surface-2); color: var(--r-ink-3); }
.r-dragging { box-shadow: 0 14px 30px -10px rgba(13, 24, 31, 0.45); position: relative; z-index: 5; }

/* ---------- scene 3: shifts ---------- */
.r-shiftrow {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 14px;
  background: var(--r-surface);
  border: 1px solid var(--r-rule-2);
  border-radius: 10px;
  padding: 13px 15px;
  margin-bottom: 9px;
}
.r-what { display: grid; gap: 2px; min-width: 0; }
.r-what b { font-size: 14px; font-weight: 600; letter-spacing: -0.01em; }
.r-what span { font-size: 12px; color: var(--r-ink-3); }
.r-pill {
  font-family: var(--font-mono), ui-monospace, Menlo, monospace;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 999px;
  white-space: nowrap;
}
.r-pill.r-open { background: var(--r-gold-soft); color: var(--r-gold); }
.r-pill.r-ok { background: var(--r-accent-soft); color: var(--r-accent-2); }
.r-claim {
  font-size: 12px;
  font-weight: 600;
  padding: 7px 13px;
  border-radius: 8px;
  background: var(--r-gold);
  color: #ffffff;
  white-space: nowrap;
}

/* ---------- scene 4: the phone ---------- */
.r-phone {
  position: absolute;
  left: 700px;
  top: 52px;
  width: 300px;
  height: 616px;
  border-radius: 48px;
  background: #050b0f;
  padding: 11px;
  box-shadow: 0 50px 100px -32px rgba(13, 24, 31, 0.6);
}
.r-screen {
  width: 100%;
  height: 100%;
  border-radius: 38px;
  overflow: hidden;
  position: relative;
  color: #ffffff;
  background: linear-gradient(165deg, #0d6b50 0%, #084330 52%, #04231a 100%);
}
.r-notch { position: absolute; left: 50%; top: 11px; width: 88px; height: 26px; margin-left: -44px; border-radius: 13px; background: #000000; }
.r-phdate { position: absolute; top: 62px; width: 100%; text-align: center; font-size: 13.5px; opacity: 0.78; }
.r-phclock {
  position: absolute;
  top: 80px;
  width: 100%;
  text-align: center;
  font-family: var(--font-display), sans-serif;
  font-weight: 600;
  font-size: 70px;
  letter-spacing: -0.03em;
}
.r-notif {
  position: absolute;
  left: 13px;
  right: 13px;
  top: 208px;
  background: rgba(255, 255, 255, 0.95);
  color: var(--r-ink);
  border-radius: 18px;
  padding: 13px 15px;
  display: grid;
  gap: 3px;
}
.r-notif .r-h {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono), ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--r-ink-3);
}
.r-notif .r-mark { width: 18px; height: 18px; border-radius: 5px; font-size: 9px; }
.r-notif b { font-size: 14px; letter-spacing: -0.01em; }
.r-notif p { margin: 0; font-size: 12.5px; color: var(--r-ink-2); }
.r-aside { position: absolute; left: 110px; top: 236px; width: 500px; display: grid; gap: 18px; }
.r-aside h3 {
  font-family: var(--font-display), sans-serif;
  font-weight: 800;
  font-size: 46px;
  line-height: 1.02;
  letter-spacing: -0.035em;
  margin: 0;
  color: var(--r-accent-2);
  text-wrap: balance;
}
.r-stats { display: flex; gap: 30px; }
.r-stats div { display: grid; }
.r-stats b {
  font-family: var(--font-display), sans-serif;
  font-weight: 700;
  font-size: 30px;
  color: var(--r-gold);
  letter-spacing: -0.03em;
}
.r-stats span { font-size: 12px; color: var(--r-ink-2); }

/* ---------- scene 5: sign-off ---------- */
.r-end { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 18px; text-align: center; }
.r-end .r-mark { width: 68px; height: 68px; border-radius: 19px; font-size: 32px; }
.r-end h2 {
  font-family: var(--font-display), sans-serif;
  font-weight: 800;
  font-size: 92px;
  margin: 0;
  letter-spacing: -0.05em;
  line-height: 0.94;
  color: var(--r-accent-2);
}
.r-end h2 span { display: inline-block; }
.r-end p { margin: 0; font-size: 21px; color: var(--r-ink-2); }
.r-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; justify-content: center; }
.r-url {
  font-family: var(--font-mono), ui-monospace, Menlo, monospace;
  font-size: 15px;
  padding: 11px 16px;
  border-radius: 10px;
  background: var(--r-surface);
  box-shadow: 0 0 0 1px var(--r-rule);
}
.r-go { font-size: 15px; font-weight: 600; padding: 12px 20px; border-radius: 10px; background: var(--r-accent); color: #ffffff; }

/* ---------- overlays ---------- */
.r-cursor { position: absolute; left: 0; top: 0; width: 24px; height: 24px; z-index: 20; visibility: hidden; pointer-events: none; }
.r-cursor svg { filter: drop-shadow(0 3px 4px rgba(13, 24, 31, 0.35)); }
.r-ripple {
  position: absolute;
  left: -15px;
  top: -15px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 3px solid var(--r-gold);
  opacity: 0;
}
.r-flash { position: absolute; inset: 0; background: var(--r-accent); visibility: hidden; z-index: 30; }
.r-caption {
  position: absolute;
  left: 32px;
  bottom: 28px;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 15px 9px 9px;
  border-radius: 12px;
  background: rgba(8, 67, 48, 0.92);
  color: #ffffff;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.r-caption .r-n {
  font-family: var(--font-mono), ui-monospace, Menlo, monospace;
  font-size: 11px;
  background: var(--r-gold);
  color: #ffffff;
  border-radius: 7px;
  padding: 4px 7px;
}

/* ---------- transport (preview only) ---------- */
@media (max-width: 560px) {
  .r-caption { left: 20px; bottom: 18px; font-size: 15px; }
}


/* the transport belongs to the dark page, so it is restyled here */