/* Generated by scripts/sync-v3.mjs. Do not edit: change the prototype and re-run the sync. Source and hashes: src/pages/easydocs.sync.json. */
/* EasyDocs v3: Before It's a File (round 4: one request across every screen and the log, each control stated once)
   Documentary photographs of where documents sit, and the live activity your team sees as they become files.
   Signature device: the live activity line. A straight line leaves the customer's phone in the hero photo
   and drops into the activity log below it, where each file arrives as a thumbnail on the line. */

:root {
  --navy: #003282;
  --navy-deep: #00266a;
  --ink: #003282;          /* headings, labels, links: 11.8:1 on white */
  --ink-2: #3d4f73;        /* body copy: 8.2:1 */
  --ink-3: #56637f;        /* captions, times: 6.0:1 */
  --field: #7d89a6;        /* input borders: 3.5:1 */
  --rule: #dde3ec;         /* hairlines */
  --track: #cfd8e5;        /* the part of the line not reached yet */
  --cyan: #00a0eb;         /* brand cyan: marks only, never text */
  --cyan-wash: #e2f3fc;
  --screen: #eef3f9;       /* the product's own page background */
  --bg: #ffffff;

  --display: "Albert Sans", "Helvetica Neue", Arial, sans-serif;
  --text: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --mono: "DM Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);

  --gutter: clamp(16px, 4.45vw, 64px);
  --gap: 32px;
  --sp: clamp(96px, 9vw, 136px);   /* space above each section */
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
p, dd, summary { text-wrap: pretty; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--text);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, dl, dd, ol, ul, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
a { color: inherit; }
.vh {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; border-radius: 2px; }

.skip {
  position: absolute; left: 16px; top: -60px; z-index: 50;
  background: var(--navy); color: #fff; padding: 10px 16px; text-decoration: none; font-weight: 500;
}
.skip:focus { top: 12px; }

/* ---------- Type ---------- */
h1, h2, h3 { font-family: var(--display); font-weight: 300; color: var(--ink); letter-spacing: -0.02em; }
h1 { font-size: clamp(2.25rem, 1.2rem + 3vw, 3.75rem); line-height: 1.03; }
h1 > span { display: block; text-wrap: balance; }
h2 { font-size: clamp(2rem, 1.3rem + 1.9vw, 3.125rem); line-height: 1.06; text-wrap: balance; }
h3 { font-size: clamp(1.375rem, 1.2rem + .45vw, 1.625rem); line-height: 1.16; letter-spacing: -0.012em; text-wrap: balance; }
.sub { color: var(--ink-2); font-size: 1.125rem; line-height: 1.55; max-width: 34em; }
.cap { font-size: .875rem; line-height: 1.45; color: var(--ink-3); padding-top: 12px; }
.fine { font-size: .8125rem; line-height: 1.45; color: var(--ink-3); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 30px;
  background: var(--navy); color: #fff;
  font: 500 1.0625rem/1 var(--text);
  text-decoration: none; border: 0; border-radius: 3px; cursor: pointer;
  touch-action: manipulation;
  transition: transform 160ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) { .btn:hover { background: var(--navy-deep); } }
.btn:active { transform: scale(0.97); }
.btn-sm { min-height: 42px; padding: 0 18px; font-size: .9375rem; }

/* ---------- Header ---------- */
.top { position: sticky; top: 0; z-index: 20; background: #fff; }
.top::after {
  content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 14px; pointer-events: none;
  background: linear-gradient(#fff, rgba(255,255,255,0)); opacity: 0; transition: opacity 200ms var(--ease-out);
}
.top.is-scrolled::after { opacity: 1; }
.top-in {
  display: flex; align-items: center; gap: 32px; height: 68px;
  max-width: 1440px; margin-inline: auto; padding-inline: var(--gutter);
}
.brand { display: block; }
.brand img { height: 30px; width: auto; }
.nav { display: flex; gap: 30px; margin-left: auto; }
.nav a { text-decoration: none; font-size: .9375rem; font-weight: 500; color: var(--ink); padding: 8px 0; }
.nav a:hover { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }

/* ---------- Page grid ---------- */
.wrap { max-width: 1440px; margin-inline: auto; padding-inline: var(--gutter); }
.sec {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap);
  align-items: start; padding-top: var(--sp);
}

/* =========================================================
   HERO AND THE LIVE ACTIVITY LINE
   The photo is cropped like object-fit: cover, with the stage maths below. The same maths
   gives the x position of the phone (--spine), so the line and the log sit exactly under it.
   ========================================================= */
.hero {
  --r: 1.25;                 /* photo box aspect ratio */
  --fx: .54;                 /* horizontal focus of the crop */
  --k: calc(1.5 / var(--r)); /* the photo is 3:2 */
  --L: clamp(calc(1 - var(--k)), calc(.5 - var(--k) * var(--fx)), 0);
  --spine: calc((var(--L) + var(--k) * .6464) * 100%);  /* centre of the phone, as a share of the photo's width */
  --phone-bottom: .755;      /* bottom edge of the phone, as a share of the photo's height */
  --n: 56px;                 /* thumbnail node size */
  --cg: 18px;
  --rg: 64px;

  position: relative;
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: var(--rg);
  padding-top: 40px;
}
.hero-copy { grid-column: 1 / span 6; grid-row: 1; align-self: center; padding-right: 16px; padding-bottom: 28px; }
.lede { margin-top: 26px; font-size: 1.25rem; line-height: 1.55; color: var(--ink-2); max-width: 27em; }
.hero-act { margin-top: 34px; }
/* six items in two rows: the customer-facing controls first, then the infrastructure */
.trust {
  margin-top: 40px; display: grid; grid-template-columns: repeat(3, minmax(0, max-content)); column-gap: 32px; row-gap: 6px;
  font-size: .875rem; line-height: 1.4; color: var(--ink-2);
}

.hero-fig { grid-column: 7 / span 6; grid-row: 1; position: relative; container-type: inline-size; }
.hero-fig .cap { max-width: calc(var(--spine) - 28px); text-wrap: balance; }

.ph { position: relative; overflow: hidden; container-type: size; aspect-ratio: var(--r); background: #6f7173; border-radius: 3px; }
.ph-stage {
  position: absolute;
  --W: max(100cqw, calc(100cqh * 1.5));
  --H: calc(var(--W) / 1.5);
  width: var(--W); height: var(--H);
  left: clamp(calc(100cqw - var(--W)), calc(50cqw - var(--W) * var(--fx)), 0px);
  top: clamp(calc(100cqh - var(--H)), calc(50cqh - var(--H) * .5), 0px);
}
.ph-stage picture, .ph-stage > picture img { position: absolute; inset: 0; width: 100%; height: 100%; }
.ph-stage > picture img { object-fit: cover; }
.screen {
  position: absolute; left: 57.02%; top: 24.79%; width: 15.24%; height: 48.72%;
  background: var(--screen); border-radius: 7.6% / 3.6%; overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.18);
}
.screen img { width: 100%; height: auto; margin-top: 4%; }

/* The line: one straight 2px rule, drawn in three CSS pieces so it needs no script.
   1. from the bottom edge of the phone, down through the photo and the gap below it */
.wire {
  position: absolute; z-index: 2; width: 2px; margin-left: -1px;
  left: var(--spine); background: var(--navy);
}
.wire-a {
  top: calc(100cqw / var(--r) * var(--phone-bottom));
  bottom: calc(-1 * var(--rg));
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .5);
}

.live-head { grid-column: 1 / span 5; grid-row: 2; position: relative; }
.live-head p { margin-top: 16px; color: var(--ink-2); max-width: 26em; }
.live-head .fine { margin-top: 14px; }

/* 3. inside the log, from its top to the last node */
.feed { grid-column: 7 / span 6; grid-row: 2; align-self: start; position: relative; display: grid; row-gap: 26px; }
.feed::before, .tl-motion .feed::after {
  content: ""; position: absolute; z-index: 0; top: 0; bottom: calc(var(--n) / 2);
  left: var(--spine); width: 2px; margin-left: -1px; background: var(--navy);
}
/* with motion: the log's piece of line starts as a pale track and fills as each event arrives */
.tl-motion .feed::before { background: var(--track); }
.tl-motion .feed::after { transform-origin: 50% 0; transform: scaleY(var(--fill, 0)); transition: transform var(--fill-dur, 600ms) var(--ease-out); }

.ev {
  display: grid; align-items: center; min-height: var(--n);
  grid-template-columns: calc(var(--spine) - var(--n) / 2 - var(--cg)) var(--n) minmax(0, 1fr);
  column-gap: var(--cg);
}
.ev-what { display: grid; justify-items: end; text-align: right; line-height: 1.35; min-width: 0; }
.ev-type { font-size: .875rem; font-weight: 500; color: var(--ink-2); }
.ev-data { font: 400 .9375rem/1.4 var(--mono); color: var(--ink); overflow-wrap: anywhere; }
.ev-when { display: grid; justify-items: start; font: 400 .875rem/1.45 var(--mono); color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ev-size { color: var(--ink-2); }

.ev-node {
  position: relative; z-index: 1; justify-self: center;
  width: 10px; height: 10px; background: var(--cyan); box-shadow: 0 0 0 4px var(--bg);
}
.ev-thumb {
  width: var(--n); height: var(--n); background: #dcdcdc; overflow: hidden; border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(0, 38, 106, .16), 0 0 0 4px var(--bg);
}
/* Every uploaded file is a photo of what was sent, here and in step 3: square, centre crop, 2px corners */
.ev-thumb img, .lg-thumbs img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }

/* the Live tag sits on the left, before "File received", so the time column never wraps on a phone */
.live-tag {
  display: inline-block; margin-right: 7px; vertical-align: 1px;
  font: 500 .6875rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase;
  color: var(--navy); background: var(--cyan-wash); padding: 4px 6px 3px; border-radius: 2px;
}

/* The packet: a small square that runs down the line as each file arrives (script.js, motion allowed only) */
.packet {
  position: absolute; z-index: 3; top: 0; left: 0; width: 10px; height: 10px; margin: -5px 0 0 -5px;
  background: var(--cyan); box-shadow: 0 0 0 2px var(--bg); opacity: 0; pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .tl-motion .ev.reveal { transition: opacity 360ms var(--ease-out), transform 360ms var(--ease-out); }
  .tl-motion .ev.reveal .ev-node { transition: transform 420ms var(--ease-out); }
  .tl-motion .ev.reveal:not(.in) { opacity: 0; transform: translateY(6px); }
  .tl-motion .ev.reveal:not(.in) .ev-node { transform: scale(.5); }
}

/* =========================================================
   SECTIONS
   ========================================================= */

/* ---------- How it works ---------- */
.how h2 { grid-column: 1 / span 7; }
.steps {
  grid-column: 1 / -1; margin-top: 56px;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(4, auto); column-gap: var(--gap);
}
.step { grid-row: span 4; display: grid; grid-template-rows: subgrid; row-gap: 0; }
.step-vis {
  position: relative; overflow: hidden; aspect-ratio: 1.2; container-type: size;
  background: var(--screen); border-radius: 3px; box-shadow: 0 0 0 1px var(--rule);
}
.step .num { margin-top: 24px; font: 400 .8125rem/1 var(--mono); color: var(--ink-3); letter-spacing: .04em; }
.step h3 { margin-top: 10px; }
.step > p:last-child { margin-top: 10px; color: var(--ink-2); font-size: 1rem; max-width: 30em; text-wrap: pretty; }

/* ---------- Real product screens, cropped and framed with CSS only, never altered ----------
   Every tile and every screen shares the product's own page colour (--screen, #eef3f9), so a crop
   that starts in the screen's background has no visible edge: the screen rises from the bottom of the tile. */

/* Step 1, the agent's create-request screen (1440 x 900). The tile shows the whole width of the form card
   (border at x 380 and 1059), with 10px of page either side: source x 370 to 1070 spans the tile.
   Rows: the tile's bottom edge cuts at y 641, in the white space between the note box (ends y 630) and the
   "one-time upload link" info box (starts y 653). Everything above y 205 is clipped away, so the nav bar
   ("Admin console"), the page title and the "one-time" subtitle (y 187 to 200) never show; the tile's own
   background is the product's page colour, so that hidden band reads as the page above the card.
   The mask fades in over rows 205 to 220, which are flat page colour in the source, so the browser's
   colour management of the PNG (a shade or two lighter than the tile) leaves no visible seam. */
.shot-1 img {
  position: absolute; max-width: none; height: auto;
  width: calc(100cqw * 1440 / 700);
  left: calc(100cqw * -370 / 700);
  top: calc(100cqh - 100cqw * 641 / 700);
  -webkit-mask-image: linear-gradient(to bottom, transparent calc(205 / 900 * 100%), #000 calc(220 / 900 * 100%));
  mask-image: linear-gradient(to bottom, transparent calc(205 / 900 * 100%), #000 calc(220 / 900 * 100%));
}

/* The phone frame, shared by every phone screen on the page. --pw is the phone's outside width. */
.phone {
  --pw: 300px;
  --bz: calc(var(--pw) * .034);
  width: var(--pw); padding: var(--bz);
  background: #141c2e; border-radius: calc(var(--pw) * .15);
  box-shadow: 0 1px 2px rgba(0, 38, 106, .14), 0 18px 40px -12px rgba(0, 38, 106, .28);
}
.phone img { width: 100%; height: auto; border-radius: calc(var(--pw) * .118); background: var(--screen); }

/* A phone rising from the bottom of its tile. --rows is how many rows of the 390px-wide screen show
   above the tile's bottom edge, so the cut always lands in the screen's background, between cards. */
.shot-2, .phone-tile { --top: 8cqh; }
.shot-2 .phone, .phone-tile .phone {
  --pw: min(calc((100cqh - var(--top)) / (.932 * var(--rows) / 390 + .034)), 84cqw);
  position: absolute; left: 50%; top: var(--top); transform: translateX(-50%);
}
/* step-2-phone.png: down to the third file. That card ends at row 597 and "Add more documents" starts at 616,
   so a cut at 606 lands in the middle of the gap. */
.shot-2 { --rows: 606; }

/* Step 3: an illustration with fictional sample data, scaled with the tile like a screenshot.
   It is the same request as steps 1 and 2: the auto policy request and its three files. */
.ledger { display: grid; place-items: center; container-type: size; }
.lg-card {
  width: 84cqw; padding: 4.2cqw; background: #fff; border-radius: 4px;
  box-shadow: 0 1px 2px rgba(0, 38, 106, .08), 0 6px 18px rgba(0, 38, 106, .06);
}
.lg-title { font-size: max(13.5px, 3.5cqw); font-weight: 600; line-height: 1.3; }
.lg-sub { font-size: max(12px, 2.9cqw); line-height: 1.4; color: var(--ink-3); margin-top: .4cqw; }
.lg-thumbs { margin-top: 3.2cqw; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.4cqw; }
.lg-thumbs li { aspect-ratio: 1; overflow: hidden; border-radius: 2px; background: #dcdcdc; box-shadow: 0 0 0 1px rgba(0, 38, 106, .16); }
.lg-act { display: flex; gap: 2cqw; margin-top: 3.4cqw; }
.lg-act span { font-size: max(12px, 2.8cqw); line-height: 1; font-weight: 500; padding: 1.5cqw 2.6cqw; border: 1px solid var(--rule); border-radius: 3px; }
.lg-act span:last-child { background: var(--navy); color: #fff; border-color: var(--navy); }

/* ---------- Industries ---------- */
.industries h2 { grid-column: 1 / span 8; }
.tiles {
  grid-column: 1 / -1; margin-top: 56px;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(4, auto); column-gap: var(--gap);
}
.tile { grid-row: span 4; display: grid; grid-template-rows: subgrid; row-gap: 0; }
.tile-ph { aspect-ratio: 3 / 2; overflow: hidden; border-radius: 3px; background: #d9dbd8; }
.tile-ph img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); transform: scale(var(--z, 1)); transform-origin: var(--pos, 50% 50%); }
.tag { font-size: .875rem; font-weight: 600; color: var(--ink); }
.tile .tag { margin-top: 22px; }
.tile h3 { margin-top: 6px; }
.tile > p:last-child { margin-top: 10px; color: var(--ink-2); font-size: 1rem; text-wrap: pretty; }
/* The fourth industry has no photo: a full-width row on the same three columns as the tiles above,
   with the same tag and heading, and its sentence beside the heading. */
.hr-row {
  grid-column: 1 / -1; margin-top: 56px; padding-top: 22px; border-top: 1px solid var(--rule);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 6px; align-items: start;
}
.hr-row .tag { grid-column: 1; grid-row: 1; }
.hr-row h3 { grid-column: 1; grid-row: 2; }
.hr-row > p:last-child { grid-column: 2 / span 2; grid-row: 2; padding-top: 3px; color: var(--ink-2); font-size: 1rem; max-width: 36em; }

/* ---------- Security ---------- */
/* the intro stays in view beside the list, so the left column is not left empty */
.sec-intro { grid-column: 1 / span 5; position: sticky; top: 96px; }
.sec-intro .note { margin-top: 22px; color: var(--ink-2); font-size: 1rem; max-width: 24em; }
.spec { grid-column: 7 / span 6; border-top: 1px solid var(--rule); }
.spec > div { display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 1fr); column-gap: 28px; padding: 16px 0; border-bottom: 1px solid var(--rule); }
.spec dt { font-weight: 600; font-size: .9375rem; line-height: 1.45; }
.spec dd { color: var(--ink-2); font-size: .9375rem; line-height: 1.5; }

/* ---------- What your customer sees ---------- */
.cust { align-items: center; }
.cust-copy { grid-column: 1 / span 5; }
.cust-copy .sub { margin-top: 22px; }
.cust-list { margin-top: 36px; border-top: 1px solid var(--rule); }
.cust-list > div { padding: 16px 0 17px; border-bottom: 1px solid var(--rule); }
.cust-list dt { font-weight: 600; font-size: 1rem; line-height: 1.45; }
.cust-list dd { margin-top: 4px; color: var(--ink-2); font-size: 1rem; line-height: 1.55; max-width: 32em; }
/* Before and after Done: the upload page and the confirmation, side by side at the same size.
   Both phones show the same 606 rows, which cut each screen just below its list of files:
   step-2-phone.png in the gap after the third file (rows 598 to 615), step-3-phone.png in the
   white space after the files list (rows 595 to 618). */
.cust-fig { grid-column: 7 / span 6; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; }
.pair-item .cap { padding-top: 10px; }
.phone-tile {
  --rows: 606; --top: 6cqh;
  position: relative; overflow: hidden; container-type: size; aspect-ratio: .72;
  background: var(--screen); border-radius: 3px; box-shadow: 0 0 0 1px var(--rule);
}
.phone-tile .phone { --pw: min(calc((100cqh - var(--top)) / (.932 * var(--rows) / 390 + .034)), 88cqw); }

/* ---------- Questions: two titled groups, stacked ----------
   Each group's head stays in view on the left while its questions run on the right, on the same
   columns as the Security list above, so the two groups never have to balance each other. */
.faq-head { grid-column: 1 / span 6; }
.qa-group {
  grid-column: 1 / -1; margin-top: 56px;
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: start;
}
.qa-group + .qa-group { margin-top: 88px; }
.qa-head { grid-column: 1 / span 5; position: sticky; top: 96px; padding-top: 18px; border-top: 2px solid var(--navy); }
.qa-head h3 { font-size: clamp(1.75rem, 1.4rem + .9vw, 2.25rem); line-height: 1.1; }
.qa-head p { margin-top: 12px; color: var(--ink-2); font-size: 1rem; line-height: 1.55; max-width: 26em; }
.qa-items { grid-column: 7 / span 6; border-top: 1px solid var(--rule); }
.qa { border-bottom: 1px solid var(--rule); }
.qa summary {
  cursor: pointer; list-style: none; position: relative; padding: 22px 44px 0 0;
  font-family: var(--display); font-weight: 400; font-size: clamp(1.1875rem, 1.1rem + .3vw, 1.3125rem);
  line-height: 28px; letter-spacing: -0.01em; color: var(--ink);
}
.qa:not([open]) summary { padding-bottom: 22px; }
.qa summary::-webkit-details-marker { display: none; }
/* the open and close mark: a plus that becomes a minus, centred on the first line of the question */
.qa summary::before, .qa summary::after {
  content: ""; position: absolute; right: 6px; top: 35px; width: 14px; height: 2px; background: var(--navy);
}
.qa summary::after { transform: rotate(90deg); transition: transform 160ms var(--ease-out); }
.qa[open] summary::after { transform: rotate(0deg); }
@media (prefers-reduced-motion: reduce) { .qa summary::after { transition: none; } }
@media (hover: hover) and (pointer: fine) {
  .qa summary:hover { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
}
.qa p { color: var(--ink-2); padding: 10px 0 24px; max-width: 38em; }

/* ---------- Demo ---------- */
.demo { padding-bottom: var(--sp); row-gap: 40px; }
.demo-copy { grid-column: 1 / span 5; display: grid; gap: 20px; }
.reply { font-weight: 500; font-size: .9375rem; }
.form { grid-column: 7 / span 6; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.field { display: grid; gap: 8px; align-content: start; min-width: 0; }
.field-wide { grid-column: 1 / -1; }
.field label { font-size: .9375rem; font-weight: 500; }
.field .opt { margin-top: -6px; font-size: .875rem; color: var(--ink-3); }
.field input, .field select, .field textarea {
  width: 100%; font: 400 1rem/1.4 var(--text); color: var(--ink);
  background: #fff; border: 1px solid var(--field); border-radius: 3px;
  padding: 13px 14px; min-height: 50px; touch-action: manipulation;
}
.field textarea { resize: vertical; min-height: 96px; }
.field select { appearance: none; -webkit-appearance: none; padding-right: 40px;
  background-image: linear-gradient(45deg, transparent 50%, var(--navy) 50%), linear-gradient(135deg, var(--navy) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}
.field input::placeholder, .field textarea::placeholder { color: var(--ink-3); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 3px solid var(--navy); outline-offset: 1px; border-color: var(--navy); }
.field [aria-invalid="true"] { border-color: #b3261e; box-shadow: inset 0 0 0 1px #b3261e; }
.form-act { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 4px; }
.form-status { font-size: .9375rem; color: var(--ink); }

/* ---------- Footer ---------- */
.foot { border-top: 1px solid var(--rule); }
.foot-in {
  max-width: 1440px; margin-inline: auto; padding: 36px var(--gutter) 56px;
  display: grid; grid-template-columns: auto 1fr; gap: 18px 40px; align-items: center;
}
.foot-in > img { height: 26px; width: auto; }
.foot-nav { display: flex; flex-wrap: wrap; gap: 8px 28px; justify-content: flex-end; }
.foot-nav a { font-size: .9375rem; text-decoration: none; padding: 4px 0; }
.foot-nav a:hover { text-decoration: underline; text-underline-offset: 5px; }
.foot-note { grid-column: 1 / -1; font-size: .8125rem; color: var(--ink-3); }

/* =========================================================
   TABLET
   ========================================================= */
@media (max-width: 1100px) {
  .nav { gap: 22px; }
  .hero { --n: 48px; --cg: 14px; }
  .feed { row-gap: 22px; }
  .trust { grid-template-columns: repeat(2, minmax(0, max-content)); column-gap: 24px; }

  /* steps become rows: picture on the left, words on the right */
  .steps { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; row-gap: 48px; }
  .step { grid-row: auto; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto auto 1fr; column-gap: var(--gap); align-items: start; }
  .step-vis { grid-column: 1 / span 7; grid-row: 1 / 4; }
  .step .num, .step h3, .step > p:last-child { grid-column: 8 / span 5; }
  .step .num { margin-top: 6px; }

  .spec > div { grid-template-columns: minmax(0, 1fr); row-gap: 2px; }

  /* the two phones need more room than half the page: words on top, the pair below */
  .cust { row-gap: 48px; }
  .cust-copy { grid-column: 1 / span 8; }
  .cust-fig { grid-column: 1 / -1; grid-row: 2; width: 100%; max-width: 720px; }

  .qa-head { grid-column: 1 / span 4; }
  .qa-items { grid-column: 5 / span 8; }
}

/* =========================================================
   PHONE. The line keeps its place under the phone; the words that sit
   between the photo and the log stay to the left of it.
   ========================================================= */
@media (max-width: 860px) {
  :root { --gap: 20px; --sp: 88px; }
  .nav { display: none; }
  .top-in { height: 60px; justify-content: space-between; gap: 16px; }
  .brand img { height: 26px; }
  .btn-sm { min-height: 40px; padding: 0 14px; font-size: .875rem; }
  html { scroll-padding-top: 72px; }

  .sec { grid-template-columns: minmax(0, 1fr); }
  .sec > * { grid-column: 1 !important; }

  .hero { --r: 1; --n: 44px; --cg: 12px; --rg: 28px; grid-template-columns: minmax(0, 1fr); padding-top: 24px; }
  .hero-copy { grid-column: 1; grid-row: 1; padding: 0; }
  .lede { margin-top: 18px; font-size: 1.125rem; }
  .hero-act { margin-top: 24px; }
  .trust { margin-top: 24px; font-size: .78125rem; row-gap: 4px; column-gap: 14px; }
  .hero-fig { grid-column: 1; grid-row: 2; }
  .hero-fig .cap { font-size: .8125rem; }

  .live-head { grid-column: 1; grid-row: 3; padding-right: calc(100% - var(--spine) + 18px); }
  .live-head p:not(.fine) { font-size: 1rem; }
  /* 2. on a phone, the piece of line beside the heading */
  .live-head::before {
    content: ""; position: absolute; z-index: 0; top: 0; bottom: calc(-1 * var(--rg));
    left: var(--spine); width: 2px; margin-left: -1px; background: var(--navy);
  }
  .feed { grid-column: 1; grid-row: 4; row-gap: 20px; }
  .ev-type { font-size: .8125rem; }
  .ev-data { font-size: .8125rem; }
  .ev-when { font-size: .8125rem; }
  .live-tag { font-size: .625rem; padding: 3px 5px 2px; margin-right: 5px; }

  .steps { margin-top: 36px; row-gap: 56px; }
  .step { display: block; }
  .step-vis { max-width: 560px; }
  .step .num { margin-top: 20px; }

  .tiles { margin-top: 36px; grid-template-columns: minmax(0, 1fr); grid-template-rows: none; row-gap: 56px; }
  .tile { grid-row: auto; display: block; }
  .hr-row { margin-top: 48px; display: block; }
  .hr-row h3 { margin-top: 6px; }
  .hr-row > p:last-child { margin-top: 10px; padding-top: 0; }

  .shot-2 { --rows: 519; }      /* a phone column is narrow: show two files, cut in the gap before the third */
  .cust { row-gap: 36px; }
  .cust-list { margin-top: 28px; }
  .cust-fig { max-width: 640px; }

  .sec-intro { position: static; }
  .security, .faq, .demo { row-gap: 28px; }
  .faq { row-gap: 0; }
  .qa-group { display: block; margin-top: 44px; }
  .qa-group + .qa-group { margin-top: 56px; }
  .qa-head { position: static; padding-top: 16px; }
  .qa-head h3 { font-size: 1.75rem; }
  .qa-head p { margin-top: 8px; }
  .qa-items { margin-top: 20px; }
  .qa summary { padding: 18px 40px 0 0; font-size: 1.1875rem; line-height: 26px; }
  .qa:not([open]) summary { padding-bottom: 18px; }
  .qa summary::before, .qa summary::after { right: 4px; top: 30px; }
  .qa p { padding: 8px 0 20px; font-size: 1rem; }
  .demo { row-gap: 32px; }
  .form { gap: 18px 14px; }
  .form .field { grid-column: 1 / -1; }

  .foot-in { grid-template-columns: 1fr; }
  .foot-nav { justify-content: flex-start; }
}

@media (min-width: 601px) and (max-width: 860px) {
  .hero { --r: 1.4; }
}

/* a narrow phone: the before and after screens stack, each at a readable size */
@media (max-width: 600px) {
  .cust-fig { grid-template-columns: minmax(0, 1fr); row-gap: 28px; max-width: 400px; }
}

@media (max-width: 380px) {
  .hero { --n: 40px; --cg: 10px; }
  h1 { font-size: 2rem; }
  .ev-data { font-size: .75rem; }
}