/* ==========================================================================
   EVAN RIDGE | BUILT TO LAST — V1
   Palette derives from the Manual's own book.css so print and web are one brand.
   Two families only:
     display  = editorial serif stack
     ui       = system sans, for labels/buttons/eyebrows
   V1 NOTE: system stacks are used deliberately — zero network requests, zero
   GDPR exposure from a font CDN. For production, self-host one licensed display
   face (see the asset list) and only --font-display changes.
   ========================================================================== */

:root{
  --forest:#1F2E22;
  --forest-deep:#16211A;
  --forest-soft:#2A3D2E;
  --ink:#241A12;
  --soft:#5A4A3C;
  --cream:#F6F1E4;
  --cream-deep:#EFE7D4;
  --rule:#CBBFA8;
  --gold:#B8901F;
  --gold-lt:#D8B24A;
  --olive:#5F6B32;

  --font-display:"Iowan Old Style","Constantia","Cambria",Georgia,"Times New Roman",serif;
  --font-ui:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;

  --wrap:1120px;
  --gut:20px;
  --sec-y:96px;
  --r:3px;
}

@media (min-width:640px){ :root{ --gut:32px; --sec-y:112px; } }
@media (min-width:960px){ :root{ --sec-y:132px; } }

*,*::before,*::after{ box-sizing:border-box; }

/* The [hidden] attribute must always win. Any class carrying a display value
   (.countdown, .stickybar, .sec) would otherwise override the UA rule and
   reveal a block that is switched off in script.js — which for the countdown
   would mean publishing an "ends in" line with no real deadline behind it. */
[hidden]{ display:none !important; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--font-display);
  font-size:1.0625rem;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
@media (min-width:640px){ body{ font-size:1.125rem; } }

img{ max-width:100%; height:auto; display:block; }

h1,h2,h3{ font-family:var(--font-display); font-weight:600; line-height:1.12; margin:0 0 .5em; letter-spacing:-.012em; }
h1{ font-size:clamp(2.05rem,6.2vw,4rem); }
h2{ font-size:clamp(1.72rem,3.6vw,2.7rem); }
h3{ font-size:clamp(1.1rem,1.6vw,1.32rem); line-height:1.25; }
p{ margin:0 0 1.1em; }
strong,b{ font-weight:600; }

a{ color:inherit; }

.wrap{ width:100%; max-width:var(--wrap); margin:0 auto; padding-inline:var(--gut); }
.narrow{ max-width:640px; margin-inline:auto; }
.center{ text-align:center; }
.mt{ margin-top:44px; }

.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--gold); color:var(--ink); padding:12px 20px; font-family:var(--font-ui);
}
.skip:focus{ left:8px; top:8px; }

:where(a,button,summary,details):focus-visible{
  outline:2px solid var(--gold); outline-offset:3px; border-radius:2px;
}

/* ---------------------------------------------------------------- type bits */
.eyebrow,.price__tag,.lbl,.mark,.week__d,.part__n,.stickybar__n{
  font-family:var(--font-ui); text-transform:uppercase; letter-spacing:.16em;
  font-size:.68rem; font-weight:600;
}
.eyebrow{ color:var(--olive); margin:0 0 18px; }
.lede{ font-size:clamp(1.06rem,1.5vw,1.24rem); color:var(--soft); line-height:1.6; }
.lede--light{ color:#C9D4C4; }
.microcopy{ font-family:var(--font-ui); font-size:.8rem; letter-spacing:.02em; color:var(--soft); margin:14px 0 0; }
.microcopy--light{ color:#9FB09C; }

.mark{
  color:var(--gold); margin:0 0 30px; padding-bottom:12px;
  border-bottom:1px solid var(--rule); display:block;
}
.mark--light{ border-bottom-color:rgba(203,191,168,.24); }

/* ---------------------------------------------------------------- sections */
.sec{ padding-block:var(--sec-y); }
.sec--cream{ background:var(--cream); }
.sec--cream-deep{ background:var(--cream-deep); }
.sec--forest{ background:var(--forest); color:#EAE6D8; }
/* Scoped to direct section content only. A light card sitting inside a forest
   section (the order block) keeps ink text — otherwise its heading renders
   cream-on-cream and disappears. */
.sec--forest > .wrap > h2,
.sec--forest > .wrap > .mark,
.sec--forest h2.center{ color:#F6F1E4; }

/* ---------------------------------------------------------------- buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  background:var(--gold); color:#1A1206; text-decoration:none;
  font-family:var(--font-ui); font-weight:700; letter-spacing:.055em;
  text-transform:uppercase; font-size:.82rem;
  padding:17px 30px; border:1px solid transparent; border-radius:var(--r);
  transition:transform .12s ease, background-color .12s ease, box-shadow .12s ease;
  box-shadow:0 1px 0 rgba(0,0,0,.14);
}
.btn:hover{ background:var(--gold-lt); transform:translateY(-1px); box-shadow:0 3px 10px rgba(0,0,0,.16); }
.btn:active{ transform:translateY(0); box-shadow:0 1px 0 rgba(0,0,0,.2); }
.btn--lg{ padding:20px 38px; font-size:.9rem; min-height:58px; }
.btn--sm{ padding:12px 18px; font-size:.72rem; }
.btn--block{ display:flex; width:100%; }
.btn--onforest{ background:var(--gold); }

.link-arrow{
  font-family:var(--font-ui); font-size:.85rem; font-weight:600; letter-spacing:.04em;
  text-decoration:none; border-bottom:1.5px solid var(--gold); padding-bottom:2px;
  transition:border-color .12s ease;
}
.link-arrow::after{ content:" ↓"; }
.link-arrow:hover{ border-bottom-color:var(--ink); }

/* ---------------------------------------------------------------- masthead */
.masthead{
  position:sticky; top:0; z-index:50;
  background:var(--forest-deep); color:#EAE6D8;
  border-bottom:1px solid rgba(184,144,31,.28);
}
.masthead__in{ display:flex; align-items:center; gap:20px; min-height:58px; }
.wordmark{ display:flex; align-items:center; gap:10px; text-decoration:none; font-family:var(--font-ui); }
.wordmark__a,.wordmark__b{ font-size:.7rem; letter-spacing:.2em; font-weight:700; }
.wordmark__a{ color:#F6F1E4; }
.wordmark__b{ color:var(--gold); }
.wordmark__bar{ width:1px; height:13px; background:rgba(203,191,168,.5); }
.wordmark--lg .wordmark__a,.wordmark--lg .wordmark__b{ font-size:.82rem; }
.masthead__nav{ display:none; margin-left:auto; gap:26px; font-family:var(--font-ui); font-size:.78rem; letter-spacing:.06em; }
.masthead__nav a{ text-decoration:none; color:#C9D4C4; padding:6px 0; border-bottom:1px solid transparent; }
.masthead__nav a:hover{ color:#F6F1E4; border-bottom-color:var(--gold); }
.masthead__cta{ margin-left:auto; }
@media (min-width:960px){
  .masthead__nav{ display:flex; }
  .masthead__cta{ margin-left:0; }
}
/* Below 720 the masthead CTA and the wordmark cannot both fit without
   overflowing, and the sticky bottom bar already carries the purchase action
   on those widths — so the masthead keeps only the wordmark. */
@media (max-width:719px){ .masthead__cta{ display:none; } }
.masthead__in{ flex-wrap:nowrap; }
.wordmark{ min-width:0; }

/* ---------------------------------------------------------------- hero */
.hero{
  background:
    radial-gradient(120% 80% at 78% 0%, rgba(184,144,31,.10), transparent 62%),
    linear-gradient(180deg, var(--forest) 0%, var(--forest-deep) 100%);
  color:#EAE6D8; padding-block:clamp(56px,9vw,104px);
  position:relative; overflow:hidden;
}
.hero::after{
  content:""; position:absolute; inset:auto 0 0 0; height:1px;
  background:linear-gradient(90deg,transparent,rgba(184,144,31,.55),transparent);
}
/* Mobile leads with the portrait: Evan is the face of the promise and the
   first thing a phone should show. Desktop puts the argument on the left and
   the portrait, dominant, on the right. */
.hero__in{
  display:grid; gap:38px; align-items:center;
  grid-template-areas:"portrait" "copy";
}
.hero__portrait{ grid-area:portrait; }
.hero__copy{ grid-area:copy; }
.hero h1{ color:#F8F4E9; margin:0 0 .32em; }
.hero .lede{ color:#C9D4C4; max-width:34em; }
.hero .lede strong{ color:#F0EADB; }
@media (min-width:960px){
  .hero__in{
    grid-template-columns:1.02fr .98fr; gap:70px;
    grid-template-areas:"copy portrait";
  }
}

/* ---- hero portrait + quote card ---- */
.hero__portrait{
  position:relative; margin:0 auto;
  max-width:min(430px, 86vw); width:100%;
}
.hero__portrait img{
  width:100%; border-radius:2px;
  box-shadow:0 26px 54px rgba(0,0,0,.5);
}
.hero__portrait::after{        /* hairline frame, editorial not "card" */
  content:""; position:absolute; inset:-9px -9px -9px -9px;
  border:1px solid rgba(184,144,31,.34); border-radius:3px; pointer-events:none;
}
.quote{
  position:relative; z-index:2;
  margin:-42px 10px 0; padding:20px 22px;
  background:var(--cream); color:var(--ink);
  border-left:3px solid var(--gold); border-radius:0 var(--r) var(--r) 0;
  box-shadow:0 16px 34px rgba(0,0,0,.34);
}
.quote__t{
  margin:0 0 9px; font-size:1.02rem; line-height:1.42; font-style:italic;
}
.quote__c{
  font-family:var(--font-ui); font-style:normal; font-size:.62rem;
  letter-spacing:.17em; text-transform:uppercase; color:var(--olive); font-weight:600;
}
@media (min-width:960px){
  .hero__portrait{ max-width:460px; margin-inline:auto 0; }
  .quote{
    position:absolute; left:-64px; bottom:44px; margin:0;
    max-width:290px;
  }
}

.price{ display:flex; flex-wrap:wrap; align-items:baseline; gap:10px 14px; margin:26px 0 30px; }
.price__tag{ color:var(--gold); }
.price__now{ font-size:2.5rem; font-weight:600; line-height:1; color:#F8F4E9; }
.price__now--md{ font-size:2.2rem; color:var(--ink); }
.price__now--lg{ font-size:3rem; color:#F8F4E9; }
.price__note{ font-family:var(--font-ui); font-size:.78rem; color:#9FB09C; letter-spacing:.03em; width:100%; }
.sec--cream .price__note,.sec--cream-deep .price__note{ color:var(--soft); }
.sec--cream .price__tag{ color:var(--olive); }

.hero__cta{ display:flex; flex-wrap:wrap; align-items:center; gap:18px 26px; }
.hero__cta .link-arrow{ color:#C9D4C4; }
.hero__cta .link-arrow:hover{ color:#F6F1E4; border-bottom-color:#F6F1E4; }

/* cover stack — composed in CSS, never a flattened banner.
   The left padding is the room the workbook leans into; below the desktop
   breakpoint the stack is centred and narrowed so the workbook cannot clip
   against the viewport edge. */
.stack{ position:relative; padding:6px 0 0 13%; max-width:420px; margin-inline:auto; }
@media (min-width:960px){ .stack{ padding-left:8%; max-width:none; } }
.stack picture{ display:block; }
.stack__mn img{
  width:100%; border-radius:2px;
  box-shadow:0 22px 44px rgba(0,0,0,.42), 0 2px 0 rgba(255,255,255,.06);
}
.stack__wb{
  position:absolute; left:0; bottom:-1%; width:42%;
  transform:rotate(-7deg); transform-origin:bottom left;
}
@media (min-width:960px){ .stack__wb{ left:-2%; width:44%; } }
.stack__wb img{ width:100%; border-radius:2px; box-shadow:0 14px 30px rgba(0,0,0,.36); }
.cover-solo{ width:100%; border-radius:2px; box-shadow:0 18px 38px rgba(36,26,18,.22); }
.split__art .cover-solo{ max-width:340px; }
.portrait{ width:100%; max-width:340px; border-radius:2px; box-shadow:0 18px 38px rgba(36,26,18,.24); }

/* ---------------------------------------------------------------- proof */
.proof{ background:var(--cream-deep); border-bottom:1px solid var(--rule); padding-block:34px; }
.proof__grid{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(2,1fr); gap:22px 12px; text-align:center;
}
.proof__grid li{ display:flex; flex-direction:column; gap:4px; }
.proof__grid li:last-child{ grid-column:1 / -1; }
.num{ font-size:clamp(1.8rem,4.4vw,2.5rem); font-weight:600; line-height:1; color:var(--forest); font-variant-numeric:tabular-nums; }
.lbl{ color:var(--soft); font-size:.63rem; }
@media (min-width:720px){
  .proof__grid{ grid-template-columns:repeat(5,1fr); gap:16px; }
  .proof__grid li:last-child{ grid-column:auto; }
}

/* ---------------------------------------------------------------- split */
.split{ display:grid; gap:38px; align-items:center; }
.split__art{ display:flex; justify-content:center; }
@media (min-width:880px){
  .split{ grid-template-columns:.86fr 1.14fr; gap:64px; }
  .split--rev .split__art{ order:2; }
}

.ticks{ list-style:none; margin:0 0 28px; padding:0; }
.ticks li{ position:relative; padding-left:30px; margin-bottom:11px; }
.ticks li::before{
  content:""; position:absolute; left:6px; top:.34em;
  width:6px; height:11px; border-right:2px solid var(--gold); border-bottom:2px solid var(--gold);
  transform:rotate(42deg);
}
.order__t{ color:var(--ink); }
.week__list span:last-child,.lastcall h2,.lastcall__h{ color:#F6F1E4; }

.offerline{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:20px; padding:22px 0 0; border-top:1px solid var(--rule);
}

/* ---------------------------------------------------------------- the math */
.math .lede{ max-width:42em; margin-inline:auto; }
.math__base{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  margin:52px auto 8px; padding:30px 20px;
  border:1px solid rgba(184,144,31,.34); border-radius:var(--r);
  max-width:560px; background:rgba(0,0,0,.14);
}
.math__baselbl{ font-family:var(--font-ui); font-size:.68rem; letter-spacing:.15em; text-transform:uppercase; color:var(--gold); text-align:center; }
.math__basenum{ font-size:clamp(2.6rem,8vw,4.2rem); line-height:1; font-weight:600; color:#F8F4E9; font-variant-numeric:tabular-nums; }
.math__baseper{ font-family:var(--font-ui); font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:#9FB09C; }
.math__q{ margin:34px auto 30px; color:#C9D4C4; font-size:1.1rem; }

.bars{ list-style:none; margin:0 auto 34px; padding:0; max-width:760px; }
.bar{
  display:grid; grid-template-columns:1fr auto; grid-template-areas:"lbl val" "trk trk";
  gap:8px 14px; padding:18px 0; border-bottom:1px solid rgba(203,191,168,.16);
}
.bar__lbl{ grid-area:lbl; font-family:var(--font-ui); font-size:.86rem; letter-spacing:.03em; color:#C9D4C4; align-self:center; }
.bar__val{ grid-area:val; font-size:1.5rem; font-weight:600; color:#F8F4E9; font-variant-numeric:tabular-nums; }
.bar__track{ grid-area:trk; height:7px; background:rgba(203,191,168,.14); border-radius:99px; overflow:hidden; }
.bar__fill{
  display:block; height:100%; width:calc(var(--pct) * 1%);
  background:linear-gradient(90deg,var(--olive),var(--gold));
  border-radius:99px; transform:scaleX(0); transform-origin:left;
}
.is-lit .bar__fill{ transform:scaleX(1); transition:transform .7s cubic-bezier(.22,.7,.3,1); }
.bar:nth-child(2) .bar__fill{ transition-delay:.08s; }
.bar:nth-child(3) .bar__fill{ transition-delay:.16s; }
.bar:nth-child(4) .bar__fill{ transition-delay:.24s; }
.bar--peak{ border-bottom:none; }
.bar--peak .bar__lbl{ color:var(--gold-lt); }
.bar--peak .bar__val{ font-size:1.85rem; color:var(--gold-lt); }
.bar--peak .bar__fill{ background:linear-gradient(90deg,var(--gold),var(--gold-lt)); }
.ast{ font-size:.7em; vertical-align:super; }
@media (min-width:720px){
  .bar{ grid-template-columns:210px 1fr 200px; grid-template-areas:"lbl trk val"; align-items:center; gap:22px; }
  .bar__val{ text-align:right; }
}

/* Disclaimer at full readable size — never small grey print */
.disclosure{
  max-width:760px; margin:0 auto 34px; padding:22px 24px;
  border-left:3px solid var(--gold); background:rgba(0,0,0,.16); border-radius:0 var(--r) var(--r) 0;
}
.disclosure p{ margin:0 0 .6em; font-size:.98rem; color:#D9DFD4; line-height:1.55; }
.disclosure p:last-child{ margin:0; }
.disclosure .src{ font-family:var(--font-ui); font-size:.78rem; color:#9FB09C; }
.equiv{ max-width:600px; margin:0 auto 32px; font-size:1.16rem; color:#EAE6D8; }
.equiv strong{ color:var(--gold-lt); }

/* ---------------------------------------------------------------- parts
   All eight visible, no accordion, no cards: a numbered editorial contents
   list. Hairlines and a large gold numeral carry the structure. */
.parts{
  list-style:none; margin:52px 0 0; padding:0;
  display:grid; gap:0; counter-reset:none;
  border-top:1px solid var(--rule);
}
.part{
  display:grid; grid-template-columns:auto 1fr; gap:4px 20px;
  align-items:start; padding:26px 4px 24px;
  border-bottom:1px solid var(--rule);
}
.part__n{
  grid-row:1 / span 3;
  font-family:var(--font-display); font-size:2.05rem; line-height:.9;
  font-weight:600; color:var(--gold); font-variant-numeric:tabular-nums;
  min-width:2ch;
}
.part__t{
  margin:0 0 .34em; font-size:clamp(1.08rem,1.9vw,1.3rem); line-height:1.25;
}
/* chapter count rides with the title so the quantity is never separated from
   the thing it counts, and wraps with it on a narrow column */
.part__c{
  display:inline-block; white-space:nowrap;
  font-family:var(--font-ui); font-size:.63rem; font-weight:700;
  letter-spacing:.13em; text-transform:uppercase; color:var(--gold);
  border:1px solid rgba(184,144,31,.45); border-radius:2px;
  padding:3px 7px; margin-left:8px; vertical-align:.18em;
}
.part__d{ margin:0 0 .55em; color:var(--soft); font-size:.94rem; line-height:1.55; }
.part__w{
  margin:0; font-family:var(--font-ui); font-size:.7rem; font-weight:600;
  letter-spacing:.09em; text-transform:uppercase; color:var(--olive);
}
.part__w::before{ content:"→ "; color:var(--gold); }
@media (min-width:820px){
  .parts{ grid-template-columns:1fr 1fr; column-gap:56px; }
  /* the two columns each need their own top rule */
  .part:nth-child(2){ border-top:none; }
  .part:nth-last-child(-n+2){ border-bottom:none; }
  .part__n{ font-size:2.3rem; }
}

/* ------------------------------------------------------------- L.A.S.T.
   The initials are the asset. No cards, no explanatory columns: four large
   letters, their words, one line. */
.last{ padding-block:clamp(66px,8vw,96px); }
.lastsys{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(4,1fr); gap:10px;
  max-width:820px; margin-inline:auto;
}
.lastsys li{
  display:flex; flex-direction:column; align-items:center; gap:8px;
  position:relative;
}
.lastsys li + li::before{        /* hairline between the steps */
  content:""; position:absolute; left:calc(-5px - 1px); top:14%; bottom:22%;
  width:1px; background:var(--rule);
}
.lastsys__k{
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(3.2rem,11vw,6.4rem); line-height:.86;
  color:var(--forest); letter-spacing:-.02em;
}
.lastsys__w{
  font-family:var(--font-ui); font-size:clamp(.62rem,1.5vw,.78rem);
  font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold);
}
.lastsys__line{
  text-align:center; margin:34px auto 0; max-width:34em;
  font-size:clamp(1.02rem,1.6vw,1.2rem); color:var(--soft);
}

/* ---------------------------------------------------------------- week */
.week__list{ list-style:none; counter-reset:d; margin:44px auto 0; padding:0; max-width:720px; }
.week__list li{
  display:grid; grid-template-columns:78px 1fr; gap:18px; align-items:baseline;
  padding:16px 0; border-bottom:1px solid rgba(203,191,168,.18);
}
.week__list li:last-child{ border-bottom:none; }
.week__d{ color:var(--gold); }
.week__list span:last-child{ font-size:1.06rem; color:#EAE6D8; }

/* About: one compact column. The portrait carries the hero, so repeating it
   here would dilute both and lengthen the page for nothing. */
.about{ max-width:660px; margin-inline:auto; }
.about h2{ margin-bottom:.55em; }

/* Disclosure kept calm and small but at readable size — a fact stated once,
   not a warning box that dominates the homepage. */
.disclose{
  font-size:.9rem; line-height:1.55; color:var(--soft);
  border-left:2px solid var(--gold); padding-left:16px; margin-top:22px;
}

/* ---------------------------------------------------------------- panel */
.panel{
  background:var(--cream-deep); border:1px solid var(--rule);
  border-left:3px solid var(--gold); border-radius:0 var(--r) var(--r) 0;
  padding:24px 26px; margin-top:26px;
}
.panel h3{ font-size:.72rem; font-family:var(--font-ui); text-transform:uppercase; letter-spacing:.15em; color:var(--olive); margin:0 0 .6em; }
.panel h3 + p{ margin-bottom:1.3em; }
.panel p{ font-size:.97rem; color:var(--soft); }
.panel p:last-child{ margin-bottom:0; }

/* ---------------------------------------------------------------- order */
.order{
  max-width:820px; margin:44px auto 0;
  background:var(--cream); color:var(--ink);
  border:1px solid var(--rule); border-radius:var(--r);
  padding:34px 26px; display:grid; gap:30px;
  box-shadow:0 24px 60px rgba(0,0,0,.28);
}
.order__art{ display:flex; justify-content:center; }
.stack--sm{ max-width:240px; width:100%; }
.order__t{ font-size:clamp(1.24rem,2.4vw,1.6rem); margin-bottom:.8em; }
.order__t span{ color:var(--soft); font-size:.78em; }
.order__price{ display:flex; flex-wrap:wrap; align-items:baseline; gap:8px 14px; margin:24px 0 20px; padding-top:22px; border-top:1px solid var(--rule); }
.order__price .price__now--lg{ color:var(--ink); }
.order__reassure{ font-family:var(--font-ui); font-size:.78rem; color:var(--soft); text-align:center; margin:16px 0 0; line-height:1.7; }
.order__vat{ color:#7A6A5A; }
.order__refund{ font-family:var(--font-ui); font-size:.8rem; text-align:center; color:var(--olive); margin:10px 0 0; font-weight:600; }
@media (min-width:760px){
  .order{ grid-template-columns:250px 1fr; gap:40px; padding:40px 40px; align-items:start; }
}

.countdown{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  background:var(--forest); color:#F6F1E4; border-radius:var(--r);
  padding:12px 18px; margin-bottom:18px;
}
.countdown__lbl{ font-family:var(--font-ui); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); }
.countdown__clock{ font-family:var(--font-ui); font-size:1.1rem; font-weight:700; font-variant-numeric:tabular-nums; }

/* ---------------------------------------------------------------- faq */
.faq{ max-width:780px; margin:44px auto 0; border-top:1px solid var(--rule); }
.q{ border-bottom:1px solid var(--rule); }
.q>summary{
  list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between;
  gap:18px; padding:20px 4px; font-size:1.06rem; font-weight:600;
}
.q>summary::-webkit-details-marker{ display:none; }
.q__i{ position:relative; flex:0 0 15px; height:15px; }
.q__i::before,.q__i::after{
  content:""; position:absolute; inset:50% 0 auto 0; height:1.5px; background:var(--soft); transition:transform .2s ease;
}
.q__i::after{ transform:rotate(90deg); }
.q[open] .q__i::after{ transform:rotate(0); }
.q__b{ padding:0 4px 22px; max-width:64ch; }
.q__b p{ margin:0; color:var(--soft); font-size:1rem; }
.q__b a{ color:var(--olive); }

/* ---------------------------------------------------------------- lastcall */
.lastcall{ text-align:center; }
.lastcall__eyebrow{ font-family:var(--font-ui); text-transform:uppercase; letter-spacing:.2em; font-size:.7rem; color:var(--gold); margin:0 0 18px; }
.lastcall__h{ font-size:clamp(1.85rem,4.4vw,3.1rem); max-width:16em; margin-inline:auto; }
.lastcall__specs{
  list-style:none; display:flex; justify-content:center; flex-wrap:wrap; gap:14px 42px;
  margin:34px 0; padding:26px 0; border-block:1px solid rgba(203,191,168,.2);
}
.lastcall__specs li{ display:flex; align-items:baseline; gap:8px; }
.lastcall__specs b{ font-size:1.7rem; color:#F8F4E9; font-variant-numeric:tabular-nums; }
.lastcall__specs span{ font-family:var(--font-ui); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:#9FB09C; }
.lastcall__equiv{ max-width:34em; margin:0 auto 30px; color:#D9DFD4; }
.lastcall__equiv strong{ color:var(--gold-lt); }
.lastcall__price{ display:flex; flex-direction:column; align-items:center; gap:6px; margin-bottom:30px; }

/* ---------------------------------------------------------------- footer */
.colophon{ background:var(--forest-deep); color:#9FB09C; padding-block:52px 40px; font-family:var(--font-ui); }
.colophon__top{ display:flex; flex-wrap:wrap; gap:24px 40px; align-items:center; justify-content:space-between; padding-bottom:26px; border-bottom:1px solid rgba(203,191,168,.15); }
.colophon__nav{ display:flex; flex-wrap:wrap; gap:2px 22px; font-size:.8rem; }
/* Footer links carry the legal pages, so they must be genuinely tappable:
   44px minimum height on touch widths, not a 24px text line. */
.colophon__nav a{
  text-decoration:none; color:#C9D4C4; border-bottom:1px solid transparent;
  display:inline-flex; align-items:center; min-height:44px; padding-block:2px;
}
.colophon__nav a:hover{ color:#F6F1E4; border-bottom-color:var(--gold); }
.colophon__legal{ font-size:.78rem; line-height:1.7; margin:26px 0 14px; max-width:80ch; }
.colophon__c{ font-size:.75rem; color:#7C8C79; margin:0; }
.colophon__c a{ color:var(--gold); text-decoration:none; border-bottom:1px solid rgba(184,144,31,.4); }
.colophon__c a:hover{ color:#F6F1E4; }

/* ------------------------------------------------------------ legal pages
   Same brand, plainer voice. One narrow reading column, generous leading,
   nothing decorative — these pages exist to be read and checked. */
.legal{ background:var(--cream); padding-block:clamp(48px,7vw,84px) clamp(64px,8vw,96px); }
.legal__in{ max-width:760px; margin-inline:auto; }
.legal__back{
  display:inline-flex; align-items:center; min-height:44px;
  font-family:var(--font-ui); font-size:.74rem;
  letter-spacing:.12em; text-transform:uppercase; color:var(--olive);
  text-decoration:none; box-shadow:inset 0 -1px 0 var(--rule);
  margin-bottom:24px;
}
.legal__back:hover{ color:var(--ink); border-bottom-color:var(--gold); }
.legal h1{ font-size:clamp(1.75rem,4vw,2.5rem); margin-bottom:.3em; }
.legal__date{
  font-family:var(--font-ui); font-size:.76rem; letter-spacing:.08em;
  color:var(--soft); margin:0 0 40px; padding-bottom:20px;
  border-bottom:1px solid var(--rule);
}
.legal h2{
  font-size:clamp(1.05rem,1.9vw,1.24rem); margin:40px 0 .6em;
  padding-top:26px; border-top:1px solid var(--rule); color:var(--brown,#5B4229);
}
.legal h2:first-of-type{ border-top:none; padding-top:0; margin-top:32px; }
.legal h3{
  font-family:var(--font-ui); font-size:.74rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--olive); margin:26px 0 .5em;
}
.legal p,.legal li{ font-size:1rem; line-height:1.68; color:var(--ink); }
.legal p{ margin:0 0 1.05em; }
.legal ul{ margin:0 0 1.15em; padding-left:0; list-style:none; }
.legal ul li{ position:relative; padding-left:20px; margin-bottom:.45em; color:var(--soft); }
.legal ul li::before{ content:""; position:absolute; left:2px; top:.72em; width:5px; height:5px; background:var(--gold); border-radius:50%; }
.legal a{ color:var(--olive); text-decoration:underline; text-underline-offset:2px; }
.legal a:hover{ color:var(--ink); }
.legal__box{
  background:var(--cream-deep); border:1px solid var(--rule);
  border-left:3px solid var(--gold); border-radius:0 var(--r) var(--r) 0;
  padding:20px 24px; margin:0 0 1.3em;
}
.legal__box p{ margin:0 0 .5em; }
.legal__box p:last-child{ margin:0; }
.legal__box strong{ color:var(--ink); }
.legal__id{ font-style:normal; }
.legal__id span{ display:block; color:var(--soft); }
.legal__id b{ color:var(--ink); font-weight:600; }
.legal__note{ font-size:.92rem; color:var(--soft); }

/* ---------------------------------------------------------------- sticky */
.stickybar{
  position:fixed; left:0; right:0; bottom:0; z-index:60;
  background:var(--forest-deep); border-top:1px solid rgba(184,144,31,.4);
  padding:10px var(--gut) calc(10px + env(safe-area-inset-bottom));
  transform:translateY(110%); transition:transform .22s ease;
  box-shadow:0 -6px 22px rgba(0,0,0,.3);
}
.stickybar.is-in{ transform:translateY(0); }
.stickybar__in{ display:flex; align-items:center; gap:12px; max-width:var(--wrap); margin:0 auto; }
.stickybar__txt{ display:flex; flex-direction:column; line-height:1.25; min-width:0; }
.stickybar__n{ color:#C9D4C4; font-size:.6rem; }
.stickybar__p{ color:#F6F1E4; font-family:var(--font-ui); font-weight:700; font-size:1rem; }
.stickybar__p em{ font-style:normal; font-weight:400; font-size:.66rem; color:var(--gold); letter-spacing:.08em; text-transform:uppercase; }
.stickybar .btn{ margin-left:auto; flex:0 0 auto; min-height:46px; }
.stickybar__x{
  background:none; border:none; color:#7C8C79; font-size:1.4rem; line-height:1;
  padding:6px 2px 6px 8px; cursor:pointer; flex:0 0 auto;
}
.stickybar__x:hover{ color:#F6F1E4; }
@media (min-width:960px){ .stickybar{ display:none; } }

/* ---------------------------------------------------------------- reveal
   Hidden state applies ONLY when JS is running (html.js is set by script.js
   before paint). With JS off, blocked or broken, every .reveal block renders
   normally — the page must never depend on JS to be visible. */
.js .reveal{ opacity:0; transform:translateY(10px); }
.reveal.is-in{ opacity:1; transform:none; transition:opacity .5s ease, transform .5s cubic-bezier(.22,.7,.3,1); }
.last__step:nth-child(2).is-in{ transition-delay:.07s; }
.last__step:nth-child(3).is-in{ transition-delay:.14s; }
.last__step:nth-child(4).is-in{ transition-delay:.21s; }
.week__list li:nth-child(n).is-in{ transition-delay:calc(var(--i,0) * .05s); }

/* ------------------------------------------------------ reduced motion */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .js .reveal{ opacity:1 !important; transform:none !important; }
  .bar__fill{ transform:scaleX(1) !important; }
  .stickybar.is-in{ transform:none; }
}
