/* ==========================================================================
   SMKCloud design system
   Single stylesheet, no build step. Ordered: tokens -> reset -> layout ->
   components -> site chrome -> app chrome -> utilities -> responsive.
   Every colour is a token so the WHMCS theme can be re-skinned from :root.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  --bg: #f4f5f8;
  --surface: #fcfcfd;
  --surface2: #f9fafb;
  --ink: #1a1a1c;
  --ink2: rgba(26, 26, 28, .72);
  --ink3: rgba(26, 26, 28, .6);
  --line: #eceff4;
  --line2: #dfe4eb;

  --amber: #e0873b;
  --amber-d: #a85a1c;
  --amber-t: #fdf1e4;
  /* Text on an amber surface. White on #e0873b is only 2.73:1 — dark ink keeps
     the brand colour exactly and reaches 6.37:1. */
  --on-amber: #1a1a1c;
  /* Text on --amber-d, which is a DARKENED amber in light mode and a LIGHTENED
     one in dark mode, so the ink that reads on it flips with the theme. The
     hover state of every primary button lands here: white on the dark #a85a1c
     is 5.07:1, and the same white on the light #eda468 is 2.08:1. */
  --on-amber-d: #ffffff;

  --panel: #13171e;
  --panel-ink: #fcfcfc;
  --panel-line: #1b232f;
  --panel-dim: rgba(252, 252, 252, .6);

  --ok: #2f7d4f;
  --ok-t: #e8fbc6;
  --warn: #a8452a;
  --warn-t: #ffe6dc;
  --info: #2a5bd7;
  --info-t: #e6edfd;

  --shadow1: 0 1px 2px 0 rgba(16, 24, 40, .05);
  --shadow2: 0 10px 20px -5px rgba(28, 34, 43, .05), 0 20px 65px -5px rgba(28, 34, 43, .05);

  --r-lg: 20px;
  --r-md: 10px;
  --r-pill: 999px;

  --wrap: 1280px;
  --gutter: 24px;

  --font: 'Inter Tight', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --ease: cubic-bezier(.22, .61, .36, 1);
}

[data-theme="dark"] {
  --bg: #181d26;
  --surface: #0f1217;
  --surface2: #1f252f;
  --ink: #fcfcfc;
  --ink2: rgba(252, 252, 252, .72);
  --ink3: rgba(252, 252, 252, .52);
  --line: #1b232f;
  --line2: #2a333e;

  --amber: #e0873b;
  --amber-d: #eda468;
  --amber-t: rgba(224, 135, 59, .14);
  --on-amber: #1a1a1c;
  --on-amber-d: #1a1a1c;

  --panel: #0f1217;
  --panel-ink: #fcfcfc;
  --panel-line: #1b232f;
  --panel-dim: rgba(252, 252, 252, .6);

  --ok: #c6f56f;
  --ok-t: rgba(198, 245, 111, .14);
  --warn: #ffb9a2;
  --warn-t: rgba(255, 185, 162, .14);
  --info: #9db6f5;
  --info-t: rgba(157, 182, 245, .14);

  --shadow1: 0 1px 2px 0 rgba(0, 0, 0, .3);
  --shadow2: 0 10px 20px -5px rgba(0, 0, 0, .3), 0 20px 65px -5px rgba(0, 0, 0, .3);
}

/* --------------------------------------------------------------------------
   2. Reset and base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}

h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 500; letter-spacing: -.01em; line-height: 1.2; text-wrap: balance; }
p { margin: 0; }
img, svg, video { max-width: 100%; display: block; }
ul, ol { margin: 0; padding: 0; }
li { list-style: none; }

a { color: var(--amber-d); text-decoration: none; transition: color .2s ease; }
a:hover { color: var(--amber); }

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

::selection { background: var(--amber); color: var(--on-amber); }

:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; border-radius: 4px; }

hr { border: 0; border-top: 1px solid var(--line); margin: 0; }

/* The `hidden` attribute must beat any author display rule. Without this a
   component with its own `display` (.notice is flex) stays visible when hidden,
   which would leak every success/empty state onto the page at load. */
[hidden] { display: none !important; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  /* --on-amber, not #fff: this is an amber-filled control like .btn--primary,
     and every other one of them takes the dark ink. White on #e0873b is 2.73:1,
     which fails AA on the one control a keyboard user meets first. */
  background: var(--amber); color: var(--on-amber); padding: 12px 20px; border-radius: 0 0 var(--r-md) 0;
}
.skip-link:focus { left: 0; color: var(--on-amber); }

/* --------------------------------------------------------------------------
   3. Typography scale
   -------------------------------------------------------------------------- */
.t-display { font-size: clamp(38px, 4.8vw, 66px); line-height: .98; letter-spacing: -.035em; font-weight: 650; }
.t-h1      { font-size: clamp(32px, 4.2vw, 50px); line-height: 1.02; letter-spacing: -.03em; font-weight: 650; }
.t-h2      { font-size: clamp(28px, 3.2vw, 40px); line-height: 1.06; letter-spacing: -.025em; font-weight: 650; }
.t-h3      { font-size: clamp(24px, 2.6vw, 32px); letter-spacing: -.01em; font-weight: 500; }
.t-h4      { font-size: 21px; font-weight: 500; letter-spacing: -.02em; }
.t-h5      { font-size: 17px; font-weight: 500; }
.t-lead    { font-size: 17px; line-height: 1.6; color: var(--ink2); }
.t-body    { font-size: 15px; line-height: 1.65; color: var(--ink2); }
.t-sm      { font-size: 13.5px; color: var(--ink2); line-height: 1.55; }
.t-xs      { font-size: 12.5px; color: var(--ink3); }
.t-num     { font-variant-numeric: tabular-nums; }
.t-mono    { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.t-eyebrow { font-variant-numeric: tabular-nums; font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--ink3); }
.t-ink     { color: var(--ink); }
.t-ink2    { color: var(--ink2); }
.t-ink3    { color: var(--ink3); }
.t-amber   { color: var(--amber); }
.t-ok      { color: var(--ok); }
.t-warn    { color: var(--warn); }
.t-center  { text-align: center; }
.t-right   { text-align: right; }

.prose { max-width: 720px; color: var(--ink2); font-size: 16px; line-height: 1.75; }
.prose > * + * { margin-top: 20px; }
.prose h2 { font-size: 26px; color: var(--ink); margin-top: 44px; font-weight: 500; }
.prose h3 { font-size: 20px; color: var(--ink); margin-top: 34px; font-weight: 500; }
.prose ul, .prose ol { padding-left: 22px; }
.prose li { list-style: disc; margin-top: 8px; }
.prose ol li { list-style: decimal; }
.prose code { font-family: var(--mono); font-size: .88em; background: var(--surface2); border: 1px solid var(--line); border-radius: 6px; padding: 2px 6px; color: var(--ink); }
.prose pre { background: var(--panel); color: var(--panel-dim); border-radius: var(--r-md); padding: 20px; overflow-x: auto; font-family: var(--mono); font-size: 13px; line-height: 1.7; }
.prose pre code { background: none; border: 0; padding: 0; color: inherit; }
.prose blockquote { border-left: 3px solid var(--amber); padding-left: 20px; color: var(--ink2); font-style: italic; }
.prose img { border-radius: var(--r-md); border: 1px solid var(--line); }
.prose table { width: 100%; border-collapse: collapse; font-size: 14px; }
.prose th, .prose td { border-bottom: 1px solid var(--line); padding: 10px 12px; text-align: left; }
.prose th { color: var(--ink); font-weight: 500; }

/* --------------------------------------------------------------------------
   4. Layout
   -------------------------------------------------------------------------- */
.wrap { max-width: var(--wrap); margin: 0 auto; padding-inline: var(--gutter); }
.wrap--md { max-width: 1120px; }
.wrap--sm { max-width: 900px; }
.wrap--xs { max-width: 680px; }

.section { padding-top: 88px; }
.section--sm { padding-top: 56px; }
.section--xs { padding-top: 40px; }
.section--last { padding-bottom: 100px; }
.section--flush { padding-top: 0; }

.band { background: var(--surface); border-bottom: 1px solid var(--line); }
.band--panel { background: var(--panel); color: var(--panel-ink); border-bottom: 0; }
.band--panel h1, .band--panel h2, .band--panel .t-h1, .band--panel .t-display { color: var(--panel-ink); }
.band--panel .t-lead, .band--panel .t-body { color: var(--panel-dim); }
.band__inner { padding-block: 52px 46px; }

.grid { display: grid; gap: 18px; }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 45%), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 30%), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22%), 1fr)); }
.grid--cards { grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); }
.grid--wide { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
.grid--tight { gap: 14px; }
.grid--loose { gap: 32px; }

/* Hairline grid: 1px gaps read as dividers, not gutters. */
.grid--hair {
  gap: 1px; background: var(--line); border: 1px solid var(--line);
  border-radius: var(--r-lg); overflow: hidden;
}
.grid--hair > * { background: var(--surface); padding: 24px; }

.split { display: flex; flex-wrap: wrap; gap: 28px; align-items: flex-start; }
.split__main { flex: 999 1 460px; min-width: 0; }
.split__side { flex: 1 1 300px; max-width: 360px; }

.stack { display: flex; flex-direction: column; gap: 18px; }
.stack--sm { gap: 10px; }
.stack--lg { gap: 28px; }

.cluster { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.cluster--sm { gap: 8px; }
.between { display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; align-items: center; }
.between--end { align-items: flex-end; }
.between--baseline { align-items: baseline; }

/* --------------------------------------------------------------------------
   5. Components
   -------------------------------------------------------------------------- */

/* 5.1 Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid transparent; border-radius: var(--r-pill);
  padding: 12px 24px; font-size: 15px; font-weight: 500; line-height: 1.2;
  cursor: pointer; text-align: center; white-space: nowrap;
  transition: background .25s ease, border-color .25s ease, color .2s ease,
              transform .3s var(--ease), box-shadow .3s var(--ease);
}
.btn--primary { background: var(--amber); color: var(--on-amber); box-shadow: var(--shadow1); }
.btn--primary:hover { background: var(--amber-d); color: var(--on-amber-d); transform: translateY(-2px); box-shadow: var(--shadow2); }
.btn--outline { background: var(--surface); border-color: var(--line2); color: var(--ink); box-shadow: var(--shadow1); }
.btn--outline:hover { border-color: var(--ink); color: var(--ink); transform: translateY(-2px); box-shadow: var(--shadow2); }
.btn--ghost { background: transparent; border-color: var(--line2); color: var(--ink); }
.btn--ghost:hover { border-color: var(--amber); color: var(--amber-d); }
.btn--quiet { background: transparent; border-color: transparent; color: var(--amber-d); padding-inline: 0; }
.btn--quiet:hover { color: var(--amber); }
.btn--danger { background: transparent; border-color: var(--line2); color: var(--warn); }
.btn--danger:hover { border-color: var(--warn); color: var(--warn); }
.btn--onpanel { background: transparent; border-color: rgba(255, 255, 255, .34); color: #fff; }
.btn--onpanel:hover { background: rgba(255, 255, 255, .14); border-color: #fff; color: #fff; }
.btn--oninverse { background: #fff; color: #1a1a1c; }
.btn--oninverse:hover { background: #1a1a1c; color: #fff; }
.btn--lg { padding: 14px 28px; font-size: 16px; }
.btn--sm { padding: 8px 14px; font-size: 13.5px; }
.btn--xs { padding: 5px 11px; font-size: 12px; }
.btn--block { width: 100%; }
.btn--square { border-radius: var(--r-md); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .5; pointer-events: none; }

/* Segmented control — billing-term switches, filters */
.seg { display: inline-flex; border: 1px solid var(--line2); border-radius: var(--r-pill); overflow: hidden; background: var(--surface); box-shadow: var(--shadow1); }
.seg > button { background: transparent; border: 0; padding: 10px 20px; font-size: 14px; font-weight: 500; color: var(--ink2); transition: background .25s ease, color .2s ease; }
.seg > button.is-active { background: var(--amber); color: var(--on-amber); }
.seg > button:not(.is-active):hover { color: var(--ink); }

/* 5.2 Pills, badges, status */
.pill {
  display: inline-block; background: var(--amber-t); color: var(--amber-d);
  padding: 6px 14px; border-radius: var(--r-pill); font-size: 14px; font-weight: 500; line-height: 1.4;
}
.pill--onpanel { background: rgba(224, 135, 59, .16); color: var(--amber); }
.badge {
  display: inline-block; font-variant-numeric: tabular-nums; font-size: 9.5px; letter-spacing: .09em;
  padding: 3px 8px; border-radius: var(--r-pill); background: var(--surface2); color: var(--ink2); text-transform: uppercase;
}
.badge--hot { background: var(--amber); color: var(--on-amber); }
.badge--ok { background: var(--ok-t); color: var(--ok); }
.badge--warn { background: var(--warn-t); color: var(--warn); }
.badge--info { background: var(--info-t); color: var(--info); }
.badge--md { font-size: 12px; padding: 4px 11px; letter-spacing: 0; text-transform: none; font-weight: 500; }

.chip { font-variant-numeric: tabular-nums; font-size: 11.5px; border: 1px solid var(--line2); border-radius: var(--r-pill); padding: 6px 14px; color: var(--ink2); background: transparent; transition: border-color .2s, color .2s; }
a.chip:hover, button.chip:hover { border-color: var(--amber); color: var(--amber-d); }
.chip.is-active { background: var(--amber); border-color: var(--amber); color: var(--on-amber); }

.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); flex-shrink: 0; display: inline-block; }
.dot--warn { background: var(--warn); }
.dot--amber { background: var(--amber); }
.dot--mute { background: var(--ink3); }

.status-line { display: inline-flex; align-items: center; gap: 9px; background: var(--surface2); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 8px 16px; font-size: 14px; color: var(--ink2); }

/* 5.3 Cards */
.card {
  position: relative; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow1); padding: 26px;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s ease;
}
.card--flat { box-shadow: none; }
.card--pad-sm { padding: 22px; }
.card--pad-lg { padding: 34px; }
.card--flush { padding: 0; overflow: hidden; }
.card--hot { border-color: var(--amber); }
.card--lift:hover { transform: translateY(-3px); box-shadow: var(--shadow2); }
a.card, button.card { display: block; text-align: left; color: inherit; width: 100%; }
a.card:hover, button.card:hover { border-color: var(--amber); color: inherit; }

.card__head { padding: 16px 22px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.card__title { font-size: 16px; font-weight: 500; }
.card__body { padding: 22px; }
.card__row { padding: 14px 22px; border-bottom: 1px solid var(--line); }
.card__row:last-child { border-bottom: 0; }
.card__foot { padding: 16px 22px; border-top: 1px solid var(--line); }

.panel { background: var(--panel); color: var(--panel-ink); border-radius: var(--r-lg); padding: clamp(28px, 4vw, 48px); }
.panel h2, .panel h3 { color: var(--panel-ink); }
.panel .t-body, .panel .t-lead { color: var(--panel-dim); }

.icon-tile {
  width: 46px; height: 46px; border-radius: 14px; background: var(--amber-t); color: var(--amber-d);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 15px; font-weight: 500;
}

/* Inline icons. Every glyph is recoloured to currentColor, so an icon takes the
   colour of whatever it sits in and needs no dark-mode variant. */
.icon { display: inline-flex; flex-shrink: 0; color: var(--amber-d); }
.icon svg { width: 24px; height: 24px; display: block; }
.icon--lg svg { width: 32px; height: 32px; }
.icon--sm svg { width: 18px; height: 18px; }
.icon-tile .icon svg { width: 24px; height: 24px; }
.icon-tile--sm .icon svg { width: 18px; height: 18px; }

/* OS and partner marks stay in their own brand colours — never recoloured. */
.oslogo { width: 26px; height: 26px; object-fit: contain; flex-shrink: 0; }
.oslogo--lg { width: 34px; height: 34px; }
.os-strip { display: flex; align-items: center; gap: 10px; }
.icon-tile--sm { width: 38px; height: 38px; border-radius: 11px; }
.avatar { width: 40px; height: 40px; border-radius: var(--r-pill); flex-shrink: 0; background: var(--amber-t); color: var(--amber-d); display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 500; }

/* 5.4 Stat blocks */
.stat__value { font-size: clamp(28px, 3.2vw, 40px); font-weight: 400; letter-spacing: -.02em; line-height: 1; font-variant-numeric: tabular-nums; }
.stat__label { font-size: 15px; color: var(--ink2); margin-top: 8px; }
.stat--sm .stat__value { font-size: 26px; font-weight: 500; letter-spacing: -.02em; }
.stat--sm .stat__label { font-size: 13px; font-weight: 500; color: var(--ink3); margin-top: 4px; }

/* 5.5 Tables — CSS grid so cells align without <table> reflow issues */
.table { border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--surface); }
.table__scroll { overflow-x: auto; }
.table__scroll > * { min-width: 720px; }
.table__head, .table__row { display: grid; align-items: center; }
.table__head { background: var(--surface2); border-bottom: 1px solid var(--line); }
.table__head > * { padding: 14px 18px; font-size: 13px; font-weight: 500; color: var(--ink3); }
.table__head--caps > * { font-variant-numeric: tabular-nums; font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase; }
.table__row { border-bottom: 1px solid var(--line); transition: background .2s ease; }
.table__row:last-child { border-bottom: 0; }
.table__row > * { padding: 16px 18px; font-size: 14px; color: var(--ink2); }
.table__row:hover { background: var(--surface2); }
a.table__row, button.table__row { width: 100%; text-align: left; background: transparent; border: 0; border-bottom: 1px solid var(--line); color: inherit; }
.table__row strong, .table__cell--name { font-size: 15px; font-weight: 500; color: var(--ink); }
.table__foot { padding: 18px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; align-items: center; }

/* Key/value list — service specs, order summaries */
.kv { display: flex; flex-direction: column; }
.kv__row { display: flex; justify-content: space-between; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.kv__row:last-child { border-bottom: 0; }
.kv__k { color: var(--ink2); }
.kv__v { font-variant-numeric: tabular-nums; text-align: right; color: var(--ink); }
.kv--boxed .kv__row { padding: 11px 18px; }
.kv--onpanel .kv__row { border-color: var(--panel-line); }
.kv--onpanel .kv__k { color: var(--panel-dim); }
.kv--onpanel .kv__v { color: var(--panel-ink); }

/* 5.6 Forms */
.field { display: flex; flex-direction: column; gap: 6px; }
.field__label { font-size: 13px; font-weight: 500; color: var(--ink3); }
.field__hint { font-size: 12.5px; color: var(--ink3); }
.field__error { font-size: 12.5px; color: var(--warn); }
.input, .select, .textarea {
  width: 100%; border: 1px solid var(--line2); border-radius: var(--r-pill);
  background: var(--surface2); color: var(--ink); padding: 13px 18px;
  font-size: 15px; outline: none; box-shadow: var(--shadow1);
  transition: border-color .2s ease;
}
.input::placeholder, .textarea::placeholder { color: var(--ink3); }
.input:focus, .select:focus, .textarea:focus { border-color: var(--amber); box-shadow: 0 0 0 3px rgba(224, 135, 59, .32); }
/* Belt and braces: a real outline for keyboard users and forced-colours mode,
   where box-shadow is discarded. */
.input:focus-visible, .select:focus-visible, .textarea:focus-visible { outline: 2px solid var(--amber); outline-offset: 1px; }
.textarea { border-radius: var(--r-lg); resize: vertical; min-height: 110px; }
.select { appearance: none; padding-right: 42px; background-image: linear-gradient(45deg, transparent 50%, var(--ink3) 50%), linear-gradient(135deg, var(--ink3) 50%, transparent 50%); background-position: calc(100% - 20px) 55%, calc(100% - 15px) 55%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
.input--mono { font-family: var(--mono); }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.form-grid--wide { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.field--full { grid-column: 1 / -1; }

.check { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; color: var(--ink2); line-height: 1.55; cursor: pointer; }
.check input { position: absolute; opacity: 0; width: 0; height: 0; }
.check__box { width: 17px; height: 17px; border: 1px solid var(--line2); border-radius: 5px; background: var(--surface2); flex-shrink: 0; margin-top: 2px; position: relative; transition: background .2s, border-color .2s; }
.check__box::after { content: ''; position: absolute; left: 5px; top: 1px; width: 4px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg) scale(0); transition: transform .18s var(--ease); }
.check input:checked + .check__box { background: var(--amber); border-color: var(--amber); }
.check input:checked + .check__box::after { transform: rotate(45deg) scale(1); }
.check input:focus-visible + .check__box { outline: 2px solid var(--amber); outline-offset: 2px; }
.check--radio .check__box { border-radius: 50%; }
.check--radio .check__box::after { left: 4px; top: 4px; width: 7px; height: 7px; border: 0; border-radius: 50%; background: #fff; transform: scale(0); }
.check--radio input:checked + .check__box::after { transform: scale(1); }

.toggle { width: 42px; height: 24px; border-radius: var(--r-pill); border: 0; background: var(--line2); padding: 3px; display: flex; justify-content: flex-start; transition: background .25s ease; flex-shrink: 0; }
.toggle > span { width: 18px; height: 18px; border-radius: 50%; background: #fff; display: block; transition: transform .25s var(--ease); }
.toggle[aria-pressed="true"] { background: var(--amber); }
.toggle[aria-pressed="true"] > span { transform: translateX(18px); }

/* Selectable option cards — regions, OS, payment methods, plans */
.option {
  display: block; text-align: left; width: 100%;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 13px 15px; color: var(--ink); transition: border-color .2s ease, background .25s ease;
}
.option:hover { border-color: var(--amber); color: var(--ink); }
.option.is-active { background: var(--amber-t); border-color: var(--amber); }
.option__title { font-size: 14.5px; font-weight: 500; }
.option__note { font-variant-numeric: tabular-nums; font-size: 10.5px; color: var(--ink3); margin-top: 3px; }
.option-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }

/* Radio rows — instance size picker */
.pickrow {
  width: 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
  align-items: center; gap: 8px; text-align: left;
  background: transparent; border: 0; border-bottom: 1px solid var(--line);
  padding: 15px 16px; color: var(--ink); transition: background .28s ease;
}
.pickrow:last-child { border-bottom: 0; }
.pickrow:hover { background: var(--amber-t); }
.pickrow.is-active { background: var(--amber-t); }
.pickrow__name { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 500; }
.pickrow__dot { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--line2); flex-shrink: 0; transition: border-color .2s, background .2s; }
.pickrow.is-active .pickrow__dot { border-color: var(--amber); background: var(--amber); }
.pickrow__spec { font-variant-numeric: tabular-nums; font-size: 12px; color: var(--ink2); }
.pickrow__price { font-variant-numeric: tabular-nums; font-size: 13px; font-weight: 500; color: var(--amber); text-align: right; }

/* 5.7 Tabs */
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.tabs > a, .tabs > button { background: transparent; border: 0; border-bottom: 2px solid transparent; color: var(--ink3); padding: 11px 14px; font-size: 13.5px; font-weight: 500; margin-bottom: -1px; transition: color .2s, border-color .25s; }
.tabs > a:hover, .tabs > button:hover { color: var(--ink); }
.tabs > .is-active { border-bottom-color: var(--amber); color: var(--ink); }

/* Folder tabs — the home comparison table */
.ftabs { display: flex; gap: 4px; flex-wrap: wrap; }
.ftabs > button {
  background: transparent; border: 1px solid transparent; border-bottom-color: transparent;
  color: var(--ink3); padding: 12px 22px; font-size: 15px; font-weight: 500;
  border-radius: 14px 14px 0 0; transition: background .28s ease, color .22s ease, border-color .28s ease;
}
.ftabs > button:hover { color: var(--ink); }
.ftabs > button.is-active { background: var(--surface); border-color: var(--line); border-bottom-color: var(--surface); color: var(--ink); }
.ftabs-panel { background: var(--surface); border: 1px solid var(--line); border-radius: 0 var(--r-lg) var(--r-lg) var(--r-lg); box-shadow: var(--shadow1); overflow: hidden; }

/* 5.8 Accordion */
.accordion { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow1); overflow: hidden; }
.accordion__item { border-bottom: 1px solid var(--line); }
.accordion__item:last-child { border-bottom: 0; }
.accordion__btn { width: 100%; text-align: left; background: transparent; border: 0; padding: 20px 26px; display: flex; justify-content: space-between; gap: 20px; align-items: center; color: var(--ink); }
.accordion__q { font-size: 17px; font-weight: 500; letter-spacing: -.01em; }
.accordion__sign { font-size: 20px; color: var(--ink3); flex-shrink: 0; line-height: 1; transition: transform .25s var(--ease); }
.accordion__btn[aria-expanded="true"] .accordion__sign { transform: rotate(45deg); }
.accordion__panel { display: none; padding: 0 26px 22px; color: var(--ink2); font-size: 15.5px; line-height: 1.7; max-width: 720px; }
.accordion__btn[aria-expanded="true"] + .accordion__panel { display: block; animation: slidein .28s var(--ease); }

/* 5.9 Steps / progress */
.steps { display: flex; gap: 0; flex-wrap: wrap; }
.steps__item { flex: 1 1 180px; text-align: left; background: transparent; border: 0; border-top: 3px solid var(--line); padding: 14px 0 0; margin-right: 10px; color: inherit; }
.steps__n { font-variant-numeric: tabular-nums; font-size: 10.5px; letter-spacing: .12em; color: var(--ink3); }
.steps__label { font-size: 15px; font-weight: 500; color: var(--ink3); margin-top: 3px; }
.steps__item.is-done { border-top-color: var(--amber); }
.steps__item.is-done .steps__n { color: var(--amber); }
.steps__item.is-done .steps__label { color: var(--ink); }

.numstep { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; }
.numstep__n { font-variant-numeric: tabular-nums; font-size: 11px; color: var(--amber); letter-spacing: .1em; }
.numstep__t { font-size: 18px; font-weight: 500; margin: 0; letter-spacing: -.01em; }

.meter { height: 6px; background: var(--surface2); border-radius: var(--r-pill); overflow: hidden; }
.meter > span { display: block; height: 100%; background: var(--amber); border-radius: inherit; }
.meter--warn > span { background: var(--warn); }

.bars { display: flex; align-items: flex-end; gap: 2px; height: 40px; }
.bars > i { flex: 1; background: var(--amber); opacity: .8; border-radius: 1px; }

/* 5.10 Notices */
.notice { display: flex; gap: 12px; align-items: flex-start; border: 1px solid var(--line); border-left-width: 3px; border-radius: var(--r-md); background: var(--surface); padding: 15px 18px; font-size: 14px; color: var(--ink2); line-height: 1.6; }
.notice strong { color: var(--ink); font-weight: 500; display: block; margin-bottom: 2px; }
.notice--warn { border-left-color: var(--warn); background: var(--warn-t); }
.notice--ok { border-left-color: var(--ok); background: var(--ok-t); }
.notice--info { border-left-color: var(--info); background: var(--info-t); }
.notice--amber { border-left-color: var(--amber); background: var(--amber-t); }

.empty { text-align: center; padding: 56px 24px; color: var(--ink3); }
.empty__title { font-size: 17px; font-weight: 500; color: var(--ink); margin-bottom: 6px; }

/* 5.11 Console / terminal */
.console { border: 1px solid var(--panel-line); border-radius: var(--r-md); background: var(--panel); overflow: hidden; }
.console__head { padding: 14px 18px; border-bottom: 1px solid var(--panel-line); display: flex; justify-content: space-between; align-items: center; font-variant-numeric: tabular-nums; font-size: 11px; color: var(--panel-dim); letter-spacing: .08em; }
.console__body { padding: 18px; font-family: var(--mono); font-size: 12px; line-height: 1.85; color: var(--panel-dim); overflow-x: auto; }
.console__body .is-prompt { color: var(--panel-ink); }
.caret { display: inline-block; width: 6px; height: 12px; background: var(--amber); animation: blink 1.1s infinite; vertical-align: -1px; }

/* 5.12 Breadcrumb / pagination */
.crumb { display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--ink3); flex-wrap: wrap; }
.crumb a { color: var(--ink3); }
.crumb a:hover { color: var(--amber); }

.pager { display: flex; gap: 6px; justify-content: center; align-items: center; flex-wrap: wrap; }
.pager a, .pager span { min-width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: var(--r-md); font-size: 14px; color: var(--ink2); background: var(--surface); padding-inline: 10px; }
.pager a:hover { border-color: var(--amber); color: var(--amber-d); }
.pager .is-active { background: var(--amber); border-color: var(--amber); color: var(--on-amber); }
.pager .is-disabled { opacity: .4; pointer-events: none; }

/* 5.13 Ticket thread */
.msg { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--bg); padding: 16px 18px; }
.msg--staff { border-color: var(--amber); background: var(--amber-t); }
.msg__head { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.msg__who { font-size: 13.5px; font-weight: 500; }
.msg__when { font-variant-numeric: tabular-nums; font-size: 10.5px; color: var(--ink3); }
.msg__body { font-size: 14px; line-height: 1.65; color: var(--ink2); }
.msg__body p + p { margin-top: 12px; }

.listnav__item { width: 100%; text-align: left; background: transparent; border: 0; border-bottom: 1px solid var(--line); border-left: 2px solid transparent; padding: 15px 18px; color: var(--ink); transition: background .2s; display: block; }
.listnav__item:last-child { border-bottom: 0; }
.listnav__item:hover { background: var(--surface2); color: var(--ink); }
.listnav__item.is-active { background: var(--amber-t); border-left-color: var(--amber); }

/* Comparison — us against the field, on one shape. Bars are inline-width so the
   data lives in the markup and stays readable with CSS off. */
.compare { background: var(--panel); color: var(--panel-ink); border: 1px solid var(--panel-line); border-radius: var(--r-lg); overflow: hidden; }
.compare__head { display: flex; justify-content: space-between; gap: 16px; padding: 18px 24px; border-bottom: 1px solid var(--panel-line); font-family: var(--mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--panel-dim); }
.compare__rows { padding: 20px 24px; display: flex; flex-direction: column; gap: 14px; }
.compare__row { display: grid; grid-template-columns: minmax(120px, 176px) 1fr minmax(56px, auto); align-items: center; gap: 16px; }
.compare__name { display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--panel-dim); line-height: 1.25; }
.compare__track { height: 40px; border-radius: 8px; background: rgba(255, 255, 255, .05); overflow: hidden; }
.compare__bar { height: 100%; border-radius: 8px; background: rgba(255, 255, 255, .14); transition: width .8s var(--ease); }
.compare__val { font-size: 19px; font-weight: 500; text-align: right; color: var(--panel-dim); font-variant-numeric: tabular-nums; }
.compare__row--us .compare__name { color: var(--panel-ink); font-weight: 600; }
.compare__row--us .compare__bar { background: var(--amber); }
.compare__row--us .compare__val { color: var(--amber); font-weight: 600; }
.compare__foot { padding: 0 24px 20px; font-family: var(--mono); font-size: 12px; line-height: 1.6; color: var(--panel-dim); }
@media (max-width: 620px) {
  .compare__row { grid-template-columns: 1fr minmax(52px, auto); }
  .compare__track { grid-column: 1 / -1; height: 26px; }
}

/* Stat row — thin rule, big figure, mono caption. Reads as evidence rather
   than decoration, and holds its shape down to two columns. */
.statrow { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); gap: 28px 32px; }
.statrow__item { border-top: 1px solid var(--line2); padding-top: 16px; }
.statrow__v { font-size: clamp(30px, 3.4vw, 42px); font-weight: 650; letter-spacing: -.035em; line-height: 1; font-variant-numeric: tabular-nums; }
.statrow__k { font-family: var(--mono); font-size: 11px; line-height: 1.5; letter-spacing: .06em; text-transform: uppercase; color: var(--ink3); margin-top: 10px; }

/* Asymmetric section header: eyebrow + heading left, supporting copy right. */
.sechead { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 24px 48px; align-items: end; }
.sechead__eyebrow { font-family: var(--mono); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink3); display: block; margin-bottom: 14px; }
.sechead__aside { color: var(--ink2); font-size: 16px; line-height: 1.6; max-width: 440px; }

/* Logo marquee — a quiet "works with" strip, faded at both edges. */
.marquee { position: relative; overflow: hidden; padding: 26px 0; border-block: 1px solid var(--line); }
.marquee::before, .marquee::after { content: ''; position: absolute; top: 0; bottom: 0; width: 90px; z-index: 2; pointer-events: none; }
.marquee::before { left: 0; background: linear-gradient(90deg, var(--bg), transparent); }
.marquee::after { right: 0; background: linear-gradient(270deg, var(--bg), transparent); }
.marquee__track { display: flex; align-items: center; gap: 56px; width: max-content; animation: marquee 34s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__item { display: flex; align-items: center; gap: 11px; color: var(--ink3); font-size: 15px; font-weight: 500; white-space: nowrap; }
.marquee__item img { width: 24px; height: 24px; object-fit: contain; }
@media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; } }

/* Featured card — the one option we want chosen, in panel ink. */
.card--feature { background: var(--panel); border-color: var(--panel-line); color: var(--panel-ink); }
.card--feature .t-h5, .card--feature .price__amount, .card--feature .card__title { color: var(--panel-ink); }
.card--feature .t-sm, .card--feature .t-body, .card--feature .price__unit { color: var(--panel-dim); }
.card--feature [style*="border-top"] { border-color: var(--panel-line) !important; }
/* In dark mode --panel equals --surface, so the card would vanish into its
   neighbours. Lift it one step and add the brand edge instead. */
[data-theme="dark"] .card--feature { background: var(--surface2); border-color: var(--amber); }

/* Mono inline link — small, underlined, deliberate. */
.link-mono { font-family: var(--mono); font-size: 12.5px; color: var(--amber-d); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.link-mono:hover { color: var(--amber); }

/* --------------------------------------------------------------------------
   5.14b Editorial — blog index and article
   -------------------------------------------------------------------------- */
.lede {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  gap: 0; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow1); overflow: hidden;
  transition: border-color .3s, box-shadow .35s var(--ease), transform .35s var(--ease);
}
a.lede:hover { border-color: var(--amber); box-shadow: var(--shadow2); transform: translateY(-3px); color: inherit; }
.lede__body { padding: clamp(28px, 3.4vw, 44px); display: flex; flex-direction: column; gap: 16px; }
.lede__title { font-size: clamp(26px, 2.9vw, 36px); font-weight: 650; letter-spacing: -.03em; line-height: 1.08; color: var(--ink); }
.lede__art { background: var(--panel); position: relative; overflow: hidden; min-height: 240px; display: flex; align-items: center; justify-content: center; padding: 32px; }
.lede__art::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(252,252,252,.10) 1.4px, transparent 1.4px); background-size: 24px 24px; }
.lede__glyph { position: relative; color: var(--amber); opacity: .9; }
.lede__glyph svg { width: 84px; height: 84px; }

/* Three-up so a six-post page fills two rows exactly, with no dead cells. */
.postgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }

.post { display: flex; flex-direction: column; gap: 11px; padding: 26px; background: var(--surface); min-height: 230px; color: inherit; transition: background .25s; }
.post:hover { background: var(--amber-t); color: inherit; }
.post__title { font-size: 18px; font-weight: 600; letter-spacing: -.02em; line-height: 1.24; color: var(--ink); }
.post__meta { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.post__foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: auto; }

/* Article */
.article__head { border-bottom: 1px solid var(--line); }
.article__meta { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: var(--amber); z-index: 900; transition: width .1s linear; }
.toc { position: sticky; top: 86px; }
.toc__link { display: block; font-size: 13.5px; color: var(--ink2); padding: 7px 0 7px 14px; border-left: 2px solid var(--line); transition: color .2s, border-color .2s; }
.toc__link:hover { color: var(--ink); }
.toc__link.is-active { color: var(--amber-d); border-left-color: var(--amber); font-weight: 500; }
.share { display: flex; gap: 8px; flex-wrap: wrap; }
.share a, .share button { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 1px solid var(--line2); border-radius: var(--r-pill); color: var(--ink2); background: transparent; transition: border-color .2s, color .2s, background .2s; }
.share a:hover, .share button:hover { border-color: var(--amber); color: var(--amber-d); background: var(--amber-t); }
.postnav { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 14px; }
.postnav__item { padding: 22px 24px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); color: inherit; transition: border-color .2s, transform .3s var(--ease); }
.postnav__item:hover { border-color: var(--amber); color: inherit; transform: translateY(-2px); }
.postnav__item--next { text-align: right; }

/* Target size — WCAG 2.5.8 asks for 24×24 CSS px on standalone controls.
   Links inline in a sentence are exempt and deliberately untouched; these are
   all navigation lists, breadcrumbs and footers, where the text line box alone
   was only 16–21px tall. */
a.t-sm { display: inline-flex; align-items: center; min-height: 26px; }
.crumb a { padding-block: 4px; }
.topbar__links a { padding-block: 6px; }
.footer__links a, .footer__legal a { display: inline-flex; align-items: center; min-height: 26px; }
.toc__link { min-height: 26px; }
/* Links inside data rows, key/value pairs and prose lists are standalone
   targets too — the cell padding is not part of the hit area. */
.table__row a, .kv a, .table__head .is-sortable,
.prose li > a:only-child, .t-h5 > a:only-child { display: inline-flex; align-items: center; min-height: 24px; }

/* --------------------------------------------------------------------------
   5.15 Overlays
   Built on the native <dialog> element, which gives focus trapping, Escape to
   close and an inert background for free — far less to get wrong than a
   hand-rolled modal.
   -------------------------------------------------------------------------- */
.modal {
  border: 0; padding: 0; background: transparent; color: inherit;
  max-width: min(92vw, 520px); width: 100%; max-height: 88vh;
  overscroll-behavior: contain;
}
.modal::backdrop { background: rgba(16, 20, 28, .55); backdrop-filter: blur(2px); }
.modal[open] { animation: modal-in .22s var(--ease); }
.modal[open]::backdrop { animation: fade-in .22s ease; }
.modal--wide { max-width: min(92vw, 780px); }
.modal--sm { max-width: min(92vw, 400px); }

.modal__dialog {
  background: var(--surface); border: 1px solid var(--line2);
  border-radius: var(--r-lg); box-shadow: var(--shadow2);
  display: flex; flex-direction: column; max-height: 88vh; overflow: hidden;
}
.modal__head { padding: 20px 24px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.modal__title { font-size: 18px; font-weight: 500; letter-spacing: -.01em; }
.modal__sub { font-size: 13.5px; color: var(--ink2); margin-top: 4px; }
.modal__body { padding: 22px 24px; overflow-y: auto; font-size: 14.5px; line-height: 1.65; color: var(--ink2); }
.modal__body > * + * { margin-top: 14px; }
.modal__foot { padding: 16px 24px; border-top: 1px solid var(--line); display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; background: var(--surface2); }
.modal__x {
  background: transparent; border: 0; color: var(--ink3); padding: 4px; line-height: 0;
  border-radius: var(--r-md); flex-shrink: 0; transition: background .2s, color .2s;
}
.modal__x:hover { background: var(--surface2); color: var(--ink); }
.modal--danger .modal__title { color: var(--warn); }

/* Drawer — same dialog primitive, docked to the right edge */
.drawer { max-width: min(94vw, 420px); width: 100%; max-height: none; height: 100vh; margin: 0 0 0 auto; }
.drawer[open] { animation: drawer-in .28s var(--ease); }
.drawer .modal__dialog { border-radius: 0; height: 100vh; max-height: none; border-width: 0 0 0 1px; }

/* Toasts — stacked, auto-dismissing, announced politely */
.toast-stack {
  position: fixed; right: 18px; bottom: 18px; z-index: 950;
  display: flex; flex-direction: column; gap: 10px; align-items: flex-end;
  pointer-events: none; max-width: min(92vw, 380px);
}
/* Neutralise the UA popover defaults (centred inset, border, padding) — the
   attribute is only there to reach the top layer, not to restyle the stack. */
.toast-stack[popover] {
  inset: auto; right: 18px; bottom: 18px; margin: 0;
  border: 0; padding: 0; background: transparent; overflow: visible; width: auto;
}
.toast-stack[popover]:not(:popover-open) { display: none; }
.toast {
  pointer-events: auto; display: flex; gap: 12px; align-items: flex-start; width: 100%;
  background: var(--surface); border: 1px solid var(--line2); border-left: 3px solid var(--amber);
  border-radius: var(--r-md); box-shadow: var(--shadow2); padding: 14px 16px;
  font-size: 14px; color: var(--ink2); animation: toast-in .28s var(--ease);
}
.toast strong { display: block; color: var(--ink); font-weight: 500; margin-bottom: 2px; }
.toast--ok { border-left-color: var(--ok); }
.toast--warn { border-left-color: var(--warn); }
.toast--info { border-left-color: var(--info); }
.toast.is-leaving { animation: toast-out .22s ease forwards; }
.toast__x { background: transparent; border: 0; color: var(--ink3); line-height: 0; padding: 2px; margin-left: auto; flex-shrink: 0; }
.toast__x:hover { color: var(--ink); }

/* Popover menu — row actions, account switchers */
.menu-wrap { position: relative; display: inline-flex; }
.menu {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 700; min-width: 190px;
  background: var(--surface); border: 1px solid var(--line2); border-radius: var(--r-md);
  box-shadow: var(--shadow2); padding: 6px; display: none;
}
.menu.is-open { display: block; animation: slidein .18s var(--ease); }
.menu--left { right: auto; left: 0; }
.menu__item {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  background: transparent; border: 0; border-radius: 7px; padding: 9px 11px;
  font-size: 13.5px; color: var(--ink); transition: background .15s;
}
.menu__item:hover { background: var(--surface2); color: var(--ink); }
.menu__item--danger { color: var(--warn); }
.menu__sep { height: 1px; background: var(--line); margin: 5px 0; }
.menu__label { font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--ink3); padding: 8px 11px 4px; }

/* Tooltip — CSS-only, for short hints on icon-only controls */
[data-tip] { position: relative; }
[data-tip]::after {
  content: attr(data-tip); position: absolute; bottom: calc(100% + 8px); left: 50%;
  transform: translateX(-50%) translateY(4px); z-index: 900;
  background: var(--panel); color: var(--panel-ink); font-size: 12px; line-height: 1.4;
  padding: 7px 10px; border-radius: 7px; white-space: nowrap; pointer-events: none;
  opacity: 0; transition: opacity .18s ease, transform .18s var(--ease);
  box-shadow: var(--shadow1);
}
[data-tip]:hover::after, [data-tip]:focus-visible::after { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Cookie consent — required, so it is a real component not an afterthought */
.cookiebar {
  position: fixed; left: 18px; right: 18px; bottom: 18px; z-index: 940;
  max-width: 560px; background: var(--surface); border: 1px solid var(--line2);
  border-radius: var(--r-lg); box-shadow: var(--shadow2); padding: 20px 22px;
  display: flex; gap: 18px; flex-wrap: wrap; align-items: center;
  animation: toast-in .3s var(--ease);
}
.cookiebar__text { flex: 1; min-width: 220px; font-size: 13.5px; color: var(--ink2); line-height: 1.6; }

/* Live chat launcher */
.chat-fab {
  position: fixed; right: 18px; bottom: 18px; z-index: 930;
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--panel); color: var(--panel-ink); border: 0;
  border-radius: var(--r-pill); padding: 13px 20px; font-size: 14px; font-weight: 500;
  box-shadow: var(--shadow2); transition: transform .25s var(--ease), background .2s;
}
.chat-fab:hover { transform: translateY(-2px); background: var(--amber); color: var(--on-amber); }
.chat-fab__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); flex-shrink: 0; }

/* --------------------------------------------------------------------------
   5.16 Feedback and loading states
   -------------------------------------------------------------------------- */
.spinner {
  width: 16px; height: 16px; border-radius: 50%; flex-shrink: 0;
  border: 2px solid currentColor; border-right-color: transparent;
  animation: spin .7s linear infinite; display: inline-block;
}
.spinner--lg { width: 28px; height: 28px; border-width: 3px; }

.btn.is-loading { pointer-events: none; position: relative; color: transparent !important; }
.btn.is-loading::after {
  content: ''; position: absolute; inset: 0; margin: auto; width: 16px; height: 16px;
  border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent;
  animation: spin .7s linear infinite;
}
.btn--ghost.is-loading::after, .btn--outline.is-loading::after { border-color: var(--ink); border-right-color: transparent; }

.skeleton {
  background: linear-gradient(90deg, var(--surface2) 25%, var(--line) 37%, var(--surface2) 63%);
  background-size: 400% 100%; animation: shimmer 1.4s ease infinite;
  border-radius: 6px; height: 14px; display: block;
}
.skeleton--title { height: 22px; border-radius: 7px; }
.skeleton--circle { border-radius: 50%; }
.skeleton--block { height: 100%; border-radius: var(--r-md); }

/* Validation. Bound to aria-invalid so the visual and the a11y state cannot
   drift apart. */
.input[aria-invalid="true"], .select[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: var(--warn); background: var(--warn-t); }
.input[aria-invalid="false"]:not(:placeholder-shown) { border-color: var(--ok); }
.field__error { display: flex; gap: 6px; align-items: center; }
.field__error::before { content: '!'; display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; border-radius: 50%; background: var(--warn); color: var(--surface); font-size: 10px; font-weight: 600; flex-shrink: 0; }

/* Password strength */
.strength { display: flex; gap: 4px; margin-top: 8px; }
.strength > i { flex: 1; height: 4px; border-radius: 2px; background: var(--line2); transition: background .25s ease; }
.strength[data-level="1"] > i:nth-child(-n+1) { background: var(--warn); }
.strength[data-level="2"] > i:nth-child(-n+2) { background: var(--amber); }
.strength[data-level="3"] > i:nth-child(-n+3) { background: var(--amber); }
.strength[data-level="4"] > i { background: var(--ok); }

/* Upload dropzone */
.upload { border: 1.5px dashed var(--line2); border-radius: var(--r-md); background: var(--surface2); padding: 26px; text-align: center; transition: border-color .2s, background .2s; }
.upload.is-over { border-color: var(--amber); background: var(--amber-t); }
.upload__file { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); text-align: left; }

/* Bulk-selection action bar */
.bulkbar {
  position: sticky; bottom: 16px; z-index: 500;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: var(--panel); color: var(--panel-ink); border-radius: var(--r-pill);
  padding: 10px 12px 10px 20px; box-shadow: var(--shadow2); margin-top: 16px;
  animation: toast-in .25s var(--ease);
}
.bulkbar__count { font-size: 13.5px; font-weight: 500; }

/* Sortable table headers */
.table__head .is-sortable { display: flex; align-items: center; gap: 6px; background: transparent; border: 0; color: inherit; font: inherit; padding: 0; }
.table__head .is-sortable::after { content: '↕'; opacity: .4; font-size: 11px; }
.table__head .is-sortable[aria-sort="ascending"]::after { content: '↑'; opacity: 1; color: var(--amber); }
.table__head .is-sortable[aria-sort="descending"]::after { content: '↓'; opacity: 1; color: var(--amber); }

/* Full-page error / status screens */
.errpage { min-height: 70vh; display: flex; align-items: center; justify-content: center; text-align: center; padding: 64px 24px; }
.errpage__code { font-family: var(--mono); font-size: clamp(64px, 12vw, 128px); font-weight: 700; line-height: 1; letter-spacing: -.04em; color: var(--amber); opacity: .9; }

/* --------------------------------------------------------------------------
   6. Site chrome (marketing)
   -------------------------------------------------------------------------- */
.topbar { border-bottom: 1px solid var(--line); background: var(--surface2); }
.topbar__inner { min-height: 34px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.topbar__status { display: flex; align-items: center; gap: 8px; font-variant-numeric: tabular-nums; font-size: 11px; color: var(--ink3); }
.topbar__links { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.topbar__links a { font-size: 12.5px; color: var(--ink2); padding: 4px 0; }
.topbar__links a:hover { color: var(--amber); }

.header { position: sticky; top: 0; z-index: 800; background: var(--bg); border-bottom: 1px solid var(--line); }
.header__inner { display: flex; align-items: center; gap: 24px; min-height: 62px; }

.logo { display: flex; align-items: center; gap: 9px; color: var(--ink); flex-shrink: 0; }
.logo:hover { color: var(--ink); }
/* Mark: a rack elevation — three stacked units, the live one in brand amber.
   Drawn with currentColor so it works on any ground without a variant. */
.logo__mark { width: 30px; height: 30px; flex-shrink: 0; color: var(--ink); display: block; }
.logo__text { font-size: 19px; font-weight: 600; letter-spacing: -.025em; color: var(--ink); }
.logo__text b { color: var(--amber); font-weight: 600; }
.logo--sm .logo__mark { width: 25px; height: 25px; }
.logo--sm .logo__text { font-size: 16px; }
.logo--lg .logo__mark { width: 34px; height: 34px; }
.logo--lg .logo__text { font-size: 22px; }
/* On a dark panel the mark and wordmark invert with the surrounding text. */
.band--panel .logo__mark, .app__side .logo__mark { color: var(--ink); }

.nav { display: flex; align-items: center; gap: 2px; flex: 1; }
.nav > li { position: relative; }
.nav__link { display: flex; align-items: center; gap: 5px; background: transparent; border: 0; padding: 8px 11px; border-radius: var(--r-pill); font-size: 14px; font-weight: 500; color: var(--ink); transition: background .2s, color .2s; }
.nav__link:hover { background: var(--surface2); color: var(--ink); }
.nav__link.is-active { color: var(--amber); }
.nav__caret { width: 9px; height: 9px; transition: transform .25s var(--ease); }
.nav__link[aria-expanded="true"] .nav__caret { transform: rotate(180deg); }

.mega {
  position: absolute; top: calc(100% + 10px); left: -12px; z-index: 810;
  min-width: 560px; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow2); padding: 20px;
  display: none; grid-template-columns: 1fr 1fr; gap: 6px;
}
.mega.is-open { display: grid; animation: slidein .22s var(--ease); }
.mega__item { display: flex; gap: 14px; padding: 14px; border-radius: var(--r-md); transition: background .2s; }
.mega__item:hover { background: var(--amber-t); }
.mega__t { font-size: 15px; font-weight: 500; color: var(--ink); }
.mega__b { font-size: 13px; color: var(--ink2); line-height: 1.5; margin-top: 3px; }
.mega__foot { grid-column: 1 / -1; border-top: 1px solid var(--line); margin-top: 8px; padding-top: 14px; display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; font-size: 13.5px; }

.header__actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.burger { display: none; background: transparent; border: 1px solid var(--line2); border-radius: var(--r-md); width: 40px; height: 40px; align-items: center; justify-content: center; color: var(--ink); }

.footer { background: var(--surface); border-radius: var(--r-lg) var(--r-lg) 0 0; position: relative; overflow: hidden; margin-top: 100px; }
.footer__top { display: flex; flex-wrap: wrap; gap: 56px 48px; padding: 80px 0 56px; }
.footer__brand { flex: 1 1 300px; min-width: 260px; max-width: 340px; }
/* auto-fit against a column's own natural width, not a share of the row, so all
   four sit on one line whenever there is room and drop to 3 / 2 as it narrows */
.footer__cols { flex: 2 1 520px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); gap: 40px 28px; }
.footer__coltitle { font-size: 16px; font-weight: 500; color: var(--ink); margin-bottom: 18px; }
.footer__links { display: flex; flex-direction: column; gap: 13px; align-items: flex-start; }
.footer__links a { font-size: 15.5px; color: var(--ink2); }
.footer__links a:hover { color: var(--amber); }
.footer__social { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.footer__social a { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: var(--r-pill); border: 1px solid var(--line); color: var(--ink2); transition: border-color .2s, background .2s, color .2s; }
.footer__social a:hover { border-color: var(--amber); background: var(--amber-t); color: var(--amber-d); }
.footer__bottom { display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; align-items: center; padding: 26px 0 34px; }
.footer__bottom a, .footer__bottom span { font-size: 15px; color: var(--ink3); }
.footer__legal { display: flex; gap: 26px; flex-wrap: wrap; }

/* --------------------------------------------------------------------------
   7. App chrome (client area)
   -------------------------------------------------------------------------- */
.app { min-height: 100vh; display: flex; flex-wrap: wrap; background: var(--bg); }
.app__side {
  width: 240px; flex: 1 1 240px; max-width: 272px; border-right: 1px solid var(--line);
  background: var(--surface); display: flex; flex-direction: column;
  padding: 16px 12px; gap: 3px; min-height: 100vh;
}
.app__main { flex: 999 1 560px; min-width: 0; }
.app__body { padding: 22px; }

.snav { display: flex; flex-direction: column; gap: 2px; }

/* Collapsible groups. Native <details> so they work with JS off and are
   keyboard-operable for free; the group holding the current page ships open. */
.snav__group { border-radius: var(--r-md); }
.snav__group + .snav__group { margin-top: 2px; }
.snav__grouphead {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 11px; border-radius: var(--r-md); cursor: pointer;
  font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink3); list-style: none; transition: background .2s, color .2s;
}
.snav__grouphead::-webkit-details-marker { display: none; }
.snav__grouphead:hover { background: var(--surface2); color: var(--ink2); }
.snav__groupicon { width: 15px; height: 15px; flex-shrink: 0; }
.snav__grouphead > span { flex: 1; }
.snav__caret { width: 9px; height: 9px; flex-shrink: 0; transition: transform .25s var(--ease); }
.snav__group[open] > .snav__grouphead { color: var(--ink2); }
.snav__group[open] > .snav__grouphead .snav__caret { transform: rotate(180deg); }
.snav__items { display: flex; flex-direction: column; gap: 2px; padding: 2px 0 6px 10px; margin-left: 7px; border-left: 1px solid var(--line); animation: slidein .2s var(--ease); }
.snav__item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: transparent; border: 0; border-radius: var(--r-md); padding: 9px 11px;
  color: var(--ink2); font-size: 14px; font-weight: 500; transition: background .2s, color .2s;
}
.snav__item:hover { background: var(--surface2); color: var(--ink); }
.snav__item.is-active { background: var(--amber-t); color: var(--ink); font-weight: 600; }
.snav__badge { font-variant-numeric: tabular-nums; font-size: 10.5px; color: var(--ink2); background: var(--surface2); padding: 2px 7px; border-radius: var(--r-pill); }

.app__user { margin-top: auto; border-top: 1px solid var(--line); padding-top: 12px; display: flex; flex-direction: column; gap: 4px; }
.app__userrow { display: flex; align-items: center; gap: 10px; padding: 6px 8px; }
.app__avatar { width: 30px; height: 30px; border-radius: var(--r-md); background: var(--surface2); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; font-variant-numeric: tabular-nums; font-size: 11.5px; font-weight: 500; color: var(--ink2); flex-shrink: 0; }

/* Mobile bar — only shown once the sidebar becomes a drawer. */
.app__bar { display: none; }
.app__scrim { display: none; }

.app__header {
  border-bottom: 1px solid var(--line); background: var(--surface); padding: 12px 22px;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap; position: sticky; top: 0; z-index: 600;
}
.app__crumb { font-size: 13px; font-weight: 500; color: var(--ink3); }
.app__title { font-size: 16.5px; font-weight: 500; letter-spacing: -.02em; margin-top: 2px; }
.credit-chip { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: var(--r-pill); padding: 7px 11px; }
.credit-chip__k { font-variant-numeric: tabular-nums; font-size: 10px; color: var(--ink3); letter-spacing: .08em; }
.credit-chip__v { font-variant-numeric: tabular-nums; font-size: 12.5px; font-weight: 500; }

.welcome { background: var(--panel); border-radius: var(--r-lg); padding: 26px 28px; display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; align-items: center; }
.welcome__t { font-size: 20px; font-weight: 500; color: var(--panel-ink); letter-spacing: -.01em; }
.welcome__b { font-size: 14.5px; color: var(--panel-dim); margin-top: 5px; }
.welcome__search { display: flex; align-items: center; gap: 10px; background: rgba(255, 255, 255, .07); border-radius: var(--r-pill); padding: 6px 8px 6px 18px; min-width: 260px; flex: 1; max-width: 400px; }
.welcome__search input { flex: 1; background: transparent; border: 0; outline: none; color: var(--panel-ink); font-size: 14.5px; min-width: 0; }
.welcome__search:focus-within { outline: 2px solid var(--amber); outline-offset: 2px; }
.welcome__search input::placeholder { color: var(--panel-dim); }

.statgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 45%), 1fr)); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow1); overflow: hidden; }
.statgrid > div { padding: 20px 22px; box-shadow: 1px 0 0 0 var(--line), 0 1px 0 0 var(--line); }

/* --------------------------------------------------------------------------
   8. Utilities
   -------------------------------------------------------------------------- */
.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: 6px; }
.mt-2 { margin-top: 12px; }
.mt-3 { margin-top: 18px; }
.mt-4 { margin-top: 24px; }
.mt-5 { margin-top: 32px; }
.mt-6 { margin-top: 44px; }
.mb-1 { margin-bottom: 6px; }
.mb-2 { margin-bottom: 12px; }
.mb-3 { margin-bottom: 18px; }
.mb-4 { margin-bottom: 24px; }
.mb-5 { margin-bottom: 32px; }
.mb-6 { margin-bottom: 44px; }
.ml-auto { margin-left: auto; }
.mt-auto { margin-top: auto; }
.pb-lg { padding-bottom: 100px; }

.maxw-xs { max-width: 420px; }
.maxw-sm { max-width: 540px; }
.maxw-md { max-width: 640px; }
.maxw-lg { max-width: 780px; }
.w-full { width: 100%; }
.flex-1 { flex: 1; }
.nowrap { white-space: nowrap; }
.hide { display: none !important; }
.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; }

.price { display: flex; align-items: baseline; gap: 5px; }
.price__amount { font-size: 27px; font-weight: 500; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.price__unit { font-size: 12.5px; color: var(--ink3); }
.price--lg .price__amount { font-size: 29px; }
.price--xl .price__amount { font-size: 34px; }

.tick { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; color: var(--ink2); }
.tick::before { content: '✓'; color: var(--ok); flex-shrink: 0; }
.tick--amber::before { color: var(--amber); }

.hero-art { position: relative; border-radius: var(--r-lg); background: linear-gradient(160deg, var(--amber-t) 0%, var(--surface2) 100%); border: 1px solid var(--line); box-shadow: var(--shadow2); min-height: 400px; display: flex; align-items: center; justify-content: center; padding: 36px; overflow: hidden; }
.hero-art img { width: 100%; max-width: 440px; height: auto; position: relative; z-index: 1; }
.hero-art::before, .hero-art::after { content: ''; position: absolute; border-radius: 50%; background: var(--amber); }
.hero-art::before { right: -70px; bottom: -70px; width: 280px; height: 280px; opacity: .10; }
.hero-art::after { left: -50px; top: -50px; width: 200px; height: 200px; opacity: .07; }

/* --------------------------------------------------------------------------
   5.14 Hero illustration
   Inline SVG so it inherits the theme tokens. Everything is styled here rather
   than with presentation attributes, and every animation is decorative — the
   drawing is complete and legible with motion disabled.
   -------------------------------------------------------------------------- */
.hero-svg { width: 100%; height: auto; display: block; max-width: 100%; margin: 0 auto; position: relative; z-index: 1; }

/* The SVG carries its own glow and depth, so this variant drops the decorative
   blobs and most of the padding rather than competing with the artwork. */
.hero-art--svg { padding: 14px; min-height: 0; background: linear-gradient(165deg, var(--amber-t) 0%, var(--surface2) 58%, var(--surface) 100%); }
.hero-art--svg::before, .hero-art--svg::after { display: none; }

.hs-dot { fill: var(--ink3); opacity: .22; }
.hs-glow-a { stop-color: var(--amber); stop-opacity: .18; }
.hs-glow-b { stop-color: var(--amber); stop-opacity: 0; }

/* Protection dome — dashes travel the arc like a sweep */
.hs-dome { fill: none; stroke: var(--amber); stroke-width: 1.6; stroke-dasharray: 5 7; opacity: .55; animation: hs-sweep 9s linear infinite; }
.hs-dome--2 { opacity: .3; animation-duration: 13s; animation-direction: reverse; }

/* Links: a static rail plus a travelling packet */
.hs-link { fill: none; stroke: var(--ink3); stroke-width: 2; opacity: .3; }
.hs-flow { fill: none; stroke: var(--amber); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 6 100; stroke-dashoffset: 106; animation: hs-packet 2.6s linear infinite; animation-delay: var(--d, 0s); }

.hs-nodebox { fill: var(--surface); stroke: var(--line2); stroke-width: 1.5; }
.hs-node--hot .hs-nodebox { stroke: var(--amber); }
.hs-icon { fill: none; stroke: var(--amber-d); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hs-pulse { fill: none; stroke: var(--amber); stroke-width: 1.5; opacity: 0; transform-box: fill-box; transform-origin: center; animation: hs-pulse 3.2s ease-out infinite; animation-delay: var(--d, 0s); }
.hs-label { fill: var(--ink2); font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-anchor: middle; }
.hs-cloud { animation: hs-drift 7s ease-in-out infinite; animation-delay: var(--d, 0s); transform-box: fill-box; transform-origin: center; }

/* Rack stays dark in both themes — it reads as hardware, not as a surface */
.hs-rack { fill: var(--panel); stroke: var(--panel-line); stroke-width: 1.5; }
.hs-unit { fill: rgba(255, 255, 255, .05); stroke: var(--panel-line); stroke-width: 1; }
.hs-unit--hot { fill: rgba(224, 135, 59, .16); stroke: var(--amber); }
.hs-led { fill: var(--ok); animation: hs-led 2.4s ease-in-out infinite; animation-delay: var(--d, 0s); }
.hs-led--idle { fill: var(--panel-dim); opacity: .3; animation: none; }
.hs-led--hot { fill: var(--amber); }
.hs-bar { fill: var(--panel-dim); opacity: .22; }
.hs-racklabel { fill: var(--ink3); font-family: var(--mono); font-size: 9.5px; letter-spacing: .16em; text-anchor: middle; }
.hs-particle { fill: var(--amber); opacity: .45; animation: hs-drift 6s ease-in-out infinite; animation-delay: var(--d, 0s); transform-box: fill-box; transform-origin: center; }

/* Live badge — a slow pulse behind the dot, signalling real-time stock */
.pill--live { display: inline-flex; align-items: center; gap: 9px; }
.pill__dot { position: relative; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); flex-shrink: 0; }
.pill__dot::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: var(--ok); animation: hs-ping 2.4s ease-out infinite;
}

/* Shiny text — a light sweep, for light text on a dark ground only. On dark
   text it drops contrast below readable, so keep it off informational copy.
   (ReactBits ShinyText) */
.shine {
  background: linear-gradient(100deg, currentColor 40%, #fff 50%, currentColor 60%);
  background-size: 240% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: hs-shine 5s linear infinite;
}
[data-theme="dark"] .shine { background-image: linear-gradient(100deg, currentColor 40%, #fff8ef 50%, currentColor 60%); }

/* Spotlight — a soft glow that tracks the pointer across a card
   (ReactBits SpotlightCard). Coordinates are set by smk.js. */
.card--lift { --sx: 50%; --sy: 0%; }
.card--lift::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(340px circle at var(--sx) var(--sy), rgba(224, 135, 59, .12), transparent 70%);
  opacity: 0; transition: opacity .35s ease;
}
.card--lift:hover::after { opacity: 1; }
.card--lift > * { position: relative; z-index: 1; }

/* Rack elevation — a designed stand-in for facility photography that still
   reads as finished art. Swap the whole block for a photo when one exists. */
.rack { background: var(--panel); border-radius: var(--r-lg); padding: 22px; box-shadow: var(--shadow2); }
.rack__head { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-bottom: 14px; border-bottom: 1px solid var(--panel-line); }
.rack__head .t-eyebrow { color: var(--panel-dim); }
.rack__units { display: flex; flex-direction: column; gap: 6px; padding: 16px 0; }
.rack__u {
  display: flex; align-items: center; gap: 8px;
  background: rgba(255, 255, 255, .04); border: 1px solid var(--panel-line);
  border-radius: 6px; padding: 11px 14px;
  font-family: var(--mono); font-size: 11px; color: var(--panel-dim);
}
.rack__u i { width: 5px; height: 5px; border-radius: 50%; background: var(--ok); flex-shrink: 0; opacity: .7; }
.rack__u i:nth-child(2) { background: var(--panel-dim); opacity: .35; }
.rack__u i:nth-child(3) { background: var(--panel-dim); opacity: .35; }
.rack__u span { flex: 1; margin-left: 8px; letter-spacing: .02em; }
.rack__u b { font-weight: 400; opacity: .5; }
.rack__u.is-hot { border-color: var(--amber); background: rgba(224, 135, 59, .1); color: var(--panel-ink); }
.rack__u.is-hot i:first-child { background: var(--amber); opacity: 1; }
.rack__foot { padding-top: 14px; border-top: 1px solid var(--panel-line); font-size: 13px; color: var(--panel-dim); }

.cta-band { background: var(--amber); color: var(--on-amber); border-radius: var(--r-lg); padding: clamp(32px, 4vw, 56px); display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 28px; align-items: center; }
.cta-band h2 { color: var(--on-amber); font-size: clamp(28px, 3.2vw, 40px); letter-spacing: -.03em; font-weight: 650; line-height: 1.06; }
.cta-band p { color: rgba(26, 26, 28, .78); font-size: 16px; margin-top: 14px; max-width: 460px; }
.cta-band__actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }
.cta-band .btn--onpanel { border-color: rgba(26, 26, 28, .35); color: var(--on-amber); }
.cta-band .btn--onpanel:hover { background: rgba(26, 26, 28, .1); border-color: var(--on-amber); color: var(--on-amber); }

/* --------------------------------------------------------------------------
   9. Motion
   -------------------------------------------------------------------------- */
@keyframes blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes hs-packet { to { stroke-dashoffset: 0; } }
@keyframes hs-sweep { to { stroke-dashoffset: -120; } }
@keyframes hs-pulse { 0% { opacity: .55; transform: scale(.7); } 70% { opacity: 0; transform: scale(1.18); } 100% { opacity: 0; transform: scale(1.18); } }
@keyframes hs-led { 0%, 44% { opacity: 1; } 52%, 96% { opacity: .3; } 100% { opacity: 1; } }
@keyframes hs-drift { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes hs-shine { to { background-position: -240% 0; } }
@keyframes marquee { to { transform: translateX(-50%); } }
@keyframes hs-ping { 0% { opacity: .7; transform: scale(1); } 70%, 100% { opacity: 0; transform: scale(2.8); } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes modal-in { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes drawer-in { from { transform: translateX(100%); } to { transform: none; } }
@keyframes toast-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes toast-out { to { opacity: 0; transform: translateX(20px); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
@keyframes slidein { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes reveal { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* Reveal is assign-on-enter: elements sit visible by default and the animation
   is only attached once they cross into view, so nothing is ever stranded
   hidden if the observer never fires or JS is off. */
.reveal { animation: reveal .6s var(--ease) both; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* --------------------------------------------------------------------------
   10. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .mega { min-width: 480px; }
}

@media (max-width: 900px) {
  :root { --gutter: 18px; }
  .section { padding-top: 60px; }
  .section--last { padding-bottom: 72px; }
  .footer__top { padding: 56px 0 40px; gap: 40px 32px; }

  .burger { display: flex; }
  .header__inner { min-height: 58px; justify-content: space-between; gap: 12px; }
  .nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 2px;
    background: var(--surface); border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow2); padding: 12px var(--gutter) 20px; max-height: calc(100vh - 58px); overflow-y: auto;
  }
  .nav.is-open { display: flex; animation: slidein .22s var(--ease); }
  .nav__link { width: 100%; justify-content: space-between; padding: 12px 10px; font-size: 15px; border-radius: var(--r-md); }
  .mega { position: static; min-width: 0; box-shadow: none; border: 0; border-radius: 0; padding: 4px 0 12px; grid-template-columns: 1fr; }
  .mega__item { padding: 10px; }
  .header__actions .btn--ghost { display: none; }

  /* The sidebar becomes an off-canvas drawer. Stacked, it pushed the whole
     page down and buried the content behind 20-odd links. */
  .app__bar {
    display: flex; align-items: center; gap: 12px; flex-basis: 100%;
    padding: 10px 16px; background: var(--surface); border-bottom: 1px solid var(--line);
    position: sticky; top: 0; z-index: 620;
  }
  .app__side {
    position: fixed; top: 0; bottom: 0; left: 0; z-index: 700;
    width: min(86vw, 300px); max-width: none; flex-basis: auto; min-height: 0;
    overflow-y: auto; overscroll-behavior: contain;
    border-right: 1px solid var(--line); border-bottom: 0;
    transform: translateX(-100%); transition: transform .28s var(--ease);
    box-shadow: var(--shadow2);
  }
  .app__side.is-open { transform: none; }
  .app__scrim { display: block; position: fixed; inset: 0; z-index: 690; background: rgba(16, 20, 28, .5); backdrop-filter: blur(1px); }
  .app__header { position: static; }
  .app__main { flex-basis: 100%; }
  .app__body { padding: 16px; }
  .split__side { max-width: none; }
}

@media (max-width: 620px) {
  body { font-size: 14.5px; }
  /* Two columns at phone width squeezes card headings into three-line breaks.
     One column reads better and costs only scroll. */
  .grid--2, .grid--3, .grid--4, .grid--cards, .postgrid { grid-template-columns: 1fr; }
  .statgrid { grid-template-columns: 1fr 1fr; }
  .card { padding: 20px; }
  .card--pad-lg { padding: 22px; }
  .panel { padding: 24px; }
  .accordion__btn { padding: 16px 18px; }
  .accordion__q { font-size: 15.5px; }
  .accordion__panel { padding: 0 18px 18px; font-size: 14.5px; }
  .grid--hair > * { padding: 18px; }
  .btn--lg { padding: 13px 22px; font-size: 15px; }
  .cta-band__actions { justify-content: flex-start; }
  .footer__cols { grid-template-columns: 1fr 1fr; gap: 28px 20px; }
  .footer__links a, .footer__bottom a, .footer__bottom span { font-size: 14.5px; }
  .steps__item { flex-basis: 120px; }
  .steps__label { font-size: 13.5px; }
  .welcome { padding: 20px; }
}

@media print {
  .header, .topbar, .footer, .app__side, .app__header, .theme-toggle,
  .chat-fab, .cookiebar, .toast-stack, .app__bar, .app__scrim,
  .tabs, .pager, .btn { display: none !important; }
  body { background: #fff; color: #000; }
  .app, .app__main, .app__body, .split, .split__main, .split__side { display: block; width: auto; max-width: none; }
  .card, .table, .compare { border-color: #ddd; box-shadow: none; break-inside: avoid; }
  .split__side { margin-top: 18px; }
  a[href^="http"]::after { content: ' (' attr(href) ')'; font-size: 11px; color: #555; }
  .notice { border-color: #999; }
}