/* Fit check (/fit-check, Oct 2026). Uses the tokens from site.css. */
.side-note{ color:var(--mute); margin-top:18px; max-width:34ch }

.fc-step{ display:flex; align-items:center; gap:14px; font-size:clamp(1.4rem,2.2vw,2rem); letter-spacing:-.02em; margin-bottom:24px }
.fc-step span{ flex:none; width:40px; height:40px; border-radius:50%; display:grid; place-items:center; background:var(--fg); color:var(--bg); font-size:1rem; font-weight:500; letter-spacing:0 }

/* Step 1: audience cards */
.fc-who{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px }
.fc-card{ position:relative; display:grid; gap:6px; align-content:start; padding:22px 22px 24px; border:1px solid var(--line); border-radius:20px; cursor:pointer; transition:border-color .3s, background .3s }
.fc-card input{ position:absolute; opacity:0; pointer-events:none }
.fc-card b{ font-weight:500; font-size:1.15rem }
.fc-card span{ color:var(--mute); font-size:.92rem }
.fc-card:hover{ border-color:var(--fg) }
.fc-card:has(input:checked){ background:var(--fg); color:var(--bg); border-color:var(--fg) }
.fc-card:has(input:checked) span{ color:var(--bg); opacity:.75 }
.fc-card:has(input:focus-visible){ outline:2px solid var(--accent); outline-offset:3px }
.fc-card small{ color:var(--accent); font-size:.82rem; font-weight:500; letter-spacing:.02em }
.fc-card:has(input:checked) small{ color:var(--bg); opacity:.85 }
.fc-alt{ color:var(--mute); margin:28px 0 12px; font-size:.95rem }
.fc-who--team{ grid-template-columns:repeat(3,minmax(0,1fr)) }
.fc-who--team .fc-card{ padding:16px 18px 18px; border-radius:16px }
.fc-who--team .fc-card b{ font-size:1rem }

/* Step 2 + 3 */
.fc-body{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(32px,5vw,90px); align-items:start }
.fc-qs{ min-width:0 }
.fc-set{ border:0; margin:0; padding:0; min-width:0 }
.fc-q{ padding:20px 0 22px; border-top:1px solid var(--line); display:grid; gap:10px }
.fc-q--currency{ grid-template-columns:minmax(0,1fr) auto; align-items:center }
.fc-q--currency .fc-hint{ grid-column:1 / -1 }
.fc-q__head{ display:flex; justify-content:space-between; align-items:baseline; gap:16px }
.fc-q label,.fc-q__label{ font-size:1.05rem }
.fc-q output{ font-variant-numeric:tabular-nums; font-weight:500; font-size:1.15rem; color:var(--accent); white-space:nowrap }
.fc-hint{ color:var(--mute); font-size:.88rem }
.fc-q input[type=range]{ width:100%; accent-color:var(--accent); height:28px; cursor:pointer }
.fc-q select,.fc-money input{ font:inherit; font-size:16px; color:var(--fg); background:var(--bg); border:1px solid var(--line); border-radius:12px; padding:.6em .8em }
.fc-money{ display:flex; align-items:center; gap:8px; max-width:240px }
.fc-money span{ color:var(--mute); min-width:1.5ch }
.fc-money input{ width:100%; font-variant-numeric:tabular-nums }
.fc-chips{ display:flex; flex-wrap:wrap; gap:8px }
.fc-chips label{ position:relative; cursor:pointer }
.fc-chips input{ position:absolute; opacity:0; pointer-events:none }
.fc-chips span{ display:inline-block; padding:.55em 1em; border:1px solid var(--line); border-radius:99px; font-size:.92rem; transition:background .25s, color .25s, border-color .25s }
.fc-chips label:hover span{ border-color:var(--fg) }
.fc-chips input:checked + span{ background:var(--fg); color:var(--bg); border-color:var(--fg) }
.fc-chips input:focus-visible + span{ outline:2px solid var(--accent); outline-offset:2px }

.fc-result{ position:sticky; top:24px; min-width:0 }
.fc-panel{ --tone:var(--accent); background:var(--bg-2); border-radius:28px; padding:clamp(22px,3vw,36px); display:grid; gap:22px; border-top:6px solid var(--tone) }
.fc-panel[data-verdict="small"]{ --tone:#c98a1b }
.fc-panel[data-verdict="no"]{ --tone:var(--fg) }
.fc-panel[data-verdict="small"] .fc-verdict{ color:#1f1604 }
.fc-panel[data-verdict="no"] .fc-verdict{ color:var(--bg) }
.fc-verdict{ justify-self:start; font-weight:500; font-size:1.05rem; padding:.45em 1em; border-radius:99px; background:var(--tone); color:#fff }
.fc-figs{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px }
.fc-figs > div{ min-width:0 }
.fc-big{ font-size:clamp(2rem,4vw,3.2rem); font-weight:500; letter-spacing:-.04em; line-height:1.05; margin-top:6px; font-variant-numeric:tabular-nums; overflow-wrap:anywhere }
.fc-sub{ color:var(--mute); font-size:.92rem }
.fc-role{ display:grid; gap:6px }
.fc-role[hidden]{ display:none }
.fc-role__what{ font-size:clamp(1.35rem,2.2vw,1.75rem); font-weight:500; letter-spacing:-.02em; line-height:1.15 }
.fc-role__backed{ color:var(--mute); font-size:.92rem; line-height:1.5 }
.fc-role__backed .label{ display:block; margin:6px 0 2px }
.fc-why{ line-height:1.55 }
.fc-rec{ background:var(--bg); border-radius:18px; padding:20px; display:grid; gap:8px }
.fc-rec__what{ font-size:1.08rem; line-height:1.45 }
.fc-rec__by{ color:var(--mute); font-size:.92rem }
.fc-measure{ display:grid; gap:10px }
.fc-measure .chips li{ background:var(--bg) }
.fc-note{ color:var(--mute); font-size:.85rem }

/* Send */
.fc-sendwrap{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.6fr); gap:clamp(32px,6vw,110px) }

@media (max-width:1080px){ .fc-who{ grid-template-columns:repeat(2,minmax(0,1fr)) } .fc-who--team{ grid-template-columns:repeat(3,minmax(0,1fr)) } }
@media (max-width:640px){ .fc-who--team{ grid-template-columns:minmax(0,1fr) } }
@media (max-width:860px){
  .fc-body,.fc-sendwrap{ grid-template-columns:minmax(0,1fr) }
  .fc-result{ position:static }
}
@media (max-width:480px){
  .fc-who{ grid-template-columns:minmax(0,1fr) }
  .fc-figs{ grid-template-columns:minmax(0,1fr) }
}
@media (prefers-reduced-motion:reduce){ .fc-card,.fc-chips span{ transition:none } }