/* ==========================================================================
   Product Management — design system
   Tokens -> base -> layout -> components -> pages -> responsive
   ========================================================================== */

/* --------------------------------------------------------------- Tokens */
:root {
  --brand-50:  #eef2ff;
  --brand-100: #e0e7ff;
  --brand-200: #c7d2fe;
  --brand-400: #818cf8;
  --brand-500: #6366f1;
  --brand-600: #4f46e5;
  --brand-700: #4338ca;

  /* Track accents. AI is rose rather than another violet, which would be too
     close to --strategy to distinguish at tag size. */
  --discovery: #0d9488;
  --strategy:  #4f46e5;
  --delivery:  #db7706;
  --ai:        #e11d48;
  --fintech:   #0284c7;


  --bg:          #ffffff;
  --bg-soft:     #f8fafc;
  --bg-sunken:   #f1f5f9;
  --surface:     #ffffff;
  --border:      #e2e8f0;
  --border-soft: #eef2f6;

  --text:        #0f172a;
  --text-muted:  #475569;
  --text-subtle: #64748b;
  --text-invert: #ffffff;

  --shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);
  --shadow:    0 4px 16px -4px rgba(15, 23, 42, .10);
  --shadow-lg: 0 18px 40px -18px rgba(15, 23, 42, .28);

  --radius-sm: 8px;
  --radius:    14px;
  --radius-lg: 22px;

  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  --font-serif: "Source Serif 4", Georgia, "Times New Roman", serif;

  --wrap: 1160px;
  --wrap-narrow: 720px;
  --header-h: 68px;
}

[data-theme="dark"] {
  --brand-50:  #1e1b4b;
  --brand-100: #262262;
  --brand-200: #3730a3;
  --brand-400: #a5b4fc;
  --brand-500: #818cf8;
  --brand-600: #818cf8;
  --brand-700: #a5b4fc;

  --discovery: #5eead4;
  --strategy:  #a5b4fc;
  --delivery:  #fbbf24;
  --ai:        #fb7185;
  --fintech:   #7dd3fc;


  --bg:          #0b1120;
  --bg-soft:     #0f172a;
  --bg-sunken:   #131c30;
  --surface:     #111a2e;
  --border:      #223049;
  --border-soft: #1a2540;

  --text:        #e8edf7;
  --text-muted:  #a4b2c9;
  --text-subtle: #8496b1;
  --text-invert: #0b1120;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow:    0 4px 16px -4px rgba(0, 0, 0, .5);
  --shadow-lg: 0 18px 40px -18px rgba(0, 0, 0, .75);
}

/* ----------------------------------------------------------------- Base */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 20px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 16.5px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  line-height: 1.2;
  margin: 0 0 .5em;
  letter-spacing: -.02em;
  font-weight: 700;
}
h1 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.1rem); }
h2 { font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.1rem); }
h3 { font-size: 1.24rem; }
p  { margin: 0 0 1.15em; }

a { color: var(--brand-600); text-decoration: none; }
a:hover { text-decoration: underline; }

img { max-width: 100%; display: block; }
hr { border: 0; border-top: 1px solid var(--border); margin: 2.5rem 0; }

:focus-visible {
  outline: 3px solid var(--brand-500);
  outline-offset: 2px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--brand-600);
  color: #fff;
  padding: .7rem 1.1rem;
  z-index: 200;
  border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { left: 0; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------- Layout */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: 22px;
}
.wrap-narrow { max-width: var(--wrap-narrow); }

.section { padding: 74px 0; }
.section-soft { background: var(--bg-soft); }
.section-head { max-width: 640px; margin-bottom: 38px; }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head p { color: var(--text-muted); margin-bottom: 0; }

.eyebrow {
  display: inline-block;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--brand-600);
  margin-bottom: .7rem;
}

.grid { display: grid; gap: 24px; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }

/* --------------------------------------------------------------- Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.site-header .wrap {
  display: flex;
  align-items: center;
  gap: 18px;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 1.08rem;
  letter-spacing: -.03em;
  color: var(--text);
  margin-right: auto;
}
.logo:hover { text-decoration: none; }
/* The brand name must never wrap — the header is a fixed 68px and a wrapped
   logo overflows it vertically rather than just looking cramped. */
.logo { white-space: nowrap; }
.logo-mark {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: 9px;
  background: linear-gradient(140deg, var(--brand-500), var(--brand-700));
  color: #fff;
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: -.04em;
  box-shadow: var(--shadow-sm);
}

.nav { display: flex; align-items: center; gap: 4px; }
.nav a {
  padding: 8px 13px;
  border-radius: 9px;
  color: var(--text-muted);
  font-size: .945rem;
  font-weight: 500;
}
.nav a:hover { background: var(--bg-sunken); color: var(--text); text-decoration: none; }
.nav a[aria-current="page"] { color: var(--brand-600); font-weight: 600; }

.header-actions { display: flex; align-items: center; gap: 8px; }

.icon-btn {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  border-radius: 10px;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.icon-btn:hover { background: var(--bg-sunken); color: var(--text); }
.icon-btn svg { width: 18px; height: 18px; }

.theme-toggle .moon { display: none; }
[data-theme="dark"] .theme-toggle .sun  { display: none; }
[data-theme="dark"] .theme-toggle .moon { display: block; }

.nav-toggle { display: none; }

/* -------------------------------------------------------------- Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 20px;
  border-radius: 11px;
  border: 1px solid transparent;
  font-size: .95rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .15s ease, background .15s ease;
  white-space: nowrap;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-primary {
  background: var(--brand-600);
  color: #fff;
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover { background: var(--brand-700); box-shadow: var(--shadow); }
[data-theme="dark"] .btn-primary { color: #0b1120; }

.btn-ghost {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text);
}
.btn-ghost:hover { background: var(--bg-sunken); }

.btn-sm { padding: 8px 15px; font-size: .875rem; }

/* ----------------------------------------------------------------- Hero */
.hero {
  position: relative;
  padding: 78px 0 66px;
  overflow: hidden;
  border-bottom: 1px solid var(--border);
  background:
    radial-gradient(900px 420px at 12% -8%, var(--brand-50), transparent 62%),
    radial-gradient(760px 380px at 92% 6%, color-mix(in srgb, var(--discovery) 13%, transparent), transparent 60%);
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  gap: 52px;
  align-items: center;
}
.hero h1 { margin-bottom: .45em; }
.hero .lead {
  font-size: 1.12rem;
  color: var(--text-muted);
  max-width: 52ch;
}
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

.hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 34px;
  margin-top: 40px;
  padding-top: 26px;
  border-top: 1px solid var(--border);
}
.hero-stats div strong {
  display: block;
  font-size: 1.55rem;
  letter-spacing: -.03em;
}
.hero-stats div span { font-size: .87rem; color: var(--text-subtle); }

/* Hero side card — a mock "learning path" panel */
.path-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 24px;
}
.path-card h3 { font-size: 1rem; margin-bottom: 4px; }
.path-card > p { font-size: .87rem; color: var(--text-subtle); margin-bottom: 18px; }
.path-step {
  display: flex;
  gap: 13px;
  align-items: flex-start;
  padding: 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-soft);
  background: var(--bg-soft);
}
.path-step + .path-step { margin-top: 9px; }
.path-num {
  flex: none;
  width: 25px; height: 25px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--brand-600);
  color: #fff;
  font-size: .76rem;
  font-weight: 700;
}
[data-theme="dark"] .path-num { color: #0b1120; }
.path-step b { display: block; font-size: .92rem; }
.path-step span { font-size: .82rem; color: var(--text-subtle); }

/* ------------------------------------------------------------- Tag/pill */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid currentColor;
}
.tag::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.tag-discovery { color: var(--discovery); }
.tag-strategy  { color: var(--strategy); }
.tag-delivery  { color: var(--delivery); }
.tag-ai        { color: var(--ai); }
.tag-fintech   { color: var(--fintech); }


/* -------------------------------------------------------------- Cards */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 26px;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.card-link:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
  border-color: var(--brand-200);
  text-decoration: none;
}

.track-card { display: block; color: inherit; position: relative; overflow: hidden; }
.track-card::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--accent, var(--brand-600));
}
.track-card .track-icon {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: 12px;
  margin-bottom: 16px;
  background: color-mix(in srgb, var(--accent) 13%, transparent);
  color: var(--accent);
}
.track-card .track-icon svg { width: 21px; height: 21px; }
.track-card h3 { margin-bottom: .3em; }
.track-card p { color: var(--text-muted); font-size: .94rem; margin-bottom: 14px; }
.track-card .track-meta {
  font-size: .84rem;
  font-weight: 600;
  color: var(--accent);
}

/* ------------------------------------------------------- Article cards */
.post-card {
  display: flex;
  flex-direction: column;
  color: inherit;
  padding: 24px;
}
.post-card .tag { margin-bottom: 13px; align-self: flex-start; }
.post-card h3 { font-size: 1.12rem; margin-bottom: .4em; }
.post-card p {
  color: var(--text-muted);
  font-size: .93rem;
  margin-bottom: 18px;
}
.post-meta {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  font-size: .82rem;
  color: var(--text-subtle);
}
.post-meta .dot { opacity: .5; }

.post-card-lg { padding: 30px; }
.post-card-lg h3 { font-size: 1.5rem; }
.post-card-lg p { font-size: 1rem; }

/* --------------------------------------------------------- Blog filters */
.blog-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
  padding: 18px 0 28px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 32px;
}
.filters { display: flex; flex-wrap: wrap; gap: 8px; }
.filter-btn {
  padding: 7px 15px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  font-family: inherit;
  font-size: .88rem;
  font-weight: 600;
  cursor: pointer;
  transition: all .14s ease;
}
.filter-btn:hover { border-color: var(--brand-400); color: var(--text); }
.filter-btn[aria-pressed="true"] {
  background: var(--brand-600);
  border-color: var(--brand-600);
  color: #fff;
}
[data-theme="dark"] .filter-btn[aria-pressed="true"] { color: #0b1120; }

.search-field { position: relative; }
.search-field svg {
  position: absolute;
  left: 13px; top: 50%;
  transform: translateY(-50%);
  width: 16px; height: 16px;
  color: var(--text-subtle);
  pointer-events: none;
}
.search-field input {
  width: 268px;
  max-width: 100%;
  padding: 10px 14px 10px 37px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  font-size: .93rem;
}
.search-field input::placeholder { color: var(--text-subtle); }
.search-field input:focus { border-color: var(--brand-500); outline: none; box-shadow: 0 0 0 3px var(--brand-50); }

.result-count { font-size: .88rem; color: var(--text-subtle); margin-bottom: 20px; }
.empty-state {
  text-align: center;
  padding: 66px 20px;
  color: var(--text-subtle);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
}

/* -------------------------------------------------------------- Article */
.article-header {
  padding: 46px 0 34px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-soft);
}
.breadcrumb {
  font-size: .86rem;
  color: var(--text-subtle);
  margin-bottom: 18px;
}
.breadcrumb a { color: var(--text-subtle); }
.breadcrumb span { margin: 0 7px; opacity: .6; }

.article-header h1 { max-width: 20ch; }
.article-header .standfirst {
  font-size: 1.1rem;
  color: var(--text-muted);
  max-width: 62ch;
}
.byline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-size: .88rem;
  color: var(--text-subtle);
  margin-top: 22px;
}
.avatar {
  width: 34px; height: 34px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--brand-600);
  color: #fff;
  font-size: .8rem;
  font-weight: 700;
}
[data-theme="dark"] .avatar { color: #0b1120; }

.article-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 54px;
  align-items: start;
  padding: 46px 0 80px;
}

.prose { font-size: 1.06rem; max-width: 72ch; }
.prose h2 {
  margin-top: 2.2em;
  padding-top: .2em;
  font-size: 1.6rem;
}
.prose h3 { margin-top: 1.9em; font-size: 1.2rem; }
.prose ul, .prose ol { padding-left: 1.35em; margin: 0 0 1.2em; }
.prose li { margin-bottom: .55em; }
.prose li::marker { color: var(--brand-500); }
.prose strong { color: var(--text); font-weight: 650; }
.prose blockquote {
  margin: 1.8em 0;
  padding: 4px 0 4px 22px;
  border-left: 3px solid var(--brand-500);
  font-family: var(--font-serif);
  font-size: 1.12rem;
  color: var(--text-muted);
}
.prose blockquote p:last-child { margin-bottom: 0; }
.prose code {
  background: var(--bg-sunken);
  padding: .15em .4em;
  border-radius: 5px;
  font-size: .88em;
}

.callout {
  margin: 1.9em 0;
  padding: 20px 22px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  border-left: 4px solid var(--brand-600);
  background: var(--bg-soft);
  font-size: .98rem;
}
.callout b { display: block; margin-bottom: .35em; }
.callout p:last-child { margin-bottom: 0; }
.callout-warn { border-left-color: var(--delivery); }
.callout-tip  { border-left-color: var(--discovery); }

.table-scroll { overflow-x: auto; margin: 1.9em 0; }
table {
  width: 100%;
  border-collapse: collapse;
  font-size: .95rem;
  min-width: 480px;
}
th, td {
  text-align: left;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
th {
  background: var(--bg-sunken);
  font-weight: 650;
  font-size: .84rem;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--text-muted);
}
tbody tr:last-child td { border-bottom: 0; }

/* Sidebar / TOC */
.sidebar { position: sticky; top: calc(var(--header-h) + 24px); }
.toc {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  background: var(--surface);
}
.toc h4 {
  font-size: .76rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-subtle);
  margin-bottom: 12px;
}
.toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; }
.toc li { counter-increment: toc; margin-bottom: 2px; }
.toc a {
  display: block;
  padding: 6px 9px;
  border-radius: 7px;
  font-size: .89rem;
  line-height: 1.35;
  color: var(--text-muted);
  border-left: 2px solid transparent;
}
.toc a:hover { background: var(--bg-sunken); text-decoration: none; color: var(--text); }
.toc a.active {
  color: var(--brand-600);
  border-left-color: var(--brand-600);
  background: var(--bg-sunken);
  font-weight: 600;
}

.reading-progress {
  position: fixed;
  top: var(--header-h);
  left: 0;
  height: 3px;
  width: 0;
  background: linear-gradient(90deg, var(--brand-500), var(--discovery));
  z-index: 99;
  transition: width .08s linear;
}

/* ------------------------------------------------------------ Newsletter */
.newsletter {
  border-radius: var(--radius-lg);
  padding: 46px;
  background: linear-gradient(135deg, var(--brand-700), var(--brand-500));
  color: #fff;
  text-align: center;
}
.newsletter h2 { color: #fff; }
.newsletter p { color: rgba(255, 255, 255, .84); max-width: 46ch; margin-inline: auto; }
.newsletter form {
  display: flex;
  gap: 10px;
  max-width: 440px;
  margin: 26px auto 0;
  flex-wrap: wrap;
}
.newsletter input {
  flex: 1 1 220px;
  padding: 12px 16px;
  border-radius: 11px;
  border: 1px solid rgba(255, 255, 255, .32);
  background: rgba(255, 255, 255, .14);
  color: #fff;
  font-family: inherit;
  font-size: .95rem;
}
.newsletter input::placeholder { color: rgba(255, 255, 255, .7); }
.newsletter input:focus { outline: none; border-color: #fff; background: rgba(255, 255, 255, .2); }
.newsletter .btn {
  background: #fff;
  color: var(--brand-700);
}
.newsletter .btn:hover { background: var(--brand-50); color: var(--brand-700); }
.newsletter .form-note { font-size: .82rem; margin: 14px 0 0; color: rgba(255, 255, 255, .74); }
.form-status { margin-top: 14px; font-size: .92rem; font-weight: 600; min-height: 1.2em; }
/* Sits on the newsletter's gradient, so these read against a dark ground
   rather than using the page's normal semantic colours. */
.form-status.is-ok   { color: #ffffff; }
.form-status.is-warn { color: #fde68a; }

/* --------------------------------------------------------------- Footer */
.site-footer {
  border-top: 1px solid var(--border);
  background: var(--bg-soft);
  padding: 54px 0 30px;
  font-size: .93rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 36px;
}
.footer-grid h4 {
  font-size: .78rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-subtle);
  margin-bottom: 14px;
}
.footer-grid ul { list-style: none; margin: 0; padding: 0; }
.footer-grid li { margin-bottom: 9px; }
.footer-grid a { color: var(--text-muted); }
.footer-grid a:hover { color: var(--brand-600); }
.footer-blurb { color: var(--text-muted); max-width: 34ch; margin-top: 14px; }
.footer-bottom {
  margin-top: 40px;
  padding-top: 22px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  color: var(--text-subtle);
  font-size: .86rem;
}

/* ------------------------------------------------------------ Utilities */
.page-head { padding: 54px 0 8px; }
.page-head .lead { font-size: 1.08rem; color: var(--text-muted); max-width: 58ch; }
.mt-0 { margin-top: 0; }
.center { text-align: center; }

.faq details {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 16px 20px;
  background: var(--surface);
  margin-bottom: 10px;
}
.faq summary {
  cursor: pointer;
  font-weight: 650;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 14px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--brand-600); font-size: 1.3rem; line-height: 1; }
.faq details[open] summary::after { content: "\2013"; }
.faq details[open] summary { margin-bottom: 10px; }
.faq p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------ Responsive */
@media (max-width: 960px) {
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .article-layout { grid-template-columns: 1fr; gap: 34px; }
  .sidebar { position: static; }
  .toc { display: none; }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 760px) {
  body { font-size: 16px; }
  .section { padding: 54px 0; }

  .nav-toggle { display: grid; }
  .nav {
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 14px 22px 22px;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow);
    display: none;
  }
  .nav.open { display: flex; }
  .nav a { padding: 12px 14px; font-size: 1rem; }

  .grid-3, .grid-2 { grid-template-columns: 1fr; }
  .hero { padding: 52px 0 46px; }
  .hero-stats { gap: 24px; }
  .newsletter { padding: 32px 22px; }
  .blog-toolbar { flex-direction: column; align-items: stretch; }
  .search-field input { width: 100%; }
  .prose { font-size: 1.02rem; }
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
}

@media print {
  .site-header, .site-footer, .sidebar, .newsletter, .reading-progress { display: none; }
  body { font-size: 12pt; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ==========================================================================
   MOTION & POLISH LAYER
   Additive. Placed after the base rules on purpose so it can refine them
   without editing the definitions above.

   Motion principles used here:
   - one easing curve (expo-out) so every transition feels related
   - short travel (max 26px). Long slides read as cheap
   - stagger capped at 6 steps so large grids never crawl in
   - nothing animates inside .prose, because motion while reading is hostile
   ========================================================================== */

:root {
  --ease-expo:  cubic-bezier(.16, 1, .3, 1);
  --ease-quart: cubic-bezier(.25, 1, .5, 1);
  /* 620ms lands fast enough to feel responsive; with the 65ms stagger below,
     the last card in a row settles around 750ms. Anything near 800ms starts
     reading as lag rather than polish. */
  --reveal-dur: 620ms;

  /* Layered shadows read as real depth; a single blur reads as a drop shadow. */
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, .05);
  --shadow:    0 1px 2px rgba(15, 23, 42, .04), 0 10px 26px -10px rgba(15, 23, 42, .16);
  --shadow-lg: 0 2px 4px rgba(15, 23, 42, .04), 0 26px 50px -22px rgba(15, 23, 42, .30);
}

[data-theme="dark"] {
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .45);
  --shadow:    0 1px 2px rgba(0, 0, 0, .4), 0 10px 26px -10px rgba(0, 0, 0, .7);
  --shadow-lg: 0 2px 4px rgba(0, 0, 0, .4), 0 26px 50px -22px rgba(0, 0, 0, .85);
}

/* --------------------------------------------------------- Scroll reveal */
/* The hidden state only applies once JS confirms motion is wanted, so the
   site stays fully visible with JS disabled or reduced-motion enabled. */
.motion [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 26px, 0);
  transition:
    opacity var(--reveal-dur) var(--ease-expo),
    transform var(--reveal-dur) var(--ease-expo);
  transition-delay: calc(var(--reveal-i, 0) * 65ms);
}
.motion [data-reveal="fade"]  { transform: none; }
.motion [data-reveal="scale"] { transform: translate3d(0, 18px, 0) scale(.965); }
.motion [data-reveal].is-in   { opacity: 1; transform: none; }

/* ------------------------------------------------------- Hero entrance */
/* Pure CSS so the hero cannot be left stranded if the script fails to load. */
@keyframes pmRise {
  from { opacity: 0; transform: translate3d(0, 26px, 0); }
  to   { opacity: 1; transform: none; }
}
.motion .hero [data-hero] {
  animation: pmRise .8s var(--ease-expo) both;
  /* 6 sequenced elements; 70ms keeps the last one (the path card) landing
     around 1.15s rather than dragging past 1.3s. */
  animation-delay: calc(var(--reveal-i, 0) * 70ms);
}

/* ------------------------------------------------------------- Hero FX */
.hero-fx {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.hero-fx .orb {
  position: absolute;
  display: block;
  border-radius: 50%;
  filter: blur(70px);
  will-change: transform;
}
.hero-fx .orb-1 {
  width: clamp(240px, 34vw, 520px);
  aspect-ratio: 1;
  left: -7%;
  top: -26%;
  opacity: .5;
  background: radial-gradient(circle at 35% 35%, var(--brand-500), transparent 70%);
  animation: pmDriftA 26s ease-in-out infinite alternate;
}
.hero-fx .orb-2 {
  width: clamp(200px, 28vw, 430px);
  aspect-ratio: 1;
  right: -5%;
  top: -14%;
  opacity: .34;
  background: radial-gradient(circle at 60% 40%, var(--discovery), transparent 68%);
  animation: pmDriftB 32s ease-in-out infinite alternate;
}
.hero-fx .orb-3 {
  width: clamp(180px, 24vw, 360px);
  aspect-ratio: 1;
  left: 42%;
  bottom: -40%;
  opacity: .26;
  background: radial-gradient(circle at 50% 50%, var(--delivery), transparent 68%);
  animation: pmDriftC 38s ease-in-out infinite alternate;
}
[data-theme="dark"] .hero-fx .orb-1 { opacity: .34; }
[data-theme="dark"] .hero-fx .orb-2 { opacity: .24; }
[data-theme="dark"] .hero-fx .orb-3 { opacity: .18; }

@keyframes pmDriftA { to { transform: translate3d(8%, 14%, 0) scale(1.12); } }
@keyframes pmDriftB { to { transform: translate3d(-10%, 18%, 0) scale(1.08); } }
@keyframes pmDriftC { to { transform: translate3d(-14%, -12%, 0) scale(1.15); } }

/* Masked grid, faded out before it reaches the text. */
.hero-fx::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, color-mix(in srgb, var(--text) 6%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb, var(--text) 6%, transparent) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(ellipse 72% 62% at 50% 0%, #000 0%, transparent 78%);
          mask-image: radial-gradient(ellipse 72% 62% at 50% 0%, #000 0%, transparent 78%);
}

.hero-grid { position: relative; z-index: 1; }

/* Gradient headline accent */
.grad-text {
  background: linear-gradient(100deg, var(--brand-600) 0%, var(--discovery) 92%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .grad-text { color: var(--brand-600); -webkit-text-fill-color: currentColor; }
}

/* --------------------------------------------------------- Sticky header */
.site-header {
  transition: box-shadow .3s var(--ease-quart), background-color .3s var(--ease-quart);
}
.site-header.is-scrolled {
  background: color-mix(in srgb, var(--bg) 94%, transparent);
  box-shadow: var(--shadow);
}

.nav a {
  position: relative;
  transition: color .18s var(--ease-quart), background-color .18s var(--ease-quart);
}
.nav a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 13px;
  right: 13px;
  bottom: 3px;
  height: 2px;
  border-radius: 2px;
  background: var(--brand-600);
  transform-origin: left;
  animation: pmUnderline .5s var(--ease-expo) both;
}
@keyframes pmUnderline { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.icon-btn { transition: background-color .18s, color .18s, transform .18s var(--ease-quart); }
.icon-btn:active { transform: scale(.92); }
.theme-toggle svg { transition: transform .45s var(--ease-expo); }
.theme-toggle:hover svg { transform: rotate(35deg); }

/* -------------------------------------------------------------- Buttons */
.btn-primary {
  background-image: linear-gradient(180deg, color-mix(in srgb, #fff 14%, var(--brand-600)), var(--brand-600));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .18),
    0 6px 16px -8px color-mix(in srgb, var(--brand-600) 70%, transparent);
}
.btn-primary:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .22),
    0 12px 24px -10px color-mix(in srgb, var(--brand-600) 75%, transparent);
}
.btn-ghost { transition: background-color .18s, border-color .18s, transform .12s var(--ease-quart); }
.btn-ghost:hover { border-color: var(--brand-400); }

/* ---------------------------------------------------------------- Cards */
.card {
  transition:
    transform .32s var(--ease-expo),
    box-shadow .32s var(--ease-expo),
    border-color .32s var(--ease-expo);
}
.card-link:hover { transform: translateY(-4px); }

/* Track cards: accent rail grows, icon lifts, arrow slides. */
.track-card::after { transition: width .34s var(--ease-expo), opacity .34s var(--ease-expo); }
.track-card:hover::after { width: 100%; opacity: .07; }
.track-card .track-icon { transition: transform .34s var(--ease-expo); }
.track-card:hover .track-icon { transform: translateY(-2px) scale(1.06); }
.track-card .track-meta { display: inline-block; transition: transform .3s var(--ease-expo); }
.track-card:hover .track-meta { transform: translateX(5px); }

/* Post cards: a "go" arrow that only signals intent on hover. */
.post-card .card-go {
  margin-left: auto;
  font-size: 1rem;
  line-height: 1;
  color: var(--brand-600);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity .3s var(--ease-expo), transform .3s var(--ease-expo);
}
.post-card:hover .card-go,
.post-card:focus-visible .card-go { opacity: 1; transform: translateX(0); }

.post-card h3 { transition: color .22s var(--ease-quart); }
.post-card:hover h3 { color: var(--brand-600); }

.tag { transition: transform .25s var(--ease-expo); }
.card-link:hover .tag { transform: translateY(-1px); }

.path-step { transition: transform .26s var(--ease-expo), border-color .26s, background-color .26s; }
.path-step:hover { transform: translateX(4px); border-color: var(--brand-200); }

/* ------------------------------------------------------- Blog filtering */
.filter-btn { transition: all .2s var(--ease-quart); }
.filter-btn[aria-pressed="true"] { transform: translateY(-1px); box-shadow: var(--shadow-sm); }

.faq details { transition: border-color .24s, box-shadow .24s; }
.faq details[open] { border-color: var(--brand-200); box-shadow: var(--shadow-sm); }
/* The base rule swaps the "+" glyph for an en dash, and a content change
   cannot animate. Keep the plus and rotate it into a cross instead, so the
   open/close state reads as one continuous 280ms motion. */
.faq summary::after { transition: transform .28s var(--ease-expo); }
.faq details[open] summary::after { content: "+"; transform: rotate(45deg); }

/* Page headers on inner pages get a soft wash so they do not read flat. */
.page-head {
  position: relative;
  background: radial-gradient(760px 300px at 8% -40%, var(--brand-50), transparent 68%);
}

/* --------------------------------------------------------- Back to top */
.to-top {
  position: fixed;
  right: 22px;
  bottom: 22px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  box-shadow: var(--shadow);
  cursor: pointer;
  z-index: 90;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px) scale(.9);
  transition: opacity .3s var(--ease-expo), transform .3s var(--ease-expo), visibility .3s;
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { color: var(--brand-600); border-color: var(--brand-400); transform: translateY(-2px); }
.to-top svg { width: 18px; height: 18px; }

@media (max-width: 760px) {
  .to-top { right: 14px; bottom: 14px; width: 40px; height: 40px; }
  .hero-fx::after { background-size: 34px 34px; }
}

/* ------------------------------------------- Reduced motion (final word) */
/* Declared last so it overrides every animation defined above. */
@media (prefers-reduced-motion: reduce) {
  .motion [data-reveal],
  .motion [data-reveal].is-in,
  .motion .hero [data-hero] {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }
  .hero-fx .orb { animation: none !important; }
  .to-top { transition: none !important; }
}

/* ------------------------------------------------------------- AI band */
/* Homepage feature strip for the AI track. Deliberately a different shape
   to the three loop cards, because AI cuts across them rather than
   following them. */
.ai-band {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 30px 30px 26px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background:
    radial-gradient(520px 260px at 88% 115%, color-mix(in srgb, var(--band, var(--ai)) 15%, transparent), transparent 70%),
    var(--surface);
  color: inherit;
  transition: transform .32s var(--ease-expo), box-shadow .32s var(--ease-expo), border-color .32s var(--ease-expo);
}
.ai-band:hover {
  text-decoration: none;
  transform: translateY(-3px);
  box-shadow: var(--shadow);
  border-color: color-mix(in srgb, var(--band, var(--ai)) 45%, var(--border));
}
.ai-band .tag { margin-bottom: 14px; }
.ai-band h3 { font-size: 1.32rem; margin-bottom: .4em; }
.ai-band p { color: var(--text-muted); font-size: .95rem; margin-bottom: 16px; }

.ai-band-cta {
  display: inline-block;
  font-size: .9rem;
  font-weight: 650;
  color: var(--band, var(--ai));
  transition: transform .3s var(--ease-expo);
}
.ai-band:hover .ai-band-cta { transform: translateX(5px); }

.ai-band-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.ai-band-list li {
  padding: 13px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-soft);
  background: var(--bg-soft);
  font-size: .92rem;
  font-weight: 600;
  transition: border-color .26s var(--ease-expo), transform .26s var(--ease-expo);
}
.ai-band:hover .ai-band-list li { border-color: color-mix(in srgb, var(--band, var(--ai)) 30%, var(--border)); }

@media (max-width: 860px) {
  .ai-band { padding: 26px 22px; }
}

/* --------------------------------------------------- Nav collapse point */
/* The nav is now nine items and the brand name is long, which together need
   roughly 1,045px of header. Below that the logo gets squeezed and — before
   the nowrap rule above — wrapped to three lines inside a 68px header.
   Collapse to the menu button while there is still room for everything.
   Kept as its own query so the 760px block continues to own the layout
   changes (grids, padding) that belong at phone width.

   If you add another nav item, re-measure: logo + nav + actions + gaps must
   fit inside the viewport minus 44px of wrapper padding. */
@media (max-width: 1100px) {
  .nav-toggle { display: grid; }
  .nav {
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 14px 22px 22px;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow);
    display: none;
  }
  .nav.open { display: flex; }
  .nav a { padding: 12px 14px; font-size: 1rem; }
  /* The underline indicator is positioned for the horizontal bar; the
     current-page colour is enough once the links are stacked. */
  .nav a[aria-current="page"]::after { display: none; }
}

/* ------------------------------------------------------- Topics dropdown */
/* Five tracks as flat nav items pushed the header past its usable width, so
   they live in one grouped menu instead. Built as a button + panel rather
   than hover-only, so it works on touch and from the keyboard. */
.nav-group { position: relative; display: flex; align-items: center; }

.nav-trigger {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 13px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--text-muted);
  font-family: inherit;
  font-size: .945rem;
  font-weight: 500;
  cursor: pointer;
  transition: color .18s var(--ease-quart), background-color .18s var(--ease-quart);
}
.nav-trigger:hover { background: var(--bg-sunken); color: var(--text); }
.nav-group.is-current .nav-trigger { color: var(--brand-600); font-weight: 600; }

.nav-caret {
  width: 13px; height: 13px;
  transition: transform .24s var(--ease-expo);
}
.nav-group.open .nav-caret { transform: rotate(180deg); }

.nav-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 232px;
  padding: 6px;
  display: none;
  flex-direction: column;
  gap: 1px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  z-index: 120;
}
.nav-group.open .nav-menu { display: flex; }

.nav-menu a {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 11px;
  border-radius: 8px;
  font-size: .92rem;
  color: var(--text-muted);
  white-space: nowrap;
}
.nav-menu a:hover { background: var(--bg-sunken); color: var(--text); text-decoration: none; }
.nav-menu a[aria-current="page"] { color: var(--brand-600); font-weight: 600; }
/* The dot carries the track's accent, so the menu doubles as a colour key. */
.nav-menu a::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--dot, var(--brand-500));
  flex: none;
}

/* Inside the collapsed mobile nav the panel is part of the stack, not a
   floating layer. */
@media (max-width: 1100px) {
  .nav-group { display: block; }
  .nav-trigger { width: 100%; justify-content: space-between; padding: 12px 14px; font-size: 1rem; }
  .nav-menu {
    position: static;
    min-width: 0;
    margin: 2px 0 2px 12px;
    padding: 4px;
    border-radius: var(--radius-sm);
    box-shadow: none;
    background: var(--bg-soft);
  }
  .nav-menu a { padding: 11px 12px; font-size: .96rem; }
}

/* ------------------------------------------------- LinkedIn cross-promo */
/* Sits inside the newsletter panel, under the email form. Deliberately a
   secondary style: the email list is the asset you own, LinkedIn is reach
   you rent. Hidden entirely until a real URL is set — see .is-unset. */
.newsletter-alt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, .22);
}
.newsletter-alt.is-unset { display: none; }

.newsletter-alt .alt-label {
  font-size: .84rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-weight: 600;
  color: rgba(255, 255, 255, .72);
}

.btn-linkedin {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 20px;
  border-radius: 11px;
  border: 1px solid rgba(255, 255, 255, .45);
  background: rgba(255, 255, 255, .12);
  color: #fff;
  font-size: .95rem;
  font-weight: 600;
  transition: background-color .2s var(--ease-quart), border-color .2s var(--ease-quart), transform .16s var(--ease-expo);
}
.btn-linkedin:hover {
  background: rgba(255, 255, 255, .2);
  border-color: #fff;
  text-decoration: none;
  transform: translateY(-1px);
}
.btn-linkedin svg { width: 17px; height: 17px; flex: none; }

/* Standalone version for use outside the purple panel (e.g. the about page),
   where it needs the normal page colours instead. */
.btn-linkedin.on-light {
  border-color: var(--border);
  background: var(--surface);
  color: #0a66c2;
}
.btn-linkedin.on-light:hover {
  background: var(--bg-sunken);
  border-color: #0a66c2;
}