/* ============================================================
   Arrel v3 — "Refined Atmosphere"
   Spec: specs/2026-08-02-v3-refined-atmosphere-design.md
   One consolidated stylesheet. Consumes tokens.css (deep-forest DS).
   Systems: 1 container · 8-step spacing · 8-step type · 3 glass
   elevations · top-light shadows · 2-ambient-motion budget.
   ============================================================ */

.v3{
  /* container */
  --container:1160px;

  /* spacing scale (8 steps) + shared section rhythm */
  --s1:.25rem; --s2:.5rem; --s3:.75rem; --s4:1rem;
  --s5:1.5rem; --s6:2rem; --s7:3rem; --s8:4rem;
  --rhythm:clamp(4.5rem,10vh,7rem);
  --rhythm-tight:clamp(2.6rem,6vh,4.6rem);   /* sanctioned short variant: interstitial bands */

  /* type scale (8 steps) */
  --fs-display:clamp(2.4rem,4.8vw,3.85rem);
  --fs-h2:clamp(1.85rem,3.6vw,2.8rem);
  --fs-h3:clamp(1.3rem,2.2vw,1.6rem);
  --fs-lede:1.05rem;
  --fs-body:.95rem;
  --fs-small:.85rem;
  --fs-label:.72rem;
  --fs-xs:.78rem;
  --fs-micro:.64rem;

  /* text tones (4 semantic steps on DS cream 242,239,230) */
  --tx-1:rgba(242,239,230,.96);
  --tx-2:rgba(242,239,230,.80);
  --tx-3:rgba(242,239,230,.66);   /* >=4.5:1 on every surface incl. E2-on-light-band */
  --tx-4:rgba(242,239,230,.55);   /* faint tier kept AA-safe on the dark panels it lives on */
  --hair:rgba(242,239,230,.15);

  /* radius scale */
  --r-lg:24px; --r-md:16px; --r-sm:10px; --r-pill:100px;

  /* materials — exactly three elevations (E1 band · E2 panel · E3 hero) */
  --e1-bg-light:rgba(240,238,230,.045);
  --e1-bg-dark:rgba(9,20,14,.38);
  --e2-bg:linear-gradient(180deg,rgba(242,239,230,.10),rgba(242,239,230,.04));
  --e2-edge:rgba(255,255,255,.18);
  --e2-hi:rgba(255,255,255,.22);
  --e2-shadow:0 24px 48px -32px rgba(0,0,0,.55);
  /* deep-E2: footer variant — furthest from the sun, so dimmer fill + highlight (spec 2.5) */
  --e2-bg-deep:rgba(9,20,14,.5);
  --e2-hi-deep:rgba(255,255,255,.06);
  --e3-bg:linear-gradient(180deg,rgba(242,239,230,.15),rgba(242,239,230,.055));
  --e3-edge:rgba(255,255,255,.28);
  --e3-hi:rgba(255,255,255,.32);
  --e3-shadow:0 36px 72px -40px rgba(0,0,0,.7);

  /* accents (from DS) */
  --ochre:var(--p-ochre-500); --ochre-hi:#E6BE82; --on-ochre:#1b1200;
  --mono:var(--sans); /* mono retired sitewide (Nick, 2026-08-04) — decorative labels now use the sans */

  /* parallax vars (glass-parallax.js writes these on .field only) */
  --sy:0; --mx:0; --my:0;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth; overflow-x:clip;} /* clip, not hidden: keeps sticky nav working; catches body-zoom overflow */
.v3{zoom:1.1; margin:0; background:var(--p-pine-900); color:var(--tx-1);
  font-family:var(--sans); font-size:var(--fs-body); line-height:1.55;
  /* NO overflow-x here: with html{overflow-x:clip}, body overflow stops
     propagating to the viewport and body becomes a clip container, which
     KILLS position:sticky on the nav. html clip alone prevents x-scroll. */
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;}
.v3 a{color:inherit; text-decoration:none}
.v3 :focus-visible{outline:2px solid var(--ochre-hi); outline-offset:3px; border-radius:var(--r-sm)}

/* one container, everywhere */
.v3 .wrap{width:min(var(--container),92%); margin-inline:auto}
.v3 .sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;}
.v3 .skip{position:fixed; top:10px; left:10px; z-index:60; transform:translateY(-200%);
  background:var(--ochre); color:var(--on-ochre); font-weight:700; font-size:var(--fs-small);
  padding:.6rem 1rem; border-radius:var(--r-pill); transition:transform .2s var(--ease);}
.v3 .skip:focus-visible{transform:none;}

/* ============================================================
   ATMOSPHERE FIELD — rings + veil + sun (kept from v2, calmer)
   ============================================================ */
.v3 .field{position:fixed; inset:-8% -4%; z-index:0; pointer-events:none; overflow:hidden; --sun-dim:1}
.v3 .field__base{position:absolute; inset:0;
  background:
    radial-gradient(120% 90% at 50% 116%, var(--p-pine-950), transparent 60%),
    radial-gradient(140% 120% at 82% -6%, #1f3d2d, var(--p-pine-900) 52%, var(--p-pine-950) 100%);}
.v3 .field__rings{position:absolute; inset:0; width:100%; height:100%; opacity:.92; filter:blur(1.5px);
  -webkit-mask:radial-gradient(122% 100% at 50% 34%, #000 42%, transparent 90%);
  mask:radial-gradient(122% 100% at 50% 34%, #000 42%, transparent 90%);
  transform:translate3d(calc(var(--mx)*8px), calc(var(--sy)*22px + var(--my)*8px), 0);}
.v3 .field__veil{position:absolute; inset:0; background:rgba(20,39,29,.24);}
/* sun = light source. Bloom is a slow breath, not an animation moment. */
.v3 .field__sun{position:absolute; left:50%; top:-14%; width:70vmax; height:52vmax;
  transform:translate(-50%,0) translate3d(calc(var(--mx)*4px), calc(var(--sy)*10px), 0);
  background:radial-gradient(closest-side, rgba(247,215,154,.55), rgba(247,215,154,.16) 42%, transparent 72%);
  opacity:var(--sun-dim,1); transition:opacity .35s linear;}
.v3 .field__bloom{position:absolute; left:50%; top:-6%; width:44vmax; height:34vmax; transform:translateX(-50%);
  background:radial-gradient(closest-side, rgba(247,215,154,.5), transparent 70%);
  opacity:.62;}   /* perf-lite: static (was v3-bloom pulse) */
@keyframes v3-bloom{0%,100%{opacity:calc(.55*var(--sun-dim,1))}50%{opacity:calc(.75*var(--sun-dim,1))}}

.v3 .site{position:relative; z-index:1}

/* ============================================================
   NAV — static layout in BOTH states; collapse is transform-only.
   nav-v3.js measures pill positions once (and on resize) and sets
   --shift-mark / --shift-cta; .is-stuck applies the translations.
   ============================================================ */
.v3 .nav{position:sticky; top:0; z-index:40;
  width:min(var(--container),92%); margin:0 auto;
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:var(--s4);
  min-height:72px;
  animation:v3-nav-in 1s var(--ease) .12s both;}
/* grid (1fr auto 1fr) centers the links pill on the PAGE axis, unlike
   space-between which centered it between two unequal-width neighbors */
.v3 .nav__mark{justify-self:start;}
.v3 .nav__links{justify-self:center;}
.v3 .nav__cta{justify-self:end;}
@keyframes v3-nav-in{from{opacity:0; transform:translateY(-12px)} to{opacity:1; transform:translateY(0)}}

/* full-bleed blur + scrim behind the sticky bar (revealed when stuck) —
   keeps scrolled text from mushing into the nav pills */
.v3 .nav::before{content:""; position:absolute; z-index:-1;
  top:0; left:50%; transform:translateX(-50%);
  width:100vw; height:calc(100% + 1.25rem);
  background:linear-gradient(180deg,
    rgba(20,47,34,.72) 0%, rgba(20,47,34,.34) 58%, rgba(20,47,34,0) 100%);
  opacity:0; transition:opacity .4s var(--ease); pointer-events:none;}
.v3 .nav.is-stuck::before{opacity:1;
  -webkit-backdrop-filter:blur(6px) saturate(1.05); backdrop-filter:blur(6px) saturate(1.05);}

/* mark box = icon only; the wordmark floats beside it absolutely, so
   hiding it never re-flows the bar (transform-only collapse). */
.v3 .nav__mark{position:relative; display:flex; align-items:center;
  width:46px; height:46px; justify-content:center; flex:none;
  border:1px solid transparent; border-radius:var(--r-pill); background:transparent;
  transform:translateX(0);
  transition:transform .6s var(--ease), background .45s var(--ease),
             border-color .45s var(--ease), box-shadow .45s var(--ease);}
.v3 .nav__ico{width:38px; height:38px; flex:none; display:block; object-fit:contain;}
.v3 .nav__word{position:absolute; left:calc(100% - .25rem); top:50%;
  height:17px; width:72px; transform:translateY(-50%); color:var(--tx-1);
  transition:opacity .35s var(--ease), transform .45s var(--ease);}
.v3 .nav__ico{transition:transform .35s var(--ease);}
.v3 .nav__mark:hover .nav__ico{transform:scale(1.07);}
.v3 .nav__mark:hover .nav__word{transform:translateY(-50%) scale(1.05);}

.v3 .nav__links{display:flex; gap:clamp(1rem,2.4vw,1.9rem); font-size:var(--fs-small); color:var(--tx-2);
  background:var(--e3-bg); border:1px solid var(--e3-edge);
  border-radius:var(--r-pill); padding:.5rem 1.15rem;
  transition:background .45s var(--ease), border-color .45s var(--ease), box-shadow .45s var(--ease);}
.v3 .nav__links a{padding:.2rem 0; position:relative; transition:color .25s}
.v3 .nav__links a::after{content:""; position:absolute; left:0; bottom:-2px; width:0; height:1.5px;
  background:var(--ochre); transition:width .28s var(--ease)}
.v3 .nav__links a:hover{color:var(--tx-1)} .v3 .nav__links a:hover::after{width:100%}

.v3 .nav__cta{font-size:var(--fs-small); font-weight:700; color:var(--on-ochre); background:var(--ochre);
  padding:.6rem 1.05rem; border-radius:var(--r-pill); letter-spacing:.01em; flex:none;
  transform:translateZ(0) translateX(0);
  transition:transform .6s var(--ease), box-shadow .25s var(--ease), background .25s;}
.v3 .nav__cta:hover{background:var(--ochre-hi); box-shadow:0 8px 20px -8px rgba(183,127,60,.7)}

/* condensed cluster — one E3 material under all three pills */
.v3 .nav.is-stuck .nav__word{opacity:0; transform:translateY(-50%) translateX(-8px); pointer-events:none;}
.v3 .nav.is-stuck .nav__mark{transform:translateX(var(--shift-mark,0px));
  background:linear-gradient(180deg,rgba(45,86,62,.66),rgba(28,54,40,.52));
  border-color:rgba(121,192,138,.42);
  -webkit-backdrop-filter:blur(7px) saturate(1.12); backdrop-filter:blur(7px) saturate(1.12);
  box-shadow:var(--e3-shadow), inset 0 1px 0 var(--e3-hi);}
.v3 .nav.is-stuck .nav__links{background:var(--e3-bg); border-color:var(--e3-edge);
  box-shadow:var(--e3-shadow), inset 0 1px 0 var(--e3-hi); color:var(--tx-1);}
.v3 .nav.is-stuck .nav__cta{transform:translateZ(0) translateX(var(--shift-cta,0px));
  box-shadow:var(--e3-shadow);}

/* ============================================================
   FIRST SCREEN — hero (split) + proof band fill the viewport
   ============================================================ */
.v3 .hero-screen{min-height:calc(100vh - 72px); display:flex; flex-direction:column;}
.v3 .hero{flex:1 0 auto; display:grid; grid-template-columns:1.04fr .96fr; align-items:center;
  gap:clamp(2rem,4.5vw,5rem); text-align:left;
  width:min(var(--container),92%); margin-inline:auto;
  padding:clamp(1rem,3vh,2rem) 0;}
.v3 .hero__copy{display:flex; flex-direction:column; align-items:flex-start;}

.v3 .hero__title{font-family:var(--serif); font-weight:300; margin:var(--s4) 0 0;
  font-size:var(--fs-display); line-height:1.05; letter-spacing:-.017em; color:var(--tx-1);
  max-width:12ch; text-wrap:balance;}
.v3 .hero__title .mid{font-weight:560; white-space:nowrap}
.v3 .hero__title em{font-style:normal; font-weight:560; color:var(--ochre);}
.v3 .hero__rotator{font-family:var(--serif); font-style:italic; font-size:clamp(1.05rem,2.4vw,1.35rem);
  color:var(--tx-2); margin:var(--s3) 0 0;}
.v3 .rotator__word{color:var(--ochre-hi); font-style:italic; display:inline-block;
  transition:opacity .32s, transform .32s;}
.v3 .rotator__word.is-out{opacity:0; transform:translateY(-6px);}
.v3 .hero__sub{font-size:var(--fs-lede); color:var(--tx-3); margin:var(--s4) 0 0; max-width:42ch;}

/* capture */
.v3 .capture{margin:var(--s5) 0 0; width:min(540px,100%);}
.v3 .capture__field{display:flex; gap:.5rem; align-items:center; padding:.4rem .4rem .4rem 1.15rem;
  border:1px solid var(--hair); border-radius:var(--r-pill); background:rgba(13,28,20,.4);
  transition:border-color .25s, box-shadow .25s;}
.v3 .capture__field:focus-within{border-color:var(--ochre); box-shadow:0 0 0 3px rgba(183,127,60,.18)}
.v3 .capture input{flex:1; min-width:0; border:0; background:transparent; color:var(--tx-1);
  font:inherit; font-size:var(--fs-body); padding:.55rem 0;}
.v3 .capture input::placeholder{color:var(--tx-4)}
.v3 .capture input:focus{outline:none}
.v3 .capture__field button{flex:none; width:44px; height:44px; border:0; border-radius:50%; cursor:pointer;
  background:var(--ochre); color:var(--on-ochre); display:grid; place-items:center;
  transition:transform .2s var(--ease), background .2s;}
.v3 .capture__field button:hover{transform:translateX(2px); background:var(--ochre-hi)}
.v3 .capture.done .capture__field, .v3 .capture.done .rf__field{opacity:.5}
.v3 .capture__note{min-height:0; margin:0; font-size:var(--fs-xs); color:var(--ochre-hi);
  opacity:0; transition:opacity .3s;}
.v3 .capture__note.show{opacity:1; min-height:1.1em; margin:.6rem 0 0;}
.v3 .capture__note.error{color:#e8a0a0}
.v3 .capture__micro{margin:.7rem 0 0; font-size:var(--fs-xs); color:var(--tx-3);}
/* one-line capture (name | email+send) — wraps to stack on narrow widths */
.v3 .capture{display:flex; flex-flow:row wrap; align-items:flex-start; gap:.5rem; position:relative;
  transition:opacity .45s var(--ease);}
/* .capture.is-faded lives AFTER the .reveal rules (cascade: .reveal.in must not win) */
.v3 .capture__field{flex:2 1 210px;}
.v3 .capture__field--name{flex:1 1 150px; padding-right:1.15rem;}
.v3 .capture__note{flex-basis:100%;}

/* get-started qualifying form (step 2) */
.v3 .gs-form{display:flex; flex-direction:column; gap:1rem; margin-top:var(--s5); text-align:left;}
.v3 .gs-l{display:flex; flex-direction:column; gap:.35rem; font-size:var(--fs-small); color:var(--tx-3);}
.v3 .gs-l input, .v3 .gs-l select, .v3 .gs-l textarea{
  font:inherit; color:var(--tx-1); background:rgba(13,28,20,.4);
  border:1px solid var(--hair); border-radius:12px; padding:.7rem .9rem;}
.v3 .gs-l select option{color:#17231c; background:#f4f0e7;}
.v3 .gs-l input:focus, .v3 .gs-l select:focus, .v3 .gs-l textarea:focus{
  outline:none; border-color:var(--ochre); box-shadow:0 0 0 3px rgba(183,127,60,.18);}
.v3 .gs-form .nav__cta{justify-content:center; margin-top:.5rem;}
.v3 .gs-thanks{margin-top:var(--s5);}

/* footer waitlist CTA (replaces the old duplicate footer form) */
.v3 .rf__field-cta{display:inline-flex; margin-top:var(--s4);}

/* waitlist proof — one honest dot (pulses 3× on load, then settles) */
.v3 .proof{display:flex; align-items:center; gap:.6rem; margin:var(--s3) 0 0;
  font-size:var(--fs-small); color:var(--tx-3);}
.v3 .proof__dot{width:9px; height:9px; border-radius:50%; background:#79c08a; flex:none;
  box-shadow:0 0 8px rgba(121,192,138,.55); animation:v3-pulse 1.8s ease-out 2;}
@keyframes v3-pulse{0%{box-shadow:0 0 0 0 rgba(121,192,138,.5)}100%{box-shadow:0 0 0 9px rgba(121,192,138,0)}}
.v3 .proof strong{color:var(--tx-1); font-weight:700}

/* ============================================================
   ENGINE PANEL — E3 flagship. JS (engine-v3.js) drives data-step
   1..4; one account (Bergman & Söhne) flows Source → Book.
   ============================================================ */
.v3 .engine{position:relative; width:100%; min-height:min(58vh,516px);
  display:flex; flex-direction:column; gap:var(--s4);
  padding:clamp(1.3rem,2vw,1.6rem);
  border-radius:var(--r-lg); border:1px solid var(--e3-edge); background:var(--e3-bg);
  -webkit-backdrop-filter:blur(6px) saturate(1.1); backdrop-filter:blur(6px) saturate(1.1);
  box-shadow:var(--e3-shadow), inset 0 1px 0 var(--e3-hi);}
.v3 .engine__head{display:flex; align-items:center; gap:.6rem;
  font-size:var(--fs-micro); letter-spacing:.14em; text-transform:uppercase; color:var(--tx-3);}
.v3 .engine__dot{width:8px; height:8px; border-radius:50%; background:#79c08a; margin-left:auto;
  box-shadow:0 0 7px rgba(121,192,138,.6);}   /* static glow — stepper carries the motion */

/* stepper */
.v3 .stepper{position:relative; display:flex; justify-content:space-between; padding:6px 4px 0;}
.v3 .stepper__track{position:absolute; left:12px; right:12px; top:12px; height:2px;
  background:rgba(242,239,230,.14); border-radius:2px; overflow:hidden;}
.v3 .stepper__prog{height:100%; width:0; background:var(--ochre); transition:width 0s;}
.v3 .step{position:relative; z-index:2; display:flex; flex-direction:column; align-items:center;
  gap:.5rem; width:58px;}
.v3 .step__dot{width:14px; height:14px; border-radius:50%; background:rgba(20,39,29,.92);
  border:2px solid rgba(242,239,230,.3); transition:background .4s, border-color .4s;}
.v3 .step__nm{font-size:var(--fs-micro); letter-spacing:.06em; text-transform:uppercase; color:var(--tx-4);
  transition:color .4s;}
.v3 .step.is-on .step__dot{background:var(--ochre); border-color:var(--ochre);}
.v3 .step.is-on .step__nm{color:var(--tx-1);}

/* views — crossfade driven by [data-step] */
.v3 .viewport{position:relative; flex:1; min-height:262px;}
.v3 .view{position:absolute; inset:0; display:flex; flex-direction:column; gap:.65rem;
  opacity:0; transform:translateY(6px); pointer-events:none;
  transition:opacity .45s var(--ease), transform .45s var(--ease);}
.v3 .engine[data-step="1"] .view--src, .v3 .engine[data-step="2"] .view--enr,
.v3 .engine[data-step="3"] .view--dra, .v3 .engine[data-step="4"] .view--boo,
.v3 .engine[data-step="5"] .view--lrn{
  opacity:1; transform:none;}

/* Learn step — the GTM brain suggesting its own next iterations */
.v3 .brainbox{display:flex; justify-content:center; padding:.5rem 0 .2rem;}
.v3 .brainbox__core{position:relative; text-align:center; padding:.8rem 1.4rem; border-radius:var(--r-md);
  border:1px solid rgba(183,127,60,.5); background:rgba(183,127,60,.09);}
.v3 .brainbox__core b{display:block; font-size:var(--fs-body); color:var(--ochre-hi); font-weight:600;}
.v3 .brainbox__core small{font-size:var(--fs-micro); color:var(--tx-3);}
.v3 .brainbox__pulse{position:absolute; inset:-5px; border-radius:calc(var(--r-md) + 5px);
  border:1px solid rgba(183,127,60,.45); animation:brainPulse 2.4s var(--ease) infinite; pointer-events:none;}
@keyframes brainPulse{0%{opacity:.7; transform:scale(1)}70%{opacity:0; transform:scale(1.14)}100%{opacity:0}}
.v3 .ticker{list-style:none; margin:.7rem 0 0; padding:0; display:flex; flex-direction:column; gap:.4rem;}
.v3 .ticker__line{font-family:var(--mono); font-size:var(--fs-micro); color:var(--tx-2);
  padding:.5rem .7rem; border-radius:var(--r-sm); border:1px solid var(--hair);
  background:rgba(242,239,230,.04); opacity:0; transform:translateY(4px);
  transition:opacity .4s var(--ease), transform .4s var(--ease);}
.v3 .ticker__line.on{opacity:1; transform:none;}
.v3 .view__lab{font-size:var(--fs-micro); letter-spacing:.13em; text-transform:uppercase;
  color:var(--tx-3); margin:0;}

/* product rows — real content, mono data */
.v3 .prow{display:flex; align-items:center; gap:.75rem; padding:.72rem .85rem;
  border-radius:var(--r-sm); background:rgba(242,239,230,.05); border:1px solid var(--hair);}
.v3 .prow__co{flex:1; min-width:0;}
.v3 .prow__co b{display:block; font-size:var(--fs-small); font-weight:600; color:var(--tx-1);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.v3 .prow__co small{display:block; font-size:var(--fs-micro); color:var(--tx-3); margin-top:.12rem;}
.v3 .prow__fit{font-family:var(--mono); font-variant-numeric:tabular-nums;
  font-size:var(--fs-body); color:var(--ochre); flex:none;}
.v3 .prow--lead .prow__fit{color:var(--ochre-hi);}
.v3 .chip{display:inline-flex; align-items:center; gap:.3rem; padding:.16rem .5rem;
  border-radius:var(--r-pill); border:1px solid var(--hair); background:rgba(13,28,20,.5);
  font-size:var(--fs-micro); color:var(--tx-2); white-space:nowrap;}
.v3 .chip--lang{border-color:rgba(183,127,60,.45); color:var(--ochre-hi);}
.v3 .chip--ok{color:#9fd0ab;}
.v3 .chip--ok::before{content:"✓"; font-size:.9em;}

/* enrich card */
.v3 .ecard{border:1px solid var(--hair); border-radius:var(--r-sm); background:rgba(242,239,230,.05);
  padding:.85rem .9rem; display:flex; flex-direction:column; gap:.55rem;}
.v3 .ecard__who b{font-size:var(--fs-small); font-weight:600; color:var(--tx-1);}
.v3 .ecard__who small{display:block; font-size:var(--fs-xs); color:var(--tx-3); margin-top:.1rem;}
.v3 .ecard__mail{font-family:var(--mono); font-size:var(--fs-xs); color:var(--tx-2);
  display:flex; align-items:center; gap:.5rem; flex-wrap:wrap;}
.v3 .ecard__chips{display:flex; gap:.4rem; flex-wrap:wrap;}

/* draft composer */
.v3 .draft{border:1px solid var(--hair); border-radius:var(--r-sm); background:rgba(13,28,20,.5);
  padding:.85rem .9rem; display:flex; flex-direction:column; gap:.5rem; flex:1;}
.v3 .draft__meta{font-family:var(--mono); font-size:var(--fs-xs); color:var(--tx-3);
  display:flex; flex-direction:column; gap:.25rem;}
.v3 .draft__meta b{color:var(--tx-2); font-weight:500;}
.v3 .draft__body{font-size:var(--fs-small); color:var(--tx-2); line-height:1.55; min-height:4.6em;}
.v3 .draft__body .caret{display:inline-block; width:1px; height:1em; background:var(--ochre-hi);
  vertical-align:-.15em; margin-left:1px; animation:v3-caret 1s steps(1) infinite;}
@keyframes v3-caret{50%{opacity:0}}

/* book toast */
.v3 .toast{display:flex; align-items:center; gap:.7rem; padding:.8rem .85rem;
  border-radius:var(--r-sm); background:rgba(183,127,60,.14); border:1px solid rgba(183,127,60,.3);}
.v3 .toast__ic{width:30px; height:30px; border-radius:var(--r-sm); background:rgba(230,190,130,.28);
  color:var(--ochre-hi); display:grid; place-items:center; font-size:var(--fs-small); flex:none;}
.v3 .toast b{display:block; font-size:var(--fs-small); color:var(--tx-1);}
.v3 .toast small{display:block; font-family:var(--mono); font-size:var(--fs-micro); color:var(--tx-3); margin-top:.1rem;}

/* ============================================================
   PROOF BAND — container-aligned, marquee pauses on hover
   ============================================================ */
.v3 .proof-band{margin-bottom:clamp(3rem,11vh,10rem);}
.v3 .proof-band__inner{position:relative; overflow:hidden;
  width:min(var(--container),92%); margin:0 auto;
  display:flex; align-items:center; gap:clamp(1rem,2.4vw,1.8rem);
  background:var(--e1-bg-dark); border:1px solid var(--hair); border-radius:var(--r-md);
  padding:clamp(1.2rem,2.7vh,1.8rem) clamp(1.2rem,2.6vw,1.7rem);
  -webkit-backdrop-filter:blur(3px) saturate(1.04); backdrop-filter:blur(3px) saturate(1.04);
  animation:v3-in .9s var(--ease) both;}
.v3 .proof-band__inner::after{content:""; position:absolute; inset:0; pointer-events:none; z-index:2;
  background:linear-gradient(100deg, transparent 36%, rgba(242,239,230,.09) 50%, transparent 64%);
  transform:translateX(-130%); animation:v3-sheen 1.5s var(--ease) .4s 1;}
@keyframes v3-in{from{opacity:0; transform:translateY(16px); filter:blur(6px)} to{opacity:1; transform:none; filter:blur(0)}}
@keyframes v3-sheen{to{transform:translateX(130%)}}
.v3 .hero__proof-label{flex:none; max-width:12rem; text-align:left; line-height:1.45; text-wrap:balance;
  font-size:var(--fs-micro); letter-spacing:.16em; text-transform:uppercase; color:var(--tx-3);}
.v3 .hero__proof-marquee{flex:1; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 88%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 88%,transparent);}
.v3 .hero__proof-track{display:inline-flex; align-items:center; animation:v3-marquee 34s linear infinite;}
.v3 .proof-band__inner:hover .hero__proof-track{animation-play-state:paused;}
/* per-logo margins (not gap) keep the -50% loop seam identical.
   Mask images live HERE (not in inline --vars): url() in a custom property
   resolves against the consuming stylesheet in Chromium, so inline-relative
   paths 404. Stylesheet-relative ../assets/ is unambiguous + portable. */
.v3 .hero__proof-track .logo{flex:0 0 auto; height:var(--h,30px); aspect-ratio:var(--ar,4);
  margin-inline:clamp(.8rem,1.6vw,1.4rem);
  background-color:#cbc7ba; opacity:.8;
  -webkit-mask-position:center; -webkit-mask-size:contain; -webkit-mask-repeat:no-repeat;
  mask-position:center; mask-size:contain; mask-repeat:no-repeat;}
/* per-logo heights equalize OPTICAL cap-height (~22.6px target), measured from
   each file's ink bounds — canvas height alone made some logos read 60% bigger */
.v3 .logo--ur{--ar:4.03; --h:29px; -webkit-mask-image:url(../assets/logos/universal-robots.png); mask-image:url(../assets/logos/universal-robots.png);}
.v3 .logo--airtop{--ar:4.07; --h:27px; -webkit-mask-image:url(../assets/logos/airtop.svg); mask-image:url(../assets/logos/airtop.svg);}
.v3 .logo--mermaid{--ar:4.08; --h:32px; -webkit-mask-image:url(../assets/logos/mermaid.png); mask-image:url(../assets/logos/mermaid.png);}
.v3 .logo--tucsen{--ar:1.16; --h:40px; -webkit-mask-image:url(../assets/logos/tucsen.png); mask-image:url(../assets/logos/tucsen.png);}
.v3 .logo--thera{--ar:4.41; --h:29px; -webkit-mask-image:url(../assets/logos/thera.png); mask-image:url(../assets/logos/thera.png);}
.v3 .logo--qevlar{--ar:7.32; --h:23px; -webkit-mask-image:url(../assets/logos/qevlar.png); mask-image:url(../assets/logos/qevlar.png);}
.v3 .logo--mindsprint{--ar:8.88; --h:22px; -webkit-mask-image:url(../assets/logos/mindsprint.png); mask-image:url(../assets/logos/mindsprint.png);}
.v3 .logo--rethink{--ar:4.06; --h:27px; -webkit-mask-image:url(../assets/logos/rethink.svg); mask-image:url(../assets/logos/rethink.svg);}
/* ready to wire when needed: */
.v3 .logo--altaclaro{--ar:4.88; --h:35px; -webkit-mask-image:url(../assets/logos/altaclaro.png); mask-image:url(../assets/logos/altaclaro.png);}
.v3 .logo--andel{--ar:4.89; --h:29px; -webkit-mask-image:url(../assets/logos/andel.png); mask-image:url(../assets/logos/andel.png);}
@keyframes v3-marquee{to{transform:translateX(-50%)}}

/* ============================================================
   BANDS + SECTIONS — E1 ambient, one rhythm token
   ============================================================ */
.v3 .band--a, .v3 .band--b{isolation:isolate;}
/* perf-lite: dropped backdrop-filter here — full-width bands re-blur every scroll
   frame over the fixed field, the single biggest cost on weak GPUs. Tint only. */
.v3 .band--a::before, .v3 .band--b::before{content:""; position:absolute; inset:0; z-index:-1;
  border-top:1px solid var(--hair); border-bottom:1px solid var(--hair);}
.v3 .band--a::before{background:var(--e1-bg-light);}
.v3 .band--b::before{background:var(--e1-bg-dark);}

.v3 .section{position:relative; z-index:1; padding-block:var(--rhythm);}
.v3 .sec-head{text-align:center; max-width:46ch; margin:0 auto var(--s7);}
.v3 .sec-eyebrow{display:inline-flex; align-items:center; gap:.5rem; font-size:var(--fs-label);
  font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--tx-3);}
.v3 .sec-eyebrow .rule{width:1.75rem; height:1px; background:var(--ochre); opacity:.7; flex:none;}
.v3 .h-display{font-family:var(--serif); font-weight:300; font-size:var(--fs-h2);
  line-height:1.05; letter-spacing:-.015em; margin:.55rem 0 0; color:var(--tx-1); text-wrap:balance;}
.v3 .h-display em{font-style:normal; color:var(--ochre); font-weight:560;}
.v3 .lede{font-size:var(--fs-lede); color:var(--tx-3); margin:var(--s4) auto 0; max-width:54ch; line-height:1.6;}

/* E2 reusable panel */
.v3 .panel{border-radius:var(--r-lg); border:1px solid var(--e2-edge); background:var(--e2-bg);
  -webkit-backdrop-filter:blur(4px) saturate(1.06); backdrop-filter:blur(4px) saturate(1.06);
  box-shadow:var(--e2-shadow), inset 0 1px 0 var(--e2-hi);}

/* ---- 001 · Our edge ---- */
.v3 .focus{padding-block:var(--rhythm-tight);}
.v3 .focus__wrap{max-width:760px; margin-inline:auto; text-align:center;}
.v3 .focus__lede{font-size:var(--fs-lede); color:var(--tx-2); margin:var(--s4) auto 0;
  max-width:58ch; line-height:1.6;}
.v3 .focus__lede b{color:var(--tx-1); font-weight:600;}
.v3 .focus__chips{display:flex; flex-wrap:wrap; justify-content:center; gap:.55rem; margin-top:var(--s5);}
.v3 .focus__chip{display:inline-flex; align-items:center; gap:.45rem; font-size:var(--fs-xs); color:var(--tx-2);
  border:1px solid var(--hair); border-radius:var(--r-pill); padding:.5rem 1rem; background:rgba(13,28,20,.4);}
.v3 .focus__chip::before{content:"◆" / ""; color:var(--ochre); font-size:.66em;}

/* ---- 002 · How it works — pillars with engine-crop mini-UIs ---- */
.v3 .pillars{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s5);}
.v3 .pillar{padding:clamp(1.4rem,2.4vw,2rem); display:flex; flex-direction:column;}
.v3 .pillar__step{font-family:var(--mono); font-size:var(--fs-micro); letter-spacing:.1em;
  color:var(--tx-3); margin:0;}
.v3 .pillar__step::after{content:""; display:inline-block; width:22px; height:1px;
  background:var(--hair); margin-left:.5rem; vertical-align:middle;}
.v3 .pillar__kicker{font-size:var(--fs-label); font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--tx-3); margin:.35rem 0 0;}
.v3 .pillar__h{font-family:var(--serif); font-weight:300; font-size:var(--fs-h3);
  line-height:1.1; letter-spacing:-.01em; margin:.6rem 0 0; color:var(--tx-1);}
.v3 .pillar__h em{font-style:normal; color:var(--ochre); font-weight:500;}
.v3 .pillar__sub{font-size:var(--fs-body); color:var(--tx-3); margin:.7rem 0 var(--s5); line-height:1.55;}
/* crop = detail view of the engine UI (same materials + mono data) */
.v3 .crop{margin-top:auto; border-radius:var(--r-md); border:1px solid var(--hair);
  background:rgba(13,28,20,.5); padding:.85rem .9rem;
  display:flex; flex-direction:column; gap:.5rem;}
.v3 .crop__lab{font-size:var(--fs-micro); letter-spacing:.13em; text-transform:uppercase;
  color:var(--tx-3); margin:0 0 .15rem;}
.v3 .crop__row{display:flex; align-items:center; justify-content:space-between; gap:.6rem;
  padding:.5rem .6rem; border-radius:var(--r-sm);
  background:rgba(242,239,230,.05); border:1px solid var(--hair);}
.v3 .crop__row b{font-size:.78rem; font-weight:600; color:var(--tx-2); white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis;}
.v3 .crop__num{font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:.82rem;
  color:var(--ochre); flex:none;}
.v3 .crop__bar{position:relative; height:6px; border-radius:6px; background:rgba(242,239,230,.12);
  overflow:hidden; flex:1; min-width:40px;}
.v3 .crop__bar i{position:absolute; inset:0; width:var(--w,60%); background:var(--ochre); border-radius:6px;}

/* ---- 003 · The system ---- */
.v3 .system__panel{padding:clamp(1.8rem,3.4vw,3rem); text-align:center;}
.v3 .system__panel .sec-eyebrow,.v3 .system__panel .h-display,.v3 .system__panel .lede{margin-left:auto; margin-right:auto}
.v3 .diagram{display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:.7rem;
  margin-top:var(--s6);}
.v3 .diagram__node{border:1px solid var(--hair); border-radius:var(--r-md); padding:.8rem 1.05rem;
  background:rgba(13,28,20,.5); min-width:118px; text-align:left;}
.v3 .diagram__node b{display:block; font-size:var(--fs-body); color:var(--tx-1); font-weight:600}
.v3 .diagram__node small{font-size:var(--fs-micro); color:var(--tx-3)}
.v3 .diagram__node.is-accent{border-color:rgba(183,127,60,.5);
  box-shadow:0 0 0 1px rgba(183,127,60,.28), 0 0 24px -6px rgba(183,127,60,.4)}
.v3 .diagram__link{position:relative; width:34px; height:2px; flex:none; overflow:hidden;
  background:linear-gradient(90deg,transparent,var(--hair),transparent);}
.v3 .diagram__link::after{content:""; position:absolute; top:0; left:-40%; width:40%; height:100%;
  background:linear-gradient(90deg,transparent,var(--ochre),transparent); animation:v3-flow 2.6s linear infinite;}
@keyframes v3-flow{to{left:110%}}

/* Brain-centered system diagram: operators layered above one pulsing GTM brain */
.v3 .diagram--brain{flex-direction:column; gap:.95rem;}
.v3 .diagram__ops{display:inline-flex; align-items:center; gap:.5rem; font-size:var(--fs-xs);
  color:var(--ochre-hi); padding:.4rem .9rem; border-radius:var(--r-pill);
  border:1px dashed rgba(183,127,60,.5); background:rgba(183,127,60,.06);}
.v3 .diagram__ops-ic{width:7px; height:7px; border-radius:50%; background:var(--ochre); flex:none;
  box-shadow:0 0 0 4px rgba(183,127,60,.18);}
.v3 .diagram__flow{display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:.7rem;}
.v3 .diagram__brain{position:relative; text-align:center;}
.v3 .diagram__brain::after{content:""; position:absolute; inset:-6px; border-radius:calc(var(--r-md) + 6px);
  border:1px solid rgba(183,127,60,.4); animation:brainPulse 2.6s var(--ease) infinite; pointer-events:none;}

/* ---- 004 · Proof — real stats + the two real testimonials ---- */
.v3 .prf-stats{display:flex; justify-content:center; gap:clamp(2rem,6vw,5rem);
  margin:0 auto var(--s7); flex-wrap:wrap;}
.v3 .prf-stat{text-align:center;}
.v3 .prf-stat__num{font-family:var(--serif); font-weight:300; font-size:var(--fs-h2);
  color:var(--tx-1); margin:0; line-height:1;}
.v3 .prf-stat__num em{font-style:normal; color:var(--ochre);}
.v3 .prf-stat__lab{font-size:var(--fs-label); letter-spacing:.12em; text-transform:uppercase;
  color:var(--tx-3); margin:.5rem 0 0;}
.v3 .prf-src{text-align:center; font-size:var(--fs-micro); letter-spacing:.1em; text-transform:uppercase;
  color:var(--tx-4); margin:calc(var(--s7) * -.6) 0 var(--s7);}
/* auto-fit + justify-content centers any count of cards (1 today, more later) */
.v3 .testimonials{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,460px));
  justify-content:center; gap:var(--s5); max-width:940px; margin-inline:auto;}
.v3 .testimonial{padding:clamp(1.3rem,2.4vw,1.9rem); display:flex; flex-direction:column;}
.v3 .testimonial__quote{font-family:var(--serif); font-weight:300; font-size:var(--fs-lede);
  line-height:1.42; color:var(--tx-1); margin:0; letter-spacing:-.005em;}
.v3 .testimonial__by{display:flex; align-items:center; gap:.7rem; margin-top:auto; padding-top:var(--s5);}
.v3 img.testimonial__av{width:44px; height:44px; border-radius:50%; flex:none; object-fit:cover;
  box-shadow:0 0 0 1px var(--e2-edge);}
.v3 .testimonial__who{flex:1; min-width:0;}
.v3 .testimonial__name{font-size:var(--fs-small); font-weight:600; color:var(--tx-1); margin:0;}
.v3 .testimonial__role{font-size:var(--fs-xs); color:var(--tx-3); margin:.1rem 0 0;}
.v3 .testimonial__li{width:34px; height:34px; border-radius:var(--r-sm); border:1px solid var(--hair);
  flex:none; display:grid; place-items:center; color:var(--tx-2);
  transition:color .25s, border-color .25s, background .25s;}
.v3 .testimonial__li svg{width:15px; height:15px;}
.v3 .testimonial__li:hover{color:var(--ochre-hi); border-color:rgba(183,127,60,.5); background:rgba(183,127,60,.08);}

/* ============================================================
   FOOTER E — same structure, E2 material, no # links
   ============================================================ */
.v3 .rf{position:relative; z-index:1; padding:clamp(1.6rem,4vh,3rem) 0 clamp(1.5rem,4vh,2.2rem);}
.v3 .rf__panel{width:min(var(--container),92%); margin:0 auto;
  border:1px solid var(--e2-edge); border-radius:var(--r-lg); background:var(--e2-bg-deep);
  -webkit-backdrop-filter:blur(4px) saturate(1.06); backdrop-filter:blur(4px) saturate(1.06);
  box-shadow:var(--e2-shadow), inset 0 1px 0 var(--e2-hi-deep);
  padding:clamp(1.7rem,2.6vw,2.3rem) clamp(1.7rem,2.8vw,2.5rem);}
.v3 .rf__brand{display:inline-flex; align-items:center; gap:.32rem;}
.v3 .rf__ico{width:32px; height:32px; display:block;}
.v3 .rf__word{display:inline-block; height:17px; aspect-ratio:731/279; background-color:var(--tx-1);
  -webkit-mask:url(../assets/arrel-wordmark.svg) center/contain no-repeat;
  mask:url(../assets/arrel-wordmark.svg) center/contain no-repeat;}
.v3 .rf__top{display:grid; grid-template-columns:1fr 1.5fr; gap:clamp(1.8rem,4vw,3.6rem); align-items:start;}
.v3 .rf__sub{max-width:470px;}
.v3 .rf__h{font-family:var(--serif); font-weight:300; font-size:var(--fs-h3);
  line-height:1.15; letter-spacing:-.01em; margin:.85rem 0 .3rem; color:var(--tx-1);}
.v3 .rf__h em{font-style:normal; color:var(--ochre);}
.v3 .rf__sub > p{font-size:var(--fs-small); color:var(--tx-3); margin:0 0 .9rem; max-width:42ch;}
.v3 .rf .capture{margin:.55rem 0 0; width:100%;}
.v3 .rf__field{display:flex; gap:.4rem; align-items:center; width:100%;
  border:1px solid var(--hair); border-radius:var(--r-pill); background:rgba(13,28,20,.5);
  padding:.32rem .32rem .32rem 1.05rem; transition:border-color .25s, box-shadow .25s;}
.v3 .rf__field:focus-within{border-color:var(--ochre); box-shadow:0 0 0 3px rgba(183,127,60,.18);}
.v3 .rf__field input{flex:1; min-width:0; border:0; background:transparent; color:var(--tx-1);
  font:inherit; font-size:var(--fs-small); padding:.48rem 0;}
.v3 .rf__field input::placeholder{color:var(--tx-4);}
.v3 .rf__field input:focus{outline:none;}
.v3 .rf__field button{flex:none; display:inline-flex; align-items:center; gap:.35rem;
  border:0; cursor:pointer; background:var(--ochre); color:var(--on-ochre); font-weight:700;
  font-size:var(--fs-xs); padding:.55rem 1rem; border-radius:var(--r-pill); white-space:nowrap;
  transition:background .2s, transform .2s;}
.v3 .rf__field button:hover{background:var(--ochre-hi); transform:translateY(-1px);}
/* higher specificity than `.rf__sub > p` (which otherwise forces margin-top:0) */
.v3 .rf__sub > .rf__fine{font-size:var(--fs-micro); color:var(--tx-4); margin:2rem 0 0;}
.v3 .rf__fine b{color:var(--tx-2); font-weight:500;}
.v3 .rf .capture__note{min-height:1em; margin:.45rem 0 0; font-size:var(--fs-xs);}
.v3 .rf__cols{display:flex; gap:clamp(1.6rem,3.5vw,3rem); justify-content:space-between;}
.v3 .rf__col h4{font-size:var(--fs-micro); letter-spacing:.15em; text-transform:uppercase; color:var(--tx-4);
  margin:0 0 .8rem; font-weight:600;}
.v3 .rf__col a, .v3 .rf__col .rf__soon{display:block; font-size:var(--fs-small); color:var(--tx-2);
  margin:0 0 .55rem; transition:color .2s;}
.v3 .rf__col a:hover{color:var(--tx-1);}
.v3 .rf__soon{color:var(--tx-4); cursor:default;}   /* future page — not a link yet */
.v3 .rf__people{display:flex; flex-direction:column; gap:.72rem;}
.v3 .rf__people .rf__person{display:flex; align-items:center; gap:.6rem; margin:0;}
.v3 .rf__person .av{width:36px; height:36px; border-radius:50%; flex:none; overflow:hidden;
  position:relative; display:grid; place-items:center;
  background:linear-gradient(135deg,var(--ochre),#7c7566);}
/* hairline edge + top-light ring, same language as the glass materials (E2 edge, sun above) */
.v3 .rf__person .av::after{content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  box-shadow:inset 0 0 0 1px var(--e2-edge), inset 0 1px 0 rgba(255,255,255,.12);}
.v3 .rf__person .av img{width:100%; height:100%; object-fit:cover; display:block;}
.v3 .rf__person .av--brand{border-radius:var(--r-sm); background:rgba(13,28,20,.72); border:1px solid var(--e2-edge);}
.v3 .rf__person .av--brand svg{width:54%; height:54%; color:var(--ochre-hi); display:block;}
.v3 .rf__person b{display:flex; align-items:center; gap:.28rem; font-size:var(--fs-small); font-weight:600;
  line-height:1.15; white-space:nowrap; color:var(--tx-1);}
.v3 a.rf__person:hover b{color:var(--ochre-hi);}
.v3 .rf__person i{display:block; font-style:normal; font-size:var(--fs-micro); color:var(--tx-3);
  margin-top:1px; white-space:nowrap;}
.v3 .rf__verified{width:14px; height:14px; flex:none; display:block;}
.v3 a.rf__person:hover b{color:var(--ochre-hi);}
.v3 .rf__bar{display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  margin-top:clamp(1.3rem,2.4vw,1.9rem); padding-top:clamp(1rem,1.8vw,1.3rem); border-top:1px solid var(--hair);}
.v3 .rf__copy{font-size:var(--fs-xs); color:var(--tx-4);}
.v3 .rf__socs{display:flex; gap:.45rem;}
.v3 .rf__soc{width:34px; height:34px; border-radius:var(--r-sm); border:1px solid var(--hair);
  display:grid; place-items:center; color:var(--tx-2);}
.v3 .rf__soc svg{width:15px; height:15px;}
.v3 .rf__soc:hover{color:var(--ochre); border-color:rgba(183,127,60,.5);}

/* ============================================================
   BUTTON BEAM — hover-only (motion budget)
   ============================================================ */
@property --beam{syntax:"<angle>"; inherits:false; initial-value:0deg;}
.v3 .btn-beam{position:relative;}
.v3 .btn__arrow{display:inline-block; transition:transform .35s var(--ease);}
.v3 .btn-beam:hover .btn__arrow{transform:translateX(4px);}
.v3 .btn-beam::before{content:""; position:absolute; inset:0; border-radius:inherit; padding:1.6px;
  pointer-events:none; opacity:.7; transition:opacity .35s var(--ease);
  background:conic-gradient(from var(--beam), transparent 0 66%, #ffe4a8 80%, #fff6df 85%, #ffe4a8 90%, transparent 97%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  animation:v3-beam 3s linear infinite;} /* always-on loop, brightens on hover */
.v3 .btn-beam:hover::before{opacity:1;}
@keyframes v3-beam{to{--beam:360deg;}}

/* ============================================================
   REVEALS — one style (fade-rise), both directions, staggered
   ============================================================ */
.v3 .reveal{opacity:0; transform:translateY(26px);
  transition:opacity .85s var(--ease), transform .95s var(--ease);}
.v3 .reveal.in{opacity:1; transform:none;}
/* hero form fades out past the hero — must sit after .reveal.in (same specificity,
   later source order wins) or the reveal state pins opacity at 1 */
.v3 .capture.is-faded{opacity:0; pointer-events:none;
  transition:opacity .4s var(--ease); transition-delay:0s;}
.v3 .d1{transition-delay:.09s} .v3 .d2{transition-delay:.20s}
.v3 .d3{transition-delay:.33s} .v3 .d4{transition-delay:.46s}
html:not(.js) .v3 .reveal{opacity:1; transform:none; filter:none;}
/* dev helper (?flat) — full-page screenshots: everything visible, no 100vh */
html.flat .v3 .reveal{opacity:1 !important; transform:none !important; filter:none !important; transition:none !important;}
html.flat .v3 .hero-screen{min-height:0;}
html.flat .v3 .proof-band{margin-bottom:var(--s7);}

/* ============================================================
   RESPONSIVE — desktop-first, mobile genuinely clean (spec §25)
   ============================================================ */
@media(max-width:900px){
  .v3 .hero{grid-template-columns:1fr; gap:var(--s6); padding-top:var(--s6);}
  .v3 .engine{min-height:auto;}
  .v3 .viewport{min-height:240px;}
  .v3 .hero-screen{min-height:0;}                 /* 100vh rule relaxes on small screens */
  .v3 .proof-band{margin-bottom:var(--s7);}
  .v3 .proof-band__inner{flex-direction:column; align-items:flex-start; gap:.9rem;}
  .v3 .hero__proof-label{max-width:none;}
  .v3 .hero__proof-marquee{width:100%;}
  .v3 .pillars{grid-template-columns:1fr;}
  .v3 .testimonials{grid-template-columns:1fr;}
}
@media(max-width:760px){
  .v3 .rf__top{grid-template-columns:1fr; gap:1.8rem;}
  .v3 .rf__cols{justify-content:flex-start; flex-wrap:wrap; gap:1.6rem 2.4rem;}
}
@media(max-width:640px){
  .v3 .nav__links{display:none}
  .v3 .nav__word{display:none}                    /* icon-only brand: wordmark collides with the CTA at phone widths */
  .v3 .nav__cta{padding:.72rem 1.05rem;}          /* >=44px tap target */
  .v3 .hero__title{max-width:none;}
  /* iOS zooms on focus below 16px */
  .v3 .capture input, .v3 .rf__field input{font-size:1rem;}
  /* footer tap targets >=44px */
  .v3 .rf__field button{padding:.72rem 1.15rem;}
  .v3 .rf__soc, .v3 .testimonial__li{width:44px; height:44px;}
  .v3 .rf__col a, .v3 .rf__col .rf__soon{padding:.6rem 0; margin:0;}
}

/* ============================================================
   REDUCED MOTION — static composed frame
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .v3 .field__rings{transform:none}
  .v3 .field__sun{transform:translateX(-50%)}
  .v3 .field__bloom, .v3 .hero__proof-track, .v3 .diagram__link::after,
  .v3 .proof-band__inner, .v3 .proof__dot, .v3 .btn-beam::before,
  .v3 .brainbox__pulse, .v3 .diagram__brain::after,
  .v3 .nav, .v3 .draft__body .caret{animation:none !important}
  .v3 .proof-band__inner::after{display:none}
  .v3 .reveal{opacity:1; transform:none; filter:none; transition:none}
  .v3 .nav__mark, .v3 .nav__cta, .v3 .nav__word, .v3 .nav__links{transition:none}
  /* engine settles on the Source frame (engine-v3.js also bails) */
  .v3 .view{transition:none}
  .v3 .engine .view--src{opacity:1; transform:none;}
  .v3 .stepper__prog{width:20%;}
}

/* ============================================================
   CASE STUDY - Universal Robots
   ============================================================ */
.v3 .case{padding:clamp(1.8rem,3.4vw,3rem);}
.v3 .case__head{display:flex; align-items:center; gap:var(--s5); flex-wrap:wrap;
  padding-bottom:var(--s5); border-bottom:1px solid var(--hair);}
.v3 .case__logo{width:132px; height:33px; background-color:#cbc7ba; opacity:.9; flex:none;
  -webkit-mask-position:left center; -webkit-mask-size:contain; -webkit-mask-repeat:no-repeat;
  mask-position:left center; mask-size:contain; mask-repeat:no-repeat;}
.v3 .case__tag{font-size:var(--fs-micro); letter-spacing:.1em; text-transform:uppercase;
  color:var(--tx-3); margin:0;}
.v3 .case__grid{display:grid; grid-template-columns:1.3fr .9fr; gap:clamp(1.5rem,4vw,3rem);
  align-items:center; padding-block:var(--s6);}
.v3 .case__lede{font-size:var(--fs-lede); color:var(--tx-2); line-height:1.6; margin:0 0 var(--s5);}
.v3 .case__facts{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.7rem;}
.v3 .case__facts li{display:grid; grid-template-columns:8.5rem 1fr; column-gap:1.25rem;
  align-items:baseline; padding-bottom:.7rem; border-bottom:1px solid var(--hair);}
.v3 .case__facts b{font-size:var(--fs-label); letter-spacing:.1em;
  text-transform:uppercase; color:var(--tx-3); font-weight:600;}
.v3 .case__facts span{font-size:var(--fs-body); color:var(--tx-2);}
.v3 .case__stats{display:flex; flex-direction:column; gap:var(--s6);
  border-left:1px solid var(--hair); padding-left:clamp(1.5rem,4vw,3rem);}
.v3 .case__quote{margin:0; padding-top:var(--s6); border-top:1px solid var(--hair);}
/* "Other testimonials" — sits under the UR case study, two cards side by side */
.v3 .case__more{margin-top:var(--s8); text-align:center;}
.v3 .case__more-lab{font-size:var(--fs-label); font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--tx-3); margin:0 0 var(--s6);}
.v3 .case__more .testimonials{grid-template-columns:1fr 1fr; max-width:880px; margin-inline:auto;}
@media (max-width:900px){ .v3 .case__more .testimonials{grid-template-columns:1fr;} }
@media (max-width:760px){
  .v3 .case__grid{grid-template-columns:1fr;}
  .v3 .case__stats{flex-direction:row; border-left:0; padding-left:0;
    border-top:1px solid var(--hair); padding-top:var(--s6); justify-content:space-around;}
}

/* ============================================================
   OUR PRINCIPLES - Q&A (details/summary, no JS)
   Two-column split: sticky serif heading left, hairline rows right.
   No cards/boxes — 1px dividers only; + rotates to × on open.
   ============================================================ */
.v3 .qa-split{display:grid; grid-template-columns:minmax(0,20rem) 1fr;
  gap:clamp(3rem,6vw,6rem); align-items:start;}
.v3 .qa-intro{position:sticky; top:6.5rem;}
.v3 .qa-intro .h-display{margin:.4rem 0 0;}
.v3 .qa-intro__sub{font-size:var(--fs-body); color:var(--tx-3); line-height:1.6;
  margin:var(--s4) 0 0; max-width:30ch;}
.v3 .qa{border-top:1px solid var(--hair);}
.v3 .qa__item{border-bottom:1px solid var(--hair);}
.v3 .qa__q{display:flex; align-items:center; justify-content:space-between; gap:1.5rem; cursor:pointer;
  list-style:none; padding:1.35rem 0;
  font-family:var(--serif); font-weight:400; font-size:var(--fs-h3); line-height:1.25; color:var(--tx-1);
  transition:color .2s;}
.v3 .qa__q::-webkit-details-marker{display:none;}
.v3 .qa__q:hover{color:var(--ochre-hi);}
.v3 .qa__q:focus-visible{outline:2px solid var(--ochre); outline-offset:4px; border-radius:4px;}
.v3 .qa__ico{flex:none; width:20px; height:20px; position:relative;
  transition:transform .3s var(--ease);}
.v3 .qa__ico::before,.v3 .qa__ico::after{content:""; position:absolute; inset:0; margin:auto;
  background:var(--ochre); transition:background .2s;}
.v3 .qa__ico::before{width:14px; height:2px;}
.v3 .qa__ico::after{width:2px; height:14px;}
.v3 details[open] .qa__ico{transform:rotate(135deg);} /* + becomes × */
.v3 .qa__a{padding:0 0 1.35rem;}
.v3 .qa__a p{font-size:var(--fs-body); color:var(--tx-2); line-height:1.65; margin:0; max-width:58ch;}
.v3 details[open] .qa__q{color:var(--ochre-hi);}
@media (prefers-reduced-motion:no-preference){
  .v3 details[open] .qa__a{animation:v3-qa-in .3s var(--ease);}
  @keyframes v3-qa-in{from{opacity:0; transform:translateY(-5px)} to{opacity:1; transform:none}}
}
@media (max-width:900px){
  .v3 .qa-split{grid-template-columns:1fr; gap:var(--s6);}
  .v3 .qa-intro{position:static;}
}

/* ============================================================
   LEGAL pages (privacy.html / terms.html)
   ============================================================ */
.v3 .legal h2{font-family:var(--serif); font-weight:400; font-size:var(--fs-h3); color:var(--tx-1);
  margin:var(--s6) 0 var(--s3);}
.v3 .legal p{font-size:var(--fs-body); color:var(--tx-2); line-height:1.65; margin:0 0 var(--s4); max-width:66ch;}
.v3 .legal a{color:var(--ochre-hi); text-decoration:underline; text-underline-offset:3px;}
.v3 .legal__flag{border:1px solid rgba(183,127,60,.5); border-radius:var(--r-md);
  background:rgba(183,127,60,.08); padding:.8rem 1rem; color:var(--tx-1);}
.v3 .legal h1{margin-bottom:var(--s2);}
.v3 .legal ul{margin:0 0 var(--s4); padding-left:1.25rem; max-width:66ch;}
.v3 .legal li{font-size:var(--fs-body); color:var(--tx-2); line-height:1.65; margin:0 0 .45rem;}
.v3 .legal li::marker{color:var(--ochre);}
.v3 .legal__table-wrap{overflow-x:auto; margin:0 0 var(--s4); -webkit-overflow-scrolling:touch;}
.v3 .legal table{width:100%; border-collapse:collapse; min-width:520px; font-size:var(--fs-small);}
.v3 .legal th, .v3 .legal td{text-align:left; vertical-align:top; padding:.6rem .75rem;
  border:1px solid var(--hair); color:var(--tx-2); line-height:1.55;}
.v3 .legal th{color:var(--tx-1); font-weight:600; background:rgba(242,239,230,.045);}

/* mobile: hide horizontal diagram connectors when nodes stack */
@media (max-width:640px){
  .v3 .diagram__link{display:none;}
}

/* ============================================================
   COOKIE CONSENT — fixed bottom bar, glass, shown once
   ============================================================ */
.v3 .cookie{position:fixed; left:50%; bottom:1rem; transform:translateX(-50%); z-index:70;
  width:min(700px,92%); display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:.8rem 1.2rem; padding:.85rem 1.05rem; border-radius:var(--r-md);
  border:1px solid var(--e2-edge); background:var(--e2-bg-deep);
  -webkit-backdrop-filter:blur(8px) saturate(1.06); backdrop-filter:blur(8px) saturate(1.06);
  box-shadow:var(--e2-shadow), inset 0 1px 0 var(--e2-hi-deep);
  animation:v3-cookie-in .5s var(--ease) both;}
@keyframes v3-cookie-in{from{opacity:0; transform:translate(-50%,12px)} to{opacity:1; transform:translate(-50%,0)}}
.v3 .cookie[hidden]{display:none;}
.v3 .cookie__txt{flex:1 1 320px; margin:0; font-size:var(--fs-xs); color:var(--tx-3); line-height:1.5;}
.v3 .cookie__txt a{color:var(--ochre-hi); text-decoration:underline; text-underline-offset:2px;}
.v3 .cookie__actions{display:flex; gap:.5rem; flex-wrap:wrap;}
.v3 .cookie__btn{font:inherit; font-size:var(--fs-xs); font-weight:600; cursor:pointer;
  padding:.5rem .95rem; border-radius:var(--r-pill); border:1px solid var(--hair);
  background:transparent; color:var(--tx-2); transition:color .2s, border-color .2s, background .2s;}
.v3 .cookie__btn--ghost:hover{color:var(--tx-1); border-color:var(--e2-edge);}
.v3 .cookie__btn--solid{background:var(--ochre); color:var(--on-ochre); border-color:transparent;}
.v3 .cookie__btn--solid:hover{background:var(--ochre-hi);}
@media (max-width:520px){
  .v3 .cookie{bottom:0; width:100%; border-radius:var(--r-md) var(--r-md) 0 0;}
  .v3 .cookie__actions{width:100%;}
  .v3 .cookie__btn{flex:1 1 auto; padding:.7rem .95rem;}
}

/* ============================================================
   OUR PRINCIPLES — single-column editorial accordion
   Full-width rows, numerals, ochre accent bar grows on open.
   ============================================================ */
.v3 .qa-grid{max-width:820px; margin:var(--s6) auto 0; border-top:1px solid var(--hair);}
.v3 .qa-card{position:relative; border-bottom:1px solid var(--hair); transition:background .3s var(--ease);}
.v3 .qa-card::before{content:""; position:absolute; left:0; top:-1px; bottom:-1px; width:2px;
  background:var(--ochre); transform:scaleY(0); transform-origin:center; transition:transform .35s var(--ease);}
.v3 .qa-card[open]{background:linear-gradient(90deg, rgba(183,127,60,.06), transparent 55%);}
.v3 .qa-card[open]::before{transform:scaleY(1);}
.v3 .qa-card__q{display:flex; align-items:baseline; gap:1.15rem; cursor:pointer; list-style:none;
  padding:1.5rem 1rem 1.5rem 1.7rem; font-family:var(--serif); font-weight:400;
  font-size:var(--fs-h3); line-height:1.25; color:var(--tx-1); transition:color .2s;}
.v3 .qa-card__q::-webkit-details-marker{display:none;}
.v3 .qa-card__q:hover, .v3 .qa-card[open] .qa-card__q{color:var(--ochre-hi);}
.v3 .qa-card__n{flex:none; font-family:var(--sans); font-size:var(--fs-small); font-weight:700;
  color:var(--ochre); font-variant-numeric:tabular-nums;}
.v3 .qa-card__t{flex:1; min-width:0;}
.v3 .qa-card__ico{flex:none; width:20px; height:20px; align-self:center; position:relative;
  transition:transform .3s var(--ease);}
.v3 .qa-card__ico::before, .v3 .qa-card__ico::after{content:""; position:absolute; inset:0; margin:auto; background:var(--ochre);}
.v3 .qa-card__ico::before{width:14px; height:2px;}
.v3 .qa-card__ico::after{width:2px; height:14px;}
.v3 .qa-card[open] .qa-card__ico{transform:rotate(135deg);}
.v3 .qa-card__a{padding:0 1.5rem 1.6rem 4rem;}
.v3 .qa-card__a p{font-size:var(--fs-body); color:var(--tx-2); line-height:1.65; margin:0; max-width:62ch;}
@media (prefers-reduced-motion:no-preference){
  .v3 .qa-card[open] .qa-card__a{animation:v3-qa-in .3s var(--ease);}
}
@media (max-width:560px){ .v3 .qa-card__q{gap:.8rem; padding-left:1.2rem;} .v3 .qa-card__a{padding-left:1.2rem;} }