/* ==========================================================================
   Instant Insurance — Waitlist
   --------------------------------------------------------------------------
   ARCHITECTURE
   The page is ONE fixed composition drawn on a design coordinate system.
   CSS owns the composition (what goes where, in design units).
   JS owns the scale (how big that composition is drawn on this screen).

   Every position below is expressed in design units via custom properties.
   A "layout mode" is nothing but a new set of values for those properties —
   there are no per-mode positional overrides scattered through the file, and
   no version patch sections. Change a number in one parameter block and the
   whole composition follows.

   SECTIONS
     1. Tokens
     2. Reset & root layout
     3. Animated background
     4. Stage (design coordinate system)
     5. Brand zone
     6. Phones
     7. Side phone content
     8. Center phone & form
     9. Success state
    10. Keyboard mode
    11. Layout modes (parameter sets)
    12. Reduced motion
   ========================================================================== */


/* 1. Tokens ============================================================== */

:root {
  /* Palette */
  --ink: #050505;
  --frame: #232323;
  --trigger: #2b2b2b;
  --accent: #0b7fae;
  --accent-deep: #08658b;
  --valid: #087a57;
  --error: #a3282b;
  --muted: #4a5563;

  /* Intrinsic logo ratios, so a box is never wider than its artwork */
  --ratio-wordmark: 710 / 429;
  --ratio-symbol: 126 / 130;
  --ratio-insidr: 178 / 183;
  --ratio-visionary: 846 / 918;

  /* Every phone, every mode, one ratio. Never overridden. */
  --phone-ratio: 9 / 19.5;

  /* ---- Runtime values, written only by script.js ---- */
  --scale: 1;      /* single composition scale */
  --scene-top: 0px;/* single vertical anchor */
  --lift: 0px;     /* single keyboard offset */
  --design-h: 780; /* measured at runtime from real content */
}


/* 2. Reset & root layout ================================================ */

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  background: #fff;
}

body {
  min-height: 100dvh;
  overflow: hidden;
  overscroll-behavior: none;
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI",
               "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  touch-action: manipulation;
}

button, input { font: inherit; color: inherit; }
button { -webkit-tap-highlight-color: transparent; }

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

.honeypot {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* The app is the only fixed root. Nothing else is fixed. */
.app {
  position: fixed;
  inset: 0;
  overflow: hidden;
}


/* 3. Animated background ================================================= */

/* Sized to the LAYOUT viewport by script.js so the ribbon keeps painting
   beneath Safari's translucent chrome. No overlay, no fade, no fake toolbar. */
.animated-background {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}


/* 4. Stage (design coordinate system) ==================================== */

.hero {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
}

/* The design box. Children are positioned in design units.
   Phones deliberately overflow its bottom edge; the hero clips them. */
.stage {
  position: absolute;
  left: 50%;
  top: var(--scene-top);
  width: calc(var(--design-w) * 1px);
  height: calc(var(--design-h) * 1px);
  transform: translate(-50%, calc(-1 * var(--lift))) scale(var(--scale));
  transform-origin: top center;
  transition: transform .3s cubic-bezier(.22, .8, .28, 1);
}


/* 5. Brand zone ========================================================== */

.brand-zone {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  opacity: 1;
  transition: opacity .28s ease;
}

.main-logo,
.partner-logo {
  position: absolute;
  display: block;
  height: auto;
}

.main-logo {
  left: 50%;
  top: calc(var(--brand-y) * 1px);
  width: calc(var(--brand-w) * 1px);
  aspect-ratio: var(--ratio-wordmark);
  transform: translateX(-50%);
}

/* Partner marks are locked to the centre line of the phone they sit above,
   which is derived, never hand-typed. They are links, so .brand-zone's
   pointer-events: none is re-armed here and nowhere else. */
.partner-logo {
  top: calc(var(--partner-y) * 1px);
  transform: translateX(-50%);
  pointer-events: auto;
  border-radius: 4px;
  filter: brightness(0);
  opacity: .88;
  transition: opacity .2s ease, transform .2s ease;
}

.partner-logo img {
  display: block;
  width: 100%;
  height: auto;
}

.partner-logo:hover,
.partner-logo:focus-visible {
  opacity: 1;
  transform: translateX(-50%) scale(1.05);
}

.partner-logo:focus-visible {
  outline: 3px solid rgba(11, 127, 174, .55);
  outline-offset: 6px;
}

.partner-left {
  left: calc((var(--side-inset) + var(--side-w) / 2) * 1px);
  width: calc(var(--partner-l-w) * 1px);
  aspect-ratio: var(--ratio-insidr);
}

.partner-right {
  left: calc((var(--design-w) - var(--side-inset) - var(--side-w) / 2) * 1px);
  width: calc(var(--partner-r-w) * 1px);
  aspect-ratio: var(--ratio-visionary);
}


/* 6. Phones ============================================================== */

.phone-group {
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* Width is the only free dimension. Height is always derived from the shared
   ratio, so a phone can scale but can never stretch. */
.phone {
  position: absolute;
  overflow: hidden;
  height: auto;
  aspect-ratio: var(--phone-ratio);
  background: #fff;
  border: calc(var(--frame-w) * 1px) solid var(--frame);
  border-radius: calc(var(--phone-radius) * 1px);
  box-shadow: 0 20px 50px rgba(20, 28, 38, .10),
              inset 0 0 0 1px rgba(255, 255, 255, .9);
}

.phone-left,
.phone-right {
  z-index: 1;
  width: calc(var(--side-w) * 1px);
  top: calc(var(--side-y) * 1px);
  opacity: 1;
  transition: opacity .28s ease;
}

.phone-left  { left: calc(var(--side-inset) * 1px); }
.phone-right { right: calc(var(--side-inset) * 1px); }

.phone-center {
  z-index: 3;
  left: 50%;
  top: calc(var(--center-y) * 1px);
  width: calc(var(--center-w) * 1px);
  transform: translateX(-50%);
  box-shadow: 0 25px 65px rgba(20, 28, 38, .16),
              0 8px 22px rgba(20, 28, 38, .08);
}

.speaker {
  position: absolute;
  z-index: 7;
  left: 50%;
  top: calc(var(--speaker-y) * 1px);
  width: 34%;
  max-width: calc(var(--speaker-w) * 1px);
  height: calc(var(--speaker-h) * 1px);
  transform: translateX(-50%);
  border-radius: 999px;
  background: #2e2e2e;
}

.phone-screen {
  position: absolute;
  inset: 0;
  background: #fff;
}


/* 7. Side phone content ================================================== */

/* The group is centred in the phone screen. On mobile the side phones are
   inset so that each phone's own centre line lands in the middle of the strip
   that stays visible beside the centre phone — so "centred in the phone" and
   "centred in the visible portion" are the same point by construction.
   See --side-inset in section 11. */
.side-content {
  position: absolute;
  left: 50%;
  top: calc(var(--side-content-y) * 1px);
  transform: translateX(-50%);
  display: grid;
  justify-items: center;
  gap: calc(var(--side-gap) * 1px);
}

.side-symbol {
  display: block;
  width: calc(var(--symbol-w) * 1px);
  height: auto;
  aspect-ratio: var(--ratio-symbol);
}

.side-message {
  margin: 0;
  font-size: calc(var(--side-font) * 1px);
  font-weight: 900;
  line-height: .88;
  letter-spacing: -.055em;
  text-align: left;
}


/* 8. Center phone & form ================================================= */

.center-screen {
  padding: calc(var(--screen-pad-top) * 1px) calc(var(--screen-pad-x) * 1px) 0;
  background: linear-gradient(180deg, #fff 0%, #fff 62%, #fbfcfd 100%);
}

.waitlist-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.phone-brand {
  display: block;
  width: calc(var(--phone-brand-w) * 1px);
  height: auto;
  aspect-ratio: var(--ratio-wordmark);
}

.launch-month {
  margin: calc(var(--month-top) * 1px) 0 0;
  font-size: calc(var(--month-size) * 1px);
  line-height: .92;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -.055em;
  white-space: nowrap;
}

.launch-copy {
  margin: calc(var(--copy-top) * 1px) 0 0;
  font-size: calc(var(--copy-size) * 1px);
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted);
}

.form-controls {
  width: 100%;
  margin-top: calc(var(--controls-top) * 1px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--controls-gap) * 1px);
}

/* --- Reveal field ------------------------------------------------------ */

.reveal-field {
  position: relative;
  width: calc(var(--field-w) * 1px);
  height: calc(var(--field-h) * 1px);
  flex: 0 0 calc(var(--field-h) * 1px);
}

.field-trigger,
.reveal-field input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 999px;
  /* 16px floor is what stops iOS from zooming the page on focus. */
  font-size: max(16px, calc(var(--field-font) * 1px));
}

.field-trigger {
  z-index: 2;
  border: 0;
  color: #fff;
  background: var(--trigger);
  cursor: pointer;
  transition: opacity .24s ease, transform .24s cubic-bezier(.2, .8, .2, 1),
              visibility 0s linear 0s;
}

/* visibility (not just opacity) keeps the hidden half of a field out of the
   tab order and out of the accessibility tree. */
.reveal-field input {
  z-index: 1;
  visibility: hidden;
  opacity: 0;
  transform: scale(.97);
  border: 1.8px solid var(--frame);
  padding: 0 calc(var(--field-h) * .8px) 0 calc(var(--field-h) * .38px);
  outline: none;
  background: #fff;
  transition: opacity .24s ease, transform .24s cubic-bezier(.2, .8, .2, 1),
              box-shadow .2s ease, visibility 0s linear .24s;
}

.reveal-field input::placeholder { color: #9aa4b0; }
.reveal-field input:focus-visible { box-shadow: 0 0 0 4px rgba(11, 127, 174, .16); }

.reveal-field.is-open .field-trigger {
  visibility: hidden;
  opacity: 0;
  transform: scale(.94);
  pointer-events: none;
  transition-delay: 0s, 0s, .24s;
}

.reveal-field.is-open input {
  visibility: visible;
  opacity: 1;
  transform: scale(1);
  transition-delay: 0s, 0s, 0s, 0s;
}

.valid-mark {
  position: absolute;
  z-index: 4;
  right: calc(var(--field-h) * .34px);
  top: 50%;
  transform: translateY(-50%) scale(.7);
  opacity: 0;
  color: var(--valid);
  font-size: calc(var(--field-font) * 1.1px);
  font-weight: 800;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}

.reveal-field.is-valid .valid-mark { opacity: 1; transform: translateY(-50%) scale(1); }

/* Already on the waitlist: mark the field that collided so the message has an
   obvious referent when both fields look perfectly well-formed. */
.reveal-field.is-duplicate input {
  border-color: var(--error);
  box-shadow: 0 0 0 3px rgba(163, 40, 43, .12);
}

/* --- Submit ------------------------------------------------------------ */

.submit-button {
  width: calc(var(--field-w) * 1px);
  height: calc(var(--field-h) * 1px);
  flex: 0 0 calc(var(--field-h) * 1px);
  border: 0;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(180deg, var(--accent) 0%, var(--accent-deep) 100%);
  font-size: max(15px, calc(var(--field-font) * 1px));
  font-weight: 600;
  cursor: pointer;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity .24s ease, transform .24s ease, filter .2s ease;
}

.waitlist-form.is-ready .submit-button {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.submit-button:disabled { cursor: default; filter: grayscale(.2) brightness(.94); }
.submit-button:focus-visible { outline: 3px solid rgba(11, 127, 174, .4); outline-offset: 3px; }

.form-status {
  width: calc(var(--field-w) * 1px);
  min-height: calc(var(--status-h) * 1px);
  margin: 0;
  color: var(--error);
  font-size: calc(var(--status-font) * 1px);
  line-height: 1.3;
}


/* 9. Success state ======================================================= */

.waitlist-form.is-joined .reveal-field,
.waitlist-form.is-joined .submit-button { display: none; }
.waitlist-form.is-joined .launch-copy { visibility: hidden; }

.waitlist-form.is-joined .form-status {
  display: grid;
  place-items: center;
  min-height: calc(var(--field-h) * 1.28px);
  padding: 0 calc(var(--field-h) * .3px);
  border: 1.5px solid rgba(11, 127, 174, .3);
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(34, 185, 219, .14), rgba(62, 113, 206, .12));
  color: #0c4668;
  font-size: calc(var(--joined-font) * 1px);
  font-weight: 700;
  letter-spacing: -.02em;
}

.success-follow {
  display: none;
  width: calc(var(--field-w) * 1px);
}

.waitlist-form.is-joined .success-follow {
  display: grid;
  justify-items: center;
  gap: calc(var(--controls-gap) * .82px);
  animation: followIn .42s cubic-bezier(.2, .8, .2, 1) both;
}

.success-follow-copy {
  margin: 0;
  color: var(--muted);
  font-size: calc(var(--status-font) * 1.05px);
  font-weight: 600;
  line-height: 1.25;
}

.follow-button {
  width: 100%;
  min-height: calc(var(--field-h) * .96px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--field-h) * .14px);
  padding: 0 calc(var(--field-h) * .2px);
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(180deg, var(--accent) 0%, var(--accent-deep) 100%);
  box-shadow: 0 10px 24px rgba(11, 127, 174, .22), inset 0 1px 0 rgba(255, 255, 255, .22);
  text-decoration: none;
  font-size: calc(var(--field-font) * .92px);
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  transition: transform .2s ease, box-shadow .2s ease;
}

.follow-button:hover { transform: translateY(-1px); }
.follow-button:active { transform: scale(.985); }
.follow-button:focus-visible { outline: 3px solid rgba(11, 127, 174, .4); outline-offset: 3px; }

/* Arrow out of the corner: this leaves the page. */
.follow-icon {
  width: calc(var(--field-h) * .34px);
  height: calc(var(--field-h) * .34px);
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@keyframes followIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* 10. Keyboard mode ====================================================== */

/* One mechanism only: fade the decoration, translate the whole stage by
   --lift. The scale and the coordinate system never change, so nothing has to
   be restored except the two values set here. */
[data-keyboard="open"] .brand-zone,
[data-keyboard="open"] .phone-left,
[data-keyboard="open"] .phone-right { opacity: 0; }

/* A faded link is still a link — take the partner marks out of reach while
   they are invisible. */
[data-keyboard="open"] .partner-logo { pointer-events: none; }


/* 11. Layout modes (parameter sets) ====================================== */

/* --- Laptop / desktop (default) ---------------------------------------- */
:root {
  --design-w: 1200;
  --scale-cap: 1.22;
  --pad-x: 14;
  --pad-y: 10;

  --brand-w: 280;
  --brand-y: 2;
  --partner-l-w: 84;
  --partner-r-w: 96;
  --partner-y: 160;

  --center-w: 330;
  --center-y: 178;
  --side-w: 305;
  --side-y: 272;
  --side-inset: 170;

  --frame-w: 6;
  --phone-radius: 48;
  --speaker-y: 20;
  --speaker-w: 104;
  --speaker-h: 13;

  --side-content-y: 70;
  --side-gap: 24;
  --symbol-w: 76;
  --side-font: 42;

  --screen-pad-top: 52;
  --screen-pad-x: 20;
  --phone-brand-w: 190;
  --month-top: 58;
  --month-size: 48;
  --copy-top: 9;
  --copy-size: 13;
  --controls-top: 26;
  --controls-gap: 11;
  --field-w: 270;
  --field-h: 52;
  --field-font: 16;
  --status-h: 18;
  --status-font: 12;
  --joined-font: 21;
  --stage-pad-bottom: 30;
}

/* --- Tablet ------------------------------------------------------------ */
@media (max-width: 1100px) {
  :root {
    --design-w: 860;
    --scale-cap: 1.15;

    --brand-w: 248;
    --brand-y: 2;
    --partner-l-w: 74;
    --partner-r-w: 84;
    --partner-y: 180;

    --center-w: 300;
    --center-y: 190;
    --side-w: 275;
    --side-y: 278;
    --side-inset: 42;

    --phone-radius: 44;
    --side-content-y: 64;
    --side-gap: 20;
    --symbol-w: 68;
    --side-font: 37;

    --screen-pad-top: 48;
    --phone-brand-w: 172;
    --month-top: 46;
    --month-size: 44;
    --controls-top: 22;
    --field-h: 54;
    --joined-font: 20;
    --stage-pad-bottom: 28;
  }
}

/* --- Mobile portrait ---------------------------------------------------
   --side-inset is DERIVED, not typed: it places each side phone so its own
   centre line sits at the centre of the strip left visible beside the centre
   phone.  strip = (design-w - center-w) / 2, so inset = strip/2 - side-w/2.
   Retune --center-w and the side phones re-centre themselves.             */
@media (max-width: 760px) {
  :root {
    --design-w: 430;
    --scale-cap: 1.06;
    --pad-x: 4;
    --pad-y: 4;

    --brand-w: 236;
    --brand-y: 4;
    --partner-l-w: 54;
    --partner-r-w: 60;
    --partner-y: 196;

    --center-w: 244;
    --center-y: 288;
    --side-w: 230;
    --side-y: 350;
    --side-inset: calc((var(--design-w) - var(--center-w)) / 4 - var(--side-w) / 2);

    --frame-w: 5;
    --phone-radius: 36;
    --speaker-y: 17;
    --speaker-w: 78;
    --speaker-h: 11;

    --side-content-y: 62;
    --side-gap: 16;
    --symbol-w: 50;
    --side-font: 20;

    --screen-pad-top: 42;
    --screen-pad-x: 10;
    --phone-brand-w: 152;
    --month-top: 38;
    --month-size: 37;
    --copy-top: 8;
    --copy-size: 11;
    --controls-top: 18;
    --controls-gap: 10;
    --field-w: 208;
    --field-h: 54;
    --field-font: 16;
    --status-h: 16;
    --status-font: 11;
    --joined-font: 18;
    --stage-pad-bottom: 24;
  }
}

/* --- Mobile portrait, compact (iPhone SE / 5-class widths) -------------
   Same composition, narrower design canvas: a 430-unit canvas on a 320 CSS px
   screen scales to 0.73, which drops the submit control under Apple's 44px
   minimum. Narrowing the canvas raises the scale instead of special-casing
   the control. Only the values that must move are restated.             */
@media (max-width: 380px) {
  :root {
    --design-w: 380;

    --brand-w: 200;
    --partner-l-w: 48;
    --partner-r-w: 54;
    --partner-y: 176;

    --center-w: 226;
    --center-y: 262;
    --side-w: 200;
    --side-y: 318;

    --side-content-y: 56;
    --side-gap: 13;
    --symbol-w: 42;
    --side-font: 17;

    --screen-pad-top: 38;
    --screen-pad-x: 8;
    --phone-brand-w: 132;
    --month-top: 22;
    --month-size: 32;
    --controls-top: 15;
    --controls-gap: 9;
    --field-w: 192;
    --field-h: 56;
    --status-font: 10;
    --joined-font: 16;
    --stage-pad-bottom: 20;
  }
}

/* --- Mobile landscape / short viewport --------------------------------- */
@media (orientation: landscape) and (max-height: 560px) {
  :root {
    --design-w: 820;
    --scale-cap: 1.1;
    --pad-x: 8;
    --pad-y: 4;

    --brand-w: 130;
    --brand-y: 0;
    --partner-l-w: 50;
    --partner-r-w: 56;
    --partner-y: 24;

    --center-w: 220;
    --center-y: 82;
    --side-w: 200;
    --side-y: 132;
    --side-inset: 108;

    --frame-w: 5;
    --phone-radius: 32;
    --speaker-y: 14;
    --speaker-w: 66;
    --speaker-h: 9;

    --side-content-y: 52;
    --side-gap: 12;
    --symbol-w: 44;
    --side-font: 25;

    --screen-pad-top: 26;
    --screen-pad-x: 10;
    --phone-brand-w: 110;
    --month-top: 8;
    --month-size: 26;
    --copy-top: 5;
    --copy-size: 10;
    --controls-top: 8;
    --controls-gap: 6;
    --field-w: 186;
    --field-h: 52;
    --field-font: 16;
    --status-h: 14;
    --status-font: 10;
    --joined-font: 16;
    --stage-pad-bottom: 12;
  }
}


/* 12. Reduced motion ===================================================== */

@media (prefers-reduced-motion: reduce) {
  .stage,
  .brand-zone,
  .phone-left,
  .phone-right,
  .field-trigger,
  .reveal-field input,
  .valid-mark,
  .submit-button,
  .partner-logo,
  .follow-button { transition-duration: .01ms; }

  .waitlist-form.is-joined .success-follow { animation: none; }
}