/* wyrd.page - one stylesheet for every page.
   Source of truth: muse/Wyrd Website Design Spec.md (tokens, type, components).
   Order: fonts, tokens, base, shell (nav, footer), components, pages, breakpoints. */

/* ---------- fonts (self-hosted: the site makes no request to a font service) ---------- */
@font-face { font-family: "IBM Plex Mono"; font-weight: 400; font-style: normal; font-display: swap; src: url("../assets/fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 500; font-style: normal; font-display: swap; src: url("../assets/fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 600; font-style: normal; font-display: swap; src: url("../assets/fonts/ibm-plex-mono-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 500; font-style: normal; font-display: swap; src: url("../assets/fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 600; font-style: normal; font-display: swap; src: url("../assets/fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 700; font-style: normal; font-display: swap; src: url("../assets/fonts/ibm-plex-sans-latin-700-normal.woff2") format("woff2"); }

/* ---------- tokens: light on bare :root, dark for the system setting and for the toggle ---------- */
:root {
  color-scheme: light;
  --paper: #f4f0e9;
  --paper-raised: #fffdfa;
  --ink: #10171e;
  --muted: #605d58;
  --rule: #cfc7bb;
  --blue: #0078d4;
  --pink: #f286ab;
  --pink-text: #d6477a;   /* the spec pink as text on paper is ~2:1; this keeps large text above 3:1 */
  --chrome: #e5e1da;
  --chrome-ink: #706d68;
  --on-blue: #ffffff;
  --shadow: #0078d4;
  --faint: #858b91;
  --logo: #1f1a15;         /* store-assets/logo/wyrd-logo.svg */
  --sidekick-light: block;  /* which sidekick shows: the light one, or the night one in dark mode */
  --sidekick-dark: none;
  --display: "IBM Plex Sans", sans-serif;
  --mono: "IBM Plex Mono", monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper: #10161c; --paper-raised: #181f26; --ink: #f4f0e9; --muted: #c4bdb2; --rule: #46505a;
    --blue: #52aaf0; --pink: #f29ab8; --pink-text: #f29ab8; --chrome: #252d35; --chrome-ink: #b8c0c7;
    --on-blue: #10171e; --shadow: #0078d4; --faint: #9aa3ab; --logo: #ebe3d3; --sidekick-light: none; --sidekick-dark: block;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #10161c; --paper-raised: #181f26; --ink: #f4f0e9; --muted: #c4bdb2; --rule: #46505a;
  --blue: #52aaf0; --pink: #f29ab8; --pink-text: #f29ab8; --chrome: #252d35; --chrome-ink: #b8c0c7;
  --on-blue: #10171e; --shadow: #0078d4; --faint: #9aa3ab; --logo: #ebe3d3; --sidekick-light: none; --sidekick-dark: block;
}

/* ---------- base ---------- */
* { box-sizing: border-box; }
html { min-width: 320px; background: var(--paper); scroll-behavior: smooth; }
body { margin: 0; min-height: 100vh; background: var(--paper); color: var(--ink); font-family: var(--mono); line-height: 1.45; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; }
[hidden] { display: none !important; }
a { color: var(--blue); }
.page { min-height: 100vh; display: flex; flex-direction: column; overflow: hidden; }
.page > main { flex: 1 0 auto; }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 10; padding: 10px 14px; background: var(--blue); color: var(--on-blue); font-weight: 600; font-size: .75rem; text-decoration: none; }
.skip-link:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.mark { display: block; width: 27px; height: 27px; color: var(--logo); overflow: visible; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* ---------- global navigation ---------- */
.site-nav { height: 72px; flex: 0 0 auto; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 34px; padding: 0 clamp(20px, 4.6vw, 72px); border-bottom: 1px solid var(--rule); }
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); font-weight: 600; font-size: .91rem; line-height: 1; letter-spacing: -.03em; text-decoration: none; }
.nav-links { display: flex; justify-content: center; gap: clamp(18px, 2.5vw, 36px); font-size: .73rem; color: var(--muted); }
.nav-link { color: inherit; padding: 8px 0; text-decoration: none; }
.nav-link:hover, .nav-link[aria-current="page"] { color: var(--ink); }
.nav-link[aria-current="page"] { box-shadow: inset 0 -1px 0 var(--blue); }
.nav-actions { display: flex; align-items: center; gap: 10px; }
.theme-toggle { min-height: 42px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 12px; border: 1px solid var(--rule); background: var(--paper-raised); color: var(--ink); font: 600 .7rem/1 var(--mono); cursor: pointer; white-space: nowrap; }
.theme-toggle:hover { border-color: var(--ink); }
.theme-icon { width: 15px; height: 15px; display: block; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.theme-toggle[aria-pressed="true"] .theme-icon-moon, .theme-toggle[aria-pressed="false"] .theme-icon-sun { display: none; }

/* ---------- buttons and links ---------- */
.top-cta, .button { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 10px 16px; border: 1px solid var(--blue); background: var(--blue); color: var(--on-blue); font: 600 .76rem/1.25 var(--mono); text-decoration: none; white-space: nowrap; cursor: pointer; }
.top-cta:hover, .button:hover { background: color-mix(in srgb, var(--blue) 86%, var(--ink)); }
.button.secondary { border-color: var(--ink); background: transparent; color: var(--ink); }
.button.secondary:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); }
/* Before the store listing is live the install CTA is a label, not a link */
.is-soon { cursor: default; background: transparent; color: var(--blue); border-style: dashed; }
.is-soon:hover { background: transparent; }
.text-link { color: var(--blue); font-weight: 600; text-decoration: none; }
.text-link:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- hero ---------- */
.hero { width: min(100%, 1440px); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(430px, .82fr); align-items: center; gap: clamp(56px, 6vw, 96px); padding: clamp(66px, 8vw, 116px) clamp(24px, 5.3vw, 82px) clamp(74px, 8vw, 118px); }
.hero-copy { min-width: 0; container-type: inline-size; }
.kicker { margin: 0 0 16px; font-size: clamp(.57rem, .7vw, .65rem); font-weight: 600; letter-spacing: .075em; text-transform: uppercase; }
h1 { margin: 0; font-family: var(--display); font-size: clamp(2.6rem, 4.9vw, 5rem); font-weight: 700; line-height: .87; letter-spacing: -.075em; text-transform: uppercase; }
.headline-line { white-space: nowrap; }
/* "Know the SHORTCUT." (the widest word) is about 9.6 times the font size wide,
   so a font of 10% of the column always fits it, and the font never changes
   as the words rotate. The hero tops out at 80px, the closing line at 6.8rem. */
.hero h1 { font-size: clamp(1.6rem, 10cqi, 5rem); }
.closing-copy { min-width: 0; container-type: inline-size; }
.closing-section h2 { font-size: clamp(1.6rem, 10cqi, 6.8rem); }
/* The rotating word: every word sits in the same grid cell, so the slot is as
   wide as the widest one and nothing around it moves; only the shown word is
   visible, and it slides within the slot (cut at its edges). */
.word-slot { display: inline-block; vertical-align: bottom; overflow: hidden; clip-path: inset(0); padding-block: .12em; margin-block: -.12em; }
.word-stack { display: inline-grid; }
.word-stack .word { grid-area: 1 / 1; visibility: hidden; opacity: 0; transform: translateY(110%); transition: transform .45s cubic-bezier(.4, 0, .2, 1), opacity .3s ease, visibility 0s linear .45s; }
.word-stack .word.is-on { visibility: visible; opacity: 1; transform: translateY(0); transition: transform .45s cubic-bezier(.4, 0, .2, 1), opacity .3s ease; }
.word-stack .word.is-off { visibility: visible; opacity: 0; transform: translateY(-110%); }
.word-stack .word.no-anim { transition: none; }
.accent { color: var(--pink-text); }
.subcopy { max-width: 610px; margin: 27px 0 0; color: var(--muted); font-size: clamp(.9rem, 1.12vw, 1.04rem); line-height: 1.6; }
.choices { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.fine { margin-top: 15px; color: var(--muted); font-size: .66rem; font-weight: 500; }
.demo-column { width: 100%; min-width: 0; display: grid; gap: 24px; }
.signal-list { border: 1px solid var(--rule); margin: 0; padding: 0; list-style: none; }
.signal-step { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 13px; padding: 17px 20px; border-bottom: 1px solid var(--rule); font-size: .75rem; }
.signal-step:last-child { border-bottom: 0; }
.step-number { color: var(--blue); font-weight: 600; }
.signal-step strong { display: block; margin-bottom: 2px; font-weight: 600; }
.signal-step .detail { color: var(--muted); }
.destination-card { height: 252px; border: 1px solid var(--rule); background: var(--paper-raised); box-shadow: 10px 10px 0 var(--shadow); color: var(--ink); overflow: hidden; }

/* ---------- browser demo frame (one component, fed by data) ---------- */
.browser-row { height: 57px; display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-bottom: 1px solid var(--rule); background: var(--paper-raised); }
.browser-tools { display: flex; align-items: center; gap: 2px; flex: 0 0 auto; color: var(--chrome-ink); }
.browser-tool { width: 22px; height: 22px; display: grid; place-items: center; }
.browser-tool svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.address-pill { height: 36px; min-width: 0; width: min(100%, 352px); border: 1px solid color-mix(in srgb, var(--rule) 72%, var(--ink)); border-radius: 19px; padding: 0 14px; display: flex; align-items: center; overflow: hidden; background: color-mix(in srgb, var(--paper-raised) 88%, var(--chrome) 12%); }
/* The rotating route slides inside this window and is cut exactly at the bar's
   inner edge (clip-path also cuts what a transform moves out of the box) */
.rotation-clip { position: relative; display: flex; align-items: center; align-self: stretch; flex: 1 1 auto; min-width: 0; overflow: hidden; clip-path: inset(0); }
.route-pair { display: flex; align-items: baseline; gap: 12px; min-width: 0; width: 100%; opacity: 1; transform: translateY(0); transition: transform .42s cubic-bezier(.4, 0, .2, 1), opacity .3s ease; }
.route-pair b { flex: 0 0 auto; font: 600 clamp(.66rem, 1vw, .78rem) var(--mono); color: var(--ink); white-space: nowrap; }
.route-pair em { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--faint); font: 500 clamp(.57rem, .8vw, .68rem) var(--mono); font-style: normal; }
/* The old route slides up only as far as the bar's edge (it sits centred, so
   45% of its height) and is fully faded by then; the new one comes in the same
   way from below. No text is ever cut by the bar. */
.route-pair.is-leaving { opacity: 0; transform: translateY(-45%); transition: transform .32s ease-in, opacity .22s ease-in; }
.route-pair.is-entering { opacity: 0; transform: translateY(45%); transition: none; }
.arrival { height: 195px; padding: 29px 25px 24px; display: flex; flex-direction: column; }
.arrival-label { color: var(--blue); font-size: .65rem; font-weight: 600; letter-spacing: .04em; }
.arrival-title { display: grid; align-items: start; margin-top: 13px; font-family: var(--display); font-size: clamp(1.72rem, 3.2vw, 3.15rem); font-weight: 700; line-height: .96; letter-spacing: -.055em; }
.arrival-title span { grid-area: 1 / 1; }
.size-probe { visibility: hidden; pointer-events: none; }
.arrival p { margin: auto 0 0; color: var(--muted); font-size: .73rem; }

/* ---------- sections ---------- */
.content-shell { width: min(100%, 1440px); margin: 0 auto; padding-inline: clamp(24px, 5.3vw, 82px); }
.site-section { border-top: 1px solid var(--rule); padding-block: clamp(76px, 9vw, 132px); }
.section-intro { display: grid; grid-template-columns: minmax(0, .65fr) minmax(320px, .35fr); gap: clamp(36px, 7vw, 110px); align-items: end; margin-bottom: clamp(42px, 6vw, 76px); }
.section-number { display: block; margin-bottom: 15px; color: var(--blue); font-size: .66rem; font-weight: 600; letter-spacing: .08em; }
.section-title { margin: 0; font-family: var(--display); font-size: clamp(2.2rem, 4.8vw, 4.9rem); font-weight: 700; line-height: .92; letter-spacing: -.06em; text-transform: uppercase; text-wrap: balance; }
.section-deck { margin: 0; color: var(--muted); font-size: clamp(.84rem, 1vw, .98rem); line-height: 1.7; }

/* ---------- feature explorer ---------- */
.feature-explorer { display: grid; grid-template-columns: minmax(300px, .4fr) minmax(0, .6fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
/* The sidekick: under the example window, right edge on the window's right
   edge, looking up at it. On desktop the window has one fixed height (the
   tallest demo, the family list, fits), so the space below it is known: he
   fills it down into the section's bottom padding, out of the layout, so the
   section keeps its height. His pictures are painted on the page colour
   (#F4F0E9 / #10161C) and their edges fade out, so no frame shows. Scaled
   evenly, never stretched; hidden when the list and window stack. */
.sidekick { display: none; }
@media (min-width: 981px) {
  .feature-explorer { position: relative; }
  .feature-explorer .feature-demo { position: relative; top: auto; min-height: 740px; }
  .sidekick { display: flex; position: absolute; right: 0; top: calc(740px + 22px); bottom: calc(6px - clamp(76px, 9vw, 132px)); width: 60%; margin: 0; align-items: flex-end; justify-content: flex-end; pointer-events: none; }
  .sidekick img { height: min(100%, 290px); width: auto; max-width: 100%;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 97%, transparent), linear-gradient(to bottom, transparent, #000 10%, #000 86%, transparent);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(to right, transparent, #000 6%, #000 97%, transparent), linear-gradient(to bottom, transparent, #000 10%, #000 86%, transparent);
    mask-composite: intersect; }
  .sidekick .sidekick-light { display: var(--sidekick-light); }
  .sidekick .sidekick-dark { display: var(--sidekick-dark); }
  /* the light picture's floor shadow runs to its left edge (and its legs start further in): a wider fade there */
  .sidekick .sidekick-light {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 16%, #000 97%, transparent), linear-gradient(to bottom, transparent, #000 10%, #000 86%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 16%, #000 97%, transparent), linear-gradient(to bottom, transparent, #000 10%, #000 86%, transparent); }
}
.feature-tabs { border-top: 1px solid var(--rule); }
.feature-card { width: 100%; padding: 22px 6px 22px 0; border: 0; border-bottom: 1px solid var(--rule); background: transparent; color: var(--ink); display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; gap: 17px; align-items: start; text-align: left; cursor: pointer; font: inherit; }
.feature-card::after { content: "↗"; color: var(--muted); font-size: .9rem; line-height: 1.2; }
.feature-card[aria-selected="true"]::after { content: "→"; color: var(--blue); }
.feature-tag { color: var(--blue); font-size: .62rem; font-weight: 600; letter-spacing: .06em; }
.feature-card .feature-name { display: block; margin: 0 0 7px; font-family: var(--display); font-size: clamp(1.08rem, 1.55vw, 1.42rem); font-weight: 700; line-height: 1.08; letter-spacing: -.03em; }
.feature-card .feature-desc { display: block; max-width: 590px; margin: 0; color: var(--muted); font-size: .72rem; line-height: 1.55; }
.feature-card code, .case-route code { display: block; margin-top: 11px; color: var(--ink); font: 600 .65rem/1.45 var(--mono); word-break: break-word; }
.feature-card[aria-selected="true"] .feature-name, .feature-card[aria-selected="true"] code { color: var(--blue); }
.feature-demo { position: sticky; top: 24px; min-height: 560px; border: 1px solid var(--rule); background: var(--paper-raised); box-shadow: 10px 10px 0 var(--shadow); overflow: hidden; }
.feature-address { font: 600 .7rem/1 var(--mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink); }
.feature-demo-screen { min-height: 503px; padding: clamp(28px, 4vw, 48px); display: flex; flex-direction: column; }
.demo-eyebrow { color: var(--blue); font-size: .62rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; }
.feature-demo-screen h3 { margin: 17px 0 10px; font-family: var(--display); font-size: clamp(1.8rem, 3.1vw, 3.4rem); line-height: .97; letter-spacing: -.055em; text-wrap: balance; }
.feature-demo-screen > p { max-width: 650px; margin: 0; color: var(--muted); font-size: .78rem; line-height: 1.65; }
.demo-stage { margin-top: auto; padding-top: 34px; }
.mock-doc { position: relative; border: 1px solid var(--rule); padding: 18px; background: var(--paper); font-size: .69rem; line-height: 1.65; }
.mock-doc b { font-weight: 600; }
.mock-line { display: block; color: var(--muted); }
.mock-selection { padding: 2px 4px; background: var(--blue); color: var(--on-blue); }
.context-menu-wrap { position: relative; display: flex; justify-content: flex-end; min-height: 216px; margin-top: -8px; }
.context-menu { width: min(255px, 78%); height: max-content; border: 1px solid var(--ink); background: var(--paper-raised); box-shadow: 6px 6px 0 color-mix(in srgb, var(--ink) 18%, transparent); padding: 7px; }
.context-menu-row { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 10px; border: 0; background: transparent; color: var(--ink); font: 500 .65rem/1.35 var(--mono); text-align: left; }
.context-menu-row.root { background: var(--blue); color: var(--on-blue); font-weight: 600; }
.context-submenu { position: absolute; z-index: 2; right: min(238px, 72%); top: 42px; width: min(260px, 76%); border: 1px solid var(--ink); background: var(--paper-raised); box-shadow: 6px 6px 0 color-mix(in srgb, var(--ink) 18%, transparent); padding: 7px; }
.context-submenu button.context-menu-row { cursor: pointer; box-shadow: inset 2px 0 0 var(--blue); }
.context-submenu .context-menu-row:hover, .context-submenu .context-menu-row:focus-visible { background: var(--blue); color: var(--on-blue); outline: 0; }
.context-menu-sep { height: 1px; margin: 5px 4px; background: var(--rule); }
/* Wyrd's Define / Translate card, as it appears over the page */
.wyrd-card { width: min(340px, 100%); margin: -6px 0 0 auto; position: relative; border: 1px solid var(--ink); background: var(--paper-raised); box-shadow: 6px 6px 0 color-mix(in srgb, var(--ink) 18%, transparent); padding: 14px 16px; font-size: .68rem; line-height: 1.55; }
.wyrd-card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 6px; }
.wyrd-card-head b { font-family: var(--display); font-size: 1.15rem; letter-spacing: -.02em; }
.wyrd-card-head span { color: var(--muted); font-size: .6rem; }
.wyrd-card p { margin: 0 0 6px; }
.wyrd-card-meta { color: var(--blue); font-weight: 600; }
.wyrd-card-source { margin: 8px 0 0 !important; color: var(--muted); font-size: .6rem; }
.profile-card { border: 1px solid var(--ink); background: var(--paper); padding: 21px; }
.profile-card h4 { margin: 0 0 18px; font-family: var(--display); font-size: 1.45rem; letter-spacing: -.035em; }
.profile-field { display: grid; grid-template-columns: minmax(115px, .45fr) 1fr; gap: 16px; padding: 11px 0; border-top: 1px solid var(--rule); font-size: .68rem; }
.profile-field span { color: var(--muted); }
.mock-tab-strip { display: flex; gap: 3px; align-items: end; padding: 7px 7px 0; background: var(--chrome); border: 1px solid var(--rule); border-bottom: 0; overflow: hidden; }
.mock-browser-tab { min-width: 0; flex: 1; padding: 9px 9px 8px; border: 1px solid var(--rule); border-bottom: 0; background: var(--paper); font-size: .55rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mock-browser-tab.duplicate { color: var(--muted); text-decoration: line-through; }
.command-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 9px; padding: 10px; border: 1px solid var(--rule); background: var(--paper-raised); }
.command-input { display: flex; align-items: center; min-width: 0; padding: 10px 12px; border: 1px solid var(--rule); background: var(--paper); font-size: .68rem; font-weight: 600; }
.demo-enter { min-height: 42px; border: 1px solid var(--blue); background: var(--blue); color: var(--on-blue); padding: 9px 14px; font: 600 .65rem/1 var(--mono); cursor: pointer; }
.demo-enter:hover { background: color-mix(in srgb, var(--blue) 86%, var(--ink)); }
/* The demo window's own Enter key, next to its address bar, with a pointer
   that taps it until the reader does (a still pointer with reduced motion) */
.enter-wrap { position: relative; flex: 0 0 auto; }
.enter-wrap .demo-enter { min-height: 36px; padding: 8px 16px; border-radius: 18px; }
.enter-wrap .demo-enter:disabled { cursor: default; opacity: .55; }
.enter-wrap.is-hinting .demo-enter { animation: enter-pulse 1.8s ease-out infinite; }
.click-hint { position: absolute; right: -12px; bottom: -18px; width: 24px; height: 24px; pointer-events: none; fill: var(--ink); stroke: var(--paper-raised); stroke-width: 1.4; stroke-linejoin: round; display: none; }
.enter-wrap.is-hinting .click-hint { display: block; animation: pointer-tap 1.8s ease-in-out infinite; }
@keyframes pointer-tap {
  0%, 100% { transform: translate(8px, 10px); }
  40%, 60% { transform: translate(0, 0); }
  50% { transform: translate(0, 0) scale(.82); }
}
@keyframes enter-pulse {
  0%, 45% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--blue) 55%, transparent); }
  80%, 100% { box-shadow: 0 0 0 9px color-mix(in srgb, var(--blue) 0%, transparent); }
}
/* The window's tabs, under its address bar */
.demo-tabs { display: flex; gap: 3px; align-items: end; padding: 7px 12px 0; background: var(--chrome); border-bottom: 1px solid var(--rule); overflow: hidden; }
.demo-tabs .mock-browser-tab { flex: 1 1 0; max-width: 220px; transition: max-width .4s ease, padding .4s ease, opacity .3s ease, color .2s ease; }
.demo-tabs .mock-browser-tab.closing { color: var(--muted); text-decoration: line-through; opacity: .6; }
.demo-tabs .mock-browser-tab.gone { max-width: 0; padding-inline: 0; border-width: 0; opacity: 0; }
.demo-tabs .mock-browser-tab.fresh { animation: tab-in .35s ease-out; }
/* a letter stands in for the site icon, so the two sites read apart at a glance */
.tab-icon { display: inline-grid; place-items: center; width: 14px; height: 14px; margin-right: 6px; vertical-align: -3px; background: var(--ink); color: var(--paper-raised); font-size: .5rem; font-weight: 600; text-decoration: none; }
.tab-icon.alt { background: var(--blue); color: var(--on-blue); }
@keyframes tab-in { from { opacity: 0; transform: translateY(6px); } }
/* "New shortcut": what a sweep or a dedupe leaves to type, shown like a notification in the demo window */
.shortcut-toast { position: absolute; z-index: 3; bottom: 22px; right: 22px; width: min(300px, calc(100% - 36px)); padding: 14px 16px; border: 1px solid var(--ink); background: var(--paper-raised); box-shadow: 6px 6px 0 var(--shadow); animation: toast-in .45s cubic-bezier(.2, .8, .2, 1) .15s both; }
.shortcut-toast-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; color: var(--blue); font-size: .62rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; }
.shortcut-toast-head .mark { width: 16px; height: 16px; }
.shortcut-toast code { display: block; color: var(--ink); font: 600 .78rem/1.35 var(--mono); overflow-wrap: anywhere; }
.shortcut-toast p { margin: 6px 0 0; color: var(--muted); font-size: .66rem; line-height: 1.5; }
@keyframes toast-in { from { opacity: 0; transform: translateY(12px); } }
/* stacked layout: the window grows with its content, so the notice closes it instead of covering it */
@media (max-width: 980px) { .shortcut-toast { position: relative; bottom: auto; right: auto; width: auto; margin: 0 22px 26px; } }
.demo-reset { margin-top: 12px; border: 0; background: transparent; color: var(--blue); font: 600 .65rem/1 var(--mono); padding: 8px 0; cursor: pointer; }
.demo-reset:hover { text-decoration: underline; text-underline-offset: 3px; }
.command-result { padding: 16px; border: 1px solid var(--blue); background: color-mix(in srgb, var(--blue) 7%, var(--paper-raised)); font-size: .68rem; line-height: 1.55; }
.command-result strong { display: block; margin-bottom: 5px; color: var(--blue); }
.demo-result { display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: end; padding: 18px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.demo-result strong { font-family: var(--display); font-size: clamp(1.2rem, 2.1vw, 1.8rem); letter-spacing: -.025em; }
.demo-result span { color: var(--blue); font-size: .66rem; font-weight: 600; text-align: right; }
.demo-summary { display: flex; justify-content: space-between; gap: 18px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--rule); font-size: .67rem; }
.demo-summary b { color: var(--blue); text-align: right; }
.route-list { display: grid; border-top: 1px solid var(--rule); }
.route-list div { display: grid; grid-template-columns: minmax(110px, .38fr) 1fr; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--rule); font-size: .68rem; }
.route-list b { color: var(--blue); overflow-wrap: anywhere; }
/* Team / Family examples switch in the Shared routes demo */
.variant-toggle { display: inline-flex; margin-bottom: 18px; border: 1px solid var(--rule); }
.variant-toggle button { min-height: 38px; padding: 8px 14px; border: 0; background: transparent; color: var(--muted); font: 600 .66rem/1 var(--mono); cursor: pointer; }
.variant-toggle button + button { border-left: 1px solid var(--rule); }
.variant-toggle button:hover { color: var(--ink); }
.variant-toggle button[aria-pressed="true"] { background: var(--blue); color: var(--on-blue); }
.route-list span { color: var(--muted); overflow-wrap: anywhere; }

/* ---------- teams ---------- */
.teams-section { padding-block: 0; }
.teams-layout { display: grid; grid-template-columns: minmax(0, .92fr) minmax(300px, .48fr); min-height: 560px; width: min(100%, 1440px); margin: 0 auto; }
.teams-copy { padding: clamp(72px, 9vw, 132px) clamp(24px, 5.3vw, 82px); }
.teams-copy h2 { max-width: 770px; margin: 0; font-family: var(--display); font-size: clamp(2.55rem, 5.7vw, 6rem); font-weight: 700; line-height: .9; letter-spacing: -.065em; text-transform: uppercase; text-wrap: balance; }
.teams-copy p { max-width: 650px; margin: 28px 0 0; color: var(--muted); font-size: .9rem; line-height: 1.7; }
.teams-register { display: flex; flex-direction: column; justify-content: center; padding: clamp(42px, 6vw, 76px); border-left: 1px solid var(--rule); background: var(--paper-raised); }
.pack-source { display: grid; gap: 14px; padding: 22px 0; border-top: 1px solid var(--rule); }
.pack-source:last-of-type { border-bottom: 1px solid var(--rule); }
.pack-source b { font-family: var(--display); font-size: 1.05rem; }
.pack-source span { color: var(--muted); font-size: .7rem; line-height: 1.55; }
.refresh-line { display: flex; align-items: center; gap: 10px; margin-top: 28px; color: var(--blue); font-size: .66rem; font-weight: 600; }
.refresh-line::before { content: ""; width: 8px; height: 8px; background: var(--blue); border-radius: 50%; }

/* ---------- closing ---------- */
.closing-section { padding-block: clamp(86px, 11vw, 155px); }
.closing-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, .34fr); gap: clamp(38px, 7vw, 110px); align-items: center; }
.closing-section h2 { max-width: 950px; margin: 0; font-family: var(--display); line-height: .88; letter-spacing: -.07em; text-transform: uppercase; }
.closing-section p { margin: 28px 0; color: var(--muted); font-size: .82rem; }
.closing-section .button { min-height: 52px; padding-inline: 24px; }
.closing-character { margin: 0; align-self: end; border-bottom: 1px solid var(--rule); }
.closing-character img { display: block; width: 100%; max-height: 370px; object-fit: contain; object-position: bottom center; }

/* ---------- guides and stories ---------- */
.guide-masthead { padding-block: clamp(66px, 8vw, 112px); border-bottom: 1px solid var(--rule); }
.guide-masthead .section-title { max-width: 970px; font-size: clamp(3rem, 7vw, 7.2rem); }
.guide-masthead .section-deck { max-width: 650px; margin-top: 28px; }
.case-layout { display: grid; grid-template-columns: minmax(205px, .3fr) minmax(0, .7fr); gap: clamp(30px, 5vw, 72px); align-items: stretch; }
.character-tabs { display: flex; flex-direction: column; border-top: 1px solid var(--rule); }
.character-tab { width: 100%; display: grid; grid-template-columns: 50px 1fr auto; align-items: center; gap: 14px; padding: 12px 6px 12px 0; border: 0; border-bottom: 1px solid var(--rule); background: transparent; color: var(--ink); font: 600 .76rem var(--mono); text-align: left; cursor: pointer; }
.character-tab img { width: 50px; height: 50px; object-fit: cover; object-position: top; border: 1px solid var(--rule); background: var(--paper-raised); }
.character-tab::after { content: "↗"; color: var(--muted); font-size: .85rem; }
.character-tab[aria-selected="true"] { color: var(--blue); }
.character-tab[aria-selected="true"]::after { content: "→"; color: var(--blue); }
.case-panel { min-height: 520px; display: grid; grid-template-columns: minmax(240px, .48fr) minmax(0, .52fr); border: 1px solid var(--rule); background: var(--paper-raised); box-shadow: 10px 10px 0 var(--shadow); overflow: hidden; }
.case-figure { margin: 0; min-height: 100%; border-right: 1px solid var(--rule); background: var(--chrome); overflow: hidden; }
.case-figure img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: top center; transition: opacity .18s ease; }
.case-copy { padding: clamp(28px, 4vw, 52px); display: flex; flex-direction: column; align-items: flex-start; }
.scenario-label { color: var(--blue); font-size: .62rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; }
.case-copy h3 { margin: 22px 0 15px; font-family: var(--display); font-size: clamp(1.8rem, 3.1vw, 3.3rem); line-height: .96; letter-spacing: -.055em; text-wrap: balance; }
.case-copy > p { margin: 0; color: var(--muted); font-size: .8rem; line-height: 1.7; }
.case-route { width: 100%; margin-top: auto; padding-top: 34px; border-top: 1px solid var(--rule); }
.case-route code { margin: 0; color: var(--blue); }
.case-result { display: block; margin-top: 8px; font-family: var(--display); font-size: 1.05rem; font-weight: 700; }
.start-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.start-choice { border: 1px solid var(--rule); padding: clamp(28px, 4vw, 48px); background: var(--paper-raised); }
.start-choice .choice-label { color: var(--blue); font-size: .65rem; font-weight: 600; }
.start-choice h3 { margin: 18px 0 12px; font-family: var(--display); font-size: clamp(1.55rem, 2.5vw, 2.5rem); letter-spacing: -.045em; }
.start-choice p { margin: 0; color: var(--muted); font-size: .79rem; line-height: 1.65; }
.choice-steps { display: grid; gap: 10px; margin: 28px 0 0; padding: 0; list-style: none; font-size: .7rem; }
.choice-steps li { display: grid; grid-template-columns: 26px 1fr; gap: 10px; padding-top: 10px; border-top: 1px solid var(--rule); }
.choice-steps b { color: var(--blue); }
.guide-link-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 26px; padding: 19px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); font-size: .75rem; }
.detail-guide { scroll-margin-top: 24px; display: grid; grid-template-columns: auto repeat(3, minmax(0, 1fr)); margin-top: 34px; border: 1px solid var(--rule); }
.detail-guide > h3 { margin: 0; padding: 24px; border-right: 1px solid var(--rule); font-family: var(--display); font-size: 1.1rem; }
.guide-step { padding: 24px; border-right: 1px solid var(--rule); color: var(--muted); font-size: .7rem; line-height: 1.6; }
.guide-step:last-child { border-right: 0; }
.guide-step b { display: block; margin-bottom: 8px; color: var(--ink); }
.guide-step p { margin: 0 0 10px; }
.guide-step p:last-child { margin: 0; }
.guide-step code, .pack-action code, .prose code { font-family: var(--mono); color: var(--ink); background: color-mix(in srgb, var(--rule) 45%, transparent); padding: 1px 4px; overflow-wrap: anywhere; }
.permission-note { margin-top: 24px; padding: 18px 22px; border: 1px solid var(--rule); background: var(--paper-raised); color: var(--muted); font-size: .7rem; line-height: 1.65; }
.permission-note b { color: var(--ink); }
.starter-pack { display: grid; grid-template-columns: minmax(0, .72fr) minmax(310px, .28fr); border: 1px solid var(--rule); background: var(--paper-raised); box-shadow: 10px 10px 0 var(--shadow); }
.pack-list { display: grid; margin: 0; }
.pack-entry { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 22px; padding: 18px 22px; border-bottom: 1px solid var(--rule); font-size: .69rem; }
.pack-entry:last-child { border-bottom: 0; }
.pack-entry dt { color: var(--blue); font-weight: 600; }
.pack-entry dd { margin: 0; color: var(--muted); overflow-wrap: anywhere; }
.pack-action { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 10px; padding: clamp(28px, 4vw, 48px); border-left: 1px solid var(--rule); }
.pack-action h3 { margin: 0 0 3px; font-family: var(--display); font-size: clamp(1.45rem, 2.5vw, 2.35rem); line-height: 1; letter-spacing: -.04em; }
.pack-action p { margin: 0 0 14px; color: var(--muted); font-size: .72rem; line-height: 1.65; }
.pack-action .button { min-height: 46px; }
.pack-action .fine { margin-top: 6px; line-height: 1.6; }

/* ---------- policy pages: a narrow reading column with section anchors ---------- */
.policy { display: grid; grid-template-columns: minmax(180px, 250px) minmax(0, 68ch); gap: clamp(32px, 6vw, 96px); padding-block: clamp(56px, 7vw, 96px) clamp(72px, 9vw, 120px); }
.policy-toc { position: sticky; top: 24px; align-self: start; font-size: .68rem; }
.policy-toc h2 { margin: 0 0 12px; color: var(--blue); font-size: .62rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.policy-toc ol { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--rule); }
.policy-toc li { border-bottom: 1px solid var(--rule); }
.policy-toc a { display: block; padding: 9px 0; color: var(--muted); text-decoration: none; }
.policy-toc a:hover { color: var(--ink); }
.prose { font-size: .82rem; line-height: 1.75; }
.prose h1 { font-size: clamp(2.4rem, 5vw, 4.4rem); line-height: .92; margin-bottom: 28px; }
.prose h2 { margin: 52px 0 14px; padding-top: 18px; border-top: 1px solid var(--rule); font-family: var(--display); font-size: clamp(1.35rem, 2.2vw, 1.8rem); line-height: 1.1; letter-spacing: -.035em; scroll-margin-top: 24px; }
.prose h3 { margin: 32px 0 10px; font-family: var(--display); font-size: 1.1rem; letter-spacing: -.02em; scroll-margin-top: 24px; }
.prose p, .prose ul, .prose ol { margin: 0 0 16px; }
.prose li { margin: 6px 0; }
.prose strong { font-weight: 600; }
.prose table { border-collapse: collapse; font-size: .72rem; }
.prose .table-wrap { overflow-x: auto; margin-bottom: 16px; }
.prose th, .prose td { border: 1px solid var(--rule); padding: 8px 10px; text-align: left; vertical-align: top; }

/* ---------- footer ---------- */
.site-footer { border-top: 1px solid var(--rule); padding: 25px clamp(24px, 5.3vw, 82px); display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 24px; color: var(--muted); font-size: .65rem; }
.footer-mark { display: flex; align-items: center; gap: 9px; color: var(--ink); font-weight: 600; text-decoration: none; }
.footer-mark .mark { width: 23px; height: 23px; }
.footer-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 24px; }
.footer-links a { color: inherit; text-decoration: none; }
.footer-links a:hover { color: var(--ink); }

/* ---------- desktop hero: the first screen, filled ---------- */
@media (min-width: 981px) {
  .hero { min-height: calc(100svh - 72px); align-content: center; padding-block: clamp(48px, 5vw, 80px); }
  .kicker { font-size: .74rem; margin-bottom: 22px; }
  .subcopy { font-size: clamp(1.02rem, 1.3vw, 1.22rem); margin-top: 34px; max-width: 640px; }
  .choices { margin-top: 38px; gap: 12px; }
  .choices .button { min-height: 54px; padding-inline: 24px; font-size: .84rem; }
  .fine { font-size: .74rem; margin-top: 18px; }
  .demo-column { gap: 30px; }
  .signal-step { padding: 22px 26px; font-size: .86rem; grid-template-columns: 40px minmax(0, 1fr); }
  .destination-card { height: 330px; }
  .destination-card .browser-row { height: 64px; padding-inline: 16px; }
  .destination-card .address-pill { height: 42px; width: min(100%, 440px); border-radius: 21px; }
  .destination-card .route-pair b { font-size: .9rem; }
  .destination-card .route-pair em { font-size: .76rem; }
  .arrival { height: 265px; padding: 38px 32px 30px; }
  .arrival-label { font-size: .74rem; }
  .arrival-title { font-size: clamp(2.2rem, 3.6vw, 3.7rem); margin-top: 16px; }
  .arrival p { font-size: .82rem; }
}

/* ---------- 980px ---------- */
@media (max-width: 980px) {
  .hero { grid-template-columns: 1fr; gap: 50px; padding-top: 72px; }
  .hero-copy { max-width: 760px; }
  h1 { font-size: clamp(3rem, 9.2vw, 5.8rem); }
  .demo-column { max-width: 700px; }
  .section-intro { grid-template-columns: 1fr; align-items: start; }
  .section-deck { max-width: 660px; }
  .feature-explorer { grid-template-columns: 1fr; gap: 34px; }
  .feature-demo { position: relative; top: auto; }
  .case-layout { grid-template-columns: 1fr; }
  .character-tabs { display: grid; grid-template-columns: repeat(5, 1fr); border-left: 1px solid var(--rule); }
  .character-tab { grid-template-columns: 1fr; justify-items: center; padding: 12px 5px; border-right: 1px solid var(--rule); font-size: .65rem; text-align: center; }
  .character-tab::after { display: none; }
  .case-panel { min-height: 500px; }
  .teams-layout { grid-template-columns: 1fr; }
  .teams-register { border-left: 0; border-top: 1px solid var(--rule); }
  .detail-guide { grid-template-columns: 1fr; }
  .detail-guide > h3, .guide-step { border-right: 0; border-bottom: 1px solid var(--rule); }
  .guide-step:last-child { border-bottom: 0; }
  .policy { grid-template-columns: 1fr; }
  .policy-toc { position: static; }
  .policy-toc ol { columns: 2 200px; column-gap: 24px; }
  .policy-toc li { break-inside: avoid; }
}

/* ---------- 650px ---------- */
@media (max-width: 650px) {
  .site-nav { height: 62px; grid-template-columns: auto auto; justify-content: space-between; padding: 0 18px; }
  .nav-links { display: none; }
  .nav-actions { gap: 7px; }
  .theme-toggle { width: 36px; min-height: 36px; padding: 0; }
  .theme-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
  .top-cta { min-height: 36px; padding: 8px 11px; font-size: .66rem; }
  .hero { gap: 40px; padding: 54px 19px 74px; }
  .kicker { max-width: 330px; line-height: 1.5; }
  h1 { font-size: clamp(2.35rem, 12.2vw, 4.25rem); }
  .subcopy { margin-top: 23px; font-size: .88rem; }
  .choices { display: grid; grid-template-columns: 1fr; }
  .button { width: 100%; }
  .signal-step { padding: 15px; font-size: .7rem; }
  .destination-card { height: 240px; box-shadow: 7px 7px 0 var(--shadow); }
  .browser-row { height: 55px; gap: 5px; padding: 9px; }
  .browser-tool { width: 19px; }
  .address-pill { height: 34px; padding: 0 10px; }
  .route-pair { gap: 8px; }
  .route-pair b { font-size: .61rem; }
  .route-pair em { font-size: .54rem; }
  .arrival { height: 185px; padding: 25px 19px 21px; }
  .arrival-title { font-size: clamp(1.65rem, 9.3vw, 2.65rem); }
  .content-shell { padding-inline: 19px; }
  .site-section { padding-block: 72px; }
  .section-intro { margin-bottom: 38px; }
  .section-title { font-size: 2.35rem; }
  .guide-masthead { padding-block: 58px; }
  .guide-masthead .section-title { font-size: 3.25rem; }
  .command-bar { grid-template-columns: 1fr; }
  .context-menu-wrap { justify-content: flex-start; min-height: 290px; }
  .context-menu { width: 82%; }
  .context-submenu { right: 0; top: 82px; width: 84%; }
  .feature-explorer { grid-template-columns: 1fr; gap: 34px; }
  .feature-card { grid-template-columns: 62px minmax(0, 1fr) auto; padding: 20px 0; }
  .feature-card .feature-name { font-size: 1.12rem; }
  .feature-demo { position: relative; top: auto; min-height: 520px; box-shadow: 7px 7px 0 var(--shadow); scroll-margin-top: 12px; }
  .feature-demo-screen { min-height: 463px; padding: 27px 22px; }
  .feature-demo-screen h3 { font-size: 2.15rem; }
  .demo-result { grid-template-columns: 1fr; }
  .demo-result span { text-align: left; }
  .route-list div { grid-template-columns: 1fr; gap: 5px; }
  .character-tabs { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .character-tab { gap: 6px; font-size: .55rem; }
  .character-tab img { width: 42px; height: 42px; }
  .case-panel { min-height: 0; grid-template-columns: 1fr; box-shadow: 7px 7px 0 var(--shadow); }
  .case-figure { height: 310px; border-right: 0; border-bottom: 1px solid var(--rule); }
  .case-copy { min-height: 360px; padding: 28px 23px; }
  .start-grid { grid-template-columns: 1fr; }
  .guide-link-row { align-items: flex-start; flex-direction: column; }
  .detail-guide { margin-top: 24px; }
  .starter-pack { grid-template-columns: 1fr; box-shadow: 7px 7px 0 var(--shadow); }
  .pack-action { border-left: 0; border-top: 1px solid var(--rule); }
  .teams-layout { min-height: 0; }
  .teams-copy { padding: 72px 19px; }
  .teams-copy h2 { font-size: 3rem; }
  .teams-register { padding: 44px 19px; }
  .closing-layout { grid-template-columns: 1fr; }
  .closing-section p { line-height: 1.6; }
  .closing-character { width: min(78%, 310px); justify-self: center; }
  .site-footer { grid-template-columns: 1fr; align-items: start; padding-inline: 19px; }
  .footer-links { justify-content: flex-start; }
  .policy-toc ol { columns: 1; }
}

/* ---------- 390px ---------- */
@media (max-width: 390px) {
  .top-cta { font-size: .61rem; padding-inline: 8px; }
  .brand { font-size: .8rem; }
  .brand .mark { width: 23px; height: 23px; }
  h1 { font-size: 2.28rem; }
  .browser-tools { gap: 0; }
  .browser-tool { width: 17px; }
  .address-pill { padding-inline: 8px; }
  .route-pair b { font-size: .56rem; }
  .route-pair em { font-size: .5rem; }
  .character-tab img { width: 36px; height: 36px; }
  .character-tab { font-size: .5rem; }
  .case-figure { height: 270px; }
  .teams-copy h2 { font-size: 2.72rem; }
  .guide-masthead .section-title { font-size: 2.6rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .route-pair, .case-figure img, .demo-tabs .mock-browser-tab, .word-stack .word { transition: none; }
  .enter-wrap.is-hinting .demo-enter, .enter-wrap.is-hinting .click-hint, .demo-tabs .mock-browser-tab.fresh, .shortcut-toast { animation: none; }
  .enter-wrap.is-hinting .click-hint { transform: translate(2px, 3px); }
}