/* Xuro landing page, direction B (aerial-led). Every colour, space, radius,
   size and font is a token from tokens.css; buttons, fields and the focus
   ring come from controls.css. Two site-level additions, both declared below:
   a display size for the headline and h2 (the app's scale stops at 2.1rem),
   and the Designer's cone orange, used only inside the drawn cones (like the
   NZTA sign art, an illustration colour, never a UI colour). */

:root {
    --site-header-h: 60px;
    --site-max: 1360px;
    --site-gutter: var(--space-4);
    --site-offset: 108px;
    --text-display: clamp(2.1rem, 1.5rem + 1.9vw, 2.9rem);
    --text-h2: clamp(1.6rem, 1.3rem + 1vw, 2.1rem);
    --site-cone: #f58232;
    --site-cone-edge: #15171a;
}

@media (min-width: 720px) {
    :root { --site-gutter: var(--space-6); --site-offset: 76px; }
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: var(--site-offset);
    -webkit-text-size-adjust: 100%;
}

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

body {
    font-size: var(--text-md);
    line-height: 1.55;
    overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { margin: 0; font-weight: var(--weight-semibold); }
p { margin: 0; }

.wrap {
    max-width: var(--site-max);
    margin: 0 auto;
    padding: 0 var(--site-gutter);
}

.button { text-decoration: none; }

/* The one primary action reads as ink: the darkest text token as a fill with
   the inverse text on it (white in Day, near black in Night). The app's own
   neutral accent fill is a mid grey, too quiet for the page's main action. */
.button-primary {
    background-color: var(--color-text-primary);
    border-color: var(--color-text-primary);
    color: var(--color-text-inverse);
}

.button-primary:hover:not(:disabled) {
    background-color: var(--color-text-secondary);
    border-color: var(--color-text-secondary);
}

.button-primary:active:not(:disabled) {
    background-color: var(--color-text-primary);
    border-color: var(--color-text-primary);
}

/* ---------- Header: one translucent bar on the content grid ---------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 20;
    background: color-mix(in srgb, var(--color-bg-header) 88%, transparent);
    border-bottom: 1px solid var(--color-border-subtle);
    -webkit-backdrop-filter: blur(12px) saturate(1.2);
    backdrop-filter: blur(12px) saturate(1.2);
}

.header-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: var(--space-3);
    min-height: var(--site-header-h);
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-text-primary);
    text-decoration: none;
    min-height: 44px;
}

.brand img { width: 22px; height: 22px; }
.brand .mark-light { display: none; }
:root[data-theme="light"] .brand .mark-dark { display: none; }
:root[data-theme="light"] .brand .mark-light { display: block; }

.brand-word {
    font-weight: var(--weight-bold);
    font-size: var(--text-md);
    letter-spacing: .04em;
}

.site-nav {
    order: 3;
    flex-basis: 100%;
    display: flex;
    gap: var(--space-1);
    margin-left: calc(-1 * var(--space-3));
    padding-bottom: var(--space-2);
}

.header-actions {
    order: 2;
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.theme-seg {
    display: inline-flex;
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.theme-btn {
    width: 34px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: var(--color-bg-surface);
    color: var(--color-text-muted);
}

.theme-btn + .theme-btn { border-left: 1px solid var(--color-border-default); }

.theme-btn:hover:not(:disabled) { border-color: var(--color-border-default); color: var(--color-text-primary); }

.theme-btn[aria-pressed="true"],
.theme-btn[aria-pressed="true"]:hover:not(:disabled) {
    background: var(--color-bg-surface-hover);
    color: var(--color-text-primary);
}

@media (min-width: 760px) {
    .site-nav {
        order: 2;
        flex-basis: auto;
        margin-left: var(--space-6);
        padding-bottom: 0;
    }
    .header-actions { order: 3; gap: var(--space-3); }
}

/* Four links fit one row down to 360 px wide: none breaks inside itself. */
.site-nav .button { white-space: nowrap; }

@media (max-width: 420px) {
    .site-nav { gap: 0; margin-left: calc(-1 * var(--space-2)); }
    .site-nav .button { padding: 0 var(--space-2); }
}

@media (max-width: 380px) {
    .header-row { column-gap: var(--space-2); }
    .header-cta { padding: 0 var(--space-2); }
    .theme-btn { width: 30px; }
}

/* ---------- Hero: the aerial is the ground, the drawing is on the road ---------- */
.hero {
    --hero-band: clamp(176px, 24svh, 240px);
    position: relative;
    overflow: hidden;
    background: var(--grey-900);
    margin-top: calc(-1 * var(--site-header-h) - 1px);
    padding: calc(var(--site-header-h) + var(--space-6)) 0 51.25vw;
}

.aerial {
    position: absolute;
    inset: 0;
}

.aerial-art {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.aerial-wide { display: none; }

.aerial-art .cones circle {
    fill: var(--site-cone);
    stroke: var(--site-cone-edge);
    stroke-width: 1.2;
}

.aerial-art .sign image,
.rv-map .sign image { filter: drop-shadow(0 3px 3px rgba(var(--black-rgb), .45)); }

:root[data-theme="dark"] .aerial-art > g:first-child { filter: brightness(.78); }

/* Narrow: the band under the clip is 51.25vw tall, which is the narrow
   composition's 205 viewBox units (lib/art.mjs) at full width. */
.hero-wrap {
    position: relative;
    z-index: 1;
    padding: 0 var(--site-gutter);
}

.hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
}

.note {
    background: var(--color-bg-surface);
    color: var(--color-text-primary);
    border: 1px solid var(--color-border-default);
    box-shadow: var(--shadow-lg);
    padding: var(--space-6);
}

.note h1 {
    font-size: var(--text-display);
    line-height: 1.04;
    letter-spacing: -.022em;
    text-wrap: balance;
    max-width: 14ch;
}

.lead {
    margin-top: var(--space-4);
    font-size: var(--text-lg);
    line-height: 1.4;
    color: var(--color-text-secondary);
    max-width: 34ch;
}

.hero-actions { margin-top: var(--space-6); }
.hero-actions .button { min-height: 48px; padding: 0 var(--space-6); font-size: var(--text-md); }

.demo-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    background: var(--color-bg-inset);
    border: 1px solid var(--color-border-strong);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

@media (min-width: 720px) {
    .demo-frame { aspect-ratio: 16 / 10; }
}

/* The still under the live demo or the clip: what shows while it loads,
   and what a visitor without script sees. */
.shot {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: left top;
}

.shot-light { display: none; }
:root[data-theme="light"] .shot-light { display: block; }
:root[data-theme="light"] .shot-dark { display: none; }

@media (min-width: 1100px) {
    .hero {
        min-height: max(640px, min(100svh, 1100px));
        padding-bottom: var(--hero-band);
    }
    .aerial-wide { display: block; }
    .aerial-narrow { display: none; }
    /* The note and the Designer frame are centred as one group; on a wide
       window the group grows up to 160 px past the content grid on EACH side
       (owner 2026-10-01: the live Designer needs room, and the demo sits in
       the middle of the page). */
    .hero-wrap {
        margin-left: max(0px, (100% - var(--site-max)) / 2 - 160px);
        margin-right: max(0px, (100% - var(--site-max)) / 2 - 160px);
    }
    .hero-grid {
        grid-template-columns: minmax(320px, 360px) minmax(0, 1fr);
        gap: var(--space-6);
        align-items: start;
    }
    .note { padding: var(--space-8); }
    .hero .demo-frame {
        aspect-ratio: 16 / 10;
        max-height: calc(min(100svh, 1100px) - var(--site-header-h) - var(--space-6) - var(--hero-band));
        min-height: 420px;
    }
}

.demo-prompt {
    position: absolute;
    top: var(--space-4);
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
    max-width: calc(100% - var(--space-8));
    margin: 0;
    padding: var(--space-2) var(--space-4);
    background: var(--color-bg-surface-raised);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-sm);
    color: var(--color-text-primary);
    font-size: var(--text-base);
    font-weight: var(--weight-medium);
    text-align: center;
    pointer-events: none;
}

@media (min-width: 720px) {
    .demo-prompt { top: 20%; white-space: nowrap; }
}

/* L2: the live Designer sandbox (demo.js frames it from its own origin),
   or the looping clip where the sandbox does not run. */
.demo-frame iframe,
.demo-frame .demo-clip {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

/* The live demo stays transparent until it reports ready, so the still
   shows while it loads (and if it never loads, until the clip takes over). */
.demo-frame iframe { opacity: 0; }
.demo-frame.is-live iframe { opacity: 1; }

.demo-frame .demo-clip {
    object-fit: cover;
    background: var(--color-bg-inset);
}

/* Once the demo reports where its map is, the prompt sits 12 px down from
   the map's top edge, centred on the map (demo.js sets the two values). */
.demo-prompt.is-placed {
    top: var(--demo-prompt-top);
    left: var(--demo-prompt-left);
    transition: opacity 400ms ease;
}

.demo-prompt.is-faded { opacity: 0; }

.demo-loading {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    margin: 0;
    padding: var(--space-2) var(--space-4);
    background: var(--color-bg-surface-raised);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-sm);
    color: var(--color-text-secondary);
    font-size: var(--text-base);
}

.demo-caption {
    margin: 0;
    padding: var(--space-2) var(--space-3);
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border-default);
    border-top: 0;
    color: var(--color-text-secondary);
    font-size: var(--text-base);
    text-align: center;
}

@media (prefers-reduced-motion: reduce) {
    .demo-prompt.is-placed { transition: none; }
    .button { transition: none; }
}

/* ---------- Sections below the hero: quiet bands ---------- */
.section { padding: 64px 0; }

@media (min-width: 860px) {
    .section { padding: 96px 0; }
}

.section h2,
.sec-early h2 {
    font-size: var(--text-h2);
    line-height: 1.15;
    letter-spacing: -.012em;
    text-wrap: balance;
    max-width: 24ch;
}

/* Review */
.sec-review { padding-bottom: 0; }
/* The deck's product labels ("Xuro Designer · Live demo", "Xuro Review · Recorded review"): small, sentence case. */
.product-label { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--color-text-muted); margin-bottom: var(--space-2); }
.note .product-label { margin-bottom: var(--space-3); }
.review-intro { margin-top: var(--space-3); color: var(--color-text-secondary); max-width: 60ch; }

/* The results spread: one panel, the sheet on the left, the cards on the right. */
.rv {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
    margin-top: var(--space-8);
    padding: var(--space-4);
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border-default);
}

@media (min-width: 860px) {
    .rv {
        grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
        gap: var(--space-6);
        padding: var(--space-6);
        align-items: stretch;
    }
}

.rv-sheet {
    position: relative;
    aspect-ratio: 297 / 210;
    padding: 3%;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 2.5%;
    background: #ffffff;
    border: 1px solid var(--color-border-strong);
    box-shadow: var(--shadow-md);
}

.rv-map {
    position: relative;
    overflow: hidden;
    border: 1px solid #b6bac0;
}

.rv-map svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.rv-map .cones circle { fill: var(--site-cone); stroke: var(--site-cone-edge); stroke-width: 2.4; }

.rv-notes {
    position: absolute;
    right: 6%;
    top: 6%;
    width: 26%;
    display: grid;
    gap: 5px;
    padding: 8px;
    background: rgba(var(--white-rgb), .92);
    border: 1px solid #b6bac0;
}

.rv-notes i { display: block; height: 3px; background: rgba(21, 23, 26, .55); }

.rv-tb {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 1fr 2fr;
    height: 30px;
    border: 1px solid #b6bac0;
}

.rv-tb i {
    border-right: 1px solid #b6bac0;
    background: linear-gradient(#d2d5d8, #d2d5d8) 14% 50% / 60% 3px no-repeat;
}

.rv-tb i:last-child { border-right: 0; }

.bar-w30 { width: 30%; }
.bar-w40 { width: 40%; }
.bar-w60 { width: 60%; }
.bar-w70 { width: 70%; }
.bar-w80 { width: 80%; }
.bar-w90 { width: 90%; }

.pdf-pin {
    position: absolute;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    margin: -12px 0 0 -12px;
    border-radius: var(--radius-pill);
    border: 1.5px solid;
    box-shadow: 0 1px 4px rgba(var(--black-rgb), .35);
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.pdf-pin.critical { background: rgba(var(--critical-500-rgb), .92); color: var(--color-on-critical); border-color: rgb(var(--critical-500-rgb)); }
.pdf-pin.warning { background: rgba(var(--warning-500-rgb), .92); color: var(--color-on-warning); border-color: rgb(var(--warning-500-rgb)); }
.pdf-pin.information { background: rgba(var(--info-500-rgb), .92); color: var(--color-on-info); border-color: rgb(var(--info-500-rgb)); }
.pdf-pin.is-highlighted { box-shadow: 0 0 0 3px var(--color-text-primary), 0 1px 4px rgba(var(--black-rgb), .35); }
.pin-1 { left: 22%; top: 18%; }
.pin-2 { left: 58%; top: 56%; }
.pin-3 { left: 84%; top: 90%; }

.rv-findings {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--space-3);
    align-content: start;
}

@media (min-width: 860px) {
    .rv-findings { grid-auto-rows: 1fr; align-content: stretch; }
}

.finding-card {
    display: grid;
    gap: 10px;
    justify-items: start;
    align-content: start;
    padding: var(--space-4) var(--space-5);
    border: 1px solid;
    border-radius: var(--radius-lg);
}

.finding-card.critical { background: var(--color-critical-bg); border-color: rgba(var(--critical-500-rgb), .55); }
.finding-card.warning { background: var(--color-warning-bg); border-color: rgba(var(--warning-500-rgb), .55); }
.finding-card.information { background: var(--color-bg-surface); border-color: rgba(var(--info-500-rgb), .55); }
.finding-card.is-focused { box-shadow: 0 0 0 2px var(--color-text-primary); }

.finding-number-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.25rem;
    padding: 5px 10px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--color-border-default);
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    line-height: 1;
}

.finding-top { display: flex; align-items: center; gap: var(--space-2); }

/* The app's severity badge, in sentence case (the deck's words as written). */
.severity-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    border: 1px solid;
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    line-height: 1.2;
}

.severity-badge.critical { color: var(--color-critical-soft); border-color: rgba(var(--critical-500-rgb), .55); }
.severity-badge.warning { color: var(--color-warning-soft); border-color: rgba(var(--warning-500-rgb), .55); }

.finding-title { font-size: var(--text-md); line-height: 1.3; color: var(--color-text-primary); }
.finding-body { font-size: var(--text-base); line-height: 1.45; color: var(--color-text-secondary); }
.finding-refs { font-size: var(--text-sm); color: var(--color-text-muted); }

/* The mid-page call: a full-width ink band, the page's one loud strip
   before the early access section. */
.cta-band {
    margin-top: 64px;
    background: var(--color-text-primary);
    color: var(--color-text-inverse);
}

.cta-band-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4) var(--space-8);
    padding-top: var(--space-8);
    padding-bottom: var(--space-8);
}

.cta-band p {
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    line-height: 1.35;
}

.cta-band .button-primary {
    min-height: 48px;
    padding: 0 var(--space-6);
    font-size: var(--text-md);
    background-color: var(--color-bg-surface);
    border-color: var(--color-bg-surface);
    color: var(--color-text-primary);
}

.cta-band .button-primary:hover:not(:disabled) {
    background-color: var(--color-bg-surface-hover);
    border-color: var(--color-bg-surface-hover);
}

.cta-band .button-primary:focus-visible { outline-color: var(--color-text-inverse); }

@media (min-width: 860px) {
    .cta-band { margin-top: 96px; }
    .cta-band-row { padding-top: 40px; padding-bottom: 40px; }
}

/* What Review checks: two legends whose rows line up, then the statement. */
.sec-checks { border-bottom: 1px solid var(--color-border-subtle); }

.checks {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-8);
    margin-top: var(--space-8);
}

.checks h3 {
    font-size: var(--text-lg);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--color-border-strong);
}

.checks ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.checks li {
    position: relative;
    padding: var(--space-3) 0 var(--space-3) 28px;
    border-bottom: 1px solid var(--color-border-subtle);
    color: var(--color-text-secondary);
}

.checks li::before {
    content: "";
    position: absolute;
    left: 0;
    top: calc(var(--space-3) + .42em);
    width: 12px;
    height: 12px;
}

.looks li::before { background: var(--color-text-primary); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.leaves li::before { border: 1.5px solid var(--color-text-muted); }

@media (min-width: 720px) {
    .checks {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: auto repeat(3, auto);
        column-gap: var(--space-10);
        row-gap: 0;
    }
    .checks-col {
        display: grid;
        grid-row: span 4;
        grid-template-rows: subgrid;
    }
    .checks ul { display: grid; grid-row: span 3; grid-template-rows: subgrid; }
}

.checks-foot {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-6);
    margin-top: var(--space-10);
}

.checks-notes { display: grid; gap: var(--space-3); align-content: start; }
.checks-notes p { color: var(--color-text-secondary); max-width: 52ch; }

.disclaimer {
    font-size: var(--text-xl);
    line-height: 1.3;
    font-weight: var(--weight-medium);
    letter-spacing: -.005em;
    max-width: 30ch;
    text-wrap: balance;
}

@media (min-width: 720px) {
    .checks-foot {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: var(--space-10);
    }
    .disclaimer { grid-column: 2; grid-row: 1; }
    .checks-notes { grid-column: 1; grid-row: 1; }
}

/* The one line to the Features page, closing the checks section. */
.more-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3) var(--space-6);
    margin-top: var(--space-10);
    padding-top: var(--space-5);
    border-top: 1px solid var(--color-border-strong);
}

.more-row p { color: var(--color-text-secondary); max-width: 60ch; }
.more-link { min-height: 44px; padding: 0 var(--space-5); }

/* Founder */
.sec-founder { background: var(--color-bg-surface); border-bottom: 1px solid var(--color-border-subtle); }
.founder-row { display: grid; gap: var(--space-4); }
.founder-body { font-size: var(--text-lg); line-height: 1.55; max-width: 56ch; }

@media (min-width: 860px) {
    .founder-row { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-10); }
}

/* ---------- Early access: back on the aerial, a raised panel ---------- */
.sec-early {
    position: relative;
    overflow: hidden;
    padding: 64px 0;
    background: var(--grey-900);
}

@media (min-width: 860px) {
    .sec-early { padding: 112px 0; }
}

.early-ground { position: absolute; inset: 0; }
.early-ground img { width: 100%; height: 100%; object-fit: cover; object-position: 40% 45%; }
.early-ground::after { content: ""; position: absolute; inset: 0; background: rgba(var(--black-rgb), .28); }
:root[data-theme="dark"] .early-ground img { filter: brightness(.7); }

.early-panel {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-8);
    padding: var(--space-6);
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border-default);
    box-shadow: var(--shadow-lg);
}

@media (min-width: 960px) {
    .early-panel {
        grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
        gap: 56px;
        padding: 48px;
    }
}

.sec-early h2 { font-size: var(--text-display); line-height: 1.04; letter-spacing: -.022em; }
.early-text p { margin-top: var(--space-3); color: var(--color-text-secondary); max-width: 46ch; }
.early-text h2 + p { margin-top: var(--space-5); }

.early-text .offer {
    margin-top: var(--space-5);
    padding: var(--space-4) 0;
    border-top: 1px solid var(--color-border-strong);
    border-bottom: 1px solid var(--color-border-strong);
    color: var(--color-text-primary);
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    line-height: 1.35;
}

.early-text .offer + p { margin-top: var(--space-5); }
.early-form .how {
    margin-bottom: var(--space-5);
    color: var(--color-text-primary);
    font-size: var(--text-lg);
    font-weight: var(--weight-medium);
    line-height: 1.4;
    max-width: 46ch;
}

/* The form */
.ea-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-5) var(--space-4);
}

@media (min-width: 560px) {
    .ea-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ea-wide, .ea-choice { grid-column: 1 / -1; }
}

.ea-field { margin: 0; padding: 0; border: 0; min-width: 0; }

.ea-label {
    display: block;
    margin-bottom: var(--space-2);
    padding: 0;
    color: var(--color-text-primary);
    font-size: var(--text-base);
    font-weight: var(--weight-medium);
}

.ea-form .field-input { min-height: 48px; font-size: var(--text-md); }
.ea-form .field-textarea { font-size: var(--text-md); min-height: 104px; }

.ea-seg { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.ea-opt { position: relative; display: inline-flex; }

.ea-opt input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.ea-opt span {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 var(--space-4);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-sm);
    background: var(--color-bg-inset);
    color: var(--color-text-primary);
    font-size: var(--text-base);
    font-weight: var(--weight-medium);
}

.ea-opt:hover span { border-color: var(--color-border-strong); }

.ea-opt input:checked + span {
    background: var(--color-text-primary);
    border-color: var(--color-text-primary);
    color: var(--color-text-inverse);
}

.ea-opt input:focus-visible + span {
    outline: 2px solid var(--focus-ring-color);
    outline-offset: 2px;
}

/* Honeypot: off screen, not display:none, so a bot still sees a field. */
.ea-hp {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.cf-turnstile { margin-top: var(--space-5); }
.cf-turnstile:empty { margin-top: 0; }

.ea-submit-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3) var(--space-5);
    margin-top: var(--space-6);
}

.ea-submit { min-height: 52px; padding: 0 var(--space-8); font-size: var(--text-md); }
.ea-under { flex: 1 1 220px; color: var(--color-text-muted); font-size: var(--text-sm); }
.ea-under a { color: var(--color-text-secondary); }

.ea-live { margin-top: var(--space-3); }

.ea-status {
    display: none;
    margin: 0;
    font-weight: var(--weight-medium);
}

.ea-status:target,
.ea-status.is-shown { display: block; }

.ea-error { color: var(--color-danger-fill); }

.ea-form.is-done .ea-grid,
.ea-form.is-done .cf-turnstile,
.ea-form.is-done .ea-submit-row { display: none; }

.ea-form.is-done .ea-status { font-size: var(--text-lg); }

.ea-alt {
    margin-top: var(--space-5);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border-subtle);
    color: var(--color-text-secondary);
}

/* ---------- Footer: a drawing title block ---------- */
.site-footer {
    padding: var(--space-10) 0 var(--space-10);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    background: var(--color-bg-page);
}

.title-block {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    border: 1px solid var(--color-border-strong);
}

.tb-cell {
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--color-border-default);
}

.tb-cell:last-child { border-bottom: 0; }
.tb-brand { display: grid; gap: var(--space-2); }
.tb-brand .brand { min-height: 0; }
.tb-credits p { max-width: 72ch; line-height: 1.5; }
.site-footer a { color: var(--color-text-secondary); }
.site-footer a:hover { color: var(--color-text-primary); }
.site-footer .sep { padding: 0 var(--space-2); }

@media (min-width: 860px) {
    .title-block { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr) minmax(0, 6fr) minmax(0, 2fr); }
    .tb-cell { border-bottom: 0; border-right: 1px solid var(--color-border-default); }
    .tb-cell:last-child { border-right: 0; }
    .tb-copy { display: flex; align-items: flex-end; }
}

/* ---------- Privacy and Terms ---------- */
.legal { padding: var(--space-8) 0 var(--space-10); }
.legal .wrap { max-width: 760px; }
.legal h1 { font-size: var(--text-2xl); line-height: 1.15; margin: 0 0 var(--space-3); }
.legal h2 { font-size: var(--text-lg); margin: var(--space-8) 0 var(--space-3); }
.legal p, .legal li { color: var(--color-text-secondary); }
.legal p { margin: 0 0 var(--space-4); }
.legal ul { margin: 0 0 var(--space-4); padding-left: var(--space-5); }
.legal li { margin-bottom: var(--space-2); }
.legal strong { color: var(--color-text-primary); font-weight: var(--weight-semibold); }

/* ---------- Features: one band per product, each subgroup a schedule row ---------- */
.site-nav a[aria-current="page"] {
    color: var(--color-text-primary);
    background: var(--color-bg-surface-hover);
}

.site-footer a[aria-current="page"] { color: var(--color-text-primary); text-decoration: none; }

/* The page opens on the same aerial as the early access section, with the
   heading in a raised panel like the home page's note. */
.fx-top {
    position: relative;
    overflow: hidden;
    padding: 48px 0;
    background: var(--grey-900);
}

.fx-head {
    position: relative;
    max-width: 640px;
    padding: var(--space-6);
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border-default);
    box-shadow: var(--shadow-lg);
}

.fx-head h1 {
    font-size: var(--text-display);
    line-height: 1.04;
    letter-spacing: -.022em;
}

.fx-intro {
    margin-top: var(--space-4);
    max-width: 46ch;
    font-size: var(--text-lg);
    line-height: 1.45;
    color: var(--color-text-secondary);
}

/* Jump links: a strip of the app's ghost buttons, like a sheet index. */
.fx-jump {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-6);
}

.fx-jump .button { min-height: 44px; font-size: var(--text-md); }

.fx-product { padding: 56px 0 72px; border-top: 1px solid var(--color-border-strong); }
.fx-review { background: var(--color-bg-surface); }

.fx-product h2 {
    font-size: var(--text-h2);
    line-height: 1.15;
    letter-spacing: -.012em;
}

.fx-groups { margin-top: var(--space-6); }

.fx-group {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
    padding: var(--space-6) 0;
    border-top: 1px solid var(--color-border-default);
}

.fx-group-name { font-size: var(--text-lg); line-height: 1.3; }

.fx-list { margin: 0; display: grid; }

.fx-item {
    display: grid;
    gap: 2px;
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--color-border-subtle);
}

.fx-item:first-child { padding-top: 0; }
.fx-item:last-child { border-bottom: 0; padding-bottom: 0; }
.fx-item dt { font-weight: var(--weight-semibold); color: var(--color-text-primary); }
.fx-item dd { margin: 0; color: var(--color-text-secondary); max-width: 62ch; }

/* A real Designer still, framed like a viewport on the sheet. */
.fx-still {
    margin: 0;
    align-self: start;
    border: 1px solid var(--color-border-strong);
    background: var(--color-bg-inset);
    box-shadow: var(--shadow-md);
}

.fx-still img { width: 100%; height: auto; }
.fx-still.is-tall { max-width: 240px; }

.fx-disclaimer {
    margin-top: var(--space-8);
    padding-top: var(--space-6);
    border-top: 1px solid var(--color-border-strong);
    max-width: 34ch;
}

@media (min-width: 960px) {
    .fx-top { padding: 96px 0; }
    .fx-head { padding: var(--space-8); }
    .fx-product { padding: 80px 0 96px; }
    .fx-group {
        grid-template-columns: minmax(0, 2fr) minmax(0, 5fr) minmax(0, 5fr);
        column-gap: var(--space-10);
        padding: var(--space-8) 0;
    }
    .fx-group > .fx-list { grid-column: 2; grid-row: 1; }
    .fx-group-name { grid-column: 1; grid-row: 1; }
    /* The still stays in view while its list scrolls past. */
    .fx-still { grid-column: 3; grid-row: 1; position: sticky; top: calc(var(--site-header-h) + var(--space-6)); }
    .fx-still.is-tall { justify-self: start; }
}

.fx-close { margin-top: 0; }

/* The owner's own TMP-001 drawing as the page ground (hero, early access,
   Features top), replacing the agent-drawn overlay (owner, 2026-10-01). */
/* The whole drawing shows (contain, owner 2026-10-01: "not so cropped");
   the strips it leaves are filled by the same image, blurred and dimmed. */
.aerial .ground,
.aerial .ground-fill {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
.aerial .ground { object-fit: contain; object-position: center; }
.aerial .ground-fill { object-fit: cover; filter: blur(28px) brightness(.72); transform: scale(1.08); }
:root[data-theme="dark"] .aerial .ground { filter: brightness(.8); }
:root[data-theme="dark"] .aerial .ground-fill { filter: blur(28px) brightness(.5); }

/* The real review spread: the reviewed package's TMD sheet (page 12). */
.rv-page { padding: 0; display: block; aspect-ratio: auto; overflow: hidden; }
.rv-page img { display: block; width: 100%; height: auto; }
.plan-line { margin-top: var(--space-2); font-size: var(--text-sm); color: var(--color-text-secondary); }

/* The live Review sandbox over the static spread (src/demo.js). The frame
   loads invisibly behind the poster and takes over once it reports ready. */
.rv { position: relative; }
.rv .rv-live {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    opacity: 0;
    pointer-events: none;
}
.rv.is-live { min-height: min(82svh, 860px); }
.rv.is-live > :not(.rv-live) { visibility: hidden; }
.rv.is-live .rv-live { opacity: 1; pointer-events: auto; }