/* ============================================================
   Soro Data market — glassmorphism, ported from the patient portal
   ------------------------------------------------------------
   `soro-patient-database/public/portal.css` is the canonical
   source for this look; token NAMES and values are ported from it
   rather than re-derived, so the three apps stay one design.

   The recipe: one painted sage/pine canvas fixed behind the whole
   page (body::before) with a breath of grain on top (body::after);
   every panel is frosted glass floating over it — translucent
   fill, heavy blur, a 1px light stroke, an inner top reflection,
   a real drop shadow. Signature moves carried across: elements pop
   out of their panes, metric figures are oversized, and green only
   appears where it means something (money, the active page, live
   status, verified work).

   What this app adds to the system: the browse sidebar takes the
   portal's FLOATING DARK RAIL treatment (pine-dark glass in both
   themes, sage nav chips), and dataset cards carry a mono
   provenance receipt — the one element that is this app's own.

   prefers-reduced-transparency turns every pane solid.
   ============================================================ */

/* ---------- typefaces ----------
   Inter carries the interface, Figtree the headings and numbers —
   the portal's split, and the reason the figures read as brand.
   Both variable, both self-hosted, so the CSP needs no font host. */
@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/inter-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Figtree";
  src: url("/assets/fonts/figtree-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Green is the ACCENT, never the ground: buttons, the active page, live
     status, verified work. The ground itself is white in light and carbon
     noir in dark, so the data is what carries colour. */
  --sage: #2E6B4F;
  --sage-deep: #1F4A37;
  --sage-light: #4BA97B;
  --sage-bright: #6FD59C;
  --sage-wash: #EDF5F0;
  --sand: #C9CFD9;
  --cream: #FFFFFF;
  --surface: #FFFFFF;
  --on-pine: #FFFFFF;
  /* Titanium mist, rgb(215,219,226): the light ground. The panes are
     frosted WHITE over it, so a card reads as lighter than the page it
     floats on rather than the same white twice. */
  --titanium: #D7DBE2;
  --page: #D7DBE2;

  /* Carbon noir: the one dark, used for the rail, the gate and the CTA in
     BOTH themes, and for the whole ground in dark. rgb(12,15,20). */
  --carbon: #0C0F14;
  --carbon-lift: #141A22;   /* a step up, so a dark pane reads off the dark ground */
  --carbon-deep: #07090C;
  --page-a: #141A22;
  --page-b: #07090C;
  --rail-bg: #0C0F14;

  --topbar-bg: rgba(255, 255, 255, .74);
  --topbar-edge: rgba(12, 15, 20, .07);
  --pine: #0C0F14;          /* primary button + headline ink */
  --pine-deep: #07090C;
  --pine-soft: #2B333E;
  --ink: #0C0F14;
  --text: #39424E;
  --muted: #6C7684;
  --sage-text: #78828E;
  --mint: #EAEDF2;
  --wash: #F2F4F8;
  --wash-deep: #E8EBF1;
  --line: #E2E6EC;
  --line-strong: #CBD2DB;
  --flag: #C03B30;
  --flag-bg: #FCEFED;
  --ok: #2E6B4F;
  --ok-bg: #EDF5F0;
  --font: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-display: "Figtree", "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "SF Mono", ui-monospace, Menlo, monospace;

  /* Glass, one recipe everywhere: frosted WHITE over a near-white ground,
     held by a hairline of faded carbon rather than a white stroke (a white
     stroke is invisible on white). --dglass-* is glass over the surfaces
     that stay carbon in both themes. */
  --glass: rgba(255, 255, 255, .72);
  --glass-strong: rgba(255, 255, 255, .88);
  --glass-line: rgba(12, 15, 20, .08);
  --glass-hi: rgba(255, 255, 255, .9);
  --glass-blur: 22px;
  /* Titanium mist, lit from the top. NO colour in the ground: the page is
     light and shadow only, so the green reads as meaning wherever it does
     appear. A tinted canvas made the screen look busy. */
  --canvas:
    radial-gradient(54% 44% at 8% 0%, rgba(255, 255, 255, .58) 0%, transparent 68%),
    radial-gradient(46% 38% at 92% 4%, rgba(255, 255, 255, .75) 0%, transparent 70%),
    radial-gradient(60% 50% at 50% 108%, rgba(12, 15, 20, .07) 0%, transparent 74%),
    linear-gradient(180deg, #EDEFF4 0%, #E3E7ED 44%, #D7DBE2 100%);
  --dglass: rgba(255, 255, 255, .06);
  --dglass-strong: rgba(255, 255, 255, .10);
  --dglass-line: rgba(255, 255, 255, .10);
  --dglass-text: #EDF0F4;
  --dglass-dim: rgba(237, 240, 244, .60);

  --grad-sage: linear-gradient(150deg, #45936C 0%, #2E6B4F 46%, #1B3D2D 100%);

  --noise: 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='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");

  --r-lg: 24px;
  --r-md: 18px;
  --r-sm: 12px;

  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 22px;
  --s-6: 30px;
  --s-7: 40px;

  /* Faded black, barely there: a tight contact shadow to seat the pane and
     one long soft one to lift it. Neutral, never tinted. */
  --shadow-sm: 0 1px 2px rgba(12, 15, 20, .04), 0 6px 16px -10px rgba(12, 15, 20, .10);
  --shadow-md: 0 1px 3px rgba(12, 15, 20, .04), 0 14px 32px -18px rgba(12, 15, 20, .16);
  --shadow-lg: 0 26px 60px -26px rgba(12, 15, 20, .24), 0 6px 18px -8px rgba(12, 15, 20, .08);

  --rail: 250px;
  --container: 1240px;
  --pad-x: clamp(18px, 4vw, 40px);
}

/* Carbon noir, the mirror image of the light theme: the ground is
   rgb(12,15,20) and the panes are frosted carbon lifted a step off it,
   held by a hairline of white instead of black. Same structure, inverted
   material. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --surface: #141A22;
  --page: #0C0F14;
  --topbar-bg: rgba(12, 15, 20, .72);
  --topbar-edge: rgba(255, 255, 255, .07);
  --glass: rgba(22, 28, 36, .68);
  --glass-strong: rgba(26, 33, 42, .86);
  --glass-line: rgba(255, 255, 255, .08);
  --glass-hi: rgba(255, 255, 255, .06);
  /* Same rule inverted: carbon, lit from the top, with no green in it. */
  --canvas:
    radial-gradient(54% 44% at 8% 0%, rgba(255, 255, 255, .05) 0%, transparent 68%),
    radial-gradient(46% 38% at 92% 4%, rgba(255, 255, 255, .035) 0%, transparent 70%),
    radial-gradient(60% 50% at 50% 108%, rgba(0, 0, 0, .55) 0%, transparent 74%),
    linear-gradient(180deg, #12171F 0%, #0E1219 46%, #0C0F14 100%);
  --sage: #5CB489;
  --sage-deep: #2E6B4F;
  --sage-light: #7ED0A6;
  --sage-wash: #12241C;
  --sand: #232A34;
  --cream: #141A22;
  --titanium: #D7DBE2;
  --pine: #E7EBF1;
  --pine-deep: #F2F5F9;
  --pine-soft: #FFFFFF;
  --on-pine: #0C0F14;
  --ink: #EDF0F5;
  --text: #C2C9D3;
  --muted: #89929F;
  --sage-text: #79828E;
  --mint: #1A2029;
  --wash: #12171E;
  --wash-deep: #181E27;
  --line: #212832;
  --line-strong: #313A46;
  --flag: #F0685C;
  --flag-bg: #2A1512;
  --ok: #5CB489;
  --ok-bg: #12241C;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .45);
  --shadow-md: 0 8px 22px -10px rgba(0, 0, 0, .65);
  --shadow-lg: 0 26px 64px -24px rgba(0, 0, 0, .8), 0 8px 20px -8px rgba(0, 0, 0, .5);
}

/* ---------- reset + shell ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
/* Native smooth-scroll ONLY when Lenis is not driving. Lenis adds `.lenis`
   to <html> once it boots; an unconditional scroll-behavior would make the
   browser ease on top of Lenis's easing, and that fight is a visible
   stutter. This is the fallback for reduced-motion or a failed script. */
html:not(.lenis) { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html:not(.lenis) { scroll-behavior: auto; }
}
/* The page never scrolls sideways. Anything genuinely wider than the
   viewport scrolls inside its own container. */
html, body { overflow-x: clip; }
body {
  font-family: var(--font);
  color: var(--text);
  background: var(--page);
  /* dvh, not vh: on a phone 100vh excludes the address bar, so a 100vh
     shell is always taller than the visible screen and every page
     scrolls a little past its own content. The vh line is the fallback. */
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
/* The one canvas everything floats over. Fixed, so the paint holds still
   while the glass slides across it — that parallax is most of what makes
   the panels read as glass. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -2;
  background: var(--canvas);
  background-attachment: fixed;
}
/* Grain at a whisper. On a near-white ground anything heavier reads as
   dirt rather than as texture. */
body::after {
  content: ""; position: fixed; inset: 0; z-index: -1;
  background-image: var(--noise);
  background-size: 160px;
  opacity: .07; mix-blend-mode: overlay;
  pointer-events: none;
}
:root[data-theme="dark"] body::after { opacity: .16; }
/* Ambient light breathing slowly behind the glass. Light only, never
   colour: the ground stays neutral so the page reads calm. */
.orbs {
  content: ""; position: fixed; inset: -12%; z-index: -1;
  background:
    radial-gradient(340px 340px at 20% 26%, rgba(255, 255, 255, .5), transparent 70%),
    radial-gradient(400px 400px at 84% 70%, rgba(255, 255, 255, .3), transparent 70%),
    radial-gradient(260px 260px at 62% 8%, rgba(255, 255, 255, .34), transparent 70%);
  animation: orbs-float 28s ease-in-out infinite alternate;
  pointer-events: none;
}
:root[data-theme="dark"] .orbs {
  background:
    radial-gradient(340px 340px at 20% 26%, rgba(255, 255, 255, .045), transparent 70%),
    radial-gradient(400px 400px at 84% 70%, rgba(255, 255, 255, .03), transparent 70%),
    radial-gradient(260px 260px at 62% 8%, rgba(255, 255, 255, .028), transparent 70%);
}
@keyframes orbs-float {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(2.5%, -3%, 0) scale(1.06); }
}

button { font-family: inherit; cursor: pointer; }
input, select { font-family: inherit; }
a { color: var(--sage); text-decoration: none; }
a:hover { color: var(--sage-deep); }
h1, h2, h3, h4 { font-family: var(--font-display); color: var(--ink); letter-spacing: -0.028em; line-height: 1.14; }
:focus-visible { outline: 2px solid var(--sage); outline-offset: 2px; border-radius: 4px; }

main { flex: 1 0 auto; }
.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--pad-x); }
.grid > *, .kpis > * { min-width: 0; }

/* ---------- topbar ----------
   Transparent at rest — no line, the canvas runs behind the title —
   and condenses to glass on scroll (.scrolled, set in app.js). */
.topbar {
  position: sticky; top: 0; z-index: 40;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background .3s ease, border-color .3s ease, backdrop-filter .3s ease;
}
.topbar.scrolled {
  background: var(--topbar-bg);
  border-bottom-color: var(--topbar-edge);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
}
.tb-inner {
  max-width: var(--container); margin: 0 auto; padding: 0 var(--pad-x);
  height: 68px; display: flex; align-items: center; gap: var(--s-5);
}
/* The Soro Data lockup: the supplied artwork, keyed to transparency and
   repainted in the site's own ink and sage (see the note in the README).
   Two files, one per theme, and only the pair below decides which you see
   — the alt text lives on the visible one so a screen reader hears the
   name once. */
.tb-logo { display: flex; align-items: center; }
.tb-logo .lockup {
  height: 22px; width: auto; display: block;
  /* the source art is 2105x312, so the box is reserved before it paints */
  aspect-ratio: 2105 / 312;
}
:root[data-theme="dark"] .tb-logo .lockup-ink,
.tb-logo .lockup-cream { display: none; }
:root[data-theme="dark"] .tb-logo .lockup-cream { display: block; }
.tb-links { display: flex; gap: 2px; }
.tb-links a {
  padding: 8px 14px; border-radius: 100px; font-size: 13.5px; font-weight: 600;
  color: var(--muted);
  transition: background .2s ease, color .2s ease;
}
.tb-links a:hover { background: color-mix(in srgb, var(--surface) 55%, transparent); color: var(--ink); }
.tb-links a.on { background: var(--grad-sage); color: #FFFFFF; box-shadow: 0 6px 16px -8px rgba(16, 40, 28, .5); }
.tb-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.tb-user {
  font-size: 12.5px; font-weight: 600; color: var(--muted);
  max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Sun/moon toggle — the portal's control, same 62×32 glass pill with a
   sliding sage knob. Clicking writes an explicit light/dark preference. */
.tb-theme-toggle {
  position: relative; flex: none;
  display: grid; grid-template-columns: 1fr 1fr; align-items: center;
  width: 62px; height: 32px; padding: 0;
  border: 1px solid var(--glass-line); border-radius: 100px;
  background: color-mix(in srgb, var(--surface) 52%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  backdrop-filter: blur(14px) saturate(150%);
  box-shadow: inset 0 1px 0 var(--glass-hi), 0 6px 16px -10px rgba(16, 20, 14, .35);
}
.tb-theme-toggle svg {
  position: relative; z-index: 1;
  width: 15px; height: 15px; margin: 0 auto;
  color: var(--muted);
  transition: color .25s ease;
}
.tb-theme-toggle .tt-knob {
  position: absolute; top: 3px; left: 3px;
  width: 24px; height: 24px; border-radius: 50%;
  background: linear-gradient(145deg, var(--sage) 0%, var(--sage-deep) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 4px 10px -4px rgba(16, 40, 28, .5);
  transition: transform .28s cubic-bezier(.22, 1, .36, 1);
}
.tb-theme-toggle[aria-checked="true"] .tt-knob { transform: translateX(32px); }
.tb-theme-toggle[aria-checked="false"] .tt-sun,
.tb-theme-toggle[aria-checked="true"] .tt-moon { color: #FFFFFF; }
.tb-theme-toggle:hover { border-color: color-mix(in srgb, var(--sage) 45%, var(--glass-line)); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 20px; border-radius: var(--r-md); border: 1px solid transparent;
  font-size: 14px; font-weight: 700; letter-spacing: .01em; white-space: nowrap;
  transition: filter .15s ease, transform .18s cubic-bezier(.22, 1, .36, 1),
              box-shadow .22s ease, border-color .2s ease, background .2s ease;
}
.btn-primary {
  background: linear-gradient(180deg, color-mix(in srgb, var(--pine) 86%, #6FD59C) 0%, var(--pine) 60%);
  color: var(--on-pine);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 10px 24px -12px rgba(12, 15, 11, .5);
}
.btn-primary:hover { filter: brightness(1.18); transform: translateY(-1px); color: var(--on-pine); }
.btn-sage {
  background: var(--grad-sage); color: #FFFFFF;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 10px 24px -12px rgba(16, 40, 28, .55);
}
.btn-sage:hover { filter: brightness(1.12); transform: translateY(-1px); color: #FFFFFF; }
.btn-ghost {
  background: color-mix(in srgb, var(--surface) 50%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  backdrop-filter: blur(14px) saturate(150%);
  border-color: var(--glass-line); color: var(--ink);
  box-shadow: inset 0 1px 0 var(--glass-hi);
}
.btn-ghost:hover { border-color: color-mix(in srgb, var(--sage) 45%, var(--glass-line)); transform: translateY(-1px); color: var(--ink); }
.btn:active { transform: translateY(0) scale(.98); }
.btn-sm { padding: 8px 15px; font-size: 13px; border-radius: var(--r-sm); }
.btn-block { width: 100%; }
.btn[disabled] { opacity: .55; pointer-events: none; }

/* ---------- glass panes ----------
   One recipe: translucent fill, heavy blur, 1px stroke, inner top
   reflection that reads as light hitting the pane. */
.card, .panel, .kpi, .plan, .ds-card, .browse-main, .faq-wrap {
  background: var(--glass);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(150%);
  backdrop-filter: blur(var(--glass-blur)) saturate(150%);
  border: 1px solid var(--glass-line);
  box-shadow: inset 0 1px 0 var(--glass-hi), var(--shadow-md);
  min-width: 0;
}
.card, .panel, .plan, .ds-card, .browse-main, .faq-wrap { border-radius: var(--r-lg); }
.kpi { border-radius: var(--r-md); }
.card, .panel { padding: var(--s-5) var(--s-6); }
/* Panes answer the pointer by lifting slightly closer to you. */
.card, .kpi, .ds-card, .plan {
  transition: box-shadow .24s ease, border-color .2s ease,
              transform .22s cubic-bezier(.22, 1, .36, 1), background .2s ease;
}
.card:hover, .kpi:hover, .ds-card:hover, .plan:hover { transform: translateY(-3px) scale(1.012); }

/* The gradient edge, for the one pane on a page that is asking
   something of you. Used sparingly: if three had it, none would mean
   anything. */
.accent-edge {
  border-color: transparent;
  background-image:
    linear-gradient(var(--surface), var(--surface)),
    linear-gradient(140deg, var(--sage-light) 0%, var(--sage) 45%, var(--sage-deep) 100%);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  box-shadow: var(--shadow-md);
}

/* ---------- hero ----------
   No dark panel: the page canvas IS the art (the portal's move). The
   headline sits directly on the paint, the sample table floats beside
   it as glass. */
.hero { padding: clamp(38px, 6vw, 74px) 0 clamp(30px, 4vw, 48px); }
.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(28px, 4vw, 60px); align-items: center; }
.eyebrow {
  display: inline-block;
  font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--sage); margin-bottom: 14px;
}
.hero h1 {
  font-size: clamp(32px, 4.6vw, 56px); font-weight: 800;
  letter-spacing: -0.045em; margin-bottom: 18px;
}
.hero .lead { color: var(--text); font-size: clamp(15px, 1.35vw, 17.5px); max-width: 52ch; margin-bottom: 26px; }
.hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; }

/* the floating sample pane — glass, with a slow specular sweep */
.sample {
  position: relative; overflow: hidden;
  background: var(--glass-strong);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(150%);
  backdrop-filter: blur(var(--glass-blur)) saturate(150%);
  border: 1px solid var(--glass-line);
  border-radius: var(--r-lg);
  box-shadow: inset 0 1px 0 var(--glass-hi), var(--shadow-lg);
  padding: var(--s-5);
}
.sample::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(115deg, transparent 32%, rgba(255, 255, 255, .13) 46%, transparent 60%);
  background-size: 250% 100%; background-position: 130% 0;
  animation: sheen 7s ease-in-out infinite;
  pointer-events: none;
}
@keyframes sheen {
  0%, 55% { background-position: 130% 0; }
  100%    { background-position: -50% 0; }
}
.sample-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: var(--s-4); }
.sample-head b { font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: var(--muted); }
.live-tag {
  display: inline-block;
  font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ok); background: var(--ok-bg); border-radius: 100px; padding: 4px 11px;
}
.sample-note { font-size: 11.5px; color: var(--muted); margin-top: var(--s-3); }

/* ---------- KPIs — the abstract numbers ----------
   The figure IS the card; the label and cite are captions to it. */
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-4); }
.kpi { padding: var(--s-5); }
.k-label { font-size: .68rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
.k-value {
  font-family: var(--font-display); font-size: clamp(2rem, 2.8vw, 2.9rem); font-weight: 800;
  letter-spacing: -0.05em; color: var(--ink); margin-top: var(--s-2);
  font-variant-numeric: tabular-nums; line-height: 1.02;
}
.k-value.pos { color: var(--ok); }
.k-sub { font-size: .74rem; color: var(--muted); margin-top: 6px; line-height: 1.5; }

/* ---------- sections ---------- */
.section { padding: clamp(44px, 6vw, 76px) 0; }
.section-tight { padding: clamp(26px, 4vw, 44px) 0; }
.section-head { max-width: 720px; margin-bottom: var(--s-6); }
.h2 { font-size: clamp(23px, 2.9vw, 33px); font-weight: 800; letter-spacing: -0.04em; margin-bottom: 12px; }
.lead { color: var(--muted); font-size: 15.5px; }

/* page heading — on the paint, like the hero */
.page-head { padding: clamp(30px, 5vw, 56px) 0 var(--s-5); }
.page-head h1 { font-size: clamp(26px, 3.4vw, 40px); font-weight: 800; letter-spacing: -0.04em; }
.page-head p { color: var(--text); margin-top: 10px; max-width: 66ch; font-size: 15px; }
/* Workspace variant: this is a tool, so the heading is a label, not a
   pitch — smaller, tighter, quieter. */
.app-head { padding: clamp(22px, 3vw, 34px) 0 var(--s-4); }
.app-head h1 { font-size: clamp(20px, 2.2vw, 26px); }
.app-head p { color: var(--muted); font-size: 13.5px; margin-top: 6px; }

/* ---------- feature cards ---------- */
.cards-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4); }
.card h3 { font-size: 17px; margin-bottom: 8px; }
.card p { font-size: 13.5px; color: var(--muted); }
.card-link { display: inline-block; margin-top: var(--s-4); font-size: 13px; font-weight: 700; }
/* Each feature wears a tinted icon chip — sage family only. */
.icon-chip {
  width: 40px; height: 40px; border-radius: var(--r-sm);
  display: grid; place-items: center; margin-bottom: var(--s-4);
  background: color-mix(in srgb, var(--sage-bright) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--sage) 22%, transparent);
  color: var(--sage);
}
.icon-chip svg { width: 19px; height: 19px; }

/* ---------- dataset cards ----------
   The license badge POPS OUT of the card's top edge — the portal's
   pop-out motif (avatar out of the identity card) applied to the one
   thing a buyer checks first. */
.ds-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-6) var(--s-4); }
.ds-card {
  position: relative; margin-top: 18px;
  padding: var(--s-6) var(--s-6) var(--s-5);
  display: flex; flex-direction: column;
}
/* Absolutely positioned, not negatively margined: the card's own 30px
   padding would otherwise swallow the offset and the badge would sit
   flush instead of straddling the edge. */
.ds-card .lic {
  position: absolute; top: -14px; left: var(--s-6);
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 10.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  color: #FFFFFF; background: var(--grad-sage);
  border: 2px solid var(--glass-hi); border-radius: 100px; padding: 6px 14px;
  box-shadow: 0 10px 22px -10px rgba(16, 40, 28, .55);
}
.ds-card h3 { font-size: 18.5px; margin-bottom: 10px; }
.ds-card p.desc {
  font-size: 13.5px; color: var(--muted);
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.ds-meas { display: flex; flex-wrap: wrap; gap: 7px; margin-top: var(--s-4); }
.ds-meas span {
  font-size: 11.5px; font-weight: 700; color: var(--sage);
  background: color-mix(in srgb, var(--sage-bright) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--sage) 18%, transparent);
  border-radius: 100px; padding: 4px 11px;
}
.ds-actions { display: flex; gap: 10px; margin-top: var(--s-5); flex-wrap: wrap; }

/* ---------- provenance receipt — this app's own element ----------
   Sourcing printed on the card in mono, generated from the catalog.
   It is the credibility argument, so it looks like a ledger line. */
.receipt {
  margin-top: var(--s-4); padding: 10px 13px;
  background: color-mix(in srgb, var(--wash) 62%, transparent);
  border: 1px dashed var(--line-strong); border-radius: var(--r-sm);
  font-family: var(--font-mono); font-size: 11px; color: var(--muted); line-height: 1.75;
  overflow-x: auto; white-space: nowrap;
}
.receipt b { color: var(--ink); font-weight: 600; }

/* ---------- browse ----------
   The sidebar takes the portal's FLOATING RAIL: pine-dark glass in
   both themes, sticky with a 14px margin so no hard corner ever
   touches the viewport edge. */
.browse-layout {
  display: grid; grid-template-columns: calc(var(--rail) + 14px) 1fr;
  gap: var(--s-4); align-items: start;
}
.rail {
  position: sticky; top: 14px;
  margin: 0 0 14px 0; width: var(--rail);
  max-height: calc(100vh - 28px);
  max-height: calc(100dvh - 28px);
  overflow-y: auto;
  background: color-mix(in srgb, var(--rail-bg) 82%, transparent);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  border: 1px solid var(--dglass-line);
  border-radius: var(--r-lg);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), var(--shadow-lg);
  padding: var(--s-4) var(--s-3);
  color: var(--dglass-text);
}
/* On the carbon ground the rail has to lift OFF it, not blend into it. */
:root[data-theme="dark"] .rail {
  background: color-mix(in srgb, var(--carbon-lift) 88%, transparent);
}
.rail-title {
  font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--dglass-dim); padding: var(--s-2) var(--s-3) var(--s-3);
}
.acc-group + .acc-group { margin-top: 2px; }
.acc-head {
  width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 8px;
  background: none; border: none; border-radius: var(--r-sm);
  padding: 10px var(--s-3);
  font-family: var(--font-display); font-size: 13px; font-weight: 700; color: var(--dglass-text);
  transition: background .2s ease;
}
.acc-head:hover { background: var(--dglass); }
.acc-head .chev { transition: transform .3s cubic-bezier(.22, 1, .36, 1); color: var(--sage-bright); flex: none; }
.acc-group.open .acc-head .chev { transform: rotate(180deg); }
.acc-body { display: none; padding: 2px 0 var(--s-3); }
.acc-group.open .acc-body { display: block; }
.acc-item {
  display: flex; justify-content: space-between; align-items: center; gap: 8px; width: 100%;
  background: none; border: none; text-align: left;
  padding: 8px 12px 8px 22px; border-radius: var(--r-sm);
  font-size: 12.5px; font-weight: 600; color: var(--dglass-dim);
  transition: background .2s ease, color .2s ease;
}
.acc-item:hover { background: var(--dglass); color: var(--dglass-text); }
/* The active page is one of the few places green is allowed. */
.acc-item.on {
  background: color-mix(in srgb, var(--sage-bright) 16%, transparent);
  color: var(--sage-bright);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sage-bright) 26%, transparent);
}
.acc-item .n { font-family: var(--font-mono); font-size: 10.5px; opacity: .7; flex: none; }

.browse-main { padding: var(--s-5); min-height: 520px; }
.browse-search { position: relative; margin-bottom: var(--s-4); }
.browse-search input {
  width: 100%; padding: 12px 16px 12px 42px; border-radius: 100px;
  border: 1px solid var(--glass-line); font-size: 14px;
  background: color-mix(in srgb, var(--surface) 55%, transparent);
  color: var(--ink);
  box-shadow: inset 0 1px 0 var(--glass-hi);
  transition: border-color .2s ease, background .2s ease;
}
.browse-search input::placeholder { color: var(--muted); }
.browse-search input:focus { outline: none; border-color: var(--sage); background: var(--surface); }
.browse-search svg { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--muted); }

/* ---------- tables on glass ---------- */
.tbl-scroll { overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.data th {
  text-align: left; font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: var(--sage-text);
  padding: 10px 12px 8px; border-bottom: 1px solid var(--line-strong); white-space: nowrap;
}
table.data td { padding: 11px 12px; border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent); }
table.data tr:last-child td { border-bottom: none; }
table.data tbody tr { transition: background .18s ease; }
table.data tbody tr:hover { background: color-mix(in srgb, var(--surface) 40%, transparent); }
table.data td.code-cell { font-family: var(--font-mono); font-weight: 600; }
table.data td.code-cell button { background: none; border: none; color: var(--sage); font: inherit; padding: 0; }
table.data td.code-cell button:hover { color: var(--sage-deep); text-decoration: underline; }
table.data td.num, table.data th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
td.locked { color: var(--line-strong); letter-spacing: 2px; user-select: none; }

.pager { display: flex; gap: 6px; align-items: center; justify-content: center; margin-top: var(--s-5); flex-wrap: wrap; }
.pager button {
  min-width: 34px; padding: 7px 11px; border-radius: var(--r-sm);
  border: 1px solid var(--glass-line);
  background: color-mix(in srgb, var(--surface) 45%, transparent);
  font-size: 13px; font-weight: 700; color: var(--muted);
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.pager button:hover { background: var(--surface); color: var(--ink); }
.pager button.on { background: var(--grad-sage); color: #FFFFFF; border-color: transparent; }
.pager button[disabled] { opacity: .4; pointer-events: none; }
.pager span { color: var(--muted); }

/* the gate note over locked figures */
.gate-note {
  margin-top: var(--s-5); display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-4); flex-wrap: wrap;
  background: color-mix(in srgb, var(--sage-wash) 70%, transparent);
  border: 1px solid color-mix(in srgb, var(--sage) 20%, transparent);
  border-radius: var(--r-md); padding: var(--s-4) var(--s-5);
}
.gate-note p { font-size: 13px; color: var(--text); max-width: 58ch; }
.gate-note b { color: var(--ink); }

/* code detail */
.detail-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: var(--s-4); }
.detail-head h2 { font-family: var(--font-mono); font-size: 23px; letter-spacing: -0.01em; }
.detail-head .sub { color: var(--muted); font-size: 13px; }
.back-link {
  background: none; border: none; color: var(--sage); font-size: 13px; font-weight: 700;
  padding: 0; margin-bottom: var(--s-4); display: inline-flex; align-items: center; gap: 6px;
}
.back-link:hover { color: var(--sage-deep); }
.bench {
  margin: var(--s-4) 0; padding: 12px 16px;
  border-left: 3px solid var(--sage);
  background: color-mix(in srgb, var(--sage-wash) 60%, transparent);
  border-radius: 0 var(--r-sm) var(--r-sm) 0; font-size: 13px; color: var(--text);
}
.bench b { color: var(--ink); }

/* ---------- pricing ---------- */
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4); align-items: stretch; }
.plan { padding: var(--s-6); display: flex; flex-direction: column; margin-top: 14px; }
.plan.featured { position: relative; }
/* The featured plan's badge pops out of its top edge, same motif as the
   dataset license badge. */
.plan.featured::before {
  content: "All access"; position: absolute; top: -14px; left: var(--s-6);
  background: var(--grad-sage); color: #FFFFFF;
  font-size: 10.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  border: 2px solid var(--glass-hi); border-radius: 100px; padding: 5px 14px;
  box-shadow: 0 10px 22px -10px rgba(16, 40, 28, .55);
}
.plan h3 { font-size: 17px; margin-bottom: 4px; }
.plan .fee { margin: var(--s-3) 0 4px; }
.plan .fee b {
  font-family: var(--font-display); font-size: clamp(1.9rem, 2.4vw, 2.4rem); font-weight: 800;
  color: var(--ink); letter-spacing: -0.05em;
}
.plan .fee span { font-size: 13px; color: var(--muted); margin-left: 7px; }
.plan .fee-alt { font-size: 12.5px; color: var(--muted); margin-bottom: 8px; }
.plan p.desc { font-size: 13px; color: var(--muted); margin: 10px 0 var(--s-4); }
.plan ul { list-style: none; margin: 0 0 var(--s-5); display: grid; gap: 9px; }
.plan li { display: flex; gap: 10px; font-size: 13px; color: var(--text); }
.plan li svg { width: 15px; height: 15px; flex: none; margin-top: 3px; color: var(--sage); }
.plan .btn { margin-top: auto; }

/* ---------- FAQ ---------- */
.faq-wrap { max-width: 800px; padding: var(--s-3) var(--s-6); }
.faq details { border-bottom: 1px solid color-mix(in srgb, var(--line) 75%, transparent); }
.faq details:last-child { border-bottom: none; }
.faq summary {
  cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: var(--s-4) 0; font-family: var(--font-display); font-weight: 700; color: var(--ink); font-size: 15px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 21px; color: var(--sage); transition: transform .3s cubic-bezier(.22, 1, .36, 1); flex: none; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .faq-body { padding: 0 0 var(--s-4); font-size: 14px; color: var(--muted); max-width: 66ch; }

/* ---------- auth + account ----------
   The gate is a pine-black aurora field in BOTH themes, with the card
   floating on it as frosted glass and the emblem popping out of the
   card's top edge — a direct port of the portal's sign-in. */
.gate {
  position: relative; flex: 1 0 auto;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 104px 20px 48px;
}
/* Pine-dark in BOTH themes, like the rail and the portal's gate — the
   --dglass-* tokens alone are translucent white, which only reads as
   glass over something already dark, so the card brings its own pine. */
.gate-card {
  position: relative; width: 100%; max-width: 440px; isolation: isolate;
  background: color-mix(in srgb, var(--rail-bg) 84%, transparent);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(150%);
  backdrop-filter: blur(var(--glass-blur)) saturate(150%);
  border: 1px solid var(--dglass-line);
  border-radius: var(--r-lg);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), var(--shadow-lg);
  padding: 60px var(--s-6) var(--s-6);
  color: var(--dglass-text);
  overflow: hidden;
}
/* A glow inside the pane so the card is lit rather than flat. Light, not
   colour, for the same reason the canvas carries none. */
.gate-card::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(62% 48% at 18% 0%, rgba(255, 255, 255, .07) 0%, transparent 70%),
    radial-gradient(54% 42% at 92% 104%, rgba(255, 255, 255, .04) 0%, transparent 72%);
}
:root[data-theme="dark"] .gate-card,
:root[data-theme="dark"] .cta {
  background: color-mix(in srgb, var(--carbon-lift) 90%, transparent);
}
.gate-emblem {
  position: absolute; top: -44px; left: 50%; transform: translateX(-50%);
  width: 88px; height: 88px; border-radius: 24px;
  display: grid; place-items: center;
  background: var(--grad-sage);
  border: 3px solid rgba(255, 255, 255, .18);
  box-shadow: 0 18px 40px -14px rgba(6, 12, 8, .7);
}
.gate-emblem img { width: 52px; height: 52px; }
.gate-card h1 { color: #FFFFFF; font-size: 22px; margin-bottom: 6px; text-align: center; }
.gate-card .sub { font-size: 13.5px; color: var(--dglass-dim); margin-bottom: var(--s-5); text-align: center; }
.gate-card .field label { color: var(--dglass-dim); }
.gate-card .field input {
  background: rgba(255, 255, 255, .07); border-color: var(--dglass-line); color: #FFFFFF;
}
.gate-card .field input::placeholder { color: rgba(233, 239, 230, .45); }
.gate-card .field input:focus { border-color: var(--sage-bright); background: rgba(255, 255, 255, .11); }
.gate-card .btn-ghost { background: rgba(255, 255, 255, .07); border-color: var(--dglass-line); color: #FFFFFF; }
.gate-card .btn-ghost:hover { border-color: var(--sage-bright); color: #FFFFFF; }
.gate-card .divider { color: var(--dglass-dim); }
.gate-card .divider::before, .gate-card .divider::after { background: var(--dglass-line); }
.gate-card .auth-alt { color: var(--dglass-dim); }
.gate-card .auth-alt button { color: var(--sage-bright); }
.gate-legal {
  margin-top: var(--s-5); text-align: center;
  font-size: 11px; letter-spacing: .02em; color: rgba(238, 244, 235, .5);
}

.field { margin-bottom: var(--s-4); }
.field label {
  display: block; font-size: 11px; font-weight: 700; color: var(--sage-text);
  margin-bottom: 6px; letter-spacing: .07em; text-transform: uppercase;
}
.field input {
  width: 100%; padding: 12px 14px; border-radius: var(--r-sm);
  border: 1px solid var(--line-strong); font-size: 14px;
  background: var(--surface); color: var(--ink);
  transition: border-color .2s ease, background .2s ease;
}
.field input:focus { outline: none; border-color: var(--sage); }
.form-msg { font-size: 13px; margin: var(--s-3) 0; padding: 11px 14px; border-radius: var(--r-sm); display: none; }
.form-msg.err { display: block; background: var(--flag-bg); color: var(--flag); }
.form-msg.ok { display: block; background: var(--ok-bg); color: var(--ok); }
.divider { display: flex; align-items: center; gap: 12px; margin: var(--s-4) 0; color: var(--muted); font-size: 12px; }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.auth-alt { text-align: center; font-size: 13px; color: var(--muted); margin-top: var(--s-4); }
.auth-alt button { background: none; border: none; color: var(--sage); font-weight: 700; font-size: 13px; padding: 0; }

.acct-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); align-items: start; }
.panel h2 { font-size: 17px; margin-bottom: 6px; }
.panel .sub { font-size: 13px; color: var(--muted); }
/* The one dot that stays: it encodes subscription state, so it is
   information rather than decoration. */
.status-chip {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  border-radius: 100px; padding: 5px 12px;
}
.status-chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.status-chip.active { background: var(--ok-bg); color: var(--ok); }
.status-chip.none { background: var(--wash-deep); color: var(--muted); }
.status-chip.past_due { background: var(--flag-bg); color: var(--flag); }
.status-chip.canceled { background: var(--wash-deep); color: var(--pine-soft); }
.dl-row {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: var(--s-3) 0; border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  font-size: 13.5px;
}
.dl-row:last-child { border-bottom: none; }
.dl-row .name { font-family: var(--font-mono); font-size: 12.5px; color: var(--ink); }
.dl-row .size { color: var(--muted); font-size: 12px; white-space: nowrap; }
.dev-banner {
  background: color-mix(in srgb, var(--sand) 70%, transparent);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  color: var(--ink); font-size: 12.5px; font-weight: 700;
  text-align: center; padding: 8px 16px;
}

/* ---------- CTA band + footer ---------- */
.cta {
  text-align: center; padding: clamp(38px, 5vw, 60px) var(--s-6);
  background: var(--dglass-strong);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(150%);
  backdrop-filter: blur(var(--glass-blur)) saturate(150%);
  border: 1px solid var(--dglass-line); border-radius: var(--r-lg);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), var(--shadow-lg);
  background-color: color-mix(in srgb, var(--rail-bg) 78%, transparent);
}
.cta h2 { color: #FFFFFF; font-size: clamp(22px, 2.8vw, 31px); margin-bottom: 10px; }
.cta p { color: var(--dglass-dim); margin-bottom: var(--s-5); font-size: 15px; }
.cta .hero-ctas { justify-content: center; }

/* One-line app footer. The marketing footer below it is retired but its
   rules stay for the shared .footer-inner container. */
.app-footer { margin-top: auto; padding: var(--s-6) 0 var(--s-5); }
.app-footer .footer-inner {
  display: flex; justify-content: space-between; align-items: center; gap: var(--s-4);
  flex-wrap: wrap; font-size: 12px; color: var(--muted);
  border-top: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  padding-top: var(--s-4);
}
.app-footer a { color: var(--muted); margin-left: var(--s-4); }
.app-footer a:hover { color: var(--ink); }

.footer { margin-top: auto; padding: clamp(36px, 5vw, 56px) 0 var(--s-6); }
.footer-inner { max-width: var(--container); margin: 0 auto; padding: 0 var(--pad-x); }
.footer-grid { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: var(--s-6); margin-bottom: var(--s-6); }
.footer h4 { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--sage-text); margin-bottom: var(--s-3); }
.footer a { display: block; color: var(--muted); font-size: 13px; padding: 4px 0; }
.footer a:hover { color: var(--ink); }
/* Same pair as the topbar, so the footer can never be the dark mark on a
   dark ground. */
.footer .brand { display: flex; align-items: center; margin-bottom: 14px; }
.footer .brand .lockup { height: 24px; width: auto; display: block; aspect-ratio: 2105 / 312; }
:root[data-theme="dark"] .footer .brand .lockup-ink,
.footer .brand .lockup-cream { display: none; }
:root[data-theme="dark"] .footer .brand .lockup-cream { display: block; }
.footer .fine { font-size: 12px; color: var(--muted); max-width: 46ch; line-height: 1.7; }
.footer-base {
  border-top: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  padding-top: var(--s-4); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-size: 12px; color: var(--muted);
}

/* ---------- reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .8s cubic-bezier(.22, .61, .21, 1), transform .8s cubic-bezier(.22, .61, .21, 1); transition-delay: var(--d, 0s); }
.reveal.in { opacity: 1; transform: none; }

/* ============================================================
   Reduced transparency — glassmorphism is a choice the reader
   must be able to opt out of (NN/g's one hard rule). Same
   layout, same hierarchy, no frosting.
   ============================================================ */
@media (prefers-reduced-transparency: reduce) {
  .card, .panel, .kpi, .plan, .ds-card, .browse-main, .faq-wrap,
  .sample, .rail, .gate-card, .cta, .topbar.scrolled, .tb-theme-toggle, .btn-ghost {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  .card, .panel, .kpi, .plan, .ds-card, .browse-main, .faq-wrap, .sample { background: var(--surface); }
  .rail, .gate-card, .cta { background: var(--rail-bg); }
  .gate-card::before { display: none; }
  .topbar.scrolled { background: var(--page); }
  .orbs { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .orbs, .sample::before { animation: none; }
  .card:hover, .kpi:hover, .ds-card:hover, .plan:hover, .btn:hover { transform: none; }
}

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .hero-grid { grid-template-columns: 1fr; }
  .kpis { grid-template-columns: repeat(2, 1fr); }
  .cards-3 { grid-template-columns: 1fr; }
  .ds-grid { grid-template-columns: 1fr; }
  .plans { grid-template-columns: 1fr; }
  .acct-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  /* The rail unsticks and sits above the table rather than beside it. */
  .browse-layout { grid-template-columns: 1fr; }
  .rail { position: static; width: auto; max-height: none; margin-bottom: var(--s-4); }
  .acc-body { display: block; }
}
@media (max-width: 640px) {
  .tb-links { display: none; }
  .tb-inner { gap: var(--s-3); height: 60px; }
  /* The topbar's own controls shrink rather than wrap — a three-line
     "Open the data" button is what happens otherwise. */
  .tb-actions { gap: 7px; }
  .tb-actions .btn { padding: 8px 12px; font-size: 12.5px; }
  .tb-theme-toggle { width: 54px; height: 30px; }
  .tb-theme-toggle .tt-knob { width: 22px; height: 22px; }
  .tb-theme-toggle[aria-checked="true"] .tt-knob { transform: translateX(26px); }
  .kpis { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .card, .panel, .plan, .ds-card { padding: var(--s-5); }
  .gate { padding-top: 88px; }
}