/* ============================================================
   ORBIT editorial design layer — ported for the marketing film.
   ------------------------------------------------------------
   Tokens, type scale, and component recipes are lifted verbatim
   from V:/r/brt/ORBIT/src/styles/bondrand.css and the schema-2
   renderers, so the film reads as the real product and not as an
   interpretation of it. Anything invented for the film (camera,
   cursor, marketing emphasis) is namespaced `.film-*` and kept
   below the ORBIT section so the two never blur together.

   System (bondrand.css:11-15): editorial minimalism — monochrome,
   typographic, bracket-labeled, flat. No gradients, no shadows,
   no radius beyond a 3px hint, one accent (forest green #2b5945)
   used only as a whisper. Hierarchy by SIZE not weight: headings
   400, labels/buttons 500, nothing 600+.
   ============================================================ */

@import url('fonts.css');

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: #08090a;
  overflow: hidden;
  /* The film is a fixed 1920x1080 stage — nothing should ever be
     text-selectable or drag-scrollable inside it. */
  user-select: none;
  -webkit-user-select: none;
}

/* ---- .br-scope tokens (bondrand.css:18-67) ---- */
.br-scope {
  --br-bg: #ffffff;
  --br-bg-subtle: #fafafa;
  --br-bg-muted: #f3f3f3;
  --br-ink: #1e2124;
  --br-ink-medium: #636363;
  --br-ink-light: #767676;
  --br-surface-darker: #0d0e10;
  --br-on-dark-heading: #efefef;
  --br-on-dark-muted: #b9b9b9;
  --br-accent: #2b5945;
  --br-accent-10: rgba(43, 89, 69, 0.1);
  --br-mark: #1e1f2b;
  --br-hairline: rgba(30, 33, 36, 0.14);
  --br-corner-mark: rgba(30, 33, 36, 0.25);
  --br-input-border: rgba(30, 33, 36, 0.22);
  --br-tab-active: #2b5945;

  --br-ease: cubic-bezier(0.42, 0, 0.58, 1);
  --br-dur: 250ms;
  --br-dur-slow: 500ms;

  font-family: 'Hanken Grotesk', 'Neue Haas Grotesk', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  color: var(--br-ink);
}

/* ---- On-dark flip (bondrand.css:101-125) ---- */
.br-on-dark {
  --br-bg: #0d0e10;
  --br-bg-subtle: #141517;
  --br-bg-muted: #1b1d20;
  --br-ink: #efefef;
  --br-ink-medium: #b9b9b9;
  --br-ink-light: #8a8f95;
  --br-input-border: rgba(255, 255, 255, 0.18);
  --br-hairline: rgba(255, 255, 255, 0.1);
  --br-corner-mark: rgba(255, 255, 255, 0.25);
  --br-tab-active: #efefef;
  --br-tint: #1e1f2b;
  --br-tint-hi: #26283a;
  --br-tint-lo: #16171f;
  --br-mark: #a3b18a;
  color: var(--br-ink);
}

/* ---- Monospace metadata register (bondrand.css:395-412) ---- */
.br-eyebrow, .br-field-label, .br-btn, .br-meta, .br-mono {
  font-family: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;
}

.br-eyebrow {
  display: inline-block;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--br-ink-medium);
}

/* Field caption (bondrand.css:459-467) — the eyebrow's block-level sibling
   that titles every control and every output row. */
.br-field-label {
  display: block;
  margin: 0 0 8px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--br-ink-medium);
}

/* Quiet mono metadata (bondrand.css:588-594) — FTE lines, the realistic-band
   hint, the per-week gloss under the headline figure. */
.br-meta {
  margin: 0;
  font-size: 10px;
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: 0.02em;
  color: var(--br-ink-medium);
}

/* Beta badge (bondrand.css:418-439) */
.br-beta {
  display: inline-flex;
  align-items: center;
  font-family: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.14em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--br-ink-light);
  border: 1px solid var(--br-hairline);
  border-radius: 3px;
  padding: 2px 5px;
}
.br-beta--xs { font-size: 8px; letter-spacing: 0.12em; padding: 1px 4px; border-radius: 2px; }

/* Field / input (bondrand.css:469-490) */
.br-input {
  width: 100%;
  font-family: inherit;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.625;
  color: var(--br-ink);
  background: var(--br-bg);
  border: 1px solid var(--br-input-border);
  border-radius: 0;
  padding: 12px 14px;
}
.br-input-placeholder { color: var(--br-ink-light); }

/* Button (bondrand.css:535-572) */
.br-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--br-bg);
  background: var(--br-ink);
  border: 1px solid var(--br-ink);
  border-radius: 0;
  padding: 9px 18px;
}

/* Nav glass — the exact four-ingredient BRT recipe (bondrand.css:284-309) */
.br-glass-nav {
  background: rgba(30, 33, 36, 0.30);
  backdrop-filter: blur(40px) saturate(1.5);
  -webkit-backdrop-filter: blur(40px) saturate(1.5);
  border: 1px solid rgba(255, 255, 255, 0.10);
  transition: background 350ms var(--br-ease);
}
.br-glass-nav.is-stuck { background: rgba(30, 33, 36, 0.55); }

/* Glass callout for a callout box on a dark band (bondrand.css:249-262) */
.br-glass-callout {
  background: rgba(38, 40, 58, 0.55);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

/* ============================================================
   Report composition — the schema-2 render tree's geometry.
   ============================================================ */

/* The four report pages stack at top-left; the timeline shows one and
   cross-fades on a nav click. */
#page-stack { position: absolute; inset: 0; }

/* Page canvas (ReportPreviewView.tsx:1996 — `br-scope bg-[#ffffff]`) */
.report {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  background: #ffffff;
  will-change: transform;
}

/* max-w-7xl (1280px) content rail with the report's px-4 gutter. */
.rail { width: 1280px; margin: 0 auto; padding: 0 16px; }

/* The dark full-bleed band (#0d0e10) — hero mastheads, roadmap slabs. */
.band-dark { background: #0d0e10; position: relative; }

/* Hero masthead — px-8 py-16 at >=sm (HeroLayoutElementRenderer.tsx:167).
   The top pad also clears the sticky nav rail (15 + 68 = 83px), matching
   how the real report's opener bleeds up behind the pill. */
.hero { padding: 176px 32px 120px; position: relative; }
/* max-w-6xl content grid, 1fr auto at >=lg with a 64px gap (line 197) */
.hero-grid {
  position: relative;
  max-width: 1152px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 64px;
}
.hero-eyebrow {
  /* Inline overrides from HeroLayoutElementRenderer.tsx:206-211 */
  font-size: 12px;
  letter-spacing: 0.14em;
  color: #b9b9b9;
  margin-bottom: 16px;
}
.hero-h {
  /* clamp(32px, 5.6vw, 84px) resolves to the 84px cap at a 1920 stage. */
  margin: 0;
  font-size: 84px;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: #efefef;
  overflow-wrap: break-word;
}
.hero-sub {
  margin: 20px 0 0;
  max-width: 672px;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.55;
  color: #b9b9b9;
}
.hero-gauge-col { min-width: 260px; margin-top: 8px; }

/* Gauge caption — labelAsChartTitle branch (GaugeElementRenderer.tsx:1792-1799) */
.gauge-cap {
  margin: 12px 0 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--br-ink-light);
  text-align: center;
}
.gauge-wrap { display: flex; flex-direction: column; align-items: center; }

/* Section header on the light canvas — eyebrow + .br-title + .br-sub. */
.sec-head { padding-top: 76px; }
.sec-eyebrow { color: var(--br-ink-light); letter-spacing: 0.12em; font-size: 11px; }
.sec-title {
  margin: 14px 0 0;
  font-size: 30px;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--br-ink);
}
.sec-sub {
  margin: 10px 0 0;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--br-ink-medium);
}

/* Defined-term span — the `{-}`/defined-term highlight ink (bondrand.css:32-38) */
.br-term {
  font-weight: 500;
  color: var(--br-ink);
  border-bottom: 1px solid var(--br-mark);
  padding-bottom: 1px;
}

/* Card surface (#f9f9f9, ReportPreviewView.tsx:1775) */
.card {
  background: #f9f9f9;
  border-radius: 2px;
  padding: 40px;
}

/* corner_marks card style — chrome is literally transparent, the four
   1px L-brackets are the whole card (CornerMarksBrackets.tsx:34-79). */
.corner-marks { position: relative; background: transparent; }
.corner-marks > .cm {
  position: absolute;
  width: 16px; height: 16px;
  border-color: var(--br-corner-mark);
  border-style: solid;
  border-width: 0;
  pointer-events: none;
}
/* Each arm needs to out-rank the `border-width: 0` reset above, so these
   carry the same two-class weight rather than relying on source order. */
.corner-marks > .cm-tl { top: 0; left: 0; border-top-width: 1px; border-left-width: 1px; }
.corner-marks > .cm-tr { top: 0; right: 0; border-top-width: 1px; border-right-width: 1px; }
.corner-marks > .cm-bl { bottom: 0; left: 0; border-bottom-width: 1px; border-left-width: 1px; }
.corner-marks > .cm-br { bottom: 0; right: 0; border-bottom-width: 1px; border-right-width: 1px; }

/* Hero stat figure — the standalone `hero` gauge display
   (GaugeElementRenderer.tsx:950-982). text-8xl (96px) at >=sm, weight 500
   under schema-2, tabular-nums, tracking-tight, leading-none; the unit
   suffix is text-4xl (36px) weight 400, baseline-aligned with an 8px gap. */
.stat {
  position: relative;
  display: flex; justify-content: center; align-items: baseline;
  gap: 8px; padding: 8px; min-height: 120px;
}
.stat-n {
  font-size: 96px; font-weight: 500; line-height: 1;
  letter-spacing: -0.025em; font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.stat-u {
  font-size: 36px; font-weight: 400; line-height: 1;
  letter-spacing: -0.025em; white-space: nowrap;
}
.stat-cap {
  font-size: 15px; line-height: 1.45; text-align: center;
  color: var(--br-ink-medium); margin: 0;
}
.stat-cap-strong { color: var(--br-ink); font-size: 16px; }

/* Body prose on a band (TextBlockRenderer body register) */
.prose {
  font-size: 16px; line-height: 1.7; color: var(--br-ink-medium); margin: 0;
}

/* Callout box, glass tone on a dark band (TextBlockRenderer.tsx:708-715) */
.callout { position: relative; border-radius: 2px; padding: 20px 24px; }
.callout-head { display: flex; align-items: center; gap: 8px; }
.callout-title {
  font-size: 16px; font-weight: 600; letter-spacing: -0.01em;
  color: var(--br-ink);
}
.callout-body {
  margin-top: 2px; font-size: 15px; line-height: 1.625;
  color: var(--br-ink-medium);
}
/* Inline jump anchor (index.css:1711-1729) */
.orbit-inline-anchor {
  color: rgb(125 192 244 / 0.95);
  text-decoration: underline dotted;
  text-decoration-color: rgba(34, 76, 152, 0.4);
  text-underline-offset: 3px;
}

/* ---- ASSESS: the three adoption cards ---- */
.adopt-card { padding: 32px 28px 34px; text-align: center; }
.adopt-label { margin: 20px 0 0; font-size: 16px; font-weight: 600; color: var(--br-ink); }
.adopt-sub { margin: 4px 0 0; font-size: 13px; color: var(--br-ink-light); }
.adopt-desc {
  margin: 26px 0 0; font-size: 15px; line-height: 1.5;
  color: var(--br-ink-medium);
}

/* ---- BASELINE: the narrative card ---- */
.prose-body {
  margin: 0; font-size: 16px; line-height: 1.7; color: var(--br-ink-medium);
}
.prose-strong { font-weight: 600; color: var(--br-ink); }

/* ---- II. Daily Active Usage ---- */
.dau-total { padding: 30px 24px 34px; display: flex; flex-direction: column; align-items: center; }
.dau-total-label { margin: 0; font-size: 16px; font-weight: 600; color: var(--br-ink); }
.dau-total-sub { margin: 4px 0 0; font-size: 13px; color: var(--br-ink-light); }
.dau-total-val {
  margin: auto 0 0; padding-top: 26px;
  font-size: 76px; font-weight: 400; line-height: 1;
  letter-spacing: -0.03em; font-variant-numeric: tabular-nums;
  color: var(--br-ink);
}
.dau-row { margin-top: 20px; }
.dau-row-top { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.dau-row-label { font-size: 15px; color: var(--br-ink); }
.dau-row-val { font-size: 15px; font-variant-numeric: tabular-nums; color: var(--br-ink); }
.dau-track { margin-top: 8px; height: 6px; background: rgba(30, 33, 36, 0.08); position: relative; }
.dau-fill {
  position: absolute; top: 0; bottom: 0; left: 0;
  background: #3a3d42; transform-origin: left center;
}

/* Horizontal FlexBar row — the schema-2 bar idiom: flat, zero radius, the
   accent whisper on the primary series and the gray ramp for the rest
   (schemaPalette.ts:220-225). */
.bar-row { display: grid; grid-template-columns: 232px 1fr 60px; align-items: center; gap: 20px; }
.bar-label { font-size: 15px; color: var(--br-ink-medium); }
.bar-track { height: 22px; background: rgba(30, 33, 36, 0.06); position: relative; }
.bar-fill { position: absolute; top: 0; bottom: 0; left: 0; transform-origin: left center; }
.bar-val {
  font-size: 15px; font-variant-numeric: tabular-nums; text-align: right;
  color: var(--br-ink); letter-spacing: -0.01em;
}

/* Expandable task-group row — hairline-ruled list, score right-aligned,
   chevron at the end. The report's disclosure idiom. */
.group-row {
  display: flex; align-items: center; gap: 20px;
  padding: 18px 4px;
  border-top: 1px solid var(--br-hairline);
}
.group-row:last-child { border-bottom: 1px solid var(--br-hairline); }
.group-name { flex: 1; font-size: 17px; color: var(--br-ink); }
.group-pct {
  font-size: 17px; font-variant-numeric: tabular-nums;
  color: var(--br-ink); letter-spacing: -0.01em;
}
.group-chev { color: var(--br-ink-light); display: flex; }

/* Sub-heading inside a light band ("I. Self-Categorization"). */
.sub-heading {
  margin: 0; font-size: 24px; font-weight: 400;
  letter-spacing: -0.02em; color: var(--br-ink);
}

/* ============================================================
   ROI calculator (RoiCalculatorElement) — a data-sourced weekly
   "augmentable pool" feeding three ephemeral reader controls that
   recompute time-and-money-returned live. Geometry and type are the
   renderer's; the slider is redrawn from divs instead of an <input>
   so the timeline can drive the thumb deterministically.
   ============================================================ */

/* Container-query grid: 1fr 1fr with a 32px gap above 560px. */
.roi-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: stretch; }

/* LEFT: the assumptions tray — a recessive surface, hairline framed. */
.roi-tray {
  border-radius: 2px;
  border: 1px solid var(--br-hairline);
  background: var(--br-bg-muted);
  padding: 24px;
}
.roi-pool-row { display: flex; align-items: baseline; gap: 8px; }
.roi-pool {
  font-size: 44px; font-weight: 500; line-height: 1;
  font-variant-numeric: tabular-nums; color: var(--br-ink);
}
.roi-pool-unit { font-size: 14px; color: var(--br-ink-light); }

/* Split bar: retained is a full-width layer, recovered grows over it, so
   the seam stays gap-free while the value tweens. */
.roi-bar { position: relative; height: 8px; overflow: hidden; background: var(--br-input-border); margin-top: 20px; }
.roi-bar-retained { position: absolute; inset: 0; background: rgba(176, 176, 176, 0.9); }
.roi-bar-recovered { position: absolute; top: 0; bottom: 0; left: 0; background: rgba(111, 88, 119, 0.85); }
.roi-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 20px; margin-top: 10px; }
.roi-legend-item { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--br-ink-medium); }
.roi-dot { width: 8px; height: 8px; border-radius: 9999px; flex-shrink: 0; }
.roi-legend-val { font-variant-numeric: tabular-nums; }

/* Capture slider. The realistic-band overlay is a 6px shaded strip mapped
   into the slider's own domain, sitting under the 2px track. */
.roi-capture-row {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 8px; margin-bottom: 8px;
}
.roi-capture-val { font-size: 14px; font-variant-numeric: tabular-nums; color: var(--br-ink); flex-shrink: 0; }
.roi-slider { position: relative; padding: 4px 0; }
.roi-band {
  position: absolute; top: 50%; transform: translateY(-50%);
  height: 6px; background: rgba(0, 0, 0, 0.06); pointer-events: none;
}
.roi-track { position: relative; height: 2px; background: var(--br-input-border); }
/* Matches .br-range::-webkit-slider-thumb (bondrand.css:1311-1320). */
.roi-thumb {
  position: absolute; top: 50%;
  width: 14px; height: 14px; margin-top: -7px; margin-left: -7px;
  border-radius: 3px; background: var(--br-ink);
}

.roi-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 20px; }
.roi-field {
  display: flex; align-items: center;
  border: 1px solid var(--br-input-border);
  background: var(--br-bg);
}
.roi-field-affix { font-size: 14px; color: var(--br-ink-light); }
.roi-field-val {
  flex: 1; min-width: 0; padding: 12px 8px;
  font-size: 16px; font-variant-numeric: tabular-nums; color: var(--br-ink);
}

/* RIGHT: the outputs, unboxed, sitting straight on the canvas. */
.roi-out { display: flex; flex-direction: column; justify-content: center; }
.roi-stat + .roi-stat { padding-top: 16px; margin-top: 16px; border-top: 1px solid var(--br-hairline); }
.roi-stat-val {
  font-variant-numeric: tabular-nums; font-weight: 500; line-height: 1;
  font-size: 32px; color: var(--br-ink); margin: 0;
}
/* NOT ".hero" — that class already belongs to the hero masthead slab and
   would drag its 176px padding onto this figure. */
.roi-stat-val--hero { font-size: 56px; color: #6f5877; }
.roi-stat-sub { margin-top: 8px; }

/* Editorial context note — flat muted slab with one accent rule down the
   left edge (bondrand.css:935-943). The ROI element overrides the rule to
   its plum accent. */
.br-q-note {
  background: var(--br-bg-muted);
  border-left: 2px solid #6f5877;
  padding: 14px 18px;
  color: var(--br-ink-medium);
  font-size: 15px;
  line-height: 1.55;
}
/* The base recipe's own rule colour — the accent's one sanctioned
   appearance on a light canvas (bondrand.css:935-943). The ROI element is
   the exception that overrides it to plum, above. */
.br-q-note--accent { border-left-color: var(--br-accent); }

/* ============================================================
   Editorial type scale (bondrand.css:387-456) — the three
   headings the story scenes need, which the report cut did not.
   ============================================================ */
.br-title   { margin: 0; font-size: 30px; font-weight: 400; letter-spacing: -0.02em; line-height: 1.05; color: var(--br-ink); }
.br-heading { margin: 0; font-size: 22px; font-weight: 400; letter-spacing: -0.02em; line-height: 1.15; color: var(--br-ink); }
.br-sub     { margin: 0; font-size: 15px; font-weight: 400; line-height: 1.5; color: var(--br-ink-medium); }
.br-hairline{ height: 1px; width: 100%; background: var(--br-hairline); border: 0; margin: 0; }

/* The button at its real size (bondrand.css:535-554) — the film's
   `.br-btn` was tuned for the panel's compact Ask action. */
.br-btn--lg { padding: 14px 20px; }

/* Numberless progress rail (bondrand.css:1215-1232). The width is
   driven from the timeline instead of the 800ms transition. */
.br-progress-track { height: 2px; width: 100%; background: var(--br-hairline); overflow: hidden; }
.br-progress-fill  { height: 100%; background: var(--br-ink); }

/* Status pills — the canonical triple (ExecutiveOnboarding.tsx:16-18). */
.br-pill {
  display: inline-flex; align-items: center;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px; line-height: 1.35;
  padding: 2px 8px; border-radius: 3px; white-space: nowrap;
}
.br-pill--accent { background: var(--br-accent-10); color: var(--br-accent); border: 1px solid rgba(43, 89, 69, 0.35); }
.br-pill--mid    { background: #f3f3f3; color: var(--br-ink-medium); border: 1px solid rgba(0, 0, 0, 0.2); }
.br-pill--faint  { background: #fafafa; color: var(--br-ink-medium); border: 1px solid rgba(0, 0, 0, 0.1); }
/* On a dark band the forest green goes muddy against near-black — the same
   reason the product flips --br-mark and --br-tab-active there. Sage is the
   one warm neutral in the schema-2 palette that reads on #0d0e10. */
.br-on-dark .br-pill--accent { background: rgba(163, 177, 138, 0.12); color: #a3b18a; border-color: rgba(163, 177, 138, 0.38); }

/* ============================================================
   THE STORY SCENES — everything around the 15-second report cut.
   ------------------------------------------------------------
   Acts 1/6 (the board thread) and the isometric projection have no
   product analogue and are the marketing layer. Acts 2 and 5 are
   abstractions of real ORBIT surfaces (ExecutiveDashboard.tsx,
   ShareReportModal.tsx) and follow their specs to the pixel where
   the film shows them.
   ============================================================ */

#acts { position: absolute; inset: 0; overflow: hidden; }
/* Layers are pushed sideways past each other, so they must be their own
   opaque full-frame surfaces — nothing here ever blends with anything. */
.act-layer { position: absolute; inset: 0; overflow: hidden; visibility: hidden; will-change: transform; }

.sc-dark  { background: #0d0e10; }
.sc-light { background: #ffffff; }
/* The isometric ground, matching orbit-isometric/index.html. */
.sc-paper { background: #f7f6f3; }

/* Corner brackets — the same 1px L the report's cards use, at frame
   scale. Each arm is scoped so it out-ranks the reset. */
.sc-brackets > span { position: absolute; width: 26px; height: 26px; border-color: var(--br-corner-mark); border-style: solid; border-width: 0; }
.sc-brackets > .sc-bk-tl { top: 56px;    left: 56px;  border-top-width: 1px; border-left-width: 1px; }
.sc-brackets > .sc-bk-tr { top: 56px;    right: 56px; border-top-width: 1px; border-right-width: 1px; }
.sc-brackets > .sc-bk-bl { bottom: 56px; left: 56px;  border-bottom-width: 1px; border-left-width: 1px; }
.sc-brackets > .sc-bk-br { bottom: 56px; right: 56px; border-bottom-width: 1px; border-right-width: 1px; }

/* ---- Acts 1 + 7: the box that opens ----------------------------------
   Not an ORBIT surface. It is the world outside the product, so it is one
   object on a white field: a mail tile with a notification badge. The
   cursor clicks it and the tile GROWS into the message - the container
   opens rather than being replaced, so the thing you clicked is
   demonstrably the thing you are now reading.
   ------------------------------------------------------------------------ */
/* NOT `.sc-box` — the dashboard's campaigns container already owns that
   name, and this rule's `position: absolute` shrink-wrapped it to its own
   content width. */
.sc-mailtile {
  position: absolute; overflow: hidden;
  background: var(--br-bg-subtle);
  border: 1px solid var(--br-hairline);
  border-radius: 3px;
}
.sc-mailtile-icon { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); color: var(--br-ink); display: flex; }
/* The accent's one appearance in the scene, and the only fully round shape
   in the film - a count badge is the one form the system has no opinion
   about. */
.sc-badge {
  position: absolute; display: flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 9999px;
  background: var(--br-accent); color: #ffffff;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 20px; font-weight: 500; line-height: 1;
}
.sc-mailtile-cap { position: absolute; left: 0; right: 0; text-align: center; }

/* The message, laid out ONCE at its final size and revealed by the box
   growing around it. Nothing here reflows, so the type cannot jitter while
   the container animates. */
.sc-mg { position: absolute; }
.sc-mg-head { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; }
.sc-mg-from { font-size: 25px; letter-spacing: -0.01em; color: var(--br-ink); }
.sc-mg-sub { margin: 6px 0 0; font-size: 17px; color: var(--br-ink-light); }
.sc-mg-rule { height: 1px; margin-top: 26px; background: var(--br-hairline); transform-origin: 0% 50%; }
.sc-mg-salute { margin: 34px 0 0; font-size: 22px; color: var(--br-ink-light); }
.sc-mg-line {
  margin: 30px 0 0; font-size: 40px; font-weight: 400;
  letter-spacing: -0.022em; line-height: 1.3; color: var(--br-ink-medium);
}
.sc-mg-sign { margin: 44px 0 0; font-size: 16px; color: var(--br-ink-light); }

/* THE HIGHLIGHT.
   A glow is a dark-field idea; on white the equivalent is a highlighter.
   The wash is `--br-accent-10` - the accent's one sanctioned appearance -
   drawn across the run as the line lands by animating background-size from
   0% to 100%. The marked run also steps up from --br-ink-medium to full
   --br-ink, so it still reads as emphasis in a still frame with the sweep
   already finished. */
.sc-hl {
  color: var(--br-ink);
  background-image: linear-gradient(var(--br-accent-10), var(--br-accent-10));
  background-repeat: no-repeat;
  background-position: 0 50%;
  background-size: 0% 1.06em;
  padding: 0 0.05em;
  margin: 0 -0.05em;
}

/* Act 7 - the reply, in the same box. */
.sc-mg-turn { padding-top: 24px; border-top: 1px solid var(--br-hairline); }
.sc-mg-turn-head { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; margin-bottom: 12px; }
.sc-mg-turn-who { font-size: 18px; color: var(--br-ink); }
.sc-mg-turn-body { margin: 0; font-size: 25px; line-height: 1.4; color: var(--br-ink); }

.sc-link-card { margin-top: 20px; max-width: 720px; display: flex; align-items: center; gap: 22px; padding: 18px 20px; background: #ffffff; border: 1px solid var(--br-hairline); border-radius: 3px; }
.sc-link-title { margin: 8px 0 0; font-size: 18px; font-weight: 400; color: var(--br-ink); letter-spacing: -0.01em; }
.sc-link-url { margin-top: 9px; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 13px; color: var(--br-accent); }

.sc-compose { display: flex; align-items: center; gap: 16px; }
.sc-composer { flex: 1; display: flex; align-items: center; min-height: 50px; font-size: 16px; }
.sc-composer .sc-cval { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 14px; color: var(--br-ink); }
/* A caret the timeline blinks, rather than a CSS keyframe the rig would
   freeze mid-blink. */
.sc-caret { display: inline-block; width: 2px; height: 18px; background: var(--br-ink); margin-left: 3px; vertical-align: -3px; }

/* ---- Act 6: Ask Orbie, full frame ------------------------------------
   The report's own panel is 420px wide with 15px type — correct in the
   product, unreadable in a video. This act re-stages the same exchange at
   frame scale.

   It is built as an assistant surface, not as text on a page: a header
   ruled off at the top, a footer ruled off at the bottom, and the
   conversation in a fixed column between them, with Orbie's mark sitting
   in a gutter to the left of everything it says. That gutter is what makes
   the turns read as turns.
   ------------------------------------------------------------------------ */
.sc-or { position: absolute; left: 300px; right: 300px; }
.sc-or-rule { height: 1px; background: var(--br-hairline); }
.sc-or-mark { display: inline-flex; align-items: center; gap: 11px; color: var(--br-ink); }
.sc-or-name { font-size: 26px; letter-spacing: -0.01em; color: var(--br-ink); }

.sc-or-greet { margin: 0; max-width: 900px; font-size: 24px; line-height: 1.5; color: var(--br-ink-light); }
.sc-or-chips { display: flex; gap: 12px; }
.sc-or-chip {
  padding: 12px 18px; border: 1px solid var(--br-hairline); border-radius: 3px;
  font-size: 16px; color: var(--br-ink-medium); background: transparent; white-space: nowrap;
}

/* The executive's turn: right-aligned AND shrink-wrapped. A block-level
   bubble at max-width reads as left-aligned text in a wide box, which is
   the one thing a chat bubble must never look like. */
.sc-or-qrow { display: flex; justify-content: flex-end; }
.sc-or-q {
  display: inline-block; max-width: 860px; padding: 18px 26px; border-radius: 14px;
  font-size: 24px; line-height: 1.5; color: var(--br-ink);
  background: rgba(30, 33, 36, 0.05); border: 1px solid var(--br-hairline);
}

/* Orbie's turn: mark in the gutter, everything it says hanging off it. */
.sc-or-ans { display: grid; grid-template-columns: 34px 1fr; gap: 26px; align-items: start; }
.sc-or-slot { position: relative; min-height: 46px; }
.sc-or-think { position: absolute; left: 0; top: 4px; display: flex; align-items: center; gap: 10px; }
.sc-or-a {
  margin: 0; font-size: 40px; font-weight: 400;
  letter-spacing: -0.022em; line-height: 1.32; color: var(--br-ink);
}

.sc-or-share {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 14px 20px; border: 1px solid var(--br-input-border); border-radius: 3px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--br-ink);
}

/* ---- Act 2: onboarding, on the light canvas -------------------------- */
.sc-onb-title { margin: 0; font-size: 74px; font-weight: 400; letter-spacing: -0.03em; line-height: 1.02; color: var(--br-ink); }
.sc-onb-step {
  margin: 0; padding: 30px 0; font-size: 31px; font-weight: 400;
  letter-spacing: -0.015em; line-height: 1.32; color: var(--br-ink-medium);
  border-top: 1px solid var(--br-hairline);
}
.sc-onb-step:last-of-type { border-bottom: 1px solid var(--br-hairline); }
.sc-onb-close { margin: 40px 0 0; font-size: 36px; font-weight: 400; letter-spacing: -0.02em; color: var(--br-ink); }

/* ---- Act 2: the executive dashboard ---------------------------------- */
.sc-panel { position: absolute; inset: 0; }
.sc-rail { width: 1280px; margin: 0 auto; padding: 0 16px; }
.sc-mast { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.sc-mono-btn {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--br-ink); border: 1px solid rgba(0, 0, 0, 0.2); padding: 12px 20px;
}
.sc-card { background: #f9f9f9; border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 3px; padding: 20px 24px; }
.sc-card-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.sc-status { display: inline-flex; align-items: center; gap: 10px; font-size: 22px; font-weight: 400; letter-spacing: -0.02em; color: var(--br-ink); }
.sc-dot { width: 8px; height: 8px; border-radius: 9999px; flex-shrink: 0; }
.sc-box { background: #ffffff; border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 3px; padding: 24px 26px; }
.sc-bar { width: 100%; height: 4px; background: #f3f3f3; border-radius: 2px; overflow: hidden; }
.sc-bar-fill { height: 100%; border-radius: 2px; background: var(--br-ink); transform-origin: left center; }

/* Onboarding step rows — the report's hairline-list idiom. */
.sc-step { display: grid; grid-template-columns: 44px 1fr auto 28px; align-items: center; gap: 22px; padding: 20px 4px; border-top: 1px solid var(--br-hairline); }
.sc-step:last-of-type { border-bottom: 1px solid var(--br-hairline); }
.sc-step-n { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px; font-weight: 500; letter-spacing: 0.12em; color: var(--br-ink-light); }
.sc-step-name { font-size: 19px; color: var(--br-ink); }
.sc-step-val { font-size: 15px; color: var(--br-ink-medium); }
.sc-check { position: relative; width: 22px; height: 22px; border: 1px solid var(--br-input-border); border-radius: 3px; }
.sc-check > svg { position: absolute; inset: 0; margin: auto; color: #ffffff; }
.sc-check-fill { position: absolute; inset: -1px; background: var(--br-accent); border-radius: 3px; transform-origin: center; }

/* The composer's delivered state (EmailComposerModal.tsx:506-550). */

/* ---- Act 3: the isometric ground -------------------------------------- */
#act-iso svg text { font-family: 'Hanken Grotesk', system-ui, sans-serif; font-weight: 400; }
#act-iso svg text.iso-mono { font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 500; }

/* ---- Act 5: the share modal (ShareReportModal.tsx:455-728) ------------- */
.sc-scrim { position: absolute; inset: 0; background: rgba(13, 14, 16, 0.5); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.sc-modal {
  position: absolute; left: 50%; top: 50%; width: 768px; margin-left: -384px;
  background: #fbfbfa; border: 1px solid var(--br-hairline); border-radius: 0;
  box-shadow: 0 24px 70px rgba(13, 14, 16, 0.30);
  padding: 30px 34px 26px;
  /* The centring half-step lives here rather than in the timeline, so the
     cursor targets inside it measure correctly at boot — before the first
     render has applied any transform of its own. */
  transform: translateY(-50%);
}
.sc-modal-title { margin: 8px 0 0; font-size: 22px; font-weight: 500; letter-spacing: -0.01em; color: #1e2124; }
.sc-modal-body { margin: 10px 0 0; font-size: 13px; line-height: 1.6; color: #636363; }
.sc-form-label { display: block; margin: 0 0 8px; font-size: 13px; font-weight: 500; color: #1e2124; }
.sc-textarea { width: 100%; min-height: 84px; padding: 12px 14px; border: 1px solid var(--br-input-border); background: #ffffff; font-size: 16px; line-height: 1.6; color: var(--br-ink); }
.sc-helper { margin: 8px 0 0; font-size: 12px; line-height: 1.55; color: var(--br-ink-light); }
.sc-ok-disc { width: 36px; height: 36px; border-radius: 9999px; display: flex; align-items: center; justify-content: center; }
.sc-url {
  margin-top: 10px; padding: 12px 14px;
  background: rgba(30, 33, 36, 0.04); border: 1px solid var(--br-hairline);
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 13px; color: var(--br-ink);
  word-break: break-all;
}
.sc-copy-btn {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px;
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--br-ink); background: transparent; border: 1px solid var(--br-input-border); border-radius: 0;
}
.sc-modal-foot { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--br-hairline); }

/* ---- Act 7: the end card ---------------------------------------------- */
/* The wordmark gesture is the product's own (index.css:1172-1184):
   letter-spacing tightens 0.4em -> 0.2em as it fades in. Driven from the
   timeline so a held frame is exact. */
.sc-end-mark { position: absolute; left: 0; right: 0; text-align: center; font-size: 46px; font-weight: 500; color: #efefef; line-height: 1; }
.sc-end-sub  { position: absolute; left: 0; right: 0; text-align: center; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: #b9b9b9; }
/* transform-origin 0% 50%, like .mini-boot-underline (index.css:1201-1205) */
.sc-end-rule { position: absolute; height: 1px; background: rgba(255, 255, 255, 0.28); transform-origin: 0% 50%; }
.sc-end-line { position: absolute; left: 0; right: 0; text-align: center; font-size: 66px; font-weight: 400; letter-spacing: -0.025em; line-height: 1.12; color: #efefef; }
.sc-end-foot { position: absolute; left: 0; right: 0; text-align: center; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: 0.14em; color: #8a8f95; }

/* ============================================================
   Film-only chrome — camera, cursor, emphasis. Namespaced so it
   is never mistaken for ORBIT product styling.
   ============================================================ */

#stage {
  position: relative;
  width: 1920px;
  height: 1080px;
  overflow: hidden;
  background: #0d0e10;
  transform-origin: top left;
}

/* The report viewport. Its right edge is what the exec-Orbie panel
   pushes (execOrbiePanelLayout.ts) — the centered rails re-centre into
   the narrowed area rather than hiding behind the panel. */
#viewport {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  right: 0;
  overflow: hidden;
}

/* Sticky nav rail — `sticky top-0 z-40` + `px-[30px] pt-[15px]` */
#nav-rail {
  position: absolute;
  top: 0; left: 0; right: 0;
  padding: 15px 30px 0;
  z-index: 40;
}
.nav-pill { max-width: 1280px; margin: 0 auto; border-radius: 6px; }
.nav-inner { display: flex; align-items: center; padding: 0 30px; height: 68px; }
.nav-back {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 500; color: #b9b9b9;
  padding: 6px 8px; border-radius: 2px;
}
.nav-div { width: 1px; height: 20px; background: rgba(255,255,255,0.1); margin: 0 8px; }
.nav-tabs { display: flex; align-items: center; gap: 2px; flex: 1; justify-content: center; }
.nav-tab {
  position: relative; font-size: 16px; font-weight: 400;
  padding: 8px 12px; white-space: nowrap; color: #b9b9b9;
}
.nav-tab::after {
  content: ''; position: absolute; left: 12px; right: 12px; bottom: 0;
  height: 2px; background: #fff; opacity: var(--ulop, 0);
}
.nav-caret { display: flex; align-items: center; padding: 0 4px; margin-left: -12px; color: #b9b9b9; }
.nav-tools { display: flex; align-items: center; gap: 8px; }
.nav-chip {
  width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
  border-radius: 2px; border: 1px solid transparent; color: #b9b9b9;
}

/* Exec-Orbie floating pill (ExecOrbieLauncher.tsx:102-152) */
#orbie-pill {
  position: absolute; bottom: 24px; right: 24px; z-index: 400;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 16px 10px 14px;
  background: #fbfbfa;
  border: 1px solid var(--br-hairline);
  border-radius: 9999px;
  box-shadow: 0 4px 20px rgba(13, 14, 16, 0.16);
  color: #1e2124;
}
#orbie-pill .lbl { font-size: 14px; line-height: 1; }

/* Exec-Orbie side panel (ExecOrbieChatPanel.tsx:300-362) */
#orbie-panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: 420px; z-index: 9998;
  display: flex; flex-direction: column;
  background: #fbfbfa;
  border-left: 1px solid var(--br-hairline);
  box-shadow: 0 8px 40px rgba(13, 14, 16, 0.18);
}
.op-head { flex-shrink: 0; padding: 16px 20px 12px; border-bottom: 1px solid var(--br-hairline); }
.op-head-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.op-wordmark { display: inline-flex; align-items: center; gap: 6px; color: var(--br-ink); }
.op-body { flex: 1; overflow: hidden; padding: 12px 20px; }
.op-turn { font-size: 15px; line-height: 1.625; color: var(--br-ink); max-width: 88%; }
.op-user {
  margin-left: auto; max-width: 82%; border-radius: 10px; padding: 10px 14px;
  font-size: 15px; line-height: 1.625;
  background: rgba(30, 33, 36, 0.05);
  border: 1px solid var(--br-hairline);
}
.op-chip {
  display: block; text-align: left; padding: 4px 10px; border-radius: 2px;
  font-size: 12px; border: 1px solid var(--br-hairline);
  color: var(--br-ink-medium); background: transparent;
}
.op-avatar { display: flex; align-items: center; gap: 10px; min-height: 22px; padding: 4px 20px 12px; }
.op-foot { flex-shrink: 0; padding: 16px 20px; border-top: 1px solid var(--br-hairline); }
/* The composer sits at REST: the hairline `--br-input-border`, not the
   focused ink border. The panel does focus its textarea on open
   (ExecOrbieChatPanel.tsx:256), but a focused field draws a heavy ink box
   around a #ffffff fill on the panel's #fbfbfa surface, which reads as a
   second, differently-coloured panel rather than as one composer. The
   resting border is what the product looks like in use. */
.op-composer { display: flex; align-items: center; }
/* Right-aligned action row, then the product-mandated disclosure beneath. */
.op-actions { margin-top: 10px; display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
/* `disabled:opacity-50` — the Ask button is disabled while the composer is
   empty, which it is for the whole film. */
.op-ask { opacity: 0.5; }
.op-disclaim { margin: 10px 0 0; font-size: 10.5px; line-height: 1.375; color: var(--br-ink-light); }

/* Thinking-label shimmer (bondrand.css:828-848) — the Anthropic-style
   highlight band sweeping through the glyphs via background-clip: text.
   The gradient recipe is the product's; the SWEEP is driven from the
   timeline instead of a CSS keyframe, because a paused keyframe parks the
   gradient off the glyphs and the screenshot rig would capture a label
   that is half-invisible. */
.br-thinking-shimmer {
  background-image: linear-gradient(100deg,
    #7a7a7a 0%, #7a7a7a 38%, #c4c4c4 50%, #7a7a7a 62%, #7a7a7a 100%);
  background-size: 200% auto;
  background-repeat: no-repeat;
  background-position: 50% center;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Film cursor — a plain macOS-style arrow, no product analogue. */
#film-cursor {
  position: absolute; top: 0; left: 0; z-index: 10000;
  pointer-events: none; opacity: 0;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.35));
}

/* Marketing emphasis: a forest-green hairline that draws under a figure
   the film is calling out. The accent's one sanctioned appearance. */
.emph-rule {
  position: absolute; left: 0; bottom: -10px; height: 2px;
  background: var(--br-accent);
  transform-origin: left center;
  transform: scaleX(0);
}
.emph-rule.on-dark { background: #a3b18a; }