/* The long form in the Coldstart look. Loaded after the form's own styles, so its markup and logic stay as they were. */
@font-face { font-family: "Titillium Web"; font-weight: 600; font-display: swap; src: url("/fonts/titillium-600.woff2") format("woff2"); }
@font-face { font-family: "Bricolage Grotesque"; font-weight: 400; font-display: swap; src: url("/fonts/bricolage-400.woff2") format("woff2"); }
@font-face { font-family: "Bricolage Grotesque"; font-weight: 600; font-display: swap; src: url("/fonts/bricolage-600.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-weight: 400; font-display: swap; src: url("/fonts/jetbrains-400.woff2") format("woff2"); }

:root {
  --sand: #F4EDE0; --stone: #E8DFCB; --amber-text: #A84E25;
  --orange: #F28C5B; --orange-d: #A84E25; --orange-bg: #FBEBDD; --o: #F28C5B;
  --black: #3A3A3A; --ink: #3A3A3A; --ink-2: #3A3A3A;
  --white: #FAF6EC; --paper: #FFFDF7; --line: #DDD4C2; --line-2: #E8DFCB;
  --grey: #5C5C5C; --light: #66604F; --warn: #8A4B12; --warn-bg: #FBF0DC;
  --r: 12px; --r-s: 8px; --maxw: 1080px;
  --shadow: 0 1px 2px rgba(58, 58, 58, 0.05);
  --display: "Titillium Web", "Trebuchet MS", sans-serif;
  --body: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
}

body { background: var(--sand); color: var(--ink); font-family: var(--body); font-size: 16px; }
a { color: var(--amber-text); text-underline-offset: 3px; }
h1, h2 { font-family: var(--display); font-weight: 600; letter-spacing: -0.01em; }
h2 { font-size: 26px; line-height: 1.15; }

/* shared frame */
.top { position: sticky; top: 0; z-index: 50; background: #FAF6EC; border-bottom: 1px solid var(--line); }
.top-inner { max-width: 1080px; margin: 0 auto; padding: 0 20px; min-height: 60px; display: flex; align-items: center; gap: 24px; }
.brand, .brand img { display: block; }
.top-links { display: flex; margin-left: auto; gap: 22px; align-items: center; }
.top-links a { padding: 8px 0; color: var(--ink); font-size: 15px; text-decoration: none; }
.top-links a:hover { color: var(--amber-text); text-decoration: underline; }
.top-links .wide-only { display: none; }
footer.site-footer { margin: 0; padding: 0; background: var(--stone); color: var(--ink); border-top: 1px solid var(--line); }
.footer-inner { max-width: 1080px; margin: 0 auto; padding: 4px 20px; display: flex; align-items: center; justify-content: center; gap: 16px 40px; }
.footer-brand { display: none; align-items: center; gap: 16px; }
.footer-brand img { display: block; }
.footer-brand p { margin: 0; color: var(--grey); font-size: 14px; }
.footer-links { display: flex; gap: 24px; }
.footer-links a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); font-size: 15px; }
.footer-links a:hover { color: var(--amber-text); }
.footer-links .wide-only { display: none; }
@media (min-width: 720px) {
  .footer-inner { padding: 14px 20px; justify-content: space-between; }
  .footer-brand { display: flex; }
  .footer-links .wide-only, .top-links .wide-only { display: inline-flex; }
}

/* the dark blocks become paper */
header { padding: 44px 0 62px; background: transparent; color: var(--ink); overflow: visible; }
header::before, .rule-in::before, .tl::before, .closing::before { display: none; }
header .eyebrow, .eyebrow { color: var(--amber-text); font: 400 13px var(--mono); letter-spacing: 0; text-transform: none; }
.eyebrow::before { display: none; }
h1 { font-size: clamp(34px, 5vw, 52px); line-height: 1.08; letter-spacing: -0.012em; }
.sub { color: var(--grey); font-size: 18px; line-height: 1.5; max-width: 760px; text-wrap: pretty; }
.hdr-meta { border-top-color: var(--line); }
.hm { border-right-color: var(--line); }
.hm b { color: var(--ink); font: 600 22px/1.2 var(--display); letter-spacing: 0; }
.hm span { color: var(--grey); font-size: 13.5px; }
.steps-in { background: #FAF6EC; }
.step b { font-size: 15.5px; }
.step b em, .tl-seg.on { color: var(--ink); }
.step p { color: var(--grey); font-size: 14px; }
.rule-in, .closing, .tl { background: #FAF6EC; color: var(--ink); border: 1px solid var(--amber-text); box-shadow: var(--shadow); }
.closing, .tl { border-color: var(--line); }
.rule-kick, .tl-h, .cond-h, .sc-h { color: var(--amber-text); font: 400 13px var(--mono); letter-spacing: 0; text-transform: none; }
.rule-in p { color: var(--ink); font: 600 21px/1.3 var(--display); }
.closing p { color: var(--grey); font-size: 15.5px; }
.closing b, .tl-row b { color: var(--ink); }
.mark { display: none; }
.tl-seg { background: var(--stone); }
.tl-row, .tl-empty { color: var(--grey); font-size: 13.5px; }

/* sections and fields */
section { background: #FAF6EC; }
.s-num { color: var(--amber-text); font: 400 13px var(--mono); letter-spacing: 0; }
.s-num::before { display: none; }
.s-note { font-size: 15.5px; }
label.qt { font-size: 15.5px; }
.hint { font-size: 14px; }
.req { color: var(--amber-text); }
input[type=text], input[type=email], input[type=number], input[type=date], input[type=tel], select, textarea {
  background-color: #FFFDF7; border-color: #8F8672; font-size: 16px; color: var(--ink);
}
input[type=text], input[type=email], input[type=number], input[type=tel], input[type=date], select { height: 48px; }
select:invalid, select.placeholder, input::placeholder, textarea::placeholder { color: #6F6959; }
input:hover, textarea:hover, select:hover { border-color: var(--ink); }
input:focus, select:focus, textarea:focus { border-color: var(--amber-text); box-shadow: 0 0 0 3px rgba(242, 140, 91, 0.3); }
.opt span { padding: 11px 16px; border-radius: 10px; background: #FFFDF7; font-size: 15px; }
.opt span:hover { border-color: var(--orange); background: #FFFDF7; }
.opts.col .opt span { padding: 13px 16px; border-radius: 10px; }
.opt input:checked + span { background: var(--orange); border-color: var(--orange); color: var(--ink); box-shadow: none; }
.opt input:focus-visible + span { box-shadow: 0 0 0 3px var(--amber-text); }
.cond { background: var(--sand); }
.optbar { background: transparent; }
.optbar em { color: var(--grey); }
.flag { color: var(--ink); font-size: 14px; }

/* progress and score */
.bar-lbl { font-size: 13px; }
.rail a { font-size: 14.5px; }
.rail a.active { background: #FAF6EC; }
.rn { background: #FFFDF7; font-family: var(--mono); font-weight: 400; }
.rail-foot { background: #FAF6EC; }
.scorecard { background: #FAF6EC; }
.sc-num { font: 600 52px/1 var(--display); letter-spacing: -0.01em; }
.sc-num small { color: var(--grey); }
.sc-band.ok { color: var(--amber-text); }
.sc-row { font-size: 13.5px; }
.sc-val { font: 400 13px var(--mono); }
.saved { color: var(--grey); font-size: 13px; }
.saved.ok i { background: #5F8D5E; }

/* buttons and messages */
button { min-height: 50px; padding: 0 22px; border-radius: 10px; font-size: 16px; }
.btn-p { background: var(--orange); border-color: var(--orange); color: var(--ink); }
.btn-p:hover { background: #EE7E48; transform: none; }
.btn-s { background: transparent; border-color: var(--ink); color: var(--ink); }
.btn-s:hover { background: var(--stone); border-color: var(--ink); }
button:focus-visible { outline: 3px solid var(--amber-text); }
.note { color: var(--grey); font-size: 14px; }
.resume { background: #FAF6EC; }
.resume p { color: var(--ink); font-size: 15px; }
.resume button { min-height: 44px; }
.done-msg { color: var(--ink); font-size: 15px; }
#outbox { background: #FFFDF7; font-family: var(--mono); }

@media (max-width: 560px) { button { padding: 0 16px; width: 100%; } .resume button { width: auto; } }
@media print {
  .top, footer.site-footer { display: none; }
  body { background: #fff; }
  section, .scorecard, .closing { background: #fff; }
}

/* tidier two-column rows */
.grid2, .grid3 { row-gap: 0; margin-bottom: 0; }
.grid2 > .q > :last-child, .grid3 > .q > :last-child { margin-bottom: 22px; }
.grid2 > .q > label.qt, .grid3 > .q > label.qt { margin-bottom: 5px; }
.hm span { display: block; margin-top: 3px; line-height: 1.35; }