@font-face {
    font-family: 'Lora'; font-style: normal; font-weight: 400 700; font-display: swap;
    src: url('/fonts/lora-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Lora'; font-style: normal; font-weight: 400 700; font-display: swap;
    src: url('/fonts/lora-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Lora'; font-style: italic; font-weight: 400 700; font-display: swap;
    src: url('/fonts/lora-italic-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Lora'; font-style: italic; font-weight: 400 700; font-display: swap;
    src: url('/fonts/lora-italic-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap;
    src: url('/fonts/inter-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap;
    src: url('/fonts/inter-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- Tokens --- */
:root {
    --mid-bg: #0a0a0f;
    --mid-raise: #111119;
    --mid-text: #ececf3;
    --mid-soft: #c6c6d6;
    --mid-rule: #24242e;
    --mid-ink: #7fb2ff;

    --light-bg: #f5f2ed;
    --light-raise: #fdfcfa;
    --light-text: #1f1c17;
    --light-soft: #3f3a31;
    --light-rule: #ddd6c8;
    --light-ink: #1d4ed8;

    --accent: #3b82f6;
    --accent-strong: #2563eb;
    --accent-fg: #ffffff;

    --serif: 'Lora', Georgia, serif;
    --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

    --gutter: clamp(16px, 5vw, 64px);
    --max: 1200px;
    --ledger-inset: clamp(28px, 3.5vw, 44px);
    --section-pad: clamp(88px, 11vw, 160px);
    --radius: 8px;
    --btn-radius: 4px;
    --ease: cubic-bezier(.2, .7, .2, 1);
    /* The dashed underline, drawn explicitly: a browser dashed border picks
       its own dash length, which at 2px thick comes out as near-dots. Each 10px
       tile holds a centred 6px dash, and "round" stretches the tile slightly so
       a whole number fit, so a line never stops on half a dash whatever its width. */
    /* Two kinds of line, one thickness. A solid underline means "this is a link"
       and stays solid. The app's dash means "you are here" or "this is chosen":
       the current page in the menu, the selected tab, the open record, and it
       previews on hover over those same controls. The hero's dash is the one
       decorative use. */
    --line-h: 2.5px;
    --dash: linear-gradient(90deg, transparent 2px, var(--accent) 2px 8px, transparent 8px) 0 0 / 10px 100% round no-repeat;
}

/* --- Page changes ---
   Moving between pages (links and the Back button) cross-fades instead of
   flashing blank: the old page fades out, the new one fades and rises in, and
   the nav stays put. Browsers without View Transitions just load normally. */
@view-transition { navigation: auto; }
.nav { view-transition-name: site-nav; }
::view-transition-old(root) { animation: page-out .2s ease-out both; }
::view-transition-new(root) { animation: page-in .38s var(--ease) both; }
::view-transition-group(site-nav) { animation-duration: .3s; }
@keyframes page-out { to { opacity: 0; } }
@keyframes page-in { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) {
    @view-transition { navigation: none; }
}

/* --- Base --- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: 84px; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
body {
    margin: 0;
    background: var(--mid-bg);
    color: var(--mid-text);
    font-family: var(--sans);
    font-size: 17px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, p, ol, ul, dl, dd, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
code { font-family: ui-monospace, 'Cascadia Code', Menlo, monospace; font-size: .9em; padding: 1px 6px; border-radius: 5px; background: rgba(127, 127, 160, .16); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
/* Sections that receive focus only so keyboard users continue from them after a
   link jump (anchors.js gives them tabindex="-1") don't need a visible ring. */
[tabindex="-1"]:focus { outline: none; }

.wrap { width: 100%; max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.wrap.narrow { max-width: calc(860px + 2 * var(--gutter)); }

.skip { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; background: var(--accent-strong); color: var(--accent-fg); border-radius: 8px; text-decoration: none; font-weight: 600; }
.skip:focus { top: 12px; }

/* --- Tones: every section is midnight or light, set locally --- */
.tone-mid { --bg: var(--mid-bg); --raise: var(--mid-raise); --text: var(--mid-text); --soft: var(--mid-soft); --rule: var(--mid-rule); --ink: var(--mid-ink); }
.tone-light { --bg: var(--light-bg); --raise: var(--light-raise); --text: var(--light-text); --soft: var(--light-soft); --rule: var(--light-rule); --ink: var(--light-ink); }
.tone-mid, .tone-light { position: relative; background: var(--bg); color: var(--text); padding: var(--section-pad) 0; }

/* Light sections meet the midnight ones on a straight edge, and carry a ruled
   double line top and bottom, aligned to the content column, like the head and
   foot of a ledger page. */
.cut::before, .cut::after {
    content: "";
    position: absolute;
    left: max(var(--gutter), calc((100% - var(--max)) / 2));
    right: max(var(--gutter), calc((100% - var(--max)) / 2));
    height: 3px;
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
}
.cut::before { top: var(--ledger-inset); }
.cut::after { bottom: var(--ledger-inset); }

/* --- Type --- */
.display {
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(46px, 7vw, 108px);
    line-height: 1.08;
    letter-spacing: -0.028em;
}
.title {
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(36px, 4.8vw, 66px);
    line-height: 1.04;
    letter-spacing: -0.02em;
}
/* Blue emphasis: one phrase per heading, coloured, never italic. */
.hl { color: var(--ink, var(--mid-ink)); }

/* The app's dashed underline, scaled to the words it marks: the same 6-on-4
   rhythm as the nav dash, sized in em so it stays a dash at headline size.
   It writes itself in once, then drifts slowly. Once per page. */
.mark { position: relative; display: inline-block; }
.mark::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -.14em;
    height: max(var(--line-h), .06em);
    background: linear-gradient(90deg, transparent .07em, var(--accent) .07em .29em, transparent .29em) 0 0 / .36em 100% repeat-x;
    animation: mark-draw 1.1s var(--ease) .5s both, dash-drift 3.2s linear 1.6s infinite;
}
@keyframes mark-draw { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }
@keyframes dash-drift { to { background-position: .36em 0; } }
@keyframes dash-march { to { background-position: 10px 0; } }

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 500;
    color: var(--soft);
}

.body { max-width: 80ch; color: var(--soft); margin-top: 28px; }
.head-row { display: grid; gap: 18px; margin-bottom: clamp(40px, 5vw, 72px); }
.head-row.center { justify-items: center; text-align: center; }
.head-note { color: var(--soft); max-width: 70ch; font-size: 18px; }

.link-inline, .link-quiet, .more {
    color: var(--text);
    text-decoration: none;
    font-weight: 500;
    background-image: linear-gradient(var(--accent), var(--accent));
    background-size: 100% var(--line-h);
    background-position: 0 100%;
    background-repeat: no-repeat;
    padding-bottom: 3px;
    transition: color .2s;
}
@media (hover: hover) { .link-inline:hover, .link-quiet:hover, .more:hover { color: var(--ink); } }

/* --- Buttons --- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 52px;
    padding: 0 28px;
    border-radius: var(--btn-radius);
    background: var(--accent-strong);
    color: var(--accent-fg);
    font-weight: 600;
    font-size: 16px;
    text-decoration: none;
    transition: background .2s;
}
@media (hover: hover) { .btn:hover { background: #1d4ed8; } }
.btn:active { background: #1e40af; }
.btn-sm { min-height: 38px; padding: 0 18px; font-size: 14px; }

/* --- Nav --- */
.nav {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 50;
    transition: background .3s, border-color .3s;
    border-bottom: 1px solid transparent;
}
.nav.solid {
    background: var(--mid-bg);
    border-bottom-color: var(--mid-rule);
}
.nav-inner { display: flex; align-items: center; gap: 28px; height: 68px; }
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--mid-text); }
.brand-mark { width: 46px; height: 46px; }
.brand-word { font-family: var(--serif); font-size: 22px; letter-spacing: -0.01em; }
.nav-links { display: flex; gap: 4px; margin-left: auto; }
.nav-links a {
    position: relative;
    color: var(--mid-soft);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    padding: 8px 12px;
    transition: color .2s;
}
/* Same dashed underline the app uses for its active section. */
.nav-links a::after {
    content: "";
    position: absolute;
    left: 12px; right: 12px; bottom: 1px;
    height: var(--line-h);
    background: var(--dash);
    clip-path: inset(0 100% 0 0);
    transition: clip-path .3s var(--ease);
}
@media (hover: hover) { .nav-links a:hover { color: var(--mid-text); } }
@media (hover: hover) { .nav-links a:hover::after { clip-path: inset(0); animation: dash-march .9s linear infinite; } }
.menu { display: none; }

/* The Guides menu, on every page. */
.nav-guides { position: relative; }
.nav-guides summary { list-style: none; display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; color: var(--mid-soft); font-size: 14px; font-weight: 500; cursor: pointer; transition: color .2s; }
.nav-guides summary::-webkit-details-marker { display: none; }
.nav-guides summary::after { content: ""; width: 7px; height: 7px; margin-top: -3px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); transition: transform .25s var(--ease), margin .25s var(--ease); }
.nav-guides[open] summary { color: var(--mid-text); }
.nav-guides[open] summary::after { transform: rotate(-135deg); margin-top: 3px; }
/* Solid panel centred under the "Guides" label.
   The padding-top bridge keeps the hover alive while the pointer travels down. */
.guides-sheet { position: absolute; left: 50%; transform: translateX(-50%); top: 100%; padding-top: 12px; width: 268px; }
.guides-sheet-inner { display: grid; padding: 6px; background: var(--mid-raise); border: 1px solid var(--mid-rule); border-radius: var(--radius); animation: sheet-in .22s var(--ease) both; }
@keyframes sheet-in { from { opacity: 0; transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .guides-sheet-inner { animation: none; } }
.nav-links > a[aria-current] { color: var(--mid-text); }
.nav-links > a[aria-current]::after { clip-path: inset(0); }
.guides-sheet a { padding: 10px 12px; border-radius: 6px; color: var(--mid-text); text-decoration: none; font-size: 14.5px; }
.guides-sheet a[aria-current], .menu-sheet a[aria-current] { color: var(--mid-ink); }
.guides-sheet a[aria-current]::after, .menu-sheet a[aria-current]::after { content: "  you're here"; color: var(--mid-soft); font-size: 12.5px; }
@media (hover: hover) { .nav-guides summary:hover { color: var(--mid-text); } }
/* The menu's items sit inside .nav-links, so they would inherit its colour fade
   and the marching dash that wipes in over .3s; a quick sweep then lags behind
   the pointer. Here the highlight is the fill alone, and it changes at once. */
.guides-sheet a { transition: none; }
.guides-sheet a::after { content: none; }
@media (hover: hover) { .guides-sheet a:hover { background: rgba(255, 255, 255, .07); } }
.menu-h { padding: 10px 14px 4px; font-size: 13px; font-weight: 600; color: var(--mid-soft); }
.menu-dl { margin-top: 6px; border-top: 1px solid var(--mid-rule); border-radius: 0 !important; }

/* --- Hero --- */
.hero { padding-top: clamp(140px, 18vh, 200px); padding-bottom: 0; overflow: hidden; }
.field { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.hero-inner { position: relative; display: grid; gap: 22px; justify-items: start; }
.hero .display { font-size: clamp(40px, 5.4vw, 80px); }
.hero-lede { max-width: 80ch; color: var(--mid-soft); font-size: clamp(18px, 1.55vw, 21px); line-height: 1.55; margin-top: 6px; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 26px; margin-top: 14px; }
.hero-meta { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 13px; color: var(--mid-soft); letter-spacing: .02em; }

.stage {
    position: relative;
    margin-top: clamp(56px, 8vw, 96px);
    padding-bottom: clamp(60px, 8vw, 120px);
}

/* --- Dashboard model: the app's home screen as a flat panel, as the app draws it --- */
/* Sized in em, where 1em is one seventy-second of the model's width (it's a size
   container), so it scales like an image while the text stays crisp. */
.model {
    position: relative;
    container-type: inline-size;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    border-radius: var(--radius);
    border: 1px solid var(--mid-rule);
    background: var(--mid-raise);
    color: #e8e8f0;
}
.model > * { font-size: calc(100cqw / 72); }

.m-left { padding: 4.2em 3.6em 4em 4.6em; border-right: 1px solid rgba(255, 255, 255, .07); }
.m-right { padding: 4.2em 4.6em 4em 3.6em; }

.m-head { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: .9em; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.m-word { font-family: var(--serif); font-size: 2.3em; letter-spacing: .12em; line-height: 1; }
.m-date { font-size: .74em; letter-spacing: .12em; color: var(--mid-soft); }
.m-stats { display: flex; justify-content: space-between; margin-top: 1.9em; }
.m-stats div { display: grid; gap: .25em; }
.m-k { font-size: .72em; letter-spacing: .12em; text-transform: uppercase; color: var(--mid-soft); }
.m-v { font-family: var(--serif); font-size: 2.15em; line-height: 1; font-variant-numeric: tabular-nums; }
.m-wave { display: block; width: 100%; height: 1em; margin-top: 1.6em; fill: none; stroke: rgba(127, 178, 255, .35); stroke-width: 1.2; }
.js .m-wave path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2.2s var(--ease) .3s; }
.js .model.live .m-wave path { stroke-dashoffset: 0; }
.m-h { font-size: .72em; letter-spacing: .14em; text-transform: uppercase; color: var(--mid-soft); margin-top: 2.4em; }
.m-right .m-h { margin-top: 0; }

.m-activity { margin: 1.3em 0 0 .25em; border-left: 1px solid rgba(255, 255, 255, .1); }
.m-activity li { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 0 1em; padding: 0 0 1.15em 1.1em; }
.m-activity li:last-child { padding-bottom: 0; }
.m-activity li::before { content: ""; position: absolute; left: -.18em; top: .4em; width: .34em; height: .34em; border-radius: 50%; background: var(--dot); }
.m-co { font-size: .92em; font-weight: 600; grid-column: 1; }
.m-role { font-size: .82em; color: #b8b8cc; grid-column: 1; margin-top: .3em; }
.m-role em { display: inline-block; font-style: normal; font-weight: 500; font-size: .88em; line-height: 1.3; color: var(--dot); border: 1px solid var(--dot); border-radius: .3em; padding: .05em .5em; margin-left: .55em; vertical-align: .05em; }
.m-st { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-size: .76em; color: #c4c4d4; }
.m-st.i { font-style: italic; color: #9a9ab0; }
.t-planned { --dot: #b07cf5; }
.t-interview { --dot: #f97316; }
.t-applied { --dot: #60a5fa; }
.t-offer { --dot: #34d399; }
.t-assessment { --dot: #fbbf24; }

/* Navigate: real links down to each feature on the page. */
.m-nav { margin-top: .9em; }
.m-nav li { border-bottom: 1px solid rgba(255, 255, 255, .07); }
.m-nav li:last-child { border-bottom: 0; }
.m-nav a { position: relative; display: grid; gap: .25em; padding: .85em 2em .85em 0; color: inherit; text-decoration: none; transition: padding .35s var(--ease); }
.m-t { font-family: var(--serif); font-size: 1.42em; line-height: 1.1; transition: color .25s; }
.m-s { font-size: .8em; color: var(--mid-soft); }
.m-nav a::after { content: "\2192"; position: absolute; right: .2em; top: 50%; transform: translate(-.5em, -50%); opacity: .45; transition: transform .35s var(--ease), opacity .25s, color .25s; }
/* A small star appears beside the row you're pointing at. */
.m-nav a::before {
    content: "";
    position: absolute;
    left: -1.3em;
    top: 50%;
    width: .8em;
    height: .8em;
    margin-top: -.4em;
    background: var(--accent);
    clip-path: polygon(50% 0, 58% 42%, 100% 50%, 58% 58%, 50% 100%, 42% 58%, 0 50%, 42% 42%);
    transform: scale(0);
    transition: transform .35s var(--ease);
}
@media (hover: hover) { .m-nav a:hover, .m-nav a:focus-visible { padding-left: .5em; } }
@media (hover: hover) { .m-nav a:hover .m-t, .m-nav a:focus-visible .m-t { color: var(--mid-ink); } }
@media (hover: hover) { .m-nav a:hover::after, .m-nav a:focus-visible::after { transform: translate(0, -50%); opacity: 1; color: var(--mid-ink); } }
@media (hover: hover) { .m-nav a:hover::before, .m-nav a:focus-visible::before { transform: scale(1); } }
.m-nav a:focus-visible { outline: none; }
.m-nav a:focus-visible, .m-nav a.hint { padding-left: .5em; }
.m-nav a:focus-visible .m-t, .m-nav a.hint .m-t { color: var(--mid-ink); }
.m-nav a:focus-visible::after, .m-nav a.hint::after { transform: translate(0, -50%); opacity: 1; color: var(--mid-ink); }
.m-nav a:focus-visible::before, .m-nav a.hint::before { transform: scale(1); }
.m-head-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.m-hint { display: inline-flex; align-items: center; gap: .6em; font-size: .86em; font-weight: 500; color: var(--mid-text); }
.m-hint-star { width: .95em; height: .95em; flex: none; background: var(--accent); clip-path: polygon(50% 0, 58% 42%, 100% 50%, 58% 58%, 50% 100%, 42% 58%, 0 50%, 42% 42%); animation: star-twinkle 2.4s ease-in-out infinite; }
@keyframes star-twinkle { 0%, 100% { transform: scale(.75); opacity: .65; } 50% { transform: scale(1.1); opacity: 1; } }
/* After the walk-through the star rests on the first section until the visitor reaches for the list. */
.m-nav a.parked { padding-left: .5em; }
.m-nav a.parked .m-t { color: var(--mid-ink); }
.m-nav a.parked::before { transform: scale(1); animation: star-twinkle 2.4s ease-in-out infinite; }
.m-hint .tap { display: none; }
@media (hover: none) { .m-hint .click { display: none; } .m-hint .tap { display: inline; } }

/* Narrow screens: one column at a readable size, stats then the links. */
@container (max-width: 740px) {
    .model > * { font-size: 16px; }
    .m-left { padding: 22px 20px 4px; border-right: 0; }
    .m-right { padding: 22px 20px 14px; }
    .m-wave, .m-left > .m-h, .m-activity { display: none; }
    .m-head { flex-wrap: wrap; gap: 6px 16px; }
    .m-word { font-size: 28px; }
    .m-date { font-size: 11px; }
    .m-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; margin-top: 20px; }
    .m-k { font-size: 11px; }
    .m-v { font-size: 30px; }
    .m-h { font-size: 11px; }
    .m-nav { margin-top: 6px; }
    .m-nav a { padding: 14px 32px 14px 0; gap: 3px; }
    .m-t { font-size: 20px; }
    .m-s { font-size: 13.5px; }
    .m-nav a::before { display: none; }
    .m-hint { font-size: 14px; }
}

/* --- The search: a route of stars joined by one line --- */
/* Three columns per step: text, the spine the line runs down, the screenshot.
   Every other step swaps sides, and its star sits on that side of the spine, so
   the line zigzags star to star without ever crossing text or an image. */
/* Wider than the standard page width, so the screenshots beside each star can be larger. */
.route { position: relative; --spine: 112px; --zig: 30px; max-width: calc(1440px + 2 * var(--gutter)); }
.route-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.route-svg .field circle { fill: #9aa6c8; }
.route-svg .field .tw { animation: twinkle 4.5s ease-in-out infinite; }
@keyframes twinkle { 0%, 100% { opacity: .15; } 50% { opacity: .7; } }
.route-svg .trail { fill: none; stroke: rgba(170, 180, 215, .16); stroke-width: 1; }
.route-svg .drawn { fill: none; stroke: var(--accent); stroke-width: 1.5; }
.route-svg .comet { fill: #dbe7ff; }

.steps-route { position: relative; }
.step {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--spine) minmax(0, 1fr);
    align-items: center;
    padding: clamp(72px, 9vw, 120px) 0;
}
.step-text { grid-column: 1; grid-row: 1; max-width: 480px; justify-self: end; }
.step-shot { grid-column: 3; grid-row: 1; position: relative; }
.step:nth-child(even) .step-text { grid-column: 3; justify-self: start; }
.step:nth-child(even) .step-shot { grid-column: 1; }

/* The star: a plain dot that lights once you've passed it. */
.step-star {
    position: absolute;
    top: 50%;
    left: calc(50% - var(--zig));
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #3a3f55;
    transform: translate(-50%, -50%);
    transition: background .4s var(--ease), transform .4s var(--ease);
    z-index: 1;
}
.step:nth-child(even) .step-star { left: calc(50% + var(--zig)); }
.step-star.passed { background: var(--mid-text); }
/* The current star: the dot is redrawn on top so the star's points sit behind
   it. Both are centred with translate(-50%, -50%) on even sizes, so they share
   one exact centre instead of each rounding to its own pixel. */
.step-star.current { background: transparent; transform: translate(-50%, -50%) scale(1.3); }
.step-star.current::before, .step-star.current::after { content: ""; position: absolute; left: 50%; top: 50%; }
/* A four-point star: long points, pinched waist, breathing slowly. */
.step-star.current::before {
    width: 32px;
    height: 32px;
    background: rgba(147, 190, 255, .75);
    clip-path: polygon(50% 0, 56% 44%, 100% 50%, 56% 56%, 50% 100%, 44% 56%, 0 50%, 44% 44%);
    transform: translate(-50%, -50%);
    animation: breathe 3.5s ease-in-out infinite;
}
.step-star.current::after { width: 12px; height: 12px; border-radius: 50%; background: var(--accent); transform: translate(-50%, -50%); }
@keyframes breathe { 0%, 100% { transform: translate(-50%, -50%) scale(.8); opacity: .5; } 50% { transform: translate(-50%, -50%) scale(1.1); opacity: 1; } }

/* What travels along the line to this star. It sits in the gap between two
   steps, where the line crosses the exact centre (halfway between a star on
   the left and one on the right), and the line runs between its two halves. */
.step-link {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    display: grid;
    grid-template-columns: 1fr 64px 1fr;
    font-size: 13px;
    font-weight: 500;
    color: var(--mid-soft);
    white-space: nowrap;
}
.step-link span:first-child { justify-self: end; }
.step-link span:last-child { grid-column: 3; }

.step-title { font-family: var(--serif); font-weight: 400; font-size: clamp(30px, 3.2vw, 44px); line-height: 1.08; letter-spacing: -0.015em; margin-top: 14px; }
.step-body { color: var(--mid-soft); margin-top: 16px; }
.step-more { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 22px; }
.step-text > .more { display: inline-block; margin-top: 22px; }
.step-shot .shot { display: block; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--mid-rule); }

.mini-steps { margin-top: 22px; display: grid; gap: 8px; }
.mini-steps li { font-size: 15px; color: var(--mid-text); }
.mini-steps li { position: relative; padding-left: 22px; }
.mini-steps li::before { content: ""; position: absolute; left: 0; top: .8em; width: 10px; height: 1px; background: var(--mid-ink); }



/* --- Working models in place of screenshots --- */
/* Same flat panel as the hero dashboard. They only move when the visitor
   picks something; nothing animates on its own. */
.demo {
    border-radius: var(--radius);
    border: 1px solid var(--mid-rule);
    background: var(--mid-raise);
    padding: clamp(20px, 2.6vw, 30px);
}
.demo-head { display: grid; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.demo-k { font-size: 14px; font-weight: 600; color: var(--mid-soft); }
/* Choices read like the app's own section tabs: plain text, the chosen one
   carrying the dashed underline. */
.demo-tabs { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.demo-tabs button {
    position: relative;
    padding: 6px 0;
    background: none;
    border: 0;
    color: var(--mid-soft);
    font: 500 14px/1.2 var(--sans);
    cursor: pointer;
    transition: color .2s;
}
.demo-tabs button::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: var(--line-h); background: var(--dash); clip-path: inset(0 100% 0 0); transition: clip-path .3s var(--ease); }
@media (hover: hover) { .demo-tabs button:hover { color: var(--mid-text); } }
@media (hover: hover) { .demo-tabs button:hover::after { clip-path: inset(0); animation: dash-march .9s linear infinite; } }
.demo-tabs button[aria-pressed="true"] { color: var(--mid-text); }
.demo-tabs button[aria-pressed="true"]::after { clip-path: inset(0); }

.demo-big { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 16px; margin-top: 20px; }
.demo-num { font-family: var(--serif); font-size: clamp(44px, 5vw, 64px); line-height: 1; font-variant-numeric: tabular-nums; }
.demo-cap { color: var(--mid-soft); font-size: 15px; }
.demo-funnel { display: grid; gap: 4px; margin-top: 20px; }
.demo-row { display: grid; grid-template-columns: 78px 1fr 34px; align-items: center; gap: 14px; padding: 6px 0; font-size: 14px; }
.demo-row-k { color: var(--mid-soft); }
.demo-row-v { text-align: right; font-variant-numeric: tabular-nums; }
.demo-track { display: block; height: 8px; border-radius: 2px; background: rgba(255, 255, 255, .07); overflow: hidden; }
.demo-fill { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--accent); transition: width .7s var(--ease); }
html:not(.js) .demo-fill { width: 50%; }
.demo-read { margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .08); font-family: var(--serif); font-size: 17px; line-height: 1.5; color: var(--mid-text); }

.demo-check { margin-top: 12px; display: grid; }
.demo-check button {
    display: grid;
    grid-template-columns: 18px 1fr;
    gap: 14px;
    align-items: start;
    width: 100%;
    padding: 11px 0;
    background: none;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    color: var(--mid-text);
    font: 400 15px/1.45 var(--sans);
    text-align: left;
    cursor: pointer;
    transition: color .2s;
}
.demo-check li:last-child button { border-bottom: 0; }
.demo-check button::before {
    content: "";
    width: 16px;
    height: 16px;
    margin-top: 2px;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 4px;
    transition: background .2s, border-color .2s;
}
@media (hover: hover) { .demo-check button:hover::before { border-color: var(--mid-ink); } }
@media (hover: hover) { .demo-check button:hover { background: rgba(255, 255, 255, .035); } }
.demo-check button { margin: 0 -10px; width: calc(100% + 20px); padding-left: 10px; padding-right: 10px; border-radius: 6px; }
.demo-check button[aria-checked="true"] { color: var(--mid-soft); }
.demo-check button[aria-checked="true"]::before {
    background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat;
    border-color: var(--accent);
}
.demo-progress { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 14px; margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .08); font-size: 13.5px; color: var(--mid-soft); }

.demo-sub { font-size: 14px; color: var(--mid-soft); }

/* Applications */
.demo-apps { margin-top: 8px; }
.demo-apps li { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "pick tag" "pick when"; gap: 4px 14px; padding: 12px 10px; margin: 0 -10px; border-bottom: 1px solid rgba(255, 255, 255, .06); border-radius: 6px; transition: background .2s; }
.demo-apps li:last-child { border-bottom: 0; }
.demo-apps li { position: relative; }
.demo-apps li[aria-current] { background: rgba(255, 255, 255, .05); }
/* The whole row picks the application, not just its name. */
.app-pick::after { content: ""; position: absolute; inset: 0; border-radius: 6px; }
.app-pick:focus-visible { outline: none; }
.app-pick:focus-visible::after { outline: 2px solid var(--accent); outline-offset: 2px; }
/* The open record's name carries the app's dash; pointing at another row draws it in there. */
.app-co { position: relative; justify-self: start; transition: color .2s; }
.app-co::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: var(--line-h); background: var(--dash); clip-path: inset(0 100% 0 0); transition: clip-path .3s var(--ease); }
.demo-apps li[aria-current] .app-co::after { clip-path: inset(0); }
.app-when { transition: color .2s; }
@media (hover: hover) {
    .demo-apps li:hover { background: rgba(255, 255, 255, .035); }
    .demo-apps li:hover .app-co { color: var(--mid-ink); }
    .demo-apps li:hover .app-co::after { clip-path: inset(0); animation: dash-march .9s linear infinite; }
    .demo-apps li:hover .app-when { color: var(--mid-text); }
}
.app-pick.hint .app-co { color: var(--mid-ink); }
.app-pick { grid-area: pick; display: grid; gap: 10px; align-content: center; padding: 0; background: none; border: 0; color: inherit; text-align: left; cursor: pointer; }
.app-co { font-size: 15.5px; font-weight: 600; }
.app-role { font-size: 13.5px; color: var(--mid-soft); }
.app-tag { grid-area: tag; justify-self: end; font-size: 12px; font-weight: 500; color: var(--dot); border: 1px solid var(--dot); border-radius: 4px; padding: 1px 8px; }
.app-when { grid-area: when; justify-self: end; font-size: 13px; color: var(--mid-soft); }
.demo-record { margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .08); }
.demo-record-h { font-family: var(--serif); font-size: 19px; margin-bottom: 8px; }
.demo-record dl div { display: flex; justify-content: space-between; gap: 14px; padding: 6px 0; font-size: 14px; border-top: 1px solid rgba(255, 255, 255, .05); }
.demo-record dt { color: var(--mid-soft); }

/* Documents */
.demo-docs { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 18px; }
.demo-col-h { font-size: 14px; font-weight: 600; color: var(--mid-soft); margin-bottom: 8px; }
.doc-list { display: grid; gap: 6px; }
.doc-list li { position: relative; display: grid; gap: 2px; padding: 10px 12px; border: 1px solid rgba(255, 255, 255, .07); border-radius: 6px; transition: border-color .3s, background .3s; }
.doc-name { font-size: 14.5px; }
.doc-meta { font-size: 12.5px; color: var(--mid-soft); }
.doc-list li.sent { border-color: rgba(255, 255, 255, .28); }
.doc-list li.sent .doc-meta::after { content: ", sent with this application"; color: var(--mid-ink); }

/* Network */
.demo-known { margin-top: 18px; padding: 16px 18px; border: 1px solid rgba(255, 255, 255, .28); border-radius: var(--radius); }
.demo-known.none { border-color: rgba(255, 255, 255, .1); }
.known-h { font-size: 14px; font-weight: 600; color: var(--mid-ink); }
.demo-known.none .known-h { color: var(--mid-soft); }
.known-name { font-family: var(--serif); font-size: 22px; margin-top: 8px; }
.known-role { font-size: 14px; color: var(--mid-soft); margin-top: 2px; }
.known-note { font-size: 14.5px; margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, .08); }
.known-note span { color: var(--mid-soft); margin-right: 8px; }

/* Offers */
.demo-range { display: grid; gap: 10px; }
.demo-range span { font-size: 14px; color: var(--mid-soft); }
.demo-range strong { color: var(--mid-text); font-weight: 600; margin-left: 6px; }
.demo-range input { width: 100%; accent-color: var(--accent); }
.demo-offers { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 18px; }
.offer { position: relative; padding: 16px; border: 1px solid rgba(255, 255, 255, .08); border-radius: var(--radius); transition: border-color .3s, background .3s; }
.offer.ahead { border-color: rgba(255, 255, 255, .28); }
.offer.ahead::after { content: "Ahead"; position: absolute; top: 14px; right: 14px; font-size: 13px; font-weight: 600; color: var(--mid-ink); }
.offer-co { font-size: 15.5px; font-weight: 600; padding-right: 54px; }
.offer-place { font-size: 13px; color: var(--mid-soft); margin-top: 2px; }
.offer-num { font-family: var(--serif); font-size: clamp(28px, 3vw, 36px); line-height: 1.1; margin-top: 14px; font-variant-numeric: tabular-nums; }
.offer-base { font-size: 12.5px; color: var(--mid-soft); margin-top: 4px; }

@media (max-width: 760px) {
    .demo-docs, .demo-offers { grid-template-columns: 1fr; }
}

/* First-view hint: a soft blue pass over what can be pressed. */
.demo-tabs button.hint { color: var(--mid-ink); }
.demo-tabs button.hint::after { clip-path: inset(0); opacity: .6; }
.demo-check button.hint::before { border-color: var(--accent); background: rgba(59, 130, 246, .22); }

.demo-real { display: inline-block; margin-top: 14px; font-size: 14px; color: var(--mid-soft); text-decoration: none; background-image: linear-gradient(var(--accent), var(--accent)); background-size: 100% var(--line-h); background-position: 0 100%; background-repeat: no-repeat; padding-bottom: 3px; transition: color .2s; }
@media (hover: hover) { .demo-real:hover { color: var(--mid-text); } }

/* --- Patterns --- */
.patterns-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 64px); }
.bars, .funnel { background: var(--raise); border: 1px solid var(--rule); border-radius: var(--radius); padding: 28px; }
.chart-label { font-size: 15px; font-weight: 600; color: var(--text); margin-bottom: 20px; }
.bar-row, .funnel-row { display: grid; align-items: center; gap: 14px; padding: 10px 0; }
.bar-row { grid-template-columns: 110px 1fr 46px; }
.funnel-row { grid-template-columns: 46px 1fr 90px; }
.bar-name { font-size: 14.5px; }
.bar-val { text-align: right; font-variant-numeric: tabular-nums; font-size: 14.5px; }
.funnel-n { font-family: var(--serif); font-size: 30px; line-height: 1; }
.bar-track { height: 8px; border-radius: 2px; background: var(--rule); overflow: hidden; }
.bar-fill { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--accent); transition: width 1.2s var(--ease); }
html:not(.js) .bar-fill { width: 50%; }
.reading { font-family: var(--serif); font-size: clamp(22px, 2.3vw, 30px); line-height: 1.35; max-width: 50ch; margin-top: clamp(40px, 5vw, 64px); }

/* --- Guides --- */
.guide-list { border-top: 1px solid var(--rule); }
.guide-list a {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 32px;
    align-items: baseline;
    gap: 24px;
    padding: 28px 0;
    border-bottom: 1px solid var(--rule);
    text-decoration: none;
    transition: padding .35s var(--ease), color .2s;
}
@media (hover: hover) { .guide-list a:hover { padding-left: 14px; } }
.g-t { font-family: var(--serif); font-size: clamp(24px, 2.4vw, 34px); line-height: 1.15; letter-spacing: -0.01em; }
.g-d { color: var(--soft); font-size: 16px; }

/* --- Privacy split: cream on the left, midnight on the right, one straight seam --- */
.split { position: relative; display: grid; grid-template-columns: 1fr 1fr; min-height: 560px; background: var(--mid-bg); }
.split-light {
    --soft: var(--light-soft);
    --text: var(--light-text);
    --ink: var(--light-ink);
    position: relative;
    z-index: 1;
    background: var(--light-bg);
    color: var(--light-text);
}
.split-mid { --soft: var(--mid-soft); --text: var(--mid-text); --ink: var(--mid-ink); color: var(--mid-text); }
.split-inner { padding: var(--section-pad) var(--gutter); max-width: 620px; display: grid; gap: 18px; align-content: center; justify-items: start; height: 100%; }
.split-light .split-inner { margin-left: auto; }
.split .title { font-size: clamp(48px, 6.4vw, 92px); }
.held { width: 100%; }
.held li { font-family: var(--serif); font-size: clamp(19px, 1.7vw, 23px); padding: 12px 0; border-top: 1px solid var(--light-rule); }
.split-mid .body { margin-top: 0; }

/* --- The thread: the feature route carries on down the page --- */
/* One line from the last feature star through a star at the head of each later
   section, drawn as the page scrolls (constellation.js). Wide screens only:
   it runs in the left margin, which narrower screens don't have, so there the
   stars sit inline beside their lines. */
main { position: relative; }
.thread { display: none; position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 2; }
.thread .trail { fill: none; stroke: rgba(150, 160, 200, .3); stroke-width: 1; }
.thread .drawn { fill: none; stroke: var(--accent); stroke-width: 1.5; }
.thread .comet { fill: #dbe7ff; }
.waypoint { position: relative; z-index: 3; display: flex; align-items: center; gap: 12px; margin-bottom: 30px; font-size: 15px; font-weight: 400; color: var(--soft); }
.wp-star { flex: none; width: 10px; height: 10px; border-radius: 50%; background: #3a3f55; transition: background .4s var(--ease), transform .4s var(--ease); }
.wp-star.passed { background: var(--accent); }
@media (min-width: 1180px) {
    .thread { display: block; }
    .wp-star { position: absolute; left: -40px; top: 50%; transform: translate(-50%, -50%); }
    .wp-star.passed { transform: translate(-50%, -50%) scale(1.3); }
}

/* --- Who makes it: a signed note in the maker's own words, no card --- */
.maker { padding: clamp(72px, 9vw, 120px) 0; border-top: 1px solid var(--mid-rule); }
.maker-note { display: grid; gap: 16px; max-width: 34em; font-family: var(--serif); font-size: clamp(21px, 2vw, 26px); line-height: 1.5; color: var(--mid-text); }
.maker-sign { margin-top: 26px; font-size: 15px; color: var(--mid-soft); }

/* --- Questions --- */
.faq-list { max-width: 860px; border-top: 1px solid var(--rule); }
#faq .head-row { max-width: 860px; }
.faq-item { border-bottom: 1px solid var(--rule); }
.faq-q {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    padding: 24px 0;
    background: none;
    border: 0;
    color: var(--text);
    font: 400 clamp(19px, 1.8vw, 23px)/1.3 var(--serif);
    text-align: left;
    cursor: pointer;
}
.faq-icon { position: relative; width: 14px; height: 14px; flex: none; }
.faq-icon::before, .faq-icon::after { content: ""; position: absolute; left: 0; top: 6px; width: 14px; height: 2px; background: var(--ink); transition: transform .3s var(--ease); }
.faq-icon::after { transform: rotate(90deg); }
.faq-item.open .faq-icon::after { transform: rotate(0); }
.faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s var(--ease); }
.faq-item.open .faq-a { grid-template-rows: 1fr; }
html:not(.js) .faq-a { grid-template-rows: 1fr; }
.faq-a-inner { overflow: hidden; }
.faq-a p { color: var(--soft); max-width: 80ch; padding-bottom: 16px; }
.faq-a p:last-child { padding-bottom: 26px; }

/* --- Download --- */
.download { overflow: hidden; }
.download .head-row { position: relative; }
.download .btn { margin-top: 14px; }
.platforms { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; max-width: 920px; margin: 0 auto; }
/* Each card is the link to that platform's download page, and turns blue on hover. */
.platform { position: relative; display: grid; gap: 4px; padding: 22px 52px 22px 22px; background: var(--raise); border: 1px solid var(--rule); border-radius: var(--radius); text-decoration: none; transition: background .2s, border-color .2s, color .2s; }
.platform::after { content: "\2193"; position: absolute; right: 22px; top: 50%; transform: translateY(-50%); font-size: 20px; color: var(--ink); transition: color .2s, transform .3s var(--ease); }
@media (hover: hover) { .platform:hover { background: var(--accent-strong); border-color: var(--accent-strong); color: var(--accent-fg); } }
@media (hover: hover) { .platform:hover .platform-file, .platform:hover::after { color: var(--accent-fg); } }
@media (hover: hover) { .platform:hover::after { transform: translateY(-35%); } }
.platform-name { font-family: var(--serif); font-size: 22px; }
.platform-file { font-size: 13.5px; color: var(--soft); transition: color .2s; }
.platforms-note { position: relative; text-align: center; color: var(--soft); font-size: 15px; margin-top: 24px; }

/* --- Inner pages: guides, legal, 404 --- */
/* Breadcrumb in place of a back button: it says where you are and is the way
   back, set in the same small caps as every section label. */
.crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 14px; font-weight: 500; color: var(--soft); }
.crumb a { color: var(--soft); text-decoration: none; background-image: linear-gradient(var(--accent), var(--accent)); background-size: 0 var(--line-h); background-position: 0 100%; background-repeat: no-repeat; padding-bottom: 2px; transition: color .2s, background-size .3s var(--ease); }
@media (hover: hover) { .crumb a:hover { color: var(--text); background-size: 100% var(--line-h); } }
.crumb [aria-current] { color: var(--text); }

.page-hero { padding-top: clamp(130px, 16vh, 180px); overflow: hidden; }
.page-hero-inner { position: relative; display: grid; gap: 22px; justify-items: start; }
.page-title { font-family: var(--serif); font-weight: 400; font-size: clamp(40px, 6vw, 84px); line-height: 1.08; letter-spacing: -0.024em; }
.updated { color: var(--soft); font-size: 15px; }
/* On policy pages the date closes the text, under a rule, instead of heading it. */
.prose .updated-end { margin-top: 56px; padding-top: 18px; border-top: 1px solid var(--rule); font-size: 14px; }

/* On this page: a numbered contents list, the guide's own small route. */
.hero-indexes { display: grid; grid-template-columns: repeat(2, minmax(0, 260px)); gap: 24px 48px; margin-top: 24px; }
.toc { padding-left: 18px; border-left: 1px solid var(--rule); }
.toc-h { font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 8px; }
.toc ol { display: grid; gap: 2px; justify-items: start; }
.toc a { display: inline-block; padding: 4px 0; color: var(--text); text-decoration: none; font-size: 15.5px; transition: color .2s; }
@media (hover: hover) { .toc a:hover { color: var(--ink); } }

.guide-wrap { max-width: calc(1040px + 2 * var(--gutter)); }
.guide-sec .eyebrow { margin-bottom: 18px; }
.guide-title { font-size: clamp(32px, 4vw, 54px); }
.guide-sec .body { max-width: 72ch; font-family: var(--serif); font-size: 18.5px; line-height: 1.7; }
.guide-sec .reading { max-width: 50ch; }
.guide-sec .frame { margin-top: clamp(36px, 5vw, 56px); }
.guide-sec .frame + .body, .guide-sec .record + .body { margin-top: 40px; }
.frame .shot { display: block; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--rule); }
.guide-sec .bars, .guide-sec .funnel { margin-top: 40px; max-width: 640px; }
.bars .reading { font-size: 18px; margin-top: 18px; max-width: none; color: var(--soft); }

/* An example record, the same card the app shows. */
.guide-sec .record { margin-top: 40px; max-width: 560px; background: var(--raise); border: 1px solid var(--rule); border-radius: var(--radius); padding: 22px 26px; }
.rec-head { display: grid; gap: 2px; margin-bottom: 12px; }
.rec-head strong { font-family: var(--serif); font-weight: 400; font-size: 22px; }
.rec-head .role { color: var(--soft); font-size: 14px; }
.guide-sec .record dl div { display: grid; grid-template-columns: minmax(110px, 34%) 1fr; gap: 16px; padding: 9px 0; border-top: 1px solid var(--rule); font-size: 14.5px; }
.guide-sec .record dt { color: var(--soft); }
.guide-sec .record dd { text-align: left; }
.record a, .qa a, .hero-lede a { color: inherit; text-decoration-color: var(--accent); text-decoration-thickness: var(--line-h); text-underline-offset: 4px; }

/* For organisations: the contact action and the term/definition lists. */
.org-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 8px; }
/* An email address that works either way: click to open a mail app, or copy it. */
.email-copy { display: inline-flex; align-items: center; gap: 14px; font-size: 18px; }
.email-copy a { color: var(--text); text-decoration: none; background-image: linear-gradient(var(--accent), var(--accent)); background-size: 100% var(--line-h); background-position: 0 100%; background-repeat: no-repeat; padding-bottom: 2px; transition: background-size .3s var(--ease); }
.copy-btn { min-height: 32px; min-width: 72px; padding: 0 12px; border: 1px solid var(--rule); border-radius: var(--btn-radius); background: transparent; color: var(--text); font: 500 13px var(--sans); cursor: pointer; transition: border-color .2s, background .2s; }
@media (hover: hover) {
    .email-copy a:hover { color: var(--ink); }
    .copy-btn:hover { border-color: var(--soft); background: rgba(255, 255, 255, .05); }
}
.copy-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.qa dd .email-copy { margin-top: 10px; font-size: 16px; }
.qa dt a { color: inherit; text-decoration-color: var(--accent); text-decoration-thickness: var(--line-h); text-underline-offset: 4px; }
.qa { margin-top: 40px; max-width: 80ch; border-top: 1px solid var(--rule); }
.qa div { padding: 20px 0; border-bottom: 1px solid var(--rule); }
.qa dt { font-family: var(--serif); font-size: 20px; margin-bottom: 8px; }
.qa dd { color: var(--soft); }

/* End of a guide: the next star on the route, then the download. */
.guide-end { border-top: 1px solid var(--mid-rule); }
.end-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 80px); align-items: end; }
.next { display: grid; gap: 14px; padding-bottom: 6px; text-decoration: none; }
.next-t { font-family: var(--serif); font-size: clamp(32px, 4vw, 56px); line-height: 1.05; letter-spacing: -0.02em; transition: color .25s; }
.next-t::after { content: " \2192"; color: var(--mid-ink); display: inline-block; transition: transform .35s var(--ease); }
@media (hover: hover) { .next:hover .next-t { color: var(--mid-ink); } }
@media (hover: hover) { .next:hover .next-t::after { transform: translateX(8px); } }
.end-cta { display: grid; gap: 14px; justify-items: start; padding-left: clamp(0px, 4vw, 56px); border-left: 1px solid var(--mid-rule); }
.end-title { font-family: var(--serif); font-size: clamp(28px, 3vw, 40px); line-height: 1.1; }
.end-cta .body { margin-top: 0; }

/* Legal pages: a calm cream reading column. */
.legal-hero { padding-bottom: calc(var(--section-pad) * .7); }
.prose-wrap { max-width: calc(760px + 2 * var(--gutter)); }
.cut-top { padding-top: calc(var(--section-pad) * .8); }
.cut-top::before {
    content: "";
    position: absolute;
    left: max(var(--gutter), calc((100% - var(--max)) / 2));
    right: max(var(--gutter), calc((100% - var(--max)) / 2));
    top: var(--ledger-inset);
    height: 3px;
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
}
.prose { font-family: var(--serif); font-size: 18px; line-height: 1.75; color: var(--text); }
.prose > :first-child { margin-top: 0; }
.prose p { margin-top: 18px; color: var(--soft); }
.prose h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(24px, 2.6vw, 32px); line-height: 1.2; color: var(--text); margin-top: 52px; padding-top: 24px; border-top: 1px solid var(--rule); }
.prose h3 { font-family: var(--serif); font-weight: 400; font-size: 21px; margin-top: 32px; }
.prose ul, .prose ol { margin-top: 18px; display: grid; gap: 12px; }
.prose ul li { position: relative; padding-left: 22px; color: var(--soft); }
.prose ul li::before { content: ""; position: absolute; left: 0; top: .78em; width: 10px; height: 1px; background: var(--ink); }
.prose ol { counter-reset: n; }
.prose ol li { position: relative; padding-left: 30px; color: var(--soft); counter-increment: n; }
.prose ol li::before { content: counter(n) "."; position: absolute; left: 0; font-variant-numeric: tabular-nums; color: var(--ink); }
.prose strong { color: var(--text); font-weight: 600; }
.prose a { color: var(--ink); text-underline-offset: 4px; text-decoration-thickness: var(--line-h); }
@media (hover: hover) { .prose a:hover { color: var(--text); } }

/* Download pages */
.dl-hero { padding-bottom: calc(var(--section-pad) * .7); }
.dl-fallback { color: var(--soft); font-size: 16px; margin-top: -6px; }
.link-inline-plain { color: var(--text); text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: var(--line-h); text-underline-offset: 4px; }
@media (hover: hover) { .link-inline-plain:hover { color: var(--ink); } }
.prose ol.install li::before { content: counter(n) "."; font-family: var(--sans); font-style: normal; font-weight: 600; color: var(--text); }
.prose ol.install li { padding-left: 28px; }

.linux-choice { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; width: 100%; margin-top: 12px; }
.choice { position: relative; display: grid; gap: 8px; padding: 22px 52px 22px 22px; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--raise); text-decoration: none; transition: background .2s, border-color .2s, color .2s; }
.choice::after { content: "\2193"; position: absolute; right: 22px; top: 24px; font-size: 20px; color: var(--ink); transition: color .2s, transform .3s var(--ease); }
.choice-name { font-family: var(--serif); font-size: 24px; }
.choice-for { font-size: 15px; color: var(--soft); line-height: 1.55; transition: color .2s; }
@media (hover: hover) { .choice:hover { background: var(--accent-strong); border-color: var(--accent-strong); color: var(--accent-fg); } }
@media (hover: hover) { .choice:hover .choice-for, .choice:hover::after { color: var(--accent-fg); } }
@media (hover: hover) { .choice:hover::after { transform: translateY(3px); } }

/* 404 */
.lost { min-height: 78vh; display: grid; align-content: center; }
.lost-links { display: flex; flex-wrap: wrap; align-items: center; gap: 26px; margin-top: 10px; }

/* --- Footer --- */
footer { border-top: 1px solid var(--mid-rule); padding: 72px 0 36px; background: var(--mid-bg); }
.foot-grid { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr) auto; gap: 32px; }
.foot-contact a { white-space: nowrap; }
.foot-contact .foot-h ~ .foot-h { margin-top: 14px; }
.foot-word { font-family: var(--serif); font-size: 34px; letter-spacing: -0.01em; }
.foot-line { color: var(--mid-soft); font-size: 14px; margin-top: 6px; }
.foot-col { display: grid; align-content: start; gap: 10px; }
.foot-h { font-size: 14px; font-weight: 600; color: var(--mid-soft); margin-bottom: 4px; }
.foot-col a { color: var(--mid-text); text-decoration: none; font-size: 14.5px; overflow-wrap: anywhere; }
@media (hover: hover) { .foot-col a:hover { color: var(--mid-ink); } }
.foot-base { display: flex; justify-content: space-between; gap: 24px; margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--mid-rule); font-size: 13px; color: var(--mid-soft); }

/* --- Lightbox --- */
.lightbox { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; align-content: center; gap: 14px; padding: 5vh 4vw; background: rgba(5, 5, 9, .94); }
.lightbox[hidden] { display: none; }
.lightbox, .lightbox img, .lb-cap, .lb-close { will-change: transform, opacity; }
.lightbox img { max-height: 82vh; width: auto; border-radius: 10px; }
.lb-cap { color: var(--mid-soft); font-size: 14px; text-align: center; }
.lb-close { position: absolute; top: 16px; right: 20px; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--mid-rule); background: var(--mid-raise); color: var(--mid-text); font-size: 26px; line-height: 1; cursor: pointer; }


/* --- Tablet --- */
@media (max-width: 960px) {
    .patterns-grid { grid-template-columns: 1fr; }
    .foot-grid { grid-template-columns: 1fr 1fr; }
    .foot-brand, .foot-contact { grid-column: 1 / -1; }
}

/* --- Phone --- */
@media (max-width: 760px) {
    body { font-size: 16px; }
    .model { grid-template-columns: 1fr; }
    .nav-links, .nav-dl { display: none; }
    .menu { display: block; margin-left: auto; position: relative; }
    .menu summary { list-style: none; width: 44px; height: 44px; display: grid; place-content: center; gap: 6px; cursor: pointer; border-radius: 50%; }
    .menu summary::-webkit-details-marker { display: none; }
    .menu summary span { display: block; width: 20px; height: 2px; background: var(--mid-text); border-radius: 2px; transition: transform .3s var(--ease); }
    .menu[open] summary span:first-child { transform: translateY(4px) rotate(45deg); }
    .menu[open] summary span:last-child { transform: translateY(-4px) rotate(-45deg); }
    .menu-sheet { position: absolute; right: 0; top: 54px; width: min(280px, calc(100vw - 32px)); display: grid; padding: 10px; background: var(--mid-raise); border: 1px solid var(--mid-rule); border-radius: var(--radius); }
    .menu-sheet a { padding: 14px; text-decoration: none; color: var(--mid-text); border-radius: 10px; font-size: 16px; }
    @media (hover: hover) { .menu-sheet a:hover { background: rgba(255, 255, 255, .05); } }

    /* Phones: one column, the line runs straight down the left edge. */
    .route { --spine: 0px; --zig: 0px; padding-left: 34px; }
    .step { grid-template-columns: 1fr; gap: 28px; padding: 64px 0; align-items: start; }
    .step-text, .step:nth-child(even) .step-text { grid-column: 1; grid-row: 1; justify-self: start; max-width: none; }
    .step-shot, .step:nth-child(even) .step-shot { grid-column: 1; grid-row: 2; }
    .step-star, .step:nth-child(even) .step-star { left: -22px; top: 82px; }
    .step-link { display: block; left: 0; right: auto; top: 10px; transform: none; white-space: normal; }
    .end-grid { grid-template-columns: 1fr; align-items: start; }
    .end-cta { padding-left: 0; border-left: 0; padding-top: 32px; border-top: 1px solid var(--mid-rule); }
    .guide-sec .record { padding: 18px 18px; }
    .guide-sec .record dl div { grid-template-columns: 1fr; gap: 2px; }
    .prose { font-size: 16px; }
    .linux-choice { grid-template-columns: 1fr; }
    .hero-indexes { grid-template-columns: 1fr; }

    .guide-list a { grid-template-columns: 1fr; gap: 6px; padding: 22px 0; }

    .split { grid-template-columns: 1fr; }
    .split-light .split-inner, .split-mid .split-inner { margin: 0; padding: 88px var(--gutter); max-width: none; }

    .platforms { grid-template-columns: 1fr; }
    .foot-base { flex-direction: column; }
}

/* --- Reduced motion: everything is in place from the start --- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}