/* Content and legal pages (TZ §5 pages 2–9 + 404): about, how-it-works, RG,
 * privacy, terms, contacts, cookies, FAQ. Built on components.css
 * (.page-hero, .legal-section, .toc, .form, .faq …); everything new is .ct-*.
 * Signature kept: seat-plate numbers 01/02/03 in every section kicker. */

/* ── hero additions ─────────────────────────────────────────────────── */
.page-hero .crumbs a::before, .field--check .field__label a::before, .ct-mail-list a::before, .ct-facts dd a::before,
.ct-toc a::before { content: ""; position: absolute; inset: 50% -4px auto; translate: 0 -50%; height: 100%; min-height: 24px; }
.page-hero--photo { padding: 48px 0 56px; }
.page-hero--photo .ph-bg picture { position: absolute; inset: 0; }
.page-hero--photo .pill--tint { background: rgba(255, 255, 255, .14); color: #fff; }
.ct-hero-legal { background: var(--color-surface); }
.ct-hero-legal .page-hero-meta .pending { font-size: 13px; }

/* ── section rhythm ─────────────────────────────────────────────────── */
.ct-prose { max-width: 70ch; }
.ct-prose p + p, .ct-prose p + ul, .ct-prose ul + p { margin-top: 14px; }
.ct-prose h3 { margin-top: 28px; margin-bottom: 8px; }
.ct-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.ct-split { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 40px; align-items: start; }
.ct-split--even { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* cards grid */
.ct-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.ct-grid--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.ct-card { display: flex; flex-direction: column; gap: 10px; }
.ct-card h3 { font-size: 18px; line-height: 26px; }
.ct-card p { color: var(--color-muted); font-size: 15px; line-height: 24px; }
.ct-card .seat .icon { width: 22px; height: 22px; }
.ct-card-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

/* aside fact box */
.ct-facts { display: grid; gap: 0; }
.ct-facts > div { display: grid; grid-template-columns: minmax(0, 150px) minmax(0, 1fr); gap: 12px; padding: 14px 0; border-top: 1px solid var(--color-line); }
.ct-facts > div:first-child { border-top: 0; padding-top: 0; }
.ct-facts dt { font-size: 14px; font-weight: 700; color: var(--color-navy); }
.ct-facts dd { margin: 0; color: var(--color-text); overflow-wrap: anywhere; }
.ct-facts dd a { position: relative; font-weight: 600; }

/* checklists */
.ct-checks { display: grid; gap: 12px; }
.ct-checks li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start; }
.ct-checks .icon { color: var(--brand-ink); margin-top: 3px; }
.ct-checks--warn .icon { color: var(--color-error); }
.ct-checks b { color: var(--color-navy); }

/* step-list with seat numbers */
.step-list li > div h3 { font-size: 18px; line-height: 26px; }

/* notice spacing inside sections */
.ct-notice { margin-top: 24px; }
.ct-notice b { color: var(--color-navy); }

/* ── how it works: odds explainer ──────────────────────────────────── */
.ct-odd-math { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px; align-items: center; padding: 24px; border-radius: var(--r16); background: var(--color-navy); color: var(--on-navy); }
.ct-odd-math .seat { min-width: 96px; height: 72px; font-size: 32px; }
.ct-odd-math p { color: var(--on-navy); }
.ct-odd-math b { color: #fff; }
.ct-screen { padding: 0; overflow: hidden; }
.ct-screen-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 16px 20px; background: var(--surface-2); border-bottom: 1px solid var(--color-line); }
.ct-screen-head small { display: block; font-size: 13px; color: var(--color-muted); }
.ct-screen-head b { color: var(--color-navy); }
.ct-screen-body { padding: 20px; display: grid; gap: 18px; }
.ct-market h3 { font-size: 15px; line-height: 22px; margin-bottom: 8px; display: flex; gap: 8px; align-items: center; }
.ct-market .odds--2 { max-width: 66%; }
.ct-screen-foot { padding: 0 20px 20px; }
.ct-screen-foot .demo-note { margin-top: 12px; }

/* comparison table (demo vs real) */
.ct-table-wrap { overflow-x: auto; border: 1px solid var(--color-line); border-radius: var(--r16); background: #fff; }
.ct-table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 23px; min-width: 520px; }
.ct-table th, .ct-table td { text-align: left; vertical-align: top; padding: 14px 16px; border-bottom: 1px solid var(--color-line); }
.ct-table thead th { background: var(--surface-2); color: var(--color-navy); font-size: 13px; letter-spacing: .04em; text-transform: uppercase; }
.ct-table tbody th { color: var(--color-navy); font-weight: 700; width: 24%; }
.ct-table tr:last-child > * { border-bottom: 0; }
.ct-table code { font-size: 14px; font-weight: 700; color: var(--color-navy); background: var(--surface-2); padding: 1px 6px; border-radius: 6px; overflow-wrap: anywhere; }

/* ── legal layout: toc + body ──────────────────────────────────────── */
.ct-legal { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 48px; align-items: start; }
.ct-toc { background: #fff; border: 1px solid var(--color-line); border-radius: var(--r16); padding: 16px 8px; }
.ct-toc-title { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--color-muted); padding: 0 12px 8px; }
.ct-toc a { position: relative; }
.ct-toc .seat { flex: none; }
.ct-legal-body { min-width: 0; max-width: 76ch; }
.legal-section { scroll-margin-top: calc(var(--head-h) + 16px); }
.legal-section h2 .seat { flex: none; }
.legal-section .ct-cta { margin-top: 16px; }
.legal-section .ct-table-wrap { margin-top: 16px; }
.legal-section .notice { margin-top: 16px; }
.ct-meta-line { font-size: 14px; color: var(--color-muted); }

/* in-page cookie settings (works without JS: same POST as the footer dialog) */
.ct-cookie-box { margin-top: 16px; padding: 8px 24px 24px; }
.ct-cookie-box .consent-cat:first-of-type { margin-top: 8px; border-top: 0; }
.ct-cookie-box .overlay__actions .btn { flex: 0 1 auto; }

/* ── contacts ──────────────────────────────────────────────────────── */
.ct-contact { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 32px; align-items: start; }
.ct-form-card { padding: 32px; }
.ct-form-card h3 { margin-bottom: 4px; }
.ct-form-card .form { margin-top: 20px; }
.ct-req { color: var(--color-error); }
.ct-form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; }
.ct-form-foot .field__hint { flex: 1 1 220px; }
.ct-status:empty { display: none; }
.ct-status .form-done p { color: var(--color-text); }
.ct-status .form-done b { display: block; color: var(--color-navy); font-size: 17px; }
.field--check .field__label a { position: relative; font-weight: 700; }
.ct-mail-list { display: grid; gap: 14px; }
.ct-mail-list li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: center; }
.ct-mail-list b { display: block; color: var(--color-navy); font-size: 15px; }
.ct-mail-list a { position: relative; display: inline-block; font-weight: 600; overflow-wrap: anywhere; }
.ct-mail-list div > span { display: block; font-size: 14px; line-height: 20px; color: var(--color-muted); }
.ct-mail-list .seat .icon { width: 20px; height: 20px; }

/* ── FAQ page ──────────────────────────────────────────────────────── */
.ct-faq-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.ct-faq-nav a { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px 0 6px; border-radius: var(--pill); background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .24); color: #fff; font-weight: 600; font-size: 14px; text-decoration: none; transition: background-color .2s var(--ease); }
.ct-faq-nav a:hover { background: rgba(255, 255, 255, .2); }
.ct-faq-nav .seat { min-width: 32px; height: 32px; font-size: 13px; }
.ct-faq-group { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 40px; align-items: start; scroll-margin-top: calc(var(--head-h) + 16px); }
.ct-faq-group + .ct-faq-group { margin-top: 56px; padding-top: 56px; border-top: 1px solid var(--color-line); }
.ct-faq-group .lead { font-size: 16px; }
.ct-faq-group .btn { margin-top: 20px; }

/* ── 404 ───────────────────────────────────────────────────────────── */
.ct-404 { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 32px; align-items: center; }
.ct-404 .seat { min-width: 132px; height: 104px; font-size: 44px; border-radius: 26px 26px 12px 12px; }
.ct-404-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.ct-404-links a { position: relative; display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 14px 18px; text-decoration: none; color: var(--color-navy); font-weight: 700; }
.ct-404-links .icon { color: var(--brand-ink); }

/* ── responsive ────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .ct-split, .ct-contact { grid-template-columns: 1fr; gap: 28px; }
  .ct-legal { grid-template-columns: 1fr; gap: 24px; }
  .ct-toc { position: static; }
  .ct-toc ol { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ct-faq-group { grid-template-columns: 1fr; gap: 20px; }
}
@media (max-width: 760px) {
  .page-hero--photo { padding: 32px 0 40px; }
  .ct-split--even { grid-template-columns: 1fr; }
  .ct-cta .btn { flex: 1 1 100%; }
  .ct-form-card { padding: 22px 16px; }
  .ct-facts > div { grid-template-columns: 1fr; gap: 4px; }
  .ct-odd-math { grid-template-columns: 1fr; padding: 20px; }
  .ct-market .odds--2 { max-width: none; }
  .ct-toc ol { grid-template-columns: 1fr; }
  .ct-cookie-box { padding: 4px 16px 18px; }
  .ct-faq-group + .ct-faq-group { margin-top: 40px; padding-top: 40px; }
  .ct-404 { grid-template-columns: 1fr; gap: 16px; }
  .ct-404 .seat { min-width: 96px; height: 76px; font-size: 32px; }
}

/* aside helpers + closing RG strip */
.ct-aside-lead { margin-top: 8px; }
.ct-aside-list { margin-top: 16px; }
.ct-rg { padding-block: 40px var(--sec); }
.ct-rg .rg-strip { margin-top: 0; }
.ct-card > .seat, .ct-card-top .seat { align-self: flex-start; }
h2 + .ct-prose { margin-top: 12px; }
.ct-odds-block { margin-top: 48px; }
.ct-odds-block > div > h3, .ct-odds-block > h3 { margin-bottom: 12px; }
h3 + .ct-prose { margin-top: 0; }
.ct-screen { margin: 0; }
.sec .note[data-reveal] { margin-top: 20px; }
.legal-section code { font-size: 14px; font-weight: 700; color: var(--color-navy); background: var(--surface-2); padding: 1px 6px; border-radius: 6px; overflow-wrap: anywhere; }
.legal-section .ct-facts { padding: 18px 20px; background: #fff; border: 1px solid var(--color-line); border-radius: var(--r16); }
.legal-section .ct-facts > div:first-child { padding-top: 0; }
.legal-section .ct-facts > div:last-child { padding-bottom: 0; }
.ct-toc .seat--sm { box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .15); }
html:not(.js) .ct-js-only { display: none; }
.ct-404-links .card { padding: 0; }
.ct-form-aside { padding-top: 8px; }
.ct-form-aside .notice { margin-top: 24px; }
.legal-section p code, .legal-section li code { white-space: nowrap; }
.ct-table-wrap + p { margin-top: 14px; }
.ct-mail-list + .ct-facts { margin-top: 24px; padding-top: 8px; border-top: 1px solid var(--color-line); }
.ct-mail-list + .ct-facts > div:first-child { padding-top: 14px; }
.ct-404 > .seat { justify-self: start; }
.ct-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .ct-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .ct-grid--4 { grid-template-columns: 1fr; } }