/* Rambler — one stylesheet, no build step, no framework.

   The site ships with `default-src 'none'` and a style-src that does not allow
   'unsafe-inline', so everything lives here: no <style> blocks, no style=""
   attributes, no scripts. The home page shows real screenshots from
   apple/fastlane/screenshots, cut down to WebP in assets/screens.

   Colours mirror apple/Rambler/Theme/Palette.swift so the site and the app
   don't drift apart. */

:root {
  --bg: #000;
  --surface: rgba(255, 255, 255, 0.05);
  --surface-raised: rgba(255, 255, 255, 0.08);
  --hairline: rgba(255, 255, 255, 0.08);
  --divider: rgba(255, 255, 255, 0.06);
  --text: rgba(255, 255, 255, 0.92);
  --text-secondary: rgba(255, 255, 255, 0.55);
  --text-tertiary: rgba(255, 255, 255, 0.38);
  --explore: #66b3f2;
  --prompt: #a394fa;
  --done: #66d980;
  --alert: #f24d4d;

  --measure: 34rem;
  --wrap: 72rem;
  --wrap-narrow: 44rem;
  --pad: 1.5rem;
}

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: Outfit, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: inherit; }

img { max-width: 100%; height: auto; display: block; }

main:focus { outline: none; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.i { display: block; width: 1em; height: 1em; }

/* ── layout ─────────────────────────────────────────────────────────────── */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--pad);
}

.narrow { max-width: var(--wrap-narrow); }

.band { padding: 7rem 0; }

.band + .band { border-top: 1px solid var(--hairline); }

.band--tint { background: linear-gradient(180deg, rgba(255, 255, 255, 0.025), transparent 70%); }

/* The heading block at the top of every home-page section. */
.intro { max-width: 38rem; margin-bottom: 4rem; }
.intro h2 { text-wrap: balance; }
.intro p:last-child { margin-bottom: 0; }

/* ── head / nav ─────────────────────────────────────────────────────────── */

/* Every page has nav links before the content, which is tab stops a keyboard
   visitor has to walk past to reach anything. Off-screen until it is focused,
   and above the sticky header when it is. */
.skip {
  position: absolute;
  left: 0.75rem;
  top: -4rem;
  z-index: 40;
  padding: 0.65rem 1.25rem;
  border-radius: 999px;
  background: var(--text);
  color: var(--bg);
  font-weight: 600;
  text-decoration: none;
  transition: top 0.12s ease;
}

.skip:focus { top: 0.75rem; }

.site-head {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(0, 0, 0, 0.78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--hairline);
}

.nav {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  padding: 0.85rem var(--pad);
}

.nav__brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  text-decoration: none;
  margin-right: auto;
  cursor: pointer;
}

.nav__brand img {
  width: 28px;
  height: 28px;
  border-radius: 8px;
}

.nav__links {
  display: flex;
  gap: 1.75rem;
  font-size: 0.95rem;
  color: var(--text-secondary);
}

.nav__links a {
  text-decoration: none;
  cursor: pointer;
  transition: color 0.15s ease;
}

.nav__links a:hover { color: var(--text); }

/* ── type ───────────────────────────────────────────────────────────────── */

h1, h2, h3 {
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.1;
  margin: 0 0 1rem;
}

h1 { font-size: clamp(2.8rem, 7vw, 5rem); letter-spacing: -0.04em; }
h2 { font-size: clamp(1.8rem, 3.6vw, 2.6rem); letter-spacing: -0.03em; }
h3 { font-size: 1.2rem; letter-spacing: -0.015em; line-height: 1.25; }

p { margin: 0 0 1.1rem; max-width: var(--measure); }

.lede {
  font-size: clamp(1.1rem, 1.6vw, 1.3rem);
  color: var(--text-secondary);
  line-height: 1.55;
  font-weight: 300;
}

.eyebrow {
  font-size: 0.76rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin: 0 0 0.9rem;
  font-weight: 500;
}

.muted { color: var(--text-secondary); }
.small { font-size: 0.9rem; }

.link {
  color: var(--explore);
  text-underline-offset: 3px;
  cursor: pointer;
}

/* ── buttons ────────────────────────────────────────────────────────────── */

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.85rem;
  margin-top: 2rem;
}

.btn {
  display: inline-block;
  padding: 0.85rem 1.75rem;
  border-radius: 999px;
  background: var(--text);
  color: var(--bg);
  font: inherit;
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.3;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  border: 0;
  transition: background 0.15s ease, color 0.15s ease;
}

.btn:hover { background: #fff; }

.btn--small { padding: 0.5rem 1.1rem; font-size: 0.9rem; }

.btn--quiet {
  background: transparent;
  color: var(--text-secondary);
  box-shadow: inset 0 0 0 1px var(--hairline);
}

.btn--quiet:hover { background: var(--surface); color: var(--text); }

/* ── hero ───────────────────────────────────────────────────────────────── */

.hero {
  position: relative;
  padding: 5rem 0 6rem;
  overflow: hidden;
}

/* One soft patch of the follow-up colour behind the phone. It is the colour
   the app uses for Rambler's own voice, so it sits where that voice is. */
.hero::before {
  content: "";
  position: absolute;
  width: 46rem;
  height: 46rem;
  right: -10rem;
  top: -8rem;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(163, 148, 250, 0.16), transparent);
  pointer-events: none;
}

.hero__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 4rem;
  align-items: center;
}

.hero h1 { margin-bottom: 1.5rem; }
.hero .lede { max-width: 31rem; }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0 0 1.75rem;
  padding: 0.35rem 0.9rem 0.35rem 0.75rem;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: var(--surface);
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.badge__dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--done);
  box-shadow: 0 0 0 3px rgba(102, 217, 128, 0.18);
}

.facts {
  list-style: none;
  margin: 2.5rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.6rem;
  font-size: 0.88rem;
  color: var(--text-tertiary);
}

.facts li { display: flex; align-items: center; gap: 0.5rem; }
.facts svg { width: 1.05em; height: 1.05em; color: var(--text-secondary); }

/* ── screenshots ────────────────────────────────────────────────────────── */

/* A screenshot in a thin bezel. The captures are full-bleed iPhone 16 Pro Max
   screens, whose own corner radius is about an eighth of the width, so the
   image is clipped to that and the bezel follows it round. */
.shot {
  --w: 18rem;
  width: var(--w);
  max-width: 100%;
  margin: 0 auto;
  padding: calc(var(--w) * 0.028);
  border-radius: calc(var(--w) * 0.155);
  background: linear-gradient(160deg, #2a2a2e, #111113 40%, #1c1c1f);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.1),
    0 40px 80px -30px rgba(0, 0, 0, 0.9),
    0 0 0 1px rgba(0, 0, 0, 0.9);
}

.shot img {
  width: 100%;
  border-radius: calc(var(--w) * 0.13);
  background: #000;
}

.shot--hero { --w: 20rem; }

/* ── how it works ───────────────────────────────────────────────────────── */

.row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 4rem;
  align-items: center;
}

.row + .row { margin-top: 7rem; }

.row--flip .row__copy { order: 2; }

.row__copy { max-width: 28rem; justify-self: center; }
.row__copy h3 { font-size: clamp(1.4rem, 2.4vw, 1.75rem); letter-spacing: -0.025em; }
.row__copy p { color: var(--text-secondary); }
.row__copy p.muted { color: var(--text-tertiary); }

.row__num {
  display: block;
  margin-bottom: 1rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.8rem;
  color: var(--prompt);
}

.row__art { display: flex; justify-content: center; }

/* The follow-up and its chips, drawn in the app's own shapes: a user bubble
   on the right, Rambler's question on the left in the prompt colour, and the
   refinement chips under it. */
.convo {
  width: 100%;
  max-width: 24rem;
  padding: 1.5rem;
  border: 1px solid var(--hairline);
  border-radius: 28px;
  background: var(--surface);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.convo p { margin: 0; max-width: none; }

.convo__me {
  align-self: flex-end;
  max-width: 88%;
  padding: 0.8rem 1rem;
  border-radius: 20px 20px 6px 20px;
  background: var(--surface-raised);
  font-size: 0.95rem;
  line-height: 1.45;
}

.convo__ai {
  max-width: 88%;
  padding: 0.85rem 1rem;
  border-radius: 20px 20px 20px 6px;
  background: rgba(163, 148, 250, 0.12);
  box-shadow: inset 0 0 0 1px rgba(163, 148, 250, 0.22);
}

.convo__label {
  display: block;
  margin-bottom: 0.3rem;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--prompt);
}

.convo__ai p { font-size: 1.02rem; line-height: 1.4; font-weight: 500; }

.convo__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.convo__chips button {
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
  border: 1px solid rgba(163, 148, 250, 0.3);
  background: transparent;
  font: inherit;
  font-size: 0.82rem;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.convo__chips button:hover { border-color: rgba(163, 148, 250, 0.6); color: var(--text); }

.convo__chips button:focus-visible {
  outline: 2px solid var(--prompt);
  outline-offset: 2px;
}

.convo__chips button[aria-pressed="true"] {
  background: rgba(163, 148, 250, 0.2);
  border-color: var(--prompt);
  color: var(--text);
}

/* the style in the prompt colour, its focus after it in grey, as in the app */
.convo__chips b { font-weight: 600; color: var(--prompt); }

/* rambler.js stacks every question the demo can show in one cell, so the
   bubble keeps the height of the longest; only the live one is visible */
.convo__q { display: grid; }
.convo__q > p { grid-area: 1 / 1; }
.convo__ai p.convo__sizer { visibility: hidden; }

.convo__ai p { transition: opacity 0.14s ease; }
.convo__ai p.is-swapping { opacity: 0; }

.convo p.convo__hint { font-size: 0.8rem; color: var(--text-tertiary); }

/* ── versus ─────────────────────────────────────────────────────────────── */

/* Four rows, each a moment in a ramble: what a chat does then, in grey, and
   what Rambler does, in the follow-up colour. Every cell names who it is
   about, so the rows still read once they stack on a phone. */
.versus {
  display: grid;
  gap: 0.75rem;
}

.versus__row {
  display: grid;
  grid-template-columns: 11rem minmax(0, 1fr) minmax(0, 1.25fr);
  gap: 0.75rem;
  align-items: stretch;
}

.versus__when {
  margin: 0;
  padding-top: 1.15rem;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.versus__them,
.versus__us {
  padding: 1.1rem 1.25rem;
  border-radius: 18px;
}

.versus__them {
  border: 1px solid var(--hairline);
  color: var(--text-tertiary);
}

.versus__us {
  background: rgba(163, 148, 250, 0.08);
  box-shadow: inset 0 0 0 1px rgba(163, 148, 250, 0.25);
  color: var(--text);
}

.versus__them p,
.versus__us p { margin: 0; max-width: none; font-size: 0.95rem; line-height: 1.5; }

.versus__who {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.versus__us .versus__who { color: var(--prompt); }

/* ── uses ───────────────────────────────────────────────────────────────── */

/* Six cards, each opening with something you might say, drawn as the app's
   own speech bubble so the card reads as the start of a ramble. */
.uses {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.use {
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
  border: 1px solid var(--hairline);
  border-radius: 22px;
  background: var(--surface);
}

.use p.use__say {
  align-self: flex-end;
  max-width: 92%;
  margin: 0 0 1.4rem;
  padding: 0.7rem 0.95rem;
  border-radius: 18px 18px 6px 18px;
  background: var(--surface-raised);
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--text);
}

.use h3 { font-size: 1.05rem; margin-bottom: 0.5rem; }
.use p { margin: 0; max-width: none; font-size: 0.95rem; color: var(--text-secondary); }

/* ── take it anywhere ────────────────────────────────────────────────────── */

.export {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 4rem;
  align-items: center;
}

.export__copy h2 { text-wrap: balance; }

.export__list {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  display: grid;
  gap: 1rem;
}

.export__list li {
  padding-left: 1rem;
  border-left: 2px solid rgba(102, 179, 242, 0.5);
  color: var(--text-secondary);
}

.export__list b { color: var(--text); font-weight: 600; }

/* A shared file as it looks in any text editor: the raw Markdown, not a
   rendering of it, because the point is that it is plain text. Cut off with a
   fade, since the real file carries on into the transcript. */
.file {
  margin: 0;
  border: 1px solid var(--hairline);
  border-radius: 22px;
  background: #0c0c0e;
  overflow: hidden;
}

.file__name {
  padding: 0.8rem 1.25rem;
  border-bottom: 1px solid var(--hairline);
  font: 0.78rem/1.4 ui-monospace, "SF Mono", Menlo, monospace;
  color: var(--text-tertiary);
  overflow-wrap: anywhere;
}

.file__body {
  margin: 0;
  padding: 1.25rem;
  max-height: 36rem;
  overflow: hidden;
  font: 0.8rem/1.6 ui-monospace, "SF Mono", Menlo, monospace;
  color: var(--text-secondary);
  white-space: pre-wrap;
  -webkit-mask-image: linear-gradient(180deg, #000 75%, transparent);
  mask-image: linear-gradient(180deg, #000 75%, transparent);
}

.file__body .md-h { color: var(--explore); }
.file__body b { font-weight: 400; color: var(--text); }

/* ── privacy cards ──────────────────────────────────────────────────────── */

.cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}

.card {
  padding: 1.6rem 1.5rem 1.4rem;
  border: 1px solid var(--hairline);
  border-radius: 22px;
  background: var(--surface);
}

.card__icon {
  display: block;
  width: 1.4rem;
  height: 1.4rem;
  margin-bottom: 1.4rem;
  color: var(--done);
}

.card h3 { font-size: 1.05rem; margin-bottom: 0.5rem; }
.card p { margin: 0; font-size: 0.95rem; color: var(--text-secondary); }

.after-cards { margin: 2rem 0 0; }

/* ── pricing ────────────────────────────────────────────────────────────── */

.plans {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  max-width: 52rem;
}

.plan {
  padding: 2rem;
  border: 1px solid var(--hairline);
  border-radius: 26px;
  background: var(--surface);
}

.plan--main {
  border-color: rgba(163, 148, 250, 0.35);
  background: linear-gradient(170deg, rgba(163, 148, 250, 0.1), var(--surface) 60%);
}

.plan__kind {
  margin: 0 0 0.4rem;
  font-size: 0.76rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.plan h3 { font-size: 1.6rem; letter-spacing: -0.03em; margin-bottom: 0.75rem; }
.plan p { color: var(--text-secondary); }

.plan ul {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 1.25rem 0 0;
  border-top: 1px solid var(--hairline);
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  font-size: 0.95rem;
}

.plan li {
  position: relative;
  padding-left: 1.4rem;
}

.plan li::before {
  content: "";
  position: absolute;
  left: 0.2rem;
  top: 0.62em;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: var(--done);
}

/* ── providers (support page) ───────────────────────────────────────────── */

.providers {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 2.5rem 0 0;
}

.providers a {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2rem;
  padding: 1.25rem 1.25rem 1.15rem;
  border: 1px solid var(--hairline);
  border-radius: 18px;
  text-decoration: none;
  background: var(--surface);
  cursor: pointer;
  position: relative;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.providers a:hover {
  background: var(--surface-raised);
  border-color: rgba(102, 179, 242, 0.35);
  transform: translateY(-2px);
}

.providers strong { font-weight: 600; }

.providers__mark {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  margin-bottom: 0.75rem;
  border-radius: 50%;
  background: var(--surface-raised);
  color: var(--explore);
}

.providers__mark svg { width: 1rem; height: 1rem; }

.providers__host {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.78rem;
  color: var(--text-tertiary);
  word-break: break-all;
}

.providers__go {
  position: absolute;
  top: 1.35rem;
  right: 1.25rem;
  width: 0.8rem;
  height: 0.8rem;
  color: var(--text-tertiary);
}

/* ── faq ────────────────────────────────────────────────────────────────── */

/* a grid rather than CSS columns: opening one answer must not shuffle the
   other questions between the columns */
.faq {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 3.5rem;
  align-content: start;
  border-top: 1px solid var(--hairline);
}

.faq details {
  border-bottom: 1px solid var(--hairline);
  padding: 1.15rem 0;
}

.faq summary {
  cursor: pointer;
  font-weight: 500;
  list-style: none;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.faq summary::-webkit-details-marker { display: none; }

.faq summary::after {
  content: "+";
  color: var(--text-tertiary);
  font-weight: 400;
}

.faq details[open] summary::after { content: "\2013"; }

.faq details p {
  margin: 0.9rem 0 0;
  color: var(--text-secondary);
  font-size: 0.97rem;
  max-width: none;
}

/* Twenty-nine proper nouns in a row read better set apart and a shade quieter,
   so the eye can scan for one name. */
.faq details p.faq__langs {
  color: var(--text-tertiary);
  line-height: 1.65;
  padding-left: 1rem;
  border-left: 1px solid var(--divider);
}

/* ── beta signup ────────────────────────────────────────────────────────── */

.signup-band {
  background: radial-gradient(ellipse 60% 70% at 50% 100%, rgba(163, 148, 250, 0.12), transparent);
}

.signup {
  max-width: 40rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.signup__icon {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  margin-bottom: 2rem;
}

.signup h2 { margin-bottom: 1rem; }
.signup__lede { color: var(--text-secondary); max-width: 30rem; }

.signup__form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  width: 100%;
  max-width: 30rem;
  margin-top: 2rem;
}

.signup__field {
  flex: 1 1 14rem;
  min-width: 0;
  padding: 0.85rem 1.25rem;
  border-radius: 999px;
  border: 1px solid var(--hairline);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 1rem;
}

.signup__field::placeholder { color: var(--text-tertiary); }

.signup__field:focus-visible {
  outline: none;
  border-color: var(--prompt);
  background: var(--surface-raised);
}

.signup__form .btn { flex: 0 0 auto; }

/* Off-screen rather than display:none, because a field that is not rendered at
   all is one a form-filler can also tell to skip. */
.signup__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  margin: 0;
}

/* The Turnstile widget, injected by rambler.js. The form is a flex row of
   field plus button, so the widget claims a row of its own rather than
   squeezing between them. It reserves its height before the iframe arrives, so
   the button underneath does not jump once it does. */
.signup__check {
  flex: 1 0 100%;
  min-height: 65px;
  margin: 0.25rem 0;
}

.signup__note { margin: 1.25rem auto 0; }

/* ── support form ───────────────────────────────────────────────────────── */

/* Stacked rather than the signup's row: a message needs the width. The fields
   share the signup's surface and focus colour, with a smaller radius, because a
   pill-shaped box several lines tall reads as a mistake. The honeypot reuses
   .signup__trap, and the Turnstile widget .signup__check. */
.contact {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-width: var(--measure);
  margin: 1.75rem 0 1.25rem;
}

.contact__label {
  font-size: 0.9375rem;
  color: var(--text-secondary);
}

.contact__field {
  width: 100%;
  padding: 0.85rem 1.1rem;
  border-radius: 0.875rem;
  border: 1px solid var(--hairline);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 1rem;
  margin-bottom: 0.75rem;
}

.contact__message {
  min-height: 10rem;
  resize: vertical;
  line-height: 1.55;
}

.contact__field::placeholder { color: var(--text-tertiary); }

.contact__field:focus-visible {
  outline: none;
  border-color: var(--prompt);
  background: var(--surface-raised);
}

.contact .btn { align-self: flex-start; }

@media (max-width: 420px) {
  .contact .btn { align-self: stretch; }
}

/* Reachable by a screen reader, invisible to everyone else. */
.a11y-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* The page a form post lands on. Nothing on the page renders a result in
   place, so the answer is a whole page and it needs room around it. */
.result { padding-top: 6rem; }
.result .actions { margin-top: 2.5rem; }
/* `.prose a` outranks `.btn` on specificity, so without this the button on the
   result page comes out looking like a link that happens to have a pill round it. */
.result a.btn { color: var(--bg); }

/* ── prose (privacy, support) ───────────────────────────────────────────── */

.prose { padding-top: 4rem; padding-bottom: 6rem; }
.prose h1 { font-size: clamp(2.2rem, 5vw, 3.2rem); }
.prose h2 { margin-top: 3rem; font-size: clamp(1.5rem, 2.8vw, 1.9rem); }
.prose h3 { margin-top: 2rem; }
.prose ul, .prose ol { max-width: var(--measure); color: var(--text-secondary); padding-left: 1.2rem; }
.prose li { margin-bottom: 0.5rem; }
.prose p { color: var(--text-secondary); }
.prose p strong, .prose li strong { color: var(--text); font-weight: 600; }
.prose a { color: var(--explore); cursor: pointer; }
.prose .providers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.prose .providers a { color: var(--text); }
.prose .spaced { margin-top: 1.5rem; }

.stamp {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.82rem;
  color: var(--text-tertiary);
}

/* ── footer ─────────────────────────────────────────────────────────────── */

.footer {
  border-top: 1px solid var(--hairline);
  padding: 3.5rem 0 3rem;
  color: var(--text-tertiary);
  font-size: 0.9rem;
}

.footer__inner {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 2rem;
  align-items: start;
}

.footer__brand p { margin: 0.75rem 0 0; color: var(--text-tertiary); }
.footer__brand .nav__brand { margin-right: 0; color: var(--text); }

.footer__nav {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.footer a { text-decoration: none; color: var(--text-secondary); cursor: pointer; }
.footer a:hover { color: var(--text); }

.footer__made {
  grid-column: 1 / -1;
  margin: 1.5rem 0 0;
  padding-top: 1.75rem;
  border-top: 1px solid var(--hairline);
  max-width: none;
}

/* ── responsive ─────────────────────────────────────────────────────────── */

@media (max-width: 1000px) {
  .band { padding: 5rem 0; }

  .hero { padding: 3.5rem 0 4.5rem; }
  .hero__inner { grid-template-columns: minmax(0, 1fr); gap: 3.5rem; }
  .hero::before { right: -20rem; top: auto; bottom: -10rem; }

  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .uses { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .providers { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* two narrow nav columns side by side, with the brand across the top, rather
     than the second nav dropping into the gap under the brand */
  .footer__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 820px) {
  .nav { gap: 1.1rem; }
  .nav__links { gap: 1.1rem; font-size: 0.88rem; }
  /* The links say for themselves which ones may go; Support and Privacy
     never do. */
  .nav__links .nav__hide-md { display: none; }

  /* One column, copy first, then the picture, whichever side it sat on. */
  .row { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
  .row + .row { margin-top: 5rem; }
  .row--flip .row__copy { order: 0; }
  .row__copy { justify-self: start; }

  .export { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }

  .versus { gap: 2rem; }
  .versus__row { grid-template-columns: minmax(0, 1fr); gap: 0.6rem; }
  .versus__when { padding-top: 0; }
  .shot { --w: 16rem; }
  .shot--hero { --w: 17rem; }

  .plans { grid-template-columns: minmax(0, 1fr); }
  .faq { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
  body { font-size: 16px; }

  .band { padding: 4rem 0; }
  .intro { margin-bottom: 2.5rem; }

  .nav__links .nav__hide-sm { display: none; }

  .cards { grid-template-columns: minmax(0, 1fr); }
  .uses { grid-template-columns: minmax(0, 1fr); }
  .providers { grid-template-columns: minmax(0, 1fr); }
  .prose .providers { grid-template-columns: minmax(0, 1fr); }
  .plan { padding: 1.6rem; }

  .signup__form { flex-direction: column; }
  .signup__field { flex: 0 0 auto; }

  .footer__inner { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 420px) {
  :root { --pad: 1rem; }
  /* The home page carries a beta button in the nav, and at this width it and
     the brand are all that fit. Its Privacy and Support links are in the
     footer too. The prose pages have no button, so theirs stay. */
  .nav__links .nav__hide-xs { display: none; }
  .actions .btn { flex: 1 1 auto; text-align: center; }
}

/* ── motion ─────────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}