/* ============================================================
   GuideU — v2 landing
   Palette (locked, logo reference v6):
     terracotta #DD5A36 · warm paper #F7F4EE · warm black #1C1A17
     warm gray #4A4439 · surfaces #F1ECE3 / #E8E1D4 / #D8CFBD
   Type: Fraunces (display serif) · Geist (body/UI) · Geist Mono (labels)
   ============================================================ */

:root {
  --paper: #F7F4EE;
  --surface-1: #F1ECE3;
  --surface-2: #E8E1D4;
  --surface-3: #D8CFBD;
  --ink: #1C1A17;
  --ink-2: #4A4439;
  --ink-3: #635C4E;
  --terra: #DD5A36;
  --terra-hover: #C84A29;
  --terra-soft: #FBE5DC;
  --line: rgba(28, 26, 23, 0.14);
  --line-soft: rgba(28, 26, 23, 0.08);
  --dark: #1C1A17;
  --dark-line: rgba(247, 244, 238, 0.14);
  --dark-dim: #B5AC9D;

  --display: "Source Serif 4", Georgia, "Times New Roman", serif;
  --body: "Geist", ui-sans-serif, system-ui, sans-serif;
  --mono: "Geist Mono", ui-monospace, "Cascadia Mono", monospace;

  --gutter: clamp(20px, 4.5vw, 56px);
  --max: 1320px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--terra); color: #fff; }

img, svg { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

:focus-visible {
  outline: 2px solid var(--terra);
  outline-offset: 3px;
  border-radius: 2px;
}

.container {
  position: relative; /* anchors the vertical rail labels */
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---------- shared type ---------- */

.eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* Section header board — the Use-cases pattern reused: a tall label tile on
   the left, heading + optional subtext beside it. Grey tile (quieter sibling
   of the terracotta Use-cases tile). */
.head-board {
  display: grid;
  grid-template-columns: minmax(200px, 280px) 1fr;
  margin-bottom: clamp(40px, 6vh, 64px);
}
.head-tile {
  display: flex;
  align-items: flex-start;
  padding: 24px 26px;
}
/* secondary label tiles — a quieter tint so the terra Use Cases tile reads as
   the single deliberate brand block, not a peer of equal weight */
.head-tile-grey { background: var(--surface-2); }
.head-tile-word {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(2.2rem, 3.2vw, 3.2rem);
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.head-main {
  padding: clamp(28px, 3.5vw, 52px) clamp(28px, 4vw, 60px);
  align-self: center;
}
.head-main h2 { font-size: clamp(1.7rem, 2.9vw, 2.7rem); }
.head-main .band-sub { margin-top: 16px; }

@media (max-width: 820px) {
  .head-board { display: block; }
  .head-tile { width: min(240px, 70%); padding: 20px 22px; }
  .head-main { padding: 28px 0 0; }
}

/* How it works — same board grid; the steps sit in column 2, row 2, so the
   2×2 grid box spans the full width of the head-main column (NOT the inset
   text) and the space under the tile stays empty. head-main is untouched. */
.hiw-board {
  display: grid;
  grid-template-columns: minmax(200px, 280px) 1fr;
}
.hiw-board .head-tile { grid-column: 1; grid-row: 1; }
.hiw-board .head-main { grid-column: 2; grid-row: 1; }
.hiw-board .steps-row {
  grid-column: 2;
  grid-row: 2;
  grid-template-columns: 1fr 1fr;
}
/* card padding mirrors head-main's padding exactly */
.hiw-board .steps-row li {
  padding: clamp(28px, 3.5vw, 52px) clamp(28px, 4vw, 60px);
}

@media (max-width: 820px) {
  .hiw-board { display: block; }
  .hiw-board .head-tile { width: min(240px, 70%); }
  .hiw-board .head-main { margin-top: 28px; }
  .hiw-board .steps-row { margin-top: clamp(36px, 6vh, 56px); }
}
@media (max-width: 560px) {
  .hiw-board .steps-row { grid-template-columns: 1fr; }
}


h1, h2 {
  font-family: var(--display);
  font-weight: 450;
  letter-spacing: -0.015em;
  line-height: 1.08;
  text-wrap: balance;
}

/* pin the text-grade optical cut at every size — sturdy strokes, low
   contrast, wedge serifs (the reference look), never the thin display cut */
h1, h2, h3, .fq-text, .g-title, blockquote, .signature {
  font-variation-settings: "opsz" 15;
}

.band-sub { color: var(--ink-3); font-size: 15px; max-width: 34ch; }

.text-link {
  color: var(--terra);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 0.2s var(--ease);
}
.text-link:hover { color: var(--terra-hover); }

.hairline { height: 1px; background: var(--line); width: 100%; }

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--body);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  padding: 10px 18px;
  border-radius: 7px;
  border: 1px solid transparent;
  transition: background-color 0.2s var(--ease), transform 0.2s var(--ease), border-color 0.2s var(--ease);
}
.btn svg { width: 15px; height: 15px; transition: transform 0.25s var(--ease); }
.btn:hover svg { transform: translateX(3px); }
.btn:active { transform: translateY(1px); }

.btn-primary { background: var(--terra); color: #fff; }
.btn-primary:hover { background: var(--terra-hover); }

.btn-paper { background: var(--paper); color: var(--ink); }
.btn-paper:hover { background: #FDFBF7; }

.btn-lg { font-size: 15px; padding: 13px 24px; border-radius: 8px; }

.cta-note { font-size: 13px; color: var(--ink-3); }

/* ============================================================
   HEADER
   ============================================================ */

/* Full-width masthead. At rest: solid paper. Scrolled: the fill turns to
   frosted PAPER (translucent + blur) so the page color diffuses through it —
   most visible crossing the dark band and terra tiles. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--paper);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s var(--ease), background-color 0.3s var(--ease);
}
.site-header.scrolled {
  border-bottom-color: var(--line-soft);
  background: rgba(247, 244, 238, 0.8);
  -webkit-backdrop-filter: blur(12px) saturate(1.15);
  backdrop-filter: blur(12px) saturate(1.15);
}

.header-inner {
  max-width: var(--max);
  margin-inline: auto;
  padding: 16px var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.lockup { display: inline-flex; align-items: center; gap: 10px; }
.lockup-glyph { height: 34px; width: auto; }
.lockup-word {
  font-family: var(--body);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1;
}

.main-nav { display: flex; align-items: center; gap: 32px; }
/* nav as editorial micro-labels — same vocabulary as the eyebrows/stickers */
.main-nav a:not(.btn) {
  position: relative;
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
  transition: color 0.2s var(--ease);
}
.main-nav a:not(.btn):hover { color: var(--ink); }
.main-nav a:not(.btn)::after {
  content: "";
  position: absolute;
  left: 0; bottom: -4px;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--ease);
}
.main-nav a:not(.btn):hover::after { transform: scaleX(1); }

.menu-btn {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 44px; height: 44px;
  padding: 10px;
  background: none;
  border: 0;
  cursor: pointer;
}
.menu-btn span {
  display: block;
  height: 2px;
  background: var(--ink);
  border-radius: 1px;
  transition: transform 0.3s var(--ease);
}
.menu-btn[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
.menu-btn[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }

.mobile-nav {
  display: none;
  flex-direction: column;
  gap: 4px;
  padding: 8px var(--gutter) 24px;
  border-bottom: 1px solid var(--line-soft);
  background: var(--paper);
}
.mobile-nav a:not(.btn) {
  font-size: 17px;
  font-weight: 500;
  padding: 12px 0;
  border-bottom: 1px solid var(--line-soft);
}
.mobile-nav .btn { margin-top: 16px; justify-content: center; }
.mobile-nav.open { display: flex; }

@media (max-width: 820px) {
  .main-nav { display: none; }
  .menu-btn { display: flex; }
  /* the open menu matches the frosted masthead it hangs from */
  .site-header.scrolled .mobile-nav.open {
    background: rgba(247, 244, 238, 0.9);
    -webkit-backdrop-filter: blur(12px) saturate(1.15);
    backdrop-filter: blur(12px) saturate(1.15);
  }
}

/* ============================================================
   HERO
   ============================================================ */

.hero {
  position: relative;
  overflow: hidden;
  padding-top: 80px;
}

.hero-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 7.5fr) minmax(0, 3fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: start;
}


.hero h1 {
  font-size: clamp(2.05rem, 3.4vw, 3.25rem);
  letter-spacing: -0.015em;
  max-width: 21ch;
}

.cycle-line { display: block; margin-top: 0.12em; }
/* keep the static word + cycling text on one line (avoids a lone 5th line);
   only where there's column room — mobile is free to wrap */
@media (min-width: 620px) { .cycle-line { white-space: nowrap; } }
.cycle {
  display: inline-block;
  color: var(--terra);
  transition: opacity 0.32s var(--ease), filter 0.32s var(--ease), transform 0.32s var(--ease);
}
.cycle.out { opacity: 0; filter: blur(7px); transform: translateY(6px); }

.hero-aside { padding-top: 0; }
.hero-aside .rule { height: 1px; background: var(--line); margin-bottom: 18px; }
.hero-aside p { font-size: 14.5px; line-height: 1.65; color: var(--ink-2); max-width: 34ch; }

.hero-cta { margin-top: 26px; }
.hero-cta .cta-note { margin-top: 10px; font-size: 11.5px; color: var(--ink-3); opacity: 0.8; }

/* link-style CTA — the header already carries the heavy button */
.cta-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  position: relative;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  padding-bottom: 3px;
  transition: color 0.2s var(--ease);
}
.cta-link svg { width: 15px; height: 15px; transition: transform 0.25s var(--ease); }
.cta-link::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1.5px;
  background: currentColor;
  transform-origin: left;
  transition: transform 0.3s var(--ease);
}
.cta-link:hover { color: var(--terra); }
.cta-link:hover svg { transform: translateX(4px); }

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-aside { max-width: 440px; }
}

/* ---------- scattered grid blocks (decor) ---------- */

/* Lives INSIDE .scene-shell, so every block is vertically confined to the
   graphic's band — never beside the headline (reference behaviour).
   --edge reaches from the shell's box out to the true viewport edge, so
   blocks sit flush against the screen and abut / tuck under the graphic.
   Chunky checkerboard slabs; static (no drift). Accents sit diagonal:
   terracotta top-left, terracotta bottom-right — like the reference. */
.decor {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  --edge: calc((100% - 100vw) / 2);
}
.blk { position: absolute; }

/* left — upper cluster (stepping checkerboard) */
.b1 { left: var(--edge); top: 7%; width: 116px; height: 44px; background: var(--terra); }
.b2 { left: calc(var(--edge) + 56px); top: calc(7% + 44px); width: 60px; height: 60px; background: var(--surface-2); }
.b3 { left: var(--edge); top: calc(7% + 104px); width: 56px; height: 56px; background: var(--surface-3); }
/* left — lower slab */
.b4 { left: var(--edge); top: 66%; width: 116px; height: 48px; background: var(--surface-2); }

/* right — upper slab */
.b5 { right: var(--edge); top: 4%; width: 116px; height: 40px; background: var(--surface-3); }
/* right — lower cluster (stepping checkerboard, accent at the bottom) */
.b6 { right: var(--edge); top: 58%; width: 116px; height: 64px; background: var(--surface-2); }
.b7 { right: calc(var(--edge) + 56px); top: calc(58% + 64px); width: 60px; height: 60px; background: var(--surface-3); }
.b8 { right: var(--edge); top: calc(58% + 124px); width: 56px; height: 56px; background: var(--terra); }

/* the graphic sits above the blocks — they abut and tuck under its edges */
.scene { z-index: 2; }

@media (max-width: 900px) {
  /* side margins are too narrow for the slabs on small screens */
  .decor { display: none; }
}

/* ============================================================
   HERO SCENE — looping walkthrough
   Authored at 680 × 460, scaled to fit.
   ============================================================ */

/* full content width, like the reference — the decor blocks live in the
   side padding that remains. Inner design space widens on desktop so the
   mock app stays true-to-scale instead of blowing up. */
.scene-shell {
  position: relative;
  z-index: 2;
  margin: clamp(76px, 11vh, 128px) auto 0;
  --scene-w: 680;
}
@media (min-width: 900px) { .scene-shell { --scene-w: 1000; } }

.scene {
  position: relative;
  width: 100%;
  aspect-ratio: calc(var(--scene-w) / 460);
  border: 1px solid var(--line);
  background: #FCFAF5;
  box-shadow: 0 32px 80px -36px rgba(28, 26, 23, 0.35);
  overflow: hidden;
}

/* inner coordinate space: var(--scene-w) × 460 — no chrome, plain canvas */
.scene-body {
  position: absolute;
  top: 0; left: 0;
  width: calc(var(--scene-w) * 1px);
  height: 460px;
  transform-origin: top left;
  font-family: var(--body);
}

/* cycle progress — one thin ink line filling linearly across a whole loop.
   Driven by a single WAAPI scaleX animation; fades out (never reverses) at the
   end of each cycle and starts again from 0. */
.cycle-progress {
  position: absolute;
  left: 0; bottom: 0;
  height: 3px;
  width: 100%;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left;
  opacity: 0;
  transition: opacity 0.4s var(--ease);
  z-index: 3;
}

.app {
  position: absolute; inset: 0;
  display: grid;
  grid-template-columns: 148px 1fr;
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease), filter 0.6s var(--ease);
}
.app.faded { opacity: 0.1; filter: blur(6px); }
/* blank — the canvas empties on loop exit; the next loop clears this class so
   the app rises gently back in, a reverse of the exit */
.app.blank { opacity: 0; transform: translateY(12px); filter: blur(4px); pointer-events: none; }

.app-side {
  border-right: 1px solid var(--line-soft);
  padding: 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.app-brand { display: flex; align-items: center; gap: 8px; padding: 2px 6px 14px; }
.app-brand .mk { width: 22px; height: 22px; background: var(--surface-3); flex: none; }

.nav-i {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 9px;
  border-radius: 7px;
  font-size: 12px;
  color: var(--ink-3);
}
.nav-i .ic { width: 13px; height: 13px; border-radius: 4px; background: var(--surface-2); }
.nav-i.is-target { color: var(--ink); background: var(--surface-1); }
.nav-i.is-target .ic { background: var(--surface-3); }

.side-foot {
  margin-top: auto;
  display: flex; align-items: center; gap: 8px;
  padding: 10px 6px 2px;
  border-top: 1px solid var(--line-soft);
}

.av { width: 20px; height: 20px; border-radius: 50%; background: var(--surface-3); flex: none; }

/* main area holds two stacked views; clicks swap them */
.app-main { position: relative; }
.view {
  position: absolute;
  inset: 0;
  padding: 22px 24px;
  transition: opacity 0.45s var(--ease);
}
.view-generic.off { opacity: 0; }
.view-team { opacity: 0; pointer-events: none; }
.view-team.on { opacity: 1; }

.view-generic { display: flex; flex-direction: column; }
.gcards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 18px; }
.gcard { height: 160px; background: var(--surface-1); }
.gcaps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 10px; }
/* text-block skeleton — fills the canvas below the cards */
.glist {
  flex: 1;
  margin-top: 26px;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}
.glist span { display: block; height: 12px; background: var(--surface-1); }

.toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 13px; }
.drop {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11.5px; color: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 6px 11px;
  background: #fffdf9;
}
.drop i { font-style: normal; font-size: 9px; color: var(--ink-3); }
.search { flex: 1; height: 28px; background: var(--surface-1); border: 1px solid var(--line-soft); }

.table { border: 1px solid var(--line-soft); border-radius: 10px; overflow: hidden; background: #fffdf9; }
.trow {
  display: grid;
  grid-template-columns: 1fr 96px 62px;
  gap: 12px;
  align-items: center;
  padding: 9px 13px;
  border-bottom: 1px solid var(--line-soft);
}
.trow:last-child { border-bottom: 0; }
.thead { background: var(--surface-1); }
.person { display: flex; align-items: center; gap: 9px; }
.ln { height: 7px; background: var(--surface-2); display: inline-block; }
.chip { height: 13px; background: var(--surface-2); }

/* the team view fills the canvas; the page action pins to the bottom */
.view-team { display: flex; flex-direction: column; }
.app-foot { margin-top: auto; padding-top: 14px; }
/* Send invite — unlocked by clicking the Role filter */
.primary {
  display: inline-flex; align-items: center;
  font-size: 12px; font-weight: 600;
  color: #fff;
  background: var(--ink-2);
  padding: 8px 15px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}
.primary.on { opacity: 1; transform: none; }

/* extension pieces */
.ext-glyph {
  position: absolute;
  top: 12px; right: 14px;
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 9px;
  background: #fff;
  border: 1px solid rgba(221, 90, 54, 0.45);
  box-shadow: 0 6px 18px -6px rgba(221, 90, 54, 0.45);
  cursor: default;
  z-index: 6;
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
}
.ext-glyph svg { width: 19px; height: 19px; }
.ext-glyph.hidden { opacity: 0; transform: scale(0.8); }

.panel {
  position: absolute;
  top: 12px; right: 14px;
  width: 208px;
  z-index: 7;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px;
  box-shadow: 0 22px 54px -20px rgba(28, 26, 23, 0.45);
  opacity: 0;
  transform: translateX(14px) scale(0.98);
  transition: opacity 0.45s var(--ease), transform 0.45s var(--ease);
}
.panel.on { opacity: 1; transform: none; }

.panel-h { display: flex; align-items: center; gap: 7px; }
.panel-h .gu, .g-head .gu, .eg-head .gu {
  width: 18px; height: 18px; border-radius: 5px;
  background: var(--terra);
  display: flex; align-items: center; justify-content: center;
  flex: none;
}
.panel-h .gu svg, .g-head .gu svg, .eg-head .gu svg { width: 11px; height: 11px; }
.pbrand { font-size: 12px; font-weight: 600; letter-spacing: -0.01em; }
.rec-tag {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--mono);
  font-size: 8.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--terra);
}
.rec { width: 6px; height: 6px; border-radius: 50%; background: var(--terra); animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: 0.35; } }

.steps { display: flex; flex-direction: column; gap: 7px; margin: 11px 0; padding-top: 10px; border-top: 1px solid var(--line-soft); }
.step {
  display: flex; align-items: center; gap: 8px;
  opacity: 0;
  transform: translateY(5px);
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
}
.step.on { opacity: 1; transform: none; }
.step .n { font-family: var(--mono); font-size: 9px; color: var(--terra); width: 15px; }
.step .t { font-size: 11.5px; color: var(--ink-2); }
.step .ck {
  margin-left: auto;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--terra-soft);
  color: var(--terra);
  font-size: 8px;
  display: flex; align-items: center; justify-content: center;
}

/* idle panel — freshly opened: a single big round record button, centered.
   min-height matches the capturing state (header + 3 steps + foot = 188px in
   design coordinates) so the panel doesn't jump when capture starts. */
.panel.idle {
  min-height: 188px;
  display: flex;
  flex-direction: column;
}
.rec-btn {
  display: none;
  margin: auto; /* centers in the idle panel's free space */
  padding: 9px 16px;
  align-items: center; justify-content: center;
  gap: 7px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--terra);
  background: #fff;
  border: 1.5px solid var(--terra);
  border-radius: 7px;
  cursor: default;
}
.rec-btn .rec-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--terra); }
.panel.idle .rec-btn { display: flex; animation: recpulse 1.6s cubic-bezier(0.4, 0, 0.2, 1) infinite; }
/* a soft terra halo breathes outward — the one thing asking to be clicked */
@keyframes recpulse {
  0% { box-shadow: 0 0 0 0 rgba(221, 90, 54, 0.4); }
  70%, 100% { box-shadow: 0 0 0 12px rgba(221, 90, 54, 0); }
}
.panel.idle .rec-tag,
.panel.idle .steps,
.panel.idle .panel-foot { display: none; }

.panel-foot { border-top: 1px solid var(--line-soft); padding-top: 10px; }
.finish {
  display: inline-flex; align-items: center;
  font-size: 11px; font-weight: 600;
  color: #fff;
  background: var(--terra);
  border-radius: 7px;
  padding: 6px 12px;
}

/* highlight ring / ripple / cursor */
.hl {
  position: absolute;
  z-index: 5;
  border: 2px solid var(--terra);
  border-radius: 8px;
  opacity: 0;
  box-shadow: 0 0 0 4px rgba(221, 90, 54, 0.14);
  pointer-events: none;
  transition: opacity 0.3s var(--ease);
}
/* success confetti — bursts from the Done button on finish */
.confetti { position: absolute; inset: 0; z-index: 8; pointer-events: none; overflow: visible; }
.rib { position: absolute; width: 9px; height: 3px; opacity: 0; will-change: transform, opacity; }

.ripple {
  position: absolute;
  z-index: 8;
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 2px solid var(--terra);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%);
}
.ripple.go { animation: rip 0.55s ease-out; }
/* the scale must live INSIDE transform, after the centering translate —
   a standalone `scale` property multiplies the -50%,-50% offset as it grows,
   which made the ring drift toward the top-left instead of rippling in place */
@keyframes rip {
  from { opacity: 1; transform: translate(-50%, -50%) scale(0.4); }
  to { opacity: 0; transform: translate(-50%, -50%) scale(2.4); }
}
/* demo cursor — an arrow pointer, larger than any real OS cursor, so it
   clearly belongs to the animation, not the visitor */
.cursor {
  position: absolute;
  z-index: 9;
  left: 0; top: 0;
  width: 34px; height: 34px;
  pointer-events: none;
  filter: drop-shadow(0 3px 5px rgba(28, 26, 23, 0.35));
}
.cursor.press svg { transform: scale(0.82); }
/* overflow visible: the arrow path is shifted so its tip sits at the
   hotspot (viewBox top-left) — the stroke crosses the box edge and must
   not be clipped */
.cursor svg { transition: transform 0.12s ease; overflow: visible; }

/* outputs */
.outputs {
  position: absolute; inset: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s var(--ease);
}
.outputs.on { opacity: 1; }

/* one artifact, two faces — guide (form) left, video right, joined seam */
.out-card {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: min(680px, 90%);
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 26px 60px -24px rgba(28, 26, 23, 0.45);
  opacity: 0;
  transform: translateY(14px) scale(0.97);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}
.outputs.on .out-card { opacity: 1; transform: none; transition-delay: 0.08s; }
/* desktop design space is 1000 wide — let the payoff card claim more of it */
@media (min-width: 900px) { .out-card { width: min(760px, 78%); } }

.pane-guide { padding: 20px 22px 22px; display: flex; flex-direction: column; }
.f-row {
  display: flex; align-items: center; gap: 10px;
  margin-top: 16px;
}
.f-row .fn { font-family: var(--mono); font-size: 8.5px; color: var(--terra); flex: none; width: 14px; }
.f-row .ft { font-size: 11.5px; color: var(--ink-2); white-space: nowrap; flex: none; width: 62px; }

/* thumbnail — a minimal mini-screenshot: a few flat lines + one terracotta
   accent marking where the step acts. No nested boxes. */
.g-thumb {
  flex: 1;
  height: 42px;
  display: flex; flex-direction: column; justify-content: center;
  gap: 6px;
  padding: 8px 11px;
  background: #F5F1E9;
  transition: background 0.35s var(--ease);
}
.g-thumb i { height: 5px; background: var(--surface-2); }
/* the step's primary shape — neutral tan by default, full accent when current */
.g-thumb i.hit { background: var(--surface-3); transition: background 0.35s var(--ease); }
.g-thumb i.hit.chip { width: 52%; }
.g-thumb i.hit.btn { height: 13px; width: 34%; align-self: flex-end; }

/* current step (one at a time): bg unchanged; the non-prominent lines firm up
   to the tan primary tone and the primary shape goes full accent — no border */
.f-row.cur .g-thumb i { background: var(--surface-3); }
.f-row.cur .g-thumb i.hit { background: var(--terra); }

/* the right pane is a dark VIDEO PLAYER — its darkness is what keeps it
   distinct from the light written guide on the left, all the way through */
.pane-video {
  position: relative;
  background: #2E2A23;
  overflow: hidden;
}
.v-player { position: absolute; inset: 0; overflow: hidden; background: #2E2A23; }

/* the video CANVAS — light footage inset inside the dark player. It shows
   PRODUCED compositions (title card + step scenes), not a raw window. */
.v-screen {
  position: absolute;
  top: 16px; left: 16px; right: 16px; bottom: 26px;
  background: var(--paper);
  box-shadow: 0 8px 20px -8px rgba(0, 0, 0, 0.55);
  overflow: hidden;
}

/* compositions — absolutely stacked; the video "cuts" between them.
   Each cut is a soft directional push: the outgoing frame fades in place
   while the incoming one drifts in from the right, like an edited video. */
.vp-comp {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity 0.6s var(--ease);
  pointer-events: none;
}
.vp-comp.on { opacity: 1; animation: vpcut 0.7s var(--ease); }
@keyframes vpcut {
  from { opacity: 0; transform: translateX(14px); }
  to { opacity: 1; transform: none; }
}

/* shared produced-step vocabulary — the guide's own numbers and serif */
.vp-n {
  display: block;
  font-family: var(--mono);
  font-size: 8.5px;
  letter-spacing: 0.12em;
  color: var(--terra);
  margin-bottom: 4px;
}
.vp-t {
  font-family: var(--display);
  font-weight: 500;
  font-size: 14.5px;
  line-height: 1.25;
  color: var(--ink);
}

/* frame 0 — branded title card */
.vpc-title { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; }
.vp-logo {
  width: 22px; height: 22px; flex: none;
  background: var(--terra);
  display: flex; align-items: center; justify-content: center;
}
.vp-logo svg { width: 14px; height: 14px; }
.vp-card-title { font-size: 13.5px; }

/* the cropped wireframe details share one card treatment */
.vp-nav, .vp-drop, .vp-form {
  background: #fff;
  border: 1px solid var(--line-soft);
  box-shadow: 0 10px 22px -12px rgba(28, 26, 23, 0.35);
}

/* scene 1 — step title left, cropped sidebar-nav detail right */
.vpc-s1 { display: flex; align-items: center; gap: 15px; padding: 0 16px; }
.vpc-s1 .vp-text { flex: 1; }
.vp-nav {
  flex: 1.1;
  padding: 10px 11px;
  display: flex; flex-direction: column; gap: 8px;
}
.vp-nav i { display: block; height: 7px; background: var(--surface-2); }
.vp-nav i.short { width: 64%; }
.vp-nav .vp-target { height: 14px; background: var(--surface-3); transition: background 0.25s var(--ease); }
.vp-nav .vp-target.lit { background: var(--terra); }

/* scene 2 — title strip above a zoomed dropdown */
.vpc-s2 { display: flex; flex-direction: column; justify-content: center; gap: 9px; padding: 0 17%; }
.vp-t-row { display: flex; align-items: center; }
.vp-t-row .vp-n { display: inline; margin: 0 8px 0 0; }
.vp-drop { display: flex; flex-direction: column; }
.vp-opt { display: flex; align-items: center; padding: 8px 11px; border-bottom: 1px solid var(--line-soft); }
.vp-opt:last-child { border-bottom: 0; }
.vp-opt i { width: 46%; height: 7px; background: var(--surface-2); }
.vp-opt.vp-tgt i { background: var(--surface-3); transition: background 0.25s var(--ease); }
.vp-opt.lit { background: var(--surface-1); }
.vp-opt.lit i { background: var(--terra); }

/* scene 3 — cropped form-footer detail left, step title right */
.vpc-s3 { display: flex; align-items: center; gap: 15px; padding: 0 16px; }
.vp-form {
  flex: 1.2;
  padding: 11px 12px;
  display: flex; flex-direction: column; gap: 8px;
}
.vp-form i { display: block; height: 6px; background: var(--surface-2); }
.vp-btn {
  margin-top: 4px;
  width: 52%; height: 15px;
  align-self: flex-end;
  background: var(--surface-3);
  transition: background 0.25s var(--ease);
}
.vp-btn.lit { background: var(--terra); }
.vpc-s3 .vp-text { flex: 1; }

/* the cursor lives in the player: it clicks play, then acts on the window */
.v-cursor {
  position: absolute; left: 0; top: 0;
  width: 18px; height: 18px;
  z-index: 5;
  pointer-events: none;
  opacity: 0;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.4));
  transition: opacity 0.3s var(--ease);
}
/* overflow visible: the hand path is shifted so its fingertip sits at the
   hotspot — the thumb extends left of the box and must not be clipped */
.v-cursor svg { width: 100%; height: 100%; transition: transform 0.12s ease; overflow: visible; }
.v-cursor.press svg { transform: scale(0.8); }

.v-ring {
  position: absolute; z-index: 4;
  width: 15px; height: 15px;
  border-radius: 50%;
  border: 2px solid var(--terra);
  box-shadow: 0 0 0 1.5px rgba(247, 244, 238, 0.5);
  transform: translate(-50%, -50%);
  opacity: 0; pointer-events: none;
}
.v-ring.go { animation: rip 0.55s ease-out; }

/* scrubber on the dark player chrome, below the recorded window */
.v-prog {
  position: absolute; left: 16px; right: 16px; bottom: 13px;
  height: 4px; z-index: 3; border-radius: 2px;
  background: rgba(247, 244, 238, 0.16);
}
.v-prog i { display: block; height: 100%; width: 0; background: var(--terra); border-radius: 2px; }
.scene.playing .v-prog i { animation: vpfill 6.4s linear forwards; }
@keyframes vpfill { from { width: 0; } to { width: 100%; } }

/* poster — a dark scrim over the paused recording, with the play button.
   Lifts only when the cursor clicks it. */
.v-poster {
  position: absolute; inset: 0;
  z-index: 4;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(130px 90px at 50% 46%, rgba(221, 90, 54, 0.28), transparent 72%), rgba(46, 42, 35, 0.72);
  transition: opacity 0.45s var(--ease);
}
.v-poster.gone { opacity: 0; pointer-events: none; }
.play {
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--terra);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 24px -6px rgba(221, 90, 54, 0.7);
  transition: transform 0.16s var(--ease);
}
.v-poster.tap .play { transform: scale(0.9); }
.play svg { width: 16px; height: 16px; margin-left: 2px; }

/* "ready to publish" tag — the site's own flat sticker vocabulary (mono,
   uppercase, terracotta), pressed onto the seam at a slight tilt. Fades as
   the canvas goes blank. */
.success {
  position: absolute;
  left: 50%; top: 50%;
  z-index: 9;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 11px;
  background: var(--terra);
  color: #fff;
  font-family: var(--mono);
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 8px 20px -8px rgba(221, 90, 54, 0.5);
  opacity: 0;
  transform: translate(-50%, calc(-50% + 8px)) rotate(-9deg) scale(0.85);
  transition: opacity 0.3s var(--ease), transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.success svg { width: 12px; height: 12px; }
.success.on { opacity: 1; transform: translate(-50%, -50%) rotate(-3deg) scale(1); }

.g-head { display: flex; align-items: center; gap: 7px; margin-bottom: 8px; }
.g-kicker { font-family: var(--mono); font-size: 8px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--terra); }
.g-title { font-family: var(--display); font-weight: 500; font-size: 15.5px; line-height: 1.15; margin-bottom: 2px; }

/* ============================================================
   HOW IT WORKS
   ============================================================ */

.steps-band { padding: clamp(80px, 12vh, 140px) 0 clamp(72px, 10vh, 120px); }

.band-head { margin-bottom: clamp(40px, 6vh, 64px); }
.band-head .eyebrow { margin-bottom: 16px; }
.band-head h2 { font-size: clamp(1.9rem, 3.6vw, 3.1rem); max-width: 22ch; }
.band-head h2 .line { display: block; }
/* the spans set the break — don't let max-width force a third line */
.use-cases .band-head h2 { max-width: none; }
/* supporting line, read second, on the same axis directly below the heading */
.band-head .band-sub { margin-top: 18px; }

@media (max-width: 640px) {
  .band-head h2 .line { display: inline; }
}

.steps-row {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.steps-row li {
  position: relative;
  padding: 26px 24px 28px;
  background: var(--surface-1);
}
/* terra number tile — a small sibling of the section brand tiles */
.step-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  background: var(--terra);
  color: var(--paper);
  font-family: var(--mono);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.steps-row h3 {
  font-family: var(--display);
  font-weight: 500;
  font-size: 21px;
  line-height: 1.18;
  letter-spacing: -0.01em;
  margin: 16px 0 10px;
}
.steps-row p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-3);
}

@media (max-width: 980px) {
  .steps-row { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .steps-row { grid-template-columns: 1fr; }
}

/* ============================================================
   STATEMENT
   ============================================================ */

.statement {
  background: var(--surface-1);
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  padding: clamp(88px, 14vh, 160px) 0;
}
/* single left-aligned column — importance reads top-to-bottom, no diagonal */
.statement-col { display: flex; flex-direction: column; align-items: flex-start; }
.statement h2 {
  font-size: clamp(1.8rem, 4vw, 3.4rem);
  margin-top: 20px;
  text-wrap: initial;
}
/* sentence-per-line on desktop; collapses to natural wrapping on mobile */
.statement h2 .line { display: block; }
.statement h2 em {
  display: block;
  font-style: italic;
  margin-top: 0;
  color: var(--terra);
}
.statement-sub {
  margin-top: 34px;
  font-size: 15px;
  color: var(--ink-3);
  max-width: 46ch;
}
@media (max-width: 640px) {
  .statement h2 .line { display: inline; }
}

/* ============================================================
   USE CASES
   ============================================================ */

.use-cases { padding: clamp(80px, 12vh, 150px) 0; }

/* board: brand tile (col 1, row 1) + headline (col 2, row 1) + stacked
   full-band rows below (col 2) — reference-style editorial rows */
.uc-board {
  display: grid;
  grid-template-columns: minmax(200px, 280px) 1fr;
  grid-template-rows: auto 1fr;
}

/* the eyebrow as a brand block */
.uc-brand {
  position: relative;
  grid-column: 1;
  grid-row: 1;
  display: flex;
  align-items: flex-start;
  padding: 24px 26px;
}
/* the terra fill lives on a ::before so the reveal can clip IT rather than
   the tile itself (see the reveal section for why that matters) */
.uc-brand::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--terra);
}
.uc-brand-word {
  position: relative; /* paints above the ::before fill */
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(2.4rem, 3.4vw, 3.4rem);
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: var(--paper);
}
.uc-brand > .uc-sticker {
  position: absolute;
  top: 20px;
  left: -10px;
  transform: rotate(-6deg);
}

.uc-headline {
  grid-column: 2;
  grid-row: 1;
  padding: clamp(32px, 4vw, 56px) clamp(28px, 4vw, 60px);
  align-self: center;
}
.uc-headline h2 { font-size: clamp(1.7rem, 2.9vw, 2.7rem); }
.uc-headline h2 .line { display: block; }
.uc-headline .band-sub { margin-top: 16px; }

/* sticker tags — the reference's slapped-on labels, in brand terracotta */
.uc-sticker {
  display: inline-block;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 5px 10px;
  white-space: nowrap;
}
.tag-solid { background: var(--terra); color: #fff; }
.uc-brand .tag-solid { background: var(--paper); color: var(--terra); }
.tag-soft { background: var(--terra-soft); color: var(--terra-hover); }

/* stacked rows, alternating warm tints */
.uc-rows { grid-column: 2; grid-row: 2; }
.uc-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(90px, 9vw, 120px);
  align-items: center;
  gap: clamp(24px, 4vw, 64px);
  padding: clamp(30px, 4.5vw, 56px) clamp(28px, 4vw, 60px);
}
.uc-row:nth-child(odd) { background: var(--surface-1); }
.uc-row:nth-child(even) { border: 1px solid #F1ECE3; }

.uc-row h3 {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(1.7rem, 2.7vw, 2.5rem);
  letter-spacing: -0.02em;
  line-height: 1.02;
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-start;
  gap: 12px;
}
/* sticker sits as a rotated kicker above the (now longer) title;
   slaps on (scale settle) shortly after its row lands */
.uc-row h3 .uc-sticker {
  transform: rotate(-4deg) scale(0.85);
  margin-left: 2px;
  opacity: 0;
  transition: opacity 0.3s var(--ease) 0.3s, transform 0.35s var(--ease) 0.3s;
}
.uc-row:nth-child(even) h3 .uc-sticker { transform: rotate(3deg) scale(0.85); }
.uc-row.in h3 .uc-sticker { opacity: 1; transform: rotate(-4deg) scale(1); }
.uc-row.in:nth-child(even) h3 .uc-sticker { transform: rotate(3deg) scale(1); }
.uc-row p {
  margin-top: 14px;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--ink-3);
  max-width: 46ch;
}
.uc-art { width: 100%; height: auto; justify-self: end; }

@media (max-width: 820px) {
  .uc-board { display: block; }
  .uc-brand {
    width: min(240px, 70%);
    padding: 20px 22px;
  }
  .uc-brand > .uc-sticker { left: auto; right: -8px; }
  .uc-headline { padding: 28px 0 12px; }
  .uc-row {
    grid-template-columns: 1fr;
    padding: 28px clamp(18px, 4vw, 28px);
  }
  .uc-art { width: 88px; justify-self: start; }
}

/* ============================================================
   THE MOAT — dark band
   ============================================================ */

.moat {
  background: var(--dark);
  color: var(--paper);
  padding: clamp(88px, 14vh, 160px) 0;
}
.moat .eyebrow { color: var(--dark-dim); }
.moat h2 {
  font-size: clamp(2.1rem, 4.6vw, 4.2rem);
  margin-top: 20px;
  /* the <br> sets the break — no max-width, so no orphaned third line */
  text-wrap: initial;
}

/* ---------- edit stage — the hero's artifact, being edited ---------- */

.edit-shell { margin-top: clamp(48px, 7vh, 72px); }

/* stage frame — authored coordinate space, scaled to fit (hero technique).
   The video pane is a 16:9 frame, which sets the stage height. Mobile stacks
   the panes (guide over a full-width 16:9 video); desktop sets them side by
   side (each pane 500×281 ≈ 16:9). */
.estage {
  position: relative;
  width: 100%;
  --escene-w: 640;
  --escene-h: 674;
  aspect-ratio: calc(var(--escene-w) / var(--escene-h));
  border: 1px solid var(--dark-line);
  background: #2E2A23;
  overflow: hidden;
}
@media (min-width: 900px) { .estage { --escene-w: 1000; --escene-h: 300; } }

/* inner coordinate space: var(--escene-w) × var(--escene-h) */
.estage-body {
  position: absolute;
  top: 0; left: 0;
  width: calc(var(--escene-w) * 1px);
  height: calc(var(--escene-h) * 1px);
  transform-origin: top left;
  font-family: var(--body);
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 300px 1fr; /* mobile: guide, then the ~16:9 video */
  /* a slow, gentle fade so the entrance is as unhurried as the exit */
  transition: opacity 1.1s cubic-bezier(0.4, 0, 0.2, 1);
}
@media (min-width: 900px) {
  .estage-body { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; }
}
/* the stage empties between loops; the next loop lifts this to rise back in */
.estage-body.off { opacity: 0; }

/* cycle progress — one terra line filling linearly across a whole loop,
   mirroring the hero's ink line; fades out (never reverses) at cycle end */
.ecycle-progress {
  position: absolute;
  left: 0; bottom: 0;
  height: 3px;
  width: 100%;
  background: var(--terra);
  transform: scaleX(0);
  transform-origin: left;
  opacity: 0;
  transition: opacity 0.4s var(--ease);
  z-index: 3;
}

/* left pane — the guide open in the editor. Content is vertically centered
   so the shorter 16:9 pane stays balanced. */
.e-guide {
  position: relative;
  background: #FCFAF5;
  padding: 26px clamp(22px, 3.5vw, 32px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.eg-title {
  font-family: var(--display);
  font-weight: 500;
  font-size: 18px;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 16px;
}
.erows { display: flex; flex-direction: column; gap: 9px; }
.erow {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 7px 12px;
  background: #fff;
  border: 1px solid var(--line-soft);
  transition: box-shadow 0.3s var(--ease), border-color 0.3s var(--ease);
}
/* picked up mid-drag */
.erow.lift {
  border-color: var(--line);
  box-shadow: 0 14px 30px -12px rgba(28, 26, 23, 0.35);
  z-index: 3;
}
.grip { display: flex; flex-direction: column; gap: 2.5px; flex: none; }
.grip i { width: 8px; height: 2px; background: var(--surface-3); }
.rn { font-family: var(--mono); font-size: 9px; color: var(--terra); width: 16px; flex: none; }
.rt { font-size: 12.5px; color: var(--ink-2); flex: 1; white-space: nowrap; }
.eword { font-weight: 600; color: var(--ink); padding: 0 2px; transition: background-color 0.2s ease; }
.eword.sel { background: rgba(221, 90, 54, 0.25); }
.ecaret {
  display: inline-block;
  width: 1.5px; height: 1em;
  background: var(--ink);
  vertical-align: -0.12em;
  margin-left: 1px;
  opacity: 0;
}
.ecaret.on { opacity: 1; animation: blink 0.8s step-end infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* mini-screenshot thumbnails — the guide's flat vocabulary */
.ethumb {
  flex: none;
  width: 84px; height: 32px;
  display: flex; flex-direction: column; justify-content: center;
  gap: 4px;
  padding: 5px 9px;
  background: #F5F1E9;
}
.ethumb i { height: 4px; background: var(--surface-2); }
.ethumb .short { width: 60%; }
.ethumb .tlogo { width: 9px; height: 9px; flex: none; background: var(--surface-3); transition: background 0.35s var(--ease); }
.ethumb .tlogo.lit { background: var(--terra); }
.ethumb .thit { background: var(--surface-3); }
.ethumb .thit.chip { width: 52%; height: 8px; }
.ethumb .thit.btn { height: 10px; width: 36%; align-self: flex-end; }

/* the add affordance — present, quiet, never acted on */
.ghost-row {
  border: 1px dashed var(--line);
  background: transparent;
  gap: 8px;
  padding: 7px 12px;
  font-size: 11.5px;
  color: var(--ink-3);
}
.ghost-row .plus { font-size: 13px; line-height: 1; color: var(--ink-3); }

/* the expanded screenshot — scene 3's editing surface */
.eshot {
  position: absolute;
  z-index: 5;
  left: 50%; top: 52%;
  width: 74%;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 24px 54px -20px rgba(28, 26, 23, 0.4);
  padding: 14px 16px 18px;
  display: flex; flex-direction: column; gap: 9px;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.35);
  transform-origin: 78% 12%;
  transition: opacity 0.4s var(--ease), transform 0.45s var(--ease);
}
.eshot.on { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.eshot.away { opacity: 0; transform: translate(-50%, -50%) scale(0.4); }
.eshot-bar {
  display: flex; align-items: center; gap: 8px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line-soft);
  margin-bottom: 2px;
}
.slogo {
  width: 16px; height: 16px; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-3);
  transition: background 0.2s var(--ease);
}
.slogo svg { width: 11px; height: 11px; opacity: 0; transition: opacity 0.2s var(--ease); }
/* the guide's logo updates in a quick snap-fade — no scaling; the video's
   logo (ca-brand) is the one that lands big and settles */
.slogo.lit { background: var(--terra); }
.slogo.lit svg { opacity: 1; }
.sln { display: block; height: 6px; background: var(--surface-1); }
.eshot-bar .sln { height: 7px; background: var(--surface-2); }

/* marquee — the marked area; a plain rectangle, dragged diagonally, solid
   stroke (matches the site's flat, sharp-cornered line vocabulary) */
.emarq {
  position: absolute;
  border: 1.5px solid var(--terra);
  background: rgba(221, 90, 54, 0.07);
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
}
.emarq.on { opacity: 1; }
/* AI pass: the marked area pulses while it's being retouched */
.emarq.working { animation: markpulse 0.55s ease-in-out; }
@keyframes markpulse {
  0%, 100% { background: rgba(221, 90, 54, 0.07); }
  50% { background: rgba(221, 90, 54, 0.24); }
}
.eprompt {
  position: absolute;
  z-index: 2;
  display: flex; align-items: center; gap: 6px;
  background: var(--ink);
  color: #fff;
  font-size: 10.5px;
  padding: 6px 10px;
  white-space: nowrap;
  box-shadow: 0 10px 24px -10px rgba(28, 26, 23, 0.5);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}
.eprompt.on { opacity: 1; transform: none; }
.eprompt i { font-style: normal; font-size: 10px; color: var(--terra-soft); }
.eprompt .ecaret.pc { background: #fff; }

/* right pane — a VIDEO PLAYER. The inner frame fills the whole pane (minus an
   even padding), and the controls overlay its bottom like hover controls. */
.e-video {
  position: relative;
  background: #2E2A23;
  padding: 16px;
  display: flex;
}

/* the inner video frame — fills the pane; the footage lives inside it */
.ev-screen {
  position: relative;
  flex: 1;
  min-height: 0;
  background: var(--paper);
  box-shadow: 0 8px 20px -8px rgba(0, 0, 0, 0.55);
  overflow: hidden;
}
/* each scene is a composition layer that fades in as its scene plays. Text is
   placed within the layout (not a caption); the barebone is framed differently
   per composition (a cropped detail, or the full screen cropped by the frame). */
.ev-comp {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity 0.45s var(--ease);
}
.ev-comp.on { opacity: 1; }

/* shared produced-title vocabulary — a serif line, the changing value a token */
.cmp-title {
  font-family: var(--display);
  font-weight: 500;
  font-size: 21px; line-height: 1.24;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.cmp-title b {
  display: inline-block;
  font-weight: 600; color: #fff;
  background: var(--terra);
  padding: 1px 8px;
  vertical-align: baseline;
}
.cmp-title b.flash { animation: wordpulse 0.55s var(--ease); }
@keyframes wordpulse { 0%, 100% { transform: scale(1); } 45% { transform: scale(1.15); } }

/* scene 1 — narration column beside a cropped role control. The changing
   value sits on its own line (a <br>) so retyping never reflows it. */
.comp1 { display: flex; align-items: center; gap: 24px; padding: 20px 24px; }
.cmp1-text { width: 42%; flex: none; }
/* reserve the token's line height so an empty token (mid retype) never
   collapses line 2 and re-centers the block — no flicker */
.cmp1-text .cmp-title b { margin-top: 13px; min-height: 1.3em; vertical-align: top; }
.cmp1-shot { flex: 1; display: flex; align-items: center; justify-content: center; }
.zdrop {
  width: 100%;
  background: #fff;
  border: 1px solid var(--line-soft);
  box-shadow: 0 16px 32px -18px rgba(28, 26, 23, 0.4);
  display: flex; flex-direction: column;
}
.zopt {
  display: flex; align-items: center;
  padding: 13px 15px;
  border-bottom: 1px solid var(--line-soft);
  background: #fff;
}
.zopt:last-child { border-bottom: 0; }
.zopt i { width: 54%; height: 9px; background: var(--surface-2); }
.zopt.lit { background: var(--surface-1); }
.zopt.lit i { background: var(--terra); }

/* scenes 2 & 3 — a title, then the full barebone as a large screenshot
   cropped off the bottom-right corner of the canvas (composition, not chrome) */
.comp2 { display: block; }
.cmp2-title {
  position: absolute;
  top: 24px; left: 26px;
  z-index: 2;
  max-width: 60%;
}
.cmp2-title .cmp-title { font-size: 25px; line-height: 1.16; }
.cmp2-shot {
  position: absolute;
  left: 30%; top: 37%;
  width: 84%; height: 82%;
  background: #fff;
  border: 1px solid var(--line-soft);
  box-shadow: 0 24px 46px -22px rgba(28, 26, 23, 0.42);
  display: flex; gap: 18px;
  padding: 18px 20px;
  /* visible so the retouched logo's big landing state can overlap the frame
     instead of being cropped by it (the ev-screen still crops the canvas) */
  overflow: visible;
}
.ca-side { width: 22%; display: flex; flex-direction: column; gap: 12px; }
.ca-side i { height: 7px; background: var(--surface-2); }
.ca-brand {
  position: relative;
  z-index: 2; /* the big landing state paints over the frame's content */
  width: 36px; height: 36px; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-3);
  transition: background 0.4s var(--ease);
}
.ca-brand svg { width: 23px; height: 23px; opacity: 0; transition: opacity 0.4s var(--ease); }
.ca-brand.lit { background: var(--terra); animation: logoland 1.05s var(--ease); }
.ca-brand.lit svg { opacity: 1; }
/* the new logo lands BIG, then settles into place — hard to miss.
   Phases: fade in quickly AT full size (0–22%), hold there a beat (22–40%),
   only then shrink into place (40–100%). */
@keyframes logoland {
  0% { transform: scale(3.4); opacity: 0; }
  22% { transform: scale(3.4); opacity: 1; }
  40% { transform: scale(3.4); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
.ca-main { flex: 1; display: flex; flex-direction: column; gap: 13px; }
.ca-main i { height: 7px; background: var(--surface-2); }
.ca-btn { margin-top: 6px; width: 42%; height: 22px; background: var(--terra); }

/* transport bar — the unmistakable video chrome */
.ev-transport {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 4;
  display: flex; align-items: center; gap: 11px;
  padding: 22px 12px 9px;
  /* a soft scrim so the light controls read over the (light) footage,
     exactly like the gradient behind real hover controls */
  background: linear-gradient(to top, rgba(28, 26, 23, 0.55), rgba(28, 26, 23, 0.14) 55%, transparent);
  pointer-events: none;
}
/* the whole bar is ghosted — one muted tone, no bright button, no grab
   handle — so it reads as a REPRESENTATION of a player, not a usable one */
.ev-play {
  flex: none;
  width: 14px; height: 14px;
  color: rgba(247, 244, 238, 0.4);
  display: flex; align-items: center; justify-content: center;
}
.ev-play svg { width: 100%; height: 100%; }
.ev-scrub {
  position: relative;
  flex: 1;
  height: 3px;
  background: rgba(247, 244, 238, 0.1);
}
.ev-scrub i {
  position: absolute;
  left: 0; top: 0; height: 100%;
  width: 50%;
  background: rgba(247, 244, 238, 0.34);
  transition: width 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}
.ev-scrub.snap i { transition: width 0.32s cubic-bezier(0.5, 0, 0.2, 1); }
/* a flat position marker (not a round, draggable-looking knob) */
.ev-head {
  position: absolute;
  top: -2px; left: 50%;
  width: 2px; height: calc(100% + 4px);
  background: rgba(247, 244, 238, 0.55);
  transform: translateX(-50%);
  transition: left 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}
.ev-head.snap { transition: left 0.32s cubic-bezier(0.5, 0, 0.2, 1); }

/* "in sync" sticker — stamps onto the seam, same vocabulary as the hero's */
.esync-tag {
  position: absolute;
  left: 50%; top: 50%;
  z-index: 9;
  padding: 5px 11px;
  background: var(--terra);
  color: #fff;
  font-family: var(--mono);
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 8px 20px -8px rgba(221, 90, 54, 0.5);
  opacity: 0;
  transform: translate(-50%, calc(-50% + 8px)) rotate(-9deg) scale(0.85);
  transition: opacity 0.3s var(--ease), transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.esync-tag.on { opacity: 1; transform: translate(-50%, -50%) rotate(-3deg) scale(1); }

/* feature cards — one per scene; bordered tiles, edge-to-edge with shared
   hairlines. The active card's border turns terra while its scene plays. */
.ecards {
  display: flex;
  margin-top: clamp(40px, 6vh, 64px);
}
.ecard {
  position: relative;
  flex: 1;
  padding: clamp(24px, 2.6vw, 38px) clamp(24px, 2.8vw, 42px);
  border: 1px solid var(--dark-line);
}
/* collapse shared edges to a single hairline */
.ecard + .ecard { margin-left: -1px; }
/* the lit card announces itself with its mono scene number — the same
   01/02/03 vocabulary as the guide rows and the hero video scenes. The
   number occupies its line even when hidden, so nothing jumps. */
.ecard-n {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--terra);
  margin-bottom: 10px;
  opacity: 0;
  transform: translateY(3px);
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}
.ecard.on .ecard-n { opacity: 1; transform: none; }
.ecard h3 {
  font-family: var(--display);
  font-weight: 480;
  font-size: clamp(1.1rem, 1.5vw, 1.35rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--dark-dim);
  transition: color 0.4s var(--ease);
}
.ecard p {
  margin-top: 12px;
  font-size: 13.5px;
  line-height: 1.65;
  color: rgba(181, 172, 157, 0.55);
  transition: color 0.4s var(--ease);
}
.ecard.on h3 { color: var(--paper); }
.ecard.on p { color: var(--dark-dim); }

@media (max-width: 760px) {
  .ecards { flex-direction: column; margin-top: 32px; }
  .ecard + .ecard { margin-left: 0; margin-top: -1px; }
}

/* ============================================================
   STORY
   ============================================================ */

.story { padding: clamp(88px, 13vh, 150px) 0; }

/* the spread — quote on top, the founder's letter below (concept B) */
.story-spread {
  display: flex;
  flex-direction: column;
  gap: clamp(72px, 11vh, 120px);
}

/* left — the quote, open on the paper */
.story-kicker {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 22px;
}
.sq-text {
  font-family: var(--display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.9rem, 3.4vw, 3rem);
  line-height: 1.25;
  letter-spacing: -0.015em;
}
/* the money phrase — the video comps' white-on-terra text block */
.sq-mark {
  background: var(--terra);
  color: #fff;
  padding: 1px 8px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.sq-attr {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-top: 24px;
}
.sq-av {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--ink);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 500;
  flex: none;
}
.sq-attr p { font-size: 13.5px; color: var(--ink-3); }
.sq-attr strong { color: var(--ink); font-weight: 600; }

/* right — the founder's note as a letter card */
.founder-card {
  position: relative;
  background: var(--surface-1);
  padding: clamp(30px, 3.4vw, 46px) clamp(24px, 3vw, 40px) clamp(24px, 2.8vw, 36px);
}
.founder-sticker {
  position: absolute;
  top: -11px; left: clamp(20px, 2.6vw, 34px);
  background: var(--terra);
  color: #fff;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  padding: 5px 10px;
  white-space: nowrap;
}
.founder-title {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(1.3rem, 2vw, 1.7rem);
  margin-bottom: 16px;
}
.founder-card p { color: var(--ink-2); font-size: 15px; line-height: 1.7; max-width: 72ch; }
.founder-mail { margin-top: 18px; }
.founder-card .signature {
  font-family: var(--display);
  font-style: italic;
  font-size: 15.5px;
  color: var(--ink);
  margin-top: 22px;
}

@media (max-width: 860px) {
  .story-spread { gap: 44px; }
}

/* ============================================================
   FAQ
   ============================================================ */

.faq {
  background: var(--surface-1);
  border-top: 1px solid var(--line-soft);
  padding: clamp(80px, 12vh, 150px) 0;
}
.faq-grid {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 8fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
}
.faq-head h2 { font-size: clamp(1.9rem, 3.4vw, 3rem); margin: 18px 0 20px; }
.faq-head h2::before {
  content: "";
  display: block;
  width: 22px;
  height: 2px;
  background: var(--terra);
  margin-bottom: 18px;
}

.faq-list { list-style: none; border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q {
  display: flex;
  align-items: baseline;
  gap: 18px;
  width: 100%;
  padding: 20px 4px;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-family: var(--body);
  color: var(--ink);
}
.fq-num { font-family: var(--mono); font-size: 11px; color: var(--ink-3); transition: color 0.25s ease; }
.fq-text {
  flex: 1;
  font-family: var(--display);
  font-weight: 480;
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  letter-spacing: -0.01em;
  line-height: 1.25;
}
.fq-ind { position: relative; width: 14px; height: 14px; flex: none; align-self: center; }
.fq-ind::before, .fq-ind::after {
  content: "";
  position: absolute;
  left: 0; top: 6px;
  width: 14px; height: 2px;
  background: var(--ink-3);
  border-radius: 1px;
  transition: transform 0.35s var(--ease), background-color 0.25s ease;
}
.fq-ind::after { transform: rotate(90deg); }
.faq-item.open .fq-ind::after { transform: rotate(0deg); }
.faq-item.open .fq-ind::before, .faq-item.open .fq-ind::after { background: var(--terra); }
.faq-item.open .fq-num { color: var(--terra); }
.faq-q:hover .fq-num { color: var(--terra); }

.faq-a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.45s var(--ease);
}
.faq-a > div { overflow: hidden; }
.faq-a p {
  padding: 0 36px 22px 33px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink-2);
  max-width: 60ch;
}
.faq-item.open .faq-a { grid-template-rows: 1fr; }

@media (max-width: 860px) {
  .faq-grid { grid-template-columns: 1fr; }
  .faq-a p { padding-left: 29px; }
}

/* ============================================================
   FOOTER — dark band
   ============================================================ */

.site-footer {
  position: relative;
  background: var(--dark);
  color: var(--paper);
  padding: clamp(88px, 13vh, 150px) 0 0;
  overflow: hidden;
}
.site-footer .eyebrow { color: var(--dark-dim); }

.foot-cta {
  font-size: clamp(1.9rem, 4vw, 3.6rem);
  max-width: 22ch;
  margin-top: 20px;
}
.foot-actions {
  margin-top: 36px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}
/* link-style CTA on the dark band — mirrors the hero, light on dark */
.site-footer .cta-link { color: var(--terra); }
.site-footer .cta-link:hover { color: var(--paper); }
.site-footer .cta-note { color: var(--dark-dim); font-size: 11.5px; opacity: 0.85; }

.foot-cols {
  display: grid;
  grid-template-columns: minmax(0, 5fr) repeat(3, minmax(0, 2fr));
  gap: 40px;
  margin-top: clamp(72px, 10vh, 110px);
  padding-top: 48px;
  border-top: 1px solid var(--dark-line);
}
.foot-brand .lockup-word { color: var(--paper); }
.foot-brand > p { margin-top: 16px; font-size: 14px; color: var(--dark-dim); max-width: 26ch; }

.foot-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dark-dim);
  margin-bottom: 18px;
}
.foot-col { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.foot-col a {
  position: relative;
  font-size: 14.5px;
  color: rgba(247, 244, 238, 0.82);
  transition: color 0.2s ease;
}
.foot-col a:hover { color: var(--paper); }
.foot-col a::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--ease);
}
.foot-col a:hover::after { transform: scaleX(1); }

.foot-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: clamp(56px, 8vh, 80px);
  padding: 24px 0;
  border-top: 1px solid var(--dark-line);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dark-dim);
}
.to-top { color: rgba(247, 244, 238, 0.82); transition: color 0.2s ease; }
.to-top:hover { color: var(--paper); }

.ghost {
  font-family: var(--body);
  font-weight: 600;
  letter-spacing: -0.04em;
  font-size: clamp(6rem, 22vw, 21rem);
  line-height: 0.72;
  text-align: center;
  color: rgba(247, 244, 238, 0.045);
  user-select: none;
  pointer-events: none;
  margin-top: clamp(8px, 2vh, 24px);
  transform: translateY(0.08em);
}

@media (max-width: 860px) {
  .foot-cols { grid-template-columns: 1fr 1fr; }
  .foot-brand { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  .foot-cols { grid-template-columns: 1fr; }
}

/* ============================================================
   MOTION — load + scroll reveals (one-shot, subtle)
   ============================================================ */

/* ============================================================
   SHARP CORNERS — 0 radius on every rounded rectangle.
   True circles (avatars, dots, play buttons, ripple) stay circular;
   the brand glyph SVG is locked and untouched.
   ============================================================ */

:focus-visible { border-radius: 0; }
.btn, .btn-lg, .nav-i, .nav-i .ic, .drop, .search, .table, .chip,
.ext-glyph, .panel, .panel-h .gu, .g-head .gu, .step .ck, .finish,
.hl, .v-cap, .v-bar .pb, .v-bar .pb i,
.erow, .ethumb, .eshot, .emarq, .eprompt, .esync-tag,
.zdrop, .zopt, .ca-brand, .ca-btn, .cmp-title b, .cmp2-shot, .ev-scrub, .ev-scrub i,
.fq-ind::before, .fq-ind::after {
  border-radius: 0;
}

.load-rise {
  opacity: 0;
  transform: translateY(18px);
  animation: rise 0.9s var(--ease) forwards;
  animation-delay: var(--d, 0ms);
}
@keyframes rise { to { opacity: 1; transform: none; } }

.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
  transition-delay: var(--d, 0ms);
}
.reveal.in { opacity: 1; transform: none; }

/* ---------- entry-motion variants (one-shot, keyed to the same observer) ---------- */

/* footer ghost watermark: slow, deep fade only */
.reveal.reveal-ghost { transform: none; transition: opacity 1.2s var(--ease) 0.25s; }

/* terra ticks draw in from the left after their block lands */
.faq-head h2::before {
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s var(--ease) 0.25s;
}
.faq-head h2.in::before { transform: scaleX(1); }

/* step number tiles settle in shortly after their card lands */
.step-tile {
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 0.4s var(--ease) 0.25s, transform 0.4s var(--ease) 0.25s;
}
.steps-row li.in .step-tile { opacity: 1; transform: none; }

/* How it works board — tile slides from its anchoring left edge, headline rises */
.hiw-board.reveal { opacity: 1; transform: none; }
.hiw-board .head-tile,
.hiw-board .head-main {
  opacity: 0;
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
.hiw-board .head-tile { transform: translateX(-18px); }
.hiw-board .head-main { transform: translateY(14px); transition-delay: 0.1s; }
.hiw-board.in .head-tile,
.hiw-board.in .head-main { opacity: 1; transform: none; }

/* Statement — line-by-line rise; the italic punchline lands last */
.statement h2.reveal { opacity: 1; transform: none; }
.statement h2 .line {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
.statement h2 .line:nth-child(2) { transition-delay: 90ms; }
.statement h2 .line:nth-child(3) { transition-delay: 220ms; }
.statement h2.in .line { opacity: 1; transform: none; }

/* Use cases — the terra tile wipes down like ink laying in.
   IMPORTANT: the clip rides the tile's CONTENTS (::before fill + children),
   never the observed .uc-brand box itself — Chrome factors a target's own
   clip-path into IntersectionObserver geometry, so a fully self-clipped
   element reports zero intersection and its reveal deadlocks (never fires). */
.uc-brand.reveal { opacity: 1; transform: none; }
.uc-brand.reveal::before,
.uc-brand.reveal > * {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.6s var(--ease);
}
.uc-brand.reveal.in::before,
.uc-brand.reveal.in > * { clip-path: inset(0 0 0 0); }

/* use-case line art draws on; the terra fill arrives at the end */
.uc-art [stroke] { transition: stroke-dashoffset 0.8s var(--ease) 0.15s; }
.uc-row.in .uc-art [stroke] { stroke-dashoffset: 0 !important; }
.uc-art [fill] { opacity: 0; transition: opacity 0.4s var(--ease) 0.75s; }
.uc-row.in .uc-art [fill] { opacity: 1; }

/* Client story — the founder sticker slaps on after its card lands */
.founder-sticker {
  opacity: 0;
  transform: rotate(-3deg) scale(0.85);
  transition: opacity 0.3s var(--ease) 0.35s, transform 0.35s var(--ease) 0.35s;
}
.founder-card.in .founder-sticker { opacity: 1; transform: rotate(-3deg) scale(1); }

/* FAQ — the ten rows arrive as a ripple */
.faq-list .faq-item:nth-child(2) { --d: 40ms; }
.faq-list .faq-item:nth-child(3) { --d: 80ms; }
.faq-list .faq-item:nth-child(4) { --d: 120ms; }
.faq-list .faq-item:nth-child(5) { --d: 160ms; }
.faq-list .faq-item:nth-child(6) { --d: 200ms; }
.faq-list .faq-item:nth-child(7) { --d: 240ms; }
.faq-list .faq-item:nth-child(8) { --d: 280ms; }
.faq-list .faq-item:nth-child(9) { --d: 320ms; }
.faq-list .faq-item:nth-child(10) { --d: 360ms; }

@media (prefers-reduced-motion: reduce) {
  .load-rise { animation: none; opacity: 1; transform: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .cycle, .blk, .step, .panel, .outputs, .out-video, .out-guide, .app,
  .vp-comp, .vp-target, .vp-opt i, .vp-btn,
  .estage-body, .erow, .ev-comp, .ca-brand, .ev-scrub i, .ev-head, .eshot, .emarq, .eprompt,
  .ecard, .ecard h3, .ecard p, .ecard-n { transition: none !important; }
  .rec, .scene.playing .v-prog i, .ecaret.on { animation: none !important; }
  .ca-brand.lit, .slogo.lit, .panel.idle .rec-btn, .vp-comp.on { animation: none !important; }
  .success, .esync-tag { transition: none !important; }
  .statement h2 .line, .step-tile, .uc-art [fill],
  .hiw-board .head-tile, .hiw-board .head-main { opacity: 1 !important; transform: none !important; transition: none !important; }
  .uc-row h3 .uc-sticker, .founder-sticker { opacity: 1 !important; transition: none !important; }
  .uc-brand.reveal::before,
  .uc-brand.reveal > * { clip-path: none !important; transition: none !important; }
  .faq-head h2::before { transform: none !important; transition: none !important; }
}