/* =========================================================================
   Centsable — CC Product Hub stylesheet (Tier-1 reference build, session 9)
   Scoped to the build page only (enqueued by template-cc-hub-build.php) so it
   does NOT restyle the live homepage / 8 compare pages mid-rebrand.
   Tokens = the LOCKED design system (DESIGN-SPEC.md §3/§9), WCAG-AA verified.
   ========================================================================= */

/* ---- Self-hosted Montserrat (no Google hotlink) ---- */
@font-face{font-family:'Montserrat';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/montserrat/montserrat-400.woff2') format('woff2');}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/montserrat/montserrat-500.woff2') format('woff2');}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/montserrat/montserrat-600.woff2') format('woff2');}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/montserrat/montserrat-700.woff2') format('woff2');}

/* ---- Design tokens (LOCKED) ---- */
/* Promoted to :root so the global chrome (header/hero/footer, outside
   .cc-hub) also receives the tokens. Safe: cc-hub.css is enqueued ONLY on
   the build page (functions.php gate), so nothing leaks to live pages. */
:root,.cc-hub{
  /* Brand — Alpine Crisp palette (2026-07-03, scoped test page: best-credit-cards-canada) */
  --color-primary:#113F32; --color-primary-700:#0C2E25; --color-primary-100:#D6E3DF; --color-primary-50:#EAF2EF;
  --color-secondary:#4B5563; --color-secondary-50:#F3F6F5;
  /* --color-accent swapped 2026-07-10 (session 37) to Vic's grey-green #CFD9D6
     (was teal #10B981) — decorative hover/border accent only, NOT the CTA color.
     Orange lives in its own --color-cta-* tokens below so it can never leak
     outside buttons. Synced with style.css's :root so both files agree —
     previously they held DIFFERENT accent values (lime vs teal) and silently
     diverged depending on which stylesheet's cascade order won on a given page.
     --color-accent-700/800/50 are UNCHANGED (still teal-derived) — that's a
     separate semantic scale used for 'fresh/positive' data badges and rating
     text (cc-badge--fresh, cc-table__rating), not the generic hover accent;
     the brand doc calls for positive data to stay green, so left alone. */
  --color-accent:#CFD9D6; --color-accent-700:#0E9F6E; --color-accent-800:#047857; --color-accent-50:#E7F6EE;
  --color-on-accent:var(--color-primary);
  /* CTA-only accent — Safety Orange. Used exclusively by .cc-btn--primary /
     .cc-btn--accent. Never applied to badges, bullets, borders, or icons. */
  --color-cta:#EA580C; --color-cta-hover:#C2410C; --color-on-cta:#fff;
  /* Neutrals */
  --color-text:#0F172A; --color-text-muted:#4B5563; --color-border:#E2E8F0;
  --color-surface:#FFFFFF; --color-bg:#FFFFFF; --color-bg-subtle:#F3F6F5;
  --section-bg:#FFFFFF; --section-bg-alt:#F3F6F5; /* alternating section shades (AA-safe: Forest/muted text pass on both) */
  /* Semantic (data badges — savings/fees, NOT the CTA accent) */
  --color-success:#14532D; --color-success-bg:#DCFCE7;
  --color-warning:#9A4A07; --color-warning-bg:#FDF3E7;
  --color-error:#7F1D1D; --color-error-bg:#FEE2E2;
  --color-info:#175CD3; --color-info-bg:#EAF1FC;
  /* Links */
  --color-link:var(--color-primary); --color-link-hover:var(--color-accent-800);
  --focus-ring:0 0 0 3px rgba(234,88,12,.45);
  /* Type */
  --font-heading:'Montserrat',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-body:'Montserrat',system-ui,-apple-system,'Segoe UI',sans-serif;
  --fs-h1:clamp(2rem,1.4rem + 3vw,3rem); --fs-h2:clamp(1.75rem,1.4rem + 1.75vw,2.25rem);
  --fs-h3:clamp(1.5rem,1.3rem + 1vw,1.75rem); --fs-h4:clamp(1.25rem,1.15rem + .5vw,1.375rem);
  --fs-body:1rem; --fs-body-lg:clamp(1.0625rem,1rem + .25vw,1.125rem); --fs-small:.875rem; --fs-caption:.75rem;
  --lh-tight:1.2; --lh-base:1.6;
  /* Spacing (8px) */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px; --space-6:32px; --space-7:48px; --space-8:64px; --space-9:96px;
  /* Layout */
  /* 2026-07-10 (session 39): renamed from --container-pad to --cc-pad-x.
     --container-pad is ALSO defined in style.css's :root, but as a 2-value
     shorthand ("0 24px") for `padding: var(--container-pad)` consumers there,
     while this file's own consumers (.cc-container/.cc-mega__inner below)
     need a single-value token for padding-left/padding-right and embedded
     shorthand use. Same name, incompatible shapes — sharing it silently broke
     `.container`/`.rate-banner__inner` (and anything else using the style.css
     shorthand pattern) on every page where cc-hub.css also loads, adding an
     unwanted extra 24px of TOP+BOTTOM padding site-wide (Rate Bar spacing
     bug, flagged by Vic). Giving this file's own internal need its own name
     removes the collision — style.css's --container-pad now resolves
     correctly everywhere, including on cc-hub.css-loaded pages. */
  --container-max:1200px; --cc-pad-x:24px; --content-max:720px;
  /* Radius */
  --radius-sm:4px; --radius-md:8px; --radius-lg:12px; --radius-xl:20px; --radius-full:9999px;
  /* Shadow */
  --shadow-sm:0 1px 2px rgba(6,47,34,.06),0 1px 3px rgba(6,47,34,.10);
  --shadow-md:0 4px 8px rgba(6,47,34,.08),0 2px 4px rgba(6,47,34,.06);
  --shadow-lg:0 12px 24px rgba(6,47,34,.10),0 4px 8px rgba(6,47,34,.06);
  --transition:all .15s ease;
}
@media (max-width:767px){ .cc-hub{ --cc-pad-x:16px; } }

/* ---- Base (scoped) ---- */
.cc-hub{ font-family:var(--font-body); color:var(--color-text); background:var(--color-bg); font-size:var(--fs-body); line-height:var(--lh-base); -webkit-font-smoothing:antialiased; }
.cc-hub *,.cc-hub *::before,.cc-hub *::after{ box-sizing:border-box; }
.cc-hub h1,.cc-hub h2,.cc-hub h3,.cc-hub h4{ font-family:var(--font-heading); color:var(--color-primary); line-height:var(--lh-tight); margin:0; }
.cc-hub p{ margin:0; }
.cc-hub a{ color:var(--color-link); text-decoration:none; }
.cc-hub a:hover{ color:var(--color-link-hover); text-decoration:underline; }
.cc-hub :focus-visible{ outline:none; box-shadow:var(--focus-ring); border-radius:var(--radius-sm); }
.cc-container{ max-width:var(--container-max); margin:0 auto; padding-left:var(--cc-pad-x); padding-right:var(--cc-pad-x); }
.cc-section{ padding-block:var(--space-8); }
@media (max-width:767px){ .cc-section{ padding-block:var(--space-7); } }
/* Alternating section backgrounds (subtle white <-> warm alabaster). Counts
   <section> children of <main> only (breadcrumb=nav, pagehead=header excluded).
   Uniform vertical padding preserved. .cc-toc overrides its own bg below. */
.cc-hub > .cc-section:nth-of-type(odd){ background:var(--section-bg); }
.cc-hub > .cc-section:nth-of-type(even){ background:var(--section-bg-alt); }
.cc-section__title{ font-size:var(--fs-h2); font-weight:700; }
.cc-section__lede{ font-size:var(--fs-body-lg); color:var(--color-text-muted); max-width:100%; margin-top:var(--space-3); }
.cc-sr{ position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.cc-eyebrow{ display:inline-block; font-size:var(--fs-small); font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--color-secondary); }

/* ---- Icons ---- */
.cc-ico{ flex:none; color:var(--color-secondary); }
.cc-ico--mint{ color:var(--color-accent-800); }

/* ---- Buttons ---- */
.cc-btn{ display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2); font-family:var(--font-body); font-weight:600; font-size:var(--fs-body); padding:12px 24px; border-radius:var(--radius-md); border:1px solid transparent; cursor:pointer; transition:var(--transition); text-decoration:none; min-height:44px; }
.cc-btn:hover{ text-decoration:none; }
/* Button colour rules are prefixed with .cc-hub so they out-specify the base
   `.cc-hub a{color:...}` link rule (0,1,1) — otherwise anchor buttons inherit
   Forest link colour ON a Forest fill = invisible text. (Fixed session 11.) */
.cc-hub .cc-btn--primary{ background:var(--color-cta); color:var(--color-on-cta); font-weight:700; font-size:1rem; }
.cc-hub .cc-btn--primary:hover{ background:var(--color-cta-hover); color:var(--color-on-cta); }
.cc-hub .cc-btn--secondary{ background:transparent; border-color:var(--color-primary); color:var(--color-primary); }
.cc-hub .cc-btn--secondary:hover{ background:var(--color-primary-50); color:var(--color-primary); }
.cc-hub .cc-btn--text{ background:transparent; color:var(--color-primary); padding:12px 8px; min-height:auto; }
.cc-hub .cc-btn--text:hover{ color:var(--color-link-hover); text-decoration:underline; }
.cc-hub a.cc-btn:hover{ text-decoration:none; }
.cc-hub a.cc-btn--text:hover{ text-decoration:underline; }
.cc-btn--block{ width:100%; }
.cc-btn--sm{ padding:8px 14px; min-height:auto; font-size:var(--fs-small); }
/* Small CTA chips (table 'Apply' buttons) can't comfortably carry bold
   15-16px text at this padding without breaking row density — per the
   agreed fallback rule, these use Forest fill + white text (14.6:1) instead
   of orange, rather than shrinking orange below the AA-safe size floor. */
.cc-hub .cc-btn--primary.cc-btn--sm{ background:var(--color-primary); color:#fff; font-size:var(--fs-small); }
.cc-hub .cc-btn--primary.cc-btn--sm:hover{ background:var(--color-primary-700); color:#fff; }


/* ---- Badges ---- */
.cc-badge{ display:inline-flex; align-items:center; gap:var(--space-1); font-size:var(--fs-caption); font-weight:700; letter-spacing:.02em; text-transform:uppercase; padding:4px 10px; border-radius:var(--radius-full); }
.cc-badge--accent{ background:var(--color-accent); color:var(--color-on-accent); }      /* Mint fill + Forest text (AA 5.76:1) */
.cc-badge--fresh{ background:var(--color-accent-50); color:var(--color-accent-800); text-transform:none; letter-spacing:0; }
.cc-badge--positive{ background:var(--color-success-bg); color:var(--color-success); text-transform:none; letter-spacing:0; font-weight:700; }
.cc-badge--negative{ background:var(--color-error-bg); color:var(--color-error); text-transform:none; letter-spacing:0; font-weight:700; }
.cc-badge--neutral{ background:var(--color-bg-subtle); color:var(--color-text-muted); text-transform:none; letter-spacing:0; font-weight:700; }

/* ---- single-bank.php profile header (session 40) ---- */
.cc-bankhead{ padding-block:var(--space-8); background:var(--color-bg-subtle); border-bottom:1px solid var(--color-border); }
.cc-bankhead__inner{ display:flex; gap:var(--space-5); align-items:flex-start; }
.cc-bankhead__logo{ width:64px; height:64px; object-fit:contain; border-radius:var(--radius-lg); background:var(--color-surface); border:1px solid var(--color-border); padding:var(--space-2); flex-shrink:0; }
.cc-bankhead__title{ margin:0 0 var(--space-2); }
.cc-bankhead__meta{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-2); margin-bottom:var(--space-3); }
.cc-bankhead__cdic{ font-size:var(--fs-small); color:var(--color-text-muted); }
.cc-bankhead__overview{ max-width:65ch; margin-bottom:var(--space-4); color:var(--color-text-muted); }
.cc-bankhead__products{ display:flex; flex-wrap:wrap; gap:var(--space-2); list-style:none; margin:0; padding:0; }
.cc-bankhead__products li{ background:var(--color-bg-subtle); border:1px solid var(--color-border); border-radius:var(--radius-full); padding:var(--space-2) var(--space-4); font-size:var(--fs-small); }
.cc-bankhead__back{ padding-top:0; }
@media (max-width: 640px){
  .cc-bankhead__inner{ flex-direction:column; }
}

/* ---- Stars ---- */
.cc-stars{ display:inline-flex; align-items:center; gap:2px; }
.cc-star{ font-size:1rem; line-height:1; color:var(--color-border); }
.cc-star.is-full{ color:var(--color-accent); }
.cc-star.is-half{ background:linear-gradient(90deg,var(--color-accent) 50%,var(--color-border) 50%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.cc-stars__num{ margin-left:var(--space-2); font-weight:700; font-size:var(--fs-small); color:var(--color-text); -webkit-text-fill-color:initial; }

/* ---- Placeholder card art ---- */
.cc-art{ position:relative; aspect-ratio:600/380; width:100%; max-width:240px; border-radius:var(--radius-lg); background:linear-gradient(135deg,var(--art,#062F22),color-mix(in srgb,var(--art,#062F22) 70%,#000)); color:#fff; box-shadow:var(--shadow-md); overflow:hidden; padding:var(--space-3); display:flex; flex-direction:column; }
.cc-art__chip{ width:34px; height:24px; border-radius:5px; background:linear-gradient(135deg,#e9d8a6,#c9a227); box-shadow:inset 0 0 0 1px rgba(0,0,0,.15); }
.cc-art__issuer{ margin-top:auto; font-weight:700; font-size:var(--fs-small); letter-spacing:.02em; }
.cc-art__net{ font-size:var(--fs-caption); opacity:.85; text-transform:uppercase; letter-spacing:.1em; }
.cc-art__ph{ position:absolute; top:var(--space-3); right:var(--space-3); font-size:9px; letter-spacing:.14em; opacity:.55; }

/* ---- Breadcrumb ---- */
.cc-breadcrumb{ background:var(--color-bg-subtle); border-bottom:1px solid var(--color-border); padding-block:var(--space-3); }
.cc-breadcrumb__list{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-2); font-size:var(--fs-small); }
.cc-breadcrumb__item{ display:inline-flex; align-items:center; gap:var(--space-2); color:var(--color-text-muted); }
.cc-breadcrumb__item a{ color:var(--color-secondary); }
.cc-breadcrumb__item [aria-current]{ color:var(--color-text); font-weight:600; }
.cc-breadcrumb__sep{ color:var(--color-border); }

/* ---- Page header ---- */
.cc-pagehead{ background:linear-gradient(180deg,var(--color-primary-50),var(--color-bg)); padding-block:var(--space-7); border-bottom:1px solid var(--color-border); }
.cc-pagehead__h1{ font-size:var(--fs-h1); font-weight:700; margin-top:var(--space-3); max-width:16ch; }
.cc-pagehead__month{ color:var(--color-secondary); white-space:nowrap; }
.cc-pagehead__meta{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-4); margin-top:var(--space-4); }
.cc-pagehead__byline{ font-size:var(--fs-small); color:var(--color-text-muted); }
.cc-pagehead__intro{ font-size:var(--fs-body-lg); color:var(--color-text); max-width:100%; margin-top:var(--space-4); }

/* ---- AI Summary ---- */
.cc-aisummary__box{ background:var(--color-surface); border:1px solid var(--color-border); border-left:4px solid var(--color-accent); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); padding:var(--space-6); }
.cc-aisummary__head{ display:flex; align-items:center; gap:var(--space-2); }
.cc-aisummary__head .cc-ico{ color:var(--color-accent-800); }
.cc-aisummary__title{ font-size:var(--fs-h3); font-weight:700; }
.cc-aisummary__answer{ font-size:var(--fs-body-lg); margin-top:var(--space-3); }
.cc-aisummary__facts{ list-style:none; margin:var(--space-5) 0 0; padding:0; display:grid; gap:var(--space-3); }
.cc-aisummary__facts li{ display:flex; align-items:flex-start; gap:var(--space-2); }
.cc-aisummary__note{ margin-top:var(--space-5); font-size:var(--fs-small); color:var(--color-text-muted); font-style:italic; }

/* ---- Key takeaways ---- */
.cc-takeaways__box{ background:var(--color-secondary-50); border-radius:var(--radius-lg); padding:var(--space-6); }
.cc-takeaways__title{ display:flex; align-items:center; gap:var(--space-2); font-size:var(--fs-h4); font-weight:700; }
.cc-takeaways__title .cc-ico{ color:var(--color-accent-800); }
.cc-takeaways__list{ margin:var(--space-4) 0 0; padding-left:0; list-style:none; display:grid; gap:var(--space-3); }
.cc-takeaways__list li{ position:relative; padding-left:var(--space-6); }
.cc-takeaways__list li::before{ content:""; position:absolute; left:8px; top:.6em; width:8px; height:8px; border-radius:50%; background:var(--color-accent); }

/* ---- Our Picks ---- */
.cc-picks__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-5); margin-top:var(--space-6); }
.cc-pick{ background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-lg); padding:var(--space-5); box-shadow:var(--shadow-sm); display:flex; flex-direction:column; gap:var(--space-3); transition:var(--transition); }
.cc-pick:hover{ box-shadow:var(--shadow-md); transform:translateY(-2px); }
.cc-pick__label{ display:inline-flex; align-items:center; gap:var(--space-2); font-weight:700; font-size:var(--fs-small); color:var(--color-primary); }
.cc-pick .cc-art{ max-width:none; }
.cc-pick__name{ font-size:var(--fs-h5,1.1875rem); font-weight:600; }
.cc-pick__reason{ font-size:var(--fs-small); color:var(--color-text-muted); }
.cc-pick__stat{ margin:0; }
.cc-pick__stat dt{ font-size:var(--fs-caption); text-transform:uppercase; letter-spacing:.04em; color:var(--color-text-muted); }
.cc-pick__stat dd{ margin:0; font-weight:700; }
.cc-pick .cc-btn{ margin-top:auto; }

/* ---- Card list / marketplace ---- */
.cc-cardlist__grid{ list-style:none; margin:var(--space-6) 0 0; padding:0; display:grid; gap:var(--space-5); }
.cc-prodcard{ position:relative; display:grid; grid-template-columns:64px 240px 1fr; gap:var(--space-5); align-items:start; background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-lg); padding:var(--space-5); box-shadow:var(--shadow-sm); transition:var(--transition); }
.cc-prodcard:hover{ box-shadow:var(--shadow-md); }
.cc-prodcard.is-featured{ border:2px solid var(--color-accent); }
.cc-prodcard__flag{ position:absolute; top:-12px; left:var(--space-5); }
.cc-prodcard__rank{ font-family:var(--font-heading); font-weight:700; font-size:var(--fs-h4); color:var(--color-secondary); text-align:center; }
.cc-prodcard__head{ margin-bottom:var(--space-2); }
.cc-prodcard__name{ font-size:var(--fs-h4); font-weight:600; }
.cc-prodcard__issuer{ font-size:var(--fs-small); color:var(--color-text-muted); }
.cc-prodcard__stats{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--space-3); margin:var(--space-4) 0; }
.cc-prodcard__stats .cc-stat dt{ font-size:var(--fs-caption); text-transform:uppercase; letter-spacing:.04em; color:var(--color-text-muted); }
.cc-prodcard__stats .cc-stat dd{ margin:2px 0 0; font-weight:600; font-size:var(--fs-small); }
.cc-prodcard__besttag{ font-size:var(--fs-small); font-weight:600; color:var(--color-primary); background:var(--color-primary-50); display:inline-block; padding:4px 10px; border-radius:6px; margin:0 0 var(--space-3); }
/* Session mobile-QA card-density fix: "More card details" disclosure (welcome
   offer). Open by default on desktop (matches prior always-visible layout);
   collapsed by default on mobile to cut card density per Vic's simplification ask. */
.cc-prodcard__more{ margin:0 0 var(--space-3); }
.cc-prodcard__more-toggle{ cursor:pointer; font-size:var(--fs-small); font-weight:700; color:var(--color-primary); list-style:none; padding:6px 0; }
.cc-prodcard__more-toggle::-webkit-details-marker{ display:none; }
.cc-prodcard__more-toggle::before{ content:"+ "; }
.cc-prodcard__more[open] .cc-prodcard__more-toggle::before{ content:"\2212 "; }
.cc-prodcard__more .cc-prodcard__stats--secondary{ margin:var(--space-2) 0 0; }
@media (min-width:641px){
  .cc-prodcard__more-toggle{ display:none; }
  .cc-prodcard__more .cc-prodcard__stats--secondary{ display:grid !important; }
}
@media (max-width:640px){
  .cc-prodcard__more:not([open]) .cc-prodcard__stats--secondary{ display:none; }
}
.cc-prodcard__note{ display:flex; align-items:flex-start; gap:var(--space-2); font-size:var(--fs-small); color:var(--color-warning); background:var(--color-warning-bg); padding:var(--space-2) var(--space-3); border-radius:var(--radius-sm); }
.cc-prodcard__note .cc-ico{ color:var(--color-warning); margin-top:2px; }
.cc-prodcard__cta{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-3); margin-top:var(--space-4); }

/* ---- Comparison table ---- */
.cc-cardlist__tablewrap{ margin-top:var(--space-7); overflow-x:auto; border:1px solid var(--color-border); border-radius:var(--radius-lg); }
.cc-table{ width:100%; border-collapse:collapse; font-size:var(--fs-small); min-width:760px; }
.cc-table__cap{ text-align:left; padding:var(--space-4); font-size:var(--fs-small); color:var(--color-text-muted); caption-side:top; }
.cc-table thead th{ background:var(--color-primary); color:#fff; font-weight:600; text-align:left; padding:var(--space-3) var(--space-4); position:sticky; top:0; }
.cc-table tbody th,.cc-table tbody td{ padding:var(--space-3) var(--space-4); border-top:1px solid var(--color-border); vertical-align:top; text-align:left; }
.cc-table tbody tr:nth-child(even){ background:var(--color-bg-subtle); }
.cc-table tbody tr.is-featured{ background:var(--color-accent-50); }
.cc-table__card{ display:block; font-weight:700; color:var(--color-primary); }
.cc-table__issuer{ display:block; font-size:var(--fs-caption); color:var(--color-text-muted); }
.cc-table__rating{ font-weight:700; color:var(--color-accent-800); white-space:nowrap; }
.cc-cardlist__disclosure{ display:flex; align-items:flex-start; gap:var(--space-2); margin-top:var(--space-4); font-size:var(--fs-caption); color:var(--color-text-muted); }

/* ---- Filterable summary table (session 40b — /banks/ hub, reusable on any cc-cardlist block) ---- */
.cc-banktable__filters{ display:flex; flex-wrap:wrap; gap:var(--space-2); margin-top:var(--space-4); }
.cc-pill{ font:inherit; font-size:var(--fs-small); font-weight:600; padding:var(--space-2) var(--space-4); border:1px solid var(--color-border); border-radius:999px; background:var(--color-surface); color:var(--color-text-muted); cursor:pointer; transition:background .15s ease,color .15s ease,border-color .15s ease; }
.cc-pill:hover{ border-color:var(--color-primary); color:var(--color-primary); }
.cc-pill.is-active{ background:var(--color-primary); border-color:var(--color-primary); color:#fff; }
#bank-table .cc-table__card{ display:flex; align-items:center; gap:var(--space-2); font-weight:700; color:var(--color-primary); }
.cc-banktable__empty{ margin-top:var(--space-4); color:var(--color-text-muted); }

/* ---- Compare widget ---- */
.cc-compare__jsnote{ color:var(--color-text-muted); font-style:italic; }
.cc-compare__selectors{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-3); margin-top:var(--space-6); }
.cc-compare__sel select{ font-family:var(--font-body); font-size:var(--fs-small); padding:10px 14px; border:1px solid var(--color-border); border-radius:var(--radius-md); background:var(--color-surface); color:var(--color-text); min-width:240px; }
.cc-compare__sel select:disabled{ opacity:.7; cursor:not-allowed; }
.cc-compare__vs{ font-weight:700; color:var(--color-secondary); }
.cc-compare__grid{ display:grid; grid-template-columns:1fr 1fr; gap:var(--space-5); margin-top:var(--space-5); }
.cc-compare__col{ background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-lg); padding:var(--space-5); box-shadow:var(--shadow-sm); display:flex; flex-direction:column; align-items:flex-start; gap:var(--space-3); }
.cc-compare__col .cc-art{ max-width:none; }
.cc-compare__name{ font-size:var(--fs-h5,1.1875rem); font-weight:600; }
.cc-compare__col .cc-btn{ margin-top:auto; }
.cc-compare__table{ min-width:0; margin-top:var(--space-5); border:1px solid var(--color-border); border-radius:var(--radius-lg); overflow:hidden; }
.cc-compare__table th[scope=row]{ background:var(--color-bg-subtle); font-weight:600; color:var(--color-primary); width:34%; }

/* ---- Category icons ---- */
.cc-cats__grid{ list-style:none; margin:var(--space-6) 0 0; padding:0; display:grid; grid-template-columns:repeat(6,1fr); gap:var(--space-4); }
.cc-cats__link{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:var(--space-2); padding:var(--space-5) var(--space-3); background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-lg); color:var(--color-text); transition:var(--transition); height:100%; }
.cc-cats__link:hover{ border-color:var(--color-accent); box-shadow:var(--shadow-md); transform:translateY(-2px); text-decoration:none; color:var(--color-text); }
.cc-cats__ico{ display:grid; place-items:center; width:56px; height:56px; border-radius:var(--radius-full); background:var(--color-accent-50); color:var(--color-accent-800); }
.cc-cats__link:hover .cc-cats__ico{ background:var(--color-accent); color:var(--color-on-accent); }
.cc-cats__label{ font-weight:700; font-size:var(--fs-small); color:var(--color-primary); }
.cc-cats__desc{ font-size:var(--fs-caption); color:var(--color-text-muted); }

/* Current Rates variant (2026-07-10) — same grid/card shell as the category-
   icons block, swaps icon+desc for a live rate value. Financial data =
   Ink Slate, never brand colour (brand doc's Zero-Color Typography Rule). */
.cc-cats__grid--rates{ grid-template-columns:repeat(5,1fr); }
.cc-cats__rate-value{ font-family:var(--font-heading); font-weight:800; font-size:1.375rem; color:var(--color-alpine-ink,var(--color-text)); }
/* Session 63: institution logo + name on rate tiles (wherever centsable_rate_institution() resolves one) */
.cc-cats__logo{ width:28px; height:28px; object-fit:contain; border-radius:50%; background:#fff; padding:3px; box-shadow:0 0 0 1px var(--color-border); }
.cc-cats__institution{ font-size:var(--fs-small); color:var(--color-text-muted); font-weight:500; }
.cc-cats--rates .cc-cats__link{ padding:var(--space-4) var(--space-3); }

/* Bank icon-nav variant (session 40) — same .cc-cats shell, logo instead of
   icon/rate. */
.cc-cats__logo{ max-width:64px; max-height:32px; object-fit:contain; }
@media (max-width:1023px){ .cc-cats__grid--rates{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:767px){ .cc-cats__grid--rates{ grid-template-columns:repeat(2,1fr); } }

/* =========================================================================
   RESPONSIVE — tablet (768–1024) / mobile (<768) per DESIGN-SPEC §2.3
   ========================================================================= */
@media (max-width:1024px){
  .cc-picks__grid{ grid-template-columns:repeat(2,1fr); }
  .cc-cats__grid{ grid-template-columns:repeat(3,1fr); }
  .cc-prodcard{ grid-template-columns:48px 180px 1fr; }
}
@media (max-width:767px){
  .cc-picks__grid{ grid-template-columns:1fr; }
  .cc-cats__grid{ grid-template-columns:repeat(2,1fr); }
  .cc-compare__grid{ grid-template-columns:1fr; }
  .cc-prodcard{ grid-template-columns:1fr; gap:var(--space-4); }
  .cc-prodcard__rank{ text-align:left; }
  .cc-prodcard__art .cc-art{ max-width:200px; }
  .cc-prodcard__stats{ grid-template-columns:1fr; }
  .cc-aisummary__box,.cc-takeaways__box{ padding:var(--space-5); }

  /* Stacked / card-ified comparison table on mobile */
  .cc-cardlist__tablewrap{ overflow:visible; border:0; border-radius:0; }
  .cc-cardlist__tablewrap .cc-table{ min-width:0; }
  .cc-cardlist__tablewrap .cc-table thead{ display:none; }
  .cc-cardlist__tablewrap .cc-table,.cc-cardlist__tablewrap .cc-table caption,
  .cc-cardlist__tablewrap .cc-table tbody,
  .cc-cardlist__tablewrap .cc-table tr,.cc-cardlist__tablewrap .cc-table th,
  .cc-cardlist__tablewrap .cc-table td{ display:block; width:100%; }
  .cc-cardlist__tablewrap .cc-table tr{ border:1px solid var(--color-border); border-radius:var(--radius-lg); margin-bottom:var(--space-4); padding:var(--space-3); background:var(--color-surface); }
  .cc-cardlist__tablewrap .cc-table tbody td{ border:0; display:flex; justify-content:space-between; gap:var(--space-4); padding:var(--space-2) var(--space-1); }
  .cc-cardlist__tablewrap .cc-table tbody td::before{ content:attr(data-label); font-weight:700; color:var(--color-text-muted); }
  .cc-cardlist__tablewrap .cc-table tbody th{ border:0; }
}

/* =========================================================================
   TIER-2 BLOCKS (session 10) — token-based, scoped to .cc-hub
   ========================================================================= */

/* ---- Compare widget (functional) ---- */
.cc-compare__sellbl{ display:block; font-size:var(--fs-caption); font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--color-text-muted); margin-bottom:var(--space-2); }
.cc-compare__sel select{ cursor:pointer; }
.cc-compare__art{ width:100%; display:flex; }
.cc-compare__table td.is-better{ color:var(--color-success); font-weight:700; }
.cc-compare__table td.is-better::after{ content:" \2713"; }

/* ---- Accordion (shared: references + FAQ) ---- */
.cc-accordion__trigger{ display:flex; align-items:center; gap:var(--space-3); width:100%; text-align:left; background:none; border:0; padding:var(--space-4) 0; font-family:var(--font-heading); font-weight:600; font-size:var(--fs-h5); color:var(--color-primary); cursor:pointer; }
.cc-accordion__label{ flex:1; }
.cc-accordion__chev{ flex:none; color:var(--color-secondary); transition:transform .2s ease; }
.cc-accordion__trigger[aria-expanded="true"] .cc-accordion__chev{ transform:rotate(180deg); }
.cc-accordion__panel{ padding-bottom:var(--space-4); }
.cc-accordion__panel[hidden]{ display:none; }

/* ---- Table of contents (sticky desktop / collapsible mobile) ---- */
.cc-hub > .cc-toc{ background:transparent; }               /* opt out of alternating bg */
.cc-toc{ padding-block:var(--space-4); }
.cc-toc__box{ background:var(--color-surface); border:1px solid var(--color-border); border-left:4px solid var(--color-accent); border-radius:var(--radius-lg); padding:var(--space-3) var(--space-5); box-shadow:var(--shadow-sm); }
.cc-toc__title{ margin:0; font-size:var(--fs-h5); }
.cc-toc__toggle{ display:flex; align-items:center; gap:var(--space-2); width:100%; background:none; border:0; padding:var(--space-2) 0; font-family:var(--font-heading); font-weight:700; font-size:var(--fs-h5); color:var(--color-primary); cursor:pointer; text-align:left; }
.cc-toc__ico{ color:var(--color-accent-800); flex:none; }
.cc-toc__label{ flex:1; }
.cc-toc__chev{ color:var(--color-secondary); flex:none; transition:transform .2s ease; }
.cc-toc__toggle[aria-expanded="true"] .cc-toc__chev{ transform:rotate(180deg); }
.cc-toc__list{ list-style:none; margin:var(--space-3) 0 var(--space-1); padding:0; display:flex; flex-wrap:wrap; gap:var(--space-2) var(--space-4); }
.cc-toc__list a{ display:inline-block; padding:var(--space-1) var(--space-3); font-size:var(--fs-small); font-weight:600; color:var(--color-secondary); border-radius:var(--radius-full); border:1px solid transparent; }
.cc-toc__list a:hover{ color:var(--color-primary); background:var(--color-bg-subtle); text-decoration:none; }
.cc-toc__list a.is-active{ color:var(--color-primary); background:var(--color-accent-50); border-color:var(--color-accent); text-decoration:none; }
/* Sections land below the sticky bar when jumped to */
.cc-hub section[id]{ scroll-margin-top:84px; }

/* Desktop: sticky bar, chevron hidden, list always visible */
@media (min-width:768px){
  .cc-toc{ position:sticky; top:0; z-index:30; }
  .cc-toc__box{ background:var(--color-surface); box-shadow:var(--shadow-md); }
  .cc-toc__toggle{ cursor:default; }
  .cc-toc__chev{ display:none; }
  .cc-toc__title{ display:flex; align-items:center; gap:var(--space-4); }
  .cc-toc__toggle{ width:auto; flex:none; }
  .cc-toc__title .cc-toc__list{ margin:0; }
  .cc-toc__box{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-3) var(--space-5); }
}
/* Mobile: collapsed by default, toggle reveals */
@media (max-width:767px){
  .cc-toc__toggle{ justify-content:space-between; }
  .cc-toc__list{ display:none; }
  .cc-toc__box.is-open .cc-toc__list{ display:flex; flex-direction:column; gap:var(--space-1); }
  .cc-toc__box.is-open .cc-toc__list a{ display:block; }
}

/* ---- Pros / cons ---- */
.cc-proscons__grid{ display:grid; grid-template-columns:1fr 1fr; gap:var(--space-5); margin-top:var(--space-6); }
.cc-proscons__col{ border:1px solid var(--color-border); border-radius:var(--radius-lg); padding:var(--space-5) var(--space-6); background:var(--color-surface); box-shadow:var(--shadow-sm); }
.cc-proscons__col--pro{ border-top:4px solid var(--color-success); }
.cc-proscons__col--con{ border-top:4px solid var(--color-error); }
.cc-proscons__head{ display:flex; align-items:center; gap:var(--space-2); font-size:var(--fs-h4); font-weight:700; }
.cc-proscons__col--pro .cc-proscons__head .cc-ico{ color:var(--color-success); }
.cc-proscons__col--con .cc-proscons__head .cc-ico{ color:var(--color-error); }
.cc-proscons__list{ list-style:none; margin:var(--space-4) 0 0; padding:0; display:grid; gap:var(--space-3); }
.cc-proscons__list li{ position:relative; padding-left:var(--space-5); font-size:var(--fs-body); }
.cc-proscons__list li::before{ content:""; position:absolute; left:6px; top:.65em; width:7px; height:7px; border-radius:50%; }
.cc-proscons__col--pro .cc-proscons__list li::before{ background:var(--color-success); }
.cc-proscons__col--con .cc-proscons__list li::before{ background:var(--color-error); }

/* ---- Deep-dive / guide teasers ---- */
.cc-deepdive__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-5); margin-top:var(--space-6); }
.cc-teaser{ background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-lg); padding:var(--space-5); box-shadow:var(--shadow-sm); display:flex; flex-direction:column; gap:var(--space-3); transition:var(--transition); }
.cc-teaser:hover{ box-shadow:var(--shadow-md); transform:translateY(-2px); }
.cc-teaser__title{ font-size:var(--fs-h4); font-weight:600; }
.cc-teaser__body{ font-size:var(--fs-small); color:var(--color-text-muted); }
.cc-teaser__bullets{ list-style:none; margin:0; padding:0; display:grid; gap:var(--space-2); }
.cc-teaser__bullets li{ position:relative; padding-left:var(--space-5); font-size:var(--fs-small); }
.cc-teaser__bullets li::before{ content:""; position:absolute; left:4px; top:.55em; width:6px; height:6px; border-radius:50%; background:var(--color-accent); }
.cc-teaser__cta{ margin-top:auto; align-self:flex-start; padding-left:0; }

/* ---- Calculator ---- */
.cc-calc__box{ display:grid; grid-template-columns:1.4fr 1fr; gap:var(--space-6); margin-top:var(--space-6); background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-lg); padding:var(--space-6); box-shadow:var(--shadow-sm); }
.cc-calc__fields{ display:grid; grid-template-columns:1fr 1fr; gap:var(--space-4); align-content:start; }
.cc-calc__field label{ display:block; font-size:var(--fs-caption); text-transform:uppercase; letter-spacing:.04em; color:var(--color-text-muted); margin-bottom:var(--space-2); }
.cc-calc__field input{ width:100%; font-family:var(--font-body); font-size:var(--fs-body); padding:10px 12px; border:1px solid var(--color-border); border-radius:var(--radius-md); background:var(--color-bg); color:var(--color-text); }
.cc-calc__result{ background:var(--color-primary); color:#fff; border-radius:var(--radius-lg); padding:var(--space-5); display:flex; flex-direction:column; justify-content:center; gap:var(--space-3); }
.cc-calc__row{ display:flex; justify-content:space-between; align-items:baseline; gap:var(--space-4); font-size:var(--fs-small); }
.cc-calc__row strong{ font-size:var(--fs-h5); }
.cc-calc__gain{ color:var(--color-accent); }
.cc-calc__row--total{ border-top:1px solid rgba(255,255,255,.25); padding-top:var(--space-3); }
.cc-calc__row--total strong{ font-size:var(--fs-h3); }
.cc-calc__note{ margin-top:var(--space-3); font-size:var(--fs-caption); color:var(--color-text-muted); }

/* ---- Methodology ---- */
.cc-method__box{ background:var(--color-primary-50); border:1px solid var(--color-primary-100); border-radius:var(--radius-xl); padding:var(--space-7); }
.cc-method__body{ font-size:var(--fs-body-lg); margin-top:var(--space-3); max-width:var(--content-max); }
.cc-method__points{ list-style:none; margin:var(--space-5) 0 0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:var(--space-3) var(--space-5); }
.cc-method__points li{ display:flex; align-items:flex-start; gap:var(--space-2); font-size:var(--fs-small); }
.cc-method__points .cc-ico{ color:var(--color-accent-800); margin-top:2px; flex:none; }
.cc-method__links{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-4); margin-top:var(--space-6); }

/* ---- References ---- */
.cc-refs__box{ border:1px solid var(--color-border); border-radius:var(--radius-lg); padding:0 var(--space-5); background:var(--color-surface); }
.cc-refs__box .cc-accordion__trigger .cc-ico:first-child{ color:var(--color-secondary); flex:none; }
.cc-refs__count{ color:var(--color-text-muted); font-weight:400; }
.cc-refs__list{ margin:0; padding-left:var(--space-5); display:grid; gap:var(--space-4); }
.cc-refs__list li{ font-size:var(--fs-small); }
.cc-refs__meta{ display:block; font-size:var(--fs-caption); color:var(--color-text-muted); margin-top:2px; }

/* ---- FAQ ---- */
.cc-faq__list{ margin-top:var(--space-6); border-top:1px solid var(--color-border); }
.cc-faq__item{ border-bottom:1px solid var(--color-border); }
.cc-faq__q{ margin:0; font-size:var(--fs-h5); }
.cc-faq__q .cc-accordion__trigger{ font-size:var(--fs-h5); }
.cc-faq__a{ max-width:var(--content-max); }
.cc-faq__a p{ font-size:var(--fs-body); color:var(--color-text); }

/* ---- Content slider ---- */
.cc-slider__head{ display:flex; align-items:center; justify-content:space-between; gap:var(--space-4); }
.cc-slider__nav{ display:flex; gap:var(--space-2); }
.cc-slider__btn{ display:grid; place-items:center; width:44px; height:44px; border-radius:var(--radius-full); border:1px solid var(--color-border); background:var(--color-surface); color:var(--color-primary); cursor:pointer; transition:var(--transition); }
.cc-slider__btn:hover:not(:disabled){ border-color:var(--color-accent); background:var(--color-accent-50); }
.cc-slider__btn:disabled{ opacity:.4; cursor:not-allowed; }
.cc-slider__track{ list-style:none; margin:var(--space-6) 0 0; padding:var(--space-1) 0 var(--space-4); display:grid; grid-auto-flow:column; grid-auto-columns:minmax(280px,1fr); gap:var(--space-5); overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:thin; }
.cc-slider__track::-webkit-scrollbar{ height:6px; }
.cc-slider__track::-webkit-scrollbar-thumb{ background:var(--color-border); border-radius:var(--radius-full); }
.cc-slide{ scroll-snap-align:start; }
.cc-slide__link{ display:flex; flex-direction:column; gap:var(--space-2); height:100%; background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-lg); padding:var(--space-5); box-shadow:var(--shadow-sm); color:var(--color-text); transition:var(--transition); }
.cc-slide__link:hover{ box-shadow:var(--shadow-md); transform:translateY(-2px); border-color:var(--color-accent); text-decoration:none; color:var(--color-text); }
.cc-slide__tag{ align-self:flex-start; font-size:var(--fs-caption); font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--color-accent-800); background:var(--color-accent-50); padding:3px 9px; border-radius:var(--radius-full); }
.cc-slide__title{ font-family:var(--font-heading); font-weight:600; font-size:var(--fs-h5); color:var(--color-primary); line-height:var(--lh-tight); }
.cc-slide__excerpt{ font-size:var(--fs-small); color:var(--color-text-muted); }
.cc-slide__more{ margin-top:auto; font-size:var(--fs-small); font-weight:600; color:var(--color-primary); }
.cc-slider__all{ margin-top:var(--space-4); }

/* ---- Newsletter ---- */
.cc-news__box{ background:var(--color-primary); color:#fff; border-radius:var(--radius-xl); padding:var(--space-7); display:grid; grid-template-columns:1fr auto; gap:var(--space-5) var(--space-7); align-items:center; }
.cc-news__title{ font-size:var(--fs-h3); font-weight:700; color:#fff; }
.cc-news__sub{ margin-top:var(--space-3); font-size:var(--fs-body); color:rgba(255,255,255,.85); max-width:48ch; }
.cc-news__form{ display:flex; gap:var(--space-3); min-height:48px; }
.cc-news__input{ font-family:var(--font-body); font-size:var(--fs-body); padding:12px 16px; border:1px solid transparent; border-radius:var(--radius-md); min-width:240px; background:#fff; color:var(--color-text); }
.cc-news__input:focus-visible{ box-shadow:var(--focus-ring); outline:none; }
/* Mint fill + Forest text (AA 5.76:1). Hover flips to Forest fill + white
   (14.6:1) — Forest-on-Mint-700 was only 4.32:1 (sub-AA), so we darken the
   fill instead of the mint. Never white-on-mint. */
.cc-hub .cc-news__form .cc-btn--primary{ background:var(--color-cta); color:var(--color-on-cta); border-color:var(--color-cta); font-weight:700; }
.cc-hub .cc-news__form .cc-btn--primary:hover{ background:var(--color-cta-hover); color:var(--color-on-cta); border-color:var(--color-cta-hover); }
.cc-news__consent{ grid-column:1/-1; font-size:var(--fs-caption); color:rgba(255,255,255,.75); }
.cc-news__consent a{ color:#fff; text-decoration:underline; }
.cc-news__pending{ color:var(--color-accent); }
.cc-news__notice{ grid-column:1/-1; padding:12px 16px; border-radius:var(--radius-md); font-weight:600; font-size:var(--fs-body); }
.cc-news__notice--success{ background:rgba(255,255,255,.15); color:#fff; }
.cc-news__notice--error{ background:rgba(220,38,38,.25); color:#fff; }
.cc-news__consent-check{ grid-column:1/-1; display:flex; align-items:flex-start; gap:8px; margin-top:-4px; }
.cc-news__consent-check input[type="checkbox"]{ margin-top:3px; width:16px; height:16px; flex-shrink:0; accent-color:var(--color-cta); }
.cc-news__consent-check label{ font-size:var(--fs-caption); color:rgba(255,255,255,.85); line-height:1.4; }

/* ---- Tier-2 responsive ---- */
@media (max-width:1024px){
  .cc-deepdive__grid{ grid-template-columns:1fr; }
  .cc-toc__list{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:767px){
  .cc-proscons__grid{ grid-template-columns:1fr; }
  .cc-calc__box{ grid-template-columns:1fr; padding:var(--space-5); }
  .cc-calc__fields{ grid-template-columns:1fr 1fr; }
  .cc-method__box{ padding:var(--space-5); }
  .cc-method__points{ grid-template-columns:1fr; }
  .cc-toc__list{ grid-template-columns:1fr; }
  .cc-news__box{ grid-template-columns:1fr; padding:var(--space-5); }
  .cc-news__form{ flex-direction:column; }
  .cc-news__input{ min-width:0; width:100%; }
  .cc-slider__track{ grid-auto-columns:minmax(82%,82%); }
}

/* =========================================================================
   GLOBAL CHROME (Tier-3) — top nav (mega + search), mobile nav + floating tab
   bar, reusable hero, dark footer. Build-page-scoped (loaded only on
   template-cc-hub-build.php via get_header('cc')/get_footer('cc')). This IS the
   eventual sitewide chrome. Tokens per DESIGN-SPEC §9. AA-verified.
   ========================================================================= */
.cc-chrome-on{ --cc-chrome-h:64px; }
@media (max-width:767px){ .cc-chrome-on{ --cc-chrome-h:56px; } }

.cc-skip{ position:absolute; left:-9999px; top:0; z-index:1000; background:var(--color-primary); color:#fff; padding:10px 16px; border-radius:0 0 var(--radius-md) 0; }
.cc-skip:focus{ left:0; }
.cc-visually-hidden,.cc-news-form label.cc-visually-hidden{ position:absolute!important; width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap; }

/* ---- Sticky top bar (transparent over hero → translucent on scroll) ---- */
.cc-chrome{ position:sticky; top:0; z-index:100; font-family:var(--font-body); }
.cc-chrome__bar{ height:var(--cc-chrome-h); display:flex; align-items:center; position:relative; z-index:96;
  background:transparent; transition:background .25s ease, box-shadow .25s ease, backdrop-filter .25s ease; }
.cc-chrome__inner{ display:flex; align-items:center; justify-content:space-between; width:100%; }
.cc-chrome.is-scrolled .cc-chrome__bar{ background:rgba(251,251,250,.82); -webkit-backdrop-filter:saturate(1.4) blur(10px); backdrop-filter:saturate(1.4) blur(10px); box-shadow:var(--shadow-sm); }

/* Logo — light over hero, dark on scroll */
.cc-chrome__logo{ font-family:var(--font-heading); font-weight:700; font-size:1.375rem; letter-spacing:-.02em; text-decoration:none; color:#fff; text-shadow:0 1px 10px rgba(4,30,22,.45); line-height:1; }
.cc-chrome__logo span{ color:var(--color-accent); }
.cc-chrome.is-scrolled .cc-chrome__logo{ color:var(--color-primary); text-shadow:none; }

.cc-chrome__controls{ display:flex; align-items:center; gap:var(--space-3); }

/* Chrome control buttons default to light; darken on scroll */
.cc-chrome .cc-ico{ display:block; }
.cc-search__btn,.cc-burger{ color:#fff; }
.cc-chrome.is-scrolled .cc-search__btn,.cc-chrome.is-scrolled .cc-burger{ color:var(--color-primary); }

/* ---- Search (icon → expanding field) ---- */
.cc-search{ display:flex; align-items:center; position:relative; }
.cc-search__field{ width:0; opacity:0; padding:0; border:0; background:rgba(255,255,255,.95); color:var(--color-text);
  height:38px; border-radius:var(--radius-full); font-size:.9375rem; transition:width .28s ease, opacity .2s ease, padding .28s ease; pointer-events:none; }
.cc-search.is-open .cc-search__field{ width:min(46vw,260px); opacity:1; padding:0 42px 0 16px; pointer-events:auto; box-shadow:var(--shadow-sm); }
.cc-search__btn{ background:transparent; border:0; cursor:pointer; padding:8px; border-radius:var(--radius-full); display:flex; }
.cc-search.is-open .cc-search__btn{ position:absolute; right:2px; color:var(--color-primary); }
.cc-search__btn:focus-visible,.cc-burger:focus-visible{ outline:none; box-shadow:var(--focus-ring); }

/* ---- Hamburger ---- */
.cc-burger{ display:inline-flex; align-items:center; gap:8px; background:transparent; border:0; cursor:pointer; padding:8px; font:inherit; font-weight:600; }
.cc-burger__txt{ font-size:.9375rem; }
.cc-burger__box{ position:relative; width:22px; height:14px; display:inline-block; }
.cc-burger__line,.cc-burger__box::before,.cc-burger__box::after{ content:""; position:absolute; left:0; right:0; height:2px; background:currentColor; border-radius:2px; transition:transform .25s ease, opacity .2s ease, top .25s ease; }
.cc-burger__box::before{ top:0; } .cc-burger__line{ top:6px; } .cc-burger__box::after{ top:12px; }
.cc-chrome.is-menu-open .cc-burger__box::before{ top:6px; transform:rotate(45deg); }
.cc-chrome.is-menu-open .cc-burger__line{ opacity:0; }
.cc-chrome.is-menu-open .cc-burger__box::after{ top:6px; transform:rotate(-45deg); }
@media (max-width:767px){ .cc-burger__txt{ display:none; } }

/* ---- Mega menu ---- */
.cc-mega{ position:absolute; left:0; right:0; top:100%; background:var(--color-surface); border-top:1px solid var(--color-border);
  box-shadow:var(--shadow-lg); opacity:0; visibility:hidden; transform:translateY(-8px); transition:opacity .2s ease, transform .2s ease, visibility .2s; }
.cc-mega[hidden]{ display:block; } /* controlled by .is-open, not [hidden], for animation */
.cc-chrome.is-menu-open .cc-mega{ opacity:1; visibility:visible; transform:none; }
.cc-mega__inner{ padding:var(--space-6) var(--cc-pad-x); }
.cc-mega__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-5) var(--space-6); }
.cc-mega__head{ display:flex; align-items:center; justify-content:space-between; }
.cc-mega__title{ font-family:var(--font-heading); font-weight:700; font-size:1.0625rem; color:var(--color-primary); text-decoration:none; }
.cc-mega__title:hover{ color:var(--color-link-hover); }
.cc-mega__list{ list-style:none; margin:var(--space-2) 0 0; padding:0; }
.cc-mega__list li{ margin:0; } .cc-mega__list a{ display:block; padding:6px 0; color:var(--color-text-muted); text-decoration:none; font-size:.9375rem; }
.cc-mega__list a:hover{ color:var(--color-primary); }
.cc-mega__plus{ display:none; width:32px; height:32px; border:1px solid var(--color-border); border-radius:var(--radius-sm); background:transparent; position:relative; cursor:pointer; }
.cc-mega__plus::before,.cc-mega__plus::after{ content:""; position:absolute; left:50%; top:50%; width:12px; height:2px; background:var(--color-primary); transform:translate(-50%,-50%); transition:transform .2s ease; }
.cc-mega__plus::after{ transform:translate(-50%,-50%) rotate(90deg); }
.cc-mega__plus[aria-expanded="true"]::after{ transform:translate(-50%,-50%) rotate(0); }
.cc-mega__cta{ display:flex; gap:var(--space-4); align-items:center; margin-top:var(--space-6); padding-top:var(--space-5); border-top:1px solid var(--color-border); }
.cc-mega__scrim{ position:fixed; inset:0; background:rgba(4,30,22,.35); z-index:-1; opacity:0; transition:opacity .2s; }
.cc-chrome.is-menu-open .cc-mega__scrim{ opacity:1; z-index:90; }
.cc-mega__scrim[hidden]{ display:block; }

/* Chrome-context buttons (outside .cc-hub) */
.cc-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; font-family:var(--font-body); font-weight:600; font-size:var(--fs-body);
  padding:12px 24px; border-radius:var(--radius-md); border:1px solid transparent; cursor:pointer; text-decoration:none; transition:var(--transition); min-height:44px; }
.cc-btn--primary{ background:var(--color-cta); color:var(--color-on-cta); font-weight:700; font-size:1rem; }
.cc-btn--primary:hover{ background:var(--color-cta-hover); color:var(--color-on-cta); }
.cc-btn--accent{ background:var(--color-cta); color:var(--color-on-cta); font-weight:700; font-size:1rem; }
.cc-btn--accent:hover{ background:var(--color-cta-hover); color:var(--color-on-cta); }
.cc-btn--text{ background:transparent; color:var(--color-primary); border-color:transparent; padding:12px 8px; }
.cc-btn--text:hover{ color:var(--color-link-hover); text-decoration:underline; }
.cc-btn:focus-visible{ outline:none; box-shadow:var(--focus-ring); }

/* ---- Mobile mega (full-screen + accordion) ---- */
@media (max-width:900px){
  .cc-mega__grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:767px){
  .cc-mega{ position:fixed; inset:0; top:0; overflow-y:auto; transform:translateY(-100%); box-shadow:none; }
  .cc-chrome.is-menu-open .cc-mega{ transform:none; }
  .cc-mega__inner{ padding-top:calc(var(--cc-chrome-h) + var(--space-4)); min-height:100%; }
  .cc-mega__grid{ grid-template-columns:1fr; gap:0; }
  .cc-mega__col{ border-bottom:1px solid var(--color-border); padding:4px 0; }
  .cc-mega__head{ padding:8px 0; }
  .cc-mega__title{ font-size:1.125rem; padding:8px 0; }
  .cc-mega__plus{ display:block; }
  .cc-mega__list{ max-height:0; overflow:hidden; margin:0; transition:max-height .25s ease; }
  .cc-mega__col.is-open .cc-mega__list{ max-height:340px; margin-bottom:var(--space-3); }
  .cc-mega__list a{ padding:10px 0 10px var(--space-3); font-size:1rem; }
  .cc-mega__cta{ flex-direction:column; align-items:stretch; }
  .cc-mega__cta .cc-btn{ width:100%; }
}

/* ---- Floating bottom tab bar (mobile only, auto-hide on scroll) ---- */
.cc-tabbar{ display:none; }
@media (max-width:767px){
  .cc-tabbar{ position:fixed; left:12px; right:12px; bottom:12px; z-index:95; display:flex; justify-content:space-around; align-items:center;
    background:var(--color-primary); color:#fff; border-radius:var(--radius-xl); box-shadow:var(--shadow-lg); padding:6px 4px;
    transition:transform .3s ease, opacity .3s ease; padding-bottom:calc(6px + env(safe-area-inset-bottom,0px)); }
  .cc-tabbar.is-hidden{ transform:translateY(160%); opacity:0; pointer-events:none; }
  .cc-tabbar__item{ flex:1; background:transparent; border:0; color:#fff; cursor:pointer; text-decoration:none; font:inherit;
    display:flex; flex-direction:column; align-items:center; gap:3px; padding:6px 2px; font-size:.6875rem; font-weight:600; border-radius:var(--radius-md); min-height:44px; }
  .cc-tabbar__item:active{ background:rgba(255,255,255,.12); }
  .cc-tabbar__item .cc-ico{ opacity:.95; }
  .cc-tabbar__item span{ line-height:1; }
}

/* ---- Tools bottom sheet ---- */
.cc-tools{ position:fixed; inset:0; z-index:120; display:none; }
.cc-tools.is-open{ display:block; }
.cc-tools__scrim{ position:absolute; inset:0; background:rgba(4,30,22,.45); }
.cc-tools__panel{ position:absolute; left:0; right:0; bottom:0; background:var(--color-surface); border-radius:var(--radius-xl) var(--radius-xl) 0 0;
  padding:var(--space-4) var(--space-5) calc(var(--space-6) + env(safe-area-inset-bottom,0px)); box-shadow:var(--shadow-xl); max-height:80vh; overflow-y:auto;
  transform:translateY(100%); transition:transform .3s ease; }
.cc-tools.is-open .cc-tools__panel{ transform:none; }
.cc-tools__grab{ width:40px; height:4px; border-radius:2px; background:var(--color-border); margin:0 auto var(--space-3); }
.cc-tools__hd{ display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--space-3); }
.cc-tools__hd strong{ font-family:var(--font-heading); font-size:1.125rem; color:var(--color-primary); }
.cc-tools__x{ background:transparent; border:0; font-size:1.75rem; line-height:1; color:var(--color-text-muted); cursor:pointer; }
.cc-tools__group{ font-size:.75rem; text-transform:uppercase; letter-spacing:.06em; color:var(--color-secondary); margin:var(--space-3) 0 var(--space-2); font-weight:600; }
.cc-tools__list{ list-style:none; margin:0 0 var(--space-2); padding:0; }
.cc-tools__list a{ display:block; padding:12px 4px; color:var(--color-primary); text-decoration:none; border-bottom:1px solid var(--color-border); font-weight:500; }
.cc-tools__list--grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:0 var(--space-4); }

/* =========================================================================
   HERO — reusable, consistent height, gradient overlay (dark-left→clear-right),
   bottom fade to page BG, per-product scheme modifiers, left-aligned to container.
   ========================================================================= */
.cc-hero{ position:relative; margin-top:calc(-1 * var(--cc-chrome-h)); display:flex; align-items:center; /* 2026-07-11: was flex-end (bottom-aligned) -- Vic asked for vertically centred content */
  min-height:clamp(320px, 42vw, 460px); overflow:hidden; background:var(--color-primary); isolation:isolate; }
/* Placeholder "stock" image layer (swapped for --hero-img when Vic supplies art) */
.cc-hero__media{ position:absolute; inset:0; z-index:0;
  background:var(--hero-img, radial-gradient(120% 140% at 78% 15%, #2C6B54 0%, #0C4030 45%, #062F22 100%));
  background-size:cover; background-position:center; }
/* Overlay: bottom fade to page bg + dark-left→transparent-right gradient */
/* 2026-07-10: vertical fade re-tuned per Vic's spec — image reads clearly
   (only lightly tinted, ~30% dark) through the top 90% of the hero, then
   dips to the page background within just the bottom 10% band, instead of
   the previous 45%-tall fade zone. Horizontal dark-left/transparent-right
   legibility layer (2nd gradient, per-scheme via --hero-l/m/r) unchanged. */
.cc-hero__overlay{ position:absolute; inset:0; z-index:1; background:
  linear-gradient(to bottom,
    rgba(6,47,34,.3) 0%,
    rgba(6,47,34,.3) 90%,
    var(--color-bg) 100%),
  linear-gradient(100deg,
    rgba(6,47,34,var(--hero-l,.88)) 0%,
    rgba(6,47,34,var(--hero-m,.58)) 46%,
    rgba(6,47,34,var(--hero-r,.12)) 100%); }
.cc-hero__inner{ position:relative; z-index:2; width:100%; padding-top:calc(var(--cc-chrome-h) + var(--space-6)); padding-bottom:var(--space-7); }
.cc-hero__crumbs ol{ list-style:none; display:flex; flex-wrap:wrap; gap:6px; margin:0 0 var(--space-4); padding:0; font-size:.8125rem; }
.cc-hero__crumbs a{ color:rgba(255,255,255,.82); text-decoration:none; }
.cc-hero__crumbs a:hover{ color:#fff; text-decoration:underline; }
.cc-hero__crumbs [aria-current="page"]{ color:rgba(255,255,255,.7); }
.cc-hero__sep{ color:rgba(255,255,255,.5); margin-left:6px; }
.cc-hero__eyebrow{ display:inline-block; font-weight:600; font-size:.8125rem; letter-spacing:.08em; text-transform:uppercase; color:var(--color-accent); margin-bottom:var(--space-2); }
.cc-hero__h1{ font-family:var(--font-heading); font-weight:700; font-size:var(--fs-h1); line-height:1.1; color:#fff; margin:0 0 var(--space-3); max-width:100%; text-shadow:0 2px 18px rgba(4,30,22,.35); } /* 2026-07-11: was max-width:20ch, wrapped well short of the container's real margin */
.cc-hero__intro{ color:rgba(255,255,255,.94); font-size:var(--fs-body-lg); line-height:1.55; margin:0 0 var(--space-4); max-width:min(100%, 900px); text-shadow:0 1px 12px rgba(4,30,22,.35); } /* 2026-07-11: was max-width:52ch (~1-2 words per line on some copy); 900px still caps line length for readability but uses the container's actual width instead of an arbitrary character count */
.cc-hero__meta{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-3); font-size:.8125rem; color:rgba(255,255,255,.9); }
.cc-hero__badge{ display:inline-flex; align-items:center; gap:6px; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.28); padding:5px 10px; border-radius:var(--radius-full); font-weight:600; }
.cc-hero__byline{ color:rgba(255,255,255,.8); }
/* Per-product schemes: darker (cc/gic/mortgage) vs lighter (tfsa/hisa) */
.cc-hero--cc,.cc-hero--gic,.cc-hero--mortgage,.cc-hero--loans{ --hero-l:.9; --hero-m:.62; --hero-r:.16; }
.cc-hero--investing,.cc-hero--chequing{ --hero-l:.84; --hero-m:.52; --hero-r:.12; }
.cc-hero--tfsa,.cc-hero--hisa{ --hero-l:.78; --hero-m:.44; --hero-r:.08; }
.cc-hero--gic .cc-hero__media{ background:var(--hero-img, radial-gradient(120% 140% at 78% 15%, #34705A 0%, #0C4030 45%, #062F22 100%)); }
.cc-hero--tfsa .cc-hero__media,.cc-hero--hisa .cc-hero__media{ background:var(--hero-img, radial-gradient(120% 150% at 80% 10%, #4E8C72 0%, #1B5A44 50%, #0C4030 100%)); }
@media (max-width:767px){
  .cc-hero{ min-height:clamp(280px, 70vw, 380px); }
  .cc-hero__h1{ max-width:100%; }
  /* Stronger left/overall darkening on narrow screens so text stays AA over any image */
  .cc-hero__overlay{ background:
    linear-gradient(to bottom, rgba(6,47,34,.3) 0%, rgba(6,47,34,.3) 90%, var(--color-bg) 100%),
    linear-gradient(120deg, rgba(6,47,34,calc(var(--hero-l,.88) + .06)) 0%, rgba(6,47,34,calc(var(--hero-m,.58) + .12)) 60%, rgba(6,47,34,calc(var(--hero-r,.12) + .28)) 100%); }
}

/* =========================================================================
   FOOTER — darkest brand shade, white text, container-aligned, newsletter band.
   ========================================================================= */
.cc-footer{ background:var(--color-primary-700); color:#fff; font-family:var(--font-body); margin-top:var(--space-8); }
.cc-footer a{ color:#fff; }
.cc-footer__news{ background:var(--color-primary); border-bottom:1px solid rgba(255,255,255,.1); }
.cc-footer__news-inner{ display:flex; align-items:center; justify-content:space-between; gap:var(--space-6); padding-top:var(--space-6); padding-bottom:var(--space-6); }
.cc-footer__news-h{ font-family:var(--font-heading); font-weight:700; font-size:var(--fs-h3); color:#fff; margin:0 0 var(--space-2); }
.cc-footer__news-copy p{ color:rgba(255,255,255,.85); margin:0; max-width:46ch; font-size:.9375rem; }
.cc-news-form{ display:flex; gap:var(--space-2); flex-wrap:wrap; align-items:center; }
.cc-news-form__input{ min-width:240px; height:48px; border:1px solid rgba(255,255,255,.4); background:rgba(255,255,255,.96); color:var(--color-text); border-radius:var(--radius-md); padding:0 16px; font-size:.9375rem; }
.cc-news-form__input:focus-visible{ outline:none; box-shadow:var(--focus-ring); }
.cc-news-form__btn{ height:48px; }
.cc-news-form[data-inert] .cc-news-form__btn{ opacity:.85; }
.cc-news-form__note{ flex-basis:100%; font-size:.75rem; color:rgba(255,255,255,.7); }
.cc-footer__grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:var(--space-6); padding-top:var(--space-8); padding-bottom:var(--space-6); }
.cc-chrome__logo--rev{ color:#fff; text-shadow:none; font-size:1.5rem; }
.cc-chrome__logo--rev span{ color:var(--color-accent); }
.cc-footer__tag{ color:rgba(255,255,255,.72); margin:var(--space-3) 0 0; font-size:.875rem; max-width:34ch; line-height:1.55; }
.cc-footer__col h3{ font-family:var(--font-heading); font-size:.9375rem; text-transform:uppercase; letter-spacing:.06em; color:rgba(255,255,255,.6); margin:0 0 var(--space-3); }
.cc-footer__col ul{ list-style:none; margin:0; padding:0; }
.cc-footer__col li{ margin:0 0 8px; }
.cc-footer__col a{ color:rgba(255,255,255,.9); text-decoration:none; font-size:.9375rem; }
.cc-footer__col a:hover{ color:#fff; text-decoration:underline; }
.cc-footer__bottom{ border-top:1px solid rgba(255,255,255,.12); padding-top:var(--space-5); padding-bottom:var(--space-6); display:flex; flex-wrap:wrap; justify-content:space-between; gap:var(--space-3); }
.cc-footer__bottom p{ margin:0; font-size:.8125rem; color:rgba(255,255,255,.72); }
.cc-footer__fine{ max-width:64ch; }
.cc-footer__fine a{ color:var(--color-accent); text-decoration:underline; }
@media (max-width:900px){ .cc-footer__grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:767px){
  .cc-footer{ padding-bottom:84px; } /* clear the floating tab bar */
  .cc-footer__news-inner{ flex-direction:column; align-items:stretch; }
  .cc-news-form__input{ min-width:0; flex:1; }
  .cc-footer__grid{ grid-template-columns:1fr 1fr; gap:var(--space-5); }
  .cc-footer__brand{ grid-column:1 / -1; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion:reduce){
  .cc-chrome__bar,.cc-mega,.cc-search__field,.cc-tabbar,.cc-tools__panel,.cc-mega__list{ transition:none!important; }
}

/* Menu-open: force solid bar + dark controls for contrast against the white mega */
.cc-chrome.is-menu-open .cc-chrome__bar{ background:rgba(251,251,250,.94); -webkit-backdrop-filter:saturate(1.4) blur(10px); backdrop-filter:saturate(1.4) blur(10px); box-shadow:var(--shadow-sm); }
.cc-chrome.is-menu-open .cc-chrome__logo{ color:var(--color-primary); text-shadow:none; }
.cc-chrome.is-menu-open .cc-search__btn,.cc-chrome.is-menu-open .cc-burger{ color:var(--color-primary); }

/* =========================================================================
   Session 30 (2026-07-05) — "Compare side-by-side" tool REBUILT as 2 dropdown
   selectors, replacing the session-27 checkbox/MAX=3 + sticky-table/mobile-
   scroll-snap widget entirely (removed: .cc-prodcard__cmp checkbox chip,
   .cc-cmp__stickycol table, .cc-cmp__mobiletrack mini-cards). Tokens reused
   verbatim from the Alpine Crisp palette already defined above — no new
   colors introduced.
   ========================================================================= */

/* ---- New compare-tool section shell ---- */
.cc-cmp{ background:var(--color-bg-subtle); }
.cc-cmp__empty{ color:var(--color-text-muted); font-size:var(--fs-body); padding:var(--space-6) 0; text-align:center; border:1px dashed var(--color-border); border-radius:var(--radius-lg); background:var(--color-surface); margin-top:var(--space-5); }
.cc-cmp__empty[hidden]{ display:none; }

/* ---- 2 dropdown selectors ---- */
.cc-cmp__selectors{ display:flex; flex-wrap:wrap; align-items:flex-end; gap:var(--space-4); margin-top:var(--space-6); }
.cc-cmp__sel{ display:flex; flex-direction:column; gap:6px; flex:1 1 240px; min-width:220px; }
.cc-cmp__sel-label{ font-size:var(--fs-caption); font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--color-text-muted); }
.cc-cmp__sel select{ font-family:var(--font-body); font-size:var(--fs-body); padding:11px 14px; border:1px solid var(--color-border); border-radius:var(--radius-md); background:var(--color-surface); color:var(--color-text); width:100%; }
.cc-cmp__sel select:focus-visible{ outline:2px solid var(--color-cta); outline-offset:2px; }
.cc-cmp__vs{ font-weight:700; color:var(--color-text-muted); padding-bottom:11px; flex:0 0 auto; }

/* ---- 2-column comparison result ---- */
.cc-cmp__grid2{ display:grid; grid-template-columns:1fr 1fr; gap:var(--space-5); margin-top:var(--space-6); }
.cc-cmp__grid2[hidden]{ display:none; }
.cc-cmp__col2{ background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-lg); padding:var(--space-5); box-shadow:var(--shadow-sm); }
.cc-cmp__col2-name{ font-size:var(--fs-h4); font-weight:700; color:var(--color-primary); margin:0 0 2px; }
.cc-cmp__col2-issuer{ display:block; font-size:var(--fs-small); color:var(--color-text-muted); margin-bottom:var(--space-4); }
.cc-cmp__col2-stats{ margin:0 0 var(--space-4); }
.cc-cmp__col2-row{ display:flex; justify-content:space-between; align-items:flex-start; gap:var(--space-3); padding:9px 0; border-bottom:1px solid var(--color-border); }
.cc-cmp__col2-row:last-child{ border-bottom:none; }
.cc-cmp__col2-row dt{ font-size:var(--fs-small); font-weight:600; color:var(--color-text-muted); flex:0 0 40%; }
.cc-cmp__col2-row dd{ margin:0; font-size:var(--fs-small); font-weight:600; color:var(--color-text); text-align:right; flex:1; }
.cc-cmp__col2-cta{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-3); }

@media (max-width:640px){
  /* Two narrow columns get cramped on small phones — stack them instead. */
  .cc-cmp__grid2{ grid-template-columns:1fr; }
  .cc-cmp__selectors{ flex-direction:column; align-items:stretch; }
  .cc-cmp__vs{ align-self:center; padding-bottom:0; }
  /* Session 58 fix: .cc-cmp__sel's desktop rule is `flex:1 1 240px` — the
     240px is a flex-basis meant for WIDTH when .cc-cmp__selectors is a row
     (desktop). Once the rule above flips the parent to flex-direction:column
     for mobile, that same flex-basis applies to the main axis again, which
     is now HEIGHT — so every card label was rendering ~240px tall instead of
     hugging its content, producing a huge blank gap between Card 1 and Card
     2. Reset the basis to auto (content-driven height) on mobile only. */
  .cc-cmp__sel{ flex:0 1 auto; min-width:0; }
}


/* ══════════════════════════════════════════════════════════════════════════
   AUTHOR / BYLINE (A20) + GUIDE BODY COPY — session 46 (Guides build)
   New blocks for template-guide.php / template-article.php. Tokens reused
   verbatim from the existing Alpine Crisp palette — no new colors.
   ══════════════════════════════════════════════════════════════════════════ */
.cc-author--compact{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-size:var(--fs-small); color:var(--color-text-muted); margin:var(--space-3) 0 0; }
.cc-author__avatar--sm{ border-radius:50%; width:32px; height:32px; }
.cc-author--compact .cc-author__name{ font-weight:700; color:var(--color-primary); }
.cc-author__sep{ color:var(--color-border); }

.cc-author--full .cc-author__card{ display:flex; gap:var(--space-4); align-items:flex-start; background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-lg); padding:var(--space-5); }
.cc-author--full .cc-author__avatar{ border-radius:50%; width:64px; height:64px; flex-shrink:0; }
.cc-author--full .cc-author__label{ display:block; font-size:var(--fs-caption); font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--color-text-muted); }
.cc-author--full .cc-author__name{ display:block; font-size:var(--fs-h4); font-weight:700; color:var(--color-primary); }
.cc-author--full .cc-author__title{ display:block; font-size:var(--fs-small); color:var(--color-text-muted); margin-bottom:6px; }
.cc-author--full .cc-author__bio{ font-size:var(--fs-body); color:var(--color-text); margin:6px 0; }
.cc-author--full .cc-author__reviewed,
.cc-author--full .cc-author__updated{ font-size:var(--fs-small); color:var(--color-text-muted); margin:2px 0; }

/* Guide/Article body copy — the editor's actual WYSIWYG content, dropped
   into the page_sections stack via the 'body_copy' pseudo-layout. Answer-
   first H2s per CENTSABLE-COMPONENTS.md §C.2; standard prose measure. */
.cc-body-copy{ background:#fff; }
.cc-prose{ max-width:760px; margin:0 auto; font-size:var(--fs-body); line-height:1.7; color:var(--color-text); }
.cc-prose h2{ font-size:var(--fs-h3); color:var(--color-primary); margin:var(--space-6) 0 var(--space-3); scroll-margin-top:90px; }
.cc-prose h3{ font-size:var(--fs-h4); color:var(--color-primary); margin:var(--space-5) 0 var(--space-2); }
.cc-prose p{ margin:0 0 var(--space-4); }
.cc-prose ul, .cc-prose ol{ margin:0 0 var(--space-4); padding-left:1.4em; }
.cc-prose li{ margin-bottom:8px; }
.cc-prose a{ color:var(--color-primary); text-decoration:underline; text-decoration-color:var(--color-accent); text-underline-offset:2px; }
.cc-prose blockquote{ border-left:4px solid var(--color-accent); margin:var(--space-4) 0; padding:var(--space-2) var(--space-4); color:var(--color-text-muted); font-style:italic; }

/* ---- Guide-template sidebar (session 69) ----
   'body_copy' can render two ways: full-width (.cc-prose alone, its own
   760px max-width/auto-margin centers it) or, when a sidebar is present,
   split via .article-layout (site-wide grid class from style.css, same one
   single.php uses: 1fr 320px, collapses to 1 col under 767px). Inside the
   split layout .cc-prose's own max-width would fight the grid column's
   width and off-center the text, so it's neutralised here — the grid
   column becomes the only width constraint. .article-sidebar/.sidebar-widget/
   .toc-list/.compare-cta-widget/.recent-posts-list are unchanged, reused
   as-is from style.css. */
.cc-body-copy--split .article-layout .cc-prose{ max-width:none; margin:0; }

/* ---- Recently-viewed sidebar widget (Article template, session 46) ----
   Client-side/localStorage only — no server query, no CLS since it renders
   into a fixed-height placeholder that's hidden until JS populates it. */
.cc-recently-viewed{ background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-lg); padding:var(--space-4); }
.cc-recently-viewed[hidden]{ display:none; }
.cc-recently-viewed__title{ font-size:var(--fs-small); font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--color-text-muted); margin:0 0 var(--space-3); }
.cc-recently-viewed__list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--space-3); }
.cc-recently-viewed__link{ display:flex; gap:10px; align-items:center; text-decoration:none; color:var(--color-text); }
.cc-recently-viewed__link:hover .cc-recently-viewed__link-title{ color:var(--color-primary); text-decoration:underline; }
.cc-recently-viewed__thumb{ width:48px; height:48px; border-radius:var(--radius-md); object-fit:cover; flex-shrink:0; background:var(--color-bg-subtle); }
.cc-recently-viewed__link-title{ font-size:var(--fs-small); font-weight:600; line-height:1.3; }

/* ---- Ad slot placeholder (Article template, house ads only until Fintel Sept 1) ---- */
.cc-ad-slot{ background:var(--color-bg-subtle); border:1px dashed var(--color-border); border-radius:var(--radius-md); display:flex; align-items:center; justify-content:center; margin:var(--space-6) 0; }
.cc-ad-slot__label{ font-size:var(--fs-caption); color:var(--color-text-muted); text-transform:uppercase; letter-spacing:.04em; }
.cc-ad-slot__disclosure{ font-size:var(--fs-caption); color:var(--color-text-muted); text-align:center; margin-top:4px; }