@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);
    }

    section {
      padding: clamp(var(--space-16), 8vw, var(--space-32)) 0;
    }

    /* ==========================================
       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(var(--text-body), 1.2vw, var(--text-lede));
      color: var(--text);   /* T8 */
      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)
       ========================================== */

    .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-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) {
      .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-link);
      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);
      /* was word-break: break-all — it split commands mid-token
         ("del d/efault", "bl/uetooth"). anywhere breaks only when a token
         genuinely cannot fit. */
      word-break: normal;
      overflow-wrap: anywhere;
    }
    .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);
    }
    /* Both descriptions, not just the fail one: an inline <code> in
       .check-pass-desc (check 6's "256") was still taking the block
       treatment above, which orphaned the sentence's leading period. */
    .check-howto :is(.check-pass-desc, .check-fail-desc) code {
      display: inline;
      padding: 2px var(--space-2);
      margin: 0;
      color: var(--text);
      font-size: 12px;
    }
    /* was a broken selector list: an inline <code> inside .check-pass-desc
       inherited the centred, top-margined treatment meant for .check-result */
    .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);
      /* was 48px / 32px with a 40px gap under the grid — the footer was paying
         more vertical space than most content sections */
      padding: var(--space-8) 0 var(--space-6);
    }

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

    .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-3);
      font-weight: 500;
    }

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

    .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-4);
      display: flex;
      flex-direction: column;
      gap: var(--space-1);
    }

    .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-4);
      }
    }

    /* 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-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; }

}


@layer page {
  /* F09 receipts were removed: /verify-our-claims carries the version and
     verification date, and repeating them here dated the homepage. */

  /* ---- F09: one quiet disclosure strip, not a shouted box --------------- */
  .disclosure {
    border-top: 1px solid var(--border);
    padding: var(--space-10) 0 0;
  }
  .disclosure p {
    font-size: 13px;
    line-height: 1.7;
    color: var(--text-muted);
    max-width: var(--measure);
  }
  .disclosure p + p { margin-top: var(--space-3); }

  /* ---- F10: act boundaries. Fourteen sections shared one rhythm; these
         two full-bleed bands mark the points where the argument turns.
         No new colour — a change of surface only. ------------------------- */
  .act-break {
    background: var(--surface-offset);
    border-block: 1px solid var(--border);
    padding: var(--space-16) 0;
  }
  .act-break .act-num {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent-link);
    margin-bottom: var(--space-3);
  }
  .act-break h2 { margin-bottom: var(--space-3); }
  .act-break p { color: var(--text-muted); }

  /* ---- F10: audience router -------------------------------------------- */
  .router { padding-top: 0; }
  .router-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: var(--space-3);
    margin-top: var(--space-6);
  }
  .router-card {
    display: block;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    transition: border-color var(--transition-fast), transform var(--transition-fast);
  }
  .router-card:hover { border-color: var(--accent); transform: translateY(-1px); }
  .router-card strong { display: block; color: var(--text); font-weight: 500; margin-bottom: var(--space-1); }
  .router-card span { color: var(--text-muted); font-size: 14px; line-height: 1.5; }

  /* ---- F11: the Confidence Report on a phone ---------------------------- */
  .report-fields { display: none; }
  .report-card figcaption {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-top: var(--space-4);
  }
  @media (max-width: 719px) {
    .report-pre { display: none; }
    .report-fields {
      display: grid;
      gap: var(--space-2);
      font-size: 15px;
      margin: 0;
    }
    .report-fields > div {
      display: flex;
      justify-content: space-between;
      gap: var(--space-3);
      border-bottom: 1px solid var(--border);
      padding-bottom: var(--space-2);
    }
    .report-fields > div.stack { display: block; }
    .report-fields dt { color: var(--text-muted); }
    .report-fields dd {
      margin: 0;
      font-family: var(--font-mono);
      font-size: 14px;
      word-break: break-all;
      color: var(--text);
    }
    .report-fields .pass { color: var(--status-pass); }
    .report-fields .key { color: var(--accent-link); }
  }

  /* ---- F17: comparison table on a phone --------------------------------- */
  .fit-table-wrap:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .fit-table th[scope="row"], .fit-table td:first-child {
    position: sticky;
    left: 0;
    background: var(--surface);
    border-right: 1px solid var(--border);
    text-align: left;
  }
  .fit-table thead th:first-child { background: var(--surface-offset); z-index: 1; }

  /* ---- F18: the two photographs (files not yet shot) -------------------- */
  .hardware-shot { margin: var(--space-8) 0; }
  .hardware-shot img {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    width: 100%;
  }
  .hardware-shot figcaption {
    font-size: 14px;
    color: var(--text-muted);
    margin-top: var(--space-3);
  }
  .shot-placeholder {
    border: 1px dashed var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface-offset);
    padding: var(--space-16) var(--space-6);
    text-align: center;
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
  }
}

/* F17 follow-up: converting the first cell of each row to <th scope="row"> gave
   it the thead treatment (mono, uppercase, 12px), which made long row labels
   harder to read than the <td> they replaced. Semantics kept, styling restored. */
@layer page {
  .fit-table th[scope="row"],
  .hardware-table th[scope="row"] {
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 400;
    text-transform: none;
    letter-spacing: normal;
    color: var(--text);
  }
}

/* ==========================================================================
   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; }
}

/* ==========================================================================
   F10 — section rail, as dots
   The rail was a stack of uppercase mono labels in the left gutter. At any
   viewport it read as a second navigation competing with the nav, and the
   labels were long enough to look like a sidebar the page did not have.
   Eight dots instead: present, ignorable, and the label appears on hover or
   keyboard focus for anyone who wants it.
   ========================================================================== */
@layer page {
  .section-rail { display: none; }

  @media (min-width: 1280px) {
    .section-rail {
      display: grid;
      gap: var(--space-4);
      position: fixed;
      top: 50%;
      transform: translateY(-50%);
      /* tucked close to the container edge: at 56px the dots read as their own
         column, at 28px they read as a margin ornament, which is the job */
      /* pinned to the viewport gutter, not offset from the container: the dots
         are a margin mark, and the container should keep its full width */
      left: var(--space-6);
      width: 8px;
      justify-items: start;
      z-index: 50;
    }
    .section-rail a {
      position: relative;
      display: block;
      width: 8px;
      height: 8px;
      border-radius: var(--radius-pill);
      background: var(--border);
      text-decoration: none;
      transition: background var(--transition-fast), transform var(--transition-fast);
    }
    .section-rail a:hover,
    .section-rail a:focus-visible { background: var(--accent); transform: scale(1.35); }
    .section-rail a[aria-current="true"] { background: var(--accent); }

    /* the label rides along, hidden until wanted */
    .section-rail a > span {
      position: absolute;
      left: 20px;
      top: 50%;
      transform: translateY(-50%);
      white-space: nowrap;
      font-family: var(--font-mono);
      font-size: 11px;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--text-muted);
      opacity: 0;
      pointer-events: none;
      transition: opacity var(--transition-fast);
    }
    .section-rail a:hover > span,
    .section-rail a:focus-visible > span { opacity: 1; }
  }
  @media (prefers-reduced-motion: reduce) {
    .section-rail a { transition: none; }
    .section-rail a:hover { transform: none; }
  }
}

/* ==========================================================================
   /air-gap-checklist — the lead magnet as a page (F07)
   It reuses the checklist components from the homepage success state, but a
   document you print and work through beside a machine is read left to right,
   not centred like a CTA block.
   ========================================================================== */
@layer page {
  .checklist-page { padding: clamp(var(--space-12), 6vw, var(--space-20)) 0; text-align: left; }
  .checklist-page h1 { font-size: clamp(2.2rem, 4.5vw, 3.4rem); font-weight: 500; margin-bottom: var(--space-6); }
  .checklist-page > .container > p { max-width: var(--measure); }
  .checklist-page .bottom-cta-subhead { font-size: var(--text-lede); color: var(--text); margin-bottom: var(--space-4); }
  .checklist-page .checklist-success { background: none; border: none; padding: 0; margin-top: var(--space-12); text-align: left; }
  .checklist-page .checklist-expanded { margin: 0; max-width: 860px; }
  .checklist-page h2 { font-size: clamp(1.5rem, 3vw, 2rem); margin-bottom: var(--space-4); }

  @media print {
    .nav, .mobile-menu, .footer, .skip-link, .section-rail, .checklist-page h2 + p a { display: none !important; }
    .checklist-page .check-item { break-inside: avoid; border-color: #999; }
    body { background: #fff; color: #000; }
  }
}

@layer page {
  /* the components were built for a centred CTA block; on the page they read left */
  .checklist-page .bottom-cta-subhead,
  .checklist-page .checklist-expanded,
  .checklist-page .check-result,
  .checklist-page > .container > p { margin-left: 0; margin-right: 0; text-align: left; }
  .checklist-page .check-result { text-align: left; }
}

/* ==========================================================================
   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; }
}

@layer page {
  /* a receipt inherits the alignment of the claim it supports; inside the
     centred waitlist block that means centred, not a left-aligned mono slab. */
  .u-center { text-align: center; margin-left: auto; margin-right: auto; }
}

/* ==========================================================================
   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 :is(.check-pass-desc, .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; }
}

/* ==========================================================================
   Capability section — three cards on a plinth
   The three cards carry the work you came to do. "Keep it Safe" runs
   horizontally beneath them because it is not a job you choose: it applies to
   all three whether you think about it or not. It sits on --surface-offset so
   it reads as ground rather than as a fourth peer.
   ========================================================================== */
@layer page {
  .triad-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-4); }
  .triad-card { display: flex; flex-direction: column; min-width: 0; }

  .triad-card .tier-bullet, .triad-plinth .tier-bullet { position: relative; margin: 0; padding-left: var(--space-6);
    font-size: var(--text-small); line-height: 1.5; color: var(--text-muted); max-width: none; }
  .triad-card .tier-more { margin: var(--space-4) 0 0; font-size: var(--text-small); }

  .triad-plinth {
    margin-top: var(--space-4);
    padding: var(--space-6);
    background: var(--surface-offset);
    border: 1px solid var(--accent);
    border-radius: var(--radius-lg);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: var(--space-6);
    align-items: start;
  }
  .triad-plinth > * { min-width: 0; }
  /* fourth instance of the same trap: .triad-plinth p (0,1,1) was overriding
     both the size and the amber of the site's standard section label */
  .triad-plinth .section-label {
    margin-bottom: var(--space-2);
    font-size: var(--text-meta);
    color: var(--accent-link);
  }
  .triad-plinth p { max-width: none; font-size: var(--text-small); line-height: 1.6; color: var(--text-muted); }
  /* scoped: .triad-plinth p (0,1,1) would otherwise force this to muted body size */
  /* deliberately one step under .tier-name: this is the ground the three cards
     stand on, not a fourth peer. Fixed rem against the cards' clamp() would
     invert below 1244px, which is most laptops. */
  .triad-plinth .plinth-name { font-family: var(--font-display); font-size: clamp(1.125rem, 1.6vw, 1.25rem); font-weight: 500;
    letter-spacing: -0.02em; color: var(--text); line-height: 1.2; margin: 0 0 var(--space-2); }
  .triad-plinth .tier-bullets { margin-top: 0; padding-top: 0; border-top: none; }

  /* Interface — six principles, no function list */
  .ux-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-6) var(--space-8); margin-top: var(--space-10); }
  .ux-principle { min-width: 0; }
  /* scoped for the same reason as .plinth-name */
  .ux-principle .ux-principle-name { font-weight: 500; color: var(--text); font-size: 1.0625rem;
    line-height: 1.35; margin: 0 0 var(--space-1); }
  .ux-principle p { margin: 0; font-size: var(--text-small); line-height: 1.55; color: var(--text-muted); }
}

@layer page {
  /* .tier-name and .tier-header lost their rules in an earlier orphan sweep and
     are used again by the capability cards. Restored at the size the approved
     mockup showed, so a card title reads as a title rather than as body copy
     one pixel larger. */
  .triad-card .tier-header { margin-bottom: var(--space-3); }
  .triad-card .tier-name {
    font-family: var(--font-display);
    font-size: clamp(1.25rem, 1.8vw, 1.4rem);
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--text);
  }
}

@layer page {
  /* the photo slots sat between two sections that each pay the full section
     padding, then added their own margin on top — three gaps stacked */
  .hardware-shot { margin: var(--space-8) 0 0; }
  .hardware-shot figcaption { margin-top: var(--space-3); }
  .shot-placeholder { padding: var(--space-12) var(--space-6); }

  /* .opensource ends on a link row and .hardware opens on a label; both paid
     full padding, which is the ~200px hole under "Read the source on GitHub" */
  .opensource { padding-bottom: var(--space-12); }
  .hardware { padding-top: var(--space-12); }
  .inside { padding-bottom: var(--space-12); }
  .report-section { padding-top: var(--space-12); }
  .see-it { padding-block: var(--space-12); }
}

@layer page {
  /* On /air-gap-checklist these components are the page, not a success panel
     inside a centred CTA. .checklist-success's 700px + auto margins left the
     cards indented ~112px from the heading above them. */
  .checklist-page .checklist-success,
  .checklist-page .checklist-expanded {
    max-width: 860px;
    margin-left: 0;
    margin-right: 0;
    text-align: left;
  }
  .checklist-page .bottom-cta-subhead { max-width: var(--measure); margin-left: 0; margin-right: 0; }
  .checklist-page .check-result { text-align: left; }
  .checklist-page .check-item { margin-bottom: var(--space-4); }
}

@layer page {
  /* .triad-grid stretches all three cards to the tallest, and the cards are
     column flex with nothing claiming the slack — so a shorter card dumped its
     whole deficit as trailing whitespace (card 3 was 24% empty). The bullet
     block takes the slack instead, so every card's rule sits the same distance
     from its foot. */
  /* Subgrid, so the three cards share row tracks: title, prose, bullets, link.
     Row 2 takes the tallest prose, which puts every card's rule at the same y
     and starts every bullet list on the same line. `margin-top: auto` solved
     the trailing-whitespace symptom by bottom-anchoring each card's bullets
     independently — which is precisely what threw the rules out of line. */
  .triad-grid { grid-template-rows: auto; }
  .triad-card { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; }
  .triad-card > p { margin-bottom: var(--space-4); }
  .triad-card .tier-bullets { margin-top: 0; align-self: start; }
  .triad-card .tier-more { margin: var(--space-4) 0 0; align-self: start; }

  @supports not (grid-template-rows: subgrid) {
    .triad-card { display: flex; flex-direction: column; }
    .triad-card .tier-bullets { margin-top: auto; }
  }
}

@layer page {
  /* Fine print — the provenance note under the capability cards. Small, but not
     below the 13px floor: it is read, not decorative. */
  .fine-print {
    font-size: var(--text-meta);
    line-height: 1.65;
    color: var(--text-muted);
    max-width: var(--measure);
    margin: var(--space-6) 0 0;
    padding-top: var(--space-4);
    border-top: 1px solid var(--border);
  }
  .fine-print span { color: var(--accent-link); margin-right: 2px; }

  /* Vertical rhythm — section padding was clamp(4rem, 8vw, 8rem), so two
     adjacent sections put up to 256px between a closing line and the next
     label. One scale for the whole page instead, tighter at the top end. */
  main > section { padding-block: clamp(var(--space-10), 4.5vw, var(--space-16)); }
  .hero { padding-block: clamp(var(--space-12), 5vw, var(--space-20)) clamp(var(--space-10), 4vw, var(--space-16)); }
  .router { padding-top: 0; }
  .isnt-strip { padding-top: var(--space-8); }

  /* Guided workflows — the principles were a bare two-column grid with no
     structure between the intro and the list. */
  .ux-grid {
    margin-top: var(--space-10);
    padding-top: var(--space-8);
    border-top: 1px solid var(--border);
    gap: var(--space-8) var(--space-10);
  }
  .ux-principle-name { display: flex; gap: var(--space-3); align-items: baseline; }
  .ux-principle { padding-left: 0; }
  .inside .shift-paragraph { font-size: var(--text-lede); line-height: 1.55; color: var(--text); max-width: 52ch; }
}

@layer page {
  /* .fit-caption is 18px under the comparison table, where it is a lede and
     that is right. Inside .triad it is a trailing audience note sitting after
     15px body copy and 13px fine print — an 18px close inverted the ladder. */
  .triad .fit-caption { font-size: var(--text-small); }
}

@layer page {
  /* Setup section: the three stages needed an opening line, and the two
     supporting notes were three loose paragraphs — two of which said the same
     thing — in three different classes. They are a pair of guarantees:
     where the hardware comes from, and what the software is made of. */
  .setup-lede {
    font-size: var(--text-lede);
    line-height: 1.55;
    color: var(--text);
    max-width: 46ch;
    margin: 0 0 var(--space-10);
  }
  .setup-notes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-8);
    margin-top: var(--space-10);
    padding-top: var(--space-8);
    border-top: 1px solid var(--border);
    max-width: 900px;
  }
  .setup-note p:not(.setup-note-label) {
    margin: 0;
    font-size: var(--text-small);
    line-height: 1.65;
    color: var(--text-muted);
  }
  .setup-note .setup-note-label {
    font-family: var(--font-mono);
    font-size: var(--text-meta);
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--accent-link);
    font-weight: 500;
    margin: 0 0 var(--space-3);
  }
}

@layer page {
  /* .shipping-badge sat on var(--glow-strong) — a translucent amber over an
     unknown parent. Amber text on an amber film is a coin-flip for contrast and
     unmeasurable without compositing. Solid tint mixed from the page background
     instead: deterministic, identical in both themes, same appearance. */
  .shipping-badge {
    background: color-mix(in srgb, var(--accent) 12%, var(--bg));
    border-color: color-mix(in srgb, var(--accent) 35%, transparent);
  }
}

@layer page {
  /* Reverted to the even 1fr/1fr split. The 736px right column existed to stop
     a raster capture downscaling; the terminal is markup now, so it reflows and
     the copy gets its half of the row back. */
  .hero-visual img, .terminal-shell img { max-width: 100%; height: auto; }
}

@layer page {
  /* The Auditable Core section wrapped its code block in .opensource-content,
     which carries the reading measure — so a 649px-wide session was squeezed
     into 546px and clipped. Prose keeps the measure; the code block and any
     proof figure break out to the full container. */
  .opensource-content { max-width: none; }
  .opensource-content > :is(p, h2, .section-label) { max-width: var(--measure); }
  .opensource-content .code-block pre { overflow-x: auto; }

  /* The two sessions in the refusal pair are different lengths, so their
     shells ended at different heights inside equal-height grid cells. */
  .proof-pair-grid .proof-item { display: flex; flex-direction: column; }
  .proof-pair-grid .proof-item .tui-shell { flex: 1; display: flex; flex-direction: column; }
  .proof-pair-grid .proof-item .tui-shell .screen { flex: 1; display: flex; flex-direction: column; }
  .proof-pair-grid .proof-item .tui-shell .body { flex: 1; }

  .hero-shot-link { margin: var(--space-3) 0 0; font-size: var(--text-small); }
}

/* ==========================================================================
   Confidence Report downloads. Replaces .report-annotations — four pills that
   named fields of the document, where the document itself can be handed over.
   @layer page: component styling, never chrome.
   ========================================================================== */
@layer page {
  .report-downloads { margin-top: var(--space-8); }
  .report-downloads .report-downloads-lead {
    font-size: var(--text-small);
    line-height: 1.7;
    color: var(--text-muted);
    max-width: var(--measure);
    margin: 0 0 var(--space-4);
    text-wrap: pretty;
  }
  .report-downloads-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .report-downloads-list a {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: var(--text-meta);
    font-weight: 500;
    color: var(--accent-link);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    padding: 9px 16px;
    text-decoration: none;
    transition: border-color var(--transition-fast), color var(--transition-fast);
  }
  .report-downloads-list a:hover { border-color: var(--accent); color: var(--accent-hover); }
}

/* 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; }
}

/* ==========================================================================
   Postulates — the axioms the station is built on
   --------------------------------------------------------------------------
   Mono amber numerals on hairlines: the same device as .workflow-number and
   .arch-node-label, so a list of axioms reads as a specification rather than
   as marketing bullets. The statements sit at --text-body, one step under the
   section lede above them, because a lede introduces and these are introduced.
   ========================================================================== */
@layer page {
  .postulates {
    list-style: none;
    margin: var(--space-10) 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
  }
  .postulate {
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: var(--space-6);
    align-items: baseline;
    padding: var(--space-4) 0;
    border-top: 1px solid var(--border);
    /* @layer reset gives every li inside a section the reading measure. Here the
       li IS the grid — capping it would squeeze the statement to 500px. The
       measure belongs to the statement, which sets it below. */
    max-width: none;
  }
  /* No closing border here. .setup-notes below carries its own border-top, and
     two identical hairlines 40px apart read as an accident rather than as
     structure. Its rule closes the list — with margin-top zeroed so it sits at
     the same 16px rhythm as every rule between the postulates. */
  .opensource .setup-notes { margin-top: 0; }
  .postulate-n {
    font-family: var(--font-mono);
    font-size: var(--text-meta);
    font-weight: 500;
    letter-spacing: 0.06em;
    color: var(--accent-link);
  }
  .postulate p {
    margin: 0;
    max-width: var(--measure);
    font-size: var(--text-body);
    line-height: 1.6;
    color: var(--text);
  }
  @media (max-width: 640px) {
    .postulate { grid-template-columns: 32px 1fr; gap: var(--space-4); }
  }
}