@charset "UTF-8";
/* fonts.css */
/* Inter latin-ext — SIL Open Font License. */
@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 400 800;
  font-display: swap;
  src: url(https://creditcardcasinos.ca/wp-content/themes/ccc-fresh/assets/fonts/inter-latin-ext-wght-italic.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Inter latin — SIL Open Font License. */
@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 400 800;
  font-display: swap;
  src: url(https://creditcardcasinos.ca/wp-content/themes/ccc-fresh/assets/fonts/inter-latin-wght-italic.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Inter latin-ext — SIL Open Font License. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(https://creditcardcasinos.ca/wp-content/themes/ccc-fresh/assets/fonts/inter-latin-ext-wght-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Inter latin — SIL Open Font License. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(https://creditcardcasinos.ca/wp-content/themes/ccc-fresh/assets/fonts/inter-latin-wght-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* design.css */
/* ============================================================
   CREDIT CARD CASINOS — the site's design system, re-skinned in maple red
   Fonts enqueued separately in inc/enqueue.php (no @import here).
   ============================================================ */

/* The same sans-serif stack is shared by editorial and interface text. */

:root {
  /* ---- core palette: ivory + Canadian maple red + slate blue ---- */
  --cream:        #F8F5F0;   /* warm page background */
  --cream-deep:   #EFEBE5;   /* slightly deeper panel */
  --paper:        #FFFEFC;   /* card surface */
  --ink:          #23292D;   /* warm near-black text */
  --ink-soft:     #4E5A61;   /* secondary text */
  --ink-faint:    #63717A;   /* tertiary / captions (4.6:1 on cream) */

  /* "felt" = the brand colour slot (kept from the site's design system so every
     component re-skins from tokens): maple red. */
  --felt:         #B0232A;   /* maple red — brand */
  --felt-deep:    #741A1E;   /* oxblood for dark bands + footer */
  --felt-bright:  #C8323A;   /* hover / lighter red */
  --felt-tint:    #F8E7E3;   /* pale rose tint surface */
  --felt-line:    #EDCFC9;   /* hairline on rose tint */

  --accent:         #31556B;   /* slate for controls and accents on light surfaces */
  --accent-deep:    #27465A;   /* deeper slate for small text and hover */
  --accent-tint:    #EAF1F5;   /* quiet blue-grey surface */
  --accent-line:    #C7D9E3;
  --accent-strong:  #27465A;
  --accent-light:   #B9D8E7; /* only for dark surfaces */

  /* status colours (bank checker, pros/cons, verdict pills) */
  --ok:           #2E7A4E;
  --ok-tint:      #E5F1E8;
  --ok-line:      #C9E1D0;
  --warn:         #8A4B23;
  --warn-tint:    #F6EDE7;
  --warn-line:    #E3CEC0;
  --bad:          #A8262C;
  --bad-tint:     #F9E3E0;
  --bad-line:     #EECBC6;

  --player:       var(--bad);      /* legacy slot used by shared components */
  --player-tint:  var(--bad-tint);

  --line:         #DDD9D2;   /* hairline on cream */
  --line-soft:    #ECE8E1;

  /* ---- type ---- */
  --sans: 'Inter', Arial, system-ui, -apple-system, sans-serif;
  --display: var(--sans);
  --mono: var(--sans); /* compatibility token for existing labels and figures */

  /* ---- shape ---- */
  --r-sm: 8px;
  --r:    14px;
  --r-lg: 22px;
  --r-xl: 30px;

  --shadow-sm: 0 1px 2px rgba(60,24,20,.06), 0 2px 6px rgba(60,24,20,.05);
  --shadow:    0 4px 14px rgba(60,24,20,.08), 0 1px 3px rgba(60,24,20,.06);
  --shadow-lg: 0 18px 50px rgba(60,20,16,.15), 0 4px 14px rgba(60,20,16,.08);

  --maxw: 1200px;
  --nav-h: 74px;
  --ccc-bar-h: 64px;         /* phone tab bar / Visit bar height */
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--cream);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

::selection { background: var(--accent); color: #fff; }

/* ---- typography ---- */
h1, h2, h3, h4, h5, h6 { font-family: var(--display); font-weight: 700; line-height: 1.2; margin: 0; letter-spacing: -.01em; color: var(--ink); }
.display { font-family: var(--display); }
.serif-i { font-family: var(--display); font-style: normal; font-weight: 700; }

.lede { font-size: 1.18rem; line-height: 1.55; color: var(--ink-soft); }
.muted { color: var(--ink-soft); }
.faint { color: var(--ink-faint); }

/* ---- layout ---- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.wrap--narrow { max-width: 780px; }
.section { padding: 72px 0; }
.section--tight { padding: 48px 0; }
.stack > * + * { margin-top: 1rem; }

.grid { display: grid; gap: 22px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 34px; }
.section-head h2 { font-size: clamp(1.9rem, 3.4vw, 2.8rem); }
.section-head p { margin: 10px 0 0; max-width: 52ch; }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--sans); font-weight: 700; font-size: .98rem;
  padding: 13px 22px; border-radius: 999px; border: 1.5px solid transparent;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
  white-space: nowrap; line-height: 1;
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--felt); color: #fff; box-shadow: 0 6px 18px rgba(176,35,42,.26); }
.btn--primary:hover { background: var(--felt-bright); box-shadow: 0 10px 26px rgba(176,35,42,.32); }
.btn--accent { background: var(--accent); color: #fff; box-shadow: 0 6px 18px rgba(49,85,107,.32); }
.btn--accent:hover { background: var(--accent-strong); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--felt); color: var(--felt); }
.btn--light { background: #fff; color: var(--felt-deep); }
.btn--light:hover { background: #fff; box-shadow: var(--shadow); }
.btn--sm { padding: 9px 16px; font-size: .88rem; }
.btn--lg { padding: 16px 28px; font-size: 1.05rem; }
.btn .arr { transition: transform .2s ease; }
.btn:hover .arr { transform: translateX(3px); }

/* ============================================================
   BADGES / CHIPS / TAGS
   ============================================================ */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 11.5px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  padding: 5px 11px; border-radius: 999px;
  background: var(--felt-tint); color: var(--felt-deep);
}
.badge--accent { background: var(--accent-tint); color: var(--accent-deep); }
.badge--player { background: var(--player-tint); color: var(--player); }
.badge--ghost { background: transparent; border: 1px solid var(--line); color: var(--ink-soft); }
.badge--solid { background: var(--felt); color: #fff; }

.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.dot--banker { background: var(--felt); }
.dot--player { background: var(--player); }
.dot--tie { background: var(--accent); }

/* difficulty / risk meters */
.meter { display: inline-flex; gap: 4px; align-items: center; }
.meter i { width: 7px; height: 14px; border-radius: 2px; background: var(--line); display: block; }
.meter[data-level="1"] i:nth-child(-n+1),
.meter[data-level="2"] i:nth-child(-n+2),
.meter[data-level="3"] i:nth-child(-n+3),
.meter[data-level="4"] i:nth-child(-n+4),
.meter[data-level="5"] i:nth-child(-n+5) { background: var(--felt); }
.meter--risk[data-level="3"] i:nth-child(-n+3),
.meter--risk[data-level="4"] i:nth-child(-n+4),
.meter--risk[data-level="5"] i:nth-child(-n+5) { background: var(--player); }

/* ============================================================
   CARDS
   ============================================================ */
.card {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 26px;
  box-shadow: var(--shadow-sm);
  transition: transform .2s ease, box-shadow .25s ease, border-color .2s ease;
}
.card--link:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--accent); }
.card h3 { font-size: 1.4rem; }
.card__icon {
  width: 50px; height: 50px; border-radius: 14px; display: grid; place-items: center;
  background: var(--felt-tint); color: var(--felt); margin-bottom: 16px;
}
.card__icon svg { width: 26px; height: 26px; }

/* image placeholder */
.ph {
  position: relative; border-radius: var(--r); overflow: hidden;
  background-color: var(--cream-deep);
  background-image: repeating-linear-gradient(45deg, transparent, transparent 11px, rgba(176,35,42,.05) 11px, rgba(176,35,42,.05) 22px);
  border: 1px dashed var(--line);
  display: grid; place-items: center; color: var(--ink-faint);
  font-family: var(--mono); font-size: 12px; letter-spacing: .04em; text-align: center;
  min-height: 160px;
}
.ph span { background: rgba(255,253,250,.84); padding: 4px 10px; border-radius: 6px; }
.ph--green { background-color: var(--felt-deep); color: rgba(255,255,255,.55);
  background-image: repeating-linear-gradient(45deg, transparent, transparent 11px, rgba(255,255,255,.04) 11px, rgba(255,255,255,.04) 22px); border-color: rgba(255,255,255,.14); }
.ph--green span { background: rgba(116,26,30,.6); }

/* ============================================================
   MASCOT + CALLOUT (shared design system)
   ============================================================ */
.bro-emblem { display: block; flex: none; }

.bro-callout {
  display: flex; gap: 0; align-items: stretch;
  margin: 34px 0;
}
.bro-callout__bro {
  flex: none; width: 92px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding-top: 6px;
}
.bro-callout__bro .bro-emblem { width: 84px; height: 84px; filter: drop-shadow(0 6px 14px rgba(116,26,30,.22)); }
.bro-callout__bro .tag {
  font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent-deep); margin-top: 8px; font-weight: 700; text-align: center; line-height: 1.3;
}
.bro-callout__bubble {
  position: relative; flex: 1; background: var(--felt); color: #fff;
  border-radius: var(--r-lg); padding: 22px 26px; box-shadow: var(--shadow);
  margin-left: 18px;
}
.bro-callout__bubble::before {
  content: ""; position: absolute; left: -13px; top: 30px;
  border-width: 9px 14px 9px 0; border-style: solid;
  border-color: transparent var(--felt) transparent transparent;
}
.bro-callout__bubble .says {
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent); font-weight: 700; margin: 0 0 7px;
}
.bro-callout__bubble p { margin: 0; font-size: 1.06rem; line-height: 1.55; }
.bro-callout__bubble p + p { margin-top: .7rem; }
.bro-callout__bubble strong { color: var(--accent); font-weight: 700; }

/* light variant (gold bubble on cream) */
.bro-callout--accent .bro-callout__bubble { background: var(--accent-tint); color: var(--ink); border: 1px solid var(--accent-line); box-shadow: var(--shadow-sm); }
.bro-callout--accent .bro-callout__bubble::before { border-color: transparent var(--accent-tint) transparent transparent; }
.bro-callout--accent .bro-callout__bubble .says { color: var(--accent-deep); }
.bro-callout--accent .bro-callout__bubble strong { color: var(--accent-deep); }

/* ============================================================
   HEADER / NAV (injected by site.js)
   ============================================================ */
.nav {
  position: sticky; top: 0; z-index: 60;
  background: rgba(248,244,238,.88); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
/* On phones the tab bar is the navigation: only one fixed bar on screen. */
@media (max-width:640px) { .nav { position: static; } }
.nav__inner { max-width: var(--maxw); margin: 0 auto; height: var(--nav-h); padding: 0 24px;
  display: flex; align-items: center; gap: 28px; }
.brand { display: flex; align-items: center; gap: 11px; flex: none; }
.brand .bro-emblem { width: 42px; height: 42px; }
.brand__name { font-family: var(--display); font-weight: 800; font-size: 1.32rem; letter-spacing: -.02em; line-height: 1; }
.brand__name b { color: var(--felt); }
.brand__name span { display: block; font-family: var(--mono); font-size: 9px; letter-spacing: .22em; text-transform: uppercase; color: var(--accent-deep); margin-top: 3px; font-weight: 700; }

.nav__links { display: flex; align-items: center; gap: 4px; margin-left: 6px; }
.nav__links a {
  font-weight: 600; font-size: .97rem; padding: 9px 14px; border-radius: 999px; color: var(--ink-soft);
  transition: color .15s, background .15s;
}
.nav__links a:hover { color: var(--felt); background: var(--felt-tint); }
.nav__links a.active { color: var(--felt); background: var(--felt-tint); }

.nav__right { margin-left: auto; display: flex; align-items: center; gap: 12px; }

/* region selector */
.region { position: relative; }
.region__btn {
  display: inline-flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--line);
  padding: 8px 13px; border-radius: 999px; font-weight: 600; font-size: .9rem; color: var(--ink);
}
.region__btn .flag { font-size: 1.1rem; line-height: 1; }
.region__btn .chev { width: 14px; height: 14px; color: var(--ink-faint); transition: transform .2s; }
.region.open .region__btn .chev { transform: rotate(180deg); }
.region__menu {
  position: absolute; right: 0; top: calc(100% + 8px); background: #fff; border: 1px solid var(--line);
  border-radius: var(--r); box-shadow: var(--shadow-lg); padding: 6px; min-width: 184px; display: none;
}
.region.open .region__menu { display: block; }
.region__menu button {
  display: flex; align-items: center; gap: 10px; width: 100%; background: none; border: 0; text-align: left;
  padding: 9px 11px; border-radius: 9px; font-weight: 600; font-size: .92rem; color: var(--ink);
}
.region__menu button:hover { background: var(--felt-tint); }
.region__menu button .flag { font-size: 1.15rem; }
.region__menu button.sel { color: var(--felt); }
.region__menu button.sel::after { content: "✓"; margin-left: auto; color: var(--accent-deep); }

.nav__burger { display: none; background: none; border: 0; padding: 8px; border-radius: 10px; color: var(--ink); }
.nav__burger:hover { background: var(--felt-tint); }
.nav__burger svg { width: 26px; height: 26px; }

/* mobile drawer */
.drawer { position: fixed; inset: 0; z-index: 80; display: none; }
.drawer.open { display: block; }
.drawer__scrim { position: absolute; inset: 0; background: rgba(40,16,14,.42); backdrop-filter: blur(2px); animation: fade .2s ease; }
.drawer__panel {
  position: absolute; top: 0; right: 0; height: 100%; width: min(86vw, 340px);
  background: var(--cream); box-shadow: var(--shadow-lg); padding: 22px; overflow-y: auto;
  animation: slideIn .26s cubic-bezier(.2,.7,.3,1); display: flex; flex-direction: column;
}
.drawer__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.drawer__close { background: #fff; border: 1px solid var(--line); border-radius: 50%; width: 40px; height: 40px; padding: 0; flex: none; display: grid; place-items: center; color: var(--ink); }
.drawer__links { display: flex; flex-direction: column; gap: 2px; }
.drawer__links a {
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--display); font-weight: 700; font-size: 1.5rem; padding: 13px 6px;
  border-bottom: 1px solid var(--line-soft);
}
.drawer__links a.active { color: var(--felt); }
.drawer__links a .num { font-family: var(--mono); font-size: 11px; color: var(--ink-faint); font-weight: 700; }
.drawer__region { margin-top: auto; padding-top: 22px; }
.drawer__region .lbl { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 10px; }
.drawer__region .opts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.drawer__region button { display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 11px; font-weight: 600; font-size: .9rem; }
.drawer__region button.sel { border-color: var(--felt); background: var(--felt-tint); color: var(--felt); }

@keyframes fade { from { opacity: 0; } }
@keyframes slideIn { from { transform: translateX(100%); } }

/* ============================================================
   MOBILE BOTTOM TAB BAR (injected)
   ============================================================ */
.tabbar { display: none; }

/* ============================================================
   HERO
   ============================================================ */
.hero { position: relative; overflow: hidden; }
.hero__felt {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(120% 90% at 80% -10%, rgba(49,85,107,.16), transparent 55%),
    radial-gradient(90% 80% at 10% 110%, rgba(176,35,42,.08), transparent 60%);
  pointer-events: none;
}

/* ============================================================
   FOOTER (injected)
   ============================================================ */
.foot { background: var(--felt-deep); color: rgba(255,255,255,.78); margin-top: 40px; }
.foot a { color: rgba(255,255,255,.78); }
.foot a:hover { color: var(--accent); }
.foot__top { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; padding: 56px 0 44px; }
.foot__brand .brand__name { color: #fff; }
.foot__brand .brand__name b { color: var(--accent); }
.foot__brand p { color: rgba(255,255,255,.6); margin: 16px 0 0; font-size: .95rem; max-width: 34ch; }
.foot__col h4 { color: #fff; font-family: var(--sans); font-size: .82rem; text-transform: uppercase; letter-spacing: .12em; font-weight: 700; margin-bottom: 16px; }
.foot__col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; font-size: .95rem; }
.foot__bottom { border-top: 1px solid rgba(255,255,255,.12); padding: 22px 0; display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; font-size: .85rem; color: rgba(255,255,255,.55); }
.foot__bottom .gamble { display: inline-flex; align-items: center; gap: 9px; }
.age-pill { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--accent); color: var(--accent); font-weight: 800; font-size: .8rem; font-family: var(--mono); flex: none; }

/* responsible gaming strip */
.rg-strip { background: var(--accent-tint); border-top: 1px solid var(--accent-line); border-bottom: 1px solid var(--accent-line); }
.rg-strip__inner { display: flex; align-items: center; gap: 14px; padding: 14px 0; font-size: .9rem; color: var(--accent-deep); }
.rg-strip__inner .age-pill { width: 30px; height: 30px; border-color: var(--accent-deep); color: var(--accent-deep); font-size: .72rem; }

/* ============================================================
   MISC content bits
   ============================================================ */
.breadcrumb { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 12px; color: var(--ink-faint); letter-spacing: .04em; }
.breadcrumb a:hover { color: var(--felt); }
.breadcrumb .sep { opacity: .5; }

.pill-row { display: flex; flex-wrap: wrap; gap: 9px; }

.stat { }
.stat b { font-family: var(--display); font-weight: 800; font-size: 2.4rem; display: block; line-height: 1; color: var(--felt); }
.stat span { font-size: .9rem; color: var(--ink-soft); }

/* prose for articles */
.prose { font-size: 1.12rem; line-height: 1.75; color: var(--ink); }
.prose > * + * { margin-top: 1.3rem; }
.prose h2 { font-size: 1.9rem; margin-top: 2.6rem; }
.prose h3 { font-size: 1.4rem; margin-top: 2rem; }
.prose p { margin: 0; }
.prose ul, .prose ol { margin: 0; padding-left: 1.3em; }
.prose li + li { margin-top: .5rem; }
.prose blockquote { margin: 0; padding: 6px 0 6px 24px; border-left: 4px solid var(--accent); font-family: var(--display); font-style: italic; font-size: 1.35rem; color: var(--felt-deep); }
.prose a.link { color: var(--felt); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; font-weight: 600; }

/* table */
.tbl { width: 100%; border-collapse: collapse; font-size: .98rem; background: var(--paper); border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); }
.tbl th, .tbl td { padding: 14px 16px; text-align: left; border-bottom: 1px solid var(--line-soft); }
.tbl th { background: var(--felt-tint); font-family: var(--mono); font-size: 11.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--felt-deep); font-weight: 700; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl tbody tr:hover { background: var(--cream); }
.tbl .num { font-family: var(--mono); }

/* pros/cons */
.pc { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.pc__box { border-radius: var(--r-lg); padding: 22px 24px; border: 1px solid var(--line); }
.pc__box h4 { font-family: var(--sans); font-size: .85rem; text-transform: uppercase; letter-spacing: .1em; display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.pc__box ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; font-size: .98rem; }
.pc__box li { display: flex; gap: 10px; align-items: flex-start; }
.pc__box li .ic { flex: none; margin-top: 2px; }
.pc--pro { background: var(--ok-tint); border-color: var(--ok-line); }
.pc--pro h4 { color: var(--ok); }
.pc--con { background: var(--player-tint); border-color: var(--bad-line); }
.pc--con h4 { color: var(--player); }

/* step sequence (used on strategy detail + how-to-play) */
.seq { display: flex; align-items: stretch; gap: 6px; flex-wrap: wrap; }
.seq__step { flex: 1; min-width: 120px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 16px; text-align: center; }
.seq__step--win { border-color: var(--accent); background: var(--accent-tint); }
.seq__n { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--felt); color: #fff; font-family: var(--mono); font-size: 12px; font-weight: 700; margin-bottom: 8px; }
.seq__step b { display: block; font-family: var(--display); font-size: 1.5rem; }
.seq__step .win { display: block; color: var(--felt); font-weight: 700; font-size: .85rem; margin-top: 4px; }
.seq__step small { display: block; color: var(--ink-faint); font-family: var(--mono); font-size: 10.5px; margin-top: 6px; }
.seq__arrow { display: flex; align-items: center; color: var(--ink-faint); font-size: 1.3rem; }

/* casino card */
.casino { display: grid; grid-template-columns: auto 1fr auto; gap: 22px; align-items: center; }
.casino__logo { width: 96px; height: 96px; border-radius: 18px; flex: none; }
.rating { display: inline-flex; align-items: baseline; gap: 6px; }
.rating b { font-family: var(--display); font-size: 1.9rem; font-weight: 800; color: var(--felt); line-height: 1; }
.rating span { font-size: .82rem; color: var(--ink-faint); }
.stars { display: inline-flex; gap: 2px; color: var(--accent); }

.feature-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: .94rem; }
.feature-list li { display: flex; gap: 9px; align-items: center; }

/* article card */
.art-card { overflow: hidden; padding: 0; }
.art-card .ph { border-radius: 0; border: 0; border-bottom: 1px solid var(--line); min-height: 190px; }
.art-card__body { padding: 22px 24px 26px; }
.art-card__meta { display: flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 11px; color: var(--ink-faint); margin-top: 14px; }

/* tool card */
.tool-card { display: flex; flex-direction: column; }
.tool-card .badge { align-self: flex-start; }

/* newsletter */
.news { background: var(--felt); color: #fff; border-radius: var(--r-xl); padding: 48px 52px; position: relative; overflow: hidden; }
.news__felt { position: absolute; inset: 0; background: radial-gradient(80% 120% at 90% 10%, rgba(49,85,107,.22), transparent 60%); }
.news form { display: flex; gap: 10px; max-width: 440px; }
.news input { flex: 1; padding: 14px 18px; border-radius: 999px; border: 0; font-family: var(--sans); font-size: 1rem; }
.news input:focus { outline: 3px solid var(--accent); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1180px) {
  .nav__links { display: none; }
  .nav__burger { display: block; }
}
@media (max-width: 1080px) {
  .foot__top { grid-template-columns: 1fr 1fr; gap: 32px; }
  .foot__brand { grid-column: 1 / -1; }
}

@media (max-width: 860px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .section-head { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 640px) {
  body { font-size: 16px; } /* tab-bar room: body.ccc in theme.css */
  .btn--sm { min-height: 44px; padding: 11px 16px; }
  .wrap { padding: 0 18px; }
  .section { padding: 48px 0; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .pc { grid-template-columns: 1fr; }
  .casino { grid-template-columns: auto 1fr; }
  .casino__cta { grid-column: 1 / -1; }
  .news { padding: 32px 24px; }
  .news form { flex-direction: column; }
  .news input { width: 100%; }
  .region { display: none; } /* in drawer on mobile */
  .nav__right .btn { display: none; }

  /* mobile bottom tab bar */
  .tabbar {
    display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 70;
    background: rgba(255,253,250,.95); backdrop-filter: blur(12px);
    border-top: 1px solid var(--line); padding: 6px 4px calc(env(safe-area-inset-bottom, 0px) + 4px);
    justify-content: space-around;
  }
  .tabbar a { flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 3px; padding: 6px 2px; color: var(--ink-faint); font-size: 10px; font-weight: 600; letter-spacing: .02em; }
  .tabbar a svg { width: 23px; height: 23px; }
  .tabbar a.active { color: var(--felt); }

  .bro-callout { flex-direction: column; }
  .bro-callout__bro { width: 100%; flex-direction: row; gap: 12px; justify-content: flex-start; padding: 0 0 4px; }
  .bro-callout__bro .bro-emblem { width: 58px; height: 58px; }
  .bro-callout__bro .tag { margin-top: 0; text-align: left; }
  .bro-callout__bubble { margin-left: 0; }
  .bro-callout__bubble::before { left: 26px; top: -13px; border-width: 0 9px 14px 9px; border-color: transparent transparent var(--felt) transparent; }
  .bro-callout--accent .bro-callout__bubble::before { border-color: transparent transparent var(--accent-tint) transparent; }

  .section-head h2 { font-size: 1.7rem; }
}
/* components.css */
/* ============================================================================
   Credit Card Casinos — page components (shared with the site's design system,
   re-skinned through design.css tokens). Site-specific sections live in ccc.css.
   ============================================================================ */

/* ---- shared page hero ---- */
.page-hero { padding:40px 0 8px; position:relative; overflow:hidden; }
.page-hero .wrap { position:relative; z-index:1; }
.page-hero h1 { font-family:var(--display); font-weight:800; line-height:1.05; letter-spacing:-.015em; font-size:clamp(2.2rem,4.6vw,3.6rem); }
.hero__felt { position:absolute; inset:0; z-index:0; background:radial-gradient(120% 90% at 80% -10%, rgba(49,85,107,.14), transparent 55%), radial-gradient(90% 80% at 10% 110%, rgba(176,35,42,.07), transparent 60%); pointer-events:none; }

/* ---- guide layout: table of contents beside the article ---- */
.learn-layout { display:grid; grid-template-columns:240px 1fr; gap:48px; align-items:start; }
/* grid-blowout guard: children may not force the column wider than the viewport */
.learn-layout > * { min-width:0; }
/* No inner scrollbar: the card is static unless it fits the screen (below). */
.learn-nav { position:static; max-width:100%; }
/* Desktop: the card sticks when it fits the screen (.is-sticky, set in ccc_article_body()); otherwise its call to action does. */
/* Wider rail on large screens so the card's call to action fits on one line. */
@media (min-width:1200px) { .learn-layout { grid-template-columns:280px 1fr; } }
.ccc-toc-sticky { display:none; }
@media (min-width:921px) {
	.learn-nav { align-self:stretch; }
	.learn-nav.is-sticky { position:sticky; top:96px; align-self:start; }
	.learn-nav:not(.is-sticky) .ccc-toc-sticky { display:block; position:sticky; top:96px; margin-top:16px; padding:14px 22px; background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg); }
	.ccc-toc-sticky .ccc-toc-cta { margin:0; padding:0; border:0; }
}
.learn-nav__card { max-width:100%; background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg); padding:22px; box-shadow:var(--shadow-sm); }
.side-title { font-family:var(--sans); font-size:.8rem; text-transform:uppercase; letter-spacing:.12em; color:var(--ink-faint); margin-bottom:14px; }
.learn-toc { list-style:none; margin:0; padding:0; counter-reset:toc; display:flex; flex-direction:column; }
.learn-toc li { counter-increment:toc; }
.learn-toc a { display:flex; gap:10px; padding:8px 0; font-weight:600; font-size:.92rem; border-bottom:1px solid var(--line-soft); color:var(--ink); text-decoration:none; }
.learn-toc li:last-child a { border-bottom:0; }
.learn-toc a::before { content:counter(toc,decimal-leading-zero); font-family:var(--mono); font-size:11px; color:var(--accent-deep); font-weight:700; }
.learn-toc a:hover { color:var(--felt); }
.learn-main { max-width:none; }

/* ---- faq ---- */
.faq { display:flex; flex-direction:column; gap:10px; }
.faq details { background:var(--paper); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow-sm); overflow:hidden; }
.faq summary { list-style:none; cursor:pointer; padding:17px 20px; font-weight:700; font-size:1.02rem; display:flex; align-items:center; justify-content:space-between; gap:14px; }
.faq .faq-x { position:relative; width:16px; height:16px; flex:none; }
.faq .faq-x::before, .faq .faq-x::after { content:""; position:absolute; background:var(--felt); border-radius:2px; transition:transform .2s; }
.faq .faq-x::before { top:7px; left:0; width:16px; height:2px; }
.faq .faq-x::after { left:7px; top:0; width:2px; height:16px; }
.faq details[open] .faq-x::after { transform:rotate(90deg); opacity:0; }
.faq details p { margin:0; padding:0 20px 18px; color:var(--ink-soft); font-size:.97rem; line-height:1.6; }

/* ---- side cards ---- */
.side-card { background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg); padding:24px; box-shadow:var(--shadow-sm); }
.side-dl { margin:0; display:flex; flex-direction:column; gap:0; }
.side-dl > div { display:flex; justify-content:space-between; align-items:center; padding:11px 0; border-bottom:1px solid var(--line-soft); }
.side-dl > div:last-child { border-bottom:0; }
.side-dl dt { color:var(--ink-soft); font-size:.92rem; }
.side-dl dd { margin:0; font-weight:700; display:inline-flex; align-items:center; gap:6px; }
.side-links { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.side-links a { display:flex; justify-content:space-between; align-items:center; gap:10px; min-height:44px; padding:10px 0; border-bottom:1px solid var(--line-soft); font-weight:600; font-size:.95rem; color:var(--ink); }
.side-links li:last-child a { border-bottom:0; }
.side-links a:hover { color:var(--felt); }

/* ---- calculator panel ---- */
.calc { display:grid; grid-template-columns:.85fr 1.15fr; gap:0; background:var(--paper); border:1px solid var(--line); border-radius:var(--r-xl); overflow:hidden; box-shadow:var(--shadow); }
.calc__intro { background:var(--felt-deep); color:#fff; padding:40px; }
.calc__intro h2 { color:#fff; font-family:var(--display); font-weight:800; font-size:2rem; margin:14px 0 12px; }
.calc__intro .muted { color:rgba(255,255,255,.72); }
.calc__field { margin-bottom:24px; }
.calc__field > label { display:block; font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:10px; font-weight:700; }
.stake-input { display:flex; align-items:center; background:var(--cream); border:1.5px solid var(--line); border-radius:var(--r); padding:0 16px; margin-bottom:14px; }
.stake-input:focus-within { border-color:var(--felt); outline:3px solid var(--accent); outline-offset:2px; }
.stake-cur { font-family:var(--display); font-size:1.5rem; color:var(--felt); font-weight:700; }
.stake-input input { flex:1; border:0; background:transparent; font-family:var(--display); font-size:1.8rem; font-weight:700; padding:14px 8px; color:var(--ink); outline:none; -moz-appearance:textfield; }
.stake-input input::-webkit-outer-spin-button, .stake-input input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.calc__results { margin-top:30px; }

/* ---- responsive ---- */
@media (max-width:920px){
	.learn-layout { grid-template-columns:1fr; gap:26px; }
	/* Mobile TOC: clean one-per-row list with dividers (not wrapping pills). */
	.learn-toc a { padding:13px 2px; }
}
@media (max-width:860px){
	.calc { grid-template-columns:1fr; }
}

/* ===== Mobile overflow hardening (2026-06) ===========================
   Grid/flex items default to min-width:auto, so a wide child (a table, a
   long token, a fixed box) forces the column past the viewport. min-width:0
   lets these columns shrink so their content wraps/scrolls inside its own box. */
.learn-main, .learn-nav, .calc__intro { min-width:0; }
.calc__intro { overflow-wrap:anywhere; }

@media (max-width:640px){
	.calc__intro { padding:28px 24px; }
}

/* ---- casino review ---- */
.rev-hero { background:var(--cream-deep); border-bottom:1px solid var(--line); padding:36px 0 44px; }
.rev-hero__id { display:flex; align-items:center; gap:22px; }
.rev-hero h1 { font-family:var(--display); font-weight:800; font-size:clamp(2.2rem,4.4vw,3.4rem); line-height:1.05; letter-spacing:-.015em; margin:0; }

.rev-layout { display:grid; grid-template-columns:1fr 300px; gap:48px; align-items:start; padding-top:14px; }
.rev-layout > * { min-width:0; }
.rev-main { min-width:0; }
.rev-side { display:flex; flex-direction:column; gap:18px; max-width:100%; }
/* On very short windows, ordinary document scrolling is easier than a sticky group. */
@media (max-height:480px) {
	.rev-side__sticky { position:static !important; }
}

@media (max-width:1020px){
	.rev-layout { grid-template-columns:1fr; gap:30px; }
}
@media (max-width:640px){
	.rev-hero__id { flex-direction:column; align-items:flex-start; gap:16px; }
}

/* review sidebar refinements (reference variant of side-dl) */
.rev-side .side-dl > div { padding:10px 0; gap:12px; }
.rev-side .side-dl dt { font-size:.9rem; }
.rev-side .side-dl dd { display:block; font-weight:700; font-size:.9rem; text-align:right; }
/* reference h2 rhythm inside the review body */
.ccc .rev-main h2 { font-size:1.8rem; margin:44px 0 16px; }
.ccc .rev-main > h2:first-child { margin-top:34px; }
.ccc .rev-main p { font-size:1.08rem; line-height:1.7; }
/* theme.css */
/* ============================================================================
   Credit Card Casinos — WordPress / GeneratePress glue for the design system.
   design.css holds the tokens + base components; this file maps GP's
   structures onto it and styles the editorial layer (header submenus, notice
   strip, breadcrumbs, byline, content surface, related cards).
   ============================================================================ */

/* ---- GeneratePress neutralisation: we render our own .nav + .foot ---- */
#masthead, .site-header, .main-navigation:not(.nav__links), .footer-widgets, .site-info { display: none; }
#page.grid-container,
.grid-container.container,
body:not(.x) .grid-container { max-width: none !important; padding: 0 !important; }
.site-content { padding: 0 !important; background: transparent; display: block; }
.site-content .content-area,
.separate-containers .site-main { width: 100% !important; max-width: none !important; float: none !important; margin: 0 !important; padding: 0 !important; }
.site-content > main, #main, main.site-main { width: 100% !important; max-width: none !important; margin: 0 !important; }
.separate-containers .inside-article, .one-container .site-content { padding: 0; }
.entry-header, .page-header-image, .generate-page-header { display: none; }
#page, .site, body { background: var(--cream); }
body.ccc { padding-bottom: 0; }
/* Room for the fixed tab bar on phones (one rule; --ccc-bar-h lives in design.css). The footer is always
   last, so it carries the reserve: its dark background then runs under the bar with no cream strip. */
@media (max-width:640px){ body.ccc { padding-bottom: 0; } .ccc .foot { padding-bottom: calc(var(--ccc-bar-h) + 12px + env(safe-area-inset-bottom, 0px)); } }

.ccc-skip { position:absolute; left:-9999px; top:0; z-index:999; background:var(--accent); color:#fff; padding:10px 16px; font-family:var(--mono); font-weight:700; }
.ccc-skip:focus { left:8px; top:8px; }
html { scroll-padding-top: 96px; scroll-padding-bottom: calc(var(--ccc-bar-h) + 16px); }

/* ---- reading progress (thin maple line on top of the sticky nav) ---- */
.ccc-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 90; background: linear-gradient(90deg, var(--felt), var(--accent)); transition: width .1s linear; }

/* ---- disclosure strip above the nav ---- */
.notice-strip { background: var(--felt-deep); color: rgba(255,255,255,.82); font-size: .8rem; line-height: 1.45; }
.notice-strip__inner { max-width: var(--maxw); margin: 0 auto; padding: 8px 24px; display: flex; align-items: center; justify-content: space-between; gap: 6px 20px; flex-wrap: wrap; }
@media (min-width:1180px){ .notice-strip__inner { flex-wrap: nowrap; } .notice-strip__inner > span { white-space: nowrap; } }
.notice-strip a { display: inline-block; padding: 13px 0; margin: -13px 0; color: #fff; text-decoration: underline; text-decoration-color: rgba(49,85,107,.7); text-underline-offset: 3px; }
.notice-strip a:hover { color: var(--accent); }
.notice-strip b { color: #fff; font-weight: 700; }
.notice-strip .ccc-brand-mark { display: inline-flex; vertical-align: -4px; margin-right: 8px; }
@media (max-width:760px){ .notice-strip__inner { justify-content: center; text-align: center; padding: 7px 18px; } .notice-strip__lead { display: block; } }

/* ---- supplied brand logo: fit the existing header and preserve its proportions ---- */
.ccc .brand.ccc-brand {
  display: inline-flex; align-items: center; justify-content: flex-start;
  width: 280px; max-width: 100%; min-width: 0; min-height: 44px;
  flex: 0 1 auto; gap: 0; line-height: 0;
}
.ccc .ccc-brand__image { display: block; width: 100%; max-width: 100%; height: auto; object-fit: contain; }
.ccc .drawer__head .ccc-brand { width: 250px; max-width: calc(100% - 56px); }
.ccc .foot__brand { min-width: 0; }
@media (max-width: 640px) {
  .ccc .brand.ccc-brand { width: 250px; }
}
@media (max-width: 360px) {
  .ccc .brand.ccc-brand { width: 220px; }
}

/* ---- header nav: submenus (hover cards on desktop, accordions in drawer) ---- */
.nav__links a { white-space: nowrap; }
.nav-item { position: relative; display: flex; }
/* The scrollable dropdown clips its own decoration; keep a pointer bridge outside it. */
.nav-item::after { content:""; position:absolute; top:100%; left:0; right:0; height:14px; }
.nav__links .nl-chev { width: 12px; height: 12px; margin-left: 5px; vertical-align: -1px; display: inline-block; color: var(--ink-faint); transition: transform .18s ease; }
.nav-item:hover > a .nl-chev, .nav-item:focus-within > a .nl-chev { transform: rotate(180deg); color: var(--accent-deep); }
.nav-sub {
	position: absolute; top: 100%; left: 50%; z-index: 75;
	min-width: 320px; padding: 9px;
	max-height: calc(100vh - 150px); max-height: calc(100dvh - 150px); overflow-y: auto; overscroll-behavior: contain; scroll-padding-block: 12px;
	background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg);
	box-shadow: var(--shadow-lg);
	opacity: 0; visibility: hidden; transform: translate(-50%, 14px) scale(.985);
	transform-origin: top center;
	transition: opacity .18s ease, transform .18s cubic-bezier(.2,.7,.3,1), visibility .18s;
}
.nav-item:hover .nav-sub, .nav-item:focus-within .nav-sub { opacity: 1; visibility: visible; transform: translate(-50%, 8px) scale(1); }
.nav-sub::before { content: ""; position: absolute; top: -14px; left: 0; right: 0; height: 14px; }
.nav-sub::after {
	content: ""; position: absolute; top: -6px; left: 50%; margin-left: -6px;
	width: 11px; height: 11px; background: var(--paper);
	border-left: 1px solid var(--line); border-top: 1px solid var(--line);
	transform: rotate(45deg); border-top-left-radius: 3px;
}
.nav__links .nav-sub a.sub-link { display: flex; gap: 11px; align-items: flex-start; padding: 10px 13px; border-radius: 12px; font-weight: 400; white-space: normal; }
.nav__links .nav-sub a.sub-link:hover { background: var(--felt-tint); color: inherit; }
.sub-link .sub-ic { flex: none; width: 18px; height: 18px; margin-top: 1px; color: var(--felt); }
.sub-link .sub-ic svg { width: 18px; height: 18px; display: block; }
.sub-link b { display: block; font-weight: 700; font-size: .94rem; color: var(--ink); line-height: 1.3; }
.sub-link:hover b { color: var(--felt); }
.sub-link small { display: block; color: var(--ink-faint); font-size: .81rem; line-height: 1.4; margin-top: 2px; }
.nav-sub--cols { min-width: 520px; }
.nav-sub--cols .nav-sub__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 4px; }
.nav-sub--cols a.sub-link { padding: 9px 12px; }
.nav-sub__cta { margin-top: 6px; border-top: 1px solid var(--line-soft); padding: 4px 4px 0; }
.nav__links .nav-sub__cta a { display: flex; align-items: center; justify-content: space-between; padding: 10px 9px; border-radius: 10px; font-weight: 700; font-size: .88rem; color: var(--accent-deep); }
.nav__links .nav-sub__cta a:hover { background: var(--accent-tint); color: var(--accent-deep); }
.nav-sub__cta .arr { transition: transform .15s; }
.nav-sub__cta a:hover .arr { transform: translateX(3px); }
@media (max-width: 1180px) { .nav-sub { display: none; } }
/* the right-most dropdown opens leftwards so it never runs off-screen */
.nav__links > .nav-item:last-child .nav-sub { left: auto; right: -12px; transform: translate(0, 14px) scale(.985); }
.nav__links > .nav-item:last-child:hover .nav-sub, .nav__links > .nav-item:last-child:focus-within .nav-sub { transform: translate(0, 8px) scale(1); }
.nav__links > .nav-item:last-child .nav-sub::after { left: auto; right: 40px; }

/* Once enhanced, JS owns disclosure state so Escape can override focus-within. */
.nav-item.ccc-nav-ready > .nav-sub { opacity: 0; visibility: hidden; pointer-events: none; transform: translate(-50%, 14px) scale(.985); }
.nav-item.ccc-nav-ready.is-open > .nav-sub { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 8px) scale(1); }
.nav-item.ccc-nav-ready > a .nl-chev { transform: rotate(0); color: var(--ink-faint); }
.nav-item.ccc-nav-ready.is-open > a .nl-chev { transform: rotate(180deg); color: var(--accent-deep); }
.nav__links > .nav-item.ccc-nav-ready:last-child > .nav-sub { transform: translate(0, 14px) scale(.985); }
.nav__links > .nav-item.ccc-nav-ready.is-open:last-child > .nav-sub { transform: translate(0, 8px) scale(1); }
/* Closed submenus leave the render tree, so their lazy logo images are not fetched until opened. */
.nav-item.ccc-nav-ready:not(.is-open):not(:hover):not(:focus-within) > .nav-sub { display: none; }

/* drawer accordions */
.dl-row { display: flex; align-items: stretch; border-bottom: 1px solid var(--line-soft); }
.dl-row a { flex: 1; border-bottom: 0 !important; }
.ccc .dl-toggle,
.ccc .dl-toggle:focus,
.ccc .dl-toggle:active {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 48px;
  align-self: center;
  width: 48px;
  height: 48px;
  min-height: 48px;
  margin: 4px 0 4px 8px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 1px solid #d8ccc5;
  border-radius: 10px;
  background: #fffdfa;
  color: #741a1e;
  box-shadow: none;
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.ccc .dl-toggle:hover { background: #f5e8e7; border-color: #b98b8e; color: #741a1e; }
.ccc .dl-toggle[aria-expanded="true"],
.ccc .dl-toggle[aria-expanded="true"]:hover,
.ccc .dl-toggle[aria-expanded="true"]:focus,
.ccc .dl-toggle[aria-expanded="true"]:active { background: #741a1e; border-color: #741a1e; color: #fff; }
.ccc .dl-toggle:focus-visible { outline: 3px solid #27465a; outline-offset: 3px; }
.ccc .dl-toggle svg { width: 18px; height: 18px; flex-shrink: 0; pointer-events: none; transition: transform .2s ease; }
.ccc .dl-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .ccc .dl-toggle, .ccc .dl-toggle svg { transition: none; } }
.dl-sub { display: none; border-bottom: 1px solid var(--line-soft); background: var(--cream-deep); border-radius: 0 0 12px 12px; }
.dl-item.open .dl-sub { display: block; max-height: none; overflow: visible; }
.dl-sub a { display: flex; align-items: center; justify-content: flex-start; gap: 11px; font-family: var(--sans); font-size: .98rem; font-weight: 600; padding: 12px 14px; color: var(--ink-soft); border-bottom: 0; }
.dl-sub a + a { border-top: 1px solid var(--line-soft); }
.dl-sub a:active { color: var(--felt); }
.drawer__links .dl-row a { font-size: 1.4rem; }
.drawer__foot { margin-top: auto; padding-top: 22px; font-size: .82rem; color: var(--ink-faint); line-height: 1.5; }

/* A native disclosure is available until the full drawer successfully enhances. */
.ccc-nav-fallback { display:none; background:var(--paper); border-bottom:1px solid var(--line); }
.ccc .nav__burger[hidden], .ccc-nav-fallback[hidden] { display:none !important; }
@media (max-width:1180px) {
  .ccc-nav-fallback { display:block; }
  .ccc-nav-fallback > summary { min-height:48px; padding:12px 24px; color:var(--felt-deep); cursor:pointer; font-weight:700; }
  .ccc-nav-fallback > summary:focus-visible { outline:3px solid var(--accent); outline-offset:-4px; }
  .ccc-nav-fallback nav { padding:0 24px 18px; }
  .ccc-nav-fallback ul { list-style:none; padding:0; margin:0; }
  .ccc-nav-fallback li { margin:0; }
  .ccc-nav-fallback li > ul { padding-left:18px; border-left:2px solid var(--line); margin-left:4px; }
  .ccc-nav-fallback a { display:flex; align-items:center; min-height:44px; padding:9px 6px; line-height:1.5; color:var(--felt-deep); text-decoration:underline; text-underline-offset:3px; }
  .ccc-nav-fallback a[aria-current="page"] { font-weight:700; }
}

/* GP's customizer hover colours must not repaint our buttons/components */
a.btn--primary:hover, a.btn--primary:focus { color: #fff !important; }
a.btn--accent:hover, a.btn--accent:focus { color: #fff !important; }
a.btn--light:hover, a.btn--light:focus { color: var(--felt-deep) !important; }
a.btn--ghost:hover, a.btn--ghost:focus { color: var(--felt) !important; }
.ccc button.btn--primary:focus { background: var(--felt); color: #fff; }
.ccc button.btn--primary:hover, .ccc button.btn--primary:active { background: var(--felt-bright); color: #fff; }
.ccc button.btn--accent:focus { background: var(--accent); color: #fff; }
.ccc button.btn--accent:hover, .ccc button.btn--accent:active { background: var(--accent-strong); color: #fff; }
.ccc button.btn--ghost:focus, .ccc button.btn--ghost:hover, .ccc button.btn--ghost:active { background: transparent; border-color: var(--felt); color: var(--felt); }
.ccc button.btn--light:focus, .ccc button.btn--light:hover, .ccc button.btn--light:active { background: #fff; color: var(--felt-deep); }
button.drawer__close:hover, button.drawer__close:focus { background: #fff; color: var(--ink); }
button.nav__burger:hover, button.nav__burger:focus { background: var(--felt-tint); color: var(--ink); }
button.chip:hover, button.chip:focus { background: var(--felt-bright); border-color: var(--felt-bright); color: #fff; }
button.chip.active:hover, button.chip.active:focus { background: var(--felt); border-color: var(--felt); color: #fff; }
a.card--link:hover, a.card--link:hover h3, a.card--link:focus, a.card--link:focus h3 { color: var(--ink); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* ---- breadcrumbs (Yoast) -> mono trail ---- */
.ccc-crumbs { font-family: var(--mono); font-size: 12px; letter-spacing: .04em; color: var(--ink-faint); line-height: 1.6; }
.ccc-crumbs a { color: var(--ink-faint); }
.ccc-crumbs a:hover { color: var(--felt); }
.ccc-crumbs .breadcrumb_last { color: var(--ink-soft); }
.ccc-crumbs > span > span { white-space: normal; }

/* ---- byline pill: written by / fact-checked by / updated ---- */
.byline-wrap { container-type: inline-size; margin-top: 22px; }
.byline { display: flex; align-items: stretch; flex-wrap: wrap; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); overflow: hidden; }
.byline--compact { display: inline-flex; width: auto; max-width: 100%; align-items: center; border-radius: 999px; padding: 4px 8px; }
.byline__p { flex: none; display: flex; gap: 9px; align-items: center; padding: 6px 16px 6px 8px; }
.byline__p + .byline__p { border-left: 1px solid var(--line-soft); }
.byline__txt { display: inline-flex; align-items: baseline; gap: 7px; white-space: nowrap; }
.byline__role { display: block; font-family: var(--mono); font-size: 9px; letter-spacing: .15em; text-transform: uppercase; color: var(--accent-deep); font-weight: 700; }
.byline__name { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; font-size: .92rem; line-height: 1.3; color: var(--ink); }
.byline__name a { color: inherit; }
.byline__name a:hover { color: var(--felt); }
.byline__meta { flex: none; display: flex; align-items: center; gap: 12px; padding: 6px 10px 6px 16px; border-left: 1px solid var(--line-soft); font-family: var(--mono); font-size: 11px; color: var(--ink-soft); line-height: 1.5; white-space: nowrap; }
.byline__meta b { color: var(--ink); font-weight: 700; }
@container (max-width: 920px) {
	.byline--compact .byline__p { padding: 5px 12px 5px 6px; gap: 8px; }
	.byline--compact .byline__txt { flex-direction: column; align-items: flex-start; gap: 1px; }
	.byline--compact .byline__meta { flex-direction: column; align-items: flex-start; justify-content: center; gap: 1px; padding: 4px 10px 4px 14px; font-size: 10px; }
}
@container (max-width: 560px) {
	.byline--compact { display: flex; flex-wrap: wrap; border-radius: var(--r-lg); }
	.byline--compact .byline__p { padding: 7px 10px; }
	.byline--compact .byline__p + .byline__p { border-left: 0; }
	.byline--compact .byline__meta { flex-basis: 100%; flex-direction: row; gap: 12px; border-left: 0; border-top: 1px solid var(--line-soft); padding: 8px 14px; white-space: normal; }
}

/* ============================================================
   CONTENT SURFACE (.entry-content -> prose)
   ============================================================ */
.ccc .entry-content { font-size: 1.1rem; line-height: 1.75; color: var(--ink); }
.ccc .entry-content > * + * { margin-top: 1.3rem; }
.entry-content p, .prose p { margin: 0; }
.entry-content p + p, .entry-content p + ul, .entry-content p + ol, .entry-content ul + p, .entry-content ol + p,
.entry-content ul + ul, .entry-content ol + ol { margin-top: 1.3rem; }
.entry-content > * + p, .entry-content > * + ul, .entry-content > * + ol { margin-top: 1.3rem; }
.entry-content h2 { font-family: var(--display); font-weight: 800; font-size: clamp(1.6rem,3.2vw,2rem); line-height: 1.12; color: var(--ink); margin-top: 2.6rem; }
.entry-content h3 { font-family: var(--display); font-weight: 800; font-size: 1.38rem; line-height: 1.2; color: var(--ink); margin-top: 2rem; }
.entry-content h4 { font-family: var(--sans); font-weight: 800; font-size: 1.08rem; color: var(--ink); margin-top: 1.6rem; }
.entry-content h2 + *, .entry-content h3 + *, .entry-content h4 + * { margin-top: .8rem; }
.entry-content p, .entry-content li { color: var(--ink); }
/* Editorial links are slate; maple red is kept for buttons and commercial bands. */
.entry-content a:not(.btn):not(.lcard), .prose a:not(.btn):not(.lcard) { color: var(--accent-deep); text-decoration: underline; text-decoration-color: var(--accent-line); text-decoration-thickness: 1px; text-underline-offset: .18em; font-weight: 600; }
.entry-content a:not(.btn):not(.lcard):hover, .prose a:not(.btn):not(.lcard):hover { color: var(--ink); text-decoration-color: currentColor; }
.entry-content ul, .entry-content ol { padding-left: 1.3em; margin: 0; }
.entry-content li + li { margin-top: .5rem; }
.entry-content li::marker { color: var(--felt); }
.entry-content strong { font-weight: 700; }
.entry-content blockquote, .entry-content .wp-block-quote { margin: 1.8rem 0; padding: 4px 0 4px 24px; border-left: 4px solid var(--accent); }
.entry-content blockquote p { font-family: var(--display); font-style: italic; font-size: 1.25rem; line-height: 1.5; color: var(--felt-deep); }
.entry-content blockquote cite { display: block; margin-top: .6rem; font-family: var(--mono); font-style: normal; font-size: .78rem; color: var(--ink-faint); }
.entry-content :where(h1,h2,h3) a { text-decoration: none; }
.entry-content img { border-radius: var(--r); height: auto; }
.entry-content figure { margin: 1.8rem 0; }
.entry-content figcaption { font-size: .85rem; color: var(--ink-faint); margin-top: .5rem; }
.entry-content hr { border: 0; border-top: 1px solid var(--line); margin: 2.4rem 0; }
.entry-content .wp-block-table, .entry-content .table-scroll { margin: 1.8rem 0; }
.table-scroll { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--r); }
.entry-content table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .96rem; line-height: 1.5; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; margin: 0; }
.entry-content th, .entry-content td { padding: 13px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line-soft); }
.entry-content thead th, .entry-content tr:first-child th:not([scope="row"]) { background: var(--felt-tint); font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--felt-deep); font-weight: 700; }
.entry-content tbody tr:last-child td { border-bottom: 0; }
.entry-content tbody tr:nth-child(even) td { background: rgba(240,232,222,.35); }
.entry-content .wp-block-table table { border-collapse: separate; }
.entry-content .wp-block-table td, .entry-content .wp-block-table th { border-left: 0; border-right: 0; border-top: 0; }
@media (max-width: 860px) { .entry-content table { min-width: 560px; } .entry-content .table-scroll table { min-width: 560px; } }
.entry-content .wp-block-embed { margin: 1.8rem 0; }
.entry-content .wp-block-embed iframe { width: 100%; border-radius: var(--r); }
.ccc .entry-content.ccc-readcol { max-width: 800px; }

/* TL;DR box ([tldr] shortcode from Code Snippets) */
.tldr-box { position: relative; background: var(--accent-tint); border: 1px solid var(--accent-line); border-radius: var(--r-lg); padding: 22px 24px 20px; margin: 1.8rem 0; }
.tldr-box .tldr-label { display: inline-block; font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: #fff; background: var(--felt); border-radius: 999px; padding: 4px 11px; margin-bottom: 10px; }
.tldr-box p { font-size: 1.02rem; line-height: 1.65; }

/* ---- related cards (end of pages) ---- */
.ccc-related { margin-top: 3.2rem; padding-top: 2.2rem; border-top: 1px solid var(--line); }
.ccc-related__title { font-family: var(--display); font-weight: 800; font-size: 1.6rem; color: var(--ink); margin: 6px 0 1.2rem; }
.lcards { display: grid; grid-template-columns: 1fr; gap: 16px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 600px) { .lcards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .lcards { grid-template-columns: repeat(3, 1fr); } }
/* Cards in one row share the row's height (the <li> stretches; the card fills it). */
.lcards > li { display: flex; }
.lcards > li > .lcard { flex: 1 1 auto; }
.lcard { display: flex; gap: 14px; align-items: flex-start; padding: 20px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); color: var(--ink); transition: transform .2s, box-shadow .25s, border-color .2s; }
.lcard:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--accent); color: var(--ink); }
.lcard__ic { flex: none; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--felt-tint); color: var(--felt); }
.lcard__ic svg { width: 22px; height: 22px; }
.lcard__t { display: block; font-family: var(--display); font-weight: 800; font-size: 1.12rem; line-height: 1.2; }
.lcard__d { display: block; color: var(--ink-soft); font-size: .9rem; line-height: 1.5; margin-top: 4px; }
.entry-content .lcards { padding: 0; list-style: none; }
.entry-content .lcards li + li { margin: 0; }
.entry-content a.lcard { text-decoration: none; font-weight: 400; color: var(--ink); }
.lcard__date { display: block; margin-top: 8px; font-size: .8rem; line-height: 1.4; color: var(--ink-faint); }
/* Casino results in search: the logo tile takes the icon box's place. */
.lcard__ic--logo { display: flex; align-items: center; justify-content: center; width: 64px; height: 36px; padding: 4px 6px; border: 1px solid var(--line); border-radius: 8px; background: #fff; overflow: hidden; }
.lcard__ic--logo.logo-frame--trim { padding: 0; }
.lcard__ic--logo img { display: block; width: 100%; height: 100%; max-width: 100%; margin: 0; border-radius: 0; object-fit: contain; }
/* /articles/ group headings. */
.ccc-library > h2 { margin: 40px 0 16px; }
.ccc-library > h2:first-child { margin-top: 0; }

/* ---- author / reviewer box (E-E-A-T) ---- */
.ccc-authorbox { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 16px; align-items: start; margin: 2.6rem 0 0; padding: 22px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--paper); box-shadow: var(--shadow-sm); }
.ccc-authorbox > div { min-width: 0; }
.ccc .ccc-authorbox .ccc-authorbox__name { font-family: var(--sans); font-weight: 800; font-size: 1.15rem; line-height: 1.35; margin: 0; color: var(--ink); }
.ccc .ccc-authorbox .ccc-authorbox__bio { margin: .4em 0 0; color: var(--ink-soft); font-size: .95rem; line-height: 1.6; }
.ccc .ccc-authorbox .ccc-authorbox__links { margin: .5em 0 0; font-size: .875rem; line-height: 1.6; color: var(--ink-faint); }
.ccc-authorbox__links a { display: inline-block; padding: 8px 0; }

/* ---- the changelog mu-plugin, re-skinned to the system ---- */
.ccc-changelog-wrap { margin: 2.6rem 0 0 !important; border: 1px solid var(--line) !important; border-radius: var(--r-lg) !important; background: var(--paper) !important; box-shadow: var(--shadow-sm) !important; overflow: hidden; font-family: var(--sans) !important; }
.ccc-changelog-toggle { background: var(--paper) !important; color: var(--ink) !important; font-family: var(--sans) !important; padding: 16px 20px !important; }
.ccc-changelog-toggle:hover { background: var(--cream) !important; }
.ccc-changelog-entries { background: var(--paper) !important; }
.ccc-changelog-date-header { font-family: var(--mono) !important; color: var(--accent-deep) !important; letter-spacing: .08em; }
.ccc-changelog-msg { color: var(--ink-soft) !important; }
.entry-content .ccc-changelog-wrap a { text-decoration: none; }

/* ---- province view: the site runs in "Rest of Canada" mode (body.roc);
   Ontario-only copy stays hidden, exactly as on the live site ---- */
body.ontario .roc-only { display: none !important; }
body.roc .ontario-only { display: none !important; }
body:not(.ontario):not(.roc) .ontario-only { display: none !important; }

/* ============================================================
   LEGACY CONTENT COMPONENTS (hand-written HTML inside articles)
   ============================================================ */
.entry-content .custom-content-box { background: var(--paper); border: 1px solid var(--line); border-top: 4px solid var(--felt); border-radius: var(--r-lg); padding: 24px 26px; box-shadow: var(--shadow-sm); margin: 2rem 0; }
.entry-content .custom-content-box > h2:first-of-type, .entry-content .custom-content-box > .takeaway + h2 { margin-top: .4rem; font-size: 1.45rem; }
.entry-content .takeaway { display: inline-block; }
.entry-content .takeaway strong { display: inline-block; font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #fff; background: var(--felt); border-radius: 999px; padding: 4px 11px; font-weight: 700; }
.entry-content .custom-content-box ul { margin-top: .9rem; }

.entry-content .pros-n-cons { display: grid !important; grid-template-columns: 1fr 1fr; gap: 16px; margin: 1.6rem 0; }
.entry-content .pros-n-cons > .pros, .entry-content .pros-n-cons > .cons { border-radius: var(--r-lg); padding: 20px 22px; border: 1px solid var(--line); min-width: 0; }
.entry-content .pros-n-cons > .pros { background: var(--ok-tint); border-color: var(--ok-line); }
.entry-content .pros-n-cons > .cons { background: var(--bad-tint); border-color: var(--bad-line); }
.entry-content .pros-n-cons > div > p:first-child strong { font-family: var(--mono); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; }
.entry-content .pros-n-cons > .pros > p:first-child strong { color: var(--ok); }
.entry-content .pros-n-cons > .cons > p:first-child strong { color: var(--bad); }
.entry-content .pros-n-cons ul { display: flex !important; flex-direction: column; gap: 10px; margin: 12px 0 0 !important; padding: 0 !important; list-style: none !important; }
.entry-content .pros-n-cons li { margin: 0 !important; font-size: .98rem; line-height: 1.55; padding-left: 26px; position: relative; }
.entry-content .pros-n-cons .pros li::before { content: "✓"; position: absolute; left: 2px; top: 0; color: var(--ok); font-weight: 800; }
.entry-content .pros-n-cons .cons li::before { content: "✕"; position: absolute; left: 2px; top: 0; color: var(--bad); font-weight: 800; }
@media (max-width:640px) { .entry-content .pros-n-cons { grid-template-columns: 1fr; } }

.entry-content .editor-comment-box { position: relative; display: grid; grid-template-columns: 56px 1fr; gap: 6px 16px; align-items: start; background: var(--accent-tint); border: 1px solid var(--accent-line); border-radius: var(--r-lg); padding: 22px 24px; margin: 2rem 0; }
.entry-content .editor-comment-box .editor-profile { grid-row: 1 / span 3; width: 56px; height: 56px; border-radius: 50%; object-fit: cover; border: 2px solid var(--accent); }
.entry-content .editor-comment-title { font-family: var(--display); font-weight: 800; font-size: 1.15rem; line-height: 1.25; color: var(--ink); }
.entry-content .editor-comment-box p { grid-column: 2; margin: 0; font-size: 1rem; }
.entry-content .editor-comment-box p + p { margin-top: .6rem; }

.entry-content .notes, .entry-content .callout-box, .entry-content .warning-box, .entry-content .green-box { border-radius: var(--r-lg); padding: 20px 22px; margin: 1.8rem 0; border: 1px solid var(--line); background: var(--paper); line-height: 1.65; }
.entry-content .notes { background: var(--cream-deep); }
.entry-content .notes > strong:first-child, .entry-content .green-box > strong:first-child { display: block; font-family: var(--mono); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 6px; }
.entry-content .notes > strong:first-child { color: var(--accent-deep); }
.entry-content .callout-box { background: var(--accent-tint); border-color: var(--accent-line); }
.entry-content .warning-box { background: var(--bad-tint); border-color: var(--bad-line); border-left: 4px solid var(--felt); }
/* A help box that opens the article starts at the top of the column (first phone screen). */
.entry-content > :is(.warning-box, .callout-box, .notes, .green-box):first-child { margin-top: 0; }
.entry-content .green-box { background: var(--ok-tint); border-color: var(--ok-line); }
.entry-content .green-box > strong:first-child { color: var(--ok); }
.entry-content :is(.callout-box, .warning-box) h4 { margin: 0 0 .5rem; font-family: var(--display); font-size: 1.15rem; }
.entry-content .warning-box h4 { color: var(--felt-deep); }
.entry-content :is(.notes, .callout-box, .warning-box, .green-box) p { margin: 0; }
.entry-content :is(.notes, .callout-box, .warning-box, .green-box) p + p { margin-top: .6rem; }
.entry-content .source-ref { font-size: .82rem !important; color: var(--ink-faint) !important; line-height: 1.5; margin-top: .6rem !important; }

.entry-content .accordion { margin: 1.6rem 0; display: flex; flex-direction: column; gap: 10px; }
.entry-content .accordion-item { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-sm); overflow: hidden; }
.entry-content .accordion-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 20px; cursor: pointer; }
.entry-content .accordion-header h3 { margin: 0; font-family: var(--sans); font-size: 1.02rem; font-weight: 800; }
.entry-content .accordion-header .chevron { color: var(--felt); transition: transform .2s; }
.entry-content .accordion-item.active .chevron { transform: rotate(180deg); }
.entry-content .accordion-content { display: none; padding: 0 20px 18px; }
.entry-content .accordion-item.active .accordion-content { display: block; }

.entry-content .reddit-embed-bq { font-family: var(--sans); font-style: normal; font-size: 1rem; }

/* tables keep whole words; wide tables scroll sideways inside .table-scroll */
.entry-content table, .entry-content th, .entry-content td { overflow-wrap: normal; word-break: normal; }
@media (max-width:860px) { .entry-content th, .entry-content td { min-width: 120px; } .entry-content td:first-child, .entry-content th:first-child { min-width: 110px; } }

/* Interaction and small-screen safeguards, shared across all templates. */
[hidden] { display: none !important; }
.drawer__panel { height: 100dvh; max-height: 100dvh; overscroll-behavior: contain; padding-bottom: calc(22px + env(safe-area-inset-bottom, 0px)); }
.drawer__links, .drawer__head, .drawer__foot { flex-shrink: 0; }
.drawer__head { gap: 12px; }
.drawer__panel:focus { outline-offset: -4px; }
.drawer__links a, .dl-toggle, .nav__burger { min-height: 44px; }
.table-scroll { max-width: 100%; overscroll-behavior-x: contain; scrollbar-gutter: stable; }
.table-scroll:focus-visible { outline: 3px solid var(--felt); outline-offset: 4px; }
table caption { text-align: left; font-weight: 700; padding: 12px 0; color: var(--ink); }
@media (max-width:480px) {
  .nav__inner { padding: 0 12px; gap: 8px; }
  .nav .brand { min-width: 0; gap: 7px; }
  .nav .brand .ccc-emblem { width: 32px; height: 32px; }
  .nav .brand__name { font-size: clamp(.95rem, 4.25vw, 1.14rem); }
  .nav .brand__name span { font-size: 7px; letter-spacing: .12em; }
  .nav__right { gap: 0; flex: none; }
  .nav__burger { width: 44px; min-width: 44px; padding: 9px; }
  .drawer__panel { width: min(94vw, 380px); padding: 20px 16px calc(22px + env(safe-area-inset-bottom, 0px)); }
  .drawer__head .brand { gap: 7px; }
  .drawer__head .ccc-emblem { width: 32px; height: 32px; }
  .drawer__head .brand__name { font-size: 1rem; }
  .drawer__head .brand__name span { font-size: 7px; letter-spacing: .12em; }
  .drawer__close { width: 44px; height: 44px; }
  .drawer__links .dl-row a { font-size: 1.2rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* Brand navigation: reserve space and contain artwork without cropping it. */
.ccc-menu-logo {
  display: inline-flex; align-items: center; justify-content: center; align-self: center;
  flex: 0 0 40px; width: 40px; height: 26px; box-sizing: border-box;
  overflow: hidden; border: 1px solid var(--line, #d8d1c6); border-radius: 4px; background: #fff;
}
.ccc-menu-logo img { display: block; width: 100%; height: 100%; max-width: 100%; object-fit: contain; }
.ccc-menu-logo--casino { flex-basis: 64px; width: 64px; height: 32px; padding: 2px 4px; }
/* Betinia's artwork is a dark square: the whole tile takes its colour, like the other dark tiles. */
.ccc-menu-logo.logo-frame--trim { padding: 0; background: #0f1726; border-color: #0f1726; }
.ccc-menu-logo.logo-frame--trim img { width: 100%; height: 100%; }
.ccc-menu-logo--on-dark { background: #202a2d; border-color: #202a2d; }
.ccc-menu-logo--category { color: var(--felt); background: var(--felt-tint); }
.ccc-menu-logo--category svg { width: 18px; height: 18px; }
.sub-link > span:last-child, .dl-sub a > span:last-child { min-width: 0; }
.dl-sub a .sub-ic { display: inline-flex; flex: 0 0 18px; }

.nav__links .nav-sub a.sub-link:has(.ccc-menu-logo), .dl-sub a:has(.ccc-menu-logo) { gap: 9px; }

/* ---- disclosure widgets: one chevron per summary ---- */
.ccc summary { list-style: none; display: flex; align-items: center; gap: 10px; cursor: pointer; }
.ccc summary::-webkit-details-marker { display: none; }
.ccc summary::after { content: ""; width: 9px; height: 9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-3px) rotate(45deg); margin-left: auto; transition: transform .2s; flex: none; }
.ccc details[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
.ccc .faq summary::after { content: none; }
@media (min-width: 641px) { .foot .foot__col > summary { pointer-events: none; cursor: default; } .foot .foot__col > summary::after { content: none; } }
/* ccc.css */
/* ============================================================================
   Credit Card Casinos — site sections (homepage, review pages, review cards,
   payment comparison, bank cards, calculator). Built only from the design.css
   tokens and the shared component vocabulary.
   ============================================================================ */

/* ---------- shared bits ---------- */
.source-cite { font-size: .85rem; color: var(--ink-faint); margin: 12px 0 0; line-height: 1.5; }
.source-cite a, .muted a { color: var(--accent-deep); text-decoration: underline; text-decoration-color: var(--accent-line); text-underline-offset: .18em; font-weight: 600; }
.ccc-note { font-size: .96rem; line-height: 1.6; margin: 0 0 1rem; }

/* Editorial links outside article prose (template copy around tools and cards). */
:is(.ccc-home-answer, .ccc-home-cost, .ccc-home-networks, .ccc-home-method, .rv-grid__intro, .rv-grid__more,
  .ccc-review-row, .ccc-masthead, .ccc-updated, .ccc-404-home, .ccc-authorbox__links, .ccc-glance__how,
  .ccc-comparison, .ccc-policy-links) a:not(.btn) {
  color: var(--accent-deep); text-decoration: underline; text-decoration-color: var(--accent-line);
  text-underline-offset: .18em; text-decoration-thickness: 1px; font-weight: 600;
}
:is(.ccc-home-answer, .ccc-home-cost, .ccc-home-networks, .ccc-home-method, .rv-grid__intro, .rv-grid__more,
  .ccc-review-row, .ccc-masthead, .ccc-updated, .ccc-404-home, .ccc-authorbox__links, .ccc-glance__how,
  .ccc-comparison, .ccc-policy-links) a:not(.btn):hover { color: var(--ink); text-decoration-color: currentColor; }

/* ---------- page hero (interior) ---------- */
.ccc-pagehero { padding: 34px 0 40px; border-bottom: 1px solid var(--line); background: linear-gradient(180deg, var(--paper) 0%, var(--cream) 100%); }
.ccc-pagehero h1 { margin-top: 10px; max-width: 24ch; }
.ccc-pagehero .ccc-crumbs + h1 { margin-top: 20px; }
.ccc-pagehero__lede { margin: 16px 0 0; max-width: 62ch; }
.ccc-article { padding-top: 34px; padding-bottom: 8px; }
.learn-nav__card .side-title { font-family: var(--sans); font-weight: 700; }
/* Legal pages: "Last updated" from the post's modified date. */
.ccc-updated { margin: 12px 0 0; font-size: .875rem; line-height: 1.5; color: var(--ink-soft); }
/* Related navigation should read as a link, below the contents hierarchy. */
.ccc-toc-cta { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 44px; margin-top: 12px; padding: 14px 0 2px; border-top: 1px solid var(--line); color: var(--felt); font: 600 .9rem/1.45 var(--sans); text-align: left; }
.ccc-toc-cta > span:first-child { min-width: 0; white-space: normal; text-decoration: underline; text-underline-offset: 3px; }
.ccc-toc-cta > span[aria-hidden] { flex: none; }
.ccc-toc-cta + .ccc-toc-cta { margin-top: 2px; }
.ccc-toc-cta:hover { color: var(--felt-deep); }
.ccc-toc-cta:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; border-radius: 2px; }
.ccc-search { display: flex; gap: 10px; margin-top: 22px; max-width: 560px; }
.ccc-search input { flex: 1; min-width: 0; min-height: 44px; padding: 12px 16px; border-radius: 999px; border: 1px solid var(--line); background: #fff; font: inherit; }
.ccc-search input:focus { outline: 3px solid var(--accent); outline-offset: 1px; }
.ccc-search .btn { justify-content: center; }
.ccc-result-count { margin: 10px 0 0; font-size: .9rem; color: var(--ink-soft); }
.ccc-search-more { margin: 32px 0 0; font-size: 1rem; }
.ccc-search-more a, .ccc-search-empty a { color: var(--accent-deep); text-decoration: underline; text-decoration-color: var(--accent-line); text-underline-offset: .18em; font-weight: 600; }
.ccc-pagination .nav-links { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 28px; }
.ccc-pagination .page-numbers { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--paper); font-weight: 700; }
.ccc-pagination .current { background: var(--felt); color: #fff; border-color: var(--felt); }
.ccc-404 h1 { max-width: 16ch; }
.ccc-404-home { margin: 18px 0 0; font-size: .95rem; }
.ccc-404-home a { display: inline-flex; align-items: center; min-height: 44px; }
.error404 .ccc-related { margin-top: 0; padding-top: 0; border-top: 0; }
.error404 .site-main > .section--tight { padding-top: 32px; }

/* ---------- HOME (front-page.php, content-handoff H-14) ---------- */
.ccc-home-hero { padding: 44px 0 40px; border-bottom: 1px solid var(--line); background: linear-gradient(180deg, var(--paper) 0%, var(--cream) 100%); }
.ccc-home-hero > .wrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
.ccc .ccc-home-hero__text h1 { max-width: 18ch; margin: 0; font-size: clamp(2.1rem, 1.3rem + 2.6vw, 3.25rem); line-height: 1.1; letter-spacing: -.03em; }
.ccc-home-hero__text .lede { max-width: 60ch; margin: 18px 0 0; }
.ccc-home-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 26px 0 0; }
.ccc-home-stat { margin: 18px 0 0; font-size: .9rem; line-height: 1.5; color: var(--ink-soft); }
.ccc-home-cost { align-self: start; padding: 22px 24px; background: var(--felt-tint); border: 1px solid var(--felt-line); border-radius: var(--r-lg); }
.ccc-home-cost__fig { margin: 0; font-size: 1.1rem; line-height: 1.55; color: var(--ink); }
.ccc-home-cost__fig strong { color: var(--felt-deep); font-weight: 800; }
.ccc-home-cost__fig a { display: inline-block; margin-top: 4px; }
.ccc-home-cost__rg { margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--felt-line); font-size: .95rem; line-height: 1.6; color: var(--ink-soft); }
.ccc-home-casinos { padding: 56px 0 64px; background: var(--paper); border-bottom: 1px solid var(--line); }
.ccc-home-casinos h2 { margin: 0; }
.ccc-home-answer { max-width: 70ch; margin: 14px 0 0; color: var(--ink-soft); line-height: 1.65; }
.ccc-home-casinos .ccc-reviewgrid { margin-top: 28px; }
.ccc-home-casinos #your-bank { margin: 64px 0 0; }
.ccc-home-bank { margin-top: 18px; }
.ccc-home-bank .table-scroll { margin: 0; }
.ccc-home-next { padding: 48px 0 56px; }
.ccc-home-next .ccc-related { margin-top: 0; padding-top: 0; border-top: 0; }
.ccc-home-networks { margin: 28px 0 0; font-size: .95rem; color: var(--ink-soft); }
.ccc-home-networks a { display: inline-block; padding: 10px 2px; margin: -10px 0; }
.ccc-home-method { max-width: 70ch; margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line); }
.ccc-home-method p { margin: 0 0 10px; font-size: .95rem; line-height: 1.6; color: var(--ink-soft); }
.ccc-home-method p:last-child { margin: 0; }
.ccc-home-method a { display: inline-block; padding: 10px 2px; margin: -10px 0; }
@media (min-width: 1024px) {
  .ccc-home-hero { padding: 64px 0 56px; }
  .ccc-home-hero > .wrap { grid-template-columns: minmax(0, 1.4fr) minmax(300px, .8fr); gap: 56px; align-items: center; }
}
@media (max-width: 640px) {
  .ccc-home-hero { padding: 26px 0 30px; }
  .ccc .ccc-home-hero__text h1 { font-size: clamp(1.875rem, 1.2rem + 3vw, 2.25rem); line-height: 1.18; }
  .ccc-home-hero__text .lede { margin-top: 14px; }
  .ccc-home-actions { flex-direction: column; gap: 10px; margin-top: 20px; }
  .ccc-home-actions .btn { justify-content: center; min-height: 48px; white-space: normal; text-align: center; }
  .ccc-home-cost { padding: 18px 16px; border-radius: var(--r); }
  .ccc-home-cost__fig { font-size: 1.05rem; }
  .ccc-home-casinos { padding: 40px 0 44px; }
  .ccc-home-casinos #your-bank { margin-top: 44px; }
  .ccc-home-next { padding: 36px 0 40px; }
}

/* ---------- calculator (shortcode pages) ---------- */
.calc__intro h2 { font-size: clamp(1.7rem, 2.8vw, 2.2rem); line-height: 1.1; }
.calc__intro .muted { line-height: 1.6; margin: 0 0 12px; }
.calc__intro strong { color: #fff; }
.calc__title { font-family: var(--display); font-size: 1.45rem; margin-bottom: 22px; }
.calc__fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 16px; }
.calc__field { margin-bottom: 14px; min-width: 0; }
.calc__field .stake-input { margin-bottom: 6px; min-width: 0; }
.calc__field .stake-input input { width: 100%; font-size: 1.45rem; padding: 11px 6px; min-width: 0; }
.calc__field .stake-cur { font-size: 1.05rem; }
.calc__field .hint { display: block; font-size: .78rem; color: var(--ink-faint); line-height: 1.4; }
.ledger { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--paper); }
.ledger__row { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 12px 16px; border-bottom: 1px solid var(--line-soft); font-size: .95rem; }
.ledger__row:last-child { border-bottom: 0; }
.ledger__row b { font-family: var(--mono); font-size: 1rem; white-space: nowrap; }
.ledger__row--total { background: var(--cream); }
.ledger__row--total span { font-weight: 700; }
.ledger__row--total b { font-family: var(--display); font-size: 1.35rem; font-weight: 800; }
.calc__results.is-empty .ledger b { color: var(--ink-faint); }
.calc__msg { margin: 12px 0 0; padding: 12px 14px; border-radius: var(--r); font-size: .9rem; line-height: 1.5; }
.calc__msg:empty { display: none; }
.calc__msg.is-low { background: var(--ok-tint); color: var(--ok); }
.calc__msg.is-mid { background: var(--warn-tint); color: var(--warn); }
.calc__msg.is-high { background: var(--bad-tint); color: var(--bad); }
.ccc .calc__legend { margin: 8px 0 0; font-size: .8rem; line-height: 1.5; color: var(--ink-soft); }
.calc__field select { width: 100%; min-height: 48px; padding: 10px 12px; border: 1.5px solid var(--line); border-radius: var(--r); background: var(--cream); color: var(--ink); font: inherit; }
.calc__field select:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.calc__field.is-inactive { opacity: .65; }
.calc__field input:disabled { color: var(--ink-soft); cursor: not-allowed; }
.calc__field input[aria-invalid="true"] { outline: 2px solid var(--bad); outline-offset: -2px; border-radius: 4px; }
.calc__error, #ca-error { color: var(--bad); font-size: .9rem; font-weight: 600; line-height: 1.5; margin: 12px 0; }
#ca-error:empty { display: none; }
.calc__check { display: flex; align-items: flex-start; gap: 10px; font-size: .9rem; line-height: 1.5; margin: 16px 0; cursor: pointer; }
.calc__check input { width: 20px; height: 20px; flex: none; margin-top: 2px; accent-color: var(--felt); }
.calc__check span { min-width: 0; }
/* Running total under the deposit field, at every width (the full breakdown sits further down). */
.ccc .calc__live { display: block; margin: 8px 0 0; font-size: .9rem; line-height: 1.5; color: var(--ink-soft); }
.calc__live strong { color: var(--ink); font-weight: 800; }
.calc__live a { color: var(--accent-deep); text-decoration: underline; text-underline-offset: .18em; font-weight: 600; }
@media (max-width: 920px) { .calc__fields { grid-template-columns: minmax(0, 1fr); } }

.rg-strip__inner a { color: var(--accent-deep); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- casino review ---------- */
.rev-hero { position: relative; overflow: hidden; background: linear-gradient(180deg, var(--paper) 0%, var(--cream-deep) 100%); }
.rev-hero .wrap { position: relative; z-index: 1; }
.rev-logo { width: 150px; height: 84px; border-radius: 20px; background: #fff; border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; }
.rev-logo img { display: block; box-sizing: border-box; width: 100%; height: 100%; min-width: 0; min-height: 0; max-width: 100%; max-height: 100%; object-fit: contain !important; margin: 0; padding: 12px 14px; border-radius: 0; }
.rev-hero h1 { font-size: clamp(1.9rem, 3.3vw, 2.7rem); line-height: 1.08; }
.rev-hero__id { align-items: center; }
.side-card .side-title { margin-bottom: 8px; }
.side-links span { color: var(--accent-deep); }
.rev-side .learn-toc a { font-size: .88rem; }

/* Visit button + its affiliate caption (ccc_visit_button / [ccc_visit]). */
.ccc-visit { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 6px; max-width: 100%; vertical-align: top; }
.ccc-visit .btn { max-width: 100%; }
.ccc-visit__caption { display: block; max-width: 34ch; font-size: .78rem; line-height: 1.45; color: var(--ink-faint); }
.ccc-visit a.btn { text-decoration: none; }
.ccc-visit a.btn--primary, .ccc-visit a.btn--primary:hover, .ccc-visit a.btn--primary:focus { color: #fff; }
.ccc-visit a.btn--ghost { color: var(--ink); }
.ccc-visit a.btn--ghost:hover, .ccc-visit a.btn--ghost:focus { color: var(--felt); }
.ccc-visit .btn .arr { color: inherit; font-size: inherit; }
.rev-hero__cta { margin: 24px 0 0; }
/* The hero fades to --cream-deep, where --ink-faint drops below 4.5:1. */
.rev-hero .ccc-visit__caption { color: var(--ink-soft); }
/* [ccc_visit] inside article text: its own line under the sentence, never mid-line. */
:is(.entry-content, .prose) :is(p, li) > .ccc-visit { display: flex; margin: 10px 0 4px; }

/* Review end band: "Decided on {Casino}?" */
.rev-end-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; margin: 40px 0 0; padding: 22px 24px; background: var(--cream-deep); border: 1px solid var(--line); border-radius: var(--r-lg); }
.rev-end-cta p { display: flex; flex-direction: column; gap: 4px; flex: 1 1 260px; min-width: 0; margin: 0; }
.rev-end-cta b { font-family: var(--display); font-size: 1.15rem; }
.rev-end-cta p span { font-size: .85rem; line-height: 1.5; color: var(--ink-soft); }
@media (max-width: 640px) {
  .rev-hero__cta .ccc-visit, .rev-end-cta .ccc-visit { width: 100%; }
  .rev-hero__cta .btn, .rev-end-cta .btn { width: 100%; justify-content: center; white-space: normal; text-align: center; }
  .rev-end-cta { padding: 18px 16px; }
}

/* Mobile Visit bar (ccc.js toggles .is-visible, inert and body.ccc-sticky-on). */
.sticky-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 72; display: flex; align-items: center; gap: 14px; justify-content: space-between; padding: 10px 18px calc(10px + env(safe-area-inset-bottom, 0px)); background: rgba(255,253,250,.96); backdrop-filter: blur(10px); border-top: 1px solid var(--line); box-shadow: 0 -8px 24px rgba(60,20,16,.08); transform: translateY(100%); visibility: hidden; transition: transform .25s ease, visibility 0s .25s; }
.sticky-cta.is-visible { transform: none; visibility: visible; transition: transform .25s ease; }
.sticky-cta__txt { min-width: 0; display: flex; flex-direction: column; }
.sticky-cta__txt b { font-family: var(--display); font-size: 1.05rem; line-height: 1.3; }
.sticky-cta__txt span { font-size: .8rem; line-height: 1.4; color: var(--ink-soft); white-space: nowrap; }
.sticky-cta .ccc-visit { flex: none; }
@media (min-width: 1021px) { .sticky-cta { display: none; } }
@media (max-width: 640px) {
  .sticky-cta { bottom: 0; background: var(--paper); transform: translateY(100%); visibility: hidden; transition: transform .25s ease, visibility 0s .25s; }
  .sticky-cta.is-visible { transform: none; visibility: visible; transition: transform .25s ease; }
  .tabbar { transition: transform .25s ease; }
  body.ccc-sticky-on .tabbar { transform: translateY(100%); }
}

/* Review sidebar (desktop): Visit card + contents stick together; the rest scrolls with the page. */
.side-cta-card { text-align: center; }
.side-cta-card .rv-card__logo { margin: 0 auto 12px; }
.side-cta-card .ccc-visit { align-items: center; width: 100%; }
.side-cta-card .ccc-visit .btn { width: 100%; justify-content: center; }
.side-cta-card .ccc-visit__caption { margin: 0 auto; text-align: center; }
.rev-toc a[aria-current="location"] { font-weight: 800; color: var(--ink); box-shadow: inset 3px 0 0 var(--felt); padding-left: 10px; }
.ccc-glance .side-dl dd { font-weight: 600; }
.ccc-glance .side-dl small { display: block; margin-top: 4px; font-size: .8rem; font-weight: 400; line-height: 1.45; color: var(--ink-soft); }
.ccc-glance__how { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--line-soft); font-size: .82rem; line-height: 1.55; color: var(--ink-soft); }
.ccc-glance__how a { display: inline-block; padding: 6px 0; }
@media (min-width: 1021px) {
  .rev-layout { align-items: stretch; }
  .rev-side { position: static; max-height: none; overflow: visible; scrollbar-gutter: auto; padding: 0; margin: 0; }
  .rev-side__sticky { position: sticky; top: 96px; z-index: 1; display: flex; flex-direction: column; gap: 14px; }
  /* Glance + "Before you deposit" sit above the pinned group; the group pins once they scroll away. */
  .rev-side { display: flex; flex-direction: column; gap: 14px; }
  .rev-side > * { margin: 0; }
  .rev-side__sticky { order: 2; }
  .side-cta-card { padding: 16px 18px; }
  .side-cta-card .rv-card__logo { width: 96px; height: 52px; margin-bottom: 10px; border-radius: 10px; }
  .side-cta-card .rv-card__logo img { padding: 6px 8px; }
  .side-cta-card .btn { padding: 11px 18px; }
  .rev-toc { padding: 16px 18px; }
  .rev-toc .side-title { margin-bottom: 4px; }
  .rev-toc .learn-toc a { padding-block: 5px; line-height: 1.35; }
  .ccc-review-toc { display: none; }
}
@media (max-width: 1020px) {
  /* Phones and tablets use the in-content TOC and the Visit bar instead. */
  .rev-side__sticky, .rev-toc, .side-cta-card { display: none; }
}

/* ---------- footer additions ---------- */
.foot__contact { font-size: .86rem !important; line-height: 1.75 !important; color: rgba(255,255,255,.62) !important; }
.foot__contact b { display: block; margin-bottom: 2px; color: #fff; font-weight: 700; }
.foot__legal { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding: 22px 0; border-top: 1px solid rgba(255,255,255,.12); font-size: .8rem; line-height: 1.6; color: rgba(255,255,255,.5); }
.foot__legal p { margin: 0; }
.foot__legal b { color: rgba(255,255,255,.78); }
.foot__legal a { text-decoration: underline; }
.foot .brand__name { color: #fff; }
.foot .brand__name b { color: var(--accent); }
@media (max-width: 760px) { .foot__legal { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .ccc-search { flex-direction: column; } }

/* Logo tiles: tone classes follow the measured artwork tone. */
.logo-tile--light { background: #202a2d !important; border-color: #202a2d !important; }
.logo-tile--opaque img { object-fit: contain !important; padding: 4px !important; }
/* the review hero column sets overflow-wrap:anywhere — never let it squeeze the byline */
.byline, .byline * { overflow-wrap: normal; }
.site-footer { margin: 0 !important; padding: 0 !important; background: transparent; }
.foot { margin-top: 0 !important; }
.rg-strip--prefoot { margin-top: 48px; }
.home .rg-strip--prefoot { margin-top: 0; }
/* Reviews: no dead band between the closing block and "Other Ontario casinos". */
.ccc-review .rev-layout { padding-top: 0; }
/* GeneratePress gives a non-first .entry-content a 2em top margin; the TOC before it is hidden on desktop. */
.ccc .rev-main > .entry-content { margin-top: 0; }
.ccc-review > .section--tight:has(.ccc-reviewgrid--logos) { padding-top: 8px; }

/* GeneratePress styles `.single .byline` as inline post meta — our byline wins */
.byline-wrap .byline { display: flex; }
.byline-wrap .byline--compact { display: inline-flex; }
@container (max-width: 560px) { .byline-wrap .byline--compact { display: flex; } }

/* ---------- review cards (ccc_review_grid / [ccc_reviews]) ---------- */
.ccc-reviewgrid { min-width: 0; }
.ccc .ccc-reviewgrid > h2:first-child { margin-top: 0; }
.rv-grid__intro { max-width: 70ch; margin: 0 0 12px; font-size: .95rem; line-height: 1.6; color: var(--ink-soft); }
.rv-grid__more { margin: 0 0 18px; font-size: .95rem; }
.rv-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
@media (min-width: 700px) { .rv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .rv-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.rv-card { display: flex; flex-direction: column; gap: 14px; min-width: 0; margin: 0; padding: 22px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); transition: border-color .2s, box-shadow .2s; }
.rv-card:hover { border-color: var(--felt-line); box-shadow: var(--shadow); }
.rv-card__head { display: flex; align-items: center; gap: 16px; }
.rv-card__head > div { min-width: 0; }
.rv-card__logo { flex: none; width: 120px; height: 66px; border-radius: 14px; background: #fff; border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.rv-card__logo img { display: block; width: 100%; height: 100%; max-width: none; margin: 0; object-fit: contain; padding: 10px 12px; }
.rv-card__name { margin: 0; font-family: var(--display); font-weight: 800; font-size: 1.3rem; line-height: 1.15; }
.rv-card__name a { color: var(--ink); text-decoration: none; }
.rv-card__name a:hover { color: var(--felt); text-decoration: underline; text-underline-offset: .18em; }
.rv-card__pill { display: inline-block; margin-top: 6px; padding: 2px 9px; font-size: .75rem; font-weight: 700; line-height: 1.5; color: var(--accent-deep); background: var(--accent-tint); border: 1px solid var(--accent-line); border-radius: 999px; }
.rv-card__summary { margin: 0; font-size: .95rem; color: var(--ink-soft); line-height: 1.55; }
/* Fact strip: label on its own line, value under it. */
.ccc ul.ccc-facts { list-style: none; margin: 0; padding: 12px 0 0; display: grid; gap: 10px; border-top: 1px solid var(--line-soft); }
.ccc ul.ccc-facts > li { margin: 0; padding: 0; font-size: .92rem; line-height: 1.45; color: var(--ink); }
.ccc ul.ccc-facts > li::before { content: none; }
.ccc-facts li > span { display: block; margin-bottom: 1px; font-size: .78rem; font-weight: 700; line-height: 1.4; color: var(--ink-faint); }
.rv-card__actions { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px; margin-top: auto; padding-top: 4px; }
.rv-card__actions > .btn, .rv-card__actions > .ccc-visit { flex: 1 1 0; min-width: 0; }
.rv-card__actions .btn { justify-content: center; min-height: 44px; }
.rv-card__actions .ccc-visit { align-items: stretch; text-align: center; }
.rv-card__actions .ccc-visit__caption { max-width: none; }
@media (max-width: 760px) { .rv-card { padding: 18px; } .rv-card__logo { width: 120px; height: 66px; } }
@media (max-width: 479px) { .rv-card__actions > .btn, .rv-card__actions > .ccc-visit { flex: 1 1 100%; } }
/* Action rows line up across a grid row; a lone "Read review" keeps the paired buttons' width.
   Fallback: the row sits on the card's bottom edge. With subgrid, the four parts (head, summary,
   facts, actions) share the grid row's tracks, so every card's buttons start at the same height. */
.rv-card__actions { margin-top: auto !important; padding-top: 16px; }
@media (min-width: 480px) { .rv-card__actions > .btn:only-child { flex: 0 0 calc(50% - 5px); } }
@supports (grid-template-rows: subgrid) {
  .rv-grid > .rv-card:has(> .rv-card__actions:nth-child(4):last-child) { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 14px; align-content: start; }
  .rv-grid > .rv-card:has(> .rv-card__actions:nth-child(4):last-child) > .rv-card__actions { margin-top: 0 !important; align-self: start; }
}
/* The cards sit inside .prose on /reviews/: undo its list and link styling, and let the grid use the page width. */
.ccc .entry-content.ccc-readcol:has(.ccc-reviewgrid) { max-width: none; }
.prose ul.rv-grid, .entry-content ul.rv-grid { padding: 0; list-style: none; }
.prose ul.rv-grid > li, .entry-content ul.rv-grid > li { margin: 0; }
.prose ul.rv-grid > li::before { content: none; display: none; }
.prose .rv-card a.btn, .entry-content .rv-card a.btn { text-decoration: none; }
.prose .rv-card a.btn--primary, .prose .rv-card a.btn--primary:hover { color: #fff; }
.prose .rv-card a.btn--ghost { color: var(--ink); }
.prose .rv-card a.btn--ghost:hover { color: var(--felt); }
.ccc .rv-card .rv-card__name a { text-decoration: none; color: var(--ink); }
.ccc .rv-card .rv-card__name a:hover { color: var(--felt); text-decoration: underline; }
.prose h3.rv-card__name { margin: 0; font-family: var(--display); font-weight: 800; font-size: 1.3rem; line-height: 1.15; }
/* .prose img sets height:auto, which made logos overflow their tiles; pin them to the tile */
.prose .rv-card__logo img, .rev-side .rv-card__logo img { display: block; width: 100%; height: 100%; max-width: none; margin: 0; }
/* Logo row ("Other Ontario casinos we review"). */
.ccc-reviewgrid--logos h2 { margin: 0 0 18px; font-size: 1.375rem; }
.rv-grid--logos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 700px) { .rv-grid--logos { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.rv-grid--logos > li { margin: 0; min-width: 0; }
.rv-logo-link { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 10px 12px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); color: var(--ink); font-weight: 700; font-size: .95rem; line-height: 1.3; text-decoration: none; transition: border-color .2s, box-shadow .2s; }
.rv-logo-link:hover { border-color: var(--felt-line); box-shadow: var(--shadow-sm); color: var(--felt); }
.rv-logo-link .rv-card__logo { width: 96px; height: 44px; border-radius: 8px; }
.rv-logo-link .rv-card__logo img { padding: 4px 6px; }
.rv-logo-link > span:last-child { overflow-wrap: normal; word-break: normal; }
@media (max-width: 479px) {
  .rv-logo-link { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* ---------- payment comparison ([ccc_casino_comparison], review row) ---------- */
.ccc-comparison { min-width: 0; margin: 28px 0; }
.ccc-comparison [hidden] { display: none !important; }
.ccc .ccc-comparison .ccc-results-heading { margin: 0 0 6px; padding: 4px 0; scroll-margin-top: 8px; font-size: 1.375rem; line-height: 1.3; }
.ccc-results-heading:focus { outline: 3px solid var(--accent); outline-offset: 5px; border-radius: 2px; }
.ccc .ccc-comparison p.ccc-table-caption { margin: 0 0 14px; font-size: .92rem; line-height: 1.55; color: var(--ink-soft); }
.ccc .ccc-comparison :is(p.ccc-table-foot, p.ccc-table-links, p.ccc-empty) { margin: 12px 0 0; font-size: .85rem; line-height: 1.6; color: var(--ink-soft); }
.ccc .ccc-comparison p.ccc-empty { font-size: .95rem; color: var(--ink); }
.ccc-unpublished { margin: 12px 0 0; padding: 12px 14px; background: var(--accent-tint); border: 1px solid var(--accent-line); border-radius: var(--r-sm); font-size: .9rem; line-height: 1.55; }
.ccc-unpublished p { margin: 0; }
.ccc-region-note { margin: 18px 0 0; padding: 14px 16px; border-left: 3px solid var(--accent); background: var(--accent-tint); border-radius: 0 var(--r-sm) var(--r-sm) 0; font-size: .95rem; line-height: 1.6; }
.ccc-region-note p { margin: 6px 0 0; }
.ccc-region-note p:first-child { margin-top: 0; }
.ccc-matrix-scroll { position: relative; max-width: 100%; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); background: var(--paper); }
.ccc-matrix-scroll:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.ccc .ccc-payment-matrix { width: 100%; min-width: 760px; margin: 0; border: 0; border-radius: 0; border-collapse: collapse; background: var(--paper); font-size: .9rem; line-height: 1.5; overflow: visible; }
.ccc .ccc-payment-matrix :is(th, td) { min-width: 0; padding: 14px 16px; vertical-align: top; text-align: left; border-bottom: 1px solid var(--line-soft); overflow-wrap: normal; }
.ccc .ccc-payment-matrix thead th { background: var(--felt-tint); color: var(--felt-deep); font-family: var(--sans); font-size: .82rem; font-weight: 700; line-height: 1.4; letter-spacing: 0; text-transform: none; padding-block: 11px; }
.ccc .ccc-payment-matrix thead th:first-child { width: 28%; }
.ccc .ccc-payment-matrix thead th:last-child { width: 34%; }
.ccc .ccc-payment-matrix tbody tr > :is(th, td) { background: var(--paper); }
.ccc .ccc-payment-matrix tbody th { font-weight: 400; text-transform: none; letter-spacing: normal; }
.ccc .ccc-payment-matrix tbody tr:last-child > * { border-bottom: 0; }
.ccc .ccc-payment-matrix tbody tr[data-ccc-casino]:has(+ tr.ccc-row-detail:not([hidden])) > * { border-bottom-color: transparent; }
.ccc-row-casino { display: flex; align-items: center; gap: 10px; font-size: 1rem; font-weight: 700; line-height: 1.3; color: var(--ink); }
.ccc-row-casino > a, .ccc-row-casino > .ccc-row-name { min-width: 0; }
.ccc .ccc-comparison .ccc-row-casino > a { color: var(--ink); text-decoration: none; font-weight: 700; }
.ccc .ccc-comparison .ccc-row-casino > a:hover { color: var(--felt); text-decoration: underline; }
.ccc-row-logo { flex: none; display: flex; align-items: center; justify-content: center; width: 96px; height: 44px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; background: #fff; overflow: hidden; }
.ccc-row-logo img { display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; margin: 0; border-radius: 0; object-fit: contain; }
.ccc-row-logo.logo-frame--trim { padding: 0; }
.ccc-row-logo.logo-frame--trim img { width: 100%; height: 100%; }
.ccc-row-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 10px; font-size: .85rem; line-height: 1.4; }
.ccc .ccc-row-actions .btn--sm { padding: 7px 13px; font-size: .82rem; }
.ccc .ccc-row-actions .ccc-visit a.btn--ghost { color: var(--ink); background: var(--paper); }
.ccc .ccc-row-toggle, .ccc .ccc-row-toggle:hover, .ccc .ccc-row-toggle:focus, .ccc .ccc-row-toggle:active { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin: 2px 0 -10px; padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; color: var(--accent-deep); font: 600 .85rem/1.4 var(--sans); text-align: left; text-decoration: underline; text-decoration-color: var(--accent-line); text-underline-offset: .18em; cursor: pointer; }
.ccc .ccc-row-toggle:hover { color: var(--ink); }
.ccc .ccc-row-toggle:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.ccc-row-toggle::after { content: ""; flex: none; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .2s; }
.ccc-row-toggle[aria-expanded="true"]::after { transform: translateY(1px) rotate(-135deg); }
@media (min-width: 1100px) {
  /* Wide tables: keep the casino cell compact (name, then one actions line, then the toggle). */
  .ccc .ccc-payment-matrix .ccc-row-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-top: 6px; }
  .ccc .ccc-payment-matrix .ccc-row-toggle { min-height: 32px; margin-top: 2px; margin-bottom: -6px; }
}
/* Card networks as small badges; plain text when no network is named. */
.ccc ul.ccc-nets { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.ccc ul.ccc-nets > li { margin: 0; padding: 2px 10px; font-size: .8rem; font-weight: 700; line-height: 1.5; color: var(--accent-deep); background: var(--accent-tint); border: 1px solid var(--accent-line); border-radius: 999px; }
.ccc ul.ccc-nets > li::before { content: none; }
.ccc-net-text { font-size: .9rem; color: var(--ink); }
.ccc .ccc-payment-matrix small, .ccc-glance .ccc-nets + small { display: block; margin-top: 8px; font-size: .8rem; font-weight: 400; line-height: 1.5; color: var(--ink-soft); }
/* Limits: compact definition list. */
.ccc-limits { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.ccc-limits > div { min-width: 0; }
.ccc-limits dt { margin: 0; font-size: .78rem; font-weight: 600; line-height: 1.4; color: var(--ink-soft); }
.ccc-limits dd { margin: 0; font-size: .9rem; line-height: 1.5; color: var(--ink); }
@media (min-width: 1100px) {
  .ccc .ccc-payment-matrix { min-width: 0; }
  .ccc-limits { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 14px; }
  .ccc-limits > div:nth-child(n+3) { grid-column: 1 / -1; }
}
/* Sources & notes row. */
.ccc .ccc-payment-matrix tbody tr.ccc-row-detail > td { padding: 4px 16px 16px; background: var(--cream); font-size: .88rem; line-height: 1.6; color: var(--ink-soft); }
.ccc-row-detail p { margin: 10px 0 0; }
.ccc-row-meta span, .ccc-row-sources { display: block; font-size: .85rem; }
.ccc-row-meta span + span { margin-top: 4px; }
.ccc-row-sources a { display: inline-block; padding: 4px 0; }
/* Province picker: below the results, a smaller muted card. */
.ccc-province-form { margin: 20px 0 0; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--r); background: var(--cream-deep); }
.ccc-filter-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; align-items: end; }
.ccc-filter-grid > div { min-width: 0; }
.ccc-filter-grid label { display: block; font-size: .92rem; line-height: 1.4; color: var(--ink); }
.ccc .ccc-comparison p.ccc-hint { margin: 2px 0 6px; font-size: .82rem; line-height: 1.45; color: var(--ink-soft); }
.ccc-filter-grid select { display: block; width: 100%; min-width: 0; min-height: 44px; margin: 6px 0 0; padding: 8px 12px; border: 1px solid #8f979c; border-radius: var(--r-sm); background-color: var(--paper); color: var(--ink); font: inherit; font-size: 1rem; }
.ccc-filter-grid label + .ccc-hint + select { margin-top: 0; }
.ccc-filter-grid select:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.ccc-province-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 14px; }
.ccc .ccc-province-actions .btn { min-height: 44px; padding: 11px 20px; font-weight: 700; }
.ccc .ccc-comparison p.ccc-row-more, .ccc .ccc-review-row p.ccc-row-more { margin: 14px 0 0; font-size: .92rem; }
@media (max-width: 600px) { .ccc-filter-grid { grid-template-columns: minmax(0, 1fr); } }
/* Review page: "Payment details from {Casino}'s Ontario pages". */
section.ccc-review-row { margin-top: 48px; }
.ccc section.ccc-review-row > h2 { margin: 0 0 14px; }
div.ccc-review-row { margin: 0; }
.ccc .ccc-review-row p.ccc-row-more { margin: 12px 0 0; font-size: .95rem; line-height: 1.6; color: var(--ink-soft); }
.ccc .ccc-review-row p.ccc-row-more--lead { margin: 0 0 12px; }
/* Issuer table (homepage and [ccc_issuer_table]): bank names never break mid-word. */
.ccc .ccc-issuer-table tbody th { min-width: 10ch; }
.ccc .ccc-issuer-table tbody th, .ccc .ccc-issuer-table tbody th a:not(.btn) { overflow-wrap: normal; word-break: normal; }
/* Card-network findings ([ccc_evidence_findings]) read as a normal table. */
.ccc-evidence-findings > p { margin-top: 1rem; }

/* ---------- bank cards ([ccc_bank_checker]) ---------- */
.bank-checker { margin: 1.8rem 0; color: var(--ink); }
.ccc ul.bank-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
@media (min-width: 700px) { .ccc ul.bank-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ccc ul.bank-cards > li { margin: 0; }
.ccc ul.bank-cards > li::before { content: none; }
.bank-card { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 18px 20px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); scroll-margin-top: 104px; }
.ccc .bank-card .bank-card__t { margin: 0; font-family: var(--sans); font-size: 1.05rem; font-weight: 700; line-height: 1.35; letter-spacing: -.01em; }
.ccc .bank-card p { margin: 0; font-size: .95rem; line-height: 1.6; }
.ccc .bank-card .bank-card__jump { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin: auto 0 -10px; font-size: .9rem; }
.bank-card__jump::after { content: "→"; text-decoration: none; display: inline-block; }

/* ---------- cost tool ([ccc_cash_advance_calculator]) ---------- */
.ccc-cost-tool > * { min-width: 0; }
.ccc-cost-tool { grid-template-columns: minmax(240px, .85fr) minmax(0, 1.15fr); align-items: stretch; margin: 28px 0; }
.ccc-cost-tool .calc__intro { align-self: start; padding: 36px 30px; border-radius: 0 0 var(--r-lg) 0; }
.ccc-cost-tool .calc__intro h2 { margin: 12px 0 18px; line-height: 1.15; }
.ccc-cost-tool .calc__intro > p { font-size: .96rem; line-height: 1.75; margin: 0 0 18px; color: rgba(255,255,255,.9); }
.ccc-cost-tool .calc__intro > :last-child { margin-bottom: 0; }
.ccc .ccc-cost-tool .calc__intro a { color: #fff; text-decoration: underline; text-decoration-color: var(--accent-light); text-underline-offset: 3px; font-weight: 600; }
.ccc .ccc-cost-tool .calc__intro a:hover { color: var(--accent-light); text-decoration-color: currentColor; }
.ccc-cost-tool .calc__body { padding: 36px 30px; min-width: 0; }
/* The cost ladder (4 short numeric columns) stays a real table on phones; .table-scroll is the fallback. */
@media (max-width: 860px) { .ccc .entry-content .table-scroll table.ccc-cost-ladder { min-width: 0; } .ccc .entry-content .ccc-cost-ladder :is(th, td) { min-width: 0; padding: 11px 10px; } }
/* Desktop: the intro panel follows the long form; clip (not hidden) keeps the corners without breaking sticky. */
@media (min-width: 921px) { .ccc-cost-tool.calc { overflow: clip; } .ccc-cost-tool .calc__intro { position: sticky; top: 96px; } }
.ccc-cost-tool .calc__title { font-size: 1.35rem; line-height: 1.3; margin: 0 0 24px; }
.ccc-cost-tool .calc__fields { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
.ccc-cost-tool .calc__field { margin: 0; }
.ccc-cost-tool .calc__field > label { min-height: 2.7em; margin-bottom: 7px; color: var(--ink-soft); line-height: 1.35; }
.ccc-cost-tool .calc__field .stake-input { min-height: 52px; margin: 0; padding: 0 12px; }
.ccc-cost-tool .calc__field .stake-input input { width: 100%; min-width: 0; padding: 12px 5px; font-size: 1.3rem; }
.ccc-cost-tool .calc__field select { min-height: 52px; padding: 10px 8px; font-size: .86rem; line-height: 1.4; }
.ccc-cost-tool .stake-cur { font-size: .9rem; }
.ccc-cost-tool .calc__check { align-items: flex-start; margin: 22px 0 6px; font-size: .88rem; color: var(--ink-soft); }
.ccc-cost-tool .calc__check input { margin: 2px 0 0; }
.ccc .ccc-cost-tool .calc__body > p.hint { margin: 0 0 12px 30px; font-size: .82rem; line-height: 1.55; color: var(--ink-soft); }
.ccc-cost-tool .calc__results { margin-top: 20px; }
.ccc-cost-tool .ledger__row { gap: 16px; align-items: baseline; }
.ccc-cost-tool .ledger__row > span { min-width: 0; }
.ccc-cost-tool .ledger__row > b { flex: none; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ccc-cost-tool #ca-assumptions { display: block; margin: 20px 0 0; font-size: .8rem; line-height: 1.65; color: var(--ink-soft); }
.ccc-cost-tool .calc__intro h2, .ccc-cost-tool .calc__intro h3 { color: #fff; }
.ccc-cost-tool noscript p { padding: 14px 16px; margin-top: 18px; border: 1px solid var(--line); border-radius: var(--r); background: var(--cream); font-size: .9rem; line-height: 1.6; }
@media (max-width: 1080px) {
  .ccc-cost-tool { grid-template-columns: minmax(0, 1fr); }
  .ccc-cost-tool .calc__intro { border-radius: 0; }
  .ccc-cost-tool .calc__intro, .ccc-cost-tool .calc__body { padding: 30px; }
  .ccc-cost-tool .calc__intro h2 { max-width: 680px; }
}
@media (max-width: 480px) {
  .ccc-cost-tool .calc__intro, .ccc-cost-tool .calc__body { padding: 26px 20px; }
  .ccc-cost-tool .calc__fields { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .ccc-cost-tool .calc__field > label { min-height: 0; }
  .ccc-cost-tool .calc__field select { font-size: .96rem; padding: 12px; }
  .ccc-cost-tool .ledger__row { padding: 13px 12px; gap: 10px; font-size: .86rem; }
  .ccc-cost-tool .ledger__row > b { font-size: .98rem; }
  .ccc-cost-tool .ledger__row--total > b { font-size: 1.25rem; }
  .ccc .ccc-cost-tool .calc__body > p.hint { margin-left: 0; }
}

/* ---------- maple red, slate blue and ivory on dark surfaces ---------- */
.brand__name span { font-family: var(--sans); font-size: 10px; letter-spacing: .02em; text-transform: none; color: var(--ink-soft); }
.ccc-progress { background: var(--felt); }
.notice-strip a:hover, .foot a:hover, .foot .brand__name b, .foot__brand .brand__name b, .foot .brand__name span, .foot .age-pill, .ccc-cost-tool .calc__intro a:hover { color: var(--accent-light); }
.foot .age-pill { border-color: var(--accent-light); }
.notice-strip a { text-decoration-color: var(--accent-light); }
.foot :focus-visible, .notice-strip :focus-visible, .calc__intro :focus-visible { outline-color: var(--accent-light); }

/* Only assets with verified surplus canvas use this frame; artwork is unchanged. */
.rev-logo.logo-frame--trim img, .ccc-menu-logo.logo-frame--trim img, .rv-card__logo.logo-frame--trim img, .ccc-row-logo.logo-frame--trim img, .lcard__ic--logo.logo-frame--trim img { object-fit: cover !important; padding: 0 !important; }

/* ---------- publisher identity: brand mark, author box, masthead ---------- */
.ccc-brand-mark { display: inline-flex; flex: none; align-items: center; justify-content: center; line-height: 0; }
.ccc-brand-mark__svg { display: block; width: 100%; height: 100%; }
.ccc-brand-mark--18 { width: 18px; height: 18px; }
.ccc-brand-mark--24 { width: 24px; height: 24px; }
.ccc-brand-mark--40 { width: 40px; height: 40px; }
.ccc-brand-mark--48 { width: 48px; height: 48px; }
.ccc-masthead { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 16px; align-items: start; margin: 32px 0 0; padding: 22px 24px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); }
.ccc-masthead__dl { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin: 0; }
.ccc-masthead__dl > div { min-width: 0; }
.ccc-masthead__dl dt { margin: 0; font-size: .8rem; font-weight: 700; line-height: 1.4; color: var(--ink-faint); }
.ccc-masthead__dl dd { margin: 2px 0 0; font-size: .95rem; line-height: 1.6; color: var(--ink); }
.ccc-masthead__dl a { display: inline-block; padding: 4px 0; overflow-wrap: anywhere; }
.ccc-masthead__dl dd.ccc-masthead__links { display: flex; flex-wrap: wrap; column-gap: 16px; row-gap: 4px; }
.ccc-masthead__item { min-width: 0; max-width: 100%; }
@media (min-width: 760px) { .ccc-masthead__dl { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 32px; } }
@media (max-width: 640px) { .ccc-masthead { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 24px; padding: 18px 16px; border-radius: var(--r); } }

/* ---------- print ---------- */
@media print {
  .notice-strip, .ccc-progress, header.nav, .nav, .drawer, .tabbar, .sticky-cta, .learn-nav, .rev-side, .rev-end-cta,
  .rev-hero__cta, .foot__top, .ccc-nav-fallback, .ccc-row-toggle, .ccc-skip, .ccc-review-toc, .ccc-province-form { display: none !important; }
  body.ccc { padding: 0 !important; background: #fff; }
  .learn-layout, .rev-layout { display: block; }
  .ccc-payment-matrix tr.ccc-row-detail[hidden] { display: table-row !important; }
  .ccc-matrix-scroll, .table-scroll { overflow: visible !important; }
  .ccc .ccc-payment-matrix { min-width: 0; }
  a { color: inherit !important; text-decoration: underline !important; }
  .foot { background: #fff !important; color: #000 !important; }
  .foot__legal, .foot__legal b, .foot__bottom { color: #000 !important; }
}

/* Phones and tablets: "At a glance" repeats the key-facts table at the top of the review. */
@media (max-width: 920px) { .ccc-review .rev-side .ccc-glance { display: none; } }
/* mobile-editorial.css */
/* Reading layouts for phones. Keep source text and links in the same DOM. */
.ccc-reading-toc > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 44px;
  cursor: pointer;
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--ink);
  list-style: none;
}
.ccc-reading-toc > summary .side-title {
  margin: 0;
  font: inherit;
  letter-spacing: 0;
  text-transform: none;
  color: inherit;
}
.ccc-reading-toc > summary::after { color: var(--accent); }
/* The global summary chevron is the indicator; the old +/- span stays empty. */
.ccc-toc-toggle { display: none; }
.ccc-toc-content { margin-top: 10px; }
.ccc-scroll-hint { display: none; }
.ccc .entry-content a:not(.btn), .ccc-pagehero h1,
.ccc-pagehero__lede, .ccc-authorbox__name { overflow-wrap: anywhere; }
.ccc-authorbox > div, .lcard > span:last-child { min-width: 0; }
.ccc .entry-content .ccc-wide-table { margin: 1.8rem 0; }
.ccc .entry-content .ccc-wide-table .table-scroll { margin: 0; }

/* Keep plugin form controls consistent with the site's actions and error palette. */
body.ccc .wpforms-container {
  --wpforms-label-error-color:var(--bad);
  --wpforms-field-border-color:#7b858b;
  --wpforms-field-border-color-spare:#7b858b;
  --wpforms-field-border-radius:8px;
  --wpforms-field-text-color:var(--ink);
  --wpforms-label-color:var(--ink);
  --wpforms-button-background-color:var(--felt);
  --wpforms-button-border-color:var(--felt);
  --wpforms-button-text-color:#fff;
  --wpforms-button-border-radius:999px;
}
body.ccc .wpforms-container .wpforms-form :is(input[type="text"], input[type="email"], select, textarea) { min-height:48px; max-width:100%; font-family:var(--sans); font-size:16px; }
body.ccc .wpforms-container .wpforms-form textarea { min-height:160px; }
/* Visible field edges: #7b858b on the cream page is about 3.5:1 (WCAG 1.4.11). */
body.ccc .wpforms-container .wpforms-form :is(input[type="text"], input[type="email"], select, textarea) { background:#fff; border:1px solid #7b858b; border-radius:8px; padding:10px 14px; color:var(--ink); }
body.ccc .wpforms-container .wpforms-form :is(input, select, textarea):focus-visible { outline:3px solid var(--accent); outline-offset:2px; }
body.ccc .wpforms-container .wpforms-form :is(label.wpforms-error, em.wpforms-error, .wpforms-required-label),
body.ccc .wpforms-container :is(.wpforms-error-container, .wpforms-error-noscript, .wpforms-error-alert) { color:var(--bad); }
body.ccc .wpforms-container .wpforms-form :is(label.wpforms-error, em.wpforms-error) { font-size:.9rem; line-height:1.5; }
body.ccc .wpforms-container .wpforms-form button.wpforms-submit { min-height:48px; height:auto; padding:12px 24px; border:1.5px solid var(--felt); border-radius:999px; background:var(--felt); color:#fff; font:700 1rem/1.4 var(--sans); box-shadow:0 6px 18px rgba(176,35,42,.2); }
body.ccc .wpforms-container .wpforms-form button.wpforms-submit:hover { background:var(--felt-deep); border-color:var(--felt-deep); color:#fff; }
body.ccc .wpforms-container .wpforms-form button.wpforms-submit:focus-visible { outline:3px solid var(--accent); outline-offset:3px; }
body.ccc .wpforms-container .wpforms-form button.wpforms-submit:disabled { opacity:.65; cursor:wait; box-shadow:none; }

@media (max-width: 920px) {
  .learn-layout { gap: 24px; }
  .learn-nav__card.ccc-reading-toc { padding: 10px 18px; }
  .learn-nav__card.ccc-reading-toc[open] { padding-bottom: 18px; }
  .learn-toc a { min-height: 44px; align-items: baseline; padding: 12px 0; line-height: 1.45; }
  .ccc-reading-toc .ccc-toc-cta { min-height: 44px; margin-top: 14px; }
  .ccc-reading-toc .ccc-toc-cta + .ccc-toc-cta { margin-top: 2px; }
}

@media (max-width: 640px) {
  .ccc-article.section--tight { padding: 28px 0; }
  .ccc-library > h2 { margin-top: 32px; }
  .ccc-library > h2:first-child { margin-top: 0; }
  .ccc-pagehero { padding: 24px 0 28px; }
  .ccc-pagehero h1 { font-size: clamp(1.85rem, 7.7vw, 2.2rem); line-height: 1.15; letter-spacing: -.015em; }
  .ccc-pagehero .ccc-crumbs + h1 { margin-top: 14px; }
  .ccc-pagehero .ccc-pagehero__lede { margin-top: 14px; font-size: 1.05rem; line-height: 1.6; }
  .ccc-crumbs { font-family: var(--sans); font-size: .8rem; letter-spacing: 0; line-height: 1.5; }
  /* A long current-page crumb is cut short; the H1 below repeats it in full. */
  .ccc-crumbs .breadcrumb_last { display: inline-block; max-width: 55%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }
  .ccc .ccc-article .entry-content { font-size: 1.05rem; line-height: 1.7; }
  .ccc .entry-content h2 { font-size: 1.6rem; line-height: 1.23; margin-top: 2.1rem; overflow-wrap: anywhere; }
  .ccc .entry-content h3 { font-size: 1.3rem; line-height: 1.3; overflow-wrap: anywhere; }
  .ccc .entry-content blockquote { padding-left: 16px; }
  .ccc .entry-content blockquote p { font-size: 1.12rem; }
  .ccc .entry-content :is(.custom-content-box, .tldr-box, .notes, .callout-box, .warning-box, .green-box) { padding: 18px 16px; }
  .byline-wrap { margin-top: 18px; }
  .ccc-authorbox { grid-template-columns: 48px minmax(0, 1fr); gap: 4px 14px; padding: 18px 16px; margin-top: 32px; border-radius: var(--r); }
  .ccc-authorbox > div { display: contents; }
  .ccc .ccc-authorbox .ccc-authorbox__name { align-self: center; font-size: 1.1rem; line-height: 1.4; }
  .ccc .ccc-authorbox :is(.ccc-authorbox__bio, .ccc-authorbox__links) { grid-column: 1 / -1; }
  .ccc .ccc-authorbox .ccc-authorbox__bio { margin-top: 10px; font-size: .94rem; line-height: 1.65; }
  .ccc-related { margin-top: 32px; padding-top: 26px; }
  .ccc-related__title { font-size: 1.55rem; line-height: 1.25; }
  .lcards { gap: 12px; }
  .lcard { gap: 12px; padding: 16px; border-radius: var(--r); }
  .lcard__ic { width: 32px; height: 32px; border-radius: 9px; }
  .lcard__ic--logo { width: 64px; height: 36px; border-radius: 8px; }
  .lcard__ic svg { width: 19px; height: 19px; }
  .lcard__t { font-size: 1.08rem; line-height: 1.3; }
  .lcard__d { font-size: .94rem; line-height: 1.55; margin-top: 7px; }
  .ccc .entry-content .ccc-scroll-hint { display: block; margin: 0 0 8px; font-size: .85rem; line-height: 1.5; color: var(--ink-soft); }
  .ccc .entry-content .ccc-reading-table, .ccc .ccc-issuer-table { display: block; min-width: 0; width: 100%; border: 0; background: transparent; overflow: visible; }
  .ccc-reading-table-frame { overflow: visible; border-radius: 0; }
  .ccc :is(.entry-content .ccc-reading-table, .ccc-issuer-table) caption { display: block; width: 100%; padding: 0 0 12px; font: inherit; font-weight: 700; }
  .ccc :is(.entry-content .ccc-reading-table, .ccc-issuer-table) thead { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .ccc :is(.entry-content .ccc-reading-table, .ccc-issuer-table) tbody { display: block; }
  .ccc :is(.entry-content .ccc-reading-table, .ccc-issuer-table) tbody tr { display: block; margin-top: 14px; padding: 16px; border: 1px solid var(--line); border-radius: var(--r); background: var(--paper); }
  .ccc :is(.entry-content .ccc-reading-table, .ccc-issuer-table) tbody tr:first-child { margin-top: 0; }
  .ccc :is(.entry-content .ccc-reading-table, .ccc-issuer-table) tbody :is(th, td) { display: block; width: 100%; min-width: 0; padding: 0; border: 0; font-size: 1rem; line-height: 1.6; background: transparent; overflow-wrap: anywhere; word-break: normal; }
  .ccc :is(.entry-content .ccc-reading-table, .ccc-issuer-table) tbody tr > :first-child { padding-bottom: 0; font-family: var(--sans); font-size: 1rem; font-weight: 700; text-transform: none; letter-spacing: 0; color: var(--ink); }
  .ccc :is(.entry-content .ccc-reading-table, .ccc-issuer-table) tbody tr > :nth-child(n+2) { padding-top: 12px; margin-top: 12px; border-top: 1px solid var(--line-soft); }
  .ccc-reading-table [data-label]::before { content: attr(data-label); display: block; margin-bottom: 4px; font-size: .85rem; font-weight: 700; line-height: 1.5; color: var(--ink-soft); }
  body.ccc .wpforms-container .wpforms-form :is(input[type="text"], input[type="email"], select, textarea) { max-width: 100%; min-height: 48px; font-size: 16px; }
  body.ccc .wpforms-container .wpforms-form textarea { min-height: 160px; }
  body.ccc .wpforms-container .wpforms-submit { min-height: 48px; width: 100%; font-size: 16px; }
  /* Two-column tables (key facts) read as a compact label/value list; 3+ columns keep the stacked cards. */
  .ccc .entry-content .ccc-reading-table tbody tr:has(> :nth-child(2):last-child) { display: grid; grid-template-columns: minmax(0, 40%) minmax(0, 1fr); gap: 0 12px; margin-top: 0; padding: 12px 14px; border-radius: 0; border-width: 0 0 1px; }
  .ccc .entry-content .ccc-reading-table tbody tr:has(> :nth-child(2):last-child):last-child { border-bottom-width: 0; }
  .ccc .entry-content .ccc-reading-table tbody tr:has(> :nth-child(2):last-child) > :nth-child(2) { margin-top: 0; padding-top: 0; border-top: 0; }
  .ccc .entry-content .ccc-reading-table tbody tr:has(> :nth-child(2):last-child) [data-label]::before { content: none; }
  .ccc .entry-content .ccc-reading-table:has(tbody tr > :nth-child(2):last-child) tbody { border: 1px solid var(--line); border-radius: var(--r); background: var(--paper); overflow: hidden; }
  /* Bigger tap targets for the breadcrumb and byline links without moving the text. */
  .ccc-crumbs a, .byline__name a { display: inline-block; padding: 13px 0; margin: -13px 0; }
}

@media (max-width: 380px) {
  .lcard { display: block; }
  .lcard__ic { margin-bottom: 10px; }
}

@media (hover: none) {
  .lcard:hover { transform: none; }
}

@media (max-width: 640px) {
  .ccc .entry-content a[href^="tel:"] { white-space: nowrap; overflow-wrap: normal; }
}

.ccc a[href^="tel:"] { white-space: nowrap; overflow-wrap: normal; }
@media (max-width: 360px) {
  .ccc-pagehero h1 { font-size: clamp(1.65rem, 8vw, 1.85rem); }
}
/* mobile-shell.css */
/* Readable footer information with native link disclosures on phones. */
.foot .foot__col { min-width: 0; }
.foot .foot__col > summary {
  min-height: 44px;
  margin: 0 0 8px;
  padding: 10px 0;
  color: #fff;
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
}
.foot .foot__col ul { gap: 0; }
.foot .foot__col li { margin: 0; }
.foot .foot__col li a,
.foot .foot__contact--actions a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 7px 0;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.foot .foot__contact .foot__action {
  display: flex;
  width: fit-content;
  max-width: 100%;
  gap: 10px;
  color: #fff;
  font-weight: 600;
  border-radius: 3px;
  text-decoration: none;
}
.foot .foot__action > span:first-child {
  min-width: 0;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.foot .foot__action .arr { flex: none; }
.foot .foot__contact .foot__action:hover,
.foot .foot__contact .foot__action:focus { color: #fff; }
.foot .foot__action:hover > span:first-child,
.foot .foot__action:focus-visible > span:first-child { text-decoration-thickness: 2px; }
.foot .foot__action:focus-visible { outline: 3px solid var(--accent-light); outline-offset: 3px; }
/* Brand line: the name on its own line, then the email and contact link; the links keep a 44px tap area. */
.foot .foot__contact:not(.foot__contact--actions) b { display: block; margin: 0 0 2px; }
.foot .foot__contact .foot__nowrap { white-space: nowrap; }
.foot .foot__contact:not(.foot__contact--actions) a { display: inline-block; padding: 10px 0; margin: -10px 0; overflow-wrap: anywhere; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.foot .foot__contact--actions { margin-top: 10px; }
.foot .foot__bottom .gamble__text { min-width: 0; }
.foot .foot__brand p,
.foot .foot__legal,
.foot .foot__bottom { color: rgba(255, 255, 255, .84); }
.foot .foot__contact {
  max-width: none;
  color: rgba(255, 255, 255, .84) !important;
  font-size: 14px !important;
  line-height: 1.65 !important;
}
.foot .foot__legal,
.foot .foot__bottom { font-size: 14px; line-height: 1.65; }
.foot .foot__legal b { color: #fff; }
.foot .foot__bottom .gamble { align-items: flex-start; }
.foot .foot__bottom .age-pill { flex-shrink: 0; }
.foot .brand__name i { color: rgba(255, 255, 255, .84); }
.ccc-review .rev-hero .lede { margin: 14px 0 0; max-width: 65ch; }

@media (max-width: 640px) {
  .foot .foot__top { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 32px 0 20px; }
  .foot .foot__brand { margin-bottom: 24px; }
  .foot .foot__brand p { max-width: none; font-size: 15px; line-height: 1.65; }
  .foot .foot__col { border-top: 1px solid rgba(255, 255, 255, .24); }
  .foot .foot__col > summary { margin-bottom: 0; padding: 14px 0; min-height: 52px; }
  .foot .foot__col ul { padding: 0 0 12px 18px; font-size: 15px; }
  .foot .foot__col li a { padding-block: 10px; }
  .foot .foot__legal { gap: 20px; padding-block: 20px; }
  .foot .foot__bottom { padding-block: 20px; gap: 16px; }
  .tabbar {
    padding: 4px max(4px, env(safe-area-inset-right, 0px)) calc(4px + env(safe-area-inset-bottom, 0px)) max(4px, env(safe-area-inset-left, 0px));
  }
  .tabbar a { min-height: 52px; min-width: 0; justify-content: center; padding: 6px 2px; font-size: 10.5px; line-height: 1.2; }
  .tabbar a svg { width: 22px; height: 22px; flex-shrink: 0; }
}
/* typography.css */
/* One family; a shared hierarchy for editorial content, tools and navigation. */
body.ccc {
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  font-kerning: normal;
}
.ccc :is(button, input, select, textarea) { font-family: var(--sans); }
.ccc :is(h1, h2, h3, h4, h5, h6),
.ccc :is(.ccc-h2, .ccc-h2--section, .ccc-h3) {
  font-family: var(--sans);
  font-weight: 700;
  font-style: normal;
  letter-spacing: -.02em;
  overflow-wrap: break-word;
}
.ccc main h1 { font-weight: 800; }
.ccc main h2 { font-weight: 750; font-size: clamp(1.6rem, 1.25rem + 1vw, 2rem); line-height: 1.25; }
.ccc main h3 { font-size: 1.375rem; line-height: 1.32; }
.ccc .ccc-home h2 { font-size: clamp(1.75rem, 1.25rem + 1.4vw, 2.5rem); line-height: 1.25; }
.ccc :is(.ccc-pagehero, .page-hero, .rev-hero) h1 {
  max-width: 30ch;
  font-size: clamp(2rem, 1.3rem + 2.2vw, 3.125rem);
  line-height: 1.15;
  letter-spacing: -.03em;
}
.ccc .home-hero h1 {
  font-size: clamp(2.25rem, 1.5rem + 2.2vw, 3.25rem);
  line-height: 1.13;
  letter-spacing: -.035em;
}
.ccc .home-hero h1 .serif-i {
  font-style: normal;
  font-weight: 800;
  line-height: inherit;
  letter-spacing: inherit;
  margin-top: .18em;
}
.ccc :is(.section-head h2, .band__h2, .ccc-h2--section) {
  font-size: clamp(1.75rem, 1.25rem + 1.4vw, 2.5rem);
  line-height: 1.22;
}
.ccc :is(.entry-content, .prose) {
  font-size: 1.0625rem;
  line-height: 1.75;
}
.ccc .entry-content > :is(p, ul, ol, blockquote),
.ccc .prose > :is(p, ul, ol, blockquote) { max-width: 70ch; }
.ccc .rev-main .entry-content > p { font-size: inherit; line-height: inherit; }
.ccc :is(.entry-content, .prose) h2 {
  font-size: clamp(1.6rem, 1.25rem + 1vw, 2rem);
  line-height: 1.25;
  margin-top: 2.5rem;
  letter-spacing: -.025em;
}
.ccc :is(.entry-content, .prose) h3 {
  font-size: 1.375rem;
  line-height: 1.32;
  letter-spacing: -.015em;
}
.ccc :is(.entry-content, .prose) :is(h4, h5, h6) {
  font-size: 1.125rem;
  line-height: 1.4;
  letter-spacing: -.01em;
}
.ccc :is(.entry-content, .prose) blockquote p {
  font-family: var(--sans);
  font-size: 1.1875rem;
  line-height: 1.65;
}
.ccc :is(.lede, .ccc-pagehero__lede) { font-size: 1.125rem; line-height: 1.65; }
.ccc :is(.lcard__t, .ccc-authorbox__name) {
  font-family: var(--sans);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -.01em;
}
.ccc .brand__name { font-size: 1.25rem; line-height: 1.1; letter-spacing: -.04em; }
.ccc .brand__name span {
  font-family: var(--sans);
  font-size: 10px;
  line-height: 1.4;
  letter-spacing: .01em;
  text-transform: none;
  font-weight: 500;
}
.ccc :is(.nav__links a, .btn) { font-weight: 600; letter-spacing: 0; }
.ccc .btn { line-height: 1.35; }
.ccc :is(.side-title, .calc__field > label) {
  font-family: var(--sans);
  font-size: .875rem;
  line-height: 1.45;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
}
.ccc .byline__meta { font-family: var(--sans); font-size: .8125rem; line-height: 1.5; }
.ccc .byline__role { font-size: .8125rem; line-height: 1.45; }
.ccc :is(.ccc-crumbs, .breadcrumbs) { font-family: var(--sans); font-size: .8125rem; line-height: 1.5; letter-spacing: 0; }
.ccc .source-cite { font-size: .875rem; line-height: 1.6; }
.ccc .entry-content thead th,
.ccc .entry-content tr:first-child th:not([scope="row"]),
.ccc .tbl thead th {
  font-family: var(--sans);
  font-size: .875rem;
  font-weight: 600;
  line-height: 1.45;
  text-transform: none;
  letter-spacing: 0;
}
/* Tabular figures only where numbers line up in columns: in Inter, "tnum" also
   gives the hyphen a figure-wide advance ("cash - like"), so text tables keep
   proportional spacing. */
.ccc :is(.ledger, .stake-input input) {
  font-variant-numeric: tabular-nums lining-nums;
}
.ccc .learn-toc a::before,
.ccc .toc-grid a::before {
  font-family: var(--sans);
  font-size: .8125rem;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}
.ccc :is(code, pre, kbd, samp) { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }

@container (max-width: 920px) {
  .ccc .byline--compact .byline__meta { font-size: .8125rem; }
}
@media (max-width: 640px) {
  .ccc main h2, .ccc .ccc-home h2 { font-size: 1.625rem; line-height: 1.28; }
  .ccc main h3 { font-size: 1.3125rem; line-height: 1.35; }
  .ccc :is(.ccc-pagehero, .page-hero, .rev-hero) h1,
  .ccc .home-hero h1 {
    font-size: clamp(1.875rem, 1.2rem + 3vw, 2.25rem);
    line-height: 1.2;
    letter-spacing: -.025em;
    max-width: none;
  }
  .ccc :is(.entry-content, .prose),
  .ccc .ccc-article .entry-content { font-size: 1.0625rem; line-height: 1.75; }
  .ccc :is(.entry-content, .prose) h2,
  .ccc :is(.section-head h2, .band__h2, .ccc-h2--section) { font-size: 1.625rem; line-height: 1.28; }
  .ccc :is(.entry-content, .prose) h3 { font-size: 1.3125rem; line-height: 1.35; }
  .ccc :is(.lede, .ccc-pagehero__lede),
  .ccc .ccc-pagehero .ccc-pagehero__lede,
  .ccc .home-hero .lede { font-size: 1.0625rem; line-height: 1.65; }
  .ccc .brand { gap: 8px; }
  .ccc .brand__name { font-size: 1.125rem; letter-spacing: -.04em; }
  .ccc .nav .brand .ccc-emblem { width: 34px; height: 34px; }
  .ccc .brand__name span,
  .ccc .drawer .brand__name span { font-size: 10px; line-height: 1.4; letter-spacing: 0; }
  .ccc .byline-wrap .byline__meta { font-size: .8125rem; }
  .ccc .tabbar a { font-size: 11px; line-height: 1.25; }
  .ccc .ccc-reading-table [data-label]::before { font-size: .875rem; line-height: 1.5; }
  .ccc :is(input, select, textarea) { font-size: max(16px, 1em); }
}
@media (max-width: 360px) {
  .ccc :is(.ccc-pagehero, .page-hero, .rev-hero) h1,
  .ccc .home-hero h1 { font-size: 1.75rem; }
  .ccc .nav .brand__name { font-size: 1.0625rem; }
  .ccc .nav .brand__name span { display: none; }
}
/* launch.css */
/* Quieter reading templates: policy links, byline, compact tool heroes, review hero on phones. */
.ccc-policy-links { display: flex; flex-wrap: wrap; gap: 4px 24px; border-top: 1px solid var(--line); margin-top: 28px; padding-top: 18px; }
.ccc-policy-links a { display: inline-flex; align-items: center; min-height: 44px; }

/* Byline: "[mark] By CreditCardCasinos.ca" on one line, then the dates. */
.ccc .byline-wrap .byline--compact { border: 0; background: transparent; box-shadow: none; padding: 0; gap: 8px 20px; justify-content: flex-start; align-items: center; overflow: visible; border-radius: 0; }
.ccc .byline-wrap .byline { overflow: visible; border-radius: 0; }
.ccc .byline-wrap .byline__p { padding: 0; border: 0; width: auto; min-width: 0; align-items: center; gap: 9px; }
.ccc .byline-wrap .byline__txt { display: inline-flex; flex-direction: row; align-items: baseline; gap: .3em; white-space: normal; min-width: 0; }
.ccc .byline-wrap .byline__role { display: inline; margin: 0; font-family: var(--sans); font-size: .8125rem; letter-spacing: 0; text-transform: none; color: var(--ink-soft); font-weight: 500; }
.ccc .byline-wrap .byline__name { display: inline; font-size: .92rem; }
.ccc .byline-wrap .byline__meta { display: flex; flex: 0 1 auto; flex-wrap: wrap; gap: 4px 16px; min-width: 0; max-width: 100%; padding: 0; border: 0; background: transparent; white-space: normal; }
.ccc .byline-wrap .byline__meta > span { min-width: 0; }
@media (max-width: 720px) {
 .ccc .byline-wrap { margin-top: 15px; }
 .ccc .byline-wrap .byline.byline--compact { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px 18px; width: 100%; }
 .ccc .byline-wrap .byline__p { width: auto; }
 .ccc .byline-wrap .byline__meta { flex-basis: 100%; justify-content: flex-start; padding-left: 1px; font-size: .8125rem; line-height: 1.5; }
 .ccc .byline-wrap .byline__role, .ccc .byline-wrap .byline__name { font-size: .875rem; line-height: 1.5; }
}

/* Tools and directories need a concise introduction before their useful controls. */
.ccc .ccc-pagehero--compact { padding: 26px 0 24px; }
.ccc .ccc-pagehero--compact .ccc-crumbs { margin-bottom: 12px; }
.ccc .ccc-pagehero--compact h1 { margin: 0; font-size: clamp(1.85rem, 1.3rem + 1.8vw, 2.75rem); }
.ccc .ccc-pagehero--compact .ccc-pagehero__lede { margin-top: 14px; }
.ccc .ccc-pagehero--compact .byline-wrap { margin-top: 16px; }
@media (max-width:720px) {
 .ccc .ccc-pagehero--compact { padding: 20px 0; }
 .ccc .ccc-pagehero--compact h1 { font-size: clamp(1.75rem, 7vw, 2.15rem); }
}
.ccc-sample-scope { margin: 26px 0; padding: 14px 18px; border: 1px solid var(--line); border-radius: 8px; }
.ccc-sample-scope > summary { min-height: 44px; font-weight: 650; }
.ccc-sample-scope[open] > summary { margin-bottom: 16px; }

/* Review hero on phones: a wide logo tile above the title, then the Visit button. */
@media (max-width: 720px) {
 .ccc-review .rev-hero { padding: 22px 0 24px; margin-bottom: 0; }
 .ccc-review .rev-hero__id { gap: 14px; margin-top: 16px; }
 .ccc-review .rev-hero h1 { font-size: clamp(1.6rem,7.4vw,2.05rem); line-height: 1.15; }
 .ccc-review .rev-hero .lede { font-size: 1rem; line-height: 1.55; margin: 16px 0 0; }
 .ccc-review .rev-main { padding-top: 0; }
}
@media (max-width: 640px) {
 .ccc-review .rev-hero__id { flex-direction: column; align-items: flex-start; gap: 12px; }
 .ccc-review .rev-hero__id .rev-logo { display: flex; width: 132px; height: 56px; min-width: 0; padding: 6px 10px; border-radius: 14px; }
 .ccc-review .rev-hero__id .rev-logo img { padding: 0; }
 .ccc-review .rev-hero__id .rev-logo.logo-frame--trim { padding: 0; }
}