/* ============================================================
   VELORA by KMATS — POWER ON
   One system, two grounds.

   KMATS is paper: #faf8f4 ground, ember teal accent.
   Velora is ink:  #131211 ground, emerald accent.

   The page opens on KMATS and inverts once, at the fold, into
   Velora. Teal never appears after the inversion; emerald never
   appears before it. That single swap is the brand relationship
   — studio hands the page to the product — and it is why the
   two palettes live in one file instead of two.

   Ink values are the shipped app's dark theme (ui/style.css).
   Paper values are kmats.in's "Ink & Ember" system (App.css).
   ============================================================ */

:root{
  /* --- Velora: ink ------------------------------------------ */
  --void:#131211;
  --raise:#191817;
  --card:#1b1a18;
  --wash:#232120;
  --hairline:#2b2825;
  --hairline-hi:#3a3632;
  --ink:#f2efe9;
  --stone:#9d968d;
  --dim:#6f6963;
  --emerald:#2bbd82;
  --emerald-deep:#17a56d;
  --amber:#c9a227;
  --danger:#e0655c;
  --silver:#a8b4bd;

  /* --- KMATS: paper ----------------------------------------- */
  --paper:#faf8f4;
  --paper-raise:#ffffff;
  --paper-muted:#f1ede6;
  --paper-rule:#e4dfd7;
  --graphite:#161514;
  --graphite-soft:#6b6660;
  --ember:#0f7264;

  --font-display:"Clash Display","Hanken Grotesk",ui-sans-serif,system-ui,sans-serif;
  --font-sans:"Hanken Grotesk",ui-sans-serif,system-ui,sans-serif;
  --font-mono:"Geist Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;

  --gutter:clamp(1.25rem,5vw,4rem);
  --maxw:1280px;
  /* Height of the fixed bar. Anchor targets are padded past it so a
     jump to #editions does not land the heading behind the nav. */
  --nav-h:4.75rem;
  --rule:1px solid var(--hairline);

  --ease-out:cubic-bezier(.16,1,.3,1);
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
/* Anchor scrolling is animated in site.js, not here. scroll-behavior is
   forced to auto by the browser under an OS reduced-motion setting, which
   turned every nav click into an instant jump with no way to opt back in.
   scroll-padding still covers the cases JS does not drive (find-in-page,
   a focused element scrolled into view) so nothing lands behind the bar. */
html{
  scroll-padding-top:calc(var(--nav-h) + 1.5rem);
  max-width:100%;overflow-x:clip;
}

body{
  margin:0;background:var(--void);color:var(--ink);
  font-family:var(--font-sans);line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:clip;max-width:100%;
}

/* Film grain. The same device kmats.in uses, so both grounds
   share a surface. Opacity is driven by scroll during the
   inversion — paper carries less grain than ink. */
body::after{
  content:"";position:fixed;inset:0;z-index:400;pointer-events:none;
  opacity:var(--grain,.05);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

img,svg,picture,video{display:block;max-width:100%;}
figure{margin:0;}
a{color:inherit;}
button{font:inherit;color:inherit;}

::selection{background:var(--emerald);color:var(--void);}

:where(a,button,input,summary):focus-visible{
  outline:2px solid var(--emerald);outline-offset:3px;border-radius:2px;
}

/* ============================================================
   TYPE
   ============================================================ */
.mono{
  font-family:var(--font-mono);font-size:.66rem;font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;color:var(--stone);
  margin:0;
}
.mono--lead{color:var(--emerald);}
.eyebrow{margin:0 0 1.5rem;display:flex;align-items:center;gap:.7rem;}
.eyebrow i{
  width:6px;height:6px;border-radius:50%;background:currentColor;
  flex:none;display:block;
}

.d0{
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(3.4rem,11vw,9rem);line-height:.88;letter-spacing:-.045em;
  margin:0;text-wrap:balance;
}
.d1{
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(2.35rem,8vw,6.5rem);line-height:.92;letter-spacing:-.04em;
  margin:0;text-wrap:balance;
}
.d2{
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(1.85rem,5.5vw,4.25rem);line-height:.96;letter-spacing:-.035em;
  margin:0 0 1.5rem;text-wrap:balance;
}
.d3{
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(1.35rem,2.6vw,1.85rem);line-height:1.1;letter-spacing:-.02em;
  margin:0 0 .5rem;
}
em{font-style:normal;color:var(--emerald);}
.lead{
  margin:0;color:var(--stone);font-size:clamp(1rem,1.6vw,1.15rem);
  max-width:54ch;text-wrap:pretty;
}
.fine{color:var(--stone);font-size:.9rem;}
.num{font-family:var(--font-mono);font-variant-numeric:tabular-nums;}

/* ============================================================
   LAYOUT
   ============================================================ */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter);width:100%;}
.band{padding:clamp(4rem,8.5vw,6.75rem) 0;position:relative;}
.band--hair{border-top:var(--rule);}
.split{display:grid;gap:clamp(2rem,6vw,5rem);grid-template-columns:1fr;align-items:center;}
@media(min-width:920px){
  .split{grid-template-columns:1fr 1fr;}
  .split--wide{grid-template-columns:1.15fr .85fr;}
}

/* ============================================================
   THE DECK — everything Velora. Rides above the sticky studio.
   ============================================================ */
/* A crisp top edge, not a soft smear. The studio doesn't dissolve
   into the deck, it gets switched off by it. */
.deck{position:relative;z-index:1;background:var(--void);}

/* ============================================================
   NAV
   ============================================================ */
/* The bar is visible on every page from the first pixel. It used
   to start at translateY(-100%) and wait for motion.js to add
   .is-live, which left hard-truth, nerd and anything added later
   with a nav parked permanently off-screen. */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:300;
  display:flex;align-items:center;gap:1.5rem;
  padding:1rem var(--gutter);
  transition:transform .45s var(--ease-out),background .3s ease,border-color .3s ease;
  border-bottom:1px solid var(--hairline);
  background:var(--void);
  backdrop-filter:blur(14px);
}
/* sub-pages wrap their nav contents; the home page does not */
.nav__in{
  display:flex;align-items:center;gap:1.5rem;width:100%;
  max-width:var(--maxw);margin:0 auto;padding:0;
}
/* inline <use> of the sprite, so the wordmark takes the ink colour
   from here instead of falling back to black */
.nav__mark{margin-right:auto;line-height:0;color:var(--ink);}
.nav__mark svg{height:15px;width:auto;display:block;}
.foot__mark{height:20px;width:auto;color:var(--ink);}
.nav__links{display:none;gap:1.75rem;align-items:center;}
@media(min-width:860px){.nav__links{display:flex;}}
.nav__links a{
  font-family:var(--font-mono);font-size:.63rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--stone);text-decoration:none;
  transition:color .2s ease;
}
.nav__links a:hover{color:var(--ink);}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.65rem;
  font-family:var(--font-mono);font-size:.68rem;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;
  padding:1.15rem 2.2rem;border-radius:5px;border:1px solid transparent;
  /* a .btn on a real <button> inherited the UA's grey button chrome,
     because only the filled variants ever set a background */
  background:transparent;-webkit-appearance:none;appearance:none;
  cursor:pointer;text-decoration:none;white-space:nowrap;
  transition:background .2s ease,color .2s ease,border-color .2s ease,transform .15s ease;
}
.btn:active{transform:translateY(1px);}
.btn--fill{background:var(--ink);color:var(--void);}
.btn--fill:hover{background:#fff;}
.btn--go,
.btn--solid{
  background:var(--emerald);color:#08110d;
  transition:background .2s ease,color .2s ease,border-color .2s ease,transform .18s cubic-bezier(0.25,1,0.5,1),box-shadow .2s ease;
  will-change:transform;
}
.btn--go:hover,
.btn--solid:hover{background:#35d494;box-shadow:0 8px 24px -4px rgba(43,189,130,.45);}
.btn--ghost{border-color:var(--hairline-hi);color:var(--ink);}
.btn--ghost:hover{border-color:var(--ink);background:rgba(242,239,233,.04);}
.btn--sm{padding:.8rem 1.4rem;font-size:.62rem;}
.btn--wide{
  width:100%;display:block;text-align:center;
  white-space:normal;line-height:1.35;box-sizing:border-box;
}
.btn--wide > *{
  display:inline;vertical-align:baseline;
}
.btn[disabled]{opacity:.45;cursor:not-allowed;}

/* ============================================================
   ACT 1 — POWER ON  (hero)
   ============================================================ */
.hero{
  min-height:100svh;display:flex;align-items:center;
  padding:clamp(6rem,14vh,9rem) 0 clamp(3rem,8vh,5rem);
  border-bottom:var(--rule);
}
.hero__grid{
  display:grid;gap:clamp(2.5rem,6vw,4.5rem);grid-template-columns:1fr;
  align-items:center;
}
@media(min-width:1000px){.hero__grid{grid-template-columns:1.05fr .95fr;}}

/* the boot rail — mono status lines that arrive in sequence */
.boot{
  display:grid;gap:.4rem;margin:0 0 2rem;padding:0;list-style:none;
  border-left:1px solid var(--hairline);padding-left:1rem;
}
.boot li{
  font-family:var(--font-mono);font-size:.66rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim);
  opacity:0;transform:translateX(-6px);
}
.boot li b{color:var(--emerald);font-weight:500;}

/* d1's full scale is built for a full-bleed measure. In the hero's
   narrower column it breaks to four words a line, so it is capped
   here rather than globally. */
.hero h1{
  margin:0 0 1.5rem;
  font-size:clamp(2.6rem,5.6vw,4.6rem);
}
.hero .lead{margin-bottom:2.25rem;}
.hero__acts{display:flex;flex-wrap:wrap;gap:.85rem;margin-bottom:2.5rem;}

.ticks{
  display:grid;gap:.55rem;margin:0;padding:0;list-style:none;
  border-top:var(--rule);padding-top:1.5rem;
}
@media(min-width:560px){.ticks{grid-template-columns:1fr 1fr;}}
.ticks li{
  font-family:var(--font-mono);font-size:.63rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--stone);
  display:flex;align-items:center;gap:.6rem;
}
.ticks li::before{
  content:"";width:5px;height:5px;border-radius:50%;
  background:var(--emerald);flex:none;
}

/* ---------- PHOTOGRAPHY ----------
   The renders are lit on a grey studio sweep that is lighter than
   this page. Boxed in a bordered card they read as a grey rectangle
   floating on black. Masked, the sweep dissolves and only the drive
   survives — the object appears to sit on the page itself.
   No card, no border, no radius: the product is the frame. */
.ph{position:relative;margin:0;}
.ph img{width:100%;height:auto;}
.ph--melt img{
  -webkit-mask-image:radial-gradient(ellipse 72% 68% at 50% 50%,#000 30%,rgba(0,0,0,.55) 58%,transparent 78%);
  mask-image:radial-gradient(ellipse 72% 68% at 50% 50%,#000 30%,rgba(0,0,0,.55) 58%,transparent 78%);
}
.ph__read{
  display:flex;justify-content:space-between;align-items:center;gap:1rem;
  flex-wrap:wrap;margin-top:.5rem;
}

/* the hero drive runs larger than its column and bleeds right, so the
   object breaks the grid instead of politely sitting inside it */
.plate{position:relative;}
@media(min-width:1000px){
  .plate{width:128%;margin-right:-28%;}
}

/* USB contact pins — reused from the gate. Light in sequence. */
.pins{display:flex;gap:5px;}
.pin{
  width:20px;height:4px;border-radius:1px;background:var(--hairline-hi);
  transition:background .3s ease,box-shadow .3s ease;
}
.pin.is-live{background:var(--emerald);box-shadow:0 0 10px rgba(43,189,130,.6);}

/* ============================================================
   THE SEQUENCE — pinned canvas teardown
   80 frames painted to a canvas, frame index driven by scroll.
   The same technique Apple uses on its product pages: an image
   sequence, not WebGL. Deterministic, no GPU risk, and it keeps
   the studio lighting the renders were made with.
   ============================================================ */
.seq{position:relative;background:var(--void);}
.seq__pin{
  height:100svh;display:grid;place-items:center;
  position:relative;overflow:hidden;
}
.seq__stage{
  position:relative;width:min(100%,1180px);
  padding:0 var(--gutter);
}
.seq__canvas{
  display:block;width:100%;height:auto;aspect-ratio:2.27;
  /* The vignette used to be baked into the frames. Darkening the edges
     at encode compresses the value range and quantises new plateaus
     into the studio gradient -- measured 29 px -> 44 px widest flat
     run, worse contouring than doing nothing. It lives here now, where
     it costs no bit depth.

     The edge fade stays two intersected linears rather than a radial:
     at full separation the shell reaches 95% of frame width, so any
     radial strong enough to hide the boundary clips the product. */
  -webkit-mask-image:
    linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%),
    linear-gradient(180deg,transparent 0,#000 6%,#000 94%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:
    linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%),
    linear-gradient(180deg,transparent 0,#000 6%,#000 94%,transparent 100%);
  mask-composite:intersect;
}
.seq__intro{
  position:absolute;left:var(--gutter);top:clamp(5rem,12vh,8rem);
  /* 26ch was measured when the canvas was a boxed 1180px column. Now
     that the frame is full-bleed the heading renders at 68px inside a
     233px box, so "subscription" alone overruns the measure and the
     block sets one word per line. The overlay sits in the empty upper
     left of the frame, so it gets a real measure and type scaled to it. */
  max-width:clamp(18rem,30vw,27rem);z-index:3;pointer-events:none;
}
.seq__intro h2{margin:0 0 .75rem;}
.seq__intro .d2{font-size:clamp(2rem,3.6vw,3.1rem);line-height:.98;}

/* ---- callouts ----
   Component classes only. The supplier has not confirmed controller
   or NAND part numbers, so nothing here states one. When the markings
   arrive these labels get the exact parts — and not before. */
.call{
  /* The callout spans the canvas box rather than being a small box
     parked next to its part, because the leader now has to reach
     diagonally across the frame. inset matches the stage's gutter so
     the percentage coordinates are canvas-relative, not stage-relative. */
  position:absolute;inset:0;z-index:4;pointer-events:none;
  opacity:0;transform:translateY(6px);
  transition:opacity .45s ease,transform .45s ease;
}
.call__lead{
  /* the leader runs from a label outside the canvas to a dot inside
     it, so the svg has to paint past its own box */
  position:absolute;inset:0;width:100%;height:100%;overflow:visible;
}
.call__lead line{
  stroke:var(--emerald);stroke-width:1.2;vector-effect:non-scaling-stroke;
  opacity:.4;
  stroke-dasharray:300;
  stroke-dashoffset:300;
  transition:stroke-dashoffset .6s cubic-bezier(0.16,1,0.3,1);
}
.call.is-active .call__lead line{
  stroke-dashoffset:0;
}
.call__dot{
  position:absolute;left:var(--dx);top:var(--dy);
  width:7px;height:7px;margin:-3.5px 0 0 -3.5px;border-radius:50%;
  background:var(--emerald);box-shadow:0 0 0 4px rgba(43,189,130,.16);
}
.call__dot::before{
  content:"";position:absolute;inset:-3px;border-radius:50%;
  border:1.5px solid var(--emerald);opacity:0;pointer-events:none;
}
.call.is-active .call__dot::before{
  animation:radar-pulse 2.2s cubic-bezier(0.15,0.85,0.35,1) infinite;
}
@keyframes radar-pulse{
  0%{transform:scale(1);opacity:.85;}
  100%{transform:scale(3.8);opacity:0;}
}
.call__txt{
  position:absolute;left:var(--lx);
  font-family:var(--font-mono);font-size:.62rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink);white-space:nowrap;
}
.call__txt small{
  display:block;margin-top:.3rem;letter-spacing:.04em;text-transform:none;
  color:var(--stone);font-size:.72rem;font-family:var(--font-sans);
  max-width:34ch;white-space:normal;
}
/* right-hand labels hang off their own left edge, so they read as a
   block starting at --lx rather than drifting toward the frame edge */
.call--r .call__txt,.call--l .call__txt{text-align:left;}
/* above the frame, hung from its own bottom edge; below it, from its top */
.call--up .call__txt{bottom:calc(100% + 9px);}
.call--dn .call__txt{top:calc(100% + 9px);}

.seq__progress{
  position:absolute;left:var(--gutter);right:var(--gutter);
  bottom:clamp(1.5rem,4vh,2.5rem);height:1px;background:var(--hairline);z-index:3;
}
.seq__note{
  position:absolute;left:var(--gutter);right:var(--gutter);
  bottom:clamp(.35rem,1.6vh,.9rem);margin:0;z-index:3;
  font-size:.6rem;letter-spacing:.1em;color:var(--dim);text-transform:none;
}
.seq__note a{color:var(--stone);text-decoration:underline;
  text-underline-offset:3px;text-decoration-color:var(--hairline);}
.seq__note a:hover{color:var(--ink);text-decoration-color:var(--emerald);}
.seq__progress i{
  display:block;height:100%;width:100%;background:var(--emerald);
  transform-origin:left center;transform:scaleX(0);
}

@media(max-width:760px){
  .seq__intro{position:static;padding:0 var(--gutter) 2rem;max-width:none;}
  .seq__pin{height:auto;padding:clamp(3rem,8vw,5rem) 0;overflow:visible;}
  .seq__progress{
    position:static;
    margin:1.5rem var(--gutter) 0;
    width:auto;
  }
  .seq__note{
    position:static;
    margin:0.85rem 0 0;
    padding:0 var(--gutter);
    box-sizing:border-box;
    width:100%;
    max-width:100%;
    line-height:1.55;
    word-break:normal;
    overflow-wrap:break-word;
  }
  .call__txt small{display:none;}
}

/* ============================================================
   ACT 2 — THE DEVICE  (pinned selector)
   ============================================================ */
.device{border-bottom:var(--rule);}
/* Single column. The teardown sequence above already carries the
   product shot, so a sticky second column here holds nothing but a
   gauge and strands a screen of empty space beside the spec rows. */
.device__grid{display:block;}
.device__stage{
  position:relative;
  border-top:var(--rule);border-bottom:var(--rule);
  padding:1.5rem 0;margin:0 0 .5rem;
  display:grid;gap:1rem;align-items:center;
}
@media(min-width:760px){
  .device__stage{grid-template-columns:minmax(0,22ch) 1fr;gap:clamp(1.5rem,4vw,3rem);}
}
/* the whole stage — shot, etching and gauge — has to survive inside
   one viewport, or the sticky column strands the gauge below the fold */
.device__shot img{
  max-height:38vh;object-fit:contain;margin-inline:auto;
  filter:drop-shadow(0 30px 50px rgba(0,0,0,.55));
}
.etch{
  font-family:var(--font-mono);font-size:.63rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--stone);
  display:flex;justify-content:space-between;gap:1rem;
  margin-top:1rem;padding-top:1rem;border-top:var(--rule);
}
.etch b{color:var(--emerald);font-weight:500;}

/* capacity gauge — the 117 GB rail */
.gauge{margin-top:1.25rem;}
.gauge__rail{
  height:8px;border-radius:99px;background:var(--wash);
  border:1px solid var(--hairline);overflow:hidden;
}
.gauge__fill{
  height:100%;width:100%;background:var(--emerald);
  transform-origin:left center;transform:scaleX(0);
  transition:transform .6s var(--ease-out);
}
.gauge__read{
  display:flex;justify-content:space-between;margin-top:.6rem;
  font-family:var(--font-mono);font-size:.61rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--dim);
}

/* ---------- EDITION OPTIONS ----------
   Ledger rows, not cards. Rounded bordered boxes read as generic
   SaaS pricing; this brand is rules, mono meta and space. Selection
   is a rail that fills emerald down the left edge. */
.opts{display:grid;border-top:var(--rule);}
.opt{
  position:relative;text-align:left;width:100%;cursor:pointer;
  border:0;border-bottom:var(--rule);border-radius:0;
  background:transparent;
  padding:clamp(1.5rem,3.5vw,2.1rem) 0 clamp(1.5rem,3.5vw,2.1rem) 1.5rem;
  transition:padding-left .3s var(--ease-out),background .25s ease;
}
/* the rail: always present, fills on selection */
.opt::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
  background:var(--hairline-hi);
  transform:scaleY(.28);transform-origin:top center;
  transition:transform .4s var(--ease-out),background .3s ease;
}
.opt:hover::before{transform:scaleY(.6);background:var(--stone);}
.opt[aria-pressed="true"]::before{transform:scaleY(1);background:var(--emerald);}
.opt--ultra .opt__name{color:var(--silver);}
.opt--ultra .opt__flag{color:var(--silver);}
.opt[aria-pressed="true"]{padding-left:2rem;}
.opt[aria-pressed="true"] .opt__name{color:var(--emerald);}

.opt__top{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;}
.opt__name{
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(1.6rem,3.2vw,2.1rem);
  letter-spacing:-.03em;margin:0;line-height:1;
  transition:color .3s ease;
}
.opt__price{
  font-family:var(--font-mono);font-size:1.05rem;color:var(--ink);
  white-space:nowrap;
}
.opt__price s{color:var(--dim);font-size:.78rem;margin-right:.55rem;}
.opt__spec{margin:.85rem 0 0;color:var(--stone);font-size:.92rem;max-width:48ch;}
.opt__for{
  margin:.85rem 0 0;font-family:var(--font-mono);font-size:.61rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--dim);
}
.opt__flag{
  font-family:var(--font-mono);font-size:.56rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--emerald);
  display:inline-block;margin-bottom:.6rem;
}

/* capability rows */

/* ============================================================
   ACT 3 — PROOF
   ============================================================ */
.proof{border-bottom:var(--rule);}
.counter{
  border:var(--rule);border-radius:16px;background:var(--card);
  padding:clamp(1.75rem,4vw,2.75rem);
  display:grid;gap:1.5rem;
}
.counter__n{
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(3.5rem,12vw,7rem);line-height:.85;letter-spacing:-.05em;
  color:var(--emerald);margin:0;font-variant-numeric:tabular-nums;
}
.counter__lines{
  display:grid;gap:.35rem;margin:0;padding:0;list-style:none;
  font-family:var(--font-mono);font-size:.66rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim);
}
.promise{display:grid;gap:0;margin-top:2.5rem;border-top:var(--rule);}
.promise__row{
  display:grid;gap:.35rem 2rem;grid-template-columns:1fr;
  padding:1.35rem 0;border-bottom:var(--rule);
}
@media(min-width:760px){.promise__row{grid-template-columns:.8fr 1.2fr;}}
.promise__row h4{margin:0;font-size:1rem;font-weight:500;}
.promise__row p{margin:0;color:var(--stone);font-size:.92rem;}

/* ============================================================
   ACT 4 — HARD TRUTH  (amber)
   ============================================================ */
.truth{
  border-bottom:var(--rule);
  background:
    radial-gradient(1200px 400px at 50% 0%,rgba(201,162,39,.06),transparent 70%),
    var(--void);
}
.truth .eyebrow{color:var(--amber);}
.truth em{color:var(--amber);}
.truth__cols{
  display:grid;gap:1.25rem;grid-template-columns:1fr;margin-top:3rem;
}
@media(min-width:760px){.truth__cols{grid-template-columns:1fr 1fr;}}
.tcol{
  border:1px solid var(--hairline);border-radius:14px;
  padding:1.9rem 1.7rem;background:var(--raise);
}
.tcol--yes{border-color:rgba(43,189,130,.3);}
.tcol--no{border-color:rgba(201,162,39,.28);}
.tcol h4{margin:0 0 .4rem;font-size:1.05rem;font-weight:500;}
.tcol ul{margin:1.1rem 0 0;padding-left:1.1rem;color:var(--stone);font-size:.94rem;}
.tcol li{margin-bottom:.65rem;}
.tcol--yes li::marker{color:var(--emerald);}
.tcol--no li::marker{color:var(--amber);}

/* ============================================================
   ACT 5 — THE MATHS
   ============================================================ */
.maths__grid{
  display:grid;gap:1px;background:var(--hairline);
  border:var(--rule);border-radius:16px;overflow:hidden;margin-top:1.25rem;
}
@media(min-width:760px){.maths__grid{grid-template-columns:repeat(3,1fr);}}
.mcell{background:var(--card);padding:clamp(1.75rem,4vw,2.5rem);}
.mcell__k{
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(2rem,4.5vw,2.9rem);letter-spacing:-.035em;line-height:1;
  margin:.85rem 0 .5rem;
}
.mcell--win .mcell__k{color:var(--emerald);}
.mcell p{margin:0;color:var(--stone);font-size:.9rem;}

/* ============================================================
   ACT 6 — PRE-ORDER
   ============================================================ */
.order{border-bottom:var(--rule);}
.order__grid{display:grid;gap:clamp(2rem,5vw,3.5rem);grid-template-columns:1fr;}
@media(min-width:1000px){.order__grid{grid-template-columns:1fr .9fr;}}

.clock{display:flex;gap:clamp(.75rem,2vw,1.5rem);margin:2rem 0 0;flex-wrap:wrap;}
.clock__u{
  border:var(--rule);border-radius:12px;background:var(--card);
  padding:1rem 1.25rem;min-width:76px;text-align:center;
}
.clock__n{
  font-family:var(--font-display);font-weight:600;font-size:clamp(1.6rem,4vw,2.2rem);
  letter-spacing:-.03em;line-height:1;display:block;font-variant-numeric:tabular-nums;
}
.clock__l{
  font-family:var(--font-mono);font-size:.56rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--dim);margin-top:.45rem;display:block;
}

.batch{margin-top:2.5rem;}
.batch__rail{
  height:6px;border-radius:99px;background:var(--wash);
  border:1px solid var(--hairline);overflow:hidden;
}
.batch__fill{
  height:100%;width:100%;background:var(--amber);
  transform-origin:left center;transform:scaleX(0);
  transition:transform .8s var(--ease-out);
}
.batch__read{
  display:flex;justify-content:space-between;margin-top:.6rem;
  font-family:var(--font-mono);font-size:.61rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--stone);
}

.till{
  border:var(--rule);border-radius:16px;background:var(--card);
  padding:clamp(1.5rem,4vw,2.25rem);
}
.till__line{
  display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  padding:.85rem 0;border-bottom:var(--rule);font-size:.94rem;
}
.till__line span:first-child{color:var(--stone);}
.till__line--now{
  border-bottom:0;padding-top:1.25rem;font-size:1rem;
}
.till__line--now b{
  font-family:var(--font-display);font-weight:600;font-size:1.6rem;
  letter-spacing:-.03em;color:var(--emerald);
}
.till__later{
  margin:1rem 0 0;font-size:.85rem;color:var(--stone);
  border-top:var(--rule);padding-top:1rem;
}
.till__select-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.till__select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: var(--void);
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.92rem;
  padding: 0.5rem 2.25rem 0.5rem 0.85rem;
  border-radius: 8px;
  border: 1px solid var(--hairline-hi);
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}
.till__select:hover {
  border-color: var(--emerald);
  background: rgba(255, 255, 255, 0.04);
}
.till__select:focus {
  outline: none;
  border-color: var(--emerald);
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.25);
}
.till__select option {
  background: #14161d;
  color: #fff;
  font-family: var(--font-sans);
  font-size: 0.88rem;
}
.till__select-arrow {
  position: absolute;
  right: 0.8rem;
  pointer-events: none;
  stroke: var(--emerald);
  transition: transform 0.2s ease;
}
.till__select:focus + .till__select-arrow {
  transform: rotate(180deg);
}

.field{
  width:100%;background:var(--void);border:1px solid var(--hairline);
  border-radius:6px;padding:.95rem 1rem;color:var(--ink);
  font-family:var(--font-sans);font-size:.95rem;
  transition:border-color .2s ease;
}
.field::placeholder{color:var(--dim);}
.field:focus{outline:none;border-color:var(--emerald);}
.form__row{display:grid;gap:.75rem;margin-bottom:.75rem;}
@media(min-width:560px){.form__row--2{grid-template-columns:1fr 1fr;}}
.form__note{margin:1rem 0 0;font-size:.82rem;color:var(--dim);line-height:1.5;}
.form__err{margin:1rem 0 0;font-size:.85rem;color:var(--danger);}
.form__ok{margin:1rem 0 0;font-size:.9rem;color:var(--emerald);}

/* ============================================================
   FOOTER — KMATS returns, quietly
   ============================================================ */
.foot{
  padding:clamp(3.5rem,7vw,5.5rem) 0 clamp(2.5rem,5vw,3.5rem);
  position:relative;
  z-index:10;
  contain:content;
}
.foot__main{
  display:grid;
  grid-template-columns:minmax(0, 1.3fr) minmax(0, 2fr);
  gap:clamp(2rem, 5vw, 5rem);
  align-items:start;
  padding-bottom:2.75rem;
  border-bottom:var(--rule);
}
.foot__brand{
  min-width:0;
}
.foot__brand .fine{
  margin:0.85rem 0 0;
  max-width:34ch;
  color:var(--stone);
  font-size:0.92rem;
  line-height:1.6;
}
.foot__grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:clamp(1rem, 3vw, 2.5rem);
}
.foot__col{
  min-width:0;
}
.foot h5{
  font-family:var(--font-mono);
  font-size:.65rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--dim);
  margin:0 0 1.15rem;
  font-weight:500;
}
.foot ul{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:.65rem;
}
.foot a{
  color:var(--stone);
  text-decoration:none;
  font-size:.92rem;
  transition:color .2s ease;
  display:inline-block;
}
.foot a:hover{
  color:var(--ink);
}
.foot__base{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1rem;
  flex-wrap:wrap;
  padding-top:1.85rem;
  font-size:.84rem;
  color:var(--dim);
}

@media(max-width:860px){
  .foot{
    padding:2.75rem 0 2rem;
  }
  .foot__main{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap:2.25rem;
    padding-bottom:2rem;
  }
  .foot__brand{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    width:100%;
  }
  .foot__mark{
    height:19px;
    margin:0 auto;
  }
  .foot__brand .fine{
    font-size:0.82rem;
    line-height:1.5;
    margin:0.75rem auto 0;
    text-align:center;
    max-width:36ch;
  }
  .foot__grid{
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:clamp(0.5rem, 2.5vw, 1.25rem);
    width:100%;
    text-align:center;
  }
  .foot__col{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
  }
  .foot h5{
    font-size:0.58rem;
    letter-spacing:0.12em;
    margin:0 0 0.8rem;
    text-align:center;
    width:100%;
  }
  .foot ul{
    gap:0.5rem;
    text-align:center;
    width:100%;
  }
  .foot a{
    font-size:0.76rem;
    line-height:1.35;
    word-break:break-word;
    padding:0.15rem 0;
    text-align:center;
  }
  .foot__base{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    gap:0.45rem;
    font-size:0.72rem;
    padding-top:1.4rem;
  }
  .foot__base p{
    text-align:center;
    margin:0;
  }
}

/* ============================================================
   STICKY DOCK
   ============================================================ */
.dock{
  position:fixed;left:0;right:0;bottom:0;z-index:290;
  display:flex;align-items:center;gap:1rem;
  padding:.85rem var(--gutter);
  background:color-mix(in srgb,var(--void) 88%,transparent);
  backdrop-filter:blur(14px);border-top:var(--rule);
  transform:translateY(105%);transition:transform .45s var(--ease-out);
}
.dock.is-up{transform:none;}
.dock__meta{margin-right:auto;min-width:0;}
.dock__meta strong{display:block;font-weight:500;font-size:.95rem;}

/* ============================================================
   REVEALS + REDUCED MOTION
   ============================================================ */
.rv{opacity:0;transform:translateY(22px);}
.rv.in{opacity:1;transform:none;transition:opacity .7s var(--ease-out),transform .7s var(--ease-out);}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
  .rv{opacity:1;transform:none;}
  .boot li{opacity:1;transform:none;}
}

/* ============================================================
   SECTION HEAD — the fix for six identical bands

   Every band used to run eyebrow → giant headline → lead
   paragraph, stacked, left-aligned, one after another. Six
   times that reads as one long band, not six sections, and it
   was most of the page height. Here the headline and the lead
   share a row: same information, ~180px less per band, and the
   eye gets a horizontal move it wasn't getting before.
   ============================================================ */
.head{display:grid;gap:clamp(1.25rem,3vw,2.5rem);align-items:end;}
@media(min-width:900px){
  .head{grid-template-columns:1.25fr .75fr;gap:clamp(2rem,5vw,4.5rem);}
  .head .lead{padding-bottom:.35rem;}
}
.head .d2{margin-bottom:0;}

/* ============================================================
   SILICON — the Apple silicon band

   Cooler than the rest of the deck on purpose: aluminium, not
   emerald. Still the ink ground, still one system — the accent
   shifts the way a spotlight does, it does not introduce a
   third brand.
   ============================================================ */
.silicon{
  border-bottom:var(--rule);
  background:
    radial-gradient(1100px 460px at 78% 0%,rgba(168,180,189,.075),transparent 68%),
    var(--void);
}
.silicon .mono--lead{color:var(--silver);}
.silicon em{color:var(--silver);}

/* the ceiling flip — two facing claims, one hairline apart */
.flip{
  display:grid;gap:1px;background:var(--hairline);
  border-block:var(--rule);margin-top:clamp(2.5rem,6vw,4rem);
}
@media(min-width:820px){.flip{grid-template-columns:1fr 1fr;}}
.flip__side{background:var(--void);padding:clamp(1.75rem,4vw,2.6rem) clamp(1.5rem,3vw,2.2rem);}
.flip__side .mono{margin-bottom:1rem;}
.flip__side p{margin:0;color:var(--stone);font-size:.92rem;max-width:42ch;}
.flip__side .flip__k{
  font-family:var(--font-display);font-weight:600;line-height:1;color:var(--ink);
  font-size:clamp(2.4rem,5.2vw,3.4rem);letter-spacing:-.04em;margin:0 0 .55rem;
  max-width:none;
}
.flip--mac{background:var(--raise);}
.flip--mac .flip__k{color:var(--silver);}
.flip--mac .mono{color:var(--silver);}

/* the memory ladder — bars scaled against 512 GB */
.ladder{margin-top:clamp(2.5rem,6vw,3.5rem);border-top:var(--rule);}
.rung{
  display:grid;gap:.35rem .5rem;align-items:center;
  padding:1.15rem 0;border-bottom:var(--rule);
  grid-template-columns:1fr auto;
}
@media(min-width:820px){
  .rung{grid-template-columns:minmax(0,15ch) 8ch minmax(0,1fr) minmax(0,24ch);gap:clamp(1rem,2.5vw,2rem);}
}
.rung__chip{font-weight:500;font-size:.98rem;margin:0;}
.rung__mem{
  font-family:var(--font-mono);font-variant-numeric:tabular-nums;
  font-size:.9rem;color:var(--ink);margin:0;white-space:nowrap;
}
.rung__bar{
  grid-column:1/-1;position:relative;height:6px;border-radius:3px;
  background:var(--wash);overflow:hidden;
}
@media(min-width:820px){.rung__bar{grid-column:auto;}}
.rung__bar i{
  position:absolute;inset:0 auto 0 0;display:block;border-radius:3px;
  width:100%;transform-origin:left center;transform:scaleX(var(--w,0));
  background:linear-gradient(90deg,var(--hairline-hi),var(--silver));
  transition:transform .9s var(--ease-out);
}
.rung--top .rung__bar i{background:linear-gradient(90deg,var(--silver),#e6ecf0);}
.rung__load{
  grid-column:1/-1;margin:0;color:var(--stone);font-size:.88rem;
}
@media(min-width:820px){.rung__load{grid-column:auto;text-align:right;}}
.rung--top .rung__load{color:var(--silver);}
.ladder__foot{
  display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;justify-content:space-between;
  padding-top:1rem;
}

/* the Studio edition card — a waitlist, not a till */
.studio-ed{
  margin-top:clamp(2.5rem,6vw,4rem);
  border:1px solid var(--hairline-hi);border-radius:16px;
  background:linear-gradient(180deg,var(--raise),var(--card));
  padding:clamp(1.75rem,4vw,2.75rem);
  display:grid;gap:clamp(1.5rem,4vw,3rem);
}
@media(min-width:900px){.studio-ed{grid-template-columns:1.1fr .9fr;align-items:start;}}
.studio-ed h3{margin:0;font-size:1.15rem;font-weight:500;}
.studio-ed p{margin:0;color:var(--stone);font-size:.94rem;}
.studio-ed .studio-ed__k{
  font-family:var(--font-display);font-weight:600;line-height:1;
  font-size:clamp(2.6rem,6vw,3.8rem);letter-spacing:-.04em;
  color:var(--silver);margin:.75rem 0 .35rem;
}
.studio-ed dl{
  margin:1.5rem 0 0;display:grid;gap:0;border-top:var(--rule);
  font-size:.9rem;
}
.studio-ed dd{color:var(--ink);}
.studio-ed dl > div{
  display:flex;justify-content:space-between;gap:1rem;
  padding:.7rem 0;border-bottom:var(--rule);
}
.studio-ed dt{color:var(--stone);margin:0;}
.studio-ed dd{margin:0;font-family:var(--font-mono);font-variant-numeric:tabular-nums;}

/* the honesty block. This has to be here: hard-truth.html says
   Velora has never run on a Mac, and that page is the reason
   anyone trusts this one. So the Mac band sells a queue, not a
   drive, and says why in the same breath. */
.caveat{
  border-left:2px solid var(--amber);padding:.15rem 0 .15rem 1.1rem;
  margin:0 0 1.5rem;
}
.caveat p{color:var(--stone);font-size:.9rem;margin:0;}
.caveat b{color:var(--amber);font-weight:500;}


/* ============================================================
   TRADE — hard truth and the maths, merged

   These were two bands making one argument: you trade capability
   for ownership. Splitting them meant repeating the setup twice.
   ============================================================ */
.trade__ledger{margin-top:clamp(2.5rem,6vw,3.5rem);}
.trade__acts{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.75rem;
  margin-top:2.5rem;
}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;
}

/* ============================================================
   PAPER GROUND — .pg

   The deck now opens on paper and inverts once, at the Promise,
   rather than inverting at the fold. Every component already
   draws from the token set, so a section only has to re-map the
   tokens to change ground; nothing below this rule is duplicated
   for light and dark.

   Ember replaces emerald here, which keeps the old rule intact:
   teal is the paper zone, emerald is the ink zone, and neither
   crosses the inversion.
   ============================================================ */
.pg{
  --void:#faf8f4;
  --raise:#ffffff;
  --card:#ffffff;
  --wash:#f1ede6;
  --hairline:#e4dfd7;
  --hairline-hi:#d3ccc2;
  /* --rule is declared on :root as `1px solid var(--hairline)`, and a
     custom property substitutes at its own declaration site -- so it
     froze the dark hairline there and re-mapping --hairline above does
     not reach it. Every rule inside a paper section was painting
     near-black (#2b2825) on cream. Re-declare it here. */
  --rule:1px solid #e4dfd7;
  --ink:#161514;
  --stone:#6b6660;
  --dim:#928c84;
  --emerald:#0f7264;
  --emerald-deep:#0b5a4f;
  --amber:#8a6410;
  --silver:#5b6670;
  background:var(--paper);color:var(--graphite);
  position:relative;z-index:1;
}

/* The one hard rule this ground creates: every product render we
   own is shot on a dark sweep (corners measure 26-101), so
   photography never sits directly on paper. It gets an ink panel. */
.ink-panel{
  --void:#131211;--raise:#191817;--card:#1b1a18;--wash:#232120;
  --hairline:#2b2825;--hairline-hi:#3a3632;--ink:#f2efe9;
  --stone:#9d968d;--dim:#6f6963;--emerald:#2bbd82;--silver:#a8b4bd;
  background:var(--void);color:var(--ink);
}

/* paper hands the page to ink at the Promise, which is the
   sentence the darkness is there for */
.invert{
  position:relative;
  box-shadow:0 -1px 0 var(--emerald-deep),0 -24px 50px rgba(0,0,0,.35);
}

/* ============================================================
   HERO — paper copy, ink product, split down the middle
   ============================================================ */
/* the icon row under the hero copy */
.marks{
  display:grid;grid-template-columns:repeat(2,1fr);gap:1.4rem 1rem;
  margin:clamp(1.75rem,3.5vw,2.5rem) 0 0;padding:clamp(1.5rem,3vw,1.9rem) 0 0;
  list-style:none;border-top:var(--rule);
}
@media(min-width:560px){.marks{grid-template-columns:repeat(4,1fr);}}
.marks li{display:grid;gap:.45rem;}
.marks svg{width:19px;height:19px;stroke:var(--emerald);fill:none;stroke-width:1.5;}
.marks b{font-size:.86rem;font-weight:500;display:block;}
.marks span{font-size:.78rem;color:var(--stone);display:block;line-height:1.4;}

/* ============================================================
   ANNOTATION — the handwritten aside from the reference.
   Inline SVG arrow, no font to load. Hidden below 1100px,
   where there is no margin left to write in.
   ============================================================ */
.note{
  position:absolute;display:block;pointer-events:none;z-index:2;
  font-family:var(--font-mono);font-size:.66rem;letter-spacing:.08em;
  line-height:1.6;color:var(--stone);text-transform:uppercase;
  max-width:20ch;
}
.note svg{
  position:absolute;width:60px;height:42px;overflow:visible;
  stroke:var(--hairline-hi);fill:none;stroke-width:1.4;
  stroke-linecap:round;stroke-linejoin:round;
}
.note--dl svg{left:-6px;top:calc(100% + 4px);}
.note--dr svg{right:-6px;top:calc(100% + 4px);transform:scaleX(-1);}

@media(max-width:600px){
  .closer__art .note--dr{
    right:3% !important;
    top:10% !important;
    font-size:.60rem;
    letter-spacing:.08em;
    line-height:1.45;
  }
  .closer__art .note--dr svg{
    width:52px;height:36px;
    stroke-width:1.3;
  }
}

/* ============================================================
   EDITION CARDS — premium hardware tier selector
   ============================================================ */
.band.device {
  padding: clamp(3rem, 6vh, 4.5rem) 0;
}

.device .head {
  gap: clamp(1.25rem, 2.5vw, 2.5rem);
}
.device .head .d2 {
  font-size: clamp(1.9rem, 3vw, 2.6rem);
  line-height: 1.15;
}
.device .head .lead {
  font-size: clamp(0.9rem, 1.05vw, 1rem);
  line-height: 1.55;
}

.cards {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
  margin-top: clamp(1.75rem, 3.5vh, 2.75rem);
  padding-top: 0.5rem;
  align-items: stretch;
  perspective: 1200px;
}
@media(min-width: 640px) {
  .cards {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }
}
@media(min-width: 1020px) {
  .cards {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.15rem;
  }
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  text-align: left;
  width: 100%;
  cursor: pointer;
  font-family: inherit;
  border: 1px solid var(--hairline);
  border-radius: 14px;
  background: var(--raise);
  color: inherit;
  padding: clamp(1.35rem, 1.8vw, 1.6rem) clamp(1.15rem, 1.5vw, 1.35rem);
  transform-style: preserve-3d;
  will-change: transform;
  transition: border-color 0.25s ease, box-shadow 0.3s var(--ease-out);
  overflow: visible;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}
.card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 14px;
  background: radial-gradient(circle 280px at var(--mx,50%) var(--my,50%), rgba(16,185,129,.14), rgba(255,255,255,.05) 30%, transparent 70%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 1;
}
.card--ultra::before {
  background: radial-gradient(circle 280px at var(--mx,50%) var(--my,50%), rgba(212,212,216,.16), rgba(255,255,255,.06) 30%, transparent 70%);
}
.card:hover::before { opacity: 1; }
.card:hover {
  border-color: var(--hairline-hi);
  box-shadow: 0 22px 48px -12px rgba(0,0,0,.65), 0 0 32px -8px rgba(16,185,129,.16);
}
.card--ultra:hover {
  box-shadow: 0 22px 48px -12px rgba(0,0,0,.65), 0 0 32px -8px rgba(212,212,216,.16);
}
.card[aria-pressed="true"] {
  border-color: var(--emerald);
  box-shadow: 0 0 0 1px var(--emerald), 0 18px 40px rgba(16,185,129,.14);
}
.card__flag {
  position: absolute;
  top: -10px;
  left: 1.25rem;
  font-family: var(--font-mono);
  font-size: 0.56rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: var(--emerald);
  color: var(--void);
  padding: 0.28rem 0.72rem;
  border-radius: 99px;
  white-space: nowrap;
  z-index: 4;
  box-shadow: 0 2px 8px rgba(0,0,0,.35);
  line-height: 1;
  transform: translateZ(26px);
}
.card--ultra .card__flag {
  background: var(--silver);
  color: var(--void);
}
.card__name {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.025em;
  font-size: 1.4rem;
  margin: 0 0 0.25rem;
  transform: translateZ(18px);
}
.card--ultra .card__name { color: var(--silver); }
.card__spec {
  margin: 0 0 1rem;
  color: var(--stone);
  font-size: 0.82rem;
  line-height: 1.45;
  min-height: 2.8em;
  transform: translateZ(12px);
}
.card__list {
  list-style: none;
  margin: 0 0 1.15rem;
  padding: 0;
  display: grid;
  gap: 0.45rem;
  transform: translateZ(14px);
}
.card__list li {
  display: grid;
  grid-template-columns: 14px 1fr;
  gap: 0.52rem;
  align-items: start;
  font-size: 0.8rem;
  color: var(--stone);
  line-height: 1.4;
}
.card__list svg {
  width: 14px;
  height: 14px;
  stroke: var(--emerald);
  fill: none;
  stroke-width: 2.2;
  margin-top: 0.18em;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.card--ultra .card__list svg { stroke: var(--silver); }
.card__pay {
  margin-top: auto;
  padding-top: 0.85rem;
  border-top: 1px solid var(--hairline);
  transform: translateZ(16px);
}
.card__was {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--dim);
  text-decoration: line-through;
  margin: 0;
  line-height: 1;
}
.card__price {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.03em;
  font-size: 1.7rem;
  line-height: 1.1;
  margin: 0.12rem 0 0.18rem;
}
.card__now {
  margin: 0 0 0.85rem;
  font-size: 0.75rem;
  color: var(--stone);
  line-height: 1.3;
}
.card__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  width: 100%;
  height: 42px;
  min-height: 42px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  padding: 0 1rem;
  border-radius: 8px;
  border: 1px solid var(--hairline-hi);
  background: rgba(255, 255, 255, 0.04);
  color: var(--ink);
  transition: all 0.2s ease;
  transform: translateZ(20px);
  box-sizing: border-box;
}
.card:hover .card__cta {
  background: var(--emerald);
  border-color: var(--emerald);
  color: var(--void);
}
.card[aria-pressed="true"] .card__cta {
  background: var(--emerald);
  border-color: var(--emerald);
  color: var(--void);
}
.card--ultra:hover .card__cta,
.card--ultra[aria-pressed="true"] .card__cta {
  background: var(--silver);
  border-color: var(--silver);
  color: var(--void);
}

/* ============================================================
   ULTRA CLASSIFIED MILESTONE TEASER BANNER
   ============================================================ */
.ultra-teaser {
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  padding: 1.15rem 1.35rem;
  border-radius: 12px;
  background: var(--raise);
  border: 1px dashed var(--hairline-hi);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.2s ease;
  position: relative;
}
.ultra-teaser:hover {
  border-color: var(--emerald);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 0 20px -8px rgba(16, 185, 129, 0.15);
}
.ultra-teaser__left {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  flex: 1 1 auto;
  min-width: 0;
}
.ultra-teaser__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--wash);
  border: 1px solid var(--hairline-hi);
  padding: 0.4rem 0.75rem;
  border-radius: 6px;
  white-space: nowrap;
  flex-shrink: 0;
  line-height: 1;
}
.ultra-teaser__badge svg {
  width: 13px;
  height: 13px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  flex-shrink: 0;
}
.ultra-teaser__text {
  margin: 0;
  font-size: 0.88rem;
  color: var(--stone);
  line-height: 1.5;
}
.ultra-teaser__text b {
  color: var(--ink);
  font-weight: 600;
}
.ultra-teaser__btn {
  flex-shrink: 0;
  font-size: 0.72rem;
  padding: 0.55rem 1.15rem;
  white-space: nowrap;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-family: var(--font-mono);
  font-weight: 600;
  border-radius: 8px;
}

@media (max-width: 860px) {
  .ultra-teaser {
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
    padding: 1.15rem;
  }
  .ultra-teaser__left {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }
  .ultra-teaser__btn {
    width: 100%;
    justify-content: center;
    text-align: center;
    padding: 0.75rem 1rem;
    min-height: 44px;
  }
}

@media (max-width: 480px) {
  .ultra-teaser {
    padding: 1rem 0.9rem;
    gap: 0.85rem;
  }
  .ultra-teaser__badge {
    font-size: 0.68rem;
    padding: 0.35rem 0.6rem;
  }
  .ultra-teaser__text {
    font-size: 0.82rem;
    line-height: 1.45;
  }
}

/* Compare specs link */
.cards__compare-wrap {
  margin-top: 2rem;
  text-align: center;
}
.cards__compare-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.65rem 1.25rem;
  border-radius: 8px;
}
@media (max-width: 640px) {
  .cards__compare-btn {
    width: 100%;
    box-sizing: border-box;
    padding: 0.8rem 1rem;
    min-height: 44px;
    font-size: 0.72rem;
  }
}

/* ============================================================
   TRUST STRIP
   ============================================================ */
.trust{
  display:grid;grid-template-columns:repeat(2,1fr);gap:1.25rem;
  margin-top:clamp(2rem,4vw,2.75rem);padding:clamp(1.5rem,3vw,2rem) 0 0;
  border-top:var(--rule);list-style:none;
}
@media(min-width:820px){.trust{grid-template-columns:repeat(3,1fr);}}
.trust li{display:grid;grid-template-columns:20px 1fr;gap:.75rem;align-items:start;}
.trust svg{width:20px;height:20px;stroke:var(--stone);fill:none;stroke-width:1.4;margin-top:.1em;}
.trust b{display:block;font-size:.85rem;font-weight:500;}
.trust span{display:block;font-size:.77rem;color:var(--stone);}

/* ============================================================
   THE WORD — one quote, attributed to someone who exists
   ============================================================ */
.word{
  display:grid;gap:clamp(1.5rem,4vw,3rem);
  margin-top:clamp(2.5rem,6vw,4rem);align-items:center;
}
@media(min-width:900px){.word{grid-template-columns:1.1fr .9fr;}}
.word blockquote{
  margin:0;font-family:var(--font-display);font-weight:500;
  font-size:clamp(1.25rem,2.5vw,1.75rem);line-height:1.3;letter-spacing:-.02em;
  text-wrap:balance;
}
.word figcaption{margin-top:1.15rem;}
.word__shots{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;}
.word__shots img{border-radius:10px;width:100%;height:auto;aspect-ratio:1;object-fit:cover;}

/* ============================================================
   CLOSING BAND — the last dark full-bleed before the footer
   ============================================================ */
.closer{position:relative;overflow:hidden;border-top:var(--rule);padding:clamp(4rem,9vw,7rem) 0;}
.closer__grid{display:grid;gap:clamp(2rem,5vw,3rem);align-items:center;}
@media(min-width:900px){.closer__grid{grid-template-columns:.92fr 1.08fr;}}
.closer__art{position:relative;}
.closer__art img{
  width:100%;height:auto;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 82%,transparent),
                     linear-gradient(180deg,transparent,#000 16%,#000 84%,transparent);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent,#000 14%,#000 82%,transparent),
             linear-gradient(180deg,transparent,#000 16%,#000 84%,transparent);
  mask-composite:intersect;
}
.closer__acts{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:2rem;}

/* nav has to survive both grounds */
.nav.is-paper{
  background:color-mix(in srgb,#faf8f4 86%,transparent);
  border-bottom-color:#e4dfd7;
}
.nav.is-paper .nav__mark{color:var(--graphite);}
.nav.is-paper .nav__links a{color:var(--graphite-soft);}
.nav.is-paper .nav__links a:hover{color:var(--graphite);}
.nav.is-paper .btn--go{background:var(--ember);color:#fff;}
.nav.is-paper .btn--go:hover{background:#0b5a4f;}

/* ============================================================
   THE FITTER — "match my machine"

   Opt-in, never a gate: a <details> under the cards, so anyone
   who already knows scrolls straight past and the disclosure
   costs no JS and no ARIA of our own.

   Everything it does happens in the browser. Nothing is sent,
   nothing is stored, nothing is attached to the order. That is
   not a nicety — reading GPU, cores and platform is textbook
   fingerprinting, and this page counts the drive's network
   requests three sections down. The widget says so out loud.
   ============================================================ */
.fit{
  margin-top:clamp(1.5rem,3vw,2rem);
  border:1px solid var(--hairline);border-radius:14px;
  background:var(--raise);
}
.fit > summary{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1.1rem clamp(1.25rem,2.4vw,1.6rem);cursor:pointer;
  font-family:var(--font-mono);font-size:.66rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink);list-style:none;
}
.fit > summary::-webkit-details-marker{display:none;}
.fit > summary::after{
  content:"";width:8px;height:8px;flex:none;
  border-right:1.5px solid var(--stone);border-bottom:1.5px solid var(--stone);
  transform:rotate(45deg) translate(-2px,-2px);
  transition:transform .25s var(--ease-out);
}
.fit[open] > summary::after{transform:rotate(-135deg) translate(-2px,-2px);}
.fit > summary:hover{color:var(--emerald);}

.fit__body{
  padding:0 clamp(1.25rem,2.4vw,1.6rem) clamp(1.4rem,2.6vw,1.75rem);
  border-top:var(--rule);padding-top:1.4rem;
}
.fit__privacy{
  margin:0 0 1.4rem;font-size:.8rem;color:var(--stone);
  display:grid;grid-template-columns:16px 1fr;gap:.6rem;align-items:start;
}
.fit__privacy svg{
  width:16px;height:16px;stroke:var(--emerald);fill:none;stroke-width:1.6;
  margin-top:.15em;
}

/* what the browser volunteered, shown as a confirmable line
   rather than as homework the buyer has to go and do */
.fit__read{
  margin:0 0 1.25rem;padding:.85rem 1rem;border-radius:8px;
  background:var(--wash);font-size:.83rem;color:var(--stone);
}
.fit__read b{color:var(--ink);font-weight:500;}

.fit fieldset{border:0;margin:0;padding:0;}
.fit legend{
  padding:0;margin:0 0 .85rem;font-size:.92rem;font-weight:500;color:var(--ink);
}
.fit__opts{display:grid;gap:.5rem;}
@media(min-width:760px){.fit__opts{grid-template-columns:repeat(2,1fr);}}
.fit__opt{
  display:grid;grid-template-columns:16px 1fr;gap:.7rem;align-items:start;
  padding:.85rem 1rem;border:1px solid var(--hairline);border-radius:8px;
  cursor:pointer;font-size:.87rem;
  transition:border-color .18s ease,background .18s ease;
}
.fit__opt:hover{border-color:var(--hairline-hi);}
.fit__opt input{
  appearance:none;-webkit-appearance:none;margin:.18em 0 0;
  width:16px;height:16px;border-radius:50%;flex:none;
  border:1.5px solid var(--hairline-hi);background:transparent;
}
.fit__opt input:checked{
  border-color:var(--emerald);
  box-shadow:inset 0 0 0 3px var(--raise),inset 0 0 0 9px var(--emerald);
}
.fit__opt:has(input:checked){border-color:var(--emerald);background:var(--wash);}
.fit__opt span{display:block;}
.fit__opt small{display:block;color:var(--stone);font-size:.79rem;margin-top:.15rem;}

/* the answer. It has to be able to point downwards, or nobody
   will believe it the one time it points up. */
.fit__out{
  margin-top:1.4rem;padding-top:1.4rem;border-top:var(--rule);
}
.fit__verdict{
  font-family:var(--font-display);font-weight:600;letter-spacing:-.025em;
  font-size:clamp(1.3rem,2.6vw,1.7rem);line-height:1.15;margin:0 0 .6rem;
}
.fit__verdict b{color:var(--emerald);font-weight:600;}
.fit__why{margin:0;padding-left:1.1rem;color:var(--stone);font-size:.87rem;}
.fit__why li{margin-bottom:.4rem;}
.fit__acts{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.25rem;}
@media(max-width:600px){
  .fit__acts{flex-direction:column;}
  .fit__acts .btn{width:100%;justify-content:center;text-align:center;min-height:44px;}
}

/* ============================================================
   THE PREMIUM PASS

   Six things were wrong and they were all the same thing: the
   page had many components of similar size and similar grey, so
   nothing carried weight. The fix is subtraction plus scale —
   fewer objects, each much bigger, with real contrast between
   the largest and smallest type on any given screen.
   ============================================================ */

/* --- 1. type asserts in the paper zone ---------------------- */
.pg .d0{font-size:clamp(3.4rem,11.5vw,9.5rem);}
/* half the row now, so it cannot use the full-bleed display size */
@media(min-width:900px){.hero--open .d0{font-size:clamp(3rem,5.6vw,5.6rem);}}
.pg .d2{font-size:clamp(1.95rem,6vw,5.4rem);line-height:.94;}
.pg .lead{font-size:clamp(1.05rem,1.8vw,1.32rem);}

/* --- 2. the hero, rebuilt -----------------------------------
   One ground, one column, and the drive as an object rather
   than a photograph in a box. The cutout carries its own alpha
   so it needs no panel, no mask and no border. */
.hero--open{
  padding:clamp(6.5rem,13vh,9rem) 0 clamp(3rem,7vh,4.5rem);
  min-height:auto;border-bottom:0;display:block;
}
.hero__open{position:relative;}
.hero__line{margin:1.75rem 0 0;letter-spacing:-.045em;}

/* The hero object is close to square now (the connectors shot, both
   ports open) rather than the wide profile it replaced, so the hero is
   two columns instead of a stack -- a tall object under a full-width
   headline pushed the price a whole screen further down. */
.hero__grid{display:grid;gap:clamp(2rem,5vw,3.5rem);align-items:center;}
@media(min-width:900px){
  /* The object column takes the larger share now. The photograph
     carries ~530 px of real horizontal detail (its spectrum floors at
     0.62 Nyquist of an 856 px bbox), so there is headroom to show it
     bigger than the old 520 px cap without stretching it -- but not
     unlimited headroom, which is why the cap below is 620 and not the
     full column. */
  .hero__grid{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);}
}
/* hero_photo.png ships with its own subject matte -- hand and drive
   already separated from the room behind them -- so this one needs no
   panel and no keying of ours. It is a portrait crop, so it is sized by
   height rather than width: a tall object given a half-width column
   pushes the price off the first screen. */
.hero__object{
  position:relative;margin:0 auto;overflow:visible;
  width:min(100%,620px);max-width:100%;pointer-events:none;
}
.hero__object img{
  display:block;width:100%;height:auto;
  filter:drop-shadow(0 14px 22px rgba(22,21,20,.10));
}
@media(max-width:900px){
  .hero__object{margin-top:.5rem;width:min(78vw,420px);position:relative;}
}

.hero__note{
  display:block !important;
  position:absolute;left:6%;top:48%;right:auto;bottom:auto;
  text-align:left;width:max-content;max-width:20ch;
  pointer-events:none;z-index:2;
  font-family:var(--font-mono);font-size:.66rem;
  letter-spacing:.08em;line-height:1.55;color:var(--stone);
  text-transform:uppercase;font-weight:400;
}
.hero__note svg{
  position:absolute;left:14px;bottom:calc(100% + 4px);right:auto;top:auto;
  width:clamp(40px,6vw,54px);height:clamp(50px,7.5vw,70px);overflow:visible;
  stroke:currentColor;fill:none;stroke-width:1.1;
  stroke-linecap:round;stroke-linejoin:round;
  transform:none;
}
@media(max-width:900px){
  .hero__note{
    display:block !important;
    left:-12px;top:47%;
    font-size:.60rem;
    letter-spacing:.08em;
    line-height:1.45;
    color:var(--graphite);
  }
  .hero__note svg{
    left:10px;bottom:calc(100% + 2px);
    width:38px;height:48px;
    stroke-width:1.4;
    stroke:currentColor;
  }
}

/* The lead rises into the gap the drive leaves on the left rather
   than sitting under it, which is what left ~200px of nothing in
   the middle of the fold. The column is capped so it never runs
   under the object. */
.hero__foot{
  display:grid;gap:clamp(1.5rem,3vw,2rem);position:relative;z-index:1;
  margin-top:clamp(1.5rem,3vw,2.25rem);
}
.hero__foot .lead{max-width:40ch;}
@media(min-width:900px){.hero__foot .lead{max-width:38ch;}}
.hero--open .hero__acts{display:flex;flex-wrap:wrap;gap:.7rem;}
.hero--open .marks{margin-top:clamp(2.5rem,5vw,3.5rem);}
.hero--open .pins{display:none;}

/* --- 3. the teardown, sized by what is actually in the frame ---
   Two constraints used to fight. The clip's detail dies at 0.70
   Nyquist -- about 896 px of real information in a 1280 file -- so a
   full-bleed canvas stretched it 3.2x and read as blurry. Capping the
   canvas at 1040 fixed the softness and made the drive too small.

   Cropping resolved it. Solid parts occupied only y 17%-82% of the
   16:9 frame, so a third of every pixel we shipped was empty studio
   gradient. The frames are now cropped to 2.27, where the parts fill
   y 9%-91%, and the canvas can run to 1600 px while sampling BETTER
   than the old 1040 did:

       before  1040 stage, drive ~802 px, 1.42 source px per display px
       after   1600 frame, drive ~1390 px, 1.15 source px per display px

   The canvas is capped by viewport height as well as width, because
   the letterbox bars the crop frees up are where the labels live. */
.seq .wrap,.seq__pin > .wrap{max-width:none;padding:0;}
.seq__stage{width:100%;padding:0 var(--gutter);}
.seq__frame{
  position:relative;margin-inline:auto;
  /* Height, not just width, decides how big this can be. The pin is
     100svh but the fixed nav eats ~100px off the top and the price
     dock ~90px off the bottom, and the labels need a band above and
     below the canvas. 340px covers all four. Without it the top
     labels slid under the nav and the bottom ones under the dock. */
  /* Labels are anchored a fixed distance outside the canvas rather
     than a percentage of its height, so their position no longer
     scales with the canvas while the bars shrink. That makes the
     constraint a single line: each bar must hold the nav or dock
     (76 / 78px), a gap, and one 58px label, so
         (vh - H)/2 >= 78 + 20 + 58 + 9 = 165  ->  H <= vh - 330
     Measured, not assumed: label 58px, nav 76px, dock 78px. A
     percentage offset held at 900px tall and clipped at both 720 and
     1080, in opposite directions. */
  --bar:165px;              /* dock 78 + gap 20 + label 58 + gap 9 */
  width:min(100%, 1800px, calc(2.27 * (100svh - 2 * var(--bar))));
}

/* --- 4. the flip carries the Ultra argument alone -----------
   The ladder said the same thing in four rows of small grey
   text. One comparison, at the size the number deserves. */
.flip{border-block:0;background:transparent;gap:0;}
@media(min-width:820px){.flip{grid-template-columns:1fr 1fr;}}
.flip__side{
  background:transparent;border-top:var(--rule);
  padding:clamp(2rem,4vw,3rem) 0 clamp(2rem,4vw,3rem);
}
@media(min-width:820px){
  .flip__side + .flip__side{border-left:var(--rule);padding-left:clamp(2rem,4vw,3.5rem);}
}
.flip--mac{background:transparent;}
.flip__side .flip__k{
  font-size:clamp(4rem,13vw,10rem);line-height:.82;letter-spacing:-.05em;
  margin:.5rem 0 .75rem;
}
.flip__side p{font-size:1rem;max-width:44ch;}

/* --- 5. the Ultra card gets weight -------------------------- */
.studio-ed{border-width:1px;border-radius:18px;}
.studio-ed .studio-ed__k{font-size:clamp(3.2rem,8vw,5rem);}

/* --- 6. the closing quote stops being a caption ------------- */
.word blockquote{font-size:clamp(1.5rem,3.4vw,2.5rem);line-height:1.18;}
.word__shots{grid-template-columns:repeat(3,1fr);gap:.8rem;}


/* ============================================================
   PAGE TRANSITIONS

   Cross-document view transitions are declared above with
   @view-transition. This is only the timing: a short cross-fade
   with the incoming page easing up a few pixels, so moving
   between the store, the hard truth and the build guide reads
   as one site rather than three documents.
   ============================================================ */
/* @view-transition was tried first and is not enough: Firefox has no
   cross-document support at all, and every browser drops the animation
   under reduced motion. This curtain is plain DOM, so it behaves the
   same everywhere and site.js decides when it is appropriate. */
/* ============================================================
   MINIMAL PAGE TRANSITIONS & SPLASH CURTAIN
   ============================================================ */
.pt{
  position:fixed;inset:0;z-index:9999;
  display:flex;align-items:center;justify-content:center;
  background:#07080a;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .35s var(--ease-out),visibility 0s linear .35s;
}
.pt.is-on{
  opacity:1;visibility:visible;pointer-events:all;transition-delay:0s;
}
.pt.is-off{
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .35s var(--ease-out),visibility 0s linear .35s;
}
.pt__mark svg{
  height:24px;width:auto;color:var(--ink);display:block;
  filter:drop-shadow(0 0 16px rgba(255, 255, 255, 0.18));
}
.pt.is-splash .pt__mark svg{
  animation:pt-mark-pulse 1s ease-in-out infinite alternate;
}
@keyframes pt-mark-pulse{
  0%{opacity:.65;transform:scale(.97);}
  100%{opacity:1;transform:scale(1.02);}
}

/* While the splash is up the page underneath must not scroll. */
html.is-splashing,html.is-splashing body{overflow:hidden;}

@keyframes pg-arrive{from{opacity:0;}}
body{animation:pg-arrive .34s var(--ease-out);}

@media(prefers-reduced-motion:reduce){
  .pt{display:none !important;}
  body{animation:none;}
}


/* ============================================================
   MOTION

   Three layers, deliberately small:
     .ax     scroll reveals, driven by the observer in site.js
     .hx     the hero entrance, pure CSS so it runs before JS
     hovers  pointer feedback on the things you can be clicked

   Every one of them is switched off under reduced motion at the
   bottom of this block.
   ============================================================ */

/* --- the hero entrance -------------------------------------
   Plays smoothly once page is revealed (curtain dismissed) */
@keyframes hx-up{
  from{opacity:0;transform:translateY(22px);}
  to{opacity:1;transform:translateY(0);}
}
@keyframes hx-obj{
  from{opacity:0;transform:translateY(30px) scale(.96);}
  to{opacity:1;transform:translateY(0) scale(1);}
}

.hero--open .eyebrow,
.hero--open .boot,
.hero--open .hero__line,
.hero--open .hero__foot .lead,
.hero--open .hero__acts,
.hero--open .marks,
.hero--open .hero__object,
.hero--open .hero__note{
  opacity:0;transform:translateY(20px);
}

html.is-revealed .hero--open .eyebrow,
html.is-revealed .hero--open .boot,
html.is-revealed .hero--open .hero__line,
html.is-revealed .hero--open .hero__foot .lead,
html.is-revealed .hero--open .hero__acts,
html.is-revealed .hero--open .marks{
  animation:hx-up .85s cubic-bezier(0.16,1,0.3,1) both;
}
html.is-revealed .hero--open .eyebrow          {animation-delay:.06s;}
html.is-revealed .hero--open .boot             {animation-delay:.16s;}
html.is-revealed .hero--open .hero__line       {animation-delay:.26s;}
html.is-revealed .hero--open .hero__foot .lead {animation-delay:.38s;}
html.is-revealed .hero--open .hero__acts       {animation-delay:.50s;}
html.is-revealed .hero--open .marks            {animation-delay:.62s;}
html.is-revealed .hero--open .hero__object     {animation:hx-obj 1.1s cubic-bezier(0.16,1,0.3,1) both;animation-delay:.20s;}
html.is-revealed .hero--open .hero__note       {animation:hx-up .75s cubic-bezier(0.16,1,0.3,1) both;animation-delay:.80s;}

/* The boot lines type themselves in sequentially */
@keyframes hx-line{
  from{opacity:0;transform:translateX(-8px);}
  to{opacity:1;transform:translateX(0);}
}
html.is-revealed .hero--open .boot li{animation:hx-line .5s cubic-bezier(0.16,1,0.3,1) both;}
html.is-revealed .hero--open .boot li:nth-child(1){animation-delay:.30s;}
html.is-revealed .hero--open .boot li:nth-child(2){animation-delay:.44s;}
html.is-revealed .hero--open .boot li:nth-child(3){animation-delay:.58s;}
html.is-revealed .hero--open .boot li:nth-child(4){animation-delay:.72s;}

/* --- pointer feedback --------------------------------------
   Transform and opacity only, so none of this triggers layout. */
.btn{transition:background .22s ease,color .22s ease,border-color .22s ease,
     transform .18s var(--ease-out),box-shadow .22s var(--ease-out);}
.btn:hover{transform:translateY(-2px);}
.btn:active{transform:translateY(0);transition-duration:.06s;}
.btn--go:hover,
.btn--solid:hover{box-shadow:0 8px 22px -6px color-mix(in srgb,var(--emerald) 55%,transparent);}

.card{transition:border-color .3s ease,box-shadow .3s var(--ease-out);}
.card:hover{box-shadow:0 24px 50px -15px rgba(0,0,0,.65), 0 0 35px -10px rgba(16,185,129,.15);}

.nav__links a{position:relative;transition:color .2s ease;}
.nav__links a::after{
  content:"";position:absolute;left:0;right:0;bottom:-5px;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:right center;
  transition:transform .28s var(--ease-out);
}
.nav__links a:hover::after,
.nav__links a[aria-current="page"]::after{transform:scaleX(1);transform-origin:left center;}

.tcol,.step,.trap,.promise__row{transition:border-color .3s ease,transform .3s var(--ease-out);}
.tcol:hover,.step:hover,.trap:hover{transform:translateY(-3px);}

.foot__links a,.tk__empty a{transition:color .2s ease;}

/* --- scroll reveals ---------------------------------------- */
.ax, .rv{
  opacity:0;
  transform:translateY(28px);
  transition:
    opacity .75s cubic-bezier(0.16,1,0.3,1) var(--ax-d,0ms),
    transform .75s cubic-bezier(0.16,1,0.3,1) var(--ax-d,0ms),
    border-color .3s ease,
    box-shadow .3s cubic-bezier(0.16,1,0.3,1),
    background .22s ease,
    color .22s ease;
  will-change:opacity, transform;
}
.ax.in, .rv.in{
  opacity:1 !important;
  transform:translateY(0);
}
.ax--rise{
  opacity:0;
  transform:translateY(32px) scale(.97);
  transition:
    opacity .85s cubic-bezier(0.16,1,0.3,1) var(--ax-d,0ms),
    transform .85s cubic-bezier(0.16,1,0.3,1) var(--ax-d,0ms);
}
.ax--rise.in{
  opacity:1 !important;
  transform:translateY(0) scale(1);
}

@media(prefers-reduced-motion:reduce){
  .ax,.ax--rise,.rv{opacity:1;transform:none;transition:none;}
  .hero--open .eyebrow,.hero--open .boot,.hero--open .boot li,
  .hero--open .hero__line,.hero--open .hero__foot .lead,
  .hero--open .hero__acts,.hero--open .marks,
  .hero--open .hero__object,.hero--open .hero__note{animation:none;opacity:1;transform:none;}
  .btn:hover,.card:hover,.tcol:hover,.step:hover,.trap:hover{transform:none;}
}


/* ============================================================
   MOBILE

   Everything below is phone-only correction, kept in one place
   rather than sprinkled through the components it fixes.
   ============================================================ */

/* --- the mobile navigation & fullscreen menu ---------------- */
.nav__burger{
  display:none;margin-left:auto;
  width:44px;height:44px;padding:0;border:0;background:transparent;
  align-items:center;justify-content:center;
  cursor:pointer;color:#000000;-webkit-appearance:none;appearance:none;
  -webkit-tap-highlight-color:transparent;
  position:relative;z-index:100005;flex-shrink:0;
  transition:color .2s ease;
}
.nav.is-paper .nav__burger{color:#000000 !important;}
.nav:not(.is-paper) .nav__burger{color:var(--ink);}
.nav__burger-box{
  width:22px;height:16px;position:relative;
  display:flex;flex-direction:column;justify-content:space-between;align-items:center;
  pointer-events:none;
}
.nav__burger-line{
  display:block;width:22px;height:2px;background:currentColor;border-radius:2px;
  transform-origin:center center;
  transition:transform .32s cubic-bezier(0.16,1,0.3,1),opacity .22s cubic-bezier(0.16,1,0.3,1);
}
.nav__burger[aria-expanded="true"] .nav__burger-line:nth-child(1){
  transform:translateY(7px) rotate(45deg);
}
.nav__burger[aria-expanded="true"] .nav__burger-line:nth-child(2){
  opacity:0;transform:scaleX(0);
}
.nav__burger[aria-expanded="true"] .nav__burger-line:nth-child(3){
  transform:translateY(-7px) rotate(-45deg);
}

/* Fullscreen Menu Overlay — Always Sleek Deep Black */
.navmenu{
  position:fixed;inset:0;width:100vw;height:100vh;height:100dvh;
  z-index:100000;
  background:#090b0f !important;
  backdrop-filter:blur(28px) saturate(180%) !important;
  -webkit-backdrop-filter:blur(28px) saturate(180%) !important;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .32s cubic-bezier(0.16,1,0.3,1),visibility .32s cubic-bezier(0.16,1,0.3,1);
  overflow-y:auto;overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}
.navmenu.is-open{
  opacity:1;visibility:visible;pointer-events:auto;
}
.navmenu__in{
  display:flex;flex-direction:column;justify-content:space-between;
  box-sizing:border-box;width:100%;max-width:520px;min-height:100%;
  margin:0 auto;
  padding:calc(4.75rem + env(safe-area-inset-top, 0px)) var(--gutter) calc(2rem + env(safe-area-inset-bottom, 0px));
  transform:translateY(12px);
  transition:transform .28s cubic-bezier(0.16,1,0.3,1);
}
.navmenu.is-open .navmenu__in{
  transform:translateY(0);
  transition:transform .38s cubic-bezier(0.16,1,0.3,1);
}
.navmenu__meta{
  display:flex;align-items:center;justify-content:space-between;
  font-family:var(--font-mono);font-size:.65rem;letter-spacing:.2em;
  color:var(--stone);text-transform:uppercase;
  padding-bottom:1.25rem;border-bottom:1px solid rgba(255,255,255,0.08);
  opacity:0;
  transform:translateY(-6px);
  transition:opacity .18s ease,transform .18s ease;
}
.navmenu.is-open .navmenu__meta{
  opacity:1;
  transform:translateY(0);
  transition:opacity .35s cubic-bezier(0.16,1,0.3,1) .05s,transform .35s cubic-bezier(0.16,1,0.3,1) .05s;
}
.navmenu__meta-status{
  display:flex;align-items:center;gap:.45rem;color:var(--emerald);font-weight:500;
}
.navmenu__meta-status .status-dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--emerald);box-shadow:0 0 8px var(--emerald);
  display:inline-block;
}
.navmenu__links{
  display:flex;flex-direction:column;gap:.35rem;
  margin:auto 0;padding:1.5rem 0;
}
.navmenu__link{
  display:flex;align-items:center;justify-content:space-between;
  min-height:50px;padding:.85rem .5rem;
  font-family:var(--font-mono);font-size:1.15rem;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink);text-decoration:none !important;
  border-bottom:none !important;
  border-radius:6px;
  opacity:0;
  transform:translateY(14px);
  transition:opacity .18s ease,transform .18s ease,color .2s ease,background .2s ease,padding-left .2s ease;
}
.navmenu.is-open .navmenu__link{
  opacity:1;
  transform:translateY(0);
  transition:opacity .36s cubic-bezier(0.16,1,0.3,1),transform .36s cubic-bezier(0.16,1,0.3,1),color .2s ease,background .2s ease,padding-left .2s ease;
}
.navmenu.is-open .navmenu__link:nth-child(1){ transition-delay: .06s; }
.navmenu.is-open .navmenu__link:nth-child(2){ transition-delay: .10s; }
.navmenu.is-open .navmenu__link:nth-child(3){ transition-delay: .14s; }
.navmenu.is-open .navmenu__link:nth-child(4){ transition-delay: .18s; }
.navmenu.is-open .navmenu__link:nth-child(5){ transition-delay: .22s; }
.navmenu.is-open .navmenu__link:nth-child(6){ transition-delay: .26s; }

.navmenu__link:hover,
.navmenu__link:active,
.navmenu__link:focus-visible{
  color:var(--emerald);
  background:rgba(255,255,255,0.04);
  padding-left:.75rem;
  border-bottom:none !important;
  text-decoration:none !important;
}
.navmenu__link-num{
  font-family:var(--font-mono);font-size:.68rem;letter-spacing:.16em;
  color:var(--stone);opacity:.6;
}
.navmenu__link:hover .navmenu__link-num{
  color:var(--emerald);opacity:1;
}
.navmenu__footer{
  margin-top:1.5rem;display:flex;flex-direction:column;gap:.85rem;
  opacity:0;
  transform:translateY(14px);
  transition:opacity .18s ease,transform .18s ease;
}
.navmenu.is-open .navmenu__footer{
  opacity:1;
  transform:translateY(0);
  transition:opacity .38s cubic-bezier(0.16,1,0.3,1) .28s,transform .38s cubic-bezier(0.16,1,0.3,1) .28s;
}
.navmenu__cta{
  min-height:52px;justify-content:center;
  font-size:.75rem;letter-spacing:.2em;
}
.navmenu__sub{
  text-align:center;font-family:var(--font-mono);font-size:.62rem;
  letter-spacing:.16em;color:var(--stone);text-transform:uppercase;
}

@media (prefers-reduced-motion: reduce) {
  .navmenu,
  .navmenu__in,
  .navmenu__meta,
  .navmenu__link,
  .navmenu__footer,
  .nav__burger-line {
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}

/* Stacking and state when menu is open */
html.is-menu,html.is-menu body{
  overflow:hidden !important;overscroll-behavior:none !important;
}
html.is-menu .nav{
  z-index:99990 !important;
  background:transparent !important;
  border-bottom-color:transparent !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
html.is-menu .nav__mark,
html.is-menu .nav.is-paper .nav__mark{
  position:relative;z-index:100005;
  color:#f2efe9 !important;
}
html.is-menu .nav .nav__burger,
html.is-menu .nav.is-paper .nav__burger,
html.is-menu .nav__burger{
  position:relative;z-index:100005;
  color:#ffffff !important;
}
html.is-menu .nav__in{
  position:relative;z-index:100005;
}
html.is-menu .nav > .btn--go,
html.is-menu .nav__in > .btn--go{
  display:none !important;
}

@media(max-width:859px){
  .nav{
    padding:0.85rem 0.6rem 0.85rem var(--gutter) !important;
  }
  .nav__burger{
    display:flex;
    margin-right:-0.35rem;
  }
  .nav__mark{margin-right:auto;}
  .nav__in{gap:.5rem;padding:0 !important;}
}
@media(min-width:860px){
  .navmenu{display:none;}
}

@media(max-width:640px){
  .nav > .btn--go,.nav__in > .btn--go{display:none;}
}

/* --- teardown callouts --------------------------------------
   These are absolutely positioned as percentages of a full-bleed
   canvas. On a phone that put them off both edges at once, half a
   word wide and unreadable. Below 760px the canvas is not pinned
   anyway, so they become an ordinary legend underneath it. */
@media(max-width:760px){
  /* 16:9 at 390px wide is 219px tall -- a quarter of a phone screen,
     with the drive a strip in the middle of it. The frames only use
     the middle 57-66% of their width (measured across the sequence),
     so cropping the empty ground off each side buys a much squarer
     picture without cutting a single part off the exploded view. */
  /* No crop here any more. The frames ship pre-cropped to 2.27 with
     the parts filling x 6%-93%, so anything tighter clips the USB-A
     plug off one end and the end cap off the other. Earlier values
     (1.28, then 1.6) were measured against uncropped footage. */
  .seq__canvas{aspect-ratio:auto;object-fit:fill;}
  .seq__stage{display:flex;flex-direction:column;padding:0 var(--gutter);}
  .seq__frame{width:100%;}
  /* Diagonal leaders need room the phone does not have, so the callouts
     stop being an overlay and become a legend under the canvas. */
  .call{
    position:static;inset:auto;opacity:1 !important;transform:none !important;
    display:grid;grid-template-columns:auto 1fr;gap:.6rem;
    padding:.9rem 0;border-bottom:1px solid var(--hairline);
    text-align:left;
  }
  .call__lead{display:none;}
  .call__dot{position:static;margin:.45rem 0 0;}
  .call__txt{position:static;white-space:normal;text-align:left;}
  .call__txt small{display:block;max-width:none;}
  .seq__stage > .call:last-of-type{border-bottom:0;}
}

/* On a short window the two-line labels cost more than they are
   worth: reserving 165px a side left the drive smaller than it was
   before any of this. Titles only below 820px tall, which drops the
   label to one line and hands ~80px back to the picture. */
@media(min-width:861px) and (max-height:820px){
  .call__txt small{display:none;}
  .seq__frame{--bar:125px;}
}

/* --- countdown ----------------------------------------------
   flex-wrap left "43 SECONDS" alone on a second row. */
@media(max-width:560px){
  .clock{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem;}
  .clock__u{min-width:0;padding:.75rem .35rem;}
}

/* --- the buy dock -------------------------------------------
   The price line wrapped onto two rows and the bar grew tall
   enough to sit over the content it was meant to accompany. */
@media(max-width:560px){
  .dock{padding:.6rem var(--gutter);gap:.7rem;}
  .dock__meta{min-width:0;}
  .dock__meta strong{font-size:.9rem;}
  /* the price is one line or it is nothing -- wrapped, it grew the bar
     tall enough to cover the content it sits over */
  .dock__meta .mono{
    display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    font-size:.66rem;letter-spacing:.04em;
  }
  .dock .btn{padding:.75rem 1rem;flex:none;font-size:.66rem;letter-spacing:.1em;}
}
@media(max-width:380px){
  /* truncating mid-price is worse than a smaller price */
  .dock__meta .mono{font-size:.6rem;letter-spacing:0;}
  .dock .btn{padding:.75rem .85rem;}
}

/* --- legibility ----------------------------------------------
   The mono face was rendering between 9 and 10.6px on a phone --
   button labels included, which is the worst place for it. */
@media(max-width:760px){
  .mono,.eyebrow,.note,.call__txt{font-size:.72rem;}
  .card__was{font-size:.8rem;}
  .btn{font-size:.72rem;letter-spacing:.14em;padding:1rem 1.6rem;}
  .btn--sm{font-size:.68rem;padding:.75rem 1.1rem;}
  .card__cta{font-size:.72rem;}
  .card__flag{font-size:.68rem;}
  .etch,.gauge__read,.gauge__read span{font-size:.72rem;}
  .boot li,.boot b{font-size:.72rem;}
}

/* --- tap targets ---------------------------------------------
   The footer links are bare <a> in <li>, so they measured 19px.
   The wordmark is a 15px-tall SVG and was the smallest hit area
   in the bar. */
@media(max-width:760px){
  .foot__grid ul a{display:inline-block;padding:0.2rem 0;min-height:auto;}
  .nav__mark{display:inline-flex;align-items:center;min-height:44px;}
  .fit__opt{min-height:44px;align-items:center;}
  .fit__opt input{width:20px;height:20px;}
}

/* --- till reservation card & order section on mobile -------- */
@media(max-width:640px){
  .till{
    padding:1.25rem 1rem !important;
    max-width:100% !important;
    box-sizing:border-box !important;
    overflow:hidden !important;
  }
  .till__line{
    flex-wrap:wrap;
    gap:.4rem .75rem;
    font-size:.88rem;
  }
  .till__line:first-child{
    flex-direction:column;
    align-items:stretch;
    gap:.5rem;
  }
  .till__select-wrap{
    width:100%;
  }
  .till__select{
    width:100%;
    font-size:.86rem;
    padding:.55rem 2rem .55rem .75rem;
    box-sizing:border-box;
  }
  #openCheckoutModalBtn{
    white-space:normal !important;
    line-height:1.35 !important;
    padding:.85rem 1rem !important;
    font-size:.76rem !important;
    text-align:center !important;
  }
  .order__grid{
    max-width:100% !important;
    overflow-x:hidden !important;
  }
  .clock{
    max-width:100% !important;
  }
  .clock__u{
    padding:.65rem .25rem !important;
  }
  .clock__n{
    font-size:clamp(1.25rem, 5vw, 1.6rem) !important;
  }
  .clock__l{
    font-size:.5rem !important;
    letter-spacing:.12em !important;
  }
  .card__spec{
    min-height:auto !important;
    margin-bottom:.75rem !important;
  }
}

/* ============================================================
   RECEIPT MODAL (PRE-ORDER CONFIRMATION)
   ============================================================ */
.modal-backdrop {
  position: fixed !important;
  inset: 0 !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background: rgba(8, 10, 14, 0.90) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  z-index: 100000 !important;
  display: none;
  align-items: center !important;
  justify-content: center !important;
  padding: 1.5rem !important;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.modal-backdrop.is-open {
  display: flex !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

.modal-card {
  position: relative;
  width: 100%;
  max-width: 520px;
  background: #14161d;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 16px;
  padding: 2.25rem 2rem;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(78, 222, 128, 0.15);
  transform: translateY(20px) scale(0.97);
  transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
  color: var(--ink);
}

.modal-card--checkout {
  max-width: 580px;
  max-height: 90vh;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--hairline-hi) transparent;
}
.modal-card--horizontal {
  max-width: 940px;
  max-height: calc(100vh - 40px);
  padding: 2rem 2.25rem;
}
.modal-card--checkout::-webkit-scrollbar {
  width: 6px;
}
.modal-card--checkout::-webkit-scrollbar-thumb {
  background: var(--hairline-hi);
  border-radius: 4px;
}

/* Modal 2-Column Horizontal Grid */
.modal__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  min-width: 0;
}
.modal__pane {
  min-width: 0;
  max-width: 100%;
}

@media(min-width: 780px) {
  .modal__grid {
    grid-template-columns: 1.05fr 1fr;
    gap: 2.25rem;
    align-items: start;
  }
  .modal__pane--summary {
    border-right: 1px solid var(--hairline);
    padding-right: 2.25rem;
  }
  .modal__pane--form .form__row--2 {
    grid-template-columns: 1fr 1fr;
  }
}

.modal__perks {
  list-style: none;
  padding: 0.75rem 0 0;
  margin: 0.75rem 0 0;
  border-top: 1px dashed rgba(255, 255, 255, 0.08);
  display: grid;
  gap: 0.45rem;
  font-size: 0.76rem;
  color: var(--stone);
}
.modal__perks li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  line-height: 1.35;
}
.modal__perks svg {
  stroke: var(--emerald);
  flex-shrink: 0;
}

.modal__form-head {
  margin-bottom: 0.85rem;
}
.modal__form-head span {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--emerald);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.modal__form-head h4 {
  margin: 0.2rem 0 0;
  font-family: var(--font-display);
  font-size: 1.18rem;
  font-weight: 600;
  color: #fff;
  letter-spacing: -0.015em;
}

/* Modal Edition Tabs */
.modal__edition-tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.45rem;
  margin-bottom: 0.95rem;
}
.modal__tab {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  padding: 0.45rem 0.3rem;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
  color: var(--stone);
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.modal__tab:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--hairline-hi);
  color: var(--ink);
}
.modal__tab.is-active {
  background: rgba(16, 185, 129, 0.12);
  border-color: var(--emerald);
  color: #fff;
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.2);
}
.modal__tab-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.82rem;
}
.modal__tab-price {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--emerald);
}
.modal__tab.is-active .modal__tab-price {
  font-weight: 600;
}

/* Modal Summary Box */
.modal__summary-box {
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  padding: 0.85rem 1rem;
  margin-bottom: 0.65rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.modal__summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.82rem;
  color: var(--stone);
  gap: 0.5rem;
  min-width: 0;
}
.modal__summary-row b {
  color: var(--ink);
  font-family: var(--font-mono);
  font-weight: 500;
  text-align: right;
  white-space: normal;
  word-break: break-word;
}
.modal__summary-row--due {
  border-top: 1px solid var(--hairline);
  padding-top: 0.45rem;
  margin-top: 0.2rem;
  font-weight: 600;
  color: var(--ink);
}
.modal__summary-sub {
  font-size: 0.7rem;
  color: var(--stone);
  margin-top: 0.15rem;
  line-height: 1.35;
}

#modalCheckoutView.modal__grid,
#modalReceiptView.modal__grid {
  display: grid;
}
#modalCheckoutView[style*="display: none"],
#modalReceiptView[style*="display: none"],
#modalCheckoutView[style*="display:none"],
#modalReceiptView[style*="display:none"] {
  display: none !important;
}

.modal-backdrop.is-open .modal-card {
  transform: translateY(0) scale(1);
}

.modal__close {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--stone);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  line-height: 1;
  transition: all 0.18s ease;
}

.modal__close:hover {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.28);
}

.modal__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0.75rem;
  background: rgba(78, 222, 128, 0.12);
  border: 1px solid rgba(78, 222, 128, 0.35);
  border-radius: 9999px;
  color: var(--emerald);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 1.25rem;
}

.modal__badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--emerald);
  box-shadow: 0 0 8px var(--emerald);
}

.modal__title {
  font-family: var(--font-display);
  font-size: 1.65rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #fff;
  margin-bottom: 0.5rem;
  line-height: 1.2;
}

.modal__desc {
  color: var(--stone);
  font-size: 0.88rem;
  line-height: 1.5;
  margin-bottom: 1.5rem;
}

.modal__code-row {
  background: rgba(0, 0, 0, 0.4);
  padding: 0.85rem 1.15rem;
  border-radius: 8px;
  border: 1px dashed rgba(78, 222, 128, 0.35);
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.modal__code {
  font-family: var(--font-mono);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--emerald);
  letter-spacing: 0.08em;
}

.modal__copy-btn {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: var(--stone);
  padding: 0.4rem 0.85rem;
  border-radius: 6px;
  font-size: 0.75rem;
  font-family: var(--font-mono);
  cursor: pointer;
  transition: all 0.18s;
}

.modal__copy-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border-color: var(--emerald);
}

.modal__receipt-box {
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 1.15rem 1.25rem;
  margin-bottom: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.modal__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.85rem;
}

.modal__row-label {
  color: var(--stone);
}

.modal__row-val {
  font-family: var(--font-mono);
  font-weight: 600;
  color: #f1f5f9;
}

.modal__actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.modal__actions .btn {
  width: 100%;
  justify-content: center;
  text-align: center;
}

#payBtn,
.modal__pane--form .btn--wide {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  font-size: 0.82rem !important;
  letter-spacing: 0.08em !important;
  line-height: 1.4 !important;
  padding: 1rem 1.25rem !important;
  white-space: normal !important;
  box-sizing: border-box !important;
}

#payBtn #btnNow,
.modal__pane--form .btn--wide span {
  display: inline !important;
  vertical-align: baseline !important;
  font-weight: 700 !important;
}

@media(max-width: 640px) {
  .modal-backdrop {
    padding: 0.6rem !important;
  }
  .modal-card--horizontal {
    padding: 1.4rem 1rem !important;
    max-height: 94dvh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  .modal__edition-tabs {
    gap: 0.3rem !important;
    margin-bottom: 0.75rem !important;
  }
  .modal__tab {
    padding: 0.35rem 0.15rem !important;
  }
  .modal__tab-name {
    font-size: 0.76rem !important;
  }
  .modal__tab-price {
    font-size: 0.64rem !important;
  }
  .modal__summary-box {
    padding: 0.75rem 0.85rem !important;
  }
  .modal__summary-row {
    font-size: 0.78rem !important;
    gap: 0.4rem !important;
  }
  .modal__summary-row b {
    font-size: 0.76rem !important;
    text-align: right;
    max-width: 60%;
  }
  .modal__perks {
    font-size: 0.72rem !important;
  }
  .modal__form-head h4 {
    font-size: 1.05rem !important;
  }
  .modal__receipt-box {
    padding: 0.95rem 1rem !important;
    margin-bottom: 1rem !important;
  }
  .modal__row {
    font-size: 0.78rem !important;
  }
}

/* ============================================================
   DIY / NERD PAGE VIDEO WALKTHROUGHS & SHOWCASE
   ============================================================ */
.vid-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.65rem !important;
  margin-top: 0.85rem !important;
  padding: 0.4rem 0.85rem 0.4rem 0.45rem !important;
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid var(--hairline) !important;
  border-radius: 999px !important;
  text-decoration: none !important;
  color: inherit !important;
  max-width: max-content !important;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.18s ease !important;
}

.vid-link:hover {
  border-color: var(--emerald) !important;
  background: rgba(43, 189, 130, 0.08) !important;
  transform: translateY(-1px) !important;
}

.vid-link__icon-box {
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  border-radius: 50% !important;
  background: rgba(43, 189, 130, 0.15) !important;
  border: 1px solid rgba(43, 189, 130, 0.3) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--emerald) !important;
  flex: none !important;
}

.vid-link__icon-box svg,
.vid-icon {
  width: 10px !important;
  height: 10px !important;
  min-width: 10px !important;
  max-width: 10px !important;
  min-height: 10px !important;
  max-height: 10px !important;
  display: block !important;
  fill: currentColor !important;
  flex: none !important;
}

.vid-link__label {
  font-family: var(--font-mono) !important;
  font-size: 0.65rem !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--emerald) !important;
  font-weight: 600 !important;
}

.vid-link__title {
  color: var(--ink) !important;
  font-size: 0.8rem !important;
  font-weight: 400 !important;
}

.vid-link__ext {
  color: var(--dim) !important;
  font-size: 0.75rem !important;
  margin-left: 0.15rem !important;
  transition: color 0.18s ease, transform 0.18s ease !important;
}

.vid-link:hover .vid-link__ext {
  color: var(--emerald) !important;
  transform: translateX(1px);
}

/* Video Showcase Library */
.vlib {
  margin: 4.5rem 0 0 !important;
  border-top: var(--rule) !important;
  padding-top: 3.5rem !important;
}

.vgrid {
  display: grid !important;
  gap: 1.25rem !important;
  grid-template-columns: 1fr !important;
  margin-top: 2rem !important;
}

@media(min-width: 640px) {
  .vgrid { grid-template-columns: repeat(2, 1fr) !important; }
}

@media(min-width: 1040px) {
  .vgrid { grid-template-columns: repeat(4, 1fr) !important; }
}

.vcard {
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  border: 1px solid var(--hairline) !important;
  border-radius: 12px !important;
  background: var(--raise) !important;
  padding: 1.35rem !important;
  text-decoration: none !important;
  color: inherit !important;
  transition: border-color 0.2s ease, transform 0.2s ease, background 0.2s ease !important;
}

.vcard:hover {
  border-color: var(--emerald) !important;
  transform: translateY(-3px) !important;
  background: var(--card) !important;
}

.vcard__head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 0.85rem !important;
}

.vcard__tag {
  font-family: var(--font-mono) !important;
  font-size: 0.6rem !important;
  letter-spacing: 0.1em !important;
  color: var(--emerald) !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
}

.vcard__yt-badge {
  font-family: var(--font-mono) !important;
  font-size: 0.58rem !important;
  color: var(--stone) !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  padding: 0.15rem 0.45rem !important;
  border-radius: 4px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.3rem !important;
}

.vcard h4 {
  font-family: var(--font-display) !important;
  font-size: 1.05rem !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  margin: 0 0 0.5rem !important;
  color: var(--ink) !important;
}

.vcard p {
  color: var(--stone) !important;
  font-size: 0.82rem !important;
  line-height: 1.45 !important;
  margin: 0 0 1.25rem !important;
}

.vcard__foot {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  font-family: var(--font-mono) !important;
  font-size: 0.68rem !important;
  color: var(--dim) !important;
  padding-top: 0.85rem !important;
  border-top: var(--rule) !important;
}

.vcard__play {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.35rem !important;
  color: var(--emerald) !important;
  font-weight: 600 !important;
}

.vcard__play svg {
  width: 10px !important;
  height: 10px !important;
  min-width: 10px !important;
  max-width: 10px !important;
  min-height: 10px !important;
  max-height: 10px !important;
  fill: currentColor !important;
}

/* ============================================================
   HARDWARE & MODEL CAUTION CALLOUT BAR (RED BANNER)
   ============================================================ */
.warn-box {
  border: 1px solid rgba(239, 68, 68, 0.45);
  background: rgba(239, 68, 68, 0.06);
  border-radius: 14px;
  padding: clamp(1.5rem, 3.5vw, 2.25rem);
  margin: 2.75rem 0;
  position: relative;
  overflow: hidden;
}
.warn-box::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--danger, #ef4444);
}
.warn-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--danger, #ef4444);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-family: var(--font-mono);
  margin-bottom: 0.85rem;
  font-weight: 600;
}
.warn-tag i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--danger, #ef4444);
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.8);
  flex: none;
}
.warn-box h3 {
  margin: 0 0 0.75rem;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.2vw, 1.4rem);
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.warn-box p {
  margin: 0 0 0.85rem;
  color: var(--stone);
  font-size: 0.93rem;
  line-height: 1.6;
}
.warn-box p:last-child {
  margin-bottom: 0;
}
.warn-box code {
  font-family: var(--font-mono);
  font-size: 0.86em;
  background: rgba(255, 255, 255, 0.08);
  padding: 0.15em 0.45em;
  border-radius: 4px;
  color: var(--ink);
}




/* ============================================================
   HIGH-CONTRAST STRUCTURED COMPARISON TABLE
   ============================================================ */
.compare-container {
  margin-top: 2rem;
  border: 1px solid #3d3934;
  border-radius: 14px;
  background: #181715;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.55);
}
.compare-scroll-hint {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.65rem 1.25rem;
  background: #141311;
  border-bottom: 1px solid #332f2a;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: #9c958b;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.compare-scroll-hint span {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.compare-scroll-hint i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--emerald);
}
.compare-table-wrap {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box;
}
.spec-grid-tbl {
  width: 100%;
  border-collapse: collapse !important;
  table-layout: fixed;
  min-width: 960px;
  font-size: 0.9rem;
  text-align: left;
}
.spec-grid-tbl th,
.spec-grid-tbl td {
  padding: 1.1rem 1.25rem !important;
  border: 1px solid #332f2a !important;
  vertical-align: middle !important;
}
.spec-grid-tbl col.col-feature { width: 22%; }
.spec-grid-tbl col.col-core { width: 19.5%; }
.spec-grid-tbl col.col-pro { width: 19.5%; }
.spec-grid-tbl col.col-prime { width: 19.5%; }
.spec-grid-tbl col.col-ultra { width: 19.5%; }
.spec-grid-tbl thead th {
  background: #1d1b18 !important;
  padding: 1.5rem 1.25rem !important;
  vertical-align: top !important;
  border-bottom: 2px solid #3d3934 !important;
}
.spec-grid-tbl thead th.header-label-col {
  background: #191815 !important;
  vertical-align: bottom !important;
  padding-bottom: 1.25rem !important;
}
.header-label-title {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #9c958b;
  margin: 0 0 0.4rem;
}
.header-label-sub {
  font-size: 0.85rem;
  color: #cfc9be;
  margin: 0;
  line-height: 1.4;
}
.spec-card-head {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.spec-tag {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 0.2rem;
}
.spec-tag i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
}
.spec-tag--current { color: var(--emerald); }
.spec-tag--current i { background: var(--emerald); }
.spec-tag--popular { color: var(--amber); }
.spec-tag--popular i { background: var(--amber); }
.spec-tag--ultra { color: var(--silver); }
.spec-tag--ultra i { background: var(--silver); }
.spec-title {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.02em;
  margin: 0;
  line-height: 1.15;
}
.spec-price-row {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin-top: 0.2rem;
}
.spec-price {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--emerald);
}
.spec-price--ultra {
  color: var(--silver);
}
.spec-deposit {
  font-size: 0.74rem;
  color: var(--stone);
  margin: 0;
}
.spec-action-btn {
  margin-top: 0.75rem;
  display: inline-block;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.55rem 0.85rem;
  border-radius: 6px;
  text-decoration: none;
  border: 1px solid #4a453e;
  background: #24221e;
  color: var(--ink);
  transition: all 0.2s ease;
}
.spec-action-btn:hover {
  background: #312d28;
  border-color: var(--emerald);
  color: var(--emerald);
}
.spec-action-btn--selected {
  background: var(--emerald) !important;
  color: var(--void) !important;
  border-color: var(--emerald) !important;
}
.spec-grid-tbl tr.category-divider th {
  background: #141311 !important;
  padding: 0.75rem 1.25rem !important;
  border-top: 2px solid #3d3934 !important;
  border-bottom: 1px solid #332f2a !important;
}
.category-badge {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--emerald);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.category-badge i {
  display: inline-block;
  width: 14px;
  height: 2px;
  background: var(--emerald);
}
.spec-grid-tbl tbody th.feature-name {
  background: #191815 !important;
  font-weight: 600;
  color: var(--ink);
  font-size: 0.88rem;
  border-right: 2px solid #3d3934 !important;
}
.feature-name span {
  display: block;
  font-size: 0.74rem;
  color: var(--stone);
  font-weight: 400;
  margin-top: 0.2rem;
}
.spec-grid-tbl tbody td {
  background: #181715;
  transition: background 0.15s ease;
}
.spec-grid-tbl tbody tr:nth-child(even) td {
  background: #1c1a17;
}
.spec-val {
  display: block;
  font-size: 0.92rem;
  font-weight: 600;
  color: #ffffff !important;
  line-height: 1.25;
}
.spec-desc {
  display: block;
  font-size: 0.78rem;
  color: #aba497 !important;
  margin-top: 0.3rem;
  line-height: 1.4;
}
.spec-grid-tbl thead th.is-selected-col {
  background: #1f2a23 !important;
  border-top: 3px solid var(--emerald) !important;
  border-left: 2px solid var(--emerald) !important;
  border-right: 2px solid var(--emerald) !important;
}
.spec-grid-tbl tbody td.is-selected-col {
  background: rgba(43, 189, 130, 0.08) !important;
  border-left: 2px solid var(--emerald) !important;
  border-right: 2px solid var(--emerald) !important;
}
.spec-grid-tbl tbody tr:last-child td.is-selected-col {
  border-bottom: 2px solid var(--emerald) !important;
}


/* ============================================================
   MOBILE RESPONSIVENESS ENHANCEMENTS
   ============================================================ */
@media(max-width: 600px) {
  .hero__acts,
  .trade__acts,
  .closer__acts {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    gap: 0.75rem !important;
  }
  .hero__acts .btn,
  .trade__acts .btn,
  .closer__acts .btn {
    width: 100% !important;
    box-sizing: border-box !important;
    text-align: center !important;
    justify-content: center !important;
    padding: 0.95rem 1.25rem !important;
    margin-left: 0 !important;
  }
}

@media(max-width: 640px) {
  .compare-scroll-hint {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.35rem !important;
    padding: 0.75rem 1rem !important;
    font-size: 0.64rem !important;
  }
  .spec-grid-tbl {
    min-width: 820px !important;
  }
  .spec-grid-tbl th,
  .spec-grid-tbl td {
    padding: 0.85rem 0.9rem !important;
  }
  .spec-title {
    font-size: 1.15rem !important;
  }
  .spec-price {
    font-size: 1.1rem !important;
  }
  .spec-val {
    font-size: 0.85rem !important;
  }
  .spec-desc {
    font-size: 0.72rem !important;
  }
}


/* Cards compare button */
.cards__compare-wrap {
  display: flex;
  justify-content: center;
  margin-top: 2rem;
  width: 100%;
}
.cards__compare-btn {
  padding: 0.9rem 1.6rem;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  text-align: center;
  max-width: 100%;
  white-space: normal;
  line-height: 1.4;
}
@media(max-width: 580px) {
  .cards__compare-btn {
    width: 100%;
    padding: 0.85rem 1rem;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    justify-content: center;
  }
}

/* ============================================================
   PRIVACY USP & CURATED INDUSTRY SECTION
   ============================================================ */
.curate {
  position: relative;
  border-top: var(--rule);
}
.dim-strike {
  color: var(--dim);
  text-decoration: line-through;
  text-decoration-color: rgba(201, 162, 39, 0.6);
  font-style: normal;
}

/* --- Privacy Contrast Cards --- */
.privacy-contrast {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}
@media(min-width: 820px) {
  .privacy-contrast {
    grid-template-columns: 1fr 1fr;
  }
}
.contrast-card {
  border: 1px solid var(--hairline);
  border-radius: 16px;
  padding: clamp(1.6rem, 3.5vw, 2.5rem);
  background: var(--raise);
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transform-style: preserve-3d;
  will-change: transform;
  transition: border-color 0.25s ease, box-shadow 0.3s ease;
}
.contrast-card::before {
  content: ""; position: absolute; inset: 0; border-radius: 16px;
  background: radial-gradient(circle 280px at var(--mx,50%) var(--my,50%), rgba(255,255,255,.08), transparent 70%);
  opacity: 0; pointer-events: none; transition: opacity .3s ease; z-index: 1;
}
.contrast-card:hover::before { opacity: 1; }
.contrast-card--cloud {
  border-color: rgba(201, 162, 39, 0.25);
  background: linear-gradient(180deg, #171614 0%, var(--raise) 100%);
}
.contrast-card--velora {
  border-color: rgba(43, 189, 130, 0.35);
  background: linear-gradient(180deg, rgba(43, 189, 130, 0.05) 0%, var(--raise) 100%);
  box-shadow: 0 8px 32px -8px rgba(43, 189, 130, 0.08);
}
.contrast-tag {
  display: inline-block;
  padding: 0.3rem 0.65rem;
  border-radius: 99px;
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  font-weight: 600;
  margin-bottom: 0.8rem;
  transform: translateZ(18px);
}
.contrast-tag--cloud {
  background: rgba(201, 162, 39, 0.12);
  color: var(--amber);
  border: 1px solid rgba(201, 162, 39, 0.3);
}
.contrast-tag--velora {
  background: rgba(43, 189, 130, 0.14);
  color: var(--emerald);
  border: 1px solid rgba(43, 189, 130, 0.35);
}
.contrast-title {
  font-size: clamp(1.2rem, 2.2vw, 1.5rem);
  font-weight: 500;
  margin: 0 0 1.25rem;
  color: var(--ink);
  letter-spacing: -0.01em;
  transform: translateZ(14px);
}
.contrast-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 1.1rem;
  transform: translateZ(10px);
}
.contrast-list li {
  position: relative;
  padding-left: 1.5rem;
  font-size: 0.92rem;
  color: var(--stone);
  line-height: 1.55;
}
.contrast-list li b {
  color: var(--ink);
  font-weight: 500;
  display: block;
  margin-bottom: 0.15rem;
}
.contrast-card--cloud .contrast-list li::before {
  content: "✕";
  position: absolute;
  left: 0;
  top: 0.1rem;
  color: var(--amber);
  font-weight: 600;
  font-size: 0.85rem;
}
.contrast-card--velora .contrast-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0.1rem;
  color: var(--emerald);
  font-weight: 700;
  font-size: 0.95rem;
}

/* --- Curated Industry Grid --- */
.industry-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin-top: 2rem;
  perspective: 1200px;
}
@media(min-width: 620px) {
  .industry-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media(min-width: 1040px) {
  .industry-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
.ind-card {
  background: var(--raise);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  padding: 1.75rem 1.5rem;
  display: flex;
  flex-direction: column;
  position: relative;
  transform-style: preserve-3d;
  will-change: transform;
  transition: border-color 0.25s ease, background 0.25s ease, box-shadow 0.3s ease;
}
.ind-card::before {
  content: ""; position: absolute; inset: 0; border-radius: 14px;
  background: radial-gradient(circle 240px at var(--mx,50%) var(--my,50%), rgba(16,185,129,.1), transparent 70%);
  opacity: 0; pointer-events: none; transition: opacity .3s ease; z-index: 1;
}
.ind-card:hover::before { opacity: 1; }
.ind-card:hover {
  border-color: var(--hairline-hi);
  background: #1c1b19;
  box-shadow: 0 20px 40px -15px rgba(0,0,0,.65), 0 0 25px -8px rgba(16,185,129,.12);
}
.ind-card__badge {
  font-size: 0.65rem;
  color: var(--emerald);
  letter-spacing: 0.16em;
  margin-bottom: 0.85rem;
  transform: translateZ(20px);
}
.ind-card h4 {
  font-size: 1.12rem;
  font-weight: 500;
  color: var(--ink);
  margin: 0 0 0.65rem;
  line-height: 1.3;
  transform: translateZ(16px);
}
.ind-card p {
  font-size: 0.88rem;
  color: var(--stone);
  line-height: 1.55;
  margin: 0 0 1.25rem;
  flex: 1;
  transform: translateZ(10px);
}
.ind-card__foot {
  font-size: 0.62rem;
  color: var(--dim);
  border-top: var(--rule);
  padding-top: 0.85rem;
  letter-spacing: 0.08em;
  transform: translateZ(12px);
}

/* --- Curate Suggestion Box --- */
.curate-box {
  border: 1px solid var(--hairline);
  border-radius: 16px;
  padding: clamp(1.75rem, 4vw, 2.75rem);
  background: linear-gradient(135deg, #181c19 0%, var(--raise) 100%);
  display: grid;
  gap: clamp(1.5rem, 3.5vw, 2.5rem);
  align-items: center;
}
@media(min-width: 880px) {
  .curate-box {
    grid-template-columns: 1fr 1.2fr;
  }
}
.curate-form {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.curate-form__row {
  width: 100%;
}
.curate-form__row--split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
}
@media(min-width: 520px) {
  .curate-form__row--split {
    grid-template-columns: 1.1fr 1fr;
  }
}
.curate-form__area {
  resize: vertical;
  min-height: 72px;
  font-family: inherit;
}
.curate-form__status {
  margin: 0.4rem 0 0;
  font-size: 0.84rem;
  line-height: 1.4;
  color: var(--emerald);
  font-weight: 500;
}
.curate-form__status.err {
  color: var(--danger);
}

/* --- Pre-Order Modal Customization Box --- */
.modal__curate-box {
  margin-top: 1.25rem;
  border-top: 1px solid var(--hairline);
  padding-top: 1.15rem;
  text-align: left;
}
.modal__curate-head h4 {
  margin: 0.2rem 0 0;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--ink);
}
.modal__curate-head p {
  margin: 0.3rem 0 0.8rem;
  font-size: 0.82rem;
  color: var(--stone);
  line-height: 1.45;
}
.modal__curate-input-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.modal__curate-status {
  color: var(--emerald);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  margin-top: 0.2rem;
}

/* --- Modal & CTA Highlight Animations --- */

@keyframes order-pulse-glow {
  0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.5); }
  50% { box-shadow: 0 0 35px 8px rgba(16, 185, 129, 0.3); border-color: var(--emerald); }
  100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}
.till.pulse-highlight {
  animation: order-pulse-glow 1.2s ease-out;
}

/* --- Hide Netlify Collaborative Drawer / Preview Badges --- */
#netlify-drawer,
.netlify-drawer,
[data-netlify-drawer],
.netlify-badge,
#netlify-badge,
iframe[src*="netlify.app"],
iframe[src*="netlify-drawer"],
iframe[title*="Netlify"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}