/* =========================================================================
   VISIBL — CONSOLIDATED STYLES
   tokens + components + page styles + responsive system
   ========================================================================= */

/* ===== 1. TOKENS ===== */
/* =========================================================================
   AUDIT AI — DESIGN TOKENS
   Warm editorial system. Cream paper, deep ink, ember accent.
   ========================================================================= */

:root {
  /* ---------- PALETTE — RAW ---------- */
  /* Paper / cream surfaces (warm, ~0.015 chroma) */
  --paper-50:  #FBF8F2;
  --paper-100: #F6F2EA;  /* page background */
  --paper-200: #EFEADF;
  --paper-300: #E5DFD1;
  --paper-400: #D6CFBE;

  /* Ink / near-black (warm-cool neutral) */
  --ink-900: #15130F;    /* primary dark surface */
  --ink-800: #1F1C18;
  --ink-700: #2A2723;
  --ink-600: #3A352F;
  --ink-500: #5A554D;
  --ink-400: #807A70;
  --ink-300: #A8A299;
  --ink-200: #C8C2B6;
  --ink-100: #E3DDD0;

  /* Ember — primary accent (replaces lavender/pink) */
  --ember-50:  #FFF1E8;
  --ember-100: #FFD9C2;
  --ember-200: #FFB593;
  --ember-300: #FF8A5B;
  --ember-400: #FF6A30;
  --ember-500: #FF4500;  /* core */
  --ember-600: #E03B00;
  --ember-700: #B82F00;
  --ember-800: #8A2300;

  /* Sage — positive / success (matches reference greens) */
  --sage-100: #DDEED7;
  --sage-300: #A8D49C;
  --sage-500: #6BB05D;
  --sage-700: #3F7A33;

  /* Slate-blue — informational secondary */
  --slate-100: #DCE6EE;
  --slate-300: #95AABF;
  --slate-500: #4B6A85;
  --slate-700: #2C4258;

  /* Clay — warning */
  --clay-100: #F5E3C8;
  --clay-500: #C98A26;
  --clay-700: #7E5210;

  /* Brick — destructive */
  --brick-100: #F2D2CB;
  --brick-500: #B73B25;
  --brick-700: #7A1F10;

  /* ---------- SEMANTIC ---------- */
  --bg:               var(--paper-100);
  --bg-elevated:      var(--paper-50);
  --bg-sunken:        var(--paper-200);
  --bg-inverse:       var(--ink-900);

  --surface:          #FFFFFF;
  --surface-muted:    var(--paper-200);
  --surface-inverse:  var(--ink-800);

  --border-subtle:    var(--paper-300);
  --border-default:   var(--paper-400);
  --border-strong:    var(--ink-200);
  --border-inverse:   var(--ink-700);

  --text-primary:     var(--ink-900);
  --text-secondary:   var(--ink-500);
  --text-tertiary:    var(--ink-400);
  --text-muted:       var(--ink-300);
  --text-inverse:     var(--paper-50);
  --text-inverse-2:   var(--ink-300);

  --accent:           var(--ember-500);
  --accent-hover:     var(--ember-600);
  --accent-press:     var(--ember-700);
  --accent-soft:      var(--ember-50);
  --accent-soft-2:    var(--ember-100);
  --on-accent:        #FFFFFF;

  --success:          var(--sage-500);
  --success-soft:     var(--sage-100);
  --info:             var(--slate-500);
  --info-soft:        var(--slate-100);
  --warning:          var(--clay-500);
  --warning-soft:     var(--clay-100);
  --danger:           var(--brick-500);
  --danger-soft:      var(--brick-100);

  --focus-ring:       0 0 0 3px color-mix(in oklab, var(--ember-500) 35%, transparent);

  /* ---------- TYPOGRAPHY ---------- */
  --font-sans:    "Geist", ui-sans-serif, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --font-serif:   "Newsreader", ui-serif, Georgia, serif;

  /* Type scale — tight, editorial */
  --fs-display:   72px;
  --fs-h1:        56px;
  --fs-h2:        40px;
  --fs-h3:        28px;
  --fs-h4:        22px;
  --fs-h5:        20px;
  --fs-body-lg:   17px;
  --fs-body:      15px;
  --fs-body-sm:   13px;
  --fs-caption:   12px;
  --fs-micro:     11px;  /* mono labels */

  --lh-tight:     1.05;
  --lh-snug:      1.2;
  --lh-normal:    1.5;
  --lh-relaxed:   1.65;

  --tracking-tight:  -0.022em;
  --tracking-snug:   -0.012em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-mono:   0.08em;  /* for mono small caps labels */

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* ---------- SPACING — 4px base ---------- */
  --space-0:    0;
  --space-1:    4px;
  --space-2:    8px;
  --space-3:    12px;
  --space-4:    16px;
  --space-5:    20px;
  --space-6:    24px;
  --space-8:    32px;
  --space-10:   40px;
  --space-12:   48px;
  --space-16:   64px;
  --space-20:   80px;
  --space-24:   96px;
  --space-32:   128px;

  /* ---------- RADIUS ---------- */
  --radius-xs:    4px;
  --radius-sm:    6px;
  --radius-md:    10px;
  --radius-lg:    14px;
  --radius-xl:    20px;
  --radius-2xl:   28px;
  --radius-pill:  9999px;

  /* ---------- SHADOWS — warm, low-saturation ---------- */
  --shadow-xs:  0 1px 2px rgba(21, 19, 15, 0.04);
  --shadow-sm:  0 1px 2px rgba(21, 19, 15, 0.05), 0 1px 3px rgba(21, 19, 15, 0.04);
  --shadow-md:  0 4px 6px -2px rgba(21, 19, 15, 0.06), 0 2px 4px -2px rgba(21, 19, 15, 0.05);
  --shadow-lg:  0 12px 24px -8px rgba(21, 19, 15, 0.10), 0 4px 8px -4px rgba(21, 19, 15, 0.06);
  --shadow-xl:  0 24px 48px -16px rgba(21, 19, 15, 0.16), 0 8px 16px -8px rgba(21, 19, 15, 0.08);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.6);
  --shadow-ring:  0 0 0 1px var(--border-default);

  /* ---------- MOTION ---------- */
  --ease-standard: cubic-bezier(0.4, 0.0, 0.2, 1);
  --ease-emphasized: cubic-bezier(0.2, 0.0, 0, 1);
  --ease-decel:    cubic-bezier(0, 0, 0.2, 1);
  --ease-accel:    cubic-bezier(0.4, 0, 1, 1);
  --ease-spring:   cubic-bezier(0.34, 1.4, 0.64, 1);

  --dur-instant:   80ms;
  --dur-fast:      140ms;
  --dur-base:      220ms;
  --dur-slow:      360ms;
  --dur-slower:    540ms;

  /* ---------- LAYOUT ---------- */
  --container-sm:  640px;
  --container-md:  960px;
  --container-lg:  1200px;
  --container-xl:  1440px;

  --header-h:      64px;

  /* ---------- Z ---------- */
  --z-base:    0;
  --z-raised:  10;
  --z-overlay: 100;
  --z-modal:   200;
  --z-toast:   300;
}

/* ===== 2. COMPONENTS (design system) ===== */
/* =========================================================================
   AUDIT AI — COMPONENT STYLES
   Built on tokens.css. Use semantic vars wherever possible.
   ========================================================================= */

/* ---------- BASE ---------- */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; }

/* ---------- TYPE UTILITIES ---------- */
.t-display { font-size: var(--fs-display); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); font-weight: 500; }
.t-h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); font-weight: 500; }
.t-h2 { font-size: var(--fs-h2); line-height: var(--lh-snug); letter-spacing: var(--tracking-snug); font-weight: 500; }
.t-h3 { font-size: var(--fs-h3); line-height: var(--lh-snug); letter-spacing: var(--tracking-snug); font-weight: 500; }
.t-h4 { font-size: var(--fs-h4); line-height: var(--lh-snug); font-weight: 500; }
.t-h5 { font-size: var(--fs-h5); line-height: var(--lh-normal); font-weight: 500; }
.t-body-lg { font-size: var(--fs-body-lg); line-height: var(--lh-relaxed); }
.t-body { font-size: var(--fs-body); line-height: var(--lh-normal); }
.t-body-sm { font-size: var(--fs-body-sm); line-height: var(--lh-normal); color: var(--text-secondary); }
.t-caption { font-size: var(--fs-caption); line-height: var(--lh-normal); color: var(--text-secondary); }
.t-micro-label {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--text-tertiary);
  font-weight: 500;
}
.t-mono { font-family: var(--font-mono); }

/* ---------- BUTTONS ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: 40px;
  padding: 0 var(--space-5);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.005em;
  cursor: pointer;
  user-select: none;
  background: transparent;
  color: var(--text-primary);
  transition: background var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard),
              box-shadow var(--dur-fast) var(--ease-standard),
              transform var(--dur-fast) var(--ease-standard);
}
.btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.btn:active { transform: translateY(0.5px); }
.btn[disabled], .btn[aria-disabled="true"] {
  opacity: 0.45;
  pointer-events: none;
}
.btn .icon { width: 16px; height: 16px; }

/* Primary — solid ink (like reference's "Strategy Call") */
.btn-primary {
  background: var(--ink-900);
  color: var(--paper-50);
}
.btn-primary:hover { background: var(--ink-800); }
.btn-primary:active { background: var(--ink-700); }

/* Accent — ember (was lavender in reference) */
.btn-accent {
  background: var(--accent);
  color: var(--on-accent);
}
.btn-accent:hover { background: var(--accent-hover); }
.btn-accent:active { background: var(--accent-press); }

/* Soft — pill, soft surface (matches the "Apply for a Strategy Call" CTA in reference) */
.btn-soft {
  background: var(--accent-soft-2);
  color: var(--ink-900);
  border-radius: var(--radius-md);
}
.btn-soft:hover { background: var(--accent-soft); }

/* Secondary — outline on paper */
.btn-secondary {
  background: var(--surface);
  border-color: var(--border-default);
  color: var(--text-primary);
}
.btn-secondary:hover { background: var(--paper-200); border-color: var(--border-strong); }

/* Ghost — quiet */
.btn-ghost { color: var(--text-primary); }
.btn-ghost:hover { background: rgba(21,19,15,0.05); }

/* Destructive */
.btn-danger { background: var(--danger); color: white; }
.btn-danger:hover { background: var(--brick-700); }

/* Sizes */
.btn-sm { height: 32px; padding: 0 var(--space-3); font-size: var(--fs-body-sm); }
.btn-lg { height: 48px; padding: 0 var(--space-6); font-size: var(--fs-body-lg); }
.btn-icon { width: 40px; padding: 0; }
.btn-icon.btn-sm { width: 32px; }

/* Pill variant */
.btn-pill { border-radius: var(--radius-pill); }

/* ---------- BADGES & TAGS ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 22px;
  padding: 0 var(--space-2);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  font-weight: 500;
  background: var(--paper-200);
  color: var(--text-secondary);
  border: 1px solid var(--border-subtle);
}
.badge-accent  { background: var(--accent-soft); color: var(--ember-700); border-color: var(--ember-100); }
.badge-success { background: var(--success-soft); color: var(--sage-700); border-color: var(--sage-300); }
.badge-info    { background: var(--info-soft); color: var(--slate-700); border-color: var(--slate-300); }
.badge-warning { background: var(--warning-soft); color: var(--clay-700); border-color: #E5C788; }
.badge-danger  { background: var(--danger-soft); color: var(--brick-700); border-color: #E0A89D; }
.badge-solid   { background: var(--ink-900); color: var(--paper-50); border-color: transparent; }
.badge-dot::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 var(--space-3);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-pill);
  background: var(--surface);
  font-size: var(--fs-body-sm);
  color: var(--text-secondary);
}
.tag .tag-remove {
  width: 14px; height: 14px;
  display: grid; place-items: center;
  border-radius: 50%;
  color: var(--text-tertiary);
  cursor: pointer;
}
.tag .tag-remove:hover { background: var(--paper-200); color: var(--text-primary); }

/* ---------- INPUTS ---------- */
.field { display: flex; flex-direction: column; gap: var(--space-2); }
.field-label {
  font-size: var(--fs-body-sm);
  color: var(--text-primary);
  font-weight: 500;
}
.field-hint  { font-size: var(--fs-caption); color: var(--text-tertiary); }
.field-error { font-size: var(--fs-caption); color: var(--danger); }

.input, .textarea, .select-trigger {
  width: 100%;
  height: 40px;
  padding: 0 var(--space-3);
  background: var(--surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  color: var(--text-primary);
  transition: border-color var(--dur-fast) var(--ease-standard),
              box-shadow var(--dur-fast) var(--ease-standard),
              background var(--dur-fast) var(--ease-standard);
}
.input::placeholder, .textarea::placeholder { color: var(--text-muted); }
.input:hover, .textarea:hover, .select-trigger:hover { border-color: var(--border-strong); }
.input:focus, .textarea:focus, .select-trigger:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
}
.input[aria-invalid="true"], .textarea[aria-invalid="true"] {
  border-color: var(--danger);
}
.textarea { height: auto; min-height: 96px; padding: var(--space-3); resize: vertical; line-height: var(--lh-normal); }

.input-group {
  position: relative;
  display: flex;
  align-items: center;
}
.input-group .input { padding-left: 36px; }
.input-group .input-icon {
  position: absolute;
  left: 12px;
  color: var(--text-tertiary);
  pointer-events: none;
  display: grid; place-items: center;
}

.checkbox, .radio {
  appearance: none;
  width: 16px; height: 16px;
  border: 1.5px solid var(--border-strong);
  background: var(--surface);
  cursor: pointer;
  display: inline-grid; place-items: center;
  transition: background var(--dur-fast), border-color var(--dur-fast);
}
.checkbox { border-radius: 4px; }
.radio    { border-radius: 50%; }
.checkbox:checked, .radio:checked { background: var(--accent); border-color: var(--accent); }
.checkbox:checked::after {
  content: "";
  width: 10px; height: 10px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M2 6.5L4.8 9 10 3.5' stroke='white' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat center / contain;
}
.radio:checked::after {
  content: "";
  width: 6px; height: 6px;
  background: white;
  border-radius: 50%;
}

.switch {
  position: relative;
  width: 36px; height: 20px;
  background: var(--ink-200);
  border-radius: 9999px;
  cursor: pointer;
  transition: background var(--dur-base) var(--ease-standard);
  flex-shrink: 0;
}
.switch::after {
  content: "";
  position: absolute;
  top: 2px; left: 2px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: white;
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-base) var(--ease-emphasized);
}
.switch[aria-checked="true"] { background: var(--accent); }
.switch[aria-checked="true"]::after { transform: translateX(16px); }

/* ---------- ACCORDION ---------- */
.accordion { border-top: 1px solid var(--border-subtle); }
.accordion-item { border-bottom: 1px solid var(--border-subtle); }
.accordion-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-5) 0;
  background: transparent;
  border: 0;
  text-align: left;
  font-family: inherit;
  font-size: var(--fs-body-lg);
  color: var(--text-primary);
  cursor: pointer;
  font-weight: 500;
}
.accordion-trigger .chevron {
  transition: transform var(--dur-base) var(--ease-emphasized);
  color: var(--text-tertiary);
}
.accordion-item[data-open="true"] .chevron { transform: rotate(45deg); }
.accordion-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-base) var(--ease-emphasized);
}
.accordion-item[data-open="true"] .accordion-panel { grid-template-rows: 1fr; }
.accordion-panel > div { overflow: hidden; }
.accordion-panel-inner { padding-bottom: var(--space-5); color: var(--text-secondary); }

/* ---------- CARDS ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-xs);
}
.card-elevated { box-shadow: var(--shadow-md); border-color: transparent; }
.card-inverse {
  background: var(--ink-900);
  color: var(--text-inverse);
  border-color: var(--ink-700);
}
.card-inverse .t-micro-label,
.card-inverse .t-body-sm,
.card-inverse .t-caption { color: var(--ink-300); }
.card-accent {
  background: var(--accent-soft-2);
  border-color: transparent;
}
.card-header { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-4); margin-bottom: var(--space-4); }
.card-title { font-size: var(--fs-h5); font-weight: 500; margin: 0; }
.card-footer { display: flex; gap: var(--space-3); margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--border-subtle); }

/* ---------- STAT TILES ---------- */
.stat-tile {
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  display: flex; flex-direction: column;
  gap: var(--space-2);
}
.stat-tile.dark {
  background: var(--ink-900);
  color: var(--paper-50);
  border-color: transparent;
}
.stat-tile.dark .stat-label { color: var(--ink-300); }
.stat-label {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.stat-value { font-size: 32px; font-weight: 500; letter-spacing: var(--tracking-snug); line-height: 1.1; }
.stat-delta {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
}
.stat-delta.up   { color: var(--success); }
.stat-delta.down { color: var(--danger); }

/* ---------- TABS ---------- */
.tabs { display: flex; gap: var(--space-6); border-bottom: 1px solid var(--border-subtle); }
.tab {
  position: relative;
  padding: var(--space-3) 0;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--text-tertiary);
  background: transparent;
  border: 0;
  cursor: pointer;
}
.tab:hover { color: var(--text-primary); }
.tab[aria-selected="true"] { color: var(--text-primary); }
.tab[aria-selected="true"]::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--text-primary);
}

/* ---------- SEGMENTED ---------- */
.segmented {
  display: inline-flex;
  padding: 3px;
  background: var(--paper-200);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
}
.segmented-item {
  padding: 6px var(--space-3);
  font-size: var(--fs-body-sm);
  color: var(--text-secondary);
  background: transparent;
  border: 0;
  border-radius: 7px;
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-standard);
  font-family: inherit;
}
.segmented-item[aria-selected="true"] {
  background: var(--surface);
  color: var(--text-primary);
  box-shadow: var(--shadow-sm);
}

/* ---------- SELECT / DROPDOWN ---------- */
.select-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  text-align: left;
}
.select-trigger .chevron { color: var(--text-tertiary); transition: transform var(--dur-fast); }
.select-trigger[aria-expanded="true"] .chevron { transform: rotate(180deg); }

.menu {
  position: absolute;
  z-index: var(--z-overlay);
  min-width: 200px;
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: var(--space-1);
  overflow: hidden;
}
.menu-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  font-size: var(--fs-body-sm);
  color: var(--text-primary);
  border-radius: var(--radius-sm);
  cursor: pointer;
  user-select: none;
}
.menu-item:hover, .menu-item[aria-selected="true"] { background: var(--paper-200); }
.menu-item .check { margin-left: auto; color: var(--accent); }
.menu-item[data-variant="danger"] { color: var(--danger); }
.menu-separator { height: 1px; background: var(--border-subtle); margin: var(--space-1) 0; }
.menu-label {
  padding: var(--space-2) var(--space-3) 4px;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--text-tertiary);
}

/* ---------- TOOLTIP ---------- */
.tooltip-wrap { position: relative; display: inline-block; }
.tooltip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: var(--ink-900);
  color: var(--paper-50);
  font-size: var(--fs-caption);
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--dur-fast), transform var(--dur-fast) var(--ease-emphasized);
  z-index: var(--z-overlay);
}
.tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--ink-900);
}
.tooltip-wrap:hover .tooltip,
.tooltip-wrap:focus-within .tooltip {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ---------- POPOVER ---------- */
.popover {
  position: absolute;
  z-index: var(--z-overlay);
  width: 280px;
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-4);
}
.popover-arrow {
  position: absolute;
  width: 10px; height: 10px;
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  transform: rotate(45deg);
  top: -6px;
  left: var(--space-5);
  border-right: 0;
  border-bottom: 0;
}

/* ---------- TOASTS ---------- */
.toast {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  background: var(--ink-800);
  color: var(--paper-50);
  border: 1px solid var(--ink-700);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  min-width: 320px;
  max-width: 420px;
  box-shadow: var(--shadow-lg);
}
.toast .toast-icon {
  width: 18px; height: 18px;
  flex-shrink: 0;
  margin-top: 2px;
}
.toast-title { font-weight: 500; font-size: var(--fs-body-sm); }
.toast-desc  { font-size: var(--fs-caption); color: var(--ink-300); margin-top: 2px; }
.toast-close {
  margin-left: auto;
  color: var(--ink-300);
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 2px;
}
.toast-close:hover { color: white; }
.toast-success .toast-icon { color: var(--sage-300); }
.toast-error   .toast-icon { color: #FF8A75; }
.toast-info    .toast-icon { color: var(--ember-200); }

/* ---------- BANNERS ---------- */
.banner {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
  background: var(--paper-50);
}
.banner .banner-icon { flex-shrink: 0; margin-top: 1px; }
.banner-title { font-weight: 500; }
.banner-desc { color: var(--text-secondary); font-size: var(--fs-body-sm); margin-top: 2px; }
.banner-actions { margin-top: var(--space-3); display: flex; gap: var(--space-2); }

.banner-accent  { background: var(--accent-soft); border-color: var(--ember-100); }
.banner-success { background: var(--success-soft); border-color: var(--sage-300); }
.banner-warning { background: var(--warning-soft); border-color: #E5C788; }
.banner-danger  { background: var(--danger-soft); border-color: #E0A89D; }

/* ---------- DIALOG ---------- */
.dialog-overlay {
  position: fixed; inset: 0;
  background: rgba(21,19,15,0.45);
  display: grid; place-items: center;
  z-index: var(--z-modal);
  backdrop-filter: blur(4px);
}
.dialog {
  width: min(480px, calc(100% - 32px));
  background: var(--surface);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  box-shadow: var(--shadow-xl);
}
.dialog-header { margin-bottom: var(--space-3); }
.dialog-title  { font-size: var(--fs-h4); font-weight: 500; margin: 0; }
.dialog-desc   { color: var(--text-secondary); margin-top: var(--space-2); }
.dialog-actions { display: flex; gap: var(--space-2); justify-content: flex-end; margin-top: var(--space-6); }

/* ---------- DATA TABLE ---------- */
.table-wrap {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface);
}
.table { width: 100%; border-collapse: collapse; font-size: var(--fs-body-sm); }
.table thead th {
  text-align: left;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--text-tertiary);
  font-weight: 500;
  padding: var(--space-3) var(--space-4);
  background: var(--paper-50);
  border-bottom: 1px solid var(--border-subtle);
}
.table tbody td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-primary);
  vertical-align: middle;
}
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: var(--paper-50); }
.table .cell-mono { font-family: var(--font-mono); color: var(--text-secondary); }
.table .row-action {
  opacity: 0;
  transition: opacity var(--dur-fast);
}
.table tr:hover .row-action { opacity: 1; }

/* ---------- PAGINATION ---------- */
.pagination { display: inline-flex; align-items: center; gap: var(--space-1); }
.page {
  min-width: 32px; height: 32px;
  padding: 0 var(--space-2);
  display: inline-grid; place-items: center;
  border-radius: var(--radius-sm);
  font-size: var(--fs-body-sm);
  color: var(--text-secondary);
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  font-family: var(--font-mono);
}
.page:hover { background: var(--paper-200); color: var(--text-primary); }
.page[aria-current="page"] {
  background: var(--ink-900);
  color: var(--paper-50);
}
.page[disabled] { opacity: 0.4; pointer-events: none; }
.page-ellipsis { color: var(--text-muted); padding: 0 4px; }

/* ---------- BREADCRUMBS ---------- */
.breadcrumbs {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.breadcrumbs a { color: var(--text-tertiary); text-decoration: none; }
.breadcrumbs a:hover { color: var(--text-primary); }
.breadcrumbs .sep { color: var(--text-muted); }
.breadcrumbs .current { color: var(--text-primary); }

/* ---------- COMMAND PANEL ---------- */
.command {
  width: 560px;
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
  border: 1px solid var(--border-subtle);
}
.command-search {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border-subtle);
}
.command-search input {
  flex: 1;
  border: 0;
  outline: none;
  background: transparent;
  font-size: var(--fs-body-lg);
  font-family: inherit;
  color: var(--text-primary);
}
.command-search input::placeholder { color: var(--text-muted); }
.command-search .kbd-hint {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  color: var(--text-tertiary);
}
.command-list { padding: var(--space-2); max-height: 360px; overflow: auto; }
.command-group { margin-bottom: var(--space-2); }
.command-item {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: var(--fs-body-sm);
}
.command-item[aria-selected="true"] { background: var(--paper-200); }
.command-item .item-icon { width: 16px; height: 16px; color: var(--text-tertiary); }
.command-item .item-shortcut {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  color: var(--text-tertiary);
}
.kbd {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 2px 6px;
  background: var(--paper-200);
  border: 1px solid var(--border-subtle);
  border-radius: 4px;
  color: var(--text-secondary);
  line-height: 1;
}

/* ---------- SKELETON ---------- */
.skeleton {
  background: linear-gradient(90deg,
    var(--paper-200) 0%,
    var(--paper-300) 50%,
    var(--paper-200) 100%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.6s linear infinite;
  border-radius: var(--radius-sm);
}
@keyframes skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ---------- EMPTY STATE ---------- */
.empty {
  text-align: center;
  padding: var(--space-12) var(--space-6);
  display: flex; flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  background: var(--surface);
  border: 1px dashed var(--border-default);
  border-radius: var(--radius-lg);
}
.empty-icon {
  width: 56px; height: 56px;
  display: grid; place-items: center;
  background: var(--paper-200);
  border-radius: var(--radius-pill);
  color: var(--text-tertiary);
  margin-bottom: var(--space-2);
}
.empty-title { font-size: var(--fs-h5); font-weight: 500; }
.empty-desc  { color: var(--text-secondary); max-width: 360px; }

/* ---------- PROGRESS ---------- */
.progress {
  width: 100%;
  height: 6px;
  background: var(--paper-300);
  border-radius: 999px;
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 999px;
  transition: width var(--dur-slow) var(--ease-emphasized);
}
.progress.dark { background: var(--ink-700); }
.progress.dark .progress-fill { background: var(--ember-400); }

.progress-stepped { display: flex; gap: 4px; }
.progress-stepped .step {
  flex: 1;
  height: 4px;
  background: var(--paper-300);
  border-radius: 2px;
}
.progress-stepped .step.done { background: var(--ink-900); }
.progress-stepped .step.current { background: var(--accent); }

.ring {
  --p: 60;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: conic-gradient(var(--accent) calc(var(--p) * 1%), var(--paper-300) 0);
  display: grid; place-items: center;
  position: relative;
}
.ring::after {
  content: "";
  position: absolute; inset: 6px;
  background: var(--surface);
  border-radius: 50%;
}
.ring-value {
  position: relative;
  z-index: 1;
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  font-weight: 500;
}

/* ---------- KPI CARDS ---------- */
.kpi {
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  display: flex; flex-direction: column; gap: var(--space-4);
  min-height: 168px;
}
.kpi-head { display: flex; justify-content: space-between; align-items: flex-start; }
.kpi-icon {
  width: 32px; height: 32px;
  background: var(--accent-soft-2);
  border-radius: var(--radius-sm);
  display: grid; place-items: center;
  color: var(--ember-700);
}
.kpi-value { font-size: 36px; font-weight: 500; line-height: 1; letter-spacing: var(--tracking-snug); }
.kpi-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; }
.kpi-spark {
  height: 28px;
  width: 80px;
}

/* ---------- ACTIVITY FEED ---------- */
.feed { display: flex; flex-direction: column; }
.feed-item {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  position: relative;
}
.feed-item:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 15px; top: 36px; bottom: -8px;
  width: 1px;
  background: var(--border-subtle);
}
.feed-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--paper-300);
  display: grid; place-items: center;
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 500;
  flex-shrink: 0;
  position: relative; z-index: 1;
}
.feed-body { font-size: var(--fs-body-sm); padding-top: 5px; }
.feed-body strong { font-weight: 500; }
.feed-time {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-mono);
  color: var(--text-tertiary);
  padding-top: 7px;
  text-transform: uppercase;
}

/* ---------- NAVIGATION ---------- */
.nav-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-6);
  background: var(--bg);
  border-bottom: 1px solid var(--border-subtle);
}
.nav-brand {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-weight: 500;
  font-size: var(--fs-body-lg);
}
.nav-links { display: inline-flex; gap: var(--space-8); }
.nav-link {
  text-decoration: none;
  color: var(--text-primary);
  font-size: var(--fs-body-sm);
  display: inline-flex; align-items: center; gap: 4px;
}
.nav-link[aria-current="page"] { color: var(--accent); }

.nav-side {
  width: 240px;
  background: var(--surface);
  border-right: 1px solid var(--border-subtle);
  padding: var(--space-5) var(--space-4);
  display: flex; flex-direction: column; gap: var(--space-2);
}
.nav-side-section {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--text-tertiary);
  padding: var(--space-4) var(--space-2) var(--space-2);
}
.nav-side-item {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--fs-body-sm);
  color: var(--text-primary);
  cursor: pointer;
  text-decoration: none;
}
.nav-side-item:hover { background: var(--paper-200); }
.nav-side-item[aria-current="page"] {
  background: var(--ink-900);
  color: var(--paper-50);
}
.nav-side-item .item-badge {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  color: var(--text-tertiary);
}
.nav-side-item[aria-current="page"] .item-badge { color: var(--ink-300); }

/* ---------- HERO ---------- */
.hero {
  background: var(--bg);
  padding: var(--space-20) var(--space-8);
  display: grid;
  gap: var(--space-12);
  border-radius: var(--radius-xl);
  border: 1px solid var(--border-subtle);
}
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--text-secondary);
}
.hero-eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.hero-title { font-size: 64px; line-height: 1.05; letter-spacing: var(--tracking-tight); font-weight: 500; max-width: 14ch; margin: 0; }
.hero-sub { color: var(--text-secondary); font-size: var(--fs-body-lg); max-width: 50ch; }
.hero-actions { display: flex; gap: var(--space-3); margin-top: var(--space-3); }

/* ---------- PRICING ---------- */
.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
.price-card {
  padding: var(--space-6);
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  display: flex; flex-direction: column;
  gap: var(--space-5);
}
.price-card.featured {
  background: var(--ink-900);
  color: var(--paper-50);
  border-color: transparent;
}
.price-card.featured .price-name,
.price-card.featured .price-desc,
.price-card.featured .price-feature { color: var(--ink-300); }
.price-card.featured .price-amount { color: white; }
.price-name {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.price-amount { font-size: 48px; font-weight: 500; line-height: 1; letter-spacing: var(--tracking-snug); }
.price-amount span { font-size: var(--fs-body); color: var(--text-tertiary); font-weight: 400; }
.price-desc { color: var(--text-secondary); font-size: var(--fs-body-sm); }
.price-features { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.price-feature {
  display: flex; gap: var(--space-2); align-items: center;
  font-size: var(--fs-body-sm);
  color: var(--text-secondary);
}
.price-feature .check { color: var(--accent); flex-shrink: 0; }
.price-card.featured .price-feature .check { color: var(--ember-300); }

/* ---------- CTA BANNER ---------- */
.cta-banner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  min-height: 260px;
}
.cta-banner > div { padding: var(--space-8); display: flex; flex-direction: column; justify-content: center; }
.cta-banner-left { background: var(--ink-900); color: var(--paper-50); gap: var(--space-4); }
.cta-banner-right {
  background: var(--accent-soft-2);
  position: relative;
  display: flex; align-items: center; justify-content: center; flex-direction: column; gap: var(--space-3);
}
.cta-banner-right .pill-list { display: flex; flex-direction: column; gap: var(--space-2); }
.cta-banner-right .pill {
  background: var(--surface);
  border-radius: var(--radius-pill);
  padding: var(--space-2) var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  display: flex; align-items: center; gap: var(--space-2);
  box-shadow: var(--shadow-sm);
}

/* ---------- SETTINGS LAYOUT ---------- */
.settings { display: grid; grid-template-columns: 200px 1fr; gap: var(--space-8); }
.settings-side { display: flex; flex-direction: column; gap: 2px; }
.settings-side a {
  padding: var(--space-2) var(--space-3);
  text-decoration: none;
  color: var(--text-secondary);
  font-size: var(--fs-body-sm);
  border-radius: var(--radius-sm);
}
.settings-side a[aria-current="page"] {
  color: var(--text-primary);
  background: var(--paper-200);
}
.settings-row {
  display: grid;
  grid-template-columns: 280px 1fr auto;
  gap: var(--space-6);
  padding: var(--space-5) 0;
  border-bottom: 1px solid var(--border-subtle);
  align-items: start;
}
.settings-row:last-child { border-bottom: 0; }
.settings-row .row-title { font-weight: 500; }
.settings-row .row-desc { color: var(--text-secondary); font-size: var(--fs-body-sm); margin-top: 2px; }

/* ---------- DATA VISUALIZATIONS ---------- */
.chart {
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  display: flex; flex-direction: column;
  gap: var(--space-4);
}
.chart.dark {
  background: var(--ink-900);
  color: var(--paper-50);
  border-color: transparent;
}
.chart-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3); }
.chart-title { font-weight: 500; font-size: var(--fs-body); margin: 0; }
.chart-sub { font-size: var(--fs-caption); color: var(--text-tertiary); margin-top: 2px; }
.chart.dark .chart-sub { color: var(--ink-300); }
.chart svg { display: block; width: 100%; height: auto; }
.chart-axis-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  fill: var(--text-tertiary);
}
.chart.dark .chart-axis-label { fill: var(--ink-300); }
.chart-grid { stroke: var(--paper-300); stroke-width: 1; stroke-dasharray: 2 3; }
.chart.dark .chart-grid { stroke: var(--ink-700); }
.chart-baseline { stroke: var(--ink-200); stroke-width: 1; }
.chart.dark .chart-baseline { stroke: var(--ink-700); }
.chart-legend {
  display: flex; gap: var(--space-4); flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.chart.dark .chart-legend { color: var(--ink-300); }
.chart-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.chart-legend-swatch {
  width: 10px; height: 10px;
  border-radius: 2px;
  background: var(--ember-500);
}

/* ---------- VIEWER (DOC) STYLES ---------- */
/* These are layout helpers for the documentation viewer only,
   not part of the design system itself. */
.viewer-shell {
  max-width: var(--container-xl);
  margin: 0 auto;
  padding: var(--space-12) var(--space-8);
}
.viewer-section {
  padding: var(--space-12) 0;
  border-bottom: 1px solid var(--border-subtle);
}
.viewer-section:last-child { border-bottom: 0; }
.viewer-section-head {
  display: flex; flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-8);
}
.viewer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-4);
}
.specimen {
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  display: flex; flex-direction: column; gap: var(--space-4);
}
.specimen-row {
  display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap;
}
.specimen-label {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.swatch {
  display: flex; flex-direction: column; gap: var(--space-2);
}
.swatch-tile {
  height: 88px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
}
.swatch-meta {
  display: flex; justify-content: space-between;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
}
.swatch-meta .name { color: var(--text-primary); }
.swatch-meta .val  { color: var(--text-tertiary); }

.dashed-frame {
  border: 1px dashed var(--border-default);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  background: var(--paper-50);
}

.placeholder-img {
  background:
    repeating-linear-gradient(
      135deg,
      var(--paper-200),
      var(--paper-200) 8px,
      var(--paper-100) 8px,
      var(--paper-100) 16px
    );
  border-radius: var(--radius-md);
  display: grid; place-items: center;
  color: var(--text-tertiary);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
}

/* ===== 3. INDEX PAGE STYLES ===== */
/* ============ PAGE FRAME ============ */
  html { scroll-behavior: smooth; }
  body { background: var(--bg); }
  .wrap { max-width: 900px; margin: 0 auto; padding: 0 var(--space-6); }
  .btn { white-space: nowrap; }

  /* ---------- NAV ---------- */
  .site-nav {
    position: sticky; top: 0; z-index: var(--z-overlay);
    background: color-mix(in oklab, var(--bg) 86%, transparent);
    backdrop-filter: saturate(140%) blur(10px);
    border-bottom: 1px solid var(--border-subtle);
  }
  .site-nav .wrap {
    display: flex; align-items: center; justify-content: space-between;
    height: var(--header-h);
  }
  .brand-logo { height: 34px; width: auto; display: block; }
  .nav-center { display: flex; gap: var(--space-6); }
  .nav-center a {
    text-decoration: none; color: var(--text-secondary);
    font-size: var(--fs-body-sm); font-weight: 500;
    transition: color var(--dur-fast) var(--ease-standard);
  }
  .nav-center a:hover { color: var(--text-primary); }
  .nav-right { display: flex; align-items: center; gap: var(--space-2); }
  @media (max-width: 720px) { .nav-center { display: none; } }

  /* ---------- SECTION SCAFFOLD ---------- */
  .section { padding: var(--space-20) 0; border-top: 1px solid var(--border-subtle); }
  .section:first-of-type { border-top: 0; }
  .kicker {
    display: inline-flex; align-items: center; gap: var(--space-2);
    font-family: var(--font-mono); font-size: var(--fs-micro);
    letter-spacing: var(--tracking-mono); text-transform: uppercase;
    color: var(--text-tertiary); font-weight: 500;
  }
  .kicker .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
  .sec-head { display: flex; flex-direction: column; gap: var(--space-4); margin-bottom: var(--space-10); max-width: 85%; align-items: center; text-align: center; margin-left: auto; margin-right: auto; }
  .sec-title { font-size: var(--fs-h2); line-height: var(--lh-snug); letter-spacing: var(--tracking-snug); font-weight: 500; margin: 0; text-wrap: balance; }
  .sec-lead { color: var(--text-secondary); font-size: var(--fs-body-lg); line-height: var(--lh-relaxed); margin: 0; }

  /* ---------- HERO ---------- */
  .hero-block { padding-top: var(--space-20); padding-bottom: var(--space-16); }
  .hero-eyebrow-row {
    display: inline-flex; align-items: center; gap: var(--space-2);
    font-family: var(--font-mono); font-size: var(--fs-micro);
    letter-spacing: var(--tracking-mono); text-transform: uppercase;
    color: var(--text-secondary);
    padding: var(--space-1) var(--space-3) var(--space-1) var(--space-2);
    border: 1px solid var(--border-default); border-radius: var(--radius-pill);
    background: var(--surface);
  }
  .hero-eyebrow-row .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
  .hero-headline {
    font-size: clamp(40px, 6.2vw, 60px); line-height: 1.04;
    letter-spacing: var(--tracking-tight); font-weight: 500; margin: var(--space-6) 0 0;
    max-width: 16ch; text-wrap: balance;
  }
  .hero-headline em { font-style: normal; color: var(--accent); }
  .hero-sub { color: var(--text-secondary); font-size: var(--fs-body-lg); line-height: var(--lh-relaxed); max-width: none; width: 100%; margin: var(--space-6) 0 0; }
  .hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-8); align-items: center; }
  .hero-note { display: flex; align-items: flex-start; gap: var(--space-2); margin-top: var(--space-8); color: var(--text-tertiary); font-size: var(--fs-body-sm); max-width: 52ch; }
  .hero-note svg { flex-shrink: 0; margin-top: 2px; color: var(--accent); }
  .hero-copy-row {
    display: grid;
    grid-template-columns: 1fr 45%;
    column-gap: var(--space-10);
    align-items: stretch;
  }
  .hero-copy-panel {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
    justify-content: center;
    position: relative;
    z-index: 1;
  }
  .hero-copy-docs { min-height: 100%; display: flex; align-items: center; }
  .hero-copy-docs > * { width: 100%; }
  .console {
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl);
    background: var(--surface);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    width: 100%;
    align-self: center;
  }
  .console-bar {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--border-subtle);
    background: var(--paper-50);
  }
  .console-dots { display: flex; gap: 6px; }
  .console-dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--border-default); display: block; }
  .console-addr {
    margin-left: var(--space-2);
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    letter-spacing: var(--tracking-mono);
    color: var(--text-tertiary);
    text-transform: uppercase;
    white-space: nowrap;
  }
  .console-live {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    letter-spacing: var(--tracking-mono);
    text-transform: uppercase;
    color: var(--ember-700);
  }
  .console-live .pulse {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ember-500);
    box-shadow: 0 0 0 0 color-mix(in oklab, var(--ember-500) 60%, transparent);
    animation: csPulse 1.6s var(--ease-standard) infinite;
  }
  .console[data-paused="true"] .console-live .pulse,
  .console[data-paused="true"] .cs-caret,
  .console[data-paused="true"] .cs-eng[data-state="active"] .cs-eng-fill,
  .console[data-paused="true"] .cs-eng[data-state="pending"] .cs-eng-st::after,
  .console[data-paused="true"] .cs-eng[data-state="pending"] .cs-eng-sent::before,
  .console[data-paused="true"] .cs-result-area[data-loading="true"]::before {
    animation-play-state: paused;
  }
  @keyframes csPulse {
    0% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--ember-500) 55%, transparent); }
    70% { box-shadow: 0 0 0 7px color-mix(in oklab, var(--ember-500) 0%, transparent); }
    100% { box-shadow: 0 0 0 0 transparent; }
  }
  .console-body { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-5); }
  .cs-block { display: flex; flex-direction: column; gap: var(--space-3); }
  .cs-label {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    letter-spacing: var(--tracking-mono);
    text-transform: uppercase;
    color: var(--text-tertiary);
    white-space: nowrap;
  }
  .cs-label em { font-style: normal; color: var(--accent); font-weight: 500; transition: color var(--dur-fast) var(--ease-standard); }
  .cs-prompt {
    font-family: var(--font-mono);
    font-size: var(--fs-body-sm);
    line-height: 1.45;
    color: var(--text-primary);
    background: var(--paper-50);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    height: 62px;
    box-sizing: border-box;
    display: block;
    overflow: hidden;
  }
  .cs-prompt::before { content: "›"; color: var(--accent); margin-right: 6px; font-weight: 600; }
  .cs-caret { display: inline-block; width: 7px; height: 1.05em; background: var(--accent); margin-left: 2px; transform: translateY(2px); animation: csBlink 1s steps(1) infinite; }
  @keyframes csBlink { 50% { opacity: 0; } }
  .cs-engines { display: flex; flex-direction: column; gap: 7px; }
  .cs-eng {
    display: grid;
    grid-template-columns: 18px 80px minmax(0, 1fr) 15px 96px;
    align-items: center;
    gap: var(--space-3);
    height: 22px;
    color: var(--text-tertiary);
    transition: color var(--dur-base) var(--ease-standard);
  }
  .cs-eng-ic { width: 18px; height: 18px; display: grid; place-items: center; }
  .cs-eng-ic img { width: 17px; height: 17px; display: block; opacity: 0.45; filter: grayscale(1); transition: opacity var(--dur-base) var(--ease-standard), filter var(--dur-base) var(--ease-standard); }
  .cs-eng-name { font-size: var(--fs-caption); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .cs-eng-bar {
    height: 4px;
    width: 100%;
    justify-self: stretch;
    border-radius: var(--radius-pill);
    background: var(--paper-200);
    overflow: hidden;
    position: relative;
  }
  .cs-eng-fill {
    display: block;
    height: 100%;
    width: 100%;
    min-width: 100%;
    border-radius: inherit;
    background: var(--ember-400);
    transform: scaleX(0);
    transform-origin: left center;
  }
  .cs-eng-st { width: 15px; height: 15px; display: grid; place-items: center; position: relative; justify-self: center; }
  .cs-eng-st svg { width: 13px; height: 13px; opacity: 0; transition: opacity var(--dur-fast) var(--ease-standard); grid-area: 1 / 1; }
  .cs-eng-st .ck {
    color: var(--ember-500);
    width: 13px;
    height: 13px;
    padding: 0;
    border-radius: 0;
    background: transparent;
  }
  .cs-eng-st .dash { color: var(--text-muted); }
  .cs-eng-sent {
    justify-self: stretch;
    min-width: 96px;
    width: 96px;
    max-width: 96px;
    height: 18px;
    padding: 0 6px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: var(--tracking-mono);
    text-transform: uppercase;
    opacity: 0;
    transform: translateY(2px);
    transition: opacity var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard);
    white-space: nowrap;
  }
  .cs-eng-sent.is-visible { opacity: 1; transform: none; }
  .cs-eng-sent.pos { background: #e6f0d8; color: #186b2f; }
  .cs-eng-sent.neu { background: #dce8fb; color: #173f95; }
  .cs-eng-sent.neg { background: #f8c8cc; color: #c32026; }
  .cs-eng-sent.br { background: #fde8a9; color: #ae7400; }
  .cs-eng-sent.nm { background: #fde3c4; color: #cf4d00; }
  .cs-eng[data-state="pending"] .cs-eng-st {
    overflow: hidden;
  }
  .cs-eng[data-state="pending"] .cs-eng-st::before {
    content: "";
    position: absolute;
    inset: 2px;
    border-radius: 999px;
    background: var(--paper-200);
    grid-area: 1 / 1;
  }
  .cs-eng[data-state="pending"] .cs-eng-st::after {
    content: "";
    position: absolute;
    inset: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.72) 50%, transparent 100%);
    transform: translateX(-180%);
    animation: csSheen 1.05s linear infinite;
  }
  .cs-eng[data-state="pending"] .cs-eng-sent {
    opacity: 1;
    transform: none;
    height: 14px;
    color: transparent;
    background: var(--paper-200);
    position: relative;
    overflow: hidden;
  }
  .cs-eng[data-state="pending"] .cs-eng-sent::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.72) 50%, transparent 100%);
    transform: translateX(-180%);
    animation: csSheen 1.05s linear infinite;
  }
  .cs-eng[data-state="active"] { color: var(--text-primary); }
  .cs-eng[data-state="active"] .cs-eng-ic img { opacity: 1; filter: grayscale(0); }
  .cs-eng[data-state="active"] .cs-eng-fill {
    background:
      repeating-linear-gradient(
        -45deg,
        var(--ember-100) 0 8px,
        color-mix(in oklab, var(--ember-100) 82%, var(--ember-200)) 8px 16px
      );
    background-size: 24px 24px;
    box-shadow: 0 0 6px color-mix(in oklab, var(--ember-500) 45%, transparent);
    animation: csStripe 520ms linear infinite;
  }
  .cs-eng[data-state="mention"], .cs-eng[data-state="absent"] { color: var(--text-secondary); }
  .cs-eng[data-state="mention"] .cs-eng-ic img, .cs-eng[data-state="absent"] .cs-eng-ic img { opacity: 1; filter: grayscale(0); }
  .cs-eng[data-state="mention"] .cs-eng-fill {
    background: var(--ember-500);
    animation: none;
    box-shadow: none;
    transform: none;
    width: 100%;
  }
  .cs-eng[data-state="mention"] .cs-eng-st .ck { opacity: 1; }
  .cs-eng[data-state="absent"] .cs-eng-fill {
    background: var(--ink-300);
    animation: none;
    box-shadow: none;
    transform: none;
    width: 100%;
  }
  .cs-eng[data-state="absent"] .cs-eng-st .dash { opacity: 1; }
  .cs-eng[data-state="absent"] { color: var(--text-tertiary); }
  @keyframes csStripe {
    from { background-position: 0 0; }
    to { background-position: 24px 0; }
  }
  @keyframes csSheen {
    from { transform: translateX(-180%); }
    to { transform: translateX(180%); }
  }
  .cs-result-area {
    margin-top: 0;
    min-height: 75px;
    border-top: 1px solid var(--ember-500);
    background: var(--ember-50);
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    padding: 0 12px;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
  }
  .cs-result-area[data-loading="true"]::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -34%;
    width: 34%;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.7) 50%, transparent 100%);
    animation: csDiagnosisShine 1.15s linear infinite;
  }
  .cs-diagnosis {
    position: relative;
    z-index: 1;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity var(--dur-slow) var(--ease-standard), transform var(--dur-slow) var(--ease-standard);
    color: var(--ember-500);
    font-family: var(--font-mono);
    font-size: var(--fs-body-sm);
    letter-spacing: 0;
    line-height: 1.45;
    text-transform: none;
  }
  .cs-diagnosis[data-show="true"] { opacity: 1; transform: none; }
  @keyframes csDiagnosisShine {
    from { transform: translateX(0); }
    to { transform: translateX(420%); }
  }
  /* ---------- HERO REPORT STACK ---------- */
  .report-stack {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-12);
    padding: var(--space-2) 0;
  }
  .report-stage {
    position: relative;
    width: 100%;
    flex: 1 1 auto;
    min-height: 480px;
    transform: rotate(-4deg);
    transform-origin: center;
  }
  /* SVG metaball blob field — positioned + counter-rotated via .hero-blob-field */
  .hero-blob-field {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 210%;
    height: 190%;
    transform: translate(-50%, -50%) rotate(4deg); /* cancel parent stage -4deg tilt */
    z-index: 0;
    pointer-events: none;
    overflow: visible;
  }
  @media (prefers-reduced-motion: reduce) {
    .hero-blob-field animate { display: none; }
  }
  .report-card {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 92%;
    max-width: 360px;
    aspect-ratio: 3 / 4;
    box-sizing: border-box;
    background: var(--bg);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 28px 26px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow:
      0 1px 2px rgba(28, 25, 23, 0.04),
      0 8px 22px -8px rgba(28, 25, 23, 0.12),
      0 24px 48px -18px rgba(28, 25, 23, 0.12);
    transition:
      transform 760ms cubic-bezier(0.22, 1, 0.36, 1),
      opacity 420ms ease,
      box-shadow 760ms ease;
    transform-origin: 50% 50%;
    will-change: transform, opacity;
  }
  .report-card[data-pos="0"] { transform: translate(-50%, -50%) translate(30px, 24px); z-index: 4; opacity: 1; }
  .report-card[data-pos="1"] { transform: translate(-50%, -50%) translate(10px, 8px); z-index: 3; opacity: 1; }
  .report-card[data-pos="2"] { transform: translate(-50%, -50%) translate(-10px, -8px); z-index: 2; opacity: 1; }
  .report-card[data-pos="3"] { transform: translate(-50%, -50%) translate(-30px, -24px); z-index: 1; opacity: 1; }
  .report-card.is-leaving { opacity: 0; z-index: 10; transition: opacity 380ms ease; }

  .r-head { display: flex; align-items: center; gap: 10px; }
  .r-mark { width: 16px; height: 16px; border-radius: 4px; background: var(--accent); flex-shrink: 0; }
  .r-title-bar { height: 9px; width: 70%; border-radius: 3px; background: var(--paper-200); }
  .r-meta-row { display: flex; gap: 8px; margin-top: 20px; }
  .r-chip { height: 18px; width: 52px; border-radius: 999px; background: var(--paper-100); border: 1px solid var(--paper-200); }
  .r-lines { display: flex; flex-direction: column; gap: 9px; margin-top: 22px; }
  .r-line { height: 6px; border-radius: 3px; background: var(--paper-200); }
  .r-line.is-90 { width: 92%; }
  .r-line.is-70 { width: 72%; }
  .r-chart {
    margin-top: 22px;
    flex: 1;
    min-height: 90px;
    border-radius: 8px;
    background:
      repeating-linear-gradient(
        135deg,
        var(--paper-50) 0,
        var(--paper-50) 10px,
        var(--paper-100) 10px,
        var(--paper-100) 11px
      );
    border: 1px solid var(--paper-200);
  }
  .r-foot { display: flex; gap: 10px; margin-top: 18px; }
  .r-foot-bar { height: 6px; flex: 1; border-radius: 3px; background: var(--paper-200); }
  .r-foot-bar:last-child { flex: 0 0 28%; background: var(--paper-100); border: 1px solid var(--paper-200); height: 9px; margin-top: -2px; border-radius: 4px; }

  .report-dots {
    display: flex;
    gap: var(--space-3);
    padding: 0;
    margin: 0;
    list-style: none;
    z-index: 5;
  }
  .report-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--ink-300);
    border: 0;
    padding: 0;
    margin: 0;
    cursor: pointer;
    transition: background 220ms var(--ease-standard), width 260ms var(--ease-emphasized), transform 220ms var(--ease-standard);
    -webkit-appearance: none;
    appearance: none;
  }
  .report-dot[aria-current="true"] {
    background: var(--accent);
    width: 22px;
    transform: none;
  }
  .report-dot:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

  @media (prefers-reduced-motion: reduce) {
    .report-card { transition: none; }
  }

  .hero-browser-row { margin-top: var(--space-12); display: none; }
  @media (max-width: 720px) {
    .hero-copy-row { grid-template-columns: 1fr; }
    .hero-copy-docs { display: none; }
  }
  @media (prefers-reduced-motion: reduce) {
    .console-live .pulse, .cs-caret { animation: none; }
  }
  /* product shot */
  .hero-shot {
    border: 1px solid var(--border-subtle); border-radius: var(--radius-xl);
    background: var(--surface); box-shadow: var(--shadow-lg);
    overflow: hidden;
  }
  .shot-bar {
    display: flex; align-items: center; gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--border-subtle); background: var(--paper-50);
  }
  .shot-bar .dots { display: flex; gap: 6px; }
  .shot-bar .dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--border-default); display: block; }
  .shot-bar .addr {
    margin-left: var(--space-2); font-family: var(--font-mono); font-size: var(--fs-micro);
    letter-spacing: var(--tracking-mono); color: var(--text-tertiary); text-transform: uppercase;
  }
  .shot-bar .badge { margin-left: auto; }
  .hero-frame {
    height: 900px;
    border-radius: 0;
    position: relative;
    overflow: hidden;
    background: var(--paper-50);
  }
  .hero-report-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    min-height: 100%;
    display: block;
    transform: translateY(var(--hero-report-offset, 0px));
    will-change: transform;
  }

  /* ---------- ENGINES ---------- */
  .engines-intro { color: var(--text-secondary); font-size: var(--fs-body-lg); line-height: var(--lh-relaxed); max-width: 54ch; margin: var(--space-4) 0 0; }
  .engines { margin-top: 0; }
  .engine-row {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    column-gap: var(--space-20);
    row-gap: var(--space-5);
    align-items: start;
    width: 100%;
  }
  .engine { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); }
  .en-main { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); }
  .en-main img { width: 24px; height: 24px; display: block; flex-shrink: 0; }
  .en-main span { font-size: var(--fs-caption); font-weight: 500; letter-spacing: var(--tracking-snug); white-space: nowrap; }
  .engine .tdot { width: 8px; height: 8px; border-radius: 50%; }
  .engine.type-api .tdot { background: var(--ink-900); }
  .engine.type-web .tdot { background: var(--accent); }

  .engine-legend { display: flex; justify-content: center; gap: var(--space-3); margin-top: var(--space-12); }
  .leg { display: inline-flex; align-items: center; gap: var(--space-2); height: 36px; padding: 0 var(--space-4); border-radius: var(--radius-pill); font-size: var(--fs-body-sm); font-weight: 500; white-space: nowrap; }
  .leg i { width: 9px; height: 9px; border-radius: 50%; }
  .leg-api { background: var(--paper-200); color: var(--text-primary); }
  .leg-api i { background: var(--ink-900); }
  .leg-web { background: var(--ember-50); color: var(--ember-700); }
  .leg-web i { background: var(--accent); }

  @media (max-width: 640px) {
    .engine-legend { margin-top: var(--space-8); }
  }

  /* ---------- OUTPUTS ---------- */
  .outputs-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
  .output-card {
    background: var(--surface); border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md); padding: var(--space-6);
    display: flex; flex-direction: column; gap: var(--space-3);
    position: relative; transition: border-color var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard);
  }
  .output-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); }
  .output-top { display: flex; align-items: center; justify-content: flex-start; }
  .output-idx { font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: var(--tracking-mono); color: var(--text-tertiary); }
  .output-glyph { width: 34px; height: 34px; display: grid; place-items: center; color: var(--ember-700); background: var(--accent-soft-2); border-radius: var(--radius-md); }
  .output-glyph svg { width: 18px; height: 18px; }
  .output-card h3 { margin: 0; font-size: var(--fs-h5); font-weight: 500; letter-spacing: var(--tracking-snug); }
  .output-card p { margin: 0; color: var(--text-secondary); font-size: var(--fs-body); line-height: var(--lh-normal); }
  @media (max-width: 640px) { /* outputs-grid now collapses at 576px */ }

  /* ---------- ADVANTAGE ---------- */
  .adv-top { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-10); align-items: start; margin-bottom: var(--space-12); }
  .adv-body { display: flex; flex-direction: column; gap: var(--space-4); color: var(--text-secondary); font-size: var(--fs-body); line-height: var(--lh-relaxed); }
  .adv-list { display: flex; flex-direction: column; width: min(100%, 600px); margin: 0 auto; }
  .adv-item { display: grid; grid-template-columns: 48px 1fr; gap: var(--space-5); padding: var(--space-6) 0; border-top: 1px solid var(--border-subtle); }
  .adv-item:last-child { border-bottom: 1px solid var(--border-subtle); }
  .adv-num { font-family: var(--font-mono); font-size: var(--fs-body-sm); color: var(--accent); font-weight: 600; padding-top: 2px; }
  .adv-item h4 { margin: 0 0 var(--space-2); font-size: var(--fs-h5); font-weight: 500; letter-spacing: var(--tracking-snug); }
  .adv-item p { margin: 0; color: var(--text-secondary); font-size: var(--fs-body); line-height: var(--lh-normal); max-width: 64ch; }
  @media (max-width: 640px) {
    .adv-top { grid-template-columns: 1fr; gap: var(--space-6); }
    .adv-list { width: 100%; }
  }

  /* ---------- WORKFLOW ---------- */
  .steps { display: flex; flex-direction: column; gap: var(--space-16); position: relative; }
  .step {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-12);
    align-items: center;
  }
  .step-body { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
  .step:nth-child(even) .step-body { order: 2; }
  .step:nth-child(even) .step-illo { order: 1; }
  .step-illo {
    order: 0;
    width: 100%;
    aspect-ratio: 4 / 3;
    height: auto;
    background: #ffffff;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    margin: 0;
    overflow: hidden;
  }
  .step-illo > * { display: none !important; }
  .step-node {
    display: inline-flex !important;
    align-items: center;
    gap: var(--space-2);
    width: auto !important;
    height: auto !important;
    background: transparent;
    color: var(--text-tertiary);
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    letter-spacing: var(--tracking-mono);
    text-transform: uppercase;
    font-weight: 500;
    border-radius: 0;
    padding: 0;
    place-items: initial;
  }
  .step-node .step-num {
    color: var(--accent);
    font-weight: 600;
  }
  .step-node::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
    flex-shrink: 0;
  }
  .step h4 { margin: 0; font-size: var(--fs-h5); font-weight: 500; letter-spacing: var(--tracking-snug); }
  .step p { margin: 0; color: var(--text-secondary); font-size: var(--fs-body); line-height: var(--lh-normal); }
  .step-illo-form .illo { justify-content: center; }
  .step-illo-form .illo-seg { margin-top: 0; }
  .step-illo-form .step1-brand-input,
  .step-illo-form .step1-website-input {
    transition: border-color 160ms ease, box-shadow 160ms ease;
  }
  .step-illo-form .step1-brand-input { gap: 6px; }
  .step-illo-form .step1-website-input { gap: 2px; }
  .step-illo-form .step1-brand-mark {
    width: 13px;
    height: 13px;
    border-radius: 3px;
    background: var(--ember-500);
    flex-shrink: 0;
    display: grid;
    place-items: center;
    overflow: hidden;
  }
  .step-illo-form .step1-brand-mark.is-loading {
    animation: step1BrandPulse 1.15s ease-in-out infinite;
  }
  .step-illo-form .step1-brand-mark img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    border-radius: inherit;
  }
  .step-illo-form .step1-brand-mark.has-icon {
    background: #fff;
  }
  .step-illo-form .step1-brand-text,
  .step-illo-form .step1-website-text,
  .step-illo-form .step1-location-text {
    min-width: 0;
  }
  .step-illo-form .step1-brand-caret[hidden],
  .step-illo-form .step1-website-caret[hidden] {
    display: none;
  }
  .step-illo-form .step1-brand-caret,
  .step-illo-form .step1-website-caret {
    margin-left: 0;
    flex-shrink: 0;
  }
  @keyframes step1BrandPulse {
    0%, 100% {
      box-shadow: 0 0 0 0 rgba(255, 69, 0, 0.08), 0 0 0 0 rgba(255, 69, 0, 0);
      filter: saturate(1);
    }
    50% {
      box-shadow: 0 0 0 4px rgba(255, 69, 0, 0.12), 0 0 14px 1px rgba(255, 69, 0, 0.22);
      filter: saturate(1.08);
    }
  }
  .illo {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 15px;
    display: flex;
    flex-direction: column;
    font-family: inherit;
  }
  .illo-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin-bottom: 9px; }
  .illo-title { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-tertiary); font-weight: 500; }
  .illo-pill { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.04em; color: var(--ember-700); background: var(--ember-50); border-radius: var(--radius-pill); padding: 2px 8px; }

  .illo-field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 15px; }
  .illo-lab { font-family: var(--font-mono); font-size: 8px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-tertiary); }
  .illo-input { display: flex; align-items: center; gap: 6px; height: 31px; box-sizing: border-box; font-size: 11px; color: var(--text-primary); background: #fff; border: 1px solid var(--paper-300); border-radius: 6px; padding: 5px 9px; line-height: 1.1; }
  .illo-input.active { border-color: var(--ember-400); box-shadow: 0 0 0 3px var(--ember-50); }
  .illo-input .swatch { width: 13px; height: 13px; border-radius: 3px; background: var(--ember-500); flex-shrink: 0; }
  .illo-input .pin { width: 11px; height: 11px; flex-shrink: 0; color: var(--ember-500); }
  .illo-caret { width: 1.5px; height: 12px; background: var(--ember-500); margin-left: auto; animation: illoBlink 1.1s steps(1) infinite; }
  @keyframes illoBlink { 50% { opacity: 0; } }
  .illo-seg { display: flex; gap: 3px; background: var(--paper-100); border: 1px solid var(--paper-300); border-radius: 8px; padding: 3px; margin-top: auto; }
  .illo-seg span { flex: 1; text-align: center; font-size: 9.5px; font-weight: 600; padding: 5px 4px; border-radius: 5px; white-space: nowrap; transition: background-color 180ms ease, color 180ms ease; }
  .illo-seg .on { background: var(--ember-500); color: #fff; }
  .illo-seg .off { color: var(--text-tertiary); }

  .step-illo-chat .illo {
    padding: 12px;
    gap: 8px;
  }
  .step-illo-chat .illo-head {
    margin-bottom: 0;
  }
  .step-illo-chat .illo-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding-inline: 7px;
  }
  .step-illo-chat .illo-pill img {
    width: 10px;
    height: 10px;
    display: block;
  }
  .illo-thread-wrap {
    flex: 1;
    min-height: 0;
    border: 1px solid var(--paper-200);
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(255,250,245,0.96) 100%);
    padding: 10px;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
  }
  .illo-thread {
    width: 100%;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 8px;
    opacity: 1;
    transform: translateY(0);
    transition: opacity 260ms ease, transform 260ms ease;
  }
  .illo-thread.is-fading {
    opacity: 0;
    transform: translateY(-10px);
  }
  .illo-msg {
    display: flex;
    align-items: flex-end;
    gap: 7px;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 220ms ease, transform 220ms ease;
  }
  .illo-msg[hidden] {
    display: none;
  }
  .illo-msg.is-visible {
    opacity: 1;
    transform: translateY(0);
  }
  .illo-msg-user {
    align-self: flex-end;
    justify-content: flex-end;
    flex-direction: row-reverse;
    max-width: 88%;
  }
  .illo-msg-ai {
    align-self: flex-start;
    max-width: 100%;
  }
  .illo-avatar {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    border-radius: 50%;
    display: grid;
    place-items: center;
    overflow: hidden;
  }
  .illo-avatar-user {
    background: var(--paper-100);
    border: 1px solid var(--paper-300);
    color: var(--ember-500);
  }
  .illo-avatar-user svg {
    width: 10px;
    height: 10px;
    display: block;
  }
  .illo-avatar-ai {
    background: var(--paper-50);
    border: 1px solid var(--paper-200);
  }
  .illo-avatar-ai img {
    width: 11px;
    height: 11px;
    display: block;
  }
  .illo-bubble {
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 10.5px;
    line-height: 1.48;
    text-align: left;
    box-shadow: 0 6px 18px rgba(42, 39, 35, 0.06);
  }
  .step2-user-bubble {
    background: #fff;
    border: 1px solid var(--paper-300);
    color: var(--text-primary);
  }
  .step2-ai-bubble {
    background: var(--paper-100);
    border: 1px solid var(--paper-200);
    color: var(--text-secondary);
    min-width: 70%;
    max-width: 100%;
  }
  .step2-ai-bubble.is-thinking .step2-ai-text {
    display: none;
  }
  .step2-ai-bubble:not(.is-thinking) .illo-dots {
    display: none;
  }
  .illo-dots {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 12px;
  }
  .illo-dots i {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--text-muted);
    opacity: 0.28;
    animation: step2Dots 1s ease-in-out infinite;
  }
  .illo-dots i:nth-child(2) { animation-delay: 0.16s; }
  .illo-dots i:nth-child(3) { animation-delay: 0.32s; }
  @keyframes step2Dots {
    0%, 80%, 100% { opacity: 0.28; transform: translateY(0); }
    40% { opacity: 1; transform: translateY(-1px); }
  }
  .step2-user-text,
  .step2-ai-text {
    white-space: pre-wrap;
  }

  .illo-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
  .illo-rows .row { display: flex; align-items: center; gap: 9px; font-size: 11px; }
  .illo-rows .ico { width: 16px; height: 16px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; }
  .illo-rows .ico svg { width: 9px; height: 9px; }
  .illo-rows .eng { flex: 1; font-weight: 500; color: var(--text-primary); }
  .illo-rows .st { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: 0.05em; text-transform: uppercase; }
  .row.done .ico { background: var(--sage-100); color: var(--sage-700); }
  .row.done .st { color: var(--sage-700); }
  .row.active .ico { background: var(--ember-100); position: relative; }
  .row.active .ico::after { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--ember-500); animation: illoPulse 1.3s ease-in-out infinite; }
  @keyframes illoPulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(0.55); opacity: 0.55; } }
  .row.active .bar { width: 66px; height: 5px; border-radius: var(--radius-pill); background: var(--paper-200); overflow: hidden; }
  .row.active .bar i { display: block; width: 62%; height: 100%; background: var(--ember-500); border-radius: inherit; }
  .row.wait { color: var(--text-muted); }
  .row.wait .ico { background: var(--paper-200); }
  .row.wait .eng { color: var(--text-tertiary); font-weight: 400; }
  .row.wait .st { color: var(--text-muted); }

  .illo-btn-sm { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ember-700); border: 1px solid var(--ember-200); border-radius: 6px; padding: 3px 8px; }
  .illo-score { display: flex; align-items: baseline; gap: 9px; margin-bottom: 9px; }
  .illo-score .num { font-size: 32px; font-weight: 700; letter-spacing: -0.02em; color: var(--ember-600); line-height: 0.9; }
  .illo-score .lab { font-size: 9.5px; color: var(--text-tertiary); line-height: 1.3; }
  .illo-metrics { display: flex; flex-direction: column; gap: 8px; padding: 9px 0; border-top: 1px solid var(--paper-200); }
  .illo-metrics .m { display: flex; flex-direction: column; gap: 5px; }
  .illo-metrics .m-top { display: flex; align-items: baseline; justify-content: space-between; }
  .illo-metrics .ml { font-size: 10px; color: var(--text-secondary); }
  .illo-metrics .mv { font-family: var(--font-mono); font-size: 10px; font-weight: 600; color: var(--text-primary); }
  .illo-metrics .m-bar { height: 5px; border-radius: var(--radius-pill); background: var(--paper-200); overflow: hidden; }
  .illo-metrics .m-bar i { display: block; height: 100%; border-radius: inherit; }
  .illo-metrics .m-bar i.e { background: var(--ember-400); }
  .illo-metrics .m-bar i.s { background: var(--sage-500); }
  .illo-foot { display: flex; gap: 7px; margin-top: auto; }
  .illo-btn { flex: 1; text-align: center; font-size: 10px; font-weight: 600; padding: 8px; border-radius: 7px; }
  .illo-btn.ember { background: var(--ember-500); color: #fff; }
  .illo-btn.dark { background: var(--ink-900); color: #fff; }
  .step-illo-review .illo {
    justify-content: center;
    gap: 8px;
  }
  .step-illo-review .illo-head {
    margin-bottom: 0;
  }
  .step-illo-review .illo-pill {
    background: var(--sage-100);
    color: var(--sage-700);
  }
  .illo-review-board {
    flex: 1;
    min-height: 0;
    border: 1px solid var(--paper-200);
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(255,250,245,0.96) 100%);
    padding: 12px;
    position: relative;
    overflow: hidden;
  }
  .illo-review-stage {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 190px;
  }
  .illo-review-divider {
    position: absolute;
    left: 49%;
    top: 12%;
    bottom: 12%;
    width: 1px;
    background: var(--paper-250);
  }
  .illo-review-doc {
    position: absolute;
    left: 11%;
    top: 50%;
    width: 92px;
    height: 120px;
    border: 1px solid var(--paper-250);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 10px 24px rgba(42, 39, 35, 0.06);
    transform: translateY(-50%);
    animation: reviewDocMove 8.2s ease-in-out infinite;
  }
  .illo-review-doc::before {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    width: 18px;
    height: 18px;
    background: linear-gradient(135deg, rgba(255,255,255,0) 49.5%, var(--paper-150) 50%);
    border-top-right-radius: 7px;
  }
  .illo-review-doc-lines {
    position: absolute;
    left: 15px;
    right: 15px;
    top: 20px;
    display: flex;
    flex-direction: column;
    gap: 9px;
  }
  .illo-review-doc-lines i {
    display: block;
    height: 6px;
    border-radius: 999px;
    background: var(--paper-200);
  }
  .illo-review-doc-lines i:nth-child(1) { width: 56%; background: var(--ember-300); }
  .illo-review-doc-lines i:nth-child(2) { width: 82%; }
  .illo-review-doc-lines i:nth-child(3) { width: 68%; }
  .illo-review-doc-lines i:nth-child(4) { width: 74%; background: var(--ember-500); }
  .illo-review-files {
    position: absolute;
    left: 58%;
    top: 50%;
    width: 116px;
    height: 116px;
    transform: translateY(-50%);
  }
  .illo-review-file {
    position: absolute;
    width: 78px;
    height: 44px;
    border: 1px solid var(--paper-250);
    border-radius: 8px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    box-shadow: 0 10px 24px rgba(42, 39, 35, 0.06);
    opacity: 0;
    transform: translateY(10px) scale(0.94);
    animation: reviewFileIn 8.2s ease-in-out infinite;
  }
  .illo-review-file svg {
    width: 15px;
    height: 15px;
    color: var(--ember-500);
    flex-shrink: 0;
  }
  .illo-review-file span {
    font-family: var(--font-mono);
    font-size: 8px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-primary);
    font-weight: 600;
  }
  .illo-review-file.docx { top: 4px; left: 8px; animation-delay: 0s; }
  .illo-review-file.html { top: 38px; left: 26px; animation-delay: 0s; }
  .illo-review-file.md { top: 72px; left: 2px; animation-delay: 0s; }
  .illo-review-eye {
    position: absolute;
    width: 28px;
    height: 16px;
    border: 1px solid var(--paper-300);
    border-radius: 999px;
    background: rgba(255,255,255,0.96);
    opacity: 0;
    transform: scale(0.86);
    animation: reviewEyesIn 8.2s ease-in-out infinite;
  }
  .illo-review-eye::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--ink-900);
    transform: translate(-50%, -50%);
  }
  .illo-review-eye.e1 { left: 53%; top: 14%; }
  .illo-review-eye.e2 { right: 10%; top: 28%; }
  .illo-review-eye.e3 { right: 7%; bottom: 24%; }
  .illo-review-eye.e4 { left: 56%; bottom: 12%; }
  .illo-review-eye.e5 { right: 28%; top: 10%; }
  @keyframes reviewDocMove {
    0%, 8% { opacity: 0; transform: translateY(-50%) translateX(-16px); }
    15%, 38% { opacity: 1; transform: translateY(-50%) translateX(0); }
    50%, 72% { opacity: 0.08; transform: translateY(-50%) translateX(104px); }
    84%, 100% { opacity: 0; transform: translateY(-50%) translateX(120px); }
  }
  @keyframes reviewFileIn {
    0%, 34% { opacity: 0; transform: translateY(10px) scale(0.94); }
    44%, 72% { opacity: 1; transform: translateY(0) scale(1); }
    84%, 100% { opacity: 0; transform: translateY(-10px) scale(0.94); }
  }
  @keyframes reviewEyesIn {
    0%, 58% { opacity: 0; transform: scale(0.86); }
    64%, 82% { opacity: 1; transform: scale(1); }
    90%, 100% { opacity: 0; transform: scale(0.86); }
  }
  @media (max-width: 640px) {
    .steps { gap: var(--space-12); }
    .step { grid-template-columns: 1fr; gap: var(--space-4); }
    .step:nth-child(even) .step-body,
    .step:nth-child(even) .step-illo { order: 0; }
    .step:not(:last-child) .step-node::after { display: none; }
  }

  /* ---------- MODALS ---------- */
  .modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 90;
    background: rgba(21, 19, 15, 0.56);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-5);
    backdrop-filter: blur(8px);
  }
  .modal-overlay[hidden] { display: none; }
  .modal-dialog {
    width: min(100%, 560px);
    background: var(--surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
  }
  .modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5) var(--space-3);
    border-bottom: 1px solid var(--border-subtle);
  }
  .modal-header-stack { display: flex; flex-direction: column; gap: var(--space-2); }
  .modal-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    letter-spacing: var(--tracking-mono);
    text-transform: uppercase;
    color: var(--text-tertiary);
  }
  .modal-eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); display: inline-block; }
  .modal-header h3 { margin: 0; font-size: var(--fs-h5); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); font-weight: 500; }
  .modal-close {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--border-default);
    background: var(--surface);
    color: var(--text-secondary);
    display: grid;
    place-items: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: border-color var(--dur-base) var(--ease-standard), color var(--dur-base) var(--ease-standard), background var(--dur-base) var(--ease-standard);
  }
  .modal-close:hover { border-color: var(--border-strong); color: var(--text-primary); background: var(--paper-100); }
  .modal-close svg { width: 14px; height: 14px; }
  .modal-body { padding: var(--space-4) var(--space-5); display: flex; flex-direction: column; gap: var(--space-4); }
  .modal-lede { margin: 0; color: var(--text-secondary); font-size: var(--fs-body-sm); line-height: var(--lh-relaxed); }
  .modal-divider { height: 1px; background: var(--border-subtle); }
  .contact-list, .support-meta { display: flex; flex-direction: column; gap: var(--space-2); }
  .contact-row, .row-line {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
  }
  .contact-lbl, .lbl {
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    letter-spacing: var(--tracking-mono);
    text-transform: uppercase;
    color: var(--text-tertiary);
    flex-shrink: 0;
    padding-top: 4px;
  }
  .contact-val, .val, .contact-val a, .val a { color: var(--text-primary); font-size: var(--fs-body); text-decoration: none; }
  .contact-val a:hover, .val a:hover { color: var(--accent); }
  .support-form { display: flex; flex-direction: column; gap: var(--space-4); }
  .form-field { display: flex; flex-direction: column; gap: var(--space-2); }
  .form-field label {
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    letter-spacing: var(--tracking-mono);
    text-transform: uppercase;
    color: var(--text-tertiary);
  }
  .form-field input,
  .form-field textarea {
    width: 100%;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    background: var(--surface);
    color: var(--text-primary);
    font: inherit;
    padding: 14px 16px;
    outline: none;
  }
  .form-field textarea { resize: vertical; min-height: 124px; }
  .form-field input:focus,
  .form-field textarea:focus { border-color: var(--accent); }
  .subject-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
  .subject-chip {
    border: 1px solid var(--border-default);
    border-radius: var(--radius-pill);
    background: var(--surface);
    color: var(--text-secondary);
    padding: 8px 12px;
    font-size: var(--fs-body-sm);
    cursor: pointer;
    transition: border-color var(--dur-base) var(--ease-standard), background var(--dur-base) var(--ease-standard), color var(--dur-base) var(--ease-standard);
  }
  .subject-chip:hover { border-color: var(--border-strong); color: var(--text-primary); }
  .subject-chip.is-active { background: var(--ember-50); border-color: var(--ember-200); color: var(--ember-700); }
  .btn-block { width: 100%; justify-content: center; }
  .support-meta-divider { display: none; }
  .modal-success {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-3);
    padding: var(--space-6) 0;
  }
  .checkmark {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--ember-50);
    color: var(--accent);
    display: grid;
    place-items: center;
  }
  .checkmark svg { width: 24px; height: 24px; }
  .modal-success h4 { margin: 0; font-size: var(--fs-h5); }
  .modal-success p { margin: 0; color: var(--text-secondary); max-width: 42ch; }
  @media (max-width: 640px) {
    .modal-header, .modal-body { padding-inline: var(--space-4); }
    .contact-row, .row-line { flex-direction: column; gap: var(--space-1); }
  }

  /* ---------- PRICING ---------- */
  .tiers { display: flex; flex-direction: column; gap: var(--space-2); }
  .tier-subgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); align-items: stretch; }
  .tier-subgrid > .tier { height: 100%; }
  .tier {
    display: flex; flex-direction: column;
    background: var(--surface); border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md); padding: var(--space-5);
  }
  .tier.starter { border-color: var(--ember-200); }
  .tier.starter-wide { padding: 16px; }
  .tier-starter-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.68fr) minmax(0, 1.32fr);
    gap: var(--space-5);
    align-items: stretch;
    flex: 1;
  }
  .tier-starter-main {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }
  .tier-starter-copy {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 180px;
    gap: var(--space-4);
    align-items: end;
  }
  .tier-starter-cta {
    display: flex;
    align-items: flex-end;
  }

  /* ------------- Starter Wide -------------- */
  /* wide one-time Starter card, sits above the subscription grid */
  .tier.tier-wide {
    display: grid; grid-template-columns: minmax(0, 260px) 1fr;
    gap: var(--space-6); align-items: center;
    background: var(--surface); border: 1px solid var(--ember-200);
    border-radius: var(--radius-lg); padding: var(--space-5) var(--space-6);
    margin-bottom: var(--space-3); flex-direction: initial;
  }
  .tier-wide-main { display: flex; flex-direction: column; gap: var(--space-3); }
  .tier-wide-row { display: grid; grid-template-columns: auto 1fr; gap: var(--space-4); }
  .tier-wide-row .tier-price { line-height: 1; }
  .tier-wide-desc { display: flex; flex-direction: column; gap: 2px; }
  .tier-wide-desc .tier-cap { margin: 0; font-size: var(--fs-body-sm); }
  .tier-wide-desc .tier-best { margin: 0; min-height: 0; font-size: var(--fs-caption); line-height: var(--lh-normal); }
  .tier-wide-main .btn { width: 100%; font-size: var(--fs-body-sm); }
  .tier-wide-feats {
    list-style: none; margin: 0; padding: 0 0 0 var(--space-8);
    border-left: 1px solid var(--border-subtle);
    display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3) var(--space-6);
    align-self: stretch; align-content: center;
  }
  @media (max-width: 720px) {
    .tier.tier-wide { grid-template-columns: 1fr; gap: var(--space-5); padding: var(--space-5); }
    .tier-wide-feats { padding: var(--space-5) 0 0; border-left: 0; border-top: 1px solid var(--border-subtle); }
  }
  @media (max-width: 480px) { .tier-wide-feats { grid-template-columns: 1fr; } }

  .tier.dark { background: var(--ink-900); color: var(--paper-50); border-color: transparent; }
  .tier-top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); min-height: 20px; margin-bottom: var(--space-4); }
  .tier-name { font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: var(--tracking-mono); text-transform: uppercase; color: var(--text-tertiary); }
  .tier.dark .tier-name { color: var(--ink-300); }
  .tier-flag { font-family: var(--font-mono); font-size: 9px; letter-spacing: var(--tracking-mono); text-transform: uppercase; font-weight: 600; background: var(--accent); color: #fff; padding: 4px var(--space-2); border-radius: var(--radius-pill); white-space: nowrap; }
  .tier-price { font-size: 30px; font-weight: 600; letter-spacing: var(--tracking-tight); line-height: 1; }
  .tier-price span { font-size: var(--fs-body); font-weight: 400; color: var(--text-tertiary); letter-spacing: 0; }
  .tier.dark .tier-price span { color: var(--ink-300); }
  .tier-cap { font-size: var(--fs-body-sm); color: var(--text-secondary); margin-top: var(--space-3); }
  .tier.dark .tier-cap { color: var(--ink-200); }
  .tier-best { font-size: var(--fs-body-sm); color: var(--text-tertiary); line-height: var(--lh-normal); margin: var(--space-4) 0 var(--space-5); min-height: 54px; }
  .tier.starter .tier-best { min-height: 0; margin-bottom: 0; }
  .tier.dark .tier-best { color: var(--ink-300); }
  .tier .btn { width: 100%; font-size: var(--fs-body-sm); }
  .tier-feats { list-style: none; margin: var(--space-5) 0 0; padding: var(--space-5) 0 0; border-top: 1px solid var(--border-subtle); display: flex; flex-direction: column; gap: var(--space-3); }
  .tier-feats.tier-feats-starter {
    margin: 0;
    padding: 0 0 0 var(--space-5);
    border-top: 0;
    border-left: 1px solid var(--border-subtle);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-4);
    row-gap: var(--space-3);
    align-content: start;
    align-self: stretch;
    height: 100%;
    box-sizing: border-box;
  }
  .tier.dark .tier-feats { border-color: var(--ink-700); }
  .feat { display: flex; gap: var(--space-2); align-items: flex-start; font-size: var(--fs-body-sm); color: var(--text-secondary); line-height: var(--lh-normal); }
  .tier.dark .feat { color: var(--ink-200); }
  .feat .ck { color: var(--accent); flex-shrink: 0; margin-top: 1px; width: 15px; height: 15px; }
  .feat-strong { color: var(--text-primary); font-weight: 600; font-size: var(--fs-body-sm); padding-bottom: var(--space-3); margin-bottom: var(--space-1); align-self: center;}
  .tier.dark .feat-strong { color: #fff; border-color: var(--ink-700); }
  @media (max-width: 960px) {
    .tier-starter-grid { grid-template-columns: 1fr; gap: var(--space-5); }
    .tier-starter-copy { grid-template-columns: 1fr; }
    .tier-feats.tier-feats-starter {
      padding: var(--space-5) 0 0;
      border-left: 0;
      border-top: 1px solid var(--border-subtle);
    }
  }
  @media (max-width: 720px) {
    .tier-subgrid { grid-template-columns: 1fr; }
    .tier-best { min-height: 0; }
    .tier-feats.tier-feats-starter { grid-template-columns: 1fr; }
  }

  /* ---------- DEMO (dark proof band) ---------- */
  .demo-band {
    background: var(--ink-900); color: var(--paper-50);
    border-radius: var(--radius-2xl); padding: var(--space-16) var(--space-12);
    position: relative; overflow: hidden;
  }
  .demo-band::after {
    content: ""; position: absolute; right: -80px; top: -80px; width: 280px; height: 280px;
    background: radial-gradient(circle, color-mix(in oklab, var(--accent) 22%, transparent), transparent 70%);
    pointer-events: none;
  }
  .demo-inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-10); align-items: center; }
  .demo-band .kicker { color: var(--ink-300); }
  .demo-band h2 { font-size: var(--fs-h2); line-height: var(--lh-snug); letter-spacing: var(--tracking-snug); font-weight: 500; margin: 0; }
  .demo-band p { color: var(--ink-300); font-size: var(--fs-body-sm); line-height: var(--lh-relaxed); margin: 0; }
  .demo-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); margin-top: 0; }
  .demo-note { display: flex; align-items: center; gap: var(--space-2); color: var(--ink-300); font-size: var(--fs-body-sm); }
  .demo-cycle { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: var(--tracking-mono); text-transform: uppercase; color: var(--ink-300); border: 1px solid var(--ink-700); border-radius: var(--radius-pill); padding: var(--space-1) var(--space-3); margin-top: 0; align-self: flex-start; }
  .demo-cycle .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--sage-300); }
  @media (max-width: 640px) { .demo-inner { grid-template-columns: 1fr; gap: var(--space-6); } }

  /* ---------- FAQ ---------- */
  .faq { border-top: 1px solid var(--border-subtle); }
  .faq-item { border-bottom: 1px solid var(--border-subtle); }
  .faq-q {
    width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
    padding: var(--space-5) 0; background: transparent; border: 0; cursor: pointer;
    text-align: left; font-family: inherit; font-size: var(--fs-body-lg); font-weight: 500; color: var(--text-primary);
  }
  .faq-q .chev { flex-shrink: 0; color: var(--text-tertiary); transition: transform var(--dur-base) var(--ease-emphasized); }
  .faq-item[data-open="true"] .chev { transform: rotate(45deg); color: var(--accent); }
  .faq-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-base) var(--ease-emphasized); }
  .faq-item[data-open="true"] .faq-panel { grid-template-rows: 1fr; }
  .faq-panel > div { overflow: hidden; }
  .faq-a { padding-bottom: var(--space-5); color: var(--text-secondary); font-size: var(--fs-body); line-height: var(--lh-relaxed); }
  .faq-a p { margin: 0 0 var(--space-3); }
  .faq-a p:last-child { margin-bottom: 0; }

  /* ---------- FOOTER ---------- */
  .site-foot { border-top: 1px solid var(--border-subtle); background: var(--paper-50); }
  .site-foot .wrap { padding-top: var(--space-12); padding-bottom: var(--space-12); display: flex; flex-direction: column; gap: var(--space-8); }
  .foot-top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-8); flex-wrap: wrap; }
  .foot-brand { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-8); max-width: 36ch; }
  .foot-brand img { height: 34px; width: auto; }
  .foot-brand p { margin: 0; color: var(--text-tertiary); font-size: var(--fs-body); line-height: var(--lh-normal); }
  .foot-links { display: flex; gap: var(--space-20); }
  .foot-col { display: flex; flex-direction: column; gap: var(--space-3); }
  .foot-col .ttl { font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: var(--tracking-mono); text-transform: uppercase; color: var(--text-tertiary); }
  .foot-col a { text-decoration: none; color: var(--text-secondary); font-size: var(--fs-body-sm); }
  .foot-col a:hover { color: var(--text-primary); }
  .foot-bottom { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding-top: var(--space-6); border-top: 1px solid var(--border-subtle); flex-wrap: wrap; }
  .foot-bottom .meta { font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: var(--tracking-mono); text-transform: uppercase; color: var(--text-muted); }

/* ===== 4. LEGAL PAGE STYLES (privacy + terms) ===== */
html { scroll-behavior: smooth; }
  body.page-legal .wrap { width: min(1120px, calc(100% - 48px)); margin: 0 auto; }
  body.page-legal .btn { white-space: nowrap; text-decoration: none; }
  .site-nav {
    position: sticky;
    top: 0;
    z-index: var(--z-overlay);
    background: color-mix(in srgb, var(--bg) 86%, transparent);
    backdrop-filter: blur(10px) saturate(140%);
    border-bottom: 1px solid var(--border-subtle);
  }
  body.page-legal .site-nav .wrap {
    min-height: var(--header-h);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
  }
  body.page-legal .brand-logo { height: 28px; width: auto; display: block; }
  body.page-legal .nav-center {
    display: flex;
    align-items: center;
    gap: var(--space-6);
  }
  body.page-legal .nav-center a {
    text-decoration: none;
    color: var(--text-secondary);
    font-size: var(--fs-body-sm);
    font-weight: 500;
  }
  body.page-legal .nav-center a:hover { color: var(--text-primary); }
  body.page-legal .nav-right { display: flex; gap: var(--space-2); align-items: center; }
  .legal-hero {
    padding: var(--space-16) 0 var(--space-10);
    border-bottom: 1px solid var(--border-subtle);
  }
  .legal-kicker {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    letter-spacing: var(--tracking-mono);
    text-transform: uppercase;
    color: var(--text-tertiary);
    font-weight: 500;
  }
  .legal-kicker .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
  .legal-title {
    margin: var(--space-5) 0 0;
    max-width: 18ch;
    font-size: clamp(34px, 5vw, var(--fs-h1));
    line-height: var(--lh-tight);
    letter-spacing: var(--tracking-tight);
    font-weight: 500;
    text-wrap: balance;
  }
  .legal-lead {
    margin: var(--space-5) 0 0;
    max-width: 64ch;
    color: var(--text-secondary);
    font-size: var(--fs-body-lg);
    line-height: var(--lh-relaxed);
  }
  .legal-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-3);
    margin-top: var(--space-8);
  }
  .legal-meta .chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-pill);
    background: var(--surface);
    padding: var(--space-1) var(--space-3);
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    letter-spacing: var(--tracking-mono);
    text-transform: uppercase;
    color: var(--text-secondary);
  }
  .legal-meta .chip b { color: var(--text-primary); font-weight: 600; }
  .legal-layout {
    display: grid;
    grid-template-columns: 232px minmax(0, 1fr);
    gap: var(--space-16);
    align-items: start;
    padding: var(--space-16) 0 var(--space-20);
  }
  .legal-toc {
    position: sticky;
    top: calc(var(--header-h) + var(--space-8));
  }
  .legal-toc .toc-label {
    margin-bottom: var(--space-2);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--border-subtle);
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    letter-spacing: var(--tracking-mono);
    text-transform: uppercase;
    color: var(--text-tertiary);
  }
  .legal-toc ol {
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: toc;
  }
  .legal-toc li { counter-increment: toc; }
  .legal-toc a {
    display: flex;
    gap: var(--space-3);
    align-items: baseline;
    margin-left: -2px;
    padding: 7px 0 7px var(--space-3);
    border-left: 2px solid transparent;
    text-decoration: none;
    color: var(--text-tertiary);
    font-size: var(--fs-body-sm);
    line-height: var(--lh-snug);
  }
  .legal-toc a::before {
    content: counter(toc, decimal-leading-zero);
    flex-shrink: 0;
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    color: var(--ember-500);
  }
  .legal-toc a:hover { color: var(--text-primary); }
  .legal-toc a.is-active {
    border-left-color: var(--accent);
    color: var(--text-primary);
    font-weight: 500;
  }
  .legal-toc a.is-active::before { color: var(--accent); }
  .legal-prose { max-width: 70ch; }
  .legal-section {
    padding-top: var(--space-4);
    scroll-margin-top: calc(var(--header-h) + var(--space-6));
  }
  .legal-section + .legal-section {
    margin-top: var(--space-12);
    padding-top: var(--space-12);
    border-top: 1px solid var(--border-subtle);
  }
  .legal-section h2 {
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
    margin: 0 0 var(--space-5);
    font-size: var(--fs-h3);
    line-height: var(--lh-snug);
    letter-spacing: var(--tracking-snug);
    font-weight: 500;
  }
  .legal-section h2 .sec-no {
    flex-shrink: 0;
    font-family: var(--font-mono);
    font-size: var(--fs-body-sm);
    color: var(--accent);
    font-weight: 600;
  }
  .legal-section h3 {
    margin: var(--space-8) 0 var(--space-3);
    font-size: var(--fs-h5);
    font-weight: 600;
    letter-spacing: var(--tracking-snug);
  }
  .legal-prose p {
    margin: 0 0 var(--space-4);
    color: var(--text-secondary);
    font-size: var(--fs-body);
    line-height: var(--lh-relaxed);
    text-wrap: pretty;
  }
  .legal-prose strong { color: var(--text-primary); font-weight: 600; }
  .legal-prose ul {
    list-style: none;
    margin: 0 0 var(--space-4);
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }
  .legal-prose li {
    position: relative;
    padding-left: var(--space-6);
    color: var(--text-secondary);
    font-size: var(--fs-body);
    line-height: var(--lh-relaxed);
  }
  .legal-prose li::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 0.62em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
  }
  .legal-contact {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-top: var(--space-4);
    padding: var(--space-6);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: var(--surface);
  }
  .legal-contact .row {
    display: flex;
    gap: var(--space-3);
    align-items: baseline;
  }
  .legal-contact .k {
    width: 88px;
    flex-shrink: 0;
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    letter-spacing: var(--tracking-mono);
    text-transform: uppercase;
    color: var(--text-tertiary);
  }
  .legal-contact .v {
    color: var(--text-primary);
    font-size: var(--fs-body-sm);
    line-height: var(--lh-relaxed);
  }
  body.page-legal .site-foot {
    border-top: 1px solid var(--border-subtle);
    background: rgb(21, 19, 15);
  }
  body.page-legal .site-foot .wrap {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    padding-top: var(--space-12);
    padding-bottom: var(--space-12);
  }
  body.page-legal .foot-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-8);
    flex-wrap: wrap;
  }
  body.page-legal .foot-brand {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
    max-width: 36ch;
  }
  body.page-legal .foot-brand img { height: 34px; width: auto; }
  body.page-legal .foot-brand p {
    margin: 0;
    color: var(--ink-300);
    font-size: var(--fs-body-sm);
    line-height: var(--lh-normal);
  }
  body.page-legal .foot-links { display: flex; gap: var(--space-10); flex-wrap: wrap; }
  body.page-legal .foot-col { display: flex; flex-direction: column; gap: var(--space-3); }
  body.page-legal .foot-col .ttl {
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    letter-spacing: var(--tracking-mono);
    text-transform: uppercase;
    color: var(--ink-300);
  }
  body.page-legal .foot-col a {
    text-decoration: none;
    color: var(--paper-50);
    font-size: var(--fs-body-sm);
  }
  body.page-legal .foot-col a:hover { color: var(--accent); }
  body.page-legal .foot-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
    padding-top: var(--space-6);
    border-top: 1px solid var(--ink-700);
  }
  body.page-legal .foot-bottom .meta {
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    letter-spacing: var(--tracking-mono);
    text-transform: uppercase;
    color: var(--ink-400);
  }
  @media (max-width: 860px) {
    body.page-legal .nav-center { display: none; }
    .legal-layout {
      grid-template-columns: 1fr;
      gap: var(--space-8);
      padding-top: var(--space-10);
    }
    .legal-toc {
      position: static;
      border: 1px solid var(--border-subtle);
      border-radius: var(--radius-md);
      background: var(--surface);
      padding: var(--space-5);
    }
    .legal-prose { max-width: none; }
  }

/* ===== 5. RESPONSIVE OVERRIDES (added) ===== */

/* -- 5a. Inline-style replacements (so HTML stays clean) -- */

/* Hero eyebrow row gets fixed height to keep vertical rhythm */
.hero-eyebrow-row { min-height: 25px; }

/* Hero sub: explicit body size on landing */
.hero-sub { font-size: var(--fs-body); line-height: var(--lh-relaxed); }

/* Hero action buttons share size */
.hero-actions .btn { min-width: 150px; height: 45px; font-size: 14px; }

/* Section-title smaller variant */
.sec-title.is-compact { font-size: var(--fs-h3); }

/* Engines coverage row */
.engines .engine .en-main img { width: 28px; height: 28px; }
.engines .engine .en-main span { font-size: 13px; }
.engines .leg { height: 25px; padding: 0 10px 0 12px; font-size: 13px; }
.engines .leg i { width: 7px; height: 7px; }

/* Output cards */
.output-glyph { background: var(--accent-soft); }

/* Section leads use body size */
.sec-lead { font-size: var(--fs-body); }

/* Tier inline-style replacements */
.tier.starter.tier-wide { border-color: var(--paper-300); }
.tier-wide-main { gap: 17px; }
.tier-wide-main .tier-top { margin: 0 0 1px; }
.tier-wide-main .tier-flag-soft { background: var(--paper-200); color: var(--text-secondary); }
.tier-wide-desc { gap: 10px; }
.tier-subgrid > .tier { padding: var(--space-5); }
.demo-actions .btn { font-size: var(--fs-body-sm); }
.demo-cycle.on-dark { border-color: var(--ink-700); }

/* Footer is dark across all pages — bake into base, override .foot text colors */
.site-foot { background: var(--ink-900); border-top-color: var(--ink-800); position: relative; overflow: hidden; }
.foot-blob-field {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 120%;
  height: 200%;
  transform: translate(-50%, -50%);
  z-index: 0;
  pointer-events: none;
}
.site-foot .wrap { position: relative; z-index: 1; }
.site-foot .foot-brand p { color: var(--ink-300); }
.site-foot .foot-col .ttl { color: var(--ink-300); }
.site-foot .foot-col a { color: var(--paper-50); }
.site-foot .foot-col a:hover { color: var(--accent); }
.site-foot .foot-bottom { border-top-color: var(--ink-700); }
.site-foot .foot-bottom .meta { color: var(--ink-400); }

/* Demo band-on-dark refinements */
.demo-band .demo-cycle { border-color: var(--ink-700); }

/* -- 5b. Responsive overhaul -- */
:root { --container: 950px; }
.wrap { max-width: var(--container); width: 100%; margin: 0 auto; padding-left: var(--space-6); padding-right: var(--space-6); box-sizing: border-box; }
body.page-legal .wrap { max-width: 950px; }

/* Make the index hero, sections, etc. truly responsive */

/* Fluid hero headline */
.hero-headline { font-size: clamp(34px, 6vw + 6px, 47px); line-height: 1.125; }
.sec-title { font-size: clamp(28px, 3.4vw + 6px, var(--fs-h2)); }
.sec-title.is-compact { font-size: clamp(24px, 2.4vw + 6px, var(--fs-h3)); }

/* Larger tablet+ breakpoint — relax constraints */
@media (min-width: 1024px) {
  .section { padding: var(--space-16) 0; }
}

/* Tablet (≤ 820) */
@media (max-width: 820px) {
  /* Hero: single column, centered, report stack shown below */
  .hero-copy-row { grid-template-columns: 1fr; row-gap: 0; align-items: center; }
  .hero-copy-panel { align-items: center; text-align: center; width:85%; place-self: center;}
  .hero-headline { max-width: none; }
  .hero-sub { text-align: center; }
  .hero-note { display: none !important; }
  .hero-actions { justify-content: center; }
  .hero-copy-docs {
    display: flex !important;
    justify-content: center;
    align-items: flex-start;
    min-height: 0;
    margin-top: var(--space-10);
  }
  .hero-copy-docs > .report-stack {
    width: 100%;
    max-width: 560px;   /* constrains stage width to match scaled-down card */
    padding: 0;
    height: auto;
  }
  .report-stage {
    flex: 0 0 auto;     /* don't flex-grow into empty space */
    width: 100%;
    min-height: 0;
    aspect-ratio: 3 / 4; /* tracks card ratio so height syncs with width */
  }
  /* Blob grid stays at its desktop apparent size — only the document stack scales up */
  .hero-blob-field {
    width: 815px;
    height: 912px;
  }
  .report-card {
    max-width: 500px;   /* scaled down from 680px */
  }
  .report-stack{
    gap: var(--space-2);
  }
  .hero-block { padding-top: var(--space-12); padding-bottom: var(--space-10); }

  .feat-strong { align-self: flex-start; }

  /* Workflow: keep zigzag until 576 */
  .step { grid-template-columns: 1fr 1fr; }
  .steps { gap: var(--space-12); }

  /* Outputs: keep 2-col until 576 */
  .outputs-grid { grid-template-columns: 1fr 1fr; }

  /* Pricing */
  .tier-subgrid { grid-template-columns: 1fr; }
  .tier-wide { grid-template-columns: 1fr; }
  .tier-wide .tier-wide-aside { border-left: 0; border-top: 1px solid var(--border-subtle); padding-top: var(--space-6); margin-top: var(--space-4); }
  .demo-band .demo-band-grid { grid-template-columns: 1fr; }

  /* Coverage: keep 7-col but scale down icons/labels to stay in one row */
  .engine-row { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--space-2); }
  .engine { gap: var(--space-1); }
  .en-main img { width: 20px; height: 20px; }
  .en-main span { font-size: 10px; }
  .engine .tdot { width: 6px; height: 6px; }
}

/* Phone (≤ 720) */
@media (max-width: 720px) {
  .site-nav .wrap { padding-left: var(--space-4); padding-right: var(--space-4); }
  .nav-center { display: none; }
  .section { padding: var(--space-16) 0; }
  .hero-block { padding-top: var(--space-10); padding-bottom: var(--space-8); }
  .hero-actions { width: 100%; }
  .hero-actions .btn { flex: 1 1 calc(50% - var(--space-2)); min-width: 0; }
  /* Coverage: switch to card layout at 720 (previously at 640) */
  .engine-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
  .engine {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-3);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    background: transparent;
  }
  .engine.type-api { border-color: color-mix(in oklab, var(--ink-900) 50%, transparent); }
  .engine.type-web { border-color: color-mix(in oklab, var(--accent) 50%, transparent); }
  .engine .tdot { display: none; }
  .en-main { flex-direction: row; align-items: center; gap: var(--space-2); }
  .en-main img { width: 20px; height: 20px; }
  .en-main span { font-size: 12px; }
  .engine:last-child { grid-column: 1 / -1; justify-self: center; width: calc(50% - var(--space-3) / 2); }
  .foot-top { flex-direction: column; gap: var(--space-8); }
  .foot-links { gap: var(--space-8); width: 100%; }
  .foot-col { flex: 1 1 auto; }
  /* Document stack: add side padding so the stack doesn't fill the full width */
  .hero-copy-docs { padding-left: var(--space-8); padding-right: var(--space-8); }
}

/* Narrow (≤ 576) — Audit Outputs + Workflow collapse */
@media (max-width: 576px) {
  .outputs-grid { grid-template-columns: 1fr; gap: var(--space-3); }
  .output-card { align-items: center; text-align: center; }
  .output-top { justify-content: center; }
  .step { grid-template-columns: 1fr; gap: var(--space-4); }
  .step:nth-child(even) .step-body,
  .step:nth-child(even) .step-illo { order: 0; }
  .step-illo { aspect-ratio: 16 / 9; }
  .steps { gap: var(--space-10); }
}

/* Small phone (≤ 480) */
@media (max-width: 480px) {
  .wrap { padding-left: var(--space-4); padding-right: var(--space-4); }
  .hero-headline { font-size: clamp(30px, 9vw, 42px); line-height: clamp(31px, calc(9vw * 1.04), 44px); }
  .hero-eyebrow-row { font-size: 10px; }
  .nav-right .btn-secondary { display: none; }
  .foot-bottom { flex-direction: column; align-items: flex-start; gap: var(--space-3); }
}

/* -- 5c. Subscription tier "wide-card" layout at tablet --
   At ≤820px Growth/Agency/Scale emulate the Starter wide-card:
   left col = name / price / cap / description / CTA  (5 explicit rows)
   right col = feature list (2-col grid, left-border divider)
   Key: explicit grid-template-rows + align-items:start prevent the
   feature list from stretching tier-top to fill row 1.               */
@media (max-width: 820px) {
  .tier-subgrid > .tier {
    display: grid;
    grid-template-columns: minmax(0, 260px) 1fr;
    grid-template-rows: repeat(5, auto); /* one explicit row per left-col item */
    column-gap: var(--space-6);
    align-items: start;                  /* items anchor to top of their row */
    padding: var(--space-5) var(--space-6);
  }
  /* Pin all non-feats items to the left column */
  .tier-subgrid > .tier .tier-top,
  .tier-subgrid > .tier .tier-price,
  .tier-subgrid > .tier .tier-cap,
  .tier-subgrid > .tier .tier-best,
  .tier-subgrid > .tier > .btn {
    grid-column: 1;
  }
  /* Tighten left-column vertical rhythm */
  .tier-subgrid > .tier .tier-top  { margin-bottom: var(--space-2); }
  .tier-subgrid > .tier .tier-cap  { margin-top: var(--space-2); }
  .tier-subgrid > .tier .tier-best { margin: var(--space-3) 0 var(--space-3); min-height: 0; }
  /* Feature list: right column spanning all 5 explicit rows */
  .tier-subgrid > .tier .tier-feats {
    grid-column: 2;
    grid-row: 1 / -1;    /* -1 = line 6 now that 5 explicit rows exist */
    align-self: stretch;
    margin: 0;
    padding: 0 0 0 var(--space-6);
    border-top: 0;
    border-left: 1px solid var(--border-subtle);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3) var(--space-5);
    align-content: center;
  }
  .tier-subgrid > .tier.dark .tier-feats { border-left-color: var(--ink-700); }
  /* feat-strong ("Additional credits") spans full width, acts as section header */
  .tier-subgrid > .tier .tier-feats .feat-strong {
    grid-column: 1 / -1;
    padding-bottom: var(--space-3);
    margin-bottom: var(--space-1);
    border-bottom: 1px solid var(--border-subtle);
  }
  .tier-subgrid > .tier.dark .tier-feats .feat-strong { border-bottom-color: var(--ink-700); }
}

/* Collapse back to vertical at phone (≤720px), matching the Starter card's own collapse */
@media (max-width: 720px) {
  .tier-subgrid > .tier {
    display: flex;
    flex-direction: column;
    padding: var(--space-5);
  }
  .tier-subgrid > .tier .tier-best { margin: var(--space-4) 0 var(--space-5); }
  .tier-subgrid > .tier .tier-feats {
    display: flex;
    flex-direction: column;
    margin-top: var(--space-5);
    padding: var(--space-5) 0 0;
    border-left: 0;
    border-top: 1px solid var(--border-subtle);
  }
  .tier-subgrid > .tier.dark .tier-feats { border-top-color: var(--ink-700); }
  .tier-subgrid > .tier .tier-feats .feat-strong {
    border-bottom: 0;
    padding-bottom: var(--space-3);
    margin-bottom: var(--space-1);
  }
}

/* Prevent horizontal scroll on any breakpoint */
html { overflow-x: hidden; }
img, svg, video { max-width: 100%; height: auto; }