/* Inner pages, in the homepage's language: the header sits on the day sky, the page dusks to night as you scroll
   (inner.js), and content reads on night glass with light ink. Light glass is kept for the one action on a page,
   the beta sign-up. Loaded after site.css and pages.css. */

/* smooth scrolling is done in JS (Lenis); a CSS smooth scroll on top of it fights it every frame */
html.lenis, html.lenis body { height: auto; }
html.lenis { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

/* ---------------------------------------------------------------- night tokens for everything below the header */
.inner .page > :not(.page-h):not(.join-mini):not(.ab-hero),
.inner .page .sub-h ~ * { --ink: #F4F6FB; --ink-2: rgba(226, 234, 250, .8); --ink-3: rgba(226, 234, 250, .52); --rule: rgba(178, 200, 240, .16); --accent: #A9C4F4; color: var(--ink); }
.inner .slab:not(.join-card) { background: rgba(12, 24, 54, .74); border-color: rgba(178, 200, 240, .2); -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: inset 0 0 0 1px rgba(178, 200, 240, .2), 0 40px 90px -40px rgba(2, 8, 30, .7); }
.inner .join-card { --ink: #0E0F12; --ink-2: rgba(14, 15, 18, .62); --ink-3: rgba(14, 15, 18, .42); --rule: rgba(14, 15, 18, .1); color: var(--ink); }

/* ---------------------------------------------------------------- headers: plain labels, bigger type, no shade box */
.inner .page-h::before, .inner .ab-words::before { display: none; }
.inner .page-h { text-align: left; max-width: 1080px; }
.inner .page-h .eyebrow, .inner .ab-words .eyebrow { font-family: var(--sans); font-size: 16px; font-weight: 500; letter-spacing: -.01em; text-transform: none; color: #fff; }
.inner .page-h h1 { font-size: clamp(52px, 7.4vw, 124px); letter-spacing: -.055em; line-height: .95; max-width: 11em; text-shadow: 0 0 2px rgba(28, 58, 140, .3), 0 4px 50px rgba(28, 58, 140, .4); }
.inner .page-h .lede { margin-left: 0; max-width: 32em; font-size: clamp(18px, 1.5vw, 21px); text-shadow: 0 1px 14px rgba(28, 58, 140, .5); }
.inner .sub-h { text-align: left; }
.inner .sub-h h2 { font-size: clamp(38px, 5vw, 76px); letter-spacing: -.05em; }
.inner .page { padding-top: clamp(150px, 24vh, 240px); }
.inner .page > * { max-width: 1080px; margin-left: auto; margin-right: auto; }

/* ---------------------------------------------------------------- documents on night glass */
.inner .prose { max-width: 1080px; padding: clamp(28px, 5vw, 72px) clamp(22px, 6vw, 96px); }
.inner .prose > p:first-child { color: var(--ink); }
.inner .prose ul li::before { background: var(--glacier-500); }
.inner .prose code { background: rgba(178, 200, 240, .12); color: var(--ink); }
.inner .prose a { text-decoration-color: rgba(169, 196, 244, .45); }
.inner .prose .pill-ink { background: #fff; color: var(--ground, #05060a); }
.inner .prose .pill-line { color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .4); }
@media (min-width: 1240px) {
  .inner .doc:has(.toc:not(:empty)) { grid-template-columns: minmax(0, 1fr) minmax(0, 860px) minmax(0, 1fr); }
  .inner .toc:not(:empty) { background: rgba(12, 24, 54, .74); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: inset 0 0 0 1px rgba(178, 200, 240, .2); }
}
.inner .toc-h { font-family: var(--sans); font-size: 13px; letter-spacing: 0; text-transform: none; color: var(--ink-3); }
.inner .toc a:hover { background: rgba(178, 200, 240, .1); }

/* ---------------------------------------------------------------- pricing */
.inner .plans-full { max-width: 1180px; gap: 14px; align-items: stretch; }
.inner .plan { padding: clamp(24px, 2.6vw, 34px); border-radius: 30px; }
.inner .plan h2 { font-size: 17px; letter-spacing: -.01em; display: flex; align-items: center; gap: 10px; }
.inner .plan .amt { font-size: clamp(52px, 5vw, 72px); font-weight: 500; letter-spacing: -.055em; line-height: 1; margin-top: 18px; }
.inner .plan .amt small { display: block; margin-top: 10px; font-size: 14px; letter-spacing: 0; color: var(--ink-3); font-weight: 400; }
.inner .plan .for { margin-top: 14px; font-size: 16px; color: var(--ink-2); min-height: 2.8em; }
.inner .plan li { font-size: 15px; color: var(--ink-2); border-color: var(--rule); }
.inner .plan li.head { font-family: var(--sans); font-size: 14px; letter-spacing: 0; text-transform: none; color: var(--ink); }
.inner .plan li.later { color: var(--ink-3); }
.inner .plan li.later .mono { font-size: 11px; color: var(--glacier-300); box-shadow: inset 0 0 0 1px rgba(169, 196, 244, .35); }
/* Pro is made of the notch's own material: black, with a glacier light from the top */
.inner .plan-pro { position: relative; isolation: isolate; background: #000; color: #F4F6FB; border: 0; overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), 0 60px 110px -36px rgba(6, 16, 56, .8), 0 0 0 1px rgba(143, 178, 245, .25); }
.inner .plan-pro::before { content: ""; position: absolute; inset: -40% -20% auto; height: 90%; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(143, 178, 245, .26), rgba(143, 178, 245, 0)); }
.inner .plan-pro .tag { font-size: 11px; padding: 3px 9px; border-radius: 99px; background: rgba(143, 178, 245, .16); color: var(--glacier-300); letter-spacing: .04em; text-transform: none; }
.inner .plan .pill { width: 100%; justify-content: center; height: 46px; margin-top: auto; }
.inner .plan { display: flex; flex-direction: column; }
.inner .plan ul { flex: 1; }
.inner .plan .pill-line { color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .4); }
.inner .pay-note { max-width: 1180px; }

/* ---------------------------------------------------------------- questions */
.inner .faq summary { color: var(--ink); }
.inner .faq summary::after { filter: invert(1); }
.inner .faq details p { color: var(--ink-2); }
.inner .faq { max-width: 1080px; }

/* ---------------------------------------------------------------- sign-up */
.inner .join-mini h2 { font-size: clamp(30px, 3.2vw, 44px); letter-spacing: -.04em; }

/* ---------------------------------------------------------------- about */
.inner .ab-hero { text-align: center; }
.inner .ab-words h1 { font-size: clamp(52px, 7vw, 116px); letter-spacing: -.055em; line-height: .96; text-shadow: 0 0 2px rgba(28, 58, 140, .3), 0 4px 50px rgba(28, 58, 140, .4); }
.inner .letter, .inner .hello-list { max-width: 1080px; }
.inner .by-role, .inner .chap-n, .inner .hl-k, .inner .rule-n { font-family: var(--sans); font-size: 14px; letter-spacing: -.005em; text-transform: none; font-weight: 500; }
.inner .chap-n { font-family: var(--mono); font-size: 12px; }
.inner .hl:hover { background-color: rgba(178, 200, 240, .08); }
.inner .hl:focus-visible { outline-color: var(--glacier-500); }
.inner .by-links .pill-ink { background: #fff; color: #05060a; }
.inner .by-links .pill-line { color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .4); }

/* ---------------------------------------------------------------- phones */
@media (max-width: 760px) {
  .inner .page { padding-top: 130px; }
  .inner .page-h h1 { font-size: 52px; }
  .inner .plan .for { min-height: 0; }
}
.inner .pill-white { color: #0E0F12; }
.inner .hl { grid-template-columns: 96px minmax(0, 1fr) auto 22px; }
.inner .hl-v { font-size: clamp(24px, 2.9vw, 42px); overflow-wrap: normal; word-break: normal; }
@media (max-width: 860px) { .inner .hl { grid-template-columns: minmax(0, 1fr) 22px; } .inner .hl-v { font-size: clamp(22px, 6.4vw, 30px); overflow-wrap: anywhere; } }

/* ================================================================ DOCUMENTS AND HELP
   Privacy, Terms, Support, Known issues, Uninstall and Download (main.docs). One system for all of them: the title
   on the day sky, then one sheet of night glass with a two-column grid inside it. The left column is marginalia
   (the contents on the legal pages, a plain label beside each part of a help page); the right column holds the text at
   a reading measure. The sheet is a tinted fill, never a backdrop blur, because the sky under it redraws every frame,
   and it is opaque enough that the clouds never move behind a sentence you are reading. */
.docs { --rail: 208px; --gap: clamp(40px, 5.4vw, 80px); --measure: 39em; }

/* the title: a sibling switcher where the duplicate eyebrow used to be, then the headline, then one line on the sky */
.docs .page-h h1 { margin-top: 28px; }
.docs .page-h .lede { max-width: 27em; margin-top: 28px; font-size: clamp(19px, 1.75vw, 24px); line-height: 1.42; letter-spacing: -.018em; text-wrap: pretty; }
.docs .page-h .lede-big { max-width: 21em; font-size: clamp(22px, 2.45vw, 34px); line-height: 1.26; letter-spacing: -.028em; text-wrap: balance; }
.sibs { display: inline-flex; gap: 2px; padding: 4px; border-radius: 999px; background: rgba(16, 38, 104, .3); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28); text-shadow: none; }
.sibs a { position: relative; display: inline-flex; align-items: center; height: 34px; padding: 0 16px; border-radius: 999px; color: #fff; font-size: 14.5px; font-weight: 500; letter-spacing: -.01em;
  text-decoration: none; white-space: nowrap; transition: background-color var(--quick) var(--enter), color var(--quick) var(--enter); }
.sibs a::after { content: ""; position: absolute; inset: -5px -1px; }              /* a 44px target around a 34px pill */
.sibs a:hover { background: rgba(255, 255, 255, .16); }
.sibs a[aria-current] { background: #fff; color: var(--ink); }
.sibs a:focus-visible { outline-offset: 3px; }

/* the sheet: night glass, and the night ink for everything on it */
.docs .sheet { position: relative; margin-top: clamp(52px, 8vh, 92px); padding: clamp(30px, 5.4vw, 76px) clamp(22px, 5.4vw, 76px); border-radius: 34px;
  background: rgba(8, 20, 52, .86); box-shadow: inset 0 0 0 1px rgba(178, 200, 240, .16), inset 0 1px 0 rgba(210, 225, 250, .1), 0 60px 120px -50px rgba(2, 8, 30, .75); }
.docs .sheet > * { --ink: #F4F6FB; --ink-2: rgba(230, 237, 251, .82); --ink-3: rgba(214, 226, 250, .56); --rule: rgba(178, 200, 240, .15); }
.docs .sheet[data-rv] { filter: none; transform: translateY(36px); }               /* rise and settle; a page of text is never blurred */
.docs .sheet[data-rv].in { transform: none; transition-duration: 1100ms; }
/* links inside running text: underlined in a glacier hairline that firms up on hover */
.docs :is(.read, .part-v) :is(p, li) > a:not(.mail-v), .docs .sheet-end > a { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em;
  text-decoration-color: rgba(178, 200, 240, .5); transition: text-decoration-color var(--quick); }
.docs :is(.read, .part-v) :is(p, li) > a:not(.mail-v):hover, .docs .sheet-end > a:hover { text-decoration-color: currentColor; }
.docs .sheet code, .docs .sheet .file { font-family: var(--mono); font-size: .86em; letter-spacing: 0; padding: 2px 6px; border-radius: 6px; background: rgba(178, 200, 240, .12); color: var(--ink); overflow-wrap: anywhere; }

/* ---------------------------------------------------------------- legal: contents beside the text */
.docs .legal { display: grid; grid-template-columns: var(--rail) minmax(0, 1fr); column-gap: var(--gap); align-items: start; }
.rail { position: sticky; top: 108px; grid-column: 1; }
.rail-h { margin-bottom: 14px; font-size: 14px; font-weight: 500; letter-spacing: -.005em; line-height: 1.4; color: var(--ink-3); }
.rail ol { list-style: none; margin: 0; padding: 0; box-shadow: inset 1px 0 0 var(--rule); }
.rail a { position: relative; display: block; padding: 7px 0 7px 18px; font-size: 14.5px; line-height: 1.35; letter-spacing: -.008em; color: rgba(222, 232, 250, .66); text-decoration: none; transition: color var(--quick); }
.rail a::before { content: ""; position: absolute; left: 0; top: 5px; bottom: 5px; width: 2px; border-radius: 1px; background: var(--glacier-300); opacity: 0; transform: scaleY(.3);
  transition: opacity var(--ui) var(--enter), transform var(--ui) var(--enter); }
.rail a:hover, .rail a[aria-current] { color: var(--ink); }
.rail a[aria-current]::before { opacity: 1; transform: none; }
.rail a:focus-visible { outline-offset: -2px; }
.jump { display: none; }

.read { grid-column: 2; min-width: 0; max-width: var(--measure); }
.read section { position: relative; scroll-margin-top: 92px; }
.read section + section { margin-top: clamp(44px, 5vw, 60px); padding-top: clamp(40px, 4.6vw, 56px); border-top: 1px solid var(--rule); }
.read h2 { font-size: clamp(24px, 2.2vw, 30px); font-weight: 500; letter-spacing: -.034em; line-height: 1.16; color: var(--ink); text-wrap: balance; margin: 0 0 18px; }
.read p, .read li { font-size: 18px; line-height: 1.72; letter-spacing: -.007em; color: var(--ink-2); text-wrap: pretty; }
.read p + p, .read ul + p { margin-top: 1em; }
.read ul { list-style: none; margin: 18px 0 0; padding: 0; }
.read ul + p { margin-top: 22px; }
.read ul li { position: relative; padding: 11px 0 11px 26px; border-top: 1px solid var(--rule); }
.read ul li:last-child { border-bottom: 1px solid var(--rule); }
.read ul li::before { content: ""; position: absolute; left: 5px; top: calc(11px + .86em - 2.5px); width: 5px; height: 5px; border-radius: 50%; background: var(--glacier-500); }
/* a permalink for each section, in the gutter beside its heading; shown on hover or keyboard focus */
.read .anchor { position: absolute; left: -1.25em; top: 0; width: 1.1em; font-size: clamp(24px, 2.2vw, 30px); line-height: 1.16; font-weight: 400; text-align: center;
  color: var(--ink-3); text-decoration: none !important; opacity: 0; transition: opacity var(--quick), color var(--quick); }
.read section + section > .anchor { top: clamp(40px, 4.6vw, 56px); }
.read section:hover > .anchor, .read .anchor:focus-visible { opacity: 1; }
.read .anchor:hover { color: var(--glacier-300); }
@media (hover: none) { .read .anchor { display: none; } }

/* ---------------------------------------------------------------- help: a label beside each part */
.part { display: grid; grid-template-columns: var(--rail) minmax(0, 1fr); column-gap: var(--gap); padding: clamp(30px, 3.8vw, 48px) 0; border-top: 1px solid var(--rule); }
.part:first-child { padding-top: 0; border-top: 0; }
.part:last-child { padding-bottom: 0; }
.part-k { margin: 0; padding-top: 3px; font-size: 16.5px; font-weight: 500; letter-spacing: -.014em; line-height: 1.4; color: var(--ink); }
.part-v { min-width: 0; max-width: var(--measure); }
.part-v p, .part-v li { font-size: 18px; line-height: 1.66; letter-spacing: -.007em; color: var(--ink-2); text-wrap: pretty; }
.part-v p + p { margin-top: 1em; }
.part-v .first { color: var(--ink); }
.part-v .big { font-size: clamp(21px, 2vw, 27px); line-height: 1.42; letter-spacing: -.024em; text-wrap: balance; }
.part-k .state { color: var(--ink); }
.sheet-end { padding-top: clamp(26px, 3.2vw, 40px); border-top: 1px solid var(--rule); font-size: 16px; line-height: 1.6; color: var(--ink-3); }
.docs .sheet .sheet-end a { color: var(--ink-2); }

/* a status line at the top of a sheet: one small light, like the notch's own state dots, in glacier */
.state { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 500; color: var(--ink-2); }
.state::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--glacier-300); box-shadow: 0 0 0 4px rgba(178, 200, 240, .14); }

/* a simple list with hairlines, for things that are not a sequence */
.ticks { list-style: none; margin: 0; padding: 0; }
.ticks li { position: relative; padding: 11px 0 11px 30px; border-top: 1px solid var(--rule); }
.ticks li:first-child { border-top: 0; padding-top: 0; }
.ticks li:last-child { padding-bottom: 0; }
.ticks li::before { content: ""; position: absolute; left: 3px; top: calc(11px + .83em - 6px); width: 12px; height: 7px; border: solid var(--glacier-300); border-width: 0 0 1.6px 1.6px; transform: rotate(-45deg); }
.ticks li:first-child::before { top: calc(.83em - 6px); }

/* steps that really are a sequence: numbered, joined by a thread */
.seq { list-style: none; margin: 0; padding: 0; counter-reset: st; }
.seq > li { position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 20px; padding-bottom: 26px; counter-increment: st; }
.seq > li:last-child { padding-bottom: 0; }
.seq > li::before { content: counter(st); display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; font-size: 14.5px; font-weight: 500; color: var(--ink);
  box-shadow: inset 0 0 0 1px rgba(178, 200, 240, .36); background: rgba(8, 20, 52, 1); position: relative; z-index: 1; }
.seq > li:not(:last-child)::after { content: ""; position: absolute; left: 16.5px; top: 40px; bottom: 6px; width: 1px; background: linear-gradient(rgba(178, 200, 240, .32), rgba(178, 200, 240, .12)); }
.seq > li > div { padding-top: 3px; min-width: 0; }
.seq p { font-size: 18px; line-height: 1.6; color: var(--ink); text-wrap: pretty; }
.seq .if { color: var(--ink-2); }
.seq .hint { margin-top: 10px; font-size: 15px; line-height: 1.5; color: var(--ink-3); }

/* a path or command, on the notch's own black, with a copy button when script is on */
.cmd { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 8px 8px 8px 18px; border-radius: 14px; background: #000;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), 0 18px 40px -22px rgba(0, 0, 0, .8); }
.docs .cmd code { flex: 1; border-radius: 0; min-width: 0; padding: 8px 0; font-family: var(--mono); font-size: 14.5px; line-height: 1.5; color: var(--glacier-100); background: none; overflow-wrap: anywhere; }
.copy { flex: none; display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px; border: 0; border-radius: 10px; background: rgba(255, 255, 255, .09); color: #fff;
  font-size: 13.5px; font-weight: 500; letter-spacing: -.005em; transition: background-color var(--quick), color var(--quick); }
.copy svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.copy:hover { background: rgba(255, 255, 255, .16); }
.copy[data-done] { color: var(--glacier-300); }
.copy .ok, .copy[data-done] .go { display: none; } .copy[data-done] span.ok { display: inline; } .copy[data-done] svg.ok { display: block; }
.copy:focus-visible { outline-color: var(--glacier-300); }

/* a calm aside for what a page cannot do on its own */
.note { padding: clamp(20px, 2.4vw, 28px) clamp(20px, 2.6vw, 30px); border-radius: 20px; background: rgba(178, 200, 240, .07); box-shadow: inset 0 0 0 1px var(--rule); }
.note p { font-size: 16.5px !important; line-height: 1.62 !important; }

/* ---------------------------------------------------------------- support: the address is the page */
.mail-v { display: inline-block; margin-top: 10px; font-size: clamp(27px, 3.9vw, 54px); font-weight: 500; letter-spacing: -.045em; line-height: 1.08; color: var(--ink) !important;
  text-decoration: none !important; overflow-wrap: anywhere; background: linear-gradient(var(--glacier-300), var(--glacier-300)) 0 100% / 0 1.5px no-repeat; padding-bottom: 6px;
  transition: background-size 600ms var(--enter); }
.mail-v:hover { background-size: 100% 1.5px; }
.mail-act { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.mail-act .pill { height: 44px; padding: 0 20px; }
.mail-act .copy { height: 44px; padding: 0 18px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .24); background: none; font-size: 14.5px; }
.mail-act .copy:hover { background: rgba(255, 255, 255, .08); }

/* ---------------------------------------------------------------- known issues: one line per issue, its area beside it */
.issues { list-style: none; margin: 0; padding: 0; }
.issues .part-k { color: var(--ink); font-size: 17px; letter-spacing: -.015em; padding-top: 2px; }
.issues .part { padding: clamp(24px, 2.8vw, 34px) 0; }
.issues .part:first-child { border-top: 1px solid var(--rule); }
.issues .part:last-child { padding-bottom: clamp(24px, 2.8vw, 34px); border-bottom: 1px solid var(--rule); }
.sheet > .state { margin-bottom: clamp(22px, 2.6vw, 30px); }
.issues + .sheet-end { margin-top: 0; border-top: 0; }

/* ---------------------------------------------------------------- download: the one action sits on the sky */
.get { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 22px; margin-top: 40px; }
.get-btn { display: inline-flex; align-items: center; gap: 14px; height: 64px; padding: 0 30px 0 24px; border-radius: 999px; background: #fff; color: var(--ink); text-decoration: none;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 24px 60px -18px rgba(14, 34, 104, .62), 0 6px 18px -8px rgba(14, 34, 104, .4); text-shadow: none;
  transition: transform var(--quick) var(--enter), box-shadow var(--ui) var(--enter); }
.get-btn:hover { box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 30px 70px -18px rgba(14, 34, 104, .7), 0 8px 22px -8px rgba(14, 34, 104, .45); }
.get-btn:active { transform: scale(.98); }
.get-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--ui) var(--enter); }
.get-btn:hover svg { transform: translateY(2px); }
.get-btn b { display: block; font-size: 17.5px; font-weight: 500; letter-spacing: -.02em; line-height: 1.2; }
.get-btn small { display: block; margin-top: 2px; font-family: var(--mono); font-size: 11.5px; letter-spacing: .01em; color: var(--ink-3); }
.get-btn:focus-visible { outline-offset: 4px; }

/* the facts you check before downloading, as one band across the top of the sheet */
.specs { display: grid; grid-template-columns: 1fr 1.25fr 1.25fr .9fr; margin: 0 0 clamp(30px, 3.8vw, 48px); padding-bottom: clamp(30px, 3.8vw, 48px); border-bottom: 1px solid var(--rule); }
.specs + .part { padding-top: 0; border-top: 0; }
.specs > div { padding: 2px 22px 0; box-shadow: inset 1px 0 0 var(--rule); }
.specs > div:first-child { padding-left: 0; box-shadow: none; }
.specs dt { font-size: 14px; color: var(--ink-3); }
.specs dd { margin: 8px 0 0; font-size: clamp(20px, 1.75vw, 25px); font-weight: 500; letter-spacing: -.035em; line-height: 1.12; color: var(--ink); }
.specs dd small { display: block; margin-top: 8px; font-size: 14.5px; font-weight: 400; letter-spacing: -.005em; line-height: 1.45; color: var(--ink-2); }
.pairs { margin: 0; }
.pairs > div { padding: 14px 0; border-top: 1px solid var(--rule); }
.pairs > div:first-child { padding-top: 2px; border-top: 0; }
.pairs > div:last-child { padding-bottom: 0; }
.pairs dt { font-size: 14px; color: var(--ink-3); }
.pairs dd { margin: 3px 0 0; font-size: 18px; line-height: 1.5; color: var(--ink); }

/* ---------------------------------------------------------------- tablets and phones */
@media (max-width: 999px) {
  .docs .legal { display: block; }
  .rail { display: none; }
  .jump { display: block; margin: 0 0 clamp(36px, 6vw, 48px); border-radius: 18px; background: rgba(178, 200, 240, .07); box-shadow: inset 0 0 0 1px var(--rule); }
  .jump summary { list-style: none; display: flex; align-items: center; gap: 12px; min-height: 54px; padding: 0 20px; font-size: 16px; font-weight: 500; letter-spacing: -.01em; color: var(--ink); cursor: pointer; border-radius: 18px; }
  .jump summary::-webkit-details-marker { display: none; }
  .jump summary span { margin-left: auto; font-size: 14px; font-weight: 400; color: var(--ink-3); }
  .jump summary::after { content: ""; flex: none; width: 7px; height: 7px; margin: -4px 2px 0 0; border: solid var(--ink-2); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); transition: transform var(--ui) var(--enter); }
  .jump[open] summary::after { margin-top: 3px; transform: rotate(-135deg); }
  .jump ol { list-style: none; margin: 0; padding: 0 10px 10px; }
  .jump li + li { box-shadow: inset 0 1px 0 var(--rule); }
  .jump a { display: flex; align-items: center; min-height: 46px; padding: 0 10px; font-size: 16px; color: var(--ink-2); text-decoration: none; border-radius: 10px; }
  .jump a:hover { color: var(--ink); }
  .read { max-width: none; }
  .specs { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; }
  .specs > div:nth-child(3) { padding-left: 0; box-shadow: none; }
}
@media (max-width: 760px) {
  .docs .page-h h1 { margin-top: 22px; }
  .docs .sheet { border-radius: 26px; }
  .part { grid-template-columns: minmax(0, 1fr); row-gap: 12px; }
  .part-k { padding-top: 0; }
  .read p, .read li, .part-v p, .part-v li, .seq p { font-size: 17px; }
  .read section + section { margin-top: 36px; padding-top: 34px; }
  .read section + section > .anchor { top: 34px; }
  .get { margin-top: 32px; }
  .get-btn { height: 60px; padding: 0 26px 0 20px; }
}
@media (max-width: 420px) {
  .sibs a { padding: 0 13px; font-size: 14px; }
  .specs { grid-template-columns: minmax(0, 1fr); row-gap: 22px; }
  .specs > div { padding: 0 !important; box-shadow: none; }
  .specs > div:nth-child(n+2) { padding-top: 22px !important; box-shadow: inset 0 1px 0 var(--rule); }
  .cmd { flex-direction: column; align-items: stretch; padding: 8px 8px 8px 16px; }
  .cmd .copy { align-self: flex-end; }
}

/* ================================================================ 404: the number is a cloud, drifting off with the others
   (pages.js draws it). One centred composition that fills the first screen, then a way back. */
.nf { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding-top: clamp(80px, 11vh, 120px); padding-bottom: clamp(64px, 10vh, 120px); }
.nf > * { width: 100%; }                                                            /* flex items would shrink-wrap; the cloud needs real width */
.inner .nf .nf-cloud { max-width: none; width: auto; align-self: stretch; height: clamp(150px, 26vh, 270px); margin: 0 calc(var(--gutter) * -1); }
.nf .nf-num { font-size: clamp(150px, 24vw, 360px); }
.inner .nf .page-h { text-align: center; max-width: 900px; margin-top: clamp(4px, 1.2vh, 16px); }
.inner .nf .page-h .eyebrow { font-size: 15px; }
.inner .nf .page-h h1 { margin: 14px auto 0; font-size: clamp(46px, 6.6vw, 104px); max-width: 10em; }
.inner .nf .page-h .lede { margin: 24px auto 0; max-width: 28em; }
.nf .cta-row { margin-top: 36px; }
.nf .cta-row .pill { height: 46px; padding: 0 22px; font-size: 15px; }
.nf .pill-ghost { background: rgba(16, 38, 104, .3); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .45); text-shadow: 0 1px 8px rgba(20, 44, 120, .4); }
.nf .pill-ghost:hover { background: rgba(16, 38, 104, .42); }
.nf-ways { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px 6px; margin-top: 14px; }
.nf-ways a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; color: #fff; font-size: 15px; font-weight: 500; letter-spacing: -.01em; text-decoration: none;
  text-shadow: 0 0 2px rgba(28, 58, 140, .45), 0 1px 12px rgba(28, 58, 140, .5); opacity: .88; transition: opacity var(--quick); }
.nf-ways a:hover { opacity: 1; text-decoration: underline; text-underline-offset: .3em; text-decoration-thickness: 1px; }

/* ================================================================ print: ink on paper for every inner page
   No sky, no chrome, no glass; reveals are finished; links say where they go. */
@media print {
  @page { margin: 18mm 16mm; }
  html, body { background: #fff !important; }
  #sky, .night, .nav, .foot, .skip, .sibs, .rail, .jump, .anchor, .copy, .nf-cloud, .nf-ways, .get, .cta-row { display: none !important; }
  .inner .page { padding: 0 !important; min-height: 0 !important; }
  .inner .page, .inner .page * { color: #111 !important; text-shadow: none !important; box-shadow: none !important; background: transparent !important; --ink: #111; --ink-2: #222; --ink-3: #555; --rule: #ccc; }
  .inner [data-rv], .inner .kin .w { opacity: 1 !important; transform: none !important; filter: none !important; }
  .inner .page-h h1 { font-size: 30pt !important; letter-spacing: -.03em; }
  .inner .page-h .lede { font-size: 13pt !important; }
  .docs .sheet, .inner .slab { margin-top: 18pt !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; }
  .docs .legal, .part { display: block !important; }
  .part { padding: 12pt 0 !important; } .part-k { margin-bottom: 4pt; color: #555 !important; }
  .read p, .read li, .part-v p, .part-v li, .seq p { font-size: 11pt !important; line-height: 1.5 !important; }
  .read h2 { font-size: 15pt !important; break-after: avoid; }
  .read section + section { margin-top: 16pt !important; padding-top: 14pt !important; }
  p, li { orphans: 3; widows: 3; }
  .cmd { border: 1px solid #ccc !important; }
  .read ul li::before { -webkit-print-color-adjust: exact; print-color-adjust: exact; background: #555 !important; }
  .seq > li::before { border: 1px solid #999; }
  .seq > li::after { display: none; }
  .inner .page a[href^="mailto:"]::after, .inner .page a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .85em; color: #555 !important; overflow-wrap: anywhere; }
  .inner .page a[href^="mailto:"]::after { content: ""; }
}