@layer page {
  /* T7: spacing, type, transition and layout tokens live in tokens.css. */

    /* Default: light mode */
    


    /* Manual override: light mode */
    

    /* Manual override: dark mode */
    

    /* ==========================================
       RESET & BASE
       ========================================== */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    html {
      scroll-behavior: smooth;
      scroll-padding-top: calc(var(--nav-height) + 1rem);
      -webkit-text-size-adjust: 100%;
    }

    body {
      font-family: var(--font-body);
      font-size: var(--text-body);
      line-height: 1.6;
      color: var(--text);
      background: var(--bg);
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      overflow-x: hidden;
    }

    img { max-width: 100%; height: auto; display: block; }
    a { color: var(--accent-link); text-decoration: none; transition: color var(--transition-fast); }
    a:hover { color: var(--accent-hover); }

    /* Focus rings */
    :focus-visible {
      outline: 2px solid var(--accent);
      outline-offset: 2px;
      border-radius: 2px;
    }

    /* Skip to content */
    .skip-link {
      position: absolute;
      top: -100%;
      left: var(--space-4);
      background: var(--accent);
      color: var(--bg);
      padding: var(--space-2) var(--space-4);
      border-radius: 4px;
      font-weight: 500;
      z-index: 1000;
      font-size: 14px;
    }
    .skip-link:focus {
      top: var(--space-2);
      color: var(--bg);
    }

    .hidden { display: none !important; }

    /* ==========================================
       CONTAINER & SECTIONS
       ========================================== */
    .container {
      max-width: var(--max-width);
      margin: 0 auto;
      padding: 0 var(--space-6);
    }

    /* Rebased to match the homepage. The original clamp paid up to 128px top
       AND bottom, so two adjacent sections put 256px between a closing line and
       the next label — a gap that reads as a missing section. */
    section {
      padding-block: clamp(var(--space-10), 4.5vw, var(--space-16));
    }

    /* ==========================================
       TYPOGRAPHY
       ========================================== */
    h1, h2, h3 {
      font-family: var(--font-display);
      line-height: 1.15;
      letter-spacing: -0.02em;
    }

    h1 {
      font-size: clamp(2.5rem, 5vw, 4rem);
      font-weight: 500;
    }

    h2 {
      font-size: clamp(1.75rem, 3.5vw, 2.5rem);
      font-weight: 500;
      margin-bottom: var(--space-6);
    }

    h3 {
      font-size: clamp(1.25rem, 2vw, 1.5rem);
      font-weight: 500;
      margin-bottom: var(--space-3);
    }

    .prose {
      max-width: var(--measure);
      font-size: var(--text-body);
      line-height: 1.7;
      color: var(--text);   /* T8 */
    }

    .prose p + p { margin-top: var(--space-4); }

    /* ==========================================
       NAVIGATION
       ========================================== */
    .nav {
      position: sticky;
      top: 0;
      z-index: 100;
      background: transparent;
      transition: background var(--transition-normal), box-shadow var(--transition-normal);
      height: var(--nav-height);
    }

    .nav.scrolled {
      background: color-mix(in srgb, var(--bg) 85%, transparent);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      box-shadow: 0 1px 0 var(--border);
    }

    .nav-inner {
      max-width: var(--max-width);
      margin: 0 auto;
      padding: 0 var(--space-6);
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .nav-brand {
      display: flex;
      align-items: center;
      gap: var(--space-3);
      color: var(--text);
      font-family: var(--font-display);
      font-size: 18px;
      font-weight: 500;
      letter-spacing: -0.01em;
    }
    .nav-brand:hover { color: var(--text); }

    .nav-brand svg {
      width: 28px;
      height: 28px;
      flex-shrink: 0;
    }

    .nav-links {
      display: flex;
      align-items: center;
      gap: var(--space-6);
      list-style: none;
    }

    .nav-links a {
      font-size: 14px;
      color: var(--text-muted);
      transition: color var(--transition-fast);
      font-weight: 400;
      padding: var(--space-3) 8px;
      min-height: 44px;
      display: inline-flex;
      align-items: center;
    }
    .nav-links a:hover { color: var(--text); }

    .nav-toggle-theme {
      background: none;
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: var(--space-2);
      cursor: pointer;
      color: var(--text-muted);
      display: flex;
      align-items: center;
      justify-content: center;
      transition: color var(--transition-fast), border-color var(--transition-fast);
      width: 36px;
      height: 36px;
    }
    .nav-toggle-theme:hover {
      color: var(--text);
      border-color: var(--text-muted);
    }
    .nav-toggle-theme svg { width: 18px; height: 18px; }

    /* Sun / Moon — dark is the default, so the sun (switch to light) shows.
       Only an explicit light choice swaps it. */
    .icon-sun { display: block; }
    .icon-moon { display: none; }
    [data-theme="light"] .icon-sun { display: none; }
    [data-theme="light"] .icon-moon { display: block; }

    .nav-github {
      font-size: 14px;
      color: var(--text-muted);
      display: flex;
      align-items: center;
      gap: var(--space-2);
    }
    .nav-github:hover { color: var(--text); }
    .nav-github svg { width: 16px; height: 16px; }

    /* Hamburger */
    .hamburger {
      display: none;
      background: none;
      border: none;
      cursor: pointer;
      color: var(--text);
      padding: var(--space-2);
    }
    .hamburger svg { width: 24px; height: 24px; }

    /* Mobile overlay */
    .mobile-menu {
      display: none;
      position: fixed;
      inset: 0;
      background: var(--bg);
      z-index: 200;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: var(--space-8);
    }
    .mobile-menu.open { display: flex; }
    .mobile-menu a {
      font-family: var(--font-display);
      font-size: 1.5rem;
      color: var(--text);
    }
    .mobile-menu-close {
      position: absolute;
      top: var(--space-4);
      right: var(--space-6);
      background: none;
      border: none;
      cursor: pointer;
      color: var(--text);
      padding: var(--space-2);
    }
    .mobile-menu-close svg { width: 28px; height: 28px; }

    /* N6: was 768px — seven links, a toggle and a GitHub label do not fit a
       1000px viewport, so the brand wrapped onto two lines. */
    /* superseded by the 900px rule in the nav block below */

    /* ==========================================
       HERO
       ========================================== */
    .hero {
      padding-top: clamp(var(--space-12), 8vw, var(--space-24));
      padding-bottom: clamp(var(--space-16), 8vw, var(--space-32));
    }

    .hero-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: clamp(var(--space-8), 4vw, var(--space-16));
      align-items: center;
    }

    .hero-headline {
      margin-bottom: var(--space-6);
    }

    .hero-subhead {
      font-size: clamp(16px, 1.2vw, 18px);
      color: var(--text-muted);
      line-height: 1.7;
      max-width: 48ch;
      margin-bottom: var(--space-4);
    }

    .hero-tagline {
      font-family: var(--font-mono);
      font-size: 14px;
      color: var(--accent-link);
      font-weight: 500;
      margin-bottom: var(--space-8);
    }

    .hero-form-wrap {
      position: relative;
    }

    .hero-form {
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-2);
      max-width: 440px;
      margin-bottom: var(--space-4);
    }

    .hero-form input[type="email"] {
      flex: 1;
      padding: 12px 16px;
      border: 1px solid var(--border);
      border-radius: 8px;
      background: var(--surface);
      color: var(--text);
      font-family: var(--font-body);
      font-size: 15px;
      transition: border-color var(--transition-fast);
    }
    .hero-form input[type="email"]::placeholder { color: var(--text-muted); }
    .hero-form input[type="email"]:focus {
      outline: none;
      border-color: var(--accent);
    }

    .btn-primary {
      padding: 12px 24px;
      background: var(--accent);
      color: #141311;
      border: none;
      border-radius: 8px;
      font-family: var(--font-body);
      font-size: 15px;
      font-weight: 600;
      cursor: pointer;
      transition: background var(--transition-fast), transform var(--transition-fast);
      white-space: nowrap;
    }
    .btn-primary:hover {
      background: var(--accent-hover);
      transform: translateY(-1px);
    }

    .hero-secondary-link {
      font-size: 14px;
      color: var(--text-muted);
      display: inline-flex;
      align-items: center;
      gap: var(--space-2);
    }
    .hero-secondary-link:hover { color: var(--accent); }

    /* Terminal mockup */
    .terminal {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 0 40px var(--glow), 0 0 80px var(--glow);
    }

    .terminal-header {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 12px 16px;
      background: var(--surface-offset);
      border-bottom: 1px solid var(--border);
    }

    .terminal-dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: var(--border);
    }

    .terminal-title {
      font-family: var(--font-mono);
      font-size: 12px;
      color: var(--text-muted);
      margin-left: var(--space-2);
    }

    .terminal-body {
      padding: clamp(16px, 2vw, 24px);
      font-family: var(--font-mono);
      font-size: clamp(11px, 1.1vw, 14px);
      line-height: 1.65;
      color: var(--text-muted);
      overflow-x: auto;
      /* F21 (found while rendering 2.4): the markup is pre-formatted terminal
         output written with raw newlines inside a <div>, so without this the
         browser collapsed every line into one run-on paragraph. .report-pre and
         .code-block pre both set it; this block never did. */
      white-space: pre;
    }

    .terminal-body .cmd { color: var(--text); }
    .terminal-body .accent { color: var(--accent); }
    .terminal-body .success { color: var(--status-pass); }
    .terminal-body .dim { color: color-mix(in srgb, var(--text-muted) 60%, transparent); }

    @media (max-width: 768px) {
      .hero-grid {
        grid-template-columns: 1fr;
      }
      .hero-form {
        flex-direction: column;
        max-width: 100%;
      }
      .btn-primary { width: 100%; text-align: center; }
    }

    /* ==========================================
       THE VERIFICATION DEVICE (Problem/Solution)
       ========================================== */
    .shift {
      border-top: 1px solid var(--border);
    }

    .shift-content {
      max-width: var(--measure);
      margin: 0 auto;
    }

    .shift-block {
      margin-bottom: var(--space-10);
    }

    .shift-block:last-child { margin-bottom: 0; }

    .shift-block h3 {
      font-family: var(--font-display);
      color: var(--text);
      margin-bottom: var(--space-3);
    }

    .shift-block p {
      color: var(--text-muted);
      line-height: 1.7;
    }

    .shift-boxes {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: var(--space-4);
      margin-bottom: var(--space-6);
    }

    .shift-box {
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: var(--space-6);
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .shift-box-muted {
      color: var(--text-muted);
      font-size: 15px;
      line-height: 1.6;
      margin-bottom: var(--space-3);
    }

    .shift-box-bright {
      color: var(--text);
      font-size: 15px;
      font-weight: 500;
      line-height: 1.6;
    }

    @media (max-width: 768px) {
      .shift-boxes {
        grid-template-columns: 1fr;
      }
    }

    .shift-paragraph {
      color: var(--text-muted);
      line-height: 1.7;
      max-width: var(--measure);
      margin-bottom: var(--space-6);
    }

    .shift-emphasis {
      color: var(--text);
      font-weight: 500;
      font-style: italic;
      border-left: 2px solid var(--accent);
      padding-left: var(--space-4);
      margin-top: var(--space-6);
      line-height: 1.7;
      max-width: var(--measure);
    }

    /* ==========================================
       CONFIDENCE REPORT (Visual Centerpiece)
       ========================================== */
    .report-section {
      border-top: 1px solid var(--border);
    }

    .report-context {
      max-width: var(--measure);
      color: var(--text-muted);
      line-height: 1.7;
      font-size: 16px;
      margin-bottom: var(--space-8);
    }

    .report-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 16px;
      padding: clamp(var(--space-6), 3vw, var(--space-12));
      box-shadow:
        0 0 60px var(--glow-strong),
        0 0 120px var(--glow),
        0 4px 30px rgba(0,0,0,0.15);
      position: relative;
      overflow: hidden;
      margin-bottom: var(--space-8);
    }

    .report-card::before {
      content: '';
      position: absolute;
      inset: -1px;
      border-radius: 17px;
      padding: 1px;
      background: linear-gradient(135deg, var(--accent), transparent 50%, var(--accent));
      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor;
      mask-composite: exclude;
      opacity: 0.3;
      pointer-events: none;
    }

    .report-pre {
      font-family: var(--font-mono);
      font-size: clamp(10px, 1vw, 13px);
      line-height: 1.6;
      color: var(--text-muted);
      white-space: pre;
      overflow-x: auto;
      position: relative;
    }

    .report-pre .highlight { color: var(--accent); }
    .report-pre .address { color: var(--text); }
    .report-pre .header-line { color: var(--text); font-weight: 500; }
    .report-pre .check { color: var(--status-pass); }

    /* Annotations */


    .report-description {
      max-width: var(--measure);
      margin: 0 auto;
      text-align: center;
      color: var(--text-muted);
      line-height: 1.7;
      font-size: 16px;
    }

    /* ==========================================
       TRUST LADDER (Tiers)
       ========================================== */
    .ladder {
      border-top: 1px solid var(--border);
    }






    .tier-badge {
      display: inline-block;
      font-family: var(--font-mono);
      font-size: 11px;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: var(--accent-link);
      background: var(--glow-strong);
      border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
      border-radius: 100px;
      padding: 2px var(--space-3);
    }




    /* ==========================================
       WHAT'S INSIDE
       ========================================== */
    .inside {
      border-top: 1px solid var(--border);
    }

    .inside-grid {
      display: grid;
      grid-template-columns: 1.2fr 0.8fr;
      gap: clamp(var(--space-8), 4vw, var(--space-16));
      margin-bottom: var(--space-8);
    }

    .workflow-list {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: var(--space-4);
    }

    .workflow-item {
      display: flex;
      gap: var(--space-3);
    }

    .workflow-number {
      font-family: var(--font-mono);
      font-size: 12px;
      color: var(--accent-link);
      flex-shrink: 0;
      width: 24px;
      padding-top: 2px;
    }

    .workflow-item strong {
      color: var(--text);
      font-weight: 500;
    }

    .workflow-item span {
      color: var(--text-muted);
    }

    .tech-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: var(--space-6);
      height: fit-content;
    }

    .tech-card p {
      font-size: 15px;
      color: var(--text-muted);
      line-height: 1.7;
    }

    .tech-card-label {
      font-family: var(--font-mono);
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: var(--accent-link);
      margin-bottom: var(--space-3);
    }

    .inside-footer {
      text-align: center;
      color: var(--text-muted);
      font-size: 15px;
      font-style: normal;
      border-top: 1px solid var(--border);
      padding-top: var(--space-6);
    }

    /* Power Tools subsection */
    .power-tools {
      margin-top: var(--space-8);
      padding-top: var(--space-6);
      border-top: 1px solid var(--border);
    }

    .power-tools-label {
      font-family: var(--font-mono);
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: var(--text-muted);
      margin-bottom: var(--space-4);
    }

    .power-tools-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: var(--space-1) var(--space-6);
    }

    .power-tools-grid span {
      font-size: 13px;
      color: color-mix(in srgb, var(--text-muted) 75%, transparent);
      font-family: var(--font-mono);
      line-height: 2;
    }

    @media (max-width: 768px) {
      .inside-grid {
        grid-template-columns: 1fr;
      }
      .power-tools-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media (max-width: 480px) {
      .power-tools-grid {
        grid-template-columns: 1fr;
      }
    }

    /* ==========================================
       TWO-PHASE ARCHITECTURE VISUAL
       ========================================== */
    .architecture-visual {
      margin-top: var(--space-8);
      margin-bottom: var(--space-6);
    }

    .shift-flow-row {
      margin-bottom: var(--space-6);
    }

    .arch-flow {
      display: grid;
      grid-template-columns: 1fr auto 1fr auto 1fr;
      gap: 0;
      align-items: center;
    }

    .arch-node {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: var(--space-4) var(--space-6);
      text-align: center;
      display: flex;
      flex-direction: column;
      justify-content: center;
      min-height: 120px;
    }

    .arch-bridge {
      border-style: dashed;
      border-radius: 8px;
      opacity: 0.85;
      min-height: 120px;
    }

    .arch-node-label {
      font-family: var(--font-mono);
      font-size: 10px;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: var(--accent-link);
      margin-bottom: var(--space-2);
    }

    .arch-node-title {
      font-family: var(--font-mono);
      font-size: 13px;
      color: var(--text);
      font-weight: 500;
      margin-bottom: var(--space-1);
    }

    .arch-node-desc {
      font-size: 12px;
      color: var(--text-muted);
      line-height: 1.5;
    }

    .arch-arrow {
      text-align: center;
      color: var(--accent);
      font-family: var(--font-mono);
      font-size: 18px;
      padding: 0 var(--space-2);
    }

    /* arch-caption removed in v6 */

    @media (max-width: 768px) {
      .arch-flow {
        grid-template-columns: 1fr;
        gap: 0;
      }
      .arch-arrow {
        transform: rotate(90deg);
        padding: var(--space-2) 0;
      }
    }

    /* ==========================================
       AUDITABLE CORE
       ========================================== */
    .opensource {
      border-top: 1px solid var(--border);
    }

    .opensource-content {
      max-width: var(--measure);
    }

    .opensource-content > p {
      color: var(--text-muted);
      line-height: 1.7;
      margin-bottom: var(--space-6);
    }

    .code-block {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 12px;
      overflow: hidden;
      margin: var(--space-6) 0;
    }

    .code-block-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: var(--space-3) 16px;
      background: var(--surface-offset);
      border-bottom: 1px solid var(--border);
      font-family: var(--font-mono);
      font-size: 12px;
      color: var(--text-muted);
    }

    .code-block pre {
      padding: var(--space-4) var(--space-6);
      font-family: var(--font-mono);
      font-size: 13px;
      line-height: 1.65;
      overflow-x: auto;
      color: var(--text-muted);
    }

    .code-block .kw { color: var(--accent); }
    .code-block .fn { color: var(--text); }
    .code-block .str { color: #7a9a5a; }
    .code-block .comment { color: color-mix(in srgb, var(--text-muted) 60%, transparent); }
    .code-block .param { color: var(--text); }

    .link-arrow {
      display: inline-flex;
      align-items: center;
      gap: var(--space-2);
      font-size: 15px;
      font-weight: 500;
    }

    /* ==========================================
       HARDWARE
       ========================================== */
    .hardware {
      border-top: 1px solid var(--border);
    }

    .hardware-table-wrap {
      overflow-x: auto;
      margin: var(--space-6) 0;
      border: 1px solid var(--border);
      border-radius: 12px;
    }

    .hardware-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 15px;
    }

    .hardware-table th {
      text-align: left;
      padding: 12px var(--space-6);
      background: var(--surface-offset);
      font-family: var(--font-mono);
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: var(--text-muted);
      font-weight: 500;
      border-bottom: 1px solid var(--border);
    }

    .hardware-table td {
      padding: var(--space-4) var(--space-6);
      border-bottom: 1px solid var(--border);
      color: var(--text-muted);
    }

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

    .hardware-note {
      color: var(--text-muted);
      font-size: 15px;
      margin-top: var(--space-4);
    }

    .hardware-small {
      color: var(--text-muted);
      font-size: var(--text-meta);
      margin-top: var(--space-3);
      font-family: var(--font-body);
      line-height: 1.6;
    }

    /* ==========================================
       WAITLIST (replaces Pricing)
       ========================================== */
    .waitlist-section {
      border-top: 1px solid var(--border);
      text-align: center;
    }

    .shipping-badge {
      display: inline-block;
      font-family: var(--font-mono);
      font-size: 12px;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: var(--accent-link);
      background: var(--glow-strong);
      border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
      border-radius: 100px;
      padding: 4px var(--space-4);
      margin-bottom: var(--space-8);
    }

    .waitlist-text {
      color: var(--text-muted);
      max-width: 52ch;
      margin: 0 auto var(--space-8);
      line-height: 1.6;
      font-size: 16px;
    }

    .waitlist-form-wrap {
      position: relative;
      max-width: 440px;
      margin: 0 auto;
    }

    .waitlist-form {
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-2);
    }

    .waitlist-form input[type="email"] {
      flex: 1;
      padding: 12px 16px;
      border: 1px solid var(--border);
      border-radius: 8px;
      background: var(--surface);
      color: var(--text);
      font-family: var(--font-body);
      font-size: 15px;
    }
    .waitlist-form input[type="email"]::placeholder { color: var(--text-muted); }
    .waitlist-form input[type="email"]:focus {
      outline: none;
      border-color: var(--accent);
    }

    @media (max-width: 768px) {
      .waitlist-form {
        flex-direction: column;
      }
      .waitlist-form .btn-primary { width: 100%; text-align: center; }
    }

    /* ==========================================
       FAQ
       ========================================== */
    .faq {
      border-top: 1px solid var(--border);
    }

    .faq-list {
      max-width: 720px;
    }

    details {
      border-bottom: 1px solid var(--border);
    }

    details summary {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: var(--space-4) 0;
      cursor: pointer;
      font-family: var(--font-body);
      font-size: 16px;
      font-weight: 500;
      color: var(--text);
      list-style: none;
      user-select: none;
    }
    details summary::-webkit-details-marker { display: none; }

    details summary::after {
      content: '+';
      font-family: var(--font-mono);
      font-size: 18px;
      color: var(--text-muted);
      transition: transform var(--transition-normal);
      flex-shrink: 0;
      margin-left: var(--space-4);
    }

    details[open] summary::after {
      content: '−';
    }

    details .faq-answer {
      padding: 0 0 var(--space-4) 0;
      color: var(--text-muted);
      line-height: 1.7;
      font-size: 15px;
    }

    /* ==========================================
       BOTTOM CTA
       ========================================== */
    .bottom-cta {
      border-top: 1px solid var(--border);
      text-align: center;
    }

    .bottom-cta h2 {
      margin-bottom: var(--space-3);
    }

    .bottom-cta-subhead {
      color: var(--text-muted);
      max-width: 52ch;
      margin: 0 auto var(--space-8);
      line-height: 1.6;
    }

    .bottom-form-wrap {
      position: relative;
      max-width: 440px;
      margin: 0 auto;
    }

    .bottom-form {
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-2);
    }

    .bottom-form input[type="email"] {
      flex: 1;
      padding: 12px 16px;
      border: 1px solid var(--border);
      border-radius: 8px;
      background: var(--surface);
      color: var(--text);
      font-family: var(--font-body);
      font-size: 15px;
    }
    .bottom-form input[type="email"]::placeholder { color: var(--text-muted); }
    .bottom-form input[type="email"]:focus {
      outline: none;
      border-color: var(--accent);
    }

    @media (max-width: 768px) {
      .bottom-form {
        flex-direction: column;
      }
      .bottom-form .btn-primary { width: 100%; text-align: center; }
    }

    /* ==========================================
       CHECKLIST (Success state)
       ========================================== */
    .checklist-success {
      text-align: left;
      max-width: 700px;
      margin: 0 auto;
    }

    .checklist-success :is(h2,h3) {
      font-family: var(--font-display);
      font-size: 1.25rem;
      color: var(--text);
      margin-bottom: var(--space-2);
    }

    .checklist-success > p {
      color: var(--text-muted);
      line-height: 1.7;
      margin-bottom: var(--space-6);
      font-size: 15px;
    }

    .checklist-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: clamp(var(--space-4), 2vw, var(--space-6));
      overflow-x: auto;
    }

    .checklist-card pre {
      font-family: var(--font-mono);
      font-size: clamp(11px, 1vw, 13px);
      line-height: 1.65;
      color: var(--text-muted);
      white-space: pre;
    }

    .checklist-card .check-num { color: var(--accent-link); font-weight: 500; }
    .checklist-card .check-title { color: var(--text); font-weight: 500; }
    .checklist-card .check-pass { color: var(--status-pass); font-weight: 500; }
    .checklist-card .check-fail { color: var(--status-fail); font-weight: 500; }
    .checklist-card .check-why { color: var(--text-muted); }
    .checklist-card .check-pass-desc { color: var(--status-pass); }
    .checklist-card .check-fail-desc { color: var(--status-fail); }

    /* Expanded checklist (form 3 only) */
    .checklist-expanded {
      max-width: 800px;
      margin: 0 auto;
    }
    .check-item {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: clamp(var(--space-4), 2vw, var(--space-6));
      margin-bottom: var(--space-4);
    }
    .check-item .check-header {
      font-family: var(--font-mono);
      font-size: 15px;
      margin-bottom: var(--space-2);
    }
    .check-item .check-num { color: var(--accent-link); font-weight: 600; }
    .check-item .check-title { color: var(--text); font-weight: 600; font-size: 16px; }
    .check-item .check-explain {
      font-size: 14px;
      line-height: 1.7;
      color: var(--text-muted);
      margin-bottom: var(--space-3);
    }
    .check-howto {
      background: var(--bg);
      border-radius: 8px;
      padding: var(--space-3) var(--space-4);
    }
    .check-howto .check-label {
      font-size: 12px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: var(--text-muted);
      margin-bottom: 4px;
      margin-top: var(--space-2);
    }
    .check-howto .check-label:first-child { margin-top: 0; }
    .check-howto code {
      display: block;
      font-family: var(--font-mono);
      font-size: 13px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 6px;
      padding: 8px 12px;
      margin: 4px 0 var(--space-2);
      color: var(--accent);
      word-break: break-all;
    }
    .check-howto .check-pass-desc {
      font-size: 14px;
      color: var(--status-pass);
      margin-bottom: var(--space-2);
    }
    .check-howto .check-fail-desc {
      font-size: 14px;
      color: var(--status-fail);
      margin-bottom: var(--space-2);
    }
    .check-howto .check-fail-desc code {
      display: inline;
      padding: 2px var(--space-2);
      margin: 0;
      color: var(--text);
      font-size: 12px;
    }
    .check-howto .check-pass-desc code,
    .check-result {
      margin-top: var(--space-6);
      text-align: center;
    }
    .check-result .check-pass { color: var(--status-pass); font-weight: 600; font-size: 15px; }
    .check-result .check-fail { color: var(--status-fail); font-weight: 500; font-size: 14px; margin-top: var(--space-2); }

    /* ==========================================
       FOOTER
       ========================================== */
    .footer {
      border-top: 1px solid var(--border);
      padding: var(--space-12) 0 var(--space-8);
    }

    .footer-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: var(--space-8);
      margin-bottom: var(--space-10);
    }

    .footer-col h2 {
      font-family: var(--font-mono);
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: var(--text-muted);
      margin-bottom: var(--space-4);
      font-weight: 500;
    }

    .footer-col ul {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: var(--space-2);
    }

    .footer-col a {
      font-size: 14px;
      color: var(--text-muted);
    }
    .footer-col a:hover { color: var(--text); }

    .footer-bottom {
      border-top: 1px solid var(--border);
      padding-top: var(--space-6);
      display: flex;
      flex-direction: column;
      gap: var(--space-2);
    }

    .footer-bottom p {
      font-size: 13px;
      color: var(--text-muted);
    }

    .footer-bottom .footer-tagline {
      font-family: var(--font-mono);
      font-size: var(--text-meta);
      color: var(--text-muted);
    }

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

    /* Consent notice — sits on its own line BELOW the input+button row.
       flex-basis: 100% forces it onto a new flex line; order: 99 makes it
       last in the visual flow regardless of DOM position. */
    .form-consent {
      flex-basis: 100%;
      order: 99;
      font-size: 12px;
      color: var(--text-muted);
      line-height: 1.5;
      margin: 8px 0 0;
      max-width: 480px;
    }
    .form-consent a {
      color: var(--accent-link);
      text-decoration: underline;
    }

    /* Form error state — shown when a waitlist submission fails. */
    .form-error {
      max-width: 480px;
      margin-top: var(--space-4);
      padding: var(--space-4) var(--space-6);
      background: color-mix(in srgb, var(--accent) 8%, transparent);
      border: 1px solid var(--accent);
      border-left-width: 3px;
      border-radius: 8px;
      color: var(--text);
      font-size: 14px;
      line-height: 1.5;
    }
    .form-error p { margin: 0 0 var(--space-3); }
    .form-error a { color: var(--accent-link); text-decoration: underline; }
    .form-error a:hover { color: var(--accent-hover); }
    .btn-secondary {
      display: inline-block;
      padding: var(--space-2) var(--space-4);
      background: transparent;
      color: var(--text);
      border: 1px solid var(--border);
      border-radius: 6px;
      font-family: var(--font-body);
      font-size: 13px;
      font-weight: 500;
      cursor: pointer;
      transition: border-color var(--transition-fast), color var(--transition-fast);
    }
    .btn-secondary:hover { border-color: var(--accent); color: var(--accent); }

    /* ==========================================
       SCROLL ANIMATIONS
       ========================================== */
    .reveal {
      opacity: 1;
      animation: bwReveal 0.7s var(--ease-out) both;
    }
    @keyframes bwReveal {
      from { opacity: 0; transform: translateY(20px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    .reveal.visible {
      opacity: 1;
      transform: translateY(0);
    }

    @media (prefers-reduced-motion: reduce) {
      .reveal {
        opacity: 1;
        transform: none;
        transition: none; animation: none;
      }
    }

    /* ==========================================
       WHAT IT IS / ISN'T STRIP (website 2.0)
       ========================================== */
    .isnt-strip { border-top: 1px solid var(--border); }
    .isnt-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--space-6);
      margin-top: var(--space-8);
    }
    .isnt-col {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: var(--space-6);
    }
    .isnt-col h3 {
      font-family: var(--font-mono);
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--accent-link);
      margin-bottom: var(--space-4);
    }
    .isnt-col ul { list-style: none; display: flex; flex-direction: column; gap: var(--space-2); }
    .isnt-col li {
      font-size: 15px;
      color: var(--text-muted);
      line-height: 1.6;
      padding-left: var(--space-6);
      position: relative;
    }
    .isnt-col.is li::before { content: '✓'; color: var(--status-pass); position: absolute; left: 0; font-family: var(--font-mono); }
    .isnt-col.isnt li::before { content: '—'; color: var(--text-muted); position: absolute; left: 0; font-family: var(--font-mono); }
    @media (max-width: 768px) { .isnt-grid { grid-template-columns: 1fr; } }

    /* ==========================================
       WHERE A WITNESS FITS — COMPARISON TABLE
       ========================================== */
    .fit-section { border-top: 1px solid var(--border); }
    .fit-caption { color: var(--text-muted); font-size: 18px; margin-bottom: var(--space-4); font-style: italic; }
    .fit-table-wrap {
      overflow-x: auto;
      margin: var(--space-6) 0;
      border: 1px solid var(--border);
      border-radius: 12px;
    }
    .fit-table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 640px; }
    .fit-table th {
      text-align: center;
      padding: 12px var(--space-4);
      background: var(--surface-offset);
      font-family: var(--font-mono);
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      color: var(--text-muted);
      font-weight: 500;
      border-bottom: 1px solid var(--border);
    }
    .fit-table th:first-child { text-align: left; }
    .fit-table td {
      padding: 12px var(--space-4);
      border-bottom: 1px solid var(--border);
      color: var(--text-muted);
      text-align: center;
    }
    .fit-table tr:last-child td { border-bottom: none; }
    .fit-table td:first-child { text-align: left; color: var(--text); font-size: 14px; }
    .fit-table td.bw { color: var(--accent-link); font-weight: 500; }
    .fit-yes { color: var(--status-pass); font-family: var(--font-mono); font-weight: 500; }
    .fit-part { color: var(--accent-link); font-family: var(--font-mono); }
    .fit-no { color: var(--text-muted); font-family: var(--font-mono); }
    .fit-legend { color: var(--text-muted); font-size: 14px; margin-top: var(--space-3); font-family: var(--font-mono); }

    /* ==========================================
       THE TRIAD — VERIFY · ATTEST · INHERIT
       ========================================== */
    .triad { border-top: 1px solid var(--border); }
    .triad-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: var(--space-6);
      margin-top: var(--space-8);
    }
    .triad-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: var(--space-6);
      display: flex;
      flex-direction: column;
    }
    .triad-card .tier-header { margin-bottom: var(--space-4); }
    .tier-badge.coming {
      color: var(--text-muted);
      background: transparent;
      border-color: var(--border);
    }
    .triad-card p {
      font-size: 15px;
      color: var(--text-muted);
      line-height: 1.7;
    }
    .triad-card p + p { margin-top: var(--space-3); }
    @media (max-width: 768px) { .triad-grid { grid-template-columns: 1fr; } }

    /* ==========================================
       SEE IT WORK — PREVIEW CTA
       ========================================== */
    .see-it { border-top: 1px solid var(--border); text-align: center; }
    .see-it p { color: var(--text-muted); font-size: 18px; max-width: 46ch; margin: var(--space-4) auto var(--space-6); line-height: 1.7; }
  

    /* Specs page — reference styling, all tokens reused */
    .specs-hero { padding-bottom: clamp(var(--space-8), 6vw, var(--space-16)); }
    .specs-hero h1 { font-size: clamp(2rem, 4vw, 3rem); margin-bottom: var(--space-4); }
    .specs-lede { max-width: 52ch; color: var(--text-muted); font-size: 18px; line-height: 1.7; }
    .specs-section { border-top: 1px solid var(--border); }
    .specs-section h2 { margin-bottom: var(--space-4); }
    .specs-prose { max-width: 54ch; color: var(--text-muted); line-height: 1.7; }
    .specs-prose p + p { margin-top: var(--space-4); }
    .specs-prose strong { color: var(--text); font-weight: 500; }
    .spec-table-wrap { overflow-x: auto; margin: var(--space-6) 0; border: 1px solid var(--border); border-radius: 12px; }
    .spec-table { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 560px; }
    .spec-table th {
      text-align: left; padding: 12px 20px; background: var(--surface-offset);
      font-family: var(--font-mono); font-size: 11px; text-transform: uppercase;
      letter-spacing: 0.06em; color: var(--text-muted); font-weight: 500;
      border-bottom: 1px solid var(--border);
    }
    .spec-table td { padding: 12px 20px; border-bottom: 1px solid var(--border); color: var(--text-muted); vertical-align: top; }
    .spec-table tr:last-child td { border-bottom: none; }
    .spec-table td:first-child { color: var(--accent-link); font-weight: 500; font-family: var(--font-mono); font-size: 13px; white-space: nowrap; }
    .spec-cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); margin-top: var(--space-6); }
    .spec-col { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: var(--space-6); }
    .spec-col h3 { color: var(--text); }
    .spec-col ul { list-style: none; display: flex; flex-direction: column; gap: var(--space-2); }
    .spec-col li { font-size: 15px; color: var(--text-muted); line-height: 1.6; padding-left: 22px; position: relative; }
    .spec-col li::before { content: '→'; position: absolute; left: 0; color: var(--accent); font-family: var(--font-mono); font-size: 13px; }
    @media (max-width: 768px) { .spec-cols { grid-template-columns: 1fr; } }

}

/* ==========================================================================
   T5 — mono legibility floor
   Uppercase mono strips the ascender/descender cues that make a word
   recognisable at a glance, and mono strips the width variation too. Anything
   a reader must actually read is now 12–13px, with tracking raised to match.
   ========================================================================== */
@layer page {
  .power-tools-label, .tech-card-label, .code-block-header,
  .fit-legend, .arch-node-label, .workflow-number,
  .blog-card-cat, .blog-card-meta, .post-meta, .post-cat, .chip-n,
  .terminal-title, .footer-col h2 { font-size: var(--text-meta); }
  thead th, th[scope="col"],
  .arch-node-desc, .shot-placeholder, .shipping-badge,
  .form-consent, .form-consent a, .fine-print, .fine-print a,
  .report-card figcaption, figcaption, .faq-answer h3, .disclosure h3,
  .footer-bottom p, .footer-tagline { font-size: var(--text-meta); }
  .post-cat { letter-spacing: 0.06em; }
  .footer-col h2 { letter-spacing: 0.08em; }
}

/* ==========================================================================
   Nav: Product dropdown + waitlist CTA (P3)
   Five text items instead of nine, and the site's one conversion now lives in
   the chrome of every page rather than only on the homepage.
   ========================================================================== */
@layer chrome {
  .nav-dropdown { position: relative; }
  .nav-dropdown-trigger {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--font-body);
    font-size: 14px;
    /* A <button> among <a>s: the UA's "font:" shorthand resets line-height and drops the
       inherited text-rendering, so "Product" drew with kerning/ligatures OFF and a 44px box
       while its six sibling links had optimizeLegibility and 46.4px. Same font, visibly
       different word. Restore both. (user report, 2026-09-08) */
    line-height: 1.6;
    text-rendering: optimizeLegibility;
    color: var(--text-muted);
    padding: var(--space-3) 8px;
    min-height: 44px;
    transition: color var(--transition-fast);
  }
  .nav-dropdown-trigger:hover,
  .nav-dropdown-trigger[aria-expanded="true"] { color: var(--text); }
  .nav-caret { width: 12px; height: 12px; transition: transform var(--transition-fast); }
  .nav-dropdown-trigger[aria-expanded="true"] .nav-caret { transform: rotate(180deg); }

  .nav-dropdown-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 230px;
    list-style: none;
    margin: 0;
    padding: var(--space-2) 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
    z-index: 120;
  }
  .nav-dropdown-menu[hidden] { display: none; }
  .nav-dropdown-menu a {
    display: block;
    padding: var(--space-3) 16px;
    font-size: 14px;
    color: var(--text);
    min-height: 0;
  }
  .nav-dropdown-menu a:hover { color: var(--accent-link); background: var(--surface-offset); }

  /* The theme toggle is the one nav control with no font declared, so it inherited the
     browser default (Arial 13.33px) instead of Satoshi. Icon-only today, wrong the moment
     it carries a label. (2026-09-08) */
  .nav-toggle-theme { font-family: var(--font-body); font-size: 14px; line-height: 1.6; text-rendering: optimizeLegibility; }

  .nav-cta {
    background: var(--accent);
    color: #141311;
    border-radius: var(--radius-md);
    padding: var(--space-3) 16px;
    font-size: 14px;
    font-weight: 500;
    min-height: 0;
    transition: background var(--transition-fast), transform var(--transition-fast);
  }
  .nav-cta:hover { background: var(--accent-hover); color: #141311; transform: translateY(-1px); }
  .nav-github svg { width: 18px; height: 18px; }

  /* N6: five items + toggle + mark + button fit to about 900px. */
  @media (max-width: 1024px) {
    .nav-links { display: none; }
    .hamburger { display: flex; }
  }
  /* the pinned bar costs 64px of a 667px phone viewport; 52px is the same
     benefit at a lower rent. Not hide-on-scroll — that would hide the CTA
     exactly while someone is reading. */
  @media (max-width: 768px) {
    :root { --nav-height: 52px; }
  }
  /* The CTA lives inside .nav-links, and `.nav-links a` (0,1,1) outranks `.nav-cta` (0,1,0), so the
     amber button rendered with muted-grey link text. Raise the button above its own container's
     link rule. (user report, 2026-09-08) */
  .nav-links a.nav-cta,
  .nav-links a.nav-cta:hover {
    color: #141311;
    padding: var(--space-3) 16px;
    font-weight: 500;
    min-height: 0;
  }
  .mobile-menu .nav-cta { font-family: var(--font-body); font-size: 1.1rem; padding: 12px 24px; color: #141311; }
  .mobile-menu .nav-cta:hover { color: #141311; }
}

/* ==========================================================================
   T5 (completed) — the 13px legibility floor, applied everywhere
   The first T5 pass named 16 selectors. Sixty more were still setting mono
   labels at 10–12px, which is the type this site asks a reader to trust:
   consent lines, table headers, captions, chips, meta rows. Uppercase mono
   strips the ascender and descender cues that make a word recognisable, so it
   needs more size than lowercase body text, not less.

   Deliberately exempt, and why:
     .claim-ref            a superscript marker inside 17px prose
     .tui *, .statusbar    terminal emulation — resizing breaks ASCII alignment
     .post-toc li::before  a numeral, not a word
   ========================================================================== */
@layer page {
  .footer-col h2,
  .footer-tagline,
  .post-tier-badge,
  .blog-chip,
  .blog-more,
  .post-list-meta,
  .blog-post .post-table th,
  .tier-badge,
  .arch-node-desc,
  .arch-node-label,
  .hardware-table th,
  .fit-table th,
  .spec-table th,
  .shipping-badge,
  .check-howto .check-label,
  .check-howto .check-fail-desc code,
  .form-consent,
  .isnt-col h3,
  .report-card figcaption,
  .shot-placeholder,
  .section-rail a > span,
  .preview-caption,
  .chip,
  .tui-back,
  .tui-hint,
  .entry-meta,
  .glossary-search-label,
  .glossary-count,
  .ty-label,
  .ty-next h2, .ty-more h2,
  .ty-steps .n,
  .related-cat,
  .post-cat,
  .chip-n,
  .blog-card-meta,
  .blog-card-cat,
  .post-meta,
  .section-label,
  /* tracking has to come down as the size comes up, or 13px uppercase mono
     sets too loose and stops reading as one word */
  .section-label, .footer-col h2, .act-break .act-num { letter-spacing: 0.07em; }
  .blog-card-cat, .related-cat, .post-cat, .chip-n { letter-spacing: 0.05em; }
}

/* T5 floor, in @layer utilities so container rules cannot beat it. tokens.css
   declares utilities after page; layer order beats specificity. Terminal type
   stays exempt by construction — nothing here targets .tui / .report-pre. */
@layer utilities {
  thead th, th[scope="col"], .arch-node-desc, .shot-placeholder, .shipping-badge,
  .form-consent, .form-consent a, .fine-print, .fine-print a,
  figcaption, .faq-answer h3, .disclosure h3, .report-card h3,
  .footer-bottom p, .footer-tagline { font-size: var(--text-meta); }
}

/* ==========================================================================
   AUDIT 01 + 06 — the marker and the marks
   ========================================================================== */
@layer page {
  /* The amber arrow was dropped in an orphan-class sweep; .tier-bullet kept
     its 24px marker gutter, so five lists read as paragraphs with a mystery
     indent. Same construction as .isnt-col li::before, which survived. */
  .triad-card .tier-bullet::before,
  .triad-plinth .tier-bullet::before {
    content: '\2192';
    position: absolute;
    left: 0;
    color: var(--accent-link);
    font-family: var(--font-mono);
    font-size: var(--text-meta);
  }

  /* The state marks were 14px glyphs, and "no" was set in the same muted grey
     as the row text — so absence weighed the same as prose. */
  .fit-table { font-size: var(--text-small); }
  .fit-yes, .fit-part, .fit-no { font-size: 19px; line-height: 1; font-weight: 500; }
  /* NO opacity here. The first version of this rule used opacity: 0.45 to make
     absence recede; on --text-muted that multiplied down to 2.22:1 dark and
     1.91:1 light — under WCAG 1.4.11's 3:1 floor for a meaning-bearing mark,
     and worse than the 7.12:1 / 4.78:1 it had before the change. The legend
     teaches the reader "— no", so they are told to look for it. The weight
     step below is the whole de-emphasis. */
  .fit-no { font-weight: 400; }
  /* U+25D0 is a filled half-disc and U+2713 a thin check, at the same advance —
     so at a shared size "partial" carries more ink than "full" and optically
     out-shouts it. One step down evens the ink, not the meaning. */
  .fit-part { font-size: 16px; }
  .fit-legend .fit-yes,
  .fit-legend .fit-part,
  .fit-legend .fit-no { font-size: 16px; vertical-align: -2px; }
}