/* ════════════════════════════════════════════════════════════════════════════
   RATESCORE SCORE-MACHINE — compact 5-zone rebuild (2026-07-16, Fable 5).
   History: extracted from swarm.html (#score-machine / .scorecard--v2) + its
   rebellion.css base rules, light-adapted for the flagship homepage. This pass
   compresses 8 stacked full-width zones (~649px) into 5 zones, several of them
   HORIZONTAL, inside a clamp(380px,60vh,640px) desktop height budget:

     Z1  header      — RateScore(TM) left · "Live example" pill + Live dot right
     Z2  identity    — Name · Specialty · ST, scope_label behind an info affordance
     Z3  primary     — ~148px gauge (score in-arc, grade at the arc terminus)
                       side-by-side with the $ documented-annual-uplift readout
     Z4  comparison  — ONE track, THREE markers (you=amber fill · peer=grey tick
                       · P90=cyan end-mark, value blurred + PRO — the value-gate)
     Z5  action      — full-card link + the "real provider" micro-caption, one row

   Every selector is scoped under ".smx" so this sheet cannot leak onto, or be
   clobbered by, the host page. Self-contained: all custom properties are
   (re)declared on .smx itself. The decorative orbit ring and the rotating conic
   border were removed on purpose: exactly ONE live cue remains (the pulsing
   green Live dot). All motion is transform/opacity (plus the gauge arc's
   stroke-dashoffset, an existing idiom). Reduced-motion collapses everything
   to final state at the bottom of this sheet.
   ════════════════════════════════════════════════════════════════════════════ */

.smx{
  --void:#04060b; --panel:#0a0f1b; --ink:#eef2fb; --mut:#9aa6c2; --faint:#5d6885;
  --line:rgba(255,255,255,.08); --cyan:#00E5FF; --amberm:#F0A84B; --green:#14e09a;
  --ease:cubic-bezier(.22,1,.36,1);
  position:relative;
  display:block;
  width:100%;
  max-width:430px;
  margin:0 auto;
  font-family:Inter,system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.smx, .smx *, .smx *::before, .smx *::after{ box-sizing:border-box; }
.smx a{ color:inherit; text-decoration:none; }

/* soft teal halo behind the dark card — lifts it off a LIGHT page */
.smx::before{
  content:"";
  position:absolute; z-index:-1; inset:-8% -6% -10% -6%;
  background:radial-gradient(60% 55% at 50% 42%, rgba(15,181,166,.16), rgba(15,181,166,.05) 45%, transparent 72%);
  pointer-events:none; filter:blur(2px);
}

/* one-time entrance: fade + rise, compositor-only (host pages may override) */
.smx .scorecard{ animation:smx-card-in 1.05s cubic-bezier(.16,1,.3,1) both; }
@keyframes smx-card-in{ from{ opacity:0; transform:translate3d(0,32px,0) scale(.97); } to{ opacity:1; transform:none; } }

/* ── card chrome: dark card floating on white, soft halo + inner hairline ── */
.smx .scorecard{
  position:relative;
  max-width:430px; margin:0 auto;
  padding:20px 20px 16px;
  border-radius:24px;
  background:radial-gradient(90% 70% at 50% -5%,rgba(0,229,255,.14),transparent 60%),linear-gradient(180deg,#0c1426d1,#060a14eb);
  border:1px solid rgba(0,229,255,.26);
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset,
             0 40px 90px -34px rgba(10,19,22,.55),
             0 8px 24px -12px rgba(10,19,22,.28),
             0 0 0 1px rgba(10,19,22,.06);
  backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
}
.smx .scorecard--live{ overflow:hidden; }

/* ═══ Z1 · header — brand left, tag + live cue pushed right ═══ */
.smx .scorecard__top{ display:flex; align-items:center; gap:8px; }
.smx .scorecard__top > *{ min-width:0; }
.smx .scorecard__brand{ font:700 13px/1 "Space Grotesk",sans-serif; letter-spacing:-.01em; color:#fff; }
.smx .reg{ font-size:.6em; vertical-align:.55em; margin-left:1px; -webkit-text-fill-color:var(--cyan); color:var(--cyan); }
.smx .sc-sample-tag{
  margin-left:auto;
  font:700 9px/1 "Space Grotesk",sans-serif; letter-spacing:.16em; text-transform:uppercase;
  color:#a9b6d4; padding:4px 9px; border:1px solid rgba(255,255,255,.16); border-radius:999px;
  background:rgba(255,255,255,.04); flex-shrink:0;
}
/* the ONE live cue that survives the de-chroming: the pulsing green dot */
.smx .scorecard__live{ display:inline-flex; align-items:center; gap:6px; font:600 10px/1 "Space Grotesk",sans-serif; letter-spacing:.14em; text-transform:uppercase; color:var(--green); transition:opacity .3s ease; flex-shrink:0; }
.smx .scorecard__live i{ width:6px; height:6px; border-radius:50%; background:var(--green); box-shadow:0 0 8px var(--green); animation:smx-bpulse 1.8s var(--ease) infinite; }
@keyframes smx-bpulse{ 0%,to{ opacity:1; transform:scale(1); } 50%{ opacity:.35; transform:scale(.7); } }

/* ═══ Z2 · identity — one muted line + the scope info affordance ═══ */
.smx .sc-identity{
  opacity:0; margin:12px 0 0; max-width:60ch;
  display:flex; flex-wrap:wrap; align-items:center; gap:5px 7px;
  font:500 11px/1.35 "Space Grotesk",sans-serif; letter-spacing:.02em; color:var(--faint);
  transition:opacity .5s ease;
}
.smx .sc-identity__npi{ color:var(--mut); font-weight:600; }
.smx .sc-identity__dot{ width:3px; height:3px; border-radius:50%; background:#3a4560; flex-shrink:0; }
.smx .sc-identity > *{ min-width:0; overflow-wrap:break-word; word-break:break-word; }

/* the info affordance: 18px glyph, invisible 44px hit area */
.smx .sc-info{
  position:relative; flex:none; width:18px; height:18px; margin-left:2px; padding:0;
  border-radius:50%; border:1px solid rgba(255,255,255,.22); background:rgba(255,255,255,.05);
  color:var(--mut); font:600 10px/1 "Space Grotesk",sans-serif; font-style:normal;
  display:inline-grid; place-items:center; cursor:pointer;
  transition:color .2s ease,border-color .2s ease;
}
.smx .sc-info::after{ content:""; position:absolute; inset:-13px; } /* 44px tap target */
.smx .sc-info:hover{ color:#fff; border-color:rgba(0,229,255,.5); }
.smx .sc-info:focus-visible{ outline:2px solid var(--cyan); outline-offset:2px; }

/* honesty line — the endpoint's scope_label VERBATIM. Collapsed behind the
   affordance, never gone: one tap (or hover) away, exact words intact. */
.smx .sc-scope{
  display:none; margin:8px 0 0; font:500 10.5px/1.5 "Inter",sans-serif; color:var(--faint);
  max-width:40ch;
}
#score-machine.is-scope-open .sc-scope{ display:block; }
@media(hover:hover){ .smx .sc-identity:has(.sc-info:hover) + .sc-scope{ display:block; } }

/* ═══ Z3 · primary band — gauge + uplift, ONE horizontal band ═══ */
.smx .sc-band{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:20px; align-items:center; margin-top:20px; }
.smx .sc-band__g{ width:148px; flex:none; }
.smx .hgauge{ position:relative; width:100%; aspect-ratio:1/1; overflow:visible; }
.smx .hgauge svg{ width:100%; height:100%; display:block; }
.smx .hgauge__c{ position:absolute; inset:0; display:grid; place-items:center; }
.smx .hgauge__num{
  font:700 clamp(32px,4vw,38px)/1 "Space Grotesk",sans-serif; letter-spacing:-.04em;
  font-variant-numeric:tabular-nums; transform:translateY(-4px);
  background:linear-gradient(180deg,#fff,var(--cyan)); -webkit-background-clip:text; background-clip:text; color:transparent;
  transition:opacity .4s ease;
}
/* the grade pill lands AT the arc terminus: the 90-degree gap at the gauge foot */
.smx .hgauge__slot{
  position:absolute; left:50%; bottom:0; transform:translateX(-50%);
  width:140px; min-height:22px; display:grid; place-items:center;
}
.smx .hgauge__slot>*{ grid-area:1/1; }
.smx .hgauge__grade{
  font:800 12px/1 "Space Grotesk",sans-serif; padding:4px 11px; border-radius:999px;
  background:#14e09a29; color:var(--green); transform-origin:center; transition:opacity .35s ease,transform .35s ease;
}
.smx .hgauge__grade.is-stamp{ animation:smx-grade-stamp .55s cubic-bezier(.16,1,.3,1) both; }
@keyframes smx-grade-stamp{ 0%{ opacity:0; transform:scale(1.7); } 62%{ opacity:1; transform:scale(.92); } 100%{ opacity:1; transform:scale(1); } }
.smx .hgauge__wait{
  opacity:0; font:600 9.5px/1.4 "Inter",sans-serif; color:#9fb0d2; text-align:center; max-width:136px;
  transform:translate3d(0,4px,0); transition:opacity .5s ease,transform .5s cubic-bezier(.16,1,.3,1); pointer-events:none;
}
.smx .hgauge--ask .hgauge__wait{ opacity:1; transform:none; }
.smx .hgauge--ask .hgauge__grade{ opacity:0 !important; transform:scale(.85); pointer-events:none; }
.smx .hgauge--ask svg circle:nth-of-type(1){ stroke:rgba(140,170,210,.16); }
.smx .hgauge--ask .hgauge__num{ background:none; -webkit-background-clip:unset; background-clip:unset; color:#fff; }
.smx .hgauge__scale{ margin-top:8px; text-align:center; font:700 8.5px/1 "Space Grotesk",sans-serif; letter-spacing:.13em; color:#8fa3c0; white-space:nowrap; }

/* uplift readout: de-boxed typographic block (nested-box chrome removed) */
.smx .sc-uplift{ opacity:0; min-width:0; transition:opacity .55s ease; }
.smx .sc-uplift__lbl{ font:700 9px/1.4 "Space Grotesk",sans-serif; letter-spacing:.15em; text-transform:uppercase; color:var(--amberm); }
.smx .sc-uplift__val{
  margin-top:8px; font:800 clamp(25px,6vw,33px)/1 "Space Grotesk",sans-serif; letter-spacing:-.03em;
  font-variant-numeric:tabular-nums; overflow-wrap:break-word;
  background:linear-gradient(180deg,#fff 25%,var(--cyan)); -webkit-background-clip:text; background-clip:text; color:transparent;
}
/* signature moment: the $ figure settles up as it counts (JS adds .is-settle) */
.smx .sc-uplift__val.is-settle{ animation:smx-uplift-in .7s cubic-bezier(.16,1,.3,1) both; }
@keyframes smx-uplift-in{ from{ opacity:0; transform:translate3d(0,10px,0); } to{ opacity:1; transform:none; } }
.smx .sc-uplift__sub{ margin-top:8px; font:500 10px/1.5 "Inter",sans-serif; color:var(--faint); max-width:26ch; }

/* ═══ Z4 · comparison — one track, three markers, ruled off (no nested box) ═══ */
.smx .sc-rate-panel{ opacity:0; margin-top:20px; padding-top:16px; border-top:1px solid var(--line); transition:opacity .55s ease .1s; }
.smx .sc-rate-panel__head{ display:flex; align-items:center; gap:8px; }
.smx .sc-rate-panel__head > *{ min-width:0; }
.smx .sc-rate-panel__code{
  font:600 9px/1 "Space Grotesk",sans-serif; letter-spacing:.08em; text-transform:uppercase; color:var(--cyan);
  padding:4px 8px; border-radius:6px; background:#00e5ff14; border:1px solid rgba(0,229,255,.2); flex-shrink:0;
}
.smx .sc-rate-panel__payer{ font:600 11.5px/1.3 "Space Grotesk",sans-serif; color:var(--mut); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.smx .sc-meter{ position:relative; margin-top:14px; padding:6px 0; }
.smx .sc-meter__track{ position:relative; height:6px; border-radius:999px; background:rgba(255,255,255,.08); }
/* your rate: the amber fill (scaleX = the same computed percentage as before) */
.smx .sc-meter__fill{
  position:absolute; inset:0; border-radius:999px; transform:scaleX(0); transform-origin:left center;
  transition:transform 1.1s cubic-bezier(.22,1,.36,1);
  background:linear-gradient(90deg,rgba(240,168,75,.35),var(--amberm));
}
/* peer + P90: full-width ghosts translateX(p%) so a percent of self = a percent
   of track — the marker offset stays transform-only and animatable */
.smx .sc-meter__mark{
  position:absolute; top:-5px; bottom:-5px; left:0; width:100%; pointer-events:none; opacity:0;
  transform:translateX(0);
  transition:transform 1.1s cubic-bezier(.22,1,.36,1),opacity .45s ease .2s;
}
.smx .sc-meter__mark::before{ content:""; position:absolute; left:-1px; top:0; bottom:0; width:2px; border-radius:2px; }
.smx .sc-meter__mark--peer::before{ background:#9aa6c2; }
.smx .sc-meter__mark--top{ top:-7px; bottom:-7px; }
.smx .sc-meter__mark--top::before{ width:2.5px; background:linear-gradient(180deg,var(--cyan),var(--green)); box-shadow:0 0 10px rgba(0,229,255,.7); }

/* the three values read inline. #sc-p75 keeps .sm-lockv + .sm-protag (value-gate). */
.smx .sc-legend{ display:flex; flex-wrap:wrap; gap:6px 16px; margin-top:10px; }
.smx .sc-legend__it{ display:inline-flex; align-items:center; gap:6px; font:500 10.5px/1.2 "Inter",sans-serif; color:var(--faint); white-space:nowrap; }
.smx .sc-legend__it b{ color:#fff; font:700 11.5px/1 "Space Grotesk",sans-serif; font-variant-numeric:tabular-nums; }
.smx .sc-legend__it i{ width:8px; height:8px; border-radius:2px; flex:none; font-style:normal; }
.smx .sc-legend__it--you i{ background:var(--amberm); }
.smx .sc-legend__it--peer i{ background:#9aa6c2; }
.smx .sc-legend__it--top i{ background:var(--cyan); box-shadow:0 0 8px rgba(0,229,255,.6); }
.smx .sc-legend__it--top b{ color:var(--cyan); }

/* one short insight PHRASE inline; full reasoning behind a tap (JS toggles) */
.smx .sc-insight{ margin:10px 0 0; font:500 11px/1.5 "Inter",sans-serif; color:var(--mut); max-width:40ch; display:flex; align-items:center; flex-wrap:wrap; border:0; background:none; text-align:left; padding:0; }
.smx .sc-insight.has-more{ cursor:pointer; min-height:44px; margin:0 0 -10px; }
.smx .sc-insight.has-more::after{
  content:"more"; margin-left:6px; color:var(--cyan);
  font:600 9px/1 "Space Grotesk",sans-serif; letter-spacing:.1em; text-transform:uppercase; flex:none;
}
.smx .sc-insight.has-more[aria-expanded="true"]::after{ content:"less"; }
.smx .sc-insight:focus-visible{ outline:2px solid var(--cyan); outline-offset:3px; border-radius:6px; }

/* ═══ Z5 · action row — link + the real-provider micro-caption, one row ═══ */
.smx .sc-actions{
  opacity:0; display:flex; align-items:center; gap:12px;
  margin-top:16px; padding-top:14px; border-top:1px solid var(--line);
  transition:opacity .55s ease .15s;
}
.smx .sc-btn-yours{
  flex:1 1 auto; display:flex; align-items:center; justify-content:center; min-height:44px; padding:0 14px; border-radius:10px;
  font:600 12.5px/1 "Space Grotesk",sans-serif; color:var(--mut); border:1px solid rgba(255,255,255,.1); background:#ffffff08;
  transition:border-color .2s,color .2s; white-space:nowrap;
}
.smx .sc-btn-yours:hover{ color:#fff; border-color:#ffffff38; }
.smx .sc-actions__cap{ flex:1 1 auto; font:500 10px/1.5 "Inter",sans-serif; color:var(--faint); text-align:right; max-width:20ch; }

/* reveal hook: JS adds .is-revealed to fade each zone in on its own delay */
.smx .sc-identity.is-revealed,
.smx .sc-uplift.is-revealed,
.smx .sc-rate-panel.is-revealed,
.smx .sc-actions.is-revealed{ opacity:1; }

/* ── search form styles (component contract for non-homepage mounts; the
   homepage card carries no form — the hero field owns capture there) ── */
.smx .sc-go{ display:flex; flex-direction:column; gap:8px; margin-top:14px; }
.smx .sc-go__inwrap{ position:relative; }
.smx .sc-go__in{
  width:100%; box-sizing:border-box; height:52px; padding:0 16px; border-radius:14px;
  border:1px solid rgba(0,229,255,.32); background:rgba(2,16,24,.72); color:#fff;
  font:600 15px/1 "Space Grotesk",sans-serif; letter-spacing:.02em; font-variant-numeric:tabular-nums;
  transition:border-color .2s,box-shadow .2s; -webkit-appearance:none; appearance:none;
}
.smx .sc-go__in::placeholder{ color:#7e8aa9; font-weight:500; letter-spacing:.01em; }
.smx .sc-go__in:focus{ outline:none; border-color:var(--cyan); box-shadow:0 0 0 3px rgba(0,229,255,.16); }
.smx .sc-go__btn{
  display:flex; align-items:center; justify-content:center; gap:8px; width:100%; min-height:52px;
  border:0; border-radius:14px; cursor:pointer; font:700 15.5px/1 "Space Grotesk",sans-serif; letter-spacing:-.01em;
  color:#000; background:linear-gradient(180deg,#8af3ff,var(--cyan)); box-shadow:0 14px 40px -12px rgba(0,229,255,.55);
  transition:transform .25s var(--ease),box-shadow .25s;
}
.smx .sc-go__btn:hover{ transform:translateY(-2px); box-shadow:0 18px 48px -10px rgba(0,229,255,.65); }
.smx .sc-go__btn:active{ transform:translateY(0) scale(.99); }
.smx .sc-go__btn:focus-visible{ outline:2px solid var(--cyan); outline-offset:3px; }
.smx .sc-go.is-error .sc-go__in{ border-color:rgba(255,80,96,.65); box-shadow:0 0 0 3px rgba(255,80,96,.12); }
.smx .sc-go.is-error{ animation:smx-shake .42s cubic-bezier(.36,.07,.19,.97) both; }
@keyframes smx-shake{ 10%,90%{ transform:translateX(-1px); } 20%,80%{ transform:translateX(2px); } 30%,50%,70%{ transform:translateX(-4px); } 40%,60%{ transform:translateX(4px); } }
.smx .npi-hint{
  min-height:18px; margin:6px 0 0; font:500 12.5px/1.4 "Inter",sans-serif; color:rgba(255,122,136,.95);
  opacity:0; transform:translateY(-4px); transition:opacity .3s ease,transform .3s cubic-bezier(.16,1,.3,1);
}
.smx .npi-hint.is-on{ opacity:1; transform:none; }
.smx .sc-ta{
  position:absolute; top:calc(100% + 6px); left:0; right:0; z-index:60; background:#0a1220;
  border:1px solid rgba(255,255,255,.14); border-radius:14px; box-shadow:0 24px 60px -18px rgba(0,0,0,.85);
  max-height:262px; overflow-y:auto; -webkit-overflow-scrolling:touch; text-align:left;
}
.smx .sc-ta[hidden]{ display:none; }
.smx .npi-sample-link{
  display:inline-flex; align-items:center; justify-content:center; text-align:center;
  min-height:44px; padding-block:6px; margin-top:2px;
  border:0; background:none; cursor:pointer;
  font:600 12.5px/1.3 "Inter",sans-serif; color:#5fe0d3; text-decoration:underline; text-decoration-color:rgba(95,224,211,.5);
  transition:color .2s ease;
}
.smx .npi-sample-link:hover{ color:#9af5ff; }
.smx .npi-sample-link:focus-visible{ outline:2px solid var(--cyan); outline-offset:3px; border-radius:6px; }

/* ═══ responsive: 320px → 1440px, no horizontal scroll, tap targets ≥44px ═══ */
@media (max-width:560px){
  .smx{ max-width:min(360px,100%); }
  .smx .scorecard{ padding:16px 16px 14px; }
  .smx .sc-band{ gap:14px; }
  .smx .sc-band__g{ width:128px; }
  .smx .hgauge__num{ font-size:clamp(28px,8.5vw,32px); }
  .smx .hgauge__slot{ width:124px; }
  .smx .hgauge__wait{ max-width:120px; font-size:9px; }
  .smx .sc-uplift__val{ font-size:clamp(22px,7vw,27px); }
}
/* 320-class screens: the primary band collapses to one column, gauge over uplift */
@media (max-width:379px){
  .smx .sc-band{ grid-template-columns:1fr; justify-items:center; gap:16px; }
  .smx .sc-uplift{ text-align:center; }
  .smx .sc-uplift__sub{ margin-inline:auto; }
  .smx .sc-actions{ flex-direction:column; align-items:stretch; }
  .smx .sc-actions__cap{ text-align:center; max-width:none; }
}

/* ═══ reduced motion: kill all animation, keep final state ═══ */
@media (prefers-reduced-motion: reduce){
  .smx *, .smx *::before, .smx *::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .smx .sc-go__btn:hover, .smx .npi-sample-link:hover{ transform:none; }
  .smx .sc-uplift__val.is-settle{ animation:none; opacity:1; transform:none; }
}

/* value-gating: negotiation marks stay behind the glass (David 2026-07-15) */
.sm-lockv{filter:blur(7px);-webkit-user-select:none;user-select:none;pointer-events:none}
.sm-protag{display:inline-block;margin-left:6px;padding:2.5px 6px;border-radius:5px;
  font:700 8.5px/1 ui-monospace,monospace;letter-spacing:.12em;color:#062A26;
  background:linear-gradient(110deg,#14E09A,#00E5FF);vertical-align:2px;
  box-shadow:0 0 12px rgba(20,224,154,.35)}