:root{
  --paper:#F2EBD4;
  --tile:#F9F6EC;
  --ink:#181816;
  --ink-soft:#403E3A;
  --oxblood:#8C1D1D;
  --oxblood-dark:#6B1414;
  --steel:#44525E;
  --money:#22703A;
  --line:#D8D0BB;
}
*{box-sizing:border-box}
html{font-size:21px;scroll-behavior:smooth}
section[id]{scroll-margin-top:1.5rem}
#buy{scroll-margin-top:1rem}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
body{margin:0;background-color:var(--paper);color:var(--ink);font-family:"Atkinson Hyperlegible",Verdana,sans-serif;font-size:1rem;line-height:1.65;-webkit-font-smoothing:antialiased}

h1,h2,h3,h4,.tag,.btn,.eyebrow,.price-big,.brand,.sec-no,.stat b{font-family:"Oswald",Impact,sans-serif;text-transform:uppercase;letter-spacing:.02em;font-weight:600}
h1{font-size:3.2rem;line-height:1.02;margin:0 0 1.1rem;letter-spacing:-.01em}
h2{font-size:2.2rem;line-height:1.1;margin:0 0 .5rem}
h3{font-size:1.3rem;line-height:1.25;margin:0 0 .4rem}
h4{font-size:1.1rem;margin:0}
p{margin:0 0 1rem;max-width:48ch}
a{color:var(--oxblood);text-underline-offset:.22em;text-decoration-thickness:.09em}
a:hover{color:var(--oxblood-dark)}
:focus-visible{outline:4px solid var(--steel);outline-offset:3px}

.wrap{width:min(1000px,92vw);margin-inline:auto}
.narrow{width:min(700px,92vw);margin-inline:auto}
.skip{position:absolute;left:-9999px;background:var(--ink);color:#fff;padding:1rem}
.skip:focus{left:1rem;top:1rem;z-index:99}

.top{
  position:relative;
  z-index:0;
  background-color:#2A211B;
  background-image:url("assets/art/masthead.jpg");
  background-size:72% auto;
  background-repeat:repeat;
  background-position:center;
  padding:1.35rem 0;
}
.brand{font-size:1.15rem;letter-spacing:.16em;color:#fff;text-decoration:none}
.brand{position:relative}
.brand::before{
  content:"";
  position:absolute;
  z-index:-1;
  left:-1.15em; right:-1.15em; top:-.5em; bottom:-.5em;
  background:rgba(10,8,7,.88);
  border-radius:2em;
  filter:blur(9px);
}
.brand{text-shadow:0 1px 4px rgba(0,0,0,.8)}
.brand:hover{color:#E0B4B4}

.tag{display:inline-flex;align-items:center;background:var(--oxblood);color:#fff;font-size:1rem;line-height:1;padding:.6rem 1.05rem .6rem 1.5rem;clip-path:polygon(.85rem 0,100% 0,100% 100%,.85rem 100%,0 50%);position:relative}
.tag::before{content:"";position:absolute;left:.72rem;top:50%;transform:translateY(-50%);width:.34rem;height:.34rem;background:var(--paper);border-radius:50%}
.tag.dark{background:var(--ink)}

.eyebrow{display:flex;align-items:center;gap:.9rem;font-size:.9rem;letter-spacing:.18em;color:var(--steel);margin-bottom:1.1rem}
.eyebrow::after{content:"";flex:1;height:2px;background:var(--line)}

.btn{display:inline-flex;align-items:center;justify-content:center;min-height:74px;padding:1rem 2.2rem;font-size:1.25rem;text-align:center;text-decoration:none;border-radius:4px;border:3px solid var(--oxblood);background:var(--oxblood);color:#fff;cursor:pointer}
.btn{position:relative}
.btn:hover{background:var(--oxblood-dark);border-color:var(--oxblood-dark);color:#fff}
.btn:focus-visible{outline:3px solid #d6a448;outline-offset:4px}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.btn-row{display:flex;gap:1rem;flex-wrap:wrap;margin-top:1.7rem}
.reassure{font-size:.95rem;color:var(--ink-soft);margin:.9rem 0 0}

.shot{position:relative;background:#E7E5DF;overflow:hidden;border-radius:4px}
.shot img{width:100%;height:100%;object-fit:cover;display:block;position:relative;z-index:2}
.shot .slot{position:absolute;inset:0;z-index:1;display:none;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:1rem;border:3px dashed #BEBBB3;color:#6E6B64;font-family:"Oswald",sans-serif;text-transform:uppercase;letter-spacing:.1em;font-size:.78rem}
.shot .slot code{font-family:"Atkinson Hyperlegible",monospace;text-transform:none;letter-spacing:0;font-size:.82rem;color:var(--ink);margin-top:.4rem}


/* ---------- masthead ----------
   A 8.48:1 strip cut from the 3840x1648 render, centred on the baked
   wordmark, then scaled to 2240x264. Band height is derived, not picked:
   170px is exactly the strip's own height at a 1440px viewport, so at that
   width `cover` shows the full strip with no crop and the wordmark renders
   at ~41px. Wider viewports crop top and bottom only, and the wordmark is
   vertically centred, so it always survives.

   The mobile height is per-site: below the strip's natural width `cover`
   crops horizontally instead, so the band has to stay short enough that the
   wordmark's right edge is still on screen at 360px. That limit differs per
   render because each wordmark is a different length.

   Lettering is part of the artwork; the accessible name is the hidden span
   in the link. No radius, no shadow. */
.masthead{
  position:relative;
  width:100%;
  height:170px;
  /* sampled from this strip's own ground, covering any remainder */
  background-color:#38190F;
  background-image:url("assets/art/masthead.jpg");
  background-image:image-set(url("assets/art/masthead.jpg") type("image/webp"),
                             url("assets/art/masthead.jpg")  type("image/jpeg"));
  background-repeat:no-repeat;
  background-size:cover;
  background-position:left center;
}
.masthead::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to bottom,
    rgba(0,0,0,.25) 0%,
    rgba(0,0,0,0) 18%,
    rgba(0,0,0,0) 82%,
    rgba(0,0,0,.25) 100%);
}
/* The band itself is the home link. */
.masthead-home{position:absolute;inset:0;z-index:1;display:block}
.masthead-home:focus-visible{outline:3px solid #F2EBDC;outline-offset:-6px}
.visually-hidden{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);
  white-space:nowrap;border:0;
}
@media (max-width:767.98px){
  .masthead{height:104px}
}


/* hero */
.hero{padding:3rem 0 1.8rem}
.hero-in{display:grid;grid-template-columns:58fr 42fr;grid-template-areas:"text img";column-gap:2.6rem;align-items:start}
.hero-text{grid-area:text;display:flex;flex-direction:column;align-items:flex-start}
.hero h1{margin-top:0;max-width:19ch}
.hero h1.long{font-family:"Libre Baskerville",Georgia,serif;font-weight:700;text-transform:none;font-size:2.35rem;line-height:1.22;letter-spacing:-.005em;max-width:none}
.best{font-family:"Lora",Georgia,serif;font-weight:400;font-size:1.06rem;line-height:1.62;color:var(--ink-soft);max-width:42ch;margin:1.1rem 0 1.6rem}
.proof{display:inline-flex;align-items:center;gap:1.1rem;border:2px solid var(--line);border-radius:999px;padding:.65rem 1.4rem .65rem .8rem;background:var(--tile);flex-wrap:wrap;justify-content:center;align-self:flex-start}
.faces{display:flex}
.face{width:2.6rem;height:2.6rem;border-radius:50%;background:#D8D5CE;border:3px solid var(--tile);margin-right:-.85rem;overflow:hidden;display:block}
.face:last-child{margin-right:0}
.face img{width:100%;height:100%;object-fit:cover;display:block}
.proof-text{display:flex;flex-direction:column;align-items:flex-start;line-height:1.2}
.proof-text .stars{color:#C9971B;font-size:1.05rem;letter-spacing:.1em;margin:0}
.proof-text span{font-size:.92rem;color:var(--ink-soft)}
.top-cta{margin-top:1.4rem}
.top-cta .btn{padding-inline:1.75rem}
.hero-stats{display:grid;grid-template-columns:repeat(3,1fr);margin-top:1.8rem;border-top:1px solid var(--line);padding-top:1.2rem;width:100%;max-width:34rem}
.hs{padding-right:1rem;text-align:left}
.hs + .hs{border-left:1px solid var(--line);padding-left:1.2rem}
.hs b{display:block;font-family:"Oswald",sans-serif;font-size:1.8rem;line-height:1;color:var(--oxblood)}
.hs span{display:block;font-family:"Oswald",sans-serif;text-transform:uppercase;letter-spacing:.1em;font-size:.58rem;color:var(--steel);margin-top:.35rem}
.top-assure{margin-top:.9rem}

/* stats bar: sits directly under the hero, tight */
.statsbar{padding:0 0 1.6rem}
.statsbar .hero-stats{width:100%;max-width:none;margin:0;padding:.7rem 0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.statsbar .hs{padding:0 1rem;text-align:center}
.statsbar .hs + .hs{border-left:1px solid var(--line);padding-left:1rem}
.statsbar .hs b{font-size:1.55rem}
.statsbar .hs span{font-size:.55rem;margin-top:.25rem}
.statsbar + .offer{padding-top:1.6rem;border-top:0}

/* hero copy that now sits below the product block */
.aside-in{display:flex;flex-direction:column;align-items:flex-start}
.aside-hero .promise{margin-top:0;padding-top:0;border-top:0}
.promise{font-family:"Oswald",sans-serif;font-weight:500;font-size:1.3rem;line-height:1.4;color:var(--ink);max-width:40ch;margin:2.2rem 0 .6rem;padding-top:1.8rem;border-top:1px solid var(--line)}
p.lede{font-size:1.18rem;color:var(--ink-soft);max-width:42ch}
.hero-media{grid-area:img;justify-self:center;width:100%;max-width:25rem}
.hero-frame{background:var(--tile);border:1px solid var(--line);border-radius:4px;padding:.8rem}
.hero-cover{width:100%;aspect-ratio:4/5}

.price-line{display:flex;align-items:baseline;gap:.9rem;flex-wrap:wrap;margin-top:1.9rem}
.price-big{font-size:3.1rem;line-height:1;color:var(--oxblood)}
.price-was{font-size:1.15rem;color:var(--steel);text-decoration:line-through}
.price-note{font-size:1rem;color:var(--ink-soft)}

/* positioning strip */
.strip{background:var(--ink);color:#fff;padding:1.6rem 0}
.strip-in{display:flex;justify-content:space-between;align-items:center;gap:1.5rem;flex-wrap:wrap}
.strip p{margin:0;font-size:1.15rem;color:#fff;font-family:"Oswald",sans-serif;text-transform:uppercase;letter-spacing:.04em;max-width:none}
.strip span{color:#9A968C;font-family:"Atkinson Hyperlegible",sans-serif;text-transform:none;letter-spacing:0;font-size:1rem}

.band{padding:4rem 0}
.band.tile{background:var(--tile);border-block:1px solid var(--line)}
.band.ink{position:relative}
.band.ink{background:var(--ink);color:var(--paper)}
.band.ink h2,.band.ink h3,.band.ink h4{color:#fff}
.band.ink p{color:#CFCCC4}
.band.ink .eyebrow{color:#9A968C}
.band.ink .eyebrow::after{background:#3A3833}
.section-head{margin-bottom:2.2rem;max-width:50ch}

/* stats */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;margin-top:2rem}
.stat{background:var(--tile);border:1px solid var(--line);border-top:5px solid var(--oxblood);border-radius:4px;padding:1.4rem}
.stat b{display:block;font-size:2.3rem;line-height:1;color:var(--oxblood);margin-bottom:.35rem}
.stat span{font-size:.95rem;color:var(--ink-soft)}

.anchor{font-family:"Oswald",sans-serif;text-transform:uppercase;letter-spacing:.1em;font-size:.95rem;color:var(--steel);margin:1.6rem 0 -.4rem}
.anchor s{color:var(--ink-soft);text-decoration-thickness:.12em}
.band.ink .anchor{color:#8E8A82}
.band.ink .anchor s{color:#CFCCC4}
.money{color:var(--money)}
.hot{color:var(--oxblood)}
.math li.saved b{color:var(--money)}

/* guarantee badge */
.assure{margin-top:1.2rem;display:flex;flex-direction:column;align-items:flex-start;gap:.6rem}
.badge{
  display:inline-flex;align-items:center;gap:.7rem;
  font-family:"Oswald",sans-serif;text-transform:uppercase;letter-spacing:.08em;font-size:1rem;
  color:var(--oxblood);border:2px solid var(--oxblood);border-radius:999px;
  padding:.85rem 1.6rem;background:rgba(140,29,29,.05);
}
.badge svg{width:1.35rem;height:1.35rem;flex:none;fill:currentColor}
.badge svg .tick{stroke:var(--paper)}
.assure-sub{font-size:.92rem;color:var(--steel);margin:0}
.band.ink .badge{color:#E8B4B4;border-color:#7A3838;background:rgba(232,180,180,.06)}
.band.ink .badge svg .tick{stroke:var(--ink)}
.band.ink .assure-sub{color:#8E8A82}

/* steak burst */

/* books */
.books{display:grid;grid-template-columns:repeat(3,1fr);gap:1.8rem}
.bk{background:var(--tile);border:1px solid var(--line);border-top:5px solid var(--oxblood);border-radius:6px;padding:1.7rem;box-shadow:0 1px 2px rgba(36,30,24,.05),0 6px 18px -12px rgba(36,30,24,.35);transition:transform .18s ease,box-shadow .18s ease}
.bk:hover{transform:translateY(-3px);box-shadow:0 2px 4px rgba(36,30,24,.06),0 14px 26px -14px rgba(36,30,24,.45)}
.bk h3{font-size:1.15rem;margin-bottom:.25rem}
.bk-free{display:inline-block;background:var(--money);color:#fff;font-size:.6rem;letter-spacing:.12em;padding:.16rem .5rem;border-radius:3px;margin-left:.4rem;vertical-align:.18em}
.bk-sub{font-family:"Oswald",sans-serif;text-transform:uppercase;letter-spacing:.08em;font-size:.78rem;color:var(--steel);margin-bottom:.9rem}
.bk p{font-size:.95rem;color:var(--ink-soft);margin:0}



/* offer block */
.offer{border-top:1px solid var(--line)}
.offer-top{display:flex;gap:2rem;align-items:flex-start;margin-bottom:3rem}
.offer-h{font-size:3rem;line-height:1.05;letter-spacing:-.01em;text-transform:none;margin-bottom:1rem}
.offer-lede{font-size:1.05rem;color:var(--ink-soft);max-width:44ch}

.offer-grid{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:start}
.offer-shot .shot{aspect-ratio:3/2;background:transparent;border:0;padding:0}
.offer-shot .shot img{object-fit:contain}

.offer-detail .meta{font-family:"Oswald",sans-serif;text-transform:uppercase;letter-spacing:.18em;font-size:.66rem;color:var(--oxblood);margin-bottom:.6rem}
.offer-detail h3{font-size:1.9rem;margin-bottom:.6rem}
.offer-detail > p{font-size:1rem;color:var(--ink-soft)}

.price-row{display:flex;align-items:baseline;gap:.9rem;flex-wrap:wrap;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:.7rem 0;margin:.9rem 0}
.p-now{font-family:"Oswald",sans-serif;font-size:2.8rem;line-height:1;color:var(--oxblood)}
.p-was{font-size:1.05rem;color:var(--steel);text-decoration:line-through}
.p-note{font-family:"Oswald",sans-serif;text-transform:uppercase;letter-spacing:.14em;font-size:.66rem;color:var(--steel)}

.stack-head{font-family:"Oswald",sans-serif;text-transform:uppercase;letter-spacing:.16em;font-size:.68rem;color:var(--oxblood);margin-bottom:.25rem}
.stack{list-style:none;padding:0;margin:0}
.stack li{display:flex;justify-content:space-between;gap:1.5rem;padding:.42rem 0;border-bottom:1px solid var(--line);font-size:.95rem;line-height:1.35}
.stack li b{font-weight:700}
.stack li em{font-style:normal;font-family:"Oswald",sans-serif;color:var(--steel);white-space:nowrap}
.stack li em.free s{color:var(--steel);opacity:.7;margin-right:.5rem}
.stack li em.free i{font-style:normal;display:inline-block;background:var(--money);color:#fff;text-transform:uppercase;letter-spacing:.1em;font-size:.8rem;font-weight:600;padding:.2rem .6rem;border-radius:3px}
.stack li .lead-tag{display:inline-block;background:var(--oxblood);color:#fff;font-family:"Oswald",sans-serif;text-transform:uppercase;letter-spacing:.1em;font-size:.56rem;padding:.14rem .45rem;border-radius:2px;margin-right:.5rem;vertical-align:.1em}
/* Green tick per included item, so the block reads as a list of things you
   get rather than a price table. Same green as the FREE pill. The total row
   is not an item, so it carries no tick. */


.stack li.total{padding-left:0}
.stack li.total::before,.stack li.total::after{content:none}
.stack li.total{border-bottom:none;border-top:2px solid var(--ink);margin-top:.2rem;padding-top:.65rem;font-family:"Oswald",sans-serif;text-transform:uppercase;letter-spacing:.06em}
.stack li.total em{color:var(--ink)}


.offer-detail .btn-row{margin-top:.6rem}
.trustline{font-family:"Oswald",sans-serif;text-transform:uppercase;letter-spacing:.16em;font-size:.64rem;color:var(--steel);margin-top:.65rem}
/* The review pill moved into the buy column, directly under the trustline.
   Block level flex so it fills that column and nothing wider: an intrinsic
   width here (max-content/fit-content) raises the grid track's automatic
   minimum and pushes the whole offer grid past the viewport on mobile.
   The base .proof rule already centres its own contents. */
.offer-detail .proof{align-self:auto;display:flex;max-width:100%;margin:1rem 0 0}
/* The column is narrower than the pill's old home, so it can wrap onto two
   rows here. Centre the text block so the wrapped state reads as intended
   rather than avatars centred over left aligned text. */
.offer-detail .proof-text{align-items:center}
.paybar{text-align:center;font-family:"Oswald",sans-serif;text-transform:uppercase;letter-spacing:.14em;font-size:.64rem;color:var(--steel);margin:3rem auto 0;padding-top:1.6rem;border-top:1px solid var(--line);max-width:none}
/* for a buyer who paid but never got the files */
.helpbar{text-align:center;font-size:.8rem;color:var(--steel);margin:.9rem auto 0;max-width:none}

@media (max-width:900px){
  .offer-top{flex-direction:column;gap:1rem;margin-bottom:2rem}
    .offer-h{font-size:2rem}
  .offer-grid{grid-template-columns:1fr;gap:2rem}
  .p-now{font-size:2.2rem}
  .stack li{flex-direction:column;gap:.1rem;padding:.45rem 0}
  .stack li em{align-self:flex-start}
}

/* what is inside */
.inside{position:relative;background:linear-gradient(180deg,#1E1A16 0%,var(--ink) 55%)}
.inside-head{max-width:46ch;margin-bottom:2rem}
.inside-head h2{font-size:2.3rem;line-height:1.08}

.tally{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid #3A3833;border-bottom:1px solid #3A3833;margin-bottom:2.4rem}
.ty{padding:1.1rem 1rem;text-align:center}
.ty + .ty{border-left:1px solid #3A3833}
.ty b{display:block;font-family:"Oswald",sans-serif;font-size:2rem;line-height:1;color:#E8B4B4}
.ty span{display:block;font-family:"Oswald",sans-serif;text-transform:uppercase;letter-spacing:.16em;font-size:.6rem;color:#8E8A82;margin-top:.4rem}

.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem}
.card{position:relative;overflow:hidden;background:#221E1A;border:1px solid #3A3833;border-radius:6px;padding:1.4rem 1.4rem 1.5rem;transition:transform .18s ease,border-color .18s ease,background .18s ease}
.card:hover{transform:translateY(-4px);border-color:var(--oxblood);background:#26211C}
.card-no{position:absolute;top:.2rem;right:.7rem;font-family:"Oswald",sans-serif;font-size:3.4rem;line-height:1;color:transparent;-webkit-text-stroke:1px #4A443C;transition:-webkit-text-stroke-color .18s ease}
.card:hover .card-no{-webkit-text-stroke-color:#8C4A4A}
.card h3{color:#fff;font-size:1.12rem;margin:0 3rem .5rem 0;line-height:1.2}
.chip{display:inline-block;font-family:"Oswald",sans-serif;text-transform:uppercase;letter-spacing:.12em;font-size:.56rem;color:#E8B4B4;border:1px solid #5A3A3A;border-radius:999px;padding:.22rem .6rem;margin-bottom:.7rem}
.card p{font-size:.9rem;color:#A9A296;margin:0;max-width:none}

.inside-cta{margin-top:2.4rem;padding-top:2rem;border-top:1px solid #3A3833;text-align:center}
.inside-cta p{font-size:.86rem;color:#8E8A82;margin:1rem auto 0}
.inside-cta .btn{margin-inline:auto}

@media (max-width:900px){
  .cards{grid-template-columns:repeat(2,1fr)}
  .inside-head h2{font-size:1.8rem}
}
@media (max-width:620px){
  .cards{grid-template-columns:1fr}
  .tally{grid-template-columns:repeat(2,1fr)}
  .ty:nth-child(3){border-left:none}
  .ty:nth-child(n+3){border-top:1px solid #3A3833}
}

/* what you get */
.getlist{display:grid;grid-template-columns:repeat(2,1fr);gap:0 2.5rem}
.gi{display:flex;gap:1rem;align-items:baseline;padding:.95rem .6rem;border-bottom:1px solid var(--line);border-radius:4px;transition:background .15s ease}
.gi:hover{background:var(--tile)}
.gi b{font-family:"Oswald",sans-serif;text-transform:uppercase;letter-spacing:.06em;font-size:.85rem;color:var(--oxblood);flex:none;width:9.5rem}
.gi span{font-size:.98rem;color:var(--ink-soft)}

/* tricks */
.tricks{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem}
.trick{background:var(--paper);border:1px solid var(--line);border-left:6px solid var(--oxblood);border-radius:4px;padding:1.5rem}
.trick p{font-size:.98rem;margin:0;color:var(--ink-soft)}

/* contents */
.contents{display:grid;grid-template-columns:repeat(2,1fr);gap:1.4rem 2.5rem}
.sec{display:flex;gap:1.1rem;align-items:flex-start;padding-bottom:1.3rem;border-bottom:1px solid #3A3833}
.sec-no{flex:none;width:2.9rem;height:2.9rem;border-radius:50%;background:var(--oxblood);color:#fff;display:flex;align-items:center;justify-content:center;font-size:1rem}
.sec p{margin:.25rem 0 0;font-size:.95rem;color:#A5A199;max-width:none}
.sec h4 span{font-family:"Atkinson Hyperlegible",sans-serif;text-transform:none;letter-spacing:0;font-weight:400;color:#8E8A82;font-size:.9rem;margin-left:.4rem}

/* chart */
.chart{aspect-ratio:4/3;max-width:56rem;margin-inline:auto;background:#232320;border:1px solid #3A3833}
.chart img{object-fit:contain}
.caption{font-size:.95rem;color:var(--ink-soft);margin-top:.7rem}

/* spreads */
.spreads{display:grid;grid-template-columns:repeat(3,1fr);gap:1.8rem}
.spreads .shot{aspect-ratio:4/3}

/* math */
.math{background:var(--tile);border:3px solid var(--ink);border-radius:6px;padding:2.2rem}
.math ul{list-style:none;padding:0;margin:0 0 1.3rem}
.math li{display:flex;justify-content:space-between;gap:1.5rem;padding:.85rem 0;border-bottom:1px solid var(--line);font-size:1.05rem}
.math li b{font-family:"Oswald",sans-serif;white-space:nowrap}
.math li.total{border-bottom:none;border-top:3px solid var(--ink);font-size:1.25rem;padding-top:1.1rem}
.math li.total b{color:var(--oxblood);font-size:1.6rem}

/* author */
.about{display:grid;grid-template-columns:.8fr 1.2fr;gap:3.5rem;align-items:start}
.about .shot{aspect-ratio:1/1}
.pull{border-left:6px solid var(--oxblood);padding:.2rem 0 .2rem 1.5rem;margin:1.8rem 0;font-size:1.24rem;line-height:1.4}

/* reviews */
.reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:1.8rem}
.review{background:var(--tile);border:1px solid var(--line);border-radius:6px;padding:1.6rem;box-shadow:0 1px 2px rgba(36,30,24,.05),0 6px 18px -12px rgba(36,30,24,.35);transition:transform .18s ease,box-shadow .18s ease}
.review:hover{transform:translateY(-3px);box-shadow:0 2px 4px rgba(36,30,24,.06),0 14px 26px -14px rgba(36,30,24,.45)}
.review-head{display:flex;align-items:center;gap:.9rem;margin-bottom:1rem}
.face.lg{width:3.4rem;height:3.4rem;margin-right:0;border-color:var(--line)}
.review .stars{margin-bottom:.15rem}
.review b{display:block;color:var(--ink-soft)}
.stars{color:#C9971B;font-size:1.25rem;letter-spacing:.15em;margin-bottom:.7rem}
.review p{font-size:1rem;margin-bottom:.9rem}
.review b{font-family:"Oswald",sans-serif;text-transform:uppercase;font-size:.92rem;letter-spacing:.06em}

/* guarantee */
.guarantee{display:grid;grid-template-columns:auto 1fr;gap:2rem;align-items:center;background:var(--tile);border:3px solid var(--ink);border-radius:6px;padding:2.2rem}
.seal{width:9rem;height:9rem;border-radius:50%;background:var(--oxblood);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;font-family:"Oswald",sans-serif;text-transform:uppercase;line-height:1.05;flex:none}
.seal b{font-size:2.6rem}
.seal span{font-size:.78rem;letter-spacing:.1em}
.guarantee p{margin:0}

/* faq */
.faq{display:grid;grid-template-columns:repeat(2,1fr);gap:1.8rem 2.5rem}
.faq h3{margin-bottom:.3rem}
.faq p{font-size:1rem;margin:0}

.final{text-align:center}
.final h2{font-size:2.7rem}
.final p{margin-inline:auto}
.final .btn-row{justify-content:center}
.final .price-line{justify-content:center}
.final .reassure{color:#A5A199}

.foot{background:#111110;color:#8E8A82;padding:2.5rem 0;font-size:.95rem}
.foot a{color:#CFCCC4}
.foot-in{display:flex;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;align-items:center}

/* guarantee, moved inline directly above the buy button */
.guarantee-inline{display:flex;gap:.75rem;align-items:center;background:var(--tile);border:1px solid var(--line);border-left:4px solid var(--oxblood);border-radius:4px;padding:.55rem .7rem;margin:.15rem 0 .1rem}
.guarantee-inline .seal{flex:none;width:2.5rem;height:2.5rem;border-radius:50%;background:var(--oxblood);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1;text-align:center}
.guarantee-inline .seal b{font-family:"Oswald",sans-serif;font-size:.92rem}
.guarantee-inline .seal span{font-family:"Oswald",sans-serif;text-transform:uppercase;letter-spacing:.04em;font-size:.34rem;margin-top:.08rem}
.guarantee-inline h3{font-size:.88rem;line-height:1.18;margin:0 0 .1rem}
.guarantee-inline p{font-size:.78rem;line-height:1.32;color:var(--ink-soft);margin:0;max-width:none}
.books + .getlist{margin-top:2.2rem}
.closing-cta{text-align:center}
.closing-cta h2{margin-bottom:.2rem}
@media (max-width:960px){
  .guarantee-inline{padding:.7rem .8rem}
  .guarantee-inline p{font-size:.8rem}
}
/* exit intent */
.xi{position:fixed;inset:0;z-index:9998;display:none;align-items:center;justify-content:center;padding:1.2rem;background:rgba(24,24,22,.72)}
.xi.open{display:flex}
.xi-box{position:relative;background:var(--paper);border:2px solid var(--ink);border-radius:6px;max-width:34rem;width:100%;padding:1.9rem 1.8rem 1.7rem;box-shadow:0 24px 60px -18px rgba(0,0,0,.55);display:grid;grid-template-columns:auto 1fr;gap:1.4rem;align-items:start}
.xi-cover{width:8.4rem;flex:none;border:1px solid var(--line);border-radius:3px;background:var(--tile);padding:.4rem}
.xi-cover img{width:100%;display:block;border-radius:2px}
.xi h2{font-family:"Libre Baskerville",Georgia,serif;font-weight:700;text-transform:none;letter-spacing:0;font-size:1.42rem;line-height:1.25;margin:0 0 .55rem}
.xi p{font-size:.96rem;line-height:1.5;color:var(--ink-soft);margin:0 0 .5rem;max-width:none}
.xi .xi-guar{font-family:"Oswald",sans-serif;text-transform:uppercase;letter-spacing:.1em;font-size:.62rem;color:var(--money);margin:0 0 1rem}
.xi .btn{margin-top:0;width:100%}
.xi-close{position:absolute;top:.4rem;right:.5rem;background:none;border:0;font-size:1.6rem;line-height:1;color:var(--steel);cursor:pointer;padding:.35rem .55rem;min-width:44px;min-height:44px}
.xi-close:hover{color:var(--oxblood)}
@media (max-width:640px){
  .xi-box{grid-template-columns:1fr;text-align:center;padding:1.6rem 1.2rem 1.3rem;gap:1rem}
  .xi-cover{width:6.6rem;margin:0 auto}
  .xi h2{font-size:1.22rem}
}
@media (prefers-reduced-motion:reduce){.xi-box{box-shadow:none}}
@media (max-width:820px){
  .hero-in{grid-template-columns:1fr;grid-template-areas:"img" "text";row-gap:1.8rem;text-align:center}
  .hero-media{max-width:none}
  .hero-text{align-items:center}
  .hero-stats{max-width:none}
  .hs{text-align:center}
  .proof{align-self:center}
  .hero-cover{aspect-ratio:4/3}
  .assure{align-items:center}
}
@media (max-width:960px){
  html{font-size:20px}
  h1{font-size:2.5rem}
  .final h2{font-size:2rem}
  .about,.faq,.contents{grid-template-columns:1fr;gap:2.2rem}
  .spreads,.reviews,.tricks,.books,.getlist{grid-template-columns:1fr;gap:1.6rem}
  .gi{flex-direction:column;gap:.25rem}
  .gi b{width:auto}
  .stats{grid-template-columns:repeat(2,1fr)}
  .hero h1{max-width:none}
  .hero h1.long{font-size:1.85rem;max-width:none}
  .best{font-size:1.05rem}
  .promise{font-size:1.1rem;max-width:none}
  .proof{padding:.7rem 1.1rem;gap:.8rem}
  .proof-text{align-items:center}
  .about .shot{aspect-ratio:16/10}
  .guarantee{grid-template-columns:1fr;text-align:center;justify-items:center}
  .band,.hero{padding:2.8rem 0}
}
@media (max-width:560px){
  html{font-size:19px}
  .btn{width:100%}
  .stats{grid-template-columns:1fr}
  .statsbar .hs{padding:0 .35rem}
  .statsbar .hs + .hs{padding-left:.35rem}
  .statsbar .hs b{font-size:1.25rem}
  .statsbar .hs span{font-size:.5rem;letter-spacing:.06em}
}

/* ---------- order-block ticks, structural ----------
   The tick used to be an absolutely positioned ::before with the space held
   open by padding-left. Every mobile rule that set `padding` as a shorthand
   silently reset that padding-left to 0, so the disc landed on top of the
   first characters. It is now a real grid column: it reserves its own width
   and cannot overlap text at any viewport.

   col 1 = tick, col 2 = text, col 3 = price. No absolute positioning, no
   negative margins, no text-indent. The disc carries the check as a
   background image so the whole mark is one grid item. */
.stack li{
  display:grid;
  grid-template-columns:1.1rem minmax(0,1fr) auto;
  column-gap:.75rem;row-gap:.15rem;
  align-items:start;
  padding:.42rem 0;
  border-bottom:1px solid var(--line);
  font-size:.95rem;line-height:1.35;
}
.stack li::before{
  content:"";
  grid-column:1;grid-row:1;position:static;
  width:1.1rem;height:1.1rem;border-radius:50%;
  background-color:var(--money);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 6.2l2 2 4-4.4' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:center;background-size:.72rem .72rem;
  margin-top:.16rem;            /* optical: level with the first text line */
}
.stack li::after{content:none}   /* the old separate check mark */
.stack li > span{grid-column:2;grid-row:1;min-width:0}
.stack li > em{grid-column:3;grid-row:1;justify-self:end}
/* The total is not an item: no tick, text and figure only. */
.stack li.total{grid-template-columns:minmax(0,1fr) auto;padding-left:0}
.stack li.total::before{content:none}
.stack li.total > span{grid-column:1}
.stack li.total > em{grid-column:2}

/* Narrow: the price drops under the text for EVERY row, aligned to the text
   column so the tick column stays clear. Consistent across all rows. */
@media (max-width:560px){
  .stack li{grid-template-columns:1.1rem minmax(0,1fr);}
  .stack li > em{grid-column:2;grid-row:2;justify-self:end}
  .stack li.total{grid-template-columns:minmax(0,1fr)}
  .stack li.total > em{grid-column:1;grid-row:2;justify-self:end}
}

/* ---------- per-review star ratings ----------
   Partial fills via a gradient clipped to the glyphs, so a rating between
   whole stars renders honestly. letter-spacing is zeroed on these so each
   star is exactly one fifth of the width and --pct maps 1:1 to the rating
   (4.5 -> 90%, 4.9 -> 98%). Aggregate pills elsewhere are untouched. */
.review .stars{
  letter-spacing:0;
  background-image:linear-gradient(90deg,#C9971B var(--pct,100%),#D9D0B6 var(--pct,100%));
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
}

/* ---------- drop-downs: FAQ and the contents list ----------
   Native <details> so a question opens on click with no JS and stays
   keyboard and screen-reader accessible. */
.drop{border-top:1px solid var(--line);margin:0}
.drop:last-of-type{border-bottom:1px solid var(--line)}
.drop > summary{
  list-style:none;cursor:pointer;padding:.9rem 2rem .9rem 0;position:relative;
  font-family:"Oswald",sans-serif;text-transform:uppercase;letter-spacing:.04em;
  font-size:.95rem;color:var(--ink);
}
.drop > summary::-webkit-details-marker{display:none}
.drop > summary::after{
  content:"";position:absolute;right:.35rem;top:1.25rem;width:.6rem;height:.6rem;
  border-right:2px solid var(--oxblood);border-bottom:2px solid var(--oxblood);
  transform:rotate(45deg);transition:transform .18s ease;
}
.drop[open] > summary::after{transform:rotate(-135deg)}
.drop-body{padding:0 0 1rem}
.drop-body p{font-size:.95rem;line-height:1.5;color:var(--ink-soft);margin:0 0 .7rem;max-width:none}
.drop-body h3{font-size:1rem;margin:.9rem 0 .25rem}
.tag-main,.tag-free{
  font-family:"Oswald",sans-serif;text-transform:uppercase;letter-spacing:.1em;
  font-size:.56rem;padding:.14rem .45rem;border-radius:2px;margin-left:.4rem;vertical-align:.15em;color:#fff;
}
.tag-main{background:var(--oxblood)}
.tag-free{background:var(--money)}
@media (prefers-reduced-motion:reduce){.drop > summary::after{transition:none}}

.origin-strip{padding:2.2rem 0 0}
.origin-strip p{font-family:"Lora",Georgia,serif;font-size:1.02rem;line-height:1.55;color:var(--ink-soft);margin:0 0 .5rem;max-width:52ch}

/* ---------- guarantee seal ----------
   An insignia, not a caption: solid shield, heavy border, no gradient,
   no glow, no shine. Same mark and same position on all three sites. */
.seal-badge{
  display:inline-flex;align-items:center;gap:.85rem;
  border:3px solid var(--oxblood);background:var(--tile);
  padding:.75rem 1.15rem;border-radius:2px;max-width:31rem;
}
.seal-shield{width:2.5rem;height:3rem;flex:none;fill:var(--oxblood)}
.seal-shield .tick{stroke:var(--tile)}
.seal-text b{display:block;font-family:"Oswald",sans-serif;text-transform:uppercase;letter-spacing:.06em;
  font-size:.95rem;line-height:1.1;color:var(--oxblood)}
.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}
}

/* ---------- review rating: 4.5 stars plus the number ---------- */
.rating{display:inline-flex;align-items:center;gap:.42rem}
.rating .stars{display:inline-block;letter-spacing:0;
  background-image:linear-gradient(90deg,#C9971B var(--pct,90%),#D9D0B6 var(--pct,90%));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.rating-num{font-family:"Oswald",sans-serif;font-size:.82rem;letter-spacing:.04em;color:var(--ink)}

/* ---------- payment marks (shared treatment) ---------- */
.lockline{font-family:"Oswald",sans-serif;text-transform:uppercase;letter-spacing:.12em;font-size:.62rem;
  color:var(--steel);text-align:center;margin:1rem 0 .5rem}
.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;min-width:2.9rem;height:1.7rem;
  padding:0 .4rem;background:#fff;border:1px solid var(--line);border-radius:3px}
.pay-mark svg{height:1.05rem;width:auto;display:block}
.pay-label{font-family:"Oswald",sans-serif;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}

/* ---------- guarantee seal, tightened ---------- */
.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}
}
/* order-block guarantee panels, tightened to match */
.guarantee-inline,.guar-block{padding:.55rem .7rem;gap:.6rem}
.guarantee-inline h3,.guar-block h3{font-size:.82rem}
.guarantee-inline p,.guar-block p{font-size:.75rem;line-height:1.3}

/* ==================================================================
   Round four corrections. Appended last so these win the cascade.
   ================================================================== */

/* 1. Decorative rules removed. The hairline that ran out to the right of
   every eyebrow label, and the divider rules between blocks, carried no
   information. White space separates the sections instead. */
.eyebrow::after,.band.ink .eyebrow::after{content:none;display:none}
.eyebrow{gap:0}
.buy-block{border-top:0;padding-top:0}
.paybar{border-top:0}

/* 2. Proof pill reduced to a compact badge: smaller faces, tighter padding,
   less height. Same size on all three sites. */
.proof,.proofpill{gap:.5rem;padding:.3rem .75rem .3rem .4rem;border-radius:999px}
.face,.proofpill .face,.proof-faces img,.proof .face{width:1.75rem;height:1.75rem;border-width:2px}
.face.lg{width:1.95rem;height:1.95rem;margin-right:0}
.proof-faces img,.proofpill .face,.proof .face{margin-right:-.5rem}
.proof-faces img:last-child,.proofpill .face:last-child,.proof .face:last-child{margin-right:0}
.proof-stars,.proof-text .stars,.proofpill .rating .stars,.proof .rating .stars{font-size:.85rem}
.proof-line,.proof-text span,.proof-text .proof-line{font-size:.75rem;line-height:1.25}
.rating-num{font-size:.75rem}

/* 3. The lock line and the card marks are one row, on one baseline, rather
   than two centred blocks at different heights. */
.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}

/* 4. The guarantee seal sits clear of the hero buttons at every width.
   It was flush against them, so a wrapped button clipped it. */
.hero .btn-row.top-cta{margin-bottom:0}
.assure,.top-assure,.hero .assure,.hero .top-assure{margin-top:1.15rem;position:static;clear:both}
.seal-badge{position:static;float:none;transform:none;margin:0}
@media (max-width:768px){
  .hero .btn-row.top-cta{margin-top:1.2rem}
  .assure,.top-assure,.hero .assure,.hero .top-assure{margin-top:1rem}
}

/* ------------------------------------------------------------------
   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 colour 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,.proof-text .stars{
  display:inline-block;letter-spacing:0;
  color:var(--star-gold,#C9971B);
  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,#C9971B) 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}
.reviews .face.lg{
  width:2.45rem;height:2.45rem;flex:0 0 2.45rem;margin:0;border:2px solid var(--line);
  border-radius:50%;overflow:hidden;background:#D8D5CE
}
.reviews .face.lg img{width:100%;height:100%;display:block;object-fit:cover;object-position:center}
.reviews .review-priority-1{order:-3}
.reviews .review-priority-2{order:-2}
.reviews .review-priority-3{order:-1}
@media (max-width:560px){
  .reviews .face.lg{width:2.25rem;height:2.25rem;flex-basis:2.25rem}
}

/* ==================================================================
   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,.proof,.proofpill,.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}
  .proof,.proofpill{max-width:100%;flex-wrap:nowrap}
  .proof-text,.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}
  .quote .q-head .face{width:1.35rem;height:1.35rem;margin-right:-.38rem}
}

/* ==================================================================
   Stats bar on a phone. The three columns were `1fr`, which floors at
   the min-content width of the longest value ("5 generations",
   "53 years"), so the third stat ran outside its cell and off the
   card. minmax(0,1fr) lets the cells shrink and the value wrap.
   ================================================================== */
@media (max-width:560px){
  .statsbar .hero-stats,.hero-stats{grid-template-columns:repeat(3,minmax(0,1fr))}
  .hs{min-width:0;padding:0 .3rem;text-align:center}
  .hs b{font-size:1.05rem;line-height:1.1;overflow-wrap:break-word;hyphens:none;display:block}
  .hs span{font-size:.48rem;letter-spacing:.04em;line-height:1.25;display:block;overflow-wrap:break-word}
}
@media (max-width:400px){
  .hs b{font-size:.95rem}
  .hs span{font-size:.44rem}
  .hs{padding:0 .22rem}
}

/* The value now fits its cell instead of being hyphen-free broken
   mid-word ("generati / ons"): words stay whole and the type steps
   down at each width. */
@media (max-width:560px){
  .hs b{font-size:.92rem;overflow-wrap:normal;word-break:normal;line-height:1.15}
  .hs span{overflow-wrap:normal;word-break:normal}
}
@media (max-width:400px){
  .hs b{font-size:.82rem}
  .hs span{font-size:.42rem}
}

/* ==================================================================
   The hero guarantee goes back to a pill. It had grown into a full
   bordered block with a heading and a paragraph; this is the compact
   rounded badge it was before, sitting the same way the proof pill
   below it does. It is now the only guarantee on the page.
   ================================================================== */
.seal-badge{
  display:inline-flex;align-items:center;gap:.55rem;
  padding:.34rem .95rem .34rem .55rem;
  border:1px solid var(--line);border-radius:999px;
  background:var(--tile);box-shadow:none;max-width:100%;
  align-self:flex-start}
.seal-badge .seal-shield{width:1.1rem;height:1.35rem;flex:none}
.seal-badge .seal-text{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.05rem .4rem;min-width:0}
.seal-badge b{
  font-size:.7rem;letter-spacing:.07em;text-transform:uppercase;line-height:1.3}
.seal-badge .seal-text > span{
  display:inline;font-size:.8rem;line-height:1.35;margin:0}
@media (max-width:560px){
  .seal-badge{padding:.3rem .8rem .3rem .5rem;gap:.45rem}
  .seal-badge b{font-size:.66rem}
  .seal-badge .seal-text > span{font-size:.76rem}
}

/* The offer-block guarantee is the same pill as the hero one, sitting
   under "Pay once - Yours forever" and above the proof pill, centred
   with the rest of that column. */
.offer-seal{margin:.7rem auto 0;align-self:center}
.offer-detail .offer-seal,.buy-left .offer-seal{align-self:center}
@media (max-width:560px){.offer-seal{margin-top:.55rem}}

/* ------------------------------------------------------------------
   The chart shows the anatomy; this says what the reader will be able
   to do with it. Each line is a capability tied to a saving that is
   itemised in the arithmetic further down, so nothing here is a claim
   the page does not already back.
   ------------------------------------------------------------------ */
.cando{max-width:62ch;margin:1.6rem auto 0}
.cando h3{
  font-family:"Oswald",sans-serif;text-transform:uppercase;letter-spacing:.09em;
  font-size:.78rem;color:var(--steel);margin:0 0 .8rem;text-align:center}
.cando ul{list-style:none;margin:0;padding:0}
.cando li{
  display:grid;grid-template-columns:1.15rem minmax(0,1fr);column-gap:.75rem;
  align-items:start;padding:.6rem 0;border-bottom:1px solid var(--line);
  font-size:.95rem;line-height:1.5}
.cando li:last-child{border-bottom:0}
.cando li::before{
  content:"";grid-column:1;width:1.15rem;height:1.15rem;border-radius:50%;
  margin-top:.18rem;background-color:#2F6B3A;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size:.76rem .76rem;background-repeat:no-repeat;background-position:center}
.cando li > span{grid-column:2;min-width:0}
.cando li b{color:var(--ink)}
.hero-cando{max-width:42ch;margin:.35rem 0 0}
.hero-cando li{font-size:.96rem;padding:.52rem 0;line-height:1.42}
.early-benefits{padding:.25rem 0 1.35rem}
.early-benefits .cando{max-width:62ch;margin:0}
.early-benefits .cando h3{margin-bottom:.55rem;text-align:left;padding-left:0}
.early-benefits .cando ul{display:grid;grid-template-columns:1fr}
.early-benefits .cando li{font-size:.92rem;padding:.65rem 0}
@media (max-width:560px){
  .cando{margin-top:1.2rem}
  .cando li{font-size:.9rem;padding:.5rem 0;column-gap:.6rem}
  .hero-cando{margin-top:.35rem}
  .hero-cando li{display:block;text-align:left}
  .hero-cando li::before{
    display:inline-block;vertical-align:-.2rem;margin:.05rem .45rem 0 0
  }
  .hero-cando li > span{display:inline}
  .early-benefits{padding:.15rem 0 1rem}
  .early-benefits .cando{margin:0}
  .early-benefits .cando h3{padding-left:0}
  .early-benefits .cando ul{grid-template-columns:1fr}
  .early-benefits .cando li{display:block;text-align:left;font-size:.86rem}
  .early-benefits .cando li::before{
    display:inline-block;vertical-align:-.2rem;margin:.05rem .45rem 0 0
  }
  .early-benefits .cando li > span{display:inline}
}

/* ------------------------------------------------------------------
   Hero bridge line. Sits between the h1 (Libre Baskerville, 2.35rem)
   and the lede (.best, Lora 1.06rem). Set in the reading serif at
   1.35rem so it is clearly subordinate to the headline but ahead of
   body copy, in a muted ink so it supports the h1 rather than
   competing with it. Margin is tight to the h1 and normal below, so
   the headline and this line read as one block.
   ------------------------------------------------------------------ */
.hero-sub{
  font-family:"Lora",Georgia,serif;
  font-weight:400;
  font-size:1.35rem;
  line-height:1.45;
  color:#5A564E;                 /* between --ink-soft and --steel */
  max-width:44ch;
  margin:.55rem 0 0;
}
.hero-sub + .best{margin-top:1.05rem}

@media (max-width:900px){
  .hero-sub{font-size:1.2rem;max-width:none;margin-top:.5rem}
}
@media (max-width:560px){
  .hero-sub{font-size:1.1rem;line-height:1.42}
  .hero-sub + .best{margin-top:.9rem}
}

/* ------------------------------------------------------------------
   Hero photo is now a 3:4 portrait crop, so the frame follows it.
   The media column narrows to suit a portrait image; the frame, its
   hairline border, padding and rounded corners are unchanged.
   ------------------------------------------------------------------ */
.hero .hero-cover{aspect-ratio:4/3}
.hero-media{max-width:34rem}
@media (max-width:900px){
  .hero-media{max-width:28rem;margin-inline:auto}
}
@media (max-width:560px){
  .hero-media{max-width:22rem}
}

/* ------------------------------------------------------------------
   Hero balance. The merged headline is roughly twice the length of the
   old one, so at 2.35rem it ran to five ragged lines and pushed the
   text column out of step with the 4:3 photo beside it. Size and
   measure are tuned for the longer line, and the two columns are
   aligned on their tops so the block reads level.
   ------------------------------------------------------------------ */
.hero h1.long{
  font-size:2.05rem;
  line-height:1.18;
  letter-spacing:-.012em;
  max-width:15ch;              /* keeps it to four tidy lines */
  text-wrap:balance;           /* evens the ragged edge where supported */
  margin-bottom:0;
}
.hero .hero-sub{max-width:34ch}
.hero{align-items:start}
.hero-media{align-self:start}

@media (max-width:1100px){
  .hero h1.long{font-size:1.9rem;max-width:16ch}
}
@media (max-width:900px){
  .hero h1.long{font-size:1.75rem;max-width:none;text-wrap:pretty}
  .hero .hero-sub{max-width:none}
}
@media (max-width:560px){
  .hero h1.long{font-size:1.55rem;line-height:1.22}
}

/* Hero photo enlarged. The media column takes more of the row and the
   text column gives some back, so the photo carries the section. */
.hero-media{max-width:44rem}
.hero .hero-media{width:100%}
@media (max-width:900px){
  .hero-media{max-width:36rem;margin-inline:auto}
}
@media (max-width:560px){
  .hero-media{max-width:none}
}

/* The hero grid lives on .hero-in (was 58fr text / 42fr image). Giving
   the photo the larger share and lifting its cap so it actually fills
   the wider column. */
@media (min-width:821px){
  .hero-in{grid-template-columns:46fr 54fr;column-gap:2.4rem}
  .hero-media{max-width:none;justify-self:stretch}
}

/* The savings figure is one unit, so it never breaks across lines.
   "$1,000" was landing on one line and "to $2,000" on the next, which
   makes the reader assemble the number instead of just reading it. */
.hero h1 .money{white-space:nowrap}

/* ------------------------------------------------------------------
   Total value row aligned to the item rows above it. The items are a
   three column grid (tick / name / price) but the total was a two
   column grid, so its figure sat in a different column and did not
   line up with the prices. It now uses the same template, with the
   label spanning the tick and name columns.
   ------------------------------------------------------------------ */
.stack li.total{
  grid-template-columns:1.1rem minmax(0,1fr) auto;
  column-gap:.75rem;
  align-items:baseline;
}
.stack li.total > span{grid-column:1 / 3}
.stack li.total > em{grid-column:3;grid-row:1;justify-self:end;white-space:nowrap}
.stack li.total em s{opacity:.55;margin-right:.4rem;font-weight:400}
@media (max-width:560px){
  .stack li.total{grid-template-columns:1rem minmax(0,1fr) auto}
  .stack li.total > em{grid-column:3;grid-row:1}
}


/* ---------- guarantee seal: larger, with a soft glow ----------
   This overrides the original "no glow, no shine" insignia above, at the
   owner's request. The halo is the seal's own accent rather than a generic
   white shine, so it reads as emphasis and not decoration. It breathes slowly
   instead of flashing, and it holds still for anyone whose system asks for
   reduced motion. max-width is capped against the container so the larger
   badge can never overflow the narrow checkout column. */
.seal-badge{
  gap:1rem;padding:1rem 1.35rem;
  max-width:min(34rem,100%);
  border-radius:4px;
  animation:sealGlow 3.4s ease-in-out infinite;
}
.seal-shield{width:2.9rem;height:3.5rem}
.seal-text b{font-size:1.06rem}
.seal-text > span{font-size:.88rem;margin-top:.3rem}
@keyframes sealGlow{
  0%,100%{box-shadow:0 0 7px rgba(140,29,29,.20)}
  50%    {box-shadow:0 0 20px rgba(140,29,29,.44),0 0 36px rgba(140,29,29,.14)}
}
@media (prefers-reduced-motion:reduce){
  .seal-badge{animation:none;box-shadow:0 0 14px rgba(140,29,29,.30)}
}
@media (max-width:560px){
  .seal-badge{gap:.75rem;padding:.8rem 1rem}
  .seal-shield{width:2.35rem;height:2.85rem}
  .seal-text b{font-size:.95rem}
  .seal-text > span{font-size:.8rem}
}

/* Italian content only. Reference layout and responsive rules above are unmodified. */
[hidden]{display:none!important}
.italian-wordmark{position:absolute;left:max(22px,2.7vw);top:50%;transform:translateY(-50%);font:700 41px/1 "Oswald",sans-serif;letter-spacing:.14em;color:var(--paper);text-transform:uppercase;text-shadow:0 2px 6px #38190f}
@media(max-width:767.98px){.italian-wordmark{font-size:25px}}
.sample-label{display:block;font-size:.65rem;line-height:1.45;color:var(--steel);margin-top:.7rem}
.review .face{display:grid;place-items:center;font:600 1rem "Oswald",sans-serif;color:var(--steel)}
.source-note{font-size:.7rem;line-height:1.5;color:var(--steel);margin-top:1rem;max-width:none}

/* Compact exit offer. Keep comfortable sizing independent of the page's large type. */
.xi{padding:20px;background:rgba(24,24,22,.55);backdrop-filter:blur(4px)}
.xi-box{width:100%;max-width:680px;max-height:calc(100dvh - 40px);overflow:auto;grid-template-columns:160px minmax(0,1fr);align-items:center;gap:30px;padding:42px 32px 30px;border:1px solid #ded5c1;border-radius:16px;background:#fcf9f1;box-shadow:0 24px 90px #18181640;text-align:left}
.xi-cover{width:160px;padding:0;background:none;border:0;filter:drop-shadow(4px 8px 8px #18181626)}
.xi-cover img{width:100%;height:auto;aspect-ratio:2/3;object-fit:contain;border-radius:3px}
.xi .xi-eyebrow{font:600 11px/1.4 Verdana,sans-serif;letter-spacing:1.3px;text-transform:uppercase;color:var(--money);margin:0 0 10px}
.xi h2{font-size:28px;line-height:1.2;margin:0 0 14px}
.xi p{font-size:15px;line-height:1.55;margin:0 0 14px}
.xi .xi-details{font-size:13px;color:var(--ink-soft);margin-bottom:18px}
.xi .btn{font:700 16px/1.3 "Atkinson Hyperlegible",Verdana,sans-serif;text-transform:none;letter-spacing:0;min-height:50px;padding:12px 16px;border-width:1px;border-radius:7px}
.xi .xi-guar{font:400 11px/1.5 Verdana,sans-serif;text-transform:none;letter-spacing:0;text-align:center;color:var(--ink-soft);margin:10px 0 4px}
.xi-close{top:8px;right:8px;width:40px;height:40px;min-width:40px;min-height:40px;padding:0;font:400 28px/1 Verdana,sans-serif;border-radius:50%;color:#665e53}
.xi-close:hover{background:#eee7d9}
.xi-close:focus-visible,.xi-dismiss:focus-visible{outline:2px solid var(--steel);outline-offset:2px}
.xi-dismiss{display:block;margin:0 auto;min-height:44px;border:0;background:none;color:var(--ink-soft);text-decoration:underline;text-underline-offset:3px;font:400 13px/1.4 Verdana,sans-serif;cursor:pointer}
@media(max-width:560px){.xi-box{grid-template-columns:1fr;padding:40px 24px 20px;gap:18px;text-align:center;max-width:380px}.xi-cover{width:90px;margin:auto}.xi h2{font-size:25px}}

/* Current storefront: show the product and purchase choice before the long explanation. */
.hero{padding:2rem 0}
.hero-in{grid-template-columns:minmax(0,1fr) 300px;grid-template-areas:"text img";align-items:center;gap:2rem}
.hero .hero-media{max-width:300px;justify-self:center}
.hero .hero-frame{padding:0;background:transparent;border:0;box-shadow:none}
.hero .shot{aspect-ratio:2/3;max-width:300px;background:transparent}
.hero .shot img{object-fit:contain;max-height:450px}
.hero-product{font-size:.85rem;font-weight:700;margin:0 0 .6rem}
.hero h1.long{font-size:clamp(1.7rem,3.6vw,2.6rem);line-height:1.12;margin:0 0 .8rem}
.hero .hero-sub{font-family:inherit;font-size:1rem;line-height:1.5;margin:0 0 1rem}
.hero-price{font-size:1.05rem;font-weight:700;margin:0}
.hero .top-cta{margin-top:.7rem}
.hero-delivery{font-size:.78rem;line-height:1.4;margin:.7rem 0 0}
#book-preview .chart{max-width:580px;margin-inline:auto;aspect-ratio:auto}
#book-preview .chart img{height:auto;object-fit:contain}
.mobile-purchase{display:none}
@media(max-width:820px){
 .masthead{height:64px;min-height:64px;padding:0 4vw}
 .hero{padding:1.1rem 0 1.4rem}
 .hero-in{grid-template-columns:1fr;grid-template-areas:"text" "img";gap:1rem;text-align:left}
 .hero h1.long{font-size:1.5rem;line-height:1.15}
 .hero .hero-sub{font-size:.9rem;line-height:1.45}
 .hero .hero-media{max-width:150px}
 .hero .shot{max-width:150px;max-height:225px}
 .hero .shot img{max-height:225px}
 .hero .top-cta{display:block}
 .hero .top-cta .btn{width:100%;min-height:54px;padding:.6rem;font-size:1rem}
 .offer-grid{gap:1rem}
 .offer-shot{display:none}
 .offer-detail .stack{margin-top:1rem}
 body{padding-bottom:86px}
 .mobile-purchase{position:fixed;inset:auto 0 0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:.6rem;padding:10px 4vw calc(10px + env(safe-area-inset-bottom));background:var(--tile);border-top:1px solid var(--line);box-shadow:0 -2px 12px #0001}
 .mobile-purchase>span{max-width:48%;font-size:12px;line-height:1.3}
 .mobile-purchase small{display:block;font-size:12px;margin-top:3px}
 .mobile-purchase .btn{min-height:48px;padding:.5rem .65rem;font-size:16px;white-space:nowrap}
}
.hero .product-gallery{max-width:360px;display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:center}
.sample-thumbnails{display:grid;gap:10px;min-width:0}
.sample-thumbnails a{display:grid;grid-template-columns:65px 1fr;gap:8px;align-items:center;font-size:13px;line-height:1.25;text-decoration:none}
.sample-thumbnails img{width:65px;height:92px;object-fit:contain;border:1px solid var(--line)}
.sample-pages{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:1.5rem 0}
.sample-pages figure{margin:0;scroll-margin-top:20px}
.sample-pages img{width:100%;height:auto;display:block;border:1px solid var(--line)}
.sample-pages figcaption{font-size:16px;line-height:1.4;margin-top:10px}
.sample-pages small{font-size:13px;color:var(--ink-soft)}
@media(max-width:820px){
 .hero-text{align-items:flex-start}
 .hero .product-gallery{max-width:360px;grid-template-columns:150px 1fr;width:100%}
 .sample-pages{grid-template-columns:1fr;max-width:500px;margin-inline:auto}
 .sample-thumbnails a{font-size:12px}
}
/* Illustrated edition: keep cover readable beside the page previews. */
@media(min-width:821px){
 .hero-in{grid-template-columns:minmax(0,1fr) minmax(340px,460px)}
 .hero .product-gallery{max-width:460px;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:18px}
 .hero .hero-cover{width:100%;max-width:none}
 .hero .hero-cover img{width:100%;height:auto;max-height:none}
 .sample-thumbnails a{grid-template-columns:76px 1fr}
 .sample-thumbnails img{width:76px;height:108px}
}

/* Large switchable book previews. */
.hero .product-gallery{display:block;width:100%;max-width:560px}
.hero-in{grid-template-columns:minmax(0,1fr) minmax(420px,560px)}
.gallery-enlarge{display:block;width:100%;padding:0;border:0;background:transparent;cursor:zoom-in}
.gallery-main{display:block;width:100%;height:auto;max-height:690px;object-fit:contain}
.gallery-thumbnails{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:18px}
.gallery-thumbnails button{padding:8px;border:2px solid transparent;background:transparent;cursor:pointer;color:inherit;font:inherit;min-width:0}
.gallery-thumbnails button[aria-pressed="true"]{border-color:var(--money);background:#ffffff60}
.gallery-thumbnails img{display:block;width:100%;height:auto;aspect-ratio:1/1.414;object-fit:contain}
.gallery-thumbnails span{display:block;font-size:14px;line-height:1.25;margin-top:8px}
.gallery-thumbnails button:focus-visible,.gallery-enlarge:focus-visible{outline:3px solid var(--money);outline-offset:4px}
.offer-shot{display:block;width:100%}
.offer-shot .shot{width:100%;max-width:560px;aspect-ratio:auto;margin:0 auto}
.offer-shot .shot img{width:100%;height:auto;max-height:none;object-fit:contain;cursor:zoom-in}
.book-lightbox{width:min(96vw,1100px);max-width:96vw;max-height:96dvh;padding:56px 16px 16px;border:0;background:#fcf9f1;overflow:auto}
.book-lightbox::backdrop{background:#000c}
.book-lightbox img{display:block;width:auto;max-width:100%;height:auto;max-height:none;margin:auto}
.book-lightbox-close{position:sticky;top:0;float:right;margin-top:-44px;min-width:44px;min-height:44px;font-size:28px;cursor:pointer}
@media(max-width:820px){.hero-in{grid-template-columns:1fr}.hero .product-gallery{max-width:560px;width:100%}.gallery-main{max-height:none}.gallery-thumbnails{gap:6px}.gallery-thumbnails button{padding:4px}.gallery-thumbnails span{font-size:12px}.offer-shot .shot{max-width:500px}}

/* Keep hero copy aligned with the top of the gallery. */
.hero .hero-text{align-self:start}

/* Follow the offer copy within its section, desktop only. */
@media(min-width:821px){.offer-grid>.offer-shot{position:sticky;top:24px;align-self:start}}

/* Compact gallery navigation keeps previews within the cover height. */
@media(min-width:821px){
 .hero .product-gallery{display:grid;grid-template-columns:minmax(0,1fr) 88px;gap:14px;align-items:start}
 .gallery-thumbnails{grid-template-columns:1fr;gap:10px;margin:0}
 .gallery-thumbnails button{padding:4px}
 .gallery-thumbnails img{height:96px;width:100%;object-fit:contain}
 .gallery-thumbnails span{font-size:11px;line-height:1.2;margin-top:4px}
}
@media(max-width:820px){
 .gallery-thumbnails{grid-template-columns:repeat(3,minmax(0,1fr));margin:10px auto 0;max-width:300px}
 .gallery-thumbnails img{height:74px;width:100%;object-fit:contain}
 .gallery-thumbnails span{font-size:11px;margin-top:4px}
}

/* Center the two purchase actions below the hero. */
.offer-detail>.btn-row,[data-analytics-cta="sample-pages-purchase"]{justify-content:center;text-align:center}

/* 2026-09-24: host face first, so visitors from a reel land on the same person. */
.persona-intro{display:flex;align-items:center;gap:14px;margin:0 0 18px}
.persona-intro img{width:72px;height:72px;border-radius:50%;object-fit:cover;object-position:50% 30%;border:3px solid #fff;box-shadow:0 2px 10px rgba(0,0,0,.18);flex:none}
.persona-intro b{display:block;font-size:1.2rem;line-height:1.25}
.persona-intro span{display:block;font-size:1rem;line-height:1.3;opacity:.8}
/* Everything-you-get image under the headline (2026-09-24). */
.bundle-hero{display:block;width:100%;height:auto;border-radius:14px;margin:6px 0 18px;box-shadow:0 6px 24px rgba(0,0,0,.12)}
.words-line{margin:0 0 14px;line-height:1.5}
/* Hero shows only the avatar's everything-you-get image (2026-09-24). */
.hero .product-gallery{display:block!important;width:100%;max-width:620px}
.hero .hero-frame .gallery-main{border-radius:14px;box-shadow:0 6px 24px rgba(0,0,0,.12);max-height:none}
/* The arithmetic (2026-09-24). */
.math .math-h{font-family:"Oswald",sans-serif;text-transform:uppercase;font-size:clamp(2rem,5vw,3.2rem);line-height:1.05;margin:.3rem 0 1rem}
.math .math-lede{font-size:1.15rem;margin:0 0 1.4rem}
.math-card{border:3px solid var(--ink,#1c1c1c);border-radius:6px;padding:1.2rem 1.8rem;background:#fffaf1}
.math-row{display:flex;justify-content:space-between;align-items:baseline;gap:1.5rem;padding:1.05rem 0;border-bottom:1px solid var(--line,#e4d9c4);font-size:1.1rem}
.math-row b{font-family:"Oswald",sans-serif;font-size:1.45rem;white-space:nowrap}
.math-total b{color:var(--money,#22703a)}
.math-note{margin:1.1rem 0 .3rem;font-size:1.02rem;line-height:1.6}
@media (max-width:640px){.math-card{padding:.6rem 1rem}.math-row{flex-direction:column;gap:.2rem}}
/* Outline secondary button. */
.btn.ghost{background:transparent;color:var(--ink,#1c1c1c);border-color:var(--ink,#1c1c1c)}
.btn.ghost:hover{background:var(--ink,#1c1c1c);color:#fff}
/* Italian flag badge that pops onto buttons on hover. */
.btn::after{content:"";position:absolute;top:-16px;right:-16px;width:38px;height:38px;border-radius:50%;
  background:linear-gradient(90deg,#009246 0 33.3%,#fff 33.3% 66.6%,#ce2b37 66.6%);border:3px solid #fff;
  box-shadow:0 3px 10px rgba(0,0,0,.25);transform:scale(0) rotate(-40deg);transition:transform .25s cubic-bezier(.34,1.56,.64,1);pointer-events:none}
.btn:hover::after,.btn:focus-visible::after{transform:scale(1) rotate(-12deg)}
@media (prefers-reduced-motion:reduce){.btn::after{transition:none}}
.band.math{border:0!important;background:transparent!important}