/* =============================================================================
   EXPR — Design System
   Extracted from expr-eval.html
   ============================================================================= */


/* =============================================================================
   1. DESIGN TOKENS
   ============================================================================= */

:root {

  /* ── Color Palette ── */

  /* Backgrounds */
  --color-bg:          #f5f0e8;   /* page canvas — warm off-white */
  --color-surface:     #faf7f2;   /* cards, panels, footer */
  --color-surface-2:   #ede8df;   /* inset areas, hover states, kbd */

  /* Borders */
  --color-border:      #ddd7cc;   /* default border */
  --color-border-2:    #ccc5b8;   /* stronger border, scrollbar thumb */

  /* Ink (text) */
  --color-ink:         #1e1b17;   /* primary text */
  --color-ink-2:       #5a5549;   /* secondary text */
  --color-ink-3:       #9c9589;   /* tertiary / muted text */

  /* Accent — destructive / brand red */
  --color-accent:      #c0392b;
  --color-accent-bg:   #fdf1ef;   /* tinted background for error states */

  /* Green — success */
  --color-green:       #2d6a4f;
  --color-green-bg:    #edf7f1;   /* tinted background for success states */

  /* Elevation */
  --color-shadow:      rgba(30, 27, 23, 0.08);

  /* Code / dark surface */
  --color-code-bg:     #1e1b17;   /* same as --color-ink, used for dark blocks */
  --color-code-text:   #d4c9bc;

  /* Code token colours */
  --color-code-kw:     #e8a44a;   /* keywords */
  --color-code-str:    #a8c98e;   /* strings */
  --color-code-num:    #7ec8e3;   /* numbers */
  --color-code-dim:    rgba(212, 201, 188, 0.4); /* comments / dim */


  /* ── Typography ── */

  --font-sans:   'DM Sans', sans-serif;
  --font-mono:   'DM Mono', monospace;

  /* Scale — fluid where used with clamp(), fixed elsewhere */
  --text-xs:     0.68rem;   /* 10.9px  — labels, badges */
  --text-sm:     0.72rem;   /* 11.5px  — footer, hints */
  --text-base:   0.82rem;   /* 13.1px  — body copy in sections */
  --text-md:     0.875rem;  /* 14px    — buttons, nav */
  --text-lg:     0.92rem;   /* 14.7px  — subtext, hero p */
  --text-xl:     1rem;      /* 16px    — input value */
  --text-2xl:    1.1rem;    /* 17.6px  — brand name */
  --text-3xl:    1.15rem;   /* 18.4px  — footer brand */
  --text-hero:   clamp(2.2rem, 6vw, 3.2rem);   /* h1 */
  --text-api-h:  clamp(1.9rem, 4vw, 2.8rem);   /* api section heading */
  --text-result: clamp(1.5rem, 4vw, 2.2rem);   /* result value */

  /* Weight */
  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* Leading */
  --leading-tight:  1.15;
  --leading-normal: 1.6;
  --leading-loose:  1.7;

  /* Tracking */
  --tracking-tight:  -0.03em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;
  --tracking-wider:   0.07em;
  --tracking-widest:  0.1em;


  /* ── Spacing ── */

  --space-1:    0.2rem;    /*  3.2px */
  --space-2:    0.4rem;    /*  6.4px */
  --space-3:    0.45rem;   /*  7.2px */
  --space-4:    0.5rem;    /*  8px   */
  --space-5:    0.55rem;   /*  8.8px */
  --space-6:    0.65rem;   /* 10.4px */
  --space-7:    0.75rem;   /* 12px   */
  --space-8:    0.8rem;    /* 12.8px */
  --space-9:    1rem;      /* 16px   */
  --space-10:   1.25rem;   /* 20px   */
  --space-11:   1.4rem;    /* 22.4px */
  --space-12:   1.5rem;    /* 24px   */
  --space-13:   1.75rem;   /* 28px   */
  --space-14:   2rem;      /* 32px   */
  --space-15:   2.5rem;    /* 40px   */
  --space-16:   3rem;      /* 48px   */
  --space-17:   3.5rem;    /* 56px   */
  --space-18:   4rem;      /* 64px   */
  --space-19:   5rem;      /* 80px   */.post-footer-cta
  --space-20:   6rem;	   /* 96px   */
  --space-21:   7rem;	   /* 112px  */
  --space-22:  8rem;	   /* 128px  */


  /* ── Border Radius ── */

  --radius-sm:   3px;
  --radius-md:   4px;
  --radius-lg:   6px;
  --radius-xl:   8px;
  --radius-2xl:  10px;
  --radius-3xl:  14px;
  --radius-full: 50%;


  /* ── Shadows ── */

  --shadow-sm:  0 1px 3px var(--color-shadow);
  --shadow-md:  0 1px 4px var(--color-shadow);
  --shadow-lg:  0 2px 14px var(--color-shadow), 0 1px 3px var(--color-shadow);
  --shadow-btn: 0 3px 10px var(--color-shadow);


  /* ── Transitions ── */

  --transition-fast:   0.15s;
  --transition-base:   0.2s;
  --transition-slow:   0.3s;
  --transition-result: 0.4s 0.15s;   /* delayed fade for result source */


  /* ── Z-index ── */

  --z-texture: 100;   /* paper-texture pseudo-element */


  /* ── Layout ── */

  --max-w-content:  640px;   /* main column */
  --max-w-wide:     900px;   /* api section */
  --max-w-footer:  1100px;   /* site footer */

  --page-padding-x: 1.5rem;
  --page-padding-y: 3rem;

  /* ── Operator group colors ── */

  --color-unary:          #b8750e;
  --color-unary-bg:       #fdf6ea;
  --color-unary-border:   #f0c97a;

  --color-binary:         #1a6fc4;
  --color-binary-bg:      #edf4fd;
  --color-binary-border:  #90c3f0;

  --color-logical:        #1a7a4a;
  --color-logical-bg:     #e8f5ee;
  --color-logical-border: #7ecda4;

  --color-ternary:        #7040c8;
  --color-ternary-bg:     #f2eefb;
  --color-ternary-border: #c4a8f0;
}


/* =============================================================================
   2. RESET
   ============================================================================= */

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

html {
  font-size: 16px;
  scroll-behavior: smooth;
}


/* =============================================================================
   3. BASE / GLOBAL
   ============================================================================= */

body {
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--page-padding-y) var(--page-padding-x) 0;
}

/* Paper-texture overlay */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
  z-index: var(--z-texture);
}


/* =============================================================================
   4. TYPOGRAPHY
   ============================================================================= */

/* Uppercase label — used for field labels, section headings */
.label {
  display: block;
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-ink-3);
}

/* Monospace inline */
.mono {
  font-family: var(--font-mono);
}

kbd {
  font-family: var(--font-mono);
  font-size: 0.85em;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border-2);
  border-radius: var(--radius-sm);
  padding: 0.1em 0.4em;
  color: var(--color-ink-2);
  box-shadow: 0 1px 0 var(--color-border-2);
}


/* =============================================================================
   5. LAYOUT
   ============================================================================= */

/* Centred content column */
.wrap {
  width: 100%;
  max-width: var(--max-w-content);
}

/* Full-bleed section (breaks out of .wrap) */
.full-bleed {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
}


/* =============================================================================
   6. ANIMATIONS
   ============================================================================= */

@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Staggered entry helpers */
.rise          { animation: rise 0.6s ease both; }
.rise-2        { animation: rise 0.6s ease 0.06s both; }
.rise-3        { animation: rise 0.6s ease 0.12s both; }
.rise-4        { animation: rise 0.6s ease 0.2s both; }
.rise-5        { animation: rise 0.6s ease 0.26s both; }
.fade-in       { animation: fadeIn 0.25s ease both; }


/* =============================================================================
   7. COMPONENTS
   ============================================================================= */

/* ── 7.1 Brand / Nav ────────────────────────────────────────────────────────── */

.brand {
  display: flex;
  align-items: center;
  gap: var(--space-5);
}

.brand-name {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--text-2xl);
  letter-spacing: -0.01em;
  color: var(--color-ink);
}

.brand-full {
  font-size: 0.78rem;
  color: var(--color-ink-2);
  letter-spacing: 0.01em;
}

.brand-full strong {
  font-weight: var(--fw-bold);
  color: var(--color-ink);
}

.brand-dot {
  width: 7px;
  height: 7px;
  background: var(--color-accent);
  border-radius: var(--radius-full);
  flex-shrink: 0;
}

/* Monospace version badge */
.brand-tag {
  text-decoration: none;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-ink-3);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  padding: 0.2em 0.55em;
  border-radius: var(--radius-sm);
  letter-spacing: var(--tracking-wide);
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.brand-tag:hover {
  color: var(--color-ink);
  border-color: var(--color-border-2);
}

/* Inline underline link */
.docs-link {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: var(--fw-medium);
  color: var(--color-ink-3);
  text-decoration: none;
  border-bottom: 1px solid var(--color-border-2);
  padding-bottom: 1px;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.docs-link:hover {
  color: var(--color-ink);
  border-bottom-color: var(--color-ink-2);
}


/* ── 7.2 Panel (card) ────────────────────────────────────────────────────────── */

.panel {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-3xl);
  padding: var(--space-14);
  box-shadow: var(--shadow-lg);
}

.divider {
  height: 1px;
  background: var(--color-border);
  margin: 0 0 var(--space-13);
}


/* ── 7.3 Inputs ──────────────────────────────────────────────────────────────── */

.input {
  background: var(--color-bg);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-xl);
  color: var(--color-ink);
  font-family: var(--font-mono);
  font-size: var(--text-xl);
  padding: var(--space-7) var(--space-9);
  outline: none;
  transition:
    border-color var(--transition-base),
    box-shadow var(--transition-base);
  caret-color: var(--color-accent);
  width: 100%;
}

.input::placeholder { color: var(--color-ink-3); }

.input:focus {
  border-color: var(--color-ink-2);
  box-shadow: 0 0 0 3px rgba(30, 27, 23, 0.07);
}

/* Textarea variant */
textarea.input,
.input--textarea {
  resize: vertical;
  min-height: 9rem;
  line-height: var(--leading-normal);
  font-family: var(--font-sans);
  font-size: var(--text-base);
}

/* Smaller variant (used in subscribe row) */
.input--sm {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  padding: var(--space-4) var(--space-8);
  border-radius: var(--radius-lg);
}


/* ── 7.4 Buttons ─────────────────────────────────────────────────────────────── */

/* Primary — dark fill */
.btn {
  background: var(--color-ink);
  color: var(--color-bg);
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  font-size: var(--text-md);
  border: none;
  border-radius: var(--radius-xl);
  padding: var(--space-7) var(--space-11);
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  transition:
    background var(--transition-fast),
    transform 0.1s,
    box-shadow var(--transition-fast);
  box-shadow: var(--shadow-md);
  text-decoration: none;
}

.btn:hover {
  background: #2d2924;
  box-shadow: var(--shadow-btn);
}

.btn:active { transform: scale(0.97); }

/* Small variant */
.btn--sm {
  font-size: var(--text-base);
  font-weight: var(--fw-semibold);
  padding: var(--space-4) var(--space-9);
  border-radius: var(--radius-lg);
}

/* Ghost / text button */
.btn-ghost {
  background: none;
  border: none;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: var(--fw-medium);
  color: var(--color-ink-3);
  cursor: pointer;
  padding-bottom: 1px;
  border-bottom: 1px solid transparent;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.btn-ghost:hover {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
}

/* Underline text link */
.link-underline {
  font-family: var(--font-sans);
  font-size: var(--text-md);
  font-weight: var(--fw-medium);
  color: var(--color-ink-2);
  text-decoration: none;
  border-bottom: 1px solid var(--color-border-2);
  padding-bottom: 1px;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.link-underline:hover {
  color: var(--color-ink);
  border-bottom-color: var(--color-ink);
}

/* Animated arrow inside a button */
.arrow {
  display: inline-block;
  transition: transform var(--transition-base);
}

.btn:hover .arrow { transform: translateX(3px); }


/* ── 7.5 Result Box ──────────────────────────────────────────────────────────── */

.result-box {
  border-radius: var(--radius-xl);
  padding: var(--space-10) var(--space-10) var(--space-9);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  min-height: 5.5rem;
  transition:
    background var(--transition-slow),
    border-color var(--transition-slow);
}

.result-box--success {
  background: var(--color-green-bg);
  border-color: #a8d5be;
}

.result-box--error {
  background: var(--color-accent-bg);
  border-color: #f0b8b3;
}

.result-status {
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-ink-3);
  margin-bottom: var(--space-4);
  transition: color var(--transition-slow);
}

.result-box--success .result-status { color: var(--color-green); }
.result-box--error   .result-status { color: var(--color-accent); }

.result-value {
  font-family: var(--font-mono);
  font-size: var(--text-result);
  font-weight: var(--fw-medium);
  color: var(--color-ink);
  line-height: var(--leading-tight);
  word-break: break-all;
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity var(--transition-slow),
    transform var(--transition-slow),
    color var(--transition-slow);
}

.result-box--success .result-value { color: var(--color-green); }

.result-box--error .result-value {
  color: var(--color-accent);
  font-size: var(--text-lg);
  font-weight: var(--fw-regular);
}

.result-value--show {
  opacity: 1;
  transform: translateY(0);
}

.result-source {
  margin-top: var(--space-2);
  font-size: 0.78rem;
  font-family: var(--font-mono);
  color: var(--color-ink-3);
  opacity: 0;
  transition: opacity var(--transition-result);
}

.result-source--show { opacity: 1; }


/* ── 7.6 History ─────────────────────────────────────────────────────────────── */

.history-list {
  display: flex;
  flex-direction: column;
  max-height: 260px;
  overflow-y: auto;
}

.history-list::-webkit-scrollbar { width: 4px; }
.history-list::-webkit-scrollbar-thumb {
  background: var(--color-border-2);
  border-radius: 2px;
}

.history-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-7);
  padding: var(--space-6) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--transition-fast);
  animation: fadeIn 0.25s ease both;
}

.history-item:hover { background: var(--color-surface-2); }
.history-item:last-child { border-bottom: none; }

.hi-expr {
  font-family: var(--font-mono);
  font-size: var(--text-base);
  color: var(--color-ink-2);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hi-eq {
  font-size: 0.78rem;
  color: var(--color-ink-3);
  flex-shrink: 0;
}

.hi-result {
  font-family: var(--font-mono);
  font-size: var(--text-base);
  font-weight: var(--fw-medium);
  color: var(--color-green);
  white-space: nowrap;
  flex-shrink: 0;
}

.hi-result--error {
  color: var(--color-accent);
  font-weight: var(--fw-regular);
}


/* ── 7.7 Code Block ──────────────────────────────────────────────────────────── */

.code-wrap {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
  overflow: hidden;
  background: var(--color-code-bg);
}

.copy-btn {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  color: rgba(255, 255, 255, 0.4);
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-md);
  padding: 0.2em 0.6em;
  cursor: pointer;
  transition: color var(--transition-fast), border-color var(--transition-fast);
  letter-spacing: var(--tracking-wide);
}

.copy-btn:hover {
  color: rgba(255, 255, 255, 0.8);
  border-color: rgba(255, 255, 255, 0.25);
}

.code-block {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  line-height: 1.75;
  color: var(--color-code-text);
  padding: var(--space-10) var(--space-10) var(--space-11);
  overflow-x: auto;
  white-space: pre;
  margin: 0;
}

/* Syntax token classes */
.c-kw  { color: var(--color-code-kw);  }
.c-str { color: var(--color-code-str); }
.c-num { color: var(--color-code-num); }
.c-dim { color: var(--color-code-dim); }


/* ── 7.8 Site Footer ─────────────────────────────────────────────────────────── */

.site-footer {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  padding: var(--space-17) 2rem 0;
}

.footer-inner {
  max-width: var(--max-w-footer);
  margin: 0 auto;
  display: flex;
  gap: var(--space-18);
  padding-bottom: var(--space-16);
  flex-wrap: wrap;
  justify-content: center;
}

.footer-left {
  flex: 0 0 280px;
  min-width: 220px;
  display: flex;
  flex-direction: column;
  gap: var(--space-9);
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.footer-brand-name {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--text-3xl);
  letter-spacing: -0.02em;
  color: var(--color-ink);
}

.footer-tagline {
  font-size: var(--text-base);
  color: var(--color-ink-3);
  line-height: var(--leading-loose);
}

.footer-right {
  flex: 0 0 auto;
  display: flex;
  gap: var(--space-15);
  flex-wrap: wrap;
}

.footer-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  min-width: 110px;
}

.footer-col-heading {
  font-size: var(--text-sm);
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-ink);
  margin-bottom: var(--space-1);
}

.footer-col a {
  font-size: var(--text-base);
  color: var(--color-ink-3);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.footer-col a:hover { color: var(--color-ink); }

.footer-col-subheading {
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-ink-3);
  margin-top: var(--space-7);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
}

.footer-resources-row {
  max-width: var(--max-w-footer);
  margin: 0 auto;
  padding: var(--space-13) 0 var(--space-13);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-12);
}

.footer-resources-label {
  text-align: center;
}

.footer-resources-cols {
  width: 100%;
  display: flex;
  justify-content: center;
  gap: var(--space-15);
  flex-wrap: wrap;
}

.footer-bottom {
  max-width: var(--max-w-footer);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-10) 0 var(--space-13);
  font-size: 0.75rem;
  color: var(--color-ink-3);
  gap: var(--space-12);
  flex-wrap: wrap;
}

.footer-socials {
  display: flex;
  align-items: center;
  gap: var(--space-9);
}

.footer-socials a {
  color: var(--color-ink-3);
  transition: color var(--transition-fast);
  display: flex;
  align-items: center;
}

.footer-socials a:hover { color: var(--color-ink); }

.footer-changelog {
  display: flex;
  align-items: center;
  gap: var(--space-9);
}

.footer-changelog a {
  color: var(--color-ink-3);
  transition: color var(--transition-fast);
  display: flex;
  align-items: center;
}

.footer-changelog a:hover { color: var(--color-ink); }


/* ── 7.9 Subscribe Widget ────────────────────────────────────────────────────── */

.subscribe {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.subscribe-row {
  display: flex;
  gap: var(--space-4);
}

.subscribe-note {
  font-size: var(--text-sm);
  color: var(--color-ink-3);
}


/* =============================================================================
   8. PAGE SECTIONS
   ============================================================================= */

/* ── 8.1 Nav ─────────────────────────────────────────────────────────────────── */

nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-17);
  animation: rise 0.6s ease both;
}


/* ── 8.2 Hero ────────────────────────────────────────────────────────────────── */

.hero {
  margin-bottom: var(--space-15);
  animation: rise 0.6s ease 0.06s both;
}

.hero h1 {
  font-family: var(--font-sans);
  font-weight: var(--fw-light);
  font-size: var(--text-hero);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-ink);
}

.hero h1 em {
  font-style: italic;
  color: var(--color-ink-2);
}

.hero p {
  margin-top: var(--space-8);
  font-size: var(--text-lg);
  color: var(--color-ink-3);
  line-height: var(--leading-loose);
  max-width: 400px;
}


/* ── 8.3 Panel animation + input row ─────────────────────────────────────────── */

.panel { animation: rise 0.6s ease 0.12s both; }

.input-row {
  display: flex;
  gap: var(--space-7);
  margin-bottom: var(--space-13);
}

.input-row .input { flex: 1; min-width: 0; }


/* ── 8.4 History section ─────────────────────────────────────────────────────── */

.history {
  margin-top: var(--space-15);
  animation: rise 0.6s ease 0.2s both;
}

.history-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-9);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--color-border);
}


/* ── 8.5 Hint bar ────────────────────────────────────────────────────────────── */

.hint-bar {
  margin-top: var(--space-15);
  font-size: var(--text-sm);
  color: var(--color-ink-3);
  text-align: center;
  animation: rise 0.6s ease 0.26s both;
}


/* ── 8.6 API Section ─────────────────────────────────────────────────────────── */

.api-section {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-19) 2rem;
}

.api-inner {
  max-width: var(--max-w-wide);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.api-header {
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
  max-width: 560px;
}

.api-eyebrow {
  font-size: var(--text-sm);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-accent);
}

.api-heading {
  font-family: var(--font-sans);
  font-weight: var(--fw-light);
  font-size: var(--text-api-h);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-ink);
}

.api-heading em {
  font-style: italic;
  color: var(--color-ink-2);
}

.api-subtext {
  font-size: var(--text-lg);
  color: var(--color-ink-3);
  line-height: var(--leading-loose);
  max-width: 480px;
}

.api-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-15);
  align-items: start;
}

.api-features {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

.api-feature {
  display: flex;
  gap: var(--space-9);
  align-items: flex-start;
}

.api-feature-icon {
  font-size: 1.2rem;
  line-height: 1;
  margin-top: 0.1rem;
  flex-shrink: 0;
}

.api-feature strong {
  display: block;
  font-size: 0.88rem;
  font-weight: var(--fw-semibold);
  color: var(--color-ink);
  margin-bottom: var(--space-1);
}

.api-feature p {
  font-size: var(--text-base);
  color: var(--color-ink-3);
  line-height: var(--leading-normal);
}

.api-cta {
  display: flex;
  gap: var(--space-9);
  align-items: center;
  flex-wrap: wrap;
}


/* ── 8.7 Footer brand full ───────────────────────────────────────────────────── */

.footer-brand-full {
  font-size: 0.8rem;
  color: var(--color-ink-2);
}

.footer-brand-full strong {
  font-weight: var(--fw-bold);
  color: var(--color-ink);
}


/* =============================================================================
   9. RESPONSIVE
   ============================================================================= */

@media (max-width: 700px) {
  .api-content {
    grid-template-columns: 1fr;
  }
}


/* =============================================================================
   10. DOCUMENTATION
   ============================================================================= */

/* ── 10.1 Docs body override ────────────────────────────────────────────────── */

body.docs-page {
  align-items: stretch;
  padding: 0;
}


/* ── 10.2 Docs top bar ──────────────────────────────────────────────────────── */

.docs-topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
}

.docs-topbar-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--space-8) var(--space-15);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.docs-breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-ink-3);
}

.docs-breadcrumb a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition-fast);
}

.docs-breadcrumb a:hover { color: var(--color-ink); }


/* ── Page nav wrapper — used on all interior pages instead of docs-topbar ── */

.page-nav-wrap {
  padding: var(--page-padding-y) var(--page-padding-x) 0;
}

.page-nav-wrap nav {
  max-width: var(--max-w-content);
  margin: 0 auto var(--space-17);
}


/* ── 10.3 Docs layout ───────────────────────────────────────────────────────── */

.docs-layout {
  display: grid;
  grid-template-columns: 230px 1fr;
  max-width: 1200px;
  margin: 0 auto;
  min-height: 100vh;
}


/* ── 10.4 Docs sidebar ──────────────────────────────────────────────────────── */

.docs-sidebar {
  border-right: 1px solid var(--color-border);
  padding: var(--space-13) 0;
}

.docs-sidebar-inner {
  position: sticky;
  top: 16px;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  padding: 0 var(--space-8);
  scrollbar-width: thin;
  scrollbar-color: var(--color-border-2) transparent;
}

.docs-sidebar-inner::-webkit-scrollbar { width: 4px; }
.docs-sidebar-inner::-webkit-scrollbar-thumb {
  background: var(--color-border-2);
  border-radius: 2px;
}

.docs-nav-group { margin-bottom: var(--space-10); }

.docs-nav-section {
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-ink-3);
  padding: 0 var(--space-5);
  margin-bottom: var(--space-3);
}

.docs-nav-link {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  color: var(--color-ink-2);
  text-decoration: none;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.docs-nav-link:hover {
  background: var(--color-surface-2);
  color: var(--color-ink);
}

.docs-nav-link.active {
  background: var(--color-surface-2);
  color: var(--color-ink);
  font-weight: var(--fw-medium);
}

.docs-nav-link code {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--color-ink-3);
  background: var(--color-surface-2);
  padding: 0.1em 0.35em;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}

.docs-nav-link.active code {
  background: var(--color-border);
  color: var(--color-ink-2);
}


/* ── 10.5 Docs main ─────────────────────────────────────────────────────────── */

.docs-main {
  padding: var(--space-13) var(--space-16) var(--space-19);
  max-width: 780px;
}


/* ── 10.6 Docs intro ────────────────────────────────────────────────────────── */

.docs-intro {
  margin-bottom: var(--space-18);
  padding-bottom: var(--space-15);
  border-bottom: 1px solid var(--color-border);
  animation: rise 0.5s ease both;
}

.docs-intro h1 {
  font-family: var(--font-sans);
  font-weight: var(--fw-light);
  font-size: clamp(2rem, 4vw, 2.8rem);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  color: var(--color-ink);
  margin-bottom: var(--space-8);
}

.docs-intro p {
  font-size: var(--text-lg);
  color: var(--color-ink-2);
  line-height: var(--leading-loose);
  max-width: 520px;
}


/* ── 10.7 Operator group section ────────────────────────────────────────────── */

.op-group {
  margin-bottom: var(--space-18);
  padding-bottom: var(--space-18);
  border-bottom: 1px solid var(--color-border);
}

.op-group:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.op-group-header { margin-bottom: var(--space-13); }

.op-group-eyebrow {
  display: block;
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-ink-3);
  margin-bottom: var(--space-4);
}

.op-group-name {
  font-size: 1.35rem;
  font-weight: var(--fw-semibold);
  letter-spacing: -0.01em;
  color: var(--color-ink);
  margin-bottom: var(--space-5);
}

.op-group-desc {
  font-size: var(--text-base);
  color: var(--color-ink-3);
  line-height: var(--leading-normal);
  max-width: 480px;
}

.op-group-desc code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--color-surface-2);
  padding: 0.1em 0.35em;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
}


/* ── 10.8 Operator cards ────────────────────────────────────────────────────── */

.op-cards {
  display: flex;
  flex-direction: column;
  gap: var(--space-11);
}

.op-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
  padding: var(--space-12) var(--space-13);
  scroll-margin-top: 80px;
  transition: box-shadow var(--transition-base);
}

.op-card:target {
  box-shadow: 0 0 0 2px var(--color-border-2), var(--shadow-lg);
}

.op-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-9);
}

.op-symbol {
  font-family: var(--font-mono);
  font-size: 1.6rem;
  font-weight: var(--fw-medium);
  color: var(--color-ink);
  line-height: 1;
  background: var(--color-surface-2);
  padding: var(--space-4) var(--space-9);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  letter-spacing: -0.02em;
}

.op-badges {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  justify-content: flex-end;
}


/* ── 10.9 Group badges ──────────────────────────────────────────────────────── */

.group-badge {
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  padding: 0.25em 0.7em;
  border-radius: var(--radius-lg);
  white-space: nowrap;
}

.group-badge--unary {
  background: var(--color-unary-bg);
  color: var(--color-unary);
  border: 1px solid var(--color-unary-border);
}

.group-badge--binary {
  background: var(--color-binary-bg);
  color: var(--color-binary);
  border: 1px solid var(--color-binary-border);
}

.group-badge--logical {
  background: var(--color-logical-bg);
  color: var(--color-logical);
  border: 1px solid var(--color-logical-border);
}

.group-badge--ternary {
  background: var(--color-ternary-bg);
  color: var(--color-ternary);
  border: 1px solid var(--color-ternary-border);
}

.group-badge--sub {
  background: var(--color-surface-2);
  color: var(--color-ink-3);
  border: 1px solid var(--color-border);
}

.op-name {
  font-size: 1.05rem;
  font-weight: var(--fw-semibold);
  color: var(--color-ink);
  margin-bottom: var(--space-5);
}

.op-desc {
  font-size: var(--text-base);
  color: var(--color-ink-2);
  line-height: var(--leading-loose);
  margin-bottom: var(--space-10);
}

.op-desc code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--color-surface-2);
  padding: 0.1em 0.35em;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  color: var(--color-ink-2);
}

.op-desc em { font-style: italic; color: var(--color-ink); }


/* ── 10.10 Truth / example tables ───────────────────────────────────────────── */

.table-wrap {
  margin-bottom: var(--space-10);
  overflow-x: auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
}

.truth-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-base);
  font-family: var(--font-mono);
}

.truth-table th {
  background: var(--color-surface-2);
  color: var(--color-ink-2);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  padding: var(--space-5) var(--space-9);
  text-align: left;
  border-bottom: 1px solid var(--color-border);
}

.truth-table td {
  padding: var(--space-5) var(--space-9);
  border-bottom: 1px solid var(--color-border);
  color: var(--color-ink);
}

.truth-table tr:last-child td { border-bottom: none; }
.truth-table tr:nth-child(even) td { background: rgba(30, 27, 23, 0.015); }

.truth-table td.val-true  { color: var(--color-green);  font-weight: var(--fw-medium); }
.truth-table td.val-false { color: var(--color-accent); }
.truth-table td.val-num   { color: var(--color-binary); font-weight: var(--fw-medium); }


/* ── 10.11 Example boxes ────────────────────────────────────────────────────── */

.op-example {
  border-radius: var(--radius-xl);
  padding: var(--space-9) var(--space-10);
  margin-top: var(--space-8);
}

.op-example-label {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  margin-bottom: var(--space-5);
}

.op-example-code {
  font-family: var(--font-mono);
  font-size: var(--text-base);
  line-height: 1.9;
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
}

/* Unary */
.op-example--unary {
  background: var(--color-unary-bg);
  border: 1px solid var(--color-unary-border);
}
.op-example--unary .op-example-label { color: var(--color-unary); }
.op-example--unary .op-example-code  { color: var(--color-unary); }

/* Arithmetic */
.op-example--arithmetic {
  background: var(--color-binary-bg);
  border: 1px solid var(--color-binary-border);
}
.op-example--arithmetic .op-example-label { color: var(--color-binary); }
.op-example--arithmetic .op-example-code  { color: var(--color-binary); }

/* Comparison */
.op-example--comparison {
  background: var(--color-ternary-bg);
  border: 1px solid var(--color-ternary-border);
}
.op-example--comparison .op-example-label { color: var(--color-ternary); }
.op-example--comparison .op-example-code  { color: var(--color-ternary); }

/* Logical */
.op-example--logical {
  background: var(--color-logical-bg);
  border: 1px solid var(--color-logical-border);
}
.op-example--logical .op-example-label { color: var(--color-logical); }
.op-example--logical .op-example-code  { color: var(--color-logical); }

/* Ternary */
.op-example--ternary {
  background: var(--color-ternary-bg);
  border: 1px solid var(--color-ternary-border);
}
.op-example--ternary .op-example-label { color: var(--color-ternary); }
.op-example--ternary .op-example-code  { color: var(--color-ternary); }


/* ── 10.12 Docs responsive ──────────────────────────────────────────────────── */

@media (max-width: 860px) {
  .docs-layout { grid-template-columns: 1fr; }
  .docs-sidebar { display: none; }
  .docs-main { padding: var(--space-10) var(--space-9) var(--space-16); }
}


/* =============================================================================
   11. PRICING PAGE
   ============================================================================= */

/* ── 11.1 Body override ──────────────────────────────────────────────────────── */

body.pricing-page {
  align-items: stretch;
  padding: 0;
}

.pricing-wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 var(--space-15);
}


/* ── 11.2 Pricing hero ───────────────────────────────────────────────────────── */

.pricing-hero {
  text-align: center;
  padding: var(--space-19) var(--space-15) var(--space-17);
  animation: rise 0.6s ease both;
}

.pricing-eyebrow {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-7);
}

.pricing-hero h1 {
  font-family: var(--font-sans);
  font-weight: var(--fw-light);
  font-size: clamp(2.4rem, 6vw, 3.8rem);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-ink);
  margin-bottom: var(--space-8);
}

.pricing-hero h1 em {
  font-style: italic;
  color: var(--color-ink-2);
}

.pricing-hero p {
  font-size: var(--text-lg);
  color: var(--color-ink-3);
  line-height: var(--leading-loose);
  max-width: 420px;
  margin: 0 auto;
}


/* ── 11.3 Pricing grid ───────────────────────────────────────────────────────── */

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-9);
  align-items: start;
  padding: 0 var(--space-15) var(--space-19);
  max-width: 1100px;
  margin: 0 auto;
}


/* ── 11.4 Pricing cards ──────────────────────────────────────────────────────── */

.pricing-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-3xl);
  padding: var(--space-13) var(--space-13) var(--space-14);
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
  animation: rise 0.6s ease both;
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.pricing-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}

/* Featured — Ultra */
.pricing-card--featured {
  border: 2px solid var(--color-ink);
  box-shadow: var(--shadow-lg);
  transform: translateY(-6px);
  animation-delay: 0.06s;
}

.pricing-card--featured:hover {
  transform: translateY(-9px);
  box-shadow: 0 6px 24px var(--color-shadow);
}

/* Premium — Mega (dark inversion) */
.pricing-card--premium {
  background: var(--color-ink);
  border-color: var(--color-ink);
  animation-delay: 0.12s;
}

.pricing-card--premium:hover {
  box-shadow: 0 4px 20px rgba(30, 27, 23, 0.25);
}


/* ── 11.5 Popular badge ──────────────────────────────────────────────────────── */

.pricing-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  background: var(--color-ink);
  color: var(--color-bg);
  padding: 0.3em 0.8em;
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-9);
  align-self: flex-start;
}

.pricing-badge-dot {
  width: 5px;
  height: 5px;
  border-radius: var(--radius-full);
  background: var(--color-accent);
  flex-shrink: 0;
}


/* ── 11.6 Tier info ──────────────────────────────────────────────────────────── */

.pricing-tier {
  font-family: var(--font-sans);
  font-size: var(--text-md);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-ink-3);
  margin-bottom: var(--space-5);
}

.pricing-card--premium .pricing-tier {
  color: rgba(212, 201, 188, 0.5);
}

.pricing-target {
  font-size: var(--text-base);
  color: var(--color-ink-2);
  line-height: var(--leading-normal);
  margin-bottom: var(--space-11);
  min-height: 2.6rem;
}

.pricing-card--premium .pricing-target {
  color: var(--color-code-text);
}


/* ── 11.7 Price display ──────────────────────────────────────────────────────── */

.price {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin-bottom: var(--space-12);
  padding-bottom: var(--space-12);
  border-bottom: 1px solid var(--color-border);
}

.pricing-card--premium .price {
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

.price-currency {
  font-family: var(--font-mono);
  font-size: 1.1rem;
  font-weight: var(--fw-regular);
  color: var(--color-ink-3);
  line-height: 1;
  align-self: flex-start;
  margin-top: 0.6rem;
}

.price-amount {
  font-family: var(--font-mono);
  font-size: clamp(2.8rem, 5vw, 3.4rem);
  font-weight: var(--fw-medium);
  color: var(--color-ink);
  line-height: 1;
  letter-spacing: -0.03em;
}

.price-period {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--color-ink-3);
  align-self: flex-end;
  margin-bottom: 0.3rem;
}

.pricing-card--premium .price-currency,
.pricing-card--premium .price-period {
  color: rgba(212, 201, 188, 0.45);
}

.pricing-card--premium .price-amount {
  color: var(--color-bg);
}


/* ── 11.8 Feature list ───────────────────────────────────────────────────────── */

.feature-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  flex: 1;
  margin-bottom: var(--space-13);
}

.feature-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-6);
  font-size: var(--text-base);
  color: var(--color-ink-2);
  line-height: var(--leading-normal);
}

.feature-item--highlight {
  color: var(--color-ink);
  font-weight: var(--fw-medium);
}

.feature-icon {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  margin-top: 0.1rem;
  color: var(--color-green);
}

.feature-icon--highlight {
  color: var(--color-accent);
}

.pricing-card--premium .feature-item {
  color: var(--color-code-text);
}

.pricing-card--premium .feature-item--highlight {
  color: var(--color-bg);
}

.pricing-card--premium .feature-icon {
  color: #7ecda4;
}

.pricing-card--premium .feature-icon--highlight {
  color: var(--color-code-kw);
}


/* ── 11.9 Pricing CTA button ─────────────────────────────────────────────────── */

.pricing-cta {
  display: block;
  width: 100%;
  text-align: center;
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  font-size: var(--text-md);
  padding: var(--space-8) var(--space-9);
  border-radius: var(--radius-xl);
  cursor: pointer;
  text-decoration: none;
  transition:
    background var(--transition-fast),
    color var(--transition-fast),
    box-shadow var(--transition-fast),
    transform 0.1s;
  border: 1.5px solid var(--color-border-2);
  background: transparent;
  color: var(--color-ink);
}

.pricing-cta:hover {
  background: var(--color-surface-2);
  box-shadow: var(--shadow-sm);
}

.pricing-cta:active { transform: scale(0.98); }

.pricing-cta--featured {
  background: var(--color-ink);
  color: var(--color-bg);
  border-color: var(--color-ink);
  box-shadow: var(--shadow-md);
}

.pricing-cta--featured:hover {
  background: #2d2924;
  box-shadow: var(--shadow-btn);
}

.pricing-cta--premium {
  background: var(--color-bg);
  color: var(--color-ink);
  border-color: transparent;
  box-shadow: none;
}

.pricing-cta--premium:hover {
  background: var(--color-surface-2);
}


/* ── 11.10 FAQ section ───────────────────────────────────────────────────────── */

.faq-section {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 var(--space-15) var(--space-19);
}

.faq-head {
  text-align: center;
  margin-bottom: var(--space-14);
}

.faq-eyebrow {
  display: block;
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-ink-3);
  margin-bottom: var(--space-5);
}

.faq-heading {
  font-family: var(--font-sans);
  font-weight: var(--fw-light);
  font-size: clamp(1.8rem, 4vw, 2.4rem);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  color: var(--color-ink);
}

.faq-heading em {
  font-style: italic;
  color: var(--color-ink-2);
}

.faq-list {
  display: flex;
  flex-direction: column;
}

.faq-item {
  border-bottom: 1px solid var(--color-border);
}

.faq-item:first-child {
  border-top: 1px solid var(--color-border);
}

.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-9);
  width: 100%;
  padding: var(--space-10) 0;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-sans);
  font-size: 0.88rem;
  font-weight: var(--fw-medium);
  color: var(--color-ink);
  transition: color var(--transition-fast);
}

.faq-question:hover { color: var(--color-ink-2); }

.faq-arrow {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  color: var(--color-ink-3);
  transition: transform var(--transition-base), color var(--transition-base);
}

.faq-item.open .faq-arrow {
  transform: rotate(180deg);
  color: var(--color-ink);
}

.faq-item.open .faq-question { color: var(--color-ink); }

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.38s cubic-bezier(0.4, 0, 0.2, 1);
}

.faq-item.open .faq-answer {
  max-height: 320px;
}

.faq-body {
  font-size: var(--text-base);
  color: var(--color-ink-3);
  line-height: var(--leading-loose);
  padding-bottom: var(--space-10);
  max-width: 580px;
}

.faq-body code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--color-surface-2);
  padding: 0.1em 0.35em;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  color: var(--color-ink-2);
}


/* ── 11.11 Pricing responsive ────────────────────────────────────────────────── */

@media (max-width: 860px) {
  .pricing-grid {
    grid-template-columns: 1fr;
    max-width: 420px;
  }

  .pricing-card--featured {
    transform: translateY(0);
    order: -1;
  }
}

@media (max-width: 520px) {
  .pricing-hero {
    padding: var(--space-17) var(--space-9) var(--space-14);
  }

  .pricing-grid,
  .faq-section {
    padding-left: var(--space-9);
    padding-right: var(--space-9);
  }
}


/* =============================================================================
   12. CHANGELOG PAGE
   ============================================================================= */

/* ── 12.1 Body override ──────────────────────────────────────────────────────── */

body.changelog-page {
  align-items: stretch;
  padding: 0;
}

.cl-page-inner {
  max-width: 780px;
  margin: 0 auto;
  padding: 0 var(--space-15);
}


/* ── 12.2 Changelog hero ─────────────────────────────────────────────────────── */

.cl-hero {
  padding: var(--space-19) 0 var(--space-14);
  animation: rise 0.5s ease both;
}

.cl-hero-eyebrow {
  display: block;
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-ink-3);
  margin-bottom: var(--space-6);
}

.cl-hero h1 {
  font-family: var(--font-sans);
  font-weight: var(--fw-light);
  font-size: clamp(2.2rem, 5vw, 3.2rem);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-ink);
  margin-bottom: var(--space-8);
}

.cl-hero h1 em {
  font-style: italic;
  color: var(--color-ink-2);
}

.cl-hero p {
  font-size: var(--text-lg);
  color: var(--color-ink-3);
  line-height: var(--leading-loose);
  max-width: 400px;
}


/* ── 12.3 Filter tabs ────────────────────────────────────────────────────────── */

.cl-filters {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  padding: 0 0 var(--space-14);
  animation: rise 0.5s ease 0.07s both;
}

.cl-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  padding: var(--space-3) var(--space-8);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-ink-2);
  cursor: pointer;
  transition:
    background var(--transition-fast),
    color var(--transition-fast),
    border-color var(--transition-fast),
    box-shadow var(--transition-fast);
  white-space: nowrap;
}

.cl-filter-btn:hover {
  background: var(--color-surface-2);
  color: var(--color-ink);
  border-color: var(--color-border-2);
}

.cl-filter-btn.active {
  background: var(--color-ink);
  color: var(--color-bg);
  border-color: var(--color-ink);
  box-shadow: var(--shadow-sm);
}

.cl-filter-pip {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  flex-shrink: 0;
  transition: background var(--transition-fast);
}

/* pip colours per filter type */
.cl-filter-btn[data-filter="feature"]     .cl-filter-pip { background: var(--color-binary); }
.cl-filter-btn[data-filter="improvement"] .cl-filter-pip { background: var(--color-logical); }
.cl-filter-btn[data-filter="fix"]         .cl-filter-pip { background: var(--color-accent); }
.cl-filter-btn[data-filter="all"]         .cl-filter-pip { background: var(--color-ink-3); }

.cl-filter-btn.active .cl-filter-pip { background: rgba(245, 240, 232, 0.45); }

.cl-filter-count {
  font-size: 0.65rem;
  font-weight: var(--fw-bold);
  background: rgba(0,0,0,0.06);
  padding: 0.1em 0.45em;
  border-radius: var(--radius-full);
  min-width: 1.4em;
  text-align: center;
}

.cl-filter-btn.active .cl-filter-count { background: rgba(245,240,232,0.18); }


/* ── 12.4 Results meta ───────────────────────────────────────────────────────── */

.cl-meta {
  font-size: var(--text-sm);
  color: var(--color-ink-3);
  margin-bottom: var(--space-12);
  padding-bottom: var(--space-12);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-6);
}

.cl-meta-count { }
.cl-meta-count strong {
  color: var(--color-ink-2);
  font-weight: var(--fw-semibold);
}


/* ── 12.5 Timeline ───────────────────────────────────────────────────────────── */

.cl-timeline {
  padding-bottom: var(--space-19);
  animation: rise 0.5s ease 0.14s both;
}


/* ── 12.6 Version group ──────────────────────────────────────────────────────── */

.cl-group {
  margin-bottom: var(--space-16);
}

.cl-group.hidden { display: none; }

.cl-group-header {
  display: flex;
  align-items: center;
  gap: var(--space-7);
  margin-bottom: var(--space-9);
}

.cl-version {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: var(--fw-medium);
  color: var(--color-ink);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  padding: 0.2em 0.6em;
  border-radius: var(--radius-md);
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.cl-group-line {
  height: 1px;
  flex: 1;
  background: var(--color-border);
}

.cl-date {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--color-ink-3);
  white-space: nowrap;
}


/* ── 12.7 Entry list ─────────────────────────────────────────────────────────── */

.cl-entries {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-left: var(--space-3);
}


/* ── 12.8 Entry ──────────────────────────────────────────────────────────────── */

.cl-entry {
  display: grid;
  grid-template-columns: 6px 1fr;
  gap: var(--space-9);
  align-items: flex-start;
  padding: var(--space-7) var(--space-8);
  border-radius: var(--radius-lg);
  transition: background var(--transition-fast);
}

.cl-entry:hover { background: var(--color-surface); }

.cl-entry.hidden { display: none; }


/* Dot */
.cl-dot {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  flex-shrink: 0;
  margin-top: 0.45rem;
}

.cl-dot--feature     { background: var(--color-binary); }
.cl-dot--improvement { background: var(--color-logical); }
.cl-dot--fix         { background: var(--color-accent); }


/* ── 12.9 Entry badge ────────────────────────────────────────────────────────── */

.cl-badge {
  display: inline-flex;
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  padding: 0.2em 0.55em;
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-3);
  white-space: nowrap;
  vertical-align: middle;
}

.cl-badge--feature {
  background: var(--color-binary-bg);
  color: var(--color-binary);
  border: 1px solid var(--color-binary-border);
}

.cl-badge--improvement {
  background: var(--color-logical-bg);
  color: var(--color-logical);
  border: 1px solid var(--color-logical-border);
}

.cl-badge--fix {
  background: var(--color-accent-bg);
  color: var(--color-accent);
  border: 1px solid #f0b8b3;
}


/* ── 12.10 Entry text ────────────────────────────────────────────────────────── */

.cl-entry-title {
  font-family: var(--font-sans);
  font-size: 0.86rem;
  font-weight: var(--fw-semibold);
  color: var(--color-ink);
  line-height: var(--leading-normal);
  margin-bottom: var(--space-2);
}

.cl-entry-body {
  font-size: var(--text-base);
  color: var(--color-ink-3);
  line-height: var(--leading-normal);
  max-width: 560px;
}

.cl-entry-body code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--color-surface-2);
  padding: 0.1em 0.35em;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  color: var(--color-ink-2);
}


/* ── 12.11 Empty state ───────────────────────────────────────────────────────── */

.cl-empty {
  display: none;
  text-align: center;
  padding: var(--space-18) 0;
  color: var(--color-ink-3);
  font-size: var(--text-base);
}

.cl-empty.visible { display: block; }
.cl-empty strong { color: var(--color-ink-2); font-weight: var(--fw-medium); }


/* ── 12.12 Changelog responsive ─────────────────────────────────────────────── */

@media (max-width: 600px) {
  .cl-page-inner { padding: 0 var(--space-9); }
  .cl-hero { padding-top: var(--space-17); }
}


/* =============================================================================
   13. CONTACT PAGE
   ============================================================================= */

/* ── 13.1 Body / wrap ────────────────────────────────────────────────────────── */

body.contact-page {
  align-items: stretch;
  padding: 0;
}

.contact-wrap {
  max-width: 1000px;
  margin: 0 auto;
  padding: var(--space-19) var(--space-15) var(--space-19);
}


/* ── 13.2 Two-column layout ──────────────────────────────────────────────────── */

.contact-layout {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: var(--space-18);
  align-items: start;
}


/* ── 13.3 Info column ────────────────────────────────────────────────────────── */

.contact-info {
  height: 100%;
  position: sticky;
  top: 80px;
  animation: rise 0.5s ease both;
}

.contact-eyebrow {
  display: block;
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-ink-3);
  margin-bottom: var(--space-6);
}

.contact-heading {
  font-family: var(--font-sans);
  font-weight: var(--fw-light);
  font-size: clamp(2.2rem, 5vw, 3rem);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-ink);
  margin-bottom: var(--space-9);
}

.contact-heading em {
  font-style: italic;
  color: var(--color-ink-2);
}

.contact-subtext {
  font-size: var(--text-base);
  color: var(--color-ink-3);
  line-height: var(--leading-loose);
  max-width: 340px;
  margin-bottom: var(--space-13);
}

.contact-details {
  display: flex;
  flex-direction: column;
  gap: var(--space-9);
  padding-top: var(--space-12);
  border-top: 1px solid var(--color-border);
}

.contact-detail {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.contact-detail-label {
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-ink-3);
}

.contact-detail-value {
  font-size: var(--text-base);
  color: var(--color-ink-2);
  font-family: var(--font-mono);
}


/* ── 13.4 Form column ────────────────────────────────────────────────────────── */

.contact-form-wrap {
  animation: rise 0.5s ease 0.08s both;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-bottom: var(--space-10);
}

.form-group:last-of-type { margin-bottom: var(--space-12); }


/* ── 13.5 Form success state ─────────────────────────────────────────────────── */

.contact-success {
  text-align: center;
  padding: var(--space-16) var(--space-13);
  animation: rise 0.4s ease both;
}

.contact-success-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  background: var(--color-green-bg);
  border: 1px solid var(--color-logical-border);
  color: var(--color-green);
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-9);
}

.contact-success h3 {
  font-family: var(--font-sans);
  font-size: 1.1rem;
  font-weight: var(--fw-semibold);
  color: var(--color-ink);
  margin-bottom: var(--space-4);
}

.contact-success p {
  font-size: var(--text-base);
  color: var(--color-ink-3);
  line-height: var(--leading-normal);
}


/* ── 13.6 Form error state ───────────────────────────────────────────────────── */

.input--error {
  border-color: var(--color-accent) !important;
  box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.08) !important;
}

.field-error {
  font-size: var(--text-xs);
  color: var(--color-accent);
  font-weight: var(--fw-medium);
  letter-spacing: 0.01em;
}


/* ── 13.7 Contact responsive ─────────────────────────────────────────────────── */

@media (max-width: 760px) {
  .contact-layout {
    grid-template-columns: 1fr;
    gap: var(--space-14);
  }

  .contact-info { position: static; }

  .contact-wrap {
    padding-top: var(--space-15);
    padding-bottom: var(--space-15);
  }
}


/* =============================================================================
   14. BLOG PAGE
   ============================================================================= */

/* ── 14.1 Body override ─────────────────────────────────────────────────────── */

body.blog-page {
  align-items: stretch;
  padding: 0;
}


/* ── 14.2 Blog wrap ─────────────────────────────────────────────────────────── */

.blog-wrap {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--space-18) var(--page-padding-x) var(--space-19);
  min-height: 70vh;
}


/* ── 14.3 Blog search ───────────────────────────────────────────────────────── */

.blog-search {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-9);
  margin-bottom: var(--space-13);
  flex-wrap: wrap;
}

.blog-search-field {
  position: relative;
  flex: 1;
  max-width: 360px;
}

.blog-search-icon {
  position: absolute;
  left: var(--space-8);
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-ink-3);
  pointer-events: none;
}

.blog-search-input {
  width: 100%;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  color: var(--color-ink);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-9) var(--space-6) calc(var(--space-8) + 14px + var(--space-6));
  outline: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  appearance: none;
}

.blog-search-input::placeholder { color: var(--color-ink-3); }

.blog-search-input:focus {
  border-color: var(--color-ink-2);
  box-shadow: 0 0 0 2px var(--color-surface-2);
}

/* clear button (native search input) */
.blog-search-input::-webkit-search-cancel-button { cursor: pointer; }

.blog-search-count {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-ink-3);
  white-space: nowrap;
  flex-shrink: 0;
}

.blog-highlight {
  background: #fef3c7;
  color: var(--color-ink);
  border-radius: 2px;
  padding: 0 1px;
  font-style: inherit;
  font-weight: var(--fw-semibold);
}


/* ── 14.3 Blog hero ─────────────────────────────────────────────────────────── */

.blog-eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-ink-3);
  margin-bottom: var(--space-7);
}

.blog-hero-heading {
  font-size: clamp(2rem, 5vw, 2.8rem);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  color: var(--color-ink);
  margin-bottom: var(--space-7);
}

.blog-hero-heading em {
  font-style: italic;
  font-weight: var(--fw-light);
}

.blog-hero-sub {
  font-size: var(--text-lg);
  color: var(--color-ink-2);
  line-height: var(--leading-normal);
  max-width: 520px;
  margin-bottom: var(--space-16);
  padding-bottom: var(--space-16);
  border-bottom: 1px solid var(--color-border);
}


/* ── 14.4 Blog post list ────────────────────────────────────────────────────── */

.blog-list {
  display: flex;
  flex-direction: column;
}

.blog-card {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 0 var(--space-13);
  padding: var(--space-13) 0;
  border-bottom: 1px solid var(--color-border);
  text-decoration: none;
  color: inherit;
  transition: none;
}

.blog-card:first-child { padding-top: 0; }

.blog-card-meta {
  padding-top: 0.2rem;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  align-items: flex-start;
}

.blog-card-date {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-ink-3);
  line-height: 1;
  white-space: nowrap;
}

.blog-card-tag {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  padding: 0.18rem 0.45rem;
  border-radius: var(--radius-sm);
  background: var(--color-surface-2);
  color: var(--color-ink-2);
  border: 1px solid var(--color-border);
}

.blog-card-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.blog-card-title {
  font-size: 1.05rem;
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-tight);
  color: var(--color-ink);
  line-height: 1.3;
  transition: color var(--transition-fast);
}

.blog-card:hover .blog-card-title {
  color: var(--color-accent);
}

.blog-card-excerpt {
  font-size: var(--text-base);
  color: var(--color-ink-2);
  line-height: var(--leading-loose);
}

.blog-card-read {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--color-ink-3);
  margin-top: var(--space-3);
  transition: color var(--transition-fast);
}

.blog-card:hover .blog-card-read {
  color: var(--color-ink);
}

.blog-card-read .arrow {
  transition: transform var(--transition-fast);
}

.blog-card:hover .blog-card-read .arrow {
  transform: translateX(3px);
}


/* ── 14.5 Empty state ───────────────────────────────────────────────────────── */

.blog-empty {
  text-align: center;
  padding: var(--space-18) 0;
  color: var(--color-ink-3);
  font-size: var(--text-base);
}

.blog-empty-icon {
  font-size: 2rem;
  margin-bottom: var(--space-9);
  opacity: 0.35;
}


/* ── 14.6 Responsive ────────────────────────────────────────────────────────── */

@media (max-width: 560px) {
  .blog-card {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  .blog-card-meta {
    flex-direction: row;
    align-items: center;
    padding-top: 0;
  }
}


/* =============================================================================
   15. BLOG POST PAGE
   ============================================================================= */

/* ── 15.1 Body override ──────────────────────────────────────────────────────── */

body.blog-post-page {
  align-items: stretch;
  padding: 0;
}


/* ── 15.2 Post wrap ──────────────────────────────────────────────────────────── */

.post-wrap {
  max-width: 680px;
  margin: 0 auto;
  padding: var(--space-18) var(--page-padding-x) var(--space-19);
}


/* ── 15.3 Post header ────────────────────────────────────────────────────────── */

.post-header {
  margin-bottom: var(--space-16);
  padding-bottom: var(--space-14);
  border-bottom: 1px solid var(--color-border);
  animation: rise 0.5s ease both;
}

.post-back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--color-ink-3);
  text-decoration: none;
  margin-bottom: var(--space-10);
  transition: color var(--transition-fast);
}

.post-back:hover { color: var(--color-ink); }

.post-back svg { transition: transform var(--transition-fast); }
.post-back:hover svg { transform: translateX(-3px); }

.post-meta {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  margin-bottom: var(--space-9);
  flex-wrap: wrap;
}

.post-tag {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  padding: 0.25em 0.65em;
  border-radius: var(--radius-sm);
  background: var(--color-accent-bg);
  color: var(--color-accent);
  border: 1px solid #f0b8b3;
}

.post-date {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-ink-3);
}

.post-read-time {
  font-size: var(--text-xs);
  color: var(--color-ink-3);
}

.post-title {
  font-family: var(--font-sans);
  font-weight: var(--fw-light);
  font-size: clamp(2rem, 5vw, 2.8rem);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-ink);
  margin-bottom: var(--space-9);
}

.post-title em {
  font-style: italic;
  color: var(--color-ink-2);
}

.post-lead {
  font-size: var(--text-lg);
  color: var(--color-ink-2);
  line-height: var(--leading-loose);
}




/* ── 15.4 Article body ───────────────────────────────────────────────────────── */

.post-body {
  animation: rise 0.5s ease 0.08s both;
}

.post-body h2 {
  font-family: var(--font-sans);
  font-size: 1.35rem;
  font-weight: var(--fw-semibold);
  letter-spacing: -0.01em;
  color: var(--color-ink);
  margin: var(--space-16) 0 var(--space-8);
}

.post-body h2:first-child { margin-top: 0; }

.post-body h3 {
  font-family: var(--font-sans);
  font-size: 1.05rem;
  font-weight: var(--fw-semibold);
  color: var(--color-ink);
  margin: var(--space-12) 0 var(--space-6);
}

.post-body p {
  font-size: var(--text-base);
  color: var(--color-ink-2);
  line-height: var(--leading-loose);
  margin-bottom: var(--space-9);
}

.post-body p:last-child { margin-bottom: 0; }

.post-body a {
  color: var(--color-ink);
  text-decoration: underline;
  text-decoration-color: var(--color-border-2);
  text-underline-offset: 3px;
  transition: text-decoration-color var(--transition-fast), color var(--transition-fast);
}

.post-body a:hover {
  color: var(--color-accent);
  text-decoration-color: var(--color-accent);
}

.post-body code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--color-surface-2);
  padding: 0.1em 0.4em;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  color: var(--color-ink-2);
}

.post-body ul,
.post-body ol {
  margin: 0 0 var(--space-9) var(--space-11);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.post-body li {
  font-size: var(--text-base);
  color: var(--color-ink-2);
  line-height: var(--leading-loose);
}

.post-body .post-figure {
  margin: var(--space-13) 0;
}

.post-body blockquote {
  border-left: 3px solid var(--color-border-2);
  padding: var(--space-7) var(--space-12);
  margin: var(--space-12) 0;
  background: var(--color-surface);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
}

.post-body blockquote p {
  color: var(--color-ink-2);
  font-style: italic;
  margin-bottom: 0;
}


/* ── 15.5 Feature callout box ────────────────────────────────────────────────── */

.post-callout {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
  padding: var(--space-12) var(--space-13);
  margin: var(--space-13) 0;
}

.post-callout-label {
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-ink-3);
  margin-bottom: var(--space-8);
}

.post-feature-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
}

.post-feature-item {
  display: flex;
  gap: var(--space-6);
  align-items: flex-start;
}

.post-feature-check {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  background: var(--color-green-bg);
  border: 1px solid var(--color-logical-border);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 0.1rem;
}

.post-feature-check svg { color: var(--color-green); }

.post-feature-text {
  font-size: var(--text-base);
  color: var(--color-ink-2);
  line-height: var(--leading-normal);
}


/* ── 15.6 Stat row ───────────────────────────────────────────────────────────── */

.post-stats {
  display: flex;
  gap: var(--space-14);
  padding: var(--space-12) 0;
  margin: var(--space-13) 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  flex-wrap: wrap;
}

.post-stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.post-stat-value {
  font-family: var(--font-mono);
  font-size: 1.6rem;
  font-weight: var(--fw-medium);
  color: var(--color-ink);
  letter-spacing: -0.03em;
  line-height: 1;
}

.post-stat-label {
  font-size: var(--text-xs);
  color: var(--color-ink-3);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  font-weight: var(--fw-medium);
}


/* ── 15.7 Post footer / CTA ──────────────────────────────────────────────────── */

.post-footer-cta {
  margin-top: var(--space-22);
  padding: var(--space-16) var(--space-13);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-3xl);
  background: var(--color-surface);
  text-align: center;
  animation: rise 0.5s ease 0.16s both;
}

.post-footer-cta h3 {
  font-family: var(--font-sans);
  font-weight: var(--fw-light);
  font-size: 1.6rem;
  letter-spacing: var(--tracking-tight);
  color: var(--color-ink);
  margin-bottom: var(--space-6);
}

.post-footer-cta p {
  font-size: var(--text-base);
  color: var(--color-ink-3);
  margin-bottom: var(--space-12);
  line-height: var(--leading-loose);
  max-width: 380px;
  margin-left: auto;
  margin-right: auto;
}

.post-footer-cta-actions {
  display: flex;
  justify-content: center;
  gap: var(--space-9);
  flex-wrap: wrap;
}


/* ── 15.8 More posts ─────────────────────────────────────────────────────────── */

.post-more {
  margin-top: var(--space-17);
  padding-top: var(--space-14);
  border-top: 1px solid var(--color-border);
}

.post-more-label {
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-ink-3);
  margin-bottom: var(--space-10);
}


/* ── 15.9 Responsive ─────────────────────────────────────────────────────────── */

@media (max-width: 600px) {
  .post-feature-grid {
    grid-template-columns: 1fr;
  }

  .post-stats {
    gap: var(--space-10);
  }
}


/* =============================================================================
   16. HOME PAGE — WIDE PANEL
   ============================================================================= */

/* Break the main evaluator panel out of the narrow .wrap column so it matches
   the width of .api-inner (--max-w-wide: 900px). Uses a negative left margin
   equal to half the width difference so the panel stays visually centred. */

#mainPanel {
  width: var(--max-w-wide);
  max-width: calc(100vw - 3rem);
  margin-left: calc((var(--max-w-content) - var(--max-w-wide)) / 2);
}

@media (max-width: 960px) {
  #mainPanel {
    width: calc(100vw - 3rem);
    margin-left: calc((100% - (100vw - 3rem)) / 2);
  }
}


/* =============================================================================
   17. API FEATURE TABS
   ============================================================================= */

/* ── 16.1 Tab row ────────────────────────────────────────────────────────────── */

.api-tabs {
  display: flex;
  gap: 0;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--space-10);
}

.api-tabs::-webkit-scrollbar { display: none; }


/* ── 16.2 Tab button ─────────────────────────────────────────────────────────── */

.api-tab-btn {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--color-ink-3);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  padding: var(--space-6) var(--space-10);
  cursor: pointer;
  white-space: nowrap;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  transition:
    color var(--transition-fast),
    background var(--transition-fast),
    border-color var(--transition-fast);
}

.api-tab-btn:hover {
  color: var(--color-ink);
  background: var(--color-surface-2);
}

.api-tab-btn.active {
  color: var(--color-ink);
  background: var(--color-surface-2);
  border-bottom-color: var(--color-ink);
  font-weight: var(--fw-semibold);
}


/* ── 16.3 Tab panels ─────────────────────────────────────────────────────────── */

.api-tab-panel {
  display: none;
}

.api-tab-panel.active {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: var(--space-15);
  align-items: start;
  animation: fadeIn 0.2s ease both;
}


/* ── 16.4 Tab text (left column) ─────────────────────────────────────────────── */

.api-tab-text {
  padding-top: var(--space-7);
}

.api-tab-text h3 {
  font-family: var(--font-sans);
  font-size: 1.15rem;
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-tight);
  color: var(--color-ink);
  margin-bottom: var(--space-7);
  line-height: var(--leading-tight);
}

.api-tab-text p {
  font-size: var(--text-base);
  color: var(--color-ink-3);
  line-height: var(--leading-loose);
}


/* ── 16.5 Stat strip ─────────────────────────────────────────────────────────── */

.api-stat-strip {
  display: flex;
  gap: var(--space-14);
  padding: var(--space-13) 0;
  border-top: 1px solid var(--color-border);
  margin-top: var(--space-14);
  flex-wrap: wrap;
}


/* ── 16.6 Responsive ─────────────────────────────────────────────────────────── */

@media (max-width: 700px) {
  .api-tab-panel.active {
    grid-template-columns: 1fr;
  }

  .api-tab-text {
    padding-top: 0;
  }
}


/* ── 16.7 Larger input variant ───────────────────────────────────────────────── */

.input--lg {
  font-size: 1.05rem;
  padding: var(--space-9) var(--space-10);
}


/* ── 16.8 Secondary (outlined) button ───────────────────────────────────────── */

.btn--secondary {
  background: transparent;
  color: var(--color-ink-2);
  border: 1.5px solid var(--color-border-2);
  box-shadow: none;
}

.btn--secondary:hover {
  background: var(--color-surface-2);
  color: var(--color-ink);
  border-color: var(--color-ink-2);
  box-shadow: none;
}


/* ── 16.9 Options toolbar (below input row) ──────────────────────────────────── */

.input-options {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-5);
  margin-bottom: var(--space-4);
}

.input-option-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
}

.input-option-btn {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  color: var(--color-ink-3);
  cursor: pointer;
  flex-shrink: 0;
  transition:
    background var(--transition-fast),
    color var(--transition-fast),
    border-color var(--transition-fast);
}

.input-option-btn:hover {
  background: var(--color-surface-2);
  color: var(--color-ink);
  border-color: var(--color-border-2);
}

.input-option-btn.active {
  background: var(--color-ink);
  color: var(--color-bg);
  border-color: var(--color-ink);
}


/* ── 16.10 JSON preview strip ────────────────────────────────────────────────── */

.json-preview {
  display: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  margin-top: var(--space-4);
  animation: fadeIn 0.2s ease both;
}

.json-preview.visible { display: block; }

.json-preview-bar {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  padding: var(--space-5) var(--space-9);
  background: var(--color-surface-2);
  border-bottom: 1px solid var(--color-border);
}

.json-preview-bar svg {
  flex-shrink: 0;
  color: var(--color-ink-3);
}

.json-preview-filename {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-ink-2);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.json-preview-toggle {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  color: var(--color-ink-2);
  background: var(--color-surface);
  border: 1px solid var(--color-border-2);
  border-radius: var(--radius-md);
  padding: 0.25em 0.75em;
  cursor: pointer;
  white-space: nowrap;
  letter-spacing: var(--tracking-wide);
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.json-preview-toggle:hover {
  background: var(--color-bg);
  color: var(--color-ink);
  border-color: var(--color-ink-2);
}

.json-preview-clear {
  font-size: 0.75rem;
  line-height: 1;
  color: var(--color-ink-3);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.3em 0.45em;
  border-radius: var(--radius-sm);
  transition: color var(--transition-fast), background var(--transition-fast);
}

.json-preview-clear:hover {
  color: var(--color-accent);
  background: var(--color-accent-bg);
}


/* ── 16.11 JSON viewer (dark code panel) ─────────────────────────────────────── */

.json-viewer {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  line-height: 1.75;
  padding: var(--space-10) var(--space-12);
  overflow-x: auto;
  overflow-y: auto;
  max-height: 240px;
  white-space: pre;
  background: var(--color-code-bg);
  color: var(--color-code-text);
  scrollbar-width: auto;
  scrollbar-color: var(--color-code-kw) rgba(255, 255, 255, 0.05);
}

.json-viewer::-webkit-scrollbar { width: 8px; height: 8px; }
.json-viewer::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.04); }
.json-viewer::-webkit-scrollbar-thumb {
  background: var(--color-code-kw);
  border-radius: 4px;
}
.json-viewer::-webkit-scrollbar-thumb:hover { background: #f0b85c; }

/* ── 16.12 Edit button (json-preview-bar) ────────────────────────────────────── */

.json-preview-edit {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  color: var(--color-ink-2);
  background: var(--color-surface);
  border: 1px solid var(--color-border-2);
  border-radius: var(--radius-md);
  padding: 0.25em 0.75em;
  cursor: pointer;
  white-space: nowrap;
  letter-spacing: var(--tracking-wide);
  transition:
    background var(--transition-fast),
    color var(--transition-fast),
    border-color var(--transition-fast);
}

.json-preview-edit:hover {
  background: var(--color-bg);
  color: var(--color-ink);
  border-color: var(--color-ink-2);
}

.json-preview-edit.active {
  background: var(--color-code-kw);
  color: #1e1b17;
  border-color: var(--color-code-kw);
  font-weight: var(--fw-bold);
}

.json-preview-edit.active:hover {
  background: #d4923a;
  border-color: #d4923a;
}


/* ── 16.13 JSON editor textarea ──────────────────────────────────────────────── */

.json-editor {
  display: none;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  line-height: 1.75;
  padding: var(--space-10) var(--space-12);
  width: 100%;
  min-height: 180px;
  max-height: 240px;
  resize: vertical;
  background: var(--color-code-bg);
  color: #b8f0c0;
  border: none;
  outline: none;
  white-space: pre;
  overflow-wrap: normal;
  overflow-x: auto;
  overflow-y: auto;
  tab-size: 2;
  caret-color: var(--color-code-kw);
  scrollbar-width: auto;
  scrollbar-color: var(--color-code-kw) rgba(255, 255, 255, 0.05);
  transition: outline var(--transition-fast);
}

.json-editor::-webkit-scrollbar { width: 8px; height: 8px; }
.json-editor::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.04); }
.json-editor::-webkit-scrollbar-thumb {
  background: var(--color-code-kw);
  border-radius: 4px;
}
.json-editor::-webkit-scrollbar-thumb:hover { background: #f0b85c; }

.json-editor:focus {
  box-shadow: inset 0 0 0 1px rgba(232, 164, 74, 0.3);
}


/* JSON syntax token colours */
.jv-key   { color: var(--color-code-str); }
.jv-str   { color: #b8dea8; }
.jv-num   { color: var(--color-code-num); }
.jv-bool  { color: var(--color-code-kw); }
.jv-null  { color: var(--color-code-dim); font-style: italic; }
.jv-punct { color: rgba(212, 201, 188, 0.55); }


/* ── 16.14 Feature section (home) ───────────────────────────────────────────── */

/* Three variable colors — matched between pill and expression highlight */
.fv-a      { --fv-color: #2d6a4f; --fv-bg: #edf7f1; --fv-border: rgba(45,106,79,0.18); }
.fv-b      { --fv-color: #1a5fa8; --fv-bg: #edf3fb; --fv-border: rgba(26,95,168,0.18); }
.fv-c      { --fv-color: #7a3c00; --fv-bg: #fdf4ec; --fv-border: rgba(192,100,0,0.18); }

.fv-a-text { color: #52c48a; font-weight: var(--fw-medium); }
.fv-b-text { color: #5ba3f5; font-weight: var(--fw-medium); }
.fv-c-text { color: #e8a44a; font-weight: var(--fw-medium); }

/* Remove the top margin inline style override */
.feat-section { margin-top: 50px; }

/* Two-column feature card */
.feat-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  align-items: center;
  padding: var(--space-14);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-3xl);
}

.feat-card-title {
  font-family: var(--font-sans);
  font-size: var(--text-2xl);
  font-weight: var(--fw-semibold);
  color: var(--color-ink);
  letter-spacing: var(--tracking-tight);
  margin-bottom: var(--space-6);
}

.feat-card-desc {
  font-size: var(--text-lg);
  color: var(--color-ink-3);
  line-height: var(--leading-loose);
  margin-bottom: var(--space-11);
}

.feat-points {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.feat-points li {
  font-size: var(--text-base);
  color: var(--color-ink-2);
  padding-left: var(--space-10);
  position: relative;
  line-height: var(--leading-normal);
}

.feat-points li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 5px;
  height: 5px;
  background: var(--color-accent);
  border-radius: 50%;
}

/* Right column — demo visual */
.feat-demo {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.feat-demo-result {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  padding: var(--space-8) var(--space-11);
  background: var(--color-green-bg);
  border: 1px solid rgba(45, 106, 79, 0.18);
  border-radius: var(--radius-xl);
  color: var(--color-green);
}

.feat-result-label {
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  opacity: 0.7;
}

.feat-result-val {
  font-family: var(--font-mono);
  font-size: 1.35rem;
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-tight);
  margin-left: auto;
}

@media (max-width: 700px) {
  .feat-card {
    grid-template-columns: 1fr;
  }
}


/* ── Coming Soon badge (op-symbol context) ───────────────────────────────────── */

.coming-soon-badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.52rem;
  font-weight: var(--fw-medium);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #5c3300;
  background: linear-gradient(110deg, #ffb347 0%, #ffe066 55%, #ffa500 100%);
  border-radius: 4px;
  padding: 0.18em 0.5em 0.2em;
  margin-left: 0.4em;
  vertical-align: middle;
  position: relative;
  top: -0.1em;
  box-shadow: 0 1px 4px rgba(200, 120, 0, 0.35), inset 0 1px 0 rgba(255,255,255,0.4);
  animation: coming-soon-pulse 2.4s ease-in-out infinite;
  white-space: nowrap;
}

/* =============================================================================
   15. LEGAL PAGES  (privacy-policy.html, cookies.html)
   ============================================================================= */

/* ── 15.1 Wrapper & Header ───────────────────────────────────────────────────── */

.legal-wrap {
  max-width: 900px;
  margin: 0 auto;
  padding: var(--space-17) var(--space-14) var(--space-20);
}

.legal-header {
  padding-bottom: var(--space-14);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--space-16);
  animation: rise 0.5s ease both;
}

.legal-eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-ink-3);
  margin-bottom: var(--space-6);
}

.legal-title {
  font-family: var(--font-sans);
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight);
  color: var(--color-ink);
  line-height: var(--leading-tight);
  margin: 0 0 var(--space-8);
}

.legal-meta {
  display: flex;
  align-items: center;
  gap: var(--space-9);
  flex-wrap: wrap;
}

.legal-date {
  font-size: var(--text-sm);
  color: var(--color-ink-3);
}

.legal-date strong {
  color: var(--color-ink-2);
  font-weight: var(--fw-medium);
}


/* ── 15.2 TOC + Body layout ──────────────────────────────────────────────────── */

.legal-layout {
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: var(--space-18);
  align-items: start;
}

.legal-toc {
  position: sticky;
  top: var(--space-16);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  animation: rise 0.5s ease 0.05s both;
}

.legal-toc-heading {
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-ink-3);
  margin-bottom: var(--space-4);
  padding-left: var(--space-4);
}

.legal-toc-link {
  font-size: var(--text-sm);
  color: var(--color-ink-3);
  text-decoration: none;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  border-left: 2px solid transparent;
  transition: color var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast);
  line-height: var(--leading-normal);
}

.legal-toc-link:hover {
  color: var(--color-ink);
  background: var(--color-surface-2);
  border-left-color: var(--color-border-2);
}

.legal-toc-link.active {
  color: var(--color-ink);
  background: var(--color-surface-2);
  border-left-color: var(--color-accent);
}


/* ── 15.3 Section content ────────────────────────────────────────────────────── */

.legal-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-17);
  animation: rise 0.5s ease 0.1s both;
}

.legal-section {
  scroll-margin-top: var(--space-16);
}

.legal-section-num {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-ink-3);
  letter-spacing: var(--tracking-wide);
  display: block;
  margin-bottom: var(--space-3);
}

.legal-section h2 {
  font-family: var(--font-sans);
  font-size: var(--text-2xl);
  font-weight: var(--fw-semibold);
  color: var(--color-ink);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 var(--space-9);
  line-height: var(--leading-tight);
}

.legal-section p {
  font-size: var(--text-base);
  color: var(--color-ink-2);
  line-height: var(--leading-loose);
  margin: 0 0 var(--space-8);
}

.legal-section p:last-child { margin-bottom: 0; }

.legal-section ul,
.legal-section ol {
  padding-left: var(--space-11);
  margin: 0 0 var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.legal-section li {
  font-size: var(--text-base);
  color: var(--color-ink-2);
  line-height: var(--leading-loose);
}

.legal-section a {
  color: var(--color-ink);
  text-decoration: underline;
  text-decoration-color: var(--color-border-2);
  text-underline-offset: 2px;
  transition: color var(--transition-fast), text-decoration-color var(--transition-fast);
}

.legal-section a:hover {
  color: var(--color-accent);
  text-decoration-color: var(--color-accent);
}

.legal-section code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0.1em 0.4em;
  color: var(--color-ink-2);
}

.legal-callout {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-accent);
  border-radius: var(--radius-lg);
  padding: var(--space-9) var(--space-11);
  margin: var(--space-9) 0;
}

.legal-callout p {
  margin: 0;
  font-size: var(--text-base);
  color: var(--color-ink-2);
  line-height: var(--leading-loose);
}


/* ── 15.4 Cookie table ───────────────────────────────────────────────────────── */

.cookie-table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--space-9) 0;
  font-size: var(--text-base);
}

.cookie-table th {
  text-align: left;
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-ink-3);
  padding: var(--space-4) var(--space-7);
  border-bottom: 1px solid var(--color-border);
}

.cookie-table td {
  padding: var(--space-7) var(--space-7);
  color: var(--color-ink-2);
  border-bottom: 1px solid var(--color-border);
  vertical-align: top;
  line-height: var(--leading-loose);
}

.cookie-table tr:last-child td { border-bottom: none; }

.cookie-table code {
  font-family: var(--font-mono);
  font-size: 0.88em;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0.1em 0.4em;
  color: var(--color-ink-2);
  white-space: nowrap;
}


/* ── 15.5 Cookie type cards & toggles ───────────────────────────────────────── */

.cookie-type-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
  padding: var(--space-11) var(--space-12);
  margin-bottom: var(--space-8);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-10);
  transition: border-color var(--transition-fast);
}

.cookie-type-card:hover { border-color: var(--color-border-2); }

.cookie-type-info { flex: 1; }

.cookie-type-name {
  font-size: var(--text-md);
  font-weight: var(--fw-semibold);
  color: var(--color-ink);
  margin: 0 0 var(--space-3);
  display: flex;
  align-items: center;
  gap: var(--space-5);
}

.cookie-required-badge {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  padding: 0.15em 0.5em;
  border-radius: var(--radius-sm);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  color: var(--color-ink-3);
  letter-spacing: var(--tracking-wide);
  font-weight: var(--fw-regular);
}

.cookie-type-desc {
  font-size: var(--text-base);
  color: var(--color-ink-3);
  line-height: var(--leading-loose);
  margin: 0;
}

.cookie-toggle {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}

.toggle-switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  cursor: pointer;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.toggle-track {
  position: absolute;
  inset: 0;
  background: var(--color-border);
  border-radius: 12px;
  transition: background var(--transition-base);
}

.toggle-thumb {
  position: absolute;
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background: white;
  border-radius: 50%;
  transition: transform var(--transition-base);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  pointer-events: none;
}

.toggle-switch input:checked ~ .toggle-track { background: var(--color-ink); }
.toggle-switch input:checked ~ .toggle-thumb { transform: translateX(20px); }
.toggle-switch input:disabled ~ .toggle-track { background: var(--color-ink); opacity: 0.45; }
.toggle-switch input:disabled { cursor: not-allowed; }

.toggle-label {
  font-size: var(--text-xs);
  color: var(--color-ink-3);
  text-align: center;
  min-width: 20px;
}


/* ── 15.6 Responsive ─────────────────────────────────────────────────────────── */

@media (max-width: 700px) {
  .legal-wrap {
    padding: var(--space-14) var(--space-9) var(--space-17);
  }

  .legal-layout {
    grid-template-columns: 1fr;
  }

  .legal-toc {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--space-3);
    padding: var(--space-9) 0;
    border-bottom: 1px solid var(--color-border);
    margin-bottom: var(--space-14);
  }

  .legal-toc-heading { display: none; }

  .legal-toc-link {
    border-left: none;
    border: 1px solid var(--color-border);
    padding: var(--space-2) var(--space-6);
    font-size: var(--text-xs);
  }

  .legal-toc-link:hover,
  .legal-toc-link.active {
    background: var(--color-ink);
    color: var(--color-bg);
    border-color: var(--color-ink);
  }

  .cookie-type-card {
    flex-direction: column;
    gap: var(--space-8);
  }

  .cookie-toggle {
    flex-direction: row;
    gap: var(--space-6);
    align-items: center;
  }

  .cookie-table {
    font-size: var(--text-xs);
  }
}
.jv-colon { color: rgba(212, 201, 188, 0.35); }