/* ══════════════════════════════════════════════════════════════════════════
   TurboGem waitlist — the MOBILE BUILD. Loads after waitlist.css on /waitlist/m/*.
   This is a separate build for phones and tablets, chosen by the host from the
   User-Agent, not a breakpoint: the layout below applies at every width.
   · The copy starts at the top, right under the header, one column; the gem is the
     backdrop behind it (as on the desktop), so the whole hero fits one screen.
   · One sticky action bar at the bottom (safe-area aware) — the button is
     always a thumb away; the in-flow button stays for keyboard and no-JS.
   · No hover fills, no cursor parallax; the draw-in and the sweep stay.
   · 16px inputs so iOS never zooms the page on focus.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  --gutter: 22px; --logo: 46px; --header-h: 68px;
  --h1: clamp(36px, 9vw, 58px); --h1-bold: clamp(34px, 8.6vw, 56px); --lede: clamp(17px, 4.2vw, 20px);
}
html { -webkit-text-size-adjust: 100%; }
body { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
.top-inner { padding-top: env(safe-area-inset-top); }
.top-link { font-size: 16px; }
.brand { min-height: 44px; }                         /* the logo link stays a thumb target however small the logo */

/* stage: copy at the top, the gem BEHIND it. On the mobile build the diamond is the page's
   backdrop: it fills the screen behind the headline and the form, exactly as it sits behind
   the copy on the desktop, and the text reads over it. One screen tall, room for the bar. */
.stage-inner {
  grid-template-columns: 1fr; gap: 0; align-items: start;
  padding: 26px var(--gutter) calc(96px + env(safe-area-inset-bottom));
  min-height: calc(100vh - var(--header-h) - 1px);
  min-height: calc(100svh - var(--header-h) - 1px);
}
.stage:not(.quiet) .stage-inner { align-items: start; padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
.gem-art { top: 0; bottom: 0; height: auto; transform: none !important; }
.gem-art svg {
  top: 50%; right: -26%; width: min(128vw, 720px); transform: translateY(-46%); opacity: .62;
}
.stage.quiet .gem-art svg { opacity: .5; }          /* the form: a touch quieter behind the fields */
.gem-art .halo .g { opacity: .2; }
.copy { transform: none !important; }
h1.hero { line-height: 1.06; margin-bottom: .45em; }
h1.hero .ln { display: inline; }
h1.hero br { display: none; }
.lede { margin-bottom: 1.5em; max-width: none; }
.cta { width: 100%; min-height: 54px; font-size: 17px; }
.fine { font-size: 12.5px; color: var(--ink-2); margin-top: 14px; }

/* form: the whole sign-up fits ONE phone screen — nothing to scroll while signing up.
   Paired fields side by side as on the desktop (name / name, title / company), a compact
   rhythm, 16px inputs (no iOS zoom), 44px targets. Measured by the device tour. */
.form { max-width: none; }
.stage.quiet .stage-inner { padding-top: 12px; }
.form h1.hero { font-size: clamp(28px, 7.4vw, 36px); margin-bottom: .22em; }
.form .lede { font-size: 15px; line-height: 1.35; margin-bottom: 12px; }
.row { grid-template-columns: 1fr 1fr; gap: 16px; }
.field { margin-bottom: 8px; }
.field label { font-size: 13px; margin-bottom: 0; }
.field input, .field textarea { font-size: 16px; padding: 4px 0 8px; min-height: 44px; text-overflow: clip; }   /* a thumb-sized target */
.field input::placeholder { text-overflow: ellipsis; }
/* Typing must not happen inside a transformed or composited ancestor: mobile WebKit misplaces
   the caret and repaints typed characters late (looks like the letters animate). The form
   fades in with no transform and keeps none after; the film-grain overlay (a fixed
   full-screen layer above the fields) is off on phones. */
form { animation-name: fade-in; transform: none !important; will-change: auto; }
@keyframes fade-in { to { opacity: 1; } }
body::after { display: none; }
.field textarea { min-height: 44px; }
.form .fine { font-size: 12px; margin-top: 2px; }
.form-error { margin: 6px 0 0; font-size: 13px; }
.rule { display: none; }                             /* the bar closes the page; no hairline below */
.btn-primary { height: 54px; font-size: 17px; margin-top: 8px; }
.form .lede { margin-bottom: 1.6em; }

/* the signed-up screen */
.done h2 { font-size: 36px; margin-bottom: 18px; }
.pos .num { font-size: 64px; }
.done p { font-size: 16px; }
.share { margin-top: 22px; }
.share-btn { width: 100%; }

/* sticky action bar: the whole reason this build exists */
.m-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 5;
  padding: 12px var(--gutter) calc(12px + env(safe-area-inset-bottom));
  background: linear-gradient(to top, rgba(7, 7, 9, .96) 70%, rgba(7, 7, 9, 0));
}
.m-bar .cta, .m-bar .btn-primary { width: 100%; margin: 0; }
/* one button per screen: on phones the bar is it; the in-flow twins hide */
.stage:not(.quiet) .copy > .cta, form > .btn-primary { display: none; }
.fine { margin-top: 0; }
.m-bar[hidden] { display: none; }
html.reserved .m-bar { display: none; }             /* gone once the spot is reserved */

.m-foot { padding: 24px var(--gutter) calc(110px + env(safe-area-inset-bottom)); text-align: center; }
.m-foot a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; color: var(--ink-3); font-size: 13px; text-decoration: none; }
.m-foot a + a { margin-left: 4px; }

/* no hover chrome, no parallax on touch */
.gem-art path.g { pointer-events: none !important; }
.gem-art path.g:hover { fill: none !important; }

/* tablets: the crest can be bigger, the form can have two columns again */
@media (min-width: 700px) {
  :root { --gutter: 40px; --logo: 60px; --header-h: 92px; --h1: clamp(44px, 6vw, 64px); }
  .stage-inner { padding-top: 40px; }
  .gem-art svg { width: min(96vw, 900px); right: -18%; top: 52%; transform: translateY(-50%); }
  .row { gap: 28px; }
  .field { margin-bottom: 20px; }
  .form h1.hero { font-size: var(--h1-bold); }
  .form .lede { font-size: var(--lede); }
  .form { max-width: 705px; }
  .cta, .share-btn { width: auto; }
  .m-bar { display: none; }                          /* a tablet reaches the in-flow button */
  .stage:not(.quiet) .copy > .cta { display: inline-flex; }
  form > .btn-primary { display: block; }
  .fine { margin-top: 14px; }
  .m-foot { padding-bottom: 32px; }
  .stage-inner, .stage:not(.quiet) .stage-inner { padding-bottom: 64px; }
}
/* wide, short tablets (landscape): little height is left under the copy, so the gem goes
   beside it instead, as on the desktop */
@media (min-width: 900px) and (orientation: landscape) {
  .stage:not(.quiet) .stage-inner { grid-template-columns: minmax(0, 56%) 1fr; padding-bottom: 48px; }
  .gem-art svg { top: 50%; right: -6%; width: min(52vw, 90vh); transform: translateY(-50%); opacity: .8; }
}
/* the smallest phones (4-inch, 568px tall): the form still fits one screen */
@media (max-height: 620px) {
  :root { --header-h: 58px; --logo: 40px; }
  .stage.quiet .stage-inner { padding-top: 6px; }
  .form h1.hero { font-size: 26px; }
  .form .lede { margin-bottom: 6px; }
  .field { margin-bottom: 4px; }
}
/* phones in landscape */
@media (max-height: 480px) {
  .stage-inner { padding-top: 18px; }
  .gem-art svg { opacity: .3; }
}