/* Careforms public surface — marketing, legal and auth pages.
 *
 * Companion to /site-tokens.css (generated from functions/_lib/brand.js).
 * This file is to the public pages what /admin/admin.css is to the admin
 * shell, and it deliberately speaks the same design language: paper ground,
 * Instrument Serif display, Geist body, hairline rules, generous measure.
 *
 * Why they match: a provider meets the marketing site, signs up, and lands
 * in the admin. That is one journey through one product, and it should not
 * change typeface halfway. These pages previously used a stock Tailwind
 * build with a Montserrat @import that never actually loaded — so they
 * rendered in the browser default sans while the admin rendered in Geist.
 *
 * The client intake form is intentionally NOT part of this system. It wears
 * the provider's branding, not ours.
 */

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

html { -webkit-text-size-adjust: 100%; }

body.site {
  margin: 0;
  background: var(--paper);
  color: var(--ink-800);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
}

/* ── Type ──────────────────────────────────────────────────────────────── */

.site-display {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--ink-900);
  margin: 0;
}
h1.site-display { font-size: var(--fs-d3); line-height: 1.05; }
h2.site-display { font-size: var(--fs-d2); line-height: 1.1; }
h3.site-display { font-size: var(--fs-d1); line-height: 1.15; }
@media (min-width: 768px) {
  h1.site-display { font-size: var(--fs-d4); }
}

.site-eyebrow {
  font-size: var(--fs-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--muted-ink);
  margin: 0;
}
.site-lede {
  font-size: var(--fs-md);
  line-height: 1.6;
  color: var(--ink-600);
  margin: 0;
}
.site-sub { font-size: var(--fs-sm); color: var(--muted-ink); margin: 0; }
.site-prose p { margin: 0 0 14px; color: var(--ink-700); }
.site-prose p:last-child { margin-bottom: 0; }
.site-prose a { color: var(--primary); }
/* `overflow-wrap: anywhere` because the things set in mono here are URLs and
   slugs — single tokens with no spaces to break at. The example intake link on
   the 404 page is 38 characters and ran 47px off the side of a 320px screen,
   taking the whole document's horizontal scroll with it. */
.mono { font-family: var(--font-mono); font-size: 0.92em; overflow-wrap: anywhere; }

/* The full stop after the wordmark. Same device as the admin sidebar. */
.site-dot { color: var(--accent); }

/* ── Layout ────────────────────────────────────────────────────────────── */

.site-wrap {
  width: 100%;
  max-width: var(--measure);
  margin: 0 auto;
  padding: 0 24px;
}
.site-wrap--narrow { max-width: 760px; }
.site-main { flex: 1; }
.site-section { padding: 72px 0; }
.site-section--tight { padding: 48px 0; }
.site-section--sunken {
  background: var(--paper-soft);
  border-block: 1px solid var(--hairline);
}

/* ── Header ────────────────────────────────────────────────────────────── */

.site-header {
  border-bottom: 1px solid var(--hairline);
  background: rgba(250, 248, 243, 0.9);
  backdrop-filter: saturate(140%) blur(8px);
  position: sticky;
  top: 0;
  z-index: 20;
}
.site-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 16px;
}
.site-brand {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  color: var(--ink-900);
  text-decoration: none;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.site-nav { display: flex; align-items: center; gap: 8px; }
.site-nav-link {
  font-size: var(--fs-sm);
  color: var(--ink-600);
  text-decoration: none;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
}
.site-nav-link:hover { color: var(--ink-900); background: var(--card-sunken); }
.site-nav-link.is-current { color: var(--ink-900); font-weight: 500; }
@media (max-width: 560px) {
  /* The header must never wrap onto two lines on a phone, and it used to buy
     that by hiding "Sign in" — which left a returning customer on a phone
     with no way back into their account from the marketing site. Tighten the
     spacing instead: both links still fit at 320px. */
  .site-nav { gap: 2px; }
  .site-nav-link { padding: 8px 7px; }
  .site-header .site-btn { padding: 10px 13px; }
  .site-wrap { padding: 0 18px; }
}
@media (max-width: 359px) {
  /* Below this the trial button and both links genuinely collide. "Pricing"
     is a section of the page you are already on; sign-in is not reachable any
     other way, so pricing is the one that yields. */
  .site-nav-link--pricing { display: none; }
}

/* ── Buttons ───────────────────────────────────────────────────────────── */

.site-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 20px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.site-btn-primary { background: var(--ink-900); color: #fff; }
.site-btn-primary:hover { background: var(--primary-dark); }
.site-btn-outline {
  background: transparent;
  color: var(--ink-800);
  /* The boundary IS the button here: the background is transparent, so the
     border is the only thing separating it from the paper. 1.22:1 against
     --paper, measured 2026-08-31 (S2). SC 1.4.11 wants 3:1. */
  border-color: var(--control-border);
}
.site-btn-outline:hover { border-color: var(--ink-900); }
.site-btn-onDark {
  background: #fff;
  color: var(--ink-900);
}
.site-btn-onDark:hover { background: var(--paper-soft); }
.site-btn-ghostOnDark {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.32);
}
.site-btn-ghostOnDark:hover { background: rgba(255, 255, 255, 0.1); }
.site-btn-lg { padding: 14px 26px; font-size: var(--fs-base); }
.site-btn-block { width: 100%; }
.site-btn[disabled] { opacity: 0.55; cursor: not-allowed; }
/* 38px is comfortable with a cursor and marginal with a thumb. Only touch
   pointers pay the extra two pixels. */
@media (pointer: coarse) { .site-btn { min-height: 40px; } }

/* ── Focus ─────────────────────────────────────────────────────────────── */

:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--ink-900);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
.site-hero :where(a, button):focus-visible { outline-color: #fff; }

/* ── Hero ──────────────────────────────────────────────────────────────── */

.site-hero {
  background: linear-gradient(160deg, var(--primary) 0%, var(--primary-dark) 100%);
  color: #fff;
  padding: 96px 0 104px;
  text-align: center;
}
.site-hero h1 { color: #fff; max-width: 18ch; margin: 0 auto; }
.site-hero-lede {
  color: rgba(255, 255, 255, 0.82);
  font-size: var(--fs-md);
  line-height: 1.6;
  max-width: 56ch;
  margin: 22px auto 0;
}
.site-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 34px;
}
.site-hero-note {
  margin-top: 18px;
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, 0.6);
  letter-spacing: 0.02em;
}
.site-hero-rule {
  width: 56px;
  height: 2px;
  background: var(--accent);
  border-radius: 2px;
  margin: 0 auto 28px;
}

/* ── Cards ─────────────────────────────────────────────────────────────── */

.site-card {
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 30px;
}
.site-card-quiet {
  background: var(--card-sunken);
  border: 1px solid var(--hairline-soft);
  border-radius: var(--radius-lg);
  padding: 22px 24px;
}
.site-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
}
@media (min-width: 720px) {
  .site-grid--2 { grid-template-columns: repeat(2, 1fr); }
  .site-grid--3 { grid-template-columns: repeat(3, 1fr); }
}

/* Feature list with a hairline rule between rows rather than bullets —
   quieter than dashes and it lines the columns up across cards. */
.site-list { list-style: none; margin: 18px 0 0; padding: 0; }
.site-list li {
  font-size: var(--fs-sm);
  color: var(--ink-700);
  padding: 10px 0;
  border-top: 1px solid var(--hairline-soft);
}
.site-list li:first-child { border-top: 0; padding-top: 0; }

.site-check-list { list-style: none; margin: 18px 0 0; padding: 0; }
.site-check-list li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: var(--fs-sm);
  color: var(--ink-700);
  padding: 7px 0;
}
.site-check-list svg {
  width: 16px; height: 16px;
  flex-shrink: 0;
  margin-top: 3px;
  color: var(--success);
}

/* ── Section heading ───────────────────────────────────────────────────── */

.site-section-head { text-align: center; max-width: 62ch; margin: 0 auto 40px; }
.site-section-head .site-lede { margin-top: 12px; }

/* ── Numbered steps ────────────────────────────────────────────────────── */

.site-step-num {
  font-family: var(--font-display);
  font-size: var(--fs-d1);
  color: var(--accent);
  line-height: 1;
  display: block;
  margin-bottom: 12px;
}

/* ── Pricing ───────────────────────────────────────────────────────────── */

.site-plan { display: flex; flex-direction: column; position: relative; }
.site-plan--featured { border-color: var(--ink-900); box-shadow: var(--shadow-pop); }
.site-plan-ribbon {
  position: absolute;
  top: -11px; left: 50%;
  transform: translateX(-50%);
  background: var(--ink-900);
  color: #fff;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 500;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}
.site-price {
  font-family: var(--font-display);
  font-size: var(--fs-d2);
  color: var(--ink-900);
  line-height: 1;
  margin: 10px 0 0;
  font-variant-numeric: tabular-nums;
}
.site-price span {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  color: var(--muted-ink);
}
.site-plan .site-check-list { flex: 1; }
.site-plan .site-btn { margin-top: 24px; }

/* ── Forms (signin / signup) ───────────────────────────────────────────── */

.site-auth { display: flex; align-items: flex-start; justify-content: center; padding: 56px 0 80px; }
.site-auth-card { width: 100%; max-width: 460px; }
/* A form card is a working surface, not a billboard — the hero-scale display
   size overwhelms it and wraps onto three lines at 460px. */
.site-auth-card h1.site-display { font-size: var(--fs-d1); line-height: 1.15; }
.site-field { margin-bottom: 20px; }
.site-label {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--ink-800);
  margin-bottom: 6px;
}
.site-input {
  width: 100%;
  padding: 11px 13px;
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  color: var(--ink-900);
  background: var(--card);
  border: 1px solid var(--control-border);
  border-radius: var(--radius);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.site-input:focus {
  outline: none;
  border-color: var(--ink-900);
  box-shadow: var(--ring);
}
.site-hint { font-size: var(--fs-xs); color: var(--muted-ink); margin: 6px 0 0; }

/* Safari on iOS zooms the viewport when you focus a control whose text is
   under 16px, and it does not zoom back out. On a 320px screen that turns
   signing up into a pinch-and-pan exercise: the field you are typing in slides
   under the keyboard and the rest of the page is off-screen. 16px is the
   threshold, so phones get 16px. The prefix moves with it to stay welded to
   the slug field it shares a border with. */
@media (max-width: 640px) {
  .site-input, .site-input-group-prefix { font-size: 16px; }
}

/* Slug field: fixed domain prefix welded to the input so the resulting URL
   reads as one string. */
.site-input-group {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--control-border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--card);
}
.site-input-group:focus-within { border-color: var(--ink-900); box-shadow: var(--ring); }
.site-input-group-prefix {
  display: flex;
  align-items: center;
  padding: 0 12px;
  background: var(--card-sunken);
  border-right: 1px solid var(--hairline);
  font-size: var(--fs-sm);
  color: var(--muted-ink);
  white-space: nowrap;
  user-select: none;
}
.site-input-group .site-input {
  border: 0;
  border-radius: 0;
  flex: 1;
  min-width: 0;
}
.site-input-group .site-input:focus { box-shadow: none; }

/* The whole label is the activation target — clicking the text toggles the
   box — so WCAG 2.2 SC 2.5.8 Target Size (Minimum, AA) is measured on the
   label, not on the 13x13 input inside it. Measured at 375px it came to
   277x22: two pixels under the 24px minimum, on the consent control that
   gates account creation. min-height rather than padding, so a label that
   wraps to two lines is unaffected and only the one-line case grows. */
.site-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-height: 24px;
  font-size: var(--fs-sm);
  color: var(--ink-700);
  margin-bottom: 22px;
}
.site-checkbox input { margin-top: 3px; flex-shrink: 0; accent-color: var(--ink-900); }

.site-banner {
  display: flex;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--radius);
  font-size: var(--fs-sm);
  line-height: 1.5;
  margin-bottom: 20px;
}
.site-banner-danger  { background: var(--danger-bg);  color: var(--danger);  border: 1px solid rgba(185,28,28,.18); }
.site-banner-warning { background: var(--warning-bg); color: var(--warning); border: 1px solid rgba(180,83,9,.18); }
.site-banner-info    { background: var(--info-bg);    color: var(--info);    border: 1px solid rgba(30,64,175,.16); }
.site-banner a { color: inherit; }

/* ── FAQ ───────────────────────────────────────────────────────────────── */

.site-faq { border-top: 1px solid var(--hairline); }
.site-faq-item { border-bottom: 1px solid var(--hairline); padding: 22px 0; }
.site-faq-q {
  font-size: var(--fs-base);
  font-weight: 500;
  color: var(--ink-900);
  margin: 0 0 8px;
}
.site-faq-a { font-size: var(--fs-sm); color: var(--ink-600); margin: 0; line-height: 1.65; }

/* ── Legal documents ───────────────────────────────────────────────────── */

.site-legal section { margin-top: 34px; }
.site-legal h2 {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  color: var(--ink-900);
  margin: 0 0 10px;
  font-weight: 400;
}
.site-legal p, .site-legal li { font-size: var(--fs-sm); color: var(--ink-700); line-height: 1.7; }
.site-legal ul { padding-left: 20px; margin: 10px 0; }
.site-legal li { margin-bottom: 6px; }
.site-legal a { color: var(--primary); }

/* ── Footer ────────────────────────────────────────────────────────────── */

.site-footer {
  background: var(--primary-dark);
  color: rgba(255, 255, 255, 0.7);
  margin-top: auto;
  padding: 40px 0;
}
.site-footer-inner {
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: center;
  text-align: center;
}
@media (min-width: 720px) {
  .site-footer-inner { flex-direction: row; justify-content: space-between; text-align: left; }
}
.site-footer-brand {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  color: #fff;
}
.site-footer-copy { font-size: var(--fs-xs); color: rgba(255, 255, 255, 0.5); margin: 4px 0 0; }
.site-footer-links { display: flex; flex-wrap: wrap; gap: 8px 22px; justify-content: center; }
.site-footer-links a {
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  padding: 6px 0;   /* a thumb-sized row rather than a 22px line of text */
}
.site-footer-links a:hover { color: #fff; text-decoration: underline; }
.site-footer :where(a):focus-visible { outline-color: #fff; }

/* ── 404 ───────────────────────────────────────────────────────────────── */

.site-404 {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 88px 0;
  text-align: center;
}
/* --accent-ink, not --accent. The raw accent is 2.61:1 on --paper, and this
   is the only place on the site that painted it as prose rather than as a
   fill: "404" is content a person is meant to read. The dot in the wordmark
   is the same colour and stays, under 1.4.3's logotype exemption. */
.site-404-code {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  letter-spacing: 0.18em;
  color: var(--accent-ink);
  margin: 0 0 14px;
}

/* ── Landing page ──────────────────────────────────────────────────────────
 *
 * Everything below is the marketing home page. It sits after the shared
 * components on purpose: a few rules here deliberately override the generic
 * hero and section defaults above, and source order is doing that work rather
 * than a specificity arms race.
 *
 * The home page had one structural problem worth naming, because it explains
 * most of these rules: every section was the same three-card grid, and there
 * was no picture of the product anywhere. A provider had to take our word for
 * what they were buying. So the hero now carries a working likeness of the
 * client's screen and the record it produces, and the sections below it each
 * take a different form — a ledger, a rail, a question list — chosen to match
 * what that section is actually saying.
 */

/* Skip link — visible only once it has focus. */
.site-skip {
  position: absolute;
  left: 16px;
  top: -100px;
  z-index: 60;
  background: var(--ink-900);
  color: #fff;
  padding: 10px 16px;
  border-radius: var(--radius);
  font-size: var(--fs-sm);
  text-decoration: none;
  transition: top var(--dur) var(--ease);
}
.site-skip:focus { top: 12px; }

/* ── Hero ───────────────────────────────────────────────────────────────── */

.site-hero--home { text-align: left; padding: 76px 0 84px; }
.site-hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  align-items: center;
}
@media (min-width: 980px) {
  .site-hero--home { padding: 90px 0 82px; }
  .site-hero-grid { grid-template-columns: 1.02fr 0.98fr; gap: 60px; }
}
.site-hero--home h1 { max-width: 16ch; margin: 0; }
.site-hero--home .site-hero-lede { margin: 20px 0 0; max-width: 46ch; }
.site-hero--home .site-hero-actions { justify-content: flex-start; margin-top: 30px; }
.site-hero-eyebrow {
  font-size: var(--fs-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.62);
  margin: 0 0 18px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.site-hero-eyebrow::before {
  content: "";
  width: 26px;
  height: 2px;
  margin-top: 8px;
  background: var(--accent);
  border-radius: 2px;
  flex-shrink: 0;
}
.site-hero--home .site-hero-note { margin-top: 16px; }

/* On a phone, two buttons of different widths stacked left is just two
   ragged edges. Give them the full column so the primary action is the
   width of the thumb reaching for it. */
@media (max-width: 559px) {
  .site-hero-actions .site-btn { flex: 1 1 100%; }
}

/* Three plain facts under the fold line. Not badges — a provider evaluating a
   tool that handles health information wants sentences, not stickers. */
.site-hero-facts {
  list-style: none;
  margin: 34px 0 0;
  padding: 22px 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  display: grid;
  gap: 10px;
}
@media (min-width: 620px) { .site-hero-facts { grid-template-columns: repeat(3, 1fr); gap: 18px; } }
.site-hero-facts li {
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.72);
  padding-left: 20px;
  position: relative;
}
.site-hero-facts li::before {
  content: "";
  position: absolute;
  left: 0; top: 9px;
  width: 11px; height: 1.5px;
  background: var(--accent);
  border-radius: 2px;
}
.site-hero-facts strong { color: #fff; font-weight: 500; }

/* ── Hero artefact ─────────────────────────────────────────────────────────
 *
 * The signature element: the two ends of a submission, side by side. The
 * phone is the client's screen — the same step header, dots and selectable
 * cards the real intake form renders — and the slip below it is what lands in
 * the provider's inbox a second later. The logo slot is labelled "Your logo"
 * rather than filled with an invented business, because the whitelabelling is
 * the point and a fake customer name would be the wrong kind of proof.
 */

.site-mock { position: relative; margin: 0 auto; max-width: 420px; width: 100%; }
@media (min-width: 980px) { .site-mock { margin: 0; max-width: 100%; } }

.site-phone {
  background: var(--card);
  border-radius: 26px;
  padding: 14px;
  box-shadow: 0 30px 60px rgba(6, 12, 22, 0.42), 0 2px 0 rgba(255, 255, 255, 0.12) inset;
  max-width: 330px;
  border: 1px solid rgba(255, 255, 255, 0.14);
}
.site-phone-screen {
  background: var(--paper);
  border-radius: var(--radius-lg);
  /* The deep bottom padding is structural: it is the room the receipt
     overlaps into, so the interlock never covers a word of the form. */
  padding: 16px 15px 52px;
  color: var(--ink-800);
}
.site-phone-brand {
  display: flex;
  align-items: center;
  gap: 9px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--hairline);
  margin-bottom: 14px;
}
.site-phone-logo {
  width: 34px; height: 26px;
  border-radius: var(--radius-sm);
  border: 1px dashed var(--muted-500);
  display: grid;
  place-items: center;
  font-size: 7.5px;
  letter-spacing: 0.06em;
  line-height: 1;
  color: var(--muted-ink);
  text-align: center;
  flex-shrink: 0;
}
.site-phone-brand span { font-size: 11px; color: var(--muted-ink); letter-spacing: 0.01em; }
.site-phone-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}
.site-phone-back { font-size: 11px; color: var(--muted-ink); }
.site-phone-meter { display: flex; align-items: center; gap: 7px; }
.site-phone-dots { display: flex; gap: 4px; }
.site-phone-dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--hairline); display: block; }
.site-phone-dots i.on { background: var(--ink-900); }
.site-phone-pct { font-size: 10px; color: var(--muted-ink); font-variant-numeric: tabular-nums; }
.site-phone-q {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-900);
  margin: 0 0 12px;
  line-height: 1.35;
}
.site-phone-opt {
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--card);
  padding: 10px 12px;
  margin-bottom: 8px;
}
.site-phone-opt strong { display: block; font-size: 12.5px; font-weight: 500; color: var(--ink-900); }
.site-phone-opt em { display: block; font-style: normal; font-size: 11px; color: var(--muted-ink); margin-top: 2px; }
.site-phone-opt.is-picked { border-color: var(--ink-900); box-shadow: 0 0 0 1px var(--ink-900); }
.site-phone-cta {
  margin-top: 12px;
  background: var(--ink-900);
  color: #fff;
  border-radius: var(--radius-sm);
  text-align: center;
  font-size: 12px;
  font-weight: 500;
  padding: 9px 0;
}

/* The receipt: what the provider gets, a second after the screen above it.
   It interlocks with the phone's bottom-right corner at every width, and only
   ever overlaps the padding reserved for it — never a word of the form. */
.site-receipt {
  background: var(--card);
  border-radius: var(--radius-lg);
  border: 1px solid var(--hairline);
  box-shadow: 0 20px 44px rgba(6, 12, 22, 0.34);
  padding: 15px 17px;
  margin: -40px 0 0 auto;
  max-width: 296px;
  position: relative;
  z-index: 2;
}
.site-receipt-top { display: flex; align-items: center; gap: 8px; }
.site-receipt-tick {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--success-bg);
  color: var(--success);
  display: grid; place-items: center;
  flex-shrink: 0;
}
.site-receipt-tick svg { width: 11px; height: 11px; }
.site-receipt-top strong { font-size: 12.5px; font-weight: 500; color: var(--ink-900); }
.site-receipt-rows { margin: 11px 0 0; padding: 11px 0 0; border-top: 1px solid var(--hairline-soft); display: grid; gap: 7px; }
.site-receipt-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 11px; }
.site-receipt-row span:first-child { color: var(--muted-ink); }
.site-receipt-row span:last-child { color: var(--ink-800); text-align: right; }
.site-receipt-hash { font-family: var(--font-mono); font-size: 10px; letter-spacing: -0.01em; }
.site-receipt-foot {
  margin: 11px 0 0;
  padding-top: 10px;
  border-top: 1px solid var(--hairline-soft);
  font-size: 10.5px;
  line-height: 1.45;
  color: var(--muted-ink);
}
.site-receipt-foot strong { color: var(--ink-900); font-weight: 500; }

/* ── Assurance strip ───────────────────────────────────────────────────────
 * Named suppliers and locations, because "enterprise-grade security" is what
 * a page says when it can't name anything. */

.site-strip { border-bottom: 1px solid var(--hairline); background: var(--paper-soft); }
.site-strip-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px 28px;
  padding: 20px 0;
}
@media (min-width: 720px) { .site-strip-inner { grid-template-columns: 2fr 1fr 1fr; } }
/* ink-600 rather than the muted grey: at 12px on the sunken paper, --muted-600
   landed at 4.2:1 and missed AA by a hair.
   2026-08-31: the token was the defect, not this rule — --muted-600 failed on
   EVERY warm ground and seventeen other rules still carried it. They now read
   --muted-ink (#5C6B80), derived to clear the bar on all five. This rule keeps
   ink-600 because it already passes at 6.7:1 and repainting it would be a
   design change wearing an accessibility fix's clothes. */
.site-strip-item { font-size: var(--fs-xs); line-height: 1.5; color: var(--ink-600); }
.site-strip-item strong {
  display: block;
  font-weight: 500;
  color: var(--ink-800);
  font-size: 13px;
  margin-bottom: 2px;
}
/* The differentiator, given the weight a differentiator earns. Four items of
   identical size were four items of no size — a reader scanning the strip had
   nothing to land on, so the strongest claim on the page arrived at the same
   volume as the payment processor. */
.site-strip-item--lead { color: var(--ink-700); }
.site-strip-item--lead strong { font-size: 15px; font-weight: 600; margin-bottom: 4px; }


/* ── Step rail ─────────────────────────────────────────────────────────────
 * Numbers here are load-bearing: this is a sequence, and the rail says the
 * three steps are one continuous thing rather than three unrelated cards. */

.site-rail { display: grid; grid-template-columns: 1fr; gap: 30px; position: relative; }
@media (min-width: 820px) { .site-rail { grid-template-columns: repeat(3, 1fr); gap: 34px; } }
.site-rail-step { position: relative; padding-top: 34px; }
.site-rail-step::before {
  content: "";
  position: absolute;
  top: 11px; left: 0; right: -34px;
  height: 1px;
  background: var(--hairline);
}
.site-rail-step:last-child::before { right: 0; }
@media (max-width: 819px) {
  .site-rail-step::before { right: 0; }
}
.site-rail-num {
  position: absolute;
  top: 0; left: 0;
  width: 23px; height: 23px;
  border-radius: 50%;
  background: var(--paper-soft);
  border: 1px solid var(--ink-900);
  color: var(--ink-900);
  font-size: 11px;
  font-weight: 500;
  display: grid;
  place-items: center;
  font-variant-numeric: tabular-nums;
}
.site-rail-step h3 {
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  font-weight: 500;
  color: var(--ink-900);
  margin: 0 0 8px;
  letter-spacing: -0.005em;
}
.site-rail-step p { font-size: var(--fs-sm); color: var(--ink-600); margin: 0; line-height: 1.6; }
.site-rail-step .site-rail-aside {
  margin-top: 12px;
  font-size: var(--fs-xs);
  color: var(--ink-600);
  padding-left: 12px;
  border-left: 2px solid var(--hairline);
}

/* ── Split feature block ───────────────────────────────────────────────── */

.site-split { display: grid; grid-template-columns: 1fr; gap: 34px; }
@media (min-width: 900px) { .site-split { grid-template-columns: 1fr 1fr; gap: 56px; } }
.site-split h2 { margin-top: 10px; }

/* ── Plan card: the line that differs ─────────────────────────────────────
 * Eight of the nine bullets on /pricing are the same words in the same order
 * in all three columns, and the cap was the ninth tick in that list. A reader
 * had to diff three columns to find 3 / 20 / Unlimited. The cap is now a line
 * of its own above the shared list, and the shared list says that it is
 * shared. 53 §4.2 #9. */

.site-plan-cap {
  margin: 14px 0 0;
  font-size: var(--fs-lg);
  line-height: 1.3;
  color: var(--ink-900);
}
.site-plan-cap strong { font-weight: 600; }
.site-plan-shared {
  margin: 22px 0 10px;
  font-size: 11px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted-ink);
  border-top: 1px solid var(--hairline);
  padding-top: 16px;
}

/* ── Figure ────────────────────────────────────────────────────────────────
 * The first image on the marketing site. The intrinsic width/height are on the
 * element rather than here, so the box is reserved before the bytes arrive and
 * the band cannot shift the page under a reader who is already scrolling. */

.site-figure { margin: 0; }
.site-figure img {
  display: block;
  width: 100%;
  max-width: 1000px;
  height: auto;
  margin: 0 auto;
  border-radius: var(--radius-lg);
}
.site-figure figcaption {
  margin: 18px auto 0;
  max-width: 620px;
  text-align: center;
  font-size: var(--fs-xs);
  line-height: 1.6;
  /* ink-600, not the muted grey, for the reason the strip above already
     records and this rule reproduced on its first day: at 12px on paper,
     --muted-600 measures 4.48:1 and misses AA by two hundredths.
     That was the third time the same token was patched at a call site instead
     of fixed. It is fixed now (--muted-ink); this rule keeps ink-600 for the
     same reason the strip does. */
  color: var(--ink-600);
}

/* A tall UI panel rather than a wide document. The intake pair is 1600x1108
   and wants the full 1000px; the issue drawer is 540x1020, and at 1000 it
   renders 1887px tall — most of two screens of screenshot.

   Declared AFTER `.site-figure img` on purpose. `.site-figure--panel img` and
   `.site-figure img` have the SAME specificity (0,1,1), so the later rule
   wins, and this one was originally written above it — where the 340px cap
   lost to the 1000px base and the figure rendered at 1000x1887. Measured, not
   assumed: that is what put it here. */
.site-figure--panel { margin-top: 46px; }
.site-figure--panel img { max-width: 340px; border: 1px solid var(--hairline); }

/* ── Landing FAQ ───────────────────────────────────────────────────────── */

.site-qa { border-top: 1px solid var(--hairline); }
.site-qa-item { border-bottom: 1px solid var(--hairline); }
/* The padding lives on the summary, not the item, so the whole row is the tap
   target rather than the 26px of text in it. */
.site-qa-item > summary {
  list-style: none;
  cursor: pointer;
  padding: 19px 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  font-size: var(--fs-base);
  font-weight: 500;
  color: var(--ink-900);
}
.site-qa-item > summary::-webkit-details-marker { display: none; }
.site-qa-sign {
  flex-shrink: 0;
  width: 18px; height: 18px;
  position: relative;
  margin-top: 4px;
  color: var(--muted-ink);
}
.site-qa-sign::before, .site-qa-sign::after {
  content: "";
  position: absolute;
  background: currentColor;
  transition: transform var(--dur) var(--ease);
}
.site-qa-sign::before { top: 8px; left: 2px; width: 14px; height: 1.5px; }
.site-qa-sign::after  { left: 8px; top: 2px; height: 14px; width: 1.5px; }
.site-qa-item[open] .site-qa-sign::after { transform: scaleY(0); }
.site-qa-item[open] > summary { color: var(--ink-900); }
.site-qa-a { font-size: var(--fs-sm); color: var(--ink-600); line-height: 1.7; margin: -4px 0 21px; max-width: 68ch; }
.site-qa-a a { color: var(--primary); }

/* ── Closing band ──────────────────────────────────────────────────────── */

.site-close {
  background: linear-gradient(160deg, var(--primary) 0%, var(--primary-dark) 100%);
  color: #fff;
  padding: 72px 0 76px;
  text-align: center;
}
.site-close h2 { color: #fff; max-width: 20ch; margin: 0 auto; }
.site-close p {
  color: rgba(255, 255, 255, 0.78);
  font-size: var(--fs-md);
  margin: 18px auto 0;
  max-width: 50ch;
  line-height: 1.6;
}
.site-close .site-hero-actions { margin-top: 30px; }
/* Beats `.site-close p` above on specificity — the fine print must stay fine
   print, not a second lede. */
.site-close p.site-close-fine {
  font-size: var(--fs-xs);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.58);
  margin-top: 20px;
  max-width: 56ch;
}
.site-close-fine a { color: rgba(255, 255, 255, 0.8); }
.site-close :where(a, button):focus-visible { outline-color: #fff; }

/* ── Footer identity line ──────────────────────────────────────────────── */

.site-footer-id {
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, 0.5);
  margin: 8px 0 0;
  line-height: 1.6;
}
.site-footer-id a { color: rgba(255, 255, 255, 0.7); }

/* ── Entrance ──────────────────────────────────────────────────────────────
 * One quiet arrival, not an effects reel: the hero settles on load and each
 * section fades the first time it is reached. Everything below is gated on
 * `html.js`, so with scripting off the page renders fully and immediately,
 * and on `no-preference`, so it never runs for a visitor who asked for
 * stillness. */

@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0; transform: translateY(14px); }
  .js .reveal.is-in {
    opacity: 1;
    transform: none;
    transition: opacity 620ms var(--ease), transform 620ms var(--ease);
  }
  .js .reveal--d1.is-in { transition-delay: 90ms; }
  .js .reveal--d2.is-in { transition-delay: 180ms; }
  .js .reveal--d3.is-in { transition-delay: 270ms; }
}

/* ── Alpine ────────────────────────────────────────────────────────────── */

[x-cloak] { display: none !important; }

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

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}