/*
  site.css — UnclaimedProperty homepage layout.

  Every value below is mapped 1:1 from the Figma design (file UnclaimedProperty,
  nodes 4:5610 / 4:5859 / 8:1823) to its design-system token. No raw hex, no
  magic pixel values except the two true one-offs the design itself hard-codes
  (card radius 16px, card padding 40px).
*/

* { box-sizing: border-box; }

/* FOUC guard: hide custom elements until the component module upgrades them,
   so we never flash raw <neumo-*> tags before the CDN/local script registers. */
neumo-input:not(:defined),
neumo-select:not(:defined),
neumo-button:not(:defined),
neumo-label:not(:defined),
neumo-field-message:not(:defined) { visibility: hidden; }

body {
    margin: 0;
    font-family: var(--font-families-default);
    /* Match Figma: stylistic set + lining/tabular figures */
    font-feature-settings: "ss01" 1, "lnum" 1, "tnum" 1;
    color: var(--color-neutral-darkest);
    background: var(--color-neutral-lightest);
}

/* ── Hero (dark) — node 4:5858 ───────────────────────────────────────── */
.hero {
    background: var(--color-primary-1000);          /* #160a30 */
    padding: var(--primitive-48) var(--spacing-xl); /* 48px top/bottom */
}
.hero__inner {
    max-width: 715px;                 /* hero copy column width (node 4:5860) */
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-2xl);          /* 32px between hero copy and card */
}
.hero__copy { width: 100%; }

/* Eyebrow — sunflower, node 8:1727 */
.eyebrow {
    margin: 0 0 var(--spacing-xl);    /* 24px */
    color: var(--color-brand-accent); /* #efe745 */
    font-size: var(--font-size-xs);   /* 14px */
    line-height: var(--line-heights-xs);
    font-weight: var(--font-weights-bold);
    letter-spacing: var(--letter-spacing-xs);
    text-transform: uppercase;
}

/* Title — 72/80 bold, node 4:5883 */
.title {
    margin: 0 0 var(--spacing-xl);    /* 24px */
    color: var(--color-neutral-lightest);
    font-size: var(--font-size-6xl);  /* 72px */
    line-height: var(--line-heights-6xl); /* 80px */
    font-weight: var(--font-weights-bold);
    letter-spacing: var(--letter-spacing-6xl);
}
.title__accent { color: var(--color-primary-400); } /* #b897ed */

/* Lede — node 4:5884 */
.lede {
    margin: 0 0 var(--primitive-40);  /* 40px to stats (node gap) */
    max-width: 100%;
    color: var(--color-neutral-400);  /* #b7bcc3 */
    font-size: var(--font-size-lg);   /* 18px */
    line-height: var(--line-heights-lg);
    font-weight: var(--font-weights-regular);
    letter-spacing: var(--letter-spacing-lg);
}

/* Stats — node 4:5885 (3 cols, gap 32) */
.stats {
    display: flex;
    gap: var(--spacing-2xl);          /* 32px */
    margin: 0;
}
.stats__item { flex: 1 1 0; min-width: 0; margin: 0; }
.stats__value {
    margin: 0;
    color: var(--color-neutral-lightest);
    font-size: var(--font-size-3xl);  /* 28px */
    line-height: var(--line-heights-3xl);
    font-weight: var(--font-weights-bold);
    letter-spacing: var(--letter-spacing-3xl);
}
.stats__label {
    margin: var(--spacing-xs) 0 0;    /* 8px */
    color: var(--color-neutral-400);
    font-size: var(--font-size-sm);   /* 15px */
    line-height: var(--line-heights-xs);
    font-weight: var(--font-weights-regular);
    letter-spacing: var(--letter-spacing-sm);
}

/* ── Signup card — node 8:1823 ───────────────────────────────────────── */
.card {
    width: 100%;
    max-width: 651px;
    background: var(--color-neutral-lightest);
    border-radius: 16px;              /* design one-off */
    padding: var(--primitive-40);     /* 40px */
    box-shadow: 0 0 12px rgba(18, 18, 18, 0.24); /* shadow/md */
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2xl);          /* 32px */
}
.card__head { display: flex; flex-direction: column; gap: var(--spacing-sm); } /* 12px */
.card__title {
    margin: 0;
    color: var(--color-neutral-darkest);
    font-size: var(--font-size-2xl);  /* 24px */
    line-height: var(--line-heights-2xl);
    font-weight: var(--font-weights-bold);
    letter-spacing: var(--letter-spacing-2xl);
}
.card__subtitle {
    margin: 0;
    color: var(--color-neutral-600);  /* #6b7280 */
    font-size: var(--font-size-md);   /* 16px */
    line-height: var(--line-heights-md);
    font-weight: var(--font-weights-regular);
    letter-spacing: var(--letter-spacing-md);
}
.card__fineprint {
    margin: 0;
    text-align: center;
    color: var(--color-neutral-600);
    font-size: var(--font-size-xs);   /* 14px */
    line-height: var(--line-heights-xs);
    font-weight: var(--font-weights-regular);
    letter-spacing: var(--letter-spacing-xs);
}

/* ── Form layout (spacing between DS components) ─────────────────────── */
.form { display: flex; flex-direction: column; gap: var(--spacing-lg); } /* 20px */
.field { display: flex; flex-direction: column; }
.field neumo-label { margin-bottom: var(--spacing-2xs); } /* 4px label→input */
.field-row { display: flex; gap: var(--spacing-sm); }     /* 12px */
.field-row .field { flex: 1 1 0; min-width: 0; }
.req { color: var(--color-warning-600); } /* amber required dot, matches Figma */

.submit { display: block; width: 100%; }
.submit::part(button) { width: 100%; } /* button fills the host */

.success { text-align: center; }

/* ── Trust footer — node 4:5950 ──────────────────────────────────────── */
.trust {
    background: var(--color-neutral-100);          /* light-gray band (#f7f7f7) */
    padding: var(--primitive-32) var(--primitive-80); /* 32px / 80px */
}
.trust__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-xl);
}
.trust__item {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);           /* 8px icon→text */
    color: var(--color-neutral-800);  /* #343944 */
    font-size: var(--font-size-xs);   /* 14px */
    line-height: var(--line-heights-xs);
    font-weight: var(--font-weights-semibold);
    letter-spacing: var(--letter-spacing-xs);
    white-space: nowrap;
}
/* Phosphor check-circle icon — color stays a token, size matches Figma (20px) */
.trust__item .ph {
    flex-shrink: 0;
    color: var(--color-success-400); /* #29c68c */
    font-size: 20px;
}

/* ── Small screens ───────────────────────────────────────────────────── */
@media (max-width: 720px) {
    .title { font-size: clamp(2.5rem, 11vw, 72px); line-height: 1.08; }
    .field-row { flex-direction: column; gap: var(--spacing-lg); }
    .stats { flex-direction: column; gap: var(--spacing-lg); }
    .trust__list { flex-direction: column; align-items: flex-start; gap: var(--spacing-sm); }
}