/*
  eventridegroup.com — one stylesheet for every page, from the rebuild of
  11 September 2026 on Tom's instruction (SPEC.md 16, the last amendment of
  that night). The brand guidelines, version 1.1, are the reference: ivory
  ground, ink and muted ink type, champagne for rules and detail only, walnut
  for the one action, light-champagne hairlines, 7px corners on every box and
  button (the frame included), Playfair Display for headlines and EB Garamond
  for everything else, both served from fonts/ and never from Google.
*/
:root {
  --ivory: #F6F1E7;
  --ink: #262421;
  --muted: #5C564E;
  --champagne: #BEA270;
  --hairline: #D3C29C;
  --walnut: #6B4F3A;
  --walnut-press: #58402F;
  --radius: 7px;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  background: var(--ivory);
  color: var(--ink);
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 19px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; height: auto; }

.shell { margin: 14px; border: 1px solid var(--hairline); border-radius: var(--radius); min-height: calc(100vh - 28px); }
.page { max-width: 1140px; margin: 0 auto; padding: 0 40px; }
.measure { max-width: 34em; margin-left: auto; margin-right: auto; }
.caps { text-transform: uppercase; letter-spacing: 0.22em; font-size: 13px; }
.serif { font-family: 'Playfair Display', Georgia, serif; font-weight: 500; }
.quiet { color: var(--muted); }
.centre { text-align: center; }

/* ---------- Header ---------- */
header.site { text-align: center; padding: 48px 0 0; }
.wordmark { font-family: 'Playfair Display', Georgia, serif; font-size: 27px; font-weight: 500; color: var(--ink); text-decoration: none; }
.strap { margin-top: 10px; color: var(--muted); }
nav.site { margin-top: 22px; display: flex; justify-content: center; gap: 26px; flex-wrap: wrap; }
nav.site a { color: var(--muted); text-decoration: none; padding-bottom: 3px; border-bottom: 1px solid transparent; }
nav.site a:hover, nav.site a:focus-visible { color: var(--ink); }
nav.site a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--champagne); }
/* "Sign in" (was "Got a code?" until 18 October 2026): the way through to app.eventridegroup.com for a
   guest who landed here by mistake. It ends the menu in walnut, so it can be
   found without a search, and no louder than that. The champagne line under it
   came off on 18 October 2026, on Tom's word: "It shouldn't be underlined." */
nav a.code-link { color: var(--walnut); white-space: nowrap; }
nav a.code-link:hover, nav a.code-link:focus-visible { color: var(--ink); }
/* It is never in the slim bar that slides in on scroll: with it, that bar
   wrapped "How it works" onto three lines and "Request a demo" onto two on
   Tom's laptop (his screenshot, 27 September 2026). The page's own menu at the
   top is where a guest who landed here by mistake is looking. */
.topbar nav a.code-link { display: none; }
/* SWEEP 1, PAGE 153, 12 OCTOBER 2026. Translated by the browser into German,
   with text at twice the size on a phone, the line under the wordmark and the
   menu's longer words (Gestaltungswerkzeug, Haben Sie einen Zugangscode?) ran
   past the frame and the page scrolled sideways. A word too long for the line
   now breaks inside it. English words never reach that width, so English
   looks exactly as before; the slim bar keeps its words whole. */
.strap, nav.site > a, nav.site .who > summary { overflow-wrap: anywhere; }
nav.site .who > summary, nav.site a.code-link { white-space: normal; }
.real-code a { color: var(--walnut); text-decoration: none; border-bottom: 1px solid var(--champagne); }
.real-code a:hover, .real-code a:focus-visible { color: var(--ink); }
a:focus-visible { outline: 2px solid var(--walnut); outline-offset: 3px; border-radius: 2px; }

/* ---------- The search (13 September 2026, on Tom's instruction) ---------- */
/*
  THE PLATFORM'S OWN CONTROL, CARRIED ACROSS RATHER THAN REDESIGNED. Every
  value below is read out of app/search/search.module.css — his rulings of
  28 August 2026 — and written in this site's own tokens. The site already
  carries this grammar once, in the back to top arrow of round five: the same
  hairline champagne stroke, the same 22px mark, the same 44px tap area made of
  padding, the same ink on hover and focus, the same focus ring. Nothing new is
  invented here, and the count of drawn marks on this site stays at two.

  IT NEEDS SCRIPT AND SAYS SO: with scripts off the glass never appears, which
  is the standing the back to top arrow was given on his ruling three of
  28 August 2026. Hence html.js.
*/
.search { display: none; }
html.js .search {
  /* The top right corner of the SCREEN, fixed — his placement, and the
     platform's own reason at 12.4: on a long page a search that scrolls away
     has left at the moment it is wanted. The inset is the back to top arrow's
     own, in the opposite corner, so the site's two marks sit level. */
  position: fixed;
  top: calc(20px + env(safe-area-inset-top, 0px));
  right: calc(20px + env(safe-area-inset-right, 0px));
  z-index: 30;
  transition: top 0.35s ease;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
/*
  IT SETTLES INTO THE MIDDLE OF THE SLIM BAR AS THE BAR ARRIVES (13 September
  2026, his ruling at his walk: "move it up slightly so it's in the middle of
  that ribbon"). THE NUMBER IS MEASURED, NOT NUDGED: the bar is 56 to 57px tall,
  so its centre is 28, and a 44px tap area centred there starts at 6. At the top
  of a page, where there is no bar, the glass is where it was — it moves with the
  bar and on the bar's own timing, which is the one moment the change is
  invisible. A SESSION'S READING OF HIS RULING, his to fix at one height.
*/
/* html.js.scrolled, not html.scrolled: the phone's own inset below is written
   as html.js .search and would otherwise win on specificity — which it did,
   and the measurement caught it. */
html.js.scrolled .search { top: calc(6px + env(safe-area-inset-top, 0px)); }
@media (prefers-reduced-motion: reduce) { html.js .search { transition: none; } }

.search-bar { display: flex; align-items: center; justify-content: flex-end; }
/*
  WHILE THE FIELD IS OPEN, THE SLIM BAR'S BUTTON STEPS ASIDE. The field opens
  leftwards into the corner the button sits in, and a champagne hairline running
  under a walnut button is the one thing this control must never look like. It
  is the platform's own move: there, the centred mark steps aside for the field
  on a phone. The button comes straight back when the search closes.
*/
html.searching .topbar nav,
html.searching .topbar .btn { visibility: hidden; }
/* The tap area is the button; the mark is drawn inside it, so the target is
   large without the mark growing. No border, no fill, no radius, no shadow. */
.search-glass {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 11px;
  background: none; border: 0; border-radius: 0; cursor: pointer;
  -webkit-tap-highlight-color: transparent; text-decoration: none;
  /* The slide is the layout rather than a second animation: the row is
     right-aligned, so the glass is pushed left by exactly the width the field
     opens to. One thing moves and the pair reads as one control. */
  flex: 0 0 auto;
}
.search-glass svg { display: block; width: 22px; height: 22px; fill: none; stroke: var(--champagne); stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; }
.search-glass:hover svg, .search-glass:focus-visible svg { stroke: var(--ink); }
.search-glass:focus-visible, .search-field:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
/* The field and the champagne hairline that draws it open, left to right. */
.search-opening { position: relative; width: 0; overflow: hidden; transition: width 240ms cubic-bezier(0.33, 0, 0.2, 1); }
.search[data-open="true"] .search-opening { width: 240px; }
.search-field {
  width: 100%; height: 44px; padding: 0 4px;
  border: 0; border-radius: 0; background: none;
  font-family: inherit; font-size: 19px; color: var(--ink);
}
/* Muted ink, never a hairline colour: a placeholder is guidance a person is
   meant to read (12.1's placeholder amendment of 25 July 2026). */
.search-field::placeholder { color: var(--muted); opacity: 1; }
/* Drawn as a scale from its left end, so the browser animates it on the
   compositor and the line never reflows anything above it. */
.search-line { position: absolute; right: 0; bottom: 0; left: 0; height: 1px; background: var(--champagne); transform: scaleX(0); transform-origin: left center; transition: transform 240ms cubic-bezier(0.33, 0, 0.2, 1); }
.search[data-open="true"] .search-line { transform: scaleX(1); }
/* The answers. Grouped under champagne letter-spaced caps headings (his ruling
   six), rows in the fourth garment: a hairline card whose whole frame is the
   door, with nothing inside it dressed a second time (his ruling seven). */
.search-results {
  width: min(352px, calc(100vw - 40px));
  margin-top: 8px;
  max-height: min(60vh, 32rem);
  overflow-y: auto;
  background: var(--ivory);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 16px;
}
.search-group + .search-group { margin-top: 16px; }
.search-group > p.caps { margin-bottom: 8px; color: var(--champagne); }
.search-rows { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.search-row {
  display: flex; flex-direction: column; gap: 2px;
  padding: 12px 14px;
  border: 1px solid var(--hairline); border-radius: var(--radius);
  color: var(--ink); text-decoration: none;
}
.search-row:hover, .search-row:focus-visible { border-color: var(--champagne); }
.search-row:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.search-name { font-size: 18px; line-height: 1.3; }
.search-reason { font-size: 15px; color: var(--muted); line-height: 1.35; }
.search-nothing { margin: 0; font-size: 16px; color: var(--muted); }
/* A phone has less room, so the field takes what there is rather than pushing
   off the edge, and the inset matches the back to top arrow's phone inset. */
@media (max-width: 899px) {
  html.js .search { right: calc(14px + env(safe-area-inset-right, 0px)); top: calc(14px + env(safe-area-inset-top, 0px)); }
  .search[data-open="true"] .search-opening { width: 176px; }
  .search-results { width: min(352px, calc(100vw - 28px)); }
  /* And the page's own wordmark steps aside while the field is open, because on
     a phone the answers open straight over it and its top half showing above
     the panel's edge reads as a line struck through the brand. It is the
     platform's own move: there, the centred mark steps aside for the field on a
     phone. Hidden rather than removed, so nothing on the page shifts. */
  html.searching header.site .wordmark { visibility: hidden; }
  /* So does the slim bar's (Sweep 4, the Questions page, 22 October 2026): on
     a 320 phone, searching once scrolled, the glass sat over its last letter. */
  html.searching .topbar .wordmark { visibility: hidden; }
}
/* Reduced motion means none, not a shortened version. */
@media (prefers-reduced-motion: reduce) {
  .search-opening, .search-line { transition: none; }
}

/* ---------- "Who is it for?" (13 September 2026, on Tom's ruling) ---------- */
/*
  THE MENU IS THE BROWSER'S OWN DISCLOSURE CONTROL, not a script: it opens on a
  tap and on the keyboard with nothing loaded. site.js adds hover on a laptop,
  and closes it when the reader looks elsewhere. Its word wears the nav's own
  garment and nothing else — no new mark, no caret drawn by us beyond the small
  champagne chevron below, which is the divider's own diamond turned on its side
  at the size of a full stop.
*/
.who { position: relative; }
.who > summary {
  list-style: none; cursor: pointer;
  /* The menu's own words never break across lines: in the slim bar at laptop
     widths "Who is it for?" was folding into three. */
  white-space: nowrap;
  color: var(--muted); padding-bottom: 3px;
  border-bottom: 1px solid transparent;
  display: inline-flex; align-items: center; gap: 7px;
}
.who > summary::-webkit-details-marker { display: none; }
.who > summary::after {
  content: ""; width: 5px; height: 5px;
  border-right: 1px solid var(--champagne); border-bottom: 1px solid var(--champagne);
  transform: rotate(45deg) translate(-1px, -1px);
}
.who[open] > summary::after { transform: rotate(225deg) translate(-1px, -1px); }
.who > summary:hover, .who[open] > summary { color: var(--ink); }
.who[data-here="true"] > summary { color: var(--ink); }
.who > summary:focus-visible { outline: 2px solid var(--walnut); outline-offset: 3px; border-radius: 2px; }
.whoList {
  /*
    IT HANGS FROM THE WORD ITSELF, WITH NO GAP TO CROSS. A 10px gap here broke
    the menu on a laptop: the pointer left the word, entered space that belonged
    to neither, and the menu shut before anything could be chosen. He found it
    on his walk. The air above the first row is the panel's own padding now, and
    a transparent strip sits over what used to be the gap.
  */
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  z-index: 25; display: flex; flex-direction: column; gap: 2px;
  margin-top: 0; padding: 18px 8px 8px; min-width: 190px; text-align: center;
  background: var(--ivory); border: 1px solid var(--hairline); border-radius: var(--radius);
  box-shadow: 0 6px 24px rgba(38, 36, 33, 0.08);
  background-clip: padding-box;
}
.whoList a { display: block; padding: 9px 14px; border-radius: var(--radius); border-bottom: 0; color: var(--muted); text-decoration: none; }
.whoList a:hover, .whoList a:focus-visible { color: var(--ink); }
nav .who .whoList a,
nav .who .whoList a[aria-current="page"] { border-bottom: 0; }
.whoList a[aria-current="page"] { color: var(--ink); }
/* In the slim bar the panel hangs from the bar itself, and its words are the
   bar's own size. */
.topbar .whoList { min-width: 170px; }
.topbar .whoList a { padding: 7px 12px; }

/* ---------- Divider motif ---------- */
.divider { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 40px auto; }
.divider::before, .divider::after { content: ""; width: 52px; height: 1px; background: var(--champagne); }
.divider .diamond { width: 7px; height: 7px; background: var(--champagne); transform: rotate(45deg); }

/* ---------- Type ---------- */
/* A heading's word longer than its line (a browser translating the page into
   German, at 320 wide) wraps inside the line instead of pushing the whole page
   sideways. English words never reach it (Sweep 1, Questions, 12 October 2026). */
h1, h2, h3 { font-family: 'Playfair Display', Georgia, serif; font-weight: 500; line-height: 1.15; overflow-wrap: break-word; }
h1 { font-size: clamp(34px, 5.4vw, 56px); max-width: 15em; margin: 0 auto; text-wrap: balance; }
h2 { font-size: clamp(27px, 4vw, 38px); margin-bottom: 14px; text-wrap: balance; }
h3 { font-size: 22px; line-height: 1.3; margin-bottom: 8px; }
/* A heading opened from a search result clears the slim bar, which is fixed
   across the top of the screen once the reader has scrolled. So does a small
   caps label that is the only title its words have (page 148, 12 October). */
h1, h2, h3, .label[id] { scroll-margin-top: 120px; }
/* The phone a reader can press, opened from How it works (/#try-journey):
   it lands just below the slim bar with its Save in view, and the browser's
   own jump and the site script's agree on where (second walk of How it works,
   10 October 2026). */
#try-journey { scroll-margin-top: 76px; }
p { margin-bottom: 13px; }
p:last-child { margin-bottom: 0; }
.lede { font-size: clamp(20px, 2.3vw, 24px); color: var(--muted); margin: 18px auto 0; line-height: 1.45; text-wrap: balance; }
/* SWEEP 1 RULINGS, ITEM W5, 13 OCTOBER 2026: small words are never champagne.
   Champagne on ivory measures 2.17 to 1, under the 4.5 to 1 small text needs
   to be read, so the small caps labels below and the footer's words take the
   platform footer's own grey, muted ink (app/globals.css --muted-ink, the same
   #5C564E as --muted here), 6.44 to 1. Champagne stays for rules, the diamond,
   frames, drawings, the glass and the arrow. The search's group headings stay
   champagne: that is Tom's ruling six, shared with the platform's search. */
.label { color: var(--muted); margin-bottom: 26px; }

/* ---------- Button (walnut: the one action fill) ---------- */
.btn {
  display: inline-block; background: var(--walnut); color: var(--ivory); text-decoration: none;
  padding: 17px 38px; border-radius: var(--radius);
  text-transform: uppercase; letter-spacing: 0.22em; font-size: 14px; line-height: 1;
}
.btn:hover, .btn:focus-visible { background: var(--walnut-press); }
.cta { margin-top: 30px; }
/* Sweep 1, page 154, 12 October 2026. Translated by the browser (Greek:
   ΕΙΣΑΓΆΓΕΤΕ) with text at twice the size on a phone, one word was wider than
   the page and the walnut button ran past the frame, so the page scrolled
   sideways. The button now stays inside the page and a word too long for it
   breaks. English never reaches that width, so it looks exactly as before. */
.cta .btn { max-width: 100%; overflow-wrap: break-word; }
/* Sweep 4, item 157, 22 October 2026. Translated into German on a phone
   zoomed to twice the size, the button's wide sides left room for five
   letters, so ÖFFNEN broke as ÖFFNE and N. Under about 312 wide only, the
   sides and letter spacing narrow, as the platform's own button does
   (app/shell.module.css); at every ordinary width it is exactly as before. */
@media (max-width: 311px) {
  .cta .btn { padding-left: 14px; padding-right: 14px; letter-spacing: 0.12em; }
}
.cta .note { margin-top: 14px; color: var(--muted); font-size: 16px; }

/* ---------- Hero ---------- */
.hero { text-align: center; padding-top: 6px; }

/* ---------- Cards ---------- */
.cards { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 36px; }
.card { border: 1px solid var(--hairline); border-radius: var(--radius); padding: 26px 24px 28px; text-align: center; min-width: 0; overflow-wrap: anywhere; }
.card.lead { border-color: var(--champagne); }
.card .drawing { width: 84px; margin: 0 auto 16px; color: var(--champagne); }
.card h3 { font-size: 21px; }
.card p { color: var(--muted); font-size: 17px; text-wrap: balance; }
.card p.plain-wrap { text-wrap: wrap; }
/* The quiet link: inside a card, and from 9 October 2026 also under a section
   or a closing button, so only Request a demo is ever a walnut block. */
.card a.more, a.more { display: inline-block; margin-top: 10px; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--hairline); padding-bottom: 2px; font-size: 17px; }
.card a.more:hover, a.more:hover { border-bottom-color: var(--champagne); }
.close-more { margin-top: 18px; }
/* Page not found: its quiet home page link is a full 44px to tap (walk, 9 October 2026). */
.hero .close-more { margin-top: 8px; }
.hero .close-more a.more { padding-top: 14px; }

/* The questions page (questions walk, 9 October 2026): one column of cards,
   each a question with its short answer showing; where there is more, the
   whole card is the tap and the detail folds open under it, with the menu's
   own small champagne chevron beside the question. */
.cards.qa-list { max-width: 720px; margin-left: auto; margin-right: auto; grid-template-columns: 1fr; align-items: start; }
.card.qa { text-align: left; }
.card.qa h3 { margin-bottom: 6px; }
.card.qa .gist { display: block; color: var(--ink); font-size: 17px; text-wrap: wrap; }
.card.qa p.more-words { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--hairline); text-wrap: wrap; }
details.card.qa > summary { list-style: none; cursor: pointer; }
details.card.qa > summary::-webkit-details-marker { display: none; }
details.card.qa > summary h3 { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
details.card.qa > summary h3::after {
  content: ""; flex: none; width: 7px; height: 7px; margin-right: 3px;
  border-right: 1px solid var(--champagne); border-bottom: 1px solid var(--champagne);
  transform: rotate(45deg) translateY(-4px); transition: transform .2s ease;
}
details.card.qa[open] > summary h3::after { transform: rotate(225deg) translateY(-2px); }
@media (hover: hover) { details.card.qa:hover { border-color: var(--champagne); } }
details.card.qa > summary:focus-visible { outline: 2px solid var(--walnut); outline-offset: 6px; border-radius: 2px; }

/* ---------- Screens (phone screenshots) ---------- */
.screens { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 14px; margin-top: 36px; }
.screens figure { margin: 0; text-align: center; }
.screens img { border: 1px solid var(--hairline); border-radius: 12px; width: 100%; }
/* ---------- Phones drawn as phones (round two) ---------- */
/* A screenshot is what a phone shows, cut at the phone's own edge, so it sits
   inside a drawn outline: an ink hairline, the corner radius of a handset, a
   thin ivory bezel, and a small ink pill where the camera sits. */
.phone { position: relative; border: 1.5px solid var(--ink); border-radius: 36px; padding: 10px; background: var(--ivory); }
.phone::before { content: ""; position: absolute; top: 20px; left: 50%; transform: translateX(-50%); width: 22%; height: 8px; background: var(--ink); border-radius: 4px; }
.phone img { border: 0; border-radius: 27px; width: 100%; }
.screens .phone img, .step .shot .phone img { border: 0; border-radius: 27px; }
.screens figure .phone { margin: 0 auto; }

/* The home page's staggered trio, the middle phone lifted. */
.trio { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 22px; align-items: end; max-width: 900px; margin: 52px auto 0; }
.trio figure { margin: 0; }
.trio figure:nth-child(2) { transform: translateY(-34px); }

/* ---------- Gentle motion (round two) ---------- */
/* Sections rise in softly as they come into view. Nothing moves until the
   script marks the page as scripted, so a page without it is simply there,
   and nothing moves at all for anyone who has asked for reduced motion. */
html.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.7s ease, transform 0.7s ease; transition-delay: var(--d, 0s); }
html.js .reveal.in { opacity: 1; transform: none; }
html.js .trio figure:nth-child(2).reveal.in { transform: translateY(-34px); }
@media (prefers-reduced-motion: reduce) {
  html.js .reveal { opacity: 1; transform: none; transition: none; }
  html.js .trio figure:nth-child(2).reveal { transform: translateY(-34px); }
}
.card .drawing.wide { width: 132px; }
.screens figcaption { margin-top: 10px; color: var(--muted); font-size: 15px; font-style: italic; line-height: 1.35; }

/* ---------- Steps (how it works) ---------- */
.step { display: grid; grid-template-columns: 1fr; gap: 26px; align-items: center; padding: 8px 0; }
.step .words { text-align: center; max-width: 30em; margin: 0 auto; }
.step .words .num { color: var(--muted); margin-bottom: 10px; }
.step .words p { color: var(--muted); }
/* The full width its column allows, up to the cap, BEFORE its picture arrives.
   Centred by its margins inside the grid, it was only as wide as its picture,
   and a picture still waiting to load is nothing wide and nothing tall. So on a
   phone the steps above a link to a section (/how-it-works#where-they-re-staying,
   as the site search makes) stood empty when the browser jumped, then grew by a
   phone's height each as their pictures arrived, and pushed the section the
   reader asked for down out of sight (Sweep 4 catch-up, 22 October 2026). */
.step .shot { width: 100%; max-width: 300px; margin: 0 auto; }
.step .shot img { border: 1px solid var(--hairline); border-radius: 12px; }
.step + .step { margin-top: 44px; }
.step .figure { max-width: 420px; margin: 0 auto; color: var(--champagne); }

/* ---------- Wide screens (planner desk) ---------- */
.wide { margin-top: 34px; }
.wide img { border: 0; border-radius: 10px; width: 100%; }
.wide figcaption { margin-top: 10px; color: var(--muted); font-size: 15px; font-style: italic; text-align: center; }
/* THE FOR PLANNERS SECOND WALK, 10 OCTOBER 2026: below 640 wide a laptop
   picture's words are about four pixels tall, so the phones beside it carry
   the view on their own. */
@media (max-width: 639px) { .wide.desk { display: none; } }

/* ---------- Stats row ---------- */
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 30px; }
.stat { border: 1px solid var(--hairline); border-radius: var(--radius); padding: 20px 14px; text-align: center; }
.stat .big { font-family: 'Playfair Display', Georgia, serif; font-weight: 500; font-size: 34px; line-height: 1.1; }
.stat .small { color: var(--muted); font-size: 15px; margin-top: 6px; }

/* ---------- Closing & footer ---------- */
.close { text-align: center; }
.signature { margin-top: 26px; }
.signature .name { font-family: 'Playfair Display', Georgia, serif; font-size: 19px; }
.signature a { color: var(--muted); text-decoration: none; border-bottom: 1px solid var(--hairline); }
.signature a:hover { color: var(--ink); border-bottom-color: var(--champagne); }
footer.site { text-align: center; padding: 18px 0 52px; color: var(--muted); }
footer.site a { color: var(--muted); text-decoration: none; padding-bottom: 2px; }
footer.site a:hover, footer.site a:focus-visible { color: var(--ink); }
/* The company's details, small, under the footer line (18 October 2026). */
footer.site .legal { margin: 8px auto 0; max-width: 34em; font-size: 0.8rem; line-height: 1.5; text-transform: none; letter-spacing: 0; }

/* ---------- Upright iPad and half-screen laptop ----------
   THE FOR PLANNERS WALK, 9 OCTOBER 2026: between 640 and 899 a row of three
   screens fell into two columns and an orphan, and four phones into two rows
   of large phones. They now sit in one row, as on a laptop. */
@media (min-width: 640px) and (max-width: 899px) {
  .screens { grid-template-columns: repeat(3, 1fr); gap: 0 16px; }
  .screens.four { grid-template-columns: repeat(4, 1fr); gap: 0 12px; }
  /* A phone this small takes a smaller handset's corners, and the camera
     pill moves up so it never sits on the screenshot's own wordmark. */
  .screens .phone { border-radius: 24px; padding: 6px; }
  .screens .phone img { border-radius: 18px; }
  .screens .phone::before { top: 9px; height: 5px; }
}

/* ---------- Laptop and up ---------- */
@media (min-width: 900px) {
  header.site { padding-top: 60px; }
  .divider { margin: 52px auto; }
  .cards { grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 44px; }
  .cards.two { grid-template-columns: repeat(2, 1fr); max-width: 760px; margin-left: auto; margin-right: auto; }
  .screens { grid-template-columns: repeat(3, 1fr); gap: 0 22px; margin-top: 44px; max-width: 900px; margin-left: auto; margin-right: auto; }
  .screens.four { grid-template-columns: repeat(4, 1fr); max-width: none; }
  .step { grid-template-columns: 1fr 1fr; gap: 56px; }
  .step .words { text-align: left; margin: 0; }
  .step:nth-child(even) .words { order: 2; }
  .step .shot { max-width: 320px; margin: 0 auto; }
  .stats { grid-template-columns: repeat(4, 1fr); }
  .wide { max-width: 980px; margin-left: auto; margin-right: auto; }
}

/* ---------- Phones ---------- */
@media (max-width: 560px) {
  .shell { margin: 9px; min-height: calc(100vh - 18px); }
  body { font-size: 18px; }
  .page { padding: 0 20px; }
  header.site { padding-top: 36px; }
  .strap { font-size: 12px; }
  nav.site { gap: 16px; }
  nav.site a { font-size: 12px; }
  .lede { font-size: 18px; }
  .card { padding: 20px 18px 22px; }
  .card h3 { font-size: 19px; }
  .card p { font-size: 16px; }
  .divider { margin: 30px auto; }
  .btn { padding: 16px 30px; }
  /* Swipeable screenshot row: one large image at a time */
  .screens {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    gap: 16px; margin-top: 26px; padding-bottom: 6px; margin-left: -20px; margin-right: -20px; padding-left: 20px; padding-right: 20px;
  }
  .screens figure { flex: 0 0 74%; scroll-snap-align: center; }
  .step .shot { max-width: 260px; }
  .trio {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    gap: 16px; margin-top: 34px; padding: 40px 20px 6px; margin-left: -20px; margin-right: -20px; align-items: start;
  }
  .trio figure { flex: 0 0 74%; scroll-snap-align: center; }
  .trio figure:nth-child(2) { transform: none; }
  html.js .trio figure:nth-child(2).reveal.in, html.js .trio figure:nth-child(2).reveal { transform: none; }
  .phone { border-radius: 30px; padding: 8px; }
  .phone img { border-radius: 23px; }
  .phone::before { top: 16px; height: 7px; }
}

/* =====================================================================
   ROUND THREE (11 September 2026, under Tom's licence to go further)
   ===================================================================== */

/* Page changes cross-fade where the browser can. */
@view-transition { navigation: auto; }

/* ---------- The slim bar, once the reader has scrolled ---------- */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 20;
  /* The same colour said the old way first: a browser before color-mix
     (iPhones left on iOS 15) drew the bar see-through, its words over the
     page's (Sweep 1, Questions, 12 October 2026). */
  background: rgba(246, 241, 231, 0.92);
  background: color-mix(in srgb, var(--ivory) 92%, transparent);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--hairline);
  transform: translateY(-100%); transition: transform 0.35s ease;
}
html.scrolled .topbar { transform: none; }
.topbar .row { max-width: 1140px; margin: 0 auto; padding: 10px 40px; display: flex; align-items: center; gap: 26px; }
.topbar .wordmark { font-size: 22px; margin-right: auto; }
.topbar nav { display: flex; gap: 22px; }
.topbar nav a { color: var(--muted); text-decoration: none; font-size: 12px; }
.topbar nav a:hover, .topbar nav a[aria-current="page"] { color: var(--ink); }
.topbar .btn { padding: 12px 22px; font-size: 12px; }
/*
  THE SLIM BAR MAKES ROOM FOR THE SEARCH GLASS (13 September 2026). The "Request
  a demo" button sits at the right end of this row, in the corner the glass now
  occupies, and the two would overlap from the desk line up to about 1240px
  wide; above that the row's own centring already leaves the corner clear. So
  the row gives up the width of the glass in exactly that band and nowhere else.
  It sits here, after the row's own padding, because that shorthand would
  otherwise win wherever this was written earlier in the file.
*/
@media (min-width: 1100px) and (max-width: 1240px) {
  .topbar .row { padding-right: 76px; }
  /* And the row gives that width back out of the space between its own links,
     so the bar is no more crowded at these widths than it was before the glass
     existed. It was ALREADY over-full below about 1000px, which this does not
     pretend to fix and which is reported to Tom rather than quietly changed. */
  .topbar nav { gap: 14px; }
  /* And a link in the bar stays on its own line: "How it works" was breaking
     into three lines in this band before the glass existed, which is what made
     the bar three rows tall. */
  .topbar nav a { white-space: nowrap; }
  /* Sweep 1, page 153: translated into German, the whole words no longer fit
     one row, and the last ran under the glass and off the screen. They now
     take a second row instead. English fits one row, so it looks the same. */
  .topbar nav { flex-wrap: wrap; justify-content: flex-end; row-gap: 2px; }
  /* And the button keeps its words on one line (home page walk, 9 October
     2026): it was folding into two below about 1090px. */
  .topbar .btn { white-space: nowrap; }
}
/* On a phone the button alone, at the foot. */
.floating-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: none; justify-content: center; padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); transform: translateY(110%); transition: transform 0.35s ease; pointer-events: none; }
html.scrolled .floating-cta { transform: none; pointer-events: auto; }
/* It steps aside while the page's own Request a demo is in view, so the same
   button is never on the screen twice (home page walk, 9 October 2026). */
html.scrolled.cta-in-view .floating-cta { transform: translateY(110%); pointer-events: none; }
html.cta-in-view .topbar .btn { visibility: hidden; }
/* UP TO 999px RATHER THAN 899px FROM 13 SEPTEMBER 2026, AND IT IS A FIX TO
   SOMETHING THAT WAS ALREADY BROKEN RATHER THAN A NEW DESIGN. Measured before
   the search glass existed: at 900px and at 950px this row's own contents
   overflowed it and the "Request a demo" button was cut off by the edge of the
   screen. The bar's narrow treatment — the links and the button in the bar give
   way to the standing button at the foot — is his own, and it now covers those
   widths too. Reported to Tom rather than quietly changed. */
/* UP TO 1099px FROM 9 OCTOBER 2026 (the home page walk), FOR THE SAME REASON.
   At 1024 wide, an iPad turned sideways, the bar's wordmark, links and button
   need about 1,090px, so "Request a demo" folded onto two lines under the
   glass. The narrow treatment now covers 1000 to 1099 as well. */
@media (max-width: 1099px) {
  .topbar .row { padding: 10px 20px; gap: 14px; }
  .topbar nav, .topbar .btn { display: none; }
  .floating-cta { display: flex; }
  .floating-cta .btn { width: 100%; text-align: center; padding: 16px 20px; box-shadow: 0 6px 24px rgba(38,36,33,0.14); }
}

/* ---------- The pointer answered ---------- */
.card { transition: border-color 0.25s ease, transform 0.25s ease; }
.card:hover { border-color: var(--champagne); transform: translateY(-2px); }
.phone { transition: transform 0.35s ease; }
figure:hover > .phone, .shot:hover > .phone { transform: translateY(-4px); }
.btn { transition: background 0.2s ease, transform 0.2s ease; }
.btn:hover { transform: translateY(-1px); }
@media (prefers-reduced-motion: reduce) { .card, .phone, .btn, .topbar, .floating-cta { transition: none; } .card:hover, figure:hover > .phone, .shot:hover > .phone, .btn:hover { transform: none; } }

/* ---------- The designer page ---------- */
.designs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 36px; }
.designs figure { margin: 0; }
.designs img { width: 100%; border: 1px solid var(--hairline); border-radius: var(--radius); }
.designs figcaption { margin-top: 8px; color: var(--muted); font-size: 14px; text-align: center; font-style: italic; }
.designs figure:hover img { border-color: var(--champagne); }

/* An upright iPad or half-screen laptop (the designer walk, 9 October 2026):
   the home page's four cards sit in one row rather than two rows of large
   cards, and the designer page's six sit three to a row from 640 up, so six
   never leave an orphan pair under a row of four. */
@media (min-width: 640px) and (max-width: 899px) {
  .designs { grid-template-columns: repeat(4, 1fr); gap: 14px; }
}
@media (min-width: 640px) {
  .designs.six { grid-template-columns: repeat(3, 1fr); max-width: 760px; margin-left: auto; margin-right: auto; }
}

/* ---------- How it works as a scroll story, at a desk ---------- */
.story .stage { display: none; }
/* An iPad held upright or a half-screen laptop: each step's words sit beside
   a smaller phone, where six full-size phones stacked under centred words made
   a stretched phone page (how it works walk, 9 October 2026). */
@media (min-width: 640px) and (max-width: 899px) {
  .story .steps .step { grid-template-columns: 1fr 220px; gap: 36px; }
  .story .steps .step .words { text-align: left; margin: 0; }
  .story .steps .step .shot { max-width: 220px; margin: 0; }
}
/* Where the words read from the left, the arrival picture starts where they do. */
@media (min-width: 640px) { .story .steps .step .figure { margin-left: 0; } }
@media (min-width: 900px) {
  .story { display: grid; grid-template-columns: 1fr 340px; gap: 72px; align-items: start; }
  .story .steps .step { grid-template-columns: 1fr; min-height: 70vh; align-content: center; }
  .story .steps .step .shot { display: none; }
  .story .steps .step:nth-child(even) .words { order: 0; }
  .story .stage { display: block; position: sticky; top: 90px; }
  /* Never taller than the screen: at 1024 by 768 the phone ran under the
     standing button and off the foot of the screen (sweep, 12 October). */
  .story .stage .phone { width: min(340px, calc(46vh - 70px)); width: min(340px, calc(46svh - 70px)); margin: 0 auto; }
  .story .stage .phone img { display: none; }
  .story .stage .phone img.active { display: block; }
}

/* ---------- The interactive demo ---------- */
.try { display: grid; grid-template-columns: 1fr; gap: 30px; align-items: center; margin-top: 36px; }
.try .words { text-align: center; max-width: 30em; margin: 0 auto; }
.try .words p { color: var(--muted); }
.try .phone { width: 320px; margin: 0 auto; }
/* NO HAIRLINE ROUND THE SCREEN AND NONE INSIDE IT (13 September 2026, his
   ruling at his walk): the drawn phone is the only edge. */
.try .screen-box { position: relative; aspect-ratio: 375 / 812; border-radius: 27px; overflow: hidden; background: var(--ivory); }
/* A browser too old for aspect-ratio (Safari before 15, so an iPad or iPhone
   left on an older system) drew the phone as an empty outline, its screen
   0 pixels tall. The old way of keeping a shape, for those alone; and the
   four sides spelled out where inset was (Sweep 1, Demo page, 12 October 2026). */
@supports not (aspect-ratio: 1 / 1) { .try .screen-box { height: 0; padding-bottom: 216.53%; } }
.try .screen { position: absolute; top: 0; right: 0; bottom: 0; left: 0; padding: 44px 18px 22px; overflow-y: auto; display: none; }
/* Long words, as a browser's translation gives them, wrap inside the phone
   rather than pushing its screen sideways (Sweep 1, 12 October 2026). */
.try .screen, .try .screen button { overflow-wrap: break-word; word-wrap: break-word; }
/* A new screen's heading takes the focus when a press opens it (site.js), so
   it is read out; it is not a control, so it draws no ring. */
.try .app-h:focus { outline: none; }
.try .app-line:focus { outline: none; }
/* The keyboard's place in the phone is the platform's own dark ink ring, a
   little outside the edge (Sweep 4, the home page, 22 October 2026). The code
   box, Continue, the doors, the choices, Save, Suggest and the foot's Back drew
   the browser's faint amber ring, which on a chosen airport or day also hid the
   walnut edge that says it is chosen. A tap with a finger shows no ring. */
.try .screen button:focus-visible, .try .app-field:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.try .screen.active { display: block; animation: screenIn 0.35s ease; }
@keyframes screenIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
/* With reduced motion on, a new screen simply appears (Sweep 1, 12 October 2026). */
@media (prefers-reduced-motion: reduce) { .try .screen.active { animation: none; } }
.try .screen .frame { display: none; }
.try .app-mark { font-family: 'Playfair Display', Georgia, serif; font-weight: 500; font-size: 22px; text-align: center; margin-bottom: 26px; }
.try .app-caps { font-size: 9px; letter-spacing: 0.25em; text-transform: uppercase; color: var(--muted); text-align: center; }
.try .app-h { font-family: 'Playfair Display', Georgia, serif; font-weight: 500; font-size: 26px; line-height: 1.15; text-align: center; margin: 8px 0 14px; }
.try .app-p { font-size: 14px; line-height: 1.5; color: var(--muted); text-align: center; margin-bottom: 14px; }
/* Sweep 1 rulings, item G4 (12 October 2026): the route line reads in its two
   sentences, as the platform's own page does, not with "about you." alone. */
.try #route-intro { text-wrap: balance; }
.try .app-card { border: 1px solid var(--hairline); border-radius: var(--radius); padding: 12px 14px; margin-bottom: 10px; font-size: 14px; text-align: left; }
.try .app-door { display: block; width: 100%; border: 1px solid var(--hairline); border-radius: var(--radius); padding: 12px; font: inherit; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; background: none; color: var(--ink); margin-bottom: 8px; cursor: pointer; text-align: center; }
.try .app-door:hover { border-color: var(--walnut); }
.try .app-btn { display: block; width: 100%; border: 0; border-radius: var(--radius); padding: 13px; font: inherit; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; background: var(--walnut); color: var(--ivory); cursor: pointer; margin-top: 10px; }
.try .app-btn:hover { background: var(--walnut-press); }
.try .app-field { width: 100%; font: inherit; font-size: 16px; padding: 10px 12px; border: 1px solid var(--hairline); border-radius: var(--radius); background: var(--ivory); color: var(--ink); text-align: center; letter-spacing: 0.12em; }
.try .app-label { font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); margin: 12px 0 6px; text-align: left; }
.try .app-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.try .app-choice { border: 1px solid var(--hairline); border-radius: var(--radius); padding: 9px 8px; font: inherit; font-size: 12px; background: none; color: var(--ink); cursor: pointer; }
.try .app-choice[aria-pressed="true"] { border-color: var(--walnut); box-shadow: inset 0 0 0 1px var(--walnut); }
.try .app-name { font-family: 'Playfair Display', Georgia, serif; font-weight: 500; font-size: 16px; }
.try .app-small { font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); margin: 2px 0 6px; }
.try .app-line { font-size: 13px; line-height: 1.45; color: var(--muted); }
.try .app-quiet { display: inline-block; border: 1px solid var(--hairline); border-radius: var(--radius); padding: 7px 10px; font: inherit; font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; background: none; color: var(--ink); cursor: pointer; margin-top: 8px; }
.try .app-quiet:hover { border-color: var(--walnut); }
.try .app-foot { display: flex; flex-wrap: wrap; justify-content: center; margin-top: 14px; font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }
/* Back, Change my journey and Privacy are small words with a thumb-sized
   press round them, 42 pixels tall where they were 14; the padding stands where
   the gap was and the negative margin takes the height back, so the words sit
   exactly where they did (Sweep 1, Demo page, 12 October 2026). */
.try .app-foot button, .try .app-foot a { padding: 14px 8px; margin: -14px 0; }
.try .app-foot button { background: none; border: 0; font: inherit; color: var(--muted); cursor: pointer; letter-spacing: 0.2em; text-transform: uppercase; }
.try .app-foot button:hover { color: var(--ink); }
/* Privacy in the pressable phone's foot is a working link to the platform's
   notice (home page second walk, 10 October 2026), drawn like its Back. */
.try .app-foot a { color: var(--muted); text-decoration: none; }
.try .app-foot a:hover { color: var(--ink); }

@media (min-width: 900px) {
  .designs { grid-template-columns: repeat(4, 1fr); gap: 22px; margin-top: 44px; }
  .names { grid-template-columns: 1fr 1fr; gap: 56px; max-width: 860px; margin-left: auto; margin-right: auto; }
  .names .form { text-align: left; margin: 0; }
  .try { grid-template-columns: 1fr 1fr; gap: 56px; max-width: 900px; margin-left: auto; margin-right: auto; }
  .try .words { text-align: left; margin: 0; }
}
/* On an upright iPad or a half screen the words sit beside the phone rather
   than a screen above it (demo walk, 9 October 2026). */
@media (min-width: 640px) and (max-width: 899px) {
  .try { grid-template-columns: 1fr 290px; gap: 32px; }
  .try .words { text-align: left; margin: 0; }
  .try .phone { width: 290px; }
}
/* On the demo page the phone is the page's first thing, straight under the heading. */
.try-first .try { margin-top: 28px; }
@media (max-width: 560px) {
  .designs { grid-template-columns: 1fr 1fr; gap: 12px; }
  .try .phone { width: min(290px, 100%); margin-left: auto; margin-right: auto; }
}
/* On the smallest phones (under 360 wide, like the first iPhone SE) the phone's
   journey screen ran taller than the drawn phone: Back sat out of sight inside
   it, and under a browser's Translate Save itself was cut off at its foot, to be
   found only by scrolling inside the drawing. A little less room above the
   wordmark and the labels lets the whole screen fit (Sweep 4, the Demo page,
   22 October 2026). */
@media (max-width: 359px) {
  .try .screen { padding-top: 28px; padding-bottom: 16px; }
  .try .app-mark { margin-bottom: 14px; }
  .try .app-label { margin-top: 8px; }
}

/* A link inside a card's words takes the card's own quiet link, never the browser's blue. */
.card p a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--hairline); }
.card p a:hover { border-bottom-color: var(--champagne); }
/* The demo phone's front door sits centred, as the real one does. */
.try #s-door.active { display: flex; flex-direction: column; justify-content: center; }

/* =====================================================================
   ROUND FOUR (11 September 2026)
   ===================================================================== */

/* A keyboard's way past the menu. */
.skip { position: absolute; left: 16px; top: -60px; z-index: 30; background: var(--walnut); color: var(--ivory); padding: 10px 16px; border-radius: var(--radius); text-decoration: none; font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase; }
.skip:focus { top: 16px; }
/* Sweep 1, page 153: with text at twice the size its words take two lines,
   and 60px above the page no longer hid it, so a walnut strip showed along
   the top of every page. It now waits wholly above the page until focused. */
.skip:not(:focus) { top: auto; bottom: 100%; }

/* The home page's middle phone plays the guest's journey. */
.trio .player { position: relative; }
/* Four sides, not inset: Safari before 14.1 drops inset, and the pictures fell out of the phone (Sweep 3, page 144). */
.trio .player img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 0.9s ease; }
.trio .player img:first-child { position: relative; }
.trio .player img.on { opacity: 1; }
.trio .player-caption { margin-top: 12px; text-align: center; color: var(--muted); font-size: 14px; font-style: italic; min-height: 1.4em; transition: opacity 0.4s ease; }
.trio .player-caption.fade { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .trio .player img { transition: none; } }

/* Try the designer: a layout, a colour set, the real card. */
.tryd { display: grid; grid-template-columns: 1fr; gap: 26px; align-items: start; margin-top: 36px; }
.tryd .picker h3 { margin-bottom: 6px; }
.tryd .picker p { color: var(--muted); }
.tryd .group { margin-top: 18px; }
.tryd .group .caps { color: var(--muted); display: block; margin-bottom: 8px; }
.tryd .chips { display: flex; flex-wrap: wrap; gap: 8px; }
.tryd .chip { border: 1px solid var(--hairline); border-radius: var(--radius); padding: 9px 14px; font: inherit; font-size: 15px; background: none; color: var(--ink); cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.tryd .chip:hover { border-color: var(--champagne); }
.tryd .chip[aria-pressed="true"] { border-color: var(--walnut); box-shadow: inset 0 0 0 1px var(--walnut); }
/* The keyboard's place shows in walnut, as on every other link and menu, a little outside the border so it reads apart from the chosen one (Sweep 3, page 150). */
.tryd .chip:focus-visible { outline: 2px solid var(--walnut); outline-offset: 3px; }
.tryd .chip .swatch { width: 14px; height: 14px; border-radius: 50%; border: 1px solid var(--hairline); display: inline-block; }
.tryd .card-out { max-width: 360px; margin: 0 auto; }
/* THE DESIGNER SECOND WALK, 10 OCTOBER 2026. Below 900 wide the card sits
   under the choices, and on a phone it was taller than what was left of the
   screen, so every change took a scroll down to see the card and a scroll
   back up to choose again. Here the card takes the height the screen has
   left once the choices are on it, so a tap and its card are seen together;
   never narrower than 180, never wider than 360. */
@media (max-width: 899px) {
  .tryd .card-out { max-width: clamp(180px, calc((100svh - 400px) * 0.71), 360px); }
}
.tryd .card-out img { width: 100%; border: 1px solid var(--hairline); border-radius: var(--radius); transition: opacity 0.3s ease; }
.tryd .card-out img.swap { opacity: 0.35; }
.tryd .card-out figcaption { margin-top: 10px; text-align: center; color: var(--muted); font-size: 14px; font-style: italic; }

/* For guests: plain rows of who sees what. */
.rows { max-width: 720px; margin: 30px auto 0; }
.row-line { display: grid; grid-template-columns: 1fr; gap: 4px; padding: 14px 0; border-top: 1px solid var(--hairline); }
.row-line:last-child { border-bottom: 1px solid var(--hairline); }
.row-line .who { font-family: 'Playfair Display', Georgia, serif; font-weight: 500; font-size: 19px; }
.row-line .what { color: var(--muted); }
/* A long word may break rather than widen the row (Sweep 4, item 151,
   22 October 2026): put into German by a browser, at double text on a phone,
   a long compound pushed the rows past the screen's edge and the page
   scrolled sideways. English never breaks a word here. */
.row-line > * { min-width: 0; overflow-wrap: break-word; }

@media (min-width: 900px) {
  /* The card keeps its 360 and the choices take the rest, so the six
     layouts sit in one row at a desk, where Duet sat alone on a second
     (designer second walk, 10 October 2026). */
  .tryd { grid-template-columns: minmax(0, 1fr) 360px; gap: 56px; max-width: 1040px; margin-left: auto; margin-right: auto; }
  .row-line { grid-template-columns: 220px 1fr; gap: 24px; }
}
@media (max-width: 560px) {
  nav.site { gap: 12px 18px; }
  nav.site a { font-size: 11px; }
  /* THE HOME PAGE WALK, 9 OCTOBER 2026. "Who is it for?" kept the caps 13px
     while its neighbours went to 11px, so one word in the phone menu stood
     larger than the rest. And each word was a 22px-tall target: the rows now
     take their air as tap area above each word rather than as gap between
     rows, so the menu is no taller and every word is 34px to press. */
  nav.site summary { font-size: 11px; }
  nav.site { margin-top: 10px; row-gap: 0; }
  nav.site > a, nav.site .who > summary { padding-top: 12px; }
  /* THE CONTACT SECOND WALK, 10 OCTOBER 2026, for every page: on a phone the
     header took about a third of the first screen before a page's own
     heading. Its air is tightened, nothing in it goes: the frame's top, the
     line under the wordmark, the gap above the menu (each menu word already
     carries 12px of tap above it) and the divider under the menu. */
  header.site { padding-top: 22px; }
  .strap { margin-top: 6px; line-height: 1.45; }
  nav.site { margin-top: 2px; }
  header.site + .divider { margin: 22px auto; }
}

/* =====================================================================
   ROUND FIVE (11 September 2026)
   ===================================================================== */

/* The champagne arrow back to the top, on Tom's instruction: the platform's
   own control carried across (app/back-to-top.module.css): a hairline arrow,
   no disc, tile or box, bottom right, absent at the top of a page, ink under
   the pointer. On a phone it sits above the floating button. */
.to-top {
  position: fixed; right: 20px; bottom: 20px; z-index: 30;
  width: 44px; height: 44px; padding: 11px; display: flex; align-items: center; justify-content: center;
  background: none; border: 0; border-radius: 0; cursor: pointer; -webkit-tap-highlight-color: transparent;
  opacity: 0; pointer-events: none; transition: opacity 0.3s ease;
}
html.scrolled .to-top { opacity: 1; pointer-events: auto; }
.to-top svg { display: block; width: 22px; height: 22px; fill: none; stroke: var(--champagne); stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; }
.to-top:hover svg, .to-top:focus-visible svg { stroke: var(--ink); }
.to-top:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
/* The arrow clears the standing button at the foot wherever that button shows,
   which is now every width below 1100px; the phone inset itself is unmoved. */
@media (max-width: 1099px) { .to-top { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); } }
@media (max-width: 899px) { .to-top { right: 14px; } }
/* On a phone the arrow sat over the right edge of the text (contact second
   walk, 10 October 2026, for every page). It now stands in the margin between
   the text and the frame: the tap area keeps its 44px, the drawing sits 3px
   clear of the text and inside the frame's line. */
@media (max-width: 560px) { .to-top { right: 0; padding: 11px 9px 11px 13px; } }
/* Flush with the screen's edge there, the keyboard's ring ran off the right
   of the screen and showed on three sides only (Sweep 4, the privacy page,
   22 October 2026). It is drawn just inside the tap area instead. */
@media (max-width: 560px) { .to-top:focus-visible { outline-offset: -2px; } }
/* A page with no standing button (the privacy notice, 9 October 2026) keeps
   the arrow in its own corner, as on a laptop. */
body.no-cta .to-top { bottom: calc(20px + env(safe-area-inset-bottom, 0px)); }
@media (prefers-reduced-motion: reduce) { .to-top { transition: none; } }

/* The contact page: one card per address. */
/* ---------- The contact page's cards (13 September 2026) ------------------- */
/*
  TWO DOORS OF EQUAL WEIGHT under "Elsewhere", on his ruling that one mark alone
  in the middle of the page looked lonely. They are the site's own card with the
  WHOLE CARD as the door, which is the platform's fourth garment: nothing inside
  is dressed a second time, and the word at the foot is a label rather than a
  second link.
*/
a.card.door { display: block; text-decoration: none; color: inherit; }
a.card.door:hover, a.card.door:focus-visible { border-color: var(--champagne); }
a.card.door:focus-visible { outline: 2px solid var(--walnut); outline-offset: 3px; }
a.card.door .more { display: inline-block; margin-top: 12px; color: var(--ink); font-size: 17px; }
a.card.door:hover .more { color: var(--walnut); }
.doors { align-items: stretch; }

.contacts .card { text-align: left; }
.contacts .card .caps { color: var(--muted); display: block; margin-bottom: 8px; }
.contacts .card a.addr { font-family: 'Playfair Display', Georgia, serif; font-weight: 500; font-size: 22px; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--hairline); display: inline-block; padding-top: 10px; line-height: 1.5; }
/* The contact page's three doors (contact walk, 9 October 2026): Instagram,
   the demo and the one-pager in one row from an upright iPad up, a little
   tighter between 640 and 899 so three fit beside each other. */
.cards.doors.three { max-width: 900px; margin-left: auto; margin-right: auto; }
.cards.doors.three a.card.door { display: flex; flex-direction: column; align-items: center; }
.cards.doors.three a.card.door .more { margin-top: auto; padding-top: 12px; }
@media (min-width: 640px) and (max-width: 899px) {
  .cards.doors.three { grid-template-columns: repeat(3, 1fr); gap: 14px; }
  .cards.doors.three .card { padding: 22px 16px 24px; }
  .cards.doors.three .card p { font-size: 16px; }
}
.contacts .card a.addr:hover { border-bottom-color: var(--champagne); }
.contacts .card p { text-wrap: wrap; margin-top: 10px; }
/* Copy beside each card's label (contact second walk, 10 October 2026): one
   tap puts the address ready to paste, for a laptop whose mail lives in a
   browser. Quiet caps like the label, a 44px tap made of padding that takes
   no room, and hidden until site.js finds the browser's own clipboard. */
.contacts .card .top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 8px; }
.contacts .card .top .caps { margin-bottom: 0; }
.contacts .card button.copy { font-family: inherit; font-size: 12px; line-height: 1.6; text-transform: uppercase; letter-spacing: 0.22em; color: var(--muted); background: none; border: 0; border-radius: 0; padding: 13px 10px; margin: -13px -10px; cursor: pointer; flex: none; -webkit-tap-highlight-color: transparent; }
.contacts .card button.copy:hover, .contacts .card button.copy:focus-visible { color: var(--ink); }
.contacts .card button.copy:focus-visible { outline: 2px solid var(--ink); outline-offset: -6px; }
.contacts .card button.copy[hidden] { display: none; }
/* Text made twice the size on a phone (about 188 wide): the addresses ran off
   the card and the page scrolled sideways. The card may now be narrower than
   its longest word, which wraps after the @ first (sweep, 12 October 2026). */
.contacts .card, .cards .card { min-width: 0; overflow-wrap: break-word; }
.contacts .card a.addr { max-width: 100%; }
.cards.doors .card h3 { max-width: 100%; }
/* Copy steps under its label only when there is no room beside it. */
.contacts .card .top { flex-wrap: wrap; }
.contacts .card .top .caps { flex: 1 1 7em; min-width: 0; }
/* Said aloud to a screen reader, never seen: Copied. */
.said { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* The one-pager, offered as a download. */
.paper { display: grid; grid-template-columns: 1fr; gap: 26px; align-items: center; margin-top: 36px; }
.paper img { width: 100%; max-width: 300px; margin: 0 auto; border: 1px solid var(--hairline); border-radius: var(--radius); }
.paper .words { text-align: center; max-width: 30em; margin: 0 auto; }
.paper .words p { color: var(--muted); }
@media (min-width: 900px) {
  .paper { grid-template-columns: 300px 1fr; gap: 56px; max-width: 820px; margin-left: auto; margin-right: auto; }
  .paper .words { text-align: left; margin: 0; }
}

/* Paper: the chrome goes, the words stay. */
@media print {
  .topbar, .floating-cta, .to-top, .skip, nav.site, .btn, html.js .search { display: none !important; }
  .shell { border: 0; margin: 0; }
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* =====================================================================
   ROUND SIX (11 September 2026): the emails as guests receive them
   ===================================================================== */
img.mail { width: 100%; border: 1px solid var(--hairline); border-radius: var(--radius); background: var(--ivory); }
.screens img.mail { border-radius: var(--radius); }
.paper img.mail { max-width: 340px; }

/* =====================================================================
   TESTIMONIALS AND THE WALK-THROUGH (12 September 2026)
   ===================================================================== */

/* Three planners' own words, in the shape of the brand's own quote tiles:
   the sentence in Playfair, the divider motif, then first name and region in
   letter-spaced caps. Nobody's words are ever set in anything but their own. */
.voices { display: grid; grid-template-columns: 1fr; gap: 18px; margin-top: 36px; }
.voice { border: 1px solid var(--hairline); border-radius: var(--radius); padding: 34px 28px 30px; text-align: center; display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; }
.voice blockquote { margin: 0; font-family: 'Playfair Display', Georgia, serif; font-weight: 500; font-size: clamp(20px, 2.1vw, 24px); line-height: 1.3; text-wrap: balance; }
/* The attribution sits at the foot of every card, so three quotes of
   different lengths still line their names up with one another. */
.voice .rule { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 34px 0 20px; }
@media (min-width: 900px) {
  /* Bottom-anchored so the names line up, with the 34px kept as a floor so a
     long quotation can never crowd the divider (his note of 12 September). */
  .voice .rule { margin-top: auto; padding-top: 34px; }
  /* A longer region wraps to two lines; every card keeps room for two, so
     the three names sit level whatever the region is called. */
  .voice .where { min-height: 2.9em; }
}
.voice .rule::before, .voice .rule::after { content: ""; width: 34px; height: 1px; background: var(--champagne); }
.voice .rule i { width: 6px; height: 6px; background: var(--champagne); transform: rotate(45deg); }
.voice .who { font-size: 13px; letter-spacing: 0.22em; text-transform: uppercase; }
.voice .where { font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); margin-top: 6px; }
.voice cite { font-style: normal; }

/* The walk-through: a figure and a line, in rows that read like a ledger. */
.walk { max-width: 760px; margin: 30px auto 0; }
.walk .line { display: grid; grid-template-columns: 1fr; gap: 4px; padding: 16px 0; border-top: 1px solid var(--hairline); }
.walk .line:last-child { border-bottom: 1px solid var(--hairline); }
.walk .fig { font-family: 'Playfair Display', Georgia, serif; font-weight: 500; font-size: 26px; line-height: 1.1; -webkit-hyphens: auto; hyphens: auto; overflow-wrap: break-word; }
.walk .say { color: var(--muted); }
.invented { margin-top: 22px; text-align: center; color: var(--muted); font-size: 16px; }

@media (min-width: 900px) {
  .voices { grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 44px; }
  .walk .line { grid-template-columns: 190px 1fr; gap: 26px; align-items: baseline; }
}

/* =====================================================================
   THE FOUNDING-PLANNER OFFER (12 September 2026)
   His instruction: stand out, but not brash. So it stands out the way
   the stationery does — a hairline frame with a second frame inside it,
   generous air, and the page's one walnut act — rather than by fill,
   badge, banner or urgency. Nothing here is a colour block.
   ===================================================================== */
.offer { border: 1px solid var(--champagne); border-radius: var(--radius); padding: 10px; margin-top: 36px; }
/* A long translated word (German "Gründungsplaner") breaks inside the box
   rather than pushing the page sideways at large text on a phone, as the
   cards' words already do (Sweep 4, item 149, 22 October 2026). */
.offer .inner { border: 1px solid var(--hairline); border-radius: 4px; padding: 44px 30px 40px; text-align: center; overflow-wrap: break-word; }
.offer .caps { color: var(--muted); display: block; }
.offer h2 { font-size: clamp(28px, 3.4vw, 40px); margin: 18px auto 0; max-width: 16em; }
.offer p { color: var(--muted); max-width: 32em; margin: 16px auto 0; text-wrap: balance; }
.offer .cta { margin-top: 28px; }
@media (min-width: 900px) { .offer .inner { padding: 56px 44px 52px; } }
@media (max-width: 560px) {
  .offer { padding: 8px; }
  .offer .inner { padding: 34px 20px 32px; }
}

/* ---------- How it compares (For planners, draft of 13 October 2026) ----------
   Tom's comparison sheet (BACKLOG, 28 September 2026; his rulings 13 October):
   features down the left, EventRide and four named platforms across. EventRide's
   column carries a light champagne wash; the marks are ink for yes, a half-filled
   walnut circle for in part (champagne until Sweep 3), a muted dash for not found. Each mark has its
   words for a screen reader. On a phone the five columns stay on the screen. */
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.compare { max-width: 860px; margin: 34px auto 0; overflow-x: auto; }
.compare table { width: 100%; border-collapse: collapse; font-size: 17px; }
.compare th, .compare td { padding: 12px 8px; border-bottom: 1px solid var(--hairline); text-align: center; vertical-align: middle; }
.compare thead th { font-family: 'Playfair Display', Georgia, serif; font-weight: 500; font-size: 16px; line-height: 1.2; color: var(--muted); vertical-align: bottom; }
.compare thead th.er { color: var(--ink); font-size: 18px; }
.compare thead th { width: 11%; }
/* Each feature's name on one line from a half screen up (Tom, 13 October 2026). */
@media (min-width: 561px) { .compare .feat { white-space: nowrap; } }
/* Translated by the browser, a feature name may wrap, so all five columns stay in
   view; English keeps its one line (sweep 2, page 146, 15 October 2026). */
html.translated-ltr .compare .feat, html.translated-rtl .compare .feat { white-space: normal; }
.compare tbody th { text-align: left; font-weight: 400; line-height: 1.35; padding-left: 0; }
.compare .er { background: rgba(190, 162, 112, 0.12); }
.compare thead .er { border-radius: var(--radius) var(--radius) 0 0; }
.compare tbody tr:last-child th, .compare tbody tr:last-child td { border-bottom: 0; }
.m { display: inline-block; width: 20px; height: 20px; vertical-align: middle; background: no-repeat center / contain; }
.m.y { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4.5 10.5l3.6 3.6L15.5 6.5' fill='none' stroke='%23262421' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
/* In part is walnut, not champagne (Sweep 3, page 147, agreed by Tom 18 October
   2026): pale gold on ivory was 2.17 to 1, under the 3 to 1 a mark needs;
   walnut is 6.65 to 1. Same half-filled circle. */
.m.p { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='6' fill='none' stroke='%236B4F3A' stroke-width='1.4'/%3E%3Cpath d='M10 4a6 6 0 0 1 0 12z' fill='%236B4F3A'/%3E%3C/svg%3E"); }
.m.n { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 10h8' stroke='%235C564E' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"); }
.compare-key { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 22px; margin-top: 18px; font-size: 16px; color: var(--muted); }
.compare-key span { display: inline-flex; align-items: center; gap: 6px; }
/* Which do you use now? (13 October 2026, the 10x): four names above the
   sheet, with All first. A tapped name narrows the sheet to EventRide and
   that platform; All brings every column back. The feature names stand alone,
   never a sentence beneath them (Tom, 13 October 2026). The row is hidden
   until site.js shows it, so without the script the sheet is whole. */
.compare-pick { margin: 26px auto 0; text-align: center; }
.compare-pick p { color: var(--muted); font-size: 17px; margin-bottom: 8px; }
.compare-pick .chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.compare-pick .chip { min-height: 44px; padding: 8px 16px; border: 1px solid var(--hairline); border-radius: var(--radius); background: transparent; color: var(--ink); font: inherit; font-size: 17px; cursor: pointer; }
.compare-pick .chip:hover, .compare-pick .chip:focus-visible { border-color: var(--champagne); }
/* The keyboard's place in walnut, as the Designer's choices show it; the
   browser's own faint amber ring hid on a chosen (ink) name (Sweep 4, item
   149, 22 October 2026). The Checked note's question shares it. */
.compare-pick .chip:focus-visible, .compare-note summary:focus-visible { outline: 2px solid var(--walnut); outline-offset: 3px; }
.compare-pick .chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--ivory); }
.compare-pick + .compare { margin-top: 18px; }
.compare .feat { display: block; }
/* Written out in full, not with the :is shorthand, which Safari before 14 drops (Sweep 3, page 147). */
.compare[data-pick="1"] .c2, .compare[data-pick="1"] .c3, .compare[data-pick="1"] .c4,
.compare[data-pick="2"] .c1, .compare[data-pick="2"] .c3, .compare[data-pick="2"] .c4,
.compare[data-pick="3"] .c1, .compare[data-pick="3"] .c2, .compare[data-pick="3"] .c4,
.compare[data-pick="4"] .c1, .compare[data-pick="4"] .c2, .compare[data-pick="4"] .c3 { display: none; }
.compare[data-pick] thead th { width: 22%; }
@media (max-width: 560px) {
  .compare[data-pick] tr { grid-template-columns: repeat(2, 1fr); }
  .compare[data-pick] thead th { width: auto; font-size: 15px; }
  .compare-pick .chip { padding: 8px 12px; font-size: 16px; }
}
/* The note behind a tap (13 October 2026): "Checked (date)" with a small
   information circle, the date always in view, the rest folds open beneath.
   The whole line is the tap, a full 44px tall. */
.compare-note { margin-top: 6px; text-align: center; }
.compare-note summary { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 6px; cursor: pointer; list-style: none; color: var(--muted); font-size: 16px; }
.compare-note summary::-webkit-details-marker { display: none; }
.compare-note summary:hover, .compare-note summary:focus-visible, .compare-note[open] summary { color: var(--ink); }
.compare-note summary svg { flex: none; }
.compare-note p { margin-top: 4px; font-size: 16px; }
.compare-note a { color: var(--ink); }
/* On a phone each feature takes its own line across the full width, with the
   five marks in a row beneath it, and the names stay pinned under the slim bar
   so a reader always knows which column is which. */
@media (max-width: 560px) {
  .compare { overflow: visible; }
  .compare table, .compare thead, .compare tbody { display: block; }
  .compare tr { display: grid; grid-template-columns: repeat(5, 1fr); }
  .compare thead { position: sticky; top: 55px; z-index: 2; background: var(--ivory); }
  .compare thead td { display: none; }
  .compare thead th { width: auto; font-size: 13px; padding: 10px 2px; border-bottom: 1px solid var(--champagne); }
  .compare thead th.er { font-size: 14px; background: linear-gradient(rgba(190, 162, 112, 0.12), rgba(190, 162, 112, 0.12)), var(--ivory); }
  .compare tbody th { grid-column: 1 / -1; padding: 14px 0 4px; border-bottom: 0; font-size: 16px; }
  .compare tbody td { padding: 6px 2px 12px; }
  .compare tbody td.er { border-radius: 0 0 var(--radius) var(--radius); }
}
/* At double text size (a phone at 200% is about 188 wide) the names' row and the
   marks' rows share one set of equal columns, so each name stays over its own
   marks; a long name breaks rather than pushing off the page (sweep 2, page 146). */
@media (max-width: 300px) {
  .compare tr { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .compare thead th { overflow-wrap: anywhere; }
}

/* THE INSTAGRAM LINK PAGE, /links (21 October 2026, Tom's brief). One column,
   phone first: the wordmark, one line, six doors stacked full width, a small
   foot. The house's own colours and type only. The first door is the one walnut
   fill; the other five are ivory in a hairline frame, champagne when touched.
   Every door is at least 56px tall. */
.links { max-width: 30em; margin: 0 auto; padding: 56px 0 8px; text-align: center; }
.links h1.wordmark { font-size: 34px; line-height: 1.2; }
.links .strap { margin: 12px auto 0; max-width: 22em; color: var(--muted); font-size: 18px; line-height: 1.5; }
/* "10x this", the same evening: the wordmark goes home, a small phone shows
   the guest's page, and one planner's words close the page. */
.links h1.wordmark a { color: inherit; text-decoration: none; }
.links .phone { width: 150px; margin: 28px auto 0; padding: 7px; border-radius: 26px; }
.links .phone::before { top: 13px; height: 6px; }
.links .phone img { border-radius: 20px; }
.links .voice { margin-top: 40px; }
/* Sweep 4, item 158, 22 October 2026: the doors and the quote's rule are
   spaced by margins here, not gap, because this page loads no site.js, so the
   html.nogap mark an iPhone on iOS 14.0 or older needs never comes, and its
   six doors touched. Margins look the same on every browser. */
.links .doors { list-style: none; margin: 32px 0 0; }
.links .doors li + li { margin-top: 14px; }
.links .voice .rule { gap: 0; }
.links .voice .rule i { margin: 0 12px; }
.links .door { display: block; min-height: 56px; padding: 17px 20px; border: 1px solid var(--hairline); border-radius: var(--radius); background: var(--ivory); color: var(--ink); text-decoration: none; min-width: 0; overflow-wrap: anywhere; }
.links .door:hover, .links .door:focus-visible { border-color: var(--champagne); }
.links .door .caps { display: block; line-height: 1.5; }
.links .door .sub { display: block; margin-top: 6px; font-size: 17px; line-height: 1.4; }
.links .door.first { background: var(--walnut); border-color: var(--walnut); color: var(--ivory); padding: 22px 20px; }
.links .door.first:hover, .links .door.first:focus-visible { background: var(--walnut-press); border-color: var(--walnut-press); }
.links .door.first .caps { font-size: 14px; }
.links + footer.site { padding-top: 40px; }
.links + footer.site .caps { margin-top: 14px; }
/* Sweep 4, item 158: most visitors open this inside Instagram, whose own bars
   leave a short screen (about 560 tall on an iPhone 8 or SE, less on the
   first SE), and the phone picture pushed the walnut door below it. On a
   short screen the picture is smaller and the gaps tighter, so the door shows
   on the first screen; a tall screen is exactly as before. */
@media (max-height: 740px) {
  .links { padding-top: 36px; }
  .links .phone { width: 116px; margin-top: 20px; padding: 6px; border-radius: 21px; }
  .links .phone::before { top: 11px; height: 5px; }
  .links .phone img { border-radius: 16px; }
  .links .doors { margin-top: 24px; }
}
@media (max-height: 600px) {
  .links { padding-top: 28px; }
  .links .phone { width: 84px; margin-top: 16px; padding: 4px; border-radius: 15px; }
  .links .phone::before { top: 8px; height: 4px; }
  .links .phone img { border-radius: 11px; }
  .links .doors { margin-top: 20px; }
}

/* VERY LARGE TEXT ON THE SMALLEST PHONES (Sweep 3, pages 144 to 152, 18
   October 2026). A 320 phone with text doubled draws the page about 160 wide.
   Long words now break inside their cards (.voice, .card, .cards .card, the
   Instagram handle, "introductions" with a hyphen) instead of pushing the
   page sideways, and below 240 wide: the wordmark sits below the search
   glass, the slim bar's wordmark clears it, the Who is it for? menu fits the
   screen, and each question's fold arrow follows its last word instead of
   standing beside it. Nothing changes at 240 wide and up. */
@media (max-width: 239px) {
  header.site { padding-top: 64px; }
  header.site .whoList { min-width: 144px; }
  .topbar .wordmark { font-size: 17px; }
  details.card.qa > summary h3 { display: block; }
  details.card.qa > summary h3::after { display: inline-block; margin-left: 10px; vertical-align: 0.15em; }
}

/* ---------- An older phone that cannot space a row ----------
   (Sweep 4, the home page, 22 October 2026.) site.js marks html.nogap only on
   a browser whose flexible rows ignore gap (Safari before 14.1, so an iPhone or
   iPad left on iOS 14.0 or earlier). Without these its menu words ran into one
   another, and the dividers, phones in a row, search results and keys lost
   their spacing. Margins of about the same size stand in, for that browser
   alone; a newer browser never has the mark, so nothing here reaches it. */
html.nogap nav.site > * { margin: 0 13px 6px; }
html.nogap .who > summary::after { margin-left: 7px; }
html.nogap .whoList a + a { margin-top: 2px; }
html.nogap .divider .diamond { margin: 0 14px; }
html.nogap .voice .rule i { margin: 0 12px; }
html.nogap .search-rows li + li { margin-top: 8px; }
html.nogap .search-reason { margin-top: 2px; }
html.nogap .topbar .row > * + * { margin-left: 18px; }
html.nogap .topbar nav > * + * { margin-left: 18px; }
html.nogap .tryd .chips > *, html.nogap .compare-pick .chips > * { margin: 0 4px 8px; }
html.nogap .tryd .chip .swatch { margin-right: 8px; }
html.nogap .compare-key span { margin: 0 11px 8px; }
html.nogap .compare-key span i { margin-right: 6px; }
html.nogap .compare-note summary svg { margin-right: 8px; }
html.nogap .contacts .card .top > * + * { margin-left: 12px; }
@media (max-width: 560px) {
  html.nogap nav.site > * { margin: 0 9px; }
  html.nogap .trio figure + figure, html.nogap .screens figure + figure { margin-left: 16px; }
}