/* Shared styles for the inner pages (the homepage carries its own, for the 3D drive). */
/* fonts: self-hosted variable Sora and Inter Tight (SIL Open Font License); latin-ext loads only when a page uses those characters */
@font-face { font-family: "Inter Tight"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("/assets/fonts/inter-tight-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter Tight"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("/assets/fonts/inter-tight-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Sora"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("/assets/fonts/sora-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Sora"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("/assets/fonts/sora-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
:root { --paper: #ebe6dc; --ink: #161512; --mute: #6f695f; --lede: #3a3630; --line: rgba(22, 21, 18, .12);
        --display: "Sora", system-ui, sans-serif; --sans: "Inter Tight", system-ui, sans-serif; --gutter: max(16px, 6vw); }
:root[data-theme="dark"] { --paper: #0b0d12; --ink: #ece6da; --mute: #8b8579; --lede: #c9c2b5; --line: rgba(236, 230, 218, .14); }
* { margin: 0; padding: 0; box-sizing: border-box; }
body { background: var(--paper); color: var(--ink); font: 17px/1.6 var(--sans); -webkit-font-smoothing: antialiased; transition: background-color .8s, color .8s; }
a { color: inherit; text-decoration: none; }
img, video { display: block; max-width: 100%; }
h1, h2, h3 { font-family: var(--display); font-weight: 250; letter-spacing: -.045em; line-height: 1.04; }
h1 em, h2 em, .foot-mark em { font-style: normal; font-weight: 700; letter-spacing: -.05em; }
.eyebrow { display: flex; align-items: center; gap: 12px; font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--mute); }

/* nav: no bar; once you scroll, content softens into a light blur under it (same as the homepage) */
.nav { position: fixed; z-index: 10; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; padding: 22px max(16px, 4vw); }
.nav::before { content: ""; position: absolute; z-index: -1; inset: 0 0 -32px; pointer-events: none; opacity: 0; transition: opacity .5s;
               background: linear-gradient(var(--veil), var(--veil)), linear-gradient(color-mix(in srgb, var(--paper) 50%, transparent), transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
               -webkit-mask-image: linear-gradient(#000 50%, transparent); mask-image: linear-gradient(#000 50%, transparent); }
.nav.scrolled::before { opacity: 1; }
.nav { --veil: rgb(255 255 255 / .2); }   /* a clean wash over the blur, so text passing under never looks muddy */
:root[data-theme="dark"] .nav { --veil: rgb(11 13 18 / .2); }
.nav svg { height: 25px; width: auto; display: block; fill: var(--ink); }
.nav ul { display: flex; align-items: center; gap: clamp(16px, 2.6vw, 40px); list-style: none; font-size: 14px; font-weight: 500; }
.nav ul a { position: relative; }
.nav ul a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .4s cubic-bezier(.2, .7, .2, 1); }
.nav ul a:hover::after, .nav ul a[aria-current]::after { transform: scaleX(1); transform-origin: left; }
.theme { display: flex; align-items: center; gap: 8px; padding: 5px 12px; border: 1px solid currentColor; border-radius: 999px; background: none; color: inherit; font: inherit; cursor: pointer; }
.theme i { width: 9px; height: 9px; border-radius: 50%; border: 1px solid currentColor; background: linear-gradient(90deg, currentColor 50%, transparent 50%); }

main { padding-top: 96px; }
.crumbs { padding: 18px var(--gutter) 0; font-size: 13px; color: var(--mute); }
.crumbs span { margin: 0 6px; }
.crumbs a:hover { color: var(--ink); }

/* product hero: answer first, the app moving beside it */
.p-hero { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(32px, 6vw, 96px); align-items: center; padding: clamp(32px, 6vw, 72px) var(--gutter) clamp(48px, 7vw, 96px); }
.p-hero .eyebrow img { width: 40px; height: 40px; border-radius: 10px; }
.p-hero h1 { margin-top: 20px; font-size: clamp(42px, 5.6vw, 92px); }
.p-hero h1 .name { display: block; font-size: .42em; font-weight: 600; letter-spacing: -.02em; color: var(--accent); margin-bottom: .2em; }
.answer { margin-top: 26px; max-width: 46ch; font-size: clamp(17px, 1.35vw, 20px); color: var(--lede); }
.cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.cta .primary, .cta .ghost { padding: 14px 24px; border-radius: 999px; font-weight: 600; font-size: 15px; border: 1.5px solid var(--ink); }
.cta .primary { background: var(--ink); color: var(--paper); }
.cta .primary.is-soon { background: transparent; color: var(--ink); border-style: dashed; }
.cta .ghost:hover, .cta a.primary:hover { opacity: .85; }
/* iPhone 17 Pro in CSS: 1206 x 2622 screen, thin black border, titanium band, Dynamic Island, side buttons.
   Size it by width or height only; everything inside is a percentage, so it stays sharp at any size. */
.iphone { --btn: #4a4a4e; position: relative; aspect-ratio: 1 / 2.113; border-radius: 16.5% / 7.8%; background: #050505;
          box-shadow: 0 0 0 1px #8d8d92, 0 0 0 2.5px #2a2a2d, 0 50px 90px -30px rgba(0, 0, 0, .55); }
.iphone .screen { position: absolute; inset: 1.23% 2.6%; overflow: hidden;   /* inset, not padding: padding % is measured against the parent, not the phone */
                border-radius: 14% / 6.45%; background: #000; }
.iphone .screen::after { content: ""; position: absolute; z-index: 1; left: 50%; top: 1.26%; width: 31.3%; aspect-ratio: 126 / 37; translate: -50% 0; border-radius: 99px; background: #000; }
.iphone video, .iphone img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.iphone img + img { opacity: 0; transition: opacity .9s ease; }
.iphone img.on { opacity: 1; }
.iphone::before, .iphone::after { content: ""; position: absolute; }
.iphone::before { left: -.9%; top: 20%; width: .9%; height: 13%; border-radius: 3px 0 0 3px; background: linear-gradient(var(--btn) 0 44%, transparent 0 56%, var(--btn) 0); }
.iphone::after { right: -.9%; top: 25%; width: .9%; height: 10%; border-radius: 0 3px 3px 0; background: var(--btn); }
/* landscape: the phone is turned so the island sits on the right, which is where the games' own recordings have it */
.iphone.landscape { aspect-ratio: 2.113 / 1; border-radius: 7.8% / 16.5%; }
.iphone.landscape .screen { inset: 2.6% 1.23%; border-radius: 6.45% / 14%; }
.iphone.landscape .screen::after { left: auto; right: 1.26%; top: 50%; width: auto; height: 31.3%; aspect-ratio: 37 / 126; translate: 0 -50%; }
.iphone.landscape::before { left: auto; right: 20%; top: -.9%; width: 13%; height: .9%; border-radius: 3px 3px 0 0; background: linear-gradient(90deg, var(--btn) 0 44%, transparent 0 56%, var(--btn) 0); }
.iphone.landscape::after { right: 25%; top: auto; bottom: -.9%; width: 10%; height: .9%; border-radius: 0 0 3px 3px; }
.p-hero .iphone { justify-self: center; width: min(100%, 320px); }
.p-hero .iphone.landscape { width: 100%; }
.product.landscape .p-hero { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
.product.landscape .panel-inner { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
.product.landscape .panel img { width: 100%; align-self: center; margin-bottom: 0; border-radius: 20px; }
.product.landscape .track figure { width: clamp(300px, 44vw, 640px); }

/* at a glance */
.facts { padding: 0 var(--gutter); }
.facts dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.facts div { padding: 22px 0; }
.facts dt { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--mute); }
.facts dd { margin-top: 6px; font-family: var(--display); font-size: 18px; font-weight: 500; letter-spacing: -.02em; }

/* pinned panels: each feature takes the screen, the next slides over it */
.panels { margin-top: clamp(64px, 8vw, 120px); }
.panel { position: relative; height: 100svh; display: grid; place-items: center; padding: 96px var(--gutter) 40px; }
.panel-inner { width: 100%; height: 100%; display: grid; grid-template-columns: 1fr minmax(0, 420px); gap: clamp(24px, 5vw, 80px); align-items: center;
               padding: clamp(28px, 4vw, 64px); border-radius: 36px; background: var(--panel); color: #141416; overflow: hidden; transform-origin: 50% 0; }
.panel-no { font: 600 13px/1 var(--sans); letter-spacing: .16em; opacity: .55; }
.panel h2 { margin-top: 18px; font-size: clamp(40px, 5.2vw, 88px); }
.panel p { margin-top: 20px; max-width: 34ch; font-size: clamp(17px, 1.4vw, 21px); opacity: .78; }
.panel img { align-self: end; justify-self: center; width: min(100%, 420px); margin-bottom: calc(-1 * clamp(28px, 4vw, 64px)); filter: drop-shadow(0 30px 50px rgba(0, 0, 0, .25)); }

/* swipe gallery */
.gallery { padding: clamp(80px, 10vw, 140px) 0 0; overflow: hidden; }
.gallery-head { display: flex; align-items: end; justify-content: space-between; gap: 24px; padding: 0 var(--gutter) 32px; }
.gallery h2, .faq h2, .more h2 { font-size: clamp(36px, 4.4vw, 72px); }
.gallery-nav { display: flex; gap: 10px; }
.gallery-nav button { width: 52px; height: 52px; border-radius: 50%; border: 1.5px solid var(--ink); background: none; color: var(--ink); font-size: 20px; cursor: pointer; }
.gallery-nav button:disabled { opacity: .3; cursor: default; }
.slider { padding: 0 var(--gutter); cursor: grab; touch-action: pan-y; outline: none; }
.slider:active { cursor: grabbing; }
.track { display: flex; gap: 20px; will-change: transform; }
.track figure { flex: none; width: clamp(220px, 24vw, 340px); border-radius: 24px; overflow: hidden; box-shadow: 0 20px 50px rgba(0, 0, 0, .12); }
.track img { width: 100%; pointer-events: none; user-select: none; }

/* answers */
.faq { padding: clamp(80px, 10vw, 140px) var(--gutter) 0; max-width: 1100px; }
.faq h2 { margin-bottom: 28px; }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-of-type { border-bottom: 1px solid var(--line); }
.faq summary { display: flex; justify-content: space-between; gap: 24px; padding: 24px 0; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font: 300 28px/1 var(--display); transition: transform .3s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq h3 { font-size: clamp(19px, 1.6vw, 24px); font-weight: 500; letter-spacing: -.02em; line-height: 1.3; }
.faq details p { padding: 0 0 26px; max-width: 64ch; color: var(--lede); }

.more { padding: clamp(80px, 10vw, 140px) var(--gutter) 0; }
.more ul { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin-top: 28px; }
.more a { display: flex; flex-direction: column; gap: 6px; padding: 26px; border: 1px solid var(--line); border-radius: 20px; transition: background .3s; }
.more a:hover { background: color-mix(in srgb, var(--ink) 5%, transparent); }
.more strong { font: 600 22px/1.1 var(--display); letter-spacing: -.03em; }
.more span { color: var(--mute); font-size: 15px; }

.foot { margin-top: clamp(100px, 12vw, 180px); padding: 56px var(--gutter) 40px; border-top: 1px solid var(--line); display: grid; gap: 28px; }
.foot-mark { font: 250 clamp(30px, 4vw, 60px)/1.05 var(--display); letter-spacing: -.045em; }
.foot ul { display: flex; flex-wrap: wrap; gap: 8px 28px; list-style: none; font-weight: 500; }
.foot-small { font-size: 14px; color: var(--mute); }

@media (max-width: 860px) {
  .p-hero { grid-template-columns: 1fr; }
  .panel-inner { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .panel img { width: min(70%, 300px); }
  .nav ul { gap: 14px; font-size: 13px; } .nav svg { height: 20px; } .theme span { display: none; } .theme { padding: 7px; }
}

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; } }

/* section pages (/apps/, /games/): answer first, then a bento that pulls back from the featured product */
.s-hero { padding: clamp(32px, 6vw, 72px) var(--gutter) clamp(40px, 5vw, 72px); }
.s-hero h1 { margin-top: 20px; font-size: clamp(46px, 6.4vw, 108px); max-width: 14ch; }
.bento-wrap { --p: 1; --c: 1fr; position: relative; height: 100svh; overflow: hidden; }
/* --p (frame) and --c (right-hand columns) are scrubbed from 0 by site.js: the lead tile starts full-bleed and the grid opens up around it.
   The frame is an inset on .bento, not padding on the wrap, because ScrollTrigger's pin locks the pinned element's padding. */
.bento { position: absolute; inset: calc(var(--p) * 96px) calc(var(--p) * var(--gutter)) calc(var(--p) * 28px); display: grid; grid-template-columns: 1fr 1fr var(--c) var(--c); grid-auto-rows: 1fr; gap: calc(var(--p) * 16px); }
.tile { container-type: size; position: relative; overflow: hidden; border-radius: calc(var(--p) * 28px); background: var(--tile); color: #fff8ef; isolation: isolate; }
.tile:first-child { grid-column: span 2; grid-row: span 2; }
.bento[data-n="3"] .tile:not(:first-child), .bento[data-n="2"] .tile:not(:first-child) { grid-column: span 2; }
.bento[data-n="2"] .tile:not(:first-child) { grid-row: span 2; }
.bento[data-n="4"] .tile:nth-child(2) { grid-column: span 2; }   /* four: one wide tile over two small ones */
.tile .iphone { position: absolute; z-index: -1; top: 50%; right: 7cqw; height: min(86cqh, 55cqw * 2.113); translate: 0 -50%; transition: transform .8s cubic-bezier(.2, .7, .2, 1); }
.tile .iphone.landscape { top: 7cqh; right: auto; left: 50%; height: auto; width: min(84cqw, 47cqh * 2.113); translate: -50% 0; }
@container (orientation: portrait) {   /* narrow tiles: phone on top, title underneath (not the lead, which changes shape mid-scroll) */
  .tile:not(:first-child) .iphone:not(.landscape) { top: 6cqh; right: auto; left: 50%; height: 56cqh; translate: -50% 0; }
}
.tile:first-child .iphone.landscape { top: 11cqh; width: min(84cqw, 56cqh * 2.113); }
.tile::after { content: ""; position: absolute; inset: 0; z-index: -2; background: linear-gradient(180deg, rgba(10, 9, 8, 0) 45%, rgba(10, 9, 8, .72)); }
.tile a { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; padding: clamp(20px, 2.4vw, 36px); }
.tile .kind { font: 600 12px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; opacity: .8; }
.tile strong { font: 650 clamp(24px, 2.6vw, 44px)/1 var(--display); letter-spacing: -.04em; }
.tile:first-child strong { font-size: clamp(36px, 4.4vw, 76px); }
.tile span.line { max-width: 26ch; font-size: 15px; opacity: .85; }
.tile:hover .iphone { transform: translateY(-8px); }
.index { padding: clamp(80px, 10vw, 140px) var(--gutter) 0; }
.index h2 { font-size: clamp(36px, 4.4vw, 72px); margin-bottom: 28px; }
.index ol { list-style: none; border-top: 1px solid var(--line); }
.index li a { display: grid; grid-template-columns: 64px 1fr auto; gap: 24px; align-items: center; padding: 22px 0; border-bottom: 1px solid var(--line); }
.index li img { width: 64px; height: 64px; border-radius: 16px; }
.index li strong { display: block; font: 600 clamp(20px, 1.8vw, 28px)/1.15 var(--display); letter-spacing: -.03em; }
.index li .meta { color: var(--mute); font-size: 15px; }
.index li .go { font-size: 22px; transition: transform .3s; }
.index li a:hover .go { transform: translateX(6px); }
@media (max-width: 860px) {
  .bento-wrap { height: auto; padding: 0 var(--gutter); } .bento { position: static; }
  .bento { display: flex; flex-direction: column; } .tile { height: 92vw; }   /* flex sidesteps the desktop span rules */
  .index li a { grid-template-columns: 48px 1fr auto; } .index li img { width: 48px; height: 48px; }
}

/* about: how the studio works, a marker travelling the path as you scroll (site.js); without JS or motion it is a plain list */
.route { position: relative; padding: 0 var(--gutter); margin-top: clamp(24px, 4vw, 56px); }
.route > svg { position: absolute; top: 0; left: 50%; width: 240px; height: 100%; translate: -50% 0; overflow: visible; }
.route > svg path { fill: none; stroke: var(--ink); stroke-width: 1.5; opacity: .3; }
.route .dot { position: absolute; top: 0; left: 0; width: 18px; height: 18px; }
.route .dot i { position: absolute; inset: 0; border-radius: 50%; background: #ff6b21; box-shadow: 0 0 0 7px color-mix(in srgb, #ff6b21 22%, transparent); }
.route .dot svg { position: absolute; left: 50%; top: 50%; width: 32px; height: auto; aspect-ratio: 116 / 109; translate: -50% -50%; overflow: visible; fill: #ff6b21; fill-rule: evenodd; opacity: 0; }
.route ol { list-style: none; }
.stop { min-height: 58vh; width: calc(50% - 150px); display: flex; flex-direction: column; justify-content: center; transition: opacity .6s; }
.stop:nth-child(odd) { text-align: right; align-items: flex-end; }
.stop:nth-child(even) { margin-left: auto; }
.route.live .stop { opacity: .22; }
.route.live .stop.on { opacity: 1; }
.stop .no { font: 600 13px/1 var(--sans); letter-spacing: .16em; color: var(--mute); }
.stop h2 { margin-top: 14px; font-size: clamp(34px, 4vw, 64px); }
.stop p { margin-top: 16px; max-width: 40ch; color: var(--lede); }
.more img { width: 48px; height: 48px; border-radius: 12px; margin-bottom: 10px; }
.band { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; margin: clamp(80px, 10vw, 140px) var(--gutter) 0;
        padding: clamp(36px, 5vw, 72px); border-radius: 36px; background: var(--ink); color: var(--paper); }
.band h2 { font-size: clamp(32px, 4vw, 64px); }
.band a { padding: 16px 28px; border-radius: 999px; background: var(--paper); color: var(--ink); font-weight: 600; }

/* contact: a brief that paints a splash screen on the phone as you fill it in (site.js) */
.brief-wrap { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(32px, 6vw, 96px); align-items: start; padding: 0 var(--gutter); }
.brief fieldset { border: 0; padding: 30px 0; box-shadow: inset 0 1px 0 var(--line); }
.brief legend { float: left; width: 100%; margin-bottom: 18px; font: 400 clamp(22px, 2vw, 30px)/1.15 var(--display); letter-spacing: -.03em; }
.chips { clear: both; display: flex; flex-wrap: wrap; gap: 10px; }
.chip { position: relative; }
.chip input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.chip span { display: inline-block; padding: 12px 20px; border: 1.5px solid var(--line); border-radius: 999px; font-size: 15px; font-weight: 500; transition: background .25s, color .25s, border-color .25s; }
.chip:hover span { border-color: var(--ink); }
.chip input:checked + span { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.chip input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 3px; }
.chip.swatch span, .chip.swatch input:checked + span { width: 46px; height: 46px; padding: 0; border-radius: 50%; background: var(--s); border: 0; }
.chip.swatch input:checked + span { outline: 2px solid var(--ink); outline-offset: 4px; }
.field { clear: both; display: grid; gap: 6px; margin-top: 14px; }
.field label { font-size: 14px; color: var(--mute); }
.field input, .field textarea { width: 100%; padding: 14px 16px; border: 1.5px solid var(--line); border-radius: 14px; background: transparent; color: inherit; font: inherit; resize: vertical; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--ink); }
.two { clear: both; display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.cta button { font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }
.cta .ghost { background: none; color: inherit; }
.brief .note { margin-top: 18px; font-size: 14px; color: var(--mute); }
.preview-phone { position: sticky; top: 120px; display: grid; justify-items: center; gap: 18px; text-align: center; font-size: 14px; color: var(--mute); }
.preview-phone .iphone { width: min(100%, 300px); }
.splash { --c: #ff6b21; position: absolute; inset: 0; container-type: inline-size; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
          padding: 12%;   /* % and px here: cq units on the container itself would measure the page, not the phone */ text-align: center; color: #fff; background: radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, #fff 18%, var(--c)), var(--c)); transition: background .6s; }
.splash .icon { display: grid; place-items: center; width: 30cqw; aspect-ratio: 1; border-radius: 23%; background: #fff; color: var(--c); font: 700 15cqw/1 var(--display); box-shadow: 0 6cqw 12cqw -6cqw rgba(0, 0, 0, .35); }
.splash strong { margin-top: 3cqw; font: 650 11cqw/1.05 var(--display); letter-spacing: -.04em; overflow-wrap: anywhere; }
.splash p { font-size: 5.4cqw; line-height: 1.35; opacity: .85; }
.splash small { position: absolute; bottom: 7cqw; font-size: 3.4cqw; letter-spacing: .08em; text-transform: uppercase; opacity: .7; }
@media (max-width: 860px) {
  .route > svg, .route .dot { display: none; }
  .stop, .stop:nth-child(odd) { width: auto; min-height: 0; padding: 28px 0; text-align: left; align-items: flex-start; }
  .route.live .stop { opacity: 1; }
  .brief-wrap { grid-template-columns: 1fr; }
  .preview-phone { position: static; order: -1; }
  .preview-phone .iphone { width: 210px; }
  .two { grid-template-columns: 1fr; }
}

/* legal pages: one readable column */
.updated { margin-top: 18px; font-size: 14px; color: var(--mute); }
.prose { max-width: 760px; padding: 0 var(--gutter); }
.prose h2 { margin: 56px 0 14px; font-size: clamp(26px, 2.4vw, 34px); }
.prose h3 { margin: 32px 0 10px; font: 600 19px/1.3 var(--sans); letter-spacing: -.01em; }
.prose p, .prose ul { margin-top: 14px; color: var(--lede); }
.prose ul { padding-left: 22px; }
.prose li + li { margin-top: 8px; }
.prose a, .answer a { text-decoration: underline; text-underline-offset: 3px; }
.prose strong { color: var(--ink); font-weight: 600; }
.prose table { width: 100%; margin-top: 18px; border-collapse: collapse; font-size: 15px; }
.prose th, .prose td { padding: 12px 10px 12px 0; border-top: 1px solid var(--line); text-align: left; vertical-align: top; color: var(--lede); }
.prose th { color: var(--ink); font-weight: 600; }