/* ==========================================================================
   findcompany — public site (blue)
   --------------------------------------------------------------------------
   The unauthenticated, INDEXABLE blue site: landing, auth (login / register /
   verify / forgot / reset) and the legal documents. Loaded AFTER tokens.css,
   which supplies the reset, the scales, the status palette and the shared
   primitives (.mono, .muted, .visually-hidden, [hidden], :focus-visible).

   Font: native system-ui stack (the Grotesk webfonts are dashboard-only).
   Mobile-first. CSS Grid / Flexbox. WCAG AA — 48px touch targets, visible focus.
   ========================================================================== */

:root {
    --blue-900: #0b2545;
    --blue-700: #13315c;
    --blue-500: #2563eb;
    --blue-050: #eef3fb;

    --ink:    #0b1726;
    --muted:  #5b6b7f;          /* feeds tokens.css .muted                     */
    --bg:     #f4f7fb;
    --card:   #ffffff;
    --border: #e3e9f2;
    --ring:   #2563eb;          /* feeds tokens.css :focus-visible             */

    --field-border: #8b93a8;   /* darkened from #cdd9ea → 3.07:1 on white (WCAG 1.4.11 non-text contrast) */
    --card-max: 26rem;
    --home-max: 84rem;         /* shared width for every marketing-page band, so they all align */
}

body {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--ink);
    background: var(--bg);
}

/* ============================ LANDING ============================ */

.landing {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 1.5rem;
}

.landing__card {
    width: 100%;
    max-width: var(--card-max);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.75rem;
    padding: 2.5rem 1.75rem;
    text-align: center;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 10px 30px rgba(11, 37, 69, 0.08);
}

.landing__logo {
    width: min(13.75rem, 70%);
    height: auto;
}

.landing__actions {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
}

/* ============================ BUTTONS (BEM) ============================ */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 3rem;            /* 48px touch target */
    padding: 0 1.25rem;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: 0.625rem;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.btn--primary {
    background: var(--blue-500);
    color: #ffffff;
}
.btn--primary:hover { background: var(--blue-700); }

.btn--ghost {
    background: var(--card);
    color: var(--blue-700);
    border-color: var(--field-border);
}
.btn--ghost:hover { background: var(--blue-050); }

.btn--block { width: 100%; }

.btn--sm {
    min-height: 2.25rem;
    padding: 0 0.875rem;
    font-size: 0.875rem;
}

.btn--link {
    min-height: auto;
    padding: 0.25rem;
    background: none;
    border: none;
    color: var(--blue-500);
    font-weight: 600;
    text-decoration: underline;
}
.btn--link:hover { color: var(--blue-700); }

/* Sign in with Google */
.btn--google {
    gap: 0.5rem;
    background: #ffffff;
    color: #1f2937;
    border-color: var(--field-border);
}
.btn--google:hover { background: #f6f9fd; }

.btn__g {
    display: inline-block;
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
}

.oauth-divider {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--muted);
    font-size: 0.8125rem;
}
.oauth-divider::before,
.oauth-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--border);
}

/* ============================ AUTH PAGES ============================ */

.auth {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 1.5rem;
}

.auth__card {
    width: 100%;
    max-width: var(--card-max);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 2rem 1.75rem;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 10px 30px rgba(11, 37, 69, 0.08);
}

.auth__brand { align-self: center; }
.auth__logo  { width: 11rem; height: auto; }

.auth__heading {
    margin: 0.25rem 0 0;
    font-size: 1.375rem;
    text-align: center;
}
.auth__lead {
    margin: 0;
    color: var(--muted);
    text-align: center;
}
.auth__alt {
    margin: 0;
    text-align: center;
    font-size: 0.9375rem;
    color: var(--muted);
}
.auth__alt a {
    color: var(--blue-500);
    font-weight: 600;
}

/* ============================ FORMS ============================ */

.form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.form--inline {
    margin-top: -0.5rem;
    align-items: center;
}

/* Register: a wider card with a two-column form on desktop, collapsing to one on mobile,
   so the long sign-up form no longer runs off a thin single column. */
.auth__card--wide { max-width: 40rem; }
.form--register {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 1.5rem;
    row-gap: 1rem;
    align-items: start;
}
.form--register .form__col { display: flex; flex-direction: column; gap: 1rem; }
.form--register > .btn--block,
.form--register > .form__consent { grid-column: 1 / -1; margin: 0.25rem 0 0; }
.form--register .seg__options { grid-template-columns: 1fr; }
@media (max-width: 640px) {
    .auth__card--wide { max-width: var(--card-max); }
    .form--register { grid-template-columns: 1fr; }
}

.field {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}
.field label {
    font-weight: 600;
    font-size: 0.9375rem;
}
.field input {
    width: 100%;
    min-height: 3rem;
    padding: 0 0.875rem;
    font-size: 1rem;
    color: var(--ink);
    background: #fff;
    border: 1px solid var(--field-border);
    border-radius: 0.625rem;
}
.field input:focus-visible {
    outline: 3px solid var(--ring);
    outline-offset: 1px;
    border-color: var(--blue-500);
}

.field__hint {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--muted);
}
.field__code {
    letter-spacing: 0.5rem;
    font-variant-numeric: slashed-zero tabular-nums;
    text-align: center;
    font-size: 1.25rem;
}

/* ---- Show/hide password ----
   The wrapper and the button are injected by password-reveal.js, so these rules
   only ever apply when the enhancement is actually present. The input reserves
   room on the right so a long password never runs under the button. */
.field__wrap {
    position: relative;
    display: block;
}
.field__wrap input {
    padding-right: 3.25rem;
}
.pw-reveal {
    position: absolute;
    top: 50%;
    right: 0.25rem;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* 44x44 — comfortably above the WCAG AA target size on touch. */
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    color: var(--muted);
    background: transparent;
    border: 0;
    border-radius: 0.5rem;
    cursor: pointer;
}
.pw-reveal:hover {
    color: var(--ink);
}
.pw-reveal:focus-visible {
    color: var(--ink);
    outline: 3px solid var(--ring);
    outline-offset: 1px;
}
.pw-reveal[aria-pressed="true"] {
    color: var(--blue-500);
}

/* ---- Live password rules ---- */
.pw-rules {
    list-style: none;
    margin: 0.375rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3125rem;
}
.pw-rule {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    color: var(--muted);
}
.pw-rule::before {
    content: "";
    flex: 0 0 auto;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    border: 1.5px solid var(--field-border);
    background-color: #fff;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 0.7rem;
}
/* JS toggles .pw-rule--met as the live value satisfies each rule. */
.pw-rule--met { color: #0b3b2e; }
.pw-rule--met::before {
    border-color: var(--ok);
    background-color: var(--ok);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M2.5 6.2l2.2 2.2 4.6-4.8'/%3E%3C/svg%3E");
}

/* ============================ ALERTS ============================ */

.alert {
    margin: 0;
    padding: 0.75rem 0.875rem;
    border-radius: 0.625rem;
    font-size: 0.9375rem;
}
.alert--error {
    color: #7f1d1d;
    background: #fef2f2;
    border: 1px solid #fecaca;
}
.alert--notice {
    color: #0b3b2e;
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
}

/* ============ Customer-type selector + company combobox (register) ============ */

.seg {
    border: 0;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.seg legend {
    font-weight: 600;
    font-size: 0.9375rem;
    padding: 0;
}
.seg__options {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.625rem;
}
.seg__opt {
    position: relative;
    display: block;
    cursor: pointer;
}
.seg__opt input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}
.seg__card {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    height: 100%;
    padding: 0.75rem 0.875rem;
    background: #fff;
    border: 1.5px solid var(--field-border);
    border-radius: 0.625rem;
}
.seg__opt input:checked + .seg__card {
    border-color: var(--ring);
    box-shadow: 0 0 0 1px var(--ring) inset;
    background: #f5f8ff;
}
.seg__opt input:focus-visible + .seg__card {
    outline: 3px solid var(--ring);
    outline-offset: 1px;
}
.seg__title { font-weight: 600; }
.seg__desc  { font-size: 0.8125rem; color: var(--muted); }

.combo { position: relative; }
.combo__input {
    width: 100%;
    min-height: 3rem;
    padding: 0 0.875rem;
    font-size: 1rem;
    color: var(--ink);
    background: #fff;
    border: 1px solid var(--field-border);
    border-radius: 0.625rem;
}
.combo__input:focus-visible {
    outline: 3px solid var(--ring);
    outline-offset: 1px;
    border-color: var(--blue-500);
}
.combo__list {
    position: absolute;
    z-index: 20;
    left: 0;
    right: 0;
    margin: 0.25rem 0 0;
    padding: 0.25rem;
    list-style: none;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 0.625rem;
    box-shadow: 0 12px 28px rgba(11, 23, 38, 0.12);
    max-height: 16rem;
    overflow-y: auto;
}
.combo__opt {
    display: flex;
    flex-direction: column;
    gap: 0.0625rem;
    padding: 0.5rem 0.625rem;
    border-radius: 0.4375rem;
    cursor: pointer;
}
.combo__opt:hover, .combo__opt--active { background: #f0f5ff; }   /* keyboard highlight = hover */
.combo__opt-title { font-weight: 600; font-size: 0.9375rem; }
.combo__opt-meta  { font-size: 0.75rem; color: var(--muted); }
.combo__chosen {
    margin: 0.5rem 0 0;
    font-size: 0.875rem;
    color: var(--ink);
}

/* ============================ LEGAL DOCUMENTS ============================ */
/* Wide, readable, indexable pages (Terms / Privacy / Cookies). */

.legal-top {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; max-width: 52rem; margin: 0 auto; padding: 1.25rem 1.5rem;
}
.legal-brand { display: inline-flex; }
.legal-logo { height: 30px; width: auto; display: block; }
.legal-nav { display: flex; gap: 1.25rem; font-size: 0.9rem; }
.legal-nav a { color: var(--blue-700); text-decoration: none; font-weight: 600; }
.legal-nav a:hover { text-decoration: underline; }

.legal { max-width: 52rem; margin: 0 auto; padding: 0.5rem 1.5rem 3rem; }
.legal-doc { color: var(--ink); line-height: 1.65; }
.legal-doc h1 { font-size: clamp(1.7rem, 4vw, 2.3rem); line-height: 1.15; margin: 0 0 0.35rem; }
.legal-updated { color: var(--muted); margin: 0 0 2rem; font-size: 0.9rem; }
.legal-doc h2 {
    font-size: 1.2rem; margin: 2.4rem 0 0.6rem; padding-top: 1.4rem;
    border-top: 1px solid var(--border); color: var(--blue-900);
}
.legal-doc h3 { font-size: 1.02rem; margin: 1.4rem 0 0.4rem; }
.legal-doc p, .legal-doc li { color: #25323f; max-width: 70ch; }
.legal-doc ul { padding-left: 1.3rem; }
.legal-doc li { margin: 0.3rem 0; }
.legal-doc a { color: var(--blue-500); }
.legal-doc strong { color: var(--ink); }
.legal-doc address { font-style: normal; color: #25323f; }

.legal-foot { border-top: 1px solid var(--border); margin-top: 2rem; }
.legal-foot-links {
    display: flex; flex-wrap: wrap; gap: 1.25rem; justify-content: center;
    max-width: 52rem; margin: 0 auto; padding: 1.5rem 1.5rem 0.25rem; font-size: 0.9rem;
}
.legal-foot-links a { color: var(--blue-700); text-decoration: none; font-weight: 600; }
.legal-foot-links a:hover { text-decoration: underline; }
.legal-foot-copy { text-align: center; color: var(--muted); font-size: 0.82rem; padding: 0.25rem 1.5rem 2rem; margin: 0; }

/* Small legal links under the auth / landing cards. */
.auth-legal { text-align: center; margin: 1.5rem auto 2rem; font-size: 0.82rem; color: var(--muted); }
.auth-legal a { color: var(--blue-700); text-decoration: none; }
.auth-legal a:hover { text-decoration: underline; }
.form__consent { text-align: center; font-size: 0.8rem; color: var(--muted); margin: 0.85rem 0 0; }
.form__consent a { color: var(--blue-700); }

/* ============================ PUBLIC COMPANY PAGE ============================ */
/* The SEO company profile (/company/{slug}-{number}). Blue public theme; company
   data only (no people). Reuses .legal/.legal-doc wrappers + .btn for the CTA. */

.pc-name { margin: 0 0 0.4rem; }
.pc-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; margin: 0 0 1.75rem; }
.pc-status {
    display: inline-flex; align-items: center; padding: 0.2rem 0.6rem; border-radius: 999px;
    font-size: 0.8rem; font-weight: 600; line-height: 1;
}
.pc-status--ok   { background: var(--ok-bg);   color: var(--ok); }
.pc-status--warn { background: var(--warn-bg); color: var(--warn); }
.pc-status--bad  { background: var(--bad-bg);  color: var(--bad); }

/* Buy-report call to action. */
.pc-cta {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 1rem; margin: 0 0 2rem; padding: 1.1rem 1.25rem;
    background: var(--blue-050); border: 1px solid var(--border); border-radius: var(--radius);
}
.pc-cta-copy { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.pc-cta-copy strong { color: var(--blue-900); font-size: 1.02rem; }
.pc-cta .btn { flex: none; }
/* The CTA lives inside .legal-doc, whose `a { color: blue }` (0,1,1) would otherwise beat
   .btn--primary's white text (0,1,0) — re-assert white with a higher-specificity selector. */
.pc-cta .btn--primary { color: #fff; }

/* Fact lists. */
.pc-facts { margin: 0.4rem 0 1.6rem; padding: 0; display: grid; gap: 0; }
.pc-fact {
    display: grid; grid-template-columns: 1fr; gap: 0.1rem;
    padding: 0.7rem 0; border-bottom: 1px solid var(--border);
}
.pc-fact:last-child { border-bottom: none; }
.pc-fact dt { color: var(--muted); font-size: 0.85rem; }
.pc-fact dd { margin: 0; color: var(--ink); }

/* SIC + previous-name lists. */
.pc-sic, .pc-prev { list-style: none; margin: 0.4rem 0 1.6rem; padding: 0; }
.pc-sic li { display: flex; gap: 0.75rem; align-items: baseline; padding: 0.35rem 0; }
.pc-sic-code { flex: none; min-width: 4rem; color: var(--blue-700); font-weight: 600; }
.pc-sic-desc { color: #25323f; min-width: 0; }
.pc-prev li { padding: 0.3rem 0; }

.pc-disclaimer { margin-top: 2rem; font-size: 0.85rem; }
.pc-ogl { text-align: center; color: var(--muted); font-size: 0.8rem; max-width: 52rem; margin: 0 auto; padding: 0 1.5rem; }
.pc-ogl a { color: var(--blue-700); }

/* ============================ WIDER VIEWPORTS ============================ */

@media (min-width: 30rem) {
    .seg__options { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 38rem) {
    .pc-fact { grid-template-columns: 14rem 1fr; gap: 1rem; align-items: baseline; }
    .pc-fact dt { font-size: 0.9rem; }
}

@media (min-width: 35rem) {
    .landing__actions {
        flex-direction: row;
        justify-content: center;
    }
    .landing__actions .btn { flex: 1; }
}

/* ==========================================================================
   Marketing homepage (index.php) — blue public theme, mobile-first.
   ========================================================================== */
.home { background: var(--bg); color: var(--ink); }
.home-main { display: block; }

/* Header */
.home-top {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    max-width: var(--home-max); margin: 0 auto; padding: 16px 24px;
}
.home-logo { height: 30px; width: auto; display: block; }
.home-nav { display: flex; align-items: center; gap: 14px; }
.home-nav a { color: var(--ink); text-decoration: none; font-weight: 600; font-size: 15px; }
.home-nav a:hover { color: var(--blue-700); }
.home-nav a.btn { color: #fff; }
.home-nav > a:not(.btn) { display: none; }   /* hide section anchors on small screens */
@media (min-width: 52rem) { .home-nav > a:not(.btn) { display: inline; } }

/* Hero — two columns on desktop (copy + search left, report preview right) */
.home-hero {
    max-width: var(--home-max); margin: 0 auto; padding: 44px 24px 32px;
    display: grid; grid-template-columns: 1fr; gap: 36px; align-items: center;
}
@media (min-width: 58rem) {
    .home-hero { grid-template-columns: 1.1fr 0.9fr; gap: 56px; padding: 60px 24px 48px; }
}
/* Let the grid tracks shrink below their items' min-content (the search field's intrinsic width
   otherwise blows the column out, causing horizontal scroll on narrow phones like the iPhone SE). */
.home-hero > * { min-width: 0; }
.home-eyebrow {
    display: block; margin: 0 0 12px; text-transform: uppercase; letter-spacing: .08em;
    font-size: 13px; line-height: 1.3; font-weight: 700; color: var(--blue-500);
}
.home-hero__title {
    margin: 0 0 16px; font-size: clamp(2rem, 5.5vw, 3.1rem); line-height: 1.08;
    letter-spacing: -0.02em; color: var(--blue-900);
}
.home-hero__sub {
    margin: 0 0 20px; max-width: 34rem; font-size: clamp(1.05rem, 2.2vw, 1.18rem);
    line-height: 1.6; color: var(--muted);
}
.home-hero__sub strong { color: var(--ink); }
.home-hero__note { margin: 14px 0 0; font-size: 14px; color: var(--muted); }

/* Benefit ticks */
.home-ticks { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 11px; }
.home-ticks li { position: relative; padding-left: 30px; color: var(--ink); line-height: 1.5; font-size: 1.02rem; }
.home-ticks li::before {
    content: ""; position: absolute; left: 0; top: 1px; width: 21px; height: 21px;
    border-radius: 50%; background: var(--ok-bg);
    /* checkmark drawn with a background SVG so no inline style / extra markup is needed */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f7a4e' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: center; background-size: 13px;
}
.home-ticks strong { color: var(--blue-900); }

/* Hero search */
.home-search { max-width: 38rem; position: relative; text-align: left; }
.home-search__field {
    display: flex; align-items: stretch; gap: 8px;
    background: var(--card); border: 1.5px solid var(--field-border);
    border-radius: var(--radius); padding: 7px 7px 7px 14px; box-shadow: var(--shadow-md, 0 6px 24px rgba(11,37,69,.08));
}
.home-search__field:focus-within { border-color: var(--blue-500); }
.home-search__icon { display: flex; align-items: center; color: var(--muted); }
.home-search__icon svg { stroke: currentColor; }
.home-search__input {
    flex: 1 1 auto; min-width: 0; border: 0; background: transparent; font: inherit;
    font-size: 1.05rem; color: var(--ink); padding: 10px 4px; outline: none;
}
.home-search__input::placeholder { color: var(--muted); }
.home-search__btn { flex: 0 0 auto; }
.home-search__list {
    position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; right: 0;
    margin: 0; padding: 6px; list-style: none; background: var(--card);
    border: 1px solid var(--border); border-radius: var(--radius);
    box-shadow: 0 12px 32px rgba(11,37,69,.16); max-height: 320px; overflow-y: auto;
}
.home-opt {
    display: flex; flex-direction: column; gap: 1px; padding: 10px 12px;
    border-radius: 8px; cursor: pointer;
}
.home-opt:hover, .home-opt--active { background: var(--blue-050); }
.home-opt__title { font-weight: 600; color: var(--ink); }
.home-opt__meta {
    font-size: 13px; color: var(--muted);
    font-variant-numeric: slashed-zero tabular-nums;
}

/* Hero visual — a representative report preview card with floating chips */
.home-hero__visual { position: relative; display: flex; justify-content: center; }
.home-preview {
    width: 100%; max-width: 25rem; background: var(--card);
    border: 1px solid var(--border); border-radius: 18px;
    box-shadow: 0 24px 60px rgba(11, 37, 69, .16); padding: 22px; position: relative; z-index: 1;
}
.home-preview__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.home-preview__co { font-weight: 700; color: var(--ink); font-size: 1.05rem; }
.home-preview__pill {
    font-size: 12px; font-weight: 700; color: var(--ok); background: var(--ok-bg);
    padding: 3px 10px; border-radius: 999px;
}
.home-preview__limit { margin: 18px 0; }
.home-preview__label { display: block; font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.home-preview__amt { display: block; font-size: 2.2rem; font-weight: 800; color: var(--blue-900); line-height: 1.1; margin-top: 2px; }
.home-preview__ratehead { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 6px; }
.home-preview__score { font-size: 13px; font-weight: 700; color: var(--ok); }
.home-preview__bar { height: 9px; border-radius: 999px; background: var(--blue-050); overflow: hidden; }
.home-preview__fill { display: block; height: 100%; width: 82%; border-radius: 999px;
    background: linear-gradient(90deg, #34a06f, var(--ok)); }
.home-preview__rows { margin-top: 18px; border-top: 1px solid var(--border); padding-top: 6px; }
.home-preview__rows > div { display: flex; justify-content: space-between; padding: 7px 0; font-size: 14px; border-bottom: 1px solid var(--border); }
.home-preview__rows > div:last-child { border-bottom: 0; }
.home-preview__rows span:first-child { color: var(--muted); }
.home-preview__rows span:last-child { color: var(--ink); font-weight: 600; }
.home-preview__chip {
    position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: 6px;
    background: var(--card); border: 1px solid var(--border); border-radius: 999px;
    padding: 7px 13px; font-size: 13px; font-weight: 600; color: var(--ink);
    box-shadow: 0 10px 26px rgba(11, 37, 69, .14);
}
.home-preview__chip svg { stroke: var(--blue-500); }
/* Straddle the card's corners (positioned relative to .home-preview now). */
.home-preview__chip--a { top: -16px; left: -14px; }
.home-preview__chip--a svg { stroke: var(--ok); }
.home-preview__chip--b { bottom: -16px; right: -14px; }
.home-preview__chip--b svg { stroke: var(--ok); }
/* Only show the floating chips in the desktop two-column layout, where there's room to bleed
   past the card edges without overflowing the viewport. */
@media (max-width: 58rem) { .home-preview__chip { display: none; } }

/* Trust strip */
.home-strip {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 28px;
    max-width: var(--home-max); margin: 0 auto; padding: 18px 24px;
    border-block: 1px solid var(--border);
}
.home-strip span { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 14px; font-weight: 600; }
.home-strip svg { stroke: var(--blue-500); }

/* Sections — every section is a FULL-WIDTH band whose content is centred at --home-max, so all
   sections line up identically. (Previously --alt sections relied on `margin-inline:auto` which the
   grids' own `margin:0` overrode, pinning some content left while others centred.) */
.home-section { padding: 52px 24px; }
.home-section > * { max-width: var(--home-max); margin-inline: auto; }
.home-section--alt { background: #fff; border-block: 1px solid var(--border); }
.home-h2 {
    margin: 0 auto 8px; font-size: clamp(1.5rem, 4vw, 2rem); letter-spacing: -0.01em;
    color: var(--blue-900); text-align: center;
}
.home-section__lead {
    margin: 0 auto 28px; max-width: 40rem; text-align: center; color: var(--muted);
    font-size: 1.05rem; line-height: 1.6;
}
.home-section__lead strong { color: var(--ink); }

/* Feature grid */
.home-grid {
    list-style: none; margin: 0 auto; padding: 0; display: grid; gap: 18px;
    grid-template-columns: 1fr;
}
@media (min-width: 40rem) { .home-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 60rem) { .home-grid { grid-template-columns: 1fr 1fr 1fr; } }
.home-feature {
    background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 22px; box-shadow: var(--shadow, 0 1px 2px rgba(11,37,69,.04));
}
.home-feature__ico {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border-radius: 12px; margin-bottom: 12px;
    background: var(--blue-050); color: var(--blue-500);
}
.home-feature__ico svg { stroke: currentColor; }
.home-feature h3 { margin: 0 0 6px; font-size: 1.1rem; color: var(--ink); }
.home-feature p { margin: 0; color: var(--muted); line-height: 1.55; }

/* How it works */
.home-steps {
    list-style: none; margin: 0 auto; padding: 0; display: grid; gap: 18px;
    grid-template-columns: 1fr; counter-reset: step;
}
@media (min-width: 48rem) { .home-steps { grid-template-columns: 1fr 1fr 1fr; } }
.home-step {
    background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px;
}
.home-step__n {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 50%; margin-bottom: 12px;
    background: var(--blue-500); color: #fff; font-weight: 700; font-size: 1.1rem;
    font-variant-numeric: slashed-zero;
}
.home-step h3 { margin: 0 0 6px; font-size: 1.1rem; color: var(--ink); }
.home-step p { margin: 0; color: var(--muted); line-height: 1.55; }

.home-cta-row { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 28px; }

/* Pricing */
.home-packs {
    list-style: none; margin: 0 auto 18px; padding: 0; display: grid; gap: 18px;
    grid-template-columns: 1fr;
}
@media (min-width: 48rem) { .home-packs { grid-template-columns: repeat(3, 1fr); } }
.home-pack {
    position: relative; background: var(--card); border: 1.5px solid var(--border);
    border-radius: var(--radius); padding: 24px; text-align: center;
    display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.home-pack--popular { border-color: var(--blue-500); box-shadow: 0 8px 28px rgba(37,99,235,.14); }
.home-pack__tag {
    position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
    background: var(--blue-500); color: #fff; font-size: 12px; font-weight: 700;
    padding: 3px 12px; border-radius: 999px; white-space: nowrap;
}
.home-pack__name { font-weight: 700; color: var(--ink); font-size: 1.1rem; }
.home-pack__price { font-size: 2.1rem; font-weight: 800; color: var(--blue-900); line-height: 1.1; }
/* The comparable unit price — the figure customers actually shop on, so it sits
   directly under the pack price and reads louder than the credits line. */
.home-pack__unit { color: var(--blue-700, var(--blue-900)); font-weight: 700; font-size: 15px; }
.home-pack__credits { color: var(--muted); font-size: 14px; }
.home-packs__more { text-align: center; color: var(--muted); margin: 0 auto; line-height: 1.6; }
.home-packs__more strong { color: var(--ink); }

/* Trust */
.home-trust {
    list-style: none; margin: 0 auto; padding: 0; display: grid; gap: 16px 32px;
    grid-template-columns: 1fr; max-width: 60rem;
}
@media (min-width: 44rem) { .home-trust { grid-template-columns: 1fr 1fr; } }
.home-trust li { display: flex; gap: 12px; align-items: flex-start; }
.home-trust__ico {
    flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 9px; background: var(--blue-050); color: var(--blue-500);
}
.home-trust__ico svg { stroke: currentColor; }
.home-trust strong { color: var(--ink); }
.home-trust div { color: var(--muted); line-height: 1.55; }

/* FAQ */
.home-faq { max-width: 44rem; margin: 0 auto; }
.home-faq dt { font-weight: 700; color: var(--ink); margin-top: 18px; font-size: 1.05rem; }
.home-faq dt:first-child { margin-top: 0; }
.home-faq dd { margin: 6px 0 0; color: var(--muted); line-height: 1.6; }

/* Final CTA */
.home-final {
    text-align: center; padding: 56px 20px; background: var(--blue-900); color: #fff;
}
.home-final h2 { margin: 0 0 10px; font-size: clamp(1.6rem, 4vw, 2.2rem); color: #fff; }
.home-final p { margin: 0 0 24px; color: #cdd9ea; font-size: 1.1rem; }
.btn--lg { padding: 14px 28px; font-size: 1.05rem; }

/* Footer */
.home-foot { background: #fff; border-top: 1px solid var(--border); padding: 28px 20px; }
.home-foot__inner {
    max-width: var(--home-max); margin: 0 auto; display: flex; flex-wrap: wrap; gap: 16px;
    align-items: center; justify-content: space-between;
}
.home-foot__logo { height: 26px; width: auto; }
.home-foot__links { display: flex; flex-wrap: wrap; gap: 16px; }
.home-foot__links a { color: var(--muted); text-decoration: none; font-weight: 600; font-size: 14px; }
.home-foot__links a:hover { color: var(--blue-700); }
.home-foot__copy { max-width: var(--home-max); margin: 16px auto 0; color: var(--muted); font-size: 13px; text-align: center; }

/* "Trust this device for 30 days" checkbox on the login code screen. */
.field-check {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin: 4px 0 4px;
    font-size: 14px;
    line-height: 1.45;
    text-align: left;
}
.field-check input[type="checkbox"] {
    margin-top: 2px;
    width: 18px;
    height: 18px;
    flex: none;
}