/* VulX landing, version 3. Calm, product-consistent, and smooth.
   Motion contract: only opacity/transform and small SVG stroke draws; no scroll listeners. */

/*! Fonts, self-hosted so the page loads nothing from other sites.
 * Geist: Copyright 2024 The Geist Project Authors (https://github.com/vercel/geist-font).
 * Newsreader: Copyright 2020 The Newsreader Project Authors (https://github.com/productiontype/Newsreader).
 * Both are licensed under the SIL Open Font License, Version 1.1 (https://openfontlicense.org);
 * the full licence texts are beside the files: assets/fonts/OFL-Geist.txt and OFL-Newsreader.txt.
 * Files: the Latin subsets of the variable fonts as distributed by Google Fonts, unmodified (the same
 * files the VulX console serves): Geist (wght 100-900), Newsreader roman and italic (opsz 6-72,
 * wght 200-800). */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('assets/fonts/geist-latin-wght.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: 'Newsreader';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('assets/fonts/newsreader-latin-opsz-wght.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: 'Newsreader';
  font-style: italic;
  font-weight: 200 800;
  font-display: swap;
  src: url('assets/fonts/newsreader-italic-latin-opsz-wght.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;
}

/* Metric-matched fallbacks (widths measured against the web fonts), so the swap to Newsreader/Geist
   barely moves the text. */
@font-face { font-family: 'Newsreader Fallback'; src: local('Georgia'); size-adjust: 94%; ascent-override: 75.5%; descent-override: 26.5%; line-gap-override: 0%; }
@font-face { font-family: 'Geist Fallback'; src: local('Arial'), local('Helvetica'); size-adjust: 102.2%; ascent-override: 98.8%; descent-override: 28.4%; line-gap-override: 0%; }

:root {
  color-scheme: light;
  --bg:        #FDFDFC;
  --bg-2:      #F6F5F1;
  --panel:     #FFFFFF;
  --ink:       #141413;
  --body:      #52514E;
  --muted:     #6B6A64;
  --line:      #E7E6E2;
  --line-2:    #D9D7D0;
  --you:       #A1185A;
  --ai:        #1D5673;
  --night:     #141413;
  --night-ink: #F3F1EA;
  --night-muted:#A9A69C;
  --pink:      #EF9DC0;
  --radius:    12px;
  --radius-sm: 8px;
  --shadow: 0 1px 2px rgba(20, 20, 19, .04), 0 8px 24px rgba(20, 20, 19, .04);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --serif: 'Newsreader', 'Newsreader Fallback', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --sans: 'Geist', 'Geist Fallback', ui-sans-serif, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --gutter: 24px;
  --nav-h: 64px;
  --section: 120px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; accent-color: var(--ink); }
html { scroll-padding-top: calc(var(--nav-h) + 16px); }
/* Smooth anchor scrolling only after load (main.js adds .smooth-ready), so a /#section link lands instantly and exactly. */
@media (prefers-reduced-motion: no-preference) { html.smooth-ready { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--bg);
  color: var(--body);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
::selection { background: #F7DCE7; color: var(--ink); }
img, svg { display: block; }
p, h1, h2, h3, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 4px; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: 16px; top: -60px; z-index: 50;
  background: var(--ink); color: #fff; padding: 10px 14px; border-radius: var(--radius-sm);
  text-decoration: none; font-weight: 500; font-size: 15px;
}
.skip:focus { top: 12px; }

.wrap { width: 100%; max-width: calc(1200px + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); }
.narrow { max-width: calc(720px + var(--gutter) * 2); }
.center { text-align: center; }
.nowrap { white-space: nowrap; }

/* ---------- Type ---------- */
.h1, .h2 {
  font-family: var(--serif);
  font-weight: 400;
  color: var(--ink);
  letter-spacing: -0.015em;
  font-optical-sizing: auto;
}
.h1 { font-size: clamp(2.75rem, 1.6rem + 4.2vw, 4.75rem); line-height: 1.04; text-wrap: balance; }
.hero .h1 { font-size: clamp(2.6rem, 1.5rem + 3.2vw, 4rem); } /* the headline is longer than v2's; keeps it to three lines beside the panel */
.h2 { font-size: clamp(2rem, 1.3rem + 2.4vw, 3rem); line-height: 1.1; text-wrap: balance; }
.h3 { font-family: var(--sans); font-weight: 600; font-size: 1.25rem; line-height: 1.3; color: var(--ink); letter-spacing: -0.005em; }
.lead { font-size: 1.25rem; line-height: 1.5; color: var(--body); text-wrap: pretty; }
.label { font-size: 13px; font-weight: 500; color: var(--muted); line-height: 1.4; margin-bottom: 16px; }
.fine { font-size: 14px; line-height: 1.5; color: var(--muted); }
.q-ai { font-family: var(--serif); font-style: italic; color: var(--ai); }
.v-you { color: var(--you); }
.v-ai { color: var(--ai); }
.v-rec { color: var(--ink); }
.v-none { color: var(--muted); }

/* ---------- Marks ---------- */
.mark { width: 18px; height: 18px; flex: none; overflow: visible; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 18px;
  border-radius: var(--radius-sm); border: 1px solid transparent;
  font-family: var(--sans); font-weight: 500; font-size: 15px; line-height: 1.2;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.btn--primary { background: var(--ink); color: #fff; }
.btn--primary:hover { background: #000; }
.btn--secondary { background: var(--panel); color: var(--ink); border-color: var(--line-2); }
.btn--secondary:hover { border-color: #BDBAB1; background: #FBFBF9; }
.btn--light { background: var(--night-ink); color: var(--ink); }
.btn--light:hover { background: #fff; }
.btn--sm { position: relative; min-height: 38px; padding: 0 14px; font-size: 14px; }
.btn--sm::before { content: ""; position: absolute; inset: -4px -1px; } /* 44px hit area (padding box + 1px border), 38px look */
.btn--block { width: 100%; }
.btn__arrow { width: 16px; height: 16px; }
@media (prefers-reduced-motion: no-preference) {
  .btn__arrow { transition: transform .2s var(--ease); }
  .btn:hover .btn__arrow { transform: translateX(2px); }
}

/* ---------- Panels ---------- */
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.panel__head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 20px; border-bottom: 1px solid var(--line);
  font-size: 13px; color: var(--muted); line-height: 1.4;
}
.panel__note { font-size: 13px; color: var(--muted); text-align: right; }
.chip {
  display: inline-flex; align-items: center; flex: none;
  padding: 1px 8px; border-radius: 6px; background: var(--bg-2); border: 1px solid var(--line);
  font-size: 12px; font-weight: 500; color: var(--body); line-height: 1.6;
}

/* ---------- Nav ---------- */
.nav-sentinel { position: absolute; top: 0; left: 0; height: 1px; width: 1px; }
.nav {
  position: sticky; top: 0; z-index: 20;
  background: var(--bg);
  border-bottom: 1px solid transparent;
  transition: border-color .25s ease;
}
.nav.is-stuck { border-bottom-color: var(--line); }
.nav__inner { height: var(--nav-h); display: flex; align-items: center; gap: 32px; }
.brand { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: var(--ink); margin-right: auto; border-radius: 6px; padding: 11px 0; }
.brand__mark { width: 22px; height: 22px; fill: var(--ink); }
.brand__name { font-family: var(--serif); font-weight: 500; font-size: 22px; line-height: 1; letter-spacing: -0.01em; transform: translateY(0.125em); } /* optically centres the letters on the swirl */
.nav__links { display: flex; gap: 28px; }
.nav__links a { font-size: 15px; color: var(--body); text-decoration: none; padding: 12px 0; transition: color .15s ease; border-radius: 4px; }
.nav__links a:hover { color: var(--ink); }
.nav__cta-short { display: none; }
.nav__signin { margin-left: auto; }
.nav__signin + .nav__cta { margin-left: -20px; } /* the two buttons sit together, 12px apart */

/* ---------- Hero ---------- */
.hero { padding: 72px 0 var(--section); }
.hero:has(+ .trusted), .hero:has(~ .trusted) { padding-bottom: 72px; } /* the trusted-by row sits right under the hero */
.hero__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: center; }
.badge {
  display: inline-block; padding: 3px 10px; border: 1px solid var(--line-2); border-radius: 6px;
  font-size: 13px; font-weight: 500; color: var(--body); line-height: 1.5; margin-bottom: 28px;
}
.hero__lead { margin-top: 24px; max-width: 22.5em; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.hero__fine { margin-top: 20px; }

.hero-panel { border-radius: 16px; }
.hero-panel .panel__head { padding: 14px 24px; }
.crumbs { color: var(--muted); }
.crumbs__sep { color: var(--line-2); margin: 0 6px; }

/* Hero overview: a small VulX dashboard. Tile titles are the feature list. */
.ov { container: ov / inline-size; overflow: hidden; }
.ov__body { padding: 20px 24px 24px; display: grid; gap: 14px; }
.fakebtn, .fakelink { cursor: default; user-select: none; -webkit-user-select: none; }
/* Example controls read as part of the picture, lighter than the page's real buttons */
.fakebtn {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  min-height: 28px; padding: 0 11px; border-radius: 6px; border: 1px solid var(--line-2); background: var(--bg-2);
  font-size: 13px; font-weight: 500; line-height: 1.25; white-space: nowrap; color: var(--body);
}
.fakelink { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; font-size: 13px; font-weight: 500; line-height: 1.4; color: var(--body); }
.fakelink svg { width: 14px; height: 14px; flex: none; }

/* A. Needs you */
.ov-need {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px;
  padding: 16px 16px 16px 20px; border: 1px solid var(--ink); border-radius: var(--radius); background: var(--panel);
}
.ov-need__tag { position: relative; display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; line-height: 20px; color: var(--ink); }
.ov-need__tag .mark { color: var(--ink); }
.ov-need__line { margin-top: 6px; padding-left: 26px; font-size: 15px; line-height: 1.5; color: var(--ink); text-wrap: pretty; }
.ov-oval { position: absolute; left: -11px; top: -9px; width: 124px; height: 38px; overflow: visible; pointer-events: none; }
.ov-oval path { fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 1.04; stroke-dashoffset: 0; opacity: .72; }
.ov-tip { opacity: 0; }

/* B. The four tiles: one hairline grid, like the console's overview row */
.ov-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: var(--radius); }
.ov-tile { padding: 18px 20px 20px; min-width: 0; }
.ov-tile:nth-child(odd) { border-right: 1px solid var(--line); }
.ov-tile:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
.ov-tile__title { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; line-height: 20px; color: var(--ink); }
.ov-tile__title .mark { width: 16px; height: 16px; }
.ov-tile__main { margin-top: 10px; font-size: 15px; font-weight: 500; line-height: 1.4; color: var(--ink); }
.ov-tile__main.q-ai { font-weight: 400; font-size: 17px; line-height: 1.3; }
.ov-tile__sub { margin-top: 4px; font-size: 13px; line-height: 1.45; color: var(--muted); text-wrap: pretty; }
.ov-status { margin-top: 8px; display: grid; gap: 4px; }
.ov-status li { display: flex; align-items: center; gap: 7px; font-size: 13px; line-height: 1.45; color: var(--body); }
.ov-status .mark { width: 14px; height: 14px; }
.ov-tile__act { margin-top: 10px; }

/* C. Footer strip */
.ov-strip { border-top: 1px solid var(--line); background: var(--bg-2); padding: 14px 24px 15px; }
.ov-strip > div { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; align-items: start; }
.ov-strip__icon { width: 18px; height: 18px; margin-top: 1px; color: var(--ink); }
.ov-strip p { font-size: 13px; line-height: 1.5; text-wrap: pretty; }
.ov-strip__title { display: block; font-weight: 600; color: var(--ink); }
.ov-strip__sub { display: block; color: var(--muted); }

/* Narrower panel: one column. Mid widths read as a list, the benefit on the left and the detail on the right. */
@container ov (max-width: 519px) {
  .ov__body { padding: 16px 16px 18px; gap: 12px; }
  .ov-need { padding: 14px 14px 14px 18px; gap: 12px; }
  .ov-grid { grid-template-columns: minmax(0, 1fr); }
  .ov-tile { padding: 15px 16px 16px; }
  .ov-tile:nth-child(odd) { border-right: 0; }
  .ov-tile:not(:last-child) { border-bottom: 1px solid var(--line); }
  .ov-tile__main { margin-top: 6px; }
  .ov-strip { padding: 13px 16px 14px; }
}
@container ov (min-width: 420px) and (max-width: 519px) {
  .ov-tile > .ov-in { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); column-gap: 12px; }
  .ov-tile > .ov-in > * { grid-column: 2; }
  .ov-tile .ov-tile__title { grid-column: 1; grid-row: 1 / span 3; align-self: start; line-height: 21px; }
  .ov-tile__main { margin-top: 0; }
  .ov-tile__main.q-ai { line-height: 21px; }
}
/* Phones: "Review" moves up beside the label so the sentence gets the full width */
@container ov (max-width: 419px) {
  .ov-need { align-items: center; row-gap: 4px; }
  .ov-need__main { display: contents; }
  .ov-need__tag { grid-column: 1; grid-row: 1; justify-self: start; }
  .ov-need .fakebtn { grid-column: 2; grid-row: 1; }
  .ov-need__line { grid-column: 1 / -1; grid-row: 2; margin-top: 0; }
}

/* ---------- Sections ---------- */
.section { padding: var(--section) 0; }
.band { background: var(--bg-2); }
.section-head { max-width: 720px; margin-bottom: 56px; }
.section-head .lead { margin-top: 18px; max-width: 34.5em; }
.section-head.center { margin-left: auto; margin-right: auto; }

/* 2. Why */
.why .h2 { max-width: 22ch; margin: 0 auto; }
.why__l1, .why__l2 { display: block; }
.why__l1 { padding-bottom: .12em; }
.done { position: relative; display: inline-block; font-style: italic; color: var(--ai); margin-right: .1em; }
.underline { position: absolute; left: -2%; width: 104%; height: 12px; bottom: -0.1em; overflow: visible; pointer-events: none; }
.underline path { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 1 1.04; stroke-dashoffset: 0; }
.qpills { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 44px auto 0; max-width: 680px; }
.qpill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px 8px 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 999px;
  font-size: 15px; line-height: 1.35; color: var(--ink); text-align: left;
}
.qpill .mark { color: var(--muted); width: 16px; height: 16px; }
.why__p { margin: 44px auto 0; max-width: 38.5em; }
.why__strong { margin: 20px auto 0; max-width: 34.5em; color: var(--ink); font-size: 1.125rem; font-weight: 500; line-height: 1.55; text-wrap: pretty; }

/* 3. How */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.step { position: relative; }
.step__art { border-radius: var(--radius); overflow: hidden; background: var(--bg-2); aspect-ratio: 16 / 10; border: 1px solid var(--line); }
.step__art img, .step__art svg { width: 100%; height: 100%; object-fit: cover; }
.step__body { position: relative; padding-top: 22px; }
.step__who { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; line-height: 20px; }
.step__who .mark { width: 20px; height: 20px; }
.step__who > span:not(.step__link) { color: inherit; white-space: nowrap; flex: none; }
.step__body .h3 { margin-top: 14px; }
.step__body p:not(.step__who) { margin-top: 8px; font-size: 15.5px; line-height: 1.6; }
/* connector: from just right of this card's mark row across the gap to the next mark */
.step__link { display: none; flex: 1 1 auto; height: 12px; margin: 0 -24px 0 8px; min-width: 24px; pointer-events: none; }
.step__link svg { width: 100%; height: 100%; overflow: visible; }
.step__link path { fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: 1 1.04; stroke-dashoffset: 0; opacity: .6; }

.proof { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: center; margin-top: 88px; }
.proof__title { font-family: var(--serif); font-weight: 400; font-size: 1.75rem; line-height: 1.2; letter-spacing: -0.01em; color: var(--ink); }
.proof__copy > p { margin-top: 14px; max-width: 32em; }
.report { margin: 0; }
.report__title { font-weight: 600; color: var(--ink); font-size: 14px; }
.report__body { padding: 20px 24px 20px; }
.report__changed { font-size: 17px; line-height: 1.45; }
.checks { margin-top: 14px; border-top: 1px solid var(--line); }
.check { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.check__name { font-size: 15px; color: var(--ink); }
.check__state { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; flex: none; }
.check__state .q-ai { font-size: 16px; }
.check__who { font-size: 13px; color: var(--ai); margin-left: -4px; }
.report__foot { margin-top: 14px; font-size: 13px; color: var(--muted); }

/* Two-column rows (undo) */
.two-col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); gap: 64px; align-items: center; }

/* 5. Undo */
.undo-sec .two-col { align-items: start; }
.undo-sec .undo__copy { padding-top: 24px; }
.undo__copy > p:not(.label) { margin-top: 18px; max-width: 34.5em; }
.undo__copy .h2 { margin-bottom: 6px; }
.undo__copy .h2 > span { display: block; } /* one sentence per line under both fonts */
.undo__body { padding: 22px 24px 22px; }
.undo__labels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; font-size: 13px; line-height: 1.35; color: var(--ink); }
.undo__who { display: block; font-weight: 500; margin-bottom: 2px; }
.undo__labels .q-ai { font-size: 14px; }
.undo__labels p:nth-child(2) { text-align: center; }
.undo__labels p:nth-child(3) { text-align: right; }
.undo__art { width: 100%; height: auto; margin-top: 10px; overflow: visible; }
.u-orig { fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; transition: stroke .5s ease; }
.u-ask { fill: none; stroke: var(--you); stroke-width: 1.8; stroke-linecap: round; stroke-dasharray: 6 7; }
.u-draw { fill: none; stroke: #fff; stroke-width: 10; stroke-linecap: round; stroke-dasharray: 1 1.04; stroke-dashoffset: 0; }
.u-done { fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 1 1.04; stroke-dashoffset: 0; }
.u-bg { fill: var(--panel); }
.u-mark { overflow: visible; }
.u-mark.v-rec { color: var(--ink); }
.u-tip { opacity: 0; }
.u-ghost { display: none; fill: none; stroke: var(--line-2); stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: 1 6; }
.js .undo[data-stage="0"] .u-ghost { display: inline; }
/* Labels for the lower (undo) path, placed under its two marks (x = 40 and 280 of 560) */
.undo__low { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); column-gap: 8px; margin-top: 4px; font-size: 13px; line-height: 1.35; color: var(--ink); }
.u-low { grid-row: 1; }
.u-low--end { grid-column: 1; }
.u-low--mid { grid-column: 2; text-align: center; }
.js .undo .u-low { transition: opacity .35s ease, color .35s ease; }
.js .undo:not([data-stage="2"]) .u-low--end, .js .undo:not([data-stage="2"]) .u-low--end .undo__who { color: var(--muted); }
.js .undo .u-low--mid { opacity: 0; }
.js .undo[data-stage="1"] .u-low--mid, .js .undo[data-stage="2"] .u-low--mid { opacity: 1; }
.js-anim .undo[data-stage="1"] .u-low--mid { transition-delay: .75s; }
.js-anim .undo[data-stage="2"] .u-low--end { transition-delay: .95s; }
.undo__actions { margin-top: 14px; }
.undo__btn { display: none; }
.js .undo__btn { display: inline-flex; min-width: min(16.5rem, 100%); max-width: 100%; white-space: normal; text-align: center; }
.undo__notes { margin-top: 18px; }
.u-group { display: grid; gap: 10px; }
.u-g2 { margin-top: 10px; } /* no JS: the groups follow each other as one list */
.u-note, .u-idle { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; font-size: 14.5px; line-height: 1.5; color: var(--ink); }
.u-note .mark, .u-idle .mark { margin-top: 2px; }
.u-idle { display: none; color: var(--muted); }
.u-note__who { font-weight: 500; }

/* JS controls the undo story; without JS (or after the head failsafe) the full story shows and the button is hidden.
   The stage groups share one grid cell, so the card reserves only the tallest group, never all of them added up. */
.js .undo__notes { display: grid; }
.js .undo .u-idle, .js .undo .u-group { grid-area: 1 / 1; margin: 0; }
.js .undo .u-idle { display: grid; }
.js .undo .u-idle, .js .undo .u-group { visibility: hidden; opacity: 0; }
.js .undo[data-stage="0"] .u-idle,
.js .undo[data-stage="1"] .u-g1,
.js .undo[data-stage="2"] .u-g2 { visibility: visible; opacity: 1; }
@keyframes noteIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
/* fill "backwards": the end frame equals the normal style, so no layer is held once it finishes */
.js-anim .undo[data-stage="1"] .u-g1 .u-note,
.js-anim .undo[data-stage="2"] .u-g2 .u-note { animation: noteIn .45s var(--ease) .12s backwards; }
.js-anim .undo[data-stage="2"] .u-g2 .u-note + .u-note { animation-delay: .22s; }
.js .undo use.u-st1, .js .undo circle.u-st1, .js .undo use.u-st2, .js .undo circle.u-st2 { opacity: 0; transition: opacity .35s ease; }
.js .undo[data-stage="1"] use.u-st1, .js .undo[data-stage="1"] circle.u-st1,
.js .undo[data-stage="2"] use.u-st1, .js .undo[data-stage="2"] circle.u-st1,
.js .undo[data-stage="2"] use.u-st2, .js .undo[data-stage="2"] circle.u-st2 { opacity: 1; }
.js .undo .u-ask { opacity: 0; }
.js .undo[data-stage="1"] .u-ask { opacity: 1; }
html:not(.js) .undo .u-ask { opacity: 0; }
.js-anim .undo[data-stage="2"] .u-ask { transition: opacity .3s ease 1.05s; }
.js .undo .u-done { stroke-dashoffset: 1.02; }
.js .undo[data-stage="2"] .u-done { stroke-dashoffset: 0; }
html:not(.js) .undo .u-orig, .js .undo[data-stage="2"] .u-orig { stroke: #BAB8B0; }
.js-anim .undo .u-draw { stroke-dashoffset: 1.02; }
.js-anim .undo[data-stage="1"] .u-draw,
.js-anim .undo[data-stage="2"] .u-draw { stroke-dashoffset: 0; transition: stroke-dashoffset .9s cubic-bezier(.45, .1, .3, 1); }
.js-anim .undo[data-stage="2"] .u-done { transition: stroke-dashoffset 1.1s cubic-bezier(.45, .1, .3, 1); }
.js-anim .undo[data-stage="1"] use.u-st1, .js-anim .undo[data-stage="1"] circle.u-st1 { transition-delay: .75s; }
.js-anim .undo[data-stage="2"] use.u-st2, .js-anim .undo[data-stage="2"] circle.u-st2 { transition-delay: .95s; }
.undo.is-resetting * { transition: none !important; animation: none !important; }

/* 6. Next */
.next .h2 { max-width: 24ch; margin: 0 auto; }
.next__p { margin: 24px auto 0; max-width: 38.5em; }
.tchips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 36px; }
.tchips li { padding: 6px 14px; border: 1px solid var(--line-2); border-radius: 999px; font-size: 14px; font-weight: 500; color: var(--ink); background: var(--panel); }
.next__cap { margin: 16px auto 0; max-width: 34.5em; }
.tech { margin: 40px auto 0; max-width: 720px; text-align: left; border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); }
.tech summary, .qa summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  cursor: pointer; list-style: none; color: var(--ink); font-weight: 500;
}
.tech summary { padding: 18px 2px; font-size: 15px; min-height: 48px; border-radius: 4px; }
.tech summary::-webkit-details-marker, .qa summary::-webkit-details-marker { display: none; }
.plus { position: relative; width: 14px; height: 14px; flex: none; }
@media (prefers-reduced-motion: no-preference) { .plus { transition: transform .25s var(--ease); } }
.plus::before, .plus::after { content: ""; position: absolute; left: 0; top: 6.25px; width: 14px; height: 1.5px; background: currentColor; border-radius: 1px; }
.plus::after { transform: rotate(90deg); }
details[open] > summary .plus { transform: rotate(45deg); }
.tech__body { padding: 0 40px 20px 2px; font-size: 15px; line-height: 1.6; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.js-anim details[open] > .tech__body, .js-anim details[open] > .qa__a { animation: fadeIn .28s var(--ease); }

/* 7. Jobs */
.jobs__title { max-width: 28ch; margin: 0 auto; text-align: center; }
.jobs__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 20px; max-width: 880px; margin: 56px auto 0; align-items: start; }
.jobs__title > span { display: block; }
.job { padding: 26px 28px 20px; }
.job__title { font-size: 13px; font-weight: 500; color: var(--muted); margin-bottom: 10px; }
.job__list li { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); font-size: 16px; line-height: 1.45; color: var(--ink); }
.job__list li:first-child { border-top: 0; }
.job__list .mark { margin-top: 2px; }
.job__list.v-you .mark { color: var(--you); }
.jobs__line { margin: 48px auto 0; text-align: center; color: var(--ink); max-width: 36em; text-wrap: balance; }

/* 8. Pricing */
.plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; max-width: 880px; margin: 0 auto; }
.plan { padding: 30px 30px 32px; display: flex; flex-direction: column; }
.plan__kicker { font-size: 13px; font-weight: 500; color: var(--muted); }
.plan__name { font-family: var(--serif); font-weight: 400; font-size: 1.75rem; line-height: 1.2; color: var(--ink); margin-top: 10px; letter-spacing: -0.01em; }
.plan__price { display: flex; align-items: baseline; gap: 8px; margin-top: 18px; }
.plan__amount { font-family: var(--serif); font-size: 3rem; line-height: 1; color: var(--ink); letter-spacing: -0.02em; }
.plan__unit { font-size: 14px; color: var(--muted); }
.plan__line { margin-top: 12px; font-size: 15px; line-height: 1.55; color: var(--body); margin-bottom: 24px; }
@supports (grid-template-rows: subgrid) {
  .plans { grid-template-rows: repeat(6, auto); row-gap: 0; }
  .plan { display: grid; grid-row: span 6; grid-template-rows: subgrid; row-gap: 0; align-content: start; }
  .plan__line--b { grid-row: 3 / span 2; align-self: start; margin-top: 18px; } /* spans plan A's price and line rows, so both buttons share a line */
}
.plan__list { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); display: grid; gap: 10px; }
.plan__list li { position: relative; padding-left: 18px; font-size: 15px; line-height: 1.5; color: var(--ink); }
.plan__list li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 5px; height: 5px; border-radius: 50%; background: var(--ink); }
.plans__fine { margin: 28px auto 0; max-width: 40em; font-size: 13px; }

/* 9. FAQ */
.faq__list { margin-top: 48px; border-top: 1px solid var(--line-2); }
.qa { border-bottom: 1px solid var(--line-2); }
.qa summary { padding: 22px 2px; font-size: 1.0625rem; line-height: 1.4; min-height: 44px; border-radius: 4px; }
.qa__a { padding: 0 40px 24px 2px; }
.qa__a p { font-size: 16px; line-height: 1.65; max-width: 40em; }
.qa__a a { color: var(--ink); text-underline-offset: 3px; }

/* 10. Closing band + footer */
.night { background: var(--night); color: var(--night-muted); }
.night :focus-visible { outline-color: var(--night-ink); }
.close { padding-top: var(--section); padding-bottom: 104px; text-align: center; }
.close__title { color: var(--night-ink); max-width: 24ch; margin: 0 auto; }
.close__l { display: block; }
.close__pink { display: block; color: var(--pink); margin-top: .12em; }
.close__mine { position: relative; display: inline-block; }
.underline--night { color: var(--night-ink); bottom: -0.2em; }
.close__actions { display: flex; flex-direction: column; align-items: center; gap: 16px; margin-top: 44px; }
.close__or { font-size: 15px; color: var(--night-muted); }
.close__or a, .foot a { color: var(--night-ink); text-decoration: none; padding-block: 13px; }
.foot__legal a { margin-block: -13px; }
.close__or a:hover, .foot a:hover { text-decoration: underline; text-underline-offset: 3px; }
.foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px;
  padding-top: 28px; padding-bottom: 40px;
  border-top: 1px solid rgba(243, 241, 234, .12);
  font-size: 14px; color: var(--night-muted);
}
.foot__brand { display: inline-flex; align-items: center; gap: 8px; color: var(--night-ink); font-weight: 500; margin-right: auto; }
.foot__mark { width: 18px; height: 18px; fill: var(--night-ink); }
.foot__brand span { font-family: var(--serif); font-weight: 500; font-size: 19px; line-height: 1; letter-spacing: -0.01em; transform: translateY(0.125em); }
.foot__legal { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.foot__legal a { color: var(--night-muted); }
.foot__legal a:hover { color: var(--night-ink); }
/* keep the wrap gutter while giving the footer its own rule line */
.night .foot { max-width: calc(1200px); padding-left: 0; padding-right: 0; width: calc(100% - var(--gutter) * 2); }

/* ---------- Motion (only under html.js-anim; everything else shows final states) ---------- */
@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.js-anim [data-load] { animation: rise .6s var(--ease) backwards; animation-delay: var(--d, 0ms); }
.js-anim .hero__panel-wrap[data-load] { animation-duration: .7s; }

.js-anim [data-reveal],
.js-anim [data-reveal-group] > *,
.js-anim .report .report__changed,
.js-anim .report .check,
.js-anim .report .report__foot {
  opacity: 0; transform: translateY(12px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
  transition-delay: var(--d, 0ms);
}
.js-anim .report .report__changed,
.js-anim .report .check,
.js-anim .report .report__foot { transform: translateY(6px); transition-duration: .5s; transition-delay: calc(var(--d, 0ms) + 200ms); }
.js-anim [data-reveal].is-in,
.js-anim [data-reveal-group] > .is-in,
.js-anim .report.is-in .report__changed,
.js-anim .report.is-in .check,
.js-anim .report.is-in .report__foot { opacity: 1; transform: none; }

/* A nav click shows everything it skips over at once (main.js adds .reveal-now for one frame) */
.reveal-now [data-reveal], .reveal-now [data-reveal-group] > *, .reveal-now .report *,
.reveal-now .underline path, .reveal-now .step__link path { transition: none !important; }

/* Pencil underlines draw once on reveal */
.js-anim [data-reveal] .underline path { stroke-dashoffset: 1.02; }
.js-anim .is-in[data-reveal] .underline path { stroke-dashoffset: 0; transition: stroke-dashoffset .8s cubic-bezier(.45, .1, .3, 1) .55s; }

/* How-it-works connector draws once on reveal */
.js-anim .steps .step__link path { stroke-dashoffset: 1.02; }
.js-anim .steps .step.is-in .step__link path { stroke-dashoffset: 0; transition: stroke-dashoffset .55s cubic-bezier(.45, .1, .3, 1); transition-delay: calc(var(--d, 0ms) + 450ms); }

/* Hero overview, played once by main.js (hidden only under js-anim until .is-on) */
.js-anim .ov .ov-in { opacity: 0; transform: translateY(8px); }
.js-anim .ov.is-on .ov-in {
  opacity: 1; transform: none;
  transition: opacity .5s var(--ease), transform .5s var(--ease);
  transition-delay: calc(var(--t0, 0ms) + var(--i, 0) * var(--step, 70ms));
}
.js-anim .ov.ov--fast.is-on .ov-in { transition-duration: .35s; }
.js-anim .ov:not(.is-circled) .ov-oval path { stroke-dashoffset: 1.02; }
.js-anim .ov.is-circled .ov-oval path { transition: stroke-dashoffset .68s cubic-bezier(.45, .1, .3, 1); }

/* ---------- Responsive ---------- */
@media (min-width: 1100px) {
  .step__link { display: block; }
  .step__body .h3 { min-height: 2.6em; } /* the four paragraphs share a top line */
}
@media (max-width: 1099px) {
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 28px; }
  .step__art { aspect-ratio: 16 / 8; }
}
@media (max-width: 1199px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; }
}
@media (max-width: 999px) {
  :root { --section: 96px; }
  .hero { padding-top: 48px; }
  .hero__grid { grid-template-columns: minmax(0, 1fr); gap: 56px; }
  /* stacked: one centred column, so nothing sits lopsided on the left */
  .hero__grid.wrap, .two-col.wrap, .nav__inner.wrap { max-width: calc(700px + var(--gutter) * 2); }
  .two-col { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .proof { grid-template-columns: minmax(0, 1fr); gap: 32px; max-width: 700px; margin-left: auto; margin-right: auto; margin-top: 72px; }
}
@media (max-width: 899px) {
  .nav__links { display: none; }
}
@media (max-width: 699px) {
  :root { --section: 80px; --gutter: 20px; }
  body { font-size: 16px; }
  .lead { font-size: 1.125rem; }
  .jobs__grid, .plans { grid-template-columns: minmax(0, 1fr); }
  .plans { grid-template-rows: none; row-gap: 20px; }
  .plan { display: flex; grid-row: auto; }
  .plan__line--b { margin-top: 12px; }
  .hero-panel .panel__head, .panel__head { padding-left: 18px; padding-right: 18px; }
  .undo__body, .report__body { padding-left: 18px; padding-right: 18px; }
  .job, .plan { padding: 24px 22px; }
  .check { flex-direction: column; align-items: flex-start; gap: 4px; }
  .qa__a { padding-right: 8px; }
  .section-head { margin-bottom: 40px; }
  .proof { margin-top: 56px; }
}
@media (max-width: 559px) {
  .steps { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .step__art { aspect-ratio: 16 / 9; }
  .nav__inner { gap: 16px; }
  .nav__signin + .nav__cta { margin-left: -6px; }
  .nav__cta-long { display: none; }
  .nav__cta-short { display: inline; }
  .actions .btn { flex: 1 1 auto; }
  .panel__head { flex-wrap: wrap; }
  .panel__note { text-align: left; }
  .undo__labels { font-size: 12px; gap: 8px; }
  .undo__low { font-size: 12px; }
  /* the diagram scales to ~0.6 here: thicker strokes keep its lines above 1px */
  .u-orig, .u-done { stroke-width: 2.6; }
  .u-ask { stroke-width: 2.8; }
  .u-ghost { stroke-width: 2.4; }
  .foot { flex-direction: column; align-items: flex-start; }
}
/* Phones: the example sits right under the headline and lead, so the features show on the first screen */
@media (max-width: 559px) {
  .hero { padding-top: 32px; }
  .hero__grid { gap: 0; }
  .hero__copy { display: contents; }
  .hero__grid > * , .hero__copy > * { min-width: 0; }
  .badge { justify-self: start; margin-bottom: 20px; }
  .hero__lead { margin-top: 18px; }
  .hero__panel-wrap { order: 1; margin-top: 28px; }
  .actions { order: 2; margin-top: 28px; }
  .hero__fine { order: 3; }
}
@media (max-width: 399px) {
  :root { --gutter: 16px; }
  .qpill { font-size: 14px; }
}

@media (forced-colors: active) {
  .plus::before, .plus::after { forced-color-adjust: none; background: CanvasText; }
}

@media print {
  .nav, .skip, .undo__btn { display: none !important; }
  .js-anim [data-reveal], .js-anim [data-reveal-group] > *,
  .js-anim .report .check, .js-anim .report .report__changed, .js-anim .report .report__foot,
  .js-anim .ov .ov-in { opacity: 1 !important; transform: none !important; }
  .js-anim .ov-oval path, .js-anim .underline path, .js-anim .step__link path { stroke-dashoffset: 0 !important; }
}

/* ---------- Trusted by: a slow wordmark carousel (transform only; pauses off screen and on hover) ---------- */
.trusted { padding: 0 0 88px; }
.trusted__label { text-align: center; font-size: 13px; font-weight: 500; color: var(--muted); margin: 0 0 22px; padding: 0 var(--gutter); }
.marquee { position: relative; display: flex; overflow: hidden; max-width: 1200px; margin: 0 auto; }
.marquee::before, .marquee::after { content: ''; position: absolute; top: 0; bottom: 0; width: 96px; z-index: 1; pointer-events: none; }
.marquee::before { left: 0; background: linear-gradient(90deg, var(--bg), rgba(253, 253, 252, 0)); }
.marquee::after { right: 0; background: linear-gradient(270deg, var(--bg), rgba(253, 253, 252, 0)); }
.marquee__track { display: flex; flex-shrink: 0; align-items: center; gap: 56px; padding: 6px 56px 6px 0; margin: 0; list-style: none; animation: marquee 48s linear infinite; }
.marquee__item { display: flex; align-items: center; gap: 10px; height: 40px; font: 600 18px/1 var(--sans); letter-spacing: -0.015em; color: var(--muted); white-space: nowrap; }
.marquee__item img { display: block; height: var(--h, 24px); width: auto; filter: grayscale(1); opacity: .72; transition: opacity .2s var(--ease), filter .2s var(--ease); }
.marquee:hover .marquee__item img { filter: none; opacity: 1; }
.marquee__item span { font: 600 18px/1 var(--sans); letter-spacing: -0.015em; color: var(--muted); }
.marquee:hover .marquee__track, .marquee.is-paused .marquee__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-100%); } }
@media (max-width: 700px) {
  .trusted { padding-bottom: 64px; }
  .marquee::before, .marquee::after { width: 40px; }
  .marquee__track { gap: 40px; padding-right: 40px; animation-duration: 40s; }
  .marquee__item, .marquee__item span { font-size: 16px; }
  .marquee__item img { height: calc(var(--h, 24px) * .86); }
}
@media (prefers-reduced-motion: reduce) {
  .marquee { flex-wrap: wrap; justify-content: center; padding: 0 var(--gutter); }
  .marquee::before, .marquee::after { display: none; }
  .marquee__track { animation: none; flex: 1 1 100%; min-width: 0; flex-wrap: wrap; justify-content: center; row-gap: 14px; column-gap: 36px; padding: 0; }
  .marquee__track[aria-hidden="true"] { display: none; }
}

/* ---------- A customer's words ---------- */
.quote-sec { padding-top: 104px; padding-bottom: 32px; }
.quote { margin: 0; }
.quote__text { margin: 0; }
.quote__text p { font: 400 clamp(1.5rem, 1.1rem + 1.4vw, 2.15rem)/1.32 var(--serif); letter-spacing: -0.012em; color: var(--ink); text-wrap: balance; }
.quote__by { display: inline-flex; align-items: center; gap: 12px; margin-top: 28px; text-align: left; }
.quote__logo { width: 36px; height: 36px; flex-shrink: 0; border-radius: 9px; }
.quote__name { display: block; font-size: 15px; font-weight: 600; color: var(--ink); line-height: 1.3; }
.quote__role { display: block; font-size: 14px; color: var(--muted); line-height: 1.3; }
.quote__role a { color: inherit; text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
.quote__role a:hover { color: var(--ink); text-decoration-color: currentColor; }
@media (max-width: 700px) { .quote-sec { padding-top: 80px; padding-bottom: 16px; } }