/* ═══════════════════════════════════════════════════════════════════════
   BOOKCRATER SITE — marketing surfaces
   Loads AFTER css/bookcrater.css, which owns all tokens and shared
   primitives. Nothing here redefines a token or introduces a raw colour.

   Surface intent (Round 1.7): the sales experience is the richest and most
   persuasive expression of the system. Deliberate band rhythm — warm white,
   cream, kraft-pale, rationed navy — never an endless cream-card wall.
   ═══════════════════════════════════════════════════════════════════════ */

.wrap{max-width:1280px;margin:0 auto;padding:0 26px;position:relative;z-index:1}
.wrap-narrow{max-width:900px}

/* ═══ BANDS — the page's rhythm ══════════════════════════════════════ */
.band{padding:var(--s9) 0;position:relative;z-index:1}
.band-cream{background:var(--cream)}
.band-paper{background:var(--paper);border-top:var(--bw-rule) solid var(--navy);
  border-bottom:var(--bw-rule) solid var(--navy)}
.band-kraft{background:var(--kraft-pale);border-top:var(--bw-rule) solid var(--navy);
  border-bottom:var(--bw-rule) solid var(--navy)}
.band-navy{background:var(--navy);border-top:var(--bw-rule) solid var(--navy);
  border-bottom:var(--bw-rule) solid var(--brown)}
.band-navy h1,.band-navy h2,.band-navy h3,.band-navy h4{color:var(--cream)}
.band-navy p,.band-navy .muted{color:#C9BCA4}
.band-navy .eyebrow{color:var(--kraft-lit)}
.section-head{max-width:62ch;margin-bottom:var(--s6)}
/* .center only centres the TEXT inside this box. Without auto margins the box
   itself stays flush left inside a 1280px wrap, so seven section headings sat
   left of the centred content beneath them. The Phase 5A rule had both. */
.section-head.center{margin-left:auto;margin-right:auto}
.section-head h2{font-size:clamp(29px,3.5vw,44px);font-weight:900;letter-spacing:-.03em}
.section-head .muted{font-size:19.5px;margin-top:var(--s3)}

/* ═══ TOPBAR ═════════════════════════════════════════════════════════ */
.topbar{background:var(--cream);border-bottom:var(--bw-rule) solid var(--navy);
  position:sticky;top:0;z-index:60}
/* Tighter vertical padding so the illustrated logo can be larger without the
   sticky header eating the viewport. */
.topbar-inner{max-width:1280px;margin:0 auto;padding:9px 26px;display:flex;
  align-items:center;justify-content:space-between;gap:22px}
.topnav{display:flex;align-items:center;gap:22px}
.topnav-links{display:flex;gap:24px;font:700 15px var(--body)}
.topnav-links a{text-decoration:none;padding:4px 0;border-bottom:2.5px solid transparent}
.topnav-links a:hover{border-bottom-color:var(--kraft)}
.mobile-nav-toggle{display:none;font:800 15px var(--disp);background:var(--paper);
  border:var(--bw-med) solid var(--navy);border-radius:var(--r);padding:11px 16px;
  min-height:var(--tap);cursor:pointer;box-shadow:0 2px 0 var(--navy);color:var(--navy)}
.mobile-nav-panel{display:none;border-top:var(--bw-med) solid var(--navy);background:var(--paper);
  padding:var(--s4) 26px var(--s5)}
.mobile-nav-panel[data-open="true"]{display:block}
.mobile-nav-panel a{display:flex;align-items:center;min-height:52px;font:700 17px var(--body);
  text-decoration:none;border-bottom:var(--bw-light) solid var(--line)}
.mobile-nav-panel a:last-child{border-bottom:0}

/* ═══ HERO ═══════════════════════════════════════════════════════════ */
.hero{padding:var(--s8) 0 var(--s7)}
.hero-grid{display:grid;grid-template-columns:1.06fr .94fr;gap:var(--s8);align-items:center}
.hero-copy h1{font-size:clamp(38px,5vw,60px);font-weight:900;line-height:1.0;letter-spacing:-.035em}
.hero-copy h1 .em{color:var(--brown)}
.hero-copy .lead,.hero-copy > p{font-size:20px;line-height:1.55;color:var(--brown-mid);
  max-width:30em;margin-top:var(--s5)}
/* The second half of the hero promise: the course is the product, the tools
   are why it is executable. Quieter than .lead so the hierarchy between the
   two sentences is visible rather than merely implied. Needs to beat
   '.hero-copy > p', which would otherwise size it identically to the lead. */
.hero-copy > p.lead-sub{font-size:16.5px;color:var(--ink-3);margin-top:var(--s4);max-width:34em}
.hero-cta{display:flex;gap:13px;flex-wrap:wrap;margin-top:var(--s6)}
.cta-note{font-size:14.5px;color:var(--ink-3);margin-top:var(--s3)}
.hero-trust{display:flex;flex-wrap:wrap;gap:9px;margin-top:var(--s5)}
.hero-shot{border:var(--bw-heavy) solid var(--navy);border-radius:var(--r-lg);overflow:hidden;
  box-shadow:var(--sh-lift);background:var(--paper)}
.screenframe{border:var(--bw-med) solid var(--navy);border-radius:var(--r);overflow:hidden;
  background:var(--paper);box-shadow:var(--sh-2)}
.caption{text-align:center;font:700 11.5px var(--mono);color:var(--brown-mid);
  margin-top:var(--space-relaxed);letter-spacing:.09em;text-transform:uppercase}
/* proof figures */
.proof{display:flex;gap:var(--s6);flex-wrap:wrap;margin-top:var(--s5);padding-top:var(--s5);
  border-top:var(--bw-med) solid var(--line-hard)}
.proof .n{font-family:var(--disp);font-weight:900;font-size:30px;letter-spacing:-.03em;color:var(--brown)}
.proof .l{font:600 13px var(--body);color:var(--ink-3)}

/* ═══ THE SPINE CHART — the same shelf, sorted ═══════════════════════ */
.spines{display:flex;align-items:flex-end;gap:7px;height:132px;margin-top:var(--s6)}
.spines div{flex:1;min-width:0;overflow:hidden;border:var(--bw-heavy) solid var(--navy);
  border-bottom:0;border-radius:4px 4px 0 0;display:flex;align-items:flex-end;justify-content:center;
  padding-bottom:9px;font:700 10px var(--mono);letter-spacing:.06em;text-align:center;line-height:1.3}
.spines-rule{height:4px;background:var(--navy);border-radius:2px}

/* ═══ MECHANISMS ═════════════════════════════════════════════════════ */
.mech-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(224px,1fr));gap:18px;margin-top:var(--s7)}
.mech-item{background:var(--paper);border:var(--bw-med) solid var(--navy);border-radius:var(--r-lg);
  padding:22px 20px;box-shadow:var(--sh-2);position:relative;
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.mech-item:hover{transform:translateY(-3px);box-shadow:var(--sh-lift)}
.mech-num{position:absolute;top:-13px;left:18px;background:var(--navy);color:var(--kraft-lit);
  font:700 10px var(--mono);letter-spacing:.14em;padding:5px 11px;border-radius:4px 4px 0 0}
.mech-item h3{font-size:18px;font-weight:800;margin:8px 0}
.mech-item p{font-size:15px;color:var(--brown-mid);margin:0 0 15px;line-height:1.5}
.mech-item .io{border-top:var(--bw-med) dashed var(--line-hard);padding-top:12px;
  font-size:13.5px;color:var(--ink-3)}
.mech-item .io b{color:var(--brown);font-weight:700}

/* ═══ TOOL / FIT ROWS ════════════════════════════════════════════════ */
/* Two columns, copy beside the screenshot -- the Phase 5A intent.
   The Round 2A rewrite made this a 12-column grid driven by .s4/.s6 span
   utilities that were never applied to this markup, so every tool card sat in
   1/12th of the row (~80px) with its text wrapping one word per line. The
   section still measured 3,044px tall, which read as a long section rather
   than a collapsed one. */
.tool-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--s6);margin-top:var(--s7);align-items:center}
/* Alternates which side the screenshot sits on down the page. */
.tool-row.reverse .tool-copy{order:2}
.tool-copy{background:var(--paper);border:var(--bw-med) solid var(--navy);border-radius:var(--r-lg);
  padding:24px;box-shadow:var(--sh-2)}
.tool-copy h3{font-size:20px;margin:var(--s3) 0 9px}
.tool-copy p{font-size:15.5px;color:var(--brown-mid);margin:0}
.fit-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s7)}
.fit-card{display:grid;gap:11px;margin-top:var(--s6)}
.fit-card > div{display:flex;gap:12px;align-items:flex-start;font-size:16px}

/* ═══ DEMO WIDGET — the real mechanism, on the sales page ════════════ */
.demo-widget{background:var(--kraft);border:var(--bw-heavy) solid var(--navy);
  border-radius:var(--r-inst);padding:13px;box-shadow:var(--sh-inst);position:relative}
.demo-widget::before{content:'';position:absolute;top:-10px;right:26px;transform:rotate(2.2deg);
  width:74px;height:22px;background:rgba(156,95,38,.5);
  border-left:1px dashed rgba(74,42,12,.35);border-right:1px dashed rgba(74,42,12,.35);border-radius:1px}
.demo-inner{background:var(--paper);border:var(--bw-med) solid var(--navy);border-radius:6px;
  overflow:hidden;position:relative;z-index:1}
.demo-head{padding:14px 17px 12px;border-bottom:var(--bw-med) solid var(--navy);background:var(--cream-2)}
.demo-head h3{font-size:20px;font-weight:900;letter-spacing:-.025em;margin-top:5px}
.demo-body{padding:17px}
.demo-foot{padding:14px 17px;border-top:var(--bw-med) solid var(--navy);background:var(--cream-2)}
.demo-q{font-family:var(--disp);font-weight:800;font-size:18.5px;letter-spacing:-.015em;margin-bottom:3px}
.demo-choices{display:flex;flex-direction:column;gap:9px;margin-top:var(--s4)}
.demo-choice{display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  font:600 15.5px var(--body);background:var(--cream);border:var(--bw-med) solid var(--line-hard);
  border-radius:var(--r);padding:12px 14px;min-height:var(--ctrl);color:var(--navy);cursor:pointer;
  transition:all var(--dur) var(--ease)}
.demo-choice:hover{border-color:var(--navy);background:var(--cream-2)}
.demo-choice[aria-pressed="true"]{background:var(--kraft-pale);border-color:var(--navy);
  box-shadow:0 2px 0 var(--navy)}
.demo-choice .box{width:22px;height:22px;border-radius:3px;border:var(--bw-med) solid var(--navy);
  flex:none;display:grid;place-items:center;background:var(--paper)}
.demo-choice[aria-pressed="true"] .box{background:var(--navy)}
.demo-choice[aria-pressed="true"] .box::after{content:'';width:10px;height:5px;
  border-left:2.4px solid var(--kraft-lit);border-bottom:2.4px solid var(--kraft-lit);
  transform:rotate(-45deg) translate(1px,-1px)}
.demo-progress{display:flex;gap:5px;margin-bottom:var(--s3)}
.demo-progress > div{flex:1;height:11px;border-radius:2px;background:var(--paper);
  border:var(--bw-med) solid var(--line-hard);transition:all var(--dur)}
.demo-progress > div.done{background:var(--kraft);border-color:var(--navy)}
.demo-result{display:flex;align-items:center;gap:13px;flex-wrap:wrap}

/* ═══ FAQ ════════════════════════════════════════════════════════════ */
.faq-item{border:var(--bw-med) solid var(--navy);border-radius:var(--r-lg);background:var(--paper);
  margin-bottom:var(--s3);overflow:hidden}
.faq-item summary{padding:19px 22px;font:800 18px var(--disp);cursor:pointer;list-style:none;
  display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:56px}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:'+';font:700 24px var(--mono);color:var(--kraft-2);flex:none}
.faq-item[open] summary{background:var(--cream-2);border-bottom:var(--bw-med) solid var(--navy)}
.faq-item[open] summary::after{content:'–'}
.faq-item .prose,.faq-item > div{padding:20px 22px;font-size:16.5px;color:var(--prose);max-width:74ch}

/* ═══ OFFER ══════════════════════════════════════════════════════════ */
/* Padding lives on the card itself. It used to come from an .offer-head
   wrapper; without one, every line sat 3px from a 2.5px border. */
.offer-card{max-width:660px;margin:0 auto;background:var(--paper);
  border:var(--bw-rule) solid var(--navy);border-radius:var(--r-lg);overflow:hidden;
  box-shadow:var(--sh-lift);padding:var(--s6) var(--s6) var(--s5)}
.offer-head{background:var(--kraft-pale);padding:26px 30px;
  border-bottom:var(--bw-rule) solid var(--navy);position:relative}
.offer-head::before{content:'';position:absolute;top:-11px;left:50%;
  transform:translateX(-50%) rotate(-1.4deg);width:104px;height:24px;background:rgba(156,95,38,.5);
  border-left:1px dashed rgba(74,42,12,.35);border-right:1px dashed rgba(74,42,12,.35)}
.offer-body{padding:30px}
.price-row{display:flex;align-items:baseline;gap:14px;margin:var(--s4) 0 6px;flex-wrap:wrap}
.price-now{font-family:var(--disp);font-weight:900;font-size:62px;letter-spacing:-.05em;line-height:1}
.price-was{font-size:22px;color:var(--ink-3);text-decoration:line-through}
.price-label{font:700 10.5px var(--mono);letter-spacing:.15em;text-transform:uppercase;color:var(--kraft-2)}
/* The saving, stated plainly. A kraft chip rather than a red flash: this is a
   real reduction, and it should read as a fact, not a sales graphic. */
.price-save{font:800 13px var(--disp);color:var(--go);background:var(--go-bg);
  border:var(--bw-med) solid var(--go);border-radius:var(--r);padding:4px 10px;
  align-self:center;white-space:nowrap}
.includes-list{list-style:none;padding:0;margin:var(--s5) 0 0}
.includes-list li{display:flex;gap:13px;padding:12px 0;
  border-bottom:var(--bw-med) dashed var(--line-hard);font-size:16px;align-items:flex-start}
.includes-list li:last-child{border-bottom:0}
.includes-list li::before{content:'';width:24px;height:24px;border-radius:3px;background:var(--go-bg);
  border:var(--bw-med) solid var(--go);flex:none;margin-top:2px;
  background-image:linear-gradient(45deg,transparent 45%,var(--go) 45%,var(--go) 55%,transparent 55%),
                   linear-gradient(-45deg,transparent 45%,var(--go) 45%,var(--go) 55%,transparent 55%);
  background-size:11px 11px;background-repeat:no-repeat;background-position:5px 8px,9px 8px}
.cta-band{background:var(--kraft-pale);border-top:var(--bw-rule) solid var(--navy);
  border-bottom:var(--bw-rule) solid var(--navy);padding:var(--s8) 0;text-align:center}
.badge-advanced{background:var(--navy);color:var(--kraft-lit);border-color:var(--navy)}

/* ═══ PAGE HEADER / LEGAL / PROSE PAGES ══════════════════════════════ */
.page-header{background:var(--kraft-pale);border-bottom:var(--bw-rule) solid var(--navy);
  padding:var(--s7) 0}
.page-header h1{margin-top:var(--s3)}
.legal-body,.prose{max-width:70ch;font-size:17px;line-height:1.7;color:var(--prose)}
.legal-body h2,.prose h2{font-size:24px;font-weight:800;margin:34px 0 13px;color:var(--navy)}
.legal-note{border:var(--bw-med) solid var(--kraft-deep);background:var(--kraft-pale);
  border-radius:var(--r);padding:16px 19px;margin:24px 0;font-size:16px}

/* ═══ FOOTER ═════════════════════════════════════════════════════════ */
/* Light, so the approved logo sits in the environment it was drawn for.
   The lockup has navy lettering; on a navy ground it half-disappears and the
   transparent PNG shows the dark through the artwork. The brand does not bend
   to the footer -- the footer accommodates the brand. A heavy navy rule keeps
   the endpoint deliberate rather than making the page just fade out. */
footer{background:var(--cream-2);color:var(--prose);
  border-top:var(--bw-rule) solid var(--navy);padding:var(--s8) 0 var(--s7);font-size:15px}
footer a{color:var(--kraft-2)}
.footer-grid{display:flex;justify-content:space-between;gap:var(--s7) var(--s8);flex-wrap:wrap;align-items:center}
.footer-links{display:flex;gap:var(--s7);flex-wrap:wrap}
.footer-links div a{display:block;line-height:2.1;text-decoration:none}
.footer-links div a:hover{text-decoration:underline}
.footer-legal{margin-top:var(--s7);padding-top:var(--s5);border-top:1px solid var(--line-hard);
  font-size:13.5px;color:var(--ink-3);max-width:78ch}

/* ═══ RESPONSIVE ═════════════════════════════════════════════════════ */
@media(max-width:1080px){
  .hero-grid,.fit-grid{grid-template-columns:1fr;gap:var(--s6)}
  .tool-row{grid-template-columns:1fr}
  .tool-row.reverse .tool-copy{order:0}
}
@media(max-width:860px){
  .topnav-links{display:none}
  .mobile-nav-toggle{display:inline-flex;align-items:center}
}
@media(max-width:760px){
  .wrap{padding:0 16px} .topbar-inner{padding:8px 16px}
  .band{padding:var(--s7) 0} .hero{padding:var(--s6) 0 var(--s5)}
  .spines{height:96px;gap:4px}
  .spines div{font-size:7.5px;padding-bottom:5px;letter-spacing:0}
  .spines div:nth-child(2),.spines div:nth-child(6){display:none}
  .grid-2,.grid-3{grid-template-columns:1fr}
  .offer-body,.offer-head{padding:22px 18px}
  .price-now{font-size:50px}
}

/* The logo is a link home — it must clear 44px even though the mark is 44px tall. */
.topbar .brand{min-height:var(--tap);display:inline-flex;align-items:center}
/* Standalone links — the only content of their block — are controls, not prose,
   so the WCAG 2.5.8 inline exception does not apply and they need a real target. */
p.center > a:only-child,
p.faint.center > a:only-child,
.topnav-links a,
#ckSimulateDecline{display:inline-flex;align-items:center;justify-content:center;
  min-height:var(--tap);padding:0 4px}


/* ═══ REAL-WORLD PHOTOGRAPHY ═════════════════════════════════════════
   Photographs are framed the way the Field Kit frames everything else --
   a heavy navy edge and an offset shadow, so they read as something laid
   on the page rather than a floating stock image. They are given real
   space: this section is the human half of the story. */
.photo-wide{margin:var(--s8) 0 0;max-width:1100px}
.photo-wide picture{display:block;border:var(--bw-heavy) solid var(--navy);
  border-radius:var(--r-lg);box-shadow:0 5px 0 var(--navy);overflow:hidden;background:var(--cream-2)}
.photo-wide img{width:100%;height:auto;display:block}
.photo-wide figcaption{font:700 11px var(--mono);letter-spacing:.13em;text-transform:uppercase;
  color:var(--kraft-2);margin-top:var(--s4);text-align:center}

/* The journey: a photographic sequence, not a row of cards. */
.journey{list-style:none;margin:var(--s7) 0 0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--s7) var(--s6)}
.journey-step figure{margin:0 0 var(--s4)}
.journey-step picture{display:block;border:var(--bw-med) solid var(--navy);
  border-radius:var(--r-lg);box-shadow:0 4px 0 var(--navy);overflow:hidden;background:var(--cream-2)}
.journey-step img{width:100%;height:auto;display:block}
.journey-n{font:700 10.5px var(--mono);letter-spacing:.16em;text-transform:uppercase;
  color:var(--kraft-2);margin:0 0 4px}
.journey-step h3{font-size:21px;margin:0 0 6px}
.journey-step .muted{font-size:16px;margin:0}

@media(max-width:760px){
  .photo-wide{margin-top:var(--s7)}
  .journey{gap:var(--s6);margin-top:var(--s6)}
}


/* ═══ TOOL SHELF ═════════════════════════════════════════════════════
   One signature screenshot beside a compact list. Communicates "there is a
   lot here" without asking the visitor to read the whole Toolkit first. */
.toolshelf{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:var(--s7);align-items:center;margin-top:var(--s7)}
.toolshelf-list{list-style:none;margin:0;padding:0;display:grid;gap:var(--s4)}
.toolshelf-list li{display:grid;gap:3px;padding-left:var(--s5);position:relative}
.toolshelf-list li::before{content:"";position:absolute;left:0;top:9px;width:11px;height:11px;
  background:var(--kraft);border:var(--bw-med) solid var(--navy);border-radius:2px}
.toolshelf-list strong{font:800 17px var(--disp);color:var(--navy);letter-spacing:-.01em}
.toolshelf-list span{font-size:15.5px;color:var(--brown-mid);line-height:1.45}
.toolshelf-more{margin-top:var(--s6);font-size:16px;color:var(--brown-mid);
  max-width:76ch;padding-top:var(--s5);border-top:var(--bw-light) solid var(--line-hard)}
.toolshelf-more strong{color:var(--navy)}


/* ═══ THE OPPORTUNITY ════════════════════════════════════════════════
   Photograph beside the copy rather than beneath it: the same argument in
   roughly half the vertical space. */
.opp-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));
  gap:var(--s7);align-items:center;margin-top:var(--s6)}
.opp-copy p{font-size:17px;line-height:1.6;color:var(--prose);margin:0 0 var(--s4);max-width:56ch}
.opp-copy p:last-child{margin-bottom:0}
.opp-lead strong{color:var(--navy);font-family:var(--disp);font-size:19px;line-height:1.35;
  display:block;letter-spacing:-.01em}
.opp-photo{margin:0}
.opp-photo picture{display:block;border:var(--bw-heavy) solid var(--navy);border-radius:var(--r-lg);
  box-shadow:0 5px 0 var(--navy);overflow:hidden;background:var(--cream-2)}
.opp-photo img{width:100%;height:auto;display:block}
.opp-photo figcaption{font:700 11px var(--mono);letter-spacing:.13em;text-transform:uppercase;
  color:var(--kraft-2);margin-top:var(--s4);line-height:1.5}
.opp-card{margin-top:var(--s7)}
.opp-list{margin:var(--s3) 0 0;columns:2;column-gap:var(--s7)}
.opp-list li{break-inside:avoid;margin-bottom:var(--s2)}
@media(max-width:760px){.opp-list{columns:1}}

/* The differentiation argument, folded into the course section rather than
   given a section of its own. */
.course-why{margin:var(--s7) auto 0;max-width:72ch;text-align:center;font-size:16.5px;
  line-height:1.6;color:var(--brown-mid);padding-top:var(--s5);
  border-top:var(--bw-light) solid var(--line-hard)}


/* ═══ LIMITED TIME OFFER ════════════════════════════════════════════════════
   The discount has to be readable in about a second, without the page
   looking like a dropshipping store. Kraft and navy, the same materials as
   everything else -- no red flashes, no countdown, no invented deadline. */
.sale-flag{font:800 10px var(--mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--paper);background:var(--stop);border:var(--bw-med) solid var(--navy);
  border-radius:var(--r);padding:5px 9px;white-space:nowrap;align-self:center}
.sale-inline{font:800 12.5px var(--disp);letter-spacing:.01em;color:var(--stop);
  text-transform:uppercase;margin-right:6px}
.sale-banner{font:900 13px var(--disp);letter-spacing:.14em;text-transform:uppercase;
  color:var(--paper);background:var(--stop);border:var(--bw-med) solid var(--navy);
  border-radius:var(--r);padding:9px 16px;display:inline-block;margin:0 0 var(--s5);
  box-shadow:0 3px 0 var(--navy)}

/* Was / now, side by side, so the comparison is structural rather than a
   matter of noticing a struck-through number. */
.price-row{display:flex;align-items:flex-end;gap:var(--s6);flex-wrap:wrap;margin:0 0 var(--s3)}
.price-was-label,.price-now-label{display:block;font:700 10px var(--mono);letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:2px}
.price-now-label{color:var(--kraft-2)}
.price-was{font-family:var(--disp);font-weight:800;font-size:30px;color:var(--ink-3);
  text-decoration:line-through;text-decoration-thickness:2.5px;line-height:1}
.price-now{font-family:var(--disp);font-weight:900;font-size:62px;letter-spacing:-.05em;
  line-height:1;color:var(--navy)}
.price-save{font:900 15px var(--disp);color:var(--paper);background:var(--go);
  border:var(--bw-med) solid var(--navy);border-radius:var(--r);padding:7px 12px;
  text-align:center;line-height:1.15;box-shadow:0 3px 0 var(--navy);align-self:center}
@media(max-width:520px){
  .price-now{font-size:50px}
  .price-row{gap:var(--s4) var(--s5)}
}




/* ═══ MOBILE DENSITY ═════════════════════════════════════════════════
   A page that reads well on a desktop becomes a very long scroll on a phone:
   every grid collapses to one column and the same content costs three times
   the height. These sections carry their meaning at half width, so on a phone
   they stay two-up rather than stacking. */
@media(max-width:760px){
  /* The six-step journey: the photographs still read at half width, and the
     sequence is clearer when more of it is visible at once. */
  .journey{grid-template-columns:1fr 1fr;gap:var(--s5) var(--s4)}
  .journey-step h3{font-size:17px}
  .journey-step .muted{font-size:14px;line-height:1.45}
  .journey-n{font-size:9.5px}

  /* Product screenshots: two-up keeps the proof without four full-width
     images of scrolling. */
  #product .grid-2{grid-template-columns:1fr 1fr;gap:var(--s4)}
  #product .caption{font-size:10px;letter-spacing:.06em;margin-top:var(--s4)}
}
  /* The hero chips repeat the proof row directly beneath them; on a phone
     that is two rows of the same claim. */
  .hero-trust{display:none}
}
@media(max-width:420px){
  .journey .muted{font-size:13.5px}
}

/* Course pacing, folded in from its own section. */
.pace{margin-top:var(--s7);padding-top:var(--s6);border-top:var(--bw-light) solid var(--line-hard)}
.pace-lead{font:800 19px var(--disp);color:var(--navy);text-align:center;margin:0 0 var(--s5)}
.pace-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--s5)}
.pace-item{display:flex;flex-direction:column;gap:4px;background:var(--paper);
  border:var(--bw-med) solid var(--navy);border-radius:var(--r);padding:var(--s4) var(--s5)}
.pace-n{font:900 24px var(--disp);color:var(--navy);letter-spacing:-.02em;line-height:1.1}
.pace-item span:last-child{font-size:15px;color:var(--brown-mid);line-height:1.45}
.pace-note{font-size:14px;color:var(--ink-3);text-align:center;margin:var(--s4) auto 0;max-width:70ch}


/* ═══ CUSTOMER REVIEWS ═══════════════════════════════════════════════
   A scroll-snap carousel, so ten reviews cost roughly the height of one row
   instead of ten stacked cards. Field Kit cards: paper on a heavy navy edge
   with the offset shadow, not a generic review widget. */
.eyebrow-star{color:var(--kraft-deep);font-size:13px;vertical-align:-1px}
.carousel{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;
  gap:var(--s4);margin-top:var(--s7)}
.carousel-track{list-style:none;margin:0;padding:var(--s2) 4px var(--s5);display:grid;
  grid-auto-flow:column;grid-auto-columns:calc((100% - var(--s5)) / 2);
  column-gap:var(--s5);overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;overscroll-behavior-x:contain}
.carousel-track::-webkit-scrollbar{display:none}
.carousel-track:focus-visible{outline:none;box-shadow:0 0 0 3px var(--kraft-lit);border-radius:var(--r-lg)}

.review{scroll-snap-align:start;margin:0;background:var(--paper);
  border:var(--bw-med) solid var(--navy);border-radius:var(--r-lg);
  box-shadow:0 4px 0 var(--navy);padding:var(--s6) var(--s6) var(--s5);
  display:flex;flex-direction:column;gap:var(--s4);min-height:100%}
.review blockquote{margin:0;display:flex;flex-direction:column;gap:var(--s3)}
.review-head{font:800 22px var(--disp);color:var(--navy);letter-spacing:-.015em;
  line-height:1.25;margin:0}
.review-body{font-size:18px;line-height:1.6;color:var(--prose);margin:0;max-width:62ch}
/* Name and rating on one line: the stars sit beside the attribution, sized
   below the name so they read as a mark against it rather than competing with
   it. --kraft-deep is the text-safe amber in the system; the surface kraft is
   2.85:1 on cream and would fail non-text contrast for a meaningful graphic. */
.review-by{margin-top:auto;padding-top:var(--s4);border-top:var(--bw-light) solid var(--line);
  display:flex;align-items:center;justify-content:space-between;gap:var(--s3);flex-wrap:wrap}
.review-name{font:900 18px var(--disp);color:var(--navy);letter-spacing:-.01em}
.review-stars{color:var(--kraft-deep);font-size:19px;letter-spacing:2px;line-height:1;
  white-space:nowrap;flex:none}
@media(max-width:900px){
  /* One card at a time, so there is no neighbouring headline to align with.
     Centring the quote splits the leftover space above and below it instead of
     pooling it all above the attribution, which reads as composition rather
     than a gap. Equal heights are kept, so swiping never jumps the page. */
  .review blockquote{margin-block:auto}
}
@media(max-width:520px){
  .review{padding:var(--s5)}
  .review-head{font-size:20px}
  .review-body{font-size:17px}
  .review-name{font-size:17px}
  .review-stars{font-size:17px;letter-spacing:1.5px}
}

.carousel-btn{width:var(--tap);height:var(--tap);flex:none;border-radius:var(--r);
  border:var(--bw-med) solid var(--navy);background:var(--paper);color:var(--navy);
  font-size:19px;line-height:1;cursor:pointer;box-shadow:0 3px 0 var(--navy);
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.carousel-btn:hover:not(:disabled){background:var(--cream-2)}
.carousel-btn:active:not(:disabled){transform:translateY(3px);box-shadow:0 0 0 var(--navy)}
.carousel-btn:disabled{opacity:.35;cursor:default;box-shadow:0 3px 0 var(--line-hard);
  border-color:var(--line-hard)}
/* Page dots. The point is that a reader sees at a glance there is more here
   than the two cards in front of them -- so the row of dots, not a sentence,
   carries that. Kraft and navy like every other control. */
.carousel-dots{display:flex;justify-content:center;gap:4px;margin:var(--s3) 0 0}
/* The visible mark is a 6px bar, but the target it sits in is a full 44px so
   it can actually be hit -- the mark and the target are not the same object. */
.carousel-dot{width:var(--tap);height:var(--tap);padding:0;background:none;border:0;
  cursor:pointer;display:grid;place-items:center;position:relative}
.carousel-dot::after{content:"";display:block;width:26px;height:6px;border-radius:3px;
  background:var(--cream-2);border:var(--bw-light) solid var(--line-hard);
  transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.carousel-dot:hover::after{background:var(--kraft-pale)}
.carousel-dot.is-current::after{background:var(--kraft);border-color:var(--navy)}
.carousel-dot:focus-visible{outline:none}
.carousel-dot:focus-visible::after{box-shadow:0 0 0 3px var(--kraft-lit)}

.carousel-status{text-align:center;margin:var(--s3) 0 0;font:700 11px var(--mono);
  letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3)}

@media(max-width:900px){
  /* Two cards below 900px would each be ~340px again -- back to a cramped
     measure. One card, comfortably read. */
  .carousel-track{grid-auto-columns:100%}
}
@media(max-width:760px){
  .carousel{grid-template-columns:1fr;gap:var(--s4)}
  /* One review at a time, with the controls beneath where a thumb reaches. */
  .carousel-track{grid-auto-columns:100%;column-gap:var(--s4);order:1}
  .carousel-btn{order:2}
  .carousel{grid-template-areas:"track" "controls";justify-items:center}
  .carousel-track{grid-area:track;width:100%}
  .carousel-btn:first-of-type{grid-area:controls;justify-self:start}
  .carousel-btn:last-of-type{grid-area:controls;justify-self:end}
}


/* ═══ THE 30-SECOND VIDEO ══════════════════════════════════════════════
   The Field Kit language applied lightly: a kraft mat and a navy rule, so
   the player reads as part of the kit rather than an embed dropped onto the
   page. The picture is the point, so the frame stops there -- no custom
   controls, no branded play button covering the poster. */
.videoframe{max-width:900px;margin:0 auto;padding:0}
.videoplayer{display:block;width:100%;height:auto;aspect-ratio:16/9;
  background:var(--navy);border:var(--bw-med) solid var(--navy);
  border-radius:var(--r);box-shadow:0 6px 0 var(--kraft-2)}
.videonote{margin-top:var(--space-relaxed);text-align:center;
  font-size:14.5px;color:var(--ink-3)}
.transcript{margin-top:var(--space-close);text-align:left}
.transcript summary{cursor:pointer;font:700 12px var(--mono);letter-spacing:.12em;
  text-transform:uppercase;color:var(--kraft-2);padding:10px 0;
  /* 44px target: the row is the control, not just the word */
  min-height:44px;display:flex;align-items:center;justify-content:center}
.transcript summary:focus-visible{outline:3px solid var(--navy);outline-offset:3px}
.transcript p{margin:0 0 var(--space-close);font-size:15px;color:var(--navy)}
.transcript[open] summary{margin-bottom:var(--space-close)}
@media(max-width:760px){
  .videoframe{max-width:100%}
  .videoplayer{box-shadow:0 4px 0 var(--kraft-2)}
}


/* ═══ ROUND 2G — CRO ARCHITECTURE ═════════════════════════════════════
   The hero now carries the approved video in the slot the workbench
   screenshot used to hold, social proof sits directly beneath it, and the
   three sections that each explained the business model are one. */

/* --- hero ------------------------------------------------------------- */
/* The $0 line: the single strongest fact about the model, and the thing the
   ads lead with. Given the go-green of the saving chip so a skim-reader
   cannot miss it, but set as a sentence rather than a badge -- it is a
   statement about sourcing, not a promotional flash. */
.hero-zero{font-size:17px;line-height:1.5;color:var(--navy);
  background:var(--go-bg);border-left:var(--bw-heavy) solid var(--go);
  border-radius:0 var(--r) var(--r) 0;padding:12px 16px;
  margin-top:var(--space-normal);max-width:36em}
.hero-zero strong{color:var(--go)}

/* The video sits in the media column. It keeps its own frame styling from the
   video section; this only positions it. */
.hero-media{min-width:0}
.hero-media .videoframe{max-width:100%;margin:0}
.hero-media .videonote{margin-top:var(--space-close);font-size:13.5px;text-align:center}
.hero-media .transcript summary{font-size:11px;min-height:44px}
.hero-media .transcript p{font-size:14px}

/* --- early social proof ----------------------------------------------- */
.proofbar{display:grid;grid-template-columns:auto 1fr;gap:var(--s7);align-items:center;
  background:var(--cream-2);border:var(--bw-med) solid var(--line-hard);
  border-radius:var(--r-lg);padding:var(--s6) var(--s7)}
.proofbar-rating{text-align:center;padding-right:var(--s6);
  border-right:var(--bw-med) dashed var(--line-hard)}
.proofbar-stars{display:block;font-size:30px;letter-spacing:.09em;color:var(--kraft-deep);line-height:1}
.proofbar-count{margin:8px 0 0;font:700 13px var(--mono);letter-spacing:.11em;
  text-transform:uppercase;color:var(--navy)}
.proofbar-quotes{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:1fr 1fr;gap:var(--s6)}
.proofbar-quotes blockquote{margin:0}
.pq-head{margin:0 0 6px;font-family:var(--disp);font-weight:800;font-size:16px;color:var(--navy)}
.pq-body{margin:0;font-size:15px;line-height:1.5;color:var(--brown-mid)}
.pq-by{margin:8px 0 0;font:700 12px var(--mono);letter-spacing:.08em;color:var(--kraft-2)}
/* The link is the tap target, so it has to carry the 44px itself -- as an
   inline anchor it measured 20px tall at every width. */
.proofbar-more{margin-top:var(--space-close);text-align:center;font-size:14px}
.proofbar-more a{display:inline-flex;align-items:center;min-height:44px;padding:0 12px}

/* --- the business model ----------------------------------------------- */
/* Six words and six numbers. The whole model should be readable in one
   glance before any photograph is looked at. */
.flowstrip{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;
  gap:10px;margin:var(--space-relaxed) 0 var(--space-section);padding:0}
.flowstrip li{display:flex;align-items:center;gap:9px;
  font-family:var(--disp);font-weight:800;font-size:17px;color:var(--navy);
  background:var(--paper);border:var(--bw-med) solid var(--navy);
  border-radius:var(--r);padding:10px 16px;box-shadow:0 3px 0 var(--kraft-2)}
.flowstrip .fs-n{display:inline-grid;place-items:center;width:22px;height:22px;
  border-radius:50%;background:var(--navy);color:var(--paper);
  font:700 11px var(--mono)}
.journey-4{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.how-note{margin-top:var(--space-relaxed);text-align:center;font-size:18px;
  color:var(--brown-mid);max-width:44em;margin-inline:auto}
.how-note strong{color:var(--navy)}

/* --- course ----------------------------------------------------------- */
.course-mechs{margin-top:var(--space-section)}
.course-mechs > h3{font-size:22px;margin:0 0 var(--space-relaxed)}

/* --- fit block, folded into the FAQ ----------------------------------- */
.fitrow{display:grid;grid-template-columns:1fr 1fr;gap:var(--s7);
  margin-top:var(--space-section)}
.fit-head{margin:0 0 10px;font:700 12px var(--mono);letter-spacing:.11em;
  text-transform:uppercase;color:var(--go)}
.fit-head-no{color:var(--stop)}
.fit-list{list-style:none;margin:0;padding:0}
.fit-list li{position:relative;padding-left:24px;margin-bottom:9px;
  font-size:15.5px;line-height:1.45;color:var(--brown-mid)}
.fit-list li::before{content:'✓';position:absolute;left:0;top:0;
  color:var(--go);font-weight:800}
.fit-list-no li::before{content:'×';color:var(--stop)}

@media(max-width:900px){
  .proofbar{grid-template-columns:1fr;gap:var(--s5);padding:var(--s5)}
  .proofbar-rating{padding:0 0 var(--s5) 0;border-right:0;
    border-bottom:var(--bw-med) dashed var(--line-hard)}
  .proofbar-quotes{grid-template-columns:1fr;gap:var(--s5)}
}

@media(max-width:760px){
  /* On a phone the media column follows the copy, so the CTA and the price
     are reached before the video rather than after it. */
  .hero-media{margin-top:var(--space-relaxed)}
  .hero-zero{font-size:16px;padding:11px 14px}
  .flowstrip{gap:7px;margin-bottom:var(--space-relaxed)}
  .flowstrip li{font-size:14px;padding:7px 11px;gap:7px}
  .flowstrip .fs-n{width:19px;height:19px;font-size:10px}
  .journey-4{grid-template-columns:1fr 1fr}
  .how-note{font-size:16px}
  .fitrow{grid-template-columns:1fr;gap:var(--s6)}
  .course-mechs > h3{font-size:19px}
}


/* ═══ ROUND 2G — MOBILE DENSITY ═══════════════════════════════════════
   Measured at 390px after the restructure: the course section alone ran to
   3,146px, a quarter of the page, because two screenshots, five decisions
   and the pacing block all stack. None of that content is cut -- it is
   tightened, and the second screenshot is dropped on a phone where two
   1440-wide screens stack into more than a full viewport of duplicate
   evidence. */
@media(max-width:760px){
  /* One course screenshot is enough on a phone. The second says the same
     thing -- "this is a real product" -- for another 310px. */
  #course .grid-2 + .grid-2 > div:last-child{display:none}

  /* The five decisions: same words, less air between them. */
  .course-mechs{margin-top:var(--space-relaxed)}
  .course-mechs > h3{margin-bottom:var(--space-normal)}
  .mech-item{padding:var(--space-normal) 0}
  .mech-item h3{font-size:17px}
  .mech-item .muted{font-size:14.5px;line-height:1.45}

  .pace{margin-top:var(--space-relaxed);padding:var(--space-normal)}
  .pace-row{gap:var(--space-normal)}
  .course-why{margin-top:var(--space-relaxed);font-size:15px}

  /* Hero stats as a single compact row rather than three stacked blocks. */
  /* Three across, not two-and-one: flex wrapping left the third stat alone on
     its own row, which wasted 60px and read as an orphan. */
  .proof{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-close);
    padding-top:var(--space-normal);margin-top:var(--space-normal)}
  .proof .n{font-size:26px}
  .proof .l{font-size:12px;line-height:1.25}
  .hero-copy .lead{font-size:18px}
}