/* Apply form — on the Site Changes design system.
   Tokens match the two proposal docs exactly so this page and the site land in
   the same place; anything added here is noted as such. */

:root{
  /* Grounds */
  --ink:#0A0A0A; --ink-2:#111111; --ink-3:#161616;
  --paper:#F4F3F1; --paper-2:#E7E5E1;

  /* Type on ink */
  --hi:#F4F3F1;
  --mid:rgba(244,243,241,0.58);
  --low:rgba(244,243,241,0.38);
  --line:rgba(244,243,241,0.12);
  --line-2:rgba(244,243,241,0.22);

  /* Type on paper */
  --p-mid:rgba(10,10,10,0.60); --p-low:rgba(10,10,10,0.40);
  --p-line:rgba(10,10,10,0.12); --p-line-2:rgba(10,10,10,0.22);

  /* Accent. Vermilion is the only one: neon was dropped from the system on
     27 Sep 2026, so progress and selection are vermilion too. A vermilion
     ground carries white type. */
  --accent:oklch(0.64 0.21 27);

  --edge:clamp(20px,5vw,84px);
  --ease:cubic-bezier(.22,.61,.36,1);

  /* Local to this page. */
  --accent-soft:oklch(0.64 0.21 27 / 0.14);
  /* Radii, straight off the docs: anything interactive or label-like is a
     999px pill, cards sit at 14px, inputs 12px, the shell at 22px. 8-10px
     everywhere was what made this read as square. */
  --r-pill:999px; --r-shell:22px; --r-card:14px; --r-input:12px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  background:#050505;color:var(--hi);
  font-family:'Manrope',system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;display:flex;padding:26px 16px;
}

/* The one type rule that carries the whole system: every label, eyebrow, figure
   and tag is Fjalla One, always uppercase. It replaced JetBrains Mono, which
   was doing this job in a face never meant for it. */
.fj,.eyebrow,.sub,.fld > span,.daymark,.slots > button,.recap span,.foot,.hint{
  font-family:'Fjalla One','Manrope',sans-serif;
  text-transform:uppercase;
  font-weight:400;
}

button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
input,select{font:inherit;color:inherit;background:none;border:none;outline:none;width:100%}
[hidden]{display:none !important}
::selection{background:var(--accent);color:#FFFFFF}

.wrap{
  width:min(560px,100%);margin:auto;
  background:var(--ink);border:1px solid var(--line);border-radius:var(--r-shell);
  padding:30px 34px 26px;display:flex;flex-direction:column;
}

/* ── header ───────────────────────────────── */
.top{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:28px}
.mark{
  width:38px;height:38px;border-radius:var(--r-input);background:var(--ink-3);
  border:1px solid var(--line);display:grid;place-items:center;flex:none;
}
.mark img{width:19px;height:auto;display:block}

/* Progress is the one thing on the panel your eye should catch when it moves. */
.steps{display:flex;gap:5px}
.steps i{
  width:22px;height:3px;border-radius:99px;background:rgba(244,243,241,0.12);
  transition:background .3s var(--ease);display:block;
}
.steps i.done{background:rgba(244,243,241,0.34)}
.steps i.on{background:var(--accent);box-shadow:0 0 12px rgba(241,69,63,.45)}

/* ── steps ────────────────────────────────── */
.step{display:none;animation:in .3s var(--ease)}
.step.on{display:block}
@keyframes in{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.step{animation:none}}

.eyebrow{font-size:11px;letter-spacing:.22em;color:var(--low)}

/* Manrope keeps the headline, but the weight gap widens to 200 against 700 —
   the docs lean on that contrast rather than on size alone. */
h1,.h1{font-size:clamp(27px,6vw,34px);font-weight:200;letter-spacing:-0.03em;line-height:1.1;margin:11px 0 0}
h1 b,.h1 b{font-weight:700}
h1 .dot,.h1 .dot{color:var(--accent)}

.lede{
  font-size:13.5px;font-weight:300;line-height:1.62;color:var(--mid);
  margin-top:12px;text-wrap:pretty;
}

/* The label the whole redesign started from. Fjalla at 11px caps with .2em
   tracking reads as a deliberate section marker; the same words in Manrope 500
   at 36% opacity read as something that failed to load. */
.sub{
  font-size:11px;letter-spacing:.2em;color:var(--mid);
  margin:30px 0 13px;display:flex;align-items:center;gap:11px;
}
.sub::after{content:"";flex:1;height:1px;background:var(--line)}

/* ── fields ───────────────────────────────── */
.fld{display:flex;flex-direction:column;gap:8px;margin-top:20px}
.fld > span{font-size:11px;letter-spacing:.16em;color:var(--low)}
.fld > span em{font-style:normal;color:rgba(244,243,241,0.22);letter-spacing:.1em}
.fld input,.fld select{
  background:var(--ink-3);border:1px solid var(--line);border-radius:var(--r-input);
  padding:13px 14px;font-size:14.5px;transition:border-color .2s var(--ease),background .2s var(--ease);
}
.fld input:focus,.fld select:focus{border-color:var(--line-2);background:#191919}
.fld input::placeholder{color:rgba(244,243,241,0.24)}
.fld select{cursor:pointer}
.fld select option{background:var(--ink-3);color:var(--hi)}
.fld .hint{font-size:10px;letter-spacing:.14em;color:var(--low);line-height:1.6}
.fld.bad input,.fld.bad select{border-color:var(--accent)}
.pairfld{display:grid;grid-template-columns:118px 1fr;gap:12px;align-items:end}

/* ── choice cards ─────────────────────────── */
.choices{display:flex;flex-direction:column;gap:9px;margin-top:22px}
.choices.tight{gap:7px;margin-top:0}
.choices button{
  text-align:left;background:var(--ink-3);border:1px solid var(--line);
  border-radius:var(--r-card);padding:15px 17px;
  transition:border-color .2s var(--ease),background .2s var(--ease);
  display:flex;align-items:center;gap:13px;
}
.choices.tight button{padding:12px 15px}
.choices button:hover{border-color:var(--line-2);background:#191919}

/* Selected: a vermilion edge over a soft vermilion wash. */
.choices button.on{border-color:var(--accent);background:var(--accent-soft)}
.choices button .tick{
  width:17px;height:17px;border-radius:99px;border:1px solid var(--line-2);
  flex:none;display:grid;place-items:center;transition:.2s var(--ease);
}
.choices button.on .tick{border-color:var(--accent);background:var(--accent)}
.choices button.on .tick::after{content:"";width:5px;height:5px;border-radius:99px;background:#FFFFFF}
.choices button .txt{min-width:0}
.choices button .txt b{display:block;font-size:14.5px;font-weight:600;letter-spacing:-0.01em}
.choices button .txt span{display:block;font-size:12px;color:var(--low);margin-top:4px;line-height:1.45}
.choices button.on .txt span{color:var(--mid)}

/* ── slots ────────────────────────────────── */
.slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:8px;margin-top:22px}
/* Direct children only. The no-calendar fallback renders full-width choice
   cards inside this same container, and those are cards (14px), not time
   pills — without the child combinator this rule captured them too. */
.slots > button{
  background:var(--ink-3);border:1px solid var(--line);border-radius:var(--r-pill);
  padding:12px 14px;font-size:12px;letter-spacing:.08em;text-align:center;
  transition:.2s var(--ease);
}
.slots > button:hover{border-color:var(--line-2);background:#191919}
.slots > button.on{border-color:var(--accent);background:var(--accent-soft);color:var(--hi)}
.slots .daymark{
  grid-column:1/-1;font-size:10.5px;letter-spacing:.2em;
  color:var(--low);margin-top:10px;display:flex;align-items:center;gap:11px;
}
.slots .daymark::after{content:"";flex:1;height:1px;background:var(--line)}
.slots .daymark:first-child{margin-top:0}
.slotnote{
  margin-top:20px;padding:14px 16px;background:var(--ink-3);
  border:1px solid var(--line);border-radius:var(--r-card);
  font-size:12.5px;line-height:1.6;color:var(--mid);
}

/* ── recap ────────────────────────────────── */
.recap{margin-top:24px;display:flex;flex-direction:column;gap:1px}
.recap div{
  display:grid;grid-template-columns:138px 1fr;gap:14px;
  padding:11px 0;border-bottom:1px solid rgba(244,243,241,0.06);
  font-size:13.5px;align-items:baseline;
}
.recap div:last-child{border-bottom:none}
.recap span{font-size:10.5px;letter-spacing:.16em;color:var(--low)}

/* ── nav ──────────────────────────────────── */
.nav{display:flex;align-items:center;gap:10px;margin-top:30px}
.nav .spacer{flex:1}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  font-size:13px;font-weight:600;letter-spacing:-0.01em;
  padding:13px 24px;border-radius:var(--r-pill);
  border:1px solid var(--line);background:var(--ink-3);color:var(--mid);
  transition:.2s var(--ease);white-space:nowrap;
}
.btn:hover{border-color:var(--line-2);color:var(--hi);background:#191919}
.btn.pri{background:var(--accent);border-color:transparent;color:#FFFFFF}
.btn.pri:hover{filter:brightness(1.1);color:#FFFFFF;background:var(--accent)}
.btn.ghost{background:transparent;border-color:transparent;color:var(--low)}
.btn.ghost:hover{color:var(--hi);background:transparent}
.btn:disabled{opacity:.45;cursor:not-allowed}

.err{
  margin-top:20px;font-size:12.5px;line-height:1.55;color:var(--accent);
  background:var(--accent-soft);border:1px solid var(--accent);
  border-radius:var(--r-card);padding:12px 14px;
}

.foot{
  margin-top:28px;text-align:center;
  font-size:10px;letter-spacing:.22em;color:rgba(244,243,241,0.22);
}

/* Honeypot: off-screen rather than display:none, because some bots skip
   anything that is not rendered. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

@media (max-width:520px){
  body{padding:0}
  .wrap{border:none;border-radius:0;min-height:100vh;padding:24px 20px}
  .pairfld{grid-template-columns:100px 1fr}
}

/* ── reach us directly ────────────────────────
   For people who would rather call or email than fill in six steps. Sits under
   the form, inside the shell, so it is on every step including the last. */
.reach{
  margin-top:26px;padding-top:20px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 22px;
}
.reach .rl{
  font-family:'Fjalla One','Manrope',sans-serif;text-transform:uppercase;
  font-size:10.5px;letter-spacing:.2em;color:var(--low);
}
.reach a{font-size:15px;font-weight:500;color:var(--hi);text-decoration:none;transition:color .2s var(--ease)}
.reach a:hover{color:var(--accent)}

/* What this form is, named at the top of every step. It is an assessment of
   the business, not a request for a sales call. */
.brand{display:flex;align-items:center;gap:12px;min-width:0}
.formname{
  font-family:'Fjalla One','Manrope',sans-serif;text-transform:uppercase;
  font-size:11px;letter-spacing:.2em;color:var(--mid);white-space:nowrap;
}