/* ==========================================================================
   SkyZap Design System
   Reference points: Salesforce Lightning, HubSpot, Freshworks, Zoho.
   Principles: one solid brand colour (no gradients), light surfaces, visible
   1px borders, tight radii, dense information, restrained shadows.
   ========================================================================== */

/* ---------- 1. Palette ---------------------------------------------------- */
:root {
  /* Brand — a single deep, serious blue. No gradient ramps in the UI. */
  --blue-900:#062F6E; --blue-800:#083C8C; --blue-700:#0A4BA8;
  --blue-600:#0B5CD6; --blue-500:#1E75E8; --blue-400:#5A9BF0;
  --blue-200:#B9D6F8; --blue-100:#DCEAFB; --blue-50:#EFF6FE;

  /* Ink — navy-leaning neutrals, never pure black or Tailwind slate */
  --ink-900:#0C1B2A; --ink-800:#16293C; --ink-700:#22384E;
  --ink-600:#374F66; --ink-500:#4A6076; --ink-400:#64798C;
  --ink-300:#8A9BAB; --ink-250:#AFBCC8; --ink-200:#C9D4DE;
  --ink-150:#DDE4EB; --ink-100:#E9EEF3; --ink-75:#F0F4F8;
  --ink-50:#F5F8FA; --ink-25:#FAFCFD;

  /* Functional — deeper and less saturated than framework defaults */
  --green-700:#0B6144; --green-600:#0F7B54; --green-100:#DCF2E8;
  --amber-700:#8E4E0B; --amber-600:#B4690E; --amber-100:#FBEEDA;
  --red-700:#9B2B23;  --red-600:#C33A31;  --red-100:#FBE4E2;
  --teal-600:#0E8A7D; --teal-100:#D8F2EF;
  --violet-600:#5B3FBF; --violet-100:#E9E3FB;

  /* Semantic — light */
  --page: var(--ink-50);
  --surface: #ffffff;
  --surface-alt: var(--ink-25);
  --surface-sunken: var(--ink-75);
  --header-bg: #ffffff;
  --utility-bg: var(--ink-900);

  --border: var(--ink-150);
  --border-strong: var(--ink-200);
  --border-hard: var(--ink-250);

  --text: var(--ink-900);
  --text-body: var(--ink-600);
  --text-muted: var(--ink-500);
  --text-faint: var(--ink-400);
  --text-invert: #ffffff;

  --brand: var(--blue-600);
  --brand-hover: var(--blue-700);
  --brand-active: var(--blue-800);
  --brand-text: var(--blue-700);
  --brand-tint: var(--blue-50);
  --brand-tint-2: var(--blue-100);

  --success: var(--green-600);
  --warning: var(--amber-600);
  --danger: var(--red-600);
  --focus: var(--blue-500);

  /* Elevation — short, tight, low-opacity. No coloured glows. */
  --sh-1: 0 1px 2px rgba(12,27,42,.06);
  --sh-2: 0 1px 3px rgba(12,27,42,.10), 0 1px 2px rgba(12,27,42,.04);
  --sh-3: 0 4px 8px -2px rgba(12,27,42,.10), 0 2px 4px -2px rgba(12,27,42,.05);
  --sh-4: 0 12px 16px -4px rgba(12,27,42,.09), 0 4px 6px -2px rgba(12,27,42,.04);
  --sh-5: 0 20px 28px -8px rgba(12,27,42,.14), 0 8px 12px -6px rgba(12,27,42,.06);

  /* Geometry — enterprise tools use small radii */
  --r-1:3px; --r-2:4px; --r-3:6px; --r-4:8px; --r-5:10px; --r-6:12px; --r-pill:100px;

  /* Type */
  --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-head: 'IBM Plex Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --t-11:.6875rem; --t-12:.75rem; --t-13:.8125rem; --t-14:.875rem;
  --t-15:.9375rem; --t-16:1rem; --t-17:1.0625rem; --t-18:1.125rem; --t-20:1.25rem;
  --h5: 1.0625rem;
  --h4: clamp(1.125rem, 1.06rem + .28vw, 1.3125rem);
  --h3: clamp(1.3125rem, 1.2rem + .5vw, 1.625rem);
  --h2: clamp(1.625rem, 1.42rem + .85vw, 2.125rem);
  --h1: clamp(1.9375rem, 1.66rem + 1.15vw, 2.75rem);
  --display: clamp(2.125rem, 1.72rem + 1.75vw, 3.375rem);

  /* Layout */
  --wrap: 1216px;
  --wrap-narrow: 736px;
  --wrap-wide: 1360px;
  --pad: clamp(1rem, 3.2vw, 2rem);
  --util-h: 34px;
  --nav-h: 64px;

  --ease: cubic-bezier(.32,.72,.36,1);
  --t-fast: 120ms; --t: 180ms;

  color-scheme: light;
}

[data-theme='dark'] {
  --page:#0A1520; --surface:#0F1E2C; --surface-alt:#132433; --surface-sunken:#16293A;
  --header-bg:#0F1E2C; --utility-bg:#061019;
  --border:#1F3547; --border-strong:#2A455A; --border-hard:#375672;
  --text:#EDF3F8; --text-body:#B4C4D2; --text-muted:#93A6B7; --text-faint:#7A8FA2;
  --brand:#4E93EE; --brand-hover:#6BA6F2; --brand-active:#8CBBF6;
  --brand-text:#7CB0F2; --brand-tint:rgba(78,147,238,.10); --brand-tint-2:rgba(78,147,238,.18);
  --success:#3CAA7F; --warning:#D89B4A; --danger:#E0685E;
  --green-100:rgba(60,170,127,.14); --amber-100:rgba(216,155,74,.14);
  --red-100:rgba(224,104,94,.14); --teal-100:rgba(14,138,125,.16); --violet-100:rgba(123,96,220,.16);
  --blue-50:rgba(78,147,238,.09); --blue-100:rgba(78,147,238,.16);
  --sh-1:0 1px 2px rgba(0,0,0,.4); --sh-2:0 1px 3px rgba(0,0,0,.45);
  --sh-3:0 4px 8px -2px rgba(0,0,0,.45); --sh-4:0 12px 16px -4px rgba(0,0,0,.5);
  --sh-5:0 20px 28px -8px rgba(0,0,0,.55);
  color-scheme: dark;
}

/* ---------- 2. 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); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation-duration:.01ms!important; transition-duration:.01ms!important; }
}
body {
  font-family: var(--font-ui);
  font-size: var(--t-16);
  line-height: 1.6;
  color: var(--text-body);
  background: var(--page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img,svg,video,canvas { display:block; max-width:100%; height:auto; }
button,input,select,textarea { font:inherit; color:inherit; }
button { cursor:pointer; background:none; border:0; padding:0; }
a { color: var(--brand-text); text-decoration:none; }
a:hover { text-decoration:underline; text-underline-offset:2px; }
:focus-visible { outline:2px solid var(--focus); outline-offset:2px; border-radius:2px; }
h1,h2,h3,h4,h5 { font-family: var(--font-head); color: var(--text); font-weight:600; line-height:1.22; letter-spacing:-.011em; }
h1 { font-size: var(--h1); letter-spacing:-.019em; line-height:1.14; }
h2 { font-size: var(--h2); letter-spacing:-.016em; line-height:1.2; }
h3 { font-size: var(--h3); letter-spacing:-.012em; }
h4 { font-size: var(--h4); }
h5 { font-size: var(--h5); }
p { text-wrap:pretty; }
hr { border:0; border-top:1px solid var(--border); margin:2rem 0; }
::selection { background: var(--blue-100); color: var(--ink-900); }
.ic { width:1.05em; height:1.05em; flex:none; vertical-align:-.14em; }

/* ---------- 3. Layout ----------------------------------------------------- */
.wrap { width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad); }
.wrap--narrow { max-width:var(--wrap-narrow); }
.wrap--wide { max-width:var(--wrap-wide); }
.section { padding-block: clamp(3rem, 6vw, 5.5rem); }
.section--sm { padding-block: clamp(2rem, 4vw, 3.25rem); }
.section--alt { background: var(--surface); border-block:1px solid var(--border); }
.section--sunken { background: var(--surface-sunken); border-block:1px solid var(--border); }
.grid { display:grid; gap: var(--gap, 1.25rem); }
.g2 { grid-template-columns: repeat(auto-fit, minmax(min(100%,300px),1fr)); }
.g3 { grid-template-columns: repeat(auto-fit, minmax(min(100%,272px),1fr)); }
.g4 { grid-template-columns: repeat(auto-fit, minmax(min(100%,214px),1fr)); }
/* Five categories: a dedicated track so they form one clean row, not 4 + orphan */
.g-cat { grid-template-columns: repeat(auto-fit, minmax(min(100%,212px),1fr)); gap:1rem; }
.catcard { display:flex; flex-direction:column; padding:1.125rem; }
.catcard__blurb {
  font-size:var(--t-13); color:var(--text-muted); line-height:1.5; flex:1;
  display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden;
}
.catcard__go {
  display:inline-flex; align-items:center; gap:.3rem; white-space:nowrap;
  margin-top:.875rem; font-size:var(--t-13); font-weight:600; color:var(--brand-text);
}
.catcard__go .ic { width:13px; height:13px; }
.row { display:flex; flex-wrap:wrap; gap:.625rem; align-items:center; }
.stack > * + * { margin-top: var(--gap, 1rem); }
.center { text-align:center; }
.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; left:-9999px; top:0; z-index:999; background:var(--brand); color:#fff; padding:.6rem 1rem; font-weight:600; font-size:var(--t-14); }
.skip-link:focus { left:0; }

/* ---------- 4. Type helpers ----------------------------------------------- */
.eyebrow {
  display:inline-block; font-family:var(--font-head);
  font-size:var(--t-12); font-weight:600; letter-spacing:.085em;
  text-transform:uppercase; color:var(--brand-text); margin-bottom:.6rem;
}
.eyebrow--muted { color: var(--text-faint); }
.lede { font-size: clamp(1rem, .96rem + .22vw, 1.125rem); color: var(--text-body); line-height:1.62; }
.section-head { max-width:64ch; }
.section-head--center { margin-inline:auto; text-align:center; }
.section-head p { margin-top:.75rem; }
/* Heading left, supporting copy right — keeps wide sections balanced instead
   of leaving a large empty column. */
@media (min-width:1000px) {
  .section-head--split {
    display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
    gap:1rem 3.5rem; align-items:end; max-width:none;
  }
  .section-head--split .eyebrow { grid-column:1; margin-bottom:.4rem; }
  .section-head--split h2 { grid-column:1; }
  .section-head--split p { grid-column:2; grid-row:2; margin-top:0; padding-bottom:.25rem; }
}
.muted { color: var(--text-muted); }
.faint { color: var(--text-faint); }
.t-sm { font-size: var(--t-14); }
.t-xs { font-size: var(--t-13); }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.num { font-variant-numeric: tabular-nums; }

/* ---------- 5. Buttons ---------------------------------------------------- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:.45rem;
  height:40px; padding:0 1rem; border-radius:var(--r-3);
  font-family:var(--font-ui); font-size:var(--t-14); font-weight:600; letter-spacing:-.002em;
  border:1px solid transparent; white-space:nowrap; text-decoration:none!important;
  transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.btn--primary { background:var(--brand); color:#fff; border-color:var(--brand); box-shadow:var(--sh-1); }
.btn--primary:hover { background:var(--brand-hover); border-color:var(--brand-hover); color:#fff; }
.btn--primary:active { background:var(--brand-active); }
.btn--secondary { background:var(--surface); color:var(--text); border-color:var(--border-strong); box-shadow:var(--sh-1); }
.btn--secondary:hover { border-color:var(--border-hard); background:var(--surface-alt); }
.btn--ghost { background:transparent; color:var(--text-body); }
.btn--ghost:hover { background:var(--surface-sunken); color:var(--text); }
.btn--link { background:none; color:var(--brand-text); height:auto; padding:0; }
.btn--link:hover { text-decoration:underline!important; }
.btn--onbrand { background:#fff; color:var(--blue-800); border-color:#fff; }
.btn--onbrand:hover { background:var(--blue-50); color:var(--blue-900); }
.btn--onbrand-ghost { background:transparent; color:#fff; border-color:rgba(255,255,255,.45); }
.btn--onbrand-ghost:hover { background:rgba(255,255,255,.12); color:#fff; border-color:rgba(255,255,255,.7); }
.btn--lg { height:48px; padding:0 1.375rem; font-size:var(--t-15); }
.btn--sm { height:32px; padding:0 .75rem; font-size:var(--t-13); }
.btn--block { width:100%; }
.btn .ic { width:16px; height:16px; }

/* ---------- 6. Badges, chips, pills --------------------------------------- */
.badge {
  display:inline-flex; align-items:center; gap:.3rem;
  height:22px; padding:0 .5rem; border-radius:var(--r-2);
  font-size:var(--t-12); font-weight:600; letter-spacing:.005em;
  background:var(--surface-sunken); color:var(--text-muted); border:1px solid var(--border);
}
.badge--brand { background:var(--brand-tint); color:var(--brand-text); border-color:var(--blue-200); }
.badge--success { background:var(--green-100); color:var(--green-700); border-color:transparent; }
.badge--warning { background:var(--amber-100); color:var(--amber-700); border-color:transparent; }
.badge--danger { background:var(--red-100); color:var(--red-700); border-color:transparent; }
.badge--dot::before { content:''; width:5px; height:5px; border-radius:50%; background:currentColor; }
[data-theme='dark'] .badge--success { color:var(--success); }
[data-theme='dark'] .badge--warning { color:var(--warning); }
[data-theme='dark'] .badge--danger { color:var(--danger); }

.chip {
  display:inline-flex; align-items:center; gap:.375rem;
  height:34px; padding:0 .8rem; border-radius:var(--r-3);
  background:var(--surface); border:1px solid var(--border-strong);
  color:var(--text-body); font-size:var(--t-14); font-weight:500;
  text-decoration:none!important; cursor:pointer;
  transition: all var(--t-fast) var(--ease);
}
.chip:hover { border-color:var(--border-hard); color:var(--text); }
.chip[aria-pressed='true'], .chip.is-active {
  background:var(--brand); border-color:var(--brand); color:#fff;
}

/* ---------- 7. Utility bar + header --------------------------------------- */
.utility {
  background:var(--utility-bg); color:rgba(255,255,255,.78);
  font-size:var(--t-12); height:var(--util-h);
}
.utility__inner { display:flex; align-items:center; gap:1.25rem; height:100%; max-width:var(--wrap-wide); margin-inline:auto; padding-inline:var(--pad); }
.utility a { color:rgba(255,255,255,.78); text-decoration:none; }
.utility a:hover { color:#fff; text-decoration:underline; }
.utility__sep { flex:1; }
.utility__note { display:inline-flex; align-items:center; gap:.4rem; }
.utility__note .ic { width:13px; height:13px; color:var(--blue-400); }
@media (max-width:820px) { .utility__hide { display:none; } }
/* The utility strip is secondary chrome — it wraps and steals height on a
   phone, and its message is repeated in the hero. */
@media (max-width:640px) { .utility { display:none; } }

.header-wrap { position:sticky; top:0; z-index:100; }
.header {
  height:var(--nav-h); background:var(--header-bg);
  border-bottom:1px solid var(--border);
  transition: box-shadow var(--t) var(--ease);
}
.header.is-stuck { box-shadow:var(--sh-2); }
.header__inner { display:flex; align-items:center; gap:1.5rem; height:100%; max-width:var(--wrap-wide); margin-inline:auto; padding-inline:var(--pad); }
.brand { display:inline-flex; align-items:center; gap:.55rem; text-decoration:none!important; flex:none; }
.brand__mark { width:30px; height:30px; border-radius:var(--r-3); background:var(--brand); display:grid; place-items:center; flex:none; }
.brand__mark .ic { width:17px; height:17px; color:#fff; }
.brand__name { font-family:var(--font-head); font-size:1.125rem; font-weight:700; letter-spacing:-.025em; color:var(--text); }
.mainnav { display:flex; align-items:center; gap:.125rem; }
.mainnav__link {
  display:inline-flex; align-items:center; height:36px; padding:0 .7rem;
  border-radius:var(--r-3); font-size:var(--t-14); font-weight:500;
  color:var(--text-body); text-decoration:none!important;
  transition: all var(--t-fast) var(--ease);
}
.mainnav__link:hover { background:var(--surface-sunken); color:var(--text); }
.mainnav__link[aria-current='page'] { color:var(--brand-text); background:var(--brand-tint); }
.header__sep { flex:1; }
.header__actions { display:flex; align-items:center; gap:.5rem; }
.iconbtn {
  width:34px; height:34px; border-radius:var(--r-3); display:grid; place-items:center;
  color:var(--text-muted); border:1px solid transparent;
  transition: all var(--t-fast) var(--ease);
}
.iconbtn:hover { background:var(--surface-sunken); color:var(--text); }
.iconbtn .ic { width:17px; height:17px; }
.searchbtn {
  display:flex; align-items:center; gap:.5rem; height:34px;
  padding:0 .5rem 0 .625rem; min-width:200px;
  border:1px solid var(--border-strong); border-radius:var(--r-3);
  background:var(--surface); color:var(--text-faint); font-size:var(--t-14);
  transition: border-color var(--t-fast) var(--ease);
}
.searchbtn:hover { border-color:var(--border-hard); }
.searchbtn .ic { width:15px; height:15px; }
.searchbtn kbd {
  margin-left:auto; font-family:var(--font-ui); font-size:11px; font-weight:600;
  padding:1px 5px; border:1px solid var(--border); border-radius:var(--r-1);
  background:var(--surface-sunken); color:var(--text-faint);
}
.header__burger, .header__search-m { display:none; }
@media (max-width:1000px) {
  .mainnav, .searchbtn { display:none; }
  .header__burger, .header__search-m { display:grid; }
}
/* On phones the CTA lives in the drawer — keeping it in the bar overflows. */
@media (max-width:720px) { .header__cta { display:none; } }
@media (max-width:380px) { .brand__name { display:none; } }
.drawer {
  position:fixed; inset:calc(var(--nav-h)) 0 0; z-index:99; background:var(--surface);
  border-top:1px solid var(--border); overflow-y:auto; display:none;
  padding:.5rem var(--pad) 3rem;
}
.drawer.is-open { display:block; }
.drawer__group { padding:1rem 0 .25rem; }
.drawer__label { font-size:var(--t-11); font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--text-faint); }
.drawer a {
  display:flex; align-items:center; justify-content:space-between;
  padding:.7rem .25rem; font-size:var(--t-15); font-weight:500;
  color:var(--text); border-bottom:1px solid var(--border); text-decoration:none!important;
}

/* ---------- 8. Hero ------------------------------------------------------- */
.hero { background:var(--surface); border-bottom:1px solid var(--border); position:relative; overflow:hidden; }
.hero::after {
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image:linear-gradient(var(--border) 1px, transparent 1px), linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size:48px 48px; opacity:.4;
  -webkit-mask-image:linear-gradient(to bottom, transparent, #000 55%, transparent);
  mask-image:linear-gradient(to bottom, transparent, #000 55%, transparent);
}
.hero__inner { position:relative; z-index:1; display:grid; grid-template-columns: minmax(0,1fr) minmax(0,1.06fr); gap: clamp(2rem,5vw,4rem); align-items:center; padding-block: clamp(2.75rem,5.5vw,4.75rem); }
@media (max-width:1000px) { .hero__inner { grid-template-columns: minmax(0,1fr); gap:2.5rem; } }
.hero__title { font-size:var(--display); line-height:1.08; letter-spacing:-.024em; }
.hero__sub { margin-top:1.125rem; font-size:clamp(1.0625rem,1rem + .32vw,1.1875rem); color:var(--text-body); line-height:1.6; max-width:52ch; }
.hero__cta { display:flex; flex-wrap:wrap; gap:.75rem; margin-top:1.75rem; }
@media (max-width:560px) { .hero__cta { display:grid; grid-template-columns:minmax(0,1fr); } .hero__cta .btn { width:100%; } }
.hero__meta { display:flex; flex-wrap:wrap; gap:.5rem 1.5rem; margin-top:1.75rem; font-size:var(--t-13); color:var(--text-muted); }
.hero__meta span { display:inline-flex; align-items:center; gap:.4rem; }
.hero__meta .ic { width:15px; height:15px; color:var(--success); }
.hero__ann {
  display:inline-flex; align-items:center; gap:.5rem; height:28px; padding:0 .625rem 0 .3rem;
  border:1px solid var(--border-strong); border-radius:var(--r-pill);
  background:var(--surface); font-size:var(--t-13); color:var(--text-body);
  text-decoration:none!important; margin-bottom:1.25rem;
}
.hero__ann:hover { border-color:var(--brand); color:var(--text); }
.hero__ann b { background:var(--brand); color:#fff; font-size:var(--t-11); font-weight:700; letter-spacing:.03em; text-transform:uppercase; padding:2px .45rem; border-radius:var(--r-pill); }
.hero__ann .ic { width:13px; height:13px; color:var(--text-faint); }

/* Product frame — a real UI shown in browser chrome, the standard SaaS hero */
.appframe { border:1px solid var(--border-strong); border-radius:var(--r-5); background:var(--surface); box-shadow:var(--sh-5); overflow:hidden; }
.appframe__bar { display:flex; align-items:center; gap:.5rem; height:38px; padding:0 .75rem; background:var(--surface-sunken); border-bottom:1px solid var(--border); }
.appframe__dots { display:flex; gap:.375rem; }
.appframe__dots i { width:9px; height:9px; border-radius:50%; background:var(--border-hard); display:block; }
.appframe__url { flex:1; height:22px; border-radius:var(--r-2); background:var(--surface); border:1px solid var(--border); display:flex; align-items:center; padding:0 .5rem; font-size:var(--t-11); color:var(--text-faint); font-family:var(--font-mono); }
.appframe__body { padding:1rem; display:grid; gap:.75rem; }
.mockrow { display:grid; grid-template-columns:1fr 1fr; gap:.625rem; }
.mockfield { border:1px solid var(--border); border-radius:var(--r-3); padding:.45rem .625rem; background:var(--surface); }
.mockfield span { display:block; font-size:var(--t-11); color:var(--text-faint); font-weight:500; }
.mockfield b { display:block; font-size:var(--t-14); color:var(--text); font-weight:600; font-variant-numeric:tabular-nums; margin-top:1px; }
.mockstat { background:var(--blue-900); border-radius:var(--r-4); padding:.875rem 1rem; color:#fff; }
.mockstat span { font-size:var(--t-11); color:var(--blue-200); font-weight:600; letter-spacing:.05em; text-transform:uppercase; }
.mockstat b { display:block; font-size:1.75rem; font-family:var(--font-head); font-weight:600; letter-spacing:-.02em; margin-top:.15rem; }
.mockstat i { display:block; font-style:normal; font-size:var(--t-12); color:var(--blue-200); margin-top:.15rem; }
.mockbars { display:grid; gap:.5rem; }
.mockbar { display:grid; gap:.25rem; }
.mockbar div:first-child { display:flex; justify-content:space-between; font-size:var(--t-11); color:var(--text-muted); }
.mockbar div:first-child b { color:var(--text); font-weight:600; }
.mocktrack { height:6px; border-radius:var(--r-pill); background:var(--surface-sunken); overflow:hidden; }
.mocktrack i { display:block; height:100%; background:var(--brand); border-radius:var(--r-pill); }
.mocktrack i.alt { background:var(--teal-600); }
.mocktrack i.warn { background:var(--amber-600); }

/* ---------- 9. Cards ------------------------------------------------------ */
.card { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-4); }
.card--pad { padding:1.375rem; }
.card--pad-lg { padding: clamp(1.375rem, 2.5vw, 2rem); }
.card__head { padding:.875rem 1.125rem; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; gap:1rem; background:var(--surface-alt); }
.card__title { font-family:var(--font-head); font-size:var(--t-15); font-weight:600; color:var(--text); display:flex; align-items:center; gap:.45rem; }
.card__title .ic { width:15px; height:15px; color:var(--text-faint); }
.card__body { padding:1.125rem; }

/* Tool card — bordered, flat, with a square icon tile */
.toolcard {
  display:flex; flex-direction:column; gap:.625rem;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-4);
  padding:1.25rem; text-decoration:none!important; color:inherit;
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.toolcard:hover { border-color:var(--border-hard); box-shadow:var(--sh-3); }
.toolcard__top { display:flex; align-items:center; justify-content:space-between; gap:.75rem; }
.toolcard__icon {
  width:36px; height:36px; border-radius:var(--r-3); flex:none; display:grid; place-items:center;
  background:var(--tool-tint, var(--blue-50)); color:var(--tool-ink, var(--blue-700));
  border:1px solid var(--tool-line, var(--blue-200));
}
.toolcard__icon .ic { width:18px; height:18px; }
.toolcard__title { font-family:var(--font-head); font-size:var(--t-16); font-weight:600; color:var(--text); line-height:1.3; letter-spacing:-.01em; }
.toolcard__desc { font-size:var(--t-14); color:var(--text-muted); line-height:1.55; flex:1; }
.toolcard__foot { display:flex; align-items:center; justify-content:space-between; gap:.75rem; padding-top:.75rem; margin-top:.25rem; border-top:1px solid var(--border); }
.toolcard__go { display:inline-flex; align-items:center; gap:.3rem; font-size:var(--t-13); font-weight:600; color:var(--brand-text); }
.toolcard__go .ic { width:13px; height:13px; transition: transform var(--t-fast) var(--ease); }
.toolcard:hover .toolcard__go .ic { transform: translateX(2px); }

/* Feature block */
.feature { display:flex; gap:.875rem; }
.feature__icon { width:34px; height:34px; flex:none; border-radius:var(--r-3); display:grid; place-items:center; background:var(--brand-tint); color:var(--brand-text); border:1px solid var(--blue-200); }
.feature__icon .ic { width:17px; height:17px; }
.feature h3 { font-size:var(--t-16); margin-bottom:.3rem; }
.feature p { font-size:var(--t-14); color:var(--text-muted); line-height:1.58; }

/* ---------- 10. Stats band ------------------------------------------------ */
.statband { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr)); background:var(--surface); border:1px solid var(--border); border-radius:var(--r-4); overflow:hidden; }
.statband__i { padding:1.375rem 1.5rem; border-right:1px solid var(--border); border-bottom:1px solid var(--border); margin-right:-1px; margin-bottom:-1px; min-width:0; }
.statband__n { font-family:var(--font-head); font-size:clamp(1.5rem,1.3rem + .8vw,2rem); font-weight:600; color:var(--text); letter-spacing:-.022em; line-height:1; font-variant-numeric:tabular-nums; }
.statband__l { margin-top:.4rem; font-size:var(--t-13); color:var(--text-muted); }

/* ---------- 11. Comparison table ------------------------------------------ */
.compare { width:100%; border-collapse:separate; border-spacing:0; font-size:var(--t-14); background:var(--surface); border:1px solid var(--border); border-radius:var(--r-4); overflow:hidden; }
.compare th, .compare td { padding:.8rem 1rem; text-align:left; border-bottom:1px solid var(--border); vertical-align:middle; }
.compare thead th { background:var(--surface-alt); font-family:var(--font-head); font-size:var(--t-13); font-weight:600; color:var(--text); white-space:nowrap; }
.compare thead th.is-us { background:var(--blue-900); color:#fff; }
.compare tbody tr:last-child td { border-bottom:0; }
.compare td.is-us { background:var(--brand-tint); font-weight:600; color:var(--text); }
.compare td.c { text-align:center; }
.compare .yes { color:var(--success); }
.compare .no { color:var(--text-faint); }

/* ---------- 12. CTA band -------------------------------------------------- */
.ctaband { background:var(--blue-900); color:#fff; }
.ctaband h2 { color:#fff; }
.ctaband p { color:var(--blue-200); margin-top:.75rem; }
.ctaband .row { margin-top:1.75rem; }

/* ---------- 13. Forms / tool UI ------------------------------------------- */
.field { display:flex; flex-direction:column; gap:.3rem; min-width:0; }
.field__label { font-size:var(--t-13); font-weight:600; color:var(--text); }
.field__hint { font-size:var(--t-12); color:var(--text-faint); line-height:1.45; }
.field__error { font-size:var(--t-12); color:var(--danger); font-weight:500; }
.input,.select,.textarea {
  width:100%; height:38px; padding:0 .625rem;
  background:var(--surface); color:var(--text);
  border:1px solid var(--border-strong); border-radius:var(--r-3);
  font-size:var(--t-14); font-variant-numeric:tabular-nums;
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.textarea { height:auto; min-height:84px; padding:.5rem .625rem; line-height:1.55; resize:vertical; }
.input:hover,.select:hover,.textarea:hover { border-color:var(--border-hard); }
.input:focus,.select:focus,.textarea:focus { outline:none; border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-tint-2); }
.input.is-error { border-color:var(--danger); }
.select { appearance:none; padding-right:1.9rem; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364798C' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .55rem center; background-size:14px; }
.input-group { position:relative; display:flex; align-items:center; }
.input-group .input { padding-left:1.75rem; }
.input-group__prefix,.input-group__suffix { position:absolute; font-size:var(--t-13); color:var(--text-faint); pointer-events:none; font-weight:500; }
.input-group__prefix { left:.625rem; }
.input-group__suffix { right:.625rem; }
.input-group--suffix .input { padding-left:.625rem; padding-right:2.25rem; }

.switch { display:inline-flex; align-items:center; gap:.55rem; cursor:pointer; user-select:none; }
.switch input { position:absolute; opacity:0; width:0; height:0; }
.switch__track { width:36px; height:20px; border-radius:var(--r-pill); background:var(--border-hard); position:relative; flex:none; transition: background-color var(--t) var(--ease); }
.switch__track::after { content:''; position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%; background:#fff; box-shadow:var(--sh-1); transition: transform var(--t) var(--ease); }
.switch input:checked + .switch__track { background:var(--brand); }
.switch input:checked + .switch__track::after { transform:translateX(16px); }
.switch input:focus-visible + .switch__track { outline:2px solid var(--focus); outline-offset:2px; }
.switch__label { font-size:var(--t-14); font-weight:500; color:var(--text); }

.checkbox { display:flex; align-items:flex-start; gap:.55rem; cursor:pointer; padding:.3rem 0; }
.checkbox input { width:16px; height:16px; margin-top:.2rem; accent-color:var(--brand); flex:none; cursor:pointer; }
.checkbox span { font-size:var(--t-14); line-height:1.5; color:var(--text-body); }
.checkbox strong { color:var(--text); font-weight:600; }

.seg { display:inline-flex; padding:2px; background:var(--surface-sunken); border:1px solid var(--border); border-radius:var(--r-3); gap:2px; }
.seg button { height:26px; padding:0 .7rem; border-radius:var(--r-2); font-size:var(--t-13); font-weight:600; color:var(--text-muted); transition: all var(--t-fast) var(--ease); }
.seg button.is-active { background:var(--surface); color:var(--text); box-shadow:var(--sh-1); }
.range { width:100%; accent-color:var(--brand); }

/* Tool workspace */
.workspace { display:grid; gap:1.25rem; grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr); align-items:start; }
@media (max-width:1000px) { .workspace { grid-template-columns:minmax(0,1fr); } }
.panel { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-4); overflow:hidden; min-width:0; }
.panel__head { padding:.75rem 1.125rem; border-bottom:1px solid var(--border); background:var(--surface-alt); display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.panel__title { font-family:var(--font-head); font-size:var(--t-14); font-weight:600; color:var(--text); display:flex; align-items:center; gap:.45rem; }
.panel__title .ic { width:15px; height:15px; color:var(--text-faint); }
.panel__body { padding:1.125rem; display:grid; gap:.875rem; min-width:0; }
.panel__foot { padding:.75rem 1.125rem; border-top:1px solid var(--border); background:var(--surface-alt); }
.field-row { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,148px),1fr)); gap:.875rem; }
.fieldset-title {
  font-family:var(--font-head); font-size:var(--t-11); font-weight:700;
  text-transform:uppercase; letter-spacing:.085em; color:var(--text-faint);
  padding-top:.75rem; margin-top:.25rem; border-top:1px solid var(--border);
}

/* Repeating editable rows */
.repeat-row { display:grid; gap:.5rem; align-items:end; }
.repeat-row--debt { grid-template-columns:1.5fr .9fr .8fr .9fr auto; }
.repeat-row--item { grid-template-columns:2.4fr .7fr 1fr auto; }
.repeat-row--price { grid-template-columns:1.7fr .7fr .7fr; align-items:center; }
@media (max-width:760px) {
  .repeat-row { grid-template-columns:repeat(2,minmax(0,1fr)); position:relative; padding:.75rem; border:1px solid var(--border); border-radius:var(--r-3); background:var(--surface-alt); }
  .repeat-row > .field:first-child { grid-column:1/-1; }
  .repeat-row > .iconbtn { position:absolute; top:.35rem; right:.35rem; width:28px; height:28px; }
  .repeat-row--price { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .repeat-row--price > span:first-child { grid-column:1/-1; font-weight:600; }
}

/* Results */
.headline-stat { background:var(--blue-900); color:#fff; border-radius:var(--r-4); padding:1.375rem 1.5rem; }
.headline-stat__l { font-size:var(--t-12); font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--blue-200); }
.headline-stat__v { font-family:var(--font-head); font-size:clamp(2rem,1.6rem + 1.7vw,2.875rem); font-weight:600; letter-spacing:-.028em; line-height:1.05; margin:.35rem 0 .4rem; font-variant-numeric:tabular-nums; }
.headline-stat__n { font-size:var(--t-14); line-height:1.55; color:#D6E6FB; }
.metrics { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,140px),1fr)); background:var(--surface); border:1px solid var(--border); border-radius:var(--r-4); overflow:hidden; }
.metric { padding:.875rem 1rem; border-right:1px solid var(--border); border-bottom:1px solid var(--border); margin-right:-1px; margin-bottom:-1px; min-width:0; }
.metric__l { font-size:var(--t-11); font-weight:600; letter-spacing:.055em; text-transform:uppercase; color:var(--text-faint); }
.metric__v { font-family:var(--font-head); font-size:clamp(1.0625rem,.98rem + .4vw,1.3125rem); font-weight:600; color:var(--text); letter-spacing:-.018em; margin-top:.25rem; font-variant-numeric:tabular-nums; }
.metric__s { font-size:var(--t-11); color:var(--text-faint); margin-top:.15rem; }
.val-pos { color:var(--success); }
.val-neg { color:var(--danger); }
.val-warn { color:var(--warning); }

.bar-row { display:grid; gap:.3rem; margin-bottom:.75rem; }
.bar-row__top { display:flex; justify-content:space-between; align-items:baseline; gap:1rem; font-size:var(--t-13); }
.bar-row__label { font-weight:500; color:var(--text); }
.bar-row__value { font-variant-numeric:tabular-nums; color:var(--text-muted); font-weight:600; }
.bar { height:6px; border-radius:var(--r-pill); background:var(--surface-sunken); overflow:hidden; }
.bar__fill { height:100%; border-radius:var(--r-pill); background:var(--brand); transition: width .35s var(--ease); }
.chart { width:100%; height:auto; overflow:visible; }
.chart-legend { display:flex; flex-wrap:wrap; gap:.3rem 1rem; font-size:var(--t-13); color:var(--text-muted); margin-top:.625rem; }
.chart-legend span { display:inline-flex; align-items:center; gap:.375rem; }
.chart-legend i { width:10px; height:10px; border-radius:2px; display:inline-block; }

/* ---------- 14. Tables ---------------------------------------------------- */
.table-wrap { overflow-x:auto; border:1px solid var(--border); border-radius:var(--r-4); background:var(--surface); -webkit-overflow-scrolling:touch; }
table { width:100%; border-collapse:collapse; font-size:var(--t-14); }
thead th {
  position:sticky; top:0; z-index:1; text-align:left; padding:.6rem .875rem;
  font-family:var(--font-head); font-size:var(--t-12); font-weight:600;
  color:var(--text-muted); background:var(--surface-alt);
  border-bottom:1px solid var(--border); white-space:nowrap;
}
tbody td { padding:.55rem .875rem; border-bottom:1px solid var(--border); font-variant-numeric:tabular-nums; color:var(--text-body); }
tbody tr:last-child td { border-bottom:0; }
tbody tr:hover { background:var(--surface-alt); }
td.num, th.num { text-align:right; }

/* ---------- 15. Page header (tool + article) ------------------------------ */
.pagehead { background:var(--surface); border-bottom:1px solid var(--border); }
.pagehead__inner { padding-block:1.5rem 1.75rem; }
.pagehead__top { display:flex; align-items:flex-start; justify-content:space-between; gap:2rem; flex-wrap:wrap; }
.pagehead h1 { margin-top:.75rem; }
.pagehead__sub { margin-top:.75rem; max-width:70ch; font-size:var(--t-16); color:var(--text-body); line-height:1.6; }
.pagehead__facts { display:flex; flex-wrap:wrap; gap:.5rem 1.5rem; margin-top:1.125rem; font-size:var(--t-13); color:var(--text-muted); }
.pagehead__facts span { display:inline-flex; align-items:center; gap:.4rem; }
.pagehead__facts .ic { width:14px; height:14px; color:var(--success); }
.crumbs { display:flex; flex-wrap:wrap; align-items:center; gap:.3rem; font-size:var(--t-13); color:var(--text-faint); }
.crumbs a { color:var(--text-faint); text-decoration:none; }
.crumbs a:hover { color:var(--brand-text); text-decoration:underline; }
.crumbs .ic { width:12px; height:12px; opacity:.55; }

/* ---------- 16. Prose ----------------------------------------------------- */
.prose { font-size:var(--t-17); line-height:1.7; color:var(--text-body); max-width:70ch; }
.prose > * + * { margin-top:1.25rem; }
.prose h2 { margin-top:2.5rem; margin-bottom:-.35rem; scroll-margin-top:calc(var(--nav-h) + 20px); position:relative; padding-top:1.5rem; border-top:1px solid var(--border); }
.prose h2:first-child { margin-top:0; padding-top:0; border-top:0; }
.prose h3 { margin-top:1.875rem; margin-bottom:-.45rem; scroll-margin-top:calc(var(--nav-h) + 20px); position:relative; }
.prose h4 { margin-top:1.5rem; margin-bottom:-.55rem; }
.prose a { color:var(--brand-text); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:2px; }
.prose strong { color:var(--text); font-weight:600; }
.prose ul,.prose ol { padding-left:1.25rem; }
.prose li { margin-top:.4rem; }
.prose li::marker { color:var(--text-faint); }
.prose blockquote { border-left:3px solid var(--brand); background:var(--surface-alt); padding:.875rem 1.125rem; border-radius:0 var(--r-3) var(--r-3) 0; color:var(--text-muted); }
.prose blockquote p { margin:0; }
.prose code { font-family:var(--font-mono); font-size:.86em; padding:.1em .35em; border-radius:var(--r-2); background:var(--surface-sunken); border:1px solid var(--border); color:var(--text); }
.prose pre.code-block { background:var(--ink-900); color:#DCE6F0; padding:1rem 1.125rem; border-radius:var(--r-4); overflow-x:auto; font-family:var(--font-mono); font-size:var(--t-13); line-height:1.65; border:1px solid var(--ink-800); }
[data-theme='dark'] .prose pre.code-block { background:#08131D; border-color:#1B3044; }
.prose pre.code-block code { background:none; border:0; padding:0; color:inherit; font-size:inherit; }
.prose img { border-radius:var(--r-4); border:1px solid var(--border); }
.prose .anchor { position:absolute; left:-1em; width:1em; text-align:center; color:var(--border-hard); opacity:0; text-decoration:none!important; font-weight:400; transition:opacity var(--t-fast); }
.prose h2:hover .anchor,.prose h3:hover .anchor { opacity:1; }
@media (max-width:900px) { .prose .anchor { display:none; } }
.prose table { font-size:var(--t-14); }

.callout { border:1px solid var(--border); border-left:3px solid var(--brand); background:var(--surface-alt); border-radius:0 var(--r-3) var(--r-3) 0; padding:.875rem 1.125rem; font-size:var(--t-14); line-height:1.6; }
.callout strong:first-child { display:block; margin-bottom:.25rem; font-size:var(--t-12); text-transform:uppercase; letter-spacing:.06em; color:var(--brand-text); }
.callout--warn { border-left-color:var(--warning); }
.callout--warn strong:first-child { color:var(--amber-700); }
.callout--success { border-left-color:var(--success); }
.callout--success strong:first-child { color:var(--green-700); }
[data-theme='dark'] .callout--warn strong:first-child { color:var(--warning); }
[data-theme='dark'] .callout--success strong:first-child { color:var(--success); }

.toolcta { display:flex; align-items:center; gap:1rem; flex-wrap:wrap; padding:1rem 1.125rem; border:1px solid var(--blue-200); border-radius:var(--r-4); background:var(--brand-tint); }
.toolcta__icon { width:36px; height:36px; flex:none; border-radius:var(--r-3); display:grid; place-items:center; background:var(--brand); color:#fff; }
.toolcta__icon .ic { width:18px; height:18px; }
.toolcta__t { flex:1; min-width:180px; }
.toolcta__t strong { display:block; font-family:var(--font-head); font-size:var(--t-15); font-weight:600; color:var(--text); }
.toolcta__t span { font-size:var(--t-13); color:var(--text-muted); }

/* ---------- 17. Article layout -------------------------------------------- */
.article-layout { display:grid; grid-template-columns:minmax(0,1fr) 276px; gap:clamp(2rem,4vw,3.25rem); align-items:start; }
@media (max-width:1080px) { .article-layout { grid-template-columns:minmax(0,1fr); } .article-side { display:none; } }
.article-side { position:sticky; top:calc(var(--nav-h) + 1.25rem); display:grid; gap:1rem; }
.toc__title { font-family:var(--font-head); font-size:var(--t-11); font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--text-faint); margin-bottom:.625rem; }
.toc ol { list-style:none; padding:0; margin:0; border-left:2px solid var(--border); }
.toc li a { display:block; padding:.3rem 0 .3rem .75rem; margin-left:-2px; border-left:2px solid transparent; color:var(--text-muted); font-size:var(--t-14); line-height:1.45; text-decoration:none!important; transition:all var(--t-fast) var(--ease); }
.toc li a:hover { color:var(--text); }
.toc li a.is-active { color:var(--brand-text); border-left-color:var(--brand); font-weight:600; }
.toc li.lvl-3 a { padding-left:1.4rem; font-size:var(--t-13); }

.byline { display:flex; flex-wrap:wrap; align-items:center; gap:.625rem 1.25rem; margin-top:1.25rem; font-size:var(--t-13); color:var(--text-muted); }
.byline__author { display:flex; align-items:center; gap:.55rem; }
.avatar { width:34px; height:34px; border-radius:var(--r-3); background:var(--blue-900); display:grid; place-items:center; color:#fff; font-family:var(--font-head); font-weight:600; font-size:var(--t-12); flex:none; }

.postcard { display:flex; flex-direction:column; gap:.5rem; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-4); padding:1.125rem; text-decoration:none!important; color:inherit; transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); }
.postcard:hover { border-color:var(--border-hard); box-shadow:var(--sh-3); }
.postcard__cat { font-size:var(--t-11); font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--brand-text); }
.postcard__title { font-family:var(--font-head); font-size:var(--t-16); font-weight:600; color:var(--text); line-height:1.34; letter-spacing:-.01em; }
.postcard__ex { font-size:var(--t-14); color:var(--text-muted); line-height:1.55; flex:1; }
.postcard__meta { font-size:var(--t-12); color:var(--text-faint); display:flex; gap:.75rem; padding-top:.625rem; border-top:1px solid var(--border); }

/* ---------- 18. FAQ ------------------------------------------------------- */
.faq { border:1px solid var(--border); border-radius:var(--r-4); overflow:hidden; background:var(--surface); }
.faq details { border-bottom:1px solid var(--border); }
.faq details:last-child { border-bottom:0; }
.faq summary {
  list-style:none; cursor:pointer; padding:.875rem 1.125rem;
  font-family:var(--font-head); font-weight:600; font-size:var(--t-15); color:var(--text);
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  transition: background-color var(--t-fast) var(--ease);
}
.faq summary::-webkit-details-marker { display:none; }
.faq summary:hover { background:var(--surface-alt); }
.faq summary::after { content:''; width:8px; height:8px; flex:none; border-right:1.8px solid var(--text-faint); border-bottom:1.8px solid var(--text-faint); transform:rotate(45deg) translate(-2px,-2px); transition:transform var(--t) var(--ease); }
.faq details[open] summary::after { transform:rotate(-135deg) translate(-2px,-2px); }
.faq details[open] summary { background:var(--surface-alt); }
.faq__body { padding:0 1.125rem 1.125rem; color:var(--text-body); font-size:var(--t-15); line-height:1.65; }

/* ---------- 19. Ads ------------------------------------------------------- */
.ad-slot { display:block; margin-inline:auto; text-align:center; overflow:hidden; }
.ad-slot__label { display:block; font-size:10px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--text-faint); opacity:.7; margin-bottom:.3rem; }
.ad-slot ins { display:block; width:100%; overflow:hidden; background:transparent; }
.ad-slot:not(.is-filled):not(.is-unfilled) { background:var(--surface-alt); border:1px solid var(--border); border-radius:var(--r-4); padding:.5rem; }
.ad-slot.is-unfilled { display:none!important; }
.ad-slot.is-filled { min-height:0; background:none; border:0; padding:0; }
.ad-slot--leaderboard { min-height:100px; margin-block:clamp(1.25rem,2.5vw,2rem); }
.ad-slot--in-article { min-height:280px; margin-block:1.875rem; }
.ad-slot--sidebar { min-height:600px; position:sticky; top:calc(var(--nav-h) + 1.25rem); }
.ad-slot--multiplex { min-height:300px; margin-block:1.75rem; }
@media (max-width:768px) { .ad-slot--in-article { min-height:250px; } }

/* ---------- 20. Search modal ---------------------------------------------- */
.modal { position:fixed; inset:0; z-index:200; display:none; }
.modal.is-open { display:block; }
.modal__backdrop { position:absolute; inset:0; background:rgba(12,27,42,.45); }
.modal__panel { position:relative; max-width:600px; margin:10vh auto 0; background:var(--surface); border:1px solid var(--border-strong); border-radius:var(--r-5); box-shadow:var(--sh-5); overflow:hidden; }
.modal__search { display:flex; align-items:center; gap:.625rem; padding:.75rem 1rem; border-bottom:1px solid var(--border); }
.modal__search .ic { width:17px; height:17px; color:var(--text-faint); flex:none; }
.modal__search input { flex:1; border:0; background:none; font-size:var(--t-16); outline:none; color:var(--text); }
.modal__results { max-height:52vh; overflow-y:auto; padding:.375rem; }
.modal__result { display:flex; align-items:center; gap:.75rem; padding:.55rem .625rem; border-radius:var(--r-3); color:var(--text); text-decoration:none!important; }
.modal__result:hover,.modal__result.is-active { background:var(--surface-sunken); }
.modal__result strong { font-size:var(--t-14); font-weight:600; display:block; }
.modal__result span { font-size:var(--t-12); color:var(--text-faint); }
.modal__result .tag { margin-left:auto; font-size:10px; text-transform:uppercase; letter-spacing:.07em; color:var(--text-faint); border:1px solid var(--border); border-radius:var(--r-2); padding:1px 5px; }
.modal__empty { padding:2rem 1rem; text-align:center; color:var(--text-faint); font-size:var(--t-14); }

/* ---------- 21. Consent bar ----------------------------------------------- */
.consent {
  position:fixed; left:0; right:0; bottom:0; z-index:150;
  background:var(--surface); border-top:1px solid var(--border-strong);
  box-shadow:0 -4px 16px rgba(12,27,42,.08);
  transform:translateY(110%); transition:transform .3s var(--ease);
}
.consent.is-visible { transform:translateY(0); }
.consent__inner { display:flex; flex-wrap:wrap; align-items:center; gap:.75rem 1.5rem; max-width:var(--wrap); margin-inline:auto; padding:.875rem var(--pad); }
.consent p { flex:1; min-width:260px; font-size:var(--t-13); color:var(--text-muted); line-height:1.5; margin:0; }

/* ---------- 22. Footer ---------------------------------------------------- */
.footer { background:var(--ink-900); color:#A9BACA; border-top:1px solid var(--ink-800); padding-block:clamp(2.5rem,4.5vw,3.75rem) 1.75rem; }
[data-theme='dark'] .footer { background:#06101A; }
.footer__grid { display:grid; grid-template-columns:minmax(0,1.5fr) repeat(4,minmax(0,1fr)); gap:2.25rem 1.75rem; }
@media (max-width:900px) { .footer__grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .footer__brand { grid-column:1/-1; } }
@media (max-width:460px) { .footer__grid { grid-template-columns:minmax(0,1fr); } }
.footer .brand__name { color:#fff; }
.footer__brand p { font-size:var(--t-14); color:#8FA3B6; margin-top:.875rem; max-width:36ch; line-height:1.6; }
.footer__col h4 { font-family:var(--font-head); font-size:var(--t-12); font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:#fff; margin-bottom:.75rem; }
.footer__col ul { list-style:none; padding:0; display:grid; gap:.5rem; }
.footer__col a { font-size:var(--t-14); color:#A9BACA; text-decoration:none; }
.footer__col a:hover { color:#fff; text-decoration:underline; }
.footer__social { display:flex; gap:.375rem; margin-top:1rem; }
.footer__social .iconbtn { color:#8FA3B6; border-color:rgba(255,255,255,.14); }
.footer__social .iconbtn:hover { background:rgba(255,255,255,.08); color:#fff; }
.footer__legal { margin-top:2.25rem; padding-top:1.25rem; border-top:1px solid rgba(255,255,255,.1); font-size:var(--t-12); color:#7D93A8; line-height:1.6; }
.footer__bottom { margin-top:1rem; display:flex; flex-wrap:wrap; gap:.5rem 1.25rem; align-items:center; justify-content:space-between; font-size:var(--t-13); color:#8FA3B6; }
.footer__bottom a { color:#8FA3B6; }
.footer__bottom a:hover { color:#fff; }

/* ---------- 23. Utilities ------------------------------------------------- */
.mt-1{margin-top:.5rem}.mt-2{margin-top:1rem}.mt-3{margin-top:1.5rem}.mt-4{margin-top:2rem}.mt-5{margin-top:2.75rem}
.mb-1{margin-bottom:.5rem}.mb-2{margin-bottom:1rem}.mb-3{margin-bottom:1.5rem}.mb-4{margin-bottom:2rem}
.hide-sm{display:initial}
@media(max-width:640px){.hide-sm{display:none}}
@media print {
  .header-wrap,.utility,.footer,.ad-slot,.consent,.article-side,.btn { display:none!important; }
  body { background:#fff; color:#000; }
}