/* ==========================================================================
   landing.css — the PUBLIC marketing/auth site only (landing, contact, legal,
   sign-in chrome). Self-contained: it sets its own font, colours and resets on
   the .site root so it never depends on the app's base.css cascade and never
   touches the authenticated product. All values are tokens (see the
   --site-* block in tokens.css). Ported from the approved design source.
   ========================================================================== */

/* ---- Root + resets (scoped to the public body) ------------------------- */
body.site {
    margin: 0;
    font-family: var(--site-font-sans);
    color: var(--site-ink);
    background: var(--site-bg);
    min-height: 100dvh;
    -webkit-font-smoothing: antialiased;
    letter-spacing: -0.011em;
    line-height: 1.5;
}
/* Smooth in-page jumps; offset anchored sections so the sticky header doesn't
   cover their tops. */
.site [id] { scroll-margin-top: calc(var(--site-header-h) + 24px); }
@media (prefers-reduced-motion: no-preference) { html:has(.site) { scroll-behavior: smooth; } }
body.site *,
body.site *::before,
body.site *::after { box-sizing: border-box; }
body.site ::selection { background: var(--site-ink); color: #fff; }
/* Zero-specificity link reset (:where) so component link classes — e.g.
   .site-auth__forgot, .site-contact__email — always win and keep their accent. */
:where(body.site a) { text-decoration: none; color: inherit; }
body.site img { max-width: 100%; display: block; }
/* Zero-specificity heading reset (:where) so component rules — notably the
   legal-doc heading margins (.site-doc h2/h3) — always win over it. */
:where(body.site) h1, :where(body.site) h2, :where(body.site) h3 { margin: 0; }

/* Skip link — visually hidden until focused. */
.site .skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 999;
    background: var(--site-ink);
    color: #fff;
    padding: 10px 16px;
    border-radius: 0 0 var(--site-radius) 0;
    font-size: 14px;
    font-weight: 600;
}
.site .skip-link:focus { left: 0; }

/* Shared inner-width container. */
.site__wrap {
    max-width: var(--site-max);
    margin-inline: auto;
    padding-inline: var(--site-gutter);
}

/* Visible focus everywhere (accessibility). */
.site a:focus-visible,
.site button:focus-visible,
.site input:focus-visible,
.site select:focus-visible,
.site textarea:focus-visible {
    outline: 2px solid var(--site-accent);
    outline-offset: 2px;
}

/* ---- Eyebrow / mono label ---------------------------------------------- */
.site__eyebrow {
    font-family: var(--site-font-mono);
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--site-muted);
}
.site__eyebrow--accent { color: var(--site-accent); }
.site__eyebrow--spaced { margin-bottom: 12px; }

/* ---- Buttons ----------------------------------------------------------- */
.site-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: inherit;
    font-weight: 600;
    border-radius: var(--site-radius);
    border: 1px solid transparent;
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast);
    white-space: nowrap;
}
.site-btn--primary { background: var(--site-ink); color: #fff; }
.site-btn--primary:hover { background: var(--site-ink-hover); }
.site-btn--secondary { background: #fff; color: var(--site-ink); border-color: var(--site-border); }
.site-btn--secondary:hover { border-color: var(--site-ink); }
.site-btn--block { width: 100%; }
/* Sizes */
.site-btn--sm { font-size: 13.5px; padding: 9px 16px; border-radius: 9px; }
.site-btn--md { font-size: 15px; padding: 13px 22px; }
.site-btn--lg { font-size: 15px; padding: 14px 24px; }

/* ==========================================================================
   Public header (sticky, blurred) — shared by landing/contact/legal.
   ========================================================================== */
.site-header {
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--site-border-3);
}
.site-header__inner {
    height: var(--site-header-h);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.site-brand { display: flex; align-items: center; gap: 9px; }
.site-brand__mark {
    width: 25px;
    height: 25px;
    flex: none;
    display: block;
}
.site-brand__mark svg { width: 100%; height: 100%; display: block; }
.site-brand__name { font-weight: 600; font-size: 15.5px; letter-spacing: -0.02em; }
.site-header__nav { display: flex; align-items: center; gap: 30px; }
.site-header__nav a { font-size: 14px; color: var(--site-text); }
.site-header__nav a:hover { color: var(--site-ink); }
.site-header__account { display: flex; align-items: center; gap: 16px; }
/* Header items must never wrap mid-word on a phone ("Log in" was breaking
   onto two lines with two CTA buttons beside it). */
.site-header__signin { font-size: 14px; color: var(--site-text); font-weight: 500; white-space: nowrap; }
.site-brand__name { white-space: nowrap; }
.site-header__signin:hover { color: var(--site-ink); }

/* ==========================================================================
   Sections — generic rhythm helper. The design hand-tunes top padding per
   section; we expose one knob and a few modifiers.
   ========================================================================== */
.site-section { padding-block-start: 104px; }
.site-section--tight { padding-block-start: 84px; }
.site-section--feature { padding-block-start: 96px; }
.site-section--platform { padding-block-start: 88px; }

/* ---- Hero -------------------------------------------------------------- */
.site-hero { padding-block-start: 104px; text-align: center; }
.site-hero__title {
    margin: 20px auto 0;
    max-width: 840px;
    font-size: clamp(38px, 5.4vw, 62px);
    line-height: 1.02;
    font-weight: 600;
    letter-spacing: -0.035em;
}
.site-hero__title em { font-style: normal; color: var(--site-accent); }
.site-hero__lede {
    margin: 22px auto 0;
    max-width: 560px;
    font-size: 18.5px;
    line-height: 1.55;
    color: var(--site-text);
}
.site-hero__cta {
    margin: 30px 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}
.site-hero__note {
    margin: 18px 0 0;
    font-family: var(--site-font-mono);
    font-size: 12px;
    color: var(--site-muted);
}

/* ---- Product preview card (hero) --------------------------------------- */
.site-preview {
    max-width: 760px;
    margin: 56px auto 0;
    background: #fff;
    border: 1px solid var(--site-border-2);
    border-radius: var(--site-radius-card);
    box-shadow: var(--site-shadow-card);
    padding: 26px 28px;
    text-align: left;
}
.site-preview__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.site-preview__label {
    font-family: var(--site-font-mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--site-muted);
}
.site-preview__figure { display: flex; align-items: baseline; gap: 12px; margin-top: 8px; }
.site-preview__amount { font-size: 34px; font-weight: 600; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.site-preview__delta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--site-accent-soft);
    color: var(--site-accent);
    font-family: var(--site-font-mono);
    font-size: 12px;
    font-weight: 500;
    padding: 3px 8px;
    border-radius: var(--site-radius-chip);
}
.site-preview__period {
    font-family: var(--site-font-mono);
    font-size: 12px;
    color: var(--site-text);
    border: 1px solid #e9e9ec;
    border-radius: 8px;
    padding: 7px 12px;
    white-space: nowrap;
}
.site-preview__chart { display: flex; align-items: flex-end; gap: 6px; height: 88px; margin-top: 24px; }
.site-preview__bar { flex: 1; background: var(--site-rail); border-radius: 3px; }
.site-preview__bar--a { background: var(--site-accent); opacity: 0.35; }
.site-preview__bar--b { background: var(--site-accent); opacity: 0.55; }
.site-preview__bar--c { background: var(--site-accent); opacity: 0.75; }
.site-preview__bar--d { background: var(--site-accent); }
.site-preview__split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-top: 26px;
    padding-top: 22px;
    border-top: 1px solid var(--site-border-4);
}
.site-preview__row { display: flex; justify-content: space-between; align-items: baseline; }
.site-preview__row-label { font-size: 13.5px; color: var(--site-text); }
.site-preview__row-value { font-family: var(--site-font-mono); font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums; }
.site-preview__track { height: 6px; border-radius: 99px; background: var(--site-rail); margin-top: 9px; overflow: hidden; }
.site-preview__fill { height: 100%; background: var(--site-accent); border-radius: 99px; }
.site-preview__fill--muted { background: #c2c5cc; }
.site-preview__caption { font-family: var(--site-font-mono); font-size: 11px; color: var(--site-muted); margin-top: 6px; }

/* ---- Trust strip ------------------------------------------------------- */
.site-trust__label {
    text-align: center;
    font-family: var(--site-font-mono);
    font-size: 11.5px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--site-muted);
}
.site-trust__logos {
    margin-top: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 48px;
    flex-wrap: wrap;
    font-weight: 600;
    font-size: 17px;
    letter-spacing: -0.02em;
    color: var(--site-logo-grey);
}
.site-trust__rule { margin-top: 84px; height: 1px; background: var(--site-border-3); }

/* ---- Customer testimonial (single, genuine) ---------------------------- */
.site-quote { max-width: 760px; margin-inline: auto; text-align: center; }
.site-quote__text {
    margin: 22px 0 0;
    font-size: clamp(22px, 2.6vw, 29px);
    line-height: 1.3;
    font-weight: 500;
    letter-spacing: -0.02em;
    color: var(--site-ink);
    text-wrap: balance;
}
.site-quote__cite {
    margin-top: 22px;
    font-family: var(--site-font-mono);
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--site-accent);
}

/* ---- Platform header --------------------------------------------------- */
.site-platform__title {
    margin: 16px 0 0;
    max-width: 640px;
    font-size: clamp(30px, 3.6vw, 42px);
    line-height: 1.07;
    font-weight: 600;
    letter-spacing: -0.03em;
}
.site-platform__lede { margin: 18px 0 0; max-width: 560px; font-size: 17px; line-height: 1.6; color: var(--site-text); }

/* ---- Feature rows ------------------------------------------------------ */
.site-feature__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 72px;
    align-items: center;
}
.site-feature__step {
    font-family: var(--site-font-mono);
    font-size: 11.5px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--site-muted);
}
.site-feature__title {
    margin: 14px 0 0;
    font-size: clamp(26px, 2.6vw, 30px);
    line-height: 1.12;
    font-weight: 600;
    letter-spacing: -0.025em;
}
.site-feature__copy { margin: 14px 0 0; font-size: 16px; line-height: 1.65; color: var(--site-text); }
.site-feature__list { margin-top: 22px; display: flex; flex-direction: column; gap: 12px; list-style: none; padding: 0; }
.site-feature__list li { display: flex; align-items: center; gap: 10px; font-size: 14.5px; color: var(--site-text-2); }
.site-feature__list li::before { content: "—"; color: var(--site-accent); font-weight: 600; }
/* Reverse the media column on the compliance row (text right). */
.site-feature__grid--reverse .site-feature__media { order: -1; }

/* Generic media card */
.site-card {
    border: 1px solid var(--site-border-2);
    border-radius: 14px;
    background: #fff;
    box-shadow: var(--site-shadow-flat);
    overflow: hidden;
}

/* Rent table card */
.site-rent__head,
.site-rent__row {
    display: grid;
    grid-template-columns: 1.6fr 1fr 0.9fr;
    align-items: center;
}
.site-rent__head {
    padding: 11px 18px;
    background: var(--site-panel);
    border-bottom: 1px solid #efeff2;
    font-family: var(--site-font-mono);
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--site-muted);
}
.site-rent__head span:last-child { text-align: right; }
.site-rent__row { padding: 13px 18px; border-bottom: 1px solid var(--site-border-5); font-size: 13.5px; }
.site-rent__row:last-child { border-bottom: 0; }
.site-rent__addr { font-weight: 500; }
.site-rent__status { font-family: var(--site-font-mono); font-size: 10px; letter-spacing: 0.06em; }
.site-rent__status--paid { color: var(--site-accent); }
.site-rent__status--due { color: var(--site-muted); }
.site-rent__status--arrears { color: var(--site-bad-fg); }
.site-rent__amt { text-align: right; font-family: var(--site-font-mono); font-size: 12.5px; font-variant-numeric: tabular-nums; }

/* Compliance card */
.site-compliance { padding: 8px; }
.site-compliance__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; }
.site-compliance__name { font-size: 13.5px; font-weight: 500; }
.site-compliance__rule { height: 1px; background: var(--site-border-5); margin: 0 6px; }
.site-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--site-font-mono);
    font-size: 10px;
    letter-spacing: 0.06em;
    padding: 4px 9px;
    border-radius: var(--site-radius-chip);
}
.site-pill__dot { width: 6px; height: 6px; border-radius: 50%; flex: none; }
.site-pill--ok { background: var(--site-ok-bg); color: var(--site-ok-fg); }
.site-pill--ok .site-pill__dot { background: var(--site-ok-fg); }
.site-pill--warn { background: var(--site-warn-bg); color: var(--site-warn-fg); }
.site-pill--warn .site-pill__dot { background: var(--site-warn-fg); }
.site-pill--bad { background: var(--site-bad-bg); color: var(--site-bad-fg); }
.site-pill--bad .site-pill__dot { background: var(--site-bad-fg); }

/* Statement card */
.site-statement { padding: 24px 26px; }
.site-statement__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid var(--site-border-4); }
.site-statement__who { font-size: 14px; font-weight: 600; }
.site-statement__meta { font-family: var(--site-font-mono); font-size: 11px; color: var(--site-muted); margin-top: 3px; }
.site-statement__tag {
    font-family: var(--site-font-mono);
    font-size: 10px;
    letter-spacing: 0.06em;
    color: var(--site-accent);
    border: 1px solid var(--site-accent-border);
    border-radius: var(--site-radius-chip);
    padding: 4px 9px;
    white-space: nowrap;
}
.site-statement__lines { display: flex; flex-direction: column; gap: 13px; padding: 18px 0; font-size: 13.5px; }
.site-statement__line { display: flex; justify-content: space-between; gap: 12px; }
.site-statement__line span:first-child { color: var(--site-text); }
.site-statement__line span:last-child { font-family: var(--site-font-mono); font-variant-numeric: tabular-nums; }
.site-statement__total { display: flex; justify-content: space-between; align-items: center; padding-top: 16px; border-top: 1px solid var(--site-ink); }
.site-statement__total-label { font-size: 14px; font-weight: 600; }
.site-statement__total-value { font-family: var(--site-font-mono); font-size: 18px; font-weight: 500; font-variant-numeric: tabular-nums; }

/* ---- Capability grid --------------------------------------------------- */
.site-centered { text-align: center; max-width: 560px; margin: 0 auto; }
.site-centered__title { font-size: clamp(28px, 3.2vw, 36px); line-height: 1.1; font-weight: 600; letter-spacing: -0.03em; }
.site-centered__sub { margin: 14px auto 0; font-size: 16px; line-height: 1.6; color: var(--site-text); }
.site-grid {
    margin-top: 48px;
    border: 1px solid var(--site-border-2);
    border-radius: var(--site-radius-card);
    overflow: hidden;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}
.site-grid__cell { padding: 28px; border-right: 1px solid var(--site-border-4); border-bottom: 1px solid var(--site-border-4); }
.site-grid__cell:nth-child(3n) { border-right: 0; }
.site-grid__cell:nth-last-child(-n+3) { border-bottom: 0; }
.site-grid__title { font-size: 16px; font-weight: 600; }
.site-grid__copy { margin: 9px 0 0; font-size: 13.5px; line-height: 1.6; color: var(--site-text-3); }
.site-grid__note { margin: 16px 4px 0; font-size: 12.5px; line-height: 1.6; color: var(--site-muted); }
.site-grid__note a { color: var(--site-accent); }

/* ---- Metrics ----------------------------------------------------------- */
.site-metrics {
    border-top: 1px solid var(--site-border-3);
    border-bottom: 1px solid var(--site-border-3);
    display: grid;
    /* 4 → 2 → 1 (never 3): four items only divide evenly by 4, 2 and 1, so
       auto-fit is avoided — it would leave an empty cell at a 3-wide width. The
       1px gap over a border-coloured background paints the dividers — both
       between columns and between wrapped rows — at any column count, so no
       per-item border bookkeeping is needed. Breakpoints below keep two columns
       wherever they fit, instead of dropping straight to one. */
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--site-border-3);
    list-style: none;
    margin: 0;
    padding: 0;
}
.site-metrics__item { background: var(--site-bg); padding: 40px 28px; }
/* Keep the row's outer edges flush with the page content (the dividers are the
   inner 1px gaps), so the figures line up with the headings above. */
.site-metrics__item:first-child { padding-inline-start: 0; }
.site-metrics__item:last-child { padding-inline-end: 0; }
.site-metrics__num { font-size: 40px; font-weight: 600; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.site-metrics__label { margin-top: 8px; font-size: 13.5px; color: var(--site-text-3); }

/* ---- Security (dark panel) --------------------------------------------- */
.site-security {
    background: var(--site-dark);
    border-radius: var(--site-radius-lg);
    padding: 64px 56px;
    color: #fff;
}
.site-security__eyebrow {
    font-family: var(--site-font-mono);
    font-size: 11.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--site-dark-eyebrow);
}
.site-security__title { margin: 16px 0 0; max-width: 560px; font-size: clamp(28px, 3.2vw, 36px); line-height: 1.1; font-weight: 600; letter-spacing: -0.03em; }
.site-security__grid { margin-top: 44px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.site-security__item { padding-top: 22px; border-top: 1px solid var(--site-dark-border); }
.site-security__name { font-size: 16px; font-weight: 600; }
.site-security__copy { margin: 9px 0 0; font-size: 13.5px; line-height: 1.6; color: var(--site-dark-copy); }

/* ---- CTA --------------------------------------------------------------- */
.site-cta { text-align: center; }
.site-cta__title { margin: 0 auto; max-width: 620px; font-size: clamp(34px, 4.4vw, 48px); line-height: 1.04; font-weight: 600; letter-spacing: -0.035em; }
.site-cta__copy { margin: 18px auto 0; max-width: 520px; font-size: 17px; line-height: 1.6; color: var(--site-text); }
.site-cta__actions { margin: 30px 0 0; display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; }

/* ---- Pricing ----------------------------------------------------------- */
.site-pricing {
    margin-top: 48px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    align-items: stretch;
}
.site-plan {
    display: flex;
    flex-direction: column;
    padding: 32px;
    background: var(--site-bg);
    border: 1px solid var(--site-border-2);
    border-radius: var(--site-radius-card);
    box-shadow: var(--site-shadow-flat);
}
.site-plan--featured {
    border-color: var(--site-accent-border);
    box-shadow: var(--site-shadow-card);
}
.site-plan__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 28px; }
.site-plan__name { font-size: 18px; font-weight: 600; letter-spacing: -0.02em; color: var(--site-ink); }
.site-plan__badge {
    font-family: var(--site-font-mono);
    font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--site-accent); background: var(--site-accent-soft);
    padding: 5px 10px; border-radius: var(--site-radius-chip);
}
.site-plan__price { margin-top: 18px; display: flex; align-items: baseline; gap: 8px; }
.site-plan__amount { font-size: 44px; font-weight: 600; letter-spacing: -0.04em; color: var(--site-ink); font-variant-numeric: tabular-nums; }
.site-plan__period { font-size: 14px; color: var(--site-muted); }
.site-plan__desc { margin: 12px 0 0; font-size: 14px; line-height: 1.6; color: var(--site-text-3); }
.site-plan__adds {
    margin: 24px 0 0;
    font-family: var(--site-font-mono);
    font-size: 11.5px; letter-spacing: 0.04em; text-transform: uppercase;
    color: var(--site-muted);
}
.site-plan__list { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.site-plan__adds + .site-plan__list { margin-top: 12px; }
.site-plan__feat { display: flex; gap: 10px; font-size: 14px; line-height: 1.5; color: var(--site-text-2); }
.site-plan__feat svg { flex: none; margin-top: 2px; color: var(--site-accent); }
.site-plan__meta { margin: 22px 0 0; padding-top: 18px; border-top: 1px solid var(--site-border-4); font-size: 13px; line-height: 1.5; color: var(--site-text-3); }
/* Push the CTA to the card foot so both cards align regardless of list length. */
.site-plan__cta { margin-top: auto; padding-top: 24px; }
/* Same visual language as the plan cards: paper surface, hairline border,
   left-aligned copy, and the mono chip doing the labelling (like "Most
   popular") — not a tinted banner. */
.site-pricing__note {
    margin-top: 24px;
    display: flex;
    align-items: flex-start;
    gap: 24px;
    padding: 22px 28px;
    background: var(--site-bg);
    border: 1px solid var(--site-border-2);
    border-radius: var(--site-radius-card);
    box-shadow: var(--site-shadow-flat);
}
.site-pricing__note-label {
    flex: none;
    margin-top: 2px;
    font-family: var(--site-font-mono);
    font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--site-accent); background: var(--site-accent-soft);
    padding: 5px 10px; border-radius: var(--site-radius-chip);
    white-space: nowrap;
}
.site-pricing__note p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--site-text-2); }
.site-pricing__note strong { color: var(--site-ink); }
.site-pricing__terms {
    margin: 20px 0 0;
    text-align: center;
    font-family: var(--site-font-mono);
    font-size: 12.5px; letter-spacing: 0.02em;
    color: var(--site-muted);
}

/* ==========================================================================
   Footer — shared by landing/contact/legal.
   ========================================================================== */
.site-footer { border-top: 1px solid var(--site-border-3); margin-top: 104px; }
.site-footer__inner {
    padding: 56px var(--site-gutter) 40px;
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1fr;
    gap: 40px;
}
.site-footer__about { margin: 14px 0 0; max-width: 260px; font-size: 13.5px; line-height: 1.6; color: var(--site-muted); }
.site-footer__col { display: flex; flex-direction: column; gap: 11px; font-size: 13.5px; color: var(--site-text); }
.site-footer__col a:hover { color: var(--site-ink); }
.site-footer__heading {
    font-family: var(--site-font-mono);
    font-size: 10.5px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--site-muted);
}
.site-footer__bar { border-top: 1px solid var(--site-border-4); }
.site-footer__bar-inner {
    /* Generous bottom padding + the safe-area inset so the last line clears an
       OS taskbar / home indicator even when the window runs full-bleed. */
    padding: 18px var(--site-gutter) calc(48px + env(safe-area-inset-bottom, 0px));
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-family: var(--site-font-mono);
    font-size: 11px;
    color: var(--site-muted);
}
.site-footer__made { display: inline-flex; align-items: center; gap: 6px; }
.site-flag {
    width: 18px;
    height: 18px;
    border-radius: 3px;
    flex: none;
    display: block;
}

/* ==========================================================================
   Forms (contact + sign-in) — port the design's field styling.
   ========================================================================== */
.site-field { display: block; }
.site-field + .site-field { margin-top: 18px; }
.site-field__label { display: block; font-size: 13.5px; font-weight: 600; margin-bottom: 8px; }
.site-field__req { color: var(--site-bad-fg); }
.site-input,
.site-select,
.site-textarea {
    width: 100%;
    font-family: inherit;
    font-size: 15px;
    color: var(--site-ink);
    background: #fff;
    border: 1px solid var(--site-border);
    border-radius: var(--site-radius);
    padding: 12px 14px;
    outline: none;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.site-textarea { resize: vertical; line-height: 1.5; }
.site-input::placeholder,
.site-textarea::placeholder { color: var(--site-faint); }
.site-input:focus,
.site-select:focus,
.site-textarea:focus {
    border-color: var(--site-accent);
    box-shadow: 0 0 0 3px var(--site-accent-ring);
    outline: none;
}
.site-field--error .site-input,
.site-field--error .site-select,
.site-field--error .site-textarea { border-color: var(--site-bad-fg); }
.site-field__error { display: block; margin-top: 6px; font-size: 13px; color: var(--site-bad-fg); }
.site-field__hint { margin: 16px 0 0; text-align: center; font-size: 13px; color: var(--site-muted); }

.site-select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2354585f' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>");
    background-repeat: no-repeat;
    background-position: right 14px center;
    cursor: pointer;
}

.site-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.site-form-row + .site-field,
.site-field + .site-form-row,
.site-form-row + .site-form-row { margin-top: 18px; }
/* The two fields inside a row are adjacent siblings, so the generic
   ".site-field + .site-field" stacking gap above wrongly pushes the right-hand
   column down. Cancel it inside a row so the columns line up. */
.site-form-row > .site-field + .site-field { margin-top: 0; }

/* ---- Contact layout ---------------------------------------------------- */
.site-contact {
    padding-block: 88px 104px;
    display: grid;
    grid-template-columns: 1fr 1.06fr;
    gap: 80px;
    align-items: start;
}
.site-contact__title { margin: 16px 0 0; font-size: clamp(34px, 4.4vw, 48px); line-height: 1.04; font-weight: 600; letter-spacing: -0.035em; }
.site-contact__lede { margin: 18px 0 0; max-width: 420px; font-size: 17px; line-height: 1.6; color: var(--site-text); }
.site-contact__points { margin-top: 30px; display: flex; flex-direction: column; gap: 16px; list-style: none; padding: 0; }
.site-contact__points li { display: flex; align-items: flex-start; gap: 12px; font-size: 15px; color: var(--site-text-2); }
.site-contact__points li::before { content: "✓"; color: var(--site-accent); font-weight: 700; line-height: 1.5; flex: none; }
.site-contact__aside { margin-top: 40px; padding-top: 26px; border-top: 1px solid var(--site-border-3); display: flex; flex-direction: column; gap: 10px; }
.site-contact__email { font-size: 15px; font-weight: 500; color: var(--site-accent); }
.site-contact__form {
    background: #fff;
    border: 1px solid var(--site-border-2);
    border-radius: 18px;
    box-shadow: 0 1px 2px rgba(16, 16, 18, 0.04), 0 30px 70px -40px rgba(16, 16, 18, 0.2);
    padding: 34px 34px 36px;
}
.site-contact__sent { text-align: center; }
.site-contact__sent h2 { font-size: 25px; font-weight: 600; letter-spacing: -0.03em; }
.site-contact__sent p { margin: 8px 0 22px; font-size: 15px; color: var(--site-text); }
.site-honeypot { position: absolute; left: -9999px; }
.site-contact__submit { margin-top: 22px; padding: 14px; }

/* ==========================================================================
   Sign-in card — its own canvas (no shared header/footer).
   ========================================================================== */
.site-auth {
    background: var(--site-bg-soft);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 24px;
}
.site-auth__inner { width: 100%; max-width: 412px; }
.site-auth__card {
    background: #fff;
    border: 1px solid var(--site-border-2);
    border-radius: var(--site-radius-card);
    box-shadow: 0 1px 2px rgba(16, 16, 18, 0.04), 0 24px 60px -34px rgba(16, 16, 18, 0.22);
    padding: 34px 34px 30px;
}
.site-auth__brand .site-brand__mark { width: 27px; height: 27px; }
.site-auth__title { margin: 26px 0 0; font-size: 25px; font-weight: 600; letter-spacing: -0.03em; }
.site-auth__subtitle { margin: 8px 0 0; font-size: 15px; color: var(--site-text); }
.site-auth__form { margin-top: 26px; }
.site-auth__label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.site-auth__label-row .site-field__label { margin-bottom: 0; }
.site-auth__forgot { font-size: 13px; font-weight: 500; color: var(--site-accent); }
.site-auth__remember { margin-top: 18px; display: flex; align-items: center; gap: 9px; font-size: 14px; color: var(--site-text); cursor: pointer; }
.site-auth__remember input { width: 16px; height: 16px; accent-color: var(--site-accent); }
/* Links inside form small-print (the sign-up terms label, "Already have an
   account?", the verify screen's "Start again") must READ as links — the
   site-wide reset strips anchor styling. Same idiom as the legal pages. */
.site-auth__remember a,
.site-field__hint a,
.site-auth__subtitle a { color: var(--site-accent); text-decoration: underline; text-underline-offset: 2px; }
.site-auth__submit { margin-top: 22px; padding: 13px; }
.site-auth__divider { margin-top: 22px; display: flex; align-items: center; gap: 12px; }
.site-auth__divider span:first-child,
.site-auth__divider span:last-child { flex: 1; height: 1px; background: var(--site-border-3); }
.site-auth__divider-label {
    flex: none !important;
    height: auto !important;
    background: none !important;
    font-family: var(--site-font-mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--site-muted);
}
.site-auth__alt { margin-top: 18px; padding: 12px; }
.site-auth__back { margin-top: 22px; text-align: center; }
.site-auth__back a { font-size: 13.5px; color: var(--site-muted); }
.site-auth__back a:hover { color: var(--site-ink); }
.site-auth__error {
    margin-top: 18px;
    background: var(--site-bad-bg);
    color: var(--site-bad-fg);
    border-radius: var(--site-radius);
    padding: 11px 14px;
    font-size: 13.5px;
    font-weight: 500;
}
.site-auth__notice {
    margin-top: 18px;
    background: var(--site-ok-bg);
    color: var(--site-ok-fg);
    border-radius: var(--site-radius);
    padding: 11px 14px;
    font-size: 13.5px;
    font-weight: 500;
}
/* The 6-digit sign-in code: big, mono, roomy — made for glancing at a phone. */
.site-input--code {
    font-family: var(--site-font-mono);
    font-size: 24px;
    letter-spacing: 0.35em;
    text-align: center;
}
.site-auth__resend { margin-top: 4px; }

/* ==========================================================================
   Legal documents.
   ========================================================================== */
.site-doc { max-width: 720px; margin-inline: auto; padding: 88px var(--site-gutter) 96px; }
/* Header: eyebrow + "updated" share one meta row above the title, so the mono
   line no longer crowds the heading — minimal, but with room to breathe. */
.site-doc__meta { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.site-doc__title { margin: 18px 0 0; font-size: clamp(32px, 4vw, 42px); font-weight: 600; letter-spacing: -0.035em; line-height: 1.04; }
.site-doc__updated { margin: 0; font-family: var(--site-font-mono); font-size: 12px; color: var(--site-muted); }
.site-doc__intro { margin: 26px 0 0; font-size: 17px; line-height: 1.65; color: var(--site-text); }
.site-doc__rule { margin-top: 32px; height: 1px; background: var(--site-border-3); }
.site-doc h2 { margin: 52px 0 14px; font-size: 23px; font-weight: 600; letter-spacing: -0.025em; color: var(--site-ink); }
.site-doc h3 { margin: 32px 0 12px; font-size: 18.5px; font-weight: 600; letter-spacing: -0.02em; color: var(--site-ink); }
.site-doc__group { margin: 66px 0 8px; padding-top: 34px; border-top: 1px solid var(--site-border-3); font-size: 28px; font-weight: 600; letter-spacing: -0.03em; color: var(--site-ink); }
.site-doc p { margin: 0 0 14px; font-size: 15.5px; line-height: 1.7; color: var(--site-text); }
.site-doc ul { margin: 0 0 14px; padding-left: 22px; }
.site-doc li { margin-bottom: 11px; font-size: 15.5px; line-height: 1.65; color: var(--site-text); }
.site-doc li::marker { color: var(--site-logo-grey); }
.site-doc strong { color: var(--site-ink); font-weight: 600; }
.site-doc p a,
.site-doc li a { color: var(--site-accent); text-decoration: underline; text-underline-offset: 2px; }

/* ==========================================================================
   Responsive — port the design's collapse points (desktop-first).
   ========================================================================== */
@media (max-width: 880px) {
    .site-feature__grid { grid-template-columns: 1fr; gap: 32px; }
    .site-feature__grid--reverse .site-feature__media { order: 0; }
    .site-contact { grid-template-columns: 1fr; gap: 48px; padding-block: 56px 72px; }
    .site-grid { grid-template-columns: 1fr 1fr; }
    .site-grid__cell:nth-child(3n) { border-right: 1px solid var(--site-border-4); }
    .site-grid__cell:nth-child(2n) { border-right: 0; }
    .site-grid__cell:nth-last-child(-n+3) { border-bottom: 1px solid var(--site-border-4); }
    .site-grid__cell:last-child,
    .site-grid__cell:nth-last-child(2):nth-child(odd) { border-bottom: 0; }
    .site-security__grid { grid-template-columns: 1fr; gap: 24px; }
    .site-metrics { grid-template-columns: repeat(2, 1fr); }
    .site-metrics__item:nth-child(odd) { padding-inline-start: 0; }
    .site-metrics__item:nth-child(even) { padding-inline-end: 0; }
    .site-pricing { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; }
    .site-pricing__note { flex-direction: column; gap: 12px; max-width: 460px; margin-inline: auto; }
    .site-footer__inner { grid-template-columns: 1fr 1fr; gap: 32px; }
}

@media (max-width: 640px) {
    .site-header__nav { display: none; }
    .site-hero { padding-block-start: 64px; }
    .site-section,
    .site-section--feature,
    .site-section--platform,
    .site-section--tight { padding-block-start: 64px; }
    .site-security { padding: 40px 28px; }
    .site-grid { grid-template-columns: 1fr; }
    .site-grid__cell { border-right: 0 !important; }
    /* .site-grid prefix lifts specificity above the 2-col block's
       :nth-last-child(2):nth-child(odd) rule, which also applies down here */
    .site-grid .site-grid__cell:not(:last-child) { border-bottom: 1px solid var(--site-border-4); }
    .site-grid .site-grid__cell:last-child { border-bottom: 0; }
    .site-form-row { grid-template-columns: 1fr; }
    .site-footer__inner { grid-template-columns: 1fr; gap: 28px; }
    .site-footer__bar-inner { flex-direction: column; gap: 6px; align-items: center; text-align: center; }
    .site-trust__logos { gap: 24px 32px; }
}

@media (max-width: 480px) {
    /* Below ~480px two metric columns get cramped — drop to one, flush. */
    .site-metrics { grid-template-columns: 1fr; }
    .site-metrics__item { padding: 32px 0; }
}