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

   Structure and layout inherited from margretmillerkitchen.com by way of
   the Flying Merged Shop build. Token NAMES are hers and are referenced
   throughout, so they are kept; the VALUES are the Harbour Brass palette,
   set out at the top of :root below. A few names therefore no longer
   describe their hue - --sage carries a slate blue, not steel - which is
   the same trade the two builds before this one made.

   landing.css sits on top of this file for index.html only. thank-you.html
   needs this file alone.
------------------------------------------------------------------ */
:root{
  /* HARBOUR BRASS.
     Deep harbor navy for every ink, brass for the accent. Token NAMES are
     unchanged from the builds before this one so every rule that already
     referenced them keeps working; only the values move. --sage/--sage-dark
     carry a slate blue rather than steel, which is why the names no longer
     describe the hue.

     ACCENT IS RESERVED FOR BUTTONS AND PRICES, as it was before. Nothing
     else on the page is allowed to take the brass.

     Contrast, computed not estimated - tools/contrast.py prints the whole
     table and reports zero failures (WCAG AA is 4.5, AAA is 7.0):
       body copy on paper      8.86  AAA
       body copy on tile       9.50  AAA
       heading on paper       11.89  AAA
       small print on paper    5.17  AA
       price/accent on paper   7.13  AAA
       price/accent on tile    7.65  AAA
       white on accent         8.05  AAA
       white on accent-dark   11.33  AAA
       wordmark on the band   11.89  AAA
       strip copy on strip    15.09  AAA
       accent-lift on ledger   8.79  AAA
     The audience is 60+, so every text pair clears AA and the body clears
     AAA. The reference build ran 7.02 / 7.91 on the accent pair; this one
     runs 7.13 / 8.05, which is the same relationship one step safer. */
  --paper:#F4F1E9;        /* the page */
  --tile:#FBF9F3;         /* alternating bands and cards */
  --deep:#E8E1D1;         /* one step down, for wells */
  --ink:#14304F;          /* headings, dark bands: deep harbor navy */
  --ink-deep:#0A1D31;     /* footer, ledger, last call - one below --ink */
  --ink-soft:#26455F;     /* body copy on paper */
  --ink-mute:#4A6883;     /* captions, small print */
  --line:#D8D0BE;         /* hairline separators */
  --line-strong:#B2A78C;  /* the boxes, which have to read as boxes */
  --sage:#4A6883;         /* rules, ticks, eyebrows */
  --sage-dark:#0A1D31;    /* the header bar and the top strip, flat */
  --accent:#6B4A09;       /* BUTTONS AND PRICES ONLY - brass */
  --accent-dark:#4E3606;
  --accent-lift:#E0B458;  /* the brass on a dark band */
  /* Held apart from --accent on purpose: a palette change must not quietly
     take the guarantee badge with it. */
  --free-green:#1F6B45;
  /* The bright brass, kept as its own token the way the reference kept its
     own gold. Nothing on the page uses it yet except the favicon artwork;
     --ink-deep on it is 11.05 : 1. */
  --gold:#FFC94A;
  /* The alert reds. One warm red is the only colour on the page that is not
     navy, cream or brass, 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.
       --signal-lift   the strip's timer digits, the pulse dot, and the
                       ledger net line. 4.64 : 1 on --signal-deep,
                       4.82 : 1 on --ink-deep.
       --signal-deep   the timer plate only. Never carries text itself. */
  --signal:#C63328;
  --signal-lift:#E8584F;
  --signal-deep:#3A1310;

  --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 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:#DCD3BE}

/* ---------- 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:#9AA3AD;padding:2.4rem 0;font-size:.9rem;margin-top:0}.foot a{color:#CFD6DE}.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:#7C8794;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:#C6CCD4}.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:#94A8BE}.band.ink .eyebrow::after{background:#1E3145}

/* ---------- 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:#FDF9F1;
  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:#8A94A0;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:#C6CCD4;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 #1E3145;
}.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:#9AA3AD;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:#FDF9F1;
}.dl-btn:hover{background:var(--accent-dark);border-color:var(--accent-dark);color:#FDF9F1}.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 #1E3145}.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 #6B7684;color:#DFE4EA;
}.dl-all:hover{background:#1E3145;border-color:#9AA3AD;color:#fff}.dl-all-ico{width:1rem;height:1rem;flex:none}.dl-all-sub{color:#8A94A0;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 holding the exact
   size and filename each image slot wanted. It served all three slots (hero,
   masthead band, book cover) and all three were replaced by the real files on
   2026-09-06, so it went with them rather than staying as dead weight. The
   reference build's own note said the same thing about its own .ph, for the
   same reason.

   If a slot ever has to go back to a placeholder, the component was: a flex
   column with a dashed --line-strong border on a --deep ground, the size and
   filename in --ui and --mono, and the box reserved with aspect-ratio rather
   than a height so it scaled with its column exactly as the <img> does. The
   band variant sat at position:absolute; inset:0 with its label pinned to the
   bottom-right corner, because a centred label printed straight through the
   wordmark - the visible band is only about 110px once the urgency strip's
   59.6px is reserved out of the 170px. */

/* 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 ON THE PAGE 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 - 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. */
#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:#CFD6DE;
}.foot-disclaimer{
  max-width:62rem;margin:.9rem auto 0;
  font-size:.8rem;line-height:1.6;color:#9AA3AD;
}.foot-contact{
  margin:.9rem 0 0;font-size:.86rem;font-style:italic;
  letter-spacing:.02em;color:#9AA3AD;
}
@media (max-width:560px){.foot-disclaimer{font-size:.75rem}
}


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

/* The cover is 1000x1429,so at a straight half of the row it stands
   700px 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%}
}