/* Shared by every article under /articles. Keeps the site's palette and type,
   but sets a proper reading measure — the home page is a pitch, this is prose. */
:root {
    --bg: #050816;
    --surface: #0b1020;
    --surface-2: #0f172a;
    --navy: #0b1530;
    --blue: #3b82f6;
    --blue-d: #2b6cb0;
    --mint: #34d3c6;
    --mint-d: #14b8a6;
    /* The mark is gold. Mint stays the interface accent; gold is the brand
       showing up — the mark, the rules, the header wash. */
    --gold: #d4b046;
    --gold-d: #a8842c;
    --text: #f2f6fa;
    --soft: #b6c3d1;
    --muted: #8b9bab;
    --line: rgba(148, 163, 184, 0.22);
    --line-s: rgba(148, 163, 184, 0.12);
    --f-h: "Saira", system-ui, -apple-system, sans-serif;
    --f-b: "Barlow", system-ui, -apple-system, sans-serif;
    --f-m: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    --shadow: 0 18px 45px rgba(2, 6, 18, 0.6);
}
*, *::before, *::after { box-sizing: border-box; }
body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--f-b);
    font-size: 17.5px;
    line-height: 1.72;
    -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--mint); }

.wrap { max-width: 1140px; margin: 0 auto; padding: 0 24px; }
.measure { max-width: 720px; margin-left: auto; margin-right: auto; }

/* ── header ── */
.site-head {
    position: sticky; top: 0; z-index: 40;
    background: rgba(5, 8, 22, 0.9);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--line-s);
}
.site-head .in {
    display: flex; align-items: center; justify-content: space-between;
    gap: 18px; padding: 13px 0;
}
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; }
.brand img { width: 36px; height: 36px; border-radius: 9px; }
.brand b { display: block; font-family: var(--f-h); font-size: 15.5px; font-weight: 700; }
.brand span { display: block; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.site-head nav { display: flex; gap: 20px; font-size: 14.5px; }
.site-head nav a { color: var(--muted); text-decoration: none; }
.site-head nav a:hover { color: var(--text); }
@media (max-width: 720px) { .site-head nav { display: none; } }

/* ── article head ── */
.a-head { padding: 62px 0 34px; }
.a-kicker {
    font-family: var(--f-h); font-size: 11px; font-weight: 600;
    letter-spacing: 0.22em; text-transform: uppercase; color: var(--mint);
    margin: 0 0 16px;
}
.a-head h1 {
    font-family: var(--f-h); font-size: clamp(34px, 5.2vw, 56px); font-weight: 700;
    line-height: 1.05; letter-spacing: -0.03em; margin: 0 0 20px;
}
.a-deck { font-size: 20px; line-height: 1.6; color: var(--soft); margin: 0 0 26px; }
.a-meta {
    display: flex; gap: 18px; flex-wrap: wrap; align-items: center;
    padding-top: 22px; border-top: 1px solid var(--line-s);
    font-size: 13.5px; color: var(--muted);
}
.a-meta b { color: var(--text); font-weight: 600; }
.a-tag {
    font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase;
    padding: 4px 10px; border-radius: 99px; border: 1px solid var(--line); color: var(--muted);
}

/* ── prose ── */
.prose { padding-bottom: 40px; }
.prose h2 {
    font-family: var(--f-h); font-size: clamp(25px, 3.2vw, 33px); font-weight: 700;
    line-height: 1.15; letter-spacing: -0.025em; margin: 62px 0 16px;
}
.prose h3 {
    font-family: var(--f-h); font-size: 20px; font-weight: 600;
    letter-spacing: -0.015em; margin: 34px 0 10px;
}
.prose p { margin: 0 0 20px; color: var(--soft); }
.prose p strong, .prose li strong { color: var(--text); font-weight: 600; }
.prose ul { margin: 0 0 22px; padding-left: 22px; color: var(--soft); }
.prose li { margin-bottom: 7px; }
.prose li::marker { color: var(--mint-d); }
.prose hr { border: 0; border-top: 1px solid var(--line-s); margin: 52px 0; }

.lead { font-size: 19.5px; color: var(--text); }

blockquote {
    margin: 30px 0; padding: 4px 0 4px 24px;
    border-left: 3px solid var(--mint);
    font-family: var(--f-h); font-size: 21px; font-weight: 500;
    line-height: 1.5; letter-spacing: -0.015em; color: var(--text);
}

.callout {
    margin: 34px 0; padding: 24px 26px;
    background: var(--surface); border: 1px solid var(--line);
    border-left: 3px solid var(--mint); border-radius: 12px;
}
.callout p { margin: 0; color: var(--soft); }
.callout p + p { margin-top: 12px; }
.callout b { color: var(--text); }

/* ── figures ── */
figure { margin: 46px 0; }
figure.bleed { max-width: 980px; margin-left: auto; margin-right: auto; }
.fig-box {
    background: linear-gradient(160deg, var(--surface), var(--navy));
    border: 1px solid var(--line); border-radius: 16px;
    padding: 30px 26px; box-shadow: var(--shadow);
}
figcaption {
    margin-top: 14px; font-size: 13.5px; line-height: 1.6; color: var(--muted);
    text-align: center;
}
figcaption b { color: var(--soft); font-weight: 600; }

/* ── stat cards ── */
.stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 36px 0; }
.stat {
    background: var(--surface); border: 1px solid var(--line);
    border-radius: 13px; padding: 22px 20px;
}
.stat b {
    display: block; font-family: var(--f-h); font-size: 30px; font-weight: 700;
    line-height: 1.05; letter-spacing: -0.035em; color: var(--mint); margin-bottom: 6px;
}
.stat span { display: block; font-size: 13.5px; line-height: 1.5; color: var(--soft); }
.stat cite { display: block; margin-top: 10px; font-style: normal; font-size: 11.5px; color: var(--muted); }
@media (max-width: 760px) { .stat-row { grid-template-columns: 1fr; } }

/* ── compare table ── */
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 34px 0; }
.cmp { background: var(--surface); border: 1px solid var(--line); border-radius: 13px; padding: 22px 22px 24px; }
.cmp.good { border-color: rgba(52, 211, 198, 0.45); }
.cmp h4 {
    margin: 0 0 10px; font-family: var(--f-h); font-size: 12px; font-weight: 600;
    letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted);
}
.cmp.good h4 { color: var(--mint); }
.cmp p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--soft); }
/* A comparison reads better as points than as a paragraph, and .prose ul would
   otherwise put its own 22px tail inside the card. */
.cmp ul { margin: 0; padding-left: 18px; }
.cmp li { font-size: 15.5px; line-height: 1.55; margin-bottom: 7px; }
.cmp li:last-child { margin-bottom: 0; }
@media (max-width: 700px) { .compare { grid-template-columns: 1fr; } }

/* ── end CTA ── */
.a-cta {
    margin: 60px 0 80px; padding: 40px 38px;
    background: linear-gradient(135deg, var(--navy), var(--surface));
    border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow);
}
.a-cta h2 { font-family: var(--f-h); font-size: clamp(24px, 3vw, 31px); font-weight: 700; letter-spacing: -0.025em; margin: 0 0 12px; }
.a-cta p { color: var(--soft); margin: 0 0 24px; max-width: 60ch; }
.btn {
    display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
    font-family: var(--f-b); font-size: 15.5px; font-weight: 600;
    padding: 13px 26px; border-radius: 10px; border: 1px solid transparent; cursor: pointer;
}
.btn.p { background: var(--mint); color: #04231f; }
.btn.p:hover { filter: brightness(1.08); }
.btn.g { background: transparent; color: var(--text); border-color: var(--line); margin-left: 10px; }
.btn.g:hover { border-color: var(--mint); color: var(--mint); }

footer.site-foot {
    border-top: 1px solid var(--line-s); padding: 30px 0 46px;
    font-size: 13.5px; color: var(--muted);
}
.site-foot .in { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.site-foot a { color: var(--muted); }

/* ── brand imagery ─────────────────────────────────────────────────────────
   Derivatives from assets/brand_2026 via static/brand/. Masters are 2048px
   PNGs and never referenced directly — see CLAUDE.md §5. */
.a-hero {
    position: relative;
    margin: 0 0 8px;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid var(--line);
    background: var(--surface);
}
.a-hero img {
    width: 100%; height: 340px; object-fit: cover; object-position: 50% 45%;
    filter: brightness(1.75) contrast(1.08) saturate(1.15);
}
.a-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(5, 8, 22, 0.05) 0%, rgba(5, 8, 22, 0.72) 100%);
}
.a-hero .stamp {
    position: absolute; left: 26px; bottom: 22px; z-index: 2;
    display: flex; align-items: center; gap: 13px;
}
.a-hero .stamp img { width: 44px; height: 44px; object-fit: contain; border-radius: 0; }
.a-hero .stamp span {
    font-family: var(--f-h); font-size: 11px; font-weight: 600;
    letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold);
}
@media (max-width: 700px) { .a-hero img { height: 220px; } }

/* Section break: a branded tile used as a rule between major movements. */
.brand-rule {
    position: relative; height: 96px; margin: 58px 0;
    border-radius: 14px; overflow: hidden; border: 1px solid var(--line-s);
}
.brand-rule img {
    width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%;
    filter: brightness(1.9) contrast(1.05) saturate(1.2);
}
.brand-rule::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(90deg, var(--bg) 0%, rgba(5,8,22,.1) 38%,
                rgba(5,8,22,.1) 62%, var(--bg) 100%);
}

/* The kicker and the pull-quote rule carry the gold, so the brand is present in
   the type as well as the pictures. */
.a-kicker { color: var(--gold); }
blockquote { border-left-color: var(--gold); }
.stat b { color: var(--gold); }

.brand-rule-wrap { margin: 58px 0; }
.brand-rule-wrap .brand-rule { margin: 0; }

/* ── price table ───────────────────────────────────────────────────────────
   Added for the pricing article. A published figure is only persuasive if the
   reader can see where it came from, so the source sits in the row, not a
   footnote. Scrolls inside itself rather than pushing the page sideways. */
.ptable-wrap { overflow-x: auto; margin: 34px 0; -webkit-overflow-scrolling: touch; }
.ptable { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 15.5px; }
.ptable th, .ptable td { padding: 11px 14px; border-bottom: 1px solid var(--line-s); text-align: left; }
.ptable th {
    font-family: var(--f-h); font-size: 11.5px; font-weight: 600;
    letter-spacing: .09em; text-transform: uppercase; color: var(--muted);
    border-bottom: 1px solid var(--line);
}
.ptable td { color: var(--soft); line-height: 1.5; }
.ptable td.n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--text); }
.ptable .src { display: block; color: var(--muted); font-size: 12.5px; margin-top: 2px; }
.ptable tr.tot td {
    border-top: 1px solid var(--gold); border-bottom: none;
    padding-top: 15px; color: var(--text); font-weight: 600;
}
.ptable tr.tot td.n { color: var(--gold); }
.ptable tr.mine td { background: rgba(212, 176, 70, .07); }
.ptable tr.mine td.n { color: var(--gold); font-weight: 600; }

/* On a phone the midpoint column is the punchline, so it has to be on screen.
   Tighten the type and let the tier name wrap rather than let the table scroll
   the comparison out of view. */
@media (max-width: 700px) {
    .ptable { min-width: 340px; font-size: 13px; }
    .ptable th, .ptable td { padding: 8px 7px; }
    .ptable th { font-size: 10px; letter-spacing: .06em; }
    .ptable .src { font-size: 11px; }
    .ptable td.n { font-size: 12.5px; }
}

/* ── range chart, phone build ──────────────────────────────────────────────
   The SVG version puts a 370-unit label gutter in front of the bars, so on a
   342px screen the reader meets nine labels and no data. Below 700px the SVG
   is replaced by this — same numbers, same axis, laid out with the label above
   its own bar so the comparison survives the width. */
.bars { display: none; }
@media (max-width: 700px) {
    .fig-desktop { display: none; }
    .bars { display: block; position: relative; padding: 4px 0 26px; }
    .bars .bar-row { margin-bottom: 15px; }
    .bars .bars-head { margin: 0 0 16px; }
    .bars .bars-head b { display: block; font-family: var(--f-h); font-size: 14.5px; color: var(--text); }
    .bars .bars-head span { display: block; color: var(--muted); font-size: 11.5px; line-height: 1.45; margin-top: 3px; }
    .bars .top {
        display: flex; justify-content: space-between; align-items: baseline;
        gap: 10px; margin-bottom: 6px;
    }
    .bars .bl { color: var(--soft); font-size: 12.5px; line-height: 1.3; }
    .bars .br { color: var(--text); font-size: 12.5px; white-space: nowrap; font-variant-numeric: tabular-nums; }
    .bars .top { position: relative; z-index: 2; }
    .bars .track {
        display: block; position: relative; z-index: 0; height: 10px;
        background: rgba(148, 163, 184, .10); border-radius: 5px;
    }
    .bars .track i { position: absolute; top: 0; height: 10px; background: #4a8fd4; border-radius: 4px; }
    /* the reference line runs the height of the stack, label hanging below */
    .bars .l1 {
        position: absolute; top: 0; bottom: 26px; left: 18.75%;
        width: 2px; background: var(--gold); z-index: 1;
    }
    .bars .l1 > span {
        position: absolute; bottom: -22px; left: 50%; transform: translateX(-50%);
        white-space: nowrap; color: var(--gold); font-family: var(--f-h);
        font-size: 11.5px; font-weight: 700;
    }
    .bars .axis {
        display: flex; justify-content: space-between;
        margin-top: 10px; color: var(--muted); font-size: 10.5px;
    }
}

/* ── sources ───────────────────────────────────────────────────────────────
   The whole argument is other people's published prices, so the list of them
   is part of the article, not an afterthought. Links stay visible in the price
   table too — an unlinked firm name in a table of figures invites doubt. */
.prose ul.sources { list-style: none; padding-left: 0; margin: 26px 0; }
.prose ul.sources li {
    padding: 14px 0 14px 18px; border-left: 2px solid var(--line);
    margin-bottom: 4px; font-size: 16px; line-height: 1.55; color: var(--soft);
}
.prose ul.sources li:hover { border-left-color: var(--gold); }
.prose ul.sources li::marker { content: none; }
.prose ul.sources b { color: var(--text); }
.prose ul.sources span {
    display: block; margin-top: 5px; color: var(--muted); font-size: 13.5px;
}
.ptable a { color: var(--mint); text-decoration: none; border-bottom: 1px solid rgba(52, 211, 198, .35); }
.ptable a:hover { border-bottom-color: var(--mint); }

/* The band summary is the article's headline, so it wears the brand gold; the
   nine-range evidence chart underneath stays blue. Gold steps down to a step
   that passes the dark-surface lightness band as a fill. */
@media (max-width: 700px) {
    .bars--gold .track i { background: #b08a2c; }
}

/* ── the six-block figure ──────────────────────────────────────────────────
   The desktop SVG runs the four stages left to right, which is the whole point
   of it — and which is unreadable the moment the viewport is 390px and each
   stage gets 90 of them. Below 700px the pipeline becomes a stack: same six
   blocks, same numbering, read top to bottom. Blocks 5 and 6 keep the gold that
   marks them as continuous, since the stack cannot show them spanning. */
.blocks { display: none; }
@media (max-width: 700px) {
    .blocks { display: block; }
    .blocks .bars-head { margin: 0 0 16px; }
    .blocks .bars-head b { display: block; font-family: var(--f-h); font-size: 14.5px; color: var(--text); }
    .blocks .bars-head span { display: block; color: var(--muted); font-size: 11.5px; line-height: 1.45; margin-top: 3px; }
    .blocks .blk {
        display: flex; gap: 12px; align-items: baseline;
        padding: 11px 13px; margin-bottom: 8px; border-radius: 9px;
        border: 1px solid rgba(74, 143, 212, .38);
        background: rgba(74, 143, 212, .10);
    }
    .blocks .blk:last-child { margin-bottom: 0; }
    .blocks .blk.dim { border-color: var(--line); background: rgba(148, 163, 184, .07); }
    .blocks .blk.wide { border-color: rgba(212, 176, 70, .45); background: rgba(212, 176, 70, .09); }
    .blocks .n {
        font-family: var(--f-h); font-size: 11px; color: var(--muted);
        letter-spacing: .12em; font-variant-numeric: tabular-nums;
    }
    .blocks .blk b { display: block; font-family: var(--f-h); font-size: 13.5px; color: var(--text); }
    .blocks .blk span:not(.n) {
        display: block; margin-top: 2px; color: var(--soft);
        font-size: 12.5px; line-height: 1.45;
    }
}