/* Barrierline site. Colours and type are the product's current look (design/tokens.mjs, look d, light scheme), set in Figtree.
   Every hex below is the one in src/ui/palette.gen.ts. The sage is the line and the one main button; the dark green is the
   dark band; the lit mint is only ever on a dark band. None of them is a page coat.
   Light is the site's only scheme. If it ever gets a dark one, take the values from design/tokens.mjs look d, dark. */

@font-face { font-family: "Figtree"; src: url(fonts/Figtree-Regular.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Figtree"; src: url(fonts/Figtree-Medium.woff2) format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Figtree"; src: url(fonts/Figtree-SemiBold.woff2) format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Figtree"; src: url(fonts/Figtree-Bold.woff2) format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  color-scheme: light;

  /* the page and its text (token: hex, contrast on the page ground) */
  --ink: #101B15;            /* ink: headings and body, 16.1:1 */
  --ink-2: #37433C;          /* ink2: secondary text, 9.4:1 */
  --quiet: #515B55;          /* ink3: captions and meta only, 6.4:1 */
  --ground: #F2F5F1;         /* bg: the page, green-grey, never white, never cream */
  --surface: #FCFDFB;        /* surface: cards, the fill behind a screenshot */
  --sunk: #E5E9E4;           /* sunk: wells */
  --rule: #D4D9D3;           /* line: hairlines, 1.3:1, so never the only sign of a control */
  --rule-strong: #808981;    /* lineStrong: control edges, 3.3:1 */

  /* the sage: the line and the one main button */
  --go: #4A7C62;             /* accent: a FILL with a white label (4.83:1). As small text on the page it is 4.39:1 and fails */
  --go-press: #3E6A53;       /* accentPressed: hover and pressed, white label 6.2:1 */
  --on-go: #FFFFFF;          /* onAccent */
  --brand-text: #3E6A53;     /* selectedInk: the only green allowed as text on the light page, 5.6:1 */

  /* the one dark band (the app's menu green) and the lit mint that only ever sits on it */
  --band: #283A31;           /* chrome */
  --on-band: #F3F6F2;        /* onChrome, 11.1:1 */
  --on-band-quiet: #C1C8C3;  /* chromeInk2, 7.1:1 */
  --band-rule: #FFFFFF1F;    /* sideLine: the app's hairline on the green, white at 12% */
  --lit: #9EE3BB;            /* chromeAccent: the line's tip, the numbers and the button, 8.1:1 on the band, never on a light surface */

  /* status, used for one thing here: a placeholder in a legal draft that still has to be decided ("needs a look") */
  --warn: #7B4C01;           /* warn on warnBg: 6.3:1 */
  --warn-bg: #FFECCD;        /* warnBg */

  --line-c: var(--go);       /* the barrier line's colour here; the lit mint on the dark band */

  --display: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --text: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;

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

  /* the barrier line: where it runs inside each section, and where the content starts beside it */
  --line-x: 12px;
  --pl: 34px;
  --pr: 16px;
  --line-w: 4px;
  --pad-y: clamp(48px, 5.5vw, 80px);
}
@media (min-width: 900px) {
  :root { --line-x: 24px; --pl: 84px; --pr: 40px; }
}
/* Not every section the same height of air: the process list is a quick read and sits close, the state paperwork is the claim the
   page leans on and gets room. (Seven of nine sections used to share one padding and one heading size.) */
#day .wrap { --pad-y: clamp(40px, 4.2vw, 56px); }
#state .wrap { --pad-y: clamp(64px, 7.4vw, 104px); }

*, *::before, *::after { box-sizing: border-box; }
/* No scroll-behavior: smooth. It made every deep link (barrierline.com/#compare) glide from the top for 0.6 to 1.5 seconds,
   and the owner who followed a link to the comparison watched the page crawl past everything else. A link lands where it points. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overflow-x: clip; scroll-padding-top: 72px; }
body {
  margin: 0; background: var(--ground); color: var(--ink);
  font: 400 1.125rem/1.6 var(--text); overflow-x: clip; font-synthesis: none;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 2px; }
.dark :focus-visible { outline-color: var(--lit); }
.skip { position: absolute; left: 16px; top: -80px; background: var(--ink); color: var(--on-band); padding: 12px 16px; border-radius: 8px; z-index: 50; font-weight: 600; }
.skip:focus { top: 12px; }
.vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---- type: Figtree 700 for display (tight, about -0.02em), 400 for text, 500 for labels, 600 for small headings and table heads ---- */
h1, h2, h3 { font-family: var(--display); font-weight: 700; line-height: 1.06; letter-spacing: -0.02em; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(2.5rem, 1rem + 5.2vw, 5rem); line-height: 1.02; }
h2 { font-size: clamp(1.875rem, 1.1rem + 2.3vw, 3rem); }
h3 { font-size: 1.5rem; line-height: 1.12; }
p { margin: 0 0 1em; text-wrap: pretty; }
.lede { font-size: clamp(1.1875rem, 1rem + 0.7vw, 1.4375rem); line-height: 1.5; max-width: 38em; }
.measure { max-width: 34em; }
.quiet { color: var(--quiet); }
.dark .quiet { color: var(--on-band-quiet); }
.small { font-size: 0.9375rem; line-height: 1.5; }
strong { font-weight: 600; }

/* ---- the header ---- */
.top { position: sticky; top: 0; z-index: 20; background: var(--ground); border-bottom: 1px solid var(--rule); }
.top-in { display: flex; align-items: center; gap: 20px; width: min(1280px, 100%); margin-inline: auto; padding: 10px var(--pr) 10px 16px; min-height: 60px; }
@media (min-width: 900px) { .top-in { padding-left: calc(var(--line-x) + 0px); } }
.brand { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-family: var(--display); font-weight: 700; font-size: 1.375rem; letter-spacing: -0.015em; text-decoration: none; }
.mark { width: 30px; height: 30px; flex: none; }
.nav { display: none; margin-left: auto; gap: 28px; font-weight: 500; font-size: 1rem; }
.nav a { color: var(--ink-2); text-decoration: none; padding: 8px 0; border-bottom: 2px solid transparent; white-space: nowrap; }
@media (hover: hover) and (pointer: fine) { .nav a:hover { color: var(--ink); border-bottom-color: var(--ink); } }
/* The four links and the button need about 825px. They used to show from 760px, where "Your records", "How we compare"
   and "Open the demo" broke onto two lines and the sticky header grew from 65px to 90px on every iPad. From 900px (the
   page's own desktop breakpoint, with room to spare if a fallback font is wider) they show; below it the header is the brand
   and the button, which fit at 320px. */
@media (min-width: 900px) { .nav { display: flex; } }
/* the header's button is the page's one main button, the same sage as the hero's, at the 44px touch size */
.top .btn { margin-left: auto; min-height: 44px; padding: 0 18px; font-size: 0.9375rem; white-space: nowrap; }
@media (min-width: 900px) { .top .btn { margin-left: 8px; } }
/* under about 355px the brand and the whole label do not fit side by side: the label may wrap to two lines inside the 44px button */
@media (max-width: 359px) { .top .btn { white-space: normal; line-height: 1.1; padding: 0 12px; text-align: center; } .top-in { gap: 12px; } }
/* with larger text (a browser's "very large" font size, a phone's larger-text setting) the label wraps inside the button
   instead of running off the right edge, where the page's clipped overflow left no way to reach it */
@media (max-width: 899px) { .top .btn { white-space: normal; line-height: 1.1; text-align: center; } .brand { min-width: 0; } }

/* ---- buttons: 8px radius like the app's, a sage fill with a white label for the one main button ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 22px;
  border-radius: 8px; border: 1.5px solid var(--rule-strong); background: transparent; color: var(--ink);
  font: 600 1.0625rem/1 var(--text); text-decoration: none; cursor: pointer;
  transition: transform 160ms var(--ease-out), background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}
.btn:active { transform: scale(0.97); }
.btn.go { background: var(--go); border: 2px solid var(--go); color: var(--on-go); }
.btn.big { min-height: 56px; padding: 0 28px; font-size: 1.1875rem; }
@media (hover: hover) and (pointer: fine) {
  .btn.go:hover { background: var(--go-press); border-color: var(--go-press); }
  .dark .btn.go:hover { background: var(--on-band); border-color: var(--on-band); }
  .btn:not(.go):hover { background: var(--sunk); }
  .dark .btn:not(.go):hover { background: var(--band-rule); }
}
.dark .btn:not(.go) { border-color: var(--on-band); color: var(--on-band); }
.dark .btn.go { background: var(--lit); color: var(--ink); border-color: var(--lit); }
.arrow { width: 18px; height: 18px; flex: none; }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
.textlink { font-weight: 600; display: inline-flex; align-items: center; min-height: 44px; }

/* ---- the barrier line: every .wrap carries its own length of it, and the lengths join ---- */
.seg { position: relative; }
.wrap {
  position: relative; width: min(1280px, 100%); margin-inline: auto;
  padding: var(--pad-y) var(--pr) var(--pad-y) var(--pl);
}
.wrap::before, .wrap::after { content: ""; position: absolute; left: var(--line-x); top: 0; bottom: 0; pointer-events: none; }
.wrap::before { width: var(--line-w); background: repeating-linear-gradient(to bottom, var(--line-c) 0 6px, transparent 6px 12px); opacity: 0.22; }
.wrap::after { width: var(--line-w); background: var(--line-c); transform-origin: top; transform: scaleY(var(--p, 1)); }
.dark .wrap::before { opacity: 0.3; }
.wrap.first::before, .wrap.first::after { top: 0; }
.wrap.last::before, .wrap.last::after { bottom: calc(var(--pad-y) + 28px - 2px); }
.wrap.plain::before, .wrap.plain::after { display: none; }

/* a stake: a claim's marker on the line. It fills in as the line reaches it. */
.stake { position: relative; }
.stake::before {
  content: ""; position: absolute; z-index: 3; top: 0.35em; left: calc(var(--line-x) - var(--pl) + (var(--line-w) / 2) - 10px);
  width: 20px; height: 20px; background: var(--line-c); border: 3px solid var(--line-c); border-radius: 3px;
  transition: transform 220ms var(--ease-out), background-color 220ms ease;
}
.js .stake::before { background: var(--ground); transform: scale(0.7); }
.js .dark .stake::before { background: var(--band); }
.js .stake.on::before { background: var(--line-c); transform: scale(1); }

/* a picture that sits on the line: its left edge IS the line */
.on-line { margin-left: calc(var(--line-x) - var(--pl)); position: relative; z-index: 1; }
.shot { border: 1px solid var(--rule-strong); border-radius: 10px; background: var(--surface); width: 100%; height: auto; }
.cap { font-size: 0.9375rem; line-height: 1.45; color: var(--quiet); margin: 14px 0 0; max-width: 34em; }
.dark .cap { color: var(--on-band-quiet); }
.cap strong { color: var(--ink); }
.dark .cap strong { color: var(--on-band); }

.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity 420ms var(--ease-out), transform 420ms var(--ease-out); }
.js .reveal.on { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .stake::before { transition: none; }
  .three a .q { transition: none; }
}

/* ---- the hero: the line starts as the treated perimeter around a tech's work, square like a perimeter around a
   house, with its bait stations on it. It leaves at the bottom left and runs to the page's spine. ---- */
.hero .wrap { padding-top: clamp(36px, 5vw, 76px); padding-bottom: 0; }
.hero-grid { --hero-gap: 0px; display: grid; column-gap: var(--hero-gap); row-gap: 0; }
@media (min-width: 1000px) { .hero-grid { --hero-gap: clamp(48px, 5vw, 80px); grid-template-columns: minmax(0, 1fr) auto; } }
.hero-copy { padding-bottom: 44px; }
@media (min-width: 1000px) { .hero-copy { padding-bottom: 64px; } }
.hero h1 { margin-bottom: 0.42em; max-width: 11em; }
.hero .lede { margin-bottom: 1.4em; max-width: 34em; }
.hero .note { margin: 18px 0 0; font-size: 1rem; color: var(--ink-2); }
.three { list-style: none; margin: 40px 0 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--rule-strong); max-width: 36em; }
.three a { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--rule); text-decoration: none; font-weight: 600; font-size: 1.0625rem; min-height: 52px; }
/* the question slides 8px on hover with a transform; it used to animate padding-left, which re-lays out the row every frame */
.three a .q { transition: transform 200ms var(--ease-out); }
.three a span.go { display: inline-flex; align-items: center; color: var(--quiet); font-weight: 400; font-size: 0.9375rem; white-space: nowrap; }
.three a span.go svg { display: none; width: 18px; height: 18px; flex: none; }
@media (hover: hover) and (pointer: fine) { .three a:hover .q { transform: translateX(8px); } .three a:hover span.go { color: var(--brand-text); } }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: reduce) { .three a:hover .q { transform: none; } }
/* a narrow phone: the question alone, with an arrow drawn in SVG (the Figtree subset has no arrow glyph), so it never wraps against
   its label. The label stays in the page for a screen reader. */
@media (max-width: 479px) {
  .three a span.go .t { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .three a span.go svg { display: block; color: var(--quiet); }
}
.hero-art { --fence-pad: clamp(20px, 2.4vw, 32px); display: flex; flex-direction: column; align-items: flex-start; }
.fence { position: relative; padding: var(--fence-pad); max-width: 100%; }
.fence::before { content: ""; position: absolute; inset: 0; border: var(--line-w) solid var(--line-c); pointer-events: none; }
.station { position: absolute; z-index: 2; width: 14px; height: 14px; border: 3px solid var(--line-c); background: var(--line-c); }
/* bait stations sit along a perimeter at uneven intervals, not at the four midpoints (which read as a design tool's selection handles) */
.st1 { top: -5px; left: calc(31% - 7px); } .st2 { right: -5px; top: calc(63% - 7px); } .st3 { bottom: -5px; left: calc(69% - 7px); } .st4 { left: -5px; top: calc(37% - 7px); }
.js .station { background: var(--ground); transition: background-color 240ms ease; }
.js .hero.on .station { background: var(--line-c); }
.js .hero.on .st2 { transition-delay: 110ms; } .js .hero.on .st3 { transition-delay: 220ms; } .js .hero.on .st4 { transition-delay: 330ms; }
/* A fixed width, never a percentage: a percentage-width phone inside a shrink-to-fit frame made the frame as wide as the whole
   column (718px around a 270px phone at 768px, with 428px of empty frame on the right). The min() keeps it inside a 320px screen. */
.hero .device { width: min(270px, calc(100vw - var(--pl) - var(--pr) - 2 * var(--fence-pad))); }
@media (min-width: 1000px) { .hero .device { width: 300px; } }
.tail { flex: 1 0 36px; border-left: var(--line-w) solid var(--line-c); }
.run {
  height: 48px; margin-left: calc(var(--line-x) - var(--pl));
  width: calc(100% + var(--hero-gap) + var(--pl) - var(--line-x) + var(--line-w));
  border-top: var(--line-w) solid var(--line-c); border-left: var(--line-w) solid var(--line-c);
}
@media (max-width: 999px) { .run { width: calc(var(--pl) - var(--line-x) + var(--line-w)); } }

/* a phone: the real screen in a slim ink body (inner radius = outer minus the body's width) */
.device { position: relative; width: 100%; padding: 7px; border-radius: 44px; background: var(--ink);
  box-shadow: 0 0 0 1px var(--ink-2), 0 26px 50px -26px rgb(16 27 21 / 0.55); }
.device img { display: block; width: 100%; height: auto; border-radius: 37px; background: var(--surface); }
/* says what the picture is: a browser with the network turned off, not a phone in airplane mode (it has not run on a tech's own phone) */
.air-chip { position: absolute; z-index: 2; top: -14px; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center;
  padding: 7px 12px; border-radius: 6px; background: var(--go); color: var(--on-go); font: 600 0.8125rem/1 var(--text); white-space: nowrap;
  box-shadow: 0 0 0 3px var(--ground); }

/* ---- claim blocks ---- */
/* minmax(0, 1fr), not the default auto column: an auto column grows to the widest thing inside it, and a 780px picture in a swipe row
   (below) pushed the whole claim, its heading and text included, to 792px on a 390px phone. */
.claim { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
.claim h2 { margin-bottom: 0.5em; }
.claim .copy p, .claim .copy li { max-width: 34em; }
/* Two columns only once there is room for both. The pictures take up to 700px but never more than 60.5% of the row, so the
   copy keeps about 330px at 1100px and 400px from 1280px up. (The first column used to be a flat 700px from 900px up, which left
   the copy 20px at 900px and 144px at 1024px: one word per line on a tablet.) Below 1100px the pictures sit above the copy. */
@media (min-width: 1100px) {
  .claim.phones { grid-template-columns: minmax(0, min(700px, 60.5%)) minmax(0, 1fr); gap: 56px; align-items: start; }
  .claim.phones .shots { grid-column: 1; grid-row: 1; }
  .claim.phones .copy { grid-column: 2; grid-row: 1; padding-top: 4px; }
  .claim.phones > .shots { align-self: start; position: sticky; top: 92px; padding-top: 40px; }
}
.shots { display: flex; gap: 16px; align-items: flex-start; }
.shots figure { margin: 0; flex: 1 1 0; min-width: 0; max-width: 300px; }
/* captions under a picture that sits on the line start beside the content, not on top of the line */
.on-line > .cap, .shots figure:first-child figcaption { margin-left: calc(var(--pl) - var(--line-x)); }
.facts { list-style: none; padding: 0; margin: 1.4em 0 0; display: grid; gap: 14px; }
.facts li { padding-top: 14px; border-top: 1px solid var(--rule); }
.facts li strong { display: block; }
.dark .facts li { border-top-color: var(--band-rule); }
.evidence { margin-top: 1.6em; padding: 16px 18px; background: var(--sunk); border-radius: 10px; font-size: 1rem; line-height: 1.5; max-width: 34em; }
.evidence b { font-weight: 600; }

.wide-head { display: grid; gap: 20px; margin-bottom: 36px; }
@media (min-width: 900px) { .wide-head { grid-template-columns: minmax(0, 5fr) minmax(0, 5fr); gap: 56px; align-items: end; } .wide-head h2 { margin: 0; } }
.wide-head h2 { margin-bottom: 0; }
.wide-head p { margin: 0; max-width: 34em; }
.shot.office { max-width: 1040px; }
/* a screen of the office is cut where the window ends: end it on a soft edge, on purpose, not mid-row */
.shot.office, .demo-shot .shot { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 72px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 72px), transparent); }

/* ---- the switch day: the line itself is the timeline ---- */
.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.steps li { display: grid; gap: 8px; padding: 0 0 clamp(34px, 5vw, 56px); }
.steps li:last-child { padding-bottom: 0; }
@media (min-width: 900px) { .steps li { grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); gap: 56px; } }
.steps h3 { font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.125rem); }
.steps p { margin: 0; max-width: 32em; }
.who { display: inline-block; font-family: var(--display); font-weight: 600; font-size: 0.9375rem; line-height: 1.2; padding: 4px 10px; border-radius: 6px; margin-bottom: 8px; }
.who.you { background: var(--ink); color: var(--on-band); }
.who.us { background: var(--sunk); color: var(--ink); border: 1px solid var(--rule-strong); }

/* ---- the dark band: the comparison ---- */
.dark { background: var(--band); color: var(--on-band); --line-c: var(--lit); }
.compare h2 { max-width: 14em; margin-bottom: 0.5em; }
.compare .lede { max-width: 40em; }
.cmp { width: 100%; border-collapse: collapse; margin-top: 40px; }
.cmp caption { text-align: left; }
.cmp th, .cmp td { text-align: left; vertical-align: top; padding: 18px 20px 18px 0; border-top: 1px solid var(--band-rule); }
.cmp thead th { font-family: var(--display); font-weight: 600; font-size: 0.9375rem; letter-spacing: 0.01em; color: var(--on-band-quiet); border-top: 0; padding-bottom: 12px; }
.cmp tbody th { font-weight: 600; font-size: 1.125rem; width: 34%; }
.cmp .n { font-family: var(--display); font-weight: 700; font-size: 1.75rem; line-height: 1; letter-spacing: -0.01em; font-variant-numeric: tabular-nums lining-nums; color: var(--lit); white-space: nowrap; width: 14%; }
/* only the number must stay on one line: the small label under it wraps (it used to stretch this column to 189px at desktop widths
   and ran 10px past the screen at 280px) */
.cmp .n small { display: block; font-family: var(--text); font-weight: 400; font-size: 0.9375rem; letter-spacing: 0; color: var(--on-band-quiet); margin-top: 4px; white-space: normal; }
.cmp td:last-child { padding-right: 0; }
@media (max-width: 899px) {
  .cmp, .cmp tbody, .cmp tr, .cmp th, .cmp td { display: block; }
  .cmp thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .cmp tr { padding: 18px 0; border-top: 1px solid var(--band-rule); }
  .cmp th, .cmp td { border: 0; padding: 0; width: auto !important; }
  .cmp .n { margin: 8px 0 8px; font-size: 1.5rem; white-space: normal; }
  .cmp .n small { display: inline; margin-left: 8px; }
}
.notyet { margin-top: 48px; display: grid; gap: 14px; max-width: 44em; }
.notyet h3 { font-size: 1.5rem; }
.notyet ul { margin: 0; padding-left: 1.1em; }
.notyet li { margin-bottom: 6px; }
.source { margin-top: 36px; font-size: 0.9375rem; color: var(--on-band-quiet); max-width: 52em; }

/* ---- the owner, the customer's page, Spanish ---- */
.owner { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; }
@media (min-width: 900px) { .owner { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 56px; } }
.pair { display: flex; gap: 16px; align-items: flex-start; }
.pair figure { margin: 0; }
.pair figure { flex: 1 1 0; max-width: 300px; }
.pair figure:nth-child(2) { margin-top: 56px; }
.little { list-style: none; padding: 0; margin: 2em 0 0; display: grid; gap: 0; max-width: 34em; }
.little li { padding: 16px 0; border-top: 1px solid var(--rule-strong); }
.little li:last-child { border-bottom: 1px solid var(--rule-strong); }
.little strong { display: block; font-size: 1.125rem; }

/* ---- the quiet section ---- */
.sparse .wrap { padding-block: clamp(72px, 9vw, 128px); }
.sparse h2 { font-size: clamp(2.1rem, 1rem + 3.4vw, 3.75rem); max-width: 12em; margin-bottom: 0.5em; }
.sparse p { max-width: 32em; }

/* ---- the end: the line turns into the button ---- */
.demo h2 { max-width: 12em; margin-bottom: 0.4em; }
.demo .lede { max-width: 36em; }
.demo-shot { margin: 40px 0 0; max-width: 1040px; }
.demo-shot .shot { border-color: var(--band-rule); box-shadow: 0 32px 64px -32px rgb(5 9 7 / 0.7); }
.end-row { margin-top: 44px; position: relative; }
.end-row .btn.go { position: relative; }
.end-row .btn.go::before {
  content: ""; position: absolute; right: 100%; top: 50%; height: var(--line-w); transform: translateY(-50%);
  width: calc(var(--pl) - var(--line-x) - (var(--line-w) / 2) + 2px); background: var(--line-c);
}
.end-row .row { gap: 14px 22px; }
.end-note { margin-top: 28px; font-size: 1rem; color: var(--on-band-quiet); max-width: 38em; }

/* ---- footer ---- */
.foot { border-top: 1px solid var(--rule-strong); background: var(--ground); }
.foot-in { width: min(1280px, 100%); margin-inline: auto; padding: 44px var(--pr) 48px var(--pl); display: grid; gap: 22px 40px; font-size: 1rem; }
@media (min-width: 900px) { .foot-in { grid-template-columns: minmax(0, 1fr) auto; align-items: start; } .foot-small { grid-column: 1 / -1; } }
.foot-brand .brand { margin-left: -2px; }
.foot-brand p { margin: 6px 0 0; max-width: 30em; }
.foot-nav { display: flex; flex-wrap: wrap; gap: 4px 26px; }
.foot-nav a { padding: 8px 0; min-height: 44px; display: inline-flex; align-items: center; }
.foot-small { margin: 0; padding-top: 18px; border-top: 1px solid var(--rule); font-size: 0.9375rem; }

/* phones side by side are too small to read on a phone: there they become a row you swipe, each at a readable size */
@media (max-width: 599px) {
  /* the 56px of bottom padding is room for the phones' shadow (an overflow-x:auto box also clips vertically, which cut the shadow
     into a hard-edged grey slab); the negative margin gives that room back to the layout */
  .shots:not(.solo), .pair { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 16px 16px 56px 0; margin-right: calc(-1 * var(--pr)); margin-bottom: -50px; }
  .shots:not(.solo)::-webkit-scrollbar, .pair::-webkit-scrollbar { display: none; }
  .shots:not(.solo) figure, .pair figure { flex: 0 0 calc(100% - 64px); max-width: 290px; scroll-snap-align: start; }
  .pair figure:nth-child(2) { margin-top: 0; }
  /* The office's pictures are desktop screens. Shrunk to a phone they are 0.35 of their size and the type is about 5px, so here each
     keeps a readable width and is swiped. A stand-in: when the pictures are re-taken, shoot 390px crops and serve those instead. */
  .scroll-x { overflow-x: auto; scrollbar-width: none; margin-right: calc(-1 * var(--pr)); padding-right: var(--pr); }
  .scroll-x::-webkit-scrollbar { display: none; }
  .scroll-x > .shot { width: 780px; max-width: none; }
  .demo-shot .shot { box-shadow: none; }
}

/* ---- long reading pages: privacy, terms, delete ---- */
.doc-head { border-bottom: 1px solid var(--rule); }
.doc { width: min(1280px, 100%); margin-inline: auto; padding: clamp(40px, 6vw, 88px) var(--pr) clamp(64px, 9vw, 128px) var(--pl); position: relative; }
.doc::before { content: ""; position: absolute; left: var(--line-x); top: 0; bottom: 0; width: var(--line-w); background: var(--go); }
.doc-in { max-width: 70ch; }
.doc h1 { font-size: clamp(2.4rem, 1.2rem + 4vw, 4rem); margin-bottom: 0.4em; }
.doc h2 { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.1rem); margin: 2.2em 0 0.6em; line-height: 1.1; }
.doc h3 { font-size: 1.25rem; margin: 1.6em 0 0.4em; }
.doc p, .doc li { line-height: 1.65; }
.doc a { overflow-wrap: anywhere; } /* a long address (barrierline.com/delete-account) can break rather than widen the page at large text */
.doc ul, .doc ol { padding-left: 1.2em; margin: 0 0 1em; }
.doc li { margin-bottom: 0.45em; }
.doc li > ul { margin-top: 0.45em; }
.draft { background: var(--sunk); border: 1px solid var(--rule-strong); border-radius: 10px; padding: 16px 18px; margin: 0 0 2em; font-size: 1.0625rem; line-height: 1.5; }
.draft strong { display: block; margin-bottom: 4px; }
mark.ph { background: var(--warn-bg); color: var(--warn); padding: 0 0.25em; border-radius: 3px; font-weight: 600; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.doc table { width: 100%; border-collapse: collapse; margin: 1em 0 1.6em; font-size: 1rem; line-height: 1.5; }
.doc th, .doc td { text-align: left; vertical-align: top; padding: 12px 14px 12px 0; border-top: 1px solid var(--rule-strong); }
.doc thead th { font-family: var(--display); font-weight: 600; letter-spacing: 0.01em; font-size: 0.9375rem; color: var(--quiet); border-top: 0; }
@media (max-width: 699px) {
  .doc table, .doc tbody, .doc tr, .doc td { display: block; }
  .doc thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .doc tr { padding: 14px 0; border-top: 1px solid var(--rule-strong); }
  .doc td { border: 0; padding: 0 0 4px; }
  .doc td::before { content: attr(data-label) ": "; font-weight: 600; }
}
.steps-doc { counter-reset: s; list-style: none; padding: 0 !important; }
.steps-doc li { counter-increment: s; padding-left: 2.6rem; position: relative; }
.steps-doc li::before { content: counter(s); position: absolute; left: 0; top: 0.05em; width: 1.9rem; height: 1.9rem; display: grid; place-items: center; background: var(--ink); color: var(--on-band); border-radius: 6px; font: 600 1rem/1 var(--display); font-variant-numeric: tabular-nums; }

/* ---- 404 ---- */
.lost { min-height: 70vh; display: grid; align-content: center; }
.lost h1 { font-size: clamp(2.5rem, 1rem + 5.2vw, 5rem); margin-bottom: 0.3em; }

/* small helpers (no inline styles: the page's CSP forbids them) */
.shots.solo { display: block; }
.tight { margin-top: 0.7em; }
.nb { white-space: nowrap; }
.steps { margin-top: clamp(36px, 5vw, 64px); }

@media (max-width: 719px) {
  /* The buttons stack in the order they are read and tabbed to: the main one first (it used to be reversed with column-reverse,
     so a keyboard went bottom to top). The line ends at the middle of that first button: below it are 14px + 56px + 14px + 44px
     (the main button's own middle is 28px from its top, and the line is 4px wide). */
  .end-row .row { flex-direction: column; align-items: flex-start; gap: 14px; }
  .end-row .btn.big { width: 100%; max-width: 360px; }
  .wrap.last::before, .wrap.last::after { bottom: calc(var(--pad-y) + 154px); }
}

/* Printing or saving a PDF from a page that has not been scrolled: every picture and step is still waiting to be revealed, and
   would print blank. Print everything, with the line whole. */
@media print {
  .wrap::after { transform: none !important; }
  .js .stake::before, .js .station { background: var(--line-c) !important; transform: none !important; }
  .js .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .top { position: static; }
}