/* ------------------------------------------------------------------
   The Senior Flyer ... 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{
  /* PALETTE A - "Departure Board".
     The Senior Flyer's own colors re-cast into this layout. Token NAMES are
     unchanged from the Margret build so every rule that already referenced them
     keeps working; only the values move. --sage/--sage-dark carry teal rather
     than steel, which is why the names no longer describe the hue.

     ACCENT IS ELIAS YODER'S OXBLOOD AS OF 2026-09-09, and it is no longer
     the teal. --accent is #7A1F0E and --accent-dark #5A1308, both measured
     off The Seasoned Cruiser build, which lifted them LITERALLY off his live
     :root (--oxblood / --oxblood-dk, read off eliasyoder.com, not off a
     screenshot). The role did not widen with the hue: it is still the CTA
     fills, the price figure, the launch-price chip, the secure-checkout row,
     the section numbers, the masthead left label and the checkmark
     highlights, and nothing else.

     THE ARITHMETIC IS DELIBERATELY EXEMPT. #ledger keeps its dark ground, its
     totals and its lifted net line exactly as they were - which is why
     --accent-lift below did NOT move with --accent. See the note on
     --accent-lift-red.

     Contrast, computed not estimated - tools/contrast.py prints the whole
     table and reports zero failures (WCAG AA is 4.5, AAA is 7.0). Every pair
     the accent touches got BETTER, not worse:
       body copy on paper      7.94  AAA   (unchanged)
       heading on paper       10.25  AAA   (unchanged)
       small print on paper    4.77  AA    (unchanged)
       price/accent on paper   9.18  AAA   (was 7.02 on the teal)
       price/accent on tile    9.75  AAA   (was 7.46)
       white on accent        10.35  AAA   (was 7.91)
       white on accent-dark   13.71  AAA   (was 11.45)
       strip copy on strip    13.47  AAA   (unchanged)
       accent-lift on ledger   8.88  AAA   (unchanged - the math is exempt)
       accent-lift-red on it   4.70  AA    (new - the 03 numeral)
     The audience is 65+, so every text pair clears AA and most clear AAA. */
  --paper:#F5F1E8;        /* the page */
  --tile:#FBF8F1;         /* alternating bands and cards */
  --deep:#EAE3D3;         /* one step down, for wells */
  --ink:#113F44;          /* headings, dark bands: deep teal */
  --ink-deep:#0A2A2E;     /* footer, one below --ink */
  --ink-soft:#2A4F54;     /* body copy on paper */
  --ink-mute:#4E7076;     /* captions, small print */
  --line:#D9D2C0;         /* hairline separators */
  --line-strong:#B4A98E;  /* the boxes, which have to read as boxes */
  --sage:#4E7076;         /* rules, ticks, eyebrows */
  --sage-dark:#0A2A2E;    /* the header bar and the top strip, flat */
  --accent:#7A1F0E;       /* BUTTONS AND PRICES ONLY - Elias's oxblood */
  --accent-dark:#5A1308;  /* his --oxblood-dk, literally */
  /* --accent-lift IS STILL THE TEAL, AND THAT IS NOT AN OVERSIGHT.
     Its job on this page 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. The instruction that moved --accent to the oxblood
     explicitly holds the arithmetic's ground, totals and net line, so this
     token stays where it is rather than following --accent across. */
  --accent-lift:#8FD1D9;  /* the accent on a dark band - the arithmetic's */
  /* THE ACCENT ON A DARK GROUND, and the only red that is allowed there.
     Derived the way the reference build derived its own and no other way:
     the oxblood's own hue (9.4deg) and saturation (.794) held exactly, and
     lightness raised to .610 - which is the same lightness --signal-lift
     lands on, and how that token was built from --signal in the first place.
     NOT a different red and NOT a different hue. The derivation reproduces
     #EB654D at this rounding; the literal below is the cruise build's own
     value, one unit off in blue, kept so the two shops carry one figure.
     4.70 : 1 on --ink-deep, where --accent itself measures 1.47 : 1 and
     disappears.
     One use: the 03 section numeral, on the arithmetic's dark ground. */
  --accent-lift-red:#EB654C;
  /* Held apart from --accent on purpose: a palette change must not quietly
     take the guarantee badge with it. */
  --free-green:#1F6B45;
  /* Palette A's own gold - it is in tools/palettes.json under
     A_departure_board and was simply never lifted into :root, because
     nothing used it until the BONUS badges. --ink-deep on it is 9.91 : 1,
     --ink 7.54 : 1. The badges use --ink-deep. */
  --gold:#FFC94A;
  /* The alert reds. Both are the live Senior Flyer's own - it carries
     #D7372F and #E8584F - rather than palette A's #B3261E, which is a
     colder red and was never used on this build.
       --signal        THE MAIN BOOK pill. White on it is 4.69 : 1 (AA).
       --signal-lift   the strip's timer digits and pulse dot. 4.52 : 1
                       on --signal-deep, 4.29 : 1 on the strip ground.
       --signal-deep   the timer plate only. Never carries text itself. */
  --signal:#D7372F;
  --signal-lift:#E8584F;
  --signal-deep:#3D1512;
  /* THE ALERT RED AS TEXT, added 2026-09-10 with the two email captures.
     --signal is a GROUND on this page - the MAIN BOOK pill, the timer plate -
     and white on it is 4.69 : 1. Set as 16px text it measures 4.42 : 1 on
     --tile and 4.16 : 1 on --paper, which is under AA on both of the two
     grounds a form message can land on, so it could not be used for the one.
     DERIVED, NOT PICKED, by the method --accent-lift-red and --signal-lift
     were both derived by: --signal's own hue (2.9deg) and saturation (.677)
     held exactly, lightness taken from .514 down to .454. It is the same red,
     one step darker, and it is not a second hue.
       5.36 : 1 on --tile   (07's band, where the form sits)
       5.04 : 1 on --paper  (the exit modal's card)
     ONE USE: the error line under either capture, and nothing else. */
  --signal-text:#C22D25;

  --display:"Oswald",Impact,sans-serif;
  /* Names the stack that was already being written out longhand in five
     places in landing.css. Added when the offer box was rebuilt on Elias
     Yoder's structure, which sets its item names and its price in a serif. */
  --serif:"Lora",Georgia,serif;
  --ui:"Oswald",sans-serif;
  /* His --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 from the source layout deliberately: this shop's audience is
     older than that one's. */
  --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 Rule Book" -
   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. */
/* TOMBSTONED 2026-09-19. `#reviews h2{text-transform:none}` stood here.
   The five-card testimonial section is deleted - its reviews are the
   sixteen-card stack inside the product block now, and that block has no
   H2 of its own, only the `.rb-revh` label. There is no #reviews on the
   page for this rule to select, so it is removed rather than left
   pointing at nothing. The sentence-case switch itself is not gone from
   the site: #faq h2, the two offer H2s and the exit modal's all still
   take it, each scoped to itself. */

/* 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.) */
/* TOMBSTONED 2026-09-19 with the section it scoped to. It read
   `#reviews .section-head .lede{margin:0}` and closed the gap between
   the testimonial lead and the cards. Both the lead and the cards are
   gone; `.lede` itself stays and is still used elsewhere. */

/* 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}
}

/* ROUND 12, 2026-09-22. The second and third book on the thank-you page.
   Each is the Rule Book's own button and line, one clear gap below the
   block above it. `[hidden]` is the markup's default; js/thank-you.js
   lifts it for the books the plan paid for. */
.ty-card .ty-more{display:flex;flex-direction:column;align-items:center;margin:1.6rem 0 0;width:100%}
.ty-card .ty-more[hidden]{display:none}
@media (max-width:560px){.ty-card .ty-more{margin-top:1.3rem}}