/* Oral Rehearsal landing page.
   Tokens are the Willis Worxs design language (locked 2026-09-06): 8px grid, 24px inset,
   24px radius, Inter for everything, Libre Baskerville italic as the single drama accent,
   at most three sizes and three weights inside any one component. Palette is the app's own
   obsidian and champagne. Structure follows the website-design skill: floating navbar,
   opening shot, functional artifact cards, manifesto, sticky protocol, close, footer. */

:root {
    --grid: 8px;
    --space: 24px;
    --radius: 24px;
    --pill: 999px;
    --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-serif: "Libre Baskerville", "Playfair Display", Georgia, serif;

    --obsidian: #0f1216;
    --panel: #171b21;
    --panel-2: #1d222a;
    --line: #2b323c;
    --line-bright: #3d4450;
    --ivory: #e8eaed;
    --muted: #99a1ab;
    --champagne: #c9a227;
    --ok: #7fd18a;
    --bad: #ff8a8a;

    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-magnetic: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body.landing {
    margin: 0;
    background: var(--obsidian);
    color: var(--ivory);
    font-family: var(--font-sans);
    font-size: 17px;
    font-weight: 400;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}
/* width and height attributes plus height:auto reserve the box, so the lazy screenshots
   do not shift the page as they arrive. */
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

/* Grain over the whole page so the flat fields have tooth. */
.grain {
    position: fixed;
    inset: 0;
    z-index: 60;
    pointer-events: none;
    opacity: 0.05;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
}

.shell { width: 100%; max-width: 1160px; margin: 0 auto; padding: 0 var(--space); }

/* ---------------------------------------------------------------- A. Navbar */
.nav {
    position: fixed;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 50;
    display: flex;
    align-items: center;
    gap: var(--space);
    height: 56px;
    padding: 0 8px 0 var(--space);
    border: 1px solid transparent;
    border-radius: var(--radius);
    background: transparent;
    transition: background 0.4s var(--ease-out), border-color 0.4s var(--ease-out), backdrop-filter 0.4s var(--ease-out);
}
.nav.docked {
    background: rgba(15, 18, 22, 0.72);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-color: var(--line);
}
.nav .mark { font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap; }
.nav .links { display: flex; align-items: center; gap: var(--space); }
.nav .links a { font-size: 13px; font-weight: 500; color: var(--muted); text-decoration: none; transition: color 0.2s var(--ease-out), transform 0.2s var(--ease-out); }
.nav .links a:hover { color: var(--ivory); transform: translateY(-1px); }

/* Magnetic buttons: a sliding layer under the label, 1.03 lift on hover. */
.btn {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    padding: 0 var(--space);
    border: 1px solid var(--line-bright);
    border-radius: var(--pill);
    background: transparent;
    color: var(--ivory);
    font: inherit;
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.35s var(--ease-magnetic), border-color 0.35s var(--ease-out);
}
.btn .label { position: relative; z-index: 1; }
.btn .slide {
    position: absolute;
    inset: 0;
    background: var(--ivory);
    transform: translateY(101%);
    transition: transform 0.4s var(--ease-magnetic);
}
.btn:hover { transform: scale(1.03); border-color: var(--ivory); }
.btn:hover .slide { transform: translateY(0); }
.btn:hover .label { color: var(--obsidian); }
.btn.gold { border-color: var(--champagne); background: var(--champagne); color: #17130a; font-weight: 700; }
.btn.gold .slide { background: #e2bb45; }
.btn.gold:hover .label { color: #17130a; }
.btn.small { height: 40px; font-size: 13px; }

/* ---------------------------------------------------------------- B. Hero */
.hero { position: relative; min-height: 100dvh; display: flex; align-items: flex-end; padding: 120px 0 64px; overflow: hidden; }
.hero-media {
    position: absolute;
    top: 0;
    right: -8%;
    width: 68%;
    height: 100%;
    background: url("../assets/landing/hero-ct.jpg") no-repeat center right;
    background-size: contain;
    opacity: 0.62;
}
.hero-veil {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to top, var(--obsidian) 4%, rgba(15, 18, 22, 0.55) 46%, rgba(15, 18, 22, 0.15) 100%),
        linear-gradient(to right, var(--obsidian) 26%, rgba(15, 18, 22, 0.35) 62%, rgba(15, 18, 22, 0) 100%);
}
.hero .shell { position: relative; z-index: 2; }
.hero-copy { max-width: 720px; }
.eyebrow { font-size: 13px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--champagne); margin: 0 0 var(--space); }
.hero h1 { margin: 0; font-size: clamp(40px, 7vw, 72px); font-weight: 700; line-height: 1.02; letter-spacing: -0.03em; }
.hero h1 .drama { display: block; font-family: var(--font-serif); font-weight: 400; font-style: normal; letter-spacing: -0.01em; color: var(--champagne); }
.hero p { max-width: 560px; margin: var(--space) 0 0; color: var(--muted); }
.hero .cta { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 32px; }
.hero .attribution { margin: 32px 0 0; font-size: 13px; color: #8b939e; }
.hero .attribution a { color: #8b939e; }

/* ---------------------------------------------------------------- Figures band */
.figures { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.figures .fig { padding: 32px var(--space) 32px 0; }
.figures .fig + .fig { padding-left: var(--space); border-left: 1px solid var(--line); }
.figures .n { font-size: clamp(28px, 3.4vw, 40px); font-weight: 700; line-height: 1; letter-spacing: -0.02em; }
.figures .l { margin-top: 8px; font-size: 13px; font-weight: 500; color: var(--muted); }

/* ---------------------------------------------------------------- Sections */
section { padding: 96px 0; }
.section-head { max-width: 720px; margin-bottom: 48px; }
.section-head h2 { margin: 8px 0 0; font-size: clamp(28px, 4vw, 40px); font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; }
.section-head p { margin: 16px 0 0; color: var(--muted); }

/* ---------------------------------------------------------------- C. Artifact cards */
.artifacts { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space); align-items: stretch; }
.card {
    display: flex;
    flex-direction: column;
    padding: var(--space);
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.32);
}
.card h3 { margin: 0 0 8px; font-size: 20px; font-weight: 700; letter-spacing: -0.01em; }
.card p { margin: 0; font-size: 15px; color: var(--muted); }
/* Repeating cards: the artifact sits on the same line in every card (aligned-cards rule). */
.card .stage { margin-top: auto; padding-top: var(--space); }

/* Card 1: case shuffler */
.shuffler { position: relative; height: 232px; }
.shuffler .slip {
    position: absolute;
    left: 0;
    right: 0;
    height: 104px;
    padding: var(--space);
    background: var(--panel-2);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    transition: transform 0.6s var(--ease-spring), opacity 0.6s var(--ease-out);
}
.shuffler .slip .sec { font-size: 13px; font-weight: 500; color: var(--champagne); }
.shuffler .slip .ttl { margin-top: 8px; font-size: 15px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shuffler .slip[data-pos="0"] { transform: translateY(0) scale(1); opacity: 1; z-index: 3; }
.shuffler .slip[data-pos="1"] { transform: translateY(64px) scale(0.96); opacity: 0.7; z-index: 2; }
.shuffler .slip[data-pos="2"] { transform: translateY(128px) scale(0.92); opacity: 0.4; z-index: 1; }

/* Card 2: examiner feed */
.feed { min-height: 240px; display: flex; flex-direction: column; gap: 8px; }
.feed .live { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; color: var(--muted); }
.feed .dot { width: 8px; height: 8px; border-radius: var(--pill); background: var(--champagne); }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
.feed .lines { flex: 1; min-height: 0; font-size: 15px; }
.feed .who { font-size: 13px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.feed .said { margin: 8px 0 16px; }
.feed .said.ex { color: var(--champagne); }
.feed .caret { display: inline-block; width: 2px; height: 16px; margin-left: 2px; background: var(--champagne); vertical-align: -2px; animation: blink 1s steps(2) infinite; }
@keyframes blink { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } }

/* Card 3: score bands */
.meter { min-height: 240px; display: flex; flex-direction: column; justify-content: flex-end; gap: var(--space); }
.meter .bands { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.meter .band { height: 64px; display: flex; align-items: center; justify-content: center; text-align: center; background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius); transition: background 0.5s var(--ease-out), border-color 0.5s var(--ease-out), transform 0.5s var(--ease-spring); }
.meter .band .s { font-size: 20px; font-weight: 700; }
.meter .band.on { background: rgba(201, 162, 39, 0.14); border-color: var(--champagne); transform: translateY(-4px); }
.meter .band.on .s { color: var(--champagne); }
.meter .legend { display: flex; justify-content: space-between; font-size: 13px; font-weight: 500; color: var(--muted); }

/* ---------------------------------------------------------------- D. Manifesto */
.manifesto { position: relative; padding: 128px 0; background: #0b0e12; overflow: hidden; }
.manifesto-media { position: absolute; inset: 0; background: url("../assets/landing/angio.jpg") no-repeat center / 108% auto; opacity: 0.09; filter: invert(1) grayscale(1); }
.manifesto .shell { position: relative; z-index: 2; max-width: 896px; text-align: center; }
.manifesto blockquote { margin: 0; font-family: var(--font-serif); font-style: normal; font-weight: 400; font-size: clamp(24px, 3.6vw, 40px); line-height: 1.35; letter-spacing: -0.01em; }
.manifesto .attrib { margin: var(--space) 0 0; font-size: 13px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }

/* ---------------------------------------------------------------- E. Protocol */
.protocol { padding-bottom: 0; }
.stack { position: relative; }
.step {
    position: sticky;
    top: 96px;
    display: grid;
    /* The 200px column held three decorative SVGs that said nothing about their step. With
       them gone the card sizes to the text rather than leaving half of itself empty; the
       real screenshots are in the section below. */
    grid-template-columns: 1fr;
    max-width: 720px;
    margin-inline: auto;
    gap: var(--space);
    align-items: center;
    margin-bottom: var(--space);
    padding: var(--space);
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    transform-origin: 50% 0;
    will-change: transform, filter, opacity;
}
.step .num { font-size: 13px; font-weight: 700; letter-spacing: 0.16em; color: var(--champagne); }
.step h3 { margin: 24px 0 8px; font-size: clamp(22px, 2.6vw, 32px); font-weight: 700; letter-spacing: -0.02em; }
.step p { margin: 0; max-width: 520px; color: var(--muted); }
.step svg { width: 200px; height: 200px; justify-self: end; }
.step .ring { fill: none; stroke: var(--line-bright); stroke-width: 1; }
.step .ring.lit { stroke: var(--champagne); }
.step .scan { stroke: var(--champagne); stroke-width: 2; }
.step .cell { fill: var(--line-bright); }
.step .wave { fill: none; stroke: var(--champagne); stroke-width: 2; stroke-dasharray: 620; stroke-dashoffset: 620; }
.step.seen .wave { animation: trace 3.2s var(--ease-out) forwards; }
@keyframes trace { to { stroke-dashoffset: 0; } }
.step.seen .scan-line { animation: sweep 3.4s ease-in-out infinite; }
@keyframes sweep { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(120px); } }
.step.seen .spin { animation: spin 24s linear infinite; transform-origin: 100px 100px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------------- F. Proof */
/* One column: a screenshot at half width is not readable, and the product is the proof. */
.proof { display: grid; grid-template-columns: 1fr; gap: 48px; }
.proof figure { margin: 0; }
/* One radius on the page: the frame clips the screenshot, so the image needs none. */
.shot { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 24px 48px rgba(0, 0, 0, 0.4); overflow: hidden; }
.shot-caption { margin: 16px 0 0; font-size: 13px; color: var(--muted); }

/* ---------------------------------------------------------------- Case bank */
.bank { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 48px; }
.bank .row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.bank .row .name { font-size: 17px; font-weight: 500; }
.bank .row .n { font-size: 15px; color: var(--muted); }

/* ---------------------------------------------------------------- G. Close + footer */
.close-band { padding: 96px 0; }
.close-inner { padding: var(--space); text-align: center; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
.close-inner h2 { margin: 40px 0 16px; font-size: clamp(28px, 4vw, 40px); font-weight: 700; letter-spacing: -0.02em; }
.close-inner p { max-width: 560px; margin: 0 auto var(--space); color: var(--muted); }
.close-inner .cta { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; margin-bottom: 40px; }
/* The request-access line under the closing buttons: 16px below them, the band's 40px below it. */
.close-inner .cta + .join { margin: -24px auto 40px; font-size: 14px; }
.close-inner .join a { color: #8cb4d4; }

footer { padding: 64px 0 48px; background: #0b0e12; border-top-left-radius: var(--radius); border-top-right-radius: var(--radius); }
.foot-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--space); }
.foot-grid h4 { margin: 0 0 16px; font-size: 13px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.foot-grid a { display: block; margin-bottom: 8px; font-size: 15px; color: var(--ivory); text-decoration: none; transition: color 0.2s var(--ease-out), transform 0.2s var(--ease-out); }
.foot-grid a:hover { color: var(--champagne); transform: translateY(-1px); }
.foot-brand .mark { font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.foot-brand p { margin: 16px 0 0; max-width: 320px; font-size: 15px; color: var(--muted); }
.status { display: flex; align-items: center; gap: 8px; margin-top: var(--space); font-size: 13px; color: var(--muted); }
.status .dot { width: 8px; height: 8px; border-radius: var(--pill); background: var(--ok); animation: pulse 2s infinite; }
.legal { margin-top: 48px; padding-top: var(--space); border-top: 1px solid var(--line); font-size: 13px; color: #8b939e; }
.legal p { margin: 0 0 8px; max-width: 856px; }
.legal a { color: #8b939e; }

/* ---------------------------------------------------------------- Reveals */
/* Hidden only once the script is running, so the page reads with JavaScript blocked. */
.js .reveal { opacity: 0; transform: translateY(40px); transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out); }
.js .reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    .js .reveal { opacity: 1; transform: none; transition: none; }
    .step.seen .wave, .step.seen .scan-line, .step.seen .spin { animation: none; }
    .step .wave { stroke-dashoffset: 0; }
    html { scroll-behavior: auto; }
}

/* ---------------------------------------------------------------- Responsive */
@media (max-width: 900px) {
    .artifacts { grid-template-columns: 1fr; }
    .foot-grid { grid-template-columns: 1fr 1fr; }
    .step { grid-template-columns: 1fr; padding: var(--space); }
    .step svg { width: 160px; height: 160px; justify-self: start; }
}
@media (max-width: 720px) {
    body.landing { font-size: 16px; }
    /* The exam room is a desktop layout, so on a phone it is a scene: crop into it and let
       the caption carry the meaning. The debrief has its own phone capture and stays 1:1. */
    .shot { aspect-ratio: 4 / 3; }
    .shot img { width: 200%; max-width: none; height: 100%; object-fit: cover; object-position: 12% 22%; }
    .shot.native { aspect-ratio: auto; }
    .shot.native img { width: 100%; max-width: 100%; height: auto; object-fit: fill; }
    section { padding: 64px 0; }
    .nav { left: 16px; right: 16px; transform: none; padding: 0 8px 0 16px; gap: 16px; }
    .nav .links { gap: 16px; }
    .nav .links a.hide-sm { display: none; }
    .hero { padding: 104px 0 48px; }
    .hero-media { right: 0; width: 100%; opacity: 0.32; background-position: center top; }
    .hero-veil { background: linear-gradient(to top, var(--obsidian) 12%, rgba(15, 18, 22, 0.72) 52%, rgba(15, 18, 22, 0.3) 100%); }
    .figures { grid-template-columns: repeat(2, 1fr); }
    .figures .fig { padding: var(--space) var(--space) var(--space) 0; }
    .figures .fig:nth-child(odd) { border-left: 0; padding-left: 0; }
    .figures .fig:nth-child(even) { padding-left: var(--space); border-left: 1px solid var(--line); }
    .figures .fig:nth-child(n+3) { border-top: 1px solid var(--line); }
    .manifesto { padding: 96px 0; }
    .step { position: static; margin-bottom: 16px; }
    .bank { grid-template-columns: 1fr; }

    .foot-grid { grid-template-columns: 1fr; }
}