/* TruePx site — design system.
 * Color: white paper, cool wash, deep ink; the overlay's own measure blue as
 * the accent; lock red / padding green / margin orange only inside
 * measurements (they mean exactly what they mean in the extension).
 * Type: Geist for everything, Geist Mono only for pixel values and code.
 * Scale: 1.25 (13 · 15 · 17 · 21 · 26 · 33 · 41 · 52 · 64). */
@font-face { font-family: Geist; font-weight: 100 900; font-display: swap; src: url('/fonts/geist-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: Geist; font-weight: 100 900; font-display: swap; src: url('/fonts/geist-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Geist Mono'; font-weight: 100 900; font-display: swap; src: url('/fonts/geist-mono-latin.woff2') format('woff2'); }

:root {
  --paper: #ffffff;
  --wash: #f3f5f8;
  --ink: #15171c;
  --ink-2: #4a515c;
  --faint: #646a73;
  --line: #e3e7ec;
  --measure: #0160c0;
  --measure-fill: rgba(110, 165, 220, 0.55);
  --lock: #dc362e;
  --pad: rgba(164, 204, 145, 0.65);
  --margin: rgba(246, 177, 106, 0.65);
  --focus: #0160c0;

  --sans: Geist, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --t-13: 0.8125rem; --t-15: 0.9375rem; --t-17: 1.0625rem; --t-21: 1.3125rem;
  --t-26: 1.625rem; --t-33: 2.0625rem; --t-41: 2.5625rem; --t-52: 3.25rem;

  --wrap: 1200px;
  --gutter: clamp(20px, 4vw, 40px);
  --r-sm: 8px; --r-md: 12px; --r-lg: 18px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #0f1115; --wash: #171a20; --ink: #eceef2; --ink-2: #aab1bc; --faint: #8b929d;
    --line: #262b33; --measure: #4d9bff; --focus: #6aaeff;
  }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 var(--t-17)/1.6 var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
code, kbd { font-family: var(--mono); }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.skip { position: absolute; left: -999px; top: 8px; background: var(--ink); color: var(--paper); padding: 8px 12px; border-radius: var(--r-sm); z-index: 10; }
.skip:focus { left: 8px; }

/* ---- header + ruler strip ---- */
.site-head { position: sticky; top: 0; z-index: 5; background: color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter: saturate(1.4) blur(12px); }
.site-head .wrap { display: flex; align-items: center; gap: 28px; height: 64px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: var(--t-17); letter-spacing: -0.01em; text-decoration: none; }
.brand img { width: 32px; height: 32px; }
.site-nav { display: flex; gap: 24px; margin-left: 8px; }
.site-nav a { text-decoration: none; color: var(--ink-2); font-size: var(--t-15); }
.site-nav a:hover { color: var(--ink); }
.site-head .btn { margin-left: auto; }
.ruler { position: relative; height: 22px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); overflow-x: clip; color: var(--faint);
  background:
    repeating-linear-gradient(90deg, currentColor 0 1px, transparent 1px 100px) 0 0 / 100% 12px no-repeat,
    repeating-linear-gradient(90deg, color-mix(in srgb, currentColor 55%, transparent) 0 1px, transparent 1px 10px) 0 0 / 100% 5px no-repeat; }
.ruler span { position: absolute; top: 6px; font: 500 10px/1 var(--mono); transform: translateX(4px); }
.ruler .cursor { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--measure); display: none; }
/* The reading hangs below the strip, like the left ruler's sits beside it. */
.ruler .cursor b { position: absolute; top: calc(100% + 4px); left: 4px; font: 500 10px/1 var(--mono); color: #fff; background: var(--measure); padding: 2px 4px; white-space: nowrap; }
.ruler.live .cursor { display: block; }

/* ---- buttons ---- */
.btn { display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 20px; border-radius: 999px; font: 500 var(--t-15)/1 var(--sans); text-decoration: none; cursor: pointer; border: 0; white-space: nowrap; }
.btn-primary { background: var(--ink); color: var(--paper); }
.btn-primary:hover { background: color-mix(in srgb, var(--ink) 86%, var(--paper)); }
.btn-quiet { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.btn-quiet:hover { box-shadow: inset 0 0 0 1px var(--ink-2); }
.btn-quiet[aria-pressed='true'] { box-shadow: inset 0 0 0 1.5px var(--measure); color: var(--measure); }
.btn svg { width: 18px; height: 18px; flex: none; }
.site-head .btn { height: 38px; padding: 0 16px; }

/* ---- hero ---- */
.hero { padding: clamp(56px, 9vw, 112px) 0 0; }
.hero h1 { font-size: clamp(2.5rem, 6.4vw, 4.25rem); line-height: 1.02; letter-spacing: -0.045em; font-weight: 620; margin: 0; max-width: 12.5em; position: relative; }
.hero .lede { font-size: var(--t-21); line-height: 1.5; color: var(--ink-2); max-width: 36em; margin: 28px 0 0; }
.hero .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.hero .note { margin: 16px 0 0; font-size: var(--t-15); color: var(--faint); }
.shot { margin: clamp(48px, 7vw, 80px) 0 0; }
.frame { border-radius: var(--r-lg); overflow: hidden; box-shadow: 0 0 0 1px var(--line), 0 24px 60px -24px rgba(21, 23, 28, 0.25); background: var(--wash); }
.shot figcaption, figure.feature-img figcaption { font-size: var(--t-15); color: var(--faint); margin-top: 14px; max-width: 60em; }

/* static measurement annotation drawn around the hero headline */
.annot { position: absolute; pointer-events: none; }
.annot.box { box-shadow: var(--lock) 0 0 0 1px inset; background: repeating-linear-gradient(45deg, rgba(220, 54, 46, 0.14) 0 1px, transparent 0 50%) 0 0 / 8px 8px; }
.annot.tag { font: 400 12px/15px var(--mono); color: #fff; background: var(--lock); padding: 1px 5px; white-space: nowrap; transform: translateY(-100%); }
.annot.tag b { font-weight: 600; }
.annot.vline { width: 1px; background: var(--measure); }
.annot.pill { font: 500 12px/14px var(--mono); color: #fff; background: var(--measure); padding: 2px 5px; border-radius: 4px; transform: translate(-50%, -50%); }
body.ruler-on .annot { display: none; }

/* ---- sections ---- */
section.band { padding: clamp(72px, 10vw, 128px) 0 0; }
.band > .wrap > h2, .section-head h2 { font-size: clamp(2rem, 4vw, var(--t-52)); line-height: 1.08; letter-spacing: -0.035em; font-weight: 600; margin: 0; max-width: 16em; }
.section-head p { font-size: var(--t-21); color: var(--ink-2); max-width: 38em; margin: 18px 0 0; line-height: 1.5; }

/* steps: a real sequence, so numbered */
.steps { list-style: none; counter-reset: step; padding: 0; margin: 48px 0 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid var(--line); }
.steps li { counter-increment: step; padding: 24px 24px 0 0; }
.steps li + li { padding-left: 24px; border-left: 1px solid var(--line); }
.steps li::before { content: counter(step); font: 500 var(--t-13)/1 var(--mono); color: var(--measure); display: block; margin-bottom: 18px; }
.steps h3 { font-size: var(--t-21); letter-spacing: -0.015em; font-weight: 600; margin: 0 0 8px; }
.steps p { margin: 0; color: var(--ink-2); font-size: var(--t-15); }
kbd { font-size: 0.82em; padding: 1px 6px; border-radius: 5px; background: var(--wash); box-shadow: inset 0 -1px 0 var(--line), inset 0 0 0 1px var(--line); color: var(--ink); white-space: nowrap; }

/* feature chapters */
.chapter { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 72px); align-items: start; padding-top: clamp(56px, 8vw, 96px); }
.chapter.flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.chapter.flip .copy { order: 2; }
.chapter .copy { position: sticky; top: 112px; }
.chapter h3 { font-size: var(--t-33); line-height: 1.12; letter-spacing: -0.03em; font-weight: 600; margin: 0; }
.chapter .kicker { font-size: var(--t-15); color: var(--measure); font-weight: 500; margin: 0 0 12px; }
.chapter .copy > p { color: var(--ink-2); margin: 16px 0 0; }
.ticks { list-style: none; padding: 0; margin: 24px 0 0; }
.ticks li { position: relative; padding: 10px 0 10px 26px; border-top: 1px solid var(--line); font-size: var(--t-15); color: var(--ink-2); }
.ticks li strong { color: var(--ink); font-weight: 600; }
/* marker = a tiny dimension line |—| in measure blue */
.ticks li::before { content: ''; position: absolute; left: 0; top: 18px; width: 14px; height: 9px; border-left: 1.5px solid var(--measure); border-right: 1.5px solid var(--measure);
  background: linear-gradient(var(--measure), var(--measure)) 0 50% / 100% 1.5px no-repeat; }
.stack { display: grid; gap: 20px; }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
figure { margin: 0; }
figure.feature-img figcaption { font-size: var(--t-13); margin-top: 10px; }

/* terminal-ish code block for the agent section */
.cmd { display: flex; align-items: center; gap: 12px; background: var(--ink); color: var(--paper); border-radius: var(--r-md); padding: 12px 12px 12px 16px; margin-top: 24px; font: 400 0.8125rem/1.4 var(--mono); }
.cmd code { flex: 1; overflow-x: auto; white-space: nowrap; }
.cmd button { font: 500 var(--t-13) var(--sans); border: 0; border-radius: 8px; padding: 7px 12px; cursor: pointer; background: color-mix(in srgb, var(--paper) 16%, transparent); color: var(--paper); }
.prompts { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 8px; }
.prompts li { font-size: var(--t-15); padding: 10px 14px; border-radius: var(--r-md); background: var(--wash); color: var(--ink); }

/* roles */
.roles { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); margin-top: 48px; }
.role-tabs { display: flex; flex-direction: column; gap: 4px; }
.role-tabs button { text-align: left; font: 500 var(--t-17) var(--sans); color: var(--ink-2); background: none; border: 0; padding: 12px 16px; border-radius: var(--r-md); cursor: pointer; }
.role-tabs button:hover { color: var(--ink); background: var(--wash); }
.role-tabs button[aria-selected='true'] { color: var(--ink); background: var(--wash); box-shadow: inset 3px 0 0 var(--measure); }
.role { border-top: 1px solid var(--line); padding-top: 24px; }
.role h3 { font-size: var(--t-26); letter-spacing: -0.025em; font-weight: 600; margin: 0; }
.role > p { color: var(--ink-2); margin: 10px 0 0; max-width: 40em; }
.role .ticks { columns: 2; column-gap: 32px; }
.role .ticks li { break-inside: avoid; }
.js .role[hidden] { display: none; }
.no-js .role-tabs { display: none; }
.no-js .roles { grid-template-columns: 1fr; }
.no-js .role + .role { margin-top: 40px; }

/* full list */
.index { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 48px; margin-top: 48px; }
.index h3 { font-size: var(--t-17); font-weight: 600; margin: 0 0 4px; padding-bottom: 10px; border-bottom: 1.5px solid var(--ink); }
.index ul { list-style: none; padding: 0; margin: 0; }
.index li { font-size: var(--t-15); color: var(--ink-2); padding: 9px 0; border-bottom: 1px solid var(--line); }

/* shortcuts */
.keys { margin: 0; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(7, auto); grid-auto-flow: column; column-gap: 48px; font-size: var(--t-15); border-top: 1px solid var(--line); }
.keys > div { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.keys dt { color: var(--ink-2); }
.keys dd { margin: 0; white-space: nowrap; }

/* privacy band */
.privacy { margin-top: clamp(72px, 10vw, 128px); background: var(--wash); }
.privacy .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; padding-top: 72px; padding-bottom: 72px; align-items: start; }
.privacy h2 { font-size: clamp(1.75rem, 3.2vw, var(--t-41)); letter-spacing: -0.03em; line-height: 1.1; font-weight: 600; margin: 0; }
.privacy p { color: var(--ink-2); margin: 0 0 16px; }
.privacy a { color: var(--measure); font-weight: 500; }

/* faq */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; padding: 20px 40px 20px 0; position: relative; transition: color 0.15s; }
.faq summary:hover { color: var(--measure); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary h3 { font-size: var(--t-17); font-weight: 600; margin: 0; }
.faq summary::after { content: ''; position: absolute; right: 6px; top: 26px; width: 10px; height: 10px; border-right: 1.5px solid var(--ink-2); border-bottom: 1.5px solid var(--ink-2); transform: rotate(45deg); transition: transform 0.15s; }
.faq details[open] summary::after { transform: rotate(-135deg); top: 30px; }
.faq details > div { padding: 0 0 22px; color: var(--ink-2); max-width: 44em; }
.faq details > div p { margin: 0 0 10px; }
.faq code { font-size: 0.88em; background: var(--wash); padding: 1px 6px; border-radius: 5px; }

/* closing */
.closing { padding: clamp(80px, 11vw, 144px) 0; }
.closing h2 { font-size: clamp(2.25rem, 5vw, 3.75rem); letter-spacing: -0.04em; line-height: 1.04; font-weight: 620; margin: 0; max-width: 14em; }
.closing p { font-size: var(--t-21); color: var(--ink-2); margin: 20px 0 32px; max-width: 34em; }

.site-foot { font-size: var(--t-15); color: var(--faint); }
.site-foot .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; padding-top: 28px; padding-bottom: 28px; }
.site-foot .brand { color: var(--ink); margin-right: auto; }
.site-foot a { text-decoration: none; }
.site-foot a:hover { color: var(--ink); }

/* ---- live ruler (the page measures itself) ---- */
#tp-layer { position: fixed; inset: 0; pointer-events: none; z-index: 50; }
#tp-layer div { position: fixed; pointer-events: none; }
.tp-box { background: var(--measure-fill); }
.tp-lock { box-shadow: var(--lock) 0 0 0 1px inset; background: repeating-linear-gradient(45deg, rgba(220, 54, 46, 0.2) 0 1px, transparent 0 50%) 0 0 / 8px 8px; }
.tp-pad { background: var(--pad); }
.tp-mar { background: var(--margin); }
.tp-tag { font: 400 12px/15px var(--mono); color: #fff; background: var(--measure); padding: 1px 5px; white-space: nowrap; }
.tp-tag.lock { background: var(--lock); }
.tp-tag b { font-weight: 600; }
.tp-line { background: var(--measure); }
.tp-pill { font: 500 12px/14px var(--mono); color: #fff; background: var(--measure); padding: 2px 5px; border-radius: 4px; white-space: nowrap; }
.tp-dock { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 51; display: flex; align-items: center; gap: 14px; background: var(--ink); color: var(--paper); border-radius: 999px; padding: 8px 8px 8px 18px; font-size: var(--t-15); box-shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.35); }
.tp-dock button { font: 500 var(--t-13) var(--sans); border: 0; border-radius: 999px; padding: 8px 14px; background: color-mix(in srgb, var(--paper) 16%, transparent); color: var(--paper); cursor: pointer; }
body.ruler-on { cursor: crosshair; }
body.ruler-on a, body.ruler-on button:not(.tp-keep) { cursor: crosshair; }

/* heading left (stays in view), content right */
.split { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.split > .section-head { position: sticky; top: 112px; }
.split > .section-head h2 { font-size: clamp(2rem, 3.4vw, 2.75rem); }
.split > .section-head p { font-size: var(--t-17); }
.split > .section-head a { color: var(--measure); }

/* screenshot frames label their size on hover, like the extension */
.frame { position: relative; transition: box-shadow 0.2s; }
.frame::after { content: attr(data-size); position: absolute; left: 12px; top: 12px; font: 400 12px/15px var(--mono); color: #fff; background: var(--measure); padding: 1px 5px; opacity: 0; transform: translateY(-2px); transition: opacity 0.15s, transform 0.15s; pointer-events: none; }
.frame:hover { box-shadow: 0 0 0 1.5px var(--measure), 0 24px 60px -24px rgba(21, 23, 28, 0.25); }
.frame:hover::after { opacity: 1; transform: none; }

/* dimension line above a screenshot: |——— 720 ———| */
.dim { position: relative; height: 13px; margin-bottom: 12px; color: var(--measure); }
.dim i { position: absolute; left: 0; right: 0; top: 6px; height: 1px; background: currentColor; transform-origin: 50% 50%; }
.dim i::before, .dim i::after { content: ''; position: absolute; top: -6px; width: 1px; height: 13px; background: currentColor; }
.dim i::before { left: 0; } .dim i::after { right: 0; }
.dim b { position: absolute; left: 50%; top: 0; transform: translateX(-50%); font: 500 11px/13px var(--mono); padding: 0 8px; background: var(--paper); }
.privacy .dim b { background: var(--wash); }
.motion .dim i { transform: scaleX(0); transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1); }
.motion .dim b { opacity: 0; transition: opacity 0.4s 0.45s; }
.motion .dim.in i { transform: none; }
.motion .dim.in b { opacity: 1; }

/* steps: the top rule draws across like a ruler */
.steps { position: relative; border-top: 0; }
.steps::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--line); transform-origin: 0 50%; }
.motion .steps::before { transform: scaleX(0); transition: transform 1s cubic-bezier(0.2, 0.7, 0.2, 1); }
.motion .steps.in::before { transform: none; }
.motion .steps li::before { opacity: 0; transition: opacity 0.3s; }
.motion .steps.in li::before { opacity: 1; }
.motion .steps.in li:nth-child(2)::before { transition-delay: 0.25s; }
.motion .steps.in li:nth-child(3)::before { transition-delay: 0.5s; }
.motion .steps.in li:nth-child(4)::before { transition-delay: 0.75s; }

/* vertical page ruler (wide screens): tracks scroll and the cursor */
.vruler { display: none; }
@media (min-width: 1100px) and (pointer: fine) {
  .vruler { display: block; position: fixed; left: 0; top: 87px; bottom: 0; width: 22px; z-index: 4; overflow: hidden; color: var(--faint); border-right: 1px solid var(--line); background: color-mix(in srgb, var(--paper) 88%, transparent);
    --y: 0px; }
  .vruler::before { content: ''; position: absolute; inset: 0; background:
      repeating-linear-gradient(180deg, currentColor 0 1px, transparent 1px 100px) 0 var(--y) / 12px 100% repeat-y,
      repeating-linear-gradient(180deg, color-mix(in srgb, currentColor 55%, transparent) 0 1px, transparent 1px 10px) 0 var(--y) / 5px 100% repeat-y; }
  .vruler span { position: absolute; left: 3px; font: 500 10px/1 var(--mono); writing-mode: vertical-rl; transform: rotate(180deg) translateY(-4px); }
  .vruler .cursor { position: absolute; left: 0; right: 0; height: 1px; background: var(--measure); display: none; }
  .vruler.live .cursor { display: block; }
  .vcursor-label { position: fixed; left: 26px; z-index: 4; font: 500 10px/1 var(--mono); color: #fff; background: var(--measure); padding: 2px 4px; pointer-events: none; display: none; }
  .vruler.live + .vcursor-label { display: block; }
}

/* page-load: the rulers scale in, then the headline gets measured */
@keyframes tp-wipe-x { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes tp-wipe-y { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes tp-select { from { clip-path: inset(0 100% 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes tp-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes tp-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes tp-pop { from { opacity: 0; transform: translate(-50%, -50%) scale(0.6); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
.motion .ruler { animation: tp-wipe-x 1.1s cubic-bezier(0.2, 0.7, 0.2, 1) backwards; } /* no clip once done: the cursor reading hangs below */
.motion .vruler { animation: tp-wipe-y 1.1s 0.15s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.motion .annot.intro.box { animation: tp-select 0.7s 0.35s cubic-bezier(0.3, 0.6, 0.2, 1) both; }
.motion .annot.intro.tag { animation: tp-fade 0.3s 0.55s both; }
.motion .annot.intro.vline { transform-origin: 50% 0; animation: tp-grow 0.45s 1.05s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.motion .annot.intro.pill { animation: tp-pop 0.35s 1.35s cubic-bezier(0.3, 1.4, 0.5, 1) both; }

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

@media (max-width: 960px) {
  .site-nav { display: none; }
  .chapter, .chapter.flip { grid-template-columns: minmax(0, 1fr); }
  .chapter.flip .copy { order: 0; }
  .chapter .copy { position: static; }
  .steps { grid-template-columns: 1fr 1fr; }
  .steps li:nth-child(3) { padding-left: 0; border-left: 0; }
  .steps li:nth-child(n + 3) { padding-top: 32px; }
  .roles { grid-template-columns: 1fr; }
  .role-tabs { flex-direction: row; overflow-x: auto; }
  .role-tabs button { white-space: nowrap; }
  .role-tabs button[aria-selected='true'] { box-shadow: inset 0 -2px 0 var(--measure); }
  .index { grid-template-columns: 1fr 1fr; }
  .privacy .wrap { grid-template-columns: 1fr; gap: 16px; }
  .split { grid-template-columns: 1fr; gap: 32px; }
  .split > .section-head { position: static; }
  .site-foot .brand { flex-basis: 100%; } /* logo on its own row, links wrap from the left edge under it */
}
@media (max-width: 600px) {
  body { font-size: var(--t-15); }
  .steps { grid-template-columns: 1fr; }
  .steps li, .steps li + li { padding: 24px 0 0; border-left: 0; }
  .role .ticks { columns: 1; }
  .index { grid-template-columns: 1fr; }
  .pair { grid-template-columns: 1fr; }
  .keys { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-flow: row; }
  .hero .lede { font-size: var(--t-17); }
  .site-head .btn span.long { display: none; }
  .tp-dock { width: calc(100% - 32px); justify-content: space-between; }
}
@media print {
  .site-head, .tp-dock, #tp-layer, .annot { display: none !important; }
}

/* Brand panels: the hero and the closing call sit on the same navy as the
   feature graphics (40px grid, cyan light from the top right, blue in the
   middle), in both colour schemes. They are inset from the page edges with
   rounded corners, so no section edge or the footer ever cuts them. Inside, the
   colour tokens switch to their light-on-dark values. */
.hero, .closing {
  --paper: #08112b; --wash: #0d1a3d; --ink: #eef1f6; --ink-2: #b7c0cf; --faint: #9aa5b8;
  --line: rgba(255, 255, 255, 0.14); --measure: #6aaeff; --focus: #8cc2ff;
  position: relative; color: var(--ink); border-radius: 28px; overflow: hidden;
  margin-inline: clamp(8px, 1.4vw, 16px);
  background-color: #08112b;
  background-image:
    radial-gradient(60% 45% at 90% 0%, rgba(96, 190, 255, 0.36), 35%, transparent),
    radial-gradient(75% 55% at 40% 42%, rgba(47, 123, 255, 0.26), 35%, transparent),
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: auto, auto, 40px 40px, 40px 40px;
  background-position: 0 0, 0 0, 50% 0, 50% 0;
}
.hero { margin-top: 8px; padding-bottom: clamp(48px, 7vw, 88px); }
.closing { margin-top: clamp(72px, 10vw, 128px); margin-bottom: clamp(8px, 1.4vw, 16px);
  background-image:
    radial-gradient(55% 70% at 88% 0%, rgba(96, 190, 255, 0.32), 35%, transparent),
    radial-gradient(70% 90% at 35% 60%, rgba(47, 123, 255, 0.24), 35%, transparent),
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px); }
/* Clear of the fixed page ruler on wide screens. */
@media (min-width: 1100px) and (pointer: fine) { .hero, .closing { margin-inline: 34px; } }
.hero .note, .shot figcaption, figure.feature-img figcaption { color: var(--ink-2); }
.closing p { color: var(--ink); }
.hero .frame { box-shadow: 0 0 0 1px var(--line), 0 30px 70px -30px rgba(0, 0, 0, 0.8); }
.hero .frame:hover { box-shadow: 0 0 0 1.5px var(--measure), 0 30px 70px -30px rgba(0, 0, 0, 0.8); }
/* Images sit on the page with their own edge and a deep shadow (the light one
   disappears on the dark page). */
@media (prefers-color-scheme: dark) {
  .frame { box-shadow: 0 0 0 1px var(--line), 0 30px 70px -30px rgba(0, 0, 0, 0.9); }
  .frame:hover { box-shadow: 0 0 0 1.5px var(--measure), 0 30px 70px -30px rgba(0, 0, 0, 0.9); }
}