/* NewForm — Creative Production Calculator
   Ported from the Claude Design component "Creative Production Calculator.html".
   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:   #2A2A2E;
  --ed-mute:    #6B6B72;
  --ed-line:    rgba(14, 14, 16, .10);
  --ed-line-2:  rgba(14, 14, 16, .18);
  --ed-accent:  #5E2BFF;

  /* brand purple */
  --brand:       #901CF4;
  --brand-fg:    #FFFFFF;
  --brand-hover: #7617C8;
  --destructive: hsl(0 84.2% 60.2%);

  /* neutrals */
  --nf-gray-200: #E6E6E6;
  --nf-gray-300: #D9D9D9;
  --nf-gray-400: #B3B3B3;

  /* radius */
  --r-md:   6px;
  --r-lg:   8px;
  --r-2xl:  16px;
  --r-3xl:  24px;
  --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);
  --dur-1: 120ms;
  --dur-2: 200ms;
}

*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--nf-paper);
  color:var(--ed-ink);
  font-family:var(--font-sans);
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  position:relative;
}
/* signature purple radial, top-right */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(48% 42% at 88% 6%, rgba(94,43,255,.10), transparent 70%);
}
.wrap{position:relative;z-index:1;max-width:760px;margin:0 auto;padding:56px 24px 72px}

/* ---- header ---- */
.head{text-align:center;margin-bottom:40px}
.wordmark{height:26px;width:auto;margin:0 auto 28px;display:block;color:var(--ed-ink)}
.kicker{
  font-family:var(--font-mono);font-size:12px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ed-mute);display:inline-flex;align-items:center;gap:10px;margin-bottom:20px;white-space:nowrap;
}
.kicker .dot{width:7px;height:7px;border-radius:50%;background:var(--ed-accent)}
h1{
  font-family:var(--font-display);font-weight:400;font-size:50px;line-height:1.05;
  letter-spacing:-.025em;margin:0 0 22px;text-wrap:balance;max-width:14ch;margin-left:auto;margin-right:auto;
}
h1 .i{font-style:italic;color:var(--ed-accent)}
.sub{font-size:17px;line-height:1.5;color:var(--ed-ink-2);max-width:46ch;margin:0 auto;text-wrap:pretty}

/* ---- card ---- */
.card{
  background:var(--nf-white);
  border:1px solid var(--ed-line);
  border-radius:var(--r-3xl);
  box-shadow:var(--shadow-lg);
}

/* ---- lead form (inline in result panel) ---- */
.result-lock{max-width:400px;margin:0 auto;text-align:left}
.lock-ico{
  width:40px;height:40px;border-radius:var(--r-pill);display:grid;place-items:center;margin:0 auto 14px;
  background:rgba(144,28,244,.10);color:var(--brand);
}
.lock-ico svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.lock-sub{text-align:center;color:var(--ed-mute);font-size:14px;margin:0 0 22px}
.field{margin-bottom:18px}
.field label{display:block;font-size:13px;font-weight:500;margin-bottom:7px;color:var(--ed-ink)}
.field input{
  width:100%;height:44px;padding:0 14px;font:400 14px/1 var(--font-sans);color:var(--ed-ink);
  background:var(--nf-white);border:1px solid var(--ed-line-2);border-radius:var(--r-md);outline:none;
  transition:border-color var(--dur-2) var(--ease-std), box-shadow var(--dur-2) var(--ease-std);
}
.field input::placeholder{color:var(--nf-gray-400)}
.field input:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(144,28,244,.12)}
.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}

.btn{
  width:100%;height:46px;border:0;border-radius:var(--r-md);cursor:pointer;
  font:500 14px/1 var(--font-sans);display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--brand);color:var(--brand-fg);
  transition:background var(--dur-2) var(--ease-std);
}
.btn:hover{background:var(--brand-hover)}
.btn:disabled{opacity:.6;cursor:default}
.btn svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2}

/* ---- calculator ---- */
.calc{padding:40px}
.group{padding:26px 0;border-top:1px solid var(--ed-line)}
.group:first-child{padding-top:4px;border-top:0}
.glabel{
  display:flex;align-items:center;gap:9px;
  font-family:var(--font-mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--ed-mute);
  margin-bottom:16px;
}
.glabel svg{width:15px;height:15px;stroke:var(--brand);fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}

/* spend slider */
.spend-top{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:16px}
.spend-top .t{font-size:15px;font-weight:500}
.spend-val{font-family:var(--font-mono);font-weight:500;font-size:30px;letter-spacing:-.01em;color:var(--ed-ink)}
input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:99px;outline:none;
  background:linear-gradient(90deg,var(--brand) var(--pct,30%),var(--nf-gray-200) var(--pct,30%));
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:22px;height:22px;border-radius:50%;cursor:pointer;
  background:var(--nf-white);border:2px solid var(--brand);box-shadow:var(--shadow-md);
}
input[type=range]::-moz-range-thumb{
  width:22px;height:22px;border-radius:50%;cursor:pointer;
  background:var(--nf-white);border:2px solid var(--brand);box-shadow:var(--shadow-md);
}
.ends{display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:11px;color:var(--ed-mute);margin-top:10px;letter-spacing:.04em}

/* option cards */
.opts{display:grid;gap:10px}
.opts.c3{grid-template-columns:repeat(3,1fr)}
.opts.c2{grid-template-columns:repeat(2,1fr)}
.opt{
  text-align:left;border:1.5px solid var(--ed-line-2);background:var(--nf-white);border-radius:var(--r-lg);
  padding:14px 15px;cursor:pointer;transition:border-color var(--dur-1) var(--ease-std),background var(--dur-1) var(--ease-std);
  display:flex;flex-direction:column;gap:3px;
}
.opt:hover{border-color:rgba(144,28,244,.45)}
.opt.on{border-color:var(--brand);background:rgba(144,28,244,.05)}
.opt .ot{font-size:14px;font-weight:500;color:var(--ed-ink);display:flex;align-items:center;justify-content:space-between}
.opt .ot .chk{width:15px;height:15px;border-radius:50%;border:1.5px solid var(--nf-gray-300);flex-shrink:0;display:grid;place-items:center}
.opt.on .ot .chk{border-color:var(--brand);background:var(--brand)}
.opt.on .ot .chk::after{content:"";width:5px;height:5px;border-radius:50%;background:#fff}
.opt .od{font-family:var(--font-mono);font-size:11px;letter-spacing:.03em;color:var(--ed-mute);line-height:1.35}

/* result */
.result{
  margin-top:30px;border-radius:var(--r-2xl);padding:36px 28px;text-align:center;
  background:linear-gradient(165deg, rgba(144,28,244,.07), rgba(94,43,255,.04));
  border:1px solid rgba(144,28,244,.14);
}
.result .rlab{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ed-mute);max-width:34ch;margin:0 auto 14px;line-height:1.5}
.result .rnum{
  font-family:var(--font-display);font-weight:400;font-size:84px;line-height:.92;letter-spacing:-.03em;color:var(--ed-ink);
  transition:opacity var(--dur-2) var(--ease-std);
}
.result .runit{font-family:var(--font-mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ed-accent);margin-top:14px}
.result.locked .result-unlocked{display:none}
.result:not(.locked) .result-locked{display:none}

.foot{text-align:center;margin-top:26px;font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ed-mute)}

@media (max-width:560px){
  h1{font-size:38px}
  .calc{padding:28px 20px}
  .opts.c3,.opts.c2{grid-template-columns:1fr}
  .result .rnum{font-size:64px}
}