/* checktheapp.net, the 25 Oct 2026 rewrite (Trello #94): the home page and the plan-for pages,
   built from the canvas "Check The App · Website" (https://claude.ai/artifact/8obLjxfkPHCCbRuTJyppp1,
   top row "AB · The blend"), every number taken from design/canvas/src/_opt-web-lib.js.

   One ground (sand) for the whole page; the deep teal only in rounded panels set in from the
   edges; gold only for the payoff on teal. No dark mode (decided on the card). The phone layout
   below 900px, the computer layout from 900px; both fill the window (Toby, 25 Oct: on his 1080
   wide screen "it doesn't reach the edges"). The teal panels and the bar run edge to edge; the
   words and cards inside them stay within 1152 in the middle (--side below). 900 to 1199 is the
   computer layout drawn smaller (the block near the end). Nothing reaches a third party: the
   typefaces are css/fonts.css, the icons fonts/material-symbols-rounded-web.woff2.

   Since 25 Oct (Trello #106, the canvas's rows L) every page is in this look: the reading pages
   (privacy, terms, Help), /reset and the 404 (all written by build-site.js), /join (the joinPage
   function) and a data copy's gone link (dataCopy). Their part is the block "the pages a link
   opens" at the end. site.css stays only for pages cached before that. */

/* The icons this look draws, cut by Google Fonts to these 39 (25 Oct 2026): add, arrow_forward,
   badge, beach_access, celebration, check, check_circle, chevron_right, close, content_copy, directions_walk,
   edit_note, event_note, expand_more, favorite, format_quote, groups, luggage, menu, music_note,
   notifications_active, photo_library, push_pin, remove, search, shop, signal_cellular_off,
   sports_bar (the stag do page, Trello #103); cloud_off, folder_zip, help, home, key, link_off,
   mark_email_read, place, signal_wifi_off, timer_off, undo (the pages a link opens, Trello #106).
   A new icon means fetching the cut again with its name added
   (css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,400,0..1,0&icon_names=...),
   and moving the ?v= below on, so no browser keeps the old cut beside the new page.
   Apache License 2.0, beside it in public/fonts. */
@font-face {
  font-family: 'Material Symbols Rounded';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url(/fonts/material-symbols-rounded-web.woff2?v=efbffb91) format('woff2');
}

:root {
  --deep: #163A45;
  --deeper: #0F2A33;
  --teal: #1F4B57;
  --gold: #F2C879;
  --paper: #FBF7F0;
  --sand: #F6F1E7;
  --sand2: #EFE7D8;
  --ink: #1B2A32;
  --soft: #56656E;
  --rule: #E4DCCE;
  --on-deep: rgba(251, 247, 240, .80);
  --on-deep-soft: rgba(251, 247, 240, .62);
  --lift: 0 2px 14px rgba(27, 42, 50, .06);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--sand);
  color: var(--ink);
  font-family: 'Bricolage Grotesque', Roboto, system-ui, sans-serif;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
}
p, h1, h2, h3, ul, ol, figure, pre { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img { display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }
.mono { font-family: 'JetBrains Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums; }
.ms {
  font-family: 'Material Symbols Rounded';
  font-weight: 400; font-style: normal; line-height: 1; letter-spacing: normal; text-transform: none;
  display: inline-block; white-space: nowrap; direction: ltr; font-feature-settings: 'liga';
  flex: none; font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  -webkit-font-smoothing: antialiased;
}
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 6px; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 50; background: var(--ink); color: var(--paper); padding: 12px 16px; border-radius: 12px; font-weight: 700; text-decoration: none; }
.skip:focus { top: 12px; }

/* --side is the gap from the window's edge to the words: 64 on a computer, more once the window
   is wider than 1280, so the content stays 1152 wide in the middle. --inset is the same gap
   measured inside a teal panel (24 in from each edge). */
.page { --side: 20px; --inset: 20px; }
@media (min-width: 900px) { .page, .bar { --side: max(64px, calc(50vw - 576px)); --inset: max(40px, calc(50vw - 600px)); } }

/* ------------------------------------------------------------------ type */

/* The two beats: a set-up, then the payoff in the accent. */
.beat { font-weight: 800; line-height: 1; letter-spacing: -.035em; color: var(--ink); }
.beat .pay { display: block; color: var(--teal); }
.on-deep .beat { color: var(--paper); }
.on-deep .beat .pay { color: var(--gold); }
.title { font-weight: 800; font-size: 30px; line-height: 1.05; letter-spacing: -.03em; color: var(--ink); }
.lede { font-size: 17px; line-height: 1.45; color: var(--soft); margin-top: 8px; }
.para { font-size: 17px; line-height: 1.45; color: var(--soft); }
@media (min-width: 900px) {
  .title { font-size: 44px; }
  .lede { font-size: 20px; }
}

/* A section: 48 above it on a phone, 80 on a computer. */
.sec { padding: 48px 20px 0; }
.sec > .lede + * , .sec > .title + * { margin-top: 0; }
.head { margin-bottom: 24px; }
@media (min-width: 900px) {
  .sec { padding: 80px var(--side) 0; }
  .head { margin-bottom: 32px; }
}

/* ------------------------------------------------------------------ buttons */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  height: 52px; padding: 0 22px; border-radius: 26px; border: 0;
  font-size: 16px; font-weight: 700; white-space: nowrap; text-decoration: none; cursor: pointer;
  background: var(--teal); color: var(--paper);
}
.btn .ms { font-size: 21px; }
.btn svg { width: 20px; height: 20px; fill: currentColor; flex: none; }
.btn.paper { background: var(--paper); color: var(--ink); }
.btn.ghost { background: transparent; color: var(--paper); box-shadow: inset 0 0 0 1.5px rgba(251, 247, 240, .55); }
.btn.gold { background: var(--gold); color: var(--ink); }
.btn.small { height: 44px; padding: 0 18px; border-radius: 22px; font-size: 15.5px; }
/* The Google Play button until Android launches (Trello #118, L9): its own look, saying "Coming
   soon to Google Play" (Toby, 26 Oct: "the same look ... the same size as the Apple one"). A span,
   not a link, so only the pointer changes. Not .soon: that is the pricing section's gold chip.
   On the site it reads as a store badge does, the small line over the store's name, and the
   pair share one width. */
.btn.playsoon { cursor: default; }
.btn .two { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.05; }
.btn .two small { font-size: 11px; font-weight: 600; letter-spacing: .2px; opacity: .7; }
.stores .btn.paper { min-width: 168px; }
.stores { display: flex; flex-wrap: wrap; gap: 12px; }
.stores.stack { flex-direction: column; }
.stores.stack .btn { width: 100%; }
.free { font-size: 14.5px; color: var(--on-deep-soft); margin-top: 14px; }

/* ------------------------------------------------------------------ the lockup and the top bar */

.lockup { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.lockup img { width: 30px; height: 30px; border-radius: 7px; }
.lockup span { font-weight: 800; font-size: 19px; letter-spacing: -.4px; color: var(--ink); }
.on-deep .lockup span, .foot .lockup span { color: var(--paper); }
@media (min-width: 900px) {
  .lockup img { width: 34px; height: 34px; border-radius: 8px; }
  .lockup span { font-size: 21px; }
}

.bar { position: sticky; top: 0; z-index: 20; background: rgba(246, 241, 231, .92); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.bar .in { display: flex; align-items: center; justify-content: space-between; padding: 8px 20px; }
.bar .links, .bar .right { display: none; }
@media (min-width: 900px) {
  .bar .in { justify-content: flex-start; gap: 28px; padding: 18px var(--side); }
  .bar .links { display: flex; align-items: center; gap: 28px; margin-left: 8px; }
  .bar .right { display: flex; align-items: center; gap: 28px; margin-left: auto; }
  .bar .menu { display: none; }
}
.nav-link {
  display: inline-flex; align-items: center; gap: 2px; min-height: 44px;
  font-size: 16px; font-weight: 600; color: var(--soft); text-decoration: none; cursor: pointer;
}
.nav-link:hover { color: var(--ink); }
.nav-link[aria-current="page"] { font-weight: 800; color: var(--ink); box-shadow: inset 0 -3px var(--teal); }
.nav-link .ms { font-size: 20px; }

/* Plan for: opens under the bar, on hover with a mouse and on a press by touch or keyboard
   (a details element, so it works with no script). */
.planfor { position: relative; }
.planfor > summary { list-style: none; }
.planfor > summary::-webkit-details-marker { display: none; }
.planfor[open] > summary .ms { transform: rotate(180deg); }
.planfor .panel {
  position: absolute; left: -20px; top: calc(100% + 10px); width: 360px;
  background: #fff; border-radius: 18px; padding: 10px; box-shadow: 0 16px 40px rgba(27, 42, 50, .16);
}
.planrow { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 14px; min-height: 56px; text-decoration: none; }
.planrow:hover { background: #E4EEF0; }
.planrow .tile { width: 40px; height: 40px; border-radius: 12px; background: var(--sand); border: 1px solid var(--rule); display: flex; align-items: center; justify-content: center; flex: none; }
.planrow .tile .ms { font-size: 22px; color: var(--ink); }
.planrow b { display: block; font-size: 16.5px; font-weight: 700; color: var(--ink); }
.planrow small { display: block; font-size: 14.5px; color: var(--soft); }

/* The phone's menu: the button opens a sheet under the bar. */
.menu { position: static; }
.menu > summary { list-style: none; width: 44px; height: 44px; border-radius: 22px; display: flex; align-items: center; justify-content: center; box-shadow: inset 0 0 0 1.5px var(--rule); cursor: pointer; }
.menu > summary::-webkit-details-marker { display: none; }
.menu > summary .ms { font-size: 24px; color: var(--ink); }
.menu > summary .shut, .menu[open] > summary .opened { display: none; }
.menu[open] > summary .shut { display: inline-block; }
.menu .sheet {
  position: absolute; left: 10px; right: 10px; top: calc(100% + 4px); max-width: 620px; margin: 0 auto;
  background: #fff; border-radius: 22px; padding: 8px 20px 20px; box-shadow: 0 16px 40px rgba(27, 42, 50, .16);
}
.menu .sheet p { font-size: 14px; font-weight: 700; color: var(--soft); padding: 12px 0 4px; }
.menu .sheet .row-link { display: flex; align-items: center; min-height: 56px; border-top: 1px solid var(--rule); font-size: 18px; font-weight: 700; color: var(--ink); text-decoration: none; }
.menu .sheet .row-link .ms { margin-left: auto; color: #6F7A80; font-size: 22px; }
.menu .sheet .planrow { padding: 10px 4px; }
.menu .sheet .btn { width: 100%; margin-top: 16px; }

/* ------------------------------------------------------------------ the teal panel */

.panel-deep { margin: 0 10px; background: var(--deep); border-radius: 28px; position: relative; overflow: hidden; }
@media (min-width: 900px) { .panel-deep { margin: 0 24px; border-radius: 40px; } }

/* ------------------------------------------------------------------ phones */

/* A phone showing one real screen: --w is the screen's width. */
.phone {
  --w: 236px;
  width: calc(var(--w) * 1.068); padding: calc(var(--w) * .034); border-radius: calc(var(--w) * .15);
  background: #0D171C; box-shadow: inset 0 0 0 2px #34444C, 0 28px 56px rgba(13, 23, 28, .45); flex: none;
}
.phone .scr { position: relative; width: var(--w); aspect-ratio: 1125 / 2436; border-radius: calc(var(--w) * .116); overflow: hidden; }
.phone .scr img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.crop { overflow: hidden; flex: none; }

/* ------------------------------------------------------------------ chat bubbles */

.chat { display: flex; flex-direction: column; gap: 10px; }
.bub {
  align-self: flex-start; max-width: 330px; background: #fff; color: var(--ink);
  border-radius: 20px 20px 20px 6px; padding: 9px 15px 11px; box-shadow: 0 2px 10px rgba(27, 42, 50, .10);
}
.bub .who { display: block; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11.5px; font-weight: 700; color: var(--soft); margin-bottom: 3px; }
.bub .say { display: block; font-size: 16.5px; line-height: 1.3; font-weight: 500; }
.bub.sand { background: var(--sand); }
.me {
  align-self: flex-end; white-space: nowrap; background: var(--teal); color: var(--paper);
  border-radius: 22px 22px 6px 22px; padding: 10px 16px 11px;
  font-weight: 800; font-size: 18px; line-height: 1.05; letter-spacing: -.02em; box-shadow: 0 6px 18px rgba(27, 42, 50, .16);
}
.me.gold { background: var(--gold); color: var(--ink); }
.me.big { padding: 14px 22px 16px; }
.more { align-self: flex-start; margin-left: 6px; padding: 4px 10px; border-radius: 12px; background: rgba(255, 255, 255, .88); font-size: 13px; font-weight: 700; color: var(--ink); }
.day { margin: 6px 0 2px; text-align: center; font-size: 11.5px; font-weight: 700; letter-spacing: 1px; color: var(--soft); }

/* ------------------------------------------------------------------ the hero */

.hero { min-height: 0; }
.hero .copy { position: relative; z-index: 2; padding: 26px 20px 0; }
.hero .beat { font-size: 42px; }
.hero .intro { font-size: 17px; line-height: 1.45; color: var(--on-deep); margin-top: 14px; max-width: 500px; }
.hero .stores { margin-top: 22px; }
.hero .rail-top { position: relative; z-index: 2; padding: 20px 20px 0; }
.hero .stage { position: relative; z-index: 2; height: 380px; width: 355px; max-width: 100%; margin: 26px auto 0; }
.hero .stage .chat { position: absolute; left: 18px; top: 0; width: 206px; }
.hero .stage .chat .bub { max-width: 200px; }
.hero .stage .chat .bub .say { font-size: 15px; }
.hero .stage .chat .me { font-size: 22px; }
.hero .stage .phone { position: absolute; left: 226px; top: 120px; --w: 138px; }
.crumb { font-size: 15px; color: var(--on-deep-soft); margin-bottom: 12px; }
.crumb a { color: inherit; }
.plan-hero .beat { font-size: 36px; line-height: 1.03; }
.plan-hero .stage { height: 440px; margin-top: 30px; }
.plan-hero .stage .chat { left: 16px; width: 200px; }
.plan-hero .stage .chat .bub { max-width: 190px; }
.plan-hero .stage .phone { left: 206px; top: 100px; --w: 142px; }
@media (min-width: 900px) {
  .hero { min-height: 640px; }
  .hero .copy { padding: 64px 0 64px var(--inset); width: calc(min(600px, 100% - 632px) + var(--inset) - 40px); }
  .hero .beat { font-size: 64px; }
  .hero .intro { font-size: 20px; margin-top: 20px; }
  .hero .stores { margin-top: 30px; }
  .hero .rail-top { padding: 24px var(--inset) 0; }
  .hero .stage { position: absolute; right: calc(var(--inset) - 40px); top: 0; bottom: 0; width: 592px; height: auto; margin: 0; }
  .hero .stage .chat { left: 0; top: 110px; width: 280px; }
  .hero .stage .chat .bub { max-width: 330px; }
  .hero .stage .chat .bub .say { font-size: 16.5px; }
  .hero .stage .chat .me { font-size: 30px; }
  .hero .stage .phone { left: 290px; top: 140px; --w: 236px; }
  .plan-hero .copy { padding-top: 64px; }
  .plan-hero .beat { font-size: 48px; line-height: 1.02; }
  .plan-hero .intro { font-size: 19px; }
  .plan-hero .stage .chat { left: 20px; top: 84px; width: 270px; }
  .plan-hero .stage .chat .me { font-size: 28px; }
  .plan-hero .stage .phone { left: 310px; top: 64px; --w: 250px; }
}

/* The rail, as the page's itinerary: the stop you are at a gold ring, ahead hollow. */
.rail { position: relative; display: flex; justify-content: space-between; align-items: flex-start; }
.rail::before { content: ''; position: absolute; left: 6px; right: 6px; top: 9px; height: 2px; background: var(--rule); }
.rail .done-line { position: absolute; left: 6px; top: 9px; height: 2px; background: var(--teal); }
.rail .stop { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; flex: none; }
.rail .stop.first { align-items: flex-start; }
.rail .stop.last { align-items: flex-end; }
.rail .dot { height: 20px; display: flex; align-items: center; }
.rail .dot i { display: block; width: 12px; height: 12px; border-radius: 50%; box-sizing: border-box; border: 2px solid var(--rule); background: var(--paper); }
.rail .done i { border: 0; background: var(--teal); }
.rail .now i { width: 20px; height: 20px; border: 4px solid var(--gold); background: var(--paper); }
.rail .lab { font-size: 13.5px; font-weight: 600; color: var(--soft); }
.rail .now .lab { font-weight: 800; color: var(--ink); }
.rail.dark::before { background: rgba(251, 247, 240, .35); }
.rail.dark .dot i { border-color: rgba(251, 247, 240, .35); background: var(--deep); }
.rail.dark .now i { border-color: var(--gold); }
.rail.dark .lab { color: var(--on-deep-soft); }
.rail.dark .now .lab { color: var(--paper); }
.rail .lab { display: none; }
@media (min-width: 900px) { .rail .lab { display: block; } .rail.nolab .lab { display: none; } }

/* The film: columns of app screens drifting behind the words, under a teal scrim. */
.film { position: absolute; display: flex; gap: 22px; transform: rotate(-9deg); top: -20%; bottom: -60%; left: -10%; right: -40%; pointer-events: none; }
.film .col { display: flex; flex-direction: column; gap: 22px; width: 130px; flex: none; animation: drift 46s linear infinite; }
.film .col.r { animation-duration: 58s; animation-direction: reverse; }
.film img { width: 130px; aspect-ratio: 1125 / 2436; border-radius: 22px; box-shadow: 0 0 0 5px #0D171C; }
.scrim { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, var(--deep) var(--solid, 52%), rgba(22, 58, 69, .80) calc(var(--solid, 52%) + 12%), rgba(22, 58, 69, .62) 100%); }
@keyframes drift { from { transform: translateY(0); } to { transform: translateY(-50%); } }
@media (min-width: 900px) {
  /* Measured from the words' edge, so a wide window's film starts beside them, not under them. */
  .film { top: -30%; bottom: -30%; left: calc(var(--inset) + 540px); right: -10%; }
  .film .col { width: 190px; }
  .film img { width: 190px; }
  .scrim { background: linear-gradient(90deg, var(--deep) calc(var(--inset) + 450px), rgba(22, 58, 69, .80) calc(var(--inset) + 650px), rgba(22, 58, 69, .62) 100%); }
}

/* ------------------------------------------------------------------ what moves */

/* The hero's chat plays out in a 9 s loop (the canvas's MOTION), and the phone turns from
   Welcome to Today as "Check the app." pops in. */
.b0, .b1, .b2, .b3, .b4 { opacity: 0; }
.b0 { animation: b0 9s infinite; } .b1 { animation: b1 9s infinite; } .b2 { animation: b2 9s infinite; }
.b3 { animation: b3 9s infinite; } .b4 { animation: b4 9s infinite; }
@keyframes b0 { 0%, 5% { opacity: 0; transform: translateY(12px) scale(.96); } 9%, 93% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
@keyframes b1 { 0%, 14% { opacity: 0; transform: translateY(12px) scale(.96); } 18%, 93% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
@keyframes b2 { 0%, 23% { opacity: 0; transform: translateY(12px) scale(.96); } 27%, 93% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
@keyframes b3 { 0%, 31% { opacity: 0; transform: translateY(12px) scale(.96); } 35%, 93% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
@keyframes b4 { 0%, 40% { opacity: 0; transform: scale(.7); } 44% { opacity: 1; transform: scale(1.08); } 47%, 93% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
.welcome { animation: welcome 9s infinite; }
@keyframes welcome { 0%, 44% { opacity: 1; } 49%, 93% { opacity: 0; } 98%, 100% { opacity: 1; } }
/* The chats further down pop in once, one after the other, as they scroll in (web.js adds .in).
   With no script they are simply there. */
.js .ask .q1, .js .ask .q2 { opacity: 0; transform: translateY(10px) scale(.96); }
.js .ask.in .q1 { animation: pop .45s cubic-bezier(.2, .8, .2, 1) forwards; }
.js .ask.in .q2 { animation: pop .45s cubic-bezier(.2, .8, .2, 1) .5s forwards; }
@keyframes pop { to { opacity: 1; transform: none; } }
/* Rising into view (Toby, 25 Oct: "like in the current one, when you scroll, it kind of slowly
   starts to pop up"): each .rv rises and fades in as it reaches the screen, and the children of a
   .rv-kids one after another; the rail draws itself, and 388 counts up (web.js adds .up). Only
   with a script (.js), and web.js shows anything still hidden after 2.5 s, so nothing waits on it. */
.js .rv, .js .rv-kids > * { opacity: 0; transform: translateY(28px); }
.js .rv.up, .js .rv-kids.up > * { opacity: 1; transform: none; transition: opacity .7s ease, transform .7s cubic-bezier(.2, .8, .2, 1); }
.js .rv-kids.up > :nth-child(2) { transition-delay: .09s; }
.js .rv-kids.up > :nth-child(3) { transition-delay: .18s; }
.js .rv-kids.up > :nth-child(4) { transition-delay: .27s; }
.js .rv-kids.up > :nth-child(5) { transition-delay: .36s; }
.js .rv-kids.up > :nth-child(6) { transition-delay: .45s; }
.js .rv-kids.up > :nth-child(n+7) { transition-delay: .54s; }
.js .family.rv.up { transition-delay: .15s; }
.js .rail.rv { opacity: 1; transform: none; }
.js .rail.rv .done-line { transform: scaleX(0); transform-origin: left; }
.js .rail.rv.up .done-line { transform: scaleX(1); transition: transform 1.1s cubic-bezier(.2, .8, .2, 1) .15s; }
/* A card's chat pops in once the card has risen. */
.js .rv-kids.up > .ask.in .q1, .js .ask.rv.up.in .q1 { animation-delay: .35s; }
.js .rv-kids.up > .ask.in .q2, .js .ask.rv.up.in .q2 { animation-delay: .85s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .rv, .js .rv-kids > * { opacity: 1 !important; transform: none !important; transition: none !important; }
  .js .rail.rv .done-line { transform: none !important; }
  .b0, .b1, .b2, .b3, .b4, .welcome, .film .col { animation: none !important; }
  .b0, .b1, .b2, .b3, .b4 { opacity: 1; }
  .welcome { opacity: 0; }
  .js .ask .q1, .js .ask .q2 { opacity: 1; transform: none; animation: none !important; }
}

/* ------------------------------------------------------------------ the story */

.story .words .beat { font-size: 38px; }
.story .words .para { margin-top: 18px; max-width: 560px; }
.stat { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px; margin-top: 26px; }
.stat .n { font-size: 72px; font-weight: 800; letter-spacing: -3px; line-height: .9; color: var(--teal); font-variant-numeric: tabular-nums; }
.stat .u { font-size: 17px; font-weight: 800; color: var(--ink); }
.stat .r { font-size: 16px; color: var(--soft); }
.family { margin-top: 28px; background: #fff; border-radius: 28px; box-shadow: 0 2px 18px rgba(27, 42, 50, .08); padding: 18px 18px 22px; }
.family .top { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid var(--rule); }
.av { width: 36px; height: 36px; border-radius: 18px; background: var(--sand2); display: flex; align-items: center; justify-content: center; flex: none; }
.av .ms { font-size: 20px; color: var(--teal); }
.family .top b, .thread .group b { display: block; font-size: 16px; font-weight: 800; color: var(--ink); }
.family .top small, .thread .group small { display: block; font-size: 13px; color: var(--soft); }
.family .chat { gap: 8px; margin-top: 8px; background: var(--sand); border-radius: 18px; padding: 10px 12px 14px; }
.family .bub .say { font-size: 15px; }
.family .me { font-size: 17px; }
@media (min-width: 900px) {
  .story .in { display: flex; align-items: center; gap: 72px; }
  .story .words { flex: 1; }
  .story .words .beat { font-size: 56px; }
  .story .words .para { font-size: 20px; }
  .stat { margin-top: 36px; }
  .stat .n { font-size: 104px; }
  .stat .u { font-size: 20px; }
  .stat .r { font-size: 18px; }
  .family { margin-top: 0; width: 430px; flex: none; }
}

/* ------------------------------------------------------------------ how it works */

/* On a phone the app's own rail runs down the steps; on a computer it runs across them. */
.steps { display: flex; flex-direction: column; }
.steps li { display: flex; gap: 16px; }
.steps .rc { width: 24px; flex: none; position: relative; display: flex; justify-content: center; }
.steps .rc .ln { position: absolute; left: 11px; width: 2px; }
.steps .rc .mk { position: relative; z-index: 1; border-radius: 50%; flex: none; }
.steps .done .mk { width: 12px; height: 12px; background: var(--deep); }
.steps .now .mk { width: 22px; height: 22px; background: var(--sand); border: 3.5px solid var(--gold); display: flex; align-items: center; justify-content: center; }
.steps .now .mk::after { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--deep); }
.steps .ahead .mk { width: 12px; height: 12px; background: var(--sand); border: 2px solid #BCB29F; }
.steps .t { flex: 1; min-width: 0; }
.steps h3 { font-size: 19px; font-weight: 800; color: var(--ink); }
.steps p { font-size: 15.5px; line-height: 1.45; color: var(--soft); margin-top: 4px; }
/* The gap between steps sits inside the words, not under the step, so each step's line runs on
   to the next dot unbroken (Toby, 25 Oct: "the line ... seems to be broken"). */
.steps .t { padding-bottom: 20px; }
.steps li:last-child .t { padding-bottom: 0; }
.steps .done .rc { padding-top: 6px; }
.steps .now .rc { padding-top: 1px; }
.steps .ahead .rc { padding-top: 6px; }
.steps .done .ln.below { top: 14px; bottom: 0; background: var(--deep); }
.steps .now .ln.above { top: 0; height: 9px; background: var(--deep); }
.steps .now .ln.below { top: 9px; bottom: 0; background: #BCB29F; }
.steps .ahead .ln.above { top: 0; height: 14px; background: #BCB29F; }
.across .rail { margin-bottom: 16px; }
.across .cols { display: none; }
@media (min-width: 900px) {
  .across .steps { display: none; }
  .across .cols { display: flex; align-items: flex-start; gap: 28px; }
  .across .cols div { flex: 1; min-width: 0; text-align: center; }
  .across .cols div:first-child { text-align: left; }
  .across .cols div:last-child { text-align: right; }
  .across .cols h3 { font-size: 20px; font-weight: 800; color: var(--ink); }
  .across .cols p { font-size: 15.5px; line-height: 1.45; color: var(--soft); margin-top: 6px; }
}
.across .rail { display: none; }
@media (min-width: 900px) { .across .rail { display: flex; } }

/* ------------------------------------------------------------------ the home page's chat cards */

.asks { display: grid; grid-template-columns: 1fr; gap: 14px; }
.askcard { background: #fff; border-radius: 24px; padding: 20px 16px 16px; box-shadow: var(--lift); }
.askcard .chat { gap: 6px; }
.askcard .bub { max-width: 290px; }
.askcard .bub .say { font-size: 15px; }
.askcard .beat { font-size: 28px; margin-top: 16px; }
.askcard .para { font-size: 15.5px; margin-top: 8px; }
.askcard picture, .askcard picture img { display: block; width: 100%; height: auto; }
.askcard picture { margin-top: 18px; border-radius: 24px; overflow: hidden; }
@media (min-width: 900px) {
  .asks { grid-template-columns: 1fr 1fr; gap: 20px; }
  .askcard { display: flex; align-items: center; gap: 22px; border-radius: 28px; padding: 22px 20px 22px 24px; }
  .askcard .words { flex: 1; min-width: 0; }
  .askcard .bub { max-width: 270px; }
  .askcard .beat { font-size: 30px; }
  .askcard picture { margin-top: 0; width: 236px; flex: none; }
  .askcard picture img { width: 236px; }
}

/* ------------------------------------------------------------------ every kind of trip */

.kinds { display: flex; gap: 14px; align-items: flex-start; overflow-x: auto; margin-right: -20px; padding-right: 20px; scroll-snap-type: x mandatory; scrollbar-width: none; }
.kinds::-webkit-scrollbar { display: none; }
.kind { width: 300px; flex: none; scroll-snap-align: start; }
/* The whole card opens its page (the name and the app's card together). */
.kind > a { display: block; text-decoration: none; color: inherit; border-radius: 22px; }
.kind .name { display: flex; align-items: center; gap: 8px; min-height: 40px; margin-bottom: 8px; font-size: 17px; font-weight: 800; color: var(--ink); text-decoration: none; }
.kind .name .ms { font-size: 22px; color: var(--teal); }
.kind .name .go { font-size: 20px; transition: transform .2s ease; }
.kind img { width: 100%; height: auto; border-radius: 22px; transition: transform .2s ease, box-shadow .2s ease; }
.kind > a:hover img { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(27, 42, 50, .12); }
.kind > a:hover .name .go { transform: translateX(3px); }
@media (min-width: 900px) {
  .kinds { gap: 20px; margin-right: calc(-1 * var(--side)); padding-right: var(--side); }
  .kind { width: 340px; }
}

/* ------------------------------------------------------------------ price and questions */

.plans { display: flex; flex-direction: column; gap: 12px; }
.plan { flex: 1; background: #fff; border-radius: 22px; box-shadow: inset 0 0 0 1px var(--rule); padding: 22px; }
.plan h3 { font-size: 18px; font-weight: 800; }
.plan .price { font-size: 44px; font-weight: 800; letter-spacing: -1px; margin-top: 6px; }
.plan li { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 15.5px; }
.plan li .ms { font-size: 18px; color: var(--teal); }
.plan.later { background: none; box-shadow: none; border: 1.5px dashed var(--rule); }
.plan.later .top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.plan.later h3 { white-space: nowrap; }
.plan.later .para { font-size: 15.5px; margin-top: 10px; }
.soon { white-space: nowrap; height: 24px; padding: 0 9px; border-radius: 12px; background: var(--gold); color: var(--ink); font-size: 11.5px; font-weight: 700; letter-spacing: 1.2px; display: inline-flex; align-items: center; }
.qs { background: #fff; border-radius: 22px; box-shadow: inset 0 0 0 1px var(--rule); overflow: hidden; }
.qs details { padding: 16px 18px; }
.qs details + details { border-top: 1px solid var(--rule); }
.qs summary { list-style: none; display: flex; align-items: center; gap: 12px; cursor: pointer; min-height: 28px; }
.qs summary::-webkit-details-marker { display: none; }
.qs summary .q { flex: 1; font-size: 17px; font-weight: 700; color: var(--ink); }
.qs summary .ms { font-size: 22px; color: var(--soft); }
.qs summary .shut, .qs details[open] summary .opened { display: none; }
.qs details[open] summary .shut { display: inline-block; }
.qs details p { font-size: 15.5px; line-height: 1.45; color: var(--soft); margin-top: 8px; }
.qs a { color: var(--teal); }
.priceq .block + .block { padding-top: 48px; }
@media (min-width: 900px) {
  .plans { flex-direction: row; }
  .qs details { padding: 18px 24px; }
  .priceq { display: flex; align-items: flex-start; gap: 48px; }
  .priceq .block { flex: 1; }
  .priceq .block + .block { padding-top: 0; }
}

/* ------------------------------------------------------------------ the closing ask */

/* The two beats, the chat and the stores: down a phone, the chat beside the rest on a computer. */
.closer { padding-top: 48px; }
.closer .in { display: grid; grid-template-areas: 'beat' 'chat' 'stores'; padding: 36px 20px 32px; }
.closer .beat { grid-area: beat; font-size: 34px; }
.closer .chat { grid-area: chat; width: 260px; margin-top: 22px; }
.closer .chat .bub .say { font-size: 16px; }
.closer .chat .me { font-size: 24px; }
.closer .stores { grid-area: stores; margin-top: 26px; }
@media (min-width: 900px) {
  .closer { padding-top: 80px; }
  .closer .in { grid-template-areas: 'beat chat' 'stores chat'; grid-template-columns: 1fr 300px; column-gap: 56px; align-items: center; padding: 56px var(--inset); }
  .closer .beat { font-size: 52px; align-self: end; }
  .closer .stores { margin-top: 28px; align-self: start; }
  .closer .chat { width: 300px; margin-top: 0; }
  .closer .chat .bub .say { font-size: 18px; }
  .closer .chat .me { font-size: 30px; }
}

/* Small helpers the pages share. */
.wide-only { display: none; }
@media (min-width: 900px) { .wide-only { display: revert; } .btn.wide-only { display: inline-flex; } }
.js-only { display: none !important; }
.js .js-only { display: flex !important; }
.stack-narrow { flex-direction: column; }
.stack-narrow .btn { width: 100%; }
@media (min-width: 900px) { .stack-narrow { flex-direction: row; } .stack-narrow .btn { width: auto; } }
.how-h { margin-bottom: 20px; }
.howgoes .lede { margin-bottom: 28px; }
.bh { margin-bottom: 18px; }
@media (min-width: 900px) { .how-h { margin-bottom: 28px; } .howgoes .how-h { margin-bottom: 0; } .bh { margin-bottom: 24px; } }
.nav-link[data-on] { font-weight: 800; color: var(--ink); box-shadow: inset 0 -3px var(--teal); }

/* ------------------------------------------------------------------ the foot */

.foot-wrap { padding: 48px 10px 10px; }
.foot { background: var(--deeper); border-radius: 28px; padding: 36px 20px 28px; color: var(--paper); }
.foot .brand p { font-size: 15px; line-height: 1.45; color: var(--on-deep-soft); max-width: 280px; margin: 14px 0; }
.foot .cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 16px; margin-top: 28px; }
.foot .cols div { display: flex; flex-direction: column; gap: 10px; }
.foot .cols b { font-size: 14px; font-weight: 700; color: var(--paper); }
.foot .cols a { font-size: 15px; color: var(--on-deep-soft); text-decoration: none; min-height: 24px; }
.foot .cols a:hover { color: var(--paper); text-decoration: underline; }
.foot .co { margin-top: 28px; font-size: 13.5px; color: var(--on-deep-soft); }
@media (min-width: 900px) {
  .foot-wrap { padding: 80px 24px 24px; }
  .foot { border-radius: 40px; padding: 56px max(64px, calc(var(--inset) + 24px)) 32px; }
  .foot .up { display: flex; align-items: flex-start; gap: 40px; }
  .foot .brand { width: 300px; }
  .foot .cols { display: flex; gap: 40px; margin: 0 0 0 auto; }
  .foot .cols div { width: 200px; }
  .foot .co { margin-top: 40px; padding-top: 18px; border-top: 1px solid rgba(251, 247, 240, .14); font-size: 14px; }
}

/* ------------------------------------------------------------------ Got a code? */

/* Opens over the page: from any "Got a code?" link (#code), and from /join with no code. With
   no script it is the :target; web.js adds focus and Escape. */
.codebox { display: none; position: fixed; inset: 0; z-index: 40; background: rgba(13, 23, 28, .45); align-items: center; justify-content: center; padding: 20px; }
.codebox:target, .codebox.open { display: flex; }
.code-js .codebox:target:not(.open) { display: none; }
.code-open { overflow: hidden; }
.codebox form { width: 100%; max-width: 420px; background: #fff; border-radius: 24px; padding: 22px 20px 20px; box-shadow: 0 16px 40px rgba(27, 42, 50, .2); }
.codebox .top { display: flex; align-items: center; justify-content: space-between; }
.codebox label { font-size: 22px; font-weight: 800; color: var(--ink); }
.codebox .x { width: 44px; height: 44px; border-radius: 22px; display: flex; align-items: center; justify-content: center; color: var(--ink); text-decoration: none; }
.codebox .x .ms { font-size: 24px; }
.codebox .help { font-size: 15.5px; color: var(--soft); margin: 4px 0 14px; }
.codebox .row { display: flex; gap: 10px; }
.codebox input { flex: 1; min-width: 0; height: 52px; border: 1.5px solid var(--rule); border-radius: 14px; padding: 0 14px; font-size: 19px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--ink); background: var(--sand); }
.codebox input[aria-invalid="true"] { border-color: #B3261E; }
.codebox .err { font-size: 15px; color: #B3261E; margin-top: 8px; }
.codebox .err:empty { display: none; }

/* The same form in the home page's hero, typed in place (the canvas's codeField()). On the deep
   band, so its error is the light red that reads on teal, not the box's #B3261E. */
.herocode { margin-top: 16px; max-width: 335px; background: rgba(251, 247, 240, .08); box-shadow: inset 0 0 0 1.5px rgba(251, 247, 240, .20); border-radius: 20px; padding: 14px 14px 14px 16px; }
.herocode label { display: block; font-size: 17px; font-weight: 800; color: var(--paper); }
.herocode .help { font-size: 14.5px; color: var(--on-deep-soft); margin-top: 2px; }
.herocode .row { display: flex; gap: 10px; margin-top: 12px; }
.herocode input { flex: 1; min-width: 0; height: 52px; border: 0; border-radius: 14px; padding: 0 14px; font-size: 19px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--ink); background: var(--paper); }
.herocode input::placeholder { color: var(--soft); opacity: 1; }
.herocode input[aria-invalid="true"] { box-shadow: inset 0 0 0 2px #FFB4AB; }
.herocode .btn { flex: none; padding: 0 26px; }
.herocode .err { font-size: 15px; color: #FFB4AB; margin-top: 8px; }
.herocode .err:empty { display: none; }
@media (min-width: 900px) { .herocode { max-width: 460px; } }

/* ------------------------------------------------------------------ the plan-for pages */

/* The template, as the chat's pinned message. */
.pinned { background: #fff; border-radius: 24px; box-shadow: 0 2px 14px rgba(27, 42, 50, .08); overflow: hidden; }
.pinned .pin { display: flex; align-items: center; gap: 8px; padding: 12px 18px; background: var(--sand2); font-size: 14px; font-weight: 700; color: var(--ink); }
.pinned .pin .ms { font-size: 18px; color: var(--teal); }
.tpl { padding: 20px; }
.tpl h2 { font-size: 20px; font-weight: 700; line-height: 1.25; letter-spacing: -.2px; }
.tpl .sub { font-size: 15.5px; line-height: 1.45; color: var(--soft); margin-top: 6px; }
.tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 12px; }
.tabs button { height: 44px; padding: 0 16px; border-radius: 22px; font-size: 15px; font-weight: 700; background: #fff; color: var(--ink); border: 1.5px solid var(--rule); cursor: pointer; }
.tabs button[aria-selected="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.tabs { display: none; }
.js .tabs { display: flex; }
.box { background: var(--sand); border: 1px solid var(--rule); border-radius: 14px; padding: 16px; font-size: 14px; line-height: 1.55; color: var(--ink); white-space: pre-wrap; margin: 16px 0 0; }
.js .tabs + .box { margin-top: 0; }
.box + .box { margin-top: 12px; }
.js .box[hidden] { display: none; }
.box b { font-weight: 700; }
.copy-btn { display: flex; align-items: center; justify-content: center; gap: 10px; height: 56px; width: 100%; border-radius: 28px; border: 0; background: var(--deep); color: #fff; font-size: 17px; font-weight: 700; margin-top: 16px; cursor: pointer; }
.copy-btn .ms { font-size: 20px; }
.no-js-only { display: none; }
.tpl .then { font-size: 15.5px; line-height: 1.45; color: var(--soft); margin-top: 16px; }
.tpl .then b { color: var(--ink); }
.tplhow .howgoes { margin-top: 44px; }
@media (min-width: 900px) {
  .tplhow { display: flex; align-items: flex-start; gap: 56px; }
  .tplhow .pinned { width: 560px; flex: none; }
  .tplhow .howgoes { flex: 1; margin-top: 0; padding-top: 8px; }
  .tpl { padding: 24px; }
  .tpl h2 { font-size: 22px; }
  .box { font-size: 15px; }
}

/* The weekend, in the group chat: the chat down the left as one thread, the app's answer to
   each pair beside it in a teal panel, its screen rising from the panel's foot. On a phone each
   pair and its answer are one card. */
.thread .group { display: flex; align-items: center; gap: 10px; padding: 0 0 14px; }
.thread .group .av { background: #fff; }
.thread .item { border-radius: 24px; overflow: hidden; }
.thread .item + .item { margin-top: 14px; }
.thread .pair { background: var(--sand2); padding: 16px 16px 18px; display: flex; flex-direction: column; gap: 6px; }
.thread .pair .at { font-size: 11.5px; font-weight: 700; letter-spacing: 1px; color: var(--soft); margin-bottom: 2px; }
.thread .pair .bub { max-width: 290px; }
.thread .pair .bub .say { font-size: 15.5px; }
.thread .answer { display: flex; align-items: stretch; gap: 14px; background: var(--deep); padding: 0 16px; overflow: hidden; }
.thread .answer .words { flex: 1; min-width: 0; padding: 22px 0; align-self: center; }
.thread .answer .beat { font-size: 24px; }
.thread .answer .para { font-size: 15px; color: var(--on-deep); margin-top: 8px; }
.thread .answer .shot { display: flex; align-items: flex-end; padding-top: 20px; }
.thread .answer .crop { height: 160px; }
.thread .answer .phone { --w: 108px; box-shadow: inset 0 0 0 2px #34444C, 0 28px 56px rgba(13, 23, 28, .4); }
@media (min-width: 900px) {
  .thread .rows { position: relative; padding: 24px 0; }
  .thread .rows::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 456px; background: var(--sand2); border-radius: 32px; }
  .thread .group { position: relative; padding: 0 28px 18px; }
  .thread .item { position: relative; display: flex; align-items: center; gap: 40px; border-radius: 0; overflow: visible; }
  .thread .item + .item { margin-top: 20px; }
  .thread .pair { width: 456px; flex: none; background: none; padding: 0 28px; }
  .thread .pair .bub { max-width: 330px; }
  .thread .answer { flex: 1; min-width: 0; border-radius: 28px; gap: 24px; padding: 0 28px; }
  .thread .answer .words { padding: 28px 0; }
  .thread .answer .beat { font-size: 30px; }
  .thread .answer .para { font-size: 16px; }
  .thread .answer .shot { padding-top: 26px; }
  .thread .answer .crop { height: 200px; }
  .thread .answer .phone { --w: 150px; }
}

/* Before you send the code, and the questions: level with each other on a computer. */
.side-head h2 { font-size: 30px; font-weight: 800; line-height: 1.05; letter-spacing: -.03em; }
.side-head p { font-size: 17px; line-height: 1.45; color: var(--soft); margin: 8px 0 18px; }
.side-head p a { color: inherit; }
.ticks { background: #fff; border-radius: 22px; box-shadow: inset 0 0 0 1px var(--rule); overflow: hidden; display: flex; flex-direction: column; height: 100%; }
.ticks li { flex: 1; display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 8px 18px; font-size: 16px; line-height: 1.4; color: var(--ink); }
.ticks li + li { border-top: 1px solid var(--rule); }
.ticks .ms { font-size: 22px; color: var(--teal); }
.prep .faqcol { padding-top: 48px; }
@media (min-width: 900px) {
  .prep { display: grid; grid-template-columns: 5fr 7fr; grid-template-rows: auto 1fr; column-gap: 32px; }
  .prep .listcol, .prep .faqcol { display: contents; }
  .prep .listcol .side-head { grid-column: 1; grid-row: 1; }
  .prep .listcol .ticks { grid-column: 1; grid-row: 2; }
  .prep .faqcol .side-head { grid-column: 2; grid-row: 1; }
  .prep .faqcol .qs { grid-column: 2; grid-row: 2; }
  .side-head h2 { font-size: 36px; }
  .side-head p { font-size: 18px; margin-bottom: 24px; }
  .ticks li { min-height: 52px; padding: 8px 24px; }
}

/* ------------------------------------------------------------------ the compare page */

/* Trello #103 item 15, the canvas boards "AB The blend · Compare": the group chat beside the app
   in the hero, then the questions a group asks on the day. That is one table: a grid on a
   computer, and on a phone one card per question, ours first in teal and the others under it,
   each cell naming its column (data-col), so the words are on the page once. */
.cmp-hero .copy { padding: 28px 20px 0; }
.cmp-hero .beat { font-size: 34px; }
.cmp-hero .intro { font-size: 17px; line-height: 1.45; color: var(--on-deep); margin-top: 14px; max-width: 520px; }
.cmp-hero .pair { padding: 28px 6px 32px; }
.cmp-hero .pair > div { display: flex; justify-content: center; align-items: flex-start; gap: 12px; }
.cmp-hero figure { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.cmp-hero figcaption { font-size: 13.5px; font-weight: 700; color: var(--on-deep); }
.cmp-hero .app figcaption { font-weight: 800; color: var(--gold); }
.cmp-hero .phone { --w: 152px; box-shadow: inset 0 0 0 2px #34444C, 0 28px 56px rgba(13, 23, 28, .4); }
/* The chat drawn at 300 x 620 and scaled (--s), as the board draws it. */
.chatphone { --s: .533; width: calc(316px * var(--s)); height: calc(636px * var(--s)); flex: none; }
.chatphone .frame { width: 316px; padding: 8px; background: #0D171C; border-radius: 48px; transform: scale(var(--s)); transform-origin: 0 0; }
.chatphone .scr { width: 300px; height: 620px; background: #EFE9DF; border-radius: 40px; overflow: hidden; padding: 52px 14px 0; }
.chatphone .name { margin: 0 0 12px; text-align: center; font-size: 15px; font-weight: 800; color: var(--ink); }
.chatphone .chat { gap: 8px; }
.chatphone .bub { max-width: 230px; }
.chatphone .bub .say { font-size: 14.5px; }
@media (max-width: 374px) {
  .cmp-hero .pair > div { gap: 10px; }
  .chatphone { --s: .44; }
  .cmp-hero .phone { --w: 126px; }
}

.cmp-card .checked { font-size: 14px; line-height: 1.45; color: var(--soft); margin-top: 14px; }
.cmp-card .title { margin-bottom: 18px; }
.cmp, .cmp thead, .cmp tbody, .cmp tr, .cmp th, .cmp td { display: block; }
.cmp { border-collapse: separate; border-spacing: 0; }
.cmp thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.cmp tr { display: flex; flex-direction: column; background: #fff; border-radius: 20px; box-shadow: inset 0 0 0 1px var(--rule); overflow: hidden; }
.cmp tr + tr { margin-top: 12px; }
.cmp tbody th { order: 0; padding: 14px 16px 12px; font-size: 17px; font-weight: 800; text-align: left; color: var(--ink); }
.cmp td { order: 2; padding: 4px 16px 0; font-size: 14.5px; line-height: 1.35; color: var(--soft); }
.cmp td::before { content: attr(data-col) ": "; font-weight: 700; color: var(--ink); }
.cmp td:nth-child(2) { padding-top: 10px; }
.cmp td:nth-last-child(2) { padding-bottom: 14px; }
.cmp td.ours { order: 1; position: relative; padding: 12px 16px 12px 42px; background: var(--teal); color: var(--paper); font-size: 15px; font-weight: 700; }
.cmp td.ours::before { color: var(--paper); }
.cmp td.ours .ms { position: absolute; left: 16px; top: 12px; font-size: 18px; color: var(--gold); }

.good { display: flex; flex-direction: column; gap: 12px; }
.good li { flex: 1; min-width: 0; background: #fff; border-radius: 20px; box-shadow: inset 0 0 0 1px var(--rule); padding: 18px; }
.good h3 { font-size: 17px; font-weight: 800; color: var(--ink); }
.good p { font-size: 15px; line-height: 1.45; color: var(--soft); margin-top: 6px; }
.notfor { background: var(--sand2); border-radius: 22px; padding: 18px; }
.notfor h2 { font-size: 19px; font-weight: 800; color: var(--ink); }
.notfor li { display: flex; align-items: flex-start; gap: 10px; margin-top: 10px; font-size: 15.5px; line-height: 1.4; color: var(--ink); }
.notfor li .ms { font-size: 18px; color: var(--soft); padding-top: 2px; }
.cmp-end .qs { margin-top: 16px; }
@media (min-width: 900px) {
  .cmp-hero > .copy { padding: 0; }
  .cmp-hero { display: flex; align-items: center; gap: 48px; padding: 56px var(--inset); }
  .cmp-hero .copy { flex: 1; min-width: 0; }
  .cmp-hero .beat { font-size: 56px; }
  .cmp-hero .intro { font-size: 19px; margin-top: 18px; }
  .cmp-hero .pair { padding: 0; flex: none; }
  .cmp-hero .pair > div { gap: 32px; }
  .cmp-hero figcaption { font-size: 15.5px; }
  .cmp-hero .phone { --w: 222px; }
  .chatphone { --s: .767; }

  .cmp-card { background: #fff; border-radius: 32px; padding: 36px 36px 28px; box-shadow: var(--lift); }
  .cmp-card .title { font-size: 34px; margin-bottom: 22px; }
  .cmp-card .checked { margin-top: 16px; }
  .cmp { display: table; width: 100%; table-layout: fixed; }
  .cmp thead { display: table-header-group; position: static; width: auto; height: auto; overflow: visible; clip: auto; }
  .cmp tbody { display: table-row-group; }
  .cmp tr { display: table-row; background: none; border-radius: 0; box-shadow: none; overflow: visible; }
  .cmp th, .cmp td { display: table-cell; vertical-align: top; text-align: left; }
  /* The empty corner over the questions: no rule of its own (Toby, 26 Oct: a stray line above
     the header, from the cells' border-top below). */
  .cmp thead td { width: 17%; border-top: 0; padding: 0; }
  .cmp thead th { width: 15.5%; padding: 16px 14px 14px; font-size: 15px; font-weight: 800; color: var(--soft); vertical-align: bottom; }
  .cmp thead th.ours { width: 21%; background: var(--teal); color: var(--paper); border-radius: 18px 18px 0 0; }
  .cmp thead th.ours img { display: inline-block; width: 26px; height: 26px; border-radius: 6px; vertical-align: -7px; margin-right: 8px; }
  .cmp tbody th { padding: 14px 14px 14px 0; font-size: 16px; border-top: 1px solid var(--rule); }
  .cmp td, .cmp td:nth-child(2), .cmp td:nth-last-child(2) { padding: 14px; font-size: 15px; color: var(--ink); border-top: 1px solid var(--rule); }
  .cmp td::before { content: none; }
  .cmp td.ours { padding: 14px 14px 14px 40px; border-top-color: rgba(251, 247, 240, .18); }
  .cmp td.ours .ms { left: 14px; top: 15px; }
  .cmp tr:last-child td.ours { border-radius: 0 0 18px 18px; }

  .good { flex-direction: row; }
  .cmp-end { display: flex; align-items: flex-start; gap: 24px; }
  .cmp-end > * { flex: 1; min-width: 0; }
  .cmp-end .qs { margin-top: 0; }
  .notfor { padding: 24px; }
}
@media (min-width: 900px) and (max-width: 1199px) {
  .cmp-hero { gap: 32px; }
  .cmp-hero .beat { font-size: 44px; }
  .cmp-hero .pair > div { gap: 20px; }
  .chatphone { --s: .6; }
  .cmp-hero .phone { --w: 172px; }
  .cmp-card { padding: 28px 24px 22px; }
  .cmp th, .cmp td, .cmp td:nth-child(2), .cmp td:nth-last-child(2) { font-size: 14px; }
  .cmp td.ours { padding-left: 36px; }
  .cmp td.ours .ms { left: 12px; }
  .good { display: grid; grid-template-columns: 1fr 1fr; }
}

/* ------------------------------------------------------------------ 600 to 1199: the in-between widths */

/* A wide phone or a small tablet (600 to 899): the phone layout, with the chat cards two across
   so a card's picture is never drawn wider than it was made. */
@media (min-width: 600px) and (max-width: 899px) {
  .asks { grid-template-columns: 1fr 1fr; }
  .askcard picture { max-width: 400px; }
  .family { max-width: 520px; }
  .thread .item { max-width: 640px; }
}

/* 900 to 1199 (a small laptop, an upright monitor, a tablet on its side): the computer layout,
   drawn smaller so its fixed columns fit. */
@media (min-width: 900px) and (max-width: 1199px) {
  .bar .in { gap: 20px; }
  .bar .links, .bar .right { gap: 20px; }
  .hero .copy { width: calc(100% - 500px); }
  .hero .beat { font-size: 52px; }
  .plan-hero .beat { font-size: 40px; }
  .hero .stage { width: 480px; }
  .hero .stage .chat { width: 230px; top: 120px; }
  .hero .stage .chat .bub { max-width: 230px; }
  .hero .stage .chat .bub .say { font-size: 15.5px; }
  .hero .stage .chat .me { font-size: 24px; }
  .hero .stage .phone { left: 250px; top: 150px; --w: 196px; }
  .plan-hero .stage .chat { left: 10px; top: 90px; width: 230px; }
  .plan-hero .stage .chat .me { font-size: 24px; }
  .plan-hero .stage .phone { left: 252px; top: 70px; --w: 200px; }
  .film { left: 52%; }
  .scrim { background: linear-gradient(90deg, var(--deep) 44%, rgba(22, 58, 69, .80) 58%, rgba(22, 58, 69, .62) 100%); }
  .title { font-size: 38px; }
  .story .in { gap: 40px; }
  .story .words .beat { font-size: 46px; }
  .stat .n { font-size: 84px; }
  .family { width: 360px; }
  /* The chat cards two across, each drawn as on a phone (the picture under the words), and the
     price above the questions. */
  .askcard { display: block; padding: 20px 18px 18px; }
  .askcard .bub { max-width: 290px; }
  .askcard .beat { font-size: 28px; }
  .askcard picture { margin-top: 18px; width: auto; max-width: 400px; }
  .askcard picture img { width: 100%; }
  .priceq { display: block; }
  .priceq .block + .block { padding-top: 56px; }
  .tplhow { gap: 36px; }
  .tplhow .pinned { width: 54%; }
  .thread .rows::before { width: 360px; }
  .thread .pair { width: 360px; padding: 0 22px; }
  .thread .pair .bub { max-width: 300px; }
  .thread .item { gap: 28px; }
  .thread .group { padding: 0 22px 18px; }
  .thread .answer .beat { font-size: 26px; }
  .thread .answer .crop { height: 180px; }
  .thread .answer .phone { --w: 130px; }
  .side-head h2 { font-size: 32px; }
  .foot .up { flex-direction: column; }
  .foot .brand { width: auto; }
  .foot .cols { margin: 32px 0 0; width: 100%; }
  .foot .cols div { width: auto; flex: 1; }
  .closer .beat { font-size: 44px; }
}

/* ------------------------------------------------------------------ the pages a link opens */

/* Trello #106, the canvas's rows L (src/_opt-links-lib.js): /join, /reset, the 404, a gone data
   copy and the reading pages. A short page is one deep panel for its one job, the job's icon on a
   gold mark above its heading, white cards on the panel, gold for the one thing to do. The page
   is at least the window's height, its footer at the foot. */
body.link .page { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
body.link main { flex: 1 0 auto; }
.job { margin-top: 8px; }
.job > .in { padding: 28px 20px 32px; }
.job h1 { font-weight: 800; font-size: 34px; line-height: 1.04; letter-spacing: -.03em; color: var(--paper); overflow-wrap: anywhere; }
.job .lead { font-size: 17px; line-height: 1.45; color: var(--on-deep); margin-top: 12px; }
.job .lead b { color: var(--paper); overflow-wrap: anywhere; }
.job .note, .invite .note { font-size: 16.5px; line-height: 1.45; color: var(--on-deep); }
.job .note .mono, .invite .note .mono { font-weight: 700; letter-spacing: 2px; color: var(--paper); }
.job .rule { height: 1px; border: 0; background: rgba(251, 247, 240, .18); margin: 24px 0 20px; }
.job .act { margin-top: 26px; }
.job .btn.full, .job .stores .btn { width: 100%; height: 56px; border-radius: 28px; font-size: 17px; }
.job .stores { flex-direction: column; margin-top: 12px; }
.mark { width: 56px; height: 56px; border-radius: 28px; background: var(--gold); display: flex; align-items: center; justify-content: center; margin-bottom: 20px; }
.mark .ms { font-size: 30px; color: var(--ink); }
@media (min-width: 900px) {
  .job { margin-top: 24px; }
  .job > .in { width: min(600px, calc(100% - 80px)); margin: 0 auto; padding: 56px 0 60px; }
  .job.slim > .in { width: min(520px, calc(100% - 80px)); }
  .job h1 { font-size: 48px; }
  .job .lead { font-size: 19px; }
  .job .stores { flex-direction: row; }
  .job .stores .btn { flex: 1; width: auto; padding: 0 16px; }
}

/* The one-line footer of a page that finishes a job and sends you back to the app. */
.slimfoot { display: flex; flex-wrap: wrap; align-items: center; gap: 0 20px; padding: 28px 20px 20px; font-size: 15px; color: var(--soft); }
.slimfoot a { color: var(--soft); min-height: 44px; display: inline-flex; align-items: center; }
.slimfoot a:hover { color: var(--ink); }
.slimfoot .co { margin-left: auto; }
@media (min-width: 900px) { .slimfoot { gap: 0 28px; padding: 40px var(--side) 28px; } }

/* A white card on the panel: /reset's form. */
.job .form { background: #fff; border-radius: 24px; padding: 20px 18px 18px; margin-top: 24px; }
.job .form label { display: block; font-size: 15px; font-weight: 700; color: var(--ink); }
.job .form .box { display: flex; align-items: center; height: 56px; margin-top: 8px; border-radius: 16px; box-shadow: inset 0 0 0 1.5px var(--rule); padding: 0 6px 0 16px; background: #fff; }
.job .form .box:focus-within { box-shadow: inset 0 0 0 2px var(--teal); }
.job .form .box:has(input[aria-invalid="true"]) { box-shadow: inset 0 0 0 2px #B3261E; }
.job .form .box input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; color: var(--ink); font: 500 18px 'Bricolage Grotesque', Roboto, system-ui, sans-serif; outline: none; }
.job .form .eye { min-height: 44px; padding: 0 12px; border: 0; background: transparent; font-size: 16px; font-weight: 700; color: var(--teal); cursor: pointer; }
.job .form .hint { font-size: 15px; color: var(--soft); margin-top: 8px; }
.job .form .err { font-size: 15px; line-height: 1.45; color: #B3261E; margin-top: 8px; }
.job .form .err:empty { display: none; }
/* The four parts of a new password, ticked off as they are typed (Trello #164; the app's
   PasswordRules, canvas kPwRules): an empty ring, then a teal disc with a white tick. */
.job .form .rules { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; font-size: 15px; color: var(--soft); }
.job .form .rules li { display: flex; align-items: center; gap: 8px; }
.job .form .rules li::before { content: ''; flex: none; width: 16px; height: 16px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--soft); }
.job .form .rules li.met { color: var(--ink); }
.job .form .rules li.met::before { box-shadow: none; background: var(--teal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.3l2.3 2.3 4.7-4.9' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat; }
/* Confirm new password (Trello #173; the app's PasswordMatchLine, canvas kPwMatch): a tick once
   the two are the same, a red line as soon as the second has gone wrong, nothing while on its way. */
.job .form .again { margin-top: 18px; }
.job .form .rules[hidden] { display: none; }
.job .form .btn { margin-top: 18px; }
.job .form .btn[disabled] { opacity: .6; cursor: default; }
[data-state][hidden] { display: none !important; }

/* 404's ways on: white rows, as the home page's kind rows. */
.ways { display: flex; flex-direction: column; gap: 10px; margin-top: 24px; }
.ways a { display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 12px 16px; background: #fff; border-radius: 20px; text-decoration: none; }
.ways .tile { width: 40px; height: 40px; border-radius: 20px; background: var(--deep); display: flex; align-items: center; justify-content: center; flex: none; }
.ways .tile .ms { font-size: 22px; color: var(--gold); }
.ways b { flex: 1; font-size: 17px; font-weight: 800; color: var(--ink); }
.ways .go { font-size: 22px; color: var(--soft); transition: transform .2s ease; }
.ways a:hover .go { transform: translateX(3px); }

/* /join: who invited you, the app's own found card, the store, the three steps, the code. */
.invite > .in { padding: 24px 16px 28px; }
.invite .by { font-size: 17px; color: var(--on-deep); margin-bottom: 14px; }
.invite .by b { color: var(--paper); }
.invite .stores { margin-top: 24px; }
.invite .stores .btn { height: 56px; border-radius: 28px; font-size: 17px; }
.invite .jsteps { margin-top: 26px; }
.invite .soonnote { margin-top: 18px; }
.found { background: #fff; border-radius: 24px; padding: 14px 16px 16px; overflow: hidden; box-shadow: 0 18px 40px rgba(13, 23, 28, .28); color: var(--ink); }
.found .cover { display: block; width: calc(100% + 32px); max-width: none; height: 150px; margin: -14px -16px 14px; object-fit: cover; background: var(--sand2); }
.found .chip { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 11px 0 9px; border-radius: 16px; white-space: nowrap; }
.found .ms.o { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; }
.found .chip .ms { font-size: 16px; }
.found .chip .u { font: 700 13px/1 'JetBrains Mono', ui-monospace, monospace; letter-spacing: 1.6px; }
.found .chip.trip, .found .datetile.trip { background: #E8F1E4; color: #33702F; }
.found .chip.event, .found .datetile.event { background: #F3E7F0; color: #7E3A6E; }
.found .chip.schedule, .found .datetile.schedule { background: #E8EAF9; color: #26409B; }
.found .head { display: flex; align-items: flex-start; gap: 14px; margin-top: 12px; }
.found .datetile { width: 62px; flex: none; border-radius: 14px; padding: 8px 0; min-height: 68px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.found .datetile .klab { font-size: 12px; color: var(--soft); }
.found .datetile .klab.m { color: inherit; }
.found .datetile .d { font-size: 26px; font-weight: 800; line-height: 1.1; color: var(--ink); font-variant-numeric: tabular-nums; }
.found .datetile .ms { font-size: 24px; }
.found .name { flex: 1; min-width: 0; }
.found .kt { font-size: 21px; font-weight: 700; line-height: 1.25; letter-spacing: -.2px; overflow-wrap: anywhere; }
.found .place { display: flex; align-items: flex-start; gap: 4px; margin-top: 4px; font-size: 15px; line-height: 1.45; color: var(--soft); overflow-wrap: anywhere; }
.found .place .ms { font-size: 16px; margin-top: 2px; }
.found .when { margin-top: 12px; font-size: 15.5px; line-height: 1.45; font-weight: 600; }
.found .who { font-size: 15px; line-height: 1.45; color: var(--soft); }
.found .head + .who { margin-top: 12px; }
.found hr { height: 1px; border: 0; background: var(--rule); margin: 12px 0; }
.klab { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 13px; line-height: 1.3; font-weight: 600; letter-spacing: 1.6px; text-transform: uppercase; color: var(--soft); }
.found .preview { margin-top: 10px; }
.found .preview li { display: flex; gap: 10px; padding-bottom: 10px; }
.found .preview li.last { padding-bottom: 0; }
.found .dotline { position: relative; width: 12px; flex: none; }
.found .dotline::before { content: ''; position: absolute; left: 5px; top: 0; bottom: -10px; width: 2px; background: var(--rule); }
.found li.first .dotline::before { top: 10px; }
.found li.last .dotline::before { bottom: auto; height: 10px; }
.found li.first.last .dotline::before { display: none; }
.found .dotline::after { content: ''; position: absolute; left: 1px; top: 5px; width: 10px; height: 10px; border-radius: 50%; background: currentColor; }
.found .time { width: 52px; flex: none; font-size: 15px; line-height: 1.35; font-weight: 700; }
.found .what { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.found .title { font-size: 15.5px; line-height: 1.3; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.found .loc { font-size: 15px; line-height: 1.3; color: var(--soft); overflow-wrap: anywhere; }
.t-flight { color: #26409B; } .t-transfer { color: #5B4B8A; } .t-stay { color: #33702F; }
.t-activity { color: #7E3A6E; } .t-dinner { color: #6E2F07; } .t-free-day { color: #4A535C; }
/* The three steps, down the panel: the one to do now on the gold ring, the rest hollow. */
.jsteps li { position: relative; display: flex; gap: 14px; align-items: flex-start; padding-bottom: 16px; }
.jsteps li:last-child { padding-bottom: 0; }
.jsteps li::before { content: ''; position: absolute; left: 10px; top: 14px; bottom: -14px; width: 2px; background: rgba(251, 247, 240, .25); }
.jsteps li:last-child::before { display: none; }
.jsteps .mk { position: relative; width: 22px; height: 22px; flex: none; display: flex; align-items: center; justify-content: center; }
.jsteps .mk::after { content: ''; width: 14px; height: 14px; border-radius: 50%; box-sizing: border-box; border: 2px solid rgba(251, 247, 240, .45); background: var(--deep); }
.jsteps .now .mk::after { width: 22px; height: 22px; border: 4px solid var(--gold); }
.jsteps p { font-size: 17px; line-height: 1.35; font-weight: 500; color: var(--on-deep); }
.jsteps .now p { font-weight: 800; color: var(--paper); }
/* "If it asks, the code is", with Copy beside it. */
.codeline { display: flex; align-items: center; gap: 10px; margin-top: 24px; padding: 12px 8px 12px 16px; border-radius: 18px; background: rgba(251, 247, 240, .08); box-shadow: inset 0 0 0 1.5px rgba(251, 247, 240, .20); }
.codeline p { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.codeline .lbl { font-size: 15px; color: var(--on-deep-soft); }
.codeline .code { font-size: 22px; font-weight: 700; letter-spacing: 3px; color: var(--paper); }
.codeline .tbtn { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 10px; border: 0; background: transparent; font-size: 16px; font-weight: 700; color: var(--gold); cursor: pointer; }
.codeline .tbtn .ms { font-size: 20px; }
/* A computer: the card on the left, the QR and both stores on the right. Narrower than 900 it
   stacks, the QR above the stores. */
.invite .split { display: flex; flex-direction: column; gap: 36px; }
.invite .onphone h2 { font-size: 30px; font-weight: 800; letter-spacing: -.02em; color: var(--paper); }
.invite .onphone .note { margin-top: 10px; }
.invite .qrrow { display: flex; flex-direction: column; gap: 20px; margin-top: 24px; }
.invite .qrbox { background: #fff; border-radius: 22px; padding: 14px; width: 224px; flex: none; }
.invite .qr { display: block; width: 196px; height: 196px; }
.invite .qrrow .stores { margin-top: 0; flex: 1; min-width: 0; }
.invite .onphone .typeit { margin-top: 22px; }
@media (min-width: 900px) {
  .invite > .in { padding: 48px var(--inset) 56px; }
  .invite.one > .in { width: min(520px, calc(100% - 80px)); margin: 0 auto; padding: 48px 0 56px; }
  .invite .by { font-size: 19px; }
  .invite .split { flex-direction: row; align-items: flex-start; gap: 64px; }
  .invite .left { width: 460px; flex: none; }
  .invite .onphone { flex: 1; min-width: 0; padding-top: 46px; }
  .invite .onphone h2 { font-size: 34px; }
  .invite .onphone .note { font-size: 17px; }
  .invite .qrrow { flex-direction: row; align-items: center; gap: 28px; }
  .invite .qrrow .stores { flex-direction: column; }
  .invite .qrrow .stores .btn { flex: none; width: 100%; }
}
/* "I have a new code" on a stopped invite opens the code form in place, with no script. */
.newcode { margin-top: 26px; }
.newcode > summary { list-style: none; }
.newcode > summary::-webkit-details-marker { display: none; }
.newcode[open] > summary { display: none; }
.newcode .herocode { max-width: none; margin-top: 0; }

/* The reading pages: the title in the panel, then the short version and the contents, then the
   whole text under them (Toby, 25 Oct: "we should still have all the text below ... it
   shouldn't be difficult for the users to read"). */
.readhead { margin-top: 8px; }
.readhead > .in { padding: 32px 20px 34px; }
.readhead h1 { font-weight: 800; font-size: 44px; line-height: 1.02; letter-spacing: -.035em; color: var(--paper); }
.readhead .updated { margin-top: 12px; font-size: 16px; color: var(--on-deep-soft); }
.readhead .lead { margin-top: 12px; font-size: 17px; line-height: 1.45; color: var(--on-deep); max-width: 640px; }
.reading { padding: 28px 20px 0; }
.reading .body { font-size: 17px; line-height: 1.6; color: #34444C; }
.reading .body > * { max-width: 760px; }
.reading .body > p + p, .reading .body > ul + p, .reading .body > p + ul { margin-top: 14px; }
.reading .body > ul li { position: relative; padding-left: 22px; }
.reading .body > ul li + li { margin-top: 8px; }
.reading .body > ul li::before { content: ''; position: absolute; left: 4px; top: .7em; width: 7px; height: 7px; border-radius: 50%; background: var(--teal); }
.reading .body > h2 { font-size: 26px; font-weight: 800; line-height: 1.15; letter-spacing: -.02em; margin: 44px 0 12px; scroll-margin-top: 80px; color: var(--ink); }
.reading .body strong, .reading .body b { font-weight: 700; color: var(--ink); }
.reading .body a { color: var(--teal); font-weight: 600; text-underline-offset: 2px; overflow-wrap: anywhere; }
.reading .card { background: #fff; border-radius: 24px; padding: 20px; box-shadow: var(--lift); color: var(--ink); }
.reading .card h2 { font-size: 21px; font-weight: 800; line-height: 1.2; letter-spacing: -.01em; color: var(--ink); }
.reading .summary li { display: flex; gap: 12px; align-items: flex-start; margin-top: 14px; font-size: 16px; line-height: 1.5; color: var(--ink); }
.reading .summary li::before { content: 'check'; font-family: 'Material Symbols Rounded'; font-feature-settings: 'liga'; font-size: 20px; line-height: 24px; color: var(--teal); flex: none; -webkit-font-smoothing: antialiased; }
.reading .toc { background: none; box-shadow: none; padding: 0; margin-top: 32px; }
.reading .toc h2 { margin-bottom: 12px; }
.reading .toc ol { display: grid; grid-template-columns: 1fr; gap: 8px; }
.reading .toc a { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 10px 14px 10px 16px; background: #fff; border-radius: 16px; text-decoration: none; font-size: 16px; font-weight: 700; line-height: 1.3; color: var(--ink); }
.reading .toc a::after { content: 'chevron_right'; font-family: 'Material Symbols Rounded'; font-feature-settings: 'liga'; font-weight: 400; font-size: 20px; color: var(--soft); margin-left: auto; flex: none; -webkit-font-smoothing: antialiased; }
.reading .toc a:hover { box-shadow: inset 0 0 0 1.5px var(--teal); }
.reading .reach { display: flex; flex-direction: column; gap: 16px; margin-bottom: 28px; }
.reading .reach .kt { font-size: 21px; font-weight: 800; color: var(--ink); }
.reading .reach .kb { font-size: 16px; line-height: 1.5; color: var(--soft); margin-top: 4px; }
.reading .reach .pill { display: inline-flex; align-items: center; justify-content: center; height: 52px; padding: 0 22px; border-radius: 26px; background: var(--teal); color: var(--paper); font-size: 16px; font-weight: 700; text-decoration: none; align-self: flex-start; }
@media (min-width: 900px) {
  .readhead { margin-top: 24px; }
  .readhead > .in { padding: 56px var(--inset) 60px; }
  .readhead h1 { font-size: 64px; }
  .readhead .lead { font-size: 19px; }
  .reading { padding: 40px var(--side) 0; }
  .reading .body { display: grid; grid-template-columns: 7fr 5fr; column-gap: 32px; align-items: start; }
  .reading .body > * { grid-column: 1 / -1; }
  .reading .body > .summary { grid-column: 1; grid-row: 1; padding: 28px 32px; border-radius: 28px; max-width: none; }
  .reading .body > .toc { grid-column: 2; grid-row: 1; margin-top: 0; max-width: none; }
  .reading .body > .toc + h2 { margin-top: 56px; }
  .reading .card h2 { font-size: 24px; }
  .reading .summary li { font-size: 16.5px; }
  .reading .body > h2 { font-size: 30px; margin-top: 52px; }
  .reading .reach { flex-direction: row; align-items: center; justify-content: space-between; padding: 24px 28px; }
  .reading .reach .pill { align-self: center; flex: none; }
}
@media (min-width: 900px) and (max-width: 1199px) {
  .reading .body { grid-template-columns: 1fr 1fr; }
  .invite .left { width: 400px; }
  .invite .split { gap: 40px; }
  .invite .qrrow { flex-direction: column; align-items: flex-start; }
  .invite .qrrow .stores { width: 100%; }
}