/* NewForm — Lead Magnet Form (Creative Testing Blueprint)
   Ported from the Claude Design component "Lead Magnet Form.dc.html", option 1a
   ("Paper · light form"). Tokens lifted from the NewForm design system
   (colors_and_type.css). */

/* ---- Local webfonts (shipped in /fonts) ---- */
@font-face {
  font-family: "Rethink Sans";
  src: url("fonts/RethinkSans-VariableFont_wght.ttf") format("truetype-variations");
  font-weight: 400 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/JetBrainsMono-Regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/JetBrainsMono-Medium.ttf") format("truetype");
  font-weight: 500; font-style: normal; font-display: swap;
}

:root {
  /* families */
  --font-display: "Newsreader", "Fraunces", Georgia, serif;
  --font-sans:    "Rethink Sans", "Geist", -apple-system, "Helvetica Neue", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, Menlo, monospace;

  /* paper / ink (editorial) */
  --nf-paper:   #F6F4EF;
  --nf-white:   #FFFFFF;
  --ed-ink:     #0E0E10;
  --ed-ink-2:   #3A3A40;
  --ed-mute:    #6B6B72;
  --ed-faint:   #9A978F;
  --ed-line:    rgba(14, 14, 16, .10);
  --ed-line-2:  rgba(14, 14, 16, .16);
  --ed-accent:  #5E2BFF;

  /* brand */
  --brand-grad: linear-gradient(90deg, #901CF4 0%, #FF00FF 100%);
  --destructive: hsl(0 84.2% 60.2%);

  /* neutrals */
  --nf-gray-400: #A8A49B;

  /* radius */
  --r-md:   10px;
  --r-card: 14px;
  --r-pill: 999px;

  /* elevation */
  --shadow-md: 0 4px 8px rgba(14, 14, 16, .06), 0 2px 4px rgba(14, 14, 16, .04);
  --shadow-lg: 0 10px 24px rgba(14, 14, 16, .08), 0 4px 8px rgba(14, 14, 16, .04);

  /* motion */
  --ease-std: cubic-bezier(.4, 0, .2, 1);
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --dur-1: 120ms;
  --dur-2: 200ms;
}

*{box-sizing:border-box}
html,body{margin:0}
body{
  background:#E8E5DE;
  color:var(--ed-ink);
  font-family:var(--font-sans);
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}

@keyframes nfPop { 0%{transform:scale(.6);opacity:0} 60%{transform:scale(1.08)} 100%{transform:scale(1);opacity:1} }
@keyframes nfRise { from{transform:translateY(10px);opacity:0} to{transform:translateY(0);opacity:1} }

/* ---- stage: centers the card ---- */
.stage{
  min-height:100vh;
  display:flex;align-items:center;justify-content:center;
  padding:48px 24px 72px;
}

/* ---- split card (1a) ----
   Scales fluidly with the viewport: sized in vw (80.5vw × 62% aspect matches
   the design's 1160×720 at the 1440 reference), capped so it never outgrows
   the viewport height, with type/padding on matching clamp() ramps below. */
.split{
  width:min(88vw, 1720px);
  min-height:min(clamp(560px, 54.5vw, 1070px), calc(100vh - 120px));
  display:flex;
  border-radius:var(--r-card);overflow:hidden;
  box-shadow:var(--shadow-lg);background:var(--nf-white);
}

/* ---- left copy panel ---- */
.pane-copy{
  flex:1;background:var(--nf-paper);
  padding:clamp(44px, 5vw, 104px) clamp(40px, 4.5vw, 96px);
  display:flex;flex-direction:column;
  position:relative;
}
.pane-copy::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 90% at 100% 0%, rgba(94,43,255,.10), transparent 55%);
}
.logo-row{display:flex;align-items:center;gap:10px;position:relative}
.logo-mark{width:22px;height:22px;border-radius:6px;background:var(--brand-grad);display:inline-block}
.logo-word{font-family:var(--font-mono);font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--ed-ink)}

.hero{flex:1;display:flex;flex-direction:column;justify-content:center;position:relative}
h1{
  font-family:var(--font-display);font-weight:400;font-size:clamp(46px, 5.15vw, 104px);line-height:.98;
  letter-spacing:-.03em;margin:0 0 .35em;color:var(--ed-ink);
}
h1 .i{font-style:italic;color:var(--ed-accent)}
.sub{font-size:clamp(17px, 1.4vw, 28px);line-height:1.5;color:var(--ed-ink-2);max-width:30ch;margin:0;text-wrap:pretty}
.sub em{font-style:italic}

/* ---- right form panel ---- */
.pane-form{
  width:clamp(360px, 32.5vw, 640px);flex-shrink:0;background:var(--nf-white);
  padding:clamp(44px, 5vw, 104px) clamp(36px, 3.9vw, 84px);
  display:flex;flex-direction:column;justify-content:center;
  border-left:1px solid rgba(14,14,16,.08);
}

#leadForm{display:flex;flex-direction:column}
h2{
  font-family:var(--font-display);font-weight:400;font-size:clamp(27px, 2.25vw, 44px);
  letter-spacing:-.02em;margin:0 0 8px;color:var(--ed-ink);
}
.form-sub{font-size:clamp(14px, 1.05vw, 20px);color:var(--ed-mute);margin:0 0 clamp(24px, 2.25vw, 44px)}

.field{margin-bottom:14px}
.field label{
  display:block;font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ed-mute);margin-bottom:8px;
}
.field label .opt-tag{color:var(--ed-faint);text-transform:none;letter-spacing:.06em}
.field input{
  width:100%;padding:clamp(12px, 1vw, 18px) 16px;
  border:1px solid var(--ed-line-2);border-radius:var(--r-md);
  background:var(--nf-white);
  font-family:var(--font-sans);font-size:clamp(16px, 1.15vw, 20px);color:var(--ed-ink);
  transition:border-color .15s, box-shadow .15s;
}
.field input::placeholder{color:var(--nf-gray-400)}
.field input:focus{outline:none;border-color:var(--ed-accent);box-shadow:0 0 0 3px rgba(94,43,255,.14)}
.field input.err{border-color:var(--destructive)}
.field .msg{font-family:var(--font-mono);font-size:11px;letter-spacing:.02em;color:var(--destructive);margin-top:6px;min-height:13px}
.msg{font-family:var(--font-mono);font-size:11px;letter-spacing:.02em;color:var(--destructive)}

.btn{
  width:100%;padding:clamp(14px, 1.15vw, 20px);margin-top:8px;border:none;border-radius:var(--r-md);cursor:pointer;
  background:var(--ed-ink);color:#fff;
  font-family:var(--font-sans);font-weight:500;font-size:clamp(16px, 1.15vw, 20px);
  transition:background .15s;
}
.btn:hover{background:var(--ed-accent)}
.btn:disabled{opacity:.6;cursor:default}
.footnote{font-size:13px;color:var(--ed-faint);text-align:center;margin:18px 0 0}

/* ---- success state ---- */
.done{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  animation:nfRise .4s var(--ease-out);
}
.done[hidden]{display:none}
.done-ico{
  width:64px;height:64px;border-radius:var(--r-pill);background:var(--brand-grad);
  display:flex;align-items:center;justify-content:center;margin-bottom:28px;
  animation:nfPop .45s var(--ease-out);
}
.done h2{font-size:clamp(30px, 2.5vw, 48px);margin:0 0 12px}
.done p{font-size:clamp(15px, 1.1vw, 20px);line-height:1.5;color:var(--ed-mute);max-width:26ch;margin:0}
.done-link{margin-top:28px;text-decoration:none;text-align:center}
.done-link[hidden]{display:none}

.privacy-link{
  position:fixed;right:16px;bottom:16px;z-index:50;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ed-mute);text-decoration:none;
  padding:8px 12px;border-radius:var(--r-pill);
  background:var(--nf-white);border:1px solid var(--ed-line);
  box-shadow:var(--shadow-md);transition:color var(--dur-2) var(--ease-std),border-color var(--dur-2) var(--ease-std);
}
.privacy-link:hover{color:var(--ed-ink);border-color:var(--ed-line-2)}

/* ---- responsive ---- */
@media (max-width:980px){
  .split{flex-direction:column;min-height:0}
  .pane-copy{padding:56px 40px}
  .hero{padding:40px 0 48px}
  h1{font-size:54px}
  .pane-form{width:100%;border-left:0;border-top:1px solid rgba(14,14,16,.08);padding:56px 40px}
}
@media (max-width:560px){
  .stage{padding:24px 16px 64px}
  .pane-copy{padding:44px 28px}
  .pane-form{padding:44px 28px}
  h1{font-size:42px}
  .sub{font-size:17px}
  .stats{gap:28px}
}