/* ==========================================================================
   homepage.css — public landing page (/) styling
   Loaded ONLY by templates/homepage.html (kept out of the app bundle).
   Refined-institutional direction: restrained, premium, dark navy + gold.
   All rules scoped under .home. Reuses global.css tokens — no hardcoded hex.
   ========================================================================== */

.home {
    /* Display serif carries the institutional voice; Inter for everything else.
       Swap --font-display here to change every headline at once. */
    --font-display: 'Fraunces', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
    /* Re-point the inherited --font-sans (Calibri in global.css) to Inter for the
       whole landing page. global.css applies var(--font-sans) to p/span/div and
       h1-h6; overriding the token on this scope re-routes all of them to Inter
       with no specificity fights (same page-scoped pattern login.html uses).
       Explicit --font-display / --font-mono class rules still win for headings
       and numeric fields. */
    --font-sans: 'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    --font-ui: var(--font-sans);

    /* Local layout rhythm */
    --home-max: min(92vw, 1560px);   /* wide content column — fills the screen instead of a skinny centered strip */
    --home-gutter: clamp(1.25rem, 4vw, 3rem);

    font-family: var(--font-ui);
    background: var(--bg-primary);
    color: var(--primary-text);
    line-height: 1.6;
    min-height: 100vh;
    margin: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.home *,
.home *::before,
.home *::after {
    box-sizing: border-box;
}

/* Zero-specificity reset: strips the browser default <p> margin but lets any
   margin-bearing class (.home-hero__sub, .home-eyebrow, .legal-disclaimer's
   auto-centering, etc.) win. The old `.home p` form (0,1,1) outranked those
   classes (0,1,0) and was silently killing their margins — incl. centering the
   footer disclaimer. */
:where(.home) p { margin: 0; }

/* ---- Shared layout primitives ---- */
.home-container {
    width: 100%;
    max-width: var(--home-max);
    margin: 0 auto;
    padding-left: var(--home-gutter);
    padding-right: var(--home-gutter);
}

.home-eyebrow {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--accent-color);
    margin: 0 0 1rem;
}

.home-title {
    font-family: var(--font-display);
    font-weight: 500;
    letter-spacing: -0.015em;
    color: var(--primary-text);
    line-height: 1.1;
    margin: 0;
}

/* ==========================================================================
   Buttons
   ========================================================================== */
/* Match the in-app button system (global.css .btn / .btn-primary and the
   #open-full-new-deal-btn CTA): same padding, 6px radius, weight 500, base
   shadow, and the gold "lift" hover (translateY + lighter gold + glow). */
.home-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    border-radius: 6px;
    font-family: var(--font-ui);
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1;
    text-decoration: none;
    border: 1px solid transparent;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    transition: all 0.15s ease;
}

/* Gold CTA — mirrors #open-full-new-deal-btn: navy text on gold, hover lifts
   and lightens to --accent-color-light with a gold glow. */
.home-btn--primary {
    background: var(--accent-color);
    color: var(--bg-primary);
    border-color: var(--accent-color);
}
.home-btn--primary:hover {
    transform: translateY(-1px);
    background: var(--accent-color-light);
    border-color: var(--accent-color-light);
    box-shadow: 0 4px 16px rgba(201, 168, 76, 0.35);
}

/* Secondary — mirrors .btn-secondary: filled dark navy, hover lifts + gold border. */
.home-btn--ghost {
    background: var(--card-bg);
    color: var(--primary-text);
    border-color: var(--border-color);
}
.home-btn--ghost:hover {
    transform: translateY(-1px);
    background: var(--border-color);
    border-color: var(--accent-color);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}

.home-btn--lg {
    padding: 0.85rem 1.6rem;
    font-size: 0.9375rem;
}

/* ==========================================================================
   Header
   ========================================================================== */
.home-header {
    position: sticky;
    top: 0;
    z-index: var(--z-app-header);
    background: rgba(10, 22, 40, 0.82);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border-color);
}
/* Light mode: the sticky header bar is the homepage's only dark literal bg. */
:root[data-theme="light"] .home-header { background: rgba(255, 255, 255, 0.82); }

/* Full-width bar — logo flush to the left page edge, nav flush right — matching
   the in-app top nav (#reuw-nav-row). max-width:none overrides the boxed
   .home-container so the header spans the page corners. */
.home-header__inner {
    /* 3-column grid so the section-nav is centered on the PAGE, not merely
       between the logo and the auth buttons (space-between centered it against
       two unequal-width neighbours, so it read off-center). The 1fr side rails
       are equal, so the middle column's center is the page center. */
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1rem;
    max-width: none;
    /* Wordmark is shorter than the old 50px logo image; pad up so the header
       keeps its height and stays level with the deal + dashboard nav bars. */
    padding-top: 1.15rem;
    padding-bottom: 1.15rem;
}
.home-header__inner > .home-logo { justify-self: start; }
.home-header__inner > .home-sectionnav { justify-self: center; }
.home-header__inner > .home-nav { justify-self: end; }

.home-logo {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    border-radius: 6px;
    padding: 0.15rem 0.25rem;
}
.home-logo img {
    height: 50px;
    width: auto;
    display: block;
}

.home-nav {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* ==========================================================================
   Hero
   ========================================================================== */
.home-hero {
    position: relative;
    text-align: center;
    padding: clamp(4rem, 9vw, 7.5rem) 0 clamp(3.5rem, 7vw, 6rem);
    border-bottom: 1px solid var(--border-color);
    overflow: hidden;
}

/* Single static, low-opacity glow — atmosphere without the old animated noise */
.home-hero__glow {
    position: absolute;
    top: -30%;
    left: 50%;
    transform: translateX(-50%);
    width: min(900px, 120%);
    height: 600px;
    background: radial-gradient(ellipse at center,
                rgba(201, 168, 76, 0.14) 0%,
                rgba(201, 168, 76, 0.05) 35%,
                transparent 68%);
    pointer-events: none;
    z-index: 0;
}

/* Two-column hero: copy left, framed product panel right — fills the full
   width so the hero never reads as a skinny centered strip. */
.home-hero__inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    align-items: center;
    gap: clamp(2rem, 5vw, 4.5rem);
    text-align: left;
}
.home-hero__copy { min-width: 0; }

.home-hero__visual { min-width: 0; }
.home-hero__panel {
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
    transition: box-shadow 0.3s ease, transform 0.3s ease, border-color 0.3s ease;
}
.home-hero__panel:hover {
    box-shadow: 0 30px 72px rgba(0, 0, 0, 0.5), 0 0 30px rgba(201, 168, 76, 0.22);
}
.home-hero__rows {
    margin-top: 1.1rem;
    display: grid;
    gap: 0.5rem;
}

.home-hero__title {
    font-size: clamp(2.25rem, 4.6vw, 3.5rem);
}

/* Kinetic rotating word in the hero headline (typewriter via homepage.js).
   Gold accent; left-aligned inline-block whose min-width JS pins to the WIDEST
   word — the word hugs the preceding text and the caret travels right like a
   real typewriter, while the fixed width stops the centered headline jittering. */
.home-kinetic {
    display: inline-block;
    text-align: left;
    color: var(--accent-color);
    white-space: nowrap;
}

.home-hero__sub {
    max-width: 540px;
    margin: 1.5rem 0 0;
    color: var(--secondary-text);
    font-size: 1.0625rem;
    line-height: 1.65;
}

.home-hero__cta {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 0.85rem;
    margin-top: 2.25rem;
}

/* ==========================================================================
   Hero visual - real-time WebGL tower (static/js/hero3d.js, Three.js r159).
   The stage holds three layers: the <canvas> (WebGL), a static CSS fallback
   silhouette, and the proforma overlay card. Authored FINISHED: fallback +
   proforma numbers are VISIBLE by default, so a no-JS / no-WebGL / reduced-
   motion load is a complete graphic. hero3d.js adds .is-live to the stage only
   once WebGL inits, which reveals the canvas and hides the fallback. The stage
   sits inside .home-hero__panel so the JS lag-parallax (the PANEL's `translate`)
   still moves the whole thing; hero3d.js never touches the panel transform.
   Colours are token-driven so both themes read well.
   ========================================================================== */
/* Compound selector beats the later .home-mock__body padding (0,1,0). */
.home-mock__body.home-hero__stage {
    position: relative;
    padding: 0;
    aspect-ratio: 4 / 3.35;
    overflow: hidden;
    isolation: isolate;
    background:
        radial-gradient(120% 90% at 72% 8%, rgba(201, 168, 76, 0.10), transparent 60%),
        radial-gradient(120% 120% at 50% 120%, rgba(6, 13, 23, 0.55), transparent 70%);
}
:root[data-theme="light"] .home-mock__body.home-hero__stage {
    background:
        radial-gradient(120% 90% at 72% 8%, rgba(184, 146, 62, 0.12), transparent 60%),
        radial-gradient(120% 120% at 50% 120%, rgba(24, 38, 60, 0.06), transparent 70%);
}

/* The 3D viewport wraps the halo + canvas + fallback and owns the vignette so
   the proforma HUD (a stage sibling, higher z-index) is never dimmed by it. On
   mobile it becomes a fixed-aspect block with the card stacked below. */
.hero3d__viewport {
    position: absolute;
    inset: 0;
    z-index: 1;
}
/* Cinematic vignette - focuses the eye, adds depth. Scoped to the 3D area. */
.hero3d__viewport::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    background: radial-gradient(125% 105% at 52% 40%, transparent 52%, rgba(2, 7, 14, 0.34) 100%);
}
:root[data-theme="light"] .hero3d__viewport::after {
    background: radial-gradient(125% 105% at 52% 40%, transparent 55%, rgba(24, 38, 60, 0.14) 100%);
}

/* Rim halo / backlight - a soft cool-to-gold glow behind the alpha canvas so the
   navy tower separates dramatically from the navy panel. Aligned to where the
   tower sits in the 3D frame (upper-center-right). */
.hero3d__halo {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(38% 50% at 66% 38%, rgba(201, 168, 76, 0.20), rgba(201, 168, 76, 0) 70%),
        radial-gradient(66% 74% at 66% 44%, rgba(74, 120, 180, 0.18), rgba(74, 120, 180, 0) 72%);
    filter: blur(4px);
}
:root[data-theme="light"] .hero3d__halo {
    background:
        radial-gradient(38% 50% at 66% 38%, rgba(184, 146, 62, 0.16), rgba(184, 146, 62, 0) 70%),
        radial-gradient(66% 74% at 66% 44%, rgba(90, 130, 190, 0.12), rgba(90, 130, 190, 0) 72%);
}

/* WebGL surface - hidden until hero3d.js confirms a successful init. */
.hero3d__canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    opacity: 0;
    transition: opacity 0.8s ease;
    z-index: 1;
}
.home-hero__stage.is-live .hero3d__canvas { opacity: 1; }

/* ---- Static fallback: a tasteful CSS tower silhouette (visible by default). */
.hero3d__fallback {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    padding: 0 14% 8% 0;
    opacity: 1;
    transition: opacity 0.6s ease;
    z-index: 2;
}
.home-hero__stage.is-live .hero3d__fallback {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
.hero3d__still {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 46%;
    max-width: 210px;
    filter: drop-shadow(0 26px 40px rgba(0, 0, 0, 0.5));
}
.hero3d__still-floor {
    width: var(--w, 74%);
    height: 26px;
    background: linear-gradient(100deg, #16324f 0%, #1f4269 55%, #16324f 100%);
    border-top: 2px solid var(--accent-color);
    border-radius: 2px 2px 0 0;
    margin-top: 3px;
}
.hero3d__still-pent {
    width: 26%;
    height: 20px;
    background: linear-gradient(100deg, #16324f 0%, #234a73 100%);
    border-top: 2px solid var(--accent-color);
}
.hero3d__still-lobby {
    height: 40px;
    border-radius: 2px;
    box-shadow: inset 0 -14px 0 -8px rgba(201, 168, 76, 0.35);
}
:root[data-theme="light"] .hero3d__still-floor,
:root[data-theme="light"] .hero3d__still-pent {
    background: linear-gradient(100deg, #274568 0%, #35608c 55%, #274568 100%);
}

/* ---- Proforma overlay - the "underwritten" half. A compact glass HUD chip
   tucked into the lower-LEFT with clear margin from the tower (which the camera
   now frames upper-center-right). Ships finished; hero3d.js resets to zero and
   ticks up in sync. ---- */
.hero3d__proforma {
    position: absolute;
    left: 4.5%;
    bottom: 5.5%;
    z-index: 2;
    margin: 0;
    width: min(44%, 190px);
    padding: 0.7rem 0.78rem 0.72rem;
    border-radius: 11px;
    background: linear-gradient(160deg, rgba(9, 20, 34, 0.82), rgba(6, 13, 23, 0.9));
    border: 1px solid rgba(201, 168, 76, 0.26);
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.5);
    -webkit-backdrop-filter: blur(9px) saturate(1.1);
    backdrop-filter: blur(9px) saturate(1.1);
}
:root[data-theme="light"] .hero3d__proforma {
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.9), rgba(244, 246, 249, 0.86));
    border: 1px solid rgba(184, 146, 62, 0.38);
    box-shadow: 0 16px 34px rgba(24, 38, 60, 0.22);
}
.hero3d__pf-head {
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
    margin-bottom: 0.5rem;
}
.hero3d__pf-title {
    font-family: var(--font-display);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--primary-text);
    line-height: 1.1;
}
.hero3d__pf-tag {
    font-family: var(--font-ui);
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--secondary-text);
}
.hero3d__pf-spark {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.55rem;
    margin-bottom: 0.55rem;
}
.hero3d__pf-bars {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 26px;
    flex: 1 1 auto;
}
.hero3d__pf-bar {
    flex: 1;
    height: var(--h, 100%);
    background: linear-gradient(180deg, var(--accent-color) 0%, var(--accent-subtle) 100%);
    border-radius: 2px 2px 0 0;
    transform: scaleY(1);
    transform-origin: bottom;
    opacity: 0.92;
}
.hero3d__pf-delta {
    flex: 0 0 auto;
    font-family: var(--font-ui);
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--secondary-text);
    white-space: nowrap;
}
.hero3d__pf-delta [data-hero3d-delta] {
    font-family: var(--font-display);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--accent-text);
}
.hero3d__pf-metrics {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.42rem 0.6rem;
    margin: 0;
}
.hero3d__pf-metric { display: flex; flex-direction: column; gap: 0.03rem; }
.hero3d__pf-label {
    font-family: var(--font-ui);
    font-size: 0.55rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--secondary-text);
}
.hero3d__pf-value {
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--accent-text);
    line-height: 1.05;
    margin: 0;
    font-variant-numeric: tabular-nums;
}

/* ---- Mobile (<=560px): stack the HUD BELOW the 3D viewport so it never crowds
   the tower. The viewport becomes a fixed-aspect block; the card flows under it. */
@media (max-width: 560px) {
    .home-mock__body.home-hero__stage { aspect-ratio: auto; }
    .hero3d__viewport {
        position: relative;
        inset: auto;
        width: 100%;
        aspect-ratio: 4 / 3;
    }
    .hero3d__proforma {
        position: relative;
        left: auto;
        bottom: auto;
        width: auto;
        margin: 0.7rem 0.7rem 0.15rem;
        z-index: 2;
    }
}

/* ==========================================================================
   Section scaffolding
   ========================================================================== */
.home-section {
    padding: clamp(3.5rem, 7vw, 6rem) 0;
}
.home-section--alt {
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
}

.home-section__head {
    text-align: center;
    max-width: 720px;
    margin: 0 auto clamp(2.5rem, 5vw, 3.5rem);
}
.home-section__title {
    font-size: clamp(1.85rem, 3.4vw, 2.6rem);
    letter-spacing: -0.022em;
}
.home-section__sub {
    margin-top: 0.85rem;
    color: var(--secondary-text);
    font-size: 0.9375rem;
}

/* ---- Hairline rule used as a refined divider accent ---- */
.home-rule {
    width: 56px;
    height: 2px;
    margin: 1.25rem auto 0;
    background: linear-gradient(90deg,
        var(--accent-color-hover) 0%,
        var(--accent-color-light, #d8bd66) 50%,
        var(--accent-color-hover) 100%);
    background-size: 200% 100%;
    opacity: 0.9;
    border-radius: 2px;
}

/* ==========================================================================
   Platform Capabilities — feature-card grid (icon + title + body)
   ========================================================================== */
.home-features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}
.home-feature {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.85rem;
    transition: transform 0.2s ease, border-color 0.2s ease;
}
.home-feature:hover {
    transform: translateY(-3px);
    border-color: var(--accent-color);
}
.home-feature__icon {
    display: block;
    font-size: 1.75rem;
    color: var(--accent-color);
    line-height: 1;
    margin-bottom: 0.9rem;
}
.home-feature__title {
    font-family: var(--font-display);
    font-size: 1.1875rem;
    font-weight: 500;
    color: var(--primary-text);
    margin: 0 0 0.55rem;
    letter-spacing: -0.01em;
}
.home-feature__body {
    color: var(--secondary-text);
    font-size: 0.9rem;
    line-height: 1.6;
}

/* ==========================================================================
   How It Works — LIVE DATA-FLOW PIPELINE
   4 stages left->right, each a framed mini-panel (reusing .home-mock chrome +
   the depth recipe) showing that stage's ARTIFACT, connected by a thin gold rail
   between the cells and their captions. A soft gold "data packet" glides along
   the rail (pure-CSS infinite loop) and each stage briefly activates as the
   packet arrives. BASE STATE (this block) = the finished pipeline in its
   COMPLETE static form (rows shown, bars full, packet hidden, nodes at rest) so
   a no-JS / reduced-motion / no-support load is NEVER blank. Every loop/collapse
   lives behind html.reuw-anim + prefers-reduced-motion at the bottom of the file.
   Full-width, left-aligned to the hero (max-width:none).
   ========================================================================== */
.home-pipeline {
    --pipe-gap: clamp(1rem, 3vw, 2.5rem);
    /* Half a column of a 4-up grid = the inset that lands the rail endpoints on
       the centre of the outer stages (matches the old rail's /8 math). */
    --pipe-inset: calc((100% - 3 * var(--pipe-gap)) / 8);
    --pipe-cell-h: 190px;             /* fixed cell height so the rail sits cleanly below */
    --pipe-rail-band: 46px;           /* vertical space the rail occupies */
    --flow-dur: 6.6s;                 /* one full packet traverse + loop-reset gap */
    position: relative;
    max-width: none;
    margin: 0;
}

/* ---- The connecting rail: a horizontal band between the cells and captions.
   Positioned absolutely at the bottom edge of the fixed-height cell row so the
   line always lands in the gap (deterministic — no measuring). ---- */
.home-pipeline__rail {
    position: absolute;
    top: var(--pipe-cell-h);
    left: 0;
    right: 0;
    height: var(--pipe-rail-band);
    pointer-events: none;
    z-index: 2;
}
/* The line itself spans stage0-centre -> stage3-centre; it is the positioning
   context for the packet + nodes so their left:0..100% maps stage0..stage3. */
.home-pipeline__line {
    position: absolute;
    top: 50%;
    left: var(--pipe-inset);
    right: var(--pipe-inset);
    height: 2px;
    transform: translateY(-50%);
    background: rgba(201, 168, 76, 0.16);
    border-radius: 2px;
}
/* Faint gold flow shimmer riding the line (animated in the motion block). */
.home-pipeline__flow {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(90deg, transparent 0%, rgba(201, 168, 76, 0.45) 50%, transparent 100%);
    background-size: 42% 100%;
    background-repeat: no-repeat;
    background-position: -30% 0;
    opacity: 0;                        /* base = off; motion block reveals + drives it */
}
/* Node markers pinned at each stage centre (0 / 33.3 / 66.6 / 100% of the line).
   BASE = a calm medium-gold dot so the static pipeline reads as connected. */
.home-pipeline__node {
    position: absolute;
    top: 50%;
    left: calc(var(--n) * 33.3333%);
    width: 11px;
    height: 11px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    background: var(--bg-tertiary);
    border: 1.5px solid var(--accent-color);
    box-shadow: 0 0 0 4px var(--bg-secondary);   /* halo mask over the line */
}
/* The traveling packet — a small soft gold glow with a short comet tail. BASE =
   hidden (opacity:0); the motion loop reveals it and drives its left position. */
.home-pipeline__packet {
    position: absolute;
    top: 50%;
    left: 0;
    width: 12px;
    height: 12px;
    margin: -6px 0 0 -6px;
    border-radius: 50%;
    background: radial-gradient(circle,
        var(--accent-color-light, #d8bd66) 0%,
        var(--accent-color) 42%,
        rgba(201, 168, 76, 0) 72%);
    box-shadow:
        0 0 8px 2px rgba(201, 168, 76, 0.55),
        0 0 18px 6px rgba(201, 168, 76, 0.28);
    opacity: 0;
    z-index: 3;
}
.home-pipeline__packet::before {          /* comet tail, trailing left */
    content: "";
    position: absolute;
    top: 50%;
    right: 50%;
    width: 34px;
    height: 4px;
    transform: translateY(-50%);
    background: linear-gradient(90deg, rgba(201, 168, 76, 0) 0%, rgba(201, 168, 76, 0.5) 100%);
    border-radius: 4px;
    filter: blur(1px);
}

/* ---- Stages: an ordered list (a11y) laid out 4-up. Each stage is a 3-row grid:
   [ artifact cell | rail band (empty, the rail overlays it) | caption ]. ---- */
.home-pipeline__stages {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--pipe-gap);
    position: relative;
    z-index: 1;
}
.home-pipeline__stage {
    display: grid;
    grid-template-rows: var(--pipe-cell-h) var(--pipe-rail-band) auto;
    min-width: 0;
}

/* ---- Artifact cell — a framed mini-panel reusing .home-mock chrome + depth ---- */
.home-pipeline__cell {
    grid-row: 1;
    height: var(--pipe-cell-h);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-top-color: rgba(255, 255, 255, 0.10);
    border-radius: 12px;
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.40),
        0 6px 16px rgba(0, 0, 0, 0.30),
        0 18px 44px rgba(0, 0, 0, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
:root[data-theme="light"] .home-pipeline__cell {
    box-shadow:
        0 1px 2px rgba(16, 31, 56, 0.06),
        0 4px 12px rgba(16, 31, 56, 0.07),
        0 14px 32px rgba(16, 31, 56, 0.06);
    border-top-color: var(--border-color);
}
/* Qualified with the cell so this padding beats the shared .home-mock__body rule
   (defined later in source) — keeps the compact body inside the 190px cell. */
.home-pipeline__cell .pipe-cell__body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.85rem 0.95rem;
}

/* Upload — stacked file cards */
.pipe-file {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.5rem 0.6rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-left: 2px solid var(--accent-color);
    border-radius: 0 6px 6px 0;
}
.pipe-file__icon {
    font-size: 1rem;
    color: var(--accent-color);
    line-height: 1;
}
.pipe-file__name {
    font-size: 0.8rem;
    color: var(--primary-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Extract — compact 2-column Unit / Rent table */
.mock-table--pipe .mock-table__row { grid-template-columns: 1fr auto; }

/* Analyze — compact assumption fields */
.pipe-field { gap: 0.5rem; padding: 0.45rem 0; }
.pipe-field .mock-field__label { flex: 0 0 auto; }
.pipe-field .mock-field__input { padding: 0.25rem 0.5rem; font-size: 0.8rem; }
.pipe-hint { padding: 0.15rem 0.45rem; font-size: 0.64rem; }

/* Proforma — small NOI sparkline (6 bars, clean upward climb) */
.pipe-spark { height: 66px; gap: 5px; margin-top: 0.35rem; }
.pipe-spark .mock-spark__bar:nth-child(1) { height: 34%; }
.pipe-spark .mock-spark__bar:nth-child(2) { height: 46%; }
.pipe-spark .mock-spark__bar:nth-child(3) { height: 42%; }
.pipe-spark .mock-spark__bar:nth-child(4) { height: 61%; }
.pipe-spark .mock-spark__bar:nth-child(5) { height: 80%; }
.pipe-spark .mock-spark__bar:nth-child(6) { height: 100%; }

/* ---- Caption (accessible label + description) ---- */
.home-pipeline__caption {
    grid-row: 3;
    text-align: center;
    padding-top: 0.35rem;
}
.home-pipeline__num {
    display: block;
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 500;
    line-height: 1;
    color: var(--accent-color);
}
.home-pipeline__label {
    display: block;
    margin-top: 0.55rem;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--primary-text);
}
.home-pipeline__desc {
    display: block;
    margin-top: 0.45rem;
    font-size: 0.85rem;
    color: var(--secondary-text);
    line-height: 1.5;
    max-width: 220px;
    margin-left: auto;
    margin-right: auto;
}

/* ==========================================================================
   Built For — audience cards
   ========================================================================== */
.home-audience {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}
.home-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.85rem;
    transition: transform 0.2s ease, border-color 0.2s ease;
}
.home-card:hover {
    transform: translateY(-3px);
    border-color: var(--accent-color);
}
.home-card__title {
    font-family: var(--font-display);
    font-size: 1.1875rem;
    font-weight: 500;
    color: var(--primary-text);
    margin: 0 0 0.6rem;
    letter-spacing: -0.01em;
}
.home-card__body {
    color: var(--secondary-text);
    font-size: 0.9rem;
    line-height: 1.6;
}

/* ---- Persona panels (Carson 2026-07-16, de-duplication pass) ----
   This section's voice is purely TYPOGRAPHIC — the only section with no
   product mock. Each card = role eyebrow + title + tightened copy + one
   "moment" pull-line in Fraunces italic under a short gold hairline rule,
   pinned to the card bottom so all three baselines align. The card keeps
   the shared depth/hover recipe; the only hover response here is the gold
   rule brightening and stretching a touch with the card lift. */
.home-card--persona {
    display: flex;
    flex-direction: column;
}
.home-card__eyebrow {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--accent-color);
    margin: 0 0 0.6rem;
}
.home-card--persona .home-card__body { margin-bottom: 1.35rem; }
.home-card__moment {
    position: relative;
    margin-top: auto;                 /* pins the line to the card bottom so all three align */
    padding-top: 1.05rem;
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 500;
    font-size: 1.0625rem;             /* a step above the 0.9rem body copy */
    line-height: 1.5;
    letter-spacing: 0.002em;
    color: var(--accent-text);        /* gold-tinted ink, readable in both themes */
    text-wrap: pretty;
}
.home-card__moment::before {          /* short gold hairline rule above the line */
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 40px;
    height: 2px;
    border-radius: 2px;
    background: var(--accent-color);
    opacity: 0.85;
    transition: width 0.2s ease, opacity 0.2s ease;
}
.home-card:hover .home-card__moment::before {
    width: 56px;
    opacity: 1;
}

/* ==========================================================================
   Platform Interface — single full-width Dashboard shot (Carson 2026-07-16,
   de-duplication pass). The Deal Dashboard <figure> (.home-shot--hero) fills
   the container; the old 2/3 + 1/3 editorial grid and its two side shots are
   retired (their motifs now live in their canonical homes). Below the frame,
   .home-shot__strip is a slim single-row caption: three quiet small-caps
   labels split by gold dots. The panel keeps the shared .home-mock depth/
   hover recipe and the in-view system untouched.
   ========================================================================== */

/* ---- Shot = framed panel + caption strip below ---- */
.home-shot {
    margin: 0;                        /* figure reset */
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.home-shot__panel {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}
/* Dedicated frame inside the panel: today it holds the CSS mock body; later a
   real screenshot <img class="home-shot__img"> drops in with zero layout
   rework (see the swap-point comment in homepage.html). */
.home-shot__frame {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.home-shot__frame > .home-mock__body { flex: 1 1 auto; }
.home-shot__frame > img,
.home-shot__img {
    flex: 1 1 auto;
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
    object-position: top left;
}
/* Caption strip: one quiet row of small-caps labels separated by gold dots.
   Signals dashboard / proforma / market breadth typographically — without
   re-mocking artifacts that now live in their canonical homes. */
.home-shot__strip {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem 0.9rem;
    margin-top: 0.9rem;
    text-align: left;
}
.home-shot__strip-label {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--secondary-text);
    white-space: nowrap;
}
.home-shot__strip-dot {
    flex: 0 0 auto;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--accent-color);
    opacity: 0.75;
}

/* ---- Browser-chrome bar variant: dots left, centered URL pill ---- */
.home-mock__bar--browser { position: relative; }
.home-mock__url {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.02em;
    line-height: 1.2;
    color: var(--secondary-text);
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 999px;
    padding: 0.18rem 1rem;
    max-width: 60%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---- Hero dashboard mock: slim abstract nav rail + enriched deal grid ---- */
.home-mock__body.home-dash {          /* compound beats the shared body padding */
    padding: 0;
    display: flex;
    align-items: stretch;
}
.home-dash__rail {
    flex: 0 0 54px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.8rem;
    padding: 1rem 0;
    background: var(--bg-primary);
    border-right: 1px solid var(--border-color);
}
.home-dash__railitem {                /* abstract nav suggestion — shapes, not text */
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
}
.home-dash__railitem--active {
    background: var(--accent-subtle);
    border-color: rgba(201, 168, 76, 0.50);
    box-shadow: 0 0 8px rgba(201, 168, 76, 0.18);
}
.home-dash__main {
    flex: 1 1 auto;
    min-width: 0;
    padding: 1.1rem 1.25rem 1.25rem;
}
.home-dash__top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 0.9rem;
}
.home-dash__heading {
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--secondary-text);
}
.home-dash__count {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--accent-text);
    background: var(--accent-subtle);
    border-radius: 999px;
    padding: 0.12rem 0.55rem;
}
.home-dash__grid {
    display: grid;
    /* Auto-fit keeps the full-width frame balanced: 4-up on wide desktops,
       3/2-up as the container narrows, 1-up on phones — no breakpoints.
       min(280px, 100%) lets the track collapse below 280px instead of
       overflowing the frame on small phones. */
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    gap: 0.85rem;
}
.dash-card {                          /* enriched deal card — mock-row idiom, scaled up */
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-left: 2px solid var(--accent-color);
    border-radius: 0 8px 8px 0;
    padding: 0.8rem 0.9rem;
}
.dash-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}
.dash-card__name {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--primary-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dash-card__status {
    flex: 0 0 auto;
    font-size: 0.62rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--secondary-text);
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    padding: 0.14rem 0.5rem;
    white-space: nowrap;
}
.dash-card__status--gold {
    color: var(--accent-text);
    background: var(--accent-subtle);
    border-color: rgba(201, 168, 76, 0.40);
}
.dash-card__units {
    display: block;
    margin-top: 0.15rem;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--secondary-text);
}
.dash-card__metrics {
    display: flex;
    gap: 1rem;
    margin-top: 0.6rem;
    padding-top: 0.55rem;
    border-top: 1px solid var(--border-secondary);
}
.dash-card__metric {
    display: inline-flex;
    align-items: baseline;
    gap: 0.35rem;
}
.dash-card__metric-label {
    font-size: 0.62rem;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--text-tertiary);
}
.dash-card__metric-value {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--primary-text);
}

/* ---- Narrow screens: the full-width shot needs no grid flow of its own
   (auto-fit handles the deal cards); just slim the nav rail. ---- */
@media (max-width: 640px) {
    .home-dash__rail { flex-basis: 44px; }
}
.home-mock {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.2s ease, border-color 0.2s ease;
}
.home-mock:hover {
    transform: translateY(-3px);
    border-color: var(--accent-color);
}
/* Panel chrome (window bar) */
.home-mock__bar {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.6rem 0.85rem;
    background: var(--bg-primary);
    border-bottom: 1px solid var(--border-color);
}
.home-mock__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--border-color);
}
.home-mock__dot:nth-child(2) { background: var(--text-tertiary); }
.home-mock__chip {
    margin-left: auto;
    font-size: 0.6875rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--secondary-text);
}
.home-mock__body {
    padding: 1.1rem 1.1rem 1.25rem;
}
/* (The old in-panel .home-mock__caption/__title/__desc were retired 2026-07-16
   — the shot caption now lives OUTSIDE the frame as .home-shot__strip.) */

/* ---- Mock A: deal dashboard rows ---- */
.mock-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.6rem 0.7rem;
    border-left: 2px solid var(--accent-color);
    background: var(--bg-tertiary);
    border-radius: 0 6px 6px 0;
    margin-bottom: 0.5rem;
}
.mock-row:last-child { margin-bottom: 0; }
.mock-row__name {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--primary-text);
}
.mock-row__figure {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--secondary-text);
}

/* ---- Mock B: proforma metric + sparkline ---- */
.mock-metric {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 1rem;
}
.mock-metric__label {
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--secondary-text);
}
.mock-metric__value {
    font-family: var(--font-mono);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--accent-color);
}
.mock-spark {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    height: 92px;
}
.mock-spark__bar {
    flex: 1;
    background: linear-gradient(180deg, var(--accent-color) 0%, var(--accent-subtle) 100%);
    border-radius: 3px 3px 0 0;
    opacity: 0.9;
}
.mock-spark__bar:nth-child(1) { height: 28%; }
.mock-spark__bar:nth-child(2) { height: 41%; }
.mock-spark__bar:nth-child(3) { height: 38%; }
.mock-spark__bar:nth-child(4) { height: 57%; }
.mock-spark__bar:nth-child(5) { height: 72%; }
.mock-spark__bar:nth-child(6) { height: 88%; }
.mock-spark__bar:nth-child(7) { height: 100%; }
/* Hero composite tease: its OWN bar profile (cash-flow story, dip at bar 4),
   so it is never a pixel-duplicate of the canonical NOI sparkline that lives
   in How It Works stage 4. Higher specificity beats the shared heights. */
.home-hero__panel .mock-spark__bar:nth-child(1) { height: 24%; }
.home-hero__panel .mock-spark__bar:nth-child(2) { height: 38%; }
.home-hero__panel .mock-spark__bar:nth-child(3) { height: 52%; }
.home-hero__panel .mock-spark__bar:nth-child(4) { height: 47%; }
.home-hero__panel .mock-spark__bar:nth-child(5) { height: 63%; }
.home-hero__panel .mock-spark__bar:nth-child(6) { height: 82%; }
.home-hero__panel .mock-spark__bar:nth-child(7) { height: 100%; }
.mock-axis {
    display: flex;
    justify-content: space-between;
    margin-top: 0.5rem;
    font-size: 0.6875rem;
    color: var(--text-tertiary);
}

/* ---- Rent-comp horizontal bars — canonical home: the Market Comps tab.
   .mock-comps wraps the four bars so the nth-child width map below starts
   at 1 even with the toolbar/table siblings above it in the panel body. ---- */
.mock-comps { margin-top: 1.1rem; }
.mock-comp {
    display: grid;
    grid-template-columns: 58px 1fr auto;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.7rem;
}
.mock-comp:last-child { margin-bottom: 0; }
.mock-comp__label {
    font-size: 0.75rem;
    color: var(--secondary-text);
}
.mock-comp__track {
    height: 9px;
    background: var(--bg-tertiary);
    border-radius: 5px;
    overflow: hidden;
}
.mock-comp__fill {
    height: 100%;
    background: var(--accent-color);
    border-radius: 5px;
}
.mock-comp--subject .mock-comp__fill { background: var(--accent-color); }
.mock-comp--peer .mock-comp__fill { background: var(--text-tertiary); }
.mock-comp:nth-child(1) .mock-comp__fill { width: 78%; }
.mock-comp:nth-child(2) .mock-comp__fill { width: 64%; }
.mock-comp:nth-child(3) .mock-comp__fill { width: 70%; }
.mock-comp:nth-child(4) .mock-comp__fill { width: 92%; }
.mock-comp__value {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--primary-text);
}

/* ==========================================================================
   Closed Beta Notice — confident closing band (Carson 2026-07-16).
   Two-column grid on the SHARED container edges (same alignment as every
   section): live-status line + heading + tightened copy left, gold Request
   Access CTA + quiet Log in link right. The status dot pulses VERY subtly —
   gated behind html.reuw-anim + prefers-reduced-motion like all motion (the
   keyframes bake the static halo in, so the resting state matches no-JS).
   Stacks at the page's shared ~920px breakpoint.
   ========================================================================== */
.home-cta-band {
    position: relative;
    overflow: hidden;
    padding: clamp(3.5rem, 7vw, 6rem) 0;
    background: linear-gradient(135deg, rgba(201, 168, 76, 0.10) 0%, var(--bg-secondary) 55%);
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
}
/* Soft gold glow behind the band, echoing the hero */
.home-cta-band__glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(720px, 90%);
    height: 360px;
    background: radial-gradient(ellipse at center, rgba(201, 168, 76, 0.12) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}
.home-cta-band__inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: clamp(1.75rem, 4vw, 3.5rem);
    text-align: left;
}
.home-cta-band__copy { min-width: 0; }
/* Live-status line: small gold dot + uppercase label (eyebrow idiom). */
.home-cta-band__status {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    margin: 0 0 1rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--accent-color);
}
.home-cta-band__dot {
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent-color);
    box-shadow: 0 0 0 3px var(--accent-subtle);
}
.home-cta-band__title {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 3vw, 2.125rem);
    font-weight: 500;
    color: var(--primary-text);
    margin: 0 0 0.85rem;
    letter-spacing: -0.01em;
}
.home-cta-band__body {
    color: var(--secondary-text);
    font-size: 1rem;
    line-height: 1.65;
    max-width: 56ch;
    margin: 0;
}
.home-cta-band__cta {
    display: flex;
    align-items: center;
    gap: 1.4rem;
    justify-self: end;
}
.home-cta-band__login {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--secondary-text);
    text-decoration: none;
    transition: color 0.15s ease;
}
.home-cta-band__login:hover { color: var(--accent-color); }

@media (max-width: 920px) {
    .home-cta-band__inner {
        grid-template-columns: 1fr;
        gap: 1.9rem;
    }
    .home-cta-band__cta { justify-self: start; }
}

/* Status-dot pulse — a slow, faint ring; static halo baked into every frame so
   the animated resting state matches the base (no-JS / reduced-motion) state. */
@keyframes home-beta-pulse {
    0%, 100% { box-shadow: 0 0 0 3px var(--accent-subtle), 0 0 0 0 rgba(201, 168, 76, 0.30); }
    50%      { box-shadow: 0 0 0 3px var(--accent-subtle), 0 0 0 7px rgba(201, 168, 76, 0); }
}
@media (prefers-reduced-motion: no-preference) {
    html.reuw-anim .home-cta-band__dot {
        animation: home-beta-pulse 3s ease-in-out infinite;
    }
}

/* ==========================================================================
   Footer
   ========================================================================== */
.home-footer {
    border-top: 1px solid var(--border-color);
    background: var(--bg-primary);
    padding: 2.5rem 0;
    text-align: center;
}
.home-footer__links {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin-bottom: 1rem;
}
.home-footer__links a {
    color: var(--secondary-text);
    text-decoration: none;
    font-size: 0.875rem;
    transition: color 0.15s ease;
}
.home-footer__links a:hover { color: var(--accent-color); }
.home-footer__copy {
    font-size: 0.8125rem;
    color: var(--text-tertiary);
}

/* ==========================================================================
   Responsive — desktop-first, with a polished phone treatment.
   Tokens + light/dark inherited; all motion stays behind prefers-reduced-motion.
   ========================================================================== */

/* Base mobile-safety + typography niceties (every width, cost-free) */
.home { overflow-x: clip; }                 /* a wide child can never cause a sideways scroll on a phone */
.home-hero__title { text-wrap: balance; }   /* even headline, no lonely last word */
.home-hero__sub,
.home-feature__body,
.home-card__body,
.home-pipeline__desc,
.home-cta-band__body { text-wrap: pretty; } /* no orphans in body copy */

/* Hero: stack the 2-column layout below ~920px (it needs room side-by-side) */
@media (max-width: 920px) {
    .home-hero__inner {
        grid-template-columns: 1fr;
        gap: 2.75rem;
        text-align: center;
    }
    .home-hero__sub { max-width: 600px; margin-left: auto; margin-right: auto; }
    .home-hero__cta { justify-content: center; }
    .home-hero__visual { width: 100%; max-width: 460px; margin: 0 auto; }

    /* Persona cards stack here too (not 768) — 3-up below ~920px would crush
       the pull-lines into awkward two-word wraps. */
    .home-audience { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
    .home-features { grid-template-columns: 1fr; }

    /* Pipeline -> VERTICAL: rail line down the left gutter, stages stacked, the
       packet travels top->bottom (the vertical-travel keyframe lives in the motion
       guard). Each stage becomes [ gutter+node | cell over caption ]. */
    .home-pipeline {
        --pipe-rail-col: 40px;
        --pipe-inset-v: 34px;
        max-width: 480px;
    }
    .home-pipeline__rail {
        top: 0;
        bottom: 0;
        left: 0;
        right: auto;
        width: var(--pipe-rail-col);
        height: auto;
    }
    .home-pipeline__line {
        top: var(--pipe-inset-v);
        bottom: var(--pipe-inset-v);
        left: 50%;
        right: auto;
        width: 2px;
        height: auto;
        transform: translateX(-50%);
    }
    .home-pipeline__flow {
        background: linear-gradient(180deg, transparent 0%, rgba(201, 168, 76, 0.45) 50%, transparent 100%);
        background-size: 100% 42%;
        background-position: 0 -30%;
    }
    .home-pipeline__node { display: none; }   /* fixed dots off; per-stage ::before below */
    .home-pipeline__packet { left: 50%; }
    .home-pipeline__stages {
        grid-template-columns: 1fr;
        gap: 0;
    }
    .home-pipeline__stage {
        grid-template-columns: var(--pipe-rail-col) 1fr;
        grid-template-rows: auto auto;
        column-gap: 1.1rem;
        row-gap: 0.55rem;
        padding-bottom: 2.25rem;
    }
    .home-pipeline__stage:last-child { padding-bottom: 0; }
    /* Per-stage node dot in the gutter, aligned with the cell top. */
    .home-pipeline__stage::before {
        content: "";
        grid-column: 1;
        grid-row: 1;
        align-self: start;
        justify-self: center;
        margin-top: 24px;
        width: 11px;
        height: 11px;
        border-radius: 50%;
        background: var(--bg-tertiary);
        border: 1.5px solid var(--accent-color);
        box-shadow: 0 0 0 4px var(--bg-secondary);
        z-index: 3;
    }
    .home-pipeline__cell {
        grid-column: 2;
        grid-row: 1;
        height: auto;
        min-height: 150px;
    }
    .home-pipeline__caption {
        grid-column: 2;
        grid-row: 2;
        text-align: left;
        padding-top: 0;
    }
    .home-pipeline__desc { max-width: none; margin-left: 0; margin-right: 0; }

    /* (.home-audience stacks at 920px now — see the hero block above. The
       Platform Interface shot is full-width with an auto-fit card grid, so it
       needs no stacking rules of its own here.) */

    .home-hero__cta { flex-direction: column; align-items: stretch; }
    .home-hero__cta .home-btn { width: 100%; }
}

/* ---- Phone (≤560px): the "checking it out on my phone" experience ----
   Tighten section rhythm so it isn't an endless scroll, scale the hero type for
   a small viewport, shrink the sticky-header CTAs so REUW + both buttons sit on
   one row without wrapping, and keep tap targets comfortably ≥44px. */
@media (max-width: 560px) {
    /* Header — compact, single row, no wrap */
    .home-header__inner { padding-top: 0.8rem; padding-bottom: 0.8rem; gap: 0.5rem; }
    .home-nav { gap: 0.45rem; }
    .home-header .home-btn { padding: 0.5rem 0.8rem; font-size: 0.8125rem; }

    /* Hero — punchier, less wall-of-text */
    .home-hero { padding: clamp(2.5rem, 11vw, 3.75rem) 0 clamp(2.25rem, 8vw, 3rem); }
    .home-hero__title { font-size: clamp(1.95rem, 8.8vw, 2.6rem); }
    .home-hero__sub { font-size: 1rem; line-height: 1.6; margin-top: 1.15rem; }
    .home-hero__cta { margin-top: 1.75rem; }
    .home-hero__cta .home-btn--lg { padding: 0.9rem 1.4rem; }   /* ~48px tap height */
    .mock-spark { height: 72px; }                               /* trim sparkline so the hero panel isn't tall */

    /* Section rhythm — snappier vertical spacing */
    .home-section { padding: clamp(2.75rem, 10vw, 3.75rem) 0; }
    .home-section__head { margin-bottom: clamp(1.75rem, 7vw, 2.5rem); }
    .home-cta-band { padding: clamp(2.75rem, 10vw, 3.75rem) 0; }
    .home-feature, .home-card { padding: 1.4rem; }

    /* Footer — links wrap + stay tappable */
    .home-footer__links { gap: 1.4rem; flex-wrap: wrap; }
}

/* ---- Small phones (≤400px): final squeeze so nothing crowds the edges ---- */
@media (max-width: 400px) {
    .home-header__inner { gap: 0.4rem; }
    .home-nav { gap: 0.35rem; }
    .home-header .home-btn { padding: 0.45rem 0.65rem; font-size: 0.75rem; }
    .home-hero__title { font-size: clamp(1.8rem, 9.5vw, 2.2rem); }
}

/* Respect reduced-motion: drop the only transforms/transitions we use */
@media (prefers-reduced-motion: reduce) {
    .home-card,
    .home-mock,
    .home-btn,
    .home-card__moment::before {
        transition: none;
    }
    .home-card:hover,
    .home-mock:hover {
        transform: none;
    }
}

/* ==========================================================================
   Motion — clean, professional, first-party only.
   - Hero: staggered entrance on load (time-based CSS animation; ends visible,
     so a no-JS load is never blank).
   - Sections/cards: scroll reveal via the shared js-reveal system (bottom of
     this file) — the hidden state exists ONLY behind html.reuw-anim + the
     JS-added .js-reveal class, never in raw CSS. (Replaces the old
     `animation-timeline: view()` @supports block, which only ran in Chromium.)
   - Product mock panels come alive (hero sparkline bars grow) as they scroll
     into view; the comp bars grow on tab entry in the showcase block below.
   Reveals animate the independent `translate` property (NOT `transform`) so the
   cards'/mocks' existing transform-based hover-lift is never clobbered.
   All gated behind prefers-reduced-motion.
   ========================================================================== */
@keyframes home-rise-in {
    from { opacity: 0; translate: 0 22px; }
    to   { opacity: 1; translate: 0 0; }
}
@keyframes home-caret { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }
@keyframes home-glow-drift {
    from { transform: translateX(-50%) translateY(-12px) scale(1);    opacity: 0.82; }
    to   { transform: translateX(-50%) translateY(20px)  scale(1.08); opacity: 1; }
}
@keyframes home-rule-shimmer {
    0%, 100% { background-position: 0% 0; }
    50%      { background-position: 100% 0; }
}

@media (prefers-reduced-motion: no-preference) {
    /* Hero — staggered entrance on load (always in view, so time-based not scroll).
       Copy lines cascade; the product panel fades in alongside. */
    .home-hero__copy > *,
    .home-hero__visual {
        animation: home-rise-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
    }
    .home-hero__copy > *:nth-child(1) { animation-delay: 0.08s; }
    .home-hero__copy > *:nth-child(2) { animation-delay: 0.18s; }
    .home-hero__copy > *:nth-child(3) { animation-delay: 0.32s; }
    .home-hero__copy > *:nth-child(4) { animation-delay: 0.46s; }
    .home-hero__visual { animation-delay: 0.30s; }

    /* Hero glow — slow ambient drift to give the large hero space some life */
    .home-hero__glow {
        animation: home-glow-drift 16s ease-in-out infinite alternate;
    }

    /* Gold section-divider rules — slow shimmer sweep */
    .home-rule {
        animation: home-rule-shimmer 3.5s ease-in-out infinite;
    }

    /* (Scroll-driven section/card reveals moved to the shared js-reveal system
       at the bottom of this file — one IntersectionObserver, all browsers.) */

    /* Kinetic hero word — blinking caret (only when JS-driven typewriter is on) */
    html.reuw-anim .home-kinetic::after {
        content: '';
        display: inline-block;
        width: 2px;
        height: 0.92em;
        margin-left: 0.07em;
        background: var(--accent-color);
        vertical-align: -0.08em;
        animation: home-caret 1.05s steps(1) infinite;
    }

    /* Product mocks come alive — JS adds .in-view to each .home-mock when it
       scrolls into view (IntersectionObserver) so the bars reliably grow in
       every browser, keyed to the PANEL being framed (not each tiny bar's own
       view() progress, which finished before the panel was even on screen).
       Gated behind html.reuw-anim so a no-JS load leaves bars fully drawn. */
    html.reuw-anim .mock-spark__bar {
        transform: scaleY(0);
        transform-origin: bottom;
        transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
    }
    html.reuw-anim .home-mock.in-view .mock-spark__bar { transform: scaleY(1); }
    html.reuw-anim .home-mock.in-view .mock-spark__bar:nth-child(1) { transition-delay: 0.04s; }
    html.reuw-anim .home-mock.in-view .mock-spark__bar:nth-child(2) { transition-delay: 0.09s; }
    html.reuw-anim .home-mock.in-view .mock-spark__bar:nth-child(3) { transition-delay: 0.14s; }
    html.reuw-anim .home-mock.in-view .mock-spark__bar:nth-child(4) { transition-delay: 0.19s; }
    html.reuw-anim .home-mock.in-view .mock-spark__bar:nth-child(5) { transition-delay: 0.24s; }
    html.reuw-anim .home-mock.in-view .mock-spark__bar:nth-child(6) { transition-delay: 0.29s; }
    html.reuw-anim .home-mock.in-view .mock-spark__bar:nth-child(7) { transition-delay: 0.34s; }

    /* (Comp-bar growth moved to the showcase motion block below — the bars'
       one home is now the Market Comps tab panel, driven by .is-entering,
       not the .home-mock in-view observer.) */

    /* ======================================================================
       LIVE DATA-FLOW PIPELINE — ambient packet loop + synced stage activation.
       All PURE CSS, infinite, no JS beyond the .is-inview reveal flag (homepage.js
       one-shot IntersectionObserver). A soft gold packet glides node0->node3 along
       the rail (~6.6s), fading out + a brief gap before it restarts at node0 so the
       loop is seamless. Each stage activates AS THE PACKET ARRIVES: the packet's
       stage-arrival times are 10 / 33 / 56 / 79% of the cycle; every activation
       animation peaks at 10% of ITS OWN cycle and is offset by
       animation-delay = --i * 0.23 * --flow-dur, so the peak lands exactly when the
       packet reaches that stage. Everything is gated behind html.reuw-anim
       (motion allowed) + .home-pipeline.is-inview (scrolled into view); the base
       CSS above is the COMPLETE static pipeline, so reduced-motion / no-JS never
       animates and never blanks.
       ====================================================================== */

    /* --- Packet travel (left across the horizontal rail) + fade/gap loop reset --- */
    @keyframes home-pipe-packet {
        0%, 3%   { left: 0%;         opacity: 0; }
        10%      { left: 0%;         opacity: 1; animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); }
        33%      { left: 33.3333%;   opacity: 1; animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); }
        56%      { left: 66.6666%;   opacity: 1; animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); }
        79%      { left: 100%;       opacity: 1; }
        85%      { left: 100%;       opacity: 0; }
        100%     { left: 100%;       opacity: 0; }
    }
    /* --- Faint flow shimmer riding the line under the packet --- */
    @keyframes home-pipe-flow {
        0%, 3%   { opacity: 0;   background-position: -30% 0; }
        10%      { opacity: 0.7; }
        79%      { opacity: 0.7; background-position: 130% 0; }
        85%, 100%{ opacity: 0;   background-position: 130% 0; }
    }
    /* --- Cell lift as the packet arrives (subtle: <=1.02 scale, soft rise) --- */
    @keyframes home-pipe-lift {
        0%, 4%    { transform: translateY(0) scale(1); }
        10%       { transform: translateY(-4px) scale(1.02); }
        20%, 100% { transform: translateY(0) scale(1); }
    }
    /* --- Gold glow ring over the cell (opacity-only overlay, theme-safe) --- */
    @keyframes home-pipe-glow {
        0%, 4%    { opacity: 0; }
        10%       { opacity: 1; }
        20%, 100% { opacity: 0; }
    }
    /* --- Node pulse (translate baked in so the dot stays centred) --- */
    @keyframes home-pipe-node {
        0%, 4%    { transform: translate(-50%, -50%) scale(1);
                    box-shadow: 0 0 0 4px var(--bg-secondary), 0 0 0 0 rgba(201, 168, 76, 0); }
        10%       { transform: translate(-50%, -50%) scale(1.25);
                    box-shadow: 0 0 0 4px var(--bg-secondary), 0 0 12px 2px rgba(201, 168, 76, 0.60); }
        20%, 100% { transform: translate(-50%, -50%) scale(1);
                    box-shadow: 0 0 0 4px var(--bg-secondary), 0 0 0 0 rgba(201, 168, 76, 0); }
    }
    /* --- Extract rows populate (gentle dim + slide, then settle) --- */
    @keyframes home-pipe-row {
        0%, 5%    { opacity: 1;    transform: translateX(0); }
        8%        { opacity: 0.45; transform: translateX(-4px); }
        16%       { opacity: 1;    transform: translateX(0); }
        100%      { opacity: 1;    transform: translateX(0); }
    }
    /* --- Analyze hint chip pulse --- */
    @keyframes home-pipe-hint {
        0%, 4%    { transform: scale(1);    box-shadow: 0 0 0 0 rgba(201, 168, 76, 0); }
        10%       { transform: scale(1.04); box-shadow: 0 0 8px 1px rgba(201, 168, 76, 0.45); }
        22%, 100% { transform: scale(1);    box-shadow: 0 0 0 0 rgba(201, 168, 76, 0); }
    }
    /* --- Proforma bars grow (build the projection) --- */
    @keyframes home-pipe-bar {
        0%, 5%    { transform: scaleY(1); }
        8%        { transform: scaleY(0.45); }
        18%       { transform: scaleY(1); }
        100%      { transform: scaleY(1); }
    }
    /* --- Proforma headline value glow --- */
    @keyframes home-pipe-value {
        0%, 4%    { text-shadow: none; }
        10%       { text-shadow: 0 0 14px rgba(201, 168, 76, 0.65); }
        22%, 100% { text-shadow: none; }
    }

    /* Packet + flow run only once the pipeline is scrolled into view (.is-inview). */
    html.reuw-anim .home-pipeline.is-inview .home-pipeline__packet {
        animation: home-pipe-packet var(--flow-dur) linear infinite;
    }
    html.reuw-anim .home-pipeline.is-inview .home-pipeline__flow {
        animation: home-pipe-flow var(--flow-dur) linear infinite;
    }

    /* Cell lift + the theme-safe glow overlay (a ::after ring that fades in/out so
       the cell's own theme-specific depth shadow is never overwritten). */
    html.reuw-anim .home-pipeline__cell { position: relative; }
    html.reuw-anim .home-pipeline__cell::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        /* Inset rim-light — an inner gold glow that reads as the panel "lighting up"
           and survives the cell's overflow:hidden (an outward halo would be clipped). */
        box-shadow: inset 0 0 0 1px rgba(201, 168, 76, 0.50), inset 0 0 22px rgba(201, 168, 76, 0.22);
        opacity: 0;
        pointer-events: none;
    }
    html.reuw-anim .home-pipeline.is-inview .home-pipeline__cell {
        animation: home-pipe-lift var(--flow-dur) ease-in-out infinite;
        animation-delay: calc(var(--i) * 0.23 * var(--flow-dur));
    }
    html.reuw-anim .home-pipeline.is-inview .home-pipeline__cell::after {
        animation: home-pipe-glow var(--flow-dur) ease-in-out infinite;
        animation-delay: calc(var(--i) * 0.23 * var(--flow-dur));
    }

    /* Rail nodes light in sequence (keyed off --n, same 0..3 order as the stages). */
    html.reuw-anim .home-pipeline.is-inview .home-pipeline__node {
        animation: home-pipe-node var(--flow-dur) ease-in-out infinite;
        animation-delay: calc(var(--n) * 0.23 * var(--flow-dur));
    }

    /* Extract rows populate — staggered by row (--r) within the stage's arrival. */
    html.reuw-anim .home-pipeline.is-inview .pipe-row {
        animation: home-pipe-row var(--flow-dur) ease-in-out infinite;
        animation-delay: calc(var(--i) * 0.23 * var(--flow-dur) + var(--r, 0) * 0.18s);
    }

    /* Analyze hint chips pulse. */
    html.reuw-anim .home-pipeline.is-inview .pipe-hint {
        animation: home-pipe-hint var(--flow-dur) ease-in-out infinite;
        animation-delay: calc(var(--i) * 0.23 * var(--flow-dur));
    }

    /* Proforma sparkline: keep bars FULL at rest (override the global scaleY(0)
       collapse that targets any .mock-spark__bar), then grow-pulse in view. */
    html.reuw-anim .pipe-spark .mock-spark__bar {
        transform: scaleY(1);
        transform-origin: bottom;
        transition: none;
    }
    html.reuw-anim .home-pipeline.is-inview .pipe-spark .mock-spark__bar {
        animation: home-pipe-bar var(--flow-dur) ease-in-out infinite;
        animation-delay: calc(var(--i) * 0.23 * var(--flow-dur));
    }
    html.reuw-anim .home-pipeline.is-inview .pipe-spark .mock-spark__bar:nth-child(2) { animation-delay: calc(var(--i) * 0.23 * var(--flow-dur) + 0.05s); }
    html.reuw-anim .home-pipeline.is-inview .pipe-spark .mock-spark__bar:nth-child(3) { animation-delay: calc(var(--i) * 0.23 * var(--flow-dur) + 0.10s); }
    html.reuw-anim .home-pipeline.is-inview .pipe-spark .mock-spark__bar:nth-child(4) { animation-delay: calc(var(--i) * 0.23 * var(--flow-dur) + 0.15s); }
    html.reuw-anim .home-pipeline.is-inview .pipe-spark .mock-spark__bar:nth-child(5) { animation-delay: calc(var(--i) * 0.23 * var(--flow-dur) + 0.20s); }
    html.reuw-anim .home-pipeline.is-inview .pipe-spark .mock-spark__bar:nth-child(6) { animation-delay: calc(var(--i) * 0.23 * var(--flow-dur) + 0.25s); }

    /* Proforma headline value glow. */
    html.reuw-anim .home-pipeline.is-inview .home-pipeline__cell .mock-metric__value {
        animation: home-pipe-value var(--flow-dur) ease-in-out infinite;
        animation-delay: calc(var(--i) * 0.23 * var(--flow-dur));
    }
}

/* Pipeline on mobile: the packet travels the VERTICAL rail TOP->BOTTOM. Placed
   after the desktop motion guard so it wins for <=768px (equal specificity, later
   source order); the layout flip (vertical line, gutter dots) lives in the
   max-width:768px block above. The stage-activation timing is identical — only the
   packet's axis changes — so stages still light in sync with the passing packet. */
@media (prefers-reduced-motion: no-preference) and (max-width: 768px) {
    /* Vertical packet travel (top instead of left). */
    @keyframes home-pipe-packet-v {
        0%, 3%   { top: 0%;         opacity: 0; }
        10%      { top: 0%;         opacity: 1; animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); }
        33%      { top: 33.3333%;   opacity: 1; animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); }
        56%      { top: 66.6666%;   opacity: 1; animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); }
        79%      { top: 100%;       opacity: 1; }
        85%      { top: 100%;       opacity: 0; }
        100%     { top: 100%;       opacity: 0; }
    }
    @keyframes home-pipe-flow-v {
        0%, 3%   { opacity: 0;   background-position: 0 -30%; }
        10%      { opacity: 0.7; }
        79%      { opacity: 0.7; background-position: 0 130%; }
        85%, 100%{ opacity: 0;   background-position: 0 130%; }
    }
    /* Gutter dot pulse (no translate — the ::before is grid-placed, not centred). */
    @keyframes home-pipe-dot {
        0%, 4%    { transform: scale(1);
                    box-shadow: 0 0 0 4px var(--bg-secondary), 0 0 0 0 rgba(201, 168, 76, 0); }
        10%       { transform: scale(1.25);
                    box-shadow: 0 0 0 4px var(--bg-secondary), 0 0 12px 2px rgba(201, 168, 76, 0.60); }
        20%, 100% { transform: scale(1);
                    box-shadow: 0 0 0 4px var(--bg-secondary), 0 0 0 0 rgba(201, 168, 76, 0); }
    }
    html.reuw-anim .home-pipeline.is-inview .home-pipeline__packet {
        animation-name: home-pipe-packet-v;
    }
    html.reuw-anim .home-pipeline.is-inview .home-pipeline__flow {
        animation-name: home-pipe-flow-v;
    }
    html.reuw-anim .home-pipeline.is-inview .home-pipeline__stage::before {
        animation: home-pipe-dot var(--flow-dur) ease-in-out infinite;
        animation-delay: calc(var(--i) * 0.23 * var(--flow-dur));
    }
}

/* ==========================================================================
   DEPTH PASS (Carson 2026-07-14 — step 1 of the landing-page elevation).
   One shared depth recipe across every card surface: a 3-layer shadow
   (contact / mid / ambient), a top-edge-lit hairline border, and an inset top
   highlight. NO motion, NO layout change — the flat->premium base lift before
   any animation. Excludes .home-hero__panel (the hero visual stays as-is).
   ========================================================================== */
.home-feature,
.home-card,
.home-mock:not(.home-hero__panel) {
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.40),
        0 6px 16px rgba(0, 0, 0, 0.30),
        0 18px 44px rgba(0, 0, 0, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    border-top-color: rgba(255, 255, 255, 0.10);
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.25s ease;
}
/* Hover deepens the stack + a whisper of gold ambient (keeps the existing
   translateY + accent border from the base :hover rules). */
.home-feature:hover,
.home-card:hover,
.home-mock:not(.home-hero__panel):hover {
    box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.45),
        0 10px 24px rgba(0, 0, 0, 0.35),
        0 26px 60px rgba(0, 0, 0, 0.30),
        0 0 24px rgba(201, 168, 76, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
/* (The How-It-Works pipeline cells carry their own depth recipe inline — see the
   .home-pipeline__cell rules in the "How It Works" + motion blocks above.) */

/* Light mode: the black-alpha shadows over-darken on a light page; soften them
   and drop the white inset highlight (which does nothing on white). */
:root[data-theme="light"] .home-feature,
:root[data-theme="light"] .home-card,
:root[data-theme="light"] .home-mock:not(.home-hero__panel) {
    box-shadow:
        0 1px 2px rgba(16, 31, 56, 0.06),
        0 4px 12px rgba(16, 31, 56, 0.07),
        0 14px 32px rgba(16, 31, 56, 0.06);
    border-top-color: var(--border-color);
}
:root[data-theme="light"] .home-feature:hover,
:root[data-theme="light"] .home-card:hover,
:root[data-theme="light"] .home-mock:not(.home-hero__panel):hover {
    box-shadow:
        0 2px 4px rgba(16, 31, 56, 0.08),
        0 8px 20px rgba(16, 31, 56, 0.10),
        0 20px 44px rgba(16, 31, 56, 0.10),
        0 0 20px rgba(201, 168, 76, 0.12);
}

/* ==========================================================================
   PLATFORM CAPABILITIES — interactive tabbed showcase (Carson 2026-07-15;
   restructured to 2-column 2026-07-16). A VERTICAL tab rail on the left (each
   tab = title + one-line kicker) drives a single framed showcase panel on the
   right, mirroring the hero's copy-left / panel-right proportions. The section
   shares the hero's .home-container, so both left edges align exactly.
   Each panel is a token-based mock reusing the .home-mock chrome + the depth
   recipe above. Progressive enhancement: with no JS every panel renders stacked
   & reachable; homepage.js collapses them into a proper tablist/tabpanel widget
   with keyboard nav, crossfade, and a slow auto-advance whose progress fills a
   thin gold underline on the active tab. Collapses to a horizontal swipe strip
   <=920px (same breakpoint the hero stacks). Motion lives behind html.reuw-anim
   + prefers-reduced-motion.
   ========================================================================== */

/* Visually-hidden helper — real per-panel summary for screen readers while the
   decorative mocks stay aria-hidden (homepage.css owns its own copy; the app's
   .visually-hidden lives in tab-theme.css, not loaded on the landing page). */
.home-sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* 2-column grid: rail LEFT (~280-330px), stage RIGHT filling the rest. */
.home-showcase-tabbed {
    max-width: none;
    margin: 0;
    display: grid;
    grid-template-columns: clamp(280px, 24vw, 330px) minmax(0, 1fr);
    gap: clamp(1.75rem, 3.5vw, 3.25rem);
    align-items: start;
}

/* ---- Vertical tab rail ---- */
.home-showcase-tabstrip {
    position: relative;              /* offsetLeft anchor for the mobile strip scroll */
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    min-width: 0;
}
.home-showcase-tab {
    position: relative;
    display: block;
    width: 100%;
    text-align: left;
    padding: 0.85rem 1rem 0.9rem;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 10px;
    color: var(--secondary-text);
    font-family: var(--font-ui);
    line-height: 1.35;
    cursor: pointer;
    overflow: hidden;                /* clips the auto-advance fill to the radius */
    transition: color 0.18s ease, background 0.18s ease,
                border-color 0.18s ease, box-shadow 0.2s ease;
}
.home-showcase-tab__row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.home-showcase-tab__icon {
    font-size: 0.95rem;
    color: var(--accent-color);
    opacity: 0.75;
    line-height: 1;
}
.home-showcase-tab__label {
    font-size: 0.9rem;
    font-weight: 600;
    color: inherit;
}
.home-showcase-tab__kicker {
    display: block;
    margin-top: 0.3rem;
    font-size: 0.775rem;
    line-height: 1.45;
    color: var(--text-tertiary);
}
.home-showcase-tab:hover {
    color: var(--primary-text);
    background: var(--bg-tertiary);
}
/* Active tab — the established card treatment: top-edge-lit hairline border,
   layered shadow lift, soft gold rim, and a solid gold left edge. */
.home-showcase-tab[aria-selected="true"] {
    color: var(--primary-text);
    background: var(--card-bg);
    border-color: var(--border-color);
    border-top-color: rgba(255, 255, 255, 0.10);
    box-shadow:
        inset 2px 0 0 var(--accent-color),
        0 1px 2px rgba(0, 0, 0, 0.35),
        0 6px 16px rgba(0, 0, 0, 0.25),
        0 0 18px rgba(201, 168, 76, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.home-showcase-tab[aria-selected="true"] .home-showcase-tab__icon { opacity: 1; }
.home-showcase-tab[aria-selected="true"] .home-showcase-tab__kicker { color: var(--secondary-text); }
:root[data-theme="light"] .home-showcase-tab[aria-selected="true"] {
    border-top-color: var(--border-color);
    box-shadow:
        inset 2px 0 0 var(--accent-color),
        0 1px 2px rgba(16, 31, 56, 0.06),
        0 6px 16px rgba(16, 31, 56, 0.08),
        0 0 16px rgba(201, 168, 76, 0.10);
}
/* Subtle hugging inset ring on keyboard focus; layered over the active-tab
   shadows when both apply so neither state is lost. */
.home-showcase-tab:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 1.5px rgba(201, 168, 76, 0.55);
}
.home-showcase-tab[aria-selected="true"]:focus-visible {
    box-shadow:
        inset 0 0 0 1.5px rgba(201, 168, 76, 0.55),
        inset 2px 0 0 var(--accent-color),
        0 1px 2px rgba(0, 0, 0, 0.35),
        0 6px 16px rgba(0, 0, 0, 0.25),
        0 0 18px rgba(201, 168, 76, 0.10);
}
:root[data-theme="light"] .home-showcase-tab[aria-selected="true"]:focus-visible {
    box-shadow:
        inset 0 0 0 1.5px rgba(201, 168, 76, 0.55),
        inset 2px 0 0 var(--accent-color),
        0 1px 2px rgba(16, 31, 56, 0.06),
        0 6px 16px rgba(16, 31, 56, 0.08),
        0 0 16px rgba(201, 168, 76, 0.10);
}

/* ---- Stage + panels ---- */
.home-showcase-stage {
    position: relative;
    min-width: 0;                    /* grid child may shrink; panels own their width */
}
/* Every panel shares a min-height + flex column so switching never jumps the
   layout — the body flex-grows to fill, so short panels (tables) stay the same
   height as the tallest (the proforma). */
.home-showcase-panel {
    display: flex;
    flex-direction: column;
    min-height: 420px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
    /* Depth recipe (mirrors the DEPTH PASS applied to .home-mock cards). */
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.40),
        0 6px 16px rgba(0, 0, 0, 0.30),
        0 18px 44px rgba(0, 0, 0, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    border-top-color: rgba(255, 255, 255, 0.10);
}
.home-showcase-panel[hidden] { display: none; }
/* No-JS: every panel renders stacked — space them apart. Once homepage.js hides
   the inactive panels ([hidden]), any visible panel's previous sibling is always
   hidden, so this gap never applies in widget mode. */
.home-showcase-panel:not([hidden]) + .home-showcase-panel { margin-top: 1.25rem; }
.home-showcase-panel:focus-visible {
    outline: 2px solid var(--accent-color-light);
    outline-offset: 3px;
}
:root[data-theme="light"] .home-showcase-panel {
    box-shadow:
        0 1px 2px rgba(16, 31, 56, 0.06),
        0 4px 12px rgba(16, 31, 56, 0.07),
        0 14px 32px rgba(16, 31, 56, 0.06);
    border-top-color: var(--border-color);
}
/* Body flex-grows to fill the panel's min-height (content stays top-aligned). */
.home-showcase-panel .home-mock__body { flex: 1 1 auto; }

/* ---- Metric tiles (Proforma panel) ---- */
.mock-tiles {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.6rem;
    margin-top: 1rem;
}
.mock-tile {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 0.7rem 0.8rem;
}
.mock-tile__label {
    display: block;
    font-size: 0.625rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--secondary-text);
}
.mock-tile__value {
    display: block;
    margin-top: 0.25rem;
    font-family: var(--font-mono);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--accent-color);
}

/* ---- Toolbar + gold badge (Extraction / Tax / Comps / Assumptions) ---- */
.mock-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 1rem;
}
.mock-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.68rem;
    letter-spacing: 0.04em;
    color: var(--accent-text);
    background: var(--accent-subtle);
    border-radius: 999px;
    padding: 0.25rem 0.65rem;
}
.mock-badge__dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--accent-color);
}

/* ---- Assumption fields (Guided Assumptions panel) ---- */
.mock-field {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.55rem 0;
    border-bottom: 1px solid var(--border-secondary);
}
.mock-field:last-child { border-bottom: 0; }
.mock-field__label {
    flex: 0 0 34%;
    font-size: 0.82rem;
    color: var(--secondary-text);
}
.mock-field__input {
    flex: 1 1 auto;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    color: var(--primary-text);
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 0.35rem 0.6rem;
    text-align: right;
}
.mock-field__hint {
    flex: 0 0 auto;
    font-size: 0.68rem;
    color: var(--accent-text);
    background: var(--accent-subtle);
    border-radius: 999px;
    padding: 0.2rem 0.55rem;
    white-space: nowrap;
}

/* ---- Guidance bands (Guided Assumptions panel) ----
   The tab's own artifact: each assumption's input marked on a track against
   the ML market range (gold band) and market average (light-gold tick). The
   compact field-with-gold-hint rows live ONLY in How It Works stage 3. */
.mock-guide {
    display: grid;
    gap: 1.05rem;
}
.mock-guide__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}
.mock-guide__label {
    font-size: 0.82rem;
    color: var(--secondary-text);
}
.mock-guide__value {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--primary-text);
}
.mock-guide__track {
    position: relative;
    height: 10px;
    border-radius: 6px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-secondary);
}
.mock-guide__band {                   /* the ML market range */
    position: absolute;
    top: 1px;
    bottom: 1px;
    border-radius: 5px;
    background: linear-gradient(90deg, var(--accent-subtle) 0%, rgba(201, 168, 76, 0.45) 100%);
}
.mock-guide__avg {                    /* market-average tick */
    position: absolute;
    top: -3px;
    bottom: -3px;
    width: 2px;
    border-radius: 1px;
    background: var(--accent-color-light, #d8bd66);
}
.mock-guide__marker {                 /* the analyst's input */
    position: absolute;
    top: 50%;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    background: var(--card-bg);
    border: 2px solid var(--accent-color);
    box-shadow: 0 0 8px rgba(201, 168, 76, 0.35);
}
.mock-guide__scale {
    display: flex;
    justify-content: space-between;
    margin-top: 0.4rem;
    font-family: var(--font-mono);
    font-size: 0.62rem;
    color: var(--text-tertiary);
}
.mock-guide__note {
    margin-top: 1.15rem;
    font-size: 0.68rem;
    letter-spacing: 0.05em;
    color: var(--text-tertiary);
}
/* Per-assumption positions (mock data: vacancy / rent growth / exit cap). */
.mock-guide__row:nth-child(1) .mock-guide__band   { left: 20%; right: 45%; }
.mock-guide__row:nth-child(1) .mock-guide__avg    { left: 37%; }
.mock-guide__row:nth-child(1) .mock-guide__marker { left: 43%; }
.mock-guide__row:nth-child(2) .mock-guide__band   { left: 37%; right: 23%; }
.mock-guide__row:nth-child(2) .mock-guide__avg    { left: 57%; }
.mock-guide__row:nth-child(2) .mock-guide__marker { left: 50%; }
.mock-guide__row:nth-child(3) .mock-guide__band   { left: 48%; right: 20%; }
.mock-guide__row:nth-child(3) .mock-guide__avg    { left: 64%; }
.mock-guide__row:nth-child(3) .mock-guide__marker { left: 60%; }

/* ---- Mini table (Extraction / Tax / Comps) ---- */
.mock-table { width: 100%; }
.mock-table__row {
    display: grid;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.65rem;
    border-radius: 6px;
    font-size: 0.8rem;
}
.mock-table__row > span:first-child { color: var(--primary-text); }
.mock-table__cell--num {
    font-family: var(--font-mono);
    text-align: right;
    color: var(--secondary-text);
}
.mock-table__row--head {
    font-size: 0.625rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding-top: 0;
    padding-bottom: 0.35rem;
}
.mock-table__row--head > span,
.mock-table__row--head .mock-table__cell--num { color: var(--secondary-text); }
.mock-table__row--zebra { background: var(--bg-tertiary); }
.mock-table__row--total {
    border-top: 1px solid var(--border-color);
    margin-top: 0.4rem;
    padding-top: 0.55rem;
    font-weight: 600;
}
.mock-table__row--total > span:first-child,
.mock-table__row--total .mock-table__cell--num { color: var(--primary-text); }
/* Subject / highlighted row — gold. Placed after the base color rules so the
   equal-specificity gold override wins by source order (no !important). */
.mock-table__row--subject {
    background: var(--accent-subtle);
    box-shadow: inset 2px 0 0 var(--accent-color);
    font-weight: 600;
}
.mock-table__row--subject > span:first-child,
.mock-table__row--subject .mock-table__cell--num { color: var(--accent-text); }

/* Column templates per table variant */
.mock-table--t12      .mock-table__row { grid-template-columns: 1.4fr auto; }
.mock-table--comps    .mock-table__row { grid-template-columns: 1.5fr auto auto; }
.mock-table--tax      .mock-table__row { grid-template-columns: 1fr auto; }
.mock-table--proforma .mock-table__row { grid-template-columns: 1.6fr auto auto auto; }

/* Skeleton cell for the "parsing" row */
.mock-skeleton {
    display: inline-block;
    width: 46px; height: 10px;
    border-radius: 4px;
    background: var(--bg-tertiary);
    position: relative;
    overflow: hidden;
    vertical-align: middle;
}

/* ---- Capital stack (Capital Structure panel) ---- */
.mock-stack__bar {
    display: flex;
    height: 34px;
    margin-top: 0.25rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
}
.mock-stack__seg { height: 100%; }
.mock-stack__seg--senior { width: 65%; background: var(--secondary-text); }
.mock-stack__seg--mezz   { width: 10%; background: var(--accent-color-hover); }
.mock-stack__seg--equity { width: 25%; background: var(--accent-color); }
.mock-stack__legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem 1.25rem;
    margin-top: 0.9rem;
}
.mock-stack__key {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.75rem;
    color: var(--secondary-text);
}
.mock-stack__swatch { width: 10px; height: 10px; border-radius: 3px; }
.mock-stack__swatch--senior { background: var(--secondary-text); }
.mock-stack__swatch--mezz   { background: var(--accent-color-hover); }
.mock-stack__swatch--equity { background: var(--accent-color); }
.mock-stack__waterfall {
    margin-top: 1rem;
    padding: 0.6rem 0.8rem;
    background: var(--bg-tertiary);
    border-left: 2px solid var(--accent-color);
    border-radius: 0 8px 8px 0;
    font-size: 0.78rem;
    color: var(--secondary-text);
}
.mock-stack__waterfall strong { color: var(--primary-text); font-weight: 600; }

/* ---- Responsive: <=920px (where the hero also stacks) the rail collapses to a
   horizontal swipe-scrollable strip of compact chips on top (no wrap, the strip
   scrolls — never the page) with the full-width panel below. ---- */
@media (max-width: 920px) {
    .home-showcase-tabbed { display: block; }
    .home-showcase-tabstrip {
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 0.4rem;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;              /* Firefox */
        margin-bottom: 1.25rem;
    }
    .home-showcase-tabstrip::-webkit-scrollbar { display: none; }
    .home-showcase-tab {
        flex: 0 0 auto;
        width: auto;
        white-space: nowrap;
        padding: 0.6rem 0.9rem;
        border-radius: 8px;
    }
    .home-showcase-tab__kicker { display: none; }   /* compact chips — title only */
}

@media (max-width: 640px) {
    .home-showcase-panel { min-height: 440px; }
    .mock-tiles { gap: 0.45rem; }
    .mock-field { flex-wrap: wrap; }
    .mock-field__label { flex-basis: 100%; }
}

/* Reduced motion: kill the tab colour/shadow transitions (motion-gated CSS
   below is already excluded because html.reuw-anim is never set). */
@media (prefers-reduced-motion: reduce) {
    .home-showcase-tab { transition: none; }
}

/* ==========================================================================
   Showcase MOTION — all behind html.reuw-anim (JS sets it only when motion is
   allowed) + prefers-reduced-motion. Base state is always fully VISIBLE, so a
   no-JS / no-support / reduced-motion load never sees opacity:0.
   ========================================================================== */
@keyframes home-panel-in {
    from { opacity: 0; translate: 0 10px; }
    to   { opacity: 1; translate: 0 0; }
}
@keyframes home-comp-grow {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}
@keyframes home-shimmer {
    from { transform: translateX(-100%); }
    to   { transform: translateX(100%); }
}
@keyframes home-tab-fill {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}

@media (prefers-reduced-motion: no-preference) {
    /* (Scroll entrance for the rail + stage is handled by the shared js-reveal
       system at the bottom of this file — rail first, stage +100ms.) */

    /* Crossfade + subtle slide on tab switch — JS re-adds .is-entering (with a
       forced reflow) each activation so it replays every time. */
    html.reuw-anim .home-showcase-panel.is-entering {
        animation: home-panel-in 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
    }

    /* Auto-advance progress — a thin gold underline on the ACTIVE tab that fills
       over the 5s cycle (duration must match AUTO_MS in homepage.js). Rendered
       only while auto-advance is actually running (.is-auto, managed by JS) and
       motion is allowed; it disappears the moment the user takes over. Each
       activation swaps which tab matches the selector, so the fill restarts
       from zero in sync with the timer. */
    html.reuw-anim .home-showcase-tabbed.is-auto .home-showcase-tab[aria-selected="true"]::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 2px;
        background: linear-gradient(90deg,
            var(--accent-color-hover) 0%,
            var(--accent-color-light, #d8bd66) 100%);
        opacity: 0.75;
        transform: scaleX(0);
        transform-origin: left;
        animation: home-tab-fill 5s linear both;
    }

    /* Market Comps panel: the comp bars grow each time the panel enters
       (.is-entering replays on tab activation). Base state is fully drawn,
       so no-JS / reduced-motion loads never see empty tracks. */
    html.reuw-anim .home-showcase-panel.is-entering .mock-comp__fill {
        transform-origin: left;
        animation: home-comp-grow 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
    }
    html.reuw-anim .home-showcase-panel.is-entering .mock-comp:nth-child(1) .mock-comp__fill { animation-delay: 0.10s; }
    html.reuw-anim .home-showcase-panel.is-entering .mock-comp:nth-child(2) .mock-comp__fill { animation-delay: 0.18s; }
    html.reuw-anim .home-showcase-panel.is-entering .mock-comp:nth-child(3) .mock-comp__fill { animation-delay: 0.26s; }
    html.reuw-anim .home-showcase-panel.is-entering .mock-comp:nth-child(4) .mock-comp__fill { animation-delay: 0.34s; }

    /* "Parsing" shimmer sweep over the extraction skeleton cell. */
    html.reuw-anim .mock-skeleton::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(90deg, transparent, rgba(201, 168, 76, 0.28), transparent);
        transform: translateX(-100%);
        animation: home-shimmer 1.6s ease-in-out infinite;
    }
}

/* ==========================================================================
   SECTION HEADERS — LEFT-ALIGNED editorial treatment (Carson 2026-07-15).
   The centered eyebrow+title+dash read generic; left-anchoring matches the
   left-aligned hero so the whole page shares one rhythm. Clean left eyebrow +
   strong left title; the floating gold dash is retired.
   ========================================================================== */
/* The head and its content share ONE centered content column (1180px) with all
   content left-aligned inside it, so every section's head, grid, tabs and panel
   line up on the same left edge — the head no longer floats left of centered
   content. */
.home-section__head {
    text-align: left;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
}
.home-section__head .home-eyebrow {
    margin-bottom: 0.7rem;
    letter-spacing: 0.2em;
}
.home-section__head .home-section__sub { max-width: 62ch; margin-left: 0; }
.home-section__head .home-rule { display: none; }

/* ==========================================================================
   SCROLL REVEAL — shared js-reveal system (Carson 2026-07-16, Task B).
   One IntersectionObserver in homepage.js adds .js-reveal (the hidden/offset
   state) ONLY when html.reuw-anim is set and reduced motion is not preferred,
   then adds .is-in to reveal (one-shot; never re-hidden on scroll-back). The
   hidden state is NEVER authored in raw CSS on the elements themselves — a
   no-JS / reduced-motion / no-IntersectionObserver load always sees the full
   page. Per-element stagger comes from the JS-set --reveal-delay custom prop
   (capped at 400ms). Animates opacity + the independent `translate` property
   (transform-free, so card hover-lifts are never clobbered); will-change is
   dropped when JS strips the classes ~1.2s after reveal. Theme-safe: no colors
   involved.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
    html.reuw-anim .js-reveal {
        opacity: 0;
        translate: 0 16px;
        transition:
            opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
            translate 0.6s cubic-bezier(0.22, 1, 0.36, 1);
        transition-delay: var(--reveal-delay, 0s);
        will-change: opacity, translate;
    }
    html.reuw-anim .js-reveal.is-in {
        opacity: 1;
        translate: 0 0;
    }

    /* --- Masked heading reveal (scroll-motion pass, 2026-07-16) ------------
       Section heads keep the fade but drop their rise (--mask zeroes it); the
       h2's text instead rises out of an overflow-hidden line mask. The
       .js-headmask wrapper span is added by JS only when reveals are armed,
       and every rule here is scoped under .js-reveal, so the resting state
       (and any no-JS load) is the plain, fully visible heading. */
    html.reuw-anim .js-reveal.js-reveal--mask { translate: 0 0; }
    html.reuw-anim .js-reveal.js-reveal--mask .js-headmask { overflow: hidden; }
    html.reuw-anim .js-reveal.js-reveal--mask .js-headmask__inner {
        display: block;
        translate: 0 108%;
        will-change: translate;
    }
    html.reuw-anim .js-reveal.js-reveal--mask.is-in .js-headmask__inner {
        translate: 0 0;
        transition: translate 0.6s cubic-bezier(0.22, 1, 0.36, 1);
        transition-delay: var(--reveal-delay, 0s);
    }

    /* --- Gold hairline draw-in ---------------------------------------------
       The persona pull-line's gold rule draws left-to-right ~120ms after its
       card reveals. Hidden state lives only under .js-reveal, so the resting
       rule is always fully drawn (incl. after the 1.2s class cleanup, which
       also restores the rule's own hover transition). */
    html.reuw-anim .js-reveal .home-card__moment::before {
        transform: scaleX(0);
        transform-origin: left center;
    }
    html.reuw-anim .js-reveal.is-in .home-card__moment::before {
        transform: scaleX(1);
        transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
        transition-delay: calc(var(--reveal-delay, 0s) + 0.12s);
    }

    /* --- Scale-settle variant ----------------------------------------------
       The two hero-scale framed panels (Platform Interface dashboard shot,
       capabilities stage) settle from a barely-larger scale instead of the
       plain rise. `scale` is the independent property, so child transforms
       and hover-lifts are never clobbered. The .is-in rule carries an extra
       class of specificity so it beats the hidden state regardless of order. */
    html.reuw-anim .js-reveal.js-reveal--settle {
        translate: 0 12px;
        scale: 1.015;
        transition:
            opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
            translate 0.6s cubic-bezier(0.22, 1, 0.36, 1),
            scale 0.6s cubic-bezier(0.22, 1, 0.36, 1);
        transition-delay: var(--reveal-delay, 0s);
        will-change: opacity, translate, scale;
    }
    html.reuw-anim .js-reveal.js-reveal--settle.is-in {
        translate: 0 0;
        scale: 1;
    }

    /* --- Soft bloom variant (CTA band gold glow) ---------------------------
       The conversion band's glow blooms in as the band scrolls into view: a
       slow, soft opacity + in-place scale settle, NO rise. Only the
       independent opacity/scale animate, so the glow's centering transform
       (translate(-50%, -50%)) is never clobbered. The hidden state lives only
       under .js-reveal, so a no-JS / reduced-motion load shows the glow fully
       drawn. Runs slower than the text cascade in front of it so it reads as a
       warm ambient wash, not a second moving element. */
    html.reuw-anim .js-reveal.js-reveal--bloom {
        translate: 0 0;
        scale: 0.92;
        transition:
            opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
            scale 0.9s cubic-bezier(0.22, 1, 0.36, 1);
        transition-delay: var(--reveal-delay, 0s);
        will-change: opacity, scale;
    }
    html.reuw-anim .js-reveal.js-reveal--bloom.is-in {
        scale: 1;
    }
}

/* ==========================================================================
   HERO AMBIENT PARALLAX (scroll-motion pass, 2026-07-16).
   As the hero scrolls out, the copy column and the product panel drift up at
   slightly different rates (copy -8px, panel -18px over the full exit) —
   depth without theatrics. Pure CSS scroll-driven animation, progressively
   enhanced: Chromium + Safari 26 run it; Firefox (timeline still flagged)
   and reduced-motion get the static hero. Uses the independent `translate`
   property so the panel's transform-based hover and the copy children's
   one-shot load animation are untouched. The 1ms duration is a legacy-engine
   safety valve — a progress timeline ignores duration entirely.
   ========================================================================== */
/* HERO AMBIENT PARALLAX is now driven by JavaScript (homepage.js), NOT a
   CSS scroll-driven timeline. The pure-CSS `animation-timeline: scroll()`
   version silently no-op'd on any engine without scroll-driven-animation
   support (Firefox = still flagged off as of 2026-07; the @supports gate then
   left the hero static). The JS version sets the independent `translate`
   property on scroll in every browser. It self-disables under
   prefers-reduced-motion, so no CSS gate is needed here. */

/* ==========================================================================
   LANDING RESTRUCTURE (2026-07-28) — new Problem section, sticky section-nav,
   and anchored-scroll offsets. All first-party, token-driven, theme-safe, and
   motion-gated. Appended last so the header background/elevate overrides win by
   source order over the base .home-header rule above.
   ========================================================================== */

/* Approx sticky-header height, used as the scroll-margin offset for anchored
   sections so a jumped-to heading is never hidden under the fixed header. */
.home { --home-header-h: 4.5rem; }
@media (max-width: 560px) { .home { --home-header-h: 3.6rem; } }

/* Smooth in-page anchoring, gated so reduced-motion users get instant jumps.
   homepage.css loads ONLY on the landing page, so styling html here is scoped
   to this page in practice. */
@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
}
/* The four nav-target sections carry an id; offset their anchor landing point
   by the header height. Problem + CTA band have no id, so they are unaffected. */
.home-section[id] { scroll-margin-top: calc(var(--home-header-h, 4.5rem) + 0.75rem); }

/* Sticky-header polish. Solid fallback where backdrop-filter is unsupported so
   the bar is never see-through; subtle elevation once scrolled past the hero. */
@supports not ((backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px))) {
    .home-header { background: var(--bg-primary); }
}
.home-header { transition: box-shadow 0.25s ease, background 0.25s ease; }
.home-header.is-scrolled { box-shadow: 0 6px 22px rgba(0, 0, 0, 0.30); }
:root[data-theme="light"] .home-header.is-scrolled { box-shadow: 0 6px 22px rgba(16, 31, 56, 0.10); }

/* ---- Header section-nav: real anchor links between the logo and auth nav ---- */
.home-sectionnav {
    display: flex;
    align-items: center;
    gap: clamp(0.75rem, 2vw, 1.85rem);
}
.home-sectionnav__link {
    position: relative;
    font-family: var(--font-ui);
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1;
    color: var(--secondary-text);
    text-decoration: none;
    padding: 0.4rem 0.15rem;
    white-space: nowrap;
    /* 0.2s matches the underline's ::after transition below, so the active
       link's color and gold underline ease in together (no early color snap). */
    transition: color 0.2s ease;
}
/* Gold underline: grows on hover/focus, pinned on the in-view section. */
.home-sectionnav__link::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -0.35rem;
    height: 2px;
    border-radius: 2px;
    background: var(--accent-color);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.2s ease;
}
.home-sectionnav__link:hover { color: var(--primary-text); }
.home-sectionnav__link:focus-visible { outline: none; color: var(--primary-text); }
.home-sectionnav__link:hover::after,
.home-sectionnav__link:focus-visible::after { transform: scaleX(1); }
.home-sectionnav__link.is-active { color: var(--accent-color); }
.home-sectionnav__link.is-active::after { transform: scaleX(1); }

/* Hide the anchor links on narrow widths so the logo + auth button never crowd. */
@media (max-width: 760px) {
    .home-sectionnav { display: none; }
}

/* ---- The Problem — 3-up pain points reusing the shared .home-card recipe ---- */
.home-problem {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}
/* .home-card carries the depth/hover recipe; the item just stacks its copy
   (mirrors the persona card's flex column). */
.home-problem__item { display: flex; flex-direction: column; }
/* Stack with the same rhythm as the persona row (which stacks at 920px). */
@media (max-width: 920px) {
    .home-problem { grid-template-columns: 1fr; }
}

/* Reduced motion: no underline slide, no header elevate transition. */
@media (prefers-reduced-motion: reduce) {
    .home-sectionnav__link,
    .home-sectionnav__link::after,
    .home-header { transition: none; }
}