/* =============================================================================
   AI MOCK CASE — design-system.css
   The ONE stylesheet every page imports. Build ON the live brand (booking page
   + emails): cream #F4F1EC / ink #0E1530 / terracotta #B8541C; Inter +
   Instrument Serif + JetBrains Mono. Tokens below are continuous with the
   production booking_page.py CSS (same hexes, shadow, radial backdrop).

   Voice: editorial, premium, calm, confident — high-end fintech/edtech.
   Terracotta is a SEASONING (one emphasis word, primary CTA, recommended tier,
   status dots) — never a sauce.

   Sections:
     0.  Font import
     1.  Design tokens (color / type / space / radii / shadow / layout / z)
     2.  Reset + base elements
     3.  Typography helpers (eyebrow, serif display, lead, muted, emphasis)
     4.  Layout (container, section, grid, bento, split)
     5.  Links
     6.  Buttons
     7.  Forms (label, input, select, textarea, help, error, pills, checkbox)
     8.  Cards
     9.  Badges + pills (neutral / accent / status / POPULAR / struck price)
     10. Header (top nav)
     11. Footer
     12. Tables
     13. Credit-balance widget (the dashboard hero tile)
     14. Pricing / bundle cards
     15. Stat / tracker blocks (score chip, radar, dimension bars, activity)
     16. Empty-state block
     17. Utilities
     18. Responsive breakpoints
     19. Reduced motion / focus-visible polish
   ========================================================================== */

/* -----------------------------------------------------------------------------
   0. FONTS
   -------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

/* -----------------------------------------------------------------------------
   1. DESIGN TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* ---- Brand core (continuous with production) ---- */
  --bg:            #F4F1EC;   /* cream page background */
  --card:          #FFFFFF;   /* surface */
  --ink:           #0E1530;   /* primary text / navy */
  --accent:        #B8541C;   /* terracotta — the seasoning */

  /* ---- Ink / neutral scale (warm-cool grey ramp tuned to the cream) ---- */
  --ink-900:       #0E1530;   /* = --ink, headings, primary text */
  --ink-700:       #2A3150;   /* strong secondary text */
  --ink-2:         #2A3150;   /* alias for strong secondary text */
  --muted:         #5C6480;   /* secondary / supporting text (AA on cream) */
  --muted-2:       #7D849B;   /* tertiary / meta text */
  --line:          #E7E2D8;   /* hairline borders on cream */
  --line-2:        #EFEAE1;   /* faintest divider */
  --field:         #FBFAF7;   /* input fill / inset surface */
  --field-2:       #F1EDE5;   /* alt inset / track fill */

  /* ---- Terracotta scale (for tints, hovers, focus) ---- */
  --accent-700:    #94420F;   /* hover / pressed */
  --accent-600:    #B8541C;   /* = --accent */
  --accent-300:    #E0A883;   /* light accent line */
  --accent-tint:   #F7ECE3;   /* subtle terracotta wash for cards/badges */
  --accent-tint-2: #FBF4EE;   /* faintest terracotta wash */

  /* ---- Semantic states ---- */
  --ok:            #2F6F4F;   /* success (continuous w/ booking page) */
  --ok-bg:         #E6F0EA;
  --ok-line:       #BFD9CC;
  --warn:          #9A6B17;   /* warning text (AA on cream) */
  --warn-bg:       #FBF1DC;
  --warn-line:     #E8D3A3;
  --danger:        #B21F1F;   /* error (continuous) */
  --danger-bg:     #FDECEA;
  --danger-line:   #F1C9C4;
  --info:          #2A4B8D;
  --info-bg:       #E8EDF7;

  /* ---- Focus ring ---- */
  --focus-ring:    0 0 0 4px rgba(14,21,48,.14);
  --focus-ring-accent: 0 0 0 4px rgba(184,84,28,.22);

  /* ---- Type scale (Inter unless noted; rem-based, 16px root) ---- */
  --font-sans:  'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-serif: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --font-mono:  'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --fs-eyebrow:  0.72rem;   /* 11.5px mono eyebrow */
  --fs-xs:       0.78rem;   /* 12.5px meta / help */
  --fs-sm:       0.875rem;  /* 14px small body / labels */
  --fs-base:     1rem;      /* 16px body */
  --fs-md:       1.0625rem; /* 17px lead-ish body */
  --fs-lg:       1.25rem;   /* 20px */
  --fs-xl:       1.5rem;    /* 24px */
  --fs-2xl:      2rem;      /* 32px */
  --fs-3xl:      2.75rem;   /* 44px — display (matches booking title 46px-ish) */
  --fs-4xl:      3.5rem;    /* 56px — hero display */
  --fs-5xl:      4.25rem;   /* 68px — landing splash (fluid-capped) */

  --lh-tight:    1.08;
  --lh-snug:     1.25;
  --lh-normal:   1.55;
  --lh-relaxed:  1.7;

  --tracking-eyebrow: 0.16em;
  --tracking-mono:    0.04em;

  /* ---- Spacing scale (4px base) ---- */
  --sp-1:  0.25rem;  /* 4 */
  --sp-2:  0.5rem;   /* 8 */
  --sp-3:  0.75rem;  /* 12 */
  --sp-4:  1rem;     /* 16 */
  --sp-5:  1.5rem;   /* 24 */
  --sp-6:  2rem;     /* 32 */
  --sp-7:  2.5rem;   /* 40 */
  --sp-8:  3.5rem;   /* 56 */
  --sp-9:  4.5rem;   /* 72 */
  --sp-10: 6rem;     /* 96 */

  /* ---- Radii (continuous: cards 16-20, fields 10-12, pills 999) ---- */
  --r-xs:   6px;
  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   16px;
  --r-xl:   20px;
  --r-2xl:  24px;
  --r-pill: 999px;

  /* ---- Shadows (signature production shadow + tiers) ---- */
  --shadow-xs: 0 1px 2px rgba(14,21,48,.06);
  --shadow-sm: 0 1px 2px rgba(14,21,48,.06), 0 4px 12px -6px rgba(14,21,48,.16);
  --shadow-md: 0 1px 0 rgba(14,21,48,.04), 0 24px 60px -28px rgba(14,21,48,.18);
  --shadow-lg: 0 2px 0 rgba(14,21,48,.04), 0 40px 90px -36px rgba(14,21,48,.26);
  --shadow-accent: 0 10px 28px -14px rgba(184,84,28,.45);

  /* ---- Layout ---- */
  --container:     1120px;  /* default content max */
  --container-wide:1280px;  /* dashboards / bento */
  --container-narrow: 760px;/* legal / prose */
  --header-h:      68px;

  /* ---- Backdrop (the radial cream wash from production) ---- */
  --backdrop:
    radial-gradient(1100px 600px at 110% -10%, rgba(184,84,28,.05), transparent 60%),
    radial-gradient(900px 500px at -5% 110%, rgba(14,21,48,.05), transparent 60%);

  /* ---- z-index scale ---- */
  --z-base:    0;
  --z-raised:  10;
  --z-sticky:  100;
  --z-header:  200;
  --z-overlay: 800;
  --z-modal:   900;
  --z-toast:   1000;

  --transition: .15s ease;
}

/* -----------------------------------------------------------------------------
   2. RESET + BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--ink);
  background-color: var(--bg);
  background-image: var(--backdrop);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
}

img, svg, video, canvas { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }

::selection { background: var(--accent-tint); color: var(--ink); }

/* Skip link for keyboard/AT users */
.skip-link {
  position: absolute; left: -999px; top: 0; z-index: var(--z-toast);
  background: var(--ink); color: #fff; padding: var(--sp-3) var(--sp-4);
  border-radius: 0 0 var(--r-sm) 0; font-weight: 600;
}
.skip-link:focus { left: 0; }

/* -----------------------------------------------------------------------------
   3. TYPOGRAPHY HELPERS
   -------------------------------------------------------------------------- */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--muted);
}
.eyebrow--accent { color: var(--accent); }

.display, h1.display {
  font-family: var(--font-serif);
  font-weight: 400;
  line-height: var(--lh-tight);
  font-size: clamp(2.4rem, 5vw, var(--fs-4xl));
  letter-spacing: -0.01em;
  color: var(--ink);
}
.display--hero { font-size: clamp(2.75rem, 6.5vw, var(--fs-5xl)); }

/* serif headline that can carry ONE terracotta italic emphasis word */
.display em, .serif em, .em-accent {
  font-style: italic;
  color: var(--accent);
  font-family: var(--font-serif);
}

h1, h2, h3 { font-family: var(--font-serif); font-weight: 400; line-height: var(--lh-snug); color: var(--ink); }
h1 { font-size: clamp(2rem, 4.5vw, var(--fs-3xl)); letter-spacing: -0.01em; }
h2 { font-size: clamp(1.6rem, 3vw, var(--fs-2xl)); }
h3 { font-size: var(--fs-xl); }
h4, h5, h6 { font-family: var(--font-sans); font-weight: 600; line-height: var(--lh-snug); }
h4 { font-size: var(--fs-lg); }
h5 { font-size: var(--fs-base); }
h6 { font-size: var(--fs-sm); }

p { line-height: var(--lh-normal); }
.lead { font-size: var(--fs-md); line-height: var(--lh-relaxed); color: var(--ink-700); }
.muted { color: var(--muted); }
.muted-2 { color: var(--muted-2); }
.small { font-size: var(--fs-sm); }
.xs { font-size: var(--fs-xs); }
.mono { font-family: var(--font-mono); letter-spacing: var(--tracking-mono); }
.serif { font-family: var(--font-serif); font-weight: 400; }
.strong { font-weight: 600; }
.center { text-align: center; }
.balance { text-wrap: balance; }

/* -----------------------------------------------------------------------------
   4. LAYOUT
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--sp-5);
}
.container--wide   { max-width: var(--container-wide); }
.container--narrow { max-width: var(--container-narrow); }

.section { padding-block: var(--sp-9); }
.section--tight { padding-block: var(--sp-7); }
.section--hero { padding-block: var(--sp-10); }

.stack > * + * { margin-top: var(--sp-4); }
.stack-sm > * + * { margin-top: var(--sp-2); }
.stack-lg > * + * { margin-top: var(--sp-6); }

.grid { display: grid; gap: var(--sp-5); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

/* Bento: 12-col responsive dashboard grid */
.bento { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--sp-5); }
.col-3  { grid-column: span 3; }
.col-4  { grid-column: span 4; }
.col-5  { grid-column: span 5; }
.col-6  { grid-column: span 6; }
.col-7  { grid-column: span 7; }
.col-8  { grid-column: span 8; }
.col-12 { grid-column: span 12; }

/* Split screen (landing / sign-in): editorial left, auth card right */
.split {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: var(--sp-8);
  align-items: center;
  min-height: calc(100vh - var(--header-h));
}

/* -----------------------------------------------------------------------------
   5. LINKS
   -------------------------------------------------------------------------- */
a { color: var(--ink); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--accent); }

.link {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--accent-300);
}
.link:hover { text-decoration-color: var(--accent); }

.link-quiet { color: var(--muted); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line); }
.link-quiet:hover { color: var(--ink); text-decoration-color: var(--ink); }

/* arrow link e.g. "View scorecard →" */
.link-arrow { color: var(--accent); font-weight: 600; font-size: var(--fs-sm); }
.link-arrow::after { content: " →"; transition: margin var(--transition); }
.link-arrow:hover::after { margin-left: 3px; }

a:focus-visible, .link:focus-visible {
  outline: none;
  border-radius: var(--r-xs);
  box-shadow: var(--focus-ring);
}

/* -----------------------------------------------------------------------------
   6. BUTTONS
   -------------------------------------------------------------------------- */
.btn {
  --_bg: var(--ink);
  --_fg: #fff;
  --_bd: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  font-weight: 600;
  line-height: 1;
  padding: 0.85rem 1.4rem;
  border: 1px solid var(--_bd);
  border-radius: var(--r-md);
  background: var(--_bg);
  color: var(--_fg);
  cursor: pointer;
  text-align: center;
  white-space: nowrap;
  transition: transform var(--transition), box-shadow var(--transition),
              background var(--transition), color var(--transition), border-color var(--transition);
  -webkit-user-select: none; user-select: none;
}
.btn:hover { box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.btn:active { transform: translateY(0); box-shadow: none; }
.btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* Primary = solid ink (default). The one terracotta CTA uses .btn--accent. */
.btn--primary { --_bg: var(--ink); --_fg: #fff; --_bd: var(--ink); }
.btn--primary:hover { background: #19203f; border-color: #19203f; }

/* Accent = terracotta. Reserve for THE single most important conversion CTA. */
.btn--accent { --_bg: var(--accent); --_fg: #fff; --_bd: var(--accent); }
.btn--accent:hover { background: var(--accent-700); border-color: var(--accent-700); box-shadow: var(--shadow-accent); }
.btn--accent:focus-visible { box-shadow: var(--focus-ring-accent); }

/* Secondary = outline on cream/white */
.btn--secondary {
  --_bg: var(--card); --_fg: var(--ink); --_bd: var(--line);
}
.btn--secondary:hover { border-color: var(--ink); background: var(--card); }

/* Ghost = text-only, low emphasis */
.btn--ghost {
  --_bg: transparent; --_fg: var(--ink); --_bd: transparent;
  padding-inline: 0.6rem;
}
.btn--ghost:hover { --_fg: var(--accent); background: transparent; box-shadow: none; transform: none; }

/* Social / auth provider button (white, bordered, icon + label) */
.btn--provider {
  --_bg: var(--card); --_fg: var(--ink); --_bd: var(--line);
  width: 100%;
  justify-content: center;
  font-weight: 500;
}
.btn--provider:hover { border-color: var(--ink); transform: none; box-shadow: var(--shadow-xs); }
.btn--provider .provider-icon { width: 18px; height: 18px; flex: 0 0 18px; }

/* Sizes */
.btn--sm { font-size: var(--fs-sm); padding: 0.55rem 0.95rem; border-radius: var(--r-sm); }
.btn--lg { font-size: var(--fs-md); padding: 1.05rem 1.7rem; border-radius: var(--r-md); }
.btn--block { width: 100%; }

/* Disabled (also covers coming-soon providers) */
.btn:disabled, .btn.is-disabled, .btn[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.5;
  box-shadow: none;
  transform: none;
  pointer-events: none;
}

/* -----------------------------------------------------------------------------
   7. FORMS
   -------------------------------------------------------------------------- */
.field { display: flex; flex-direction: column; gap: var(--sp-2); }
.field + .field { margin-top: var(--sp-5); }

label, .label {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink);
}
.label .hint, label .hint {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  font-weight: 400;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--muted-2);
  margin-left: var(--sp-2);
}

.input, .select, .textarea,
input[type="text"], input[type="email"], input[type="password"],
input[type="tel"], input[type="number"], input[type="date"], input[type="search"],
select, textarea {
  width: 100%;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  color: var(--ink);
  background: var(--field);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 0.8rem 0.9rem;
  transition: border-color var(--transition), background var(--transition), box-shadow var(--transition);
  appearance: none;
}
textarea { min-height: 120px; resize: vertical; line-height: var(--lh-normal); }

input::placeholder, textarea::placeholder { color: var(--muted-2); }

input:hover, select:hover, textarea:hover { border-color: #D8D1C4; }

input:focus, select:focus, textarea:focus,
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--ink);
  background: var(--card);
  box-shadow: var(--focus-ring);
}

/* native select caret */
select {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235C6480' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  padding-right: 2.4rem;
}

/* password field with toggle */
.field-pw { position: relative; }
.field-pw input { padding-right: 3rem; }
.pw-toggle {
  position: absolute; right: 0.4rem; bottom: 0.35rem;
  background: transparent; border: 0; cursor: pointer;
  font-family: var(--font-mono); font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-mono); text-transform: uppercase;
  color: var(--muted); padding: 0.45rem 0.55rem; border-radius: var(--r-sm);
}
.pw-toggle:hover { color: var(--ink); }
.pw-toggle:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* help + error text */
.help { font-size: var(--fs-xs); color: var(--muted); }
.error-text {
  font-size: var(--fs-xs);
  color: var(--danger);
  display: flex; align-items: center; gap: var(--sp-1);
}

/* invalid state (keeps input intact, adds a next step via .error-text) */
.field.is-invalid input, .field.is-invalid select, .field.is-invalid textarea,
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] {
  border-color: var(--danger);
  background: var(--danger-bg);
}
.field.is-invalid input:focus { box-shadow: 0 0 0 4px rgba(178,31,31,.14); }

/* inline alert (form-level error / info) */
.alert {
  display: flex; gap: var(--sp-3); align-items: flex-start;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
  border: 1px solid var(--line);
  background: var(--field);
}
.alert--error   { background: var(--danger-bg); border-color: var(--danger-line); color: #7e1717; }
.alert--success { background: var(--ok-bg);     border-color: var(--ok-line);     color: #1f5238; }
.alert--warn    { background: var(--warn-bg);   border-color: var(--warn-line);   color: #6f4d10; }
.alert--info    { background: var(--info-bg);   border-color: #C5D2EC;            color: #213c70; }

/* divider with centered label e.g. "or continue with email" */
.divider {
  display: flex; align-items: center; gap: var(--sp-4);
  color: var(--muted-2); font-size: var(--fs-xs);
  font-family: var(--font-mono); letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  margin-block: var(--sp-2);
}
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* SKILL PILLS (Newbie / Experienced / Advanced) — continuous w/ booking page */
.pills { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); }
.pill {
  position: relative;
  display: flex; flex-direction: column; gap: 2px;
  padding: 0.8rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--field);
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition), box-shadow var(--transition);
}
.pill:hover { border-color: #D8D1C4; }
.pill input { position: absolute; opacity: 0; pointer-events: none; }
.pill .pill-name { font-weight: 600; font-size: var(--fs-sm); color: var(--ink); }
.pill .pill-sub  { font-size: var(--fs-xs); color: var(--muted); }
.pill:has(input:checked) {
  border-color: var(--ink);
  background: var(--card);
  box-shadow: var(--focus-ring);
}
.pill:has(input:focus-visible) { box-shadow: var(--focus-ring); }

/* checkbox / radio row */
.check {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  font-size: var(--fs-sm); color: var(--ink-700); cursor: pointer;
}
.check input[type="checkbox"], .check input[type="radio"] {
  width: 18px; height: 18px; flex: 0 0 18px; margin-top: 2px;
  accent-color: var(--accent);
}
.check a { text-decoration: underline; text-underline-offset: 2px; }

/* -----------------------------------------------------------------------------
   8. CARDS
   -------------------------------------------------------------------------- */
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-md);
  padding: var(--sp-6);
}
.card--sm  { padding: var(--sp-5); border-radius: var(--r-lg); }
.card--flat { box-shadow: none; }
.card--inset { background: var(--field); box-shadow: none; }

/* "recommended" / highlighted card variant — terracotta-edged */
.card--recommended {
  border-color: var(--accent);
  box-shadow: var(--shadow-md), 0 0 0 1px var(--accent) inset;
  position: relative;
}

.card-header { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--sp-4); }
.card-title { font-family: var(--font-serif); font-size: var(--fs-xl); font-weight: 400; }

/* -----------------------------------------------------------------------------
   9. BADGES + PILLS
   -------------------------------------------------------------------------- */
.badge {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  padding: 0.32rem 0.62rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--field);
  color: var(--muted);
  white-space: nowrap;
}
.badge--neutral { background: var(--field); color: var(--muted); border-color: var(--line); }
.badge--accent  { background: var(--accent-tint); color: var(--accent-700); border-color: #E9D2C2; }
.badge--ink     { background: var(--ink); color: #fff; border-color: var(--ink); }
.badge--success { background: var(--ok-bg); color: #1f5238; border-color: var(--ok-line); }
.badge--warn    { background: var(--warn-bg); color: #6f4d10; border-color: var(--warn-line); }
.badge--danger  { background: var(--danger-bg); color: #7e1717; border-color: var(--danger-line); }

/* status dot variant (terracotta = live/active) */
.badge--status::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: currentColor; flex: 0 0 7px;
}
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.dot--live { background: var(--accent); box-shadow: 0 0 0 3px rgba(184,84,28,.18); }
.dot--ok   { background: var(--ok); }
.dot--muted{ background: var(--muted-2); }

/* POPULAR badge (sits on the recommended bundle) */
.badge--popular {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  box-shadow: var(--shadow-accent);
}
/* floating popular ribbon for pricing cards */
.popular-ribbon {
  position: absolute; top: 0; left: 50%;
  transform: translate(-50%, -50%);
  z-index: var(--z-raised);
}

/* invite/private-beta gate pill (exclusivity, not friction) */
.badge--invite { background: var(--ink); color: #fff; border-color: var(--ink); }

/* PRICE / STRUCK-PRICE treatment */
.price-struck {
  font-family: var(--font-sans);
  color: var(--muted-2);
  text-decoration: line-through;
  text-decoration-color: var(--accent-300);
  font-weight: 500;
}
.price-save {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--accent-700);
  background: var(--accent-tint);
  border: 1px solid #E9D2C2;
  border-radius: var(--r-pill);
  padding: 0.28rem 0.55rem;
  white-space: nowrap;
}

/* -----------------------------------------------------------------------------
   10. HEADER (top nav) — byte-identical markup in components.md
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: var(--z-header);
  background: rgba(244,241,236,.82);
  backdrop-filter: saturate(160%) blur(10px);
  -webkit-backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-header__inner {
  max-width: var(--container-wide);
  margin-inline: auto;
  padding: 0 var(--sp-5);
  height: var(--header-h);
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5);
}
.brand { display: inline-flex; align-items: center; gap: var(--sp-3); color: var(--ink); }
.brand:hover { color: var(--ink); }
.brand__mark {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--accent);
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-family: var(--font-serif); font-size: 15px; line-height: 1;
  flex: 0 0 26px;
}
.brand__name {
  font-family: var(--font-serif); font-weight: 400; font-size: 1.3rem; letter-spacing: -0.01em;
}
.brand__name b { font-weight: 400; color: var(--accent); font-style: italic; }

.nav { display: flex; align-items: center; gap: var(--sp-5); }
/* Desktop nav row: even, comfortable spacing between the links + CTA button.
   (Mobile overrides this to a stacked drawer in the media query below.) */
.nav__menu { display: flex; align-items: center; gap: var(--sp-6); }
.nav__link {
  font-size: var(--fs-sm); font-weight: 500; color: var(--ink-700);
}
.nav__link:hover { color: var(--accent); }
.nav__link.is-active { color: var(--ink); }
.nav__link.is-active::after {
  content: ""; display: block; height: 2px; background: var(--accent);
  border-radius: 2px; margin-top: 3px;
}

/* header credit chip (authed pages) */
.nav__credits {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-family: var(--font-mono); font-size: var(--fs-xs);
  letter-spacing: var(--tracking-mono);
  background: var(--field); border: 1px solid var(--line);
  border-radius: var(--r-pill); padding: 0.34rem 0.7rem; color: var(--ink);
}
.nav__credits b { color: var(--accent); font-weight: 500; }

/* mobile nav toggle */
.nav-toggle { display: none; background: none; border: 0; cursor: pointer; padding: var(--sp-2); }
.nav-toggle:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--r-sm); }

/* -----------------------------------------------------------------------------
   11. FOOTER — byte-identical markup in components.md
   -------------------------------------------------------------------------- */
.site-footer {
  border-top: 1px solid var(--line);
  background: rgba(255,255,255,.4);
  margin-top: var(--sp-9);
}
.site-footer__inner {
  max-width: var(--container-wide);
  margin-inline: auto;
  padding: var(--sp-8) var(--sp-5) var(--sp-7);
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--sp-7);
}
.footer-brand .brand__name { font-size: 1.25rem; }
.footer-desc { color: var(--muted); font-size: var(--fs-sm); max-width: 42ch; margin-top: var(--sp-3); }
.footer-links { display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-6); align-content: start; }
.footer-links a { font-size: var(--fs-sm); color: var(--ink-700); }
.footer-links a:hover { color: var(--accent); }
.footer-bottom {
  max-width: var(--container-wide);
  margin-inline: auto;
  padding: var(--sp-5);
  border-top: 1px solid var(--line-2);
  display: flex; flex-wrap: wrap; gap: var(--sp-4); justify-content: space-between; align-items: center;
}
.footer-disclaimer { font-size: var(--fs-xs); color: var(--muted-2); max-width: 60ch; }
.footer-locale {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-family: var(--font-mono); font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-mono); text-transform: uppercase; color: var(--muted);
}

/* -----------------------------------------------------------------------------
   12. TABLES
   -------------------------------------------------------------------------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card); }
table.table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.table thead th {
  text-align: left;
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--line);
  background: var(--field);
}
.table tbody td { padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--line-2); color: var(--ink-700); }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover td { background: var(--field); }
.table td.num, .table th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* -----------------------------------------------------------------------------
   13. CREDIT-BALANCE WIDGET  (dashboard hero tile — the "MRR number")
   -------------------------------------------------------------------------- */
.credit-tile {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-md);
  padding: var(--sp-6);
  display: flex; flex-direction: column; gap: var(--sp-4);
  position: relative;
  overflow: hidden;
}
.credit-tile::after { /* faint terracotta corner wash */
  content: ""; position: absolute; inset: -40% -40% auto auto;
  width: 60%; aspect-ratio: 1;
  background: radial-gradient(circle at top right, rgba(184,84,28,.07), transparent 70%);
  pointer-events: none;
}
.credit-tile__label {
  font-family: var(--font-mono); font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--muted);
}
.credit-tile__value {
  font-family: var(--font-serif); font-weight: 400;
  font-size: clamp(3rem, 8vw, 4.5rem); line-height: 1; color: var(--ink);
  display: flex; align-items: baseline; gap: var(--sp-3);
}
.credit-tile__value .unit { font-family: var(--font-sans); font-size: var(--fs-md); font-weight: 600; color: var(--muted); }
.credit-tile__value--unlimited { font-size: clamp(2.2rem, 5vw, 3rem); color: var(--accent); }
.credit-tile__meaning { font-size: var(--fs-sm); color: var(--ink-700); }
.credit-tile__meaning b { color: var(--ink); font-weight: 600; }
.credit-tile__expiry {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-xs); color: var(--muted);
}
.credit-tile__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-2); }

/* zero-state emphasis on the tile (book CTA flips to recharge) */
.credit-tile.is-zero .credit-tile__value { color: var(--muted-2); }

/* -----------------------------------------------------------------------------
   14. PRICING / BUNDLE CARDS
   -------------------------------------------------------------------------- */
.bundle-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-5);
  align-items: stretch;
}
.bundle {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-sm);
  padding: var(--sp-6) var(--sp-5);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.bundle:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }

/* the steered-to bundle ($99.99 / 10 credits) */
.bundle--popular { border-color: var(--accent); box-shadow: var(--shadow-md); }

/* the high-anchor hero ($199.99 unlimited) */
.bundle--hero {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}
.bundle--hero .bundle__name,
.bundle--hero .bundle__price,
.bundle--hero .bundle__unit { color: #fff; }
.bundle--hero .bundle__meta { color: rgba(255,255,255,.7); }
.bundle--hero .price-struck { color: rgba(255,255,255,.55); text-decoration-color: var(--accent-300); }
.bundle--hero .price-save { background: rgba(184,84,28,.25); color: #F2C9AC; border-color: rgba(184,84,28,.4); }

.bundle__name { font-family: var(--font-serif); font-size: var(--fs-lg); margin-bottom: var(--sp-2); }
.bundle__credits {
  font-family: var(--font-mono); font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-mono); text-transform: uppercase; color: var(--muted);
}
.bundle__price {
  font-family: var(--font-serif); font-weight: 400;
  font-size: var(--fs-3xl); line-height: 1; color: var(--ink); margin-top: var(--sp-2);
  display: flex; align-items: baseline; gap: var(--sp-2); flex-wrap: wrap;
}
.bundle__unit { /* per-case anchor under price */
  font-size: var(--fs-xs); color: var(--muted); font-family: var(--font-mono);
  letter-spacing: var(--tracking-mono); margin-top: var(--sp-2);
}
.bundle__save { margin-top: var(--sp-3); }
.bundle__meta { font-size: var(--fs-xs); color: var(--muted); margin-top: var(--sp-2); }
.bundle__cta { margin-top: auto; padding-top: var(--sp-5); }
.bundle__cta .btn { width: 100%; }

/* CTA-zone reassurance line (expiry / Stripe / value) */
.checkout-reassure {
  display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4);
  font-size: var(--fs-xs); color: var(--muted);
  align-items: center; justify-content: center;
}
.checkout-reassure .dot { width: 4px; height: 4px; background: var(--muted-2); }

/* -----------------------------------------------------------------------------
   15. STAT / TRACKER BLOCKS
   -------------------------------------------------------------------------- */
/* generic stat tile */
.stat {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: var(--sp-5);
  box-shadow: var(--shadow-xs);
}
.stat__label {
  font-family: var(--font-mono); font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--muted);
}
.stat__value { font-family: var(--font-serif); font-size: var(--fs-2xl); line-height: 1.1; margin-top: var(--sp-2); }
.stat__delta { font-size: var(--fs-sm); margin-top: var(--sp-1); }
.stat__delta.up   { color: var(--ok); }
.stat__delta.down { color: var(--danger); }

/* SCORE CHIP (e.g. 7.4 / 10 on activity rows) */
.score-chip {
  display: inline-flex; align-items: baseline; gap: 1px;
  font-family: var(--font-mono); font-weight: 500; font-size: var(--fs-sm);
  background: var(--field); border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: 0.24rem 0.5rem; color: var(--ink);
}
.score-chip .max { color: var(--muted-2); font-size: var(--fs-xs); }
.score-chip--strong { background: var(--ok-bg); border-color: var(--ok-line); color: #1f5238; }
.score-chip--mid    { background: var(--warn-bg); border-color: var(--warn-line); color: #6f4d10; }
.score-chip--accent { background: var(--accent-tint); border-color: #E9D2C2; color: var(--accent-700); }

/* 5-DIMENSION SCORECARD as labeled bars (radar alt; pairs w/ inline SVG radar) */
.dims { display: flex; flex-direction: column; gap: var(--sp-4); }
.dim { display: grid; grid-template-columns: 1fr; gap: var(--sp-2); }
.dim__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-3); }
.dim__name { font-size: var(--fs-sm); font-weight: 600; color: var(--ink); }
.dim__score { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--ink-700); }
.dim__track { height: 8px; background: var(--field-2); border-radius: var(--r-pill); overflow: hidden; }
.dim__fill {
  height: 100%; border-radius: var(--r-pill);
  background: var(--ink);
  width: var(--val, 0%);
  transition: width .6s cubic-bezier(.2,.7,.2,1);
}
.dim--accent .dim__fill { background: var(--accent); } /* highlight weakest/strongest dim */

/* radar/spider wrapper (host an inline SVG) */
.radar { display: grid; place-items: center; }
.radar svg { width: 100%; max-width: 340px; height: auto; }
.radar .axis { stroke: var(--line); stroke-width: 1; }
.radar .ring { fill: none; stroke: var(--line-2); stroke-width: 1; }
.radar .poly { fill: rgba(14,21,48,.10); stroke: var(--ink); stroke-width: 1.5; }
.radar .poly--accent { fill: rgba(184,84,28,.12); stroke: var(--accent); }
.radar .label { font-family: var(--font-mono); font-size: 9px; fill: var(--muted); letter-spacing: .02em; }

/* ghosted teaser for the 0-credit empty scorecard */
.is-ghost { opacity: .42; filter: saturate(.4); pointer-events: none; }
.ghost-overlay {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: linear-gradient(180deg, rgba(244,241,236,0), rgba(244,241,236,.86) 70%);
  text-align: center; padding: var(--sp-5);
}

/* ACTIVITY FEED (case + date + score chip + link) */
.activity { display: flex; flex-direction: column; }
.activity__row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center; gap: var(--sp-4);
  padding: var(--sp-4) 0;
  border-bottom: 1px solid var(--line-2);
}
.activity__row:last-child { border-bottom: 0; }
.activity__main { min-width: 0; }
.activity__title { font-weight: 600; font-size: var(--fs-sm); color: var(--ink); }
.activity__meta { font-size: var(--fs-xs); color: var(--muted); }

/* -----------------------------------------------------------------------------
   16. EMPTY-STATE BLOCK (icon + serif line + one CTA)
   -------------------------------------------------------------------------- */
.empty {
  text-align: center;
  padding: var(--sp-8) var(--sp-5);
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-4);
}
.empty__icon {
  width: 52px; height: 52px; border-radius: var(--r-lg);
  display: grid; place-items: center;
  background: var(--accent-tint); color: var(--accent-700);
  border: 1px solid #E9D2C2;
}
.empty__title { font-family: var(--font-serif); font-size: var(--fs-xl); color: var(--ink); }
.empty__title em { font-style: italic; color: var(--accent); }
.empty__body { color: var(--muted); font-size: var(--fs-sm); max-width: 46ch; }

/* -----------------------------------------------------------------------------
   17. UTILITIES
   -------------------------------------------------------------------------- */
.flex { display: flex; }
.flex-col { display: flex; flex-direction: column; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.gap-1 { gap: var(--sp-1); } .gap-2 { gap: var(--sp-2); } .gap-3 { gap: var(--sp-3); }
.gap-4 { gap: var(--sp-4); } .gap-5 { gap: var(--sp-5); } .gap-6 { gap: var(--sp-6); }
.wrap { flex-wrap: wrap; }
.w-full { width: 100%; }
.mt-0{margin-top:0}.mt-2{margin-top:var(--sp-2)}.mt-3{margin-top:var(--sp-3)}
.mt-4{margin-top:var(--sp-4)}.mt-5{margin-top:var(--sp-5)}.mt-6{margin-top:var(--sp-6)}
.mb-2{margin-bottom:var(--sp-2)}.mb-3{margin-bottom:var(--sp-3)}.mb-4{margin-bottom:var(--sp-4)}
.mb-5{margin-bottom:var(--sp-5)}.mb-6{margin-bottom:var(--sp-6)}
.text-accent { color: var(--accent); }
.text-muted { color: var(--muted); }
.text-ok { color: var(--ok); }
.text-danger { color: var(--danger); }
.tabnum { font-variant-numeric: tabular-nums; }
.hidden { display: none !important; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.divider-line { height: 1px; background: var(--line); border: 0; margin-block: var(--sp-5); }

/* -----------------------------------------------------------------------------
   18. RESPONSIVE (mobile-first; the rules above are the small-screen base where
       it matters, these collapse the multi-column layouts down)
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .bundle-grid { grid-template-columns: repeat(2, 1fr); }
  .col-3, .col-4, .col-5 { grid-column: span 6; }
  .col-7, .col-8 { grid-column: span 12; }
}

@media (max-width: 860px) {
  .split { grid-template-columns: 1fr; gap: var(--sp-6); min-height: auto; }
  .bento { grid-template-columns: repeat(6, 1fr); }
  .col-3, .col-4, .col-5, .col-6, .col-7, .col-8 { grid-column: span 6; }
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .footer-disclaimer { max-width: 100%; }
}

@media (max-width: 640px) {
  :root { --sp-9: 3.5rem; --sp-10: 4.5rem; }
  .container, .container--wide, .container--narrow { padding-inline: var(--sp-4); }
  .section { padding-block: var(--sp-8); }
  .card { padding: var(--sp-5); border-radius: var(--r-lg); }

  /* mobile nav: hide inline links, show toggle (JS toggles .is-open) */
  .nav { gap: var(--sp-4); }
  .nav-toggle { display: inline-flex; }
  .nav__menu {
    display: none;
    position: absolute; left: 0; right: 0; top: var(--header-h);
    background: var(--bg); border-bottom: 1px solid var(--line);
    flex-direction: column; align-items: stretch; gap: 0;
    padding: var(--sp-3) var(--sp-5) var(--sp-5);
  }
  .nav__menu.is-open { display: flex; }
  .nav__menu .nav__link { padding: var(--sp-3) 0; border-bottom: 1px solid var(--line-2); }

  .bundle-grid { grid-template-columns: 1fr; }
  .bento { grid-template-columns: 1fr; }
  .col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-12 { grid-column: span 1; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .pills { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .activity__row { grid-template-columns: 1fr auto; }
  .activity__row .link-arrow { grid-column: 1 / -1; }
}

/* -----------------------------------------------------------------------------
   19. MOTION + FOCUS POLISH
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* Always show a visible ring for keyboard users on any interactive element */
:focus-visible { outline: none; }
.btn:focus-visible, a:focus-visible, .link:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible,
.pill:focus-within, .check input:focus-visible, summary:focus-visible {
  box-shadow: var(--focus-ring);
}