/* ===================================
   Tax Radar - Homepage
   Evidence Pack register: light ground, ruled rows, one dark product frame,
   one Passport artefact, one boxed CTA.

   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.

   Values in the approved mockup that have no token are declared below as
   local custom properties rather than added to the locked set in tokens.css.
   They are the hover teal the contact and walkthrough pages already needed,
   the two lifted status colours that carry the green and amber ratings
   against the dark frame ground, and the tints and shadows derived from
   tokens that cannot be expressed as a var() inside rgba().

   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 plus the Passport
   hover straighten. The reveal is armed by html.js, so with JavaScript off
   the content is simply visible, and both are disabled outright under
   prefers-reduced-motion.
   ================================ */

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

    /* Status text lifted for contrast against the dark frame ground.
       --green and --warn are correct on paper, too dark on navy. */
    --on-dark-green: #5FCE93;
    --on-dark-amber: #E5A55D;

    /* The screening log timestamp column: quieter than --ink-dim so the
       event text leads. Mockup value, no token. */
    --log-time: #7E90B0;

    /* Hairline on the dark frame: --paper at 14%. */
    --hairline-dark: rgba(248, 249, 250, 0.14);

    /* Row rule inside the dark frame: --paper at 10%. */
    --hairline-dark-soft: rgba(248, 249, 250, 0.1);

    /* Shadows: --navy at low alpha. */
    --shadow-frame: 0 24px 56px rgba(27, 42, 74, 0.18);
    --shadow-doc: 0 24px 60px rgba(27, 42, 74, 0.16), 0 2px 8px rgba(27, 42, 74, 0.08);
    --shadow-doc-back: 0 12px 30px rgba(27, 42, 74, 0.1);
}

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

/* The team section is the target of the nav "About" link and the footer
   "Team" link, so it must clear the sticky nav bar when jumped to. */
#team {
    scroll-margin-top: var(--nav-height, 83px);
}

/* 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 --------------------------------------------------------- */

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

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

.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: 24px;
}

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

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

/* 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: 84px 0 72px;
}

.hero-grid {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 64px;
    align-items: center;
}

.hero h1 {
    font-family: var(--font-heading, 'Fraunces', Georgia, 'Times New Roman', serif);
    font-weight: 600;
    font-size: clamp(32px, 4.6vw, 54px);
    line-height: 1.08;
    letter-spacing: -0.01em;
    margin-bottom: 24px;
}

.hero h1 em {
    font-style: italic;
    color: var(--teal, #2A9D8F);
}

.hero-lede {
    font-size: 19px;
    color: var(--ink-soft, #4A5568);
    max-width: 52ch;
    margin-bottom: 36px;
}

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

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

/* Passport artefact -------------------------------------------------- */

.passport-stack {
    position: relative;
}

.passport-back {
    position: absolute;
    inset: 0;
    display: block;
    background: #FFFFFF;
    border: 1px solid var(--rule, #D6DAE1);
    border-radius: 2px;
    transform: rotate(-2deg) translate(-10px, 8px);
    box-shadow: var(--shadow-doc-back, 0 12px 30px rgba(27, 42, 74, 0.1));
    z-index: 0;
}

.passport {
    position: relative;
    z-index: 1;
    background: #FFFFFF;
    border: 1px solid var(--rule, #D6DAE1);
    border-radius: 2px;
    box-shadow: var(--shadow-doc, 0 24px 60px rgba(27, 42, 74, 0.16));
    padding: 36px 32px;
    transform: rotate(1deg);
    transition: transform 0.4s ease;
}

/* Scoped to no-preference so the reduced-motion block below has no hover
   rule to fight, and to hover devices so a tap never straightens the
   document and leaves it straightened. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .passport-stack:hover .passport {
        transform: rotate(0deg);
    }
}

.passport-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 8px 16px;
    border-bottom: 2px solid var(--navy, #1B2A4A);
    padding-bottom: 16px;
    margin-bottom: 20px;
}

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

.passport-ref {
    font-family: var(--font-mono, 'DM Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
    font-size: 11px;
    color: var(--ink-soft, #4A5568);
    text-align: right;
    line-height: 1.7;
}

.passport-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 2px 16px;
    padding: 11px 0;
    border-bottom: 1px solid var(--paper-deep, #EFF1F4);
    font-size: 13.5px;
}

.passport-row:last-child {
    border-bottom: 0;
}

.passport-label {
    color: var(--ink-soft, #4A5568);
}

.passport-value {
    margin-left: auto;
    text-align: right;
}

.passport-value-ok {
    color: var(--teal, #2A9D8F);
    font-weight: 500;
}

.passport-value-mono {
    font-family: var(--font-mono, 'DM Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
    font-size: 12px;
}

/* TechFest strip ----------------------------------------------------- */

.techfest {
    border-top: 1px solid var(--rule, #D6DAE1);
    border-bottom: 1px solid var(--rule, #D6DAE1);
    background: #FFFFFF;
    padding: 26px 0;
}

.techfest-grid {
    display: grid;
    grid-template-columns: auto 1fr 1fr 1fr;
    gap: 32px;
    align-items: center;
}

.techfest-badge {
    font-family: var(--font-mono, 'DM Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
    font-size: 11px;
    letter-spacing: 0.14em;
    color: var(--ink-soft, #4A5568);
    text-transform: uppercase;
    line-height: 1.8;
    border-right: 1px solid var(--rule, #D6DAE1);
    padding-right: 32px;
}

.techfest-event {
    display: block;
    font-family: var(--font-heading, 'Fraunces', Georgia, 'Times New Roman', serif);
    font-size: 17px;
    font-weight: 600;
    color: var(--navy, #1B2A4A);
    letter-spacing: 0;
    text-transform: none;
}

.award {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.award svg {
    flex: none;
    margin-top: 2px;
}

.award-name {
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.4;
}

/* Exhibits: shared --------------------------------------------------- */

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

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

.exhibit-letter {
    color: var(--teal, #2A9D8F);
    font-weight: 500;
}

.exhibit 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;
    margin-bottom: 18px;
    max-width: 26ch;
}

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

/* Exhibit A: what is at stake ---------------------------------------- */

.stake {
    margin-top: 48px;
    border: 1px solid var(--rule, #D6DAE1);
    background: #FFFFFF;
}

.stake-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.stake-cell {
    padding: 32px 28px;
}

.stake-cell + .stake-cell {
    border-left: 1px solid var(--rule, #D6DAE1);
}

.stake-figure {
    font-family: var(--font-heading, 'Fraunces', Georgia, 'Times New Roman', serif);
    font-size: clamp(32px, 4.6vw, 44px);
    font-weight: 600;
    line-height: 1;
}

/* Half the numeral, so the unit tracks it down through the clamp. */
.stake-unit {
    color: var(--teal, #2A9D8F);
    font-size: 0.5em;
    vertical-align: super;
}

.stake-cell h3 {
    font-size: 16px;
    font-weight: 700;
    margin: 14px 0 8px;
}

/* Classed rather than .stake-cell p: as an element selector this outranked
   .stake-figure and .source-tag and flattened both to body size. */
.stake-body {
    font-size: 14.5px;
    color: var(--ink-soft, #4A5568);
}

.stake-source {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px dashed var(--rule, #D6DAE1);
}

/* The status consequence applies to all three cells rather than any one of
   them, so it spans the grid as a fourth card of the same construction. The
   left border from .stake-cell + .stake-cell is cleared: on its own row it
   would read as a stray vertical rule. */
.stake-cell.stake-gps {
    grid-column: 1 / -1;
    border-left: 0;
    border-top: 1px solid var(--rule, #D6DAE1);
}

/* Exhibit B: the record itself --------------------------------------- */

.log-split {
    margin-top: 48px;
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 56px;
    align-items: center;
}

/* The dark product frame is .frame > .frame-bar + .frame-screen, matching
   the walkthrough. The breadcrumb bar stays; .frame-screen is the region a
   real capture replaces when the screenshot pass runs. */
.frame {
    background: var(--navy-deep, #141F38);
    border: 1px solid var(--rule, #D6DAE1);
    border-radius: 10px;
    box-shadow: var(--shadow-frame, 0 24px 56px rgba(27, 42, 74, 0.18));
    overflow: hidden;
    color: var(--paper, #F8F9FA);
}

.frame-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 4px 16px;
    padding: 11px 16px;
    border-bottom: 1px solid var(--hairline-dark, rgba(248, 249, 250, 0.14));
    font-family: var(--font-mono, 'DM Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
    font-size: 10px;
    letter-spacing: 0.1em;
    color: var(--ink-dim, #93A3BF);
}

.frame-bar b {
    color: var(--paper, #F8F9FA);
    font-weight: 500;
}

.frame-screen {
    padding: 18px;
}

.log-row {
    display: grid;
    grid-template-columns: 70px 1fr auto;
    gap: 14px;
    font-family: var(--font-mono, 'DM Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
    font-size: 12px;
    padding: 8px 0;
    border-bottom: 1px solid var(--hairline-dark-soft, rgba(248, 249, 250, 0.1));
}

.log-row:last-of-type {
    border-bottom: 0;
}

.log-time {
    color: var(--log-time, #7E90B0);
    font-size: 11px;
}

.log-event {
    color: var(--ink-dim, #93A3BF);
}

.log-status {
    color: var(--paper, #F8F9FA);
    font-weight: 500;
}

.log-status-ok {
    color: var(--on-dark-green, #5FCE93);
}

.log-status-warn {
    color: var(--on-dark-amber, #E5A55D);
}

.log-foot {
    font-family: var(--font-mono, 'DM Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
    font-size: 9.5px;
    color: var(--ink-dim, #93A3BF);
    letter-spacing: 0.06em;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px dashed var(--hairline-dark, rgba(248, 249, 250, 0.14));
}

.log-aside h3 {
    font-family: var(--font-heading, 'Fraunces', Georgia, 'Times New Roman', serif);
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 12px;
}

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

/* Scoped to beat .log-aside p, which would otherwise set this footnote in
   15px body type. Nothing else carries .log-note. */
.log-aside .log-note {
    font-family: var(--font-mono, 'DM Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
    font-size: 10.5px;
    color: var(--ink-soft, #4A5568);
    margin-top: 20px;
}

/* Exhibit C: the ledger ---------------------------------------------- */

.ledger {
    margin-top: 48px;
}

.ledger-row {
    display: grid;
    grid-template-columns: 200px 1fr auto;
    gap: 32px;
    align-items: baseline;
    padding: 26px 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: 6px;
}

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

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

/* Team --------------------------------------------------------------- */

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

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

.team-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 48px;
    margin-top: 48px;
}

.team-photo {
    width: 104px;
    height: 104px;
    border-radius: 50%;
    overflow: hidden;
    border: 1px solid var(--teal-bright, #3DB9A4);
    margin-bottom: 20px;
}

.team-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.team-photo-img {
    filter: grayscale(1);
}

/* 1.18 lifts the darker original to sit level with the other once both are
   desaturated. */
.team-photo-img-bright {
    filter: grayscale(1) brightness(1.18);
}

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

.team-role {
    font-family: var(--font-mono, 'DM Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--teal-bright, #3DB9A4);
    margin-top: 4px;
}

.team-strap {
    font-size: 14.5px;
    font-weight: 700;
    margin-top: 14px;
}

.team-bio {
    font-size: 15px;
    color: var(--ink-dim, #93A3BF);
    margin-top: 8px;
    max-width: 44ch;
}

.team-close {
    font-size: 16px;
    margin-top: 48px;
    padding-top: 28px;
    border-top: 1px solid var(--hairline-dark, rgba(248, 249, 250, 0.14));
}

/* Link through to the About page, beneath the two condensed cards. The page
   teal is 4.3:1 on --navy and fails AA for body-size text, so this uses the
   brightened on-dark teal the brand tokens carry for exactly this case,
   which reaches 5.9:1. */
.team-more {
    display: inline-block;
    margin-top: 20px;
    color: var(--teal-bright, #3DB9A4);
    text-decoration: underline;
    text-underline-offset: 4px;
    font-size: 16px;
}

.team-more:hover {
    color: var(--paper, #F8F9FA);
}

/* 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/home.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: 64px 0 56px;
    }

    .hero-grid {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .hero-lede {
        max-width: none;
    }

    .log-split {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .log-aside p {
        max-width: none;
    }

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

    .cta-caption {
        left: 40px;
    }

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

@media (max-width: 768px) {
    .exhibit,
    .team {
        padding: 64px 0;
    }

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

    /* The four-column strip cannot hold three award titles at this width;
       the categories stack under the shortlist badge. */
    .techfest-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .techfest-badge {
        border-right: 0;
        padding-right: 0;
        padding-bottom: 16px;
        border-bottom: 1px solid var(--rule, #D6DAE1);
    }

    .stake-grid {
        grid-template-columns: 1fr;
    }

    .stake-cell + .stake-cell {
        border-left: 0;
        border-top: 1px solid var(--rule, #D6DAE1);
    }

    .team-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .team-bio {
        max-width: none;
    }
}

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

    /* The rotated paper stack spills further sideways the taller the document
       gets, and at this width it is tall enough to push past the shell padding
       and give the page a horizontal scrollbar. Flatten the rotation and keep
       the stack as a bounded offset. */
    .passport {
        transform: none;
        padding: 26px 22px;
    }

    .passport-stack:hover .passport {
        transform: none;
    }

    .passport-back {
        transform: translate(-6px, 6px);
    }

    .passport-ref {
        text-align: left;
    }

    .passport-value {
        margin-left: 0;
        text-align: left;
    }

    /* Status moves under the event rather than competing with it for the
       remaining width; the longest reads BELOW RANGE (-14%). */
    .log-row {
        grid-template-columns: 62px 1fr;
        gap: 4px 12px;
    }

    .log-status {
        grid-column: 2;
    }

    .ledger-row {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .ledger-row p {
        max-width: none;
    }

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

    .stake-cell {
        padding: 26px 22px;
    }

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

    .cta p {
        max-width: none;
    }
}

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

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

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

    .passport {
        transition: none;
    }
}