/* flo.co coming-soon page. Builds on flo-site.css: the same painted hero, sea motion,
   closing and footer, with the waitlist in the hero and no captain's log. */

:root {
  /* No captain's log here, so the ship band can sit at the foot of the hero. */
  --log-room: 32px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Hero ---------- */
.hero--signup { grid-template-rows: minmax(0, 1fr); }
/* Wide screens: the headline fits the open water left of the ship. Its longest line
   ("Each one finds its audience.") is 11.2em; below a type floor that line wraps
   instead of shrinking further. */
@media (min-aspect-ratio: 13/10) {
  .hero--signup h1 {
    --h1-floor: 33px;
    font-size: clamp(var(--h1-floor), calc(var(--copy-room) / 12.6), var(--type-display));
    max-width: min(100%, var(--copy-room));
  }
}
@media (min-aspect-ratio: 13/10) and (min-width: 1001px) {
  .hero--signup h1 { --h1-floor: 44px; }
}
.hero--signup .hero-copy {
  align-self: center;
  padding-top: calc(var(--header-h) + clamp(24px, 6svh, 96px));
  padding-bottom: clamp(40px, 8svh, 104px);
}
.hero-kicker {
  display: inline-flex; align-items: center; gap: 10px;
  margin-bottom: 20px;
  font-size: 14px; line-height: 1.4; color: var(--ivory);
}
.hero-kicker::before { content: ""; width: 8px; height: 8px; flex: none; background: var(--peach-light); }
.hero--signup .hero-lead { max-width: min(46ch, var(--copy-room)); }

/* ---------- Waitlist (same contract as the live form: POST /api/notify) ---------- */
.notify-block { width: min(560px, 100%); margin-top: 32px; }
/* Wide screens: the form sits lower than the headline, beside the hull, so it keeps
   a further 48px from the ship. */
@media (min-aspect-ratio: 13/10) {
  .notify-block { width: min(560px, 100%, calc(var(--copy-room) - 48px)); }
}
.notify { position: relative; display: flex; flex-wrap: wrap; gap: 12px; }
.notify input[type="email"] {
  flex: 1 1 232px; min-width: 0; height: 52px; margin: 0; padding: 0 16px;
  border: 0; border-radius: 0;
  background: var(--paper); color: var(--ink); caret-color: var(--ink);
  font: 400 17px/1.4 var(--font-sans);
  transition: box-shadow 160ms var(--ease);
}
.notify input[type="email"]::placeholder { color: var(--muted); opacity: 1; }
.notify input[type="email"]:focus-visible { box-shadow: 0 0 0 2px var(--focus-ring); }
.notify-button { flex: 0 0 auto; min-height: 52px; }
.notify-hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; opacity: 0; }
.notify-msg { min-height: 21px; margin-top: 12px; font-size: 14px; line-height: 1.5; color: var(--seafoam); }

/* Error: the 3px coral rule under the field; the message stays Ivory. */
.notify[data-state="error"] input[type="email"] { box-shadow: inset 0 -3px 0 var(--coral); }
.notify[data-state="error"] input[type="email"]:focus-visible { box-shadow: inset 0 -3px 0 var(--coral), 0 0 0 2px var(--focus-ring); }
.notify[data-state="error"] + .notify-msg { color: var(--ivory); }
.notify[data-state="sending"] .notify-button { cursor: progress; opacity: .78; }

/* Done: a compact Mint panel with Ink text replaces the field and button. */
.notify-done { display: none; }
.notify[data-state="done"] > input[type="email"],
.notify[data-state="done"] > .notify-button { display: none; }
.notify[data-state="done"] .notify-done {
  display: inline-flex; align-items: center; gap: 12px;
  min-height: 52px; padding: 0 20px;
  background: var(--mint); color: var(--ink);
  font-size: 17px; line-height: 1.4;
}
.notify-done svg { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; }

@media (max-width: 1000px) {
  .notify-block { margin-top: 26px; }
}
@media (max-width: 520px) {
  .notify input[type="email"], .notify-button { flex: 1 1 100%; }
  .notify-button { justify-content: space-between; }
}

/* Tall screens: copy at the top over the open sea, the ship in its band below. */
@media (max-aspect-ratio: 13/10) {
  .hero--signup { grid-template-rows: auto minmax(calc(var(--band-h) + var(--band-bottom)), 1fr); }
  .hero--signup .hero-copy {
    align-self: start;
    padding-top: calc(var(--header-h) + clamp(24px, 4svh, 56px));
    padding-bottom: 24px;
  }
}

/* Short wide screens: keep the form near the fold. */
@media (max-height: 520px) and (min-aspect-ratio: 13/10) {
  .hero--signup h1 { font-size: min(clamp(var(--h1-floor), calc(var(--copy-room) / 12.6), var(--type-display)), 9.5svh); }
  .hero--signup .hero-copy { align-self: start; padding-top: calc(var(--header-h) + 12px); padding-bottom: 24px; }
  .hero-kicker { margin-bottom: 10px; }
  .notify-block { margin-top: 16px; }
}

/* Narrow wide screens (the folded Duo on its side, small phones in landscape) have no
   room for the copy and form beside the ship, so they use the stacked composition. */
@media (min-aspect-ratio: 13/10) and (max-width: 759px) {
  .hero--signup { grid-template-rows: auto minmax(calc(var(--band-h) + var(--band-bottom)), 1fr); --copy-room: 100vw; }
  .hero--signup .sea-layer-main {
    top: 0; right: 0; bottom: auto; left: 0; width: auto; height: var(--backdrop-h);
    --sea-x: 0%; --sea-y: 50%;
    -webkit-mask-image: none; mask-image: none;
  }
  .hero--signup .sea-layer-band {
    display: block; left: 0; right: 0; bottom: var(--band-bottom); height: var(--band-h);
    --sea-x: 100%; --sea-y: 50%;
    -webkit-mask-image: linear-gradient(180deg, transparent, black 22%, black 84%, transparent);
    mask-image: linear-gradient(180deg, transparent, black 22%, black 84%, transparent);
  }
  .hero--signup .hero-scrim { background: var(--scrim-hero-tall); }
  .hero--signup h1 { font-size: var(--type-display); max-width: 100%; }
  .hero--signup .hero-copy { align-self: start; padding-top: calc(var(--header-h) + 16px); padding-bottom: 24px; }
  .hero--signup .notify-block { width: min(560px, 100%); }
}

/* ---------- Closing: belief and vision ---------- */
.closing-kicker { margin-bottom: 14px; font-size: 14px; line-height: 1.4; color: var(--mist); }
.closing--belief h2 { max-width: 20ch; }
.closing-vision { max-width: 46ch; margin-top: 36px; }
.vision-line { color: var(--ivory); font-size: var(--type-lead); line-height: 1.6; }
/* Desktop: the vision sits beside the belief so the headline keeps the documented
   low position over the harbor (5.3:1 at the 95th percentile). */
@media (min-width: 1001px) {
  .closing--belief .closing-copy {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 40ch);
    gap: 40px 64px; align-items: end;
  }
  .closing--belief .closing-vision { margin-top: 0; }
}
@media (max-width: 1000px) {
  .closing-vision { margin-top: 28px; }
  .vision-line { font-size: 16px; line-height: 1.55; }
}