/* casinacho-no — LOBBY family, palette sampled from the Casinacho wordmark.
   Tokens are --cn-*; no other land in the fleet uses that prefix. */
:root{
  --cn-night:#071432;        /* page ground: the wordmark's deep navy */
  --cn-deep:#0b1a3f;         /* section bed, one step up from the ground */
  --cn-card:#122150;         /* cards and tables */
  --cn-line:#22346b;         /* hairlines */
  --cn-gold:#f2b505;         /* primary action, from the logo's amber */
  --cn-pink:#ff239e;         /* accent, from the logo's magenta */
  --cn-cream:#f8f3ee;        /* body ink on dark */
  --cn-mute:#b9c2e0;         /* secondary ink */
}
*{box-sizing:border-box}
/* The rail links jump between sections; smooth scrolling makes the move readable. The offset that
   clears the two sticky layers lives ONLY in `section[id]{scroll-margin-top}` below: a
   `scroll-padding-top` here as well would stack with it — measured, that put the heading 244px down
   the viewport instead of 164. */
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--cn-night);color:var(--cn-cream);
  font:400 17px/1.65 Manrope,"Segoe UI",system-ui,sans-serif}
img{max-width:100%;height:auto;display:block}
a{color:var(--cn-gold)}
h1,h2,h3{font-family:Anton,"Arial Narrow",Impact,sans-serif;font-weight:400;letter-spacing:.4px;
  line-height:1.12;margin:0 0 14px;text-transform:uppercase}
h1{font-size:clamp(34px,6vw,58px)}
h2{font-size:clamp(26px,3.8vw,38px);margin-top:0}
h3{font-size:19px;letter-spacing:.6px}
p{margin:0 0 18px}
.cn-wrap{width:min(1180px,100% - 32px);margin-inline:auto}

/* ---------- top bar ---------- */
.cn-top{position:sticky;top:0;z-index:40;background:rgba(7,20,50,.94);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--cn-line)}
.cn-top-in{display:flex;align-items:center;gap:16px;padding:10px 0}
.cn-brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--cn-cream);
  font-family:Anton,sans-serif;font-size:21px;letter-spacing:.6px;text-transform:uppercase}
.cn-brand img{width:38px;height:38px;border-radius:10px}
.cn-top .cn-btn{margin-left:auto;flex:none}

/* ---------- hero ---------- */
.cn-hero{background:
    radial-gradient(900px 420px at 88% -10%,rgba(255,35,158,.30),transparent 62%),
    radial-gradient(700px 380px at 6% 0%,rgba(242,181,5,.22),transparent 60%),
    var(--cn-deep);
  border-bottom:1px solid var(--cn-line);padding:38px 0 34px}
.cn-hero-in{display:grid;grid-template-columns:1.25fr .75fr;gap:34px;align-items:center}
.cn-kicker{display:inline-flex;align-items:center;gap:8px;margin:0 0 14px;padding:6px 12px;
  border:1px solid var(--cn-gold);border-radius:999px;color:var(--cn-gold);
  font-size:13px;font-weight:800;letter-spacing:.8px;text-transform:uppercase}
.cn-offer{font-family:Anton,sans-serif;font-size:clamp(24px,3.4vw,34px);line-height:1.15;
  color:var(--cn-gold);margin:0 0 8px;text-transform:uppercase}
.cn-sub{color:var(--cn-mute);margin:0 0 20px}
.cn-trig{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0 0 22px;padding:0}
.cn-trig li{background:#0d1c44;border:1px solid var(--cn-line);border-radius:999px;
  padding:7px 13px;font-size:14px;font-weight:600;color:var(--cn-cream)}
.cn-meta{display:flex;flex-wrap:wrap;gap:10px 22px;color:var(--cn-mute);font-size:14px;margin:18px 0 0}
.cn-ticket{background:linear-gradient(160deg,#16265c,#0a1738);border:1px solid var(--cn-line);
  border-radius:18px;padding:22px;box-shadow:0 18px 40px rgba(0,0,0,.35)}
.cn-score{display:flex;align-items:baseline;gap:10px;margin:0 0 6px}
.cn-score b{font-family:Anton,sans-serif;font-size:52px;color:var(--cn-gold);line-height:1}
.cn-score span{color:var(--cn-mute);font-size:15px}
.cn-bars{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:10px}
.cn-bars li{display:grid;grid-template-columns:118px 1fr;gap:10px;align-items:center;font-size:14px}
.cn-bars i{display:block;height:8px;border-radius:99px;background:#0a1738;overflow:hidden}
.cn-bars i>b{display:block;height:100%;background:linear-gradient(90deg,var(--cn-gold),var(--cn-pink))}

/* ---------- rail ---------- */
.cn-rail{position:sticky;top:59px;z-index:30;background:var(--cn-night);
  border-bottom:1px solid var(--cn-line)}
.cn-rail ul{display:flex;gap:8px;overflow-x:auto;list-style:none;margin:0;padding:10px 0;
  scrollbar-width:none}
.cn-rail ul::-webkit-scrollbar{display:none}
.cn-rail a{display:block;white-space:nowrap;padding:8px 14px;border-radius:999px;
  background:#0e1d47;border:1px solid var(--cn-line);color:var(--cn-cream);
  text-decoration:none;font-size:14px;font-weight:600}
.cn-rail a:hover{border-color:var(--cn-gold);color:var(--cn-gold)}

/* ---------- sections ---------- */
section{padding:44px 0;border-bottom:1px solid rgba(34,52,107,.55)}
.cn-head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin:0 0 20px}
.cn-head p{color:var(--cn-mute);margin:0;font-size:15px}
/* No max-width here on purpose: a 74ch column sat visibly narrower than the grids and tables next
   to it, so the page read as two different widths. The prose now shares the container's width.
   The wrapper owns its bottom margin instead of leaning on its last paragraph's — that margin is
   what the grids and tables below it were butting into at 0px. */
.cn-prose{margin:0 0 24px}
.cn-prose p:last-child{margin-bottom:0}
/* A heading that follows something needs more air above than below, or it reads as the caption of
   the block above it. :not(:first-child) keeps it from padding the inside of a card. */
h3:not(:first-child){margin-top:26px}
/* Every block-level component carries its own bottom margin, so the rhythm does not depend on what
   happens to sit after it (measured by _build/qa_rhythm.py, thresholds 12/18/22px). */
.cn-grid,.cn-tab,.cn-chips,.cn-marks,.cn-logos,.cn-steps,.cn-two{margin:0 0 24px}
/* Anchors land BELOW the two sticky layers (bar + rail). Measured, not guessed: the chrome is
   59 + ~46 = 137px tall, so 120 here plus the section's own 44px of padding puts the heading at
   164 — clear of the chrome with room to spare, without the target starting halfway down. */
section[id]{scroll-margin-top:120px}

/* ---------- tiles ---------- */
.cn-grid{display:grid;gap:14px;grid-template-columns:repeat(5,1fr)}
.cn-grid--6{grid-template-columns:repeat(6,1fr)}
.cn-tile{display:block;background:var(--cn-card);border:1px solid var(--cn-line);border-radius:14px;
  overflow:hidden;text-decoration:none;color:var(--cn-cream);transition:transform .18s,border-color .18s}
.cn-tile img{aspect-ratio:3/4;object-fit:cover;width:100%}
.cn-tile:hover{transform:translateY(-4px);border-color:var(--cn-gold)}
.cn-tile-b{display:block;padding:10px 12px 12px}
.cn-tile-b b{display:block;font-size:14px;line-height:1.3}
.cn-tile-b i{display:block;font-style:normal;color:var(--cn-mute);font-size:12px;margin-top:3px}
@media(prefers-reduced-motion:reduce){.cn-tile{transition:none}.cn-tile:hover{transform:none}}

/* ---------- boxes, tables, chips ---------- */
.cn-two{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.cn-box{background:var(--cn-card);border:1px solid var(--cn-line);border-radius:14px;padding:18px 20px}
.cn-box h3{margin-bottom:12px;color:var(--cn-gold)}
.cn-box p:last-child{margin-bottom:0}
.cn-tab{width:100%;border-collapse:collapse;background:var(--cn-card);border:1px solid var(--cn-line);
  border-radius:14px;overflow:hidden}
.cn-tab th,.cn-tab td{padding:13px 16px;text-align:left;border-bottom:1px solid var(--cn-line);
  font-size:15px;vertical-align:top}
.cn-tab th{width:38%;color:var(--cn-mute);font-weight:600}
.cn-tab tr:last-child th,.cn-tab tr:last-child td{border-bottom:0}
.cn-chips{display:flex;flex-wrap:wrap;gap:10px;list-style:none;padding:0}
.cn-chips li{background:#0e1d47;border:1px solid var(--cn-line);border-radius:12px;padding:10px 14px;
  font-size:14px}
.cn-chips b{display:block;font-size:15px}
.cn-chips i{font-style:normal;color:var(--cn-mute);font-size:13px}
.cn-marks{display:flex;flex-wrap:wrap;gap:12px;align-items:center;list-style:none;padding:0}
.cn-marks li{background:#0e1d47;border:1px solid var(--cn-line);border-radius:12px;
  padding:12px 16px;display:flex;align-items:center;gap:10px;font-size:14px}
.cn-marks img{height:26px;width:auto}
/* Provider marks are dark-ink raster (measured in prep.py: luma 5–140), so they sit on a light
   chip — on the night ground they would be invisible. */
.cn-logos{display:flex;flex-wrap:wrap;gap:12px;list-style:none;padding:0}
.cn-logos li{background:var(--cn-cream);border-radius:12px;padding:8px 14px;display:flex;
  align-items:center}
.cn-logos li.cn-logo--dark{background:var(--cn-deep);border:1px solid var(--cn-line)}
.cn-logos img{height:34px!important;width:auto!important;object-fit:contain}
.cn-steps{counter-reset:s;list-style:none;padding:0;display:grid;gap:14px}
.cn-steps li{counter-increment:s;background:var(--cn-card);border:1px solid var(--cn-line);
  border-radius:14px;padding:16px 18px 16px 62px;position:relative}
.cn-steps li::before{content:counter(s);position:absolute;left:18px;top:14px;width:30px;height:30px;
  border-radius:50%;background:var(--cn-gold);color:var(--cn-night);display:grid;place-items:center;
  font-family:Anton,sans-serif;font-size:17px}
.cn-steps b{display:block;margin-bottom:4px}

/* ---------- offer cards (skill rule 15) ---------- */
.cn-offercard{background:linear-gradient(150deg,#1a2a63,#0b1a3f);border:1px solid var(--cn-line);
  border-left:4px solid var(--cn-gold);border-radius:16px;padding:20px 22px;margin:22px 0}
.cn-offercard--spot{border:1px solid var(--cn-gold);
  background:linear-gradient(150deg,rgba(242,181,5,.16),rgba(255,35,158,.12)),var(--cn-deep)}
/* White on the brand pink measures 3.51:1 — under AA for 12px text. The badge keeps the pink and
   takes the night ink instead, which measures far above the bar. */
.cn-offercard .cn-badge{display:inline-block;margin-bottom:14px;padding:4px 10px;border-radius:99px;
  background:var(--cn-pink);color:#0a1128;font-size:12px;font-weight:800;letter-spacing:.7px;
  text-transform:uppercase}
.cn-offercard p{margin:0 0 14px;color:var(--cn-cream)}
.cn-offerfig{font-family:Anton,sans-serif;font-size:clamp(22px,3vw,30px);color:var(--cn-gold);
  text-transform:uppercase;margin:0 0 10px;line-height:1.15}
.cn-btn{display:inline-block;background:var(--cn-gold);color:#0a1128;text-decoration:none;
  font-weight:800;font-size:16px;padding:14px 26px;border-radius:12px;border:0;
  box-shadow:0 10px 24px rgba(242,181,5,.22)}
.cn-btn:hover{background:#ffc93a}
.cn-btn--wide{display:block;text-align:center;width:100%}
.cn-btn--ghost{background:transparent;color:var(--cn-gold);border:1px solid var(--cn-gold);
  box-shadow:none;padding:12px 22px}
.cn-btn--ghost:hover{background:rgba(242,181,5,.12)}
/* `.cn-prose p a` would otherwise out-rank the bare class and repaint the button ink */
.cn-prose .cn-btn,.cn-offercard .cn-btn{color:#0a1128}
.cn-prose .cn-btn--ghost{color:var(--cn-gold)}

/* ---------- sticky bonus bar: every breakpoint, not phones only ---------- */
.cn-sticky{position:fixed;left:0;right:0;bottom:0;z-index:50;display:flex;gap:14px;
  align-items:center;justify-content:center;flex-wrap:wrap;
  background:rgba(11,26,63,.97);border-top:1px solid var(--cn-gold);padding:10px 16px}
.cn-sticky span{font-weight:700}
.cn-sticky .cn-btn{padding:11px 22px}
/* The spacer has to clear the bar's MEASURED height, not a guessed one: on a phone the bar wraps
   to two lines and ran 139px tall, so a 74px spacer still buried the last footer line. */
body:has(.cn-sticky){padding-bottom:150px}
@media(min-width:760px){body:has(.cn-sticky){padding-bottom:88px}}

/* ---------- FAQ ---------- */
.cn-q{background:var(--cn-card);border:1px solid var(--cn-line);border-radius:12px;padding:0;
  margin:0 0 12px;overflow:hidden}
.cn-q summary{cursor:pointer;padding:14px 18px;font-weight:700;list-style:none}
.cn-q summary::-webkit-details-marker{display:none}
.cn-q summary::after{content:"+";float:right;color:var(--cn-gold);font-weight:800}
.cn-q[open] summary::after{content:"–"}
.cn-q div{padding:0 18px 16px;color:var(--cn-cream)}
.cn-q div p{margin:0}
/* 12px is the rhythm INSIDE the accordion; the block that follows the last card needs the full
   block gap, or the closing paragraph reads as another answer. */
.cn-q:last-of-type{margin-bottom:24px}

/* ---------- footer ---------- */
.cn-foot{background:var(--cn-deep);border-top:1px solid var(--cn-line);padding:30px 0 40px;
  color:var(--cn-mute);font-size:14px}
.cn-foot a{color:var(--cn-gold)}
.cn-foot ul{display:flex;flex-wrap:wrap;gap:16px;list-style:none;margin:0 0 20px;padding:0}
.cn-badges{display:flex;gap:14px;align-items:center;margin:0 0 20px}
.cn-badges img{height:26px;width:auto}
.cn-foot b{color:var(--cn-cream)}

/* ---------- pages without an offer (rule 15) ---------- */
.cn-rg .cn-sticky,.cn-rg .cn-top .cn-btn{display:none!important}
body.cn-rg{padding-bottom:0}

@media(max-width:1020px){
  .cn-grid{grid-template-columns:repeat(4,1fr)}
  .cn-grid--6{grid-template-columns:repeat(4,1fr)}
  .cn-hero-in{grid-template-columns:1fr;gap:24px}
}
@media(max-width:760px){
  .cn-grid,.cn-grid--6{grid-template-columns:repeat(3,1fr)}
  .cn-two{grid-template-columns:1fr}
  .cn-tab th{width:46%}
}
@media(max-width:520px){
  .cn-grid,.cn-grid--6{grid-template-columns:repeat(2,1fr)}
  .cn-top .cn-btn{padding:11px 16px;font-size:15px}
  .cn-brand{font-size:18px}
}