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

/* The studio's look since #1092 (docs/design-language.md in the studio repo):
   a light grey ground, white cards with no border and no shadow, ink and
   greys for everything, and coral on the one press that starts something
   (the scan button, a checkout button). Links are the darker coral.
   The system font stack: nothing to download before the first word. */
:root {
  --ink: #1f1f1f;
  --ink-mid: #5f6368;
  --ink-faint: #80868b;
  --white: #FFFFFF;
  --off-white: #f7f7f9;        /* the ground */
  --stone: #ebebef;            /* the grey pill */
  --accent: #c8432c;           /* links */
  --accent-dim: #c8432c;
  --accent-bg: #fce4de;        /* the coral tint */
  --coral: #e8533a;            /* the one primary press per screen */
  --coral-hover: #d04530;
  --good: #1e8e5a;
  --bad: #c5221f;
  --border: #e6e6ea;
  /* The homepage tiles' four tints, one per tile (the big-tiles mockup). */
  --tint-who: #fde8e1;
  --tint-what: #f2eee6;
  --tint-intro: #e6f1eb;
  --tint-learn: #ebe8f6;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: var(--font);         /* small labels: the same face, never a terminal */
  --code: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --nav-h: 64px;
  /* What consent.js (the studio's banner, #143) reads, so the banner wears
     the same tokens instead of its emerald defaults. */
  --signal: #c8432c; --signal-dim: #c8432c; --mint: #fce4de;
  --muted: #5f6368; --faint: #80868b; --card: #FFFFFF;
  --brand-ink: #1f1f1f; --studio-font: var(--font);
}

html { scroll-behavior: smooth; background: var(--off-white); }
a { color: var(--accent); }
/* [hidden] has to actually hide. The UA stylesheet's `[hidden]{display:none}`
   loses to any author rule that sets display, and several components below do
   (.btn-cta is inline-block, .reserve-form and .scan-facts are flex) — so
   toggling `.hidden` from JS silently did nothing on exactly the elements the
   checkout paths toggle. Caught by the browser test on the pricing tile; it
   was already leaving the founding-spot form on screen underneath the live
   Stripe pay button on /checkout/. */
[hidden] { display: none !important; }


body {
  font-family: var(--font);
  background: var(--off-white);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ── NAV ── */
/* The studio's header: mark and wordmark left, the nav, one quiet Sign in
   pill. Fixed, because every page's hero pads itself clear of it and the
   language nudge hangs from its bottom edge. */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  height: var(--nav-h);
  display: flex; align-items: center; gap: 28px;
  padding: 0 max(24px, calc((100% - 1180px) / 2));
  background: var(--off-white);
  border-bottom: 1px solid var(--border);
}

.logo {
  font-size: 21px; font-weight: 400; color: var(--ink);
  text-decoration: none; display: flex; align-items: center; gap: 10px;
}

.logo-mark {
  width: 28px; height: 28px; border-radius: 7.5px;
  background: #1A1A18; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

.logo-mark svg { width: 14px; height: 14px; }

.nav-links {
  display: flex; gap: 24px; list-style: none; margin-left: auto;
  font-size: 14px; color: var(--ink);
}
.nav-links a { color: inherit; text-decoration: none; }
.nav-links a:hover { color: var(--accent); }

.nav-right { display: flex; align-items: center; gap: 12px; }

.nav-signin {
  font-size: 14px; color: var(--ink); text-decoration: none;
  background: var(--white); border: 1px solid #dadce0; border-radius: 20px;
  padding: 8px 16px; white-space: nowrap;
}
.nav-signin:hover { background: var(--stone); }

/* ── HERO ── */
/* The promise, one sentence, the field and one quiet line, with air around
   them so the scan reads as the page's one primary action (the operator,
   7 Oct: "keep it minimal and clean"). */
.hero {
  text-align: center;
  padding: calc(var(--nav-h) + 96px) 24px 72px;
}

.building-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  animation: pulse 1s ease-in-out infinite;
}

@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(.8)} }

.hero h1 .accent { color: var(--coral); }
.hero h1 {
  font-size: 44px; font-weight: 400; letter-spacing: -0.01em; line-height: 1.15;
  color: var(--ink); max-width: 720px; margin: 0 auto 16px;
  text-wrap: balance;
}

.hero-sub {
  font-size: 18px; color: var(--ink-mid);
  max-width: 560px; line-height: 1.5;
  margin: 0 auto 40px; text-wrap: balance;
}

.btn-cta {
  font-family: var(--font); font-size: 15px; font-weight: 500;
  color: white; background: var(--coral);
  padding: 12px 22px; border-radius: 22px;
  text-decoration: none; border: none; cursor: pointer;
  transition: background .15s; display: inline-block;
}
.btn-cta:hover { background: var(--coral-hover); }

.btn-ghost {
  font-size: 14px; font-weight: 500; color: var(--ink);
  background: var(--white); border: 1px solid #dadce0;
  padding: 10px 18px; border-radius: 20px;
  text-decoration: none; transition: background .15s;
  display: inline-block;
}
.btn-ghost:hover { background: var(--stone); }

/* ── SCAN (hero) ── */
.scan-hero {
  width: 100%; max-width: 620px;
  margin: 0 auto;
  position: relative; z-index: 1;
}
.scan-hero [hidden] { display: none !important; }

/* The grey pill with the coral press inside it: the studio's bar. */
.scan-form {
  position: relative;
  background: var(--stone);
  border-radius: 28px;
  padding: 6px 6px 6px 22px;
  display: flex; align-items: center; gap: 10px;
  text-align: left;
}
.scan-form:focus-within { background: var(--white); box-shadow: 0 1px 6px rgba(32,33,36,.18); }
.scan-q { flex: 1; display: flex; align-items: center; gap: 12px; min-width: 0; }
.scan-q-icon { color: var(--ink-faint); flex: none; }

/* The typeahead (#241): one line per company (name, then domain) hanging
   under the field at the field's own width. It is absolute inside the form
   so it covers the hint rather than moving it. */
.scan-suggest {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px);
  margin: 0; padding: 6px 0; list-style: none;
  background: var(--white);
  border-radius: 16px;
  box-shadow: 0 4px 16px rgba(32,33,36,.16);
  z-index: 5; text-align: left;
}
.scan-suggest li {
  display: flex; align-items: baseline; gap: 10px;
  padding: 8px 22px; cursor: pointer;
  white-space: nowrap; overflow: hidden;
}
.scan-suggest li:hover,
.scan-suggest li[aria-selected="true"] { background: var(--off-white); }
.scan-suggest-name {
  font-size: 15px; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis;
}
.scan-suggest-domain {
  font-size: 13px; color: var(--ink-faint);
  overflow: hidden; text-overflow: ellipsis; flex-shrink: 0;
}

.scan-input {
  font-family: var(--font); font-size: 16px;
  color: var(--ink); background: transparent;
  border: none; outline: none;
  flex: 1; min-width: 0; padding: 10px 0;
}
.scan-input::placeholder { color: var(--ink-faint); }

.scan-btn {
  font-family: var(--font); font-size: 15px; font-weight: 500;
  color: white; background: var(--coral);
  padding: 12px 22px; border-radius: 22px;
  border: none; cursor: pointer; flex-shrink: 0; white-space: nowrap;
  transition: background .15s, opacity .15s;
}
.scan-btn:hover { background: var(--coral-hover); }
.scan-btn:disabled { opacity: 0.45; cursor: default; }

/* The hint and the demo's door, read as one line. */
.scan-hints {
  display: flex; justify-content: center; flex-wrap: wrap; gap: 0 4px;
  margin-top: 14px; font-size: 13px; color: var(--ink-mid); line-height: 1.5;
}
.scan-hint { margin: 0; }

.scan-error {
  font-size: 14px; color: var(--bad);
  margin-top: 14px;
}

.scan-status { margin-top: 20px; }

.scan-progress {
  height: 3px; background: var(--stone); border-radius: 2px; overflow: hidden;
  max-width: 420px; margin: 0 auto;
}
.scan-progress-fill {
  height: 100%; width: 0%; background: var(--accent); border-radius: 2px;
  transition: width .5s linear;
}

.scan-status-line {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 13px; color: var(--ink-mid);
  margin-top: 12px;
}

/* Focus mode: from the moment a scan starts, the rest of the hero recedes
   and the scan is the page. */
.hero-rest {
  max-height: 900px;
  transition: opacity .45s ease, transform .45s ease, max-height .6s ease;
}
.hero.scan-focus .hero-rest {
  opacity: 0; transform: translateY(14px);
  max-height: 0; overflow: hidden; pointer-events: none;
  margin-bottom: 0;
}

.scan-result {
  margin-top: 16px;
  text-align: left;
  animation: fadeUp .4s ease;
}

/* #240: the result is ONE card, the width of the search bar by
   construction. A white card on the grey ground, like every card. */
.scan-card {
  background: var(--white);
  border-radius: 16px;
  padding: 24px;
}

.scan-card-head {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
}
.scan-card-name { font-size: 18px; color: var(--ink); }
.scan-card-domain { font-size: 13px; color: var(--ink-faint); }

.scan-chips {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: 12px;
}
.scan-chips span {
  font-size: 12px; line-height: 1.4; color: var(--ink-mid);
  background: var(--stone);
  border-radius: 100px; padding: 4px 11px;
}

.scan-lead {
  font-size: 14px; color: var(--ink-mid);
  margin: 20px 0 6px;
}

.scan-guess {
  font-size: 20px; line-height: 1.35; color: var(--ink);
}

.scan-cta-row {
  margin-top: 24px; padding-top: 20px;
  border-top: 1px solid var(--border);
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
}
.scan-result .scan-cta-row { border-top: none; padding-top: 0; margin-top: 20px; }
.scan-cta-note {
  font-size: 13px; color: var(--ink-faint); line-height: 1.5;
  max-width: 240px; text-align: left;
}
/* #419: checkout lives in the note: findable by the reader who is already
   sold, quiet beside the button. */
.scan-cta-note a {
  color: var(--accent); text-decoration: none; white-space: nowrap;
}
.scan-cta-note a:hover { text-decoration: underline; }

.scan-fallback { margin-top: 20px; }
.scan-fallback-msg {
  font-size: 14px; color: var(--ink-mid);
  margin-bottom: 20px;
}

/* ── SHARED SECTION ── */
.section { padding: 5rem 2.5rem; }
.inner { max-width: 1060px; margin: 0 auto; }

.sec-mid {
  font-size: 28px; font-weight: 400; line-height: 1.2; letter-spacing: -0.01em;
  text-align: center; text-wrap: balance;
}

.sec-sub {
  font-size: 16px; color: var(--ink-mid); line-height: 1.5;
  margin-top: 8px; text-align: center; max-width: 600px;
}

/* A small label above a title. The studio writes labels in sentence case, so
   the first letter is raised rather than the whole word. */
.tag {
  display: inline-block;
  font-size: 13px; color: var(--ink-mid);
  margin-bottom: 10px;
}
.tag::first-letter { text-transform: uppercase; }

.section-h2 {
  font-size: 24px; font-weight: 400; line-height: 1.2;
  max-width: 580px;
}

/* ── ONBOARDING (/checkout/) ── */
.onboard {
  min-height: 70vh;
  padding: calc(var(--nav-h) + 56px) 16px 24px;
}
.onboard [hidden] { display: none !important; }
.onboard-inner { max-width: 640px; margin: 0 auto; }
/* Each step is a white card on the grey ground, the studio's settings page. */
.onboard-panel { background: var(--white); border-radius: 16px; padding: 32px; }
@media (max-width: 640px) { .onboard-panel { padding: 22px 18px; } }

.steps {
  list-style: none; display: flex; align-items: center; gap: 1.5rem;
  flex-wrap: wrap;
  font-family: var(--mono); font-size: 0.7rem; font-weight: 500;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 3rem;
}
.step { display: flex; align-items: center; gap: 0.5rem; }
.step-n-badge {
  width: 1.35rem; height: 1.35rem; border-radius: 50%;
  border: 1px solid var(--border);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.62rem;
}
.step.done { color: var(--accent); }
.step.done .step-n-badge { border-color: var(--accent); }
.step.active { color: var(--ink); }
.step.active .step-n-badge { border-color: var(--ink); background: var(--ink); color: var(--white); }

.onboard-h1 {
  font-size: 28px;
  font-weight: 400; letter-spacing: -0.01em; line-height: 1.15;
  margin: 0.75rem 0 0;
}
.onboard-sub {
  font-size: 0.92rem; color: var(--ink-mid); line-height: 1.7;
  margin-top: 0.9rem; max-width: 540px;
}
.onboard-sub a { color: var(--accent); text-decoration: none; }

.goal-input {
  width: 100%; margin-top: 1.5rem;
  font-family: var(--font); font-size: 1.05rem; font-weight: 600;
  letter-spacing: -0.01em; line-height: 1.5; color: var(--ink);
  background: var(--stone); border: 1px solid transparent; border-radius: 16px;
  padding: 1.25rem 1.4rem; resize: vertical; outline: none;
}
.goal-input:focus { border-color: var(--accent); }

.onboard-actions {
  margin-top: 1.75rem;
  display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap;
}
.onboard-back {
  font-family: var(--mono); font-size: 0.72rem; color: var(--ink-mid);
  background: none; border: none; cursor: pointer; text-decoration: none;
  padding: 0;
}
.onboard-back:hover { color: var(--ink); }

.order-card {
  margin-top: 1.5rem; padding: 1.75rem;
  background: var(--off-white); border-radius: 16px;
}
.order-row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding-bottom: 1.1rem; border-bottom: 1px solid var(--border); margin-bottom: 1.1rem;
}
.order-name { font-size: 0.9rem; font-weight: 700; }
.order-price { font-size: 1.5rem; font-weight: 400; letter-spacing: -0.01em; white-space: nowrap; }
.order-per { font-family: var(--mono); font-size: 0.7rem; font-weight: 500; color: var(--ink-faint); margin-left: 0.15rem; }
.order-card .pricing-list { margin-top: 0; }

/* #244: /checkout/done/'s confirmation card — quiet facts, no bullets. */
.done-check { color: var(--accent); }
.confirm-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 0.45rem;
}
.confirm-list li { font-size: 0.86rem; color: var(--ink-mid); line-height: 1.5; }
.confirm-list strong { color: var(--ink); font-weight: 700; }

.onboard-note {
  margin-top: 1.25rem; padding: 1.1rem 1.35rem;
  border-radius: 12px; background: var(--off-white);
}
.onboard-note p { font-size: 0.85rem; color: var(--ink-mid); line-height: 1.65; }
.onboard-note strong { color: var(--ink); }

.reserve-form {
  margin-top: 1.5rem; position: relative;
  display: flex; gap: 0.75rem; flex-wrap: wrap;
}
.reserve-input {
  flex: 1; min-width: 220px;
  font-family: var(--font); font-size: 15px;
  color: var(--ink); background: var(--stone);
  border: 1px solid transparent; border-radius: 100px;
  padding: 0.8rem 1.3rem; outline: none;
}
.reserve-input:focus { border-color: var(--accent); }
.reserve-input::placeholder { color: var(--ink-faint); }

/* #243: the email field's job, stated before the field asks for anything. */
.pay-label {
  display: block; font-size: 0.8rem; font-weight: 700; color: var(--ink);
  margin-bottom: 0.5rem; text-align: left;
}

/* The optional marketing box on the payment step (#204): quiet, full-width
   under the email row, and visually incapable of reading as required. */
.pay-opt {
  flex-basis: 100%; display: flex; gap: 0.55rem; align-items: baseline;
  font-size: 0.8rem; color: var(--ink-mid); line-height: 1.5; cursor: pointer;
}
.pay-opt input { accent-color: var(--accent); cursor: pointer; }

.reserve-msg {
  margin-top: 1rem; font-size: 0.85rem; color: var(--ink);
}
.reserve-msg.is-error { color: var(--ink-mid); }
.reserve-msg a { color: var(--accent); text-decoration: none; }

/* ── PRICING: the direct buy ── */
/* Mirrors .scan-cta-row's rule-above-the-CTA so the tile reads the same
   whether the visitor gets the pay form or the /checkout/ fallback link. */
.buy {
  margin-top: 1.6rem; padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}
.buy .reserve-form { margin-top: 0; }
.buy-site { margin-top: 0.75rem; width: 100%; flex-basis: 100%; }
.buy .reserve-msg { margin-top: 0.9rem; font-size: 0.82rem; line-height: 1.55; }
.buy-note {
  font-size: 0.75rem; color: var(--ink-faint);
  line-height: 1.6; margin-top: 0.9rem;
}
.buy-note a { color: var(--accent); text-decoration: none; }
.buy-note a:hover { text-decoration: underline; }

/* ── PRICING ── */
.pricing-card { background: var(--white); border-radius: 16px; }

.price-row { display: flex; align-items: baseline; gap: 0.6rem; }

.price-num {
  font-size: 32px; font-weight: 400; letter-spacing: -0.01em;
  color: var(--ink); line-height: 1;
}

.price-line {
  margin-top: 1.4rem;
  font-size: 0.94rem; color: var(--ink-mid); line-height: 1.6;
}

.price-per { font-size: 14px; color: var(--ink-mid); }

/* #542 — the plan switch. A segmented control, not a second buy button: a
   pricing page and a checkout each get one primary action (style rule 8), and
   this is a choice about that one action rather than a second escape hatch. */
.plan-switch {
  display: inline-flex; gap: 2px; padding: 3px; margin-bottom: 1.5rem;
  background: var(--stone); border-radius: 100px;
}
.plan-opt {
  border: 0; background: none; cursor: pointer;
  font-family: var(--font); font-size: 0.8rem; font-weight: 500; line-height: 1.2;
  color: var(--ink-mid); padding: 0.45rem 0.95rem; border-radius: 100px;
  white-space: nowrap;
}
.plan-opt[aria-pressed="true"] {
  background: var(--white); color: var(--ink);
  box-shadow: 0 1px 2px rgba(60,64,67,0.2);
}
.plan-note {
  margin-top: 0.8rem;
  font-size: 0.86rem; color: var(--ink-mid); line-height: 1.55;
}
.plan-note strong { color: var(--ink); font-weight: 500; }
/* On the order card the switch sits above a row that is already tight. */
.order-card .plan-switch { margin-bottom: 1.1rem; }
.order-card .plan-note { margin: 1rem 0 0; font-size: 0.82rem; }

.pricing-list {
  list-style: none; margin: 1.5rem 0 0;
  display: flex; flex-direction: column; gap: 0.6rem;
}
.pricing-list li {
  position: relative; padding-left: 1.15rem;
  font-size: 0.85rem; color: var(--ink-mid); line-height: 1.6;
}
.pricing-list li::before {
  content: ''; position: absolute; left: 0; top: 0.58em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--accent);
}

/* ── FOOTER ── */
footer {
  max-width: 1040px; margin: 72px auto 0;
  border-top: 1px solid var(--border);
  /* The consent bar (#143) is fixed to the bottom of the viewport and
     publishes its own height as --ppsc-inset on <html>, so the footer steps
     over it and its Cookies link stays reachable. */
  padding: 28px 24px calc(40px + var(--ppsc-inset, 0px));
  display: flex; align-items: center; flex-wrap: wrap; gap: 12px 22px;
  font-size: 13px; color: var(--ink-mid);
}
.footer-copy { white-space: nowrap; }
.footer-links {
  display: flex; flex-wrap: wrap; gap: 8px 22px; list-style: none;
}
.footer-links a { color: var(--ink-mid); text-decoration: none; }
.footer-links a:hover { color: var(--ink); }

/* ── LEGAL PAGES ── */
.legal-hero {
  padding: calc(var(--nav-h) + 56px) 2.5rem 2rem;
}

.legal-inner { max-width: 720px; margin: 0 auto; }

.legal-h1 {
  font-size: 32px;
  font-weight: 400; line-height: 1.08; letter-spacing: -0.01em;
}

.legal-lede {
  font-size: 0.95rem; color: var(--ink-mid); line-height: 1.75;
  margin-top: 1.15rem;
}

.legal-meta {
  margin-top: 1.75rem;
  font-family: var(--mono); font-size: 0.67rem; color: var(--ink-faint);
  display: flex; flex-wrap: wrap; gap: 0.5rem;
}
.legal-meta a { color: var(--accent); text-decoration: none; }
.legal-meta a:hover { color: var(--ink); }

.legal { padding: 0 2.5rem 3rem; }
/* The document is one white card on the grey ground. */
.legal > .legal-inner { background: var(--white); border-radius: 16px; padding: 40px 48px; }
@media (max-width: 640px) { .legal > .legal-inner { padding: 24px 18px; } }

/* Contents */
.legal-toc {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 0 2.5rem;
  padding-bottom: 2.5rem;
}
.legal-toc-label {
  grid-column: 1 / -1;
  font-family: var(--mono); font-size: 0.62rem; font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-faint);
  margin-bottom: 0.75rem;
}
.legal-toc a {
  display: flex; gap: 0.75rem; align-items: baseline;
  font-size: 0.82rem; color: var(--ink-mid); text-decoration: none;
  padding: 0.32rem 0; transition: color .15s;
}
.legal-toc a:hover { color: var(--ink); }
.legal-toc-n { font-family: var(--mono); font-size: 0.62rem; color: var(--ink-faint); }

/* Numbered blocks */
.legal-block {
  display: grid; grid-template-columns: 3rem 1fr;
  padding: 2.25rem 0;
  border-bottom: 1px solid var(--border);
  scroll-margin-top: 74px;
}
.legal-block:first-of-type { border-top: 1px solid var(--border); }

.legal-n {
  font-family: var(--mono); font-size: 0.65rem; font-weight: 500;
  color: var(--ink-faint); padding-top: 0.35rem;
}

.legal-block h2 {
  font-size: 1.08rem; font-weight: 700;
  letter-spacing: -0.01em; margin-bottom: 0.85rem;
}
.legal-block h3 {
  font-size: 0.86rem; font-weight: 700;
  margin: 1.6rem 0 0.5rem; letter-spacing: -0.01em;
}
.legal-block p { font-size: 0.88rem; color: var(--ink-mid); line-height: 1.75; }
.legal-block p + p { margin-top: 0.85rem; }
.legal-block strong { color: var(--ink); font-weight: 700; }
.legal-block code {
  font-family: var(--code); font-size: 0.85em;
  background: var(--stone); color: var(--ink);
  padding: 0.1rem 0.35rem; border-radius: 4px;
}
.legal-block a { color: var(--accent); text-decoration: none; }
.legal-block a:hover { color: var(--accent-dim); }

.legal-list { list-style: none; margin: 1rem 0 0; display: flex; flex-direction: column; gap: 0.55rem; }
.legal-list li {
  position: relative; padding-left: 1.15rem;
  font-size: 0.86rem; color: var(--ink-mid); line-height: 1.7;
}
.legal-list li::before {
  content: ''; position: absolute; left: 0; top: 0.62em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--accent);
}
.legal-list + p,
.legal-table-wrap + p,
.legal-note + p { margin-top: 1.1rem; }

/* Callout */
.legal-note {
  margin-top: 1.35rem; padding: 1.1rem 1.35rem;
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--off-white);
  display: flex; gap: 1rem; align-items: flex-start;
}
.legal-note-tag {
  font-family: var(--mono); font-size: 0.62rem; font-weight: 500;
  color: var(--ink-faint); white-space: nowrap; padding-top: 0.2rem;
}
.legal-note p { font-size: 0.83rem; }

/* Table */
.legal-table-wrap {
  margin-top: 1.2rem;
  border: 1px solid var(--border); border-radius: 12px;
  overflow: hidden; overflow-x: auto;
}
.legal-table { width: 100%; border-collapse: collapse; min-width: 460px; }
.legal-table th {
  font-family: var(--mono); font-size: 0.62rem; font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-faint);
  text-align: left; padding: 0.7rem 1rem;
  background: var(--off-white); border-bottom: 1px solid var(--border);
}
.legal-table td {
  padding: 0.85rem 1rem; font-size: 0.82rem;
  color: var(--ink-mid); line-height: 1.65;
  border-bottom: 1px solid var(--border); vertical-align: top;
}
.legal-table tr:last-child td { border-bottom: none; }
.legal-table td:first-child { color: var(--ink); font-weight: 700; white-space: nowrap; }

/* Footer of a legal page */
.legal-end {
  margin-top: 2.5rem; padding: 1.35rem 1.5rem;
  border: 1px solid var(--border); border-radius: 12px;
  background: var(--off-white);
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 0.5rem 1.5rem;
}
.legal-end-label {
  font-family: var(--mono); font-size: 0.62rem; font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-faint);
}
.legal-end a {
  font-size: 0.85rem; font-weight: 600; color: var(--accent); text-decoration: none;
}
.legal-end a:hover { color: var(--accent-dim); }

/* ── HELP CENTER ── */
.help-hero {
  padding: calc(var(--nav-h) + 56px) 2.5rem 2rem;
  text-align: center;
}
.help-hero-inner { max-width: 640px; margin: 0 auto; }
.help-h1 {
  font-size: 36px;
  font-weight: 400; line-height: 1.08; letter-spacing: -0.01em;
  margin-top: 1rem;
}
.help-lede {
  font-size: 0.95rem; color: var(--ink-mid); line-height: 1.75;
  margin-top: 1.15rem;
}
.help-search {
  margin: 2rem auto 0; max-width: 540px;
  display: flex; align-items: center; gap: 0.75rem;
  background: var(--stone);
  border-radius: 100px; padding: 0.85rem 1.4rem;
  transition: background .15s, box-shadow .15s;
}
.help-search:focus-within {
  background: var(--white);
  box-shadow: 0 1px 6px rgba(32,33,36,.18);
}
.help-search svg { width: 16px; height: 16px; color: var(--ink-faint); flex-shrink: 0; }
.help-search input {
  flex: 1; border: none; outline: none; background: none;
  font-family: var(--font); font-size: 0.92rem; color: var(--ink);
}
.help-search input::placeholder { color: var(--ink-faint); }

/* The hub replaces the sidebar-of-documents (#145). The cards are the
   navigation now, so .help-body / .help-columns / .help-sidenav are gone —
   what was a 230px rail of filenames is a grid of what each guide is for. */
.help-hub { max-width: 1080px; margin: 0 auto; padding: 3.5rem 2.5rem 1rem; scroll-margin-top: 74px; }

/* Every guide, stacked and in the served HTML (#136). A crawler was being
   handed the word "Loading…"; now it is handed all ten. */
.help-guides { max-width: 760px; margin: 0 auto; padding: 1.5rem 2.5rem 4rem; }
/* On the hub this element is normally empty since #166 — it holds only guides
   the studio has added since the last build. Empty, it must take no room, or
   the hub carries a 5.5rem gap between the cards and the FAQ for nothing. */
.help-guides:empty { padding: 0; }
.help-guide {
  padding-top: 3rem; margin-top: 3rem;
  border-top: 1px solid var(--border); scroll-margin-top: 74px;
}
.help-guide:first-child { border-top: none; margin-top: 0; padding-top: 1rem; }
.help-guide-topic {
  display: block; font-family: var(--mono); font-size: 0.62rem; font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent-dim);
  margin-bottom: 0.75rem;
}
/* The guide's own title. render() emits it as an h2 so the document keeps a
   single h1 — the page's question — with the guides stacked under it.

   Scoped away from `.help-guides-single` since #166: on /help/<slug>/ the
   title IS the page's h1 and bodyOf() has taken it out of the body, so the
   first h2 there is a real section heading and dressing it as a title would
   make the second section look like the start of the guide. */
.help-guides:not(.help-guides-single) .help-guide > h2:first-of-type {
  font-size: 1.55rem; font-weight: 400; letter-spacing: -0.01em;
  line-height: 1.15; margin: 0 0 1.25rem; padding-top: 0; border-top: none;
}
.help-guide-top {
  display: inline-block; margin-top: 1.75rem;
  font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.04em;
  color: var(--ink-faint); text-decoration: none;
}
.help-guide-top:hover { color: var(--ink-mid); }

.help-guide h1 {
  font-size: 1.55rem; font-weight: 400; letter-spacing: -0.01em;
  line-height: 1.15; margin-bottom: 1.25rem;
}
.help-guide h2 {
  font-size: 1.05rem; font-weight: 700; letter-spacing: -0.01em;
  margin: 2.1rem 0 0.75rem; padding-top: 1.4rem;
  border-top: 1px solid var(--border);
  scroll-margin-top: 74px;
}
.help-guide h3 {
  font-size: 0.88rem; font-weight: 700; margin: 1.5rem 0 0.5rem;
  scroll-margin-top: 74px;
}
.help-guide p { font-size: 0.89rem; color: var(--ink-mid); line-height: 1.75; }
.help-guide p + p { margin-top: 0.85rem; }
.help-guide strong { color: var(--ink); font-weight: 700; }
.help-guide em { color: var(--ink); }
.help-guide code {
  font-family: var(--code); font-size: 0.85em;
  background: var(--stone); color: var(--ink);
  padding: 0.1rem 0.35rem; border-radius: 4px;
}
.help-guide a { color: var(--accent); text-decoration: none; }
.help-guide a:hover { color: var(--accent-dim); }
.help-guide ul, .help-guide ol { margin: 0.9rem 0 0 0; display: flex; flex-direction: column; gap: 0.55rem; }
.help-guide ul { list-style: none; }
.help-guide ol { padding-left: 1.3rem; }
.help-guide li { font-size: 0.87rem; color: var(--ink-mid); line-height: 1.7; }
.help-guide ul > li { position: relative; padding-left: 1.15rem; }
.help-guide ul > li::before {
  content: ''; position: absolute; left: 0; top: 0.62em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--accent);
}
.help-guide li ul, .help-guide li ol { margin-top: 0.55rem; }
.help-guide ul + p, .help-guide ol + p, .help-table-wrap + p { margin-top: 1.1rem; }
.help-flash { animation: helpFlash 1.6s ease; }
@keyframes helpFlash {
  0% { background: var(--accent-bg); }
  100% { background: transparent; }
}

.help-table-wrap {
  margin-top: 1.2rem;
  border: 1px solid var(--border); border-radius: 12px;
  overflow: hidden; overflow-x: auto;
}
.help-table-wrap table { width: 100%; border-collapse: collapse; min-width: 460px; }
.help-table-wrap th {
  font-family: var(--mono); font-size: 0.62rem; font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-faint);
  text-align: left; padding: 0.7rem 1rem;
  background: var(--off-white); border-bottom: 1px solid var(--border);
}
.help-table-wrap td {
  padding: 0.85rem 1rem; font-size: 0.82rem;
  color: var(--ink-mid); line-height: 1.65;
  border-bottom: 1px solid var(--border); vertical-align: top;
}
.help-table-wrap tr:last-child td { border-bottom: none; }
.help-table-wrap td:first-child { color: var(--ink); font-weight: 700; white-space: nowrap; }

/* Top-level now rather than a column of the old two-column layout, so it
   carries its own measure. */
.help-results {
  display: flex; flex-direction: column; gap: 1.5rem;
  max-width: 760px; margin: 0 auto; padding: 2.5rem 2.5rem 1rem;
}
.help-hit { display: flex; flex-direction: column; gap: 0.4rem; }
.help-hit-title {
  font-size: 1rem; font-weight: 700; color: var(--ink);
  text-decoration: none; letter-spacing: -0.01em;
}
.help-hit-title:hover { color: var(--accent-dim); }
.help-hit-snippet {
  display: block; padding: 0.75rem 1rem;
  border: 1px solid var(--border); border-radius: 10px;
  font-size: 0.82rem; color: var(--ink-mid); line-height: 1.65;
  text-decoration: none;
  transition: border-color .15s, background .15s;
}
.help-hit-snippet:hover { border-color: var(--accent); background: var(--accent-bg); }
.help-hit-heading {
  display: block;
  font-family: var(--mono); font-size: 0.62rem; color: var(--ink-faint);
  text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.3rem;
}
.help-results mark { background: var(--accent-bg); color: var(--accent-dim); font-weight: 700; padding: 0 0.1em; border-radius: 3px; }
.help-dim { font-size: 0.85rem; color: var(--ink-faint); line-height: 1.7; }
/* A guide the studio has not translated yet, on a page in another language (#535). */
.help-guide-note { font-size: 0.85rem; color: var(--ink-faint); line-height: 1.7; margin: 0 0 1.25rem; padding: 0.6rem 0.9rem; border-left: 3px solid var(--line, #e5e5e0); }
.help-retry {
  font-family: var(--font); font-size: 0.82rem; font-weight: 700;
  color: white; background: var(--ink); border: none; cursor: pointer;
  padding: 0.55rem 1.3rem; border-radius: 100px;
  transition: background .15s;
}
.help-retry:hover { background: var(--ink-mid); }

/* ── the FAQ block, and the "ask a person" footer ──
   Both come from the pmc.splitpay.com/help shape the ask pointed at: cards,
   then frequently asked questions, then a way to reach a human. */
.help-faq { padding: 3rem 2.5rem 0; }
.help-faq-inner { max-width: 760px; margin: 0 auto; padding: 32px 40px; background: var(--white); border-radius: 16px; }
.help-faq-h2 {
  font-size: clamp(1.4rem, 2.6vw, 1.9rem); font-weight: 400;
  letter-spacing: -0.01em; line-height: 1.15; margin-bottom: 2rem;
}
.help-faq-item { border-top: 1px solid var(--border); padding: 1.4rem 0; }
.help-faq-item:first-child { border-top: none; padding-top: 0; }
.help-faq-item dt { font-size: 0.95rem; font-weight: 700; color: var(--ink); letter-spacing: -0.01em; }
.help-faq-item dd { font-size: 0.88rem; color: var(--ink-mid); line-height: 1.75; margin: 0.6rem 0 0; }
.help-faq-item dd a { color: var(--accent); text-decoration: none; font-weight: 600; }
.help-faq-item dd a:hover { color: var(--accent-dim); }

.help-support { padding: 4rem 0 1rem; text-align: center; }
.help-support-inner { max-width: 560px; margin: 0 auto; padding: 0 2.5rem; }
.help-support-inner h2 {
  font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 400;
  letter-spacing: -0.01em; line-height: 1.12; margin-top: 1rem;
}
.help-support-inner p { font-size: 0.92rem; color: var(--ink-mid); line-height: 1.7; margin: 1rem 0 1.75rem; }
.help-support-alt { margin-top: 1.5rem !important; margin-bottom: 0 !important; }
.help-support-alt a { color: var(--accent); text-decoration: none; font-size: 0.82rem; }
.help-support-alt a:hover { text-decoration: underline; }

/* Search-result trimmings the hub adds: the guide's emoji beside its title,
   and the line that owns up to a partial match instead of implying a full one. */
/* ── one guide, on its own URL (#166) ──
   The hero, the h1 and the dek are grouped onto `.res-hero`'s rules above
   rather than restated, so an article and a guide page cannot drift apart.
   These three are all this page needs beyond that. */
.help-guides-single { background: var(--white); border-radius: 16px; padding: 40px 48px; }
/* Whatever the guide opens with sits directly under the hero — no rule, no
   gap held for a title that is now the <h1> two elements up. */
.help-guides-single .help-guide > *:first-child {
  margin-top: 0; padding-top: 0; border-top: none;
}
.help-more { padding: 3rem 0 1rem; }
.help-more-inner { max-width: 760px; margin: 0 auto; padding: 0 2.5rem; }
.help-more-all { margin-top: 1.5rem; }
.help-more-all a { color: var(--accent); text-decoration: none; }
.help-more-all a:hover { color: var(--ink); }

.help-hit-emoji { margin-right: 0.5rem; }
.help-results-note { margin-bottom: 1.25rem; }

@media (max-width: 860px) {
  .help-hero { padding: 6rem 1.25rem 2.5rem; }
  .help-hub { padding: 2.25rem 1.25rem 0.5rem; }
  .help-guides { padding: 1rem 1.25rem 3rem; }
  .help-guides-single { margin: 0 16px; padding: 24px 18px; }
  .help-faq { padding: 2rem 16px 0; }
  .help-faq-inner { padding: 24px 18px; }
  .help-faq-inner, .help-support-inner { padding-left: 1.25rem; padding-right: 1.25rem; }
}

/* ── ANIMATIONS ── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Every section is visible at rest since #1092: a page is complete without
   scrolling. The class survives in a few templates and means nothing now. */
.reveal { opacity: 1; transform: none; }

/* ── RESPONSIVE ── */
@media (max-width: 860px) {
  nav { padding: 0 16px; }
  .nav-links { display: none; }
  .legal-hero { padding: 7rem 16px 2rem; }
  .legal { padding: 0 16px 3rem; }
  .legal-toc { grid-template-columns: 1fr; }
  .legal-block { grid-template-columns: 1fr; }
  .legal-n { padding-top: 0; margin-bottom: 0.5rem; }
}

@media (max-width: 480px) {
  .pricing-card { padding: 20px; }
  /* #542: the switch holds one line inside the card at 320px (style rule 9,
     a label that would wrap gets shorter, not smaller). */
  .plan-opt { font-size: 0.68rem; padding: 0.42rem 0.66rem; }
}
/* ══ /resources/ — the lead-generation blog (#144) ══════════════════════
   Two page shapes: the card-grid hub and the article. Both reuse the
   existing tokens and .tag/.btn-cta rather than introducing a second
   visual language — this section is part of the site, not a bolt-on blog.
   The 8.5rem top padding on both heroes clears the fixed 58px nav, same as
   .help-hero, which is the precedent this section follows. */

/* ── hub ── */
.res-hub-hero, .page-hero {
  padding: calc(var(--nav-h) + 72px) 2.5rem 2.5rem;
  text-align: center;
}
.res-hub-hero-inner, .page-hero-inner { max-width: 700px; margin: 0 auto; }
.res-hub-h1, .page-h1 {
  font-size: 40px;
  font-weight: 400; line-height: 1.15; letter-spacing: -0.01em;
  text-wrap: balance;
}
.res-hub-lede, .page-lede {
  font-size: 18px; color: var(--ink-mid); line-height: 1.5;
  margin: 16px auto 0; max-width: 600px; text-wrap: balance;
}

.res-hub { max-width: 1080px; margin: 0 auto; padding: 3.5rem 2.5rem 1rem; }
/* ── THE CARD GRID — one component, two hubs ──
   #144 shipped this for /resources/ and #145 wanted the same grid for the
   /help/ hub. Rather than a second copy that drifts, the selectors are
   grouped: `.res-*` is what /resources/ already renders and `.card*` is the
   neutral name new work should use. Anything added here lands on both. */
.res-grid, .card-grid {
  list-style: none; display: grid; gap: 1.25rem;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
.res-card, .card {
  border-radius: 16px;
  background: var(--white); transition: box-shadow .15s;
}
.res-card:hover, .card:hover { box-shadow: 0 1px 6px rgba(32,33,36,.16); }
.res-card > a, .card > a {
  display: flex; flex-direction: column; gap: 0.55rem;
  padding: 1.5rem 1.5rem 1.35rem; text-decoration: none; height: 100%;
}
.res-card-topic, .card-topic {
  font-family: var(--mono); font-size: 0.62rem; font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent-dim);
}
.res-card-title, .card-title {
  font-size: 1.08rem; font-weight: 400; line-height: 1.28;
  letter-spacing: -0.01em; color: var(--ink); text-wrap: balance;
}
.res-card-dek, .card-dek {
  font-size: 0.87rem; color: var(--ink-mid); line-height: 1.6; flex: 1;
}
/* The two the help hub adds: the emoji that makes a grid of eleven guides
   scannable, and the → that says a card is a link. */
.card-emoji { font-size: 1.35rem; line-height: 1; }
.card-cta {
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--accent-dim); margin-top: 0.2rem;
}
.card:hover .card-cta { color: var(--accent); }
.res-card-meta {
  font-family: var(--mono); font-size: 0.68rem; color: var(--ink-faint);
  margin-top: 0.35rem;
}
.res-dot { margin: 0 0.4rem; }
.res-empty { color: var(--ink-mid); text-align: center; padding: 2rem 0; }

/* ── the topic filter (#159) ──
   Ships hidden and is revealed by resources.js, so no-JS readers see the whole
   grid rather than dead buttons. `hidden` on the row and on a filtered-out card
   is the mechanism; these rules only style what survives. */
.res-filter {
  display: flex; flex-wrap: wrap; gap: 0.5rem;
  margin-bottom: 1.75rem;
}
.res-filter[hidden] { display: none; }
.res-chip {
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--ink-mid);
  background: var(--white); border: 1px solid transparent;
  border-radius: 999px; padding: 0.42rem 0.85rem; cursor: pointer;
  transition: color .15s, background .15s;
}
.res-chip:hover { background: var(--stone); color: var(--ink); }
.res-chip.is-on {
  background: var(--accent-bg); color: var(--accent);
}
.res-chip-n { opacity: 0.55; margin-left: 0.35rem; }
.res-filter-count {
  font-family: var(--mono); font-size: 0.68rem; color: var(--ink-faint);
  margin: -1.1rem 0 1.4rem;
}
.res-filter-count:empty { display: none; }
.res-card[hidden] { display: none; }

/* ── /learn/ (#742): the course as pages, on the resources components ──
   A group heading between two card grids, and the previous/next pair at the
   foot of a lesson; everything else is `.res-*`. */
.learn-group {
  font-family: var(--mono); font-size: 0.68rem; font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-faint);
  margin: 2.25rem 0 0.9rem;
}
.learn-group:first-child { margin-top: 0; }
.learn-grid { margin-bottom: 0.5rem; }
.learn-nav {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;
  margin: 2.5rem 0 0; padding-top: 1.5rem; border-top: 1px solid var(--border);
}
.learn-nav-link {
  display: flex; flex-direction: column; gap: 0.3rem; text-decoration: none;
}
.learn-nav-next { text-align: right; align-items: flex-end; }
.learn-nav-link:hover .res-more-title { color: var(--accent-dim); }
.learn-where { font-size: 0.92rem; color: var(--ink-mid); }
@media (max-width: 600px) {
  .learn-nav { grid-template-columns: 1fr; }
  .learn-nav-next { text-align: left; align-items: flex-start; }
}

.res-hub-cta {
  margin-top: 1.5rem; padding: 4rem 2.5rem 0; text-align: center;
}
.res-hub-cta-inner { max-width: 560px; margin: 0 auto; }
.res-hub-cta-inner h2 {
  font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 400;
  letter-spacing: -0.01em; line-height: 1.12; text-wrap: balance;
}
.res-hub-cta-inner p {
  font-size: 0.92rem; color: var(--ink-mid); line-height: 1.7;
  margin: 1rem 0 1.75rem;
}

/* ── article ── */
.res-hero, .help-guide-hero {
  padding: calc(var(--nav-h) + 56px) 2.5rem 2rem;
}
.res-hero-inner, .help-guide-hero-inner { max-width: 720px; margin: 0 auto; }
.res-back {
  /* Its own line above the topic tag — both are inline-level and collided. */
  display: flex; width: fit-content; align-items: center; gap: 5px;
  font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--ink-faint);
  text-decoration: none; margin-bottom: 1.4rem;
}
.res-back:hover { color: var(--ink-mid); }
.res-back svg { width: 13px; height: 13px; }
.res-h1, .help-guide-h1 {
  font-size: 36px;
  font-weight: 400; line-height: 1.09; letter-spacing: -0.01em;
  margin-top: 0.35rem; text-wrap: balance;
}
.res-dek {
  font-size: 1.02rem; color: var(--ink-mid); line-height: 1.65;
  margin-top: 1.1rem; max-width: 62ch;
}
.res-meta {
  font-family: var(--mono); font-size: 0.7rem; color: var(--ink-faint);
  margin-top: 1.5rem;
}

.res-body {
  max-width: 800px; margin: 0 auto; padding: 40px 40px 8px;
  background: var(--white); border-radius: 16px;
}

/* The prose block. Deliberately narrow measure and generous leading — these
   are 1,000-word arguments, not marketing sections. */
.res-prose { font-size: 1.02rem; line-height: 1.78; color: var(--ink); }
.res-prose > * + * { margin-top: 1.35rem; }
.res-prose h2 {
  font-size: 1.45rem; font-weight: 400; letter-spacing: -0.01em;
  line-height: 1.2; margin-top: 3rem; text-wrap: balance;
}
.res-prose h3 {
  font-size: 1.12rem; font-weight: 700; letter-spacing: -0.01em;
  margin-top: 2.2rem;
}
.res-prose ul, .res-prose ol { padding-left: 1.3rem; }
.res-prose li + li { margin-top: 0.5rem; }
.res-prose strong { font-weight: 700; }
.res-prose a { color: var(--accent-dim); text-underline-offset: 3px; }
.res-prose code {
  font-family: var(--code); font-size: 0.86em;
  background: var(--stone); padding: 0.1em 0.35em; border-radius: 4px;
}
.res-prose blockquote {
  border-left: 3px solid var(--accent); padding-left: 1.15rem;
  color: var(--ink); font-size: 1.05rem; line-height: 1.6;
}
.res-prose blockquote p + p {
  margin-top: 0.6rem; font-family: var(--mono); font-size: 0.72rem;
  color: var(--ink-faint); letter-spacing: 0.03em;
}
.res-prose hr { border: none; border-top: 1px solid var(--border); margin: 2.5rem 0; }
.res-prose table {
  width: 100%; border-collapse: collapse; font-size: 0.9rem;
  display: block; overflow-x: auto;
}
.res-prose th, .res-prose td {
  text-align: left; padding: 0.6rem 0.9rem;
  border-bottom: 1px solid var(--border); vertical-align: top;
}
.res-prose th {
  font-family: var(--mono); font-size: 0.68rem; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--ink-faint); font-weight: 500;
}

/* The scan CTA every article ends at — the whole reason the section exists. */
.res-cta {
  margin-top: 3.5rem; padding: 2rem 2rem 2.25rem;
  background: var(--accent-bg); border-radius: 16px; text-align: center;
}
.res-cta .tag { color: var(--accent); }
.res-cta h2 {
  font-size: 1.35rem; font-weight: 400; letter-spacing: -0.01em;
  line-height: 1.18; text-wrap: balance;
}
.res-cta p {
  font-size: 0.9rem; color: var(--ink-mid); line-height: 1.65;
  margin: 0.8rem auto 1.5rem; max-width: 46ch;
}
.res-cta-note {
  display: block; margin-top: 0.9rem;
  font-family: var(--mono); font-size: 0.68rem; color: var(--ink-faint);
}

.res-more { margin: 3.5rem 0 0; padding-bottom: 4rem; }
.res-more-h {
  font-family: var(--mono); font-size: 0.7rem; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint);
  padding-bottom: 0.9rem; border-bottom: 1px solid var(--border);
}
.res-more-list { list-style: none; }
.res-more-list li { border-bottom: 1px solid var(--border); }
.res-more-list a {
  display: flex; flex-direction: column; gap: 0.25rem;
  padding: 1.1rem 0; text-decoration: none;
}
.res-more-title { font-weight: 700; font-size: 0.98rem; color: var(--ink); letter-spacing: -0.01em; }
.res-more-dek { font-size: 0.85rem; color: var(--ink-mid); line-height: 1.55; }
.res-more-list a:hover .res-more-title { color: var(--accent-dim); }

@media (max-width: 640px) {
  .res-hub-hero, .res-hero, .help-guide-hero, .page-hero { padding: calc(var(--nav-h) + 40px) 16px 1.5rem; }
  .res-hub-h1, .page-h1 { font-size: 30px; }
  .res-h1, .help-guide-h1 { font-size: 28px; }
  .res-hub-lede, .page-lede { font-size: 16px; }
  .res-hub { padding-left: 16px; padding-right: 16px; }
  .res-body { margin: 0 16px; padding: 24px 18px 8px; }
  .res-hub-cta { padding: 3rem 1.4rem; }
  .res-cta { padding: 1.6rem 1.3rem 1.9rem; }
}

/* ── the marketing page hero (shares .res-hub-hero's rules above) ── */
.page-hero-actions {
  display: flex; gap: 0.85rem; justify-content: center;
  flex-wrap: wrap; margin-top: 28px;
}

/* ── /integrations/ AND /integrations/close/ (#830, #838) ──
   Close's own directory shape, in this site's tokens: a hub of cards, and an
   integration page with a sidebar that holds the one action, visuals on the
   right, a few lines, and the other integrations under it. The cards are the
   `.card` component the hubs already share; the monogram is the studio's own
   neutral mark (#572: a vendor's logo needs a listing first). */
.int-card > a, .int-card > .card-body { gap: 0.45rem; }
.int-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.4rem; height: 2.4rem; border-radius: 9px;
  background: var(--stone); color: var(--ink);
  font-family: var(--mono); font-size: 0.82rem; font-weight: 700;
  letter-spacing: 0.02em; margin-bottom: 0.35rem;
}
.int-mark.has-logo { background: var(--off-white); }
.int-mark img { width: 62%; height: 62%; object-fit: contain; display: block; }
.int-card.is-static .int-mark { color: var(--ink-faint); }
.int-card.is-static .int-mark img { opacity: .55; }
.int-card.is-static .card-title { color: var(--ink-mid); }
.int-hub { max-width: 1080px; margin: 0 auto; padding: 3.5rem 2.5rem 1rem; }
.int-hub-more {
  max-width: 1080px; margin: 0 auto; padding: 2.5rem 2.5rem 4.5rem;
  text-align: center;
}
.int-hub-more p { font-size: 0.93rem; color: var(--ink-mid); line-height: 1.7; }
.int-hub-more .btn-ghost { margin-top: 1.1rem; display: inline-block; }

/* the integration page */
.int-page { max-width: 1080px; margin: 0 auto; padding: calc(var(--nav-h) + 48px) 2.5rem 1rem; }
.int-back {
  font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--ink-faint); text-decoration: none;
}
.int-back:hover { color: var(--ink); }
.int-head {
  display: flex; align-items: center; gap: 1.1rem;
  margin-top: 1.6rem; padding-bottom: 0.5rem;
}
.int-head .int-mark { width: 3.6rem; height: 3.6rem; font-size: 1.15rem; border-radius: 13px; margin: 0; }
.int-head h1 {
  font-size: 32px; font-weight: 400;
  letter-spacing: -0.01em; line-height: 1.05;
}
.int-sub { font-size: 0.95rem; color: var(--ink-mid); margin-top: 0.3rem; }
.int-body {
  display: grid; grid-template-columns: 280px 1fr; gap: 2rem;
  margin-top: 2.25rem; align-items: start;
}
.int-side {
  position: sticky; top: calc(var(--nav-h) + 16px);
  border-radius: 16px; background: var(--white);
  padding: 1.35rem; display: flex; flex-direction: column; gap: 0.7rem;
}
.int-side .btn-cta, .int-side .btn-ghost { display: block; text-align: center; margin: 0; }
.int-side-offer { font-size: 0.82rem; color: var(--ink-mid); line-height: 1.6; }
.int-side-offer strong { color: var(--ink); }
.int-links { list-style: none; margin: 0.4rem 0 0; padding: 0.9rem 0 0; border-top: 1px solid var(--border); }
.int-links li { font-size: 0.85rem; line-height: 2; }
.int-links a { color: var(--ink-mid); text-decoration: none; }
.int-links a:hover { color: var(--ink); }
.int-built { font-family: var(--mono); font-size: 0.68rem; color: var(--ink-faint); margin-top: 0.4rem; }
.int-main { min-width: 0; }
.int-visual {
  border-radius: 16px; overflow: hidden;
  background: var(--white); margin: 0;
}
.int-visual + .int-visual { margin-top: 1.1rem; }
.int-visual img, .int-visual svg { display: block; width: 100%; height: auto; }
.int-visual figcaption {
  font-family: var(--mono); font-size: 0.68rem; color: var(--ink-faint);
  padding: 0.7rem 1rem; border-top: 1px solid var(--border); background: var(--white);
}
.int-text { margin-top: 1.9rem; max-width: 620px; }
.int-text p { font-size: 0.95rem; color: var(--ink-mid); line-height: 1.75; margin-top: 0.9rem; }
.int-text p:first-child { margin-top: 0; }
.int-text ol { margin: 0.9rem 0 0 1.25rem; padding: 0; }
.int-text li { font-size: 0.95rem; color: var(--ink-mid); line-height: 1.75; }
.int-text strong, .int-text li strong { color: var(--ink); font-weight: 700; }
.int-text a { color: var(--accent); text-decoration: none; font-weight: 600; }
.int-text a:hover { color: var(--accent-dim); }
.int-more { max-width: 1080px; margin: 0 auto; padding: 4.5rem 2.5rem 4rem; }
.int-more .sec-mid { text-align: center; margin-bottom: 2rem; }
.int-more-all { text-align: center; margin-top: 2rem; }
.int-page .pricing-page { padding: 3.5rem 0 0; }
.int-page .pricing-card { max-width: 620px; margin: 0 auto; padding: 32px; }
@media (max-width: 860px) {
  /* One column, the sidebar first: on a phone the button is the first thing
     under the name, the way it is on Close's own pages, never under the text. */
  .int-body { grid-template-columns: 1fr; }
  .int-side { position: static; }
}
@media (max-width: 640px) {
  .int-page, .int-hub, .int-more, .int-hub-more { padding-left: 1.4rem; padding-right: 1.4rem; }
  .int-page { padding-top: calc(var(--nav-h) + 32px); }
}

/* ── THE CLOSING CARD (both product pages) ── */
.page-split {
  max-width: 1040px; margin: 16px auto 0; padding: 0 24px; text-align: center;
}
.page-split-inner { background: var(--white); border-radius: 16px; padding: 40px 24px; }
.page-split-inner h2 {
  font-size: 24px; font-weight: 400; line-height: 1.25; text-wrap: balance;
}
.page-split-inner p {
  font-size: 15px; color: var(--ink-mid); line-height: 1.5;
  margin: 8px auto 0; max-width: 520px;
}
.page-split-inner .btn-cta, .page-split-inner .btn-ghost { margin-top: 20px; }

/* ── /pricing/ ── */
.pricing-page .buy { margin-top: 24px; }
.pricing-page .plan-switch { margin: 4px 0 16px; align-self: flex-start; }
.pricing-page .price-row { margin-top: 0; }

.pricing-faq { padding: 48px 24px 0; }
.pricing-faq-inner { max-width: 760px; margin: 0 auto; }
.pricing-faq h2 { font-size: 28px; font-weight: 400; text-align: center; margin-bottom: 20px; }
.pricing-faq-list { background: var(--white); border-radius: 16px; padding: 8px 32px; }
.pricing-faq-item { border-top: 1px solid var(--border); padding: 20px 0; }
.pricing-faq-item:first-child { border-top: none; }
.pricing-faq-item dt { font-size: 16px; font-weight: 500; color: var(--ink); }
.pricing-faq-item dd {
  font-size: 15px; color: var(--ink-mid); line-height: 1.6; margin: 6px 0 0;
}
.pricing-faq-item dd em { color: var(--ink); font-style: normal; font-weight: 500; }
.pricing-faq-item dd a { color: var(--accent); text-decoration: none; }
.pricing-faq-item dd a:hover { text-decoration: underline; }

/* The mobile header. `.nav-links` is display:none above 860px in the base
   rules; here it becomes a panel under the bar, opened by .nav-toggle. Every
   override in this block sits AFTER the base rules on purpose — media queries
   add no specificity, so a responsive rule declared earlier in the file loses
   to a later base rule. The two-up halves lost exactly that way once. */
.nav-toggle {
  display: none; background: none; border: none; padding: 0.35rem;
  color: var(--ink-mid); cursor: pointer; line-height: 0;
}
.nav-toggle .nav-toggle-x,
.nav-toggle[aria-expanded="true"] svg:first-of-type { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle-x { display: block; }

@media (max-width: 860px) {
  .nav-toggle { display: block; }
  .nav-signin { display: none; }
  .nav-right { margin-left: auto; }
  /* The panel hangs off the bar's bottom edge. */
  .nav-links {
    display: none; margin-left: 0;
    position: absolute; top: var(--nav-h); left: 0; right: 0;
    flex-direction: column; gap: 0;
    background: var(--white);
    border-bottom: 1px solid var(--border);
    padding: 4px 16px 12px;
    font-size: 16px;
    max-height: calc(100vh - var(--nav-h)); overflow-y: auto;
  }
  .nav-links.is-open { display: flex; }
  .nav-links li { border-top: 1px solid var(--border); }
  .nav-links li:first-child { border-top: none; }
  .nav-links a { display: block; padding: 14px 0; color: var(--ink); }
  .pricing-faq { padding: 40px 16px 0; }
  .pricing-faq-list { padding: 4px 18px; }
  .page-split { padding: 0 16px; }
}

/* ── CONTACT (#456) ──────────────────────────────────────────────────────
   Three fields stacked, one button. The style skill's rule 8 — one primary
   action per screen — is the whole layout: no field groups side by side, no
   optional extras, no second CTA competing with Send. */
.contact-section { padding: 1rem 2.5rem 1rem; }
.contact-inner { max-width: 600px; margin: 0 auto; background: var(--white); border-radius: 16px; padding: 32px; }

.contact-form { display: flex; flex-direction: column; gap: 1.4rem; }

.contact-row { display: flex; flex-direction: column; gap: 0.5rem; text-align: left; }

.contact-label {
  font-size: 14px; font-weight: 500; color: var(--ink);
}

/* Square-cornered rather than the pill .reserve-input uses: a pill reads as a
   single-line control, and the message box next to it is six rows tall. */
.contact-input {
  width: 100%; box-sizing: border-box;
  font-family: var(--font); font-size: 15px;
  color: var(--ink); background: var(--stone);
  border: 1px solid transparent; border-radius: 12px;
  padding: 0.8rem 1rem; outline: none;
  transition: background .15s, border-color .15s;
}
.contact-input:focus { background: var(--white); border-color: #dadce0; }
.contact-input::placeholder { color: var(--ink-faint); }

.contact-textarea { resize: vertical; min-height: 9rem; line-height: 1.6; }

.contact-submit { align-self: flex-start; border: none; cursor: pointer; font-family: inherit; }

.contact-note {
  margin-top: 2rem; font-size: 0.8rem; line-height: 1.7;
  color: var(--ink-mid); text-align: left;
}
.contact-note a { color: var(--accent); }

/* /partners/ (#885): the seven terms as a numbered list in the legal list's
   voice, and the note under them in the contact note's. */
.partner-terms {
  margin: 1.25rem 0 2rem; padding-left: 1.4rem;
  display: flex; flex-direction: column; gap: 0.6rem;
}
.partner-terms li { font-size: 0.92rem; color: var(--ink-mid); line-height: 1.7; }
.partner-note {
  margin-top: 2rem; font-size: 0.8rem; line-height: 1.7; color: var(--ink-mid);
}
.partner-note a { color: var(--accent); }

@media (max-width: 860px) {
  .contact-section { padding: 0.5rem 16px 1rem; }
  .contact-inner { padding: 22px 18px; }
  .contact-submit { align-self: stretch; text-align: center; }
}

/* ── THE DEMO (#767) ────────────────────────────────────────────────────
   The studio's one-minute tour on the real screens, one at a time: the
   screen, one element lit, one sentence, Next. The ring is a link whose own
   box-shadow dims everything around it, so the screen carries no second
   layer; the card sits BELOW the screen rather than over it, because the
   rings are mostly the right-hand panel and a card over the screen would
   cover what it points at. Without demo.js the figures stand in order.
   The chapter hues are the studio's own (`--verb-*` in studio.css). */
.demo-hero { padding-bottom: 2rem; border-bottom: none; }
.demo { padding: 0 2.5rem 1rem; }
.demo-stage { max-width: 1100px; margin: 0 auto; scroll-margin-top: 4.5rem; }
.demo-step { margin: 0 0 3.5rem; }
.demo-stage.is-live .demo-step { margin-bottom: 0; }
.demo-shot {
  position: relative; overflow: hidden; border-radius: 16px;
  background: var(--white);
  box-shadow: 0 1px 2px rgba(60,64,67,.12), 0 8px 28px rgba(60,64,67,.10);
}
.demo-shot img { display: block; width: 100%; height: auto; }
.demo-ring {
  position: absolute; display: block; border-radius: 10px;
  border: 2px solid var(--coral);
  box-shadow: 0 0 0 4px rgba(232,83,58,0.28), 0 0 0 9999px rgba(26,26,24,0.42);
  transition: box-shadow .15s;
}
.demo-ring:hover, .demo-ring:focus-visible {
  box-shadow: 0 0 0 6px rgba(232,83,58,0.4), 0 0 0 9999px rgba(26,26,24,0.5);
  outline: none;
}
.demo-card {
  display: grid; grid-template-columns: 1fr auto; gap: 1rem 2rem;
  align-items: start; margin: 0; padding: 1.5rem 0.25rem 0;
}
.demo-count {
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--ink-faint); margin: 0;
}
.demo-chapter { font-weight: 600; }
.demo-chapter.find, .demo-chapter-btn.find { color: #E8533A; }
.demo-chapter.engage, .demo-chapter-btn.engage { color: #0E8C8C; }
.demo-chapter.teach, .demo-chapter-btn.teach { color: #7A5EA8; }
.demo-card h2 {
  font-size: 1.4rem; font-weight: 400; letter-spacing: -0.01em;
  line-height: 1.2; margin: 0.4rem 0 0.4rem;
}
.demo-card-text > p:not(.demo-count) {
  font-size: 0.98rem; color: var(--ink-mid); line-height: 1.6;
  max-width: 640px; margin: 0;
}
.demo-chapters { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: 1.1rem; }
.demo-chapter-btn {
  font-size: 14px; font-weight: 500; text-decoration: none;
  padding: 0.55rem 1.15rem; border-radius: 100px;
  border: 1px solid #dadce0; background: var(--white);
  transition: background .15s;
}
.demo-chapter-btn:hover { background: var(--stone); }
.demo-actions { display: flex; align-items: center; gap: 0.75rem; justify-self: end; padding-top: 1.3rem; }
.demo-dots { display: flex; gap: 5px; list-style: none; margin: 0 0.5rem 0 0; padding: 0; }
.demo-dots li { width: 6px; height: 6px; border-radius: 50%; background: rgba(26,26,24,0.15); }
.demo-dots li.is-on { background: var(--ink); }
.demo-next {
  font-size: 14px; font-weight: 500; color: white; background: var(--ink);
  padding: 0.7rem 1.4rem; border-radius: 100px; text-decoration: none;
  display: inline-block; transition: background .15s;
}
.demo-next:hover { background: #000; }
.demo-end {
  background: var(--white); color: var(--ink); border-radius: 16px;
  padding: 3.5rem 2rem; text-align: center;
}
.demo-end h2 {
  font-size: 28px; font-weight: 400;
  line-height: 1.2; margin: 0 0 0.75rem;
}
.demo-end p { font-size: 1rem; color: var(--ink-mid); line-height: 1.6; max-width: 520px; margin: 0 auto 1.75rem; }
.demo-end-actions { display: flex; gap: 0.85rem; justify-content: center; flex-wrap: wrap; }


/* The door on the homepage, under the scan field: one quiet line. */
.scan-demo { margin: 0; }
.scan-demo a { color: var(--accent); text-decoration: none; }
.scan-demo a:hover { text-decoration: underline; }
.hero.scan-focus .scan-demo { display: none; }

@media (max-width: 860px) {
  .demo { padding: 0 16px 1rem; }
  .demo-card { grid-template-columns: 1fr; gap: 1rem; }
  .demo-actions { justify-self: start; padding-top: 0; }
  .demo-shot { border-radius: 8px; }
  .demo-ring { border-radius: 4px; }
}

/* ── The funnel in more than one language (#114) ───────────────────────
   Two pieces of chrome. The switcher lives in the footer, each language in
   its own name, because the header is at capacity (site.json, `//nav`) and
   the visitor whose browser already prefers another language never has to
   find it: the nudge meets them, once (#544). It hangs under the fixed 58px
   nav, over the hero's own top padding, and is one line in the language it
   offers — the line is the link to the twin page — and an × to close it.
   Nothing to read, nothing to decide, and it never redirects. The switcher
   exists only on a page that has a twin; the nudge only on an English one. */
.footer-langs {
  display: flex; gap: 0 12px; list-style: none; flex-wrap: wrap; margin-left: auto;
}
.footer-langs a { color: var(--ink-mid); text-decoration: none; }
.footer-langs a:hover { color: var(--ink); }
.footer-langs [aria-current] { color: var(--ink); }
@media (max-width: 860px) { .footer-langs { margin-left: 0; } }

.lang-suggest {
  position: fixed; top: var(--nav-h); left: 0; right: 0; z-index: 199;
  display: flex; align-items: center; justify-content: center;
  gap: 1rem; padding: 0.55rem 1.25rem;
  background: var(--accent-bg);
  font-size: 0.82rem; line-height: 1.4;
}
.lang-suggest a {
  color: var(--accent); font-weight: 500; text-decoration: none;
}
.lang-suggest button {
  background: none; border: 0; padding: 0 0.25rem; cursor: pointer;
  color: var(--ink-mid); font: inherit; font-size: 1.15rem; line-height: 1;
}
.lang-suggest button:hover { color: var(--ink); }

/* ── The homepage sections and the cards they share (#1092) ─────────────
   The studio's card: white on the grey ground, radius 16, no border and no
   shadow, a small grey question at its head and at most one text link at its
   foot. */
.col { max-width: 1040px; margin: 0 auto; padding: 0 24px; }
.sec { padding: 64px 0 0; scroll-margin-top: var(--nav-h); }
.sec-first { padding-top: 0; }
.sec h2 { font-size: 28px; font-weight: 400; line-height: 1.2; margin: 0 0 8px; text-wrap: balance; }
.sec .lede { color: var(--ink-mid); font-size: 16px; margin: 0 0 24px; max-width: 600px; line-height: 1.5; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.hcard { background: var(--white); border-radius: 16px; padding: 24px; display: flex; flex-direction: column; min-width: 0; }
.hcard[id] { scroll-margin-top: calc(var(--nav-h) + 16px); }
.hcard > h2 { font-size: 18px; margin: 0 0 8px; }
.hcard > p { font-size: 15px; color: var(--ink-mid); line-height: 1.55; }
.hcard-q { font-size: 13px; color: var(--ink-mid); margin: 0 0 14px; }
.hcard-foot { margin-top: auto; padding-top: 16px; font-size: 14px; display: flex; gap: 20px; flex-wrap: wrap; }
.hcard-foot a { text-decoration: none; }
.hcard-foot a:hover { text-decoration: underline; }
.hcard-foot a.quiet { color: var(--ink-mid); }
/* The homepage's paid card keeps the .buy id without the pricing tile's rule. */
.hcard-foot.buy { border-top: 0; margin-top: auto; }

/* The homepage below the hero (7 Oct 2026, the big-tiles mockup): bigger and
   airier than the inner pages. Centred 40px headings, cards at radius 24. */
.home-sec { padding-top: 96px; }
.home-sec .col { max-width: 1120px; }
.sec-h { text-align: center; margin: 0 auto 40px; max-width: 720px; }
.sec .sec-h h2 { font-size: 40px; font-weight: 600; letter-spacing: -.02em; line-height: 1.15; margin: 0 0 10px; }
.sec-h p { color: var(--ink-mid); font-size: 17px; line-height: 1.5; margin: 0; }
.home-sec .hcard { border-radius: 24px; padding: 28px; }
.home-sec .chips { justify-content: center; }

/* Four tiles, each one link: a tinted panel with a drawn piece of the
   product (decorative, aria-hidden), a big heading, one line, an arrow. */
#how { scroll-margin-top: calc(var(--nav-h) + 16px); }
.ptiles { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.ptile {
  background: var(--white); border-radius: 24px; padding: 20px; min-width: 0;
  display: flex; flex-direction: column; color: var(--ink); text-decoration: none;
}
.ptile:focus-visible { outline: 2px solid var(--coral); outline-offset: 3px; }
.pvis {
  border-radius: 16px; min-height: 340px; padding: 32px 0; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.pvis-1 { background: var(--tint-who); }
.pvis-2 { background: var(--tint-what); }
.pvis-3 { background: var(--tint-intro); }
.pvis-4 { background: var(--tint-learn); }
.pcap { display: flex; align-items: flex-end; gap: 16px; padding: 26px 12px 10px; margin-top: auto; }
.pcap > div { flex: 1; min-width: 0; }
.pcap h3 { font-size: 40px; font-weight: 600; letter-spacing: -.02em; line-height: 1.1; margin: 0 0 8px; text-wrap: balance; }
.pcap p { font-size: 16px; color: var(--ink-mid); line-height: 1.45; margin: 0; }
.pgo {
  width: 44px; height: 44px; border-radius: 50%; background: var(--ink); flex: none;
  display: grid; place-items: center; transition: transform .15s ease;
}
.ptile:hover .pgo { transform: translateX(3px); }

/* The tiles test (studio #1185, src/_data/abtest.js): a photo in place of the
   drawing, for the page views whose coin said "photo". With no data-v (no
   JavaScript, or the test off) the drawing shows. The photo is lazy, so the
   drawing's page views never fetch it. */
.pphoto { display: none; border-radius: 16px; overflow: hidden; }
.pphoto img { display: block; width: 100%; height: 340px; object-fit: cover; }
html[data-v="photo"] .pphoto { display: block; }
html[data-v="photo"] .pvis { display: none; }

/* The drawings: small, true pieces of the studio, drawn in HTML. */
.dr-card {
  background: var(--white); border-radius: 14px; width: 80%; max-width: 420px; padding: 16px 18px;
  box-shadow: 0 1px 2px rgba(60,64,67,.10), 0 10px 30px rgba(60,64,67,.12); font-size: 14px; color: var(--ink);
}
.dr-h { font-size: 12px; color: var(--ink-mid); margin-bottom: 8px; }
.dr-lead { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--border); }
.dr-h + .dr-lead { border-top: 0; }
.dr-lg { width: 28px; height: 28px; border-radius: 8px; flex: none; display: grid; place-items: center; font-weight: 600; font-size: 12px; }
.dr-blue { background: #e8f0fe; color: #1a56c4; }
.dr-amber { background: #fef3e0; color: #a35c00; }
.dr-green { background: #e6f4ea; color: #1e7a4a; }
.dr-nm { flex: 1; min-width: 0; }
.dr-nm b { display: block; font-weight: 500; line-height: 1.3; }
.dr-nm span { display: block; color: var(--ink-faint); font-size: 11.5px; line-height: 1.35; }
.dr-fit { font-size: 16px; width: 28px; text-align: right; flex: none; }
.dr-good { color: var(--good); }
.dr-gl { border: 1px solid #dadce0; border-radius: 14px; padding: 4px 10px; font-size: 11.5px; flex: none; }
.dr-fmt { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.dr-fmt span { background: var(--stone); border-radius: 12px; padding: 4px 10px; font-size: 11.5px; }
.dr-fmt span.on { background: var(--ink); color: var(--white); }
.dr-subj { font-weight: 600; margin-bottom: 6px; }
.dr-l { margin: 0 0 6px; color: #3c4043; line-height: 1.45; }
.dr-chain { display: flex; align-items: center; justify-content: center; gap: 8px; width: 86%; max-width: 440px; }
.dr-pp {
  background: var(--white); border-radius: 14px; padding: 12px; text-align: center; font-size: 12px; flex: 1; min-width: 0;
  box-shadow: 0 1px 2px rgba(60,64,67,.10), 0 10px 30px rgba(60,64,67,.12);
}
.dr-av { width: 40px; height: 40px; border-radius: 50%; margin: 0 auto 8px; display: grid; place-items: center; font-weight: 600; color: var(--white); }
.dr-ink { background: var(--ink); }
.dr-coral { background: var(--accent); }
.dr-navy { background: #1a56c4; }
.dr-pp b { display: block; font-weight: 500; font-size: 13px; }
.dr-pp span:not(.dr-av) { display: block; color: var(--ink-faint); font-size: 11px; }
.dr-arr { color: var(--ink-mid); font-size: 18px; flex: none; }
.dr-ask {
  margin-top: 16px; max-width: 92%; text-align: center; background: var(--white); border-radius: 12px;
  padding: 8px 12px; font-size: 12px; box-shadow: 0 6px 20px rgba(60,64,67,.12);
}
.dr-loop { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; }
.dr-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.dr-chips span { background: var(--white); border-radius: 16px; padding: 6px 12px; font-size: 12.5px; box-shadow: 0 1px 2px rgba(60,64,67,.10); }
.dr-chips i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; }
.dr-good-bg { background: var(--good); }
.dr-grey { background: #9aa0a6; }
.dr-down { color: var(--ink-mid); font-size: 18px; line-height: 1; }
.dr-brief .dr-row { padding: 6px 0; color: #3c4043; border-top: 1px solid var(--border); }
.dr-brief .dr-h + .dr-row { border-top: 0; }
.dr-brief .dr-new { color: var(--ink); background: #e6f4ea; border-radius: 8px; padding: 6px 8px; border-top: 0; margin-top: 4px; }

/* The price, as two cards */
.price .big { font-size: 32px; font-weight: 400; display: block; margin: 2px 0 2px; }
.home-sec .price .big { font-size: 34px; font-weight: 600; letter-spacing: -.02em; }
.price .per { color: var(--ink-mid); font-size: 14px; margin-bottom: 18px; }
.ticks { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; font-size: 15px; }
.ticks li { display: flex; gap: 10px; line-height: 1.4; }
.ticks li::before {
  content: ""; width: 16px; height: 16px; flex: none; margin-top: 2px; border-radius: 50%;
  background: var(--accent-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.2 2.2 4.8-4.8' stroke='%23c8432c' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") center/16px no-repeat;
}
.price .pricing-card .ticks { margin-top: 20px; }

/* Works where you already work */
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
  background: var(--white); border-radius: 20px; padding: 9px 16px; font-size: 14px;
  display: inline-flex; align-items: center; gap: 8px; color: var(--ink); text-decoration: none;
}
.chip:hover { background: var(--stone); }
.chip img { width: 18px; height: 18px; display: block; }

/* ── The phone (#1092): one column, the field and its button stacked ── */
@media (max-width: 640px) {
  .col { padding: 0 16px; }
  .hero { padding: calc(var(--nav-h) + 40px) 16px 24px; }
  .hero h1 { font-size: 30px; }
  .hero-sub { font-size: 16px; margin-bottom: 24px; }
  .scan-form { flex-direction: column; align-items: stretch; background: transparent; padding: 0; gap: 10px; }
  .scan-form:focus-within { background: transparent; box-shadow: none; }
  .scan-q { background: var(--stone); border-radius: 26px; padding: 5px 18px; }
  .scan-q:focus-within { background: var(--white); box-shadow: 0 1px 6px rgba(32,33,36,.18); }
  .scan-btn { padding: 14px; }
  .sec { padding-top: 44px; }
  .sec h2 { font-size: 23px; }
  .grid2, .ptiles { grid-template-columns: 1fr; }
  .hcard { padding: 20px; }
  .home-sec { padding-top: 64px; }
  .sec .sec-h h2 { font-size: 28px; }
  .sec-h { margin-bottom: 28px; }
  .sec-h p { font-size: 16px; }
  .home-sec .hcard { padding: 22px; border-radius: 20px; }
  .ptile { padding: 14px; border-radius: 20px; }
  .pvis { min-height: 0; padding: 22px 0; }
  .pphoto img { height: auto; aspect-ratio: 3 / 2; }
  .pcap { padding: 18px 6px 6px; }
  .pcap h3 { font-size: 28px; }
  .dr-card { width: 90%; }
  .dr-chain { width: 94%; }
  .dr-pp { padding: 8px; }
  .dr-pp span:not(.dr-av) { display: none; }
  .dr-gl { display: none; }
  footer { padding-left: 16px; padding-right: 16px; }
}
.pricing-page .grid2 { align-items: start; }