/* =====================================================================
   scoring.html: "How scoring works"
   Page-only styles. Prefix: .sc-  · Mobile first, foundation breakpoints
   (640 · 1024 · 1440 · 1920). Shared tokens/classes come from site.css.
   ===================================================================== */

/* One palette for the four parts, used by every bar, ring and swatch on the page.
   4th tone is a lighter sage so dark labels on it pass AA. */
:root {
  --sc-1: var(--amber);
  --sc-2: #2D503B;
  --sc-3: #506A49;
  --sc-4: #8E9F83;
}
/* the demo ring animates its value */
@property --p { syntax: '<number>'; inherits: true; initial-value: 0; }

/* ---------------------------------------------------------------------
   1. Hero + formula panel
--------------------------------------------------------------------- */
.sc-hero { text-align: center; overflow: hidden; padding-bottom: clamp(3.5rem, 2rem + 5vw, 7rem); }
.sc-hero__title { max-width: 11.5em; margin: 18px auto 0; font-size: clamp(2.125rem, 1.05rem + 5.2vw, var(--fs-display)); }
.sc-hero__lead { max-width: 41rem; margin: clamp(1.25rem, 1rem + 1vw, 1.75rem) auto 0; }
.sc-hero__note { margin-top: 16px; }

.sc-formula { max-width: 960px; margin: clamp(3rem, 2rem + 4vw, 5rem) auto 0; text-align: left; }
.sc-formula__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.sc-formula__title { font: 600 clamp(1.0625rem, 1rem + .35vw, 1.3125rem)/1.3 var(--display); letter-spacing: -.02em; color: var(--ink); }
.sc-formula__eq { margin-top: 8px; font-size: var(--fs-small); line-height: 1.55; color: var(--body); }
.sc-formula__eq .t-mono { color: var(--amber-ink); }

.sc-blend { display: flex; gap: 4px; height: clamp(48px, 2.4rem + 1.6vw, 68px); margin-top: clamp(1rem, .8rem + .8vw, 1.5rem); }
.sc-blend span {
  flex: var(--w) 1 0; min-width: 0; display: flex; align-items: center; justify-content: center;
  border-radius: 12px; color: var(--t, #fff); font: 600 .8125rem/1 var(--display); letter-spacing: -.02em; font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, color-mix(in srgb, var(--c) 86%, white), var(--c) 55%, color-mix(in srgb, var(--c) 92%, black));
  box-shadow: inset 0 1px 0 #ffffff59, inset 0 -1px 0 #0000001a, 0 6px 14px -10px color-mix(in srgb, var(--c) 80%, black);
}
@media (max-width: 639px) { .sc-blend small { display: none; } }
@media (min-width: 640px) {
  .sc-blend span { justify-content: flex-start; padding-left: clamp(12px, .5rem + .8vw, 20px); font-size: clamp(.9375rem, .8rem + .45vw, 1.25rem); }
  .sc-blend span:last-child { justify-content: center; padding-left: 0; }
}

.sc-blend-legend { display: grid; gap: 6px; margin-top: 14px; }
.sc-blend-legend a {
  display: grid; grid-template-columns: 18px minmax(0, 1fr); align-items: center; gap: 2px 12px;
  min-height: 52px; padding: 9px 14px; border-radius: 14px; border: 1px solid var(--line-soft); background: #ffffff8c;
  transition: background-color var(--dur-hover) ease, border-color var(--dur-hover) ease;
}
.sc-blend-legend i { grid-row: span 2; width: 18px; height: 5px; border-radius: 3px; background: var(--c); }
.sc-bl__name { font: 600 .9375rem/1.3 var(--display); letter-spacing: -.015em; color: var(--ink); }
.sc-bl__tag { font-size: .8125rem; line-height: 1.35; color: var(--muted); }
@media (hover: hover) and (pointer: fine) { .sc-blend-legend a:hover { background: #fff; border-color: var(--line); } }
@media (min-width: 640px) { .sc-blend-legend { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .sc-blend-legend { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.sc-formula__foot { display: flex; align-items: flex-start; gap: 8px; margin-top: 16px; font-size: .875rem; line-height: 1.5; color: var(--muted); }
.sc-formula__foot .ic { margin-top: 1px; color: var(--amber-ink); }

/* ---------------------------------------------------------------------
   2. Breakdown: light score orbit + legend + verdict bands
--------------------------------------------------------------------- */
.sc-breakdown { --split-max: 1140px; }
.sc-orbit { --so-4: var(--sc-4); width: min(calc(100% - 64px), 460px); }
.sc-breakdown__side { min-width: 0; }
.sc-breakdown + .sample-note { margin-top: clamp(2rem, 1.5rem + 2vw, 3rem); }

.sc-bands { margin-top: clamp(1.5rem, 1.2rem + 1vw, 2rem); }
.sc-bands__label { font: 600 .875rem/1.4 var(--sans); color: var(--ink); }
.sc-bands__scale { position: relative; display: grid; grid-template-columns: 40fr 20fr 20fr 20fr; gap: 3px; height: 34px; margin-top: 30px; }
.sc-band { display: flex; align-items: center; justify-content: center; border-radius: 8px; font: 600 .75rem/1 var(--sans); white-space: nowrap; }
.sc-band--0 { background: #EFEDE7; color: var(--muted); }
.sc-band--1 { background: var(--warn-bg); color: var(--warn); }
.sc-band--2 { background: var(--amber-soft); color: var(--amber-ink); }
.sc-band--3 { background: var(--ok-bg); color: var(--ok); box-shadow: inset 0 0 0 1px var(--ok-line); }
.sc-bands__marker { position: absolute; left: calc(var(--at) * 1%); top: -6px; bottom: -6px; width: 2px; margin-left: -1px; border-radius: 2px; background: var(--ink); }
.sc-bands__marker b { position: absolute; bottom: calc(100% + 4px); left: 50%; transform: translateX(-50%); padding: 3px 8px; border-radius: var(--r-pill); background: var(--ink); color: #fff; font: 600 .75rem/1.2 var(--display); font-variant-numeric: tabular-nums; }
.sc-bands__ticks { position: relative; height: 18px; margin-top: 8px; font: 500 .75rem/1 var(--sans); color: var(--muted); font-variant-numeric: tabular-nums; }
.sc-bands__ticks span { position: absolute; top: 0; transform: translateX(-50%); }
.sc-bands__ticks span:nth-child(1) { left: 0; transform: none; }
.sc-bands__ticks span:nth-child(2) { left: 40%; }
.sc-bands__ticks span:nth-child(3) { left: 60%; }
.sc-bands__ticks span:nth-child(4) { left: 80%; }
.sc-bands__ticks span:nth-child(5) { left: 100%; transform: translateX(-100%); }
@media (max-width: 399px) { .sc-band { font-size: .75rem; letter-spacing: -.01em; } .sc-band--0 { font-size: .75rem; } }

/* ---------------------------------------------------------------------
   3. The four parts
--------------------------------------------------------------------- */
.sc-parts { display: grid; gap: clamp(4rem, 2.5rem + 6vw, 8.5rem); }
.sc-part { display: grid; gap: clamp(2rem, 1.5rem + 2vw, 3rem); align-items: center; max-width: 40rem; margin-inline: auto; width: 100%; }
.sc-part > * { min-width: 0; }
@media (min-width: 1024px) {
  .sc-part { max-width: 1140px; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(3rem, 1rem + 4vw, 5.5rem); }
  .sc-part--flip { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
  .sc-part--flip .sc-part__copy { order: 2; }
}
.sc-part__copy { text-align: left; }
.sc-part__label { display: flex; align-items: flex-end; gap: 14px; }
.sc-part__fig { position: relative; padding-bottom: 8px; font: 600 clamp(2.75rem, 2rem + 3vw, 4.25rem)/.9 var(--display); letter-spacing: -.055em; color: var(--ink); font-variant-numeric: tabular-nums; }
.sc-part__fig::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 5px; border-radius: 3px; background: var(--c); }
.sc-part__kicker { padding-bottom: 8px; font: 600 .9375rem/1.3 var(--sans); color: var(--muted); }
.sc-part h3 { margin-top: clamp(1.25rem, 1rem + .8vw, 1.75rem); }
.sc-part__body { margin-top: 14px; font-size: var(--fs-body); line-height: 1.68; color: var(--body); }
.sc-part__dt { margin-top: 26px; font: 600 .875rem/1.4 var(--sans); letter-spacing: 0; color: var(--ink); }
.sc-part .checks { margin-top: 12px; }
.sc-part__media { width: 100%; }

/* Zoomed crop of a real capture (>= 640px): show one readable region instead of a shrunken full screen.
   --zw image width as % of the frame, --zx/--zy region offset as % of the frame width, --zar region aspect. */
@media (min-width: 640px) {
  .sc-zoom .frame__media { aspect-ratio: var(--zar); overflow: hidden; }
  .sc-zoom .frame__media img { width: var(--zw); max-width: none; aspect-ratio: 1440 / 900; margin: calc(var(--zy) * -1) 0 0 calc(var(--zx) * -1); }
}

/* shared viz card */
.sc-viz { text-align: left; }
.sc-viz__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.sc-viz__title { font: 600 1.0625rem/1.3 var(--display); letter-spacing: -.02em; color: var(--ink); }
.sc-viz__sub { margin-top: 20px; font-size: .875rem; line-height: 1.5; color: var(--muted); }
.sc-viz__sub strong { color: var(--ink); font-weight: 600; }
.sc-viz__foot { display: flex; align-items: center; gap: 8px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line-soft); font-size: .875rem; line-height: 1.5; color: var(--muted); }

/* role match: three passes */
.sc-passes__rows { margin-top: 14px; }
.sc-passes__rows li { display: grid; grid-template-columns: minmax(0, 8.5rem) minmax(0, 1fr) 2.75rem; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line-soft); }
.sc-passes__name { font-size: .875rem; font-weight: 500; color: var(--ink); white-space: nowrap; }
.sc-passes__name i { font-style: normal; color: var(--muted); margin: 0 2px; }
.sc-passes__bar { height: 10px; border-radius: var(--r-pill); background: var(--line-soft); overflow: hidden; }
.sc-passes__bar b { display: block; height: 100%; width: calc(var(--p) / 40 * 100%); border-radius: inherit; background: linear-gradient(90deg, color-mix(in srgb, var(--sc-2) 75%, white), var(--sc-2)); }
.sc-passes__val { font: 600 .9375rem/1 var(--display); color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; }
.sc-pairs { display: grid; gap: 8px; margin-top: 10px; }
.sc-pair { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 12px; padding: 12px 14px; }
.sc-pair__who { font-size: .75rem; color: var(--muted); }
.sc-pair b { grid-column: 1; font: 600 1rem/1.3 var(--display); letter-spacing: -.015em; color: var(--ink); }
.sc-pair .status { grid-column: 2; grid-row: 1 / span 2; }
@media (min-width: 640px) { .sc-pairs { grid-template-columns: 1fr 1fr; } }

/* experience: credit curve */
.sc-exp__chart { position: relative; aspect-ratio: 520 / 300; margin-top: 18px; }
@media (min-width: 640px) { .sc-exp__chart { aspect-ratio: 520 / 270; } }
.sc-exp__chart svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.sc-exp__want { fill: var(--amber-soft); }
.sc-exp__grid { stroke: var(--line); stroke-width: 1; stroke-dasharray: 2 5; vector-effect: non-scaling-stroke; }
.sc-exp__unknown { stroke: var(--sc-4); stroke-width: 1.5; stroke-dasharray: 5 5; vector-effect: non-scaling-stroke; }
.sc-exp__axis { stroke: var(--line2); stroke-width: 1; vector-effect: non-scaling-stroke; }
.sc-exp__curve { fill: none; stroke: var(--sc-3); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.sc-exp__drop { fill: none; stroke: var(--sc-3); stroke-width: 1.5; stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; }
.sc-exp__dot { position: absolute; left: var(--x); top: var(--y); width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: var(--amber); border: 3px solid #fff; box-shadow: 0 0 0 1px #9955222e, 0 4px 10px -3px #9955226b; }
.sc-exp__lbl {
  position: absolute; left: var(--x); top: var(--y); padding: 2px 7px; border-radius: var(--r-pill);
  font: 600 .75rem/1.25 var(--sans); color: var(--ink); white-space: nowrap;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
}
.sc-exp__lbl--arjun { transform: translate(-50%, 14px); color: var(--amber-ink); }
.sc-exp__lbl--full { transform: translate(-50%, calc(-100% - 6px)); color: var(--cs); }
.sc-exp__lbl--over { transform: translate(-50%, calc(-100% - 6px)); color: var(--cs); }
.sc-exp__lbl--unk { transform: translate(-50%, calc(-100% - 4px)); color: var(--muted); font-weight: 500; }
.sc-exp__lbl--below { transform: translate(0, -50%); color: var(--muted); font-weight: 500; white-space: normal; width: 6.5em; line-height: 1.25; text-align: left; background: none; padding: 0; }
.sc-exp__tick { position: absolute; left: var(--x); top: calc(84.6% + 8px); transform: translateX(-50%); font: 500 .75rem/1 var(--sans); color: var(--muted); font-variant-numeric: tabular-nums; }
.sc-exp__tick--end { transform: translateX(-60%); }
.sc-exp__key { width: 14px; height: 10px; flex: none; border-radius: 3px; background: var(--amber-soft); box-shadow: inset 0 0 0 1px var(--amber-line); }

/* nice-to-haves */
.sc-nice .well + .well { margin-top: 8px; }
.sc-nice .sc-viz__head + .well { margin-top: 16px; }
.sc-nice__row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 12px 14px; }
.sc-nice__row p { flex: 1 1 12rem; font-size: .875rem; line-height: 1.45; color: var(--ink); }
.sc-nice__row .status { margin-left: auto; }
.sc-cite { display: inline-block; padding: 4px 7px; border-radius: 6px; background: #F3F1EC; font: 500 .75rem/1 var(--mono); color: var(--muted); }
.sc-nice__cmp { display: grid; gap: 10px; margin-top: 10px; }
.sc-nice__cmp > div { display: grid; grid-template-columns: 7.25rem minmax(0, 1fr) 1.75rem; align-items: center; gap: 12px; font-size: .875rem; color: var(--ink); }
.sc-nice__bar { height: 10px; border-radius: var(--r-pill); background: linear-gradient(var(--c), var(--c)) left / calc(var(--w) * 1%) 100% no-repeat, var(--line-soft); }
.sc-nice__cmp b { font: 600 .9375rem/1 var(--display); text-align: right; font-variant-numeric: tabular-nums; }

/* callout: when the JD leaves something out */
.sc-callout { display: grid; gap: 24px; max-width: 1040px; margin: clamp(4rem, 2.5rem + 5vw, 7rem) auto 0; text-align: left; }
.sc-callout__copy p { margin-top: 10px; font-size: var(--fs-small); line-height: 1.68; color: var(--body); }
.sc-callout__row-label { margin-bottom: 6px; font-size: .8125rem; font-weight: 500; color: var(--muted); }
.sc-mini { display: flex; gap: 3px; height: 34px; margin-bottom: 14px; }
.sc-mini span { flex: var(--w) 1 0; min-width: 0; display: flex; align-items: center; justify-content: center; border-radius: 8px; background: var(--c); color: var(--t, #fff); font: 600 .8125rem/1 var(--display); font-variant-numeric: tabular-nums; }
@media (min-width: 900px) { .sc-callout { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 48px; align-items: center; } }

/* ---------------------------------------------------------------------
   4. Weights demo
--------------------------------------------------------------------- */
.sc-demo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; max-width: 1100px; margin-inline: auto; text-align: left; }
.sc-demo > * { min-width: 0; }
@media (min-width: 1024px) { .sc-demo { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(2rem, 1rem + 2.5vw, 3.5rem); align-items: start; } }
.sc-demo__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.sc-demo__title { font: 600 1.125rem/1.3 var(--display); letter-spacing: -.02em; color: var(--ink); }
.sc-presets { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.sc-preset {
  min-height: 44px; padding: 0 15px; border-radius: var(--r-pill); border: 1px solid var(--line); background: #ffffffa6;
  font: 500 .875rem/1 var(--sans); color: var(--body);
  transition: background-color var(--dur-hover) ease, color var(--dur-hover) ease, border-color var(--dur-hover) ease, transform var(--dur-press) var(--ease-out);
}
.sc-preset[aria-pressed="true"] { background: var(--charcoal); border-color: var(--charcoal); color: #fff; }
@media (hover: hover) and (pointer: fine) { .sc-preset[aria-pressed="false"]:hover { background: #fff; color: var(--ink); } }
.sc-preset:active { transform: scale(.97); }
@media (pointer: coarse) { .sc-preset { min-height: 44px; } }

.sc-sliders { display: grid; gap: 14px; margin-top: 22px; }
.sc-slider__top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.sc-slider__top label { font: 600 .9688rem/1.3 var(--display); letter-spacing: -.015em; color: var(--ink); }
.sc-slider__top output { font: 600 1.0625rem/1 var(--display); color: var(--ink); font-variant-numeric: tabular-nums; }
.sc-slider__meta { margin-top: -4px; font-size: .8125rem; line-height: 1.4; color: var(--muted); }
.sc-slider__meta b { color: var(--ink); font-weight: 600; }

.sc-slider input[type="range"] { --fill: 40%; -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 44px; margin: 0; background: transparent; cursor: pointer; }
.sc-slider input[type="range"]:focus { outline: none; }
.sc-slider input[type="range"]::-webkit-slider-runnable-track { height: 8px; border-radius: 8px; background: linear-gradient(var(--c), var(--c)) left / var(--fill) 100% no-repeat, var(--line); }
.sc-slider input[type="range"]::-moz-range-track { height: 8px; border-radius: 8px; background: var(--line); }
.sc-slider input[type="range"]::-moz-range-progress { height: 8px; border-radius: 8px; background: var(--c); }
.sc-slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 24px; height: 24px; margin-top: -8px; border-radius: 50%;
  background: #fff; border: 1px solid #22252226; box-shadow: inset 0 0 0 6px var(--c), 0 2px 6px -1px #22252240;
  transition: transform var(--dur-press) var(--ease-out), box-shadow var(--dur-hover) ease;
}
.sc-slider input[type="range"]::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 1px solid #22252226; box-shadow: inset 0 0 0 6px var(--c), 0 2px 6px -1px #22252240; }
.sc-slider input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.08); }
.sc-slider input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: inset 0 0 0 6px var(--c), 0 0 0 3px #fff, 0 0 0 5px var(--focus); }
.sc-slider input[type="range"]:focus-visible::-moz-range-thumb { box-shadow: inset 0 0 0 6px var(--c), 0 0 0 3px #fff, 0 0 0 5px var(--focus); }
@media (pointer: coarse) { .sc-slider input[type="range"] { height: 44px; } }

.sc-demo__result { padding: clamp(1.125rem, .9rem + 1vw, 1.75rem); border-radius: 20px; background: #ffffffad; border: 1px solid #2225220f; box-shadow: inset 0 1px 0 #fff, 0 1px 2px #2225220a; }
.sc-demo__who { display: flex; align-items: center; gap: 12px; }
.sc-demo__who b { display: block; font: 600 1.0625rem/1.25 var(--display); letter-spacing: -.02em; color: var(--ink); }
.sc-demo__who small { display: block; font-size: .8125rem; color: var(--muted); }
.sc-demo__score { display: flex; align-items: center; gap: clamp(16px, .8rem + 1vw, 24px); margin-top: 20px; }
.sc-demo__ring { --size: clamp(104px, 5.5rem + 2.5vw, 136px); transition: --p .55s var(--ease-out); }
.sc-demo__ring circle { stroke-width: 6; }
.sc-demo__ring strong { font-variant-numeric: tabular-nums; }
.sc-demo__delta { margin-top: 8px; font-size: .875rem; line-height: 1.45; color: var(--muted); }
.sc-demo__delta b { color: var(--ink); font-weight: 600; }
.sc-stack { display: flex; height: 12px; margin-top: 22px; border-radius: var(--r-pill); overflow: hidden; background: var(--line-soft); }
.sc-stack span { height: 100%; background: var(--c); }
.sc-stack span + span { box-shadow: inset 2px 0 0 #fff; }
.sc-calc { width: 100%; margin-top: 16px; font-size: .875rem; font-variant-numeric: tabular-nums; }
.sc-calc th, .sc-calc td { padding: 9px 0; border-bottom: 1px solid var(--line-soft); text-align: right; font-weight: 400; color: var(--body); }
.sc-calc thead th { padding-top: 0; font: 600 .75rem/1.3 var(--sans); color: var(--muted); }
.sc-calc thead th:first-child, .sc-calc tbody th, .sc-calc tfoot th { text-align: left; }
.sc-calc tbody th { font-weight: 500; color: var(--ink); white-space: nowrap; }
.sc-calc tbody th i { display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--c); vertical-align: .05em; }
.sc-calc td + td { padding-left: 10px; }
.sc-calc tbody td:last-child { color: var(--ink); font-weight: 600; }
.sc-calc tfoot th, .sc-calc tfoot td { border-bottom: 0; border-top: 1.5px solid var(--ink); font: 600 1rem/1.2 var(--display); color: var(--ink); padding-top: 11px; }
.sc-demo + .sample-note { margin-top: 18px; }
.sc-weights-shot { margin-top: clamp(3rem, 2rem + 4vw, 5rem); }
@media (max-width: 399px) {
  .sc-demo__result { padding: 14px 12px; }
  .sc-demo__score { gap: 12px; flex-wrap: wrap; }
  .sc-calc { font-size: .75rem; }
  .sc-calc tbody th { white-space: normal; }
  .sc-calc tbody th i { margin-right: 4px; width: 6px; height: 6px; }
  .sc-calc td + td { padding-left: 5px; }
}

/* ---------------------------------------------------------------------
   5. Annotated CV (Concept C), notes inline by default; placed in the
      margin with leader lines by scoring.js at >= 1024px
--------------------------------------------------------------------- */
.sc-cvx { --nw: 288px; --ngap: 72px; position: relative; max-width: 1100px; margin-inline: auto; text-align: left; }
.sc-cv {
  max-width: 760px; margin-inline: auto; background: var(--paper); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 1px 1px #2225220a, 0 22px 44px -26px #22252247, 0 2px 0 #fff, 0 3px 0 var(--line-soft), 0 5px 0 #fff, 0 6px 0 var(--line-soft);
}
.sc-cv__sheet { padding: clamp(1.25rem, .8rem + 2.4vw, 3rem) clamp(1rem, .5rem + 2.6vw, 3rem) clamp(1.25rem, 1rem + 1.4vw, 2.25rem); }
.sc-cvl { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); gap: 10px; align-items: baseline; padding: 3px 0; }
.sc-cvl__n { font: 500 .75rem/1 var(--mono); color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }
.sc-cvl__t { font-size: .9375rem; line-height: 1.6; color: #353A35; }
.sc-cvl--name .sc-cvl__t { font: 600 clamp(1.375rem, 1.2rem + .8vw, 1.75rem)/1.15 var(--display); letter-spacing: -.035em; color: var(--ink); }
.sc-cvl--sub .sc-cvl__t { font-size: .875rem; color: var(--muted); }
.sc-cvl--h { margin-top: 14px; }
.sc-cvl--h .sc-cvl__t { padding-bottom: 5px; border-bottom: 1px solid var(--line); font: 600 .8125rem/1.3 var(--sans); color: var(--muted); }
.sc-cvl--role { margin-top: 8px; }
.sc-cvl--role .sc-cvl__t { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 12px; font-weight: 600; color: var(--ink); }
.sc-cvl__date { font-weight: 400; font-size: .8125rem; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sc-cvl--li .sc-cvl__t { position: relative; padding-left: 15px; }
.sc-cvl--li .sc-cvl__t::before { content: ""; position: absolute; left: 2px; top: .7em; width: 5px; height: 5px; border-radius: 50%; background: #B9BEB3; }
.sc-cv mark { --hl: #F7E4CB; color: inherit; padding: 0 2px; border-radius: 2px; background: linear-gradient(transparent 10%, var(--hl) 10%, var(--hl) 92%, transparent 92%); -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: --hl .2s ease; }
.sc-cv mark.is-hot { --hl: #F1CB9B; }
.sc-cv mark.is-gap { background: none; text-decoration: underline wavy rgba(172, 76, 61, .7); text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.sc-ref { margin-left: 2px; font: 700 .75rem/0 var(--sans); color: var(--amber-ink); vertical-align: super; }

.sc-note { margin: 6px 0 10px 2.125rem; padding: 10px 14px; border-left: 3px solid var(--c, var(--amber)); border-radius: 4px 12px 12px 4px; background: #FBFAF7; font-size: .8125rem; line-height: 1.5; color: var(--body); transition: box-shadow var(--dur-hover) ease, border-color var(--dur-hover) ease; }
.sc-note b { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-bottom: 3px; font: 600 .875rem/1.35 var(--sans); color: var(--ink); }
.sc-note__n { width: 20px; height: 20px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--amber-soft); color: var(--amber-ink); font: 700 .75rem/1 var(--sans); }
.sc-note__ok { color: var(--ok); font-weight: 700; }
.sc-note--gap { border-left-color: var(--bad); }
.sc-note--gap b { color: var(--bad); }
.sc-note--gap .sc-note__n { background: var(--bad-bg); color: var(--bad); }
.sc-note.is-hot { border-color: var(--amber-ink); }

.sc-cv__total { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; padding: 14px clamp(1rem, .5rem + 2.6vw, 3rem); border-top: 1px solid var(--line); background: #FBFAF7; border-radius: 0 0 10px 10px; font-size: .8125rem; color: var(--muted); }
.sc-cv__total b { font: 600 1rem/1 var(--display); color: var(--ink); font-variant-numeric: tabular-nums; }
.sc-cv__eq { margin-left: auto; color: var(--ok); font-weight: 600; }
.sc-cv__eq b { color: var(--ok); font-size: 1.125rem; }
.sc-leaders { display: none; }
.sc-cvx + .sample-note { margin-top: 22px; }

@media (min-width: 1024px) {
  .sc-cvx.is-placed { padding-right: calc(var(--nw) + var(--ngap)); }
  .sc-cvx.is-placed .sc-cv { margin-inline: 0 auto; max-width: none; }
  .sc-cvx.is-placed .sc-note {
    position: absolute; right: 0; top: var(--top, 0); width: var(--nw); margin: 0;
    padding: 11px 14px 12px; border: 1px solid #ffffffe6; border-radius: 14px;
    background: linear-gradient(165deg, #ffffffeb, #ffffffc4);
    box-shadow: inset 3px 0 0 var(--c, var(--amber)), 0 0 0 1px #2225220f, 0 1px 2px #2225220a, 0 12px 26px -16px #22252240;
  }
  .sc-cvx.is-placed .sc-note--gap { box-shadow: inset 3px 0 0 var(--bad), 0 0 0 1px #2225220f, 0 1px 2px #2225220a, 0 12px 26px -16px #22252240; }
  .sc-cvx.is-placed .sc-note.is-hot { box-shadow: inset 3px 0 0 var(--amber-ink), 0 0 0 1px #99552238, 0 14px 30px -14px #9955224d; }
  .sc-cvx.is-placed .sc-leaders { display: block; position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
  .sc-leaders path { fill: none; stroke: #9955227a; stroke-width: 1.1; }
  .sc-leaders circle { fill: var(--amber); }
}
@media (min-width: 1440px) { .sc-cvx { --nw: 300px; --ngap: 96px; } }

.sc-shortlist { margin-top: clamp(4.5rem, 3rem + 5vw, 8rem); }
.sc-subhead { margin-bottom: clamp(1.75rem, 1.4rem + 1.4vw, 2.75rem); }
.sc-subhead .t-body { max-width: 36rem; }
.sc-shortlist__shot { max-width: 1100px; margin-inline: auto; }

/* ---------------------------------------------------------------------
   6. Feedback
--------------------------------------------------------------------- */
.sc-feedback { --split-max: 1140px; }
.sc-feedback > * { min-width: 0; }
.sc-learned-wrap { min-width: 0; }
.sc-learned { text-align: left; max-width: 34rem; margin-inline: auto; }
.sc-learned__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.sc-learned__chip { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 4px 13px 4px 10px; border-radius: var(--r-pill); background: var(--ok-bg); box-shadow: inset 0 0 0 1px var(--ok-line); font: 500 .875rem/1.2 var(--sans); color: var(--ink); }
.sc-learned__chip .ic { width: 15px; height: 15px; color: var(--ok); stroke-width: 2; }
.sc-learned__chip b { color: var(--ok); font-variant-numeric: tabular-nums; }
.sc-cap { margin-top: 14px; padding: 14px 16px 10px; }
.sc-cap .sc-cap__label { margin: 0 0 12px; }
.sc-calib { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 14px; margin-top: 10px; padding: 12px 14px; }
.sc-calib__req b { display: block; font: 600 1rem/1.3 var(--display); color: var(--ink); }
.sc-calib__req span { font-size: .8125rem; color: var(--muted); }
.sc-calib__acts { display: flex; gap: 6px; }
.sc-calib__btn { display: inline-flex; align-items: center; gap: 5px; min-height: 34px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line); background: #fff; font: 600 .8125rem/1 var(--sans); color: var(--body); }
.sc-calib__btn--on { background: var(--forest); border-color: var(--forest); color: #fff; }
.sc-calib__btn .ic { width: 14px; height: 14px; stroke-width: 2.2; }
.sc-learned-wrap .sample-note { margin-top: 16px; }
.sc-cap__scale { position: relative; height: 12px; border-radius: var(--r-pill); background: var(--line-soft); box-shadow: inset 0 0 0 1px var(--line); }
.sc-cap__fill { position: absolute; left: 25%; right: 25%; top: 0; bottom: 0; border-radius: var(--r-pill); background: linear-gradient(90deg, color-mix(in srgb, var(--amber) 55%, white), var(--amber) 50%, color-mix(in srgb, var(--amber) 55%, white)); }
.sc-cap__zero { position: absolute; left: 50%; top: -5px; bottom: -5px; width: 2px; margin-left: -1px; border-radius: 2px; background: var(--ink); }
.sc-cap__ticks { position: relative; height: 18px; margin-top: 8px; font: 600 .75rem/1 var(--display); color: var(--ink); font-variant-numeric: tabular-nums; }
.sc-cap__ticks span { position: absolute; top: 0; transform: translateX(-50%); }
.sc-cap__ticks span:nth-child(1) { left: 25%; } .sc-cap__ticks span:nth-child(2) { left: 50%; } .sc-cap__ticks span:nth-child(3) { left: 75%; }
.sc-cap__label { font-size: .8125rem; color: var(--muted); }

/* ---------------------------------------------------------------------
   7. Guarantees
--------------------------------------------------------------------- */
.sc-guarantees { display: grid; gap: clamp(1rem, .7rem + 1vw, 1.5rem); max-width: 1100px; margin-inline: auto; text-align: left; }
@media (min-width: 720px) { .sc-guarantees { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sc-g { position: relative; }
.sc-g__icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; background: var(--amber-soft); color: var(--amber-ink); box-shadow: inset 0 0 0 1px var(--amber-line); }
.sc-g__icon .ic { width: 20px; height: 20px; }
.sc-g__n { position: absolute; top: clamp(1.25rem, 1rem + 1vw, 2rem); right: clamp(1.25rem, 1rem + 1vw, 2rem); font: 600 .875rem/1 var(--display); color: var(--muted); font-variant-numeric: tabular-nums; }
.sc-g h3 { margin-top: 18px; }
.sc-g p { margin-top: 10px; font-size: var(--fs-small); line-height: 1.65; color: var(--body); }
.sc-g--limit { grid-column: 1 / -1; display: grid; gap: 14px; padding: clamp(1.25rem, 1rem + 1vw, 2rem); border-radius: var(--r-lg); border: 1px dashed var(--warn-line); background: var(--warn-bg); }
.sc-g--limit .sc-g__icon { background: #fff8e8; color: var(--warn); box-shadow: inset 0 0 0 1px var(--warn-line); }
.sc-g--limit .sc-g__n { position: static; display: block; font: 600 .8125rem/1.3 var(--sans); color: var(--warn); }
.sc-g--limit h3 { margin-top: 6px; }
@media (min-width: 720px) { .sc-g--limit { grid-template-columns: auto minmax(0, 1fr); gap: 20px; align-items: start; } }
.sc-quote { max-width: 46rem; margin: clamp(3.5rem, 2.5rem + 3vw, 5.5rem) auto 0; text-align: center; }

/* ---------------------------------------------------------------------
   8. Data path readout (inside the forest band; tokens re-map there)
--------------------------------------------------------------------- */
.sc-readout { max-width: 940px; margin-inline: auto; text-align: left; }
.sc-readout__head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding-bottom: 14px; }
.sc-readout__head p { font: 600 1rem/1.3 var(--display); letter-spacing: -.01em; color: var(--ink); }
.sc-readout__live { position: relative; width: 9px; height: 9px; border-radius: 50%; background: #A6D0B6; }
.sc-readout__live::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid #A6D0B6; opacity: 0; }
@media (prefers-reduced-motion: no-preference) { .sc-readout__live::after { animation: sc-pulse 2.6s var(--ease-out) infinite; } }
@keyframes sc-pulse { 0% { opacity: .7; transform: scale(.6); } 100% { opacity: 0; transform: scale(1.7); } }
.sc-readout__tag { margin-left: auto; padding: 3px 10px; border-radius: var(--r-pill); border: 1px solid var(--line2); font: 600 .75rem/1.3 var(--sans); color: var(--muted); }
.sc-readout__rows > div { display: grid; gap: 6px; padding: 16px 0; border-top: 1px solid var(--line); }
.sc-readout__rows dt { font: 600 .9375rem/1.35 var(--display); letter-spacing: -.01em; color: var(--ink); }
.sc-readout__rows dd { margin: 0; font-size: .9375rem; line-height: 1.6; color: var(--body); }
.sc-readout__rows .t-mono { color: var(--ink); }
.sc-badge.sc-badge { justify-self: start; align-self: start; margin-top: 2px; padding: 4px 10px; border-radius: var(--r-pill); font: 600 .75rem/1.3 var(--sans); white-space: nowrap; }
.sc-readout__rows .sc-badge--in { background: #a6d0b61f; color: #A6D0B6; box-shadow: inset 0 0 0 1px #a6d0b633; }
.sc-readout__rows .sc-badge--owner { background: #e8934a1f; color: #F2B47A; box-shadow: inset 0 0 0 1px #f2b47a38; }
@media (min-width: 720px) { .sc-readout__rows > div { grid-template-columns: 11rem minmax(0, 1fr) auto; gap: 6px 22px; align-items: baseline; } .sc-badge.sc-badge { margin-top: 0; } }
.sc-readout__foot { padding-top: 14px; border-top: 1px solid var(--line); font-size: .8125rem; line-height: 1.55; color: var(--muted); }
.sc-dp-points { display: grid; gap: 16px; max-width: 940px; margin: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem) auto 0; text-align: left; }
@media (min-width: 720px) { .sc-dp-points { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } }
.sc-dp-points > div { display: flex; align-items: flex-start; gap: 12px; }
.sc-dp-points .ic { width: 22px; height: 22px; margin-top: 1px; color: var(--amber-ink); }
.sc-dp-points p { font-size: .9375rem; line-height: 1.55; color: var(--body); }
.sc-dp-points strong { color: var(--ink); }

/* ---------------------------------------------------------------------
   9. Closing CTA
--------------------------------------------------------------------- */
.sc-cta { overflow: hidden; text-align: center; --panel-pad: clamp(2.5rem, 1.5rem + 4vw, 5.5rem) clamp(1.25rem, .8rem + 3vw, 4rem); }
.sc-cta .logo-mark { --mark: clamp(48px, 2.6rem + 1vw, 64px); margin: 0 auto 22px; }
.sc-cta .lead { max-width: 36rem; margin: 18px auto 0; }

/* ---------------------------------------------------------------------
   Big screens
--------------------------------------------------------------------- */
@media (min-width: 1920px) {
  .sc-formula { max-width: 1040px; }
  .sc-orbit { width: min(calc(100% - 64px), 500px); }
  .sc-demo, .sc-guarantees, .sc-cvx, .sc-shortlist__shot { max-width: 1200px; }
  .sc-cvx { --nw: 320px; }
  .sc-cv { max-width: 820px; }
  .sc-cvl__t { font-size: 1rem; }
  .sc-note { font-size: .875rem; }
}

/* ---------------------------------------------------------------------
   Accessibility modes
--------------------------------------------------------------------- */
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .sc-blend-legend a, .sc-demo__result, .sc-preset { background: var(--paper); border-color: var(--line2); }
  .sc-cvx.is-placed .sc-note { background: var(--paper); border-color: var(--line2); }
  .sc-exp__lbl { background: var(--paper); }
}
@media (prefers-reduced-motion: reduce) {
  .sc-demo__ring { transition: none; }
  .sc-readout__live::after { animation: none; }
}
@media (forced-colors: active) {
  .sc-blend span, .sc-mini span, .sc-stack span, .sc-band, .sc-passes__bar b, .sc-nice__bar, .sc-cap__fill, .sc-blend-legend i, .sc-calc i, .sc-part__fig::after { forced-color-adjust: none; }
  .sc-preset[aria-pressed="true"] { forced-color-adjust: none; background: Highlight; color: HighlightText; border-color: Highlight; }
  .sc-note, .sc-cvx.is-placed .sc-note { border: 1px solid CanvasText; }
  .sc-leaders path { stroke: CanvasText; }
}
@media print {
  .sc-leaders { display: none !important; }
  .sc-cvx.is-placed { padding-right: 0; }
  .sc-cvx.is-placed .sc-note { position: static; width: auto; margin: 6px 0 10px 2.125rem; }
}
/* V2: understand, experiment, then inspect the rules. */
.sc-hero { --under-nav-pad: clamp(2.75rem, 1.6rem + 3vw, 5rem); padding-bottom: clamp(3rem, 1.5rem + 4vw, 6rem); overflow: clip; }
.sc-intro { max-width: 48rem; margin-inline: auto; }
.sc-intro h1 { font-size: var(--fs-display); margin-top: 18px; line-height: 1.03; letter-spacing: -.05em; text-wrap: balance; }
.sc-intro .lead { max-width: 36rem; margin: 22px auto 0; }
.sc-jumps { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 24px; margin-top: 20px; }
.sc-jumps a { display: inline-flex; align-items: center; min-height: 44px; font-size: .875rem; font-weight: 600; color: var(--forest); text-decoration: underline; text-decoration-color: var(--line2); text-underline-offset: 4px; }
.sc-opening { display: grid; align-items: center; gap: 30px; margin: clamp(2.5rem, 1.5rem + 4vw, 5rem) auto 0; max-width: 1100px; text-align: left; }
.sc-opening__score { min-width: 0; }
.sc-opening .sc-orbit { width: min(100%, 350px); margin-inline: auto; }
.sc-opening__explain { min-width: 0; }
.sc-opening__explain h2 { margin: 12px 0 14px; font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.75rem); line-height: 1.15; letter-spacing: -.04em; }
.sc-opening .score-legend li { padding-block: 14px; }
.sc-opening .score-legend__text { font-size: .875rem; line-height: 1.6; }
.sc-opening__formula { margin-top: 18px; font-size: .875rem; line-height: 1.6; color: var(--body); }
.sc-opening + .sample-note { margin-top: 28px; }
.sc-disclosure { width: 100%; max-width: 1100px; margin: 28px auto 0; border-block: 1px solid var(--line); text-align: left; }
.sc-disclosure > summary { min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 16px; cursor: pointer; list-style: none; padding: 16px 2px; font: 600 .9375rem/1.4 var(--sans); color: var(--ink); }
.sc-disclosure summary::-webkit-details-marker, .sc-rule summary::-webkit-details-marker { display: none; }
.sc-disclosure summary .ic, .sc-rule summary .ic { width: 18px; height: 18px; flex: none; transition: transform .2s ease; }
.sc-disclosure[open] > summary .ic, .sc-rule[open] > summary .ic { transform: rotate(45deg); }
.sc-disclosure__body { padding: 12px 0 26px; }
.sc-disclosure .sc-weights-shot { margin-top: 0; }
.sc-disclosure .sc-callout { margin-top: 0; }
.sc-opening .sc-disclosure { margin-top: 20px; }
.sc-opening .sc-bands { margin: 6px 0 20px; }
.sc-demo { padding: clamp(20px, 2.5vw, 36px); background: var(--paper); border: 1px solid var(--line); border-radius: 24px; }
.sc-demo__result { background: #f6f5f0; box-shadow: none; border: 0; border-radius: 16px; }
.sc-mobile-result { display: none; }
.sc-rules { max-width: 1100px; margin-inline: auto; border-top: 1px solid var(--line2); }
.sc-rule { border-bottom: 1px solid var(--line2); scroll-margin-top: calc(var(--nav-h) + 24px); }
.sc-rule > summary { display: grid; grid-template-columns: 64px minmax(0,1fr) 18px; align-items: center; gap: 20px; min-height: 106px; padding: 18px 0; cursor: pointer; list-style: none; text-align: left; }
.sc-rule__weight { font: 500 2rem/1 var(--display); letter-spacing: -.045em; border-left: 3px solid var(--c); padding-left: 12px; }
.sc-rule__weight small { font-size: 1rem; }
.sc-rule summary strong { display: block; font: 500 1.25rem/1.2 var(--display); letter-spacing: -.025em; }
.sc-rule summary > span:not(.sc-rule__weight) > small { display: block; font: 400 .875rem/1.5 var(--sans); color: var(--muted); margin-top: 7px; }
.sc-rule .sc-part { padding: 12px 0 32px; max-width: none; gap: 30px; }
.sc-rule .sc-part__label { display: none; }
.sc-rule .sc-part h3 { font-size: 1.5rem; margin-top: 0; }
.sc-rule .sc-part__body { font-size: .9375rem; }
.sc-rule .sc-part--flip .sc-part__copy { order: 0; }
.sc-evidence-pair { display: grid; gap: 30px; max-width: 1100px; margin-inline: auto; }
.sc-evidence-pair > div { padding: 26px; border: 1px solid var(--line); border-radius: 14px; background: var(--paper); }
.sc-evidence-pair > div:first-child { background: #f7f1e7; border-color: #e6d9c6; }
.sc-evidence-pair blockquote { font: 400 clamp(1.45rem, 1rem + 1.6vw, 2rem)/1.35 var(--serif); color: var(--ink); margin-top: 18px; }
.sc-evidence-pair p { margin-top: 16px; font-size: .9375rem; line-height: 1.65; color: var(--body); }
.sc-evidence-pair h3 { margin-top: 18px; font-size: 1.4rem; letter-spacing: -.03em; }
.sc-evidence-pair .link { margin-top: 18px; font-size: .875rem; }
.sc-shortlist { margin-top: 48px; }
.sc-disclosure .sc-cvx { margin-block: 10px; }
.sc-readout__live::after { display: none; }
.sc-readout__live { background: var(--amber); }
#feedback { padding-block: clamp(40px,5vw,70px); }
#feedback .section-head { margin-bottom: 12px; }
#feedback .sc-disclosure { max-width: 1100px; }
@media (min-width: 720px) { .sc-evidence-pair { grid-template-columns: 1fr 1fr; gap: 20px; } }
@media (min-width: 1024px) {
  .sc-opening { grid-template-columns: .8fr 1.2fr; gap: 64px; }
  .sc-opening .sc-orbit { width: min(100%, 380px); }
  .sc-rule .sc-part { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 46px; }
  .sc-demo__result { position: sticky; top: calc(var(--nav-h) + 24px); }
}
@media (max-width: 1023px) {
  .sc-mobile-result { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 4px 10px; position: sticky; top: calc(var(--nav-h) + 8px); z-index: 5; margin: -2px -6px 22px; padding: 12px 14px; background: #253c30; color: #f8f7f4; border-radius: 12px; box-shadow: 0 5px 14px #22252218; }
  .sc-mobile-result > span:first-child { font-size: .75rem; }
  .sc-mobile-result b { font: 600 1.75rem/1 var(--display); margin-left: auto; }
  .sc-mobile-result > span:last-child { font-size: .75rem; color: #d2dfd2; }
}
@media (max-width: 639px) {
  .sc-opening { gap: 26px; }
  .sc-opening .sc-orbit { width: min(78vw,300px); }
  .sc-opening__explain .eyebrow, .sc-opening__explain h2 { text-align: center; }
  .sc-opening__explain h2 { font-size: 1.7rem; }
  .sc-demo { padding: 20px 16px; border-radius: 18px; }
  .sc-presets { gap: 7px; }
  .sc-preset { padding-inline: 12px; font-size: .8125rem; }
  .sc-rule > summary { grid-template-columns: 54px minmax(0,1fr) 18px; gap: 12px; }
  .sc-rule__weight { font-size: 1.8rem; padding-left: 8px; }
  .sc-rule summary strong { font-size: 1.125rem; }
  .sc-rule summary > span:not(.sc-rule__weight) > small { font-size: .8125rem; }
  .sc-evidence-pair { gap: 12px; }
  .sc-evidence-pair > div { padding: 22px; }
  .sc-rule .sc-part__media .frame { --ar-sm:1080 / 1420; }
}
@media (prefers-reduced-motion: reduce) { .sc-disclosure summary .ic, .sc-rule summary .ic { transition: none; } }
@media (forced-colors: active) { .sc-mobile-result { border: 1px solid CanvasText; } }
@media (min-width: 760px) and (max-width: 1023px) {
  .sc-opening { grid-template-columns: .8fr 1.2fr; gap: 36px; }
  .sc-opening .sc-orbit { width: 100%; }
  .sc-opening__explain h2 { font-size: 1.8rem; }
}
@media (min-width: 800px) and (max-width: 1023px) {
  .sc-demo { grid-template-columns: minmax(0,1.08fr) minmax(0,.92fr); align-items: start; gap: 24px; padding: 24px; }
  .sc-mobile-result { display: none; }
  .sc-demo__result { position: sticky; top: calc(var(--nav-h) + 24px); padding: 18px; }
  .sc-demo__score { gap: 12px; flex-wrap: wrap; }
  .sc-demo__ring { --size:104px; }
  .sc-calc { font-size: .75rem; }
  .sc-calc tbody th { white-space: normal; }
  .sc-calc tbody th i { margin-right: 4px; }
  .sc-calc td + td { padding-left: 5px; }
}
.sc-nojs { max-width: 45rem; margin: 0 auto 24px; padding: 18px; border: 1px solid var(--line2); border-radius: 12px; font-size: .9375rem; line-height: 1.65; color: var(--body); }
html:not(.js) .sc-presets, html:not(.js) .sc-slider input, html:not(.js) .sc-mobile-result { display: none !important; }

/* Final: a direct-control result follows the slider without a lag. */
.sc-demo__ring { transition: none; }
.sc-demo + .sample-note { max-width: 52rem; margin-inline: auto; text-wrap: pretty; }
@media (min-width: 360px) and (max-width: 639px) {
  .sc-calc { font-size: .8125rem; }
  .sc-calc th, .sc-calc td { padding-block: 11px; }
}