/* ==========================================================================
   aytm Design System — single-file stylesheet
   ==========================================================================
   Brand owner: Umongous, Inc. (DBA aytm — "Ask Your Target Market")
   Self-contained. Drop this ONE file into any page:

       <link rel="stylesheet" href="aytm.css">

   Or paste it into a <style> block. Fonts load from Google Fonts over the
   network — no local font files needed. (Roundserrat is not on Google Fonts;
   the wordmark family falls back to Montserrat, which is its closest sibling.)

   Contents:
     1. Font imports
     2. :root design tokens (color, gradient, type, space, radius, shadow, motion)
     3. Base / reset
     4. Semantic typography classes  (.aytm-h1, .aytm-eyebrow, .aytm-body, …)
     5. Component helpers            (.aytm-card, .aytm-btn, .aytm-stat-pill, .aytm-sticker)
     6. Charts                       (.aytm-chart--hbar / vbar / rings / gauge / waffle / progress-pill)
     7. Guardrails                   (banned accent rails)
   ========================================================================== */

/* ====== 1. FONTS ====== */
@import url("https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&family=Merriweather+Sans:ital,wght@0,300..800;1,300..800&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Sora:wght@100..800&display=swap");

/* ====== 2. TOKENS ====== */
:root {
  /* ---- Named brand palette (canonical) ---- */
  --aytm-aruba:     #1C9AC4;  /* cyan-blue — default content eyebrow */
  --aytm-ocean:     #1D67A9;  /* mid blue — large headline color */
  --aytm-aegean:    #223D64;  /* dark navy */
  --aytm-starfish:  #46338B;  /* deep violet */
  --aytm-lilac:     #8C3375;  /* magenta-purple */
  --aytm-coral:     #FB40A5;  /* hot pink — accent stickers */
  --aytm-horizon:   #FF8A5C;  /* warm orange */
  --aytm-aquamarine:#5BBFC0;  /* teal */
  --aytm-harbor:    #555555;  /* mid gray — body text */
  --aytm-haze:      #F0F0F0;  /* off-white */

  /* ---- Legacy gradient stops (kept for the signature gradient) ---- */
  --aytm-magenta:        #E8348C;
  --aytm-magenta-soft:   #F47BBA;
  --aytm-violet:         #8E3FB8;
  --aytm-purple:         #5B36A6;
  --aytm-indigo:         #2E2D8E;
  --aytm-navy:           #1F2E8C;  /* headings / wordmark */
  --aytm-navy-deep:      #14185C;
  --aytm-teal:           #4FC2C2;
  --aytm-teal-deep:      #2F8C8C;

  /* ---- Neutrals (body text is ALWAYS Harbor #555) ---- */
  --aytm-ink:            #555555;
  --aytm-ink-2:          #4B4A6A;
  --aytm-ink-3:          #8E8DA8;
  --aytm-rule:           #E5E4EE;
  --aytm-surface:        #FFFFFF;
  --aytm-surface-2:      #F6F5FA;
  --aytm-surface-3:      #ECEAF3;
  --aytm-overlay-tint:   rgba(31, 46, 140, 0.06);

  /* ---- Semantic ---- */
  --aytm-success:        #2FA876;
  --aytm-warning:        #E89B2D;
  --aytm-danger:         #D9354B;
  --aytm-info:           #3677D9;

  /* ---- Partner ---- */
  --aytm-pg-blue:        #0A57A4;
  --aytm-pg-blue-light:  #2EA0E8;

  /* ---- Gradients (the magenta→violet→navy is the signature) ---- */
  --grad-brand:          linear-gradient(135deg, #E8348C 0%, #8E3FB8 50%, #1F2E8C 100%);
  --grad-brand-soft:     linear-gradient(135deg, #F47BBA 0%, #B07AD0 50%, #6B7AC9 100%);
  --grad-brand-vertical: linear-gradient(180deg, #E8348C 0%, #8E3FB8 50%, #1F2E8C 100%);
  --grad-stat-pill:      linear-gradient(90deg,  #E8348C 0%, #8E3FB8 35%, #5B36A6 65%, #1F2E8C 100%);
  --grad-bokeh:          radial-gradient(120% 90% at 30% 30%, #6B3FB8 0%, #2E2D8E 50%, #14185C 100%);
  --grad-dusk:           linear-gradient(180deg, #B7A3D8 0%, #8B7DBF 50%, #4A4A8E 100%);
  --grad-text-brand:     linear-gradient(90deg, #E8348C 0%, #8E3FB8 50%, #1F2E8C 100%);

  /* ---- Type families ---- */
  --font-display:  "Merriweather", "Georgia", "EB Garamond", serif;
  --font-sans:     "Merriweather Sans", "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  --font-ui:       "Montserrat", "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  --font-wordmark: "Roundserrat", "Montserrat", "Helvetica Neue", sans-serif;
  --font-numeric:  "Sora", "Merriweather Sans", "Helvetica Neue", sans-serif;
  --font-mono:     "SF Mono", "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;

  /* ---- Type scale ---- */
  --fs-display-xl: clamp(56px, 7vw, 96px);
  --fs-display-l:  clamp(44px, 5vw, 72px);
  --fs-display-m:  clamp(36px, 4vw, 56px);
  --fs-h1:         44px;
  --fs-h2:         32px;
  --fs-h3:         24px;
  --fs-h4:         20px;
  --fs-body-lg:    20px;
  --fs-body:       16px;
  --fs-body-sm:    14px;
  --fs-caption:    12px;
  --fs-eyebrow:    11px;

  --lh-tight:  1.05;
  --lh-snug:   1.2;
  --lh-body:   1.5;
  --lh-loose:  1.7;

  --tr-display:  -0.02em;
  --tr-body:     0;
  --tr-eyebrow:  0.18em;
  --tr-button:   0.04em;

  /* ---- Spacing & radii ---- */
  --slide-x: 80px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   20px;
  --radius-xl:   28px;
  --radius-pill: 999px;

  /* ---- Elevation ---- */
  --shadow-1: 0 1px 2px rgba(20,18,58,.06), 0 1px 1px rgba(20,18,58,.04);
  --shadow-2: 0 4px 12px rgba(20,18,58,.08), 0 2px 4px rgba(20,18,58,.04);
  --shadow-3: 0 12px 28px rgba(20,18,58,.12), 0 4px 8px rgba(20,18,58,.06);
  --shadow-4: 0 24px 60px rgba(20,18,58,.18), 0 8px 16px rgba(20,18,58,.08);
  --shadow-glow-magenta: 0 8px 32px rgba(232,52,140,.35);
  --shadow-inset:  inset 0 1px 0 rgba(255,255,255,.6);

  /* ---- Motion ---- */
  --ease-out:    cubic-bezier(.2,.7,.2,1);
  --ease-in-out: cubic-bezier(.6,.05,.3,.95);
  --dur-fast:    140ms;
  --dur-base:    240ms;
  --dur-slow:    420ms;

  /* ---- Semantic / themeable tokens ----
     These are the ONLY values that change between light and dark. Components
     reference these (never the raw palette) so a single theme block re-skins
     everything. Light values live here; dark overrides them below. */
  --aytm-bg:            var(--aytm-surface);   /* page ground */
  --aytm-bg-raised:     var(--aytm-surface-2);
  --aytm-bg-sunken:     var(--aytm-surface-3);
  --aytm-text-body:     var(--aytm-ink);       /* body copy */
  --aytm-text-muted:    var(--aytm-ink-3);
  --aytm-text-heading:  var(--aytm-ocean);     /* display H1/H2 */
  --aytm-text-strong:   var(--aytm-navy);      /* H3/H4 */
  --aytm-text-eyebrow:  var(--aytm-aruba);     /* default eyebrow */
  --aytm-text-link:     var(--aytm-ocean);
  --aytm-text-link-h:   var(--aytm-starfish);
  --aytm-border:        var(--aytm-rule);

  /* card treatment */
  --aytm-card-bg:       var(--aytm-surface);
  --aytm-card-border:   transparent;
  --aytm-card-shadow:   var(--shadow-2);

  /* section pill */
  --aytm-pill-bg:       rgba(29,103,169,.08);
  --aytm-pill-fg:       var(--aytm-ocean);

  /* charts */
  --aytm-chart-bg:      var(--aytm-surface);
  --aytm-chart-track:   #F0F0F0;
  --aytm-chart-track-soft: #F4F4F6;
  --aytm-chart-ink:     var(--aytm-harbor);   /* labels */
  --aytm-chart-muted:   var(--aytm-ink-3);
  --aytm-chart-title:   var(--aytm-aegean);
  --aytm-chart-number:  var(--aytm-aegean);   /* headline numerals */
  --aytm-chart-value:   var(--aytm-ocean);    /* % labels */
}

/* ====== 2b. DARK THEME (Option B — neutral charcoal) ======
   Activate three ways, all from this one file:
     1. <html data-theme="dark">            whole document
     2. <div class="aytm-dark">             any region / island
     3. system auto                          (opt-in block at the very bottom)
   The brand gradient, Coral, and the accent palette are intentionally NOT
   overridden — they are the signature and read correctly on dark. */
[data-theme="dark"], .aytm-dark {
  --aytm-surface:   #1A1A1E;
  --aytm-surface-2: #242429;
  --aytm-surface-3: #121214;

  --aytm-ink:    #DEDEDE;
  --aytm-ink-2:  #C4C4CA;
  --aytm-ink-3:  #9C9C9C;
  --aytm-rule:   rgba(255,255,255,.10);
  --aytm-harbor: #C8C8CE;   /* body copy on dark — was #555 on light */

  --aytm-bg:           var(--aytm-surface);
  --aytm-bg-raised:    var(--aytm-surface-2);
  --aytm-bg-sunken:    var(--aytm-surface-3);
  --aytm-text-body:    var(--aytm-ink);
  --aytm-text-muted:   var(--aytm-ink-3);
  --aytm-text-heading: #4FB5DB;   /* brightened cyan — Ocean is too dark on charcoal */
  --aytm-text-strong:  #FFFFFF;
  --aytm-text-eyebrow: var(--aytm-aquamarine);
  --aytm-text-link:    #4FB5DB;
  --aytm-text-link-h:  var(--aytm-aquamarine);
  --aytm-border:       var(--aytm-rule);

  --aytm-card-bg:      var(--aytm-surface-2);
  --aytm-card-border:  rgba(255,255,255,.10);
  --aytm-card-shadow:  0 1px 0 rgba(255,255,255,.04) inset, 0 8px 24px rgba(0,0,0,.45);

  --aytm-pill-bg:      rgba(255,255,255,.10);
  --aytm-pill-fg:      #FFFFFF;

  --aytm-chart-bg:     transparent;
  --aytm-chart-track:  rgba(255,255,255,.09);
  --aytm-chart-track-soft: rgba(255,255,255,.06);
  --aytm-chart-ink:    #C8C8CE;
  --aytm-chart-muted:  #9C9C9C;
  --aytm-chart-title:  #EDEDF2;
  --aytm-chart-number: #EDEDF2;
  --aytm-chart-value:  #4FB5DB;
}

/* ====== 3. BASE / RESET ======
   Light-touch page defaults so a bare page picks up the brand immediately.
   Scope is body-level only; doesn't fight a host app's own reset. */
.aytm-page {
  margin: 0;
  background: var(--aytm-bg);
  color: var(--aytm-text-body);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.aytm-page *, .aytm-page *::before, .aytm-page *::after { box-sizing: border-box; }
.aytm-page a { color: var(--aytm-text-link); text-decoration: none; }
.aytm-page a:hover { color: var(--aytm-text-link-h); }

/* ====== 4. SEMANTIC TYPOGRAPHY ====== */
.aytm-display-xl, .aytm-cover-title {
  font-family: var(--font-display); font-weight: 300; font-style: normal;
  font-size: var(--fs-display-xl); line-height: var(--lh-tight);
  letter-spacing: var(--tr-display); color: var(--aytm-text-heading);
}
.aytm-h1, h1.aytm {
  font-family: var(--font-display); font-weight: 300; font-style: normal;
  font-size: var(--fs-display-l); line-height: var(--lh-snug);
  letter-spacing: var(--tr-display); color: var(--aytm-text-heading);
}
.aytm-h2, h2.aytm {
  font-family: var(--font-display); font-weight: 300; font-style: normal;
  font-size: var(--fs-display-m); line-height: var(--lh-snug);
  letter-spacing: var(--tr-display); color: var(--aytm-text-heading);
}
.aytm-h3, h3.aytm {
  font-family: var(--font-sans); font-weight: 700;
  font-size: var(--fs-h3); line-height: var(--lh-snug); color: var(--aytm-text-strong);
}
.aytm-h4, h4.aytm {
  font-family: var(--font-ui); font-weight: 600;
  font-size: var(--fs-h4); line-height: var(--lh-snug); color: var(--aytm-text-strong);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.aytm-eyebrow {
  font-family: var(--font-ui); font-weight: 700;
  font-size: var(--fs-eyebrow); text-transform: uppercase;
  letter-spacing: var(--tr-eyebrow); color: var(--aytm-text-eyebrow);
}
.aytm-eyebrow--ink      { color: var(--aytm-ink-2); }
.aytm-eyebrow--white    { color: rgba(255,255,255,.85); }
.aytm-eyebrow--aruba    { color: var(--aytm-aruba); }
.aytm-eyebrow--coral    { color: var(--aytm-coral); }
.aytm-eyebrow--horizon  { color: var(--aytm-horizon); }
.aytm-eyebrow--starfish { color: var(--aytm-starfish); }
.aytm-eyebrow--lilac    { color: var(--aytm-lilac); }
.aytm-eyebrow--ocean    { color: var(--aytm-ocean); }
.aytm-body {
  font-family: var(--font-sans); font-weight: 400; font-style: normal;
  font-size: var(--fs-body); line-height: var(--lh-body); color: var(--aytm-text-body);
}
.aytm-body-lg {
  font-family: var(--font-sans); font-weight: 400; font-style: normal;
  font-size: var(--fs-body-lg); line-height: var(--lh-body); color: var(--aytm-text-body);
}
.aytm-caption {
  font-family: var(--font-ui); font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.16em; font-size: var(--fs-caption);
  line-height: var(--lh-body); color: var(--aytm-text-muted);
}
.aytm-mono { font-family: var(--font-mono); font-size: var(--fs-body-sm); color: var(--aytm-text-body); }
.aytm-grad-text {
  background: var(--grad-text-brand);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* ====== 5. COMPONENT HELPERS ====== */

/* Card — surface + shadow driven by theme tokens; no border in light, hairline in dark. */
.aytm-card {
  background: var(--aytm-card-bg);
  border: 1px solid var(--aytm-card-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--aytm-card-shadow);
  padding: var(--space-6) var(--space-6);
  display: flex; flex-direction: column; gap: var(--space-4);
}
.aytm-card--dark {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(20px);
  color: #fff;
}

/* Buttons / pills — always pill radius. Lighten on hover, never darken. */
.aytm-btn {
  font-family: var(--font-ui); font-weight: 600; font-size: var(--fs-body-sm);
  letter-spacing: var(--tr-button); text-transform: uppercase;
  padding: 14px 28px; border-radius: var(--radius-pill);
  border: none; cursor: pointer; display: inline-block;
  transition: filter var(--dur-base) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.aytm-btn--primary { background: var(--grad-brand); color: #fff; box-shadow: var(--shadow-2); }
.aytm-btn--primary:hover  { filter: brightness(1.05); }
.aytm-btn--primary:active { transform: translateY(1px); }
/* Secondary — Coral outline in both themes. Label is Coral on light,
   white on dark (white-on-white wouldn't read in light mode). */
.aytm-btn--secondary { background: transparent; color: var(--aytm-coral); box-shadow: inset 0 0 0 1.5px var(--aytm-coral); }
.aytm-btn--secondary:hover { color: #fff; background: var(--aytm-coral); box-shadow: inset 0 0 0 1.5px var(--aytm-coral); }
[data-theme="dark"] .aytm-btn--secondary, .aytm-dark .aytm-btn--secondary { color: #fff; }
.aytm-btn--ghost { background: transparent; color: var(--aytm-text-link); padding: 14px 8px; }
.aytm-btn--ghost:hover { color: var(--aytm-text-link-h); }
/* In dark, the ghost button is white, brightening to Aruba on hover. */
[data-theme="dark"] .aytm-btn--ghost, .aytm-dark .aytm-btn--ghost { color: #fff; }
[data-theme="dark"] .aytm-btn--ghost:hover, .aytm-dark .aytm-btn--ghost:hover { color: var(--aytm-aruba); }

/* Pink accent sticker / seal. */
.aytm-sticker {
  font-family: var(--font-ui); font-weight: 700; font-size: var(--fs-eyebrow);
  text-transform: uppercase; letter-spacing: var(--tr-eyebrow); color: #fff;
  background: var(--aytm-coral); padding: 10px 18px; border-radius: var(--radius-pill);
  box-shadow: var(--shadow-glow-magenta), 0 2px 6px rgba(0,0,0,.08); display: inline-block;
}

/* Section pill (slide chrome). */
.aytm-section-pill {
  font-family: var(--font-ui); font-weight: 700; font-size: 16px;
  text-transform: uppercase; letter-spacing: var(--tr-eyebrow);
  color: var(--aytm-pill-fg); background: var(--aytm-pill-bg);
  padding: 10px 22px; border-radius: var(--radius-pill); display: inline-block;
}
.aytm-section-pill.on-dark {
  color: #fff; background: rgba(255,255,255,.18); backdrop-filter: blur(8px);
}

/* Stat pill — horizontal gradient container of numbers. */
.aytm-stat-pill {
  background: var(--grad-stat-pill); border-radius: var(--radius-pill);
  padding: 36px 64px; display: flex; gap: var(--space-6);
  color: #fff; box-shadow: var(--shadow-3);
}
.aytm-stat-pill__item {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-2);
  flex: 1; border-right: 1px solid rgba(255,255,255,.20); padding-right: var(--space-5);
}
.aytm-stat-pill__item:last-child { border-right: none; padding-right: 0; }
.aytm-stat-pill__number {
  font-family: var(--font-numeric); font-weight: 200; font-size: 72px;
  line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -0.02em;
}
.aytm-stat-pill__label {
  font-family: var(--font-ui); font-weight: 600; text-transform: uppercase;
  letter-spacing: var(--tr-eyebrow); font-size: var(--fs-eyebrow); color: rgba(255,255,255,.85);
}

/* ====== 6. CHARTS ====== */
.aytm-chart {
  width: 100%; padding: 26px 32px 20px; display: flex; flex-direction: column;
  background: var(--aytm-chart-bg); color: var(--aytm-chart-ink); font-family: var(--font-sans);
}
.aytm-chart__head { margin-bottom: 12px; }
.aytm-chart__title {
  font-family: var(--font-display); font-weight: 300; font-size: 20px;
  letter-spacing: -0.01em; color: var(--aytm-chart-title); line-height: 1; margin: 0 0 4px;
}
.aytm-chart__sub { font-family: var(--font-sans); font-size: 11px; color: var(--aytm-chart-muted); margin: 0; }

/* hbar */
.aytm-chart__hbar-rows { display: flex; flex-direction: column; gap: 14px; margin-top: 8px; }
.aytm-chart__hbar-row { display: grid; grid-template-columns: 130px 1fr 36px; align-items: center; gap: 14px; }
.aytm-chart__hbar-lbl { font-family: var(--font-sans); font-size: 11px; color: var(--aytm-chart-ink); }
.aytm-chart__hbar-track { height: 10px; background: var(--aytm-chart-track); border-radius: 999px; overflow: hidden; position: relative; }
.aytm-chart__hbar-fill { height: 100%; border-radius: 999px; }
.aytm-chart__hbar-pct { font-family: var(--font-sans); font-size: 11px; font-weight: 600; color: var(--aytm-chart-value); text-align: right; font-variant-numeric: tabular-nums; }

/* progress pill */
.aytm-chart--progress-pill .aytm-chart__hbar-row { grid-template-columns: 150px 1fr; }
.aytm-chart--progress-pill .aytm-chart__hbar-track { background: var(--aytm-chart-track-soft); height: 22px; overflow: visible; }
.aytm-chart--progress-pill .aytm-chart__hbar-fill { position: relative; display: flex; align-items: center; justify-content: flex-end; padding-right: 10px; }
.aytm-chart--progress-pill .pct-inside { font-family: var(--font-sans); font-weight: 700; font-size: 11px; color: #fff; font-variant-numeric: tabular-nums; }

/* vbar */
.aytm-chart__vbar-grid { flex: 1; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; column-gap: 14px; align-items: end; padding-top: 14px; min-height: 220px; }
.aytm-chart__vbar-col { display: flex; flex-direction: column; align-items: center; height: 100%; }
.aytm-chart__vbar-pct { font-family: var(--font-sans); font-weight: 600; font-size: 11px; color: var(--aytm-chart-value); margin-bottom: 5px; font-variant-numeric: tabular-nums; }
.aytm-chart__vbar-track { width: 100%; flex: 1; background: var(--aytm-chart-track); border-top-left-radius: 999px; border-top-right-radius: 999px; position: relative; overflow: hidden; min-height: 60px; }
.aytm-chart__vbar-fill { position: absolute; left: 0; right: 0; bottom: 0; border-top-left-radius: 999px; border-top-right-radius: 999px; }
.aytm-chart__vbar-lbl { font-family: var(--font-ui); font-weight: 600; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--aytm-chart-muted); margin-top: 8px; }

/* rings */
.aytm-chart__rings-row { flex: 1; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 12px; align-items: center; padding-top: 4px; }
.aytm-chart__ring-cell { text-align: center; }
.aytm-chart__ring-cell svg { width: 100%; max-width: 130px; height: auto; }
.aytm-chart__ring-cell .lbl { font-family: var(--font-sans); font-size: 11px; color: var(--aytm-chart-muted); margin-top: 4px; }
.aytm-chart__ring-num { font-family: var(--font-numeric); font-weight: 200; font-variation-settings: "wght" 200; font-variant-numeric: tabular-nums; fill: var(--aytm-chart-number); letter-spacing: -0.04em; }
.aytm-chart__ring-pct { font-family: var(--font-ui); font-weight: 600; font-size: 11px; fill: var(--aytm-chart-muted); letter-spacing: 0.16em; text-transform: uppercase; }

/* gauge */
.aytm-chart__gauge-wrap { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; }
.aytm-chart__gauge-wrap svg { width: 75%; max-width: 320px; height: auto; }
.aytm-chart__gauge-num { font-family: var(--font-numeric); font-weight: 200; font-variation-settings: "wght" 200; font-variant-numeric: tabular-nums; font-size: 36px; letter-spacing: -0.04em; color: var(--aytm-chart-number); line-height: 1; margin-top: -56px; margin-bottom: 14px; }
.aytm-chart__gauge-num sup { font-size: 16px; vertical-align: super; opacity: 0.7; }
.aytm-chart__gauge-axis { display: flex; justify-content: space-between; width: 75%; max-width: 320px; margin-top: 4px; font-family: var(--font-sans); font-size: 10px; color: var(--aytm-chart-muted); }
.aytm-chart__gauge-lbl { margin-top: 10px; font-family: var(--font-sans); font-size: 11px; color: var(--aytm-chart-muted); }

/* waffle */
.aytm-chart__waffle-wrap { flex: 1; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 22px; }
.aytm-chart__waffle { display: grid; grid-template-columns: repeat(10, 1fr); grid-template-rows: repeat(10, 1fr); gap: 4px; aspect-ratio: 1; max-width: 200px; }
.aytm-chart__waffle .dot { border-radius: 50%; background: var(--aytm-chart-track); }
.aytm-chart__waffle-side .num { font-family: var(--font-numeric); font-weight: 200; font-variation-settings: "wght" 200; font-variant-numeric: tabular-nums; font-size: 56px; letter-spacing: -0.04em; color: var(--aytm-chart-number); line-height: 1; }
.aytm-chart__waffle-side .out { font-family: var(--font-ui); font-weight: 600; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--aytm-chart-muted); margin: 8px 0 12px; }
.aytm-chart__waffle-side .desc { font-family: var(--font-sans); font-size: 11px; line-height: 1.45; color: var(--aytm-chart-muted); max-width: 220px; }

/* ====== 7. GUARDRAILS — banned accent rails ====== */
.aytm-card::before, .aytm-card::after,
.aytm-chart::before, .aytm-chart::after,
.mc::before, .mc::after,
.card::before, .card::after,
.stat-card::before, .stat-card::after,
.cash-card::before, .cash-card::after,
.feature-card::before, .feature-card::after,
[class*="-card"]::before, [class*="-card"]::after {
  background: none !important;
  border: 0 !important;
  height: 0 !important;
  width: 0 !important;
  content: none !important;
}

/* ====== 8. OPTIONAL: follow the OS dark setting automatically ======
   Disabled by default so dark is an explicit choice. To make a page follow
   the device setting, add class="aytm-auto-dark" to the same element you'd
   put data-theme on (usually <html>). It re-applies the dark token block
   only when the OS is in dark mode. */
@media (prefers-color-scheme: dark) {
  .aytm-auto-dark {
    --aytm-surface:   #1A1A1E;
    --aytm-surface-2: #242429;
    --aytm-surface-3: #121214;
    --aytm-ink:    #DEDEDE;
    --aytm-ink-2:  #C4C4CA;
    --aytm-ink-3:  #9C9C9C;
    --aytm-rule:   rgba(255,255,255,.10);
    --aytm-harbor: #C8C8CE;
    --aytm-bg:           var(--aytm-surface);
    --aytm-bg-raised:    var(--aytm-surface-2);
    --aytm-bg-sunken:    var(--aytm-surface-3);
    --aytm-text-body:    var(--aytm-ink);
    --aytm-text-muted:   var(--aytm-ink-3);
    --aytm-text-heading: #4FB5DB;
    --aytm-text-strong:  #FFFFFF;
    --aytm-text-eyebrow: var(--aytm-aquamarine);
    --aytm-text-link:    #4FB5DB;
    --aytm-text-link-h:  var(--aytm-aquamarine);
    --aytm-border:       var(--aytm-rule);
    --aytm-card-bg:      var(--aytm-surface-2);
    --aytm-card-border:  rgba(255,255,255,.10);
    --aytm-card-shadow:  0 1px 0 rgba(255,255,255,.04) inset, 0 8px 24px rgba(0,0,0,.45);
    --aytm-pill-bg:      rgba(255,255,255,.10);
    --aytm-pill-fg:      #FFFFFF;
    --aytm-chart-bg:     transparent;
    --aytm-chart-track:  rgba(255,255,255,.09);
    --aytm-chart-track-soft: rgba(255,255,255,.06);
    --aytm-chart-ink:    #C8C8CE;
    --aytm-chart-muted:  #9C9C9C;
    --aytm-chart-title:  #EDEDF2;
    --aytm-chart-number: #EDEDF2;
    --aytm-chart-value:  #4FB5DB;
  }
}