/* SOL'S KIT — the website's system in the new dress (30 Sept 2026; doctrine/APPLE-DESIGN-SYSTEM.md,
   "The kit"). The home page's sheet, less everything only the home page wears: the tokens, the type,
   the two navs, the ribbon, the section headers, the themes, the stat rows, the scrollers and their
   paddles, the floating pills, the launch form, the index, the footer and the overlays. Every page
   moved to the new dress loads this and its own sheet; the home page keeps its own full copy
   (home.css), written first. Split rule by rule by class family, so a page never inherits the home's
   layouts by accident. NO HAIRLINES (owner, 30 Sept: "we cant have these strong white and hairline
   strokes"): Apple's sheet draws a rule under the local nav, over the stat rows and through the
   footer; this kit separates them with space and glass instead. What follows is the home sheet's own
   measured header. */
/* THE HOME PAGE, V2 — Apple's iPad Pro page and Flighty, as measured on 29 Sept 2026
   (doctrine/APPLE-DESIGN-SYSTEM.md, "apple.com/ipad-pro/ and flighty.com"). Every number
   below is one of theirs unless a comment says otherwise; nothing is copied, the values are
   re-set in Sol's own sheet. Three breakpoints, as Apple's: large ≥1069, medium 735–1068,
   small ≤734. Sol's rules stand over Apple's where they meet: no hue on a control or a link
   (Apple's #0071e3 and #2997ff become white glass and white), never black type, and colour
   only where it is light — the sky, the sun's path, the app's own screens. */

:root {
  --bg: #000;
  --bg-alt: #161617;
  --bg-raised: #1d1d1f;
  --ink: #f5f5f7;
  --ink-80: rgba(255, 255, 255, .8);
  --ink-56: rgba(255, 255, 255, .56);
  --ink-2: #86868b;
  --hair: rgba(255, 255, 255, .24);
  --hair-soft: rgba(255, 255, 255, .16);
  --paddle: rgb(51, 51, 54);
  --glass: rgba(66, 66, 69, .7);
  --glass-edge: inset 0 0 1px rgba(232, 232, 237, .11);
  --nav-glass: rgba(22, 22, 23, .8);
  --pill: rgba(245, 245, 247, .28);
  --pill-hover: rgba(245, 245, 247, .36);
  --pill-down: rgba(245, 245, 247, .22);
  --r: 28px;
  --content: min(1120px, 87.5%);
  --text: min(980px, 87.5%);
  --ease: cubic-bezier(.4, 0, .6, 1);
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--bg); scroll-padding-top: 64px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--font); font-size: 17px; line-height: 1.47059; font-weight: 400; letter-spacing: -.022em;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-synthesis: none;
}
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; letter-spacing: inherit; }
a { color: var(--ink); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 6px; }
strong { font-weight: inherit; color: var(--ink); }

.wrap { width: var(--content); margin-inline: auto; }
.wrap-text { width: var(--text); margin-inline: auto; }

.skip {
  position: absolute; left: 16px; top: -80px; z-index: 100; padding: 10px 18px; border-radius: 980px;
  background: var(--bg-raised); color: var(--ink); text-decoration: none; font-size: 14px;
}
.skip:focus { top: 12px; }

/* the pill: Apple's hero "Buy" (17px, 11px 21px, radius 980), in white glass */
.button {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px;
  padding: 11px 22px; border-radius: 980px; border: 0;
  background: var(--pill); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
  color: var(--ink); font-size: 17px; line-height: 20px; font-weight: 400; letter-spacing: -.022em;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color .32s var(--ease);
}
.button:hover { background: var(--pill-hover); }
.button:active { background: var(--pill-down); }
.button-sm { min-height: 36px; padding: 8px 16px; font-size: 14px; line-height: 18px; letter-spacing: -.016em; }
.text-button {
  background: none; border: 0; padding: 0; cursor: pointer; color: var(--ink);
  font-size: inherit; text-decoration: underline; text-decoration-color: var(--hair); text-underline-offset: .2em;
}
.text-button:hover { text-decoration-color: var(--ink); }

/* ---------------- the global nav: 44px, the page's black behind it ---------------- */
.gn { position: relative; z-index: 30; height: 44px; }
.gn-inner {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  height: 100%; max-width: 1024px; margin: 0 auto; padding: 0 22px;
}
.gn-mark { display: flex; align-items: center; height: 44px; padding: 0 8px; margin-left: -8px; }
.gn-mark img { height: 22px; width: auto; }
.gn-list { display: flex; flex: 1; justify-content: space-between; margin: 0 24px; }
.gn-list a {
  display: flex; align-items: center; height: 44px; padding: 0 8px;
  font-size: 12px; line-height: 1; letter-spacing: -.01em; color: var(--ink-80); text-decoration: none;
  transition: color .32s var(--ease);
}
.gn-list a:hover { color: #fff; }
.gn-end { display: flex; align-items: center; }
.gn-icon {
  display: grid; place-items: center; width: 34px; height: 44px; padding: 0; border: 0; background: none;
  color: var(--ink-80); cursor: pointer; transition: color .32s var(--ease);
}
.gn-icon:hover { color: #fff; }
.gn-icon svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
.gn-menu { display: none; }
.gn-menu svg { width: 18px; height: 18px; }
.gn-menu path { transition: transform .32s var(--ease); transform-origin: 9px 9px; }

/* ---------------- the local nav: sticky, glass once it sticks ---------------- */
.ln { position: sticky; top: 0; z-index: 20; height: 52px; }
.ln::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--nav-glass); -webkit-backdrop-filter: saturate(1.8) blur(20px); backdrop-filter: saturate(1.8) blur(20px);
}
.ln-inner {
  position: relative; display: flex; align-items: center; gap: 24px; height: 100%;
  width: var(--text); margin: 0 auto;
}
.ln-title { margin-right: auto; font-size: 21px; line-height: 24px; font-weight: 600; letter-spacing: .011em; color: #fff; text-decoration: none; }
.ln-menu { display: flex; align-items: center; gap: 24px; }
.ln-link { position: relative; padding: 0; border: 0; background: none; font-size: 12px; line-height: 22px; letter-spacing: -.01em; color: var(--ink-80); text-decoration: none; cursor: pointer; transition: color .32s var(--ease); }
.ln-link:hover, .ln-link.current { color: #fff; }
.ln-chevron { display: none; }
.ln-button {
  display: inline-flex; align-items: center; min-height: 24px; padding: 3px 11px; border-radius: 980px;
  background: var(--pill); color: #fff; font-size: 12px; line-height: 16px; letter-spacing: -.01em;
  text-decoration: none; white-space: nowrap; transition: background-color .32s var(--ease);
}
.ln-button:hover { background: var(--pill-hover); }

/* ---------------- the ribbon: covers the local nav at the top, as Apple's does ---------------- */
.ribbon {
  position: relative; z-index: 21; margin-top: -52px; min-height: 52px;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-raised); padding: 16px 0;
}
.ribbon p { width: var(--text); text-align: center; font-size: 14px; line-height: 20px; letter-spacing: -.016em; color: var(--ink); }

/* ---------------- section headers: grey, start-aligned, as Apple's ---------------- */
.alt { background: var(--bg-alt); }
.section-header { display: flex; justify-content: space-between; align-items: baseline; gap: 28px; padding: 200px 0 40px; }
.section-header-headline { font-size: 56px; line-height: 60px; font-weight: 600; letter-spacing: -.005em; color: var(--ink-2); text-wrap: balance; }
.section-header-secondary { padding-top: 152px; }
.section-header-secondary .section-header-headline { font-size: 48px; line-height: 52px; letter-spacing: -.003em; max-width: 12em; }
.section-header-link { font-size: 21px; line-height: 25px; letter-spacing: .011em; white-space: nowrap; }
.scroller-track {
  display: flex; gap: 20px; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-behavior: smooth;
  padding-inline: calc((100% - var(--content)) / 2); scroll-padding-inline: calc((100% - var(--content)) / 2);
  scrollbar-width: none;
}
.scroller-track::-webkit-scrollbar { display: none; }
.scroller-track:focus-visible { outline-offset: -4px; border-radius: calc(var(--r) + 4px); }

.caption {
  position: absolute; z-index: 4; top: 0; left: 0; right: 0; padding: 39px 46px;
  text-align: center; font-size: 28px; line-height: 32px; font-weight: 600; letter-spacing: .007em; color: var(--ink);
  text-wrap: balance;
}
.caption-lede { display: block; }
[data-glow="sky"] .caption { color: rgba(255, 255, 255, .92); text-shadow: 0 1px 24px rgba(0, 0, 0, .28); }

/* the floating glass controls: Apple's 56px capsule and circle */
.glass {
  background: var(--glass); -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px);
  box-shadow: var(--glass-edge); border-radius: 32px;
}
.bleed { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
#cl-iphone::before { background: radial-gradient(60% 50% at 50% 70%, rgba(214, 130, 80, .26), transparent 75%); }

.scroller { position: relative; }
.scroller-foot { display: flex; align-items: center; justify-content: flex-end; gap: 16px; margin-top: 32px; }
.paddles { display: flex; gap: 18px; }
.paddle {
  display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%;
  background: var(--paddle); color: var(--ink-80); cursor: pointer; transition: opacity .1s linear, background-color .1s linear, color .1s linear;
}
.paddle:hover { color: #fff; background: rgb(66, 66, 69); }
.paddle[disabled] { opacity: .36; cursor: default; }
.paddle svg { width: 36px; height: 36px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------------- the themes: 80px headlines on black ---------------- */
.themes { background: var(--bg); }
.theme { position: relative; padding: 200px 0 0; }
.theme-headline {
  font-size: 80px; line-height: 84px; font-weight: 600; letter-spacing: -.015em; color: var(--ink);
  text-align: center; text-wrap: balance;
}
.theme-body {
  margin-top: 44px; max-width: 735px; margin-inline: auto; text-align: center;
  font-size: 21px; line-height: 29px; font-weight: 600; letter-spacing: .011em; color: var(--ink-2); text-wrap: pretty;
}
.theme-eyebrow { font-size: 17px; line-height: 21px; font-weight: 600; letter-spacing: -.022em; color: var(--ink-2); margin-bottom: 18px; }

.stat-label { font-size: 14px; line-height: 18px; font-weight: 600; letter-spacing: -.016em; color: var(--ink-2); }
.stat-figure { margin-top: 6px; font-size: 48px; line-height: 52px; font-weight: 600; letter-spacing: -.003em; color: var(--ink); font-variant-numeric: tabular-nums; }
.stat-figure.sm { font-size: 32px; line-height: 36px; letter-spacing: .004em; }
.stat-caption { margin-top: 10px; font-size: 17px; line-height: 25px; font-weight: 600; letter-spacing: -.022em; color: var(--ink-2); text-wrap: pretty; }
.stat-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.stat-row-3 { margin-top: 56px; }
.stat-lead .stat-figure { font-size: 56px; line-height: 60px; letter-spacing: -.005em; }
.stat-lead .stat-caption { font-size: 21px; line-height: 29px; letter-spacing: .011em; max-width: 30em; }
.segmented { display: flex; gap: 2px; margin-top: 36px; padding: 6px; border-radius: 32px; }
.segmented button {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  min-width: 108px; height: 48px; padding: 0 16px; border: 0; border-radius: 24px; background: transparent; cursor: pointer;
  transition: background-color .25s linear;
}
.segmented button:hover { background: rgba(255, 255, 255, .08); }
.segmented button[aria-checked="true"] { background: rgba(255, 255, 255, .16); }
.seg-time { font-size: 14px; line-height: 18px; font-weight: 600; letter-spacing: -.016em; color: var(--ink); font-variant-numeric: tabular-nums; }
.seg-what { font-size: 12px; line-height: 16px; letter-spacing: -.01em; color: rgba(255, 255, 255, .72); }
.segmented button[aria-checked="true"] .seg-what { color: rgba(255, 255, 255, .86); }

.scrub { margin-top: 44px; max-width: 460px; }
.scrub-label { display: block; font-variant-numeric: tabular-nums; }
.scrub-time { font-size: 21px; line-height: 25px; font-weight: 600; letter-spacing: .011em; color: var(--ink); }
.scrub-what { font-size: 17px; line-height: 25px; letter-spacing: -.022em; color: var(--ink-2); }
.scrub-range { -webkit-appearance: none; appearance: none; width: 100%; height: 32px; margin: 14px 0 0; background: transparent; cursor: pointer; }
.scrub-range::-webkit-slider-runnable-track { height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .22); }
.scrub-range::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; margin-top: -10px; border-radius: 50%; background: #f5f5f7; box-shadow: 0 2px 10px rgba(0, 0, 0, .45); }
.scrub-range::-moz-range-track { height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .22); }
.scrub-range::-moz-range-thumb { width: 24px; height: 24px; border: 0; border-radius: 50%; background: #f5f5f7; }
.scrub-range:focus-visible { outline-offset: 6px; }
.scrub-note { margin-top: 12px; font-size: 14px; line-height: 20px; letter-spacing: -.016em; color: var(--ink-2); }

/* THE FLAGSHIP: the Shadow tab, the app's most powerful room, as Apple sets its chip's chapter:
   a headline, the four scales in a row (building, neighbourhood, city, Earth), four stats, the
   day's slider, and the six things it can tell you */
.theme-eyebrow-center { text-align: center; }
.stat-row-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 96px; padding-top: 44px; }
.stat-row-4 .stat-label { font-size: 21px; line-height: 25px; letter-spacing: .011em; }
.stat-row-4 .stat-caption { font-size: 17px; line-height: 25px; }

/* imagery rises into place once, as it is scrolled to; the words never wait for it */
.js .reveal { opacity: 0; transform: translate3d(0, 48px, 0); transition: opacity .9s cubic-bezier(.2, .7, .2, 1), transform 1.2s cubic-bezier(.2, .7, .2, 1); }
.js .reveal.in { opacity: 1; transform: none; }

/* the floating pill that stays with its theme (Apple's all-access pass) */
.aap-rail { position: sticky; bottom: 32px; z-index: 6; display: flex; justify-content: center; margin-top: 120px; padding-bottom: 32px; pointer-events: none; }
.aap {
  pointer-events: auto; position: relative; display: inline-flex; align-items: center; height: 56px; max-width: min(510px, 87.5vw);
  padding: 0 62px 0 24px; border: 0; border-radius: 32px; cursor: pointer; text-decoration: none; overflow: hidden;
  background: var(--glass); -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px); box-shadow: var(--glass-edge);
  color: var(--ink); transition: background-color .25s linear, max-width .5s cubic-bezier(.33, 0, .2, 1), padding .5s cubic-bezier(.33, 0, .2, 1);
}
.aap:hover { background: rgba(80, 80, 83, .8); }
.aap-text { font-size: 17px; line-height: 21px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; transition: opacity .3s ease .15s; }
.aap-icon {
  position: absolute; right: 10px; top: 10px; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  background: rgba(245, 245, 247, .28); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
}
.aap-icon svg { width: 18px; height: 18px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.aap { transition: background-color .25s linear, max-width .5s cubic-bezier(.33, 0, .2, 1) .12s, padding .5s cubic-bezier(.33, 0, .2, 1) .12s, opacity .3s ease, transform .4s cubic-bezier(.2, .7, .2, 1); }
/* out of its theme the pill is gone; in it, it arrives as a circle and opens into the pill */
.js .aap-rail:not(.in) .aap { max-width: 56px; padding: 0 0 0 56px; opacity: 0; transform: scale(.6); pointer-events: none; transition-delay: 0s; }
.js .aap-rail:not(.in) .aap-text { opacity: 0; transition-delay: 0s; }

/* ---------------- the ask, under the visitor's own sky ---------------- */
/* the /v2 study's stippled dusk behind the last ask: the words stand in its deep upper half, the
   light pools at the line near the foot, and a short dark ground meets the index's black */
.launch { position: relative; overflow: hidden; padding: 168px 0 clamp(340px, 40vw, 500px); text-align: center; background: #07101f; isolation: isolate; }
.launch-sky { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; }
/* the sky yields under the print: a deep shade that follows the words, at any width, and is gone
   before the light at the line */
.launch-inner { position: relative; }
.launch-inner::before {
  content: ""; position: absolute; z-index: -1; inset: -96px -18% -120px; pointer-events: none;
  background: radial-gradient(closest-side, rgba(4, 10, 24, .64), rgba(4, 10, 24, .42) 55%, rgba(4, 10, 24, 0));
}
.launch-headline { font-size: 80px; line-height: 84px; font-weight: 600; letter-spacing: -.015em; color: rgba(255, 255, 255, .92); text-wrap: balance; }
.launch-lede { margin: 28px auto 0; max-width: 560px; font-size: 21px; line-height: 29px; font-weight: 600; letter-spacing: .011em; color: rgba(255, 255, 255, .8); text-wrap: balance; }
.launch-form { margin: 44px auto 0; max-width: 560px; }
.launch-form .launch-row { display: flex; align-items: flex-start; justify-content: center; gap: 12px; }
.launch-form .launch-field { flex: 1; display: flex; flex-direction: column; align-items: stretch; text-align: left; min-width: 0; }
.launch-form .launch-label { display: block; margin: 0 0 8px; font-size: 14px; line-height: 18px; font-weight: 600; letter-spacing: -.016em; color: rgba(255, 255, 255, .74); }
.launch-form .launch-row > .launch-go { margin-top: 26px; }
.launch-form .launch-hint { text-align: left; }
.launch-form .launch-box { position: relative; display: flex; }
.launch-form .chip-input, .field-input {
  width: 100%; min-width: 0; height: 52px; padding: 0 20px; border: 0; border-radius: 14px;
  background: rgba(255, 255, 255, .14); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18);
  color: var(--ink); font: inherit; font-size: 17px; letter-spacing: -.022em;
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
}
.launch-form .chip-input::placeholder, .field-input::placeholder { color: rgba(255, 255, 255, .56); }
.launch-form .chip-input:focus, .field-input:focus { outline: 2px solid var(--ink); outline-offset: 2px; }
.launch-form .chip-input[aria-invalid="true"] { box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .7); }
.launch-form .launch-go, .launch-form button[type="submit"] { min-height: 52px; padding: 0 24px; }
.launch-form .launch-go { display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 980px; background: var(--pill); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); color: var(--ink); font-size: 17px; cursor: pointer; white-space: nowrap; }
.launch-form .launch-go:hover { background: var(--pill-hover); }
.launch-form .launch-hint, .launch-form .launch-note, .launch-form .launch-trust, .launch-form .launch-state, .launch-form .launch-lead, .launch-form .launch-links {
  margin: 12px 0 0; font-size: 14px; line-height: 20px; letter-spacing: -.016em; color: rgba(255, 255, 255, .8);
}
.launch-form .launch-trust, .launch-form .launch-note { text-align: center; }
.launch-form .launch-state { color: rgba(255, 255, 255, .92); }
.launch-form .launch-lead strong { font-weight: 600; }
.launch-form a, .launch-form .launch-link { color: rgba(255, 255, 255, .92); background: none; border: 0; padding: 0; font: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: .18em; text-decoration-color: rgba(255, 255, 255, .4); }
.launch-form[aria-busy="true"] { opacity: .72; }
.launch-alt { margin-top: 28px; font-size: 17px; }
/* the app beside the ask: on a plain launch the phone rises from the section's foot, the app's own frame in
   Apple's bezel as /app and the home show it, its screen the page's own light (1 Oct 2026). It sinks into the
   page's black rather than stopping on a line, and the section keeps no ground under it. */
.launch-plain:has(.launch-phone) { padding-bottom: 0; }
.launch-phone { position: relative; width: 300px; height: 400px; margin: 96px auto 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent); mask-image: linear-gradient(180deg, #000 62%, transparent); }
.launch-phone .dev { position: relative; display: block; }
.launch-phone .dev-bezel { position: relative; z-index: 2; display: block; width: 100%; height: auto; pointer-events: none; }
.launch-phone .dev-screen { position: absolute; z-index: 1; left: 5.333%; top: 2.5%; width: 89.333%; height: 95%; max-width: none; border-radius: 16% / 7.36%;
  object-fit: cover; object-position: top center; background: #000; }
@media (max-width: 734px) { .launch-phone { width: 220px; height: 292px; margin-top: 64px; } }

/* ---------------- the index ---------------- */
.index { background: var(--bg); padding: 160px 0; }
.index-title { font-size: 48px; line-height: 52px; font-weight: 600; letter-spacing: -.003em; color: var(--ink-2); margin-bottom: 70px; }
/* the brand is its own wordmark, never the word set in type (the owner, 30 Sept: "not the real sol logo") */
.index-title img { display: block; height: 46px; width: auto; opacity: .54; }
.index-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 40px; }
.index-header { margin-bottom: 20px; font-size: 12px; line-height: 16px; letter-spacing: -.01em; color: var(--ink-56); }
.index-col ul { display: flex; flex-direction: column; gap: 12px; }
.index-col a { color: var(--ink); text-decoration: none; font-size: 14px; line-height: 20px; font-weight: 600; letter-spacing: -.016em; }
.index-col a:hover { text-decoration: underline; text-underline-offset: .18em; }
.index-col-main ul { gap: 6px; }
.index-col-main li a { font-size: 28px; line-height: 32px; letter-spacing: .007em; }
.index-more { margin-top: 36px; }

/* ---------------- the footer ---------------- */
.footer { background: var(--bg-raised); padding: 20px 0 28px; font-size: 12px; line-height: 16px; letter-spacing: -.01em; color: var(--ink-56); }
.footer p { padding: 6px 0; }
.footer p + p { margin-top: 14px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 4px 22px; margin-top: 22px; }
.footer-links a { color: var(--ink-80); text-decoration: none; padding: 4px 0; }
.footer-links a:hover { text-decoration: underline; }

/* ---------------- the overlays ---------------- */
.modal {
  position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  background: transparent; color: var(--ink); overflow-y: auto; overscroll-behavior: contain;
}
.modal::backdrop { background: rgba(0, 0, 0, .6); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
.modal[open] .modal-panel { animation: modal-in .45s cubic-bezier(.2, .7, .2, 1); }
@keyframes modal-in { from { opacity: 0; transform: translateY(28px) scale(.985); } to { opacity: 1; transform: none; } }
.modal-panel { position: relative; width: min(980px, 87.5%); margin: 80px auto; padding: 76px 76px 88px; border-radius: var(--r); background: var(--bg-raised); }
.modal-close {
  position: sticky; top: 16px; float: right; margin: -56px -56px 0 0; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%;
  background: var(--paddle); color: var(--ink-80); cursor: pointer; z-index: 2;
}
.modal-close:hover { color: #fff; background: rgb(66, 66, 69); }
.modal-close svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.modal-eyebrow { font-size: 17px; line-height: 21px; font-weight: 600; letter-spacing: -.022em; color: var(--ink-2); }
.modal-title { margin-top: 8px; font-size: 48px; line-height: 52px; font-weight: 600; letter-spacing: -.003em; color: var(--ink); text-wrap: balance; }
.modal-copy { margin-top: 28px; font-size: 21px; line-height: 29px; font-weight: 600; letter-spacing: .011em; color: var(--ink-2); text-wrap: pretty; }
.modal-links { display: flex; flex-wrap: wrap; gap: 12px 28px; margin-top: 36px; font-size: 17px; }

.modal-places .modal-panel { padding-bottom: 56px; }
.places-top { display: flex; gap: 12px; margin-top: 28px; }
.places-search { position: relative; flex: 1; display: flex; }
.places-search svg { position: absolute; left: 16px; top: 50%; width: 16px; height: 16px; transform: translateY(-50%); fill: none; stroke: var(--ink-56); stroke-width: 1.6; stroke-linecap: round; pointer-events: none; }
.places-search .field-input { height: 44px; padding-left: 42px; border-radius: 12px; background: rgba(255, 255, 255, .1); -webkit-backdrop-filter: none; backdrop-filter: none; }
.places-top .button { min-height: 44px; }
.places-status { min-height: 20px; margin-top: 14px; font-size: 14px; line-height: 20px; color: var(--ink-2); }
.places-group { margin-top: 20px; }
.places-group h3 { font-size: 12px; line-height: 16px; font-weight: 400; letter-spacing: -.01em; color: var(--ink-56); margin-bottom: 8px; }
.places-group ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 2px 8px; }
.places-group button {
  width: 100%; padding: 10px 12px; border: 0; border-radius: 12px; background: transparent; cursor: pointer; text-align: left;
  font-size: 17px; line-height: 21px; font-weight: 600; letter-spacing: -.022em; color: var(--ink); transition: background-color .15s linear;
}
.places-group button:hover { background: rgba(255, 255, 255, .08); }
.places-group button[aria-current="true"] { background: rgba(255, 255, 255, .16); }

@media (max-width: 1068px) {
  .gn-list { margin: 0 12px; }
  .section-header { padding-top: 140px; }
  .section-header-headline { font-size: 48px; line-height: 52px; }
  .caption { font-size: 24px; line-height: 28px; padding: 34px 40px; }
  .theme { padding-top: 160px; }
  .theme-headline, .launch-headline { font-size: 64px; line-height: 68px; letter-spacing: -.009em; }
  .theme-body { font-size: 19px; line-height: 27px; letter-spacing: .012em; }
  .stat-row-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; }
  .stat-row .stat-figure { font-size: 32px; line-height: 36px; letter-spacing: .004em; }
  .index-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 40px; }
  .modal-panel { padding: 64px 48px 72px; }
  .modal-close { margin: -40px -28px 0 0; }
}

/* ================= small: ≤734 ================= */
@media (max-width: 734px) {
  body { font-size: 17px; }
  .gn { height: 48px; }
  .gn-inner { padding: 0 16px; }
  .gn-mark { height: 48px; }
  .gn-icon { height: 48px; width: 40px; }
  .gn-menu { display: grid; }
  .gn-list {
    display: none; position: fixed; inset: 48px 0 0; z-index: 29; margin: 0; padding: 20px 48px 48px;
    flex-direction: column; justify-content: flex-start; gap: 4px; background: #000; overflow-y: auto;
  }
  .gn.open .gn-list { display: flex; animation: gn-in .32s var(--ease); }
  .gn-list a { height: auto; padding: 8px 0; font-size: 28px; line-height: 32px; font-weight: 600; letter-spacing: .007em; color: var(--ink); }

  .ln { height: 48px; }
  .ln-inner { gap: 12px; }
  .ln-title { font-size: 19px; line-height: 24px; letter-spacing: .012em; }
  .ln-chevron { display: grid; place-items: center; width: 28px; height: 32px; padding: 0; border: 0; background: none; color: var(--ink-80); cursor: pointer; }
  .ln-chevron svg { width: 12px; height: 8px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; transition: transform .32s var(--ease); }
  .ln.open .ln-chevron svg { transform: rotate(180deg); }
  .ln-menu {
    display: none; position: absolute; left: -7.2%; right: -7.2%; top: 48px; flex-direction: column; align-items: stretch; gap: 0;
    padding: 8px 7.2% 18px; background: rgba(22, 22, 23, .96); -webkit-backdrop-filter: saturate(1.8) blur(20px); backdrop-filter: saturate(1.8) blur(20px);
  }
  .ln.open .ln-menu { display: flex; }
  .ln-link { font-size: 14px; line-height: 18px; padding: 12px 0; }
  .ribbon { margin-top: -48px; min-height: 48px; }

  .section-header { padding: 100px 0 38px; flex-direction: column; align-items: flex-start; gap: 16px; }
  .section-header-headline, .section-header-secondary .section-header-headline { font-size: 32px; line-height: 36px; letter-spacing: .004em; }
  .section-header-secondary { padding-top: 60px; }
  .section-header-link { font-size: 17px; line-height: 21px; }
  .caption { font-size: 21px; line-height: 25px; letter-spacing: .011em; padding: 28px 24px; }

  .theme { padding-top: 120px; }
  .theme-headline, .launch-headline { font-size: 40px; line-height: 44px; letter-spacing: -.02em; }
  .theme-headline { text-align: left; }
  .theme-body { font-size: 19px; line-height: 27px; letter-spacing: .012em; text-align: left; margin-top: 28px; }
  .launch-lede { font-size: 19px; line-height: 27px; }
  .stat-figure { font-size: 32px; line-height: 36px; letter-spacing: .004em; }
  .stat-figure.sm { font-size: 24px; line-height: 28px; }
  .stat-lead .stat-figure { font-size: 40px; line-height: 44px; }
  .stat-lead .stat-caption { font-size: 17px; line-height: 25px; }
  .stat-row { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .segmented { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; max-width: 341px; border-radius: 28px; }
  .segmented button { min-width: 0; }
  .theme-eyebrow-center { text-align: left; }
  .stat-row-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 16px; margin-top: 64px; padding-top: 32px; }
  .stat-row-4 .stat-label { font-size: 17px; line-height: 21px; }
  .stat-row-4 .stat-caption { font-size: 14px; line-height: 20px; }
  .aap-rail { bottom: 24px; margin-top: 80px; padding-bottom: 24px; }
  .aap { height: 48px; padding: 0 56px 0 20px; }
  .aap-text { font-size: 14px; line-height: 16px; letter-spacing: -.01em; }
  .aap-icon { width: 32px; height: 32px; top: 8px; right: 8px; }
  .js .aap-rail:not(.in) .aap { max-width: 48px; padding: 0 0 0 48px; }
  .launch { padding: 112px 0 360px; }
  .launch-inner::before { inset: -80px -12% -110px; }
  .launch-form .launch-row { flex-direction: column; align-items: stretch; }
  .launch-form .launch-go, .launch-form .launch-row > .launch-go { width: 100%; margin-top: 0; }
  .index { padding: 96px 0; }
  .index-title { font-size: 32px; line-height: 36px; letter-spacing: .004em; margin-bottom: 38px; }
  .index-title img { height: 32px; }
  .index-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .index-col-main li a { font-size: 24px; line-height: 28px; }
  .modal-panel { width: 100%; min-height: 100%; margin: 0; border-radius: 0; padding: 72px 24px 56px; }
  .modal-close { position: fixed; top: 16px; right: 16px; float: none; margin: 0; }
  .modal-title { font-size: 32px; line-height: 36px; letter-spacing: .004em; }
  .modal-copy { font-size: 19px; line-height: 27px; letter-spacing: .012em; }
  .places-top { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  html:focus-within { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .scroller-track { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; }
}