/* ===========================================================
   Orca — orca1.app  |  Marketing landing
   Brand matched to the app (app/styles/orca.css):
   Palette:  ink #1e222a · soft-gold #f5cf6a · gold-deep #e0ad42
             charcoal #2b303b (navy retired) · teal #30849c (wave accent)
             silver #dbe0e6 · mist #f4f6f8 · paper #fff
   Type:     Space Grotesk (display) · Hanken Grotesk (body) · JetBrains Mono (data)
   =========================================================== */

:root {
  --ink: #1e222a;
  --ink-soft: #3a414b;
  --butter: #f5cf6a;
  --butter-deep: #e0ad42;
  --abyss: #2b303b;
  --abyss-2: #373d49;
  --teal: #30849c;
  --teal-deep: #256b80;
  --teal-light: #e4eef1;
  --silver: #dbe0e6;
  --mist: #f4f6f8;
  --paper: #ffffff;
  --line: #e6e9ee;

  --disp: "Space Grotesk", system-ui, sans-serif;
  --body: "Hanken Grotesk", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;

  --maxw: 1180px;
  --r: 16px;
  --r-sm: 10px;
  --shadow: 0 1px 2px rgba(20,23,28,.04), 0 12px 32px -12px rgba(20,23,28,.18);
  --shadow-lg: 0 30px 70px -28px rgba(43,48,59,.45);
  --ease: cubic-bezier(.22,.61,.36,1);
}

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

html { scroll-behavior: smooth; }

body {
  font-family: var(--body);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

.wrap { width: min(var(--maxw), 92vw); margin-inline: auto; }

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 8px;
  transition: top .2s var(--ease);
}
.skip-link:focus { top: 12px; }

:focus-visible {
  outline: 3px solid var(--butter-deep);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ---------- Eyebrow / headings ---------- */
.eyebrow {
  font-family: var(--mono);
  font-size: .74rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--butter-deep);
  display: inline-flex; align-items: center; gap: .55rem;
  flex-wrap: wrap; row-gap: .35rem;
}
.eyebrow::before {
  content: ""; width: 22px; height: 2px; background: var(--butter); display: inline-block;
  flex: none;
}
.eyebrow--dark { color: var(--ink-soft); }
.eyebrow--dark::before { background: var(--ink); }
/* the eyebrow copy sits to the left, the Shopify wordmark rides inline beside it.
   The text is sized to its own content (flex: 0 1 auto, not the full line) so the
   logo stays on the SAME line beside it on desktop instead of being pushed below;
   the eyebrow keeps flex-wrap so it can still wrap gracefully on narrow mobile. */
.eyebrow__text { flex: 0 1 auto; }
/* inline Shopify wordmark riding the hero eyebrow — vertically centered with the
   text and sized to roughly the line's cap height so it sits on one baseline */
.eyebrow__shopify {
  width: auto; height: 1.7em; flex: none;
  display: inline-block; align-self: center;
  position: relative; top: 0;
}

.h2 {
  font-family: var(--disp);
  font-weight: 700;
  font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3.1rem);
  line-height: 1.05;
  letter-spacing: -.02em;
  margin: .7rem 0 0;
  max-width: 18ch;
}
.h2--light { color: var(--mist); }

/* ---------- Buttons ---------- */
.btn {
  --pad-y: .82rem; --pad-x: 1.35rem;
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--disp); font-weight: 600; font-size: .98rem;
  padding: var(--pad-y) var(--pad-x);
  border-radius: 999px;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform .18s var(--ease), box-shadow .25s var(--ease),
              background .2s var(--ease), color .2s var(--ease);
  white-space: nowrap;
}
.btn--lg { --pad-y: 1rem; --pad-x: 1.7rem; font-size: 1.05rem; }
.btn--xl { --pad-y: 1.15rem; --pad-x: 2.2rem; font-size: 1.15rem; }

.btn--primary {
  background: var(--butter);
  color: var(--ink);
  box-shadow: 0 10px 24px -10px rgba(224,173,66,.7), inset 0 0 0 1px rgba(20,23,28,.06);
}
.btn--primary:hover {
  transform: translateY(-2px);
  background: var(--butter-deep);
  box-shadow: 0 16px 30px -10px rgba(224,173,66,.85);
}
.btn--ghost {
  background: transparent; color: var(--ink); border-color: var(--silver);
}
.btn--ghost:hover { transform: translateY(-2px); border-color: var(--ink); background: var(--mist); }

/* ---------- NAV ---------- */
.nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.78);
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.nav.is-stuck { border-color: var(--line); box-shadow: 0 8px 24px -18px rgba(20,23,28,.4); }
.nav__inner {
  width: min(var(--maxw), 94vw); margin-inline: auto;
  display: flex; align-items: center; gap: 1.5rem;
  height: 72px;
}
.brand { display: inline-flex; align-items: center; }
.brand__wordmark { height: 56px; width: auto; display: block; }
.brand__word { font-weight: 700; font-size: 1.45rem; letter-spacing: -.02em; }
.nav__links { margin-left: auto; display: flex; gap: 1.8rem; }
.nav__links a {
  font-size: .96rem; font-weight: 500; color: var(--ink-soft);
  position: relative; padding: .2rem 0;
}
.nav__links a::after {
  content: ""; position: absolute; left: 0; bottom: -2px; height: 2px; width: 0;
  background: var(--butter); transition: width .25s var(--ease);
}
.nav__links a:hover { color: var(--ink); }
.nav__links a:hover::after { width: 100%; }
.nav__cta { margin-left: .25rem; }

/* ---------- HERO ----------
   Top padding is kept small so the hero copy + animation stage sit just below the
   sticky nav with only a slim gap (no large empty band). align-items: start keeps
   the shorter column from stretching the row and pushing content down. */
.hero { position: relative; padding: clamp(.6rem, .2rem + 1.1vw, 1.35rem) 0 clamp(2rem,4vw,4rem); overflow: hidden; }
.hero__bg {
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(900px 500px at 88% -8%, rgba(245,207,106,.22), transparent 60%),
    radial-gradient(700px 600px at 0% 110%, rgba(43,48,59,.06), transparent 55%),
    var(--paper);
}
.hero__bg::after {
  content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(rgba(20,23,28,.035) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(20,23,28,.035) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(800px 600px at 75% 30%, #000, transparent 75%);
          mask-image: radial-gradient(800px 600px at 75% 30%, #000, transparent 75%);
}
.hero__grid {
  width: min(var(--maxw), 94vw); margin-inline: auto;
  display: grid; grid-template-columns: 1.02fr 1.1fr; gap: clamp(1.5rem, 3vw, 3.5rem);
  /* align both columns to the TOP so the animation stage rides up next to the
     hero copy / header instead of being vertically centered against the taller
     copy column (which left a large empty band above it). */
  align-items: start;
  min-height: 0;
}
.hero__title {
  font-family: var(--disp); font-weight: 700;
  font-size: clamp(1.95rem, .9rem + 4.7vw, 4.6rem);
  line-height: 1.0; letter-spacing: -.03em;
  margin: .75rem 0 1rem;
  overflow-wrap: break-word;
}
.hl {
  background: linear-gradient(180deg, transparent 62%, rgba(245,207,106,.85) 62%);
  padding: 0 .04em;
}
.hero__sub { font-size: clamp(1.05rem, .98rem + .4vw, 1.22rem); color: var(--ink-soft); max-width: 46ch; }
.hero__cta { display: flex; flex-wrap: wrap; gap: .8rem; margin: 1.7rem 0 1.1rem; }
.hero__note { font-size: .9rem; color: var(--ink-soft); display: flex; align-items: center; gap: .5rem; font-family: var(--mono); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--butter-deep); box-shadow: 0 0 0 4px rgba(224,173,66,.18); }

/* ===========================================================
   SIGNATURE SCENE — looping 3-beat workflow
   Beat 1 (panel visible ~4–30%)  yellow-box the vendor confirmation cells
   Beat 2 (panel visible ~37–63%) review the extracted order + correct via AI chat
   Beat 3 (panel visible ~70–96%) order becomes draft Shopify products

   TIMING MODEL (the fix):
   Every layer — panel, its inner content, the beat tracker — is driven by the
   SAME master loop (--loop) using the SAME beat base offsets as POSITIVE
   animation-delays: beat1 = 0, beat2 = .33·loop, beat3 = .66·loop.
   A panel with delay D is opacity-1 from (D+4%) to (D+30%) of the loop.
   Each beat's content shares that base offset (+ a tiny intra-beat stagger ≤2%)
   and uses the shared `contentIn` keyframe (fades in by 8%, holds, fades by 28%),
   so the content is ALWAYS visible exactly while its own panel is on screen.
   (Previously panels used negative delays while content used positive delays of a
   different magnitude — they landed in different thirds of the loop, leaving the
   review + product panels visibly BLANK. See marketing-anim-fix-report.md.)
   =========================================================== */
.scene {
  --loop: 26s;    /* 4 beats × ~6.5s each — comfortably readable */
  --b2: 0.25;     /* beat-2 (read) base offset (fraction of loop) */
  --b3: 0.50;     /* beat-3 (review) base offset */
  --b4: 0.75;     /* beat-4 (draft products) base offset */
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .9rem;
  width: 100%;
}

/* Shared content reveal — used by boxes, review items and cards.
   Settles in by 8% (just after the panel chrome at 4%), holds, fades by 28%
   (just before the panel leaves at 30%). Keeps every item inside its panel. */
@keyframes contentIn {
  0%   { opacity: 0; transform: translateY(8px) scale(.96); }
  6%   { opacity: 1; transform: translateY(0)   scale(1); }
  19%  { opacity: 1; transform: translateY(0)   scale(1); }
  22%  { opacity: 0; transform: translateY(-4px) scale(.99); }
  100% { opacity: 0; transform: translateY(-4px) scale(.99); }
}

/* ---- beat tracker ---- */
.scene__beats {
  list-style: none; display: flex; gap: .35rem; flex-wrap: wrap;
  font-family: var(--mono); font-size: .64rem; letter-spacing: .03em;
}
.scene__beats li {
  display: inline-flex; align-items: center; gap: .4rem;
  color: var(--ink-soft); opacity: .5;
  padding: .25rem .6rem; border-radius: 999px;
  border: 1px solid var(--line); background: var(--paper);
  transition: opacity .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
}
.beat__dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--silver); transition: background .3s var(--ease);
}
.scene.run .scene__beats li { animation: beatLit var(--loop) linear infinite; }
.scene.run .scene__beats li[data-beat="1"] { animation-delay: 0s; }
.scene.run .scene__beats li[data-beat="2"] { animation-delay: calc(var(--loop) * var(--b2)); }
.scene.run .scene__beats li[data-beat="3"] { animation-delay: calc(var(--loop) * var(--b3)); }
.scene.run .scene__beats li[data-beat="4"] { animation-delay: calc(var(--loop) * var(--b4)); }
/* lit while its panel is on screen (~3%–22% of the local cycle) */
@keyframes beatLit {
  0%, 2%    { opacity: .45; color: var(--ink-soft); border-color: var(--line); }
  5%, 21%   { opacity: 1; color: var(--ink); border-color: var(--butter); }
  24%, 100% { opacity: .45; color: var(--ink-soft); border-color: var(--line); }
}
/* dot color tied to lit state via the same timing offsets */
.scene.run .scene__beats li[data-beat] .beat__dot { animation: beatDot var(--loop) linear infinite; }
.scene.run .scene__beats li[data-beat="1"] .beat__dot { animation-delay: 0s; }
.scene.run .scene__beats li[data-beat="2"] .beat__dot { animation-delay: calc(var(--loop) * var(--b2)); }
.scene.run .scene__beats li[data-beat="3"] .beat__dot { animation-delay: calc(var(--loop) * var(--b3)); }
.scene.run .scene__beats li[data-beat="4"] .beat__dot { animation-delay: calc(var(--loop) * var(--b4)); }
@keyframes beatDot {
  0%, 2%    { background: var(--silver); box-shadow: none; }
  5%, 21%   { background: var(--butter-deep); box-shadow: 0 0 0 3px rgba(224,173,66,.22); }
  24%, 100% { background: var(--silver); box-shadow: none; }
}

/* ---- stage: panels stacked, fixed height to avoid layout shift ----
   Height is sized for the tallest beat (Beat 2 review: output + AI chat). ---- */
.stage {
  position: relative;
  min-height: 340px;
}
@media (min-width: 941px) { .stage { min-height: 358px; } }

.panel {
  position: absolute; inset: 0;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  padding: 16px 16px 18px;
  display: flex; flex-direction: column;
  opacity: 0;
  transform: translateY(10px) scale(.985);
  overflow: hidden;
}
.scene.run .panel { animation: panelCycle var(--loop) var(--ease) infinite; }
.scene.run .panel--drop   { animation-delay: 0s; }
.scene.run .panel--read   { animation-delay: calc(var(--loop) * var(--b2)); }
.scene.run .panel--review { animation-delay: calc(var(--loop) * var(--b3)); }
.scene.run .panel--shop   { animation-delay: calc(var(--loop) * var(--b4)); }
/* each panel is on-screen for ~one quarter of the loop, with a short cross-fade */
@keyframes panelCycle {
  0%   { opacity: 0; transform: translateY(10px) scale(.985); }
  3%   { opacity: 1; transform: translateY(0) scale(1); }
  22%  { opacity: 1; transform: translateY(0) scale(1); }
  25%  { opacity: 0; transform: translateY(-8px) scale(.99); }
  100% { opacity: 0; transform: translateY(-8px) scale(.99); }
}

/* panel chrome shared */
.panel__cap {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--disp); font-weight: 600; font-size: .8rem;
  padding-bottom: 11px; margin-bottom: 12px;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
}
.panel__cap img { border-radius: 5px; }
.panel__file { font-family: var(--mono); font-size: .68rem; color: var(--ink-soft); }
.panel__brand { font-family: var(--mono); font-size: .62rem; color: var(--ink-soft); margin-left: auto; letter-spacing: .02em; }
.panel__pill {
  margin-left: auto; font-family: var(--mono); font-size: .58rem; letter-spacing: .06em;
  color: var(--ink); background: var(--mist); border: 1px solid var(--line);
  padding: 3px 8px; border-radius: 999px;
}
.panel__pill--draft { color: var(--abyss); background: var(--butter); border-color: var(--butter); }
.panel__tag {
  margin-top: auto; padding-top: 12px;
  font-family: var(--mono); font-size: .64rem; color: var(--ink-soft);
  display: inline-flex; align-items: center; gap: 7px;
}
.panel__tag--learn { color: var(--butter-deep); }
.panel__tag--done { color: var(--ink); }
.check {
  color: var(--abyss); background: var(--butter); width: 16px; height: 16px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; font-size: .6rem; font-weight: 700;
}

/* ----- BEAT 2: the vendor confirmation TABLE that Orca's AI reads -----
   A real bordered table; the teal .scan line sweeps down it (see the read sweep above). */
.doc {
  position: relative;
}
.doc__table {
  width: 100%; border-collapse: collapse; table-layout: fixed;
  font-family: var(--mono); font-size: .72rem; color: var(--ink-soft);
}
.doc__table th, .doc__table td {
  padding: 7px 8px; text-align: left;
  border: 1px solid var(--line);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.doc__table thead th {
  font-size: .58rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink); font-weight: 600; background: var(--mist);
}
.doc__table td:first-child { color: var(--ink); }
/* explicit fixed column widths matching the box model */
.doc__table .dc--style { width: 34%; }
.doc__table .dc--color { width: 20%; }
.doc__table .dc--size  { width: 13%; }
.doc__table .dc--qty   { width: 12%; }
.doc__table .dc--price { width: 21%; }

/* ===========================================================
   BEAT 1 visual — the dropzone + a file that flies in (no boxing)
   BEAT 2 visual — the AI read sweep (a teal line runs down the doc)
   =========================================================== */
.drop {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column; gap: 10px;
}
.drop__zone {
  position: relative; flex: 1; min-height: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  border: 2px dashed var(--silver); border-radius: var(--r-sm);
  background: var(--mist);
}
.scene.run .drop__zone { animation: dropZonePulse var(--loop) var(--ease) infinite; }
.drop__glyph { font-size: 1.7rem; line-height: 1; }
.drop__title { font-family: var(--disp); font-weight: 600; font-size: .92rem; color: var(--ink); }
.drop__hint  { font-family: var(--mono); font-size: .6rem; color: var(--ink-soft); }
.drop__phone { font-family: var(--mono); font-size: .62rem; color: var(--teal-deep); text-align: center; }
/* the file card: sits low-center, flies in from the upper-right, lands, holds */
.dropfile {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 11px; border-radius: 9px;
  background: var(--paper); border: 1px solid var(--line); box-shadow: var(--shadow);
  font-family: var(--mono); font-size: .64rem; color: var(--ink);
  white-space: nowrap; opacity: 0;
}
.dropfile__ico { font-size: .82rem; }
.scene.run .dropfile { animation: dropFly var(--loop) var(--ease) infinite; }
@keyframes dropFly {
  0%   { opacity: 0; transform: translateX(-50%) translate(118px,-92px) scale(1.08) rotate(4deg); }
  4%   { opacity: 1; transform: translateX(-50%) translate(118px,-92px) scale(1.08) rotate(4deg); }
  13%  { opacity: 1; transform: translateX(-50%) translate(0,0) scale(1) rotate(0); }
  21%  { opacity: 1; transform: translateX(-50%) translate(0,0) scale(1) rotate(0); }
  24%  { opacity: 0; transform: translateX(-50%) translate(0,8px) scale(.98); }
  100% { opacity: 0; transform: translateX(-50%) translate(0,8px) scale(.98); }
}
/* the zone flashes teal the moment the file lands (~13%) */
@keyframes dropZonePulse {
  0%,10%   { border-color: var(--silver); background: var(--mist); }
  13%,15%  { border-color: var(--teal); background: var(--teal-light); }
  18%,100% { border-color: var(--silver); background: var(--mist); }
}
/* the AI read sweep over the document */
.panel--read .doc { flex: 1; min-height: 0; overflow: hidden; }
.scan {
  position: absolute; left: -2%; right: -2%; top: 0; height: 3px;
  background: linear-gradient(90deg, transparent, var(--teal), transparent);
  box-shadow: 0 0 16px 4px rgba(48,132,156,.45);
  border-radius: 2px; opacity: 0; pointer-events: none;
}
.scene.run .scan { animation: scanSweep var(--loop) var(--ease) infinite; animation-delay: calc(var(--loop) * var(--b2)); }
@keyframes scanSweep {
  0%,2% { opacity: 0; top: 0%; }
  5%    { opacity: 1; top: 3%; }
  20%   { opacity: 1; top: 96%; }
  23%   { opacity: 0; top: 100%; }
  100%  { opacity: 0; top: 100%; }
}

/* ----- BEAT 3: REVIEW — extracted output (left) + AI correction chat (right).
   Mirrors production dynamic-review.tsx (product rows + variant chips) and
   feedback-drawer.tsx (the "Correct it with Orca" chat). ----- */
.review {
  flex: 1; min-height: 0;
  display: grid; grid-template-columns: 1.05fr 1fr; gap: 12px;
}

/* LEFT: extracted purchase-order output */
.review__out { min-width: 0; }
.po2 {
  height: 100%;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--paper); padding: 10px 11px;
  display: flex; flex-direction: column; gap: 8px; overflow: hidden;
}
.po2__head {
  font-family: var(--mono); font-size: .56rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--silver); padding-bottom: 6px; border-bottom: 1px solid var(--line);
}
.po2__prod { opacity: 0; display: flex; flex-direction: column; gap: 5px; }
.po2__name { font-family: var(--disp); font-weight: 600; font-size: .8rem; color: var(--ink); }
.po2__sub { font-family: var(--mono); font-size: .62rem; color: var(--silver); font-weight: 400; }
.po2__variants { display: flex; flex-wrap: wrap; gap: 5px; }
.vchip {
  font-family: var(--mono); font-size: .6rem; color: var(--ink-soft);
  background: var(--mist); border: 1px solid var(--line); border-radius: 6px;
  padding: 2px 7px; white-space: nowrap;
}
.vchip--cost { color: var(--butter-deep); border-color: rgba(224,173,66,.35); background: rgba(245,207,106,.10); }
/* the field that visibly corrects (size 30 -> qty 9) during the chat */
.vchip--fix { position: relative; border-color: var(--butter); background: rgba(245,207,106,.16); }
.vchip__was, .vchip__now { display: inline-block; }
.vchip__was { color: #b03a2e; text-decoration: line-through; }
.vchip__now { color: var(--abyss); font-weight: 700; }

.scene.run .po2__prod { animation: contentIn var(--loop) var(--ease) infinite; }
.scene.run .po2__prod:nth-child(2) { animation-delay: calc((var(--loop) * var(--b3)) + (var(--loop) * 0.000)); }
.scene.run .po2__prod:nth-child(3) { animation-delay: calc((var(--loop) * var(--b3)) + (var(--loop) * 0.010)); }
.scene.run .po2__prod:nth-child(4) { animation-delay: calc((var(--loop) * var(--b3)) + (var(--loop) * 0.020)); }
/* the correcting chip swaps was->now on cue, as the AI reply lands (partway through beat 3) */
.scene.run .vchip--fix .vchip__was { animation: fixWas var(--loop) steps(1) infinite; animation-delay: calc(var(--loop) * var(--b3)); }
.scene.run .vchip--fix .vchip__now { animation: fixNow var(--loop) steps(1) infinite; animation-delay: calc(var(--loop) * var(--b3)); }
@keyframes fixWas { 0%,11% { display: inline-block; opacity: 1; } 12%,100% { opacity: 0; width: 0; overflow: hidden; } }
@keyframes fixNow { 0%,11% { opacity: 0; width: 0; overflow: hidden; } 12%,20% { opacity: 1; width: auto; } 22%,100% { opacity: 0; } }

/* RIGHT: AI correction chat (the feedback drawer) */
.chat {
  min-width: 0; display: flex; flex-direction: column;
  border: 1px solid var(--silver); border-radius: var(--r-sm); background: var(--paper);
  overflow: hidden;
}
.chat__head {
  display: flex; align-items: center; gap: 6px;
  padding: 7px 10px; border-bottom: 1px solid var(--line);
  font-family: var(--disp); font-weight: 600; font-size: .72rem; color: var(--ink);
}
.chat__whale {
  width: 16px; height: 16px; border-radius: 5px; background: var(--butter);
  display: inline-flex; align-items: center; justify-content: center; font-size: .64rem;
}
.chat__log { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 6px; padding: 9px 10px; }
.bubble {
  max-width: 86%; font-size: .66rem; line-height: 1.35; padding: 6px 9px;
  border-radius: 12px; opacity: 0;
}
.bubble--user { align-self: flex-end; background: var(--butter); color: var(--ink); border-bottom-right-radius: 4px; }
.bubble--ai { align-self: flex-start; background: var(--mist); color: var(--ink-soft); border-bottom-left-radius: 4px; }
.bubble--typing { display: inline-flex; gap: 3px; padding: 8px 10px; }
.bubble--typing i { width: 4px; height: 4px; border-radius: 50%; background: var(--silver); display: inline-block; }
.chat__bar {
  display: flex; align-items: center; gap: 6px; padding: 7px 10px; border-top: 1px solid var(--line);
}
.chat__field {
  flex: 1; font-family: var(--body); font-size: .62rem; color: var(--silver);
  background: var(--mist); border: 1px solid var(--line); border-radius: 8px; padding: 4px 8px;
}
.chat__send {
  font-family: var(--disp); font-weight: 600; font-size: .6rem; color: #fff;
  background: var(--ink); border-radius: 8px; padding: 4px 9px;
}
/* chat choreography: user msg -> typing dots -> AI reply, all within beat 3 */
.scene.run .bubble--user   { animation: contentIn var(--loop) var(--ease) infinite; animation-delay: calc((var(--loop) * var(--b3)) + (var(--loop) * 0.005)); }
.scene.run .bubble--typing { animation: typingBubble var(--loop) var(--ease) infinite; animation-delay: calc(var(--loop) * var(--b3)); }
.scene.run .bubble--reply  { animation: replyBubble var(--loop) var(--ease) infinite; animation-delay: calc(var(--loop) * var(--b3)); }
.scene.run .bubble--typing i { animation: typingDot 1s ease-in-out infinite; }
.scene.run .bubble--typing i:nth-child(2) { animation-delay: .15s; }
.scene.run .bubble--typing i:nth-child(3) { animation-delay: .30s; }
/* typing dots show ~8–11% local, then hand off to the reply at ~13% */
@keyframes typingBubble {
  0%,6%   { opacity: 0; }
  8%,11%  { opacity: 1; }
  13%,100%{ opacity: 0; }
}
@keyframes replyBubble {
  0%,11%   { opacity: 0; transform: translateY(6px); }
  13%,20%  { opacity: 1; transform: translateY(0); }
  22%,100% { opacity: 0; transform: translateY(-4px); }
}
@keyframes typingDot { 0%,100% { opacity: .35; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-2px); } }

/* ----- BEAT 4: draft Shopify products as a LIST (Products table rows) -----
   Mirrors Shopify's Products index: a column header row, then stacked product
   rows with thumbnail + title, a Draft status pill, inventory/variant count and
   price — aligned in columns, NOT a grid of cards. */
.plist {
  flex: 1; min-height: 0;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--paper); overflow: hidden;
  display: flex; flex-direction: column;
}
/* shared column template so head + rows align:
   thumbnail · product · status · inventory · price */
.plist__head, .prow {
  display: grid;
  grid-template-columns: 34px 1.5fr .7fr 1fr .6fr;
  align-items: center; gap: 10px;
  padding: 9px 12px;
}
.plist__head {
  background: var(--mist); border-bottom: 1px solid var(--line);
  font-family: var(--mono); font-size: .54rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-soft);
}
.plist__head .plist__h--prod { grid-column: 1 / span 2; }
.plist__h--price { text-align: right; }
.plist__rows { list-style: none; display: flex; flex-direction: column; }
.prow {
  border-bottom: 1px solid var(--line);
  opacity: 0; transform: translateY(10px);
}
.prow:last-child { border-bottom: none; }
/* product thumbnail (first column) */
.prow__thumb {
  width: 34px; height: 34px; border-radius: 7px;
  background: linear-gradient(135deg, rgba(245,207,106,.4), rgba(224,173,66,.2));
  border: 1px solid rgba(224,173,66,.3);
}
.prow__title {
  font-family: var(--disp); font-weight: 600; font-size: .78rem; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.prow__sub { font-family: var(--mono); font-weight: 400; font-size: .58rem; color: var(--ink-soft); }
.prow__status { display: flex; }
.prow__pill {
  font-family: var(--mono); font-size: .56rem; letter-spacing: .06em;
  color: var(--abyss); background: var(--butter); border: 1px solid var(--butter);
  padding: 2px 8px; border-radius: 999px; white-space: nowrap;
}
.prow__inv {
  font-family: var(--mono); font-size: .6rem; color: var(--ink-soft);
  display: flex; flex-direction: column; line-height: 1.3;
}
.prow__var { font-size: .54rem; color: var(--silver); }
.prow__price {
  font-family: var(--mono); font-size: .66rem; color: var(--butter-deep);
  text-align: right; font-weight: 500;
}
/* Beat 4 rows use the shared contentIn reveal at the beat-4 base offset (+stagger),
   so they are visible exactly while the shop panel is on screen. */
.scene.run .prow { animation: contentIn var(--loop) var(--ease) infinite; }
.scene.run .prow:nth-child(1) { animation-delay: calc((var(--loop) * var(--b4)) + (var(--loop) * 0.010)); }
.scene.run .prow:nth-child(2) { animation-delay: calc((var(--loop) * var(--b4)) + (var(--loop) * 0.025)); }
.scene.run .prow:nth-child(3) { animation-delay: calc((var(--loop) * var(--b4)) + (var(--loop) * 0.040)); }

/* ---------- STRIP ---------- */
.strip { border-block: 1px solid var(--line); background: var(--mist); }
.strip__list {
  width: min(var(--maxw), 94vw); margin-inline: auto;
  list-style: none; display: grid; grid-template-columns: repeat(4,1fr);
}
.strip__list li {
  display: flex; flex-direction: column; gap: 2px; padding: 1.5rem 1.2rem;
  border-left: 1px solid var(--line);
}
.strip__list li:first-child { border-left: none; }
.strip__list b { font-family: var(--disp); font-size: 1.35rem; letter-spacing: -.01em; }
.strip__list span { font-family: var(--mono); font-size: .76rem; color: var(--ink-soft); }

/* ---------- PROBLEM ---------- */
.problem { padding: clamp(3.5rem,7vw,6rem) 0; }
.problem__cols { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(1.5rem,4vw,4rem); margin-top: 2.2rem; align-items: start; }
.problem__lead { font-size: clamp(1.15rem, 1rem + .6vw, 1.5rem); line-height: 1.35; font-family: var(--disp); font-weight: 500; letter-spacing: -.01em; }
.problem__list { list-style: none; display: flex; flex-direction: column; gap: .9rem; }
.problem__list li {
  position: relative; padding-left: 1.8rem; color: var(--ink-soft); font-size: 1.02rem;
}
.problem__list li::before {
  content: "✕"; position: absolute; left: 0; top: -1px; color: #c0392b; font-weight: 700;
  font-family: var(--mono); font-size: .85rem;
}

/* ---------- HOW (dark) ---------- */
.how { background: var(--ink); color: var(--mist); padding: clamp(3.5rem,7vw,6.5rem) 0; position: relative; }
.how::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(700px 380px at 85% 0%, rgba(245,207,106,.12), transparent 60%);
  pointer-events: none;
}
.how .eyebrow { color: var(--butter); }
.steps { list-style: none; display: grid; grid-template-columns: repeat(3,1fr); gap: 1.4rem; margin-top: 2.6rem; counter-reset: s; }
.step {
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--r); padding: 1.6rem 1.5rem 1.8rem;
  position: relative; overflow: hidden;
  transition: border-color .3s var(--ease), transform .3s var(--ease);
}
.step:hover { border-color: rgba(245,207,106,.5); transform: translateY(-4px); }
.step::after {
  content: ""; position: absolute; left: 0; top: 0; height: 3px; width: 0; background: var(--butter);
  transition: width .4s var(--ease);
}
.step:hover::after { width: 100%; }
.step__num { font-family: var(--mono); font-size: .8rem; color: var(--butter); letter-spacing: .1em; }
.step__title { font-family: var(--disp); font-weight: 600; font-size: 1.35rem; margin: .7rem 0 .5rem; letter-spacing: -.01em; }
.step p { color: #b6bcc6; font-size: 1rem; }

/* 1-minute demo video inside the dark How-it-works section */
.how__watch { margin-top: clamp(2.4rem, 5vw, 3.6rem); text-align: center; }
.how__watch-label {
  font-family: var(--disp); font-weight: 500; font-size: clamp(1rem, .96rem + .3vw, 1.14rem);
  color: var(--mist); display: inline-flex; align-items: center; gap: .6rem; justify-content: center;
  flex-wrap: wrap; max-width: 40ch; margin-inline: auto;
}
.how__watch-time {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink); background: var(--butter); border-radius: 999px; padding: .28rem .6rem; font-weight: 600;
}
.video-embed {
  position: relative; width: 100%; max-width: 960px; margin: 1.3rem auto 0;
  aspect-ratio: 2520 / 1080; border-radius: var(--r); overflow: hidden; background: #000;
  border: 1px solid rgba(255,255,255,.12); box-shadow: 0 30px 70px -30px rgba(0,0,0,.7);
}
.video-embed--16x9 { aspect-ratio: 16 / 9; }
/* Receiving demo inside the dark teal-accent Lifecycle section */
.life__watch { margin-top: clamp(2.6rem, 5vw, 3.8rem); text-align: center; }
.life__watch-label {
  font-family: var(--disp); font-weight: 500; font-size: clamp(1rem, .96rem + .3vw, 1.14rem);
  color: var(--mist); display: inline-flex; align-items: center; gap: .6rem; justify-content: center;
  flex-wrap: wrap; max-width: 46ch; margin-inline: auto;
}
.life__watch-time {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--abyss); background: var(--teal); border-radius: 999px; padding: .28rem .6rem; font-weight: 600;
}
.video-embed iframe,
.video-embed video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: contain; background: #000; }

/* ---------- INDUSTRIES ---------- */
.industries { padding: clamp(3.5rem,7vw,6rem) 0; background: var(--mist); border-block: 1px solid var(--line); }
.industries__lead {
  margin: 1rem 0 0; max-width: 54ch;
  font-size: clamp(1.05rem, 1rem + .4vw, 1.25rem); color: var(--ink-soft);
}
.industries__chips { list-style: none; display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 2rem; }
.ichip {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--disp); font-weight: 500; font-size: .95rem; color: var(--ink);
  background: var(--paper); border: 1px solid var(--line); border-radius: 999px;
  padding: .55rem 1rem .55rem .85rem;
  transition: border-color .2s var(--ease), color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
}
/* a small teal dot — the wave accent, echoed at chip scale */
.ichip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--teal); flex: none; opacity: .75; }
.ichip:hover {
  border-color: var(--teal); color: var(--teal-deep); transform: translateY(-2px);
  box-shadow: 0 8px 18px -12px rgba(48,132,156,.6);
}

/* ---------- LIFECYCLE (dark · teal-wave pipeline) ---------- */
.lifecycle { background: var(--abyss); color: var(--mist); padding: clamp(3.5rem,7vw,6.5rem) 0; }
.lifecycle .eyebrow { color: var(--teal); }
.lifecycle .eyebrow::before { background: var(--teal); }
.flow {
  list-style: none; margin-top: 3rem; position: relative;
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem;
}
/* the teal wave — the brand motif made literal, threading the stages together */
.flow::before {
  content: ""; position: absolute; left: 0; right: 0; top: 2px; height: 44px; z-index: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 40'%3E%3Cpath d='M0 20 Q30 4 60 20 T120 20' fill='none' stroke='%2330849c' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-size: 120px 40px; background-repeat: repeat-x; background-position: left center;
  opacity: .5;
}
.flow__stage { position: relative; z-index: 1; display: flex; flex-direction: column; gap: .45rem; padding-right: .6rem; }
.flow__node {
  width: 46px; height: 46px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--disp); font-weight: 700; font-size: 1.1rem;
  color: var(--abyss); background: var(--teal);
  border: 5px solid var(--abyss); box-shadow: 0 0 0 1.5px var(--teal);
  margin-bottom: .7rem;
}
.flow__title { font-family: var(--disp); font-weight: 600; font-size: 1.18rem; color: #fff; letter-spacing: -.01em; }
.flow p { color: #b6bcc6; font-size: .95rem; line-height: 1.42; }

@media (max-width: 720px) {
  .flow { grid-template-columns: 1fr; gap: 1.5rem; }
  .flow::before { display: none; }
  .flow__stage { padding-left: 1.2rem; border-left: 2px solid rgba(48,132,156,.55); }
  .flow__node { margin-bottom: .35rem; }
}

/* ---------- FEATURES ---------- */
.features { padding: clamp(3.5rem,7vw,6.5rem) 0; background: var(--paper); }
.tiles { display: grid; grid-template-columns: repeat(4,1fr); gap: 1.1rem; margin-top: 2.6rem; }
.tile {
  background: var(--mist); border: 1px solid var(--line); border-radius: var(--r);
  padding: 1.5rem 1.4rem; transition: transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s var(--ease);
}
.tile:hover { transform: translateY(-5px); box-shadow: var(--shadow); border-color: var(--silver); background: #fff; }
.tile--wide { grid-column: span 2; background: var(--ink); color: var(--mist); border-color: var(--ink); }
.tile.tile--wide p { color: #b6bcc6; } /* (0,2,1) beats `.tile p` (0,1,1) — 8.35:1 on --ink; was overridden → 1.55:1 */
.tile--wide:hover { background: var(--ink); }
.tile__icon {
  width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center;
  background: var(--butter); color: var(--ink); font-size: 1.1rem; margin-bottom: 1rem;
}
.tile--wide .tile__icon { box-shadow: 0 8px 20px -8px rgba(224,173,66,.7); }
.tile h3 { font-family: var(--disp); font-weight: 600; font-size: 1.12rem; letter-spacing: -.01em; margin-bottom: .4rem; }
.tile p { font-size: .96rem; color: var(--ink-soft); }
.tile--wide h3 { font-size: 1.5rem; }

/* ---------- PRICING ----------
   Three tiers on a soft mist field. Cards reuse the site's card system
   (--r radius, --line border, --shadow). The Growth card is elevated:
   ink-on-paper accent border, raised, "Most Popular" badge. */
.pricing { padding: clamp(3.5rem,7vw,6.5rem) 0; background: var(--mist); border-block: 1px solid var(--line); }
.pricing__trial {
  margin-top: 1.1rem; max-width: 60ch;
  font-size: clamp(1rem, .95rem + .3vw, 1.12rem); color: var(--ink-soft);
}
.pricing__trial-strong { color: var(--ink); font-weight: 700; font-family: var(--disp); }

.tier-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem; margin-top: 2.6rem; align-items: start;
}

.tier {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 1.8rem 1.6rem 1.9rem;
  box-shadow: var(--shadow);
  display: flex; flex-direction: column;
  transition: transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s var(--ease);
}
.tier:hover { transform: translateY(-5px); border-color: var(--silver); }

/* Growth — visually elevated: accent border, raised, deeper shadow */
.tier--featured {
  border: 2px solid var(--butter);
  box-shadow: 0 1px 2px rgba(20,23,28,.04), 0 26px 56px -22px rgba(224,173,66,.55);
  transform: translateY(-12px);
  z-index: 2;
}
.tier--featured:hover { transform: translateY(-16px); }
.tier--featured::before {
  content: ""; position: absolute; left: 0; top: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--butter), var(--butter-deep));
  border-radius: var(--r) var(--r) 0 0;
}

.tier__badge {
  position: absolute; top: -.85rem; left: 50%; transform: translateX(-50%);
  font-family: var(--mono); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink); background: var(--butter);
  padding: .35rem .85rem; border-radius: 999px; white-space: nowrap;
  box-shadow: 0 8px 18px -8px rgba(224,173,66,.8), inset 0 0 0 1px rgba(20,23,28,.06);
}

.tier__head { padding-bottom: 1.2rem; border-bottom: 1px solid var(--line); }
.tier__name { font-family: var(--disp); font-weight: 700; font-size: 1.5rem; letter-spacing: -.01em; }
.tier__price { display: flex; align-items: baseline; gap: .25rem; margin: .55rem 0 .4rem; }
.tier__amt { font-family: var(--disp); font-weight: 700; font-size: clamp(2.4rem, 1.8rem + 1.4vw, 2.9rem); letter-spacing: -.03em; line-height: 1; }
.tier__per { font-family: var(--mono); font-size: .9rem; color: var(--ink-soft); }
.tier__blurb { font-size: .92rem; color: var(--ink-soft); margin-top: .2rem; }

.tier__cta { width: 100%; margin: 1.3rem 0; }

.tier__feats { list-style: none; display: flex; flex-direction: column; gap: .7rem; }
.tier__feats li {
  position: relative; padding-left: 1.65rem; font-size: .96rem; color: var(--ink-soft);
}
.tier__feats li::before {
  content: "✓"; position: absolute; left: 0; top: 0;
  color: var(--butter-deep); font-family: var(--mono); font-size: .82rem; font-weight: 700;
}
.tier__feats li b { color: var(--ink); font-weight: 700; }
.tier__plus {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink); padding-left: 0 !important; margin-top: .3rem;
}
.tier__plus::before { content: none !important; }
/* the PO quota is the differentiator — make it the visual anchor of each card */
.tier__quota {
  padding-left: 0 !important; margin-bottom: .4rem; padding-bottom: .9rem;
  border-bottom: 1px dashed var(--line);
  font-family: var(--disp); font-size: 1.02rem; color: var(--ink);
}
.tier__quota::before { content: none !important; }
.tier__quota b { font-size: 1.55rem; font-weight: 700; letter-spacing: -.02em; }
.tier__over {
  padding-left: 0 !important; margin: -.35rem 0 .7rem;
  font-size: .84rem; color: var(--ink-soft);
}
.tier__over::before { content: none !important; }
.tier__over b { font-weight: 700; color: var(--ink); }

/* four-up pricing (narrower cards → tighter padding + price) */
.tier-grid--4 { grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.tier-grid--4 .tier { padding: 1.6rem 1.35rem 1.7rem; }
.tier-grid--4 .tier__amt { font-size: clamp(2rem, 1.5rem + 1.1vw, 2.5rem); }

.pricing__foot {
  margin-top: 2.2rem; max-width: 78ch; line-height: 1.55;
  font-family: var(--mono); font-size: .8rem; color: var(--ink-soft);
}
.pricing__foot b { color: var(--ink); }
.pricing__foot-dot {
  display: inline-block; vertical-align: middle; margin-right: .55rem;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--butter-deep); box-shadow: 0 0 0 4px rgba(224,173,66,.18);
}

/* ---------- BEFORE/AFTER ---------- */
.ba { background: var(--abyss); color: var(--mist); padding: clamp(3.5rem,7vw,6.5rem) 0; position: relative; overflow: hidden; }
.ba::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(600px 400px at 10% 0%, rgba(245,207,106,.14), transparent 55%),
    radial-gradient(700px 500px at 100% 100%, rgba(55,61,73,.8), transparent 60%);
  pointer-events: none;
}
.ba__wrap { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(1.8rem,4vw,4rem); align-items: center; position: relative; }
.ba .eyebrow { color: var(--butter); }
.ba__lead { color: #b9cfe0; font-size: 1.1rem; margin: 1rem 0 1.8rem; max-width: 42ch; }
.ba__cards { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.ba__card {
  border-radius: var(--r); padding: 1.5rem 1.4rem; display: flex; flex-direction: column; gap: .4rem;
  border: 1px solid rgba(255,255,255,.12);
}
.ba__card--before { background: rgba(255,255,255,.04); }
.ba__card--after { background: var(--butter); color: var(--ink); border-color: var(--butter); box-shadow: var(--shadow-lg); }
.ba__label { font-family: var(--mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; opacity: .85; }
.ba__big { font-family: var(--disp); font-weight: 700; font-size: clamp(2.2rem,1.5rem+2vw,3rem); letter-spacing: -.03em; line-height: 1; }
.ba__cap { font-size: .9rem; opacity: .8; margin-bottom: .6rem; }
.ba__card ul { list-style: none; display: flex; flex-direction: column; gap: .45rem; font-size: .92rem; }
.ba__card--before ul { color: #b9cfe0; }
.ba__card ul li { position: relative; padding-left: 1.2rem; }
.ba__card--before ul li::before { content: "·"; position: absolute; left: .2rem; color: #6f8aa3; }
.ba__card--after ul li::before { content: "✓"; position: absolute; left: 0; font-family: var(--mono); font-size: .8rem; }

/* ---------- IMPACT / by the numbers ---------- */
.impact { padding: clamp(3.5rem,7vw,6rem) 0; background: var(--mist); border-block: 1px solid var(--line); }
.impact__lead { color: var(--ink-soft); font-size: 1.08rem; max-width: 54ch; margin: 1rem 0 2.4rem; }
.impact__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.impact__stat {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r);
  padding: 1.6rem 1.4rem 1.5rem; display: flex; flex-direction: column; gap: .3rem;
  box-shadow: var(--shadow); position: relative; overflow: hidden;
}
.impact__stat::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--butter); }
.impact__stat--accent::before { background: var(--teal); }
.impact__num { font-family: var(--disp); font-weight: 700; font-size: clamp(2.4rem,1.6rem + 2.4vw,3.2rem); letter-spacing: -.03em; line-height: 1; color: var(--ink); }
.impact__unit { font-size: .4em; font-weight: 600; color: var(--butter-deep); margin-left: .12em; }
.impact__stat--accent .impact__unit { color: var(--teal-deep); }
.impact__label { font-weight: 600; font-size: .98rem; color: var(--ink); margin-top: .55rem; }
.impact__was { font-family: var(--mono); font-size: .74rem; color: var(--ink-soft); }
.impact__note { font-size: .78rem; color: var(--ink-soft); opacity: .85; margin-top: 1.6rem; max-width: 64ch; }
@media (max-width: 860px) { .impact__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .impact__grid { grid-template-columns: 1fr; } }

/* ---------- FINAL CTA ---------- */
.cta-band { position: relative; padding: clamp(4rem,8vw,7rem) 0; text-align: center; overflow: hidden; background: var(--ink); }
.cta-band__bg {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(700px 360px at 50% -10%, rgba(245,207,106,.28), transparent 60%),
    radial-gradient(600px 500px at 80% 120%, rgba(43,48,59,.6), transparent 60%);
}
.cta-band__bg::after {
  content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 52px 52px;
  -webkit-mask-image: radial-gradient(600px 400px at 50% 40%, #000, transparent 75%);
          mask-image: radial-gradient(600px 400px at 50% 40%, #000, transparent 75%);
}
.cta-band__inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; }
.cta-band__mark { filter: drop-shadow(0 12px 30px rgba(224,173,66,.5)); animation: float 5s var(--ease) infinite; }
@keyframes float { 0%,100%{ transform: translateY(0) rotate(-2deg) } 50%{ transform: translateY(-10px) rotate(2deg) } }
.cta-band__title {
  font-family: var(--disp); font-weight: 700; color: #fff;
  font-size: clamp(2rem,1.3rem+3vw,3.5rem); letter-spacing: -.03em; line-height: 1.02;
  margin: 1.2rem 0 .8rem; max-width: 16ch;
}
.cta-band__sub { color: #c4cad3; font-size: 1.12rem; max-width: 46ch; margin-bottom: 1.8rem; }
.cta-band__fine { font-family: var(--mono); font-size: .78rem; color: #8a909b; margin-top: 1.1rem; letter-spacing: .04em; }

/* ---------- FOOTER ---------- */
.foot { background: var(--ink); color: var(--mist); padding: 3rem 0 1.6rem; border-top: 1px solid rgba(255,255,255,.08); }
.foot__inner { display: grid; grid-template-columns: 1.2fr 2fr; gap: 2rem; padding-bottom: 2.2rem; }
.foot__brand { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem; }
.foot__brand .brand__word { font-size: 1.3rem; }
.foot__tag { flex-basis: 100%; color: #9aa1ab; font-size: .92rem; margin-top: .3rem; }
.foot__cols { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem; }
.foot__cols h4 { font-family: var(--mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--butter); margin-bottom: .8rem; }
.foot__cols a { display: block; color: #b6bcc6; font-size: .95rem; padding: .25rem 0; transition: color .2s var(--ease); }
.foot__cols a:hover { color: #fff; }
.foot__bottom {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding-top: 1.4rem; border-top: 1px solid rgba(255,255,255,.08);
  font-size: .82rem; color: #8a909b; flex-wrap: wrap;
}
.foot__mono { font-family: var(--mono); color: var(--butter); }

/* ---------- SCROLL REVEAL ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 940px) {
  .hero__grid { grid-template-columns: 1fr; }
  .scene { max-width: 560px; margin-inline: auto; }
  .problem__cols { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .tiles { grid-template-columns: repeat(2,1fr); }
  .tile--wide { grid-column: span 2; }
  .ba__wrap { grid-template-columns: 1fr; }
  .strip__list { grid-template-columns: repeat(2,1fr); }
  .strip__list li:nth-child(3) { border-left: none; }
  .foot__inner { grid-template-columns: 1fr; }
  /* pricing: 4 → 2 columns; keep the featured lift (badge + accent still read) */
  .tier-grid--4 { grid-template-columns: repeat(2, 1fr); gap: 1.2rem; }
}
/* Collapse the nav links before the row can overflow (wordmark + 6 links + nowrap CTA needs ~980px). */
@media (max-width: 1024px) {
  .nav__links { display: none; }
}
/* Phone: keep the wordmark + CTA on one row without clipping, and right-align the CTA (its auto margin
   lived on the now-hidden links). */
@media (max-width: 720px) {
  .nav__inner { justify-content: space-between; gap: .8rem; }
  .brand__wordmark { height: 42px; }
  .nav__cta { margin-left: 0; font-size: .9rem; }
}
@media (max-width: 600px) {
  /* pricing: 2 → 1 column; drop the featured lift so cards sit flush in the stack */
  .tier-grid--4 { grid-template-columns: 1fr; gap: 1.5rem; max-width: 440px; margin-inline: auto; }
  .tier--featured { transform: none; }
  .tier--featured:hover { transform: translateY(-5px); }
}
@media (max-width: 560px) {
  .stage { min-height: 360px; }
  .doc__table { font-size: .62rem; }
  .doc__table th, .doc__table td { padding: 5px 5px; }
  /* Review: stack the extracted output above the chat so neither is cramped */
  .review { grid-template-columns: 1fr; gap: 8px; }
  .chat__log { padding: 7px 9px; }
  .bubble { max-width: 92%; }
  /* product list rows stay a list on mobile; drop the column header and the
     variant sub-line to keep each row compact and readable */
  .plist__head { display: none; }
  .plist__head, .prow {
    grid-template-columns: 30px 1.4fr auto auto;
    gap: 8px; padding: 8px 10px;
  }
  .prow__thumb { width: 30px; height: 30px; }
  .prow__inv .prow__var { display: none; }
  .prow__title { font-size: .72rem; }
  .scene__beats { font-size: .58rem; }
  .tiles { grid-template-columns: 1fr; }
  .tile--wide { grid-column: span 1; }
  .ba__cards { grid-template-columns: 1fr; }
  .strip__list { grid-template-columns: 1fr; }
  .strip__list li { border-left: none; border-top: 1px solid var(--line); }
  .strip__list li:first-child { border-top: none; }
  .foot__bottom { flex-direction: column; align-items: flex-start; }
}

/* ---------- REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }

  /* Static representative frame: show all four beats stacked, fully formed,
     so the workflow (drop → read → review → draft) reads at a glance. */
  .scene__beats li { opacity: 1 !important; color: var(--ink) !important; border-color: var(--butter) !important; }
  .scene__beats .beat__dot { background: var(--butter-deep) !important; }

  .stage { min-height: 0 !important; display: flex; flex-direction: column; gap: 12px; }
  .panel {
    position: static !important; inset: auto !important;
    opacity: 1 !important; transform: none !important;
  }
  /* beat 1: the file resting in the dropzone; beat 3: output + chat present with
     the correction applied; beat 4: product rows present — all with no motion. */
  .po2__prod, .bubble--user, .bubble--reply, .prow { opacity: 1 !important; transform: none !important; }
  .dropfile { opacity: 1 !important; transform: translateX(-50%) !important; }
  /* the AI read sweep is a motion affordance — hide it in the static frame */
  .scan { display: none !important; }
  /* static frame shows the CORRECTED value (hide the "was", show the "now") and
     hides the transient typing indicator */
  .bubble--typing { display: none !important; }
  .vchip--fix .vchip__was { display: none !important; }
  .vchip--fix .vchip__now { opacity: 1 !important; width: auto !important; }
}

/* ── Mobile refinements (audit 2026-07-19) ──────────────────────────────── */
/* Lifecycle: 5 columns can't fit below ~940px — go 2-up and drop the connecting rail. */
@media (max-width: 940px) {
  .flow { grid-template-columns: repeat(2, 1fr); row-gap: 2rem; }
  .flow::before { display: none; }
}
@media (max-width: 560px) {
  /* Hero Beat 3 stacks too tall for the fixed phone stage — hide the chat demo so the extracted-order
     card carries the beat without clipping. */
  .review__chat { display: none; }
  /* Footer: 2-up columns + ~44px tap targets on phones. */
  .foot__cols { grid-template-columns: 1fr 1fr; row-gap: 1.6rem; }
  .foot__cols a { padding: .55rem 0; }
}