:root {
  --ink: #191713;
  --paper: #f4f1ea;
  --paper-dim: #ece7db;
  --orange: #e8551a;
  --orange-deep: #d64a12;
  --white: #ffffff;
  --ink-soft: #4a463f;
  --ink-faint: #6b6558;
  --paper-soft: #c9c3b4;
  --paper-faint: #8a8578;
  --line: #e2dcce;
  --line-strong: #cfc8b6;
  --shadow-card: 0 1px 2px rgba(25, 23, 19, 0.05), 0 10px 30px -14px rgba(25, 23, 19, 0.18);
  --shadow-btn: 0 1px 2px rgba(25, 23, 19, 0.15), 0 8px 20px -8px rgba(232, 85, 26, 0.5);
  --nav-h: 64px;
}

* { box-sizing: border-box; margin: 0; }

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

body {
  font-family: 'Archivo', system-ui, sans-serif;
  font-weight: 400;
  background: var(--paper);
  color: var(--ink);
  line-height: 1.6;
}

section[id] { scroll-margin-top: calc(var(--nav-h) + 12px); }

.num { font-variant-numeric: tabular-nums; }

h1 { font-size: clamp(34px, 5vw, 52px); font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; }
h2 { font-size: clamp(24px, 3.2vw, 32px); font-weight: 700; letter-spacing: -0.01em; margin-bottom: 20px; }
h3 { font-size: 15px; font-weight: 600; }

section, .hero { padding: 84px 6vw; }

.plabel {
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.16em;
  color: var(--orange); text-transform: uppercase; margin-bottom: 10px;
}

/* nav: sticky, translucent, blurred */
.nav {
  position: sticky; top: 0; z-index: 50;
  display: flex; justify-content: space-between; align-items: center;
  height: var(--nav-h); padding: 0 6vw;
  background: rgba(244, 241, 234, 0.82);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid var(--line);
}
.lockup {
  display: flex; align-items: center; gap: 10px;
  font-weight: 800; font-size: 16px; letter-spacing: 0.03em;
  color: var(--ink); text-decoration: none;
  /* the wordmark is one word and the nav has a fixed height: let it shrink and
     it wraps under the mark and pushes the row out of the bar */
  flex: none; white-space: nowrap;
}
.nav-links { display: flex; gap: 26px; align-items: center; }
/* Nothing in the bar may wrap. `.nav` is a fixed `--nav-h` tall, so a label
   that breaks mid-phrase does not make the bar taller, it spills out of it and
   lands on top of the lockup. This is what "Sign in" and the CTA were doing on
   a 390px phone before 2026-08-25. */
.nav-links a, .lockup span { white-space: nowrap; }
.nav-cta-short { display: none; }
.nav-links a:not(.btn) {
  position: relative; color: var(--ink-soft); text-decoration: none;
  font-size: 14px; font-weight: 500; padding: 4px 0;
  transition: color 0.18s ease;
}
.nav-links a:not(.btn)::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
  background: var(--orange); border-radius: 2px;
  transform: scaleX(0); transform-origin: left; transition: transform 0.22s ease;
}
.nav-links a:not(.btn):hover { color: var(--ink); }
.nav-links a:not(.btn):hover::after,
.nav-links a:not(.btn).active::after { transform: scaleX(1); }
.nav-links a:not(.btn).active { color: var(--ink); }

/* buttons: orange = primary action */
.btn {
  display: inline-block; background: var(--orange); color: var(--white);
  font-family: inherit; font-weight: 600; font-size: 15px;
  padding: 13px 24px; border-radius: 9px; border: 0;
  text-decoration: none; cursor: pointer;
  box-shadow: var(--shadow-btn);
  transition: background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.btn:hover {
  background: var(--orange-deep); transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(25, 23, 19, 0.15), 0 12px 26px -8px rgba(232, 85, 26, 0.55);
}
.btn:active { transform: translateY(0); box-shadow: 0 1px 2px rgba(25, 23, 19, 0.2); }
.btn-sm { padding: 9px 16px; font-size: 13.5px; }
.btn-block { display: block; width: 100%; text-align: center; }
/* The second door. Same size and shape as the orange one so the pair reads as a
   choice rather than a button and an afterthought, but it never competes for the
   eye: the fast way in is the filled one. */
.btn-ghost {
  background: transparent; color: var(--ink);
  border: 1px solid var(--line-strong); box-shadow: none;
}
.btn-ghost:hover {
  background: var(--paper-dim); color: var(--ink);
  border-color: var(--ink-faint); box-shadow: none; transform: translateY(-1px);
}
.dark .btn-ghost { color: var(--paper); border-color: var(--paper-faint); }
.dark .btn-ghost:hover { background: rgba(244, 241, 234, 0.08); color: var(--paper); border-color: var(--paper-soft); }

a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 2px solid var(--orange); outline-offset: 2px; border-radius: 4px;
}

/* hero */
.hero { display: grid; grid-template-columns: 0.88fr 1.12fr; gap: clamp(28px, 3vw, 44px); align-items: center; padding-top: 72px; }
.hero-sub { font-size: 17px; color: var(--ink-soft); margin: 18px 0 28px; max-width: 46ch; }
.micro { font-size: 13px; color: var(--ink-faint); margin-top: 16px; max-width: 52ch; }
.dark .micro { color: var(--paper-faint); }
.dark .micro a { color: var(--paper-soft); text-decoration-color: var(--paper-faint); }
.dark .micro a:hover { color: var(--paper); }

.hero-price {
  font-size: 15.5px; color: var(--ink-soft); margin: 0 0 26px; max-width: 46ch;
  padding-left: 14px; border-left: 3px solid var(--orange);
}
.hero-price strong { color: var(--ink); font-weight: 700; }

/* The card, said before anyone clicks rather than at the checkout. Sits above the
   fold with the price, because "free trial" and "give me a card" arriving in that
   order is the thing that feels like a switch. */
.hero-trial {
  font-size: 14.5px; line-height: 1.6; color: var(--ink-soft);
  margin: 0 0 22px; max-width: 46ch;
}
.hero-trial strong { color: var(--ink); font-weight: 700; }

/* Store buttons. Placeholders until the listings are live: see the note in
   index.html. `.soon` is the not-yet state, and removing it is what turns
   these into ordinary links. */
/* The call to action and the two store buttons share one two-column grid, so
   every edge in the block agrees. Before this the button sized itself to its
   text at 193px against 205px buttons: near enough to look like a mistake
   rather than a difference. The button now occupies the first column exactly. */
.hero-actions {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 10px; max-width: 420px; margin-top: 0;
}
/* One button per column, so each is exactly the width of the store button under
   it. It was pinned to column 1 when there was only one. */
.hero-actions .btn { width: 100%; text-align: center; }
/* The pair spans the whole grid and splits it the same way, so a store button is
   exactly the width of the button above it. */
.stores {
  grid-column: 1 / -1;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px;
}
.store {
  display: grid; grid-template-columns: 22px 1fr; align-items: center; gap: 11px;
  background: var(--ink); color: var(--paper);
  border-radius: 9px; padding: 9px 14px; text-decoration: none;
  transition: background 0.18s ease, transform 0.18s ease, opacity 0.18s ease;
}
.store:hover { background: #2a271f; transform: translateY(-1px); }
/* Apple's mark carries more ink than the Play triangle at the same box, so it is
   set a little smaller to look the same size. */
.store-glyph { height: 19px; width: 22px; fill: currentColor; justify-self: center; }
.store[data-store="ios"] .store-glyph { height: 17px; }
.store-text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.store-pre {
  font-size: 9.5px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--paper-faint); white-space: nowrap;
}
.store-name { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; }
.store.soon { opacity: 0.72; }
.store.soon:hover { opacity: 1; }

.hero-trust { list-style: none; padding: 0; margin: 22px 0 0; display: flex; flex-wrap: wrap; gap: 8px 20px; }
.hero-trust li {
  font-size: 13px; font-weight: 500; color: var(--ink-soft);
  display: flex; align-items: center; gap: 7px;
}
.hero-trust li::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: var(--orange); flex: none;
}

/* hero art: the portal in a browser frame, two phones fanned over its corner */
.hero-art { position: relative; padding-bottom: 6%; }
.hero-art::before {
  content: ''; position: absolute; inset: -10% -6% -6% -10%;
  background: radial-gradient(58% 58% at 68% 32%, rgba(232, 85, 26, 0.16), transparent 70%);
  filter: blur(10px); z-index: 0;
}
.hero-art > * { position: relative; z-index: 1; }

.browser {
  background: var(--white); border: 1px solid var(--line-strong); border-radius: 12px;
  overflow: hidden; box-shadow: 0 2px 6px rgba(25, 23, 19, 0.06), 0 28px 64px -26px rgba(25, 23, 19, 0.4);
}
.browser-bar {
  display: flex; align-items: center; gap: 6px;
  padding: 9px 12px; background: var(--paper-dim); border-bottom: 1px solid var(--line);
}
.browser-bar .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--line-strong); flex: none; }
.browser-bar .addr {
  margin-left: 10px; flex: 1; background: var(--white); border: 1px solid var(--line);
  border-radius: 20px; padding: 3px 12px; font-size: 11px; color: var(--ink-faint);
}
.browser-body { background: var(--paper); font-size: 0; }
.browser-body img { display: block; width: 100%; height: auto; }

/* phones: iPhone 17 Pro Max proportions, drawn to the device rather than a
   rounded box. The screen is 440x956pt with a 55pt corner. The frame band is
   3.6% of the screen's width on every side, which is what the real body
   measures (77.6mm across a 71.4mm screen). The 1.92% it used to be is why
   the phones read as stickers rather than devices. Everything below is a
   percentage, so the one rule serves the ~130px hero phones and the 236px
   ones in the app section. Vertical radii are the horizontal radius divided
   by the aspect ratio, which is what keeps the corners circular, not oval. */
.phone {
  position: relative;
  padding: 3.6%;
  /* body corner = screen corner (55pt) + the 15.8pt band, over a 471.7pt body */
  border-radius: 15% / 7.16%;
  background: linear-gradient(142deg, #7a746a 0%, #2a261f 15%, #17140f 50%, #555045 84%, #1f1c16 100%);
  box-shadow:
    /* the brushed rail: a catch-light on the outermost edge, then the dark
       shoulder just inside it, which is what stops the band reading flat */
    inset 0 0 0 1.5px rgba(226, 219, 205, 0.5),
    inset 0 0 0 3px rgba(10, 9, 7, 0.55),
    0 1px 2px rgba(25, 23, 19, 0.24),
    0 22px 52px -18px rgba(25, 23, 19, 0.62);
}
.phone img {
  display: block; width: 100%; height: auto;
  border-radius: 12.5% / 5.75%;
  background: var(--paper);
  /* the glass sits proud of the band; without this line the screen and the
     frame bleed into each other at hero size */
  box-shadow: 0 0 0 1px rgba(6, 5, 4, 0.6);
}
/* Side buttons, in iPhone 17 order: the left rail carries the Action button
   above the volume pair, the right carries power and, below it, Camera
   Control. One pseudo-element per side, each masked into its bands so the
   whole rail stays a single box. Vertical measures are % of body height, so
   they hold their proportions at every size the frame is used at. */
.phone::before, .phone::after {
  content: ''; position: absolute; width: 1.5%; border-radius: 1px;
}
/* right rail: power (top 47.2% of the span), then Camera Control */
.phone::before {
  right: -0.72%; top: 27.4%; height: 19.9%;
  background: linear-gradient(90deg, #23201c, #6f6a60);
  -webkit-mask-image: linear-gradient(180deg,
    #000 0 47.2%, transparent 47.2% 76.4%, #000 76.4% 100%);
  mask-image: linear-gradient(180deg,
    #000 0 47.2%, transparent 47.2% 76.4%, #000 76.4% 100%);
}
/* left rail: Action button, then the volume pair */
.phone::after {
  left: -0.72%; top: 20.5%; height: 21%;
  background: linear-gradient(90deg, #6f6a60, #23201c);
  -webkit-mask-image: linear-gradient(180deg,
    #000 0 19%, transparent 19% 35.7%,
    #000 35.7% 64.3%, transparent 64.3% 71.4%,
    #000 71.4% 100%);
  mask-image: linear-gradient(180deg,
    #000 0 19%, transparent 19% 35.7%,
    #000 35.7% 64.3%, transparent 64.3% 71.4%,
    #000 71.4% 100%);
}

/* The pair sits in the browser frame's bottom-right corner. Sized up on
   2026-08-25 (21% -> 26% front, 18% -> 22% back): at the old size the front
   screen was a 117px-wide list, which reads as a white rectangle with an
   orange dot rather than as an inventory. Rotation lives in a custom property
   so the entrance keyframe, which is transform-based, can preserve the fan.
   `right` stays off zero because these are ROTATED boxes: the front phone's
   corner swings a few px past the value set here. */
.hero-phone { position: absolute; z-index: 2; transform: rotate(var(--rot, 0deg)); }
.hero-phone-front { --rot: 3deg; width: 26%; min-width: 112px; right: 2%; bottom: -16%; z-index: 3; }
.hero-phone-back { --rot: -4deg; width: 22%; min-width: 96px; right: 21%; bottom: -4%; }

/* the app section */
.shots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 8px; }
.shot { margin: 0; }
/* Percentage padding resolves against the CONTAINING BLOCK's width, never the
   element's own. In the hero the wrapper is sized to the phone, so the 3.6% on
   `.phone` lands where it was meant to (measured 3.2%). Here the phone is 236px
   inside a ~478px cell, so the same rule drew a 17px band: 7.3% of the body,
   more than double, and the frame came out at a 0.50 aspect against the real
   iPhone 17 Pro's 0.481. Stubby, thick-rimmed, and the three biggest phones on
   the page. Stated in px at the two widths this section actually uses. */
.shot .phone { max-width: 236px; margin: 0 auto; padding: 8px; }
.shot figcaption { font-size: 14px; color: var(--ink-soft); line-height: 1.6; margin-top: 16px; max-width: 34ch; }
.shot figcaption strong { display: block; font-size: 15px; font-weight: 700; color: var(--ink); margin-bottom: 4px; }

/* dark + dim sections */
.dark { background: var(--ink); color: var(--paper); }
.dark h2 { color: var(--paper); max-width: 34ch; }
.dim { background: var(--paper-dim); }

.deal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.deal { border-radius: 14px; padding: 26px 28px; }
.deal h3 { font-size: 13px; font-weight: 700; letter-spacing: 0.08em; margin-bottom: 12px; }
.deal p { font-size: 15px; line-height: 1.65; }
.deal-usual { border: 1px solid #3a362d; }
.deal-usual h3 { color: var(--paper-faint); }
.deal-usual p { color: var(--paper-soft); }
.deal-ours { border: 1px solid rgba(232, 85, 26, 0.55); background: rgba(232, 85, 26, 0.07); }
.deal-ours h3 { color: var(--orange); }

/* migration steps */
.section-sub { font-size: 15.5px; color: var(--ink-soft); margin-bottom: 30px; max-width: 58ch; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.step {
  background: var(--white); border: 1px solid var(--line); border-radius: 14px; padding: 24px;
  box-shadow: var(--shadow-card);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.step:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(25, 23, 19, 0.06), 0 16px 36px -14px rgba(25, 23, 19, 0.22); }
.step-n { font-weight: 800; font-size: 20px; color: var(--orange); }
.step h3 { margin: 8px 0; font-size: 16px; }
.step p { font-size: 14px; color: var(--ink-soft); line-height: 1.6; }

/* pricing */
.price-card {
  background: var(--white); border: 1px solid var(--line-strong); border-radius: 16px;
  padding: 32px; max-width: 440px; box-shadow: var(--shadow-card);
}
/* Wraps rather than overflows: at 320px the 42px price, "/month" and the
   yearly pill together are wider than the card's content box, and the pill
   pushed the whole PAGE about 20px past the viewport. */
.price-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.price { font-size: 42px; font-weight: 800; letter-spacing: -0.02em; }
.per { font-weight: 500; color: var(--ink-soft); }
.pill {
  margin-left: auto; background: var(--paper-dim); color: var(--ink);
  font-size: 12.5px; font-weight: 600; padding: 5px 12px; border-radius: 999px;
}
.price-list {
  list-style: none; padding: 18px 0 20px; margin: 20px 0 0;
  border-top: 1px solid var(--line);
  display: grid; gap: 11px; font-size: 14.5px; font-weight: 500;
}

/* cta form */
.cta-inner { max-width: 520px; }
.cta-sub { font-size: 15.5px; line-height: 1.65; color: var(--paper-soft); margin-bottom: 24px; }
#lead-form { display: grid; gap: 12px; }
#lead-form input {
  background: var(--paper); border: 1px solid transparent; border-radius: 9px;
  padding: 13px 15px; font-family: inherit; font-size: 14.5px; color: var(--ink);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
#lead-form input:focus {
  outline: none; border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(232, 85, 26, 0.25);
}
#lead-form input::placeholder { color: var(--ink-faint); }
.hp { position: absolute; left: -9999px; }
.lead-done-msg { font-size: 16px; font-weight: 600; color: var(--paper); padding: 12px 0; }

/* footer */
.foot {
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 28px 6vw; font-size: 13px; color: var(--ink-faint);
  border-top: 1px solid var(--line);
}
.foot-brand { font-weight: 600; }
.foot-links { display: flex; gap: 18px; flex-wrap: wrap; }
.foot-links a { color: var(--ink-faint); text-decoration-color: var(--line-strong); transition: color 0.18s ease; }
.foot-links a:hover { color: var(--ink); }
/* The guides get their own row rather than joining the first: the footer is
   space-between, so a third group would squeeze the other two on any width that
   is not generous. Quieter than the utility links because these are for crawlers
   and for the one reader in fifty who wants the long version. */
.foot-guides { flex-basis: 100%; margin-top: 14px; gap: 18px; font-size: 12.5px; }

/* The competitor arithmetic, offered where somebody is looking at the price and
   deciding, which is the only moment it is useful rather than combative. */
.price-compare {
  font-size: 12.5px; line-height: 1.6; color: var(--ink-faint);
  text-align: center; margin-top: 14px; max-width: 46ch; margin-left: auto; margin-right: auto;
}
.price-compare a { color: var(--ink-soft); }
.price-compare a:hover { color: var(--ink); }
/* The long version of the argument a section has just made, at its foot. */
.sec-more { margin-top: 22px; }
.sec-more a { color: var(--paper-soft); text-decoration-color: var(--paper-faint); }
.sec-more a:hover { color: var(--paper); }

/* legal prose: privacy and terms.
   Two things were wrong here. The column was `max-width: 640px` with `padding: 0
   6vw`, and because everything is border-box the padding came out of the 640: at
   a 1500px window the measure was 460px and got narrower the wider the window
   went. It also had no auto margin, so the column hugged the left edge of an
   otherwise empty page. Second, `display: grid; gap: 16px` spaced every child
   equally and `h2`'s own margin-bottom stacked on top of it, so a heading sat
   closer to the paragraph above than to the text it introduced. Headings need
   more space before than after, which is what the margins below do. */
.prose { max-width: 700px; margin: 0 auto; padding: 76px 24px 104px; }
.prose h1 { font-size: 40px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; margin-bottom: 10px; }
/* The dateline under the title on the terms page. */
.prose h1 + p { font-size: 15px; color: var(--ink-faint); margin-bottom: 30px; }
.prose h2 {
  font-size: 20px; font-weight: 700; letter-spacing: -0.01em;
  margin: 44px 0 12px; padding-top: 26px; border-top: 1px solid var(--line);
}
.prose p { color: var(--ink-soft); font-size: 16px; line-height: 1.7; margin-bottom: 16px; }
.prose p:last-child { margin-bottom: 0; }
.prose strong { color: var(--ink); font-weight: 600; }
.prose a { color: var(--ink); text-decoration-color: var(--line-strong); transition: text-decoration-color 0.18s ease; }
.prose a:hover { text-decoration-color: var(--orange); }
/* Tables and quotes exist for one page, the year-two arithmetic, and that page is
   nothing but a table, a quote and a sum. Numbers are tabular so a column of money
   lines up digit for digit, which is the only way a reader checks the arithmetic. */
.prose table {
  width: 100%; border-collapse: collapse; margin: 4px 0 24px;
  font-size: 15px; color: var(--ink-soft);
}
.prose thead th {
  text-align: left; font-size: 11px; letter-spacing: 1.1px; text-transform: uppercase;
  color: var(--ink-faint); font-weight: 700; padding: 0 14px 8px 0;
  border-bottom: 1px solid var(--line-strong);
}
.prose tbody td {
  padding: 10px 14px 10px 0; border-bottom: 1px solid var(--line);
  font-variant-numeric: tabular-nums;
}
.prose tbody tr:last-child td { border-bottom: 0; }
.prose tbody td:first-child { color: var(--ink); font-weight: 600; }
.prose s { color: var(--ink-faint); }
/* Their words, marked as theirs. The rule is the quotation. */
.prose blockquote {
  margin: 0 0 16px; padding: 2px 0 2px 18px; border-left: 3px solid var(--orange);
  color: var(--ink); font-size: 16px; line-height: 1.7;
}
@media (max-width: 560px) {
  /* A five-column money table does not fit a phone, and shrinking the type to make
     it fit is how a comparison page stops being checkable. It scrolls instead. */
  .prose table { display: block; overflow-x: auto; white-space: nowrap; }
}

@media (max-width: 520px) {
  .prose { padding: 52px 22px 72px; }
  .prose h1 { font-size: 31px; }
}

/* responsive */
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; }
  .deal-grid { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  section, .hero { padding: 60px 6vw; }
  /* Stacked, the art gets the full column, so the phones need room under it. */
  .hero-art { margin-top: 8px; padding-bottom: 6%; }
  /* The room has to come from the SECTION, not from the art. `.hero-phone-front`
     sits at `bottom: -16%`, and a percentage offset resolves against the
     containing block's height, which is the art. Padding the art makes it taller,
     which moves the phone down by the same proportion: the overhang got worse,
     25px to 32px, when that was tried. Padding the hero moves the boundary
     instead and the phone stays put.
     Needed because the front phone went 21% to 26% wide on 2026-08-25 and nothing
     below it was adjusted, so from roughly 430 to 900px it hung into the dark
     section and was cut off by it. Measured across fourteen widths from 360 to
     1440: the largest overhang was 32px, this clears it with room. */
  .hero { padding-bottom: 116px; }
  .shots { grid-template-columns: 1fr; gap: 34px; }
  .shot { display: grid; grid-template-columns: 150px 1fr; gap: 20px; align-items: center; }
  .shot figcaption { margin-top: 0; }
  /* The section links go here, not at 520px where they used to. Measured: the
     full bar (lockup + three section links + Sign in + the full CTA phrase)
     needs about 705px, so between 521 and 710 it did not fit. It used to wrap
     there; since the bar is `white-space: nowrap` it would now push the page
     sideways instead, which is worse. Hiding them at the same width the layout
     already goes single-column keeps it to one breakpoint. */
  .nav-links a:not(.btn):not(.sign-in) { display: none; }
}
@media (max-width: 560px) {
  .browser-body { padding-bottom: 112px; }
  /* `right` is 4%, not the 2% the wide layout uses: these are ROTATED boxes, so
     the front phone's corner swings a few px past whatever is set here, and at
     this width 2% put its bounding box exactly on the art's right edge with no
     slack left. Measured in a 390px frame: 0px gap at 2%, 13px at 4%. */
  .hero-phone-front { width: 34%; right: 4%; }
  .hero-phone-back { width: 29%; right: 24%; }
  .shot { grid-template-columns: 1fr; }
  .shot .phone { max-width: 210px; padding: 7px; }
}
@media (max-width: 520px) {
  /* The section links are already gone by here; the way back into the app
     stays. Even with them gone, the lockup + "Sign in" + the full CTA
     phrase want about 414px of a 343px row at 390px wide, which is why both
     labels used to wrap. The button takes its short label here and everything
     else comes down a size. Measured need at 360px after this: ~287px of 324. */
  .nav { padding: 0 5vw; }
  .nav-links { gap: 14px; }
  .lockup { font-size: 14px; gap: 8px; }
  .lockup img { width: 22px; height: 22px; }
  .nav .sign-in { font-size: 13px; }
  .nav .btn-sm { padding: 8px 13px; font-size: 13px; }
  .nav-cta-long { display: none; }
  .nav-cta-short { display: inline; }
  /* Two doors will not sit beside each other in half of a 390px screen: the
     second label wraps and the pair looks broken rather than parallel. Each one
     takes the full width; the store buttons under them stay two up. */
  .hero-actions .btn { grid-column: 1 / -1; }
  /* Once the price line wraps, `margin-left: auto` would strand the pill on
     the right of its own row; it reads as part of the price on the left. */
  .pill { margin-left: 0; }
}
@media (max-width: 380px) {
  /* Last resort on the smallest phones still in use: at this width the lockup
     and the CTA alone fill the row, so the way back into the app falls back to
     the two places it also lives, the closing CTA block and the footer. */
  .nav-links .sign-in { display: none; }
}

/* ── Motion: one orchestrated hero load ──────────────────────────────
   The copy rises line by line, the art crossfades in behind it, and the two
   phones are the last beat: back first, front a moment later, so the fan
   assembles rather than arriving. Transform and opacity only, and the whole
   block sits inside `no-preference`, so a visitor who has asked for less
   motion gets the finished hero with no entrance at all. */
@media (prefers-reduced-motion: no-preference) {
  .hero-copy > * {
    opacity: 0;
    transform: translateY(12px);
    animation: rise 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  }
  .hero-copy > *:nth-child(1) { animation-delay: 0.05s; }
  .hero-copy > *:nth-child(2) { animation-delay: 0.13s; }
  .hero-copy > *:nth-child(3) { animation-delay: 0.21s; }
  .hero-copy > *:nth-child(4) { animation-delay: 0.29s; }
  .hero-copy > *:nth-child(5) { animation-delay: 0.37s; }
  .hero-copy > *:nth-child(6) { animation-delay: 0.45s; }

  .hero-art { opacity: 0; animation: fade-in 0.8s ease 0.3s forwards; }

  /* The phones start hidden, so they stay out of the art's own fade and only
     appear once it has settled. The keyframe re-applies --rot: a transform
     animation replaces the rotate on `.hero-phone`, and without it the fan
     would flatten the moment the animation took hold. */
  .hero-phone {
    opacity: 0;
    animation: phone-in 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  }
  .hero-phone-back { animation-delay: 1.05s; }
  .hero-phone-front { animation-delay: 1.2s; }
}
@keyframes rise {
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fade-in {
  to { opacity: 1; }
}
@keyframes phone-in {
  from { opacity: 0; transform: translateY(14px) rotate(var(--rot, 0deg)); }
  to   { opacity: 1; transform: translateY(0) rotate(var(--rot, 0deg)); }
}


/* The pricing card's second door, and the divider between the two in the closing
   section. Added with the self-serve signup: the migration link used to be the
   only way in, and the site read as though it were. */
.price-alt { font-size: 13px; color: var(--ink-faint); text-align: center; margin-top: 12px; }
.price-alt a { color: var(--ink-soft); }
.cta-note { margin-top: 12px; }
.cta-or {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 14px;
  margin: 26px 0 22px;
}
.cta-or::before, .cta-or::after { content: ''; height: 1px; background: var(--paper-faint); opacity: 0.45; }
.cta-or span { font-size: 12px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--paper-faint); }


/* The pricing card and the closing section were the only two blocks on the page
   that did not use its width: a 440px card and a 520px column stranded at the
   left of a full-width band, with over a thousand pixels of nothing beside them.
   Every other section here is two or three across. */
.price-card { max-width: 860px; }
@media (min-width: 901px) {
  .price-card {
    display: grid; grid-template-columns: 1fr 1.15fr; gap: 0 40px; align-items: start;
  }
  .price-main { display: flex; flex-direction: column; }
  .price-card .price-list { margin: 0; border-top: 0; padding-top: 4px; }
  /* The rule between the two halves replaces the one that used to sit under the
     price when this was a single column. */
  .price-card .price-list { border-left: 1px solid var(--line); padding-left: 40px; }
  .price-card .btn-block { margin-top: auto; }
}

/* Two ways in, shown as two. The heading promised a pair and the section listed
   them one under the other with an OR in between. */
@media (min-width: 901px) {
  .cta-inner { max-width: 980px; }
  .cta-two { display: grid; grid-template-columns: 1fr 1fr; gap: 0 48px; align-items: start; }
  .cta-two > div + div { border-left: 1px solid rgba(244, 241, 234, 0.18); padding-left: 48px; }
  .cta-or { display: none; }
}
.cta-way-title {
  font-size: 12px; letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--orange); font-weight: 700; margin-bottom: 10px;
}
.cta-way-sub { font-size: 14.5px; line-height: 1.6; color: var(--paper-soft); margin-bottom: 18px; }