/* ============================================================
   Pearl Dental Group (Oct 2, 2026): menu groups, the goal, KPI tiles,
   findings, tables, bar charts, quick wins, access, services, brand.
   Pithy cyan leads; Pearl's champagne gold marks the client's own things.
   Loaded after portal.css and pearl.css; every color is a token.
   ============================================================ */

/* menu in groups */
.rail{overflow-y:auto;padding:22px 0 40px;scrollbar-width:thin}
.rail__item{padding:10px 18px 10px 24px;font-size:14.5px}
.rail__group{margin:16px 0 4px 24px;font:600 10.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.rail__group--team{color:var(--high)}
@media (max-width:1100px){.rail__group{display:none}}

/* Pearl's logo and serif touches */
.topbar__client{height:34px}
.hero__brand img.hero__pearl{height:clamp(56px,5.4vw,84px)}
.gate__client{height:46px}
.gate__title em{font-style:normal;color:var(--gold)}
.punch--serif{font-family:var(--serif);font-weight:400;letter-spacing:0}
.punch--serif span{color:var(--gold)}

/* the goal on Home */
.goal{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:18px 34px;align-items:center;margin:clamp(20px,3vw,40px) 0;
  padding:clamp(18px,2.4vw,30px);border:1px solid rgba(209,185,110,.32);border-radius:20px;background:linear-gradient(135deg,rgba(209,185,110,.10),rgba(0,180,197,.06)),var(--panel-solid)}
.goal__t{margin:6px 0 6px;font:600 clamp(22px,2.4vw,34px)/1.2 var(--serif);color:var(--paper)}
.goal__t b{color:var(--paper);font-weight:600}
.goal__t .goal__hot{color:var(--gold)}
.goal__bar{position:relative;height:16px;border-radius:99px;background:rgba(255,255,255,.07);margin:14px 0 22px}
.goal__bar span{position:absolute;inset:0 auto 0 0;border-radius:99px;background:linear-gradient(90deg,var(--cyan),var(--cyan-hot))}
.goal__bar i,.goal__bar em{position:absolute;top:22px;font:500 11px var(--mono);font-style:normal;color:var(--mute)}
.goal__bar i{left:0}.goal__bar em{right:0;color:var(--gold)}
.goal__plan{grid-column:1/-1;margin:0;font-size:15.5px;line-height:1.65;color:var(--paper-dim)}
.goal__acts{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:10px}
.goal__acts .btn-go{margin-top:0}
.panel--gold{border-color:rgba(209,185,110,.35)!important}

/* KPI tiles */
.ktiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:clamp(14px,2vw,24px) 0}
.ktile{display:flex;flex-direction:column;gap:4px;text-align:left;padding:16px 16px 14px;border:1px solid var(--edge);border-radius:14px;background:var(--panel-solid);color:inherit;font:inherit;cursor:pointer;
  transition:border-color .25s var(--ease),transform .25s var(--ease)}
.ktile:hover{border-color:var(--edge-hot);transform:translateY(-2px)}
.ktile__l{font:600 11px var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--mute)}
.ktile__v{font:700 clamp(26px,2.6vw,36px)/1.1 var(--display);color:var(--paper)}
.ktile__s{font-size:13.5px;line-height:1.4;color:var(--paper-dim)}
.ktile__src{margin-top:auto;padding-top:6px;font:500 11px/1.4 var(--mono);color:var(--mute-deep)}
.ktile--good .ktile__v{color:var(--good)}
.ktile--bad .ktile__v{color:var(--crit)}
.ktile--warn .ktile__v{color:var(--high)}
.ktile--info .ktile__v{color:var(--cyan-hot)}

/* severity and status */
.sev,.st{display:inline-flex;align-items:center;font:600 10.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;padding:5px 8px;border-radius:99px;border:1px solid;white-space:nowrap}
.sev--critical,.st--bad{color:var(--crit);border-color:rgba(255,92,122,.45);background:rgba(255,92,122,.08)}
.sev--high,.st--warn{color:var(--high);border-color:rgba(255,180,67,.45);background:rgba(255,180,67,.08)}
.sev--medium{color:var(--gold);border-color:rgba(209,185,110,.45);background:var(--gold-wash)}
.sev--low,.st--mute{color:var(--mute);border-color:var(--edge)}
.st--good{color:var(--good);border-color:rgba(63,224,168,.4);background:rgba(63,224,168,.07)}

/* findings */
.fnd{list-style:none;margin:clamp(14px,2vw,22px) 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.fnd__i{padding:18px;border:1px solid var(--edge);border-radius:16px;background:var(--panel-solid)}
.fnd__h{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin-bottom:8px}
.fnd__h b{flex:1 1 100%;font:600 17px/1.35 var(--display);color:var(--paper)}
.fnd__n{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--cyan-wash);color:var(--cyan-hot);font:600 12.5px var(--mono)}
.fnd__d{margin:0 0 10px;font-size:14.5px;line-height:1.6;color:var(--paper-dim)}
.fnd__fix,.msr__fix,.svc__why{margin:0;padding:10px 12px;border-radius:10px;background:rgba(0,180,197,.07);font-size:14px;line-height:1.55;color:var(--paper)}
.fnd__fix span,.msr__fix span,.svc__why span,.pchart__note span{display:block;font:600 10.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--cyan-hot);margin-bottom:3px}

/* tables */
.tblw{overflow-x:auto;margin:14px 0;border:1px solid var(--edge);border-radius:14px;background:var(--panel-solid)}
.tbl{width:100%;border-collapse:collapse;font-size:14px;line-height:1.5}
.tbl th,.tbl td{padding:11px 14px;text-align:left;vertical-align:top;border-bottom:1px solid var(--edge)}
.tbl thead th{font:600 11px var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--mute);background:rgba(255,255,255,.02)}
.tbl tbody th{font-weight:600;color:var(--paper)}
.tbl td{color:var(--paper-dim)}
.tbl tbody tr:last-child th,.tbl tbody tr:last-child td{border-bottom:0}
.tbl--wide{min-width:720px}
.tbl--facts thead{display:none}
.tbl--facts tbody th{width:180px;color:var(--gold)}

/* bar charts with Table and CSV */
.pcharts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:16px 0}
.pchart{margin:16px 0;padding:18px;border:1px solid var(--edge);border-radius:16px;background:var(--panel-solid)}
.pcharts .pchart{margin:0}
.pchart figcaption{margin-bottom:12px}
.pchart__q{display:block;font:500 12px var(--mono);color:var(--mute)}
.pchart__t{font:600 17px/1.35 var(--display);color:var(--paper)}
.pchart__lg{display:flex;flex-wrap:wrap;gap:14px;margin:0 0 10px;font-size:12.5px;color:var(--paper-dim)}
.pchart__lg i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.pchart__bars{display:grid;gap:9px}
.pbar{display:grid;grid-template-columns:minmax(120px,38%) minmax(0,1fr);gap:10px;align-items:center}
.pbar__l{font-size:13px;line-height:1.35;color:var(--paper-dim)}
.pbar__t{display:grid;gap:4px;padding-right:64px}
.pbar__b{position:relative;display:block;height:20px;min-width:2px;border-radius:5px}
.pbar__b i{position:absolute;left:calc(100% + 6px);top:50%;transform:translateY(-50%);font:600 12px var(--mono);font-style:normal;color:var(--paper);white-space:nowrap}
.pbar__b--0,i.pbar__b--0{background:linear-gradient(90deg,var(--cyan-deep),var(--cyan))}
.pbar__b--1,i.pbar__b--1{background:linear-gradient(90deg,var(--pearl-green),var(--gold))}
.pchart__note{margin:14px 0 0;padding:10px 12px;border-radius:10px;background:var(--gold-wash);font-size:14px;line-height:1.55;color:var(--paper)}
.pchart__note span{color:var(--gold)}
.pchart__foot{display:grid;gap:3px;margin-top:12px;font-size:12.5px;line-height:1.5;color:var(--mute)}
.pchart__foot b{color:var(--paper-dim);font-weight:600}
.pchart__acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.pchart__tbl .tblw{margin:0}

/* quick wins */
.qw{list-style:none;margin:14px 0 clamp(26px,3vw,40px);padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.qw__i{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 14px;padding:14px 16px;border:1px solid var(--edge);border-radius:14px;background:var(--panel-solid)}
.qw__n{grid-row:1/3;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--gold-wash);border:1px solid rgba(209,185,110,.4);color:var(--gold);font:700 14px var(--display)}
.qw__i b{display:block;font:600 15.5px/1.35 var(--display);color:var(--paper)}
.qw__i div span{display:block;margin-top:3px;font-size:13.5px;line-height:1.5;color:var(--paper-dim)}
.qw__m{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.qw__e{font:500 11.5px var(--mono);color:var(--mute)}

/* access, measurement */
.acc{list-style:none;margin:10px 0;padding:0;display:grid;gap:8px}
.acc li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:2px 12px;align-items:center}
.acc li b{color:var(--paper);font-weight:600}
.acc li span:last-child{grid-column:2;font-size:13.5px;color:var(--paper-dim)}
.acc--grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.acc--grid li{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:14px;border:1px solid var(--edge);border-radius:14px;background:var(--panel-solid)}
.msr{list-style:none;margin:14px 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.msr__i{padding:16px;border:1px solid var(--edge);border-radius:14px;background:var(--panel-solid)}
.msr__h{display:flex;flex-wrap:wrap;gap:8px 10px;align-items:center;margin-bottom:8px}
.msr__h b{font:600 15.5px var(--display);color:var(--paper)}
.msr__i>p{margin:0 0 10px;font-size:14px;line-height:1.55;color:var(--paper-dim)}
.funnelp{margin:20px 0;padding:18px;border:1px solid rgba(209,185,110,.3);border-radius:16px}
.funnelp ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:10px 0;padding:0}
.funnelp li{padding:8px 14px;border-radius:99px;background:var(--cyan-wash);color:var(--paper);font:500 14px var(--display)}
.funnelp li+li::before{content:'\2192';margin-right:10px;color:var(--gold)}

/* phases of the plan */
.phases{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:clamp(18px,2.4vw,30px) 0}
.phase{position:relative;padding:20px 18px 16px;border:1px solid var(--edge);border-radius:18px;background:var(--panel-solid)}
.phase__n{position:absolute;top:16px;right:16px;font:700 34px/1 var(--display);color:rgba(209,185,110,.35)}
.phase__w{margin:0;font:600 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--gold)}
.phase__t{margin:4px 0 10px;font:700 21px var(--display);color:var(--paper)}
.phase ul{margin:0;padding-left:18px;display:grid;gap:6px;font-size:14px;line-height:1.5;color:var(--paper-dim)}
.pd-actions{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0}
.pd-actions .btn-go{margin-top:0}
.pd-bottom{margin:16px 0;padding:14px 16px;border-left:3px solid var(--gold);background:var(--gold-wash);border-radius:0 12px 12px 0;color:var(--paper)}

/* services */
.svc{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:16px 0}
.svc__i{display:flex;flex-direction:column;gap:8px;padding:18px;border:1px solid var(--edge);border-radius:16px;background:var(--panel-solid)}
.svc__t{font:600 17px/1.3 var(--display);color:var(--paper)}
.svc__i>p{margin:0;font-size:14px;line-height:1.55;color:var(--paper-dim)}
.svc__i .lk{align-self:flex-start;margin-top:auto}

/* landing pages, contact options */
.lpages,.copts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:16px 0}
.lpage,.copt{padding:18px;border:1px solid var(--edge);border-radius:16px;background:var(--panel-solid)}
.lpage h3,.copt h3{margin:0 0 8px;font:600 19px var(--display);color:var(--paper)}
.lpage__g{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:12px}
.lpage ul,.copt ul{margin:0 0 10px;padding-left:18px;display:grid;gap:5px;font-size:14px;line-height:1.5;color:var(--paper-dim)}
.lpage__k{margin:8px 0 6px;font:600 11px var(--mono);letter-spacing:.08em;text-transform:uppercase}
.lpage__k--good{color:var(--good)}.lpage__k--bad{color:var(--crit)}
.copt__v{margin:0 0 4px;font:600 11.5px var(--mono);letter-spacing:.06em;text-transform:uppercase}
.copt--good{border-color:rgba(63,224,168,.3)}.copt--good .copt__v{color:var(--good)}
.copt--warn .copt__v{color:var(--high)}
.copt--bad{border-color:rgba(255,92,122,.3)}.copt--bad .copt__v{color:var(--crit)}

/* brand */
.logos__i img{max-height:120px;width:auto;margin:0 auto}
.sw{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin:14px 0}
.sw__i{display:flex;flex-direction:column;gap:4px;text-align:left;padding:10px;border:1px solid var(--edge);border-radius:14px;background:var(--panel-solid);color:inherit;font:inherit;cursor:pointer}
.sw__c{height:70px;border-radius:10px;border:1px solid rgba(255,255,255,.12)}
.sw__i b{font:600 14px var(--display);color:var(--paper)}
.sw__i code{font:500 12.5px var(--mono);color:var(--cyan-hot)}
.sw__i span:last-child{font-size:12.5px;color:var(--mute)}
.tyspec{margin:6px 0;font-size:34px;color:var(--paper)}
.tyspec--serif{font-family:var(--serif)}
.tyspec--sans{font-family:'Karla',var(--body)}
.brandimg img{border-radius:16px}
.rules{list-style:none;margin:14px 0;padding:0;display:grid;gap:8px}
.rules__i{display:grid;grid-template-columns:70px minmax(0,1fr);gap:12px;padding:12px 14px;border:1px solid var(--edge);border-radius:12px;background:var(--panel-solid);font-size:14.5px;color:var(--paper-dim)}
.rules__i span{font:600 11px var(--mono);letter-spacing:.08em;text-transform:uppercase}
.rules__i--do span{color:var(--good)}.rules__i--dont span{color:var(--crit)}

/* videos: every video downloads, and fits the screen whatever its shape */
.vplay__dl{display:inline-flex;justify-content:center;margin:0 0 12px;width:100%}
.vplay__stage{aspect-ratio:auto;height:min(74vh,calc(100vh - 160px))}
.vplay__stage video,.vplay__stage img{width:100%;height:100%;object-fit:contain}
@media (max-width:900px){.vplay__stage{height:auto;aspect-ratio:9/12}}

@media (max-width:1100px){
  .ktiles,.svc{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sw{grid-template-columns:repeat(3,minmax(0,1fr))}
  .acc--grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  .goal,.fnd,.pcharts,.qw,.msr,.phases,.svc,.lpages,.copts,.lpage__g,.acc--grid{grid-template-columns:minmax(0,1fr)}
  .ktiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pbar{grid-template-columns:minmax(0,1fr)}
  .sw{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* video cards: one shape for every thumbnail, so the grid lines up (vertical videos crop in the card, never in the player) */
.vc__th{aspect-ratio:16/10;overflow:hidden}
.vc__th img{width:100%;height:100%;object-fit:cover}

/* sign-in: the Google button under the password form */
.gate__or{display:flex;align-items:center;gap:12px;margin:16px 0 12px;color:var(--mute);font:500 12px var(--mono);text-transform:uppercase;letter-spacing:.1em}
.gate__or::before,.gate__or::after{content:"";flex:1;height:1px;background:var(--edge)}
.gate__google{display:flex;justify-content:center;min-height:44px}

/* ============================================================
   Maximus: the Ask panel, the microphone, the orb and the welcome (Appendix I of the build guide)
   ============================================================ */
/* The Ask panel scrolls as one (intro, answers, suggestions) with the question box
   pinned to the bottom, so nothing is cut off on phones or short laptop screens. */
.dock__panel:has(> #askForm){overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.dock__panel:has(> #askForm) > .ask__intro,.dock__panel:has(> #askForm) > .ask__chips{flex:none}
.dock__panel:has(> #askForm) > .ask__feed{flex:1 0 auto;overflow:visible}
#askForm{position:sticky;bottom:0;z-index:2;background:rgb(11,17,24);padding-bottom:max(24px,env(safe-area-inset-bottom))}
@media (max-width:640px){
  #askForm{padding-top:12px}
  #askForm .notes__ta{font-size:16px;min-height:56px}   /* 16px stops iOS zooming in on focus */
  #askForm .notes__foot{font-size:11.5px;line-height:1.45;margin-top:8px}
}

.ask__mic{flex:none;width:44px;height:44px;display:grid;place-items:center;border-radius:50%;border:1px solid var(--edge-hot);background:rgba(0,180,197,.08);color:var(--cyan-hot);cursor:pointer;position:relative;transition:background .2s}
.ask__mic svg{width:20px;height:20px}
.ask__mic:hover{background:rgba(0,180,197,.18)}
.ask__mic.is-listening{background:var(--cyan);color:#051015;border-color:var(--cyan)}
.ask__mic.is-listening::after{content:'';position:absolute;inset:-6px;border-radius:50%;border:2px solid var(--cyan);animation:micPulse 1.2s ease-out infinite}
.ask__mic.is-speaking{background:rgba(63,224,168,.18);color:var(--good);border-color:var(--good)}
.ask__mic.is-speaking::after{content:'';position:absolute;inset:-6px;border-radius:50%;border:2px solid var(--good);animation:micPulse 1.6s ease-out infinite}
@keyframes micPulse{from{transform:scale(1);opacity:.9}to{transform:scale(1.45);opacity:0}}
.ask__voice{margin:8px 0 0;font-size:13.5px;color:var(--cyan-hot);font-family:var(--mono);letter-spacing:.02em}

/* ============================================================
   MAXIMUS · the floating orb and its bubble (js/maximus.js)
   The orb: Pearl's rings around a glowing core. Drag it anywhere; tap to talk.
   ============================================================ */
.jv-orb{position:fixed;right:26px;bottom:150px;z-index:70;width:66px;height:66px;border-radius:50%;cursor:grab;touch-action:none;user-select:none;
  filter:drop-shadow(0 0 14px rgba(0,200,225,.55));transition:transform .35s cubic-bezier(.2,.8,.2,1),filter .3s,right .4s,left .4s}
.jv-orb.is-dragging{cursor:grabbing;transition:none;transform:scale(1.08)}
.jv-orb:focus-visible{outline:2px solid var(--cyan-hot);outline-offset:6px}
.jv-orb__ring{display:block;width:100%;height:100%;border-radius:50%;background:radial-gradient(circle,rgba(0,40,55,.92) 55%,rgba(0,20,30,.6) 100%)}
.jv-orb__ring svg{width:100%;height:100%;overflow:visible}
.jv-r{fill:none;stroke:#35e6ff;transform-origin:100px 100px}
.jv-r1{stroke-width:2;stroke-dasharray:60 18 8 18;opacity:.75;animation:jvSpin 14s linear infinite}
.jv-r2{stroke-width:5;stroke-dasharray:4 10;opacity:.55;animation:jvSpin 9s linear infinite reverse}
.jv-r3{stroke-width:2.5;stroke-dasharray:110 30 12 30;opacity:.85;animation:jvSpin 6s linear infinite}
.jv-r4{stroke-width:1.5;opacity:.6}
.jv-ticks line{stroke:#35e6ff;stroke-width:1.6;opacity:.5}
.jv-ticks{transform-origin:100px 100px;animation:jvSpin 30s linear infinite reverse}
.jv-core{fill:rgba(53,230,255,.18);stroke:#7ff3ff;stroke-width:2}
.jv-core-in{fill:#bff9ff;filter:drop-shadow(0 0 6px #35e6ff);animation:jvBreath 3.2s ease-in-out infinite;transform-origin:100px 100px}
@keyframes jvSpin{to{transform:rotate(360deg)}}
@keyframes jvBreath{0%,100%{opacity:.75;transform:scale(.92)}50%{opacity:1;transform:scale(1.06)}}
@keyframes jvFlash{0%,100%{filter:drop-shadow(0 0 10px rgba(53,230,255,.5))}50%{filter:drop-shadow(0 0 30px rgba(120,245,255,1)) brightness(1.35)}}
.jv-orb.is-listening{animation:jvFlash .7s ease-in-out infinite}
.jv-orb.is-listening .jv-r1,.jv-orb.is-listening .jv-r3{animation-duration:1.6s}
.jv-orb.is-speaking{animation:jvFlash 1.4s ease-in-out infinite}
.jv-orb.is-speaking .jv-core-in{animation-duration:.6s}
.jv-orb.is-arrived{animation:jvFlash .5s ease-in-out 3}
.jv-orb__tip{position:absolute;right:calc(100% + 10px);top:50%;transform:translateY(-50%);padding:4px 10px;border-radius:4px;background:rgba(0,20,30,.9);border:1px solid rgba(53,230,255,.4);
  font:500 11px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#7ff3ff;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .2s}
.jv-orb:hover .jv-orb__tip{opacity:1}
.jv-orb{border:0;padding:0;background:transparent}
/* quick actions on the orb itself (hover): the microphone and the keyboard, with their names */
.jv-orb__acts{position:absolute;inset:0;pointer-events:none}
.jv-orb__act{position:absolute;width:30px;height:30px;display:grid;place-items:center;border-radius:50%;border:1px solid rgba(53,230,255,.55);background:rgba(3,20,27,.96);color:#7ff3ff;
  cursor:pointer;pointer-events:auto;opacity:0;transform:scale(.6);transition:opacity .2s,transform .25s cubic-bezier(.2,.8,.2,1),background .2s;box-shadow:0 4px 14px rgba(0,0,0,.45)}
.jv-orb__act svg{width:15px;height:15px}
.jv-orb__act:hover{background:var(--cyan);color:#031014}
.jv-orb__act:focus-visible{outline:2px solid var(--cyan-hot);outline-offset:2px}
.jv-orb__mic{top:-12px;left:-12px}
.jv-orb__kb{top:-12px;right:-12px}
.jv-orb__act i{position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);padding:3px 8px;border-radius:4px;background:rgba(0,20,30,.95);border:1px solid rgba(53,230,255,.4);
  font:500 10.5px/1.4 var(--mono);font-style:normal;letter-spacing:.06em;color:#bff9ff;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .15s}
.jv-orb__act:hover i,.jv-orb__act:focus-visible i{opacity:1}
.jv-orb:hover .jv-orb__act,.jv-orb:focus-within .jv-orb__act,.jv-orb.is-micoff .jv-orb__mic{opacity:1;transform:scale(1)}
.jv-orb:hover .jv-orb__tip{opacity:0}
.jv-orb.is-micoff .jv-orb__mic{background:#ffb454;border-color:#ffb454;color:#1a1000}
.jv-orb.is-micoff{filter:saturate(.45) drop-shadow(0 0 10px rgba(255,180,84,.45))}
.jv-orb.is-thinking .jv-r1,.jv-orb.is-thinking .jv-r3,.jv-orb.is-hearing .jv-r1,.jv-orb.is-hearing .jv-r3{animation-duration:1.1s}
.jv-orb.is-welcome{animation:jvFlash 1.8s ease-in-out infinite}
.jv-orb.is-paused{filter:saturate(.4) drop-shadow(0 0 10px rgba(0,200,225,.35))}
/* above the Ask panel; beside it while it is open, unless the reader moved the orb */
.mx-orb{z-index:110}
.dock-open .mx-orb:not(.is-placed){right:calc(min(500px,100vw) + 24px)}
@media (max-width:900px){.dock-open .mx-orb:not(.is-placed){right:16px;bottom:auto;top:76px}}
@media (max-width:600px){.jv-orb{width:56px;height:56px;right:16px;bottom:96px}}
@media (prefers-reduced-motion:reduce){.jv-orb,.jv-orb *{animation:none!important}}

/* The bubble beside the orb: what Maximus is doing, what was said, and what you can do next */
.mx{position:fixed;right:110px;bottom:150px;z-index:111;width:min(420px,calc(100vw - 32px));padding:14px 16px;border-radius:20px;
  border:1px solid rgba(53,230,255,.42);background:rgba(3,18,24,.96);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  box-shadow:0 18px 60px rgba(0,0,0,.55),0 0 28px rgba(0,200,225,.16);color:var(--paper)}
.mx[hidden]{display:none}
.mx.is-welcome{border-color:var(--gold)}
.mx__top{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.mx__name{font:600 12.5px/1 var(--display);letter-spacing:.16em;text-transform:uppercase;color:var(--gold-hot)}
.mx__state{flex:1;font:500 12px/1.3 var(--mono);color:#7ff3ff}
.mx__said{margin:0 0 12px;font-size:16px;line-height:1.5;max-height:32vh;overflow:auto;white-space:pre-line}
.mx__said.is-quote{font-size:17px;color:#d9fbff}
.mx__meter{display:flex;align-items:center;gap:4px;height:26px;margin:2px 0 8px}
.mx__meter[hidden]{display:none}
.mx__meter i{display:block;width:5px;height:100%;border-radius:3px;background:var(--cyan);transform:scaleY(.15);transition:transform .08s linear}
.mx__btns{display:flex;gap:8px;flex-wrap:wrap}
.mx__btn{border:1px solid rgba(53,230,255,.45);background:rgba(0,180,197,.10);color:var(--paper);border-radius:100px;padding:9px 16px;
  font:600 14px/1 var(--display);cursor:pointer;transition:background .2s}
.mx__btn:hover,.mx__btn.is-on{background:rgba(0,180,197,.28)}
.mx__btn[hidden]{display:none}
.mx__btn--hot{background:var(--cyan);color:#04141a;border-color:var(--cyan)}
.mx__btn--hot:hover{background:var(--cyan-hot)}
.mx__btn--end{margin-left:auto}
.mx__btn--end:hover{background:rgba(255,90,90,.2);border-color:#ff7a7a;color:#ffb3b3}
.mx__btn:focus-visible{outline:2px solid var(--cyan-hot);outline-offset:2px}

/* ============================================================
   Audit library (app/views/partials/audits.php): one full card per audit
   ============================================================ */
.auds{display:grid;gap:28px;margin-top:26px}
.aud{border:1px solid var(--edge);border-radius:16px;background:var(--panel);backdrop-filter:blur(10px);padding:clamp(18px,2.2vw,30px);display:grid;gap:22px;min-width:0}
.aud[hidden]{display:none}
.aud__top{display:grid;grid-template-columns:minmax(240px,380px) minmax(0,1fr);gap:clamp(18px,2.4vw,34px);align-items:start}
.aud__cover{display:block;padding:0;border:1px solid var(--edge);border-radius:10px;overflow:hidden;background:#0b1213;cursor:pointer;transition:border-color .2s,transform .3s var(--ease)}
.aud__cover:hover{border-color:var(--cyan);transform:translateY(-2px)}
.aud__cover img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.aud__head{display:grid;gap:12px;min-width:0}
.aud__t{font-family:var(--display);font-size:clamp(20px,2vw,27px);line-height:1.2;letter-spacing:-.01em;margin:0;color:var(--paper)}
.aud__facts{display:flex;flex-wrap:wrap;gap:8px 26px;margin:0;padding:12px 0;border-top:1px solid var(--edge);border-bottom:1px solid var(--edge)}
.aud__facts div{display:grid;gap:3px}
.aud__facts dt{font:500 10.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.aud__facts dd{margin:0;font-size:14px;color:var(--paper)}
.aud__sum{margin:0;font-size:15px;line-height:1.62;color:var(--paper-dim)}
.aud__body{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px}
.aud__blk{border:1px solid var(--edge);border-radius:12px;padding:16px 18px;background:rgba(255,255,255,.02);min-width:0}
.aud__blk h4{margin:0 0 10px;font:600 11.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.aud__blk h4 .dim{margin-left:6px;color:var(--mute)}
.aud__blk ul{margin:0;padding-left:18px;display:grid;gap:8px}
.aud__blk li,.aud__blk p{font-size:14px;line-height:1.55;color:var(--paper-dim);margin:0}
.aud__blk--team{border-color:rgba(209,185,110,.3)}
.aud__strip{display:flex;gap:10px;overflow-x:auto;padding:4px 2px 10px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
.aud__slide{flex:none;position:relative;width:168px;padding:0;border:1px solid var(--edge);border-radius:8px;overflow:hidden;background:#0b1213;cursor:pointer;scroll-snap-align:start;transition:border-color .2s}
.aud__slide:hover,.aud__slide:focus-visible{border-color:var(--cyan)}
.aud__slide img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
.aud__slide span{position:absolute;left:6px;bottom:6px;padding:2px 7px;border-radius:999px;background:rgba(5,12,14,.82);font:500 10.5px/1.4 var(--mono);color:var(--paper-dim)}
@media (max-width:820px){
  .aud__top{grid-template-columns:1fr}
  .aud__slide{width:132px}
}
.aud .dc__acts{padding:0;margin:0}
.aud__body{align-items:start}
.aud__strip{scrollbar-width:thin;scrollbar-color:rgba(0,180,197,.45) transparent}
.aud__strip::-webkit-scrollbar{height:8px}
.aud__strip::-webkit-scrollbar-track{background:transparent}
.aud__strip::-webkit-scrollbar-thumb{background:rgba(0,180,197,.4);border-radius:8px}

/* ============================================================
   The Oct 4 review: evidence screenshots, scorecards, side by side
   ============================================================ */
.shot{margin:0;border:1px solid var(--edge);border-radius:14px;overflow:hidden;background:var(--panel-solid);min-width:0}
.shot__zoom{all:unset;display:block;cursor:zoom-in;width:100%}
.shot__zoom img{display:block;width:100%;height:auto}
.shot__zoom:focus-visible{outline:2px solid var(--cyan-hot);outline-offset:-2px}
.shot figcaption{padding:11px 14px;font-size:13.5px;line-height:1.5;color:var(--paper-dim);border-top:1px solid var(--edge)}
.shots{display:grid;gap:14px;margin:16px 0;align-items:start}
.shots--2,.shots--4{grid-template-columns:repeat(2,minmax(0,1fr))}
.shots--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.shots--side{grid-template-columns:minmax(0,3fr) minmax(0,2fr);align-items:center}
.cro{margin:18px 0 26px;padding:clamp(16px,2vw,24px);border:1px solid var(--edge);border-radius:16px;background:var(--panel)}
.cro__h{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px;margin-bottom:6px}
.cro__h h3{margin:0;font:600 21px var(--display);color:var(--paper)}
.tbl--score td:nth-child(2){white-space:nowrap}
.vs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:16px 0;align-items:stretch}
.vs__col{margin:0}
.vs__point{margin:14px 0 0;font-size:15px;line-height:1.6;color:var(--paper)}
.pts--x{list-style:none;padding-left:0}
.pts--x li{position:relative;padding-left:24px}
.pts--x li::before{content:'×';position:absolute;left:4px;top:-1px;color:var(--crit);font-weight:700}
.src{margin:10px 0 22px;font-size:13px}
.lb img{background:#fff}
@media (max-width:900px){
  .shots--2,.shots--3,.shots--4,.shots--side,.vs{grid-template-columns:minmax(0,1fr)}
}

/* Files: a picture of each file */
.fr{grid-template-columns:132px minmax(0,1fr) auto}
.fr__th{all:unset;cursor:pointer;position:relative;display:block;width:132px;aspect-ratio:16/10;border-radius:8px;overflow:hidden;border:1px solid var(--edge);background:#0b1213}
.fr__th img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
.fr__th:hover,.fr__th:focus-visible{border-color:var(--cyan)}
.fr__thl{position:absolute;right:5px;bottom:5px;padding:2px 7px;border-radius:99px;background:rgba(8,16,17,.82);color:#fff;font:600 10px var(--mono);letter-spacing:.04em;text-transform:uppercase}
.fr__th--tile{display:grid;place-items:center;background:linear-gradient(135deg,rgba(0,180,197,.14),rgba(209,185,110,.10))}
.fr__thx{font:600 12px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--paper-dim);text-align:center;padding:0 6px}
@media (max-width:760px){
  .fr{grid-template-columns:96px minmax(0,1fr)}
  .fr__th{width:96px}
  .fr__act{grid-column:1 / -1}
}
.aud__cover img,.aud__slide img{object-position:top}

/* ============================================================
   The audit, finding by finding (pd_finding, pd_evidence, pd_audit_section)
   ============================================================ */
.aus{margin:0 0 clamp(34px,5vw,64px)}
.fx{margin:14px 0;border:1px solid var(--edge);border-radius:16px;background:var(--panel-solid);overflow:hidden}
.fx--high{border-left:3px solid var(--crit)}
.fx--medium{border-left:3px solid var(--high)}
.fx--minor{border-left:3px solid var(--edge)}
.fx__h{display:flex;align-items:center;gap:12px;padding:16px 18px 0}
.fx__h h3{flex:1;margin:0;font:600 clamp(17px,1.5vw,20px)/1.3 var(--display);color:var(--paper)}
.fx__n{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--cyan-wash);color:var(--cyan-hot);font:600 12.5px var(--mono)}
.fx__b{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:18px;padding:12px 18px 18px 58px;align-items:start}
.fx__t{display:grid;gap:10px}
.fx__t p{margin:0;font-size:14.5px;line-height:1.6;color:var(--paper-dim)}
.fx__t p b{display:block;font:600 10.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--mute);margin-bottom:2px}
.fx__t .fx__fix{padding:10px 12px;border-radius:10px;background:rgba(0,180,197,.07);color:var(--paper)}
.fx__t .fx__fix b{color:var(--cyan-hot)}
.fx__ev{display:grid;gap:8px}
.ev{all:unset;box-sizing:border-box;cursor:zoom-in;display:grid;grid-template-columns:88px minmax(0,1fr);gap:10px;align-items:center;padding:6px;border:1px solid var(--edge);border-radius:10px;background:rgba(255,255,255,.02);transition:border-color .2s}
.ev:hover,.ev:focus-visible{border-color:var(--cyan)}
.ev img{display:block;width:88px;aspect-ratio:16/10;object-fit:cover;object-position:top;border-radius:6px;background:#fff}
.ev__l{font-size:12.5px;line-height:1.4;color:var(--paper-dim)}
.ev__l b{display:block;font:600 10.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--cyan-hot);margin-bottom:2px}
.ev--go{cursor:pointer;grid-template-columns:minmax(0,1fr) auto;padding:10px 12px}
.ev__go{color:var(--cyan-hot);font-size:18px}
.aus__minor{margin:14px 0;border:1px dashed var(--edge);border-radius:14px;padding:4px 14px}
.aus__minor>summary{cursor:pointer;padding:12px 4px;font:600 14px var(--display);color:var(--paper-dim);list-style:none}
.aus__minor>summary::before{content:'+';display:inline-block;width:18px;color:var(--cyan-hot)}
.aus__minor[open]>summary::before{content:'−'}
.aus__minor>summary::-webkit-details-marker{display:none}
.aus__good{margin:14px 0}
.pts--ok{list-style:none;padding-left:0}
.pts--ok li{position:relative;padding-left:24px}
.pts--ok li::before{content:'✓';position:absolute;left:3px;color:var(--good);font-weight:700}
.refs{margin:18px 0 0}
.refs__k{margin:0 0 8px;font:600 10.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.refs__g{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px}
.ref{all:unset;box-sizing:border-box;cursor:pointer;display:grid;grid-template-columns:104px minmax(0,1fr);gap:12px;align-items:center;padding:8px;border:1px solid var(--edge);border-radius:12px;background:var(--panel)}
.ref:hover,.ref:focus-visible{border-color:var(--cyan)}
.ref img{display:block;width:104px;aspect-ratio:16/10;object-fit:cover;object-position:top;border-radius:7px;background:#0b1213}
.ref__l{font-size:12.5px;color:var(--mute);line-height:1.45}
.ref__l b{display:block;font:600 13.5px/1.35 var(--display);color:var(--paper);margin-bottom:3px}
@media (max-width:900px){
  .fx__b{grid-template-columns:minmax(0,1fr);padding-left:18px}
  .fx__h{flex-wrap:wrap}
}

/* ============================================================
   Sign-in: the card sits on the left, so Pearl's video shows on the right
   ============================================================ */
@media (min-width:900px){
  .gate__card{margin:auto auto auto clamp(24px,6vw,110px);width:min(480px,100%)}
  .gate__veil{background:
    linear-gradient(90deg,rgba(8,16,17,.78) 0%,rgba(8,16,17,.5) 34%,rgba(8,16,17,.12) 62%,rgba(8,16,17,0) 100%),
    linear-gradient(180deg,rgba(8,16,17,.08),rgba(8,16,17,.32))}
}