:root {
    --bg: #f7f8fa;
    --surface: #ffffff;
    --surface-alt: #f2f4f7;
    --text: #0b1220;
    --text-muted: #5b6476;
    --text-faint: #9aa3b2;
    --border: #e4e7ec;
    --border-strong: #cbd2db;
    --accent: #2f5eff;
    --accent-light: #e5ecff;
    --accent-dark: #1c3ecb;
    --revenue: #0e8a4a;
    --revenue-light: #d8f2e3;
    --twin: #7c3aed;
    --twin-light: #ede4ff;
    --warn: #b4690e;
    --warn-light: #fef3e0;
    --danger: #dc2626;
    --shadow-sm: 0 1px 2px rgba(11, 18, 32, 0.05);
    --shadow-md: 0 6px 16px rgba(11, 18, 32, 0.06);
    --shadow-lg: 0 20px 48px rgba(11, 18, 32, 0.1);
  }

  * { margin: 0; padding: 0; box-sizing: border-box; }

  html { scrollbar-gutter: stable; }

  html, body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: var(--bg);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
  }

  .page {
    max-width: 1080px;
    margin: 0 auto;
    padding: 3rem 2.5rem 5rem;
  }
  @media (max-width: 760px) {
    .page { padding: 2rem 1.25rem 4rem; }
  }

  /* Back link */
  a.back {
    display: flex;
    width: fit-content;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    font-weight: 600;
    line-height: normal;
    color: var(--text-muted);
    text-decoration: none;
    margin-bottom: 2rem;
    transition: color 0.15s ease;
  }
  a.back:hover { color: var(--accent-dark); }

  /* Hero */
  .hero {
    display: flex; flex-direction: column; gap: 0.85rem;
    margin-bottom: 3rem; padding-bottom: 2rem;
    border-bottom: 1px solid var(--border);
  }
  .eyebrow {
    display: inline-flex; align-items: center; gap: 0.55rem;
    font-size: 0.68rem; font-weight: 800; color: var(--accent);
    letter-spacing: 0.14em; text-transform: uppercase;
  }
  .eyebrow::before {
    content: ""; width: 22px; height: 2px;
    background: var(--accent); border-radius: 2px;
  }
  .hero h1 {
    font-size: 2.65rem; font-weight: 900;
    letter-spacing: -0.035em; line-height: 1.05;
  }
  .hero h1 em { font-style: normal; color: var(--accent); }
  .hero-lede {
    font-size: 1.05rem; color: var(--text-muted);
    font-weight: 500; line-height: 1.6;
  }
  @media (max-width: 760px) { .hero h1 { font-size: 2rem; } }

  /* Numbered sections */
  section { margin-bottom: 3rem; }
  .section-header {
    display: flex; align-items: baseline; gap: 0.85rem;
    margin-bottom: 0.85rem;
  }
  .section-num {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.78rem; font-weight: 700;
    color: var(--text-faint); letter-spacing: 0.05em;
  }
  .section-header h2 {
    font-size: 1.55rem; font-weight: 800; letter-spacing: -0.02em;
  }
  .section-lede { color: var(--text-muted); font-size: 1rem; margin-bottom: 1.5rem; }
  section p { color: var(--text); font-size: 0.98rem; margin-bottom: 0.85rem; line-height: 1.6; }
  section p.muted { color: var(--text-muted); }

  /* Cards */
  .card {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 12px; padding: 1.15rem 1.25rem;
    box-shadow: var(--shadow-sm);
  }
  .card[data-tone="accent"]   { border-left: 3px solid var(--accent); }
  .card[data-tone="revenue"]  { border-left: 3px solid var(--revenue); }
  .card[data-tone="twin"]     { border-left: 3px solid var(--twin); }
  .card[data-tone="warn"]     { border-left: 3px solid var(--warn); }
  .card[data-tone="danger"]   { border-left: 3px solid var(--danger); }

  .card-eyebrow {
    font-size: 0.62rem; font-weight: 800;
    letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--text-faint); margin-bottom: 0.4rem;
  }
  .card[data-tone="accent"]  .card-eyebrow { color: var(--accent); }
  .card[data-tone="revenue"] .card-eyebrow { color: var(--revenue); }
  .card[data-tone="twin"]    .card-eyebrow { color: var(--twin); }
  .card[data-tone="warn"]    .card-eyebrow { color: var(--warn); }
  .card[data-tone="danger"]  .card-eyebrow { color: var(--danger); }

  .card h3 { font-size: 1rem; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 0.45rem; }
  .card p  { font-size: 0.9rem; color: var(--text-muted); line-height: 1.5; margin-bottom: 0; }

  /* Grid wrappers */
  .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
  .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
  @media (max-width: 760px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } }

  /* Callout */
  .callout {
    background: var(--accent-light); border: 1px solid #cbd9ff;
    border-left: 4px solid var(--accent);
    border-radius: 10px; padding: 1.1rem 1.25rem; margin-top: 1rem;
  }
  .callout[data-tone="warn"] {
    background: var(--warn-light); border-color: #f0d9a3;
    border-left-color: var(--warn);
  }
  .callout-title {
    font-size: 0.72rem; font-weight: 800;
    letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--accent-dark); margin-bottom: 0.4rem;
  }
  .callout[data-tone="warn"] .callout-title { color: var(--warn); }
  .callout p { font-size: 0.95rem; color: var(--text); margin-bottom: 0; }
  .callout p + p { margin-top: 0.5rem; }

  /* Numbered steps */
  .steps { counter-reset: step; display: flex; flex-direction: column; gap: 0.85rem; }
  .step {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 10px; padding: 1rem 1.25rem 1rem 3.5rem;
    position: relative; box-shadow: var(--shadow-sm);
  }
  .step::before {
    counter-increment: step; content: counter(step);
    position: absolute; left: 1rem; top: 1rem;
    width: 1.85rem; height: 1.85rem;
    background: var(--accent); color: white; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.82rem; font-weight: 700;
  }
  .step h3 { font-size: 1rem; font-weight: 700; margin-bottom: 0.3rem; }
  .step p  { font-size: 0.92rem; color: var(--text-muted); margin-bottom: 0; }
  .step p + p { margin-top: 0.5rem; }

  /* Decision / comparison table */
  .decide {
    width: 100%; border-collapse: collapse;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 12px; overflow: hidden; font-size: 0.92rem;
  }
  .decide th, .decide td {
    text-align: left; padding: 0.85rem 1rem; vertical-align: top;
    border-bottom: 1px solid var(--border);
  }
  .decide tr:last-child td { border-bottom: none; }
  .decide th {
    background: var(--surface-alt); font-weight: 700;
    font-size: 0.75rem; text-transform: uppercase;
    letter-spacing: 0.08em; color: var(--text-faint);
  }
  .decide td:first-child { font-weight: 600; color: var(--text); width: 30%; }
  .decide td.muted { color: var(--text-muted); }
  .decide code.mono { font-size: 0.82em; }

  /* Code */
  code.mono, pre.mono { font-family: 'JetBrains Mono', monospace; }
  code.mono {
    font-size: 0.88em; background: var(--surface);
    border: 1px solid var(--border); border-radius: 4px;
    padding: 0.08rem 0.32rem;
  }
  pre.mono {
    background: #0b1220; color: #e6edff;
    border-radius: 10px; padding: 1rem 1.15rem;
    font-size: 0.85rem; line-height: 1.55;
    overflow-x: auto; margin: 0.85rem 0;
  }
  pre.mono .c { color: #6c7a96; }
  pre.mono .k { color: #8ab4ff; }

  /* Plain list */
  ul.plain { list-style: none; padding: 0; margin: 0; }
  ul.plain li {
    position: relative; padding-left: 1.25rem;
    margin-bottom: 0.5rem; font-size: 0.95rem; color: var(--text);
  }
  ul.plain li::before {
    content: "\2022"; position: absolute; left: 0.25rem;
    color: var(--accent); font-weight: 700;
  }

  /* Next-link card */
  a.next {
    display: block; background: var(--surface);
    border: 1px solid var(--border); border-left: 4px solid var(--twin);
    border-radius: 12px; padding: 1.25rem 1.5rem;
    text-decoration: none; color: inherit;
    box-shadow: var(--shadow-sm);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    margin-top: 1.5rem;
  }
  a.next:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
  .next-eyebrow {
    font-size: 0.65rem; font-weight: 800;
    letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--twin); margin-bottom: 0.35rem;
  }
  a.next h3 { font-size: 1.1rem; font-weight: 800; letter-spacing: -0.015em; margin-bottom: 0.35rem; }
  a.next p  { font-size: 0.92rem; color: var(--text-muted); margin-bottom: 0; }
  .next-arrow { color: var(--twin); font-weight: 700; }