/* ============================================================
   Advanced Subscriptions for WooCommerce — design system
   Vanilla CSS · tokens + components · light/dark
   ============================================================ */

@layer reset, tokens, base, components, utilities;

/* docs landing & inline page bits */
.docs-section{border:1px solid var(--border);border-radius:var(--radius-lg);padding:28px;background:var(--bg);transition:border-color .2s}
.docs-section:hover{border-color:var(--ink-900)}
.docs-section-header{display:flex;gap:12px;align-items:center;margin-bottom:16px;padding-bottom:14px;border-bottom:1px solid var(--border)}
.docs-section-header svg{color:var(--brand-600);width:22px;height:22px}
.docs-section h3{font-size:18px;margin:0}
.docs-section ul{list-style:none;padding:0;display:grid;gap:8px}
.docs-section li a{color:var(--text);text-decoration:none;font-size:14px;display:block;padding:6px 0;border-bottom:1px solid transparent}
.docs-section li a:hover{color:var(--brand-600)}
.faq-item{border:1px solid var(--border);border-radius:var(--radius-md);padding:20px 24px;background:var(--bg)}
.faq-item summary{font-weight:600;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center}
.faq-item summary::after{content:"+";font-size:24px;font-weight:300;color:var(--text-muted)}
.faq-item[open] summary::after{content:"−"}
.faq-item p{margin-top:12px;color:var(--text-muted);font-size:15px}
.changelog-entry{border-top:1px solid var(--border);padding:48px 0}
.changelog-entry:first-child{border-top:0;padding-top:0}
.changelog-version{display:flex;gap:16px;align-items:baseline;margin-bottom:24px;flex-wrap:wrap}
.changelog-version h3{font-family:var(--font-mono);font-size:24px;margin:0}
.changelog-tag{padding:4px 10px;background:var(--brand-100);color:var(--brand-600);border-radius:999px;font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.changelog-tag-fix{background:rgba(31,138,76,0.1);color:var(--accent-success)}
.changelog-tag-breaking{background:rgba(164,37,47,0.08);color:var(--accent-danger)}
.changelog-list{list-style:none;display:grid;gap:8px;margin-top:8px}
.changelog-list li{padding-left:24px;position:relative;color:var(--text)}
.changelog-list li::before{content:"";position:absolute;left:0;top:.7em;width:8px;height:1px;background:var(--text-muted)}
.contact-form{display:grid;gap:20px;max-width:560px}
.contact-form label{display:grid;gap:6px;font-weight:500;font-size:14px}
.contact-form input,.contact-form textarea,.contact-form select{padding:12px 14px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg);font:inherit}
.contact-form textarea{resize:vertical;min-height:140px}
.contact-form input:focus,.contact-form textarea:focus,.contact-form select:focus{outline:2px solid var(--brand-600);outline-offset:2px;border-color:var(--brand-600)}
.contact-form .checkbox{display:flex;gap:10px;align-items:flex-start;font-size:14px;font-weight:400}
.contact-form .checkbox input{margin-top:2px;width:auto;flex-shrink:0}
.error-page{min-height:70vh;display:flex;flex-direction:column;justify-content:center;text-align:center;padding:96px 24px}
.error-code{font-family:var(--font-mono);font-size:96px;font-weight:600;letter-spacing:-0.04em;color:var(--brand-600);line-height:1}

/* ---------- RESET ---------- */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  body { line-height: 1.5; -webkit-font-smoothing: antialiased; }
  img, picture, svg, video { display: block; max-width: 100%; }
  input, button, textarea, select { font: inherit; color: inherit; }
  button { background: none; border: 0; cursor: pointer; padding: 0; }
  a { color: inherit; }
  ul, ol { padding: 0; }
  table { border-collapse: collapse; }
}

/* ---------- TOKENS ---------- */
@layer tokens {
  :root {
    /* brand + ink */
    --ink-900:#0B1320; --ink-800:#111A2E; --ink-700:#1A2540;
    --brand-600:#2540C7; --brand-500:#3A57E0; --brand-100:#E5EAFB;

    /* warm neutrals */
    --neutral-0:#FFFFFF; --neutral-50:#FAFAF7; --neutral-100:#F1F0EA;
    --neutral-200:#E4E2D9; --neutral-300:#B8B5A6;
    --neutral-500:#5C594F; --neutral-700:#2A2823;

    /* functional accents */
    --accent-success:#1F8A4C; --accent-warning:#B5651D;
    --accent-danger:#A4252F; --accent-highlight:#E8B500;

    /* spacing */
    --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
    --space-6:24px; --space-8:32px; --space-10:40px; --space-12:48px;
    --space-14:56px; --space-16:64px; --space-20:80px; --space-24:96px;
    --space-32:128px; --space-40:160px;

    /* radius */
    --radius-sm:6px; --radius-md:10px; --radius-lg:16px; --radius-xl:24px;

    /* typography */
    --font-display: "Inter Display","Inter",ui-sans-serif,system-ui,-apple-system,sans-serif;
    --font-body: "Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
    --font-serif: "Source Serif 4","Newsreader",Georgia,"Times New Roman",serif;
    --font-mono: "JetBrains Mono","IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

    /* type scale */
    --text-display-xl: clamp(44px, 6.5vw, 72px);
    --text-display-lg: clamp(36px, 5vw, 56px);
    --text-h1: clamp(32px, 4vw, 44px);
    --text-h2: clamp(26px, 2.6vw, 32px);
    --text-h3: clamp(20px, 1.8vw, 24px);
    --text-h4: 20px;
    --text-lead: clamp(18px, 1.5vw, 21px);
    --text-body: 17px;
    --text-body-sm: 15px;
    --text-caption: 13px;

    /* semantic surfaces (light) */
    --bg: var(--neutral-0);
    --bg-alt: var(--neutral-50);
    --surface: var(--neutral-100);
    --text: var(--ink-900);
    --text-muted: var(--neutral-500);
    --text-secondary: var(--neutral-700);
    --border: var(--neutral-200);
    --border-strong: var(--neutral-300);
    --brand: var(--brand-600);
    --brand-hover: var(--brand-500);

    /* misc */
    --container: 1280px;
    --container-narrow: 760px;
    --shadow-modal: 0 12px 32px -12px rgba(11,19,32,.18);
    --ease-out: cubic-bezier(.2,.8,.2,1);
    --ease-hover: cubic-bezier(.4,0,.2,1);
  }

  :root[data-theme="dark"] {
    --bg: var(--ink-900);
    --bg-alt: var(--ink-800);
    --surface: var(--ink-700);
    --text: #EDEAE0;
    --text-muted: #9A968A;
    --text-secondary: #C8C5B7;
    --border: #22304A;
    --border-strong: #2E3F5E;
    --brand: #7E94FF;
    --brand-hover: #98ACFF;
  }
}

/* ---------- BASE ---------- */
@layer base {
  html { font-family: var(--font-body); }
  body {
    background: var(--bg);
    color: var(--text);
    font-size: var(--text-body);
    line-height: 1.65;
    font-feature-settings: "ss01","cv11";
    text-rendering: optimizeLegibility;
  }

  h1,h2,h3,h4 {
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--text);
    text-wrap: balance;
  }
  h1 { font-size: var(--text-h1); line-height: 1.15; letter-spacing: -.015em; }
  h2 { font-size: var(--text-h2); line-height: 1.20; letter-spacing: -.012em; }
  h3 { font-size: var(--text-h3); line-height: 1.25; letter-spacing: -.008em; }
  h4 { font-size: var(--text-h4); line-height: 1.30; }

  p { text-wrap: pretty; }
  p, li { max-width: 68ch; }

  a { color: var(--brand); text-decoration-thickness: 1px; text-underline-offset: 3px; }
  a:hover { color: var(--brand-hover); }

  code, pre {
    font-family: var(--font-mono);
    font-size: var(--text-body-sm);
  }
  :not(pre) > code {
    background: var(--surface);
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid var(--border);
    font-size: .92em;
  }

  hr { border: 0; border-top: 1px solid var(--border); margin: var(--space-12) 0; }

  ::selection { background: var(--brand-100); color: var(--ink-900); }
  :root[data-theme="dark"] ::selection { background: rgba(126,148,255,.3); color:#fff; }

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

  /* skip link */
  .skip-link {
    position: absolute; top: -40px; left: 8px; z-index: 100;
    background: var(--ink-900); color: #fff; padding: 8px 14px;
    border-radius: var(--radius-sm); text-decoration: none;
  }
  .skip-link:focus { top: 8px; color:#fff; }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: .001ms !important;
      transition-duration: .001ms !important;
      scroll-behavior: auto !important;
    }
  }
}

/* ---------- COMPONENTS ---------- */
@layer components {

  /* container + grid */
  .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: 32px; }
  .container-narrow { width: 100%; max-width: var(--container-narrow); margin-inline: auto; padding-inline: 24px; }
  @media (max-width: 767px) {
    .container { padding-inline: 20px; }
    .container-narrow { padding-inline: 16px; }
  }

  section.section { padding-block: clamp(64px, 10vw, 128px); }
  .section-tight { padding-block: clamp(48px, 7vw, 80px); }

  .grid-2 { display: grid; gap: var(--space-8); grid-template-columns: 1fr; }
  .grid-3 { display: grid; gap: var(--space-6); grid-template-columns: 1fr; }
  .grid-4 { display: grid; gap: var(--space-6); grid-template-columns: 1fr; }
  @media (min-width: 768px) {
    .grid-2 { grid-template-columns: repeat(2, 1fr); gap: var(--space-12); }
    .grid-3 { grid-template-columns: repeat(3, 1fr); }
    .grid-4 { grid-template-columns: repeat(2, 1fr); }
  }
  @media (min-width: 1024px) {
    .grid-4 { grid-template-columns: repeat(4, 1fr); }
  }

  /* eyebrow */
  .eyebrow {
    display: inline-flex; align-items: center; gap: 10px;
    font-family: var(--font-body);
    font-size: var(--text-caption);
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--text-muted);
  }
  .eyebrow-dot {
    width: 8px; height: 8px;
    background: var(--brand);
    display: inline-block;
  }

  /* display headline */
  .display-xl {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--text-display-xl);
    line-height: 1.05;
    letter-spacing: -.022em;
    color: var(--text);
    text-wrap: balance;
  }
  .display-lg {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--text-display-lg);
    line-height: 1.10;
    letter-spacing: -.018em;
    color: var(--text);
    text-wrap: balance;
  }

  .lead {
    font-size: var(--text-lead);
    line-height: 1.55;
    color: var(--text-secondary);
    max-width: 60ch;
  }
  .editorial {
    font-family: var(--font-serif);
    font-size: clamp(19px, 1.7vw, 22px);
    line-height: 1.55;
    color: var(--text-secondary);
    max-width: 62ch;
  }

  /* buttons */
  .btn {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 15px;
    line-height: 1;
    padding: 14px 22px;
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: transform .18s var(--ease-hover), background .18s var(--ease-hover), color .18s var(--ease-hover), border-color .18s var(--ease-hover), box-shadow .18s var(--ease-hover);
    white-space: nowrap;
    border: 1.5px solid transparent;
    font-variant-numeric: tabular-nums;
  }
  .btn-sm { padding: 9px 14px; font-size: 14px; }
  .btn-lg { padding: 16px 26px; font-size: 16px; }
  .btn-primary {
    background: var(--brand);
    color: #fff;
  }
  .btn-primary:hover {
    background: var(--brand-hover);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px -8px rgba(37,64,199,.5);
  }
  .btn-secondary {
    border-color: var(--ink-900);
    color: var(--text);
  }
  :root[data-theme="dark"] .btn-secondary { border-color: var(--text); }
  .btn-secondary:hover {
    background: var(--ink-900);
    color: #fff;
  }
  :root[data-theme="dark"] .btn-secondary:hover { background: var(--text); color: var(--ink-900); }
  .btn-ghost { color: var(--text); }
  .btn-ghost:hover { background: var(--surface); color: var(--text); }
  .btn-inverse {
    background: var(--neutral-50);
    color: var(--ink-900);
  }
  .btn-inverse:hover { background:#fff; color: var(--ink-900); transform: translateY(-1px); }
  .arrow { transition: transform .2s var(--ease-out); }
  .btn:hover .arrow { transform: translateX(3px); }

  /* header */
  .site-header {
    position: sticky; top: 0; z-index: 50;
    background: color-mix(in oklab, var(--bg) 88%, transparent);
    backdrop-filter: saturate(180%) blur(8px);
    -webkit-backdrop-filter: saturate(180%) blur(8px);
    border-bottom: 1px solid var(--border);
  }
  .site-header-inner {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--space-6);
    height: 68px;
  }
  .brand-mark {
    display: inline-flex; align-items: center; gap: 10px;
    text-decoration: none; color: var(--text);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 15px;
    letter-spacing: -.005em;
  }
  .brand-glyph {
    width: 28px; height: 28px;
    background: var(--ink-900);
    display: inline-grid; place-items: center;
    color: #fff;
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 700;
    border-radius: 4px;
    letter-spacing: -.04em;
  }
  :root[data-theme="dark"] .brand-glyph { background: var(--text); color: var(--ink-900); }
  .brand-mark small {
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-weight: 400;
    font-size: 11px;
    letter-spacing: 0;
  }

  .nav-primary {
    display: none;
    align-items: center;
    gap: 4px;
  }
  @media (min-width: 1024px) { .nav-primary { display: flex; } }
  .nav-primary a {
    color: var(--text);
    text-decoration: none;
    padding: 8px 12px;
    font-size: 14px;
    font-weight: 500;
    border-radius: 6px;
    transition: background .15s;
  }
  .nav-primary a:hover { background: var(--surface); color: var(--text); }
  .nav-primary a[aria-current="page"] { color: var(--brand); }

  .nav-end {
    display: flex; align-items: center; gap: 6px;
    min-width: 0;
  }
  /* Mobile: collapse secondary header items into the mobile menu so the top bar
     doesn't overflow on narrow viewports. The menu-toggle stays visible. */
  @media (max-width: 767px) {
    .site-header-inner { gap: var(--space-3); }
    .nav-end .lang-switch,
    .nav-end .btn-ghost,
    .nav-end .btn-primary { display: none; }
    .brand-mark small { display: none; }
    .brand-mark { font-size: 15px; }
  }
  @media (max-width: 1023px) and (min-width: 768px) {
    .nav-end .btn-ghost { display: none; }
  }
  .lang-switch {
    display: inline-flex; align-items: center;
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text-muted);
    border: 1px solid var(--border);
    border-radius: 999px;
    overflow: hidden;
  }
  .lang-switch a {
    text-decoration: none;
    padding: 5px 10px;
    color: inherit;
  }
  .lang-switch a[aria-current="true"] {
    background: var(--ink-900);
    color: #fff;
  }
  :root[data-theme="dark"] .lang-switch a[aria-current="true"] { background: var(--text); color: var(--ink-900); }

  .theme-toggle {
    width: 34px; height: 34px;
    display: inline-grid; place-items: center;
    border-radius: 6px;
    color: var(--text-muted);
  }
  .theme-toggle:hover { background: var(--surface); color: var(--text); }

  .menu-toggle {
    display: inline-grid; place-items: center;
    width: 36px; height: 36px;
    border-radius: 8px;
    color: var(--text);
  }
  @media (min-width: 1024px) { .menu-toggle { display: none; } }

  /* mobile menu */
  .mobile-menu {
    position: fixed; inset: 0;
    background: var(--ink-900); color: var(--neutral-50);
    z-index: 60;
    padding: 20px;
    display: none;
    flex-direction: column;
    gap: var(--space-2);
    overflow-y: auto;
  }
  .mobile-menu[data-open="true"] { display: flex; }
  .mobile-menu .mobile-menu-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-8); }
  .mobile-menu a {
    display: block;
    padding: 14px 4px;
    color: var(--neutral-50);
    text-decoration: none;
    font-family: var(--font-display);
    font-size: 22px;
    border-bottom: 1px solid var(--ink-700);
  }
  .mobile-menu .mobile-menu-cta { margin-top: var(--space-8); }

  /* hero */
  .hero {
    padding-block: clamp(64px, 10vw, 128px) clamp(48px, 7vw, 96px);
    position: relative;
  }
  .hero-grid {
    display: grid;
    gap: var(--space-12);
  }
  @media (min-width: 1024px) {
    .hero-grid { grid-template-columns: 1.1fr .9fr; align-items: center; }
  }
  .hero-cta {
    display: flex; flex-wrap: wrap; gap: var(--space-3);
    margin-top: var(--space-8);
  }
  .hero-trust {
    margin-top: var(--space-12);
    padding-top: var(--space-6);
    border-top: 1px solid var(--border);
    color: var(--text-muted);
    font-size: var(--text-body-sm);
  }
  .hero-trust strong { color: var(--text); font-weight: 600; }

  /* hero figure: an editorial admin-window mock */
  .admin-window {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--bg-alt);
    overflow: hidden;
    box-shadow: 0 24px 48px -28px rgba(11,19,32,.18);
  }
  .admin-window-bar {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 14px;
    background: var(--neutral-100);
    border-bottom: 1px solid var(--border);
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-muted);
  }
  :root[data-theme="dark"] .admin-window-bar { background: var(--ink-700); }
  .admin-window-bar .dot { width:9px; height:9px; border-radius: 50%; background: var(--neutral-300); }
  .admin-window-bar .url { margin-left: auto; }
  .admin-window-body { padding: var(--space-6) var(--space-8); }

  /* placeholder image / capture */
  .placeholder {
    background:
      repeating-linear-gradient(135deg,
        var(--neutral-100) 0 12px,
        var(--neutral-50) 12px 24px);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    display: grid; place-items: center;
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: .04em;
    text-transform: uppercase;
    aspect-ratio: 16/10;
    padding: var(--space-6);
    text-align: center;
  }
  :root[data-theme="dark"] .placeholder {
    background: repeating-linear-gradient(135deg, var(--ink-800) 0 12px, var(--ink-700) 12px 24px);
  }

  /* feature card */
  .feature-card {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-8);
    background: var(--bg);
    transition: transform .18s var(--ease-hover), border-color .18s var(--ease-hover);
    display: flex; flex-direction: column; gap: var(--space-4);
    height: 100%;
  }
  .feature-card:hover {
    border-color: var(--ink-900);
    transform: translateY(-2px);
  }
  :root[data-theme="dark"] .feature-card:hover { border-color: var(--text); }
  .feature-card-icon {
    width: 40px; height: 40px;
    border-radius: var(--radius-md);
    background: var(--brand-100);
    color: var(--brand);
    display: grid; place-items: center;
    margin-bottom: var(--space-2);
  }
  :root[data-theme="dark"] .feature-card-icon {
    background: rgba(126,148,255,.14);
    color: var(--brand);
  }
  .feature-card h3 { font-size: var(--text-h4); }
  .feature-card p { font-size: var(--text-body-sm); color: var(--text-secondary); margin: 0; }
  .feature-card-link {
    margin-top: auto;
    color: var(--text);
    text-decoration: none;
    font-weight: 600;
    font-size: var(--text-body-sm);
    display: inline-flex; align-items: center; gap: 6px;
  }
  .feature-card:hover .feature-card-link { color: var(--brand); text-decoration: underline; text-underline-offset: 4px; }

  /* eyebrow + section header */
  .section-header { margin-bottom: var(--space-12); max-width: 720px; }
  .section-header h2 { margin-top: var(--space-3); }
  .section-header p { margin-top: var(--space-4); color: var(--text-secondary); font-size: var(--text-lead); }

  /* dark section */
  .section-dark {
    background: var(--ink-900);
    color: var(--neutral-50);
  }
  .section-dark h1, .section-dark h2, .section-dark h3, .section-dark h4 { color: var(--neutral-50); }
  .section-dark .lead, .section-dark p { color: #C5C2B6; }
  .section-dark .eyebrow { color: #9A968A; }
  .section-dark .eyebrow-dot { background: var(--accent-highlight); }
  .section-dark a { color: #B7C4FF; }

  /* gateway row */
  .gateway-row {
    display: grid; gap: var(--space-4);
    grid-template-columns: 1fr;
  }
  @media (min-width: 640px) { .gateway-row { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 1024px) { .gateway-row { grid-template-columns: repeat(5, 1fr); } }
  .gateway {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--space-6);
    background: var(--bg);
  }
  .gateway-name {
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--text);
    margin-bottom: var(--space-2);
    display: flex; align-items: center; gap: 8px;
  }
  .gateway-name::before {
    content: ""; width: 6px; height: 6px; background: var(--brand); display: inline-block; border-radius: 50%;
  }
  .gateway p { font-size: 13px; line-height: 1.5; color: var(--text-muted); margin: 0; }

  /* steps */
  .steps {
    display: grid; gap: var(--space-8);
    grid-template-columns: 1fr;
  }
  @media (min-width: 768px) { .steps { grid-template-columns: repeat(3, 1fr); } }
  .step {
    border-top: 1px solid var(--border);
    padding-top: var(--space-6);
    position: relative;
  }
  .step-num {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--text-muted);
    letter-spacing: .08em;
  }
  .step h3 { font-size: var(--text-h4); margin-top: var(--space-2); margin-bottom: var(--space-2); }
  .step p { color: var(--text-secondary); font-size: var(--text-body-sm); }

  /* code block */
  .codeblock {
    background: var(--ink-900);
    border-radius: var(--radius-md);
    overflow: hidden;
    margin: 0;
    border: 1px solid var(--ink-800);
  }
  .codeblock-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 10px 14px;
    background: var(--ink-800);
    color: #C5C2B6;
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: .06em;
    text-transform: uppercase;
  }
  .codeblock-header .codeblock-copy {
    color: #C5C2B6;
    font-family: var(--font-body);
    font-size: 12px;
    text-transform: none;
    letter-spacing: 0;
    padding: 4px 10px;
    border-radius: 4px;
    border: 1px solid var(--ink-700);
    transition: background .15s;
  }
  .codeblock-header .codeblock-copy:hover { background: var(--ink-700); color: #fff; }
  .codeblock pre {
    padding: 22px;
    overflow-x: auto;
    color: #EDEAE0;
    font-size: 14px;
    line-height: 1.6;
  }
  .codeblock .tk-comment { color: #7A766A; font-style: italic; }
  .codeblock .tk-keyword { color: #98ACFF; }
  .codeblock .tk-fn { color: #fff; }
  .codeblock .tk-str { color: #E8B500; }
  .codeblock .tk-var { color: #C5C2B6; }

  /* callout */
  .callout {
    background: var(--bg-alt);
    border-left: 3px solid var(--brand);
    padding: var(--space-4) var(--space-6);
    border-radius: var(--radius-sm);
    font-size: var(--text-body-sm);
    color: var(--text-secondary);
  }
  .callout strong { color: var(--text); }
  .callout-warning { border-left-color: var(--accent-warning); }
  .callout-success { border-left-color: var(--accent-success); }
  .callout-danger  { border-left-color: var(--accent-danger); }

  /* comparison table */
  .cmp-table {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
    font-size: var(--text-body-sm);
    background: var(--bg);
  }
  .cmp-table thead th {
    background: var(--bg-alt);
    text-align: left;
    padding: 14px 16px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 13px;
    color: var(--text);
    letter-spacing: .02em;
    border-bottom: 1px solid var(--border);
  }
  .cmp-table thead th.cmp-highlight {
    background: var(--ink-900); color: #fff;
  }
  .cmp-table tbody th {
    text-align: left;
    padding: 12px 16px;
    font-weight: 500;
    color: var(--text);
    border-bottom: 1px solid var(--border);
    background: var(--bg);
  }
  .cmp-table tbody td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    color: var(--text-secondary);
    vertical-align: middle;
  }
  .cmp-table tbody tr:last-child th,
  .cmp-table tbody tr:last-child td { border-bottom: 0; }
  .cmp-yes { color: var(--accent-success); font-weight: 700; }
  .cmp-no { color: var(--neutral-300); }
  :root[data-theme="dark"] .cmp-no { color: #4A5777; }
  .cmp-table-wrap { overflow-x: auto; }

  /* pricing card */
  .pricing-card {
    border: 2px solid var(--ink-900);
    border-radius: var(--radius-lg);
    padding: var(--space-12);
    background: var(--bg);
    max-width: 520px;
    margin-inline: auto;
  }
  :root[data-theme="dark"] .pricing-card { border-color: var(--text); }
  .pricing-plan { font-family: var(--font-display); font-weight: 600; font-size: var(--text-h3); }
  .pricing-price {
    display: flex; align-items: baseline; gap: 6px;
    margin: var(--space-4) 0;
  }
  .pricing-price-amount {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--text-h1);
    letter-spacing: -.02em;
  }
  .pricing-price-period { color: var(--text-muted); font-size: var(--text-body-sm); }
  .pricing-list { list-style: none; margin: var(--space-6) 0; }
  .pricing-list li {
    padding: 10px 0;
    border-top: 1px solid var(--border);
    display: flex; gap: 10px;
    font-size: var(--text-body-sm);
  }
  .pricing-list li:first-child { border-top: 0; }
  .pricing-list li::before {
    content: "—"; color: var(--accent-success); font-weight: 700; flex-shrink: 0;
  }

  /* sticky CTA bar */
  .sticky-cta {
    position: fixed; left: 0; right: 0; bottom: 0;
    background: rgba(11,19,32,.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: #fff;
    padding: 12px 20px;
    z-index: 40;
    transform: translateY(100%);
    transition: transform .3s var(--ease-out);
    border-top: 1px solid var(--ink-700);
  }
  .sticky-cta[data-visible="true"] { transform: translateY(0); }
  .sticky-cta-inner {
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
    max-width: var(--container);
    margin-inline: auto;
  }
  .sticky-cta-text {
    font-size: 14px;
    color: #C5C2B6;
  }
  .sticky-cta-text strong { color: #fff; }
  @media (max-width: 640px) {
    .sticky-cta-text { display: none; }
    .sticky-cta-inner { justify-content: flex-end; }
  }
  .sticky-cta-actions { display: flex; gap: 8px; align-items: center; }
  .sticky-cta-close {
    color: #9A968A; padding: 6px;
  }

  /* footer */
  .site-footer {
    background: var(--ink-900);
    color: #C5C2B6;
    padding-block: var(--space-20) var(--space-10);
    margin-top: var(--space-24);
  }
  .site-footer h4 {
    color: #fff;
    font-family: var(--font-display);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .12em;
    margin-bottom: var(--space-4);
    font-weight: 600;
  }
  .site-footer ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
  .site-footer a {
    color: var(--neutral-300);
    text-decoration: none;
    font-size: var(--text-body-sm);
  }
  .site-footer a:hover { color: #fff; }
  .footer-grid {
    display: grid; gap: var(--space-10);
    grid-template-columns: 1fr;
  }
  @media (min-width: 768px) { .footer-grid { grid-template-columns: 1.5fr repeat(4, 1fr); } }
  .footer-brand p { font-size: var(--text-body-sm); color: #9A968A; max-width: 320px; }
  .footer-brand .brand-mark { color: #fff; }
  .footer-brand .brand-mark small { color: #9A968A; }
  .footer-bottom {
    margin-top: var(--space-16);
    padding-top: var(--space-6);
    border-top: 1px solid var(--ink-700);
    display: flex; flex-wrap: wrap; gap: var(--space-6); justify-content: space-between; align-items: center;
    font-size: 13px; color: #9A968A;
  }
  .footer-bottom-links { display: flex; gap: var(--space-4); flex-wrap: wrap; }

  /* badges */
  .badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    font-family: var(--font-body);
  }
  .badge-active { color: var(--accent-success); background: rgba(31,138,76,.1); }
  .badge-hold { color: var(--accent-warning); background: rgba(181,101,29,.1); }
  .badge-sched { color: var(--brand); background: var(--brand-100); }
  .badge-paused { color: var(--neutral-500); background: var(--neutral-100); }
  .badge-cancel { color: var(--neutral-700); background: var(--neutral-100); }
  .badge-expired { color: var(--accent-danger); background: rgba(164,37,47,.08); }

  /* metric strip */
  .metrics {
    display: grid; gap: var(--space-8);
    grid-template-columns: repeat(2, 1fr);
  }
  @media (min-width: 768px) { .metrics { grid-template-columns: repeat(4, 1fr); } }
  .metric { border-top: 1px solid var(--border); padding-top: var(--space-4); }
  .section-dark .metric { border-top-color: var(--ink-700); }
  .metric-num {
    font-family: var(--font-display);
    font-size: clamp(34px, 4vw, 48px);
    font-weight: 600;
    letter-spacing: -.02em;
    color: var(--text);
  }
  .section-dark .metric-num { color: #fff; }
  .metric-label { color: var(--text-muted); font-size: 13px; margin-top: 6px; }

  /* breadcrumbs */
  .crumbs {
    display: flex; gap: 8px; flex-wrap: wrap;
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--text-muted);
    list-style: none;
    margin-bottom: var(--space-6);
  }
  .crumbs a { color: var(--text-muted); text-decoration: none; }
  .crumbs a:hover { color: var(--text); }
  .crumbs li + li::before { content: "/"; padding-right: 8px; color: var(--neutral-300); }

  /* faq */
  .faq details {
    border-top: 1px solid var(--border);
    padding: var(--space-4) 0;
  }
  .faq details:last-child { border-bottom: 1px solid var(--border); }
  .faq summary {
    cursor: pointer;
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--text);
    font-size: var(--text-h4);
    list-style: none;
    display: flex; justify-content: space-between; align-items: center;
    gap: var(--space-4);
  }
  .faq summary::-webkit-details-marker { display: none; }
  .faq summary::after {
    content: "+";
    font-family: var(--font-mono);
    font-weight: 400;
    color: var(--text-muted);
    transition: transform .2s;
    font-size: 22px;
  }
  .faq details[open] summary::after { content: "−"; }
  .faq details > p { margin-top: var(--space-3); color: var(--text-secondary); font-size: var(--text-body); }

  /* doc list */
  .doc-list {
    list-style: none;
    display: grid; gap: 4px;
    grid-template-columns: 1fr;
  }
  .doc-list a {
    display: flex; justify-content: space-between; align-items: baseline;
    padding: 14px 16px;
    border-radius: var(--radius-sm);
    text-decoration: none;
    color: var(--text);
    border: 1px solid transparent;
    transition: background .15s, border-color .15s;
    font-size: var(--text-body-sm);
  }
  .doc-list a:hover { background: var(--bg-alt); border-color: var(--border); color: var(--text); }
  .doc-list small { color: var(--text-muted); font-family: var(--font-mono); font-size: 11px; }

  /* timeline (changelog) */
  .release {
    display: grid; gap: var(--space-4);
    grid-template-columns: 1fr;
    padding: var(--space-8) 0;
    border-top: 1px solid var(--border);
  }
  @media (min-width: 768px) { .release { grid-template-columns: 200px 1fr; gap: var(--space-12); } }
  .release-meta {
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--text-muted);
  }
  .release-version {
    font-family: var(--font-display);
    font-size: var(--text-h3);
    color: var(--text);
    font-weight: 600;
    letter-spacing: -.01em;
  }
  .release h3 {
    font-family: var(--font-display);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--text-muted);
    font-weight: 600;
    margin-top: var(--space-4);
  }
  .release ul { list-style: none; display: grid; gap: var(--space-2); margin-top: var(--space-2); }
  .release ul li {
    padding-left: 18px;
    position: relative;
    color: var(--text-secondary);
  }
  .release ul li::before {
    content: ""; position: absolute; left: 0; top: 11px;
    width: 8px; height: 1px; background: var(--neutral-300);
  }

  /* form */
  .field { display: grid; gap: 6px; margin-bottom: var(--space-6); }
  .field label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
  }
  .field input, .field textarea, .field select {
    padding: 12px 14px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--bg);
    color: var(--text);
    font-size: var(--text-body-sm);
    font-family: var(--font-body);
  }
  .field input:focus, .field textarea:focus, .field select:focus {
    outline: 2px solid var(--brand);
    outline-offset: 1px;
    border-color: var(--brand);
  }
  .field-checkbox {
    flex-direction: row; align-items: flex-start; gap: 10px;
    display: flex;
    font-size: 13px;
    color: var(--text-secondary);
  }
  .field-checkbox input { margin-top: 3px; }

  /* misc */
  .pill-list { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
  .pill-list li {
    border: 1px solid var(--border);
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 13px;
    color: var(--text-secondary);
    background: var(--bg);
  }

  .kbd {
    font-family: var(--font-mono);
    font-size: 11px;
    border: 1px solid var(--border);
    border-bottom-width: 2px;
    padding: 2px 6px;
    border-radius: 4px;
    color: var(--text-muted);
    background: var(--bg-alt);
  }

  /* divider with rule */
  .rule-row {
    display: flex; align-items: center; gap: var(--space-4);
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-block: var(--space-12);
  }
  .rule-row::before, .rule-row::after {
    content: ""; flex: 1; height: 1px; background: var(--border);
  }

  /* page header (interior pages) */
  .page-header { padding-block: clamp(56px, 8vw, 96px) clamp(40px, 5vw, 64px); }

  /* bullet list with custom marker */
  .bullets { list-style: none; display: grid; gap: var(--space-4); }
  .bullets li {
    display: grid; grid-template-columns: auto 1fr; gap: var(--space-4);
    align-items: start;
    color: var(--text-secondary);
    font-size: var(--text-body);
  }
  .bullets li::before {
    content: ""; width: 6px; height: 6px; background: var(--brand); border-radius: 0; margin-top: 11px;
  }
  .bullets strong { color: var(--text); font-weight: 600; }
}

/* ---------- UTILITIES ---------- */
@layer utilities {
  .sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
  }
  .text-mono { font-family: var(--font-mono); }
  .text-serif { font-family: var(--font-serif); }
  .text-muted { color: var(--text-muted); }
  .mt-0 { margin-top: 0; }
  .mt-2 { margin-top: var(--space-2); }
  .mt-4 { margin-top: var(--space-4); }
  .mt-6 { margin-top: var(--space-6); }
  .mt-8 { margin-top: var(--space-8); }
  .mt-12 { margin-top: var(--space-12); }
  .mb-4 { margin-bottom: var(--space-4); }
  .mb-6 { margin-bottom: var(--space-6); }
  .mb-8 { margin-bottom: var(--space-8); }
  .mb-12 { margin-bottom: var(--space-12); }
  .gap-4 { gap: var(--space-4); }
  .gap-6 { gap: var(--space-6); }
  .gap-8 { gap: var(--space-8); }
  .flex { display: flex; }
  .flex-col { flex-direction: column; }
  .items-center { align-items: center; }
  .items-start { align-items: start; }
  .justify-between { justify-content: space-between; }
  .flex-wrap { flex-wrap: wrap; }
  .text-center { text-align: center; }
  .full { width: 100%; }
  .bg-alt { background: var(--bg-alt); }
  .border-top { border-top: 1px solid var(--border); }

  /* docs article layout */
  .docs-layout{display:grid;gap:48px;grid-template-columns:1fr;padding:48px 0}
  @media(min-width:1024px){.docs-layout{grid-template-columns:240px minmax(0,1fr) 200px;gap:56px}}
  .docs-side{position:sticky;top:96px;align-self:start;max-height:calc(100vh - 120px);overflow:auto;font-size:14px}
  .docs-side h4{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted);margin:20px 0 8px;font-family:var(--font-body);font-weight:600}
  .docs-side ol{list-style:none;display:grid;gap:2px}
  .docs-side a{display:block;padding:6px 10px;border-radius:6px;color:var(--text-secondary);text-decoration:none;border-left:2px solid transparent}
  .docs-side a:hover{background:var(--bg-alt);color:var(--text)}
  .docs-side a[aria-current="page"]{background:var(--brand-100);color:var(--brand);border-left-color:var(--brand);font-weight:600}
  .docs-article{min-width:0;max-width:72ch}
  .docs-article h1{font-size:clamp(32px,3.6vw,44px);margin-bottom:16px}
  .docs-article h2{margin-top:48px;padding-top:24px;border-top:1px solid var(--border)}
  .docs-article h3{margin-top:32px;font-size:20px}
  .docs-article h4{margin-top:24px;font-size:16px;letter-spacing:-0.01em}
  .docs-article p,.docs-article li{font-size:17px;line-height:1.7;color:var(--text-secondary)}
  .docs-article ul,.docs-article ol{padding-left:20px;margin:16px 0;display:grid;gap:6px}
  .docs-article a{color:var(--brand);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
  .docs-article a:hover{text-decoration-thickness:2px}
  .docs-article code{font-family:var(--font-mono);font-size:0.92em;background:var(--bg-alt);padding:2px 6px;border-radius:4px;border:1px solid var(--border);color:var(--text)}
  .docs-article .codeblock code,.docs-article .codeblock pre code{background:transparent;border:0;padding:0;color:inherit;font-size:inherit;border-radius:0}
  .docs-article hr{border:0;border-top:1px solid var(--border);margin:48px 0}
  .docs-article table{width:100%;border-collapse:collapse;margin:24px 0;font-size:14px}
  .docs-article table th,.docs-article table td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--border);vertical-align:top}
  .docs-article table th{background:var(--bg-alt);font-weight:600;color:var(--text);font-size:13px;letter-spacing:0.02em}
  .docs-article table td{color:var(--text-secondary)}
  .docs-article table code{background:transparent;border:0;padding:0}

  /* ---------- Docs mobile overflow fixes ---------- */
  /* Grid children must be allowed to shrink below their content size */
  .docs-layout > *,
  .docs-article { min-width: 0; }
  /* Long hook names inside inline <code> must wrap by any character */
  .docs-article code,
  .docs-article p code,
  .docs-article li code,
  .docs-article td code,
  .docs-article h1 code,
  .docs-article h2 code,
  .docs-article h3 code,
  .docs-article h4 code {
    overflow-wrap: anywhere;
    word-break: break-word;
    white-space: normal;
  }
  /* Code blocks: scroll horizontally instead of pushing the page wider */
  .docs-article pre,
  .docs-article .codeblock pre {
    max-width: 100%;
    overflow-x: auto;
    white-space: pre;
    -webkit-overflow-scrolling: touch;
  }
  /* Long links (URLs, slugs) must wrap */
  .docs-article a {
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  /* Tables: wrap as block + scroll-x so wide ones don't blow the layout */
  .docs-article table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }
  /* Images and embeds never exceed container width */
  .docs-article img,
  .docs-article iframe,
  .docs-article video {
    max-width: 100%;
    height: auto;
  }
  /* Long headings */
  .docs-article h1,
  .docs-article h2,
  .docs-article h3,
  .docs-article h4 {
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  /* ---------- Hooks reference page (uses .hooks-* / .hook-* classes) ---------- */
  /* Same protection as .docs-article but for the hooks-specific layout */
  .hooks-layout > *,
  .hooks-content { min-width: 0; }
  .hooks-content code,
  .hook-card code,
  .hook-card p code,
  .hook-card li code,
  .hook-card td code,
  .hook-card-head h4 code,
  .hook-card-head h4 a code,
  .hook-section-title code,
  .hook-subsection-title code,
  .hook-intro code,
  .hook-meta code,
  .hook-description code,
  .hook-returns code,
  .hook-bridge-callout code {
    overflow-wrap: anywhere;
    word-break: break-word;
    white-space: normal;
  }
  .hook-card pre,
  .hooks-content pre,
  .hooks-content .codeblock pre {
    max-width: 100%;
    overflow-x: auto;
    white-space: pre;
    -webkit-overflow-scrolling: touch;
  }
  .hook-card a,
  .hooks-content a {
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  .hook-params {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }
  .hook-card h3,
  .hook-card h4,
  .hook-section-title,
  .hook-subsection-title {
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  /* Side padding on mobile so content doesn't touch the edges */
  @media (max-width: 767px) {
    .docs-layout { padding: 24px 16px; }
    .docs-article p,
    .docs-article li { font-size: 16px; }
    .docs-article h1 { font-size: clamp(26px, 7vw, 32px); }
    .hooks-layout { padding: 24px 16px; gap: 24px; }
    .hook-card { padding: 18px; }
    .hook-card p,
    .hook-card li { font-size: 16px; }
  }
  .doc-figure{margin:32px 0}
  .doc-figure img,.doc-figure .doc-figure-placeholder{width:100%;display:block;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--bg-alt)}
  .doc-figure-placeholder{aspect-ratio:16/9;background-image:repeating-linear-gradient(135deg,var(--bg-alt) 0,var(--bg-alt) 12px,#EFECE2 12px,#EFECE2 24px);display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:13px;color:var(--text-muted);text-align:center;padding:24px}
  .doc-figure figcaption{font-size:13px;color:var(--text-muted);margin-top:10px;text-align:center;font-family:var(--font-body)}
  .doc-tabs{margin:24px 0;border:1px solid var(--border);border-radius:var(--radius-md);overflow:hidden}
  .doc-tabs-nav{display:flex;background:var(--bg-alt);border-bottom:1px solid var(--border);overflow-x:auto}
  .doc-tabs-nav button{flex-shrink:0;padding:12px 20px;border:0;background:transparent;font:inherit;font-size:13px;font-weight:500;color:var(--text-muted);cursor:pointer;border-bottom:2px solid transparent;font-family:var(--font-mono);text-transform:uppercase;letter-spacing:0.04em}
  .doc-tabs-nav button.active{color:var(--text);border-bottom-color:var(--brand);background:var(--bg)}
  .doc-tabs-panel{display:none;padding:0}
  .doc-tabs-panel.active{display:block}
  .doc-tabs-panel .codeblock{margin:0;border-radius:0;border:0}
  .doc-steps{display:grid;gap:16px;margin:24px 0;counter-reset:step}
  .doc-steps>li{list-style:none;background:var(--bg-alt);border:1px solid var(--border);border-radius:var(--radius-md);padding:20px 24px;position:relative;padding-left:64px}
  .doc-steps>li::before{counter-increment:step;content:counter(step);position:absolute;top:20px;left:20px;width:28px;height:28px;background:var(--ink-900);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:13px;font-weight:600}
  .doc-dl{margin:24px 0;display:grid;grid-template-columns:200px 1fr;gap:8px 24px;font-size:15px}
  .doc-dl dt{font-weight:600;color:var(--text);font-family:var(--font-mono);font-size:13px;padding-top:2px}
  .doc-dl dd{color:var(--text-secondary);margin:0}
  .doc-related{margin:48px 0;padding:24px;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--bg-alt)}
  .doc-related h4{margin:0 0 12px;font-size:13px;letter-spacing:0.08em;text-transform:uppercase;color:var(--text-muted)}
  .doc-related ul{padding:0;margin:0;list-style:none;display:grid;gap:8px}
  .doc-related a{font-weight:500}
  .docs-article .codeblock{margin:24px 0}
  .docs-toc{position:sticky;top:96px;align-self:start;font-size:13px;font-family:var(--font-mono)}
  .docs-toc h4{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted);margin-bottom:12px;font-family:var(--font-body);font-weight:600}
  .docs-toc ul{list-style:none;display:grid;gap:6px}
  .docs-toc a{color:var(--text-muted);text-decoration:none;border-left:2px solid var(--border);padding-left:10px;display:block}
  .docs-toc a:hover,.docs-toc a.active{color:var(--text);border-left-color:var(--brand)}
  .docs-meta{display:flex;gap:16px;flex-wrap:wrap;font-family:var(--font-mono);font-size:12px;color:var(--text-muted);padding-bottom:24px;border-bottom:1px solid var(--border);margin-bottom:32px}
  .docs-prev-next{display:grid;gap:16px;grid-template-columns:1fr;margin-top:64px;padding-top:32px;border-top:1px solid var(--border)}
  @media(min-width:640px){.docs-prev-next{grid-template-columns:1fr 1fr}}
  .docs-prev-next a{border:1px solid var(--border);border-radius:var(--radius-md);padding:20px;text-decoration:none;color:var(--text);transition:border-color .2s}
  .docs-prev-next a:hover{border-color:var(--ink-900)}
  .docs-prev-next small{font-family:var(--font-mono);font-size:11px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.1em;display:block;margin-bottom:8px}

}

/* Safety belt: stops any unexpected overflow from forcing a horizontal page scroll.
   Outside @layer so it cannot be overridden by lower-cascade utility rules. */
html, body { overflow-x: hidden; }

/* ========== Search modal ========== */
[data-search-modal]{position:fixed;inset:0;z-index:200;display:none}
[data-search-modal][data-open="true"]{display:block}
.search-backdrop{position:absolute;inset:0;background:rgba(20,18,15,.55);backdrop-filter:blur(6px)}
.search-panel{position:relative;max-width:640px;margin:10vh auto 0;background:var(--surface,#fff);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:0 30px 60px rgba(0,0,0,.25);overflow:hidden}
.search-input-row{display:flex;align-items:center;gap:12px;padding:18px 22px;border-bottom:1px solid var(--border);color:var(--text-secondary)}
.search-input-row input{flex:1;border:0;outline:0;background:transparent;font:inherit;font-size:18px;color:var(--ink-900)}
.search-input-row kbd{font-family:var(--font-mono);font-size:11px;padding:2px 6px;border:1px solid var(--border);border-radius:4px;color:var(--text-muted)}
.search-results{max-height:60vh;overflow-y:auto;padding:8px 0}
.search-group{padding:8px 0}
.search-group h4{margin:0;padding:6px 22px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted)}
.search-group ul{list-style:none;margin:0;padding:0}
.search-group li a{display:flex;justify-content:space-between;align-items:center;padding:10px 22px;color:var(--ink-900);text-decoration:none;font-size:15px}
.search-group li a:hover{background:var(--neutral-100)}
.search-arrow{color:var(--text-muted);font-family:var(--font-mono)}
.search-empty{padding:40px;text-align:center;color:var(--text-muted);font-size:14px}

/* ========== Mega menu ========== */
.mega-wrap{position:relative}
.mega-panel{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(8px);min-width:560px;background:var(--surface,#fff);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:0 24px 48px rgba(0,0,0,.12);padding:20px;opacity:0;visibility:hidden;transition:opacity .18s,transform .18s;z-index:50}
.mega-wrap:hover .mega-panel,.mega-wrap:focus-within .mega-panel{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.mega-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.mega-item{display:block;padding:12px 14px;border-radius:var(--radius-md);text-decoration:none;color:var(--ink-900)}
.mega-item:hover{background:var(--neutral-100)}
.mega-item strong{display:block;font-size:14px;font-weight:600}
.mega-item span{display:block;margin-top:2px;font-size:13px;color:var(--text-secondary)}
.mega-foot{margin-top:12px;padding-top:12px;border-top:1px solid var(--border);font-size:13px}
.mega-foot a{color:var(--brand-600);text-decoration:none;font-weight:500}
@media (max-width:900px){.mega-panel{display:none}}

/* ========== Cookie banner ========== */
.cookie-banner{position:fixed;left:24px;bottom:24px;width:360px;max-width:calc(100vw - 48px);background:var(--surface,#fff);border:1px solid var(--border);border-radius:var(--radius-md);box-shadow:0 18px 40px rgba(0,0,0,.18);padding:18px 18px 16px;z-index:120;font-size:14px;animation:cookieIn .35s ease-out}
.cookie-banner strong{display:block;font-size:14px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-900)}
.cookie-banner p{margin:8px 0 14px;color:var(--text-secondary);line-height:1.55}
.cookie-banner p a{color:var(--brand-600)}
.cookie-actions{display:flex;flex-wrap:wrap;gap:8px}
.cookie-banner.is-hidden{opacity:0;transform:translateY(8px);transition:.3s}
@keyframes cookieIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@media (max-width:480px){.cookie-banner{left:12px;right:12px;width:auto;bottom:12px}}

/* ========== Hooks reference page ========== */
.hooks-layout{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:48px;align-items:start}
@media (max-width:1100px){.hooks-layout{grid-template-columns:1fr}.hooks-sidebar{display:none}}
.hooks-content{min-width:0}
.hook-intro{margin-bottom:32px;color:var(--text-secondary);font-size:16px;line-height:1.65}
.hook-intro p{margin-bottom:12px}
.hook-intro p:last-child{margin-bottom:0}
.hook-intro code{font-family:var(--font-mono);font-size:13px;padding:2px 6px;background:var(--neutral-100);border-radius:4px}

.hook-controls{position:sticky;top:0;z-index:5;background:var(--bg);padding:16px 0 12px;margin-bottom:24px;border-bottom:1px solid var(--border);display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.hook-search{flex:1;min-width:240px;padding:10px 14px;border:1px solid var(--border);border-radius:var(--radius-sm);font:inherit;font-size:14px;background:var(--bg)}
.hook-search:focus{outline:2px solid var(--brand-600);outline-offset:1px;border-color:var(--brand-600)}
.hook-filter-chips{display:flex;flex-wrap:wrap;gap:6px}
.hook-chip{padding:7px 14px;font-family:var(--font-mono);font-size:12px;letter-spacing:.04em;background:var(--neutral-50);border:1px solid var(--border);border-radius:99px;color:var(--text-secondary);cursor:pointer;transition:.15s}
.hook-chip:hover{border-color:var(--ink-900);color:var(--ink-900)}
.hook-chip.is-active{background:var(--ink-900);color:#fff;border-color:var(--ink-900)}
.hook-no-results{width:100%;padding:24px;text-align:center;color:var(--text-muted);font-size:14px;background:var(--bg-alt);border-radius:var(--radius-md);margin:24px 0 0}

.hook-section{margin:48px 0 24px}
.hook-section:first-of-type{margin-top:0}
.hook-section-title{font-size:28px;letter-spacing:-.01em;padding-bottom:10px;border-bottom:2px solid var(--ink-900);margin-bottom:24px}
.hook-subsection{margin:40px 0 16px}
.hook-subsection-title{font-size:20px;color:var(--text-secondary);margin-bottom:16px;text-transform:uppercase;letter-spacing:.06em;font-weight:600;font-family:var(--font-mono);font-size:13px}

.hook-card{border:1px solid var(--border);border-radius:var(--radius-md);padding:24px;margin-bottom:20px;background:var(--bg);scroll-margin-top:96px}
.hook-card-head{display:flex;flex-wrap:wrap;align-items:center;gap:12px;justify-content:space-between;margin-bottom:8px}
.hook-card-head h4{margin:0;font-size:18px;font-weight:600}
.hook-card-head h4 a{text-decoration:none;color:var(--ink-900)}
.hook-card-head h4 a code{font-family:var(--font-mono);font-size:15px;background:transparent;color:var(--brand-600);padding:0}
.hook-card-head h4 a:hover code{text-decoration:underline}
.hook-badges{display:flex;gap:6px;flex-wrap:wrap}
.hook-badge{padding:3px 10px;font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;font-weight:600;border-radius:99px}
.hook-badge-action{background:rgba(31,138,76,.1);color:#1F8A4C}
.hook-badge-filter{background:var(--brand-100);color:var(--brand-600)}
.hook-badge-bridge{background:rgba(181,101,29,.12);color:#8a4d15;cursor:help}
.hook-meta{display:flex;flex-wrap:wrap;gap:14px;font-family:var(--font-mono);font-size:11.5px;color:var(--text-muted);margin:6px 0 14px}
.hook-meta strong{color:var(--text-secondary);font-weight:600}
.hook-meta code{font-family:inherit;color:var(--text-secondary)}
.hook-bridge-callout{margin:0 0 14px;font-size:13px;line-height:1.55}
.hook-description{margin:0 0 14px;color:var(--text-secondary);line-height:1.6}
.hook-description code{font-family:var(--font-mono);font-size:13px;padding:1px 5px;background:var(--neutral-100);border-radius:3px}
.hook-params{width:100%;margin:0 0 14px;border-collapse:collapse;font-size:13.5px}
.hook-params thead th{text-align:left;padding:8px 12px;background:var(--bg-alt);border-bottom:1px solid var(--border);font-weight:600;font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--text-secondary)}
.hook-params td{padding:9px 12px;border-bottom:1px solid var(--border);vertical-align:top;color:var(--text-secondary)}
.hook-params td:first-child code{font-family:var(--font-mono);font-size:12.5px;color:var(--ink-900)}
.hook-params code{font-family:var(--font-mono);font-size:12.5px;background:var(--neutral-100);padding:1px 5px;border-radius:3px}
.hook-returns{margin:0 0 14px;font-size:14px;color:var(--text-secondary)}
.hook-returns code{font-family:var(--font-mono);font-size:13px;background:var(--neutral-100);padding:1px 5px;border-radius:3px}
.hook-card .codeblock{margin:0;font-size:13px}

.hooks-sidebar{position:sticky;top:24px;max-height:calc(100vh - 48px);overflow-y:auto}
.hook-toc-nav{padding-left:0;border-left:1px solid var(--border);padding:0 0 0 16px}
.hook-toc-nav h4{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted);margin:0 0 12px;font-weight:600}
.hook-toc-nav ol{list-style:none;padding-left:0;margin:0;font-size:13px}
.hook-toc-nav ol ol{padding-left:14px;margin:4px 0 8px;font-size:12px}
.hook-toc-nav li{margin-bottom:4px}
.hook-toc-nav a{color:var(--text-secondary);text-decoration:none;display:block;padding:3px 0;line-height:1.4}
.hook-toc-nav a:hover{color:var(--brand-600)}
.hook-toc-nav .toc-count{color:var(--text-muted);font-family:var(--font-mono);font-size:10.5px;margin-left:4px}