/* ============================================================================
   fog.css — Reddenda "free but gated" FOG experience (premium rate card, mostly locked)
   ---------------------------------------------------------------------------
   Extends the app-flagship.css magnitude-substrate law:
     BLUR THE IDENTITY, KEEP THE MAGNITUDE.
   A locked dollar sits behind a designed frosted substrate (.fog-sub) that reads
   as "a specific real thing behind glass", while the honest gap magnitude stays
   visible as a real-ratio bar (.fog-bar). Nothing here fabricates a number:
   locked rows never receive a dollar client-side (see fog.js binding notes), the
   substrate shows a REDACTION mask (never a fake digit), and the annual-uplift
   headline defaults to an honest INDEXING state that only lights up when the
   local-peer-median tier is verified server-side.

   Light page context, dark instrument cards (the frosted substrate + gauge are
   engineered for a dark backdrop, exactly like the homepage gauge and the
   rate-score.html shell). Palette matches Reddenda teal.
   Scope EVERYTHING under .fog so it can drop onto any page without leaking.
   ============================================================================ */

.fog{
  /* local tokens — fall back to site --cc-* / rate-score vars when present */
  --fog-teal:#0FB5A6;
  --fog-teal-brt:#14e09a;        /* bright teal readable on dark */
  --fog-teal-ink:#04221f;        /* ink on teal fills */
  --fog-teal-rgb:15,181,166;
  --fog-ink:#070910;             /* deepest instrument bg */
  --fog-panel-a:#0d111a;
  --fog-panel-b:#080b12;
  --fog-fg:#ffffff;
  --fog-fg-mut:rgba(255,255,255,.66);
  --fog-fg-fnt:rgba(255,255,255,.42);
  --fog-line:rgba(255,255,255,.09);
  --fog-line-2:rgba(255,255,255,.16);
  --fog-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --fog-sans:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  --fog-ease:cubic-bezier(.16,1,.3,1);
  --fog-ease-expo:cubic-bezier(.22,1,.36,1);

  display:block;
  max-width:640px;
  margin:0 auto;
  font-family:var(--fog-sans);
  color:#0A0B0C;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.fog *,.fog *::before,.fog *::after{box-sizing:border-box}

/* ═══════════════════════════════════════════════════════════════════════
   1 · HEADER INSTRUMENT (UNLOCKED) — the RateScore dial + identity
   Dark instrument card on the white page.
   ═══════════════════════════════════════════════════════════════════════ */
.fog-head{
  position:relative; overflow:hidden;
  border-radius:22px; padding:24px 22px 22px; text-align:center;
  background:linear-gradient(180deg,var(--fog-panel-a),var(--fog-panel-b));
  box-shadow:0 0 0 1px rgba(var(--fog-teal-rgb),.28),
             0 30px 70px -24px rgba(10,11,12,.34),
             0 6px 18px -8px rgba(10,11,12,.18);
  color:var(--fog-fg);
}
.fog-head::before{ content:""; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg,transparent,rgba(var(--fog-teal-rgb),.7),transparent); }

.fog-head__eyebrow{ display:inline-flex; align-items:center; gap:7px;
  font-family:var(--fog-mono); font-size:10px; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--fog-teal-brt); margin-bottom:6px; }
.fog-head__eyebrow i{ width:6px; height:6px; border-radius:50%; background:var(--fog-teal-brt);
  box-shadow:0 0 8px rgba(var(--fog-teal-rgb),.7); animation:fog-pulse 2.4s ease-in-out infinite; }
@keyframes fog-pulse{ 0%,100%{opacity:1} 50%{opacity:.4} }

/* gauge — 270° arc, dark-on-dark, same geometry as the homepage machine */
.fog-gauge{ position:relative; width:min(58vw,220px); margin:6px auto 2px; aspect-ratio:1/1; }
.fog-gauge svg{ width:100%; height:100%; display:block; overflow:visible; }
.fog-gauge__arc{ transition:stroke-dashoffset 1.4s cubic-bezier(.33,1,.68,1); }
.fog-gauge__bloom{ position:absolute; inset:-10%; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle,rgba(var(--fog-teal-rgb),.22),rgba(20,224,154,.06) 52%,transparent 70%); }
.fog-gauge__c{ position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; }
.fog-gauge__num{ font-family:var(--fog-mono); font-weight:700; font-size:clamp(40px,11vw,56px);
  line-height:1; letter-spacing:-.04em; font-variant-numeric:tabular-nums;
  background:linear-gradient(180deg,#fff,var(--fog-teal)); -webkit-background-clip:text;
  background-clip:text; color:transparent; }
.fog-gauge__num.is-indexing{ background:linear-gradient(180deg,#fff,#5b6572);
  -webkit-background-clip:text; background-clip:text; animation:fog-breathe 2.8s ease-in-out infinite; }
@keyframes fog-breathe{ 0%,100%{opacity:.92;transform:scale(1)} 50%{opacity:1;transform:scale(1.04)} }
.fog-gauge__grade{ margin-top:8px; font-family:var(--fog-mono); font-size:13px; font-weight:700;
  color:var(--fog-teal-ink); background:var(--fog-teal-brt); padding:3px 12px; border-radius:999px;
  letter-spacing:.02em; }
.fog-gauge__grade.is-indexing{ color:var(--fog-fg-mut); background:rgba(255,255,255,.07);
  box-shadow:inset 0 0 0 1px var(--fog-line-2); }

.fog-head__scale{ font-family:var(--fog-mono); font-size:9.5px; font-weight:600; letter-spacing:.1em;
  color:var(--fog-fg-fnt); margin-top:10px; }
.fog-head__id{ margin-top:14px; padding-top:14px; border-top:1px solid var(--fog-line); }
.fog-head__name{ font-family:var(--fog-sans); font-size:clamp(16px,3.4vw,19px); font-weight:600;
  color:#fff; letter-spacing:-.01em; line-height:1.2; }
.fog-head__meta{ font-family:var(--fog-mono); font-size:11px; letter-spacing:.03em;
  color:var(--fog-fg-mut); margin-top:4px; }

/* ═══════════════════════════════════════════════════════════════════════
   2 · ANNUAL-UPLIFT HEADLINE — honest INDEXING by default, lights up when ready
   ═══════════════════════════════════════════════════════════════════════ */
.fog-uplift{ position:relative; overflow:hidden; margin:16px 0; padding:18px 20px;
  border-radius:16px; background:#F6F8FA; border:1px solid #EAEBEC; }
.fog-uplift__eyebrow{ font-family:var(--fog-mono); font-size:9.5px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:#0A8E83; margin-bottom:6px; }

/* INDEXING state (default) — a designed honest holding state, not an error */
.fog-uplift[data-state="indexing"]{ background:
  linear-gradient(180deg,#F6F8FA,#FFFFFF); }
.fog-uplift[data-state="indexing"] .fog-uplift__ready{ display:none; }
.fog-uplift__idx{ display:flex; align-items:center; gap:12px; }
.fog-uplift__idxbar{ position:relative; flex:none; width:44px; height:44px; border-radius:12px;
  background:#EEF2F4; overflow:hidden; }
.fog-uplift__idxbar::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(90deg,transparent,rgba(15,181,166,.28),transparent);
  background-size:220% 100%; animation:fog-shimmer 1.9s ease-in-out infinite; }
@keyframes fog-shimmer{ 0%{background-position:120% 0} 100%{background-position:-120% 0} }
.fog-uplift__idxtxt strong{ display:block; font-size:14px; font-weight:600; color:#0A0B0C; letter-spacing:-.01em; }
.fog-uplift__idxtxt span{ display:block; font-size:12px; color:#5B6166; line-height:1.5; margin-top:3px; }

/* READY state — real modeled number (only rendered when server confirms tier) */
.fog-uplift[data-state="ready"] .fog-uplift__idx{ display:none; }
.fog-uplift__val{ font-family:var(--fog-mono); font-size:clamp(26px,7vw,34px); font-weight:700;
  letter-spacing:-.02em; color:#0A8E83; font-variant-numeric:tabular-nums; line-height:1; }
.fog-uplift__label{ font-size:13px; color:#0A0B0C; font-weight:600; margin-top:6px; }
.fog-uplift__q{ font-family:var(--fog-mono); font-size:10px; color:#6B7480; letter-spacing:.02em; margin-top:6px; }

/* ═══════════════════════════════════════════════════════════════════════
   3 · THE RATE CARD (dark instrument) — one proof row unlocked, the rest fogged
   ═══════════════════════════════════════════════════════════════════════ */
.fog-card{ position:relative; border-radius:20px; overflow:hidden;
  background:linear-gradient(180deg,var(--fog-panel-a),var(--fog-panel-b));
  box-shadow:0 0 0 1px var(--fog-line-2), 0 24px 60px -28px rgba(10,11,12,.4);
  color:var(--fog-fg); }
.fog-card__head{ display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  padding:16px 18px 12px; border-bottom:1px solid var(--fog-line); }
.fog-card__title{ font-family:var(--fog-mono); font-size:11px; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:#fff; }
.fog-card__sub{ font-family:var(--fog-mono); font-size:10px; letter-spacing:.04em; color:var(--fog-fg-fnt); }

/* ── a row ── grid: heat | code+desc | bar | value ── */
.fog-row{ position:relative; display:grid;
  grid-template-columns:3px minmax(0,1fr) minmax(96px,1.15fr) auto;
  align-items:center; gap:14px; padding:14px 18px; border-bottom:1px solid var(--fog-line); }
.fog-row:last-child{ border-bottom:0; }
.fog-row__heat{ align-self:stretch; width:3px; border-radius:2px; background:var(--fog-line-2); }
.fog-row__heat[data-q="top"]{ background:var(--fog-teal-brt); box-shadow:0 0 10px rgba(var(--fog-teal-rgb),.5); }
.fog-row__heat[data-q="mid"]{ background:#F59E0B; }
.fog-row__heat[data-q="low"]{ background:#8792a0; }

.fog-row__cpt{ min-width:0; }
.fog-row__code{ font-family:var(--fog-mono); font-size:14px; font-weight:700; color:#fff;
  letter-spacing:.02em; font-variant-numeric:tabular-nums; }
.fog-row__desc{ font-size:11.5px; color:var(--fog-fg-mut); margin-top:2px; line-height:1.35;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ── the magnitude bar — real ratio drives the fill; NO number is printed on
   locked rows (Medicare is public, so a stated ratio would reconstruct the
   dollar). The bar is a deliberately axis-free magnitude cue. ── */
.fog-barwrap{ min-width:0; }
.fog-bar{ position:relative; height:5px; border-radius:3px; overflow:hidden;
  background:rgba(255,255,255,.08); width:100%; }
.fog-bar__fill{ position:absolute; inset:0 auto 0 0; height:100%; border-radius:3px;
  transform:scaleX(var(--r,0)); transform-origin:left center;
  transition:transform .62s var(--fog-ease-expo);
  background:linear-gradient(90deg,rgba(var(--fog-teal-rgb),.95),rgba(var(--fog-teal-rgb),.4)); }
.fog-bar__tick{ font-family:var(--fog-mono); font-size:9px; letter-spacing:.06em; color:var(--fog-fg-fnt);
  margin-top:5px; display:block; }

/* value cell (right) */
.fog-row__val{ justify-self:end; text-align:right; }

/* ── UNLOCKED proof row (the one real, specific, provable line) ── */
.fog-row--proof{ background:rgba(var(--fog-teal-rgb),.06); }
.fog-row--proof .fog-row__code::after{ content:"YOUR TOP CODE"; display:inline-block;
  margin-left:8px; font-size:8.5px; font-weight:700; letter-spacing:.1em; vertical-align:middle;
  color:var(--fog-teal-ink); background:var(--fog-teal-brt); padding:2px 7px; border-radius:999px; }
.fog-proofval{ font-family:var(--fog-mono); font-size:16px; font-weight:700; color:var(--fog-teal-brt);
  letter-spacing:-.01em; font-variant-numeric:tabular-nums; }
.fog-proofval small{ display:block; font-size:9.5px; font-weight:600; letter-spacing:.06em;
  color:var(--fog-fg-fnt); text-transform:uppercase; margin-top:3px; }
.fog-proofchips{ display:flex; gap:6px; justify-content:flex-end; flex-wrap:wrap; margin-top:6px; }
.fog-chip{ font-family:var(--fog-mono); font-size:9.5px; font-weight:600; letter-spacing:.02em;
  color:var(--fog-fg-mut); padding:2px 8px; border-radius:999px; background:rgba(255,255,255,.06);
  box-shadow:inset 0 0 0 1px var(--fog-line); white-space:nowrap; }
.fog-chip strong{ color:#fff; font-weight:700; }

/* ── FOGGED value: the magnitude substrate (extends app-flagship .fx-sub) ── */
.fog-sub{ position:relative; display:inline-flex; align-items:center; justify-content:flex-end;
  min-width:78px; height:26px; padding:0 10px; border-radius:6px; user-select:none;
  vertical-align:middle; overflow:hidden;
  background:linear-gradient(90deg,rgba(255,255,255,.06),rgba(255,255,255,.03)); }
.fog-sub__ghost{ /* REDACTION mask — never a fabricated digit; blurred beyond reading */
  font-family:var(--fog-mono); font-size:14px; letter-spacing:.04em; color:var(--fog-fg-mut);
  filter:blur(7px); -webkit-filter:blur(7px); pointer-events:none; }
.fog-sub__frost{ position:absolute; inset:0; border-radius:6px; background:rgba(8,10,15,.5);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05), 0 0 0 0 rgba(var(--fog-teal-rgb),0);
  animation:fog-sub-breathe 3.6s ease-in-out infinite; }
@keyframes fog-sub-breathe{ 0%,100%{box-shadow:inset 0 0 0 1px rgba(255,255,255,.05),0 0 0 0 rgba(var(--fog-teal-rgb),0)}
  50%{box-shadow:inset 0 0 0 1px rgba(255,255,255,.05),0 0 14px -4px rgba(var(--fog-teal-rgb),.22)} }
.fog-sub__lock{ position:absolute; right:8px; top:50%; transform:translateY(-50%);
  width:12px; height:12px; opacity:.72; color:var(--fog-teal-brt); }
.fog-sub__lock svg{ width:100%; height:100%; display:block; }

/* row-level alive breathe (staggered so the card feels like a live instrument) */
.fog-row--locked{ animation:fog-row-live 4.2s ease-in-out infinite; }
@keyframes fog-row-live{ 0%,100%{background:transparent} 50%{background:rgba(255,255,255,.014)} }

/* ── "+ N more codes locked" tail + gradient fade into the unlock panel ── */
.fog-card__more{ position:relative; padding:16px 18px; text-align:center;
  font-family:var(--fog-mono); font-size:11px; letter-spacing:.05em; color:var(--fog-fg-mut);
  border-top:1px solid var(--fog-line); }
.fog-card__more strong{ color:#fff; font-weight:700; }
.fog-card::after{ /* soft fade over the last locked rows so the list reads as "continuing" */
  content:""; position:absolute; left:0; right:0; bottom:52px; height:64px; pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(8,11,18,.55)); opacity:.0; }
.fog-card[data-faded="1"]::after{ opacity:1; }

/* ═══════════════════════════════════════════════════════════════════════
   4 · THE UNLOCK PANEL — one premium upgrade moment
   ═══════════════════════════════════════════════════════════════════════ */
.fog-unlock{ position:relative; overflow:hidden; margin-top:18px; padding:24px 22px; border-radius:20px;
  background:linear-gradient(180deg,#0d111a,#070910); color:var(--fog-fg);
  box-shadow:0 0 0 1px rgba(var(--fog-teal-rgb),.4),0 22px 50px -22px rgba(10,11,12,.5); }
.fog-unlock::before{ content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(120% 80% at 100% 0%,rgba(var(--fog-teal-rgb),.16),transparent 60%); }
.fog-unlock__eyebrow{ position:relative; font-family:var(--fog-mono); font-size:10px; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--fog-teal-brt); margin-bottom:8px; }
.fog-unlock__h{ position:relative; font-family:var(--fog-sans); font-size:clamp(18px,4vw,22px);
  font-weight:700; color:#fff; letter-spacing:-.015em; line-height:1.25; margin:0 0 6px; }
.fog-unlock__h b{ color:var(--fog-teal-brt); font-weight:700; }
.fog-unlock__sub{ position:relative; font-size:13.5px; color:var(--fog-fg-mut); line-height:1.55;
  max-width:520px; }
.fog-unlock__price{ position:relative; display:flex; align-items:baseline; gap:8px; margin:16px 0 4px; }
.fog-unlock__amt{ font-family:var(--fog-mono); font-size:30px; font-weight:700; color:#fff;
  letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.fog-unlock__per{ font-family:var(--fog-mono); font-size:12px; color:var(--fog-fg-mut); }
.fog-unlock__actions{ position:relative; display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  margin-top:14px; }
.fog-cta{ appearance:none; border:0; cursor:pointer; white-space:nowrap; text-decoration:none;
  display:inline-flex; align-items:center; justify-content:center; min-height:48px;
  font-family:var(--fog-sans); font-weight:700; font-size:15px; color:var(--fog-teal-ink);
  padding:13px 28px; border-radius:12px; background:var(--fog-teal-brt);
  box-shadow:0 10px 26px -10px rgba(var(--fog-teal-rgb),.6);
  transition:transform .16s var(--fog-ease),box-shadow .16s var(--fog-ease); }
.fog-cta:hover{ transform:translateY(-2px); box-shadow:0 14px 30px -8px rgba(var(--fog-teal-rgb),.6); }
.fog-cta:active{ transform:translateY(0); transition-duration:80ms; }
.fog-cta__2{ font-family:var(--fog-mono); font-size:12px; font-weight:600; letter-spacing:.04em;
  color:var(--fog-fg-mut); text-decoration:none; min-height:44px; display:inline-flex; align-items:center;
  border-bottom:1px solid transparent; }
.fog-cta__2:hover{ color:#fff; border-bottom-color:var(--fog-line-2); }
.fog-unlock__trust{ position:relative; font-family:var(--fog-mono); font-size:10.5px; line-height:1.6;
  color:var(--fog-fg-fnt); letter-spacing:.02em; margin-top:16px; padding-top:14px;
  border-top:1px solid var(--fog-line); }
.fog-unlock__trust b{ color:var(--fog-fg-mut); font-weight:600; }

/* ═══════════════════════════════════════════════════════════════════════
   5 · REVEAL (post-checkout daybreak) — locked -> unlocked, structure preserved
   Add .is-unlocked on .fog to demo the reveal. In prod the real dollars arrive
   from the server on a re-render; this is only the visual choreography.
   ═══════════════════════════════════════════════════════════════════════ */
.fog.is-unlocked .fog-sub__frost{ opacity:0; transition:opacity .5s var(--fog-ease); }
.fog.is-unlocked .fog-sub__ghost{ filter:blur(0); -webkit-filter:blur(0); color:#fff;
  transition:filter .5s var(--fog-ease),color .5s var(--fog-ease); }
.fog.is-unlocked .fog-sub__lock{ opacity:0; }
.fog.is-unlocked .fog-card__more,.fog.is-unlocked .fog-unlock{ display:none; }
.fog.is-unlocked .fog-card::after{ opacity:0; }

/* entrance choreography */
.fog-in{ opacity:0; transform:translateY(16px); }
.fog-in.is-shown{ opacity:1; transform:none;
  transition:opacity .5s var(--fog-ease-expo),transform .5s var(--fog-ease-expo); }

/* ═══════════════════════════════════════════════════════════════════════
   6 · MOBILE 320–390 — stack, full-width bars, >=44px targets, no h-scroll
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width:460px){
  .fog-row{ grid-template-columns:3px 1fr auto; grid-template-areas:
      "heat cpt val" "heat bar bar"; row-gap:10px; column-gap:12px; padding:14px 14px; }
  .fog-row__heat{ grid-area:heat; }
  .fog-row__cpt{ grid-area:cpt; }
  .fog-row__val{ grid-area:val; }
  .fog-barwrap{ grid-area:bar; width:100%; }
  .fog-row__desc{ white-space:normal; }
  .fog-head,.fog-card,.fog-unlock,.fog-uplift{ border-radius:16px; }
  .fog-unlock__actions{ flex-direction:column; align-items:stretch; }
  .fog-cta{ width:100%; }
  .fog-cta__2{ justify-content:center; }
}
@media (max-width:340px){
  .fog-row{ padding:12px 11px; }
  .fog-head,.fog-uplift,.fog-unlock{ padding-left:16px; padding-right:16px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   7 · REDUCED MOTION — structure stays, motion stops
   ═══════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion:reduce){
  .fog-in{ opacity:1 !important; transform:none !important; transition:none !important; }
  .fog-bar__fill{ transition:none !important; }
  .fog-sub__frost,.fog-row--locked,.fog-gauge__num.is-indexing,
  .fog-uplift__idxbar::after,.fog-head__eyebrow i{ animation:none !important; }
  .fog-gauge__arc{ transition:none !important; }
}