/* =====================================================================
   atlx.css — design system.

   DIRECTION: premium light SaaS (Stripe / Linear / Vercel / Zoho
   register). Light theme only — no dark sections, no theme toggle.
   Tokens below are the exact values from the brief; nothing here is a
   "close enough" substitute.
   ===================================================================== */

:root {
  /* ---- LOCKED brand colour — the ONE accent used everywhere ----
     AtharvLogix's actual logo and marketing collateral use exactly one
     accent colour: this orange. There is no blue anywhere in the real
     brand, so nothing on the site should be blue either. --primary and
     --accent both resolve to this single value rather than each picking
     their own colour — that split (orange logo, blue everything else)
     was the bug reported and fixed here. If a redesign ever wants a
     different brand colour, change --brand-orange itself; don't give
     --primary its own separate value again. */
  --brand-orange:#FF6A00;
  --brand-orange-600:#E85D00;
  --brand-orange-50:#FFF3EA;

  --primary:var(--brand-orange);
  --primary-600:var(--brand-orange-600);
  --primary-50:var(--brand-orange-50);
  --secondary:#0F172A;

  --bg:#FFFFFF;
  --bg-section:#F8FAFC;
  --accent:var(--brand-orange);
  --accent-50:var(--brand-orange-50);
  --success:#22C55E;
  --success-50:#F0FDF4;
  --warn:#D97706;
  --warn-50:#FFFBEB;
  --danger:#DC2626;
  --danger-50:#FEF2F2;
  --border:#E5E7EB;
  --border-2:#D1D5DB;
  --text:#111827;
  --text-2:#475569;
  --text-3:#94A3B8;

  /* derived surfaces */
  --surface:var(--bg);
  --surface-2:var(--bg-section);
  --surface-3:#F1F5F9;
  --line:var(--border);
  --line-2:var(--border-2);
  --accent-soft:var(--primary-50);

  /* type */
  --f-display:'Plus Jakarta Sans','Inter',system-ui,sans-serif;
  --f-body:'Inter','Plus Jakarta Sans',system-ui,-apple-system,sans-serif;
  --f-mono:'IBM Plex Mono',ui-monospace,monospace;

  --t-xs:.75rem; --t-sm:.8125rem; --t-base:.9375rem; --t-md:1.0625rem;
  --t-lg:clamp(1.15rem,1.6vw,1.375rem);
  --t-xl:clamp(1.5rem,2.6vw,2rem);
  --t-2xl:clamp(1.9rem,4vw,2.75rem);
  --t-3xl:clamp(2.4rem,5.4vw,3.75rem);
  --t-4xl:clamp(2.75rem,7vw,4.75rem);

  /* space — generous, per brief */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px;
  --s-6:32px; --s-8:48px; --s-10:64px; --s-12:80px; --s-16:112px;
  --s-20:144px; --s-24:192px;
  --chapter:clamp(72px,9vw,140px);

  /* radius — 16-20px per brief; smaller controls scale down proportionally */
  --r-xs:8px; --r-sm:12px; --r:16px; --r-lg:20px; --r-xl:24px; --r-full:999px;

  /* soft shadows only — no hard drop shadows anywhere */
  --sh-xs:0 1px 2px rgba(15,23,42,.04);
  --sh-sm:0 2px 8px -2px rgba(15,23,42,.07), 0 1px 2px rgba(15,23,42,.04);
  --sh:0 12px 32px -12px rgba(15,23,42,.12), 0 2px 6px -2px rgba(15,23,42,.05);
  --sh-lg:0 28px 64px -24px rgba(15,23,42,.18), 0 4px 12px -4px rgba(15,23,42,.06);
  --sh-primary:0 16px 36px -14px rgba(37,99,235,.38);

  --maxw:1280px;
  --gutter:clamp(20px,5vw,48px);

  --ease:cubic-bezier(.16,1,.3,1);
  --ease-io:cubic-bezier(.65,.05,.36,1);
  --dur:.24s;

  color-scheme: light;
}

/* =====================================================================
   RESET
   ===================================================================== */
*,*::before,*::after { box-sizing:border-box; }
* { margin:0; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body {
  font-family:var(--f-body);
  font-size:var(--t-base);
  line-height:1.7;
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,svg,video { display:block; max-width:100%; }
button,input,select,textarea { font:inherit; color:inherit; }
a { color:inherit; text-decoration:none; }
ul,ol { list-style:none; padding:0; }

h1,h2,h3,h4 {
  font-family:var(--f-display); font-weight:700; line-height:1.08;
  letter-spacing:-.02em; color:var(--secondary); text-wrap:balance;
}
h1 { font-size:var(--t-4xl); letter-spacing:-.03em; }
h2 { font-size:var(--t-3xl); letter-spacing:-.025em; }
h3 { font-size:var(--t-xl); }
h4 { font-size:var(--t-lg); }
p { text-wrap:pretty; }

:focus-visible { outline:2px solid var(--primary); outline-offset:2px; border-radius:4px; }
.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:var(--s-4); top:-100px; z-index:999;
  background:var(--primary); color:#fff; border-radius:var(--r-sm);
  padding:var(--s-3) var(--s-5); transition:top var(--dur) var(--ease);
}
.skip-link:focus { top:var(--s-4); }

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

/* =====================================================================
   LAYOUT
   ===================================================================== */
.wrap { width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.wrap-narrow { max-width:800px; }

.section { padding-block:var(--chapter); }
.section--tight { padding-block:calc(var(--chapter) * .55); }
.section--flush-top { padding-top:0; }
.section--alt { background:var(--surface-2); }
.section--dark { background:var(--secondary); color:#fff; border-radius:var(--r-xl); }
.section--dark h2,.section--dark h1 { color:#fff; }
.section--dark p { color:#CBD5E1; }

.stack > * + * { margin-top:var(--s-5); }
.grid { display:grid; gap:var(--s-6); }
.grid-2 { grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); }
.grid-3 { grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); }
.grid-4 { grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); }
/* plain gapped grid (no auto-fit min-width), used for asymmetric 2-up layouts */
.grid--gap { grid-template-columns:1fr; gap:var(--s-12); }
@media (min-width:900px) { .grid--gap { grid-template-columns:1fr 1fr; } }
.cluster { display:flex; flex-wrap:wrap; gap:var(--s-3); align-items:center; }
.bleed { width:100vw; margin-left:50%; transform:translateX(-50%); }

/* =====================================================================
   SECTION HEADS
   ===================================================================== */
.eyebrow {
  display:inline-flex; align-items:center; gap:var(--s-2);
  font-family:var(--f-body); font-size:var(--t-xs); font-weight:600;
  letter-spacing:.04em; text-transform:uppercase; color:var(--primary);
  background:var(--primary-50); border-radius:var(--r-full);
  padding:.4rem .9rem; margin-bottom:var(--s-5);
}
.section-head { max-width:62ch; margin-bottom:var(--s-10); }
.section-head--center { margin-inline:auto; text-align:center; }
.section-head--center .eyebrow { justify-content:center; }
.section-head p { color:var(--text-2); font-size:var(--t-md); margin-top:var(--s-4); }

.titleblock { max-width:62ch; margin-bottom:var(--s-10); }
.titleblock__no { display:none; }  /* drafting-table relic, hidden in light theme */
.titleblock p { color:var(--text-2); font-size:var(--t-md); margin-top:var(--s-4); }

.display { font-family:var(--f-display); font-weight:800; letter-spacing:-.03em; font-size:var(--t-4xl); line-height:1.03; }
.display em { font-style:normal; color:var(--primary); }

/* =====================================================================
   ILLUSTRATIONS — premium flat/isometric SVG, not photography, not
   literal 3D renders. Soft primary/accent fills, gentle drop-shadow.
   ===================================================================== */
.illo { width:100%; filter:drop-shadow(0 24px 48px rgba(15,23,42,.08)); }
.illo svg { width:100%; height:auto; overflow:visible; }
.illo .dr { stroke:var(--border-2); stroke-width:1.4; fill:none; vector-effect:non-scaling-stroke; }
.illo .dr.heavy { stroke:var(--secondary); stroke-width:1.8; }
.illo .dr.thin { stroke:var(--border); stroke-width:1; opacity:.8; }
.illo .dr.accent { stroke:var(--primary); }
.illo .fill-hatch { fill:var(--primary-50); stroke:var(--primary); stroke-width:1; opacity:.9; }
.illo .fill-solid { fill:var(--primary); stroke:none; }
.illo .fill-accent { fill:var(--accent-50); stroke:var(--accent); stroke-width:1; }
.illo .fill-success { fill:var(--success-50); stroke:var(--success); stroke-width:1; }
.illo .illo-grid { color:var(--border); }
.illo .anno {
  font-family:var(--f-mono); font-size:11px; letter-spacing:.06em;
  fill:var(--text-3); stroke:none;
}
.illo .anno.mid { text-anchor:middle; }
.illo .anno.end { text-anchor:end; }
.illo .anno.accent { fill:var(--primary); font-weight:600; }
.illo .anno.faint { opacity:.6; }
.illo .dim { color:var(--text-3); }
/* .rot marks dimension-line text that is rotated via the SVG transform
   attribute directly (not CSS) — no styling needed here. */
.illo .anno.rot { }
.illo .badge-chip { fill:var(--bg); stroke:var(--border-2); }
/* .callout and .iso-layer are pure SVG <g> groupings used for semantic
   structure inside illustrations.php (a callout annotation, an isometric
   stack layer). They carry no styling of their own — every element inside
   them already has a .dr / .anno / .fill-* class — so these rules are
   intentionally empty rather than missing. */
.illo .callout,
.illo .iso-layer { /* grouping only */ }

/* =====================================================================
   BUTTONS
   ===================================================================== */
.btn {
  --bg-btn:transparent; --fg-btn:var(--text); --bd-btn:var(--border-2);
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s-3);
  font-family:var(--f-body); font-size:var(--t-base); font-weight:600;
  line-height:1; padding:.95rem 1.5rem;
  border:1px solid var(--bd-btn); border-radius:var(--r-sm);
  background:var(--bg-btn); color:var(--fg-btn); cursor:pointer; white-space:nowrap;
  transition:background var(--dur) var(--ease), border-color var(--dur) var(--ease),
             color var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
             transform var(--dur) var(--ease);
}
.btn--primary { --bg-btn:var(--primary); --fg-btn:#fff; --bd-btn:var(--primary); box-shadow:var(--sh-primary); }
.btn--primary:hover { --bg-btn:var(--primary-600); --bd-btn:var(--primary-600); transform:translateY(-1px); }
.btn--outline { --bg-btn:var(--bg); box-shadow:var(--sh-xs); }
.btn--outline:hover { --bd-btn:var(--primary); --fg-btn:var(--primary); background:var(--primary-50); }
.btn--dark { --bg-btn:var(--secondary); --fg-btn:#fff; --bd-btn:var(--secondary); }
.btn--dark:hover { --bg-btn:#1E293B; }
.btn--quiet { --bd-btn:transparent; --fg-btn:var(--text-2); }
.btn--quiet:hover { --fg-btn:var(--primary); background:var(--primary-50); }
.btn--on-dark { --bd-btn:rgba(255,255,255,.28); --fg-btn:#fff; }
.btn--on-dark:hover { --bd-btn:#fff; background:rgba(255,255,255,.08); }
.btn--sm { padding:.6rem 1rem; font-size:var(--t-sm); border-radius:var(--r-xs); }
.btn--lg { padding:1.15rem 2rem; font-size:var(--t-md); }
.btn--block { width:100%; }
.btn[disabled],.btn[aria-disabled="true"] { opacity:.5; pointer-events:none; }

.link {
  display:inline-flex; align-items:center; gap:var(--s-2);
  font-weight:600; color:var(--primary); font-size:var(--t-sm);
}

/* =====================================================================
   CARDS — rounded, soft-shadow, the premium-SaaS default
   ===================================================================== */
.card {
  background:var(--bg); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:var(--s-8); box-shadow:var(--sh-xs);
  transition:box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease),
             transform var(--dur) var(--ease);
}
.card--link:hover { box-shadow:var(--sh); border-color:var(--line-2); transform:translateY(-3px); }
.card__icon {
  display:grid; place-items:center; width:48px; height:48px; border-radius:var(--r);
  background:var(--primary-50); color:var(--primary); margin-bottom:var(--s-6); font-size:1.2rem;
}
.card__title { font-size:var(--t-lg); margin-bottom:var(--s-3); color:var(--secondary); }
.card__body { color:var(--text-2); }
.card__foot { margin-top:var(--s-6); padding-top:var(--s-5); border-top:1px solid var(--line); }

/* numbered index row — kept for products listing */
.index-item {
  display:grid; grid-template-columns:auto 1fr auto; gap:var(--s-6); align-items:center;
  padding:var(--s-8) var(--s-6); border-radius:var(--r-lg);
  border:1px solid var(--line); background:var(--bg); margin-bottom:var(--s-4);
  transition:box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.index-item:hover { box-shadow:var(--sh); border-color:var(--line-2); }
.index-item__no {
  font-family:var(--f-mono); font-size:var(--t-xs); color:var(--text-3);
  width:40px; height:40px; border-radius:var(--r-full); border:1px solid var(--line-2);
  display:grid; place-items:center;
}
.index-item__title { font-size:var(--t-xl); font-family:var(--f-display); font-weight:700; color:var(--secondary); }
.index-item:hover .index-item__title { color:var(--primary); }
.index-item__meta { color:var(--text-2); font-size:var(--t-sm); margin-top:var(--s-2); }
.index-item__go {
  font-size:var(--t-xs); font-weight:600; color:var(--primary);
  background:var(--primary-50); padding:.5rem .9rem; border-radius:var(--r-full);
}
@media (max-width:720px) { .index-item { grid-template-columns:auto 1fr; } .index-item__go { display:none; } }

/* =====================================================================
   BADGES, PILLS
   ===================================================================== */
.badge {
  display:inline-flex; align-items:center; gap:var(--s-2);
  font-size:var(--t-xs); font-weight:600; border-radius:var(--r-full);
  padding:.3rem .7rem; background:var(--surface-3); color:var(--text-2);
}
.badge--accent { background:var(--primary-50); color:var(--primary); }
.badge--ok { background:var(--success-50); color:var(--success); }
.badge--warn { background:var(--warn-50); color:var(--warn); }
.badge--risk { background:var(--danger-50); color:var(--danger); }

.pill {
  display:inline-flex; align-items:center; gap:var(--s-3);
  padding:.65rem 1.1rem; border:1px solid var(--line); border-radius:var(--r-full);
  font-size:var(--t-sm); font-weight:500; color:var(--text-2); background:var(--bg);
  transition:border-color var(--dur) var(--ease), color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.pill:hover { border-color:var(--primary); color:var(--primary); background:var(--primary-50); }

/* =====================================================================
   FORMS — premium, generous, rounded
   ===================================================================== */
.field { display:flex; flex-direction:column; gap:var(--s-2); }
.field__label { font-size:var(--t-sm); font-weight:600; color:var(--secondary); }
.field__label .req { color:var(--danger); }
.field__hint { font-size:var(--t-xs); color:var(--text-3); }

.input,.select,.textarea {
  width:100%; padding:.85rem 1.05rem; background:var(--bg); color:var(--text);
  border:1px solid var(--line-2); border-radius:var(--r-sm); font-size:var(--t-base);
  transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.input::placeholder,.textarea::placeholder { color:var(--text-3); }
.input:focus,.select:focus,.textarea:focus {
  outline:none; border-color:var(--primary); box-shadow:0 0 0 4px var(--primary-50);
}
.textarea { min-height:130px; resize:vertical; }
.select {
  appearance:none; padding-right:2.4rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%2394A3B8' stroke-width='1.6' fill='none'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 1rem center; background-size:12px;
}
.field--invalid .input,.field--invalid .select,.field--invalid .textarea { border-color:var(--danger); }
.field__error { font-size:var(--t-xs); color:var(--danger); }
.hp { position:absolute; left:-9999px; opacity:0; height:0; overflow:hidden; }

.alert {
  display:flex; gap:var(--s-4); align-items:flex-start;
  padding:var(--s-5) var(--s-6); border-radius:var(--r);
  border:1px solid var(--line); background:var(--surface-2); font-size:var(--t-base);
}
.alert--ok    { border-color:var(--success); background:var(--success-50); color:#166534; }
.alert--warn  { border-color:var(--warn);    background:var(--warn-50);    color:#92400E; }
.alert--error { border-color:var(--danger);  background:var(--danger-50); color:#991B1B; }
.alert__icon { flex:0 0 auto; }

/* =====================================================================
   TABLE
   ===================================================================== */
.table-wrap { overflow-x:auto; border:1px solid var(--line); border-radius:var(--r-lg); }
.table { width:100%; border-collapse:collapse; font-size:var(--t-base); }
.table th {
  text-align:left; font-size:var(--t-xs); font-weight:600; letter-spacing:.04em;
  text-transform:uppercase; color:var(--text-3); padding:var(--s-4) var(--s-5);
  background:var(--surface-2); border-bottom:1px solid var(--line); white-space:nowrap;
}
.table td { padding:var(--s-5); border-bottom:1px solid var(--line); }
.table tbody tr:last-child td { border-bottom:0; }
.table tbody tr:hover { background:var(--surface-2); }
.table .num { font-family:var(--f-mono); font-variant-numeric:tabular-nums; text-align:right; }

/* =====================================================================
   ACCORDION — the pricing UI lives here
   ===================================================================== */
.accordion { border-top:1px solid var(--line); }
.acc { border-bottom:1px solid var(--line); }
.acc__q {
  display:flex; align-items:center; justify-content:space-between; gap:var(--s-6);
  padding:var(--s-6) 0; cursor:pointer; list-style:none;
  font-family:var(--f-display); font-size:var(--t-lg); font-weight:700; color:var(--secondary);
}
.acc__q::-webkit-details-marker { display:none; }
.acc__q:hover { color:var(--primary); }
.acc__q::after {
  content:""; flex:0 0 auto; width:34px; height:34px; border-radius:var(--r-full);
  border:1px solid var(--line-2); position:relative;
  transition:transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.acc__q::before {
  content:"+"; position:absolute; font-family:var(--f-body); font-size:1.1rem; font-weight:400;
}
.acc[open] .acc__q::after { transform:rotate(45deg); border-color:var(--primary); }
.acc__a { padding-bottom:var(--s-6); color:var(--text-2); max-width:70ch; }

/* pricing accordion: a richer variant used inside product pages */
.acc-plan { border:1px solid var(--line); border-radius:var(--r-lg); margin-bottom:var(--s-4); overflow:hidden; }
.acc-plan[open] { border-color:var(--primary); box-shadow:var(--sh); }
.acc-plan__head {
  display:flex; align-items:center; justify-content:space-between; gap:var(--s-5);
  padding:var(--s-6) var(--s-6); cursor:pointer; list-style:none;
}
.acc-plan__head::-webkit-details-marker { display:none; }
.acc-plan__name { display:flex; align-items:center; gap:var(--s-4); }
.acc-plan__name strong { font-family:var(--f-display); font-size:var(--t-lg); color:var(--secondary); }
.acc-plan__price { font-family:var(--f-display); font-size:var(--t-lg); font-weight:700; color:var(--primary); white-space:nowrap; }
.acc-plan__caret {
  width:32px; height:32px; border-radius:var(--r-full); border:1px solid var(--line-2);
  display:grid; place-items:center; flex:0 0 auto; transition:transform var(--dur) var(--ease);
}
.acc-plan[open] .acc-plan__caret { transform:rotate(180deg); border-color:var(--primary); color:var(--primary); }
.acc-plan__body { padding:0 var(--s-6) var(--s-8); border-top:1px solid var(--line); }
.acc-plan__grid { display:grid; gap:var(--s-8); grid-template-columns:2fr 1fr; padding-top:var(--s-6); }
@media (max-width:720px) { .acc-plan__grid { grid-template-columns:1fr; } }
.acc-plan__list { display:grid; gap:var(--s-3); }
.acc-plan__list li { display:flex; gap:var(--s-3); align-items:flex-start; font-size:var(--t-sm); color:var(--text-2); }
.acc-plan__tick { flex:0 0 auto; color:var(--success); font-weight:700; }
.acc-plan__meta { display:grid; gap:var(--s-4); align-content:start; }
.acc-plan__meta-row { display:flex; justify-content:space-between; font-size:var(--t-sm);
  padding-bottom:var(--s-3); border-bottom:1px solid var(--line); }
.acc-plan__meta-row dt { color:var(--text-3); }
.acc-plan__meta-row dd { font-weight:600; color:var(--secondary); }
.acc-plan__cta { display:flex; gap:var(--s-3); margin-top:var(--s-5); }

/* =====================================================================
   STATS
   ===================================================================== */
.stat__value { font-family:var(--f-display); font-size:var(--t-2xl); font-weight:800;
  color:var(--secondary); line-height:1; font-variant-numeric:tabular-nums; }
.stat__label { font-size:var(--t-sm); color:var(--text-2); margin-top:var(--s-3); font-weight:500; }

/* rail — process/timeline */
.rail { position:relative; display:grid; gap:var(--s-8); }
.rail::before {
  content:""; position:absolute; left:15px; top:12px; bottom:12px; width:2px;
  background:linear-gradient(180deg,var(--primary) 0%,var(--line) 15%,var(--line) 85%,transparent);
  border-radius:2px;
}
.rail__stop { position:relative; padding-left:var(--s-10); }
.rail__node {
  position:absolute; left:0; top:0; width:32px; height:32px; border-radius:var(--r-full);
  display:grid; place-items:center; border:1px solid var(--line-2); background:var(--bg);
  font-size:var(--t-xs); font-weight:600; color:var(--text-3);
  transition:border-color var(--dur) var(--ease), color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.rail__stop.is-lit .rail__node { border-color:var(--primary); color:#fff; background:var(--primary); }
.rail__label { font-size:var(--t-xs); font-weight:600; letter-spacing:.04em; text-transform:uppercase;
  color:var(--primary); margin-bottom:var(--s-2); }
.rail__title { font-size:var(--t-lg); margin-bottom:var(--s-3); color:var(--secondary); }
.rail__body { color:var(--text-2); max-width:56ch; }
@media (min-width:900px) {
  .rail--across { grid-auto-flow:column; grid-auto-columns:1fr; gap:var(--s-6); }
  .rail--across::before { left:16px; right:16px; top:16px; bottom:auto; width:auto; height:2px; }
  .rail--across .rail__stop { padding-left:0; padding-top:var(--s-12); }
}

/* =====================================================================
   MARQUEE
   ===================================================================== */
.marquee {
  overflow:hidden; padding-block:var(--s-6);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.marquee__track { display:flex; gap:var(--s-16); width:max-content; align-items:center; }
.marquee__item {
  font-family:var(--f-display); font-size:var(--t-lg); font-weight:700;
  color:var(--text-3); white-space:nowrap;
}

/* =====================================================================
   PRICING SUMMARY CARD (used on homepage teaser)
   ===================================================================== */
.plan__price { display:flex; align-items:baseline; gap:var(--s-2); margin:var(--s-5) 0 var(--s-2); }
.plan__amount { font-family:var(--f-display); font-size:var(--t-2xl); font-weight:800; color:var(--secondary); }
.plan__period { font-size:var(--t-xs); color:var(--text-3); font-weight:500; }
.plan__list { display:grid; gap:var(--s-3); }
.plan__list li { display:flex; gap:var(--s-3); align-items:flex-start; color:var(--text-2); font-size:var(--t-sm); }
.plan__tick { flex:0 0 auto; color:var(--success); font-weight:700; }

/* =====================================================================
   EMPTY / SKELETON
   ===================================================================== */
.empty { text-align:center; padding:var(--s-16) var(--s-6); color:var(--text-2);
  border:1px dashed var(--line-2); border-radius:var(--r-lg); }
.empty__title { font-family:var(--f-display); font-size:var(--t-lg); color:var(--secondary); margin-bottom:var(--s-3); }
.skeleton { background:var(--surface-3); border-radius:var(--r-sm); }

/* =====================================================================
   COOKIE BANNER
   ===================================================================== */
.cookie-bar {
  position:fixed; left:var(--s-5); right:var(--s-5); bottom:var(--s-5); z-index:150;
  max-width:560px; margin-inline:auto;
  background:var(--secondary); color:#fff; border-radius:var(--r-lg);
  padding:var(--s-6); box-shadow:var(--sh-lg);
  display:flex; flex-wrap:wrap; gap:var(--s-4); align-items:center; justify-content:space-between;
}
.cookie-bar p { font-size:var(--t-sm); color:#CBD5E1; max-width:36ch; }
.cookie-bar[hidden] { display:none; }

/* =====================================================================
   UTILITIES
   ===================================================================== */
.mono { font-family:var(--f-mono); }
.muted { color:var(--text-2); }
.faint { color:var(--text-3); }
.accent { color:var(--primary); }
.center { text-align:center; }
.lead { font-size:var(--t-md); color:var(--text-2); max-width:58ch; }
.measure { max-width:68ch; }
.hide-sm { display:none; }
@media (min-width:768px) { .hide-sm { display:revert; } .show-sm { display:none; } }