/* Public site. Mobile first. Brand colours come from Settings via --brand / --accent. */
:root {
  --brand: #14213d;
  --accent: #c8102e;
  --ink: #16181d;
  --ink-2: #3d424d;
  --muted: #5f6570;
  --line: #e2e0da;
  --paper: #ffffff;
  --paper-2: #f6f5f1;
  --focus: #1a5fd0;
  --serif: "Iowan Old Style", "Charter", "Georgia", "Cambria", "Times New Roman", serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --wrap: 1200px;
  --gutter: 16px;
  --radius: 6px;
  --measure: 68ch;
}
@media (min-width: 768px) { :root { --gutter: 24px; } }
@media (min-width: 1024px) { :root { --gutter: 32px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 17px/1.6 var(--sans); overflow-x: hidden;
}
[hidden] { display: none !important; }
img { max-width: 100%; height: auto; display: block; }
picture { display: contents; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--accent-link, var(--accent)); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 2px; }
h1, h2, h3, h4 { font-family: var(--serif); line-height: 1.2; margin: 0 0 .5em; font-weight: 700; letter-spacing: -.01em; overflow-wrap: break-word; }
p { margin: 0 0 1em; }
button, input, select, textarea { font: inherit; }
@font-face { font-family: "Archivo Black"; src: url("../fonts/archivo-black-latin.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* Site themes (Settings > Branding) */
body.theme-dark {
  --ink: #eceef2; --ink-2: #c3c7cf; --muted: #9aa0ab; --line: #2a2e36; --paper: #0d0f13; --paper-2: #171a20; --focus: #7aa7ff;
  color-scheme: dark;
}
body.theme-dark .site-header, body.theme-dark .search-form input { background: var(--paper); }
body.theme-dark .search-form input, body.theme-dark .search-big input, body.theme-dark .newsletter-row input, body.theme-dark .pnl input[type=number] { background: var(--paper-2); color: var(--ink); border-color: var(--line); }
body.theme-dark .brand { color: #fff; }
body.theme-dark .site-footer { background: #07080b; border-top: 1px solid var(--line); }
body.theme-dark .pnl, body.theme-dark .pnl-kelly, body.theme-dark .pnl-side button { background: var(--paper-2); }
body.theme-dark .pnl-results { background: #1d2129; }
body.theme-dark .preview-bar { background: #3a3000; color: #ffe9a3; border-color: #5c4c00; }
body.theme-dark .prose th { background: var(--paper-2); }
body.headings-sans { --serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
body.headings-display h1, body.headings-display h2, body.headings-display .card-title, body.headings-display .brand-name, body.headings-display .section-title {
  font-family: "Archivo Black", "Arial Black", "Helvetica Neue", Impact, system-ui, sans-serif; font-weight: 400; letter-spacing: -.005em;
}
body.headings-display .prose { font-family: var(--sans); }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* Appearance control (C6, partials/appearance.php): phones in the open menu, wide screens in the footer */
.appearance { margin-block: 16px; }
.appearance-title { margin: 0 0 8px; font-size: .8125rem; font-weight: 600; }
.appearance-buttons { display: flex; flex-wrap: wrap; }
.appearance-buttons button { min-height: 44px; padding: 0 14px; font: inherit; font-size: .875rem; border: 1px solid currentColor; background: transparent; color: inherit; cursor: pointer; }
.appearance-buttons button + button { border-inline-start: 0; }
.appearance-buttons button:first-child { border-start-start-radius: var(--radius); border-end-start-radius: var(--radius); }
.appearance-buttons button:last-child { border-start-end-radius: var(--radius); border-end-end-radius: var(--radius); }
.appearance-buttons button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.appearance-buttons button:focus-visible { outline: 3px solid var(--focus, var(--accent)); outline-offset: 2px; }
@media (min-width: 768px) { .appearance--menu { display: none; } }
@media (max-width: 767px) { body:has(.primary-nav .appearance) .appearance--footer { display: none; } }
.skip { position: absolute; left: 8px; top: -60px; background: var(--brand); color: #fff; padding: 10px 14px; z-index: 100; border-radius: var(--radius); }
.skip:focus { top: 8px; color: #fff; }
.muted { color: var(--muted); }
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.wrap-wide { max-width: 1100px; margin-inline: auto; }
.wrap-full { width: 100%; }
main { display: block; min-height: 50vh; outline: none; }
.preview-bar { background: #fff3c4; color: #5a4300; text-align: center; padding: 10px var(--gutter); font-size: .9rem; font-weight: 600; border-bottom: 1px solid #e8d48a; }

/* Header */
.site-header { border-bottom: 1px solid var(--line); background: var(--paper); }
.header-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px; }
.brand { text-decoration: none; color: var(--brand); display: flex; align-items: center; min-width: 0; }
.brand-name { font-family: var(--serif); font-weight: 800; font-size: 1.55rem; letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 0; }
.brand-logo { max-height: 40px; max-width: 100%; width: auto; height: auto; }
.header-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
/* Other languages in the header (setting header_languages) */
.header-langs { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; }
.header-langs a { display: inline-flex; align-items: center; min-height: 32px; padding: 0 10px; border: 1px solid var(--line); border-radius: 999px; color: inherit; font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-decoration: none; }
.header-langs a:hover { border-color: var(--accent); }
/* Optional small line under the text wordmark (setting header_tagline) and titled footer columns (setting footer_style = columns) */
.brand-tagline { display: block; font-size: .6875rem; font-weight: 400; letter-spacing: .08em; opacity: .75; }
.footer-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 24px 32px; }
.footer-cols ul { list-style: none; margin: 0; padding: 0; }
.footer-cols a { display: inline-flex; align-items: center; min-height: 32px; }
.footer-title { margin: 0 0 8px; font-weight: 700; }
.search-form { display: none; }
.search-form input { border: 1px solid var(--line); border-radius: 999px; padding: 8px 14px; width: 180px; background: var(--paper-2); }
.search-form button, .menu-toggle {
  background: none; border: 1px solid var(--line); border-radius: 999px; min-height: 44px; min-width: 44px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; color: var(--ink); padding: 0 12px;
}
.search-form { gap: 6px; align-items: center; }
@media (min-width: 640px) { .search-form { display: flex; } }
.menu-toggle-bars, .menu-toggle-bars::before, .menu-toggle-bars::after { display: block; width: 18px; height: 2px; background: currentColor; position: relative; content: ""; }
.menu-toggle-bars::before { position: absolute; top: -6px; } .menu-toggle-bars::after { position: absolute; top: 6px; }
.primary-nav { border-top: 1px solid var(--line); }
.nav-list { list-style: none; margin-block: 0; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.nav-list::-webkit-scrollbar { display: none; }
.nav-list > li { position: relative; flex-shrink: 0; }
.nav-list a { display: block; padding: 12px 10px; text-decoration: none; font-weight: 600; font-size: .95rem; white-space: nowrap; }
.sub-nav { display: none; list-style: none; margin: 0; padding: 0; }
/* C19: on phones the header stays at the top, compact (56px + the safe area), and never covers a jump target */
@media (max-width: 767px) {
  html { scroll-padding-top: 64px; }
  .site-header { position: sticky; top: 0; z-index: 50; background: var(--paper); border-bottom: 1px solid var(--line); }
  .header-top { min-height: calc(56px + env(safe-area-inset-top)); padding-top: env(safe-area-inset-top); }
  .menu-toggle { min-width: 44px; min-height: 44px; }
  .js .primary-nav.is-open { max-height: calc(100dvh - 56px - env(safe-area-inset-top)); overflow-y: auto; overscroll-behavior: contain; }
}
/* With JS on small screens the nav becomes a disclosure panel. */
.js .menu-toggle { display: inline-flex; }
@media (max-width: 767px) {
  .js .primary-nav { display: none; }
  .js .primary-nav.is-open { display: block; }
  .js .nav-list { flex-direction: column; overflow: visible; padding-block: 8px; }
  .js .nav-list a { padding: 12px 0; border-bottom: 1px solid var(--line); }
  .js .sub-nav { display: block; padding-left: 16px; }
  .js .sub-nav a { font-weight: 400; }
}
@media (min-width: 768px) {
  .menu-toggle, .js .menu-toggle { display: none; }
  .nav-list { overflow: visible; }
  .has-children:hover > .sub-nav, .has-children:focus-within > .sub-nav {
    display: block; position: absolute; left: 0; top: 100%; background: var(--paper); border: 1px solid var(--line);
    min-width: 200px; z-index: 20; box-shadow: 0 8px 24px rgba(0,0,0,.08); border-radius: var(--radius);
  }
  .sub-nav a { font-weight: 400; padding: 10px 14px; }
}

/* Cards */
.kicker { display: inline-block; text-transform: uppercase; letter-spacing: .06em; font-size: .75rem; font-weight: 700; color: var(--accent-link, var(--accent)); text-decoration: none; margin-bottom: 6px; }
.card { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.card-media { display: block; overflow: hidden; border-radius: var(--radius); background: var(--paper-2); aspect-ratio: 16 / 9; }
.card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.card:hover .card-media img { transform: scale(1.02); }
.card-title { font-size: 1.2rem; margin: 0 0 6px; }
.card-title a { text-decoration: none; }
.card-title a:hover { text-decoration: underline; color: inherit; }
.card-excerpt { color: var(--ink-2); font-size: .95rem; margin-bottom: 6px; }
.meta { color: var(--muted); font-size: .82rem; margin: 0; display: flex; flex-wrap: wrap; gap: 4px 10px; }
.card--lead .card-title { font-size: clamp(1.7rem, 5vw, 2.6rem); }
.card--lead .card-excerpt { font-size: 1.08rem; }
.card--compact .card-title { font-size: 1.05rem; }
.card--list { flex-direction: row; gap: 14px; padding-block: 18px; border-bottom: 1px solid var(--line); }
.card--list .card-media { flex: 0 0 33%; max-width: 240px; aspect-ratio: 4 / 3; }
.card--list .card-body { flex: 1; min-width: 0; }
.card--list .card-excerpt { display: none; }
@media (min-width: 640px) { .card--list .card-excerpt { display: block; } .card--list .card-title { font-size: 1.35rem; } }

/* Home */
.home-top { display: grid; gap: 28px; padding-block: 24px; }
.home-featured { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
@media (min-width: 640px) { .home-featured { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) {
  .home-top { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); align-items: start; padding-block: 32px; }
  .home-featured { grid-template-columns: 1fr; gap: 20px; }
  .home-featured .card { flex-direction: row; gap: 14px; }
  .home-featured .card-media { flex: 0 0 42%; aspect-ratio: 4 / 3; }
  .home-featured .card-excerpt { display: none; }
  .home-featured .card-title { font-size: 1.1rem; }
}
.home-intro { padding-block: 24px 8px; }
.home-intro-body { max-width: 820px; }
.section { padding-block: 28px; border-top: 1px solid var(--line); }
.section-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.section-title { font-size: 1.35rem; margin-bottom: 18px; padding-top: 4px; border-top: 3px solid var(--brand); display: inline-block; }
.more { font-weight: 600; font-size: .9rem; text-decoration: none; white-space: nowrap; min-height: 44px; display: inline-flex; align-items: center; }
.grid { display: grid; gap: 24px; }
@media (min-width: 640px) { .grid-4, .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.empty-state { padding: 48px 0; color: var(--muted); }

/* Article */
.article-header { max-width: 820px; padding-top: 20px; }
.breadcrumbs ol { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; font-size: .82rem; color: var(--muted); }
.breadcrumbs li + li::before { content: "/"; margin-right: 4px; color: var(--line); }
.breadcrumbs a { text-decoration: none; }
.breadcrumbs li { min-width: 0; display: flex; } /* the "/" stays with its item (Brand 19:07) */
.breadcrumbs [aria-current] { display: inline-block; max-width: min(40ch, 100%); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }
.article-title { font-size: clamp(1.9rem, 6vw, 3rem); margin-bottom: 12px; }
.standfirst { font-size: clamp(1.1rem, 2.6vw, 1.3rem); color: var(--ink-2); line-height: 1.5; font-family: var(--serif); }
.byline { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font-size: .9rem; padding-block: 12px 18px; border-bottom: 1px solid var(--line); }
.byline a { font-weight: 700; }
.dates { color: var(--muted); }
.avatar { border-radius: 50%; object-fit: cover; width: 44px; height: 44px; }
.avatar-lg { width: 72px; height: 72px; } .avatar-xl { width: 96px; height: 96px; }
.article-hero { margin: 20px auto 8px; }
.article-hero img { width: 100%; }
.article-hero figcaption { padding: 8px var(--gutter) 0; font-size: .85rem; color: var(--muted); max-width: 820px; }
@media (min-width: 1100px) { .article-hero figcaption { padding-inline: 0; } .article-hero img { border-radius: var(--radius); } }
.credit { font-style: italic; }
.article-layout { max-width: 820px; padding-block: 16px 40px; }
.article-main { min-width: 0; }
.article-layout.has-sidebar { max-width: var(--wrap); }
@media (min-width: 1100px) {
  .article-header.has-sidebar { max-width: var(--wrap); }
  .article-header.has-sidebar > * { max-width: 760px; }
}
@media (min-width: 1100px) {
  .article-layout.has-sidebar { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 48px; align-items: start; }
  .article-layout.has-sidebar .article-main { max-width: 760px; }
  .article-sidebar { position: sticky; top: 24px; }
}
.article-sidebar { display: grid; gap: 18px; margin-top: 32px; font-family: var(--sans); }
@media (min-width: 1100px) { .article-sidebar { margin-top: 0; } }
.side-box { border: 1px solid var(--line); border-radius: 10px; padding: 16px; background: var(--paper); }
.side-title { font-size: 1rem; margin: 0 0 10px; letter-spacing: .01em; }
.side-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: .92rem; }
.side-list a { text-decoration: none; }
.side-list a:hover { text-decoration: underline; }
.promo-box { border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); }
.promo-text { font-size: .9rem; color: var(--ink-2); margin-bottom: 10px; }
.promo-text p { margin: 0 0 .5em; }
.promo-text a, .promo-disclaimer a { color: var(--accent-link, var(--accent)); }
.promo-image { display: block; border-radius: 8px; overflow: hidden; }
.promo-image img { width: 100%; }
.promo-button { display: flex; align-items: center; justify-content: center; min-height: 46px; margin-top: 10px; border-radius: var(--radius); background: var(--button, var(--accent)); color: var(--button-ink, #fff); font-weight: 700; text-decoration: none; }
.promo-button:hover { color: #fff; filter: brightness(1.08); }
.promo-disclaimer { font-size: .72rem; line-height: 1.45; color: var(--muted); margin-top: 10px; }
.promo-disclaimer p { margin: 0 0 .4em; }
.page-full { padding-block: 16px 40px; }

/* Rich text */
.prose { font-family: var(--serif); font-size: 1.12rem; line-height: 1.7; max-width: var(--measure); overflow-wrap: break-word; }
.page-full .prose { max-width: none; }
.prose h2 { font-size: 1.6rem; margin-top: 1.6em; }
.prose h3 { font-size: 1.3rem; margin-top: 1.4em; }
.prose a { color: var(--accent-link, var(--accent)); }
.prose a.button { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 10px 20px; margin: .2em 0; border-radius: var(--radius); background: var(--button, var(--accent)); color: var(--button-ink, #fff); font-family: var(--sans); font-weight: 700; font-size: 1rem; text-decoration: none; line-height: 1.3; }
.prose a.button:hover { filter: brightness(1.08); color: var(--button-ink, #fff); }
/* Framed boxes, grids of boxes, small caps labels and promo codes (kept from imported layouts; editors can use them too). */
.prose .box, .prose .market-box { border: 1px solid var(--line); border-radius: calc(var(--radius) * 2); background: var(--paper-2); padding: 16px 18px; margin: 1.2em 0; }
.prose .box > :first-child, .prose .market-box > :first-child { margin-top: 0; }
.prose .box > :last-child { margin-bottom: 0; }
.prose .cards { display: grid; gap: 12px; margin: 1.2em 0; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.prose .cards > .box { margin: 0; }
.prose .cards > .box p { font-size: .95rem; }
.prose .label { font-family: var(--sans); font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-link, var(--accent)); margin: 0 0 .4em; }
.prose code.promo-code { display: inline-block; font-size: .95rem; font-weight: 700; letter-spacing: .08em; padding: 4px 10px; border: 1px dashed var(--accent); border-radius: var(--radius); background: transparent; color: var(--accent); }
.prose img { border-radius: var(--radius); margin-block: 1em; }
.prose figure { margin: 1.5em 0; }
.prose figcaption { font-family: var(--sans); font-size: .85rem; color: var(--muted); margin-top: 6px; }
.prose blockquote { margin: 1.5em 0; padding: .2em 0 .2em 1.1em; border-left: 4px solid var(--accent); font-size: 1.2rem; color: var(--ink-2); }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li { margin-bottom: .4em; }
.prose table { position: relative; display: block; width: 100%; max-width: 100%; overflow-x: auto; border-collapse: collapse; font-family: var(--sans); font-size: .92rem; margin: 1.5em 0; }
.prose th, .prose td { border: 1px solid var(--line); padding: 8px 10px; text-align: left; vertical-align: top; }
.prose th { background: var(--paper-2); }
.prose pre { overflow-x: auto; background: var(--paper-2); padding: 12px; border-radius: var(--radius); font-size: .9rem; }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 2em 0; }
.prose figure.align-left, .prose figure.align-right { max-width: 50%; }
@media (min-width: 768px) {
  .prose figure.align-left { float: left; margin: .3em 1.4em 1em 0; }
  .prose figure.align-right { float: right; margin: .3em 0 1em 1.4em; }
}

/* FAQ */
.faq { font-family: var(--sans); margin-top: 2.5em; clear: both; }
.faq h2 { font-family: var(--serif); }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; font-weight: 700; padding: 14px 0; min-height: 44px; list-style-position: outside; }
.faq-answer { padding-bottom: 14px; color: var(--ink-2); font-size: 1rem; }

/* Article footer */
.article-footer { max-width: var(--measure); margin-top: 28px; display: grid; gap: 22px; }
.tags, .chips, .inline-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.tags a, .chips a { display: inline-flex; align-items: center; min-height: 36px; padding: 4px 12px; border: 1px solid var(--line); border-radius: 999px; font-size: .85rem; text-decoration: none; }
.share { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: .9rem; }
.share-label { font-weight: 700; margin-right: 4px; }
.share a, .share button { min-height: 44px; display: inline-flex; align-items: center; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; background: none; text-decoration: none; cursor: pointer; color: inherit; }
.author-box { display: flex; gap: 14px; padding: 18px; background: var(--paper-2); border-radius: var(--radius); font-size: .95rem; }
.author-name { font-weight: 700; margin-bottom: 4px; }
.related { background: var(--paper); }
.related-more { margin: 16px 0 0; } .related-more a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
.related-also-label { margin: 16px 0 4px; color: var(--ink-2); font-size: .8125rem; }
/* links beyond the Keep reading cards (Brand 25 Oct): 44px rows on phones, one line with dot separators on wide screens */
.related-also { margin: 0; padding: 0; list-style: none; font-size: .9375rem; } .related-also a { color: var(--ink); text-decoration: underline; }
@media (max-width: 767px) { .related-also li { display: block; } .related-also a { display: flex; align-items: center; min-height: 44px; } }
@media (min-width: 768px) { .related-also li { display: inline; } .related-also li + li::before { content: "·"; content: "·" / ""; margin: 0 .5em; color: var(--ink-2); } }
.child-pages { margin-top: 32px; padding: 18px; background: var(--paper-2); border-radius: var(--radius); }
.child-pages h2 { font-size: 1.1rem; }

/* Archives */
.archive { padding-block: 20px 40px; }
.archive-header { padding-bottom: 12px; border-bottom: 3px solid var(--brand); margin-bottom: 8px; }
.archive-header h1 { font-size: clamp(1.8rem, 5vw, 2.6rem); }
.archive-desc { max-width: 60ch; color: var(--ink-2); }
.author-head { display: flex; gap: 18px; align-items: flex-start; }
.list { max-width: 900px; }
/* A list page's own date and its "Recently updated" row (same cards as the list under it). */
.page-updated { margin: 6px 0 0; }
.wrap > .page-updated { margin: 0 0 10px; }
.archive-updated { margin-bottom: 28px; }
.archive-updated + .section-title { margin-top: 8px; }
.archive-intro { margin: 20px 0 28px; }
.category-index { list-style: none; padding: 0; margin: 16px 0; display: grid; gap: 14px; max-width: 760px; }
.category-index li { padding-left: calc(var(--depth, 0) * 20px); border-bottom: 1px solid var(--line); padding-bottom: 12px; }
.category-index a { font-family: var(--serif); font-size: 1.25rem; font-weight: 700; text-decoration: none; }
.category-index p { margin: 4px 0 0; }
.pagination { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-top: 24px; max-width: 900px; font-size: .95rem; }
.pagination a { min-height: 44px; display: inline-flex; align-items: center; padding: 0 16px; border: 1px solid var(--line); border-radius: 999px; text-decoration: none; font-weight: 600; }
.search-big { display: flex; gap: 8px; margin: 12px 0; max-width: 640px; }
.search-big input { flex: 1; min-width: 0; min-height: 48px; padding: 0 16px; border: 1px solid #b9b6ad; border-radius: var(--radius); }
.search-big button { min-height: 48px; padding: 0 20px; background: var(--brand); color: #fff; border: 0; border-radius: var(--radius); font-weight: 700; cursor: pointer; }
.not-found { padding-block: 40px; }

/* Footer */
.site-footer { background: var(--brand); color: #fff; margin-top: 40px; font-size: .92rem; }
.site-footer a { color: #fff; }
.site-footer .muted { color: rgba(255,255,255,.75); }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; padding-block: 32px; }
@media (min-width: 768px) { .footer-grid { grid-template-columns: 2fr 1fr 1fr; } }
.footer-brand .brand-name { color: #fff; font-size: 1.4rem; white-space: normal; }
.footer-links, .footer-social { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.footer-links a, .footer-social a { display: inline-flex; min-height: 36px; align-items: center; text-decoration: none; }
.footer-links a:hover, .footer-social a:hover { text-decoration: underline; color: #fff; }
.disclosure { font-family: var(--sans); font-size: .85rem; line-height: 1.5; color: var(--ink-2); background: var(--paper-2); border-left: 3px solid var(--accent); padding: 10px 14px; margin: 0 0 1.4em; border-radius: 0 var(--radius) var(--radius) 0; }
[dir="rtl"] .disclosure { border-left: 0; border-right: 3px solid var(--accent); border-radius: var(--radius) 0 0 var(--radius); }
.offer-terms { font-family: var(--sans); font-size: .78rem; line-height: 1.5; color: var(--ink-2); border-top: 1px solid var(--line); margin: 2em 0 0; padding: 12px 0 0; }
.offer-terms p { margin: 0 0 .6em; }
.offer-terms .offer-terms-title { font-size: .8rem; margin-bottom: .4em; }
.newsletter { background: var(--paper-2); border-top: 1px solid var(--line); margin-top: 40px; }
.newsletter + .site-footer { margin-top: 0; }
.newsletter-inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; padding-block: 28px; }
@media (min-width: 900px) { .newsletter-inner { grid-template-columns: 1fr 1fr; align-items: center; } }
.newsletter h2 { font-size: 1.35rem; margin-bottom: 4px; }
.newsletter p { margin: 0; color: var(--ink-2); }
.newsletter-row { display: flex; gap: 8px; }
.newsletter-row input { flex: 1; min-width: 0; min-height: 48px; padding: 0 14px; border: 1px solid #b9b6ad; border-radius: var(--radius); background: #fff; }
.newsletter-row button, .button-primary { min-width: 0; min-height: 48px; padding: 0 18px; background: var(--brand); color: #fff; border: 0; border-radius: var(--radius); font-weight: 700; cursor: pointer; }
@media (max-width: 359px) { .newsletter-row { flex-wrap: wrap; } .newsletter-row input, .newsletter-row button { flex: 1 1 100%; } } /* BD-056: the button goes under the input on small phones */
.newsletter-consent { display: flex; gap: 8px; align-items: flex-start; font-size: .85rem; margin-top: 10px; color: var(--ink-2); }
.newsletter-consent input { width: 20px; height: 20px; flex-shrink: 0; margin-top: 1px; }
.newsletter-msg { font-weight: 600; margin-bottom: 8px !important; }
.newsletter-error { color: #a1141d !important; }
.hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.rg-notice { font-size: .82rem; opacity: .85; margin: 0; padding-block: 12px 0; }
.message-page { padding-block: 48px; max-width: 640px; }
/* Built-in tools */
.tool { margin: 2em 0; min-height: 80px; font-family: var(--sans); }
.tool:empty::before { content: "Loading…"; color: var(--muted); }
.pnl { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; border: 1px solid var(--line); border-radius: 12px; padding: 18px; background: #fff; }
@media (min-width: 768px) { .pnl { grid-template-columns: 1fr 1fr; padding: 24px; } }
.pnl-inputs { display: grid; gap: 16px; align-content: start; }
.pnl label { display: grid; gap: 6px; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.pnl-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.pnl input[type=number] { min-height: 44px; padding: 0 12px; border: 1px solid #b9b6ad; border-radius: var(--radius); font-size: 1rem; color: var(--ink); text-transform: none; letter-spacing: 0; }
.pnl input[type=range] { width: 100%; accent-color: var(--accent); min-height: 32px; }
.pnl-range { grid-template-columns: 1fr auto; align-items: center; }
.pnl-range input { grid-column: 1 / -1; }
.pnl output { font-family: ui-monospace, Menlo, monospace; color: var(--ink); font-size: .9rem; }
.pnl-side { border: 0; padding: 0; margin: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.pnl-side legend { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-bottom: 6px; }
.pnl-side button { min-height: 48px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; font-weight: 700; cursor: pointer; font-size: .85rem; color: var(--muted); }
.pnl-side button[aria-pressed="true"][data-side="YES"] { border-color: #0f7b3e; color: #0f7b3e; background: #eaf7ef; }
.pnl-side button[aria-pressed="true"][data-side="NO"] { border-color: #b42318; color: #b42318; background: #fdecea; }
.pnl-results { background: var(--paper-2); border-radius: 10px; padding: 18px; align-self: start; }
.pnl-label { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.pnl-profit { font-family: var(--serif); font-size: clamp(2.2rem, 7vw, 3rem); font-weight: 800; color: #0f7b3e; margin-top: 6px; line-height: 1.1; }
.pnl-roi { font-weight: 700; color: #0f7b3e; }
.pnl .is-neg { color: #b42318; }
.pnl-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--line); }
.pnl-stats-2 { grid-template-columns: 1fr 1fr; border-top: 0; padding-top: 6px; margin-top: 6px; }
.pnl-stats dt { font-size: .75rem; color: var(--muted); }
.pnl-stats dd { margin: 2px 0 0; font-family: ui-monospace, Menlo, monospace; font-weight: 700; }
.pnl-kelly { margin-top: 14px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; }
.pnl-ev { margin-top: 8px; font-size: .85rem; font-weight: 700; color: #0f7b3e; }
.pnl-note { font-size: .75rem; color: var(--muted); margin: 10px 0 0; }
.language-switcher ul { list-style: none; margin: 0; padding: 12px 0; display: flex; flex-wrap: wrap; gap: 6px; border-top: 1px solid rgba(255,255,255,.2); }
.language-switcher a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; border: 1px solid rgba(255,255,255,.35); border-radius: 999px; text-decoration: none; font-size: .88rem; }
.language-switcher a[aria-current] { background: #fff; color: var(--brand); font-weight: 700; }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; border-top: 1px solid rgba(255,255,255,.2); padding-block: 16px; }
.footer-bottom p { margin: 0; }
.footer-bottom a { display: inline-flex; align-items: center; min-height: 36px; }

/* Right-to-left languages */
[dir="rtl"] .prose blockquote { border-left: 0; border-right: 4px solid var(--accent); padding: .2em 1.1em .2em 0; }
[dir="rtl"] .prose ul, [dir="rtl"] .prose ol { padding-left: 0; padding-right: 1.3em; }
[dir="rtl"] .breadcrumbs li + li::before { margin-right: 0; margin-left: 4px; }
[dir="rtl"] .has-children:hover > .sub-nav, [dir="rtl"] .has-children:focus-within > .sub-nav { left: auto; right: 0; }
[dir="rtl"] .js .sub-nav { padding-left: 0; padding-right: 16px; }
@media (min-width: 768px) {
  [dir="rtl"] .prose figure.align-left { float: right; margin: .3em 0 1em 1.4em; }
  [dir="rtl"] .prose figure.align-right { float: left; margin: .3em 1.4em 1em 0; }
}

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } } /* incl. pseudo-elements (motion audit 20 Oct) */
@media print { .site-header, .site-footer, .share, .related { display: none; } }
/* Calculator: never wider than the screen */
.pnl, .pnl > *, .pnl-row > *, .pnl-stats > * { min-width: 0; }
.pnl input[type=number] { width: 100%; }
.pnl-side button { white-space: normal; padding: 6px 8px; line-height: 1.25; }
.pnl-stats dd { font-size: .95rem; overflow-wrap: anywhere; }
@media (max-width: 420px) { .pnl { padding: 14px; } .pnl-results { padding: 14px; } .pnl-stats { gap: 6px; } }
body.theme-dark .pnl-side button[aria-pressed="true"][data-side="YES"] { background: rgba(34, 197, 94, .14); color: #4ade80; border-color: #22c55e; }
body.theme-dark .pnl-side button[aria-pressed="true"][data-side="NO"] { background: rgba(239, 68, 68, .14); color: #f87171; border-color: #ef4444; }
body.theme-dark .pnl-profit, body.theme-dark .pnl-roi, body.theme-dark .pnl-ev { color: #4ade80; }
body.theme-dark .pnl .is-neg { color: #f87171; }

/* Live odds tool */
.lo { margin: 1.5em 0; font-family: var(--sans); }
.lo-title { margin: 0 0 .6em; }
.lo-note, .lo-foot { color: var(--muted); font-size: .85rem; margin: .6em 0 0; }
.lo-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.lo-card { border: 1px solid var(--line); border-radius: calc(var(--radius) * 2); background: var(--paper-2); padding: 14px; margin: 0; min-width: 0; }
.lo-meta { display: flex; justify-content: space-between; gap: 8px; font-size: .75rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.lo-live { color: #fff; background: #d92d20; border-radius: 4px; padding: 1px 6px; font-weight: 700; }
.lo-teams { font-weight: 700; font-size: 1.02rem; margin: 6px 0 8px; overflow-wrap: anywhere; }
.lo-teams span { color: var(--muted); font-weight: 400; }
.lo .lo-list, .lo .lo-trend, .lo .lo-tick { padding-left: 0; }
.lo table.lo-odds { display: table; width: 100%; border-collapse: collapse; font-size: .9rem; margin: 0; overflow: visible; }
.lo .lo-odds th, .lo .lo-odds td { padding: 6px 4px; border: 0; border-bottom: 1px solid var(--line); text-align: right; background: none; vertical-align: middle; }
.lo .lo-odds th[scope=row], .lo .lo-odds thead th:first-child { text-align: left; font-weight: 400; overflow-wrap: anywhere; }
.lo .lo-odds thead th { font-size: .72rem; color: var(--muted); text-transform: uppercase; font-weight: 600; }
.lo .lo-odds td { font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; }
.lo-cta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.prose .lo-book, .lo-book { flex: 1 1 120px; display: inline-flex; justify-content: center; align-items: center; min-height: 44px; padding: 6px 10px; border-radius: var(--radius); background: var(--button, var(--accent)); color: var(--button-ink, #fff); font-weight: 700; font-size: .88rem; text-decoration: none; text-align: center; }
.lo-trend { list-style: none; padding: 0; margin: 0; }
.lo-trend li { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); margin: 0; }
.lo-trend .lo-event { grid-column: 1 / -1; font-size: .75rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.lo-trend .lo-pick { font-weight: 700; }
.lo-trend .lo-price { font-weight: 700; font-variant-numeric: tabular-nums; }
.lo-trend .lo-book { grid-column: 1 / -1; flex: none; justify-self: start; min-height: 36px; font-size: .8rem; }
.lo-tick { list-style: none; padding: 0; margin: 0; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: thin; }
.lo-tick li { flex: 0 0 auto; border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; font-size: .82rem; background: var(--paper-2); margin: 0; }
.lo-tick li span { color: var(--muted); margin-right: 6px; }
.pe { border: 1px solid var(--line); border-radius: calc(var(--radius) * 2); background: var(--paper-2); padding: 14px 16px; }
.pe-head { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; }
.pe-live { color: #12b76a; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.pe-up { color: #12b76a; } .pe-down { color: #f04438; } .pe-flat { color: var(--muted); }

/* market-feed tool (server-rendered daily prices) */
.prose .market-feed table { width: 100%; border-collapse: collapse; font-size: .95rem; margin: .4em 0 .8em; }
.prose .market-feed th, .prose .market-feed td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--line); }
.prose .market-feed th + th, .prose .market-feed td + td { text-align: right; white-space: nowrap; }
.prose .market-feed ul { list-style: none; padding: 0; }
.prose .market-feed li { padding: 10px 0; border-bottom: 1px solid var(--line); }
.prose .market-feed li a.button { min-height: 40px; padding: 6px 14px; margin-left: .4em; font-size: .9rem; }

/* Conversion blocks (OfferService): promo-code box, second-app box, sticky phone bar */
.prose .code-box { border: 2px solid var(--accent); }
.prose .code-box .code-offer { font-size: 1.05rem; margin-bottom: .5rem; }
.prose .code-row { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.prose code.code-chip { font-size: 1.25rem; padding: 6px 14px; }
.copy-code { font: inherit; font-weight: 600; padding: 6px 12px; border: 1px solid var(--accent); border-radius: var(--radius); background: transparent; color: var(--accent-link, var(--accent)); cursor: pointer; }
.copy-code.is-copied { background: var(--button, var(--accent)); color: var(--button-ink, #fff); }
.prose .code-terms, .prose .code-checked { margin: .4rem 0 0; color: var(--muted, #666); }
.prose .second-platform ul { padding-left: 1.1rem; }
.prose .second-platform li { margin-bottom: .6rem; }
/* BD-034: compact code box under the byline on phones (<640px); the in-article box shows from 640px up. Both are in
   the server HTML, so nothing moves when scripts run (no layout shift). About 126px tall; every control 44px. */
/* Offer block B (Catie d116, 24 Oct): partner colours from the official banners (Brand, text 4.5:1+), shared by every skin. */
:root { --op-kalshi: #00a080; --op-kalshi-ink: #0b0b0e; --op-polymarket: #2c5cfc; --op-polymarket-ink: #fff; --op-prophetx: #20ac5c; --op-prophetx-ink: #0b0b0e;
  --op-og: #f86000; --op-og-ink: #0b0b0e; --op-novig: #102838; --op-novig-ink: #fff; }
.oc-commission { margin: 0 0 12px; font-size: 1rem; line-height: 1.5; }
.offer-card { --op: var(--accent); --op-ink: var(--on-accent, var(--accent-ink, #fff)); display: flex; flex-direction: column; gap: 12px; }
.offer-card[data-partner="kalshi"] { --op: var(--op-kalshi); --op-ink: var(--op-kalshi-ink); }
.offer-card[data-partner="polymarket"] { --op: var(--op-polymarket); --op-ink: var(--op-polymarket-ink); }
.offer-card[data-partner="prophetx"] { --op: var(--op-prophetx); --op-ink: var(--op-prophetx-ink); }
.offer-card[data-partner="og"] { --op: var(--op-og); --op-ink: var(--op-og-ink); }
.offer-card[data-partner="novig"] { --op: var(--op-novig); --op-ink: var(--op-novig-ink); }
.offer-card .oc-title { margin: 0; font-weight: 700; font-size: 1.0625rem; line-height: 1.35; color: var(--oc-title, var(--accent-text, var(--accent))); }
.offer-card .oc-actions { display: flex; flex-direction: column; gap: 10px; margin-top: auto; }
.offer-card a.oc-main { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 48px; margin: 0; padding: 8px 16px; box-sizing: border-box;
  border: 1px solid var(--op); border-radius: var(--radius, 8px); background: var(--op); color: var(--op-ink); font-weight: 700; text-align: center; text-decoration: none; }
.offer-card a.oc-main:hover, .offer-card a.oc-main:focus-visible { filter: brightness(1.08); color: var(--op-ink); }
.offer-card[data-partner="polymarket"] a.oc-main { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); }
.offer-card[data-partner="novig"] a.oc-main { border: 2px solid var(--muted, currentColor); }
.offer-card .oc-code-row { display: flex; gap: 8px; align-items: stretch; }
.offer-card code.oc-chip { flex: 1; display: inline-flex; align-items: center; justify-content: center; min-height: 48px; margin: 0; padding: 0 12px; box-sizing: border-box;
  border: 1px dashed var(--border, currentColor); border-radius: var(--radius, 8px); background: transparent; color: inherit; font-family: var(--mono, ui-monospace, monospace); font-weight: 700; letter-spacing: .06em; }
/* .copy-code.oc-copy so the older skin-wide ghost style for copy buttons (e.g. body.skin-california .copy-code: accent text,
   no fill) can't paint the label in the fill colour (Brand 31 Oct: empty Copy boxes on California and New York). */
.offer-card .copy-code.oc-copy { min-height: 48px; min-width: 72px; margin: 0; padding: 0 14px; border: 0; border-radius: var(--radius, 8px); background: var(--accent); color: var(--on-accent, var(--accent-ink, #fff)); font-weight: 700; cursor: pointer; }
.offer-card .copy-code.oc-copy.is-copied { filter: brightness(1.1); }
.offer-card .oc-terms { margin: 0; font-size: .8125rem; line-height: 1.45; color: var(--muted, inherit); }
.prose .code-box .offer-card { margin: 0; }
.prose .code-box .code-checked { margin: 12px 0 0; }
.code-box-top { display: none; }
@media (max-width: 639px) {
  .code-box-top { display: block; margin-top: 0; margin-bottom: 16px; }
  body:has(.code-box-top) .prose .code-box { display: none; }
  /* the dek is set a little smaller on these pages so the box and its button reach the first screen */
  body:has(.code-box-top) .article-header .standfirst { font-size: 1.0625rem; line-height: 1.55; }
  .code-box-compact { padding: 6px 10px; border: 2px solid var(--accent); border-radius: var(--radius, 8px); font-size: .875rem; line-height: 1.3; }
  .code-box-compact .cbc-offer { margin: 0 0 4px; }
  .code-box-compact .cbc-row { display: flex; align-items: center; gap: 6px; }
  .code-box-compact .code-chip { font-size: .9375rem; padding: 0 8px; min-height: 44px; display: inline-flex; align-items: center; border-radius: var(--radius, 6px); }
  .code-box-compact .copy-code { min-height: 44px; min-width: 44px; padding: 0 10px; font-size: .8125rem; white-space: nowrap; }
  .code-box-compact .button { min-height: 44px; display: inline-flex; align-items: center; margin-left: auto; padding: 0 14px; white-space: nowrap;
    border-radius: var(--radius, 8px); background: var(--button, var(--accent)); color: var(--button-ink, var(--accent-ink, #fff)); font-weight: 700; text-decoration: none; }
  .code-box-compact .button:hover { filter: brightness(1.06); color: var(--accent-ink, #fff); }
  .code-box-compact code.code-chip { font-family: var(--mono, ui-monospace, monospace); font-weight: 700; letter-spacing: .04em; background: color-mix(in srgb, var(--accent) 12%, transparent); border: 1px dashed var(--accent); color: inherit; }
  .code-box-compact .cbc-foot { display: flex; flex-wrap: wrap; align-items: center; column-gap: 14px; font-size: .75rem; color: var(--muted, #666); }
  .code-box-compact .cbc-terms summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; }
  .code-box-compact .cbc-terms[open] { flex-basis: 100%; }
  .code-box-compact .cbc-terms p { margin: 0 0 6px; }
  .code-box-compact .cbc-disclosure { min-height: 44px; display: inline-flex; align-items: center; color: inherit; }
  .code-box-compact a.cbc-disclosure { text-decoration: underline; }
}
/* the room kept for the phone bar sits after the footer, in the footer's colour (site.js --footer-bg), not the page colour */
@media (max-width: 767px) { body.sticky-on::after { content: ""; display: block; height: var(--sticky-h, calc(72px + env(safe-area-inset-bottom))); background: var(--footer-bg, transparent); } }
@media (max-width: 767px) and (prefers-reduced-motion: no-preference) {
  .sticky-cta:not([hidden]) { animation: sticky-up .2s ease-out; }
}
@keyframes sticky-up { from { transform: translateY(100%); } to { transform: none; } }
.sticky-cta { display: none; }
@media (max-width: 767px) {
  .sticky-cta:not([hidden]) { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 900; align-items: center; gap: .5rem;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: var(--paper, #fff); color: var(--ink, #111); border-top: 1px solid var(--line, rgba(0,0,0,.15)); box-shadow: 0 -4px 14px rgba(0,0,0,.12); font-size: .9rem; }
  .sticky-cta .sticky-text { flex: 1; line-height: 1.3; }
  .sticky-cta .button { white-space: nowrap; align-self: center; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; height: auto; }
  .sticky-close { border: 0; background: transparent; font-size: 1.4rem; line-height: 1; padding: 4px 6px; color: inherit; cursor: pointer; min-width: 44px; min-height: 44px; }
  body.theme-dark:not([class*="skin-"]) .sticky-cta:not([hidden]) { box-shadow: 0 -6px 18px rgba(0,0,0,.5); }
}
.prose .market-box { border-left: 4px solid var(--accent); }
@media (max-width: 767px) {
  .sticky-cta { flex-wrap: wrap; }
  .sticky-terms { flex-basis: 100%; order: 3; font-size: .75rem; color: var(--muted, #666); }
  .sticky-terms summary { cursor: pointer; }
  .sticky-terms p { max-height: 40vh; overflow-y: auto; margin: .3rem 0 0; }
}

/* ------------------------------------------------------------------------------------------------------------------
   Header options (Settings): header_brand = wordmark (two-line text instead of the logo picture) and
   header_style = inline (logo, menu and search on one row on wide screens).
   ------------------------------------------------------------------------------------------------------------------ */
.brand--wordmark { flex-direction: column; align-items: flex-start; line-height: 1; gap: 0; color: var(--ink); }
.brand--wordmark .brand-top { font-family: var(--display, var(--sans)); font-size: .625rem; font-weight: 400; letter-spacing: .22em; text-transform: uppercase; color: var(--accent-text, var(--accent)); opacity: .85; }
.brand--wordmark .brand-bottom { font-family: var(--serif-display, var(--serif)); font-style: italic; font-weight: 600; font-size: 1rem; line-height: 1.5; letter-spacing: -.025em; white-space: nowrap; margin-top: -2px; }
body.theme-dark .brand--wordmark { color: var(--ink); }
@media (min-width: 1024px) {
  .header-inline .site-header { display: flex; align-items: center; gap: 28px; min-height: 64px; padding-inline: max(var(--gutter), calc((100% - var(--wrap)) / 2 + var(--gutter))); }
  .header-inline .header-top { display: contents; }
  .header-inline .brand { order: 1; flex-shrink: 0; }
  .header-inline .primary-nav { order: 2; flex: 1; min-width: 0; border-top: 0; }
  .header-inline .nav-list { width: auto; max-width: none; padding: 0; justify-content: center; flex-wrap: wrap; gap: 0 4px; }
  .header-inline .header-actions { order: 3; }
  .header-inline .search-form input { width: 96px; }
}
@media (min-width: 1200px) { .header-inline .nav-list { gap: 2px 12px; } .header-inline .search-form input { width: 132px; } }

/* ------------------------------------------------------------------------------------------------------------------
   Designed home page (setting home_layout = showcase; templates/partials/home/*). Colours and fonts come from the
   theme tokens, so it works on light and dark sites; a site's own art direction is in css/skins/<skin>.css.
   Tokens a skin may set: --display (UI/heading font), --serif-display (wordmark font), --mono, --accent-text (accent
   as text colour), --on-accent (text on accent buttons), --sc-card (panel background), --sc-hero-max (hero height).
   ------------------------------------------------------------------------------------------------------------------ */
.home-showcase { --sc-card: var(--paper-2); --sc-ui: var(--display, var(--sans)); --sc-gold: var(--accent-text, var(--accent)); --sc-mono: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  --sc-hair: color-mix(in srgb, var(--ink) 10%, transparent); --sc-ink-90: color-mix(in srgb, var(--ink) 90%, transparent); --sc-ink-80: color-mix(in srgb, var(--ink) 80%, var(--paper)); --sc-ink-70: color-mix(in srgb, var(--ink) 72%, var(--paper)); }
.home-showcase main { min-height: 0; }

/* Partner colours (buttons and the letter tiles): the operators' own hues with a text colour that passes 4.5:1. */
[data-partner].sc-btn, .sc-platform-logo { --op: var(--accent); --op-ink: var(--on-accent, #fff); }
[data-partner="kalshi"].sc-btn, [data-partner="kalshi"].sc-platform-logo { --op: #00eba4; --op-ink: #060e18; }
[data-partner="polymarket"].sc-btn, [data-partner="polymarket"].sc-platform-logo { --op: #0062f5; --op-ink: #fff; }
[data-partner="prophetx"].sc-btn, [data-partner="prophetx"].sc-platform-logo { --op: #fbc522; --op-ink: #060e18; }
[data-partner="og"].sc-btn, [data-partner="og"].sc-platform-logo { --op: #f7743b; --op-ink: #060e18; }

/* Hero: full-width art with the wordmark on top. The box has a fixed shape, so nothing moves when the picture loads. */
.sc-hero { position: relative; overflow: hidden; background: var(--paper); height: 38vh; min-height: 280px; max-height: 420px; }
.sc-hero--plain { height: clamp(180px, 26vh, 260px); min-height: 0; background: linear-gradient(180deg, var(--paper-2), var(--paper)); }
.sc-hero-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; transform: scale(1.06); }
.sc-hero::before, .sc-hero::after { content: ""; position: absolute; left: 0; right: 0; pointer-events: none; z-index: 2; }
.sc-hero::before { top: 0; height: 128px; background: linear-gradient(180deg, color-mix(in srgb, var(--paper) 70%, transparent), transparent); }
.sc-hero::after { bottom: -1px; height: 34%; background: linear-gradient(180deg, transparent, var(--paper)); }
.sc-deco { position: absolute; pointer-events: none; z-index: 1; display: none; background: center / contain no-repeat; }
.sc-hero-mark { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 24px; pointer-events: none; }
.sc-wordmark { margin: 0; font-family: var(--serif-display, var(--serif)); font-style: italic; font-weight: 700; font-size: 3rem; line-height: 1; color: var(--sc-wordmark, #f6f4ee); filter: drop-shadow(0 4px 28px rgba(0, 0, 0, .65)); }
.sc-wordmark-sub { margin: 12px 0 0; display: flex; align-items: center; justify-content: center; gap: 12px; font-family: var(--sc-ui); font-size: .625rem; line-height: 1.5; letter-spacing: .32em; text-transform: uppercase; color: color-mix(in srgb, var(--sc-wordmark, #f6f4ee) 75%, transparent); }
.sc-wordmark-sub::before, .sc-wordmark-sub::after { content: ""; width: 32px; height: 1px; background: color-mix(in srgb, var(--sc-wordmark, #f6f4ee) 40%, transparent); }
@media (min-width: 640px) { .sc-hero { height: 42vh; } .sc-wordmark { font-size: 4.5rem; } .sc-wordmark-sub { margin-top: 16px; font-size: .75rem; } .sc-wordmark-sub::before, .sc-wordmark-sub::after { width: 48px; } }
@media (min-width: 768px) { .sc-hero { height: auto; min-height: 280px; aspect-ratio: 16 / 9; max-height: var(--sc-hero-max, 820px); } .sc-hero--plain { aspect-ratio: auto; height: 260px; } .sc-hero-art { transform: none; } .sc-wordmark { font-size: 6rem; } }
@media (min-width: 1024px) { .sc-wordmark { font-size: 9rem; } }

/* Headline block and the platform list */
.sc-main { display: grid; gap: 32px; padding-block: 32px 64px; }
.sc-left { min-width: 0; }
.sc-kicker { margin: 0; font-family: var(--sc-ui); font-size: .625rem; line-height: 1.5; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--sc-gold); }
.sc-title { font-family: var(--serif-text, var(--serif)); font-weight: 700; font-size: 2.25rem; line-height: 1; letter-spacing: -.025em; margin: 0; text-wrap: balance; }
.sc-title-accent { display: block; margin-top: 8px; font-family: var(--serif-display, var(--serif)); font-style: italic; color: var(--sc-gold); }
.sc-standfirst { margin: 16px 0 0; max-width: 42rem; font-family: var(--sc-ui); font-weight: 600; font-size: 1rem; line-height: 1.375; color: var(--sc-ink-80); text-wrap: pretty; }
.sc-cta { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.sc-cta-item { min-width: 0; }
.sc-btn, .prose a.sc-btn { display: flex; align-items: center; justify-content: center; gap: 8px; height: 60px; padding: 0 20px; margin: 0; border-radius: 6px; background: var(--op); color: var(--op-ink); font-family: var(--sc-ui); font-weight: 600; font-size: 1.125rem; line-height: 1.2; letter-spacing: -.025em; text-decoration: none; text-align: center; white-space: nowrap; box-shadow: 0 10px 15px -3px color-mix(in srgb, var(--op) 15%, transparent), 0 4px 6px -4px color-mix(in srgb, var(--op) 15%, transparent); transition: transform .15s ease, filter .15s ease, box-shadow .15s ease; }
.sc-btn:hover, .prose a.sc-btn:hover { color: var(--op-ink); filter: brightness(1.06); transform: translateY(-1px); box-shadow: 0 14px 22px -6px color-mix(in srgb, var(--op) 32%, transparent); }
.sc-btn:active { transform: none; }
.sc-btn:focus-visible, .sc-platform-name:focus-visible, .sc-copy:focus-visible, .sc-terms summary:focus-visible, .sc-cardlist a:focus-visible, .sc-linklist a:focus-visible, .sc-links a:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
.sc-arrow { flex-shrink: 0; width: 16px; height: 16px; transition: transform .15s ease; }
.sc-btn:hover .sc-arrow { transform: translateX(2px); }
[dir="rtl"] .sc-arrow { transform: scaleX(-1); }
[dir="rtl"] .sc-btn:hover .sc-arrow { transform: scaleX(-1) translateX(2px); }
.sc-offer { margin: 8px 4px 0; font-family: var(--sc-ui); font-size: .75rem; line-height: 1.5; color: var(--sc-ink-80); text-wrap: pretty; }
.sc-offer .promo-code, .sc-platform-code .promo-code { font-family: var(--sc-mono); font-size: .92em; font-weight: 600; letter-spacing: .05em; color: var(--sc-ink-90); background: color-mix(in srgb, var(--accent) 10%, transparent); border: 0; border-radius: 4px; padding: 2px 6px; display: inline; }
.sc-copy { display: inline-flex; align-items: center; gap: 4px; min-height: 24px; margin-inline-start: 4px; padding: 0 2px; border: 0; background: transparent; color: var(--sc-gold); font-family: var(--sc-ui); font-size: .6875rem; font-weight: 600; cursor: pointer; position: relative; z-index: 1; text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); text-underline-offset: 3px; border-radius: 4px; }
.sc-copy:hover { text-decoration-color: currentColor; }
.sc-copy.is-copied { background: transparent; color: var(--sc-gold); text-decoration: none; }
.sc-copy.is-copied::before { content: "✓"; }
/* BD-073/BD-075: on phones the offer sits on its own row, then the code and a 44px Copy button on the next (no orphaned words); every showcase skin */
@media (max-width: 767px) {
  .sc-offer { display: flex; flex-wrap: wrap; align-items: center; column-gap: 8px; row-gap: 4px; }
  .sc-offer > span[aria-hidden="true"] { display: none; }
  .sc-offer :is(.sc-offer-text, .sc-offer-note) { order: -1; flex-basis: 100%; }
  .sc-offer .sc-copy { min-height: 44px; padding-inline: 8px; margin-inline-start: 0; }
}
.sc-terms { margin: 2px 4px 0; font-family: var(--sc-ui); font-size: .6875rem; line-height: 1.5; color: var(--muted); position: relative; z-index: 1; }
.sc-terms summary { cursor: pointer; display: inline-block; padding: 3px 0; list-style: none; text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: 3px; border-radius: 4px; }
.sc-terms summary::-webkit-details-marker { display: none; }
.sc-terms summary::after { content: " +"; }
.sc-terms[open] summary::after { content: " −"; }
.sc-terms summary:hover { color: var(--sc-ink-80); }
.sc-terms p { margin: 4px 0 2px; max-width: 46rem; color: var(--sc-ink-70); }
.sc-chips { list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; font-family: var(--sc-ui); font-size: .75rem; line-height: 1.35; color: var(--sc-ink-70); }
.sc-chips li::before { content: "✓"; color: var(--sc-gold); margin-inline-end: 6px; }
.sc-disclosure { margin: 12px 0 0; max-width: 42rem; font-family: var(--sc-ui); font-size: .6875rem; line-height: 1.5; color: var(--muted); }
.sc-strip { margin-top: 24px; padding: 12px 16px 14px; border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent); border-radius: 12px; background: color-mix(in srgb, var(--sc-card) 40%, transparent); font-family: var(--sc-ui); }
.sc-strip-head { margin: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; }
.sc-strip-venues { font-family: var(--sc-mono); font-size: .625rem; line-height: 1.5; color: var(--muted); }
.sc-strip-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.sc-strip-list p { margin: 0; }
.sc-strip-label { font-size: .6875rem; line-height: 1.5; color: var(--sc-ink-70); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-strip-pct { margin-top: 2px !important; font-size: 1.25rem; font-weight: 700; line-height: 1.4; font-variant-numeric: tabular-nums; color: var(--ink); }
.sc-strip-change { font-family: var(--sc-mono); font-size: .625rem; font-weight: 400; }
.sc-strip-change.is-up { color: #34d399; } .sc-strip-change.is-down { color: #fb7185; }
body.theme-light .sc-strip-change.is-up { color: #0f7b3e; } body.theme-light .sc-strip-change.is-down { color: #b42318; }
.sc-strip-title { margin-top: 2px !important; font-family: var(--sc-mono); font-size: .625rem; line-height: 1.45; color: var(--muted); }

/* Opening text of the home page post: status line, links, short answer, guide blurb, small print */
.sc-lead { margin-top: 24px; max-width: 42rem; font-family: var(--serif-text, var(--serif)); font-size: 1rem; line-height: 1.625; color: var(--sc-ink-70); }
.sc-lead > p { margin: 16px 0 0; text-wrap: pretty; }
.sc-lead a { color: var(--sc-gold); text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); }
.sc-lead a:hover { text-decoration-color: currentColor; }
.sc-lead > p.sc-status { margin-top: 0; padding: 10px 14px; border: 1px solid var(--sc-hair); border-radius: 10px; background: color-mix(in srgb, var(--sc-card) 40%, transparent); font-family: var(--sc-ui); font-size: .8125rem; line-height: 1.5; color: var(--sc-ink-90); }
.sc-lead > p.sc-status::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-inline-end: 9px; border-radius: 50%; background: var(--sc-gold); vertical-align: 1px; }
.sc-lead > p.sc-aside { margin-top: 12px; font-family: var(--sc-ui); font-size: .8125rem; line-height: 1.55; color: var(--sc-ink-70); }
.sc-lead > .sc-links { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 8px 20px; font-family: var(--sc-ui); font-size: .875rem; line-height: 1.45; font-weight: 600; }
.sc-lead .sc-links a { color: var(--sc-ink-70); text-decoration: none; display: inline-flex; align-items: center; min-height: 28px; transition: color .15s ease; }
.sc-lead .sc-links a:first-child::after { content: "→"; margin-inline-start: 8px; }
.sc-lead .sc-links a:hover { color: var(--sc-gold); }
.sc-answer { margin: 24px 0 0; padding-inline-start: 16px; border-inline-start: 2px solid color-mix(in srgb, var(--accent) 50%, transparent); }
.sc-answer p { margin: 0; color: var(--sc-ink-80); text-wrap: pretty; }
.sc-answer .sc-question { margin-bottom: 6px; font-family: var(--sc-ui); font-size: .875rem; line-height: 1.45; font-weight: 600; color: var(--sc-ink-90); }
.sc-lead > p.sc-sub { margin-top: 20px; font-family: var(--sc-ui); font-size: 1rem; line-height: 1.375; font-weight: 600; color: var(--sc-ink-80); }
.sc-lead > p.sc-small { margin-top: 22px; font-family: var(--sc-ui); font-size: .75rem; line-height: 1.5; color: var(--muted); }
.sc-lead > :first-child { margin-top: 0; }

/* "Top platforms" list */
.sc-rail { align-self: start; display: flex; flex-direction: column; padding: 20px; border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent); border-radius: 16px; background: color-mix(in srgb, var(--sc-card) 40%, transparent); box-shadow: 0 20px 25px -5px color-mix(in srgb, var(--accent) 5%, transparent), 0 8px 10px -6px color-mix(in srgb, var(--accent) 5%, transparent); font-family: var(--sc-ui); }
.sc-rail-sub { margin: 4px 0 0; font-size: .875rem; line-height: 1.45; font-weight: 600; color: var(--sc-ink-90); }
.sc-platforms { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 12px; }
.sc-platform { position: relative; display: flex; gap: 12px; padding: 16px; border: 1px solid var(--sc-hair); border-radius: 12px; background: color-mix(in srgb, var(--paper) 60%, transparent); transition: border-color .15s ease, background .15s ease, transform .15s ease; }
.sc-platform:hover { border-color: color-mix(in srgb, var(--accent) 60%, transparent); background: color-mix(in srgb, var(--accent) 5%, transparent); transform: translateY(-1px); }
.sc-platform:focus-within { border-color: color-mix(in srgb, var(--accent) 60%, transparent); }
.sc-platform-logo { flex: 0 0 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 8px; background: var(--op); color: var(--op-ink); font-weight: 700; font-size: 1rem; }
.sc-platform-body { flex: 1; min-width: 0; }
.sc-platform-body p { margin: 0; }
.sc-platform-name { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; font-size: .875rem; font-weight: 600; line-height: 1.45; color: var(--ink); text-decoration: none; transition: color .15s ease; }
.sc-platform-name::after { content: ""; position: absolute; inset: 0; border-radius: 12px; }
.sc-platform-name .sc-arrow { margin-top: 2px; color: color-mix(in srgb, var(--ink) 40%, transparent); }
.sc-platform:hover .sc-platform-name, .sc-platform:hover .sc-platform-name .sc-arrow { color: var(--sc-gold); }
.sc-platform-rating { margin-top: 4px !important; font-size: .6875rem; line-height: 1.5; font-weight: 600; color: var(--sc-ink-80); }
.sc-platform-rating span { color: var(--sc-gold); }
.sc-platform-note { margin-top: 6px !important; font-size: .6875rem; line-height: 1.375; color: var(--sc-ink-70); }
.sc-platform-offer { margin-top: 8px !important; font-size: .6875rem; font-weight: 600; line-height: 1.375; color: var(--sc-gold); }
.sc-platform-code { margin-top: 5px !important; font-size: .6875rem; line-height: 1.6; color: var(--sc-ink-70); }
@media (min-width: 640px) {
  .sc-title { font-size: 3rem; }
  .sc-cta { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 16px; margin-top: 36px; }
}
@media (min-width: 768px) { .sc-title { font-size: 3.75rem; } .sc-standfirst { font-size: 1.25rem; line-height: 1.4; } .sc-main { padding-block: 40px 80px; } }
@media (min-width: 1024px) {
  .sc-main { grid-template-columns: minmax(0, 1fr) 360px; gap: 48px; padding-block: 40px 112px; align-items: start; }
  .sc-title { font-size: clamp(3.4rem, 5.63vw, 4.5rem); }
}

/* Sections made from the home page text (HomeShowcase::split) */
.sc-prose { max-width: none; font-family: var(--serif-text, var(--serif)); font-size: 1rem; line-height: 1.625; }
.sc-sec { padding-block: 48px; border-top: 1px solid var(--sc-hair); }
.sc-left .sc-sec { border-top: 0; padding-block: 48px 0; }
.sc-prose .label { font-family: var(--sc-ui); font-size: .6875rem; line-height: 1.5; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--sc-gold); margin: 0 0 12px; }
.sc-prose h2 { font-family: var(--sc-ui); font-size: 1.875rem; line-height: 1.15; font-weight: 700; letter-spacing: -.025em; margin: 0 0 24px; max-width: 48rem; text-wrap: balance; }
.sc-prose h3 { font-family: var(--sc-ui); font-size: 1.125rem; line-height: 1.556; font-weight: 700; letter-spacing: -.02em; margin: 0 0 12px; text-wrap: balance; }
.sc-prose .sc-sec > p:not(.label), .sc-prose .sc-col > p { max-width: 48rem; font-size: .9375rem; line-height: 1.625; color: var(--sc-ink-70); text-wrap: pretty; }
.sc-prose .sc-sec > h2 + p:not(.label) { margin-top: -8px; font-size: 1.0625rem; }
.sc-prose .sc-sec > :last-child { margin-bottom: 0; }
.sc-prose a:not(.button) { color: var(--sc-gold); text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); transition: text-decoration-color .15s ease, color .15s ease; }
.sc-prose a:not(.button):hover { text-decoration-color: currentColor; }
.sc-prose .sc-start > h2 { font-size: .6875rem; line-height: 1.5; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; color: var(--sc-gold); opacity: .9; margin-bottom: 16px; }
.sc-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; margin-top: 4px; }
.sc-col { min-width: 0; }
.sc-col > :last-child { margin-bottom: 0; }
.sc-col > a { display: inline-block; margin-bottom: 4px; font-family: var(--sc-ui); font-size: .75rem; font-weight: 600; text-decoration: none; }
.sc-col > a::after { content: " →"; }
@media (min-width: 768px) {
  .sc-sec { padding-block: 64px; }
  .sc-prose h2 { font-size: 2.25rem; line-height: 1.11; margin-bottom: 32px; }
  .sc-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; } .sc-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1024px) { .sc-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.sc-prose ol.sc-cardlist, .sc-prose ul.sc-cardlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 24px; }
@media (min-width: 640px) { .sc-prose .sc-cardlist { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; } }
@media (min-width: 1024px) { .sc-sections .sc-cardlist { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.sc-prose .sc-cardlist > li { margin: 0; min-width: 0; }
.sc-prose .sc-cardlist > li > a { height: 100%; display: flex; flex-direction: column; gap: 12px; padding: 16px; border: 1px solid var(--sc-hair); border-radius: 12px; background: color-mix(in srgb, var(--sc-card) 50%, transparent); color: var(--ink); text-decoration: none; transition: border-color .2s ease, background .2s ease, box-shadow .2s ease; }
.sc-prose .sc-cardlist > li > a:hover { border-color: color-mix(in srgb, var(--accent) 40%, transparent); background: color-mix(in srgb, var(--accent) 3%, var(--sc-card) 50%); box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .1); }
.sc-prose .sc-cardlist a > p { margin: 0; font-family: var(--serif-text, var(--serif)); font-size: .9375rem; line-height: 1.375; color: var(--sc-ink-70); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sc-prose .sc-cardlist a > p:first-child { font-family: var(--sc-ui); font-size: .625rem; line-height: 1.5; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--sc-gold); display: block; }
.sc-prose .sc-cardlist h3 { margin: 0; font-size: 1.125rem; line-height: 1.25; letter-spacing: -.02em; min-height: 2.5em; color: color-mix(in srgb, var(--ink) 95%, transparent); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-wrap: auto; transition: color .2s ease; }
@media (min-width: 640px) { .sc-prose .sc-cardlist h3 { font-size: 1.25rem; line-height: 1.4; min-height: 2.8em; } }
.sc-prose .sc-cardlist a:hover h3 { color: var(--sc-gold); }
.sc-thumb { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 8px; background: color-mix(in srgb, var(--ink) 8%, var(--sc-card)); }
.sc-prose .sc-thumb img { width: 100%; height: 100%; object-fit: cover; margin: 0; border-radius: 0; transition: transform .5s ease; }
.sc-cardlist a:hover .sc-thumb img { transform: scale(1.04); }
.sc-badge { position: absolute; top: 8px; inset-inline-start: 8px; padding: 2px 8px; border-radius: 999px; background: var(--accent); color: var(--on-accent, #fff); font-family: var(--sc-ui); font-size: .5625rem; line-height: 1.5; letter-spacing: .05em; text-transform: uppercase; box-shadow: 0 1px 2px rgba(0, 0, 0, .2); }
.sc-note { margin-top: auto; font-family: var(--sc-ui); font-size: .625rem; line-height: 1.5; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.sc-prose ul.sc-linklist { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 0; }
.sc-prose .sc-linklist > li { margin: 0; padding: 12px 0; border-bottom: 1px solid var(--sc-hair); }
.sc-prose .sc-linklist > li > a { color: var(--sc-ink-90); text-decoration: none; font-family: var(--sc-ui); font-size: .9375rem; font-weight: 600; line-height: 1.35; display: block; transition: color .15s ease; }
.sc-prose .sc-linklist > li > a:hover { color: var(--sc-gold); }
.sc-prose .sc-linklist > li > a p, .sc-prose .sc-linklist > li > p { margin: 2px 0 0; font-family: var(--sc-ui); font-size: .75rem; line-height: 1.5; font-weight: 400; color: var(--muted); }
.sc-prose .sc-linklist > li > a p + p { color: var(--sc-ink-70); font-size: .8125rem; }
@media (min-width: 768px) { .sc-prose .sc-sec > .sc-linklist { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; } }
/* Promo-code links: outlined chips, five across on wide screens */
.sc-prose ul.sc-buttonlist { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.sc-prose .sc-buttonlist > li { margin: 0; }
.sc-prose .sc-buttonlist a.button, .sc-prose .sc-buttonlist a.button:hover { display: block; min-height: 0; margin: 0; padding: 12px 16px; border-radius: 8px; background: color-mix(in srgb, var(--sc-card) 40%, transparent); color: var(--ink); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); font-family: var(--sc-ui); font-size: 1rem; line-height: 1.5; font-weight: 600; text-align: start; filter: none; transition: border-color .15s ease, color .15s ease; }
.sc-prose .sc-buttonlist a.button:hover { border-color: var(--accent); color: var(--sc-gold); }
.sc-prose .sc-sec > h2:has(+ p + .sc-buttonlist) { font-size: 1.5rem; margin-bottom: 8px; }
.sc-prose .sc-sec > h2 + p:has(+ .sc-buttonlist) { margin-top: 0; font-family: var(--sc-ui); font-size: .875rem; color: var(--muted); }
@media (min-width: 768px) { .sc-prose .sc-sec > h2:has(+ p + .sc-buttonlist) { font-size: 1.875rem; } }
.sc-prose .cards { grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 20px; }
.sc-prose .box { border: 1px solid var(--sc-hair); border-radius: 12px; padding: 24px; background: color-mix(in srgb, var(--sc-card) 60%, transparent); transition: border-color .2s ease; }
.sc-prose .cards > .box:hover { border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.sc-prose .cards > .box h3 { font-size: 1.375rem; line-height: 1.2; }
.sc-prose .cards > .box p { color: var(--sc-ink-70); }
.sc-prose .cards > .box p.label, .sc-prose .box > p.label { font-size: .6875rem; color: var(--sc-gold); }
.sc-sec--boxes { display: grid; gap: 20px; }
.sc-sec--boxes > .box { margin: 0; border-color: color-mix(in srgb, var(--accent) 30%, transparent); background: color-mix(in srgb, var(--accent) 4%, var(--sc-card) 40%); }
.sc-sec--boxes > .box h2 { font-size: clamp(1.375rem, 2.6vw, 1.75rem); margin-bottom: 14px; }
.sc-sec--boxes > .box > p { max-width: 46rem; font-size: .9375rem; color: var(--sc-ink-80); }
.sc-sec--boxes > .box > p:last-of-type:not(:first-of-type) { font-family: var(--sc-ui); font-size: .75rem; line-height: 1.5; color: var(--muted); }
.sc-sec--boxes > .box > img { max-height: 260px; width: auto; margin: 12px 0 0; border-radius: 8px; }
@media (min-width: 768px) {
  .sc-sec--boxes > .box { padding: 32px; }
  .sc-sec--boxes > .box:has(> img) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 300px); column-gap: 32px; align-items: start; }
  .sc-sec--boxes > .box:has(> img) > * { grid-column: 1; }
  .sc-sec--boxes > .box:has(> img) > img { grid-column: 2; grid-row: 1 / span 12; justify-self: end; align-self: center; margin: 0; max-height: 240px; object-fit: contain; }
}
.sc-prose a.button { font-family: var(--sc-ui); border-radius: 6px; letter-spacing: -.01em; transition: filter .15s ease, transform .15s ease; }
.sc-prose a.button:hover { transform: translateY(-1px); }
.sc-prose .market-feed .cards { grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.sc-prose .market-feed .label { letter-spacing: .1em; }
.sc-prose .market-feed table { font-family: var(--sc-ui); font-size: .875rem; }
.sc-prose .market-feed td + td { font-family: var(--sc-mono); font-variant-numeric: tabular-nums; }
.sc-sections .faq { margin-top: 0; padding-block: 48px; border-top: 1px solid var(--sc-hair); max-width: 52rem; }
.sc-sections .faq details { border-color: var(--sc-hair); }
.sc-sections .faq summary { font-family: var(--sc-ui); transition: color .15s ease; }
.sc-sections .faq summary:hover { color: var(--sc-gold); }
.sc-sections .offer-terms { margin-top: 0; padding-block: 20px; font-family: var(--sc-ui); border-top-color: var(--sc-hair); }
/* Article lists under the designed part keep their content and get the card look. */
.home-showcase .home-top, .home-showcase main > .section { border-top: 1px solid var(--sc-hair); }
.home-showcase .card { padding: 16px; border: 1px solid var(--sc-hair); border-radius: 12px; background: color-mix(in srgb, var(--sc-card) 50%, transparent); transition: border-color .2s ease; }
.home-showcase .card:hover { border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.home-showcase .card-title { font-family: var(--sc-ui); letter-spacing: -.02em; }
.home-showcase .section-title { border-top: 0; padding-top: 0; font-family: var(--sc-ui); font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase; color: var(--sc-gold); }
[dir="rtl"] .sc-wordmark-sub, [dir="rtl"] .brand--wordmark .brand-top, [dir="rtl"] .sc-kicker, [dir="rtl"] .sc-prose .label, [dir="rtl"] .sc-title, [dir="rtl"] .sc-btn { letter-spacing: 0; }
.sc-prose .sc-cols + p, .sc-prose .sc-cols + a { margin-top: 32px; }
.sc-prose .sc-sec > .cards { margin-top: 28px; }

.sc-sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.sc-prose .sc-sec-head h2 { margin-bottom: 24px; }
.sc-prose a.sc-all { margin-bottom: 28px; font-family: var(--sc-ui); font-size: .75rem; font-weight: 600; text-decoration: none; }
.sc-prose a.sc-all::after { content: " →"; }
.sc-prose a.sc-all:hover { text-decoration: underline; }

/* Market and price links of the market-feed and live tools (the designed widgets are in design.css) */
.lo.pe, .tool .lo { max-width: 100%; }
.lo .pe-table { table-layout: fixed; }
.lo .pe-table th:first-child { width: auto; white-space: normal; overflow-wrap: anywhere; }
.lo .pe-table th:not(:first-child), .lo .pe-table td { width: 4.6em; }
/* Phone rows (Catie review C10): the question wraps on at most 3 lines, Yes and Volume keep their own columns with a clear gap */
.lo .pe-table thead th:nth-child(2), .lo .pe-table td:nth-child(2) { width: 3.4em; }
.lo .pe-table thead th:nth-child(3), .lo .pe-table td:nth-child(3) { width: 5.2em; padding-inline-start: 10px; }
.lo .pe-table thead th { letter-spacing: .04em; white-space: nowrap; }
.lo .pe-table tbody th[scope=row] { text-transform: none; letter-spacing: normal; font-weight: 400; padding-inline-end: 10px; }
.lo .pe-table tbody th[scope=row] .mf-link, .lo .pe-table tbody th[scope=row] > :only-child { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.lo .lo-source { font-size: .6875rem; }
.market-feed a.mf-link:not(.button), .lo a.mf-link:not(.button) { color: inherit; text-decoration: none; border-radius: 4px; transition: color .15s ease; }
.market-feed a.mf-link:not(.button):hover, .lo a.mf-link:not(.button):hover { color: var(--accent-text, var(--accent)); text-decoration: underline; text-underline-offset: 3px; }
.market-feed a.mf-link:focus-visible, .market-feed a.mf-button:focus-visible, .lo a.mf-link:focus-visible, .sc-strip-tile:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.market-feed a.mf-price { display: inline-block; min-width: 3.2em; padding: 3px 0; }
/* Moving price rows: the pause button (BD-068, WCAG 2.2.2; site.js adds it to every [data-ticker]). 44px on phones,
   32px from 768px; transparent with a line-colour border; the icon in the ink colour. Nothing to pause under
   "reduce motion" (the rows don't move there), so the button never shows then. */
.ticker-band { display: flex; align-items: center; gap: 4px; }
.ticker-band > [data-ticker] { flex: 1 1 auto; min-width: 0; }
.ticker-toggle { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: var(--radius); background: transparent; color: var(--ink); cursor: pointer; }
.ticker-toggle:hover { border-color: var(--accent); }
.ticker-toggle .tt-play, .ticker-toggle[aria-pressed="true"] .tt-pause { display: none; }
.ticker-toggle[aria-pressed="true"] .tt-play { display: inline; }
@media (min-width: 768px) { .ticker-toggle { width: 32px; height: 32px; } }
[data-ticker].is-paused [data-ticker-run], [data-ticker].is-paused [data-ticker-run] * { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) { .ticker-toggle { display: none; } }
/* Offer block B rows of the designed homes (partner-buttons.php): cards side by side from 640px with equal heights,
   stacked 16px apart on phones (spec: the action group aligns along the bottom). */
.sc-cta.oc-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin: 0 0 16px; padding: 0; list-style: none; }
@media (min-width: 640px) { .sc-cta.oc-row { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } }
.sc-cta.oc-row > .sc-cta-item { display: flex; margin: 0; padding: 16px; border: 1px solid var(--line, rgba(127, 127, 127, .3)); border-radius: var(--radius, 8px); background: var(--sc-card, transparent); }
.sc-cta.oc-row .offer-card { flex: 1; }
.offer-card .oc-note { margin: -6px 0 0; font-size: .875rem; color: var(--muted, inherit); }
/* Mobile spacing pass (Catie d117, 24 Oct; spec hub/handoffs/cms/2026-10-24-mobile-spacing-pass.md, C12/C15-C18/C25),
   phones only, desktop unchanged: 64px between chapters (32 + 32), 16px from a chapter heading to its content and
   between cards, 16px card padding, FAQ items 8px apart with 48px questions, "On this page" as 2-column 44px chips.
   Skins with their own section classes get the same rhythm in their own stylesheets. The sticky bar room at the page
   bottom already shipped (bundle 2). The market-mover row redesign follows in bundle 6. */
@media (max-width: 767px) {
  .sc-sec { padding-block: 32px; }
  .sc-left .sc-sec { padding-block: 32px 0; }
  .sc-prose .sc-sec > h2 { margin-bottom: 16px; }
  .sc-prose .sc-sec > .cards { margin-top: 16px; }
  .prose .cards, .sc-prose .cards { gap: 16px; }
  .prose .cards > .box, .sc-prose .cards > .box { padding: 16px; }
  .faq { margin-top: 32px; }
  .faq details { margin-bottom: 8px; }
  .faq summary { display: flex; align-items: center; min-height: 48px; padding-block: 12px; }
  .ed-toc, .pages-editorial .ed-toc { padding: 16px; }
  .ed-toc ol { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .ed-toc a { grid-template-columns: 1fr; align-items: center; min-height: 44px; padding: 4px 10px; border: 1px solid var(--line, rgba(127, 127, 127, .3)); border-radius: var(--radius, 8px); }
  .ed-toc a::before { display: none; }
  .prose > .box:last-of-type { margin-top: 32px; }
}

/* Partner small print in offer cards never below the 12px house minimum (31 Oct: it inherited 10.8-11.7px on some skins). */
body .offer-card small { font-size: max(12px, .8333em); }

/* Brand big-screen spec 11 Nov 2026 */
/* FIX 1: the lower home sections keep the page width. .pages-editorial .prose (design.css) and .page-full .prose (above) both set
   max-width: none and beat .wrap on this element; three classes win in any order, on every skin. */
.wrap.sc-sections.prose { max-width: var(--wrap); margin-inline: auto; }
/* FIX 2: home offer boxes 2 x 2 (or 3 across for 3 or 5 offers) on desktop, Trade buttons straight under each offer title */
@media (min-width: 1024px) {
  .sc-cta.oc-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sc-cta.oc-row:has(> .sc-cta-item:nth-child(3):last-child),
  .sc-cta.oc-row:has(> .sc-cta-item:nth-child(5):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.sc-cta.oc-row .offer-card .oc-actions { margin-top: 0; }
/* FIX 7: 24 px tap targets for breadcrumbs and tag chips on phones (WCAG 2.2 SC 2.5.8) */
.breadcrumbs a, .tag, .chip { display: inline-flex; align-items: center; min-height: 24px; }  /* raises short links only; taller ones keep their size */