/* ============================================================
   Pierhand: site styles

   The site is dressed exactly like the app (see DESIGN.md), so the
   screenshots on it look like they belong. The rules of the system:

     Colour   one accent, Pierhand blue (#1A5FE8), on cool neutrals.
              A barely-blue grey page, white cards on it, blue-black
              ink. The blue panels (first screen, the price, the
              last call) are the one loud surface, as in the app.
     Type     Geist, as in the app. Display is 700 with tight tracking;
              sub-headings 600; body 400. Three steps, no more.
     Shape    buttons and fields 10px, cards 16px, blue panels 24px.
              Only small tags are pills.
     Depth    a hairline border on every card, and shadows so soft they
              only suggest lift, tinted blue-black. The blue panels get
              a blue glow and a line of light along the top edge.
     Motion   press feedback on anything pressable, one entrance for the
              first screen (the rings ripple out, as when a phone
              connects in the app), sections fading up as they arrive,
              and one swap on the setup checker. All of it switched off
              for people who ask for less motion.
   ============================================================ */

@font-face {
  font-family: "Geist";
  src: url("fonts/geist-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Geist Mono";
  src: url("fonts/geist-mono-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;

  --page: #f6f7fa;
  --panel: #ffffff;
  --panel-soft: #f3f5f9;
  --line: #e2e6ee;
  --field-line: #8b95a7;
  --ink: #101828;
  --body: #3f4859;
  --mute: #5b6476;

  --accent: #1a5fe8;
  --accent-press: #1550d6;
  --accent-deep: #1447c9;
  --accent-pale: #ebf2fe;
  --accent-wash: #f3f7fe;
  --on-accent: #ffffff;
  --on-accent-mute: #eef3ff;
  --hero: linear-gradient(135deg, #1f66ee 0%, #1550d6 100%);

  --radius-control: 10px;
  --radius-card: 16px;
  --radius-panel: 24px;
  --radius-pill: 999px;

  --shadow-card: 0 1px 2px rgba(16, 24, 40, 0.05);
  --shadow-lift: 0 1px 2px rgba(16, 24, 40, 0.05), 0 12px 32px -12px rgba(16, 24, 40, 0.14);
  --shadow-shot: 0 2px 6px rgba(16, 24, 40, 0.06), 0 32px 64px -24px rgba(16, 24, 40, 0.28);
  --shadow-panel: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 24px 48px -24px rgba(26, 95, 232, 0.6);

  --wrap: 1200px;
  --gutter: 24px;
  --band: clamp(72px, 9vw, 120px);

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);

  /* The widest a paragraph may run: about 68 characters in Geist. */
  --measure: 34em;

  --font: "Geist", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Geist Mono", "Cascadia Mono", Consolas, ui-monospace, monospace;
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 84px;
  scrollbar-color: #b8c0cd var(--page);
}

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.6;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  accent-color: var(--accent);
  caret-color: var(--accent);
}

::selection { background: var(--accent); color: var(--on-accent); }

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

h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }

a { color: var(--accent-deep); text-decoration-thickness: 1.5px; text-underline-offset: 0.18em; }

/* The ring follows each element's own corners; it never reshapes them. */
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}
a:not(.btn):focus-visible { border-radius: 6px; }
.panel-blue :focus-visible { outline-color: var(--on-accent); }

.wrap {
  width: 100%;
  max-width: calc(var(--wrap) + 2 * var(--gutter));
  margin-inline: auto;
  /* On a phone held sideways, keep clear of the notch as well as the edge. */
  padding-left: max(var(--gutter), env(safe-area-inset-left));
  padding-right: max(var(--gutter), env(safe-area-inset-right));
}

.skip {
  position: absolute; left: 12px; top: -80px; z-index: 30;
  background: var(--ink); color: var(--panel); padding: 12px 18px; border-radius: var(--radius-control);
  font-weight: 600; text-decoration: none;
}
.skip:focus { top: 12px; }

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

.display {
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.045em;
  text-wrap: balance;
}
h1.display { font-size: clamp(2.6rem, 6.2vw, 5.25rem); line-height: 0.98; }
h2.display { font-size: clamp(2rem, 4vw, 3.25rem); }

.sub {
  color: var(--body);
  font-size: clamp(1.06rem, 1.2vw, 1.2rem);
  line-height: 1.55;
  max-width: var(--measure);
  text-wrap: pretty;
}

.nowrap { white-space: nowrap; }

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

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 12px 22px;
  border: 1px solid transparent; border-radius: var(--radius-control);
  font: inherit; font-weight: 600; line-height: 1.5; letter-spacing: -0.01em; white-space: nowrap;
  text-decoration: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 160ms var(--ease-out), background-color 150ms ease, color 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}
.btn:active { transform: scale(0.97); }

/* The one main action: solid blue. */
.btn-primary { background: var(--accent); color: var(--on-accent); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 1px 2px rgba(16, 24, 40, 0.12); }
/* Everything else: white with a hairline, the app's standard button. */
.btn-secondary { background: var(--panel); color: var(--ink); border-color: #d3d9e3; box-shadow: var(--shadow-card); }
.btn-small { min-height: 40px; padding: 8px 16px; font-size: 0.94rem; }
.btn-block { width: 100%; }

/* On a blue panel the main action turns white with blue words, and the
   second one is outlined in white, exactly as on the app's hero panel. */
.panel-blue .btn-primary { background: var(--panel); color: var(--accent-deep); box-shadow: 0 1px 2px rgba(16, 24, 40, 0.16); }
.panel-blue .btn-secondary { background: transparent; color: var(--on-accent); border-color: rgba(255, 255, 255, 0.72); box-shadow: none; }

@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover { background: var(--accent-press); }
  .btn-secondary:hover { background: var(--panel-soft); }
  .panel-blue .btn-primary:hover { background: #eaf1ff; }
  .panel-blue .btn-secondary:hover { background: rgba(255, 255, 255, 0.14); border-color: var(--on-accent); }
  .top nav a:not(.btn):hover { background: rgba(16, 24, 40, 0.05); color: var(--ink); }
  footer nav a:hover { color: var(--ink); }
}

/* ---------- top bar ---------- */

.top {
  position: sticky; top: 0; z-index: 20;
  background: rgba(246, 247, 250, 0.82);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  backdrop-filter: saturate(1.6) blur(14px);
  border-bottom: 1px solid rgba(16, 24, 40, 0.06);
}
.top .wrap { display: flex; align-items: center; gap: 20px; height: 68px; }

.brand {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--ink); text-decoration: none;
  font-weight: 700; font-size: 1.25rem; letter-spacing: -0.03em;
}
.brand img { width: 32px; height: 32px; border-radius: 8px; }

.top nav { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.top nav a:not(.btn) {
  color: var(--body); text-decoration: none; font-size: 0.94rem; font-weight: 500;
  padding: 8px 14px; border-radius: var(--radius-control);
  transition: background-color 150ms ease, color 150ms ease;
}
.top nav .btn { margin-left: 10px; }

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

/* Sections sit on the one grey page, a band's height apart; the gap
   after the last one is the footer's. */
.band { padding-top: var(--band); }
.band-head { margin-bottom: clamp(32px, 4vw, 52px); }
.band-head .sub { margin-top: 18px; }

/* A white card: the app's basic surface. */
.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

/* The blue panel: the app's hero. The rings (an inline picture) spread
   from its top-right corner and are clipped to its corners. */
.panel-blue {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--hero); color: var(--on-accent);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-panel);
}
.panel-blue .sub, .panel-blue p { color: var(--on-accent-mute); }
.panel-blue a:not(.btn) { color: var(--on-accent); }

.rings {
  position: absolute; top: 0; right: 0; z-index: -1;
  width: 720px; height: 720px; pointer-events: none;
}
.rings circle { fill: none; stroke: rgba(255, 255, 255, 0.16); stroke-width: 1.5; }

/* ---------- first screen ---------- */

.hero { padding-top: clamp(20px, 3vw, 36px); }

.hero-panel {
  padding: clamp(28px, 5.4vw, 72px) clamp(24px, 5.4vw, 72px) clamp(150px, 15vw, 210px);
}

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  margin-bottom: clamp(18px, 2.2vw, 28px); padding: 5px 12px;
  border-radius: var(--radius-pill); background: rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
  font-size: 0.875rem; font-weight: 500; line-height: 1.4;
}
.panel-blue .eyebrow { color: var(--on-accent); }

.hero-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end;
  gap: 24px 48px; margin-top: clamp(20px, 2.4vw, 30px);
}
.hero-row .sub { max-width: 27em; }

.actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* A screenshot, set in a frame like a pane of glass in a tray: a pale
   outer rim with a hairline, and the picture inside with its own,
   smaller corners. */
.shot {
  padding: 8px; border-radius: var(--radius-panel);
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-shot);
}
.shot img { width: 100%; border-radius: var(--radius-card); }

/* The first screenshot rises out of the bottom of the blue panel. */
.hero .shot {
  position: relative;
  margin: calc(-1 * clamp(110px, 11.5vw, 160px)) clamp(12px, 4vw, 64px) 0;
}

/* ---------- what it does ---------- */

.tiles { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }

.tile {
  padding: clamp(24px, 2.6vw, 34px);
  display: flex; flex-direction: column; gap: 10px;
}
.tile h3 { font-size: 1.375rem; font-weight: 600; line-height: 1.25; letter-spacing: -0.025em; }
.tile p { color: var(--body); max-width: var(--measure); }

.tile-a { grid-column: span 7; grid-row: span 2; padding-bottom: 0; overflow: hidden; }
.tile-b { grid-column: span 5; }
.tile-c { grid-column: span 5; }
.tile-d { grid-column: span 5; }
.tile-e { grid-column: span 7; }
/* The last one runs the full width, so its heading and its words sit side
   by side instead of leaving the right half empty. */
.tile-f {
  grid-column: span 12;
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: baseline; gap: 10px 48px;
}

.tile-a h3, .tile-b h3 { font-size: clamp(1.75rem, 2.8vw, 2.375rem); font-weight: 700; line-height: 1.08; letter-spacing: -0.04em; }
.tile-a .map {
  margin: 20px calc(-1 * clamp(24px, 2.6vw, 34px)) 0;
  flex: 1; min-height: 240px; overflow: hidden;
  border-top: 1px solid var(--line);
}
.tile-a .map img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }

.tile-b { justify-content: flex-end; min-height: 260px; }
/* On the blue card the words are white, like every blue panel (this has to
   outrank the ordinary card's grey paragraph). */
.tile.panel-blue p { color: var(--on-accent-mute); }
.tile-b .rings { width: 520px; height: 520px; }

.tile-pale { background: var(--accent-pale); border-color: #d7e4fc; }

/* ---------- the real app ---------- */

.looks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.looks figcaption { margin-top: 14px; padding-inline: 6px; color: var(--body); font-size: 0.97rem; }

/* ---------- privacy ---------- */

.vault {
  padding: clamp(28px, 4.5vw, 60px);
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(28px, 5vw, 72px); align-items: start;
}

.ledger { display: grid; }
.ledger > div { padding-block: 20px; border-top: 1px solid var(--line); }
.ledger > div:first-child { padding-top: 0; border-top: 0; }
.ledger > div:last-child { padding-bottom: 0; }
.ledger dt { font-size: 1.125rem; font-weight: 600; line-height: 1.35; letter-spacing: -0.015em; }
.ledger dd { margin-top: 6px; color: var(--body); max-width: var(--measure); }
.ledger .nothing dt { color: var(--accent-deep); }

/* ---------- setup checker ---------- */

.checker {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  overflow: hidden;
}
.checker-ask { padding: clamp(24px, 3vw, 40px); display: grid; gap: 22px; align-content: start; }
.checker-answer {
  padding: clamp(24px, 3vw, 40px);
  background: var(--accent-wash); border-left: 1px solid var(--line);
}

.hint { color: var(--mute); font-size: 0.94rem; }

.field { display: grid; gap: 8px; }
.field label { font-weight: 600; }

.select { position: relative; }
.select select {
  width: 100%; min-height: 50px; padding: 12px 46px 12px 14px;
  appearance: none; -webkit-appearance: none;
  background: var(--panel); color: var(--ink);
  border: 1px solid var(--field-line); border-radius: var(--radius-control);
  font: inherit; font-size: 1rem; line-height: 1.5; cursor: pointer;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.select select:focus-visible { outline-offset: 2px; }
.select svg {
  position: absolute; right: 16px; top: 50%; width: 16px; height: 16px; margin-top: -8px;
  pointer-events: none; color: var(--mute);
}

.checker-answer h3 { font-size: 1.375rem; font-weight: 600; line-height: 1.25; letter-spacing: -0.025em; }
.needs { margin-top: 18px; display: grid; gap: 12px; }
.needs li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; align-items: start; }
.needs svg { width: 20px; height: 20px; margin-top: 2px; color: var(--accent); }
.verdict { margin-top: 22px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; color: var(--ink); }
.tag {
  display: inline-flex; align-items: center; padding: 4px 12px; border-radius: var(--radius-pill);
  background: var(--accent); color: var(--on-accent); font-size: 0.875rem; font-weight: 600;
}
.tag-free { background: var(--panel); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.caution { margin-top: 16px; color: var(--body); font-size: 0.97rem; max-width: var(--measure); }

/* ---------- pricing ---------- */

/* The price on the left (the blue panel), and beside it, said just as
   plainly, what early access covers. */
.plans { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 16px; }
.plan { padding: clamp(26px, 3vw, 40px); display: flex; flex-direction: column; }
.plan h3 { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.015em; }
.price { margin-top: 18px; display: flex; align-items: baseline; gap: 10px; }
.price b { font-size: clamp(3.2rem, 5.6vw, 4.5rem); font-weight: 700; line-height: 0.95; letter-spacing: -0.05em; }
.plan-note { margin-top: 14px; color: var(--body); min-height: 3.2em; }
/* The button sits at the bottom of its card, never closer than 26px to
   the words above it. */
.plan .btn { margin-top: auto; }
.plan-best .plan-note { margin-bottom: 26px; }

.early .plan-note { min-height: 0; max-width: var(--measure); }
.proof { margin-top: 22px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 32px; }
.proof h4 { margin: 0 0 10px; font-size: 1rem; font-weight: 600; letter-spacing: -0.01em; }
.proof ul { display: grid; gap: 9px; }
.proof li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; align-items: start; color: var(--body); }
.proven svg { width: 18px; height: 18px; margin-top: 3px; color: var(--accent); }
/* Not proven yet: an empty ring where the tick will go. */
.unproven li::before {
  content: ""; width: 12px; height: 12px; margin: 6px 0 0 3px;
  border: 1.5px solid var(--field-line); border-radius: 50%;
}
.plan .price span { color: var(--body); }

.plan-best .rings { width: 560px; height: 560px; }
.plan-best .plan-note,
.plan-best .price span { color: var(--on-accent-mute); }

/* What paying means, said right under the button. */
.fine-print { margin-top: 18px; max-width: 62em; color: var(--mute); font-size: 0.9375rem; line-height: 1.6; text-wrap: pretty; }

.buy-message {
  display: none; margin-top: 16px; padding: 14px 18px; border-radius: var(--radius-control);
  background: var(--accent-pale); color: var(--ink); border: 1px solid #d7e4fc;
}
.buy-message.show { display: block; }

.included { margin-top: clamp(40px, 5vw, 64px); padding: clamp(26px, 3vw, 40px); display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 24px 48px; }
.included h3 { font-size: 1.375rem; font-weight: 600; line-height: 1.25; letter-spacing: -0.025em; }
.included .sub { margin-top: 12px; font-size: 1rem; }
.included .actions { margin-top: 20px; }
.included ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 32px; align-content: start; }
.included li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; }
.included svg { width: 20px; height: 20px; margin-top: 2px; color: var(--accent); }

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

.faq { display: grid; gap: 10px; max-width: 880px; }
.faq summary {
  list-style: none; cursor: pointer; position: relative;
  padding: 20px 60px 20px 24px; font-size: 1.0625rem; font-weight: 600; line-height: 1.4; letter-spacing: -0.01em;
  border-radius: var(--radius-card);
  -webkit-tap-highlight-color: transparent;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary svg {
  position: absolute; right: 24px; top: 50%; width: 16px; height: 16px; margin-top: -8px; color: var(--mute);
  transition: transform 200ms var(--ease-out);
}
.faq details[open] summary svg { transform: rotate(180deg); }
.faq details p { padding: 0 60px 22px 24px; color: var(--body); max-width: calc(var(--measure) + 84px); }

/* ---------- closing ---------- */

.closing-panel {
  padding: clamp(32px, 5vw, 64px);
  display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 28px;
}
.closing-panel h2 { max-width: 12em; }

/* ---------- footer ---------- */

footer { margin-top: var(--band); border-top: 1px solid var(--line); padding-block: 40px calc(56px + env(safe-area-inset-bottom)); color: var(--mute); font-size: 0.875rem; }
footer .wrap { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px 32px; align-items: center; }
footer .brand { font-size: 1.125rem; }
footer nav { display: flex; flex-wrap: wrap; gap: 8px 24px; }
footer nav a { color: var(--body); text-decoration: none; font-weight: 500; transition: color 150ms ease; }
.legal { grid-column: 1 / -1; max-width: var(--measure); line-height: 1.6; }
.legal a { color: var(--body); }

/* ---------- legal pages ---------- */

.doc { max-width: 760px; padding-block: clamp(40px, 6vw, 80px) var(--band); }
.doc h1 { font-size: clamp(2.2rem, 5vw, 3.25rem); }
.doc h2 { font-size: 1.375rem; font-weight: 600; line-height: 1.25; letter-spacing: -0.025em; margin-top: 44px; }
.doc p, .doc ul { margin-top: 14px; color: var(--body); max-width: var(--measure); }
.doc ul { padding-left: 1.2em; list-style: disc; }
.doc li { margin-top: 8px; }
.doc code { font-family: var(--font-mono); background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 1px 6px; font-size: 0.88em; overflow-wrap: anywhere; }
.doc a { overflow-wrap: anywhere; }
.doc .note { margin-top: 28px; padding: 18px 22px; max-width: calc(var(--measure) + 46px); border-radius: var(--radius-card); background: var(--accent-pale); border: 1px solid #d7e4fc; }
.doc .note p { margin: 0; color: var(--ink); }
.doc .back { display: inline-flex; margin-top: 48px; }

[hidden] { display: none !important; }

/* ---------- motion ---------- */

@media (prefers-reduced-motion: no-preference) {
  /* The first screen: the words rise in, the screenshot lifts after them,
     and the rings ripple out from the corner one after another. */
  .hero h1, .hero .hero-row, .hero .eyebrow { animation: rise 600ms var(--ease-out) both; }
  .hero .hero-row { animation-delay: 70ms; }
  .hero .shot { animation: lift 800ms var(--ease-out) 140ms both; }
  .hero .rings circle {
    transform-box: view-box; transform-origin: 672px 48px;
    animation: ripple 900ms var(--ease-out) both;
  }
  .hero .rings circle:nth-child(2) { animation-delay: 80ms; }
  .hero .rings circle:nth-child(3) { animation-delay: 160ms; }
  .hero .rings circle:nth-child(4) { animation-delay: 240ms; }
  .hero .rings circle:nth-child(5) { animation-delay: 320ms; }
  .hero .rings circle:nth-child(6) { animation-delay: 400ms; }

  /* Everything further down fades up as it comes into view (site.js adds
     "in"). Without the script, nothing is ever hidden. */
  .js .reveal { opacity: 0; transform: translateY(18px); transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out); }
  .js .reveal.in { opacity: 1; transform: none; }
  .js .tiles .reveal:nth-child(2), .js .looks .reveal:nth-child(2), .js .plans .reveal:nth-child(2) { transition-delay: 80ms; }
  .js .tiles .reveal:nth-child(3) { transition-delay: 120ms; }
  .js .tiles .reveal:nth-child(4) { transition-delay: 160ms; }
  .js .tiles .reveal:nth-child(5) { transition-delay: 200ms; }
  .js .tiles .reveal:nth-child(6) { transition-delay: 240ms; }
}
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }
@keyframes lift { from { opacity: 0; transform: translateY(36px); } }
@keyframes ripple { from { opacity: 0; transform: scale(0.85); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn, .faq summary svg { transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease; }
  .btn:active { transform: none; }
}

/* ---------- smaller screens ---------- */

@media (max-width: 1023px) {
  .tile-a { grid-column: 1 / -1; grid-row: auto; }
  .tile-b, .tile-c, .tile-d, .tile-e { grid-column: span 6; }
  .tile-f { grid-template-columns: minmax(0, 1fr); }
  .vault, .included { grid-template-columns: minmax(0, 1fr); }
  .top nav a.wide { display: none; }
}

@media (max-width: 767px) {
  :root { --gutter: 16px; }
  .top nav a:not(.btn) { display: none; }
  .hero-panel { padding-bottom: 120px; }
  .hero-row { grid-template-columns: minmax(0, 1fr); }
  .hero .shot { margin: -88px 8px 0; padding: 6px; }
  .hero .shot img { border-radius: 18px; }
  /* A whole app window is unreadable at phone width, so the first picture
     drops the sidebar and closes in on the page with the map. */
  .hero .shot img { aspect-ratio: 11 / 10; object-fit: cover; object-position: 85% 50%; }
  .actions .btn { flex: 1 1 100%; }
  .tiles { grid-template-columns: minmax(0, 1fr); }
  .tile-a, .tile-b, .tile-c, .tile-d, .tile-e, .tile-f { grid-column: auto; }
  .tile-b { min-height: 220px; }
  .looks, .plans, .checker, .included ul, .proof { grid-template-columns: minmax(0, 1fr); }
  .checker-answer { border-left: 0; border-top: 1px solid var(--line); }
  .plan-note { min-height: 0; }
  .faq summary { padding: 18px 52px 18px 18px; }
  .faq summary svg { right: 18px; }
  .faq details p { padding: 0 18px 20px; }
  .closing-panel { align-items: start; flex-direction: column; }
  footer .wrap { grid-template-columns: minmax(0, 1fr); }
}

/* The very narrowest screens: let the headline break where it must, and
   leave the top bar to the name alone (the same button is just below). */
@media (max-width: 359px) {
  .eyebrow { display: none; }
}
@media (max-width: 339px) {
  .nowrap { white-space: normal; }
  .top nav .btn { display: none; }
}