/* ============================================================
   Kanonik design system v2 - editorial + substrate aesthetic.
   Extracted from the home page redesign 2026-05-27.
   Used by index.html. Other pages migrate to this stylesheet in
   subsequent MRs; the old style.css remains for un-migrated pages.
   ============================================================ */

/* ============================================================
   Self-hosted display + mono faces (Fontsource, OFL-1.1).
   Vendored into /fonts/ so the site needs no third-party font
   origin: font-src 'self' in the CSP is sufficient, and no
   visitor IP leaks to Google. Newsreader ships as a single
   variable file per style on the weight axis (200-800). The
   optical-size axis was dropped to halve the font weight
   (279KB -> 123KB) - a deliberate perf trade for this B2B site.
   Latin subset only (the site is English ASCII).
   ============================================================ */
@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("/fonts/newsreader-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Newsreader";
  font-style: italic;
  font-weight: 200 800;
  font-display: swap;
  src: url("/fonts/newsreader-latin-wght-italic.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/jetbrains-mono-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/jetbrains-mono-latin-500-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

    /* ============================================================
       KANONIK HOME  -  Editorial + Substrate aesthetic.
       Self-contained inline CSS; this page does not link style.css.
       Sections: hero (dark) / inversion / how / cost / skills /
       prompt library / auditors+consultants / pricing / substrate /
       about / closer (dark).
       ============================================================ */

    :root {
      --bg:           #FAF7F1;
      --bg-deep:      #F2EDDF;
      --bg-warm:      #EFE9DF;
      --dark-bg:      #0B0B0F;
      --dark-elev:    #15110D;
      --dark-soft:    #1C1813;
      --ink:          #1A1614;
      --ink-soft:     #3D362D;
      --ink-dim:      #6B6055;
      --ink-faint:    #5E574B;  /* was #9A8E7C; darkened for WCAG 2.2 AA on cream (cf ADR-0013) */
      --dark-ink:     #F0EADD;
      --dark-ink-dim: #A89E8B;
      --dark-ink-faint: #8F8576;  /* was #6B6055; lightened for WCAG 2.2 AA on dark (cf ADR-0013) */
      --rule:         #D9D1BF;
      --rule-soft:    #E7DECC;
      --rule-strong:  #C3B79F;
      --dark-rule:    #2C2620;
      --sage:         #446640;
      --sage-light:   #6E8C66;
      --sage-bright:  #87A878;
      --sage-deep:    #2F4F2A;
      --sage-wash:    #E4ECDF;

      --serif:        "Newsreader", Georgia, "Times New Roman", serif;
      --mono:         "JetBrains Mono", ui-monospace, "SF Mono", Monaco, Consolas, monospace;

      --body-col:     640px;
      --margin-col:   210px;
      --gutter:       56px;
      --container:    calc(var(--body-col) + var(--gutter) + var(--margin-col));
    }

    * { box-sizing: border-box; }
    html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; scroll-behavior: smooth; }
    body {
      margin: 0;
      background: var(--bg);
      color: var(--ink);
      font-family: var(--serif);
      font-size: 19px;
      line-height: 1.58;
      font-feature-settings: "kern", "liga", "onum";
      font-variation-settings: "opsz" 16;
      text-rendering: optimizeLegibility;
    }
    a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: var(--rule-strong); transition: color 0.15s, text-decoration-color 0.15s; }
    a:hover { color: var(--sage); text-decoration-color: var(--sage); }
    .dark a { text-decoration-color: var(--dark-rule); }
    .dark a:hover { color: var(--sage-bright); text-decoration-color: var(--sage-bright); }

    /* ============================================================
       NAV
       ============================================================ */
    .nav {
      position: sticky;
      top: 0;
      z-index: 50;
      background: rgba(11, 11, 15, 0.94);
      backdrop-filter: saturate(140%) blur(10px);
      -webkit-backdrop-filter: saturate(140%) blur(10px);
      border-bottom: 1px solid var(--dark-rule);
    }
    .nav-inner {
      position: relative;            /* containing block for the Menu dropdown */
      max-width: var(--container);
      margin: 0 auto;
      padding: 12px 32px;
      display: flex;
      align-items: center;
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }
    .nav-brand {
      color: var(--dark-ink);
      font-family: var(--serif);
      font-size: 24px;
      font-weight: 500;
      letter-spacing: -0.01em;
      font-variation-settings: "opsz" 28;
      text-transform: none;
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      gap: 12px;
    }
    .nav-brand .logo-mark { width: auto; height: 34px; }
    .logo-mark {
      width: auto;
      height: 32px;
      display: block;
      flex-shrink: 0;
    }
    /* Search icon + the Menu disclosure, grouped at the right. */
    .nav-search { color: var(--dark-ink); order: 2; margin-left: auto; }
    .nav-search:hover { color: var(--sage-bright); }
    /* The Menu is a dropdown on ALL widths - one labeled control that lists
       every main page. (The homepage nav used to be in-page scroll anchors,
       so the other pages were not reachable from the header at all.) */
    .nav-menu-toggle {
      order: 3;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      height: 40px;
      margin-left: 8px;
      padding: 0 14px;
      background: transparent;
      border: 1px solid var(--dark-rule);
      border-radius: 2px;
      color: var(--dark-ink);
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      cursor: pointer;
      touch-action: manipulation;
    }
    .nav-menu-toggle:hover { color: var(--sage-bright); border-color: var(--sage-bright); }
    .nav-menu-toggle:focus-visible { color: var(--sage-bright); border-color: var(--sage-bright); outline: none; }
    .nav-menu-label { line-height: 1; }
    .nav-links {
      display: none;
      position: absolute;
      top: calc(100% + 1px);
      right: 0;
      min-width: 248px;
      flex-direction: column;
      gap: 0;
      background: var(--dark-bg);
      border: 1px solid var(--dark-rule);
      box-shadow: 0 18px 44px -12px rgba(0, 0, 0, 0.55);
      padding: 6px 0;
      text-transform: none;
      letter-spacing: 0;
    }
    .nav-links.is-open { display: flex; }
    .nav-links a {
      display: flex;
      align-items: center;
      min-height: 46px;
      padding: 11px 22px;
      font-family: var(--mono);
      font-size: 12px;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--dark-ink);
      text-decoration: none;
      border-bottom: 1px solid var(--dark-rule);
    }
    .nav-links a:last-child { border-bottom: none; color: var(--sage-bright); }
    .nav-links a:hover { color: var(--sage-bright); background: rgba(135, 168, 120, 0.08); }
    @media (max-width: 600px) {
      .nav-inner { padding: 10px 20px; }
      .nav-brand { font-size: 21px; }
      .nav-menu-label { display: none; }   /* icon-only Menu on small phones */
      .nav-menu-toggle { padding: 0 10px; }
      .nav-links { right: 0; left: 0; min-width: 0; }
    }

    /* ============================================================
       LAYOUT PRIMITIVES
       ============================================================ */
    .band {
      padding: 96px 0;
      border-top: 1px solid var(--rule);
    }
    .band.dark {
      background: var(--dark-bg);
      color: var(--dark-ink);
      border-top: none;
    }
    .band.warm { background: var(--bg-warm); }
    .band.paper { background: var(--bg-deep); }
    .band:first-of-type { border-top: none; }

    .inner {
      max-width: var(--container);
      margin: 0 auto;
      padding: 0 32px;
    }
    .block {
      display: grid;
      grid-template-columns: var(--body-col) var(--gutter) var(--margin-col);
      margin-bottom: 48px;
    }
    .block:last-child { margin-bottom: 0; }
    .block > .body { grid-column: 1; }
    .block > .marginalia { grid-column: 3; }
    .block.full > .body { max-width: 100%; grid-column: 1 / -1; }

    /* ============================================================
       TYPOGRAPHY
       ============================================================ */
    .eyebrow {
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--sage);
      margin: 0 0 28px;
      font-weight: 500;
    }
    .dark .eyebrow { color: var(--sage-bright); }
    .eyebrow::before {
      content: "";
      display: inline-block;
      width: 6px;
      height: 6px;
      background: var(--sage);
      margin-right: 14px;
      vertical-align: middle;
      transform: translateY(-2px);
    }
    .dark .eyebrow::before { background: var(--sage-bright); }

    .body h2 {
      font-family: var(--serif);
      font-size: clamp(36px, 4.8vw, 56px);
      line-height: 1.06;
      letter-spacing: -0.02em;
      margin: 0 0 28px;
      font-weight: 400;
      font-variation-settings: "opsz" 48;
      color: var(--ink);
    }
    .dark .body h2 { color: var(--dark-ink); }
    .body h2 .sage { color: var(--sage); display: block; }
    .dark .body h2 .sage { color: var(--sage-bright); }

    .body p {
      margin: 0 0 20px;
      max-width: var(--body-col);
    }
    .body p:last-child { margin-bottom: 0; }
    .body p strong { font-weight: 500; color: var(--ink); }
    .dark .body p { color: var(--dark-ink); }
    .dark .body p strong { color: var(--dark-ink); }
.marginalia {
      font-family: var(--mono);
      font-size: 11px;
      line-height: 1.7;
      color: var(--ink-faint);
      letter-spacing: 0.01em;
      padding-top: 6px;
    }
    .dark .marginalia { color: var(--dark-ink-faint); }
    .marginalia ul { list-style: none; margin: 0; padding: 0; }
    .marginalia li { margin-bottom: 6px; }
    .marginalia li::before { content: "// "; color: var(--rule-strong); }
    .dark .marginalia li::before { color: var(--dark-rule); }
    .marginalia .m-label {
      color: var(--ink-dim);
      text-transform: uppercase;
      letter-spacing: 0.1em;
      font-size: 10px;
      margin: 14px 0 4px;
    }
    .dark .marginalia .m-label { color: var(--dark-ink-dim); }
    .marginalia .m-label:first-child { margin-top: 0; }

    /* ============================================================
       HERO (dark band)
       ============================================================ */
    .hero {
      padding: 96px 0 72px;
    }
    .hero .body h1 {
      font-family: var(--serif);
      font-size: clamp(42px, 5.4vw, 72px);
      line-height: 1.06;
      letter-spacing: -0.02em;
      margin: 0 0 28px;
      font-weight: 400;
      font-variation-settings: "opsz" 56;
      max-width: 820px;
    }
    .hero .body h1 .sage {
      color: var(--sage-bright);
      display: block;
    }
    .hero .body .hero-sub {
      font-size: 22px;
      line-height: 1.5;
      color: var(--dark-ink);
      font-variation-settings: "opsz" 22;
      margin-bottom: 24px;
      max-width: 640px;
    }
    .hero-cta-row {
      display: flex;
      gap: 12px;
      margin-top: 40px;
      flex-wrap: wrap;
    }

    /* Hero marginalia: small supporting statement that breaks the pure text column
       and gives the dark hero visual breathing room and asymmetry. */
    .hero-marginalia {
      margin-top: 28px;
      padding-top: 24px;
      border-top: 1px solid var(--dark-rule);
      font-size: 15px;
      line-height: 1.45;
      color: var(--dark-ink-dim);
    }
    .hero-marginalia .m-label {
      font-size: 10px;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--sage-bright);
      margin-bottom: 8px;
    }
    .btn {
      font-family: var(--mono);
      font-size: 12px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      padding: 14px 22px;
      text-decoration: none;
      border: 1px solid;
      transition: all 0.18s;
      display: inline-block;
    }
    .btn-primary {
      background: var(--sage-bright);
      color: var(--dark-bg);
      border-color: var(--sage-bright);
    }
    .btn-primary:hover { background: transparent; color: var(--sage-bright); text-decoration: none; }
    .btn-ghost {
      background: transparent;
      color: var(--dark-ink);
      border-color: var(--dark-rule);
    }
    .btn-ghost:hover { border-color: var(--sage-bright); color: var(--sage-bright); text-decoration: none; }
    .btn-light-primary {
      background: var(--sage);
      color: var(--bg);
      border-color: var(--sage);
    }
    .btn-light-primary:hover { background: transparent; color: var(--sage); text-decoration: none; }
    .btn-light-ghost {
      background: transparent;
      color: var(--ink);
      border-color: var(--rule-strong);
    }
    .btn-light-ghost:hover { border-color: var(--sage); color: var(--sage); text-decoration: none; }

    /* ============================================================
       AUDIT-SCREEN MOCKUP (hero visual)
       Live audit log view inside the dark hero band. Four chained
       use cases (policy, control assessment, audit narrative,
       vendor risk) with skill version pins, Verifier verdicts,
       approvers, and hash links. Page-load staggered reveal.
       ============================================================ */
    .audit-screen {
      max-width: 1040px;
      margin: 48px auto 0;
      background: var(--dark-elev);
      border: 1px solid var(--dark-rule);
      border-radius: 6px;
      overflow: hidden;
      box-shadow: 0 24px 60px -16px rgba(0, 0, 0, 0.55), 0 8px 20px -8px rgba(0, 0, 0, 0.4);
    }
    .audit-screen-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 12px 18px;
      background: var(--dark-bg);
      border-bottom: 1px solid var(--dark-rule);
      font-family: var(--mono);
      font-size: 10.5px;
      color: var(--dark-ink-faint);
      letter-spacing: 0.04em;
    }
    .audit-screen-dots {
      display: flex;
      gap: 6px;
    }
    .audit-screen-dots span {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: var(--dark-rule);
    }
    .audit-screen-label {
      flex: 1;
      text-align: center;
      letter-spacing: 0.08em;
    }
    .audit-screen-status {
      display: flex;
      align-items: center;
      gap: 7px;
      color: var(--sage-bright);
      letter-spacing: 0.1em;
      text-transform: uppercase;
    }
    .audit-status-dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--sage-bright);
      box-shadow: 0 0 8px var(--sage-bright);
      animation: audit-pulse 2.2s ease-in-out infinite;
    }
    @keyframes audit-pulse {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.35; }
    }
    .audit-screen-body {
      padding: 8px 0 4px;
    }
    .audit-row {
      display: grid;
      grid-template-columns: 76px 1fr 90px;
      gap: 20px;
      padding: 18px 24px;
      border-bottom: 1px solid var(--dark-rule);
      transition: background 0.18s;
      animation: audit-row-in 0.6s cubic-bezier(0.2, 0.7, 0.3, 1) backwards;
    }
    .audit-row:last-child { border-bottom: none; }
    .audit-row:hover { background: rgba(135, 168, 120, 0.04); }
    .audit-row:nth-of-type(1) { animation-delay: 0.6s; }
    .audit-row:nth-of-type(2) { animation-delay: 0.75s; }
    .audit-row:nth-of-type(3) { animation-delay: 0.9s; }
    .audit-row:nth-of-type(4) { animation-delay: 1.05s; }
    /* Audit-row reveal animates transform only - never opacity (axe-core reads
       alpha-blended fg as contrast violation against dark substrate). */
    @keyframes audit-row-in {
      from { transform: translateY(-4px); }
      to { transform: translateY(0); }
    }
    @media (prefers-reduced-motion: reduce) {
      .audit-row { animation: none; }
    }
    .audit-row.is-new {
      background: linear-gradient(to right, rgba(135, 168, 120, 0.10), transparent 60%);
      border-left: 2px solid var(--sage-bright);
      padding-left: 22px;
    }
    .audit-time {
      font-family: var(--mono);
      font-size: 11px;
      color: var(--dark-ink-faint);
      letter-spacing: 0.04em;
      padding-top: 2px;
    }
    .audit-content {
      display: flex;
      flex-direction: column;
      gap: 8px;
      min-width: 0;
    }
    .audit-action {
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--sage-bright);
      font-weight: 500;
    }
    .audit-action.proposed { color: var(--sage-bright); }
    .audit-action.assessed { color: #C5D8B6; }
    .audit-action.narrated { color: var(--sage-bright); }
    .audit-action.committed { color: #7BC4A8; }
    .audit-detail {
      font-family: var(--serif);
      font-size: 16px;
      line-height: 1.4;
      color: var(--dark-ink);
      font-variation-settings: "opsz" 16;
    }
    .audit-detail strong {
      font-weight: 500;
      color: #FFFFFF;
    }
    .audit-detail code {
      font-family: var(--mono);
      font-size: 13px;
      color: var(--sage-bright);
      background: rgba(135, 168, 120, 0.10);
      padding: 1px 6px;
      border-radius: 3px;
    }
    .audit-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 4px 18px;
      font-family: var(--mono);
      font-size: 10.5px;
      color: var(--dark-ink-faint);
      letter-spacing: 0.02em;
    }
    .audit-meta .ok { color: var(--sage-bright); }
    .audit-meta .arrow { color: var(--dark-rule); }
    .audit-hash {
      font-family: var(--mono);
      font-size: 11px;
      color: var(--sage-bright);
      text-align: right;
      padding-top: 2px;
      letter-spacing: 0.02em;
      position: relative;
    }
    .audit-hash::before {
      content: "";
      position: absolute;
      left: -10px;
      top: -22px;
      width: 1px;
      height: 22px;
      background: linear-gradient(to bottom, transparent, var(--sage-bright));
      opacity: 0.4;
    }
    .audit-row:first-of-type .audit-hash::before { display: none; }
    .audit-screen-footer {
      display: flex;
      justify-content: space-between;
      padding: 14px 24px;
      background: var(--dark-bg);
      border-top: 1px solid var(--dark-rule);
      font-family: var(--mono);
      font-size: 10.5px;
      letter-spacing: 0.06em;
      color: var(--dark-ink-faint);
    }
    .audit-screen-footer .footer-chain { color: var(--sage-bright); }
    @media (max-width: 760px) {
      .audit-screen { margin-top: 48px; }
      .audit-row {
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 18px 16px;
      }
      .audit-row.is-new { padding-left: 14px; }
      .audit-hash { text-align: left; padding-top: 0; }
      .audit-hash::before { display: none; }
      .audit-screen-footer { flex-direction: column; gap: 6px; }
      .audit-screen-label { display: none; }
    }

    /* ============================================================
       INVERSION CALLOUT
       ============================================================ */
    .inversion-callout {
      border-top: 1px solid var(--rule);
      border-bottom: 1px solid var(--rule);
      padding: 60px 0;
    }
    .inversion-callout .body p {
      font-size: 22px;
      line-height: 1.55;
      font-variation-settings: "opsz" 20;
      max-width: 720px;
    }
    .inversion-callout .body p:last-of-type {
      font-size: 26px;
      line-height: 1.4;
      font-variation-settings: "opsz" 28;
      color: var(--ink);
      margin-top: 24px;
    }
    .inversion-callout .body p:last-of-type strong {
      font-weight: 500;
    }
/* ============================================================
       HOW IT WORKS  -  3-step grid
       ============================================================ */
    .how-steps {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 32px;
      margin-top: 48px;
    }
    .how-step {
      padding: 28px 0 0;
      border-top: 2px solid var(--sage);
    }
    .how-step-num {
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: 0.14em;
      color: var(--sage);
      margin-bottom: 12px;
    }
    .how-step-name {
      font-family: var(--serif);
      font-size: 24px;
      line-height: 1.2;
      font-variation-settings: "opsz" 24;
      color: var(--ink);
      margin-bottom: 12px;
    }
    .how-step-text {
      font-size: 16px;
      line-height: 1.55;
      color: var(--ink-soft);
    }
    @media (max-width: 760px) {
      .how-steps { grid-template-columns: 1fr; gap: 24px; }
    }

    /* ============================================================
       COST STACK
       ============================================================ */
    .cost-stack-inner {
      max-width: 760px;
      margin: 0 auto;
    }
    .cost-stack-chart {
      display: grid;
      grid-template-columns: 1fr 80px 1fr;
      gap: 0;
      align-items: end;
      margin: 48px 0 0;
    }
    .cost-stack-col {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .cost-stack-col-label {
      font-family: var(--mono);
      font-size: 13px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--ink-dim);
      margin-bottom: 18px;
      font-weight: 500;
    }
    .cost-stack-bars {
      display: flex;
      flex-direction: column-reverse;
      width: 200px;
      height: 360px;
      gap: 1px;
    }
    .cost-stack-bar {
      height: var(--h);
      background: var(--bg-deep);
      border: 1px solid var(--rule-strong);
      padding: 10px 14px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      min-height: 0;
      overflow: hidden;
    }
    .cost-stack-col.old .cost-stack-bar:nth-child(1) { background: #ECE2CB; }
    .cost-stack-col.old .cost-stack-bar:nth-child(2) { background: #E1D4B2; }
    .cost-stack-col.old .cost-stack-bar:nth-child(3) { background: #D6C599; }
    .cost-stack-bar.kn {
      background: var(--sage);
      border-color: var(--sage-deep);
      min-height: 88px;
      padding: 14px 18px;
    }
    .cost-stack-bar-amount {
      font-family: var(--serif);
      font-size: 22px;
      font-variation-settings: "opsz" 28;
      line-height: 1;
      color: var(--ink);
      font-weight: 500;
    }
    .cost-stack-bar-name {
      font-family: var(--mono);
      font-size: 12.5px;
      color: var(--ink-soft);
      margin-top: 6px;
      line-height: 1.35;
    }
    .cost-stack-bar.kn .cost-stack-bar-amount,
    .cost-stack-bar.kn .cost-stack-bar-name { color: #F0EADD; }
    .cost-stack-col-total {
      font-family: var(--mono);
      font-size: 14px;
      letter-spacing: 0.04em;
      color: var(--ink-soft);
      margin-top: 20px;
      font-weight: 500;
    }
    .cost-stack-col.new .cost-stack-col-total { color: var(--sage); font-weight: 500; }
    .cost-stack-divider {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 360px;
      padding-bottom: 100px;
      font-family: var(--serif);
      font-size: 24px;
      color: var(--ink-faint);
      font-variation-settings: "opsz" 24;
    }
    .cost-stack-savings { text-align: center; margin-top: 56px; }
    .cost-stack-savings-amount {
      display: block;
      font-family: var(--serif);
      font-size: clamp(56px, 8vw, 96px);
      font-variation-settings: "opsz" 72;
      line-height: 1;
      letter-spacing: -0.022em;
      color: var(--sage);
      font-weight: 400;
    }
    .cost-stack-savings-label {
      display: block;
      font-family: var(--mono);
      font-size: 13.5px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--ink-dim);
      margin-top: 20px;
      font-weight: 500;
    }
    .cost-stack-footnote {
      font-family: var(--mono);
      font-size: 12px;
      color: var(--ink-faint);
      text-align: center;
      margin-top: 40px;
    }
    @media (max-width: 760px) {
      .cost-stack-chart { grid-template-columns: 1fr; row-gap: 36px; max-width: 280px; margin-left: auto; margin-right: auto; }
      .cost-stack-divider { display: none; }
    }

    /* ============================================================
       SKILL CARDS
       ============================================================ */
    .skills-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 24px;
      margin-top: 48px;
    }
    .skill-card {
      border: 1px solid var(--rule);
      padding: 28px 28px 32px;
      background: var(--bg);
      transition: border-color 0.15s, transform 0.15s;
    }
    .skill-card:hover { border-color: var(--sage); transform: translateY(-2px); }
    .skill-card-tag {
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--sage);
      margin-bottom: 12px;
    }
    .skill-card-name {
      font-family: var(--serif);
      font-size: 26px;
      line-height: 1.15;
      font-variation-settings: "opsz" 28;
      color: var(--ink);
      margin-bottom: 14px;
      font-weight: 400;
    }
    .skill-card-name code {
      font-family: var(--mono);
      font-size: 15px;
      color: var(--sage);
      background: var(--sage-wash);
      padding: 2px 6px;
      display: inline-block;
      margin-top: 6px;
      letter-spacing: -0.02em;
    }
    .skill-card-text {
      font-size: 16px;
      line-height: 1.55;
      color: var(--ink-soft);
      margin-bottom: 14px;
    }
    .skill-card-replaces {
      font-family: var(--mono);
      font-size: 10.5px;
      color: var(--ink-faint);
      letter-spacing: 0.04em;
      padding-top: 14px;
      border-top: 1px solid var(--rule-soft);
    }
    .skill-card-replaces strong { color: var(--sage); font-weight: 500; }
    @media (max-width: 760px) { .skills-grid { grid-template-columns: 1fr; } }

    /* ============================================================
       FOR-AUDITORS / FOR-CONSULTANTS  -  two-column block
       ============================================================ */
    .pair-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 56px;
      margin-top: 32px;
    }
    .pair-col h3 {
      font-family: var(--serif);
      font-size: 28px;
      line-height: 1.18;
      font-variation-settings: "opsz" 28;
      color: var(--ink);
      margin: 0 0 18px;
      font-weight: 400;
    }
    .pair-col h3 .sage { color: var(--sage); display: block; }
    .pair-col p {
      font-size: 17px;
      line-height: 1.55;
      color: var(--ink-soft);
      margin: 0 0 14px;
    }
    .pair-col .pair-tag {
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--sage);
      margin-bottom: 14px;
      display: block;
    }
    @media (max-width: 760px) { .pair-grid { grid-template-columns: 1fr; gap: 40px; } }

    /* ============================================================
       PRICING
       ============================================================ */
    .pricing-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
      margin-top: 48px;
    }
    .pricing-enterprise {
      margin-top: 16px;
      padding: 28px 36px;
      background: var(--bg);
      border: 1px solid var(--rule);
      border-top: 2px solid var(--sage);
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 32px;
      align-items: center;
    }
    .pricing-enterprise-tier {
      font-family: var(--mono);
      font-size: 10.5px;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--sage);
      margin-bottom: 6px;
    }
    .pricing-enterprise-name {
      font-family: var(--serif);
      font-size: 26px;
      line-height: 1.15;
      font-variation-settings: "opsz" 26;
      color: var(--ink);
      font-weight: 500;
      letter-spacing: -0.01em;
      margin-bottom: 10px;
    }
    .pricing-enterprise-desc {
      font-family: var(--serif);
      font-size: 15px;
      line-height: 1.5;
      color: var(--ink-soft);
      max-width: 580px;
      font-variation-settings: "opsz" 16;
    }
    .pricing-enterprise-cta {
      font-family: var(--mono);
      font-size: 12px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      padding: 14px 22px;
      background: var(--sage);
      color: var(--bg);
      border: 1px solid var(--sage);
      text-decoration: none;
      transition: all 0.18s;
      white-space: nowrap;
    }
    .pricing-enterprise-cta:hover {
      background: transparent;
      color: var(--sage);
      text-decoration: none;
    }
    @media (max-width: 760px) {
      .pricing-enterprise {
        grid-template-columns: 1fr;
        padding: 24px;
      }
    }
    .price-card {
      border: 1px solid var(--rule);
      padding: 28px 24px 32px;
      background: var(--bg);
      transition: border-color 0.15s, transform 0.15s;
    }
    .price-card:hover { border-color: var(--sage); transform: translateY(-2px); }
    .price-card.feature {
      border-color: var(--sage);
      background: var(--sage-wash);
    }
    .price-card-flag { display: none; }
    .price-card-tier {
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--sage);
      margin-bottom: 18px;
    }
    .price-card-amount {
      font-family: var(--serif);
      font-size: 38px;
      line-height: 1;
      letter-spacing: -0.02em;
      color: var(--ink);
      font-variation-settings: "opsz" 36;
      margin-bottom: 4px;
    }
    .price-card-period {
      font-family: var(--mono);
      font-size: 10.5px;
      color: var(--ink-dim);
      letter-spacing: 0.06em;
      margin-bottom: 24px;
    }
    .price-card-for {
      font-family: var(--serif);
      font-size: 14.5px;
      line-height: 1.45;
      color: var(--ink-dim);
      margin: 0 0 22px;
      font-variation-settings: "opsz" 16;
      min-height: 42px;
    }
    .price-card-seats {
      padding: 16px 0;
      border-top: 1px solid var(--rule);
      border-bottom: 1px solid var(--rule);
      margin-bottom: 18px;
    }
    .price-card-seats-num {
      font-family: var(--serif);
      font-size: 28px;
      line-height: 1;
      color: var(--sage);
      font-variation-settings: "opsz" 28;
      font-weight: 500;
      letter-spacing: -0.01em;
      display: block;
      margin-bottom: 4px;
    }
    .price-card-seats-text {
      font-family: var(--mono);
      font-size: 10.5px;
      line-height: 1.45;
      color: var(--ink-dim);
      letter-spacing: 0.02em;
    }
    .price-card-list {
      list-style: none;
      margin: 0 0 22px;
      padding: 0;
      font-size: 14px;
      line-height: 1.55;
      color: var(--ink-soft);
    }
    .price-card-list li { padding: 6px 0; border-top: 1px solid var(--rule-soft); }
    .price-card-list li:first-child { border-top: none; padding-top: 0; }
    .price-card-auditor {
      font-family: var(--mono);
      font-size: 10.5px;
      letter-spacing: 0.04em;
      color: var(--sage);
      margin: 0;
      padding: 12px 14px;
      background: var(--sage-wash);
      border-radius: 4px;
      line-height: 1.4;
    }
    .price-card-auditor::before {
      content: "+";
      color: var(--sage);
      font-weight: 500;
      margin-right: 6px;
    }
    .price-card.feature .price-card-auditor {
      background: rgba(135, 168, 120, 0.18);
    }
    .pricing-fineprint {
      margin-top: 56px;
      padding: 32px 36px;
      background: var(--bg-deep);
      border: 1px solid var(--rule);
      border-radius: 4px;
      display: grid;
      grid-template-columns: 180px 1fr;
      gap: 32px;
      align-items: start;
    }
    .pricing-fineprint-label {
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--sage);
    }
    .pricing-fineprint-list {
      list-style: none;
      margin: 0;
      padding: 0;
      display: grid;
      grid-template-columns: 1fr 1fr;
      column-gap: 32px;
      row-gap: 10px;
      font-family: var(--serif);
      font-size: 15px;
      line-height: 1.45;
      color: var(--ink-soft);
      font-variation-settings: "opsz" 16;
    }
    .pricing-fineprint-list li {
      padding-left: 16px;
      position: relative;
    }
    .pricing-fineprint-list li::before {
      content: "no";
      position: absolute;
      left: 0;
      top: 2px;
      font-family: var(--mono);
      font-size: 9.5px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--sage);
    }
    .pricing-fineprint-list li.yes::before {
      content: "yes";
    }
    .pricing-fineprint-list li {
      padding-left: 38px;
    }
    @media (max-width: 880px) {
      .pricing-grid { grid-template-columns: repeat(2, 1fr); }
      .pricing-fineprint { grid-template-columns: 1fr; }
      .pricing-fineprint-list { grid-template-columns: 1fr; }
    }
    @media (max-width: 600px) {
      .pricing-grid { grid-template-columns: 1fr; }
      /* On phones the cards stack low-to-high (Solo, Team, Business). The
         recommended (Team) card keeps a stronger frame + a "Recommended"
         label so the middle-position signal survives the vertical stack. */
      .price-card.feature {
        border-width: 2px;
        box-shadow: 0 12px 28px -10px rgba(68, 102, 64, 0.35);
      }
      .price-card.feature .price-card-flag {
        display: inline-block;
        margin-bottom: 12px;
        font-family: var(--mono);
        font-size: 10px;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        color: var(--sage);
      }
    }

    /* ============================================================
       PHASE TIMELINE
       ============================================================ */
/* ============================================================
       SUBSTRATE CROSS-SECTION
       ============================================================ */
    .substrate-grid {
      display: grid;
      grid-template-columns: 340px 1fr;
      column-gap: 48px;
      max-width: 760px;
      margin: 48px auto 0;
      align-items: start;
    }
    .substrate-stack {
      display: flex;
      flex-direction: column;
    }
    .substrate-layer {
      border: 1px solid var(--rule-strong);
      background: var(--bg);
      padding: 16px 18px;
      border-bottom: none;
    }
    .substrate-layer:last-child { border-bottom: 1px solid var(--rule-strong); }
    .substrate-layer.dim {
      background: var(--bg-deep);
      color: var(--ink-dim);
      border-style: dashed;
    }
    .substrate-layer.sage {
      background: var(--sage-wash);
      border-color: var(--sage-light);
      border-bottom: 1px solid var(--sage-light);
    }
    .substrate-layer-tag {
      font-family: var(--mono);
      font-size: 9.5px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--ink-faint);
      margin-bottom: 4px;
    }
    .substrate-layer.sage .substrate-layer-tag { color: var(--sage); }
    .substrate-layer-name {
      font-family: var(--serif);
      font-size: 17px;
      font-variation-settings: "opsz" 18;
      color: var(--ink);
      font-weight: 500;
    }
    .substrate-layer.dim .substrate-layer-name { color: var(--ink-dim); font-weight: 400; }
    .substrate-annotations {
      font-family: var(--mono);
      font-size: 11px;
      line-height: 1.7;
      color: var(--ink-faint);
    }
    .substrate-annotations .a-block {
      margin-bottom: 14px;
      padding-left: 12px;
      border-left: 1px solid var(--rule);
    }
    .substrate-annotations .a-label { color: var(--sage); font-weight: 500; }
    .substrate-annotations .a-text { color: var(--ink-dim); }
    @media (max-width: 760px) { .substrate-grid { grid-template-columns: 1fr; row-gap: 28px; } }
    @media (max-width: 760px) {
      /* When the grid collapses the annotations detach from the layer
         diagram. Reframe them as one grouped, captioned note card sitting
         under the stack instead of four loose mono fragments. */
      .substrate-annotations {
        margin-top: 4px;
        padding: 18px 18px 6px;
        background: var(--bg-deep);
        border: 1px solid var(--rule);
        border-radius: 4px;
      }
      .substrate-annotations::before {
        content: "Layer notes";
        display: block;
        font-family: var(--mono);
        font-size: 9.5px;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--ink-dim);
        margin-bottom: 14px;
      }
      .substrate-annotations .a-block {
        margin-bottom: 14px;
        padding-left: 12px;
        border-left: 2px solid var(--sage-light);
      }
      .substrate-annotations .a-block:last-child { margin-bottom: 0; }
    }

    /* ============================================================
       PROMPT LIBRARY (mock product UI)
       Window-chrome + category tabs + clickable tile grid.
       Shows how a customer would select a premade prompt that
       invokes the matching Kanonik skill on their LLM.
       ============================================================ */
    .prompt-lib {
      background: var(--bg);
      border: 1px solid var(--rule);
      border-radius: 6px;
      overflow: hidden;
      box-shadow: 0 24px 60px -20px rgba(70, 50, 30, 0.22), 0 8px 20px -8px rgba(70, 50, 30, 0.12);
      margin-top: 56px;
      max-width: 1040px;
      margin-left: auto;
      margin-right: auto;
    }
    .prompt-lib-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 12px 18px;
      background: var(--bg-deep);
      border-bottom: 1px solid var(--rule);
      font-family: var(--mono);
      font-size: 10.5px;
      color: var(--ink-dim);
      letter-spacing: 0.04em;
    }
    .prompt-lib-dots {
      display: flex;
      gap: 6px;
    }
    .prompt-lib-dots span {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: var(--rule-strong);
    }
    .prompt-lib-label {
      flex: 1;
      text-align: center;
      letter-spacing: 0.08em;
    }
    .prompt-lib-status {
      display: flex;
      align-items: center;
      gap: 7px;
      color: var(--sage);
      letter-spacing: 0.1em;
      text-transform: uppercase;
    }
    .prompt-lib-status::before {
      content: "";
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--sage);
      box-shadow: 0 0 6px var(--sage);
    }
    .prompt-lib-tabs {
      display: flex;
      gap: 0;
      padding: 4px 12px 0;
      background: var(--bg);
      border-bottom: 1px solid var(--rule-soft);
      overflow-x: auto;
    }
    .prompt-lib-tab {
      font-family: var(--mono);
      font-size: 10.5px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--ink-dim);
      padding: 12px 14px 14px;
      border: none;
      background: transparent;
      cursor: default;
      border-bottom: 2px solid transparent;
      white-space: nowrap;
      transition: color 0.18s, border-color 0.18s;
    }
    .prompt-lib-tab:hover { color: var(--ink); }
    .prompt-lib-tab.active {
      color: var(--sage);
      border-bottom-color: var(--sage);
    }
    .prompt-lib-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 1px;
      background: var(--rule-soft);
    }
    .prompt-tile {
      background: var(--bg);
      padding: 22px 22px 20px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      cursor: pointer;
      transition: background 0.18s, transform 0.18s;
      min-height: 230px;
      position: relative;
    }
    .prompt-tile:hover {
      background: var(--bg-deep);
    }
    .prompt-tile:hover .prompt-tile-send {
      opacity: 1;
      transform: translateX(0);
    }
    .prompt-tile.selected {
      background: var(--sage-wash);
      box-shadow: inset 0 0 0 1px var(--sage);
    }
    .prompt-tile.selected .prompt-tile-send {
      opacity: 1;
      transform: translateX(0);
    }
    .prompt-tile-tag {
      font-family: var(--mono);
      font-size: 9.5px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--sage);
    }
    .prompt-tile-text {
      font-family: var(--serif);
      font-size: 16px;
      line-height: 1.42;
      color: var(--ink);
      flex: 1;
      font-variation-settings: "opsz" 16;
    }
    .prompt-tile-text .qmark {
      color: var(--sage);
      font-weight: 500;
    }
    .prompt-tile-meta {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-family: var(--mono);
      font-size: 10.5px;
      color: var(--ink-faint);
      padding-top: 12px;
      border-top: 1px solid var(--rule-soft);
    }
    .prompt-tile-skill {
      color: var(--sage);
      font-weight: 500;
      letter-spacing: 0.01em;
    }
.prompt-tile-send {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      color: var(--sage);
      font-weight: 500;
      opacity: 0;
      transform: translateX(-4px);
      transition: opacity 0.18s, transform 0.18s;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      font-size: 9.5px;
    }
    .prompt-tile-send svg { display: block; }
    .prompt-tile.selected .selected-pill {
      position: absolute;
      top: 14px;
      right: 14px;
      font-family: var(--mono);
      font-size: 9px;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--sage);
      background: var(--bg);
      padding: 3px 8px;
      border-radius: 3px;
      border: 1px solid var(--sage);
    }
    .prompt-tile.more {
      background: transparent;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      cursor: pointer;
    }
    .prompt-tile.more:hover {
      background: var(--sage-wash);
    }
    .prompt-tile.more-inner {
      display: block;
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--ink-dim);
    }
    .prompt-tile.more .more-icon {
      font-family: var(--serif);
      font-size: 36px;
      color: var(--sage);
      display: block;
      margin-bottom: 8px;
      line-height: 1;
      font-weight: 400;
    }
    .prompt-tile.more:hover .more-inner { color: var(--sage); }
    .prompt-lib-footer {
      padding: 14px 20px;
      background: var(--bg-deep);
      border-top: 1px solid var(--rule);
      font-family: var(--mono);
      font-size: 10.5px;
      color: var(--ink-faint);
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 12px;
      letter-spacing: 0.02em;
    }
    .prompt-lib-footer-note { color: var(--ink-dim); }
    .prompt-lib-savings-num {
      font-family: var(--serif);
      font-size: 16px;
      color: var(--sage);
      font-weight: 500;
      letter-spacing: -0.01em;
      font-variation-settings: "opsz" 16;
    }
    @media (max-width: 1000px) {
      .prompt-lib-grid { grid-template-columns: repeat(2, 1fr); }
      .prompt-tile { min-height: 200px; }
    }
    @media (max-width: 520px) {
      .prompt-lib-grid { grid-template-columns: 1fr; }
      .prompt-lib-tabs { padding: 4px 6px 0; }
      .prompt-lib-tab { padding: 12px 10px 14px; font-size: 10px; }
    }

    /* ============================================================
       FAQ-style ABOUT
       ============================================================ */
    .about-quote {
      border-left: 2px solid var(--sage);
      padding: 8px 0 8px 28px;
      max-width: 720px;
      font-family: var(--serif);
      font-size: 24px;
      line-height: 1.4;
      color: var(--ink);
      font-variation-settings: "opsz" 22;
      margin: 24px 0 24px;
    }
    .about-quote-attr {
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: 0.06em;
      color: var(--ink-dim);
      margin-top: 12px;
    }

    /* ============================================================
       CLOSER
       ============================================================ */
    .closer-band {
      padding: 140px 0 120px;
      text-align: center;
      background: var(--bg);
      border-top: 1px solid var(--rule);
    }
    .closer-mark {
      width: auto;
      height: 42px;
      display: block;
      margin: 0 auto 40px;
      opacity: 0.85;
    }
    .closer-prelude {
      max-width: 580px;
      margin: 0 auto 56px;
      color: var(--ink-soft);
      font-size: 19px;
      line-height: 1.58;
    }
    .closer-line {
      font-family: var(--serif);
      font-size: clamp(48px, 7vw, 88px);
      line-height: 1.04;
      letter-spacing: -0.02em;
      color: var(--sage);
      font-weight: 400;
      font-variation-settings: "opsz" 72;
      margin: 0 0 56px;
    }
    .closer-cta {
      display: inline-flex;
      gap: 12px;
      flex-wrap: wrap;
      justify-content: center;
    }

    /* ============================================================
       FOOTER
       ============================================================ */
    .footer {
      background: var(--dark-bg);
      color: var(--dark-ink-dim);
      padding: 56px 0 40px;
    }
    .footer-inner {
      max-width: var(--container);
      margin: 0 auto;
      padding: 0 32px;
      display: grid;
      grid-template-columns: 2fr 1fr 1fr 1fr;
      gap: 40px;
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: 0.04em;
    }
    .footer-brand-line {
      display: inline-flex;
      align-items: center;
      gap: 12px;
    }
    .footer-brand-line .logo-mark--footer {
      height: 32px;
      width: auto;
      display: block;
    }
    .footer-brand strong {
      color: var(--dark-ink);
      font-weight: 500;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      font-size: 14px;
    }
    .footer-brand p {
      margin: 14px 0 0;
      max-width: 320px;
      line-height: 1.5;
    }
    .footer h4 {
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--dark-ink);
      margin: 0 0 12px;
      font-weight: 500;
    }
    .footer ul { list-style: none; margin: 0; padding: 0; }
    .footer li { margin-bottom: 6px; }
    .footer a { color: var(--dark-ink-dim); text-decoration: none; }
    .footer a:hover { color: var(--sage-bright); }
    .footer-bottom {
      max-width: var(--container);
      margin: 40px auto 0;
      padding: 24px 32px 0;
      border-top: 1px solid var(--dark-rule);
      display: flex;
      justify-content: space-between;
      font-family: var(--mono);
      font-size: 10.5px;
      letter-spacing: 0.06em;
      color: var(--dark-ink-faint);
    }
    @media (max-width: 760px) {
      .footer-inner { grid-template-columns: 1fr 1fr; }
      .footer-brand { grid-column: 1 / -1; }
    }

    /* ============================================================
       RESPONSIVE COLLAPSE OF MARGINALIA
       ============================================================ */
    @media (max-width: 880px) {
      :root { --body-col: 100%; --margin-col: 100%; --gutter: 0; }
      .block { grid-template-columns: 1fr; row-gap: 20px; }
      /* Reset the desktop grid-column placement (body col 1, marginalia col 3)
         so both flow into the single column and STACK. Without this the
         marginalia stays pinned to column 3, forcing an implicit 3rd column
         beside the body - the "two columns on mobile" bug. */
      .block > .body,
      .block > .marginalia { grid-column: 1; }
      .block > .marginalia {
        padding: 14px 0 0 14px;
        border-left: 2px solid var(--sage-wash);
      }
      .dark .block > .marginalia { border-left-color: var(--dark-rule); }

      .hero-marginalia {
        margin-top: 20px;
        padding-top: 20px;
        border-top: 1px solid var(--dark-rule);
        border-left: none;
        padding-left: 0;
      }
      .band { padding: 72px 0; }
      .hero { padding: 96px 0 80px; }
      .closer-band { padding: 100px 0 80px; }
    }
    @media (max-width: 480px) {
      body { font-size: 17px; }
    }

    /* ============================================================
       PAGE-LOAD STAGGERED REVEAL
       ============================================================ */
    /* Band reveal animates transform only - never opacity. The interior
       editorial pages have small mono text (eyebrow, m-label, price-card-*)
       in sage / --ink-dim that axe-core reads as alpha-blended during the
       animation window, producing false WCAG color-contrast violations. */
    @keyframes reveal {
      from { transform: translateY(10px); }
      to   { transform: translateY(0); }
    }
    .band {
      animation: reveal 0.6s cubic-bezier(0.2, 0.7, 0.3, 1) backwards;
    }
    .band:nth-of-type(1) { animation-delay: 0.05s; }
    .band:nth-of-type(2) { animation-delay: 0.12s; }
    .band:nth-of-type(3) { animation-delay: 0.19s; }
    @media (prefers-reduced-motion: reduce) {
      .band { animation: none; }
    }

/* ============================================================
   PARTNER-PAGE PATTERNS
   Added to support the editorial body redesigns of for-auditors,
   for-consultants, about, compliance-roadmap, waitlist.
   ============================================================ */
.how-steps--four {
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 900px) {
  .how-steps--four { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .how-steps--four { grid-template-columns: 1fr; }
}

/* Bundle list - filename + description list (used by for-auditors) */
.bundle-list {
  margin: 32px 0 0;
  padding: 0;
}
.bundle-list dt {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: -0.01em;
  color: var(--sage);
  margin-top: 18px;
  font-weight: 500;
}
.bundle-list dt:first-child { margin-top: 0; }
.bundle-list dd {
  margin: 4px 0 0;
  padding-left: 0;
  font-family: var(--serif);
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--ink-soft);
  font-variation-settings: "opsz" 16;
}

/* In-page contents index - "On this page" (long auditor pages: security,
   compliance-roadmap). Static numbered index; no JS, no sticky positioning. */
.page-toc-list {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 56px;
}
.page-toc-list li { margin: 0; }
.page-toc-list a {
  display: grid;
  grid-template-columns: 1.8em 1fr;
  gap: 12px;
  align-items: baseline;
  padding: 11px 2px;
  border-top: 1px solid var(--rule-soft);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.02em;
  line-height: 1.35;
  text-decoration: none;
  color: var(--ink-soft);
  transition: color 0.15s;
}
.page-toc-list a:hover,
.page-toc-list a:focus-visible { color: var(--sage); }
.page-toc-num {
  color: var(--ink-faint);   /* AA-verified on cream; --rule-strong is 1.85:1 at 12px, fails 4.5:1 */
  font-variant-numeric: tabular-nums;
  transition: color 0.15s;
}
.page-toc-list a:hover .page-toc-num,
.page-toc-list a:focus-visible .page-toc-num { color: var(--sage); }
@media (max-width: 760px) {
  .page-toc-list { grid-template-columns: 1fr; gap: 0; }
}

/* Stat block - giant sage number + label (used by for-auditors "free access") */
.stat-block {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 32px;
  align-items: center;
  padding: 32px 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  margin: 32px 0 0;
}
.stat-block-value {
  font-family: var(--serif);
  font-size: clamp(56px, 7vw, 96px);
  line-height: 1;
  letter-spacing: -0.025em;
  color: var(--sage);
  font-weight: 400;
  font-variation-settings: "opsz" 72;
}
.stat-block-text {
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.5;
  color: var(--ink-soft);
  font-variation-settings: "opsz" 18;
}
.stat-block-text strong { color: var(--ink); font-weight: 500; }
@media (max-width: 600px) {
  .stat-block { grid-template-columns: 1fr; gap: 18px; }
  .stat-block-value { font-size: 64px; }
}

/* Roadmap timeline - vertical phase list with sage dot (used by compliance-roadmap) */
.roadmap-list {
  margin: 32px 0 0;
  padding-left: 24px;
  border-left: 2px solid var(--rule);
}
.roadmap-item {
  position: relative;
  padding: 0 0 28px;
}
.roadmap-item:last-child { padding-bottom: 0; }
.roadmap-item::before {
  content: "";
  position: absolute;
  left: -31px;
  top: 8px;
  width: 12px;
  height: 12px;
  background: var(--bg);
  border: 2px solid var(--rule-strong);
  border-radius: 50%;
}
.roadmap-item.now::before {
  background: var(--sage);
  border-color: var(--sage);
  box-shadow: 0 0 0 4px var(--sage-wash);
}
.roadmap-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sage);
  margin-bottom: 6px;
}
.roadmap-item:not(.now) .roadmap-label { color: var(--ink-dim); }
.roadmap-title {
  font-family: var(--serif);
  font-size: 22px;
  line-height: 1.18;
  color: var(--ink);
  margin-bottom: 8px;
  font-variation-settings: "opsz" 22;
}
.roadmap-desc {
  font-family: var(--serif);
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--ink-soft);
  font-variation-settings: "opsz" 16;
}

/* Editorial form - waitlist + contact (used by waitlist) */
.editorial-form {
  margin: 32px 0 0;
  display: grid;
  gap: 20px;
  max-width: 520px;
}
.editorial-form label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sage);
  margin-bottom: 6px;
  display: block;
}
.editorial-form input,
.editorial-form textarea,
.editorial-form select {
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.5;
  width: 100%;
  padding: 12px 14px;
  background: var(--bg);
  color: var(--ink);
  border: 1px solid var(--rule-strong);
  border-radius: 4px;
  transition: border-color 0.15s;
  font-variation-settings: "opsz" 17;
}
.editorial-form input:focus,
.editorial-form textarea:focus,
.editorial-form select:focus {
  border-color: var(--sage);
  outline: none;
}
.editorial-form textarea { min-height: 120px; resize: vertical; }
.editorial-form button {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 14px 22px;
  background: var(--sage);
  color: var(--bg);
  border: 1px solid var(--sage);
  cursor: pointer;
  transition: all 0.18s;
  justify-self: start;
}
.editorial-form button:hover {
  background: transparent;
  color: var(--sage);
}

/* Six-step variant of how-steps (used by how-it-works) */
.how-steps--six {
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 900px) {
  .how-steps--six { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .how-steps--six { grid-template-columns: 1fr; }
}

/* Three-item how-steps variant. Used on capabilities for the P2
   architectural commitments. Was previously simulated by adding an
   inline style="grid-template-columns: repeat(3, 1fr)" override on
   .how-steps--four, but inline styles defeat every media query, so
   the section never collapsed to one column on mobile. */
.how-steps--three {
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 720px) {
  .how-steps--three { grid-template-columns: 1fr; }
}

/* Editorial form: status + fineprint + button states (used by waitlist) */
.editorial-form .form-status {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--sage);
  margin: 12px 0 0;
  letter-spacing: 0.02em;
}
.editorial-form .form-status.is-error { color: var(--warn, #B8862B); }
.editorial-form .form-status.is-success { color: var(--sage); }
.editorial-form .form-fineprint {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-faint);
  margin: 16px 0 0;
  letter-spacing: 0.02em;
}
.editorial-form button:disabled,
.editorial-form button.is-submitting {
  background: var(--sage-light);
  border-color: var(--sage-light);
  color: var(--bg);
  cursor: default;
  pointer-events: none;
}
.editorial-form .hp-field {
  position: absolute !important;
  left: -9999px !important;
  height: 0 !important;
  overflow: hidden !important;
  width: 1px !important;
}

/* ============================================================
   MOBILE TUNING (iPhone, narrow Android)
   ============================================================ */

/* Tighter horizontal padding so content gets the width back.
   At 375px viewport, 32px*2 = 64px (17% of viewport) is too much. */
@media (max-width: 600px) {
  .inner       { padding: 0 20px; }
  .footer-inner { padding: 0 20px; }
}
@media (max-width: 400px) {
  .inner       { padding: 0 16px; }
  .footer-inner { padding: 0 16px; }
}

/* Nav brand shrinks at narrow widths so the CTA still fits cleanly.
   The 53px logo + 26px Newsreader wordmark combined eats the row. */
@media (max-width: 600px) {
  .nav-inner       { padding: 14px 20px; gap: 16px; }
  .nav-brand       { font-size: 20px; gap: 10px; }
  .nav-brand .logo-mark { width: 38px; height: 38px; }
  .nav-cta         { padding: 10px 14px; min-height: 44px; display: inline-flex; align-items: center; touch-action: manipulation; }
}
@media (max-width: 400px) {
  .nav-inner       { padding: 12px 16px; gap: 12px; }
  .nav-brand       { font-size: 18px; }
  .nav-brand .logo-mark { width: 32px; height: 32px; }
  .nav-cta         { padding: 9px 12px; font-size: 11px; }
}

/* Hero + closer compress vertical space at narrow widths.
   The desktop hero is 110px top / 90px bottom; on a phone that's
   half the visible viewport burned on whitespace. */
@media (max-width: 600px) {
  .hero        { padding: 72px 0 56px; }
  .closer-band { padding: 72px 0 64px; }
  .band        { padding: 56px 0; }
}

/* H1 / H2 / closer-line floors are too high for narrow phones.
   The clamp() lower bounds were tuned to feel right at 720px+. */
@media (max-width: 600px) {
  .body h2          { font-size: 33px; line-height: 1.1; }
  .hero .body h1    { font-size: 44px; line-height: 1.05; }
  .hero .body .hero-sub { font-size: 18px; line-height: 1.5; }
  .closer-line      { font-size: 40px; line-height: 1.06; }
  .inversion-callout .body p { font-size: 18px; line-height: 1.55; }
}
@media (max-width: 400px) {
  .body h2          { font-size: 28px; }
  .hero .body h1    { font-size: 38px; }
  .closer-line      { font-size: 33px; }
}

/* Audit-screen mock: tighten margin + padding so it fits the column
   on iPhone after the .audit-row grid collapse to 1fr already in place. */
@media (max-width: 600px) {
  .audit-screen        { margin-top: 32px; border-radius: 4px; }
  .audit-screen-bar    { padding: 10px 14px; }
  .audit-screen-label  { font-size: 10px; }
  .audit-screen-body   { padding: 6px 0 2px; }
  .audit-row           { padding: 14px 14px; }
}

/* Cost-stack: at narrow widths the bars + labels need a tighter footprint.
   The desktop layout assumes ~720px for the three-column grid with divider. */
@media (max-width: 600px) {
  .cost-stack-bars      { width: 100%; max-width: 240px; height: 280px; }
  .cost-stack-col-label { font-size: 11px; margin-bottom: 12px; }
  .cost-stack-bar       { padding: 10px 12px; }
  .cost-stack-bar-name  { font-size: 10.5px; }
  .cost-stack-col-total { font-size: 12px; margin-top: 12px; }
  .cost-stack-savings   { padding: 24px 16px; margin-top: 28px; }
  .cost-stack-savings-amount { font-size: 32px; }
  .cost-stack-savings-label  { font-size: 12px; }
  .cost-stack-footnote  { font-size: 10.5px; padding: 0 8px; }
}

/* Substrate cross-section visual: tighter pad + smaller layer labels. */
@media (max-width: 600px) {
  .substrate-grid    { row-gap: 16px; }
  .substrate-layer   { padding: 14px 16px; }
}

/* Prompt-library mock: tab row and tile chrome compress on narrow.
   Tiles already collapse to 1-col at <=520px (existing rule). */
@media (max-width: 600px) {
  .prompt-lib            { margin-top: 28px; border-radius: 4px; }
  .prompt-lib-bar        { padding: 10px 14px; }
  .prompt-lib-label      { font-size: 10px; }
  .prompt-tile           { min-height: 160px; padding: 18px 18px 16px; }
  .prompt-tile-text      { font-size: 15px; line-height: 1.4; }
}

/* Pricing cards: at the existing 480px collapse they stack already.
   Tighten internal padding + the Enterprise strip so they don't feel
   cramped on a phone. */
@media (max-width: 600px) {
  .pricing-grid     { gap: 16px; }
  .price-card       { padding: 28px 22px; }
  .price-card-amount { font-size: 36px; }
  .pricing-enterprise          { padding: 24px 20px; flex-direction: column; align-items: flex-start; gap: 16px; }
  .pricing-enterprise-cta      { width: 100%; text-align: center; }
  .pricing-fineprint           { padding: 22px 20px; }
}

/* Bundle-list (used by for-auditors etc): the 180px label column
   compresses the value column too much at iPhone widths. Stack instead. */
@media (max-width: 600px) {
  .bundle-list    { grid-template-columns: 1fr; row-gap: 8px; }
  .bundle-list dt { padding-top: 12px; }
  .bundle-list dd { padding-bottom: 12px; border-bottom: 1px solid var(--rule-soft); }
}

/* How-steps (3-step or 6-step) already stacks at 760px. Tighten internal
   spacing for phone widths. */
@media (max-width: 600px) {
  .how-step      { padding: 20px 0; }
  .how-step-num  { font-size: 10.5px; margin-bottom: 8px; }
  .how-step h3   { font-size: 22px; line-height: 1.18; }
}

/* Pair-grid (for-auditors / for-consultants two-column): already
   collapses at 760px. Compress internal h3/p sizes for phone. */
@media (max-width: 600px) {
  .pair-grid     { gap: 28px; margin-top: 24px; }
  .pair-col h3   { font-size: 24px; line-height: 1.18; margin-bottom: 14px; }
  .pair-col p    { font-size: 16px; line-height: 1.55; }
}

/* Roadmap-list (compliance-roadmap, integrations): the dated entries
   pack tighter, the "now / next" pill stays visible. */
@media (max-width: 600px) {
  .roadmap-item       { padding: 16px 0; gap: 12px; flex-direction: column; align-items: flex-start; }
  .roadmap-label      { font-size: 11px; }
  .roadmap-desc       { font-size: 15px; line-height: 1.5; }
}

/* Footer at iPhone widths: 1-column stack (currently 2-col at 760px).
   The 2-col layout still looks cramped on 375-430px. */
@media (max-width: 480px) {
  .footer-inner          { grid-template-columns: 1fr; gap: 28px; padding: 0 20px; }
  .footer-brand          { grid-column: 1 / -1; }
  .footer h4             { margin-bottom: 8px; }
}

/* Touch targets: ensure every interactive element on phone is >=44px tall
   (Apple HIG + WCAG 2.5.5). Targets: footer links, nav-links (already
   hidden), buttons, anchors in card grids. */
@media (max-width: 600px) {
  .footer a,
  .footer-brand a            { min-height: 44px; display: inline-flex; align-items: center; touch-action: manipulation; }
  .price-card-cta,
  .editorial-form button     { min-height: 48px; touch-action: manipulation; }
}

/* iOS Safari: prevent horizontal scroll from a few px of overflow WITHOUT
   breaking the sticky nav. `overflow-x: hidden` (or any overflow on <body>)
   establishes a scroll container, and on iOS Safari that detaches
   `position: sticky` from the viewport so the nav scrolls away. `overflow-x:
   clip` clips the overflow but does NOT create a scroll container, so sticky
   keeps pinning to the viewport. Applied to <html> only. */
html { overflow-x: clip; }

/* iOS Safari: smooth scrolling for in-page anchors (e.g. #how, #pricing).
   scroll-padding-top clears the sticky nav so anchored headings (page-toc,
   compliance standards) don't land hidden behind it. */
html { scroll-behavior: smooth; scroll-padding-top: 88px; }

/* ============================================================
   MOBILE TUNING - DEEPER PASS
   ============================================================ */

/* Skip-to-main link: visually hidden until focused, then a clear pill
   in the top-left. Standard a11y pattern, required per WCAG 2.4.1. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1000;
  background: var(--sage);
  color: var(--bg);
  padding: 12px 18px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 0 0 4px 0;
  font-weight: 500;
}
.skip-link:focus { left: 0; outline: 2px solid var(--ink); outline-offset: 0; }
main { display: block; }

/* Site-wide "Ask" pill - persistent launcher (injected by script.js) that
   opens the Kanonik assistant. Editorial: cream surface, sage ink + mono
   label, a sage "?" disc. Fixed bottom-right, above page content. */
.kn-ask-pill {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 10px 18px 10px 12px;
  border-radius: 999px;
  background: var(--bg);
  border: 1px solid var(--rule-strong);
  color: var(--sage);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 0 6px 20px -6px rgba(11, 11, 15, 0.22);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.kn-ask-pill:hover {
  transform: translateY(-2px);
  border-color: var(--sage);
  box-shadow: 0 12px 28px -8px rgba(11, 11, 15, 0.28);
}
.kn-ask-pill:focus-visible { outline: 2px solid var(--sage); outline-offset: 2px; }
.kn-ask-pill-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--sage);
  color: var(--bg);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
}
.kn-ask-pill-text { white-space: nowrap; }
@media (prefers-reduced-motion: reduce) {
  .kn-ask-pill { transition: none; }
  .kn-ask-pill:hover { transform: none; }
}
@media (max-width: 600px) {
  .kn-ask-pill { right: 14px; bottom: 14px; padding: 10px 14px 10px 10px; font-size: 11px; }
}

/* Prompt-library tiles at phone widths were 160px each x 8 tiles =
   1280px of just one mockup. Cut height + padding aggressively so the
   mock is recognizable but doesn't dominate the page. */
@media (max-width: 600px) {
  .prompt-tile           { min-height: 96px; padding: 14px 16px 12px; gap: 6px; }
  .prompt-tile-tag       { font-size: 9px; letter-spacing: 0.12em; }
  .prompt-tile-text      { font-size: 13.5px; line-height: 1.35; }
  .prompt-tile-send      { width: 22px; height: 22px; }
  .prompt-lib-tabs       { gap: 0; padding: 4px 8px 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .prompt-lib-tab        { white-space: nowrap; }
  .prompt-lib-grid       { gap: 1px; }
}

/* H3 across the editorial system. The default 26-28px reads as desktop;
   on a 375px column it crowds the layout. Force phone-appropriate sizes. */
@media (max-width: 600px) {
  .body h3                            { font-size: 22px; line-height: 1.18; }
  .substrate-layer-name,
  .pair-col h3,
  .how-step h3,
  .price-card-tier                    { font-size: 21px; line-height: 1.18; }
}
@media (max-width: 400px) {
  .body h3                            { font-size: 20px; }
}

/* Marginalia on mobile: keep visible but visually subdued.
   It currently inherits the desktop styling which can look like an
   unrelated callout block sitting between body paragraphs. */
@media (max-width: 880px) {
  .block > .marginalia {
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--ink-soft);
    margin-top: 8px;
    padding: 10px 0 0 12px;
  }
  .dark .block > .marginalia { color: var(--dark-ink); }
  .marginalia p              { margin: 0 0 8px; }
  .marginalia p:last-child   { margin-bottom: 0; }
}
@media (max-width: 600px) {
  .block > .marginalia       { font-size: 12px; }
  .marginalia .m-label       { font-size: 9.5px; margin: 10px 0 3px; }
}

/* Inversion callout (home): the 22px serif quote runs long on iPhone.
   Tighten. */
@media (max-width: 600px) {
  .inversion-callout         { padding: 36px 0; }
  .inversion-callout .body p { font-size: 17px; line-height: 1.55; margin: 0 0 12px; }
}
@media (max-width: 400px) {
  .inversion-callout .body p { font-size: 16px; }
}

/* Hero on home: tighter still on the smallest phones. The current
   floor is 40px at <=600. At 375px width, 40px Newsreader takes
   significant space; the eyebrow + h1 + subtitle eat the fold. */
@media (max-width: 600px) {
  .hero                            { padding: 44px 0 36px; }
  .hero .body p.eyebrow            { font-size: 10.5px; margin-bottom: 14px; }
  .hero .body h1                   { margin-bottom: 18px; }
  .hero .body .hero-sub            { margin-bottom: 18px; }
}

/* Audit-screen: even after the 1fr collapse, the rows render as four
   stacked cards each with timestamp + content + hash. The visual
   hierarchy reads as too much detail on phone. Tighten spacing and
   hide the per-row hash badge (still visible on desktop and tablet). */
@media (max-width: 600px) {
  .audit-screen                    { margin-top: 24px; }
  .audit-row                       { padding: 12px 14px; gap: 8px; }
  .audit-time                      { font-size: 10.5px; padding-top: 0; }
  .audit-action                    { font-size: 9.5px; }
  .audit-content                   { gap: 6px; }
  .audit-content > strong,
  .audit-content p                 { font-size: 13.5px; line-height: 1.4; }
  .audit-meta                      { font-size: 10px; gap: 2px 12px; }
  .audit-hash                      { font-size: 10px; }
  .audit-screen-footer             { padding: 12px 14px; font-size: 10px; }
}

/* Substrate cross-section: each layer's content (label + description)
   currently gets too much breathing room on mobile. */
@media (max-width: 600px) {
  .substrate-layer                 { padding: 16px 16px; }
.substrate-layer-name            { margin-bottom: 8px; }
}

/* Eyebrow / mono pill on mobile: too small to read at the current
   10-11px; the letter-spacing makes them look like noise. */
@media (max-width: 600px) {
  .eyebrow                         { font-size: 10.5px; letter-spacing: 0.14em; }
}

/* Stat-block (used on for-auditors $0): the large numeric display
   needs to scale down on phones. */
@media (max-width: 600px) {
  .stat-block                      { padding: 28px 20px; }
  .stat-block-value                { font-size: 56px; line-height: 1; }
  .stat-block-text                 { font-size: 14px; }
}
@media (max-width: 400px) {
  .stat-block-value                { font-size: 44px; }
}

/* Closer-band: the giant serif tagline can wrap awkwardly on narrow.
   Existing rules drop it from 96 -> 30 already; refine the prelude. */
@media (max-width: 600px) {
  .closer-prelude                  { font-size: 14px; margin-bottom: 18px; }
.closer-cta                      { flex-direction: column; gap: 10px; align-items: stretch; }
  .closer-cta a                    { width: 100%; text-align: center; min-height: 48px; }
}

/* Editorial form on mobile: input padding could be tighter, but font-size
   stays at 17px to avoid iOS auto-zoom on focus. */
@media (max-width: 600px) {
  .editorial-form                  { gap: 18px; }
  .editorial-form label            { font-size: 12px; }
  .editorial-form input,
  .editorial-form textarea,
  .editorial-form select           { padding: 10px 12px; font-size: 17px; }
  .editorial-form button           { padding: 14px 22px; font-size: 12px; width: 100%; }
}

/* Price-card amount line ($199/month etc) on the narrowest phones. */
@media (max-width: 400px) {
  .price-card-amount               { font-size: 32px; }
  .price-card-period               { font-size: 10px; }
}

/* About-quote attribution (on about.html): when block stacks, the
   attribution sits too tightly under the quote. */
@media (max-width: 600px) {
  .about-quote-attr                { font-size: 11px; margin-top: 18px; }
}

/* Reduced motion: guard the remaining animations (audit-pulse status
   dot, .band reveal already guarded). Required for WCAG 2.3.3 and
   honors the prefers-reduced-motion user preference. */
@media (prefers-reduced-motion: reduce) {
  .audit-status-dot                { animation: none; }
  .prompt-lib-status::before       { animation: none; }
  html                             { scroll-behavior: auto; }
}

/* Defensive: ensure no element on the home page can horizontally
   overflow the viewport on phones (audit-screen, prompt-lib, cost-stack
   all have fixed-width sub-elements that can poke out). */
@media (max-width: 600px) {
  .audit-screen,
  .prompt-lib,
  .cost-stack-inner,
  .substrate-grid                  { max-width: 100%; }
  .audit-screen, .prompt-lib       { overflow: hidden; }
}

/* ============================================================
   SITE SEARCH UI (nav affordance + dropdown panel)
   ============================================================ */

/* Visually-hidden label (the search input has placeholder + aria-label
   already, but a real <label> helps some assistive tech). */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Nav search trigger: small icon button to the right of nav-links,
   immediately before the CTA. */
.nav-search {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin-right: 8px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--ink-soft);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
  touch-action: manipulation;
}
.nav-search:hover { color: var(--sage); }
.nav-search:focus-visible {
  color: var(--sage);
  border-color: var(--sage);
  outline: none;
}
@media (max-width: 600px) {
  .nav-search { width: 44px; height: 44px; margin-right: 6px; }
}

/* Search panel: positioned below the sticky nav, full-width on mobile,
   constrained to the container on desktop. */
.search-panel {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 49;
  margin-top: 64px;
  padding: 0 32px;
  pointer-events: none;
}
.search-panel[hidden] { display: none; }
.search-panel-inner {
  max-width: 720px;
  margin: 16px auto 0;
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 6px;
  box-shadow: 0 16px 40px -12px rgba(11, 11, 15, 0.18), 0 4px 12px -4px rgba(11, 11, 15, 0.08);
  padding: 14px 14px 12px;
  pointer-events: auto;
}
.search-input {
  display: block;
  width: 100%;
  background: transparent;
  border: 0;
  outline: none;
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.4;
  color: var(--ink);
  padding: 8px 6px 10px;
  border-bottom: 1px solid var(--rule-soft);
}
.search-input::placeholder { color: var(--ink-faint); }

.search-results {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  max-height: 60vh;
  overflow-y: auto;
}
.search-results li[data-href] {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
  padding: 10px 8px;
  border-radius: 4px;
  cursor: pointer;
}
.search-results li[data-href]:hover,
.search-results li.is-active {
  background: var(--sage-wash);
}
.search-results .sr-title {
  font-family: var(--serif);
  font-size: 15px;
  line-height: 1.3;
  color: var(--ink);
  font-weight: 500;
}
.search-results .sr-summary {
  font-family: var(--serif);
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--ink-soft);
}
.search-results .sr-url {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--sage);
  margin-top: 2px;
}
.search-results .sr-empty {
  padding: 16px 8px;
  font-family: var(--serif);
  font-size: 14px;
  color: var(--ink-soft);
  font-style: italic;
}

.search-hint {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--rule-soft);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
  text-align: right;
}

/* Mobile: tighter padding + bigger touch targets in results */
@media (max-width: 600px) {
  .search-panel             { padding: 0 16px; margin-top: 60px; }
  .search-panel-inner       { padding: 12px 12px 10px; }
  .search-input             { font-size: 17px; padding: 10px 6px 12px; }
  .search-results li[data-href] { padding: 12px 10px; min-height: 56px; }
  .search-hint              { font-size: 10px; }
}

/* ============================================================
   MOBILE MOCKUPS + HERO - authoritative pass (2026-05-29).
   Placed last so it wins over the earlier scattered @media blocks.
   Makes the four home set-pieces fit and read cleanly at phone
   widths instead of clipping, and stacks the hero CTAs full-width.
   ============================================================ */
@media (max-width: 600px) {
  /* Never let a set-piece exceed the viewport. */
  .prompt-lib,
  .audit-screen,
  .cost-stack-chart,
  .substrate-grid           { max-width: 100%; }

  /* Prompt library: the tab strip is decorative (aria-hidden) and
     overflowed/cut off on phones - drop it; let tiles size to content. */
  .prompt-lib-tabs          { display: none; }
  .prompt-tile              { min-height: 0; padding: 16px; gap: 8px; }
  .prompt-tile-text         { font-size: 14px; line-height: 1.45; }
  .prompt-tile-tag,
  .prompt-tile-meta         { font-size: 11px; }

  /* Cost stack: full-width, not a narrow centered island; tune the amount. */
  .cost-stack-chart         { max-width: none; margin-left: 0; margin-right: 0; }
  .cost-stack-bars          { max-width: none; }
  .cost-stack-bar-amount    { font-size: 19px; }

  /* Mono floor: lift the smallest labels so they are legible at phone size. */
  .audit-action,
  .substrate-layer-tag      { font-size: 11px; letter-spacing: 0.1em; }

  /* Hero CTAs: stack full-width instead of wrapping into ragged pills. */
  .hero-cta-row             { margin-top: 24px; gap: 10px; }
  .hero-cta-row .btn        { flex: 1 1 100%; justify-content: center; min-height: 48px; }
}

/* Turnstile widget inside the waitlist form: breathing room above the submit. */
.form-turnstile { margin: 4px 0 20px; }

/* ============================================================
   LEGAL PAGES (terms / privacy / dpa)
   The hero is editorial; the legal body below it was preserved
   verbatim and had no styling at all (full-bleed, flush against the
   hero). These rules give it a contained reading measure, breathing
   room from the hero, and design-system type.
   ============================================================ */
.legal {
  max-width: 760px;
  margin: 0 auto;
  padding: 72px 32px 96px;
  color: var(--ink-soft);
  font-size: 16px;
  line-height: 1.7;
}
.legal-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 28px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.03em;
  color: var(--ink-faint);
  padding-bottom: 24px;
  margin-bottom: 44px;
  border-bottom: 1px solid var(--rule);
}
.legal-meta strong { color: var(--ink); font-weight: 600; }
.legal-toc {
  margin: 0 0 56px;
  padding: 28px 32px;
  background: var(--bg-deep);
  border: 1px solid var(--rule);
}
.legal-toc h2 {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sage);
  font-weight: 500;
  margin: 0 0 18px;
}
.legal-toc ol {
  margin: 0;
  padding-left: 1.3em;
  columns: 2;
  column-gap: 44px;
}
.legal-toc li { margin: 0 0 7px; }
.legal-toc a { color: var(--ink-soft); text-decoration: none; }
.legal-toc a:hover { color: var(--sage); }
.legal section { margin: 0 0 44px; }
.legal h2 {
  font-family: var(--serif);
  font-size: 26px;
  line-height: 1.25;
  font-weight: 500;
  color: var(--ink);
  margin: 0 0 18px;
}
.legal h3 {
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 500;
  color: var(--ink);
  margin: 26px 0 12px;
}
.legal p { margin: 0 0 16px; }
.legal ul, .legal ol { margin: 0 0 16px; padding-left: 1.4em; }
.legal li { margin: 0 0 8px; }
.legal strong { color: var(--ink); font-weight: 600; }
.legal a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.legal a:hover { color: var(--sage); }
.legal table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 24px;
  font-size: 14px;
}
.legal th, .legal td {
  border: 1px solid var(--rule);
  padding: 9px 11px;
  text-align: left;
  vertical-align: top;
}
.legal th { background: var(--bg-deep); color: var(--ink); font-weight: 600; }
@media (max-width: 760px) {
  .legal { padding: 48px 24px 72px; font-size: 15px; }
  .legal-toc { padding: 24px; }
  .legal-toc ol { columns: 1; }
  .legal h2 { font-size: 23px; }
}

/* ============================================================
   Global reduced-motion backstop (placed last so it wins the cascade).
   The scoped guards above handle specific reveals; this catches everything
   else - hover lifts, the nav backdrop transition, link/button transitions -
   for visitors who set "Reduce motion". WCAG 2.3.3 + 2.2.2.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}