/* =========================================================================
   THE NONSLOP GROCERY NAVIGATOR
   Black & white editorial design system — shared across all pages.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;0,9..144,900;1,9..144,400;1,9..144,500&family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,400;1,6..72,500&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root{
  --ink:#12110f;
  --ink-2:#2b2925;
  --paper:#f7f5ef;
  --paper-2:#efece2;
  --paper-3:#e7e3d6;
  --muted:#6b665b;
  --muted-2:#8a8578;
  --line:#d8d3c4;
  --line-2:#c4bdaa;
  --black:#0b0a09;
  --white:#faf9f4;
  /* --- restrained accents: botanical green + burnt ochre --- */
  --accent:#1c6b3f;
  --accent-2:#b8541c;
  --accent-lift:#5cc186;
  --accent-wash:#eef3ec;
  --hair:1px solid var(--line);
  --hair-strong:1px solid var(--ink);

  --display:'Fraunces', Georgia, serif;
  --serif:'Newsreader', Georgia, 'Times New Roman', serif;
  --sans:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --mono:'JetBrains Mono', 'SFMono-Regular', Menlo, monospace;

  --wrap:1200px;
  --wrap-narrow:760px;
  --gutter:clamp(20px, 5vw, 64px);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--serif);
  font-size:19px;
  line-height:1.62;
  font-feature-settings:"onum" 1, "pnum" 1;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
::selection{background:var(--ink);color:var(--paper);}
img{max-width:100%;display:block;}
a{color:inherit;}
hr{border:none;border-top:var(--hair);margin:2.5rem 0;}

h1,h2,h3,h4,h5{font-family:var(--display);font-weight:600;margin:0;line-height:1.08;letter-spacing:-0.012em;}
h1{font-size:clamp(2.6rem,6vw,4.6rem);font-weight:600;}
h2{font-size:clamp(1.9rem,3.6vw,2.9rem);}
h3{font-size:clamp(1.3rem,2.2vw,1.7rem);}
p{margin:0 0 1.15em;}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter);}
.narrow{max-width:var(--wrap-narrow);margin:0 auto;padding:0 var(--gutter);}

/* ---- utility type ---- */
.kicker{
  font-family:var(--sans);
  font-size:0.72rem;
  font-weight:600;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--accent);
}
.mono{font-family:var(--mono);}
.lede{font-size:1.32rem;line-height:1.5;color:var(--ink-2);font-weight:400;}
em,i{font-style:italic;}
.rule{height:1px;background:var(--ink);border:0;margin:0;}
.rule-thin{height:1px;background:var(--line);border:0;margin:0;}

/* =========================================================================
   MASTHEAD / NAV
   ========================================================================= */
.masthead{
  border-bottom:2px solid var(--ink);
  background:var(--paper);
  position:sticky;top:0;z-index:50;
}
.masthead-top{
  display:flex;align-items:center;justify-content:space-between;
  gap:20px;padding:14px var(--gutter);
  max-width:var(--wrap);margin:0 auto;
}
.brand{display:flex;align-items:baseline;gap:12px;text-decoration:none;}
.brand .logo{
  font-family:var(--display);font-weight:900;font-size:1.5rem;
  letter-spacing:-0.02em;color:var(--ink);
}
.brand .logo .amp{font-style:italic;font-weight:500;}
.brand .est{
  font-family:var(--sans);font-size:0.62rem;letter-spacing:0.18em;
  text-transform:uppercase;color:var(--muted);
}
.nav{display:flex;align-items:center;gap:0;}
.nav a{
  font-family:var(--sans);font-size:0.78rem;font-weight:600;
  letter-spacing:0.08em;text-transform:uppercase;text-decoration:none;
  color:var(--ink);padding:8px 15px;border-left:var(--hair);
  transition:background .15s,color .15s;
}
.nav a:first-child{border-left:none;}
.nav a:hover{background:var(--ink);color:var(--paper);}
.nav a.active{color:var(--muted-2);}
.nav a.active:hover{background:var(--ink);color:var(--paper);}
.nav-toggle{
  display:none;background:none;border:1px solid var(--ink);
  font-family:var(--sans);font-weight:600;font-size:0.72rem;letter-spacing:0.14em;
  text-transform:uppercase;padding:8px 14px;cursor:pointer;color:var(--ink);
}
.masthead-strip{
  border-top:var(--hair);
  font-family:var(--mono);font-size:0.68rem;letter-spacing:0.04em;
  color:var(--muted);text-transform:uppercase;
}
.masthead-strip .wrap{display:flex;justify-content:space-between;gap:16px;padding-top:6px;padding-bottom:6px;flex-wrap:wrap;}

@media(max-width:860px){
  .nav-toggle{display:block;}
  .nav{
    display:none;position:absolute;top:100%;left:0;right:0;
    flex-direction:column;background:var(--paper);border-bottom:2px solid var(--ink);
  }
  .nav.open{display:flex;}
  .nav a{border-left:none;border-top:var(--hair);padding:14px var(--gutter);}
  .masthead-strip{display:none;}
}

/* =========================================================================
   HERO / PAGE HEADERS
   ========================================================================= */
.page-head{padding:clamp(40px,7vw,88px) 0 clamp(30px,4vw,52px);border-bottom:2px solid var(--ink);}
.page-head .dateline{margin-bottom:22px;display:flex;gap:18px;align-items:center;flex-wrap:wrap;}
.page-head h1{margin-bottom:0.35em;}
.page-head .sub{max-width:34em;}

.hero{padding:clamp(46px,8vw,104px) 0 clamp(40px,6vw,80px);border-bottom:2px solid var(--ink);position:relative;}
.hero .issue-line{
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  border-bottom:var(--hair);padding-bottom:14px;margin-bottom:clamp(30px,5vw,60px);
  font-family:var(--mono);font-size:0.7rem;text-transform:uppercase;letter-spacing:0.08em;color:var(--muted);
}
.hero h1{font-size:clamp(3rem,8.5vw,7rem);font-weight:600;line-height:0.98;letter-spacing:-0.02em;}
.hero h1 em{font-style:italic;font-weight:500;color:var(--accent);}
.hero .hero-grid{display:grid;grid-template-columns:1.55fr 1fr;gap:clamp(28px,4vw,56px);align-items:end;margin-top:clamp(26px,3vw,40px);}
.hero .hero-side{border-left:var(--hair-strong);padding-left:26px;}
@media(max-width:800px){.hero .hero-grid{grid-template-columns:1fr;}.hero .hero-side{border-left:none;border-top:var(--hair-strong);padding-left:0;padding-top:22px;}}

/* inverted sections */
.invert{background:var(--black);color:var(--white);}
.invert h1,.invert h2,.invert h3{color:var(--white);}
.invert .kicker{color:var(--accent-lift);}
.invert a{color:var(--white);}
.invert .rule{background:var(--white);opacity:0.25;}
.invert .lede{color:#d8d5cc;}

/* =========================================================================
   SECTION SCAFFOLD
   ========================================================================= */
section{padding:clamp(44px,6vw,86px) 0;}
.section-head{
  display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:baseline;
  border-bottom:2px solid var(--ink);padding-bottom:14px;margin-bottom:clamp(28px,3.5vw,44px);
}
.section-head .num{font-family:var(--mono);font-size:0.8rem;color:var(--muted);padding-top:4px;}
.invert .section-head{border-color:var(--white);}
.section-head h2{grid-column:2;}
.section-head .section-sub{grid-column:2;margin-top:10px;color:var(--muted);max-width:40em;font-size:1.05rem;}
.invert .section-head .section-sub{color:#c9c6bd;}

/* drop cap for feature intros */
.dropcap::first-letter{
  font-family:var(--display);font-weight:600;float:left;
  font-size:4.6em;line-height:0.72;padding:0.06em 0.09em 0 0;color:var(--ink);
}
.invert .dropcap::first-letter{color:var(--white);}

.columns-2{column-count:2;column-gap:44px;}
@media(max-width:720px){.columns-2{column-count:1;}}

.pullquote{
  font-family:var(--display);font-weight:500;font-style:italic;
  font-size:clamp(1.5rem,3vw,2.1rem);line-height:1.2;
  border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);
  padding:26px 0;margin:36px 0;
}
.invert .pullquote{border-color:var(--white);}

/* =========================================================================
   CARDS / GRIDS
   ========================================================================= */
.grid{display:grid;gap:0;}
.cols-3{grid-template-columns:repeat(3,1fr);}
.cols-4{grid-template-columns:repeat(4,1fr);}
.cols-2{grid-template-columns:repeat(2,1fr);}
@media(max-width:900px){.cols-3,.cols-4{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.cols-2,.cols-3,.cols-4{grid-template-columns:1fr;}}

/* editorial bordered grid — shared hairlines */
.frame{border-top:var(--hair-strong);border-left:var(--hair-strong);}
.frame > *{border-right:var(--hair-strong);border-bottom:var(--hair-strong);padding:26px;}
.invert .frame,.invert .frame > *{border-color:rgba(250,249,244,0.28);}

.tile .idx{font-family:var(--mono);font-size:0.72rem;color:var(--muted);letter-spacing:0.06em;}
.tile h3{margin:10px 0 8px;}
.tile p{font-size:0.98rem;color:var(--ink-2);margin:0;}
.invert .tile p{color:#c9c6bd;}

/* =========================================================================
   NUMBERED / EDITORIAL LISTS
   ========================================================================= */
.enum{list-style:none;margin:0;padding:0;counter-reset:e;}
.enum > li{
  counter-increment:e;position:relative;
  border-top:var(--hair);padding:22px 0 22px 74px;
}
.enum > li:last-child{border-bottom:var(--hair);}
.enum > li::before{
  content:counter(e,decimal-leading-zero);
  position:absolute;left:0;top:22px;
  font-family:var(--mono);font-size:0.85rem;color:var(--muted);
  border:1px solid var(--line-2);padding:3px 7px;
}
.enum h3{font-size:1.28rem;margin-bottom:6px;}
.enum p{margin:0;color:var(--ink-2);font-size:1.02rem;}
.invert .enum > li{border-color:rgba(250,249,244,0.2);}
.invert .enum p{color:#c9c6bd;}
.invert .enum > li::before{border-color:rgba(250,249,244,0.35);color:var(--muted-2);}

/* definition-style rows */
.deflist{border-top:var(--hair-strong);}
.deflist .row{
  display:grid;grid-template-columns:minmax(150px,1fr) 2.4fr;gap:24px;
  border-bottom:var(--hair);padding:20px 0;align-items:baseline;
}
.deflist .row dt{font-family:var(--display);font-weight:600;font-size:1.15rem;}
.deflist .row dd{margin:0;color:var(--ink-2);font-size:1.02rem;}
/* readable definition text on dark (inverted) sections */
.invert .deflist .row dt{color:var(--white);}
.invert .deflist .row dd{color:#c9c6bd;}
@media(max-width:640px){.deflist .row{grid-template-columns:1fr;gap:6px;}}

/* tags / stamps */
.stamp{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--sans);font-size:0.66rem;font-weight:600;letter-spacing:0.1em;
  text-transform:uppercase;border:1px solid var(--ink);padding:3px 9px;
  white-space:nowrap;
}
.stamp.solid{background:var(--ink);color:var(--paper);}
.stamp.ghost{color:var(--muted);border-color:var(--line-2);}

/* callout box */
.callout{border:2px solid var(--ink);padding:clamp(22px,3vw,36px);}
.callout.avoid{background:var(--ink);color:var(--paper);}
.callout .kicker{margin-bottom:12px;}
.callout.avoid .kicker{color:var(--accent-2);}

/* before / after transformation */
.ba{margin:0;}
.ba-pair{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,2vw,22px);}
.ba-shot{position:relative;border:2px solid var(--ink);background:var(--paper-2);overflow:hidden;}
.ba-shot img{display:block;width:100%;height:100%;object-fit:cover;aspect-ratio:4/5;}
.ba-shot figcaption{position:absolute;top:0;left:0;font-family:var(--sans);font-size:0.66rem;font-weight:700;letter-spacing:0.18em;text-transform:uppercase;color:var(--white);background:var(--ink);padding:6px 12px;}
.ba-shot:last-child figcaption{background:var(--accent);}
.ba-shot.ba-missing{aspect-ratio:4/5;display:flex;align-items:center;justify-content:center;background:repeating-linear-gradient(45deg,var(--paper-2),var(--paper-2) 12px,var(--paper-3) 12px,var(--paper-3) 24px);}
.ba-shot.ba-missing::after{content:"Photo coming soon";font-family:var(--mono);font-size:0.8rem;color:var(--muted);}
.ba-caption{font-family:var(--serif);font-size:1.06rem;color:var(--muted);text-align:center;margin:18px auto 0;max-width:60ch;line-height:1.55;}

/* value-contrast stakes band */
.stakes-grid{display:flex;align-items:center;justify-content:center;gap:clamp(18px,4vw,54px);flex-wrap:wrap;}
.stakes-col{display:flex;flex-direction:column;align-items:center;text-align:center;flex:1;min-width:210px;}
.stakes-label{font-family:var(--sans);font-size:0.7rem;font-weight:600;letter-spacing:0.2em;text-transform:uppercase;color:var(--muted-2);margin-bottom:10px;}
.stakes-fig{font-family:var(--display);font-weight:600;font-size:clamp(3rem,9vw,5.4rem);line-height:0.95;letter-spacing:-0.02em;color:var(--paper);}
.stakes-col.win .stakes-fig{color:var(--accent-lift);}
.stakes-sub{font-family:var(--mono);font-size:0.82rem;color:var(--muted-2);margin-top:14px;max-width:26ch;line-height:1.5;}
.stakes-vs{font-family:var(--display);font-style:italic;font-size:1.4rem;color:var(--muted-2);flex:0 0 auto;}
.stakes-foot{font-family:var(--serif);font-size:1.14rem;color:#d8d5cc;text-align:center;max-width:64ch;margin:34px auto 0;line-height:1.6;}
@media(max-width:640px){
  .stakes-vs{width:100%;flex-basis:100%;}
}

/* the cost-of-bad-health ledger */
.ledger{border:2px solid var(--ink);margin-top:14px;}
.ledger-row{display:flex;align-items:baseline;justify-content:space-between;gap:20px;padding:18px clamp(18px,3vw,28px);border-bottom:var(--hair);}
.ledger-row:last-child{border-bottom:none;}
.ledger-item{display:flex;flex-direction:column;gap:3px;}
.ledger-name{font-family:var(--serif);font-size:1.08rem;color:var(--ink);line-height:1.3;}
.ledger-calc{font-family:var(--mono);font-size:0.74rem;color:var(--muted);letter-spacing:0.02em;}
.ledger-amt{font-family:var(--mono);font-size:1.12rem;font-weight:500;color:var(--ink-2);white-space:nowrap;font-variant-numeric:tabular-nums;}
.ledger-total{background:var(--ink);border-top:2px solid var(--ink);}
.ledger-total .ledger-name{color:var(--paper);font-family:var(--display);font-weight:600;font-size:1.22rem;}
.ledger-total .ledger-calc{color:var(--muted-2);}
.ledger-total .ledger-amt{color:var(--accent-lift);font-size:1.5rem;font-weight:600;}
.ledger-foot{margin-top:22px;}
.ledger-foot p{margin:0 0 12px;}
.ledger-foot .fine{font-family:var(--mono);font-size:0.76rem;color:var(--muted);line-height:1.7;}
@media(max-width:520px){
  .ledger-row{flex-direction:column;gap:6px;}
  .ledger-amt{align-self:flex-start;}
}

/* =========================================================================
   DIRECTORY (STORES)
   ========================================================================= */
.controls{display:flex;flex-direction:column;gap:16px;margin-bottom:28px;}
.searchbar{display:flex;align-items:center;border:2px solid var(--ink);background:var(--white);}
.searchbar input{
  flex:1;border:none;background:none;padding:15px 18px;font-family:var(--serif);
  font-size:1.08rem;color:var(--ink);outline:none;
}
.searchbar .sb-label{font-family:var(--mono);font-size:0.72rem;color:var(--muted);padding:0 16px;border-right:var(--hair);letter-spacing:0.08em;}
.chiprow{display:flex;flex-wrap:wrap;gap:8px;align-items:center;}
.chiprow .lab{font-family:var(--sans);font-size:0.68rem;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;color:var(--muted);margin-right:4px;}
.chip{
  font-family:var(--sans);font-size:0.76rem;font-weight:500;
  border:1px solid var(--line-2);background:none;color:var(--ink-2);
  padding:6px 13px;cursor:pointer;transition:all .12s;
}
.chip:hover{border-color:var(--ink);}
.chip.on{background:var(--ink);color:var(--paper);border-color:var(--ink);}
.count{font-family:var(--mono);font-size:0.76rem;color:var(--muted);margin:8px 0 18px;letter-spacing:0.03em;}

.store-grid{border-top:var(--hair-strong);}
.store{
  border-bottom:var(--hair);padding:22px 0;
  display:grid;grid-template-columns:1fr auto;gap:16px;cursor:pointer;
}
.store:hover{background:var(--paper-2);}
.store .s-main{min-width:0;}
.store .s-name{font-family:var(--display);font-weight:600;font-size:1.34rem;display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;}
.store .s-meta{font-family:var(--sans);font-size:0.74rem;letter-spacing:0.06em;text-transform:uppercase;color:var(--muted);margin-top:6px;display:flex;gap:14px;flex-wrap:wrap;}
.store .s-meta span::before{content:"";}
.store .s-buy{margin-top:12px;color:var(--ink-2);font-size:1.02rem;max-width:60ch;}
.store .s-right{text-align:right;font-family:var(--mono);font-size:0.82rem;color:var(--muted);white-space:nowrap;}
.store .s-detail{grid-column:1 / -1;display:none;border-top:var(--hair);margin-top:18px;padding-top:18px;}
.store.open .s-detail{display:grid;grid-template-columns:1fr 1fr;gap:26px;}
.store.open{background:var(--paper-2);}
@media(max-width:640px){.store.open .s-detail{grid-template-columns:1fr;}}
.store .s-detail h4{font-family:var(--sans);font-size:0.7rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--muted);margin:0 0 8px;}
.store .s-detail p{font-size:0.98rem;margin:0 0 6px;color:var(--ink-2);}
.s-flag{font-family:var(--mono);font-size:0.72rem;color:var(--muted);}

/* =========================================================================
   TABLE
   ========================================================================= */
.tbl{width:100%;border-collapse:collapse;font-size:0.98rem;}
.tbl th,.tbl td{text-align:left;padding:13px 14px;border-bottom:var(--hair);vertical-align:top;}
.tbl th{font-family:var(--sans);font-size:0.68rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--muted);border-bottom:var(--hair-strong);}
.tbl tr:hover td{background:var(--paper-2);}
.tbl .scroll{overflow-x:auto;}
.tbl-wrap{overflow-x:auto;border-top:var(--hair-strong);}

/* =========================================================================
   BUDGET CALCULATOR
   ========================================================================= */
.calc{border:2px solid var(--ink);display:grid;grid-template-columns:1fr 1.2fr;}
@media(max-width:760px){.calc{grid-template-columns:1fr;}}
.calc .inputs{padding:clamp(22px,3vw,34px);border-right:var(--hair-strong);}
@media(max-width:760px){.calc .inputs{border-right:none;border-bottom:var(--hair-strong);}}
.calc .ledger{padding:clamp(22px,3vw,34px);background:var(--paper-2);}
.field{margin-bottom:22px;}
.field label{display:block;font-family:var(--sans);font-size:0.72rem;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;color:var(--muted);margin-bottom:8px;}
.field input[type=number]{width:100%;border:1px solid var(--ink);background:var(--white);padding:11px 13px;font-family:var(--serif);font-size:1.1rem;color:var(--ink);}
.seg{display:flex;border:1px solid var(--ink);}
.seg button{flex:1;background:none;border:none;border-left:var(--hair);padding:11px 8px;font-family:var(--sans);font-size:0.8rem;font-weight:600;cursor:pointer;color:var(--ink);}
.seg button:first-child{border-left:none;}
.seg button.on{background:var(--ink);color:var(--paper);}
.ledger-row{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:var(--hair);font-size:1rem;}
.ledger-row span:last-child{font-family:var(--mono);}
.ledger-row.total{border-bottom:none;border-top:2px solid var(--ink);margin-top:6px;padding-top:16px;font-family:var(--display);font-weight:600;font-size:1.3rem;}
.ledger-row.total span:last-child{font-family:var(--display);}
.ledger-note{font-size:0.86rem;color:var(--muted);margin-top:16px;}

/* =========================================================================
   FOOTER
   ========================================================================= */
.site-foot{border-top:2px solid var(--ink);padding:clamp(40px,5vw,68px) 0 40px;background:var(--paper);}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:36px;}
@media(max-width:720px){.foot-grid{grid-template-columns:1fr;gap:26px;}}
.foot-grid h4{font-family:var(--sans);font-size:0.7rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--muted);margin:0 0 14px;}
.foot-grid a{display:block;text-decoration:none;color:var(--ink);padding:5px 0;font-size:1.02rem;}
.foot-grid a:hover{text-decoration:underline;}
.foot-brand .logo{font-family:var(--display);font-weight:900;font-size:1.8rem;}
.foot-brand p{color:var(--muted);font-size:0.95rem;max-width:34em;margin-top:12px;}
.foot-legal{border-top:var(--hair);margin-top:40px;padding-top:20px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-family:var(--mono);font-size:0.7rem;color:var(--muted);text-transform:uppercase;letter-spacing:0.06em;}

/* =========================================================================
   MISC
   ========================================================================= */
.disclaimer{font-size:0.86rem;color:var(--muted);border-left:2px solid var(--line-2);padding-left:16px;margin-top:16px;}
.sub-h{font-family:var(--display);font-weight:600;font-size:clamp(1.3rem,2.2vw,1.7rem);margin-top:8px;}
.link-underline{text-decoration:none;border-bottom:1px solid var(--ink);padding-bottom:1px;}
.link-underline:hover{background:var(--ink);color:var(--paper);}
.hidden{display:none !important;}
.spacer-sm{height:24px;}
.spacer{height:48px;}

.crosslinks{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:var(--hair-strong);}
@media(max-width:720px){.crosslinks{grid-template-columns:1fr;}}
.crosslinks a{
  text-decoration:none;padding:30px;border-right:var(--hair-strong);border-bottom:var(--hair-strong);
  display:block;transition:background .15s,color .15s;
}
.crosslinks a:last-child{border-right:none;}
.crosslinks a:hover{background:var(--ink);color:var(--paper);}
.crosslinks a:hover .kicker,.crosslinks a:hover p{color:var(--paper);opacity:0.85;}
.crosslinks .arrow{font-family:var(--display);font-size:1.5rem;}
.crosslinks h3{margin:10px 0 8px;}
.crosslinks p{color:var(--muted);font-size:0.95rem;margin:0;}

/* =========================================================================
   BUTTONS (sales / CTA)
   ========================================================================= */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--sans);font-size:0.82rem;font-weight:600;letter-spacing:0.08em;
  text-transform:uppercase;text-decoration:none;cursor:pointer;
  background:var(--ink);color:var(--paper);border:2px solid var(--ink);
  padding:15px 26px;transition:background .15s,color .15s;
}
.btn:hover{background:transparent;color:var(--ink);}
.btn .price-badge{font-family:var(--mono);letter-spacing:0;font-size:0.86rem;}
.btn-ghost{background:transparent;color:var(--ink);}
.btn-ghost:hover{background:var(--ink);color:var(--paper);}
.btn-lg{font-size:0.92rem;padding:19px 34px;}
.invert .btn{background:var(--paper);color:var(--ink);border-color:var(--paper);}
.invert .btn:hover{background:transparent;color:var(--paper);}
.invert .btn-ghost{background:transparent;color:var(--paper);}
.invert .btn-ghost:hover{background:var(--paper);color:var(--ink);}
.cta-row{display:flex;gap:14px;flex-wrap:wrap;align-items:center;}
.cta-note{font-family:var(--mono);font-size:0.72rem;color:var(--muted);letter-spacing:0.04em;}

/* nav CTA button in masthead (selector strong enough to beat `.nav a`) */
.nav a.nav-cta{
  font-family:var(--sans);font-size:0.74rem;font-weight:700;letter-spacing:0.08em;
  text-transform:uppercase;text-decoration:none;background:var(--ink);color:var(--paper);
  padding:10px 18px;border:2px solid var(--ink);white-space:nowrap;transition:background .15s,color .15s;
}
.nav a.nav-cta:hover{background:transparent;color:var(--ink);}

/* =========================================================================
   PRICING
   ========================================================================= */
.price-wrap{display:grid;grid-template-columns:1.1fr 1fr;gap:0;border:2px solid var(--ink);}
@media(max-width:800px){.price-wrap{grid-template-columns:1fr;}}
.price-left{padding:clamp(26px,4vw,44px);border-right:2px solid var(--ink);}
@media(max-width:800px){.price-left{border-right:none;border-bottom:2px solid var(--ink);}}
.price-right{padding:clamp(26px,4vw,44px);background:var(--ink);color:var(--paper);display:flex;flex-direction:column;justify-content:center;}
.price-right .price-sale{display:flex;align-items:center;gap:12px;margin-bottom:6px;flex-wrap:wrap;}
.price-right .price-sale .was{font-family:var(--display);font-size:1.5rem;color:var(--muted-2);text-decoration:line-through;text-decoration-thickness:2px;}
.price-right .price-sale .save{font-family:var(--sans);font-size:0.62rem;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:var(--white);background:var(--accent-2);padding:4px 9px;}
.price-right .amount{font-family:var(--display);font-weight:600;font-size:clamp(3.4rem,8vw,5rem);line-height:1;letter-spacing:-0.02em;}
.price-right .amount .cur{font-size:0.5em;vertical-align:super;font-weight:500;}
.price-right .once{font-family:var(--sans);font-size:0.74rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--muted-2);margin:10px 0 24px;}
.price-right .fine{font-family:var(--mono);font-size:0.72rem;color:var(--muted-2);margin-top:18px;line-height:1.7;}
.price-right .members-link{display:inline-block;margin-top:14px;font-family:var(--sans);font-size:0.78rem;letter-spacing:0.04em;color:var(--paper);text-decoration:none;border-bottom:1px solid var(--muted-2);padding-bottom:2px;align-self:center;transition:opacity .2s;}
.price-right .members-link:hover{opacity:0.7;}
.price-right .btn{background:var(--paper);color:var(--ink);border-color:var(--paper);}
.price-right .btn:hover{background:transparent;color:var(--paper);}
.checklist{list-style:none;margin:0;padding:0;}
.checklist li{position:relative;padding:11px 0 11px 34px;border-bottom:var(--hair);font-size:1.02rem;}
.checklist li:last-child{border-bottom:none;}
.checklist li::before{
  content:"";position:absolute;left:0;top:16px;width:14px;height:9px;
  border-left:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:rotate(-45deg);
}
.price-left h3{margin-bottom:6px;}

/* stat / proof strip */
.proof{display:flex;gap:0;flex-wrap:wrap;border-top:var(--hair-strong);border-bottom:var(--hair-strong);}
.proof > div{flex:1;min-width:180px;padding:24px;border-right:var(--hair);}
.proof > div:last-child{border-right:none;}
.proof .n{font-family:var(--display);font-weight:600;font-size:2.4rem;line-height:1;}
.proof .l{font-family:var(--sans);font-size:0.72rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--muted);margin-top:8px;}

/* faq */
.faq{border-top:var(--hair-strong);}
.faq details{border-bottom:var(--hair);}
.faq summary{
  cursor:pointer;list-style:none;padding:22px 40px 22px 0;position:relative;
  font-family:var(--display);font-weight:600;font-size:1.2rem;
}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+";position:absolute;right:6px;top:20px;font-family:var(--display);font-size:1.6rem;color:var(--muted);}
.faq details[open] summary::after{content:"–";}
.faq details[open] summary{color:var(--ink);}
.faq .a{padding:0 0 24px;color:var(--ink-2);font-size:1.04rem;max-width:60ch;}

/* =========================================================================
   INTRO — cinematic cold open v2 (JS-driven, sound, plays once per session)
   ========================================================================= */
.intro{
  position:fixed;inset:0;z-index:1000;background:var(--black);color:var(--white);
  display:none;align-items:center;justify-content:center;text-align:center;overflow:hidden;
  transform:translateY(0);
}
.intro.play{display:flex;}
.intro.wipe{transform:translateY(-100%);transition:transform .8s cubic-bezier(.76,0,.24,1);}
/* Scroll lock is intentionally NOT applied via overflow:hidden — a stalled
   intro must never be able to trap the page. The fixed overlay already covers
   the viewport during playback, and the CSS failsafe below always clears it. */
.intro::after{ /* vignette */
  content:"";position:absolute;inset:0;pointer-events:none;z-index:3;
  background:radial-gradient(125% 105% at 50% 48%, transparent 52%, rgba(0,0,0,0.72) 100%);
}
/* animated film grain */
.intro-grain{
  position:absolute;inset:-150%;z-index:1;pointer-events:none;opacity:0.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  animation:grainShift .7s steps(4) infinite;
}
@keyframes grainShift{
  0%{transform:translate(0,0);}25%{transform:translate(-6%,4%);}
  50%{transform:translate(5%,-3%);}75%{transform:translate(-3%,-5%);}100%{transform:translate(4%,3%);}
}
.intro-stage{position:relative;z-index:2;width:100%;height:42vh;min-height:220px;max-width:1120px;padding:0 24px;}
.intro-slot{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-weight:600;line-height:1.03;letter-spacing:-0.02em;
  font-size:clamp(2.2rem,7.6vw,5.4rem);
}
.intro-slot em{font-style:italic;font-weight:500;}

/* word-mask reveal */
.intro-words .w{display:inline-block;overflow:hidden;vertical-align:top;margin:0 0.16em;}
.intro-words .w .i{display:inline-block;transform:translateY(115%);transition:transform .62s cubic-bezier(.2,.75,.2,1);}
.intro-words.show .w .i{transform:translateY(0);}
.intro-words.out .w .i{transform:translateY(-115%);transition:transform .42s cubic-bezier(.7,0,.3,1);}

/* buzzword + strike */
.intro-buzz{position:relative;color:#8f8a7d;opacity:0;transform:scale(1.06);
  transition:opacity .28s ease, transform .5s cubic-bezier(.2,.75,.2,1);}
.intro-buzz.show{opacity:1;transform:scale(1);}
.intro-buzz.out{opacity:0;transition:opacity .3s ease;}
.intro-buzz .bar{position:absolute;left:-4%;right:-4%;top:53%;height:5px;background:var(--white);
  transform:scaleX(0);transform-origin:left;}
.intro-buzz.strike .bar{transform:scaleX(1);transition:transform .34s cubic-bezier(.7,0,.3,1);}

/* logo lockup — clip wipe */
.intro-logo{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;opacity:0;}
.intro-logo.show{opacity:1;transition:opacity .3s ease;}
.intro-logo .lg{
  font-family:var(--display);font-weight:900;font-size:clamp(2.8rem,9vw,6.6rem);letter-spacing:-0.02em;
  display:flex;align-items:flex-end;
}
.intro-logo .lg .ch{display:inline-block;overflow:hidden;line-height:0.92;}
.intro-logo .lg .ch .chi{display:inline-block;transform:translateY(115%);transition:transform .55s cubic-bezier(.2,.78,.2,1);}
.intro-logo.show .lg .ch .chi{transform:translateY(0);}
.intro-logo .lg .amp{font-style:italic;font-weight:500;}

/* grain flash on each strike */
.intro-grain{transition:opacity .12s ease;}
.intro.flash .intro-grain{opacity:0.95;}

/* optional B&W video layer (behind grain + text). Off until INTRO_VIDEO is set. */
.intro-video{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) contrast(1.12) brightness(0.5);opacity:0;transition:opacity .9s ease;pointer-events:none;}
.intro.filmroll .intro-video{opacity:0.55;}
.intro-logo .tag{
  font-family:var(--sans);font-size:0.8rem;font-weight:600;letter-spacing:0.34em;text-transform:uppercase;
  color:var(--muted-2);opacity:0;transform:translateY(8px);transition:opacity .5s ease .35s,transform .5s ease .35s;
}
.intro-logo.show .tag{opacity:1;transform:none;}

.intro-progress{position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--white);z-index:4;}
.intro.go .intro-progress{animation:introBar 10.4s linear forwards;}
@keyframes introBar{from{width:0;}to{width:100%;}}

/* slow cinematic drift on the whole stage */
.intro.go .intro-stage{animation:introDrift 11s ease-out forwards;}
@keyframes introDrift{from{transform:scale(1);}to{transform:scale(1.05);}}

/* --- title card (rules draw outward) --- */
.intro-card{display:flex;flex-direction:column;align-items:center;gap:20px;opacity:0;transform:translateY(16px);
  transition:opacity .5s ease,transform .6s cubic-bezier(.2,.75,.2,1);}
.intro-card.show{opacity:1;transform:none;}
.intro-card.out{opacity:0;transition:opacity .35s ease;}
.intro-kick{font-family:var(--sans);font-size:clamp(.72rem,1.7vw,.9rem);font-weight:600;letter-spacing:0.34em;
  text-transform:uppercase;color:#c9c6bd;}
.intro-rule{display:block;height:1px;width:0;background:rgba(250,249,244,0.6);transition:width .8s cubic-bezier(.76,0,.24,1);}
.intro-card.show .intro-rule{width:min(360px,62vw);}
.intro-sub{font-family:var(--display);font-weight:500;font-style:italic;font-size:clamp(1.15rem,2.6vw,1.7rem);color:var(--white);}

/* --- shock statistic --- */
.intro-stat{display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center;opacity:0;transform:translateY(18px);
  transition:opacity .5s ease,transform .7s cubic-bezier(.2,.75,.2,1);}
.intro-stat.show{opacity:1;transform:none;}
.intro-stat.out{opacity:0;transition:opacity .35s ease;}
.intro-stat .big{font-family:var(--display);font-weight:600;font-size:clamp(3.6rem,12vw,7.5rem);line-height:.92;letter-spacing:-.02em;}
.intro-stat .sub{font-family:var(--serif);font-size:clamp(1.05rem,2.6vw,1.6rem);color:#cdcabf;max-width:20ch;line-height:1.3;}

/* --- logo hairline --- */
.intro-logo .lg-rule{display:block;height:1px;width:0;background:rgba(250,249,244,0.5);margin:4px 0 2px;
  transition:width .7s cubic-bezier(.76,0,.24,1) .3s;}
.intro-logo.show .lg-rule{width:min(300px,55vw);}

/* FAILSAFE — the intro can NEVER trap the page on black, even if JS stalls,
   errors, or a stale cache never calls the teardown. Pure CSS, no JS needed. */
@keyframes introFailsafe{to{opacity:0;visibility:hidden;pointer-events:none;}}
.intro{animation:introFailsafe .5s ease 12.5s forwards;}
@keyframes heroFailsafe{to{opacity:1;transform:none;}}

/* =========================================================================
   SCROLL PROGRESS BAR (all pages)
   ========================================================================= */
.scroll-progress{
  position:fixed;top:0;left:0;height:3px;width:0;background:var(--ink);z-index:60;
  transition:width .08s linear;pointer-events:none;
}

/* =========================================================================
   STICKY BUY BAR (landing) — slides in after the hero
   ========================================================================= */
.buybar{
  position:fixed;left:0;right:0;bottom:0;z-index:55;background:var(--ink);color:var(--paper);
  border-top:2px solid var(--ink);transform:translateY(110%);transition:transform .4s cubic-bezier(.2,.7,.2,1);
}
.buybar.show{transform:translateY(0);}
.buybar .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:14px var(--gutter);}
.buybar-copy{font-family:var(--serif);font-size:1rem;min-width:0;}
.buybar-copy strong{font-family:var(--display);font-weight:600;}
.buybar-copy span{color:var(--muted-2);}
.buybar .btn.buybar-btn{background:var(--paper);color:var(--ink);border-color:var(--paper);padding:12px 22px;white-space:nowrap;}
.buybar .btn.buybar-btn:hover{background:transparent;color:var(--paper);}
@media(max-width:640px){
  .buybar-copy span{display:none;}
  .buybar .wrap{padding:11px 18px;gap:12px;}
  .buybar-copy{font-size:0.9rem;}
}

/* =========================================================================
   ANIMATED SECTION NUMBERS
   ========================================================================= */
.js .section-head .num{
  display:inline-block;opacity:0;transform:translateY(10px);
  transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.2,1);
}
.js .section-head.in .num{opacity:1;transform:none;}
.js .section-head .num::after{
  content:"";display:block;height:1px;width:0;background:currentColor;opacity:0.4;margin-top:8px;
  transition:width .7s cubic-bezier(.76,0,.24,1) .15s;
}
.js .section-head.in .num::after{width:38px;background:var(--accent);opacity:0.9;}

/* =========================================================================
   MEAL-PLAN GENERATOR
   ========================================================================= */
.plan-controls{
  border:2px solid var(--ink);display:grid;
  grid-template-columns:auto auto auto auto;gap:0;align-items:stretch;
}
.plan-controls .pc-field{padding:18px 22px;border-right:var(--hair);border-bottom:var(--hair);}
.plan-controls .pc-field label{display:block;font-family:var(--sans);font-size:0.68rem;font-weight:600;
  letter-spacing:0.12em;text-transform:uppercase;color:var(--muted);margin-bottom:10px;}
.plan-controls input[type=number]{width:90px;border:1px solid var(--ink);background:var(--white);
  padding:9px 11px;font-family:var(--serif);font-size:1.1rem;color:var(--ink);}
.plan-controls .pc-slots{grid-column:1 / -1;border-right:none;}
.slotrow{display:flex;gap:18px;flex-wrap:wrap;}
.slotbox{display:inline-flex;align-items:center;gap:8px;font-family:var(--serif);font-size:1rem;text-transform:none;letter-spacing:0;color:var(--ink);font-weight:400;cursor:pointer;}
.pc-actions{grid-column:1 / -1;display:flex;gap:12px;flex-wrap:wrap;padding:18px 22px;border-right:none;border-bottom:none;}
.pc-actions .btn{cursor:pointer;font-size:0.78rem;padding:12px 20px;}
@media(max-width:820px){.plan-controls{grid-template-columns:1fr 1fr;}.plan-controls .pc-field:nth-child(2n){border-right:none;}}
@media(max-width:520px){.plan-controls{grid-template-columns:1fr;}.plan-controls .pc-field{border-right:none;}}

.plan-cost{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:2px solid var(--ink);border-top:none;}
.plan-cost .pcost{padding:22px;border-right:var(--hair);}
.plan-cost .pcost:last-child{border-right:none;}
.plan-cost .pcost-n{font-family:var(--display);font-weight:600;font-size:clamp(2rem,4vw,2.8rem);line-height:1;font-variant-numeric:tabular-nums;}
.plan-cost .pcost-l{font-family:var(--sans);font-size:0.7rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--muted);margin-top:8px;}
@media(max-width:560px){.plan-cost{grid-template-columns:1fr;}.plan-cost .pcost{border-right:none;border-bottom:var(--hair);}}
.plan-compare{font-size:0.98rem;color:var(--ink-2);margin:16px 0 40px;max-width:60ch;}

.plan-split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,64px);}
@media(max-width:860px){.plan-split{grid-template-columns:1fr;gap:44px;}}

.plan-grid{display:flex;flex-direction:column;gap:0;border-top:var(--hair-strong);}
.plan-day{border-bottom:var(--hair);padding:16px 0;}
.plan-daynum{font-family:var(--mono);font-size:0.72rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--muted);margin-bottom:10px;}
.plan-meal{display:grid;grid-template-columns:96px 1fr;gap:14px;padding:8px 0;align-items:baseline;}
.plan-slot{font-family:var(--sans);font-size:0.64rem;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:var(--muted);padding-top:3px;}
.plan-name{font-family:var(--display);font-weight:600;font-size:1.12rem;line-height:1.15;}
.plan-note{font-size:0.9rem;color:var(--muted);margin-top:3px;}

.shop-list{border-top:var(--hair-strong);}
.shop-cat{border-bottom:var(--hair);padding:16px 0;}
.shop-cat h4{font-family:var(--sans);font-size:0.7rem;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:var(--muted);margin:0 0 10px;}
.shop-cat ul{list-style:none;margin:0;padding:0;}
.shop-cat li{margin:0;}
.shop-cat li label{display:flex;align-items:baseline;gap:12px;padding:7px 0;cursor:pointer;}
.shop-cat li input{margin:0;position:relative;top:2px;flex:0 0 auto;width:15px;height:15px;accent-color:var(--ink);}
.shop-item{flex:1;font-size:1.02rem;}
.shop-cat li input:checked ~ .shop-item{text-decoration:line-through;color:var(--muted);}
.shop-qty{font-family:var(--mono);font-size:0.85rem;color:var(--ink-2);white-space:nowrap;}

/* macro calculator */
.dual{display:flex;gap:8px;}
.dual input{width:84px;}
.target-out{display:grid;grid-template-columns:repeat(4,1fr);border:2px solid var(--ink);border-top:none;}
.target-out .tcard{padding:20px 22px;border-right:var(--hair);}
.target-out .tcard:last-child{border-right:none;}
.target-out .tnum{font-family:var(--display);font-weight:600;font-size:clamp(1.8rem,3.5vw,2.6rem);line-height:1;font-variant-numeric:tabular-nums;}
.target-out .tlbl{font-family:var(--sans);font-size:0.68rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--muted);margin-top:6px;}
@media(max-width:560px){.target-out{grid-template-columns:repeat(2,1fr);} .target-out .tcard:nth-child(2){border-right:none;}}

/* recipe expanders inside the plan */
.plan-recipe{min-width:0;}
.plan-recipe summary{list-style:none;cursor:pointer;display:flex;flex-direction:column;gap:3px;}
.plan-recipe summary::-webkit-details-marker{display:none;}
.plan-recipe summary::after{content:"+ recipe";font-family:var(--sans);font-size:0.6rem;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;color:var(--muted);margin-top:5px;}
.plan-recipe[open] summary::after{content:"– close";}
.plan-recipe .plan-macro{font-family:var(--mono);font-size:0.74rem;color:var(--muted);}
.plan-body{padding:10px 0 4px;}
.plan-steps{margin:4px 0 8px 1.15em;padding:0;font-size:0.95rem;color:var(--ink-2);}
.plan-steps li{margin:4px 0;}
.plan-inglist{font-size:0.86rem;color:var(--muted);margin:6px 0 0;}

/* daily macro estimate line */
.plan-macros{font-size:1.02rem;color:var(--ink-2);margin:0 0 40px;padding:14px 0;border-top:var(--hair);border-bottom:var(--hair);}
.plan-macros .pm-h{color:var(--muted);}
.plan-macros strong{font-family:var(--display);font-weight:600;}
.plan-macros .pm-cmp{font-family:var(--mono);font-size:0.8rem;color:var(--muted);display:inline-block;margin-left:6px;}

/* =========================================================================
   PRINT — clean plan + list only
   ========================================================================= */
@media print{
  .masthead,.no-print,.site-foot,.scroll-progress,.buybar,.plan-controls,.page-head .dateline,.plan-compare .no-print{display:none !important;}
  body{background:#fff;color:#000;font-size:12pt;}
  .page-head{padding:0 0 12px;border-bottom:2px solid #000;}
  .page-head h1{font-size:22pt;}
  .page-head .sub{display:none;}
  section{padding:12px 0;}
  .plan-cost{border-color:#000;}
  .plan-split{grid-template-columns:1fr 1fr;gap:24px;}
  .plan-day,.shop-cat{break-inside:avoid;}
  .plan-name{font-size:12pt;}
  a[href]::after{content:"";}
  .invert{background:#fff !important;color:#000 !important;}
}

/* entry gate — the one click that unlocks sound */
.intro-enter{position:absolute;inset:0;z-index:6;display:flex;align-items:center;justify-content:center;text-align:center;cursor:pointer;}
.intro-enter.hide{opacity:0;pointer-events:none;transition:opacity .45s ease;}
.enter-inner{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:22px;padding:24px;}
.enter-mark{font-family:var(--display);font-weight:900;font-size:clamp(2.2rem,7vw,4.6rem);letter-spacing:-0.02em;opacity:0.92;
  animation:enterFloat 3s ease-in-out infinite;}
.enter-mark .amp{font-style:italic;font-weight:500;}
@keyframes enterFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-6px);}}
.enter-btn{display:inline-flex;align-items:center;gap:13px;background:var(--paper);color:var(--ink);
  border:2px solid var(--paper);font-family:var(--sans);font-weight:700;font-size:0.9rem;letter-spacing:0.14em;
  text-transform:uppercase;padding:16px 34px;cursor:pointer;transition:transform .12s ease;}
.enter-btn:hover{transform:translateY(-2px);}
.enter-btn .tri{width:0;height:0;border-left:12px solid currentColor;border-top:8px solid transparent;border-bottom:8px solid transparent;}
.enter-btn::after{content:"";position:absolute;}
.enter-pulse{position:relative;}
.enter-pulse::before{content:"";position:absolute;inset:-10px;border:1px solid rgba(250,249,244,0.4);
  animation:enterPulse 1.8s ease-out infinite;pointer-events:none;}
@keyframes enterPulse{0%{opacity:.7;transform:scale(1);}100%{opacity:0;transform:scale(1.25);}}
.enter-sub{font-family:var(--mono);font-size:0.72rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--muted-2);}
.enter-skip{margin-top:6px;background:none;border:none;color:var(--muted-2);font-family:var(--sans);
  font-size:0.74rem;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;cursor:pointer;
  border-bottom:1px solid transparent;padding-bottom:2px;}
.enter-skip:hover{color:var(--white);border-color:var(--white);}
/* keep the bottom controls hidden until the sequence is running */
.intro:not(.go) .intro-sound,.intro:not(.go) .intro-skip{display:none;}

.intro-skip{
  position:absolute;bottom:24px;right:26px;z-index:5;background:none;border:1px solid rgba(250,249,244,0.35);
  color:var(--white);font-family:var(--sans);font-size:0.72rem;font-weight:600;letter-spacing:0.14em;
  text-transform:uppercase;padding:9px 16px;cursor:pointer;transition:background .15s,color .15s,opacity .3s;
}
.intro-skip:hover{background:var(--white);color:var(--ink);}
.intro-sound{
  position:absolute;bottom:24px;left:26px;z-index:5;display:inline-flex;align-items:center;gap:9px;
  background:none;border:1px solid rgba(250,249,244,0.35);color:var(--white);
  font-family:var(--sans);font-size:0.72rem;font-weight:600;letter-spacing:0.14em;text-transform:uppercase;
  padding:9px 16px;cursor:pointer;transition:background .15s,color .15s;
}
.intro-sound:hover{background:var(--white);color:var(--ink);}
.intro-sound .dot{width:8px;height:8px;border-radius:50%;background:var(--white);}
.intro-sound:hover .dot{background:var(--ink);}
.intro-sound.pending .dot{animation:soundPulse 1s ease infinite;}
.intro-sound.muted .dot{background:transparent;border:1px solid currentColor;animation:none;}
@keyframes soundPulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.35;transform:scale(.7);}}

/* hero entrance (landing only) */
.js body.landing .hero h1,
.js body.landing .hero .lede,
.js body.landing .hero .cta-row,
.js body.landing .hero .hero-side,
.js body.landing .hero .issue-line{
  opacity:0;transform:translateY(26px);
  transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1);
  animation:heroFailsafe .1s linear 12.5s forwards; /* reveal no matter what */
}
.js body.landing.entered .hero .issue-line{opacity:1;transform:none;transition-delay:.02s;}
.js body.landing.entered .hero h1{opacity:1;transform:none;transition-delay:.10s;}
.js body.landing.entered .hero .lede{opacity:1;transform:none;transition-delay:.26s;}
.js body.landing.entered .hero .cta-row{opacity:1;transform:none;transition-delay:.40s;}
.js body.landing.entered .hero .hero-side{opacity:1;transform:none;transition-delay:.50s;}

/* hero film grain texture */
.hero .hero-grain{
  position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grainShift .8s steps(3) infinite;
}
.hero .wrap{position:relative;z-index:1;}

/* button micro-interaction */
.btn{transition:background .15s,color .15s,transform .12s ease;}
.btn:active{transform:translateY(1px);}
.btn-lg:hover{transform:translateY(-2px);}
.price-right .btn-lg:hover{transform:translateY(-2px);}

/* =========================================================================
   SCROLL REVEAL + COUNT-UP
   ========================================================================= */
.js [data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1);}
.js [data-reveal].in{opacity:1;transform:none;}
.js [data-reveal-child] > *{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1);}
[data-reveal-child].in > *{opacity:1;transform:none;}
[data-reveal-child].in > *:nth-child(2){transition-delay:.08s;}
[data-reveal-child].in > *:nth-child(3){transition-delay:.16s;}
[data-reveal-child].in > *:nth-child(4){transition-delay:.24s;}
[data-reveal-child].in > *:nth-child(5){transition-delay:.32s;}
[data-reveal-child].in > *:nth-child(6){transition-delay:.40s;}
.count-up{font-variant-numeric:tabular-nums;}

@media (prefers-reduced-motion: reduce){
  .intro{display:none !important;}
  [data-reveal],[data-reveal-child] > *{opacity:1 !important;transform:none !important;transition:none !important;}
  .js body.landing .hero h1,.js body.landing .hero .lede,.js body.landing .hero .cta-row,
  .js body.landing .hero .hero-side,.js body.landing .hero .issue-line{opacity:1 !important;transform:none !important;transition:none !important;}
  .hero .hero-grain,.intro-grain{animation:none !important;}
}