/* The public site's look (owner, 2026-11-11 and 12, after three passes on staging): flat and
   printed. A white hero (2026-11-12) with a short serif claim and a drawing of where things travel,
   a navy trust strip, a band with an end-to-end encryption stamp, three numbered points, plain blue
   and purple service panels, a closing panel. The hero drawing alone has depth (gradients, soft shadows, glows, 2026-11-12); the motion is the
   hero drawing's story, the stamp's turning ring and a hover lift, and neither moves if the visitor asks for less.
   No script, no cookie, nothing from another site; the fonts are bundled (OFL, licences beside them).
   Colour pairs, the variables and the dark band's own colours, are measured by
   server/test/contrast.test.ts. */

@font-face { font-family: 'Frank Ruhl Libre'; font-style: normal; font-weight: 700; font-display: swap;
  src: url(/site/fonts/frank-ruhl-libre-hebrew-700-normal.woff2) format('woff2');
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }
@font-face { font-family: 'Frank Ruhl Libre'; font-style: normal; font-weight: 700; font-display: swap;
  src: url(/site/fonts/frank-ruhl-libre-latin-700-normal.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: 'IBM Plex Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url(/site/fonts/ibm-plex-sans-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url(/site/fonts/ibm-plex-sans-latin-500-normal.woff2) format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url(/site/fonts/ibm-plex-sans-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(/site/fonts/ibm-plex-mono-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url(/site/fonts/ibm-plex-mono-latin-500-normal.woff2) format('woff2'); }

:root {
  --bg: #f6f8fb;
  --surface: #ffffff;
  --ink: #0f1b2d;
  --muted: #4f5d73;
  --rule: #d9e0ea;
  --blue: #1565c0;
  --on-blue: #ffffff;
  --purple: #79119e;
  /* Soft panels (2026-11-12): pastel grounds with deep ink of their own colour */
  --soft-blue: #eef4ff;
  --soft-blue-2: #dde9fc;
  --soft-ink-blue: #0d47a1;
  --soft-purple: #f7effc;
  --soft-purple-2: #ebdcf7;
  --soft-ink-purple: #5c0b7a;
  --soft-green: #edf8ee;
  /* The dark band, the same in both themes. */
  --navy: #1c2c4c;
  --navy-deep: #192645;
  --on-navy: #ffffff;
  --navy-text: #c7d3e6;
  --navy-accent: #8fc0ff;
  --display: 'IBM Plex Sans', 'Frank Ruhl Libre', system-ui, 'Segoe UI', sans-serif;
  --body: 'IBM Plex Sans', system-ui, 'Segoe UI', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, Consolas, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0c1420;
    --surface: #131e2e;
    --ink: #e8eef7;
    --muted: #9fb0c7;
    --rule: #263448;
    --blue: #7fb4f2;
    --on-blue: #0c1420;
    --purple: #d49aec;
    --soft-blue: #14233b;
    --soft-blue-2: #182b48;
    --soft-ink-blue: #a9cbff;
    --soft-purple: #211631;
    --soft-purple-2: #2a1c3e;
    --soft-ink-purple: #e3bdf5;
    --soft-green: #142a1d;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 17px/1.6 var(--body); overflow-x: hidden; }
a { color: var(--blue); text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 4px; }
.dark :focus-visible { outline-color: #ffffff; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 10px; background: #fff; color: #0f1b2d; padding: 10px 14px; border-radius: 8px; z-index: 5; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.in { max-width: 1160px; margin: 0 auto; padding-inline: max(20px, env(safe-area-inset-left, 0px)) max(20px, env(safe-area-inset-right, 0px)); }
h1, h2, h3 { font-family: var(--display); font-weight: 600; letter-spacing: -0.02em; margin: 0; text-wrap: balance; }
p { margin: 0; max-width: 62ch; }

/* ---- The light hero (owner, 2026-11-12): white in both themes, like the navy band below it.
   Short copy on the left; on the right a drawn phone, browser, PuriCloud and Google joined by
   dashed wires, with texts, backups and files travelling along them. */
.hero-band { background: #ffffff; color: #0f1b2d; }
/* A faint dot grid behind the hero, fading out towards the edges */
section.hero-band { position: relative; }
section.hero-band::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(#d5deeb 1px, transparent 1.2px); background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(ellipse at 70% 40%, #000 30%, transparent 75%); mask-image: radial-gradient(ellipse at 70% 40%, #000 30%, transparent 75%); }
section.hero-band .hero { position: relative; }
.top .in { display: flex; align-items: center; justify-content: space-between; gap: 8px 22px; flex-wrap: wrap; padding-block: 14px; }
.logo { display: inline-flex; align-items: center; gap: 10px; font: 600 19px var(--body); color: #0f1b2d; text-decoration: none; min-height: 44px; }
.logo svg { width: 30px; height: 30px; color: #1565c0; flex: none; }
.logo b { font-weight: 600; color: #1565c0; }
.nav { display: flex; align-items: center; gap: 2px 20px; flex-wrap: wrap; font-size: 15.5px; }
.nav a { color: #4f5d73; text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.nav a:hover { color: #0f1b2d; }
.nav a.account { color: #0f1b2d; font-weight: 500; border: 1px solid #c9d3e0; border-radius: 999px; padding: 0 18px; min-height: 42px; }
.hero-band :focus-visible { outline-color: #1565c0; }

.hero { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 32px; align-items: center; padding-block: clamp(28px, 6vw, 72px) clamp(48px, 8vw, 96px); }
.hero-copy { display: grid; gap: 22px; }
.eyebrow { display: inline-flex; width: fit-content; font: 500 12.5px var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: #1565c0; background: #e8f0fb; border-radius: 999px; padding: 6px 12px; }
h1 { font-size: clamp(42px, 5.8vw, 70px); line-height: 1.0; letter-spacing: -0.04em; color: #0f1b2d; overflow-wrap: break-word; }
.e2e h2 .shine { color: var(--navy-accent); }
.hero .lede { font-size: clamp(18px, 2vw, 21px); color: #4f5d73; max-width: 34ch; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; }
.primary, .glass, .ghost { display: inline-flex; align-items: center; min-height: 52px; padding: 0 26px; border-radius: 999px; font-weight: 600; text-decoration: none; }
.primary { background: #ffffff; color: var(--navy); }
.primary:hover { background: #e3eefb; }
.glass { color: #fff; border: 1px solid rgba(255, 255, 255, 0.45); font-weight: 500; }
.hero .primary, .cta .primary { background: #1565c0; color: #fff; }
.hero .primary:hover, .cta .primary:hover { background: #0d47a1; }
.ghost { color: #0f1b2d; border: 1px solid #c9d3e0; font-weight: 500; }
.ghost:hover { border-color: #0f1b2d; }

/* The drawing: one SVG, so the wires and what travels on them stay put at every width */
.flow { width: 100%; max-width: 760px; height: auto; justify-self: end; display: block; overflow: visible; }
@media (min-width: 1300px) { .flow { width: calc(100% + 64px); margin-right: -64px; } }
.flow .wire { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 2 9; opacity: 0.75; }
.flow .url { font: 400 10.5px var(--mono); fill: #4f5d73; }
.flow .url-lock { color: #1f6f3a; }
.flow .glyph, .pkt { color: #ffffff; }
.flow .key { font: 500 9px var(--body); fill: #aeb8c9; text-anchor: middle; }
.flow .call { color: #4caf50; }
.flow .hangup { color: #ef5350; }
/* The story moves; a still frame stands in for it when the visitor asks for less motion */
.flow .still { display: none; }

/* ---- The navy part: the strip and the encryption band */
.dark { background: var(--navy); color: var(--on-navy); margin-inline: clamp(8px, 2vw, 24px); border-radius: clamp(28px, 4vw, 44px); overflow: hidden; }

.strip { border-top: 1px solid rgba(255, 255, 255, 0.16); }
.strip ul { list-style: none; margin: 0; padding: 18px 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 34px; font: 500 14px var(--body); color: var(--navy-text); }
.strip li { display: inline-flex; align-items: center; gap: 8px; }
.strip svg { width: 20px; height: 20px; padding: 3px; border-radius: 999px; color: #ffffff; background: linear-gradient(135deg, #4a9bff, #1258c2); }

/* End-to-end encryption as the brand's mark: a printed stamp and one statement */
.e2e { background: radial-gradient(520px 420px at 12% 50%, rgba(120, 170, 255, 0.16), transparent 70%), radial-gradient(600px 400px at 95% 0%, rgba(190, 130, 230, 0.12), transparent 70%), var(--navy-deep); padding-block: clamp(56px, 9vw, 100px); border-top: 1px solid rgba(255, 255, 255, 0.10); }
.e2e-in { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(24px, 4vw, 48px); align-items: center; }
.stamp { width: clamp(150px, 18vw, 200px); height: auto; color: var(--navy-accent); flex: none; filter: drop-shadow(0 0 22px rgba(143, 192, 255, 0.35)); }
.stamp .ring { transform-box: view-box; transform-origin: 100px 100px; }
.stamp text { font: 600 11.5px var(--mono); letter-spacing: 0.32em; fill: currentColor; }
.e2e h2 { font-size: clamp(32px, 5vw, 58px); line-height: 1.02; color: #fff; }
.e2e p { color: var(--navy-text); margin-top: 14px; font-size: 18px; max-width: 58ch; }
.e2e a { color: #fff; }

/* ---- The light part */
.light { background: radial-gradient(900px 500px at 100% 0%, rgba(74, 155, 255, 0.08), transparent 70%), radial-gradient(700px 500px at 0% 60%, rgba(176, 77, 219, 0.06), transparent 70%), var(--bg); }
.section { padding-block: clamp(60px, 9vw, 110px); display: grid; gap: 40px; }
.section > header { display: grid; gap: 12px; }
.kicker { font: 500 13px var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--blue); width: fit-content; background: rgba(21, 101, 192, 0.10); border-radius: 999px; padding: 6px 12px; }
.section h2 { font-size: clamp(30px, 4.6vw, 52px); line-height: 1.05; }
.section > header p { color: var(--muted); font-size: 18px; }

/* Three numbered, ruled points */
.points { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 22px; counter-reset: pt; }
.points li { counter-increment: pt; position: relative; background: var(--surface); border: 1px solid var(--rule); border-radius: 28px; padding: 30px; display: grid; gap: 10px; align-content: start;
  box-shadow: 0 1px 2px rgba(15, 27, 45, 0.04), 0 18px 40px -26px rgba(15, 27, 45, 0.18); }
.points li::before { content: counter(pt, decimal-leading-zero); position: absolute; top: 26px; right: 28px; font: 500 13px var(--mono); color: var(--muted); letter-spacing: 0.06em; }
.tile { width: 52px; height: 52px; border-radius: 17px; display: grid; place-items: center; color: #ffffff; margin-bottom: 8px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 10px 20px -8px var(--glow, rgba(18, 88, 194, 0.6)); }
.tile svg { width: 26px; height: 26px; }
.t-blue { background: linear-gradient(135deg, #4a9bff, #1258c2); --glow: rgba(18, 88, 194, 0.6); }
.t-purple { background: linear-gradient(135deg, #b04ddb, #6b0f8f); --glow: rgba(107, 15, 143, 0.55); }
.t-green { background: linear-gradient(135deg, #4caf50, #1b6e20); --glow: rgba(27, 110, 32, 0.5); }
.points h3 { font-size: 24px; line-height: 1.2; }
.points p { color: var(--muted); }

/* The two services, plain colour panels */
.services { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 22px; }
.svc { position: relative; overflow: hidden; border-radius: 34px; padding: clamp(28px, 4vw, 44px); color: var(--ink); display: grid; gap: 14px; align-content: start;
  background: radial-gradient(420px 260px at 100% 0%, rgba(255, 255, 255, 0.55), transparent 70%), linear-gradient(135deg, var(--soft-blue), var(--soft-blue-2));
  border: 1px solid rgba(21, 101, 192, 0.10); box-shadow: 0 24px 48px -30px rgba(21, 101, 192, 0.35); --tint: var(--soft-ink-blue); }
.svc.backup { background: radial-gradient(420px 260px at 100% 0%, rgba(255, 255, 255, 0.55), transparent 70%), linear-gradient(135deg, var(--soft-purple), var(--soft-purple-2));
  border-color: rgba(121, 17, 158, 0.10); box-shadow: 0 24px 48px -30px rgba(121, 17, 158, 0.35); --tint: var(--soft-ink-purple); }
.svc > :not(.svc-art) { position: relative; }
.svc-art { position: absolute; right: -28px; bottom: -34px; width: 190px; height: 190px; color: var(--tint); opacity: 0.10; transform: rotate(-12deg); }
.svc h3 { font-size: clamp(28px, 3.4vw, 38px); color: var(--tint); }
.svc p { color: var(--muted); font-size: 17px; max-width: 46ch; }
.svc .go { color: var(--tint); font-weight: 600; text-decoration-thickness: 1.5px; }
.svc .tag { font: 500 12.5px var(--mono); letter-spacing: 0.05em; color: var(--tint); background: rgba(121, 17, 158, 0.10); border-radius: 999px; padding: 5px 12px; width: fit-content; }

.cta { border-radius: 40px; padding: clamp(40px, 7vw, 76px); text-align: center; display: grid; gap: 20px; justify-items: center; color: var(--ink);
  background: radial-gradient(560px 320px at 10% 0%, rgba(120, 170, 255, 0.28), transparent 65%), radial-gradient(520px 320px at 92% 100%, rgba(190, 130, 230, 0.24), transparent 65%), linear-gradient(135deg, var(--soft-blue), var(--soft-purple));
  border: 1px solid var(--rule); box-shadow: 0 30px 60px -36px rgba(15, 27, 45, 0.30); }
.cta h2 { font-size: clamp(30px, 4.6vw, 50px); line-height: 1.05; color: var(--ink); max-width: 18ch; }
.cta p { color: var(--muted); }
.cta .glass { color: var(--ink); border-color: var(--rule); }

.foot { border-top: 1px solid var(--rule); }
.foot .in { padding-block: 26px; display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: 14.5px; color: var(--muted); }
.foot a { color: var(--muted); }
.foot-seal { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; color: var(--ink); }
.foot-seal svg { width: 15px; height: 15px; color: var(--blue); }
/* A product of PuriFone: the black wordmark, turned white on a dark page */
.foot-by { line-height: 26px; }
.foot-by img { height: 22px; width: auto; vertical-align: middle; margin: -6px 4px 0; }
@media (prefers-color-scheme: dark) { .foot-by img { filter: invert(1); } }

/* ---- Plans and pricing (2026-11-12): three cards, the middle one lifted */
.plans { list-style: none; margin: 0 0 clamp(48px, 7vw, 80px); padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); gap: 22px; align-items: stretch; }
.plan { position: relative; background: var(--surface); border: 1px solid var(--rule); border-radius: 28px; padding: 32px 30px; display: grid; gap: 14px; grid-template-rows: auto auto auto 1fr auto; align-content: start;
  box-shadow: 0 1px 2px rgba(15, 27, 45, 0.04), 0 18px 40px -26px rgba(15, 27, 45, 0.18); }
.plan h3 { font-size: 22px; }
.plan > p { color: var(--muted); margin: 0; }
.plan .price { color: var(--ink); display: flex; align-items: baseline; gap: 8px; }
.plan .price strong { font: 600 clamp(40px, 5vw, 52px)/1 var(--display); letter-spacing: -0.03em; }
.plan .price span { color: var(--muted); }
.plan .feats { list-style: none; margin: 4px 0 0; padding: 14px 0 0; border-top: 1px solid var(--rule); display: grid; gap: 10px; align-content: start; }
.plan .feats li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; color: var(--ink); }
.plan .feats svg { width: 20px; height: 20px; padding: 3px; border-radius: 7px; color: #ffffff; background: linear-gradient(135deg, #4a9bff, #1258c2); margin-top: 2px; }
.plan .primary, .plan .ghost { justify-content: center; margin-top: 8px; }
.plan .primary { background: #1565c0; color: #ffffff; }
.plan .primary:hover { background: #0d47a1; }
.plan .ghost { color: var(--ink); border-color: var(--rule); }
.plan .ghost:hover { border-color: var(--ink); }
/* A plan not on sale yet: a plain label where its button will go, not a link */
.plan .soon { display: flex; align-items: center; justify-content: center; min-height: 52px; margin-top: 8px; border-radius: 999px; border: 1px dashed var(--muted); color: var(--muted); font-weight: 600; }
.plan.featured { background: radial-gradient(420px 260px at 100% 0%, rgba(255, 255, 255, 0.55), transparent 70%), linear-gradient(160deg, var(--soft-blue), var(--soft-blue-2));
  border: 2px solid #1565c0; box-shadow: 0 30px 60px -30px rgba(21, 101, 192, 0.45); }
.plan.featured h3 { color: var(--soft-ink-blue); }
@media (prefers-color-scheme: dark) {
  .plan.featured { background: linear-gradient(160deg, var(--soft-blue), var(--soft-blue-2)); }
}
.badge { position: absolute; top: -14px; left: 28px; background: #1565c0; color: #ffffff; font: 600 12.5px var(--mono); letter-spacing: 0.06em; text-transform: uppercase; border-radius: 999px; padding: 6px 12px; }

/* ---- The other pages (2026-11-12): the home page's header, a light hero, rounded panels */
.nav a[aria-current='page'] { color: #1565c0; font-weight: 600; }
.page-hero .in { display: grid; gap: 18px; padding-block: clamp(36px, 6vw, 80px) clamp(36px, 6vw, 64px); }
.page-hero h1 { font-size: clamp(38px, 5.4vw, 62px); line-height: 1.02; }
.page-hero .lede { font-size: clamp(18px, 2vw, 21px); color: #4f5d73; max-width: 52ch; }
.page-hero .lede a { color: #1565c0; }
.page-hero .primary { background: #1565c0; color: #fff; }
.page-hero .primary:hover { background: #0d47a1; }
.page-body { display: grid; gap: 22px; padding-block: clamp(28px, 4vw, 48px) clamp(64px, 9vw, 110px); }
.page-hero.lost .in { min-height: 56vh; align-content: center; }
.panel { background: var(--surface); border: 1px solid var(--rule); border-radius: 28px; padding: clamp(24px, 4vw, 40px); display: grid; gap: 16px; align-content: start;
  box-shadow: 0 1px 2px rgba(15, 27, 45, 0.04), 0 18px 40px -26px rgba(15, 27, 45, 0.18); }
.panel h2 { font-size: clamp(22px, 2.6vw, 30px); line-height: 1.15; }
.panel h2 .muted { color: var(--muted); font-weight: 500; font-size: 0.7em; letter-spacing: 0; }
.panel p { color: var(--muted); }
.panel strong { color: var(--ink); }
.panel-head { display: flex; align-items: center; gap: 16px; }
.panel-head .tile { margin: 0; flex: none; }

/* Numbered steps: a bright number, joined by a thin line */
ol.steps { list-style: none; margin: 0; padding: 0; counter-reset: st; display: grid; gap: 4px; }
ol.steps li { counter-increment: st; position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 16px; padding-bottom: 14px; max-width: 70ch; }
ol.steps li::before { content: counter(st); width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; font: 600 15px var(--body); color: #ffffff;
  background: linear-gradient(135deg, #4a9bff, #1258c2); box-shadow: 0 8px 16px -8px rgba(18, 88, 194, 0.6); }
ol.steps li:not(:last-child)::after { content: ""; position: absolute; left: 17px; top: 42px; bottom: 2px; width: 2px; border-radius: 1px; background: var(--rule); }
#backups ol.steps li::before { background: linear-gradient(135deg, #b04ddb, #6b0f8f); box-shadow: 0 8px 16px -8px rgba(107, 15, 143, 0.55); }
.page-body > .panel:nth-child(3) ol.steps li::before { background: linear-gradient(135deg, #4caf50, #1b6e20); box-shadow: 0 8px 16px -8px rgba(27, 110, 32, 0.5); }

/* A soft note under a panel's steps */
.note { background: var(--soft-blue); border-radius: 18px; padding: 16px 20px; color: var(--muted); max-width: none; }
.note.purple { background: var(--soft-purple); }
.note.green { background: var(--soft-green); }
.note h2 { margin-bottom: 8px; }
.panel .note p { color: var(--muted); }

/* The three passwords */
.trio { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 14px; }
.trio p { background: var(--bg); border: 1px solid var(--rule); border-radius: 20px; padding: 18px 20px; margin: 0; display: grid; gap: 10px; align-content: start; }
.mini { width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; color: #ffffff; }
.mini svg { width: 19px; height: 19px; }

/* Help: questions as a grid of panels */
.faq { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 22px; }
.faq .panel h2 { font-size: clamp(20px, 2.2vw, 24px); }

/* Privacy: a contents list beside the notice */
.doc { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 28px; align-items: start; }
.toc { position: sticky; top: 20px; display: grid; gap: 2px; background: var(--surface); border: 1px solid var(--rule); border-radius: 22px; padding: 12px; }
.toc a { color: var(--muted); text-decoration: none; padding: 9px 12px; border-radius: 12px; font-size: 15px; }
.toc a:hover { background: var(--soft-blue); color: var(--ink); }
.doc-body { display: grid; gap: 22px; }
.prose { gap: 0; }
.prose h2 { margin: 26px 0 8px; }
.prose > h2:first-child, .prose .note h2 { margin-top: 0; }
.prose h3 { font-size: 18px; margin: 18px 0 4px; letter-spacing: -0.01em; }
.prose p { margin: 0 0 12px; max-width: 70ch; }
.prose .note { margin: 14px 0 0; }
.prose .note p:last-child { margin-bottom: 0; }
@media (max-width: 880px) {
  .doc { grid-template-columns: minmax(0, 1fr); }
  .toc { position: static; display: flex; flex-wrap: wrap; }
}

/* ---- Narrow windows */
@media (max-width: 880px) {
  .hero { grid-template-columns: minmax(0, 1fr); }
  .flow { width: 100%; margin-inline: auto; justify-self: center; }
}
@media (max-width: 640px) {
  .e2e-in { grid-template-columns: 1fr; justify-items: start; }
}

/* ---- Motion: the wires march and a hover lifts; none of it, and no travelling icons, if the
   visitor asks for less (SVG's own animation ignores the setting, so the moving parts are swapped for a still frame) */
@media (prefers-reduced-motion: no-preference) {
  .primary, .glass, .ghost { transition: transform 0.15s ease, background-color 0.15s ease, border-color 0.15s ease; }
  .primary:hover, .glass:hover, .ghost:hover { transform: translateY(-2px); }
  .flow .wire { animation: march 0.9s linear infinite; }
  .plan:hover { transform: translateY(-4px); }
  .points li, .svc, .faq .panel, .plan { transition: transform 0.2s ease, box-shadow 0.2s ease; }
  .faq .panel:hover { transform: translateY(-4px); }
  .points li:hover, .svc:hover { transform: translateY(-4px); }
  .points li:hover { box-shadow: 0 1px 2px rgba(15, 27, 45, 0.04), 0 26px 50px -22px rgba(15, 27, 45, 0.32); }
  .stamp .ring { animation: turn 60s linear infinite; }
}
@keyframes march { to { stroke-dashoffset: -11; } }
@keyframes turn { to { transform: rotate(360deg); } }
/* No fade: text stays at full contrast while it moves (the access scan reads it mid-bounce) */
@keyframes pop-in {
  0% { translate: 0 48px; scale: 0.94; }
  60% { translate: 0 -8px; scale: 1.015; }
  80% { translate: 0 3px; scale: 0.997; }
  100% { translate: 0 0; scale: 1; }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .section > header, .points li, .svc, .cta, .e2e-in > *, .strip li, .panel, .toc, .plan {
      animation: pop-in linear both; animation-timeline: view(); animation-range: entry 0% cover 28%;
    }
    .points li:nth-child(2), .svc:nth-child(2), .e2e-in > :nth-child(2), .plan:nth-child(2) { animation-range: entry 8% cover 34%; }
    .points li:nth-child(3), .plan:nth-child(3) { animation-range: entry 16% cover 40%; }
  }
}
@media (prefers-reduced-motion: reduce) {
  .flow .moving { display: none; }
  .flow .still { display: inline; }
}