/* T03 · #kit (04) + #expert (06) — logical properties only */

/* ---- KIT ---- */
@media (min-width: 960px) { #kit .kit-split { grid-template-columns: 6fr 5fr; } }
.kit-figure { margin: 0; }
.kit-figure__frame { box-shadow: var(--sh-2); container-type: size; }
@media (max-width: 767px) { #kit .kit-figure__frame { aspect-ratio: 900 / 671; } }
.kit-figure__cap { margin-top: var(--s-3); font-size: var(--fs-small); color: var(--kx-ink-2); display: flex; gap: var(--s-2); align-items: baseline; }
.kit-figure__cap::before { content: ""; flex: none; width: 16px; height: 1px; background: var(--kx-blue-line); transform: translateY(-4px); }
.kit-pin {
  position: absolute; inset-inline-start: calc(var(--x) * 1cqw); inset-block-start: calc(var(--y) * 1cqh);
  margin-inline-start: -14px; margin-block-start: -14px;
  width: 28px; height: 28px; border-radius: var(--r-pill);
  display: grid; place-items: center;
  background: var(--kx-blue); color: #fff; font-size: var(--fs-micro); font-weight: var(--fw-bold);
  box-shadow: 0 0 0 4px rgba(255,255,255,.75), var(--sh-1);
  pointer-events: none;
}
@media (max-width: 767px) { .kit-pin { inset-inline-start: calc(var(--mx) * 1cqw); inset-block-start: calc(var(--my) * 1cqh); } }
.kit-item .icon-disc { font-weight: var(--fw-bold); font-size: var(--fs-small); background: #fff; box-shadow: inset 0 0 0 1px var(--kx-blue-tint-2); }
.kit-cta { margin-top: var(--s-7); }

/* ---- EXPERT ---- */
.expert-points { margin-top: var(--s-7); }
.expert-points strong { font-weight: var(--fw-bold); }
.expert-visual { position: relative; max-width: 520px; margin-inline: auto; }
.expert-stage {
  border-radius: var(--r-lg); border: 1px solid var(--kx-line);
  background:
    linear-gradient(var(--kx-line) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(90deg, var(--kx-line) 1px, transparent 1px) 0 0 / 24px 24px,
    var(--kx-surface);
  padding: var(--s-6) var(--s-6) var(--s-12);
  display: grid; place-items: center;
}
.expert-foot { width: 300px; max-width: calc(100vw - 96px); height: auto; overflow: visible; }
.expert-foot line, .expert-foot path, .expert-foot polygon { vector-effect: non-scaling-stroke; fill: none; }
.ef-ground { stroke: var(--kx-ink-3); stroke-width: 1; }
.ef-ref { stroke: var(--kx-ink-3); stroke-width: 1; stroke-dasharray: 4 4; }
.ef-leg { stroke: var(--kx-ink); stroke-width: 1.5; fill: #fff !important; }
.ef-axis { stroke: var(--kx-blue); stroke-width: 1.5; }
.ef-arc { stroke: var(--kx-blue); stroke-width: 1.5; }
.ef-ticks line { stroke: var(--kx-blue); stroke-width: 1; }
.ef-deg { fill: var(--kx-blue-ink); font: 700 15px var(--kx-font); }
.ef-deg--sm { font-size: 13px; }
.expert-card { position: relative; margin-top: calc(var(--s-11) * -1); margin-inline: var(--s-4); }
@media (min-width: 640px) { .expert-card { margin-inline: var(--s-8); } }
.expert-tag {
  font-size: var(--fs-micro); font-weight: var(--fw-med); color: var(--kx-ink-2);
  background: #fff; border: 1px solid var(--kx-line-2); border-radius: var(--r-pill); padding: 2px 10px; white-space: nowrap;
}
.expert-card .spec-card__head { gap: var(--s-3); }
.expert-card .spec-row .deg { color: var(--kx-blue-ink); font-weight: var(--fw-bold); }
.expert-span { grid-column: 2 / -1; color: var(--kx-ink-2); }
.expert-status {
  display: flex; gap: var(--s-2); align-items: center; margin: var(--s-4) var(--s-5) 0;
  padding: var(--s-3) var(--s-4); border-radius: var(--r-sm);
  background: var(--kx-ok-tint); color: var(--kx-ok); font-size: var(--fs-small); font-weight: var(--fw-bold);
}
.expert-status .icon { stroke-width: 2.2; }