@font-face{font-family:"Playfair Display";src:url("./fonts/playfair-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Playfair Display";src:url("./fonts/playfair-500.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Space Grotesk";src:url("./fonts/space-grotesk-500.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Space Grotesk";src:url("./fonts/space-grotesk-700.woff2") format("woff2");font-weight:700;font-display:swap}

:root{
  --bg:#08080a;
  /* hero/headline ink raised to near-pure white; body ink brightened off true-grey toward warm white */
  --ink:#ffffff;
  --ink-head:#fbfaf7;
  /* secondary text lifted well clear of grey-mud (was .58 / .30) */
  --ink-soft:rgba(247,244,238,.78);
  --ink-faint:rgba(247,244,238,.46);
  /* --gold: the BRIGHT signature mark — reserved for the hero word + han glyphs + precise marks */
  --gold:#e6b450;
  --gold-hi:#f0c970;
  /* a deeper structural gold for whisper accents (fig spec, hairlines) */
  --gold-soft:#c79a3e;
  --hair:rgba(247,244,238,.16);
  /* hairline accent lives in a confident gold tint, brighter than the base hairline */
  --hair-gold:rgba(230,180,80,.5);
  --serif:"Playfair Display",Georgia,"Times New Roman",serif;
  --sans:"Space Grotesk","Helvetica Neue",Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  position:relative;
}

/* ===== atmosphere: warm tonal field + drifting gold glow + film grain + vignette ===== */
.atmos{position:fixed;inset:0;z-index:0;pointer-events:none}
.atmos .tone{
  position:absolute;inset:0;
  background:
    radial-gradient(120% 80% at 78% 0%,rgba(64,46,24,.26) 0%,rgba(8,8,10,0) 48%),
    radial-gradient(120% 90% at 8% 100%,rgba(40,30,14,.24) 0%,rgba(8,8,10,0) 52%);
}
.atmos .glow{
  position:absolute;
  width:62vw;height:62vw;left:50%;top:34%;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(230,180,80,.12) 0%,rgba(230,180,80,0) 62%);
  filter:blur(8px);
}
.atmos .vig{
  position:absolute;inset:0;
  background:radial-gradient(130% 120% at 50% 42%,rgba(8,8,10,0) 46%,rgba(0,0,0,.64) 100%);
}
.atmos .grain{
  position:absolute;inset:-50%;
  opacity:.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='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.js .atmos .glow{animation:drift 26s ease-in-out infinite}
@keyframes drift{
  0%,100%{transform:translate(-50%,-50%) scale(1)}
  50%{transform:translate(-42%,-46%) scale(1.12)}
}
.page{position:relative;z-index:1}

a{color:inherit}
.eyebrow{
  font-family:var(--sans);
  text-transform:uppercase;
  letter-spacing:.34em;
  font-size:11px;
  font-weight:500;
  color:var(--ink-soft);
}
.wrap{max-width:1180px;margin:0 auto;padding:0 28px}

/* ============ PANEL 1 — THE COVER (deterministic vertical split) ============
   The cover is split into two stacked regions that NEVER overlap:
   - TOP: the copy zone on SOLID near-black (the headline reads at max contrast)
   - BOTTOM: the photo zone — the /cover.webp shelf of dull cans lives ONLY here,
     bottom-anchored, with its TOP EDGE feathered up into the copy zone. */
.cover{
  position:relative;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  /* SOLID dark — the photo no longer bleeds across the whole panel */
  background:var(--bg);
}
/* TOP REGION — the copy zone: solid near-black, headline + scroll cue live here */
.cover-copy{
  position:relative;
  z-index:2;
  flex:0 0 auto;
  min-height:48svh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  padding:clamp(72px,11vh,140px) clamp(24px,6vw,80px) clamp(40px,7vh,88px);
  background:var(--bg);
}
/* BOTTOM REGION — the photo zone: the real cans, bottom-anchored, this region ONLY */
.cover-photo{
  position:relative;
  z-index:1;
  flex:1 1 auto;
  min-height:48svh;
  background-image:url("./cover.webp");
  background-size:cover;
  background-position:center bottom;
  background-repeat:no-repeat;
  background-color:var(--bg);
}
/* feather ONLY the TOP EDGE of the photo region so it melts up into the copy zone
   (page bg at the region's top → transparent ~30% down), plus a soft bottom seat */
.cover-photo .photo-fade{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    /* top-edge feather: opaque page-bg → transparent by ~30% of the region height */
    linear-gradient(
      to bottom,
      #0a0a0c 0%,
      rgba(10,10,12,.86) 10%,
      rgba(10,10,12,.40) 20%,
      rgba(10,10,12,0) 32%
    ),
    /* a soft bottom vignette to seat the cans without washing them out */
    linear-gradient(to top, rgba(8,8,10,.40) 0%, rgba(8,8,10,0) 22%);
}
.cover-inner{position:relative;z-index:2;width:100%;max-width:1100px}
/* the dominant, confrontational headline — the focal point of the whole screen,
   pure white on solid near-black for maximum contrast */
.cover h1{
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(2.9rem,7.6vw,6.6rem);
  line-height:1.02;
  letter-spacing:-.025em;
  color:#ffffff;
  text-wrap:balance;
  /* a very subtle shadow for safety; the solid-dark backdrop carries the contrast */
  text-shadow:0 2px 24px rgba(0,0,0,.45);
}
/* the two emphasised words pop in gold — high contrast on the near-black */
.cover h1 .gold{
  color:var(--gold);
  font-style:italic;
  display:inline-block;
  text-shadow:0 0 34px rgba(230,180,80,.30);
}
/* (the can-shelf illustration that once sat beneath the headline has been replaced
   by the real cover photograph set as the panel's full-bleed background above.) */

/* === cover entrance: the page's signature clip-rise on the headline lines === */
.reveal-line{display:block;overflow:hidden;padding-bottom:.06em}
.reveal-line > span{display:block;will-change:transform,opacity}
.js .reveal-line > span{transform:translateY(115%)}
.js .cover.in .reveal-line > span{
  animation:riseIn 1.9s cubic-bezier(.16,1,.3,1) forwards;
}
.js .cover.in .reveal-line.cl1 > span{animation-delay:.18s}
.js .cover.in .reveal-line.cl2 > span{animation-delay:.40s}
.js .cover.in .reveal-line.cl3 > span{animation-delay:.62s}

/* === the shelf illustration: the slop cans settle UP onto the shelf, staggered ===
   the blurred back row drifts up as one quiet mass; the sharp front cans rise individually */
.cover-shelf .can,.cover-shelf .back-row{transform-box:view-box}
.js .cover .can,.js .cover .back-row{opacity:0;transform:translateY(26px)}
.js .cover.in .can,.js .cover.in .back-row{
  opacity:1;transform:translateY(0);
  transition:opacity 1.2s ease,transform 1.5s cubic-bezier(.16,1,.3,1);
}
.js .cover.in .back-row{opacity:.92;transition-delay:.56s}
.js .cover.in .can.c1{transition-delay:.7s}
.js .cover.in .can.c2{transition-delay:.84s}
.js .cover.in .can.c3{transition-delay:.98s}
.js .cover.in .can.c4{transition-delay:1.12s}
.js .cover.in .can.c5{transition-delay:1.26s}

/* SVG label type — generic condensed sans / bold zero numerals on the cold cans.
   These live in the LIT lower body only; the branding zone above is dissolved by the top-fade. */
.zero-badge{
  font-family:var(--sans);
  font-weight:700;
  letter-spacing:-.02em;
}
.zero-word{
  font-family:var(--sans);
  font-weight:700;
  font-size:12px;
  letter-spacing:.18em;
}
.dull-label{
  font-family:var(--sans);
  font-weight:700;
  font-size:9px;
  letter-spacing:.18em;
  fill:rgba(247,244,238,.5);
}
@keyframes riseIn{from{transform:translateY(115%)}to{transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes goldBloom{
  0%{opacity:.001;letter-spacing:.08em}
  100%{opacity:1;letter-spacing:0}
}

/* the scroll cue sits at the foot of the copy zone, clear of the photo region */
.scroll-cue{
  position:absolute;
  bottom:18px;left:50%;transform:translateX(-50%);
  z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:14px;
  color:var(--ink-faint);
  font-size:10px;letter-spacing:.3em;text-transform:uppercase;
}
.scroll-cue .cue-word{writing-mode:vertical-rl}
.scroll-cue .bar{
  width:1px;height:54px;
  background:linear-gradient(var(--gold),transparent);
}
.js .scroll-cue{opacity:0}
.js .cover.in .scroll-cue{animation:fadeIn 1.4s ease 2.1s forwards}
.js .scroll-cue .bar{animation:cueDrop 2.8s ease-in-out infinite}
@keyframes cueDrop{0%,100%{transform:scaleY(.4);transform-origin:top;opacity:.5}50%{transform:scaleY(1);opacity:1}}

/* ============ PANEL 2 — THE REVEAL (the turn to the answer) ============ */
.reveal-panel{
  position:relative;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:clamp(96px,16vh,180px) clamp(28px,7vw,96px);
  overflow:hidden;
  border-top:1px solid var(--hair);
}
.reveal-inner{position:relative;z-index:1;max-width:980px;width:100%;margin:0 auto}
.reveal-panel .eyebrow{display:block;margin-bottom:clamp(34px,6vh,58px)}
/* giant Playfair statement — Introducing Yesa. */
.reveal-panel h2{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(3.4rem,9vw,7.4rem);
  line-height:.98;
  letter-spacing:-.03em;
  color:var(--ink-head);
}
/* the serif claim line, carrying the gold 'properly made' with the bloom */
.reveal-panel .reveal-claim{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(1.5rem,3vw,2.5rem);
  line-height:1.2;
  letter-spacing:-.015em;
  color:var(--ink-head);
  max-width:22ch;
  margin-top:clamp(26px,4.5vh,42px);
}
.reveal-panel .gold{
  color:var(--gold);
  font-style:italic;
  display:inline-block;
  text-shadow:0 0 28px rgba(230,180,80,.22);
}
.reveal-panel .reveal-descriptor{
  margin-top:clamp(40px,6.5vh,64px);
  max-width:46ch;
  font-size:16px;
  line-height:1.78;
  letter-spacing:.005em;
  color:var(--ink-soft);
  position:relative;
  padding-left:62px;
}
.reveal-panel .reveal-descriptor .rule{
  position:absolute;
  left:0;top:.62em;
  width:44px;height:1px;
  background:var(--gold);
}
.reveal-panel .reveal-cta{
  margin-top:clamp(36px,5.5vh,54px);
  padding-left:62px;
  display:flex;
  align-items:baseline;
  gap:20px;
  flex-wrap:wrap;
}
.reveal-panel .reveal-cta .tag{
  font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--ink-faint);
}
.reveal-panel .reveal-cta a{
  font-family:var(--serif);
  font-style:italic;
  font-size:22px;
  letter-spacing:-.01em;
  color:var(--ink);
  text-decoration:none;
  border-bottom:1px solid var(--gold);
  padding-bottom:6px;
  transition:color .25s ease,border-color .25s ease;
}
.reveal-panel .reveal-cta a:hover{color:var(--gold-hi);border-bottom-color:var(--gold-hi)}
.reveal-panel .reveal-cta a:focus-visible{outline:none;color:var(--gold-hi)}

/* === Panel 2 dynamic scroll-triggered move: lines clip / rise / scale in on entry === */
.reveal-rise{display:block;overflow:hidden;padding-bottom:.08em}
.reveal-rise > span{display:inline-block;will-change:transform,opacity}
.js .reveal-panel .eyebrow,
.js .reveal-panel .reveal-descriptor,
.js .reveal-panel .reveal-cta{opacity:0;transition:opacity 1.3s ease}
.js .reveal-panel .reveal-rise > span{
  transform:translateY(108%) scale(.965);
  transform-origin:left bottom;
  opacity:.001;
}
.js .reveal-panel .gold{opacity:.001}
/* fired by IntersectionObserver adding .seen */
.js .reveal-panel.seen .reveal-rise > span{
  animation:revealRise 1.5s cubic-bezier(.16,1,.3,1) forwards;
}
.js .reveal-panel.seen .reveal-rise.rl1 > span{animation-delay:.05s}
.js .reveal-panel.seen .reveal-rise.rl2 > span{animation-delay:.20s}
.js .reveal-panel.seen .reveal-rise.rl3 > span{animation-delay:.46s}
.js .reveal-panel.seen .eyebrow{opacity:1;transition-delay:.02s}
.js .reveal-panel.seen .gold{animation:goldBloom 2.2s cubic-bezier(.16,1,.3,1) .95s forwards}
.js .reveal-panel.seen .reveal-descriptor{opacity:1;transition-delay:.85s}
.js .reveal-panel.seen .reveal-cta{opacity:1;transition-delay:1.05s}
@keyframes revealRise{
  from{transform:translateY(108%) scale(.965);opacity:.001}
  60%{opacity:1}
  to{transform:translateY(0) scale(1);opacity:1}
}

/* ============ asymmetric intro — a REAL two-column tension ============ */
.idea{
  padding:clamp(120px,22vh,260px) 0 clamp(90px,16vh,200px);
}
.idea .wrap{
  display:grid;
  grid-template-columns:1.35fr .9fr;
  column-gap:clamp(40px,7vw,120px);
  row-gap:clamp(40px,7vh,72px);
  align-items:start;
}
.idea .marker{
  grid-column:1 / -1;
  display:flex;align-items:baseline;gap:16px;
  margin-bottom:clamp(20px,4vh,40px);
}
.num{
  font-family:var(--serif);
  font-size:14px;
  color:var(--gold);
  letter-spacing:.05em;
}
.sec-label{font-size:11px;letter-spacing:.32em;text-transform:uppercase;color:var(--ink-soft)}

.intro-statement{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(2rem,4.6vw,3.8rem);
  line-height:1.18;
  letter-spacing:-.02em;
  max-width:18ch;
  color:var(--ink-head);
  /* upper-left, the dominant cell */
  align-self:start;
}
.intro-statement em{color:var(--gold);font-style:italic}
.intro-sub{
  /* the narrower right column — pushed down so the two blocks sit on opposite diagonals */
  align-self:end;
  max-width:34ch;
  color:var(--ink-soft);
  font-size:16.5px;
  line-height:1.72;
  /* a hairline above to register the column shift editorially */
  padding-top:clamp(28px,5vh,52px);
  border-top:1px solid var(--hair);
}
.intro-sub .lead{color:var(--ink)}

/* ============ founders — two editorial profiles, same numbered-section family ============ */
.makers{
  padding:clamp(120px,22vh,260px) 0 clamp(90px,16vh,200px);
  border-top:1px solid var(--hair);
}
.makers .marker{
  display:flex;align-items:baseline;gap:16px;
  margin-bottom:clamp(40px,8vh,90px);
}
.makers-lede{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(1.7rem,3.6vw,2.8rem);
  line-height:1.2;
  letter-spacing:-.02em;
  max-width:24ch;
  color:var(--ink-head);
  margin-bottom:clamp(48px,9vh,96px);
}
.makers-lede em{color:var(--gold);font-style:italic}
.makers-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(40px,6vw,96px);
}
.maker{
  padding-top:clamp(26px,4.5vh,44px);
  border-top:1px solid var(--hair);
}
.maker .role{
  display:block;
  font-size:11px;letter-spacing:.3em;text-transform:uppercase;
  color:var(--ink-soft);
  margin-bottom:18px;
}
.maker h3{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(1.6rem,2.8vw,2.3rem);
  line-height:1.12;
  letter-spacing:-.015em;
  color:var(--ink-head);
  margin-bottom:clamp(18px,3vh,26px);
}
.maker h3 .gname{color:var(--gold);font-style:italic}
.maker p{
  color:var(--ink-soft);
  font-size:16px;
  line-height:1.74;
  max-width:42ch;
}
.maker .quote{
  margin-top:24px;
  font-family:var(--serif);
  font-style:italic;
  font-size:clamp(1.05rem,1.8vw,1.3rem);
  line-height:1.4;
  letter-spacing:-.01em;
  color:var(--ink-head);
  padding-left:20px;
  border-left:1px solid var(--hair-gold);
  max-width:36ch;
}

/* ============ atmospheric breather — vast emptiness, its OWN slower move.
   the one deliberate centered exception on the page ============ */
.breather{
  min-height:78vh;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:0 28px;
}
.breather p{
  font-family:var(--serif);
  font-weight:400;
  font-style:italic;
  font-size:clamp(1.8rem,3.8vw,3rem);
  line-height:1.32;
  color:var(--ink-head);
  max-width:18ch;
}
.breather .han{color:var(--gold);font-style:normal;display:inline-block}
/* the breather glyph fades in on its own slower, separate curve — a distinct body beat */
.js .breather p{opacity:0;transition:opacity 1.4s ease}
.js .breather p .han{opacity:0;transform:translateY(6px);transition:opacity 2.4s cubic-bezier(.16,1,.3,1) .5s,transform 2.4s cubic-bezier(.16,1,.3,1) .5s}
.js .breather.seen p{opacity:1}
.js .breather.seen p .han{opacity:1;transform:none}

/* ============ editorial stacked figures — serif clauses, not SaaS stat numerals ============ */
.figures{
  padding:clamp(90px,16vh,200px) 0;
  border-top:1px solid var(--hair);
}
.figures .marker{
  display:flex;align-items:baseline;gap:16px;
  margin-bottom:clamp(56px,10vh,110px);
}
.fig{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:end;
  gap:24px;
  padding:clamp(34px,5vh,56px) 0;
  border-bottom:1px solid var(--hair);
}
.fig:last-child{border-bottom:none}
.fig .lbl{
  font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--ink-soft);
  padding-bottom:.6em;
}
.fig .lbl .note{
  display:block;margin-top:14px;
  letter-spacing:.01em;text-transform:none;font-size:14px;
  color:var(--ink-faint);max-width:34ch;line-height:1.6;
}
/* the value is now an EDITORIAL SERIF CLAUSE — italic, restrained scale, the spec carried
   in the small caps tag. It no longer competes with the hero's 9.5rem statement. */
.fig .val{
  font-family:var(--serif);
  font-weight:400;
  font-style:italic;
  font-size:clamp(2.4rem,4.8vw,3.6rem);
  line-height:1.05;
  letter-spacing:-.015em;
  color:var(--ink-head);
  text-align:right;
  max-width:13ch;
}
/* the literal spec sits beneath the clause as a small upright tag, not a giant numeral */
.fig .val .spec{
  display:block;
  margin-top:.5em;
  font-family:var(--sans);
  font-style:normal;
  font-size:11px;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--ink-soft);
}
/* fig.accent spec carries the gold — a precise mark on the headline ABV figure */
.fig.accent .val .spec{color:var(--gold)}

/* figures choreography: each row staggers; the value rises independently of (and after) its label */
.js .fig{opacity:0;transition:opacity 1.1s ease}
.js .fig .lbl{opacity:0;transform:translateY(12px);transition:opacity .9s ease,transform .9s cubic-bezier(.16,1,.3,1)}
.js .fig .val{opacity:0;transform:translateY(26px);transition:opacity 1.2s ease,transform 1.2s cubic-bezier(.16,1,.3,1)}
.js .fig.seen{opacity:1}
.js .fig.seen .lbl{opacity:1;transform:none;transition-delay:.05s}
.js .fig.seen .val{opacity:1;transform:none;transition-delay:.28s}

/* ============ FAQ — staggered per item ============ */
.faq{padding:clamp(90px,16vh,200px) 0;border-top:1px solid var(--hair)}
.faq .marker{display:flex;align-items:baseline;gap:16px;margin-bottom:clamp(48px,9vh,96px)}
.faq-item{
  padding:clamp(40px,6vh,64px) 0;
  border-top:1px solid var(--hair);
  display:grid;
  grid-template-columns:1fr 1.5fr;
  gap:clamp(32px,5vw,72px);
}
.faq-item:first-of-type{border-top:none}
.faq-item h2{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(1.6rem,2.8vw,2.4rem);
  line-height:1.16;
  letter-spacing:-.015em;
  color:var(--ink-head);
}
.faq-item p{color:var(--ink-soft);font-size:16.5px;max-width:46ch}
/* per-item stagger via index var */
.js .faq-item{opacity:0;transform:translateY(20px);transition:opacity 1s ease,transform 1s cubic-bezier(.16,1,.3,1)}
.js .faq-item.seen{opacity:1;transform:none;transition-delay:calc(var(--i,0) * .12s)}

/* ============ comparison table ============ */
.compare{padding:clamp(90px,16vh,200px) 0;border-top:1px solid var(--hair)}
.compare .marker{display:flex;align-items:baseline;gap:16px;margin-bottom:clamp(48px,9vh,96px)}
.cmp-wrap{margin-top:8px;overflow-x:auto}
table.cmp{
  width:100%;
  border-collapse:collapse;
  font-size:15px;
  min-width:580px;
}
table.cmp caption{
  text-align:left;
  font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--ink-soft);
  padding-bottom:26px;
}
table.cmp th,table.cmp td{
  text-align:left;
  padding:22px 20px;
  border-bottom:1px solid var(--hair);
  vertical-align:top;
}
table.cmp thead th{
  font-family:var(--sans);
  font-weight:500;
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft);
}
table.cmp tbody th.yesa,
table.cmp tbody td.yesa{
  color:var(--ink-head);
}
table.cmp tbody th{
  font-weight:400;color:var(--ink-soft);font-size:13px;
  letter-spacing:.04em;width:18%;
}
table.cmp td{color:var(--ink-soft)}
/* the Yesa row is the highlighted/gold row */
table.cmp tr.row-yesa th{
  font-family:var(--serif);
  font-style:italic;
  font-size:18px;
  color:var(--gold);
}
table.cmp tr.row-yesa td{
  color:var(--ink-head);
}
table.cmp tr.row-yesa{
  border-left:1px solid var(--hair-gold);
}
table.cmp tr.row-yesa th,
table.cmp tr.row-yesa td{
  border-bottom-color:var(--hair-gold);
}

/* ============ waitlist — broken off-axis, left-aligned against the hero measure ============ */
.waitlist{
  padding:clamp(120px,20vh,260px) 0;
  border-top:1px solid var(--hair);
}
.waitlist .wl-grid{
  display:grid;
  /* the statement holds the left measure; whitespace sits asymmetrically to the right */
  grid-template-columns:minmax(0,1fr) clamp(0px,18vw,260px);
  align-items:end;
}
.waitlist .wl-body{max-width:26ch;text-align:left}
.waitlist .eyebrow{display:block}
.waitlist h2{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(2.6rem,7.5vw,5.6rem);
  line-height:1.02;
  letter-spacing:-.025em;
  margin:26px 0 0;
  text-align:left;
  color:var(--ink-head);
}
.waitlist h2 em{color:var(--gold);font-style:italic}
.waitlist p{color:var(--ink-soft);max-width:44ch;margin:32px 0 0;font-size:16px;text-align:left}
/* the call to action sits at the FOOT of the statement, an underline-only editorial word-link */
.cta-row{
  margin:48px 0 0;
  display:flex;
  align-items:baseline;
  gap:28px;
  flex-wrap:wrap;
}
/* the request-access link is a serif word-link with a gold hairline underline — not a default button widget */
.cta-row a{
  background:transparent;
  border:none;
  color:var(--ink);
  font-family:var(--serif);
  font-style:italic;
  font-size:22px;
  letter-spacing:-.01em;
  padding:0 0 8px;
  text-decoration:none;
  white-space:nowrap;
  border-bottom:1px solid var(--gold);
  transition:color .25s ease,border-color .25s ease;
}
.cta-row a:hover{color:var(--gold-hi);border-bottom-color:var(--gold-hi)}
.cta-row a:focus-visible{outline:none;color:var(--gold-hi)}
.regions{
  margin-top:28px;
  font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--ink-faint);
  text-align:left;
}

/* ============ request-access form — on-brand dark fields with gold focus ============ */
.wl-form{
  margin:44px 0 0;
  max-width:30rem;
  text-align:left;
}
.wl-form .field{margin-bottom:22px}
.wl-form label{
  display:block;
  font-size:11px;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--ink-soft);
  margin-bottom:10px;
}
.wl-form label .opt{
  color:var(--ink-faint);
  letter-spacing:.18em;
}
.wl-form input,
.wl-form textarea{
  width:100%;
  font-family:var(--sans);
  font-size:16px;
  line-height:1.6;
  color:var(--ink);
  background:rgba(247,244,238,.03);
  border:1px solid var(--hair);
  border-radius:2px;
  padding:14px 16px;
  transition:border-color .25s ease,background-color .25s ease,box-shadow .25s ease;
  -webkit-appearance:none;
  appearance:none;
}
.wl-form textarea{
  resize:vertical;
  min-height:84px;
}
.wl-form input::placeholder,
.wl-form textarea::placeholder{color:var(--ink-faint)}
.wl-form input:hover,
.wl-form textarea:hover{border-color:var(--hair-gold)}
.wl-form input:focus,
.wl-form textarea:focus{
  outline:none;
  border-color:var(--gold);
  background:rgba(247,244,238,.05);
  box-shadow:0 0 0 1px rgba(230,180,80,.35);
}
/* the submit button echoes the gold-hairline editorial CTA language of the page */
.wl-submit{
  margin-top:6px;
  display:inline-block;
  font-family:var(--serif);
  font-style:italic;
  font-size:22px;
  letter-spacing:-.01em;
  color:var(--ink);
  background:transparent;
  border:none;
  border-bottom:1px solid var(--gold);
  padding:0 0 8px;
  cursor:pointer;
  transition:color .25s ease,border-color .25s ease;
}
.wl-submit:hover{color:var(--gold-hi);border-bottom-color:var(--gold-hi)}
.wl-submit:focus-visible{outline:none;color:var(--gold-hi)}
.wl-privacy{
  margin:22px 0 0;
  font-size:13px;
  line-height:1.6;
  color:var(--ink-faint);
  max-width:42ch;
}

/* ============ footer ============ */
footer{
  border-top:1px solid var(--hair);
  padding:64px 0;
  text-align:center;
}
.foot-mark{
  font-family:var(--serif);
  font-size:24px;
  letter-spacing:.04em;
  color:var(--ink-head);
}
.foot-mark .han{color:var(--gold)}
.foot-dots{
  margin-top:24px;
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft);
}
.foot-dots span{margin:0 4px;color:var(--gold-soft)}
.foot-fine{margin-top:24px;font-size:11px;color:var(--ink-faint);letter-spacing:.06em}

/* ===== body scroll reveal — varied per section; this is the quiet default for blocks
   that don't have a bespoke move (markers, table, waitlist) ===== */
.js [data-reveal]{opacity:0;transform:translateY(16px);transition:opacity 1.3s ease,transform 1.3s ease}
.js [data-reveal].seen{opacity:1;transform:none}
/* the table enters with a longer travel and slower curve than the default — its own rhythm */
.js .cmp-wrap[data-reveal]{transform:translateY(34px);transition:opacity 1.5s ease,transform 1.5s cubic-bezier(.16,1,.3,1)}

@media (max-width:900px){
  .cover-shelf{max-width:460px}
}
@media (max-width:780px){
  .cover h1{font-size:clamp(2.4rem,11vw,4.2rem)}
  /* keep the vertical split: text top on dark, photo bottom — never overlapping.
     give the photo region a firm min-height so the cans stay visible on narrow screens */
  .cover-copy{min-height:46svh;padding-bottom:clamp(48px,9vh,88px)}
  .cover-photo{min-height:50svh}
  .reveal-panel h2{font-size:clamp(3rem,15vw,5rem)}
  .reveal-panel .reveal-claim{max-width:none}
  .reveal-panel .reveal-descriptor{padding-left:0}
  .reveal-panel .reveal-descriptor .rule{display:none}
  .reveal-panel .reveal-cta{padding-left:0}
  .idea .wrap{grid-template-columns:1fr}
  .intro-statement{max-width:none}
  .intro-sub{align-self:auto;max-width:none}
  .makers-grid{grid-template-columns:1fr;gap:clamp(40px,8vh,72px)}
  .makers-lede{max-width:none}
  .maker p,.maker .quote{max-width:none}
  .faq-item{grid-template-columns:1fr;gap:16px}
  .fig{grid-template-columns:1fr;gap:8px;align-items:start}
  .fig .val{text-align:left;max-width:none}
  .fig .lbl{padding-bottom:0}
  .waitlist .wl-grid{grid-template-columns:1fr}
  .waitlist .wl-body{max-width:none}
  .wl-form{max-width:none}
  .scroll-cue{display:none}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  /* Panel 1 cover: everything visible, no transforms */
  .js .reveal-line > span{transform:none}
  .js .cover.in .reveal-line > span{animation:none}
  .js .cover h1 .gold{opacity:1}
  .js .cover .can,.js .cover .back-row{opacity:1;transform:none;transition:none}
  .js .cover.in .back-row{opacity:.92}
  .js .scroll-cue{opacity:1}
  .js .cover.in .scroll-cue{animation:none}
  /* Panel 2 reveal: everything visible, no transforms */
  .js .reveal-panel .eyebrow,
  .js .reveal-panel .reveal-descriptor,
  .js .reveal-panel .reveal-cta{opacity:1;transition:none}
  .js .reveal-panel .gold{opacity:1;letter-spacing:0}
  .js .reveal-panel .reveal-rise > span{transform:none;opacity:1}
  .js .reveal-panel.seen .reveal-rise > span,
  .js .reveal-panel.seen .gold{animation:none}
  .js .scroll-cue .bar{animation:none}
  .js .atmos .glow{animation:none}
  .js [data-reveal]{opacity:1;transform:none;transition:none}
  .js .fig,.js .fig .lbl,.js .fig .val{opacity:1;transform:none;transition:none}
  .js .faq-item{opacity:1;transform:none;transition:none}
  .js .breather p,.js .breather p .han{opacity:1;transform:none;transition:none}
}

/* === YESA-VISUAL-EDITOR-OVERRIDES (managed; edit visually, not by hand) === */
#i5l2o{color:#000000;}#iiq2r{color:#f3e21b;}
/* === END YESA-VISUAL-EDITOR-OVERRIDES === */