@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Archivo:wght@400;500;600;700&family=Courier+Prime:wght@400;700&display=swap');

/* ═══════════════════════════════════════════
   NON GAMSTOP REVIEW — TEMPLATE STYLES (UK)
   Palette: Union navy · Union red · white · crown gold
   ═══════════════════════════════════════════ */

/* ── DESIGN TOKENS ── */
:root{
  --paper:#ECEEF3;      /* cool paper */
  --paper-2:#FAFBFD;
  --ink:#0C1633;        /* navy-black */
  --ink-soft:#56607A;
  --navy:#012169;       /* Union Jack blue */
  --navy-2:#00144A;
  --red:#C8102E;        /* Union Jack red */
  --red-2:#9E0B23;
  --white:#FFFFFF;
  --gold:#C9A227;       /* crown gold (stars) */
  --gold-2:#A8841A;
  --display:'Archivo Black',Impact,sans-serif;
  --sans:'Archivo',-apple-system,sans-serif;
  --mono:'Courier Prime',monospace;
}

/* ── BASE ── */
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.08;
  background-image:radial-gradient(var(--navy) .6px,transparent .6px);background-size:4px 4px}
body::after{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.6;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E")}
.wrap{position:relative;z-index:1;max-width:1180px;margin:0 auto;padding:0 26px}
.mono{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;font-weight:700}

/* ═══ TOPBAR ═══ */
.topbar{position:relative;z-index:3;background:var(--ink);color:var(--white)}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;padding:9px 26px;gap:14px}
.live{display:flex;align-items:center;gap:8px;color:#AEB6CC}
.dot{width:6px;height:6px;background:var(--red)}
/* ── BRAND: crest + wordmark ── */
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:inherit}
.mk{position:relative;width:30px;height:34px;flex:none;display:grid;place-items:center;padding-top:3px;
  font-family:var(--display);font-size:15px;color:var(--white);background:var(--red);
  clip-path:polygon(0 0,100% 0,100% 62%,50% 100%,0 62%);filter:drop-shadow(2px 2px 0 var(--white))}
.mk::before{content:"";position:absolute;inset:3px;clip-path:polygon(0 0,100% 0,100% 62%,50% 100%,0 62%);
  border:1.5px solid rgba(255,255,255,.55);pointer-events:none}
.mk::after{content:"★";position:absolute;top:-1px;font-size:6px;color:var(--gold);line-height:1}
.mk{overflow:visible}
.brand .bt{display:flex;flex-direction:column;gap:4px}
.brand b{display:flex;align-items:center;gap:6px;font-family:var(--display);font-size:15px;letter-spacing:.01em;line-height:1}
.brand b i{font-style:normal;font-family:var(--mono);font-size:8.5px;letter-spacing:.14em;font-weight:700;
  background:var(--red);color:var(--white);padding:3px 6px 2px;box-shadow:2px 2px 0 var(--white)}
.brand span{display:flex;align-items:center;gap:6px;color:#AEB6CC;font-size:8px}
.brand span em{font-style:normal;color:var(--gold);letter-spacing:1px}
.geo{display:flex;align-items:center;gap:7px;border:1.5px solid var(--white);padding:4px 11px;color:var(--white)}
/* mini Union Jack before "UK" */
.geo::before{content:"";width:16px;height:10px;display:block;
  background:
    linear-gradient(90deg,transparent 42%,var(--red) 42% 58%,transparent 58%),
    linear-gradient(0deg,transparent 38%,var(--red) 38% 62%,transparent 62%),
    linear-gradient(90deg,transparent 34%,#fff 34% 66%,transparent 66%),
    linear-gradient(0deg,transparent 28%,#fff 28% 72%,transparent 72%),
    linear-gradient(33deg,transparent 45%,#fff 45% 55%,transparent 55%),
    linear-gradient(-33deg,transparent 45%,#fff 45% 55%,transparent 55%),
    var(--navy)}

/* ═══ HERO BAND — premium navy: spotlight + sunburst rays + pinstripe + slow light sweep ═══ */
.band{color:var(--white);border-bottom:3px solid var(--ink);position:relative;z-index:2;overflow:hidden;
  background:
    radial-gradient(60% 140% at 50% 0%,rgba(66,110,220,.55) 0%,transparent 60%),        /* top spotlight */
    radial-gradient(40% 120% at 0% 100%,rgba(200,16,46,.28) 0%,transparent 70%),        /* red glow left */
    radial-gradient(40% 120% at 100% 100%,rgba(200,16,46,.28) 0%,transparent 70%),      /* red glow right */
    linear-gradient(180deg,#022A7E 0%,var(--navy) 45%,#000E3A 100%)}
/* fine sunburst rays from the centre, fading out */
.band::before{content:"";position:absolute;left:50%;top:50%;width:2400px;height:2400px;transform:translate(-50%,-50%);opacity:.16;pointer-events:none;
  background:repeating-conic-gradient(from 0deg,rgba(255,255,255,.9) 0deg .6deg,transparent .6deg 6deg);
  -webkit-mask:radial-gradient(circle,#000 0,rgba(0,0,0,.6) 18%,transparent 34%);mask:radial-gradient(circle,#000 0,rgba(0,0,0,.6) 18%,transparent 34%);
  animation:band-rot 120s linear infinite}
@keyframes band-rot{to{transform:translate(-50%,-50%) rotate(360deg)}}
/* white–red–white stripe along the bottom */
.band::after{content:"";position:absolute;left:0;right:0;bottom:0;height:9px;
  background:linear-gradient(180deg,var(--white) 0 3px,var(--red) 3px 6px,var(--white) 6px 9px)}
/* pinstripe texture + slow diagonal light sweep */
.band .wrap::before{content:"";position:absolute;inset:0 -100vw;pointer-events:none;opacity:.5;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 1px,transparent 1px 7px)}
.band .wrap::after{content:"";position:absolute;top:-50%;bottom:-50%;left:-60vw;width:40vw;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.09),transparent);transform:skewX(-20deg);
  animation:band-sweep 9s 2.5s ease-in-out infinite}
@keyframes band-sweep{0%{left:-60vw}45%,100%{left:120vw}}
.hero>*{position:relative;z-index:1}
@media(prefers-reduced-motion:reduce){.band::before,.band .wrap::after{animation:none}}
.hero{position:relative;display:flex;align-items:center;justify-content:center;gap:26px;flex-wrap:wrap;padding:26px 0 32px;text-align:center}
.eyebrow{display:inline-flex;align-items:center;gap:8px;background:var(--white);color:var(--navy);border:2px solid var(--ink);padding:7px 15px;white-space:nowrap;box-shadow:3px 3px 0 var(--red)}
h1{font-family:var(--display);font-size:clamp(32px,4.8vw,54px);line-height:.94;letter-spacing:-.03em;white-space:nowrap;text-transform:uppercase}
/* ── H1 static look: NON (white plate) · GAMSTOP (red plate) · CASINOS (outline) ── */
h1 .w1{position:relative;display:inline-block;color:var(--navy);background:var(--white);padding:2px 12px 4px;
  box-shadow:4px 4px 0 var(--red)}
h1 em{position:relative;z-index:0;display:inline-block;font-style:normal;color:var(--white);padding:2px 12px 4px}
h1 em::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--red);box-shadow:4px 4px 0 var(--ink)}
h1 .gs{display:inline-block}
h1 .u{display:inline-block;font-style:normal;-webkit-text-stroke:2px var(--white);-webkit-text-fill-color:transparent}
h1 .l{display:inline-block;font-style:normal}

/* ═══ H1 ANIMATION — "NON" IS THE STAR ═══
   INTRO (~1.8s)
   1) NON plate slams in from huge + blur, its letters flip in one by one
   2) red GAMSTOP plate wipes in, letters pop up
   3) CASINOS letters rise in one by one
   LOOP (every 4.5s, all words react in sequence)
   1) NON stamps: big kick + tilt + white shockwave ring + letters jump in a wave (flash red)
   2) GAMSTOP plate gets "hit" and shakes
   3) CASINOS letters light up white one after another */
h1{--cy:4.5s;--st:2.2s}

/* ── NON ── */
h1 .w1{animation:n-slam .6s .05s cubic-bezier(.25,1.5,.5,1) both,n-kick var(--cy) var(--st) ease-out infinite}
h1 .w1::after{content:"";position:absolute;inset:-3px;border:3px solid var(--white);pointer-events:none;opacity:0;
  animation:n-ring var(--cy) var(--st) ease-out infinite}
h1 .w1 .l{transform-origin:50% 100%;
  animation:n-flip .45s calc(.35s + var(--i)*.09s) cubic-bezier(.3,1.5,.5,1) both,
            n-jump var(--cy) calc(var(--st) + .25s + var(--i)*.07s) ease-out infinite}

/* ── GAMSTOP ── */
h1 em{animation:g-shake var(--cy) var(--st) ease-in-out infinite}
h1 em::before{transform-origin:left center;animation:g-wipe .45s .75s cubic-bezier(.7,0,.3,1) both}
h1 .gs .l{animation:g-pop .45s calc(1s + var(--i)*.05s) cubic-bezier(.2,.9,.3,1.5) both}

/* ── CASINOS ── */
h1 .u .l{animation:c-rise .5s calc(1.35s + var(--i)*.06s) cubic-bezier(.2,.9,.3,1.3) both,
                   c-wave var(--cy) calc(var(--st) + .7s + var(--i)*.08s) ease-in-out infinite}

/* intro keyframes */
@keyframes n-slam{0%{opacity:0;transform:scale(3);filter:blur(6px)}
  60%{opacity:1;transform:scale(.9);filter:none}100%{opacity:1;transform:none}}
@keyframes n-flip{from{opacity:0;transform:rotateX(90deg) translateY(-30%)}to{opacity:1;transform:none}}
@keyframes g-wipe{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes g-pop{from{opacity:0;transform:translateY(70%) scale(.8)}to{opacity:1;transform:none}}
@keyframes c-rise{from{opacity:0;transform:translateY(60%)}to{opacity:1;transform:none}}

/* loop keyframes */
@keyframes n-kick{
  0%{transform:none;box-shadow:4px 4px 0 var(--red)}
  4%{transform:scale(1.12) translate(-2px,-2px);box-shadow:8px 8px 0 var(--red)}
  8%{transform:scale(.95);box-shadow:2px 2px 0 var(--red)}
  12%,100%{transform:none;box-shadow:4px 4px 0 var(--red)}}
@keyframes n-ring{0%,5%{opacity:0;transform:scale(1)}7%{opacity:.9;transform:scale(1.05)}20%,100%{opacity:0;transform:scale(1.4,1.6)}}
@keyframes n-jump{0%{transform:none;color:var(--navy)}
  5%{transform:translateY(-12%) scale(1.06);color:var(--red)}
  11%{transform:none;color:var(--navy)}100%{transform:none;color:var(--navy)}}
@keyframes g-shake{0%,7%{transform:none}9%{transform:translateX(7px) rotate(1.5deg)}
  11%{transform:translateX(-4px) rotate(-1deg)}13%{transform:translateX(2px)}15%,100%{transform:none}}
@keyframes c-wave{0%,100%{-webkit-text-fill-color:transparent;text-shadow:none}
  6%{-webkit-text-fill-color:var(--white);text-shadow:0 0 14px rgba(255,255,255,.7)}
  14%{-webkit-text-fill-color:transparent;text-shadow:none}}

@media(prefers-reduced-motion:reduce){
  h1 *,h1 em::before,h1 .w1::after{animation:none!important}
}

/* ═══ TICKER ═══ */
.ticker{background:var(--red);border-bottom:3px solid var(--ink);overflow:hidden;position:relative;z-index:2}
.ticker div{display:flex;gap:34px;padding:7px 0;white-space:nowrap;animation:run 26s linear infinite;font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--white)}
@keyframes run{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.ticker span{display:flex;gap:34px}

/* ═══ CARDS GRID ═══ */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:stretch;padding-top:34px}
.card{position:relative;background:var(--paper-2);border:2.5px solid var(--ink);box-shadow:6px 6px 0 var(--ink);
  transition:transform .22s cubic-bezier(.3,.8,.3,1),box-shadow .22s;display:flex;flex-direction:column;height:100%}
.card:hover{transform:translate(-3px,-3px);box-shadow:10px 10px 0 var(--red)}

/* ── RANK ROW ── */
.rank{display:flex;align-items:center;justify-content:space-between;padding:12px 15px 0}
.no{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--ink-soft)}
.no b{font-family:var(--display);font-size:22px;margin-left:5px;letter-spacing:-.02em}
.n1 b{color:var(--red)}
.n2 b{color:var(--navy)}
.n3 b{color:var(--gold-2)}
.stars{font-size:13px;letter-spacing:2px;color:var(--gold);line-height:1}

/* ══════════ LOGO SLOT ══════════ */
.logo-slot{position:relative;margin:12px 0 0;height:230px;overflow:hidden;display:grid;place-items:stretch;
  border-top:2.5px solid var(--ink);border-bottom:2.5px solid var(--ink)}
.logo-slot .scene{position:absolute;inset:0;z-index:1}
.logo-slot .scene::before{content:"";position:absolute;inset:0;
  background:radial-gradient(92% 74% at 50% 12%,rgba(255,255,255,.34),transparent 64%)}
.logo-slot .scene::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(12,22,51,.02) 0%,rgba(12,22,51,.34) 58%,rgba(12,22,51,.7) 100%)}
.logo-slot .rays{position:absolute;inset:-34%;z-index:2;opacity:.11;pointer-events:none;
  background-image:repeating-conic-gradient(from 0deg at 50% 20%,rgba(255,255,255,.8) 0deg 5deg,transparent 5deg 14deg)}
.logo-slot .glow{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;pointer-events:none;
  width:78%;height:62%;background:radial-gradient(closest-side,rgba(255,255,255,.24),transparent 72%);filter:blur(6px)}
.logo-slot .halftone{position:absolute;inset:0;z-index:3;opacity:.15;pointer-events:none;
  background-image:radial-gradient(var(--ink) 1px,transparent 1px);background-size:5px 5px}
.logo-slot .shine{position:absolute;top:-60%;left:-45%;width:50%;height:220%;z-index:5;transform:rotate(20deg);pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);transition:left .9s ease}
.card:hover .logo-slot .shine{left:132%}
/* brand image fits INSIDE the slot — no cropping, no overflow */
.logo-slot .logo{position:absolute;inset:0;z-index:4;width:100%;height:100%;
  object-fit:contain;object-position:center;padding:22px 26px;color:transparent;font-size:0}

/* fallback casino name — hidden by default; shown only when the logo img fails to load (onerror adds .no-logo to the slot) */
.logo-slot .logo-fallback{display:none;position:absolute;inset:0;z-index:4;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  padding:0 18px;text-align:center;pointer-events:none}
.logo-slot.no-logo .logo-fallback{display:flex}
.logo-slot.no-logo .logo{display:none}
.logo-slot .logo-fallback b{font-family:var(--display);font-size:clamp(28px,3.4vw,40px);line-height:1;letter-spacing:-.03em;text-transform:uppercase;
  color:var(--white);text-shadow:3px 3px 0 var(--ink),0 0 24px rgba(255,255,255,.25);word-break:break-word}
.logo-slot .logo-fallback small{font-family:var(--mono);font-size:9.5px;letter-spacing:.3em;text-transform:uppercase;font-weight:700;
  color:var(--ink);background:var(--white);padding:4px 10px 3px 12px;box-shadow:2px 2px 0 var(--red)}
/* per-brand scene tint (visible if image is missing / transparent) */
.sc-blue{background:linear-gradient(168deg,#2A55B8 0%,#012169 56%,#000D2E 100%)}
.sc-red{background:linear-gradient(168deg,#E8364E 0%,#9E0B23 56%,#3D0410 100%)}
.sc-navy{background:linear-gradient(168deg,#4A5A84 0%,#1B2748 56%,#0A1022 100%)}

/* ── CARD BODY ── */
.body{padding:16px 15px 18px;display:flex;flex-direction:column;flex:1 1 auto}
.name{font-family:var(--display);font-size:21px;letter-spacing:-.025em;text-align:center;text-transform:uppercase}
.div{height:2px;margin:13px 0;background:repeating-linear-gradient(90deg,var(--red) 0 5px,transparent 5px 10px,var(--navy) 10px 15px,transparent 15px 20px)}

/* ── BONUS ── */
.bonus{border:2px solid var(--ink);padding:13px;text-align:center;box-shadow:3px 3px 0 var(--red)}
.bonus .lab{margin-bottom:6px;font-size:8.5px;color:var(--red)}
.bonus b{display:block;font-family:var(--display);font-size:21px;line-height:1.12;letter-spacing:-.03em;text-transform:uppercase;color:var(--ink)}
.bn1{background:#DCE3F3}
.bn2{background:#F7DDE1}
.bn3{background:#FFFFFF}

/* ── METRICS ── */
.metrics{margin-top:13px;display:grid;grid-template-columns:1fr 1fr;gap:9px}
.metric{border:2px solid var(--ink);background:var(--paper);padding:10px}
.metric .mh{display:flex;align-items:center;gap:6px;color:var(--ink-soft);font-family:var(--mono);font-size:8px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;line-height:1.25}
.metric .ico{width:13px;height:13px;flex:none;border:2px solid var(--ink);border-radius:50%;position:relative}
.metric .ico::after{content:"";position:absolute;inset:2.5px;border-radius:50%;background:var(--ink)}
.m1 .ico{border-color:var(--navy)}
.m1 .ico::after{background:var(--red)}
.metric .mv{margin-top:7px;font-family:var(--display);font-size:14px;letter-spacing:-.02em;line-height:1.15}

/* ── PAYMENT METHODS ── */
.strip{margin-top:11px;border:2px solid var(--ink);background:var(--paper);padding:10px;flex:1 1 auto}
.strip .sh{color:var(--ink-soft);font-family:var(--mono);font-size:8px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;margin-bottom:8px}
.chips{display:flex;flex-wrap:wrap;gap:5px}
.chip{border:1.5px solid var(--ink);padding:5px 8px;font-family:var(--mono);font-size:7.5px;letter-spacing:.06em;font-weight:700;background:var(--paper-2);color:var(--ink);line-height:1.1}
.chip.on{background:var(--navy);color:var(--white)}
/* image chips — <span class="chip img-chip"><img src="..." alt="Visa"></span> */
.chip.img-chip{padding:4px 8px;display:inline-flex;align-items:center;justify-content:center;background:#fff}
.chip.img-chip img{height:18px;width:auto;max-width:50px;object-fit:contain;display:block}

/* ── SINGLE CTA ── */
.cta{margin-top:auto;padding-top:14px}
.btn{display:block;text-align:center;text-decoration:none;padding:15px 12px;border:2.5px solid var(--ink);
  font-family:var(--display);font-size:14px;letter-spacing:.04em;text-transform:uppercase;
  color:var(--white);background:linear-gradient(180deg,#E3263F,var(--red) 60%,var(--red-2));box-shadow:4px 4px 0 var(--navy);transition:.16s}
.btn:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--navy);filter:brightness(1.06)}
.btn:active{transform:translate(0,0);box-shadow:2px 2px 0 var(--navy)}

/* ═══ SECTIONS BELOW CARDS ═══ */
.kick{color:var(--red);margin-bottom:14px}
.sechead{text-align:center;padding:60px 0 0}
.sechead h2,.info h2{font-family:var(--display);font-size:clamp(23px,3vw,32px);letter-spacing:-.03em;text-transform:uppercase;line-height:1.14;color:var(--navy)}
.sechead p{max-width:62ch;margin:16px auto 0;color:var(--ink-soft);font-size:13.5px;line-height:1.75}

/* ── STEPS (methodology) ── */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:30px}
.step{border:2px solid var(--ink);background:var(--paper-2);padding:16px;box-shadow:3px 3px 0 var(--navy)}
.step .sn{display:inline-block;background:var(--red);color:var(--white);padding:3px 8px;margin-bottom:10px}
.step h3{font-family:var(--display);font-size:15px;text-transform:uppercase;letter-spacing:-.01em;margin-bottom:6px;color:var(--navy)}
.step p{font-size:12.5px;line-height:1.6;color:var(--ink-soft)}

/* ── INFO / GUIDE ── */
.info{padding:60px 0 0;max-width:820px}
.info .kick{text-align:center}
.info h2{text-align:center;margin-bottom:18px}
.info>p{font-size:14px;line-height:1.8;color:var(--ink-soft);margin-top:12px}
.faq{margin-top:26px;display:flex;flex-direction:column;gap:10px}
.faq details{border:2px solid var(--ink);background:var(--paper-2);box-shadow:3px 3px 0 var(--ink)}
.faq details[open]{box-shadow:3px 3px 0 var(--red)}
.faq summary{cursor:pointer;list-style:none;padding:13px 16px;font-family:var(--display);font-size:14px;text-transform:uppercase;letter-spacing:-.01em;display:flex;justify-content:space-between;gap:12px;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--mono);font-size:18px;line-height:1;color:var(--red)}
.faq details[open] summary::after{content:"–"}
.faq details p{padding:0 16px 14px;font-size:13px;line-height:1.7;color:var(--ink-soft)}

/* ── TRUST ── */
.trust{text-align:center;padding:52px 0 0}
.trust .row{display:flex;justify-content:center;flex-wrap:wrap;gap:9px;margin-top:20px}
.badge{border:2px solid var(--ink);padding:8px 15px;background:var(--paper-2);color:var(--navy);font-family:var(--mono);font-size:8.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;box-shadow:2px 2px 0 var(--red)}

/* ═══ FOOTER ═══ */
footer{margin-top:62px;background:var(--ink);color:var(--white);position:relative;z-index:1;border-top:3px solid var(--red)}
footer::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--white);transform:translateY(-6px)}
.foot{text-align:center;padding:34px 0 44px}
.age{display:inline-grid;place-items:center;width:36px;height:36px;background:var(--red);color:var(--white);font-family:var(--display);font-size:14px;margin-bottom:14px;box-shadow:2px 2px 0 var(--white)}
.foot p{max-width:64ch;margin:0 auto;color:#AEB6CC;font-size:12.5px;line-height:1.85}
.foot a{color:#FF5A6E;text-decoration:none;border-bottom:1px solid rgba(255,90,110,.4)}
.fine{margin-top:14px;color:#6D7692;font-size:10.5px}

/* ═══ TAGLINE (between ticker and cards) ═══ */
.tagline{text-align:center;padding:30px 26px 0;font-family:var(--display);font-size:clamp(16px,1.9vw,21px);
  letter-spacing:-.01em;text-transform:uppercase;color:var(--navy);line-height:1.3}
.tagline em{font-style:normal;color:var(--red)}
.tagline+.grid{padding-top:24px}

/* ═══════════ RESPONSIVE ═══════════ */
@media(max-width:1080px){
  h1{font-size:37px}
  .logo-slot{height:210px}
}
@media(max-width:1000px){
  .grid{grid-template-columns:1fr;max-width:470px;margin:0 auto;gap:26px}
  .logo-slot{height:230px}
  .steps{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:640px){
  .wrap{padding:0 17px}
  .topbar .wrap{flex-wrap:wrap;justify-content:center;text-align:center;gap:9px;padding-left:17px;padding-right:17px}
  .brand{order:-1;width:100%;justify-content:center}
  .hero{flex-direction:column;gap:15px;padding:22px 0 26px}
  h1{white-space:normal;font-size:31px;line-height:1.15}
  h1 em,h1 .w1{padding:1px 9px 3px}
  h1 .w1{margin-bottom:6px}
  .grid{max-width:100%;gap:24px;padding-top:26px}
  .tagline{padding:24px 17px 0;font-size:16px}
  .tagline+.grid{padding-top:20px}
  .card{box-shadow:5px 5px 0 var(--ink)}
  .name{font-size:20px}
  .bonus b{font-size:20px}
  .metric .mv{font-size:13.5px}
  .steps{grid-template-columns:1fr}
  .sechead{padding:46px 0 0}
  .sechead h2,.info h2{font-size:26px;line-height:1.16}
  .sechead p{font-size:13px;line-height:1.7;margin-top:14px}
  .info{padding-top:46px}
  .info>p{font-size:13px}
  .trust{padding:40px 0 0}
  .trust .row{gap:8px;margin-top:16px}
  .badge{padding:8px 13px;font-size:8px}
  footer{margin-top:48px}
  .foot{padding:30px 0 38px}
  .foot p{font-size:12px;padding:0 4px}
}
@media(max-width:400px){
  .logo-slot{height:205px}
  .sechead h2,.info h2{font-size:23px}
  .badge{padding:7px 11px;font-size:7.5px}
}