/* Landing + no-results — centred, single-column "entry" screens.
   Sign-up is no longer a page: it's a modal on the last carousel slide. */

.entry{min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:clamp(24px,6vw,56px) clamp(16px,4vw,24px); text-align:center}
.entry-inner{width:100%; max-width:560px}
.entry .wordmark{font-size:clamp(34px,6vw,44px); display:inline-block; margin-bottom:22px}

/* brand lockup on the entry screens: the mark scales with the wordmark and the
   pair carries the bottom margin (so the wordmark's own margin doesn't double up) */
.entry .brand{margin-bottom:22px; gap:12px}
.entry .brand .wordmark{margin-bottom:0}
.entry .brand-mark{height:clamp(40px,6.8vw,52px)}

.entry h1{font-family:var(--display); font-weight:700; color:var(--head); letter-spacing:-.03em;
  font-size:clamp(1.9rem,4.6vw,2.9rem); line-height:1.1; margin:0 0 14px}
.entry .lede{color:var(--muted); margin:0 auto 32px; max-width:44ch}
.entry .lede b{color:var(--pos); font-weight:700}

/* ---- the IC field ---- */
.field{display:flex; gap:10px; align-items:stretch; background:var(--paper);
  border:var(--hairline) solid var(--line); border-radius:var(--radius); padding:10px;
  box-shadow:var(--shadow); text-align:left}
.field input{flex:1; min-width:0; border:0; outline:0; background:transparent; color:var(--ink);
  font-family:var(--num); font-variant-numeric:tabular-nums; font-size:clamp(15px,2.4vw,18px);
  letter-spacing:.06em; padding:12px 14px}
.field input::placeholder{color:var(--faint); letter-spacing:.06em}
.field:focus-within{border-color:var(--accent); box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 12%, transparent), var(--shadow)}
.field .btn{flex:0 0 auto}
/* On a phone the button eats the input's width and the placeholder clips. Stack
   them: full-width input above a full-width button, both inside the same pill. */
@media (max-width:480px){
  .field{flex-direction:column}
  .field .btn{width:100%}
}

.field-note{display:flex; align-items:center; justify-content:center; gap:8px;
  margin:14px 0 0; font-size:12.5px; color:var(--faint)}
.err{margin:12px 0 0; font-size:13px; font-weight:600; color:var(--bad-deep); min-height:1.2em}

.trust{margin-top:34px; padding-top:24px; border-top:var(--hairline) solid var(--line);
  font-size:12.5px; color:var(--muted); line-height:1.6}
.trust b{color:var(--ink)}

/* ---- loading state ---- */
.loading{display:none}
.loading.on{display:block; animation:rise .4s ease both}
.entry.busy .idle{display:none}

.ticks{list-style:none; margin:22px auto 0; padding:0; max-width:330px; text-align:left}
.ticks li{display:flex; align-items:center; gap:11px; padding:9px 0; font-size:14px;
  color:var(--faint); border-bottom:var(--hairline) solid var(--line-2); opacity:.45; transition:.3s}
.ticks li:last-child{border-bottom:0}
.ticks li::before{content:"○"; color:var(--faint); font-size:13px; width:14px}
.ticks li.done{opacity:1; color:var(--ink)}
.ticks li.done::before{content:"✓"; color:var(--pos); font-weight:700}

/* ============================================================
   HERO variant (landing only) — full-bleed photograph with the
   copy laid over a scrim. Scoped to .entry--hero so no-results,
   which shares this file, keeps its calm paper background.
   ============================================================ */
.entry--hero{position:relative; overflow:hidden; isolation:isolate;
  min-height:100vh; min-height:100svh;
  /* copy lives on the LEFT now — the subject sits in the right third of the
     photo, so the text no longer overlaps her. */
  align-items:flex-start; text-align:left;
  padding-left:clamp(24px,7vw,104px); padding-right:clamp(24px,7vw,104px)}

/* the photograph. Bias right so the woman stays framed as the viewport
   narrows; the left-hand scrim carries the text. */
.entry-photo{position:absolute; inset:0; z-index:-2;
  background:url("hero.jpg") 72% 50% / cover no-repeat}

/* darken the LEFT column (where the copy sits) and the bottom edge more than
   the bright right side, so white type holds contrast without hiding her. */
.entry-scrim{position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(to right,
      rgba(12,17,24,.80) 0%, rgba(12,17,24,.58) 32%,
      rgba(12,17,24,.20) 60%, rgba(12,17,24,.04) 100%),
    linear-gradient(to bottom,
      rgba(12,17,24,.30) 0%, transparent 28%,
      transparent 60%, rgba(12,17,24,.46) 100%)}

.entry--hero .entry-inner{max-width:540px; margin:0}

/* The shared .lede / .ticks / .field-note centre themselves with margin/justify
   auto — correct for the centred no-results screen, but on the left-aligned hero
   they float in from their own max-width and stagger the left edge. Pin them to
   the heading's edge so every line starts at the same place. */
.entry--hero .lede{margin-left:0}
.entry--hero .field-note{justify-content:flex-start}
.entry--hero .ticks{margin-left:0}
/* the invalid-IC message: dark --bad-deep vanishes on the photo, so light it up */
.entry--hero .err{color:#ffb4ab; text-shadow:0 1px 12px rgba(0,0,0,.5)}
/* the spinner also auto-centres by default; on the left-aligned hero it must sit
   above the heading, not float in the middle of the column */
.entry--hero .spinner{margin-left:0}

/* The loading block is shorter than the idle ask, so left-pinned + vertically
   centred it reads top-heavy and hugs the far-left edge on wide screens. Nudge
   the busy state up and to the right so the bold heading lands near the optical
   centre. Uses position offsets, not transform — the .loading.on `rise` keyframe
   ends on `transform:none`, which would override a transform. Phones untouched. */
@media (min-width:700px){
  .entry--hero .loading{position:relative; left:clamp(24px,4vw,64px); top:-6vh}
}
/* Nudged up-and-right, the loading copy leaves the dark left-scrim and drifts
   onto the bright window, where white type vanishes. Loading is a ~2s interstitial,
   so darken the whole photo while busy — the text then reads wherever it sits and
   the scene stays a calm backdrop. */
.entry--hero.busy .entry-scrim{background:linear-gradient(to bottom,
  rgba(12,17,24,.62) 0%, rgba(12,17,24,.74) 100%)}

/* copy goes light. The green .lede accent and dark trust rules don't read
   on a photo, so they're re-tuned for the dark ground here. */
.entry--hero .wordmark{color:#fff}
.entry--hero .wordmark b{color:#fff}
.entry--hero h1{color:#fff; font-size:clamp(2.1rem,5.4vw,3.4rem);
  text-shadow:0 2px 34px rgba(0,0,0,.45)}
.entry--hero .lede{color:rgba(255,255,255,.92); text-shadow:0 1px 18px rgba(0,0,0,.4)}
.entry--hero .lede b{color:#fff}
.entry--hero .field{box-shadow:0 24px 60px rgba(0,0,0,.4)}
.entry--hero .field-note{color:rgba(255,255,255,.85); text-shadow:0 1px 12px rgba(0,0,0,.45)}
.entry--hero .trust{color:rgba(255,255,255,.82); border-top-color:rgba(255,255,255,.24);
  text-shadow:0 1px 12px rgba(0,0,0,.45)}
.entry--hero .trust b{color:#fff}

/* loading state, over the same photo */
.entry--hero .ticks li{color:rgba(255,255,255,.5); border-bottom-color:rgba(255,255,255,.16)}
.entry--hero .ticks li.done{color:#fff}
.entry--hero .ticks li::before{color:rgba(255,255,255,.5)}