/* Static marketing pages (ARCHITECTURE §20). No selector depends on JS.

   Phase 11 D6: ONE breakpoint. The mockup's Desktop/Mobile toggle is a device
   for showing two artboards side by side, not a control Follo ships — where
   the design's own `repeat(auto-fit, minmax(…, 1fr))` already collapses a grid,
   no media query is written at all. */

body { overflow-x: clip; }

.skip-link {
  position: absolute;
  inset-block-start: var(--space-2);
  inset-inline-start: var(--space-2);
  z-index: 2;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  transform: translateY(-200%);
}

.skip-link:focus { transform: none; }

.marketing-header,
.marketing-main,
.marketing-footer {
  inline-size: min(100%, var(--content-width));
  margin-inline: auto;
  padding-inline: 44px;
}

/* ---- header ------------------------------------------------------------ */

.marketing-header {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding-block: 22px;
  border-block-end: 1px solid var(--hairline);
}

.wordmark {
  color: var(--text);
  font-size: calc(20px * var(--type-scale));
  font-weight: 800;
  letter-spacing: -.03em;
  text-decoration: none;
}

.marketing-header nav { margin-inline-start: auto; }

/* DIRECT children throughout: the account menu (D4) is a <ul> nested inside
   the auth <li>, and an unscoped `nav ul` / `nav a` rule reaches into it and
   restyles the dropdown as a nav row. */
.marketing-header nav > ul {
  display: flex;
  flex-wrap: wrap;
  gap: 26px;
  align-items: center;
  padding: 0;
  margin: 0;
  list-style: none;
  font-size: calc(14px * var(--type-scale));
}

.marketing-header nav > ul > li { max-inline-size: none; }
.marketing-header nav > ul > li > a { color: var(--text-secondary); text-decoration: none; }
.marketing-header nav > ul > li > a:hover { color: var(--text); }

/* Pricing is the one nav item the design carries in accent. */
.marketing-header nav > ul > li > a[href="/pricing"] { color: var(--accent); }

.marketing-header nav > ul > li > a[aria-current="page"] {
  color: var(--text);
  font-weight: 700;
}

/* D5. The auth slot: a Sign in pill when signed out, the avatar and its menu
   once marketing-header.js has confirmed a session. The <a> itself carries no
   class — `pages.test.mjs` pins the signed-out markup byte for byte.

   Part B settles Part A step 4's open question: the slot is a SIBLING of <nav>,
   not an <li> inside it. The design makes it the header's third flex child and
   moves it to order 2 at mobile — wordmark and account on row one, nav on row
   two (design.html:2040-2044) — and an <li> cannot leave its list to do that.
   `marketing-header.js` finds it by [data-signed-out] and needed no change. */
.header-auth { flex: none; margin-inline-start: 26px; }

.marketing-header .header-auth > a {
  display: inline-flex;
  align-items: center;
  padding: 9px 16px;
  border: 1px solid var(--accent);
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--on-accent);
  font-size: calc(13.5px * var(--type-scale));
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.marketing-header .header-auth > a:hover { color: var(--on-accent); }

/* ---- page body --------------------------------------------------------- */

.marketing-main { padding-block: 0; }

.hero {
  display: grid;
  gap: 40px;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  align-items: center;
  padding-block: 64px 56px;
}

.hero-copy { max-inline-size: 560px; }
.hero .lede { max-inline-size: none; }

/* Design 163-165: the photo sits in a panel, not flush on the page ground.
   18px there; --radius-lg is the scale's nearest step and radii are tokens. */
.hero-panel {
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-veil);
}

.hero-panel img {
  inline-size: 100%;
  block-size: 300px;
  border-radius: var(--radius-md);
  object-fit: cover;
}

.hero h1 {
  margin-block-end: 20px;
  font-size: calc(clamp(2rem, 5.2vw, 50px) * var(--type-scale));
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -.035em;
  text-wrap: pretty;
}

.lede {
  max-inline-size: 46ch;
  margin-block-end: 28px;
  color: var(--text-secondary);
  font-size: calc(18px * var(--type-scale));
  line-height: 1.55;
  text-wrap: pretty;
}

.hero-note {
  margin-block-start: 18px;
  color: var(--text-muted);
  font-size: calc(13px * var(--type-scale));
}

/* /for/realtors (Nashville campaign Phase 3): the hero panel draws the
   mechanism — interest, feedback, change, re-engagement, lead — out of the phone mockup's
   rows. Static; nothing in it is a control. */
.mechanism {
  display: grid;
  gap: 14px;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

/* A timeline, not a list: a numbered dot per step, joined by a line, and a
   caption that narrates while the card shows the screen. */
.mechanism li {
  position: relative;
  display: grid;
  gap: 5px;
  padding-inline-start: 34px;
  counter-increment: step;
}
.mechanism li::before {
  content: counter(step);
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  display: grid;
  place-items: center;
  inline-size: 22px;
  block-size: 22px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  font-size: calc(12px * var(--type-scale));
  font-weight: 700;
}
.mechanism li:not(:last-child)::after {
  content: "";
  position: absolute;
  inset-block: 26px -12px;
  inset-inline-start: 10px;
  inline-size: 2px;
  background: var(--border);
}
.mechanism-step {
  min-block-size: 22px;
  align-content: center;
  display: grid;
  font-size: calc(13px * var(--type-scale));
  font-weight: 700;
}

@media (min-width: 900px) {
  .hero--realtors { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
}

.mechanism .phone-row,
.mechanism .phone-alert { display: flex; padding-block: 10px; }
.mechanism .phone-alert { flex-direction: column; }

.mechanism svg {
  flex: none;
  inline-size: 18px;
  block-size: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* .mechanism beats .hero-panel img, the hero's full-width photo rule. */
.mechanism .mechanism-photo {
  flex: none;
  inline-size: 72px;
  block-size: 48px;
  border-radius: var(--radius-sm);
  object-fit: cover;
}
.mechanism-icon {
  display: grid;
  flex: none;
  place-items: center;
  inline-size: 36px;
  block-size: 36px;
  border-radius: 50%;
  background: var(--accent-tint);
  color: var(--accent);
}

/* Step 2: the feedback answer beside the "what might help" tiles. A picture
   of the follo page, not controls. Each step is a size container: the two
   halves sit side by side, with a rule between, when the step is wide
   enough, and stack when it isn't; the four options go two by two until
   there's room for one row. */
.mechanism li { container-type: inline-size; }
.explore {
  display: grid;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
}
.explore-side { display: grid; align-content: start; gap: 8px; }
.explore-ask { color: var(--text-muted); font-size: calc(12px * var(--type-scale)); }
.explore-ask--strong { color: var(--text); font-weight: 600; }
.explore-chosen {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-self: start;
  padding: 7px 12px;
  border-radius: var(--radius-md);
  background: var(--accent-tint);
  color: var(--accent);
  font-size: calc(13px * var(--type-scale));
  font-weight: 700;
  white-space: nowrap;

  & svg { inline-size: 20px; block-size: 20px; }
}
.explore-options { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.explore-option {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 8px 10px;
  border-radius: var(--radius-md);
  color: var(--text);
  font-size: calc(12px * var(--type-scale));
  line-height: 1.25;
}
.explore-option--credit { background: var(--tile-credit-bg); & svg { color: var(--tile-credit-fg); } }
.explore-option--financing { background: var(--tile-financing-bg); & svg { color: var(--tile-financing-fg); } }
.explore-option--price { background: var(--tile-price-bg); & svg { color: var(--tile-price-fg); } }
.explore-option--unsure { background: var(--surface-sunken); & svg { color: var(--text-muted); } }
@container (min-width: 460px) {
  .explore { grid-template-columns: minmax(min-content, .8fr) minmax(0, 1.2fr); gap: 16px; }
  .explore-side + .explore-side { padding-inline-start: 16px; border-inline-start: 1px solid var(--border); }
}
@container (min-width: 620px) {
  .explore-options { grid-template-columns: repeat(4, 1fr); }
}

.scenes {
  display: grid;
  gap: 26px;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
}
.scenes img {
  inline-size: 100%;
  block-size: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.scenes figcaption {
  margin-block-start: 10px;
  color: var(--text-secondary);
  font-size: calc(14.5px * var(--type-scale));
  line-height: 1.6;
}

.alongside { max-inline-size: 420px; margin-block-start: 20px; }
.alongside .phone-shot { block-size: 96px; }
.alongside .phone-card-body { flex-wrap: wrap; }
.alongside .phone-row-text { flex: 1 0 auto; }
.alongside figcaption {
  margin-block-start: 10px;
  color: var(--text-muted);
  font-size: calc(13px * var(--type-scale));
}

@media (max-width: 600px) {
  /* Cold ad traffic lands here on a phone: problem, mechanism and CTA
     all above an 844px fold, so the mechanism's rows go to one line each. */
  .hero--realtors { gap: 16px; padding-block: 20px 40px; }
  .hero--realtors h1 { margin-block-end: 12px; }
  .hero--realtors .lede { margin-block-end: 16px; font-size: calc(16px * var(--type-scale)); }
  .hero--realtors .hero-note { margin-block-start: 10px; }
  .hero--realtors .hero-panel { padding: 8px; }
  .mechanism { gap: 8px; }
  .mechanism li { gap: 3px; }
  .mechanism li:not(:last-child)::after { inset-block-end: -8px; }
  .mechanism .phone-thumb,
  .mechanism .mechanism-photo,
  .mechanism-icon,
  .mechanism .phone-row-meta,
  .mechanism .phone-price s { display: none; }
  /* A row step is its caption, then just its price or pill, on one line
     when both fit and the pill under the caption when they don't. */
  .mechanism li:has(.phone-row) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 4px 10px;
  }
  .mechanism .phone-row .phone-row-title,
  .mechanism .phone-row-text:not(:has(.phone-price)) { display: none; }
  .mechanism .phone-row { padding: 0; border: 0; background: none; }
  .mechanism .phone-alert { padding-block: 8px; }
  .mechanism .phone-pill { padding-block: 5px; }
}

.section { padding-block: 30px 56px; }
.section--ruled { border-block-start: 1px solid var(--hairline); }
/* A full-bleed warm band. The page ground is white (D2), so this section is
   set off by its own colour rather than by a rule. `50vw - 50%` is the usual
   escape from a constrained container; `overflow-x: clip` on <body> is
   what keeps a scrollbar from turning that into horizontal scroll. */
.section--warm {
  margin-inline: calc(50% - 50vw);
  padding-inline: calc(50vw - 50% + 44px);
  background: var(--surface-warm);
}

.steps {
  display: grid;
  gap: 28px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  padding: 0;
  list-style: none;
}

.step { max-inline-size: none; }

.step-number {
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 30px;
  block-size: 30px;
  margin-block-end: 10px;
  border-radius: 50%;
  background: var(--accent-warm);
  color: var(--text);
  font-size: calc(14px * var(--type-scale));
  font-weight: 700;
}

.step h3 {
  margin-block-end: 10px;
  font-size: calc(18px * var(--type-scale));
  font-weight: 700;
  letter-spacing: -.02em;
}

.step p {
  color: var(--text-secondary);
  font-size: calc(14.5px * var(--type-scale));
  line-height: 1.6;
  text-wrap: pretty;
}

.call-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: center;
  justify-content: space-between;
}

.call-strip h2 {
  margin-block-end: 6px;
  font-size: calc(22px * var(--type-scale));
  font-weight: 700;
  letter-spacing: -.02em;
}

.call-strip p { color: var(--text-secondary); font-size: calc(14.5px * var(--type-scale)); }
.call-strip > p:last-child { flex: none; }

/* ---- the shopper side -------------------------------------------------- */

.shopper-side {
  display: flex;
  flex-wrap: wrap;
  gap: 34px;
  align-items: flex-start;
}

.shopper-side-copy { flex: 1; min-inline-size: 260px; }

.shopper-side-copy h2 {
  margin-block-end: 8px;
  font-size: calc(19px * var(--type-scale));
  font-weight: 700;
  letter-spacing: -.02em;
}

.shopper-side-copy p {
  max-inline-size: 420px;
  margin-block-end: 14px;
  color: var(--text-secondary);
  font-size: calc(14.5px * var(--type-scale));
  line-height: 1.6;
  text-wrap: pretty;
}

/* The shopper app, drawn at the size the design draws it (design.html:1544).
   The three tabs are real: a radio group, switched by `:has()`, with no
   JavaScript — marketing pages carry exactly one script and it is the header
   (constraint 5). Every value inside is an example. */
.phone {
  flex: none;
  inline-size: 372px;
  max-inline-size: 100%;
  padding: 11px;
  /* The phone frame and its screen are a drawing of a device, not UI: their
     radii stay literal, off the token scale (Part L). */
  border-radius: 42px;
  background: var(--text);
  box-shadow: var(--shadow-phone);
}

.phone-screen {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  block-size: 720px;
  border-radius: 33px;
  background: var(--surface-veil);
}

.phone-status {
  display: flex;
  justify-content: space-between;
  padding: 12px 22px 6px;
  font-size: calc(12px * var(--type-scale));
  font-weight: 600;
}

.phone-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px 12px;
  border-block-end: 1px solid var(--hairline);
}

.phone-wordmark { font-size: calc(19px * var(--type-scale)); font-weight: 800; letter-spacing: -.03em; }

.phone-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 30px;
  block-size: 30px;
  border-radius: 50%;
  background: var(--accent-tint);
  color: var(--accent);
  font-size: calc(12px * var(--type-scale));
  font-weight: 700;
}

.phone-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 18px 20px;
}

/* One panel is shown at a time, chosen by which radio is checked. */
.phone-panel { display: none; }
.phone-screen:has([value="browse"]:checked)    [data-panel="browse"],
.phone-screen:has([value="following"]:checked) [data-panel="following"],
.phone-screen:has([value="alerts"]:checked)    [data-panel="alerts"] { display: block; }

.phone-label {
  margin-block-end: 11px;
  color: var(--text-muted);
  font-size: calc(13px * var(--type-scale));
}

.phone-list {
  display: grid;
  gap: 11px;
  padding: 0;
  list-style: none;
}

/* Browse: a photo over its details. Following: a thumbnail beside them. */
.phone-card {
  overflow: hidden;
  max-inline-size: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
}

.phone-shot { display: block; block-size: 132px; }

.phone-card-body {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 13px 14px;
}

.phone-row {
  display: flex;
  gap: 12px;
  align-items: center;
  max-inline-size: none;
  padding: 13px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
}

.phone-thumb {
  flex: none;
  inline-size: 44px;
  block-size: 44px;
  border-radius: var(--radius-sm);
}

.phone-shot--chair   { background: var(--swatch-chair); }
.phone-shot--throw,   .phone-thumb--throw   { background: var(--swatch-throw); }
.phone-shot--skillet, .phone-thumb--skillet { background: var(--swatch-skillet); }
.phone-shot--mugs    { background: var(--swatch-mugs); }

.phone-row-text { flex: 1; min-inline-size: 0; display: grid; gap: 3px; }
.phone-row-title { font-size: calc(14px * var(--type-scale)); font-weight: 600; }

.phone-price { color: var(--accent); font-size: calc(13.5px * var(--type-scale)); font-weight: 700; }
.phone-price s { color: var(--text-muted); font-size: calc(12px * var(--type-scale)); font-weight: 400; }
.phone-row-meta { color: var(--text-muted); font-size: calc(12px * var(--type-scale)); }

.phone-pill {
  flex: none;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  color: var(--text-muted);
  font-size: calc(12px * var(--type-scale));
  font-weight: 600;
}

.phone-pill--on {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--on-accent);
}

/* Alerts. The bar colour is the communication KIND — and only kinds Follo
   actually sends (functions/communication.js): a price drop, a back-in-stock,
   and a custom message from the seller. */
.phone-alert {
  max-inline-size: none;
  padding: 13px 14px;
  border: 1px solid var(--border);
  border-inline-start: 3px solid var(--text-muted);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
}

.phone-alert--price { border-inline-start-color: var(--accent); }
.phone-alert--stock { border-inline-start-color: var(--success); }
.phone-alert--custom { border-inline-start-color: var(--accent-warm); }

.phone-alert-head {
  display: flex;
  gap: 10px;
  align-items: baseline;
  justify-content: space-between;
  margin-block-end: 5px;
}

.phone-alert-title { font-size: calc(13.5px * var(--type-scale)); font-weight: 700; }
.phone-alert-time { flex: none; color: var(--text-muted); font-size: calc(11.5px * var(--type-scale)); }

.phone-alert-body {
  display: block;
  color: var(--text-secondary);
  font-size: calc(13px * var(--type-scale));
  line-height: 1.5;
}

.phone-tabs {
  display: grid;
  gap: 6px;
  grid-template-columns: repeat(2, 1fr);
  padding: 9px 12px 16px;
  border-block-start: 1px solid var(--hairline);
  background: var(--surface-raised);
}

.phone-tab {
  position: relative;   /* holds the visually-hidden radio inside the tab */
  padding: 8px 4px;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: calc(12px * var(--type-scale));
  font-weight: 600;
  text-align: center;
  cursor: pointer;
}

/* The radio is the control; the label is the whole target. Hidden, not
   removed, so it keeps its place in the tab order. */
.phone-tab input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  opacity: 0;
}

/* Browse is hidden for now; its panel stays in the markup. */
.phone-tab:has([value="browse"]) { display: none; }

.phone-tab:has(:checked) { background: var(--accent-tint); color: var(--accent); }

.phone-tab:has(:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ---- the inner pages' shared head and section furniture ---------------- */

/* Every page but the index opens the same way: an accent kicker, a big title,
   a lede. Design 245-249 (pricing), 366-370 (how), 604-610 (shoppers). */
.page-head {
  max-inline-size: 720px;
  padding-block: 56px 34px;
}

.kicker {
  margin-block-end: 16px;
  color: var(--accent);
  font-size: calc(12px * var(--type-scale));
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.page-head h1 {
  margin-block-end: 16px;
  font-size: calc(clamp(2rem, 5vw, 44px) * var(--type-scale));
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.035em;
  text-wrap: pretty;
}

.page-head .lede { max-inline-size: none; margin-block-end: 0; }

/* A guide's own scannable code: a static SVG, dark modules on white at any
   theme, in QR PLAN R3's shape (level M, 4-module quiet zone). */
.guide-qr {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-block-start: 24px;
  color: var(--text-secondary);
}

.guide-qr svg {
  flex: none;
  inline-size: 132px;
  block-size: 132px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: #000;
}

.section-title {
  margin-block-end: 18px;
  font-size: calc(22px * var(--type-scale));
  font-weight: 700;
  letter-spacing: -.02em;
}

/* A column grid of short titled notes — the pricing FAQ, the shopper FAQ, the
   shopper benefits, and how-it-works' seller/shopper pair. auto-fit collapses
   it without a media query (D6). `--lg` is the 18px-title variant. */
.notes {
  display: grid;
  gap: 26px;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  padding: 0;
  list-style: none;
}

.note { max-inline-size: none; }

.note h3 {
  margin-block-end: 8px;
  font-size: calc(15.5px * var(--type-scale));
  font-weight: 700;
  letter-spacing: -.01em;
}

.note p {
  color: var(--text-secondary);
  font-size: calc(14px * var(--type-scale));
  line-height: 1.6;
  text-wrap: pretty;
}

.notes--lg {
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
}

.notes--lg .note h3 {
  font-size: calc(18px * var(--type-scale));
  line-height: 1.25;
  letter-spacing: -.02em;
}

.notes--lg .note p { font-size: calc(14.5px * var(--type-scale)); }

.note-n {
  display: block;
  margin-block-end: 9px;
  color: var(--accent);
  font-size: calc(12px * var(--type-scale));
  font-weight: 700;
  letter-spacing: .08em;
  font-variant-numeric: tabular-nums;
}

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

.tiers {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  align-items: stretch;
}

.tier {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-inline-size: none;
  padding: 24px 22px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-veil);
}

.tier h2 {
  font-size: calc(17px * var(--type-scale));
  font-weight: 700;
}

.tier-head {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
  min-block-size: 24px;
}

.tier-badge {
  padding: 4px 9px;
  border-radius: var(--radius-pill);
  background: var(--accent-warm);
  color: var(--text);
  font-size: calc(10.5px * var(--type-scale));
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* No tabular-nums here, unlike the Compare column: Schibsted's tabular figures
   give the decimal point a full digit's advance, and at 34px "$0.00" reads as
   "$0 . 00". Nothing is being aligned against anything in a card headline. */
.tier-price {
  font-size: calc(34px * var(--type-scale));
  font-weight: 700;
  letter-spacing: -.03em;
}

.tier-price .tier-per {
  color: var(--text-muted);
  font-size: calc(14px * var(--type-scale));
  font-weight: 400;
  letter-spacing: 0;
}

/* The design's ruled spec block (263-273). It draws two label/value rows; here
   each row is one sentence, because the numbers are already aligned per tier in
   the Compare table below and pages.test.mjs reads these lines as the page's
   promise about TIERS. */
.tier-specs {
  display: grid;
  gap: 9px;
  padding-block: 13px;
  border-block: 1px solid var(--hairline);
  font-size: calc(13.5px * var(--type-scale));
  font-weight: 600;
}

.tier-detail {
  flex: 1;
  color: var(--text-secondary);
  font-size: calc(14px * var(--type-scale));
  line-height: 1.55;
  text-wrap: pretty;
}

.tier .button { justify-content: center; padding: 12px 18px; font-size: calc(14px * var(--type-scale)); }

/* Featured: the ink card. Its own rules and muted text move with the ground. */
.tier--featured {
  border-color: var(--text);
  background: var(--text);
  color: var(--on-dark);
}

.tier--featured .tier-specs { border-block-color: var(--nav-surface); }
.tier--featured .tier-price .tier-per,
.tier--featured .tier-detail { color: var(--on-dark-muted); }

.tier--featured .button,
.tier--featured .button:hover {
  border-color: var(--accent-warm);
  background: var(--accent-warm);
  color: var(--text);
}

/* overflow-x, not hidden: at phone width three tier columns do not fit, and
   `hidden` silently CLIPS the last one rather than letting it be reached. */
.compare {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
}

.compare table { inline-size: 100%; min-inline-size: 420px; border-collapse: collapse; }

.compare thead th {
  padding: 13px 20px;
  border-block-end: 1px solid var(--border);
  background: var(--surface-veil);
  font-size: calc(13.5px * var(--type-scale));
  font-weight: 700;
  text-align: end;
}

.compare thead th:first-child {
  color: var(--text-muted);
  font-size: calc(11.5px * var(--type-scale));
  letter-spacing: .07em;
  text-transform: uppercase;
  text-align: start;
}

.compare th.is-featured { color: var(--accent); }

.compare td,
.compare tbody th {
  padding: 15px 20px;
  border-block-end: 1px solid var(--hairline);
  font-weight: 400;
}

.compare tbody tr:last-child td,
.compare tbody tr:last-child th { border-block-end: 0; }

.compare tbody th {
  color: var(--text-secondary);
  font-size: calc(14px * var(--type-scale));
  text-align: start;
}

.compare td {
  font-size: calc(14.5px * var(--type-scale));
  font-variant-numeric: tabular-nums;
  text-align: end;
}

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

.how-steps {
  display: grid;
  gap: 18px;
  padding: 0;
  list-style: none;
}

.how-step {
  display: grid;
  gap: 18px;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: start;
  max-inline-size: none;
  padding: 24px 26px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
}

.how-step .step-number { inline-size: 38px; block-size: 38px; margin-block-end: 0; font-size: calc(15px * var(--type-scale)); }

.how-step h2 {
  margin-block-end: 7px;
  font-size: calc(18px * var(--type-scale));
  font-weight: 700;
  letter-spacing: -.02em;
}

.how-step p {
  max-inline-size: var(--measure);
  margin-block-end: 8px;
  color: var(--text-secondary);
  font-size: calc(15px * var(--type-scale));
  line-height: 1.6;
  text-wrap: pretty;
}

.how-step .step-note {
  max-inline-size: var(--measure);
  margin-block-end: 0;
  color: var(--text-muted);
  font-size: calc(13.5px * var(--type-scale));
  line-height: 1.55;
}

/* ---- /shoppers --------------------------------------------------------- */

.facts {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  padding: 0;
  list-style: none;
}

.fact { max-inline-size: none; }

.fact strong {
  display: block;
  color: var(--accent);
  font-size: calc(17px * var(--type-scale));
  font-weight: 700;
  letter-spacing: -.02em;
}

.fact span { color: var(--text-muted); font-size: calc(13.5px * var(--type-scale)); }

.shoppers-cta {
  margin-block-start: 26px;
  font-size: calc(22px * var(--type-scale));
  font-weight: 700;
  letter-spacing: -.02em;
}

/* ---- /about ------------------------------------------------------------ */

/* Design 457-478. The principles are a badge, a title and a paragraph, which
   is exactly `.steps`/`.step` from the index; the pair below is `.notes--lg`.
   Only the design's own 900px cap on that pair is new. */
.about-pair { max-inline-size: 900px; }

/* ---- the document pages: /faq, /privacy, /terms ------------------------ */

/* Design 542-557. One shell for all three. The head is `.page-head` — the
   design's doc head and its other page heads are the same block — so the only
   new pieces are the effective-date line and the ruled sections below it. */

.doc-meta {
  margin-block-end: 16px;
  color: var(--text-muted);
  font-size: calc(13.5px * var(--type-scale));
}

.doc {
  display: grid;
  gap: 22px;
  max-inline-size: 760px;
  padding-block: 10px 56px;
}

.doc > section {
  border-block-start: 1px solid var(--hairline);
  padding-block-start: 20px;
}

.doc h2 {
  margin-block-end: 8px;
  font-size: calc(17px * var(--type-scale));
  font-weight: 700;
  letter-spacing: -.02em;
}

.doc p {
  color: var(--text-secondary);
  font-size: calc(15px * var(--type-scale));
  line-height: 1.65;
  text-wrap: pretty;
}

/* ---- /contact ---------------------------------------------------------- */

/* Design 1007-1071. Two columns that collapse on their own (D6).
   The design's right column is a contact FORM. Follo has no endpoint to post
   one to, and a marketing page carries exactly one script (constraint 5), so
   the panel holds the route that exists — email — in the design's frame. */
.contact {
  display: grid;
  gap: 44px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  align-items: start;
  padding-block: 56px 60px;
}

/* The head is the left column here, not a band across the page. */
.contact .page-head { max-inline-size: none; padding-block: 0; }

.contact-detail {
  margin-block-start: 22px;
  color: var(--text-muted);
  font-size: calc(14px * var(--type-scale));
  line-height: 1.7;
}

/* --surface-veil, not the design's #fff: Part A moved the page ground to
   white, so a card reads on --border plus the warm tint — the same pair
   `.tier` uses. */
.contact-panel {
  padding: 26px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-veil);
}

.contact-panel h2 {
  margin-block-end: 8px;
  font-size: calc(19px * var(--type-scale));
  font-weight: 700;
  letter-spacing: -.02em;
}

.contact-panel > p {
  color: var(--text-secondary);
  font-size: calc(14.5px * var(--type-scale));
  line-height: 1.6;
}

.contact-panel .button { margin-block: 18px 10px; }

.contact-notes {
  margin-block-start: 22px;
  padding-block-start: 20px;
  border-block-start: 1px solid var(--hairline);
  gap: 18px;
  grid-template-columns: 1fr;   /* one narrow column, not `.notes`' auto-fit */
}

/* ---- the sign-in card -------------------------------------------------- */

/* `/signin` is not a marketing page — it is noindex and carries its own
   script — but the design draws the same chrome around it (790-876), so it
   links this file rather than growing a second copy of the header and footer.
   The header has no Sign in pill: the design's header is one shared component
   across every artboard, and on this page that control points at the page it
   is already on. */

.auth-page {
  display: flex;
  flex-direction: column;
  min-block-size: 100vh;
}

.auth-main {
  display: flex;
  flex: 1;
  justify-content: center;
  padding-block: 90px 60px;
}

.auth-card {
  display: flex;
  flex-direction: column;
  gap: 20px;
  inline-size: min(100%, 420px);
  padding: 32px 30px;
  border-radius: var(--radius-lg);
  block-size: fit-content;
}

.auth-head h1 {
  margin-block-end: 10px;
  font-size: calc(27px * var(--type-scale));
  letter-spacing: -.03em;
}

.auth-head p {
  color: var(--text-secondary);
  font-size: calc(14.5px * var(--type-scale));
  line-height: 1.6;
  text-wrap: pretty;
}

.auth-card form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Full width, because the form column stretches it. `.button` is an inline
   flex box, so its label needs centring once it is wider than its text. */
.auth-card .button { justify-content: center; }

/* The two states the script switches between. `signin.js` sets `form.hidden`
   on a successful send and changes nothing else, so the form's own state is
   what the sent card is drawn from — no flag, no second script, no class the
   handler would have to set. */
.auth-check {
  display: none;
  /* The design leads the sent card with the badge (846). `order` moves it
     rather than the DOM — the same move Part D made for #photo — so it can
     stay a sibling AFTER the form, which is what the selector below needs. */
  order: -1;
  margin-block-end: 8px;
  align-items: center;
  justify-content: center;
  inline-size: 38px;
  block-size: 38px;
  border-radius: 50%;
  background: var(--accent-tint);
  color: var(--accent);
  font-size: calc(18px * var(--type-scale));
  font-weight: 700;
}

#signin-form[hidden] + .auth-check { display: flex; }

/* The design's sent card (857-869) carries only the badge, a heading and the
   confirmation. The lede and the sign-up note both speak to a form that is no
   longer on the page, so they go with it. The <h1> stays as it is — changing
   its words would need the script, and the page has exactly one. */
.auth-card:has(#signin-form[hidden]) .auth-head p,
.auth-card:has(#signin-form[hidden]) .auth-note { display: none; }

/* The sent card is its own set of measurements, not the form card with things
   hidden: 24px rather than 27px on the heading, and a 10px column that the
   badge's own margin reopens to the design's 18px beneath it (845-858). */
.auth-card:has(#signin-form[hidden]) { gap: 10px; }
.auth-card:has(#signin-form[hidden]) .auth-head h1 { font-size: calc(24px * var(--type-scale)); }

/* #status carries the error as well as the confirmation, so it stays a neutral
   notice — the same reasoning as #follow-status on /f/{code} (Part D). */
#status:empty { display: none; }

#status {
  color: var(--text-secondary);
  font-size: calc(14.5px * var(--type-scale));
  line-height: 1.6;
}

.auth-note {
  color: var(--text-muted);
  font-size: calc(12.5px * var(--type-scale));
  line-height: 1.55;
}

/* ---- the pages with no artboard: /unfollow, /auth/action, 404 ---------- */

/* Phase 11 D11, Part K. One message and one action: Part C's `.page-head`,
   with the action row, the fallback form and #status under the lede. The
   body is a column so a short page still puts its footer at the bottom. */
.message-page {
  display: flex;
  flex-direction: column;
  min-block-size: 100vh;
}

.message-page .marketing-main { flex: 1; }

.message-page .page-head > .cluster,
.message-page .page-head > form,
.message-page .page-head > #status { margin-block-start: 26px; }

/* /unfollow hides its only button once it has done its job, or when the link
   is broken. The empty row would otherwise hold a gap above #status. */
.message-page .page-head > .cluster:has(> [hidden]:only-child) { display: none; }

/* /p/{token} (API PLAN R7): the photo about to be, or just, added. */
.message-page .page-head > .photo-link-preview {
  display: block;
  margin-block-start: 26px;
  max-inline-size: min(100%, 320px);
  border-radius: var(--radius-md);
}
.message-page .page-head > .photo-link-preview[hidden] { display: none; }

/* /f/{code}/card (Marketplace Bridge D3): the card the seller saves. */
.message-page .page-head > .card-page-image {
  display: block;
  margin-block-start: 26px;
  inline-size: min(100%, 480px);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.message-page .page-head > .card-page-hint { margin-block-start: 16px; }

.message-page .page-head > form {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-inline-size: 420px;
}

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

.marketing-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: space-between;
  padding-block: 30px 40px;
  border-block-start: 1px solid var(--hairline);
  color: var(--text-muted);
  font-size: calc(13px * var(--type-scale));
}

.marketing-footer ul {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.marketing-footer li { max-inline-size: none; }
.marketing-footer a { color: inherit; text-decoration: none; }
.marketing-footer a:hover { color: var(--text); text-decoration: underline; }
.marketing-footer .footer-contact,
.marketing-footer .footer-contact:hover { color: var(--accent); }

/* The one place auto-fit cannot help: below this the header's three parts
   have to restack, wordmark and account on top, nav on its own row. */
@media (max-width: 42rem) {

  .marketing-header,
  .marketing-main,
  .marketing-footer { padding-inline: 20px; }

  /* The band computes its own inset, so it does not inherit the line above. */
  .section--warm { padding-inline: calc(50vw - 50% + 20px); }

  .marketing-header {
    padding-block: 16px;
    align-items: center;
  }

  .marketing-header nav {
    order: 3;
    inline-size: 100%;
    margin-inline-start: 0;
  }

  .header-auth { order: 2; margin-inline-start: auto; }

  .marketing-header nav > ul { gap: 14px; }

  /* Four columns will not fit a phone at the desktop gutter. Tightening the
     cells fits them rather than making the reader scroll the table sideways —
     the selectors match the specificity of the rules above, or the shorthand
     `padding` on the thead/tbody `th` rules wins and nothing moves. */
  .compare table { min-inline-size: 0; }
  .compare thead th,
  .compare tbody th,
  .compare td { padding-inline: 8px; font-size: calc(13px * var(--type-scale)); }

  .auth-main { padding-block: 40px 40px; }

  .hero { padding-block: 40px 40px; }

  /* The design's fixed 300px is a crop window sized for a ~500px column. In a
     phone-width one it turns square and takes the mug and the keys off both
     edges, so the photo keeps its own ratio instead. */
  .hero-panel img { block-size: auto; }
}

/* §2.33. The QR code generator: the form, then the preview, side by side
   where there's room and stacked where there isn't, without a media query.
   An empty preview is a dashed frame showing where the code will appear. */
.qr-tool {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 32px;
}

.qr-tool-form {
  display: flex;
  flex: 1 1 320px;
  flex-direction: column;
  gap: 18px;
}

.qr-optional { color: var(--text-muted); font-weight: 400; }

.qr-hint {
  color: var(--text-muted);
  font-size: calc(13px * var(--type-scale));
}

.qr-hint:empty { display: none; }

.qr-preview {
  display: grid;
  flex: 0 1 280px;
  place-items: center;
  aspect-ratio: 1;
  min-inline-size: 220px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: #fff;
}

.qr-preview[data-empty] {
  border: 2px dashed var(--border-strong);
  background: var(--surface-veil);
  color: var(--text-muted);
  text-align: center;
}

.qr-preview svg { inline-size: 100%; block-size: auto; }

.qr-follo > p + p { margin-block-start: 12px; }
.qr-follo > .qr-follo-cta { margin-block-start: 28px; }

/* /uses. The design's index page: jump chips under the lede, an ink card
   saying what follo is, then three link sections — rows for General and By
   problem, one card per audience group for By who you are. */
.uses-jump {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-block-start: 26px;
}

.uses-jump a {
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--surface-raised);
  color: var(--text);
  font-size: calc(13.5px * var(--type-scale));
  font-weight: 600;
  text-decoration: none;
}

.uses-jump a:hover { border-color: var(--border-hover); }

.uses-about {
  display: grid;
  gap: 10px;
  margin-block-end: 44px;
  padding: 26px 28px;
  border-radius: var(--radius-lg);
  background: var(--text);
  color: var(--on-dark);
}

.uses-about h2 {
  color: var(--accent-warm);
  font-size: calc(13px * var(--type-scale));
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.uses-about p {
  max-inline-size: 680px;
  font-size: calc(17px * var(--type-scale));
  line-height: 1.6;
  text-wrap: pretty;
}

.uses-section { padding-block-end: 52px; scroll-margin-block-start: 16px; }
.section--warm + .uses-section { padding-block-start: 52px; }

.uses-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-block-end: 14px;
  border-block-end: 1px solid var(--border);
}

.uses-head h2 {
  font-size: calc(26px * var(--type-scale));
  font-weight: 700;
  letter-spacing: -.025em;
}

.uses-head p { color: var(--text-muted); font-size: calc(13.5px * var(--type-scale)); }

.uses-list,
.uses-group ul { padding: 0; margin: 0; list-style: none; }

.uses-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  column-gap: 32px;
}

.uses-section li { max-inline-size: none; }

.uses-section li > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  color: var(--text);
  font-weight: 600;
  text-decoration: none;
}

.uses-section li > a:hover { color: var(--accent); }
.uses-section li > a::after { content: "→"; flex: none; color: var(--accent); }

.uses-list > li > a {
  block-size: 100%;
  padding: 16px 2px;
  border-block-end: 1px solid var(--hairline);
  font-size: calc(16px * var(--type-scale));
  line-height: 1.4;
  text-wrap: pretty;
}

.uses-groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  gap: 16px;
  margin-block-start: 24px;
}

/* 14px in the design; --radius-lg is the nearest step and radii are tokens. */
.uses-group {
  padding: 20px 20px 12px;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
}

.uses-group h3 {
  margin-block-end: 8px;
  color: var(--text-muted);
  font-size: calc(12px * var(--type-scale));
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.uses-group li > a {
  gap: 10px;
  padding-block: 9px;
  font-size: calc(15px * var(--type-scale));
  line-height: 1.35;
}

.uses-group li + li > a { border-block-start: 1px solid var(--hairline); }

/* Guides lead with a tag instead of trailing an arrow. */
.uses-list--guides > li > a {
  align-items: flex-start;
  justify-content: flex-start;
  padding-block: 18px;
  line-height: 1.45;
}

.uses-list--guides > li > a::after { content: none; }

.uses-tag {
  flex: none;
  margin-block-start: 2px;
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  background: var(--accent-tint);
  color: var(--accent);
  font-size: calc(11.5px * var(--type-scale));
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* "Read next" and "Where this fits": one card per link, the whole card the
   target. auto-fit, so no media query. The kind line (Guide, Use case…) is
   read from the link's path when the page is written. */
.read-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 16px;
  padding: 0;
  margin: 0;
}

.read-cards > li { max-inline-size: none; }

.read-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  block-size: 100%;
  padding: 22px;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
  color: var(--text);
  text-decoration: none;
}

.read-card:hover { border-color: var(--border-hover); }
.read-card:hover > span { text-decoration: underline; }

.read-card-kind {
  color: var(--accent);
  font-size: calc(12px * var(--type-scale));
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.read-card-title {
  font-size: calc(17px * var(--type-scale));
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -.01em;
  text-wrap: pretty;
}

.read-card-cta {
  margin-block-start: auto;
  padding-block-start: 14px;
  color: var(--accent);
  font-size: calc(14.5px * var(--type-scale));
  font-weight: 600;
}

/* An inline photo inside a section, at its natural size or narrower. */
.section-photo {
  margin-block-start: 24px;
  border-radius: var(--radius-md);
}

/* Realtor Relaunch R28, R29 (§2.35), the narrative as amended 2026-10-23:
   the tagline, the three-part system, the one-change chips and the Buyer
   Pulse call-out. */
.hero--realtors .lede:has(+ .lede) { margin-block-end: 12px; }
.hero-tagline { margin-block-end: 16px; font-weight: 700; color: var(--accent); }

/* .system beats .note p and .note h3: the question, the name, then the
   copy, each set apart. */
.system .system-ask {
  margin-block-end: 14px;
  color: var(--accent);
  font-size: calc(13px * var(--type-scale));
  font-weight: 700;
}
.system .note h3 { margin-block-end: 14px; }
.system .note p + p { margin-block-start: 10px; }
.system-lede { margin-block-start: 20px; font-size: calc(18px * var(--type-scale)); }
.system-close {
  margin-block-start: 22px;
  font-size: calc(20px * var(--type-scale));
  font-weight: 700;
  letter-spacing: -.01em;
}

.pulse-callout {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 28px;
  align-items: center;
  justify-content: space-between;
  margin-block: 40px 12px;
  padding: 22px 26px;
  border-radius: var(--radius-lg);
  background: var(--accent-tint);

  & h2 { font-size: calc(22px * var(--type-scale)); margin: 0 0 4px; }
  & p { margin: 0; }
  & p + p { margin-block-start: 8px; }
}
.pulse-bridge { margin-block-end: 24px; }

.flow {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;

  & li {
    max-inline-size: none;
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    background: var(--surface);
    font-weight: 600;
  }
}