/* T02 — index 02 (#for-who) + 03 (#how). Logical properties only; tokens only. */

/* 02 · fit row: 6 items → 2 / 3 / 6 columns (no orphan) */
@media (min-width: 1100px) {
  #for-who .fit-row { grid-template-columns: repeat(6, 1fr); gap: var(--s-7) var(--s-5); }
}
#for-who .fit-item .icon-disc { position: relative; }
#for-who .fit-item .icon-disc::after { /* thin measured ring */
  content: ""; position: absolute; inset: -7px; border-radius: 50%;
  border: 1px dashed var(--kx-blue-tint-2);
}
#for-who .fit-item h3 { margin-block-start: var(--s-2); }
#for-who .fit-note { margin-block: var(--s-10) var(--s-2); color: var(--kx-ink); font-size: var(--fs-body); }
#for-who .fit-note a { color: var(--kx-blue-ink); font-weight: var(--fw-med); }
#for-who .disclaimer { margin: 0; }

/* 03 · steps: reset the <ol>, equal-height cards */
#how .steps { list-style: none; padding: 0; margin: 0; }
#how .step-card { display: flex; flex-direction: column; }
#how .step-card h3 { font-size: 1.1875rem; }
#how .step-card p { font-size: var(--fs-small); line-height: 1.65; }
/* 768–1199: 2 columns → the 5th card spans the row instead of orphaning */
@media (min-width: 768px) and (max-width: 1199px) {
  #how .step-card:last-child { grid-column: 1 / -1; }
}
@media (min-width: 1200px) {
  #how .step-card { padding-inline: var(--s-5); }
}

/* Step 02 example chip + scan link */
#how .step-example {
  margin-block-start: var(--s-4); padding: var(--s-3);
  background: var(--kx-surface); border: 1px solid var(--kx-line); border-radius: var(--r-sm);
  display: grid; gap: var(--s-2);
}
#how .step-example__label {
  font-size: var(--fs-micro); font-weight: var(--fw-bold); color: var(--kx-ink-2);
  letter-spacing: var(--tracking-label);
}
#how .step-example__row {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2);
  font-size: var(--fs-small); font-weight: var(--fw-med); color: var(--kx-ink);
}
#how .step-example .deg-badge { min-width: 40px; height: 26px; }
#how .step-scan-link {
  margin-block-start: auto; padding-block-start: var(--s-4);
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: var(--fs-small); font-weight: var(--fw-bold); color: var(--kx-blue-ink);
}
#how .step-ok { color: var(--kx-ok); font-weight: var(--fw-bold); }

/* After the steps: lifestyle photo + safety net */
#how .how-after { margin-block-start: var(--s-11); }
#how .how-safety__head { display: flex; align-items: center; gap: var(--s-4); margin-block-end: var(--s-4); }
#how .how-safety__head h3 { margin: 0; font-size: var(--fs-h3); }
#how .how-safety > p { color: var(--kx-ink-2); font-size: var(--fs-lead); }
#how .how-mechanism { margin-block: var(--s-6); font-size: var(--fs-body); line-height: 1.65; }
#how .how-safety .cta-note { margin-block-end: 0; }

/* Alignment fixes: titles share one baseline; h2 fits on one line at desktop */
#for-who .fit-item { align-content: start; grid-template-rows: auto auto 1fr; }
#how .section-head { max-width: 820px; }
#how .step-example__pair { display: inline-flex; align-items: center; gap: var(--s-2); white-space: nowrap; }

/* Fit-row icons: bolder + larger (72px tinted disc, 38px glyph, 1.75 stroke) */
#for-who .fit-item .icon-disc {
  width: 72px; height: 72px; background: var(--kx-blue-tint); color: var(--kx-blue-ink);
}
#for-who .fit-item .icon-disc .icon { width: 38px; height: 38px; stroke-width: 1.75; }
/* Redrawn glyphs (items 2 foot sole, 3 knee joint, 4 footprints, 5 insole-with-x): inline SVG swapped
   for a masked glyph drawn in currentColor. Stroke 1.1 in a 24 box = 1.75px at 38px. */
#for-who .fit-item:is(:nth-child(2), :nth-child(3), :nth-child(4), :nth-child(5)) .icon-disc .icon { display: none; }
#for-who .fit-item:is(:nth-child(2), :nth-child(3), :nth-child(4), :nth-child(5)) .icon-disc::before {
  content: ""; width: 38px; height: 38px; background: currentColor;
  -webkit-mask: var(--_glyph) center / contain no-repeat; mask: var(--_glyph) center / contain no-repeat;
}
#for-who .fit-item:nth-child(2) .icon-disc { /* foot sole with toes + heel pain marks */
  --_glyph: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'><path d='M12.4 21.6c-2.3 0-3.4-1.7-3.2-3.7.2-2.2 1.3-3.4 1.1-5.7-.1-2.2-1-3.4-.6-5.3.4-1.7 1.8-2.4 3.4-2.3 2 .1 3.3 1.4 3.3 3.8 0 2.4-1.1 4-.9 6.5.2 2.3 1.3 3.5.8 5.1-.4 1.3-1.7 1.6-3.9 1.6z'/><circle cx='10.6' cy='2.6' r='1.15'/><circle cx='13.1' cy='2.2' r='.85'/><circle cx='15.1' cy='2.9' r='.75'/><circle cx='16.7' cy='4.1' r='.65'/><circle cx='17.8' cy='5.6' r='.55'/><path d='M4.4 18.4h2.4M5 15.2l1.9 1M5 21.6l1.9-1'/></svg>");
}
#for-who .fit-item:nth-child(3) .icon-disc { /* knee joint: femur, tibia, kneecap, ache arcs */
  --_glyph: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'><path d='M10 2v8.3c0 1.5 1.3 2.4 3 2.4s3-.9 3-2.4V2'/><path d='M10 22v-5.8c0-1 1-1.6 3-1.6s3 .6 3 1.6V22'/><circle cx='18.2' cy='12.6' r='1.4'/><path d='M6.6 10.2a4 4 0 0 0 0 5.2M4 8.4a7 7 0 0 0 0 8.8'/></svg>");
}
#for-who .fit-item:nth-child(5) .icon-disc { /* off-the-shelf insole with a no-fit x badge */
  --_glyph: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'><path d='M9.5 2.2c3 0 4.6 2.4 4.6 5.4 0 2.6-1.3 4-1.3 6.6 0 2.8.9 4.2-.2 5.9-.8 1.2-2 1.7-3.1 1.7s-2.4-.5-3.1-1.7c-1-1.7-.1-3.2-.2-5.8-.1-2.6-1.9-4-1.9-6.8 0-3 2.2-5.3 5.2-5.3z'/><path d='M7.6 6.5c1.2-.8 2.6-.8 3.8 0M8.4 12.2c-.5 1.6-.5 3.2 0 4.8'/><circle cx='18' cy='17.4' r='3.7'/><path d='M16.6 16l2.8 2.8M19.4 16l-2.8 2.8'/></svg>");
}
#for-who .fit-item:nth-child(4) .icon-disc { /* walking: two staggered footprints with toes */
  --_glyph: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'><path d='M7 13.6c-1.5 0-2.3-1.1-2.2-2.5.1-1.5.8-2.3.7-3.8-.1-1.4-.4-2.4.4-3.3.6-.6 1.6-.7 2.4-.3 1.1.6 1.3 1.8 1.1 3.1-.2 1.4-.8 2.5-.6 4 .2 1.4.4 2.8-1.8 2.8z'/><circle cx='5.6' cy='1.9' r='.7'/><circle cx='7.4' cy='1.7' r='.6'/><circle cx='8.9' cy='2.4' r='.5'/><path d='M16.6 22.4c-1.5 0-2.3-1.1-2.2-2.5.1-1.5.8-2.3.7-3.8-.1-1.4-.4-2.4.4-3.3.6-.6 1.6-.7 2.4-.3 1.1.6 1.3 1.8 1.1 3.1-.2 1.4-.8 2.5-.6 4 .2 1.4.4 2.8-1.8 2.8z'/><circle cx='15.2' cy='10.7' r='.7'/><circle cx='17' cy='10.5' r='.6'/><circle cx='18.5' cy='11.2' r='.5'/></svg>");
}