:root{
  --paper:#F2EBD4;
  --tile:#F9F6EC;
  --ink:#181816;
  --ink-soft:#403E3A;
  --oxblood:#8C1D1D;
  --steel:#44525E;
  --money:#22703A;
  --line:#D6D4CE;
}
*{margin:0;padding:0;box-sizing:border-box}
html{font-size:19px}
body{background:var(--paper);color:var(--ink);font-family:"Atkinson Hyperlegible",Verdana,sans-serif;line-height:1.6;min-height:100vh}
a{color:var(--oxblood)}
:focus-visible{outline:4px solid var(--steel);outline-offset:3px}

/* back link */
.back{display:inline-flex;align-items:center;color:var(--steel);text-decoration:none;font-family:"Oswald",sans-serif;text-transform:uppercase;letter-spacing:.12em;font-size:.72rem;padding:1rem 1.4rem .2rem;min-height:44px;max-width:1140px;margin:0 auto;width:100%}
.back:hover{color:var(--oxblood)}

.main{display:grid;grid-template-columns:1fr 1fr;column-gap:2.4rem;max-width:1140px;margin:0 auto;padding:.6rem 1.4rem 2.4rem;align-items:start}
.order{display:flex;flex-direction:column;gap:1.1rem}
.pay{display:flex;flex-direction:column;gap:1rem;position:sticky;top:1.2rem}
.guar{margin-top:.3rem}

.label{font-family:"Oswald",sans-serif;text-transform:uppercase;letter-spacing:.24em;font-size:.66rem;color:var(--steel);margin-bottom:.25rem}
.product-name{font-family:"Oswald",sans-serif;text-transform:uppercase;font-size:1.5rem;line-height:1.12;font-weight:600}
.product-sub{color:var(--ink-soft);font-size:.9rem;margin-top:.1rem}

/* product card */
.card{background:var(--tile);border:2px solid var(--line);border-radius:5px;overflow:hidden}
.sum-row{display:flex;align-items:center;gap:1rem;padding:1.2rem}
.sum-thumb{width:4.6rem;height:4.2rem;border-radius:3px;background:#EFEDE8;overflow:hidden;flex:none;border:1px solid var(--line)}
.sum-thumb img{width:100%;height:100%;object-fit:contain;display:block}
.sum-name{font-family:"Oswald",sans-serif;text-transform:uppercase;font-size:1rem;line-height:1.2;min-width:9rem}
.sum-meta{font-size:.85rem;color:var(--ink-soft)}
.sum-right{margin-left:auto;display:flex;align-items:center;gap:.8rem;flex:none}
.was{font-size:.92rem;color:var(--steel);text-decoration:line-through}
.now{font-family:"Oswald",sans-serif;font-size:1.9rem;line-height:1;color:var(--oxblood)}
.save{background:rgba(34,112,58,.1);border:1px solid rgba(34,112,58,.35);color:var(--money);font-family:"Oswald",sans-serif;text-transform:uppercase;letter-spacing:.08em;font-size:.72rem;padding:.4rem .7rem;border-radius:3px;white-space:nowrap}
.dd-btn{background:none;border:none;cursor:pointer;color:var(--steel);font-size:.85rem;padding:.5rem;min-height:44px;min-width:44px}
.arrow{display:inline-block;transition:transform .2s}
.arrow.open{transform:rotate(180deg)}

.dd{max-height:0;overflow:hidden;transition:max-height .25s ease}
.dd.open{max-height:700px}
.dd ul{list-style:none;padding:.4rem 1.2rem 1rem;border-top:1px solid var(--line)}
.dd li{display:flex;justify-content:space-between;gap:1rem;padding:.6rem 0;border-bottom:1px solid var(--line);font-size:.92rem}
.dd li:last-child{border-bottom:none}
.dd li b{font-family:"Oswald",sans-serif;color:var(--steel);white-space:nowrap}
.dd li b.free{background:var(--money);color:#fff;text-transform:uppercase;letter-spacing:.1em;font-size:.72rem;padding:.16rem .5rem;border-radius:3px}
.dd li b.free s{color:rgba(255,255,255,.75);margin-right:.4rem;letter-spacing:0}
.sum-free{display:block;width:fit-content;background:var(--money);color:#fff;font-family:"Oswald",sans-serif;text-transform:uppercase;letter-spacing:.08em;font-size:.6rem;padding:.16rem .5rem;border-radius:3px;margin:.35rem 0 0}
.dd .tot{border-top:2px solid var(--ink);margin-top:.4rem;padding-top:.8rem;font-family:"Oswald",sans-serif;text-transform:uppercase}

/* order bump */
.bump-wrap{position:relative;display:flex;align-items:center;gap:.45rem}
.bump-arrow{color:var(--oxblood);flex:none;width:2.4rem;display:block;align-self:center;animation:nudge 1.1s ease-in-out infinite}
.bump-arrow svg{width:100%;height:auto;display:block}
@keyframes nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(.5rem)}}
.bump{border:2px dashed var(--oxblood);background:rgba(140,29,29,.04);border-radius:5px;padding:.85rem .9rem;position:relative;cursor:pointer;display:block;flex:1}
.bump-tag{position:absolute;top:-.62rem;left:.8rem;background:var(--oxblood);color:#fff;font-family:"Oswald",sans-serif;text-transform:uppercase;letter-spacing:.14em;font-size:.55rem;padding:.2rem .55rem;border-radius:2px}
.bump-row{display:flex;gap:.7rem;align-items:flex-start}
.bump input{width:1.3rem;height:1.3rem;flex:none;margin-top:.1rem;accent-color:var(--oxblood)}
.bump-thumb{width:4rem;flex:none;aspect-ratio:4/3;position:relative;background:transparent;border-radius:3px;overflow:hidden;display:block}
.bump-thumb img{width:100%;height:100%;object-fit:contain;display:block;position:relative;z-index:2}
.bump-slot{position:absolute;inset:0;z-index:1;display:none;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:.3rem;border:2px dashed #BEBBB3;color:#6E6B64;font-family:"Oswald",sans-serif;text-transform:uppercase;letter-spacing:.05em;font-size:.5rem;line-height:1.2}
.bump-slot code{font-family:"Atkinson Hyperlegible",monospace;text-transform:none;letter-spacing:0;font-size:.48rem;color:var(--ink);margin-top:.2rem;word-break:break-all}
.bump-title{display:block;font-family:"Oswald",sans-serif;text-transform:uppercase;font-size:.85rem;color:var(--oxblood);margin-bottom:.2rem;line-height:1.2}
.bump-desc{display:block;font-size:.78rem;color:var(--ink-soft);line-height:1.4}

/* guarantee box */
.guar{background:var(--tile);border:1px solid var(--line);border-left:4px solid var(--oxblood);border-radius:4px;padding:.8rem .9rem;display:flex;gap:.7rem;align-items:flex-start}
.guar-icon{width:1.5rem;height:1.5rem;fill:var(--oxblood);flex:none;margin-top:.15rem}
.guar-icon .tick{stroke:var(--tile);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.guar h2{font-family:"Oswald",sans-serif;text-transform:uppercase;font-size:.85rem;color:var(--oxblood);margin-bottom:.15rem}
.guar p{font-size:.78rem;color:var(--ink-soft);line-height:1.45}

/* testimonial */
.quote{background:var(--tile);border:1px solid var(--line);border-radius:4px;padding:.85rem .95rem}
.q-head{display:flex;align-items:center;gap:.7rem;padding-bottom:.6rem;border-bottom:1px solid var(--line);margin-bottom:.6rem}
.faces{display:flex;flex:none}
.face{width:1.9rem;height:1.9rem;border-radius:50%;overflow:hidden;background:#D8D5CE;border:2px solid var(--tile);margin-right:-.6rem;display:block}
.face:last-child{margin-right:0}
.face img{width:100%;height:100%;object-fit:cover;display:block}
.stars{color:#C9971B;letter-spacing:.12em;font-size:.88rem;line-height:1}
.q-meta{font-size:.76rem;color:var(--ink-soft)}
.quote p{font-size:.82rem;line-height:1.5}
.quote cite{display:block;margin-top:.6rem;font-style:normal;font-family:"Oswald",sans-serif;text-transform:uppercase;font-size:.7rem;letter-spacing:.06em;color:var(--steel)}

/* live counter */
.live{display:flex;align-items:center;gap:.45rem;font-size:.78rem;color:var(--ink-soft);text-transform:none;letter-spacing:0;font-family:"Atkinson Hyperlegible",sans-serif}
.live-dot{width:.6rem;height:.6rem;border-radius:50%;background:#2FA84F;flex:none;animation:pulse 1.7s ease-out infinite}
.live-tag{font-family:"Oswald",sans-serif;text-transform:uppercase;letter-spacing:.12em;font-size:.64rem;color:#2FA84F;font-weight:600}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(47,168,79,.55)}70%{box-shadow:0 0 0 .55rem rgba(47,168,79,0)}100%{box-shadow:0 0 0 0 rgba(47,168,79,0)}}

/* trust */
.trust{display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;justify-content:center;font-size:.8rem;color:var(--steel);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:.6rem 0}
.trust span{display:flex;align-items:center;gap:.4rem}

/* payment panel */
.pay-head{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:.4rem 1.2rem;font-family:"Atkinson Hyperlegible",Verdana,sans-serif;text-transform:none;letter-spacing:0;font-size:.8rem;color:#8A8574}
/* Both embeds stay rendered and laid out at full width so Whop can measure
   them. The inactive one is parked off to the left rather than display:none:
   a hidden element measures as zero height, Whop keeps its 480px placeholder,
   and the buyer who ticks the bump gets a window showing only the wallet
   button with the card fields cut off inside the iframe. Negative left does
   not create a horizontal scrollbar in LTR. */
.pay-panel{min-height:420px;position:relative}
.embed{width:100%}
.embed.is-off{position:absolute;top:0;left:-9999px;width:100%}
.whop-checkout-wrapper iframe{width:100%;border:0}
/* Quiet fallback out to the hosted checkout. */
.pay-fallback{font-size:.8rem;line-height:1.5;color:var(--steel);text-align:center;margin:.7rem 0 0}
.pay-fallback a{color:var(--steel);text-underline-offset:.2em}
.pay-fallback a:hover{color:var(--oxblood)}
.loading{padding:3rem 1rem;text-align:center;color:var(--steel);font-size:.95rem}
.spinner{width:2.2rem;height:2.2rem;border:3px solid var(--line);border-top-color:var(--oxblood);border-radius:50%;margin:0 auto 1rem;animation:spin .9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spinner,.live-dot,.bump-arrow{animation:none}.dd,.arrow{transition:none}}

.foot{text-align:center;padding:1.6rem;color:var(--steel);font-size:.85rem;border-top:1px solid var(--line)}

@media (max-width:900px){
  .main{grid-template-columns:1fr;max-width:620px;padding:1.2rem 1.1rem 2rem;row-gap:0}
  .pay{position:static;margin-top:1.2rem}
}
@media (max-width:560px){
  html{font-size:18px}
  .back{padding:.8rem 1.1rem .1rem}
  .product-name{font-size:1.4rem}
  .sum-row{flex-wrap:wrap;padding:1rem;gap:.7rem}
  .sum-thumb{width:3.8rem;height:3.4rem}
  .sum-right{width:100%;margin-left:0;justify-content:space-between;gap:.5rem}
  .now{font-size:1.6rem}
  .bump-arrow{width:1.7rem}
  .bump{padding:1rem .9rem}
  .bump-thumb{width:4.4rem}
  .bump-desc{font-size:.85rem}
  .dd li{font-size:.88rem;gap:.7rem}
  .quote{padding:1.1rem}
  .q-head{gap:.8rem}
  .trust{gap:.5rem 1.1rem;font-size:.78rem}
  .pay-head{gap:.35rem 1rem}
  .live{font-size:.74rem}
  .pay-panel{min-height:520px}
}

/* ---------- 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-size:.82rem;letter-spacing:.04em;color:var(--ink)}


/* ---- proof pill, guarantee seal and payment row, ported from the front page ---- */
.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)}
.badge svg .tick{stroke:var(--paper)}
.band.ink .badge svg .tick{stroke:var(--ink)}
.offer-detail .proof{align-self:auto;display:flex;max-width:100%;margin:1rem 0 0}
.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}
.face.lg{width:3.4rem;height:3.4rem;margin-right:0;border-color:var(--line)}
.review .stars{margin-bottom:.15rem}
.stars{color:#C9971B;font-size:1.25rem;letter-spacing:.15em;margin-bottom:.7rem}
@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}
}
.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;
}
.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}
}
.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)}
.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}
.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}
.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}
.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,.proof-text .stars{
display:inline-block;letter-spacing:0;
color:var(--star-gold,#C9971B);
background-image:none;-webkit-text-fill-color:currentColor}
.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)}

/* The ported rules assume the front page's layout context; on checkout the
   pill, the seal and the pay row stack in the order column at the same
   reduced size the front page now uses. */
.co-proof{margin:1.1rem 0 0;display:flex;justify-content:flex-start}
.co-proof .proof,.co-proof .proofpill{margin:0}
.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 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}

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

/* ------------------------------------------------------------------
   Checkout review box header: the front-page pill component, sitting
   inside the white review box. Faces overlapping on the left, stars
   and the number on one line to their right, reader count beneath.
   ------------------------------------------------------------------ */
.quote .q-head{display:flex;align-items:center;gap:.85rem;margin-bottom:.9rem;flex-wrap:wrap}
.quote .q-head .faces{display:flex;flex:none;align-items:center}
.quote .q-head .face{
  width:2.1rem;height:2.1rem;border-radius:50%;overflow:hidden;display:block;flex:none;
  margin-right:-.55rem;border:2px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.12);
  background:#D8D5CE}
.quote .q-head .face:last-child{margin-right:0}
.quote .q-head .face img,.quote .q-head .face picture{width:100%;height:100%;display:block;object-fit:cover}
.quote .q-meta{display:flex;flex-direction:column;gap:.1rem;min-width:0;align-items:flex-start}
.quote .q-head .rating{display:inline-flex;align-items:center;gap:.4rem}
.quote .q-head .stars{font-size:1.05rem;line-height:1}
.quote .q-head .rating-num{font-weight:700;font-size:.9rem;line-height:1}
.quote .q-count{font-size:.78rem;line-height:1.2;opacity:.85}
.quote cite{display:block;margin-top:.85rem;font-style:normal;
  text-transform:uppercase;letter-spacing:.06em;font-size:.82rem;font-weight:700}
@media (max-width:520px){
  .quote .q-head .face{width:1.85rem;height:1.85rem}
  .quote .q-head .stars{font-size:.95rem}
}

.quote .q-head .stars{color:#C9971B;background-image:linear-gradient(90deg,#C9971B var(--pct,90%),#D9D0B6 var(--pct,90%));-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;display:inline-block;letter-spacing:0}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){.quote .q-head .stars{color:#C9971B;-webkit-text-fill-color:#C9971B}}

/* ==================================================================
   Phone checkout. The pay button sat roughly two screens down because
   everything above it was proof. On a phone the form comes first:
   somebody who reached this page has already decided, so the review,
   the guarantee and the card marks read as confirmation underneath it.
   .order goes display:contents so its children become items of .main
   and can be ordered around .pay without moving anything in the DOM.
   ================================================================== */
@media (max-width:560px){
  .main{row-gap:0;padding-top:.4rem}
  .order{gap:.55rem}
  .pay{margin-top:.55rem}
  .pay{gap:.6rem}

  /* The review box: smaller faces, tighter box, shorter quote. */
  .quote{padding:.7rem .8rem}
  .quote p{font-size:.8rem;line-height:1.45}
  .quote .q-head{gap:.55rem;margin-bottom:.5rem}
  .quote .q-head .face{width:1.5rem;height:1.5rem;margin-right:-.42rem;border-width:2px}
  .quote .q-head .stars{font-size:.86rem}
  .quote .q-head .rating-num{font-size:.78rem}
  .quote .q-count{font-size:.68rem}
  .quote cite{margin-top:.45rem;font-size:.7rem}

  /* The guarantee is a line on a phone, not a block. */
  .seal-badge{padding:.38rem .5rem;gap:.45rem;border-width:1px}
  .seal-badge .seal-shield{width:1.3rem}
  .seal-badge b{font-size:.7rem}
  .seal-badge .seal-text > span{font-size:.68rem;line-height:1.3}

  /* One compact row of marks. */
  .paybar{gap:.3rem .45rem}
  .paybar .lockline{font-size:.56rem}
  .pay-mark{padding:.1rem .28rem}
  .pay-mark svg{height:.78rem}
  .pay-label{font-size:.56rem}

  .pay-head{gap:.25rem .7rem;font-size:.72rem}
}

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

/* ==================================================================
   Horizontal overflow on phones. The single mobile column was
   `1fr`, which floors at the min-content width of its contents; the
   payment embed's min-content is wider than a 430px phone, so the
   whole grid grew past the viewport and every block in it was cut
   off on the right. minmax(0,1fr) lets the column actually shrink.
   ================================================================== */
@media (max-width:900px){
  .main{grid-template-columns:minmax(0,1fr);min-width:0}
  .main > *,.order,.pay{min-width:0;max-width:100%}
  .pay-panel,.embed{min-width:0;max-width:100%}
  /* If the embed genuinely needs more room it scrolls inside its own
     box rather than dragging the page sideways. */
  .embed{overflow-x:auto;-webkit-overflow-scrolling:touch}
}
html,body{max-width:100%;overflow-x:hidden}

/* ==================================================================
   Corrections. The ONE TIME OFFER tag is absolutely positioned above
   the dashed border on purpose; an overflow:hidden I had put on the
   wrapper to stop text escaping was cutting the tag in half instead.
   The wrapper goes back to visible and gains the clearance the tag
   needs. The product box becomes a two-column grid so the cover, the
   title and the price stop wrapping into three loose rows.
   ================================================================== */
@media (max-width:480px){
  .bump-wrap{overflow:visible;margin-top:.75rem}
  .bump{padding:.8rem .8rem .75rem}
  .bump-tag{top:-.58rem;left:.7rem}

  /* break only where a word genuinely will not fit */
  .card *,.quote *,.bump-wrap *,.seal-badge *,.review *,.stack li *{overflow-wrap:break-word}

  /* Product box: cover on the left, title and price stacked beside it. */
  .sum-row{display:grid;grid-template-columns:auto minmax(0,1fr);
    gap:.35rem .65rem;padding:.7rem .75rem;align-items:center}
  .sum-thumb{grid-column:1;grid-row:1 / span 2;width:3.4rem;height:3.1rem}
  .sum-row > div:not(.sum-thumb):not(.sum-right){grid-column:2;grid-row:1;min-width:0}
  .sum-right{grid-column:2;grid-row:2;width:auto;margin:0;
    display:flex;align-items:center;justify-content:flex-start;
    gap:.5rem;flex-wrap:wrap;white-space:normal}
  .sum-name{font-size:.92rem}
  .dd-btn{margin-left:auto}

  /* Close what is left between the blocks. */
  .order{gap:.5rem}
  .main{padding-left:.85rem;padding-right:.85rem}
  .quote{padding:.65rem .75rem}
  .seal-badge{margin:0}
}

/* The expander arrow was taking a whole grid row to itself and the
   offer thumbnail plus arrow were squeezing the offer text into a
   narrow column. Both reclaimed. */
@media (max-width:480px){
  .card{position:relative}
  .card .dd-btn{position:absolute;top:.15rem;right:.15rem;margin:0;padding:.35rem;
    min-height:34px;min-width:34px;line-height:1}
  .sum-right{padding-right:2rem}
  .sum-row{padding:.7rem .75rem .75rem}
}
@media (max-width:400px){
  .bump-arrow{width:1.1rem}
  .bump-wrap{gap:.3rem}
  .bump-thumb{width:3.1rem}
  .bump{padding:.7rem .6rem}
  .bump-title{font-size:.8rem}
  .bump-desc{font-size:.76rem;line-height:1.35}
  .sum-name{font-size:.86rem}
}

/* ==================================================================
   Get the express pay button onto the first screen. Everything above
   it is squeezed: the add-on box loses its padding and clamps its
   description, the review box tightens, the guarantee becomes one
   line, and the card marks move below the form since the one-line
   reassurance row above already carries the same message.
   ================================================================== */
@media (max-width:560px){
  .order{gap:.4rem}
  .main{padding-top:.3rem;padding-bottom:1.2rem}

  /* Product box */
  .sum-row{padding:.55rem .65rem .6rem;gap:.3rem .55rem}
  .sum-thumb{width:3rem;height:2.7rem}
  .sum-name{font-size:.86rem;line-height:1.15}
  .sum-free{font-size:.56rem;padding:.12rem .4rem}
  .now{font-size:1.5rem}
  .save{font-size:.62rem;padding:.25rem .45rem}

  /* Add-on: tight box, description clamped to two lines. */
  .bump-wrap{margin-top:.6rem}
  .bump{padding:.55rem .6rem .6rem}
  .bump-thumb{width:2.7rem}
  .bump-arrow{width:1rem}
  .bump-title{font-size:.76rem;margin-bottom:.1rem;line-height:1.2}
  .bump-desc{font-size:.72rem;line-height:1.3;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .bump-row{gap:.5rem}
  .bump input{width:1.1rem;height:1.1rem}

  /* Review box */
  .quote{padding:.55rem .65rem}
  .quote .q-head{gap:.5rem;margin-bottom:.4rem}
  .quote .q-head .face{width:1.4rem;height:1.4rem;margin-right:-.4rem}
  .quote .q-head .stars{font-size:.8rem}
  .quote .q-head .rating-num{font-size:.74rem}
  .quote .q-count{font-size:.64rem}
  .quote p{font-size:.76rem;line-height:1.38;
    }
  .quote cite{margin-top:.35rem;font-size:.66rem}

  /* Guarantee: one line. */
  .seal-badge{padding:.3rem .45rem;gap:.4rem}
  .seal-badge .seal-shield{width:1.1rem}
  .seal-badge b{font-size:.66rem;line-height:1.2}
  .seal-badge .seal-text > span{display:none}

  /* The card marks repeat the reassurance line directly under them,
     so on a phone they move below the form instead. .order goes
     display:contents so its children become items of .main and the
     marks can sit after .pay while the proof stays above it. */
  .order{display:contents}
  .order > .card{order:1}
  .order > .bump-wrap{order:2}
  .order > .quote{order:3}
  .order > .seal-badge{order:4}
  .main > .pay{order:5}
  .order > .paybar{order:6;margin-top:.7rem;padding-top:.6rem}
  .main{row-gap:.4rem}
  .pay-head{margin:0;font-size:.68rem;gap:.15rem .5rem}
  .pay{gap:.4rem;margin-top:.35rem}
}

/* ==================================================================
   Readability. The squeeze went too far: this audience is older and
   the checkout type had dropped to .66-.76rem. Sizes come back up
   while the spacing stays tight, and the add-on description is no
   longer clamped to two lines with the rest cut off.
   ================================================================== */
@media (max-width:560px){
  .sum-name{font-size:1.02rem;line-height:1.2}
  .sum-free{font-size:.62rem;padding:.16rem .45rem}
  .now{font-size:1.65rem}
  .was{font-size:.92rem}
  .save{font-size:.7rem;padding:.28rem .5rem}

  /* Add-on: nothing truncated. */
  .bump-desc{font-size:.86rem;line-height:1.42;
    display:block;-webkit-line-clamp:none;overflow:visible}
  .bump-title{font-size:.92rem;line-height:1.25}
  .bump-thumb{width:3.2rem}
  .bump{padding:.7rem .7rem .75rem}

  /* Review box. */
  .quote p{font-size:.9rem;line-height:1.5}
  .quote .q-head .face{width:1.7rem;height:1.7rem;margin-right:-.45rem}
  .quote .q-head .stars{font-size:.98rem}
  .quote .q-head .rating-num{font-size:.9rem}
  .quote .q-count{font-size:.78rem}
  .quote cite{font-size:.8rem;margin-top:.5rem}

  /* Guarantee: heading plus the promise line, both readable. */
  .seal-badge{padding:.5rem .6rem;gap:.5rem}
  .seal-badge .seal-shield{width:1.5rem}
  .seal-badge b{font-size:.8rem;line-height:1.25}
  .seal-badge .seal-text > span{display:block;font-size:.78rem;line-height:1.35;margin-top:.1rem}

  /* Reassurance row and card marks. */
  .pay-head{font-size:.82rem;gap:.2rem .6rem}
  .paybar .lockline{font-size:.66rem}
  .pay-label{font-size:.66rem}
  .pay-mark svg{height:.92rem}
  .pay-mark{padding:.16rem .38rem}
}
@media (max-width:400px){
  .sum-name{font-size:.94rem}
  .bump-desc{font-size:.82rem}
  .quote p{font-size:.86rem}
  .pay-head{font-size:.76rem}
  .seal-badge b{font-size:.76rem}
  .seal-badge .seal-text > span{font-size:.74rem}
}

/* ------------------------------------------------------------------
   Frank only: a light squeeze so the express pay button clears the
   fold. Padding and leading come down a little; no type size drops
   below what the last pass set as readable, and nothing is clamped
   any tighter than it already was.
   ------------------------------------------------------------------ */
@media (max-width:560px){
  .main{padding-top:.2rem}
  .order{gap:.28rem}
  .sum-row{padding:.45rem .6rem .5rem;gap:.25rem .5rem}
  .sum-thumb{width:2.8rem;height:2.5rem}
  .bump-wrap{margin-top:.45rem}
  .bump{padding:.55rem .6rem .6rem}
  .bump-desc{line-height:1.35}
  .bump-row{gap:.45rem}
  .quote{padding:.45rem .6rem}
  .quote .q-head{margin-bottom:.35rem}
  .quote p{line-height:1.42}
  .quote cite{margin-top:.3rem}
  .seal-badge{padding:.4rem .5rem}
  .seal-badge .seal-text > span{line-height:1.3}
  .pay-head{gap:.15rem .55rem}
  .pay{margin-top:.25rem;gap:.3rem}
}

/* The ONE TIME OFFER tag hangs over the top edge of the dashed box by
   about half its height. The mobile padding had come down far enough
   that the tag was covering the tick box underneath it, so the row now
   starts below the tag at every phone width. */
@media (max-width:560px){
  .bump{padding-top:1.05rem}
  .bump-tag{top:-.55rem;left:.65rem;z-index:2}
  .bump-row{position:relative;z-index:1}
}
@media (max-width:400px){
  .bump{padding-top:1rem}
}

/* ------------------------------------------------------------------
   One reassurance row, three items across: Pay once on the left,
   Secure checkout centred, Instant download on the right. A three
   column grid rather than flex, so the middle item is centred on the
   row itself and does not drift with the width of its neighbours.
   Regular weight throughout; this is a footnote under the pay button.
   ------------------------------------------------------------------ */
.pay-head{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  gap:.2rem .8rem;width:100%;margin:0;
  font-weight:400;letter-spacing:.05em;opacity:.72;font-size:.66rem}
.pay-head > span{display:inline-flex;align-items:center;gap:.28rem;font-weight:400}
.pay-head > span:nth-child(1){justify-self:start}
.pay-head > span:nth-child(2){justify-self:center;white-space:nowrap}
.pay-head > span:nth-child(3){justify-self:end;text-align:right}
.pay-head > span.live{grid-column:1 / -1;justify-self:center;margin-top:.15rem}

/* The card marks stand on their own now that the row carries the words. */
.paybar{justify-content:center}

@media (max-width:480px){
  .pay-head{grid-template-columns:1fr;justify-items:center;gap:.12rem;font-size:.68rem}
  .pay-head > span:nth-child(1),
  .pay-head > span:nth-child(2),
  .pay-head > span:nth-child(3){justify-self:center;text-align:center}
}

/* ------------------------------------------------------------------
   Loading state for the payment form.

   The embed arrives at the end of a serial chain: page -> loader.js
   (a 1.4KB shim) -> index.js -> an iframe whose document is ~1.4MB
   from whop.com. Until that lands the column is blank, which reads as
   a broken checkout rather than a loading one. The panel now carries
   a skeleton of the form beneath the iframe; the iframe paints over
   it, so the skeleton needs no JS to remove and cannot outlive the
   thing it stands in for.
   ------------------------------------------------------------------ */
.pay-panel{position:relative}
.pay-panel::before{
  content:"Loading secure payment form";
  position:absolute;top:0;left:0;right:0;
  display:flex;align-items:flex-start;justify-content:center;
  padding-top:.9rem;
  font-family:var(--ui,inherit);text-transform:uppercase;
  letter-spacing:.12em;font-size:.6rem;color:var(--steel,#8A8574);
  opacity:.75;z-index:0}
.pay-panel::after{
  content:"";position:absolute;top:2.6rem;left:0;right:0;height:300px;z-index:0;
  border-radius:6px;
  background:
    linear-gradient(var(--line,#E2DED4) 0 0) 0 0/100% 1px no-repeat,
    linear-gradient(var(--tile,#F4F1E8) 0 0) 0 46px/70% 34px no-repeat,
    linear-gradient(var(--tile,#F4F1E8) 0 0) 0 104px/100% 34px no-repeat,
    linear-gradient(var(--tile,#F4F1E8) 0 0) 0 162px/48% 34px no-repeat,
    linear-gradient(var(--tile,#F4F1E8) 0 0) 52% 162px/48% 34px no-repeat,
    linear-gradient(var(--tile,#F4F1E8) 0 0) 0 220px/100% 34px no-repeat;
  animation:payskel 1.4s ease-in-out infinite}
@keyframes payskel{0%,100%{opacity:.55}50%{opacity:.9}}
/* The embed itself sits above the skeleton and hides it once painted. */
.pay-panel > *{position:relative;z-index:1}
.pay-panel iframe{background:var(--paper,#F5EFE1)}
@media (prefers-reduced-motion:reduce){.pay-panel::after{animation:none}}

/* ------------------------------------------------------------------
   The reassurance row stays on ONE line at every width, including a
   360px phone. It was stacking into three rows below 480px, which
   pushed the express pay button down by roughly two lines for no
   gain. The type steps down instead of wrapping, and nowrap on each
   item stops "Instant download" breaking across lines.
   ------------------------------------------------------------------ */
@media (max-width:480px){
  .pay-head{
    display:grid;grid-template-columns:auto auto auto;
    justify-items:center;justify-content:space-between;
    gap:0 .4rem;font-size:.58rem;letter-spacing:.02em;width:100%}
  .pay-head > span:nth-child(1){justify-self:start}
  .pay-head > span:nth-child(2){justify-self:center}
  .pay-head > span:nth-child(3){justify-self:end;text-align:right}
  .pay-head > span{white-space:nowrap;gap:.2rem}
  .pay-head > span.live{grid-column:1 / -1;justify-self:center;margin-top:.2rem}
}
@media (max-width:380px){
  .pay-head{font-size:.53rem;gap:0 .28rem}
}

/* ------------------------------------------------------------------
   The three items sit together as one centred line with a thin dot
   between them. The previous layout pushed them to the far edges of
   the column, leaving big empty gaps between each.
   ------------------------------------------------------------------ */
.pay-head{
  display:flex;flex-wrap:nowrap;align-items:center;justify-content:center;
  gap:.5rem;width:100%;margin:0;
  font-weight:400;letter-spacing:.05em;opacity:.72;font-size:.66rem}
.pay-head > span{
  display:inline-flex;align-items:center;gap:.25rem;
  white-space:nowrap;font-weight:400;justify-self:auto}
.pay-head > span + span::before{
  content:"\00B7";margin-right:.5rem;opacity:.55}
.pay-head > span.live{
  flex-basis:100%;justify-content:center;margin-top:.2rem}
.pay-head > span.live::before{content:none}

@media (max-width:480px){
  .pay-head{gap:.34rem;font-size:.58rem;letter-spacing:.02em}
  .pay-head > span + span::before{margin-right:.34rem}
}
@media (max-width:380px){
  .pay-head{gap:.26rem;font-size:.53rem}
  .pay-head > span + span::before{margin-right:.26rem}
}

/* nowrap on the container stopped the LIVE counter dropping to its own
   line, so the row ran off the right edge. The container wraps; the
   three text items are nowrap individually so they stay on one line
   together, and the counter takes the full width beneath them. */
.pay-head{flex-wrap:wrap;row-gap:.15rem}
.pay-head > span{flex:0 0 auto;white-space:nowrap}
.pay-head > span.live{
  flex:1 0 100%;justify-content:center;margin-top:.1rem;white-space:normal}
.pay-head > span.live::before{content:none;margin:0}

/* ------------------------------------------------------------------
   One quiet line of small print. The LIVE counter was bold, green and
   on a second row of its own, so it shouted over the line it belongs
   to. It now sits in the same run with the same dot separator and the
   same weight, and only drops to a second line if the width forces it.
   ------------------------------------------------------------------ */
/* The LIVE counter keeps its own colour and weight: it is the one item
   in this row that is meant to catch the eye. It sits on its own line
   under the small print, full green, dot pulsing. */
.pay-head > span.live{
  flex:1 0 100%;justify-content:center;margin-top:.25rem;
  white-space:nowrap;opacity:1;font-size:.8rem}
.pay-head > span.live::before{content:none;margin:0}
.pay-head .live-dot{
  width:.6rem;height:.6rem;border-radius:50%;flex:none;opacity:1;
  background:var(--free-green,#2F6B3A);
  animation:pulse 1.7s ease-out infinite}
.pay-head .live-tag{
  font-family:var(--ui,inherit);font-weight:700;text-transform:uppercase;
  letter-spacing:.12em;font-size:.68rem;color:var(--free-green,#2F6B3A);opacity:1}
@media (prefers-reduced-motion:reduce){.pay-head .live-dot{animation:none}}

/* The guarantee is reassurance, not a headline. */
.seal-badge b{font-size:.72rem;line-height:1.25}
.seal-badge .seal-text > span{font-size:.76rem;line-height:1.35}
.seal-badge .seal-shield{width:1.25rem;height:1.5rem}
.seal-badge{padding:.42rem .6rem;gap:.5rem}

@media (max-width:480px){
  .pay-head > span.live::before{margin-right:.34rem}
  .seal-badge b{font-size:.68rem}
  .seal-badge .seal-text > span{font-size:.72rem}
}
@media (max-width:380px){
  .seal-badge b{font-size:.64rem}
  .seal-badge .seal-text > span{font-size:.68rem}
}

/* ------------------------------------------------------------------
   Lift the pay button. Everything above it loses a little height: the
   add-on box, the review and the guarantee all tighten, and the gaps
   between the blocks close. Type sizes are untouched, so nothing gets
   harder to read; this is padding and leading only.
   ------------------------------------------------------------------ */
@media (max-width:560px){
  .main{padding-top:.25rem;row-gap:0}
  .order{gap:.35rem}

  /* Product box */
  .sum-row{padding:.5rem .6rem .55rem;gap:.25rem .5rem}
  .sum-thumb{width:2.8rem;height:2.5rem}

  /* Add-on: the tag needs clearance, the rest does not. */
  .bump-wrap{margin-top:.5rem}
  .bump{padding:.95rem .6rem .55rem}
  .bump-row{gap:.45rem}
  .bump-thumb{width:2.9rem}
  .bump-title{margin-bottom:.08rem;line-height:1.2}
  .bump-desc{line-height:1.35}

  /* Review */
  .quote{padding:.5rem .6rem}
  .quote .q-head{margin-bottom:.35rem;gap:.45rem}
  .quote p{line-height:1.4;margin:0}
  .quote cite{margin-top:.3rem}

  /* Guarantee */
  .seal-badge{margin:0;padding:.36rem .5rem;gap:.42rem}

  /* Small print sits tight to the form it introduces. */
  .pay-head{margin:0}
  .pay{gap:.3rem;margin-top:.3rem}
  .pay-panel{min-height:0}
}

/* ------------------------------------------------------------------
   Blocks were flush against each other. .order is display:contents on
   a phone, so its own `gap` never applied: the children are grid items
   of .main, and .main carried row-gap:0. The review card therefore
   began on the exact pixel the offer box ended, which is what made the
   cassette read as clipping into it. The gap belongs on .main.

   The ONE TIME OFFER tag overhangs the top of its box by ~9px, so the
   offer block takes a little extra above it and none below; the row
   gap does the rest, and the cassette sits higher than it did.
   ------------------------------------------------------------------ */
@media (max-width:560px){
  .main{row-gap:.5rem}
  .bump-wrap{margin-top:.3rem;margin-bottom:0}
  /* The artwork carries a drop shadow that reaches past its own box;
     keep it inside the dashed border rather than over the card below. */
  .bump{padding-bottom:.7rem}
  .bump-thumb{align-self:center}
  .bump-thumb img{filter:drop-shadow(0 1px 3px rgba(34,39,31,.18))}
}

/* ==================================================================
   1. The 4.9 sits on the stars' optical centre. The glyphs and the
      number have different line boxes, so baseline alignment left the
      number low. Both are centred on the row instead.
   2. The reader count sits directly under the stars: the .q-meta
      column carried a gap that opened a band of dead space.
   3. The cassette can no longer reach the review: the offer block
      keeps a real gap beneath it.
   4. The offer box sits closer to the price box above it.
   5. The small print takes more contrast without becoming loud.
   6. The joiner count is bold.
   ================================================================== */

/* 1 + 2 ---------------------------------------------------------- */
.quote .q-head{align-items:center}
.quote .q-meta{gap:0;justify-content:center}
.quote .q-head .rating{align-items:center;gap:.38rem;line-height:1}
.quote .q-head .stars{line-height:1;display:inline-block}
.quote .q-head .rating-num{
  line-height:1;display:inline-block;position:relative;top:.02em}
.quote .q-count{margin-top:.1rem;line-height:1.2}

/* 3 + 4 ---------------------------------------------------------- */
@media (max-width:560px){
  .main{row-gap:.35rem}
  /* The tag overhangs its box by ~9px, so the offer block needs that
     much clearance above and nothing more. */
  .bump-wrap{margin-top:.32rem;margin-bottom:.42rem}
  .bump{padding:.9rem .6rem .6rem}
  .quote{padding:.62rem .6rem .55rem}
}

/* 5 -------------------------------------------------------------- */
.pay-head{opacity:1;color:var(--ink-soft,#5A5545)}
.pay-head > span{color:inherit}
.pay-head > span + span::before{opacity:.45}

/* 6 -------------------------------------------------------------- */
.pay-head .live-count,
.pay-head > span.live{font-weight:700}
.pay-head .live-count b,.pay-head > span.live b{font-weight:700}

/* ==================================================================
   STAR / NUMBER ALIGNMENT
   Measured: the number's optical centre sat 7.4px below the stars'.
   align-items:center was not taking because .rating renders as an
   inline-flex whose children keep their own baselines. Forcing a flex
   row with line-height:1 on both children puts them on one centre, and
   the star glyph's own high bearing is taken out with a small nudge.
   ================================================================== */
.quote .rating,.q-head .rating{
  display:inline-flex !important;align-items:center !important;
  gap:.36rem;line-height:1}
.quote .rating .stars,.q-head .rating .stars{
  display:block;line-height:1;position:relative;top:.055em}
.quote .rating .rating-num,.q-head .rating .rating-num{
  display:block;line-height:1;position:relative;top:0}
.quote .q-meta{display:flex;flex-direction:column;gap:0;align-items:flex-start}
.quote .q-count{margin-top:.12rem;line-height:1.15}

/* ==================================================================
   HEIGHT. Everything above the pay button gives up padding and
   leading. Type sizes are untouched.
   ================================================================== */
@media (max-width:560px){
  .main{row-gap:.28rem;padding-top:.2rem}

  .card{margin-bottom:0}
  .sum-row{padding:.42rem .55rem .48rem}
  .sum-thumb{width:2.6rem;height:2.35rem}

  .bump-wrap{margin-top:.28rem;margin-bottom:.3rem}
  .bump{padding:.82rem .55rem .5rem}
  .bump-desc{line-height:1.3}
  .bump-title{line-height:1.18;margin-bottom:.05rem}

  .quote{padding:.5rem .55rem .45rem}
  .quote .q-head{margin-bottom:.3rem;gap:.4rem}
  .quote .q-head .face{width:1.55rem;height:1.55rem;margin-right:-.4rem}
  .quote p{line-height:1.34}
  .quote cite{margin-top:.25rem}

  .seal-badge{padding:.3rem .45rem;gap:.4rem}
  .seal-badge .seal-shield{width:1.15rem;height:1.4rem}
  .seal-badge b{line-height:1.2}
  .seal-badge .seal-text > span{line-height:1.28}

  .pay-head{row-gap:.08rem}
  .pay-head > span.live{margin-top:.12rem;font-size:.76rem}
  .pay{margin-top:.22rem;gap:.25rem}
}

/* ------------------------------------------------------------------
   Measured correction. Even with display:flex and align-items:center
   the two glyph boxes did not share a centre: the star row measured
   19.6px tall against 18px for the digits and their ink sits at
   different heights inside those boxes, leaving the number 5.9px low.
   The offset is expressed in em so it holds if the sizes change.
   ------------------------------------------------------------------ */
.quote .rating .stars,.q-head .rating .stars{top:0}
.quote .rating .rating-num,.q-head .rating .rating-num{top:-.33em}

/* The joiner line sits on the same row when the width allows and drops
   underneath only when it genuinely will not fit, rather than always
   taking a second line. */
.pay-head > span.live{flex:0 1 auto}

/* ------------------------------------------------------------------
   The skeleton is drawn with absolutely positioned pseudo elements, so
   it needs the panel to reserve room for it. A min-height:0 I had set
   while trimming let the panel collapse, and the skeleton spilled over
   the note underneath it. The panel reserves the skeleton's height
   again; the iframe is taller than this, so nothing is added once the
   form has actually loaded.
   ------------------------------------------------------------------ */
.pay-panel{min-height:330px;position:relative;overflow:hidden}
.pay-panel::before,.pay-panel::after{pointer-events:none}
/* Once the embed is in, it paints over the skeleton and the panel
   takes the iframe's own height. */
.pay-panel:has(iframe){overflow:visible}
.pay-panel:has(iframe)::before,.pay-panel:has(iframe)::after{display:none}
@media (max-width:560px){
  .pay-panel{min-height:320px}
}

/* ------------------------------------------------------------------
   Product box, rearranged. The two chips now sit together on their own
   line under the title, and the price column carries only the price
   and the expander. The badges read as one pair rather than one badge
   under the title and another stranded beside the money.
   ------------------------------------------------------------------ */
.sum-chips{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem;margin-top:.25rem}
.sum-chips .sum-free,.sum-chips .sum-sub{margin:0}
.sum-chips .save{margin:0;white-space:nowrap}
.sum-right{display:flex;align-items:baseline;gap:.5rem;flex-wrap:wrap}
.sum-right .dd-btn{align-self:center}

/* Bigger, readable type in the product box. */
.sum-name{font-size:1.06rem;line-height:1.2}
.sum-free,.sum-sub{font-size:.68rem}
.save{font-size:.72rem}
.now{font-size:1.75rem}
.was{font-size:1rem}
@media (max-width:560px){
  .sum-chips{gap:.3rem;margin-top:.22rem}
  .sum-name{font-size:1rem}
  .now{font-size:1.6rem}
  .was{font-size:.94rem}
  .sum-free,.sum-sub{font-size:.64rem}
  .save{font-size:.68rem}
}

/* ------------------------------------------------------------------
   Final squeeze above the pay button. Padding, leading and the gaps
   between blocks only; no type size is reduced, since this audience
   already found the small text hard to read.
   ------------------------------------------------------------------ */
@media (max-width:560px){
  .main{padding-top:.15rem;row-gap:.2rem}

  .sum-row{padding:.4rem .5rem .45rem;gap:.2rem .45rem}
  .sum-thumb{width:2.5rem;height:2.25rem}
  .sum-chips{margin-top:.15rem;gap:.25rem}
  .now{font-size:1.5rem}

  .bump-wrap{margin-top:.22rem;margin-bottom:.22rem}
  .bump{padding:.78rem .5rem .42rem}
  .bump-row{gap:.4rem}
  .bump-thumb{width:2.5rem}
  .bump-title{line-height:1.14;margin-bottom:0}
  .bump-desc{line-height:1.3}

  .quote{padding:.45rem .55rem .4rem}
  .quote .q-head{margin-bottom:.28rem;gap:.4rem}
  .quote .q-head .face{width:1.45rem;height:1.45rem;margin-right:-.38rem}
  .quote p{line-height:1.34;margin:0}
  .quote cite{margin-top:.22rem}

  .seal-badge{padding:.28rem .42rem;gap:.38rem;margin:0}
  .seal-badge .seal-shield{width:1.05rem;height:1.3rem}
  .seal-badge b{line-height:1.18}
  .seal-badge .seal-text > span{line-height:1.26}

  .pay-head{margin:0;row-gap:.05rem}
  .pay{margin-top:.18rem;gap:.18rem}
}

/* The ONE TIME OFFER tag is positioned 9px above its own dashed box, so
   the wrapper needs at least that much clearance or the tag lands on the
   product card above it. The squeeze had left 3.5px, which put the tag
   1px over the card. Clearance restored, and the box gives back a little
   of its own top padding so the section height barely moves. */
@media (max-width:560px){
  .bump-wrap{margin-top:1.05rem}
  .bump{padding-top:.62rem}
}

/* The tick box sat top-aligned while the artwork beside it is centred,
   so it floated above the phone image. Both now sit on the same centre
   line, reading as one "tick this to add it" unit. */
.bump-row{align-items:center}
.bump input{margin-top:0;align-self:center}
.bump-thumb{align-self:center}
@media (max-width:560px){
  .bump-row{align-items:center;gap:.45rem}
  .bump input{margin-top:0}
}

/* `.dd li{display:flex}` overrides the browser's own `[hidden]` rule, so a
   row marked hidden in the markup still rendered. The audiobook line was
   showing in the order summary even with the add-on unticked. */
.dd li[hidden],
li[hidden],
[hidden]{display:none !important}


/* ---------- 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 product details and hidden inactive checkout. */
[hidden]{display:none!important}
.sum-thumb img,.bump-thumb img{object-fit:contain}
.sum-name{overflow-wrap:anywhere}
#dd b{white-space:nowrap}
.support-contact{text-align:center;font-size:14px;line-height:1.6;padding:0 20px 24px}
.pays{flex-wrap:wrap}