/* ============================================================
   f2f-kit — page.css
   Page-specific styles for the AI Starter Kit home.
   Every value from tokens.css (F2F Web Standard §7.3).
   ============================================================ */

/* — hero meta unit stays small next to the big numeral — */
.hero-meta .unit{font-size:var(--step-0)}

/* — section 02 prose (why free) — */
#why p{font-size:var(--step-1);line-height:var(--lead-snug);color:var(--ink-soft);margin-bottom:var(--space-m)}
#why .byline{font-size:var(--step-0);line-height:var(--lead-body);color:var(--muted)}

/* — the form (MailerLite capture) — */
.form-block{max-width:34rem}
#kit-form{display:grid;gap:var(--space-s)}
.field{display:grid;gap:var(--space-3xs)}
.field label{
  font-family:var(--font-grotesk);font-size:var(--step--1);font-weight:500;
  letter-spacing:var(--track-label);text-transform:uppercase;color:var(--ink-soft);
}
.field input{
  font-family:var(--font-sans);font-size:var(--step-0);color:var(--ink);
  background:transparent;border:1px solid var(--line-strong);border-radius:0;
  padding:.8em 1em;width:100%;
  transition:border-color var(--dur-1) var(--ease-3);
}
.field input::placeholder{color:var(--muted)}
.field input:focus{outline:2px solid var(--accent);outline-offset:2px;border-color:var(--accent)}
/* honeypot: off-screen, never seen or tabbed to */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
#kit-form .submit{justify-self:start;cursor:pointer;font-family:var(--font-grotesk)}
.microcopy{font-size:var(--step--1);color:var(--muted)}

/* — delivery page: prompt rows read as quoted copy — */
.row .prompt{
  font-size:var(--step-0);line-height:var(--lead-body);color:var(--ink-soft);
  grid-column:1/-1;max-width:var(--measure);
}

/* — part 3 closing line — */
.closing{
  margin-top:var(--space-xl);font-family:var(--font-display);
  font-size:var(--step-2);font-weight:var(--w-head);letter-spacing:var(--track-head);
  line-height:var(--lead-snug);color:var(--ink);
}

/* — next-step block sign-off — */
.contact .signoff{margin-top:var(--space-l);color:var(--night-text);font-style:italic;font-family:var(--font-display);font-size:var(--step-1)}