/* =========================================================
   specshop.dev — shared base styles
   Tokens, reset, nav, buttons, terminal, footer, status pill,
   section primitives. Page-specific styles stay inline.
   ========================================================= */

:root {
  /* Surfaces */
  --canvas:           #0D1117;
  --canvas-deep:      #010409;
  --surface-elevated: #161B22;

  /* Borders */
  --border:           #21262D;
  --border-strong:    #30363D;

  /* Text — text-subtle bumped from #6E7681 to #7d8590 for AA contrast on canvas */
  --text-primary:     #F6F8FA;
  --text-secondary:   #C9D1D9;
  --text-muted:       #8B949E;
  --text-subtle:      #7D8590;

  /* Accents */
  --accent-signal:    #3FB950;
  --accent-link:      #58A6FF;
  --accent-warn:      #D29922;
  --accent-danger:    #F85149;

  /* Alpha pills */
  --signal-bg:     rgba(63, 185, 80, 0.08);
  --signal-border: rgba(63, 185, 80, 0.25);
  --link-bg:       rgba(88, 166, 255, 0.08);
  --link-border:   rgba(88, 166, 255, 0.25);
  --warn-bg:       rgba(210, 153, 34, 0.08);
  --warn-border:   rgba(210, 153, 34, 0.25);

  /* Type families */
  --font-sans:  'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-serif: 'Fraunces', Georgia, serif;
  --font-mono:  'JetBrains Mono', 'SF Mono', Menlo, monospace;

  /* Spacing */
  --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;

  /* Containers */
  --container-prose: 640px;
  --container-page:  1180px;
  --container-wide:  1400px;

  /* Radius */
  --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-full: 9999px;

  /* Nav */
  --nav-h: 64px;
}

/* =========================================================
   Reset & base
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-secondary);
  background: var(--canvas);
  background-image:
    radial-gradient(ellipse 1200px 800px at 50% -200px, rgba(63, 185, 80, 0.04), transparent 60%),
    radial-gradient(ellipse 800px 600px at 90% 30%, rgba(88, 166, 255, 0.03), transparent 60%);
  background-attachment: fixed;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; }
img, svg { display: block; max-width: 100%; }
::selection { background: var(--accent-link); color: var(--canvas); }

/* =========================================================
   Container
   ========================================================= */
.container {
  max-width: var(--container-page);
  margin-inline: auto;
  padding-inline: var(--space-6);
}
.container--prose { max-width: var(--container-prose); }
@media (max-width: 720px) { .container { padding-inline: var(--space-4); } }

/* =========================================================
   Section label & status pill
   ========================================================= */
.section-label {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--accent-signal);
  margin-bottom: var(--space-3);
  letter-spacing: 0.01em;
}

.status-pill {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: 5px 12px;
  background: var(--signal-bg);
  border: 0.5px solid var(--signal-border);
  border-radius: var(--radius-full);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--accent-signal);
}
.status-pill .dot {
  width: 6px; height: 6px;
  background: var(--accent-signal);
  border-radius: 50%;
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.45; }
}

/* =========================================================
   Nav
   ========================================================= */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--nav-h);
  z-index: 100;
  background: rgba(13, 17, 23, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 0.5px solid var(--border);
}
.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  max-width: var(--container-page);
  margin-inline: auto;
  padding-inline: var(--space-6);
}
.logo {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--text-primary);
  font-weight: 500;
}
.logo-mark { color: var(--accent-signal); }
.logo-tld  { color: var(--text-subtle); }
.nav__links {
  display: flex; align-items: center; gap: 28px;
  list-style: none; padding: 0; margin: 0;
}
.nav__links a {
  font-size: 13px;
  color: var(--text-muted);
  transition: color 120ms ease;
}
.nav__links a:hover, .nav__links a.active { color: var(--text-primary); }
.nav__links a.active { color: var(--accent-signal); }
.nav__ham {
  display: none; flex-direction: column; gap: 5px;
  padding: 6px;
  background: transparent;
  border: none;
  cursor: pointer;
}
.nav__ham span {
  display: block;
  width: 22px; height: 1.5px;
  background: var(--text-primary);
  transition: all 200ms ease;
}
.nav__mobile {
  display: none;
  position: fixed;
  top: var(--nav-h); left: 0; right: 0;
  background: rgba(13, 17, 23, 0.97);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 0.5px solid var(--border);
  padding: var(--space-5);
  flex-direction: column;
  gap: var(--space-2);
  z-index: 99;
}
.nav__mobile.open { display: flex; }
.nav__mobile a {
  padding: var(--space-3) 0;
  font-size: 15px;
  color: var(--text-secondary);
  border-bottom: 0.5px solid var(--border);
  text-decoration: none;
}
.nav__mobile a:last-child { border-bottom: none; }
@media (max-width: 768px) {
  .nav__links { display: none; }
  .nav__ham { display: flex; }
}

/* =========================================================
   Buttons
   ========================================================= */
.btn {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: 11px 20px;
  border-radius: var(--radius-md);
  font-family: var(--font-mono);
  font-size: 14px; font-weight: 500;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, transform 80ms ease;
  border: 0.5px solid transparent;
  white-space: nowrap;
}
.btn-primary  { background: var(--text-primary); color: var(--canvas); }
.btn-primary:hover  { background: #FFFFFF; }
.btn-primary:active { transform: scale(0.98); }
.btn-secondary {
  background: transparent;
  color: var(--text-primary);
  border-color: var(--border-strong);
}
.btn-secondary:hover { background: var(--surface-elevated); border-color: var(--text-muted); }
.btn-secondary .prefix { color: var(--accent-link); }

/* =========================================================
   Terminal card — signature component
   ========================================================= */
.terminal {
  background: var(--canvas-deep);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  max-width: 620px;
}
.terminal-chrome {
  display: flex; align-items: center; gap: var(--space-2);
  padding: 10px 14px;
  background: var(--canvas);
  border-bottom: 0.5px solid var(--border);
}
.terminal-chrome .dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--border-strong);
}
.terminal-chrome .path {
  margin-left: var(--space-3);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-subtle);
}
.terminal-body {
  padding: 18px 20px;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-secondary);
  word-break: break-word;
}
.terminal-body .prompt         { color: var(--accent-signal); }
.terminal-body .cmd            { color: var(--text-primary); }
.terminal-body .comment,
.terminal-body .comment-inline { color: var(--text-subtle); }
.terminal-body .key            { color: var(--text-subtle); }
.terminal-body .val            { color: var(--text-secondary); }
.terminal-body .val.success    { color: var(--accent-signal); }
.terminal-body .val.link       { color: var(--accent-link); }
.terminal-body .val.warn       { color: var(--accent-warn); }
.kv-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 24px;
  padding: 8px 0;
}
.cursor {
  display: inline-block;
  width: 8px; height: 16px;
  background: var(--accent-signal);
  vertical-align: -3px;
  animation: blink 1s step-end infinite;
}
@keyframes blink { 50% { opacity: 0; } }

/* =========================================================
   Footer
   ========================================================= */
.footer {
  border-top: 0.5px solid var(--border);
  padding: var(--space-7) 0 var(--space-5);
  font-family: var(--font-mono);
  font-size: 12px;
}
.footer__inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: var(--space-5);
  color: var(--text-subtle);
}
.footer__brand { color: var(--text-secondary); }
.footer__brand .tld { color: var(--text-subtle); }
.footer__links {
  display: flex; gap: var(--space-5);
  list-style: none; flex-wrap: wrap;
  padding: 0; margin: 0;
}
.footer__links a { color: var(--text-muted); }
.footer__links a:hover { color: var(--text-primary); }
.footer__bottom {
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 0.5px solid var(--border);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
  color: var(--text-subtle);
}

/* =========================================================
   FAQ — shared <details> pattern
   ========================================================= */
.faq {
  display: grid; gap: 0;
  border-top: 0.5px solid var(--border);
  max-width: 880px;
}
.faq details {
  border-bottom: 0.5px solid var(--border);
  padding: var(--space-5) 0;
}
.faq summary {
  cursor: pointer;
  list-style: none;
  display: grid; grid-template-columns: 1fr 24px;
  gap: var(--space-4);
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 500;
  color: var(--text-primary);
  line-height: 1.4;
  align-items: start;
  transition: color 120ms ease;
}
.faq summary:hover { color: var(--accent-link); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  font-family: var(--font-mono);
  color: var(--accent-signal);
  font-size: 18px;
  line-height: 1;
  transition: transform 160ms ease;
}
.faq details[open] summary::after { content: "−"; }
.faq .answer {
  margin-top: var(--space-4);
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-muted);
  max-width: 720px;
}
.faq .answer p { margin: 0 0 var(--space-3); }
.faq .answer p:last-child { margin-bottom: 0; }
.faq .answer a { color: var(--accent-link); }

/* =========================================================
   Reduced motion
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  .cursor, .status-pill .dot { animation: none; }
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
}

/* =========================================================
   Home-page layout — extracted from index.html inline styles.
   Used by specshop/* blocks (hero, transform-feature, offer-grid,
   cred-grid, founders-grid, journal-grid, cta-band).
   ========================================================= */

/* =========================================================
   7. HERO — Transform-led, terminal as visual anchor
   ========================================================= */
.hero {
  padding: 72px 0 56px;
  position: relative;
  overflow: hidden;
}
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: var(--space-8);
  align-items: center;
}
@media (max-width: 980px) {
  .hero { padding: 48px 0 32px; }
  .hero-grid { grid-template-columns: 1fr; gap: var(--space-7); }
}

.hero h1 {
  font-family: var(--font-sans);
  font-size: clamp(36px, 5vw, 56px);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  margin: var(--space-4) 0 var(--space-5);
}
.hero h1 .serif-accent {
  font-family: var(--font-serif);
  font-style: italic; font-weight: 400;
  color: var(--text-subtle);
}
.hero h1 .mono-accent {
  font-family: var(--font-mono);
  font-weight: 400;
  color: var(--accent-signal);
  font-size: 0.86em;
}
.hero-lead {
  font-size: 17px;
  line-height: 1.55;
  color: var(--text-muted);
  max-width: 520px;
  margin: 0 0 var(--space-6);
}
.hero-ctas { display: flex; gap: var(--space-3); flex-wrap: wrap; }

/* Soft entrance */
.hero > .container > .hero-grid > * > * { animation: rise 600ms cubic-bezier(.2,.7,.2,1) both; }
.hero h1                                  { animation-delay: 60ms; }
.hero-lead                                { animation-delay: 140ms; }
.hero-ctas                                { animation-delay: 220ms; }
.hero .terminal                           { animation: rise 700ms cubic-bezier(.2,.7,.2,1) 280ms both; }
@keyframes rise {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Terminal card — loaded from /assets/base.css */

/* =========================================================
   9. Section rhythm
   ========================================================= */
section { padding: var(--space-9) 0; }
@media (max-width: 720px) { section { padding: var(--space-7) 0; } }

.section-head { margin-bottom: var(--space-7); max-width: 720px; }
.section-head h2 {
  font-family: var(--font-sans);
  font-size: 28px; font-weight: 500;
  line-height: 1.2; letter-spacing: -0.01em;
  color: var(--text-primary);
  margin: 0 0 var(--space-3);
  max-width: 460px;
}
.section-head h2 .serif-accent {
  font-family: var(--font-serif); font-style: italic; font-weight: 400;
  color: var(--text-subtle);
}
.section-head p {
  font-size: 15px; line-height: 1.6; color: var(--text-muted);
  margin: 0; max-width: 560px;
}

/* =========================================================
   10. Transform feature row (the headline offer)
   ========================================================= */
.transform-feature {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: var(--space-8);
  align-items: start;
  border-top: 0.5px solid var(--border);
  padding-top: var(--space-8);
}
@media (max-width: 980px) {
  .transform-feature { grid-template-columns: 1fr; gap: var(--space-6); }
}
.transform-copy h3 {
  font-family: var(--font-sans);
  font-size: 22px; font-weight: 500;
  color: var(--text-primary);
  margin: var(--space-3) 0 var(--space-4);
  line-height: 1.25;
  max-width: 440px;
}
.transform-copy p {
  font-size: 15px; line-height: 1.65; color: var(--text-muted);
  margin: 0 0 var(--space-4); max-width: 480px;
}
.transform-steps {
  list-style: none; padding: 0; margin: var(--space-5) 0 var(--space-6);
  display: grid; gap: 10px;
}
.transform-steps li {
  display: grid; grid-template-columns: 28px 1fr; align-items: baseline;
  gap: var(--space-3);
  font-family: var(--font-mono); font-size: 13px;
  color: var(--text-secondary);
}
.transform-steps li .num {
  color: var(--accent-signal);
}
.transform-steps li .label {
  color: var(--text-secondary);
}
.transform-steps li .meta {
  color: var(--text-subtle);
}

/* =========================================================
   11. Other-three offer cards (smaller, per Transform-led)
   ========================================================= */
.offer-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
}
@media (max-width: 900px) { .offer-grid { grid-template-columns: 1fr; } }

.card {
  background: var(--canvas);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  transition: border-color 120ms ease, background 120ms ease;
  display: flex; flex-direction: column;
  min-height: 220px;
}
.card:hover { border-color: var(--border-strong); background: var(--surface-elevated); }
.card-label {
  font-family: var(--font-mono); font-size: 12px;
  color: var(--text-subtle);
  margin-bottom: 14px;
}
.card-label .num { color: var(--accent-signal); }
.card h3 {
  font-size: 16px; font-weight: 500; color: var(--text-primary);
  margin: 0 0 var(--space-2);
  font-family: var(--font-sans);
}
.card p {
  font-size: 13px; line-height: 1.6; color: var(--text-muted);
  margin: 0 0 var(--space-5);
}
.card-link {
  margin-top: auto;
  font-family: var(--font-mono); font-size: 12px;
  color: var(--accent-link);
  display: inline-flex; align-items: center; gap: 6px;
  transition: gap 160ms ease;
}
.card:hover .card-link { gap: 10px; }

/* =========================================================
   13. Credibility numbers
   ========================================================= */
.cred-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
}
@media (max-width: 720px) { .cred-grid { grid-template-columns: repeat(2, 1fr); } }
.cred-cell {
  border-left: 0.5px solid var(--border);
  padding: var(--space-2) 0 var(--space-2) var(--space-4);
}
.cred-cell .num {
  display: block;
  font-family: var(--font-sans);
  font-size: 36px; font-weight: 500;
  color: var(--text-primary);
  letter-spacing: -0.02em;
  line-height: 1;
  margin-bottom: 6px;
}
.cred-cell .label {
  font-family: var(--font-mono); font-size: 12px;
  color: var(--text-muted);
}

/* =========================================================
   13b. Founders
   ========================================================= */
.founders-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6);
}
@media (max-width: 900px) { .founders-grid { grid-template-columns: 1fr; } }
.founder {
  border: 0.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  background: var(--canvas);
}
.founder-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.founder-monogram {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 0.5px solid var(--border);
  background: var(--canvas-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  color: var(--accent-signal);
  flex-shrink: 0;
}
.founder-name {
  font-family: var(--font-sans);
  font-size: 17px; font-weight: 500;
  color: var(--text-primary);
  margin: 0 0 2px;
  line-height: 1.2;
}
.founder-role {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-subtle);
}
.founder-bio {
  font-size: 14px; line-height: 1.6;
  color: var(--text-muted);
  margin: 0;
}

/* =========================================================
   14. Journal teaser
   ========================================================= */
.journal-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
}
@media (max-width: 900px) { .journal-grid { grid-template-columns: 1fr; } }
.journal-card {
  display: flex; flex-direction: column;
  border: 0.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  transition: border-color 120ms ease, background 120ms ease;
  min-height: 220px;
}
.journal-card:hover { border-color: var(--border-strong); background: var(--surface-elevated); }
.journal-meta {
  font-family: var(--font-mono); font-size: 11px; color: var(--text-subtle);
  margin-bottom: var(--space-4);
}
.journal-card h3 {
  font-family: var(--font-sans); font-size: 17px; font-weight: 500;
  color: var(--text-primary); line-height: 1.3;
  margin: 0 0 var(--space-3);
}
.journal-card p {
  font-size: 13px; line-height: 1.6; color: var(--text-muted);
  margin: 0 0 var(--space-5);
}
.journal-card .read-more {
  margin-top: auto;
  font-family: var(--font-mono); font-size: 12px;
  color: var(--accent-link);
}

/* =========================================================
   15. Closing CTA band
   ========================================================= */
.cta-band {
  border-top: 0.5px solid var(--border);
  padding: var(--space-9) 0;
  text-align: left;
}
.cta-band h2 {
  font-family: var(--font-sans);
  font-size: clamp(28px, 4vw, 40px); font-weight: 500;
  letter-spacing: -0.015em; line-height: 1.15;
  color: var(--text-primary);
  margin: var(--space-3) 0 var(--space-5);
  max-width: 640px;
}
.cta-band h2 .serif-accent {
  font-family: var(--font-serif); font-style: italic; font-weight: 400;
  color: var(--text-subtle);
}
.cta-band p {
  font-size: 16px; color: var(--text-muted); max-width: 520px;
  margin: 0 0 var(--space-6);
}
.cta-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; }

/* Footer + reduced motion — loaded from /assets/base.css */
</style>

/* =========================================================
   Transform-page layout — extracted from transform.html.
   Used by specshop/* blocks (problem-grid, roi-section,
   method-list, fit-grid, objection-block, diff-grid,
   terminal-card, pricing-card, breadcrumb).
   .cta-band rules are deduped — already present from index.
   ========================================================= */
.breadcrumb {
  font-family: var(--font-mono); font-size: 12px;
  color: var(--text-subtle);
  margin-bottom: var(--space-5);
}
.breadcrumb a { color: var(--text-muted); }
.breadcrumb a:hover { color: var(--text-primary); }
.breadcrumb .sep { margin: 0 var(--space-2); color: var(--border-strong); }
.problem-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}
@media (max-width: 820px) { .problem-grid { grid-template-columns: 1fr; } }
.problem-card {
  background: var(--canvas);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  transition: border-color 120ms ease, background 120ms ease;
}
.problem-card:hover { border-color: var(--border-strong); background: var(--surface-elevated); }
.problem-card .tag {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--accent-warn);
  background: var(--warn-bg);
  border: 0.5px solid var(--warn-border);
  padding: 4px 10px;
  border-radius: var(--radius-full);
  display: inline-block;
  margin-bottom: var(--space-4);
}
.problem-card h3 {
  font-family: var(--font-sans); font-size: 18px; font-weight: 500;
  color: var(--text-primary);
  margin: 0 0 var(--space-3);
  line-height: 1.3;
}
.problem-card p {
  font-size: 14px; line-height: 1.65; color: var(--text-muted);
  margin: 0;
}

.problem-bridge {
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: 0.5px solid var(--border);
  font-family: var(--font-mono); font-size: 13px;
  color: var(--text-secondary);
  max-width: 720px;
}
.problem-bridge .arrow { color: var(--accent-signal); margin-right: var(--space-2); }

/* =========================================================
   ROI terminal section
   ========================================================= */
.roi-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: var(--space-8);
  align-items: center;
}
@media (max-width: 980px) { .roi-grid { grid-template-columns: 1fr; gap: var(--space-6); } }
.roi-copy h2 {
  font-family: var(--font-sans);
  font-size: 28px; font-weight: 500;
  line-height: 1.2; letter-spacing: -0.01em;
  color: var(--text-primary);
  margin: var(--space-3) 0 var(--space-4);
  max-width: 460px;
}
.roi-copy h2 .serif-accent { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--text-subtle); }
.roi-copy p {
  font-size: 15px; line-height: 1.65; color: var(--text-muted);
  margin: 0 0 var(--space-4); max-width: 480px;
}

/* =========================================================
   METHOD — 5-step process, vertical timeline
   ========================================================= */
.method-list {
  list-style: none; padding: 0; margin: 0;
  display: grid;
  gap: 0;
  border-top: 0.5px solid var(--border);
}
.method-step {
  display: grid;
  grid-template-columns: 100px 200px minmax(0, 1fr);
  gap: var(--space-6);
  align-items: start;
  padding: var(--space-6) 0;
  border-bottom: 0.5px solid var(--border);
  transition: background 160ms ease;
}
.method-step:hover { background: rgba(22, 27, 34, 0.4); }
@media (max-width: 900px) {
  .method-step { grid-template-columns: 1fr; gap: var(--space-3); padding: var(--space-5) 0; }
}
.method-step .num {
  font-family: var(--font-mono); font-size: 13px;
  color: var(--accent-signal);
}
.method-step .title {
  font-family: var(--font-sans); font-size: 17px; font-weight: 500;
  color: var(--text-primary);
  line-height: 1.3;
}
.method-step .body {
  font-size: 14px; line-height: 1.65; color: var(--text-muted);
}
.method-step .body strong {
  color: var(--text-secondary); font-weight: 500;
}
.method-step .deliverable {
  margin-top: var(--space-3);
  font-family: var(--font-mono); font-size: 12px;
  color: var(--text-subtle);
}
.method-step .deliverable .label { color: var(--accent-signal); }

.method-bonus {
  margin-top: var(--space-6);
  padding: var(--space-5);
  background: var(--signal-bg);
  border: 0.5px solid var(--signal-border);
  border-radius: var(--radius-lg);
  font-family: var(--font-mono); font-size: 13px;
  color: var(--text-secondary);
  max-width: 720px;
}
.method-bonus .marker { color: var(--accent-signal); margin-right: var(--space-2); }

/* =========================================================
   Fit grid (who this is for / isn't)
   ========================================================= */
.fit-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}
@media (max-width: 820px) { .fit-grid { grid-template-columns: 1fr; } }
.fit-card {
  background: var(--canvas);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}
.fit-card .tag {
  font-family: var(--font-mono); font-size: 11px;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  display: inline-block;
  margin-bottom: var(--space-4);
}
.fit-card.is-fit .tag {
  color: var(--accent-signal); background: var(--signal-bg); border: 0.5px solid var(--signal-border);
}
.fit-card.is-not .tag {
  color: var(--text-subtle); background: transparent; border: 0.5px solid var(--border-strong);
}
.fit-card h3 {
  font-family: var(--font-sans); font-size: 17px; font-weight: 500;
  color: var(--text-primary); margin: 0 0 var(--space-4); line-height: 1.3;
}
.fit-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.fit-list li {
  display: grid; grid-template-columns: 18px 1fr; gap: var(--space-3);
  font-size: 14px; color: var(--text-secondary); line-height: 1.5;
}
.fit-list li::before {
  content: "▸"; font-family: var(--font-mono);
  color: var(--accent-signal); font-size: 12px;
  line-height: 1.5;
}
.fit-card.is-not .fit-list li::before { content: "−"; color: var(--text-subtle); }
.fit-card.is-not .fit-list li { color: var(--text-muted); }

/* =========================================================
   Objection — direct answer
   ========================================================= */
.objection {
  background: var(--canvas-deep);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-7);
  max-width: 880px;
}
.objection .q {
  font-family: var(--font-mono); font-size: 13px; color: var(--text-subtle);
  margin-bottom: var(--space-4);
}
.objection .q .marker { color: var(--accent-link); margin-right: var(--space-2); }
.objection h3 {
  font-family: var(--font-sans); font-size: 22px; font-weight: 500;
  color: var(--text-primary);
  margin: 0 0 var(--space-5); line-height: 1.3;
  max-width: 640px;
}
.objection h3 .serif-accent { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--text-subtle); }
.objection p {
  font-size: 15px; line-height: 1.65; color: var(--text-muted);
  margin: 0 0 var(--space-4); max-width: 640px;
}
.objection .summary {
  margin-top: var(--space-5); padding-top: var(--space-5);
  border-top: 0.5px solid var(--border);
  font-family: var(--font-mono); font-size: 13px;
  color: var(--text-secondary);
}
.objection .summary .marker { color: var(--accent-signal); margin-right: var(--space-2); }

/* =========================================================
   Differentiation cards
   ========================================================= */
.diff-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
}
@media (max-width: 900px) { .diff-grid { grid-template-columns: 1fr; } }
.diff-card {
  background: var(--canvas);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  transition: border-color 120ms ease, background 120ms ease;
}
.diff-card:hover { border-color: var(--border-strong); background: var(--surface-elevated); }
.diff-card .label {
  font-family: var(--font-mono); font-size: 12px;
  color: var(--text-subtle);
  margin-bottom: var(--space-4);
}
.diff-card .label .num { color: var(--accent-signal); }
.diff-card h3 {
  font-family: var(--font-sans); font-size: 16px; font-weight: 500;
  color: var(--text-primary);
  margin: 0 0 var(--space-3); line-height: 1.3;
}
.diff-card p {
  font-size: 13px; line-height: 1.6; color: var(--text-muted); margin: 0;
}

/* =========================================================
   Pricing
   ========================================================= */
.pricing-card {
  background: var(--canvas-deep);
  border: 0.5px solid var(--border-strong);
  border-radius: var(--radius-lg);
  padding: var(--space-7);
  max-width: 880px;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: var(--space-7);
  align-items: center;
}
@media (max-width: 820px) { .pricing-card { grid-template-columns: 1fr; gap: var(--space-5); padding: var(--space-6); } }
.pricing-card .label {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--accent-signal);
  margin-bottom: var(--space-3);
}
.pricing-card .range {
  font-family: var(--font-sans);
  font-size: clamp(36px, 4.5vw, 48px); font-weight: 500;
  letter-spacing: -0.02em; line-height: 1;
  color: var(--text-primary);
  margin: 0 0 var(--space-3);
}
.pricing-card .qualifier {
  font-family: var(--font-mono); font-size: 12px;
  color: var(--text-subtle);
  margin: 0 0 var(--space-5);
}
.pricing-card .includes-label {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--text-subtle);
  margin-bottom: var(--space-3);
}
.pricing-card ul {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: 10px;
  font-size: 14px; color: var(--text-secondary); line-height: 1.4;
}
.pricing-card ul li {
  display: grid; grid-template-columns: 18px 1fr; gap: var(--space-3);
}
.pricing-card ul li::before {
  content: "▸"; font-family: var(--font-mono);
  color: var(--accent-signal); font-size: 12px;
}

/* =========================================================
   CTA band & footer
   ========================================================= */
.cta-band {
  border-top: 0.5px solid var(--border);
  padding: var(--space-9) 0;
}
.cta-band h2 {
  font-family: var(--font-sans);
  font-size: clamp(28px, 4vw, 40px); font-weight: 500;
  letter-spacing: -0.015em; line-height: 1.15;
  color: var(--text-primary);
  margin: var(--space-3) 0 var(--space-5);
  max-width: 640px;
}
.cta-band h2 .serif-accent { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--text-subtle); }
.cta-band p {
  font-size: 16px; color: var(--text-muted); max-width: 520px;
  margin: 0 0 var(--space-6);
}
.cta-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; }

/* =========================================================
   Build-page layout — extracted from build.html.
   .callout, .stages/.stage, .math/.math__*, .deliverables-list,
   .who-grid/.who-col, .pricing/.pricing__*, .cta-band__inner.
   ========================================================= */
/* SECTION: transform-callout — the prominent cross-link */
.callout {
  margin-top: var(--space-9);
  background: var(--canvas-deep);
  border: 0.5px solid var(--border);
  border-left: 2px solid var(--accent-link);
  border-radius: 0;
  padding: var(--space-5) var(--space-6);
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--space-5);
}
@media (max-width: 768px) {
  .callout { grid-template-columns: 1fr; padding: var(--space-5); }
}
.callout__label {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--accent-link);
  margin-bottom: var(--space-2);
  letter-spacing: 0.01em;
}
.callout__text {
  font-family: var(--font-sans);
  font-size: 15px;
  color: var(--text-secondary);
  line-height: 1.55;
}
.callout__text strong { color: var(--text-primary); font-weight: 500; }
/* SECTION: how-it-works (the 5 stages) */
.stages {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}
@media (max-width: 768px) { .stages { grid-template-columns: 1fr; } }
.stage {
  background: var(--canvas);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  transition: border-color 120ms ease;
}
.stage:hover { border-color: var(--border-strong); }
.stage__label {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-subtle);
  margin-bottom: 14px;
}
.stage__label .num { color: var(--accent-signal); }
.stage h3 { font-size: 16px; font-weight: 500; color: var(--text-primary); margin-bottom: var(--space-2); }
.stage p { font-size: 13px; line-height: 1.6; color: var(--text-muted); }
/* SECTION: the math */
.math {
  background: var(--canvas-deep);
  border-top: 0.5px solid var(--border);
  border-bottom: 0.5px solid var(--border);
}
.math__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-7);
  align-items: start;
}
@media (max-width: 768px) { .math__grid { grid-template-columns: 1fr; gap: var(--space-5); } }
.math__item {
  border-left: 0.5px solid var(--border);
  padding-left: var(--space-5);
}
.math__item:first-child { border-left: none; padding-left: 0; }
@media (max-width: 768px) {
  .math__item { border-left: none; padding-left: 0; padding-top: var(--space-5); border-top: 0.5px solid var(--border); }
  .math__item:first-child { padding-top: 0; border-top: none; }
}
.math__num {
  font-family: var(--font-sans);
  font-size: 44px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  margin-bottom: var(--space-3);
}
.math__num .unit { color: var(--text-subtle); font-size: 28px; }
.math__label {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--accent-signal);
  margin-bottom: var(--space-2);
  letter-spacing: 0.01em;
}
.math__desc { font-size: 13px; color: var(--text-muted); line-height: 1.6; }

/* SECTION: deliverables */
.deliverables-list {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-top: 0.5px solid var(--border);
}
@media (max-width: 768px) { .deliverables-list { grid-template-columns: 1fr; } }
.deliverables-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-bottom: 0.5px solid var(--border);
  border-right: 0.5px solid var(--border);
  font-size: 14px;
  color: var(--text-secondary);
}
@media (max-width: 768px) {
  .deliverables-list li { border-right: none; }
}
.deliverables-list li:nth-child(2n) { border-right: none; }
.deliverables-list .check {
  color: var(--accent-signal);
  font-family: var(--font-mono);
  font-size: 12px;
  flex-shrink: 0;
  margin-top: 2px;
}
/* SECTION: who */
.who-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-7);
}
@media (max-width: 768px) { .who-grid { grid-template-columns: 1fr; gap: var(--space-5); } }
.who-col h3 {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.01em;
  margin-bottom: var(--space-4);
}
.who-col.is-fit h3 { color: var(--accent-signal); }
.who-col.is-not h3 { color: var(--text-subtle); }
.who-col ul { list-style: none; display: flex; flex-direction: column; gap: var(--space-3); }
.who-col li {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.5;
  padding-left: var(--space-4);
  position: relative;
}
.who-col li::before {
  content: '▸';
  position: absolute;
  left: 0;
  color: var(--text-subtle);
  font-family: var(--font-mono);
}
/* SECTION: pricing */
.pricing {
  background: var(--canvas-deep);
  border-top: 0.5px solid var(--border);
  border-bottom: 0.5px solid var(--border);
}
.pricing__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-7);
  align-items: center;
}
@media (max-width: 768px) { .pricing__inner { grid-template-columns: 1fr; } }
.pricing__num {
  font-family: var(--font-sans);
  font-size: clamp(48px, 8vw, 72px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  margin-bottom: var(--space-3);
}
.pricing__num .from { color: var(--text-subtle); font-size: 0.45em; vertical-align: 0.5em; margin-right: var(--space-2); }
.pricing__caption {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-subtle);
  letter-spacing: 0.01em;
}

/* SECTION: cta */
.cta-band {
  background: var(--canvas-deep);
  border-top: 0.5px solid var(--border);
}
.cta-band__inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-6);
  align-items: center;
}
@media (max-width: 768px) { .cta-band__inner { grid-template-columns: 1fr; } }
.cta-band p { color: var(--text-muted); margin-top: var(--space-3); max-width: 480px; }

/* =========================================================
   Maintain-page layout — extracted from maintain.html.
   .problem-vs/.problem-col, .tiers/.tier__*, .workflow/.flow-card,
   .callout h3/p extensions, .cta-band__terms.
   ========================================================= */
.problem-vs {
  background: var(--canvas-deep);
  border-top: 0.5px solid var(--border);
  border-bottom: 0.5px solid var(--border);
}
.problem-vs__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}
@media (max-width: 768px) { .problem-vs__grid { grid-template-columns: 1fr; } }
.problem-col {
  padding: var(--space-7) var(--space-6);
}
.problem-col + .problem-col {
  border-left: 0.5px solid var(--border);
}
@media (max-width: 768px) {
  .problem-col + .problem-col { border-left: none; border-top: 0.5px solid var(--border); }
}
.problem-col__label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.01em;
  margin-bottom: var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.problem-col__label .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}
.problem-col.is-bad .problem-col__label { color: var(--text-subtle); }
.problem-col.is-bad .problem-col__label .dot { background: var(--text-subtle); }
.problem-col.is-good .problem-col__label { color: var(--accent-signal); }
.problem-col.is-good .problem-col__label .dot { background: var(--accent-signal); }
.problem-col h3 {
  font-size: 20px;
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: var(--space-3);
  letter-spacing: -0.01em;
  line-height: 1.3;
}
.problem-col p {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.7;
}

/* SECTION: pricing tiers */
.tiers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  align-items: stretch;
}
@media (max-width: 960px) { .tiers { grid-template-columns: 1fr; } }
.tier {
  background: var(--canvas);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  transition: border-color 120ms ease;
}
.tier:hover { border-color: var(--border-strong); }
.tier.is-featured {
  border-color: var(--signal-border);
}
.tier__pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.01em;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  border: 0.5px solid var(--border-strong);
  color: var(--text-muted);
  margin-bottom: var(--space-4);
  align-self: flex-start;
}
.tier.is-featured .tier__pill {
  background: var(--signal-bg);
  border-color: var(--signal-border);
  color: var(--accent-signal);
}
.tier.is-featured .tier__pill .dot {
  width: 6px; height: 6px; background: var(--accent-signal); border-radius: 50%;
}
.tier__name {
  font-size: 18px;
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: var(--space-2);
  letter-spacing: -0.01em;
}
.tier__desc {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.55;
  margin-bottom: var(--space-5);
  min-height: 40px;
}
.tier__price {
  font-family: var(--font-sans);
  font-size: 36px;
  font-weight: 500;
  color: var(--text-primary);
  letter-spacing: -0.02em;
  line-height: 1;
  margin-bottom: var(--space-2);
}
.tier__price .unit {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-subtle);
  font-weight: 400;
  margin-left: var(--space-1);
  letter-spacing: 0;
}
.tier__price-note {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-subtle);
  letter-spacing: 0.01em;
  margin-bottom: var(--space-5);
}
.tier__divider {
  height: 0.5px;
  background: var(--border);
  margin: 0 0 var(--space-5);
}
.tier__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
  flex: 1;
}
.tier__list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.55;
}
.tier__list .check {
  color: var(--accent-signal);
  font-family: var(--font-mono);
  font-size: 12px;
  flex-shrink: 0;
  margin-top: 1px;
}
.tier .btn {
  width: 100%;
  justify-content: center;
}

/* SECTION: how-it-works */
.workflow {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
}
@media (max-width: 960px) { .workflow { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .workflow { grid-template-columns: 1fr; } }
.flow-card {
  background: var(--canvas);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}
.flow-card__num {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--accent-signal);
  margin-bottom: var(--space-4);
  letter-spacing: 0.01em;
}
.flow-card h3 {
  font-size: 15px;
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: var(--space-2);
}
.flow-card p { font-size: 13px; line-height: 1.6; color: var(--text-muted); }

/* SECTION: transform-callout (prominent) */
.callout h3 {
  font-size: 20px;
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: var(--space-3);
  letter-spacing: -0.01em;
  line-height: 1.3;
}
.callout p {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.6;
  max-width: 620px;
}

/* SECTION: cta */
.cta-band {
  background: var(--canvas-deep);
  border-top: 0.5px solid var(--border);
}
.cta-band__inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-6);
  align-items: center;
}
@media (max-width: 768px) { .cta-band__inner { grid-template-columns: 1fr; } }
.cta-band p { color: var(--text-muted); margin-top: var(--space-3); max-width: 480px; }
.cta-band__terms {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-3);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-subtle);
  flex-wrap: wrap;
}
.cta-band__terms span:not(:last-child)::after {
  content: '·';
  margin-left: var(--space-3);
  color: var(--text-subtle);
}


/* =========================================================
   Train-page layout — extracted from train.html.
   .prose, .status-pill--warn, .cta-row, .failure-list, .beats,
   .loop-figure, .deliverables, .repo-tree, .shape-grid, .session,
   .async-note, .filter-grid, .positioning-table, .testimonial,
   .notify-card/.notify-form, .sister-grid.
   ========================================================= */
.prose  { max-width: var(--container-prose); }
.status-pill--warn {
  background: var(--warn-bg);
  border-color: var(--warn-border);
  color: var(--accent-warn);
}
.status-pill--warn .dot { background: var(--accent-warn); }

/* Hero */
.hero { padding: 72px 0 var(--space-8); }
@media (max-width: 720px) { .hero { padding: 48px 0 var(--space-6); } }
.hero .status-pill { margin-bottom: var(--space-5); }
.cta-row { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }

/* Failure list */
.failure-list {
  list-style: none; padding: 0; margin: var(--space-6) 0 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5) var(--space-6);
  max-width: 880px;
}
.failure-list li {
  border-left: 2px solid var(--accent-warn);
  padding: 0 0 0 var(--space-4);
}
.failure-list .ftype {
  font-family: var(--font-mono);
  font-size: 12px; color: var(--text-subtle);
  display: block; margin-bottom: var(--space-1);
}
.failure-list .fdesc { font-size: 14px; color: var(--text-secondary); line-height: 1.55; }

/* Thesis beats */
.beats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4); margin-top: var(--space-6);
}
.beat {
  background: var(--canvas);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  transition: border-color 120ms ease, background 120ms ease;
}
.beat:hover { border-color: var(--border-strong); background: var(--surface-elevated); }
.beat-num { font-family: var(--font-mono); font-size: 12px; color: var(--accent-signal); margin-bottom: var(--space-3); }
.beat h3 { margin-bottom: var(--space-2); }
.beat p { font-size: 13px; color: var(--text-muted); margin: 0; }

/* Four-step loop figure */
.loop-figure {
  margin: var(--space-7) auto 0;
  max-width: 760px;
  background: var(--canvas-deep);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  text-align: center;
}
.loop-figure .loop-svg { width: 100%; max-width: 640px; height: auto; }
.loop-figure figcaption {
  font-family: var(--font-mono);
  font-size: 11px; color: var(--text-subtle);
  margin-top: var(--space-4);
}

.deliverables {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--space-4); margin-top: var(--space-6);
}
.deliverable {
  background: var(--canvas);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  transition: border-color 120ms ease, background 120ms ease;
}
.deliverable:hover { border-color: var(--border-strong); background: var(--surface-elevated); }
.deliverable .label { font-family: var(--font-mono); font-size: 12px; color: var(--text-subtle); margin-bottom: var(--space-3); }
.deliverable .label .num { color: var(--accent-signal); }
.deliverable h3 { margin: 0 0 var(--space-2); }
.deliverable p { font-size: 13px; color: var(--text-muted); margin: 0; }
.deliverable code {
  font-family: var(--font-mono); font-size: 12px;
  color: var(--text-secondary);
  background: var(--canvas-deep);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 1px 6px;
}

/* Repo-tree artifact */
.repo-tree {
  background: var(--canvas-deep);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-6);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-secondary);
  margin-top: var(--space-6);
  max-width: 560px;
  overflow-x: auto;
}
.repo-tree .dir { color: var(--accent-link); }
.repo-tree .file { color: var(--text-secondary); }
.shape-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4); margin-top: var(--space-6);
}
.session {
  background: var(--canvas);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}
.session .when { font-family: var(--font-mono); font-size: 11px; color: var(--accent-signal); margin-bottom: var(--space-2); }
.session h3 { font-size: 15px; margin-bottom: var(--space-2); }
.session p { font-size: 13px; color: var(--text-muted); margin: 0; }
.session code {
  font-family: var(--font-mono); font-size: 12px;
  color: var(--text-secondary);
  background: var(--canvas-deep);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 1px 6px;
}
.async-note {
  margin-top: var(--space-5);
  padding: var(--space-4) var(--space-5);
  background: var(--canvas-deep);
  border-left: 2px solid var(--accent-link);
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-secondary);
  max-width: 720px;
}
.async-note .async-label { color: var(--text-subtle); display: block; margin-bottom: var(--space-2); font-size: 11px; }
.filter-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--space-6); margin-top: var(--space-6);
}
.filter-col h3 {
  font-family: var(--font-mono);
  font-size: 12px; letter-spacing: 0.01em;
  margin-bottom: var(--space-4);
}
.filter-col h3.yes { color: var(--accent-signal); }
.filter-col h3.no  { color: var(--accent-warn); }
.filter-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.filter-col li {
  font-size: 14px; color: var(--text-secondary);
  padding-left: var(--space-4); position: relative; line-height: 1.55;
}
.filter-col li::before {
  position: absolute; left: 0;
  font-family: var(--font-mono);
}
.filter-col.yes li::before { content: "+"; color: var(--accent-signal); }
.filter-col.no  li::before { content: "−"; color: var(--accent-warn); }
.positioning-table {
  width: 100%; border-collapse: collapse;
  margin-top: var(--space-6); font-size: 14px;
}
.positioning-table th, .positioning-table td {
  padding: var(--space-4) var(--space-5);
  border-bottom: 0.5px solid var(--border);
  text-align: left; vertical-align: top;
}
.positioning-table th {
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 400;
  color: var(--text-subtle);
  letter-spacing: 0.01em;
  border-bottom-color: var(--border-strong);
}
.positioning-table td:first-child { color: var(--text-muted); width: 42%; }
.positioning-table td:last-child  { color: var(--text-secondary); }

/* Testimonial */
.testimonial {
  background: var(--canvas-deep);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  max-width: 720px;
  margin-top: var(--space-6);
}
.testimonial blockquote { margin: 0 0 var(--space-4); font-size: 17px; line-height: 1.55; color: var(--text-primary); }
.testimonial cite { font-family: var(--font-mono); font-size: 12px; font-style: normal; color: var(--text-subtle); }
.testimonial cite .name { color: var(--text-secondary); }

/* Notify form */
.notify-card {
  background: var(--canvas-deep);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-7);
  max-width: 560px;
  margin-top: var(--space-6);
}
.notify-card .terminal-prompt { font-family: var(--font-mono); font-size: 12px; color: var(--text-subtle); margin-bottom: var(--space-4); }
.notify-card .terminal-prompt .prompt { color: var(--accent-signal); }
.notify-form { display: flex; flex-direction: column; gap: var(--space-3); }
.notify-form input[type="email"],
.notify-form input[type="text"] {
  background: var(--canvas);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-primary);
  width: 100%;
}
.notify-form input::placeholder { color: var(--text-subtle); }
.notify-form input:focus {
  outline: none;
  border-color: var(--accent-link);
  box-shadow: 0 0 0 3px var(--link-bg);
}
.notify-form button { align-self: flex-start; margin-top: var(--space-2); }
.notify-card .fineprint { font-family: var(--font-mono); font-size: 11px; color: var(--text-subtle); margin: var(--space-4) 0 0; }

/* Sister tracks */
.sister-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--space-4); margin-top: var(--space-6);
}
.sister-card {
  background: var(--canvas);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  transition: border-color 120ms ease, background 120ms ease;
  display: flex; flex-direction: column; min-height: 180px;
}
.sister-card:hover { border-color: var(--border-strong); background: var(--surface-elevated); }
.sister-card .label { font-family: var(--font-mono); font-size: 11px; color: var(--text-subtle); margin-bottom: var(--space-3); }
.sister-card h3 { margin: 0 0 var(--space-2); }
.sister-card p { font-size: 13px; color: var(--text-muted); margin: 0 0 var(--space-4); }
.sister-card .arrow { margin-top: auto; font-family: var(--font-mono); font-size: 12px; color: var(--accent-link); }

/* =========================================================
   Train-page typography baseline — was inline in train.html.
   Other pages use scoped selectors (.section-head h2, .hero h1
   etc.) which override these defaults.
   ========================================================= */
h1, h2, h3 {
  font-weight: 500;
  color: var(--text-primary);
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-4);
}
h1 {
  font-family: var(--font-sans);
  font-size: clamp(36px, 5vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  max-width: 880px;
}
h2 {
  font-family: var(--font-sans);
  font-size: clamp(24px, 3vw, 28px);
  line-height: 1.2;
  max-width: 720px;
}
h3 { font-size: 16px; line-height: 1.4; letter-spacing: normal; }
p { margin: 0 0 var(--space-4); color: var(--text-secondary); }
p.lead  { font-size: 17px; line-height: 1.55; color: var(--text-secondary); max-width: var(--container-prose); }
p.small { font-size: 13px; color: var(--text-muted); }

/* Section dividers — only borders between adjacent sections */
section + section { border-top: 0.5px solid var(--border); }

/* Train-page responsive: collapse multi-col grids on small screens */
@media (max-width: 768px) {
  .failure-list, .beats, .deliverables,
  .shape-grid, .filter-grid, .sister-grid { grid-template-columns: 1fr; }
  .positioning-table th, .positioning-table td { padding: var(--space-3); }
}

/* =========================================================
   Journal/blog-page layout — extracted from blog.html.
   .hero rule is scoped to .hero--journal to avoid conflict.
   .filter-row, .featured*, .post-row*, .feed-link* are unique.
   ========================================================= */
/* SECTION: hero */
.hero--journal {
  padding-top: calc(var(--nav-h) + var(--space-8));
  padding-bottom: var(--space-7);
  border-bottom: 0.5px solid var(--border);
}
.hero__breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.01em;
}
.hero__breadcrumb a { color: var(--text-subtle); }
.hero__breadcrumb a:hover { color: var(--text-muted); }
.hero__breadcrumb-sep { color: var(--text-subtle); }
.hero__breadcrumb-current { color: var(--accent-signal); }
.hero__row {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--space-7);
  align-items: end;
}
@media (max-width: 768px) {
  .hero__row { grid-template-columns: 1fr; gap: var(--space-5); align-items: start; }
}
.hero__headline { margin-bottom: var(--space-4); }
.hero__sub {
  font-size: 17px;
  color: var(--text-secondary);
  line-height: 1.55;
  max-width: 560px;
}
.hero__meta {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-subtle);
  letter-spacing: 0.01em;
  text-align: right;
  line-height: 1.7;
}
.hero__meta a {
  color: var(--accent-link);
  border-bottom: 0.5px solid transparent;
  transition: border-color 120ms ease;
}
.hero__meta a:hover { border-bottom-color: var(--accent-link); }
.hero__meta strong {
  font-weight: 500;
  color: var(--text-secondary);
}
@media (max-width: 768px) {
  .hero__meta { text-align: left; }
}

/* SECTION: filter row */
.filter-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  padding: var(--space-5) 0;
  border-bottom: 0.5px solid var(--border);
}
.filter-row__label {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-subtle);
  letter-spacing: 0.01em;
  margin-right: var(--space-3);
}
.filter-btn {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.01em;
  padding: 5px 12px;
  border-radius: var(--radius-full);
  border: 0.5px solid var(--border);
  color: var(--text-muted);
  background: transparent;
  cursor: pointer;
  transition: color 120ms ease, border-color 120ms ease, background 120ms ease;
}
.filter-btn:hover { color: var(--text-primary); border-color: var(--border-strong); }
.filter-btn.active {
  color: var(--accent-signal);
  background: var(--signal-bg);
  border-color: var(--signal-border);
}
.filter-row__count {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-subtle);
  margin-left: auto;
  letter-spacing: 0.01em;
}

/* SECTION: featured */
.featured {
  padding: var(--space-8) 0;
  border-bottom: 0.5px solid var(--border);
}
.featured__inner {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: var(--space-8);
  align-items: center;
}
@media (max-width: 960px) { .featured__inner { grid-template-columns: 1fr; gap: var(--space-5); } }
.featured__meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.featured-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 4px 10px;
  background: var(--signal-bg);
  border: 0.5px solid var(--signal-border);
  border-radius: var(--radius-full);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--accent-signal);
  letter-spacing: 0.01em;
}
.featured-pill .dot {
  width: 6px;
  height: 6px;
  background: var(--accent-signal);
  border-radius: 50%;
}
.featured__date,
.featured__readtime {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-subtle);
  letter-spacing: 0.01em;
}
.featured__sep { color: var(--text-subtle); font-family: var(--font-mono); font-size: 11px; }
.featured h2 {
  font-family: var(--font-sans);
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  margin-bottom: var(--space-4);
}
.featured h2 a:hover { color: var(--accent-link); }
.featured__excerpt {
  font-size: 16px;
  color: var(--text-secondary);
  line-height: 1.7;
  margin-bottom: var(--space-5);
  max-width: 580px;
}
.featured__author {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}
.author-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 0.5px solid var(--border);
  background: var(--surface-elevated);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-muted);
  flex-shrink: 0;
}
.author-name {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
}
.author-name + .sep { color: var(--text-subtle); margin: 0 var(--space-2); font-family: var(--font-mono); font-size: 11px; }
.author-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-subtle);
  letter-spacing: 0.01em;
}

/* Featured visual — terminal-style block referencing the post */
.featured__visual {
  background: var(--canvas-deep);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.featured__visual-chrome {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 10px 14px;
  background: var(--canvas);
  border-bottom: 0.5px solid var(--border);
}
.featured__visual-chrome .dot {
  width: 10px; height: 10px; border-radius: 50%; background: var(--border-strong);
}
.featured__visual-chrome .path {
  margin-left: var(--space-3);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-subtle);
}
.featured__visual-body {
  padding: var(--space-6) var(--space-5);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.8;
  color: var(--text-secondary);
}
.featured__visual-body .prompt { color: var(--accent-signal); }
.featured__visual-body .cmd { color: var(--text-primary); }
.featured__visual-body .comment { color: var(--text-subtle); }
.featured__visual-body .out { color: var(--text-secondary); }
.featured__visual-body .out .key { color: var(--text-subtle); }
.featured__visual-body .out .val.success { color: var(--accent-signal); }
.featured__visual-body .out .val.warn { color: var(--accent-warn); }
/* SECTION: posts list — editorial, dense */
.posts {
  padding: var(--space-7) 0 var(--space-9);
}
.posts__inner {
  display: flex;
  flex-direction: column;
}
.post-row {
  display: grid;
  grid-template-columns: 130px 1fr 100px;
  gap: var(--space-6);
  padding: var(--space-5) 0;
  border-bottom: 0.5px solid var(--border);
  align-items: baseline;
  transition: background 120ms ease;
}
.post-row:hover { background: var(--surface-elevated); margin-inline: calc(-1 * var(--space-4)); padding-inline: var(--space-4); border-radius: var(--radius-md); }
@media (max-width: 768px) {
  .post-row { grid-template-columns: 1fr; gap: var(--space-2); padding: var(--space-5) 0; }
  .post-row:hover { margin-inline: 0; padding-inline: 0; border-radius: 0; }
}
.post-row.hidden { display: none; }
.post-row__date {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-subtle);
  letter-spacing: 0.01em;
}
.post-row__main {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.post-row__title {
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}
.post-row__title a { color: var(--text-primary); transition: color 120ms ease; }
.post-row__title a:hover { color: var(--accent-link); }
.post-row__excerpt {
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-muted);
  margin-top: var(--space-1);
}
.post-row__meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-2);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-subtle);
  letter-spacing: 0.01em;
  flex-wrap: wrap;
}
.post-row__meta .sep { color: var(--text-subtle); }
.post-row__cat {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.01em;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  border: 0.5px solid var(--border);
  color: var(--text-muted);
  background: transparent;
}
.post-row__cat.cat-methodology { color: var(--accent-signal); border-color: var(--signal-border); background: var(--signal-bg); }
.post-row__cat.cat-industry { color: var(--accent-warn); border-color: var(--warn-border); background: var(--warn-bg); }
.post-row__cat.cat-casestudy { color: var(--accent-link); border-color: var(--link-border); background: var(--link-bg); }
.post-row__readmore {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-muted);
  text-align: right;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
  transition: color 120ms ease;
}
.post-row__readmore .arrow { transition: transform 120ms ease; }
.post-row:hover .post-row__readmore { color: var(--accent-link); }
.post-row:hover .post-row__readmore .arrow { transform: translateX(2px); }
@media (max-width: 768px) {
  .post-row__readmore { display: none; }
}

.posts__empty {
  display: none;
  padding: var(--space-7) 0;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-subtle);
}
.posts__empty.visible { display: block; }

/* SECTION: feed-link strip */
.feed-link {
  background: var(--canvas-deep);
  border-top: 0.5px solid var(--border);
}
.feed-link__inner {
  padding: var(--space-7) 0;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-5);
  align-items: center;
}
@media (max-width: 768px) {
  .feed-link__inner { grid-template-columns: 1fr; }
}
.feed-link h2 {
  font-size: 22px;
  font-weight: 500;
  margin-bottom: var(--space-2);
}
.feed-link p {
  font-size: 14px;
  color: var(--text-muted);
  max-width: 540px;
}
.feed-link__cta {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

/* =========================================================
   Single-post layout — post-hero, article body, related posts.
   Designed to work with the imported HTML (which carries its own
   inline classes like .stat-callout, .reveal etc. — those are
   left as-is and may render unstyled until added below).
   ========================================================= */
.single-post { display: block; }

.post-hero {
  padding-top: var(--space-8);
  padding-bottom: var(--space-7);
  border-bottom: 0.5px solid var(--border);
}
.post-hero__breadcrumb {
  display: flex; align-items: center; gap: var(--space-2);
  margin-bottom: var(--space-5);
  font-family: var(--font-mono); font-size: 11px;
  color: var(--text-subtle); letter-spacing: 0.01em;
}
.post-hero__breadcrumb a { color: var(--text-subtle); }
.post-hero__breadcrumb a:hover { color: var(--text-muted); }
.post-hero__breadcrumb-sep { color: var(--text-subtle); }
.post-hero__meta {
  display: flex; align-items: center; gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-5);
  font-family: var(--font-mono); font-size: 11px;
  color: var(--text-subtle); letter-spacing: 0.01em;
}
.cat-tag {
  padding: 3px 10px;
  border-radius: var(--radius-full);
  border: 0.5px solid var(--border);
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.01em;
  color: var(--text-muted);
  background: transparent;
}
.cat-tag-methodology, .cat-tag.cat-tag-methodology {
  color: var(--accent-signal); border-color: var(--signal-border); background: var(--signal-bg);
}
.cat-tag-industry, .cat-tag.cat-tag-industry {
  color: var(--accent-warn); border-color: var(--warn-border); background: var(--warn-bg);
}
.cat-tag-case-study, .cat-tag-casestudy {
  color: var(--accent-link); border-color: var(--link-border); background: var(--link-bg);
}
.post-hero__date, .post-hero__read { color: var(--text-subtle); }
.post-hero__headline {
  font-family: var(--font-sans);
  font-size: clamp(32px, 5vw, 52px);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  margin: 0 0 var(--space-4);
  max-width: 880px;
}
.post-hero__sub {
  font-size: 18px;
  line-height: 1.55;
  color: var(--text-secondary);
  max-width: 720px;
  margin: 0 0 var(--space-6);
}
.post-hero__author {
  display: flex; align-items: center; gap: var(--space-3);
  flex-wrap: wrap;
  padding-top: var(--space-5);
  border-top: 0.5px solid var(--border);
}
.post-hero__author .author-avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 0.5px solid var(--border);
  background: var(--surface-elevated);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 13px; color: var(--text-muted);
  flex-shrink: 0;
}
.post-hero__author-name { font-family: var(--font-sans); font-size: 14px; font-weight: 500; color: var(--text-primary); }
.post-hero__author-role { font-family: var(--font-mono); font-size: 11px; color: var(--text-subtle); letter-spacing: 0.01em; }
.post-hero__share { margin-left: auto; display: flex; gap: var(--space-2); }
.share-btn {
  padding: 6px 12px;
  border: 0.5px solid var(--border);
  border-radius: var(--radius-full);
  font-family: var(--font-mono); font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.01em;
  transition: color 120ms ease, border-color 120ms ease;
}
.share-btn:hover { color: var(--text-primary); border-color: var(--border-strong); }

/* --- Article body --------------------------------------------------- */
.article-body {
  padding: var(--space-9) 0;
}
.article-content {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 var(--space-5);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.7;
  color: var(--text-secondary);
}
.article-content p { margin: 0 0 var(--space-5); color: var(--text-secondary); }
.article-content > p:last-child, .article-content > div:last-child > p:last-child { margin-bottom: 0; }
.article-content ul, .article-content ol, .article-content blockquote, .article-content figure, .article-content pre, .article-content table { margin: var(--space-5) 0; }
.article-content h2 {
  font-family: var(--font-sans);
  font-size: clamp(24px, 3vw, 30px);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  margin: var(--space-8) 0 var(--space-4);
  max-width: none;
}
.article-content h3 {
  font-family: var(--font-sans);
  font-size: 20px; font-weight: 500;
  color: var(--text-primary);
  margin: var(--space-7) 0 var(--space-3);
  letter-spacing: -0.005em;
}
.article-content h4 {
  font-family: var(--font-mono);
  font-size: 13px; font-weight: 400;
  color: var(--accent-signal);
  letter-spacing: 0.01em;
  margin: var(--space-6) 0 var(--space-3);
  text-transform: lowercase;
}
.article-content strong, .article-content b { color: var(--text-primary); font-weight: 500; }
.article-content em, .article-content i { font-style: italic; }
.article-content a {
  color: var(--accent-link);
  border-bottom: 0.5px solid currentColor;
}
.article-content a:hover { color: var(--text-primary); }
.article-content blockquote {
  border-left: 2px solid var(--accent-signal);
  padding: var(--space-3) var(--space-5);
  font-style: italic;
  color: var(--text-secondary);
  margin: var(--space-6) 0;
  background: var(--canvas-deep);
}
.article-content ul, .article-content ol {
  padding-left: var(--space-5);
  display: grid; gap: var(--space-2);
}
.article-content ul li, .article-content ol li {
  color: var(--text-secondary);
  line-height: 1.65;
}
.article-content code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--canvas-deep);
  padding: 2px 6px;
  border-radius: 4px;
  color: var(--accent-signal);
  border: 0.5px solid var(--border);
}
.article-content pre {
  background: var(--canvas-deep);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.6;
}
.article-content pre code {
  background: transparent;
  border: 0;
  padding: 0;
  color: var(--text-secondary);
}
.article-content img, .article-content video {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  border: 0.5px solid var(--border);
}
.article-content figure {
  margin: var(--space-6) 0;
}
.article-content figcaption {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-subtle);
  margin-top: var(--space-2);
  text-align: center;
}
.article-content hr {
  border: 0;
  border-top: 0.5px solid var(--border);
  margin: var(--space-7) auto;
  max-width: 100px;
}
.article-content table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--space-5) 0;
  font-size: 14px;
}
.article-content th, .article-content td {
  text-align: left;
  padding: var(--space-3) var(--space-4);
  border-bottom: 0.5px solid var(--border);
  vertical-align: top;
}
.article-content th { color: var(--text-primary); font-weight: 500; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.01em; }

/* --- Common imported decorations ------------------------------------ */
.stat-callout {
  display: grid;
  gap: var(--space-5);
  padding: var(--space-6);
  background: var(--canvas-deep);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-lg);
  margin: var(--space-6) 0;
}
.stat-callout__item { display: flex; flex-direction: column; gap: var(--space-2); }
.stat-callout__val {
  font-family: var(--font-sans);
  font-size: clamp(40px, 5vw, 56px);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--accent-signal);
  line-height: 1;
}
.stat-callout__val span { color: var(--text-subtle); font-size: 0.5em; vertical-align: 0.4em; margin-left: 4px; }
.stat-callout__label {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-muted);
  letter-spacing: 0.01em;
  line-height: 1.5;
}
.reveal { opacity: 1; }  /* short-circuit any inherited animation hides */

/* --- Related posts strip ------------------------------------------- */
.related-posts {
  padding: var(--space-9) 0;
  border-top: 0.5px solid var(--border);
  background: var(--canvas-deep);
}
.related-posts__header {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: var(--space-6);
  flex-wrap: wrap; gap: var(--space-3);
}
.related-posts__header h2 {
  font-family: var(--font-sans);
  font-size: clamp(22px, 3vw, 28px);
  font-weight: 500;
  color: var(--text-primary);
  margin: 0;
}
.related-posts__all {
  font-family: var(--font-mono); font-size: 12px;
  color: var(--accent-link); letter-spacing: 0.01em;
}
.related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}
@media (max-width: 768px) {
  .related-grid { grid-template-columns: 1fr; }
  .post-hero__share { margin-left: 0; width: 100%; }
}
.related-card {
  background: var(--canvas);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  display: flex; flex-direction: column;
  min-height: 180px;
  transition: border-color 120ms ease, background 120ms ease;
  color: inherit;
}
.related-card:hover { border-color: var(--border-strong); background: var(--surface-elevated); }
.related-card__meta {
  font-family: var(--font-mono); font-size: 11px; color: var(--text-subtle);
  margin-bottom: var(--space-3); letter-spacing: 0.01em;
}
.related-card__title {
  font-family: var(--font-sans);
  font-size: 17px; font-weight: 500;
  color: var(--text-primary);
  line-height: 1.3;
  margin: 0 0 var(--space-3);
}
.related-card__footer {
  margin-top: auto;
  display: flex; justify-content: space-between;
  font-family: var(--font-mono); font-size: 11px;
  color: var(--text-subtle); letter-spacing: 0.01em;
}

/* =========================================================
   Imported-post decorations — scoped under .article-content.
   The original blog HTML carries lots of inline classes; we
   re-style them with the site's design tokens instead of
   pulling each post's own CSS verbatim.
   ========================================================= */
.article-content .t-label {
  font-family: var(--font-mono); font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--accent-signal);
  margin: var(--space-7) 0 var(--space-3);
  display: block;
}
.article-content .t-h2 {
  font-family: var(--font-sans);
  font-size: clamp(24px, 3vw, 30px);
  font-weight: 500; line-height: 1.2;
  color: var(--text-primary);
  margin: var(--space-8) 0 var(--space-4);
}
.article-content .t-h2 em { color: var(--accent-signal); font-style: italic; }
.article-content .t-body {
  font-size: 15px; line-height: 1.7; color: var(--text-secondary);
}

/* TL;DR / section summary */
.article-content .section-tldr {
  border-left: 2px solid var(--accent-signal);
  padding: var(--space-3) var(--space-5);
  margin: var(--space-6) 0;
  background: var(--canvas-deep);
  font-size: 15px; line-height: 1.6; color: var(--text-secondary);
}
.article-content .section-tldr strong { color: var(--accent-signal); font-weight: 500; }

/* Pull quote */
.article-content .pullquote {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(20px, 2.5vw, 26px);
  line-height: 1.4;
  color: var(--text-primary);
  border-left: 2px solid var(--accent-signal);
  padding: var(--space-4) var(--space-6);
  margin: var(--space-7) 0;
  max-width: 640px;
}

/* SDLC-style annotated tables */
.article-content .sdlc-table-wrap {
  margin: var(--space-7) 0;
  overflow-x: auto;
}
.article-content .sdlc-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--canvas-deep);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-lg);
  font-size: 14px;
}
.article-content .sdlc-table th,
.article-content .sdlc-table td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 0.5px solid var(--border);
  vertical-align: top;
  text-align: left;
}
.article-content .sdlc-table th {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--accent-signal);
  background: var(--canvas);
}
.article-content .sdlc-table tbody tr:last-child td { border-bottom: 0; }
.article-content .sdlc-table__caption {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--text-subtle);
  margin-top: var(--space-2);
  display: block;
  letter-spacing: 0.01em;
}

/* Stat-callout already styled — augment for grid layouts */
.article-content .stat-callout {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-5);
  padding: var(--space-6);
  background: var(--canvas-deep);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-lg);
  margin: var(--space-6) 0;
}
.article-content .stat-callout__item small {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-subtle);
  display: block;
  margin-top: var(--space-2);
  line-height: 1.5;
}
.article-content .stat-callout__item small a { color: var(--text-muted); border-bottom: 0.5px solid var(--border); }

/* Inline CTA / source notes */
.article-content .inline-cta,
.article-content .source-note {
  background: var(--canvas-deep);
  border: 0.5px solid var(--border);
  border-left: 2px solid var(--accent-link);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  padding: var(--space-5);
  margin: var(--space-6) 0;
  font-size: 14px; line-height: 1.6;
  color: var(--text-secondary);
}
.article-content .inline-cta__label {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--accent-link);
  letter-spacing: 0.01em;
  margin-bottom: var(--space-2);
  display: block;
}

/* FAQ items inside a post body */
.article-content .faq-section { margin: var(--space-7) 0; }
.article-content .faq-inner { display: grid; gap: var(--space-3); }
.article-content .faq-item {
  background: var(--canvas-deep);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
}
.article-content .faq-question {
  font-family: var(--font-sans);
  font-size: 16px; font-weight: 500;
  color: var(--text-primary);
  margin: 0 0 var(--space-2);
  cursor: pointer;
}
.article-content .faq-answer {
  font-size: 14px; line-height: 1.65;
  color: var(--text-muted);
}

/* Author bio at end of post */
.article-content .author-bio {
  margin: var(--space-8) 0 var(--space-6);
  padding: var(--space-6);
  background: var(--canvas-deep);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-lg);
}
.article-content .author-bio__inner { display: flex; flex-direction: column; gap: var(--space-3); }
.article-content .author-bio__label {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--text-subtle); letter-spacing: 0.01em;
}
.article-content .author-bio__name {
  font-family: var(--font-sans); font-size: 18px; font-weight: 500;
  color: var(--text-primary);
}
.article-content .author-bio__role {
  font-family: var(--font-mono); font-size: 12px;
  color: var(--accent-signal); letter-spacing: 0.01em;
}
.article-content .author-bio__text {
  font-size: 14px; line-height: 1.65; color: var(--text-secondary);
}
.article-content .author-bio__links {
  display: flex; gap: var(--space-3); flex-wrap: wrap;
  font-family: var(--font-mono); font-size: 12px;
}
.article-content .author-bio__links a { color: var(--accent-link); }

/* Article divider */
.article-content .article-divider {
  border: 0; border-top: 0.5px solid var(--border);
  margin: var(--space-8) auto;
  max-width: 120px;
}

/* Wide wrap (breaks out of article-content max-width slightly) */
.article-content .article-wide-wrap {
  max-width: none;
  margin: var(--space-6) calc(-1 * var(--space-5));
}

/* CTA section at end */
.article-content .cta-section {
  margin: var(--space-9) 0 var(--space-6);
  padding: var(--space-7);
  background: var(--canvas-deep);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-lg);
}
.article-content .cta-inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-5);
  align-items: center;
}
@media (max-width: 768px) { .article-content .cta-inner { grid-template-columns: 1fr; } }
.article-content .cta-left h3 {
  margin: 0 0 var(--space-2); font-size: 22px; color: var(--text-primary);
}
.article-content .cta-left p { margin: 0; color: var(--text-muted); font-size: 14px; }

/* Newsletter / loop-diagram — minimal styling so they don't look broken */
.article-content .newsletter,
.article-content .loop-diagram {
  display: block;
  padding: var(--space-5);
  background: var(--canvas-deep);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-lg);
  margin: var(--space-6) 0;
}
.article-content .loop-diagram { display: flex; justify-content: center; gap: var(--space-3); flex-wrap: wrap; }
.article-content .loop-node {
  display: inline-flex; flex-direction: column; align-items: center; gap: var(--space-2);
  font-family: var(--font-mono); font-size: 12px; color: var(--text-secondary);
}
.article-content .loop-node__circle {
  width: 60px; height: 60px;
  border: 0.5px solid var(--border);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--canvas);
  color: var(--accent-signal);
  font-family: var(--font-mono); font-size: 11px;
}
.article-content .loop-arrow,
.article-content .loop-return { color: var(--accent-signal); font-family: var(--font-mono); align-self: center; }

/* `.reveal` opacity reset already added — keep below */
.article-content .reveal { opacity: 1; transform: none; }

/* =========================================================
   ABOUT PAGE — layout classes (numbers, story, flywheel,
   pizza-team, philosophy). Mirrors specshop-about.html.
   ========================================================= */

/* Shared two-column */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); align-items: start; }
@media (max-width: 900px) { .two-col { grid-template-columns: 1fr; gap: var(--space-6); } }

/* Numbers strip */
.numbers { border-top: 0.5px solid var(--border); border-bottom: 0.5px solid var(--border); background: var(--canvas-deep); }
.numbers__grid { display: grid; grid-template-columns: repeat(5, 1fr); }
.num-item { padding: var(--space-6) var(--space-5); text-align: center; border-right: 0.5px solid var(--border); }
.num-item:last-child { border-right: none; }
.num-item__val { font-family: var(--font-sans); font-size: 32px; font-weight: 500; color: var(--text-primary); line-height: 1; margin-bottom: 8px; letter-spacing: -0.01em; }
.num-item__label { font-family: var(--font-mono); font-size: 11px; color: var(--text-subtle); }
@media (max-width: 900px) {
  .numbers__grid { grid-template-columns: repeat(3, 1fr); }
  .num-item:nth-child(3) { border-right: none; }
  .num-item:nth-child(n+4) { border-top: 0.5px solid var(--border); }
}
@media (max-width: 600px) {
  .numbers__grid { grid-template-columns: repeat(2, 1fr); }
  .num-item { border-right: 0.5px solid var(--border) !important; }
  .num-item:nth-child(2n) { border-right: none !important; }
  .num-item:nth-child(n+3) { border-top: 0.5px solid var(--border); }
}

/* Story + timeline */
.story { border-bottom: 0.5px solid var(--border); padding: var(--space-9) 0; }
.story__inner { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); }
@media (max-width: 900px) { .story__inner { grid-template-columns: 1fr; gap: var(--space-7); } }
.story__pull { font-family: var(--font-serif); font-style: italic; font-size: 22px; line-height: 1.4; color: var(--text-primary); margin: 0 0 var(--space-5); padding-bottom: var(--space-5); border-bottom: 0.5px solid var(--border); }
.story__pull em { font-style: italic; color: var(--accent-signal); font-family: var(--font-mono); font-size: 18px; }
.story p + p { margin-top: var(--space-4); }

.timeline { display: flex; flex-direction: column; border: 0.5px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.t-item { display: grid; grid-template-columns: 88px 1fr; border-bottom: 0.5px solid var(--border); transition: background 120ms ease; }
.t-item:last-child { border-bottom: none; }
.t-item:hover { background: var(--surface-elevated); }
.t-item__year { padding: 18px 16px; border-right: 0.5px solid var(--border); font-family: var(--font-mono); font-size: 12px; color: var(--text-subtle); }
.t-item.highlight .t-item__year { color: var(--accent-signal); }
.t-item__body { padding: 18px 20px; }
.t-item__title { font-size: 14px; font-weight: 500; color: var(--text-primary); margin-bottom: 4px; }
.t-item__desc { font-size: 13px; color: var(--text-muted); line-height: 1.55; }

/* Quote card (pizza team) */
.quote-card { background: var(--canvas-deep); border: 0.5px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-5); }
.quote-card__label { font-family: var(--font-mono); font-size: 11px; color: var(--accent-signal); margin-bottom: var(--space-3); }
.quote-card__text { font-family: var(--font-serif); font-style: italic; font-size: 20px; line-height: 1.4; color: var(--text-primary); margin: 0; }
.quote-card__text em { color: var(--accent-signal); font-style: italic; }

/* Flywheel — 4 offer cards */
.flywheel { border-bottom: 0.5px solid var(--border); background: var(--canvas-deep); padding: var(--space-9) 0; }
.flywheel__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border: 0.5px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; margin-top: var(--space-7); }
@media (max-width: 900px) { .flywheel__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .flywheel__grid { grid-template-columns: 1fr; } }
.fw-card { padding: var(--space-5); border-right: 0.5px solid var(--border); background: var(--canvas); transition: background 120ms ease; }
.fw-card:last-child { border-right: none; }
.fw-card:hover { background: var(--surface-elevated); }
@media (max-width: 900px) {
  .fw-card:nth-child(2n) { border-right: none; }
  .fw-card:nth-child(n+3) { border-top: 0.5px solid var(--border); }
}
@media (max-width: 600px) {
  .fw-card { border-right: none; border-bottom: 0.5px solid var(--border); }
  .fw-card:last-child { border-bottom: none; }
}
.fw-card__label { font-family: var(--font-mono); font-size: 12px; color: var(--text-subtle); margin-bottom: var(--space-3); }
.fw-card__label .num { color: var(--accent-signal); }
.fw-card__title { font-size: 16px; font-weight: 500; color: var(--text-primary); margin: 0 0 var(--space-2); }
.fw-card__desc { font-size: 13px; color: var(--text-muted); line-height: 1.6; margin: 0 0 var(--space-4); }
.fw-card__link { font-family: var(--font-mono); font-size: 12px; color: var(--accent-link); }
.fw-card__link:hover { text-decoration: underline; }

/* Philosophy — 6 cards in 3-col grid */
.philosophy { border-bottom: 0.5px solid var(--border); padding: var(--space-9) 0; }
.philosophy__grid { display: grid; grid-template-columns: repeat(3, 1fr); border: 0.5px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; margin-top: var(--space-7); }
@media (max-width: 900px) { .philosophy__grid { grid-template-columns: 1fr; } }
.phil-card { padding: var(--space-5); border-right: 0.5px solid var(--border); background: var(--canvas); transition: background 120ms ease; }
.phil-card:nth-child(3n) { border-right: none; }
.phil-card:nth-child(n+4) { border-top: 0.5px solid var(--border); }
@media (max-width: 900px) {
  .phil-card { border-right: none; border-bottom: 0.5px solid var(--border); }
  .phil-card:last-child { border-bottom: none; }
  .phil-card:nth-child(n+4) { border-top: none; }
}
.phil-card:hover { background: var(--surface-elevated); }
.phil-card__num { font-family: var(--font-mono); font-size: 12px; color: var(--text-subtle); margin-bottom: var(--space-3); }
.phil-card__num .n { color: var(--accent-signal); }
.phil-card h3 { font-size: 15px; font-weight: 500; color: var(--text-primary); margin: 0 0 var(--space-2); }
.phil-card p { font-size: 13px; color: var(--text-muted); line-height: 1.6; margin: 0; }

/* Shared typography helpers */
.section-label { font-family: var(--font-mono); font-size: 11px; color: var(--text-subtle); margin-bottom: var(--space-5); }
.t-h2 { font-family: var(--font-sans); font-size: 28px; font-weight: 500; line-height: 1.2; letter-spacing: -0.01em; color: var(--text-primary); }
.t-body { font-size: 15px; line-height: 1.6; color: var(--text-secondary); }
.serif-accent { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--text-subtle); }