/* ==========================================================================
   CMS MS-DRG Impact Assessment -- Bright Spot Insights brand system
   ink / mint / fog palette, hard corners, Space Grotesk + IBM Plex Mono
   ========================================================================== */
:root{
  --ink-900:#050B14; --ink-800:#0D1B2A; --ink-700:#132939; --ink-600:#1B2D3D;
  --ink-500:#243B50; --bar:#0A1520;
  --mint-400:#3ECFA0; --mint-300:#6FE0BA; --mint-900:#0F3A2A;
  --fog-100:#E8EEF2; --fog-300:#A9BAC8; --fog-500:#6C8090;
  --amber:#D4953A; --purple:#9B7FCC;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --sans:"Space Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  /* type ramp -- six steps, held */
  --t1:10px; --t2:12px; --t3:13.5px; --t4:15px; --t5:20px; --t6:30px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;max-width:100%;overflow-x:hidden}
body{background:var(--ink-800); color:var(--fog-100); font-family:var(--sans);
  font-size:var(--t4); line-height:1.55; -webkit-font-smoothing:antialiased}
h1,h2,h3,h4{margin:0; font-weight:700; line-height:1.12}
h1,h2{letter-spacing:-.02em}
h3,h4{letter-spacing:-.005em}
a{color:var(--mint-400)}
button,input,select{font-family:inherit; font-size:inherit; color:inherit}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:2px solid var(--mint-400); outline-offset:2px}
.mint{color:var(--mint-400)}

/* ---------------------------------------------------------------- chrome */
.bar{background:var(--bar); border-bottom:1px solid var(--ink-500);
  padding:9px 22px; display:flex; align-items:center; gap:14px;
  position:sticky; top:0; z-index:60; flex-wrap:wrap}
/* The header bar is sticky and 49px tall, so anything scrolled to by id lands under it
   unless it reserves the room. #pricernote is the one target the page scrolls to itself. */
#pricernote{scroll-margin-top:64px}
.capsule{display:inline-flex; align-items:center; gap:8px; border-radius:9999px;
  border:1px solid rgba(108,128,144,.5); padding:6px 14px; white-space:nowrap;
  font-family:var(--mono); font-size:var(--t1); text-transform:uppercase;
  letter-spacing:.2em; color:var(--fog-300); transition:border-color .15s}
.capsule:hover{border-color:var(--mint-400)}
.homelink{font-family:var(--mono); font-size:var(--t1); letter-spacing:.12em;
  color:var(--fog-500); text-decoration:none; border-bottom:1px solid transparent;
  white-space:nowrap}
.homelink:hover{color:var(--mint-400); border-bottom-color:var(--mint-400)}
.ctx{display:flex; align-items:center; gap:9px; flex-wrap:wrap; min-width:0}
.ctx .nm{font-size:var(--t3); font-weight:600; color:var(--fog-100);
  max-width:36ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.chip{font-family:var(--mono); font-size:var(--t1); letter-spacing:.14em;
  text-transform:uppercase; border:1px solid var(--mint-400); color:var(--mint-400);
  padding:3px 9px; white-space:nowrap}
.chip.amber{border-color:var(--amber); color:var(--amber)}
.brandmark{font-family:var(--mono); font-size:var(--t2); letter-spacing:.18em;
  text-transform:uppercase; color:var(--fog-100); white-space:nowrap; font-weight:500;
  padding-left:12px; border-left:1px solid var(--ink-500)}
.bar .conf{font-family:var(--mono); font-size:var(--t1);
  letter-spacing:.18em; color:var(--fog-500); text-transform:uppercase; white-space:nowrap}

/* ============================================ FY2027 promo, floating top right */
/* 122px, not the FY2026 page's 62px: this page carries the site header above the
   sticky .bar, so at scroll 0 the bar's bottom edge sits at ~110px and a 62px panel
   lands on top of it. 122px clears the bar in both states (header visible and
   scrolled away). */
/* Hidden until the visitor has typed a search and seen results; app.js
   removes the class. */
.promo.unseen{display:none}
.promo{position:fixed; top:122px; right:22px; z-index:120; width:352px;
  animation:promoIn .7s cubic-bezier(.16,1,.3,1) .5s both}
/* the body is a link now, not a button, so the UA underline has to go */
a.promo-body{text-decoration:none}
.promo-body{position:relative; overflow:hidden; cursor:pointer; width:100%;
  display:flex; align-items:stretch; gap:16px; text-align:left; padding:20px 20px 20px 18px;
  background:linear-gradient(145deg,#0B2B22 0%,var(--ink-900) 48%,#0A1F2C 100%);
  border:1px solid var(--mint-400); border-radius:0; color:var(--fog-100);
  box-shadow:0 18px 46px rgba(5,11,20,.62), 0 0 0 1px rgba(62,207,160,.14);
  transition:transform .18s cubic-bezier(.16,1,.3,1), box-shadow .18s;
  /* Pulses in place. An earlier version translated the card vertically, which made
     the button a moving click target and broke automated clicks outright. */
  animation:promoFloat 5.4s ease-in-out infinite}
.promo-body:hover{transform:translateY(-3px) scale(1.015);
  box-shadow:0 26px 60px rgba(5,11,20,.7), 0 0 34px rgba(62,207,160,.42)}
.promo-body:active{transform:translateY(-1px) scale(1.005)}
/* animated mint edge that travels around the card */
.promo-body::before{content:""; position:absolute; inset:-2px; z-index:0; pointer-events:none;
  background:conic-gradient(from 0deg, transparent 0deg, var(--mint-400) 34deg,
    var(--mint-300) 52deg, transparent 92deg, transparent 360deg);
  animation:promoEdge 3.6s linear infinite; opacity:.85;
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; padding:1.5px}
.promo-viz,.promo-txt{position:relative; z-index:2}

/* radar dish: rotating sweep, expanding rings, static starburst core */
.promo-viz{position:relative; width:76px; height:76px; flex:0 0 76px; align-self:center}
.promo-viz .radar{position:absolute; inset:0; border-radius:50%;
  background:conic-gradient(from 0deg, rgba(62,207,160,.55) 0deg,
    rgba(62,207,160,.16) 26deg, transparent 62deg, transparent 360deg);
  animation:radarSweep 2.6s linear infinite;
  box-shadow:inset 0 0 0 1px rgba(62,207,160,.28)}
.promo-viz .ring{position:absolute; inset:0; margin:auto; width:18px; height:18px;
  border:1.5px solid var(--mint-400); border-radius:50%; opacity:0}
.promo-viz .ring:nth-of-type(1){animation:ringOut 2.6s cubic-bezier(0,.5,.3,1) infinite}
.promo-viz .ring:nth-of-type(2){animation:ringOut 2.6s cubic-bezier(0,.5,.3,1) .85s infinite}
.promo-viz .ring:nth-of-type(3){animation:ringOut 2.6s cubic-bezier(0,.5,.3,1) 1.7s infinite}
.promo-viz .burst{position:absolute; inset:0; margin:auto; width:34px; height:34px;
  filter:drop-shadow(0 0 7px rgba(62,207,160,.95)); animation:burstPulse 2.6s ease-in-out infinite}

.promo-txt{display:flex; flex-direction:column; gap:3px; min-width:0; flex:1}
.promo-eyebrow{font-family:var(--mono); font-size:9.5px; letter-spacing:.24em;
  text-transform:uppercase; color:var(--mint-400)}
.promo-txt b{font-family:var(--sans); font-size:24px; font-weight:700; line-height:1.02;
  letter-spacing:-.025em; color:var(--fog-100); margin:2px 0 4px}
.promo-txt small{font-size:11.5px; line-height:1.42; color:var(--fog-300); white-space:normal}
.promo-cta{margin-top:9px; align-self:flex-start; font-family:var(--mono); font-size:9.5px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ink-900);
  background:var(--mint-400); padding:6px 12px; font-weight:500}
.promo-body:hover .promo-cta{background:var(--mint-300)}
.sheen{position:absolute; top:0; bottom:0; width:74px; z-index:1; pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(232,238,242,.20),transparent);
  transform:skewX(-16deg); animation:sheen 4.6s ease-in-out infinite}
.promo-min,.promo-x{position:absolute; top:5px; z-index:5; width:22px; height:22px;
  background:transparent; border:1px solid transparent; color:var(--fog-500);
  font-size:17px; line-height:1; cursor:pointer; padding:0}
.promo-min{right:30px}
.promo-x{right:6px}
.promo-min:hover,.promo-x:hover{color:var(--mint-400); border-color:var(--ink-500)}

/* collapsed state: a compact pulsing pill that still draws the eye */
.promo.min{width:auto}
.promo.min .promo-body{padding:9px 15px 9px 12px; gap:11px; animation:none}
.promo.min .promo-viz{width:22px; height:22px; flex:0 0 22px}
.promo.min .promo-viz .burst{width:14px; height:14px}
.promo.min .promo-viz .ring{width:8px; height:8px}
.promo.min .promo-txt b{font-size:11px; font-family:var(--mono); letter-spacing:.14em;
  text-transform:uppercase; color:var(--mint-400); margin:0}
.promo.min .promo-txt b{white-space:nowrap}
.promo.min .promo-txt small,.promo.min .promo-cta,.promo.min .promo-eyebrow{display:none}
.promo.min .promo-min{display:none}
/* the dismiss control has to survive collapsing, or the pill becomes permanent */
.promo.min .promo-x{top:2px; right:2px; width:16px; height:16px; font-size:13px}
.promo.gone{display:none}

@keyframes promoIn{from{opacity:0; transform:translateX(48px) scale(.94)}
  to{opacity:1; transform:none}}
@keyframes promoFloat{
  0%,100%{box-shadow:0 18px 46px rgba(5,11,20,.62), 0 0 0 1px rgba(62,207,160,.14)}
  50%    {box-shadow:0 20px 52px rgba(5,11,20,.66), 0 0 22px rgba(62,207,160,.30)}}
@keyframes promoEdge{to{transform:rotate(360deg)}}
@keyframes radarSweep{to{transform:rotate(360deg)}}
@keyframes ringOut{0%{transform:scale(.5); opacity:.9}
  75%{transform:scale(3.5); opacity:0} 100%{transform:scale(3.5); opacity:0}}
@keyframes burstPulse{0%,100%{transform:scale(1); opacity:.92}50%{transform:scale(1.13); opacity:1}}
@keyframes sheen{0%{left:-90px}55%{left:112%}100%{left:112%}}

@media (prefers-reduced-motion:reduce){
  .promo,.promo-body,.promo-body::before,.radar,.ring,.burst,.sheen,
  .modal-wrap,.modal{animation:none !important}
  .sheen,.promo-body::before{display:none}
  .promo-viz .radar{background:radial-gradient(circle,rgba(62,207,160,.22),transparent 70%)}
}

/* ------------------------------------------------------------------- modal */
.modal-wrap{position:fixed; inset:0; z-index:190; display:flex; align-items:center;
  justify-content:center; padding:20px; background:rgba(5,11,20,.78);
  animation:fadeIn .16s ease-out}
.modal{position:relative; width:min(560px,100%); max-height:88vh; overflow:auto;
  background:var(--ink-800); border:1px solid var(--mint-400);
  border-top:3px solid var(--mint-400); padding:26px 28px 24px;
  box-shadow:0 24px 70px rgba(5,11,20,.8); animation:riseIn .2s ease-out}
.modal h3{font-size:clamp(1.15rem,2vw,1.5rem); margin:4px 0 10px}
.modal p{color:var(--fog-300); font-size:var(--t3); line-height:1.6; margin:0 0 12px; max-width:60ch}
.modal-list{margin:0 0 14px; padding-left:18px; color:var(--fog-300); font-size:var(--t2);
  line-height:1.55}
.modal-list li{margin:5px 0}
.modal-list li::marker{color:var(--mint-400)}
.modal label{display:block; font-family:var(--mono); font-size:var(--t1); letter-spacing:.14em;
  text-transform:uppercase; color:var(--fog-500); margin:12px 0 5px}
.modal input,.modal textarea{width:100%; background:var(--ink-900);
  border:1px solid var(--ink-500); color:var(--fog-100); padding:10px 12px;
  border-radius:0; outline:none; font-size:var(--t3); resize:vertical}
.modal input:focus,.modal textarea:focus{border-color:var(--mint-400)}
.modal input::placeholder,.modal textarea::placeholder{color:var(--fog-500)}
.modal input.bad,.modal textarea.bad{border-color:var(--amber)}
.modal-actions{display:flex; gap:10px; margin-top:18px; flex-wrap:wrap}
.btn.primary{background:var(--mint-400); border-color:var(--mint-400); color:var(--ink-900);
  font-weight:500}
.btn.primary:hover{background:var(--mint-300); border-color:var(--mint-300); color:var(--ink-900)}
.modal-x{position:absolute; top:8px; right:10px; background:none; border:none;
  color:var(--fog-500); font-size:26px; line-height:1; cursor:pointer; padding:4px 8px}
.modal-x:hover{color:var(--mint-400)}
.fineprint{font-size:11.5px !important; color:var(--fog-500) !important; margin:14px 0 0 !important}
.modal p.err{color:var(--amber); font-size:var(--t2); margin:12px 0 0}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes riseIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ================================================================ easter egg */
.menu .it.eggit{background:linear-gradient(90deg,var(--mint-900),transparent 70%);
  border-left:2px solid var(--mint-400); animation:eggGlow 1.9s ease-in-out infinite}
@keyframes eggGlow{0%,100%{box-shadow:inset 0 0 0 rgba(62,207,160,0)}
  50%{box-shadow:inset 0 0 26px rgba(62,207,160,.22)}}
#eggWrap{position:fixed; inset:0; z-index:400; background:var(--ink-900);
  display:flex; align-items:center; justify-content:center; padding:20px;
  animation:fadeIn .22s ease-out; overflow:auto}
#eggWrap.out{animation:fadeOut .3s ease-in forwards}
@keyframes fadeOut{to{opacity:0}}
.egg{position:relative; width:min(720px,100%); text-align:center}
.egg-scan{position:fixed; inset:0; pointer-events:none; opacity:.5;
  background:repeating-linear-gradient(to bottom,rgba(62,207,160,.055) 0 1px,transparent 1px 3px)}
.egg-scan::after{content:""; position:absolute; left:0; right:0; height:130px;
  background:linear-gradient(to bottom,transparent,rgba(62,207,160,.13),transparent);
  animation:scanline 3.4s linear infinite}
@keyframes scanline{0%{top:-130px}100%{top:100%}}
.egg-stage{position:relative; z-index:2}
.egg-term{font-family:var(--mono); font-size:12px; letter-spacing:.13em; text-align:left;
  max-width:430px; margin:0 auto; min-height:106px}
.eline{color:var(--fog-500); opacity:0; animation:eggType .22s ease-out forwards;
  white-space:nowrap; overflow:hidden}
.eline.bad{color:var(--amber)} .eline.mint{color:var(--mint-400)}
@keyframes eggType{from{opacity:0;transform:translateX(-7px)}to{opacity:1;transform:none}}
.egg-burst{position:absolute; left:50%; top:44px; width:400px; height:400px;
  margin-left:-200px; opacity:0; pointer-events:none}
.egg-burst.go{opacity:1}
.egg-burst svg{width:100%; height:100%; overflow:visible}
.egg-burst .eray{stroke:var(--mint-400); stroke-width:2; stroke-linecap:round;
  stroke-dasharray:174; stroke-dashoffset:174; opacity:0}
.egg-burst.go .eray{animation:rayOut .85s cubic-bezier(.16,1,.3,1) forwards;
  animation-delay:calc(var(--i) * 22ms)}
@keyframes rayOut{0%{stroke-dashoffset:174;opacity:0}
  35%{opacity:1} 100%{stroke-dashoffset:0;opacity:0}}
.egg-burst .ering{fill:none; stroke:var(--mint-400); stroke-width:1.5; opacity:0}
.egg-burst.go .ering{animation:eringOut 1.1s cubic-bezier(.16,1,.3,1) forwards}
.egg-burst.go .ering.r2{animation-delay:.22s}
@keyframes eringOut{0%{transform:scale(.2);opacity:.95;transform-origin:center}
  100%{transform:scale(3.4);opacity:0;transform-origin:center}}
.egg-burst .dust i{position:absolute; left:50%; top:50%; width:var(--sz); height:var(--sz);
  background:var(--mint-400); border-radius:50%; opacity:0}
.egg-burst.go .dust i{animation:dustOut 1.25s cubic-bezier(.16,1,.3,1) forwards;
  animation-delay:var(--dl)}
@keyframes dustOut{0%{opacity:0;transform:translate(0,0) scale(.4)}
  22%{opacity:1} 100%{opacity:0;transform:translate(var(--tx),var(--ty)) scale(1)}}
.egg-card{opacity:0; transform:translateY(22px) scale(.97); pointer-events:none;
  background:var(--ink-800); border:1px solid var(--mint-400); border-top:3px solid var(--mint-400);
  padding:26px 28px 22px; text-align:left; margin-top:16px;
  box-shadow:0 26px 80px rgba(5,11,20,.9), 0 0 60px rgba(62,207,160,.18)}
#eggWrap.reveal .egg-card{opacity:1; pointer-events:auto;
  animation:eggCardIn .74s cubic-bezier(.18,1.42,.4,1) forwards, eggGlow 1.9s ease-in-out .45s 2}
#eggWrap.reveal .egg-term{opacity:.32; transition:opacity .5s}
.egg-card h2{font-size:clamp(1.4rem,3vw,2.1rem); margin:4px 0 6px}
.egg-loc{font-family:var(--mono); font-size:11px; letter-spacing:.14em; color:var(--mint-400);
  text-transform:uppercase}
.egg-quote{position:relative; margin:18px 0 0; padding:2px 0 0 40px; color:var(--fog-100);
  font-size:clamp(1.05rem,2.1vw,1.4rem); line-height:1.42; font-weight:500;
  letter-spacing:-.012em}
.egg-quote .qm{position:absolute; left:0; top:-14px; font-size:56px; line-height:1;
  color:var(--mint-400); opacity:.5; font-family:Georgia,'Times New Roman',serif}
.egg-quote cite{display:block; margin-top:10px; font-style:normal; font-family:var(--mono);
  font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--mint-400)}
.egg-stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:1px;
  background:var(--ink-500); border:1px solid var(--ink-500); margin:18px 0 0}
.egg-stats>div{background:var(--ink-900); padding:13px 14px}
.egg-stats .k{font-family:var(--mono); font-size:9.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--fog-500)}
.egg-stats .v{font-size:20px; font-weight:700; margin:5px 0 4px; color:var(--mint-400);
  font-variant-numeric:tabular-nums}
.egg-stats .s{font-size:11.5px; color:var(--fog-300); line-height:1.4}
.egg-quip{color:var(--fog-100); font-size:var(--t3); line-height:1.6; margin:18px 0 0;
  border-left:2px solid var(--mint-400); padding-left:14px}
.egg-foot{display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top:20px}
.egg-note{font-family:var(--mono); font-size:9.5px; letter-spacing:.14em; color:var(--fog-500);
  text-transform:uppercase}

/* ---------------------------------------------------- egg celebration
   The canvas sits above the card on purpose, so confetti falls in front of
   the reveal rather than politely behind it. pointer-events:none keeps the
   whole thing non-blocking -- the card stays clickable through the storm. */
#eggFx{position:fixed; inset:0; z-index:8; pointer-events:none}
.egg-mute{margin-left:auto; background:none; border:1px solid var(--ink-500);
  color:var(--fog-500); font-family:var(--mono); font-size:9.5px; letter-spacing:.14em;
  text-transform:uppercase; padding:7px 11px; cursor:pointer; border-radius:2px;
  transition:color .2s,border-color .2s}
.egg-mute:hover{color:var(--mint-400); border-color:var(--mint-400)}
@keyframes eggCardIn{
  0%{opacity:0; transform:translateY(26px) scale(.94)}
  58%{opacity:1; transform:translateY(-7px) scale(1.022)}
  100%{opacity:1; transform:none}}
@keyframes eggGlow{
  0%,100%{box-shadow:0 26px 80px rgba(5,11,20,.9), 0 0 60px rgba(62,207,160,.18)}
  50%{box-shadow:0 26px 80px rgba(5,11,20,.9), 0 0 120px rgba(62,207,160,.55)}}
@keyframes eggShake{
  0%,100%{transform:translate(0,0)}
  15%{transform:translate(-7px,3px)} 30%{transform:translate(6px,-4px)}
  45%{transform:translate(-5px,-2px)} 60%{transform:translate(4px,3px)}
  75%{transform:translate(-3px,1px)} 90%{transform:translate(2px,-1px)}}
.egg-stage.shake{animation:eggShake .55s cubic-bezier(.36,.07,.19,.97)}
/* The finale and every large shell get the heavier one, with a touch of scale so
   the card feels hit by the blast rather than merely nudged sideways. */
@keyframes eggShakeBig{
  0%,100%{transform:translate(0,0) scale(1)}
  9%{transform:translate(-15px,8px) scale(1.014)}
  19%{transform:translate(13px,-10px) scale(1.009)}
  29%{transform:translate(-12px,-6px) scale(1.011)}
  40%{transform:translate(11px,9px) scale(1.006)}
  54%{transform:translate(-9px,4px) scale(1.003)}
  70%{transform:translate(7px,-5px)}
  85%{transform:translate(-4px,2px)}}
.egg-stage.shake-big{animation:eggShakeBig .82s cubic-bezier(.36,.07,.19,.97)}

@media (prefers-reduced-motion:reduce){
  .egg-scan,.egg-burst,#eggFx{display:none}
  .eline,.egg-card{animation:none !important; opacity:1 !important; transform:none !important}
  .egg-stage.shake,.egg-stage.shake-big{animation:none !important}
}
@media print{#eggWrap{display:none !important}}

/* ------------------------------------------------------------------- legal */
.legal{background:var(--ink-900); border:1px solid var(--ink-500);
  border-top:1px solid var(--amber); padding:20px 22px}
.legal h3{font-size:var(--t3); margin:18px 0 5px; color:var(--fog-100);
  font-family:var(--mono); text-transform:uppercase; letter-spacing:.14em; font-weight:500}
.legal h3:first-child{margin-top:0}
.legal p{font-size:12.5px; color:var(--fog-500); line-height:1.62; margin:0 0 4px; max-width:96ch}
.legal .legal-foot{margin-top:18px; padding-top:14px; border-top:1px solid var(--ink-600);
  color:var(--fog-500); font-family:var(--mono); font-size:var(--t1); letter-spacing:.05em}
.eyebrow{font-family:var(--mono); font-size:var(--t1); letter-spacing:.16em;
  text-transform:uppercase; color:var(--fog-500); display:block; margin-bottom:6px}
.wrap{max-width:1560px; margin:0 auto; padding:0 22px 70px}
section{padding-top:34px}
.shead{display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; margin-bottom:12px}
.shead h2{font-size:clamp(1.1rem,1.7vw,1.5rem)}
.shead .sub{color:var(--fog-300); font-size:var(--t3); max-width:72ch}
.rule{height:1px; background:var(--mint-400); opacity:.55}
#printMeta{display:none}

/* ---------------------------------------------------------------- controls */
.ctrl{background:var(--ink-700); border:1px solid var(--ink-500); padding:14px 16px;
  display:flex; gap:16px; align-items:flex-end; flex-wrap:wrap; margin-top:18px}
.field{display:flex; flex-direction:column; gap:5px; min-width:0}
.field label{font-family:var(--mono); font-size:var(--t1); letter-spacing:.14em;
  text-transform:uppercase; color:var(--fog-500)}
.combo{position:relative; width:min(460px,100%)}
.combo input, select.sel, input.sel{width:100%; background:var(--ink-900);
  border:1px solid var(--ink-500); color:var(--fog-100); padding:9px 11px;
  border-radius:0; outline:none; -webkit-appearance:none; appearance:none}
select.sel{background-image:linear-gradient(45deg,transparent 50%,var(--fog-500) 50%),
  linear-gradient(135deg,var(--fog-500) 50%,transparent 50%);
  background-position:calc(100% - 15px) 55%,calc(100% - 10px) 55%;
  background-size:5px 5px,5px 5px; background-repeat:no-repeat; padding-right:30px}
.combo input:focus, select.sel:focus, input.sel:focus{border-color:var(--mint-400)}
/* outline:none above kills the global focus ring, so put it back for keyboard users */
.combo input:focus-visible, select.sel:focus-visible, input.sel:focus-visible,
.modal input:focus-visible, .modal textarea:focus-visible, .num:focus-visible{
  outline:2px solid var(--mint-400); outline-offset:2px}
.combo input::placeholder{color:var(--fog-500)}
.menu{position:absolute; top:calc(100% + 3px); left:0; right:0; z-index:80;
  background:var(--ink-900); border:1px solid var(--mint-400);
  max-height:340px; overflow:auto; display:none}
.menu.on{display:block}
.menu .it{padding:8px 11px; cursor:pointer; border-bottom:1px solid var(--ink-600)}
.menu .it:last-child{border-bottom:none}
.menu .it:hover,.menu .it.sel{background:var(--mint-900)}
.menu .it b{font-weight:600; color:var(--fog-100); font-size:var(--t3)}
.menu .it .m{font-family:var(--mono); font-size:11px; color:var(--fog-500); margin-top:2px}
.menu .none{padding:12px; color:var(--fog-500); font-size:var(--t3)}
.seg{display:flex; flex-wrap:wrap; border:1px solid var(--ink-500)}
.seg button{background:var(--ink-900); border:none; border-right:1px solid var(--ink-500);
  padding:9px 13px; cursor:pointer; color:var(--fog-300); font-family:var(--mono);
  font-size:var(--t1); letter-spacing:.14em; text-transform:uppercase;
  transition:background .12s,color .12s; flex:1 1 auto}
.seg button:last-child{border-right:none}
.seg button:hover{color:var(--fog-100); background:var(--ink-600)}
.seg button.on{background:var(--mint-400); color:var(--ink-900); font-weight:500}
.btn{background:var(--ink-900); border:1px solid var(--ink-500); color:var(--fog-300);
  padding:9px 14px; cursor:pointer; font-family:var(--mono); font-size:var(--t1);
  letter-spacing:.14em; text-transform:uppercase; transition:.12s; white-space:nowrap}
.btn:hover{border-color:var(--mint-400); color:var(--mint-400)}
.hint{font-size:var(--t2); color:var(--fog-300); margin-left:auto; text-align:right;
  max-width:46ch; line-height:1.45}
.lnk{background:none;border:none;padding:0;color:var(--fog-100);text-align:left;
  cursor:pointer;font-size:inherit;text-decoration:underline;text-decoration-color:var(--ink-500)}
.lnk:hover{color:var(--mint-400);text-decoration-color:var(--mint-400)}

/* ---------------------------------------------------------------- identity */
/* :empty keeps the box out of the landing screen. Before a hospital is picked this
   element has no content, and it was still drawing its border and padding: a bare 38px
   bordered rectangle with a mint top edge between the picker and the national summary,
   which is the first thing a new visitor saw. */
.ident:empty{display:none}
.ident{background:var(--ink-900); border:1px solid var(--ink-500);
  border-top:1px solid var(--mint-400); padding:18px 20px; margin-top:18px;
  display:flex; gap:26px; align-items:flex-start; flex-wrap:wrap}
.ident h1{font-size:clamp(1.35rem,2.3vw,2rem)}
.ident .loc{color:var(--fog-300); font-size:var(--t3); margin-top:4px}
.ident .tags{display:flex; gap:7px; flex-wrap:wrap; margin-top:11px}
.tag{font-family:var(--mono); font-size:var(--t1); letter-spacing:.14em;
  text-transform:uppercase; border:1px solid var(--ink-500); color:var(--fog-300); padding:3px 8px}
.tag.mint{border-color:var(--mint-400); color:var(--mint-400)}
.ident .facts{margin-left:auto; display:flex; gap:24px; flex-wrap:wrap}
.ident .facts div{min-width:76px}
.ident .facts .k{font-family:var(--mono); font-size:var(--t1); letter-spacing:.14em;
  text-transform:uppercase; color:var(--fog-500)}
.ident .facts .v{font-size:var(--t4); font-weight:600; margin-top:3px;
  font-variant-numeric:tabular-nums}

/* ---------------------------------------------------------------- alerts */
.alerts{display:flex; flex-direction:column; gap:8px; margin-top:14px}
.alert{border:1px solid var(--ink-500); border-left:3px solid var(--fog-500);
  background:var(--ink-700); padding:10px 14px; font-size:var(--t3); color:var(--fog-300);
  max-width:118ch}
.alert b{color:var(--fog-100); font-weight:600}
.alert.warn{border-left-color:var(--amber)}
.alert.good{border-left-color:var(--mint-400)}
.alert.info{border-left-color:var(--purple)}
#scenarioBanner{margin-top:14px; border-left-color:var(--amber); background:var(--ink-600)}

/* --------------------------------------------- the pricer notices, both of them
   The FY2027 rule is final. This treatment carries two things: the short notice
   directly under the page title, which says the rates will be checked and possibly
   updated when CMS releases the FY2027 pricer, and the full note at the bottom of
   section 11 under #pricernote, which explains why there is no pricer yet. The short
   one has to be legible before anyone scrolls, on a phone as well as a desktop.
   Deliberately louder than .alert.warn: it is the one thing on the page a reader
   must not miss. */
.redalert{border:1px solid #A8342A; border-left:5px solid #FF6B5E;
  background:rgba(255,107,94,.10); padding:12px 15px; margin:14px 0 18px;
  font-size:var(--t3); line-height:1.55; color:#FFD3CE; max-width:96ch;
  display:flex; flex-direction:column; gap:5px}
.redalert strong{color:#FF8F84; font-weight:600; letter-spacing:.01em}
@media(max-width:700px){
  .redalert{padding:11px 13px; font-size:var(--t2); margin:12px 0 16px}
}

/* ---------------------------------------------------------------- KPIs */
.kpis{display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--ink-500); border:1px solid var(--ink-500); margin-top:18px}
.kpis.k3{grid-template-columns:repeat(3,1fr)}
/* Two tiles, two columns. A solo market draws two tiles in section 07 and a three-column
   grid left the third slot as a bare rectangle that read as a tile that failed. */
.kpis.k2{grid-template-columns:repeat(2,1fr)}
.kpi{background:var(--ink-900); padding:15px 16px 16px; min-width:0}
.kpi .k{font-family:var(--mono); font-size:var(--t1); letter-spacing:.14em;
  text-transform:uppercase; color:var(--fog-500); display:block; min-height:2.6em}
.kpi .v{font-size:clamp(1.35rem,2vw,1.9rem); font-weight:700; letter-spacing:-.03em;
  margin-top:6px; font-variant-numeric:tabular-nums; line-height:1.05;
  overflow-wrap:anywhere}
.kpi .s{font-size:var(--t2); color:var(--fog-300); margin-top:7px;
  font-variant-numeric:tabular-nums; line-height:1.45}
/* One convention for the selected hospital, used everywhere it appears in a market
   view: the mint accent plus the word "selected". On a KPI tile that is a mint left
   edge and a mint label, so a reader scanning a six-tile strip can tell at a glance
   which tiles are about the hospital the page is for and which are about the market.
   The 3px edge sits inside the tile's own padding, so nothing reflows. */
.kpi.sel{border-left:3px solid var(--mint-400); padding-left:13px}
.kpi.sel .k{color:var(--mint-400)}
.pos{color:var(--mint-400)} .neg{color:var(--amber)} .neu{color:var(--fog-100)}
/* The same convention on a table row. tbody tr.me already carries the mint wash; the
   badge adds the word, which is what survives a black and white print and what a
   reader who has not learned the colour is looking for. */
/* The estimate chip on any tile whose total the PUF coverage correction moved. Amber
   rather than mint: mint on this page means "the hospital you chose", and this is a
   caution about the number, not a marker of whose number it is. It sits on a KPI label,
   so it has to stay on one line and out of the way of a long basis name. */
.covchip{font-family:var(--mono); font-size:9px; letter-spacing:.12em;
  text-transform:uppercase; color:#F3C77B; border:1px solid #6E5327;
  background:rgba(243,199,123,.09); border-radius:2px;
  padding:1px 5px; margin-left:8px; white-space:nowrap; vertical-align:1px;
  cursor:help}

.selbadge{font-family:var(--mono); font-size:9.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--mint-400); border:1px solid var(--mint-400);
  padding:1px 5px; margin-left:8px; white-space:nowrap; vertical-align:1px}

/* ---------------------------------------------------------------- panels */
.grid2{display:grid; grid-template-columns:repeat(auto-fit,minmax(440px,1fr)); gap:18px}
.panel{background:var(--ink-700); border:1px solid var(--ink-500);
  border-top:1px solid var(--mint-400); padding:15px 18px 18px; min-width:0}
.panel h3{font-size:var(--t4); margin-bottom:3px}
.panel .desc{font-size:var(--t2); color:var(--fog-300); margin-bottom:12px; max-width:80ch;
  line-height:1.5}
.chart{width:100%; display:block; overflow:visible}
.chart text{font-family:var(--mono)}
.chart .ax{font-size:10px; letter-spacing:.08em; fill:var(--fog-300)}
.chart .cl{font-size:10.5px; letter-spacing:.06em; fill:var(--fog-300)}
.chart .vl{font-size:12px; font-weight:600; font-family:var(--mono)}
.chart .il{font-size:12px; fill:var(--fog-100); font-family:var(--sans)}
.chart .sl{font-size:10.5px; fill:var(--fog-300); font-family:var(--mono); letter-spacing:.04em}
.chart [data-tip]{cursor:crosshair}
.legend{display:flex; gap:16px; flex-wrap:wrap; margin-top:10px; font-family:var(--mono);
  font-size:var(--t1); color:var(--fog-300); letter-spacing:.14em; text-transform:uppercase}
.legend i{width:10px; height:10px; display:inline-block; margin-right:6px; vertical-align:-1px}
.empty{color:var(--fog-300); font-size:var(--t3); padding:26px 0; text-align:center}
/* A panel heading with a control on the same line. Section 07 uses it for the toggle
   between the annual Uncompensated Care Payment and the per-discharge rate. */
.phead{display:flex; align-items:center; justify-content:space-between; gap:14px;
  flex-wrap:wrap; margin-bottom:10px}
.phead h3{margin-bottom:0}
.phead .seg button{padding:7px 12px}
.ucpPane{min-width:0}

/* ---------------------------------------------------------------- tables */
.tblwrap{overflow:auto; max-height:620px; border:1px solid var(--ink-500);
  background:var(--ink-900); position:relative}
table{border-collapse:collapse; width:100%; font-size:var(--t3)}
thead th{position:sticky; top:0; z-index:5; background:var(--bar); text-align:right;
  font-family:var(--mono); font-size:var(--t1); letter-spacing:.14em; text-transform:uppercase;
  color:var(--fog-300); font-weight:400; padding:10px 11px; white-space:nowrap;
  border-bottom:1px solid var(--ink-500); cursor:pointer; user-select:none}
thead th.nos{cursor:default}
thead th:not(.nos):hover{color:var(--mint-400)}
thead th.l{text-align:left}
thead th.on{color:var(--mint-400)}
tbody td{padding:8px 11px; text-align:right; border-bottom:1px solid var(--ink-700);
  font-variant-numeric:tabular-nums; white-space:nowrap}
tbody td.l{text-align:left; white-space:normal; min-width:220px}
tbody tr:hover{background:var(--ink-700)}
tbody tr.me{background:var(--mint-900)}
tbody tr.me td{color:var(--fog-100); font-weight:600}
td .code{font-family:var(--mono); font-size:11.5px; color:var(--fog-300)}
/* Marks an MS-DRG CMS retired for the current year, where the current-year weight and
   price on that row are a share-weighted blend of the codes the cases now group to.
   Amber rather than mint: it is a caveat on the number, not a highlight. */
.rmpflag{display:inline-block; margin-left:6px; font-family:var(--mono); font-size:9px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--amber);
  border:1px solid rgba(212,149,58,.55); padding:0 4px; white-space:nowrap; cursor:help}
td .mdc{font-family:var(--mono); font-size:var(--t1); color:var(--fog-500); display:block;
  letter-spacing:.14em; margin-top:3px; text-transform:uppercase}
/* The bar sits inside an inner span rather than on the cell. A position:relative table
   cell is laid out at content height in Chrome, not row height, which left the bar and
   its percent floating at the top of any row taller than one line. */
/* The share-of-movement cell. It was called .bar, which is also the class on the sticky
   page header, so every one of these cells was picking up display:flex, position:sticky
   and the header's border and background. It never showed while the table scrolled
   sideways and this column sat off the right edge. With the four per-case columns gone
   the column is on screen at 1440, so the collision had to go: the cell is .shrbar now
   and nothing else on the page answers to that name. */
td.shrbar{min-width:96px; padding-right:11px}
td.shrbar .barbox{position:relative; display:block}
td.shrbar .bg{position:absolute; left:0; top:50%; transform:translateY(-50%); height:9px;
  opacity:.55; max-width:calc(100% - 58px)}
td.shrbar .bv{position:relative}

/* ---------------------------------------------------------------- whatif */
.levers{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:18px}
.lever{background:var(--ink-900); border:1px solid var(--ink-500);
  border-top:1px solid var(--mint-400); padding:14px 16px}
.lever .k{font-family:var(--mono); font-size:var(--t1); letter-spacing:.14em;
  text-transform:uppercase; color:var(--fog-500)}
.lever .v{font-size:var(--t5); font-weight:700; margin:6px 0 8px; font-variant-numeric:tabular-nums}
.lever .s{font-size:var(--t2); color:var(--fog-300); line-height:1.45}
input[type=range]{width:100%; -webkit-appearance:none; appearance:none; background:transparent;
  height:20px; margin:0}
input[type=range]::-webkit-slider-runnable-track{height:4px; background:var(--ink-600)}
input[type=range]::-moz-range-track{height:4px; background:var(--ink-600)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none; width:12px; height:18px;
  background:var(--mint-400); border:none; border-radius:0; margin-top:-7px}
input[type=range]::-moz-range-thumb{width:12px; height:18px; background:var(--mint-400);
  border:none; border-radius:0}
.chk{display:flex; align-items:flex-start; gap:9px; font-size:var(--t3); color:var(--fog-300);
  cursor:pointer; padding:7px 0}
.chk input[type=checkbox]{-webkit-appearance:none; appearance:none; width:14px; height:14px;
  border:1px solid var(--ink-500); background:var(--ink-900); border-radius:0; margin:4px 0 0;
  flex-shrink:0; cursor:pointer; position:relative}
.chk input[type=checkbox]:checked{background:var(--mint-400); border-color:var(--mint-400)}
.chk input[type=checkbox]:checked::after{content:""; position:absolute; left:4px; top:1px;
  width:4px; height:8px; border:solid var(--ink-900); border-width:0 2px 2px 0;
  transform:rotate(42deg)}
.chk.off{cursor:not-allowed; color:var(--fog-500)}
.chk.off input{border-color:var(--ink-600); background:var(--ink-800)}
.num{width:88px; background:var(--ink-900); border:1px solid var(--ink-500);
  color:var(--fog-100); padding:6px 8px; border-radius:0; font-variant-numeric:tabular-nums}
.num:focus{border-color:var(--mint-400); outline:none}
.assump{display:flex; gap:12px; flex-wrap:wrap; margin-top:8px}
.assump label{display:flex; flex-direction:column; gap:4px; font-family:var(--mono);
  font-size:var(--t1); letter-spacing:.14em; text-transform:uppercase; color:var(--fog-500)}

/* ---------------------------------------------------------------- method */
.method{background:var(--ink-900); border:1px solid var(--ink-500);
  border-top:1px solid var(--mint-400); padding:20px 22px}
.method h3{font-size:var(--t4); margin:20px 0 7px; color:var(--mint-400)}
.method h3:first-child{margin-top:0}
.method p,.method li{font-size:var(--t3); color:var(--fog-300); margin:5px 0; max-width:76ch}
.method ul{margin:5px 0; padding-left:19px}
.method code{font-family:var(--mono); font-size:11.5px; color:var(--fog-100);
  background:var(--ink-700); padding:1px 5px}
.method .cav{border-left:3px solid var(--amber); padding-left:13px; margin:10px 0}

/* ---------------------------------------------------------------- glossary */
.lede{color:var(--fog-300); font-size:var(--t3); max-width:74ch; line-height:1.6; margin:10px 0 0}
.note{color:var(--fog-500); font-size:var(--t2)}
.gloss{background:var(--ink-900); border:1px solid var(--ink-500);
  border-top:1px solid var(--mint-400); padding:20px 22px}
.gloss h3{font-size:var(--t4); margin:24px 0 10px; color:var(--mint-400)}
.gloss h3:first-child{margin-top:0}
.gloss dl{margin:0; display:grid; grid-template-columns:230px 1fr; gap:0 22px}
.gloss dt{font-weight:600; color:var(--fog-100); font-size:var(--t3);
  padding:11px 16px 11px 0; border-top:1px solid var(--ink-600)}
.gloss dd{margin:0; color:var(--fog-300); font-size:var(--t3); line-height:1.6;
  padding:11px 0; border-top:1px solid var(--ink-600); max-width:82ch}
.gloss dd b{color:var(--mint-400); font-weight:500}
.gloss dl.terms dt,.gloss dl.terms dd{padding:7px 16px 7px 0}
.gloss dl.terms dd{padding-left:0}
@media (max-width:700px){
  .gloss dl{grid-template-columns:1fr}
  .gloss dt{padding-bottom:2px; border-top:1px solid var(--ink-600)}
  .gloss dd{padding-top:2px; border-top:none}
}

footer{background:var(--bar); border-top:1px solid var(--mint-400); margin-top:54px;
  padding:18px 22px; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  align-items:center; font-family:var(--mono); font-size:var(--t1); color:var(--fog-500);
  letter-spacing:.14em}

/* ---------------------------------------------------------------- misc */
#load{position:fixed; inset:0; background:var(--ink-800); z-index:200;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px}
#load .lbl{font-family:var(--mono); font-size:11px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--fog-500)}
#load .track{width:220px; height:2px; background:var(--ink-600); overflow:hidden}
#load .fill{height:100%; width:38%; background:var(--mint-400); animation:sl 1.05s infinite}
#load .loaderr{max-width:430px; text-align:center; color:var(--fog-300);
  font-size:13px; line-height:1.6; padding:0 20px}
@keyframes sl{0%{transform:translateX(-100%)}100%{transform:translateX(360%)}}

/* switching hospitals fetches, so say so rather than leaving the old figures silent */
.busy-bar{position:fixed; top:0; left:0; right:0; z-index:210; height:26px;
  display:flex; align-items:center; justify-content:center; gap:10px;
  background:var(--ink-900); border-bottom:1px solid var(--mint-400);
  font-family:var(--mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--mint-400)}
.busy-bar[hidden]{display:none}
.busy-bar::after{content:""; width:54px; height:2px; background:var(--ink-600);
  background-image:linear-gradient(90deg,var(--mint-400) 0 38%,transparent 38% 100%);
  background-size:200% 100%; animation:sl2 1.05s linear infinite}
@keyframes sl2{0%{background-position:-60% 0}100%{background-position:160% 0}}
body.busy .wrap{opacity:.55; transition:opacity .12s}
@media (prefers-reduced-motion:reduce){ .busy-bar::after{animation:none} }
.tip{position:fixed; z-index:150; background:var(--ink-900); border:1px solid var(--mint-400);
  padding:8px 11px; font-size:var(--t2); pointer-events:none; display:none; max-width:300px;
  box-shadow:0 6px 22px rgba(5,11,20,.75)}
.tip .t{font-weight:600; margin-bottom:4px}
.tip .r{display:flex; justify-content:space-between; gap:16px; color:var(--fog-300);
  font-variant-numeric:tabular-nums; font-size:11.5px}
.tip .r b{color:var(--fog-100); font-weight:600}
#toast{position:fixed; left:50%; bottom:26px; transform:translate(-50%,14px);
  background:var(--ink-900); border:1px solid var(--mint-400); color:var(--fog-100);
  padding:11px 18px; font-size:var(--t3); z-index:170; opacity:0; pointer-events:none;
  transition:opacity .18s,transform .18s; max-width:86vw; text-align:center}
#toast.on{opacity:1; transform:translate(-50%,0)}
/* Consent bar. Only ever shown to visitors the edge says are outside the US, so most
   people never see it. It sits above the toast and the FY2027 panel because nothing
   should cover a question the visitor still has to answer. */
.consent{position:fixed; left:0; right:0; bottom:0; z-index:200;
  display:flex; align-items:center; gap:20px; flex-wrap:wrap;
  background:var(--ink-900); border-top:1px solid var(--mint-400);
  padding:14px 22px; box-shadow:0 -12px 34px rgba(5,11,20,.66)}
.consent-txt{flex:1 1 440px; font-size:var(--t2); color:var(--fog-300); line-height:1.5;
  max-width:96ch}
.consent-txt strong{display:block; color:var(--fog-100); font-size:var(--t4);
  margin-bottom:3px; letter-spacing:-.005em}
.consent-act{display:flex; gap:10px; margin-left:auto}

@media (max-width:820px){
  /* Stacked, and the buttons go full width so neither is a hard target on a phone. */
  .consent{padding:13px 16px; gap:12px}
  .consent-act{margin-left:0; width:100%}
  .consent-act .btn{flex:1; padding:11px 14px}
}

/* Empty state, before a hospital has been chosen.
   The tool used to open on the largest hospital in the file, so a first-time visitor met a
   finished analysis of a Florida hospital they had never asked for. Measured result: they
   reloaded and left without ever using the search box. Now the page asks first.
   The analysis sections are hidden rather than left blank, because a column of empty
   headings reads as broken rather than as waiting. */
body.nopick [data-needs-hospital]{display:none}

.pick{margin:18px 0 4px; padding:15px 18px; background:var(--ink-900);
  border:1px solid var(--mint-400); border-left-width:3px;
  font-size:var(--t3); line-height:1.55; color:var(--fog-300)}
.pick strong{display:block; color:var(--fog-100); font-size:var(--t4); margin-bottom:4px}

/* The field is the whole point of this state, so make it the obvious target. */
body.nopick #hq{border-color:var(--mint-400)}

/* On a phone the empty state stacked the red notice, the lede, the instruction banner
   and Brian's note above the search box, which put the box below the fold at 390x844.
   The page told a first-time visitor to choose a hospital with nothing on screen to
   choose one with, and the spotlight arrow was drawn off the bottom pointing at it.

   Reordered rather than cut, so the field follows the sentence that names it and every
   word still ships. Empty state only, and only under 700px: above that the whole stack
   already fits above the fold and the desktop reading order is the better one.

   Explicit order on the four things that must come first, and order:6 on everything
   else, because the section also carries #ident, #alerts and #natLine. Those are empty
   here but must never be able to land between the instruction and the field. */
/* Revised 2026-08-15: the search field now comes straight after the headline
   in BOTH states, not just the empty one, and ahead of the notice -- "the
   search bar is all the way at the bottom" on a phone. The notice, pick
   banner and prose all read fine below the field people came to type in. */
@media (max-width:760px){
  .wrap > section:first-of-type{display:flex; flex-direction:column}
  .wrap > section:first-of-type > *{order:6}
  .wrap > section:first-of-type > .eyebrow{order:1}
  .wrap > section:first-of-type > h2{order:2}
  .wrap > section:first-of-type > .ctrl{order:3; margin-top:12px}
  .wrap > section:first-of-type > .redalert{order:4; margin-top:18px}
  .wrap > section:first-of-type > #pick{order:5}
}

/* ======================================================= first-visit spotlight
   Every layer is pointer-events:none. The search box is lifted above the scrim instead,
   so a visitor who ignores all of this and taps straight into the field is never blocked
   for a single frame. That is the whole design constraint: theatre that cannot cost a
   conversion.

   Positions come from JS, measured off the real field rect, so it lands correctly at any
   width without a media query. */
.spot{position:fixed; inset:0; z-index:150; pointer-events:none;
  opacity:1; transition:opacity .5s ease}
.spot.out{opacity:0}
.spot *{pointer-events:none}

.spot-scrim{position:absolute; inset:0; background:rgba(5,11,20,.74);
  animation:spotIn .4s ease both}

/* Lift the field and its dropdown out of the scrim so they read as spotlit, and so the
   result list is legible the instant they start typing. */
body.spotting .combo{position:relative; z-index:160}
body.spotting #hq{box-shadow:0 0 0 1px var(--mint-400), 0 0 34px 6px rgba(62,207,160,.5)}

/* Two rings leaving the field, staggered, so it reads as a pulse rather than a blip. */
.spot-ring{position:absolute; border:2px solid var(--mint-400); border-radius:6px;
  opacity:0; animation:spotRing 2.1s cubic-bezier(.22,1,.36,1) infinite}
.spot-ring.r2{animation-delay:.7s}

.spot-art{position:absolute; display:flex; flex-direction:column-reverse;
  align-items:center; gap:6px; transform-origin:50% 100%;
  animation:spotPop .7s cubic-bezier(.18,1.4,.4,1) .12s both}

.spot-arrow{filter:drop-shadow(0 0 18px rgba(62,207,160,.85));
  animation:spotBob 1.25s ease-in-out 1s infinite}
/* Each stroke draws itself before anything starts moving. */
.spot-arrow .sh{stroke-dasharray:170; stroke-dashoffset:170;
  animation:spotDraw .55s ease-out .22s forwards}
.spot-arrow .hd{stroke-dasharray:100; stroke-dashoffset:100;
  animation:spotDraw .3s ease-out .62s forwards}

.spot-say{font-family:var(--mono); font-size:15px; letter-spacing:.26em;
  text-transform:uppercase; color:var(--mint-300); white-space:nowrap;
  text-shadow:0 0 16px rgba(62,207,160,.6);
  animation:spotSay .5s ease .8s both}

@keyframes spotIn{from{opacity:0} to{opacity:1}}
@keyframes spotDraw{to{stroke-dashoffset:0}}
@keyframes spotPop{
  0%{opacity:0; transform:translateX(-50%) translateY(46px) scale(.72)}
  100%{opacity:1; transform:translateX(-50%) translateY(0) scale(1)}}
@keyframes spotSay{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none}}
@keyframes spotBob{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-19px)}}
@keyframes spotRing{
  0%{opacity:.85; transform:scale(1)}
  70%{opacity:0; transform:scale(1.5)}
  100%{opacity:0; transform:scale(1.5)}}

/* Anyone who has asked for less movement gets the pointer and the glow, and none of the
   bouncing, drawing or pulsing. */
@media (prefers-reduced-motion:reduce){
  .spot-scrim,.spot-art,.spot-arrow,.spot-say{animation:none}
  .spot-arrow .sh,.spot-arrow .hd{stroke-dashoffset:0; animation:none}
  .spot-ring{display:none}
}

.hidden{display:none !important}

@media (max-width:1200px){ .kpis,.kpis.k3{grid-template-columns:repeat(2,1fr)} }
@media (max-width:820px){
  .wrap{padding:0 13px 50px}
  .bar{padding:9px 13px; gap:9px}
  .ctx .nm{max-width:16ch}
  .brandmark{padding-left:0; border-left:none}
  /* on a phone the promo docks to the bottom so it never covers the data */
  .promo{top:auto; bottom:0; right:0; left:0; width:auto;
    animation:promoUp .55s cubic-bezier(.16,1,.3,1) .5s both}
  .promo-body{animation:none; padding:13px 16px; gap:13px; border-left:none; border-right:none;
    border-bottom:none; box-shadow:0 -10px 30px rgba(5,11,20,.6)}
  .promo-body:hover{transform:none}
  .promo-viz{width:44px; height:44px; flex:0 0 44px}
  .promo-viz .burst{width:22px; height:22px}
  .promo-txt b{font-size:17px}
  .promo-txt small{font-size:11px}
  .promo-cta{margin-top:7px}
  .promo.min{left:auto; width:auto}
  .promo.min .promo-body{border:1px solid var(--mint-400)}
  @keyframes promoUp{from{opacity:0;transform:translateY(60px)}to{opacity:1;transform:none}}
  .grid2{grid-template-columns:1fr}
  .ident .facts{margin-left:0; gap:18px}
  .hint{margin-left:0; text-align:left; max-width:none}
  .tblwrap{max-height:420px}
  tbody td.l{min-width:150px}
  /* keep the column that carries the decision on screen instead of off the right edge */
  .hide-sm{display:none !important}
  /* Section 09 lost its four per-case columns, so the four that are left fit a phone
     if the headers are allowed to wrap and the title column gives up a little width.
     They did not fit before, and the revenue change column, which is the one a reader
     came for, sat off the right edge behind a sideways scroll. Scoped to #tbl: the peer
     table in section 06 and the coverage table in section 08 keep their own widths. */
  #tbl table{table-layout:fixed; width:100%}
  #tbl thead th{white-space:normal}
  #tbl tbody td.l{min-width:0}
  #tbl tbody td{overflow-wrap:anywhere}
  /* The code cell carries the blend marker on a retired MS-DRG. It wraps onto a second
     line here rather than running out of its column. */
  #tbl thead th:first-child,#tbl tbody td:first-child{width:48px; white-space:normal}
  /* Four columns on a phone, so the two numeric ones take what they need and the title
     keeps the rest. A four-digit MS-DRG and a figure like +$1.8M both fit 62px at this
     size, and the 24px that buys back goes to the title, which is the column that was
     wrapping a DRG name over five lines. */
  #tbl thead th:not(.l),#tbl tbody td:not(.l){width:62px}
  #tbl tbody td,#tbl thead th{padding-left:7px; padding-right:7px}
  tbody td:first-child,thead th:first-child{position:sticky; left:0; z-index:4;
    background:var(--ink-900)}
  tbody tr:hover td:first-child{background:var(--ink-700)}
  tbody tr.me td:first-child{background:var(--mint-900)}
  thead th:first-child{z-index:6; background:var(--bar)}
  .field,.combo{width:100%}
  .seg{width:100%}
  .seg button{flex:1 1 100%; border-right:none; border-bottom:1px solid var(--ink-500)}
  .seg button:last-child{border-bottom:none}
  /* A two-way toggle stays side by side on a phone. Its labels are short enough to fit
     and stacking them pushes the chart it controls off the screen. */
  .seg.seg-row button{flex:1 1 0; border-right:1px solid var(--ink-500); border-bottom:none;
    padding:9px 6px; letter-spacing:.08em}
  .seg.seg-row button:last-child{border-right:none}
}
@media (max-width:520px){ .kpis{grid-template-columns:1fr} }

@media print{
  @page{margin:12mm}
  body{background:#fff; color:#0D1B2A; font-size:10.5pt; overflow:visible}
  *{-webkit-print-color-adjust:exact; print-color-adjust:exact}
  .ctrl,.bar,#load,.btn,#toast,.tip,.menu,#tblCount,.legend,.modal-wrap,.promo,
  .consent,#ucpMode,.sortar{display:none !important}
  /* Section 07's toggle picks one of two charts on screen. On paper there is nothing to
     click, so print both. The panel splits across pages rather than being squeezed. */
  .ucpPane[hidden]{display:block !important}
  #ucpmkt .panel{break-inside:auto}
  .ucpPane{break-inside:avoid; padding-top:6px}
  .legal{background:#fff !important; border-color:#A9BAC8 !important; break-inside:auto}
  .legal p,.legal .legal-foot{color:#4A5A68 !important}
  .legal h3{color:#0D1B2A !important}
  #printMeta{display:block; font-family:var(--mono); font-size:8pt; color:#6C8090;
    border-bottom:1px solid #A9BAC8; padding-bottom:6px; margin-bottom:10px}
  #printBadge{display:flex !important; align-items:center; gap:10px; margin-bottom:8px}
  .panel,.ident,.kpi,.method,.lever,.tblwrap{background:#fff !important;
    border-color:#A9BAC8 !important; break-inside:avoid}
  .kpis{background:#A9BAC8}
  .kpi .k,.kpi .s,.panel .desc,.method p,.method li,.eyebrow,.lede,.gloss dd{color:#4A5A68 !important}
  .kpi .v,.kpi .v.neu,.kpi .v.pos,.kpi .v.neg,h1,h2,h3,.alert b,tbody td,.gloss dt,
  .lever .v{color:#0D1B2A !important}
  .chart .vl{fill:#0D1B2A}
  .capsule{color:#4A5A68 !important; border-color:#A9BAC8 !important}
  .gloss{background:#fff !important; border-color:#A9BAC8 !important}
  .gloss dt,.gloss dd{border-top-color:#D8DEE3 !important}
  /* The detail table is ten columns now that the four per-case ones are gone. A Letter page
     is 816 CSS pixels wide, which is inside the 820px phone breakpoint above, so the print
     table was coming out at the phone's four columns and the revenue change printed with
     neither year behind it. .pr-keep is the two revenue years, put back explicitly because
     the phone rule that hid them also carries !important. Six columns at 8.5pt fit the 12mm
     margins. The three weights and the share bar stay off paper: the bar needs pixels it
     does not have there. */
  #tbl .hide-sm:not(.pr-keep),#peerTable .hide-sm{display:none !important}
  #tbl thead th.pr-keep,#tbl tbody td.pr-keep{display:table-cell !important}
  #tbl table,#peerTable table{font-size:8.5pt; table-layout:fixed; width:100%}
  .alert{background:#F4F7F9 !important; color:#0D1B2A !important}
  /* Both pricer notices have to survive onto paper, the short one under the title and
     the full note at the bottom of section 11, and so does the key to the hatched bars
     in section 07, which is the one legend that carries meaning. */
  .redalert{background:#FFF1EF !important; color:#7A1B12 !important;
    border-color:#C0392B !important; break-inside:avoid}
  .redalert strong{color:#A8342A !important}
  /* Both section 07 charts print, so both keys have to print. Leaving #ucpPdLegend out
     put the per-discharge chart on paper with mint add-on blocks and hatched cut-out
     blocks and nothing saying what either one means. */
  #ucpLegend,#ucpPdLegend{display:flex !important; color:#4A5A68 !important}
  /* The selected-hospital convention has to survive onto paper too. */
  .kpi.sel{border-left:3px solid #2A8E72 !important}
  .kpi.sel .k{color:#1F6E58 !important}
  .selbadge{color:#1F6E58 !important; border-color:#1F6E58 !important}
  /* The blended-price caveat is part of the number, so it prints with it. */
  .rmpflag{color:#8A5A10 !important; border-color:#8A5A10 !important}
  /* The selected hospital's name is marked mint in the section 07 prose where it has no
     bar. Screen mint on white paper is unreadable, so it prints in the darker mint the
     badge and the peer row already print in. */
  .desc .mint,.alert .mint{color:#1F6E58 !important; font-weight:600}
  .tblwrap{max-height:none !important; overflow:visible !important}
  /* Section 09 is 223 MS-DRG rows at a large hospital. Every other section fits a page and
     is told not to break; this one cannot, and Chrome answered by printing six rows and
     cutting the other 217, with the glossary landing on top of what was left. So this
     section, its panel and the table wrapper all break across pages. The header row repeats
     at the top of each page and no single row is split down the middle. */
  #drgdetail,#drgdetail .panel,#drgdetail .tblwrap{break-inside:auto !important}
  #drgdetail table{break-inside:auto}
  #drgdetail tbody tr{break-inside:avoid}
  thead{display:table-header-group}
  thead th{background:#E8EEF2 !important; color:#0D1B2A !important; position:static}
  /* A Letter page is inside the phone breakpoint, which freezes the code column and paints
     it dark so it stays readable while the table scrolls sideways. Paper does not scroll,
     and that rule printed a solid dark column down every page. Static and unpainted here,
     and the selected hospital's row keeps the light mint the rest of the row prints in. */
  thead th:first-child{position:static !important; background:#E8EEF2 !important}
  tbody td:first-child{position:static !important; background:transparent !important}
  tbody tr.me td:first-child{background:#D8F2E8 !important}
  /* The MS-DRG code is deliberately quiet on screen, where it sits on a dark panel. The
     same grey on white paper is the faintest thing on the page, and it is the number a
     reader looks the row up by. */
  td .code{color:#0D1B2A !important}
  tbody tr.me{background:#D8F2E8 !important}
  tbody tr.me td{color:#0D1B2A !important}
  .chart .il{fill:#0D1B2A}
  .chart .ax,.chart .cl,.chart .sl{fill:#4A5A68}
  section{break-inside:avoid-page; padding-top:16px}
  footer{background:#fff; color:#4A5A68; border-top:1px solid #A9BAC8}
}

/* ==========================================================================
   Site nav drop-in (the brightspotinsights.com header), scoped under bsn- and
   #bsiSiteNav so it cannot reach any rule above it. Every colour and font is one
   of this stylesheet's own custom properties: the site's tokens and these are the
   same values, and one source of truth is the only way they stay that way.

   Not fixed and not sticky, on purpose. See the comment on the markup in index.html.
   ========================================================================== */
#bsiSiteNav{background:var(--ink-800); border-bottom:1px solid var(--ink-500); padding:0 22px}
.bsn-inner{max-width:1440px; margin:0 auto; height:72px; display:flex;
  align-items:center; justify-content:space-between; gap:16px}
/* Nothing in this header is nowrap, which is how the site's own header behaves at
   1440: the capsule, the last two link labels and both button labels all set on two
   lines rather than pushing the row off the screen. Forcing them onto one line here
   cost 185px the row does not have and clipped the second button. */
.bsn-logo{display:inline-flex; align-items:center; gap:8px; border-radius:9999px;
  border:1px solid rgba(108,128,144,.5); padding:6px 14px;
  font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.2em;
  color:var(--fog-100); text-decoration:none; transition:border-color .15s;
  flex:0 1 auto; min-width:0; line-height:1.25}
.bsn-logo:hover{border-color:var(--mint-400)}
.bsn-glyph{flex:0 0 auto}
.bsn-links{display:none; align-items:center; gap:clamp(18px,2vw,32px); flex:1 1 auto;
  justify-content:center; min-width:0}
.bsn-links a{font-family:var(--mono); font-size:13px; text-transform:uppercase;
  letter-spacing:.16em; color:var(--fog-300); text-decoration:none; line-height:1.35;
  position:relative; transition:color .2s}
.bsn-links a:hover{color:var(--fog-100)}
.bsn-links a.bsn-active{color:var(--mint-400)}
.bsn-links a.bsn-active::after{content:""; position:absolute; left:0; right:0; bottom:-4px;
  height:1px; background:var(--mint-400)}
.bsn-new{margin-left:6px; border-radius:9999px; background:rgba(62,207,160,.2);
  padding:2px 6px; font-family:var(--mono); font-size:9px; text-transform:uppercase;
  letter-spacing:.08em; color:var(--mint-400)}
.bsn-ctas{display:none; align-items:center; gap:12px; flex:0 1 auto; min-width:0}
.bsn-cta{font-family:var(--mono); font-size:13px; text-transform:uppercase;
  letter-spacing:.14em; padding:8px 16px; border-radius:2px; text-decoration:none;
  line-height:1.35; transition:background-color .2s,color .2s}
.bsn-cta-fill{background:var(--mint-400); color:var(--ink-900)}
.bsn-cta-fill:hover{background:var(--mint-300)}
.bsn-cta-outline{border:1px solid rgba(62,207,160,.6); color:var(--fog-100)}
.bsn-cta-outline:hover{background:var(--mint-400); color:var(--ink-900)}

.bsn-toggle{display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:6px; width:44px; height:44px; background:none; border:none; padding:0; cursor:pointer;
  flex:0 0 auto}
.bsn-toggle span{display:block; width:24px; height:2px; background:var(--mint-400);
  transition:transform .3s,opacity .3s}
.bsn-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.bsn-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.bsn-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
/* The panel is a full-screen fixed layer and this header is an ordinary block in the
   page, so with the panel open the button that closes it would be underneath it. The
   site's own header is fixed and sits above its panel instead; this is the same
   result without making this header fixed, which the tool's sticky bar and floating
   card are both measured against. Only the button leaves the flow, into the spot it
   already occupies, so nothing moves when it goes and nothing moves when it returns:
   the row it leaves is 72px tall either way and is behind the panel while it is gone. */
body.bsn-open .bsn-toggle{position:fixed; top:14px; right:22px; z-index:260}

/* 250 clears everything fixed in this file except the Easter egg, which is a full
   takeover of its own and cannot be open at the same time as this. */
.bsn-overlay{position:fixed; inset:0; z-index:250; background:var(--ink-900);
  display:flex; flex-direction:column; overflow-y:auto; overscroll-behavior:contain;
  padding:80px 24px calc(2rem + env(safe-area-inset-bottom))}
.bsn-overlay[hidden]{display:none}
.bsn-overlay nav{display:flex; flex-direction:column; gap:16px}
.bsn-overlay nav a{display:flex; align-items:center; justify-content:space-between;
  font-family:var(--sans); font-weight:700; font-size:1.75rem; line-height:1.2;
  letter-spacing:-.01em; color:var(--fog-100); text-decoration:none}
.bsn-overlay nav a.bsn-active{color:var(--mint-400)}
.bsn-idx{font-family:var(--mono); font-size:13px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--fog-500)}
/* margin-top:auto, not space-between: the buttons sit at the bottom when the links
   leave room and scroll away with them when they do not. A version of this that did
   not scroll put the last two links permanently off a 844px phone. */
.bsn-overlay-ctas{margin-top:auto; padding-top:32px; display:flex; flex-direction:column; gap:16px}
.bsn-overlay-ctas .bsn-cta{width:100%; text-align:center; padding:16px}

@media (min-width:640px){
  .bsn-overlay nav a{font-size:2.5rem}
}
@media (min-width:1024px){
  .bsn-links,.bsn-ctas{display:flex}
  .bsn-toggle{display:none}
}
/* Site chrome does not belong on paper. */
@media print{
  #bsiSiteNav,.bsn-overlay{display:none !important}
}

/* ==========================================================================
   FY2027 release stage. Five beats, about ten seconds, then it hands the page to
   the spotlight and gets out of the way.

   The beats are driven from JS by class, not by a wall of animation-delays: the
   stage gets .warp, .boom, .say, .nums and .settle in turn and every rule below
   keys off one of them. One timeline, in one place, and a skip can cut it at any
   point without leaving half the screen still animating on a delay.

   What is on screen is generated, not loaded. The field behind the type is a
   canvas of this build's own MS-DRG codes and FY2027 rates flying at the viewer;
   the shockwave, the flash, the beam and the shake are transform and opacity on
   four small elements. No images, no audio, no libraries, nothing fetched.

   z-index 300 clears the loader (200), the mobile nav (250) and everything else
   fixed in this file. The Easter egg at 400 is the only thing above it, and the
   two cannot be open together.
   ========================================================================== */
.fan{position:fixed; inset:0; z-index:300; background:var(--ink-900); overflow:hidden;
  opacity:1; transition:opacity .5s ease}
.fan.out{opacity:0}

/* ---- skip. On screen before anything else is, and the first tab stop in the
   dialog, because the one thing a launch sequence owes a visitor is a door. */
.fan-skip{position:absolute; top:18px; right:18px; z-index:6;
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--mono); font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--fog-300); background:rgba(5,11,20,.6); border:1px solid var(--ink-500);
  border-radius:0; padding:9px 13px; cursor:pointer; transition:color .18s,border-color .18s}
.fan-skip:hover{color:var(--fog-100); border-color:var(--mint-400)}
.fan-key{font-size:9.5px; letter-spacing:.14em; color:var(--fog-500);
  border:1px solid var(--ink-500); padding:1px 5px}

/* ---- the camera. Everything that can shake hangs off this one element, so a
   seismic beat costs one compositor transform instead of a page of moved boxes. */
.fan-shake{position:absolute; inset:0; will-change:transform}
.fan-shake.q1{animation:fanQuakeBig .42s cubic-bezier(.36,.07,.19,.97) both}
.fan-shake.q2{animation:fanQuakeSm .2s ease-out both}

/* ---- beat 1 and 2. The rate field, drawn in JS. */
.fan-field{position:absolute; inset:0; width:100%; height:100%; display:block}

/* Stage lighting. A pool of ink from the left so the type is always on clean
   background and the field only shows where nothing is being read. */
.fan-veil{position:absolute; inset:0; z-index:2; opacity:0; transition:opacity .8s ease;
  background:linear-gradient(101deg,rgba(5,11,20,.985) 0%,rgba(5,11,20,.96) 34%,
    rgba(5,11,20,.72) 56%,rgba(5,11,20,.24) 78%,rgba(5,11,20,0) 100%)}
.fan.boom .fan-veil{opacity:1}

/* ---- beat 2. The detonation: two rings out of the centre and one screen-wide
   flash. Scale and opacity only, so neither one costs a layout. */
.fan-ring{position:absolute; left:50%; top:50%; z-index:3; pointer-events:none}
.fan-ring i{position:absolute; left:-50vmax; top:-50vmax; width:100vmax; height:100vmax;
  border-radius:9999px; border:3px solid var(--mint-400); opacity:0;
  box-shadow:0 0 60px 10px rgba(62,207,160,.45), inset 0 0 60px 10px rgba(62,207,160,.25)}
.fan.boom .fan-ring i{animation:fanShock 1.15s cubic-bezier(.16,1,.3,1) both}
.fan.boom .fan-ring i:nth-child(2){animation-duration:1.5s; animation-delay:.11s;
  border-width:1px; opacity:0}

.fan-flash{position:absolute; inset:0; z-index:4; opacity:0; pointer-events:none;
  background:radial-gradient(circle at 50% 50%,#EAFFF7 0%,rgba(62,207,160,.85) 34%,
    rgba(62,207,160,0) 72%)}
.fan.boom .fan-flash{animation:fanFlash .72s ease-out both}

/* ---- the stage. Left-aligned against a rule rather than centred: the tool sets
   every section against a left rule and this is the same page, at volume. */
/* Clipped, not scrolled. The light beam overhangs the column by 40% top and bottom by
   design, and a scroll container counts that overhang as content: the stage drew a
   scrollbar down the side of the whole sequence for a decoration nobody can reach.
   The moving version is laid out to fit the window it is in, so nothing here needs to
   scroll. The still version does, and it turns scrolling back on where the beam is
   switched off anyway. */
.fan-stage{position:absolute; inset:0; z-index:5; display:flex; align-items:center;
  gap:clamp(16px,3vw,34px); padding:clamp(56px,9vh,96px) clamp(20px,6vw,84px) clamp(28px,6vh,64px);
  overflow:hidden; overscroll-behavior:contain}
.fan-rule{flex:0 0 1px; align-self:stretch; background:linear-gradient(180deg,
  var(--mint-400),rgba(62,207,160,.12)); transform:scaleY(0); transform-origin:50% 0;
  transition:transform 1.1s cubic-bezier(.16,1,.3,1)}
.fan.boom .fan-rule{transform:scaleY(1)}
.fan-body{position:relative; flex:1 1 auto; min-width:0; max-width:1080px;
  display:flex; flex-direction:column; align-items:flex-start;
  gap:clamp(12px,2.1vh,22px)}

/* The light beam: one pass across the whole column as the headline lands. */
.fan-beam{position:absolute; top:-40%; bottom:-40%; left:0; width:52%; z-index:1;
  pointer-events:none; opacity:0; transform:translateX(-120%) skewX(-14deg);
  background:linear-gradient(90deg,rgba(62,207,160,0) 0%,rgba(232,238,242,.13) 45%,
    rgba(255,255,255,.22) 52%,rgba(62,207,160,.16) 60%,rgba(62,207,160,0) 100%)}
.fan.say .fan-beam{animation:fanBeam 1.25s cubic-bezier(.4,0,.25,1) .12s both}

.fan-chips{display:flex; flex-wrap:wrap; gap:8px; opacity:0}
.fan.say .fan-chips{animation:fanRise .5s ease both}
.fan-chip{font-family:var(--mono); font-size:10px; letter-spacing:.24em;
  text-transform:uppercase; color:var(--fog-500); border:1px solid var(--ink-500);
  padding:5px 10px; white-space:nowrap}
.fan-chip.on{color:var(--mint-400); border-color:var(--mint-400)}

/* ---- beat 3. Three hammer blows, one line at a time, each one riding up out of
   its own mask so the headline is set rather than faded in. Edge-lit with a
   gradient fill that is brightest along the cap line, which is what a light
   source above the type actually does. */
.fan-h{position:relative; z-index:2; margin:0; font-weight:700; line-height:.98;
  letter-spacing:-.045em; font-size:clamp(2.3rem,7.4vw,5.4rem);
  filter:drop-shadow(0 0 34px rgba(62,207,160,.22))}
.fan-mask{display:block; overflow:hidden; padding-bottom:.07em}
.fan-in{display:block; transform:translateY(112%);
  background:linear-gradient(180deg,#FFFFFF 0%,#E8EEF2 34%,#93A6B5 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent}
.fan-in .mint{-webkit-text-fill-color:var(--mint-400); color:var(--mint-400)}
.fan.say .fan-in{animation:fanHammer .5s cubic-bezier(.19,1,.22,1) both}
.fan.say .fan-mask:nth-child(2) .fan-in{animation-delay:.38s}
.fan.say .fan-mask:nth-child(3) .fan-in{animation-delay:.76s}

.fan-sub{position:relative; z-index:2; margin:0; max-width:60ch; font-size:var(--t4);
  line-height:1.5; color:var(--fog-300); opacity:0}
.fan.say .fan-sub{animation:fanRise .5s ease 1.15s both}

/* ---- beat 4. Four figures, each one landing on a mint bar that wipes across it.
   The opacity is on the grid as well as on the cells: the grid draws the hairlines
   between them with its own background, and a transparent cell over a painted grid
   is a solid block sitting on the field for the first five seconds. */
.fan-stats{position:relative; z-index:2; width:100%; display:grid; gap:1px;
  grid-template-columns:repeat(2,minmax(0,1fr)); background:var(--ink-500);
  border:1px solid var(--ink-500); opacity:0}
.fan.nums .fan-stats{opacity:1}
.fan-stat{position:relative; overflow:hidden; background:var(--ink-900);
  padding:clamp(12px,1.8vh,18px) clamp(12px,1.6vw,20px);
  display:flex; flex-direction:column; gap:7px; opacity:0}
.fan.nums .fan-stat{animation:fanSlam .46s cubic-bezier(.18,1,.24,1) both}
.fan.nums .fan-stat:nth-child(2){animation-delay:.13s}
.fan.nums .fan-stat:nth-child(3){animation-delay:.26s}
.fan.nums .fan-stat:nth-child(4){animation-delay:.39s}
/* The impact flash: a mint block that crosses the cell as the figure arrives. */
.fan-hit{position:absolute; inset:0; background:var(--mint-400); transform:scaleX(0);
  transform-origin:0 50%}
.fan.nums .fan-hit{animation:fanHit .5s cubic-bezier(.5,0,.2,1) both}
/* While the flash floods the cell the figure inverts to ink so the number the slam
   lands stays legible against its own flash. */
.fan.nums .fan-stat .fan-num{animation:fanNumInk .5s steps(1,end) both}
.fan.nums .fan-stat:nth-child(2) .fan-num{animation-delay:.13s}
.fan.nums .fan-stat:nth-child(3) .fan-num{animation-delay:.26s}
.fan.nums .fan-stat:nth-child(4) .fan-num{animation-delay:.39s}
@keyframes fanNumInk{0%{color:var(--ink-900)}55%{color:var(--ink-900)}100%{color:var(--mint-400)}}
.fan.nums .fan-stat .fan-lbl{animation:fanLblInk .5s steps(1,end) both}
.fan.nums .fan-stat:nth-child(2) .fan-lbl{animation-delay:.13s}
.fan.nums .fan-stat:nth-child(3) .fan-lbl{animation-delay:.26s}
.fan.nums .fan-stat:nth-child(4) .fan-lbl{animation-delay:.39s}
@keyframes fanLblInk{0%{color:var(--ink-900)}55%{color:var(--ink-900)}100%{color:var(--fog-500)}}
.fan.nums .fan-stat:nth-child(2) .fan-hit{animation-delay:.13s}
.fan.nums .fan-stat:nth-child(3) .fan-hit{animation-delay:.26s}
.fan.nums .fan-stat:nth-child(4) .fan-hit{animation-delay:.39s}
/* Tabular figures, because the count runs through every digit on the way up and
   proportional numerals make the whole line twitch while it does. */
.fan-num{position:relative; font-weight:700; color:var(--mint-400); line-height:1;
  font-size:clamp(1.5rem,3.1vw,2.5rem); letter-spacing:-.03em;
  font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1}
.fan-lbl{position:relative; font-family:var(--mono); font-size:10px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--fog-500); line-height:1.6}

/* The caveat carries the same weight as the red notice further down the page, and
   it is here for the same reason: nothing on this screen may read as more settled
   than the rates actually are. */
.fan-note{position:relative; z-index:2; margin:0; max-width:62ch; font-size:var(--t3);
  line-height:1.55; color:var(--fog-500); border-left:2px solid var(--ink-500);
  padding-left:14px; opacity:0}
.fan.nums .fan-note{animation:fanRise .5s ease .6s both}

/* ---- beat 5, the note. Not a footer to the beat above it: its own beat. The rule,
   the chips, the headline, the figures and the caveat all leave together and this is
   what is left on the stage, in mint, at display scale, on the same spine everything
   else was set against.

   Everything above leaves by animation rather than by a plain opacity rule, because
   those elements finished their own animations with fill-mode both and an animated
   value beats a declared one. A second, later animation is the only thing that can
   take the screen back from them without snapping it.

   The note itself is absolutely positioned inside the column and centred on it, so
   the stage never reflows between beats: the outgoing content holds its box, this
   arrives over it, and the browser moves opacity and transform and nothing else.

   The two halves of the handoff are sequenced, not overlapped. Both sit in the same
   column, so any frame that shows both at once shows the note printed through the
   headline and the figures. The outgoing content gives up all of its opacity in the
   first 36% of its fall, roughly 223ms, and keeps travelling the rest of the way
   invisible. The note waits 320ms before it starts. That leaves about 100ms of empty
   stage between them and no frame where two things are readable at once. Anything
   that changes either number has to keep that gap. */
.fan.settle .fan-chips,
.fan.settle .fan-h,
.fan.settle .fan-sub,
.fan.settle .fan-stats,
.fan.settle .fan-note{animation:fanFall .62s cubic-bezier(.4,0,.2,1) both}

.fan-sign{position:absolute; left:0; right:0; top:50%; z-index:3;
  transform:translateY(-50%); opacity:0; pointer-events:none;
  display:flex; flex-direction:column; align-items:flex-start; gap:clamp(18px,3vh,32px);
  border-left:2px solid var(--mint-400); padding-left:clamp(16px,2vw,28px)}
/* The .32s is the gap that keeps the note off the top of the outgoing beat. See the
   note above the fall rule. */
.fan.settle .fan-sign{animation:fanSign .8s cubic-bezier(.16,1,.3,1) .32s both;
  pointer-events:auto}
.fan-sign-t{margin:0; max-width:34ch; font-family:var(--sans); font-weight:600;
  font-size:clamp(1.35rem,2.55vw,2.5rem); line-height:1.24; letter-spacing:-.022em;
  color:var(--mint-400); filter:drop-shadow(0 0 30px rgba(62,207,160,.28))}
/* Set apart on its own line, under a short mint rule, in mono and not recased. */
.fan-sig{display:block; margin-top:clamp(14px,2.4vh,26px); font-family:var(--mono);
  font-weight:400; font-size:clamp(1rem,1.45vw,1.4rem); letter-spacing:.24em;
  color:var(--mint-300); filter:none}
.fan-sig::before{content:""; display:block; width:56px; height:2px;
  background:var(--mint-400); margin-bottom:clamp(10px,1.6vh,16px)}

.fan-go{position:relative; z-index:2; font-family:var(--mono); font-size:12px;
  letter-spacing:.2em; text-transform:uppercase; background:var(--mint-400);
  color:var(--ink-900); border:none; border-radius:0; padding:14px 26px; cursor:pointer;
  font-weight:500; opacity:0; visibility:hidden; transition:background-color .18s}
/* Trails the note rather than racing it: the note starts at .32s and takes .8s, so
   the button arrives while the last of the words are still settling.
   The visibility is in the keyframes rather than declared here, so the button is not
   in the focus ring during the delay. The ring is built from what is on screen, and a
   button that is only a transparent box is a stop that goes nowhere. */
.fan.settle .fan-go{animation:fanShow .5s ease .8s both}
.fan-go:hover{background:var(--mint-300)}

@keyframes fanQuakeBig{
  0%{transform:translate3d(0,0,0)}
  12%{transform:translate3d(-11px,7px,0)}
  26%{transform:translate3d(9px,-8px,0)}
  40%{transform:translate3d(-7px,-4px,0)}
  56%{transform:translate3d(6px,5px,0)}
  72%{transform:translate3d(-3px,2px,0)}
  88%{transform:translate3d(2px,-1px,0)}
  100%{transform:translate3d(0,0,0)}}
@keyframes fanQuakeSm{
  0%{transform:translate3d(0,0,0)}
  30%{transform:translate3d(-3px,2px,0)}
  65%{transform:translate3d(2px,-1px,0)}
  100%{transform:translate3d(0,0,0)}}
@keyframes fanShock{
  0%{opacity:0; transform:scale(0)}
  6%{opacity:1}
  100%{opacity:0; transform:scale(1.9)}}
@keyframes fanFlash{
  0%{opacity:0}
  9%{opacity:.92}
  100%{opacity:0}}
@keyframes fanBeam{
  0%{opacity:0; transform:translateX(-120%) skewX(-14deg)}
  14%{opacity:1}
  100%{opacity:0; transform:translateX(300%) skewX(-14deg)}}
@keyframes fanHammer{
  from{transform:translateY(112%)}
  to{transform:translateY(0)}}
@keyframes fanRise{
  from{opacity:0; transform:translateY(14px)}
  to{opacity:1; transform:none}}
/* fanRise with the visibility carried in it. Visibility steps rather than blends, and
   it steps on the first frame past the delay, which is the frame the button starts
   fading in on. */
@keyframes fanShow{
  from{opacity:0; transform:translateY(14px); visibility:hidden}
  to{opacity:1; transform:none; visibility:visible}}
@keyframes fanSlam{
  0%{opacity:0; transform:translateY(30px) scale(.94)}
  100%{opacity:1; transform:none}}
/* Front-loaded on purpose. The opacity is spent in the first third so the stage is
   clear before the note starts, and the travel carries on underneath it for the rest
   of the run so the exit still reads as a fall rather than a cut. The 36% keyframe
   names no transform, so the rise interpolates across the whole .62s regardless. */
@keyframes fanFall{
  0%{opacity:1; transform:none}
  36%{opacity:0}
  100%{opacity:0; transform:translateY(-26px)}}
/* The percentage in the translate is the element's own height, so the note stays
   centred on the column while it rises the last few pixels into place. */
@keyframes fanSign{
  from{opacity:0; transform:translateY(calc(-50% + 26px))}
  to{opacity:1; transform:translateY(-50%)}}
@keyframes fanHit{
  0%{transform:scaleX(0); transform-origin:0 50%}
  46%{transform:scaleX(1); transform-origin:0 50%}
  47%{transform:scaleX(1); transform-origin:100% 50%}
  100%{transform:scaleX(0); transform-origin:100% 50%}}

@media (min-width:1000px){
  .fan-stats{grid-template-columns:repeat(4,minmax(0,1fr))}
}

/* Anyone who has asked for less movement gets the finished frame: no canvas at all
   (JS never starts it), no sweep, no count, no shake. Every word this screen came
   to say is on it at once, including the note, which keeps the mint and the display
   size it has in the moving version and simply sits at the foot of the column
   instead of arriving over it. The headline gives up some size to make the room,
   because on this version the note is not a beat later, it is on the same screen.
   The column is set from the top and the stage scrolls, so a long note on a short
   window is reachable rather than centred and clipped. */
@media (prefers-reduced-motion:reduce){
  .fan{transition:none}
  .fan-field,.fan-ring,.fan-flash,.fan-beam{display:none}
  .fan-veil{opacity:1; transition:none}
  .fan-rule{transform:scaleY(1); transition:none}
  /* One screen holds what five beats held, so the room comes out of the gaps and the
     padding before it comes out of anything anybody reads. */
  .fan-stage{align-items:flex-start; overflow-y:auto;
    padding-bottom:clamp(20px,3vh,32px)}
  .fan-body{gap:clamp(10px,1.5vh,16px)}
  .fan-chips,.fan-sub,.fan-stats,.fan-stat,.fan-note,.fan-go{
    opacity:1; transform:none; animation:none; visibility:visible}
  .fan-h{font-size:clamp(1.9rem,4.4vw,3.1rem)}
  .fan-in{transform:none; animation:none}
  .fan-hit{display:none}
  .fan-shake.q1,.fan-shake.q2{animation:none}
  .fan-sign{position:static; transform:none; opacity:1; animation:none;
    pointer-events:auto; margin-top:clamp(8px,1.6vh,18px)}
}

/* On a phone the column is the full width, so there is no right side to leave the
   field in. Flat pool instead, still letting it read faintly behind the type. */
@media (max-width:760px){
  .fan-veil{background:rgba(5,11,20,.88)}
  /* Everything from the chips to the button has to land inside 844px, because the
     button below the fold on a phone is a button that is not there. The savings are
     taken out of the gaps and the padding rather than out of the words. */
  .fan-stage{align-items:flex-start; padding:62px 20px 20px}
  .fan-body{gap:11px}
  .fan-chip{font-size:9px; letter-spacing:.16em; padding:4px 8px}
  .fan-h{font-size:clamp(2rem,9vw,2.9rem)}
  .fan-num{font-size:clamp(1.35rem,6.4vw,1.9rem)}
  .fan-lbl{font-size:9.5px; letter-spacing:.12em}
  .fan-note{line-height:1.55}
  .fan-sign{gap:18px; padding-left:15px}
  .fan-sign-t{max-width:none; font-size:clamp(1.3rem,5.6vw,1.9rem); line-height:1.3}
}
/* Short viewports. A phone on its side is 390px tall and the stage has to fit in it. */
@media (max-height:620px){
  .fan-stage{align-items:flex-start; padding-top:52px}
  .fan-body{gap:10px}
  .fan-h{font-size:clamp(1.5rem,4.4vw,2.2rem)}
  .fan-num{font-size:clamp(1.4rem,4.4vw,1.9rem)}
  .fan-sub{display:none}
  .fan-sign{gap:14px}
  .fan-sign-t{font-size:clamp(1.05rem,3.1vw,1.55rem); line-height:1.3}
  .fan-sig{margin-top:12px}
  .fan-sig::before{margin-bottom:8px}
}
/* A phone showing the still version has one screen for what the moving version says
   over five beats, so the headline and the note each come down one step and the scope
   line goes. Nothing is lost with it: the two figures it quotes are the two tiles
   directly beneath it, labelled in the same words. Last of the three, because it has
   to outrank the two width rules above rather than be outranked by them. */
@media (prefers-reduced-motion:reduce) and (max-width:760px){
  .fan-stage{padding-top:52px}
  .fan-h{font-size:clamp(1.6rem,7vw,2.2rem)}
  .fan-sub{display:none}
  .fan-sign-t{font-size:clamp(1.15rem,4.9vw,1.6rem)}
}

/* Gone by the time anything prints, but never on paper either way. */
@media print{
  .fan{display:none !important}
}

/* ================================================================ a note from Brian
   Real page content, sitting with the instruction it belongs with, and shown in the
   same empty state the picker is shown in. It is here as well as on the release
   stage so that a reduced-motion visitor and a visitor who skips the stage in the
   first second both still get read to by a person.

   It carries the same mint and the same larger setting it has on the stage, one step
   down in size because here it shares the screen with the thing it is asking the
   visitor to do. */
.bnote{display:none}
body.nopick .bnote{display:block; margin:16px 0 8px; max-width:52ch;
  border-left:2px solid var(--mint-400); padding:2px 0 2px 16px}
.bnote p{margin:0; font-family:var(--sans); font-weight:600; letter-spacing:-.018em;
  font-size:clamp(1.05rem,1.5vw,1.45rem); line-height:1.4; color:var(--mint-400)}
.bnote-sig{display:block; margin-top:13px; font-family:var(--mono); font-weight:400;
  font-size:12.5px; letter-spacing:.24em; color:var(--mint-300)}
.bnote-sig::before{content:""; display:block; width:44px; height:2px;
  background:var(--mint-400); margin-bottom:10px}

/* ==========================================================================
   The pills. Typed into the hospital search box: "red pill" opens the payment
   machinery underneath the page, "blue pill" declines to, "purple pill" is
   neither. Everything below is inert until app.js adds these classes, and
   every class is removed again when the sequence ends, so none of this can
   touch the page a normal visitor sees. Palette: the page's own inks and mint
   plus one family of reds that exists only inside the sequence.
   ========================================================================== */
:root{ --rp-red:#E5484D; --rp-red2:#FF6B5E; --rp-red9:#2A0A0D }

/* ---- phase 1, on the real page. Small, deniable wrongness. */
@keyframes rpFlick{ 0%,100%{opacity:1} 42%{opacity:.35} 46%{opacity:1} 71%{opacity:.6} 74%{opacity:1} }
.rp-flick{animation:rpFlick .38s steps(1) 2}
@keyframes rpRipple{
  0%{transform:translateX(0)} 18%{transform:translateX(-2px) skewX(.4deg)}
  38%{transform:translateX(2px)} 58%{transform:translateX(-1px) skewX(-.3deg)}
  78%{transform:translateX(1px)} 100%{transform:translateX(0)} }
.rp-ripple{animation:rpRipple .34s linear 1}
@keyframes rpVibe{
  0%,100%{transform:translate(0,0)} 25%{transform:translate(.6px,-.4px)}
  50%{transform:translate(-.5px,.5px)} 75%{transform:translate(.4px,.3px)} }
body.rp-vibe{animation:rpVibe .09s linear 4}
/* The page losing sync: the sticky bar lags the rest of the page for a beat. */
@keyframes rpDesync{ 0%{transform:translateX(0)} 30%{transform:translateX(-7px)}
  60%{transform:translateX(4px)} 100%{transform:translateX(0)} }
body.rp-desync .bar{animation:rpDesync .16s linear 1}
#hq.rp-access{color:var(--rp-red); caret-color:transparent;
  text-transform:uppercase; letter-spacing:.08em; font-family:var(--mono)}
#hq.rp-frozen{caret-color:transparent}

/* ---- phase 2, the fracture. Applied by the scan line as it passes. */
.rp-wire{outline:1px solid rgba(229,72,77,.5); outline-offset:-1px;
  box-shadow:inset 0 0 0 500px rgba(5,11,20,.14);
  filter:saturate(.55) brightness(.88); transition:filter .25s, box-shadow .25s}
svg.rp-wire *{fill-opacity:.55; stroke-opacity:.9}
.rp-hidetext{visibility:hidden !important}

/* ---- phase 3, the peel. Each block carries its own perspective() in its
   transform. Deliberately NOT perspective on body: perspective makes body a
   containing block for fixed-position descendants, which turns the fixed
   overlay into a document-sized one and throws the canvas off the viewport. */
body.rp-persp{overflow:hidden}
.rp-peel{transform-origin:50% 30%;
  transition:transform 1.25s cubic-bezier(.5,.02,.7,.4), opacity 1.25s ease;
  transform:perspective(1100px) rotateX(9deg)
            translateZ(calc(var(--rp-i,0) * -145px))
            translateY(calc(var(--rp-i,0) * 26px)) scale(.965);
  opacity:.25}

/* ---- the overlay. One fixed wrap above everything the page can raise.
   z-index 420 clears the fanfare (300) and the classic egg (400). */
#rpWrap{position:fixed; inset:0; z-index:420; pointer-events:auto}
#rpWrap,.rp-ghosts,#rpText{font-family:var(--mono)}
.rp-veil{position:absolute; inset:0; background:var(--ink-900); opacity:0;
  transition:opacity .9s ease}
.rp-veil.on{opacity:1}
.rp-grid{position:absolute; inset:0; opacity:0; transition:opacity .7s ease;
  background-image:linear-gradient(rgba(229,72,77,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(229,72,77,.07) 1px, transparent 1px);
  background-size:56px 56px; pointer-events:none}
.rp-grid.on{opacity:1}
.rp-scan{position:absolute; top:0; bottom:0; width:2px; opacity:0;
  background:linear-gradient(180deg, transparent, var(--rp-red) 18%,
    var(--rp-red2) 50%, var(--rp-red) 82%, transparent);
  box-shadow:0 0 14px 1px rgba(229,72,77,.55); pointer-events:none}
#rpCv{position:absolute; inset:0; width:100%; height:100%; opacity:0;
  transition:opacity .8s ease}
#rpCv.on{opacity:1}

/* Ghost characters: real dollar figures lifted off the page, one span per
   character, each drifting apart on its own vector. */
.rp-ghosts{position:absolute; inset:0; pointer-events:none; overflow:hidden}
.rp-ghosts i{position:absolute; font-style:normal; white-space:pre;
  will-change:transform,opacity;
  transition:transform 1.9s cubic-bezier(.2,.5,.25,1), opacity 1.9s ease,
    color .8s ease}
.rp-ghosts i.fly{transform:translate3d(var(--gx), var(--gy), 0)
  rotate(var(--gr)); opacity:0; color:var(--rp-red)}
.rp-ghosts .rp-term{position:absolute; white-space:nowrap; font-size:11px;
  letter-spacing:.2em; color:var(--rp-red2); opacity:0;
  animation:rpTerm 1.5s ease var(--dl,0s) 1}
@keyframes rpTerm{ 0%{opacity:0; transform:translateY(6px)}
  22%{opacity:.85} 78%{opacity:.5} 100%{opacity:0; transform:translateY(-30px)} }

/* ---- the text layer: equation, labels, headline, sign-off. */
#rpText{position:absolute; inset:0; pointer-events:none; display:grid;
  place-items:center; text-align:center; padding:0 5vw}
.rp-eq{font-size:clamp(17px,3.1vw,34px); letter-spacing:.14em; color:#E8EEF2;
  text-shadow:0 0 22px rgba(229,72,77,.35); white-space:pre-wrap}
.rp-eq .word{color:var(--rp-red2)}
.rp-flash{position:absolute; left:50%; top:26%; transform:translateX(-50%);
  font-size:clamp(11px,1.6vw,15px); letter-spacing:.3em; color:var(--rp-red2);
  white-space:nowrap; text-shadow:0 0 16px rgba(229,72,77,.6)}
.rp-label{position:absolute; font-size:clamp(10px,1.4vw,14px);
  letter-spacing:.34em; color:#C7D3DC; opacity:0; white-space:nowrap;
  transition:opacity .5s ease}
.rp-label.on{opacity:.92}
.rp-label.dim{opacity:0}
.rp-sig{position:absolute; left:18px; bottom:14px; font-size:9.5px;
  letter-spacing:.08em; color:#5A2226; opacity:0; transition:opacity .8s ease}
.rp-sig.on{opacity:.5}
.rp-head{font-family:var(--sans); font-weight:700; letter-spacing:.02em;
  font-size:clamp(30px,6vw,74px); line-height:1.02; color:#F4F7F9;
  text-shadow:0 0 34px rgba(229,72,77,.4); opacity:0; transform:scale(.94);
  transition:opacity .7s ease, transform .7s cubic-bezier(.16,.84,.3,1)}
.rp-head.on{opacity:1; transform:scale(1)}
.rp-head small{display:block; margin-top:16px; font-family:var(--mono);
  font-weight:400; font-size:clamp(11px,1.7vw,15px); letter-spacing:.3em;
  color:#C7D3DC; text-shadow:none}
.rp-bsi{opacity:0; transform:scale(.94); transition:opacity 1.1s ease,
  transform 1.1s cubic-bezier(.16,.84,.3,1); padding:52px 64px;
  background:radial-gradient(closest-side, rgba(5,11,20,.82), rgba(5,11,20,0))}
.rp-bsi.on{opacity:1; transform:scale(1)}
.rp-bsi .bmark{font-size:clamp(22px,4vw,48px); letter-spacing:.26em;
  color:var(--mint-400); text-shadow:0 0 42px rgba(62,207,160,.6),
  0 1px 3px rgba(5,11,20,.9)}
.rp-bsi .bline{margin-top:22px; font-size:clamp(13px,2vw,19px);
  letter-spacing:.12em; line-height:1.5; color:#F4F7F9;
  text-shadow:0 1px 3px rgba(5,11,20,.9)}
#rpWrap .rp-mute{position:absolute; right:14px; bottom:12px; z-index:6;
  pointer-events:auto; background:none; border:1px solid #3A1A1D;
  color:#8A5257; font-family:var(--mono); font-size:9.5px; letter-spacing:.18em;
  text-transform:uppercase; padding:5px 9px; cursor:pointer; opacity:.6}
#rpWrap .rp-mute:hover{opacity:1; border-color:var(--rp-red)}

/* The collapse: the whole overlay implodes to a point, then hands back. */
@keyframes rpImplode{ 0%{transform:scale(1); opacity:1}
  70%{transform:scale(.06); opacity:.9} 100%{transform:scale(0); opacity:0} }
#rpWrap.imploding #rpCv, #rpWrap.imploding #rpText{
  animation:rpImplode .5s cubic-bezier(.6,.05,.9,.4) forwards;
  transform-origin:50% 50%}
#rpWrap.out{transition:opacity .35s ease; opacity:0}

/* The pills' rows in the search dropdown. Same shape as the egg row, with
   each pill's own accent down the left edge. */
.menu .pillit.red{border-left:2px solid var(--rp-red)}
.menu .pillit.blue{border-left:2px solid #5B9FE1}
.menu .pillit .ptag{font-family:var(--mono); font-size:11px}
.menu .pillit .ptag.red{color:var(--rp-red)}
.menu .pillit .ptag.blue{color:#5B9FE1}

/* Post-credit: the note under the search field, and the faint fallout canvas. */
.rp-note{position:absolute; top:calc(100% + 5px); left:2px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.16em;
  color:var(--rp-red); opacity:0; transition:opacity .6s ease;
  pointer-events:none; z-index:70}
.rp-note.on{opacity:.85}
.rp-note.mint{color:var(--mint-400)}
.rp-note.fog{color:#8DA4B4}
#rpFallout{position:fixed; inset:0; z-index:1; pointer-events:none}

/* ---- blue pill. A veil, one pulse, three lines, and a refusal. */
#bpWrap{position:fixed; inset:0; z-index:420; pointer-events:auto;
  display:grid; place-items:center; font-family:var(--mono)}
.bp-veil{position:absolute; inset:0; background:rgba(5,11,20,0);
  transition:background 1.1s ease}
#bpWrap.dim .bp-veil{background:rgba(5,11,20,.62)}
.bp-pulse{position:absolute; width:26px; height:26px; border-radius:50%;
  border:1.5px solid #5B9FE1; opacity:0; pointer-events:none}
.bp-pulse.go{animation:bpPulse 1.4s ease-out 1}
@keyframes bpPulse{ 0%{opacity:.9; transform:scale(1)}
  100%{opacity:0; transform:scale(34)} }
.bp-msg{position:relative; font-size:clamp(13px,2.2vw,19px);
  letter-spacing:.24em; color:#AECBE8; text-shadow:0 0 18px rgba(91,159,225,.4);
  opacity:0; transition:opacity .3s ease; text-align:center; padding:0 6vw}
.bp-msg.on{opacity:1}
#bpWrap.out{transition:opacity .4s ease; opacity:0}

@media (max-width:760px){
  .rp-eq{letter-spacing:.06em}
  .rp-label{letter-spacing:.22em}
  .rp-sig{left:12px; bottom:10px; font-size:8.5px}
}
@media print{#rpWrap,#bpWrap,#rpFallout{display:none !important}}