/* ===== Base Styles ===== */
    *, *::before, *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    /* Reduced motion */
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
      }
    }

    /* ===== Main ===== */
    main {
      flex: 1;
    }

    /* ===== CTA Section ===== */
    .cta {
      padding: var(--space-24) var(--space-6);
      text-align: center;
      background: var(--bg-surface);
    }

    .cta-inner {
      max-width: 600px;
      margin: 0 auto;
    }

    /* Without a line-height of its own the heading inherits the body's 1.6,
       which opens a 64px gap inside a two-line heading at this size. Balance
       stops the last line being one stranded word. */
    .cta h2 {
      font-size: clamp(1.75rem, 4vw, 2.5rem);
      font-weight: 700;
      line-height: 1.2;
      text-wrap: balance;
      margin-bottom: var(--space-4);
    }

    .cta p {
      font-size: 1.125rem;
      color: var(--text-muted);
      margin-bottom: var(--space-8);
    }

    /* For a CTA with a primary and a secondary action. Wraps to a stack on a
       phone, where the rule below makes each button full width. */
    .cta-buttons {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: var(--space-4);
    }

    @media (max-width: 480px) {
      .cta .btn {
        width: 100%;
      }
    }

    /* ===== Answer pages ===== */
    /* Chart colour roles, scoped to the figure because :root belongs to
       chrome.css. What each role means, and the contrast figures, are in the
       comment on .chart-now below. */
    .chart-figure {
      --chart-now: var(--primary);
      --chart-now-2: #5A3312;
      --chart-now-3: #C98244;
      --chart-now-4: #7A4520;
      --chart-alt: var(--accent);
      --chart-neutral: #7A8AA1;
      --chart-scale-good: #8494AB;
      --chart-scale-mid: #56667E;
      --chart-scale-poor: #1E293B;
    }

    @media (prefers-color-scheme: dark) {
      .chart-figure {
        --chart-now-2: #F2CDA4;
        --chart-now-3: #94592A;
        --chart-now-4: #E3A86F;
        --chart-neutral: #5E6E87;
        --chart-scale-good: #5E6E87;
        --chart-scale-mid: #94A3B8;
        --chart-scale-poor: #E2E8F0;
      }
    }

    .answer-main { max-width: 800px; margin: 0 auto; padding: 0 var(--space-6); }

    .breadcrumb { font-size: 0.875rem; color: var(--text-muted); padding-top: var(--space-12); margin-bottom: var(--space-6); }
    .breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2); padding: 0; margin: 0; }
    .breadcrumb li:not(:last-child)::after { content: "/"; margin-left: var(--space-2); color: var(--text-faint); }
    .breadcrumb a { color: var(--text-muted); text-decoration: none; }
    .breadcrumb a:hover { color: var(--primary); text-decoration: underline; }

    .answer-header { padding: var(--space-8) 0 var(--space-8); }
    .answer-header h1 { font-size: clamp(1.9rem, 4.5vw, 2.75rem); line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 var(--space-4); }
    .answer-standfirst { font-size: 1.15rem; line-height: 1.6; color: var(--text-muted); margin: 0; }
    /* Byline written by tools/update_sitemap.py. The date is the page's last
       content change, not its last commit; see tools/page_dates.py. */
    .answer-meta { font-size: 0.875rem; line-height: 1.5; color: var(--text-muted); margin: var(--space-4) 0 0; }
    .answer-meta a { color: inherit; text-decoration: underline; text-underline-offset: 0.15em; }
    .answer-meta a:hover { color: var(--primary); }

    .answer-summary { background: var(--bg-elevated); border: 1px solid var(--border-subtle); border-left: 4px solid var(--primary); border-radius: var(--radius-md); padding: var(--space-6); margin: var(--space-8) 0; }
    .answer-summary h2 { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); margin: 0 0 var(--space-3); }
    .answer-summary ul { margin: 0; padding-left: var(--space-6); }
    .answer-summary li { margin-bottom: var(--space-2); line-height: 1.6; }
    .answer-summary li:last-child { margin-bottom: 0; }

    .answer-toc { border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: var(--space-6); margin: var(--space-8) 0; }
    .answer-toc h2 { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); margin: 0 0 var(--space-3); }
    .answer-toc ol { margin: 0; padding-left: var(--space-6); }
    .answer-toc li { margin-bottom: var(--space-2); }
    .answer-toc a { color: var(--text); text-decoration: none; }
    .answer-toc a:hover { color: var(--primary); text-decoration: underline; }

    /* The FAQ sits outside .answer-body, so it has to be named here or its
       heading lands 16px under the prose instead of on the same 48px rhythm. */
    .answer-body h2,
    .answer-faq h2 { font-size: clamp(1.35rem, 2.6vw, 1.7rem); line-height: 1.25; margin: var(--space-12) 0 var(--space-4); scroll-margin-top: 90px; }
    .answer-body h3 { font-size: 1.1rem; margin: var(--space-8) 0 var(--space-3); }
    .answer-body p { line-height: 1.75; margin: 0 0 var(--space-4); }
    .answer-body ul, .answer-body ol { line-height: 1.75; margin: 0 0 var(--space-4); padding-left: var(--space-6); }
    .answer-body li { margin-bottom: var(--space-2); }
    .answer-body a { color: var(--primary); }
    .answer-body strong { font-weight: 650; }

    /* Figures: inline SVG chart plus its data table. The table lives inside
       the figure, between the SVG and the figcaption, so the caption always
       describes something on screen: the chart and table on a wide screen,
       the table alone on a phone, where the SVG is hidden (see below). */
    .chart-figure { margin: var(--space-8) 0; border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); background: var(--bg-surface); overflow: hidden; }
    .chart-figure .data-table-wrap { --table-bg: var(--bg-surface); margin: 0; padding: var(--space-4) var(--space-6); border-top: 1px solid var(--border-subtle); }
    .chart-figure svg { display: block; width: 100%; height: auto; }
    .chart-figure figcaption { padding: var(--space-4) var(--space-6); font-size: 0.875rem; color: var(--text-muted); border-top: 1px solid var(--border-subtle); background: var(--bg-elevated); }
    .chart-axis { stroke: var(--border); stroke-width: 1; }
    .chart-label { fill: var(--text-muted); font-family: var(--font-sans); font-size: 13px; }
    .chart-value { fill: var(--text); font-family: var(--font-sans); font-size: 13px; font-weight: 650; }
    /* Colour roles. A colour means the same thing on every answer page, so a
       reader moving between sibling pages never relearns the key:
         .chart-now      copper: what you pay now, the incumbent platform or cost
         .chart-alt      mint: the alternative the page asks you to weigh
         .chart-neutral  slate: options with no incumbent, such as market price
                         ranges. Mythic Works is never coloured as the good
                         option; where it appears among market options it takes
                         this colour too and its label identifies it
         .chart-scale-*  good, mid, poor: a separate slate ramp for threshold
                         bands, so brand colours never pass judgement. The most
                         severe band has the most contrast in both themes
       .chart-now-2 to -4 are extra shades of the "now" role for a stacked bar
       whose segments are all what you pay now. They are ordered so segments
       that sit side by side are two or more steps apart: now (mid), now-2
       (strongest), now-3 (faintest), now-4 (between now and now-2).
       Contrast against --bg-surface, light / dark (WCAG floor for graphics
       is 3:1):
         now 5.3 / 5.3, now-2 11.0 / 11.6, now-3 3.1 / 3.1, now-4 7.8 / 8.4,
         alt 5.1 / 9.4, neutral 3.5 / 3.4,
         scale-good 3.1 / 3.4, scale-mid 5.8 / 6.8, scale-poor 14.6 / 14.1.
       Adjacent segments, light / dark: now|now-2 2.1 / 2.2, now-2|now-3
       3.5 / 3.8, now-3|now-4 2.5 / 2.7, good|mid 1.9 / 2.0, mid|poor
       2.5 / 2.1. The positional tints these replace were about 1.6 apart.
       Neutral is deliberately mid-tone rather than strong: a bar can carry
       its .chart-value inside it (the agency bar on small-business-website-cost
       does), and --text on neutral is 5.3 / 4.7, over the 4.5 text floor. */
    .chart-now { fill: var(--chart-now); }
    .chart-now-2 { fill: var(--chart-now-2); }
    .chart-now-3 { fill: var(--chart-now-3); }
    .chart-now-4 { fill: var(--chart-now-4); }
    .chart-alt { fill: var(--chart-alt); }
    .chart-neutral { fill: var(--chart-neutral); }
    .chart-scale-good { fill: var(--chart-scale-good); }
    .chart-scale-mid { fill: var(--chart-scale-mid); }
    .chart-scale-poor { fill: var(--chart-scale-poor); }
    .chart-legend { fill: var(--text-muted); font-family: var(--font-sans); font-size: 12px; }
    .chart-rule { stroke: var(--border-subtle); stroke-width: 1; stroke-dasharray: 3 3; }

    /* Scroll shadows. The two "local" gradients scroll with the content and
       paint over the two "scroll" shadows only when that edge is reached, so
       a shadow shows exactly where more columns sit off-screen. --table-bg
       has to match whatever the wrap sits on, or the covers show as bands. */
    .data-table-wrap {
      --table-bg: var(--bg);
      --table-shadow: color-mix(in srgb, var(--text) 22%, transparent);
      overflow-x: auto;
      margin: var(--space-6) 0;
      background:
        linear-gradient(to right, var(--table-bg) 30%, transparent) left center / 40px 100% no-repeat local,
        linear-gradient(to left, var(--table-bg) 30%, transparent) right center / 40px 100% no-repeat local,
        radial-gradient(farthest-side at 0 50%, var(--table-shadow), transparent) left center / 14px 100% no-repeat scroll,
        radial-gradient(farthest-side at 100% 50%, var(--table-shadow), transparent) right center / 14px 100% no-repeat scroll;
    }
    .data-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
    .data-table caption { text-align: left; font-size: 0.875rem; color: var(--text-muted); padding-bottom: var(--space-3); }
    .data-table th, .data-table td { text-align: left; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border-subtle); }
    .data-table thead th { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); border-bottom: 1px solid var(--border); }
    /* nowrap keeps "$1,500 to $2,500" on one line where there is room. Phones
       let ranges wrap again (see the 640px block); a table still too wide
       scrolls, and the scroll shadow above says so. */
    .data-table td.num, .data-table th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
    .data-table tbody tr:last-child td,
    .data-table tbody tr:last-child th { border-bottom: none; }

    .answer-summary a,
    .answer-next a,
    .answer-faq a,
    .answer-callout a { color: var(--primary); }
    .answer-summary a:visited,
    .answer-next a:visited,
    .answer-faq a:visited,
    .answer-callout a:visited,
    .answer-body a:visited { color: var(--primary); }
    .answer-next a:hover,
    .answer-summary a:hover,
    .answer-faq a:hover,
    .answer-callout a:hover { color: var(--primary-hover); }

    .answer-callout { border: 1px solid var(--border); border-left: 4px solid var(--accent); border-radius: var(--radius-md); padding: var(--space-6); margin: var(--space-8) 0; background: var(--bg-surface); }
    .answer-callout p:last-child { margin-bottom: 0; }

    .answer-faq details { border-bottom: 1px solid var(--border-subtle); padding: var(--space-4) 0; }
    .answer-faq summary { cursor: pointer; font-weight: 650; line-height: 1.5; }
    .answer-faq summary::marker { color: var(--primary); }
    .answer-faq details p { margin-top: var(--space-3); margin-bottom: 0; }

    /* Sources (#107). Every link here was opened and checked against the
       figure it supports, on the date it carries. A figure that could not be
       checked is not listed; it is reworded or flagged instead. */
    .answer-sources { margin: var(--space-12) 0 0; }
    .answer-sources h2 { font-size: clamp(1.35rem, 2.6vw, 1.7rem); line-height: 1.25; margin: 0 0 var(--space-3); scroll-margin-top: 90px; }
    .answer-sources-note { font-size: 0.95rem; line-height: 1.6; color: var(--text-muted); margin: 0 0 var(--space-4); }
    .answer-sources ol { margin: 0; padding-left: var(--space-6); font-size: 0.95rem; line-height: 1.6; }
    .answer-sources li { margin-bottom: var(--space-3); overflow-wrap: anywhere; }
    .answer-sources a { color: var(--primary); }
    .answer-sources a:visited { color: var(--primary); }
    .answer-sources a:hover { color: var(--primary-hover); }
    .answer-sources time { color: var(--text-muted); white-space: nowrap; }

    .answer-next { margin: var(--space-12) 0; padding: var(--space-6); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); background: var(--bg-elevated); }
    .answer-next h2 { font-size: 1.1rem; margin: 0 0 var(--space-3); }
    .answer-next ul { list-style: none; padding: 0; margin: 0; }
    .answer-next li { margin-bottom: var(--space-2); }

    /* ===== Answer page tools (#113) ===== */
    /* Hub cards. Each verdict is quoted from its own page, and
       tests/answer_tools.test.mjs checks that it still is. The selectors carry
       .answer-body because the prose list rules above would otherwise win. */
    .answer-body .answer-cards { list-style: none; padding: 0; margin: 0 0 var(--space-6); display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: var(--space-4); }
    .answer-body .answer-card { margin: 0; padding: var(--space-6); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); background: var(--bg-surface); display: flex; flex-direction: column; gap: var(--space-3); }
    .answer-body .answer-card h3 { margin: 0; font-size: 1.05rem; line-height: 1.35; text-wrap: balance; }
    .answer-body .answer-card h3 a { color: var(--text); text-decoration: underline; text-decoration-color: var(--primary); text-underline-offset: 0.2em; }
    .answer-body .answer-card h3 a:hover { color: var(--primary); }
    .answer-body .answer-card p { margin: 0; line-height: 1.6; }
    .answer-body p.answer-card-stay { margin-top: auto; padding-top: var(--space-3); border-top: 1px solid var(--border-subtle); font-size: 0.95rem; color: var(--text-muted); }
    .answer-body .answer-card-stay strong { color: var(--text); }

    /* Shared tool frame: the checklist, the self-check and the copy buttons.
       Controls that only work with JavaScript carry the hidden attribute in
       the markup and are revealed by assets/js/answer-tools.js. */
    .answer-tool { min-width: 0; margin: var(--space-6) 0 var(--space-8); padding: var(--space-6); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); background: var(--bg-surface); }
    .answer-tool legend { padding: 0 var(--space-2); margin-left: calc(-1 * var(--space-2)); font-weight: 650; }
    .answer-tool [hidden] { display: none !important; }
    .answer-tool-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-4); margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--border-subtle); }
    .answer-body .answer-tool-result { margin: 0; font-weight: 650; line-height: 1.5; }
    .answer-body .answer-tool-next { margin: var(--space-4) 0 0; line-height: 1.6; }
    .answer-tool .btn { min-height: 44px; }

    /* Checklist. The whole label is the target, and the box itself is 24px. */
    .answer-body .answer-checklist ol { margin: var(--space-4) 0 0; padding-left: var(--space-6); }
    .answer-body .answer-checklist li { margin-bottom: var(--space-3); }
    .answer-checklist label { display: grid; grid-template-columns: 24px 1fr; gap: var(--space-3); align-items: baseline; cursor: pointer; }
    .answer-checklist input[type="checkbox"] { width: 24px; height: 24px; margin: 0; position: relative; top: 0.3em; accent-color: var(--primary); cursor: pointer; }

    /* Self-check. One fieldset per criterion, a yes/no pair in each. */
    .answer-body .answer-selfcheck h3 { margin: 0 0 var(--space-2); }
    .answer-selfcheck fieldset { min-width: 0; border: 0; padding: var(--space-4) 0; border-bottom: 1px solid var(--border-subtle); }
    .answer-selfcheck legend { padding: 0; margin: 0 0 var(--space-1); font-weight: 400; line-height: 1.6; }
    .answer-choices { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); }
    .answer-choices label { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; padding-right: var(--space-2); cursor: pointer; }
    .answer-choices input[type="radio"] { width: 24px; height: 24px; margin: 0; accent-color: var(--primary); cursor: pointer; }
    .answer-selfcheck .answer-tool-bar { border-top: 0; padding-top: 0; align-items: flex-start; }
    .answer-selfcheck .answer-tool-result { flex: 1 1 280px; font-weight: 400; }
    .answer-body .answer-selfcheck .answer-tool-result p { margin: 0 0 var(--space-3); line-height: 1.6; }
    .answer-body .answer-selfcheck .answer-tool-result p:first-child { font-weight: 650; }

    /* Print and copy, for the page that is meant to be taken into a meeting. */
    .answer-copy { padding: var(--space-4) var(--space-6); }
    .answer-copy-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }

    @media (max-width: 480px) {
      .answer-copy-actions .btn { flex: 1 1 100%; }
    }

    @media (max-width: 640px) {
      .answer-main { padding: 0 var(--space-4); }
      .answer-header { padding: var(--space-12) 0 var(--space-6); }

      /* The SVG scales with its viewBox, so its 12-13px labels land near 6px on a
         phone. Every chart-figure carries a data table with the same numbers,
         inside the figure, so hide the drawing rather than ship one nobody can
         read. A chart without that table would leave phone readers with
         nothing, so never add one without it. The table is then the figure's first visible child. */
      .chart-figure svg { display: none; }
      .chart-figure .data-table-wrap { border-top: none; padding: var(--space-4); }

      /* A range like "$100,000 to more than $1,000,000" held on one line pushes
         even a two-column table past the screen and crushes the row headers.
         The figures themselves have no spaces, so they never break mid-number;
         letting the range wrap at "to" is the right trade on a phone. */
      .data-table td.num, .data-table th.num { white-space: normal; }
    }

    /* A booking button and a list of links are no use on paper. */
    @media print {
      .answer-toc, .answer-next, .breadcrumb, .cta, .answer-tool .btn, .answer-tool-bar, .answer-copy { display: none; }
    }