/* ============================================================
   Alvenra — landing (placeholder) styles
   Shares the design language of the /preview app: same tokens,
   same card / form / CTA treatment, on a full-page starfield.
   ============================================================ */
:root{
  --bg:        #06090f;
  --bg-2:      #0a1018;
  --panel:     rgba(255,255,255,0.035);
  --border:    rgba(159,214,223,0.16);
  --text:      #e8ecef;
  --text-dim:  #8fa3ad;
  --accent:    #6fb6c4;
  --accent-2:  #9fd6df;
  --radius:    14px;
  --sans: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html,body{ background:var(--bg); color:var(--text); font-family:var(--sans); -webkit-font-smoothing:antialiased; }
body{
  background:
    radial-gradient(120% 90% at 50% -10%, #10202e 0%, var(--bg-2) 42%, var(--bg) 100%);
  min-height:100vh; min-height:100dvh; line-height:1.6;
}
a{ color:var(--accent-2); }
img{ max-width:100%; }

/* ---------- full-page starfield ---------- */
#starfield{
  position:fixed; inset:0; width:100%; height:100%;
  z-index:0; pointer-events:none; display:block;
}

/* ---------- layout ---------- */
main{
  position:relative; z-index:1;
  max-width:600px; margin:0 auto; padding:64px 24px 96px;
  display:flex; flex-direction:column; align-items:stretch;
}
.stack > * + *{ margin-top:26px; }

/* ---------- header / brand ---------- */
.hero{ text-align:center; }
/* live cymatic ornament — the same header loop as the /preview page, just larger.
   A square flex box keeps the circular pattern perfectly round (the engine centres
   a min(w,h) disk, so a non-square box would letterbox it and look skewed). */
.ornament{
  width:min(58vw,240px); aspect-ratio:1/1; margin:0 auto 18px;
  display:flex; align-items:center; justify-content:center;
}
.ornament canvas{ width:100%; height:100%; display:block; }
.brand h1{
  font-size:clamp(48px, 10vw, 84px); font-weight:600; letter-spacing:0.06em; line-height:1.05;
  background:linear-gradient(180deg,#f3f8fa, #9fd6df 130%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.brand .subtitle{
  margin-top:10px; font-size:clamp(16px,2.8vw,20px); color:var(--accent-2);
  letter-spacing:0.03em; font-weight:400;
}

.lede{ font-size:17px; color:#d3dde2; text-align:center; }
.body-text{ color:var(--text-dim); font-size:15.5px; }

/* margin-bottom is 0 because .stack already adds 26px above the next item (no
   margin-collapsing in the flex container) — this keeps the gaps symmetric. */
.divider{ height:1px; background:linear-gradient(90deg,transparent,var(--border),transparent); border:0; margin:26px 0 0; }

/* ---------- signup form ---------- */
.signup-intro{ text-align:center; color:#d3dde2; font-size:15.5px; }

.card{
  background:var(--panel); border:1px solid var(--border); border-radius:var(--radius);
  padding:26px 24px; backdrop-filter:blur(8px);
}
.field{ margin-bottom:18px; }
.field.last{ margin-bottom:0; }
.field label{ display:block; font-size:13.5px; color:var(--accent-2); margin-bottom:8px; letter-spacing:0.02em; }
.field input[type=text],
.field input[type=email]{
  width:100%; background:rgba(4,9,14,0.6); border:1px solid var(--border); border-radius:10px;
  color:var(--text); font-family:var(--sans); font-size:15px; padding:12px 14px;
  transition:border-color .2s, box-shadow .2s;
}
.field input:focus{
  outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(111,182,196,0.14);
}
.checkbox{ display:flex; align-items:flex-start; gap:11px; margin:4px 0 22px; cursor:pointer; }
.checkbox input{ margin-top:3px; width:17px; height:17px; accent-color:var(--accent); flex:none; }
.checkbox span{ font-size:14px; color:var(--text-dim); }

.cta{
  display:block; width:100%; padding:15px 20px; border:0; border-radius:12px; cursor:pointer;
  font-family:var(--sans); font-size:16px; font-weight:600; letter-spacing:0.03em; color:#04121a;
  text-align:center; text-decoration:none;
  background:linear-gradient(135deg,#9fd6df,#5fa9bf);
  transition:transform .15s ease, box-shadow .25s ease, opacity .2s;
  box-shadow:0 10px 30px -12px rgba(95,169,191,0.7);
}
.cta:hover{ transform:translateY(-1px); box-shadow:0 14px 34px -12px rgba(95,169,191,0.85); }
.cta:active{ transform:translateY(0); }
.cta:disabled{ opacity:0.6; cursor:default; transform:none; box-shadow:none; }

.form-note{ font-size:13px; color:var(--text-dim); margin-top:14px; text-align:center; min-height:18px; }
/* while empty it must not reserve space — otherwise the gap below the privacy
   note is larger than the card's top padding. It appears only when it has text. */
.form-note:empty{ display:none; }
.form-note.error{ color:#e8886f; }
.form-note.ok{ color:var(--accent-2); }
/* match the gap above the button (checkbox's 22px bottom margin) */
.privacy-note{ font-size:12.5px; line-height:1.5; color:var(--text-dim); opacity:0.8; text-align:center; margin-top:22px; }

/* honeypot — visually hidden but present for bots to trip on */
.hp-field{ position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }

/* revealed after a successful submit */
.thanks{ text-align:center; }
.thanks .section-title{ font-size:clamp(22px,4vw,28px); font-weight:600; color:#eaf3f5; line-height:1.35; }

.foot{ margin-top:40px; text-align:center; font-size:12.5px; color:var(--text-dim); opacity:0.7; }