/* ─── Reset + base ─────────────────────────────────────────── */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      /* tier data colors (semantics preserved across redesign) */
      --thinking:       #7C3AED;
      --thinking-dim:   #7C3AED1a;
      --worker:         #14B8A6;
      --worker-dim:     #14B8A61a;
      --memory:         #F59E0B;
      --security:       #EF4444;
      --git:            #3B82F6;
      --accent:         #E8470F;

      /* brutalist surfaces */
      --paper:          #F4F1E8;
      --paper-2:        #ECE7D7;
      --card:           #FBFAF4;
      --ink:            #14110C;
      --muted:          #6B6456;
      --panel:          #0E1422;   /* inverted dark panel for schematics + terminals */

      /* aliases so existing inline styles + class rules resolve */
      --bg-start:       #F4F1E8;
      --bg-end:         #ECE7D7;
      --text-primary:   #14110C;
      --text-secondary: #6B6456;
      --border:         #14110C;
      --border-faint:   #C9C2AE;
      --surface:        #FBFAF4;
      --surface-raised: #ECE7D7;

      --line:           2px solid var(--ink);
      --line-hair:      1px solid var(--border-faint);
      --shadow:         5px 5px 0 var(--ink);
      --shadow-sm:      3px 3px 0 var(--ink);

      --font-display: 'Space Grotesk', system-ui, sans-serif;
      --font-sans: 'Space Grotesk', system-ui, -apple-system, sans-serif;
      --font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', ui-monospace, monospace;

      --max-w: 76rem;
      --section-gap: 6rem;
      --col-gap: 2rem;
    }

    html { scroll-behavior: smooth; }

    body {
      background: var(--paper);
      background-image:
        linear-gradient(var(--paper-2) 1px, transparent 1px),
        linear-gradient(90deg, var(--paper-2) 1px, transparent 1px);
      background-size: 28px 28px;
      background-position: -1px -1px;
      color: var(--ink);
      font-family: var(--font-sans);
      font-size: 1rem;
      line-height: 1.6;
      min-height: 100vh;
      overflow-x: clip;
      -webkit-font-smoothing: antialiased;
    }

    /* Skip link (keyboard / screen-reader accessibility) */
    .skip-link {
      position: absolute;
      left: 0.5rem;
      top: -3rem;
      z-index: 100;
      background: var(--ink);
      color: var(--paper);
      font-family: var(--font-mono);
      font-size: 0.8125rem;
      padding: 0.5rem 0.9rem;
      border: 2px solid var(--accent);
      text-decoration: none;
      transition: top 0.15s;
    }
    .skip-link:focus { top: 0.5rem; background: var(--ink); color: var(--paper); }

    /* Respect reduced-motion preferences */
    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
      }
    }

    /* ─── Layout ────────────────────────────────────────────────── */
    .container {
      max-width: var(--max-w);
      margin: 0 auto;
      padding: 0 2rem;
    }

    section { padding-top: var(--section-gap); }

    .section-label {
      font-family: var(--font-mono);
      font-size: 0.6875rem;
      font-weight: 700;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--muted);
      margin-bottom: 1.25rem;
    }
    .section-label::before { content: "// "; color: var(--accent); }

    h2 {
      font-family: var(--font-display);
      font-size: clamp(1.7rem, 3.4vw, 2.4rem);
      font-weight: 700;
      letter-spacing: -0.025em;
      color: var(--ink);
      margin-bottom: 0.85rem;
      line-height: 1.08;
    }

    h3 {
      font-family: var(--font-display);
      font-size: 1.1rem;
      font-weight: 700;
      letter-spacing: -0.01em;
      color: var(--ink);
      margin-bottom: 0.25rem;
    }

    p {
      color: var(--muted);
      max-width: 60ch;
    }
    p + p { margin-top: 0.75rem; }

    a {
      color: var(--ink);
      text-decoration: underline;
      text-underline-offset: 3px;
      text-decoration-thickness: 2px;
      text-decoration-color: var(--accent);
      transition: background 0.12s, color 0.12s;
    }
    a:hover { background: var(--accent); color: var(--paper); text-decoration-color: var(--accent); }

    strong { color: var(--ink); font-weight: 700; }

    hr {
      border: none;
      border-top: var(--line);
      margin: 0;
    }

    code, .mono {
      font-family: var(--font-mono);
      font-size: 0.875em;
    }

    /* ─── Tier badges ────────────────────────────────────────────── */
    .badge-thinking, .badge-worker {
      display: inline-block;
      font-family: var(--font-mono);
      font-size: 0.6875rem;
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      border: 2px solid;
      padding: 0.1em 0.5em;
      line-height: 1.5;
    }
    .badge-thinking { color: var(--thinking); border-color: var(--thinking); }
    .badge-worker   { color: var(--worker);   border-color: var(--worker); }

    /* ─── Nav ───────────────────────────────────────────────────── */
    nav {
      position: sticky;
      top: 0;
      z-index: 50;
      background: var(--ink);
      border-bottom: var(--line);
    }

    .nav-inner {
      max-width: var(--max-w);
      margin: 0 auto;
      padding: 0 2rem;
      height: 3rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .nav-wordmark {
      font-family: var(--font-display);
      font-size: 1rem;
      font-weight: 700;
      letter-spacing: -0.02em;
      color: var(--paper);
      text-decoration: none;
    }
    .nav-wordmark:hover { background: none; color: var(--accent); }

    .nav-links {
      display: flex;
      align-items: center;
      gap: 1.5rem;
      list-style: none;
    }

    .nav-links a {
      font-family: var(--font-mono);
      font-size: 0.75rem;
      letter-spacing: 0.04em;
      color: #B8B2A0;
      text-decoration: none;
      transition: color 0.12s;
    }
    .nav-links a:hover { color: var(--paper); background: none; }

    /* ─── Hero ──────────────────────────────────────────────────── */
    #hero {
      padding-top: 0;
      min-height: 88vh;
      display: flex;
      align-items: center;
    }

    .hero-inner { padding: 5rem 0 4.5rem; width: 100%; }

    .hero-eyebrow {
      display: inline-block;
      font-family: var(--font-mono);
      font-size: 0.6875rem;
      font-weight: 700;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--ink);
      background: var(--card);
      border: var(--line);
      box-shadow: var(--shadow-sm);
      padding: 0.35rem 0.7rem;
      margin-bottom: 1.75rem;
    }

    .hero-wordmark {
      font-family: var(--font-display);
      font-size: clamp(4rem, 12vw, 9rem);
      font-weight: 700;
      letter-spacing: -0.05em;
      line-height: 0.86;
      color: var(--ink);
      margin-bottom: 1.75rem;
    }
    .hero-wordmark em {
      font-style: normal;
      color: var(--paper);
      background: var(--accent);
      box-shadow: var(--shadow);
      padding: 0 0.08em;
      margin-left: 0.04em;
    }

    .hero-positioning {
      font-family: var(--font-mono);
      font-size: clamp(0.95rem, 1.6vw, 1.1rem);
      color: var(--ink);
      max-width: 56ch;
      line-height: 1.65;
      border-left: 4px solid var(--ink);
      padding-left: 1.1rem;
      margin-bottom: 2.5rem;
    }

    .hero-ctas {
      display: flex;
      flex-wrap: wrap;
      align-items: stretch;
      gap: 1rem;
    }

    .cta-primary {
      display: flex;
      align-items: stretch;
      gap: 0;
      min-width: 0;
      max-width: 100%;
      background: var(--card);
      border: var(--line);
      box-shadow: var(--shadow);
      font-family: var(--font-mono);
      font-size: 0.8125rem;
      color: var(--ink);
      text-decoration: none;
      transition: transform 0.1s, box-shadow 0.1s;
    }
    .cta-primary:hover { background: var(--card); text-decoration: none; }
    .cta-primary > code,
    .cta-primary > #hero-cmd {
      display: flex;
      align-items: center;
      padding: 0.8rem 1.1rem;
      min-width: 0;
      overflow-x: auto;
      white-space: nowrap;
      -webkit-overflow-scrolling: touch;
    }

    .copy-btn {
      background: var(--ink);
      border: none;
      border-left: var(--line);
      cursor: pointer;
      padding: 0 1.1rem;
      color: var(--paper);
      font-size: 0.72rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      font-family: var(--font-mono);
      white-space: nowrap;
      transition: background 0.12s;
    }
    .copy-btn:hover { background: var(--accent); }
    .copy-btn[data-copied="true"] { background: var(--worker); color: var(--ink); }

    .cta-secondary {
      display: flex;
      align-items: center;
      font-family: var(--font-mono);
      font-size: 0.8125rem;
      font-weight: 700;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: var(--ink);
      text-decoration: none;
      background: var(--paper);
      border: var(--line);
      box-shadow: var(--shadow);
      padding: 0 1.4rem;
      transition: transform 0.1s, box-shadow 0.1s, background 0.1s, color 0.1s;
    }
    .cta-secondary:hover {
      transform: translate(-2px, -2px);
      box-shadow: 7px 7px 0 var(--ink);
      background: var(--ink);
      color: var(--paper);
      text-decoration: none;
    }

    .hero-chain-hint {
      margin-top: 3rem;
      max-width: none;
      white-space: nowrap;
      font-family: var(--font-mono);
      font-size: 0.8125rem;
      font-weight: 500;
      letter-spacing: 0.02em;
      color: var(--ink);
      border-top: var(--line-hair);
      padding-top: 1rem;
    }

    /* ─── Schematic panels (light brutalist SVG diagrams) ────────── */
    #chain .chain-diagram,
    .wr-diagram-wrap,
    .sp-diagram-wrap,
    .memory-diagram-wrap {
      margin-top: 2.5rem;
      background: var(--paper);
      border: var(--line);
      box-shadow: var(--shadow);
      padding: 1.75rem 1.5rem;
      overflow-x: auto;
    }

    .chain-svg-wrap  { width: 100%; min-width: 540px; }
    .wr-svg-wrap     { width: 100%; min-width: 560px; }
    .sp-svg-wrap     { width: 100%; min-width: 680px; }
    .memory-svg-wrap { width: 100%; min-width: 540px; }
    .pair-svg-wrap   {
      width: 100%;
      background: var(--paper);
      border: var(--line);
      padding: 0.75rem 1.25rem;
      overflow-x: auto;
    }

    .chain-caption {
      margin-top: 1.5rem;
      font-size: 0.9rem;
      color: var(--muted);
      max-width: 72ch;
    }
    .wr-explainer, .sp-explainer {
      margin-top: 1.75rem;
      max-width: 64ch;
      font-size: 0.9375rem;
      color: var(--muted);
      line-height: 1.6;
    }

    /* ─── Thinking / Worker split ────────────────────────────────── */
    #tiers .tiers-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1.5rem;
      margin-top: 2.5rem;
    }

    .tier-card {
      background: var(--card);
      border: var(--line);
      box-shadow: var(--shadow);
      padding: 1.6rem 1.5rem 1.8rem;
    }

    .tier-accent-bar {
      height: 6px !important;
      width: auto !important;
      margin: -1.6rem -1.5rem 1.25rem !important;
    }

    .tier-title {
      font-family: var(--font-display);
      font-size: 1.25rem;
      font-weight: 700;
      color: var(--ink);
      margin-bottom: 0.4rem;
    }

    .tier-models {
      font-family: var(--font-mono);
      font-size: 0.8125rem;
      color: var(--muted);
      margin-bottom: 1rem;
      padding-bottom: 1rem;
      border-bottom: var(--line-hair);
    }

    .tier-desc {
      font-size: 0.9rem;
      color: var(--ink);
      line-height: 1.6;
      max-width: 40ch;
    }

    .tier-roles {
      margin-top: 1.25rem;
      display: flex;
      flex-wrap: wrap;
      gap: 0.45rem;
    }

    .tier-role-chip {
      font-family: var(--font-mono);
      font-size: 0.6875rem;
      color: var(--ink);
      border: var(--line-hair);
      background: var(--paper);
      padding: 0.2em 0.55em;
    }

    .pairing-row {
      margin-top: 2.5rem;
      background: var(--card);
      border: var(--line);
      box-shadow: var(--shadow);
    }

    .pairing-inner { padding: 1.75rem 1.75rem 2rem; }

    .pairing-label {
      font-family: var(--font-mono);
      font-size: 0.75rem;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--muted);
      margin-bottom: 1rem;
    }

    /* ─── Bordered tables (skills, profiles, layers, memory) ─────── */
    .skills-intro, .layers-intro, .providers-intro,
    .install-intro, .profiles-intro, .personas-intro,
    .memory-intro, .fr-intro, .examples-intro {
      margin-top: 0.5rem;
      margin-bottom: 2.5rem;
    }

    .skills-table-wrap {
      border: var(--line);
      box-shadow: var(--shadow);
      overflow: hidden;
      background: var(--card);
    }

    table {
      width: 100%;
      border-collapse: collapse;
      font-size: 0.9rem;
    }

    thead tr {
      background: var(--paper-2);
      border-bottom: var(--line);
    }

    thead th {
      padding: 0.8rem 1.25rem;
      text-align: left;
      font-family: var(--font-mono);
      font-size: 0.6875rem;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--ink);
      white-space: nowrap;
    }

    tbody tr {
      border-bottom: var(--line-hair);
      background: var(--card);
      transition: background 0.1s;
    }
    tbody tr:last-child { border-bottom: none; }
    tbody tr:hover { background: var(--paper-2); }

    td {
      padding: 0.875rem 1.25rem;
      vertical-align: top;
      color: var(--muted);
    }
    td:first-child { color: var(--ink); }
    td code { color: var(--ink); font-size: 0.8rem; }

    .chain-badge {
      display: inline-block;
      font-family: var(--font-mono);
      font-size: 0.625rem;
      font-weight: 700;
      letter-spacing: 0.07em;
      text-transform: uppercase;
      border: 2px solid;
      padding: 0.12em 0.5em;
      line-height: 1.5;
      white-space: nowrap;
    }
    .chain-badge.starter    { color: var(--thinking); border-color: var(--thinking); }
    .chain-badge.endpoint   { color: var(--worker);   border-color: var(--worker); }
    .chain-badge.standalone { color: var(--muted);    border-color: var(--border-faint); }

    /* ─── Layers ─────────────────────────────────────────────────── */
    .layer-color-dot {
      display: inline-block;
      width: 9px;
      height: 9px;
      border-radius: 0;
      border: 1px solid var(--ink);
      margin-right: 0.55rem;
      vertical-align: middle;
      flex-shrink: 0;
    }

    td .layer-num {
      font-family: var(--font-mono);
      font-size: 0.8125rem;
      font-weight: 700;
      color: var(--ink);
    }

    /* ─── Providers ──────────────────────────────────────────────── */
    .providers-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1.25rem;
    }

    .provider-card {
      background: var(--card);
      border: var(--line);
      box-shadow: var(--shadow);
      padding: 1.5rem 1.5rem 1.75rem;
    }

    .provider-name {
      font-family: var(--font-mono);
      font-size: 0.9rem;
      font-weight: 700;
      color: var(--ink);
      margin-bottom: 1.25rem;
      padding-bottom: 0.75rem;
      border-bottom: var(--line-hair);
    }

    .provider-model-row {
      display: flex;
      align-items: center;
      gap: 0.65rem;
      margin-bottom: 0.7rem;
    }

    .provider-tier-label {
      font-size: 0.625rem;
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      min-width: 4.5rem;
      flex-shrink: 0;
      text-align: center;
    }

    .provider-model-name {
      font-family: var(--font-mono);
      font-size: 0.8125rem;
      color: var(--muted);
    }

    /* ─── Install ────────────────────────────────────────────────── */
    .install-block {
      border: var(--line);
      box-shadow: var(--shadow);
      overflow: hidden;
      margin-bottom: 1.75rem;
      background: var(--panel);
    }

    .install-block-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0.7rem 1.25rem;
      background: var(--paper-2);
      border-bottom: var(--line);
    }

    .install-block-title {
      font-family: var(--font-mono);
      font-size: 0.6875rem;
      font-weight: 700;
      letter-spacing: 0.09em;
      text-transform: uppercase;
      color: var(--ink);
    }
    .install-block-header .copy-btn {
      border: 2px solid var(--ink);
      background: var(--ink);
      color: var(--paper);
      padding: 0.25rem 0.7rem;
    }
    .install-block-header .copy-btn:hover { background: var(--accent); border-color: var(--accent); }
    .install-block-header .copy-btn[data-copied="true"] { background: var(--worker); border-color: var(--worker); color: var(--ink); }

    .install-code {
      padding: 1.25rem 1.5rem;
      background: var(--panel);
      font-family: var(--font-mono);
      font-size: 0.85rem;
      line-height: 1.75;
      color: #E2E8F0;
      overflow-x: auto;
    }
    .install-code .comment { color: #7C8696; }

    .install-note {
      font-size: 0.8125rem;
      color: var(--muted);
      margin-top: 1rem;
      line-height: 1.6;
    }

    /* ─── Personas ───────────────────────────────────────────────── */
    .persona-groups {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 1.25rem;
    }

    .persona-group {
      background: var(--card);
      border: var(--line);
      box-shadow: var(--shadow);
      padding: 1.4rem 1.4rem 1.6rem;
    }

    .persona-group-label {
      font-family: var(--font-mono);
      font-size: 0.625rem;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--muted);
      margin-bottom: 1rem;
      padding-bottom: 0.6rem;
      border-bottom: var(--line-hair);
    }

    .persona-chips { display: flex; flex-direction: column; gap: 0.4rem; }

    .persona-chip {
      font-family: var(--font-mono);
      font-size: 0.8rem;
      color: var(--ink);
      border: var(--line-hair);
      background: var(--paper);
      padding: 0.2em 0.55em;
      width: fit-content;
    }

    .personas-note, .profiles-note {
      margin-top: 1.5rem;
      font-size: 0.8125rem;
      color: var(--muted);
      max-width: 64ch;
    }

    /* ─── Memory auto-files ──────────────────────────────────────── */
    .memory-auto-files {
      margin-top: 2.5rem;
      border: var(--line);
      box-shadow: var(--shadow);
      overflow: hidden;
      background: var(--card);
    }

    .memory-auto-header {
      padding: 0.7rem 1.25rem;
      background: var(--paper-2);
      border-bottom: var(--line);
      font-family: var(--font-mono);
      font-size: 0.6875rem;
      font-weight: 700;
      letter-spacing: 0.09em;
      text-transform: uppercase;
      color: var(--ink);
    }

    /* ─── Failure recovery ───────────────────────────────────────── */
    .fr-policy {
      border: var(--line);
      box-shadow: var(--shadow);
      overflow: hidden;
      margin-bottom: 2rem;
      background: var(--panel);
    }

    .fr-policy-header {
      padding: 0.7rem 1.25rem;
      background: var(--paper-2);
      border-bottom: var(--line);
      font-family: var(--font-mono);
      font-size: 0.6875rem;
      font-weight: 700;
      letter-spacing: 0.09em;
      text-transform: uppercase;
      color: var(--ink);
    }

    .fr-status-block {
      padding: 1.25rem 1.5rem;
      background: var(--panel);
      font-family: var(--font-mono);
      font-size: 0.85rem;
      line-height: 2;
      overflow-x: auto;
    }
    .fr-retry    { color: var(--worker); }
    .fr-escalate { color: var(--thinking); }
    .fr-abort    { color: var(--security); }

    .fr-rule-list {
      border: var(--line);
      box-shadow: var(--shadow);
      overflow: hidden;
      background: var(--card);
    }

    .fr-rule {
      display: grid;
      grid-template-columns: 10rem 1fr;
      background: var(--card);
      border-bottom: var(--line-hair);
    }
    .fr-rule:last-child { border-bottom: none; }

    .fr-rule-name {
      padding: 0.9rem 1.25rem;
      font-family: var(--font-mono);
      font-size: 0.8125rem;
      font-weight: 700;
      color: var(--ink);
      border-right: var(--line-hair);
    }

    .fr-rule-desc {
      padding: 0.9rem 1.25rem;
      font-size: 0.875rem;
      color: var(--muted);
      line-height: 1.55;
    }

    /* ─── Examples ───────────────────────────────────────────────── */
    .examples-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1.5rem;
    }

    .example-card {
      border: var(--line);
      box-shadow: var(--shadow);
      overflow: hidden;
      background: var(--panel);
    }

    .example-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0.7rem 1.25rem;
      background: var(--paper-2);
      border-bottom: var(--line);
    }

    .example-title {
      font-family: var(--font-mono);
      font-size: 0.6875rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--ink);
    }

    .example-profile-badge {
      font-family: var(--font-mono);
      font-size: 0.6rem;
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      border: 2px solid var(--ink);
      padding: 0.12em 0.5em;
      color: var(--ink);
    }

    .example-body {
      padding: 1.25rem 1.5rem;
      background: var(--panel);
      font-family: var(--font-mono);
      font-size: 0.8rem;
      line-height: 1.85;
      color: #B8C0CC;
      overflow-x: auto;
    }
    .ex-thinking { color: var(--thinking); font-weight: 700; }
    .ex-worker   { color: var(--worker); }
    .ex-dim      { color: #7C8696; }
    .ex-cmd      { color: #F8FAFC; }

    /* ─── Footer ─────────────────────────────────────────────────── */
    footer {
      margin-top: var(--section-gap);
      border-top: var(--line);
      background: var(--ink);
      padding: 2.25rem 0 2.5rem;
    }

    .footer-inner {
      max-width: var(--max-w);
      margin: 0 auto;
      padding: 0 2rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 1rem;
    }

    .footer-left { display: flex; align-items: center; gap: 2rem; flex-wrap: wrap; }

    .footer-wordmark {
      font-family: var(--font-display);
      font-weight: 700;
      letter-spacing: -0.02em;
      color: var(--paper);
      font-size: 0.9375rem;
      text-decoration: none;
    }
    .footer-wordmark:hover { color: var(--accent); background: none; }

    .footer-meta {
      font-family: var(--font-mono);
      font-size: 0.75rem;
      color: #B8B2A0;
    }

    .footer-links { display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; }

    .footer-links a {
      font-family: var(--font-mono);
      font-size: 0.75rem;
      color: #B8B2A0;
      text-decoration: none;
      transition: color 0.12s;
    }
    .footer-links a:hover { color: var(--paper); background: none; }

    /* ─── Responsive ─────────────────────────────────────────────── */
    @media (max-width: 900px) {
      :root { --section-gap: 5rem; }
      #tiers .tiers-grid { grid-template-columns: 1fr; }
      .providers-grid { grid-template-columns: 1fr; }
      .persona-groups { grid-template-columns: repeat(2, 1fr); }
      .examples-grid { grid-template-columns: 1fr; }
      .nav-links { display: none; }
    }

    @media (max-width: 640px) {
      :root { --section-gap: 4rem; }
      .container { padding: 0 1.25rem; }
      .nav-inner { padding: 0 1.25rem; }
      .footer-inner { padding: 0 1.25rem; flex-direction: column; align-items: flex-start; }
      .persona-groups { grid-template-columns: 1fr; }
      .hero-wordmark { font-size: clamp(3rem, 14vw, 4.5rem); }
      .hero-chain-hint { font-size: 0.75rem; white-space: normal; }
      thead th, td { padding: 0.7rem 1rem; }
      td { font-size: 0.8375rem; }
      .install-code, .example-body { font-size: 0.775rem; }
      .fr-rule { grid-template-columns: 1fr; }
      .fr-rule-name { border-right: none; border-bottom: var(--line-hair); }

      /* Install command: wrap to multiple lines instead of horizontal scroll */
      .hero-ctas { flex-direction: column; align-items: stretch; }
      .cta-primary { flex-wrap: wrap; }
      .cta-primary > code,
      .cta-primary > #hero-cmd {
        white-space: normal;
        overflow-x: visible;
        overflow-wrap: anywhere;
        word-break: break-word;
        font-size: 0.8rem;
        line-height: 1.5;
        flex: 1 1 100%;
      }
      .cta-primary .copy-btn { flex: 1 1 100%; border-left: none; border-top: var(--line); padding: 0.55rem; }
      .cta-secondary { justify-content: center; padding: 0.75rem 1.4rem; }

      /* Diagrams scale to fit the screen instead of scrolling horizontally */
      .chain-svg-wrap, .wr-svg-wrap, .sp-svg-wrap, .memory-svg-wrap, .pair-svg-wrap { min-width: 0; }
      #chain .chain-diagram, .wr-diagram-wrap, .sp-diagram-wrap, .memory-diagram-wrap,
      .pair-svg-wrap { overflow-x: hidden; padding: 1rem; }
      /* Wide tables may still scroll inside their own bordered box (never the page) */
      .skills-table-wrap { overflow-x: auto; }
    }

    @media (max-width: 420px) {
      .hero-ctas { flex-direction: column; align-items: stretch; }
      .cta-secondary { justify-content: center; padding: 0.75rem 1.4rem; }
    }

    /* ─── Focus styles (a11y) ────────────────────────────────────── */
    :focus-visible {
      outline: 3px solid var(--accent);
      outline-offset: 2px;
    }