/* === Longplay Academy hi-fi — DS tokens + component layer. Fonts: DM Serif Display + Lato via Google Fonts link. === */

/* Longplay webfonts.
   Primary pair: DM Serif Display (display) + Lato (body/UI).
   Served from Google Fonts CDN. For offline/print embedding, replace with
   local @font-face rules pointing at licensed binaries. */

/* Longplay colour system.
   Three separate layers — keep them separate:
   1. Ambient brand palette (mood + surface)
   2. Service-tier taxonomy
   3. Functional data-viz palette (diagrams and audits ONLY)
   Plus reserved scales: lifecycle stages, Hierarchy of Strategy chips. */

:root {
  /* ---- 1. Ambient brand palette ---- */
  --lp-navy: #1B2252;        /* primary dark — use instead of pure black */
  --lp-mid-blue: #263370;    /* secondary */
  --lp-slate: #3D4F6B;       /* body text on light */
  --lp-gray-blue: #8FA3C0;   /* fine print, secondary text */
  --lp-light-blue: #D4DFF0;  /* backgrounds and washes */
  --lp-pale-blue: #DEEBF5;   /* backgrounds and washes */
  --lp-off-white: #EDF1F8;   /* use instead of stark white on large fields */
  --lp-teal: #5BBFB9;        /* accent */
  --lp-mint: #7ECFCA;        /* accent — chips and pills */
  --lp-lavender: #B4AEDD;    /* tier tint only, never an ambient page gradient */
  --lp-lilac-wash: rgba(180,174,221,0.16); /* flat, low-opacity section background for alternating rhythm */
  --lp-coral: #D45B6A;       /* tiny inline emphasis ONLY — never bg/gradient/shadow */
  /* brand refresh: blue + soft gold, white/grey/black, glass */
  --lp-blue: #2E6BE6;
  --lp-gold: #B8862F;
  --gradient-accent-text: linear-gradient(120deg, #8FC2FF 0%, #4E93F5 60%, #3A7DE8 100%);
  --lp-accent-word: #9fb4d8;  /* accent words, light steel-blue */
  --font-accent: 'Sora', 'Lato', "Helvetica Neue", sans-serif;  /* sans display — headlines */
  --font-serif: 'DM Serif Display', Georgia, serif;  /* serif — accent/emphasis words */
  --gradient-brand: linear-gradient(122deg, #1B2252 0%, #2E6BE6 100%);

  /* ---- Semantic aliases ---- */
  --text-display: var(--lp-navy);
  --text-body: var(--lp-slate);
  --text-secondary: var(--lp-gray-blue);
  --text-on-dark: #FFFFFF;
  --text-on-dark-soft: var(--lp-pale-blue);
  --text-accent-inline: var(--lp-coral);

  --surface-page: var(--lp-off-white);
  --surface-card: rgba(255, 255, 255, 0.78);
  --surface-card-solid: #F7FAFD;
  --surface-dark: var(--lp-navy);
  --surface-wash-blue: var(--lp-pale-blue);
  --surface-wash-mint: #E3F3F1;

  --accent: var(--lp-teal);
  --accent-soft: var(--lp-mint);

  /* ---- 2. Service-tier taxonomy ---- */
  --tier-exec: #B4AEDD;        /* Exec & VP Consulting — lavender */
  --tier-channel: #7ECFCA;     /* Channel & Program Management — mint teal */
  --tier-execution: #EDF1F8;   /* Execution & Production — off-white / soft warm gray */

  /* ---- 3. Functional data-viz palette (diagrams and audits ONLY) ---- */
  --viz-healthy: #3FB97F;  /* healthy step, strong conversion */
  --viz-watch: #E7B53C;    /* average, watch */
  --viz-leak: #DB5C4E;     /* leak, lapsed, churn, needs attention */
  /* Neutral volume/stage: blue family + lavender. Red and amber NEVER leave diagrams. */

  /* ---- Lifecycle stage colours (reserved for lifecycle identity only) ---- */
  --lc-01-awareness: #CFC8E8;
  --lc-02-interest: #BFC6E8;
  --lc-03-consideration: #C2E3CE;
  --lc-04-intent: #AEDCB6;
  --lc-05-evaluation: #EFE0A6;
  --lc-06-purchase: #F4D2AC;
  --lc-07-adoption: #F3C2A6;
  --lc-08-retention: #EEB1A0;
  --lc-09-expansion: #E9A39A;
  --lc-10-advocacy: #E59892;

  /* ---- Hierarchy of Strategy chip colours ---- */
  --hos-1-diagnostics: #BFE0DB;
  --hos-2-roadmap: #CDE7C6;
  --hos-3-planning: #F0E2AE;
  --hos-4-briefs: #F3CFC2;
  --hos-5-layout: #CBD8EC;
  --hos-6-design: #D9CFEA;
}

/* Longplay typography.
   Display + signature lines: DM Serif Display (italic for signature).
   Body, UI, labels: Lato 300/400/700.
   PowerPoint / non-embedded fallback: Georgia + Calibri.
   One display face per page. Headline figures in serif; table figures in Lato. */

:root {
  --font-display: 'Sora', 'Lato', "Helvetica Neue", sans-serif;  /* non-accent display now sans; serif reserved for accents (--font-serif) */
  --font-body: "Lato", Calibri, "Helvetica Neue", sans-serif;

  --weight-light: 300;   /* default reading weight for body */
  --weight-regular: 400;
  --weight-bold: 700;

  /* Type scale */
  --text-xs: 11px;      /* fine print */
  --text-sm: 13px;      /* secondary, captions */
  --text-base: 16px;    /* body */
  --text-lg: 19px;      /* lead paragraph */
  --display-sm: 28px;
  --display-md: 40px;
  --display-lg: 56px;
  --display-xl: 76px;   /* hero / headline figures */

  --leading-body: 1.65;
  --leading-display: 1.08;
  --tracking-eyebrow: 0.16em;
  --tracking-caps: 0.10em;
}

/* Longplay spacing, radii, borders, shadows.
   Whitespace is a feature: generous margins, editorial grid.
   Depth from light and line — fine gradient hairline borders + soft shadows,
   never hard outlines or heavy fills. */

:root {
  /* Spacing scale */
  --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;

  /* Radii */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* Hairlines */
  --hairline-navy: 1px solid rgba(27, 34, 82, 0.55); /* @kind other */
  --hairline-slate: 1px solid rgba(61, 79, 107, 0.30); /* @kind other */
  --hairline-light: 1px solid rgba(212, 223, 240, 0.9); /* @kind other */
  --hairline-on-dark: 1px solid rgba(222, 235, 245, 0.18); /* @kind other */

  /* Gradient hairline (cards, dividers) */
  --gradient-hairline: linear-gradient(135deg,
      rgba(91, 191, 185, 0.55),
      rgba(143, 163, 192, 0.35) 45%,
      rgba(180, 174, 221, 0.55)); /* @kind other */
  --gradient-accent-rule: linear-gradient(90deg, #5BBFB9, #B4AEDD); /* @kind other */

  /* Shadows — always navy-tinted, never gray or black */
  --shadow-soft: 0 2px 10px rgba(27, 34, 82, 0.06);
  --shadow-card: 0 2px 8px rgba(27, 34, 82, 0.05), 0 16px 40px -16px rgba(27, 34, 82, 0.16);
  --shadow-lift: 0 8px 20px rgba(27, 34, 82, 0.10), 0 32px 72px -24px rgba(27, 34, 82, 0.28);
}

/* Longplay utility classes — the background accent kit, surfaces, and
   recurring editorial patterns. Accents stay faint; one or two per surface. */

/* ---------- Base ---------- */
.lp-body {
  font-family: var(--font-body);
  font-weight: var(--weight-light);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}

/* ---------- Type patterns ---------- */
.lp-display {
  font-family: var(--font-accent);
  font-weight: 700;
  line-height: var(--leading-display);
  color: var(--text-display);
  letter-spacing: -0.02em;
}
.lp-signature {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  color: var(--text-display);
}
.lp-eyebrow {
  font-family: var(--font-body);
  font-weight: var(--weight-bold);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-secondary);
}
.lp-eyebrow--navy { color: var(--lp-navy); }
.lp-eyebrow--mint { color: var(--lp-teal); }

/* ---------- Surfaces ---------- */
/* No flat blocks of solid colour. Light surfaces get soft glows;
   solid navy is reserved for genuine dark surfaces. */
.lp-surface {
  background:
    radial-gradient(48% 60% at 12% 0%, rgba(126, 207, 202, 0.30), transparent 70%),
    radial-gradient(44% 56% at 92% 12%, rgba(180, 174, 221, 0.26), transparent 70%),
    radial-gradient(60% 70% at 50% 110%, rgba(212, 223, 240, 0.6), transparent 70%),
    var(--lp-off-white);
}
.lp-surface-dark {
  background:
    radial-gradient(52% 64% at 16% 4%, rgba(91, 191, 185, 0.22), transparent 70%),
    radial-gradient(46% 58% at 88% 90%, rgba(180, 174, 221, 0.20), transparent 70%),
    var(--lp-navy);
  color: var(--text-on-dark-soft);
}
.lp-surface-dark .lp-display,
.lp-surface-dark .lp-signature { color: #FFFFFF; }
.lp-surface-dark .lp-eyebrow { color: var(--lp-mint); }

/* ---------- Card ---------- */
/* Fine gradient hairline border + soft navy shadow. Never a hard outline. */
.lp-card {
  background:
    linear-gradient(var(--surface-card-solid), var(--surface-card-solid)) padding-box,
    var(--gradient-hairline) border-box;
  border: 1px solid transparent;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}
.lp-card--dark {
  background:
    linear-gradient(#222A5E, #1E2557) padding-box,
    linear-gradient(135deg, rgba(126, 207, 202, 0.4), rgba(143, 163, 192, 0.15) 45%, rgba(180, 174, 221, 0.4)) border-box;
  border: 1px solid transparent;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lift);
}

/* ---------- Background accent kit ---------- */
/* Hairline grid — the structure beneath the work */
.lp-bg-grid {
  background-image:
    linear-gradient(rgba(27, 34, 82, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(27, 34, 82, 0.08) 1px, transparent 1px);
  background-size: 56px 56px;
}
.lp-bg-grid--on-dark {
  background-image:
    linear-gradient(rgba(222, 235, 245, 0.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(222, 235, 245, 0.09) 1px, transparent 1px);
  background-size: 56px 56px;
}

/* Dot field — subtle texture for large quiet areas */
.lp-bg-dots {
  background-image: radial-gradient(rgba(27, 34, 82, 0.16) 1px, transparent 1.5px);
  background-size: 22px 22px;
}
.lp-bg-dots--on-dark {
  background-image: radial-gradient(rgba(222, 235, 245, 0.18) 1px, transparent 1.5px);
  background-size: 22px 22px;
}

/* Crosshair mark — precise, measured registration.
   Drawn with background gradients; tint via --crosshair-color. */
.lp-crosshair {
  width: 14px;
  height: 14px;
  background-image:
    linear-gradient(var(--crosshair-color, rgba(61, 79, 107, 0.7)), var(--crosshair-color, rgba(61, 79, 107, 0.7))),
    linear-gradient(var(--crosshair-color, rgba(61, 79, 107, 0.7)), var(--crosshair-color, rgba(61, 79, 107, 0.7)));
  background-size: 1px 100%, 100% 1px;
  background-position: 50% 0, 0 50%;
  background-repeat: no-repeat;
}

/* Rules and dividers */
.lp-rule-navy { border: 0; border-top: var(--hairline-navy); }
.lp-rule-slate { border: 0; border-top: var(--hairline-slate); }
.lp-rule-light { border: 0; border-top: var(--hairline-light); }
.lp-rule-gradient {
  border: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(91, 191, 185, 0.9), rgba(180, 174, 221, 0.9), transparent);
}
.lp-rule-fade {
  border: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(27, 34, 82, 0.35), transparent);
}

/* Corner brackets — editorial framing of a focus.
   Drawn with background gradients (composes with background-color);
   tint via --bracket-color, arm length via --bracket-size. */
.lp-brackets {
  background-image:
    linear-gradient(var(--bracket-color, rgba(143, 163, 192, 0.85)), var(--bracket-color, rgba(143, 163, 192, 0.85))),
    linear-gradient(var(--bracket-color, rgba(143, 163, 192, 0.85)), var(--bracket-color, rgba(143, 163, 192, 0.85))),
    linear-gradient(var(--bracket-color, rgba(143, 163, 192, 0.85)), var(--bracket-color, rgba(143, 163, 192, 0.85))),
    linear-gradient(var(--bracket-color, rgba(143, 163, 192, 0.85)), var(--bracket-color, rgba(143, 163, 192, 0.85)));
  background-size:
    var(--bracket-size, 18px) 1px, 1px var(--bracket-size, 18px),
    var(--bracket-size, 18px) 1px, 1px var(--bracket-size, 18px);
  background-position: left top, left top, right bottom, right bottom;
  background-repeat: no-repeat;
}

/* Crystal ball — the signature luminous device. Use large, alone, rarely.
   Glows hardest on a dark navy field. Size via inline width/height. */
.lp-crystal-ball {
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 26%, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0) 18%),
    radial-gradient(circle at 30% 30%, rgba(126, 207, 202, 0.85), rgba(126, 207, 202, 0) 60%),
    radial-gradient(circle at 72% 38%, rgba(180, 174, 221, 0.75), rgba(180, 174, 221, 0) 62%),
    radial-gradient(circle at 55% 80%, rgba(91, 191, 185, 0.7), rgba(38, 51, 112, 0) 70%),
    radial-gradient(circle at 50% 50%, #2A3370 0%, #1B2252 100%);
  box-shadow:
    0 0 60px 8px rgba(126, 207, 202, 0.25),
    0 0 120px 24px rgba(180, 174, 221, 0.18),
    inset 0 0 40px rgba(222, 235, 245, 0.25);
}

/* ---------- Editorial patterns ---------- */
/* Header pill — top right, navy with white tracked caps */
.lp-header-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--lp-navy);
  color: #FFFFFF;
  font-family: var(--font-body);
  font-weight: var(--weight-bold);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  padding: 8px 18px;
  border-radius: var(--radius-pill);
}

/* Capability chip — mint rounded pill with navy text */
.lp-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--lp-mint);
  color: var(--lp-navy);
  font-family: var(--font-body);
  font-weight: var(--weight-bold);
  font-size: var(--text-sm);
  padding: 6px 16px;
  border-radius: var(--radius-pill);
}

/* ---------- Tables — editorial, never heavy ---------- */
.lp-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-regular);
  color: var(--text-body);
  font-variant-numeric: lining-nums tabular-nums;
}
.lp-table thead th {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-secondary);
  text-align: left;
  padding: 0 var(--space-4) var(--space-3) var(--space-4);
  border-bottom: var(--hairline-navy);
}
.lp-table tbody td {
  padding: var(--space-4);
  border-bottom: var(--hairline-light);
}
.lp-table tbody td:first-child {
  color: var(--lp-navy);
  font-weight: var(--weight-bold);
}

/* Status dots — data-viz palette, diagrams and tables only */
.lp-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  vertical-align: baseline;
}
.lp-dot--healthy { background: var(--viz-healthy); }
.lp-dot--watch { background: var(--viz-watch); }
.lp-dot--leak { background: var(--viz-leak); }
.lp-dot--neutral { background: var(--lp-gray-blue); }

/* Longplay Academy — hi-fi component layer.
   Builds on the design-system tokens (ds/styles.css). Adds page chrome,
   buttons, cards, chips, gate badges, and editorial patterns used across
   the nine Academy screens. Colours/type come from the DS; nothing invented. */

/* ---------- Page frame ---------- */
.a-page {
  --pad: 64px;
  font-family: var(--font-body);
  font-weight: var(--weight-light);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--text-body);
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
  background:
    radial-gradient(46% 50% at 8% 0%, rgba(126, 207, 202, 0.20), transparent 68%),
    radial-gradient(40% 46% at 96% 4%, rgba(180, 174, 221, 0.20), transparent 70%),
    radial-gradient(70% 60% at 50% 116%, rgba(212, 223, 240, 0.55), transparent 72%),
    var(--lp-off-white);
}
/* grid overlay removed site-wide */
.a-page::before { content: none; }
.a-page > * { position: relative; z-index: 1; }
.a-page *, .a-page *::before, .a-page *::after { box-sizing: border-box; }
.a-pad { padding-left: var(--pad); padding-right: var(--pad); }

/* ---------- Type ---------- */
.a-display { font-family: var(--font-accent); font-weight: 700; line-height: 1.04; color: var(--lp-navy); letter-spacing: -0.02em; margin: 0; }
.a-h1 { font-family: var(--font-accent); font-weight: 700; font-size: 44px; line-height: 1.05; color: var(--lp-navy); letter-spacing: -0.02em; margin: 0; }
.a-h2 { font-family: var(--font-accent); font-weight: 700; font-size: 28px; line-height: 1.1; color: var(--lp-navy); margin: 0; }
.a-h3 { font-family: var(--font-body); font-weight: 700; font-size: 19px; line-height: 1.25; color: var(--lp-navy); margin: 0; }
.a-h4 { font-family: var(--font-body); font-weight: 700; font-size: 16px; line-height: 1.3; color: var(--lp-navy); margin: 0; }
.a-sig { font-family: var(--font-serif); font-style: italic; font-weight: 400; letter-spacing: 0; background: none; -webkit-background-clip: border-box; background-clip: border-box; -webkit-text-fill-color: var(--lp-accent-word); color: var(--lp-accent-word); }
.a-lede { font-size: 19px; line-height: 1.55; color: var(--lp-slate); }
.a-sub { font-size: 16px; line-height: 1.55; color: var(--lp-slate); }
.a-meta { font-size: 13px; color: var(--lp-gray-blue); font-weight: 400; }
.a-eyebrow {
  font-family: var(--font-body); font-weight: 700; font-size: 12px;
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--lp-teal);
}
.a-eyebrow--mut { color: var(--lp-gray-blue); }
.a-coral { color: var(--lp-coral); }
.a-num { font-variant-numeric: lining-nums tabular-nums; }

/* ---------- Top nav + academy subnav ---------- */
.a-nav {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 32px;
  padding: 16px var(--pad);
  background: rgba(247, 250, 253, 0.86);
  backdrop-filter: blur(8px);
  border-bottom: var(--hairline-light);
}
.a-wordmark { display: inline-flex; flex-direction: column; line-height: 1; user-select: none; }
.a-nav-logo { display: inline-flex; align-items: center; flex: 0 0 auto; }
.a-nav-logo img { height: 30px; width: auto; display: block; }
.a-wordmark b {
  font-family: var(--font-display); font-weight: 400; font-size: 25px; letter-spacing: 0.01em;
  background: linear-gradient(100deg, #8FA3C0, #5BBFB9 60%, #B4AEDD);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.a-wordmark b sup { font-size: 9px; -webkit-text-fill-color: var(--lp-gray-blue); }
.a-wordmark span { font-family: var(--font-body); font-weight: 700; font-size: 8.5px; letter-spacing: 0.42em; color: var(--lp-gray-blue); margin-top: 3px; padding-left: 2px; }
.a-navlinks { display: flex; align-items: center; gap: 26px; margin-left: auto; }
.a-navlinks a { font-size: 15px; color: var(--lp-slate); text-decoration: none; white-space: nowrap; cursor: pointer; }
.a-navlinks a:hover { color: var(--lp-navy); }
.a-navlinks a.on { color: var(--lp-navy); font-weight: 700; }

.a-subnav {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 28px;
  padding: 11px var(--pad);
  border-bottom: var(--hairline-light);
  background: rgba(222, 235, 245, 0.4);
}
.a-subnav .lbl { font-family: var(--font-body); font-weight: 700; font-size: 11px; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--lp-gray-blue); }
.a-subnav a { font-size: 14px; color: var(--lp-slate); text-decoration: none; white-space: nowrap; cursor: pointer; }
.a-subnav a:hover { color: var(--lp-navy); }
.a-subnav a.on { color: var(--lp-navy); font-weight: 700; position: relative; }
.a-subnav a.on::after { content: ''; position: absolute; left: 0; right: 0; bottom: -12px; height: 2px; background: var(--gradient-accent-rule); border-radius: 2px; }

/* ---------- Buttons ---------- */
.a-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-body); font-weight: 700; font-size: 15px;
  padding: 11px 22px; border-radius: var(--radius-pill);
  white-space: nowrap; cursor: pointer; border: 1px solid transparent; text-decoration: none;
  transition: box-shadow .2s ease, transform .2s ease, filter .2s ease;
}
.a-btn:hover { box-shadow: var(--shadow-soft); }
.a-btn--navy { background: var(--lp-navy); color: #fff; }
.a-btn--navy:hover { box-shadow: var(--shadow-card); }
.a-btn--lav {
  background: rgba(255, 255, 255, 0.55);
  border: 1.6px solid var(--lp-teal);
  color: var(--lp-navy);
}
.a-btn--lav:hover { background: var(--surface-wash-mint); box-shadow: var(--shadow-soft); }
.a-btn--accent {
  background: var(--lp-navy);
  color: #fff;
}
.a-btn--accent:hover { box-shadow: var(--shadow-card); }
.a-btn--ghost {
  background:
    linear-gradient(var(--surface-card-solid), var(--surface-card-solid)) padding-box,
    var(--gradient-hairline) border-box;
  border: 1px solid transparent; color: var(--lp-navy);
}
.a-btn--ghost:hover { filter: brightness(0.99); box-shadow: var(--shadow-soft); }
.a-btn--onnavy { background: #fff; color: var(--lp-navy); }
.a-btn.sm { font-size: 13.5px; padding: 8px 16px; }
.a-btn.lg { font-size: 16.5px; padding: 14px 28px; }
.a-link { font-weight: 700; color: var(--lp-navy); cursor: pointer; font-size: 14.5px; }
.a-link:hover { color: var(--lp-teal); }

/* ---------- Chips ---------- */
.a-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-body); font-weight: 700; font-size: 13px;
  padding: 5px 14px; border-radius: var(--radius-pill);
  background: var(--lp-mint); color: var(--lp-navy); white-space: nowrap; cursor: pointer;
  border: 1px solid transparent;
}
.a-chip--ghost { background: transparent; border: 1px solid rgba(61, 79, 107, 0.3); color: var(--lp-slate); font-weight: 400; }
.a-chip--soft { background: var(--surface-wash-mint); color: var(--lp-navy); font-weight: 700; }
.a-chip--lav { background: rgba(180, 174, 221, 0.32); color: var(--lp-navy); }
.a-chip.on { background: var(--lp-mint); color: var(--lp-navy); }

/* ---------- Cards ---------- */
.a-card {
  background:
    linear-gradient(var(--surface-card-solid), var(--surface-card-solid)) padding-box,
    var(--gradient-hairline) border-box;
  border: 1px solid transparent;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}
.a-card--flat {
  background: var(--surface-card-solid);
  border: var(--hairline-light);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
}
.a-card--lift { transition: box-shadow .25s ease, transform .25s ease; cursor: pointer; }
.a-card--lift:hover { box-shadow: var(--shadow-lift); transform: translateY(-2px); }
.a-card--grad {
  background:
    linear-gradient(var(--surface-card-solid), var(--surface-card-solid)) padding-box,
    linear-gradient(120deg, var(--lp-teal), var(--lp-lavender)) border-box;
  border: 1.5px solid transparent;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}
.a-card--dark {
  background:
    linear-gradient(#222A5E, #1B2252) padding-box,
    linear-gradient(135deg, rgba(126,207,202,0.45), rgba(143,163,192,0.18) 45%, rgba(180,174,221,0.45)) border-box;
  border: 1px solid transparent; border-radius: var(--radius-lg); box-shadow: var(--shadow-lift);
  color: var(--lp-pale-blue);
}

/* ---------- Accent panel (hero band / CTA) ----------
   Light surface: soft mint/lavender wash + gradient-hairline border, navy text.
   No large solid-navy fills; the navy is carried by small button accents. */
.a-dark {
  position: relative; overflow: hidden;
  border-radius: var(--radius-lg); color: var(--lp-slate);
  background:
    radial-gradient(54% 74% at 11% 0%, rgba(126,207,202,0.22), transparent 70%),
    radial-gradient(50% 68% at 93% 102%, rgba(180,174,221,0.24), transparent 72%),
    linear-gradient(#FAFCFE, #F0F6FC) padding-box,
    var(--gradient-hairline) border-box;
  border: 1px solid transparent;
  box-shadow: var(--shadow-card);
}
.a-dark .a-h1, .a-dark .a-h2, .a-dark .a-display { color: var(--lp-navy); }
.a-dark .a-eyebrow { color: var(--lp-teal); }
.a-dark .a-sub, .a-dark .a-lede { color: var(--lp-slate); }

/* ---------- Image placeholders (branded, striped) ---------- */
.a-img {
  position: relative; overflow: hidden; flex: 0 0 auto;
  border-radius: var(--radius-md);
  background:
    repeating-linear-gradient(135deg, rgba(143,163,192,0.14) 0 2px, transparent 2px 12px),
    linear-gradient(160deg, #E7EEF7, #DCE7F3);
  border: var(--hairline-light);
  display: flex; align-items: center; justify-content: center;
}
.a-img__tag {
  font-family: var(--font-body); font-weight: 700; font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--lp-gray-blue); background: rgba(247,250,253,0.7); padding: 4px 10px; border-radius: var(--radius-pill);
}
.a-img--mint { background: repeating-linear-gradient(135deg, rgba(126,207,202,0.18) 0 2px, transparent 2px 12px), linear-gradient(160deg, #E3F3F1, #D6ECEA); }
.a-img--lav { background: repeating-linear-gradient(135deg, rgba(180,174,221,0.2) 0 2px, transparent 2px 12px), linear-gradient(160deg, #ECE9F6, #E1DCF1); }
.a-logo {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
  background: #fff; border: var(--hairline-light); border-radius: var(--radius-md);
  font-family: var(--font-body); font-weight: 700; color: var(--lp-navy); font-size: 13px; letter-spacing: 0.01em;
  box-shadow: var(--shadow-soft); text-align: center; line-height: 1.1; padding: 4px;
}

/* ---------- Gate / recommended badges ---------- */
.a-gate {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-body); font-weight: 700; font-size: 12px;
  padding: 4px 11px; border-radius: var(--radius-pill);
  background: var(--lp-navy); color: #fff; white-space: nowrap;
}
.a-rec {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-body); font-weight: 700; font-size: 12px;
  padding: 4px 11px; border-radius: var(--radius-pill); white-space: nowrap;
  background: rgba(180, 174, 221, 0.28); color: var(--lp-navy);
  border: 1px solid rgba(180, 174, 221, 0.6);
}

/* ---------- Rules / dividers ---------- */
.a-rule { border: 0; border-top: var(--hairline-navy); margin: 0; }
.a-rule--light { border: 0; border-top: var(--hairline-light); margin: 0; }
.a-rule--grad { border: 0; height: 1px; background: var(--gradient-accent-rule); margin: 0; }

/* ---------- Skeleton text bars (placeholder body copy) ---------- */
.a-bars { display: flex; flex-direction: column; gap: 8px; }
.a-bar { height: 8px; border-radius: 4px; background: linear-gradient(90deg, rgba(143,163,192,0.28), rgba(212,223,240,0.5)); }

/* ---------- Crystal ball (signature device) ---------- */
.a-crystal {
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 26%, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0) 18%),
    radial-gradient(circle at 30% 30%, rgba(126,207,202,0.85), rgba(126,207,202,0) 60%),
    radial-gradient(circle at 72% 38%, rgba(180,174,221,0.75), rgba(180,174,221,0) 62%),
    radial-gradient(circle at 55% 80%, rgba(91,191,185,0.7), rgba(38,51,112,0) 70%),
    radial-gradient(circle at 50% 50%, #2A3370 0%, #1B2252 100%);
  box-shadow: 0 0 60px 8px rgba(126,207,202,0.25), 0 0 120px 24px rgba(180,174,221,0.18), inset 0 0 40px rgba(222,235,245,0.25);
}

/* ---------- Lifecycle marker ---------- */
.a-lc { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 1; }
.a-lc__dot {
  width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-body); font-weight: 700; font-size: 13px; color: var(--lp-navy);
  font-variant-numeric: lining-nums; border: 1px solid rgba(27,34,82,0.12);
}
.a-lc__lbl { font-size: 10.5px; color: var(--lp-gray-blue); text-align: center; line-height: 1.2; }
.a-lc.on .a-lc__dot { outline: 2px solid var(--lp-navy); outline-offset: 2px; }
.a-lc.on .a-lc__lbl { color: var(--lp-navy); font-weight: 700; }

/* ---------- Tables ---------- */
.a-table { width: 100%; border-collapse: collapse; font-family: var(--font-body); font-size: 14.5px; color: var(--lp-slate); font-variant-numeric: lining-nums tabular-nums; }
.a-table thead th { font-size: 11px; font-weight: 700; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--lp-gray-blue); text-align: left; padding: 0 16px 10px; border-bottom: var(--hairline-navy); }
.a-table tbody td { padding: 15px 16px; border-bottom: var(--hairline-light); vertical-align: middle; }
.a-table tbody tr { cursor: pointer; transition: background .15s ease; }
.a-table tbody tr:hover { background: rgba(222,235,245,0.45); }
.a-table tbody td:first-child { color: var(--lp-navy); font-weight: 700; }

/* ---------- Status dots ---------- */
.a-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; vertical-align: baseline; }
.a-dot--healthy { background: var(--viz-healthy); }
.a-dot--watch { background: var(--viz-watch); }
.a-dot--leak { background: var(--viz-leak); }

/* ---------- Footer ---------- */
.a-footer {
  margin-top: auto; flex: 0 0 auto;
  background: linear-gradient(160deg, #1F2657, #1B2252);
  color: rgba(222,235,245,0.7);
  padding: 40px var(--pad) 34px;
}
.a-footer a { color: rgba(222,235,245,0.78); text-decoration: none; font-size: 14px; cursor: pointer; }
.a-footer a:hover { color: #fff; }
.a-footer .a-wordmark b { background: linear-gradient(100deg, #B9C6DE, #7ECFCA 60%, #C3BDE8); -webkit-background-clip: text; background-clip: text; color: transparent; }
.a-footer .a-wordmark span { color: rgba(222,235,245,0.55); }

/* ---------- Input pill ---------- */
.a-input {
  display: flex; align-items: center; gap: 10px;
  border: var(--hairline-slate); border-radius: var(--radius-pill);
  padding: 11px 18px; background: #fff; color: var(--lp-gray-blue); font-size: 15px;
}
.a-input--box { border-radius: var(--radius-md); }
/* real form controls (playbook lead-gen form) */
input.a-input { width: 100%; outline: none; font-family: var(--font-body); color: var(--lp-navy); -webkit-appearance: none; appearance: none; }
input.a-input::placeholder { color: var(--lp-gray-blue); opacity: 1; }
input.a-input:focus { border-color: var(--lp-teal); }
button.a-btn { width: 100%; font: inherit; }

/* ---------- Marquee (look inside) ---------- */
@keyframes a-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.a-marquee { display: flex; gap: 18px; width: max-content; animation: a-scroll 36s linear infinite; }
@media (prefers-reduced-motion: reduce) { .a-marquee { animation: none; } }

/* ---------- Paywall blur ---------- */
.a-blur { filter: blur(4px); opacity: 0.55; user-select: none; pointer-events: none; }

html, body { margin: 0; padding: 0; }
  /* ---- Tweak-driven overrides (apply to the whole canvas via data-attrs on <html>) ---- */
  [data-emphasis="highlight"] .a-sig {
    font-style: normal; font-family: var(--font-body); font-weight: 700; color: var(--lp-navy);
    background: linear-gradient(transparent 58%, var(--lp-mint) 58%); padding: 0 2px;
  }
  [data-accent="lavender"] { --lp-teal: #9A91D8; }
  [data-accent="mint"] { --lp-teal: #4FBEB7; }
  [data-texture="dots"] .a-page::before {
    background-image: radial-gradient(rgba(27,34,82,0.13) 1px, transparent 1.5px);
    background-size: 22px 22px;
  }
  [data-texture="clean"] .a-page::before { display: none; }
  [data-density="compact"] .a-page { --pad: 40px; font-size: 15px; }

/* ===== STANDALONE PAGE CONTEXT (outside the design canvas) ===== */
html, body { margin: 0; padding: 0; }
body {
  background:
    radial-gradient(110% 60% at 88% 2%, rgba(140,164,210,0.24), transparent 58%),
    radial-gradient(90% 55% at 4% 98%, rgba(120,200,205,0.16), transparent 56%),
    linear-gradient(162deg, #DCE8F6 0%, #E2EAF4 38%, #D4E1F2 68%, #E6EDF7 100%) !important;
  background-attachment: fixed !important;
}
/* grid overlay removed site-wide */
body::before { content: none; }
#root { width: 100%; position: relative; z-index: 1; }
/* let the page sit transparent so the gridded gradient reads through */
.a-page { background: transparent !important; }
.a-page::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(46% 40% at 8% 1%, rgba(120,200,205,0.14), transparent 70%),
    radial-gradient(40% 38% at 96% 3%, rgba(140,164,210,0.14), transparent 72%);
}
.a-page {
  height: auto; min-height: 100vh; overflow: visible;
  max-width: 1280px; margin: 0 auto;
}
.a-subnav a, .a-navlinks a, .a-footer a, .a-wordmark { cursor: pointer; }
[data-academy-page="home"] .a-card--lift,
[data-academy-page="playbooks"] .a-card--lift,
[data-academy-page="tactics"] .a-card--lift,
[data-academy-page="partners"] .a-card--lift,
[data-academy-page="blog"] .bg-card { cursor: pointer; }

/* Playbooks library — responsive feature card + grid */
@media (max-width: 900px) {
  .pb-feature { flex-direction: column; }
  .pb-feature .a-img { flex: 0 0 auto !important; width: 100% !important; height: 200px !important; }
  .pb-grid { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 620px) {
  .pb-grid { grid-template-columns: 1fr !important; }
}

/* Playbook covers */
.pb-cover { background: #1b2252; }
.pb-feature .pb-cover { border-radius: 0 !important; height: 100% !important; }
.pb-feature-media { min-height: 230px; }
.pb-cover--fallback {
  display: flex; flex-direction: column; justify-content: flex-end; gap: 6px;
  padding: 16px; border-radius: 12px; overflow: hidden; position: relative;
  background:
    radial-gradient(120% 80% at 85% 0%, rgba(154,145,216,0.55), transparent 60%),
    radial-gradient(110% 90% at 0% 100%, rgba(79,190,183,0.45), transparent 55%),
    linear-gradient(135deg, #20275c 0%, #2c3370 55%, #1b2252 100%);
}
.pb-cover--fallback::before {
  content: ''; position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px);
  background-size: 26px 26px; opacity: 0.5;
}
.pb-cover-kicker {
  position: relative; font-family: var(--font-body); font-weight: 700;
  font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.62);
}
.pb-cover-partner {
  position: relative; font-family: var(--font-display); font-size: 26px; line-height: 1.05; color: #fff;
}
.pb-feature .pb-cover-partner { font-size: 34px; }

/* ---------- Podcast episode timeline ---------- */
.pod-timeline { position: relative; display: flex; flex-direction: column; gap: 20px; padding-left: 4px; }
.pod-timeline::before {
  content: ""; position: absolute; left: 30px; top: 26px; bottom: 26px; width: 2px;
  background: linear-gradient(var(--lp-teal), rgba(180,174,221,0.7));
}
.pod-tl-row { position: relative; display: grid; grid-template-columns: 62px 1fr; align-items: center; }
.pod-tl-rail { position: relative; display: flex; justify-content: center; align-self: stretch; align-items: center; }
.pod-tl-dot {
  position: relative; z-index: 1; width: 48px; height: 48px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 19px; color: var(--lp-navy);
  background: #fff; box-shadow: 0 0 0 6px rgba(231,237,247,0.9), 0 10px 24px -12px rgba(27,34,82,0.5);
  border: 1.5px solid rgba(126,207,202,0.7);
}
.pod-tl-card {
  display: flex; gap: 20px; align-items: center; padding: 14px; height: 100%;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.pod-tl-card:hover { transform: translateX(4px); }
.pod-tl-thumb { flex: 0 0 188px; }
.pod-tl-body { flex: 1; display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.pod-tl-meta { display: flex; align-items: center; gap: 12px; margin-top: 2px; }
.pod-tl-chev { transition: transform 0.3s ease; }
.pod-tl-card.open .pod-tl-chev { transform: rotate(180deg); color: var(--lp-teal); }
.pod-tl-detail { overflow: hidden; max-height: 0; opacity: 0; transition: max-height 0.38s ease, opacity 0.3s ease; }
.pod-tl-card.open .pod-tl-detail { max-height: 220px; opacity: 1; }
.pod-tl-detail-inner { display: flex; flex-direction: column; padding-top: 10px; margin-top: 8px; border-top: 1px solid rgba(27,34,82,0.08); }
@media (max-width: 720px) {
  .pod-tl-row { grid-template-columns: 44px 1fr; }
  .pod-timeline::before { left: 21px; }
  .pod-tl-dot { width: 40px; height: 40px; font-size: 16px; box-shadow: 0 0 0 5px rgba(231,237,247,0.9); }
  .pod-tl-card { flex-direction: column; align-items: stretch; gap: 12px; }
  .pod-tl-thumb { flex: none; }
}

/* ---------- Header / nav (identical to the marketing SiteNav) ---------- */
.site-header {
  position: sticky; top: 0; z-index: 80;
  background: linear-gradient(180deg, rgba(228, 239, 253, 0.72) 0%, rgba(212, 228, 248, 0.72) 100%);
  -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5);
  border-bottom: 1px solid rgba(126, 173, 224, 0.35);
  box-shadow: 0 10px 30px -14px rgba(27, 34, 82, 0.30);
}
.site-header-inner {
  max-width: var(--site-max, 1140px); margin: 0 auto;
  padding: 12px 24px;
  display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 24px;
}
.site-header-left { display: flex; align-items: center; gap: 30px; }
.site-nav { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-start; }
.site-nav-item { position: relative; }
.site-nav .nav-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-body); font-weight: var(--weight-bold);
  font-size: 11px; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
  color: var(--lp-navy); padding: 9px 14px; border-radius: 999px; text-decoration: none;
  transition: color 200ms ease-out, background 200ms ease-out;
}
.site-nav button.nav-link { background: none; border: none; cursor: pointer; }
.site-nav .nav-link:hover, .site-nav .nav-link.open { color: var(--lp-navy); background: rgba(126, 207, 202, 0.28); }
.site-nav .nav-link.active { color: var(--lp-teal); background: rgba(126, 207, 202, 0.20); }
.nav-menu {
  position: absolute; top: calc(100% + 4px); left: 50%; transform: translateX(-50%);
  display: none; flex-direction: column; min-width: 290px; padding: 10px; gap: 2px; z-index: 60;
}
.nav-menu.open { display: flex; }
.nav-menu a {
  padding: 11px 14px; border-radius: var(--radius-sm, 6px);
  font-family: var(--font-body); font-size: 14px; font-weight: var(--weight-regular);
  color: var(--lp-navy); transition: background 200ms ease-out;
}
.nav-menu a:hover { background: rgba(126, 207, 202, 0.18); }
.nav-cta {
  color: var(--lp-navy); font-family: var(--font-body); font-weight: var(--weight-bold);
  font-size: 14px; padding: 11px 22px; border-radius: var(--radius-pill); white-space: nowrap;
  text-decoration: none; display: inline-block;
  background: linear-gradient(180deg, color-mix(in srgb, #4E93F5 30%, #fff), color-mix(in srgb, #4E93F5 11%, #fff));
  border: 1.5px solid color-mix(in srgb, #4E93F5 55%, #fff);
  box-shadow: 0 10px 26px -16px rgba(78,147,245,0.55), inset 0 1px 0 rgba(255,255,255,0.85);
  transition: transform 200ms ease-out, box-shadow 200ms ease-out, border-color 200ms ease-out;
}
.nav-cta:hover { transform: translateY(-1px); border-color: color-mix(in srgb, #4E93F5 78%, #fff); box-shadow: 0 16px 32px -16px rgba(78,147,245,0.6), inset 0 1px 0 rgba(255,255,255,0.9); }

/* Academy sub-brand lockup + single-bar actions */
.ac-brand { display: inline-flex; align-items: center; gap: 13px; text-decoration: none; }
.ac-brand img { height: 34px; width: auto; display: block; }
.ac-brand-tag {
  position: relative; padding-left: 14px;
  font-family: var(--font-display); font-style: italic; font-size: 21px; line-height: 1;
  background: var(--gradient-accent-text); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.ac-brand-tag::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 1px; height: 24px; background: rgba(27, 34, 82, 0.2);
}
.ac-actions { display: flex; align-items: center; gap: 22px; }
.ac-mainlink {
  font-family: var(--font-body); font-weight: 700; font-size: 12px; letter-spacing: 0.04em;
  color: var(--lp-gray-blue); text-decoration: none; white-space: nowrap; transition: color 0.2s ease;
}
.ac-mainlink:hover { color: var(--lp-navy); }
@media (max-width: 720px) {
  .ac-brand-tag { font-size: 18px; }
  .ac-mainlink { display: none; }
}
/* Sans display now needs explicit weight (DM Serif was heavy at 400; Sora is not) */
.a-h3, .a-h4 { font-weight: 700; }
.a-num, .a-stat, .a-stat-val { font-weight: 700; }