/* sametag.app - one stylesheet. No web fonts, no script, nothing loaded from elsewhere.
   Colours are the Daylight direction's tokens (docs/design-directions.md, web/prototype-daylight.html):
   plum, amber, sky, coral, mint on paper. Every interactive piece is CSS - radio buttons, check
   boxes, <details> - and every animation stops for anyone who asked their device for less motion. */

:root {
  --plum: #35193f;
  --plum-soft: #553367;
  --plum-deep: #23102b;
  --amber: #fbb417;
  --amber-soft: #fef4dd;
  --amber-ink: #7a5405;
  --sky: #58aeee;
  --sky-soft: #e7f3fd;
  --sky-ink: #1b6ca8;
  --coral: #f4736b;
  --coral-soft: #fdecea;
  --coral-ink: #a83a33;
  --mint: #4fc1a0;
  --mint-soft: #e4f7f1;
  --mint-ink: #1e7a61;
  --paper: #fbf8f5;
  --surface: #ffffff;
  --ink: #2a2230;
  --ink-2: #6c6174;
  --hairline: #e9e0e5;
  --link: var(--sky-ink);
  --on-plum: #d6c6df;
  --chosen-bg: var(--plum);
  --chosen-ink: #ffffff;
  --r-sm: 12px;
  --r-md: 20px;
  --r-lg: 26px;
  --shadow: 0 4px 18px rgba(74, 44, 86, .07);
  --shadow-lift: 0 14px 36px rgba(74, 44, 86, .15);
  --measure: 70ch;
  --font: ui-rounded, "SF Pro Rounded", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #160e1a;
    --surface: #21182a;
    --ink: #f4eef6;
    --ink-2: #b8acc2;
    --hairline: #33273d;
    --link: #8cc8f5;
    --amber-soft: rgba(251, 180, 23, .15);
    --amber-ink: #ffd36e;
    --sky-soft: rgba(88, 174, 238, .16);
    --sky-ink: #8cc8f5;
    --coral-soft: rgba(244, 115, 107, .16);
    --coral-ink: #ffa59f;
    --mint-soft: rgba(79, 193, 160, .16);
    --mint-ink: #7fdcc0;
    --shadow: 0 4px 18px rgba(0, 0, 0, .25);
    --shadow-lift: 0 14px 36px rgba(0, 0, 0, .4);
    /* Plum on near-black is too faint to read as chosen: the chosen chip turns light instead. */
    --chosen-bg: #f4eef6;
    --chosen-ink: #2a2230;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 17px/1.65 var(--font);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--link); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; border-radius: 6px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: -999px; top: 8px; z-index: 20;
  background: var(--surface); color: var(--ink); padding: 8px 14px; border-radius: 10px;
}
.skip:focus { left: 8px; }

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 22px; }

/* ------------------------------------------------------------------ plum bands and their glow */

.masthead {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--plum); color: #fff;
  border-radius: 0 0 36px 36px;
}
/* Daylight's amber glow in the top corner, a coral one below, a hint of sky - each wandering
   the band on a path you can watch. Every light has three animations with different periods:
   across (the `translate` property), up and down with a swell (`transform`), and a breath
   (`opacity`). Each axis eases to a stop at its ends, but never at the same moment as the
   other, so the light itself never stops: it traces a slow curve that does not repeat for
   minutes. Negative delays start each one partway along, already moving, rather than at
   rest in its corner. Only transform and opacity change, which every browser composites on
   the GPU: no repaint per frame, smooth on a phone, cheap on its battery. Travel across is in
   vw, so a narrow screen gets a proportionally shorter path; the band clips what wanders out.
   A browser without the individual `translate` property keeps the vertical drift alone. */
.masthead::before,
.masthead::after,
.glow {
  content: ""; position: absolute; z-index: -1; border-radius: 50%; pointer-events: none;
}
.masthead::before {
  width: 720px; height: 720px; top: -340px; right: -220px;
  background: radial-gradient(circle, rgba(251, 180, 23, .34), transparent 66%);
  animation: amber-across 24s ease-in-out -9s infinite alternate,
    amber-drift 15s ease-in-out -5s infinite alternate,
    breathe 8s ease-in-out infinite alternate;
}
.masthead::after {
  width: 640px; height: 640px; bottom: -380px; left: -220px;
  background: radial-gradient(circle, rgba(244, 115, 107, .28), transparent 66%);
  animation: coral-across 28s ease-in-out -13s infinite alternate,
    coral-drift 17s ease-in-out -3s infinite alternate,
    breathe 10s ease-in-out -4s infinite alternate;
}
.glow {
  width: 520px; height: 520px; top: 18%; left: 28%;
  background: radial-gradient(circle, rgba(88, 174, 238, .2), transparent 68%);
  animation: sky-across 20s ease-in-out -6s infinite alternate,
    sky-drift 13s ease-in-out -8s infinite alternate,
    breathe 7s ease-in-out -2s infinite alternate;
}
@keyframes amber-across { from { translate: 0 0; } to { translate: -40vw 0; } }
@keyframes amber-drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(0, 260px, 0) scale(1.18); }
}
@keyframes coral-across { from { translate: 0 0; } to { translate: 44vw 0; } }
@keyframes coral-drift {
  from { transform: translate3d(0, 0, 0) scale(.94); }
  to { transform: translate3d(0, -240px, 0) scale(1.12); }
}
@keyframes sky-across { from { translate: -16vw 0; } to { translate: 18vw 0; } }
@keyframes sky-drift {
  from { transform: translate3d(0, -80px, 0) scale(.9); }
  to { transform: translate3d(0, 110px, 0) scale(1.25); }
}
@keyframes breathe { from { opacity: 1; } to { opacity: .68; } }

.top .wrap {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 6px 18px; min-height: 68px; padding-top: 10px; padding-bottom: 10px;
}
.top nav { display: flex; flex-wrap: wrap; gap: 4px 22px; font-size: 15px; font-weight: 600; }
.top nav a { color: var(--on-plum); text-decoration: none; }
.top nav a:hover, .top nav a[aria-current="page"] { color: #fff; text-decoration: underline; }

.wordmark {
  font-weight: 800; letter-spacing: -.02em; font-size: 23px; color: #fff; text-decoration: none;
  white-space: nowrap;
}
.wordmark .c { color: var(--coral); }
.wordmark .a { color: var(--amber); }
.wordmark .s { color: var(--sky); }

/* ------------------------------------------------------------------ home hero */

.hero { text-align: center; padding: 64px 0 96px; }
.badge {
  display: inline-flex; align-items: center; gap: 10px; margin: 0 0 26px;
  padding: 8px 16px; border-radius: 999px; font-weight: 700; font-size: 15px; color: #fff;
  background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .22);
}
.badge .dot {
  width: 9px; height: 9px; border-radius: 50%; background: var(--amber);
  box-shadow: 0 0 0 0 rgba(251, 180, 23, .6); animation: pulse 2.4s ease-out infinite;
}
@keyframes pulse { 70%, 100% { box-shadow: 0 0 0 10px rgba(251, 180, 23, 0); } }

.hero h1 {
  font-size: clamp(40px, 7.4vw, 76px); line-height: 1.02; letter-spacing: -.04em;
  font-weight: 800; margin: 0 auto 22px; max-width: 15ch;
}
.gradient-text {
  background: linear-gradient(95deg, var(--amber) 0%, var(--coral) 52%, var(--sky) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.lede {
  font-size: clamp(18px, 2.3vw, 22px); color: var(--on-plum); max-width: 40ch;
  margin: 0 auto 30px; line-height: 1.55;
}
.hero .tags { justify-content: center; margin-bottom: 34px; }
.hero .tags li { animation: float 6s ease-in-out infinite; }
.hero .tags li:nth-child(2) { animation-delay: -1.2s; }
.hero .tags li:nth-child(3) { animation-delay: -2.4s; }
.hero .tags li:nth-child(4) { animation-delay: -3.6s; }
.hero .tags li:nth-child(5) { animation-delay: -4.8s; }
@keyframes float { 50% { transform: translateY(-6px); } }

.actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.btn {
  display: inline-flex; align-items: center; gap: 8px; padding: 13px 24px; border-radius: 999px;
  font-weight: 800; font-size: 16px; text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.btn-primary { background: var(--sky); color: #06263d; box-shadow: 0 8px 24px rgba(88, 174, 238, .35); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(88, 174, 238, .45); }
.btn-ghost { color: #fff; border: 1px solid rgba(255, 255, 255, .32); }
.btn-ghost:hover { background: rgba(255, 255, 255, .1); }

/* ------------------------------------------------------------------ hashtag chips */

.tags { display: flex; flex-wrap: wrap; gap: 9px; margin: 0; padding: 0; list-style: none; }
.tags li { display: inline-block; padding: 7px 16px; border-radius: 999px; font-weight: 700; font-size: 16px; }
/* Dark text on every accent: white fails on amber and mint. */
.t-amber { background: var(--amber); color: #3d2a02; }
.t-sky { background: var(--sky); color: #06263d; }
.t-coral { background: var(--coral); color: #4a100c; }
.t-mint { background: var(--mint); color: #0c3a2d; }

/* ------------------------------------------------------------------ sections */

section { padding: 84px 0; }
.eyebrow {
  margin: 0 0 10px; font-size: 13px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--coral-ink);
}
section h2 {
  font-size: clamp(30px, 4.2vw, 44px); letter-spacing: -.03em; line-height: 1.1; margin: 0 0 14px;
}
.section-lede { color: var(--ink-2); font-size: 19px; max-width: 52ch; margin: 0 0 40px; }
.center { text-align: center; }
.center .section-lede { margin-left: auto; margin-right: auto; }

/* Content rises in as it scrolls into view - where the browser can do that without script. */
@supports (animation-timeline: view()) {
  .reveal {
    animation: reveal linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 28%;
  }
}
@keyframes reveal { from { opacity: 0; transform: translateY(28px); } }

/* ------------------------------------------------------------------ try it */

.try { border: 0; margin: 0; padding: 0; min-width: 0; }
.try legend { font-weight: 800; font-size: 15px; letter-spacing: .02em; color: var(--ink-2); margin: 0 auto 14px; padding: 0; }
.picker { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 30px; }
.picker label {
  cursor: pointer; padding: 10px 20px; border-radius: 999px; font-weight: 800; font-size: 17px;
  background: var(--surface); color: var(--ink); border: 2px solid var(--hairline);
  transition: transform .15s ease, background-color .15s ease, border-color .15s ease;
  user-select: none;
}
.picker label:hover { transform: translateY(-2px); border-color: var(--ink-2); }

.panel {
  max-width: 780px; margin: 0 auto; background: var(--surface); border: 1px solid var(--hairline);
  border-radius: var(--r-lg); box-shadow: var(--shadow-lift); padding: 22px; text-align: left;
}
.panel-head { display: flex; justify-content: space-between; align-items: center; gap: 10px 12px; margin-bottom: 16px; flex-wrap: wrap; }
.count { margin: 0; font-weight: 800; display: none; }
.radius { font-size: 14px; font-weight: 700; color: var(--ink-2); background: var(--paper); padding: 5px 12px; border-radius: 999px; }
.feed { display: grid; gap: 14px; }
@media (min-width: 680px) { .feed { grid-template-columns: 1fr 1fr; } }
.post {
  display: none; border: 1px solid var(--hairline); border-radius: var(--r-md); padding: 16px;
  background: var(--paper); animation: rise .35s ease both;
}
.post + .post { animation-delay: .07s; }
/* Movement only: content never depends on an animation running to be visible. */
@keyframes rise { from { transform: translateY(12px); } }
.post-head { display: flex; gap: 11px; align-items: center; margin-bottom: 10px; }
.avatar {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; flex: none;
  font-weight: 800; font-size: 16px;
}
.av-sky { background: var(--sky-soft); color: var(--sky-ink); }
.av-coral { background: var(--coral-soft); color: var(--coral-ink); }
.av-mint { background: var(--mint-soft); color: var(--mint-ink); }
.av-amber { background: var(--amber-soft); color: var(--amber-ink); }
.who { display: grid; line-height: 1.3; }
.who strong { font-size: 16px; }
.who span { color: var(--ink-2); font-size: 14px; }
.post-text { margin: 0 0 12px; font-size: 17px; line-height: 1.45; }
.post .tags { margin-bottom: 14px; gap: 6px; }
.post .tags li { font-size: 13px; padding: 4px 11px; }
.send {
  display: block; text-align: center; cursor: pointer; padding: 10px; border-radius: var(--r-sm);
  font-weight: 800; background: var(--sky); color: #06263d;
  transition: background-color .2s ease, transform .15s ease; user-select: none;
}
.send:hover { transform: translateY(-1px); }
.send .done { display: none; }
.post input:checked + .send { background: var(--mint); color: #0c3a2d; }
.post input:checked + .send .idle { display: none; }
.post input:checked + .send .done { display: inline; }
.post input:focus-visible + .send { outline: 3px solid var(--amber); outline-offset: 3px; }
.note { margin: 14px 0 0; font-size: 14px; color: var(--ink-2); text-align: center; }

/* One rule per hashtag: the checked one lights its chip and shows its posts. Radio buttons and
   the sibling selector - every browser, no script. */
#t-coffee:checked ~ .picker [for="t-coffee"],
#t-chess:checked ~ .picker [for="t-chess"],
#t-running:checked ~ .picker [for="t-running"],
#t-espanol:checked ~ .picker [for="t-espanol"],
#t-piano:checked ~ .picker [for="t-piano"],
#t-climbing:checked ~ .picker [for="t-climbing"] {
  background: var(--chosen-bg); color: var(--chosen-ink); border-color: var(--chosen-bg);
  transform: translateY(-2px); box-shadow: 0 8px 20px rgba(53, 25, 63, .28);
}
#t-coffee:focus-visible ~ .picker [for="t-coffee"],
#t-chess:focus-visible ~ .picker [for="t-chess"],
#t-running:focus-visible ~ .picker [for="t-running"],
#t-espanol:focus-visible ~ .picker [for="t-espanol"],
#t-piano:focus-visible ~ .picker [for="t-piano"],
#t-climbing:focus-visible ~ .picker [for="t-climbing"] { outline: 3px solid var(--amber); outline-offset: 3px; }
#t-coffee:checked ~ .panel .coffee,
#t-chess:checked ~ .panel .chess,
#t-running:checked ~ .panel .running,
#t-espanol:checked ~ .panel .espanol,
#t-piano:checked ~ .panel .piano,
#t-climbing:checked ~ .panel .climbing { display: block; }

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

.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 30px; position: relative; }
@media (min-width: 900px) {
  .steps { grid-template-columns: repeat(4, 1fr); gap: 26px; }
  .steps::before {
    content: ""; position: absolute; top: 27px; left: 9%; right: 9%; height: 3px; border-radius: 3px;
    background: linear-gradient(90deg, var(--sky), var(--amber), var(--coral), var(--mint)); opacity: .55;
  }
}
.steps li { position: relative; }
.num {
  position: relative; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%;
  font-weight: 800; font-size: 22px; margin-bottom: 18px; box-shadow: 0 0 0 6px var(--paper);
}
.n-sky { background: var(--sky); color: #06263d; }
.n-amber { background: var(--amber); color: #3d2a02; }
.n-coral { background: var(--coral); color: #4a100c; }
.n-mint { background: var(--mint); color: #0c3a2d; }
.steps h3 { margin: 0 0 6px; font-size: 21px; letter-spacing: -.01em; }
.steps p { margin: 0; color: var(--ink-2); }

/* ------------------------------------------------------------------ cards */

.band { background: var(--surface); border-block: 1px solid var(--hairline); }
.grid { display: grid; gap: 18px; grid-template-columns: 1fr; margin: 0; padding: 0; list-style: none; }
@media (min-width: 640px) { .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } }
.card {
  background: var(--paper); border: 1px solid var(--hairline); border-radius: var(--r-lg);
  padding: 26px; transition: transform .2s ease, box-shadow .2s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.card h3 { margin: 0 0 8px; font-size: 20px; letter-spacing: -.01em; line-height: 1.3; }
.card p { margin: 0; color: var(--ink-2); font-size: 16.5px; }
.icon { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 15px; margin-bottom: 16px; }
.icon svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.i-sky { background: var(--sky-soft); color: var(--sky-ink); }
.i-coral { background: var(--coral-soft); color: var(--coral-ink); }
.i-mint { background: var(--mint-soft); color: var(--mint-ink); }
.i-amber { background: var(--amber-soft); color: var(--amber-ink); }

/* ------------------------------------------------------------------ questions */

.faq { max-width: 780px; margin: 0 auto; display: grid; gap: 12px; text-align: left; }
.faq details {
  background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-md);
  box-shadow: var(--shadow); transition: box-shadow .2s ease;
}
.faq details[open] { box-shadow: var(--shadow-lift); }
.faq summary {
  cursor: pointer; list-style: none; padding: 20px 64px 20px 24px; font-weight: 800; font-size: 18px;
  position: relative; border-radius: var(--r-md);
}
.faq summary::-webkit-details-marker { display: none; }
/* A plus that turns into a cross when the answer is open. */
.faq summary::after {
  content: ""; position: absolute; right: 22px; top: 50%; width: 28px; height: 28px; margin-top: -14px;
  border-radius: 50%; background-color: var(--sky-soft);
  background-image: linear-gradient(var(--sky-ink), var(--sky-ink)), linear-gradient(var(--sky-ink), var(--sky-ink));
  background-size: 12px 2px, 2px 12px; background-position: center; background-repeat: no-repeat;
  transition: transform .2s ease;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: 0; padding: 0 24px 22px; color: var(--ink-2); }

/* ------------------------------------------------------------------ closing band and footer */

/* The closing band carries the footer, so its glow runs to the bottom of the page. */
.closing { border-radius: 36px 36px 0 0; }
.closing::before { top: -380px; }
.closing section { text-align: center; padding: 88px 0 60px; }
.closing h2 { font-size: clamp(30px, 4.4vw, 46px); letter-spacing: -.03em; line-height: 1.1; margin: 0 auto 16px; max-width: 24ch; text-wrap: balance; }
.closing p { color: var(--on-plum); font-size: 18px; margin: 0 auto 6px; }
.closing a { color: #bfe1fa; }

footer { background: var(--plum-deep); color: var(--on-plum); padding: 30px 0 40px; font-size: 15px; }
footer .wrap { display: flex; flex-wrap: wrap; gap: 12px 28px; justify-content: space-between; align-items: center; }
footer nav { display: flex; flex-wrap: wrap; gap: 8px 22px; }
footer a { color: #fff; }
.closing footer { background: transparent; padding-top: 0; }
.closing footer .wrap { border-top: 1px solid rgba(255, 255, 255, .14); padding-top: 26px; }

/* ------------------------------------------------------------------ documents */

.page-head { padding: 26px 0 60px; }
/* The title lines up with the text below it, not with the wider header. */
.wrap.page-head { max-width: calc(var(--measure) + 44px); }
.page-head h1 { font-size: clamp(34px, 5.4vw, 52px); letter-spacing: -.035em; line-height: 1.08; margin: 0 0 8px; }
.page-head .meta { color: var(--on-plum); margin: 0; font-size: 16px; }
.doc { padding: 48px 0 76px; }
.doc .wrap { max-width: calc(var(--measure) + 44px); }
.doc h2 { font-size: 25px; letter-spacing: -.015em; margin: 44px 0 10px; line-height: 1.3; }
.doc h3 { font-size: 19px; margin: 26px 0 6px; }
.doc ul, .doc ol { padding-left: 1.3em; }
.doc li { margin: 5px 0; }
.summary {
  background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-lg);
  padding: 8px 26px 12px; margin: 0 0 8px; box-shadow: var(--shadow);
}
.summary h2 { margin-top: 18px; }
.callout {
  border-left: 4px solid var(--amber); background: var(--amber-soft);
  padding: 14px 20px; border-radius: 0 var(--r-sm) var(--r-sm) 0; margin: 18px 0;
}
.table-scroll { overflow-x: auto; margin: 14px 0; border: 1px solid var(--hairline); border-radius: var(--r-md); }
table { border-collapse: collapse; width: 100%; font-size: 15.5px; background: var(--surface); }
th, td { text-align: left; vertical-align: top; padding: 12px 14px; border-bottom: 1px solid var(--hairline); }
tr:last-child td { border-bottom: 0; }
th { font-size: 12px; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-2); background: var(--paper); }
.toc { columns: 2 260px; column-gap: 44px; padding-left: 1.3em; margin: 0 0 8px; }
.toc li { break-inside: avoid; }

/* ------------------------------------------------------------------ the opt-in screens */

.phone {
  width: 320px; max-width: 100%; margin: 24px auto; border-radius: 40px; padding: 14px;
  background: #0d0a11; box-shadow: 0 18px 50px rgba(20, 8, 30, .28);
}
.phone .screen {
  background: var(--plum); color: #fff; border-radius: 28px; padding: 28px 22px 26px;
  font-size: 15px; line-height: 1.5;
}
.phone h4 { font-size: 24px; letter-spacing: -.02em; margin: 6px 0 6px; }
.phone .sub { color: rgba(255, 255, 255, .78); margin: 0 0 18px; }
.phone .field {
  background: #fff; color: #2a2230; border-radius: 14px; padding: 12px 14px; font-size: 18px;
  font-weight: 600; margin-bottom: 14px;
}
.phone .fine { font-size: 12.5px; color: rgba(255, 255, 255, .78); margin: 0 0 16px; }
.phone .fine a { color: #bfe1fa; }
.phone .btn-mock {
  background: var(--sky); color: #06263d; text-align: center; font-weight: 800; border-radius: 14px;
  padding: 13px;
}
.phone .check { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; margin: 0 0 16px; }
.phone .box {
  flex: none; width: 20px; height: 20px; border-radius: 6px; background: var(--sky); color: #06263d;
  font-weight: 900; font-size: 14px; line-height: 20px; text-align: center; margin-top: 1px;
}
.phone-row { display: grid; gap: 8px 24px; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.phone-row figure { margin: 0; }
.caption { text-align: center; color: var(--ink-2); font-size: 14px; margin-top: -8px; }

/* A text message, as it arrives. */
.bubble {
  background: var(--surface); border: 1px solid var(--hairline);
  border-radius: 20px 20px 20px 6px; padding: 12px 16px; white-space: pre-line;
  max-width: 46ch; margin: 10px 0 18px; font-size: 16px; box-shadow: var(--shadow);
}

@media (max-width: 560px) {
  body { font-size: 16.5px; }
  .top nav { gap: 4px 16px; font-size: 14px; }
  .hero { padding: 40px 0 70px; }
  section { padding: 60px 0; }
  .masthead { border-radius: 0 0 26px 26px; }
  .closing { border-radius: 26px 26px 0 0; }
}

/* Less motion, when asked for: nothing drifts, floats, pulses, rises or lifts. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .card:hover, .btn-primary:hover, .picker label:hover, .send:hover { transform: none; }
}