:root {
  --fg: #1c1917;
  --bg: #fff7f7;
  --primary: #7f1d1d;
  --accent: #f43f5e;
  --grad-from: #7f1d1d;
  --grad-to: #f43f5e;
  --muted: #64748b;
  --border: #e5e7eb;
  --surface: #f8fafc;
  --font-heading: "Noto Serif", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--fg);
  background: var(--bg);
  /* Sticky-footer scaffold: full-height flex column so the footer
     (margin-top:auto) sinks to the viewport bottom on short pages
     instead of floating mid-page. Full-width children (header/hero/
     footer) stretch; max-width content (article / article-index /
     layout-slot--pageBody) stays centred via its own margin:auto. */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.2;
  color: var(--primary);
  margin: 1.5em 0 0.5em;
}
h1 { font-size: 2.5rem; margin-top: 0; }
h2 { font-size: 1.875rem; }
h3 { font-size: 1.375rem; }
p { margin: 0.75em 0; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; height: auto; }
blockquote { border-left: 4px solid var(--border); padding-left: 1rem; color: var(--muted); }
table { border-collapse: collapse; width: 100%; margin: 1rem 0; }
th, td { border: 1px solid var(--border); padding: 0.5rem 0.75rem; text-align: left; vertical-align: top; }
th { background: var(--surface); font-weight: 600; }
.callout { border-left: 4px solid; padding: 0.75rem 1rem; margin: 1rem 0; border-radius: 4px; }
.callout--info    { border-color: #2563eb; background: #eff6ff; }
.callout--warning { border-color: #d97706; background: #fffbeb; }
.callout--pro-tip { border-color: #10b981; background: #ecfdf5; }
.callout--note    { border-color: #6b7280; background: var(--surface); }
.pros-cons { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.pros li::marker { content: '✔  '; color: #10b981; }
.cons li::marker { content: '✗  '; color: #ef4444; }
.faq dt { font-weight: 600; margin-top: 1rem; }
.faq dd { margin-left: 0; color: var(--muted); }
.missing-operator {
  border: 1px dashed #f59e0b; background: #fffbeb;
  padding: 0.5rem 0.75rem; border-radius: 4px;
  color: #92400e; font-family: monospace; font-size: 0.85em;
}
/* Sticky header. CSS-only — position: sticky keeps the header pinned
   to the viewport while content scrolls, with a translucent backdrop
   so brand keeps visible without obscuring text below. Both the
   pre-Wave-R fallback (.site-header) and the section-block slot
   wrapper (.layout-slot--header) get the treatment so layout-builder
   and default sites look consistent. */
.site-header,
.layout-slot--header {
  position: sticky; top: 0; z-index: 50;
  /* --header-bg is set per-site (layout editor → headerBackground). When
     unset (NULL-config fallback sites) it's the translucent-white sticky
     look. */
  background: var(--header-bg, rgba(255, 255, 255, 0.92));
  -webkit-backdrop-filter: saturate(180%) blur(8px);
  backdrop-filter: saturate(180%) blur(8px);
}
.site-header {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  /* Full-bleed bar, but inset the CONTENT so the logo + nav line up with
     the centred 1100px content column below. pageBody is max-width:1100px
     centred AND has a 1.5rem inner padding, so the inset must add that
     same 1.5rem (otherwise the header content sits 1.5rem wider on each
     side than the content column). max() keeps the gutter on narrow
     viewports where the calc goes negative. */
  padding: 0.85rem max(1.5rem, calc((100% - 1100px) / 2 + 1.5rem));
  border-bottom: 1px solid var(--border);
}
.site-name {
  display: flex; align-items: center; gap: 0.75rem;
  font-family: var(--font-heading); font-weight: 700;
  font-size: 1.25rem; color: var(--header-fg, var(--primary)); text-decoration: none;
}
.site-name .logo {
  height: 40px; width: 40px; object-fit: contain; border-radius: 6px;
  /* white chip so a white-background logo stays visible on any header */
  background: #fff; padding: 3px; border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 1px 3px rgba(0,0,0,0.12);
}
.article {
  max-width: 760px; margin: 2.5rem auto 4rem; padding: 0 1.5rem;
}
/* Default index-page layout (rendered when the site has no pageBody
   slot blocks defined — operator left it bare). The slot wrapper
   .layout-slot--pageBody already enforces max-width when section
   blocks ARE configured; this rule covers the fallback path. */
.article-index {
  max-width: 880px; margin: 3rem auto 4rem; padding: 0 1.5rem;
}
.article-index > h1 {
  font-size: 2.5rem; margin: 0 0 0.4rem;
  letter-spacing: -0.01em;
}
.article-index > h1::after {
  content: ''; display: block; width: 3rem; height: 3px;
  background: var(--accent); border-radius: 2px; margin-top: 0.75rem;
}
.article-list { list-style: none; padding: 0; }
.article-card {
  display: flex; gap: 1rem; align-items: flex-start;
  padding: 1.25rem 0; border-bottom: 1px solid var(--border);
}
/* Hover = highlight only, no layout shift (a padding/transform shift made
   the card content visibly jump). Title link colour-shifts via the rule
   below; card-variant border/shadow highlight lives in EXTRA_BLOCK_CSS. */
.article-card__body { flex: 1 1 auto; min-width: 0; }
.article-card h2 { margin: 0 0 0.35rem; font-size: 1.35rem; }
.article-card h2 a { color: var(--primary); }
.article-card h2 a:hover { color: var(--accent); text-decoration: none; }
.article-card p { margin: 0; color: var(--muted); font-size: 0.95em; }
/* article-card thumbnails (shared: index list + article-list-grid block) */
.article-card__thumb {
  flex: 0 0 auto; width: 168px; aspect-ratio: 16 / 10;
  border-radius: 8px; overflow: hidden; background: var(--surface, #eee);
}
.article-card__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.article-card__thumb--ph {
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, hsl(var(--thumb-h, 220) 52% 42%), hsl(calc(var(--thumb-h, 220) + 38) 58% 52%));
}
.article-card__thumb--ph span { font-size: 2.25rem; font-weight: 800; color: rgba(255,255,255,0.9); line-height: 1; }
@media (max-width: 560px) {
  .article-card { flex-direction: column; }
  .article-card__thumb { width: 100%; }
}
.site-footer {
  padding: 1.5rem 2rem; border-top: 1px solid var(--border);
  color: var(--muted); font-size: 0.875rem; text-align: center;
  /* auto top-margin pins the footer to the bottom of the flex-column
     body on short pages; on long pages there's no free space so it sits
     right after the content. */
  margin-top: auto;
}

.article__title { font-size: 2rem; margin-top: 0; }
.operator-row { border: 1px solid var(--border); border-radius: 6px; padding: 0.75rem; margin: 0.75rem 0; }
.operator-row .logo { height: 40px; width: auto; }
/* hero-operator = a featured operator card: logo + name on the left, the
   bonus CTA pushed to the right. Sits in the centred hero/content column. */
.hero-operator { display: flex; align-items: center; flex-wrap: wrap; gap: 1rem; border: 1px solid var(--border); border-radius: 10px; padding: 1.25rem 1.5rem; margin: 0.75rem 0; background: var(--surface); }
.hero-operator .logo { height: 56px; width: auto; border-radius: 8px; }
.hero-operator .name { margin: 0; font-size: 1.5rem; }
.hero-operator .rating { color: var(--muted); font-size: 0.95rem; }
.hero-operator .cta--hero { margin-left: auto; padding: 0.6em 1.4em; font-size: 1.05em; }
.podium { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0.75rem; padding: 0; list-style: none; }
.podium__slot { border: 1px solid var(--border); border-radius: 6px; padding: 0.75rem; text-align: center; }
.podium__slot .logo { height: 40px; width: auto; }
.cta { display: inline-block; background: var(--accent); color: white; padding: 0.4em 0.9em; border-radius: 4px; text-decoration: none; font-weight: 600; }
.ai-image figcaption, .image figcaption { font-size: 0.85em; color: var(--muted); margin-top: 0.25rem; }
.lede { color: var(--muted); font-style: italic; }

/* ===== Wave R section blocks — emitted by render-section-blocks.ts =====
 * Active only on sites with sites.layout_config set. When unset, the
 * pre-Wave-R fallback chrome (.site-header / .site-name / .site-footer
 * from baseSiteCss) renders instead.
 */

/* slot wrappers */
.layout-slot { width: 100%; }
.layout-slot--header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; padding: 1rem max(1.5rem, calc((100% - 1100px) / 2 + 1.5rem)); border-bottom: 1px solid var(--border); background: var(--header-bg, var(--surface)); }
.layout-slot--footer { padding: 2rem max(1.5rem, calc((100% - 1100px) / 2 + 1.5rem)); border-top: 1px solid var(--border); background: var(--surface); color: var(--muted); margin-top: auto; }
.layout-slot--sidebar { padding: 1rem 1.5rem; background: var(--surface); border-radius: 6px; }
/* Hero slot is centred to the content column like pageBody, so card-style
   blocks (hero-operator, podium, ai-image) sit in the column instead of
   sprawling edge-to-edge. A full-bleed hero-banner escapes this via the
   negative-margin trick below. */
.layout-slot--hero { padding: 0 1.5rem; max-width: 1100px; margin: 0 auto 2rem; }
.layout-slot--pageBody { padding: 0 1.5rem; max-width: 1100px; margin: 0 auto; }

/* site-logo (4 variants) */
.site-logo { display: inline-flex; align-items: center; gap: 0.75rem; text-decoration: none; font-family: var(--font-heading); font-weight: 700; font-size: 1.25rem; color: var(--header-fg, var(--primary)); }
/* White chip behind the logo so a logo generated on a white background
   (the common case) stays visible on ANY header colour — framed on light
   headers, a clean badge on dark/branded ones. */
.site-logo__img { height: 40px; width: 40px; object-fit: contain; border-radius: 6px; background: #fff; padding: 3px; border: 1px solid rgba(0,0,0,0.08); box-shadow: 0 1px 3px rgba(0,0,0,0.12); }
.site-logo--logo-only .site-logo__name { display: none; }
.site-logo--logo-only .site-logo__img { height: 48px; width: 48px; }
.site-logo--name-only .site-logo__img { display: none; }
.site-logo--name-below { flex-direction: column; align-items: flex-start; gap: 0.25rem; }
.site-logo--name-below .site-logo__name { font-size: 1rem; }

/* site-nav */
.site-nav ul { display: flex; gap: 1.25rem; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.site-nav a { color: var(--header-fg, var(--fg)); text-decoration: none; font-weight: 500; padding: 0.25rem 0; border-bottom: 2px solid transparent; transition: border-color 120ms ease; }
.site-nav a:hover { border-bottom-color: var(--accent); text-decoration: none; }

/* hero-banner */
/* Full-bleed: escape the centred hero slot so the banner image spans the
   whole viewport width (the deliberate full-width hero look). */
.hero-banner { position: relative; padding: 4rem 2rem; text-align: center; color: var(--fg); overflow: hidden; width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
.hero-banner--bg-primary { background: var(--primary); color: white; }
.hero-banner--bg-accent { background: var(--accent); color: white; }
.hero-banner--bg-primary .hero-banner__title,
.hero-banner--bg-accent .hero-banner__title { color: white; }
.hero-banner--bg-gradient { background: linear-gradient(135deg, var(--grad-from), var(--grad-to)); color: white; }
.hero-banner--bg-gradient .hero-banner__title { color: white; }
.hero-banner--bg-hero-image { color: white; }
.hero-banner--bg-hero-image::before { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,0.45); pointer-events: none; }
.hero-banner--bg-hero-image .hero-banner__inner { position: relative; z-index: 1; }
.hero-banner--bg-hero-image .hero-banner__title { color: white; }
/* hero image used as the default background (any mode except solid). The
   overlay keeps text legible over an arbitrary photo; gradient mode tints
   the photo with the brand gradient instead of flat black. */
.hero-banner--has-image { color: white; }
.hero-banner--has-image::before { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,0.45); pointer-events: none; }
.hero-banner--has-image .hero-banner__inner { position: relative; z-index: 1; }
.hero-banner--has-image .hero-banner__title { color: white; }
.hero-banner--bg-gradient.hero-banner--has-image::before { background: linear-gradient(135deg, color-mix(in srgb, var(--grad-from) 65%, transparent), color-mix(in srgb, var(--grad-to) 55%, transparent)); }
.hero-banner__inner { max-width: 760px; margin: 0 auto; }
.hero-banner__title { font-size: 2.75rem; margin: 0 0 0.5rem; }
.hero-banner__sub { font-size: 1.125rem; margin: 0 0 1.5rem; opacity: 0.9; }
.hero-banner__cta { display: inline-block; background: var(--accent); color: white; padding: 0.65rem 1.5rem; border-radius: 6px; font-weight: 600; text-decoration: none; transition: transform 120ms ease; }
.hero-banner__cta:hover { transform: translateY(-1px); text-decoration: none; }
.hero-banner--bg-gradient .hero-banner__cta,
.hero-banner--bg-hero-image .hero-banner__cta,
.hero-banner--has-image .hero-banner__cta,
.hero-banner--bg-primary .hero-banner__cta,
.hero-banner--bg-accent .hero-banner__cta { background: white; color: var(--primary); }

/* article-list-grid (multiple variants — grid / list / cards) */
/* variants match the schema enum: compact | card | full (default card).
   'card' = grid of bordered cards (thumb on top); 'compact' = tight list
   (thumb left, base row); 'full' = spacious stacked (thumb on top). */
.article-list--card { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.5rem; padding: 0; }
.article-list--compact, .article-list--full { padding: 0; }
.article-card--card { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 1.25rem; transition: border-color 140ms ease, box-shadow 140ms ease; flex-direction: column; align-items: stretch; }
.article-card--card:hover { border-color: var(--accent); box-shadow: 0 4px 16px rgba(0,0,0,0.10); }
.article-card--card .article-card__thumb { width: 100%; }
.article-card--compact { padding: 0.75rem 0; border-bottom: 1px solid var(--border); }
.article-card--compact .article-card__thumb { width: 96px; aspect-ratio: 1 / 1; }
.article-card--full { padding: 1.5rem 0; border-bottom: 1px solid var(--border); flex-direction: column; align-items: stretch; }
.article-card--full .article-card__thumb { width: 100%; aspect-ratio: 16 / 9; }
.article-card--card h3, .article-card--compact h3, .article-card--full h3 { margin: 0 0 0.4rem; font-size: 1.125rem; }
.article-card--card h3 a, .article-card--compact h3 a, .article-card--full h3 a { color: var(--primary); }
.article-card--card p, .article-card--compact p, .article-card--full p { margin: 0; font-size: 0.9rem; color: var(--muted); }

/* featured-article — bigger spotlight card */
.featured-article { background: linear-gradient(135deg, var(--surface) 0%, var(--bg) 100%); border: 1px solid var(--border); border-radius: 12px; padding: 2rem; margin: 1.5rem 0; }
.featured-article h2 { margin: 0 0 0.5rem; font-size: 1.75rem; }
.featured-article h2 a { color: var(--primary); }
.featured-article p { margin: 0; font-size: 1.05rem; color: var(--fg); }

/* newsletter-cta */
.newsletter-cta { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 1.5rem; margin: 1.5rem 0; text-align: center; }
.newsletter-cta h3 { margin: 0 0 1rem; }
.newsletter-cta__form { display: flex; gap: 0.5rem; max-width: 460px; margin: 0 auto; flex-wrap: wrap; justify-content: center; }
.newsletter-cta__form input[type="email"] { flex: 1 1 220px; padding: 0.65rem 0.9rem; border: 1px solid var(--border); border-radius: 6px; font: inherit; }
.newsletter-cta__form button { background: var(--accent); color: white; border: none; padding: 0.65rem 1.25rem; border-radius: 6px; font-weight: 600; cursor: pointer; }
.newsletter-cta__form button:hover { filter: brightness(1.05); }

/* author-bio */
.author-bio { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: start; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 1.25rem; margin: 1.5rem 0; }
.author-bio__avatar { grid-row: span 3; width: 64px; height: 64px; border-radius: 50%; object-fit: cover; }
.author-bio h4 { margin: 0; font-size: 1.05rem; }
.author-bio p { margin: 0.25rem 0 0.5rem; font-size: 0.95rem; color: var(--muted); }
.author-bio__socials { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.author-bio__social { font-size: 0.85rem; padding: 0.2rem 0.5rem; border-radius: 4px; background: var(--bg); border: 1px solid var(--border); color: var(--fg); text-transform: capitalize; text-decoration: none; }
.author-bio__social:hover { background: var(--accent); color: white; border-color: var(--accent); text-decoration: none; }

/* footer-links */
.footer-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 2rem; max-width: 1100px; margin: 0 auto; }
.footer-links__col h5 { margin: 0 0 0.75rem; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--fg); }
.footer-links__col ul { list-style: none; padding: 0; margin: 0; }
.footer-links__col li { margin: 0.4rem 0; }
.footer-links__col a { color: var(--muted); font-size: 0.9rem; }
.footer-links__col a:hover { color: var(--accent); }

/* footer-disclaimer */
.footer-disclaimer { max-width: 1100px; margin: 1.5rem auto 0; padding-top: 1.5rem; border-top: 1px solid var(--border); font-size: 0.825rem; color: var(--muted); text-align: center; }
.footer-disclaimer strong { color: var(--fg); }

/* rich fallback footer (sites with no configured footer slot) */
.site-footer--rich { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; }
.site-footer--rich .site-footer__name { font-weight: 700; color: var(--fg); font-size: 1.05rem; }
.site-footer--rich .site-footer__tagline { margin: 0.25rem 0 0; color: var(--muted); font-size: 0.85rem; }
.site-footer--rich .footer-disclaimer { width: 100%; }
.site-footer--rich .site-footer__legal { margin: 1rem 0 0; font-size: 0.8rem; color: var(--muted); }

/* bonus-badges */
.bonus-badges { display: flex; flex-wrap: wrap; gap: 1rem; list-style: none; padding: 0; margin: 1.5rem 0; }
.bonus-badge { display: flex; flex-direction: column; align-items: center; gap: 0.15rem; min-width: 120px; padding: 1rem 1.25rem; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.bonus-badge__icon { font-size: 1.5rem; line-height: 1; }
.bonus-badge__value { font-family: var(--font-heading); font-weight: 800; font-size: 1.4rem; color: var(--primary); }
.bonus-badge__label { font-size: 0.8rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }

/* offer-hero */
.offer-hero { border: 1px solid var(--border); border-radius: 16px; padding: 2.5rem 2rem; margin: 1.5rem 0; text-align: center; background: linear-gradient(135deg, var(--surface) 0%, var(--bg) 100%); }
.offer-hero__inner { max-width: 640px; margin: 0 auto; }
.offer-hero__eyebrow { text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.8rem; color: var(--accent); margin: 0 0 0.5rem; font-weight: 700; }
.offer-hero__headline { font-size: 2.5rem; margin: 0 0 0.75rem; color: var(--primary); }
.offer-hero__sub { font-size: 1.1rem; color: var(--muted); margin: 0 0 1.5rem; }
.offer-hero__cta { display: inline-block; background: var(--accent); color: #fff; padding: 0.8rem 2rem; border-radius: 8px; font-weight: 700; font-size: 1.05rem; text-decoration: none; }
.offer-hero__cta:hover { filter: brightness(1.05); text-decoration: none; }
.offer-hero__fine { font-size: 0.75rem; color: var(--muted); margin: 1rem 0 0; }

/* operator-tiles */
.operator-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 1rem; margin: 1.5rem 0; }
.operator-tile { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; padding: 1.25rem; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); text-decoration: none; transition: border-color 140ms ease, box-shadow 140ms ease; }
.operator-tile:hover { border-color: var(--accent); box-shadow: 0 4px 16px rgba(0,0,0,0.10); text-decoration: none; }
.operator-tile__logo { height: 48px; width: auto; max-width: 100%; object-fit: contain; }
.operator-tile__bonus { font-size: 0.8rem; color: var(--muted); text-align: center; }

/* operator-placeholder — stub for Phase 3.2 operator binding */
.operator-placeholder { padding: 1rem; border: 1px dashed var(--muted); border-radius: 6px; color: var(--muted); font-style: italic; text-align: center; margin: 1rem 0; }

/* mobile */
@media (max-width: 640px) {
  .layout-slot--header { padding: 0.75rem 1rem; }
  .layout-slot--pageBody { padding: 0 1rem; }
  .layout-slot--hero { padding: 0 1rem; }
  .hero-operator { flex-direction: column; align-items: flex-start; }
  .hero-operator .cta--hero { margin-left: 0; }
  .hero-banner { padding: 2.5rem 1.25rem; }
  .hero-banner__title { font-size: 1.875rem; }
  .author-bio { grid-template-columns: 1fr; text-align: center; }
  .author-bio__avatar { grid-row: auto; margin: 0 auto; }
}