/* ===================================
   Tax Radar - Pricing
   Evidence Pack register: one display rate, a worked-examples table, two
   ruled ledgers, one navy consequence anchor, a FAQ and a boxed CTA.
   No card grids, no feature-tier matrix.

   Loaded last, after css/tokens.css, css/fonts.css, css/cookie-consent.css,
   css/footer.css and css/nav.css. Every var() carries the tokens.css hex as a
   fallback so the page still renders correctly if tokens.css fails to load.
   The brand palette is not re-declared here; the two local custom properties
   below are mockup values that have no token, declared the same way the
   homepage, walkthrough, contact and bespoke stylesheets declare theirs.

   The global reset lives here because this page carries no inline <style>
   block and css/footer.css relies on list and heading margins being zeroed.

   Motion: the only animation is the .reveal fade and lift, armed by html.js
   so that with JavaScript off the content is simply visible, and disabled
   outright under prefers-reduced-motion.
   ================================ */

:root {
    /* Mockup value with no token, as on the homepage, walkthrough, contact
       and bespoke pages. */
    --teal-hover: #238A7E;

    /* Body copy inside the navy risk anchor. --ink-soft is correct on paper
       and far too dark on navy; --ink-dim carries the muted furniture there
       but is quieter than these four paragraphs should read. Mockup value,
       8.1:1 on --navy. */
    --on-dark-body: #B8C4DA;
}

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body, 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
    background: var(--paper, #F8F9FA);
    color: var(--navy, #1B2A4A);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

a {
    color: var(--teal, #2A9D8F);
}

a:hover {
    color: var(--teal-hover, #238A7E);
}

img {
    max-width: 100%;
}

/* Skip link --------------------------------------------------------- */

.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--teal, #2A9D8F);
    color: #FFFFFF;
    padding: 8px 16px;
    z-index: 10000;
    text-decoration: none;
    font-size: 15px;
}

.skip-link:focus {
    top: 0;
    outline: 2px solid var(--navy, #1B2A4A);
    outline-offset: 2px;
}

/* Available to assistive technology, out of the visual flow. Used for the
   worked-examples table caption, which names the table for a screen reader
   without repeating the h2 on screen. */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Page shell --------------------------------------------------------- */

.pricing-shell {
    max-width: 1160px;
    margin: 0 auto;
    padding: 0 32px;
}

/* Shared type -------------------------------------------------------- */

/* Page kicker: teal, with the short leading rule, above the h1. */
.kicker {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    font-family: var(--font-mono, 'DM Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
    font-size: 13px;
    letter-spacing: 0.1em;
    color: var(--teal, #2A9D8F);
    text-transform: uppercase;
    margin-bottom: 26px;
}

.kicker-rule {
    width: 28px;
    height: 1px;
    background: var(--teal, #2A9D8F);
    flex: none;
}

/* Section kicker: quieter than the page kicker, teal only on the qualifier,
   so the two do not compete when both are in view. */
.section-tag {
    font-family: var(--font-mono, 'DM Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
    font-size: 12px;
    letter-spacing: 0.14em;
    color: var(--ink-soft, #4A5568);
    text-transform: uppercase;
    margin-bottom: 14px;
}

.section-tag b {
    color: var(--teal, #2A9D8F);
    font-weight: 500;
}

/* The section-tag on the navy anchor, lifted for contrast. */
.section-tag-dark {
    color: var(--ink-dim, #93A3BF);
}

.section-tag-dark b {
    color: var(--teal-bright, #3DB9A4);
}

.section-heading {
    font-family: var(--font-heading, 'Fraunces', Georgia, 'Times New Roman', serif);
    font-weight: 600;
    font-size: clamp(26px, 3.2vw, 36px);
    line-height: 1.15;
    margin-bottom: 16px;
    max-width: 26ch;
}

.section-lede {
    font-size: 17px;
    color: var(--ink-soft, #4A5568);
    max-width: 60ch;
}

/* Mono note lines: the VAT and terms strip under the rate, and the active
   subcontractor definition under the worked examples. */
.note-mono {
    font-family: var(--font-mono, 'DM Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
    font-size: 12px;
    color: var(--ink-soft, #4A5568);
    letter-spacing: 0.06em;
}

/* Buttons ------------------------------------------------------------ */

.btn {
    display: inline-block;
    text-decoration: none;
    font-weight: 500;
    font-size: 15px;
    padding: 12px 24px;
    border-radius: 3px;
    border: 1px solid transparent;
}

.btn:focus-visible {
    outline: 2px solid var(--navy, #1B2A4A);
    outline-offset: 2px;
}

.btn-primary {
    background: var(--teal, #2A9D8F);
    color: #FFFFFF;
}

.btn-primary:hover {
    background: var(--teal-hover, #238A7E);
    color: #FFFFFF;
}

.btn-secondary {
    background: transparent;
    color: var(--navy, #1B2A4A);
    border-color: var(--navy, #1B2A4A);
}

.btn-secondary:hover {
    background: var(--navy, #1B2A4A);
    color: var(--paper, #F8F9FA);
}

.btn-lg {
    font-size: 17px;
    padding: 16px 32px;
}

/* Hero --------------------------------------------------------------- */

.hero {
    padding: 88px 0 64px;
}

/* One h1 carries the whole rate statement. The figure and its unit are
   spans inside it rather than two elements, so the page has a single
   heading and the visual hierarchy is done in CSS. */
.hero h1 {
    display: flex;
    align-items: baseline;
    gap: 18px;
    flex-wrap: wrap;
    margin-bottom: 10px;
    font-weight: 600;
}

.price-figure {
    font-family: var(--font-heading, 'Fraunces', Georgia, 'Times New Roman', serif);
    font-weight: 600;
    font-size: clamp(52px, 9vw, 84px);
    line-height: 1;
    letter-spacing: -0.01em;
}

.price-unit {
    font-family: var(--font-heading, 'Fraunces', Georgia, 'Times New Roman', serif);
    font-weight: 500;
    font-size: clamp(20px, 2.4vw, 26px);
    line-height: 1.3;
    color: var(--ink-soft, #4A5568);
    max-width: 14ch;
}

.hero-lede {
    font-size: 19px;
    color: var(--ink-soft, #4A5568);
    max-width: 56ch;
    margin-top: 18px;
    line-height: 1.65;
}

.hero .note-mono {
    margin-top: 14px;
}

.hero-actions {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 34px;
}

/* The four no-charge facts. A wrapping flex row rather than a grid, so at
   any width they reflow instead of the longest one setting a column. */
.terms-strip {
    display: flex;
    gap: 12px 28px;
    flex-wrap: wrap;
    margin-top: 34px;
    padding-top: 22px;
    border-top: 1px solid var(--rule, #D6DAE1);
    list-style: none;
}

.terms-strip li {
    font-family: var(--font-mono, 'DM Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
    font-size: 12px;
    letter-spacing: 0.08em;
    color: var(--ink-soft, #4A5568);
}

.terms-strip b {
    color: var(--teal, #2A9D8F);
    font-weight: 500;
}

/* Worked examples ---------------------------------------------------- */

.examples {
    padding: 80px 0;
    border-top: 1px solid var(--rule, #D6DAE1);
}

/* A real table: three columns of tabular data with a header row, so the
   figures are announced with their column and the row scope carries the
   supply chain description. */
.examples-table {
    width: 100%;
    margin-top: 44px;
    border: 1px solid var(--rule, #D6DAE1);
    background: #FFFFFF;
    border-collapse: collapse;
    text-align: left;
}

.examples-table thead th {
    background: var(--paper-deep, #EFF1F4);
    font-family: var(--font-mono, 'DM Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.12em;
    color: var(--ink-soft, #4A5568);
    text-transform: uppercase;
    padding: 12px 28px;
}

.examples-table tbody th,
.examples-table tbody td {
    padding: 20px 28px;
    border-bottom: 1px solid var(--paper-deep, #EFF1F4);
    vertical-align: baseline;
}

.examples-table tbody tr:last-child th,
.examples-table tbody tr:last-child td {
    border-bottom: 0;
}

.examples-table tbody th {
    font-size: 15.5px;
    font-weight: 700;
    width: 38%;
}

.examples-sub {
    display: block;
    font-weight: 400;
    color: var(--ink-soft, #4A5568);
    font-size: 13px;
}

.examples-calc {
    font-family: var(--font-mono, 'DM Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
    font-size: 13px;
    color: var(--ink-soft, #4A5568);
}

.examples-cost {
    font-family: var(--font-heading, 'Fraunces', Georgia, 'Times New Roman', serif);
    font-weight: 600;
    font-size: 24px;
}

.examples-per {
    font-family: var(--font-body, 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
    font-weight: 400;
    font-size: 13px;
    color: var(--ink-soft, #4A5568);
    margin-left: 6px;
}

/* The negotiated row carries no figure, so it drops the display face. */
.examples-cost-talk {
    font-size: 17px;
    font-weight: 700;
    color: var(--teal, #2A9D8F);
}

.examples .note-mono {
    margin-top: 14px;
    font-size: 11px;
}

/* Doing it yourself -------------------------------------------------- */

.diy {
    padding: 80px 0;
    border-top: 1px solid var(--rule, #D6DAE1);
}

/* A real ordered list: these eight are a sequence, and the 01..08 markers
   are generated rather than typed so the numbering cannot drift from the
   order of the items. */
.diy-list {
    margin-top: 44px;
    list-style: none;
    counter-reset: diy;
}

.diy-list li {
    counter-increment: diy;
    display: grid;
    grid-template-columns: 64px 1fr;
    gap: 32px;
    align-items: baseline;
    padding: 17px 0;
    border-bottom: 1px solid var(--rule, #D6DAE1);
    font-size: 15.5px;
}

.diy-list li:first-child {
    border-top: 1px solid var(--rule, #D6DAE1);
}

.diy-list li::before {
    content: counter(diy, decimal-leading-zero);
    font-family: var(--font-mono, 'DM Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
    font-size: 12px;
    letter-spacing: 0.06em;
    color: var(--teal, #2A9D8F);
}

.diy-close {
    font-family: var(--font-heading, 'Fraunces', Georgia, 'Times New Roman', serif);
    font-style: italic;
    font-size: 20px;
    line-height: 1.45;
    margin-top: 32px;
    max-width: 52ch;
}

/* Risk anchor -------------------------------------------------------- */

/* Full-bleed navy: the consequence content is the one place on this page
   that leaves the paper ground. */
.risk {
    background: var(--navy, #1B2A4A);
    color: var(--paper, #F8F9FA);
    padding: 84px 0;
}

.risk .section-heading {
    color: var(--paper, #F8F9FA);
}

.risk-list {
    margin-top: 44px;
    border: 1px solid rgba(248, 249, 250, 0.18);
    list-style: none;
}

.risk-row {
    display: grid;
    grid-template-columns: 230px 1fr;
    gap: 36px;
    padding: 28px 32px;
    align-items: baseline;
    border-bottom: 1px solid rgba(248, 249, 250, 0.14);
}

.risk-list li:last-child .risk-row {
    border-bottom: 0;
}

.risk-row h3 {
    font-family: var(--font-heading, 'Fraunces', Georgia, 'Times New Roman', serif);
    font-weight: 600;
    font-size: 22px;
    line-height: 1.25;
    color: var(--paper, #F8F9FA);
}

.risk-row p {
    font-size: 15px;
    color: var(--on-dark-body, #B8C4DA);
    max-width: 62ch;
}

/* Statutory source tag. Set at --ink-dim rather than the mockup's dimmer
   tint: at 10.5px the mockup value falls below 4.5:1 on navy. */
.risk-source {
    font-family: var(--font-mono, 'DM Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
    font-size: 10.5px;
    color: var(--ink-dim, #93A3BF);
    margin-top: 12px;
    letter-spacing: 0.08em;
}

.risk-close {
    font-family: var(--font-heading, 'Fraunces', Georgia, 'Times New Roman', serif);
    font-style: italic;
    font-size: 21px;
    margin-top: 36px;
    max-width: 40ch;
    color: var(--paper, #F8F9FA);
}

/* What the price includes -------------------------------------------- */

.includes {
    padding: 80px 0;
    border-top: 1px solid var(--rule, #D6DAE1);
}

.includes-list {
    margin-top: 44px;
    list-style: none;
}

.includes-row {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 36px;
    padding: 24px 0;
    align-items: baseline;
    border-bottom: 1px solid var(--rule, #D6DAE1);
}

.includes-list li:first-child .includes-row {
    border-top: 1px solid var(--rule, #D6DAE1);
}

.includes-row h3 {
    font-family: var(--font-mono, 'DM Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.1em;
    color: var(--teal, #2A9D8F);
    text-transform: uppercase;
}

.includes-row p {
    font-size: 15px;
    color: var(--ink-soft, #4A5568);
    max-width: 70ch;
}

.includes-row strong {
    color: var(--navy, #1B2A4A);
    font-weight: 700;
}

/* FAQ ---------------------------------------------------------------- */

.faq {
    padding: 80px 0;
    border-top: 1px solid var(--rule, #D6DAE1);
}

.faq-list {
    margin-top: 44px;
    border-top: 1px solid var(--rule, #D6DAE1);
    list-style: none;
}

.faq-item {
    padding: 24px 0;
    border-bottom: 1px solid var(--rule, #D6DAE1);
}

.faq-item h3 {
    font-family: var(--font-heading, 'Fraunces', Georgia, 'Times New Roman', serif);
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 8px;
}

.faq-item p {
    font-size: 15px;
    color: var(--ink-soft, #4A5568);
    max-width: 70ch;
}

/* CTA ---------------------------------------------------------------- */

.cta-section {
    padding: 96px 0;
    border-top: 1px solid var(--rule, #D6DAE1);
}

.cta {
    position: relative;
    border: 1px solid var(--navy, #1B2A4A);
    background: #FFFFFF;
    padding: 56px;
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 48px;
    align-items: center;
}

/* Breaks the top border, so the box reads as a stamped panel. */
.cta-caption {
    position: absolute;
    top: -9px;
    left: 48px;
    background: var(--paper, #F8F9FA);
    padding: 0 12px;
    font-family: var(--font-mono, 'DM Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
    font-size: 10.5px;
    letter-spacing: 0.14em;
    color: var(--teal, #2A9D8F);
}

.cta h2 {
    font-family: var(--font-heading, 'Fraunces', Georgia, 'Times New Roman', serif);
    font-weight: 600;
    font-size: clamp(24px, 2.8vw, 32px);
    line-height: 1.15;
}

.cta p {
    color: var(--ink-soft, #4A5568);
    font-size: 16px;
    margin-top: 12px;
    max-width: 48ch;
}

.cta-action {
    text-align: right;
}

/* Reveal ------------------------------------------------------------- */

/* Armed only once js/reveal.js has swapped html.no-js for html.js, so
   with scripting off the content is simply visible and never hidden. */
.js .reveal {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.js .reveal.is-in {
    opacity: 1;
    transform: none;
}

/* Responsive --------------------------------------------------------- */

@media (max-width: 1024px) {
    .hero {
        padding: 72px 0 56px;
    }

    .examples,
    .diy,
    .includes,
    .faq {
        padding: 64px 0;
    }

    .risk {
        padding: 68px 0;
    }

    /* The 230px and 220px name columns still leave a usable measure here,
       but the 36px gutter no longer earns its width. */
    .risk-row,
    .includes-row {
        gap: 24px;
    }

    .cta-section {
        padding: 80px 0;
    }

    .cta {
        grid-template-columns: 1fr;
        gap: 32px;
        padding: 48px 40px;
    }

    .cta-caption {
        left: 40px;
    }

    .cta-action {
        text-align: left;
    }
}

@media (max-width: 768px) {
    .pricing-shell {
        padding: 0 24px;
    }

    .hero {
        padding: 56px 0 48px;
    }

    .hero-lede {
        font-size: 17px;
    }

    /* The rate and its unit stop sharing a baseline once the unit wraps to
       its own line; the gap becomes vertical. */
    .hero h1 {
        gap: 4px 18px;
    }

    /* Below this width the fixed name columns leave no usable measure for
       the body copy, so both ledgers stack name over body. */
    .risk-row,
    .includes-row {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .risk-row {
        padding: 24px 24px;
    }

    .diy-list li {
        grid-template-columns: 44px 1fr;
        gap: 20px;
    }

    .cta-section {
        padding: 64px 0;
    }
}

@media (max-width: 640px) {
    .pricing-shell {
        padding: 0 20px;
    }

    .examples,
    .diy,
    .includes,
    .faq {
        padding: 56px 0;
    }

    .risk {
        padding: 56px 0;
    }

    /* Three columns of figures do not fit the viewport, so each row becomes
       its own block: the supply chain as a heading, then the calculation and
       the cost each labelled by the column head it lost. The header row is
       taken out of the visual flow rather than removed, so the table keeps
       its structure for assistive technology. */
    .examples-table,
    .examples-table tbody,
    .examples-table tbody tr,
    .examples-table tbody th,
    .examples-table tbody td {
        display: block;
        width: auto;
    }

    .examples-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
    }

    .examples-table tbody tr {
        padding: 20px 0;
        border-bottom: 1px solid var(--paper-deep, #EFF1F4);
    }

    .examples-table tbody tr:last-child {
        border-bottom: 0;
    }

    .examples-table tbody th,
    .examples-table tbody td {
        padding: 0 20px;
        border-bottom: 0;
    }

    .examples-table tbody td {
        margin-top: 8px;
    }

    .examples-table tbody td::before {
        content: attr(data-label) " ";
        font-family: var(--font-mono, 'DM Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
        font-size: 10.5px;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--ink-soft, #4A5568);
        display: block;
        margin-bottom: 2px;
    }

    .terms-strip {
        gap: 10px 20px;
    }

    .diy-close,
    .risk-close,
    .includes-row p,
    .faq-item p,
    .cta p {
        max-width: none;
    }

    .risk-row {
        padding: 22px 20px;
    }

    .cta {
        padding: 36px 24px;
    }

    /* At this width the caption is wider than the border run it breaks, so
       it leaves the absolute position and sits above the box in flow. */
    .cta-caption {
        position: static;
        display: block;
        background: transparent;
        padding: 0;
        margin-bottom: 12px;
    }
}

/* Motion ------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .js .reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .btn,
    a {
        transition: none;
    }
}