/* ============================================================
   Marketing section library — shared by the marketing pages
   (welcome.html, why-analog.html). Every color is a var(--…)
   token from theme.css; both themes inherit automatically.
   ============================================================ */

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

body {
    margin: 0;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* --- Buttons (lifted from welcome.html) --- */

.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    border-radius: 6px;
    padding: 10px 20px;
    font-size: 14px;
    text-decoration: none;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.btn-primary { background: var(--accent-gold); color: var(--text-inverse); }
.btn-primary:hover { background: var(--accent-gold-hover); }

.btn-outlined {
    background: transparent;
    color: var(--text-primary);
    border: 1px solid var(--border-primary);
}
.btn-outlined:hover { background: var(--bg-hover); }

.btn-minimal {
    background: transparent;
    color: var(--text-secondary);
    padding: 4px 8px;
    font-size: 13px;
    border: none;
    cursor: pointer;
    text-decoration: none;
}
.btn-minimal:hover { text-decoration: underline; }

.btn-large { padding: 14px 28px; font-size: 16px; border-radius: 8px; }

/* --- Navigation --- */

.marketing-nav { padding: 16px 24px; }

.marketing-nav-inner {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.marketing-brand { display: flex; align-items: center; gap: 8px; }

.marketing-brand-name {
    color: var(--text-primary);
    font-size: 18px;
    font-weight: 700;
    font-family: var(--font-serif);
}

.auth-buttons { display: flex; align-items: center; gap: 8px; }

@media (min-width: 768px) {
    .auth-buttons { gap: 16px; }
}

@media (max-width: 767px) {
    .auth-buttons .btn {
        padding-left: 12px;
        padding-right: 12px;
        font-size: 14px;
    }
    .auth-buttons .btn-minimal { display: none; }
}

/* --- Shared hero pieces --- */

.hero-eyebrow {
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent-gold);
    font-weight: 600;
    margin: 0 0 14px;
}

.hero-headline {
    font-family: var(--font-serif);
    font-size: clamp(2.2rem, 5vw, 3.6rem);
    font-weight: 700;
    line-height: 1.15;
    color: var(--text-primary);
    margin: 0 0 20px;
}

.hero-subhead {
    color: var(--text-secondary);
    font-size: 17px;
    line-height: 1.65;
    max-width: 560px;
    margin: 0 0 28px;
}

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

.trust-row {
    margin-top: 28px;
    color: var(--text-tertiary);
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.trust-row .dot-sep { color: var(--border-primary); }

@media (max-width: 767px) {
    .hero-cta-row { flex-direction: column; width: 100%; }
    .hero-cta-row .btn { width: 100%; justify-content: center; }
}

/* --- Split hero (Variant A) --- */

.hero-split {
    min-height: 88vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    padding: 48px;
    background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 40%, var(--bg-tertiary) 70%, var(--bg-primary) 100%);
}

.hero-split-grid {
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
    align-items: center;
}

@media (min-width: 1024px) {
    .hero-split-grid { grid-template-columns: 1fr 1fr; gap: 64px; }
}

@media (max-width: 767px) {
    .hero-split { min-height: auto; padding: 24px 16px 48px; }
}

@keyframes heroFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

.hero-preview-container {
    perspective: 1200px;
    display: flex;
    justify-content: center;
    align-items: center;
}

@media (prefers-reduced-motion: no-preference) {
    .hero-preview-container { animation: heroFloat 6s ease-in-out infinite; }
}

.hero-preview {
    width: 100%;
    max-width: 720px;
    border-radius: 12px;
    box-shadow: var(--shadow-xl);
    transform: rotateY(var(--ry, -12deg)) rotateX(var(--rx, 4deg));
    transition: transform 0.15s ease-out;
}

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

@media (max-width: 768px) {
    .hero-preview-container { animation: none; }
    .hero-preview { transform: none; box-shadow: var(--shadow-lg); }
}

/* --- Centered hero (Variants B, C) --- */

.hero-centered {
    padding: 88px 24px 48px;
    text-align: center;
    background: linear-gradient(180deg, var(--bg-secondary), var(--bg-primary));
}

.hero-centered .hero-subhead { margin-left: auto; margin-right: auto; }
.hero-centered .hero-cta-row { justify-content: center; }
.hero-centered .trust-row { justify-content: center; }

/* ============================================================
   Hero intake frame — the product's own interview surface, drawn
   in CSS rather than screenshotted, so the question and the answer
   inside it can rotate. The library and the sequencing live in
   hero-intake.js; everything you can see is here.

   It mirrors ui/src/pages/guided-intake: a status strip with a live
   dot and a covered-count badge, a serif transcript where Analog is
   prose and you are a ruled quote, a composer, and the fact-find
   rail on the right that fills in as the answer is worked out.
   ============================================================ */

.intake-hero {
    max-width: 1060px;
    margin: 34px auto 0;
    text-align: left;
}

.intake-window {
    border: 1px solid var(--border-primary);
    border-radius: 14px;
    background: var(--bg-primary);
    box-shadow: var(--shadow-xl), 0 0 0 6px var(--accent-gold-muted);
    overflow: hidden;
}

@media (prefers-reduced-motion: no-preference) {
    .intake-window { animation: intakeSettle 0.7s cubic-bezier(0.16, 1, 0.3, 1) both; }
}

@keyframes intakeSettle {
    from { opacity: 0; transform: translateY(14px) scale(0.985); }
    to { opacity: 1; transform: none; }
}

/* --- Status strip --- */

.intake-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 18px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-primary);
}

.intake-strip-left { display: flex; align-items: center; gap: 10px; min-width: 0; }

.intake-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent-emerald);
    flex-shrink: 0;
}

@media (prefers-reduced-motion: no-preference) {
    .intake-dot { animation: intakeBreathe 2.6s ease-in-out infinite; }
}

@keyframes intakeBreathe {
    0%, 100% { box-shadow: 0 0 0 0 var(--accent-emerald-muted); }
    55% { box-shadow: 0 0 0 6px transparent; }
}

.intake-window-title {
    font-family: var(--font-serif);
    font-weight: 700;
    font-size: 16px;
    color: var(--text-primary);
    white-space: nowrap;
}

.intake-status {
    font-size: 12px;
    color: var(--text-tertiary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.intake-badge {
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--accent-gold-muted);
    color: var(--accent-gold);
    white-space: nowrap;
}

/* --- Body: transcript, composer, rail --- */

.intake-body { display: grid; grid-template-columns: 1fr; }

.intake-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }

/* A real transcript: turns stack from the top and the sequencer keeps the newest
   one in view, so once the conversation is taller than the frame the older turns
   scroll up under the fade. The fixed height is what keeps the page from moving
   while an answer streams in. */
.intake-transcript {
    height: 326px;
    padding: 24px 26px 8px;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 46px);
    mask-image: linear-gradient(180deg, transparent 0, #000 46px);
}

.intake-turn { margin-bottom: 20px; }
.intake-turn:last-child { margin-bottom: 4px; }

.intake-turn-label {
    margin: 0 0 6px;
    font-size: 9.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-tertiary);
}

.intake-turn-body { margin: 0; font-family: var(--font-serif); }

.intake-turn-analog .intake-turn-body {
    font-size: 17px;
    line-height: 1.62;
    color: var(--text-primary);
}

.intake-turn-quote { border-left: 2px solid var(--accent-gold); padding-left: 14px; }

.intake-turn-you .intake-turn-body {
    font-size: 15.5px;
    line-height: 1.6;
    color: var(--text-secondary);
}

.intake-turn-body.is-streaming::after {
    content: '';
    display: inline-block;
    width: 2px;
    height: 0.95em;
    margin-left: 3px;
    vertical-align: -2px;
    background: var(--accent-gold);
    animation: intakeBlink 1s steps(1) infinite;
}

@keyframes intakeBlink { 50% { opacity: 0; } }

.intake-working {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 4px;
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 16px;
    color: var(--text-tertiary);
}

.intake-working-dots { display: inline-flex; gap: 3px; flex-shrink: 0; }

.intake-working-dots i {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--accent-gold);
    opacity: 0.35;
}

@media (prefers-reduced-motion: no-preference) {
    .intake-working-dots i { animation: intakeThink 1.2s ease-in-out infinite; }
    .intake-working-dots i:nth-child(2) { animation-delay: 0.15s; }
    .intake-working-dots i:nth-child(3) { animation-delay: 0.3s; }
}

@keyframes intakeThink {
    0%, 100% { opacity: 0.25; transform: translateY(0); }
    40% { opacity: 1; transform: translateY(-3px); }
}

/* --- Composer --- */

.intake-composer {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    padding: 12px 16px;
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-primary);
}

.intake-composer-field {
    flex: 1;
    min-width: 0;
    height: 66px;
    padding: 11px 14px;
    border: 1px solid var(--border-primary);
    border-radius: 9px;
    background: var(--bg-primary);
    overflow: hidden;
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-primary);
}

/* The placeholder sits after the caret, where an empty focused field puts it. */
.intake-composer-placeholder { display: none; color: var(--text-tertiary); }
.intake-composer-text.is-empty ~ .intake-composer-placeholder { display: inline; }

.intake-composer-caret {
    display: inline-block;
    width: 2px;
    height: 1em;
    margin-left: 1px;
    vertical-align: -2px;
    background: var(--accent-gold);
    animation: intakeBlink 1.1s steps(1) infinite;
}

.intake-composer-action {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    border: 1px solid var(--border-primary);
    color: var(--text-tertiary);
}

.intake-composer-action.is-send {
    border-color: transparent;
    background: var(--accent-gold);
    color: var(--text-inverse);
}

/* --- Fact-find rail --- */

.intake-rail { display: none; }

@media (min-width: 900px) {
    /* One height for the whole frame, so the rail and the transcript column always end
       on the same line — the transcript takes whatever the rail does not, and the
       composer stays pinned to the bottom instead of floating above a gap. */
    /* grid-template-rows, not height: an implicit row is auto-sized and would grow past
       a height on the container as the answer streams in, pushing the composer out
       through the window's clipped edge. 476px clears the tallest rail (463px). */
    .intake-body { grid-template-columns: minmax(0, 1fr) 292px; grid-template-rows: 476px; }
    .intake-transcript { height: auto; flex: 1; min-height: 0; }
    .intake-rail {
        display: flex;
        flex-direction: column;
        padding: 16px;
        background: var(--bg-secondary);
        border-left: 1px solid var(--border-primary);
    }
}

.intake-rail-eyebrow {
    margin: 0;
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-tertiary);
}

.intake-rail-title {
    margin: 5px 0 0;
    font-family: var(--font-serif);
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
}

.intake-rail-note {
    margin: 3px 0 0;
    font-size: 11px;
    line-height: 1.45;
    color: var(--text-tertiary);
}

.intake-rail-rows { flex: 1; margin-top: 12px; overflow: hidden; }

.intake-row {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 8px 0;
    border-bottom: 1px solid var(--border-secondary);
    opacity: 0.42;
    transition: opacity 0.5s ease;
}

.intake-row:last-child { border-bottom: none; }
.intake-row.is-used { opacity: 1; }

.intake-row-mark { width: 15px; height: 15px; flex-shrink: 0; margin-top: 2px; }
.intake-mark-pending { color: var(--text-tertiary); }
.intake-mark-done { display: none; color: var(--accent-emerald); }
.intake-row.is-used .intake-mark-pending { display: none; }
.intake-row.is-used .intake-mark-done { display: block; }

@media (prefers-reduced-motion: no-preference) {
    .intake-row.is-used .intake-mark-done path {
        stroke-dasharray: 18;
        animation: intakeDraw 0.4s ease-out both;
    }
}

@keyframes intakeDraw {
    from { stroke-dashoffset: 18; }
    to { stroke-dashoffset: 0; }
}

.intake-row-text { min-width: 0; }
.intake-row-label { margin: 0; font-size: 12.5px; line-height: 1.4; color: var(--text-primary); }

.intake-row-note {
    margin: 2px 0 0;
    font-size: 11.5px;
    line-height: 1.45;
    color: var(--text-tertiary);
}

.intake-rail-foot { margin-top: 8px; padding-top: 11px; border-top: 1px solid var(--border-primary); }

.intake-rail-foot-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    font-size: 10px;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--text-tertiary);
}

.intake-track { display: flex; gap: 2px; height: 3px; border-radius: 2px; overflow: hidden; }

.intake-track span { flex: 1; background: var(--bg-hover); transition: background 0.45s ease; }
.intake-track span.is-used { background: var(--accent-gold); }

/* --- The library, shown as pills you can jump between --- */

.intake-topics {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: 20px;
}

.intake-topic {
    font-family: inherit;
    font-size: 12.5px;
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid var(--border-primary);
    background: transparent;
    color: var(--text-tertiary);
    cursor: pointer;
    transition: color 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}

.intake-topic:hover { color: var(--text-secondary); border-color: var(--border-accent); }

.intake-topic.is-active {
    color: var(--text-primary);
    border-color: var(--accent-gold);
    background: var(--accent-gold-muted);
}

.intake-hint {
    margin: 14px 0 0;
    text-align: center;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--text-tertiary);
}

/* The demonstration is signed twice: a chip inside the frame, where someone reading
   the answer might mistake it for their own, and a full sentence below it. Neither
   shouts — it is a note you can read once and stop noticing, not a warning band. */
.intake-demo-chip {
    flex-shrink: 0;
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 2px 7px;
    border: 1px solid var(--border-primary);
    border-radius: 4px;
    color: var(--text-tertiary);
}

.intake-disclaimer-row { display: flex; justify-content: center; margin-top: 12px; }

.intake-disclaimer {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: 0;
    max-width: 620px;
    padding: 10px 14px;
    border: 1px solid var(--border-primary);
    border-radius: 8px;
    background: var(--bg-secondary);
    color: var(--text-tertiary);
    font-size: 12.5px;
    line-height: 1.55;
    text-align: left;
}

.intake-disclaimer-icon { flex-shrink: 0; margin-top: 2px; }

@media (max-width: 599px) {
    .intake-transcript { height: 300px; padding: 20px 18px 4px; }
    .intake-turn-analog .intake-turn-body { font-size: 15.5px; }
    .intake-turn-you .intake-turn-body { font-size: 14.5px; }
    .intake-working { font-size: 14.5px; }
    .intake-composer { padding: 10px 12px; }
    .intake-composer-field { height: 92px; font-size: 13px; }
    .intake-window-title { font-size: 15px; }
    .intake-badge { display: none; }
}

/* --- Chapter transcript bubbles (used inside carousel slides) --- */

.bubble {
    background: var(--bg-elevated);
    border: 1px solid var(--border-primary);
    border-radius: 12px;
    padding: 12px 16px;
    font-size: 14.5px;
    line-height: 1.5;
    color: var(--text-secondary);
    margin-bottom: 10px;
    max-width: 400px;
}

.bubble-member {
    background: var(--accent-gold-muted);
    border-color: transparent;
    color: var(--text-primary);
    margin-left: 64px;
}

.bubble-ready {
    border-color: var(--accent-gold);
    color: var(--text-primary);
}

/* --- Feature chapter --- */

.feature-chapter { padding: 88px 24px; }
.feature-chapter.alt { background: var(--bg-secondary); }

.feature-chapter-inner { max-width: 1200px; margin: 0 auto; }

.feature-head { max-width: 620px; margin-bottom: 32px; }
.feature-head.right { margin-left: auto; text-align: right; }
.feature-head.center { margin-left: auto; margin-right: auto; text-align: center; }

.feature-eyebrow {
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent-gold);
    font-weight: 600;
    margin: 0 0 10px;
}

.feature-heading {
    font-family: var(--font-serif);
    font-size: clamp(1.75rem, 3.2vw, 2.5rem);
    font-weight: 700;
    line-height: 1.2;
    color: var(--text-primary);
    margin: 0 0 14px;
}

.feature-body {
    color: var(--text-secondary);
    font-size: 16px;
    line-height: 1.65;
    margin: 0;
}

@media (max-width: 767px) {
    .feature-chapter { padding: 56px 16px; }
    .feature-head.right { margin-left: 0; text-align: left; }
    .feature-body { font-size: 15px; }
}

/* Numbered caption row (intake chapter — stills pending) */
.caption-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    max-width: 1200px;
    margin: 24px auto 0;
    padding: 0;
    list-style: none;
}

.caption-row li {
    color: var(--text-secondary);
    font-size: 13.5px;
    line-height: 1.55;
    border-top: 2px solid var(--border-primary);
    padding-top: 12px;
}

.caption-row li strong { color: var(--accent-gold); font-weight: 700; margin-right: 6px; }

@media (max-width: 767px) {
    .caption-row { grid-template-columns: 1fr; gap: 12px; }
}

/* A single framed shot inside a chapter */
.chapter-clip { max-width: 980px; margin: 0 auto; }
.chapter-clip .shot { margin: 0; }

/* Transcript reused as chapter media (A, B): centered, no hero backdrop */
.chapter-transcript { max-width: 480px; margin: 0 auto; text-align: left; }

/* --- Shot carousel --- */

.shot-carousel { position: relative; }

.shot-track {
    display: flex;
    align-items: center;
    gap: 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scrollbar-width: none; /* dots are the position indicator */
    padding: 4px 8vw; /* side padding creates the peek */
    scroll-behavior: smooth;
}

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

.shot {
    flex: 0 0 min(720px, 86vw);
    scroll-snap-align: center;
    margin: 0;
}

.shot img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    border: 1px solid var(--border-primary);
    box-shadow: var(--shadow-lg);
    display: block;
}

.shot figcaption {
    font-size: 13px;
    color: var(--text-secondary);
    margin-top: 10px;
    line-height: 1.5;
}

.shot.shot-portrait { flex: 0 0 min(300px, 70vw); }

/* A slide whose media is written, not screenshotted: a transcript exchange or
   a mocked email. Stretches to the row height so its panel sits level with the
   neighbouring screenshots. */
.shot.shot-conversation { flex: 0 0 min(520px, 86vw); display: flex; flex-direction: column; }

.shot-conversation .shot-stage {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-primary);
    border-radius: 12px;
    background: var(--bg-secondary);
    box-shadow: var(--shadow-lg);
    padding: 28px 24px;
}

/* A mocked email compose window — the product accepts documents by mail, and a
   drawn client is honest where a screenshot of someone's inbox would not be. */
.email-mock {
    width: 100%;
    max-width: 440px;
    border: 1px solid var(--border-primary);
    border-radius: 10px;
    background: var(--bg-primary);
    overflow: hidden;
    text-align: left;
    font-size: 13.5px;
    line-height: 1.5;
}

.email-mock-bar {
    display: flex;
    gap: 6px;
    padding: 10px 12px;
    background: var(--bg-tertiary);
    border-bottom: 1px solid var(--border-primary);
}

.email-mock-bar span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--border-primary);
}

.email-mock-field {
    display: flex;
    gap: 8px;
    padding: 9px 14px;
    border-bottom: 1px solid var(--border-primary);
    color: var(--text-primary);
}

.email-mock-label { color: var(--text-tertiary); min-width: 60px; }

.email-mock-attachment {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 12px 14px 4px;
    padding: 6px 11px;
    border: 1px solid var(--border-primary);
    border-radius: 6px;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
}

.email-mock-attachment svg {
    width: 13px;
    height: 13px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.email-mock-body { padding: 8px 14px 14px; color: var(--text-secondary); }

/* --- Mobile app band: a phone mockup beside the store links --- */

.app-band {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 72px;
    flex-wrap: wrap;
}

/* The phone body comes from the vendored Devices.css iPhone 14 Pro frame
   (/device-frame.css, MIT) — never drawn by hand here. This block only
   scales it to the band, tilts it, and insets the live screenshot. */
.phone-tilt {
    perspective: 1600px;
    flex-shrink: 0;
    padding: 16px 20px;
}

/* The vendored device is a fixed 428x868 box. The wrapper reserves the
   scaled footprint; the device is pinned to its center with the
   translate(-50%, -50%) idiom — with transform-origin at the element
   center, the rotations and the scale leave that center fixed, so the
   scaled device sits exactly over the wrapper. */
.phone-scale {
    --phone-scale: 0.66;
    position: relative;
    width: calc(428px * var(--phone-scale));
    height: calc(868px * var(--phone-scale));
}

.phone-scale .device {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotateY(-14deg) rotateX(4deg) rotateZ(1deg) scale(var(--phone-scale));
    filter: drop-shadow(-18px 30px 28px rgba(0, 0, 0, 0.45));
}

/* Screen wrapper: app background behind the image, content inset below the
   Dynamic Island (which ends ~45px into the screen) and above the corner
   curvature at the bottom, where the home indicator sits. The insets plus
   the image height must sum to the 830px aperture — the capture tool
   shoots the dashboard at a matching 390x764 viewport. */
.app-screen {
    background: var(--bg-primary);
    padding: 52px 0 14px;
    overflow: hidden;
}

.app-screen img {
    width: 100%;
    height: auto;
    display: block;
}

.app-screen-home {
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 96px;
    height: 4px;
    border-radius: 3px;
    background: var(--text-tertiary);
    opacity: 0.5;
}

.app-band-copy { max-width: 440px; }

.store-badges {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 24px;
    flex-wrap: wrap;
}

.store-badges img { height: 48px; width: auto; display: block; border-radius: 8px; }

@media (max-width: 767px) {
    .app-band { gap: 40px; }
    .app-band-copy { text-align: center; }
    .store-badges { justify-content: center; }
    .phone-scale { --phone-scale: 0.56; }
}

/* body-scoped so these outrank `.shot img` / `.pin-shot img` display rules.
   Pin-stage inline shots are excluded: their visibility is owned by the
   pin-stage rules (hidden on desktop, stacked under each caption on mobile). */
body img.shot-light:not(.pin-inline-shot) { display: block; }
body img.shot-dark:not(.pin-inline-shot) { display: none; }
[data-theme="dark"] body img.shot-light:not(.pin-inline-shot) { display: none; }
[data-theme="dark"] body img.shot-dark:not(.pin-inline-shot) { display: block; }

/* Edge-snapped variant (Variant B): no peek, arrows only */
.shot-carousel.edge .shot-track { padding: 4px 0; }
.shot-carousel.edge .shot { scroll-snap-align: start; }
.shot-carousel.edge .shot-dots { display: none; }

.shot-prev, .shot-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--bg-elevated);
    border: 1px solid var(--border-primary);
    color: var(--text-primary);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-md);
    z-index: 1;
}

.shot-prev:hover, .shot-next:hover { background: var(--bg-hover); }
.shot-prev { left: 12px; }
.shot-next { right: 12px; }

.shot-dots {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-top: 16px;
}

.shot-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--border-primary);
    border: none;
    padding: 0;
    cursor: pointer;
}

.shot-dot.active { background: var(--accent-gold); }

.compare-more { margin-top: 28px; text-align: center; }

.sample-note {
    text-align: center;
    color: var(--text-tertiary);
    font-size: 12px;
    margin: 14px 0 0;
}

@media (max-width: 767px) {
    .shot-prev, .shot-next { display: none; }
    .shot { flex: 0 0 86vw; }
}

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

/* --- Stat grid --- */

.stat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    max-width: 1200px;
    margin: 0 auto 40px;
}

.stat {
    background: var(--bg-elevated);
    border: 1px solid var(--border-primary);
    border-radius: 10px;
    padding: 24px;
}

.stat-num {
    font-family: var(--font-serif);
    font-size: 30px;
    font-weight: 700;
    color: var(--accent-gold);
    display: block;
}

.stat-label {
    font-size: 13.5px;
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 8px 0 0;
}

@media (max-width: 1023px) {
    .stat-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 540px) {
    .stat-grid { grid-template-columns: 1fr; }
}

/* --- Browser frame + pin stage (Variant B) --- */

.pin-stage {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px 64px;
    display: grid;
    grid-template-columns: minmax(260px, 32%) 1fr;
    gap: 48px;
    /* columns stretch to the full stage height so the sticky frame
       can travel alongside all three captions */
}

.pin-caption {
    min-height: 60vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.pin-caption h3 {
    font-size: 17px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 8px;
}

.pin-caption h3 .pin-num { color: var(--accent-gold); margin-right: 8px; }

.pin-caption p {
    color: var(--text-secondary);
    font-size: 15px;
    line-height: 1.6;
    margin: 0;
}

.pin-caption .pin-inline-shot { display: none; }

.pin-frame-sticky { position: sticky; top: 80px; }

.browser-frame {
    background: var(--bg-elevated);
    border: 1px solid var(--border-primary);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--shadow-xl);
}

.browser-frame-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: var(--bg-tertiary);
    border-bottom: 1px solid var(--border-primary);
}

.browser-frame-dots { display: flex; gap: 6px; }

.browser-frame-dots span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--border-primary);
    display: block;
}

.browser-frame-url {
    flex: 1;
    text-align: center;
    background: var(--bg-primary);
    border: 1px solid var(--border-secondary);
    border-radius: 6px;
    padding: 4px 12px;
    font-size: 12px;
    color: var(--text-tertiary);
    font-family: var(--font-mono);
}

.pin-shot { display: none; }
.pin-shot.active { display: block; }
.pin-shot img { width: 100%; height: auto; display: block; }

@media (max-width: 767px) {
    /* Pin disabled: captions and their screenshots render as a
       plain stacked sequence. CSS fallback, not a JS branch. */
    .pin-stage { grid-template-columns: 1fr; gap: 0; }
    .pin-frame-col { display: none; }
    .pin-caption { min-height: 0; padding: 24px 0; }
    .pin-caption .pin-inline-shot {
        display: block;
        width: 100%;
        height: auto;
        border-radius: 10px;
        border: 1px solid var(--border-primary);
        box-shadow: var(--shadow-md);
        margin-top: 16px;
    }
    .pin-caption .pin-inline-shot.shot-light { display: block; }
    .pin-caption .pin-inline-shot.shot-dark { display: none; }
    [data-theme="dark"] .pin-caption .pin-inline-shot.shot-light { display: none; }
    [data-theme="dark"] .pin-caption .pin-inline-shot.shot-dark { display: block; }
}

/* --- Comparison strip --- */

.compare-strip { max-width: 760px; margin: 0 auto; }

.compare-heading {
    font-family: var(--font-serif);
    font-size: clamp(1.6rem, 2.8vw, 2.2rem);
    font-weight: 700;
    line-height: 1.25;
    color: var(--text-primary);
    text-align: center;
    margin: 0 0 32px;
}

.compare-row {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 0;
    border-bottom: 1px solid var(--border-secondary);
    font-size: 15px;
    line-height: 1.55;
    color: var(--text-secondary);
}

.compare-row:last-child { border-bottom: none; }

.compare-check {
    color: var(--accent-emerald);
    font-weight: 700;
    flex-shrink: 0;
}

/* --- At-a-glance comparison table (why-analog) --- */

.glance-table {
    max-width: 1000px;
    margin: 0 auto;
    border: 1px solid var(--border-primary);
    border-radius: 12px;
    overflow: hidden;
    background: var(--bg-elevated);
}

.glance-head, .glance-row {
    display: grid;
    grid-template-columns: minmax(130px, 215px) 0.95fr 1.35fr;
    align-items: stretch;
}

/* Cells carry their own padding (rather than the row) so the Analog column's tint reads as
   one continuous band the eye can follow down the table. */
.glance-head > *, .glance-row > * { padding: 15px 22px; }

/* The header names the two columns in the brand serif rather than as a pair of micro-labels,
   and the Analog side carries the mark, so the comparison is signed. */
.glance-head {
    background: var(--bg-tertiary);
    border-bottom: 1px solid var(--border-primary);
    font-family: var(--font-serif);
    font-size: 20px;
    font-weight: 600;
    color: var(--text-tertiary);
}

.glance-head > * { padding: 19px 22px; }

.glance-head .glance-analog {
    color: var(--accent-gold);
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 10px;
}

.glance-brand-mark { width: 24px; height: 24px; flex-shrink: 0; }

.glance-row .glance-analog, .glance-head .glance-analog { background: var(--accent-gold-muted); }

a.glance-row {
    text-decoration: none;
    border-bottom: 1px solid var(--border-secondary);
    font-size: 14.5px;
    line-height: 1.55;
}

a.glance-row:last-child { border-bottom: none; }
a.glance-row:hover .glance-dim, a.glance-row:hover .glance-typical { background: var(--bg-hover); }
a.glance-row:hover .glance-dim { text-decoration: underline; }

.glance-dim { font-weight: 600; color: var(--text-primary); }
.glance-typical { color: var(--text-tertiary); }
.glance-analog { color: var(--text-primary); }

.glance-row .glance-typical, .glance-row .glance-analog {
    display: flex;
    align-items: baseline;
}

.glance-mark {
    flex-shrink: 0;
    margin-right: 10px;
    font-weight: 700;
    font-size: 13px;
}

.glance-mark-no { color: var(--text-tertiary); opacity: 0.5; }
.glance-mark-yes { color: var(--accent-emerald); }

.glance-note {
    text-align: center;
    color: var(--text-tertiary);
    font-size: 13px;
    margin: 16px 0 0;
}

@media (max-width: 767px) {
    .glance-head { display: none; }
    .glance-row { grid-template-columns: 1fr; }
    .glance-row > * { padding: 0 16px; }
    /* The row's subject still leads the stack, so it outsizes the two column labels under it. */
    .glance-row .glance-dim { padding: 16px 16px 8px; font-size: 16.5px; }
    .glance-row .glance-typical { padding-bottom: 10px; }
    .glance-row .glance-analog { padding-top: 12px; padding-bottom: 16px; }
    /* Block flow so each column's label sits above its answer; the mark stays inline with the text. */
    .glance-row .glance-typical, .glance-row .glance-analog { display: block; }
    .glance-typical::before, .glance-analog::before {
        display: block;
        font-family: var(--font-serif);
        font-size: 14px;
        font-weight: 600;
        color: var(--text-tertiary);
        margin-bottom: 3px;
    }
    .glance-typical::before { content: "A typical projection"; }
    .glance-analog::before { content: "Analog"; color: var(--accent-gold); font-weight: 700; }
}

@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
}

/* --- Audience callout band (welcome → why-analog) --- */

.audience-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    max-width: 1200px;
    margin: 40px auto 0;
}

.audience-card {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    background: var(--bg-elevated);
    border: 1px solid var(--border-primary);
    border-radius: 10px;
    padding: 24px 22px;
    transition: border-color 0.2s ease, transform 0.2s ease;
}

.audience-card:hover { border-color: var(--accent-gold); transform: translateY(-2px); }

.audience-card h3 {
    font-size: 15.5px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 8px;
}

.audience-card p {
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--text-secondary);
    margin: 0 0 16px;
}

.audience-more {
    margin-top: auto;
    font-size: 13px;
    font-weight: 600;
    color: var(--accent-gold);
}

@media (max-width: 1023px) {
    .audience-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 540px) {
    .audience-grid { grid-template-columns: 1fr; }
}

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

.cta-band {
    padding: 88px 24px;
    text-align: center;
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-secondary);
}

.cta-heading {
    font-family: var(--font-serif);
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    font-weight: 700;
    line-height: 1.2;
    color: var(--text-primary);
    margin: 0 0 28px;
}

.cta-signin {
    color: var(--text-secondary);
    font-size: 14px;
    margin: 20px 0 0;
}

.cta-signin a { color: var(--text-primary); text-decoration: underline; margin-left: 4px; }

/* --- Legal disclosure + footer (lifted from welcome.html) --- */

.legal-section { background: var(--bg-primary); padding: 64px 24px; }
.legal-section-inner { max-width: 1200px; margin: 0 auto; }

.legal-disclosure {
    margin: 0 auto;
    background: var(--bg-tertiary);
    border-radius: 12px;
    padding: 40px;
}

.legal-disclosure h2 {
    color: var(--text-primary);
    margin: 0 0 24px;
    font-size: 20px;
    font-weight: 700;
}

.legal-disclosure p {
    color: var(--text-secondary);
    line-height: 1.7;
    margin: 0 0 16px;
    font-size: 14px;
}

.legal-disclosure p:last-child { margin-bottom: 0; }

.footer-block {
    text-align: center;
    margin-top: 48px;
    padding-top: 32px;
    border-top: 1px solid var(--border-primary);
}

.footer-links {
    display: flex;
    flex-direction: column;
    gap: 16px;
    justify-content: center;
    align-items: center;
    margin-bottom: 24px;
}

@media (min-width: 768px) {
    .footer-links { flex-direction: row; gap: 32px; }
}

.footer-copyright { color: var(--text-tertiary); font-size: 12px; margin: 0; }