/* ============================================================
   Colorado Casinos — shared design system (site.css)
   ONE stylesheet for money page + homepage + all EEAT/utility pages.
   ALL colour lives in the :root block below — never a hex elsewhere.
   Motif derived from the logo: Rocky-Mountain ridge + poker chip + Colorado flag "C".
   ============================================================ */
:root{
  /* --- palette (Colorado flag) --- */
  --navy:#0C2340;         /* primary */
  --navy-700:#12315A;     /* raised navy surfaces */
  --navy-900:#08192E;     /* footer / deepest */
  --red:#C8102E;          /* flag red — accent + BONUS eye-catcher (rule 6) */
  --red-ink:#A50C24;
  --gold:#F4B740;         /* poker chip / stars / motif */
  --gold-deep:#D99A1C;
  --cta:#0E9C6F;          /* RESERVED complement-of-red — buttons ONLY (rule 19) */
  --cta-dark:#0B7D59;
  --cta-ink:#053C2C;
  --paper:#FBF9F4;        /* page / masthead bg (mountain snow) */
  --surface:#FFFFFF;      /* cards */
  --surface-2:#F5F1E8;    /* alt bands */
  --ink:#182231;          /* body text */
  --muted:#5B6472;        /* meta / secondary */
  --line:#E7E1D6;         /* hairlines */
  --line-2:#D8D0C0;
  --shadow:0 1px 2px rgba(12,35,64,.06),0 8px 26px -12px rgba(12,35,64,.22);
  --shadow-lg:0 18px 50px -18px rgba(12,35,64,.38);
  /* --- type --- */
  --sans:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  --disp:'Barlow Condensed',var(--sans);
  --r:14px;               /* card radius */
  --r-sm:9px;
  --wrap:1120px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--sans);color:var(--ink);background:var(--paper);
  font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--red);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}
h1,h2,h3,h4{font-family:var(--disp);color:var(--navy);line-height:1.06;margin:0 0 .5em;
  font-weight:700;letter-spacing:.2px}
h2{font-size:clamp(1.7rem,4.4vw,2.5rem)}
h3{font-size:clamp(1.25rem,3vw,1.6rem)}
p{margin:0 0 1.05em}
.eyebrow{font-family:var(--disp);text-transform:uppercase;letter-spacing:.14em;
  color:var(--red);font-weight:600;font-size:.95rem}

/* ===== mountain-ridge divider (repeating motif) ===== */
.ridge{display:block;width:100%;height:34px;color:var(--navy)}
.ridge svg{display:block;width:100%;height:100%}
.band{background:var(--surface-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

/* ===== masthead ===== */
.masthead{background:var(--paper);border-bottom:1px solid var(--line)}
.masthead .wrap{display:flex;align-items:center;gap:18px;min-height:76px}
.brand{display:flex;align-items:center;gap:10px}
.brand img{height:46px;width:auto}
.nav{margin-left:auto;display:flex;align-items:center;gap:26px}
.nav a{color:var(--navy);font-weight:600;font-size:.98rem}
.nav a:hover{color:var(--red);text-decoration:none}
.nav .btn{color:#fff}
.hamburger{display:none;margin-left:auto;background:none;border:1.5px solid var(--line-2);
  border-radius:10px;width:46px;height:42px;cursor:pointer;align-items:center;justify-content:center}
.hamburger span,.hamburger span::before,.hamburger span::after{content:"";display:block;
  width:22px;height:2.5px;background:var(--navy);border-radius:2px;position:relative}
.hamburger span::before{position:absolute;top:-7px}
.hamburger span::after{position:absolute;top:7px}

/* ===== buttons / UNIQUE CTA (poker-chip edge) ===== */
.btn{--_c:var(--cta);display:inline-flex;align-items:center;gap:.5em;
  font-family:var(--disp);font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  font-size:1.02rem;color:#fff;background:var(--_c);border:0;cursor:pointer;
  padding:.72em 1.25em;border-radius:11px;position:relative;
  box-shadow:0 2px 0 var(--cta-dark),0 10px 20px -10px rgba(14,156,111,.7);
  transition:transform .12s ease,box-shadow .12s ease}
.btn:hover{text-decoration:none;transform:translateY(-1px);
  box-shadow:0 3px 0 var(--cta-dark),0 16px 26px -12px rgba(14,156,111,.8)}
.btn:active{transform:translateY(1px);box-shadow:0 1px 0 var(--cta-dark)}
/* chip-edge notch dots along the button top — the casino "tell" */
.btn::before{content:"";position:absolute;left:12px;right:12px;top:5px;height:3px;border-radius:3px;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.55) 0 7px,transparent 7px 14px);opacity:.5}
.btn .arw{font-weight:700}
.btn-block{display:flex;width:100%;justify-content:center}
.btn-ghost{background:transparent;color:var(--cta-dark);box-shadow:none;
  border:2px solid var(--cta);padding:.62em 1.1em}
.btn-ghost::before{display:none}
.btn-ghost:hover{background:rgba(14,156,111,.08);transform:none}

/* ===== hero ===== */
.hero{position:relative;background:
   radial-gradient(120% 90% at 82% -10%,var(--navy-700) 0%,var(--navy) 46%,var(--navy-900) 100%);
   color:#fff;overflow:hidden}
.hero::after{content:"";position:absolute;inset:auto 0 -1px 0;height:120px;pointer-events:none;
  background:no-repeat bottom/cover;opacity:.16}
.hero .wrap{position:relative;z-index:2;padding:34px 20px 40px}
.hero h1{color:#fff;font-size:clamp(2.05rem,6vw,3.35rem);max-width:16ch;margin:0 0 .32em}
.hero .lede{color:#DCE4EE;font-size:1.12rem;max-width:58ch;margin:0 0 1.1em}
.hero-chip{position:absolute;pointer-events:none;opacity:.9}
/* faint poker-chip watermarks in the hero (concentric rim + edge spots + dashed inner ring) */
.hero .chipwm{position:absolute;border-radius:50%;z-index:1;opacity:.5;
  background:
   radial-gradient(circle at 50% 50%,transparent 71%,rgba(244,183,64,.22) 71% 74%,transparent 74%),
   radial-gradient(circle at 50% 50%,transparent 40%,rgba(244,183,64,.14) 40% 41.5%,transparent 41.5%),
   repeating-conic-gradient(from 0deg,rgba(244,183,64,.20) 0 6deg,transparent 6deg 22.5deg)}
.hero .chipwm::before{content:"";position:absolute;inset:18%;border-radius:50%;
  border:2px dashed rgba(244,183,64,.20)}

/* byline */
.byline{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:8px}
.byline img{height:46px;width:46px;border-radius:50%;border:2px solid rgba(255,255,255,.5)}
.byline .who{font-weight:700;color:#fff}
.byline .who a{color:#fff;text-decoration:underline;text-decoration-color:rgba(255,255,255,.4)}
.byline .meta{color:#C6D0DC;font-size:.9rem;display:flex;gap:14px;flex-wrap:wrap;margin-top:2px}
.byline .meta span{display:inline-flex;align-items:center;gap:5px}

/* ===== TOPLIST — side-by-side ROW cards ===== */
.toplist{display:flex;flex-direction:column;gap:16px;margin:26px 0}
.rowcard{position:relative;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);box-shadow:var(--shadow);
  display:grid;grid-template-columns:64px 2.1fr 1.5fr 1fr;align-items:center;
  padding:18px 20px 18px 14px;gap:18px;overflow:hidden}
.rowcard::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--navy)}
.rowcard.r1::before{background:linear-gradient(var(--gold),var(--gold-deep))}
.rowcard.r2::before{background:#9AA7B4}
.rowcard.r3::before{background:#C58A57}
/* rank = snow-capped summit marker (SVG) */
.rankwrap{display:flex;align-items:center;justify-content:center}
.peakmark{display:block;filter:drop-shadow(0 2px 3px rgba(12,35,64,.20))}
/* brand cell */
.brandcell{display:flex;flex-direction:column;gap:8px;min-width:0}
.logochip{background:#fff;border:1px solid var(--line);border-radius:10px;
  height:58px;width:150px;display:grid;place-items:center;padding:8px}
.logochip img{max-height:40px;max-width:130px;width:auto}
.bname{font-family:var(--disp);font-weight:700;font-size:1.25rem;color:var(--navy);line-height:1}
.rating{display:flex;align-items:center;gap:8px;font-size:.9rem;color:var(--muted)}
.stars{color:var(--gold);letter-spacing:1px;font-size:1rem}
.stars b{color:var(--navy)}
.pills{display:flex;flex-wrap:wrap;gap:6px}
.pill{font-size:.74rem;font-weight:600;color:var(--navy-700);background:var(--surface-2);
  border:1px solid var(--line-2);border-radius:999px;padding:3px 9px;white-space:nowrap}
/* bonus eye-catcher */
.bonus{text-align:center;padding:0 6px}
.bonus .lab{font-family:var(--disp);text-transform:uppercase;letter-spacing:.12em;
  font-size:.74rem;color:var(--muted);font-weight:600}
.bonus .amt{font-family:var(--disp);font-weight:700;color:var(--red);
  font-size:clamp(1.35rem,2.4vw,1.85rem);line-height:1.02;margin:2px 0}
.bonus .sub{font-size:.78rem;color:var(--muted)}
/* cta cell */
.ctacell{display:flex;flex-direction:column;align-items:stretch;gap:7px}
.ctacell .mindep{font-size:.74rem;color:var(--muted);text-align:center}
.ctacell .review-link{font-size:.8rem;color:var(--navy-700);text-align:center;font-weight:600}
/* Top-pick ribbon */
.ribbon{position:absolute;top:0;right:0;font-family:var(--disp);font-weight:700;
  text-transform:uppercase;letter-spacing:.08em;font-size:.72rem;color:var(--navy);
  background:var(--gold);padding:4px 12px;border-bottom-left-radius:10px}

.ctacell .restrict{font-size:.72rem;color:var(--muted);text-align:center;line-height:1.3}
.ridge.flip{transform:rotate(180deg)}

/* ===== deep reviews ===== */
.review{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow);padding:24px;margin:18px 0}
.review-head{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:14px}
.review-head h3{margin:0 0 4px}
.review-head .logochip{width:130px;height:52px}
.review-head .btn{margin-left:auto}
.subscores{list-style:none;padding:0;margin:0 0 14px;display:grid;
  grid-template-columns:repeat(5,1fr);gap:8px}
.subscores li{background:var(--surface-2);border:1px solid var(--line);border-radius:9px;
  padding:8px 6px;text-align:center;display:flex;flex-direction:column;gap:3px}
.subscores li span{font-size:.72rem;color:var(--muted);line-height:1.15}
.subscores li b{font-family:var(--disp);font-size:1.25rem;color:var(--navy)}
.proscons{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:14px}
.proscons h4{margin:0 0 6px;font-size:1.05rem}
.proscons ul{margin:0;padding-left:0;list-style:none}
.proscons li{position:relative;padding:3px 0 3px 24px;font-size:.94rem}
.pros li::before{content:"+";position:absolute;left:4px;top:2px;color:var(--cta-dark);font-weight:800}
.cons li::before{content:"–";position:absolute;left:5px;top:2px;color:var(--red);font-weight:800}
.pros h4{color:var(--cta-dark)}
.cons h4{color:var(--red-ink)}

/* checklist (methodology / RG) with chip-dot markers */
ul.checklist{list-style:none;padding:0;margin:0}
ul.checklist li{position:relative;padding:6px 0 6px 30px;margin-bottom:6px}
ul.checklist li::before{content:"";position:absolute;left:2px;top:12px;width:12px;height:12px;
  border-radius:50%;background:var(--gold);border:2px solid var(--gold-deep)}

/* ===== generic content ===== */
/* padding-block only — never a `padding:Y 0` shorthand here, it would clobber .wrap's side padding
   on `.wrap.section` elements and push content flush to the screen edge on mobile. */
.section{padding-block:40px}
.section h2 .kw{color:var(--red)}
.lead{font-size:1.12rem;color:var(--ink)}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:22px 24px;box-shadow:var(--shadow)}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
table.tbl{width:100%;border-collapse:collapse;font-size:.95rem}
table.tbl th,table.tbl td{border:1px solid var(--line);padding:10px 12px;text-align:left}
table.tbl th{background:var(--navy);color:#fff;font-family:var(--disp);font-weight:600}
.tbl-wrap{overflow-x:auto}
/* poker-chip list marker for step lists */
ol.steps{list-style:none;counter-reset:s;padding:0;margin:0}
ol.steps li{counter-increment:s;position:relative;padding:4px 0 16px 56px;min-height:44px}
ol.steps li::before{content:counter(s);position:absolute;left:0;top:0;width:40px;height:40px;
  border-radius:50%;background:var(--gold);color:var(--navy);font-family:var(--disp);font-weight:700;
  display:grid;place-items:center;font-size:1.15rem;border:2px dashed var(--gold-deep)}
/* FAQ */
.faq details{border:1px solid var(--line);border-radius:var(--r-sm);margin-bottom:10px;background:#fff}
.faq summary{cursor:pointer;font-family:var(--disp);font-weight:700;font-size:1.12rem;color:var(--navy);
  padding:14px 18px;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq details[open] summary{border-bottom:1px solid var(--line)}
.faq .a{padding:12px 18px 4px}

/* author box */
.authorbox{display:flex;gap:18px;align-items:flex-start;background:var(--surface-2);
  border:1px solid var(--line);border-radius:var(--r);padding:20px}
.authorbox img{height:84px;width:84px;border-radius:50%;flex:0 0 auto}

/* ===== footer ===== */
.footer{background:var(--navy-900);color:#C6D0DC;margin-top:48px;padding:38px 0 26px}
.footer a{color:#DCE4EE}
.footer .cols{display:grid;grid-template-columns:2fr 1fr 1fr;gap:28px}
.footer h4{color:#fff}
.footer .discl{font-size:.82rem;color:#8FA0B4;border-top:1px solid rgba(255,255,255,.12);
  margin-top:24px;padding-top:16px}
.footer nav a{display:block;padding:3px 0}

/* ===== responsive ===== */
@media(max-width:900px){
  .footer .cols{grid-template-columns:1fr 1fr}
  .rowcard{grid-template-columns:52px 1.6fr 1.2fr 1fr;gap:12px;padding:14px}
  .logochip{width:120px;height:50px}
}
@media(max-width:760px){
  .nav{display:none}
  .nav.open{display:flex;position:absolute;left:0;right:0;top:76px;flex-direction:column;
    background:var(--paper);border-bottom:1px solid var(--line);padding:14px 20px;gap:14px;z-index:40}
  .nav.open a{padding:6px 0}
  .hamburger{display:inline-flex}
  .masthead .wrap{position:relative}
  /* compact hero + first section so the first toplist card clears the mobile fold (rule 1) */
  .masthead .wrap{min-height:60px}
  .brand img{height:40px}
  .hero .wrap{padding:14px 20px 16px}
  .hero h1{font-size:clamp(1.5rem,6.6vw,1.9rem);max-width:22ch;margin-bottom:.28em}
  .hero .lede{font-size:.98rem;margin-bottom:.6em;line-height:1.5}
  .hero .btn{padding:.6em 1.05em;font-size:.95rem}
  .byline{margin-top:9px;gap:9px}
  .byline img{height:38px;width:38px}
  .byline .meta{font-size:.8rem;gap:9px;margin-top:1px}
  .ridge{height:22px}
  .section{padding-block:26px}
  #toplist{padding-block-start:20px}
  #toplist .lead{font-size:.95rem;margin-bottom:14px}
  #toplist>h2{margin-bottom:.25em}
  /* ROW card -> centered stacked mobile card. display:contents on brandcell lets its children
     take part in the rowcard flex order so PILLS sit BELOW the bonus, CTA last (CRO order). */
  .rowcard{grid-template-columns:1fr;text-align:center;gap:11px;padding:16px 16px 18px;
    display:flex;flex-direction:column;align-items:center}
  .rowcard::before{width:100%;height:5px;bottom:auto}
  .ribbon{position:static;order:0;align-self:center;border-radius:999px;margin-bottom:2px}
  .rankwrap{order:1;display:flex;align-items:center;gap:12px;justify-content:center}
  .brandcell{display:contents}
  .logochip{order:2}
  .bname{order:2}
  .rating{order:2;justify-content:center}
  .bonus{order:3;background:var(--surface-2);border:1px dashed var(--line-2);border-radius:12px;
    padding:12px 16px;width:100%;max-width:340px}
  .bonus .amt{font-size:1.7rem}
  .pills{order:4;justify-content:center}
  .ctacell{order:5;width:100%;max-width:340px}
  .grid-2,.grid-3{grid-template-columns:1fr}
  .authorbox{flex-direction:column;align-items:center;text-align:center}
  .subscores{grid-template-columns:repeat(3,1fr)}
  .proscons{grid-template-columns:1fr}
  .review-head{justify-content:center;text-align:center}
  .review-head .btn{margin:8px auto 0}
  .review{padding:18px}
}
@media(max-width:400px){ .subscores{grid-template-columns:repeat(2,1fr)} }
@media(max-width:380px){
  body{font-size:16px}
  .hero .wrap{padding:18px 16px 22px}
  .hero h1{font-size:1.55rem}
}