/* Public landing page (/). The one Viva surface that explains the product
   to someone who has not used it. It shows the product itself (a recorded
   sample exam, its proposed grade, and screenshots of the app captured by
   scripts/capture_landing_screens.py) and keeps its few diagrams flat, in
   brand tokens. Every diagram is HTML and CSS rather than one wide SVG, so
   it reflows to a single column on a phone instead of shrinking its labels. */

.lp-topbar {
    background: var(--viva-violet);
    padding: 0.875rem 1.5rem;
}
.lp-topbar-inner {
    max-width: 1120px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 1.5rem;
}
.lp-brand {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--viva-white);
    text-decoration: none;
    margin-right: auto;
}
.lp-nav {
    display: flex;
    gap: 1.25rem;
}
.lp-nav a {
    color: var(--viva-on-violet-muted);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
}
.lp-nav a:hover { color: var(--viva-white); text-decoration: underline; }
.lp-topbar .btn-signin {
    background: transparent;
    color: var(--viva-white);
    border: 1px solid var(--viva-on-violet-border);
    padding: 6px 14px;
    font-size: 13px;
}
.lp-topbar .btn-signin:hover { background: var(--viva-on-violet-hover); }
.lp-topbar a:focus-visible {
    outline: none;
    box-shadow: var(--viva-focus-ring-on-violet);
    border-radius: 4px;
}

.lp-main a:focus-visible,
.lp-main button:focus-visible {
    outline: none;
    box-shadow: var(--viva-focus-ring);
}

.lp-wrap {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 1.5rem;
}
.lp-section {
    padding: 56px 0;
    border-top: 1px solid var(--viva-gray-light);
}
.lp-eyebrow {
    font-size: var(--viva-size-label);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--viva-violet);
    margin-bottom: 0.5rem;
}
.lp-section h2 {
    font-size: 28px;
    line-height: var(--viva-line-tight);
    margin-bottom: 0.75rem;
    max-width: 720px;
}
.lp-section-lead {
    font-size: 16px;
    color: var(--viva-gray-dark);
    max-width: 720px;
    margin-bottom: 2.5rem;
}

/* ---- Hero ---------------------------------------------------------- */

.lp-hero {
    padding: 56px 0 64px;
}
.lp-hero .lp-wrap {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 48px;
    align-items: center;
}
.lp-hero-shot figcaption {
    font-size: 13px;
    color: var(--viva-gray-mid);
    margin-top: 10px;
}
.lp-hero-shot figcaption a { color: var(--viva-violet); font-weight: 600; }
.lp-hero h1 {
    font-size: 40px;
    line-height: 1.15;
    letter-spacing: -0.01em;
    margin-bottom: 1rem;
}
.lp-hero-sub {
    font-size: 20px;
    font-weight: 600;
    line-height: var(--viva-line-tight);
    color: var(--viva-deep-violet);
    margin-bottom: 0.75rem;
}
.lp-hero-lead {
    font-size: 18px;
    color: var(--viva-gray-dark);
    margin-bottom: 1.75rem;
}
.lp-cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 1rem;
}
.lp-cta-row .btn {
    font-size: 15px;
    padding: 0.75rem 1.5rem;
}
.lp-access,
.lp-evidence-line {
    font-size: 14px;
    color: var(--viva-gray-dark);
    margin-bottom: 0.75rem;
}
.lp-evidence-line { margin-bottom: 1.5rem; }
.lp-access a,
.lp-evidence-line a {
    color: var(--viva-violet);
    font-weight: 600;
    white-space: nowrap;
}
.lp-student-note {
    font-size: 14px;
    color: var(--viva-gray-mid);
    border-left: 3px solid var(--viva-violet-20);
    padding-left: 12px;
}
.lp-student-note strong { color: var(--viva-gray-dark); }

/* ---- The sample exam and its grade, as one panel -------------------- */

.lp-demo-band {
    background: var(--viva-violet-10);
    padding: 56px 0;
}
.lp-demo-band h2 {
    font-size: 28px;
    line-height: var(--viva-line-tight);
    margin-bottom: 0.75rem;
}
.lp-demo-band .lp-section-lead { margin-bottom: 1.5rem; }
.lp-demo {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    background: var(--viva-white);
    border: 1px solid var(--viva-gray-light);
    border-radius: var(--viva-radius-lg);
    box-shadow: var(--viva-shadow-card);
    overflow: hidden;
}
.lp-demo-pane { display: flex; flex-direction: column; min-width: 0; }
.lp-demo-pane + .lp-demo-pane { border-left: 1px solid var(--viva-gray-light); }
.lp-demo-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--viva-gray-light);
    font-size: 13px;
}
.lp-demo-status {
    font-weight: 600;
    color: var(--viva-violet);
}
.lp-demo-meta { margin-left: auto; color: var(--viva-gray-mid); }
.lp-sample-player {
    padding: 12px 16px;
    border-bottom: 1px solid var(--viva-gray-light);
    background: var(--viva-violet-10);
}
.lp-sample-player audio { display: block; width: 100%; }

.lp-transcript {
    list-style: none;
    padding: 16px;
    height: 340px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.lp-turn {
    max-width: 85%;
    padding: 9px 13px;
    border-radius: 14px;
    font-size: 14px;
    line-height: 1.45;
}
.lp-turn-who {
    display: block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    opacity: 0.75;
    margin-bottom: 2px;
}
.lp-turn.examiner {
    align-self: flex-start;
    background: var(--viva-gray-bg);
    color: var(--viva-black);
    border-bottom-left-radius: 4px;
}
.lp-turn.student {
    align-self: flex-end;
    background: var(--viva-violet);
    color: var(--viva-white);
    border-bottom-right-radius: 4px;
}
.lp-turn.system {
    align-self: center;
    max-width: 100%;
    background: none;
    color: var(--viva-gray-mid);
    font-size: 12px;
    padding: 2px 0;
}
/* The turn being spoken while the recording plays (landing-sample.js). */
.lp-turn {
    transition: box-shadow var(--viva-dur-fast) var(--viva-ease);
}
.lp-turn.is-current { box-shadow: 0 0 0 3px var(--viva-teal); }

.lp-demo-caption {
    margin-top: auto;
    font-size: 12px;
    color: var(--viva-gray-mid);
    padding: 10px 16px;
    border-top: 1px solid var(--viva-gray-light);
}

/* The proposed grade beside the transcript. */
.lp-grade-dim { padding: 18px 20px; }
.lp-grade-dim + .lp-grade-dim { border-top: 1px solid var(--viva-gray-light); }
.lp-grade-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}
.lp-grade-head h3 { font-size: 16px; }
.lp-score { font-size: 14px; color: var(--viva-gray-dark); white-space: nowrap; }
.lp-score strong { font-size: 22px; color: var(--viva-violet); margin-right: 2px; }
.lp-quote-evidence {
    font-family: var(--viva-font-serif);
    font-size: 17px;
    line-height: 1.45;
    border-left: 3px solid var(--viva-violet-40);
    padding-left: 12px;
    margin: 0 0 10px;
}
.lp-grade-dim p { font-size: 14px; color: var(--viva-gray-dark); }
.lp-rounds {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--viva-gray-light);
    font-size: 13px;
}
.lp-agree {
    border-radius: var(--viva-radius-pill);
    border: 1px solid var(--viva-teal);
    color: var(--viva-deep-teal);
    font-weight: 600;
    font-size: 12px;
    padding: 2px 10px;
}
/* Shown by landing-sample.js: plays the recording from the quoted turn. */
.lp-seek {
    margin-left: auto;
    background: none;
    border: 1px solid var(--viva-violet-40);
    border-radius: var(--viva-radius-pill);
    color: var(--viva-violet);
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    padding: 2px 10px;
    cursor: pointer;
}
.lp-seek:hover { background: var(--viva-violet-10); }

/* ---- How it works: three steps, each with a screenshot ------------- */

.lp-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    margin-top: 2rem;
}
.lp-step { display: flex; flex-direction: column; }
.lp-step-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.lp-step-num {
    flex: none;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--viva-violet);
    color: var(--viva-white);
    font-weight: 700;
    display: grid;
    place-items: center;
}
.lp-step h3 { font-size: 17px; }
.lp-step p { font-size: 14px; color: var(--viva-gray-dark); margin-bottom: 16px; }

/* A screenshot of the app, linked to the full-size image. Steps crop
   theirs to one shape from the top, so the row lines up. */
.lp-shot {
    display: block;
    border: 1px solid var(--viva-gray-light);
    border-radius: var(--viva-radius);
    box-shadow: var(--viva-shadow-card);
    overflow: hidden;
    background: var(--viva-white);
}
.lp-shot img { display: block; width: 100%; height: auto; }
.lp-step .lp-shot { margin-top: auto; aspect-ratio: 4 / 3; }
.lp-step .lp-shot img { height: 100%; object-fit: cover; object-position: top left; }
.lp-shot:hover { border-color: var(--viva-violet-40); }
.lp-shot-note { font-size: 13px; color: var(--viva-gray-mid); margin-top: 12px; }
.lp-cta-after { margin-top: 28px; margin-bottom: 0; }

/* ---- Exam phases: the state machine -------------------------------- */

.lp-flow {
    display: flex;
    align-items: stretch;
    gap: 0;
    margin-bottom: 2.5rem;
}
.lp-node {
    flex: 1;
    border: 2px solid var(--viva-violet);
    border-radius: var(--viva-radius);
    padding: 16px;
    background: var(--viva-white);
    text-align: center;
}
.lp-node.is-terminal {
    border-style: dashed;
    border-color: var(--viva-violet-40);
}
.lp-node-kicker {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--viva-violet);
}
.lp-node-title { font-weight: 600; font-size: 15px; margin: 2px 0; }
.lp-node-note { font-size: 13px; color: var(--viva-gray-mid); }
.lp-edge {
    flex: 0 0 132px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 0 8px;
}
.lp-edge-line {
    position: relative;
    width: 100%;
    height: 2px;
    background: var(--viva-violet-60);
    margin: 8px 0;
}
.lp-edge-line::after {
    content: "";
    position: absolute;
    right: -1px;
    top: -5px;
    border: 6px solid transparent;
    border-left: 8px solid var(--viva-violet-60);
    border-right: 0;
}
.lp-edge-label {
    font-size: 12px;
    color: var(--viva-gray-dark);
    line-height: 1.3;
}
.lp-edge-label code {
    font-family: var(--viva-font-mono);
    font-size: 11px;
    background: var(--viva-violet-10);
    color: var(--viva-deep-violet);
    border-radius: 3px;
    padding: 0 4px;
}

.lp-principles {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px 24px;
    font-size: 14px;
    color: var(--viva-gray-dark);
}
.lp-principles strong { display: block; color: var(--viva-black); margin-bottom: 4px; }

/* ---- Grading: what the instructor gets, then how ------------------- */

.lp-grading {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
    gap: 40px;
    align-items: center;
    margin-top: 1.5rem;
}
.lp-benefits { list-style: none; display: flex; flex-direction: column; gap: 20px; }
.lp-benefits h3 { font-size: 16px; margin-bottom: 4px; }
.lp-benefits p { font-size: 14px; color: var(--viva-gray-dark); }
.lp-shot-figure figcaption { font-size: 13px; color: var(--viva-gray-mid); margin-top: 10px; }

.lp-council {
    display: grid;
    grid-template-columns: 1fr auto 1.3fr auto 1.3fr auto 1fr auto 1fr;
    align-items: center;
    gap: 10px;
}
.lp-stage {
    border: 1px solid var(--viva-gray-light);
    border-radius: var(--viva-radius);
    padding: 16px 14px;
    text-align: center;
    background: var(--viva-white);
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.lp-stage h3 { font-size: 14px; margin-bottom: 4px; }
.lp-stage p { font-size: 12px; color: var(--viva-gray-mid); line-height: 1.4; }
.lp-stage-kicker {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--viva-violet);
    margin-bottom: 6px;
}
.lp-stage.is-human { border: 2px solid var(--viva-teal); }
.lp-stage.is-human .lp-stage-kicker { color: var(--viva-deep-teal); }
.lp-doc {
    width: 44px;
    height: 54px;
    margin: 0 auto 10px;
    border: 2px solid var(--viva-violet);
    border-radius: 4px;
    padding: 9px 7px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.lp-doc span { height: 3px; border-radius: 2px; background: var(--viva-violet-40); }
.lp-doc span:nth-child(2) { width: 70%; }
.lp-doc span:nth-child(4) { width: 55%; }
.lp-models {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 8px;
}
.lp-model {
    border-radius: var(--viva-radius-pill);
    border: 1px solid var(--viva-violet-40);
    background: var(--viva-violet-10);
    color: var(--viva-deep-violet);
    font-size: 13px;
    font-weight: 600;
    padding: 3px 10px;
}
.lp-triangle { display: block; width: 100%; max-width: 132px; height: auto; margin: 0 auto 8px; }
.lp-triangle-edges { stroke: var(--viva-violet-60); stroke-width: 2; fill: none; }
.lp-triangle-nodes { fill: var(--viva-violet); }
.lp-chair {
    width: 44px;
    height: 44px;
    margin: 0 auto 10px;
    border-radius: 50%;
    background: var(--viva-violet);
    color: var(--viva-white);
    display: grid;
    place-items: center;
    font-size: 20px;
}
.lp-arrow {
    align-self: center;
    color: var(--viva-violet-60);
    font-size: 20px;
}
.lp-arrow::before { content: "\2192"; }
/* ---- The examiner's constraints, behind a disclosure --------------- */

.lp-more {
    margin-top: 28px;
    border-top: 1px solid var(--viva-gray-light);
    padding-top: 20px;
}
.lp-more > summary,
.lp-faq summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--viva-violet);
}
.lp-more > summary { font-size: 16px; }
.lp-more[open] > summary { margin-bottom: 16px; }
.lp-more-title { font-size: 17px; margin: 24px 0 8px; }
.lp-more-title:first-of-type { margin-top: 8px; }
.lp-more .lp-section-lead { margin-bottom: 1.25rem; }
.lp-more .lp-flow { margin-bottom: 24px; }

/* ---- Research ------------------------------------------------------ */

.lp-research .lp-wrap {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: 48px;
    align-items: end;
}
.lp-research p { font-size: 15px; color: var(--viva-gray-dark); }
.lp-cite { font-size: 15px; color: var(--viva-gray-mid); margin-bottom: 1rem; }
.lp-cite cite { font-style: italic; }
.lp-paper-links { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 24px; }
.lp-paper-links a { color: var(--viva-violet); font-weight: 600; text-decoration: none; }
.lp-paper-links a:hover { text-decoration: underline; }
.lp-paper-links span { font-size: 13px; color: var(--viva-gray-mid); white-space: nowrap; }

/* ---- FAQ ----------------------------------------------------------- */

.lp-faq {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
}
.lp-faq-group h3 { font-size: 16px; margin-bottom: 8px; }
.lp-faq details { border-bottom: 1px solid var(--viva-gray-light); padding: 12px 0; }
.lp-faq summary { font-size: 15px; }
.lp-faq details p { font-size: 14px; color: var(--viva-gray-dark); margin-top: 8px; }

/* ---- Closing call to action (violet band) -------------------------- */

.lp-closing {
    background: var(--viva-violet);
    color: var(--viva-white);
    padding: 56px 0;
    text-align: center;
}
.lp-closing h2 { font-size: 28px; margin-bottom: 0.5rem; color: var(--viva-white); }
.lp-closing p { color: var(--viva-on-violet-muted); margin-bottom: 1.5rem; }
.lp-closing .btn-on-violet {
    background: var(--viva-white);
    color: var(--viva-violet);
    font-size: 15px;
    padding: 0.75rem 1.75rem;
}
.lp-closing .btn-on-violet:hover { background: var(--viva-violet-10); }
.lp-closing .btn-outline-on-violet {
    background: transparent;
    color: var(--viva-white);
    border: 1px solid var(--viva-on-violet-border);
    font-size: 15px;
    padding: 0.75rem 1.5rem;
}
.lp-closing .btn-outline-on-violet:hover { background: var(--viva-on-violet-hover); }
.lp-cta-center { justify-content: center; margin-bottom: 0; }
.lp-closing a:focus-visible {
    outline: none;
    box-shadow: var(--viva-focus-ring-on-violet);
}

.lp-footer {
    padding: 0.875rem 1.5rem;
    text-align: center;
    font-size: 12px;
    color: var(--viva-gray-mid);
    background: var(--viva-gray-bg);
    border-top: 1px solid var(--viva-gray-light);
}

/* ---- Narrow screens ------------------------------------------------ */

@media (max-width: 960px) {
    .lp-hero .lp-wrap { grid-template-columns: 1fr; gap: 32px; }
    .lp-demo { grid-template-columns: 1fr; }
    .lp-demo-pane + .lp-demo-pane { border-left: 0; border-top: 1px solid var(--viva-gray-light); }
    .lp-council { grid-template-columns: 1fr; }
    .lp-council .lp-arrow::before { content: "\2193"; }
    .lp-council .lp-arrow { justify-self: center; }
    .lp-steps { grid-template-columns: 1fr; max-width: 560px; }
    .lp-grading { grid-template-columns: 1fr; gap: 24px; }
    .lp-principles { grid-template-columns: 1fr; }
    .lp-faq, .lp-research .lp-wrap { grid-template-columns: 1fr; gap: 20px; }
    .lp-flow { flex-direction: column; }
    .lp-edge { flex-basis: auto; padding: 8px 0; }
    .lp-edge-line { width: 2px; height: 28px; margin: 0 0 6px; }
    .lp-edge-line::after {
        right: auto;
        left: -5px;
        top: auto;
        bottom: -1px;
        border: 6px solid transparent;
        border-top: 8px solid var(--viva-violet-60);
        border-bottom: 0;
    }
}
@media (max-width: 640px) {
    .lp-nav { display: none; }
    .lp-hero { padding: 40px 0 48px; }
    .lp-hero h1 { font-size: 30px; }
    .lp-section, .lp-demo-band { padding: 48px 0; }
    .lp-section h2, .lp-demo-band h2, .lp-closing h2 { font-size: 24px; }
    .lp-transcript { height: 320px; }
}

@media (prefers-reduced-motion: reduce) {
    .lp-turn { transition: none; }
}