/* ==========================================================================
   numrow marketing site — visual system (v4)

   The page is built as stacked sheets of paper. Where one chapter ends and
   the next begins the edge is TORN, not ruled: a strip at the top of the new
   chapter carries the previous chapter's colour and is clipped along a ragged
   line. That single device, plus one warm neutral against the cool brand, is
   what stops a navy-and-cyan site reading as a cold gradient deck.

   Colour rule, and the reason there are two cyans:
     #22D3EE is the brand. On white it is ~1.8:1 — decoration only: underline
     strokes, rules, the ghost mark, anything on ink. Accent WORDS on light
     use --cy-600 at display sizes (3.6:1, AA-large) and --cy-700 for anything
     smaller (5.2:1). The primary button is navy with white text, which is both
     the highest-contrast option and the one that reads as the brand.
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@500;600;700;800&family=Public+Sans:wght@400;500;600&display=swap');

:root {
  /* ---- Ink: text, and the dark chapters ---- */
  --ink-900: #081521;
  --ink-800: #0E1D2E;
  --ink:     #122033;   /* brand navy */
  --ink-700: #1B3149;
  --ink-600: #27405A;
  --ink-line: rgba(255,255,255,.12);
  --ink-body: #BFCEDC;

  /* ---- Cyan: the brand, and its readable descendants ---- */
  --cy-50:  #ECFEFF;
  --cy-100: #D6F7FD;
  --cy-200: #AEEFFA;
  --cy-300: #6FE0F3;
  --cy-400: #22D3EE;    /* brand — decoration and ink backgrounds only */
  --cy-500: #0FB6D6;
  --cy-600: #0B94B4;    /* accent words, 30px and up */
  --cy-700: #0A7691;    /* links, eyebrows, small accent text */
  --cy-800: #0C5A6F;

  /* ---- Sand: the warm counterweight ---- */
  --sand-50:  #FBF7F2;
  --sand-100: #F5EDE2;
  --sand-200: #EADFCD;
  --clay:     #B26A3C;

  /* ---- Support ---- */
  --mint-50: #EDFBF4;  --mint-100: #D6F1E5;  --green: #12855C;
  --amber-bg: #FBF0DA; --amber: #B77A0C;
  --red-bg: #FBE8E7;   --red: #C0413C;
  --violet-bg: #E9EDFB; --violet: #4F63C4;

  /* ---- Neutrals, cooled toward the navy ---- */
  --n-50:  #F7F8FA;  --n-100: #EEF1F5;  --n-200: #E2E7ED;  --n-300: #C9D2DB;
  --n-400: #98A4B2;  --n-500: #6B7784;  --n-600: #4E5A67;  --n-700: #36414D;

  /* ---- Chapter tints ---- */
  --paper: #FFFFFF;
  --wash:  #EDFAFD;
  --sky:   #EDF3FB;
  --sand:  #FAF5EE;
  --mint:  #EEF8F3;

  --page: #FFFFFF;
  --text: var(--ink);
  --body: var(--n-600);
  --muted: var(--n-500);

  --font-display: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-ui: 'Public Sans', system-ui, sans-serif;

  --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --r-pill: 999px;
  --shadow-card: 0 1px 2px rgba(18,32,51,.05), 0 10px 28px rgba(18,32,51,.07);
  --shadow-float: 0 2px 6px rgba(18,32,51,.06), 0 24px 60px rgba(18,32,51,.14);
  --shadow-plate: 0 40px 90px -30px rgba(8,21,33,.55);

  --container: 1200px;
  --nav-h: 68px;
  --aud-h: 44px;
  --edge-h: 64px;

  /* The width of one brush tile. The strokes themselves are named where they
     are used rather than here: a url() inside a custom property is resolved
     against the DOCUMENT in some engines, and dist/fr/index.html would then
     look for the stroke beside itself instead of beside the stylesheet. */
  --brush-w: 1800px;

  /* Names the pre-v4 pages still use. One palette, two vocabularies. */
  --brand-cyan: var(--cy-400);
  --brand-navy: var(--ink);
  --blue-50: var(--cy-50); --blue-100: var(--cy-100); --blue-200: var(--cy-200); --blue-300: var(--cy-300);
  --blue-500: var(--cy-500); --blue-600: var(--cy-700); --blue-700: var(--cy-800); --blue-800: var(--ink-600);
  --gray-50: var(--n-50); --gray-100: var(--n-100); --gray-200: var(--n-200); --gray-300: var(--n-300);
  --gray-400: var(--n-400); --gray-500: var(--n-500); --gray-600: var(--n-600); --gray-700: var(--n-700);
  --amber-500: var(--amber); --amber-100: var(--amber-bg);
  --red-500: var(--red); --red-100: var(--red-bg);
  --green-500: var(--green); --green-100: var(--mint-100);
  --wash-cyan: var(--wash); --wash-sky: var(--sky); --wash-sand: var(--sand-100); --wash-mint: var(--mint);
  --ink-2: var(--ink-700);
  --r-sheet: 0px;
}

*,*::before,*::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--page); color: var(--body); font: 400 17px/1.62 var(--font-ui); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, svg { display: block; max-width: 100%; }
/* width/height attributes are there to reserve the box, not to size the image. */
img { height: auto; }
a { color: var(--cy-700); text-decoration: none; }
a:hover { color: var(--ink); }
:focus-visible { outline: 3px solid var(--cy-500); outline-offset: 3px; border-radius: 6px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } html { scroll-behavior: auto; } }

/* ---------- Type ---------- */
h1, h2, h3, h4, h5 { font-family: var(--font-display); color: var(--text); margin: 0; letter-spacing: -.025em; line-height: 1.06; }
h1 { font-size: clamp(36px, 4.6vw, 60px); font-weight: 800; }
h2 { font-size: clamp(29px, 3.5vw, 46px); font-weight: 800; line-height: 1.08; }
h3 { font-size: 22px; font-weight: 700; letter-spacing: -.015em; line-height: 1.22; }
h4 { font-size: 16px; font-weight: 700; letter-spacing: -.005em; line-height: 1.3; }
p { margin: 0; }
.lede { font-size: 19px; line-height: 1.58; max-width: 34em; color: var(--body); }
.small { font-size: 14px; color: var(--muted); }
.center { text-align: center; }
.center .lede, .center .measure { margin-inline: auto; }
.measure { max-width: 36em; }

/* The signature: a trailing phrase in accent colour, with a marker stroke
   under it. Colour and stroke are separable — `.cy` alone tints, `.ul` alone
   underlines — because a headline wants one emphasis, not two competing ones. */
.cy { color: var(--cy-600); }
.sec.ink .cy, .closing .cy { color: var(--cy-400); }
.ul { position: relative; display: inline; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 14' preserveAspectRatio='none'%3E%3Cpath d='M3 9.4c34-4.3 70-6.2 108-5.6 38 .6 73 2.9 106 6.9' fill='none' stroke='%2322D3EE' stroke-width='3.4' stroke-linecap='round'/%3E%3Cpath d='M14 12.2c30-2.6 62-3.6 96-3.2' fill='none' stroke='%2322D3EE' stroke-width='1.8' stroke-linecap='round' opacity='.55'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: 0 96%; background-size: 100% .21em; padding-bottom: .06em; }

/* Eyebrow above a chapter heading. Never raw cyan — this is small text. */
.eyebrow { display: block; font: 700 13px/1.3 var(--font-display); letter-spacing: .09em; text-transform: uppercase; color: var(--cy-700); margin-bottom: 14px; }
.sec.ink .eyebrow, .closing .eyebrow { color: var(--cy-400); }

/* ---------- Layout ---------- */
.container { width: min(var(--container), 100% - 48px); margin-inline: auto; position: relative; z-index: 1; }
.container.narrow { max-width: 900px; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
.split.wide-right { grid-template-columns: 5fr 7fr; }
.split.wide-left { grid-template-columns: 7fr 5fr; }
.split > .copy { max-width: 30em; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.stack { display: flex; flex-direction: column; gap: 16px; }
.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
@media (max-width: 980px) {
  .split, .split.wide-right, .split.wide-left { grid-template-columns: 1fr; gap: 40px; }
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } body { font-size: 16px; } .container { width: min(var(--container), 100% - 32px); } }

/* ---------- Chapters, and the brushed edge between them ----------
   A `.sec` is one chapter. Adding `.sheet` says "this chapter is laid over
   the last": it grows a strip along its top edge painted in the PREVIOUS
   chapter's colour and masked along a brush stroke, so the join reads as one
   colour painted over the other. The previous colour is picked up with an
   adjacent-sibling rule, which is why nothing in the markup has to name it.
   The mask TILES rather than stretching — a stroke stretched to 1600px is a
   row of blurred triangles, not bristles. */
.sec { position: relative; padding: 104px 0; }
.sec.tight { padding: 72px 0; }
.sec.paper { background: var(--paper); }
.sec.wash  { background: var(--wash); }
.sec.sky   { background: var(--sky); }
.sec.sand  { background: var(--sand); }
.sec.mint  { background: var(--mint); }
.sec.ink   { background: var(--ink); color: var(--ink-body); overflow: hidden; }
.sec.ink::after { content: ""; position: absolute; right: -22%; top: -60%; width: 62%; aspect-ratio: 1; border-radius: 50%; border: 2px solid var(--cy-400); opacity: .16; pointer-events: none; }
.sec.ink h1, .sec.ink h2, .sec.ink h3, .sec.ink h4, .sec.ink b { color: #fff; }
.sec.ink .lede { color: var(--ink-body); }
.sec.ink .small { color: rgba(255,255,255,.58); }
.sec.ink a:not(.btn) { color: var(--cy-300); }
.sec.ink a:not(.btn):hover { color: #fff; }

.sheet { padding-top: calc(104px + var(--edge-h)); }
.sheet.tight { padding-top: calc(72px + var(--edge-h)); }
.sheet::before, .closing::before {
  content: ""; position: absolute; left: -1px; right: -1px; top: -1px;
  height: var(--edge-h); background: var(--paper);
  -webkit-mask-image: url("brush-a.svg"); mask-image: url("brush-a.svg");
  -webkit-mask-size: var(--brush-w) 100%; mask-size: var(--brush-w) 100%;
  -webkit-mask-repeat: repeat-x; mask-repeat: repeat-x;
  z-index: 2; pointer-events: none;
}
/* Two neighbours never end on the same stroke. */
.sec:nth-of-type(even).sheet::before { -webkit-mask-image: url("brush-b.svg"); mask-image: url("brush-b.svg"); }
.sec:nth-of-type(3n).sheet::before { -webkit-mask-image: url("brush-c.svg"); mask-image: url("brush-c.svg"); }
/* Both edges of a navy chapter are straight. The stroke reads as paint laid on
   paper, and paper is what the tinted chapters are; against the darkest ground
   on the page the same bristles read as a torn print. Unmasking the strip
   leaves it a plain band of the colour above, which is the straight line —
   the padding the chapter reserves for the edge stays as it is. */
.sec.ink.sheet::before,
.sec.ink + .sheet::before,
.sec.ink + .closing::before,
.closing::before { -webkit-mask-image: none; mask-image: none; }
/* Whatever the chapter above was painted, the strip is painted too. */
.hero + .sheet::before,
.sec.paper + .sheet::before { background: var(--paper); }
.sec.wash  + .sheet::before, .sec.wash  + * + .closing::before { background: var(--wash); }
.sec.sky   + .sheet::before { background: var(--sky); }
.sec.sand  + .sheet::before { background: var(--sand); }
.sec.mint  + .sheet::before { background: var(--mint); }
.sec.ink   + .sheet::before { background: var(--ink); }
.sec.wash + .closing::before { background: var(--wash); }
.sec.sky  + .closing::before { background: var(--sky); }
.sec.sand + .closing::before { background: var(--sand); }
.sec.mint + .closing::before { background: var(--mint); }
.sec.ink  + .closing::before { background: var(--ink); }

.mark-ghost { position: absolute; pointer-events: none; opacity: .035; }
.mark-ghost path, .mark-ghost rect { fill: #fff; }
/* Anchored to the corner and nudged out in the MARK's own units, not the
   section's: a percentage of a tall section hides almost all of the shape,
   while 5% of the mark keeps ~91% of it on the page whatever the section
   height — and keeps both of the mark's squares whole, which is what makes it
   read as the logo rather than as a stray curve. */
.sec.ink .mark-ghost { right: 0; top: 0; translate: 5% -4%; width: 34%; max-width: 440px; }
/* A brush stroke is a desktop flourish: at phone width the bristles are wider
   than the gap between two lines of body copy, and the join reads as noise.
   Chapters meet as plain rectangles instead, and the strip goes away entirely
   rather than being drawn shorter. */
@media (max-width: 980px) { .sec { padding: 76px 0; } .sheet { padding-top: 76px; } .mark-ghost { display: none; } :root { --edge-h: 0px; } .sheet::before, .closing::before { display: none; } }

/* Chapter label — a numbered step. Only where the chapters are a sequence. */
.chapter { display: inline-flex; align-items: center; gap: 10px; font: 700 13px var(--font-display); letter-spacing: .08em; text-transform: uppercase; color: var(--cy-700); margin-bottom: 18px; }
.chapter::before { content: attr(data-n); width: 28px; height: 28px; border-radius: 50%; background: var(--cy-700); color: #fff; display: grid; place-items: center; font-size: 12px; letter-spacing: 0; }
.sec.ink .chapter { color: var(--cy-400); }
.sec.ink .chapter::before { background: var(--cy-400); color: var(--ink); }

/* ---------- Buttons & links ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 14px 24px; border-radius: var(--r-pill); font: 700 15px var(--font-display); border: 1.5px solid transparent; cursor: pointer; white-space: nowrap; letter-spacing: -.005em; transition: background .18s var(--ease), color .18s, box-shadow .2s, border-color .18s, transform .18s var(--ease); }
.btn:hover { transform: translateY(-1px); }
.btn.primary { background: var(--ink); color: #fff; }
.btn.primary:hover { background: var(--ink-700); color: #fff; box-shadow: 0 10px 26px -8px rgba(18,32,51,.55); }
.btn.secondary { background: #fff; color: var(--ink); border-color: var(--n-200); }
.btn.secondary:hover { border-color: var(--ink); color: var(--ink); }
.btn.ink { background: var(--ink); color: #fff; }
.btn.ink:hover { background: var(--ink-700); color: #fff; }
.btn.ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.34); }
.btn.ghost:hover { border-color: #fff; color: #fff; background: rgba(255,255,255,.06); }
.sec.ink .btn.primary, .closing .btn.primary { background: var(--cy-400); color: var(--ink-900); }
.sec.ink .btn.primary:hover, .closing .btn.primary:hover { background: var(--cy-300); color: var(--ink-900); box-shadow: 0 10px 30px -8px rgba(34,211,238,.5); }
.btn.sm { padding: 10px 18px; font-size: 14px; }
.btn.block { width: 100%; }
.btn svg, .link svg { width: 16px; height: 16px; flex: none; }

/* The outlined CTA with an icon tile in it — the one that sits under a
   feature block's checklist. */
.btn.tile { background: #fff; color: var(--ink); border-color: var(--n-200); padding: 8px 20px 8px 8px; gap: 12px; box-shadow: var(--shadow-card); }
.btn.tile:hover { border-color: var(--cy-400); box-shadow: 0 10px 26px -10px rgba(11,148,180,.5); }
.btn.tile .ic { width: 38px; height: 38px; border-radius: var(--r-pill); background: var(--cy-50); display: grid; place-items: center; flex: none; }
.btn.tile .ic svg { width: 18px; height: 18px; stroke: var(--cy-700); fill: none; stroke-width: 1.9; }
.btn.tile > svg:last-child { opacity: .45; }

.link { font: 700 15px var(--font-display); color: var(--cy-700); display: inline-flex; gap: 7px; align-items: center; }
.link:hover { color: var(--ink); gap: 10px; }
.link { transition: gap .18s var(--ease), color .18s; }
.sec.ink .link { color: var(--cy-300); } .sec.ink .link:hover { color: #fff; }

/* ---------- Audience bar ----------
   Three doors into the same product, above the nav, the way a visitor is asked
   "which of these are you?" before anything else is claimed. Each is a page,
   not a tab panel: the whole landing changes, and the URL has to say so. */
.audiences { background: #fff; border-bottom: 1px solid var(--n-100); position: relative; z-index: 60; }
.audiences .container { display: flex; align-items: center; gap: 4px; height: var(--aud-h); }
.audiences a { font: 500 14px var(--font-ui); color: var(--n-500); padding: 6px 12px; border-radius: 8px; white-space: nowrap; position: relative; }
.audiences a:hover { color: var(--ink); background: var(--n-50); }
.audiences a[aria-current] { color: var(--ink); font-weight: 600; }
.audiences a[aria-current]::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 2px; background: var(--ink); border-radius: 2px; }
.audiences .aside { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.audiences .aside a { color: var(--ink); }
@media (max-width: 780px) {
  .audiences .container { width: 100%; padding-inline: 16px; overflow-x: auto; scrollbar-width: none; gap: 0; }
  .audiences .container::-webkit-scrollbar { display: none; }
  .audiences .aside { display: none; }
  .audiences a { padding: 6px 10px; font-size: 13px; }
}

/* ---------- Nav ---------- */
.nav { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.88); backdrop-filter: blur(16px); border-bottom: 1px solid rgba(18,32,51,.07); }
.nav .container { display: flex; align-items: center; gap: 26px; height: var(--nav-h); }
.brand { display: inline-flex; align-items: center; gap: 10px; font: 800 22px var(--font-display); color: var(--ink); letter-spacing: -.035em; }
.brand .tile { width: 30px; height: 30px; flex: none; }
.brand .wm { display: inline-flex; letter-spacing: -.035em; }
.brand .wm .num { color: var(--cy-500); }
.brand .wm .row { color: var(--ink); }
.brand.light .wm .row { color: #fff; }
.brand.light .wm .num { color: var(--cy-400); }
.nav-links { display: flex; gap: 2px; list-style: none; margin: 0; padding: 0; }
.nav-links > li { position: relative; }
.nav-links a, .nav-links button { display: inline-flex; align-items: center; gap: 5px; padding: 9px 13px; border-radius: 9px; font: 500 15px var(--font-ui); color: var(--ink); background: none; border: 0; cursor: pointer; font-family: var(--font-ui); }
.nav-links a:hover, .nav-links button:hover, .nav-links a[aria-current="page"], .nav-links button[aria-expanded="true"], .nav-links button.on { background: var(--cy-50); color: var(--cy-800); }
.nav-links svg { width: 12px; height: 12px; opacity: .55; }
.nav-actions { margin-left: auto; display: flex; gap: 10px; align-items: center; }
.nav-actions .signin { font: 500 15px var(--font-ui); color: var(--ink); padding: 9px 12px; }
.nav-toggle { display: none; margin-left: auto; background: none; border: 0; padding: 8px; cursor: pointer; color: var(--ink); }
/* Sign in lives in the audience bar wherever that bar has room for it, and in
   the nav only where it does not — one door, not two side by side. */
@media (min-width: 781px) { .nav-actions .signin { display: none; } }
.nav-toggle svg { width: 24px; height: 24px; }

/* Product panel */
.panel { position: absolute; left: 0; top: calc(100% + 12px); width: 880px; background: #fff; border-radius: var(--r-lg); box-shadow: var(--shadow-float); border: 1px solid var(--n-100); padding: 20px; display: none; grid-template-columns: 2fr 1fr; gap: 20px; }
.panel[data-open="true"] { display: grid; }
.panel h5 { margin: 0 0 8px 12px; font: 700 11.5px var(--font-display); letter-spacing: .08em; text-transform: uppercase; color: var(--n-500); }
.panel .items { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.panel .item { display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; color: var(--ink); }
.panel .item:hover { background: var(--n-50); }
.panel .item .icon-tile { width: 36px; height: 36px; border-radius: 10px; } .panel .item .icon-tile svg { width: 18px; height: 18px; }
.panel .item b { display: block; font: 700 14px var(--font-display); white-space: nowrap; }
.panel .item span { font-size: 13px; color: var(--n-500); line-height: 1.4; }
.panel .aside { background: var(--wash); border-radius: 14px; padding: 16px; display: flex; flex-direction: column; gap: 4px; }
.panel .aside a { display: block; padding: 8px 10px; border-radius: 10px; color: var(--ink); font: 700 14px var(--font-display); }
.panel .aside a small { display: block; font: 400 13px var(--font-ui); color: var(--n-600); }
.panel .aside a:hover { background: rgba(255,255,255,.75); }
.panel .foot { grid-column: 1 / -1; border-top: 1px solid var(--n-100); padding-top: 14px; display: flex; gap: 20px; flex-wrap: wrap; }

@media (max-width: 980px) {
  .nav-links, .nav-actions { display: none; }
  .nav-toggle { display: inline-flex; }
  .nav.open { position: fixed; inset: 0 0 auto; height: 100dvh; overflow-y: auto; background: #fff; backdrop-filter: none; z-index: 70; }
  .nav.open .nav-links, .nav.open .nav-actions { display: flex; }
  .nav.open .container { flex-wrap: wrap; height: auto; padding-block: 12px 32px; align-items: flex-start; }
  .nav.open .brand { order: 1; } .nav.open .nav-toggle { order: 2; }
  /* The flex item is the <nav> wrapper, not the list inside it: ordering the
     list leaves the wrapper first and pushes the brand off the left edge. */
  .nav.open .container > nav { order: 3; width: 100%; }
  .nav.open .nav-links { flex-direction: column; width: 100%; align-items: stretch; margin-top: 12px; gap: 2px; }
  .nav.open .nav-links a, .nav.open .nav-links button { font-size: 18px; font-weight: 600; padding: 14px 12px; width: 100%; justify-content: space-between; }
  .nav.open .nav-actions { width: 100%; order: 4; margin-left: 0; margin-top: 20px; flex-direction: column-reverse; align-items: stretch; }
  .nav.open .nav-actions .btn { width: 100%; padding-block: 15px; }
  .nav.open .nav-actions .signin { text-align: center; border: 1.5px solid var(--n-200); border-radius: var(--r-pill); padding: 14px; font-weight: 600; }
  .panel { position: static; width: auto; grid-template-columns: 1fr; box-shadow: none; border: 0; padding: 4px 0 8px; }
  .panel .items { grid-template-columns: 1fr; }
}

/* ---------- Hero ----------
   A soft wash that resolves to paper at the fold, so the first brushed edge has
   something plain to tear away from. */
.hero { position: relative; padding: 76px 0 108px; overflow: hidden; background: linear-gradient(168deg, var(--cy-50) 0%, #F4FBFC 34%, var(--paper) 88%); }
.hero::after { content: ""; position: absolute; inset: auto 0 0; height: 120px; background: linear-gradient(to bottom, rgba(255,255,255,0), var(--paper)); pointer-events: none; }
/* The hero's copy column is wider than a normal split's: a display-size
   headline in a 5fr column wraps into ribbons, and an accent phrase that wraps
   three times draws three marker strokes. Scoped to the desktop layout — it is
   more specific than the rule that collapses a split, and would outrank it. */
@media (min-width: 981px) { .hero .split.wide-right { grid-template-columns: 1fr 1fr; } }
.hero h1 + .lede { margin-top: 22px; font-size: 20px; }
.hero .row { margin-top: 34px; }
@media (max-width: 980px) { .hero { padding: 44px 0 72px; } .hero h1 + .lede { font-size: 18px; } }

/* Soft shapes behind the hero visual — the only decoration on a light page. */
.blobs { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.blob { position: absolute; border-radius: 48% 52% 42% 58% / 55% 40% 60% 45%; filter: blur(6px); opacity: .8; }
.blob.cyan { background: var(--cy-100); } .blob.mint { background: var(--mint-100); }
.blob.sky { background: var(--sky); } .blob.sand { background: var(--sand-100); }

/* Trust line under the hero CTA — chips, because there are no logos to show. */
.trust { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 30px; }
.trust span { display: inline-flex; align-items: center; gap: 7px; font: 600 13px var(--font-ui); color: var(--n-600); background: rgba(255,255,255,.8); border: 1px solid var(--n-200); border-radius: var(--r-pill); padding: 7px 14px; }
.trust svg { width: 14px; height: 14px; stroke: var(--cy-700); fill: none; stroke-width: 2; }

/* The capability bar that straddles the hero and the chapter below it. Two
   cards, not one: a cyan card sits behind the navy one and is offset down and
   right, so the offset itself is the shadow. Both are pseudo-elements of the
   same box so they cannot drift apart — the navy one paints the background the
   links sit on, the cyan one peeks out past two of its edges.
   `.capbar` is its own stacking context (z-index: 3, which is what lifts it
   over the brushed edge of the chapter below), so a negative z-index inside it
   goes behind the element's own content but never escapes the bar. */
.capbar { border-radius: var(--r-xl); padding: 22px 12px; display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; position: relative; z-index: 3; isolation: isolate; }
.capbar::before, .capbar::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; }
.capbar::before { background: var(--ink); box-shadow: var(--shadow-plate); z-index: -1; }
.capbar::after { background: var(--cy-400); translate: 12px 12px; z-index: -2; }
.capbar a { display: grid; justify-items: center; gap: 10px; padding: 10px 6px; border-radius: 14px; color: #fff; font: 600 13.5px var(--font-ui); text-align: center; line-height: 1.3; }
.capbar a:hover { background: rgba(255,255,255,.07); color: #fff; }
.capbar svg { width: 22px; height: 22px; stroke: var(--cy-400); fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
/* The offset has to stay inside the container's gutter, so it shrinks with it. */
@media (max-width: 980px) { .capbar { grid-template-columns: repeat(3, 1fr); border-radius: var(--r-lg); } .capbar::after { translate: 9px 9px; } }
@media (max-width: 520px) { .capbar { grid-template-columns: repeat(2, 1fr); } .capbar a { font-size: 12.5px; } .capbar::after { translate: 7px 7px; } }

/* ---------- Product plate ----------
   A screen capture mounted on a navy plate with a brand arc swept behind it,
   cropped so it runs off the edge of the column. The crop is the point: a
   whole browser window shrunk to fit reads as a thumbnail, a cropped one reads
   as a product. */
.plate { position: relative; background: var(--ink); border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--shadow-plate); padding: 26px 0 26px 26px; }
.plate::before, .plate::after { content: ""; position: absolute; border-radius: 50%; border-style: solid; border-color: var(--cy-400); pointer-events: none; }
.plate::before { width: 165%; aspect-ratio: 1; left: -70%; top: -52%; border-width: 26px; opacity: .30; }
.plate::after { width: 118%; aspect-ratio: 1; left: -34%; top: -22%; border-width: 3px; opacity: .5; }
.plate img { position: relative; z-index: 1; width: 100%; border-radius: 10px 0 0 10px; box-shadow: 0 18px 40px -14px rgba(0,0,0,.6); outline: 1px solid rgba(255,255,255,.14); outline-offset: -1px; }
.plate.pad { padding: 26px; } .plate.pad img { border-radius: 10px; }
.plate.flip { padding: 26px 26px 26px 0; } .plate.flip img { border-radius: 0 10px 10px 0; }
.plate.flip::before { left: auto; right: -62%; } .plate.flip::after { left: auto; right: -30%; }
/* Runs past the column edge on wide screens; tucked back in when it can't. */
.bleed-r { margin-right: calc((100vw - min(var(--container), 100vw - 48px)) / -2 - 0px); }
.bleed-l { margin-left: calc((100vw - min(var(--container), 100vw - 48px)) / -2 - 0px); }
/* On a phone a whole desk screen shrunk to 360px is a grey rectangle with
   something happening in it. The plate becomes a window onto roughly a quarter
   of the capture instead — the top left of the working area, past the sidebar —
   which is not legible either, but does show what the interface IS. */
@media (max-width: 980px) {
  .bleed-r, .bleed-l { margin-inline: 0; }
  .plate, .plate.flip { padding: 16px; }
  .plate img, .plate.flip img { border-radius: 8px; transform: scale(2) translate(-20%, -3%); transform-origin: 0 0; outline: none; box-shadow: none; }
}

/* A capture shown on its own, floating on the page rather than on a plate. */
.shot { border-radius: 16px; box-shadow: var(--shadow-float); border: 1px solid var(--n-200); overflow: hidden; }
.shot img { width: 100%; display: block; }
/* ---------- Devices ----------
   The two frames the product is shown in.

   The phone is an outline drawn in Inkscape (assets/iphone-15-pro.svg): body,
   titanium rail, buttons, bezel and Dynamic Island, all of it. It is laid
   BEHIND the capture rather than over it, because the aperture in that file is
   a filled rect — the capture covers it exactly, so nothing shows through, and
   the one piece of the frame that has to sit ON TOP of the screen, the island,
   is redrawn here at the same place.

   Every number below is a fraction measured off that file, so the frame and
   what is inside it can never drift apart: aperture 4.635%/2.089% in, 90.73%
   by 95.822%, corners at 14.42% of its width. The aperture's own ratio is
   1290:2796 — the iPhone 15 Pro screen, and the size
   scripts/capture-screens.mjs captures at.

   The status bar is a strip lifted off a real screenshot rather than drawn:
   the clock and the battery are exactly the shapes iOS renders, which is not
   something a hand-built copy gets right. It is a separate image because the
   captures are per language and this strip is not. */
.phone { --pw: 262px; position: relative; width: var(--pw); aspect-ratio: 356 / 730; }
.phone .frame { position: absolute; inset: 0; width: 100%; height: 100%; }
/* A quarter of a percent wider than the aperture measures, on every side: at
   the measured size a hairline of the file's own screen fill survives the
   rounding and rings the capture in grey. Over-covering eats that much of a
   bezel five pixels thick, which nothing can see. */
.phone .screen {
  position: absolute; left: 4.05%; top: 1.60%; width: 91.90%; height: 96.80%;
  border-radius: 14.35% / 6.63%; overflow: hidden; background: #FAFAFA;
  display: flex; flex-direction: column; z-index: 1;
}
.phone .bar { flex: none; width: 100%; }
.phone .app { flex: 1; min-height: 0; width: 100%; object-fit: cover; object-position: top; }
/* The Dynamic Island, and the lens four fifths of the way along it. */
.phone .island {
  position: absolute; left: 50%; translate: -50% 0; top: 1.39%; width: 32.2%; height: 4%;
  border-radius: var(--r-pill); background: #05070a; z-index: 3;
}
.phone .island::after {
  content: ""; position: absolute; left: 81.7%; top: 50%; translate: -50% -50%;
  width: 11%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 38% 34%, #2d3d4e, #141c25 46%, #080b10);
}

/* MacBook Pro, photographed rather than drawn: assets/macbook-pro.webp is the
   whole machine — lid, bezel, camera notch, the foot and the dish where a
   thumb opens it — with the display cut out of it.

   Every number below is a fraction measured off that file, the way the phone's
   are off its SVG, so the frame and what is inside it can never drift apart:
   aperture 10.81%/2.11% in, 78.37% by 86.65%. Its own ratio is 1.563, which is
   a 16" MacBook Pro panel and NOT the 16:10 the captures are taken at — hence
   `cover`, which crops about a fortieth off the right rather than squashing
   the interface.

   The frame is the one part of the rig that stays in FLOW. Two reasons, and
   both are load-bearing:
     · It has to paint OVER the capture. The notch cuts 5% down into the
       aperture and the bezel rounds its corners; a capture on top would erase
       both, and a capture underneath needs no rounding of its own.
     · In flow, the file's own proportions give the laptop its height. Nothing
       here restates a ratio that the image already knows. */
.laptop { position: relative; }
.laptop .frame { display: block; position: relative; z-index: 2; width: 100%; height: auto; pointer-events: none; }
.laptop .screen {
  position: absolute; left: 10.81%; top: 2.11%; width: 78.37%; height: 86.65%;
  overflow: hidden; background: #05070a; z-index: 1;
}
.laptop .screen img { width: 100%; height: 100%; object-fit: cover; object-position: left top; border-radius: 0; }

/* Everything in the rig is a fraction of ONE box — the rig itself — so the
   composition is a single picture scaled, at 390px and at 2560px alike.

   That is why `.bleed-r` is on the rig rather than on the laptop: the bleed is
   half the page gutter, it grows without bound as the window widens past the
   container, and while it belonged to the laptop alone the laptop grew and
   nothing else did. A phone sized in px next to it went the other way — at
   390px it ended up the LARGER of the two devices, which is the one thing the
   picture must never say.

   The chain, every term a percentage of the rig:

     laptop = 100% - --lap-x          (the file is the whole machine, foot and
                                       all: there is no overhang to pad for)
     phone  = laptop × .21
     phone's right edge = the lid's outer edge + .04 × laptop

   .21 is not taste. The file is 2200 × 1273, so the machine is .5786 as tall
   as it is wide, and a phone is 730/356 as tall as it is wide. Asking for a
   phone no more than three quarters the height of the laptop is asking for
   .75 × .5786 / 2.0506 of the laptop's width, which is .2116. Swap the frame
   for a machine of different proportions and this number moves with it.

   .0955 is where the lid's outer edge sits in the file — measured at the
   aperture's mid height, since the lid tapers a hair towards the hinge. The
   foot is wider than the lid and reaches both edges of the file, so the phone
   stands in front of the foot as well as the lid, which is what a phone
   propped against a laptop actually does. */
.rig {
  position: relative;
  /* How far the laptop is inset from the left of the rig: the gap the phone
     stands in, and the only number here anyone should want to turn. */
  --lap-x: 12%;
  --lap-w: calc(100% - var(--lap-x));
}
/* The capability bar is a full-width row of the hero grid rather than a
   container of its own: once the grid collapses to one column, source order is
   the only thing that can put it between the copy and the devices. */
.hero .split > .capbar { grid-column: 1 / -1; }
/* The laptop runs out to the edge of the page the way a `.plate` does, but it
   is never CROPPED there: the rig's own bleed is exactly the gutter, so the
   whole machine lands inside the viewport at every width. */
.rig .laptop { margin-left: var(--lap-x); }
/* The phone stands in front of the laptop's near corner, overlapping the lid
   by a twenty-fifth of the machine's width — written as the lid's edge, plus
   that overlap, less the phone, so the two keep their relationship whatever
   the laptop is doing. Its centre sits a little below the laptop's, anchored
   to that centre line rather than to the bottom of the rig, so it never grows
   down into whatever follows the hero. */
.rig .phone {
  position: absolute; top: 50%; translate: 0 -46%; z-index: 4;
  --pw: calc(var(--lap-w) * .21);
  left: calc(var(--lap-x) + var(--lap-w) * .1355 - var(--pw));
}
/* The one floating notification, over the laptop's far corner. The phone holds
   the near one, so a second card there would be a third thing to read. */
.rig .mock-float { position: absolute; left: 27%; top: -8%; z-index: 5; }
/* Under this the column is too narrow for three things at once: the card is
   the one that carries the least. Nothing else in the rig changes at any
   width — below 980 the bleed goes to zero with every other `.bleed-r` on the
   page, the rig becomes the container, and the same picture is drawn smaller. */
@media (max-width: 1180px) { .rig .mock-float { display: none; } }

/* ---------- The product chapter's illustration ----------
   One drawing rather than a diagram assembled in CSS: the labels, the lead
   lines and the numrow plinth are all inside the file. Capped on a phone
   because the drawing is wide and shallow — at the full column width its
   figures come out smaller than the type beside them. */
.scene { position: relative; margin: 0; }
.scene img { display: block; width: 100%; height: auto; }
@media (max-width: 980px) { .scene { max-width: 520px; margin-inline: auto; } }

/* ---------- Cards & tiles ---------- */
.card { background: #fff; border-radius: var(--r-lg); box-shadow: var(--shadow-card); padding: 28px; }
.card.flat { box-shadow: none; border: 1.5px solid var(--n-200); }
.card.tint-cyan { background: var(--wash); box-shadow: none; }
.card.tint-sky { background: var(--sky); box-shadow: none; }
.card.tint-sand { background: var(--sand-100); box-shadow: none; }
.card.tint-mint { background: var(--mint); box-shadow: none; }
.card.featured { border: 2px solid var(--cy-400); box-shadow: var(--shadow-float); position: relative; }
.card > h3 + p, .card > h4 + p { margin-top: 8px; }
.sec.ink .card { background: var(--ink-700); box-shadow: none; border: 1px solid var(--ink-line); color: var(--ink-body); }
.sec.ink .card h3, .sec.ink .card h4, .sec.ink .card b { color: #fff; }

/* A card that is a link to somewhere else — the "all features" grid. */
.card.jump { display: block; color: var(--ink); transition: transform .2s var(--ease), box-shadow .2s; }
.card.jump:hover { transform: translateY(-3px); box-shadow: var(--shadow-float); color: var(--ink); }
.card.jump h3 { display: flex; align-items: center; gap: 8px; }
.card.jump h3 svg { width: 18px; height: 18px; stroke: var(--cy-700); fill: none; stroke-width: 2.2; transition: transform .2s var(--ease); }
.card.jump:hover h3 svg { transform: translateX(4px); }
.card.jump img { border-radius: 10px; margin-top: 20px; border: 1px solid var(--n-200); }

.checks { list-style: none; padding: 0; margin: 0; display: grid; gap: 11px; }
.checks li { display: flex; gap: 11px; align-items: flex-start; color: var(--ink); font-size: 15.5px; line-height: 1.45; }
.checks li::before { content: ""; flex: none; width: 20px; height: 20px; margin-top: 2px; border-radius: 50%; background: var(--cy-50) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A7691' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center/12px no-repeat; }
.sec.ink .checks li { color: rgba(255,255,255,.9); }
.sec.ink .checks li::before { background-color: rgba(34,211,238,.16); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322D3EE' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E"); }

.pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 15px; border-radius: var(--r-pill); background: #fff; border: 1.5px solid var(--n-200); font: 500 14px var(--font-ui); color: var(--ink); }
.pill.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.pill .ic { width: 22px; height: 22px; border-radius: 6px; background: var(--wash); display: grid; place-items: center; flex: none; }
.pill .ic svg { width: 13px; height: 13px; stroke: var(--cy-700); }
.pill > svg { width: 14px; height: 14px; }
.chip { display: inline-flex; padding: 9px 17px; border-radius: var(--r-pill); font: 700 14px var(--font-display); background: #fff; border: 1.5px solid var(--n-200); color: var(--ink); cursor: pointer; }
.chip[aria-pressed="true"], .chip.on { background: var(--ink); color: #fff; border-color: var(--ink); }

.badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: var(--r-pill); font: 600 11.5px var(--font-ui); white-space: nowrap; }
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge.matched { background: var(--mint-100); color: var(--green); }
.badge.ready { background: var(--cy-50); color: var(--cy-700); }
.badge.review { background: var(--amber-bg); color: var(--amber); }
.badge.processed { background: var(--n-100); color: var(--n-600); }
.badge.blocked { background: var(--red-bg); color: var(--red); }
.badge.native { background: var(--wash); color: var(--cy-800); }
.badge.plain::before { display: none; }

.icon-tile { width: 44px; height: 44px; border-radius: 13px; background: var(--wash); display: grid; place-items: center; flex: none; }
.icon-tile svg { width: 22px; height: 22px; stroke: var(--cy-700); fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.icon-tile.sky { background: var(--sky); } .icon-tile.sky svg { stroke: var(--violet); }
.icon-tile.sand { background: var(--sand-100); } .icon-tile.sand svg { stroke: var(--clay); }
.icon-tile.mint { background: var(--mint-100); } .icon-tile.mint svg { stroke: var(--green); }
.icon-tile.lg { width: 58px; height: 58px; border-radius: 17px; } .icon-tile.lg svg { width: 27px; height: 27px; }
.sec.ink .icon-tile { background: rgba(34,211,238,.14); } .sec.ink .icon-tile svg { stroke: var(--cy-400); }

/* A window onto one part of a capture, rather than the whole screen shrunk to
   a thumbnail. `--z` is how wide the capture is drawn relative to the window,
   and `--x` / `--y` slide it under that window — three numbers per card, set
   where the card is written, because which corner of a screen answers a
   sentence is a question about the sentence. */
.crop { position: relative; overflow: hidden; border-radius: 12px; aspect-ratio: 16 / 10; background: var(--n-100); box-shadow: 0 1px 2px rgba(18,32,51,.06), 0 12px 26px -14px rgba(18,32,51,.35); }
.crop img { position: absolute; max-width: none; width: var(--z, 100%); left: var(--x, 0); top: var(--y, 0); border-radius: 0; }

/* The three places a month goes. Each one is a sentence and the screen it
   happens on — the old version was three paragraphs under three rules, which
   on a phone came out as black lines on white and read as an errata sheet.

   Each card is TWO cards, the same way `.capbar` is: a cyan one offset down
   and right behind a white one, so the offset itself is the shadow rather
   than a blur under it. Both are pseudo-elements of the article, so they
   cannot drift apart, and `isolation` keeps their negative z-index inside the
   card instead of sinking it behind the chapter. The offset has to live in the
   grid's gap — 12px inside 28px — or the cyan of one card reaches the next. */
.pains { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.pains article {
  position: relative; isolation: isolate; border-radius: var(--r-lg);
  padding: 18px 18px 24px; display: flex; flex-direction: column; gap: 18px;
}
.pains article::before, .pains article::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
}
.pains article::before { background: #fff; box-shadow: var(--shadow-card); z-index: -1; }
.pains article::after { background: var(--cy-400); translate: 12px 12px; z-index: -2; }
.pains h3 { font-size: 20px; }
.pains p { font-size: 15.5px; line-height: 1.5; margin-top: 8px; }
/* One column: the offset now has the section's own gutter to sit in, and the
   cards are stacked, so it shrinks to clear the card below. */
@media (max-width: 980px) { .pains { grid-template-columns: 1fr; gap: 26px; } .pains article::after { translate: 9px 9px; } }


/* ---------- Alternating feature blocks ---------- */
.feature { display: grid; grid-template-columns: 1fr 1fr; gap: 76px; align-items: center; padding: 72px 0; }
.feature + .feature { border-top: 1px solid rgba(18,32,51,.08); }
.sec.ink .feature + .feature { border-color: var(--ink-line); }
.feature:first-of-type { padding-top: 0; }
.feature:last-of-type { padding-bottom: 0; }
.feature .n { font: 800 46px/1 var(--font-display); color: var(--cy-300); letter-spacing: -.045em; margin-bottom: 12px; }
.feature .copy > h2 + p, .feature .copy > h3 + p { margin-top: 16px; }
.feature .checks { margin-top: 26px; }
.feature .btn.tile, .feature .link { margin-top: 30px; }
.feature.flip > .copy { order: 2; }
@media (max-width: 980px) {
  .feature, .feature.flip { grid-template-columns: 1fr; gap: 36px; padding: 48px 0; }
  .feature.flip > .copy { order: 0; }
}

/* Numbered step rail — four steps down one column, a line joining them. */
.rail { display: grid; gap: 0; }
.rail .step { display: grid; grid-template-columns: 48px 1fr; gap: 22px; padding-bottom: 34px; position: relative; }
.rail .step:last-child { padding-bottom: 0; }
.rail .step::before { content: ""; position: absolute; left: 23px; top: 48px; bottom: 6px; width: 2px; background: var(--cy-200); }
.rail .step:last-child::before { display: none; }
.rail .step .n { width: 48px; height: 48px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; font: 800 17px var(--font-display); position: relative; z-index: 1; }
.rail .step h3 { margin-top: 10px; }
.rail .step p { margin-top: 8px; font-size: 16px; }
.sec.ink .rail .step::before { background: rgba(34,211,238,.35); }
.sec.ink .rail .step .n { background: var(--cy-400); color: var(--ink); }

/* Channels (integrations) */
.channel { display: grid; grid-template-columns: 58px 1fr; gap: 20px; align-items: start; padding: 28px; }
.channel h3 { margin-bottom: 8px; }
.channel .meta { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.channel .meta span { font: 500 12.5px var(--font-ui); padding: 4px 11px; border-radius: var(--r-pill); background: var(--n-100); color: var(--n-700); }
.sec.ink .channel .meta span { background: rgba(255,255,255,.09); color: rgba(255,255,255,.82); }
code.inline { font: 500 13px ui-monospace, Menlo, monospace; background: var(--n-100); color: var(--ink); padding: 2px 6px; border-radius: 6px; }
.sec.ink code.inline { background: rgba(255,255,255,.1); color: #fff; }
.code { background: var(--ink-900); color: #D8E1EC; border-radius: 16px; padding: 22px 24px; font: 400 13px/1.65 ui-monospace, Menlo, monospace; overflow: auto; white-space: pre; margin: 0; }
.code .k { color: var(--cy-400); } .code .s { color: #FFD479; } .code .c { color: #6E7A8A; }

/* FAQ */
.faq { border-top: 1px solid var(--n-200); }
.faq details { border-bottom: 1px solid var(--n-200); }
.faq summary { list-style: none; cursor: pointer; padding: 20px 0; display: flex; justify-content: space-between; gap: 16px; font: 700 17px var(--font-display); color: var(--ink); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-weight: 500; color: var(--cy-700); transition: transform .18s; font-size: 22px; line-height: 1; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding-bottom: 20px; font-size: 16px; max-width: 62ch; }
.sec.ink .faq, .sec.ink .faq details { border-color: var(--ink-line); }
.sec.ink .faq summary { color: #fff; } .sec.ink .faq summary::after { color: var(--cy-400); }

/* Forms */
.field { display: grid; gap: 6px; }
.field label { font: 600 13px var(--font-ui); color: var(--ink); }
.field input, .field select, .field textarea { font: 400 15px var(--font-ui); padding: 13px 15px; border: 1.5px solid var(--n-200); border-radius: 12px; background: #fff; color: var(--ink); width: 100%; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--cy-500); outline: none; box-shadow: 0 0 0 4px rgba(15,182,214,.18); }
.search { display: flex; align-items: center; gap: 10px; padding: 15px 20px; border-radius: var(--r-pill); background: #fff; border: 1.5px solid var(--n-200); box-shadow: var(--shadow-card); }
.search svg { width: 18px; height: 18px; stroke: var(--n-400); fill: none; stroke-width: 2; }
.search input { border: 0; outline: 0; flex: 1; font: 400 16px var(--font-ui); color: var(--ink); background: transparent; }
.steps { display: flex; gap: 8px; flex-wrap: wrap; }
.steps .step { display: inline-flex; gap: 8px; align-items: center; padding: 6px 13px; border-radius: var(--r-pill); font: 600 13px var(--font-ui); color: var(--n-500); background: var(--n-100); }
.steps .step.on { background: var(--ink); color: #fff; }
.steps .step.done { background: var(--mint-100); color: var(--green); }
.steps .step svg { width: 14px; height: 14px; }

.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.stats b { display: block; font: 800 50px/1 var(--font-display); color: var(--ink); letter-spacing: -.04em; }
.stats span { display: block; margin-top: 10px; font-size: 15px; color: var(--muted); }
.sec.ink .stats b { color: #fff; } .sec.ink .stats span { color: rgba(255,255,255,.62); }

.compare { width: 100%; border-collapse: collapse; font-size: 15px; }
.compare th, .compare td { padding: 15px 12px; border-bottom: 1px solid var(--n-200); text-align: center; }
.compare th:first-child, .compare td:first-child { text-align: left; color: var(--ink); }
.compare th { font: 700 15px var(--font-display); color: var(--ink); }
.compare td .ok { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--cy-50); }
.compare td .ok svg { width: 12px; height: 12px; stroke: var(--cy-700); fill: none; stroke-width: 3; }
.compare td .no { color: var(--n-300); }
.cal { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.cal .d, .cal .t { padding: 11px; border-radius: 11px; border: 1.5px solid var(--n-200); text-align: center; font: 600 13px var(--font-ui); color: var(--ink); background: #fff; }
.cal .d { background: var(--n-50); font-size: 12px; }
.cal .t.on { border-color: var(--cy-400); background: var(--wash); color: var(--cy-800); }

/* Workflow track — six stages on one line, on ink */
.track { position: relative; display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.track::before { content: ""; position: absolute; left: 8%; right: 8%; top: 28px; height: 2px; background: linear-gradient(90deg, transparent, var(--cy-400) 15%, var(--cy-400) 85%, transparent); opacity: .45; }
.track .st { position: relative; text-align: center; }
.track .st .icon-tile { width: 56px; height: 56px; border-radius: 17px; margin: 0 auto 18px; background: var(--ink); border: 2px solid var(--cy-400); }
.track .st .icon-tile svg { stroke: var(--cy-400); width: 24px; height: 24px; }
.track .st b { display: block; font: 700 17px var(--font-display); color: #fff; margin-bottom: 6px; }
.track .st span { font-size: 14px; color: rgba(255,255,255,.62); display: block; line-height: 1.4; }
/* The connector is a desk-screen line and a phone-screen snake, and they are
   two different drawings of the same six steps.

   Across six columns one straight rule does it. Wrapped into two columns the
   steps read 1-2 / 3-4 / 5-6, and what joins that order is a serpentine: along
   the row, an S down to the start of the next, along that row. It used to be
   switched off here, which left six loose tiles where a pipeline was meant to
   be.

   The snake is one stretched path rather than five positioned pieces. That
   works because the rows are a FIXED height: with `grid-auto-rows: 168px` and
   no row gap the track is exactly the 504 units the viewBox names, so the
   vertical mapping is 1:1 and every tile centre is a constant the path can be
   written against. The horizontal mapping is not 1:1 — x is a percentage of
   whatever the column is — which is exactly what is wanted for centres at 25%
   and 75%, and `non-scaling-stroke` is what keeps that stretch out of the pen.

   The path runs centre to centre and the tiles, which are filled with the
   chapter's own ink, cover its ends: the SVG is first in the box, so every
   step paints over it. */
.track-web { display: none; }
@media (max-width: 980px) {
  .track { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 168px; row-gap: 0; column-gap: 14px; }
  .track::before { display: none; }
  .track-web { display: block; position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
  .track-web path { fill: none; stroke: var(--cy-400); stroke-width: 2; opacity: .45; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }
  .track .st .icon-tile { margin: 0 auto 14px; }
  /* A lane down each outer margin for the drops: at full column width the
     longest description reaches the edge the curve needs. */
  .track .st span { font-size: 13.5px; max-width: 78%; margin-inline: auto; }
  /* The middle row is placed BACKWARDS, which is the whole trick: with
     Validate under Understand and Approve under Capture, the step after each
     row is directly below the one that ends it, so the connector is two
     straight drops instead of two long diagonals across the whole width.
     Source order is untouched — it is still the order of the pipeline, which
     is what a screen reader and the desktop layout both follow. */
  .track .st:nth-of-type(1) { grid-area: 1 / 1; }
  .track .st:nth-of-type(2) { grid-area: 1 / 2; }
  .track .st:nth-of-type(3) { grid-area: 2 / 2; }
  .track .st:nth-of-type(4) { grid-area: 2 / 1; }
  .track .st:nth-of-type(5) { grid-area: 3 / 1; }
  .track .st:nth-of-type(6) { grid-area: 3 / 2; }
}

/* Help */
.topics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.topics a { display: flex; gap: 14px; align-items: center; padding: 20px 22px; background: #fff; border-radius: 16px; box-shadow: var(--shadow-card); color: var(--ink); }
.topics a:hover { box-shadow: var(--shadow-float); }
.topics a b { display: block; font: 700 15px var(--font-display); } .topics a span { font-size: 13px; color: var(--n-500); }
.list-links a { display: flex; justify-content: space-between; align-items: center; padding: 17px 0; border-bottom: 1px solid var(--n-200); font: 700 16px var(--font-display); color: var(--ink); }
.list-links a svg { width: 16px; height: 16px; }
@media (max-width: 980px) { .topics { grid-template-columns: 1fr 1fr; } } @media (max-width: 620px) { .topics { grid-template-columns: 1fr; } }

/* ---------- Closing chapter: CTA + footer on one ink sheet ---------- */
.closing { background: var(--ink-900); color: rgba(255,255,255,.72); padding: calc(104px + var(--edge-h)) 0 40px; position: relative; overflow: hidden; }
.closing .mark-ghost { left: 0; bottom: 0; translate: -5% 4%; width: 34%; max-width: 460px; }
.closing .cta { display: grid; grid-template-columns: 1.3fr 1fr; gap: 48px; align-items: center; padding-bottom: 88px; border-bottom: 1px solid var(--ink-line); }
.closing .cta h2 { color: #fff; font-size: clamp(31px, 3.8vw, 50px); }
.closing .cta p { font-size: 17px; color: var(--ink-body); max-width: 32em; }
.closing .cta .row { justify-content: flex-end; }
.closing .cols { display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: 32px; padding-top: 56px; }
.closing h4 { color: #fff; font-size: 14px; margin-bottom: 14px; }
.closing ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.closing a:not(.btn) { color: rgba(255,255,255,.66); font-size: 14px; } .closing a:not(.btn):hover { color: #fff; }
.closing .legal { margin-top: 56px; display: flex; justify-content: space-between; gap: 16px; font-size: 13px; color: rgba(255,255,255,.45); flex-wrap: wrap; }
/* Language selector: one link per language, the current one lit. Links, not a
   <select>: a static site has nothing to run on change, and a crawler follows a link. */
.closing .lang { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; }
.closing .lang svg { width: 15px; height: 15px; margin-right: 6px; }
.closing .lang a:not(.btn) { padding: 3px 11px; border-radius: var(--r-pill); border: 1px solid var(--ink-line); font-size: 13px; }
.closing .lang a[aria-current] { color: #fff; background: rgba(255,255,255,.1); }
@media (max-width: 980px) { .closing { padding-top: calc(76px + var(--edge-h)); } .closing .cta { grid-template-columns: 1fr; padding-bottom: 56px; } .closing .cta .row { justify-content: flex-start; } .closing .cols { grid-template-columns: 1fr 1fr; } }

/* ==========================================================================
   Product mocks — hand-built HTML, still used where a chip or a card has to
   carry translated copy. The full-screen captures on the landings are images.
   ========================================================================== */
.mock { font-family: var(--font-ui); color: var(--ink); font-size: 12.5px; }
.mock-app { background: #fff; border-radius: 18px; box-shadow: var(--shadow-float); overflow: hidden; }
.mock-app .bar { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--n-100); font: 800 14px var(--font-display); }
.mock-app .bar svg { width: 18px; height: 18px; }
.mock-app .bar .dots { display: flex; gap: 5px; margin-left: auto; }
.mock-app .bar .dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--n-200); }
.mock-app .body { display: grid; grid-template-columns: 116px 1fr; }
.mock-app .side { padding: 14px 8px; border-right: 1px solid var(--n-100); display: grid; gap: 4px; align-content: start; font-size: 12px; }
.mock-app .side span { padding: 7px 10px; border-radius: 8px; color: var(--n-600); }
.mock-app .side span.on { background: var(--wash); color: var(--cy-800); font-weight: 600; }
.mock-app .main { padding: 14px 16px; overflow: hidden; }
.mock-app .main .ttl { display: flex; align-items: center; gap: 8px; font: 700 14px var(--font-display); margin-bottom: 10px; }
.mock-tabs { display: flex; gap: 6px; margin-bottom: 10px; }
.mock-tabs span { padding: 4px 10px; border-radius: var(--r-pill); font-size: 11.5px; background: var(--n-100); color: var(--n-600); white-space: nowrap; }
.mock-tabs span.on { background: var(--ink); color: #fff; }
.mock-table { width: 100%; border-collapse: collapse; }
.mock-table th { text-align: left; font: 600 11px var(--font-ui); color: var(--n-400); padding: 4px 6px; border-bottom: 1px solid var(--n-100); white-space: nowrap; }
.mock-table td { padding: 8px 6px; border-bottom: 1px solid var(--n-100); white-space: nowrap; }
.mock-table td.num { font-family: var(--font-display); font-weight: 600; font-variant-numeric: tabular-nums; }
.mock-table tr:last-child td { border-bottom: 0; }
.mock-card { background: #fff; border-radius: 14px; box-shadow: var(--shadow-float); padding: 12px 15px; display: flex; gap: 11px; align-items: center; }
.mock-card .icon-tile { width: 34px; height: 34px; border-radius: 10px; } .mock-card .icon-tile svg { width: 17px; height: 17px; }
.mock-card b { display: block; font: 700 13px var(--font-display); white-space: nowrap; }
.mock-card small { color: var(--n-500); font-size: 11px; display: block; white-space: nowrap; }
.mock-panel { background: #fff; border-radius: 16px; box-shadow: var(--shadow-float); padding: 18px 20px; }
.mock-panel h4 { font-size: 15px; margin-bottom: 12px; }
.mock-kv { display: grid; grid-template-columns: 1fr auto; row-gap: 10px; column-gap: 20px; font-size: 13px; margin: 0; }
.mock-kv dt { color: var(--n-500); white-space: nowrap; } .mock-kv dd { margin: 0; font-weight: 600; text-align: right; white-space: nowrap; }
.mock-list { display: grid; gap: 4px; }
.mock-list .r { display: grid; grid-template-columns: auto 1fr auto auto; gap: 12px; align-items: center; padding: 8px 6px; border-radius: 10px; font-size: 12.5px; }
.mock-list .r b { display: block; font-size: 13px; white-space: nowrap; } .mock-list .r small { color: var(--n-500); display: block; font-size: 11px; }
.mock-list .r .amt { font-family: var(--font-display); font-weight: 600; font-variant-numeric: tabular-nums; }
.dot { width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; }
.dot svg { width: 12px; height: 12px; fill: none; stroke-width: 2.2; stroke-linecap: round; }
.dot.rd { background: var(--red-bg); } .dot.rd svg { stroke: var(--red); }
.dot.cy { background: var(--wash); } .dot.cy svg { stroke: var(--cy-700); }
.dot.am { background: var(--amber-bg); } .dot.am svg { stroke: var(--amber); }
.dot.gn { background: var(--mint-100); } .dot.gn svg { stroke: var(--green); }
.sec.ink .mock-panel, .sec.ink .mock-card, .sec.ink .mock-app { box-shadow: 0 24px 60px rgba(0,0,0,.4); }

.donut { --a: 87; --b: 9; width: 96px; height: 96px; border-radius: 50%; flex: none; background: conic-gradient(var(--cy-500) 0 calc(var(--a) * 1%), var(--amber) 0 calc((var(--a) + var(--b)) * 1%), var(--red) 0); display: grid; place-items: center; }
.donut::after { content: attr(data-count); width: 66px; height: 66px; border-radius: 50%; background: #fff; display: grid; place-items: center; font: 800 20px var(--font-display); color: var(--ink); }
.legend { display: grid; gap: 8px; font-size: 13px; }
.legend div { display: grid; grid-template-columns: 10px 1fr auto auto; gap: 10px; align-items: center; }
.legend i { width: 10px; height: 10px; border-radius: 50%; }
.legend .pct { color: var(--n-500); } .legend .n { font-weight: 700; font-family: var(--font-display); }
.people { display: grid; gap: 6px; }
.people .p { display: grid; grid-template-columns: 34px 1fr auto; gap: 12px; align-items: center; padding: 8px; border-radius: 12px; }
.avatar { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font: 700 12px var(--font-display); color: #fff; }
.people b { display: block; font-size: 13px; } .people small { color: var(--n-500); font-size: 11px; }
.tabs-mini { display: flex; gap: 20px; border-bottom: 1px solid var(--n-100); margin-bottom: 10px; font-size: 13px; }
.tabs-mini span { padding: 8px 0; color: var(--n-500); }
.tabs-mini span.on { color: var(--ink); font-weight: 600; border-bottom: 2px solid var(--cy-400); }

/* Platform mock — mirrors app.numrow.com's Payable workspace at reduced scale */
.app { display: grid; grid-template-columns: 138px 1fr; background: var(--n-50); border-radius: 16px; box-shadow: var(--shadow-float); overflow: hidden; font-family: var(--font-ui); color: var(--ink); font-size: 11px; line-height: 1.35; }
.app .sb { background: var(--ink); color: rgba(255,255,255,.85); padding: 14px 10px; display: flex; flex-direction: column; gap: 2px; }
.app .sb .logo { display: flex; gap: 8px; align-items: center; padding: 2px 6px 12px; }
.app .sb .logo svg { width: 24px; height: 24px; flex: none; }
.app .sb .logo b { font: 800 14px/1 var(--font-display); letter-spacing: -.03em; color: #fff; display: block; }
.app .sb .logo b i { font-style: normal; color: var(--cy-400); }
.app .sb .logo small { display: block; font-size: 7.5px; color: rgba(255,255,255,.55); margin-top: 2px; white-space: nowrap; }
.app .sb .lbl { font-size: 9px; color: rgba(255,255,255,.45); padding: 8px 8px 4px; }
.app .sb .it { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 8px; color: rgba(255,255,255,.85); white-space: nowrap; overflow: hidden; }
.app .sb .it svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 1.75; flex: none; }
.app .sb .it.on { background: rgba(255,255,255,.08); color: var(--cy-400); }
.app .sb .it::after { content: "\203A"; margin-left: auto; color: rgba(255,255,255,.35); }
.app .sb .grow { flex: 1; }
.app .sb .user { display: flex; gap: 8px; align-items: center; padding: 8px; border-top: 1px solid rgba(255,255,255,.08); margin-top: 6px; }
.app .sb .user .avatar { width: 22px; height: 22px; font-size: 8px; background: rgba(255,255,255,.12); }
.app .sb .user b { display: block; font-size: 10px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 84px; } .app .sb .user small { font-size: 8px; color: rgba(255,255,255,.5); }
.app .mainc { display: grid; gap: 8px; padding: 8px; align-content: start; min-width: 0; }
.app .top { background: #fff; border-radius: 10px; padding: 8px 12px; display: flex; align-items: center; gap: 10px; }
.app .top .crumb { color: var(--n-600); }
.app .top .ingest { margin-left: auto; background: var(--cy-700); color: #fff; font-weight: 600; padding: 5px 10px; border-radius: var(--r-pill); display: inline-flex; gap: 5px; align-items: center; }
.app .top .ingest svg { width: 11px; height: 11px; stroke: #fff; fill: none; stroke-width: 2; }
.app .kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.app .kpi { min-width: 0; background: #fff; border-radius: 10px; padding: 9px 10px 8px; position: relative; }
.app .kpi span { font-weight: 600; font-size: 9.5px; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 14px; }
.app .kpi b { display: block; font: 800 20px/1.1 var(--font-display); margin-top: 4px; }
.app .kpi small { display: block; color: var(--n-500); font-size: 9px; margin-top: 2px; }
.app .kpi svg { position: absolute; right: 9px; top: 9px; width: 12px; height: 12px; fill: none; stroke-width: 1.75; }
.app .kpi.am b { color: var(--amber); } .app .kpi.am svg { stroke: var(--amber); }
.app .kpi.cy b { color: var(--cy-700); } .app .kpi.cy svg { stroke: var(--cy-700); }
.app .kpi.rd b { color: var(--red); } .app .kpi.rd svg { stroke: var(--red); }
.app .kpi.gn b { color: var(--green); } .app .kpi.gn svg { stroke: var(--green); }
.app .sheet2 { background: #fff; border-radius: 10px; padding: 8px 12px; overflow: hidden; }
.app .tabs { display: flex; gap: 4px; }
.app .tabs span { padding: 5px 9px; border-radius: 8px; color: var(--n-600); }
.app .tabs span.on { background: var(--wash); color: var(--cy-700); font-weight: 600; }
.app .subtabs { display: flex; gap: 12px; padding: 6px 4px 2px; color: var(--n-600); border-top: 1px solid var(--n-100); margin-top: 6px; font-size: 10px; white-space: nowrap; overflow: hidden; }
.app .subtabs span.on { color: var(--ink); font-weight: 600; }
.app .toolbar { display: flex; gap: 6px; align-items: center; }
.app .toolbar .tb { border: 1px solid var(--n-200); border-radius: var(--r-pill); padding: 4px 9px; color: var(--n-700); }
.app .toolbar .srch { margin-left: auto; border: 1px solid var(--n-200); border-radius: var(--r-pill); padding: 4px 9px; color: var(--n-400); min-width: 110px; }
.app table { width: 100%; border-collapse: collapse; }
.app th { text-align: left; font-size: 9.5px; font-weight: 600; color: var(--n-500); padding: 6px; border-bottom: 1px solid var(--n-100); white-space: nowrap; }
.app td { padding: 7px 6px; border-bottom: 1px solid var(--n-100); white-space: nowrap; }
.app td.num { font-family: var(--font-display); font-weight: 600; font-variant-numeric: tabular-nums; }
.app tr:last-child td { border-bottom: 0; }
.app .badge { font-size: 9.5px; padding: 2px 7px; }
.app.compact { grid-template-columns: 1fr; }
.app.compact .sb { display: none; }
@media (max-width: 620px) { .app { grid-template-columns: 1fr; } .app .sb { display: none; } .app .kpis { grid-template-columns: repeat(3, 1fr); } .app .kpi:nth-child(n+4) { display: none; } }
.app .foot { color: var(--n-500); font-size: 9.5px; padding: 6px 4px 0; }

/* Tenant switcher overlay (accountant hero) */
.switcher { background: #fff; border-radius: 12px; box-shadow: var(--shadow-float); padding: 8px; width: 290px; font-family: var(--font-ui); font-size: 12px; color: var(--ink); }
.switcher .hd { font-size: 10px; color: var(--n-500); padding: 4px 8px 6px; }
.switcher .c { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 8px; }
.switcher .c.on { background: var(--wash); }
.switcher .c b { font-weight: 600; flex: 1; white-space: nowrap; }
.switcher .c .avatar { width: 20px; height: 20px; font-size: 8px; }

/* ==========================================================================
   Legal documents (.prose)
   One column of running text, sized for reading rather than scanning. Used by
   the three legal pages and nowhere else — a marketing chapter is a sheet, a
   legal document is a document.
   ========================================================================== */
.prose { max-width: 42em; margin-inline: auto; }
.prose h2 { font-size: 26px; margin-top: 56px; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: 19px; margin-top: 32px; }
.prose p, .prose li { font-size: 16px; line-height: 1.7; color: var(--body); }
.prose p { margin-top: 14px; }
.prose ul, .prose ol { margin-top: 14px; padding-left: 22px; display: grid; gap: 8px; }
.prose a { color: var(--cy-700); text-decoration: underline; text-underline-offset: 3px; }
.prose table { width: 100%; border-collapse: collapse; margin-top: 20px; font-size: 15px; }
.prose th, .prose td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--n-200); vertical-align: top; }
.prose th { font: 600 13px var(--font-ui); color: var(--n-600); }
/* A term the user still has to supply. Deliberately loud: a placeholder that
   blends in is a placeholder that ships. */
.todo { background: var(--sand-100); border-bottom: 1px solid var(--amber); padding: 0 4px; font-weight: 600; color: #7A4E00; }
.doc-meta { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 14px; color: var(--muted); }
/* The banner every legal page carries until it has been through review. */
.draft-note { border: 1.5px solid var(--amber); background: var(--sand-100); border-radius: var(--r-md); padding: 16px 20px; font-size: 15px; color: #7A4E00; }

/* ==========================================================================
   Status chip
   The footer's "System status" link and the help page's status panel both ask
   the platform API whether it is serving traffic. Hidden until answered, so a
   blocked or slow request shows nothing rather than a wrong colour.
   ========================================================================== */
.status-chip { display: inline-flex; align-items: center; gap: 6px; font: 500 12px var(--font-ui); }
.status-chip .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--n-400); flex: none; }
.status-chip[data-state="up"] .dot { background: #35C88A; }
.status-chip[data-state="down"] .dot { background: var(--red); }
.status-chip[data-state="unknown"] .dot { background: var(--n-400); }
.status-panel { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.status-panel .status-chip { font-size: 14px; }
.status-panel .status-chip .dot { width: 10px; height: 10px; }

[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Spacing utilities — last so they win */
.mt-2 { margin-top: 8px; } .mt-4 { margin-top: 16px; } .mt-6 { margin-top: 24px; } .mt-8 { margin-top: 32px; } .mt-12 { margin-top: 48px; } .mt-16 { margin-top: 64px; }
.mb-6 { margin-bottom: 24px; } .mb-8 { margin-bottom: 32px; } .mb-12 { margin-bottom: 48px; } .mb-16 { margin-bottom: 64px; }

/* Hero stage: the floating product cards overlap the capture on desktop and
   overlap nothing on a phone, where they are just clutter. The rig on the home
   page hides its own two — this covers the pages that still float a card
   straight out of `.stage`. */
@media (max-width: 980px) {
  .hero .split > .copy { order: 1; }
  .hero .split > .capbar { order: 2; }
  /* The rig is as tall as the laptop and the phone is centred inside it, so
     the collapsed grid's own gap is all the air the row needs. */
  .hero .split > .stage { order: 3; }
  .stage { min-height: 0 !important; }
  /* Not the plate, and not the rig: both must stay positioned, or what they
     hold — clipped arcs, a phone — escapes them. */
  .stage > div:not(.plate):not(.rig) { position: static !important; }
  .stage > div:not(.rig):has(.mock-card) { display: none; }
  .hero .blobs { display: none; }
}