/* ==========================================================================
   Gemifier — marketing site design system
   Plain CSS. No build step. Light + dark. Mint-blue accent.
   --------------------------------------------------------------------------
   1.  Tokens
   2.  Reset & base
   3.  Layout
   4.  Typography
   5.  Buttons 
   6.  Surfaces (card, panel, chip, badge)
   7.  Navigation
   8.  Footer
   9.  Sections & composites
   10. Code, tables, lists
   11. Interactive (tabs, accordion, toggle)
   12. Illustration + diagram primitives
   13. Motion
   14. Responsive
   ========================================================================== */

/* ==========================================================================
   1. Tokens
   ========================================================================== */

:root {
  color-scheme: light;

  /* --------------------------------------------------------------------
     Palette synced from the org dashboard (Core/gemifier-org-dashboard,
     src/index.css). The OKLCH value beside each hex is the dashboard's own
     token — the hex is that colour resolved to sRGB, so this plain-CSS site
     renders the identical shade without needing colour-space support.

     Brand: emerald green, OKLCH hue 162. #3c9e74 at full strength.

     BOTH MODES USE NEUTRAL GREYS. The dashboard tints its light greys very
     slightly toward the brand hue; that was carried over here and reverted,
     because on a marketing page — which is mostly large flat areas of
     background rather than dense chrome — even .004 chroma reads as a green
     cast over the whole screen rather than as warmth. The lightness values are
     unchanged, so every contrast ratio below is the one that was measured.
     Green now appears only where it means something: actions, links, focus
     and the mark.
     -------------------------------------------------------------------- */

  /* Surfaces. THE PAGE IS NOT WHITE — white is kept for the surfaces that sit
     ON it (cards, panels, dropdowns), so elevation is carried by the colours
     rather than by a 1px line. */
  --bg:            #f5f5f5;  /* oklch(.970 0 0)  dash --background, un-tinted */
  --bg-alt:        #f0f0f0;  /* oklch(.955 0 0)  dash --sidebar               */
  --surface:       #ffffff;  /* oklch(1 0 0)     dash --card                  */
  --surface-2:     #eaeaea;  /* oklch(.938 0 0)  dash --secondary             */
  --surface-3:     #dedede;  /* oklch(.900 0 0)  dash --accent                */
  --border:        #d9d9d9;  /* oklch(.885 0 0)  dash --border                */
  --border-strong: #bebebe;  /* oklch(.800 0 0)  derived                      */

  /* Text */
  --fg:   #0d0d0d;  /* oklch(.160 0 0)  dash --foreground       */
  --fg-2: #4d4d4d;  /* oklch(.420 0 0)  derived body tone        */
  --fg-3: #656565;  /* oklch(.505 0 0)  dash --muted-foreground */

  /* Accent — emerald, hue 162.
     --accent is the FILL (buttons, dots, marks) and carries --accent-ink on
     top of it. --accent-text is the same green a step darker, because it has
     to stay legible on the tinted grounds this site puts it on (chips,
     badges, callouts) and not only on the page: at the fill's own lightness
     it measures 4.19:1 on --surface-2, under the floor. At .48 the worst
     ground on the site is 4.65:1. */
  --accent:        #1b7f58;  /* oklch(.530 .107 162)  dash --primary            */
  --accent-hover:  #0a6c49;  /* oklch(.470 .100 162)                            */
  --accent-ink:    #fafafa;  /* oklch(.985 0 0)       dash --primary-foreground */
  --accent-text:   #016f4b;  /* oklch(.480 .105 162)                            */
  --accent-soft:   #e8f8ef;  /* oklch(.965 .020 162)  eased off the mint        */
  --accent-border: #b2d9c4;  /* oklch(.850 .050 162)                            */
  --accent-glow:   rgba(60, 158, 116, .20);  /* dash --brand #3c9e74            */

  /* Semantic. Off-palette on purpose: they signal. Note that none of them is
     the brand green — green already means "Gemifier" here, and a green status
     chip would read as branding rather than as "good". */
  --ok:      #1f8a4c;  /* dash --status-good     */
  --warn:    #b26a00;  /* dash --status-warning  */
  --warn-bg: #f6ede0;  /* 12% --warn on white    */
  --danger:  #c0392b;  /* dash --status-critical */
  --info:    #2a78d6;  /* dash --chart-3         */

  /* Effects */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .04), 0 1px 3px rgba(0, 0, 0, .05);
  --shadow:    0 2px 4px -1px rgba(0, 0, 0, .04), 0 8px 20px -6px rgba(0, 0, 0, .08);
  --shadow-lg: 0 4px 8px -2px rgba(0, 0, 0, .05), 0 28px 56px -16px rgba(0, 0, 0, .16);
  --dot:       rgba(0, 0, 0, .05);  /* dash --pattern oklch(0 0 0 / 5%) */
  --hairline:  linear-gradient(90deg, transparent, var(--border) 12%, var(--border) 88%, transparent);

  /* Radii */
  --r-xs:   6px;
  --r-sm:   9px;
  --r:      12px;
  --r-lg:   16px;
  --r-xl:   22px;
  --r-full: 999px;

  /* Type */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text",
               "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo,
               Consolas, "Liberation Mono", monospace;

  --t-display: clamp(2.4rem, 1.6rem + 2.7vw, 3.75rem);
  --t-h1:      clamp(2.15rem, 1.5rem + 2.5vw, 3.3rem);
  --t-h2:      clamp(1.75rem, 1.32rem + 1.65vw, 2.55rem);
  --t-h3:      clamp(1.2rem, 1.08rem + .55vw, 1.5rem);
  --t-lede:    clamp(1.03rem, .98rem + .34vw, 1.22rem);

  /* Rhythm */
  --gutter:  clamp(20px, 4vw, 32px);
  --section: clamp(72px, 8.5vw, 126px);
  --max:     1200px;
  --max-prose: 74ch;

  --nav-h: 64px;
  --ease: cubic-bezier(.22, 1, .36, 1);
}

[data-theme="dark"] {
  color-scheme: dark;

  /* --------------------------------------------------------------------
     THE TWO MODES TINT THEIR NEUTRALS DIFFERENTLY, AND THAT IS THE POINT.

     These greys are chroma 0 — pure neutral, no green in them at all. The
     same .006 chroma that vanishes at 97% lightness shouts at 15%: colour is
     far more perceptible against a dark surface, so a "whisper" of green on
     every card, border and label turns the whole screen green. Tinting both
     modes with one number is the mistake — it looks calm in light and like a
     Matrix screensaver in dark.

     So in dark mode green appears only where it means something: actions,
     links, focus rings and the mark. Everything else is grey, and that is
     what lets the green read.
     -------------------------------------------------------------------- */

  --bg:            #0b0b0b;  /* oklch(.150 0 0)  dash --background */
  --bg-alt:        #131313;  /* oklch(.185 0 0)  dash --sidebar    */
  --surface:       #171717;  /* oklch(.205 0 0)  dash --card       */
  --surface-2:     #262626;  /* oklch(.270 0 0)  dash --secondary  */
  --surface-3:     #2e2e2e;  /* oklch(.300 0 0)  dash --accent     */
  --border:        rgba(255, 255, 255, .12);  /* dash --border */
  --border-strong: rgba(255, 255, 255, .20);

  --fg:   #f5f5f5;  /* oklch(.970 0 0)  dash --foreground       */
  --fg-2: #cecece;  /* oklch(.850 0 0)  derived body tone        */
  --fg-3: #a4a4a4;  /* oklch(.720 0 0)  dash --muted-foreground */

  --accent:        #54b489;  /* oklch(.700 .112 162)  dash --primary            */
  --accent-hover:  #75cda3;  /* oklch(.780 .105 162)                            */
  --accent-ink:    #04160d;  /* oklch(.180 .030 162)  dash --primary-foreground */
  --accent-text:   #54b489;  /* 7.75:1 on the page — no darker step needed here */
  --accent-soft:   rgba(84, 180, 137, .12);
  --accent-border: rgba(84, 180, 137, .30);
  --accent-glow:   rgba(84, 180, 137, .22);

  --ok:      #3ec06d;  /* dash --status-good     */
  --warn:    #f0a92e;  /* dash --status-warning  */
  --warn-bg: rgba(240, 169, 46, .12);
  --danger:  #e05a5a;  /* dash --status-critical */
  --info:    #4a90e2;  /* dash --chart-3         */

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .5);
  --shadow:    0 2px 6px rgba(0, 0, 0, .45), 0 12px 28px -10px rgba(0, 0, 0, .6);
  --shadow-lg: 0 8px 16px rgba(0, 0, 0, .45), 0 36px 72px -20px rgba(0, 0, 0, .75);
  --dot:       rgba(255, 255, 255, .03);  /* dash --pattern oklch(1 0 0 / 3%) */
}

/* ==========================================================================
   2. Reset & base
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 24px);
}

body {
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--fg-2);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "cv05" 1, "cv08" 1, "ss03" 1;
  /* Long unbreakable tokens (permission keys, snake_case keys, URLs) must not be
     able to widen a container on small screens. */
  overflow-wrap: break-word;
  overflow-x: hidden;
  transition: background-color .25s var(--ease), color .25s var(--ease);
}

img, svg, video { display: block; max-width: 100%; height: auto; }
svg { flex: none; }

/* An inline <svg> with only a viewBox falls back to 300x150, which silently blows
   out any flex row it sits in. :where() gives this zero specificity, so every real
   icon rule (.itile svg, .btn .i, …) still wins. .illus is sized by its own rule. */
:where(svg:not([width]):not([height]):not(.illus)) { width: 18px; height: 18px; }

a { color: inherit; text-decoration: none; }

button, input, select, textarea { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

::selection { background: var(--accent-glow); color: var(--fg); }

hr {
  border: 0;
  height: 1px;
  background: var(--hairline);
  margin: 0;
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; top: 8px; left: 8px;
  transform: translateY(-200%);
  background: var(--accent); color: var(--accent-ink);
  padding: 10px 18px; border-radius: var(--r-sm);
  font-weight: 600; font-size: .9rem; z-index: 200;
  transition: transform .2s var(--ease);
}
.skip-link:focus { transform: translateY(0); }

/* ==========================================================================
   3. Layout
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: 860px; }
.container--wide   { max-width: 1340px; }

.section { padding-block: var(--section); position: relative; }
.section--tight { padding-block: clamp(52px, 6vw, 84px); }
.section--alt   { background: var(--bg-alt); }
.section--line  { border-top: 1px solid var(--border); }

/* Grid and flex children default to min-width:auto (= min-content), which lets a
   wide child — a code block, a long token, a table — push its track past the
   viewport instead of shrinking. Reset it so every track can actually collapse.
   Scoped to grid/column-flow containers — deliberately NOT .row, whose nowrap
   buttons must keep their intrinsic width and wrap instead of clipping. */
.grid > *, .split > *, .frow > *, .steps > *,
.stack > *, .stack-sm > *, .stack-lg > * { min-width: 0; }

.grid { display: grid; gap: var(--gutter); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-auto { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid-auto-sm { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

.split {
  display: grid;
  gap: clamp(32px, 5vw, 72px);
  grid-template-columns: 1fr 1fr;
  align-items: center;
}
.split--wide-left  { grid-template-columns: 1.15fr .85fr; }
.split--wide-right { grid-template-columns: .85fr 1.15fr; }
.split--top { align-items: start; }

.stack   { display: flex; flex-direction: column; gap: 16px; }
.stack-sm { display: flex; flex-direction: column; gap: 10px; }
.stack-lg { display: flex; flex-direction: column; gap: 28px; }
.row     { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.row--between { justify-content: space-between; }
.row--center  { justify-content: center; }

.center { text-align: center; }
.center-x { margin-inline: auto; }
.measure { max-width: var(--max-prose); }
.measure-sm { max-width: 56ch; }

/* Ambient background: dot grid + soft mint bloom */
.bg-dots { position: relative; }
.bg-dots::before {
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(var(--dot) 1px, transparent 1px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(ellipse 90% 65% at 50% 0%, #000 30%, transparent 78%);
  mask-image: radial-gradient(ellipse 90% 65% at 50% 0%, #000 30%, transparent 78%);
  pointer-events: none;
  z-index: 0;
}
.bg-bloom { position: relative; overflow: hidden; }
.bg-bloom::after {
  content: "";
  position: absolute;
  width: 780px; height: 780px;
  top: -420px; right: -220px;
  background: radial-gradient(circle, var(--accent-glow), transparent 62%);
  filter: blur(20px);
  pointer-events: none;
  z-index: 0;
}
.bg-dots > *, .bg-bloom > * { position: relative; z-index: 1; }

/* ==========================================================================
   4. Typography
   ========================================================================== */

h1, h2, h3, h4, h5 {
  color: var(--fg);
  font-weight: 620;
  line-height: 1.15;
  letter-spacing: -.022em;
  text-wrap: balance;
}

.display {
  font-size: var(--t-display);
  line-height: 1.03;
  letter-spacing: -.035em;
  font-weight: 660;
}
h1, .h1 { font-size: var(--t-h1); letter-spacing: -.03em; }
h2, .h2 { font-size: var(--t-h2); letter-spacing: -.026em; }
h3, .h3 { font-size: var(--t-h3); letter-spacing: -.018em; }
h4, .h4 { font-size: 1.0625rem; letter-spacing: -.012em; font-weight: 615; }

p { text-wrap: pretty; }
p + p { margin-top: 1em; }

.lede {
  font-size: var(--t-lede);
  line-height: 1.6;
  color: var(--fg-2);
}
.small { font-size: .875rem; line-height: 1.6; }
.tiny  { font-size: .8125rem; line-height: 1.55; }
.muted { color: var(--fg-3); }
/* Keeps a hyphenated compound from breaking across lines. "real-" on one line
   and "time" on the next reads as a typo in display type. */
.nb { white-space: nowrap; }
.strong-fg { color: var(--fg); }
.mono {
  font-family: var(--font-mono);
  font-size: .875em;
  font-feature-settings: "zero" 1;
  /* `anywhere` (unlike break-word) also shrinks min-content, so a long key cannot
     force a grid track wider than its viewport. */
  overflow-wrap: anywhere;
}
.nums { font-variant-numeric: tabular-nums; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-mono);
  font-size: clamp(.86rem, .62rem + .8vw, 1.08rem);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent-text);
  max-width: 100%;
}
.eyebrow::before {
  content: "";
  flex: none;
  width: 9px; height: 9px;
  border-radius: 3px;
  background: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
}
.eyebrow--plain::before { display: none; }


.accent-text { color: var(--accent-text); }

/* Inline mint highlight behind a key phrase in a heading */
.mark {
  background-image: linear-gradient(90deg, var(--accent-glow), var(--accent-soft));
  background-repeat: no-repeat;
  background-size: 100% .30em;
  background-position: 0 86%;
  border-radius: 2px;
  padding-inline: .04em;
}

.section-head { max-width: 720px; margin-bottom: clamp(36px, 4.5vw, 60px); }
.section-head > .eyebrow { margin-bottom: 16px; }
.section-head > h2 { margin-bottom: 16px; }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .eyebrow { justify-content: center; }

/* ==========================================================================
   5. Buttons
   ========================================================================== */

.btn {
  --btn-bg: transparent;
  --btn-fg: var(--fg);
  --btn-bd: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 18px;
  height: 44px;
  border-radius: var(--r-sm);
  border: 1px solid var(--btn-bd);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: .9375rem;
  font-weight: 560;
  letter-spacing: -.006em;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition: background-color .18s var(--ease), border-color .18s var(--ease),
              color .18s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease);
}
.btn:active { transform: translateY(1px); }

.btn--primary {
  --btn-bg: var(--accent);
  --btn-fg: var(--accent-ink);
  --btn-bd: var(--accent);
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 6px 20px -8px var(--accent-glow);
}
.btn--primary:hover { --btn-bg: var(--accent-hover); --btn-bd: var(--accent-hover); }

.btn--outline { --btn-bd: var(--border-strong); --btn-fg: var(--fg); }
.btn--outline:hover { --btn-bd: var(--accent); --btn-fg: var(--accent-text); background: var(--accent-soft); }

.btn--ghost { --btn-fg: var(--fg-2); }
.btn--ghost:hover { --btn-fg: var(--fg); background: var(--surface-2); }

.btn--sm { height: 36px; padding: 0 13px; font-size: .875rem; border-radius: var(--r-xs); }
.btn--lg { height: 50px; padding: 0 26px; font-size: 1rem; }
.btn--block { width: 100%; }

.btn .i { width: 16px; height: 16px; }

/* Text link with sliding arrow */
.link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--accent-text);
  font-weight: 540;
  font-size: .9375rem;
  width: fit-content;
}
.link .i { width: 14px; height: 14px; transition: transform .2s var(--ease); }
.link:hover .i { transform: translateX(3px); }
.link--fg { color: var(--fg); }
.link--fg:hover { color: var(--accent-text); }

.link-underline {
  color: var(--accent-text);
  text-decoration: underline;
  text-decoration-color: var(--accent-border);
  text-underline-offset: 3px;
  transition: text-decoration-color .18s;
}
.link-underline:hover { text-decoration-color: var(--accent); }

/* ==========================================================================
   6. Surfaces
   ========================================================================== */

.card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: clamp(20px, 2.4vw, 28px);
  transition: border-color .22s var(--ease), transform .22s var(--ease),
              box-shadow .22s var(--ease), background-color .22s var(--ease);
}
.card--flat { background: transparent; }
.card--fill { background: var(--surface-2); border-color: transparent; }
.card--pad-lg { padding: clamp(26px, 3.2vw, 40px); }
.card--pad-sm { padding: 18px; }

a.card, .card--hover { cursor: pointer; }
a.card:hover, .card--hover:hover {
  border-color: var(--accent-border);
  transform: translateY(-3px);
  box-shadow: var(--shadow);
}

/* Cursor spotlight (JS sets --mx/--my) */
.card--spot::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 0%), var(--accent-soft), transparent 62%);
  opacity: 0;
  transition: opacity .3s var(--ease);
  pointer-events: none;
}
.card--spot:hover::before { opacity: 1; }
.card--spot > * { position: relative; }

.card__title { color: var(--fg); font-size: 1.0625rem; font-weight: 615; letter-spacing: -.012em; }
.card__body  { font-size: .9375rem; color: var(--fg-2); line-height: 1.62; }

/* Panel — a heavier framed container for diagrams/demos */
.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.panel__bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
  font-family: var(--font-mono);
  font-size: .75rem;
  color: var(--fg-3);
  letter-spacing: .02em;
}
.panel__dots { display: flex; gap: 6px; }
.panel__dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--border-strong); }

/* Titled variant. On the homepage the panel is the first thing a visitor looks at, so its bar
   has to say what the diagram is rather than imitate a terminal window. No traffic lights, and
   sans rather than mono, because a window chrome pastiche reads as "this is for developers". */
.panel__bar--label {
  font-family: var(--font-sans);
  font-size: .8125rem;
  letter-spacing: -.005em;
  color: var(--fg-2);
  padding: 13px 16px;
}
.panel__bar--label > b {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-weight: 600;
  color: var(--fg-2);
}
.panel__bar--label > b::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 2px;
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
  flex: none;
}
.panel__body { padding: clamp(18px, 2.4vw, 28px); }

/* Icon tile */
.itile {
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  flex: none;
  border-radius: 11px;
  background: var(--accent-soft);
  border: 1px solid var(--accent-border);
  color: var(--accent-text);
}
.itile svg { width: 20px; height: 20px; }
.itile--lg { width: 52px; height: 52px; border-radius: 14px; }
.itile--lg svg { width: 24px; height: 24px; }
.itile--plain { background: var(--surface-2); border-color: var(--border); color: var(--fg-2); }

/* Chips & badges */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 13px;
  border-radius: var(--r-full);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--fg-2);
  font-size: .8125rem;
  font-weight: 500;
  white-space: nowrap;
  transition: border-color .18s var(--ease), color .18s var(--ease), background-color .18s var(--ease);
}
a.chip:hover { border-color: var(--accent-border); color: var(--accent-text); background: var(--accent-soft); }
.chip--accent { background: var(--accent-soft); border-color: var(--accent-border); color: var(--accent-text); }
.chip svg { width: 14px; height: 14px; }
.chip .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex: none; }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border-radius: var(--r-xs);
  font-family: var(--font-mono);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--fg-3);
}
.badge--accent { background: var(--accent-soft); border-color: var(--accent-border); color: var(--accent-text); }
.badge--warn { background: var(--warn-bg); border-color: transparent; color: var(--warn); }
.badge--live { background: var(--accent-soft); border-color: var(--accent-border); color: var(--accent-text); }
.badge--live .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); animation: pulse 2s infinite; }

@keyframes pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 var(--accent-glow); }
  50%      { opacity: .65; box-shadow: 0 0 0 4px transparent; }
}

/* Stat */
.stat__value {
  font-size: clamp(2rem, 1.4rem + 2vw, 3rem);
  font-weight: 640;
  letter-spacing: -.035em;
  color: var(--fg);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.stat__label { font-size: .875rem; color: var(--fg-3); margin-top: 10px; }

/* Callout */
.callout {
  border: 1px solid var(--accent-border);
  background: var(--accent-soft);
  border-radius: var(--r);
  padding: 18px 20px;
  font-size: .9375rem;
  color: var(--fg-2);
  display: flex;
  gap: 13px;
}
.callout svg { width: 18px; height: 18px; color: var(--accent-text); margin-top: 2px; }
.callout strong { color: var(--fg); font-weight: 600; }
.callout--plain { border-color: var(--border); background: var(--surface-2); }
.callout--plain svg { color: var(--fg-3); }

/* ==========================================================================
   7. Navigation
   ========================================================================== */

.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--nav-h);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s var(--ease), background-color .25s var(--ease);
}
.nav.is-stuck { border-bottom-color: var(--border); }

/* Cookie preferences. A blocking dialog the first time, because a choice is
   required before anything third-party loads. "Reject all" is one click and the
   same size as "Accept all", and the site is fully usable after either, so the
   choice stays a free one. Re-openable from the footer once answered. */
.consent-overlay {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-items: end center;
  padding: clamp(12px, 3vw, 32px);
  background: color-mix(in srgb, var(--bg) 62%, transparent);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
@media (min-width: 700px) { .consent-overlay { place-items: center; } }
body.consent-open { overflow: hidden; }

.consent {
  width: min(560px, 100%);
  max-height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: clamp(20px, 3vw, 28px);
  border: 1px solid var(--border-strong);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .22), 0 2px 10px rgba(0, 0, 0, .08);
}
[data-theme="dark"] .consent { box-shadow: 0 24px 60px rgba(0, 0, 0, .6); }
.consent__title { font-size: 1.0625rem; margin: 0 0 10px; }
.consent__text { font-size: .875rem; line-height: 1.6; color: var(--fg-2); margin: 0 0 18px; }
.consent__text a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 2px; }

.consent__actions { display: flex; gap: 10px; flex-wrap: wrap; }
.consent__actions .btn { flex: 1 1 auto; justify-content: center; white-space: nowrap; }
.consent__actions[hidden] { display: none; }

.consent__rows { display: grid; gap: 4px; margin: 0 0 18px; }
.consent__rows[hidden] { display: none; }

/* A real checkbox underneath, so it is keyboard reachable and announced. */
.switch {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding: 13px 2px;
  border-top: 1px solid var(--border);
  cursor: pointer;
}
.switch:has(input[disabled]) { cursor: default; }
.switch input {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  overflow: hidden; white-space: nowrap;
}
.switch__track {
  position: relative;
  flex: none;
  width: 38px; height: 22px;
  margin-top: 2px;
  border-radius: 999px;
  background: var(--surface-3);
  border: 1px solid var(--border-strong);
  transition: background-color .18s var(--ease), border-color .18s var(--ease);
}
.switch__knob {
  position: absolute;
  top: 2px; left: 2px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .25);
  transition: transform .18s var(--ease);
}
.switch input:checked + .switch__track { background: var(--accent); border-color: var(--accent); }
.switch input:checked + .switch__track .switch__knob { transform: translateX(16px); }
.switch input:focus-visible + .switch__track {
  outline: 2px solid var(--accent-text);
  outline-offset: 2px;
}
.switch input[disabled] + .switch__track { opacity: .62; }
.switch__text { font-size: .8125rem; line-height: 1.55; color: var(--fg-3); }
.switch__text b { display: block; font-size: .875rem; color: var(--fg); font-weight: 600; margin-bottom: 2px; }
.switch__always {
  font-size: .6875rem;
  font-weight: 500;
  color: var(--fg-3);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 1px 7px;
  margin-left: 6px;
  vertical-align: 1px;
}
@media (prefers-reduced-motion: reduce) {
  .switch__track, .switch__knob { transition: none; }
}

/* Developer docs bar. Sticks directly under the nav on the developers page, so
   the link to the full reference stays reachable however far you have scrolled. */
.docsbar {
  position: sticky;
  top: var(--nav-h);
  /* Below the mobile drawer (99), which fills the viewport under the nav. At the
     same level the docsbar wins on DOM order and swallows taps on the menu. */
  z-index: 98;
  background: color-mix(in srgb, var(--surface-2) 92%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--border);
}
.docsbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 52px;
  padding-block: 8px;
}
.docsbar__label {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  font-size: .875rem;
  color: var(--fg-2);
}
.docsbar__label svg { width: 17px; height: 17px; flex: none; color: var(--accent-text); }
.docsbar__label b { color: var(--fg); font-weight: 600; }
.docsbar .btn { flex: none; }
/* Two stacked sticky bars, so in-page anchors have to clear both. */
html:has(.docsbar) { scroll-padding-top: calc(var(--nav-h) + 76px); }
@media (max-width: 620px) {
  .docsbar__inner { min-height: 46px; }
  .docsbar__sub { display: none; }
}

.nav__inner {
  height: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 640;
  font-size: 1.0625rem;
  letter-spacing: -.028em;
  color: var(--fg);
  flex: none;
  margin-right: 6px;
}
/* The mark is 813x943 — taller than it is wide — so height drives and width
   follows it. A square box would squash it.

   currentColor rather than the supplied #6FD4CB baked in: that mint measures
   1.61:1 on the light page and effectively disappears there, while reading at
   11.21:1 on the dark one. Taking --accent instead puts the mark at 4.57:1
   light and 7.75:1 dark, and keeps it the same green as every other branded
   element. To pin it back to the supplied colour, replace the color line with
   `color: #6FD4CB`. The wordmark beside it stays --fg, set on .brand. */
.brand svg { height: 26px; width: auto; color: var(--accent); }

.nav__menu {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: 8px;
}
.nav__spacer { flex: 1; }

.nav__item { position: relative; }

.nav__link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 12px;
  border-radius: var(--r-xs);
  font-size: .9063rem;
  font-weight: 510;
  color: var(--fg-2);
  background: none;
  border: 0;
  cursor: pointer;
  transition: color .16s var(--ease), background-color .16s var(--ease);
}
.nav__link:hover, .nav__item:hover > .nav__link,
.nav__item.is-open > .nav__link { color: var(--fg); background: var(--surface-2); }
/* ------------------------------------------------------------ you are here
   Three levels have to agree, or the reader can see the highlight without
   being able to tell what it belongs to:

     the dropdown ENTRY for the page itself   -> tinted panel row + green label
     its top-level TRIGGER ("Industries")     -> .is-current, set by site.js,
                                                 because the trigger is not
                                                 itself the current page and
                                                 must not claim aria-current
     a top-level link that IS the page        -> aria-current, straight from
                                                 the markup

   The trigger keeps a underline rather than only a colour change: on a row of
   nav items, one item being slightly greener is easy to miss, and colour alone
   is not a safe signal for a colour-blind reader either. */
.nav__link[aria-current="page"],
.nav__item.is-current > .nav__link { color: var(--accent-text); }

.nav__link[aria-current="page"]::after,
.nav__item.is-current > .nav__link::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 2px;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
}
.nav__link { position: relative; }

/* The entry for the page you are on. Tinted rather than merely coloured, so it
   reads as a selected row in the panel instead of as a link that happens to be
   a different colour. */
.nav__entry[aria-current="page"] { background: var(--accent-soft); }
.nav__entry[aria-current="page"] b { color: var(--accent-text); }
.nav__entry[aria-current="page"]::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 2px;
  border-radius: 0 2px 2px 0;
  background: var(--accent);
}
.nav__entry { position: relative; }

/* Drawer: same three levels, same reasoning. The left border is already the
   drawer's own idiom for a link, so being-here just fills it in. */
.drawer__list a[aria-current="page"] {
  color: var(--accent-text);
  border-left-color: var(--accent);
  background: var(--accent-soft);
}
.drawer__group.is-current > .drawer__toggle { color: var(--accent-text); }
.nav__link .caret { width: 11px; height: 11px; opacity: .6; transition: transform .2s var(--ease); }
.nav__item:hover .caret, .nav__item.is-open .caret,
.nav__link[aria-expanded="true"] .caret { transform: rotate(180deg); }

/* Dropdown */
.nav__panel {
  position: absolute;
  top: calc(100% + 10px);
  left: -8px;
  min-width: 300px;
  padding: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .18s var(--ease), transform .18s var(--ease), visibility .18s;
}
/* .is-open is set by JS on pointer:coarse devices, where there is no hover to
   open the panel with. See the desktop-menus block in site.js. */
.nav__item:hover > .nav__panel,
.nav__item.is-open > .nav__panel,
.nav__item:focus-within > .nav__panel { opacity: 1; visibility: visible; transform: translateY(0); }
.nav__panel--2col { min-width: 560px; display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.nav__panel::before {
  content: "";
  position: absolute; top: -10px; left: 0; right: 0; height: 10px;
}

.nav__entry {
  display: flex;
  gap: 11px;
  padding: 9px 11px;
  border-radius: var(--r-sm);
  transition: background-color .15s var(--ease);
}
.nav__entry:hover { background: var(--surface-2); }
.nav__entry svg { width: 17px; height: 17px; color: var(--accent-text); flex: none; margin-top: 3px; }
.nav__entry b { display: block; color: var(--fg); font-size: .875rem; font-weight: 580; line-height: 1.4; }
.nav__entry span { display: block; color: var(--fg-3); font-size: .8125rem; line-height: 1.45; margin-top: 1px; }

.nav__panel-foot {
  grid-column: 1 / -1;
  margin-top: 4px;
  padding: 12px 11px 6px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.nav__actions { display: flex; align-items: center; gap: 8px; flex: none; }

.theme-toggle {
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  border-radius: var(--r-xs);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--fg-2);
  cursor: pointer;
  transition: color .16s, border-color .16s, background-color .16s;
}
.theme-toggle:hover { color: var(--fg); border-color: var(--border-strong); }
.theme-toggle svg { width: 17px; height: 17px; }
.theme-toggle .moon { display: none; }
[data-theme="dark"] .theme-toggle .sun  { display: none; }
[data-theme="dark"] .theme-toggle .moon { display: block; }

.nav__burger {
  display: none;
  place-items: center;
  width: 38px; height: 38px;
  border-radius: var(--r-xs);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--fg);
  cursor: pointer;
}
.nav__burger svg { width: 18px; height: 18px; }

/* Mobile drawer */
.drawer {
  position: fixed;
  inset: var(--nav-h) 0 0;
  z-index: 99;
  background: var(--bg);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 20px var(--gutter) 48px;
  /* Closed state must never extend past the viewport: a translateX(100%) on a
     position:fixed panel is not clipped by overflow-x on <body>, and silently
     widens the document on small screens. Fade + a short vertical slide instead. */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: opacity .22s var(--ease), transform .28s var(--ease), visibility .28s;
}
.drawer.is-open { opacity: 1; visibility: visible; transform: none; }

.drawer__group { border-bottom: 1px solid var(--border); }
.drawer__toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 2px;
  background: none; border: 0;
  color: var(--fg);
  font-size: 1rem; font-weight: 570;
  cursor: pointer;
  text-align: left;
}
.drawer__toggle .caret { width: 15px; height: 15px; color: var(--fg-3); transition: transform .22s var(--ease); }
.drawer__toggle[aria-expanded="true"] .caret { transform: rotate(180deg); }
.drawer__list {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .28s var(--ease);
}
.drawer__toggle[aria-expanded="true"] + .drawer__list { grid-template-rows: 1fr; }
.drawer__list > div { overflow: hidden; }
.drawer__list a {
  display: block;
  padding: 10px 2px 10px 14px;
  font-size: .9375rem;
  color: var(--fg-2);
  border-left: 2px solid var(--border);
}
.drawer__list a:hover { color: var(--accent-text); border-left-color: var(--accent); }
.drawer__list > div > :last-child { margin-bottom: 14px; }
.drawer__cta { margin-top: 26px; display: grid; gap: 10px; }

body.no-scroll { overflow: hidden; }

/* ==========================================================================
   8. Footer
   ========================================================================== */

.footer {
  border-top: 1px solid var(--border);
  background: var(--bg-alt);
  padding-block: clamp(52px, 6vw, 76px) 32px;
}
.footer__grid {
  display: grid;
  /* Five link columns now that Industries has its own, up from four. The brand
     column gives up the width for it: 1.6fr beside five 1fr columns leaves each
     too narrow for a two-word label to sit on one line. */
  grid-template-columns: 1.2fr repeat(5, 1fr);
  gap: 40px var(--gutter);
}
.footer__brand { max-width: 300px; }
.footer .footer__head {
  font-size: .75rem;
  font-family: var(--font-mono);
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin-bottom: 15px;
}
.footer ul { list-style: none; padding: 0; display: grid; gap: 9px; }
.footer li a { font-size: .875rem; color: var(--fg-2); transition: color .15s; }
.footer li a:hover { color: var(--accent-text); }
.footer__bottom {
  margin-top: clamp(40px, 5vw, 60px);
  padding-top: 24px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  gap: 16px 26px;
  align-items: center;
  justify-content: space-between;
  font-size: .8125rem;
  color: var(--fg-3);
}
.footer__legal { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.footer__legal a:hover { color: var(--accent-text); }

/* Social links. Used in the footer brand column and at the foot of the drawer. */
.social { display: flex; flex-wrap: wrap; gap: 10px; }
.social a {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--fg-2);
  transition: color .15s, background .15s, border-color .15s;
}
.social a:hover {
  color: var(--accent-text);
  background: var(--accent-soft);
  border-color: var(--accent-border);
}
.social svg { width: 17px; height: 17px; display: block; }

/* ==========================================================================
   9. Sections & composites
   ========================================================================== */

/* Page hero (interior pages) */
.phero {
  padding-block: clamp(58px, 7vw, 96px) clamp(40px, 5vw, 64px);
  border-bottom: 1px solid var(--border);
}
.phero__inner { max-width: 780px; }
.phero .eyebrow { margin-bottom: 18px; }
.phero h1 { margin-bottom: 20px; }
.phero .lede { max-width: 62ch; }
.phero__actions { margin-top: 30px; }

/* Breadcrumbs */
.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: .8125rem;
  color: var(--fg-3);
  margin-bottom: 22px;
}
.crumbs a:hover { color: var(--accent-text); }
.crumbs svg { width: 12px; height: 12px; opacity: .5; }

/* Numbered steps */
.steps { counter-reset: step; display: grid; gap: 2px; }
.step {
  position: relative;
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 20px;
  padding: 26px 0;
  border-top: 1px solid var(--border);
}
.step:last-child { border-bottom: 1px solid var(--border); }
.step__num {
  counter-increment: step;
  display: grid; place-items: center;
  width: 34px; height: 34px;
  border-radius: 10px;
  background: var(--accent-soft);
  border: 1px solid var(--accent-border);
  color: var(--accent-text);
  font-family: var(--font-mono);
  font-size: .8125rem;
  font-weight: 600;
}
.step__num::before { content: counter(step, decimal-leading-zero); }
.step h3 { margin-bottom: 8px; }
.step__body { font-size: .9375rem; }

/* Feature list with mint checks */
.checks { list-style: none; padding: 0; display: grid; gap: 11px; }
.checks li {
  position: relative;
  padding-left: 29px;
  font-size: .9375rem;
  color: var(--fg-2);
  line-height: 1.55;
}
.checks li > p { margin-top: .35em; }
.checks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .18em;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--accent-soft);
  border: 1px solid var(--accent-border);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2312bfa6' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-size: 11px;
  background-repeat: no-repeat;
  background-position: center;
}
[data-theme="dark"] .checks li::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232fe0c2' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
.checks--tight li { font-size: .875rem; }
.checks--2col { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px 24px; }

/* Bare bullet list (no checks) */
.bullets { list-style: none; padding: 0; display: grid; gap: 9px; }
.bullets li {
  position: relative;
  padding-left: 17px;
  font-size: .9375rem;
  color: var(--fg-2);
}
.bullets li::before {
  content: "";
  position: absolute; left: 0; top: .62em;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accent);
}

/* CTA band */
.cta-band {
  position: relative;
  border-radius: var(--r-xl);
  border: 1px solid var(--border);
  background: var(--surface);
  padding: clamp(36px, 5vw, 64px);
  overflow: hidden;
  text-align: center;
}
.cta-band::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(600px circle at 50% -30%, var(--accent-glow), transparent 65%),
    radial-gradient(var(--dot) 1px, transparent 1px);
  background-size: auto, 22px 22px;
  pointer-events: none;
}
.cta-band > * { position: relative; }
.cta-band h2 { margin-bottom: 14px; }
.cta-band .lede { margin-inline: auto; max-width: 54ch; margin-bottom: 30px; }

/* Logo strip */
.logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(28px, 5vw, 64px);
}
.logos > * {
  color: var(--fg-3);
  opacity: .75;
  font-weight: 620;
  font-size: 1.0625rem;
  letter-spacing: -.02em;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  filter: grayscale(1);
  transition: opacity .2s, filter .2s;
}
.logos > *:hover { opacity: 1; filter: grayscale(0); }
.logos svg { width: 22px; height: 22px; }

/* Split feature row (alternating) */
.frow { display: grid; gap: clamp(30px, 5vw, 70px); grid-template-columns: 1fr 1fr; align-items: center; }
.frow + .frow { margin-top: clamp(56px, 7vw, 104px); }
.frow:nth-child(even) .frow__media { order: -1; }

/* Comparison / spec table */
.spec {
  width: 100%;
  border-collapse: collapse;
  font-size: .9063rem;
}
.spec th, .spec td {
  text-align: left;
  padding: 13px 16px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.spec thead th {
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--fg-3);
  font-weight: 500;
  background: var(--surface-2);
  border-bottom-color: var(--border-strong);
}
.spec tbody th { color: var(--fg); font-weight: 570; }
.spec tbody tr:hover td, .spec tbody tr:hover th { background: var(--surface-2); }
.spec td .mono { color: var(--accent-text); }
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  -webkit-overflow-scrolling: touch;
}
.table-wrap .spec tr:last-child td, .table-wrap .spec tr:last-child th { border-bottom: 0; }

/* Quote */
.quote {
  border-left: 2px solid var(--accent);
  padding-left: 24px;
  font-size: clamp(1.1rem, 1rem + .6vw, 1.4rem);
  line-height: 1.5;
  color: var(--fg);
  letter-spacing: -.018em;
  text-wrap: pretty;
}
.quote__by { margin-top: 18px; font-size: .875rem; color: var(--fg-3); letter-spacing: 0; }

/* Contact form failure notice. Only shown when a send genuinely failed. */
.form-error {
  margin-top: 18px;
  padding: 11px 14px;
  border: 1px solid var(--danger);
  border-radius: var(--r-sm);
  color: var(--danger);
  font-size: .875rem;
  line-height: 1.55;
}
.form-error a { color: inherit; }
.btn[disabled] { opacity: .6; pointer-events: none; }

/* Placeholder note (for {stat} style content) */
.ph {
  font-family: var(--font-mono);
  font-size: .92em;
  color: var(--accent-text);
  background: var(--accent-soft);
  border: 1px dashed var(--accent-border);
  border-radius: var(--r-xs);
  padding: 0 5px;
}

/* ==========================================================================
   10. Code, tables, lists
   ========================================================================== */

.code {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
}
[data-theme="dark"] .code { background: #101010; }  /* neutral, one step under --surface */
.code__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
}
[data-theme="dark"] .code__head { background: rgba(255, 255, 255, .022); }
.code__name {
  font-family: var(--font-mono);
  font-size: .75rem;
  color: var(--fg-3);
  letter-spacing: .02em;
  display: inline-flex; align-items: center; gap: 8px;
}
.code__name .m { color: var(--accent-text); font-weight: 600; }
.code pre {
  margin: 0;
  padding: 18px;
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: .8125rem;
  line-height: 1.75;
  color: var(--fg-2);
  tab-size: 2;
}
.code pre::-webkit-scrollbar { height: 8px; }
.code pre::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 4px; }

.tok-key { color: var(--accent-text); }
.tok-str { color: var(--fg); }
.tok-num { color: var(--info); }
.tok-bool{ color: var(--warn); }
.tok-com { color: var(--fg-3); font-style: italic; }
.tok-mth { color: var(--accent-text); font-weight: 600; }
.tok-pun { color: var(--fg-3); }

.copy-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: var(--r-xs);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--fg-3);
  font-size: .75rem;
  font-weight: 500;
  cursor: pointer;
  transition: color .15s, border-color .15s;
}
.copy-btn:hover { color: var(--accent-text); border-color: var(--accent-border); }
.copy-btn svg { width: 13px; height: 13px; }
.copy-btn.is-done { color: var(--accent-text); border-color: var(--accent-border); }

code:not(pre code) {
  font-family: var(--font-mono);
  font-size: .86em;
  padding: 2px 6px;
  border-radius: var(--r-xs);
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--fg);
  overflow-wrap: anywhere;
}

/* Prose (legal / blog) */
.prose { max-width: var(--max-prose); font-size: 1rem; line-height: 1.75; }
.prose h2 { margin-top: 2.4em; margin-bottom: .6em; font-size: 1.4rem; }
.prose h3 { margin-top: 1.8em; margin-bottom: .5em; font-size: 1.1rem; }
.prose p, .prose ul, .prose ol { margin-bottom: 1.1em; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li { margin-bottom: .45em; }
.prose a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; }
.prose > :first-child { margin-top: 0; }

/* ==========================================================================
   11. Interactive
   ========================================================================== */

/* Tabs */
.tabs__list {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r);
  width: fit-content;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs__list::-webkit-scrollbar { display: none; }
.tab {
  padding: 8px 15px;
  border: 0;
  border-radius: var(--r-xs);
  background: transparent;
  color: var(--fg-3);
  font-size: .875rem;
  font-weight: 540;
  cursor: pointer;
  white-space: nowrap;
  transition: color .16s, background-color .16s, box-shadow .16s;
}
.tab:hover { color: var(--fg); }
.tab[aria-selected="true"] {
  background: var(--surface);
  color: var(--fg);
  box-shadow: var(--shadow-sm);
}
.tabs__panel { margin-top: 24px; }
.tabs__panel[hidden] { display: none; }

/* Accordion */
.acc { border-top: 1px solid var(--border); }
.acc__item { border-bottom: 1px solid var(--border); }
.acc__btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 21px 4px;
  background: none;
  border: 0;
  text-align: left;
  color: var(--fg);
  font-size: 1rem;
  font-weight: 555;
  letter-spacing: -.012em;
  cursor: pointer;
  transition: color .16s;
}
.acc__btn:hover { color: var(--accent-text); }
.acc__icon {
  position: relative;
  width: 16px; height: 16px;
  flex: none;
  color: var(--fg-3);
}
.acc__icon::before, .acc__icon::after {
  content: "";
  position: absolute;
  background: currentColor;
  border-radius: 1px;
  transition: transform .25s var(--ease), opacity .25s var(--ease);
}
.acc__icon::before { left: 0; right: 0; top: 7.5px; height: 1.5px; }
.acc__icon::after  { top: 0; bottom: 0; left: 7.5px; width: 1.5px; }
.acc__btn[aria-expanded="true"] .acc__icon { color: var(--accent); }
.acc__btn[aria-expanded="true"] .acc__icon::after { transform: rotate(90deg); opacity: 0; }
.acc__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .3s var(--ease);
}
.acc__btn[aria-expanded="true"] + .acc__panel { grid-template-rows: 1fr; }
.acc__panel > div { overflow: hidden; }
.acc__panel p { padding-bottom: 22px; padding-right: 40px; font-size: .9375rem; }
.acc__panel > div > :first-child { padding-top: 2px; }

/* Form */
.field { display: grid; gap: 7px; }
.field label { font-size: .8438rem; font-weight: 540; color: var(--fg); }
.field .hint { font-size: .78rem; color: var(--fg-3); }
.input, .select, .textarea {
  width: 100%;
  padding: 11px 13px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--fg);
  font-size: .9375rem;
  transition: border-color .16s, box-shadow .16s;
}
.input::placeholder, .textarea::placeholder { color: var(--fg-3); }
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.textarea { min-height: 118px; resize: vertical; }
.select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236d7f84' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 15px;
  padding-right: 36px;
}
.form-grid { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; }
.form-grid .span-2 { grid-column: 1 / -1; }
.check-row { display: flex; gap: 10px; align-items: flex-start; font-size: .8438rem; color: var(--fg-3); }
.check-row input { margin-top: 3px; accent-color: var(--accent); width: 15px; height: 15px; }

/* ==========================================================================
   12. Illustration + diagram primitives
   ========================================================================== */

.illus { width: 100%; height: auto; overflow: visible; }
.illus .st-bg    { fill: var(--surface-2); }
.illus .st-card  { fill: var(--surface); }
.illus .st-line  { stroke: var(--border-strong); }
.illus .st-soft  { fill: var(--surface-3); }
.illus .st-mint  { fill: var(--accent); }
.illus .st-mint-s{ stroke: var(--accent); }
.illus .st-mint-w{ fill: var(--accent-soft); }
.illus .st-ink   { fill: var(--fg); }
.illus .st-mut   { fill: var(--fg-3); }

/* Pipeline diagram (hero) */
.pipe {
  display: grid;
  gap: 14px;
  font-family: var(--font-mono);
  font-size: .75rem;
}
.pipe__node {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 15px;
  border-radius: var(--r);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--fg-2);
}
.pipe__node b { color: var(--fg); font-weight: 600; }
.pipe__node > svg { width: 17px; height: 17px; color: var(--accent-text); }
.pipe__node--core {
  border-color: var(--accent-border);
  background: var(--accent-soft);
  color: var(--accent-text);
}
.pipe__arrow {
  justify-self: center;
  width: 1px; height: 22px;
  background: linear-gradient(180deg, var(--border-strong), var(--accent));
  position: relative;
}
.pipe__arrow::after {
  content: "";
  position: absolute; bottom: -1px; left: 50%;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-top-color: var(--accent);
}

/* Animated flow line used in SVG diagrams */
.flow-dash {
  stroke-dasharray: 4 7;
  animation: dash 1.4s linear infinite;
}
@keyframes dash { to { stroke-dashoffset: -22; } }

/* --- Hero engine console ------------------------------------------------ */
.console__body { display: grid; gap: 0; }

.console__tag {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: .69rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin-bottom: 10px;
}
.console__tag span { text-transform: none; letter-spacing: .01em; color: var(--accent-text); }

.console__code {
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--surface-2);
  overflow: hidden;
}
[data-theme="dark"] .console__code { background: rgba(255, 255, 255, .022); }
.console__code pre {
  margin: 0;
  padding: 14px 16px;
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: .7813rem;
  line-height: 1.72;
  color: var(--fg-2);
}

.console__wire {
  position: relative;
  justify-self: center;
  width: 1px;
  height: 30px;
  margin: 4px 0;
  background: linear-gradient(180deg, transparent, var(--border-strong) 20%, var(--accent-border));
}
.console__wire span {
  position: absolute;
  left: 50%;
  top: 0;
  width: 5px; height: 5px;
  margin-left: -2.5px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
  animation: wire 2.4s cubic-bezier(.5, 0, .5, 1) infinite;
}
.console__wire:last-of-type span { animation-delay: .35s; }
@keyframes wire {
  0%       { transform: translateY(0);    opacity: 0; }
  15%      { opacity: 1; }
  85%      { opacity: 1; }
  100%     { transform: translateY(26px); opacity: 0; }
}

.console__engine {
  position: relative;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 14px 16px;
  border: 1px solid var(--accent-border);
  border-radius: var(--r);
  background: var(--accent-soft);
  overflow: hidden;
}
.console__engine::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 20%, var(--accent-glow) 50%, transparent 80%);
  transform: translateX(-100%);
  animation: scan 3.2s ease-in-out infinite;
  pointer-events: none;
}
@keyframes scan { 0%, 55% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
/* Two of these boxes now sit in the same panel. Offset the second sweep so they read as one
   thing passing down the chain rather than two lights blinking together. */
.console__engine--in::after { animation-delay: 1.15s; }
.console__engine > svg { width: 19px; height: 19px; color: var(--accent-text); flex: none; }
.console__engine b { display: block; color: var(--fg); font-size: .8438rem; font-weight: 600; line-height: 1.4; }
.console__engine span { display: block; font-family: var(--font-mono); font-size: .7rem; color: var(--fg-3); margin-top: 2px; }
.console__engine em {
  margin-left: auto;
  flex: none;
  font-style: normal;
  font-family: var(--font-mono);
  font-size: .7188rem;
  color: var(--accent-text);
  font-weight: 600;
}

.console__out { display: grid; gap: 8px; }
.rx {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface);
  font-size: .8125rem;
  color: var(--fg-2);
}
.rx__dot {
  width: 7px; height: 7px;
  flex: none;
  border-radius: 50%;
  background: var(--accent);
  animation: rxpulse 3.2s ease-in-out infinite;
  animation-delay: calc(var(--i) * .16s + .4s);
}
@keyframes rxpulse {
  0%, 70%, 100% { box-shadow: 0 0 0 0 transparent; opacity: .55; }
  8%            { box-shadow: 0 0 0 4px var(--accent-glow); opacity: 1; }
  30%           { box-shadow: 0 0 0 0 transparent; opacity: 1; }
}
/* The mechanic leading each row. This block is the only place above the fold that shows what
   the engine actually produces, so the kind has to be legible at a glance rather than buried
   mid-sentence. Kept as weighted accent text, not a pill, because the status on the right is
   already a pill and two per row turns the list into confetti. */
.rx__k {
  flex: none;
  min-width: 6.4em;                 /* widest label, so every description starts on one line */
  font-weight: 650;
  color: var(--accent-text);
  letter-spacing: -.005em;
}
.rx__t { flex: 1; min-width: 0; }
.rx__t b { color: var(--fg); font-weight: 600; }
.rx__s {
  flex: none;
  font-family: var(--font-mono);
  font-size: .6563rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--accent-text);
  background: var(--accent-soft);
  border: 1px solid var(--accent-border);
  border-radius: var(--r-full);
  padding: 2px 8px;
}

/* --- Condition / rule builder ------------------------------------------- */
.rule {
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 14px;
  background: var(--surface-2);
  display: grid;
  gap: 9px;
}
[data-theme="dark"] .rule { background: rgba(255, 255, 255, .018); }

.rule__op {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  flex: none;
  padding: 3px 9px;
  border-radius: var(--r-full);
  background: var(--accent-soft);
  border: 1px solid var(--accent-border);
  color: var(--accent-text);
  font-family: var(--font-mono);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .06em;
}
.rule__op--or { background: var(--surface-3); border-color: var(--border-strong); color: var(--fg-2); }

.rule__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface);
  font-size: .8125rem;
}
.rule__field { color: var(--fg-2); }
.rule__field b { color: var(--fg); font-family: var(--font-mono); font-size: .95em; font-weight: 600; }
.rule__cmp {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--accent-text);
  padding: 1px 7px;
  border-radius: var(--r-xs);
  background: var(--accent-soft);
}
.rule__val { color: var(--fg); font-weight: 560; }
.rule__win {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: .6875rem;
  color: var(--fg-3);
  white-space: nowrap;
}

.rule__group {
  display: grid;
  gap: 9px;
  padding: 12px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-sm);
  margin-left: 14px;
}

.rule__then {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-top: 14px;
  padding: 13px 15px;
  border: 1px solid var(--accent-border);
  border-radius: var(--r);
  background: var(--accent-soft);
  font-size: .8438rem;
  color: var(--fg-2);
}
.rule__then svg { width: 17px; height: 17px; color: var(--accent-text); flex: none; }
.rule__then b { color: var(--fg); font-weight: 600; }

/* Progress bar */
.bar {
  height: 6px;
  border-radius: 3px;
  background: var(--surface-3);
  overflow: hidden;
}
.bar > i {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 60%, var(--info)));
}

/* Mini "app" mock chrome used inside panels */
.mock { display: grid; gap: 12px; }
.mock__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 13px 15px;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--surface);
}
.mock__row .t { font-size: .875rem; color: var(--fg); font-weight: 545; }
.mock__row .s { font-size: .7813rem; color: var(--fg-3); font-family: var(--font-mono); }

/* ==========================================================================
   13. Motion
   ========================================================================== */

[data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
[data-reveal].is-in { opacity: 1; transform: none; }
[data-reveal][data-delay="1"] { transition-delay: .07s; }
[data-reveal][data-delay="2"] { transition-delay: .14s; }
[data-reveal][data-delay="3"] { transition-delay: .21s; }
[data-reveal][data-delay="4"] { transition-delay: .28s; }
[data-reveal][data-delay="5"] { transition-delay: .35s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
}

/* ==========================================================================
   14. Responsive
   ========================================================================== */

@media (max-width: 1140px) {
  .nav__menu { display: none; }
  .nav__burger { display: grid; }
  .nav__actions .btn--outline,
  .nav__actions .btn--ghost { display: none; }   /* the drawer CTA covers this on small screens */
  .footer__grid { grid-template-columns: 1fr 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; max-width: none; }
}

@media (max-width: 900px) {
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split, .split--wide-left, .split--wide-right, .frow { grid-template-columns: 1fr; }
  .frow:nth-child(even) .frow__media { order: 0; }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
  .grid-2, .grid-3, .grid-4, .grid-auto { grid-template-columns: 1fr; }
  .checks--2col { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .step { grid-template-columns: 1fr; gap: 14px; }
  .btn { width: auto; }
  .phero__actions .btn, .cta-band .btn { flex: 1 1 auto; min-width: 180px; }
  .stat__value { font-size: 2.1rem; }
}

@media (max-width: 420px) {
  .footer__grid { grid-template-columns: 1fr; }
}

@media print {
  .nav, .drawer, .footer, .cta-band { display: none; }
  body { background: #fff; color: #000; }
}

/* ==========================================================================
   15. Content dot background           ADDED 2026-08-22 · FULLY REVERTIBLE
   --------------------------------------------------------------------------
   A faint green dot field behind the content sections, so the page is not a
   flat slab of grey or black. Drawn as a background-image on .section rather
   than a pseudo-element, because the heroes already spend ::before on
   .bg-dots and ::after on .bg-bloom, and a second rule on the same
   pseudo-element would replace theirs rather than stack with it.

   It reaches content only. The nav and the footer sit outside <main> and are
   not .section, so neither is touched. Heroes are excluded too, since they
   already carry their own dot field.

   TO REVERT:  delete this whole block. Nothing else in the file refers to it.
   TO TUNE:    --dots-color is the strength, --dots-gap is the spacing,
               --dots-size is how fat each dot is.
   ========================================================================== */

:root {
  --dots-color: rgba(27, 127, 88, .11);
  --dots-gap:   28px;
  --dots-size:  1px;
}
[data-theme="dark"] {
  --dots-color: rgba(60, 158, 116, .14);
}

.section:not(.bg-dots) {
  background-image: radial-gradient(var(--dots-color) var(--dots-size), transparent var(--dots-size));
  background-size: var(--dots-gap) var(--dots-gap);
  background-position: center top;
}

/* Cards, panels and tables are opaque and sit on top, so the field only ever
   shows in the gutters between them. That is the whole intent: texture in the
   empty space, nothing behind text. */

/* --------------------------------------------------------------------------
   "Why us" nav entry                   ADDED 2026-08-22 · FULLY REVERTIBLE
   The one nav link that is meant to catch the eye of somebody who has decided
   the product looks too complicated. Tinted rather than a second button, so it
   does not compete with Book a demo.
   TO REVERT: delete this block, and the two nav__link--hot / drawer__toggle--hot
   links in .partials/nav.html and .partials/drawer.html, then re-run inject.
   -------------------------------------------------------------------------- */
.nav__link { white-space: nowrap; }   /* a wrapped label breaks the bar */

.drawer__toggle--hot { color: var(--accent-text); font-weight: 600; }

/* Sign in steps back so the three actions read as one ladder: plain, outlined,
   filled. Only "Why us" is filled. */
.btn--ghost {
  background: none;
  border-color: transparent;
  color: var(--fg-2);
}
.btn--ghost:hover { background: var(--surface-2); color: var(--fg); }

/* --------------------------------------------------------------------------
   Numbered objective label
   In the worked example every line was a .badge, so the eligibility rule and
   the three objectives looked identical and the reader could not see that the
   mission had three parts. The number carries that now.
   -------------------------------------------------------------------------- */
.obj {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  font-size: .9375rem;
  font-weight: 640;
  color: var(--fg);
  letter-spacing: -.012em;
}
.obj__num {
  flex: none;
  display: grid;
  place-items: center;
  width: 23px; height: 23px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-ink);
  font-family: var(--font-mono);
  font-size: .6875rem;
  font-weight: 600;
  line-height: 1;
}

/* --------------------------------------------------------------------------
   Rule group header
   Mirrors the dashboard's condition builder: one control above the list saying
   "Match all of the 3 rules below", never an AND/OR drawn between rows. The
   dashboard rejected the between-rows join deliberately, because a group holds
   one operator for every member and a per-row join implies a choice that does
   not exist. It also hides the control entirely when a group holds one rule,
   which is why single-rule blocks here carry no header.
   -------------------------------------------------------------------------- */
.rule__match {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  font-size: .8125rem;
  color: var(--fg-3);
}
.rule__label {
  font-size: .8125rem;
  font-weight: 600;
  color: var(--fg);
  letter-spacing: -.01em;
}

/* A rule illustration always sits in a labelled panel now, the way the worked
   example on the missions page does, so every rule on the site reads as the
   same object. The body is tighter than a normal panel because the .rule
   inside already carries its own padding. */
.panel__body--tight { padding: 14px; }

/* --------------------------------------------------------------------------
   Pricing slider
   One control, so it gets room rather than being a form field in a corner.
   -------------------------------------------------------------------------- */
.pricer {
  --fill: 50%;
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  background: var(--surface);
  box-shadow: var(--shadow);
  padding: clamp(20px, 2.6vw, 30px);
}
.pricer__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.pricer__label { display: block; font-size: .8125rem; color: var(--fg-3); margin-bottom: 4px; }
.pricer__mau {
  display: block;
  font-size: clamp(1.75rem, 1.2rem + 2vw, 2.5rem);
  font-weight: 660;
  letter-spacing: -.03em;
  color: var(--fg);
  line-height: 1.05;
}
.pricer__hint { font-size: .8125rem; color: var(--fg-3); white-space: nowrap; }
.pricer__range {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 8px; margin: 0;
  border-radius: 999px; cursor: pointer;
  background: linear-gradient(to right, var(--accent) var(--fill), var(--surface-3) var(--fill));
}
.pricer__range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--accent); border: 3px solid var(--surface);
  box-shadow: 0 1px 6px rgba(0,0,0,.28); cursor: grab;
}
.pricer__range::-moz-range-thumb {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--accent); border: 3px solid var(--surface);
  box-shadow: 0 1px 6px rgba(0,0,0,.28); cursor: grab;
}
.pricer__range:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.pricer__ticks {
  position: relative;
  height: 18px;
  margin-top: 10px;
  font-family: var(--font-mono); font-size: .6875rem;
  letter-spacing: .06em; color: var(--fg-3);
}
.pricer__ticks span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
.pricer__ticks span:first-child { transform: none; }
.pricer__ticks span:last-child  { transform: translateX(-100%); }
@media (max-width: 560px) {
  .pricer__ticks span:nth-child(2),
  .pricer__ticks span:nth-child(4),
  .pricer__ticks span:nth-child(7) { display: none; }
}

/* The one paid add-on, shown as a real control rather than a bullet, because
   ticking it changes what you owe. */
.addon {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-top: 22px;
  padding: 14px;
  border: 1px solid var(--accent-border);
  border-radius: var(--r);
  background: var(--accent-soft);
  cursor: pointer;
}
.addon input { margin-top: 3px; width: 17px; height: 17px; accent-color: var(--accent); flex: none; cursor: pointer; }
.addon__body { display: grid; gap: 4px; font-size: .875rem; }
.addon__body b { color: var(--fg); font-weight: 640; }
.addon__body span { color: var(--fg-2); line-height: 1.5; }

/* The setup add-on, once ticked: what it costs, kept separate from the monthly
   figure so nobody reads it as a recurring charge. */
/* display:flex beats the browser default for [hidden], so say it explicitly or
   the badge shows even when the box is not ticked. */
.addon__total[hidden] { display: none; }
.addon__total {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  font-size: .8125rem;
  color: var(--fg-3);
}
.addon__plus {
  flex: none;
  padding: 4px 11px;
  border-radius: var(--r-full);
  background: var(--accent);
  color: var(--accent-ink);
  font-family: var(--font-mono);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: -.01em;
}

/* Shown only past the contract threshold on the pricing slider. */
.contract[hidden] { display: none; }
.contract {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  margin-top: 18px;
  padding: 14px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r);
  background: var(--surface-2);
  font-size: .8438rem;
  line-height: 1.55;
  color: var(--fg-2);
}
.contract > svg { width: 19px; height: 19px; flex: none; color: var(--fg-3); margin-top: 1px; }
.contract b { display: block; color: var(--fg); font-weight: 640; margin-bottom: 3px; }