:root{
  --bg:#06070c;
  --bg-2:#090b13;
  --panel:rgba(255,255,255,0.025);
  --panel-2:rgba(255,255,255,0.04);
  --text:#eef0f7;
  --muted:#9197ab;
  --faint:#7b8195;
  --line:rgba(255,255,255,0.09);
  --line-soft:rgba(255,255,255,0.055);
  --a:#5b8cff;   /* electric blue */
  --b:#a06bff;   /* violet */
  --c:#34e3d6;   /* signal teal */
  --grad:linear-gradient(110deg,var(--a),var(--b));
  --grad-tri:linear-gradient(110deg,var(--c),var(--a) 45%,var(--b));
  --serif:'Instrument Serif',Georgia,serif;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --maxw:1280px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --rng-empty:rgba(255,255,255,0.10);   /* slider unfilled track */
  --nav-bg:rgba(6,7,12,.6);             /* scrolled nav backdrop */
}

/* ============ Light theme ============ */
html[data-theme="light"]{
  --bg:#f5f7fc;
  --bg-2:#ffffff;
  --panel:rgba(20,26,52,0.035);
  --panel-2:rgba(20,26,52,0.06);
  --text:#10131f;
  --muted:#555c72;
  --faint:#677082;
  --line:rgba(20,26,52,0.12);
  --line-soft:rgba(20,26,52,0.07);
  --a:#3f6fe0;   /* slightly deeper accents so gradient text stays legible on white */
  --b:#7a3fe0;
  --c:#10a99b;
  --rng-empty:rgba(20,26,52,0.12);
  --nav-bg:rgba(245,247,252,.72);
}
/* a vivid tri-colour gradient backdrop — gives the lightest theme some punch.
   Painted on the fixed .aurora layer (composited) so it never repaints on scroll. */
html[data-theme="light"] .aurora{
  background:
    radial-gradient(120% 90% at 4% -5%, rgba(52,227,214,.38), transparent 56%),
    radial-gradient(120% 95% at 100% 4%, rgba(160,107,255,.40), transparent 56%),
    radial-gradient(140% 125% at 52% 122%, rgba(91,140,255,.42), transparent 56%);
}
html[data-theme="light"] .aurora span{opacity:.30;mix-blend-mode:normal;filter:blur(105px)}
html[data-theme="light"] .vignette{background:radial-gradient(120% 80% at 50% 0%,transparent 62%,rgba(20,28,60,.05) 100%)}
html[data-theme="light"] .grain{opacity:.02}
html[data-theme="light"] .col,
html[data-theme="light"] .help,
html[data-theme="light"] .tile,
html[data-theme="light"] .sc-form,
html[data-theme="light"] .sc-card{box-shadow:0 20px 44px -22px rgba(24,30,66,.28)}
html[data-theme="light"] .gauge .g-track{stroke:rgba(20,26,52,.10)}
html[data-theme="light"] .btn-primary{box-shadow:0 8px 26px rgba(63,111,224,.30)}

/* ============ Dim theme (a softer dark, between dark & light) ============ */
html[data-theme="dim"]{
  --bg:#191d28;
  --bg-2:#222838;
  --panel:rgba(255,255,255,0.032);
  --panel-2:rgba(255,255,255,0.055);
  --text:#e9ecf4;
  --muted:#a2a9bd;
  --faint:#888ea2;
  --line:rgba(255,255,255,0.10);
  --line-soft:rgba(255,255,255,0.06);
  --rng-empty:rgba(255,255,255,0.12);
  --nav-bg:rgba(25,29,40,.72);
}
/* dim keeps the dark atmosphere but eases its intensity a touch */
html[data-theme="dim"] .aurora span{opacity:.4}
html[data-theme="dim"] .vignette{background:radial-gradient(120% 80% at 50% 0%,transparent 58%,rgba(0,0,0,.4) 100%)}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--sans);
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
::selection{background:rgba(91,140,255,.3);color:#fff}

a{color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}
img{max-width:100%}
button,a{-webkit-tap-highlight-color:transparent}

/* ---------- Atmosphere ---------- */
.aurora{position:fixed;inset:0;z-index:-2;overflow:hidden;pointer-events:none}
.aurora span{position:absolute;border-radius:50%;filter:blur(90px);opacity:.5;mix-blend-mode:screen}
.aurora .o1{width:55vw;height:55vw;left:-12vw;top:-10vw;background:radial-gradient(circle,rgba(91,140,255,.55),transparent 65%);animation:drift1 24s var(--ease) infinite alternate}
.aurora .o2{width:48vw;height:48vw;right:-14vw;top:8vw;background:radial-gradient(circle,rgba(160,107,255,.5),transparent 65%);animation:drift2 30s var(--ease) infinite alternate}
.aurora .o3{width:42vw;height:42vw;left:30vw;bottom:-18vw;background:radial-gradient(circle,rgba(52,227,214,.32),transparent 65%);animation:drift3 28s var(--ease) infinite alternate}
@keyframes drift1{to{transform:translate(8vw,6vw) scale(1.15)}}
@keyframes drift2{to{transform:translate(-6vw,10vw) scale(1.1)}}
@keyframes drift3{to{transform:translate(5vw,-8vw) scale(1.2)}}

/* film grain + vignette for class */
.grain{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}
.vignette{position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(120% 80% at 50% 0%,transparent 55%,rgba(0,0,0,.55) 100%);}

/* ---------- Layout helpers ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
section{position:relative}

.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-size:12px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--muted);font-weight:500;margin-bottom:26px;
}
.eyebrow .idx{
  font-family:var(--sans);font-weight:600;
  background:var(--grad-tri);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--grad);display:inline-block}

.gtext{background:var(--grad-tri);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}

/* ---------- Nav ---------- */
header.nav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;align-items:center;justify-content:flex-end;gap:clamp(14px,2vw,26px);
  padding:20px clamp(20px,4vw,44px);
  transition:background .4s,backdrop-filter .4s,border-color .4s,padding .4s;
  border-bottom:1px solid transparent;
}
header.nav.scrolled{
  background:var(--nav-bg);-webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid var(--line-soft);padding-top:14px;padding-bottom:14px;
}
/* ---------- Theme switch (3-stop 3D: dark · dim · light) ---------- */
.theme-switch{
  position:relative;display:inline-flex;align-items:center;padding:4px;border-radius:100px;flex:none;
  background:linear-gradient(180deg,#0b0f1c,#1a2238);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:inset 0 2px 5px rgba(0,0,0,.6),inset 0 -1px 1px rgba(255,255,255,.05),0 1px 1px rgba(255,255,255,.04);
  transition:background .55s var(--ease),border-color .55s var(--ease),box-shadow .55s var(--ease);
  -webkit-tap-highlight-color:transparent;
}
html[data-theme="dim"] .theme-switch{
  background:linear-gradient(180deg,#1c2233,#2c3450);border-color:rgba(255,255,255,.11);
}
html[data-theme="light"] .theme-switch{
  background:linear-gradient(180deg,#bcd4ff,#9ab7ff);border-color:rgba(40,70,140,.18);
  box-shadow:inset 0 2px 5px rgba(40,70,140,.30),inset 0 -1px 1px rgba(255,255,255,.55),0 1px 1px rgba(255,255,255,.5);
}
.theme-switch:focus-within{box-shadow:0 0 0 3px rgba(91,140,255,.4),inset 0 2px 5px rgba(0,0,0,.6)}
/* the sliding 3D knob (sits under the icons) */
.ts-thumb{
  position:absolute;top:4px;left:4px;width:30px;height:30px;border-radius:50%;z-index:0;pointer-events:none;
  background:radial-gradient(circle at 34% 28%,#ffffff,#e7ebf4 58%,#ccd3e2);
  box-shadow:0 3px 6px rgba(0,0,0,.5),0 1px 2px rgba(0,0,0,.45),inset 0 1px 1px rgba(255,255,255,.95),inset 0 -2px 3px rgba(40,50,80,.18);
  transition:transform .5s var(--ease),background .5s var(--ease),box-shadow .5s var(--ease);
}
.theme-switch[data-active="dark"]  .ts-thumb{transform:translateX(0)}
.theme-switch[data-active="dim"]   .ts-thumb{transform:translateX(30px)}
.theme-switch[data-active="light"] .ts-thumb{transform:translateX(60px)}
html[data-theme="dim"] .ts-thumb{
  background:radial-gradient(circle at 34% 28%,#eef1ff,#c4cbee 58%,#9aa2cf);
  box-shadow:0 3px 6px rgba(0,0,0,.5),inset 0 1px 1px rgba(255,255,255,.85),inset 0 -2px 3px rgba(40,40,80,.25),0 0 10px rgba(130,115,255,.5);
}
html[data-theme="light"] .ts-thumb{
  background:radial-gradient(circle at 34% 28%,#fff4d2,#ffd877 55%,#ffba4d);
  box-shadow:0 3px 7px rgba(180,120,20,.45),inset 0 1px 1px rgba(255,255,255,.9),inset 0 -2px 3px rgba(150,100,10,.28),0 0 11px rgba(255,193,77,.55);
}
/* the three icon options (above the knob) */
.ts-opt{
  position:relative;z-index:1;width:30px;height:30px;display:grid;place-items:center;
  background:none;border:0;padding:0;margin:0;cursor:pointer;color:var(--faint);
  transition:color .35s var(--ease);-webkit-tap-highlight-color:transparent;
}
.ts-opt svg{width:15px;height:15px;display:block}
.ts-opt:hover{color:var(--muted)}
.ts-opt:focus-visible{outline:none}
/* active icon rides the knob — give it contrast against the knob colour */
.theme-switch[data-active="dark"]  .ts-opt[data-theme="dark"]{color:#48516e}
.theme-switch[data-active="dim"]   .ts-opt[data-theme="dim"]{color:#5b46b8}
.theme-switch[data-active="light"] .ts-opt[data-theme="light"]{color:#bd7e0d}
@media(prefers-reduced-motion:reduce){.ts-thumb,.ts-opt{transition:none}}

/* footer wordmark — same serif + tri-gradient as the hero brand, scaled down */
.foot-brand{
  font-family:var(--serif);font-weight:400;letter-spacing:-.01em;line-height:1;white-space:nowrap;
  font-size:clamp(20px,2.3vw,27px);
  background:var(--grad-tri);-webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 2px 16px rgba(120,110,255,.22));
  transition:filter .3s var(--ease);
}
.foot-brand:hover{filter:drop-shadow(0 2px 22px rgba(120,110,255,.42))}
.nav-links{display:flex;gap:30px;align-items:center;margin-left:auto}
.nav-links a{font-size:14px;font-weight:500;color:var(--muted);transition:color .3s var(--ease);position:relative;white-space:nowrap}
.nav-links a::after{content:"";position:absolute;left:0;bottom:-5px;height:1px;width:0;background:var(--grad);transition:width .3s var(--ease)}
.nav-links a:hover{color:var(--text)}
.nav-links a:hover::after{width:100%}

/* ---------- Mobile menu (hamburger) — desktop hides this ---------- */
.nav-toggle{display:none;background:none;border:0;cursor:pointer;width:44px;height:44px;border-radius:12px;
  align-items:center;justify-content:center;flex:none;-webkit-tap-highlight-color:transparent;transition:background .3s var(--ease)}
.nav-toggle:hover{background:var(--panel)}
.nav-toggle:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(91,140,255,.4)}
.nav-toggle-bars{position:relative;display:block;width:20px;height:14px}
.nav-toggle-bars span{position:absolute;left:0;width:100%;height:2px;border-radius:2px;background:var(--text);transition:transform .3s var(--ease),opacity .2s var(--ease),top .3s var(--ease)}
.nav-toggle-bars span:nth-child(1){top:0}
.nav-toggle-bars span:nth-child(2){top:6px}
.nav-toggle-bars span:nth-child(3){top:12px}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(1){top:6px;transform:rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(3){top:6px;transform:rotate(-45deg)}

/* ---------- Hero ---------- */
.hero{min-height:100vh;min-height:100svh;display:flex;align-items:center;position:relative;padding:clamp(180px,24vh,290px) 0 96px}
#field{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.hero .wrap{position:relative;z-index:2;width:100%}
.hero-grid{max-width:none}
.hero .cta-row{margin-top:84px}
.hero-head{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(36px,6.45vw,87px);line-height:1.05;letter-spacing:-.014em;
  margin:0;white-space:nowrap;
}
.hero-head .it{font-style:italic}
.hero p.lede{
  font-size:clamp(16px,1.55vw,20px);color:var(--muted);
  max-width:680px;margin:30px 0 0;font-weight:300;line-height:1.65;
}
.hero p.lede b{color:var(--text);font-weight:500}
.hero-deck{font-family:var(--sans);font-weight:400;color:var(--text);opacity:.9;
  font-size:clamp(17px,1.9vw,23px);line-height:1.4;margin:22px 0 0;max-width:620px}
.hero-brand{position:absolute;top:clamp(86px,13vh,158px);left:0;right:0;z-index:3;
  text-align:center;padding:0 24px;margin:0;line-height:1.05}
.hero-brand .hb{display:inline-block;
  font-family:var(--serif);font-weight:400;letter-spacing:-.02em;line-height:1.16;padding-bottom:.08em;
  font-size:clamp(48px,8.6vw,116px);
  background:var(--grad-tri);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 4px 34px rgba(120,110,255,.30))}
.hero-note{
  max-width:660px;margin:26px 0 0;padding-left:18px;
  border-left:2px solid;border-image:linear-gradient(var(--a),var(--b)) 1;
  color:var(--text);font-weight:300;font-size:clamp(14px,1.35vw,16px);line-height:1.62;opacity:.92;
}
.hero-note b{font-weight:500;color:#fff}
.hero-trust{font-family:var(--serif);font-weight:400;letter-spacing:-.01em;
  font-size:clamp(24px,3.2vw,38px);line-height:1.08;margin:30px 0 2px;max-width:640px;color:var(--text)}
.hero-trust .g{font-style:italic;background:var(--grad-tri);-webkit-background-clip:text;
  background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 1px 18px rgba(120,110,255,.28))}
.hero-payoff{font-family:var(--serif);font-weight:400;letter-spacing:-.01em;
  font-size:clamp(24px,3.2vw,38px);line-height:1.08;margin:14px 0 2px;color:var(--text);white-space:nowrap}
/* gradient clause whose colours drift slowly side-to-side, forever — smooth, discrete */
.hero-payoff .sheen{
  font-style:italic;
  background-image:linear-gradient(100deg,var(--c) 0%,var(--a) 28%,var(--b) 50%,var(--a) 72%,var(--c) 100%);
  background-size:200% 100%;
  background-position:0% 50%;
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 1px 18px rgba(120,110,255,.28));
  animation:sheen 16s ease-in-out infinite;
}
@keyframes sheen{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}
.cta-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:42px}
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-size:15px;font-weight:500;padding:14px 26px;border-radius:100px;
  transition:.35s var(--ease);cursor:pointer;border:1px solid transparent;
}
.btn-primary{background:var(--grad);color:#fff;box-shadow:0 8px 30px rgba(91,140,255,.28)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 44px rgba(120,110,255,.42)}
.btn-primary .arrow{transition:transform .35s var(--ease)}
.btn-primary:hover .arrow{transform:translateX(4px)}
.btn-ghost{border-color:var(--line);color:var(--text)}
.btn-ghost:hover{background:var(--panel);border-color:rgba(255,255,255,.22)}

.scroll-hint{
  position:absolute;left:50%;bottom:30px;transform:translateX(-50%);z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:9px;
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--faint);
}
.scroll-hint .bar{width:1px;height:42px;background:linear-gradient(var(--muted),transparent);position:relative;overflow:hidden}
.scroll-hint .bar::after{content:"";position:absolute;top:-50%;left:0;width:100%;height:50%;background:linear-gradient(var(--c),transparent);animation:fall 1.9s var(--ease) infinite}
@keyframes fall{to{top:100%}}

/* ---------- Generic section spacing ---------- */
.band{padding:clamp(90px,11vh,150px) 0}
.section-head{max-width:780px;margin-bottom:60px}
.section-head h2{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(32px,4.6vw,60px);line-height:1.02;letter-spacing:-.01em;
}
.section-head h2 .it{font-style:italic}
.section-head p{color:var(--muted);font-size:clamp(15px,1.4vw,18px);margin-top:22px;max-width:620px;font-weight:300}

/* ---------- Why: static vs signal split ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:14px}
.col{
  border-radius:20px;padding:34px 32px;
  background:linear-gradient(180deg,var(--panel),transparent);position:relative;overflow:hidden;
  box-shadow:0 22px 48px -18px rgba(0,0,0,.7);
  isolation:isolate;transition:transform .45s var(--ease),box-shadow .45s var(--ease);
}
.col::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  background:radial-gradient(130% 95% at 80% 0,rgba(91,140,255,.18),transparent 58%);
  opacity:0;transition:opacity .55s var(--ease)}
.col:hover::after{opacity:1}
.col:hover{transform:translateY(-3px);box-shadow:0 30px 60px -16px rgba(0,0,0,.82)}
.col .tag{font-size:12px;letter-spacing:.18em;text-transform:uppercase;font-weight:600;margin-bottom:20px;display:block}
.col.static .tag{color:var(--faint)}
.col.signal .tag{color:transparent;-webkit-text-fill-color:transparent;background:var(--grad-tri);-webkit-background-clip:text;background-clip:text}
.col h3{font-size:23px;font-weight:600;letter-spacing:-.01em;margin-bottom:10px}
.col p{color:var(--muted);font-size:15px;font-weight:300}
.col ul{list-style:none;margin-top:22px;display:flex;flex-direction:column;gap:13px}
.col li{display:flex;align-items:center;gap:12px;font-size:14.5px;color:var(--muted)}
.col li .dot{width:7px;height:7px;border-radius:50%;flex:none}
.col.static li .dot{background:var(--faint);opacity:.5}
.col.signal li .dot{background:var(--c);box-shadow:0 0 10px var(--c)}
.col.signal{border-color:rgba(91,140,255,.28)}
.col.signal::before{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 100% 0,rgba(91,140,255,.12),transparent 60%);pointer-events:none}
.col.signal li{color:var(--text)}

/* ---------- Advantages · bento ---------- */
.defs{position:absolute;width:0;height:0;pointer-events:none}
.bento{
  display:grid;gap:16px;grid-template-columns:repeat(4,1fr);
  grid-auto-rows:minmax(176px,auto);
  grid-template-areas:
    "ai ai ai comp"
    "rt icp few comp";
}
.tile{
  position:relative;overflow:hidden;border-radius:24px;isolation:isolate;
  border:1px solid var(--line-soft);
  background:linear-gradient(180deg,var(--panel),rgba(255,255,255,0));
  padding:24px;display:flex;flex-direction:column;
  transition:border-color .45s var(--ease),transform .45s var(--ease);
}
.tile:hover{border-color:rgba(255,255,255,.18);transform:translateY(-3px)}
.t-glow{position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .55s var(--ease);
  background:radial-gradient(130% 95% at 80% 0,rgba(91,140,255,.18),transparent 58%)}
.tile:hover .t-glow{opacity:1}
.t-copy{margin-top:auto}
.tile .num{font-size:10.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.tile h3{font-size:17px;font-weight:600;letter-spacing:-.01em;margin:11px 0 7px;line-height:1.2}
.tile p{color:var(--muted);font-size:13px;font-weight:300;line-height:1.55;margin:0}
.t-ai{grid-area:ai}.t-comp{grid-area:comp}.t-rt{grid-area:rt}.t-icp{grid-area:icp}.t-few{grid-area:few}
.viz{position:relative;width:100%}
.viz svg{display:block;width:100%;height:100%;overflow:visible}

/* AI = wide; copy left / viz right */
.t-ai{flex-direction:row;align-items:center;gap:26px}
.t-ai .t-copy{margin-top:0;max-width:38%;flex:none}
.t-ai h3{font-size:20px}
.t-ai .viz{flex:1;align-self:stretch;min-height:148px}
/* Compound = tall */
.t-comp{align-items:stretch}
.t-comp .viz{flex:1;min-height:150px;margin:-2px 0 6px}
/* small tiles */
.t-rt .viz,.t-icp .viz,.t-few .viz{flex:1;min-height:96px;margin-bottom:10px}
.t-rt,.t-icp,.t-few{min-height:224px}
.t-rt .viz svg{overflow:hidden}

/* — pipeline — */
.lane{stroke:var(--line);stroke-width:1;stroke-dasharray:1 7;stroke-linecap:round;opacity:.75}
.gate{fill:rgba(9,11,19,.55);stroke:url(#gA);stroke-width:1.5}
.gate-halo{fill:url(#gA);filter:url(#soft);animation:gateP 2.8s var(--ease) infinite}
.ai-core{fill:url(#gA);transform-box:fill-box;transform-origin:center;animation:gateP 2.8s var(--ease) infinite}
@keyframes gateP{0%,100%{opacity:.22}50%{opacity:.55}}
.pktbox{fill:var(--c);animation:fillPass 5s linear infinite;animation-delay:var(--d)}
.pkt-pass,.pkt-rej{animation:flow 5s linear infinite;animation-delay:var(--d)}
.pkt-rej{animation-name:flowRej}
.pkt-rej .pktbox{animation-name:fillRej}
.chk{fill:none;stroke:#06121a;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;opacity:0;animation:chk 5s linear infinite;animation-delay:var(--d)}
@keyframes flow{0%{transform:translateX(0);opacity:0}6%{opacity:1}92%{opacity:1}100%{transform:translateX(490px);opacity:0}}
@keyframes flowRej{0%{transform:translate(0,0);opacity:0}6%{opacity:1}46%{transform:translate(223px,0)}60%{transform:translate(243px,3px)}82%{transform:translate(253px,42px);opacity:0}100%{transform:translate(253px,42px);opacity:0}}
@keyframes fillPass{0%,47%{fill:var(--faint)}55%,100%{fill:var(--c)}}
@keyframes fillRej{0%,48%{fill:var(--faint)}60%,100%{fill:#ff6b7a}}
@keyframes chk{0%,53%{opacity:0}60%{opacity:1}92%{opacity:1}100%{opacity:0}}

/* — compound — */
.cgrid{stroke:var(--line);stroke-width:1;stroke-dasharray:1 6;opacity:.6}
.cbar{fill:url(#cg);opacity:.13;transform-box:fill-box;transform-origin:bottom;transform:scaleY(0)}
.t-comp.in .cbar{animation:barUp 1s var(--ease) forwards;animation-delay:var(--d)}
@keyframes barUp{to{transform:scaleY(1)}}
.climb-area{fill:url(#ca);opacity:0;transition:opacity 1.1s .9s var(--ease)}
.t-comp.in .climb-area{opacity:1}
.climb{fill:none;stroke:url(#cg);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:330;stroke-dashoffset:330}
.t-comp.in .climb{animation:drawClimb 1.8s .25s var(--ease) forwards}
@keyframes drawClimb{to{stroke-dashoffset:0}}
.ctip{fill:#eafdfb}
.ctip-glow{fill:var(--c);filter:url(#soft);transform-box:fill-box;transform-origin:center;animation:tipP 2.4s var(--ease) infinite}
@keyframes tipP{0%,100%{opacity:.5;transform:scale(1)}50%{opacity:.95;transform:scale(1.3)}}

/* — compound · spiral — */
.spiral-ring{fill:none;stroke:var(--line);opacity:.4}
.spiral{fill:none;stroke:url(#cg);stroke-width:2;stroke-linecap:round;
  stroke-dasharray:var(--len,1600);stroke-dashoffset:var(--len,1600);
  filter:drop-shadow(0 0 4px rgba(91,140,255,.5))}
.t-comp.in .spiral{animation:spiralDraw 2.8s .2s var(--ease) forwards}
@keyframes spiralDraw{to{stroke-dashoffset:0}}
.spiral-core{fill:var(--c);filter:url(#soft);transform-box:fill-box;transform-origin:center;animation:tipP 2.6s var(--ease) infinite}
.spiral-core2{fill:#eafdfb}
.comet{fill:#eafdfb;filter:drop-shadow(0 0 5px var(--c)) drop-shadow(0 0 11px var(--a))}
.sdot{fill:var(--c);filter:url(#soft);opacity:0;transform-box:fill-box;transform-origin:center}
.t-comp.in .sdot{animation:sdotIn .7s var(--ease) forwards;animation-delay:var(--d)}
@keyframes sdotIn{from{opacity:0;transform:scale(0)}to{opacity:.85;transform:scale(1)}}

/* — real-time waveform — */
.stale{stroke:var(--faint);stroke-width:1.4;stroke-dasharray:2 5;opacity:.5;stroke-linecap:round}
.wave{animation:wscroll 5s linear infinite}
@keyframes wscroll{to{transform:translateX(-200px)}}
.wline{fill:none;stroke:var(--c);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;filter:url(#soft)}
.live{position:absolute;top:2px;left:2px;display:flex;align-items:center;gap:6px;font-size:9.5px;letter-spacing:.16em;font-weight:600;color:var(--c)}
.live i{width:6px;height:6px;border-radius:50%;background:var(--c);box-shadow:0 0 8px var(--c);animation:blink 1.5s steps(1) infinite}
@keyframes blink{0%,55%{opacity:1}56%,100%{opacity:.2}}

/* — ICP reticle — */
.rcross{stroke:var(--line);fill:none;stroke-width:1;stroke-dasharray:2 4;opacity:.7}
.ring{stroke:var(--line);fill:none;stroke-width:1;opacity:.4}
.tick{stroke:var(--muted);stroke-width:1.4;fill:none;opacity:.6;stroke-linecap:round}
.fdot{fill:var(--faint);transform-box:fill-box;transform-origin:center;animation:filt 4.5s var(--ease) infinite;animation-delay:var(--d)}
@keyframes filt{0%,68%{opacity:.5;transform:scale(1)}84%{opacity:0;transform:scale(.2)}100%{opacity:0}}
.scan{fill:none;stroke:url(#cg);stroke-width:1.6;transform-box:fill-box;transform-origin:center;animation:scan 3.2s var(--ease) infinite}
.scan.b{animation-delay:-1.6s}
@keyframes scan{0%{transform:scale(2.3);opacity:0}18%{opacity:.85}100%{transform:scale(.45);opacity:0}}
.lock{fill:#eafdfb}
.lock-glow{fill:var(--c);filter:url(#soft);transform-box:fill-box;transform-origin:center;animation:tipP 2.6s var(--ease) infinite}

/* — fewer touchpoints — */
.fnet{stroke:var(--line);stroke-width:1;fill:none;opacity:.6}
.fbright{stroke:url(#cg);stroke-width:1.5;fill:none;opacity:.85}
.fnode-dim{fill:var(--faint);opacity:.5}
.fnode{fill:var(--c);filter:url(#soft)}
.fnode-core{fill:#eafdfb}
.fp{fill:var(--c);filter:url(#soft);offset-rotate:0deg;animation:fpRun 3s linear infinite}
@keyframes fpRun{0%{offset-distance:0%;opacity:0}12%{opacity:1}82%{opacity:1}100%{offset-distance:100%;opacity:0}}
.fp1{offset-path:path('M26,38 C70,52 96,66 130,74')}
.fp2{offset-path:path('M30,118 C74,104 100,88 130,76');animation-delay:-1.5s}
.fp3{offset-path:path('M134,75 C156,66 156,60 168,52');animation-delay:-2.3s}

/* ---------- How we help ---------- */
.help-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:14px}
.help{
  border-radius:20px;padding:34px 30px;
  background:linear-gradient(180deg,var(--panel),transparent);position:relative;isolation:isolate;
  transition:.4s var(--ease);box-shadow:0 22px 48px -18px rgba(0,0,0,.7);
}
.help::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  background:radial-gradient(130% 95% at 80% 0,rgba(91,140,255,.18),transparent 58%);
  opacity:0;transition:opacity .55s var(--ease)}
.help:hover::after{opacity:1}
.help:hover{background:linear-gradient(180deg,var(--panel-2),transparent);transform:translateY(-3px);box-shadow:0 30px 60px -16px rgba(0,0,0,.82)}
.help .k{
  font-family:var(--serif);font-style:italic;font-size:30px;
  background:var(--grad-tri);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  margin-bottom:16px;display:block;
}
.help h3{font-size:19px;font-weight:600;margin-bottom:10px}
.help p{color:var(--muted);font-size:14.5px;font-weight:300}

/* ---------- Closing ---------- */
.closing{text-align:center;padding:clamp(110px,16vh,190px) 0}
.closing h2{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(38px,6.2vw,86px);line-height:1.02;letter-spacing:-.015em;max-width:14ch;margin:0 auto;
}
.closing h2 .it{font-style:italic}
.closing p{color:var(--muted);max-width:540px;margin:28px auto 0;font-weight:300;font-size:clamp(15px,1.5vw,19px)}
.closing .cta-row{justify-content:center}

/* ---------- Footer ---------- */
footer{border-top:1px solid var(--line-soft);padding:46px 0 56px}
footer .wrap{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
footer .legal{color:var(--faint);font-size:13px}
footer .links{display:flex;gap:26px;font-size:13.5px;color:var(--muted)}
footer .links a{transition:color .3s}
footer .links a:hover{color:var(--text)}

/* nav CTA pill */
.nav-cta{
  padding:9px 18px;border-radius:100px;font-weight:600;color:var(--text)!important;
  border:1px solid rgba(91,140,255,.5);
  background:linear-gradient(180deg,rgba(91,140,255,.16),rgba(160,107,255,.06));
  transition:.3s var(--ease);
}
.nav-cta::after{display:none!important}
.nav-cta:hover{border-color:rgba(91,140,255,.85);
  background:linear-gradient(180deg,rgba(91,140,255,.28),rgba(160,107,255,.12));
  box-shadow:0 6px 22px rgba(91,140,255,.28)}

/* per-section centered CTA */
.sec-cta{display:flex;justify-content:center;margin-top:56px}

/* footer CTA band */
.foot-cta{
  display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap;
  padding:30px 0 34px;margin-bottom:34px;border-bottom:1px solid var(--line-soft);
}
.foot-cta .fc-copy .fc-ey{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);font-weight:600}
.foot-cta .fc-copy p{margin-top:8px;font-family:var(--serif);font-size:clamp(21px,2.4vw,30px);
  line-height:1.15;letter-spacing:-.01em;color:var(--text);max-width:22ch}
.foot-cta .fc-copy p .it{font-style:italic;
  background:var(--grad-tri);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
@media(max-width:560px){
  .sec-cta .btn{width:100%;justify-content:center}
  .foot-cta{padding-top:8px}
  .foot-cta .btn{width:100%;justify-content:center}
}

/* ---------- Reveal ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal[data-d="1"]{transition-delay:.08s}
.reveal[data-d="2"]{transition-delay:.16s}
.reveal[data-d="3"]{transition-delay:.24s}
.reveal[data-d="4"]{transition-delay:.32s}
.reveal[data-d="5"]{transition-delay:.4s}
.reveal[data-d="6"]{transition-delay:.48s}

/* ---------- Responsive ---------- */
@media(max-width:980px){
  /* bento → 2-up before fully stacking */
  .bento{grid-template-columns:repeat(2,1fr);grid-auto-rows:auto;
    grid-template-areas:"ai ai" "comp few" "rt icp";}
  .t-ai{min-height:240px}
  .t-comp{min-height:300px}
}
@media(max-width:880px){
  .split{grid-template-columns:1fr}
  .help-grid{grid-template-columns:1fr}
  .band{padding:clamp(70px,9vh,108px) 0}
  .section-head{margin-bottom:44px}
  header.nav{padding-left:18px;padding-right:18px}
}
@media(max-width:640px){
  .bento{grid-template-columns:1fr;grid-auto-rows:auto;
    grid-template-areas:"ai" "comp" "rt" "icp" "few";}
  .t-ai{flex-direction:column;align-items:stretch;min-height:0}
  .t-ai .t-copy{max-width:none;margin-top:16px}
  .t-ai .viz{min-height:150px}
  .t-comp{min-height:280px}
}
@media(max-width:560px){
  .wrap{padding:0 20px}
  /* hamburger left, theme switch right; links collapse into a dropdown */
  header.nav{justify-content:space-between}
  .nav-toggle{display:inline-flex}
  .nav-links{
    display:none;position:absolute;top:calc(100% - 4px);left:clamp(20px,4vw,44px);right:clamp(20px,4vw,44px);
    flex-direction:column;align-items:stretch;gap:4px;margin:0;
    padding:10px;border-radius:16px;background:var(--bg-2);
    border:1px solid var(--line);box-shadow:0 20px 46px -16px rgba(0,0,0,.6);
  }
  .nav-links.open{display:flex;animation:navDrop .26s var(--ease)}
  .nav-links a{font-size:15px;padding:12px 14px;border-radius:10px;width:100%;white-space:normal}
  .nav-links a:hover{color:var(--text);background:var(--panel)}
  .nav-links a::after{display:none}
  .nav-cta{text-align:center;justify-content:center;margin-top:4px}
  @keyframes navDrop{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
  .hero{padding:96px 0 64px;flex-direction:column;justify-content:center;align-items:stretch}
  .hero-brand{position:static;text-align:left;padding:0 20px;margin:0 0 26px}
  .hero-brand .hb{font-size:clamp(48px,15vw,74px);line-height:1.0;letter-spacing:-.028em}
  .hero-head{font-size:clamp(36px,11.25vw,55px);line-height:1.05;margin-top:0;white-space:normal}
  .hero-deck{font-size:16px;margin-top:18px}
  .hero-trust{font-size:clamp(22px,6vw,30px);margin-top:24px}
  .hero-payoff{font-size:clamp(20px,5.6vw,28px);white-space:normal;margin-top:14px}
  .hero p.lede{margin-top:22px;font-size:16px}
  .hero-note{margin-top:20px;font-size:14px;padding-left:14px}
  .cta-row{flex-direction:column;align-items:stretch;margin-top:34px}
  .hero .cta-row{margin-top:64px}
  .btn{justify-content:center}
  .band{padding:58px 0}
  .section-head{margin-bottom:30px}
  .col{padding:28px 24px}
  .help{padding:28px 24px}
  .tile{padding:20px;border-radius:20px}
  .t-ai .viz{min-height:128px}
  .t-comp{min-height:240px}
  .t-rt,.t-icp,.t-few{min-height:194px}
  footer .wrap{flex-direction:column;align-items:flex-start;gap:18px}
  footer .links{flex-wrap:wrap;gap:6px 22px}
  footer .links a{display:inline-block;padding:9px 0}
}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
  .climb{stroke-dashoffset:0}
  .climb-area{opacity:1}
  .cbar{transform:scaleY(1)}
  .spiral{stroke-dashoffset:0}
  .sdot{opacity:.85}
}

/* ---------- Back to top ---------- */
.to-top{
  position:fixed;z-index:60;
  right:clamp(16px,3.4vw,30px);bottom:clamp(16px,3.4vw,30px);
  width:48px;height:48px;border-radius:50%;
  display:grid;place-items:center;cursor:pointer;color:var(--text);
  border:1px solid rgba(91,140,255,.5);
  background:linear-gradient(180deg,rgba(91,140,255,.16),rgba(160,107,255,.06));
  -webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);
  box-shadow:0 8px 26px rgba(0,0,0,.5);
  opacity:0;transform:translateY(14px) scale(.92);pointer-events:none;
  transition:opacity .4s var(--ease),transform .4s var(--ease),border-color .3s var(--ease),background .3s var(--ease),box-shadow .3s var(--ease);
}
.to-top.show{opacity:1;transform:none;pointer-events:auto}
.to-top:hover{
  border-color:rgba(91,140,255,.9);
  background:linear-gradient(180deg,rgba(91,140,255,.28),rgba(160,107,255,.12));
  box-shadow:0 12px 32px rgba(91,140,255,.32);transform:translateY(-2px)}
.to-top:active{transform:translateY(0) scale(.96)}
.to-top:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(91,140,255,.4),0 8px 26px rgba(0,0,0,.5)}
.to-top svg{width:19px;height:19px;display:block;transition:transform .3s var(--ease)}
.to-top:hover svg{transform:translateY(-2px)}
@media(max-width:560px){.to-top{width:44px;height:44px}.to-top svg{width:18px;height:18px}}
@media(prefers-reduced-motion:reduce){
  .to-top{transition:opacity .25s ease}
  .to-top:hover{transform:none}.to-top:hover svg{transform:none}
}

/* ============ Outbound Readiness Scorecard ============ */
#scorecard{padding-top:clamp(70px,9vh,120px)}
.sc-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:26px;align-items:start;margin-top:8px}
.sc-form{
  border-radius:22px;padding:clamp(26px,3.4vw,40px);
  background:linear-gradient(180deg,var(--panel),transparent);
  border:1px solid var(--line);box-shadow:0 22px 48px -18px rgba(0,0,0,.7);
  position:relative;overflow:hidden;isolation:isolate;
}
.sc-form::after{content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(120% 80% at 100% 0,rgba(91,140,255,.10),transparent 60%);pointer-events:none}
.sc-step{margin-bottom:34px}
.sc-step:last-child{margin-bottom:0}
.sc-step .lbl{display:flex;align-items:baseline;gap:11px;margin-bottom:7px}
.sc-step .lbl .n{font-size:11px;letter-spacing:.16em;font-weight:700;font-family:var(--sans);
  background:var(--grad-tri);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.sc-step .lbl h3{font-size:16.5px;font-weight:600;letter-spacing:-.01em}
.sc-step .hint{color:var(--faint);font-size:13px;font-weight:300;margin-bottom:17px;max-width:46ch}

/* segmented / chip choices */
.sc-chips{display:flex;flex-wrap:wrap;gap:9px}
.sc-chips.cols{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.chip{position:relative;cursor:pointer;user-select:none}
.chip input{position:absolute;opacity:0;width:0;height:0}
.chip span{
  display:flex;align-items:center;gap:9px;
  padding:11px 15px;border-radius:13px;font-size:13.5px;font-weight:400;color:var(--muted);
  border:1px solid var(--line);background:var(--panel);transition:.25s var(--ease);line-height:1.32;height:100%;
}
.chip span::before{content:"";width:15px;height:15px;border-radius:5px;border:1.5px solid var(--faint);
  flex:none;transition:.2s var(--ease);margin-top:1px}
.chip.radio span::before{border-radius:50%}
.chip:hover span{border-color:rgba(255,255,255,.22);color:var(--text)}
.chip input:checked + span{
  color:var(--text);border-color:rgba(91,140,255,.55);
  background:linear-gradient(180deg,rgba(91,140,255,.14),rgba(160,107,255,.06));
}
.chip input:checked + span::before{
  border-color:transparent;background:var(--grad);
  box-shadow:0 0 0 1px rgba(91,140,255,.4),inset 0 0 0 2px var(--bg-2);
}
.chip.radio input:checked + span::before{box-shadow:0 0 0 1px rgba(91,140,255,.4),inset 0 0 0 3px var(--bg-2)}

/* sliders */
.sc-slider{margin-bottom:25px}
.sc-slider:last-child{margin-bottom:0}
.sc-slider .row{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:11px;gap:14px}
.sc-slider .row .name{font-size:14px;font-weight:500;color:var(--text)}
.sc-slider .row .val{font-size:14px;font-weight:600;font-family:var(--sans);
  background:var(--grad-tri);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;white-space:nowrap}
input[type=range].rng{-webkit-appearance:none;appearance:none;width:100%;height:5px;border-radius:5px;
  background:var(--rng-empty);outline:none;cursor:pointer}
input[type=range].rng::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;
  background:#fff;border:none;box-shadow:0 0 0 4px rgba(91,140,255,.28),0 4px 12px rgba(0,0,0,.5);transition:transform .15s var(--ease)}
input[type=range].rng::-webkit-slider-thumb:hover{transform:scale(1.12)}
input[type=range].rng::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#fff;border:none;
  box-shadow:0 0 0 4px rgba(91,140,255,.28),0 4px 12px rgba(0,0,0,.5)}
.sc-slider .scale{display:flex;justify-content:space-between;margin-top:7px;font-size:11px;color:var(--faint)}

/* text inputs */
.sc-fields{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.sc-field{display:flex;flex-direction:column;gap:6px}
.sc-field.full{grid-column:1 / -1}
.sc-field label{font-size:12px;color:var(--faint);letter-spacing:.02em}
.sc-field input{
  background:var(--panel);border:1px solid var(--line);border-radius:11px;padding:12px 14px;
  color:var(--text);font-family:var(--sans);font-size:14px;transition:.25s var(--ease);width:100%;
}
.sc-field input::placeholder{color:var(--faint)}
.sc-field input:focus{outline:none;border-color:rgba(91,140,255,.55);background:var(--panel-2);
  box-shadow:0 0 0 3px rgba(91,140,255,.14)}

.sc-submit{margin-top:30px;display:flex;flex-direction:column;gap:13px}
.sc-submit .btn{justify-content:center;width:100%}
.sc-note{font-size:12px;color:var(--faint);text-align:center;font-weight:300}

/* ===== result panel (sticky gauge) ===== */
.sc-panel{position:sticky;top:96px}
.sc-card{
  border-radius:22px;padding:clamp(26px,3vw,34px);
  background:linear-gradient(180deg,rgba(91,140,255,.07),transparent),var(--bg-2);
  border:1px solid rgba(91,140,255,.24);box-shadow:0 30px 70px -24px rgba(0,0,0,.85);overflow:hidden;position:relative;
}
.sc-card .cap{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);font-weight:600;text-align:center}
.gauge{position:relative;width:230px;max-width:78%;margin:14px auto 6px;aspect-ratio:1}
.gauge svg{width:100%;height:100%;transform:rotate(-90deg)}
.gauge .g-track{fill:none;stroke:rgba(255,255,255,.08);stroke-width:13;stroke-linecap:round}
.gauge .g-arc{fill:none;stroke:url(#scGrad);stroke-width:13;stroke-linecap:round;
  transition:stroke-dashoffset 1s var(--ease)}
.gauge .g-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0}
.gauge .g-score{font-family:var(--serif);font-size:56px;line-height:1;
  background:var(--grad-tri);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.gauge .g-of{font-size:12px;color:var(--faint);margin-top:5px;letter-spacing:.04em}
.sc-tier{text-align:center;margin-top:4px}
.sc-tier .t-name{font-size:19px;font-weight:600;letter-spacing:-.01em}
.sc-tier .t-desc{color:var(--muted);font-size:13.5px;font-weight:300;margin-top:7px;line-height:1.5;max-width:34ch;margin-inline:auto}
.sc-leaks{margin-top:22px;border-top:1px solid var(--line-soft);padding-top:20px}
.sc-leaks .lk-h{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);font-weight:600;margin-bottom:13px}
.sc-leaks ul{list-style:none;display:flex;flex-direction:column;gap:11px}
.sc-leaks li{display:flex;gap:11px;font-size:13.5px;color:var(--muted);align-items:flex-start;line-height:1.42}
.sc-leaks li .lkdot{width:7px;height:7px;border-radius:50%;background:var(--c);box-shadow:0 0 9px var(--c);flex:none;margin-top:6px}
.sc-leaks .lk-empty{font-size:13.5px;color:var(--faint);font-weight:300;line-height:1.5}
.sc-meta{margin-top:20px;display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.sc-meta .pill{font-size:12px;color:var(--muted);border:1px solid var(--line);border-radius:100px;padding:6px 13px;background:var(--panel)}
.sc-meta .pill b{color:var(--text);font-weight:600}

@media(max-width:980px){
  .sc-grid{grid-template-columns:1fr}
  .sc-panel{position:relative;top:0;order:-1}
  .gauge{width:200px}
}
@media(max-width:560px){
  .sc-chips.cols{grid-template-columns:1fr}
  .sc-fields{grid-template-columns:1fr}
}