/* ------------------------------------------------------------------
   Hank Mercer ... shared tokens, base type and the components that
   appear on every page (buttons, footer, thank-you page).

   Structure and layout inherited from margretmillerkitchen.com. Token
   NAMES are hers and are referenced throughout, so they are kept; the
   VALUES are palette A, set out at the top of :root below. A few names
   therefore no longer describe their hue - --sage carries teal, not
   steel - which is the same trade her own stylesheet made when it was
   ported from frankmillerbutcher.com.

   landing.css sits on top of this file for index.html only. thank-you.html
   needs this file alone.
------------------------------------------------------------------ */
:root{
  /* HANK MERCER'S PALETTE, IN THE REFERENCE BUILD'S ROLES.

     The reference (The Seasoned Cruiser) ran harbour navy with Elias Yoder's
     oxblood for the accent. This shop runs Hank Mercer's own colours, taken
     off his pre-rebuild index.html and put into the SAME ROLES the reference
     token names describe. Token NAMES are the reference's and are unchanged,
     so every rule in landing.css and urgency.css that already referenced them
     keeps working; only the values move. Two names therefore no longer
     describe their hue - --sage carries a mid green, and --accent-lift-red is
     a gold - and both are called out below.

     WHERE EACH VALUE CAME FROM. Ten of these are Hank's literal colours,
     counted in his old page: #D9CFBE (117 uses), #183D2D (60), #F3EEE2 (39),
     #FFC94A (32), #FAF6ED (17), #C04A2B (15), #0E1F17 (3), #3A1810 (3),
     #D3AD62 (1), #306A52 (1). The rest are DERIVED from those by the
     reference's own method and no other: hold the source colour's hue, scale
     its saturation by the reference token's own ratio, then take the
     reference token's lightness. tools/contrast.py prints the derivation
     beside the measured table and re-checks it on every run.

     THE ACCENT IS HANK'S GOLD, DARKENED FOR ITS ROLE, AND THAT IS A RECORDED
     DEVIATION RATHER THAN A CHOICE OF HUE.

     Hank's accent is unambiguously the gold: his buy buttons were a
     #FFCD4E -> #E9A92F gradient and #FFC94A is the fourth most-used colour on
     his old page. The reference's --accent role is the CTA fill with a
     --paper label AND the price figure as text on paper, and Hank's gold at
     its own lightness measures 1.87 : 1 on his cream - invisible in both
     halves of that role. So the hue (42.1deg) and saturation (1.000) are held
     exactly and the lightness is taken from 0.645 down to 0.240, which is the
     first step where BOTH halves of the role clear AA. It lands on #7A5600, a
     deep bronze, at very nearly the lightness the reference's own oxblood
     sits at (0.240 against 0.267). --gold below keeps the undarkened #FFC94A
     for the dark-band roles, where it measures 11.17 : 1 and needs no help.

     Contrast, computed not estimated - tools/contrast.py prints the whole
     table and reports zero failures on the pairs the page actually renders
     (WCAG AA is 4.5, AAA is 7.0):
       body copy on paper      7.07  AAA
       body copy on tile       7.59  AAA
       heading on paper       10.40  AAA
       small print on paper    5.15  AA
       price/accent on paper   5.74  AA
       price/accent on tile    6.16  AA
       paper on accent         5.74  AA
       paper on accent-dark    8.62  AAA
       accent-lift on ledger   8.09  AAA
       accent-lift-red on it  10.76  AAA
       wordmark on the band   14.78  AAA
       signal-lift on strip    5.17  AA
     The audience is 62 and over, so every text pair clears AA and the body
     clears AAA. */
  --paper:#F3EEE2;        /* the page - Hank's cream, his own */
  --tile:#FAF6ED;         /* alternating bands and cards - his lighter cream */
  --deep:#EBE2CE;         /* one step down, for wells - derived from --paper */
  --ink:#183D2D;          /* headings, dark bands: Hank's deep green */
  --ink-deep:#0E1F17;     /* footer, ledger, last call - his darkest tone */
  --ink-soft:#2E5745;     /* body copy on paper - derived from --ink */
  --ink-mute:#476B5C;     /* captions, small print - derived, then darkened */
  --line:#D9CFBE;         /* hairline separators - his own, his most-used */
  --line-strong:#B3A48B;  /* the boxes, which have to read as boxes */
  --sage:#476B5C;         /* rules, ticks, eyebrows - a mid green, not sage */
  --sage-dark:#0E1F17;    /* the header bar and the top strip, flat */
  --accent:#7A5600;       /* BUTTONS AND PRICES ONLY - his gold, darkened */
  --accent-dark:#583E00;  /* the same construction one step down */
  /* --accent-lift IS THE BRASS ON A DARK BAND, and it is Hank's own #D3AD62
     rather than a derivation. Its job is the arithmetic block's totals and
     unit labels, the masthead's accent rule, the Last Call eyebrow and the
     highlight on a dark band. 8.09 : 1 on --ink-deep. */
  --accent-lift:#D3AD62;
  /* THE ACCENT ON A DARK GROUND. Derived the way the reference derived its
     own: the accent's hue (42.1deg) and saturation (1.000) held exactly, and
     lightness raised to 0.610 - the same lightness --signal-lift lands on.

     THE NAME SAYS "RED" AND THIS IS A GOLD. The name is the reference's and
     is kept so that no rule referencing it has to be rewritten; on that shop
     the accent was a red and on this one it is not. It stays separable from
     --accent-lift by SATURATION rather than by hue - 1.000 against 0.520,
     bright gold against muted brass - which is the distinction the reference
     draws between its own two lifts, arrived at differently.
     10.76 : 1 on --ink-deep. One use: the 03 section numeral, which sits on
     the ledger's dark ground where --accent itself measures 1.43 : 1 and
     disappears. */
  --accent-lift-red:#FFC438;
  /* Held apart from --accent on purpose: a palette change must not quietly
     take the guarantee badge with it. Hank's own mid green. */
  --free-green:#306A52;
  /* HANK'S GOLD, UNDARKENED. This is the value --accent is derived FROM, kept
     as its own token because the dark-band roles do not need the darkening
     and read wrong with it. 11.17 : 1 on --ink-deep. */
  --gold:#FFC94A;
  /* The alert reds, and they are Hank's terracotta family rather than a
     second gold. One warm red is the only colour on the page that is not
     green, cream or gold, and it is on the two things that are actually
     urgent - the countdown and the net line.
       --signal        the bloom mix on the Last Call field only. It carries
                       no text anywhere on this page, which is why it is left
                       at Hank's own #C04A2B rather than darkened; paper on it
                       measures 4.26 : 1 and tools/contrast.py prints that as
                       an unrendered pair rather than a failure.
       --signal-lift   the strip's timer digits and the ledger net line.
                       5.17 : 1 on --signal-deep, 5.56 : 1 on --ink-deep.
       --signal-deep   the timer plate only. Never carries text itself, and it
                       is Hank's own #3A1810 - which happens to sit at exactly
                       the reference token's lightness. */
  --signal:#C04A2B;
  --signal-lift:#E57153;
  --signal-deep:#3A1810;
  /* THE ALERT RED AS TEXT. --signal is a GROUND on this page, so the text red
     is derived rather than aliased, by the reference's own method: --signal's
     hue (12.5deg) and saturation (0.634) held exactly, lightness taken from
     0.461 down to 0.403.
       5.64 : 1 on --tile   (09's band, where the form sits)
       5.26 : 1 on --paper  (the exit modal's card)
     ONE USE: the error line under either capture, and nothing else. */
  --signal-text:#A84126;

  /* THE ACTION COLOUR. ROUND 2, AND IT IS A NEW ROLE RATHER THAN A TWEAK.

     Until this round every button on the page was --accent, the darkened
     bronze, and so were the price figures, the section numerals, the
     eyebrow rules and the drop cap. A reader could not tell the thing to
     press from the thing to read, because they were the same colour.

     THE SPLIT: --accent KEEPS THE STRUCTURE - rules, labels, numerals,
     prices, the drop cap, and every button that is not a checkout - and
     these six carry the BUY BUTTONS and nothing else. Both families come
     off Hank's gold #FFC94A at hue 42.1deg and saturation 1.000; they are
     separated by lightness, 0.48 against 0.240, which measures 3.41 : 1
     between the two fills. That is a plain difference, not a shade.

     WHY THE LABEL IS DARK HERE AND PAPER THERE. A fill bright enough to
     read as "press this" cannot carry a cream label: --paper on --buy is
     1.68 : 1. So the buy label is --ink-deep, which is 8.79 : 1 on the
     rest fill and clears AAA on ALL THREE STATES - 8.79 rest, 9.94 hover,
     7.72 active. That is also what Hank's own pre-rebuild buttons did: a
     gold gradient under a near-black label.

     STATES ARE REAL COLOURS, NOT A FILTER. filter:brightness() on a
     gradient moves the lip and the inset highlight with the fill and
     turns the whole control into a flat wash on press; each state below
     is its own pair of stops.

       --buy-top / --buy               L .54 / .48   rest
       --buy-hi-top / --buy-hi         L .60 / .54   hover
       --buy-lo-top / --buy-lo         L .48 / .43   active
       --buy-lip                       L .33         the 3px bottom lip
     Every one is hue 42.1deg, saturation 1.000. tools/contrast.py checks
     the derivation and the three label pairs on every run. */
  --buy:#F5AC00;
  --buy-top:#FFB914;
  --buy-hi:#FFB914;
  --buy-hi-top:#FFC233;
  --buy-lo:#DB9A00;
  --buy-lo-top:#F5AC00;
  --buy-lip:#A87600;
  --buy-ink:#0E1F17;

  --display:"Oswald",Impact,sans-serif;
  /* Names the stack that was already being written out longhand in five
     places in landing.css. The offer box is built on Elias Yoder's structure,
     which sets its item names and its price in a serif. */
  --serif:"Lora",Georgia,serif;
  --ui:"Oswald",sans-serif;
  /* Elias Yoder's --mono, verbatim off his :root, minus the webfont fallbacks
     we do not load. Only the arithmetic block uses it - it is the face his
     eyebrow, unit, total label and source note all run. */
  --mono:"JetBrains Mono","IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  /* Atkinson Hyperlegible was drawn by the Braille Institute for low-vision
     readers. Kept deliberately: this shop's audience is 62 and over.

     TYPE IS THE REFERENCE'S AND DID NOT MOVE WITH THE PALETTE, which is the
     instruction. Hank's old page ran Bitter / Source Sans 3 / Cormorant
     Garamond; none of the three is loaded anywhere in this build. */
  --body:"Atkinson Hyperlegible",Verdana,sans-serif;

  --container:1080px;
  --gutter:1.5rem;
}*{box-sizing:border-box}html{font-size:18px;scroll-behavior:smooth;-webkit-text-size-adjust:100%}section[id]{scroll-margin-top:1.5rem}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}
}body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--body);font-size:1rem;line-height:1.65;
  -webkit-font-smoothing:antialiased;
}h1,h2,h3,h4{font-family:var(--display);font-weight:600;text-transform:uppercase;line-height:1.12;margin:0 0 .55rem;letter-spacing:.02em}h1{font-size:3rem;line-height:1.04}h2{font-size:2.15rem}h3{font-size:1.25rem}h4{font-size:1.05rem}p{margin:0 0 1rem;max-width:48ch}a{color:var(--accent);text-underline-offset:.22em;text-decoration-thickness:.08em}a:hover{color:var(--accent-dark)}b,strong{font-weight:700}:focus-visible{outline:3px solid var(--sage);outline-offset:3px}img{max-width:100%}.wrap{width:min(var(--container),92vw);margin-inline:auto}.narrow{width:min(680px,92vw);margin-inline:auto}.skip{position:absolute;left:-9999px;background:var(--ink);color:var(--paper);padding:1rem;z-index:99}.skip:focus{left:1rem;top:1rem}

/* ---------- header bar ---------- */
.top{background:var(--sage-dark);padding:1.35rem 0}.brand{
  font-family:var(--ui);font-weight:700;text-transform:uppercase;letter-spacing:.2em;
  font-size:.86rem;color:var(--paper);text-decoration:none;
}.brand:hover{color:#E3D9BE}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  min-height:74px;padding:1rem 2.2rem;
  font-family:var(--ui);font-weight:600;text-transform:uppercase;letter-spacing:.02em;font-size:1.25rem;
  text-align:center;text-decoration:none;border-radius:4px;cursor:pointer;
  border:3px solid var(--accent);background:var(--accent);color:#fff;
  transition:background .16s ease,border-color .16s ease;
}.btn:hover{background:var(--accent-dark);border-color:var(--accent-dark);color:#fff}.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line-strong)}.btn.ghost:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}.btn-row{display:flex;gap:.9rem;flex-wrap:wrap;margin-top:1.4rem}

/* ---------- footer ---------- */
.foot{background:var(--ink-deep);color:#9AA093;padding:2.4rem 0;font-size:.9rem;margin-top:0}.foot a{color:#D3D8CB}.foot a:hover{color:#fff}.foot-in{display:flex;justify-content:space-between;gap:1.2rem;flex-wrap:wrap;align-items:center}.foot-in nav a{margin-right:1.1rem}.foot-note{color:#6F7568;font-size:.8rem;margin:1.2rem 0 0;max-width:none}

/* ---------- generic page bands ---------- */
.band{padding:3.6rem 0}.band.tile{background:var(--tile);border-block:1px solid var(--line)}.band.ink{background:var(--ink);color:var(--paper)}.band.ink h1,.band.ink h2,.band.ink h3,.band.ink h4{color:#fff}.band.ink p{color:#C5CBBD}.eyebrow{
  display:flex;align-items:center;gap:.9rem;margin:0 0 .9rem;
  font-family:var(--ui);font-weight:700;text-transform:uppercase;letter-spacing:.2em;
  font-size:.62rem;color:var(--sage);
}.eyebrow::after{content:"";flex:1;height:1px;background:var(--line)}.band.ink .eyebrow{color:#9BAD91}.band.ink .eyebrow::after{background:#3A4136}

/* ---------- legal / long-form pages ---------- */
.doc{padding:2.8rem 0 3.6rem}.doc h1{font-size:2.3rem;margin-bottom:.4rem}.doc .updated{font-family:var(--ui);text-transform:uppercase;letter-spacing:.14em;font-size:.6rem;
  font-weight:700;color:var(--ink-mute);margin:0 0 2rem}.doc h2{font-size:1.25rem;margin:2.2rem 0 .5rem}.doc p,.doc li{color:var(--ink-soft);max-width:66ch}.doc ul{padding-left:1.2rem;margin:0 0 1rem}.doc li{margin-bottom:.4rem}.doc .backlink{font-family:var(--ui);text-transform:uppercase;letter-spacing:.14em;font-size:.62rem;
  font-weight:700;color:var(--ink-mute);text-decoration:none;display:inline-block;margin-bottom:1.6rem}.doc .backlink:hover{color:var(--accent)}.callout{
  background:var(--tile);border:1px solid var(--line);border-left:4px solid var(--sage);
  border-radius:3px;padding:1.1rem 1.2rem;margin:1.6rem 0;
}.callout strong{display:block;font-family:var(--display);font-size:1.05rem;margin-bottom:.3rem;color:var(--ink)}.callout p:last-child{margin-bottom:0}

/* ---------- thank-you page ---------- */
/* Numbered rows. The number is the order to read them in,and it matches the
   numbering in the delivery email so a buyer reading both sees one list. */
.dl-no{
  flex:0 0 1.7rem;width:1.7rem;height:1.7rem;box-sizing:border-box;border-radius:50%;
  background:var(--accent);color:#FFF8F2;
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--ui);font-weight:700;font-size:.8rem;margin-right:.7rem;
}.dl-meta{
  display:block;font-family:var(--ui);font-weight:700;text-transform:uppercase;
  letter-spacing:.1em;font-size:.56rem;color:#8E9487;margin-top:.3rem;
}.dl-audio .dl-no{background:var(--free-green)}.sec{padding:2.6rem 0}.sec + .sec{border-top:1px solid var(--line)}.sec-downloads{background:var(--ink);color:var(--paper);padding:2rem 0 2.4rem}.dl-head{font-size:2rem;color:#fff;margin:0 0 .35rem}.dl-emailed{
  color:#C5CBBD;font-size:.94rem;margin:0 0 1.2rem;max-width:52ch;
  padding-left:.8rem;border-left:3px solid var(--sage);
}.dl-list{list-style:none;margin:0;padding:0}.dl-list li{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  padding:.85rem 0;border-bottom:1px solid #3A4136;
}.dl-list li:last-child{border-bottom:0}.dl-title{display:flex;align-items:flex-start;font-family:var(--display);font-weight:700;font-size:1.05rem;color:#fff;line-height:1.25;flex:1 1 14rem}
/* :not(.dl-no) matters. The number badge is also a direct span child, and
   without the exclusion it inherits flex:1 1 auto and stretches from a
   circle into an oval on any row with a short title. */
.dl-title > span:not(.dl-no){flex:1 1 auto;min-width:0}.dl-sub{display:block;font-family:var(--body);font-weight:400;font-size:.82rem;color:#9AA093;margin-top:.15rem}.dl-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;flex:none;
  min-height:52px;min-width:11rem;padding:.6rem 1.4rem;
  font-family:var(--ui);font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:.8rem;
  text-decoration:none;border-radius:3px;
  background:var(--accent);border:2px solid var(--accent);color:#FFF8F2;
}.dl-btn:hover{background:var(--accent-dark);border-color:var(--accent-dark);color:#FFF8F2}.dl-ico{width:1.05rem;height:1.05rem;flex:none}.free-pill{
  display:inline-block;background:var(--free-green);color:#fff;
  font-family:var(--ui);font-weight:700;text-transform:uppercase;letter-spacing:.1em;
  font-size:.52rem;padding:.12rem .45rem;border-radius:2px;margin-right:.45rem;vertical-align:.18em;
}
/* Secondary: everything in one zip, under the individual buttons. */
.dl-all-wrap{margin-top:1.5rem;padding-top:1.3rem;border-top:1px solid #3A4136}.dl-all{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  min-height:50px;padding:.55rem 1.4rem;
  font-family:var(--ui);font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:.78rem;
  text-decoration:none;border-radius:3px;
  background:transparent;border:2px solid #6E7566;color:#E3E7DC;
}.dl-all:hover{background:#2C3229;border-color:#9AA093;color:#fff}.dl-all-ico{width:1rem;height:1rem;flex:none}.dl-all-sub{color:#8E9487;font-size:.8rem;margin:.55rem 0 0;max-width:46ch}.dl-warning{
  margin-top:1.2rem;padding:.85rem 1rem;border:2px dashed var(--accent-lift);
  color:var(--accent-lift);font-family:var(--ui);font-size:.8rem;border-radius:3px;
}.signoff{
  font-family:var(--display);font-weight:700;font-size:1.1rem;line-height:1.4;color:var(--ink);
  border-left:4px solid var(--accent);padding-left:1rem;margin:1.8rem 0 0;max-width:34ch;
}.band.ink .signoff,.sec-downloads .signoff{color:#fff;border-left-color:var(--accent-lift)}

@media (max-width:900px){h1{font-size:2.3rem}h2{font-size:1.75rem}.band{padding:2.6rem 0}
}
@media (max-width:560px){html{font-size:17px}.btn{width:100%}
  /* The rows stack here, which turns .dl-title's `flex:1 1 14rem` from a
     width hint into a 14rem MINIMUM HEIGHT: flex-basis follows the main
     axis, and the main axis is now vertical. Every entry was padded out to
     330px tall with roughly 140px of nothing under the text. Reset it to
     content height and the list closes right up. */
  .dl-list li{flex-direction:column;align-items:stretch;gap:.4rem;padding:.6rem 0}.dl-title{flex:0 0 auto;font-size:1rem}.dl-sub{margin-top:.1rem;line-height:1.35}.dl-meta{margin-top:.15rem}.dl-btn{width:100%}.dl-all{width:100%}.foot-in{flex-direction:column;align-items:flex-start;gap:.8rem}
  /* On a 390px screen every line above the first Download button is a line
     the buyer has to read past to reach the thing they came for, so the
     heading and the padding above it both come down. Measured: first button
     lands at roughly 340px, which puts two of the three on screen. */
  .sec-downloads{padding:1.3rem 0 1.9rem}.dl-head{font-size:1.6rem}.dl-emailed{font-size:.88rem;margin-bottom:1rem}
}.badge svg .tick{stroke:var(--paper);fill:none}.paybar{margin:2.6rem 0 0;padding-top:1.5rem;border-top:1px solid var(--line);text-align:center}.lockline{
font-family:var(--ui);font-weight:700;text-transform:uppercase;letter-spacing:.14em;
font-size:.62rem;color:var(--ink-mute);margin:0 0 .7rem;max-width:none;
}.pays{display:flex;flex-wrap:wrap;gap:.45rem;align-items:center;justify-content:center}.pay-mark{
display:inline-flex;align-items:center;justify-content:center;height:1.9rem;min-width:3rem;padding:0 .5rem;
background:#fff;border:1px solid var(--line);border-radius:2px;
}.pay-mark svg{height:1.05rem;width:auto;display:block}.pay-label{font-family:var(--ui);font-weight:700;font-size:.66rem;letter-spacing:.06em;color:#1A1F6B}.pay-label.ap{display:inline-flex;align-items:center;gap:.12rem;color:#111;letter-spacing:0}
@media (max-width:520px){
}.review .stars{font-size:1.05rem;margin-bottom:.15rem}.review .stars{
letter-spacing:0;
background-image:linear-gradient(90deg,var(--accent) var(--pct,100%),#D9D0B6 var(--pct,100%));
-webkit-background-clip:text;background-clip:text;
color:transparent;
}.seal-badge{
display:inline-flex;align-items:center;gap:.85rem;
border:3px solid var(--accent);background:var(--tile);
padding:.75rem 1.15rem;border-radius:2px;max-width:31rem;
}.seal-shield{width:2.5rem;height:3rem;flex:none;fill:var(--accent)}.seal-shield .tick{stroke:var(--tile)}.seal-text b{display:block;font-family:var(--ui);text-transform:uppercase;letter-spacing:.06em;
font-size:.95rem;line-height:1.1;color:var(--accent)}.seal-text > span{display:block;font-size:.82rem;line-height:1.35;color:var(--ink-soft);margin-top:.22rem}
@media (max-width:560px){.seal-badge{gap:.65rem;padding:.6rem .8rem}.seal-shield{width:2rem;height:2.4rem}.seal-text b{font-size:.85rem}.seal-text > span{font-size:.76rem}
}.rating{display:inline-flex;align-items:center;gap:.42rem}.rating .stars{display:inline-block;letter-spacing:0;
background-image:linear-gradient(90deg,var(--accent) var(--pct,90%),#D9D0B6 var(--pct,90%));
-webkit-background-clip:text;background-clip:text;color:transparent}.rating-num{font-family:var(--ui);font-size:.82rem;letter-spacing:.04em;color:var(--ink)}.seal-badge{gap:.6rem;padding:.5rem .8rem;max-width:26rem;border-width:2px}.seal-shield{width:1.7rem;height:2rem}.seal-text b{font-size:.78rem;letter-spacing:.05em}.seal-text > span{font-size:.74rem;line-height:1.3;margin-top:.15rem}
@media (max-width:560px){.seal-badge{gap:.5rem;padding:.45rem .65rem}.seal-shield{width:1.45rem;height:1.75rem}.seal-text b{font-size:.72rem}.seal-text > span{font-size:.7rem}
}.paybar{border-top:0}.rating-num{font-size:.75rem}.paybar{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
gap:.5rem .8rem;margin-top:1.6rem;padding-top:1.1rem;text-align:center}.paybar .lockline,.lockline{margin:0;max-width:none;display:inline-flex;align-items:center;gap:.3rem}.paybar .pays,.pays{margin:0;align-items:center}.seal-badge{position:static;float:none;transform:none;margin:0}.rating{display:inline-flex;align-items:center;gap:.42rem;visibility:visible}.rating .stars,.review .stars{
display:inline-block;letter-spacing:0;
color:var(--star-gold,var(--accent));
background-image:none;-webkit-text-fill-color:currentColor}.rating .stars,.review .stars{
background-image:linear-gradient(90deg,var(--star-gold,var(--accent)) var(--pct,95%),var(--star-dim,#D9D0B6) var(--pct,95%));
-webkit-background-clip:text;background-clip:text;
color:transparent;-webkit-text-fill-color:transparent}.rating-num{font-size:.78rem;color:var(--ink);opacity:1;white-space:nowrap}.review .rating-num{color:var(--ink)}.co-proof{margin:1.1rem 0 0;display:flex;justify-content:flex-start}.seal-badge{margin:1.1rem 0 0}.paybar{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:.5rem .8rem;margin-top:1.1rem;padding-top:1.1rem;border-top:0;text-align:center}.paybar .lockline,.lockline{margin:0;max-width:none;display:inline-flex;align-items:center;gap:.3rem}.paybar .pays,.pays{margin:0;align-items:center}

/* ------------------------------------------------------------------
   Review card details, made unconditional.
   The partial-fill stars were drawn with background-clip:text over a
   gradient and color:transparent. When the clip does not take effect
   the glyphs stay transparent and the card loses its stars entirely,
   which is what happened. The solid color is now the base state and
   the gradient only replaces it where the clip is actually supported.
   ------------------------------------------------------------------ */
.rating{display:inline-flex;align-items:center;gap:.42rem;visibility:visible}.rating .stars,.review .stars{
  display:inline-block;letter-spacing:0;
  color:var(--star-gold,var(--accent));
  background-image:none;-webkit-text-fill-color:currentColor}
@supports ((-webkit-background-clip:text) or (background-clip:text)){.rating .stars,.review .stars{
    background-image:linear-gradient(90deg,var(--star-gold,var(--accent)) var(--pct,95%),var(--star-dim,#D9D0B6) var(--pct,95%));
    -webkit-background-clip:text;background-clip:text;
    color:transparent;-webkit-text-fill-color:transparent}
}.rating-num{font-size:.78rem;color:var(--ink);opacity:1;white-space:nowrap}.review .rating-num{color:var(--ink)}.review .review-head{display:flex;align-items:center;gap:.85rem}.review .review-head > div{min-width:0;display:flex;flex-direction:column;gap:.12rem}.review b{display:block;white-space:normal}

/* ==================================================================
   One spacing scale for every section break, every page, all three
   sites. Sections were running 130-266px of dead space between them:
   band padding stacked on top of the previous block's own bottom
   margin, plus body/footer padding still reserving room for a sticky
   bar that no longer exists.
   ================================================================== */
:root{--sec:2.2rem;--sec-in:1.15rem}
@media (max-width:768px){:root{--sec:1.4rem;--sec-in:.85rem}}

/* Every section break is the same value, top and bottom. */
.band{padding-top:var(--sec);padding-bottom:var(--sec)}

/* Stacked margins: the section padding is the gap, so the first and
   last child inside a section do not add their own on top of it. */
.band > .wrap > *:last-child,.band > *:last-child,.band > .wrap > *:last-child > *:last-child{margin-bottom:0}.band > .wrap > *:first-child,.band > *:first-child{margin-top:0}

/* Inside sections: heading to body, block to block. */
.section-head{margin-bottom:var(--sec-in)}.band h2{margin-bottom:.5rem}.band .eyebrow{margin-bottom:.6rem}.offer-top{margin-bottom:var(--sec-in)}.paybar{margin-top:var(--sec-in);padding-top:var(--sec-in)}.inside-cta{margin-top:var(--sec-in)}.tally{margin-bottom:var(--sec-in)}.buy-block{margin-top:var(--sec-in);padding-top:var(--sec-in)}.assure,.top-assure,.hero .assure,.hero .top-assure{margin-top:1rem}

/* Room reserved for sticky bars that are no longer on the page. */
body{padding-bottom:0}.foot{padding:1.6rem 0}

/* The legal and thank-you pages do not use .band; they wrap content in
   main / .doc / .sec. Same scale applied there so every page on the site
   breaks its sections at the same distance. */
.doc,.sec,.sec-downloads{padding-top:var(--sec);padding-bottom:var(--sec)}body > main{padding-top:var(--sec);padding-bottom:var(--sec)}.doc h2,.sec h2,main > .wrap > h2{margin-top:var(--sec-in);margin-bottom:.4rem}.doc > *:first-child,.sec > *:first-child,main > .wrap > *:first-child{margin-top:0}.doc > *:last-child,.sec > *:last-child,main > .wrap > *:last-child{margin-bottom:0}.updated{margin-top:var(--sec-in)}.card{margin-bottom:var(--sec-in)}

/* ==================================================================
   Narrow-phone fit. Nothing crosses a container edge at 430, 390
   or 360: long titles wrap instead of running into the price, the
   card marks wrap instead of pushing off the right edge, and the
   three-column stats bar steps down rather than clipping.
   ================================================================== */
@media (max-width:480px){.card,.quote,.bump-wrap,.seal-badge,.paybar,.pay-head,.review,.hs,.stack li{min-width:0}.card *,.quote *,.bump-wrap *,.seal-badge *,.review *,.stack li *{overflow-wrap:anywhere}

  /* Product box: title wraps, price and save chip keep their own line. */
  .sum-row{flex-wrap:wrap;align-items:flex-start;gap:.45rem}.sum-name{min-width:0;flex:1 1 55%}.sum-right{flex:0 0 auto;margin-left:auto;text-align:right;white-space:nowrap}

  /* One time offer: text stays inside the dashed border. */
  .bump-wrap{overflow:hidden}.bump-wrap p,.bump-wrap h3,.bump-wrap b{max-width:100%}

  /* Card marks wrap onto a second row rather than off the edge. */
  .paybar{flex-wrap:wrap}.pays{flex-wrap:wrap;max-width:100%;justify-content:center}

  /* One compact reassurance row. */
  .pay-head{flex-wrap:wrap;justify-content:center;text-align:center;
    gap:.2rem .55rem;font-size:.7rem}

  /* Front page: stats bar, order rows, pill, review cards. */
  .statsbar .hs{padding:0 .3rem}.statsbar .hs b{font-size:1.15rem}.statsbar .hs span{font-size:.5rem;letter-spacing:.05em}.stack li{grid-template-columns:1rem minmax(0,1fr)}.stack li > em{grid-column:2;grid-row:2;justify-self:end}.q-meta{min-width:0}.review,.review p,.review b{max-width:100%}
}
@media (max-width:380px){.statsbar .hs b{font-size:1rem}.statsbar .hs span{font-size:.46rem}.pay-head{font-size:.66rem;gap:.18rem .45rem}.paybar .lockline{font-size:.52rem}.pay-label{font-size:.52rem}.pay-mark svg{height:.72rem}.pay-mark{padding:.08rem .24rem}
}


/* ==================================================================
   Additions for this build.
   ================================================================== */

/* Emphasis inside a line of copy. Carried over from the content source,re-pointed at a token: never a hex value. One per line,at most. */
.highlight{color:var(--accent);font-weight:700}.band.ink .highlight,.xi .highlight{color:var(--accent-lift)}

/* Image placeholders. These hold the exact box the real asset will occupy,
   so spacing is already final. Each carries the pixel size it needs. */
/* The .ph placeholder component lived here - the dashed box with the required
   dimensions in it. Both placeholders it served,the hero image and the
   masthead band,were replaced by the real files on 2026-08-27,so it went
   with them rather than staying as dead weight. */

/* Trust badges. Three items on one line under the hero CTA,the way the
   content source renders the same line. */
.trust-row{
  display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;margin-top:1rem;
  font-family:var(--ui);font-size:.78rem;color:var(--ink-mute);
  letter-spacing:.04em;
}.trust-item{display:inline-flex;align-items:baseline;gap:.32rem;white-space:nowrap}.trust-item b{color:var(--ink);font-weight:700}.trust-item::before{
  content:"";width:.42rem;height:.42rem;border-radius:50%;
  background:var(--free-green);flex:none;align-self:center;
}
@media (max-width:820px){.trust-row{justify-content:center}}
@media (max-width:480px){.trust-row{gap:.4rem 1rem;font-size:.7rem}}

/* The one-line saving note under the value stack. */
.save-line{
  font-family:var(--ui);font-weight:700;text-transform:uppercase;
  letter-spacing:.12em;font-size:.68rem;color:var(--accent);
  margin:.55rem 0 0;
}

/* Reader cards in this build carry no portrait, so the head is just the
   rating and the byline. */
.review-head{align-items:flex-start}

/* THE TESTIMONIALS HEADING IS THE ONE HEADING IN THE PAGE BODY IN SENTENCE
   CASE. h1,h2,h3,h4 are uppercase site-wide; this line is a sentence, ends in
   a full stop and names the product in the middle of it - "the Playbook" -
   all three of which uppercase flattens. Scoped to #reviews h2 so every other
   heading is untouched. Size, weight and colour are inherited from .band h2
   exactly as before; text-transform is the only declaration here. */
#reviews h2{text-transform:none}

/* Lead line under the testimonials heading. It is now the last thing in the
   block - the disclosure that used to follow it was removed on the owner's
   instruction, 2026-09-06 - so the base p{margin-bottom:1rem} would add to
   .section-head's own margin and open a double gap before the cards. Zero
   here, and .section-head sets the whole distance.

   .disclosure went with the line it styled. Nothing else on the site used it;
   it was written for that one paragraph and is not left behind as a dead rule
   waiting to be reused by something it was not designed for. (.foot-disclaimer
   in the footer is a different rule and is untouched.) */
#reviews .section-head .lede{margin:0}

/* Footer, content-source treatment: three stacked blocks - copyright, the
   full educational disclaimer, then the contact line - with the legal links
   under them. Replaces the single-row .foot-in of the source layout. */
.foot-in{display:block;text-align:center}.foot-copy{
  font-family:var(--ui);font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;font-size:.72rem;color:#D3D8CB;
}.foot-disclaimer{
  max-width:62rem;margin:.9rem auto 0;
  font-size:.8rem;line-height:1.6;color:#9AA093;
}.foot-contact{
  margin:.9rem 0 0;font-size:.86rem;font-style:italic;
  letter-spacing:.02em;color:#9AA093;
}
@media (max-width:560px){.foot-disclaimer{font-size:.75rem}
}


/* ------------------------------------------------------------------
   Offer box
------------------------------------------------------------------ */

/* The cover is 1000x1500 (2:3),so at a straight half of the row it stands
   735px tall and swallows the block. Narrow the image column and cap the
   art itself: the picture reads as support,the value stack holds the
   eye. Ratio untouched. */
.offer-grid{grid-template-columns:minmax(0,.62fr) minmax(0,1fr);gap:2.2rem}.offer-shot{align-self:start}
/* Sizing moved to landing.css, where it is matched to eliasyoder.com's
   cover frame. This kept the image at 17.5rem (315px), which rendered it at
   29% of the offer grid against his 37.5% - visibly small in the column. */
.offer-shot img{margin-inline:auto}
@media (max-width:1100px){.offer-grid{grid-template-columns:minmax(0,.58fr) minmax(0,1fr);gap:1.8rem}
  /* cap removed - see the cover block in landing.css */
}
@media (max-width:820px){.offer-grid{grid-template-columns:1fr}
  /* cap removed - see the cover block in landing.css */
}

/* The four checks sit between the last stack row and the button. */
.offer-checks{margin:1.1rem 0 0}

/* Reassurance under the button: line, guarantee box, line. */
.offer-detail .trustline{margin-top:.7rem}.offer-detail .offer-seal{margin-top:.75rem}.trustline.instant{margin-top:.75rem}

/* ------------------------------------------------------------------
   FAQ question rows

   The whole row is the target, not the words in it, and it has to be
   reachable by keyboard. Quiet: the ground is the accent at 6%, the
   text moves to the accent. 65+ audience - this should read as "this
   one is live", not as a highlight.
------------------------------------------------------------------ */
.faq-item > summary{
  transition:color .15s ease,background-color .15s ease;
  padding-left:.7rem;padding-right:2.2rem;
  border-radius:3px;
}.faq-item > summary:hover,.faq-item > summary:focus-visible{
  color:var(--accent);
  background-color:color-mix(in srgb,var(--accent) 6%,transparent);
}.faq-item > summary:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:1px;
}
/* color-mix is widely supported but not universal; this ground is the
   same tone flattened against --tile, for anything that misses it. */
@supports not (background-color:color-mix(in srgb,red 6%,transparent)){.faq-item > summary:hover,.faq-item > summary:focus-visible{background-color:var(--deep)}
}
@media (prefers-reduced-motion:reduce){.faq-item > summary{transition:none}
}

/* ------------------------------------------------------------------
   Thank-you page

   Same shell and heading scale as every other page here; the live page's
   centered-card arrangement kept, its dark gradient dropped for this
   build's ground.
------------------------------------------------------------------ */
body.ty{background:var(--paper)}body.ty main{padding-top:0}.ty-card{text-align:center;display:flex;flex-direction:column;align-items:center;
  padding-top:1.4rem}.ty-shield{width:64px;height:76px;color:var(--accent);margin-bottom:1.1rem}.ty-card h1{font-size:2.3rem;line-height:1.15;color:var(--ink);margin-bottom:1.4rem;
  max-width:18ch}.ty-tick{color:var(--free-green)}.ty-card .btn{width:auto}.ty-hint{font-size:.95rem;color:var(--ink-soft);margin:1.1rem 0 0;max-width:34ch}.ty-receipt{font-size:.82rem;color:var(--ink-mute);margin:.55rem 0 0;max-width:34ch}.ty-support{font-size:.9rem;color:var(--ink-mute);margin:1.3rem 0 0}
@media (max-width:560px){.ty-card h1{font-size:1.85rem}.ty-shield{width:54px;height:64px}.ty-card .btn{width:100%}
}

/* ------------------------------------------------------------------
   thank-you page

   APPENDED 2026-09-11, CUT DOWN 2026-09-11 (second set). NOTHING ABOVE
   THIS LINE HAS EVER BEEN EDITED, REORDERED OR DELETED by either set -
   the header block, the .dl- rules and the three older .ty- rules are
   all untouched. These come after them, so where the two overlap this
   block wins on document order alone.

   THE BUTTON IS THE ONE THING ON THE PAGE. Buyers were refunding with
   "I never got my product": the primary download used to be a ZIP, and
   on an iPhone Safari files a ZIP away in the Files app where a
   seventy-year-old never finds it again. It is now one combined PDF -
   the owner's, already on R2, not built or served from here - and
   everything that competed with the button for attention is gone.

   WHAT THE FIRST SET HAD AND THIS ONE DOES NOT:
     .ty-save   the iPhone / computer save note      removed, owner's request
     .ty-url    the printed-out URL and its link     removed, owner's request
     .ty-support the separate "Trouble opening it?"  folded into .ty-alt
   Their rules are deleted here rather than left dead. The four product
   names came out of .ty-parts in the same set.

   WHY EVERY SELECTOR CARRIES .ty-card. `.doc p` is (0,1,1) and a bare
   `.ty-parts` is (0,1,0), so `.doc p{max-width:66ch;color:var(--ink-soft)}`
   wins the cascade and every max-width and colour below would be dead on
   arrival - measured, at 1440 these lines ran the full 677px of the card
   in the muted colour they never asked for. `.ty-card .ty-parts` is
   (0,2,0) and binds. THE THREE OLDER CLASSES HAVE THE SAME LATENT BUG -
   .ty-hint, .ty-receipt and .ty-support are all still 66ch - and they are
   LEFT AS THEY ARE, because fixing them means editing a rule above this
   line. None of the three is used by thank-you.html any more; 404.html
   still uses .ty-hint and .ty-support and is why they stay in the file.
------------------------------------------------------------------ */
/* THE BUTTON, 20% up on the shared component and nothing else changed:
   1rem/2.2rem/1.25rem/74px becomes 1.2rem/2.64rem/1.5rem/89px. Same
   oxblood, same Oswald, same border, same hover - it is still `.btn`,
   with one modifier on top. */
.ty-card .ty-btn{min-height:89px;padding:1.2rem 2.64rem;font-size:1.5rem}
/* The 340px floor is DESKTOP ONLY. At 360 the card is 331px wide, so a
   340px min-width is 9px of guaranteed horizontal scroll - which is the
   one thing the gate at the bottom of this page refuses. */
@media (min-width:561px){.ty-card .ty-btn{min-width:340px}}
/* Directly under the button, small and muted, one line at desktop width.
   No max-width: the card's own 680px is the measure, and the line is
   short enough to sit on one row inside it. */
.ty-card .ty-parts{font-size:.85rem;color:var(--ink-mute);margin:.9rem 0 0;max-width:none}
/* The fallback link. inline-block so it can carry a real tap target -
   an inline <a> is only as tall as its line box, which is 25px here and
   nowhere near the 44px a thumb needs. Colour and underline are the
   page's own link styling, untouched. */
.ty-card .ty-fallback{display:inline-block}
/* The clear gap, twice. Normal size for the email line - it is the one
   sentence a buyer who cannot find the file has to be able to read. */
.ty-card .ty-email{font-size:1rem;color:var(--ink-soft);margin:2rem 0 0;max-width:42ch}
/* Small, muted, both links inline: the ZIP for anyone who wants the four
   files apart, and support. Text links, never a second button arguing
   with the one above it. No max-width for the same reason .ty-parts has
   none - it is ONE line at desktop width, and a 46ch cap broke it over
   two. The card's own 680px is the measure. */
.ty-card .ty-alt{font-size:.85rem;color:var(--ink-mute);margin:2rem 0 0;max-width:none}
@media (max-width:560px){
  /* Full container width, and the floor lifted - see the note above it. */
  .ty-card .ty-btn{width:100%;min-width:0;padding-inline:1rem}
  /* The card is already 92vw here and html is at 17px, so a ch cap only
     puts gutters inside gutters. Full width below 560, and the card does
     the measuring. */
  .ty-card .ty-parts,.ty-card .ty-email,.ty-card .ty-alt{max-width:100%}
  /* 44px OF THUMB. .65rem at 17px is 11px above and below a 25px line
     box, which lands the hit target at 47px. The padding grows the line
     it sits on rather than being cancelled by a negative margin, so the
     link cannot overlap the row above it and steal that tap. */
  .ty-card .ty-fallback{padding-block:.65rem}
}