/* ═══════════════════════════════════════════════════════════
   FloorRadar — v3 "The Local" cascade layer
   Anchored to docs/DESIGN-SPEC-v3-THE-LOCAL.md

   Loaded LAST on every marketing page, after that page's own
   stylesheet. The page stylesheets are token-driven and still
   use the v2.46 token NAMES, so redefining those names here
   re-skins them wholesale. Everything that is not a token —
   italic display, accent CTAs, eyebrow chips — is overridden
   below by name.

   Marketing surfaces only. app.html / admin / settings are
   untouched: they load css/base.css and never this file.
   ═══════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Bitter:wght@400;700;800&family=Source+Sans+3:wght@400;600&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
    /* ─── v3 values, mapped onto the v2.46 token names ───── */
    --ink:          #1C1815;   /* 15.62:1 on paper */
    --ink-soft:     #55504A;   /* 7.07:1  */
    --paper:        #F3F1EC;   /* warm stock, chroma 7 */
    --paper-soft:   #E7E3DA;
    --positive:     #177245;   /* 5.27:1 — DATA ONLY */
    --negative:     #A62C1C;   /* 6.20:1 — DATA ONLY */
    --rule:         rgba(28,24,21,.16);
    --rule-strong:  rgba(28,24,21,.34);

    /* v3 has NO accent on light surfaces. Pages spend --accent on CTAs and
       emphasis, so it is mapped to ink: every accent fill becomes the v3
       primary button, and every accent word becomes plain ink (emphasis is
       restored as weight below). Tungsten exists only inside a board band. */
    --accent:       #1C1815;
    --accent-deep:  #000000;

    /* ─── The room ─────────────────────────────────────── */
    --board:        #16100E;
    --board-text:   #F2EAE0;   /* 15.81:1 */
    --board-muted:  #C9BCB0;   /* 10.14:1 */
    --tungsten:     #C1762E;   /* 5.29:1 on board — BOARD ONLY */
    --tungsten-hi:  #E08A33;
    --up-d:         #5FBF8E;   /* 8.37:1 */
    --down-d:       #EE7A63;   /* 6.82:1 */

    /* ─── Type ─────────────────────────────────────────── */
    --font-display: Bitter, Georgia, serif;
    --font-body:    'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono:    'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

    /* legacy aliases some pages still read */
    --bg-base: var(--paper); --bg-surface: var(--paper); --bg-elevated: var(--paper-soft);
    --bg-hover: var(--paper-soft); --text-primary: var(--ink); --text-secondary: var(--ink-soft);
    --border: var(--rule); --radius-sharp: 2px;
}

body { background: var(--paper); color: var(--ink);
       font-family: var(--font-body); font-size: 18px; line-height: 1.65; }

/* ─── No italic display anywhere. Emphasis is weight. ───── */
h1, h2, h3, h4, .hero-title, .hero h1, blockquote p, cite, em, .accent-word, .brand-name {
    font-style: normal;
}
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 800; letter-spacing: -.015em; }
h1 { font-size: 48px; line-height: 1.08; }
h2 { font-size: 31px; line-height: 1.15; }
h3 { font-size: 21px; line-height: 1.28; font-weight: 700; }
@media (max-width: 640px) { h1 { font-size: 32px; } h2 { font-size: 25px; } h3 { font-size: 19px; } }

/* accent words lose their colour, keep their emphasis */
.accent-word, .hero-accent { color: inherit; font-weight: 800; }

/* ─── Section marks: plain label, never a numbered eyebrow ─ */
.section-mark {
    font-family: var(--font-mono); font-size: 12px; letter-spacing: .13em;
    text-transform: uppercase; color: var(--ink-soft);
    background: none; border: 0; padding: 0; border-radius: 0;
    display: flex; align-items: center; gap: 12px;
}
.section-mark::before { content: ""; width: 36px; height: 1px; background: var(--rule-strong); flex: 0 0 auto; }

/* ─── CTA hierarchy — structural, no accent on light ────── */
.cta-primary, .btn-primary, .pricing-cta, .tier-cta {
    background: var(--ink) !important; color: var(--paper) !important;
    border: 2px solid var(--ink) !important; border-radius: 2px !important;
    font-family: var(--font-body); font-weight: 600; box-shadow: none !important;
}
.cta-primary:hover, .btn-primary:hover, .pricing-cta:hover, .tier-cta:hover {
    background: #000 !important; border-color: #000 !important;
}
.cta-secondary, .btn-secondary {
    background: transparent !important; color: var(--ink) !important;
    border: 2px solid var(--ink) !important; border-radius: 2px !important; font-weight: 600;
}
.cta-secondary:hover, .btn-secondary:hover { background: var(--paper-soft) !important; }
/* no chevrons */
.chevron { display: none !important; }

/* ─── Rules, not boxes ──────────────────────────────────── */
.shot, .product-shot, figure.product-shot { border-radius: 0 !important; box-shadow: none !important; }
.product-shot img { border-radius: 0 !important; }

/* ─── Data colour, and never as decoration ─────────────── */
.delta-up, .up, .positive { color: var(--positive); font-weight: 600; }
.delta-down, .down, .negative { color: var(--negative); font-weight: 600; }

/* ─── Topbar: it sits on the board on every page ────────── */
.topbar {
    background: var(--board);
    /* topbar.css is token-driven but several rules are !important; feed it
       board values, scoped here so the page below keeps paper values. */
    --ink: var(--board-text);
    --ink-soft: var(--board-muted);
    --paper: #160E08;
    --accent: var(--tungsten);
    --rule: rgba(242,234,224,.16);
}
.topbar .brand, .topbar .brand-name { color: var(--board-text); }
.topbar .brand-name {
    font-family: var(--font-display); font-weight: 800; font-size: 20px;
    font-style: normal; letter-spacing: -.01em;
}
.topbar-nav a.topbar-cta { border-radius: 2px !important; }
@media (max-width: 640px) {
    /* topbar.css:187 zeroes this below 640px and clipped the brand mark at x=0 */
    .topbar .frame { padding-left: 20px; padding-right: 20px; }
}

/* ─── Footer sits on the board too ─────────────────────── */
.footer, .site-footer {
    background: var(--board); color: var(--board-muted);
    --ink: var(--board-text); --ink-soft: var(--board-muted);
    --rule: rgba(242,234,224,.16);
}
.footer a, .site-footer a { color: var(--board-muted); }
.footer a:hover, .site-footer a:hover { color: var(--board-text); }

/* ─── Standings tables, shared ─────────────────────────── */
table.standings-t { border-collapse: collapse; width: 100%; font-size: 15px; }
table.standings-t thead th {
    font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase;
    text-align: left; padding: 0 8px 7px; border-bottom: 2px solid var(--ink);
    color: var(--ink-soft); background: var(--paper-soft); font-weight: 500;
}
table.standings-t thead th.n { text-align: right; }
table.standings-t tbody td { padding: 9px 8px; border-bottom: 1px solid var(--rule);
    font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
table.standings-t tbody td.nm { font-family: var(--font-body); font-size: 15.5px; }
table.standings-t tbody td.n { text-align: right; white-space: nowrap; }
table.standings-t tbody td.rk { font-family: var(--font-display); font-weight: 800; font-size: 18px; width: 2.4em; }
table.standings-t tbody tr:last-child td { border-bottom: 0; }
table.standings-t tbody tr.is-you td { background: var(--paper-soft); font-weight: 600; }
.standings-cap { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .09em;
    text-transform: uppercase; color: var(--ink-soft); padding: 9px 0 10px; margin: 0; }
.standings { border-top: 2px solid var(--ink); }

/* ─── Rank numeral, shared ─────────────────────────────── */
.fig { font-family: var(--font-display); font-weight: 800; font-size: 92px; line-height: .86;
    letter-spacing: -.03em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fig .of { font-size: .42em; color: var(--ink-soft); }
.fig small { display: block; font-family: var(--font-mono); font-size: 11.5px; font-weight: 400;
    letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); margin-top: 12px; line-height: 1.45; }
@media (max-width: 760px) { .fig { font-size: 48px; } }

/* ─── Kill v2.46 motion the spec bans ──────────────────── */
.hero-chart-dot, .hero-dot { animation: none !important; box-shadow: none !important; }
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ─── No italic display, anywhere on marketing ───────────
   21 `font-style: italic` declarations survive across the page
   stylesheets on selectors more specific than a bare h1/h2. v3 bans
   italic display outright — emphasis is weight — so this is enforced
   rather than chased selector by selector. Inline <em> in body copy
   is untouched. */
h1, h2, h3, h4, h5,
.hero-title, .hero h1, .page-title, .brand-name, .footer-wm,
[class*="-title"], [class*="-h1"], [class*="-h2"], [class*="-heading"],
blockquote p, .pull-quote, .proof-quote, .narrative-h2, .narrative-h2 em {
    font-style: normal !important;
    font-family: var(--font-display) !important;
}
blockquote p, .pull-quote, .proof-quote { font-weight: 700; }
.narrative-h2 em { color: inherit !important; font-weight: 800; }
/* body prose keeps its own face */
p, li, td, dd, .lede, .sub, figcaption { font-family: var(--font-body); }

/* ═══ pricing.html — the ledger table ════════════════════
   Replaces the three equal tier cards. Recommended tier is marked
   by a 2px ink outline down its column, not by a badge, and there
   is one primary CTA on the whole section (HF-10 + HF-20). */
.tiers-section { padding: 62px 0; border-top: 2px solid var(--ink); }
.tiers-section h2 { margin: 6px 0 6px; max-width: 24ch; }
.tiers-sub { color: var(--ink-soft); max-width: 64ch; margin: 0 0 22px; }

.billing-toggle-wrap {
    display: inline-flex; gap: 0; margin: 0 0 26px;
    border: 2px solid var(--ink); border-radius: 2px; padding: 0; background: transparent;
}
.billing-btn {
    background: transparent; color: var(--ink); border: 0; border-radius: 0;
    font-family: var(--font-body); font-weight: 600; font-size: 15px;
    padding: 10px 18px; cursor: pointer; min-height: 44px; box-shadow: none;
}
.billing-btn--active { background: var(--ink); color: var(--paper); box-shadow: none; }
.billing-save-tag {
    font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .06em;
    margin-left: 7px; opacity: .8;
}

.ledger-wrap { overflow-x: auto; }
table.ledger { border-collapse: collapse; width: 100%; min-width: 720px; font-size: 15px; }
table.ledger thead th {
    text-align: left; vertical-align: bottom; padding: 0 14px 14px;
    border-bottom: 2px solid var(--ink); background: transparent;
    font-family: var(--font-body); font-weight: 400;
}
table.ledger thead th.row-label { width: 34%; }
table.ledger .t-name {
    display: block; font-family: var(--font-display); font-weight: 800; font-size: 21px;
    letter-spacing: -.01em; margin-bottom: 4px;
}
table.ledger .tier-price {
    font-family: var(--font-display); font-weight: 800; font-size: 34px; line-height: 1;
    letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
table.ledger .tier-price .per { font-size: .4em; font-weight: 700; color: var(--ink-soft); margin-left: 2px; }
table.ledger .t-sites {
    display: block; font-family: var(--font-mono); font-size: 11px; letter-spacing: .09em;
    text-transform: uppercase; color: var(--ink-soft); margin-top: 7px;
}
table.ledger .tier-annual {
    display: block; font-size: 12.5px; color: var(--ink-soft); margin-top: 5px; font-weight: 400;
}
table.ledger .t-roi {
    display: block; font-family: var(--font-mono); font-size: 11px; color: var(--positive);
    margin-top: 6px; font-weight: 600;
}
table.ledger tbody td {
    padding: 11px 14px; border-bottom: 1px solid var(--rule);
    font-family: var(--font-mono); font-variant-numeric: tabular-nums;
}
table.ledger tbody td.row-label {
    font-family: var(--font-body); font-size: 15.5px; color: var(--ink);
}
table.ledger .row-note {
    display: block; font-size: 13px; color: var(--ink-soft); margin-top: 2px;
}
table.ledger tbody td.is-off { color: var(--ink-soft); }
table.ledger tbody tr:last-child td { border-bottom: 0; }

/* the recommended column — outline, no badge */
table.ledger .is-recommended { box-shadow: inset 2px 0 0 var(--ink), inset -2px 0 0 var(--ink); background: var(--paper-soft); }
table.ledger thead th.is-recommended { box-shadow: inset 2px 0 0 var(--ink), inset -2px 0 0 var(--ink), inset 0 2px 0 var(--ink); }
table.ledger tbody tr:last-child td.is-recommended { box-shadow: inset 2px 0 0 var(--ink), inset -2px 0 0 var(--ink), inset 0 -2px 0 var(--ink); }
/* the calculator's live match still highlights its column head */
table.ledger thead th.tier-matched { background: var(--paper-soft); }

.ledger-actions { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; margin-top: 26px; }
.ledger-foot { flex: 1 1 100%; font-size: 14.5px; color: var(--ink-soft); margin: 4px 0 0; max-width: 72ch; }

/* ── Left-align pricing. Centring is permitted only in table cells. ── */
.tiers-section, .tiers-section h2, .tiers-sub,
.calculator-section, .comparison-section, .faq-section, .cta-section,
.acquirer-section, .lite-callout-section,
.calculator-section h2, .comparison-section h2, .faq-section h2, .cta-section h2,
.acquirer-section h2, .pricing-screenshot-section, .hero.pricing-hero {
    text-align: left !important;
}
.hero h1, .hero .hero-sub, .cta-section p, .faq-section p, .comparison-section p {
    margin-left: 0 !important; margin-right: 0 !important;
}
@media (max-width: 640px) {
    table.ledger .tier-price { font-size: 26px; }
    .tiers-section { padding: 42px 0; }
}

/* pricing.html hero is the last centre-axis holdout (5 nodes measured) */
.hero, .hero .eyebrow, .hero h1, .hero .hero-sub,
.pricing-screenshot-label, .pricing-screenshot-section {
    text-align: left !important;
}
.hero h1, .hero .hero-sub, .pricing-screenshot-label { margin-left: 0 !important; margin-right: 0 !important; }
.hero .eyebrow { justify-content: flex-start; }