/* ══════════════════════════════════════════════════════════════════
   Liad Web Design — Liquid Glass on bone, copper accent.
   Translucent layers over an ambient ground, concentric radii,
   spring-driven motion. Contrast is deliberately high: every
   secondary tone clears 5:1, body text clears 9:1.
   ══════════════════════════════════════════════════════════════════ */

/* ── tokens ─────────────────────────────────────────────────────── */
:root{
  /* ground */
  --bone:#F7F6F3;
  --bone-2:#F1EFE9;
  --ink:#0B0B0C;

  /* ink on bone — ratios measured against --bone */
  --ink-2:#45423C;                    /* 9.3:1  body + lede            */
  --ink-3:#67635C;                    /* 5.5:1 on bone, 5.2:1 on bone-2 —
                                         captions, sources. Clears 5:1 on
                                         BOTH grounds; #6B6760 fell to 4.89
                                         wherever it sat on --bone-2 (.ph).  */
  --rule:#E4E1D9;
  --rule-2:#D2CEC4;

  /* copper — status, action, measurement. Never decoration. */
  --cu:#9A4E18;                       /* 5.6:1 on bone                 */
  --cu-deep:#6E370F;                  /* pressed                       */
  --cu-lift:#E0A06A;                  /* 8.8:1 on ink                  */
  --cu-soft:rgba(154,78,24,.09);

  /* on dark plates */
  --on-ink:#F5F4F1;                   /* 17.2:1 */
  --on-ink-2:rgba(245,244,241,.82);   /* 11.6:1 */
  --on-ink-3:rgba(245,244,241,.60);   /*  6.5:1 */
  --rule-ink:rgba(245,244,241,.17);

  /* on the copper plate */
  --on-cu:#FFFFFF;                    /* 5.7:1 on --cu */
  --on-cu-2:rgba(255,255,255,.88);    /* 5.0:1 */
  --rule-cu:rgba(255,255,255,.30);

  /* glass — the material system */
  --glass:rgba(255,255,255,.55);
  --glass-thick:rgba(255,255,255,.74);
  --glass-edge:rgba(255,255,255,.9);
  --glass-line:rgba(11,11,12,.06);
  --blur:22px;
  --blur-lg:32px;

  --glass-ink:rgba(255,255,255,.055);
  --glass-ink-edge:rgba(255,255,255,.15);
  --glass-cu:rgba(255,255,255,.13);
  --glass-cu-edge:rgba(255,255,255,.32);

  /* elevation — offset + blur, always */
  --sh-1:0 1px 2px rgba(11,11,12,.05), 0 4px 12px rgba(11,11,12,.045);
  --sh-2:0 1px 2px rgba(11,11,12,.05), 0 10px 26px rgba(11,11,12,.07);
  --sh-3:0 2px 4px rgba(11,11,12,.05), 0 18px 44px rgba(11,11,12,.09), 0 44px 90px rgba(11,11,12,.06);

  /* radius — concentric: inner = outer − padding */
  --r1:12px; --r2:16px; --r3:22px; --r4:30px; --r5:42px; --rp:999px;

  --sans:'Heebo',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,monospace;

  --wrap:1400px;
  --pad:clamp(18px,4.2vw,60px);
  --sec-y:clamp(78px,9vw,136px);
  --nav-h:64px;

  /* Every size runs through --fs so the accessibility menu can scale the whole
     type system from one number. Scaling the root font-size instead would do
     nothing here: these are clamp()s whose middle term is a vw, which no rem
     change can move. See assets/a11y.css.

     Display sizes run through --fs-d, a DAMPED version of the same setting
     (a11y.js writes both). Someone who turns text up to 160% needs the body
     copy at 160%; taking an 80px headline to 128px only costs them the line
     breaks. --fs-d lands it around 100px instead. */
  --fs:1;
  --fs-d:1;
  --t-display:calc(clamp(2.4rem,5.5vw,5rem) * var(--fs-d));
  --t-h2:calc(clamp(1.9rem,4vw,3.4rem) * var(--fs-d));
  --t-h2s:calc(clamp(1.6rem,2.9vw,2.35rem) * var(--fs-d));
  --t-h3:calc(clamp(1.1rem,1.6vw,1.35rem) * var(--fs));
  --t-lede:calc(clamp(1.05rem,1.45vw,1.32rem) * var(--fs));
  --t-body:calc(clamp(1rem,1.05vw,1.0625rem) * var(--fs));
  --t-sm:calc(.875rem * var(--fs));
  --t-xs:calc(.8125rem * var(--fs));
  --t-micro:calc(.6875rem * var(--fs));

  /* springs live in JS; these are for non-gesture transitions only */
  --ease:cubic-bezier(.32,.72,0,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

/* ── reset ──────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 34px)}
body{
  background:var(--bone);
  color:var(--ink);
  font:420 var(--t-body)/1.65 var(--sans);
  font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,picture,svg{display:block;max-width:100%}
img{height:auto}
button,input{font:inherit;color:inherit;background:none;border:0}
button{cursor:pointer;-webkit-tap-highlight-color:transparent}
a{color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}
ul,ol{list-style:none}
table{border-collapse:separate;border-spacing:0;width:100%}
::selection{background:var(--cu);color:#fff}

:focus-visible{outline:2px solid var(--cu);outline-offset:3px;border-radius:6px}
.sec--ink :focus-visible,.foot :focus-visible{outline-color:var(--cu-lift)}
.sec--cu :focus-visible{outline-color:#fff}

.skip{
  position:fixed;inset-block-start:10px;inset-inline-start:10px;z-index:200;
  padding:12px 20px;background:var(--ink);color:var(--on-ink);border-radius:var(--rp);
  font-size:var(--t-sm);font-weight:600;transform:translateY(-220%);transition:transform .28s var(--ease)
}
.skip:focus{transform:none}

.noscript{max-width:60ch;margin:120px auto;padding:0 24px;text-align:center}
.noscript h2{font-size:var(--t-h2s);margin-bottom:16px}
.noscript p{margin-bottom:12px;color:var(--ink-2)}
.noscript a{color:var(--cu);text-decoration:underline;text-underline-offset:4px}

/* ── ambient ground ─────────────────────────────────────────────────
   Large, very soft fields. Their only job is to give the glass
   something to refract — without them, backdrop-filter is invisible
   on a flat page. Fixed, so the glass shifts against them on scroll. */
.ambient{
  position:fixed;inset:-15vh -10vw;z-index:0;pointer-events:none;
  background:
    radial-gradient(46vw 46vw at 78% 6%,  rgba(154,78,24,.10), transparent 62%),
    radial-gradient(40vw 40vw at 12% 34%, rgba(120,110,95,.09), transparent 64%),
    radial-gradient(52vw 52vw at 88% 68%, rgba(154,78,24,.07), transparent 66%),
    radial-gradient(38vw 38vw at 20% 92%, rgba(120,110,95,.08), transparent 64%);
}

/* ── layout ─────────────────────────────────────────────────────── */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}
.sec{position:relative;z-index:1;padding-block:var(--sec-y)}

/* dark and copper sections are inset slabs, not full-bleed rectangles */
.sec--ink,.sec--cu{
  margin-inline:clamp(10px,2.2vw,30px);
  border-radius:var(--r5);
  overflow:hidden;
  box-shadow:var(--sh-3);
}
.sec--ink{background:var(--ink);color:var(--on-ink)}
.sec--cu{background:var(--cu);color:var(--on-cu)}
.sec--ink .wrap,.sec--cu .wrap{padding-inline:clamp(20px,4vw,56px)}

/* ── type ───────────────────────────────────────────────────────── */
.num{font-family:var(--mono);font-feature-settings:"tnum";letter-spacing:-.02em}
.ltr{direction:ltr;unicode-bidi:isolate}

.marker{
  font-size:var(--t-micro);font-weight:600;letter-spacing:.15em;
  text-transform:uppercase;color:var(--cu);
  display:inline-flex;align-items:center;gap:9px;white-space:nowrap;
  padding:7px 14px 7px 11px;border-radius:var(--rp);background:var(--cu-soft);
}
.marker::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--cu);flex:none}
.sec--ink .marker{color:var(--cu-lift);background:rgba(224,160,106,.13)}
.sec--ink .marker::before{background:var(--cu-lift)}
/* On the copper plate the pill has to DARKEN, not lighten. A translucent white
   chip raises the ground behind white type and drops the pair to 4.24:1 —
   below this system's own 5:1 floor. An ink veil takes it to 7.5:1 instead,
   and reads as a debossed chip rather than a washed one. */
.sec--cu .marker{color:#fff;background:rgba(11,11,12,.16)}
.sec--cu .marker::before{background:#fff}

.h2{
  font-size:var(--t-h2);font-weight:800;line-height:1.06;
  letter-spacing:-.032em;text-wrap:balance;max-width:19ch;
}
.h2--sm{font-size:var(--t-h2s);max-width:22ch}

.lede{
  font-size:var(--t-lede);line-height:1.55;color:var(--ink-2);
  max-width:52ch;margin-block-start:clamp(20px,2.4vw,30px);
}
.sec--ink .lede{color:var(--on-ink-2)}
.sec--cu .lede{color:var(--on-cu-2)}

.sechead{
  display:grid;grid-template-columns:minmax(0,1fr);gap:20px;
  padding-block-end:clamp(30px,3.6vw,48px);
}
.sechead .marker{justify-self:start}
@media (min-width:900px){
  .sechead{grid-template-columns:200px minmax(0,1fr);gap:clamp(24px,3.4vw,56px);align-items:start}
  .sechead .marker{position:sticky;top:calc(var(--nav-h) + 44px)}
}
@media (min-width:1120px){
  .sechead--3{grid-template-columns:200px minmax(0,1.18fr) minmax(0,.82fr)}
  .sechead--3 .lede{margin-block-start:.4em;padding-inline-start:clamp(12px,2vw,32px)}
}

.ph{
  display:inline-flex;align-items:center;gap:7px;
  font-size:var(--t-micro);font-weight:500;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-3);background:var(--bone-2);border-radius:var(--rp);padding:6px 12px;
}
.ph::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--ink-3)}

/* ── icons + buttons ────────────────────────────────────────────── */
.ic{width:19px;height:19px;flex:none;fill:currentColor}
.ic--arrow{width:17px;height:17px;transition:transform .4s var(--ease-out)}

.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  gap:10px;padding:15px 26px;min-height:52px;border-radius:var(--rp);
  font-size:var(--t-sm);font-weight:600;letter-spacing:-.005em;
  border:1px solid transparent;
  transition:transform .1s ease-out, box-shadow .34s var(--ease-out),
             background-color .28s var(--ease-out), color .28s var(--ease-out),
             border-color .28s var(--ease-out);
}
.btn:active{transform:scale(.97)}          /* feedback on press, not release */
.btn:hover .ic--arrow{transform:translateX(4px)}
.btn--lg{padding:18px 32px;min-height:60px;font-size:calc(.9375rem * var(--fs))}
.btn--full{width:100%}

.btn--cu{background:var(--cu);color:#fff;box-shadow:var(--sh-2)}
.btn--cu:hover,.btn--cu:focus-visible{background:var(--cu-deep);box-shadow:var(--sh-3)}
.btn--ink{background:var(--ink);color:var(--on-ink);box-shadow:var(--sh-2)}
.btn--ink:hover,.btn--ink:focus-visible{background:#000;box-shadow:var(--sh-3)}
.btn--bone{background:var(--bone);color:var(--ink);box-shadow:var(--sh-2)}
.btn--bone:hover,.btn--bone:focus-visible{background:#fff;box-shadow:var(--sh-3)}

.btn--glass{
  background:var(--glass-thick);color:var(--ink);
  -webkit-backdrop-filter:blur(var(--blur)) saturate(175%);
  backdrop-filter:blur(var(--blur)) saturate(175%);
  border-color:var(--glass-line);border-top-color:var(--glass-edge);box-shadow:var(--sh-1);
}
.btn--glass:hover,.btn--glass:focus-visible{background:#fff;box-shadow:var(--sh-2)}

.btn--glass-ink{
  background:rgba(255,255,255,.09);color:var(--on-ink);
  -webkit-backdrop-filter:blur(var(--blur));backdrop-filter:blur(var(--blur));
  border-color:rgba(255,255,255,.16);border-top-color:rgba(255,255,255,.26);
}
.btn--glass-ink:hover,.btn--glass-ink:focus-visible{background:rgba(255,255,255,.16)}

.arw{
  width:46px;height:46px;flex:none;border-radius:50%;
  display:grid;place-items:center;color:var(--ink);
  background:var(--glass-thick);
  -webkit-backdrop-filter:blur(var(--blur));backdrop-filter:blur(var(--blur));
  border:1px solid var(--glass-line);border-top-color:var(--glass-edge);
  box-shadow:var(--sh-1);
  transition:transform .1s ease-out,background-color .3s var(--ease-out),
             box-shadow .3s var(--ease-out),opacity .3s;
}
.arw svg{width:18px;height:18px}
.arw:hover:not(:disabled){background:#fff;box-shadow:var(--sh-2)}
.arw:active:not(:disabled){transform:scale(.93)}
.arw:disabled{opacity:.32;cursor:default;box-shadow:none}

/* ── nav — a floating glass pill; content scrolls beneath ───────── */
.nav{
  position:fixed;inset-block-start:0;inset-inline:0;z-index:60;
  padding:clamp(10px,1.4vw,16px) var(--pad) 0;
  transition:transform .5s var(--ease);
}
.nav.is-hidden{transform:translateY(calc(-100% - 24px))}
.nav__in{
  max-width:calc(var(--wrap) - var(--pad));margin-inline:auto;
  height:var(--nav-h);padding-inline:10px 8px;
  display:flex;align-items:center;gap:clamp(12px,2.4vw,36px);
  border-radius:var(--rp);
  background:var(--glass);
  -webkit-backdrop-filter:blur(var(--blur-lg)) saturate(180%);
  backdrop-filter:blur(var(--blur-lg)) saturate(180%);
  border:1px solid var(--glass-line);border-top-color:var(--glass-edge);
  box-shadow:var(--sh-1);
  transition:box-shadow .4s var(--ease-out),background-color .4s var(--ease-out);
}
.nav.is-stuck .nav__in{background:var(--glass-thick);box-shadow:var(--sh-2)}
.nav__logo{
  display:flex;align-items:center;gap:9px;padding-inline-start:12px;
  font-weight:700;font-size:calc(.9375rem * var(--fs));letter-spacing:-.025em;flex:none;
  white-space:nowrap;
}
.nav__mark{
  width:12px;height:12px;border-radius:4px;background:var(--cu);flex:none;
  transition:transform .55s var(--ease-out),border-radius .55s var(--ease-out);
}
.nav__logo:hover .nav__mark{transform:rotate(45deg);border-radius:50%}
.nav__links{display:none;gap:4px;margin-inline-end:auto}
.nav__links a{
  position:relative;font-size:var(--t-xs);font-weight:500;color:var(--ink-2);
  padding:9px 14px;border-radius:var(--rp);
  transition:color .26s,background-color .26s var(--ease-out);
}
.nav__links a:hover{color:var(--ink);background:rgba(11,11,12,.05)}
.nav__links a.is-on{color:var(--cu);background:var(--cu-soft)}
.nav__cta{display:none;padding:11px 22px;min-height:44px;font-size:var(--t-xs)}

.nav__burger{
  width:44px;height:44px;margin-inline-start:auto;border-radius:50%;
  display:grid;place-content:center;gap:6px;transition:transform .1s ease-out;
}
.nav__burger:active{transform:scale(.93)}
.nav__burger i{display:block;width:20px;height:1.8px;border-radius:2px;background:var(--ink);transition:transform .42s var(--ease-out)}
.nav__burger[aria-expanded="true"] i:first-child{transform:translateY(3.9px) rotate(45deg)}
.nav__burger[aria-expanded="true"] i:last-child{transform:translateY(-3.9px) rotate(-45deg)}

.nav__sheet{
  position:fixed;inset-block-start:calc(var(--nav-h) + 22px);inset-inline:var(--pad);
  z-index:59;padding:10px;border-radius:var(--r4);
  background:var(--glass-thick);
  -webkit-backdrop-filter:blur(var(--blur-lg)) saturate(180%);
  backdrop-filter:blur(var(--blur-lg)) saturate(180%);
  border:1px solid var(--glass-line);border-top-color:var(--glass-edge);
  box-shadow:var(--sh-3);
  transform-origin:100% 0;
  opacity:0;transform:scale(.94) translateY(-10px);
  transition:opacity .3s var(--ease-out),transform .42s var(--ease-out);
}
.nav__sheet[hidden]{display:none}
.nav__sheet.is-open{opacity:1;transform:none}
.nav__sheet a{
  display:block;padding:16px 18px;border-radius:var(--r3);
  font-size:calc(1.125rem * var(--fs));font-weight:600;letter-spacing:-.02em;transition:background-color .25s;
}
.nav__sheet a:active{background:rgba(11,11,12,.06)}

@media (min-width:1000px){
  .nav__links{display:flex}
  .nav__cta{display:inline-flex}
  .nav__burger,.nav__sheet{display:none!important}
}

/* ── hero ───────────────────────────────────────────────────────── */
.hero{
  position:relative;z-index:1;
  padding-block:calc(var(--nav-h) + clamp(46px,7vw,86px)) clamp(48px,7vw,100px);
}
.hero__grid{display:grid;gap:clamp(30px,5vw,20px);align-items:center}
@media (min-width:960px){
  .hero__grid{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(20px,2.4vw,44px)}
}
.marker--top{margin-block-end:clamp(22px,2.6vw,32px)}

.hero__h{font-size:var(--t-display);font-weight:800;line-height:1.02;letter-spacing:-.042em}
.hero__h .ln{display:block;overflow:hidden;padding-block:.03em}
.hero__h .ln > span{display:block;transform:translateY(105%);opacity:0}
.is-ready .hero__h .ln > span{
  transform:none;opacity:1;
  transition:transform 1.05s var(--ease-out),opacity .7s ease-out;
}
.is-ready .hero__h .ln:nth-child(1) > span{transition-delay:.06s}
.is-ready .hero__h .ln:nth-child(2) > span{transition-delay:.15s}
.is-ready .hero__h .ln:nth-child(3) > span{transition-delay:.24s}
.hero__h em{font-style:normal;position:relative;display:inline-block;color:var(--cu)}
.hero__h .rule{
  position:absolute;inset-inline:-.04em;inset-block-end:.02em;height:.09em;border-radius:var(--rp);
  background:var(--cu);opacity:.26;transform:scaleX(0);transform-origin:100% 50%;
}
.is-ready .hero__h .rule{transform:scaleX(1);transition:transform .9s var(--ease-out) 1s}

.hero__sub{
  font-size:var(--t-lede);line-height:1.58;color:var(--ink-2);
  max-width:47ch;margin-block-start:clamp(22px,2.6vw,30px);
}
.hero__acts{display:flex;flex-wrap:wrap;gap:12px;margin-block-start:clamp(26px,3vw,38px)}
@media (max-width:560px){
  .hero__acts .btn,.final__acts .btn{flex:1 1 100%}
  .mobile__specs{flex-direction:column;align-items:stretch}
  .mobile__specs li{justify-content:space-between}
}

.specs{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  margin-block-start:clamp(32px,4vw,50px);
  border-radius:var(--r4);padding:20px clamp(14px,1.8vw,24px);
  background:var(--glass);
  -webkit-backdrop-filter:blur(var(--blur)) saturate(175%);
  backdrop-filter:blur(var(--blur)) saturate(175%);
  border:1px solid var(--glass-line);border-top-color:var(--glass-edge);
  box-shadow:var(--sh-1);
}
.specs__i{padding-inline:clamp(8px,1.4vw,16px);border-inline-start:1px solid var(--rule)}
.specs__i:first-child{border-inline-start:0}
.specs__i dt{font-size:calc(clamp(1.3rem,2.3vw,1.8rem) * var(--fs-d));font-weight:500;line-height:1;letter-spacing:-.045em}
.specs__i dd{margin-block-start:8px;font-size:var(--t-micro);font-weight:500;color:var(--ink-2);line-height:1.45}

.hero__sub,.hero__acts,.specs,.marker--top{opacity:0;transform:translateY(14px)}
.is-ready .hero__sub,.is-ready .hero__acts,.is-ready .specs,.is-ready .marker--top{
  opacity:1;transform:none;transition:opacity .8s ease-out,transform .9s var(--ease-out);
}
.is-ready .marker--top{transition-delay:.02s}
.is-ready .hero__sub{transition-delay:.34s}
.is-ready .hero__acts{transition-delay:.42s}
.is-ready .specs{transition-delay:.5s}

/* ── the machines ───────────────────────────────────────────────── */
.hero__stage{position:relative;margin-block-start:clamp(24px,6vw,0px)}
.machine{
  position:relative;width:100%;
  margin-inline-end:clamp(-104px,-6vw,0px);
  opacity:0;transform:translateY(30px) scale(.985);
}
.is-ready .machine{
  opacity:1;transform:none;
  transition:opacity .9s ease-out .1s,transform 1.3s var(--ease-out) .1s;
}
/* idle breathing uses the independent `translate` property, not `transform`,
   so the scroll-driven arc and dolly can own `transform` without fighting it */
.machine.is-idle{animation:floatY 8s ease-in-out infinite}
@keyframes floatY{0%,100%{translate:0 0}50%{translate:0 -10px}}
.machine__img{position:relative;z-index:1;width:100%;height:auto}

/* the photo's own shadow was cut away with its background.
   Physical left/right on purpose: a photograph never mirrors. */
.machine::after{
  content:"";position:absolute;z-index:0;
  left:40%;right:1%;bottom:-1.2%;height:3%;
  background:rgba(11,11,12,.15);border-radius:50%;filter:blur(11px);
}

.machine__screen,.phone__screen{
  position:absolute;inset:0;z-index:2;direction:ltr;pointer-events:none;
  opacity:0;transition:opacity .5s ease-out;
}
.machine__screen.is-set,.phone__screen.is-set{opacity:1}

.scr{
  position:absolute;top:0;left:0;width:1000px;height:600px;
  transform-origin:0 0;direction:rtl;
  background:#0E0E10;color:#F5F4F1;font-family:var(--sans);
  overflow:hidden;display:flex;flex-direction:column;
}
.scr__bar{
  height:56px;flex:none;display:flex;align-items:center;gap:20px;
  padding-inline:22px;background:#17171A;border-block-end:1px solid rgba(255,255,255,.07);
}
.scr__dots{display:flex;gap:9px}
.scr__dots i{width:11px;height:11px;border-radius:50%;background:rgba(255,255,255,.18)}
.scr__url{
  flex:1;height:32px;display:flex;align-items:center;padding-inline:16px;border-radius:999px;
  background:rgba(255,255,255,.07);font-family:var(--mono);font-size:15px;color:rgba(245,244,241,.7);
}
/* The page on the glass is the Tomer Barbershop home from the work rail, so it
   carries that client's palette, not this one's. Scoped tokens — the copper
   must not leak into a brand that isn't ours to repaint. */
.scr--barber{
  --iv:#F4F1EA;                       /* ivory ground   */
  --bk:#111214;                       /* headline ink   */
  --bk2:#3E3B36;                      /* body           */
  --bk3:#6A655C;                      /* captions       */
  --pt:#12595C;                       /* deep petrol — action + measurement */
  --rl:rgba(17,18,20,.15);
}
.scr__page{position:relative;flex:1;overflow:hidden;background:var(--iv);color:var(--bk2);display:flex;flex-direction:column}
/* zoomed past `cover` so the chair reads at this size — the demo's own hero
   video is dollied in by the time it settles, and a wide plate would put two
   thumbnail-sized men in an empty room. */
.scr__photo{
  position:absolute;inset:0;z-index:0;width:100%;height:100%;max-width:none;
  object-fit:cover;object-position:50% 50%;
  /* origin at the top edge, not the centre: a centred zoom lifts the barber's
     head into the nav band, where it eats the menu */
  transform:scale(1.3);transform-origin:50% 0;
}
/* the demo's directional scrim: ivory at the inline start, so the headline
   lands on clean plaster while the chair stays legible at the other end.
   The third stop is this panel's own: at 544px tall the nav rides much lower
   over the room than it does on a real 900px viewport, so it gets a wash. */
.scr__page::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(to left,#F4F1EA 3%,rgba(244,241,234,.88) 30%,rgba(244,241,234,.3) 61%,rgba(244,241,234,0) 87%),
    linear-gradient(to top,rgba(244,241,234,.92),rgba(244,241,234,0) 42%),
    linear-gradient(to bottom,rgba(244,241,234,.72),rgba(244,241,234,0) 19%);
}
.scr__nav{position:relative;z-index:2;flex:none;display:flex;align-items:center;gap:26px;padding:22px 40px 0}
.scr__brand{display:flex;align-items:baseline;gap:9px;color:var(--bk)}
.scr__brand b{font-size:22px;font-weight:800;letter-spacing:-.03em}
.scr__brand i{font-style:normal;font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--bk3)}
.scr__menu{display:flex;gap:22px;font-size:14px;font-weight:500;color:var(--bk2);margin-inline:auto}
.scr__btn{display:inline-flex;align-items:center;gap:8px;background:var(--pt);color:var(--iv);font-size:14px;font-weight:600;padding:11px 20px;border-radius:10px}
.scr__body{position:relative;z-index:2;flex:1;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:14px;padding:0 40px}
.scr__eyebrow{display:inline-flex;align-items:center;gap:10px;margin:0;font-size:11px;font-weight:700;letter-spacing:.16em;color:var(--pt)}
.scr__eyebrow::before{content:"";width:30px;height:1px;background:var(--pt)}
.scr__h{margin:0;font-size:56px;font-weight:800;line-height:.99;letter-spacing:-.045em;color:var(--bk)}
.scr__h span{display:block}
.scr__h em{font-style:normal;color:var(--pt)}
.scr__p{margin:0;font-size:16px;line-height:1.5;color:var(--bk2);max-width:46ch}
.scr__acts{display:flex;align-items:center;gap:12px;margin-block-start:4px}
.scr__cta{display:inline-flex;align-items:center;gap:9px;background:var(--pt);color:var(--iv);font-size:15px;font-weight:600;padding:15px 26px;border-radius:10px}
.scr__cta--ghost{background:transparent;color:var(--bk);box-shadow:inset 0 0 0 1px var(--rl)}
.scr__cta svg,.scr__btn svg{width:17px;height:17px;flex:none}
.scr__note{margin:0;font-size:12px;color:var(--bk3)}
.scr__stats{
  position:relative;z-index:2;flex:none;display:grid;grid-template-columns:repeat(4,1fr);gap:16px;
  margin-inline:40px;padding-block:16px 20px;border-block-start:1px solid var(--rl);
}
.scr__stats span{display:grid;gap:3px}
.scr__stats b{font-size:26px;font-weight:600;color:var(--bk);line-height:1}
.scr__stats i{font-style:normal;font-size:12px;color:var(--bk3)}

.scr__eyebrow,.scr__h span,.scr__p,.scr__acts,.scr__note,.scr__stats,.scr__nav{opacity:0;transform:translateY(16px)}
.machine__screen.is-live .scr__nav,
.machine__screen.is-live .scr__eyebrow,
.machine__screen.is-live .scr__h span,
.machine__screen.is-live .scr__p,
.machine__screen.is-live .scr__acts,
.machine__screen.is-live .scr__note,
.machine__screen.is-live .scr__stats{
  opacity:1;transform:none;transition:opacity .6s ease-out,transform .8s var(--ease-out);
}
.machine__screen.is-live .scr__nav{transition-delay:.05s}
.machine__screen.is-live .scr__eyebrow{transition-delay:.16s}
.machine__screen.is-live .scr__h span:nth-child(1){transition-delay:.24s}
.machine__screen.is-live .scr__h span:nth-child(2){transition-delay:.32s}
.machine__screen.is-live .scr__p{transition-delay:.42s}
.machine__screen.is-live .scr__acts{transition-delay:.52s}
.machine__screen.is-live .scr__note{transition-delay:.6s}
.machine__screen.is-live .scr__stats{transition-delay:.66s}

.chip{
  position:absolute;z-index:3;bottom:19%;left:0;
  border-radius:var(--r3);padding:14px 18px 15px;min-width:140px;
  background:var(--glass-thick);
  -webkit-backdrop-filter:blur(var(--blur)) saturate(175%);
  backdrop-filter:blur(var(--blur)) saturate(175%);
  border:1px solid var(--glass-line);border-top-color:var(--glass-edge);
  box-shadow:var(--sh-2);
  opacity:0;transform:translateY(10px) scale(.96);
}
.is-ready .chip{opacity:1;transform:none;transition:opacity .6s ease-out 1.2s,transform .8s var(--ease-out) 1.2s}
.chip__v{display:block;font-size:calc(1.32rem * var(--fs-d));font-weight:500;line-height:1;letter-spacing:-.04em}
.chip__l{display:block;margin-block-start:6px;font-size:var(--t-micro);font-weight:500;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-2)}
.chip__bar{display:block;margin-block-start:11px;height:3px;border-radius:var(--rp);background:var(--rule-2);overflow:hidden}
.chip__bar i{display:block;height:100%;border-radius:var(--rp);background:var(--cu);transform:scaleX(0);transform-origin:100% 50%}
.is-ready .chip__bar i{transform:scaleX(1);transition:transform 1.5s var(--ease) 1.5s}

@media (max-width:959px){
  .machine{margin-inline-end:0;max-width:640px;margin-inline:auto}
  .chip{bottom:4%;left:0;padding:11px 14px 12px;min-width:118px;border-radius:var(--r2)}
  .chip__v{font-size:calc(1.05rem * var(--fs-d))}
}

/* ── problem stats ──────────────────────────────────────────────── */
.stats{display:grid;gap:14px;margin-block-start:clamp(40px,5vw,64px)}
@media (min-width:820px){.stats{grid-template-columns:repeat(3,1fr);gap:16px}}
.stats__i{
  padding:clamp(24px,2.6vw,32px);border-radius:var(--r4);
  background:var(--glass-ink);
  -webkit-backdrop-filter:blur(var(--blur));backdrop-filter:blur(var(--blur));
  border:1px solid rgba(255,255,255,.09);border-top-color:var(--glass-ink-edge);
}
.stats__n{
  display:flex;align-items:baseline;gap:.14em;
  font-size:calc(clamp(2.3rem,4.8vw,3.6rem) * var(--fs-d));font-weight:500;line-height:.96;letter-spacing:-.05em;
  color:var(--cu-lift);
}
.stats__u{font-size:.5em;font-weight:500;letter-spacing:-.02em;color:var(--on-ink-2)}
.stats__l{margin-block-start:16px;font-size:var(--t-body);line-height:1.5;color:var(--on-ink);max-width:30ch}
.stats__s{margin-block-start:12px;font-size:var(--t-micro);font-weight:500;letter-spacing:.04em;color:var(--on-ink-3)}
.resolution{
  margin-block-start:clamp(36px,4.4vw,58px);max-width:62ch;
  font-size:var(--t-lede);line-height:1.58;color:var(--on-ink-2);
}
.resolution strong{color:var(--on-ink);font-weight:600}

/* ── before / after ─────────────────────────────────────────────── */
.cmp{position:relative}
.cmp__frame{
  position:relative;aspect-ratio:16/10;max-height:74vh;
  border-radius:var(--r5);overflow:hidden;
  border:1px solid var(--glass-line);box-shadow:var(--sh-3);
  background:var(--bone-2);touch-action:pan-y;user-select:none;cursor:grab;
  --p:50%;
}
.cmp__frame.is-grab{cursor:grabbing}
@media (max-width:640px){.cmp__frame{aspect-ratio:4/5;border-radius:var(--r4)}}
.cmp__side{position:absolute;inset:0}
.cmp__side--good{clip-path:inset(0 0 0 var(--p))}
.cmp__side > .mini{position:absolute;inset:0}

.cmp__handle{
  position:absolute;top:0;bottom:0;left:var(--p);
  width:2px;background:rgba(255,255,255,.85);z-index:4;pointer-events:none;
  transform:translateX(-50%);box-shadow:0 0 0 1px rgba(11,11,12,.12);
}
.cmp__grip{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:54px;height:54px;border-radius:50%;
  background:var(--glass-thick);color:var(--ink);
  -webkit-backdrop-filter:blur(var(--blur)) saturate(175%);
  backdrop-filter:blur(var(--blur)) saturate(175%);
  border:1px solid var(--glass-edge);box-shadow:var(--sh-2);
  display:grid;place-items:center;
}
.cmp__grip svg{width:24px;height:24px}
.cmp__range{position:absolute;inset:0;z-index:5;width:100%;height:100%;opacity:0;pointer-events:none;-webkit-appearance:none;appearance:none}
.cmp__frame:has(.cmp__range:focus-visible){outline:2px solid var(--cu);outline-offset:4px}

.cmp__tag{
  position:absolute;bottom:16px;z-index:3;
  font-size:var(--t-micro);font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  padding:8px 15px;border-radius:var(--rp);
  background:rgba(255,255,255,.82);color:var(--ink);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.9);box-shadow:var(--sh-1);
}
.cmp__tag--bad{left:16px}
.cmp__tag--good{right:16px;background:var(--cu);color:#fff;border-color:rgba(255,255,255,.3)}
.cmp__hint{
  position:absolute;top:16px;left:50%;transform:translateX(-50%);
  z-index:6;font-size:var(--t-micro);font-weight:600;letter-spacing:.07em;
  background:rgba(11,11,12,.82);color:var(--on-ink);padding:9px 16px;border-radius:var(--rp);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  transition:opacity .4s,transform .4s var(--ease-out);pointer-events:none;
}
.cmp__hint.is-off{opacity:0;transform:translateX(-50%) translateY(-6px)}
.cmp__note{margin-block-start:18px;font-size:var(--t-xs);color:var(--ink-2)}

/* mini sites */
.mini{position:relative;height:100%;overflow:hidden;font-size:clamp(8px,1.05vw,13px)}
.mini--bad{background:#fff;color:#222;font-family:Georgia,'Times New Roman',serif}
.mini--bad .mini__brand{background:#1a3a6b;color:#fff;padding:1em 1.4em;font-size:1.5em;font-weight:700;text-align:center}
.mini--bad .mini__menu{display:flex;flex-wrap:wrap;gap:.9em;background:#e8eaf0;padding:.7em 1.4em;font-size:.95em;color:#1a3a6b}
.mini--bad .mini__banner{background:#f5c518;color:#7a1f1f;text-align:center;padding:.7em;font-weight:700;font-size:1.15em}
.mini--bad .mini__pad{padding:1.6em 1.4em}
.mini--bad h4{font-size:1.55em;line-height:1.35;margin-block-end:.7em;color:#1a3a6b;font-weight:700}
.mini--bad p{font-size:1.02em;line-height:1.7;color:#444;margin-block-end:1.2em}
.mini--bad .mini__btns{display:flex;flex-wrap:wrap;gap:.6em}
.mini--bad .mini__btns span{background:#1a3a6b;color:#fff;padding:.55em 1.1em;font-size:.95em;border-radius:4px}
.mini--bad .mini__boxes{display:grid;grid-template-columns:repeat(3,1fr);gap:.9em;margin-block-start:1.5em}
.mini--bad .mini__boxes div{border:1px solid #ccd2e0;padding:.8em;text-align:center;background:#f7f8fb}
.mini--bad .mini__boxes i{display:block;height:3.4em;background:#dfe3ec;margin-block-end:.7em}
.mini--bad .mini__boxes b{display:block;font-size:1em;color:#1a3a6b;margin-block-end:.35em}
.mini--bad .mini__boxes em{font-style:normal;font-size:.9em;color:#777;line-height:1.5}
.mini--bad .mini__ft{background:#1a3a6b;color:#c9d2e6;text-align:center;padding:.9em;font-size:.9em;margin-block-start:1.5em}

.mini--good{background:#FBFAF7;color:#0B0B0C;font-family:var(--sans);display:flex;flex-direction:column;padding:1.9em 2.1em}
.mini--good .mini__top{display:flex;align-items:center;gap:1.8em;padding-block-end:1.4em;border-block-end:1px solid #E7E4DC}
.mini__logo{font-weight:800;font-size:1.5em;letter-spacing:-.03em}
.mini__nav{display:flex;gap:1.4em;font-size:1.05em;color:#5A5852;margin-inline-end:auto}
.mini__cta{background:#0B0B0C;color:#FBFAF7;font-size:.95em;font-weight:600;padding:.7em 1.4em;border-radius:99em}
.mini__hero{flex:1;display:flex;flex-direction:column;justify-content:center;padding-block-start:1em}
.mini--good h4{font-size:4.2em;font-weight:800;line-height:1.01;letter-spacing:-.045em}
.mini--good h4 span{display:block}
.mini--good p{margin-block-start:1.1em;font-size:1.25em;line-height:1.5;color:#45423C;max-width:26ch}
.mini__act{align-self:flex-start;margin-block-start:1.7em;background:var(--cu);color:#fff;font-size:1.1em;font-weight:600;padding:1em 2em;border-radius:99em}
.mini__tags{display:flex;gap:.6em;margin-block-start:1.8em}
.mini__tags i{font-style:normal;font-size:.95em;color:#5A5852;border:1px solid #E2DFD7;padding:.5em 1em;border-radius:99em}

/* ── the live card ───────────────────────────────────────────────── */
.card__link{display:block;color:inherit;text-decoration:none}
/* the preview is the demo's own first screen, shot at 1440×900 — same 16/10
   as the frame, so cover crops nothing */
.card__img{display:block;width:100%;height:100%;object-fit:cover;object-position:top center}
.card--live .card__vis{border-color:color-mix(in srgb,var(--cu) 42%,transparent)}
.card--live:hover .card__vis{box-shadow:var(--sh-3);transform:translateY(-4px)}
.card__live{
  /* bottom-inline-end: the only corner of the miniature that stays empty,
     so the badge never crowds the tag row or the CTA */
  position:absolute;inset-block-end:12px;inset-inline-end:12px;z-index:2;
  display:inline-flex;align-items:center;gap:7px;
  background:var(--ink);color:var(--on-ink);
  padding:7px 12px;border-radius:var(--rp);
  font-size:var(--t-micro);font-weight:700;letter-spacing:.04em;
}
.card__live i{width:6px;height:6px;border-radius:50%;background:var(--cu-lift);flex:none}
@media (prefers-reduced-motion:no-preference){
  .card__live i{animation:liveDot 2.4s var(--ease-out) infinite}
}
@keyframes liveDot{0%,100%{opacity:1}50%{opacity:.3}}

/* ── comparison table ───────────────────────────────────────────── */
.tabs{
  display:flex;gap:4px;margin-block-end:22px;padding:5px;border-radius:var(--rp);
  background:var(--glass);
  -webkit-backdrop-filter:blur(var(--blur));backdrop-filter:blur(var(--blur));
  border:1px solid var(--glass-line);border-top-color:var(--glass-edge);
}
.tabs__b{
  flex:1;padding:11px 8px;border-radius:var(--rp);
  font-size:var(--t-micro);font-weight:600;color:var(--ink-2);
  transition:background-color .32s var(--ease-out),color .32s var(--ease-out),transform .1s ease-out;
}
.tabs__b:active{transform:scale(.97)}
.tabs__b.is-on{background:var(--ink);color:var(--on-ink);box-shadow:var(--sh-1)}
@media (min-width:820px){.tabs{display:none}}

.tblwrap{
  position:relative;margin-block-start:clamp(8px,1.6vw,22px);
  border-radius:var(--r4);padding:clamp(12px,1.8vw,22px);
  background:var(--glass);
  -webkit-backdrop-filter:blur(var(--blur)) saturate(175%);
  backdrop-filter:blur(var(--blur)) saturate(175%);
  border:1px solid var(--glass-line);border-top-color:var(--glass-edge);
  box-shadow:var(--sh-2);
}
.tbl__sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.tbl th,.tbl td{text-align:start;vertical-align:top}
.tbl thead th{padding:6px clamp(10px,1.4vw,20px) 18px}
.tbl thead th b{display:block;font-size:var(--t-h3);font-weight:800;letter-spacing:-.03em}
.tbl thead th i{display:block;margin-block-start:5px;font-style:normal;font-size:var(--t-micro);font-weight:500;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3)}
.tbl tbody th{
  padding:clamp(14px,1.8vw,20px) clamp(10px,1.4vw,20px);
  font-size:var(--t-xs);font-weight:500;color:var(--ink-2);white-space:nowrap;
}
.tbl tbody td{padding:clamp(14px,1.8vw,20px) clamp(10px,1.4vw,20px);font-size:var(--t-xs)}
.tbl tbody tr + tr th,.tbl tbody tr + tr td{border-block-start:1px solid var(--rule)}

/* the "me" column is a solid plate inside the glass panel */
.tbl .is-me{background:var(--ink);color:var(--on-ink);font-weight:600}
.tbl thead .is-me{border-start-start-radius:var(--r3);border-start-end-radius:var(--r3);padding-block-start:20px}
.tbl tbody tr:last-child .is-me{border-end-start-radius:var(--r3);border-end-end-radius:var(--r3);padding-block-end:22px}
.tbl thead th.is-me i{color:var(--cu-lift)}
.tbl tbody tr + tr .is-me{border-block-start:1px solid rgba(255,255,255,.1)}
@media (min-width:820px){.tbl thead th:first-child{width:22%}}

@media (max-width:819px){
  .tbl thead th:first-child{display:none}
  .tbl,.tbl tbody,.tbl thead,.tbl tr{display:block}
  .tbl thead tr{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .tbl thead th{padding-inline:16px}
  .tbl thead th[data-col]{display:none}
  .tbl[data-active="1"] thead th[data-col="1"],
  .tbl[data-active="2"] thead th[data-col="2"]{display:block}
  .tbl tbody tr{display:grid;grid-template-columns:1fr 1fr;gap:0 8px;margin-block-start:10px}
  .tbl tbody th{
    display:block;grid-column:1/-1;padding:14px 4px 8px;
    font-size:var(--t-micro);font-weight:600;letter-spacing:.11em;
    text-transform:uppercase;color:var(--ink-3);white-space:normal;
  }
  .tbl tbody td{padding:14px 16px 16px;border-radius:var(--r3)}
  .tbl tbody td[data-col]{display:none}
  .tbl[data-active="1"] tbody td[data-col="1"],
  .tbl[data-active="2"] tbody td[data-col="2"]{display:block}
  .tbl tbody tr + tr th,.tbl tbody tr + tr td{border-block-start:0}
  .tbl thead .is-me,.tbl tbody .is-me{border-radius:var(--r3)}
  .tbl tbody tr + tr .is-me{border-block-start:0}
}

/* ── work rail ──────────────────────────────────────────────────── */
.work__top{display:flex;flex-wrap:wrap;gap:20px;align-items:flex-end;justify-content:space-between}
.work__ctrl{display:flex;align-items:center;gap:10px;margin-inline-start:auto}
.work__hint{font-size:var(--t-micro);font-weight:500;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);margin-inline-end:6px}
@media (max-width:640px){.work__hint{display:none}}

.rail{
  position:relative;z-index:1;
  margin-block-start:clamp(30px,3.6vw,48px);
  overflow-x:auto;overscroll-behavior-x:contain;
  scrollbar-width:none;cursor:grab;
}
.rail::-webkit-scrollbar{display:none}
.rail.is-drag{cursor:grabbing}
.rail__t{display:flex;gap:clamp(16px,1.8vw,26px);padding-inline:var(--pad);width:max-content}
.rail__t::after{content:"";width:calc(var(--pad) - clamp(16px,1.8vw,26px));flex:none}
.card{flex:none;width:min(78vw,560px)}
.card__vis{
  position:relative;aspect-ratio:16/10;overflow:hidden;container-type:inline-size;
  border-radius:var(--r4);border:1px solid var(--glass-line);
  background:var(--bone-2);box-shadow:var(--sh-2);
  transition:box-shadow .5s var(--ease-out),transform .5s var(--ease-out);
}
.card:hover .card__vis{box-shadow:var(--sh-3);transform:translateY(-4px)}
.card__vis .mini{font-size:clamp(6px,1.75cqi,10px)}
.card__vis .mini--good{padding:2.4em 2.6em}
.card__vis .mini--good h4{font-size:3.4em}
.card__meta{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 18px;padding:18px 6px 0}
.card__p{font-size:var(--t-xs);font-weight:600}
.card__g{font-size:var(--t-xs);color:var(--ink-2);margin-inline-end:auto}
.card__m{display:flex;align-items:baseline;gap:8px}
.card__m b{font-size:1.05rem;font-weight:500;color:var(--cu);letter-spacing:-.03em}
.card__m span{font-size:var(--t-micro);color:var(--ink-2)}
.card__meta .ph{flex-basis:100%;align-self:flex-start;margin-block-start:2px}

.dots{display:flex;gap:7px;margin-block-start:clamp(22px,2.6vw,32px)}
.dots button{width:40px;height:20px;display:grid;align-items:center}
.dots button::before{
  content:"";display:block;height:5px;border-radius:var(--rp);background:var(--rule-2);
  transform:scaleX(.7);transform-origin:100% 50%;
  transition:transform .4s var(--ease-out),background-color .34s var(--ease-out);
}
.dots button.is-on::before{background:var(--cu);transform:scaleX(1)}

/* ── mobile proof ───────────────────────────────────────────────── */
.mobile__grid{display:grid;gap:clamp(32px,5vw,56px);align-items:center}
@media (min-width:900px){.mobile__grid{grid-template-columns:minmax(0,1fr) minmax(0,.72fr)}}
.mobile__copy .marker{margin-block-end:20px}
.mobile__specs{display:flex;flex-wrap:wrap;gap:10px;margin-block-start:clamp(26px,3vw,36px)}
.mobile__specs li{
  display:flex;align-items:baseline;gap:9px;padding:11px 18px;border-radius:var(--rp);
  background:var(--glass);
  -webkit-backdrop-filter:blur(var(--blur));backdrop-filter:blur(var(--blur));
  border:1px solid var(--glass-line);border-top-color:var(--glass-edge);
  font-size:var(--t-xs);color:var(--ink-2);
}
.mobile__specs b{font-weight:500;color:var(--cu);letter-spacing:-.02em}
.mobile__vis{position:relative;display:flex;justify-content:center}
.phone{position:relative;width:min(300px,72vw);aspect-ratio:340/673}
/* one sprite, 16 frames stacked. With the sheet sized to 1600% of the frame,
   each step is an even slice of the 0-100% background-position range, so the
   scrub needs no pixel maths and survives any element width. */
.phone__turn{
  position:absolute;inset:0;z-index:1;
  background-image:url('./phone-turn.webp');
  background-repeat:no-repeat;
  background-size:100% 1600%;
  background-position:0 calc(var(--f,0) * (100% / 15));
}
.phone::after{
  content:"";position:absolute;z-index:0;left:14%;right:14%;bottom:-2%;height:2.6%;
  background:rgba(11,11,12,.16);border-radius:50%;filter:blur(12px);
}

/* the phone's screen — the demo's own mobile page, warped onto the glass.
   max-width has to be released: the global img cap would shrink the panel to
   the phone's own width while the homography still maps a 390x844 source,
   which leaves the keyed screen showing down one edge. */
.pscr{
  position:absolute;top:0;left:0;width:390px;height:844px;max-width:none;
  transform-origin:0 0;display:block;
  /* the glass is rounded, the screenshot is not — square corners lap over the
     bezel. Measured off the render's keyed screen: 29px of a 265px-wide
     screen, so ~43px in this 390-wide space, plus the 1.2% the panel is
     inflated by. The radius is in the panel's own space, so the matrix warps
     it into the same perspective as the rest of the page. */
  border-radius:44px;
}

/* ── process ────────────────────────────────────────────────────── */
.steps{position:relative;margin-block-start:clamp(44px,5.4vw,72px);display:grid;gap:14px;padding-inline-start:32px}
.steps__track{
  position:absolute;z-index:0;background:var(--rule);border-radius:var(--rp);
  inset-inline-start:7px;inset-block:10px auto;width:3px;height:calc(100% - 20px);overflow:hidden;
}
.steps__track b{display:block;width:100%;height:100%;background:var(--cu);transform:scaleY(0);transform-origin:50% 0}
.step{
  position:relative;padding:clamp(22px,2.4vw,28px) clamp(20px,2.2vw,26px);
  border-radius:var(--r4);
  background:var(--glass);
  -webkit-backdrop-filter:blur(var(--blur)) saturate(175%);
  backdrop-filter:blur(var(--blur)) saturate(175%);
  border:1px solid var(--glass-line);border-top-color:var(--glass-edge);
  box-shadow:var(--sh-1);
  transition:box-shadow .5s var(--ease-out);
}
.step.is-in{box-shadow:var(--sh-2)}
.step__d{
  display:inline-flex;font-family:var(--mono);font-size:var(--t-micro);font-weight:500;
  color:var(--cu);background:var(--cu-soft);padding:6px 12px;border-radius:var(--rp);
}
.step__t{margin-block-start:14px;font-size:var(--t-h3);font-weight:800;letter-spacing:-.028em}
.step__b{margin-block-start:10px;font-size:var(--t-xs);line-height:1.65;color:var(--ink-2);max-width:44ch}
.step__a{margin-block-start:16px;padding-block-start:14px;border-block-start:1px solid var(--rule);font-size:var(--t-micro);color:var(--ink-3)}
.step__a b{font-weight:600;color:var(--ink)}
@media (min-width:900px){
  .steps{grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.6vw,20px);padding-inline-start:0;padding-block-start:34px}
  .steps__track{inset-inline:0;inset-block-start:8px;width:100%;height:3px}
  .steps__track b{transform:scaleX(0);transform-origin:100% 50%}
}

/* ── guarantee (copper plate) ───────────────────────────────────── */
.guarantee__grid{display:grid;gap:clamp(28px,3.6vw,48px)}
@media (min-width:900px){.guarantee__grid{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);align-items:start}}
.guarantee__b{font-size:var(--t-lede);line-height:1.58;max-width:54ch}
.guarantee__r{margin-block-start:22px;font-size:var(--t-xs);line-height:1.7;color:var(--on-cu-2);max-width:54ch}
.ticks{
  display:grid;gap:0;padding:8px clamp(18px,2.2vw,26px);border-radius:var(--r4);
  background:var(--glass-cu);
  -webkit-backdrop-filter:blur(var(--blur));backdrop-filter:blur(var(--blur));
  border:1px solid rgba(255,255,255,.2);border-top-color:var(--glass-cu-edge);
}
.ticks li{display:flex;gap:14px;align-items:flex-start;padding-block:18px;font-size:var(--t-xs);line-height:1.55}
.ticks li + li{border-block-start:1px solid var(--rule-cu)}
.ticks .ic{width:18px;height:18px;margin-block-start:2px}

/* ── damaging admission ─────────────────────────────────────────── */
.ledger{display:grid;gap:12px}
.ledger li{
  display:grid;gap:8px clamp(24px,4vw,56px);
  padding:clamp(22px,2.6vw,30px) clamp(22px,2.4vw,30px);border-radius:var(--r4);
  background:var(--glass);
  -webkit-backdrop-filter:blur(var(--blur)) saturate(175%);
  backdrop-filter:blur(var(--blur)) saturate(175%);
  border:1px solid var(--glass-line);border-top-color:var(--glass-edge);
  box-shadow:var(--sh-1);
}
@media (min-width:820px){.ledger li{grid-template-columns:minmax(0,.8fr) minmax(0,1.35fr);align-items:baseline}}
.ledger h3{font-size:var(--t-h3);font-weight:700;letter-spacing:-.026em}
.ledger p{font-size:var(--t-xs);line-height:1.7;color:var(--ink-2);max-width:56ch}

/* ── pricing ────────────────────────────────────────────────────── */
.anchor{
  border-radius:var(--r4);padding:clamp(18px,2.2vw,24px);
  margin-block-end:clamp(26px,3vw,40px);
  background:var(--glass);
  -webkit-backdrop-filter:blur(var(--blur)) saturate(175%);
  backdrop-filter:blur(var(--blur)) saturate(175%);
  border:1px solid var(--glass-line);border-top-color:var(--glass-edge);
}
.anchor__l{font-size:var(--t-micro);font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);margin-block-end:14px}
.anchor ul{display:grid;gap:12px}
@media (min-width:700px){.anchor ul{grid-template-columns:1fr 1fr;gap:12px clamp(20px,3vw,44px)}}
.anchor li{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px;font-size:var(--t-xs)}
.anchor li span{color:var(--ink-2);min-width:9em}
.anchor li b{font-weight:500;letter-spacing:-.02em;text-decoration:line-through;text-decoration-color:var(--ink-3)}
.anchor li i{font-style:normal;font-size:var(--t-micro);color:var(--ink-3)}

.tiers{display:grid;gap:14px}
@media (min-width:900px){.tiers{grid-template-columns:repeat(3,1fr);gap:16px;align-items:start}}
.tier{
  position:relative;display:flex;flex-direction:column;
  padding:clamp(26px,3vw,36px) clamp(22px,2.4vw,30px);border-radius:var(--r4);
  background:var(--glass);
  -webkit-backdrop-filter:blur(var(--blur)) saturate(175%);
  backdrop-filter:blur(var(--blur)) saturate(175%);
  border:1px solid var(--glass-line);border-top-color:var(--glass-edge);
  box-shadow:var(--sh-1);
  transition:box-shadow .5s var(--ease-out),transform .5s var(--ease-out);
}
.tier:hover{box-shadow:var(--sh-2);transform:translateY(-3px)}
.tier--hi{
  background:var(--ink);color:var(--on-ink);border-color:rgba(255,255,255,.1);
  border-top-color:rgba(255,255,255,.18);box-shadow:var(--sh-3);
  -webkit-backdrop-filter:none;backdrop-filter:none;
}
@media (min-width:900px){.tier--hi{margin-block:-14px;padding-block:calc(clamp(26px,3vw,36px) + 14px)}}
.tier--hi:hover{box-shadow:var(--sh-3);transform:translateY(-5px)}
.tier__badge{
  position:absolute;inset-block-start:-11px;inset-inline-end:22px;
  background:var(--cu);color:#fff;font-size:var(--t-micro);font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;padding:6px 14px;border-radius:var(--rp);
  box-shadow:var(--sh-1);
}
.tier__n{font-size:var(--t-h3);font-weight:800;letter-spacing:-.028em}
.tier__p{margin-block-start:14px;font-size:clamp(2.1rem,3.6vw,2.9rem);font-weight:500;line-height:1;letter-spacing:-.05em}
.tier--hi .tier__p{color:var(--cu-lift)}
.tier__m{margin-block-start:10px;font-size:var(--t-micro);color:var(--ink-2)}
.tier--hi .tier__m{color:var(--on-ink-2)}
.tier__m i{font-style:normal}
.tier__f{margin-block-start:18px;padding-block-start:18px;border-block-start:1px solid var(--rule);font-size:var(--t-xs);line-height:1.6;color:var(--ink-2)}
.tier--hi .tier__f{border-block-start-color:var(--rule-ink);color:var(--on-ink-2)}
.tier__l{margin-block:20px 28px;display:grid;gap:11px}
.tier__l li{position:relative;padding-inline-start:20px;font-size:var(--t-xs);line-height:1.5}
.tier__l li::before{
  content:"";position:absolute;inset-inline-start:0;inset-block-start:.5em;
  width:8px;height:8px;border-radius:50%;background:var(--cu-soft);
  box-shadow:inset 0 0 0 2px var(--cu);
}
.tier--hi .tier__l li::before{background:transparent;box-shadow:inset 0 0 0 2px var(--cu-lift)}

/* "starts at" prefix on a from-price */
.tier__from{
  font-family:var(--sans);font-size:.34em;font-weight:600;letter-spacing:0;
  vertical-align:.46em;margin-inline-end:.28em;color:var(--ink-3);
}
.tier--hi .tier__from{color:var(--on-ink-2)}

/* line item that is required by law — must read as non-optional */
.tier__l li.is-req{
  margin-block:3px;padding-block:11px;padding-inline:34px 14px;
  border-radius:var(--r1);background:var(--cu-soft);
  box-shadow:inset 0 0 0 1px rgba(154,78,24,.22);
  font-weight:600;color:var(--ink);
}
.tier__l li.is-req::before{inset-inline-start:14px;inset-block-start:1.18em}
.tier--hi .tier__l li.is-req{
  background:var(--glass-cu);box-shadow:inset 0 0 0 1px var(--glass-cu-edge);
  color:var(--on-ink);
}
.req{
  display:inline-block;margin-inline-start:8px;padding:2px 9px;border-radius:var(--rp);
  background:var(--cu);color:var(--on-cu);
  font-size:var(--t-micro);font-weight:700;letter-spacing:.05em;white-space:nowrap;
}
.tier--hi .req{background:var(--cu-lift);color:var(--ink)}

.tier .btn{margin-block-start:auto}

.pricing__foot{margin-block-start:clamp(26px,3vw,38px);display:flex;flex-wrap:wrap;gap:8px 28px;align-items:baseline}
.pricing__re{font-size:var(--t-xs);color:var(--ink-2)}
.pricing__re strong{color:var(--ink);font-weight:600}
.pricing__terms{font-size:var(--t-micro);color:var(--ink-3)}
.pricing__math{flex:1 1 34ch;max-width:62ch;font-size:var(--t-xs);line-height:1.7;color:var(--ink-2)}
.pricing__math b{color:var(--ink);font-weight:600}
.pricing__excl{
  margin-block-start:clamp(18px,2vw,26px);padding-block-start:clamp(16px,1.8vw,22px);
  border-block-start:1px solid var(--rule);max-width:82ch;
  font-size:var(--t-xs);line-height:1.7;color:var(--ink-2);
}
.pricing__excl strong{color:var(--ink);font-weight:600}

/* optional monthly care plan — an add-on, deliberately not a fourth tier */
.care{
  margin-block-start:clamp(26px,3vw,40px);
  padding:clamp(24px,2.8vw,34px);border-radius:var(--r4);
  background:var(--glass);
  -webkit-backdrop-filter:blur(var(--blur)) saturate(175%);
  backdrop-filter:blur(var(--blur)) saturate(175%);
  border:1px solid var(--glass-line);border-top-color:var(--glass-edge);
  box-shadow:var(--sh-1);
  display:grid;gap:clamp(20px,2.4vw,30px);
}
@media (min-width:900px){
  .care{
    grid-template-columns:minmax(230px,1fr) 1.5fr minmax(190px,auto);
    align-items:start;gap:clamp(24px,3vw,44px);
  }
}
.care__tag{font-size:var(--t-micro);font-weight:600;letter-spacing:.09em;color:var(--cu);margin-block-end:10px}
.care__n{font-size:var(--t-h3);font-weight:800;letter-spacing:-.028em}
.care__p{margin-block-start:10px;font-size:clamp(1.7rem,2.6vw,2.2rem);font-weight:500;line-height:1;letter-spacing:-.05em}
.care__p i{font-family:var(--sans);font-style:normal;font-size:.4em;font-weight:600;letter-spacing:0;color:var(--ink-3)}
.care__f{margin-block-start:14px;font-size:var(--t-xs);line-height:1.6;color:var(--ink-2)}
.care__l{display:grid;gap:11px;align-content:start}
@media (min-width:620px){.care__l{grid-template-columns:1fr 1fr;gap:11px 24px}}
.care__l li{position:relative;padding-inline-start:20px;font-size:var(--t-xs);line-height:1.5;color:var(--ink-2)}
.care__l li::before{
  content:"";position:absolute;inset-inline-start:0;inset-block-start:.5em;
  width:8px;height:8px;border-radius:50%;background:var(--cu-soft);
  box-shadow:inset 0 0 0 2px var(--cu);
}
.care__cta{display:grid;gap:14px;justify-items:start}
.care__note{font-size:var(--t-micro);line-height:1.6;color:var(--ink-3);max-width:34ch}

/* ── faq ────────────────────────────────────────────────────────── */
.acc{display:grid;gap:10px}
.acc__i{
  border-radius:var(--r4);overflow:hidden;
  background:var(--glass);
  -webkit-backdrop-filter:blur(var(--blur)) saturate(175%);
  backdrop-filter:blur(var(--blur)) saturate(175%);
  border:1px solid var(--glass-line);border-top-color:var(--glass-edge);
  box-shadow:var(--sh-1);transition:box-shadow .4s var(--ease-out);
}
.acc__i.is-open{box-shadow:var(--sh-2)}
.acc__i h3{font-size:inherit;font-weight:inherit}
.acc__i button{
  width:100%;display:flex;align-items:flex-start;justify-content:space-between;
  gap:20px;padding:clamp(20px,2.2vw,26px) clamp(20px,2.2vw,28px);text-align:start;
  font-size:var(--t-h3);font-weight:600;letter-spacing:-.024em;line-height:1.35;
  transition:color .3s;
}
.acc__i button:hover{color:var(--cu)}
.acc__i button span{max-width:44ch}
.pm{
  position:relative;width:28px;height:28px;flex:none;margin-block-start:.1em;border-radius:50%;
  background:var(--cu-soft);color:var(--cu);
  transition:transform .5s var(--ease-out);
}
.pm::before,.pm::after{content:"";position:absolute;top:13px;left:7px;width:14px;height:2px;border-radius:2px;background:currentColor;transition:transform .44s var(--ease-out)}
.pm::after{transform:rotate(90deg)}
.acc__i button[aria-expanded="true"] .pm{transform:rotate(180deg)}
.acc__i button[aria-expanded="true"] .pm::after{transform:rotate(0)}
.acc__p{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease)}
.acc__i.is-open .acc__p{grid-template-rows:1fr}
.acc__p > div{overflow:hidden}
.acc__p p{
  padding:0 clamp(20px,2.2vw,28px) clamp(22px,2.4vw,28px);max-width:66ch;
  font-size:var(--t-xs);line-height:1.75;color:var(--ink-2);
  opacity:0;transition:opacity .4s ease-out;
}
.acc__i.is-open .acc__p p{opacity:1;transition-delay:.12s}

/* ── about ──────────────────────────────────────────────────────── */
.about__grid{display:grid;gap:clamp(30px,4vw,64px)}
@media (min-width:820px){.about__grid{grid-template-columns:minmax(0,.7fr) minmax(0,1fr);align-items:center}}
.portrait{
  position:relative;aspect-ratio:4/5;max-width:420px;border-radius:var(--r5);overflow:hidden;
  display:grid;place-items:center;
  background:var(--glass-thick);
  -webkit-backdrop-filter:blur(var(--blur)) saturate(175%);
  backdrop-filter:blur(var(--blur)) saturate(175%);
  border:1px solid var(--glass-line);border-top-color:var(--glass-edge);
  box-shadow:var(--sh-3);
}
.portrait img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.portrait__ph{
  display:flex;flex-direction:column;align-items:center;gap:18px;
  font-size:var(--t-micro);font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--cu);
}
.portrait__ph::before{
  content:"";width:88px;height:88px;border-radius:50%;
  border:2px dashed var(--cu);opacity:.42;
}
.portrait__ph::after{
  content:"1200 × 1500";direction:ltr;font-family:var(--mono);font-size:var(--t-micro);
  letter-spacing:0;text-transform:none;color:var(--ink-3);
}
.about__txt .marker{margin-block-end:18px}
.about__txt p:not(.marker){margin-block-start:18px;font-size:var(--t-body);line-height:1.72;color:var(--ink-2);max-width:56ch}
.about__txt .h2{margin-block-end:6px}

/* ── final cta ──────────────────────────────────────────────────── */
.final__grid{display:grid;gap:clamp(32px,5vw,40px);align-items:center}
@media (min-width:960px){.final__grid{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}}
.final__copy .marker{margin-block-end:20px}
.final__acts{display:flex;flex-wrap:wrap;gap:12px;margin-block-start:clamp(28px,3.2vw,40px)}
.final__note{margin-block-start:18px;font-size:var(--t-micro);color:var(--on-ink-3)}
.final__cap{
  display:flex;gap:12px;align-items:flex-start;
  margin-block-start:clamp(28px,3.2vw,40px);padding:18px 22px;border-radius:var(--r3);
  background:var(--glass-ink);border:1px solid rgba(255,255,255,.09);
  border-top-color:var(--glass-ink-edge);
  font-size:var(--t-micro);line-height:1.65;color:var(--on-ink-2);max-width:56ch;
}
.final__cap i{width:7px;height:7px;border-radius:50%;background:var(--cu-lift);flex:none;margin-block-start:.45em}
.final__vis{position:relative}
/* the tilt moved from the image element up to the whole machine, so the
   live screen overlay rotates with the photograph instead of sliding off it */
.final__vis .machine{transform:rotate(-3deg);opacity:1}
.final__vis .machine::after{display:none}
.final__vis img{width:100%;max-height:54vh;object-fit:contain}
@media (max-width:959px){.final__vis{max-width:400px;margin-inline:auto;order:-1}}

/* ── footer ─────────────────────────────────────────────────────── */
.foot{position:relative;z-index:1;padding:clamp(30px,4vw,44px) 0 clamp(26px,3vw,34px)}
.foot__in{
  display:flex;flex-wrap:wrap;gap:12px 26px;align-items:center;
  padding:22px clamp(20px,2.4vw,30px);border-radius:var(--r4);
  background:var(--glass);
  -webkit-backdrop-filter:blur(var(--blur)) saturate(175%);
  backdrop-filter:blur(var(--blur)) saturate(175%);
  border:1px solid var(--glass-line);border-top-color:var(--glass-edge);
}
.foot__brand{font-weight:700;font-size:.9375rem;letter-spacing:-.025em;white-space:nowrap}
.foot__note{font-size:var(--t-micro);color:var(--ink-2);margin-inline-end:auto}
/* the accessibility statement has to be findable from every page without
   opening the widget — regulation expects a link, not only a menu */
.foot__a11y{
  font-size:var(--t-micro);font-weight:600;color:var(--cu);
  text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;
}
.foot__a11y:hover{color:var(--cu-deep)}
.foot__y{font-size:var(--t-micro);color:var(--ink-3)}

/* ── sticky mobile bar ──────────────────────────────────────────── */
.stick{
  position:fixed;inset-inline:12px;inset-block-end:calc(12px + env(safe-area-inset-bottom));
  z-index:55;transform:translateY(calc(100% + 24px));
  transition:transform .5s var(--ease);
}
.stick.is-on{transform:none}
@media (min-width:1000px){.stick{display:none}}

/* ── reveal ─────────────────────────────────────────────────────── */
.reveal,[data-split] .w{opacity:0}
.reveal{transform:translateY(20px)}
.reveal.is-in{
  opacity:1;transform:none;
  transition:opacity .75s ease-out var(--d,0ms),transform .95s var(--ease-out) var(--d,0ms);
}
[data-split]{overflow:hidden}
[data-split] .w{display:inline-block;transform:translateY(105%)}
[data-split].is-in .w{
  opacity:1;transform:none;
  transition:opacity .5s ease-out var(--wd),transform .9s var(--ease-out) var(--wd);
}

/* ══════════════════════════════════════════════════════════════════
   SCROLL-DRIVEN SCENES

   Every scene is one scalar custom property (0 → 1) written by the
   scroll driver in main.js §3. CSS does all the interpolation, so the
   JS stays a position sensor and never touches a style beyond that
   one number.

   Each scalar DEFAULTS TO ITS FINISHED VALUE here. JS only ever moves
   it backwards to 0 once it has taken control. That means the page
   without JavaScript, and the page under prefers-reduced-motion, both
   render the completed end state instead of an empty one.

   Nothing below animates a layout property.
   ══════════════════════════════════════════════════════════════════ */

/* ── the copper thread — one spine, drawn by page progress ────────
   Copper is licensed here because progress is a measurement. */
.thread{
  position:fixed;z-index:3;pointer-events:none;
  inset-block:calc(var(--nav-h) + 54px) 30px;
  inset-inline-start:clamp(9px,1.4vw,22px);
  width:2px;border-radius:var(--rp);
  background:linear-gradient(to bottom,transparent,var(--rule) 10%,var(--rule) 90%,transparent);
  opacity:0;transition:opacity .8s var(--ease-out) .6s;
  --tp:0;
}
.is-ready .thread{opacity:1}
.thread i{
  display:block;width:100%;height:100%;border-radius:var(--rp);
  background:linear-gradient(to bottom,var(--cu),var(--cu) 78%,rgba(154,78,24,.25));
  transform:scaleY(var(--tp));transform-origin:50% 0;
}
/* the leading node — where the reader actually is */
.thread::after{
  content:"";position:absolute;inset-inline-start:-2px;top:0;
  width:6px;height:6px;border-radius:50%;background:var(--cu);
  box-shadow:0 0 0 4px rgba(154,78,24,.14);
  transform:translateY(calc(var(--tp) * var(--th,0px)));
}
@media (max-width:1100px){.thread{display:none}}

/* ── blueprint → pixel ─────────────────────────────────────────────
   Real numbers from this design system (--wrap, --r5), drawn on load
   and dissolved the moment the machine starts breathing. Physical
   left/right: the guides are pinned to a photograph. */
.bp{position:absolute;inset:0;z-index:0;pointer-events:none;color:var(--cu)}
.bp__v,.bp__h{position:absolute;background:currentColor;opacity:.4}
.bp__v{left:var(--x);top:1%;bottom:1%;width:1px;transform:scaleY(0);transform-origin:50% 0}
.bp__h{top:var(--y);left:0;right:0;height:1px;transform:scaleX(0);transform-origin:100% 50%}
.is-ready .bp__v,.is-ready .bp__h{transition:transform .8s var(--ease-out)}
.is-ready .bp__v{transform:scaleY(1)}
.is-ready .bp__h{transform:scaleX(1)}
.is-ready .bp__v:nth-of-type(1){transition-delay:.12s}
.is-ready .bp__v:nth-of-type(2){transition-delay:.19s}
.is-ready .bp__v:nth-of-type(3){transition-delay:.26s}
.is-ready .bp__h:nth-of-type(1){transition-delay:.33s}
.is-ready .bp__h:nth-of-type(2){transition-delay:.4s}
.bp__d{
  position:absolute;display:flex;align-items:center;gap:6px;
  font-size:var(--t-micro);font-weight:500;letter-spacing:.06em;
  color:var(--cu);opacity:0;
}
.bp__d b{font-weight:500;font-size:var(--t-micro)}
/* parked in the two corners the photographed machine does not cover —
   a label hidden behind the monitor is a label that was never drawn */
.bp__d--w{top:calc(16% - 20px);right:1%}
.bp__d--r{top:calc(78% + 9px);left:2.5%}
.is-ready .bp__d{opacity:.9;transition:opacity .5s ease-out .5s}
/* One deterministic life instead of a race against the machine's own
   wake timer: draw, hold long enough to be read, then dissolve as the
   real screen takes over. */
.is-ready .bp{animation:bpLife 2.9s var(--ease-out) forwards}
@keyframes bpLife{0%,64%{opacity:1}100%{opacity:0}}
@media (max-width:640px){.bp{display:none}}

/* ── the speed race ────────────────────────────────────────────────
   The 53% statistic, demonstrated instead of asserted. */
.race{
  --r:1;
  margin-block-start:clamp(34px,4vw,54px);
  padding:clamp(20px,2.4vw,30px);border-radius:var(--r4);
  background:var(--glass-ink);
  -webkit-backdrop-filter:blur(var(--blur));backdrop-filter:blur(var(--blur));
  border:1px solid rgba(255,255,255,.09);border-top-color:var(--glass-ink-edge);
}
.race__cap{font-size:var(--t-micro);font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--on-ink-3)}
.race__rows{display:grid;gap:12px;margin-block-start:18px}
.race__row{
  display:grid;grid-template-columns:minmax(0,1fr);gap:10px;align-items:center;
  padding:14px 16px;border-radius:var(--r3);
  background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.07);
}
@media (min-width:720px){
  .race__row{grid-template-columns:minmax(0,10.5rem) minmax(0,1fr) auto;gap:20px}
}
.race__who{font-size:var(--t-xs);color:var(--on-ink-2)}
.race__view{
  position:relative;display:block;height:56px;border-radius:var(--r1);overflow:hidden;
  background:#F7F6F3;
}
.race__time{font-size:1.05rem;font-weight:500;letter-spacing:-.03em;color:var(--on-ink-3);text-align:end}
.race__row--fast .race__time{color:var(--cu-lift)}

/* each row reads the shared scalar through its own window */
.race__row--fast{--rp:clamp(0,calc(var(--r) / .2),1)}
.race__row--slow{--rp:clamp(0,calc((var(--r) - .52) / .48),1)}

.race__paint{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:5px;padding:0 12px}
.race__paint s{
  display:block;height:5px;border-radius:99em;background:#D8D4CB;text-decoration:none;
  transform-origin:100% 50%;
}
.race__paint s:nth-child(1){width:34%;height:8px;background:#B9B4A9;--k:0}
.race__paint s:nth-child(2){width:68%;--k:.3}
.race__paint s:nth-child(3){width:52%;--k:.5}
/* in normal flow, so the action stacks under the text instead of landing
   on top of the last line */
.race__paint u{
  width:44px;height:14px;margin-block-start:4px;
  border-radius:99em;background:#B9B4A9;text-decoration:none;--k:.72;
}
.race__row--fast .race__paint u{background:var(--cu)}
.race__paint s,.race__paint u{
  opacity:clamp(0,calc((var(--rp) - var(--k)) / .16),1);
  transform:scaleX(clamp(.82,calc(.82 + (var(--rp) - var(--k)) / .16 * .18),1));
}
.race__paint u{transform:none}
/* the spinner is the whole point of the slow row: nothing but waiting.
   It has to be gone the instant the first pixel paints, or the row claims
   to be both loading and loaded. */
.race__spin{
  position:absolute;top:50%;left:50%;width:20px;height:20px;margin:-10px 0 0 -10px;
  border-radius:50%;border:2px solid #DCD8CF;border-top-color:#8E897E;
  opacity:calc(1 - clamp(0,calc(var(--rp) / .1),1));
  animation:spin 900ms linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.race__note{margin-block-start:16px;font-size:var(--t-micro);color:var(--on-ink-3);max-width:52ch}

/* ── the decision-morph on the before/after ────────────────────────
   The bad site does not get wiped away — it loses its colour as the
   built one arrives from the right, with the reading direction. */
.cmp{--m:1}
/* The slider writes --p as an inline style and takes over from here the
   moment it is touched; this keeps the split coherent before that. */
.cmp__frame{--p:calc((100 - var(--m) * 50) * 1%)}
.cmp__side--bad{
  filter:saturate(calc(1 - var(--m) * .5)) contrast(calc(1 - var(--m) * .05));
  transition:filter .2s linear;
}
/* a copper edge on the leading line while the morph is running,
   fading out as the control becomes a control */
.cmp__handle::after{
  content:"";position:absolute;inset-block:0;inset-inline:-1px;
  background:var(--cu);opacity:calc((1 - var(--m)) * .9);
  box-shadow:0 0 18px 3px rgba(154,78,24,.5);
}

/* ── the phone's turn ──────────────────────────────────────────────
   The rotation is real, not a CSS tilt: --f steps through frames of a
   rendered turn. All that is left here is the arrival, and the shadow
   answering it — the phone lands as it comes square to the reader. */
.mobile__vis{perspective:1400px;perspective-origin:50% 45%}
.phone{
  --f:0;
  transform:translate3d(0,calc((15 - var(--f)) * .35%),0);
}
.phone::after{
  opacity:calc(.4 + var(--f) * .04);
  transform:scaleX(calc(.78 + var(--f) * .015));
}

/* ── the guarantee, as an object that gets pressed in ─────────────── */
.guarantee__side{display:grid;gap:clamp(20px,2.4vw,28px);align-content:start}
.seal{--s:1;display:flex;justify-content:center}
.seal__disc{
  position:relative;display:grid;place-items:center;gap:0;
  width:clamp(132px,15vw,158px);aspect-ratio:1;border-radius:50%;
  background:var(--bone);color:var(--cu);
  box-shadow:
    0 calc(2px + (1 - var(--s)) * 26px) calc(6px + (1 - var(--s)) * 40px) rgba(11,11,12,calc(.18 + (1 - var(--s)) * .16)),
    inset 0 -1px 0 rgba(11,11,12,.06);
  transform:scale(calc(1.32 - var(--s) * .32)) rotate(calc((1 - var(--s)) * -13deg));
  opacity:clamp(0,calc(var(--s) / .3),1);
}
/* the impact ring — a consequence of landing, not decoration */
.seal__disc::after{
  content:"";position:absolute;inset:0;border-radius:50%;
  border:1px solid var(--bone);
  transform:scale(calc(1 + clamp(0,calc((var(--s) - .68) / .32),1) * .42));
  opacity:calc((1 - clamp(0,calc((var(--s) - .68) / .32),1)) * clamp(0,calc((var(--s) - .68) / .08),1) * .8);
}
.seal__art{position:absolute;inset:0;width:100%;height:100%}
.seal__ring{opacity:.26}
/* the perforated ring rolls into place as the seal lands — the drawn
   element, kept off the centre so it never fights the number */
.seal__ring2{
  opacity:.55;stroke-dasharray:2 5;
  stroke-dashoffset:calc((1 - clamp(0,calc((var(--s) - .45) / .5),1)) * 40);
  rotate:calc((1 - clamp(0,calc((var(--s) - .45) / .5),1)) * -25deg);
  transform-origin:50% 50%;
}
.seal__t{display:grid;justify-items:center;gap:4px;text-align:center}
.seal__t b{font-size:clamp(1.9rem,2.6vw,2.3rem);font-weight:500;letter-spacing:-.05em;line-height:1;color:var(--cu)}
.seal__t span{font-size:var(--t-micro);font-weight:600;letter-spacing:.06em;color:var(--ink-2)}

/* ── the message writes itself ─────────────────────────────────────
   The single action on the page, pre-played on the machine at rest. */
.scr--wa{background:#EFECE6;display:flex;flex-direction:column;--w:1}
/* Type is scaled for a 1000 × 600 panel that is mapped onto a photographed
   display and lands around 40% of that on screen — the same reason the
   hero screen sets a 58px headline. */
.wa__bar{
  flex:none;height:96px;display:flex;align-items:center;gap:20px;padding-inline:32px;
  background:#0E0E10;color:#F5F4F1;
}
.wa__av{width:54px;height:54px;border-radius:50%;background:var(--cu);flex:none}
.wa__id{display:grid;gap:2px}
.wa__id b{font-size:27px;font-weight:700;letter-spacing:-.025em}
.wa__id em{font-style:normal;font-size:19px;color:rgba(245,244,241,.6)}
.wa__thread{flex:1;display:flex;flex-direction:column;gap:18px;padding:30px 32px 0;align-items:flex-start}
.wa__b{
  max-width:70%;padding:20px 26px;border-radius:28px;font-size:25px;line-height:1.42;
  opacity:clamp(0,calc((var(--w) - var(--k)) / .06),1);
  translate:0 calc((1 - clamp(0,calc((var(--w) - var(--k)) / .06),1)) * 12px);
}
.wa__b--in{background:#fff;color:#0B0B0C;border-start-start-radius:8px}
.wa__b--out{
  align-self:flex-end;background:var(--cu);color:#fff;border-start-end-radius:8px;
  position:relative;display:flex;flex-wrap:wrap;gap:0 .32em;padding-inline-end:76px;
}
.wa__w{opacity:clamp(0,calc((var(--w) - var(--k)) / .04),1)}
.wa__ticks{
  position:absolute;inset-inline-end:22px;inset-block-end:16px;width:28px;height:17px;
  color:#fff;opacity:calc(clamp(0,calc((var(--w) - .78) / .08),1) * .85);
}
.wa__ticks svg{width:100%;height:100%}
.wa__compose{flex:none;display:flex;align-items:center;gap:18px;padding:24px 32px 30px}
.wa__field{
  flex:1;height:68px;border-radius:99em;background:#fff;display:flex;align-items:center;
  padding-inline:28px;
}
.wa__caret{
  width:3px;height:30px;background:var(--cu);
  /* blinks only while there is still something to type */
  opacity:calc(1 - clamp(0,calc((var(--w) - .72) / .06),1));
  animation:caret 1.05s steps(1,end) infinite;
}
@keyframes caret{0%,49%{translate:0 0;scale:1 1}50%,100%{scale:1 0}}
.wa__send{
  width:68px;height:68px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--cu);color:#fff;
  scale:calc(.92 + clamp(0,calc((var(--w) - .72) / .1),1) * .08);
}
.wa__send svg{width:32px;height:32px}

/* Start states. Applied only when the inline head script has confirmed
   that scripting is live AND motion is not being reduced — so the flash
   of a finished scene snapping back to its start can never happen, and
   both the no-JS and reduced-motion renders keep the completed page. */
.scenes .race{--r:0}
.scenes .cmp{--m:0}
.scenes .phone{--fly:0}
.scenes .seal{--s:0}
.scenes .scr--wa{--w:0}
.thread{display:none}
.scenes .thread{display:block}

/* the build's four stages are the four days — the steps keep up */
.step.is-hot{border-color:rgba(154,78,24,.28)}
.step.is-hot .step__d{background:var(--cu);color:#fff}
.step__d{transition:background .45s var(--ease-out),color .45s var(--ease-out)}

/* ── hero exit: the camera pulls back, the ground does not ────────── */
.hero{perspective:1600px;perspective-origin:50% 0}
.hero__stage{
  --dolly:0;
  transform-origin:50% 0;
  transform:
    translate3d(0,calc(var(--dolly) * -64px),0)
    rotateX(calc(var(--dolly) * 7deg))
    scale(calc(1 - var(--dolly) * .07));
  opacity:calc(1 - var(--dolly) * .45);
}
.ambient{--amb:0;transform:translate3d(0,calc(var(--amb) * 46px),0)}

/* ── accessibility preferences ──────────────────────────────────── */
@media (prefers-reduced-transparency:reduce){
  :root{
    --glass:rgba(252,251,249,.97);
    --glass-thick:rgba(255,255,255,.99);
    --glass-ink:rgba(28,28,30,.97);
    --glass-cu:rgba(122,60,18,.92);
  }
  .ambient{display:none}
  .nav__in,.nav__sheet,.specs,.chip,.tblwrap,.tabs,.step,.ledger li,.anchor,.care,
  .tier,.acc__i,.portrait,.foot__in,.btn--glass,.btn--glass-ink,.arw,
  .cmp__grip,.cmp__tag,.cmp__hint,.mobile__specs li,.ticks,.final__cap,.stats__i,
  .race{
    -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
  }
}
@media (prefers-contrast:more){
  :root{--ink-2:#2A2823;--ink-3:#454239;--rule:#BFBBB0;--rule-2:#9C978A;--cu:#7E3D10}
  .nav__in,.specs,.step,.tier,.acc__i,.ledger li,.tblwrap,.foot__in,.anchor,.care{
    background:#FFF;border-color:var(--rule-2);
  }
  .race{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.34)}
  .race__row{border-color:rgba(255,255,255,.26)}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;transition-delay:0ms!important;
  }
  .reveal,[data-split] .w,.hero__h .ln > span,.hero__sub,.hero__acts,.specs,
  .marker--top,.machine,.chip,.scr__eyebrow,.scr__h span,.scr__p,.scr__acts,
  .scr__note,.scr__stats,.scr__nav,.pscr__eyebrow,.pscr__h span,.pscr__p,.pscr__cta,
  .pscr__tags,.pscr__meter{opacity:1!important;transform:none!important}
  .hero__h .rule{transform:scaleX(1)!important}
  .steps__track b{transform:none!important}
  .chip__bar i{transform:scaleX(1)!important}
  /* the blueprint is dissolved by the machine waking, which reduced motion
     skips — so it never gets drawn in the first place */
  .bp{display:none}
  .race__spin,.wa__caret{animation:none!important;opacity:0!important}
  .seal__disc,.phone,.hero__stage{transform:none!important}
  .seal__tick{stroke-dashoffset:0!important}
}