@font-face {
  font-family: "Instrument Serif";
  src: url("fonts/instrument-serif.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light dark;
  --field: #1f5a47;
  --field-ink: #f1e9dc;
  --page: #f2ece2;
  --card: #fbf8f2;
  --ink: #1b1f1d;
  --ink-2: #565e5a;
  --accent: #1f5a47;
  --line: rgb(27 31 29 / 14%);
  --focus: #0a84ff;
  --serif: "Instrument Serif", ui-serif, Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, monospace;
  --display: clamp(44px, 6.4vw, 92px);
  --section-title: clamp(34px, 4.2vw, 56px);
  --hero-h: min(100svh, 1000px);
  --width: min(1120px, calc(100% - 48px));
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --t-press: 120ms;
  --t-fast: 180ms;
  --t-move: 240ms;
}

@media (prefers-color-scheme: dark) {
  :root {
    --page: #0d0f0e;
    --card: #161a18;
    --ink: #ece6dc;
    --ink-2: #a3aaa6;
    --accent: #8fc7bc;
    --line: rgb(236 230 220 / 14%);
    --focus: #409cff;
  }
}

@media (prefers-contrast: more) {
  :root { --ink-2: #3b4240; --line: rgb(27 31 29 / 40%); }
}

@media (prefers-contrast: more) and (prefers-color-scheme: dark) {
  :root { --ink-2: #d2d8d5; --line: rgb(236 230 220 / 45%); }
}

* { box-sizing: border-box; }

/* Safari tints its top and bottom bars and fills the overscroll from the body
   background, so the body is field green and the page colour lives on main. The masthead
   and the footer are green bands, which keeps both bars and both overscrolls on brand. */
html { background: var(--field); }

body {
  margin: 0;
  overflow-x: clip;
  color: var(--ink);
  background: var(--field);
  font: 17px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
::selection { background: color-mix(in srgb, var(--accent) 24%, transparent); }

:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
.masthead :focus-visible, .glance :focus-visible { outline-color: var(--field-ink); }

.skip-link {
  position: fixed;
  z-index: 50;
  top: 12px;
  left: 12px;
  padding: 10px 16px;
  border-radius: 999px;
  color: var(--page);
  background: var(--ink);
  transform: translateY(-200%);
}

.skip-link:focus { transform: none; }


h1, h2, h3, p { margin-top: 0; }

h2 {
  margin: 0 0 16px;
  font: 400 var(--section-title)/1.03 var(--serif);
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.grain::after {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: url("grain.png") 0 0 / 192px;
  opacity: 0.22;
  mix-blend-mode: overlay;
  pointer-events: none;
  content: "";
}

/* A capture inside Apple's iPhone 17 Pro frame. The frame's screen opening is
   1206 × 2622 inside 1350 × 2760, so the capture is placed by those ratios. */
.phone {
  position: relative;
  width: var(--phone-w, 320px);
  margin: 0;
  aspect-ratio: 1350 / 2760;
  filter: drop-shadow(0 40px 48px rgb(0 0 0 / 28%));
}

.phone-screen {
  position: absolute;
  top: 2.5%;
  left: 5.333%;
  width: 89.333%;
  height: 95%;
  border-radius: 16.5% / 7.6%;
  background: #000;
  object-fit: cover;
}

.phone-screen img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
.frame { display: contents; }
.phone-frame { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

/* Masthead */

.masthead {
  position: relative;
  display: flex;
  flex-direction: column;
  height: clamp(600px, 100svh, 1000px);
  overflow: clip;
  color: var(--field-ink);
  background: var(--field);
  isolation: isolate;
}

.topbar {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: var(--width);
  margin: 0 auto;
  padding: 18px 0;
}

.navmark { display: inline-flex; align-items: center; min-height: 44px; color: currentColor; }
.navmark svg { display: block; width: 64px; height: auto; fill: currentColor; }

.topbar nav { display: flex; gap: 4px; }

.topbar nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  border-radius: 999px;
  font: 500 15px var(--sans);
  text-decoration: none;
  opacity: 0.82;
}

.topbar nav a:hover, .topbar nav a:focus-visible { opacity: 1; }

/* The whole phone stays in the first viewport: its height follows the band's. */
.hero {
  position: relative;
  z-index: 3;
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 48px;
  align-items: center;
  width: var(--width);
  min-height: 0;
  margin: 0 auto;
  padding-bottom: 28px;
}

.hero-copy { position: relative; z-index: 5; align-self: start; padding-top: clamp(24px, 6svh, 72px); }

.hero-copy h1 {
  margin: 0;
  font: 400 var(--display)/0.98 var(--serif);
  letter-spacing: -0.025em;
}

.hero-copy .lede {
  max-width: 30ch;
  margin: 18px 0 0;
  font-size: 19px;
  line-height: 1.45;
  opacity: 0.88;
  text-wrap: balance;
}

/* Apple's badge is never altered: the bloom behind it reacts, the badge does not.
   The gradient reaches zero alpha before its box ends and is then blurred, so the
   bloom has no edge at any zoom. */
.badge { --halo: var(--accent); position: relative; isolation: isolate; display: inline-flex; margin-top: 24px; border-radius: 8px; }
.masthead .badge { --halo: var(--field-ink); }

.badge::before {
  position: absolute;
  z-index: -1;
  inset: -30px -40px;
  background: radial-gradient(
    closest-side,
    color-mix(in srgb, var(--halo) 42%, transparent),
    color-mix(in srgb, var(--halo) 20%, transparent) 55%,
    transparent
  );
  filter: blur(24px);
  opacity: 0;
  transform: scale(0.92);
  transition:
    opacity var(--t-fast) var(--ease-out),
    transform var(--t-fast) var(--ease-out);
  pointer-events: none;
  content: "";
}

@media (hover: hover) and (pointer: fine) {
  .badge:hover::before { opacity: 1; transform: none; }
}

.badge:focus-visible::before { opacity: 1; transform: none; }
.badge:active::before { opacity: 1; transform: scale(0.96); transition-duration: var(--t-press); }
.badge img { width: 132px; height: 44px; }

.wordmark {
  position: absolute;
  z-index: 1;
  bottom: -14%;
  left: 50%;
  width: 104vw;
  color: var(--field-ink);
  transform: translateX(-50%);
}

.wordmark svg { display: block; width: 100%; height: auto; fill: currentColor; }

.hero .phone {
  --phone-w: calc((clamp(600px, 100svh, 1000px) - 140px) / 2.044);
  position: relative;
  margin-right: 4%;
  animation: rise 700ms var(--ease) both;
}

@keyframes rise {
  from { transform: translateY(40px); }
  to { transform: none; }
}

/* Story sections: one reason, then the proof */

.story {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: 64px;
  align-items: center;
  width: var(--width);
  margin: 0 auto;
  padding: 128px 0;
}

.story-text p { max-width: 34ch; margin: 0; color: var(--ink-2); font-size: 19px; }

.story-stage { display: grid; place-items: center; }
.story-stage .phone { --phone-w: clamp(240px, 24vw, 330px); }



.continuity {
  width: var(--width);
  margin: 0 auto;
  padding: 128px 0;
  border-top: 1px solid var(--line);
}

.continuity > h2 { max-width: 14ch; }
.continuity > p { max-width: 36ch; margin: 0; color: var(--ink-2); font-size: 19px; }

.continuity-stage {
  display: grid;
  grid-template-columns: 34fr 30fr 16fr;
  gap: clamp(28px, 4vw, 64px);
  align-items: end;
  margin-top: 64px;
}

.unit { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.unit-name { margin: 18px 0 0; color: var(--ink-2); font-size: 14px; font-weight: 500; }

/* Apple's iPad Pro 13-inch frame: a 2064 × 2752 opening at (118, 124) in 2300 × 3000. */
.tablet {
  position: relative;
  width: 100%;
  max-width: 400px;
  margin: 0;
  aspect-ratio: 2300 / 3000;
  filter: drop-shadow(0 40px 56px rgb(0 0 0 / 26%));
}

.tablet-screen {
  position: absolute;
  top: 4.1333%;
  left: 5.1304%;
  width: 89.7391%;
  height: 91.7333%;
  border-radius: 2.6% / 1.95%;
  background: #000;
  overflow: hidden;
}

.tablet-screen img { width: 100%; height: 100%; object-fit: cover; }
.tablet-frame { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Apple's iPhone Duo inner-display frame: a 2853 × 2007 opening at (120, 120) in 3093 × 2247. */
.fold {
  position: relative;
  width: 100%;
  max-width: 400px;
  margin: 0;
  aspect-ratio: 3093 / 2247;
  filter: drop-shadow(0 30px 40px rgb(0 0 0 / 26%));
}

.fold-screen {
  position: absolute;
  top: 5.3405%;
  left: 3.8797%;
  width: 92.2405%;
  height: 89.3191%;
  border-radius: 3.4% / 4.8%;
  background: #000;
  overflow: hidden;
}

.fold-screen img { width: 100%; height: 100%; object-fit: cover; }
.fold-frame { position: absolute; inset: 0; width: 100%; height: 100%; }

.continuity-stage .phone { --phone-w: 100%; max-width: 200px; }


.interlude {
  width: var(--width);
  margin: 0 auto;
  padding: 72px 0 152px;
  text-align: center;
}

.interlude h2 { margin: 0 0 18px; font-size: clamp(48px, 7vw, 104px); line-height: 0.98; }
.interlude p { margin: 0; color: var(--ink-2); font-size: 19px; }
.interlude .interlude-note { max-width: 40ch; margin: 14px auto 0; font-size: 16px; }

/* A feed that ends: like the app, the bars stay put and only the content scrolls,
   from the last post to the caught-up page. Bands are fractions of the 2868-pixel
   capture: top bar 380, content 2210, tab bar 278. */
.finish-stage {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: 64px;
  align-items: center;
  width: var(--width);
  margin: 0 auto;
  padding: 120px 0;
}

.finish-copy p { max-width: 30ch; margin: 0; color: var(--ink-2); font-size: 19px; }
.finish-visual { display: flex; justify-content: center; gap: 32px; }
.finish-visual .phone { --phone-w: clamp(220px, 22vw, 320px); }

.finish-window { overflow: hidden; }
.finish-window picture { position: absolute; left: 0; width: 100%; }
.finish-window img { display: block; width: 100%; height: 100%; }
.finish-top { top: 0; height: 13.2497%; }
.finish-bottom { bottom: 0; height: 9.6932%; }
.finish-scroll { position: absolute; top: 13.2497%; left: 0; width: 100%; height: 77.0572%; overflow: hidden; }
.finish-scroll .finish-content { top: 0; height: 200%; }

.finish.is-playing .finish-content {
  transform: translateY(-50%);
  transition: transform 1600ms cubic-bezier(0.22, 0.61, 0.12, 1) 500ms;
}

/* Without the motion, show the settled end beside the populated start. */
.js .finish-still { display: none; }

/* Summary: a tap on Summarize, then the system sheet rises over the dimmed article.
   The sheet is the real capture clipped to the sheet's shape (1320 × 2868 capture:
   x 24–1296, y 1353–2844, corner radii 106 and 173). Once it settles the clip drops,
   so the last frame is the untouched capture. The dim matches the capture: black at
   20 percent in Light and 48.5 percent in Dark. */

.reduce-stage {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: 64px;
  align-items: center;
  width: var(--width);
  margin: 0 auto;
  padding: 128px 0;
}

.reduce-copy p { max-width: 34ch; margin: 0; color: var(--ink-2); font-size: 19px; }
.reduce-visual { display: grid; place-items: center; }
.reduce-visual .phone { --phone-w: clamp(240px, 24vw, 330px); }

.summarize-window { overflow: hidden; }
.summarize-window > * { position: absolute; }
.summarize-window picture { inset: 0; }

.summarize-dim { inset: 0; background: rgb(0 0 0 / 20%); opacity: 0; }

.summarize-press,
.summarize-touch {
  top: 94.491%;
  left: 49.924%;
  aspect-ratio: 1;
  border-radius: 50%;
  opacity: 0;
  transform: translate(-50%, -50%);
}

.summarize-press { width: 7.6%; background: rgb(246 246 246 / 62%); }

.summarize-touch {
  width: 9.1%;
  background: rgb(120 120 128 / 38%);
  box-shadow: 0 0 0 1px rgb(255 255 255 / 35%), 0 1px 6px rgb(0 0 0 / 18%);
}

@media (prefers-color-scheme: dark) {
  .summarize-dim { background: rgb(0 0 0 / 48.5%); }
  .summarize-press { background: rgb(42 42 42 / 62%); }
}

.js .summarize-sheet {
  clip-path: inset(47.176% 1.818% 0.837% round 8.03% 8.03% 13.106% 13.106% / 3.696% 3.696% 6.032% 6.032%);
  transform: translateY(53%);
}

.reduce.is-playing .summarize-touch { animation: summarize-touch 520ms var(--ease-out) 800ms both; }
.reduce.is-playing .summarize-press { animation: summarize-press 420ms linear 830ms both; }
.reduce.is-playing .summarize-dim { animation: summarize-dim 360ms var(--ease-out) 1180ms both; }

.reduce.is-playing .summarize-sheet {
  animation:
    summarize-rise 450ms cubic-bezier(0.32, 0.72, 0, 1) 1180ms both,
    summarize-settle 1ms steps(1, end) 1640ms both;
}

@keyframes summarize-touch {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(1.25); }
  25% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  65% { opacity: 1; transform: translate(-50%, -50%) scale(0.94); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(0.94); }
}

@keyframes summarize-press {
  0% { opacity: 0; }
  15%, 60% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes summarize-dim {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes summarize-rise {
  from { transform: translateY(53%); }
  to { transform: none; }
}

@keyframes summarize-settle {
  from { clip-path: inset(47.176% 1.818% 0.837% round 8.03% 8.03% 13.106% 13.106% / 3.696% 3.696% 6.032% 6.032%); }
  to { clip-path: inset(0 round 0); }
}

/* Timed demos: a thin line fills while the sequence plays, then a quiet Replay
   control fades in. Both need script, so they stay hidden without it. */

.finish { --demo-length: 2100ms; }
.reduce { --demo-length: 1650ms; }

.demo { display: grid; justify-items: center; gap: 14px; }
.demo-controls { display: none; flex-direction: column; align-items: center; gap: 6px; color: var(--ink-2); }
.js .demo-controls { display: flex; }

.demo-progress {
  position: relative;
  overflow: hidden;
  width: 48px;
  height: 2px;
  border-radius: 1px;
  background: var(--line);
}

.demo-progress::after {
  position: absolute;
  inset: 0;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  content: "";
}

.is-playing .demo-progress::after { animation: demo-progress var(--demo-length) linear both; }

@keyframes demo-progress {
  to { transform: none; }
}

.demo-replay {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  color: inherit;
  background: transparent;
  font: 500 15px/1 var(--sans);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--t-fast) var(--ease-out),
    visibility 0s linear var(--t-fast),
    background-color var(--t-fast) var(--ease-out),
    transform var(--t-press) var(--ease-out);
}

.demo-replay svg { width: 16px; height: 16px; }
.is-settled .demo-replay { opacity: 1; visibility: visible; transition-delay: 0s; transition-duration: var(--t-move), 0s, var(--t-fast), var(--t-press); }
.demo-replay:active { transform: scale(0.97); }
.demo-replay:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

@media (hover: hover) and (pointer: fine) {
  .demo-replay:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 7%, transparent); }
  .js .finish-phone, .js .summarize-phone { cursor: pointer; }
}

/* Keep up without opening it */

.glance {
  position: relative;
  overflow: clip;
  padding: 128px 0;
  color: var(--field-ink);
  background: var(--field);
  isolation: isolate;
}

.glance-head { position: relative; z-index: 2; width: var(--width); margin: 0 auto; text-align: center; }
.glance-head p { max-width: 40ch; margin: 0 auto; opacity: 0.86; font-size: 19px; }

.glance-row {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  gap: clamp(32px, 6vw, 96px);
  width: var(--width);
  margin: 64px auto 0;
}

.glance-item { display: flex; flex-direction: column; align-items: center; }
.glance-row .phone { --phone-w: clamp(220px, 22vw, 300px); }

.glance-row .caption {
  margin: 22px 0 0;
  font: 400 22px/1.3 var(--serif);
  text-align: center;
}


/* Privacy, maker, FAQ, footer */

.privacy { width: var(--width); margin: 0 auto; padding: 128px 0 96px; }

.facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0 32px;
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
}

.facts li { padding-top: 16px; border-top: 2px solid var(--accent); font: 400 24px/1.25 var(--serif); }
.facts strong { font-weight: 400; color: var(--accent); }
.fact-sub { display: block; margin-top: 8px; color: var(--ink-2); font: 400 14px/1.45 var(--sans); }

.maker {
  width: var(--width);
  margin: 0 auto;
  padding: 112px 0 128px;
  border-top: 1px solid var(--line);
}

.maker figure { width: min(100%, 26ch); margin: 0 auto; font-size: clamp(26px, 2.6vw, 36px); }
.maker blockquote { margin: 0; }

.maker blockquote p {
  margin: 0;
  font: 400 1em/1.16 var(--serif);
  letter-spacing: -0.005em;
  text-indent: -0.42em;
  text-wrap: pretty;
}

.maker figcaption {
  margin-top: 28px;
  color: var(--ink-2);
  font: 500 15px/1.4 var(--sans);
}

.maker figcaption::before { content: "— "; }
.maker .badge { display: flex; width: fit-content; margin: 56px auto 0; }

.faq {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: 48px;
  width: var(--width);
  margin: 0 auto;
  padding: 96px 0;
  border-top: 1px solid var(--line);
}

.faq-head h2 { position: sticky; top: 32px; }
.faq article { padding: 22px 0; border-top: 1px solid var(--line); }
.faq article:first-child { padding-top: 0; border-top: 0; }
.faq h3 { margin: 0 0 6px; font: 600 18px/1.35 var(--sans); }
.faq article p { max-width: 60ch; margin: 0; color: var(--ink-2); }
.faq-contact { margin: 24px 0 0; color: var(--ink-2); }
.faq-contact a { color: var(--accent); }

.footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  width: var(--width);
  margin: 0 auto;
  padding: 40px 0 max(56px, env(safe-area-inset-bottom));
  color: var(--field-ink);
}

body > main { background: var(--page); }
.footer :focus-visible { outline-color: var(--field-ink); }
.footer .navmark { color: currentColor; }
.footer nav { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.footer nav a { display: inline-flex; align-items: center; min-height: 44px; color: currentColor; font-size: 15px; text-decoration: none; opacity: 0.82; }
.footer nav a:hover, .footer nav a:focus-visible { opacity: 1; }
@media (prefers-contrast: more) { .footer nav a { opacity: 1; } }

@media (max-width: 760px) {
  /* One phone size on phones, hero included. The hero phone runs past the first
     screen so its post title is readable above the fold. */
  :root { --width: calc(100% - 40px); --phone-mobile: min(80vw, 360px); }
  .topbar { padding: 10px 0; }
  .topbar nav a:not(:first-child) { display: none; }
  .masthead { height: auto; min-height: 100svh; }
  .hero { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 22px; padding-bottom: 48px; text-align: center; }
  .hero-copy { padding-top: 4px; }
  .hero-copy h1 { font-size: 42px; }
  .hero-copy .lede { max-width: 34ch; margin: 10px auto 0; font-size: 16px; line-height: 1.4; }
  .hero-copy .badge { margin-top: 16px; }
  /* On tall phones, drop the screen just enough that its tab bar starts below the fold
     (tab bar top is 1.83 phone widths down the frame; the copy above ends near 268 px). */
  .hero .phone { --phone-w: var(--phone-mobile); margin: max(0px, calc(100svh - 1.83 * var(--phone-mobile) - 268px)) 0 0; }
  .wordmark { width: 130vw; bottom: 4%; }
  .story, .reduce-stage { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .story { padding: 80px 0; }
  .finish-stage { grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 80px 0; }
  .story-stage .phone, .reduce-visual .phone, .finish-visual .phone, .glance-row .phone { --phone-w: var(--phone-mobile); }
  .finish-visual { gap: 16px; }
  .continuity { padding: 80px 0; }
  .continuity-stage { margin-top: 36px; }
  .continuity-stage { grid-template-columns: 1fr 0.62fr; gap: 28px 20px; }
  .unit-tablet { grid-column: 1 / -1; }
  .unit-tablet .tablet { max-width: 300px; }
  .interlude { padding: 40px 0 96px; }
  .story-text p, .reduce-copy p { font-size: 17px; }
  .reduce-stage { padding: 80px 0; }
  .glance { padding: 88px 0; }
  .glance-row { gap: 16px; }
  .glance-row .caption { font-size: 17px; }
  .facts { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px 20px; }
  .facts li { font-size: 20px; }
  .faq { grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 72px 0; }
  .maker { padding: 80px 0 96px; }
  .maker figure { font-size: 25px; }
  .maker blockquote p { text-indent: 0; }
  .faq-head h2 { position: static; }
}

@media (prefers-reduced-motion: reduce) {
  .hero .phone { animation: none; }
  .js .summarize-sheet { clip-path: none; transform: none; }
  .summarize-window > :not(.summarize-sheet) { display: none; }
  .finish.is-playing .finish-content { transform: none; transition: none; }
  .js .finish-still { display: block; }
  .js .demo-controls { display: none; }
  .js .finish-phone, .js .summarize-phone { cursor: auto; }
  .finish-visual .phone { --phone-w: min(260px, calc((100vw - 72px) / 2)); }
}

@media print {
  .wordmark, .phone, .grain::after, .skip-link { display: none; }
  body, .masthead, .glance, .footer { color: #000; background: #fff; }
}

/* Nav: one shared highlight glides to the hovered or focused item and rests on the
   current page. Links only change colour; the pill carries the motion. */
[data-pill-nav] { position: relative; isolation: isolate; }

.nav-pill {
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 0;
  width: var(--w, 0);
  height: 36px;
  border-radius: 999px;
  background: rgb(255 255 255 / 13%);
  opacity: 0;
  transform: translate(var(--x, 0), -50%);
  transition:
    transform var(--t-move) var(--ease-out),
    width var(--t-move) var(--ease-out),
    opacity var(--t-fast) var(--ease-out),
    box-shadow var(--t-fast) var(--ease-out);
  pointer-events: none;
}

.nav-pill.is-visible { opacity: 1; }
.nav-pill.is-instant { transition: none; }
.nav-pill.is-focus { box-shadow: 0 0 0 2px var(--field-ink); }
.has-pill a:focus-visible { outline: none; }

[data-pill-nav] a {
  transition: opacity var(--t-fast) var(--ease-out), transform var(--t-press) var(--ease-out);
}

[data-pill-nav] a:active { transform: scale(0.97); }

/* Text links draw their underline in from the left. */
.text-link,
.document a,
.faq-contact a {
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size var(--t-move) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .text-link:hover,
  .document a:hover,
  .faq-contact a:hover { background-size: 100% 1px; }
}

.text-link:focus-visible,
.document a:focus-visible,
.faq-contact a:focus-visible { background-size: 100% 1px; }

@media (prefers-reduced-motion: reduce) {
  :root { --t-press: 0ms; --t-fast: 0ms; --t-move: 0ms; }
}