/* "Where does it hurt?" picker (site/js/picker.js). A teal-tint band between the light problem
   section and the dark approach panel. Preview-only via [data-preview-only] in index.html. */
.fit {
  background:
    radial-gradient(900px 420px at 88% -10%, rgba(47,211,181,.32), transparent 70%),
    radial-gradient(700px 360px at -10% 110%, rgba(47,211,181,.18), transparent 70%),
    var(--teal-tint);
}
.fit:not(.fit-ready) { display: none; } /* picker.js adds .fit-ready after drawing; no empty band if it fails */
.fit > .wrap { padding-top: clamp(64px, 9vw, 104px); padding-bottom: clamp(64px, 9vw, 104px); }
@media (max-width: 520px) { .fit > .wrap { padding-left: 16px; padding-right: 16px; } }

.fit-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
@media (max-width: 900px) { .fit-grid { grid-template-columns: minmax(0, 1fr); } }

/* Intro */
.fit-intro { display: flex; flex-direction: column; gap: 18px; position: sticky; top: calc(var(--header-h) + 32px); }
@media (max-width: 900px) { .fit-intro { position: static; } }
.fit-title { font-size: clamp(34px, 4vw, 52px); }
.fit-title em { font-style: normal; font-weight: 500; color: var(--teal-text); }
.fit-intro .lead { max-width: 460px; }
.fit-facts { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font: 500 13px/1.4 var(--mono); color: var(--teal-text); }
.fit-facts li { display: flex; gap: 10px; }
.fit-facts li span { flex: none; }
@media (max-width: 900px) { .fit-facts { flex-direction: row; flex-wrap: wrap; gap: 6px 18px; } }

/* Card */
.fit-card {
  background: #fff; color: var(--ink); border-radius: 20px; padding: clamp(18px, 3.4vw, 34px); min-width: 0;
  box-shadow: 0 28px 70px rgba(6,32,28,.14), 0 0 0 1px rgba(6,32,28,.06);
  overflow: hidden; /* clips the sideways step transition; focus rings stay inside the padding */
  scroll-margin-top: calc(var(--header-h) + 16px);
}
.fit-card :focus-visible { outline: 2px solid var(--teal-text); outline-offset: 2px; }
.fit-top { display: flex; align-items: center; gap: 12px; min-height: 36px; }
.fit-back { background: none; border: 0; border-radius: 8px; padding: 8px 10px 8px 2px; color: var(--teal-text); font-weight: 600; font-size: 14px; }
.fit-back:hover { color: var(--ink); }
.fit-back[hidden] { display: none; }
.fit-count { margin-left: auto; font: 500 12px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted-2); }
.fit-segs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; margin-top: 10px; }
.fit-segs i { height: 4px; border-radius: 2px; background: var(--border); }
.fit-segs i.on { background: var(--teal); }
.fit-segs i.now { background: var(--ink); }
html:not(.calm) .fit-segs i { transition: background .3s; }

/* Question */
.fit-q { font: 700 clamp(25px, 3vw, 34px)/1.08 var(--display); letter-spacing: -.02em; margin: 24px 0 0; text-wrap: balance; }
.fit-q:focus { outline: none; } /* programmatic focus target for screen readers, not a control */
.fit-help { margin: 8px 0 0; font-size: 14px; line-height: 1.5; color: var(--muted-2); }

.fit-options { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(210px, 100%), 1fr)); gap: 10px; margin-top: 20px; }
.fit-opt {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 4px;
  min-height: 74px; padding: 14px 44px 14px 16px; text-align: left; color: var(--ink);
  background: #fff; border: 1.5px solid var(--border); border-radius: 12px;
}
.fit-opt b { font: 700 18px/1.2 var(--display); letter-spacing: -.01em; }
.fit-opt small { font-size: 13px; line-height: 1.4; color: var(--muted-2); }
.fit-mark { flex: none; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; line-height: 1; }
.fit-opt .fit-mark { position: absolute; top: 50%; right: 14px; margin-top: -10px; border: 1.5px solid var(--input); font-size: 11px; }
.fit-opt:hover { border-color: #b9c6c0; background: var(--teal-wash); }
.fit-opt[aria-pressed="true"] { border-color: var(--ink); background: var(--teal-wash); box-shadow: inset 0 0 0 1px var(--ink); }
.fit-opt[aria-pressed="true"] .fit-mark { background: var(--ink); border-color: var(--ink); color: var(--teal-light); }
.fit-opt[aria-pressed="true"] .fit-mark::after { content: '✓'; }

.fit-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.fit-pill {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; max-width: 100%; padding: 10px 16px 10px 12px;
  border-radius: 999px; border: 1.5px solid var(--border); background: #fff; color: var(--ink);
  font-size: 14.5px; font-weight: 500; line-height: 1.3; text-align: left;
}
.fit-pill .fit-mark { background: var(--teal-tint); color: var(--teal-text); font-size: 14px; font-weight: 600; }
.fit-pill .fit-mark::after { content: '+'; }
.fit-pill:hover { border-color: #b9c6c0; background: var(--teal-wash); }
.fit-pill[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.fit-pill[aria-pressed="true"] .fit-mark { background: var(--teal); color: var(--on-teal); font-size: 11px; }
.fit-pill[aria-pressed="true"] .fit-mark::after { content: '✓'; }

/* Optional counts on the team step */
.fit-counts { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border-soft); display: flex; flex-direction: column; gap: 10px; }
.fit-counts-h { margin: 0 0 2px; font: 500 12px var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--muted-2); }
.fit-counts-h span { display: block; margin-top: 4px; font: 400 13px var(--sans); letter-spacing: 0; text-transform: none; }
.fit-count-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-weight: 500; }
.fit-stepper { display: flex; align-items: center; flex: none; border: 1px solid var(--input); border-radius: 10px; overflow: hidden; }
.fit-stepper button { width: 44px; height: 44px; border: 0; background: #fff; color: var(--ink); font-size: 20px; line-height: 1; }
.fit-stepper button:hover { background: var(--teal-wash); }
.fit-card .fit-stepper button:focus-visible { outline-offset: -3px; }
.fit-stepper output { min-width: 42px; text-align: center; font: 500 15px var(--mono); }

/* Step navigation */
.fit-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 26px; }
.fit-picked { font: 500 12px var(--mono); color: var(--muted-2); }
.fit-next { min-width: 140px; text-align: center; }
.fit-next[disabled] { opacity: .4; cursor: not-allowed; }
.fit-next[disabled]:hover { background: var(--ink); }

/* Result */
.fit-kstore { margin-top: 16px; display: flex; flex-direction: column; gap: 3px; background: var(--teal); color: var(--on-teal); border-radius: 12px; padding: 14px 16px; }
.fit-kstore b { font: 700 19px/1.2 var(--display); letter-spacing: -.01em; }
.fit-kstore span { font-size: 14px; line-height: 1.5; }
.fit-price { margin-top: 16px; display: flex; flex-direction: column; gap: 10px; background: var(--dark); color: #fff; border-radius: 16px; padding: 22px; }
.fit-kicker { font: 500 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--teal-light); }
.fit-amount { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.fit-amount b { font: 700 clamp(44px, 6vw, 60px)/1 var(--display); letter-spacing: -.03em; }
.fit-amount span { color: rgba(255,255,255,.7); }
.fit-meta { display: flex; flex-wrap: wrap; gap: 4px 16px; font: 400 13px/1.5 var(--mono); color: rgba(255,255,255,.72); }
.fit-meta s { text-decoration: line-through; }
.fit-save { color: var(--teal-light); }
.fit-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.fit-tags span { font: 500 11px var(--mono); color: var(--teal-light); background: rgba(47,211,181,.14); border: 1px solid rgba(47,211,181,.4); border-radius: 6px; padding: 4px 8px; }
.fit-sub { margin: 24px 0 0; font: 500 12px var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--muted-2); }
.fit-mods { list-style: none; margin: 10px 0 0; padding: 0; }
.fit-mods li { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: 6px 16px; align-items: baseline; padding: 12px 0; border-top: 1px solid var(--border-soft); }
@media (max-width: 600px) { .fit-mods li { grid-template-columns: minmax(0, 1fr); } }
.fit-mod { justify-self: start; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.fit-chip { background: var(--teal-tint); color: var(--teal-text); font-weight: 600; font-size: 14px; line-height: 1.35; border-radius: 8px; padding: 5px 10px; }
.fit-tbc { font: 500 11px/1.3 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: #5c4513; background: var(--warn-bg); border: 1px solid #f0dcb2; border-radius: 6px; padding: 4px 7px; }
.fit-why { font-size: 14px; line-height: 1.55; color: var(--muted); text-wrap: pretty; }
.fit-extras { margin: 10px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--muted-2); }
.fit-extras b { color: var(--ink); font-weight: 600; }
.fit-notes { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.fit-note { border-radius: 10px; padding: 12px 14px; font-size: 14px; line-height: 1.55; background: var(--teal-wash); color: var(--muted); border: 1px solid #cdeee4; }
.fit-note-standalone, .fit-note-confirm, .fit-note-sap { background: var(--warn-bg); color: #5c4513; border-color: #f0dcb2; }
.fit-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 24px; }
.fit-actions .btn { text-align: center; }
.fit-btn-line { color: var(--ink); border-color: var(--input); background: #fff; }
.fit-btn-line:hover { color: var(--ink); border-color: var(--ink); }
.fit-restart { background: none; border: 0; border-radius: 6px; padding: 10px 6px; color: var(--teal-text); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.fit-restart:hover { color: var(--ink); }
@media (max-width: 560px) {
  .fit-actions .btn { flex: 1 1 100%; }
  .fit-restart { margin: 0 auto; }
}
.fit-fine { margin: 14px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--muted-2); }
.fit-quote-note { margin-top: 10px; }

/* Walkthrough form: "your answers are attached" note, added by picker.js */
.form .fit-attached { margin: 0; display: flex; align-items: center; justify-content: space-between; gap: 10px 12px; flex-wrap: wrap; background: var(--teal-tint); color: var(--teal-text); border-radius: 8px; padding: 10px 12px; font-size: 13px; font-weight: 500; line-height: 1.45; }
.form .fit-attached button { min-height: 36px; margin: -4px -6px -4px auto; background: none; border: 0; padding: 6px 10px; color: var(--ink); font-size: 13px; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; border-radius: 6px; }
/* The global teal ring is about 1.7:1 on the teal-tint note; the dark teal clears 3:1. */
.form .fit-attached button:focus-visible { outline: 2px solid var(--teal-text); outline-offset: 2px; }

/* Motion: steps slide in the direction of travel, result rows rise in. Nothing moves in calm mode. */
@keyframes fit-in { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
@keyframes fit-in-back { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: none; } }
@keyframes fit-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
html:not(.calm) .fit-step[data-dir="fwd"] { animation: fit-in .36s cubic-bezier(.2,.7,.2,1) both; }
html:not(.calm) .fit-step[data-dir="back"] { animation: fit-in-back .36s cubic-bezier(.2,.7,.2,1) both; }
html:not(.calm) .fit-result .fit-mods li { animation: fit-up .42s cubic-bezier(.2,.7,.2,1) both; animation-delay: calc(140ms + var(--i, 0) * 55ms); }
html:not(.calm) .fit-opt, html:not(.calm) .fit-pill { transition: border-color .15s, background .15s, color .15s, transform .12s; }
html:not(.calm) .fit-opt:active, html:not(.calm) .fit-pill:active { transform: scale(.98); }