/* ============================================================================
   AIWA · Section styles
   ========================================================================= */

/* ---------------------------------------------------------------------------
   LOADER
   CSS owns first paint so the mark is visible even if JS is late, skipped, or
   GSAP never tweens. JS only ticks the stages and dismisses the overlay.
   ------------------------------------------------------------------------ */
.loader {
  position: fixed; inset: 0; z-index: 10000;
  display: grid; place-items: center;
  background: var(--ink-900);
  isolation: isolate;
  transform: scale(1);
  opacity: 1;
  pointer-events: auto;
}
.loader.is-leaving {
  opacity: 0;
  transform: scale(1.06);
  pointer-events: none;
  transition: opacity 0.55s var(--ease-brand), transform 0.55s var(--ease-brand);
}
.loader__inner { display: grid; gap: 1.6rem; justify-items: center; }
/* The app's logo lockup, not letterforms - same mark apps/web boots with, so
   the two surfaces open on the same image. Sized to sit where the old
   clamp(3.5rem, 11vw, 9rem) wordmark sat. */
.loader__mark {
  width: clamp(12rem, 38vw, 24rem);
}
.loader__mark img {
  display: block; width: 100%; height: auto;
  opacity: 1;
  transform: scale(1);
  animation: loader-mark-in 0.68s var(--ease-out) both;
}
@keyframes loader-mark-in {
  from { opacity: 0; transform: scale(0.94); filter: blur(14px); }
  to   { opacity: 1; transform: scale(1);    filter: blur(0); }
}
.loader__stages {
  display: flex; gap: 1.4rem;
  font-family: var(--font-mono); font-size: 0.7rem;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--cream-500);
}
.loader__stages span { opacity: 0.25; transition: opacity var(--dur-micro) var(--ease-brand), color var(--dur-micro) var(--ease-brand); }
.loader__stages span.is-on { opacity: 1; color: var(--accent); }
.loader__rail {
  position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--ink-700);
}
.loader__rail i {
  display: block; height: 100%; width: 0; background: var(--accent);
  animation: loader-rail 1.1s var(--ease-brand) 0.2s forwards;
}
@keyframes loader-rail {
  to { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .loader__mark img { animation: none; filter: none; transform: none; opacity: 1; }
  .loader__rail i { animation: none; width: 100%; }
  .loader.is-leaving { transition: none; transform: none; }
}

/* ---------------------------------------------------------------------------
   NAV
   ------------------------------------------------------------------------ */
/* Geometry is apps/marquee's nav, measured off the shipping page: a 1200px
   bar, 52px tall, sitting 16px down. It is also the marquee's ANIMATION - i.e.
   none. That nav has no appear animation and no scroll state; it is simply
   there from first paint, so the entrance tween that used to bring this one in
   last is gone from hero.js too.

   The one thing we do NOT copy is the marquee's permanently-transparent bar:
   over this page's darker, busier sections the links stop being readable, so
   the glass pill fades in on .is-stuck instead of being there from the start. */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  padding: 1rem var(--gutter) 0;
}
.nav__inner {
  max-width: 75rem; margin-inline: auto; /* 1200px at the desktop root size */
  min-height: 3.25rem;                   /* 52px - the CTA (2.25rem) + 2x padding */
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  position: relative;
  padding: 0.5rem;
  border-radius: 999px;
  /* Rest state: no fill - chrome is transparent over the hero. */
  background-color: transparent;
  box-shadow: none;
  transition: max-width var(--dur-base) var(--ease-brand),
              padding var(--dur-base) var(--ease-brand),
              background-color var(--dur-base) var(--ease-brand),
              box-shadow var(--dur-base) var(--ease-brand),
              backdrop-filter var(--dur-base) var(--ease-brand);
}

/* ---- scrolled: the bar CONTRACTS and turns to glass ----------------------
   Measured off apps/marquee's scrolled nav variant (framer-v-periiu):
   the 1200px bar becomes 780px, the left padding goes 8px -> 14px, the link
   gap tightens, and a translucent film + rim appears over whatever is passing
   underneath. It stays centred, so it closes in from both sides.

   The marquee's film is Framer's Liquid Glass: `backdrop-filter: url(#...)`,
   an SVG displacement map. That is a Framer runtime component and a
   Chrome-only filter, so the refraction is approximated here with the
   blur+saturate this nav already had - same read, no dependency. */
.nav.is-stuck .nav__inner {
  max-width: 48.75rem;                            /* 780px */
  padding: 0.5rem 0.5rem 0.5rem 0.875rem;         /* 8px 8px 8px 14px */
  background-color: color-mix(in srgb, var(--ink-950) 96%, transparent);
  backdrop-filter: blur(16px) saturate(130%);
  -webkit-backdrop-filter: blur(16px) saturate(130%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cream-050) 10%, transparent);
}
/* The rim: 1px, lit at the two ends of a 315deg axis and gone through the
   middle - the shape of the marquee's border gradient. Its stops sample as
   zero-alpha there (they animate, and a background tab freezes the frame
   clock mid-tween), so the alpha below is ours: on this page's near-black the
   rim has to be visible or the pill has no edge at all. */
.nav__inner::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  padding: 1px; pointer-events: none; opacity: 0;
  background: linear-gradient(315deg,
    rgba(251, 249, 246, 0.22) 0%,
    rgba(251, 249, 246, 0) 30%,
    rgba(251, 249, 246, 0) 70%,
    rgba(251, 249, 246, 0.22) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  transition: opacity var(--dur-base) var(--ease-brand);
}
.nav.is-stuck .nav__inner::after { opacity: 0.1; }
/* 24px -> 16px, as the marquee's does, which is also what buys the room the
   narrower bar needs. */
.nav.is-stuck .nav__links { gap: 0.75rem; }
/* h-9 px-4 - the app's own button size, which is also the marquee nav's 36px
   and what holds the bar to 52px. The hero CTAs keep the marketing scale. */
.nav__cta-wrap {
  position: relative;
  display: grid;
  justify-items: stretch;
  align-items: stretch;
  flex: 0 0 auto;
}
.nav__cta-wrap > .nav__cta {
  grid-area: 1 / 1;
  justify-self: stretch;
  transition:
    opacity var(--dur-base) var(--ease-brand),
    transform var(--dur-base) var(--ease-brand),
    filter var(--dur-base) var(--ease-brand),
    color var(--app-dur-colors) var(--ease-out),
    background-color var(--app-dur-colors) var(--ease-out),
    border-color var(--app-dur-colors) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-brand);
}
.nav__cta { height: 2.25rem; min-height: 0; padding: 0 1rem; }
/* Rest: Login (ghost). Stuck: Start Building (primary) — crossfade + soft scale. */
.nav__cta--build {
  opacity: 0;
  pointer-events: none;
  transform: scale(0.92);
  filter: blur(2px);
}
.nav.is-stuck .nav__cta--login {
  opacity: 0;
  pointer-events: none;
  transform: scale(0.92);
  filter: blur(2px);
}
.nav.is-stuck .nav__cta--build {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1);
  filter: blur(0);
}
@media (prefers-reduced-motion: reduce) {
  .nav__cta-wrap > .nav__cta {
    transition: opacity var(--app-dur-colors) var(--ease-out);
    transform: none;
    filter: none;
  }
}
/* The lockup carries its own name, so there is no <span>AIWA</span> beside it -
   same call the app makes in its header (apps/web DashboardSidebar). Height,
   not width: the orb is ~98% of the artwork's height, so 1.65rem here keeps it
   the 1.6rem circle the favicon mark used to be. */
.nav__logo { display: flex; align-items: center; }
.nav__logo img { height: 1.75rem; width: auto; }
.nav__links {
  display: flex; gap: 1.7rem; font-size: 0.85rem; color: var(--cream-300);
  transition: gap var(--dur-base) var(--ease-brand); /* tightens with the bar - see .is-stuck above */
}
@media (max-width: 1180px) {
  .nav__links { gap: 1.15rem; }
}
/* Framer-style flip: idle label slides up, duplicate enters from below. */
.nav__links a {
  position: relative;
  display: inline-flex;
  align-items: flex-start;
  overflow: hidden;
  height: 1.15em;
  line-height: 1.15;
  color: inherit;
  transition: color var(--dur-micro) var(--ease-brand);
}
.nav__links a::after { content: none; }
.nav__flip {
  display: flex;
  flex-direction: column;
  transition: transform 0.45s var(--ease-brand);
  will-change: transform;
}
.nav__flip span {
  display: block;
  height: 1.15em;
  line-height: 1.15;
  white-space: nowrap;
}
.nav__flip span:last-child { color: var(--cream-050); }
.nav__links a:hover .nav__flip,
.nav__links a:focus-visible .nav__flip {
  transform: translateY(-50%);
}
.nav__links a:hover,
.nav__links a:focus-visible { color: var(--cream-050); }
@media (prefers-reduced-motion: reduce) {
  .nav__flip { transition: none; }
  .nav__links a:hover .nav__flip,
  .nav__links a:focus-visible .nav__flip { transform: none; }
  .nav__flip span:last-child { display: none; }
}
@media (max-width: 900px) { .nav__links { display: none; } }

/* ---------------------------------------------------------------------------
   HERO · §2.1 structural model
   The hero is 400vh tall; #hero-media is pinned inside it for the whole run.
   ------------------------------------------------------------------------ */
.hero { position: relative; }

/* Animated Glow.svg — top-right blind spot. Must NOT live inside #hero-media
   (overflow:hidden + contain). <object> always clips to its box, so glow.svg's
   viewBox is padded (~400u) to fit the feGaussianBlur halo; without that pad
   the bloom ends in a hard vertical slice. */
.hero__glow {
  position: fixed;
  top: -360px;
  left: 880px;
  z-index: 1;
  width: min(82vw, 68rem);
  aspect-ratio: 2043 / 2028;
  overflow: visible;
  pointer-events: none;
  opacity: 0.92;
  mix-blend-mode: screen;
}
.hero__glow-obj {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  overflow: visible;
  pointer-events: none;
  background: transparent;
}
@media (prefers-reduced-motion: reduce) {
  .hero__glow { opacity: 0.45; }
}
@media (max-width: 1100px) {
  .hero__glow {
    left: auto;
    right: -22vw;
    top: -300px;
    width: min(92vw, 52rem);
  }
}
.hero__panel {
  position: relative; z-index: 1;
  min-height: 100svh;
  display: grid; align-items: center;
  padding-block: calc(var(--nav-h) + 2rem) 4rem;
  pointer-events: none;
}
.hero__panel > * { pointer-events: auto; }
/* 1px marker at the hero's end. Handoff start is the workspace well entering
   the viewport (hero.js), not this node's centre — a 100svh empty panel was
   a full blank screen between the last idea plate and the Flip. */
.hero__panel.is-spacer {
  pointer-events: none;
  height: 1px;
  min-height: 1px;
  padding: 0;
  overflow: hidden;
}

/* One column for copy, one for the canvas, held for the whole hero.
   Consistency reads as design; a layout that reshuffles every panel reads as
   fidgeting. The canvas stays in the right-hand column — a few points of
   leftward drift through the idea plates, then a fade into the Flip. */
/* NOTE: this is a child of .shell, never combined with it. Putting a second
   max-width on .shell itself would inherit its `margin-inline: auto` and
   centre the column instead of anchoring it to the page gutter. */
.hero__panel-inner { display: grid; justify-items: start; gap: 1.8rem; max-width: 34rem; }
.hero__panel-inner--dense { gap: 1.4rem; }

/* Tall scrub panel: left copy sticks at viewport center while stack advances.
   Shell stretches full panel height so sticky has runway. */
.hero__panel.is-3 {
  /* Five idea plates; trail is a short sticky release, not a leftover screen. */
  min-height: 510svh;
  align-items: stretch;
  padding-block: 0;
}
.hero__panel.is-3 > .shell {
  display: flex;
  align-items: flex-start;
  width: 100%;
  min-height: 100%;
  box-sizing: border-box;
  /* Lead with empty runway so panel 2 (“five agents”) leaves before the
     idea list reaches center. Matches hero.js measureHeroBreaks(). */
  padding-top: 100svh;
  /* Short settle so the last plate can unstick into Workspace, not 85vh of air. */
  padding-bottom: 16vh;
}
.hero__idea {
  position: sticky;
  top: 50%;
  translate: 0 -50%;
  width: 100%;
  max-width: 28rem;
  align-self: flex-start;
}

.hero__h1 {
  visibility: hidden;               /* §2.2 - flipped to visible by JS */
  font-size: clamp(2.6rem, 5.4vw, 5.2rem);
  text-wrap: balance;
}
.hero__h1 .word { display: inline-block; }
.hero__h1 .char {
  display: inline-block;
  opacity: 0;
  color: rgba(255, 255, 255, 0);
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0);
  /* NOTE: no will-change here. §5.3 wants it set immediately before the
     animation and cleared on complete; a permanent hint on 20-odd characters
     is exactly the mobile memory pressure that rule is about. heroEntrance()
     adds and removes it. */
}
/* Non-JS / reduced-motion: the headline is simply there. */
.no-js .hero__h1, .hero__h1.is-static { visibility: visible; color: var(--cream-050); }

.hero__sub, .hero__cta, .hero__trust, .hero__scroll-hint, .hero__proof { opacity: 0; transform: translateY(1.5rem); }
.no-js .hero__sub, .no-js .hero__cta, .no-js .hero__trust, .no-js .hero__scroll-hint, .no-js .hero__proof { opacity: 1; transform: none; }

/* Sits between the display headline and the CTA. Deliberately NOT --measure
   wide: the panel is a 34rem column and the subheadline is the one element
   that would happily run past it, which breaks the left-column rhythm the
   whole hero is built on. */
.hero__sub { max-width: 32rem; font-size: clamp(1.02rem, 1.25vw, 1.2rem); color: var(--cream-300); }

.hero__cta { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; }
/* Hero primary is the page's largest marketing control - type steps up from
   the global .btn (0.875rem) so the label matches the button's visual weight. */
.hero__cta .btn { font-size: 1.05rem; padding: 0.95rem 1.7rem; }
.hero__micro {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  color: var(--cream-500);
}
.hero__micro-icon {
  width: 1rem;
  height: 1rem;
  flex: 0 0 auto;
  color: inherit;
}
.hero__micro-icon.ph {
  width: auto;
  height: auto;
  font-size: 1rem;
}

/* Social-proof pill: shared .page-badge; order + entrance only here. */
.hero__proof {
  order: -1;
  overflow: visible;
}

.hero__trust {
  width: min(100%, 42rem);
  display: grid;
  gap: 0.9rem;
  /* Quieter under the CTA — process loop, not a second headline. */
  opacity: 0.78;
}
.trust__item { display: inline-flex; align-items: center; gap: 0.4rem; padding-inline: 0.9rem; font-size: 0.8rem; color: var(--cream-300); white-space: nowrap; }
.trust__item b { font-family: var(--font-display); font-size: 1rem; color: var(--cream-050); }
/* plan → build → test → ship → evolve — lowercase with accent checks. */
.trust__item--step {
  font-family: var(--font-mono); font-size: 0.78rem;
  letter-spacing: 0.06em; text-transform: none; color: var(--cream-300);
  gap: 0.45rem; padding-inline: 0.75rem;
}
.trust__check {
  width: 0.85rem; height: 0.85rem; flex: 0 0 auto;
  color: var(--accent); stroke: currentColor;
  opacity: 0.9;
}
.trust__check.ph {
  width: auto;
  height: auto;
  font-size: 0.85rem;
  stroke: none;
}
.trust__dot { width: 3px; height: 3px; border-radius: 50%; background: var(--ink-500); align-self: center; flex: 0 0 auto; }

/* Animated scroll mouse - adapted from the supplied SCSS, token-mapped, no CDN fonts. */
.hero__scroll-hint {
  --mouse-w: 1.625rem;          /* 26px */
  --mouse-h: 2.75rem;           /* 44px */
  --mouse-border: 0.1875rem;    /* 3px */
  --mouse-track: 0.3125rem;     /* 5px */
  --mouse-track-pos: 0.55rem;
  --mouse-nudge: 0.35rem;
  --mouse-anim: 5s;
  --mouse-outline: var(--cream-050);

  display: flex;
  flex-direction: column;
  align-items: flex-start;
  color: var(--mouse-outline);
}
.mouse {
  position: relative;
  width: var(--mouse-w);
  height: var(--mouse-h);
  border-radius: 100px;
  background: transparent;
  border: var(--mouse-border) solid var(--mouse-outline);
  animation: scroll-nudge-mouse var(--mouse-anim) ease-out infinite;
}
.mouse::before,
.mouse::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
}
.mouse::before {
  display: none;
}
.mouse::after {
  background-color: var(--mouse-outline);
  width: var(--mouse-track);
  height: var(--mouse-track);
  border-radius: 50%;
  animation: scroll-trackball var(--mouse-anim) linear infinite;
}
@media (max-width: 900px) {
  .hero__scroll-hint { display: none !important; }
}

@keyframes scroll-trackball {
  0% {
    opacity: 1;
    transform: scale(1) translateY(calc(var(--mouse-track-pos) * -1));
  }
  6% {
    opacity: 1;
    transform: scale(0.9) translateY(calc(var(--mouse-track-pos) / 4));
  }
  14% {
    opacity: 0;
    transform: scale(0.4) translateY(calc(var(--mouse-track-pos) * 2));
  }
  15%, 19% {
    opacity: 0;
    transform: scale(0.4) translateY(calc(var(--mouse-track-pos) * -1));
  }
  28%, 29.99% {
    opacity: 1;
    transform: scale(1) translateY(calc(var(--mouse-track-pos) * -1));
  }
  30% {
    opacity: 1;
    transform: scale(1) translateY(calc(var(--mouse-track-pos) * -1));
  }
  36% {
    opacity: 1;
    transform: scale(0.9) translateY(calc(var(--mouse-track-pos) / 4));
  }
  44% {
    opacity: 0;
    transform: scale(0.4) translateY(calc(var(--mouse-track-pos) * 2));
  }
  45%, 49% {
    opacity: 0;
    transform: scale(0.4) translateY(calc(var(--mouse-track-pos) * -1));
  }
  58%, 59.99% {
    opacity: 1;
    transform: scale(1) translateY(calc(var(--mouse-track-pos) * -1));
  }
  60% {
    opacity: 1;
    transform: scale(1) translateY(calc(var(--mouse-track-pos) * -1));
  }
  66% {
    opacity: 1;
    transform: scale(0.9) translateY(calc(var(--mouse-track-pos) / 4));
  }
  74% {
    opacity: 0;
    transform: scale(0.4) translateY(calc(var(--mouse-track-pos) * 2));
  }
  75%, 79% {
    opacity: 0;
    transform: scale(0.4) translateY(calc(var(--mouse-track-pos) * -1));
  }
  88%, 100% {
    opacity: 1;
    transform: scale(1) translateY(calc(var(--mouse-track-pos) * -1));
  }
}

@keyframes scroll-nudge-mouse {
  0% { transform: translateY(0); }
  20% { transform: translateY(var(--mouse-nudge)); }
  30% { transform: translateY(0); }
  50% { transform: translateY(var(--mouse-nudge)); }
  60% { transform: translateY(0); }
  80% { transform: translateY(var(--mouse-nudge)); }
  90% { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .mouse,
  .mouse::after {
    animation: none;
  }
  .mouse::after {
    opacity: 1;
    transform: scale(1) translateY(calc(var(--mouse-track-pos) * -1));
  }
}

.hero__statement { max-width: 36rem; font-size: clamp(1.5rem, 2.9vw, 2.6rem); text-wrap: balance; line-height: 1.45; }
.hero__glue { white-space: nowrap; }
.hero__para { max-width: 34rem; }
.hero__chips { display: grid; gap: 0.55rem; }
.hero__chips li {
  display: inline-flex; align-items: baseline; gap: 0.45rem; white-space: nowrap;
  padding: 0.55rem 1rem; border: 1px solid var(--ink-600); border-radius: 999px;
  background: rgba(18, 18, 17, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-size: 0.9rem; width: fit-content;
}

.hero__closing { max-width: 38rem; }

/* ---- the pinned canvas -------------------------------------------------- */
/* position:fixed IS the pin - see the long note at the top of ACT 2 in
   js/motion/hero.js. left/top/width/height are written by JS every frame; the
   values here are the pre-JS state, so the first paint is already correct. */
.hero-media {
  position: fixed;
  left: 0; top: 0; width: 100vw; height: 100vh;
  /* Below the hero panels AND below <main>. The handoff carries the media into
     a section it must not paint over: .workspace__zone goes transparent to let
     it show through the well, while the heading, pills and panes above it stay
     legible on top. Getting this backwards hides the whole section behind the
     card for the length of the handoff. */
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: var(--ink-900);
  border-radius: 0;                /* JS interpolates this to --radius-card */
  contain: layout paint;
}
/* CSS fallback if WebGL fails — soft charcoal folds. */
.hero-media.has-hero-gradient-fallback {
  background:
    radial-gradient(70% 55% at 72% 38%, rgba(74, 70, 65, 0.32), transparent 62%),
    radial-gradient(55% 45% at 28% 78%, rgba(53, 50, 46, 0.38), transparent 70%),
    var(--ink-900);
}
.hero-media__scrim {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  backdrop-filter: blur(var(--blur-atmosphere));
  -webkit-backdrop-filter: blur(var(--blur-atmosphere));
}
.hero-media__frame {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
}

/* Balsa Gradient Studio ribbon (vanilla WebGL) — full-bleed behind the frame. */
.hero-media__gradient {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  opacity: 0.25;
}

/* Ambient soft amber orbs — hidden (replaced by studio ribbon for now). */
.hero-media__frame::before {
  content: ''; position: absolute; inset: -20%;
  background:
    radial-gradient(40% 30% at 22% 18%, rgba(254,160,2,0.10), transparent 70%),
    radial-gradient(45% 34% at 78% 74%, rgba(191,78,11,0.12), transparent 70%);
  pointer-events: none;
  display: none;
}
/* Legibility scrim under the left column, where the hero copy sits. Without
   it the headline fights the scene for the same pixels; with it the scene
   reads as ground and the copy as figure, which is the relationship §2.5
   wants ("the restraint is what makes the media read as the subject").
   Two-column keeps the scrim: copy is still there through the idea plates.
   Narrow lifts it at stageCenter, driven by --copy-scrim. */
.hero-media__frame::after {
  content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(96deg, rgba(6,5,4,0.94) 0%, rgba(6,5,4,0.8) 30%, rgba(6,5,4,0) 54%);
  opacity: var(--copy-scrim, 1);
}

/* HUD */
/* Bottom-right, not top-left. The nav lives in the top strip and the hero
   copy owns the left column, so the only corner free at every breakpoint is
   this one - and it stays free after the handoff, when the whole frame has
   shrunk into the workspace card. */
.stage__hud {
  position: absolute; right: 0; bottom: 0; z-index: 4;
  display: flex; align-items: center; gap: 1.2rem;
  padding: 0 clamp(1rem, 2.4vw, 1.8rem) clamp(0.9rem, 2vw, 1.4rem);
  font-family: var(--font-mono); font-size: 0.66rem;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--cream-500);
}
.stage__hud-left { display: flex; align-items: center; gap: 0.6rem; }
.stage__label { color: var(--accent); }
.stage__rail { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: rgba(255,255,255,0.06); z-index: 4; }
.stage__rail i { display: block; height: 100%; width: 0%; background: linear-gradient(90deg, var(--accent-deep), var(--accent)); }

/* ---- the scenes --------------------------------------------------------- */
/* The scene column is nudged right of centre so it never sits under the hero
   copy, which is left-aligned in the same viewport. After the handoff the
   frame is a card and the offset just reads as padding. */
.stage { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; }
.scene {
  grid-area: 1 / 1;
  width: min(86%, 32rem);
  opacity: 0;
  /* will-change is toggled by heroScroll() for as long as the hero is on
     screen, not declared here - see §5.3. */
}
/* §2.2 - the canvas is never blank. The prompt is the poster frame: painted
   before any JS runs, and what a reduced-motion or JS-failed visitor sees. The
   scrub types into it rather than fading it in. */
.scene--prompt {
  opacity: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* Pattern.svg — perspective grid + amber bloom under the prompt.
   Scaled a touch larger and biased left; left edge soft-masked so it
   dissolves into the hero ground and stays clear of the prompt copy. */
.prompt__pattern {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -62% -52%;
  width: min(265%, 64rem);
  z-index: 0;
  pointer-events: none;
}
.prompt__pattern img {
  display: block;
  width: 100%;
  height: auto;
  /* Radial softens the whole plate; horizontal fade keeps the left spill quiet. */
  -webkit-mask-image:
    linear-gradient(to right, transparent 0%, #000 28%, #000 100%),
    radial-gradient(ellipse 78% 70% at 58% 48%, #000 34%, transparent 78%);
  mask-image:
    linear-gradient(to right, transparent 0%, #000 28%, #000 100%),
    radial-gradient(ellipse 78% 70% at 58% 48%, #000 34%, transparent 78%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
.scene--prompt .prompt,
.scene--prompt .prompt__meta {
  position: relative;
  z-index: 1;
}
/* The fan needs more width than the single-column beats, but this number is a
   negotiated ceiling, not a preference, and the arithmetic is worth keeping.

   Through the hero the stage is held in the right-hand column by xPercent:19 -
   19% of the FRAME - so the scene's left edge is 0.69*vw - W/2, and a wider
   scene grows leftward into the copy, not rightward into empty frame. Two
   things live over there:
     - the panel-3 copy box, which ends at vw/2 - 8 once .shell caps out;
     - the legibility scrim, which is opaque at the left edge and clears at 54%
       of the frame (see .hero-media__frame::after).

   Measured on the real page: at 1920 and 40rem the fan starts at 997 against a
   copy box ending at 952, so it clears by 45px. At 46rem it cleared by 5px, and
   half the leftmost card sat under the scrim at 1440. Some scrim overlap at
   1440 is unavoidable and normal - the 32rem default beats sit under its tail
   there too - but 40rem keeps the leftmost screenshot mostly out of it while
   still making each card 256px, wider than a three-across grid could manage.
   Widen this only alongside the xPercent. */
.scene--shipped { width: min(94%, 40rem); }

/* The plan frame carries the workflow diagram, which is a 385x377 ring rather
   than a column of cards, so it wants a squarer box than the other beats. */
.scene--plan { width: min(96%, 36rem); overflow: visible; }

/* prompt */
.prompt {
  position: relative;
  display: flex; align-items: baseline; gap: 0.7rem;
  max-width: 100%;
  padding: 1.5rem 1.7rem;
  border: 1px solid var(--ink-600); border-radius: 1.4rem;
  background: linear-gradient(180deg, rgba(28,24,17,0.86), rgba(12,10,8,0.9));
  box-shadow: 0 2rem 5rem rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.05);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  font-family: var(--font-mono); font-size: clamp(0.85rem, 1.35vw, 1.05rem); line-height: 1.5;
}
.prompt__glyph { color: var(--accent); }
.prompt__text { color: var(--cream-050); min-width: 0; }
.prompt__caret {
  display: inline-block; width: 0.5em; height: 1.1em; translate: 0 0.15em;
  background: var(--accent); animation: blink 1.1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }
.prompt__meta {
  display: flex; gap: 0.7rem; justify-content: center; margin-top: 1rem;
  color: var(--cream-300); text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.72rem;
}

/* plan - NOTE the `agent-` prefix. The pricing section also has a `.plan`
   (a tier card), and an unprefixed `.plan li { opacity: 0 }` here silently
   blanked every feature list down the page. Hero-scene classes stay namespaced
   for exactly that reason. */
/* ---------------------------------------------------------------------------
   THE WORKFLOW DIAGRAM · beat 2 of the hero canvas

   apps/marquee's "Our Agentic Workflow Engine" diagram, rebuilt: the robot in
   the middle, five stages ringed around it, five connector arrows between them.

   EVERY OFFSET IS A PERCENTAGE OF A 385x377 BOX, because that is marquee's
   container and those are marquee's own positions divided by it. Keeping the
   ratios rather than the pixels is what lets the diagram scale with the canvas
   and still be the same composition. aspect-ratio holds the box to 385/377 so
   the percentages stay honest at every width.
   ------------------------------------------------------------------------ */
.wf {
  position: relative;
  width: 100%; max-width: 34rem; margin-inline: auto;
  aspect-ratio: 1 / 1;
  overflow: visible;
}

/* Robot — centred; sized to sit inside the enlarged arc ring. */
.wf__robot {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 46%;
  height: auto;
  max-height: 50%;
  margin: auto;
  display: block;
  background: none;
  border: 0;
  box-shadow: none;
  filter: none;
  -webkit-filter: none;
  opacity: 0;
  transform: scale(0.96);
  pointer-events: none;
}

/* Stage cards: explicit anchors on the circular ring (no CSS trig — GSAP `y`
   was also fighting the old `translate` polar placement and stacking every
   card on the robot). */
.wf__stage {
  --wf-stage-w: 7.4rem;
  position: absolute;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: var(--wf-stage-w);
  text-align: center;
  transform: translate(-50%, -50%);
  opacity: 0;
}
.wf__badge { display: none; }
.wf__text {
  display: grid;
  gap: 0.28rem;
  width: 100%;
  padding: 0.5rem 0.65rem 0.55rem;
  border-radius: 0.7rem;
  border: 1px solid color-mix(in srgb, var(--cream-050) 10%, transparent);
  background: color-mix(in srgb, var(--ink-800) 88%, var(--ink-950));
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--cream-050) 8%, transparent),
    0 8px 18px -10px rgb(0 0 0 / 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.wf__text b {
  font-family: var(--font-mono); font-weight: 500;
  font-size: 0.68rem; letter-spacing: 0.1em; color: var(--cream-050);
  white-space: nowrap;
}
.wf__text i {
  font-style: normal; font-size: 0.62rem; line-height: 1.35;
  color: var(--cream-300);
  text-wrap: balance;
}

/* Stage card centers on ring gaps (radius ~36 in 100 viewBox; arcs untouched). */
.wf__stage[data-wf-pos='plan']      { left: 50%;   top: 14%; }
.wf__stage[data-wf-pos='architect'] { left: 81%;   top: 32%; }
.wf__stage[data-wf-pos='build']     { left: 81%;   top: 68%; }
.wf__stage[data-wf-pos='test']      { left: 50%;   top: 86%; }
.wf__stage[data-wf-pos='ship']      { left: 19%;   top: 68%; }
.wf__stage[data-wf-pos='evolve']    { left: 19%;   top: 32%; }

/* Six arc-arrows sharing one viewBox; 2px stroke, fade-in along the path. */
.wf__arcs {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.wf__arc {
  fill: none;
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
  stroke-linejoin: round;
  marker-end: url(#wf-arrow);
  opacity: 0;
}

/* Below 760px the canvas is too narrow for a full ring: captions collide
   with each other long before the box runs out. The robot holds the frame on its
   own there, which is the composition the brief asked for anyway. */
@media (max-width: 760px) {
  .wf { max-width: 15rem; }
  .wf__stage, .wf__arcs { display: none; }
  .wf__robot { width: 78%; max-height: 78%; inset: 0; }
}

/* shipped - BEAT 3.
   Three real projects, dealt out as an overlapping fan rather than a grid.
   The fan is doing real work, not decoration: at three-across-in-a-row each
   card could only be a third of the frame, but overlapping them by a quarter
   buys each card 40% of the frame instead, so the screenshots land ~25% larger
   and stay legible as products. The step up to the right and the z-order give
   the set depth, which is what sells "several of these exist".

   The whole layout is proportional - flex-basis and negative margins in
   percent, the rise in rem - so it holds its shape at every width without a
   breakpoint. 3 x 40% - 2 x 10% = 100%, which is what keeps the fan flush to
   the frame on both edges; change one of those numbers and you must change
   the other. */
.shipped { display: flex; align-items: flex-start; perspective: 1100px; }
.shipped__title { color: var(--cream-500); text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.6rem; margin-bottom: 0.9rem; }
.shipped__card {
  flex: 0 0 40%;
  opacity: 0;
  border: 1px solid var(--ink-600); border-radius: 0.7rem;
  background: rgba(12,10,8,0.86);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  overflow: hidden;
  transform-style: preserve-3d;
}
/* Each card steps up and in front of the one before it. The rising shadow is
   what stops three overlapping dark screenshots reading as one dark shape. */
.shipped__card:nth-child(1) { margin-top: 2.6rem; z-index: 1; box-shadow: 0 0.7rem 1.6rem rgba(0,0,0,0.5); }
.shipped__card:nth-child(2) { margin-top: 1.3rem; z-index: 2; margin-inline-start: -10%; box-shadow: -0.5rem 0.9rem 2.2rem rgba(0,0,0,0.62); }
.shipped__card:nth-child(3) { margin-top: 0;      z-index: 3; margin-inline-start: -10%; box-shadow: -0.6rem 1.1rem 2.8rem rgba(0,0,0,0.7); }

/* The shot sits in its own aspect-locked window so the image can drift inside
   the card without moving the card. 112% tall at -6% top leaves 6% of headroom
   at each edge, which is more than the +/-3.5% the parallax ever uses - the
   frame can never show through. aspect-ratio, not the intrinsic size, so a
   card cannot reflow the fan while a webp is still in flight. */
.shipped__shot {
  display: block; position: relative; overflow: hidden;
  aspect-ratio: 1906 / 1078;
  border-bottom: 1px solid var(--ink-600);
}
.shipped__shot img {
  position: absolute; left: 0; top: -6%;
  width: 100%; height: 112%;
  object-fit: cover; object-position: top center;
}
.shipped__meta { display: grid; gap: 0.1rem; padding: 0.48rem 0.6rem 0.55rem; }
.shipped__meta b {
  font-family: var(--font-mono); font-weight: 500; font-size: 0.62rem;
  letter-spacing: 0.05em; color: var(--cream-050);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.shipped__meta i { font-style: normal; font-size: 0.57rem; line-height: 1.3; color: var(--cream-500); }

/* test */
.test { display: grid; gap: 0.55rem; }
/* Hero QA beat checklist — hidden for now; keep markup for a later restore. */
.scene--test { display: none !important; }
.test li {
  /* The tick is positioned against the ROW, so it has to add the row's own
     inline padding back on to land inside the ring. Hardcoding that number in
     two places is what put the tick out in the padding, beside an empty circle,
     the first time. One variable now, read by both. */
  --pad-x: 1.1rem;
  display: flex; align-items: center; gap: 0.8rem;
  padding: 0.75rem var(--pad-x); border-radius: 0.8rem;
  border: 1px solid var(--ink-600); background: rgba(18,18,17,0.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-size: 0.88rem; color: var(--cream-300);
  opacity: 0;
}
/* A REAL TICK, not one diagonal stroke.
   This was a single 45deg line inside a ring, which at 16px reads as the
   "prohibited" sign - the exact opposite of the thing it is marking. Two
   borders rotated -45deg is the same trick .plan__list uses, and it reads as a
   check at every size. The client's copy writes these rows with a leading tick,
   so the mark has to actually be one. */
.test li::before {
  content: ''; width: 1rem; height: 1rem; flex: 0 0 auto; border-radius: 50%;
  border: 1px solid var(--good);
  position: relative;
}
.test li::after {
  content: ''; position: absolute; left: calc(var(--pad-x) + 0.29rem); top: 50%;
  width: 0.42rem; height: 0.22rem;
  border-left: 1.5px solid var(--good); border-bottom: 1.5px solid var(--good);
  transform: translateY(-65%) rotate(-45deg);
}
.test li { position: relative; }

/* Everything after the hero paints above the travelling media. See the
   z-index note on .hero-media. */
main, .footer { position: relative; z-index: 2; }

/* ---------------------------------------------------------------------------
   WORKSPACE · handoff destination
   ------------------------------------------------------------------------ */
/* Clears the fixed nav: the eyebrow is the first thing the handoff delivers
   you to, and it must not arrive underneath the bar. */
.workspace { padding-top: clamp(7rem, 15vh, 11rem); }
.workspace__head { display: grid; gap: 1rem; justify-items: start; margin-bottom: 2.5rem; }

/* The well. aspect-ratio reserves the box so nothing shifts (CLS 0) whether
   the Flip runs, fails, or is skipped under reduced motion. */
/* Case-study grid: the well keeps width:100%/aspect-ratio as column one, so
   the handoff still measures the same kind of rect — only its column narrowed.
   Column two is Build / Test / Ship & evolve. */
.workspace__case {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(11rem, 17vw, 15rem);
  gap: clamp(0.8rem, 1.4vw, 1.3rem);
  align-items: stretch;
  width: 100%;
}

/* Mac browser shell around the handoff well. Chrome is a sibling ABOVE
   #workspace-zone so Flip still measures the 16:9 content rect alone. */
.workspace__browser {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-radius: 1rem;
  overflow: hidden;
  border: 1px solid var(--ink-700);
  background: #1f1f1f;
  box-shadow: 0 1.5rem 3.5rem rgba(0, 0, 0, 0.45);
}
.workspace__chrome {
  flex: 0 0 auto;
  line-height: 0;
  background: #1f1f1f;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.workspace__chrome img {
  display: block;
  width: 100%;
  height: auto;
}

.ws-aside {
  display: grid;
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: clamp(0.8rem, 1.4vw, 1.3rem);
  margin: 0;
  padding: 0;
  list-style: none;
  /* Match the browser shell’s outer height so the first card top lines up
     with the chrome top and the last card bottom with the preview bottom. */
  min-height: 100%;
}
/* li is the grid item (not display:contents) so 1fr row height cannot
   collapse to caption-only when the button’s img is absolutely filled. */
.ws-aside > li {
  min-height: 0;
  height: 100%;
}
.ws-aside__item {
  position: relative; overflow: hidden;
  display: block; width: 100%; height: 100%;
  margin: 0; padding: 0;
  /* Smaller than --radius-card so labels clear the curve on a narrow column. */
  border: 1px solid var(--ink-700); border-radius: 1rem;
  background: var(--ink-850);
  color: inherit; font: inherit; text-align: left;
  cursor: pointer;
  /* opacity 0 is the arrival state; Act 5 brings these in with the status card.
     .no-js and reduced motion get their escapes below, same as other arrival fades. */
  opacity: 0;
  transition:
    border-color var(--dur-base, 0.35s) var(--ease-brand, ease),
    box-shadow var(--dur-base, 0.35s) var(--ease-brand, ease);
}
.ws-aside__item:hover,
.ws-aside__item:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--ink-700));
  outline: none;
}
.ws-aside__item.is-active {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent);
}
.ws-aside__item img {
  position: absolute; inset: 0;
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: top center;
  pointer-events: none;
}
/* Build: chat + Festova preview — keep both panes readable in the narrow card. */
#ws-tab-build img {
  object-position: 72% 6%;
}
#ws-tab-test img {
  object-position: center 42%;
}
#ws-tab-ship img {
  object-position: 78% 8%;
}
.ws-aside__cap {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  /* Extra left padding so uppercase labels clear the 1rem corner radius. */
  padding: 0.95rem 0.75rem 0.55rem 1.15rem;
  font-size: 0.56rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--cream-100);
  background: linear-gradient(180deg, rgba(6,5,4,0), rgba(6,5,4,0.88) 55%);
  pointer-events: none;
}
.no-js .ws-aside__item, .static-hero .ws-aside__item { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .ws-aside__item { opacity: 1; } }

/* Below 900px the aside stops being a column and becomes a row under the well,
   which keeps all three visible instead of squeezing them into a gutter. */
@media (max-width: 900px) {
  .workspace__case {
    grid-template-columns: 1fr;
    display: flex;
    flex-direction: column;
  }
  .ws-aside {
    order: -1;
    grid-template-rows: none;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .ws-aside__item { aspect-ratio: 16 / 9; border-radius: 0.85rem; }
  .ws-aside__item img { position: absolute; }
}

.workspace__zone {
  /* position:relative holds the tab viewer shot; the box is aspect-locked so
     children do not change the destination rect the handoff measures. */
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 0;
  background: var(--ink-850);
  border: 0;
}
.workspace__zone.is-occupied { background: transparent; }
/* Seated = handoff done; hero canvas is hidden — keep an opaque plate so no
   ambient glow bleeds through while the tab shot paints. */
.workspace__zone.is-seated { background: var(--ink-850); }
/* Tab viewer: cover the landed hero frame once the handoff has seated
   (or immediately on static / no-js tiers). Same still as the Build tab by
   default, so the swap is invisible. */
.workspace__zone.is-tab-view.is-occupied .workspace__zone-shot,
.static-hero .workspace__zone.is-tab-view .workspace__zone-shot,
.no-js .workspace__zone.is-tab-view .workspace__zone-shot {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 3;
}
@media (max-width: 700px) { .workspace__zone { aspect-ratio: 4 / 3; } }

/* ---------------------------------------------------------------------------
   AUTONOMOUS QA · the proof section

   Two columns above 900px: the argument on the left, the agent-status card on
   the right. Card layout: outer plate + inner agent panel (status, tasks,
   note) with an optional AIWA “PASS” stack — no CTA, no stock photos.
   ------------------------------------------------------------------------ */
.qa__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.qa__head { display: grid; gap: 1rem; align-content: start; }

.qa-card {
  --qa-surface: color-mix(in srgb, var(--ink-850) 88%, var(--cream-050) 4%);
  --qa-inset: color-mix(in srgb, var(--ink-900) 78%, transparent);
  --qa-line: color-mix(in srgb, var(--cream-050) 8%, transparent);
  display: grid;
  gap: 1.15rem;
  padding: clamp(1.15rem, 2.2vw, 1.55rem);
  border: 1px solid var(--ink-600);
  border-radius: 1.35rem;
  background:
    radial-gradient(120% 80% at 100% 0%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 55%),
    var(--qa-surface);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--cream-050) 6%, transparent),
    0 1.25rem 2.5rem -1.5rem rgb(0 0 0 / 0.55);
}

.qa-card__head { display: grid; gap: 0.35rem; }
.qa-card__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2vw, 1.45rem);
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cream-050);
  line-height: 1.15;
}
.qa-card__powered {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  font-size: 0.78rem;
  color: var(--cream-500);
}
.qa-card__powered img {
  width: 0.95rem;
  height: 0.95rem;
  flex: 0 0 auto;
  border-radius: 0.2rem;
}
.qa-card__powered b {
  color: var(--cream-100);
  font-weight: 500;
}

.qa-card__agent {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem 1.15rem;
  align-items: stretch;
  padding: 0.95rem 1rem 1rem;
  border-radius: 1rem;
  background: var(--qa-inset);
  border: 1px solid var(--qa-line);
}

.qa-card__agent-main {
  display: grid;
  gap: 0.85rem;
  align-content: start;
  min-width: 0;
}

.qa-card__status {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0;
  padding-bottom: 0.75rem;
  overflow: visible;
  border-bottom: 1px solid var(--qa-line);
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--good);
}

.qa-card__tasks {
  display: grid;
  gap: 0.7rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.qa-card__tasks li {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-size: 0.86rem;
  color: var(--cream-300);
}
.qa-card__tasks .icon {
  width: 1rem;
  height: 1rem;
  color: var(--cream-500);
  flex: 0 0 auto;
}
.qa-card__tasks .icon.ph {
  width: auto;
  height: auto;
  font-size: 1rem;
}

/* Overlapping PASS tickets — AIWA-native stand-in for the reference collage. */
.qa-card__aside {
  position: relative;
  width: 6.75rem;
  min-height: 8.5rem;
  align-self: center;
  justify-self: end;
}

.qa-pass {
  position: absolute;
  display: grid;
  gap: 0.2rem;
  width: 5.6rem;
  padding: 0.65rem 0.7rem;
  border-radius: 0.75rem;
  border: 1px solid var(--qa-line);
  background: color-mix(in srgb, var(--ink-850) 92%, var(--cream-050) 6%);
  box-shadow: 0 0.6rem 1.4rem rgb(0 0 0 / 0.45);
}

.qa-pass--back {
  top: 0.15rem;
  left: 0;
  rotate: -9deg;
  opacity: 0.72;
  z-index: 1;
}

.qa-pass--front {
  top: 1.55rem;
  left: 0.95rem;
  rotate: 6deg;
  z-index: 2;
}

.qa-pass__route {
  font-size: 0.58rem;
  letter-spacing: 0.04em;
  color: var(--cream-500);
}

.qa-pass__mark {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--good);
}

.qa-pass__meta {
  font-size: 0.52rem;
  color: var(--cream-500);
  letter-spacing: 0.02em;
}

@media (max-width: 900px) {
  .qa__grid { grid-template-columns: 1fr; gap: 2.5rem; }
}

@media (max-width: 560px) {
  .qa-card__agent { grid-template-columns: 1fr; }
  .qa-card__aside {
    width: 100%;
    min-height: 6.5rem;
    justify-self: center;
  }
  .qa-pass--back { left: calc(50% - 4.2rem); }
  .qa-pass--front { left: calc(50% - 2.4rem); }
}

/* ---------------------------------------------------------------------------
   THE PROMPT ARC
   ------------------------------------------------------------------------ */
.arc {
  position: relative; overflow: hidden;
  min-height: 150svh;
  display: grid; place-items: center;
  /* End on --ink-850 so the next section continues the same ground — no knife edge. */
  background: linear-gradient(180deg, var(--ink-900) 0%, #0d0a07 42%, var(--ink-850) 100%);
}
.arc__center {
  position: sticky; top: 50vh; translate: 0 -50%;
  z-index: 3; text-align: center; display: grid; gap: 1.1rem; justify-items: center;
  padding-inline: var(--gutter);
}
.arc__h2 { text-wrap: balance; }
.arc__claims { display: flex; gap: 1.6rem; flex-wrap: wrap; justify-content: center; font-size: 0.85rem; color: var(--cream-300); }
.arc__claims li { position: relative; }
.arc__claims li + li::before { content: '·'; position: absolute; left: -0.9rem; color: var(--ink-500); }

.arc__col {
  position: absolute; top: 0; bottom: 0; z-index: 1;
  display: flex; flex-direction: column; justify-content: center; gap: 1.4rem;
  font-family: var(--font-mono); font-size: clamp(0.7rem, 1.05vw, 0.92rem);
  color: var(--cream-500);
  white-space: nowrap;
  pointer-events: none;
}
.arc__col--left  { right: calc(50% + 16rem); align-items: flex-end;   text-align: right; }
.arc__col--right { left:  calc(50% + 16rem); align-items: flex-start; text-align: left;  }
.arc__col span { display: block; transform-origin: center; }
.arc.is-live .arc__col span { will-change: transform, opacity; }
.arc__col--left  span { transform-origin: right center; }
.arc__col--right span { transform-origin: left center; }

@media (max-width: 1100px) {
  .arc__col--left  { right: calc(50% + 8rem); }
  .arc__col--right { left:  calc(50% + 8rem); }
}
@media (max-width: 700px) {
  .arc__col--left  { right: calc(50% + 2rem); }
  .arc__col--right { left:  calc(50% + 2rem); }
  .arc__col { font-size: 0.62rem; gap: 1rem; }
}

/* Outer edge fade (side) + dissolve before the section floor (bottom) so
   overflow:hidden never cuts prompts on a hard horizontal line. */
.arc__col--left {
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0, #000 22%),
    linear-gradient(180deg, #000 0%, #000 58%, transparent 90%);
  mask-image:
    linear-gradient(90deg, transparent 0, #000 22%),
    linear-gradient(180deg, #000 0%, #000 58%, transparent 90%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
.arc__col--right {
  -webkit-mask-image:
    linear-gradient(270deg, transparent 0, #000 22%),
    linear-gradient(180deg, #000 0%, #000 58%, transparent 90%);
  mask-image:
    linear-gradient(270deg, transparent 0, #000 22%),
    linear-gradient(180deg, #000 0%, #000 58%, transparent 90%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

.arc__fade { position: absolute; left: 0; right: 0; height: 26vh; z-index: 2; pointer-events: none; }
.arc__fade--top    { top: 0;    background: linear-gradient(180deg, var(--ink-900), transparent); }
/* Pure color dissolve into the engine ground — no backdrop-filter (that draws
   a hard rectangle and made the seam worse). */
.arc__fade--bottom {
  bottom: 0;
  height: clamp(8rem, 28vh, 16rem);
  background: linear-gradient(180deg, transparent 0%, var(--ink-850) 88%);
}

/* ---------------------------------------------------------------------------
   ENGINE · horizontal scroll
   ------------------------------------------------------------------------ */
.engine {
  position: relative;
  /* Same ground the arc ends on — continuous plate, not a second band. */
  background: var(--ink-850);
  /* Pull under the arc fade so the DOM section edge isn’t a visible seam. */
  margin-top: clamp(-3.5rem, -8vh, -2rem);
  padding-top: clamp(3.5rem, 8vh, 5.5rem);
}
.engine::before { content: none; }
/* grid-template-columns is load-bearing. .engine__track is width:max-content
   and about 2200px wide; without an explicit column the grid sizes itself to
   that, and .engine__head - which is width:100% of the column - centres its
   content inside 2200px instead of inside the viewport. minmax(0,1fr) pins the
   column to the container and lets the track overflow it, which is what the
   pin is there to reveal. */
.engine__pin {
  min-height: 100svh; display: grid; grid-template-columns: minmax(0, 1fr);
  align-content: center; gap: 2.5rem; overflow: hidden; padding-block: 4rem;
}
.engine__head { display: flex; align-items: center; justify-content: space-between; gap: 2rem; width: 100%; }
.engine__progress { flex: 1; max-width: 22rem; height: 1px; background: var(--ink-600); }
.engine__progress i { display: block; height: 100%; width: 0; background: var(--accent); }

/* A COLUMN GRID, not a flex row, and the reason is alignment.
   Each panel is header / glass tile / list. The headings wrap to different line
   counts ("EVOLVE · learn, improve & scale continuously" takes three lines
   where "TEST · ensure quality" takes two), so with flex every panel sized its
   own rows and the icon tiles sat at different heights.

   Three shared rows here plus `grid-template-rows: subgrid` on the panel means
   all six panels resolve against the SAME row lines: the tallest header sets
   the header row, and every glass tile starts on the same line. It aligns
   whatever the copy does, at any width, with no min-height to keep in sync.

   Row and column gaps are split because the panel inherits the track's gaps
   through the subgrid: columns keep the wide gutter between cards, rows keep
   the 1.4rem rhythm inside them.

   engineHorizontal() only reads track.scrollWidth and engineRail() only sets
   width/overflow inline, and both behave the same on a single-row column grid
   as they did on flex. */
.engine__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(84vw, 26rem);
  grid-template-rows: auto auto 1fr;
  column-gap: clamp(1rem, 2.4vw, 2rem);
  row-gap: 1.4rem;
  padding-inline: var(--gutter);
  width: max-content;
}
.stage-panel {
  /* spans the track's three rows and adopts its row lines, which is what puts
     every glass tile on the same line across all six cards. The width comes
     from grid-auto-columns now, not from the panel. */
  grid-row: span 3;
  display: grid; grid-template-rows: subgrid;
  padding: clamp(1.4rem, 2.6vw, 2.2rem);
  border: 1px solid var(--ink-600); border-radius: 1.6rem;
  background: linear-gradient(180deg, rgba(28,24,17,0.5), rgba(12,10,8,0.5));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.stage-panel header { display: grid; gap: 0.7rem; }
.stage-panel__idx { color: var(--accent); }
/* align-content:start, because the list now sits in the track's 1fr row. Left
   to stretch, a short list spread its own items to fill that row and the gaps
   inside one card came out as 50,50,73 instead of an even rhythm. The slack
   belongs at the bottom of the card, not between the lines. */
.stage-panel__list {
  display: grid; gap: 0.7rem; align-content: start;
  font-size: 0.9rem; color: var(--cream-300);
}
.stage-panel__list li { position: relative; padding-left: 1.1rem; }
.stage-panel__list li::before { content: ''; position: absolute; left: 0; top: 0.62em; width: 0.36rem; height: 1px; background: var(--accent); }

/* §4.5 - the cheap-and-good glass panel, not the WebGL renderer. */
.stage-panel__glass {
  position: relative; height: 9rem; border-radius: 1.1rem; overflow: hidden;
  border: 1px solid rgba(255,255,255,0.12);
  background:
    radial-gradient(120% 90% at 30% 20%, rgba(254,160,2,0.16), transparent 60%),
    radial-gradient(90% 80% at 80% 90%, rgba(191,78,11,0.2), transparent 60%),
    rgba(255,255,255,0.03);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: grid; place-items: center;
}
/* cursor-following brand glow, fed by --mx/--my from JS */
.stage-panel__glass::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(
    14rem 14rem at var(--mx, 50%) var(--my, 50%),
    color-mix(in srgb, var(--accent) 28%, transparent),
    color-mix(in srgb, var(--accent-deep) 10%, transparent) 42%,
    transparent 68%
  );
  opacity: 0; transition: opacity var(--dur-base) var(--ease-brand);
  pointer-events: none;
}
.stage-panel:hover .stage-panel__glass::after,
.stage-panel__glass:hover::after { opacity: 1; }

/* Engine glyphs: Lucide geometry, CSS hover motion (lucide-animated ported
   for vanilla — no React/Motion). Hover target is the glass tile.
   Sitewide UI icons use Phosphor Regular (`.ph`); glyphs stay SVG for motion. */
.icon { width: 1em; height: 1em; display: block; flex: 0 0 auto; }
.icon.ph {
  width: auto;
  height: auto;
  font-size: 1em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.glyph {
  width: 3.4rem; height: 3.4rem;
  display: grid; place-items: center;
  color: var(--accent);
}
.glyph .icon { width: 100%; height: 100%; overflow: visible; }
.glyph .icon > * {
  transform-box: fill-box;
  transform-origin: center;
}

/* PLAN · clipboard-check: check draws in */
.glyph--plan .glyph__check {
  stroke-dasharray: 16;
  stroke-dashoffset: 0;
}
.stage-panel__glass:hover .glyph--plan .glyph__check {
  animation: glyph-check-draw 0.45s var(--ease-brand);
}
.stage-panel__glass:hover .glyph--plan .icon {
  animation: glyph-nudge 0.55s var(--ease-brand);
}

/* ARCHITECT · layers: stagger up */
.glyph--architect .glyph__layer {
  transition: transform 0.4s var(--ease-brand);
}
.stage-panel__glass:hover .glyph--architect .glyph__layer--1 {
  transform: translateY(-1.5px);
  transition-delay: 0.08s;
}
.stage-panel__glass:hover .glyph--architect .glyph__layer--2 {
  transform: translateY(-0.75px);
  transition-delay: 0.04s;
}
.stage-panel__glass:hover .glyph--architect .glyph__layer--3 {
  transform: translateY(0.5px);
}

/* BUILD · terminal: cursor blink + prompt nudge */
.glyph--build .glyph__cursor {
  stroke-dasharray: 8;
  transition: opacity 0.2s var(--ease-brand);
}
.stage-panel__glass:hover .glyph--build .glyph__cursor {
  animation: glyph-cursor-blink 0.9s steps(2, end) infinite;
}
.stage-panel__glass:hover .glyph--build .glyph__prompt {
  animation: glyph-prompt-scan 0.7s var(--ease-brand);
}

/* TEST · flask: liquid sway */
.stage-panel__glass:hover .glyph--test .glyph__liquid {
  animation: glyph-liquid-sway 0.85s var(--ease-brand) infinite alternate;
}
.stage-panel__glass:hover .glyph--test .glyph__vessel {
  animation: glyph-flask-tilt 0.85s var(--ease-brand) infinite alternate;
}

/* DEPLOY · rocket: lift + flame flicker */
.stage-panel__glass:hover .glyph--deploy .icon {
  animation: glyph-rocket-lift 0.7s var(--ease-brand) infinite alternate;
}
.stage-panel__glass:hover .glyph--deploy .glyph__flame {
  animation: glyph-flame-flicker 0.35s ease-in-out infinite alternate;
}

/* EVOLVE · refresh-cw: partial rotate */
.stage-panel__glass:hover .glyph--evolve .icon {
  animation: glyph-refresh-spin 0.85s var(--ease-brand);
}

@keyframes glyph-nudge {
  0%, 100% { transform: translateY(0); }
  40% { transform: translateY(-2px); }
}
@keyframes glyph-check-draw {
  from { stroke-dashoffset: 16; }
  to { stroke-dashoffset: 0; }
}
@keyframes glyph-cursor-blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0.15; }
}
@keyframes glyph-prompt-scan {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(1.5px); }
}
@keyframes glyph-liquid-sway {
  from { transform: translateX(-1px) rotate(-1deg); }
  to { transform: translateX(1px) rotate(1deg); }
}
@keyframes glyph-flask-tilt {
  from { transform: rotate(-2deg); }
  to { transform: rotate(2deg); }
}
@keyframes glyph-rocket-lift {
  from { transform: translate(-0.5px, 1.5px); }
  to { transform: translate(0.5px, -2px); }
}
@keyframes glyph-flame-flicker {
  from { opacity: 0.55; transform: scale(0.92); }
  to { opacity: 1; transform: scale(1.06); }
}
@keyframes glyph-refresh-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(180deg); }
}

/* White-label Guided setup glyphs */
.stage-panel__glass:hover .glyph--program .icon {
  animation: glyph-nudge 0.55s var(--ease-brand);
}
.stage-panel__glass:hover .glyph--program .glyph__stripe {
  animation: glyph-prompt-scan 0.7s var(--ease-brand);
}
.glyph--brand .glyph__well {
  transition: transform 0.4s var(--ease-brand);
}
.stage-panel__glass:hover .glyph--brand .glyph__well:nth-of-type(1) {
  transform: translateY(-1.5px);
  transition-delay: 0.06s;
}
.stage-panel__glass:hover .glyph--brand .glyph__well:nth-of-type(2) {
  transform: translateY(-0.75px);
  transition-delay: 0.03s;
}
.stage-panel__glass:hover .glyph--brand .glyph__well:nth-of-type(3) {
  transform: translateY(0.5px);
}
.stage-panel__glass:hover .glyph--brand .glyph__brush {
  animation: glyph-nudge 0.55s var(--ease-brand);
}
.stage-panel__glass:hover .glyph--sell .icon {
  animation: glyph-nudge 0.55s var(--ease-brand);
}
.stage-panel__glass:hover .glyph--sell .glyph__tag {
  animation: glyph-flask-tilt 0.7s var(--ease-brand) infinite alternate;
}
.stage-panel__glass:hover .glyph--domains .icon {
  animation: glyph-refresh-spin 0.85s var(--ease-brand);
}
.stage-panel__glass:hover .glyph--fund .icon {
  animation: glyph-nudge 0.55s var(--ease-brand);
}
.stage-panel__glass:hover .glyph--fund .glyph__wallet {
  animation: glyph-prompt-scan 0.7s var(--ease-brand);
}
.glyph--finish .glyph__tick {
  stroke-dasharray: 16;
  stroke-dashoffset: 0;
}
.stage-panel__glass:hover .glyph--finish .glyph__tick {
  animation: glyph-check-draw 0.45s var(--ease-brand);
}
.stage-panel__glass:hover .glyph--finish .icon {
  animation: glyph-nudge 0.55s var(--ease-brand);
}

@media (prefers-reduced-motion: reduce) {
  .stage-panel__glass:hover .glyph--plan .glyph__check,
  .stage-panel__glass:hover .glyph--plan .icon,
  .stage-panel__glass:hover .glyph--build .glyph__cursor,
  .stage-panel__glass:hover .glyph--build .glyph__prompt,
  .stage-panel__glass:hover .glyph--test .glyph__liquid,
  .stage-panel__glass:hover .glyph--test .glyph__vessel,
  .stage-panel__glass:hover .glyph--deploy .icon,
  .stage-panel__glass:hover .glyph--deploy .glyph__flame,
  .stage-panel__glass:hover .glyph--evolve .icon,
  .stage-panel__glass:hover .glyph--program .icon,
  .stage-panel__glass:hover .glyph--program .glyph__stripe,
  .stage-panel__glass:hover .glyph--brand .glyph__brush,
  .stage-panel__glass:hover .glyph--sell .icon,
  .stage-panel__glass:hover .glyph--sell .glyph__tag,
  .stage-panel__glass:hover .glyph--domains .icon,
  .stage-panel__glass:hover .glyph--fund .icon,
  .stage-panel__glass:hover .glyph--fund .glyph__wallet,
  .stage-panel__glass:hover .glyph--finish .glyph__tick,
  .stage-panel__glass:hover .glyph--finish .icon {
    animation: none;
  }
  .glyph--architect .glyph__layer,
  .glyph--brand .glyph__well { transition: none; }
  .stage-panel__glass:hover .glyph--architect .glyph__layer--1,
  .stage-panel__glass:hover .glyph--architect .glyph__layer--2,
  .stage-panel__glass:hover .glyph--architect .glyph__layer--3,
  .stage-panel__glass:hover .glyph--brand .glyph__well {
    transform: none;
  }
}

/* ---------------------------------------------------------------------------
   IDEA · From Idea to Working Product (hero panel scrub)
   Left: center-sticky copy. Right: Lovable-style isolated UI cards that
   stack-scrub (one component per plate, soft glow, no filled stage).
   ------------------------------------------------------------------------ */
.hero__idea,
.scene--idea {
  --idea-stage-radius: 1.5rem;
  --idea-panel-radius: 1.25rem;
  --idea-border: color-mix(in srgb, white 11%, transparent);
  --idea-muted: var(--cream-500);
  --idea-active: var(--cream-050);
  --idea-stage-aspect: 1935 / 1605;
  --idea-copy-max: 28rem;
  --idea-step-gap: 1.15rem;
  /* Space between stacked scrub cards (Lovable-style). */
  --idea-panel-gap: clamp(1.25rem, 2.5vw, 2rem);
}

.idea__copy {
  display: grid;
  gap: 1.25rem;
  align-content: start;
  max-width: var(--idea-copy-max);
}

.idea__title {
  margin: 0;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--cream-050);
  font-size: clamp(1.85rem, 3.2vw, 2.75rem);
}

.idea__lead {
  margin: 0;
  max-width: 38ch;
  color: var(--idea-muted);
  line-height: 1.55;
}

.idea__steps {
  list-style: none;
  margin: 0.25rem 0 0;
  padding: 0;
  display: grid;
  gap: var(--idea-step-gap);
}

.idea__step {
  display: grid;
  gap: 0;
  padding-block: 0.2rem;
}

.idea__step-label {
  font-family: var(--font-body);
  font-size: clamp(0.98rem, 1.1vw, 1.1rem);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--idea-muted);
  transition: color var(--dur-base, 0.35s) var(--ease-brand, ease);
}

.idea__step.is-active .idea__step-label {
  color: var(--idea-active);
}
.idea__step.is-done:not(.is-active) .idea__step-label {
  color: color-mix(in srgb, var(--cream-050) 55%, var(--idea-muted));
}

.scene--idea {
  width: min(94%, 38rem);
  display: grid;
  place-items: center;
  overflow: visible;
}

/* Viewport for one card. overflow:hidden frames the active plate; gap between
   panels still scrolls through. (overflow:visible + contain:paint on the
   canvas was letting mid-scrub gaps read as “missing” images.) */
.idea__stage {
  position: relative;
  width: 100%;
  aspect-ratio: var(--idea-stage-aspect);
  border-radius: var(--idea-stage-radius);
  border: 0;
  background: transparent;
  overflow: hidden;
  box-shadow: none;
}

.idea__stage--hero {
  width: min(100%, 36rem);
}

.idea__stack {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  gap: var(--idea-panel-gap);
  will-change: transform;
}

.idea__panel {
  position: relative;
  flex: 0 0 auto;
  margin: 0;
  width: 100%;
  aspect-ratio: var(--idea-stage-aspect);
  border-radius: var(--idea-panel-radius);
  overflow: hidden;
  border: 0;
  box-sizing: border-box;
  background: color-mix(in srgb, var(--ink-850) 80%, transparent);
}

/* Soft glow sits behind the cropped plate (Lovable atmosphere, no inset pad). */
.idea__panel::before {
  content: "";
  position: absolute;
  inset: -12% -8%;
  z-index: 0;
  border-radius: inherit;
  background:
    radial-gradient(90% 70% at 70% 18%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 55%),
    radial-gradient(80% 60% at 20% 88%, color-mix(in srgb, #7c5cff 14%, transparent), transparent 55%);
  pointer-events: none;
}

.idea__panel img,
.idea__panel video {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: inherit;
}

/* Idea scrub beat: same flat page fill as FAQ (`body` / #faq → --ink-900).
   Kill the hero canvas atmosphere so this reads as a section, not a scene. */
html.is-idea-scrub .hero-media {
  background: var(--ink-900);
}
html.is-idea-scrub .hero-media__gradient {
  opacity: 0;
  transition: opacity var(--dur-base, 0.4s) var(--ease-brand, ease);
}
html.is-idea-scrub .hero__glow {
  opacity: 0;
  transition: opacity var(--dur-base, 0.4s) var(--ease-brand, ease);
}
html.is-idea-scrub .hero-media__frame::after {
  background: linear-gradient(
    96deg,
    color-mix(in srgb, var(--ink-900) 96%, transparent) 0%,
    color-mix(in srgb, var(--ink-900) 82%, transparent) 30%,
    transparent 54%
  );
}
html.is-idea-scrub .hero-media__scrim {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

@media (max-width: 991px) {
  .hero__panel.is-3 {
    min-height: auto;
    padding-block: calc(var(--nav-h) + 2rem) 4rem;
  }
  .hero__panel.is-3 > .shell {
    display: block;
    min-height: 0;
    padding-block: 0;
  }
  .hero__idea {
    position: static;
    translate: none;
    max-width: none;
  }
  /* Compact pairs: text → visual under each step; hide the pinned hero stack. */
  html.is-idea-pairs .scene--idea {
    display: none;
  }
  html.is-idea-pairs .idea__step {
    gap: 0.75rem;
    padding-block: 0.35rem 1.1rem;
  }
  html.is-idea-pairs .idea__step-label {
    color: var(--idea-active);
    font-size: clamp(1.02rem, 3.6vw, 1.15rem);
  }
  html.is-idea-pairs .idea__step .idea__panel {
    position: relative;
    width: 100%;
    max-width: 34rem;
    margin: 0;
    aspect-ratio: var(--idea-stage-aspect);
    border-radius: var(--idea-panel-radius);
    overflow: hidden;
  }
  html.is-idea-pairs .idea__step .idea__panel img,
  html.is-idea-pairs .idea__step .idea__panel video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

@media (max-width: 479px) {
  .idea__title { font-size: clamp(1.55rem, 7vw, 2rem); }
  .idea__step-gap { --idea-step-gap: 1rem; }
}


/* ---------------------------------------------------------------------------
   WHY · Built for businesses — static 1 + 3 audience cards
   Visual melts into the text plate (mask + overlapping wash). No knife-edge.
   ------------------------------------------------------------------------ */
.why__head { display: grid; gap: 1rem; margin-bottom: 3rem; max-width: 42rem; }
.why__head .t-h2 { line-height: 1.18; }
.why__glue { white-space: nowrap; }
.why__grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.why__grid > .use-card--hero { grid-column: 1 / -1; }
@media (max-width: 900px) {
  .why__grid { grid-template-columns: 1fr; }
  .why__grid > .use-card--hero { grid-column: auto; }
}

/* ---------------------------------------------------------------------------
   WHITE-LABEL · Brand Takeover (home teaser + shared frames)
   Partner palette scoped inside .wl-takeover so AIWA chrome stays amber.
   .ns-studio remains for /white-label experience cards below the hero.
   ------------------------------------------------------------------------ */
.wl-home { position: relative; }
.wl-home__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(1.6rem, 4vw, 3.5rem);
  align-items: center;
}
.wl-home__visual { margin: 0; min-width: 0; }
.wl-home__image { display: block; width: 100%; height: auto; }
.wl-home__copy { display: grid; gap: 1rem; justify-items: start; max-width: 38rem; }
.wl-home__copy .t-h2 { line-height: 1.12; }
.wl-home__cta {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  flex-wrap: wrap;
}
.wl-home__note {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  font-size: 0.82rem;
  color: var(--cream-500);
}
.wl-home__note-icon {
  width: 1rem;
  height: 1rem;
  flex: 0 0 auto;
  color: var(--cream-500);
}
.wl-home__note-icon.ph {
  width: auto;
  height: auto;
  font-size: 1rem;
}
@media (max-width: 900px) {
  .wl-home__grid { grid-template-columns: 1fr; }
}

/* ---- Brand Takeover stage (canonical Frame_14 + QA shell) ----
   One system only: shell/chrome = QA mix; AIWA plate = ink-800;
   partner end-state = cream-050. No teal. */
.wl-takeover {
  --mock-chrome: #161412;
  --mock-dot: #504A43;
  --mock-url: #181614;
  --mock-content: #252320;
  --wl-shell: var(--mock-chrome);
  --wl-hairline: color-mix(in srgb, var(--cream-050) 10%, transparent);
  --wl-mock-pad: 0.75rem;
  --wl-aiwa-ink: var(--mock-content);
  --wl-aiwa-surface: #2c2926;
  --wl-aiwa-line: #3a3530;
  --wl-partner-accent: var(--accent);
  --wl-partner-gold: var(--cream-100);
  --wl-partner-muted: var(--cream-500);
  display: grid;
  gap: 0.85rem;
  justify-items: stretch;
}
.wl-takeover__stage {
  position: relative;
  isolation: isolate;
}
.wl-takeover__glow {
  position: absolute;
  inset: 12% -8% -18% 35%;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 28%, transparent), transparent 68%);
  filter: blur(36px);
  opacity: 0.5;
  pointer-events: none;
  z-index: 0;
  transition: background 0.6s var(--ease-brand), opacity 0.6s var(--ease-brand);
}
.wl-takeover.is-step-wash .wl-takeover__glow,
.wl-takeover.is-step-done .wl-takeover__glow {
  background: radial-gradient(circle, color-mix(in srgb, var(--wl-partner-accent) 32%, transparent), transparent 68%);
  opacity: 0.62;
}
.wl-takeover__browser {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: auto minmax(16rem, 1fr);
  min-height: clamp(18rem, 42vh, 24rem);
  border: 1px solid color-mix(in srgb, var(--mock-dot) 45%, transparent);
  border-radius: 0.55rem;
  overflow: hidden;
  background: var(--mock-chrome);
  box-shadow: none;
  transition: background 0.55s var(--ease-brand), border-color 0.55s var(--ease-brand);
}
.wl-takeover.is-step-done .wl-takeover__browser,
.wl-takeover__browser--partner {
  background: var(--mock-chrome);
  border-color: color-mix(in srgb, var(--mock-dot) 45%, transparent);
  box-shadow: none;
}

/* Canonical browser chrome: dots · URL · external icon. */
.wl-takeover__chrome {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.6rem 0.75rem;
  border-bottom: 0;
  background: var(--mock-chrome);
  transition: background 0.55s var(--ease-brand);
}
.wl-takeover.is-step-done .wl-takeover__chrome,
.wl-takeover__browser--partner .wl-takeover__chrome {
  background: var(--mock-chrome);
}
.wl-takeover__dots {
  display: flex;
  gap: 0.3rem;
  align-items: center;
  flex: 0 0 auto;
}
.wl-takeover__dots i {
  width: 0.48rem;
  height: 0.48rem;
  border-radius: 50%;
  background: var(--mock-dot);
  opacity: 1;
}
.wl-takeover__url {
  position: relative;
  flex: 1;
  width: auto;
  min-width: 0;
  height: 1.55rem;
  padding: 0 0.75rem;
  border-radius: 999px;
  background: var(--mock-url);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--cream-500);
  overflow: hidden;
}
.wl-takeover__url-aiwa,
.wl-takeover__url-partner {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-inline: 0.75rem;
  white-space: nowrap;
  text-align: left;
  transition: opacity 0.45s var(--ease-brand), transform 0.45s var(--ease-brand);
}
.wl-takeover__url-partner {
  opacity: 0;
  transform: translateY(0.45rem);
  color: var(--wl-partner-muted);
}
.wl-takeover.is-step-done .wl-takeover__url-aiwa {
  opacity: 0;
  transform: translateY(-0.45rem);
}
.wl-takeover.is-step-done .wl-takeover__url-partner {
  opacity: 1;
  transform: translateY(0);
}
.wl-takeover__url--solo {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  color: var(--cream-500);
}
.wl-takeover__ext {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 0.95rem;
  height: 0.95rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: var(--mock-dot);
  opacity: 1;
  transition: color 0.55s var(--ease-brand);
}
.wl-takeover__ext.ph {
  width: auto;
  height: auto;
  font-size: 0.95rem;
}
.wl-takeover.is-step-done .wl-takeover__ext,
.wl-takeover__browser--partner .wl-takeover__ext {
  color: var(--mock-dot);
  opacity: 1;
}

/* Nested content plate inside the shell. */
.wl-takeover__body {
  position: relative;
  min-height: 14rem;
  margin: 0 var(--wl-mock-pad) var(--wl-mock-pad);
  overflow: hidden;
  border-radius: 0.45rem;
  border: 0;
  background: var(--mock-content);
}
.wl-takeover__face {
  position: absolute;
  inset: 0;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 0.45rem;
  padding: 1.5rem 1.2rem;
  text-align: center;
  transition: opacity 0.5s var(--ease-brand), transform 0.5s var(--ease-brand), filter 0.5s var(--ease-brand);
}
.wl-takeover__face--aiwa {
  color: var(--cream-050);
  background: var(--wl-aiwa-ink);
}
.wl-takeover__face--partner {
  opacity: 0;
  transform: scale(1.04);
  filter: blur(4px);
  color: var(--cream-050);
  background: var(--mock-content);
}
.wl-takeover.is-step-done .wl-takeover__face--aiwa {
  opacity: 0;
  transform: scale(0.96);
  filter: blur(3px);
}
.wl-takeover.is-step-done .wl-takeover__face--partner {
  opacity: 1;
  transform: scale(1);
  filter: blur(0);
}
.wl-takeover__aiwa-mark {
  height: 1.35rem;
  width: auto;
  margin-bottom: 0.35rem;
  opacity: 0.92;
}
.wl-takeover__title {
  margin: 0;
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  font-weight: 500;
  letter-spacing: -0.02em;
}
.wl-takeover__sub {
  margin: 0;
  font-size: 0.82rem;
  color: var(--cream-500);
}
.wl-takeover__face--partner .wl-takeover__sub { color: var(--cream-500); }
.wl-takeover__cta {
  margin-top: 0.55rem;
  padding: 0.5rem 1.15rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 500;
  user-select: none;
}
.wl-takeover__cta--aiwa {
  background: linear-gradient(180deg, var(--app-sunset-1, #ffb300), var(--app-sunset-2, #ff5e00));
  color: var(--app-primary-fg, #1f1f1e);
}
.wl-takeover__cta--partner {
  background: var(--accent);
  color: var(--ink-950);
}
.wl-mark {
  width: 1.2rem;
  height: 1.2rem;
  color: var(--wl-partner-accent);
  overflow: visible;
}
.wl-mark--lg { width: 2.5rem; height: 2.5rem; }
.wl-takeover__face--partner .wl-mark {
  color: var(--accent);
}

/* Admin overlay: brand typing + swatches */
.wl-takeover__admin {
  position: absolute;
  left: 0.85rem;
  right: auto;
  bottom: 0.85rem;
  z-index: 3;
  width: min(16.5rem, calc(100% - 1.7rem));
  display: grid;
  gap: 0.55rem;
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--wl-hairline);
  border-radius: 0.9rem;
  background: color-mix(in srgb, var(--ink-850) 92%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 0.8rem 1.8rem rgba(0, 0, 0, 0.4);
  opacity: 0;
  transform: translateY(0.6rem);
  pointer-events: none;
  transition: opacity 0.4s var(--ease-brand), transform 0.4s var(--ease-brand);
}
.wl-takeover.is-step-brand .wl-takeover__admin,
.wl-takeover.is-step-wash .wl-takeover__admin {
  opacity: 1;
  transform: translateY(0);
}
.wl-takeover.is-step-done .wl-takeover__admin {
  opacity: 0;
  transform: translateY(0.4rem);
}
.wl-takeover__admin-kicker {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cream-500);
}
.wl-takeover__field {
  display: grid;
  gap: 0.2rem;
  padding: 0.45rem 0.55rem;
  border-radius: 0.55rem;
  border: 1px solid var(--ink-600);
  background: var(--ink-900);
}
.wl-takeover__field span,
.wl-takeover__field-label {
  font-size: 0.58rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cream-500);
}
.wl-takeover__type {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--cream-050);
  overflow: hidden;
  white-space: nowrap;
  width: 0;
}
.wl-takeover.is-step-brand .wl-takeover__type,
.wl-takeover.is-step-wash .wl-takeover__type,
.wl-takeover.is-step-done .wl-takeover__type {
  width: 100%;
  animation: wl-type 0.85s steps(16, end) both;
}
@keyframes wl-type {
  from { width: 0; }
  to { width: 100%; }
}
.wl-takeover__swatches { display: flex; gap: 0.35rem; }
.wl-swatch {
  width: 1.05rem;
  height: 1.05rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--cream-050) 18%, transparent);
  opacity: 0.35;
  transform: scale(0.85);
  transition: opacity 0.35s var(--ease-brand), transform 0.35s var(--ease-brand);
}
.wl-swatch--ink { background: var(--ink-950); }
.wl-swatch--accent { background: var(--accent); }
.wl-swatch--gold { background: var(--wl-partner-gold); }
.wl-takeover.is-step-wash .wl-swatch,
.wl-takeover.is-step-done .wl-swatch {
  opacity: 1;
  transform: scale(1);
}
.wl-takeover__caption {
  margin: 0;
  font-size: 0.78rem;
  color: var(--cream-500);
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  .wl-takeover__face,
  .wl-takeover__url-aiwa,
  .wl-takeover__url-partner,
  .wl-takeover__admin,
  .wl-swatch,
  .wl-takeover__browser,
  .wl-takeover__glow { transition: none; }
  .wl-takeover__type { animation: none; width: 100%; }
  .wl-takeover--home .wl-takeover__face--aiwa { opacity: 0; }
  .wl-takeover--home .wl-takeover__face--partner { opacity: 1; filter: none; transform: none; }
  .wl-takeover--home .wl-takeover__url-aiwa { opacity: 0; }
  .wl-takeover--home .wl-takeover__url-partner { opacity: 1; transform: none; }
  .wl-takeover--home .wl-takeover__admin { display: none; }
  .wl-takeover--home .wl-takeover__browser {
    background: var(--wl-shell);
    border-color: color-mix(in srgb, var(--cream-050) 8%, transparent);
  }
}

/* ---------------------------------------------------------------------------
   WHITE LABEL PASS · paper hang-tag on a thin cord
   ------------------------------------------------------------------------ */
.wl-pass {
  position: relative;
  background: var(--ink-850);
  padding: 0 0 clamp(3.5rem, 8vh, 6rem);
  overflow: clip;
}
.wl-pass__stage {
  --mx: 50%;
  --my: 28%;
  position: relative;
  display: grid;
  justify-items: center;
  align-content: start;
  /* Room for the ~11rem cord so the card sits near stage center. */
  min-height: clamp(38rem, 78vh, 48rem);
  margin-inline: auto;
  max-width: 56rem;
  perspective: 1200px;
}
.wl-pass__grid {
  position: absolute;
  inset: 0 6% 18%;
  border-radius: 1.5rem;
  background-image:
    linear-gradient(color-mix(in srgb, var(--ink-600) 55%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--ink-600) 55%, transparent) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(65% 60% at 50% 42%, black, transparent 78%);
  opacity: 0.35;
  pointer-events: none;
}
.wl-pass__hang {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  width: min(20rem, 82vw);
  padding-top: 0;
  transform-origin: 50% 0;
  transform-style: preserve-3d;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
/* Let [data-grab] / .is-dragging from base.css own the hang cursor; stop text cursor on copy. */
.wl-pass__hang * {
  cursor: inherit;
}

/* Thin twisted cord from the section ceiling into the punch hole */
.wl-pass__cord {
  display: block;
  width: 1.35rem;
  /* Longer drop so the tag body sits near the vertical center of the stage. */
  height: 11rem;
  color: color-mix(in srgb, var(--ink-900) 55%, var(--cream-500));
  overflow: visible;
}
.wl-pass__cord-twist {
  filter: drop-shadow(0 1px 0 color-mix(in srgb, var(--cream-050) 8%, transparent));
}
.wl-pass__knot {
  position: relative;
  z-index: 2;
  width: 0.55rem;
  height: 0.55rem;
  margin-top: -0.35rem;
  margin-bottom: -0.15rem;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%, var(--cream-300), var(--ink-700) 55%, var(--ink-900));
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 color-mix(in srgb, var(--cream-050) 25%, transparent);
}

/* Hang-tag silhouette: clipped top corners + punch hole */
.wl-pass__card {
  --wl-tag-clip: 1.35rem;
  position: relative;
  width: 100%;
  margin-top: 0;
  padding: 2.1rem 1.35rem 1.25rem;
  border: 0;
  border-radius: 0;
  color: var(--ink-900);
  background: linear-gradient(165deg, var(--cream-050) 0%, var(--cream-100) 70%, color-mix(in srgb, var(--cream-100) 94%, var(--accent) 6%) 100%);
  clip-path: polygon(
    var(--wl-tag-clip) 0%,
    calc(100% - var(--wl-tag-clip)) 0%,
    100% var(--wl-tag-clip),
    100% 100%,
    0% 100%,
    0% var(--wl-tag-clip)
  );
  box-shadow:
    0 1.5rem 3rem rgba(0, 0, 0, 0.42),
    0 0.35rem 0.9rem rgba(0, 0, 0, 0.22);
  overflow: hidden;
  transform-origin: 50% 0.7rem;
  transform-style: preserve-3d;
  isolation: isolate;
}
.wl-pass__card::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0.55rem;
  z-index: 2;
  width: 0.95rem;
  height: 0.95rem;
  translate: -50% 0;
  border-radius: 50%;
  background: var(--ink-850);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--ink-900) 35%, transparent),
    0 0 0 2px color-mix(in srgb, var(--cream-050) 65%, transparent);
}
/* Paper grain */
.wl-pass__card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.22;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  background-size: 160px 160px;
}
.wl-pass__heat {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(
      42% 36% at var(--mx) var(--my),
      color-mix(in srgb, var(--accent) 22%, transparent),
      color-mix(in srgb, var(--accent-glow) 28%, transparent) 42%,
      transparent 70%
    );
  mix-blend-mode: multiply;
  opacity: 0.7;
}
.wl-pass__card-head,
.wl-pass__line,
.wl-pass__display,
.wl-pass__meta,
.wl-pass__badge,
.wl-pass__ticket,
.wl-pass__footer {
  position: relative;
  z-index: 2;
}
.wl-pass__card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 0.35rem;
}
.wl-pass__mark {
  width: 1.55rem;
  height: 1.55rem;
  filter: brightness(0.15);
}
.wl-pass__serial {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  color: var(--ink-500);
}
.wl-pass__line {
  margin: 1.1rem 0 0;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-500);
}
.wl-pass__display {
  margin: 0.55rem 0 0;
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 5vw, 2.85rem);
  font-weight: 500;
  line-height: 0.95;
  letter-spacing: -0.035em;
  color: var(--ink-900);
}
.wl-pass__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem 1.1rem;
  margin-top: 1rem;
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  color: var(--ink-500);
}
.wl-pass__badge {
  display: inline-flex;
  margin-top: 1.05rem;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  background: var(--ink-900);
  color: var(--cream-050);
  font-family: var(--font-mono);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.16em;
}
.wl-pass__ticket {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.35rem;
  padding-top: 0.95rem;
  border-top: 1px dashed color-mix(in srgb, var(--ink-500) 35%, transparent);
}
.wl-pass__barcode {
  flex: 1;
  height: 2.1rem;
  max-width: 10rem;
  background:
    repeating-linear-gradient(
      90deg,
      var(--ink-900) 0 2px,
      transparent 2px 4px,
      var(--ink-900) 4px 5px,
      transparent 5px 8px,
      var(--ink-900) 8px 11px,
      transparent 11px 13px
    );
  opacity: 0.85;
}
.wl-pass__admit {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.14em;
  color: var(--ink-500);
  white-space: nowrap;
}
.wl-pass__footer {
  margin: 0.85rem 0 0;
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.12em;
  color: var(--ink-500);
}
.wl-pass__copy {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 0.75rem;
  justify-items: center;
  text-align: center;
  margin: clamp(1.25rem, 3vh, 2.25rem) auto 0;
  max-width: 48rem;
  padding-inline: var(--gutter);
}
.wl-pass__copy .t-h2 {
  line-height: 1.08;
  max-width: min(28ch, 92vw);
}

@media (prefers-reduced-motion: reduce) {
  .wl-mini,
  .wl-pass__hang,
  .wl-pass__card {
    transform: none !important;
  }
  .wl-pass__heat { opacity: 0.35; }
}

.wl-pass {
  position: relative;
  z-index: 0;
  padding: 0;
  padding-block: 0;
  background: transparent;
  overflow: visible;
}
/* Transform target for Framer-style scale-on-scroll eat-up (see wlPassReveal.js). */
.wl-pass__frame {
  position: relative;
  display: grid;
  align-content: start;
  justify-items: center;
  min-height: min(100svh, 56rem);
  padding-top: 0;
  background: var(--ink-850);
  overflow: clip;
  transform-origin: 50% 50%;
  border-radius: 0;
}
.wl-pass__stage {
  --mx: 50%;
  --my: 28%;
  position: relative;
  display: grid;
  justify-items: center;
  align-content: start;
  width: 100%;
  min-height: clamp(38rem, 78vh, 48rem);
  margin-inline: auto;
  max-width: 56rem;
  perspective: 1200px;
}

.wl-pass__footer {
  margin: 0.85rem 0 0;
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.12em;
  color: var(--ink-500);
}

@media (prefers-reduced-motion: reduce) {
  .wl-pass__hang,
  .wl-pass__card,
  .wl-pass__frame {
    transform: none !important;
  }
  .wl-pass__heat { opacity: 0.35; }
}

.ns-studio {
  --mock-chrome: #161412;
  --mock-dot: #504A43;
  --mock-url: #181614;
  --mock-content: #252320;
  --ns-shell: var(--mock-chrome);
  --ns-bg: var(--mock-content);
  --ns-surface: #2c2926;
  --ns-line: #3a3530;
  --ns-hairline: color-mix(in srgb, var(--cream-050) 10%, transparent);
  --ns-accent: var(--accent);
  --ns-gold: var(--cream-100);
  --ns-text: var(--cream-050);
  --ns-muted: var(--cream-500);
  --ns-pad: 0.55rem;
  display: grid;
  grid-template-columns: minmax(11rem, 0.85fr) minmax(0, 1.15fr);
  gap: 0.7rem;
  padding: 0.75rem;
  border: 1px solid color-mix(in srgb, var(--mock-dot) 45%, transparent);
  border-radius: 0.55rem;
  background: var(--ns-shell);
  min-height: 22rem;
  box-shadow: none;
}
.ns-studio__editor,
.ns-studio__preview {
  border: 1px solid var(--ns-hairline);
  border-radius: 0.55rem;
  background: var(--ns-bg);
  color: var(--ns-text);
  min-width: 0;
}
.ns-studio__editor {
  display: grid;
  align-content: start;
  gap: 0.85rem;
  padding: 1rem 1rem 1.1rem;
}
.ns-studio__kicker {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ns-muted);
}
.ns-studio__field {
  display: grid;
  gap: 0.25rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--ns-line);
  border-radius: 0.55rem;
  background: var(--ns-surface);
}
.ns-studio__field span {
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ns-muted);
}
.ns-studio__field strong { font-size: 0.88rem; font-weight: 500; }
.ns-studio__row {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}
.ns-studio__logo {
  width: 2.4rem;
  height: 2.4rem;
  display: grid;
  place-items: center;
  border-radius: 0.55rem;
  background: var(--ns-surface);
  border: 1px solid var(--ns-line);
  color: var(--ns-gold);
}
.ns-studio__swatches { display: flex; gap: 0.35rem; }
.ns-swatch {
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--cream-050) 18%, transparent);
}
.ns-swatch--ink { background: var(--ink-950); }
.ns-swatch--accent { background: var(--ns-accent); }
.ns-swatch--gold { background: var(--ns-gold); }
.ns-studio__status {
  font-size: 0.72rem;
  color: var(--ns-accent);
}
.ns-studio__preview {
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: hidden;
  background: var(--ns-shell);
  border-color: var(--ns-line);
}
.ns-chrome {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.55rem 0.75rem;
  border-bottom: 0;
  background: var(--mock-chrome);
}
.ns-chrome__dots {
  display: flex;
  gap: 0.3rem;
  align-items: center;
  flex: 0 0 auto;
}
.ns-chrome__dots i {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--mock-dot);
  opacity: 1;
}
.ns-chrome__url {
  flex: 1;
  min-width: 0;
  padding: 0.22rem 0.55rem;
  border-radius: 999px;
  background: var(--mock-url);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  color: var(--ns-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ns-chrome__ext {
  flex: 0 0 auto;
  display: block;
  width: 0.9rem;
  height: 0.9rem;
  padding: 0;
  border: 0;
  color: var(--mock-dot);
  opacity: 1;
}
.ns-signin {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 0.45rem;
  margin: 0 var(--ns-pad) var(--ns-pad);
  padding: 1.4rem 1rem;
  text-align: center;
  border-radius: 0.45rem;
  border: 0;
  background: var(--mock-content);
  color: var(--cream-050);
}
.ns-signin p { margin: 0; }
.ns-signin__brand { font-size: 1.05rem; font-weight: 500; }
.ns-signin__hint { font-size: 0.78rem; color: var(--cream-500); }
.ns-signin__btn {
  margin-top: 0.45rem;
  padding: 0.45rem 1.1rem;
  border-radius: 999px;
  background: var(--accent);
  color: var(--ink-950);
  font-size: 0.78rem;
  font-weight: 500;
}
.ns-mark { width: 1.15rem; height: 1.15rem; color: var(--ns-gold); }
.ns-mark--lg { width: 2.4rem; height: 2.4rem; color: var(--accent); }
.ns-studio--compact { min-height: 0; grid-template-columns: 1fr; padding: 0; border: 0; background: transparent; box-shadow: none; border-radius: 0; }
.ns-studio--compact .ns-studio__editor { display: none; }
.ns-studio--compact .ns-studio__preview {
  border: 1px solid color-mix(in srgb, var(--mock-dot) 45%, transparent);
  border-radius: 0.55rem;
  box-shadow: none;
  background: var(--mock-chrome);
}
.ns-studio--mail {
  min-height: 0;
  grid-template-columns: 1fr;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
}
.ns-studio--mail .ns-studio__editor { display: none; }
.ns-studio--mail .ns-studio__preview {
  display: grid;
  align-content: start;
  grid-template-rows: auto;
  border: 1px solid color-mix(in srgb, var(--mock-dot) 45%, transparent);
  border-radius: 0.55rem;
  box-shadow: none;
  background: var(--mock-chrome);
}
.ns-mail {
  display: grid;
  gap: 0.45rem;
  margin: var(--ns-pad);
  padding: 1.05rem 1.05rem 1.15rem;
  border-radius: 0.45rem;
  border: 0;
  background: var(--mock-content);
  color: var(--cream-050);
}
.ns-mail p { margin: 0; }
.ns-mail__from { font-size: 0.72rem; color: var(--cream-500); }
.ns-mail__from b { color: var(--cream-050); font-weight: 500; }
.ns-mail__subject { font-size: 0.92rem; font-weight: 500; }
.ns-mail__tag {
  justify-self: start;
  margin-top: 0.2rem;
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
@media (max-width: 720px) {
  .ns-studio { grid-template-columns: 1fr; min-height: 0; }
}

.use-card {
  --use-plate: var(--surface-fill);
  --use-fade: clamp(5.25rem, 18vw, 7.5rem);
  --use-fade-inset: 0.52;
  --use-mask-angle: 180deg;
  --use-wash-angle: 180deg;
  --use-mask: linear-gradient(
    var(--use-mask-angle),
    #000 0%,
    #000 calc(100% - var(--use-fade)),
    rgb(0 0 0 / 0.82) calc(100% - var(--use-fade) * 0.72),
    rgb(0 0 0 / 0.48) calc(100% - var(--use-fade) * 0.42),
    rgb(0 0 0 / 0.16) calc(100% - var(--use-fade) * 0.16),
    transparent 100%
  );
  position: relative;
  display: grid;
  grid-template-rows: minmax(14rem, 1fr) auto;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid var(--ink-600);
  border-radius: 1.5rem;
  background: var(--use-plate);
  min-height: 0;
}
.use-card--hero {
  --use-mask-angle: 90deg;
  --use-wash-angle: 90deg;
  grid-template-columns: minmax(0, 1.15fr) minmax(16rem, 0.85fr);
  grid-template-rows: auto;
  min-height: clamp(22rem, 42vh, 30rem);
}
@media (max-width: 900px) {
  .use-card--hero {
    --use-mask-angle: 180deg;
    --use-wash-angle: 180deg;
    grid-template-columns: 1fr;
    grid-template-rows: minmax(14rem, auto) auto;
    min-height: 0;
  }
}

.use-card__visual {
  position: relative;
  z-index: 0;
  margin: 0;
  overflow: visible;
  display: grid;
  place-items: center;
  min-height: 14rem;
  background: var(--ink-900);
  -webkit-mask-image: var(--use-mask);
  mask-image: var(--use-mask);
}
.use-card--hero .use-card__visual { min-height: 100%; }
.use-card__visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}
.use-card__visual--product {
  isolation: isolate;
}
.use-card__visual--product img {
  position: absolute;
  inset: 0;
}

/* Soft Lovable-style color wash behind isolated fragments */
.use-card__glow {
  position: absolute;
  inset: 8% 8% -28% 8%;
  border-radius: 50%;
  filter: blur(42px);
  opacity: 0.62;
  pointer-events: none;
  z-index: 0;
}
.use-card__glow--warm {
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 55%, transparent), transparent 70%);
}
.use-card__glow--mint {
  background: radial-gradient(circle, color-mix(in srgb, var(--good) 40%, transparent), transparent 70%);
}
.use-card__glow--sky {
  background: radial-gradient(circle, color-mix(in srgb, #6ea8ff 45%, transparent), transparent 70%);
}
.use-card__glow--peach {
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 40%, #ff8a65 30%), transparent 70%);
}

.use-card__visual--collage,
.use-card__visual--fragment {
  padding: clamp(1.1rem, 2.4vw, 1.75rem);
}

.use-collage {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.45rem;
  width: min(100%, 17rem);
  rotate: -2deg;
}
.use-collage img {
  aspect-ratio: 5 / 3;
  border-radius: 0.65rem;
  border: 1px solid color-mix(in srgb, white 12%, transparent);
  object-fit: cover;
  box-shadow: 0 0.6rem 1.4rem rgb(0 0 0 / 0.4);
}
.use-collage img:nth-child(2) { translate: 0 0.55rem; }
.use-collage img:nth-child(3) { translate: 0 -0.35rem; }
.use-collage img:nth-child(4) { translate: 0 0.2rem; }

.use-frag {
  position: relative;
  z-index: 1;
  width: min(100%, 18rem);
  border-radius: 1rem;
  border: 1px solid color-mix(in srgb, white 12%, transparent);
  background: color-mix(in srgb, var(--ink-850) 92%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 1rem 2.5rem -1rem rgb(0 0 0 / 0.55);
}

.use-frag--pipeline {
  padding: 0.9rem;
  display: grid;
  gap: 0.7rem;
}
.use-frag__kicker {
  margin: 0;
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cream-500);
  font-family: var(--font-mono);
}
.use-frag__cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.4rem;
}
.use-frag__col {
  display: grid;
  gap: 0.2rem;
  padding: 0.55rem 0.5rem;
  border-radius: 0.55rem;
  background: color-mix(in srgb, var(--ink-900) 70%, transparent);
  border: 1px solid color-mix(in srgb, white 6%, transparent);
}
.use-frag__col.is-hot {
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent);
}
.use-frag__col span {
  font-size: 0.55rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cream-500);
}
.use-frag__col b {
  font-size: 0.68rem;
  font-weight: 500;
  color: var(--cream-050);
  line-height: 1.2;
}
.use-frag__col em {
  font-style: normal;
  font-size: 0.62rem;
  color: var(--accent);
  font-family: var(--font-mono);
}

.use-frag--projects { padding: 0.75rem 0.8rem 0.85rem; display: grid; gap: 0.65rem; }
.use-frag__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.72rem;
  color: var(--cream-100);
  font-weight: 500;
}
.use-frag__count {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  color: var(--cream-500);
}
.use-frag__list {
  display: grid;
  gap: 0.35rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.use-frag__list li {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.45rem 0.5rem;
  border-radius: 0.55rem;
  color: var(--cream-300);
}
.use-frag__list li.is-on {
  background: color-mix(in srgb, var(--cream-050) 8%, transparent);
  color: var(--cream-050);
}
.use-frag__list i {
  width: 1.55rem;
  height: 1.55rem;
  border-radius: 0.4rem;
  display: grid;
  place-items: center;
  font-style: normal;
  font-size: 0.7rem;
  font-weight: 700;
  background: color-mix(in srgb, var(--accent) 22%, var(--ink-900));
  color: var(--accent);
  flex: 0 0 auto;
}
.use-frag__list div { display: grid; gap: 0.05rem; min-width: 0; }
.use-frag__list b { font-size: 0.75rem; font-weight: 500; }
.use-frag__list em { font-style: normal; font-size: 0.62rem; color: var(--cream-500); }

.use-card__body {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 0.55rem;
  align-content: start;
  padding: clamp(1.15rem, 2vw, 1.55rem);
  margin-block-start: calc(var(--use-fade) * var(--use-fade-inset) * -1);
  background: linear-gradient(
    var(--use-wash-angle),
    transparent 0%,
    color-mix(in srgb, var(--use-plate) 42%, transparent) 18%,
    color-mix(in srgb, var(--use-plate) 88%, transparent) 38%,
    var(--use-plate) 56%
  );
}
.use-card__body::before {
  content: '';
  position: absolute;
  z-index: -1;
  pointer-events: none;
  inset-inline: 0;
  top: 0;
  height: var(--use-fade);
  background: linear-gradient(
    var(--use-wash-angle),
    transparent 0%,
    color-mix(in srgb, var(--use-plate) 55%, transparent) 45%,
    var(--use-plate) 100%
  );
  filter: blur(var(--blur-atmosphere));
  transform: translateY(-32%);
  opacity: 0.92;
}
.use-card--hero .use-card__body {
  padding: clamp(1.5rem, 3vw, 2.4rem);
  align-content: center;
  margin-block-start: 0;
  margin-inline-start: calc(var(--use-fade) * var(--use-fade-inset) * -1);
}
.use-card--hero .use-card__body::before {
  inset-inline: auto;
  inset-block: 0;
  left: 0;
  width: var(--use-fade);
  height: auto;
  transform: translateX(-32%);
}
@media (min-width: 901px) {
  /* Reserve half the card for copy; the image fades entirely inside its half. */
  .use-card--hero { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .use-card--hero .use-card__body {
    margin-inline-start: 0;
    background: none;
  }
  .use-card--hero .use-card__body::before { display: none; }
}
@media (max-width: 900px) {
  .use-card--hero .use-card__body {
    margin-inline-start: 0;
    margin-block-start: calc(var(--use-fade) * var(--use-fade-inset) * -1);
  }
  .use-card--hero .use-card__body::before {
    inset-inline: 0;
    inset-block: auto;
    top: 0;
    left: 0;
    width: auto;
    height: var(--use-fade);
    transform: translateY(-32%);
  }
}
.use-card__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.6vw, 1.45rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--cream-050);
  line-height: 1.2;
}
.use-card--hero .use-card__title {
  font-size: clamp(1.45rem, 2.4vw, 2rem);
}
.use-card__lead {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--cream-100);
}
.use-card__copy {
  margin: 0;
  color: var(--cream-500);
  font-size: 0.88rem;
  line-height: 1.5;
}
.use-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.45rem;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--accent);
  transition: color var(--dur-micro) var(--ease-brand), gap var(--dur-micro) var(--ease-brand);
}
.use-card__cta .icon { width: 0.95rem; height: 0.95rem; }
.use-card__cta .icon.ph { width: auto; height: auto; font-size: 0.95rem; }
.use-card__cta:hover {
  color: var(--cream-050);
  gap: 0.6rem;
}

.feature {
  position: relative; overflow: hidden;
  padding: var(--feature-pad);
  border: 1px solid var(--line); border-radius: 1.6rem;
  background: linear-gradient(180deg, rgba(28,24,17,0.42), rgba(12,10,8,0.42));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: grid; align-content: start; gap: 1.1rem; min-height: 0;
  transform-origin: center;
}
.feature--hero {
  grid-column: span 3;
  grid-template-columns: minmax(16rem, 0.95fr) minmax(18rem, 1.05fr);
  grid-template-rows: auto;
  align-items: start;
  gap: var(--feature-hero-gap);
  min-height: 0;
  padding: var(--feature-hero-pad) var(--feature-pad);
}
.feature--hero .feature__blob { grid-column: 1 / -1; grid-row: 1; }
.feature--hero .feature__body { grid-column: 1; grid-row: 1; align-self: start; max-width: 38ch; }
.feature--hero .feature__stage { grid-column: 2; grid-row: 1; height: var(--stage-hero-min); min-height: 0; }
.feature--hero .stage-ui { min-height: 100%; }
.feature--hero .feature__stage::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0;
  height: calc(var(--stage-fade) * var(--stage-hero-fade));
  z-index: 5;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, var(--ink-850));
}
@media (max-width: 900px) {
  .feature--hero { grid-column: auto; grid-template-columns: 1fr; min-height: 0; }
  .feature--hero .feature__blob { grid-column: 1; grid-row: 1; }
  .feature--hero .feature__body,
  .feature--hero .feature__stage { grid-column: auto; grid-row: auto; }
  .feature--hero .feature__body { max-width: none; }
  .feature--hero .feature__stage { height: auto; min-height: var(--stage-hero-min); }
}
.feature:not(.feature--hero) {
  padding: 0;
  gap: 0;
  grid-template-rows: minmax(var(--stage-card-min), 1fr) auto;
}
.feature:not(.feature--hero) .feature__stage {
  min-height: var(--stage-card-min);
  border: 0;
  border-radius: inherit;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  background: var(--ink-800);
}
.feature:not(.feature--hero) .stage-ui {
  min-height: var(--stage-card-min);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 calc(100% - var(--stage-fade)), transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 calc(100% - var(--stage-fade)), transparent 100%);
}
.feature:not(.feature--hero) .feature__body {
  z-index: 3;
  max-width: none;
  padding: 0 var(--feature-pad) var(--feature-pad);
  margin-top: calc(var(--stage-fade) * var(--stage-fade-inset) * -1);
}
.feature__stage {
  position: relative; z-index: 2;
  margin: 0;
  min-height: var(--stage-min);
  display: grid;
  border-radius: var(--stage-radius);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--ink-850);
  contain: layout paint;
}
.feature:not(.feature--hero) .feature__stage::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0;
  height: var(--stage-fade);
  z-index: 5;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 0%, var(--stage-blend) 72%);
  backdrop-filter: blur(var(--stage-fade-blur));
  -webkit-backdrop-filter: blur(var(--stage-fade-blur));
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 32%, #000 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 32%, #000 100%);
}
.stage-ui {
  display: grid; align-content: start; gap: var(--stage-gap);
  min-height: var(--stage-min);
  padding: var(--stage-pad);
  font-size: var(--stage-type);
  color: var(--cream-100);
  transform-origin: center;
}
.stage-ui__chrome {
  display: flex; align-items: center; gap: 0.4rem;
  color: var(--cream-050);
  font-weight: 500;
}
.stage-ui__chrome img { width: 1rem; height: 1rem; border-radius: 0.22rem; }
.stage-ui__chrome .icon { width: 0.7rem; height: 0.7rem; color: var(--cream-500); }
.stage-ui__chrome .icon.ph { width: auto; height: auto; font-size: 0.7rem; }
.stage-ui__spacer { flex: 1; }
.stage-ui__count {
  min-width: 1.2rem; text-align: center;
  border-radius: 999px; padding: 0.08rem 0.4rem;
  background: var(--ink-700); color: var(--cream-300);
}
.stage-ui__preview {
  display: inline-flex; align-items: center; gap: 0.28rem;
  padding: 0.2rem 0.5rem; border-radius: 999px;
  border: 1px solid var(--line); color: var(--cream-100);
}
.stage-ui__preview .icon { width: 0.7rem; height: 0.7rem; }
.stage-ui__preview .icon.ph { width: auto; height: auto; font-size: 0.7rem; }
.stage-ui__preview.is-on {
  border-color: color-mix(in srgb, var(--accent) 50%, var(--ink-600));
  color: var(--accent);
}
.stage-ui__thread { display: grid; gap: 0.45rem; }
.stage-msg {
  padding: 0.55rem 0.65rem;
  border-radius: 0.7rem;
  border: 1px solid var(--line);
  background: rgba(12, 10, 8, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--cream-300);
}
.stage-msg p { margin: 0; }
.stage-msg--user { color: var(--cream-100); background: rgba(254, 160, 2, 0.06); }
.stage-plan {
  display: grid; gap: 0.3rem;
  margin-top: 0.5rem; padding-top: 0.5rem;
  border-top: 1px solid var(--line);
}
.stage-plan__idx { color: var(--accent); }
.stage-plan__link { color: var(--cream-050); }
.stage-ui__composer {
  display: flex; align-items: center; gap: 0.4rem;
  padding: 0.35rem 0.45rem 0.35rem 0.7rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(6, 5, 4, 0.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.stage-ui__ask { flex: 1; color: var(--cream-500); }
.stage-ui__composer .stage-prompt__send { margin-left: auto; }

.stage-prompt .stage-prompt__body { padding: 0.7rem 0.85rem 0.55rem; font-size: var(--stage-type); }
.stage-prompt .stage-prompt__bar { padding: 0.35rem 0.4rem; }
.stage-prompt .stage-prompt__chip.is-on {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--ink-600));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 20%, transparent);
}
.stage-prompt .stage-prompt__send.is-on { transform: scale(var(--scale-press)); }

.stage-cursor {
  position: absolute; left: 0; top: 0; z-index: 6;
  width: var(--cursor-size); height: var(--cursor-size);
  pointer-events: none;
  opacity: 0;
  transform-origin: calc(var(--cursor-origin-x) * 100%) calc(var(--cursor-origin-y) * 100%);
}
.stage-cursor img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
  pointer-events: none;
}
.stage-cursor__click { opacity: 0; }
.stage-cursor.is-click .stage-cursor__ptr { opacity: 0; }
.stage-cursor.is-click .stage-cursor__click { opacity: 1; }
.stage-cursor__ring {
  position: absolute;
  left: calc(var(--cursor-origin-x) * 100% - var(--cursor-ring) / 2);
  top: calc(var(--cursor-origin-y) * 100% - var(--cursor-ring) / 2);
  width: var(--cursor-ring); height: var(--cursor-ring);
  border: 1px solid var(--accent);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
}
.stage-cursor.is-click .stage-cursor__ring {
  animation: cursor-ping var(--cursor-press) var(--ease-out) forwards;
}
@keyframes cursor-ping {
  from { transform: scale(0.35); opacity: 0.85; }
  to { transform: scale(1.85); opacity: 0; }
}

.stage-prompt__chip,
.stage-prompt__send,
.stage-ui__preview,
.stage-plan__link,
.stage-filters span,
.stage-projects li,
.eflow__col {
  transition:
    transform var(--cursor-press) var(--ease-out),
    border-color var(--cursor-press) var(--ease-out),
    background-color var(--cursor-press) var(--ease-out),
    color var(--cursor-press) var(--ease-out),
    box-shadow var(--cursor-press) var(--ease-out),
    outline-color var(--cursor-press) var(--ease-out);
}
.stage-prompt__chip.is-hot,
.stage-prompt__send.is-hot,
.stage-ui__preview.is-hot,
.stage-plan__link.is-hot,
.stage-filters span.is-hot,
.stage-projects li.is-hot,
.eflow__col.is-hot {
  outline: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
}
.stage-plan__link { cursor: default; color: var(--cream-050); }
.stage-plan__link.is-on { color: var(--accent); }
.eflow__col.is-on {
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--preview-teal) 35%, transparent);
}
.stage-projects li.is-on {
  background: rgba(254, 160, 2, 0.08);
  border-radius: 0.4rem;
}

.stage-entities {
  display: flex; flex-wrap: wrap; gap: 0.35rem;
  margin: 0; padding: 0; list-style: none;
}
.stage-entities li {
  padding: 0.22rem 0.5rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(6, 5, 4, 0.4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--cream-300);
}

.stage-ui--preview { position: relative; overflow: hidden; }
.feature:not(.feature--hero) .stage-ui--preview {
  grid-template-rows: auto minmax(0, 1fr);
}
.stage-boot {
  display: grid; justify-items: center; align-content: center; gap: 0.35rem;
  padding: 1.4rem 0.6rem 1rem;
  min-height: 0;
  text-align: center; color: var(--cream-100);
}
.stage-boot .quiet { color: var(--cream-500); }
.stage-boot__mark {
  width: 2rem; height: 2rem; display: grid; place-items: center;
  border-radius: 50%;
  background: var(--prompt-send-fill);
  color: var(--ink-900); font-weight: 700;
}
.stage-boot__track {
  display: block; width: 5.5rem; height: 2px;
  border-radius: 99px;
  background: var(--ink-600);
  overflow: hidden;
}
.stage-boot__rail {
  display: block; width: 100%; height: 100%;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
}
.stage-ui--preview.is-ready .stage-boot { display: none; }
.stage-ui--preview.is-ready .eflow { display: grid; height: 100%; }
.eflow {
  display: none;
  align-content: start;
  gap: 0.45rem;
  min-height: 0;
  padding: 0.7rem;
  border-radius: 0.7rem;
  background: var(--preview-cream);
  color: var(--preview-ink);
}
.eflow__kicker {
  font-size: 0.58rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--preview-muted);
}
.eflow__h { font-family: var(--font-display); font-size: 0.95rem; line-height: 1.2; }
.eflow__h em { color: var(--preview-teal); font-style: normal; }
.eflow__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.35rem; }
.eflow__col {
  display: grid; gap: 0.15rem;
  padding: 0.4rem;
  border-radius: 0.4rem;
  background: #fff;
  box-shadow: 0 1px 0 rgba(22, 20, 18, 0.06);
}
.eflow__col span {
  font-size: 0.55rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--preview-muted);
}
.eflow__col b { font-size: 0.62rem; }
.eflow__col em { font-size: 0.58rem; color: var(--preview-teal); font-style: normal; }

.stage-filters { display: flex; gap: 0.35rem; color: var(--cream-500); }
.stage-filters span {
  padding: 0.16rem 0.45rem; border-radius: 999px;
  border: 1px solid transparent;
}
.stage-filters span.is-on {
  border-color: var(--line);
  color: var(--cream-050);
  background: rgba(254, 160, 2, 0.08);
}
.stage-projects { display: grid; gap: 0.4rem; margin: 0; padding: 0; list-style: none; }
.stage-projects li {
  display: grid; grid-template-columns: 1.3rem 1fr auto; gap: 0.45rem; align-items: center;
}
.stage-projects i {
  display: grid; place-items: center;
  width: 1.3rem; height: 1.3rem; border-radius: 0.3rem;
  background: rgba(254, 160, 2, 0.16); color: var(--accent);
  font-style: normal; font-weight: 500;
}
.stage-projects b { display: block; color: var(--cream-050); }
.stage-projects em { color: var(--cream-500); font-style: normal; }
.stage-draft {
  padding: 0.1rem 0.35rem; border-radius: 999px;
  background: rgba(6, 5, 4, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--line);
  color: var(--cream-300);
}

@media (prefers-reduced-motion: reduce) {
  .stage-ui--preview .stage-boot { display: none; }
  .stage-ui--preview .eflow { display: grid; }
  .stage-cursor { display: none; }
  .gradlab__canvas, .gradlab__noise { display: none; }
}
.feature__body { display: grid; gap: 0.7rem; position: relative; z-index: 2; max-width: 44ch; }
/* screen blend so the ring reads as light in the room rather than a brown
   smudge sitting on top of the card */
.feature__blob {
  position: absolute; inset: -34% -12% auto auto; width: 38rem; height: 38rem;
  z-index: 1; opacity: 0.7; pointer-events: none; mix-blend-mode: screen;
}

/* ---------------------------------------------------------------------------
   INTEGRATIONS · generated arc diagram, quote centered in the bowl
   ------------------------------------------------------------------------ */

/* ---------------------------------------------------------------------------
   GALLERY
   ------------------------------------------------------------------------ */
/* ---------------------------------------------------------------------------
   MADE WITH AIWA · the contact sheet

   Was two marquee rows travelling in opposite directions at 30 px/s. It is a
   static grid of real AIWA projects now: type badge on the frame, hover
   actions for copy-prompt / use-template, no plate index or hairline.
   ------------------------------------------------------------------------ */
.gallery__head { display: grid; gap: 1.15rem; margin-bottom: clamp(2.2rem, 4vw, 3.4rem); }

/* The masthead: eyebrow, a rule that eats the remaining measure, and the one
   outbound link in the section sitting on the end of it. */
.gallery__masthead { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1.1rem; }
.gallery__rule { height: 1px; background: var(--ink-600); }
.gallery__all {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--cream-300); white-space: nowrap;
  transition: color var(--dur-micro) var(--ease-brand);
}
.gallery__all .icon {
  width: 0.85rem; height: 0.85rem;
  transition: transform var(--dur-micro) var(--ease-brand);
}
.gallery__all .icon.ph {
  width: auto;
  height: auto;
  font-size: 0.85rem;
}
.gallery__all:hover { color: var(--accent); }
.gallery__all:hover .icon { transform: translateX(0.25rem); }

.gallery__grid {
  /* Three-up so each plate is large enough to read the real product UI. */
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(2rem, 3vw, 2.85rem) clamp(1.15rem, 1.9vw, 1.85rem);
  list-style: none; padding: 0; margin: 0;
}
.shot__card { display: grid; gap: 0.95rem; }

/* The plate. overflow:hidden keeps the image + hover overlay inside the radius. */
.shot__frame {
  position: relative;
  display: block; overflow: hidden;
  border: 1px solid var(--ink-600); border-radius: 0.9rem;
  background: var(--ink-850);
  isolation: isolate;
}
.shot__frame img {
  display: block; width: 100%; aspect-ratio: 16 / 11;
  object-fit: cover; object-position: top center;
  transition: transform var(--dur-reveal) var(--ease-brand), filter var(--dur-base) var(--ease-brand);
}
.shot__badge {
  position: absolute;
  right: 0.7rem; bottom: 0.7rem;
  z-index: 2;
  padding: 0.28rem 0.55rem;
  border-radius: 999px;
  border: none;
  background: color-mix(in srgb, var(--ink-900) 50%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cream-050);
  pointer-events: none;
}
.shot__actions {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.55rem;
  padding: 0.85rem;
  background: color-mix(in srgb, var(--ink-950) 48%, transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--dur-base) var(--ease-brand),
    visibility var(--dur-base) var(--ease-brand);
}
.shot__action {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 2.35rem;
  padding: 0.45rem 0.95rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  white-space: nowrap;
  border: 1px solid transparent;
  transition:
    transform var(--dur-micro) var(--ease-brand),
    background-color var(--dur-micro) var(--ease-brand),
    border-color var(--dur-micro) var(--ease-brand),
    color var(--dur-micro) var(--ease-brand);
}
.shot__action .icon { width: 0.9rem; height: 0.9rem; flex: 0 0 auto; }
.shot__action .icon.ph { width: auto; height: auto; font-size: 0.9rem; }
.shot__action--solid {
  background: var(--cream-050);
  color: var(--ink-950);
}
.shot__action--solid:hover { background: #fff; }
.shot__action--ghost {
  background: color-mix(in srgb, var(--ink-900) 55%, transparent);
  color: var(--cream-050);
  border-color: transparent;
}
.shot__action--ghost:hover {
  background: color-mix(in srgb, var(--ink-850) 88%, transparent);
}

.shot__meta { display: grid; gap: 0.15rem; padding-top: 0.15rem; }
.shot__body { display: grid; gap: 0.15rem; }
.shot__title {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.05rem, 1.15vw, 1.15rem); line-height: 1.2; letter-spacing: -0.02em; color: var(--cream-050);
  transition: color var(--dur-micro) var(--ease-brand);
}
.shot__desc { font-size: 0.8rem; line-height: 1.4; color: var(--cream-500); }

@media (hover: hover) and (pointer: fine) {
  .shot__card:hover .shot__frame img,
  .shot__frame:focus-within img {
    transform: scale(1.03);
    filter: brightness(0.72);
  }
  .shot__card:hover .shot__actions,
  .shot__frame:focus-within .shot__actions {
    opacity: 1;
    visibility: visible;
  }
  .shot__card:hover .shot__title { color: var(--accent); }
}
.shot__action:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 0.2rem;
}

@media (max-width: 860px)  {
  .gallery__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Touch: actions stay reachable without hover. */
  .shot__actions {
    opacity: 1;
    visibility: visible;
    background: linear-gradient(180deg, transparent 35%, color-mix(in srgb, var(--ink-950) 72%, transparent) 100%);
    align-items: flex-end;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .shot__frame img { filter: none; }
}

@media (prefers-reduced-motion: reduce) {
  .shot__frame img,
  .shot__actions,
  .shot__action { transition: none; }
}

/* ---------------------------------------------------------------------------
   PRICING
   ------------------------------------------------------------------------ */
.pricing__head { display: grid; gap: 1rem; justify-items: center; text-align: center; margin-bottom: 3rem; }
.pricing__head .section__lead { text-align: center; }

.switch {
  position: relative; display: inline-flex; margin-top: 0.8rem;
  padding: 0.28rem; border: 1px solid var(--ink-600); border-radius: 999px; background: var(--ink-850);
}
/* §3.5 - a positioned ::before that slides. Numbers swap instantly. */
.switch__pill {
  position: absolute; top: 0.28rem; bottom: 0.28rem; left: 0.28rem; width: calc(50% - 0.28rem);
  border-radius: 999px; background: var(--accent);
  transition: transform var(--dur-base) var(--ease-brand);
}
.switch[data-billing='annual'] .switch__pill { transform: translateX(100%); }
/* Equal-width options: the sliding pill is a flat 50%, so an "Annual 13% OFF"
   label that is wider than "Monthly" would leave the pill short of its own
   text on one side. */
.switch__opt { position: relative; z-index: 1; flex: 1 1 0; min-width: 9.5rem; text-align: center; padding: 0.5rem 1.1rem; border-radius: 999px; font-size: 0.85rem; color: var(--cream-300); transition: color var(--dur-base) var(--ease-brand); white-space: nowrap; }
.switch__opt.is-active { color: var(--ink-900); font-weight: 500; }
.switch__opt em { font-style: normal; font-size: 0.68rem; opacity: 0.75; }

/* Bottom-aligned, like apps/marquee's row (align-items: flex-end): the cards
   are their content's height and hang from a shared baseline, so Solo and
   Agency - the two that carry a credit slider - stand taller than Launchpad
   and Enterprise between them. The CTAs still line up, because the CTA is the
   last row of every card and the cards share their bottom edge; that is the
   same guarantee the old `1fr` list row bought, for free. */
.pricing__grid { display: grid; gap: 1rem; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: end; }
@media (max-width: 1100px) { .pricing__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .pricing__grid { grid-template-columns: 1fr; } }

.plan {
  position: relative; display: grid; gap: 0.85rem;
  grid-auto-rows: min-content;
  padding: 1.6rem 1.4rem;
  border: 1px solid var(--ink-600); border-radius: 1.4rem;
  background: var(--surface-fill);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.plan--featured { border-color: rgba(254,160,2,0.4); background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 7%, transparent), var(--surface-fill)); }
.plan__flag { position: absolute; top: -0.65rem; left: 1.4rem; padding: 0.15rem 0.6rem; border-radius: 999px; background: var(--accent); color: var(--ink-900); font-size: 0.62rem; font-weight: 500; letter-spacing: 0.04em; }
.plan__name { font-size: 1.1rem; }
.plan__price { display: flex; align-items: baseline; gap: 0.3rem; flex-wrap: wrap; }
.plan__price b { font-family: var(--font-display); font-size: 2.6rem; font-weight: 500; letter-spacing: -0.04em; line-height: 1; }
.plan__price em { font-style: normal; font-size: 0.72rem; color: var(--cream-500); }
.plan__meta { font-size: 0.78rem; color: var(--cream-500); }
.plan__list { display: grid; gap: 0.5rem; font-size: 0.82rem; color: var(--cream-300); padding-top: 0.6rem; border-top: 1px solid var(--ink-600); }
.plan__list li { position: relative; padding-left: 1.1rem; }
.plan__list li::before { content: ''; position: absolute; left: 0; top: 0.5em; width: 0.5rem; height: 0.28rem; border-left: 1.5px solid var(--good); border-bottom: 1.5px solid var(--good); transform: rotate(-45deg); }
.plan__list li.is-limit { color: var(--cream-500); }
.plan__list li.is-limit::before { border-color: var(--ink-500); }
.plan__list em { font-style: normal; margin-left: 0.35rem; padding: 0.05rem 0.35rem; border-radius: 0.3rem; background: rgba(254,160,2,0.15); color: var(--accent); font-size: 0.62rem; }
.plan__cta { margin-top: 0.6rem; justify-content: center; }

/* ---- credit slider · Solo and Agency ------------------------------------
   apps/web's CreditSlider (components/billing/PricingTable.tsx), ported. That
   component's own comment calls it "the lander's stepped credit slider, with
   finesse", so this is the round trip: the STOPS are the controls - real
   buttons in a radiogroup, with generous hit areas, hover growth and arrow
   keys - not a native range with a draggable thumb.

   Beam + knob use one solid color per stop (gold → amber → green). Dots are
   always opaque so the beam never reads through them; passed stops fill with
   the active heat color.
   ------------------------------------------------------------------------ */
.credits { display: grid; gap: 0.3rem; }

.credits__stops { position: relative; height: 1.75rem; margin-inline: 0.25rem; }
.credits__track,
.credits__beam {
  position: absolute; left: 0; right: 0; top: 50%;
  height: 3px; margin-top: -1.5px; border-radius: 999px;
  z-index: 0;
  pointer-events: none;
}
.credits__track {
  inset-inline: 0;
  background: var(--app-hover);
}
.credits__beam {
  right: auto; width: 0;
  transition: width var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out);
}
.credits[data-heat='0'] .credits__beam { background: var(--app-sunset-1); }
.credits[data-heat='1'] .credits__beam { background: var(--accent); }
.credits[data-heat='2'] .credits__beam { background: var(--good); }

/* 1.75rem of hit area around a 0.625rem dot - the target is the button, the
   dot is only what you see. Dots sit above the beam (z-index) and use an
   opaque plate fill so the line never shows through. */
.credits__stop {
  position: absolute; top: 50%; transform: translate(-50%, -50%);
  z-index: 1;
  display: grid; place-items: center;
  width: 1.75rem; height: 1.75rem; padding: 0;
  border: 0; border-radius: 50%; background: none; cursor: pointer;
}
.credits__stop > span {
  width: 0.625rem; height: 0.625rem; border-radius: 50%;
  /* Opaque card-plate bead — masks the track/beam underneath. */
  background: #1c1b19;
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--cream-050) 18%, transparent);
  transition: width var(--dur-base) var(--ease-out), height var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
.credits__stop:hover > span {
  transform: scale(1.25);
  background: #2a2825;
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--cream-050) 32%, transparent);
}

/* Passed stops: solid heat color (same as beam) so the line reads continuous
   without translucency. */
.credits[data-heat='1'] .credits__stop[data-credits-stop='0'] > span,
.credits[data-heat='2'] .credits__stop[data-credits-stop='0'] > span,
.credits[data-heat='2'] .credits__stop[data-credits-stop='1'] > span {
  box-shadow: none;
}
.credits[data-heat='1'] .credits__stop[data-credits-stop='0'] > span {
  background: var(--accent);
}
.credits[data-heat='2'] .credits__stop[data-credits-stop='0'] > span,
.credits[data-heat='2'] .credits__stop[data-credits-stop='1'] > span {
  background: var(--good);
}

.credits__stop[aria-checked='true'] > span { width: 1rem; height: 1rem; transform: none; }
.credits[data-heat='0'] .credits__stop[aria-checked='true'] > span {
  background: var(--app-sunset-1);
  box-shadow: 0 0 0 3px rgb(255 179 0 / 0.25);
}
.credits[data-heat='1'] .credits__stop[aria-checked='true'] > span {
  background: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent);
}
.credits[data-heat='2'] .credits__stop[aria-checked='true'] > span {
  background: var(--good);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--good) 35%, transparent);
}
/* The sweet spot is marked before you touch anything — rim only, still opaque. */
.credits__stop[data-popular]:not([aria-checked='true']) > span {
  box-shadow:
    inset 0 0 0 1.5px color-mix(in srgb, var(--cream-050) 18%, transparent),
    0 0 0 2px color-mix(in srgb, var(--good) 55%, transparent);
}
.credits[data-heat='2'] .credits__stop[data-popular]:not([aria-checked='true']) > span {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--cream-050) 25%, transparent);
}
.credits[data-heat='1'] .credits__stop[data-popular][aria-checked='true'] > span {
  box-shadow: 0 0 0 2px rgb(190 242 100 / 0.6), 0 0 0 5px color-mix(in srgb, var(--accent) 25%, transparent);
}
.credits__stop:focus-visible { outline: none; box-shadow: 0 0 0 2px rgb(255 94 0 / 0.5); }

.credits__read {
  display: flex; align-items: center; gap: 0.35rem;
  font-size: 0.78rem; font-weight: 500; color: var(--app-foreground);
}
.credits__read b { font-weight: 500; font-variant-numeric: tabular-nums; }
.credits__mark { width: 0.85rem; height: 0.85rem; flex: none; color: var(--app-sunset-1); fill: rgb(255 94 0 / 0.25); }
.credits__mark.ph {
  width: auto;
  height: auto;
  font-size: 0.85rem;
  fill: none;
}
.credits__step { font-weight: 400; color: var(--cream-500); }
.credits__best {
  flex: none; font-style: normal; font-size: 0.62rem; font-weight: 500;
  padding: 0.05rem 0.35rem; border-radius: 999px;
  background: rgb(16 185 129 / 0.15); color: #10b981;
}
.credits__outcome { font-size: 0.7rem; color: color-mix(in srgb, var(--app-foreground) 70%, transparent); }

@media (prefers-reduced-motion: reduce) {
  .credits__beam, .credits__stop > span { transition: none; }
}

.pricing__foot { text-align: center; margin-top: 2rem; }

/* ---------------------------------------------------------------------------
   FAQ · centered head + spaced accordion (no hairline rules between rows).
   ------------------------------------------------------------------------ */
.faq {
  padding-block: clamp(4.5rem, 12vh, 8.5rem);
}
.faq__inner {
  display: grid;
  gap: clamp(2.5rem, 5vw, 3.75rem);
  max-width: 48rem;
  margin-inline: auto;
}
.faq__head {
  display: grid;
  gap: 0.85rem;
  justify-items: center;
  text-align: center;
}
.faq__title {
  color: var(--cream-050);
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.faq__lead {
  max-width: 36rem;
  font-size: clamp(1rem, 1.15vw, 1.125rem);
  line-height: 1.55;
  color: var(--cream-300);
  text-wrap: pretty;
}

/* Legacy two-column FAQ chrome (builder pages still use .faq__grid). */
.faq__grid { display: grid; gap: 3rem; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); align-items: start; }
@media (max-width: 900px) { .faq__grid { grid-template-columns: 1fr; } }
.faq__aside { display: grid; gap: 1rem; position: sticky; top: 8rem; }
@media (max-width: 900px) { .faq__aside { position: static; } }

.accordion {
  display: grid;
  gap: clamp(1.75rem, 3.2vw, 2.5rem);
}
.accordion__item {
  border: 0;
  transition: opacity 0.65s var(--ease-brand);
}
.accordion__head {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  padding: 0.35rem 0;
  text-align: left;
  font-family: var(--font-body);
  font-size: clamp(1.05rem, 1.35vw, 1.2rem);
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--cream-050);
  line-height: 1.35;
}
.accordion__head > span:first-child { flex: 1 1 auto; }

/* Circular +/- control */
.accordion__icon {
  position: relative;
  width: 2rem;
  height: 2rem;
  flex: 0 0 auto;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--cream-050) 45%, transparent);
  transition: border-color var(--dur-base) var(--ease-brand), transform var(--dur-base) var(--ease-brand);
}
.accordion__icon::before,
.accordion__icon::after {
  content: '';
  position: absolute;
  inset: 50% auto auto 50%;
  width: 0.7rem;
  height: 1.5px;
  background: var(--cream-050);
  translate: -50% -50%;
}
.accordion__icon::after {
  width: 1.5px;
  height: 0.7rem;
  transition: opacity var(--dur-base) var(--ease-brand);
}
[data-accordion-status='active'] .accordion__icon {
  transform: none;
  border-color: color-mix(in srgb, var(--cream-050) 70%, transparent);
}
[data-accordion-status='active'] .accordion__icon::after { opacity: 0; }

.accordion__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.6s var(--ease-brand); }
[data-accordion-status='active'] .accordion__body { grid-template-rows: 1fr; }
.accordion__body > * { overflow: hidden; }
.accordion__body p {
  padding: 0.85rem 0 0.15rem;
  max-width: 42rem;
  font-size: 0.98rem;
  line-height: 1.65;
  color: var(--cream-300);
}
.accordion__body p:not(:last-of-type) { padding-bottom: 0.7rem; }
.accordion__body p:last-of-type { padding-bottom: 0.35rem; }

/* Soften sibling dimming so spacing stays the hero of the layout */
@media (min-width: 992px) and (hover: hover) {
  .accordion:not(.has-open):hover .accordion__item { opacity: 0.45; }
  .accordion:not(.has-open) .accordion__item:hover { opacity: 1; }
}

/* ---------------------------------------------------------------------------
   FINAL CTA
   Atmosphere (blob + edge dissolves) lives in .cta__media so it can clip
   and mask without touching .cta__h2. Unclip rules on the heading are
   independent of overflow/mask on this layer — they cannot cancel each other.
   ------------------------------------------------------------------------ */
.cta {
  --cta-edge-top: clamp(6rem, 22vh, 12rem);
  --cta-edge-bottom: clamp(6.5rem, 24vh, 13rem);
  --cta-edge-blur: calc(var(--blur-atmosphere) * 2);
  --cta-blob-size: min(130vw, 78rem);
  --cta-blob-opacity: 0.38;
  --cta-wash-span: 42%;
  --cta-wash-shift: 22%;
  --cta-wash-opacity: 0.72;
  --cta-media-mask: linear-gradient(
    180deg,
    transparent 0,
    rgb(0 0 0 / 0.18) calc(var(--cta-edge-top) * 0.18),
    rgb(0 0 0 / 0.5) calc(var(--cta-edge-top) * 0.4),
    rgb(0 0 0 / 0.82) calc(var(--cta-edge-top) * 0.68),
    #000 var(--cta-edge-top),
    #000 calc(100% - var(--cta-edge-bottom)),
    rgb(0 0 0 / 0.82) calc(100% - var(--cta-edge-bottom) * 0.68),
    rgb(0 0 0 / 0.5) calc(100% - var(--cta-edge-bottom) * 0.4),
    rgb(0 0 0 / 0.18) calc(100% - var(--cta-edge-bottom) * 0.18),
    transparent 100%
  );
  position: relative;
  overflow: visible;
  text-align: center;
  padding-block: clamp(6rem, 16vh, 12rem);
  /* Plate lives on .cta__media so the edge mask can dissolve it. A fill here
     would paint a hard rectangle behind the mask and kill the fade again. */
  background: transparent;
}
.cta:not(:has(.cta__media)) {
  background: var(--ink-900);
}
.cta__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: var(--ink-900);
  -webkit-mask-image: var(--cta-media-mask);
  mask-image: var(--cta-media-mask);
}
.cta__blob {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  width: var(--cta-blob-size); height: var(--cta-blob-size);
  max-width: none;
  opacity: var(--cta-blob-opacity); pointer-events: none; mix-blend-mode: screen;
}
.cta__fade {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 1;
  pointer-events: none;
  overflow: visible;
}
.cta__fade::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  pointer-events: none;
  background: var(--ink-900);
  filter: blur(var(--cta-edge-blur));
  opacity: var(--cta-wash-opacity);
}
.cta__fade--top {
  top: 0;
  height: var(--cta-edge-top);
  background: linear-gradient(
    180deg,
    var(--ink-900) 0%,
    color-mix(in srgb, var(--ink-900) 62%, transparent) 38%,
    color-mix(in srgb, var(--ink-900) 22%, transparent) 72%,
    transparent 100%
  );
}
.cta__fade--top::before {
  top: 0;
  height: var(--cta-wash-span);
  transform: translateY(calc(var(--cta-wash-shift) * -1));
}
.cta__fade--bottom {
  bottom: 0;
  height: var(--cta-edge-bottom);
  background: linear-gradient(
    180deg,
    transparent 0%,
    color-mix(in srgb, var(--ink-900) 22%, transparent) 28%,
    color-mix(in srgb, var(--ink-900) 62%, transparent) 62%,
    var(--ink-900) 100%
  );
}
.cta__fade--bottom::before {
  bottom: 0;
  height: var(--cta-wash-span);
  transform: translateY(var(--cta-wash-shift));
}
.cta__inner { position: relative; z-index: 1; display: grid; gap: 1.6rem; justify-items: center; overflow: visible; }
.cta__lead {
  max-width: 28rem;
  margin: 0;
  text-align: center;
  text-wrap: pretty;
}
/* Tight display leading plus background-clip:text clips the “?”. Global
   border-box + width:max-content also ate padding and made it worse.
   content-box so end/bottom padding sits outside the glyphs. */
.cta__h2 {
  box-sizing: content-box;
  overflow: visible;
  line-height: 1.05;
  padding-block: 0.08em 0.2em;
  padding-inline: 0.06em 0.4em;
  max-width: 100%;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.cta__h2,
.cta__h2 * { overflow: visible; }
.cta__inner p b { color: var(--cream-050); font-weight: 500; }
.cta__actions { display: flex; gap: 0.8rem; flex-wrap: wrap; justify-content: center; }

/* ---------------------------------------------------------------------------
   FOOTER · soft padded plate + large bottom wordmark
   Outer gutter insets the plate from the page edge; the plate itself carries
   radius, fill, and padding. Link inventory stays in build-pages.mjs.
   ------------------------------------------------------------------------ */
.footer {
  --footer-inset: clamp(0.75rem, 2.2vw, 1.5rem);
  --footer-pad-x: clamp(1.25rem, 3.5vw, 3rem);
  --footer-pad-y: clamp(1.75rem, 4vw, 3.25rem);
  --footer-radius: var(--radius-card);
  /* Cursor-reactive wordmark heat (footerWordmark.js). */
  --fw-amp: 0;
  --fw-px: 50%;
  --fw-py: 42%;
  padding: var(--footer-inset);
  padding-bottom: calc(var(--footer-inset) + 0.25rem);
  opacity: 0; filter: blur(10px);
  transition: opacity var(--dur-reveal) var(--ease-out), filter var(--dur-reveal) var(--ease-out);
}
.footer.is-in { opacity: 1; filter: blur(0); }
.no-js .footer { opacity: 1; filter: none; }
.footer__plate {
  position: relative;
  overflow: hidden;
  border-radius: var(--footer-radius);
  border: 0;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--cream-050) 4%, var(--ink-850)) 0%,
      var(--ink-850) 42%,
      var(--ink-950) 100%);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--cream-050) 10%, transparent),
    0 1.25rem 3rem color-mix(in srgb, var(--ink-950) 55%, transparent);
  padding-block: var(--footer-pad-y) 0;
  padding-inline: 0;
}
.footer__plate > .shell {
  padding-inline: max(var(--gutter), var(--footer-pad-x));
}
.footer__top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem 2rem; flex-wrap: wrap;
  padding-bottom: 2rem;
}
.footer__logo { display: flex; align-items: center; }
.footer__logo img { height: 2.05rem; width: auto; } /* see .nav__logo img */
.footer__news {
  position: relative;
  display: grid;
  gap: 0.45rem;
  justify-items: start;
}
.footer__news-row {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}
.footer__news input {
  padding: 0.8rem 1.1rem; border-radius: 999px; border: 1px solid var(--ink-600);
  background: color-mix(in srgb, var(--ink-950) 70%, var(--ink-800));
  font-size: 0.85rem; min-width: 15rem;
}
.footer__news input::placeholder { color: var(--cream-500); }
/* Nav-style flip: Apply → Thank you on success. */
.footer__news-submit {
  min-width: 7.25rem;
}
.footer__news-submit .btn__label {
  display: inline-flex;
  align-items: flex-start;
  overflow: hidden;
  height: 1.15em;
  line-height: 1.15;
}
.footer__news-flip {
  display: flex;
  flex-direction: column;
  transition: transform 0.45s var(--ease-brand);
  will-change: transform;
}
.footer__news-flip > span {
  display: block;
  height: 1.15em;
  line-height: 1.15;
  white-space: nowrap;
}
.footer__news.is-done .footer__news-flip {
  transform: translateY(-50%);
}
.footer__news-status {
  margin: 0;
  max-width: 22rem;
  font-size: 0.75rem;
  line-height: 1.35;
  color: var(--cream-300);
}
.footer__news-status[data-tone='warn'],
.footer__news-status[data-tone='error'] {
  color: color-mix(in srgb, #f0a8a0 85%, var(--cream-050));
}
.footer__news-status[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) {
  .footer__news-flip { transition: none; }
  .footer__news.is-done .footer__news-flip { transform: none; }
  .footer__news.is-done .footer__news-flip > span:first-child { display: none; }
  .footer__news.is-done .footer__news-flip > span:last-child { display: block; }
}
.footer__cols {
  display: grid;
  /* auto-fit, not repeat(5): the column count is the LINK INVENTORY's business
     (scripts/build-pages.mjs owns it), and a hardcoded count here means adding a
     footer column silently squashes the other four. */
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: 1.5rem 1.25rem;
  padding-block: 2rem;
  border-top: 1px solid color-mix(in srgb, var(--cream-050) 8%, transparent);
}
@media (max-width: 900px) {
  .footer__news { width: 100%; max-width: 100%; }
  .footer__news-row {
    width: 100%;
    display: flex;
    gap: 0.45rem;
    align-items: stretch;
    min-width: 0;
  }
  .footer__news input {
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
    max-width: 100%;
  }
  .footer__news-submit {
    flex: 0 0 auto;
    min-width: 0;
    padding-inline: 1rem;
  }
}
@media (max-width: 700px) {
  .footer {
    --footer-inset: 0.65rem;
    --footer-radius: calc(var(--radius-card) * 0.72);
  }
  .footer__cols { grid-template-columns: repeat(2, 1fr); gap: 1.75rem 1rem; }
  .footer__top { flex-direction: column; align-items: flex-start; }
  .footer__news { width: 100%; }
  .footer__news-row { width: 100%; }
  .footer__news input { flex: 1 1 auto; min-width: 0; }
}
.footer__cols div { display: grid; gap: 0.55rem; align-content: start; font-size: 0.85rem; color: var(--cream-300); }
.footer__col-name { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--cream-500); }
.footer__cols a { transition: color var(--dur-micro) var(--ease-brand); }
.footer__cols a:hover { color: var(--accent); }
.footer__meta {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  padding-top: 1.35rem;
  border-top: 1px solid color-mix(in srgb, var(--cream-050) 8%, transparent);
}
.footer__legal { margin: 0; color: var(--cream-500); }
/* Crop window: upper wordmark only. Mask + blend live on the <img> so
   luminosity still composites against the plate (a mask/backdrop-filter on
   this wrapper isolates the blend and kills the glow). */
.footer__wordmark-crop {
  --fw-crop: 0.58;
  --fw-w: 2271;
  --fw-h: 1043;
  --fw-fade-start: 42%;
  position: relative;
  width: min(92%, 58rem);
  margin: clamp(1.25rem, 3vw, 2.25rem) auto 0;
  overflow: hidden;
  /* Visible height = crop fraction of intrinsic logo height. */
  aspect-ratio: var(--fw-w) / calc(var(--fw-h) * var(--fw-crop));
  pointer-events: none;
}
/* Plus-pattern + light grain film — strength tracks heat amp.
   Overlays only: never paint a fill behind the transparent SVG glyphs. */
.footer__wordmark-crop.is-fx::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Cpath d='M3.5 1.5h1v5h-1zM1.5 3.5h5v1h-5z' fill='%23ffffff'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.45'/%3E%3C/svg%3E");
  background-size: 8px 8px, 160px 160px;
  opacity: calc(0.05 + (var(--fw-amp) * 0.12));
  mix-blend-mode: soft-light;
  -webkit-mask-image: linear-gradient(
    180deg,
    #000 0%,
    #000 var(--fw-fade-start),
    rgba(0, 0, 0, 0.55) 72%,
    transparent 100%
  );
  mask-image: linear-gradient(
    180deg,
    #000 0%,
    #000 var(--fw-fade-start),
    rgba(0, 0, 0, 0.55) 72%,
    transparent 100%
  );
}
.footer__wordmark-crop::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(
    42% 78% at var(--fw-px) var(--fw-py),
    rgb(255 248 235 / 0.28),
    rgb(254 160 2 / 0.12) 38%,
    transparent 70%
  );
  opacity: var(--fw-amp);
  mix-blend-mode: overlay;
}
.footer__wordmark {
  display: block;
  width: 100%;
  height: auto;
  opacity: calc(0.26 + (var(--fw-amp) * 0.34));
  /* Luminosity keeps glyphs plate-matched without filling transparent SVG alpha. */
  mix-blend-mode: luminosity;
  background: none;
  /* Soft dissolve into the plate — on the img, not the crop, so blend works. */
  -webkit-mask-image: linear-gradient(
    180deg,
    #000 0%,
    #000 var(--fw-fade-start),
    rgba(0, 0, 0, 0.55) 72%,
    transparent 100%
  );
  mask-image: linear-gradient(
    180deg,
    #000 0%,
    #000 var(--fw-fade-start),
    rgba(0, 0, 0, 0.55) 72%,
    transparent 100%
  );
  user-select: none;
  pointer-events: none;
  will-change: opacity;
}
@media (prefers-reduced-motion: reduce) {
  .footer { --fw-amp: 0.28; }
  .footer__wordmark { opacity: 0.28; will-change: auto; }
  .footer__wordmark-crop::after { opacity: 0.28; }
}

/* ===========================================================================
   RESPONSIVE - the tiers §2.8 asks for, plus the places where a desktop
   composition simply has no narrow-screen equivalent and needs a real one.
   ======================================================================== */

/* ---- mobile nav ---------------------------------------------------------- */
.nav__burger { display: none; position: relative; width: 2.4rem; height: 2.4rem; }
.nav__burger i {
  position: absolute; left: 0.55rem; right: 0.55rem; height: 1.5px; background: currentColor;
  transition: transform var(--dur-base) var(--ease-brand), opacity var(--dur-base) var(--ease-brand);
}
.nav__burger i:first-child { top: 0.9rem; }
.nav__burger i:last-child { bottom: 0.9rem; }
.nav__burger[aria-expanded='true'] i:first-child { transform: translateY(0.3rem) rotate(45deg); }
.nav__burger[aria-expanded='true'] i:last-child { transform: translateY(-0.3rem) rotate(-45deg); }

@media (max-width: 900px) {
  /* Logo left, burger right. `order: -1` put the burger first, which reads
     as a back arrow more than a menu. */
  .nav__burger { display: block; }
  .nav__links {
    display: grid; gap: 0.4rem;
    position: absolute; top: calc(100% + 0.6rem); left: 0; right: 0;
    padding: 1rem 1.2rem;
    border: 1px solid var(--ink-600); border-radius: 1.4rem;
    background: rgba(11, 9, 7, 0.94);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    opacity: 0; visibility: hidden; transform: translateY(-0.5rem);
    transition: opacity var(--dur-base) var(--ease-brand),
                transform var(--dur-base) var(--ease-brand),
                visibility 0s linear var(--dur-base);
  }
  .nav.is-open .nav__links {
    opacity: 1; visibility: visible; transform: none; transition-delay: 0s;
  }
  .nav__links a {
    height: auto;
    overflow: visible;
    padding: 0.5rem 0;
    font-size: 1rem;
  }
  .nav__flip { transform: none !important; }
  .nav__flip span:last-child { display: none; }
  .nav__inner { position: relative; }
  /* No CTA in the mobile bar: the logo and the burger are the whole job at this
     width. The menu itself does not carry one either - "Start Building" is the
     full-width button in the hero, and again in the closing CTA. */
  .nav__cta-wrap { display: none; }
}

.workspace__zone-shot {
  display: none;
  width: 100%; height: 100%; object-fit: cover; object-position: top center;
  border-radius: inherit;
}

/* ---- §2.8 tier 3 · under 480px ------------------------------------------
   No pin, no scrub, no handoff. The canvas stops being a travelling object
   and becomes what it always was underneath: the hero's background. Scoping
   it to the hero with position:absolute is what stops the fixed frame from
   showing through every transparent section below.                        */
/* ---------------------------------------------------------------------------
   THE STATIC TIERS · §2.8 tier 3 (<480px) and tier 4 (reduced motion)
   ---------------------------------------------------------------------------
   Both tiers remove the scrub, so both must also remove the thing the scrub
   pays for: four viewports of scrolling. Without a scrubbed canvas behind
   them, panels 2-4 are three blank screens between two paragraphs, and the
   spacer marker - whose only job is to keep #flip-start in the tree - marks
   nothing without a scrub.
   So the hero collapses to one full-height opening plus two ordinary blocks,
   the spacer is removed, and the canvas is scoped to the first viewport it
   actually sits behind. Every rule below is shared by both tiers because the
   two tiers want exactly the same shape; only the emphasis differs.

   `.no-js` joins them for the same reason again: with no script, nothing
   pins, nothing scrubs and nothing is handed off, so the page needs to be the
   static composition rather than four blank screens over a canvas that will
   never move.
   ------------------------------------------------------------------------ */
/* Three things are normally handed their final state by the entrance timeline
   (§2.3). With no script there is no timeline, so CSS has to hand it over
   instead - otherwise the nav never fades in and the canvas stays under the
   15px atmosphere blur that beat 5 was supposed to lift. */
.no-js .loader { display: none; }
.no-js .hero-media__scrim { backdrop-filter: none; -webkit-backdrop-filter: none; }
/* The scrub is what normally parks the canvas in the right-hand column. With
   no script it has to be parked here, or it lands centred, under the copy. */
@media (min-width: 1100px) {
  .no-js .stage, .static-hero .stage { transform: translateX(19%); }
}
.static-hero .hero__panel, .no-js .hero__panel { min-height: auto; padding-block: 3rem; }
.static-hero .hero__panel.is-3, .no-js .hero__panel.is-3 { min-height: auto; }
.static-hero .hero__idea, .no-js .hero__idea { position: static; translate: none; }
.static-hero .hero__panel.is-1, .no-js .hero__panel.is-1 { min-height: 100svh; padding-block: calc(var(--nav-h) + 3rem) 3rem; }
@media (max-width: 620px) {
  .static-hero .hero__panel.is-1, .no-js .hero__panel.is-1 { padding-block: calc(var(--nav-h) + 1.25rem) 2rem; }
}
.static-hero .hero__panel.is-spacer, .no-js .hero__panel.is-spacer { display: none; }
.static-hero .hero-media, .no-js .hero-media {
  position: absolute; left: 0; top: 0; width: 100%; height: 100svh;
}
.static-hero .workspace__zone-shot, .no-js .workspace__zone-shot { display: block; }
.static-hero .workspace__zone, .no-js .workspace__zone { background: var(--ink-850); }

@media (max-width: 479px) {
  /* the scene is texture here, not a readable UI - the copy owns the column */
  .stage { opacity: 0.3; filter: blur(2px); }
  .hero-media__frame::after {
    background: linear-gradient(180deg, rgba(6,5,4,0.86), rgba(6,5,4,0.7) 60%, rgba(6,5,4,0.9));
  }
  .stage__hud, .stage__rail { display: none; }
}

/* ---- arc: dual columns always; amplified drum on narrow screens --------- */
.arc__rail { display: none; }
@media (max-width: 760px) {
  /* Keep the text drum (columns) — hide the marquee substitute. */
  .arc__col { display: flex; }
  .arc__rail { display: none; }
  .arc__claims { flex-direction: column; gap: 0.4rem; }
  .arc__claims li + li::before { content: none; }
  /* Shorter runway than desktop 150svh, but enough sticky scroll for the drum. */
  .arc { min-height: 120svh; }
  .arc__center { position: sticky; top: 50vh; translate: 0 -50%; }
  .arc__col--left  { right: calc(50% + 1.1rem); }
  .arc__col--right { left:  calc(50% + 1.1rem); }
  .arc__col {
    font-size: 0.58rem;
    gap: 0.85rem;
    max-width: 42vw;
  }
}

/* ---- general narrow-screen tidy ------------------------------------------ */
@media (max-width: 900px) {
  .faq__grid { gap: 2rem; }
  .engine__head { flex-direction: column; align-items: flex-start; gap: 0.8rem; }
  .engine__progress { max-width: none; width: 100%; }
}
@media (max-width: 700px) {
  .hero__cta { flex-direction: column; align-items: flex-start; gap: 0.8rem; }
  .footer__top { flex-direction: column; align-items: flex-start; }
  .footer__news { width: 100%; }
  .footer__news-row { width: 100%; }
  .footer__news input { flex: 1; min-width: 0; }
  /* the gallery's plates are grid items now, not marquee tiles */
}

/* ---------------------------------------------------------------------------
   STAGE PROMPT · the mini AIWA composer inside the Why cards

   This is the Marquee Next prompt component, renamed wholesale from .prompt to
   .stage-prompt on the way in. It is NOT reusing the hero's .prompt: that one
   is a single baseline-aligned row (glyph, text, caret) and this one is a
   column with a toolbar, chips and a send button. Sharing the class name would
   have made each one's base rule fight the other's at equal specificity, decided
   by source order - which is the kind of bug that only shows up on the beat
   nobody screenshotted.
   ------------------------------------------------------------------------ */
.stage-prompt {
  display: flex; flex-direction: column;
  border: 1px solid var(--line); border-radius: 1.4rem;
  background: linear-gradient(180deg, rgba(28,24,17,0.86), rgba(12,10,8,0.9));
  box-shadow: 0 2rem 5rem rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.04);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  overflow: hidden;
}
.stage-prompt__body {
  display: flex; align-items: baseline; gap: 0.7rem;
  padding: 1.35rem 1.5rem 1.1rem;
  font-family: var(--font-mono); font-size: clamp(0.85rem, 1.35vw, 1.05rem); line-height: 1.5;
}
.stage-prompt__glyph { color: var(--accent); }
.stage-prompt__text { color: var(--cream-050); }
.stage-prompt__caret {
  display: inline-block; width: 0.5em; height: 1.1em; translate: 0 0.15em;
  background: var(--accent); animation: blink 1.1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

.stage-prompt__bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--prompt-bar-gap);
  flex-wrap: nowrap;
  padding: var(--prompt-bar-pad-y) var(--prompt-bar-pad-x);
  border-top: 1px solid var(--prompt-hairline);
  font-family: var(--font-body);
}
.stage-prompt__bar-left, .stage-prompt__bar-right {
  display: flex; align-items: center; gap: var(--prompt-bar-gap); min-width: 0;
  flex: 0 1 auto;
}
.stage-prompt__bar-right { flex: 0 0 auto; }
.stage-prompt__plus {
  display: grid; place-items: center;
  width: var(--prompt-ctrl); height: var(--prompt-ctrl); flex: 0 0 auto;
  border-radius: 50%;
  background: var(--prompt-plus-bg);
  color: var(--cream-300);
}
.stage-prompt__plus .icon { width: var(--prompt-icon); height: var(--prompt-icon); }
.stage-prompt__model, .stage-prompt__chip, .stage-prompt__build {
  display: inline-flex; align-items: center; gap: var(--prompt-chip-gap);
  min-height: var(--prompt-ctrl);
  font-size: var(--prompt-type); font-weight: 500; color: var(--cream-050);
  white-space: nowrap; line-height: 1;
}
.stage-prompt__model {
  padding: var(--prompt-model-pad);
}
.stage-prompt__model img {
  width: var(--prompt-favicon); height: var(--prompt-favicon);
  border-radius: var(--prompt-favicon-radius); object-fit: cover; flex: 0 0 auto;
}
.stage-prompt__model .icon, .stage-prompt__chip .icon {
  width: var(--prompt-icon); height: var(--prompt-icon); color: var(--cream-500);
}
.stage-prompt__chip {
  padding: var(--prompt-chip-pad);
  border-radius: 999px;
  background: var(--prompt-chip-bg);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--line);
}
.stage-prompt__chip-db { color: var(--good); }
.stage-prompt__chip-spark { color: var(--accent); }
.stage-prompt__build { color: var(--accent); }
.stage-prompt__build .icon {
  width: var(--prompt-icon); height: var(--prompt-icon); color: var(--accent);
}
.stage-prompt__mic {
  display: grid; place-items: center;
  width: var(--prompt-ctrl); height: var(--prompt-ctrl);
  flex: 0 0 auto; color: var(--cream-300);
}
.stage-prompt__mic .icon { width: var(--prompt-icon-lg); height: var(--prompt-icon-lg); }
.stage-prompt__send {
  display: grid; place-items: center;
  width: var(--prompt-send); height: var(--prompt-send); flex: 0 0 auto;
  border-radius: 50%;
  color: var(--ink-900);
  background: var(--prompt-send-fill);
}
.stage-prompt__send .icon { width: var(--prompt-icon-lg); height: var(--prompt-icon-lg); }

@media (max-width: 700px) {
  .stage-prompt__chip span, .stage-prompt__model span { display: none; }
  .stage-prompt__bar { gap: var(--prompt-chip-gap); }
}

/* ===========================================================================
   PHONES · the mobile pass

   The fluid root in tokens.css targets a 16px root at EACH tier's design
   width, so a 390px phone renders rem values at very nearly their desktop
   size. That is the whole problem: nothing shrinks on its own down here, so
   the desktop rhythm has to be re-stated rather than left to scale.

   Three jobs, in order of how much they cost a phone reader:
   give the page back its vertical space, size the display type for a screen
   held at arm's length, and make every CTA a real thumb target.
   ======================================================================== */
@media (max-width: 620px) {
  /* 117px of padding at the top of a section, on a 780px-tall screen, meant
     every section opened with a third of a screen of nothing. */
  .section { padding-block: clamp(3rem, 8vh, 4.5rem); }

  /* Display leading is set for 100px headlines. At 43px, 0.88 stops reading as
     tight and starts reading as collided - the descenders of one line meet the
     caps of the next. */
  h1, h2, h3, h4 { line-height: 1.02; letter-spacing: -0.025em; }
  .t-display { font-size: clamp(2.5rem, 11vw, 3.2rem); line-height: 0.98; }
  .t-h2 { font-size: clamp(1.9rem, 8.2vw, 2.4rem); }
  .t-h3 { font-size: clamp(1.35rem, 6vw, 1.8rem); }
  .cta__h2 { line-height: 1.08; }
  .cta {
    --cta-edge-top: clamp(4rem, 14vh, 7rem);
    --cta-edge-bottom: clamp(4.5rem, 16vh, 8rem);
  }
  .section__lead, .hero__sub { text-wrap: pretty; }

  /* A shorter bar. 71px of fixed chrome over an 844px screen is 8% of the
     viewport spent on a logo and a burger; ~57px does the same job. --nav-h
     follows it, because the hero's top padding is measured from it. */
  :root { --nav-h: 3.5rem; }
  .nav { padding-top: 0.6rem; }
  .nav__inner { min-height: 2.75rem; padding: 0.3rem; }
  .nav__logo img { height: 1.5rem; }
  .nav__burger { width: 2.25rem; height: 2.25rem; }
  .nav__burger i { left: 0.5rem; right: 0.5rem; }
  .nav__burger i:first-child { top: 0.8rem; }
  .nav__burger i:last-child { bottom: 0.8rem; }

  /* Full-width CTAs. A 172px button floating in a 390px column is a smaller
     target than the thumb aiming at it, and it leaves the column looking
     unfinished on the right. */
  /* `grid-template-columns: 1fr` is load-bearing: .cta__actions carries a
     base `justify-content: center`, which in grid centres a max-content COLUMN
     inside the full-width box - so the buttons stacked but stayed 172px. */
  .hero__cta, .cta__actions { display: grid; grid-template-columns: 1fr; gap: 0.7rem; width: 100%; }
  .hero__cta .btn, .cta__actions .btn, .hero__panel-inner > .btn { width: 100%; justify-content: center; }

  /* Cards: desktop padding is ~12% of the viewport at this width, so the
     content column inside a card was narrower than it needed to be. */
  .plan { padding: 1.35rem 1.15rem; gap: 0.7rem; }
  .plan__price b { font-size: 2.2rem; }
  .plan__list { gap: 0.45rem; }

  /* Workspace aside: three lifecycle shots become a snap-scroll row so none
     collapse into an unreadably thin gutter under the well. */
  .ws-aside {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 62vw;
    gap: 0.7rem; min-width: 0;
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter);
  }
  .ws-aside::-webkit-scrollbar { display: none; }
  .ws-aside__item {
    aspect-ratio: auto; scroll-snap-align: center;
    border: 0; background: none; border-radius: 0; overflow: visible;
  }
  .ws-aside__item img {
    aspect-ratio: 16 / 9; height: auto; border-radius: 1rem;
    border: 1px solid var(--ink-700); background: var(--ink-850);
  }
  .ws-aside__item.is-active img {
    border-color: var(--accent);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent);
  }
  .ws-aside__cap {
    position: static; padding: 0.5rem 0.15rem 0 0.35rem; background: none;
    font-size: 0.62rem; letter-spacing: 0.14em;
  }
  .workspace__browser { border-radius: 0.85rem; }

  /* The contact sheet at two-up. A 4/3 crop anchored top-left keeps each
     thumbnail showing the app's own header, which is the part that is still
     recognisable at 160px wide - a 16/11 crop of a whole page is mush. */
  .gallery__grid { gap: 1.5rem 0.8rem; }
  .shot__card { gap: 0.6rem; }
  .shot__frame { border-radius: 0.6rem; }
  .shot__frame img { aspect-ratio: 4 / 3; }
  .shot__meta { gap: 0.45rem; padding-top: 0.55rem; }
  .shot__title { font-size: 0.88rem; }
  /* Two-up columns are 167px, so some descriptors take two lines and some
     one. Reserve both lines on every plate: eight captions ending at eight
     different heights is what stops a grid reading as ruled. */
  .shot__desc { font-size: 0.7rem; min-height: 2.8em; }
  .gallery__masthead { gap: 0.7rem; }
  .gallery__all { font-size: 0.62rem; letter-spacing: 0.12em; }

  /* Thumb targets. The credit stops match the app's 28px hit area, which is
     fine under a mouse and too small under a thumb - the DOT stays the size it
     is, only the invisible target around it grows. Footer links were 22px rows
     with no padding, which is a column of near-misses. */
  .credits__stop { width: 2.5rem; height: 2.5rem; }
  .credits__stops { height: 2.5rem; }
  .footer__cols a { padding-block: 0.3rem; }
}