/* ============================================================
   Voidwall Design System — Colors & Type
   ------------------------------------------------------------
   Voidwall is a DLP HTTP proxy. The brand visual language has
   two halves:
     1) A calm, paper-cream "outside world" (light surfaces).
     2) A deep navy "inside the wall" (dark surfaces).
   They are joined by a single signature accent: an electric
   periwinkle / violet that reads as "the wall itself."
   ============================================================ */

/* -- Web fonts (Google Fonts) -------------------------------- */
/* Geist (sans + mono) is the closest free analog to the heavy,
   geometric grotesque used in the brand reference.            */
/* cyrillic-ext */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("fonts/f89ce84b.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("fonts/816ebe43.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("fonts/12664a33.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("fonts/d9436044.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("fonts/7bfd332f.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/f89ce84b.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/816ebe43.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/12664a33.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/d9436044.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/7bfd332f.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/f89ce84b.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/816ebe43.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/12664a33.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/d9436044.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/7bfd332f.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/f89ce84b.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/816ebe43.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/12664a33.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/d9436044.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/7bfd332f.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/f89ce84b.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/816ebe43.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/12664a33.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/d9436044.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/7bfd332f.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/4ceaad2e.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/f7c7562b.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* symbols2 */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/f8403749.woff2") format('woff2');
  unicode-range: U+2000-2001, U+2004-2008, U+200A, U+23B8-23BD, U+2500-259F;
}
/* vietnamese */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/e5d673a9.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/58ef78b6.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/92673a20.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/4ceaad2e.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/f7c7562b.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* symbols2 */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/f8403749.woff2") format('woff2');
  unicode-range: U+2000-2001, U+2004-2008, U+200A, U+23B8-23BD, U+2500-259F;
}
/* vietnamese */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/e5d673a9.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/58ef78b6.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/92673a20.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


:root {
  /* ─────────────────────────  COLOR  ───────────────────────── */

  /* Paper / "outside" surfaces */
  --vw-paper:           #F1EEE8;   /* page background, hero  */
  --vw-paper-2:         #E9E5DC;   /* sunken / divider band  */
  --vw-paper-line:      #DCD6CA;   /* hairline on cream       */
  --vw-paper-ink:       #0A0E1A;   /* primary text on cream  */
  --vw-paper-ink-2:     #4B5060;   /* secondary text on cream */
  --vw-paper-ink-3:     #8A8E99;   /* tertiary / meta         */

  /* Void / "inside" surfaces */
  --vw-void:            #0A0E1A;   /* deepest panel          */
  --vw-void-2:          #11152A;   /* card on void           */
  --vw-void-3:          #1A1F38;   /* raised / hover         */
  --vw-void-line:       #232845;   /* hairline on void        */
  --vw-void-ink:        #F4F2EE;   /* primary text on void   */
  --vw-void-ink-2:      #C4C8D6;   /* secondary text on void */
  --vw-void-ink-3:      #6C7290;   /* tertiary / meta         */

  /* The accent — the wall itself */
  --vw-violet-50:       #ECE9FF;
  --vw-violet-100:      #DCD6FF;
  --vw-violet-200:      #BFB3FF;
  --vw-violet-300:      #A096FF;
  --vw-violet-400:      #8B7DF6;   /* primary accent          */
  --vw-violet-500:      #6E5EE6;   /* press / link            */
  --vw-violet-600:      #5848C7;   /* deep accent             */
  --vw-violet-glow:     rgba(139,125,246,0.45);

  /* Semantic */
  --vw-success:         #38B27A;
  --vw-warning:         #E0A23A;
  --vw-danger:          #E5564B;
  --vw-info:            var(--vw-violet-400);

  /* Inks resolved against current surface (set on <body>) */
  --vw-bg:              var(--vw-paper);
  --vw-bg-2:            var(--vw-paper-2);
  --vw-line:            var(--vw-paper-line);
  --vw-fg:              var(--vw-paper-ink);
  --vw-fg-2:            var(--vw-paper-ink-2);
  --vw-fg-3:            var(--vw-paper-ink-3);
  --vw-accent:          var(--vw-violet-400);

  /* ─────────────────────  RADII / ELEVATION  ─────────────────────── */
  --vw-r-xs: 4px;
  --vw-r-sm: 6px;
  --vw-r-md: 10px;
  --vw-r-lg: 14px;
  --vw-r-xl: 20px;
  --vw-r-pill: 999px;

  --vw-shadow-sm: 0 1px 2px rgba(10,14,26,0.06);
  --vw-shadow-md: 0 6px 18px -6px rgba(10,14,26,0.18);
  --vw-shadow-lg: 0 28px 60px -24px rgba(10,14,26,0.35);
  --vw-shadow-glow: 0 0 0 1px rgba(139,125,246,0.35),
                    0 12px 40px -10px rgba(139,125,246,0.55);

  /* ─────────────────────────  SPACING  ───────────────────────── */
  --vw-sp-1: 4px;
  --vw-sp-2: 8px;
  --vw-sp-3: 12px;
  --vw-sp-4: 16px;
  --vw-sp-5: 24px;
  --vw-sp-6: 32px;
  --vw-sp-7: 48px;
  --vw-sp-8: 64px;
  --vw-sp-9: 96px;

  /* ─────────────────────────  TYPE  ───────────────────────── */
  --vw-font-display: "Geist", ui-sans-serif, system-ui, sans-serif;
  --vw-font-body:    "Geist", ui-sans-serif, system-ui, sans-serif;
  --vw-font-mono:    "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Display scale — tight, heavy, slightly negative tracking */
  --vw-display-1: 76px;   /* hero                          */
  --vw-display-2: 56px;   /* page headers                  */
  --vw-h1: 40px;
  --vw-h2: 30px;
  --vw-h3: 22px;
  --vw-h4: 18px;
  --vw-body: 16px;
  --vw-body-sm: 14px;
  --vw-caption: 12px;

  --vw-track-display: -0.025em;
  --vw-track-eyebrow:  0.14em;
}

/* ───────────  Dark surface modifier  ─────────── */
.vw-void,
[data-vw-surface="void"] {
  --vw-bg:   var(--vw-void);
  --vw-bg-2: var(--vw-void-2);
  --vw-line: var(--vw-void-line);
  --vw-fg:   var(--vw-void-ink);
  --vw-fg-2: var(--vw-void-ink-2);
  --vw-fg-3: var(--vw-void-ink-3);
  color: var(--vw-fg);
  background: var(--vw-bg);
}

/* ─────────────────────────  Semantic type  ───────────────────────── */
.vw-display-1,
.vw-display-2,
.vw-h1, .vw-h2, .vw-h3, .vw-h4 {
  font-family: var(--vw-font-display);
  color: var(--vw-fg);
  letter-spacing: var(--vw-track-display);
  line-height: 1.02;
  font-weight: 600;
  text-wrap: balance;
  margin: 0;
}
.vw-display-1 { font-size: var(--vw-display-1); font-weight: 600; line-height: 0.98; }
.vw-display-2 { font-size: var(--vw-display-2); font-weight: 600; line-height: 1.02; }
.vw-h1 { font-size: var(--vw-h1); }
.vw-h2 { font-size: var(--vw-h2); }
.vw-h3 { font-size: var(--vw-h3); line-height: 1.2; }
.vw-h4 { font-size: var(--vw-h4); line-height: 1.3; font-weight: 600; }

.vw-eyebrow {
  font-family: var(--vw-font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: var(--vw-track-eyebrow);
  text-transform: uppercase;
  color: var(--vw-accent);
}
.vw-eyebrow--muted { color: var(--vw-fg-3); }

.vw-p {
  font-family: var(--vw-font-body);
  font-size: var(--vw-body);
  line-height: 1.55;
  color: var(--vw-fg-2);
  margin: 0;
  text-wrap: pretty;
}
.vw-p--lead { font-size: 18px; line-height: 1.5; }
.vw-p--sm   { font-size: var(--vw-body-sm); }

.vw-caption {
  font-family: var(--vw-font-body);
  font-size: var(--vw-caption);
  color: var(--vw-fg-3);
  letter-spacing: 0.01em;
}

.vw-code, code, kbd, samp, pre {
  font-family: var(--vw-font-mono);
  font-size: 13px;
}

.vw-accent-text { color: var(--vw-accent); }

/* ─────────────────────────  Base reset shims  ───────────────────────── */
html, body {
  background: var(--vw-bg);
  color: var(--vw-fg);
  font-family: var(--vw-font-body);
  font-size: var(--vw-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
* { box-sizing: border-box; }
/* Voidwall landing — layout & component shims (root-relative) */
:root {
  --max-w: 1200px;
  --gutter: 32px;
  --vw-ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
}

html, body { margin: 0; }
body { background: var(--vw-paper); }

.vw-container { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--gutter); }
.vw-section { padding: 96px 0; }
.vw-section--tight { padding: 64px 0; }

/* Buttons */
.vw-btn {
  font-family: var(--vw-font-body); font-size: 14px; font-weight: 500;
  height: 44px; padding: 0 20px; border-radius: 10px;
  display: inline-flex; align-items: center; gap: 10px;
  border: 0; cursor: pointer;
  transition: background .18s var(--vw-ease-out), transform .18s var(--vw-ease-out), color .18s var(--vw-ease-out);
  text-decoration: none; white-space: nowrap;
}
.vw-btn .arrow { display: inline-block; transition: transform .18s var(--vw-ease-out); }
.vw-btn:hover .arrow { transform: translateX(2px); }
.vw-btn:active { transform: translateY(1px); }

.vw-btn--primary { background: var(--vw-paper-ink); color: var(--vw-paper); }
.vw-btn--primary:hover { background: var(--vw-void-2); }
.vw-btn--ghost { background: transparent; color: var(--vw-fg); padding-left: 0; }
.vw-btn--link { background: transparent; color: var(--vw-violet-500); padding: 0; height: auto; font-weight: 500; }

.vw-void .vw-btn--primary { background: var(--vw-violet-400); color: var(--vw-void); box-shadow: var(--vw-shadow-glow); }
.vw-void .vw-btn--primary:hover { background: var(--vw-violet-300); }
.vw-void .vw-btn--ghost { color: var(--vw-void-ink); }

/* Void band tweaks */
.void-band { background: var(--vw-void); color: var(--vw-void-ink); }
.void-band .vw-eyebrow { color: var(--vw-violet-300); }

/* Reveal-on-scroll */
.vw-reveal { opacity: 0; transform: translateY(12px); transition: opacity .6s var(--vw-ease-out), transform .6s var(--vw-ease-out); }
.vw-reveal.is-in { opacity: 1; transform: none; }

/* Generic card on paper */
.vw-paper-card {
  background: var(--vw-paper);
  border: 1px solid var(--vw-paper-line);
  border-radius: 14px;
}

/* Generic card on void */
.vw-void-card {
  background: var(--vw-void-2);
  border: 1px solid var(--vw-void-line);
  border-radius: 14px;
  transition: border-color .18s var(--vw-ease-out);
}
.vw-void-card:hover { border-color: var(--vw-void-3); }

/* Hairline divider */
.vw-rule { border: 0; border-top: 1px solid var(--vw-paper-line); margin: 0; }
.vw-void .vw-rule, .void-band .vw-rule { border-top-color: var(--vw-void-line); }

/* Code blocks */
.vw-code-pane {
  font-family: var(--vw-font-mono);
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--vw-void-ink);
  background: var(--vw-void);
  border: 1px solid var(--vw-void-line);
  border-radius: 12px;
  padding: 18px 20px;
  white-space: pre;
  overflow: auto;
}
.vw-code-pane .k { color: var(--vw-violet-300); }
.vw-code-pane .s { color: #C8A35F; }
.vw-code-pane .c { color: var(--vw-void-ink-3); }
.vw-code-pane .n { color: var(--vw-success); }
.vw-code-pane .r { color: var(--vw-danger); }
.vw-code-pane .m { background: rgba(229,86,75,0.18); color: #F4A39C; padding: 0 4px; border-radius: 3px; }
.vw-code-pane .mk { background: rgba(56,178,122,0.18); color: #8FD8B0; padding: 0 4px; border-radius: 3px; }

/* Chip / pill */
.vw-chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 26px; padding: 0 10px;
  border-radius: var(--vw-r-pill);
  font-family: var(--vw-font-body); font-size: 12px;
  border: 1px solid var(--vw-paper-line);
  color: var(--vw-paper-ink-2);
  background: var(--vw-paper);
}
.vw-void .vw-chip, .void-band .vw-chip {
  border-color: var(--vw-void-line); color: var(--vw-void-ink-2); background: transparent;
}

/* Section heading helpers */
.vw-section-head {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 64px;
  align-items: end;
  margin-bottom: 56px;
}
.vw-section-head h2 {
  font-family: var(--vw-font-display);
  font-size: 44px; font-weight: 600;
  letter-spacing: -0.025em; line-height: 1.02;
  margin: 0; text-wrap: balance;
}
.vw-section-head p {
  font-family: var(--vw-font-body); font-size: 16px; line-height: 1.55;
  color: var(--vw-paper-ink-2); margin: 0; max-width: 460px;
}
.vw-void .vw-section-head p, .void-band .vw-section-head p { color: var(--vw-void-ink-2); }

/* Anchor scroll padding (nav offset) */
html { scroll-behavior: smooth; scroll-padding-top: 80px; }

/* Blog post body — rendered from markdown into a narrow reading column. */
.vw-prose {
  font-family: var(--vw-font-body);
  font-size: 17px; line-height: 1.7;
  color: var(--vw-paper-ink-2);
}
.vw-prose > :first-child { margin-top: 0; }
.vw-prose > :last-child { margin-bottom: 0; }
.vw-prose h2 {
  font-family: var(--vw-font-display);
  font-size: 28px; font-weight: 600;
  letter-spacing: -0.02em; line-height: 1.15;
  color: var(--vw-paper-ink);
  margin: 56px 0 18px; text-wrap: balance;
}
.vw-prose h3 {
  font-family: var(--vw-font-display);
  font-size: 21px; font-weight: 600;
  letter-spacing: -0.015em; line-height: 1.2;
  color: var(--vw-paper-ink);
  margin: 40px 0 14px; text-wrap: balance;
}
.vw-prose p { margin: 0 0 24px; text-wrap: pretty; }
.vw-prose ul, .vw-prose ol { margin: 0 0 24px; padding-left: 24px; }
.vw-prose img { display: block; width: 100%; height: auto; margin: 0 0 24px; border-radius: 8px; cursor: zoom-in; }
.vw-prose li { margin: 0 0 8px; }
.vw-prose li::marker { color: var(--vw-paper-ink-3); }
.vw-prose strong { color: var(--vw-paper-ink); font-weight: 600; }
.vw-prose a { color: var(--vw-violet-500); text-decoration: underline; text-underline-offset: 2px; }
.vw-prose blockquote {
  margin: 0 0 24px; padding: 4px 0 4px 20px;
  border-left: 2px solid var(--vw-violet-300);
  color: var(--vw-paper-ink); font-style: italic;
}
.vw-prose code {
  font-family: var(--vw-font-mono); font-size: 0.88em;
  background: var(--vw-paper-2); border: 1px solid var(--vw-paper-line);
  border-radius: var(--vw-r-xs); padding: 1px 5px;
}
.vw-prose pre {
  margin: 0 0 24px; padding: 18px 20px; overflow-x: auto;
  background: var(--vw-void); color: var(--vw-void-ink-2);
  border-radius: var(--vw-r-md);
  font-family: var(--vw-font-mono); font-size: 14px; line-height: 1.55;
}
.vw-prose pre code { background: none; border: 0; padding: 0; color: inherit; font-size: inherit; }
.vw-prose table {
  display: block; overflow-x: auto;
  width: 100%; margin: 0 0 24px;
  border-collapse: collapse;
  font-size: 14.5px; line-height: 1.5;
}
.vw-prose thead { border-bottom: 2px solid var(--vw-paper-line); }
.vw-prose th {
  font-family: var(--vw-font-body); font-weight: 600;
  color: var(--vw-paper-ink); text-align: left;
  padding: 10px 16px; white-space: nowrap;
}
.vw-prose td {
  padding: 10px 16px;
  border-bottom: 1px solid var(--vw-paper-line);
  color: var(--vw-paper-ink-2);
}
.vw-prose td[align="right"], .vw-prose th[align="right"] { font-variant-numeric: tabular-nums; }
.vw-prose tbody tr:last-child td { border-bottom: 0; }
.vw-prose .vw-footnote {
  margin: 32px 0 24px; padding-top: 16px;
  border-top: 1px solid var(--vw-paper-line);
  font-size: 13.5px; line-height: 1.6;
  color: var(--vw-paper-ink-3);
}
.vw-prose .vw-footnote-mark { color: var(--vw-violet-500); font-weight: 600; }

/* ============================================================
   Responsive — mobile & tablet
   ------------------------------------------------------------
   The desktop styles above are the ≥1025px baseline. Layout
   grids are authored as inline styles in the JSX, which a plain
   stylesheet rule can't override — so the collapses below use
   !important to win over the inline grid-template-columns.
   Marker classes (.r-*) are added in the JSX purely as hooks.
   ============================================================ */

/* Nav → hamburger. Collapses first (the full link row + two CTAs
   need ~1140px to fit), before the body layout does. */
@media (max-width: 1024px) {
  .r-nav-links,
  .r-nav-actions { display: none !important; }
  .r-nav-toggle { display: inline-flex !important; }
  .r-nav-panel[data-open="1"] { display: block !important; }
}

/* Tablet and below — multi-column layouts collapse. */
@media (max-width: 900px) {
  :root { --gutter: 24px; }

  .r-hero,
  .r-coverage,
  .r-perf-head,
  .r-features,
  .r-perf-cards,
  .r-perf-feats,
  .r-cards-3,
  .r-cov-cards,
  .r-params,
  .r-codepanes,
  .vw-section-head { grid-template-columns: 1fr !important; }

  .r-hero { gap: 40px !important; }
  .r-hero-art { display: none !important; }              /* decorative; drop it on small screens */
  .r-coverage { gap: 40px !important; }
  .r-coverage-side { position: static !important; }
  .r-perf-head { gap: 24px !important; align-items: start !important; }
  .vw-section-head { gap: 16px !important; margin-bottom: 40px !important; }

  /* Two-up numbers rather than five squeezed across. */
  .r-metrics { grid-template-columns: 1fr 1fr !important; gap: 32px 24px !important; }

  /* Divider rows: drop the vertical hairlines and the horizontal
     padding they spaced, lean on the grid gap instead. */
  .r-metrics > div,
  .r-features > div,
  .r-perf-feats > div {
    border-left: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .r-features { gap: 40px !important; }
  .r-perf-feats { gap: 32px !important; }
  .r-perf-cards,
  .r-cards-3 { gap: 16px !important; }
  .r-cov-cards { gap: 12px !important; }
  .r-cards-3 h3 { min-height: 0 !important; }            /* uneven title heights don't matter stacked */

  /* Stacked side-by-side panes: swap the inner right divider for a
     bottom one on the first pane. */
  .r-params > div:first-child,
  .r-codepanes > div:first-child {
    border-right: 0 !important;
    border-bottom: 1px solid var(--vw-void-line) !important;
  }
}

/* Phone — single column throughout, tighter gutter, smaller display type. */
@media (max-width: 640px) {
  :root { --gutter: 16px; }

  .r-metrics { grid-template-columns: 1fr !important; }
  .r-langs { grid-template-columns: 1fr 1fr !important; }

  .r-blog-head {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 20px !important;
  }

  .r-hero-h1 { font-size: 40px !important; min-height: 0 !important; }
  .r-section-h2 { font-size: 30px !important; }
  .r-page-h1 { font-size: 34px !important; }
  .r-stat { font-size: 40px !important; }
}