/* ------------------------------------------------------------------
   PORTED FROM THE SEASONED CRUISER, 2026-09-12, BY tools/port_css.py.

   Geometry, type, spacing, breakpoints and every selector are the
   reference's and are UNTOUCHED. What moved is colour: the :root block
   below is Raymond Grant's onyx and gold mapped role for role onto the
   reference's own token names, and the handful of hard-coded values the
   reference never tokenised were remapped one at a time.

   The reference's comments are kept as they stand. Where one names a
   figure in ITS palette - a contrast ratio, a hex - the number is the
   reference's own and no longer describes this file; tools/contrast.py
   is the live table for this shop and it is the one to trust.
------------------------------------------------------------------ */
:root{
  /* ONYX AND GOLD - RAYMOND GRANT.

     The reference's TOKEN NAMES are kept and only the VALUES move, which is
     the trade its own stylesheet made when it was ported from the kitchen
     template before it. So --sage carries a gold here, not a slate blue,
     and the name no longer describes the hue.

     THE SOURCE OF EVERY VALUE. Raymond's palette is ONYX-GOLD-TOKENS.md in
     this repo - the values the PDF bundle itself is set in, so the shop and
     the book look like one product. Where that file names a role, this
     takes the value verbatim. Where the reference has a role Raymond's file
     does not, the value is DERIVED and the derivation is written beside it.

     THE ONE PLACE RAYMOND'S PALETTE IS NARROWER THAN THE REFERENCE'S.
     The reference runs four families on its light ground - ink, slate,
     oxblood and brass. Raymond runs two: ink and gold. So --sage and
     --accent, which are a slate and an oxblood over there and read as two
     different things, are two steps of ONE gold here. They are still
     distinguishable (5.34 : 1 and 6.00 : 1 on paper) but they are the same
     hue, and that is a consequence of the palette and not a slip.

     THE ACCENT IS NO LONGER THE CTA FILL, AND THAT IS THE ONE PLACE THIS
     PALETTE PARTS COMPANY WITH THE REFERENCE'S ROLE TABLE.
     ONYX-GOLD-TOKENS.md section 4 says gold carries STRUCTURE and the
     Trigger-Yellow carries ACTION. The port brief mapped the reference's
     --accent, which IS its CTA fill, onto Raymond's gold; it was built
     that way, flagged, and the owner's decision of 2026-09-12 is that his
     token file wins. --accent now carries prices, section numerals, links
     and the non-buying buttons; every element with data-buy takes --cta.
     See the block at --cta below for the values and the measurements.

     Contrast is computed, not estimated: tools/contrast.py prints the whole
     table and reports zero failures. WCAG AA is 4.5, AAA is 7.0. The
     audience is 60-78, so every text pair clears AA and every body pair
     clears AAA:
       body copy on paper         12.49  AAA
       heading on paper           14.30  AAA
       small print on paper        5.47  AA
       price / accent on paper     6.00  AA
       eyebrow on paper            5.34  AA
       paper label on accent       6.00  AA   (the non-buying buttons)
       cta label on the yellow      8.31  AAA  (worst of six states)
       body copy on the deep band 16.99  AAA
       accent-lift on the ledger  10.48  AAA
       net line on the ledger      5.45  AA
       timer digits on the plate   4.64  AA */

  /* ---- the light reading zone. Raymond's section 3. ---- */
  --paper:#F5F2EA;        /* his "Papier / Seitenhintergrund" */
  /* DERIVED. Raymond has no tone above his paper; the reference lifts its
     own paper to its tile by about +7 per channel, and this is that step
     applied to his. */
  --tile:#FCFAF4;         /* alternating bands and cards */
  --deep:#EFE7D3;         /* his "Panel / Callout-Flaeche" - the wells */
  --ink:#16213A;          /* his "Ueberschrift" */
  --ink-deep:#080E1D;     /* his deepest onyx - footer, ledger, last call */
  --ink-soft:#232C3F;     /* his "Fliesstext" */
  --ink-mute:#5A6273;     /* his "Text gedaempft / Dek" */
  /* DERIVED, by the reference's own paper-to-hairline steps. */
  --line:#D9D2C0;         /* hairline separators */
  --line-strong:#B3A98F;  /* the boxes, which have to read as boxes */

  /* ---- structure. His section 2: "Gold traegt Struktur". ---- */
  --sage:#9A6F1F;         /* his "Gold tief (auf hellem Grund)".
                             RULES, TICKS, BORDERS AND THE FOCUS RING ONLY. */
  /* THE SAME GOLD, DARKENED FOR ONE ROLE AND RECORDED. #9A6F1F measures
     4.02 : 1 on the paper and .eyebrow is TEXT, so it fails AA there.
     Hue (.1084) and saturation (.665) held exactly, lightness .3627 -> .305.
     5.34 : 1 on paper, 5.73 on tile, 4.85 on the well. */
  --sage-text:#815D1A;
  --sage-dark:#0B1326;    /* his onyx mid - the flat top strip */

  /* ---- the accent. THE CTA FILLS AND THE PRICES, and nothing else.
     Raymond's gold darkened by the same method: lightness .3627 -> .280
     for the fill and -> .220 for the hover. Both directions clear AA. ---- */
  --accent:#775618;
  --accent-dark:#5D4313;
  /* His "Gold hell (Labels auf dunklen Boxen, Emblem-Stern)". This is the
     reference's --accent-lift role exactly - the arithmetic block's totals
     and unit labels, the masthead rule, the Last Call eyebrow. */
  --accent-lift:#E9B84E;
  /* THE ACCENT ON A DARK GROUND. His "Gold Struktur" - the value his own
     corner brackets and rules are drawn in on the dark zone. One use here:
     the 03 section numeral, which sits on the ledger's onyx where --accent
     itself measures 1.36 : 1 and disappears. 8.02 : 1. */
  --accent-lift-red:#C9A24B;
  /* Held apart from --accent on purpose: a palette change must not quietly
     take the guarantee badge with it. Kept at the reference's value - it is
     a green and Raymond's file names none. */
  --free-green:#1F6B45;
  /* ---- THE ACTION COLOUR. Raymond's section 4: "Gold traegt Struktur,
     Yellow traegt Aktion. Wird Gold auf CTAs gelegt, verliert die Seite
     ihr Klick-Signal - das ist der einzige Fehler, der hier wirklich weh
     tut."

     THE CTAs WERE GOLD FOR ONE SET AND ARE NOT ANY MORE, on the owner's
     decision of 2026-09-12. The port brief mapped the reference's
     --accent - which IS its CTA fill - onto Raymond's gold, and said not
     to ask. It was built that way, flagged, and the owner's answer is
     that his own token file wins: section 4 stands, the yellow carries
     the action, and gold goes back to rules, labels and frames only.

     THE VALUES ARE RAYMOND'S OWN LIVE BUTTON, lifted off protect.html -
     which was never rebuilt and still carries it - rather than invented:
       background:linear-gradient(180deg,#FFCD4E,#E9A92F)
       color:#241a04
     So the sales page's buy buttons and the download button a buyer meets
     one screen later are now the same button.

     THE HOVER AND ACTIVE STEPS ARE DECLARED, NOT FILTERED. His page does
     them with filter:brightness(1.05) and (.98), which cannot be measured
     by a contrast gate - the browser computes them after the cascade. The
     four values below ARE those two filters, applied once and written
     down, so every state is a real colour that tools/contrast.py can
     check. They are identical to what the filter produces.

     EVERY STATE MEASURED, none below AAA:
       rest    label on the top #FFCD4E  11.51   on the bottom #E9A92F  8.31
       hover   label on #FFD752          12.33   on #F5B131             9.16
       active  label on #FAC94C          11.04   on #E4A62E             8.00

     THE BORDER IS LOAD-BEARING ON THE LIGHT GROUND AND THAT IS THE ONE
     THING THE SWAP CHANGED BEYOND COLOUR. The gold fill measured 6.00 : 1
     against the paper, so it drew its own edge; the yellow measures
     1.33 : 1 and does not. WCAG 1.4.11 wants 3 : 1 for the boundary that
     identifies a control, so on the cream sections the 1.5px border
     carries it in --sage (#9A6F1F, 4.02 : 1 on paper, 3.02 : 1 against
     the fill). On the two onyx grounds the fill itself is 12.92 : 1 and
     the frame is --accent-lift, which is the gold the reference's own
     sticky bar already used. No geometry moved: same 1.5px, same radius,
     same padding. ---- */
  /* THE FILL IS FLATTER THAN HIS, 2026-09-12 (craft pass). His own ramp
     runs #FFCD4E -> #E9A92F, which is a 30-point drop and reads as a ramp
     rather than as a surface. These six stops are the same yellow with the
     travel taken out: about eight points from top to bottom, enough to
     stop the fill looking printed and not enough to see as a gradient.
     THE DEPTH COMES FROM THE LIP AND THE SHADOW INSTEAD - see block 8 in
     landing.css. */
  --cta:#FFD25C;          /* rest, top */
  --cta-2:#F6BC3A;        /* rest, bottom */
  --cta-hover:#FFD96E;
  --cta-hover-2:#FBC64B;
  --cta-active:#F7C64F;
  --cta-active-2:#EDB334;
  --cta-ink:#241A04;      /* his button label */
  /* THE BOTTOM LIP. A 2px inset shadow, not a border: a border is on all
     four sides and costs the box its height, and this has to read as the
     bottom edge of a solid object.

     IT WAS 3px AND #C98A1C UNTIL 2026-09-12. Two things were wrong with
     that and both were visible rather than theoretical. 3px is a lot of
     lip under a 71px button - it read as a stripe painted on rather than
     as the side of the key. And #C98A1C sits at hue 38.2, where the fill
     is at 41.5: three degrees is enough to read as ORANGE under a yellow
     button, which is the one thing a shadow of the fill must not do.

     #E0A526 IS THE SAME HUE AS THE FILL. 41.0 against the bottom stop's
     41.5, where the old value was 38.2 - measured, not eyeballed. It is
     1.27 : 1 against the fill above it, which is a quieter edge than the
     old 1.71 and is the point: at 2px it wants to read as a fold in one
     surface, not as a second colour.

     THE ACTIVE STATE TAKES IT TO 1px. Less of the side showing is what
     makes a press read. */
  --cta-lip:#E0A526;

  /* The reference's own bright-brass token, and it happens to be one
     digit off Raymond's Trigger-Yellow. Kept at the reference's value and
     kept apart from --cta: a change to the action colour must not quietly
     move anything that referenced this. Nothing on the page uses it. */
  --gold:#FFC94A;

  /* HIS "Gold tief-warm (Ziffern, Akzentlinien auf hell)". ONE USE: the
     star runs in 05, which are a graphic and not text. The reference draws
     them in an amber of its own (#C9803F) that belongs to no token; this
     names Raymond's equivalent so tools/runtime_rev.py can read it out of
     :root rather than carrying an exception for it. */
  --star-warm:#B0791C;

  /* ---- the alert reds. His section 4. ---- */
  --signal:#D7372F;       /* his red - a GROUND, never text */
  --signal-lift:#E8584F;  /* his lifted red - timer digits and the net line */
  --signal-deep:#3A1310;  /* the timer plate only. Never carries text. */
  /* THE ALERT RED AS TEXT, derived from --signal the reference's own way:
     hue and saturation held, lightness taken down until it clears AA on
     both form grounds. 6.92 : 1 on the tile, 6.46 : 1 on the paper.
     ONE USE: the error line under either email capture. */
  --signal-text:#A82219;

  /* ---- copy on the onyx bands. Raymond's section 1, verbatim. ---- */
  --on-dark:#EDF1F8;      /* his "Text sekundaer auf dunkel" - body copy */
  --on-dark-mute:#C6D0DE; /* his "Fliesstext gedaempft auf dunkel" */
  --on-dark-label:#93A0B4;/* his "Label / Meta auf dunkel" */
  --on-dark-rule:#1B2437; /* DERIVED: his card face #101A2C lifted one step,
                             for the hairlines inside a dark band. */

  /* ---- TYPE IS THE REFERENCE'S, UNCHANGED. The brief holds it fixed and
     it is the half of the design that is not Raymond's to move. ---- */
  --display:"Oswald",Impact,sans-serif;
  --serif:"Lora",Georgia,serif;
  --ui:"Oswald",sans-serif;
  --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 60 to 78. */
  --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:#E9B84E}

/* ---------- 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:#93A0B4;padding:2.4rem 0;font-size:.9rem;margin-top:0}.foot a{color:#C6D0DE}.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:#6E7788;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:#C6D0DE}.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;
  /* --sage-text AND NOT --sage, AND THAT IS THE ONE DECLARATION IN THIS
     FILE THE PORT CHANGED BEYOND A TOKEN VALUE. The reference sets
     color:var(--sage) here because its --sage is a slate blue that clears
     AA on paper. Raymond's --sage is his gold, which measures 4.02 : 1
     there and fails as TEXT while remaining right for the rules and
     borders --sage also draws. So the one text role takes the darkened
     step - 5.34 : 1 - and every other use of --sage is untouched.
     Recorded in :root beside the token itself. */
  font-size:.62rem;color:var(--sage-text);
}.eyebrow::after{content:"";flex:1;height:1px;background:var(--line)}.band.ink .eyebrow{color:#C9A24B}.band.ink .eyebrow::after{background:#1B2437}

/* ---------- 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)}
/* THE ONE CLASS THIS SHOP ADDS TO THIS FILE, and it is a rename rather
   than a new design. The pages this build replaces close on a
   `p.legal-page__back` carrying a "Back to home" link, and that class does
   not exist in these stylesheets. The brief's rule for that case is to
   rename rather than to fight specificity, so the markup says .doc-back and
   the rule takes `.doc .backlink`'s own treatment with the margin turned
   the other way up - it sits at the FOOT of the document, not above the
   H1, which is where the old one sat. */
.doc-back{font-family:var(--ui);text-transform:uppercase;letter-spacing:.14em;font-size:.62rem;
  font-weight:700;margin:2.8rem 0 0}.doc-back a{color:var(--ink-mute);text-decoration:none}.doc-back a: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:#F5F2EA;
  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:#93A0B4;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:#C6D0DE;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 #1B2437;
}.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:#93A0B4;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:#F5F2EA;
}.dl-btn:hover{background:var(--accent-dark);border-color:var(--accent-dark);color:#F5F2EA}.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 #1B2437}.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 #4A5568;color:#EDF1F8;
}.dl-all:hover{background:#101A2C;border-color:#93A0B4;color:#fff}.dl-all-ico{width:1rem;height:1rem;flex:none}.dl-all-sub{color:#93A0B4;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%),#D9D2C0 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%),#D9D2C0 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,#D9D2C0) 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,#D9D2C0) 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. */
#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:#C6D0DE;
}.foot-disclaimer{
  max-width:62rem;margin:.9rem auto 0;
  font-size:.8rem;line-height:1.6;color:#93A0B4;
}.foot-contact{
  margin:.9rem 0 0;font-size:.86rem;font-style:italic;
  letter-spacing:.02em;color:#93A0B4;
}
@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}
}