/* ============================================================
   INVICTABLENDS — base + section 01 (nav, hero)
   ============================================================ */

/* html carries the ground colour itself: without it the canvas behind
   the page shows through on an over-scroll bounce and flashes white. */
html{ background: var(--void); color-scheme: dark; }
/* clip, never hidden — `overflow-x:hidden` turns html/body into a scroll
   container and silently kills every position:sticky pin on the site.
   Note the cost: clip also swallows overflowing children silently, which
   is how a nav button shipped amputated at 390px while every
   scrollWidth === innerWidth assertion still passed. Layout checks must
   assert element right-edges, not just document width. */
html, body{ overflow-x: clip; }

*,*::before,*::after{ box-sizing: border-box; }

/* The browser hides [hidden] with `display:none` at the very bottom of the
   cascade, so ANY class that sets display beats it. `.btn{display:inline-flex}`
   on a button marked hidden meant the account page showed "Place an order"
   to an unapproved facility. Anything hidden is hidden, whatever else it is. */
[hidden]{ display:none !important; }
body{
  margin:0; background: var(--void); color: var(--ink);
  font-family: var(--sans); font-size: var(--t-body); line-height:1.62;
  font-weight:400; letter-spacing: var(--track-body);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
img,svg,canvas{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; }
::selection{ background: var(--accent); color: var(--ink-invert); }

.wrap{ width:100%; max-width: var(--wrap); margin-inline:auto; padding-inline: var(--gutter); }

:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:2px; }

@supports selector(::-webkit-scrollbar){
  ::-webkit-scrollbar{ width:11px; }
  ::-webkit-scrollbar-track{ background: var(--pitch); }
  ::-webkit-scrollbar-thumb{ background: var(--slate-lift); border:3px solid var(--pitch); border-radius:99px; }
  ::-webkit-scrollbar-thumb:hover{ background: var(--accent); }
}

/* ---------- type atoms ---------- */
.eyebrow{
  font-family: var(--mono); font-size: var(--t-label); font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color: var(--ink-faint);
  margin:0 0 14px; display:flex; align-items:center; gap:13px;
}
.eyebrow::before{ content:""; width:32px; height:1px; background: var(--gold); flex:none; }

.display{
  font-family: var(--display); font-weight:800; font-size: var(--t-display);
  line-height:1.05; letter-spacing: var(--track-display); margin:0; color: var(--ink);
  text-wrap: balance;
}
.lede{
  font-size:1.0625rem; line-height:1.66; color: var(--ink-soft);
  max-width:41ch; margin:46px 0 0; font-weight:400;
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:11px; cursor:pointer;
  font-family: var(--sans); font-size:.9375rem; font-weight:700;
  letter-spacing:-.005em; white-space:nowrap;
  padding:15px 28px; border-radius: var(--radius-pill); border:1px solid transparent;
  background: var(--bone); color: var(--ink-invert);
  transition: background .4s var(--ease-out), color .4s var(--ease-out),
              border-color .4s var(--ease-out), box-shadow .4s var(--ease-out);
}
.btn .arrow{ transition: transform .5s var(--ease-soft); }
.btn:active{ transform: scale(.978); }
@media (hover:hover) and (pointer:fine){
  .btn:hover{ background: #fff; box-shadow: 0 0 0 1px var(--gold-line), var(--shadow-sm); }
  .btn:hover .arrow{ transform: translateX(5px); }
}
.btn-ghost{ background:transparent; color: var(--ink); border-color: rgba(244,241,233,.26); }
@media (hover:hover) and (pointer:fine){
  .btn-ghost:hover{ background:transparent; border-color: var(--gold-ink); box-shadow:none; }
}

.tlink{
  font-family: var(--sans); font-size:.9375rem; font-weight:600; letter-spacing:-.004em;
  color: var(--ink-soft); position:relative; display:inline-block;
}
/* The underline used to be pure hover decoration, which was fine while
   these links were mono caps — the face was the affordance. In sans 600
   they are a hair away from body copy, so a touch device saw a sentence
   that happened to be a link. Resting underline everywhere; the sweep is
   restored only where a pointer can actually trigger it. */
.tlink::after{
  content:""; position:absolute; left:0; bottom:-3px; height:1px; width:100%;
  background: currentColor; opacity:.42;
  transition: opacity .4s var(--ease-soft), transform .5s var(--ease-soft);
}
@media (hover:hover) and (pointer:fine){
  .tlink::after{ opacity:1; transform: scaleX(0); transform-origin: right; }
  .tlink:hover::after{ transform: scaleX(1); transform-origin: left; }
}

/* ============================================================
   NAV  — inside .wrap so it lands on the content grid.
   Previously it was full-bleed with its own gutter, which put the
   logo 36px left of the headline at 1512 and the CTA 36px right of
   everything else: four competing edges on one screen.
   ============================================================ */
.nav{
  position: fixed; inset: 0 0 auto 0; z-index: 60;
  padding-block: 20px; border-bottom: 1px solid transparent;
  transition: background .5s var(--ease-out), border-color .5s var(--ease-out),
              padding .5s var(--ease-out);
}
/* The links live on the bone side and the account cluster on the dark
   panel, because a nav that straddles the split would have half its items
   dark-on-dark. */
.nav .wrap{ display:flex; align-items:center; gap:clamp(24px,3.4vw,58px); }
.nav-right{ margin-left:auto; }
.nav.is-stuck{
  background: rgba(5,16,12,.82); backdrop-filter: blur(16px) saturate(1.3);
  border-bottom-color: var(--gold-line); padding-block:13px;
}
/* Type-only lockup. The pediment pictogram was deleted: Bodoni already
   makes the neoclassical statement, so a classical building beside a
   classical typeface said the same thing twice — and the icon said it
   worse, at a size where its columns turned to mush. */
.brand{ display:flex; align-items:center; flex:none; }
.brand-name{
  font-family: var(--display);
  font-size:1.34rem; font-weight:800; letter-spacing:.04em; line-height:1; text-transform:uppercase;
}
.brand-name small{
  display:block; font-family: var(--mono); font-size:var(--t-nano); font-weight:500;
  letter-spacing:.4em; color: var(--ink-faint); margin-top:4px; text-transform:uppercase;
}
.nav-links{ display:flex; align-items:center; gap:30px; }
.nav-links a{
  font-family: var(--sans); font-size:.9375rem; font-weight:600; letter-spacing:-.004em;
  color: var(--ink-soft); transition: color .35s var(--ease-out);
}
@media (hover:hover) and (pointer:fine){ .nav-links a:hover{ color: var(--ink); } }
.nav-right{ display:flex; align-items:center; gap:18px; flex:none; }
/* At the top of the page this cluster sits over the dark panel, so it
   inverts; once the bar takes its own background it goes back to ink. */

/* session.js swaps the right-hand pair (and the drawer's) once it knows who
   is signed in, so both live inside a wrapper element. `display:contents`
   removes that wrapper from layout, which is the ONLY thing keeping the two
   links as flex children of .nav-right and .nav-drawer.

   Without it the wrapper becomes a single flex item: on desktop the pair
   collapses inside one box and the pill lands on top of "Sign in", and in
   the drawer the links stop being flex items, so they lose the blockify that
   put each on its own row and `.drawer-cta{align-self}` silently stops
   applying. This rule lived in auth.css for one deploy — which index.html
   does not load — so the homepage nav shipped broken while every page that
   the tests opened was fine. It belongs here, beside the layout it holds up. */
[data-nav-auth], [data-drawer-auth]{ display: contents; }





/* burger — the element now exists rather than only its CSS */
.nav-burger{
  display:none; width:42px; height:42px; cursor:pointer; align-items:center; justify-content:center;
}
.nav-burger span{
  display:block; width:20px; height:1.5px; background: var(--ink); position:relative;
  transition: background .2s linear;
}
.nav-burger span::before,.nav-burger span::after{
  content:""; position:absolute; left:0; width:20px; height:1.5px; background: var(--ink);
  transition: transform .4s var(--ease-soft);
}
.nav-burger span::before{ transform: translateY(-6px); }
.nav-burger span::after{ transform: translateY(6px); }
body.menu-open .nav-burger span{ background:transparent; }
body.menu-open .nav-burger span::before{ transform: rotate(45deg); }
body.menu-open .nav-burger span::after{ transform: rotate(-45deg); }

.nav-drawer{
  position:fixed; inset:0; z-index:55; background: var(--void);
  display:flex; flex-direction:column; justify-content:center; gap:6px;
  padding: 0 var(--gutter);
  opacity:0; visibility:hidden; transition: opacity .42s var(--ease-out), visibility .42s;
}
body.menu-open .nav-drawer{ opacity:1; visibility:visible; }
/* `:not(.btn)` is load-bearing. `.nav-drawer a` (0,1,1) outranks `.btn`
   (0,1,0), so this block was overriding the button's own colour, face and
   padding: the CTA rendered as bone type on the bone pill — invisible —
   in a 2.5rem display face with `padding-inline: 0`, so the label also ran
   to the very edge of the pill. The menu links want these styles; the
   button already has its own and must keep them. */
.nav-drawer a:not(.btn){
  font-family: var(--display);
  font-size: var(--t-head); font-weight:700; letter-spacing: var(--track-head); color: var(--ink);
  padding:12px 0; border-bottom:1px solid var(--slate-lift);
}
.nav-drawer .drawer-cta{ margin-top:26px; align-self:flex-start; }

/* ============================================================
   HERO — dark, but not flat.
   The complaint about aminexa was never "dark", it was that a black
   page with a product on it has no material and no light. So the
   ground here is a green-black with real marble in it, one hard
   directional key from the upper left, a jade glow that behaves like
   a source, and gold only ever as a hairline. The device stands lit
   against it and all six blends sit on the stone at the foot.
   ============================================================ */
.hero{
  position:relative; min-height:100svh; display:flex; flex-direction:column;
  padding-top:100px; overflow:clip; isolation:isolate; background: var(--void);
}

/* ---------- the plate ---------- */
/* Decorative and full-bleed, so it must never take a click. It sits under
   the copy at z-index 0, but it spans the whole hero — any gap in the
   content above it was landing pointer events on the artwork. */
.hero-panel{ position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
/* Bleed, because this layer drifts. `data-para="0.14"` moves it by up to
   0.14 x (vh + ownHeight)/2 ~= 17% of the hero, so an inset:0 layer would
   pull its own edge into view at the bottom of the hero. 20% top and bottom
   covers the bound with room to spare; .hero-panel clips the overflow. */
.panel-img{
  position:absolute; inset:-20% 0;
  background: url("../img/myth-marble.jpg") 62% 46% / cover no-repeat;
  opacity:.86;
  /* the marble occupies the right; the left falls away to the ground so
     type has somewhere quiet to live */
  -webkit-mask-image: linear-gradient(96deg, transparent 6%, rgba(0,0,0,.35) 30%, #000 62%);
          mask-image: linear-gradient(96deg, transparent 6%, rgba(0,0,0,.35) 30%, #000 62%);
}
/* Counter-inset back to the hero's real bounds. This scrim is what makes the
   headline readable, and its stops (0/34/82/100%) were placed against the
   hero's height — inheriting the parent's 140% would slide the lower dark
   band down past the floor rail and drop contrast exactly where the rail
   sits. 20/140 = 14.29%. */
.panel-img::after{
  content:""; position:absolute; inset:14.29% 0;
  background:
    linear-gradient(180deg, rgba(3,10,7,.72) 0%, rgba(3,10,7,.10) 34%, rgba(3,10,7,.55) 82%, var(--void) 100%),
    linear-gradient(90deg, var(--void) 2%, rgba(5,16,12,.55) 26%, transparent 58%);
}
/* the active blend's light, thrown from behind the marble */
/* Drifts faster than the marble (0.26 vs 0.14) — that difference between two
   layers IS the depth; matching speeds would just move the whole picture. */
.panel-glow{
  position:absolute; inset:-30% 0; pointer-events:none; mix-blend-mode:screen;
  background:
    radial-gradient(38% 44% at 63% 52%,
      color-mix(in oklab, var(--accent) 46%, transparent) 0%,
      color-mix(in oklab, var(--accent) 14%, transparent) 42%,
      transparent 72%),
    radial-gradient(58% 30% at 74% 88%,
      color-mix(in oklab, var(--accent) 20%, transparent) 0%, transparent 70%);
  transition: background 520ms var(--ease-out);
}
/* grain — the cheapest thing that stops large dark areas banding */
.hero::after{
  content:""; position:absolute; inset:0; z-index:5; pointer-events:none;
  opacity:.32; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='.55'/></svg>");
}

.hero-grid{
  position:relative; z-index:2; display:grid; align-items:start; flex:1;
  grid-template-columns: minmax(0,1.06fr) minmax(0,1fr);
  gap: clamp(18px,2.4vw,44px); padding-top:clamp(24px,6vh,74px);
}
.hero-copy{ padding-block: clamp(14px,2.2vh,36px); }
.hero-copy .display{
  margin-left:-3px; color: var(--bone);
  text-shadow: 0 2px 30px rgba(3,10,7,.55);
}
.hero-cta{ display:flex; align-items:center; gap:22px; margin-top:44px; flex-wrap:wrap; }

/* ---------- the device ---------- */
/* The device floats rather than stands: raised off the floor, tipped off
   axis, and driven by one rAF loop in motion.js. Nothing here declares a
   transition on transform — a CSS ease on top of a per-frame write is what
   makes an object lag behind the cursor and rubber-band when you stop. */
.hero-object{
  position:relative; align-self:end; justify-self:center;
  height: clamp(360px, 62svh, 620px); display:flex; align-items:flex-end;
  margin-bottom: clamp(46px, 9vh, 132px);
  will-change: transform;
}
.pen-float{ display:block; height:100%; transform-origin:50% 64%; will-change: transform; }
/* the shadow is a separate element on the floor so it can react to the
   float independently — a drop-shadow filter would rise with the object */
.pen-cast{
  position:absolute; left:50%; bottom:-8%; width:150%; height:9%;
  transform:translateX(-50%); pointer-events:none; z-index:-1;
  background: radial-gradient(50% 50% at 50% 50%,
    rgba(0,0,0,.72) 0%, rgba(0,0,0,.34) 42%, transparent 74%);
  filter: blur(7px);
}
.pen-img{
  height:100%; width:auto; display:block;
  filter: drop-shadow(18px 24px 26px rgba(0,0,0,.7))
          drop-shadow(-10px 0 26px color-mix(in oklab, var(--accent) 34%, transparent));
}
.pen-window{
  position:absolute; left:50%; top:35.2%;
  width:6.6%; height:5.6%; transform:translateX(-52%);
  background: var(--accent-lift); opacity:.85; border-radius:1px;
  mix-blend-mode:color; transition: background 300ms linear;
}
.god-card{
  position:absolute; left:calc(100% + 32px); bottom:20%;
  border-left:2px solid var(--accent); padding:3px 0 3px 17px; white-space:nowrap;
}
.god-card .g-name{
  font-family: var(--display);
  font-size: var(--t-head); font-weight:700; letter-spacing:.05em;
  line-height:1; text-transform:uppercase; color: var(--bone);
}
.god-card .g-domain{
  font-family: var(--mono); font-size: var(--t-micro); letter-spacing:.18em;
  text-transform:uppercase; color: var(--accent); margin-top:9px;
}
.god-card .g-blend{
  font-family: var(--mono); font-size: var(--t-micro); letter-spacing:.06em;
  color: var(--ink-faint); margin-top:5px;
}

/* ---------- the stone band ---------- */
.hero-floor{
  position:relative; z-index:3; margin-top:auto;
  background:
    linear-gradient(180deg, rgba(3,10,7,.62) 0%, rgba(3,10,7,.80) 100%),
    url("../img/hero-plinth.jpg") 62% 34% / cover no-repeat,
    var(--horizon);
  border-top:1px solid var(--gold-line);
}
.floor-inner{ display:flex; align-items:center; gap:clamp(20px,3vw,56px); padding-block:16px; }
.floor-label{
  margin:0; flex:none;
  font-family: var(--display);
  font-size:1.15rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color: var(--bone);
}
.floor-label span{
  display:block; font-family: var(--mono); font-size:var(--t-nano); font-weight:400;
  letter-spacing:.24em; color: var(--ink-faint); margin-top:5px;
}

.rail{
  list-style:none; margin:0; padding:0; flex:1;
  display:grid; grid-template-columns:repeat(7,1fr); gap:clamp(4px,1vw,16px);
}
.rail li{ min-width:0; position:relative; }
.rail button{
  width:100%; display:flex; align-items:center; gap:11px; cursor:pointer;
  padding:9px 10px 11px 8px; border-radius:3px; text-align:left;
  border:1px solid transparent; background:transparent;
  transition: background .45s var(--ease-out), border-color .45s var(--ease-out);
}
.rail img{
  width:26px; height:auto; flex:none;
  filter: drop-shadow(0 5px 10px rgba(0,0,0,.75)) saturate(.55) brightness(.6);
  transition: transform .5s var(--ease-soft), filter .5s var(--ease-out);
}
.rail .r-name{
  font-family: var(--sans); font-size:.9375rem; font-weight:600; letter-spacing:-.002em;
  color: var(--ink-faint);
  transition: color .4s var(--ease-out);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.rail [aria-selected="true"]{
  background: rgba(255,255,255,.045); border-color: var(--gold-line);
}
.rail [aria-selected="true"] img{
  transform: translateY(-3px) scale(1.26);
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.8)) saturate(1.05) brightness(1.05);
}
.rail [aria-selected="true"] .r-name{ color: var(--bone); }
@media (hover:hover) and (pointer:fine){
  .rail button:hover .r-name{ color: var(--ink-soft); }
  .rail button:hover img{ transform: translateY(-2px) scale(1.12); filter: drop-shadow(0 7px 14px rgba(0,0,0,.75)) saturate(.85) brightness(.88); }
}
.rail button::after{
  content:""; position:absolute; left:8px; right:8px; bottom:4px; height:1px;
  background: var(--accent); transform:scaleX(0); transform-origin:left; opacity:0;
}
.rail [aria-selected="true"]::after{ opacity:.9; animation: tick var(--dwell,3.6s) linear forwards; }
@keyframes tick{ from{ transform:scaleX(0) } to{ transform:scaleX(1) } }

/* ---------- entrance ---------- */
[data-rise]{ opacity:0; transform: translate3d(0,22px,0); }
[data-rise].in{
  opacity:1; transform:none;
  transition: opacity .82s var(--ease-out), transform .94s var(--ease-soft);
}
/* the float loop owns .pen-float's transform, so the entrance animates
   opacity only and never fights it */
.hero-object[data-rise]{ transform:none; }
.hero-object[data-rise].in{ transform:none; }

@media (prefers-reduced-motion: reduce){
  [data-rise]{ opacity:1 !important; transform:none !important; }
  .pen-float{ transform: rotate(-7deg) !important; }
  .rail [aria-selected="true"]::after{ animation:none; transform:scaleX(1); }
  .panel-glow{ transition:none; }
}


/* ---------- responsive ---------- */
@media (max-width:1040px){
  .nav-links{ display:none; }
  .nav-burger{ display:flex; }
  .nav-right .btn{ display:none; }
  .hero{ padding-top:92px; }
}
@media (max-width:900px){
  .hero{ padding-top:80px; }
  .panel-img{ background-position:58% 34%;
    -webkit-mask-image: linear-gradient(180deg, transparent 4%, rgba(0,0,0,.5) 26%, #000 58%);
            mask-image: linear-gradient(180deg, transparent 4%, rgba(0,0,0,.5) 26%, #000 58%); }
  .hero-grid{ display:flex; flex-direction:column; align-items:stretch; padding-top:6px; gap:0; }
  .hero-copy{ display:contents; }
  .hero-copy .eyebrow{ order:1; }
  .hero-copy .display{ order:2; margin-left:0; }
  .hero-object{ order:3; }
  .hero-copy .lede{ order:4; }
  .hero-copy .hero-cta{ order:5; }
  .hero-object{
    align-self:center; height:clamp(156px,20svh,228px);
    margin:10px 0 10px; justify-content:center;
  }
  .pen-img{ filter: drop-shadow(12px 18px 20px rgba(0,0,0,.7))
                     drop-shadow(-6px 0 16px color-mix(in oklab, var(--accent) 28%, transparent)); }
  .god-card{ position:static; margin-left:22px; align-self:center; }
  .lede{ max-width:46ch; margin-top:14px; font-size:1rem; }
  .hero-cta{ margin-top:16px; }
  .floor-inner{ flex-direction:column; align-items:flex-start; gap:12px;
                padding-block:22px 16px; }
  /* seven across at 390px is under 50px a cell and overflows; a row of four
     over a row of three fits without any sideways scrolling */
  .rail{ width:100%; gap:6px 4px; grid-template-columns:repeat(4,minmax(0,1fr)); }
  .rail button{ flex-direction:column; gap:6px; padding:7px 2px 10px; text-align:center; }
  .rail .r-name{ font-size:.875rem; letter-spacing:-.002em; }
  .rail img{ width:26px; }
}
@media (max-width:620px){
  /* the kicker's gold rule forced an indent and read as clutter at this
     size; the type centres instead */
  .eyebrow::before{ display:none; }
  .hero-copy .eyebrow{ text-align:center; }
  .hero-copy .display{ text-align:center; }
  .hero-copy .hero-cta{ justify-content:center; }
  .hero{ padding-top:74px; }
  .hero-object{ height:clamp(148px,19svh,210px); margin:10px 0 2px; }
  .god-card{ margin-left:16px; }
  .lede{ margin-top:15px; }
  .hero-cta{ margin-top:14px; gap:12px; margin-bottom:4px; }
  .hero-cta .btn{ width:100%; }
  .eyebrow{ display:block; font-size:var(--t-micro); letter-spacing:.1em; }
}

/* ============================================================
   SHARED SECTION FURNITURE
   Three section shapes reused with different content, per the
   playbook: a headed band, a two-column split, and a full-width
   close. Nothing here invents a fourth.
   ============================================================ */
.sec{ position:relative; padding-block: clamp(84px, 12vh, 168px); }
/* .sec-head used to put max-width:980px on the same element as .wrap, so
   .wrap's margin-inline:auto centred a 980px box and pushed the copy to
   x=333 while the cards sat at 67 and the hero headline at 100 — three
   different left edges on one page. The measure now lives on the text. */
/* no max-width here: .wrap's 1440 is the page grid and must win */
.sec-head .sec-title{ max-width:20ch; }
.sec-head.center{ text-align:center; }
.sec-head.center .sec-title{ max-width:none; margin-inline:auto; }
.sec-head.center .eyebrow{ justify-content:center; }
.sec-title{
  font-size: clamp(1.95rem, 3.1vw, 3.1rem); font-weight:700; line-height:1.08;
  letter-spacing:-.028em; margin:0; color: var(--bone);
}
.sec-lede{
  font-size:1.0625rem; line-height:1.68; color: var(--ink-soft);
  max-width:48ch; margin:26px 0 0;
}
.sec-head.center .sec-lede{ margin-inline:auto; }

/* ---------- 02 · horizontal scroll ---------- */
.pantheon{ background: var(--void); }
.pantheon .sec-head{ margin-bottom: clamp(40px,6vh,72px); }
/* Same left edge as .wrap: a full-bleed scroller with its own gutter put
   the first card 35px left of every other element on the page. It keeps
   the right side bleeding, which is what a scroller should do. */
.hscroll{
  overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory;
  scrollbar-width:none; -ms-overflow-style:none;
  padding-left: calc(max(0px, (100% - var(--wrap)) / 2) + var(--gutter));
  padding-right: var(--gutter); padding-bottom:10px;
}
.hscroll::-webkit-scrollbar{ display:none; }
.hscroll-track{ display:flex; gap:clamp(14px,1.6vw,26px); width:max-content; }
.god{
  scroll-snap-align:center; flex:none;
  width: clamp(250px, 25vw, 360px);
  background: linear-gradient(180deg, var(--slate) 0%, var(--pitch) 100%);
  border:1px solid var(--slate-lift); border-radius:4px;
  padding: clamp(22px,2vw,32px); position:relative; overflow:hidden;
  transition: border-color .5s var(--ease-out), transform .6s var(--ease-soft);
}
.god::before{
  content:""; position:absolute; inset:auto 0 0 0; height:64%;
  background: radial-gradient(70% 100% at 50% 100%,
    color-mix(in oklab, var(--g) 26%, transparent), transparent 72%);
  opacity:.85; pointer-events:none;
}
.god-vial{ display:block; width:58%; margin:6px auto 22px; height:auto;
  filter: drop-shadow(0 18px 26px rgba(0,0,0,.72)); position:relative; z-index:1; }
.god-name{
  font-family:var(--display);
  font-size:1.62rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:var(--bone); margin:0; position:relative; z-index:1;
}
.god-dom{ font-family:var(--mono); font-size:var(--t-micro); letter-spacing:.18em;
  text-transform:uppercase; color:var(--g); margin:9px 0 0; position:relative; z-index:1; }
.god-note{ font-size:1rem; line-height:1.6; color:var(--ink-mid); margin:16px 0 0;
  position:relative; z-index:1; }
.god-blend{ font-family:var(--mono); font-size:var(--t-micro); letter-spacing:.05em;
  color:var(--ink-faint); margin:18px 0 0; padding-top:14px;
  border-top:1px solid var(--slate-lift); position:relative; z-index:1; }
@media (hover:hover) and (pointer:fine){
  .god:hover{ border-color: color-mix(in oklab, var(--g) 42%, var(--slate-lift)); transform: translateY(-4px); }
}
.hscroll-hint{
  display:flex; max-width:var(--wrap); align-items:center; gap:12px; margin:22px auto 0;
  font-family:var(--mono); font-size:var(--t-micro); letter-spacing:.24em;
  text-transform:uppercase; color:var(--ink-faint);
}
.hscroll-hint span{ display:block; width:54px; height:1px; background:var(--gold-line); }

/* ---------- 03 · the pen ---------- */
.pen-sec{ background: linear-gradient(180deg, var(--void), var(--pitch) 50%, var(--void)); }
.pen-grid{ display:grid; grid-template-columns: minmax(0,.92fr) minmax(0,1fr);
  gap: clamp(28px,4vw,72px); align-items:center; }
/* Image and callouts are two real columns, not an overlay.

   Positioning the callouts absolutely at left:56% assumed the pen never
   reached that far. It does between about 1200 and 1300px, where the image
   is at its tallest and therefore its widest, and all five blocks landed on
   top of the barrel. A grid track cannot be encroached on. */
.pen-figure{ position:relative; display:grid;
  grid-template-columns: minmax(0,auto) minmax(230px,1fr);
  gap: clamp(22px,3vw,56px); align-items:center;
  min-height: clamp(500px, 66svh, 660px); }
.pen-figure img{ grid-column:1; height: clamp(360px, 64svh, 620px); width:auto;
  filter: drop-shadow(16px 22px 26px rgba(0,0,0,.7))
          drop-shadow(-8px 0 22px color-mix(in oklab, var(--accent) 26%, transparent)); }
/* Distributed, not pinned.

   These used to sit at hand-set percentages (1/20/39/64/86%). That holds
   only while the copy occupies the height it happened to occupy the day the
   numbers were chosen: narrow the window and each callout gets NARROWER
   (its width is vw-based) so it wraps to more lines, while the pen beside it
   gets SHORTER — squeezed from both ends, the blocks ran into each other.
   A flex column cannot overlap however the copy wraps. */
.callouts{ list-style:none; margin:0; padding:0;
  grid-column:2; align-self:stretch;
  display:flex; flex-direction:column; justify-content:space-between; gap:16px; }
.callouts li{
  position:relative; left:auto; top:auto; width:100%; max-width:268px;
  font-size:.9375rem; line-height:1.5; color:var(--ink-mid);
  padding-left:34px;
}
.callouts li::before{
  content:""; position:absolute; left:0; top:.62em; width:24px; height:1px;
  background: var(--gold-line);
}
.callouts b{ display:block; font-family:var(--mono); font-size:var(--t-micro);
  letter-spacing:.14em; text-transform:uppercase; color:var(--bone);
  font-weight:500; margin-bottom:5px; }
.specs{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1px; margin:40px 0 0; background:var(--slate-lift);
  border:1px solid var(--slate-lift); }
.specs > div{ background:var(--void); padding:16px 18px; }
.specs dt{ font-family:var(--mono); font-size:var(--t-micro); letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink-faint); }
.specs dd{ margin:7px 0 0; font-size:1rem; color:var(--bone); }

/* ---------- 04 · vials ---------- */
.vials-sec{ background: var(--void); }
.vial-grid{ display:grid; grid-template-columns:repeat(7,minmax(0,1fr));
  gap:clamp(8px,1.4vw,22px); margin-top:clamp(44px,7vh,80px); }
.vial-cell{
  position:relative; text-align:center; padding:clamp(18px,2vw,30px) 10px 22px;
  border:1px solid var(--slate-lift); border-radius:4px;
  background: linear-gradient(180deg, var(--pitch), var(--void));
  transition: border-color .5s var(--ease-out), background .5s var(--ease-out);
}
.vial-cell img{ width:72%; height:auto; margin:0 auto 16px;
  filter: drop-shadow(0 16px 22px rgba(0,0,0,.7)); }
.vial-cell b{ display:block; font-family:var(--display); font-size:1.02rem; font-weight:700;
  letter-spacing:.055em; text-transform:uppercase; color:var(--bone); }
.vial-cell span{ display:block; font-family:var(--mono); font-size:var(--t-nano);
  letter-spacing:.16em; text-transform:uppercase; color:var(--ink-faint); margin-top:7px; }
@media (hover:hover) and (pointer:fine){
  .vial-cell:hover{ border-color: color-mix(in oklab, var(--g) 44%, var(--slate-lift));
                    background: linear-gradient(180deg, var(--slate), var(--void)); }
}

/* ---------- 05 · standard ---------- */
.standard-sec{ background: var(--pitch); }
.std-grid{ display:grid; grid-template-columns: minmax(0,1fr) minmax(0,1.05fr);
  gap: clamp(28px,5vw,86px); align-items:center; }
.std-img{
  aspect-ratio: 4/5; border-radius:4px; border:1px solid var(--slate-lift);
  background: url("../img/myth-relief.jpg") center / cover no-repeat;
  filter: grayscale(.5) brightness(.42) contrast(1.12);
  position:relative;
}
.std-img::after{
  content:""; position:absolute; inset:0; border-radius:4px;
  background: linear-gradient(160deg, transparent 40%,
    color-mix(in oklab, var(--accent) 26%, transparent) 100%);
  mix-blend-mode:screen;
}
.std-list{ list-style:none; margin:38px 0 0; padding:0; }
.std-list li{ padding:20px 0; border-top:1px solid var(--slate-lift);
  font-size:1rem; line-height:1.6; color:var(--ink-mid); }
.std-list b{ display:block; font-family:var(--mono); font-size:var(--t-micro);
  letter-spacing:.16em; text-transform:uppercase; color:var(--bone);
  font-weight:500; margin-bottom:7px; }

/* ---------- 06 · CTA ---------- */
.cta-sec{
  background:
    linear-gradient(180deg, rgba(3,10,7,.80), rgba(3,10,7,.90)),
    url("../img/hero-plinth.jpg") center 40% / cover no-repeat, var(--horizon);
  border-block:1px solid var(--gold-line); text-align:center;
}
.cta-inner{ max-width:760px; }
.cta-inner .eyebrow{ justify-content:center; }
.cta-title{ font-size: clamp(2.3rem, 4.4vw, 4.2rem); line-height:1.06; letter-spacing:-.03em;
  margin:0; color:var(--bone); }
.cta-inner .sec-lede{ margin-inline:auto; }
.cta-row{ display:flex; justify-content:center; align-items:center; gap:24px;
  margin-top:40px; flex-wrap:wrap; }

/* ---------- footer ---------- */
.foot{ background: var(--void); padding-top: clamp(40px,5.5vh,68px); }
/* The range list ran six lines and pushed the footer past a screen on a
   phone; it is two columns of short entries now. */
.foot-grid{ display:grid; grid-template-columns: 1.5fr 1.2fr .8fr;
  gap: clamp(20px,3vw,54px); padding-bottom: clamp(26px,4vh,46px); }
.foot-grid #foot-range{ columns:2; column-gap:18px; }
.foot .brand-name{ font-size:1.3rem; }
.foot-note{ font-size:.9375rem; line-height:1.55; color:var(--ink-mid);
  max-width:38ch; margin:13px 0 0; }
.foot h4{ font-family:var(--mono); font-size:var(--t-micro); font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; color:var(--ink-faint); margin:0 0 12px; }
.foot ul{ list-style:none; margin:0; padding:0; }
.foot li{ margin-bottom:7px; break-inside:avoid; }
.foot li a{ font-size:.9375rem; color:var(--ink-soft); transition:color .35s var(--ease-out); }
@media (hover:hover) and (pointer:fine){ .foot li a:hover{ color:var(--bone); } }
.foot-base{ border-top:1px solid var(--slate-lift); padding-block:16px 22px; }
.foot-base p{ margin:0; font-family:var(--mono); font-size:var(--t-micro);
  letter-spacing:.1em; color:var(--ink-faint); }

/* ---------- section responsive ---------- */
@media (max-width:1180px){
  .vial-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  /* seven in rows of three: the last one sits in the middle, not alone at the left */
  .vial-grid > :nth-child(7):last-child{ grid-column:2; }
  /* Absolute callouts need a column of empty space beside the pen. Once
     .pen-grid collapses there is no such column, so they stop floating
     and become a plain grid under the image — a layout that cannot
     collide no matter how the copy wraps. */
  .pen-figure{ grid-template-columns:1fr; justify-items:center; min-height:0; }
  .pen-figure img{ grid-column:1; }
  .callouts{ grid-column:1; display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
    gap: 20px clamp(20px,3vw,44px); width:100%; margin-top:36px; }
  .callouts li{ width:auto; max-width:none; font-size:1rem; }
}
@media (max-width:900px){
  :root{ --dwell: 2s; }
  /* Sideways scrolling hides half the range behind a gesture. On a phone
     the six become a plain two-up grid — everything visible, nothing to
     discover. */
  .hscroll{ overflow:visible; scroll-snap-type:none; padding-inline: var(--gutter); }
  .hscroll-track{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
                  gap:12px; width:auto; }
  .god{ width:auto; padding:18px 16px 22px; }
  .god-vial{ width:64%; margin-bottom:16px; }
  .god-name{ font-size:1.24rem; }
  .god-note{ font-size:.9375rem; margin-top:12px; }
  .god-blend{ margin-top:14px; padding-top:11px; font-size:var(--t-nano); }
  .hscroll-hint{ display:none; }

  .pen-grid, .std-grid{ grid-template-columns:1fr; gap:34px; }
  .pen-figure{ order:2; }
  .callouts{ grid-column:1; display:grid; grid-template-columns:repeat(2,1fr);
             gap:16px; margin-top:26px; }
  .callouts li{ width:auto; max-width:none; }
  .pen-figure{ grid-template-columns:1fr; justify-items:center; min-height:0; }
  .std-img{ aspect-ratio:16/10; }
  .foot-grid{ grid-template-columns:1fr 1fr; gap:22px 18px; }
  .foot-grid > :first-child{ grid-column:1/-1; }
  /* six names in one column made the footer six rows deep next to a
     four-row column; two-up evens them and cuts the height */
  .foot-grid #foot-range{ columns:2; column-gap:14px; }
}
@media (max-width:620px){
  .vial-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .vial-grid > :nth-child(7):last-child{ grid-column:1 / -1; justify-self:center; width:calc((100% - 8px) / 2); }
  .callouts{ grid-template-columns:1fr; gap:18px; }
  .specs{ grid-template-columns:1fr; }
  .cta-row{ flex-direction:column; align-items:stretch; }
  .cta-row .btn{ width:100%; }
}

/* ============================================================
   Vial lightbox — the label carries real type (lot line, dose,
   research-use notice) that is unreadable at rail size, so any
   vial can be opened at full resolution.
   ============================================================ */
.zoomable{ cursor: zoom-in; }
.lightbox{
  position:fixed; inset:0; z-index:200; display:grid; place-items:center;
  padding: clamp(18px,4vw,54px);
  background: rgba(3,10,7,.86); backdrop-filter: blur(10px) saturate(1.1);
  opacity:0; visibility:hidden; transition: opacity .34s var(--ease-out), visibility .34s;
}
.lightbox.on{ opacity:1; visibility:visible; }
.lightbox img{
  max-height: min(88svh, 900px); width:auto; max-width:100%;
  filter: drop-shadow(0 40px 70px rgba(0,0,0,.8));
  transform: scale(.94); transition: transform .42s var(--ease-soft);
}
.lightbox.on img{ transform: scale(1); }
.lb-cap{
  position:absolute; left:0; right:0; bottom: clamp(18px,4vh,42px); text-align:center;
  font-family:var(--mono); font-size:var(--t-micro); letter-spacing:.2em;
  text-transform:uppercase; color: var(--ink-soft);
}
.lb-close{
  position:absolute; top: clamp(14px,3vh,30px); right: clamp(14px,3vw,30px);
  width:44px; height:44px; border-radius:999px; cursor:pointer;
  border:1px solid var(--slate-lift); background: rgba(0,0,0,.4); color: var(--bone);
  display:grid; place-items:center; font-size:1.1rem; line-height:1;
  transition: border-color .3s var(--ease-out), background .3s var(--ease-out);
}
@media (hover:hover) and (pointer:fine){
  .lb-close:hover{ border-color: var(--gold-line); background: rgba(0,0,0,.66); }
}
@media (prefers-reduced-motion: reduce){
  .lightbox, .lightbox img{ transition:none; }
}

/* ============================================================
   ACCESS GATE
   Formulas, formats and the catalog are for verified facilities, so an
   unverified visitor gets the route in rather than the shelf — the same
   call Clearform makes on /shop.

   The gated block is clipped to a teaser and faded out rather than
   blurred at full height: a whole page under blur(7px) reads as a
   rendering fault, while a fade reads as "there is more here".
   ============================================================ */
.lock-wrap{ position:relative; }

/* unlocked: these rules must leave no trace at all */
.lock-blur{ transition: filter .5s var(--ease-out); }
.gate{ display:none; }

body.locked .lock-blur{
  filter: blur(6px) saturate(.55);
  opacity:.44;
  pointer-events:none;
  user-select:none;
  max-height: clamp(180px, 26vh, 300px);
  overflow:hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 18%, transparent 92%);
          mask-image: linear-gradient(180deg, #000 18%, transparent 92%);
}

body.locked .gate{
  display:block; position:relative; z-index:2;
  max-width:660px; margin: -46px auto 0; text-align:center;
  padding: clamp(30px,4vw,46px) clamp(22px,3vw,40px) clamp(28px,3.4vw,42px);
  background: linear-gradient(180deg, var(--slate), var(--pitch));
  border:1px solid var(--gold-line); border-radius:4px;
  box-shadow: var(--shadow-md);
}
.gate .eyebrow{ justify-content:center; }
.gate-h{
  font-size: clamp(1.45rem, 2.6vw, 2.05rem); font-weight:700;
  line-height:1.16; letter-spacing:-.024em; color:var(--bone); margin:0 0 15px;
}
.gate-lead{
  font-size:1rem; line-height:1.68; color:var(--ink-soft);
  max-width:46ch; margin:0 auto 26px;
}
.gate-ctas{ display:flex; gap:22px; justify-content:center; align-items:center; flex-wrap:wrap; }
.gate-note{
  margin:24px 0 0; padding-top:18px; border-top:1px solid var(--slate-lift);
  font-family:var(--mono); font-size:var(--t-nano); letter-spacing:.06em;
  line-height:1.7; color:var(--ink-faint);
}

@media (max-width:620px){
  body.locked .gate{ margin-top:-34px; }
  .gate-ctas{ flex-direction:column; gap:16px; }
  .gate-ctas .btn{ width:100%; }
}

/* the detail table is product data, not a teaser — it is not rendered to
   an unverified visitor at all */
body.locked #cat-detail{ display:none; }
/* the tag under the pantheon head is a .wrap, so it needs the gutter and
   a little air from the rail below it */

/* ============================================================
   HOMEPAGE SUPPORT SECTIONS
   Trust strip, catalog access, who-we-serve, stats, how it works.
   Same furniture as the rest of the page — no new section type,
   no new colour, nothing here invents a component.
   ============================================================ */

/* ---------- trust strip: one thin rule under the hero ---------- */
.trust-strip{
  background: var(--pitch);
  border-block: 1px solid var(--slate-lift);
}
.trust-row{
  list-style:none; margin-block:0; display:flex; flex-wrap:wrap;
  align-items:center; justify-content:space-between;
  gap: 12px clamp(18px,3vw,44px); padding-block:17px;
}
.trust-row li{
  display:flex; align-items:center; gap:10px;
  font-family:var(--mono); font-size:var(--t-nano); letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-mid); white-space:nowrap;
}
.trust-row li::before{
  content:""; width:5px; height:5px; flex:none; border-radius:50%;
  background: var(--accent);
}

/* ---------- catalog access ---------- */
.access-sec{ background: var(--pitch); border-block:1px solid var(--slate-lift); }
.access-inner .sec-lede{ max-width:58ch; }
.access-inner .cta-row{ justify-content:flex-start; margin-top:34px; }
/* one button, two states — an approved account should not be asked to apply */
.unlocked-only{ display:inline-flex; }
.locked-only{ display:none; }
body.locked .unlocked-only{ display:none; }
body.locked .locked-only{ display:inline-flex; }

/* ---------- who we serve ---------- */
.serve-sec{ background: var(--void); }
.serve-sec .sec-head{ margin-bottom: clamp(32px,5vh,58px); }
.serve-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap: clamp(12px,1.6vw,22px); }
.serve-card{
  display:flex; flex-direction:column; padding: clamp(24px,2.4vw,36px);
  background: linear-gradient(180deg, var(--slate), var(--pitch));
  border:1px solid var(--slate-lift); border-radius:4px;
  transition: border-color .45s var(--ease-out), transform .5s var(--ease-soft);
}
.serve-card h3{
  font-family:var(--display); font-size:1.28rem; font-weight:700;
  letter-spacing:-.016em; color:var(--bone); margin:0 0 13px;
}
.serve-card p{ font-size:1rem; line-height:1.62; color:var(--ink-mid); margin:0 0 22px; }
.serve-go{
  margin-top:auto; font-family:var(--sans); font-size:.9375rem; font-weight:600;
  letter-spacing:-.004em; color:var(--accent-lift);
  display:inline-flex; align-items:center; gap:9px;
}
.serve-go .arrow{ transition: transform .5s var(--ease-soft); }
@media (hover:hover) and (pointer:fine){
  .serve-card:hover{ border-color: color-mix(in oklab, var(--accent) 46%, var(--slate-lift));
                     transform: translateY(-3px); }
  .serve-card:hover .arrow{ transform: translateX(5px); }
}

/* ---------- stats ---------- */
.stats-sec{ background: var(--pitch); border-block:1px solid var(--slate-lift); }
.stats-row{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap: clamp(20px,2.4vw,40px); padding-block: clamp(44px,6vh,74px); margin-block:0;
}
.stats-row dt{
  font-family:var(--display); font-size: clamp(1.75rem,3vw,2.6rem); font-weight:800;
  letter-spacing:-.028em; line-height:1; color:var(--bone);
}
.stats-row dd{
  margin:14px 0 0; padding-top:14px; border-top:1px solid var(--gold-line);
  font-size:.9375rem; line-height:1.56; color:var(--ink-mid);
}

/* ---------- how it works ---------- */
.how-sec{ background: var(--void); }
.how-sec .sec-head{ margin-bottom: clamp(32px,5vh,58px); }
.how-row{
  list-style:none; margin-block:0; padding-block:0; counter-reset:step;
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap: clamp(20px,3vw,52px);
}
.how-row li{ position:relative; padding-top:52px; }
.how-row li::before{
  counter-increment:step; content:"0" counter(step);
  position:absolute; top:0; left:0;
  font-family:var(--mono); font-size:var(--t-nano); letter-spacing:.2em;
  color:var(--gold-ink);
}
.how-row li::after{
  content:""; position:absolute; top:26px; left:0; width:28px; height:1px;
  background: var(--gold-line);
}
.how-row b{
  display:block; font-family:var(--display); font-size:1.2rem; font-weight:700;
  letter-spacing:-.014em; color:var(--bone); margin-bottom:11px;
}
.how-row span{ font-size:1rem; line-height:1.62; color:var(--ink-mid); }

@media (max-width:1040px){
  .serve-grid{ grid-template-columns:1fr; }
  .stats-row{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .how-row{ grid-template-columns:1fr; gap:30px; }
  .how-row li{ padding-top:44px; }
}
@media (max-width:620px){
  /* four claims on one line becomes four truncated claims; stack them */
  .trust-row{ flex-direction:column; align-items:flex-start; gap:11px; padding-block:20px; }
  .stats-row{ grid-template-columns:1fr; gap:26px; }
  .access-inner .cta-row{ flex-direction:column; align-items:stretch; }
  .access-inner .cta-row .btn{ width:100%; }
}

/* ============================================================
   VIALS WITHHELD (unverified visitor)
   The artwork carries the formula on its label, so it is not rendered
   until the account is verified. These rules only close the space it
   left — nothing here hides anything, motion.js simply never emits it.
   ============================================================ */
.vials-hidden .rail button{ padding-block:12px; }
.vials-hidden .god{ padding-top: clamp(26px,3vw,40px); }
/* the card's image reserved the top of the box; without it the name would
   sit hard against the border */
.vials-hidden .god-name{ margin-top:0; }
.vials-hidden .vial-cell{ padding-block: clamp(18px,2vw,26px); }

/* ---------- who we serve: the mirror of the catalog band above it ----------
   Two full-width left-ragged headings back to back read as one long
   column. Flipping this one right gives the pair an axis. */
.serve-sec .sec-head{ text-align:right; }
.serve-sec .sec-head .eyebrow{ justify-content:flex-start; flex-direction:row-reverse; }
.serve-sec .sec-head .eyebrow::before{ margin-left:13px; margin-right:0; }
.serve-sec .sec-head .sec-title{ max-width:none; margin-left:auto; }
.serve-sec .sec-head .sec-lede{ margin-left:auto; }
@media (max-width:620px){
  /* at phone width a right rag fights the left-aligned cards under it */
  .serve-sec .sec-head{ text-align:left; }
  .serve-sec .sec-head .eyebrow{ justify-content:flex-start; flex-direction:row; }
  .serve-sec .sec-head .eyebrow::before{ margin-left:0; margin-right:13px; }
  .serve-sec .sec-head .sec-lede{ margin-left:0; }
}
/* an unhydrated vial is a real <img> with width/height and no source; it
   would otherwise reserve a box and paint a broken-image glyph */
img[data-vial]:not([src]){ display:none; }

/* the Pantheon section is a statement block now, not a rail */
.pantheon .sec-head{ margin-bottom:0; }
.pantheon .sec-head.center .sec-lede{ max-width:64ch; }

/* ---------- hero readout: name stays, the rest is product data ----------
   Blurred in place rather than clipped: these are single short lines with
   nothing to fade into, and the layout must not move when they unlock. */
body.locked .lock-inline{
  filter: blur(5px) saturate(.45);
  opacity:.62;
  pointer-events:none;
  user-select:none;
}
/* the locked stand-in for the range list — one line, same column width, so
   the footer grid does not shift when an account is approved */
.foot-locked a{ color: var(--gold-ink); }

/* ============================================================
   BLANKET OVERLAP
   ------------------------------------------------------------
   Each panel pins at the top and the next one slides up over it, like a
   card laid on the one before. The whole mechanism is `position:sticky`
   plus DOM order: a later sibling paints above an earlier one, so no
   z-index ladder is needed — and adding one would only create stacking
   contexts that trap the nav.

   Two things are load-bearing:

   - Every panel MUST be opaque. A transparent panel shows the pinned
     panel underneath through it, which reads as a rendering fault
     rather than as depth. .cta-sec inherited the body colour and was
     itself transparent, so it is given the colour explicitly below.

   - The radius and the shadow ARE the effect. Without them the covering
     panel is a hard edge sliding over another hard edge and the eye
     reads a seam, not a card.

   Panels taller than the viewport are bottom-pinned by blanket.js, or
   everything below their first screenful would be unreachable.
   ============================================================ */
.stack{ position:relative; }
.stack > section{
  position: sticky;
  top: 0;                       /* blanket.js overrides for tall panels */
  border-radius: clamp(16px, 2vw, 30px) clamp(16px, 2vw, 30px) 0 0;
  /* the lift above the card, then a hairline to catch the light on its
     own top edge — the two together are what separate the two planes */
  box-shadow: 0 -30px 64px rgba(0,0,0,.62),
              inset 0 1px 0 rgba(244,241,233,.07);
}
/* The first panel has nothing behind it to be lifted off, so a radius
   there just cuts a notch out of the page under the trust strip. */
.stack > section:first-child{ border-radius:0; box-shadow:none; }

/* Was transparent and inheriting the body colour, which is invisible
   until something is pinned behind it. */
.cta-sec{ background: var(--void); }

/* A top border and a rounded corner cannot both be right: the border
   squares off the corner the radius just cut. The panel's own shadow
   already does this job. */
.stack > .stats-sec{ border-top:0; }

/* The footer is the last thing to ride over the stack, so it gets the
   same treatment or it arrives as a flat seam after eight cards. */
.foot{ position:relative; background: var(--void);
  border-radius: clamp(16px, 2vw, 30px) clamp(16px, 2vw, 30px) 0 0;
  box-shadow: 0 -30px 64px rgba(0,0,0,.62),
              inset 0 1px 0 rgba(244,241,233,.07); }

/* Reduced motion keeps the cards — they are structure, not animation —
   but drops the pinning, so the page is an ordinary scroll. */
@media (prefers-reduced-motion: reduce){
  .stack > section{ position: static; }
}

/* ---------- vials · backlit glow + float --------------------------------
   The reference shot lights the bottle from behind: a soft bloom on the
   ground that the glass sits in front of, not a drop shadow under it. So the
   glow is a sibling BEHIND the image rather than a filter on it — a
   drop-shadow would trace the bottle's silhouette, and what is wanted here
   is a light source.

   The idle drift is deliberately tiny (6px over 7s) and desynchronised per
   cell. A grid of six bottles all rising together reads as a carousel; six
   drifting out of phase reads as suspension. */
.vial-cell, .god-card-vial{ --glow: var(--glow, var(--g, #63B287)); }

.vial-cell::before,
.lp-shot::before{
  content:""; position:absolute; left:50%; top:42%;
  width:min(78%, 240px); aspect-ratio:1; transform:translate(-50%,-50%);
  border-radius:50%; pointer-events:none; z-index:0;
  background: radial-gradient(circle,
    color-mix(in oklab, var(--glow) 46%, transparent) 0%,
    color-mix(in oklab, var(--glow) 16%, transparent) 42%,
    transparent 68%);
  filter: blur(26px);
  opacity:.55;
  transition: opacity .55s var(--ease-out), transform .55s var(--ease-out);
}
/* On a blend page the bottle is not centred in its box — the pen occupies
   the right half, so the vial's own centre sits at 42% across and 69% down.
   Measured, because a glow centred on the container lights the gap between
   the two objects instead of the one it is meant to be behind. */
.lp-shot{ position:relative; }
.lp-shot::before{
  left:42.4%; top:64%; width:min(76%, 400px); opacity:1;
  /* The core is mostly WHITE with the blend colour only in the falloff.
     A glow made of the accent alone is green light on a green ground and
     disappears; the reference shot is a white bloom that picks up colour
     at its edges. */
  background: radial-gradient(circle,
    color-mix(in oklab, var(--glow) 22%, #ffffff) 0%,
    color-mix(in oklab, var(--glow) 62%, transparent) 26%,
    color-mix(in oklab, var(--glow) 26%, transparent) 48%,
    transparent 72%);
  filter: blur(38px);
}

/* The artwork sits in front of its own light. */
.vial-cell img, .lp-vial, .god-vial{ position:relative; z-index:1; }

.vial-cell img, .lp-vial{
  animation: vial-drift 7s ease-in-out infinite;
  will-change: transform;
}
.vial-cell:nth-child(6n+2) img{ animation-delay:-1.1s; animation-duration:7.6s; }
.vial-cell:nth-child(6n+3) img{ animation-delay:-2.3s; animation-duration:6.8s; }
.vial-cell:nth-child(6n+4) img{ animation-delay:-3.4s; animation-duration:7.9s; }
.vial-cell:nth-child(6n+5) img{ animation-delay:-4.2s; animation-duration:7.2s; }
.vial-cell:nth-child(6n+6) img{ animation-delay:-5.6s; animation-duration:8.3s; }

@keyframes vial-drift{
  0%,100%{ transform: translateY(0); }
  50%    { transform: translateY(-6px); }
}

@media (hover:hover) and (pointer:fine){
  .vial-cell{ transition: border-color .5s var(--ease-out), background .5s var(--ease-out),
                          transform .45s var(--ease-out); }
  .vial-cell:hover{ transform: translateY(-6px); }
  .vial-cell:hover::before{ opacity:1; transform:translate(-50%,-50%) scale(1.14); }
  /* Pause the drift under the cursor so the lift is the only movement —
     two transforms on one element fight, and the bottle judders. */
  .vial-cell:hover img{ animation-play-state:paused; }
  .lp-shot:hover::before{ opacity:.85; transform:translate(-50%,-50%) scale(1.1); }
}

@media (prefers-reduced-motion:reduce){
  .vial-cell img, .lp-vial{ animation:none; }
  .vial-cell:hover{ transform:none; }
}

/* ---------- brand mark --------------------------------------------------
   The monogram sits ahead of the wordmark rather than replacing it: at nav
   size the IB alone is not yet a known mark, and the name has to do the
   identifying. Sized off the wordmark's cap height so the two share a
   baseline rather than merely sitting next to each other. */
.brand{ gap:11px; }
.brand-mark{
  width:auto; height:34px; display:block; flex:none;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.55));
}
@media (max-width:700px){ .brand-mark{ height:28px; } }

/* The full lockup, for the places that have room to introduce the brand
   properly rather than just label the page. */
.logo-lockup{ display:block; width:min(300px, 78%); height:auto; margin:0 0 24px; }
.auth-side .logo-lockup{ margin-bottom:28px; }
@media (max-width:820px){ .logo-lockup{ width:min(240px, 62%); } }

/* ---------- pens · glow + float ----------------------------------------
   The pen gets its own light, offset from the vial's, so the two objects
   read as separately lit rather than sharing one lamp. Its drift runs at a
   different period and phase from the vial's for the same reason a grid of
   six bottles is desynchronised: two objects rising and falling together
   look mechanically linked. */
.lp-shot::after{
  content:""; position:absolute; left:69%; top:52%;
  width:min(46%, 250px); aspect-ratio:1; transform:translate(-50%,-50%);
  border-radius:50%; pointer-events:none; z-index:0;
  background: radial-gradient(circle,
    color-mix(in oklab, var(--glow) 18%, #ffffff) 0%,
    color-mix(in oklab, var(--glow) 52%, transparent) 28%,
    color-mix(in oklab, var(--glow) 20%, transparent) 52%,
    transparent 74%);
  filter: blur(40px); opacity:.62;
  transition: opacity .55s var(--ease-out), transform .55s var(--ease-out);
}
.lp-pen{ position:relative; z-index:1;
  animation: pen-drift 8.4s ease-in-out infinite -2.6s; will-change:transform; }
.pen-figure img, .pen-img{ position:relative; z-index:1;
  animation: pen-drift 9s ease-in-out infinite; will-change:transform; }

@keyframes pen-drift{
  0%,100%{ transform: translateY(0) rotate(0deg); }
  50%    { transform: translateY(-9px) rotate(-.5deg); }
}

/* The hero pen already sits inside a rotated wrapper, so its own transform
   must not fight that one — the wrapper keeps the angle, the image drifts. */
.lp-pen-wrap{ position:relative; z-index:1; }

@media (hover:hover) and (pointer:fine){
  .lp-shot:hover::after{ opacity:.95; transform:translate(-50%,-50%) scale(1.1); }
}
@media (prefers-reduced-motion:reduce){
  .lp-pen, .pen-figure img, .pen-img{ animation:none; }
}