/* Nexhub preview site: the main page (index.html). The shared base, buttons, forms and
   the other pages: site.css. Colours only from generated/tokens.css; the closing
   sections wear Sandstone (.theme-sandstone). Motion runs in intro.js and home.js. */

.home { --nav-h: 60px; }
html:has(.home) { scroll-padding-top: calc(var(--nav-h) + 32px); }

/* ── header: a floating bar, hidden until the page first moves (home.js adds .on) ── */
.nav {
  position: fixed; z-index: 30; top: 12px; left: 0; right: 0; margin-inline: auto;
  width: min(calc(var(--wrap) + 2 * var(--pad)), calc(100% - 24px));
  transition: transform .8s var(--ease-out), opacity .6s var(--ease-out);
}
.js .nav:not(.on) { transform: translateY(calc(-100% - 24px)); opacity: 0; visibility: hidden; transition: transform .4s var(--ease), opacity .3s var(--ease), visibility 0s .4s; }
.nav-inner {
  position: relative; display: flex; align-items: center; gap: 20px; height: var(--nav-h); padding: 0 10px 0 18px;
  border-radius: 18px; border: 1px solid var(--edge-subtle);
  background: color-mix(in srgb, var(--bg) 80%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: var(--lift), 0 18px 50px -24px color-mix(in srgb, var(--bg) 90%, transparent);
}
.nav .wordmark-mark { width: 24px; height: 24px; }
.nav .wordmark-name { font-size: 17px; }
.nav-links { display: flex; gap: 24px; margin-left: auto; }
.nav-links a { font-size: 14px; color: var(--text-muted); text-decoration: none; transition: color var(--dur) var(--ease); }
.nav-links a:hover { color: var(--text-primary); }
.nav-menu { display: none; margin-left: auto; border-color: transparent; }
.nav-open { flex: none; }

/* ── shots: every screenshot sits in one 16:10 frame. home.js measures each image,
   trims the thin black strip along its top, and picks cover or fit ── */
.shot {
  display: block; position: relative; width: 100%; aspect-ratio: 16 / 10; overflow: hidden;
  container-type: size; background: var(--bg);
}
.shot-crop {
  display: block; position: absolute; left: 50%; top: 0; transform: translateX(-50%);
  width: max(100cqw, calc(100cqh * var(--r, 1.6))); aspect-ratio: var(--r, 1.6); overflow: hidden;
}
.shot-crop img {
  position: absolute; left: 0; bottom: 0; width: 100%; height: auto; max-width: none;
  opacity: 0; transition: opacity 420ms var(--ease);
}
.shot.ready .shot-crop img { opacity: 1; }
/* A view that is not a full screen (a widget) floats whole in the frame. */
.shot.fit { background: radial-gradient(ellipse at 50% 40%, var(--accent-soft), transparent 70%), var(--bg); }
.shot.fit .shot-crop {
  top: 50%; transform: translate(-50%, -50%);
  width: min(90cqw, calc(86cqh * var(--r, 1.6)));
  border-radius: 10px; border: 1px solid var(--edge-subtle);
}
/* A framed app window: the page viewer and the theme preview. */
.window {
  border-radius: var(--r-xl); overflow: hidden; background: var(--card);
  border: 1px solid var(--edge-subtle); box-shadow: var(--lift);
}

/* ── 1 hero: the whole screen. The mark's piece plays over the lockup, then rests as it ── */
.hero { position: relative; display: grid; place-items: center; height: 100vh; height: 100svh; min-height: 520px; overflow: hidden; isolation: isolate; }
/* The quiet glow the lockup rests in. */
.hero::before {
  content: ""; position: absolute; z-index: -1; inset: 0; margin: auto; width: min(110vmin, 1100px); aspect-ratio: 1; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--accent-soft) 55%, transparent), transparent);
  transition: opacity 1.8s var(--ease-out);
}
.hero-art { position: absolute; inset: 0; margin: auto; width: min(64vmin, 520px); height: min(64vmin, 520px); pointer-events: none; }
.lockup {
  display: inline-flex; align-items: center; gap: .3em;
  font: 600 clamp(30px, 3.4vw, 44px)/1 var(--font-prose); letter-spacing: -.035em; color: var(--text-primary);
}
.lockup-mark { width: 1.08em; height: 1.08em; flex: none; }
.lockup-name { padding-bottom: .04em; }
/* While the intro owns the hero, the lockup and its glow wait for it. If the intro never
   starts (its scripts failed), they show on their own after a beat. */
.intro .hero::before, .intro .lockup-mark, .intro .lockup-name { opacity: 0; }
.intro:not(.intro-run) .hero::before,
.intro:not(.intro-run) .lockup-mark,
.intro:not(.intro-run) .lockup-name { animation: fade .9s var(--ease-out) 2.4s both; }
.intro.rested .hero::before { opacity: 1; }
/* The tagline, quiet under the lockup. intro.js fades it in at six seconds; at rest it
   simply shows, and if the intro never starts it fades in on its own. */
.hero-tag {
  position: absolute; left: 0; right: 0; top: calc(50% + clamp(30px, 3.2vw, 42px)); padding-inline: var(--pad);
  text-align: center; font: 400 clamp(14px, 1.1vw, 16px)/1.4 var(--font-prose); letter-spacing: .02em; color: var(--text-muted);
}
.intro .hero-tag { opacity: 0; }
.intro:not(.intro-run) .hero-tag { animation: fade 1.6s var(--ease-out) 6s both; }
/* The scroll hint: a hairline with a light running down it, shown by home.js after a
   while on the hero with no scroll, and gone at the first scroll. */
.hero-hint {
  position: absolute; left: 0; right: 0; bottom: clamp(20px, 5vh, 44px); margin-inline: auto;
  display: flex; justify-content: center; width: 44px; height: 64px; padding-top: 10px; border-radius: 22px;
  opacity: 0; transform: translateY(-8px);
  transition: opacity 1.4s var(--ease-out), transform 1.4s var(--ease-out);
}
.hero-hint.on { opacity: 1; transform: none; }
.hero-hint-line {
  position: relative; width: 1px; height: 44px; overflow: hidden; border-radius: 1px;
  background: color-mix(in srgb, var(--text-muted) 28%, transparent);
}
.hero-hint-line i {
  position: absolute; left: 0; top: 0; width: 1px; height: 14px; border-radius: 1px;
  background: var(--text-primary); animation: hintRun 2.6s var(--ease-inout) infinite;
}
@keyframes hintRun {
  0% { transform: translateY(-14px); opacity: 0; }
  30% { opacity: .9; }
  100% { transform: translateY(44px); opacity: 0; }
}

/* ── 2 the two ways in ── */
.ways { padding-block: clamp(48px, 7vw, 96px) clamp(24px, 4vw, 48px); }
.ways-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(12px, 2vw, 20px); }
.way {
  --mx: 50%; --my: 50%;
  position: relative; display: flex; align-items: flex-end; min-height: clamp(150px, 17vw, 212px);
  padding: clamp(22px, 3vw, 34px); border-radius: var(--r-xl); overflow: hidden; isolation: isolate;
  background: var(--card); border: 1px solid var(--edge-subtle); box-shadow: var(--lift);
  text-decoration: none;
  transition: border-color var(--dur) var(--ease), transform .5s var(--ease-out);
}
.way-open { background: linear-gradient(155deg, color-mix(in srgb, var(--primary) 18%, var(--card)), var(--card) 62%); }
/* A soft light that follows the pointer (home.js sets --mx/--my). */
.way::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .45s var(--ease);
  background: radial-gradient(520px circle at var(--mx) var(--my), var(--primary-soft), transparent 62%);
}
.way:hover { border-color: var(--edge-hover); transform: translateY(-2px); }
.way:hover::before, .way:focus-visible::before { opacity: 1; }
.way:focus-visible { outline-offset: 4px; border-radius: var(--r-xl); }
.way-label { font: 600 clamp(24px, 2.6vw, 34px)/1.1 var(--font-prose); letter-spacing: -.025em; color: var(--text-heading); }
.way-go {
  position: absolute; top: clamp(18px, 2.4vw, 26px); right: clamp(18px, 2.4vw, 26px);
  display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid var(--edge-hover); color: var(--text-primary);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.way-go svg { transition: transform .45s var(--ease-out); }
.way:hover .way-go { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.way:hover .way-go svg { transform: translate(2px, -2px); }
/* What Nexhub is, one line under the two ways in. */
.ways-line {
  margin-top: clamp(20px, 2.6vw, 32px); text-align: center;
  font-size: clamp(16px, 1.25vw, 18px); line-height: 1.65; color: var(--text-muted); text-wrap: pretty;
}

/* ── sections ── */
.section { padding-block: clamp(80px, 11vw, 140px); }
.section + .section { border-top: 1px solid var(--hairline); }

/* ── 3 pages: tier tabs, the tier's pages, then the viewer ── */
.pages-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 18px 24px; }
.tiers { position: relative; display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--card); border: 1px solid var(--edge-subtle); }
/* The lit pill under the picked tier; home.js slides it from tab to tab. */
.tiers-lit {
  position: absolute; top: 4px; bottom: 4px; left: 0; width: 0; border-radius: 999px; pointer-events: none;
  background: var(--primary-soft); box-shadow: inset 0 0 0 1px var(--primary-border);
}
.tier-tab {
  position: relative; z-index: 1; display: inline-flex; align-items: baseline; gap: 8px; min-height: 40px; padding: 10px 18px;
  border: 0; border-radius: 999px; background: transparent; color: var(--text-muted); cursor: pointer;
  font: 500 14px/1.2 var(--font-prose); transition: color var(--dur) var(--ease);
}
.tier-tab span { font: 400 12px/1 var(--font-data); color: var(--text-faint); transition: color var(--dur) var(--ease); }
.tier-tab:hover, .tier-tab[aria-selected="true"] { color: var(--text-primary); }
.tier-tab[aria-selected="true"] span { color: var(--accent); }
.tier-tab:focus-visible { border-radius: 999px; outline-offset: 2px; }

.page-tabs { position: relative; display: flex; flex-wrap: wrap; gap: 4px; margin-top: 26px; }
.page-tab {
  flex: none; min-height: 40px; padding: 8px 14px; border-radius: 10px; cursor: pointer;
  border: 1px solid transparent; background: transparent; color: var(--text-muted);
  font: 500 15px/1.2 var(--font-prose);
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.page-tab:hover { color: var(--text-primary); background: var(--hover-bg); }
.page-tab[aria-selected="true"] { color: var(--text-primary); background: var(--card); border-color: var(--edge-hover); }

.viewer {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(28px, 4vw, 56px);
  align-items: center; margin-top: 24px;
}
.viewer-stage {
  position: relative; aspect-ratio: 16 / 10;
  box-shadow: var(--lift), 0 40px 120px -40px var(--primary-glow);
}
.viewer-stage .shot { position: absolute; inset: 0; height: 100%; }
.viewer-info { display: flex; flex-direction: column; gap: 28px; min-width: 0; }
/* Room for the longest text, so the steps never jump between pages (home.js sets it). */
.viewer-words { display: flex; flex-direction: column; gap: 14px; min-height: var(--words-h, auto); }
.viewer-name { font: 600 clamp(30px, 3.2vw, 42px)/1.1 var(--font-prose); letter-spacing: -.03em; }
.viewer-text { font-size: 16px; line-height: 1.7; color: var(--text-muted); text-wrap: pretty; }
.viewer-steps { display: flex; align-items: center; gap: 12px; }
.viewer-pos { min-width: 5ch; text-align: center; font: 400 13px/1 var(--font-data); color: var(--text-faint); }

/* The tier label: Central, Space, Extra */
.tier {
  display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
  font: 500 11px/1 var(--font-data); letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted);
}
.tier::before { content: ""; width: 7px; height: 7px; border-radius: 50%; flex: none; }
.tier-central { color: var(--accent); }
.tier-central::before { background: var(--primary); box-shadow: 0 0 10px var(--primary-glow); }
.tier-space::before { border: 1.5px solid var(--accent); }
.tier-extra::before { border: 1.5px dashed var(--text-faint); }

/* ── 4 make it yours: the three words, then four tiles ── */
.pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 4vw, 48px); margin-top: 48px; }
.pillar { border-top: 1px solid var(--edge-subtle); padding-top: 24px; }
.pillar h3 { font-size: clamp(22px, 2.2vw, 28px); margin-bottom: 12px; }
.pillar p { color: var(--text-muted); font-size: 15.5px; max-width: 34ch; }

.tiles { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; margin-top: clamp(48px, 6vw, 72px); }
.tile {
  grid-column: span 6; display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 28px;
  border-radius: var(--r-lg); background: var(--card); border: 1px solid var(--edge-subtle); box-shadow: var(--lift);
}
.tile-pages { grid-column: span 5; }
.tile-dash { grid-column: span 7; }
.tile > p { color: var(--text-muted); font-size: 15px; max-width: 62ch; }
/* The widget shot at its own shape, not in the 16:10 frame. */
.tile-shot { margin-top: auto; padding-top: 8px; }
.tile-shot img { width: 100%; height: auto; border-radius: var(--r-md); border: 1px solid var(--edge-subtle); }
/* Each switch sits right beside its page's name. */
.toggles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 24px; margin-top: 8px; }
.toggles li { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--text-primary); min-width: 0; }
.toggles li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.toggles li::before {
  content: ""; flex: none; width: 22px; height: 12px; border-radius: 999px;
  background: radial-gradient(circle at 16px 6px, var(--on-primary) 3.5px, transparent 4px), var(--primary);
  opacity: .85;
}

/* Your pace: the wizard's card for each page with modes, and its mode picks */
.paces { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 8px; }
/* The wizard card sits beside its picks at its own size (a 2x shot, shown at half). */
.pace {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px 20px;
  padding: 16px; border-radius: var(--r-md); background: var(--input-bg); border: 1px solid var(--hairline);
}
.pace > :not(.pace-card) { grid-column: 2; }
/* The hand-cropped shots carry stray card edges; a slight zoom trims an even margin. */
.pace-card { grid-row: 1 / span 3; width: 168px; aspect-ratio: 1.36; border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--edge-subtle); }
.pace-card img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); }
.pace:not(:has(.pace-card)) { grid-template-columns: minmax(0, 1fr); }
.pace:not(:has(.pace-card)) > * { grid-column: 1; }
.pace-name { font: 500 11px/1 var(--font-data); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.pace-modes { display: flex; flex-wrap: wrap; gap: 6px; }
.pace-desc { min-height: 3.2em; font-size: 14.5px; line-height: 1.6; color: var(--text-primary); }

/* Your colours: the picks, the app in the picked theme, then every theme */
.theme-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.theme-tab, .chip-btn {
  display: inline-flex; align-items: center; gap: 10px; min-height: 38px; padding: 8px 14px; border-radius: 999px; cursor: pointer;
  background: transparent; border: 1px solid var(--edge-subtle); color: var(--text-muted);
  font: 500 14px/1.2 var(--font-prose);
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.theme-tab { padding-left: 10px; }
.theme-tab:hover, .chip-btn:hover { color: var(--text-primary); border-color: var(--edge-hover); }
.theme-tab[aria-pressed="true"], .chip-btn[aria-pressed="true"] { color: var(--text-primary); border-color: var(--primary); background: var(--primary-soft); }
.chip-btn { padding: 7px 13px; font-size: 13.5px; }
.theme-dot { width: 16px; height: 16px; border-radius: 50%; flex: none; border: 1px solid var(--edge-hover); }
.theme-window { position: relative; margin-top: 4px; border-radius: var(--r-md); background: var(--bg); aspect-ratio: 16 / 10; }
.theme-window .shot { position: absolute; inset: 0; height: 100%; }
.theme-note { font: 400 13px/1.5 var(--font-data); color: var(--text-faint); }
.swatches { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-top: 6px; }
.swatch { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.swatch-mini { display: flex; gap: 5px; height: 58px; padding: 6px; border-radius: var(--r-sm); border: 1px solid var(--edge-subtle); overflow: hidden; }
.swatch-mini i { display: block; }
.swatch-rail { width: 5px; border-radius: 3px; opacity: .9; }
.swatch-surf { flex: 1; display: flex; flex-direction: column; gap: 5px; padding: 7px; border-radius: 5px; }
.swatch-line { height: 3px; border-radius: 2px; }
.swatch-cta { height: 6px; width: 42%; border-radius: 3px; margin-top: auto; }
.swatch-name { display: flex; align-items: baseline; justify-content: space-between; gap: 4px; font: 500 12.5px/1.3 var(--font-prose); color: var(--text-primary); }
.swatch-name small { font: 400 9.5px/1 var(--font-data); letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint); }

/* ── 5 install ── */
.install-line { margin-top: 16px; max-width: 64ch; font-size: clamp(16px, 1.25vw, 18px); color: var(--text-muted); }
.installs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 44px; }
.install {
  display: flex; flex-direction: column; gap: 12px; padding: 28px; border-radius: var(--r-lg);
  background: var(--card); border: 1px solid var(--edge-subtle); box-shadow: var(--lift);
}
.install p { font-size: 15px; color: var(--text-muted); }
.install p b { font-weight: 600; color: var(--text-primary); }
.install-icon { color: var(--accent); margin-bottom: 6px; }
.install-brand { width: 22px; height: 22px; fill: currentColor; }
.step { color: var(--text-faint); padding-inline: 2px; }

/* ── 6 releases: one row per release, newest first ── */
.releases { display: flex; flex-direction: column; margin-top: 40px; border-top: 1px solid var(--hairline); }
.release {
  display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 2fr) minmax(0, 8fr); align-items: baseline; gap: 8px 32px;
  padding-block: 22px; border-bottom: 1px solid var(--hairline);
}
.release-ver { display: inline-flex; align-items: center; gap: 10px; font: 500 15px/1.3 var(--font-data); color: var(--text-heading); }
.release-latest {
  padding: 4px 8px; border-radius: 999px; background: var(--primary-soft); border: 1px solid var(--primary-border);
  font: 500 10px/1 var(--font-data); letter-spacing: .12em; text-transform: uppercase; color: var(--accent);
}
.release-date { font: 400 13px/1.3 var(--font-data); color: var(--text-faint); }
.release-msg { font-size: 16px; line-height: 1.6; color: var(--text-muted); max-width: 62ch; }
.releases-empty { margin-top: 40px; font-size: 15px; color: var(--text-muted); }

/* ── 7 to 9: Sandstone. home.js lets the sheet rise over the dark page as it arrives ── */
.light { position: relative; background: var(--bg); color: var(--text-primary); }
.mission { position: relative; isolation: isolate; overflow: hidden; background: var(--bg); padding-block: clamp(112px, 14vw, 184px); }
/* The loop, dimmed: blended into the ground, faded at its edges, quietest under the words. */
.mission-media { position: absolute; inset: 0; z-index: -1; }
.mission-still, .mission-video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: .44; mix-blend-mode: multiply; filter: saturate(.8);
}
.mission-still, .mission-video { transition: opacity 1.4s var(--ease-out); }
.mission-video { opacity: 0; }
/* Once the loop runs, it takes the still's place. */
.mission-media.playing .mission-video { opacity: .44; }
.mission-media.playing .mission-still { opacity: 0; }
.mission-media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, var(--bg), transparent 24%, transparent 76%, var(--bg)),
    linear-gradient(90deg, color-mix(in srgb, var(--bg) 88%, transparent), color-mix(in srgb, var(--bg) 56%, transparent) 58%, color-mix(in srgb, var(--bg) 30%, transparent));
}
.mission-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 330px); gap: clamp(32px, 6vw, 96px); align-items: end; }
.mission-line { font: 600 clamp(32px, 4.4vw, 58px)/1.08 var(--font-prose); letter-spacing: -.035em; max-width: 17ch; }
.mission-sub { margin-top: 22px; max-width: 40ch; font-size: clamp(17px, 1.5vw, 20px); line-height: 1.55; color: var(--text-muted); }
.fb-box {
  display: flex; flex-direction: column; align-items: flex-start; gap: 18px; padding: 28px; border-radius: var(--r-xl);
  background: color-mix(in srgb, var(--card) 88%, transparent); border: 1px solid var(--edge-subtle);
  box-shadow: 0 30px 80px -40px color-mix(in srgb, var(--text-primary) 40%, transparent);
}
.fb-box h3 { font-size: 20px; }

.contact { border-top: 1px solid var(--hairline); padding-block: clamp(64px, 8vw, 104px); }
.contact-inner { display: flex; flex-direction: column; align-items: center; gap: 22px; text-align: center; }
.contact-email {
  font: 600 clamp(22px, 2.6vw, 34px)/1.25 var(--font-prose); letter-spacing: -.02em;
  text-decoration: none; overflow-wrap: anywhere; transition: color var(--dur) var(--ease);
}
.contact-email:hover { color: var(--accent); }
.socials { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.socials a {
  display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
  border-radius: var(--r-md); border: 1px solid var(--edge-subtle); color: var(--text-muted);
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.socials a:hover { color: var(--text-primary); border-color: var(--edge-hover); background: var(--hover-bg); }
.socials svg { width: 18px; height: 18px; fill: currentColor; }

.foot { border-top: 1px solid var(--hairline); padding-block: 56px 32px; }
.foot-cols { display: grid; grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, 1fr)); gap: 32px; }
.foot-name { align-self: start; font: 600 22px/1 var(--font-prose); letter-spacing: -.025em; text-decoration: none; }
.foot-cols nav { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.foot-cols h3 { margin-bottom: 4px; font: 500 11px/1 var(--font-data); letter-spacing: .14em; text-transform: uppercase; color: var(--text-faint); }
.foot-cols a:not(.foot-name), .foot-legal a { font-size: 14px; color: var(--text-muted); text-decoration: none; transition: color var(--dur) var(--ease); }
.foot-cols a:not(.foot-name):hover, .foot-legal a:hover { color: var(--text-primary); }
.foot-line {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px;
  margin-top: 48px; padding-top: 22px; border-top: 1px solid var(--hairline);
  font: 400 12.5px/1 var(--font-data); color: var(--text-faint);
}
.foot-legal { display: inline-flex; align-items: center; gap: 20px; }
.foot-legal a { font: inherit; }

/* ── narrower screens ── */
@media (max-width: 1100px) { .nav-links { gap: 18px; } }
@media (max-width: 960px) {
  /* The links fold into a menu under the bar. */
  .nav-menu { display: inline-flex; }
  .nav-open { margin-left: 0; }
  .nav-links {
    position: absolute; top: calc(100% + 8px); left: 0; right: 0; display: none; flex-direction: column; gap: 2px; margin: 0; padding: 8px;
    border-radius: 16px; border: 1px solid var(--edge-subtle); background: color-mix(in srgb, var(--bg) 94%, transparent);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    box-shadow: 0 24px 60px -30px color-mix(in srgb, var(--bg) 90%, transparent);
  }
  .nav.open .nav-links { display: flex; }
  .nav-links a { display: flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 10px; font-size: 15px; }
  .nav-links a:hover { background: var(--hover-bg); }
  .viewer { grid-template-columns: minmax(0, 1fr); }
  .viewer-words { min-height: 0; }
  .tile, .tile-pages, .tile-dash { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .ways-grid { grid-template-columns: minmax(0, 1fr); }
  .way { min-height: 128px; }
  .pillars { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .installs { grid-template-columns: minmax(0, 1fr); }
  .mission-grid { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot-name { grid-column: 1 / -1; }
  .tier-tab, .page-tab { min-height: 44px; }
  .release { grid-template-columns: minmax(0, 1fr) auto; }
  .release-msg { grid-column: 1 / -1; }
  /* The page names scroll sideways in one row. */
  .page-tabs {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain;
    margin-inline: calc(-1 * var(--pad)); padding-inline: var(--pad);
  }
  .page-tabs::-webkit-scrollbar { display: none; }
}
@media (max-width: 640px) {
  .home { --nav-h: 56px; }
  .nav { top: 8px; width: calc(100% - 16px); }
  .nav-inner { gap: 10px; padding-left: 14px; }
  .tile, .install { padding: 22px; }
  .toggles { grid-template-columns: minmax(0, 1fr); }
  .pace { grid-template-columns: minmax(0, 1fr); }
  .pace > *, .pace > :not(.pace-card) { grid-column: 1; }
  .pace-card { grid-row: auto; width: min(220px, 100%); }
  .swatches { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .viewer-stage, .window { border-radius: var(--r-md); }
}
@media (max-width: 420px) {
  .tier-tab { padding-inline: 13px; }
}

/* ── motion: the reveals and the hero are home.js's; reduced motion keeps all of it still ── */
@media (prefers-reduced-motion: reduce) {
  .hero-hint { transform: none; }
  .hero-hint-line i { animation: none; transform: translateY(15px); }
  .way:hover { transform: none; }
  .way:hover .way-go svg { transform: none; }
  .mission-video { display: none; }
}