/* ==========================================================================
   Tibyan — visual system v3.1 (brand system, second pass)
     65%  #F9F6F0  paper       — background / whitespace
     25%  #1A2A3A  ink         — typography, logo, header, offer band, footer
     10%  #800020  burgundy    — CTA, price, badge, key words. Never a second primary.
   Type: Almarai 700/800 for display (user preference over the brand sheet's Tajawal),
   IBM Plex Sans Arabic 400/600 for text. Self-hosted; Latin faces subset to ASCII + guillemets/dashes/ellipsis:
     python -m fontTools.subset <latin>.woff2 --unicodes="U+0020-007E,U+00AB,U+00BB,
       U+00B7,U+2013,U+2014,U+2018,U+2019,U+201C,U+201D,U+2026,U+2039,U+203A"
       --layout-features="kern" --flavor=woff2 --output-file=...
   Radius rule: surfaces 12px (--r), controls 8px (--r-ctl), badges 4px (--r-tag).
   ========================================================================== */

@font-face{font-family:Almarai;font-style:normal;font-weight:700;font-display:swap;
  src:url(../fonts/almarai-arabic-700.woff2) format('woff2');
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:Almarai;font-style:normal;font-weight:800;font-display:swap;
  src:url(../fonts/almarai-arabic-800.woff2) format('woff2');
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:Almarai;font-style:normal;font-weight:700;font-display:swap;
  src:url(../fonts/almarai-latin-700.woff2) format('woff2');
  unicode-range:U+0020-007E,U+00AB,U+00BB,U+00B7,U+2013,U+2014,U+2018,U+2019,U+201C,U+201D,U+2026,U+2039,U+203A}
@font-face{font-family:Plex;font-style:normal;font-weight:400;font-display:swap;
  src:url(../fonts/plex-arabic-400.woff2) format('woff2');
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:Plex;font-style:normal;font-weight:600;font-display:swap;
  src:url(../fonts/plex-arabic-600.woff2) format('woff2');
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:Plex;font-style:normal;font-weight:400;font-display:swap;
  src:url(../fonts/plex-latin-400.woff2) format('woff2');
  unicode-range:U+0020-007E,U+00AB,U+00BB,U+00B7,U+2013,U+2014,U+2018,U+2019,U+201C,U+201D,U+2026,U+2039,U+203A}
@font-face{font-family:Plex;font-style:normal;font-weight:600;font-display:swap;
  src:url(../fonts/plex-latin-600.woff2) format('woff2');
  unicode-range:U+0020-007E,U+00AB,U+00BB,U+00B7,U+2013,U+2014,U+2018,U+2019,U+201C,U+201D,U+2026,U+2039,U+203A}

/* --- tokens --------------------------------------------------------------- */
:root{
  --paper:#F9F6F0; --paper-2:#FFFDF9; --card:#FFFFFF; --line:#E4DED2;
  --ink:#1A2A3A; --ink-2:#22364A; --ink-3:#2F4660;
  --burg:#800020; --burg-2:#66001A;
  --text:#1A2A3A; --muted:#55657A; --on-ink:#F9F6F0; --on-ink-mut:#B7C3D0;

  --fd:Almarai,'Segoe UI',Tahoma,sans-serif;         /* display */
  --f:Plex,'Segoe UI',Tahoma,sans-serif;              /* text */
  --measure:640px;
  --band-y:clamp(52px,11vw,88px);
  --gut:clamp(18px,5vw,28px);
  --r:12px; --r-ctl:8px; --r-tag:4px;

  --fg:var(--text); --fg-mut:var(--muted); --accent:var(--burg); --hair:var(--line); --rule:var(--ink);
}

/* --- base ----------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--paper);color:var(--text);font:400 17px/1.9 var(--f);overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
strong,b{font-weight:600}
::selection{background:var(--ink);color:var(--paper)}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:4px}
.band-ink :focus-visible,.site-head :focus-visible{outline-color:var(--paper)}

/* --- header --------------------------------------------------------------- */
.site-head{background:var(--ink);color:var(--on-ink);padding:14px var(--gut)}
.site-head .wrap{max-width:1040px;display:flex;align-items:center;justify-content:center}
.site-head .logo{display:block;line-height:0}
.site-head .logo img{height:34px;width:auto}

/* --- bands ---------------------------------------------------------------- */
.band{padding:var(--band-y) var(--gut);position:relative}
.band-paper{background:var(--paper)}
.band-paper-2{background:var(--paper-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.band-ink{background:var(--ink);color:var(--on-ink);--fg:var(--on-ink);--fg-mut:var(--on-ink-mut);--accent:var(--on-ink);--hair:var(--ink-3);--rule:var(--on-ink-mut)}
.wrap{max-width:var(--measure);margin-inline:auto}

/* --- section header ------------------------------------------------------- */
.sec-head{margin-bottom:clamp(20px,4vw,30px)}
.label{display:block;font-weight:600;font-size:13px;line-height:1;color:var(--accent)}
.label::after{content:'';display:block;width:44px;height:2px;background:var(--rule);margin-top:13px;margin-bottom:15px}
h1,h2,h3{font-family:var(--fd);font-weight:800;color:var(--fg)}
h1{font-size:clamp(30px,7.6vw,54px);line-height:1.3}
h2{font-size:clamp(22px,5.2vw,30px);line-height:1.35}
h3{font-size:clamp(19px,4.6vw,21px);line-height:1.45;font-weight:700}
p{color:var(--fg)}
h2 em,.closer em{font-style:normal;color:var(--burg)}
.lead{font-size:clamp(17px,4.4vw,20px);line-height:1.8;color:var(--fg-mut)}
.micro{font-weight:600;font-size:13px;color:var(--fg-mut)}

/* --- badge ---------------------------------------------------------------- */
.badge{display:inline-block;background:var(--burg);color:#fff;font:600 13px/1 var(--f);padding:8px 12px;border-radius:var(--r-tag);margin-bottom:14px}

/* --- CTA ------------------------------------------------------------------ */
.cta-btn{
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--burg);color:#fff;
  font:700 18px/1.2 var(--fd);text-decoration:none;border:0;cursor:pointer;
  padding:17px 30px;min-height:52px;border-radius:var(--r-ctl);
  box-shadow:0 1px 0 rgba(26,42,58,.18);
  transition:background .16s ease,transform .12s ease;
}
.cta-btn:hover{background:var(--burg-2)}
.cta-btn:active{transform:translateY(1px)}
.cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin-top:26px}
/* Price group: one flex row, three levels. 1) sale price — display face, 800, brand
   colour, the only heavy element. 2) anchor — text face 400, muted, struck; sized in px
   so it never scales with the band. 3) discount tag — smallest, tinted not filled, so
   it never competes with the price. One 10px gap between siblings; note drops below. */
.price-line{display:flex;flex-wrap:wrap;align-items:center;column-gap:10px;row-gap:6px;font-family:var(--fd);font-weight:800;font-size:19px;line-height:1.2;font-variant-numeric:tabular-nums;color:var(--fg-mut);margin-top:clamp(26px,5vw,34px)}
.price-line .amt{color:var(--burg);font-size:1.4em;line-height:1}
.band-ink .price-line .amt{color:var(--on-ink)}
.price-note{flex-basis:100%;font:400 14px/1.7 var(--f);color:var(--muted)}
.amt-usd{font:600 13px/1 var(--f);color:var(--muted)}
#sticky-bar .amt-usd{color:var(--on-ink-mut)}
.price-anchor{display:none;font:400 15px/1 var(--f);color:var(--muted);text-decoration:line-through;text-decoration-thickness:1px}
html[data-anchor="on"] .price-anchor{display:inline}
.band-ink .price-anchor{color:var(--on-ink-mut)}
.price-off{display:none;font:600 13px/1 var(--f);color:var(--burg);background:rgba(128,0,32,.08);padding:5px 8px;border-radius:var(--r-tag);white-space:nowrap}
html[data-anchor="on"] .price-off{display:inline-block}
.band-ink .price-off{color:var(--on-ink);background:rgba(249,246,240,.14)}
.trust{font-size:14px;line-height:1.7;color:var(--fg-mut);margin-top:16px}

/* --- product: gallery + buy box ------------------------------------------- */
#hero{padding-top:clamp(18px,4vw,32px);padding-bottom:clamp(28px,6vw,40px)}
.pdp{display:grid;gap:clamp(24px,5vw,34px)}
.pdp > *{min-width:0}
/* gallery: Swiper, same set-up as the Metro Bookstore product page */
.media-main .swiper{user-select:none}
.media-slide{margin:0;aspect-ratio:1;background:var(--paper-2);overflow:hidden;box-sizing:border-box}
.media-slide img{width:100%;height:100%;object-fit:contain;display:block}
/* dots (Gymshark): 4px squares, 8px apart, the active one a 20px pill -- set below the image in ink */
.gal-dots{display:flex;justify-content:center;align-items:center;gap:8px;padding:14px 9px 0;min-height:18px}
.gal-dot{flex:0 0 auto;pointer-events:auto;width:4px;height:4px;margin:0;padding:0;border:0;border-radius:0;background:var(--ink);opacity:.22;cursor:pointer;transition:width .5s ease-in-out,opacity .5s ease-in-out}
.gal-dot.is-active{width:20px;opacity:1}
.gal-dot:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.gal-dots.is-locked{display:none}
.gal-arrow{position:absolute;top:50%;z-index:2;display:none;align-items:center;justify-content:center;width:50px;height:50px;margin:0;padding:0;border:1px solid var(--line);border-radius:50%;background:#fff;color:var(--text);cursor:pointer;transform:translateY(-50%);opacity:0;visibility:hidden;transition:opacity .2s,visibility .2s,background-color .2s,color .2s}
.gal-prev{inset-inline-start:10px}
.gal-next{inset-inline-end:10px}
.gal-arrow:hover{background:var(--ink);color:var(--on-ink);border-color:var(--ink)}
.gal-arrow:focus-visible{opacity:1;visibility:visible;outline:2px solid var(--ink);outline-offset:2px}
/* phones: the gallery runs edge to edge like the reference */
@media (max-width:899.98px){.media{margin-inline:calc(var(--gut) * -1)}}

.buybox h1{font-size:clamp(25px,5.8vw,34px);line-height:1.4;margin-top:6px}
.buybox .byline{margin-top:clamp(16px,4vw,22px);padding-top:16px;border-top:1px solid var(--line);font-size:15px;line-height:1.8;color:var(--muted)}
.rating{margin-top:8px;font-size:15px;line-height:1.7;color:var(--muted)}
.sec-head .rating{margin-top:10px}
.buybox .price-line{margin-top:12px}
.buybox .includes{margin-top:10px}
.buybox .includes li{font-size:15px;padding-block:10px}
.buybox .cta-row{margin-top:clamp(20px,4vw,26px)}
.buybox .cta-btn{width:100%}

/* --- story ---------------------------------------------------------------- */

/* --- the beats (a real sequence: one hafiz's timeline) --------------------- */
.beats{list-style:none;counter-reset:b;padding:0;margin-top:4px}
.beats li{counter-increment:b;position:relative;padding:15px 50px 15px 0;border-bottom:1px solid var(--hair);font-size:17px;line-height:1.75}
.beats li:last-child{border-bottom:0}
.beats li::before{content:counter(b,decimal-leading-zero);position:absolute;right:0;top:17px;font:800 14px/1 var(--fd);font-variant-numeric:tabular-nums;color:var(--fg-mut)}
.closer{font-family:var(--fd);font-weight:800;font-size:clamp(20px,4.8vw,26px);line-height:1.45;margin-top:28px;padding-inline-start:18px;border-inline-start:3px solid var(--ink);color:var(--fg)}

/* --- pull quote ----------------------------------------------------------- */
.pull{margin-top:clamp(28px,5vw,36px);padding-top:26px;border-top:1px solid var(--hair);font-size:clamp(17px,4.2vw,19px);line-height:1.85;color:var(--fg)}
.pull::before{content:'\00BB';display:block;font:800 44px/.6 var(--fd);color:var(--ink);opacity:.35;margin-bottom:16px}
.pull cite{display:block;font-style:normal;color:var(--fg-mut);font-size:13px;margin-top:14px}

/* --- the ladder: four covers, four outcomes (signature) --------------------- */
.wrap-wide{max-width:1040px}
.ladder{list-style:none;padding:0;margin:0;display:grid;gap:clamp(22px,4vw,28px)}
.rung{display:grid;grid-template-columns:104px minmax(0,1fr);gap:16px;align-items:start}
.rung img{width:104px;aspect-ratio:4/5;object-fit:cover;border-radius:var(--r);background:var(--paper);border:1px solid var(--line)}
.rung h3{margin:0 0 4px}
.rung .q{color:var(--burg);font-weight:600;font-size:15px;margin-bottom:8px}
.rung p{color:var(--muted);font-size:15px;line-height:1.8}
.rung .fact{display:inline-block;margin-top:10px;padding:6px 10px;border-radius:var(--r-tag);background:var(--paper);border:1px solid var(--line);color:var(--text);font-weight:600;font-size:13px;line-height:1.6}
.method-closer{margin-top:clamp(30px,6vw,40px);font-family:var(--fd);font-weight:700;font-size:clamp(18px,4.4vw,22px);line-height:1.6;color:var(--text)}

/* --- proof ---------------------------------------------------------------- */
.quote-lead{position:relative;margin-bottom:clamp(30px,6vw,44px)}
.quote-lead::before{content:'\00BB';display:block;font:800 44px/.6 var(--fd);color:var(--ink);opacity:.35;margin-bottom:16px}
.quote-lead blockquote{position:relative;font-size:clamp(18px,4.8vw,23px);line-height:1.7}
.quote-lead figcaption{margin-top:16px;font-size:13px;color:var(--muted);display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.reviews{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;cursor:grab;user-select:none;padding:2px var(--gut) 10px;margin-inline:calc(var(--gut) * -1);scrollbar-width:thin}
.review{flex:0 0 80%;max-width:330px;scroll-snap-align:start;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px 20px;font-size:15px;line-height:1.8}
.review .who{color:var(--muted);font-size:13px;margin-top:12px}
.stars{color:var(--burg);letter-spacing:2px;font-size:14px}
.statgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:clamp(26px,5vw,34px)}
.statgrid div{padding:14px 16px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);font-size:14px;line-height:1.7;color:var(--muted);display:flex;flex-direction:column;gap:2px}
.statgrid strong{color:var(--text);font-weight:600}
.statgrid .fig{font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}

/* --- author --------------------------------------------------------------- */
.author{display:grid;grid-template-columns:104px minmax(0,1fr);gap:16px 18px;align-items:start}
.author-photo{width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:var(--r);border:1px solid var(--line);background:var(--card)}
.author .pull{grid-column:1 / -1;margin-top:10px}
@media (min-width:600px){.author{grid-template-columns:168px minmax(0,1fr);gap:0 26px}.author .pull{grid-column:2;margin-top:clamp(28px,5vw,36px)}}
.author-body{font-size:17px;line-height:1.9}
.author-body strong{font-weight:600}

/* --- who for: two-column cards, not another hairline list ------------------ */
.who-grid{display:grid;grid-template-columns:1fr;gap:12px}
.who-row{display:block;padding:16px 18px;background:var(--card);border:1px solid var(--line);border-radius:var(--r)}
.who-row .dot{display:none}
.who-row p{font-size:15px;line-height:1.75;color:var(--muted)}
.who-row strong{display:block;color:var(--text);font-family:var(--fd);font-weight:700;font-size:clamp(19px,4.6vw,21px);line-height:1.5;margin-bottom:4px}

/* --- offer (ink band) ----------------------------------------------------- */
.includes{list-style:none;padding:0;margin-top:6px}
.includes li{position:relative;padding:12px 30px 12px 0;border-bottom:1px solid var(--hair);font-size:17px;line-height:1.7;color:var(--fg)}
.includes li:last-child{border-bottom:0}
.includes li::before{content:'';position:absolute;right:5px;top:18px;width:7px;height:12px;border:solid var(--accent);border-width:0 2px 2px 0;transform:rotate(45deg)}
.offer-what{font-size:clamp(16px,4.2vw,18px);line-height:1.8;color:var(--on-ink-mut);max-width:34ch}
.offer-price{margin-top:clamp(20px,4vw,28px)}
.offer-price .price-line{font-size:clamp(36px,9vw,48px);color:var(--on-ink);margin-top:0;column-gap:12px}
.offer-price .price-anchor{font-size:18px}
.offer-price .price-off{font-size:13px;padding:6px 10px}

/* --- FAQ ------------------------------------------------------------------ */
.faq details{border-bottom:1px solid var(--line)}
.faq details:first-of-type{border-top:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;position:relative;padding:18px 32px 18px 0;min-height:48px;font-weight:600;font-size:17px;line-height:1.6;color:var(--text)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before,.faq summary::after{content:'';position:absolute;right:3px;top:50%;background:var(--ink);transition:transform .18s ease,opacity .18s ease}
.faq summary::before{width:14px;height:2px;margin-top:-1px}
.faq summary::after{width:2px;height:14px;margin-top:-7px;margin-right:6px}
.faq details[open] summary::after{transform:scaleY(0);opacity:0}
.faq details[open] summary{color:var(--burg)}
.faq details p{padding:0 0 20px;font-size:16px;line-height:1.85;color:var(--muted)}

/* --- final CTA ------------------------------------------------------------ */
#final h2{font-size:clamp(25px,6.4vw,40px);line-height:1.3}
#final p{margin-top:18px;font-size:clamp(17px,4.4vw,20px);line-height:1.8;color:var(--muted)}

/* --- sticky bar ----------------------------------------------------------- */
#sticky-bar{position:fixed;bottom:0;inset-inline:0;z-index:50;display:none;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px));background:rgba(26,42,58,.97);border-top:1px solid var(--ink-3);color:var(--on-ink);font:800 18px/1 var(--fd);font-variant-numeric:tabular-nums}
#sticky-bar.show{display:flex}
#sticky-bar .sticky-price{display:flex;align-items:baseline;gap:8px}
#sticky-bar .sticky-price s{display:none;font:400 13px/1 var(--f);color:var(--on-ink-mut);text-decoration-thickness:1px}
html[data-anchor="on"] #sticky-bar .sticky-price s{display:inline}
#sticky-bar .cta-btn{margin:0;flex:1 1 auto;max-width:56%;padding:12px 20px;min-height:48px;font-size:16px}
#sticky-bar .sticky-price{flex:0 0 auto}

/* --- checkout dialog ------------------------------------------------------ */
#checkout-modal{--fg:var(--text);--fg-mut:var(--muted);--accent:var(--burg);--hair:var(--line);border:0;padding:0;margin:auto;max-width:min(560px,100vw);width:100%;max-height:100dvh;background:var(--paper-2);color:var(--text);border-radius:var(--r) var(--r) 0 0;box-shadow:0 -12px 40px rgba(26,42,58,.35);overscroll-behavior:contain}
#checkout-modal[open]{display:block;overflow-y:auto}
/* warm-up: the dialog is rendered full-size but transparent, inert and untouchable, with only the
   embed inside it, so Whop's iframe intersects the viewport, initialises, and reports the buyer's
   currency before the buyer opens checkout (a 1px or display:none embed stays dormant) */
#checkout-modal.is-warming{position:fixed;inset:auto 0 0 auto;width:min(560px,100vw);max-height:100dvh;margin:0;overflow:hidden;opacity:0;pointer-events:none;box-shadow:none}
#checkout-modal.is-warming>:not(#whop-mount){display:none}
#checkout-modal::backdrop{background:rgba(26,42,58,.72);backdrop-filter:blur(2px)}
.modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:18px var(--gut) 12px;border-bottom:1px solid var(--line)}
.modal-head .micro{color:var(--muted)}
.modal-head h2{font-size:20px;line-height:1.4;margin-top:4px}
.modal-close{flex:0 0 auto;width:40px;height:40px;border:1px solid var(--line);border-radius:var(--r-ctl);background:var(--card);color:var(--text);font-size:15px;cursor:pointer}
.modal-close:hover{background:var(--paper)}
.modal-price{padding:10px var(--gut) 0}
.modal-price .price-line{margin-top:0;font-size:17px}
.modal-price .price-anchor{font-size:14px}
#whop-mount{min-height:460px;margin:14px var(--gut) 0;background:#fff;border-radius:var(--r)}
#fallback-cta{display:none;margin:14px var(--gut) 0}
/* Arabic wrap around Whop's English-only embed: steps, our own email field, trust list */
.co-steps{list-style:none;margin:14px var(--gut) 0;padding:0;display:grid;gap:8px}
.co-steps li{display:flex;align-items:center;gap:10px;font-size:15px;line-height:1.5;color:var(--text)}
.co-steps .n{flex:0 0 26px;height:26px;border-radius:50%;background:var(--ink);color:var(--on-ink);font:700 13px/26px var(--f);text-align:center;font-variant-numeric:tabular-nums}
.co-steps li.is-done .n{background:var(--burg)}
.co-steps .en{font-weight:700;direction:ltr;unicode-bidi:isolate}
.co-name,.co-email,.co-country{padding:14px var(--gut) 0}
.co-name input{width:100%;min-height:48px;padding:10px 14px;border:1px solid var(--line);border-radius:var(--r-ctl);background:var(--card);color:var(--text);font:400 16px/1.4 var(--f);margin-top:6px}
.co-name input:focus{outline:2px solid var(--ink);outline-offset:1px}
.co-name label,.co-email label,.co-country label{display:block;font-weight:600;font-size:15px;line-height:1.5}
.co-email .hint,.co-country .hint{margin:2px 0 8px;font-size:13px;line-height:1.6;color:var(--muted)}
.co-email input{width:100%;min-height:48px;padding:10px 14px;border:1px solid var(--line);border-radius:var(--r-ctl);background:var(--card);color:var(--text);font:400 16px/1.4 var(--f);direction:ltr;text-align:left}
.co-email input:focus,.co-country select:focus{outline:2px solid var(--ink);outline-offset:1px}
.co-country select{width:100%;min-height:48px;padding:10px 40px 10px 14px;border:1px solid var(--line);border-radius:var(--r-ctl);background:var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%231A2A3A' stroke-width='2'/%3E%3C/svg%3E") no-repeat left 14px center;color:var(--text);font:400 16px/1.4 var(--f);appearance:none;-webkit-appearance:none}
.co-country select:invalid{color:var(--muted)}
.co-email input[aria-invalid="true"]{border-color:var(--burg)}
.co-email .err{display:none;margin:6px 0 0;font-size:13px;line-height:1.5;color:var(--burg)}
.co-email input[aria-invalid="true"]~.err{display:block}
.co-trust{list-style:none;margin:12px var(--gut) 0;padding:0 0 calc(16px + env(safe-area-inset-bottom,0px));font-size:14px;line-height:1.7;color:var(--muted)}
.co-trust li{position:relative;padding-inline-start:18px}
.co-trust li::before{content:'';position:absolute;inset-inline-start:2px;top:.75em;width:6px;height:6px;border-radius:50%;background:var(--burg)}
.co-trust a{color:var(--text)}
@media (min-width:480px){.co-steps{grid-template-columns:repeat(2,1fr)}}
@media (min-width:640px){#checkout-modal{border-radius:var(--r);max-height:calc(100dvh - 48px);box-shadow:0 24px 60px rgba(26,42,58,.4)}}
@media (max-width:639.98px){#checkout-modal{margin-top:auto;margin-bottom:0}}

/* --- payment icons under the first CTA ------------------------------------ */
.pay-icons{margin-top:14px;display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap}
.pay-label{font-size:13px;color:var(--muted)}
.pay-icons ul{list-style:none;margin:0;padding:0;display:flex;gap:8px}
.pay-icons li{display:inline-flex}
.pay-icons svg{display:block;width:46px;height:29px;border:1px solid var(--line);border-radius:5px;background:#fff}

/* --- product description ---------------------------------------------------- */
.desc .lead{font-size:clamp(17px,4.4vw,19px);line-height:1.9;color:var(--text)}
.desc-book{margin-top:clamp(22px,5vw,30px);padding-top:clamp(18px,4vw,22px);border-top:1px solid var(--line)}
.desc-book p{margin:0;font-size:16px;line-height:1.9;color:var(--muted)}
.desc-book h3{margin:6px 0 8px;font-family:var(--fd);font-weight:700;line-height:1.5;color:var(--text)}
.desc-book .fact{display:inline-block;margin-top:12px;padding:6px 10px;border-radius:var(--r-tag);background:var(--paper-2);border:1px solid var(--line);color:var(--text);font-size:14px;line-height:1.5}
.desc-who{margin-top:clamp(24px,5vw,32px);padding:18px 20px;background:var(--card);border:1px solid var(--line);border-radius:var(--r)}
.desc-who p{margin:0 0 8px;font-size:16px;color:var(--text)}
.desc-who ul{list-style:none;margin:0;padding:0}
.desc-who li{position:relative;padding:6px 22px 6px 0;font-size:16px;line-height:1.8;color:var(--muted)}
.desc-who li::before{content:'';position:absolute;right:4px;top:.95em;width:7px;height:7px;border-radius:50%;background:var(--burg)}
.desc-closer{margin-top:clamp(22px,5vw,28px);font-family:var(--fd);font-weight:700;font-size:clamp(17px,4.4vw,20px);line-height:1.7;color:var(--text)}

/* --- USP strip ------------------------------------------------------------ */
.usp-band{padding-block:clamp(22px,5vw,34px)}
.usp{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.usp li{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:16px 12px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);text-align:start}
.usp-ic{display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:50%;background:var(--paper);border:1px solid var(--line);color:var(--ink)}
.usp p{margin:0;font-size:15px;line-height:1.7;color:var(--text)}
@media (min-width:600px){.usp{grid-template-columns:repeat(4,1fr)}.usp p{font-size:15px}}
@media (min-width:900px){.usp li{flex-direction:row;text-align:start;gap:14px;padding:18px 16px}.usp-ic{flex:0 0 52px}}

/* --- footer --------------------------------------------------------------- */
footer{background:var(--ink);color:var(--on-ink-mut);padding:32px var(--gut) 96px;font-size:14px;line-height:2}
footer .wrap{max-width:var(--measure)}
footer p{color:var(--on-ink-mut)}
footer a{color:var(--on-ink);text-decoration:none;border-bottom:1px solid rgba(249,246,240,.35)}
.foot-links{display:flex;gap:22px;margin-top:6px}

/* --- thanks page ---------------------------------------------------------- */
.thanks{min-height:100svh;display:flex;align-items:center}
.thanks h1{font-size:clamp(27px,6.6vw,42px)}
.thanks .lead{margin:clamp(22px,5vw,30px) 0 6px}
.thanks .beats li{border-bottom-color:var(--hair)}
.thanks .closer{border-inline-start-color:var(--on-ink-mut)}

/* --- motion --------------------------------------------------------------- */
@media (min-width:900px) and (hover:hover){
  .gal-arrow{display:flex}
  .media-main .swiper:hover .gal-arrow{opacity:1;visibility:visible}
  .media-main .swiper:hover .gal-arrow.is-disabled{opacity:.5;cursor:default}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important;transition:none !important}
}

/* --- responsive ----------------------------------------------------------- */
@media (min-width:600px){
  .review{flex-basis:52%}
  .who-grid{grid-template-columns:1fr 1fr}
  .who-grid .who-row:last-child{grid-column:1 / -1}
  .rung{grid-template-columns:132px minmax(0,1fr);gap:20px}
  .rung img{width:132px}
}
@media (min-width:900px){
  :root{--measure:660px;--gut:40px}
  /* one reading edge: every band pads to the 1040px hero frame and its column
     sits at the frame's start (right) edge instead of floating centred */
  .band,footer{padding-inline:max(var(--gut),calc((100% - 1040px) / 2))}
  .band>.wrap,footer>.wrap{margin-inline:0 auto}
  #hero{padding-top:40px}
  #hero .wrap{max-width:1040px}
  .pdp{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(34px,5vw,56px);align-items:start}
  .buybox{position:sticky;top:24px}
  .review{flex-basis:38%}
  .site-head .logo img{height:40px}
  /* the ladder becomes four columns: covers side by side, read right to left */
  .ladder{grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
  .rung{grid-template-columns:1fr;gap:14px}
  .rung img{width:100%}
}

/* --- legal pages ---------------------------------------------------------- */
.legal h1{font-size:clamp(26px,6vw,38px);line-height:1.35}
.legal .updated{margin-top:10px;font-size:14px;color:var(--fg-mut)}
.legal .intro{margin-top:20px;font-size:18px}
.legal h2{margin-top:clamp(30px,6vw,44px);font-size:clamp(18px,4.4vw,21px);line-height:1.6;padding-inline-start:14px;border-inline-start:3px solid var(--ink)}
.legal p{margin-top:14px}
.legal ul{margin-top:12px;padding:0;list-style:none}
.legal li{position:relative;padding-inline-start:20px;margin-top:9px}
.legal li::before{content:'';position:absolute;inset-inline-start:0;top:14px;width:7px;height:7px;border-radius:50%;background:var(--ink)}
.legal a{color:var(--burg);text-decoration:none;border-bottom:1px solid rgba(128,0,32,.35)}
.legal .back{display:inline-block;margin-top:clamp(34px,7vw,48px);font-weight:600;font-size:15px}