/* ══════════════════════════════════════════════════════════════════════
   ALTOQUANT — /download

   The same cream, the same ink, the same floating cards. One job: the
   waiting list.

   · The gate is ONE card. The answer lands INSIDE it, in the place your eye
     already is. Nothing is appended below, where a phone would never show it.
   · Status is TYPE, never a pill. The check marks the STATUS — the thing that
     actually succeeded — not a spam-folder footnote.
   · The email field is 16px. Below 16px, iOS zooms the whole page the instant
     the field takes focus, and the layout never recovers.
   · Hover belongs to things you can click. Nothing else lights up.
   ═════════════════════════════════════════════════════════════════════ */

:root{
  /* the one warm red on the site: refusals and bad input, nothing else */
  --warn-ink:#A32E22;
}

/* ══ THE PAGE ══════════════════════════════════════════════════════════
   Flat paper, edge to edge, and NO overflow:hidden. A clip here would cut the
   card's drop-shadow off at the section boundary and leave the footer sitting
   on a visibly different ground than the block above it. One cream, throughout. */
.gatepage{
  position:relative;min-height:100svh;display:flex;align-items:center;
  padding:calc(132px + env(safe-area-inset-top)) 0 clamp(56px,8vh,96px);
}
.gatepage .wrap{position:relative;z-index:1}
.gcols{
  display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  gap:clamp(36px,5vw,80px);align-items:center;
}
.gname{margin-left:-12px}

/* ── the left half: what you are actually getting ─────────────────────── */
.gsay h1{margin-top:22px;font-size:clamp(40px,5.2vw,74px);line-height:.95;letter-spacing:-.05em}
.gsay .say{max-width:48ch}
.needs{
  margin-top:clamp(28px,4vh,40px);
  display:flex;flex-direction:column;border-top:1px solid var(--rule-soft);
}
.needs li{
  padding:14px 0;border-bottom:1px solid var(--rule-soft);
  font-size:15.5px;line-height:1.55;color:var(--ink-2);
}
.needs b{font-weight:600;color:var(--ink)}

/* ══ THE GATE CARD ═════════════════════════════════════════════════════ */
.gate{
  background:#FFFDF9;border:1px solid var(--rule-soft);
  border-radius:var(--r-card);box-shadow:var(--float-lg);
  padding:clamp(26px,2.6vw,38px);
  scroll-margin-top:100px;      /* so scrollIntoView clears the floating header */
}
.panel h2{font-size:clamp(25px,2.4vw,33px);letter-spacing:-.04em;line-height:1.08}
.gp{margin-top:14px;font-size:15.5px;line-height:1.62;color:var(--ink-2)}
/* the address, said ONCE, in the sentence where it means something — set in the
   same mono as every other literal address on the site */
/* an address is not code — mono is for commands, paths and URLs only */
.wstrong{font-weight:600;color:var(--ink);overflow-wrap:anywhere}

/* ── where you stand ──────────────────────────────────────────────────── */
.who{
  display:flex;align-items:center;gap:11px;
  padding-bottom:16px;margin-bottom:22px;
  border-bottom:1px solid var(--rule-soft);
}
.st{flex:none;font-size:13.5px;font-weight:600;letter-spacing:-.01em}
.st.ok{color:var(--accent-ink)}
/* sent, but not yet confirmed — no check, because nothing has succeeded yet */
.st.wait{color:var(--ink-3)}

/* ── the field ────────────────────────────────────────────────────────── */
.gform{display:flex;gap:10px;margin-top:22px}
.gform input{
  flex:1 1 auto;min-width:0;height:52px;padding:0 15px;
  border:1px solid var(--rule);border-radius:var(--r);
  background:var(--paper);color:var(--ink);
  font:400 16px/1 var(--ui);letter-spacing:-.012em;
  outline:none;transition:border-color .2s var(--ease),background .2s var(--ease);
}
.gform input::placeholder{color:var(--ink-3)}
.gform input:hover{border-color:rgba(20,22,26,.26)}
.gform input:focus{border-color:var(--accent-ink);background:#fff}
.gform input[aria-invalid="true"]{border-color:var(--warn-ink)}
.gform .btn{flex:none}
.btn[disabled]{opacity:.55;cursor:default;transform:none}

/* ── the answers ──────────────────────────────────────────────────────── */
.gerr{
  margin-top:13px;font-size:14.5px;line-height:1.55;
  font-weight:500;color:var(--warn-ink);
}
/* an aside, on its own rule — NOT a second success signal */
.gnote{
  margin-top:22px;padding-top:18px;
  border-top:1px solid var(--rule-soft);
  font-size:14.5px;line-height:1.6;color:var(--ink-3);
}
.gnote code{font:inherit;font-weight:600;color:var(--accent-ink)}
/* a real tap target: 44px tall, whatever the type does */
.linkbtn{
  display:inline-flex;align-items:center;min-height:44px;margin-top:10px;
  padding:0;border:0;background:none;
  font:600 14.5px var(--ui);letter-spacing:-.012em;color:var(--ink-3);
  cursor:pointer;transition:color .2s;
}
.linkbtn:hover{color:var(--ink)}

/* ══ RESPONSIVE ════════════════════════════════════════════════════════ */
@media (max-width:980px){
  /* stop centring: on a short window the card must be free to grow downward */
  .gatepage{display:block;min-height:0;padding-top:calc(114px + env(safe-area-inset-top))}
  .gcols{grid-template-columns:minmax(0,1fr);gap:clamp(32px,5vh,48px)}
  .gsay h1{font-size:clamp(38px,8.4vw,56px)}
}
@media (max-width:760px){
  .gname{display:none}
  .gate{padding:24px 20px;border-radius:20px}
  /* the field and its button stack — both stay at 52px, well over the 44px floor */
  .gform{flex-direction:column;gap:10px}
  .gform .btn{width:100%}
}

/* ══ CALM ══════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion:reduce){
  .gform input,.btn,.linkbtn{transition-duration:.01ms !important}
}