/* Macy · the public site. The world: a paper canvas, ONE deep ink for text and for the primary button (paper text on it,
   never yellow), a yellow highlighter behind key words, paper notes with tape, 6px buttons. The device: an iPhone at a 3D
   angle that plays a whole call. Motion is decoration only (notes and devices drift and turn with scroll); every word is in
   the page from the first paint, and prefers-reduced-motion stops it all.
   English, left to right, logical properties. Strict CSP: no inline styles anywhere; JS sets only custom properties.
   TEXT SIZE: every font size a visitor reads is multiplied by --ts (reading text), --tsu (buttons, menu links, the lead
   lines) or --tsd (headlines). All three are 1 here. The accessibility options (a11y.css, a11y.js) raise them; the
   phones' screens, the hero's notes and the top bar keep their size. A new font size takes one of the three
   (dev/a11y-widget.mjs fails on one that does not). */
@font-face { font-family: 'Bricolage Grotesque'; font-weight: 200 800; font-stretch: 100%; font-display: swap; src: url('../fonts/bricolage-grotesque-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Figtree'; font-weight: 300 900; font-display: swap; src: url('../fonts/figtree-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --paper: #fcfaf5; --paper2: #f4f0e6; --paper3: #ebe5d6; --white: #ffffff;
  --ink: #10302b; --ink2: #4a625e; --line: rgba(16, 48, 43, .16); --line2: rgba(16, 48, 43, .45);
  --hl: #ffe24a; --teal: #a8e5e5; --sage: #d5f5c2;
  --ok: #2fbf62; --red: #d92d3e; --wa: #25d366;
  --display: 'Bricolage Grotesque', 'Figtree', system-ui, sans-serif;
  --body: 'Figtree', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --dw: 700; /* the display face's weight */
  --gut: max(clamp(22px, 5vw, 64px), env(safe-area-inset-left), env(safe-area-inset-right));
  --sec: clamp(104px, 12vw, 176px);
  --r-btn: 6px; --r-note: 6px; --r-card: 16px;
  --t-h1: clamp(44px, 5.2vw, 80px); --t-h2: clamp(38px, 4.8vw, 68px); --t-lead: clamp(18px, 1.45vw, 21px);
  --focus: 0 0 0 3px var(--paper), 0 0 0 5.5px var(--ink);
  --paper-shadow: 0 1px 3px rgba(0, 0, 0, .08), 0 22px 44px -22px rgba(16, 48, 43, .42);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --ts: 1; --tsu: 1; --tsd: 1; /* the text-size steps of the accessibility options (a11y.css) */
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-block-start: 88px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background-color: var(--paper); color: var(--ink); font: 400 calc(18px * var(--ts))/1.6 var(--body); overflow-x: clip; }
h1, h2, h3, p, figure, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-underline-offset: 4px; }
img, video { display: block; max-inline-size: 100%; block-size: auto; }
button, input { font: inherit; color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: none; box-shadow: var(--focus); border-radius: 6px; }
.sr { position: absolute !important; inset-inline-start: 0; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sprite { display: none; }
.skip { position: fixed; inset-block-start: 10px; inset-inline-start: 10px; z-index: 100; padding: 10px 18px; border-radius: var(--r-btn); background-color: var(--ink); color: var(--paper); font-weight: 700; text-decoration: none; transform: translateY(-160%); }
.skip:focus { transform: none; }
.wrap { inline-size: min(100% - 2 * var(--gut), 1240px); margin-inline: auto; }

/* sections that hold tilted paper keep it inside the screen (clip, unlike hidden, leaves sticky children working) */
.hero, .flow, .listen, .fit, .quotes, .start { overflow-x: clip; }

/* ---------- type ---------- */
.kicker { display: inline-block; padding: 6px 14px; border-radius: 16px; box-shadow: inset 0 0 0 1.5px var(--ink); font: 700 calc(14.5px * var(--tsu))/1.25 var(--body); letter-spacing: .01em; }
h1 { font: var(--dw) calc(var(--t-h1) * var(--tsd))/1.03 var(--display); letter-spacing: -.02em; text-wrap: balance; }
.h2 { font: var(--dw) calc(var(--t-h2) * var(--tsd))/1.06 var(--display); letter-spacing: -.018em; text-wrap: balance; }
h3 { text-wrap: balance; }
mark { background: linear-gradient(var(--hl), var(--hl)) no-repeat 0 82% / 100% 64%; color: inherit; padding-inline: .08em; margin-inline: -.04em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.lead { font-size: calc(var(--t-lead) * var(--tsu)); line-height: 1.6; color: var(--ink2); text-wrap: pretty; }
.sub { font-size: calc(var(--t-lead) * var(--tsu)); line-height: 1.55; color: var(--ink2); text-wrap: pretty; }
.fine { font-size: calc(15px * var(--ts)); color: var(--ink2); }
.sec-head { display: grid; gap: 18px; justify-items: start; max-inline-size: 780px; }

/* ---------- buttons: ink with paper text; the yellow lives only in the icon chip ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-block-size: 60px; padding-inline: 12px 26px; border: 0; border-radius: var(--r-btn); background-color: var(--ink); color: var(--paper); font: 700 calc(18.5px * var(--tsu))/1 var(--body); text-decoration: none; white-space: nowrap; cursor: pointer; box-shadow: 0 1px 2px rgba(0, 0, 0, .06); transition: transform .2s var(--ease), background-color .2s; }
.btn:hover { background-color: #0a2420; }
.btn:active { transform: translateY(1px); }
.btn .chip { display: grid; place-items: center; inline-size: 38px; block-size: 38px; border-radius: 4px; background-color: var(--hl); color: var(--ink); }
.btn svg { inline-size: 19px; block-size: 19px; }
.btn.line { background-color: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.btn.line:hover { background-color: rgba(16, 48, 43, .05); }
.btn.line .chip { background-color: var(--sage); }
.btn.plain { padding-inline: 26px; }
.btn[aria-disabled='true'] { opacity: .6; cursor: progress; }
.ctas { display: flex; flex-wrap: wrap; gap: 14px; }

/* ---------- nav: the name, the full menu beside it, and the way to meet her at the far end.
   On phones and tablets the menu folds behind a menu button and the call button stays ---------- */
.nav { position: sticky; inset-block-start: 0; z-index: 30; background-color: rgba(252, 250, 245, .9); backdrop-filter: saturate(140%) blur(14px); -webkit-backdrop-filter: saturate(140%) blur(14px); box-shadow: 0 1px 0 var(--line); }
.nav-bar { display: flex; align-items: center; gap: 24px; min-block-size: 72px; }
.word { font: var(--dw) 31px/1 var(--display); letter-spacing: -.014em; text-decoration: none; }
.links { display: flex; align-items: center; gap: 2px; margin-inline-start: 10px; }
.links > a { padding: 10px 11px; border-radius: var(--r-btn); font-weight: 600; font-size: 16px; text-decoration: none; white-space: nowrap; }
.links > a:hover { background-color: rgba(16, 48, 43, .06); }
.menu-ctas { display: none; }
.nav-acts { display: flex; align-items: center; gap: 8px; margin-inline-start: auto; }
.nav-call { min-block-size: 46px; gap: 9px; padding-inline: 6px 16px; font-size: 16.5px; }
.nav-call .chip { inline-size: 34px; block-size: 34px; }
.nav-call svg { inline-size: 17px; block-size: 17px; }
.ico { display: grid; place-items: center; inline-size: 46px; block-size: 46px; border: 0; border-radius: var(--r-btn); background-color: var(--ink); color: var(--paper); cursor: pointer; }
.ico svg { inline-size: 20px; block-size: 20px; }
.ico.wa { background-color: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.ico.wa svg { inline-size: 22px; block-size: 22px; }
.burger { display: none; background-color: transparent; color: var(--ink); }
.burger span, .burger span::before, .burger span::after { content: ''; display: block; inline-size: 22px; block-size: 2.4px; border-radius: 2px; background-color: var(--ink); transition: transform .25s var(--ease), opacity .2s; }
.burger span { position: relative; } .burger span::before { position: absolute; inset-block-start: -7px; } .burger span::after { position: absolute; inset-block-start: 7px; }
.burger[aria-expanded='true'] span { background-color: transparent; }
.burger[aria-expanded='true'] span::before { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded='true'] span::after { transform: translateY(-7px) rotate(-45deg); }
/* the market switch: the same two links on every page (US, UK), the one a home page shows marked in yellow */
.markets { display: flex; align-items: center; gap: 2px; margin-inline-start: 10px; padding-inline-start: 12px; border-inline-start: 1.5px solid var(--line); }
.markets .globe { inline-size: 18px; block-size: 18px; margin-inline-end: 4px; color: var(--ink2); }
.markets-h { display: none; }
.markets a { padding: 8px 9px; border-radius: var(--r-btn); font-weight: 700; font-size: .875em; color: var(--ink2); text-decoration: none; white-space: nowrap; }
.markets a:hover { background-color: rgba(16, 48, 43, .06); color: var(--ink); }
.markets a[aria-current] { background-color: var(--hl); color: var(--ink); }

@media (max-width: 1200px) {
  .burger { display: grid; }
  .links { position: absolute; inset-block-start: 100%; inset-inline: 0; display: none; flex-direction: column; align-items: stretch; gap: 0; margin: 0; padding: 12px var(--gut) 24px; background-color: var(--paper); box-shadow: 0 1px 0 var(--line), 0 24px 40px -20px rgba(16, 48, 43, .25); max-block-size: calc(100svh - 72px); overflow: auto; }
  .links.open { display: flex; }
  .links > a { padding: 16px 4px; border-radius: 0; border-block-end: 1px solid var(--line); font-size: calc(19px * var(--tsu)); }
  .markets { flex-wrap: wrap; gap: 8px; margin: 18px 0 0; padding: 0; border: 0; }
  .markets-h { display: block; margin-inline-end: 4px; font-weight: 700; font-size: calc(16px * var(--tsu)); color: var(--ink2); }
  .markets a { padding: 10px 16px; font-size: calc(17px * var(--tsu)); box-shadow: inset 0 0 0 1.5px var(--line2); }
  .menu-ctas { display: grid; gap: 12px; margin-block-start: 20px; }
  .menu-ctas .btn { inline-size: 100%; }
}

/* ---------- hero ---------- */
/* the first screen holds the promise, one line, the way to meet her and the ringing phone; the phone is sized by the screen's height */
.hero { --hero-pad: clamp(16px, 3svh, 40px); --hw: min(clamp(220px, calc((100svh - 230px) * .466), 300px), calc((100vw - 2 * var(--gut)) * .3)); padding-block: var(--hero-pad) var(--sec); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(32px, 4vw, 72px); align-items: center; min-block-size: min(calc(100svh - 72px - var(--hero-pad)), 900px); }
.hero-copy { display: grid; gap: 24px; justify-items: start; }
.hero-copy .lead { max-inline-size: 42ch; font-size: calc(clamp(19px, 1.6vw, 23px) * var(--tsu)); line-height: 1.5; color: var(--ink); text-wrap: balance; }
.hero-copy .ctas { margin-block-start: 4px; }
.hero-copy .fine { margin-block-start: -8px; }
.hero-copy .trial { margin-block-start: -12px; font-size: calc(16px * var(--ts)); font-weight: 700; }
/* what is true about her, in four short items, each with a tick */
.trust { display: flex; flex-wrap: wrap; gap: 8px 22px; max-inline-size: 40rem; padding-block-start: 18px; border-block-start: 1.5px solid var(--line); }
.trust li { position: relative; padding-inline-start: 25px; font-size: calc(15.5px * var(--ts)); font-weight: 600; line-height: 1.45; }
.trust li::before { content: ''; position: absolute; inset-inline-start: 3px; inset-block-start: .42em; inline-size: 12px; block-size: 6.5px; border: solid var(--ink); border-width: 0 0 2.6px 2.6px; rotate: -45deg; }
.hero-art { position: relative; display: grid; place-items: center; min-block-size: calc(var(--hw) * 2.144 + 56px); }
.hero-art .illus { position: absolute; inset-block-end: 0; inset-inline-end: 0; font-size: 13.5px; color: var(--ink2); }

/* decoration (the hero's notes, the phone that plays the steps and its flying note) keeps its size at every text size */
.hero-art, .pin { --ts: 1; --tsu: 1; --tsd: 1; }
/* drifting things: JS writes --p (-1 below the screen's middle, 1 above it); each element chooses how much it moves */
.drift { translate: 0 calc(var(--p, 0) * var(--dy, 0px)); rotate: calc(var(--r, 0deg) + var(--p, 0) * var(--dr, 0deg)); will-change: translate, rotate; }
.d0 { --dy: -36px; } .d1 { --r: 5deg; --dr: -9deg; --dy: -80px; } .d2 { --r: -6deg; --dr: 8deg; --dy: -140px; }
.d3 { --r: 2deg; --dr: -3deg; --dy: -44px; }

/* paper notes */
.note { position: relative; padding: 34px 26px 22px; border-radius: var(--r-note); background-color: var(--hl); box-shadow: var(--paper-shadow); }
.note::before { content: ''; position: absolute; inset-block-start: -12px; inset-inline-start: 50%; translate: -50% 0; inline-size: 92px; block-size: 26px; background-color: rgba(255, 255, 255, .6); rotate: 3deg; }
.note .k { display: block; font: 700 calc(13.5px * var(--ts))/1.3 var(--body); color: var(--ink2); }
.note b { display: block; margin-block: 8px 4px; font: var(--dw) calc(28px * var(--tsd))/1.1 var(--display); letter-spacing: -.014em; }
.note span:not(.k) { display: block; font-size: calc(17px * var(--ts)); line-height: 1.4; }
/* hero notes sit beside the phone and only lap its edge, never its name or its buttons (physical sides: they follow the phone) */
.hero-art { --edge: max(var(--gut), calc((100vw - 1240px) / 2)); --nx: .3; }
.n-a { position: absolute; z-index: 3; bottom: calc(50% - var(--hw) * .5); right: calc(50% + var(--hw) * var(--nx)); inline-size: min(264px, 54%, calc(var(--hw) * .95)); }
.n-b { --nw: min(228px, 46%, calc(var(--hw) * .82)); position: absolute; z-index: 3; top: calc(50% - var(--hw) * 1.02); right: max(calc(16px - var(--edge)), calc(50% - var(--hw) * var(--nx) - var(--nw))); inline-size: var(--nw); background-color: var(--teal); }
/* the hero's notes scale with its phone (which is sized by the screen's height), so on a short screen they stay notes */
.hero .note { padding: calc(var(--hw) * .11) calc(var(--hw) * .085) calc(var(--hw) * .072); }
.hero .note .k { font-size: clamp(12px, calc(var(--hw) * .046), 13.5px); }
.hero .note b { font-size: clamp(20px, calc(var(--hw) * .094), 28px); }
.hero .note span:not(.k) { font-size: clamp(14px, calc(var(--hw) * .057), 17px); }

/* ---------- the device: an iPhone built in real 3D. A front face (titanium rim, black glass, the screen) on a slab of 12 thin
   layers that reads as the metal side with its buttons, a sheen on the glass, a soft shadow behind. Sizes follow --w ---------- */
.stage3d { --w: 300px; position: relative; z-index: 2; display: grid; place-items: center; perspective: 1500px; }
.device { --d: calc(var(--w) * .09); --rad: calc(var(--w) * .165); --bezel: calc(var(--w) * .032); --sx: 1;
  --b-front: #cfd9d5; --b-mid: #7b8b85; --b-deep: #61706b; --b-back: #3c4a46; --key: #56655f;
  position: relative; inline-size: var(--w); aspect-ratio: 9 / 19.3; min-block-size: 0; transform-style: preserve-3d; }
.slab, .slab i { position: absolute; inset: 0; transform-style: preserve-3d; }
.slab i { border-radius: var(--rad); background-color: var(--band, var(--b-mid)); transform: translateZ(calc(var(--d) / 2 - var(--d) * var(--n) / 12)); }
.slab i:nth-child(1) { --n: 1; --band: var(--b-front); } .slab i:nth-child(2) { --n: 2; } .slab i:nth-child(3) { --n: 3; } .slab i:nth-child(4) { --n: 4; }
.slab i:nth-child(5) { --n: 5; } .slab i:nth-child(6) { --n: 6; } .slab i:nth-child(7) { --n: 7; } .slab i:nth-child(8) { --n: 8; --band: var(--b-deep); }
.slab i:nth-child(9) { --n: 9; --band: var(--b-deep); } .slab i:nth-child(10) { --n: 10; --band: var(--b-deep); } .slab i:nth-child(11) { --n: 11; --band: var(--b-deep); }
.slab i:nth-child(12) { --n: 12; --band: var(--b-back); box-shadow: calc(var(--sx) * 40px) 56px 80px -20px rgba(16, 48, 43, .5); }
.slab i:nth-child(n+4):nth-child(-n+9)::before, .slab i:nth-child(n+4):nth-child(-n+9)::after { content: ''; position: absolute; inline-size: 5px; border-radius: 2px; background-color: var(--key); }
.slab i:nth-child(n+4):nth-child(-n+9)::before { left: -2.5px; top: 18%; block-size: 4.6%; box-shadow: 0 calc(var(--w) * .17) 0 var(--key), 0 calc(var(--w) * .34) 0 var(--key); }
.slab i:nth-child(n+4):nth-child(-n+9)::after { right: -2.5px; top: 27%; block-size: 10%; }
.shell { position: absolute; inset: 0; padding: 2.5px; border-radius: var(--rad); background: linear-gradient(215deg, #e4ebe8 0%, #83928c 10%, #2f3c39 34%, #1d2826 62%, #74847e 88%, #cdd7d3 100%); transform: translateZ(calc(var(--d) / 2)); }
.glass { position: relative; block-size: 100%; padding: var(--bezel); border-radius: calc(var(--rad) - 2.5px); background-color: #050908; }
.glass::after { content: ''; position: absolute; z-index: 6; inset: 0; border-radius: inherit; background: linear-gradient(248deg, rgba(255, 255, 255, .2) 0%, rgba(255, 255, 255, .07) 26%, rgba(255, 255, 255, 0) 44%); pointer-events: none; }
.scr { position: relative; block-size: 100%; border-radius: calc(var(--rad) - 2.5px - var(--bezel)); overflow: hidden; background-color: var(--white); }
.scr::before { content: ''; position: absolute; z-index: 5; inset-block-start: calc(var(--w) * .033); left: 50%; translate: -50% 0; inline-size: 32%; block-size: calc(var(--w) * .09); border-radius: 99px; background-color: #000; }
.floor { position: absolute; z-index: -1; inset-block-end: calc(var(--w) * -.12); left: 50%; translate: -50% 0; inline-size: calc(var(--w) * 1.05); block-size: calc(var(--w) * .2); border-radius: 50%; background: radial-gradient(closest-side, rgba(16, 48, 43, .3), rgba(16, 48, 43, 0)); }
.hero .stage3d { --w: var(--hw); }
/* the hero phone turns its face toward the words beside it */
.hero .device { --sx: -1; transform: rotateX(8deg) rotateY(calc(-30deg + var(--p, 0) * 8deg)) rotateZ(4deg); }

/* the ringing screen in the hero, iOS style: the time at the left, the battery at the right */
.ring-scr { display: grid; justify-items: center; align-content: start; padding: 24% 16px 0; background: radial-gradient(130% 75% at 50% 0%, #2a7266 0%, #10302b 64%); color: var(--paper); text-align: center; }
.ring-scr .clock { position: absolute; inset-block-start: calc(var(--w) * .047); inset-inline-start: 12%; font: 700 calc(var(--w) * .05)/1 var(--body); }
.ring-scr::after { content: ''; position: absolute; inset-block-start: calc(var(--w) * .052); inset-inline-end: 12%; inline-size: calc(var(--w) * .078); block-size: calc(var(--w) * .038); padding: 2px; border-radius: 4px; box-shadow: inset 0 0 0 1.3px rgba(252, 250, 245, .65); background: linear-gradient(to right, var(--paper) 72%, transparent 72%) content-box; }
.ring-scr .cap { font-size: calc(var(--w) * .047); opacity: .78; white-space: nowrap; }
.ring-scr .num { margin-block-start: 2px; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.ring-scr .who { margin-block: 6px 4px; font: var(--dw) calc(var(--w) * .15)/1 var(--display); letter-spacing: -.014em; }
.avatar { display: grid; place-items: center; inline-size: calc(var(--w) * .35); block-size: calc(var(--w) * .35); margin-block-start: calc(var(--w) * .13); border-radius: 50%; background-color: var(--hl); color: var(--ink); font: var(--dw) calc(var(--w) * .155) var(--display); box-shadow: 0 0 0 0 rgba(255, 226, 74, .55); animation: ring 1.7s ease-out 3; }
.avatar.soft { background-color: var(--teal); }
@keyframes ring { to { box-shadow: 0 0 0 30px rgba(255, 226, 74, 0); } }
.acts { position: absolute; inset-block-end: 8.5%; inset-inline: 0; display: flex; justify-content: space-around; }
.acts > span { display: grid; justify-items: center; gap: 8px; font-size: calc(var(--w) * .045); }
.acts i { display: grid; place-items: center; inline-size: calc(var(--w) * .215); block-size: calc(var(--w) * .215); border-radius: 50%; }
.acts i svg { inline-size: 42%; block-size: 42%; color: #fff; }
.acts .yes i { background-color: var(--ok); } .acts .no i { background-color: var(--red); } .acts .no svg { rotate: 135deg; }

/* ---------- the flow ---------- */
.flow { padding-block: 0 var(--sec); }
.stage { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(32px, 6vw, 96px); margin-block-start: clamp(48px, 6vw, 80px); }
.pin { position: sticky; inset-block-start: 96px; block-size: calc(100svh - 120px); display: grid; place-items: center; }
.flow-tilt { --w: clamp(220px, calc((100svh - 200px) * .466), 300px); }
.flow-tilt .device { --b-front: #aebbb6; --b-mid: #56655f; --b-deep: #46534f; --b-back: #2c3734; --key: #3f4c48; transform: rotateX(7deg) rotateY(calc(24deg + var(--p, 0) * -6deg)) rotateZ(-3deg); }
.step { min-block-size: 78svh; display: grid; align-content: center; }
.step .card { display: grid; gap: 14px; }
.step .n { font: var(--dw) calc(21px * var(--tsd)) var(--display); color: var(--ink2); }
.step h3 { font: var(--dw) calc(clamp(32px, 3.6vw, 50px) * var(--tsd))/1.08 var(--display); letter-spacing: -.01em; }
.step p { max-inline-size: 38ch; font-size: calc(var(--t-lead) * var(--tsu)); color: var(--ink2); }
.demo-note { margin-block-start: 40px; text-align: center; font-size: calc(14px * var(--ts)); color: var(--ink2); }

.flow-scr { background-color: var(--paper2); }
.view { position: absolute; inset: 0; display: grid; align-content: start; gap: 10px; padding: 62px 16px 18px; opacity: 0; transition: opacity .45s ease; }
.device[data-at='1'] .v1, .device[data-at='2'] .v2, .device[data-at='3'] .v3, .device[data-at='4'] .v4, .device[data-at='5'] .v5, .device[data-at='6'] .v6 { opacity: 1; }
/* the two call screens: a call forwarded to her (1) and a call she makes back (2) */
.callv { justify-items: center; text-align: center; padding-block-start: 74px; background: radial-gradient(120% 70% at 50% 0%, #1f5d54 0%, #10302b 62%); color: var(--paper); }
.callv .cap { font-size: calc(var(--w) * .047); opacity: .78; white-space: nowrap; } .callv .who { font: var(--dw) calc(var(--w) * .12)/1 var(--display); letter-spacing: -.016em; }
.callv .who.num { font-size: calc(var(--w) * .086); letter-spacing: 0; font-variant-numeric: tabular-nums; white-space: nowrap; }
.callv .avatar { margin-block-start: 26px; }
.talking { display: inline-flex; align-items: center; gap: 5px; margin-block-start: 30px; padding: 9px 16px; border-radius: 999px; background-color: rgba(255, 255, 255, .12); font-size: 13.5px; white-space: nowrap; }
.talking i { inline-size: 6px; block-size: 6px; border-radius: 50%; background-color: var(--hl); animation: blinkdot 1.2s ease-in-out 4; }
.talking i:first-of-type { margin-inline-start: 4px; }
.talking i:nth-of-type(2) { animation-delay: .2s; } .talking i:nth-of-type(3) { animation-delay: .4s; }
@keyframes blinkdot { 50% { opacity: .25; } }
.bar { display: flex; align-items: center; gap: 8px; margin-block-end: 6px; font-size: 12.5px; color: var(--ink2); }
.bar b { white-space: nowrap; font: var(--dw) 17px var(--display); letter-spacing: -.01em; color: var(--ink); }
.bar span:last-child { margin-inline-start: auto; }
.live-dot { inline-size: 9px; block-size: 9px; border-radius: 50%; background-color: var(--ok); }
.b { max-inline-size: 88%; padding: 9px 12px; border-radius: 14px; background-color: var(--white); font-size: 13.5px; line-height: 1.4; box-shadow: 0 1px 2px rgba(0, 0, 0, .06); }
.b small { display: block; font-size: 10.5px; font-weight: 700; opacity: .7; }
.b.m { justify-self: end; background-color: var(--ink); color: var(--paper); }
.v-cal { background-color: var(--white); }
.slot { display: flex; align-items: center; gap: 8px; padding: 10px 10px; border-radius: 8px; font-size: 13px; white-space: nowrap; }
.slot time { inline-size: 62px; font-weight: 800; }
.slot.busy { background-color: var(--paper2); color: var(--ink2); }
.slot.open { background-color: rgba(47, 191, 98, .12); }
.slot.pick { background-color: var(--hl); font-weight: 800; box-shadow: inset 0 0 0 2px var(--ink); }
.v-inv { align-content: center; }
.invite { display: grid; gap: 4px; padding: 18px 16px; border-radius: 12px; background-color: var(--white); box-shadow: 0 1px 3px rgba(0, 0, 0, .1); font-size: 13.5px; border-block-start: 6px solid var(--teal); }
.invite b { font: var(--dw) 21px var(--display); letter-spacing: -.014em; }
.invite .guests { margin-block-start: 8px; padding-block-start: 8px; border-block-start: 1px dashed var(--line2); color: var(--ink2); }
/* the app's home screen, drawn here: who is waiting, the week, the latest note */
.v-app { gap: 9px; background-color: var(--paper); }
.app-top { display: flex; align-items: baseline; justify-content: space-between; }
.app-top b { font: var(--dw) 20px/1 var(--display); letter-spacing: -.014em; }
.app-top span { font-size: 11px; color: var(--ink2); }
.app-h { margin-block-start: 2px; font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ink2); }
.app-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1px 8px; padding: 8px 10px; border-radius: 9px; background-color: var(--white); box-shadow: inset 0 0 0 1px var(--line); font-size: 11.5px; line-height: 1.3; }
.app-row b { font-size: 13px; }
.app-row small { grid-column: 1 / -1; font-size: 11px; color: var(--ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tag { align-self: center; padding: 2px 7px; border-radius: 99px; background-color: var(--hl); font-size: 10px; font-weight: 800; white-space: nowrap; }
.tag.t-prog { background-color: var(--teal); } .tag.t-cust { background-color: var(--sage); }
.app-week { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
.app-week span { display: grid; justify-items: center; gap: 1px; padding: 7px 2px; border-radius: 9px; background-color: var(--paper2); font-size: 9.5px; color: var(--ink2); }
.app-week b { font: var(--dw) 17px/1 var(--display); color: var(--ink); }
.app-call { display: grid; gap: 6px; padding: 9px 10px; border-radius: 9px; background-color: var(--ink); color: var(--paper); font-size: 11.5px; line-height: 1.3; }
.app-call b { font-size: 12.5px; }
.app-call .wave { display: flex; align-items: center; gap: 2.5px; block-size: 16px; }
.app-call .wave i { flex: 1; border-radius: 2px; background-color: var(--hl); block-size: 30%; }
.app-call .wave i:nth-child(3n) { block-size: 90%; } .app-call .wave i:nth-child(4n+1) { block-size: 55%; } .app-call .wave i:nth-child(5n+2) { block-size: 75%; }
.app-call .tags { display: flex; gap: 4px; }
.app-call .tags span { padding: 2px 7px; border-radius: 99px; background-color: rgba(252, 250, 245, .14); font-size: 9.5px; font-weight: 700; }
.fly { position: absolute; z-index: 3; inline-size: min(270px, 68%); inset-block-start: 38%; inset-inline-start: 50%; translate: -50% 0; scale: .45; opacity: 0; pointer-events: none; transition: translate .8s var(--ease), scale .8s var(--ease), rotate .8s ease, opacity .3s ease; }
.pin[data-at='6'] .fly { opacity: 1; scale: 1; translate: 16% 18%; rotate: 8deg; }

/* ---------- hear her: her real voices to play, and a sample call on paper beside them ---------- */
.listen { padding-block: 0 var(--sec); }
.listen-grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(36px, 6vw, 96px); align-items: center; }
.polaroid { padding: 14px 14px 60px; border-radius: var(--r-note); background-color: var(--white); box-shadow: var(--paper-shadow); position: relative; }
.polaroid video { inline-size: 100%; aspect-ratio: 1; min-block-size: 0; object-fit: cover; border-radius: 4px; background-color: var(--paper3); }
.polaroid figcaption { position: absolute; inset-block-end: 17px; inset-inline: 20px; font: var(--dw) calc(19px * var(--tsd)) var(--display); letter-spacing: -.01em; }
.polaroid::before, .polaroid::after { content: ''; position: absolute; z-index: 1; inset-block-start: -10px; inline-size: 96px; block-size: 26px; background-color: rgba(255, 226, 74, .75); }
.polaroid::before { inset-inline-start: -16px; rotate: -32deg; } .polaroid::after { inset-inline-end: -16px; rotate: 32deg; }
.script { display: grid; gap: 10px; padding: clamp(18px, 2.4vw, 28px) clamp(14px, 2vw, 24px); border-radius: 4px; background-color: var(--paper2); }
.script .line { max-inline-size: 86%; padding: 11px 14px; border-radius: 14px; background-color: var(--white); font-size: calc(16px * var(--ts)); line-height: 1.42; box-shadow: 0 1px 2px rgba(0, 0, 0, .06); }
.script .line small { display: block; margin-block-end: 1px; font-size: calc(12px * var(--ts)); font-weight: 800; color: var(--ink2); }
.script .line.m { justify-self: end; background-color: var(--ink); color: var(--paper); }
.script .line.m small { color: rgba(252, 250, 245, .78); }
.script .line.cal { justify-self: center; max-inline-size: none; padding: 6px 14px; border-radius: 99px; background-color: var(--hl); font-size: calc(13.5px * var(--ts)); font-weight: 700; box-shadow: none; }
.listen-copy { display: grid; gap: 22px; justify-items: start; }
/* the voices: one card per sample, a round play button in ink, the name and the accent; the card turns yellow while it plays */
.voice-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; justify-self: stretch; }
.voice-btn { display: flex; align-items: center; gap: 14px; inline-size: 100%; min-block-size: 78px; padding: 12px 18px 12px 12px; border: 0; border-radius: 14px; background-color: var(--white); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line); text-align: start; cursor: pointer; transition: background-color .2s; }
.voice-btn:hover { box-shadow: inset 0 0 0 1.5px var(--line2); }
.voice-ico { display: grid; place-items: center; flex: none; inline-size: 50px; block-size: 50px; border-radius: 50%; background-color: var(--ink); color: var(--hl); }
.voice-ico svg { inline-size: 22px; block-size: 22px; }
.voice-btn .i-stop, .voice-btn[aria-pressed='true'] .i-play { display: none; }
.voice-btn[aria-pressed='true'] .i-stop { display: block; }
.voice-txt { display: grid; gap: 2px; min-inline-size: 0; }
.voice-txt b { font: var(--dw) calc(21px * var(--tsd))/1.15 var(--display); letter-spacing: -.012em; }
.voice-txt span { font-size: calc(15px * var(--ts)); color: var(--ink2); }
.voice-bars { display: flex; align-items: center; gap: 3px; block-size: 24px; margin-inline-start: auto; }
.voice-bars i { inline-size: 4px; block-size: 28%; border-radius: 2px; background-color: var(--line2); }
.voice-bars i:nth-child(2) { block-size: 62%; } .voice-bars i:nth-child(3) { block-size: 44%; } .voice-bars i:nth-child(4) { block-size: 78%; }
.voice-btn[aria-pressed='true'] { background-color: var(--hl); box-shadow: inset 0 0 0 2px var(--ink); }
.voice-btn[aria-pressed='true'] .voice-txt span { color: var(--ink); }
.voice-btn[aria-pressed='true'] .voice-bars i { background-color: var(--ink); animation: vbar .7s ease-in-out infinite alternate; }
.voice-btn[aria-pressed='true'] .voice-bars i:nth-child(2) { animation-delay: .15s; } .voice-btn[aria-pressed='true'] .voice-bars i:nth-child(3) { animation-delay: .3s; } .voice-btn[aria-pressed='true'] .voice-bars i:nth-child(4) { animation-delay: .45s; }
@keyframes vbar { from { block-size: 22%; } to { block-size: 100%; } }
.voice-file { display: none; }
.voice-msg { font-size: calc(15.5px * var(--ts)); font-weight: 700; color: #b3202f; }
.voice-msg:empty { display: none; }
.voice-line { max-inline-size: 54ch; font-size: calc(16px * var(--ts)); line-height: 1.55; color: var(--ink2); text-wrap: pretty; }
.voices-note { max-inline-size: 54ch; padding: 14px 18px; border-radius: var(--r-note); background-color: var(--teal); font-size: calc(16.5px * var(--ts)); font-weight: 600; line-height: 1.5; }

/* ---------- who it fits ---------- */
.fit { padding-block: 0 var(--sec); }
.trades { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 24px; margin-block-start: 56px; }
.trades .note { padding: 30px 24px 24px; }
.trades .note b { font-size: calc(26px * var(--tsd)); margin-block-start: 0; }
.trades .note span { font-size: calc(17px * var(--ts)); color: var(--ink); }
.t1 { rotate: 1.5deg; } .t2 { rotate: -1deg; background-color: var(--teal); } .t3 { rotate: .5deg; background-color: var(--sage); }
.t4 { rotate: -1.5deg; background-color: var(--sage); } .t5 { rotate: 1deg; } .t6 { rotate: -.8deg; background-color: var(--teal); }

/* ---------- control and privacy ---------- */
.control { padding-block: var(--sec); background-color: var(--paper2); }
.rules { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-block-start: 56px; }
.rules li { display: grid; align-content: start; gap: 12px; padding: 30px 26px; border-radius: var(--r-card); background-color: var(--paper); box-shadow: inset 0 0 0 1.5px var(--line); }
.rules li::before { content: ''; inline-size: 44px; block-size: 8px; border-radius: 2px; background-color: var(--hl); }
.rules h3 { font: var(--dw) calc(23px * var(--tsd))/1.18 var(--display); letter-spacing: -.014em; }
.rules p { font-size: calc(16.5px * var(--ts)); color: var(--ink2); }
.rules a { color: var(--ink); font-weight: 700; }
.rules.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* ---------- what missed calls cost: the head and the button on one side, the calculator on the other ---------- */
.cost { padding-block: var(--sec); }
.cost-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); grid-template-rows: auto 1fr; grid-template-areas: 'head calc' 'go calc'; gap: 32px clamp(32px, 6vw, 96px); align-items: start; }
.cost .sec-head { grid-area: head; }
.cost-go { grid-area: go; }
.calc { grid-area: calc; display: grid; gap: 22px; padding: clamp(22px, 3vw, 40px); border-radius: var(--r-card); background-color: var(--paper2); box-shadow: inset 0 0 0 1.5px var(--line); }
.calc-fields { display: grid; gap: 20px; }
.calc-field { display: grid; gap: 8px; }
.calc-field label { font-weight: 700; font-size: calc(17px * var(--ts)); line-height: 1.35; }
.calc .hint, .calc .err { margin: 0; }
.calc-in { position: relative; display: block; }
.calc-in input { inline-size: 100%; min-block-size: 58px; padding-inline: 16px; border: 0; border-radius: var(--r-btn); background-color: var(--white); box-shadow: inset 0 0 0 1.5px var(--line2); font: 700 calc(20px * var(--ts)) var(--body); color: var(--ink); }
.calc-in input:focus { outline: none; box-shadow: inset 0 0 0 2.5px var(--ink); }
.calc-in input[aria-invalid='true'] { box-shadow: inset 0 0 0 2.5px var(--red); }
.calc-cur, .calc-unit { position: absolute; inset-block: 0; display: grid; place-items: center; font: 700 calc(20px * var(--ts)) var(--body); color: var(--ink2); pointer-events: none; }
.calc-cur { inset-inline-start: 16px; }
.calc-unit { inset-inline-end: 16px; }
.calc-cur + input { padding-inline-start: calc(22px + 1.1em); }
.calc-in [data-calc-in='share'] { padding-inline-end: calc(22px + 1.1em); }
.calc-out { display: grid; align-items: center; min-block-size: 104px; padding: 22px 24px; border-radius: 12px; background-color: var(--ink); color: var(--paper); }
.calc-wait { font-size: calc(17px * var(--ts)); color: rgba(252, 250, 245, .86); }
.calc-res { font-size: calc(19px * var(--tsu)); line-height: 1.5; text-wrap: pretty; }
.calc-res b { font: var(--dw) calc(31px * var(--tsd))/1.2 var(--display); letter-spacing: -.012em; color: var(--hl); white-space: nowrap; }
.calc-note { font-size: calc(14.5px * var(--ts)); color: var(--ink2); }

/* ---------- compared: a real table where there is room, one card per row where there is not ---------- */
.compare { padding-block: 0 var(--sec); }
.cmp { margin-block-start: 48px; container-type: inline-size; }
.cmp table { inline-size: 100%; border-collapse: separate; border-spacing: 0; font-size: calc(17px * var(--ts)); line-height: 1.45; }
.cmp th, .cmp td { padding: 17px 20px; border-block-end: 1.5px solid var(--line); text-align: start; vertical-align: top; color: var(--ink2); text-wrap: pretty; }
.cmp thead th { padding-block: 20px 14px; border-block-end: 2px solid var(--ink); font: var(--dw) calc(22px * var(--tsd))/1.2 var(--display); letter-spacing: -.012em; color: var(--ink); }
.cmp thead td { border-block-end: 2px solid var(--ink); }
.cmp tbody th { inline-size: 27%; font-weight: 700; color: var(--ink); }
.cmp :is(th, td):nth-child(2) { background-color: var(--hl); color: var(--ink); }
.cmp thead th:nth-child(2) { border-start-start-radius: var(--r-card); border-start-end-radius: var(--r-card); }
.cmp tbody tr:last-child td:nth-child(2) { border-end-start-radius: var(--r-card); border-end-end-radius: var(--r-card); }
.cmp tbody tr:last-child :is(th, td) { border-block-end: 0; }
.cmp .yes { font-weight: 800; }
@container (max-width: 46em) {
  .cmp :is(table, tbody, tr, th, td) { display: block; }
  .cmp thead { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .cmp tr { padding: 18px 18px 14px; border-radius: var(--r-card); background-color: var(--white); box-shadow: inset 0 0 0 1.5px var(--line); }
  .cmp tr + tr { margin-block-start: 14px; }
  .cmp :is(tbody th, td) { inline-size: auto; padding: 4px 0; border: 0; }
  .cmp tbody th { padding-block-end: 8px; font: var(--dw) calc(21px * var(--tsd))/1.2 var(--display); letter-spacing: -.012em; }
  .cmp td::before { content: attr(data-th); display: block; font-weight: 700; font-size: .84em; color: var(--ink); }
  .cmp td:nth-child(2) { margin-block: 2px 8px; padding: 10px 12px; border-radius: 10px; }
}

/* ---------- what owners say (only once there are quotes, given with consent) ---------- */
.quotes { padding-block: 0 var(--sec); }
.quote-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 24px; margin-block-start: 56px; }
.quote-list .note { padding: 30px 24px 24px; }
.quote-list blockquote { margin: 0; }
.quote-list blockquote p { font: var(--dw) calc(22px * var(--tsd))/1.3 var(--display); letter-spacing: -.01em; }
.quote-list .who { margin-block-start: 16px; }
.quote-list .who b { margin: 0; font: 700 calc(16px * var(--ts))/1.35 var(--body); letter-spacing: 0; }
.quote-list .who span { font-size: calc(15px * var(--ts)); color: var(--ink2); }
.q1 { rotate: -1deg; } .q2 { rotate: .8deg; background-color: var(--teal); } .q3 { rotate: -.5deg; background-color: var(--sage); }

/* ---------- the app, and the plans ---------- */
.plans-sec { padding-block: var(--sec); }
.see { padding-block: 0; }
.rules.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rules.two li { gap: 14px; }
/* what she works with: a row of three, the one still to come marked so */
.works { display: grid; gap: 18px; margin-block-start: 40px; }
.works-h { font: var(--dw) calc(23px * var(--tsd))/1.18 var(--display); letter-spacing: -.014em; }
.works-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.works-list li { display: flex; align-items: flex-start; gap: 16px; padding: 22px; border-radius: var(--r-card); box-shadow: inset 0 0 0 1.5px var(--line); }
.works-list b { font: var(--dw) calc(20px * var(--tsd))/1.2 var(--display); letter-spacing: -.01em; }
.works-list p { margin-block-start: 6px; font-size: calc(16px * var(--ts)); color: var(--ink2); }
.w-ico { display: grid; place-items: center; flex: none; inline-size: 46px; block-size: 46px; border-radius: 12px; background-color: var(--hl); color: var(--ink); }
.w-ico svg { inline-size: 24px; block-size: 24px; }
.works-list .soon .w-ico { background-color: var(--paper3); }
.badge { display: inline-flex; align-items: center; justify-self: start; padding: 3px 10px; border-radius: 99px; background-color: var(--ink); color: var(--paper); font: 700 calc(13px * var(--ts))/1.35 var(--body); letter-spacing: .02em; vertical-align: .15em; white-space: nowrap; }
.plan-soon { font-size: calc(17px * var(--ts)); color: var(--ink2); }
.plans { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 22px; margin-block-start: 56px; }
.plan { display: grid; align-content: start; gap: 14px; padding: clamp(30px, 4vw, 52px); border-radius: var(--r-card); }
.plan.main { background-color: var(--hl); }
.plan.alt { box-shadow: inset 0 0 0 1.5px var(--ink); }
.plan h3 { font: var(--dw) calc(clamp(28px, 3vw, 38px) * var(--tsd))/1.1 var(--display); letter-spacing: -.016em; }
.price { min-block-size: 34px; font: 700 calc(19px * var(--tsu))/1.4 var(--body); }
.ticks { display: grid; gap: 10px; margin-block: 6px 18px; }
.ticks li { position: relative; padding-inline-start: 30px; font-size: calc(17.5px * var(--ts)); }
.ticks li::before { content: ''; position: absolute; inset-inline-start: 2px; inset-block-start: 7px; inline-size: 14px; block-size: 8px; border: solid var(--ink); border-width: 0 0 3px 3px; rotate: -45deg; }
.plan .btn { justify-self: start; }
.plans-note { margin-block-start: 26px; color: var(--ink2); font-size: calc(16.5px * var(--ts)); }
.plans-note:empty { display: none; }

/* ---------- getting started ---------- */
.start { padding-block: 0 var(--sec); }
.start-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 24px; margin-block-start: 56px; counter-reset: st; }
.start-steps .note { padding: 30px 24px 24px; counter-increment: st; }
.start-steps .note .k::before { content: '0' counter(st) ' · '; }
.start-steps .note b { font-size: calc(26px * var(--tsd)); }
.start-steps .note span:not(.k) { font-size: calc(17px * var(--ts)); }
.s1 { rotate: -1.2deg; background-color: var(--teal); } .s2 { rotate: .8deg; } .s3 { rotate: -.6deg; background-color: var(--sage); }

/* ---------- faq ---------- */
.faq { padding-block: var(--sec); background-color: var(--paper2); }
.faq-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.faq .sec-head { position: sticky; inset-block-start: 110px; }
.qa { border-block-end: 1.5px solid var(--line); }
.qa:first-child { border-block-start: 1.5px solid var(--line); }
.qa summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-block-size: 70px; padding-block: 16px; font: 700 calc(19px * var(--tsu))/1.35 var(--body); cursor: pointer; list-style: none; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: ''; flex: none; inline-size: 12px; block-size: 12px; margin-inline-end: 4px; border: solid var(--ink); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg) translate(-3px, -3px); transition: transform .25s var(--ease); }
.qa[open] summary::after { transform: rotate(-135deg); }
.qa .a { padding-block-end: 24px; font-size: calc(17.5px * var(--ts)); color: var(--ink2); max-inline-size: 64ch; }
.qa .a p { text-wrap: pretty; }
.qa .a a, .faq .sub a { color: var(--ink); font-weight: 700; }

/* ---------- last call ---------- */
.last { padding-block: var(--sec); text-align: center; }
.last .wrap { display: grid; justify-items: center; gap: 26px; }
.last .h2 { font-size: calc(clamp(44px, 6.6vw, 96px) * var(--tsd)); }
.last .sub { max-inline-size: 40ch; }
.last .ctas { justify-content: center; margin-block-start: 10px; }

/* ---------- footer: the brand and how to reach us, three short columns, then the company line and the documents.
   One source for every page: dev/chrome.mjs writes it in ---------- */
.foot { padding-block: 80px calc(30px + env(safe-area-inset-bottom)); background-color: var(--ink); color: var(--paper); }
.foot a { color: var(--paper); text-decoration: none; }
.foot a:hover { text-decoration: underline; text-underline-offset: 4px; }
.foot-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) repeat(3, minmax(0, 1fr)); gap: 48px 32px; }
.foot-brand { display: grid; gap: 18px; align-content: start; }
.foot-brand .word { font-size: calc(46px * var(--tsd)); }
.foot-brand p { color: rgba(252, 250, 245, .82); font-size: calc(16px * var(--ts)); max-inline-size: 42ch; }
.foot-contact { display: grid; gap: 6px; }
.foot-contact li { display: grid; justify-items: start; font-size: calc(14px * var(--ts)); color: rgba(252, 250, 245, .72); }
.foot-contact a { padding-block: 2px 6px; font-size: calc(17.5px * var(--ts)); font-weight: 700; color: var(--paper); }
.foot-col { display: grid; align-content: start; justify-items: start; }
.foot-col .h { margin-block-end: 10px; font: var(--dw) calc(20px * var(--tsd)) var(--display); letter-spacing: -.01em; color: var(--hl); }
.foot-col a { display: inline-flex; align-items: center; min-block-size: 40px; font-size: calc(16px * var(--ts)); color: rgba(252, 250, 245, .86); }
.foot-col a[aria-current] { font-weight: 700; color: var(--hl); }
.foot-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 28px; margin-block-start: 64px; padding-block-start: 18px; border-block-start: 1px solid rgba(252, 250, 245, .16); font-size: calc(14.5px * var(--ts)); color: rgba(252, 250, 245, .72); }
.foot-legal { display: flex; flex-wrap: wrap; gap: 0 22px; }
.foot-legal a { display: inline-flex; align-items: center; min-block-size: 40px; font-weight: 700; color: rgba(252, 250, 245, .92); }

/* ---------- the sheet: the short form ---------- */
.sheet { position: fixed; inset: 0; z-index: 60; display: grid; align-items: end; justify-items: center; background-color: rgba(16, 48, 43, .4); }
.sheet-card { position: relative; inline-size: 100%; max-block-size: 94svh; overflow: auto; overscroll-behavior: contain; padding: 30px var(--gut) calc(26px + env(safe-area-inset-bottom)); border-radius: 18px 18px 0 0; background-color: var(--paper); box-shadow: 0 -20px 60px rgba(16, 48, 43, .25); animation: rise .35s var(--ease); }
@keyframes rise { from { transform: translateY(40px); opacity: 0; } }
@media (min-width: 861px) { .sheet { align-items: center; } .sheet-card { inline-size: min(600px, 92vw); border-radius: 18px; padding: 40px 40px 34px; max-block-size: 90vh; } }
.x { position: absolute; inset-block-start: 12px; inset-inline-end: 12px; display: grid; place-items: center; inline-size: 44px; block-size: 44px; border: 0; border-radius: var(--r-btn); background: none; cursor: pointer; }
.x svg { inline-size: 22px; block-size: 22px; stroke: var(--ink); stroke-width: 2.2; stroke-linecap: round; fill: none; }
.call-form fieldset { border: 0; margin: 0; padding: 0; min-inline-size: 0; }
.call-form legend { padding: 0; padding-inline-end: 40px; font: var(--dw) calc(clamp(27px, 3vw, 33px) * var(--tsd))/1.12 var(--display); letter-spacing: -.016em; }
.call-form legend:focus { outline: none; box-shadow: none; }
.meta { margin-block: 8px 20px; font-size: calc(16px * var(--ts)); color: var(--ink2); }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { position: relative; }
.chip input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.chip span { display: inline-flex; align-items: center; min-block-size: 50px; padding-inline: 16px; border-radius: var(--r-btn); background-color: var(--white); box-shadow: inset 0 0 0 1.5px var(--line2); font-weight: 600; font-size: calc(16.5px * var(--tsu)); }
.chip input:checked + span { background-color: var(--hl); box-shadow: inset 0 0 0 2px var(--ink); }
.chip input:focus-visible + span { box-shadow: inset 0 0 0 2px var(--ink), var(--focus); }
.chips.small .chip span { min-block-size: 44px; padding-inline: 14px; font-size: calc(15.5px * var(--tsu)); }
.field { display: grid; gap: 7px; margin-block: 16px 0; }
.field label { font-weight: 700; font-size: calc(16px * var(--ts)); }
.field label small { font-weight: 400; font-size: calc(14.5px * var(--ts)); color: var(--ink2); }
.field input { inline-size: 100%; min-block-size: 58px; padding-inline: 16px; border: 0; border-radius: var(--r-btn); background-color: var(--white); box-shadow: inset 0 0 0 1.5px var(--line2); font: 600 calc(18.5px * var(--ts)) var(--body); color: var(--ink); }
.field input:focus { outline: none; box-shadow: inset 0 0 0 2.5px var(--ink); }
.field input[aria-invalid='true'] { box-shadow: inset 0 0 0 2.5px var(--red); }
.field input::placeholder { color: #5b6f6b; font-weight: 400; opacity: 1; }
.two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 14px; }
.hint { margin-block-start: 8px; font-size: calc(14px * var(--ts)); color: var(--ink2); }
.q { margin-block-start: 18px; }
.q-label { display: block; margin-block-end: 10px; font-weight: 700; font-size: calc(16px * var(--ts)); }
.q-label small { font-weight: 400; font-size: calc(14.5px * var(--ts)); color: var(--ink2); }
.err { display: block; margin-block-start: 6px; color: #b3202f; font-size: calc(14.5px * var(--ts)); font-weight: 700; }
.form-alert { scroll-margin-block: 110px; margin-block: 18px 0; padding: 12px 16px; border-radius: var(--r-btn); background-color: #fdeceb; box-shadow: inset 0 0 0 1.5px rgba(217, 45, 62, .4); color: #8c1622; font-size: calc(15.5px * var(--ts)); font-weight: 600; }
.form-alert a { color: var(--ink); font-weight: 800; }
.form-actions { display: grid; gap: 12px; margin-block-start: 24px; }
/* The form's button, and the sentence under it, stay in view while the fields scroll beneath: in a phone's browser the
   form is taller than the screen, and a form whose button is out of sight reads as a form without one. The foot reaches
   the card's own bottom edge (it carries the card's bottom padding itself), so nothing shows under it. Below 480px of
   height (a keyboard that shrinks the page) it goes back into the flow, so it never crowds the field being typed. */
.sheet-card { --foot-pad: calc(26px + env(safe-area-inset-bottom)); }
@media (min-width: 861px) { .sheet-card { --foot-pad: 34px; } }
.form-foot { position: relative; margin-block-start: 12px; padding-block-start: 12px; background-color: var(--paper); }
.form-foot .form-actions { margin-block-start: 0; }
@media (min-height: 480px) {
  .sheet-card { scroll-padding-block-end: 250px; }
  .form-foot { position: sticky; inset-block-end: calc(-1 * var(--foot-pad)); z-index: 2; padding-block-end: var(--foot-pad); }
  .form-foot:last-child { margin-block-end: calc(-1 * var(--foot-pad)); }
  .form-foot + .or-wa { margin-block-start: 0; }
  .form-foot::before { content: ''; position: absolute; inset-inline: 0; inset-block-end: 100%; block-size: 18px; background-image: linear-gradient(to top, var(--paper), rgba(252, 250, 245, 0)); pointer-events: none; }
}
.form-actions .btn { inline-size: 100%; }
html.locked { overflow: hidden; }
.opt-in { display: flex; align-items: center; gap: 12px; min-block-size: 48px; margin-block-start: 16px; font-size: calc(16px * var(--ts)); font-weight: 600; cursor: pointer; }
.opt-in input { flex: none; inline-size: 22px; block-size: 22px; margin: 0; accent-color: var(--ink); cursor: pointer; }
.opt-in input:focus-visible { outline: none; box-shadow: var(--focus); }
.call-form .notice { max-inline-size: none; margin-block-start: 14px; font-size: calc(12.5px * var(--ts)); line-height: 1.5; color: var(--ink2); }
.call-form .notice a { white-space: nowrap; }
/* on a phone the business chips are a size smaller, and on a short screen the line under the title steps aside, so the
   three answers the call needs (the business, a name, a phone) show together with the button */
@media (max-width: 520px) { .two .field input { padding-inline: 12px; font-size: calc(17px * var(--ts)); } [data-kind-group] { gap: 8px; } [data-kind-group] .chip span { min-block-size: 44px; padding-inline: 12px; font-size: calc(15.5px * var(--tsu)); } }
@media (max-height: 700px) and (max-width: 860px) { .sheet-card { padding-block-start: 20px; } .call-form .meta, .call-form .hint { display: none; } .call-form .q-label:first-of-type { margin-block-start: 12px; } .call-form .two .field { margin-block-start: 10px; } .field input { min-block-size: 52px; } }
/* what the call does not need sits behind one line: another time, the email for the invite, the business's name */
.more { margin-block-start: 6px; }
.more summary { display: flex; align-items: center; gap: 10px; inline-size: fit-content; min-block-size: 48px; font-size: calc(16px * var(--ts)); font-weight: 700; color: var(--ink); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; list-style: none; }
.more summary::-webkit-details-marker { display: none; }
.more summary small { font-weight: 400; color: var(--ink2); }
.more summary::after { content: ''; inline-size: 8px; block-size: 8px; margin-block-end: 4px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); }
.more[open] summary::after { margin-block: 4px 0; transform: rotate(-135deg); }
.more summary:focus-visible { outline: none; border-radius: 4px; box-shadow: var(--focus); }
.more > :last-child { margin-block-end: 6px; }
.or-wa { margin-block-start: 14px; min-block-size: 44px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0 6px; font-size: calc(15.5px * var(--ts)); color: var(--ink2); }
.or-wa a { color: var(--ink); font-weight: 800; }
.or-wa a:focus-visible { outline: none; border-radius: 4px; box-shadow: var(--focus); }
.back { display: block; margin: 14px auto 0; min-block-size: 44px; padding-inline: 14px; border: 0; background: none; color: var(--ink2); font-size: calc(15.5px * var(--ts)); font-weight: 700; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }

/* the call, live */
.live { display: grid; gap: 16px; padding-block: 10px 0; }
.live h2 { font: var(--dw) calc(clamp(28px, 3.2vw, 36px) * var(--tsd))/1.1 var(--display); letter-spacing: -.016em; padding-inline-end: 40px; }
.live h2:focus { outline: none; box-shadow: none; }
.live > p { font-size: calc(17.5px * var(--ts)); color: var(--ink2); }
.live .num { font: 800 calc(21px * var(--ts)) var(--body); color: var(--ink); white-space: nowrap; }
.live-steps { display: grid; gap: 10px; }
.live-steps li { display: flex; align-items: center; gap: 12px; min-block-size: 50px; padding: 10px 14px; border-radius: var(--r-btn); background-color: var(--white); box-shadow: inset 0 0 0 1.5px var(--line); color: var(--ink2); font-size: calc(16px * var(--ts)); }
.live-steps li i { flex: none; inline-size: 24px; block-size: 24px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--line2); }
.live-steps li.now { color: var(--ink); font-weight: 700; box-shadow: inset 0 0 0 2px var(--ink); }
.live-steps li.now i { box-shadow: inset 0 0 0 2px var(--ink); animation: blinkdot 1.4s ease-in-out 3; }
.live-steps li.done { color: var(--ink); }
.live-steps li.done i { background-color: var(--ink); box-shadow: none; display: grid; place-items: center; }
.live-steps li.done i::after { content: ''; inline-size: 5px; block-size: 10px; border: solid var(--paper); border-width: 0 2px 2px 0; transform: translateY(-1px) rotate(45deg); }
.booked { padding: 26px 22px 20px; border-radius: var(--r-note); background-color: var(--hl); font: var(--dw) calc(23px * var(--tsd))/1.22 var(--display); letter-spacing: -.014em; box-shadow: var(--paper-shadow); rotate: 1.5deg; }

/* the status pill: the call keeps going after the sheet is closed */
.status-pill { position: fixed; z-index: 40; inset-block-end: calc(16px + env(safe-area-inset-bottom)); inset-inline-start: 50%; translate: -50% 0; display: inline-flex; align-items: center; gap: 10px; min-block-size: 52px; padding-inline: 18px 22px; border: 0; border-radius: 999px; background-color: var(--ink); color: var(--paper); font: 700 calc(16px * var(--tsu)) var(--body); white-space: nowrap; box-shadow: 0 16px 40px -12px rgba(16, 48, 43, .5); cursor: pointer; }
.status-pill .dot { inline-size: 10px; block-size: 10px; border-radius: 50%; background-color: var(--hl); animation: blinkdot 1.4s ease-in-out 4; }

/* ---------- phones and narrow screens: air first ---------- */
@media (max-width: 860px) {
  :root { --sec: 112px; --t-h1: clamp(38px, 11.2vw, 54px); --t-h2: clamp(34px, 9.4vw, 46px); }
  body { font-size: calc(17px * var(--ts)); }
  .hero { --hw: min(250px, 64vw); padding-block-start: 32px; }
  .hero-grid { min-block-size: 0; }
  .hero-copy .lead { font-size: calc(18.5px * var(--tsu)); }
  .hero-grid, .listen-grid, .faq-grid, .plans, .cost-grid { grid-template-columns: minmax(0, 1fr); }
  .cost-grid { grid-template-rows: none; grid-template-areas: 'head' 'calc' 'go'; }
  .works-list { grid-template-columns: minmax(0, 1fr); }
  .hero-copy { gap: 20px; }
  .hero-copy .ctas, .last .ctas { display: grid; inline-size: 100%; }
  .ctas .btn { inline-size: 100%; }
  .last .ctas { justify-content: stretch; }
  /* on a phone the notes frame the phone from above and below, lapping only its corners */
  .hero-art { min-block-size: calc(var(--hw) * 2.144 + 230px); margin-block-start: 8px; }
  .hero .note { padding: 26px 20px 18px; } .hero .note b { font-size: 23px; } .hero .note span:not(.k) { font-size: 15px; }
  .n-a { bottom: 0; right: auto; left: 0; inline-size: min(222px, 62%); }
  .n-b { --nw: min(200px, 56%); top: 0; left: auto; right: 0; }
  .hero .d1 { --dy: -22px; } .hero .d2 { --dy: -28px; }
  .note b { font-size: calc(25px * var(--tsd)); } .note span:not(.k) { font-size: calc(16px * var(--ts)); }
  /* the flow on a phone: the phone sticks under the menu bar, each step gets a screen of air and a card under it */
  .stage { grid-template-columns: minmax(0, 1fr); gap: 0; margin-block-start: 48px; }
  .pin { inset-block-start: 84px; block-size: auto; z-index: 1; padding-block: 6px 0; }
  .flow-tilt { --w: min(196px, 50vw); }
  .view { padding: 48px 12px 14px; gap: 7px; } .callv { padding-block-start: 56px; }
  .b { padding: 7px 10px; font-size: 11.5px; } .b small { font-size: 9.5px; }
  .slot { padding: 7px 8px; font-size: 11px; gap: 5px; } .slot time { inline-size: 50px; }
  .bar { font-size: 10.5px; gap: 6px; } .bar b { font-size: 12.5px; }
  .invite { padding: 14px 12px; font-size: 12px; } .invite b { font-size: 18px; }
  .talking { margin-block-start: 18px; font-size: 12px; }
  .v-app { gap: 6px; } .app-top b { font-size: 17px; } .app-row { padding: 6px 8px; font-size: 10.5px; } .app-row b { font-size: 11.5px; } .app-row small { font-size: 10px; }
  .app-call { padding: 7px 8px; font-size: 10px; gap: 4px; } .app-call b { font-size: 11px; } .app-call .wave { block-size: 12px; } .app-call .tags span { font-size: 8px; padding: 1px 5px; }
  .tag { font-size: 9px; padding: 1px 6px; } .app-week span { padding: 5px 1px; font-size: 8px; } .app-week b { font-size: 14px; } .app-h { font-size: 9px; }
  .fly { inline-size: 200px; } .pin[data-at='6'] .fly { translate: -30% 8%; }
  .steps { position: relative; z-index: 2; }
  .step { min-block-size: 92svh; align-content: end; padding-block-end: 7svh; }
  .step:first-child { min-block-size: 74svh; }
  .step .card { padding: 24px 22px 26px; border-radius: var(--r-card); background-color: rgba(252, 250, 245, .95); box-shadow: 0 12px 34px -14px rgba(16, 48, 43, .38), inset 0 0 0 1.5px var(--line); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
  .step h3 { font-size: calc(31px * var(--tsd)); } .step p { font-size: calc(17px * var(--tsu)); }
  .trades, .start-steps, .quote-list { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .rules, .rules.two, .rules.three { grid-template-columns: minmax(0, 1fr); }
  .cmp { margin-block-start: 36px; }
  .faq .sec-head { position: static; }
  .script .line { font-size: calc(15px * var(--ts)); }
  .polaroid { inline-size: calc(100% - 16px); margin-inline: auto; }
  .foot { padding-block-start: 64px; }
  .foot-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px 20px; }
  .foot-brand { grid-column: 1 / -1; }
  .foot-bottom { flex-direction: column; align-items: flex-start; margin-block-start: 48px; }
}
@media (max-width: 1100px) and (min-width: 861px) { .foot-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .foot-brand { grid-column: 1 / -1; } .rules, .rules.three { grid-template-columns: repeat(2, minmax(0, 1fr)); } .trades, .quote-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } .works-list { grid-template-columns: minmax(0, 1fr); }
  /* narrow two-column screens: the notes tuck closer to the phone so the yellow one never reaches the button */
  .hero-art { --nx: .2; } .n-a { right: calc(50% + var(--hw) * .16); inline-size: min(184px, 46%); } .n-b { --nw: min(190px, 46%); }
  .hero .note { padding: 26px 18px 16px; } .hero .note b { font-size: 21px; } .hero .note span:not(.k) { font-size: 15px; } .hero .note .k { font-size: 12.5px; } }
@media (max-width: 359px) { .two { grid-template-columns: minmax(0, 1fr); } }
/* a phone: the voices one under the other */
@media (max-width: 560px) { .voice-list { grid-template-columns: minmax(0, 1fr); } }
/* the narrowest phones: the WhatsApp icon leaves the bar (it is in the menu and on the page), and a long button may wrap */
@media (max-width: 400px) { .nav-acts .ico.wa { display: none; } .plan { padding-inline: 22px; } .plan .btn, .menu-ctas .btn { max-inline-size: 100%; white-space: normal; text-align: start; line-height: 1.15; padding-block: 10px; } }
@media (max-width: 340px) { .btn { font-size: calc(16px * var(--tsu)); gap: 8px; padding-inline: 8px 12px; } .btn .chip { inline-size: 34px; block-size: 34px; } }
@media (max-width: 360px) { .btn { font-size: calc(17px * var(--tsu)); padding-inline: 10px 18px; } .hero { --hw: 220px; } .hero .note { padding: 22px 16px 16px; } .hero .note .k { font-size: 12.5px; } .hero .note b { font-size: 21px; } .hero .note span:not(.k) { font-size: 14.5px; } .nav-call { padding-inline: 5px 12px; font-size: 15.5px; } .nav-bar { gap: 14px; } }

/* ---------- reduced motion: everything rests ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .drift { translate: none; rotate: var(--r, 0deg); }
}

/* ---------- documents (privacy, terms, the data processing addendum, sub-processors, accessibility): where you are, the
   date and the version, a short summary, a table of contents, then numbered sections. The numbers are counted here, not
   typed, so a section that only one setting of the site has (dev/chrome.mjs) never leaves a gap. Reading width stays
   near 70 characters ---------- */
.doc-page { padding-block: clamp(28px, 4.5vw, 64px) var(--sec); }
.doc { display: grid; gap: 18px; justify-items: start; counter-reset: sec; }
.doc section { counter-increment: sec; }
.doc section > h2::before { content: counter(sec) '. '; }
.toc ol { counter-reset: toc; }
.toc li { counter-increment: toc; }
.doc .toc a::before { content: counter(toc) '.'; flex: none; min-inline-size: 1.9em; }
.doc > * { max-inline-size: 820px; }
.doc h1 { font-size: calc(clamp(40px, 5vw, 64px) * var(--tsd)); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: calc(15px * var(--ts)); color: var(--ink2); }
.crumbs li + li::before { content: '\203A'; margin-inline-end: 10px; color: var(--ink2); }
.doc .crumbs a { color: var(--ink2); font-weight: 600; }
.doc-meta { margin-block-start: -4px; font-size: calc(15px * var(--ts)); }
.tldr, .toc { inline-size: 100%; border-radius: var(--r-card); }
.tldr { padding: 26px 28px; background-color: var(--paper2); }
.toc { padding: 22px 28px; box-shadow: inset 0 0 0 1.5px var(--line); }
.doc .tldr h2, .doc .toc h2 { margin-block-start: 0; margin-block-end: 12px; font-size: calc(22px * var(--tsd)); }
.toc ol { columns: 2; column-gap: 36px; }
.toc li { break-inside: avoid; }
.doc .toc a { display: inline-flex; align-items: baseline; min-block-size: 38px; padding-block: 6px; font-weight: 600; text-decoration: none; }
.doc .toc a:hover { text-decoration: underline; }
.doc section { display: grid; gap: 14px; inline-size: 100%; scroll-margin-block-start: 96px; }
.doc h2 { margin-block-start: 26px; font: var(--dw) calc(clamp(25px, 2.5vw, 31px) * var(--tsd))/1.18 var(--display); letter-spacing: -.014em; }
.doc h3 { margin-block-start: 6px; font: 700 calc(18.5px * var(--ts))/1.4 var(--body); }
.doc p, .doc li { color: var(--ink2); text-wrap: pretty; }
.doc ul { display: grid; gap: 10px; padding-inline-start: 22px; list-style: disc; }
.doc strong { color: var(--ink); }
.doc a { color: var(--ink); font-weight: 700; overflow-wrap: anywhere; }
.doc .doc-date { margin-block-start: 18px; font-size: calc(15px * var(--ts)); }
.doc .doc-meta strong { font-weight: 700; }
.doc ol.plain { display: grid; gap: 10px; padding-inline-start: 22px; list-style: decimal; }
/* a table in a document: real rows and columns where there is room, and one block per row, each cell under its column's
   name, where there is not. The switch follows the table's own width measured in the text's size, so a larger text
   (the accessibility options) stacks it sooner */
.doc-table { inline-size: 100%; container-type: inline-size; }
/* a section that holds a wide table (the sub-processors) gives the table the page's full width; its words keep theirs */
.doc > section.wide { max-inline-size: none; }
.doc > section.wide > :not(.doc-table) { max-inline-size: 820px; }
.doc table { inline-size: 100%; border-collapse: collapse; font-size: calc(16.5px * var(--ts)); line-height: 1.5; }
.doc caption { padding-block-end: 10px; text-align: start; font: 700 calc(18.5px * var(--ts))/1.4 var(--body); color: var(--ink); }
.doc th, .doc td { padding: 12px 14px 12px 0; border-block-end: 1.5px solid var(--line); text-align: start; vertical-align: top; color: var(--ink2); text-wrap: pretty; overflow-wrap: break-word; }
.doc thead th { border-block-end: 2px solid var(--ink); font-weight: 700; color: var(--ink); white-space: nowrap; }
.doc tbody th { font-weight: 700; color: var(--ink); }
@container (max-width: 44em) {
  .doc-table:not(.wide) :is(table, tbody, tr, th, td) { display: block; }
  .doc-table:not(.wide) thead { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .doc-table:not(.wide) tr { padding-block: 14px; border-block-end: 1.5px solid var(--line); }
  .doc-table:not(.wide) :is(tbody th, td) { padding: 3px 0; border: 0; }
  .doc-table:not(.wide) td[data-th]::before { content: attr(data-th); display: block; margin-block-start: 6px; font-weight: 700; font-size: .88em; color: var(--ink); }
}
@container (max-width: 62em) {
  .doc-table.wide :is(table, tbody, tr, th, td) { display: block; }
  .doc-table.wide thead { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .doc-table.wide tr { padding-block: 14px; border-block-end: 1.5px solid var(--line); }
  .doc-table.wide :is(tbody th, td) { padding: 3px 0; border: 0; }
  .doc-table.wide tbody th { font: var(--dw) calc(21px * var(--tsd))/1.2 var(--display); letter-spacing: -.012em; }
  .doc-table.wide td[data-th]::before { content: attr(data-th); display: block; margin-block-start: 6px; font-weight: 700; font-size: .88em; color: var(--ink); }
}
@media (max-width: 860px) { .toc ol { columns: 1; } .tldr, .toc { padding: 22px 20px; } }

/* ---------- focus: last in the file, so no component shadow can hide it (WCAG 2.4.7) ---------- */
.btn:focus-visible, .ico:focus-visible, .x:focus-visible, .back:focus-visible, .status-pill:focus-visible, .qa summary:focus-visible, .polaroid video:focus-visible, .links > a:focus-visible { box-shadow: var(--focus); }
.btn.line:focus-visible, .ico.wa:focus-visible { box-shadow: inset 0 0 0 1.5px var(--ink), var(--focus); }
.voice-btn:focus-visible { box-shadow: inset 0 0 0 1.5px var(--line), var(--focus); }
.voice-btn[aria-pressed='true']:focus-visible { box-shadow: inset 0 0 0 2px var(--ink), var(--focus); }
.field input[aria-invalid='true']:focus { box-shadow: inset 0 0 0 2.5px var(--red), var(--focus); }
.foot :focus-visible { box-shadow: 0 0 0 3px var(--ink), 0 0 0 5.5px var(--hl); }

/* ---------- the cookie banner (consent.js): one short line, two equal buttons. It exists only when an analytics id is set
   in site.config.mjs, and nothing from Google or Meta loads before a choice ---------- */
.cc { position: fixed; z-index: 50; inset-inline: 12px; inset-block-end: calc(12px + env(safe-area-inset-bottom)); display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 18px; inline-size: fit-content; max-inline-size: calc(100% - 24px); margin-inline: auto; padding-block: 10px; padding-inline: 18px 10px; border-radius: 14px; background-color: var(--paper); color: var(--ink); box-shadow: 0 0 0 1.5px var(--line), 0 18px 44px -16px rgba(16, 48, 43, .45); }
.cc-t { font: 600 calc(15.5px * var(--ts))/1.4 var(--body); }
.cc-t a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.cc-acts { display: flex; gap: 8px; }
.cc .btn { min-block-size: 44px; padding-inline: 18px; font-size: calc(15.5px * var(--tsu)); }
.cc .btn:focus-visible, .cc-t a:focus-visible { outline: none; box-shadow: var(--focus); }
@media (prefers-reduced-motion: no-preference) { .cc { animation: rise .35s var(--ease); } }
@media (max-width: 560px) { .cc { padding: 12px; } .cc-t { inline-size: 100%; text-align: center; } .cc-acts { inline-size: 100%; } .cc-acts .btn { flex: 1 1 0; } }
/* "Cookie settings" in the footer is a button that reads like the links beside it */
.foot-col .linkish { display: inline-flex; align-items: center; min-block-size: 40px; padding: 0; border: 0; background: none; font: inherit; font-size: calc(16px * var(--ts)); color: rgba(252, 250, 245, .86); text-align: start; cursor: pointer; }
.foot-col .linkish:hover { text-decoration: underline; }
.foot-col .linkish:focus-visible { outline: 2.5px solid var(--hl); outline-offset: 2px; }