/* Design tokens — "Kupon" direction (navy + paper duotone, torn-ticket motif). See DESIGN_BRIEF.md.
   Block-level markup/layout is a later batch (html-front) — this pass only wires the tokens. */
:root{
  --bg:#0E1826; --bg-elev:#132030; --bg-card:#F5EFE1; --text:#EDE7DA; --text-on-paper:#1B2430;
  --muted:rgba(237,231,218,.66); --muted-on-paper:rgba(27,36,48,.62);
  --accent:#FF6B2C; --accent-verified:#1FAE8E;
  --line:rgba(237,231,218,.14); --line-on-paper:rgba(27,36,48,.12);
  --radius:10px; --wrap:1120px;
  --header-bg:rgba(14,24,38,.86);
  --font-head:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-body:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-6:24px;--space-8:32px;--space-12:48px;--space-16:64px;
  --z-base:0;--z-dropdown:100;--z-sticky:200;--z-overlay:900;--z-modal:1000;--z-toast:1100;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);
  font:17px/1.6 var(--font-body);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent-verified)}
h1,h2,h3{line-height:1.2;margin:0 0 .5em;font-weight:800;font-family:var(--font-head);letter-spacing:-.015em}
.eyebrow{text-transform:uppercase;letter-spacing:.08em;font-weight:700;font-size:.78rem}
.container{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 20px}
.muted{color:var(--muted)}
.skip-link{position:absolute;left:-999px;top:0;background:var(--accent);color:#fff;padding:10px 16px;z-index:200}
.skip-link:focus{left:0}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.site-header{position:sticky;top:0;z-index:100;background:var(--header-bg);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.header-inner{display:flex;align-items:center;gap:18px;height:64px}
.site-nav{display:flex;gap:6px;margin-left:auto}
.nav-toggle{display:none}
.btn{display:inline-flex;align-items:center;gap:8px;font-weight:700;padding:12px 22px;border-radius:10px;border:1px solid transparent;cursor:pointer;white-space:nowrap;text-decoration:none}
.btn-cta{background:var(--accent);color:#fff}
section{padding:56px 0}
.table-wrap{overflow-x:auto;border:1px solid var(--line-on-paper);border-radius:var(--radius);
  background:var(--bg-card);color:var(--text-on-paper)}
table{width:100%;border-collapse:collapse;min-width:520px}
th,td{text-align:left;padding:14px 18px;border-bottom:1px solid var(--line-on-paper)}
.prose{font-size:1.08rem;line-height:1.75}
.updated{text-align:center;color:var(--muted);font-size:.86rem;border-top:1px solid var(--line);padding-top:20px}
.to-top{position:fixed;right:20px;bottom:20px;z-index:120;width:48px;height:48px;border-radius:50%;
  border:1px solid var(--line);background:var(--accent);color:#fff;font-size:1.4rem;cursor:pointer;
  opacity:0;visibility:hidden;transform:translateY(12px);transition:opacity .2s,transform .2s,visibility .2s}
.to-top.show{opacity:1;visibility:visible;transform:none}
.cookie{position:fixed;left:0;right:0;bottom:0;z-index:150;background:var(--bg-card);color:var(--text-on-paper);
  border-top:1px solid var(--line-on-paper);
  padding:16px 20px;display:flex;gap:18px;align-items:center;justify-content:center;flex-wrap:wrap}
.cookie.hidden{display:none}
@media (max-width:760px){.nav-toggle{display:block;margin-left:auto}.site-nav{display:none}.site-nav.open{display:flex;flex-direction:column}}

/* ==========================================================================
   Kupon components — hero, legality strip, bonus staircase, games, payments,
   verdict, FAQ, CTA, RG callout, sidebar stub, torn-edge motif.
   ========================================================================== */

/* -- reduced-motion guard: default transitions only run when motion is ok -- */
@media (prefers-reduced-motion: no-preference){
  .reveal{opacity:0;transform:translateY(10px);transition:opacity .22s ease,transform .22s ease}
  .reveal.is-in{opacity:1;transform:none}
  .card-hover:hover,.card-hover:focus-within{transform:translateY(-3px);box-shadow:0 12px 24px rgba(0,0,0,.28)}
  .card-hover{transition:transform .18s ease,box-shadow .18s ease}
  .link-grow::after{transition:transform .2s ease}
}
.card-hover{transition:none}

/* -- underline-grow links -- */
.link-grow{position:relative;text-decoration:none}
.link-grow::after{content:"";position:absolute;left:0;bottom:-3px;width:100%;height:2px;background:currentColor;transform:scaleX(0);transform-origin:left}
.link-grow:hover::after,.link-grow:focus-visible::after{transform:scaleX(1)}
.site-nav a{position:relative;padding:8px 10px;text-decoration:none;color:var(--text)}
.site-nav a::after{content:"";position:absolute;left:10px;right:10px;bottom:4px;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:left}
@media (prefers-reduced-motion: no-preference){.site-nav a::after{transition:transform .2s ease}}
.site-nav a:hover::after,.site-nav a:focus-visible::after{transform:scaleX(1)}

/* -- torn / perforated edge motif, used on stub card + section dividers -- */
.torn-edge{position:relative}
.torn-edge::before{content:"";position:absolute;left:0;top:0;bottom:0;width:14px;
  background:repeating-linear-gradient(to bottom, var(--bg) 0 10px, transparent 10px 20px);
  background-color:var(--bg);
  -webkit-mask:radial-gradient(circle 7px at 0 10px, transparent 98%, #000 100%) 0 0/14px 20px repeat-y;
  mask:radial-gradient(circle 7px at 0 10px, transparent 98%, #000 100%) 0 0/14px 20px repeat-y;
}
.divider-perf{border:0;height:14px;margin:0 0 var(--space-8);
  background-image:radial-gradient(circle 6px at 10px 7px, var(--bg) 98%, transparent 100%);
  background-size:22px 14px;background-repeat:repeat-x;opacity:.5}

/* -- eyebrow / stamp badge -- */
.stamp{display:inline-flex;align-items:center;gap:6px;transform:rotate(-4deg);
  border:2px solid var(--accent);color:var(--accent);border-radius:999px;padding:6px 14px;
  font-weight:800;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;background:rgba(255,107,44,.08)}

/* -- hero -- */
.hero{padding-top:var(--space-12);padding-bottom:var(--space-8)}
.hero-copy h1{font-size:clamp(2rem,4.2vw + 1rem,3.1rem)}
.hero-lead{font-size:1.15rem;color:var(--muted);max-width:56ch}
.trust-row{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-6);padding:0;list-style:none}
.trust-row li{display:flex;align-items:center;gap:8px;font-size:.86rem;color:var(--muted);
  border:1px solid var(--line);border-radius:999px;padding:8px 14px;background:var(--bg-elev)}
.trust-row li b{color:var(--text)}
.hero-actions{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-6)}
.hero-media{margin-top:var(--space-6)}
.hero-media img{border-radius:14px;box-shadow:0 20px 40px rgba(0,0,0,.35)}

/* -- kupon-stub sidebar (home page only) -- */
.home-layout{display:grid;grid-template-columns:1fr;gap:var(--space-8)}
.kupon-stub{background:var(--bg-card);color:var(--text-on-paper);border-radius:16px;
  padding:var(--space-6) var(--space-6) var(--space-6) var(--space-8);position:relative}
.kupon-stub .eyebrow{color:var(--accent-verified)}
.kupon-stub .stub-figure{font-size:2.4rem;font-weight:800;font-variant-numeric:tabular-nums;margin:var(--space-2) 0}
.kupon-stub .stub-row{display:flex;justify-content:space-between;gap:var(--space-3);
  padding:var(--space-3) 0;border-top:1px dashed var(--line-on-paper);font-variant-numeric:tabular-nums}
.kupon-stub .stub-row:first-of-type{border-top:none}
.kupon-stub .chip-verified{display:inline-flex;align-items:center;gap:6px;color:var(--accent-verified);font-weight:700;font-size:.86rem}
.kupon-stub .pay-icons{display:flex;flex-wrap:wrap;gap:8px;margin-top:var(--space-2)}
.kupon-stub .pay-icons img{height:22px;width:auto;border-radius:4px}
.kupon-stub .stub-cta{display:block;text-align:center;margin-top:var(--space-4)}
.kupon-stub .stub-link{display:inline-block;margin-top:var(--space-3);font-size:.86rem}

/* -- legality strip -- */
.legality-strip{background:var(--bg-elev);border:1px solid var(--line);border-left:4px solid var(--accent-verified);
  border-radius:12px;padding:var(--space-6);display:flex;gap:var(--space-4);align-items:flex-start}
.legality-strip .ico{flex:none;width:40px;height:40px;border-radius:50%;background:rgba(31,174,142,.14);
  color:var(--accent-verified);display:flex;align-items:center;justify-content:center;font-weight:800}
.legality-strip h2{font-size:1.15rem;margin-bottom:.4em}
.legality-strip p{color:var(--muted);margin:.4em 0}

/* -- bonus staircase (signature feature) -- */
.staircase{display:grid;gap:var(--space-4);grid-template-columns:1fr}
.stair-step{background:var(--bg-elev);border:1px solid var(--line);border-radius:12px;padding:var(--space-6);position:relative;overflow:hidden}
.stair-step .bar{height:8px;border-radius:6px;background:var(--line);margin:var(--space-3) 0;overflow:hidden}
.stair-step .bar > span{display:block;height:100%;background:var(--accent);transform:scaleX(0);transform-origin:left;border-radius:6px}
@media (prefers-reduced-motion: no-preference){.stair-step .bar > span{transition:transform .8s ease}}
.stair-step.is-filled .bar > span{transform:scaleX(1)}
.stair-step .stair-num{position:absolute;top:12px;right:16px;font-size:2.2rem;font-weight:800;opacity:.12}
.stair-step .stair-figure{font-size:1.6rem;font-weight:800;color:var(--accent)}
@media (min-width:64em){
  .staircase{grid-template-columns:repeat(3,1fr);align-items:end}
  .stair-step:nth-child(1){padding-bottom:var(--space-12)}
  .stair-step:nth-child(2){padding-bottom:calc(var(--space-12) + 14px)}
  .stair-step:nth-child(3){padding-bottom:calc(var(--space-12) + 28px)}
}

/* -- section heading rhythm -- */
.section-head{max-width:64ch;margin-bottom:var(--space-6)}
.section-head .eyebrow{color:var(--accent-verified);display:block;margin-bottom:.5em}

/* -- games grid -- */
.grid-4{display:grid;gap:var(--space-4);grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr))}
.game{position:relative;border-radius:14px;overflow:hidden;background:var(--bg-elev);border:1px solid var(--line)}
.game .thumb{position:relative;aspect-ratio:4/3;overflow:hidden}
.game .thumb img{width:100%;height:100%;object-fit:cover;display:block}
.game .meta{padding:var(--space-3) var(--space-4)}
.game .meta b{font-size:.98rem}
.game-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(14,24,38,.66);opacity:0;text-decoration:none}
.game-play span{background:var(--accent);color:#fff;font-weight:700;padding:10px 22px;border-radius:999px}
@media (prefers-reduced-motion: no-preference){.game-play{transition:opacity .18s ease}}
.game .thumb:hover .game-play,.game .thumb:focus-within .game-play{opacity:1}

/* -- provider pill cloud -- */
.pill-cloud{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-6)}
.pill-cloud img{height:44px;width:auto;object-fit:contain;border-radius:10px}

/* -- payments -- */
.pay-grid{display:grid;gap:var(--space-4);grid-template-columns:repeat(auto-fit,minmax(min(140px,100%),1fr));margin-bottom:var(--space-6)}
.pay-card{background:var(--bg-elev);border:1px solid var(--line);border-radius:12px;padding:var(--space-4);text-align:center}
.pay-card img{margin:0 auto var(--space-2);object-fit:contain}

/* -- verdict / pros&cons -- */
.verdict-grid{display:grid;gap:var(--space-6);grid-template-columns:1fr}
.verdict-list{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-2)}
.verdict-list li{display:flex;gap:10px;align-items:flex-start;padding:var(--space-3);
  background:var(--bg-elev);border:1px solid var(--line);border-radius:10px}
.verdict-list .ok{color:var(--accent-verified);font-weight:800}
.verdict-list .warn{color:var(--accent);font-weight:800}
@media (min-width:48em){.verdict-grid{grid-template-columns:1fr 1fr}}

/* -- FAQ -- */
.faq-list{display:grid;gap:var(--space-3)}
.faq-list details{background:var(--bg-elev);border:1px solid var(--line);border-radius:10px;padding:var(--space-4) var(--space-6)}
.faq-list summary{cursor:pointer;font-weight:700;list-style:none;display:flex;justify-content:space-between;gap:12px;align-items:center}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"+";font-size:1.4rem;color:var(--accent);flex:none}
.faq-list details[open] summary::after{content:"\2212"}
.faq-list p{color:var(--muted);margin-top:var(--space-3)}
@media (min-width:64em){.faq-list{grid-template-columns:1fr 1fr}}

/* -- CTA band -- */
.cta-band{background:linear-gradient(135deg,var(--accent),#d9541f);color:#fff;border-radius:16px;
  padding:var(--space-8);text-align:center}
.cta-band h2{margin-bottom:.3em}
.cta-band .btn-cta{background:#fff;color:var(--accent)}

/* -- responsible-gambling callout -- */
.rg-callout{background:var(--bg-card);color:var(--text-on-paper);border-radius:14px;padding:var(--space-6);
  display:flex;gap:var(--space-4);align-items:flex-start}
.rg-callout .ico{font-size:1.6rem;flex:none}

/* -- internal page hero (single column, no sidebar) -- */
.page-hero{padding-top:var(--space-8);padding-bottom:var(--space-6);border-bottom:1px solid var(--line)}
.page-hero h1{font-size:clamp(1.7rem,3.4vw + 1rem,2.6rem)}
.page-hero .stamp{margin-bottom:var(--space-3)}
.page-hero .hero-lead{margin-top:var(--space-3)}

/* -- crumbs -- */
.crumbs{padding-top:var(--space-4);font-size:.86rem;color:var(--muted)}
.crumbs a{color:var(--muted)}

/* -- kv facts table (internal pages) -- */
.kv-list{display:grid;gap:0;margin-top:var(--space-4)}
.kv-list dt{font-weight:700;color:var(--muted);font-size:.86rem}
.kv-list dd{margin:.2em 0 var(--space-4)}

/* -- responsive: sidebar layout kicks in at 60em -- */
@media (min-width:60em){
  .home-layout{grid-template-columns:1fr 340px}
  .kupon-stub{position:sticky;top:calc(64px + var(--space-6));align-self:start}
}
@media (min-width:48em){
  .verdict-list{grid-template-columns:1fr}
}
@media (max-width:47.99em){
  .legality-strip{flex-direction:column}
  .stamp{transform:rotate(-2deg)}
}