/* ===================================
   Tax Radar - Product walkthrough
   Evidence Pack register: light ground, ruled rows, dark product frames,
   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 two the contact page already needed (the muted grey and the
   hover teal), 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.

   SCREENSHOT REPLACEMENT (DESIGN-SPEC 5.3, Addendum 02 B5.7)
   Every dark product frame is .frame > .frame-bar + .frame-screen. The
   breadcrumb bar is the site's framing device and stays; .frame-screen is
   the replaceable region. When the real captures land after CP-12, the whole
   inner markup of a .frame-screen is replaced by a single <img>, and the
   .frame-screen rule below (padding and background only) frames it correctly
   with no change to the surrounding scene. Add the img rule at that point:
       .frame-screen img { display: block; width: 100%; height: auto; }
   Scene 9 is the Passport artefact, not a product frame, and is not part of
   the shot list.

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

:root {
    /* Mockup values with no token, as on the contact page. */
    --muted: #98A1B3;
    --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;

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

    /* Rating tints: --green and --warn at low alpha. */
    --tint-green: rgba(47, 158, 98, 0.16);
    --tint-green-line: rgba(47, 158, 98, 0.4);
    --tint-amber: rgba(199, 125, 46, 0.16);
    --tint-amber-line: rgba(199, 125, 46, 0.4);
    --tint-amber-soft: rgba(199, 125, 46, 0.1);
    --tint-amber-head: rgba(199, 125, 46, 0.12);
    --tint-amber-edge: rgba(199, 125, 46, 0.35);
    --tint-teal: rgba(61, 185, 164, 0.14);

    /* 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);
    --shadow-doc-back: 0 12px 30px rgba(27, 42, 74, 0.1);

    /* The rail ground: --paper at 96%, in place of the mockup's
       backdrop-filter, which is a repaint cost on mobile Safari. */
    --rail-bg: rgba(248, 249, 250, 0.96);
    --rail-fade-from: rgba(248, 249, 250, 1);
    --rail-fade-to: rgba(248, 249, 250, 0);
}

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

/* An anchored scene must clear the sticky nav and the sticky rail. */
.scene {
    scroll-margin-top: calc(var(--nav-height, 83px) + 46px);
}

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

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

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

/* Intro -------------------------------------------------------------- */

.wt-intro {
    padding: 88px 0 40px;
}

.kicker {
    display: flex;
    align-items: center;
    gap: 10px;
    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: 14px;
}

.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: 12px;
    letter-spacing: 0.1em;
    color: var(--ink-soft, #4A5568);
    text-transform: uppercase;
    margin-bottom: 24px;
}

.wt-intro h1 {
    font-family: var(--font-heading, 'Fraunces', Georgia, 'Times New Roman', serif);
    font-weight: 600;
    font-size: clamp(32px, 5vw, 50px);
    line-height: 1.1;
    max-width: 22ch;
    margin-bottom: 22px;
}

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

.fiction-note {
    font-family: var(--font-mono, 'DM Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
    font-size: 12px;
    line-height: 1.7;
    color: var(--ink-soft, #4A5568);
    margin-top: 26px;
    padding-top: 18px;
    border-top: 1px dashed var(--rule, #D6DAE1);
    max-width: 58ch;
}

/* Progress rail ------------------------------------------------------ */

.rail {
    position: sticky;
    top: var(--nav-height, 83px);
    z-index: 90;
    background: var(--rail-bg, rgba(248, 249, 250, 0.96));
    border-bottom: 1px solid var(--rule, #D6DAE1);
}

.rail-track {
    display: flex;
    gap: 22px;
    overflow-x: auto;
    padding: 13px 32px;
    max-width: 1160px;
    margin: 0 auto;
    scrollbar-width: none;
}

.rail-track::-webkit-scrollbar {
    display: none;
}

.rail-link {
    font-family: var(--font-mono, 'DM Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
    font-size: 11px;
    letter-spacing: 0.1em;
    color: var(--ink-soft, #4A5568);
    text-decoration: none;
    white-space: nowrap;
    text-transform: uppercase;
    padding: 4px 2px;
    border-bottom: 2px solid transparent;
}

.rail-link:hover {
    color: var(--navy, #1B2A4A);
}

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

/* walkthrough.js sets the class and aria-current="step" together. The class
   carries the styling; the attribute carries the meaning. Never inline colour. */
.rail-link-active {
    color: var(--teal, #2A9D8F);
    border-bottom-color: var(--teal, #2A9D8F);
}

.rail-link-active:hover {
    color: var(--teal-hover, #238A7E);
    border-bottom-color: var(--teal-hover, #238A7E);
}

/* Scenes ------------------------------------------------------------- */

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

/* Copy is always first in the DOM, so the single-column collapse needs no
   ordering rule and the reading order is correct for assistive tech. The
   alternating mockup layout is produced here, on wide viewports only. */
.scene-grid {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: 56px;
    align-items: center;
}

.scene-grid-reverse {
    grid-template-columns: 1.15fr 0.85fr;
}

.scene-grid-reverse .scene-copy {
    order: 2;
}

.scene-grid-reverse .scene-exhibit {
    order: 1;
}

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

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

.scene-copy h2 {
    font-family: var(--font-heading, 'Fraunces', Georgia, 'Times New Roman', serif);
    font-weight: 600;
    font-size: clamp(26px, 3.2vw, 32px);
    line-height: 1.18;
    margin-bottom: 14px;
}

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

.scene-copy p + p {
    margin-top: 12px;
}

.pull-quote {
    font-family: var(--font-heading, 'Fraunces', Georgia, 'Times New Roman', serif);
    font-style: italic;
    font-weight: 500;
    font-size: 18px;
    line-height: 1.5;
    border-left: 2px solid var(--teal, #2A9D8F);
    padding-left: 16px;
    max-width: 44ch;
}

/* The pull quote is navy, not the softer body ink, and sits further down. */
.scene-copy .pull-quote {
    color: var(--navy, #1B2A4A);
    margin-top: 18px;
}

/* Dark product frame ------------------------------------------------- */

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

/* The replaceable region. See SCREENSHOT REPLACEMENT at the top of this file. */
.frame-screen {
    padding: 18px;
}

.frame-caption {
    font-family: var(--font-mono, 'DM Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
    font-size: 9.5px;
    line-height: 1.7;
    letter-spacing: 0.06em;
    color: var(--ink-soft, #4A5568);
    text-align: right;
    margin-top: 8px;
}

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

.frame-note-tight {
    margin-top: 6px;
    padding-top: 0;
    border-top: 0;
}

.frame-note-plain {
    margin-top: 10px;
    padding-top: 0;
    border-top: 0;
    letter-spacing: 0.04em;
}

/* Ruled check rows --------------------------------------------------- */

.check-row {
    border: 1px solid var(--hairline-dark, rgba(248, 249, 250, 0.14));
    border-left: 3px solid var(--ink-dim, #93A3BF);
    border-radius: 8px;
    padding: 13px 15px;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    flex-wrap: wrap;
}

.check-row-last {
    margin-bottom: 0;
}

.check-row-green {
    border-left-color: var(--green, #2F9E62);
}

.check-row-amber {
    border-left-color: var(--warn, #C77D2E);
}

.check-title {
    font-size: 13px;
    font-weight: 700;
}

.check-note {
    font-size: 11px;
    color: var(--ink-dim, #93A3BF);
    margin-top: 3px;
}

.check-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin-top: 8px;
    font-family: var(--font-mono, 'DM Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
    font-size: 9.5px;
    letter-spacing: 0.04em;
    color: var(--ink-dim, #93A3BF);
}

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

/* Status pills ------------------------------------------------------- */

.pill {
    font-family: var(--font-mono, 'DM Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
    font-size: 9.5px;
    letter-spacing: 0.08em;
    border-radius: 4px;
    padding: 3px 8px;
    font-weight: 500;
    white-space: nowrap;
    flex: none;
}

.pill-green {
    background: var(--tint-green, rgba(47, 158, 98, 0.16));
    color: var(--on-dark-green, #5FCE93);
    border: 1px solid var(--tint-green-line, rgba(47, 158, 98, 0.4));
}

.pill-amber {
    background: var(--tint-amber, rgba(199, 125, 46, 0.16));
    color: var(--on-dark-amber, #E5A55D);
    border: 1px solid var(--tint-amber-line, rgba(199, 125, 46, 0.4));
}

/* Scene 1: the onboarding wizard ------------------------------------- */

.wizard {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    font-family: var(--font-mono, 'DM Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
    font-size: 9.5px;
    letter-spacing: 0.06em;
    color: var(--ink-dim, #93A3BF);
    padding-bottom: 12px;
    border-bottom: 1px solid var(--hairline-dark, rgba(248, 249, 250, 0.14));
    margin-bottom: 14px;
}

.wizard-on {
    color: var(--teal-bright, #3DB9A4);
}

.field {
    margin-bottom: 12px;
}

.field-last {
    margin-bottom: 0;
}

.field-label {
    font-family: var(--font-mono, 'DM Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
    font-size: 9.5px;
    letter-spacing: 0.12em;
    color: var(--ink-dim, #93A3BF);
    margin-bottom: 5px;
    text-transform: uppercase;
}

.req {
    color: var(--red, #C0504A);
}

.field-value {
    background: var(--navy-panel, #1F2E52);
    border: 1px solid var(--hairline-dark, rgba(248, 249, 250, 0.14));
    border-radius: 6px;
    padding: 9px 12px;
    font-size: 12.5px;
    color: var(--paper, #F8F9FA);
}

.field-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 12px;
}

.chips {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.chip {
    border: 1px solid var(--hairline-dark, rgba(248, 249, 250, 0.14));
    border-radius: 6px;
    padding: 7px 13px;
    font-size: 11.5px;
    color: var(--ink-dim, #93A3BF);
}

.chip-on {
    background: var(--tint-teal, rgba(61, 185, 164, 0.14));
    border-color: var(--teal-bright, #3DB9A4);
    color: var(--teal-bright, #3DB9A4);
    font-weight: 700;
}

.chips-mono .chip {
    font-family: var(--font-mono, 'DM Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
    font-size: 10.5px;
    padding: 5px 11px;
}

.chips-mono .chip-on {
    background: none;
    font-weight: 400;
}

/* Scene 2: the supply chain declaration ------------------------------ */

.declare {
    border: 1px solid var(--hairline-dark, rgba(248, 249, 250, 0.14));
    border-radius: 8px;
    padding: 12px 14px;
    margin-bottom: 10px;
    font-size: 12px;
    color: var(--ink-dim, #93A3BF);
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.declare-on {
    border-color: var(--teal-bright, #3DB9A4);
    color: var(--paper, #F8F9FA);
}

.radio {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1.5px solid var(--ink-dim, #93A3BF);
    flex: none;
    margin-top: 2px;
}

.radio-on {
    border-color: var(--teal-bright, #3DB9A4);
    background: radial-gradient(circle at center, #3DB9A4 40%, transparent 45%);
}

.callout {
    background: var(--tint-amber-soft, rgba(199, 125, 46, 0.1));
    border: 1px solid var(--tint-amber-edge, rgba(199, 125, 46, 0.35));
    border-radius: 8px;
    padding: 11px 14px;
    font-size: 11.5px;
    color: var(--on-dark-amber, #E5A55D);
    margin-top: 4px;
}

.callout-title {
    display: block;
    margin-bottom: 3px;
}

.frame-button {
    display: inline-block;
    background: var(--teal-bright, #3DB9A4);
    color: var(--navy-deep, #141F38);
    font-weight: 700;
    font-size: 12px;
    border-radius: 6px;
    padding: 9px 16px;
    margin-top: 12px;
}

/* Scene 3: the Digital Blast header ---------------------------------- */

.blast-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 12px;
    margin-bottom: 14px;
}

.blast-name {
    font-size: 14px;
    font-weight: 700;
}

.blast-risk {
    font-family: var(--font-mono, 'DM Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
    font-size: 10px;
    color: var(--ink-dim, #93A3BF);
    text-align: right;
}

.blast-risk b {
    display: block;
    color: var(--on-dark-amber, #E5A55D);
    font-size: 12px;
    letter-spacing: 0.06em;
}

/* Scene 7: the manager override -------------------------------------- */

.override {
    border: 1px solid var(--tint-amber-line, rgba(199, 125, 46, 0.4));
    border-radius: 8px;
    overflow: hidden;
}

.override-head {
    background: var(--tint-amber-head, rgba(199, 125, 46, 0.12));
    padding: 10px 14px;
    font-size: 12px;
    font-weight: 700;
    color: var(--on-dark-amber, #E5A55D);
}

.override-body {
    padding: 12px 14px;
}

.override-text {
    background: var(--navy-panel, #1F2E52);
    border: 1px solid var(--hairline-dark, rgba(248, 249, 250, 0.14));
    border-radius: 6px;
    padding: 10px 12px;
    font-size: 11.5px;
    color: var(--paper, #F8F9FA);
    line-height: 1.6;
    margin-bottom: 10px;
}

/* Scene 8: site verification ----------------------------------------- */

.site-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 12px;
    border-bottom: 1px solid var(--hairline-dark, rgba(248, 249, 250, 0.14));
    padding: 9px 2px;
    font-size: 12px;
    color: var(--paper, #F8F9FA);
}

.site-row-last {
    border-bottom: 0;
}

.yesno {
    display: flex;
    gap: 6px;
    flex: none;
}

.yn {
    font-family: var(--font-mono, 'DM Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
    font-size: 9.5px;
    border: 1px solid var(--hairline-dark, rgba(248, 249, 250, 0.14));
    border-radius: 4px;
    padding: 3px 9px;
    color: var(--ink-dim, #93A3BF);
}

.yn-on {
    border-color: var(--teal-bright, #3DB9A4);
    color: var(--teal-bright, #3DB9A4);
}

/* Scene 9: the 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(-9px, 7px);
    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: 32px 30px;
    transform: rotate(1deg);
    color: var(--navy, #1B2A4A);
}

.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: 14px;
    margin-bottom: 16px;
}

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

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

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

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

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

.passport-warn {
    color: var(--warn, #C77D2E);
    font-weight: 700;
}

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

.passport-contents {
    border-top: 1px dashed var(--rule, #D6DAE1);
    margin-top: 10px;
    padding-top: 12px;
    font-family: var(--font-mono, 'DM Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
    font-size: 9.5px;
    letter-spacing: 0.08em;
    color: var(--ink-soft, #4A5568);
    line-height: 1.8;
}

.passport-contents b {
    color: var(--navy, #1B2A4A);
    font-weight: 500;
}

/* Boxed 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;
}

.cta-caption {
    position: absolute;
    top: -9px;
    left: 48px;
    right: 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);
    width: fit-content;
    max-width: calc(100% - 96px);
}

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

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

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

.btn-primary {
    display: inline-block;
    background: var(--teal, #2A9D8F);
    color: #FFFFFF;
    text-decoration: none;
    font-weight: 500;
    border-radius: 3px;
    font-size: 17px;
    padding: 16px 32px;
    border: 1px solid var(--teal, #2A9D8F);
}

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

.btn-primary:focus-visible {
    background: var(--teal-hover, #238A7E);
    border-color: var(--navy, #1B2A4A);
    color: #FFFFFF;
    outline: 2px solid var(--navy, #1B2A4A);
    outline-offset: 2px;
}

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

/* Armed only once walkthrough.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;
}

@media (prefers-reduced-motion: reduce) {
    .js .reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

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

@media (max-width: 900px) {
    .wt-intro {
        padding: 56px 0 32px;
    }

    .scene {
        padding: 56px 0;
    }

    /* Copy is already first in the DOM; drop the desktop reordering. */
    .scene-grid,
    .scene-grid-reverse {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .scene-grid-reverse .scene-copy,
    .scene-grid-reverse .scene-exhibit {
        order: 0;
    }

    .scene-copy p,
    .pull-quote,
    .lede,
    .fiction-note,
    .cta-body p {
        max-width: none;
    }

    .wt-intro h1 {
        max-width: none;
    }

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

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

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

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

    .rail-track {
        padding: 13px 20px;
    }

    /* Fade edges, so the horizontal scroll reads as more to come. */
    .rail::before,
    .rail::after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        width: 24px;
        pointer-events: none;
        z-index: 1;
    }

    .rail::before {
        left: 0;
        background: linear-gradient(to right, var(--rail-fade-from, #F8F9FA), var(--rail-fade-to, rgba(248, 249, 250, 0)));
    }

    .rail::after {
        right: 0;
        background: linear-gradient(to left, var(--rail-fade-from, #F8F9FA), var(--rail-fade-to, rgba(248, 249, 250, 0)));
    }

    .cta {
        padding: 24px;
    }

    /* The caption breaks the top border on wide viewports. There is not
       enough room for it on one line here, and a wrapped absolute box would
       sit on top of the heading, so it returns to normal flow instead. */
    .cta-caption {
        position: static;
        left: auto;
        right: auto;
        width: auto;
        max-width: none;
        padding: 0;
        background: none;
        margin-bottom: 16px;
    }

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

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

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

@media (max-width: 480px) {
    /* Nested pairs inside a frame stack rather than halve again. */
    .field-pair {
        grid-template-columns: 1fr;
    }

    /* The long mono strings are allowed to break rather than overflow. */
    .frame-note,
    .passport-ref,
    .passport-contents,
    .frame-caption {
        overflow-wrap: anywhere;
    }

    .passport {
        padding: 24px 20px;
    }

    .passport-head,
    .passport-row {
        justify-content: flex-start;
    }

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

    .frame-screen {
        padding: 14px;
    }
}