/* ===================================
   Tax Radar - CIS Defence (product depth page)

   Evidence Pack register: kicker hero, the six-check ruled ledger as the
   spine, a short depth note carrying a mono source tag, one full-bleed navy
   anchor section for Boots on the Ground, the Passport record block, and the
   boxed CTA. No card grids anywhere; every list of substance is a ruled row.

   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, bespoke, pricing and about 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 values with no token, as on the homepage, walkthrough, contact,
       bespoke, pricing and about pages. */
    --teal-hover: #238A7E;
    --hairline-dark: rgba(248, 249, 250, 0.14);
}

*,
*::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;
}

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

.page-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;
}

/* Mono section label above each h2, the ledger-caption counterpart to the
   homepage exhibit tag. */
.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-lede {
    font-size: 17px;
    color: var(--ink-soft, #4A5568);
    max-width: 62ch;
    margin-top: 18px;
}

/* Mono source tag, per the component language: "GfC12", "FA 2004 s.62A". */
.source-tag {
    font-family: var(--font-mono, 'DM Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
    font-size: 11px;
    letter-spacing: 0.06em;
    color: var(--ink-soft, #4A5568);
    text-transform: uppercase;
    margin-top: 18px;
}

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

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

.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: 96px 0 72px;
}

.hero h1 {
    font-family: var(--font-heading, 'Fraunces', Georgia, 'Times New Roman', serif);
    font-weight: 600;
    font-size: clamp(38px, 6vw, 68px);
    line-height: 1.05;
    letter-spacing: -0.01em;
    margin-bottom: 26px;
}

.hero-lede {
    font-size: clamp(17px, 1.7vw, 20px);
    color: var(--ink-soft, #4A5568);
    max-width: 58ch;
    line-height: 1.65;
}

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

/* Section frames ----------------------------------------------------- */

.checks,
.depth,
.record {
    padding: 88px 0;
    border-top: 1px solid var(--rule, #D6DAE1);
}

.checks h2,
.depth h2,
.record h2 {
    font-family: var(--font-heading, 'Fraunces', Georgia, 'Times New Roman', serif);
    font-weight: 600;
    font-size: clamp(26px, 3.4vw, 38px);
    line-height: 1.15;
    max-width: 26ch;
}

/* The six checks: the ruled ledger ------------------------------------ */

.ledger {
    margin-top: 48px;
}

.ledger-row {
    display: grid;
    grid-template-columns: 200px 1fr auto;
    gap: 32px;
    align-items: baseline;
    padding: 30px 0;
    border-bottom: 1px solid var(--rule, #D6DAE1);
}

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

.ledger-key {
    font-family: var(--font-mono, 'DM Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
    font-size: 12px;
    color: var(--teal, #2A9D8F);
    letter-spacing: 0.06em;
}

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

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

.ledger-cadence {
    font-family: var(--font-mono, 'DM Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
    font-size: 11px;
    color: var(--ink-soft, #4A5568);
    white-space: nowrap;
}

/* The two evidence-class rows in the record block carry no cadence, so the
   grid drops to two tracks. */
.ledger-compact .ledger-row {
    grid-template-columns: 200px 1fr;
}

/* The background-and-notifications line, set apart from the ledger it
   qualifies. */
.checks-close {
    margin-top: 40px;
    font-size: 17px;
    color: var(--navy, #1B2A4A);
    max-width: 68ch;
}

/* Supply chain depth ------------------------------------------------- */

.depth-body {
    font-size: 17px;
    color: var(--ink-soft, #4A5568);
    max-width: 62ch;
    margin-top: 18px;
}

/* Boots on the Ground: the navy anchor section ------------------------ */

.boots {
    background: var(--navy, #1B2A4A);
    color: var(--paper, #F8F9FA);
    padding: 88px 0;
}

.boots h2 {
    font-family: var(--font-heading, 'Fraunces', Georgia, 'Times New Roman', serif);
    font-weight: 600;
    font-size: clamp(26px, 3.4vw, 38px);
    line-height: 1.15;
    max-width: 24ch;
}

/* The page teal is 4.3:1 on --navy and fails AA at this size, so the section
   label uses the brightened on-dark teal the brand tokens carry for exactly
   this case, which reaches 5.9:1. */
.section-tag-dark {
    color: var(--teal-bright, #3DB9A4);
}

.boots-body {
    font-size: 17px;
    line-height: 1.7;
    max-width: 68ch;
    margin-top: 22px;
}

.boots-body + .boots-body {
    padding-top: 22px;
    border-top: 1px solid var(--hairline-dark, rgba(248, 249, 250, 0.14));
}

/* The record --------------------------------------------------------- */

.list-label {
    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);
    text-transform: uppercase;
    margin-top: 48px;
}

/* Ruled rows rather than bullets, per the component language. */
.rule-list {
    list-style: none;
    margin-top: 16px;
    border-top: 1px solid var(--rule, #D6DAE1);
}

.rule-list li {
    padding: 16px 0;
    border-bottom: 1px solid var(--rule, #D6DAE1);
    font-size: 16px;
}

.record-body {
    margin-top: 34px;
    font-size: 16px;
    color: var(--ink-soft, #4A5568);
    max-width: 66ch;
}

.record .ledger {
    margin-top: 40px;
}

.record-close {
    margin-top: 40px;
    font-size: 17px;
    color: var(--navy, #1B2A4A);
    max-width: 62ch;
}

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

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

.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, 34px);
    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;
    }

    .checks,
    .depth,
    .record,
    .boots {
        padding: 72px 0;
    }

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

    .cta {
        padding: 44px;
    }

    .cta-caption {
        left: 36px;
    }

    /* The 200px key track plus a 32px gap leaves too little for the depth
       paragraph once the cadence tag is also holding width. */
    .ledger-row {
        grid-template-columns: 160px 1fr auto;
        gap: 24px;
    }

    .ledger-compact .ledger-row {
        grid-template-columns: 160px 1fr;
    }
}

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

    .cta {
        grid-template-columns: 1fr;
        gap: 28px;
    }

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

    .cta p {
        max-width: none;
    }

    .checks h2,
    .depth h2,
    .record h2,
    .boots h2 {
        max-width: none;
    }
}

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

    /* The 160px key track and the cadence tag together overflow a 375px
       viewport once the 20px shell padding and the gap are taken out, so
       every ledger restacks to a single column. */
    .ledger-row,
    .ledger-compact .ledger-row {
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 24px 0;
    }

    .ledger-row p,
    .boots-body,
    .depth-body,
    .section-lede,
    .hero-lede,
    .record-body,
    .record-close,
    .checks-close {
        max-width: none;
    }

    .ledger-cadence {
        white-space: normal;
    }

    .cta {
        padding: 36px 24px;
    }

    .cta-caption {
        position: static;
        display: block;
        background: none;
        padding: 0;
        margin-bottom: 16px;
    }
}

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

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

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

    .btn,
    a {
        transition: none;
    }
}