/* website/public/assets/css/site.css */
/* Fonts (outside any layer) */
@font-face {
  font-family: "Newsreader";
  src: url("../fonts/newsreader-latin-opsz-normal.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Newsreader";
  src: url("../fonts/newsreader-latin-opsz-italic.woff2") format("woff2");
  font-weight: 200 800;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("../fonts/hanken-grotesk-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Commit Mono";
  src: url("../fonts/commit-mono-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Commit Mono";
  src: url("../fonts/commit-mono-latin-500-normal.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@property --h    { syntax: "<angle>"; inherits: true; initial-value: 60deg; }
@property --tilt { syntax: "<angle>"; inherits: true; initial-value: 0deg; }

/* Cross-document and view-transition setup */
@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }
}

html.vt-theme * {
  view-transition-name: none !important;
}
html.vt-theme::view-transition-old(root),
html.vt-theme::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}
html.vt-theme::view-transition-new(root) {
  animation: nb-reveal 500ms var(--ease-out);
}
@keyframes nb-reveal {
  from { clip-path: circle(0 at var(--vt-x, 50%) var(--vt-y, 50%)); }
  to { clip-path: circle(150% at var(--vt-x, 50%) var(--vt-y, 50%)); }
}

::view-transition-group(*.nb-block) {
  animation-duration: 420ms;
  animation-timing-function: var(--ease-out);
}

@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after {
    animation: none !important;
    transition: none !important;
  }
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}

@media (prefers-contrast: more) {
  :root, [data-theme] {
    --border-default: var(--border-strong);
    --border-subtle: var(--border-strong);
    --border-hairline: var(--border-strong);
  }
}

/* @layer reset */
@layer reset {
  [hidden] {
    display: none !important;
  }

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

  html {
    scroll-padding-top: 5rem;
    -webkit-text-size-adjust: 100%;
    tab-size: 2;
    interpolate-size: allow-keywords;
  }

  body {
    min-height: 100vh;
  }

  img, svg, picture {
    display: block;
    max-width: 100%;
  }

  button, input, select, textarea {
    font: inherit;
    color: inherit;
  }
}

/* @layer base */
@layer base {
  body {
    background: var(--bg-app);
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: var(--step-0);
    line-height: 1.6;
    font-variant-numeric: tabular-nums lining-nums;
    -webkit-font-smoothing: antialiased;
  }

  h1, h2, h3, h4 {
    font-family: var(--font-serif);
    font-weight: 350;
    line-height: 1.1;
    letter-spacing: -0.015em;
    text-wrap: balance;
    font-optical-sizing: auto;
  }

  h1 {
    font-size: var(--step-4);
    font-weight: 300;
    letter-spacing: -0.025em;
    line-height: 1.02;
    text-box: trim-both cap alphabetic;
  }

  h2 {
    font-size: var(--step-3);
    text-box: trim-both cap alphabetic;
  }

  h3 {
    font-size: var(--step-2);
  }

  h4 {
    font-size: var(--step-1);
  }

  p {
    text-wrap: pretty;
    max-width: var(--measure);
  }

  a {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: var(--accent);
    text-underline-offset: 0.2em;
    text-decoration-thickness: 1px;
    transition: text-decoration-thickness var(--dur-fast) var(--ease-out);
  }

  a:hover {
    text-decoration-thickness: 2px;
  }

  code, kbd, pre {
    font-family: var(--font-mono);
  }

  code {
    word-break: break-word;
    overflow-wrap: anywhere;
  }

  kbd {
    font-size: 0.8em;
    border: 1px solid var(--border-strong);
    border-bottom-width: 2px;
    border-radius: var(--radius-sm);
    padding: 0.1em 0.4em;
    background: var(--bg-elevated);
    color: var(--text-primary);
    display: inline-block;
    line-height: 1.3;
  }

  mark {
    background: var(--highlight-yellow);
    color: inherit;
    padding: 0.1em 0.2em;
    border-radius: 2px;
  }

  details {
    interpolate-size: allow-keywords;
  }

  details::details-content {
    transition: block-size var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out);
  }
}

/* @layer layout */
@layer layout {
  .page {
    max-width: var(--page-max);
    margin-inline: auto;
    padding-inline: var(--gutter);
  }

  .section {
    padding-block: var(--section-gap);
  }

  .rule {
    border: none;
    border-top: 1px solid var(--border-default);
    margin: 0;
    width: 100%;
  }

  .two-col {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: start;
  }

  .two-col > * {
    min-width: 0;
  }

  @media (max-width: 900px) {
    .two-col {
      grid-template-columns: 1fr;
    }
  }
}

/* @layer components */
@layer components {
  /* Buttons */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    height: 44px;
    padding: 0 18px;
    border-radius: var(--radius-md);
    font-family: var(--font-sans);
    font-size: var(--step--1);
    font-weight: 500;
    letter-spacing: -0.01em;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid transparent;
    text-box: trim-both cap alphabetic;
    transition: background-color var(--dur-fast) var(--ease-out),
                border-color var(--dur-fast) var(--ease-out),
                opacity var(--dur-fast) var(--ease-out);
  }

  .btn-primary {
    background: var(--ink);
    color: var(--ink-fg);
    border-color: var(--ink);
  }
  .btn-primary:hover {
    opacity: 0.92;
  }

  .btn-secondary {
    background: var(--bg-elevated);
    color: var(--text-primary);
    border-color: var(--border-default);
  }
  .btn-secondary:hover {
    background: var(--bg-hover);
    border-color: var(--border-strong);
  }

  .btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
  }

  /* Prose / inline styles */
  .wl {
    background: var(--accent-subtle);
    border-radius: 3px;
    padding: 0.1em 0.3em;
    text-decoration: none;
    color: var(--text-primary);
  }

  .sigil {
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;
    color: var(--text-muted);
  }

  .next {
    display: inline-block;
    font-family: var(--font-sans);
    font-size: var(--step--1);
    color: var(--text-muted);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    padding: 0.1em 0.5em;
    line-height: 1.4;
  }

  /* Screenshot Frames */
  .window-frame {
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    overflow: clip;
    background: var(--bg-canvas);
  }
  .window-frame img {
    display: block;
    width: 100%;
    height: auto;
  }

  .phone {
    border: 1px solid var(--border-strong);
    padding: 6px;
    background: var(--bg-elevated);
    border-radius: 34px;
    max-width: 320px;
    margin-inline: auto;
  }
  .phone img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 28px;
  }
  @supports (corner-shape: squircle) {
    .phone {
      corner-shape: squircle;
      border-radius: 56px;
    }
    .phone img {
      border-radius: 50px;
    }
  }

  /* Skip Link */
  .skip {
    position: absolute;
    top: -100px;
    left: var(--gutter);
    z-index: 1000;
    padding: 0.5rem 1rem;
    background: var(--bg-elevated);
    color: var(--text-primary);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    text-decoration: none;
  }
  .skip:focus {
    top: 1rem;
  }

  /* Header */
  .site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    container: header / scroll-state;
    view-transition-name: site-header;
    background: var(--bg-app);
  }

  .site-header__bar {
    border-bottom: 1px solid var(--border-default);
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: var(--page-max);
    margin-inline: auto;
    padding-inline: var(--gutter);
    transition: border-bottom-color var(--dur-base) var(--ease-out);
  }

  @container header not scroll-state(stuck: top) {
    .site-header__bar {
      border-bottom-color: transparent;
    }
  }

  .site-header__brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
    color: var(--text-primary);
  }

  .site-header__brand span {
    font-family: var(--font-serif);
    font-size: var(--step-1);
    font-weight: 400;
    letter-spacing: -0.01em;
  }

  .site-header__nav {
    display: flex;
    align-items: center;
    gap: 1.5rem;
  }

  .site-header__nav a {
    text-decoration: none;
    color: var(--text-secondary);
    font-size: var(--step--1);
    font-weight: 500;
  }

  .site-header__nav a:hover {
    color: var(--text-primary);
  }

  .site-header__nav a[aria-current="page"] {
    color: var(--text-primary);
    text-decoration: underline;
    text-decoration-color: var(--accent);
    text-underline-offset: 0.3em;
  }

  .icon-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    text-decoration: none;
  }
  .icon-link:hover {
    color: var(--text-primary);
  }

  .theme-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    height: 36px;
    padding: 0 12px;
    background: transparent;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    cursor: pointer;
    font-family: var(--font-sans);
    font-size: var(--step--1);
    anchor-name: --theme-btn;
    transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
  }

  .theme-btn:hover {
    color: var(--text-primary);
    border-color: var(--border-strong);
    background: var(--bg-hover);
  }

  .menu-btn {
    display: none;
    background: transparent;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    padding: 6px;
    color: var(--text-primary);
    cursor: pointer;
  }

  .site-header__mobile-controls {
    display: none;
  }

  @media (max-width: 760px) {
    .site-header__nav {
      display: none;
    }
    .site-header__mobile-controls {
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }
    .menu-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }
    .theme-btn__text {
      display: none;
    }
  }

  /* Theme Popover */
  #theme-pop {
    position-anchor: --theme-btn;
    inset: auto;
    margin: 6px 0 0;
    position-area: block-end span-inline-start;
    position-try-fallbacks: flip-block;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    background: var(--bg-elevated);
    padding: 0.875rem;
    box-shadow: var(--shadow-md);
    z-index: 200;
    transition: opacity 0.2s, translate 0.2s, overlay 0.2s allow-discrete, display 0.2s allow-discrete;
  }

  @starting-style {
    #theme-pop:popover-open {
      opacity: 0;
      translate: 0 -4px;
    }
  }

  @supports not (anchor-name: --a) {
    #theme-pop {
      position: fixed;
      top: 70px;
      right: var(--gutter);
    }
  }

  .theme-grid {
    display: grid;
    grid-template-columns: repeat(4, 88px);
    gap: 0.5rem;
    margin-bottom: 0.75rem;
  }

  @media (max-width: 400px) {
    .theme-grid {
      grid-template-columns: repeat(2, 88px);
    }
  }

  .theme-tile {
    width: 88px;
    height: 52px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-default);
    background: var(--bg-canvas);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    cursor: pointer;
    padding: 4px;
    color: var(--text-primary);
    transition: border-color var(--dur-fast) var(--ease-out);
  }

  .theme-tile:hover {
    border-color: var(--border-strong);
  }

  .theme-tile[aria-pressed="true"] {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
  }

  .theme-tile__canvas {
    display: flex;
    align-items: center;
    gap: 4px;
  }

  .theme-tile__dot,
  .dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--accent);
    display: inline-block;
  }

  .theme-tile__sample {
    font-family: var(--font-serif);
    font-size: var(--step--1);
    color: var(--text-primary);
    line-height: 1;
  }

  .theme-tile__name {
    font-family: var(--font-sans);
    font-size: var(--step--1);
    color: var(--text-secondary);
    line-height: 1;
  }

  .theme-follow {
    display: block;
    width: 100%;
    padding: 0.5rem;
    background: var(--bg-panel);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: var(--step--1);
    cursor: pointer;
    text-align: center;
    transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
  }

  .theme-follow:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
  }

  /* Mobile menu popover */
  #mobile-menu {
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    background: var(--bg-elevated);
    padding: 1.5rem;
    box-shadow: var(--shadow-lg);
    z-index: 200;
    width: calc(100vw - 2 * var(--gutter));
    max-width: 320px;
    inset: auto;
    top: 70px;
    right: var(--gutter);
  }

  .mobile-menu__nav {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  .mobile-menu__nav a {
    text-decoration: none;
    color: var(--text-primary);
    font-size: var(--step-0);
    font-weight: 500;
  }

  /* Footer */
  .site-footer {
    margin-top: var(--section-gap);
  }

  .site-footer__inner {
    max-width: var(--page-max);
    margin-inline: auto;
    padding-inline: var(--gutter);
    padding-block: 4rem 3rem;
  }

  .site-footer__brand {
    margin-bottom: 2.5rem;
  }

  .site-footer__logo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
  }

  .site-footer__logo span {
    font-family: var(--font-serif);
    font-size: var(--step-1);
    font-weight: 400;
  }

  .site-footer__tagline {
    font-family: var(--font-serif);
    font-style: italic;
    color: var(--text-secondary);
    font-size: var(--step-0);
  }

  .site-footer__cols {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2rem;
    margin-bottom: 3rem;
  }

  .site-footer__col h3 {
    font-family: var(--font-sans);
    font-size: var(--step--1);
    font-weight: 500;
    color: var(--text-muted);
    margin-bottom: 1rem;
  }

  .site-footer__col ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  .site-footer__col a {
    text-decoration: none;
    color: var(--text-secondary);
    font-size: var(--step--1);
  }

  .site-footer__col a:hover {
    color: var(--text-primary);
  }

  .site-footer__col li {
    color: var(--text-secondary);
    font-size: var(--step--1);
  }

  .site-footer__bottom {
    border-top: 1px solid var(--border-default);
    padding-top: 2rem;
    font-size: var(--step--1);
    color: var(--text-muted);
  }

  @media (max-width: 760px) {
    .site-footer__cols {
      grid-template-columns: 1fr;
    }
  }
}

/* @layer sections */
@layer sections {
  /* Hero entrance */
  @keyframes hero-fade {
    from { opacity: 0; translate: 0 6px; }
    to { opacity: 1; translate: 0 0; }
  }

  .hero-lead {
    font-size: var(--step-1);
    color: var(--text-secondary);
    margin-block: 1.5rem 2rem;
    line-height: 1.5;
  }

  .hero-meta {
    font-family: var(--font-mono);
    font-size: var(--step--1);
    color: var(--text-muted);
    margin-top: 1.25rem;
  }

  /* One note, two ways demo */
  .note-demo {
    max-inline-size: 44rem;
    margin-inline: auto;
  }

  .note-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
  }

  .segmented-control {
    display: inline-flex;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    background: var(--bg-panel);
    padding: 2px;
  }

  .segmented-control button {
    border: none;
    background: transparent;
    padding: 4px 14px;
    border-radius: var(--radius-sm);
    font-size: var(--step--1);
    color: var(--text-secondary);
    cursor: pointer;
    transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
  }

  .segmented-control button[aria-pressed="true"] {
    background: var(--bg-elevated);
    color: var(--text-primary);
  }

  .note-panel {
    background: var(--bg-canvas);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    padding: clamp(20px, 3vw, 36px);
    min-block-size: 32rem;
    max-inline-size: 44rem;
    box-sizing: border-box;
  }

  .note-writing {
    font-family: var(--font-serif);
    font-size: var(--step-0);
    line-height: 1.7;
    color: var(--text-primary);
  }

  .note-writing h1,
  .note-writing .note-title {
    font-size: var(--step-2);
    font-weight: 400;
    margin-bottom: 0.5rem;
  }

  .note-writing h2 {
    font-size: var(--step-1);
    font-weight: 400;
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
  }

  .note-meta {
    font-family: var(--font-sans);
    font-size: var(--step--1);
    color: var(--text-muted);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
  }

  .tag-chip {
    background: var(--accent-subtle);
    color: var(--accent);
    border-radius: 3px;
    padding: 0.1em 0.4em;
    text-decoration: none;
    font-size: var(--step--1);
  }

  .callout {
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-md);
    padding: 1rem;
    margin-block: 1rem;
    background: color-mix(in oklab, var(--accent) 4%, transparent);
    font-size: var(--step-0);
  }

  .callout-title {
    font-family: var(--font-sans);
    font-weight: 500;
    font-size: var(--step--1);
    color: var(--accent);
    margin-bottom: 0.25rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
  }

  .note-table-wrap {
    overflow-x: auto;
    margin-block: 1rem;
  }

  .note-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-sans);
    font-size: var(--step--1);
  }

  .note-table th, .note-table td {
    border-bottom: 1px solid var(--border-hairline);
    padding: 0.5rem 0.75rem;
    text-align: left;
  }

  .note-table th {
    color: var(--text-muted);
    font-weight: 500;
    font-size: var(--step--1);
  }

  .task-list {
    list-style: none;
    margin-block: 0.5rem;
  }

  .task-item {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    font-family: var(--font-sans);
    font-size: var(--step-0);
    margin-block: 0.25rem;
  }

  .note-raw {
    font-family: var(--font-mono);
    font-size: var(--step--1);
    line-height: 1.7;
    white-space: pre-wrap;
    color: var(--text-primary);
  }

  .note-raw code {
    counter-reset: line-number;
  }

  .note-raw .ln {
    display: block;
    counter-increment: line-number;
  }

  .note-raw .ln::before {
    content: counter(line-number);
    display: inline-block;
    width: 2.5ch;
    margin-right: 1.5ch;
    color: var(--text-muted);
    text-align: right;
  }

  .note-raw .blk {
    display: block;
  }

  .note-caption {
    font-family: var(--font-mono);
    font-size: var(--step--1);
    color: var(--text-muted);
    margin-top: 0.75rem;
    text-align: left;
  }

  /* Block pairing for View Transitions */
  [data-vt="nb-meta"] { view-transition-name: nb-meta; view-transition-class: nb-block; }
  [data-vt="nb-title"] { view-transition-name: nb-title; view-transition-class: nb-block; }
  [data-vt="nb-p1"] { view-transition-name: nb-p1; view-transition-class: nb-block; }
  [data-vt="nb-callout"] { view-transition-name: nb-callout; view-transition-class: nb-block; }
  [data-vt="nb-h-milestones"] { view-transition-name: nb-h-milestones; view-transition-class: nb-block; }
  [data-vt="nb-table"] { view-transition-name: nb-table; view-transition-class: nb-block; }
  [data-vt="nb-h-week"] { view-transition-name: nb-h-week; view-transition-class: nb-block; }
  [data-vt="nb-tasks"] { view-transition-name: nb-tasks; view-transition-class: nb-block; }

  /* Section 4: Tasks demo */
  .tasks-demo {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    align-items: start;
    margin-top: 1.5rem;
  }

  @media (max-width: 900px) {
    .tasks-demo {
      grid-template-columns: 1fr;
    }
  }

  .raw-tasks-box {
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    background: var(--bg-canvas);
    padding: 1.25rem;
    font-family: var(--font-mono);
    font-size: var(--step--1);
    line-height: 1.8;
  }

  .task-hub-box {
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    background: var(--bg-elevated);
    padding: 1.25rem;
  }

  .raw-line {
    display: block;
    padding: 0.1em 0.3em;
    border-radius: var(--radius-sm);
  }

  .box-off { display: inline; }
  .box-on { display: none; }

  .tasks-demo:has(#t1:checked) .raw-line[data-for="t1"] .box-off,
  .tasks-demo:has(#t2:checked) .raw-line[data-for="t2"] .box-off,
  .tasks-demo:has(#t3:checked) .raw-line[data-for="t3"] .box-off { display: none; }

  .tasks-demo:has(#t1:checked) .raw-line[data-for="t1"] .box-on,
  .tasks-demo:has(#t2:checked) .raw-line[data-for="t2"] .box-on,
  .tasks-demo:has(#t3:checked) .raw-line[data-for="t3"] .box-on { display: inline; }

  .tasks-demo:has(#t1:checked) .raw-line[data-for="t1"],
  .tasks-demo:has(#t2:checked) .raw-line[data-for="t2"],
  .tasks-demo:has(#t3:checked) .raw-line[data-for="t3"] { animation: flash-on 600ms; }

  @keyframes flash-on { from { background: var(--accent-subtle); } to { background: transparent; } }

  .hub-group {
    margin-bottom: 1rem;
  }

  .hub-group-title {
    font-family: var(--font-sans);
    font-size: var(--step--1);
    font-weight: 500;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
  }

  .hub-item {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    font-size: var(--step--1);
    margin-bottom: 0.4rem;
  }

  .hub-due-danger {
    color: var(--danger);
    font-size: var(--step--1);
    margin-left: 0.5rem;
  }

  .hub-due {
    color: var(--text-muted);
    font-size: var(--step--1);
    margin-left: 0.5rem;
  }

  /* Section 5: Wikilink preview & Graph */
  .wl-anchor-wrap {
    position: relative;
    display: inline-block;
  }

  .wl-card {
    display: none;
    position: absolute;
    position-anchor: --wl1;
    position-area: block-end span-inline-end;
    inline-size: 18rem;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    background: var(--bg-elevated);
    padding: 0.875rem;
    box-shadow: var(--shadow-md);
    z-index: 50;
    font-size: var(--step--1);
    line-height: 1.5;
  }

  .wl:is(:hover, :focus-visible) + .wl-card {
    display: block;
  }

  @supports not (anchor-name: --a) {
    .wl-card {
      position: static;
      margin-top: 0.5rem;
      display: block;
    }
  }

  .graph-wrap {
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    background: var(--bg-canvas);
    padding: 1rem;
  }

  .graph-svg {
    width: 100%;
    height: auto;
    display: block;
  }

  .graph-svg[data-active] .node:not(.lit),
  .graph-svg[data-active] .graph-edge:not(.lit) {
    opacity: 0.2;
  }

  .graph-edge {
    stroke: var(--border-strong);
    stroke-width: 1px;
    transition: opacity 0.2s, stroke 0.2s;
  }

  .graph-edge.lit {
    stroke: var(--accent);
    stroke-width: 2px;
  }

  .node {
    cursor: pointer;
    transition: opacity 0.2s;
    outline: none;
  }

  .node circle {
    transition: stroke 0.2s, stroke-width 0.2s;
  }

  .node:focus-visible circle,
  .node.lit circle {
    stroke: var(--accent);
    stroke-width: 2px;
  }

  .node text {
    font-family: var(--font-sans);
    font-size: var(--step--1);
    fill: var(--text-secondary);
    text-anchor: middle;
    pointer-events: none;
  }

  @media (max-width: 600px) {
    .node:not([data-id="atlas"]):not([data-id="reading"]) text {
      display: none;
    }
  }

  .metals-list {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    align-items: center;
    margin-block: 1.5rem;
  }

  .metal-item {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--step--1);
  }

  .metal-dots {
    display: inline-flex;
    gap: 3px;
  }

  .metal-dot,
  .metal-dots .dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: inline-block;
  }

  /* ===== v2 Home ===== */
  .section-title {
    font-size: var(--step-3);
    margin-bottom: 1rem;
  }
  .section-lead {
    font-size: var(--step-0);
    color: var(--text-secondary);
    max-width: 52ch;
    margin-bottom: 1.5rem;
  }
  .fine {
    font-size: var(--step--1);
    color: var(--text-muted);
    margin-top: 1rem;
  }
  .text-link {
    text-decoration: underline;
    text-decoration-color: var(--accent);
    text-underline-offset: 0.2em;
  }
  .text-link:hover { text-decoration-thickness: 2px; }
  .mono-sample {
    font-family: var(--font-mono);
    font-size: var(--step--1);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    background: var(--bg-canvas);
    padding: 0.75rem 1rem;
    overflow-wrap: anywhere;
  }
  .two-even {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: start;
  }
  .two-even h2 { font-size: var(--step-2); margin-bottom: 1rem; }
  @media (max-width: 900px) { .two-even { grid-template-columns: 1fr; } }

  /* Hero */
  .hero { padding-block: clamp(1.5rem, 3vw, 3rem) var(--section-gap); }
  .hero-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 2rem;
  }
  .hero-grid > * { min-width: 0; }
  .hero h1 {
    grid-column: 1 / -1;
    font-size: var(--h1-page);
    line-height: 1;
    letter-spacing: -0.03em;
    font-weight: 300;
  }
  .br-wide { display: none; }
  @media (min-width: 1100px) { .br-wide { display: inline; } }
  .hero-copy { grid-column: 1 / 7; margin-top: 1.5rem; }
  .hero-copy .hero-lead { max-width: 40ch; margin-block: 0 1.75rem; }
  .hero-gem {
    grid-column: 8 / 13;
    margin: 0;
    justify-self: end;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
  }
  .hero-gem .gem { height: clamp(180px, 17vw, 260px); width: auto; }
  .hero-gem figcaption {
    font-family: var(--font-mono);
    font-size: var(--step--1);
    color: var(--text-muted);
    text-align: center;
  }
  .hero-window { grid-column: 1 / -1; margin-top: 3rem; }
  @media (max-width: 1099px) {
    .hero-copy, .hero-gem, .hero-window { grid-column: 1 / -1; }
    .hero-gem { order: -1; justify-self: start; align-items: flex-start; margin-bottom: 1rem; }
    .hero-gem .gem { height: 150px; }
    .hero-gem figcaption { text-align: left; }
  }
  .hero-in { animation: hero-fade 600ms var(--ease-out) both; }
  @supports (order: sibling-index()) {
    .hero-in { animation-delay: calc((sibling-index() - 1) * 70ms); }
  }
  @supports not (order: sibling-index()) {
    .hero-in:nth-child(1) { animation-delay: 0ms; }
    .hero-in:nth-child(2) { animation-delay: 70ms; }
    .hero-in:nth-child(3) { animation-delay: 140ms; }
    .hero-in:nth-child(4) { animation-delay: 210ms; }
  }

  /* The anodised gem */
  .gem {
    --tilt: 0deg;
    --h: 300deg;
    display: block;
    transition: --tilt 600ms var(--ease-out);
  }
  .gem polygon {
    fill: oklch(var(--l) 0.105 calc(var(--h) + var(--tilt) + var(--i) * 18deg));
    stroke: color-mix(in oklab, var(--bg-canvas) 40%, transparent);
    stroke-width: 6;
    stroke-linejoin: round;
  }
  @media (prefers-reduced-motion: no-preference) {
    .gem { animation: anodise 56s linear infinite; }
  }
  @keyframes anodise {
    0%   { --h: 60deg; }
    14%  { --h: -50deg; }
    28%  { --h: -95deg; }
    40%  { --h: -125deg; }
    58%  { --h: -270deg; }
    72%  { --h: -365deg; }
    88%  { --h: -545deg; }
    100% { --h: -660deg; }
  }
  .closing {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-top: 4rem;
  }
  .closing .gem { height: 160px; width: auto; margin-bottom: 1.5rem; }
  .closing h2 { font-size: var(--step-3); margin-bottom: 1.5rem; }
  .closing .btn-row { justify-content: center; }

  /* Tour */
  .tour {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    gap: clamp(2rem, 4vw, 4rem);
    margin-top: 1rem;
  }
  .tour-steps { list-style: none; }
  .tour-step {
    min-height: 62vh;
    display: grid;
    align-content: center;
    gap: 0.75rem;
  }
  .tour-step h3 { font-family: var(--font-serif); font-weight: 350; font-size: var(--step-2); letter-spacing: -0.015em; line-height: 1.1; }
  .tour-step p { color: var(--text-secondary); max-width: 38ch; }
  .tour-keys { color: var(--text-primary) !important; }
  .tour-inline { display: none; margin-top: 1rem; }
  .tour-stage {
    position: sticky;
    top: 6.5rem;
    align-self: start;
  }
  .tour-frame { position: relative; aspect-ratio: 1440 / 900; }
  .tour-shot {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 450ms var(--ease-out);
  }
  .tour-shot img { width: 100%; height: 100%; }
  .tour[data-step="1"] .tour-shot[data-n="1"],
  .tour[data-step="2"] .tour-shot[data-n="2"],
  .tour[data-step="3"] .tour-shot[data-n="3"],
  .tour[data-step="4"] .tour-shot[data-n="4"],
  .tour[data-step="5"] .tour-shot[data-n="5"],
  .tour[data-step="6"] .tour-shot[data-n="6"] { opacity: 1; }
  .tour-dots { display: flex; gap: 8px; justify-content: center; margin-top: 1rem; }
  .tour-dots .dot {
    inline-size: 8px;
    block-size: 8px;
    border-radius: 50%;
    border: 1px solid var(--border-strong);
  }
  .tour[data-step="1"] .tour-dots .dot[data-n="1"],
  .tour[data-step="2"] .tour-dots .dot[data-n="2"],
  .tour[data-step="3"] .tour-dots .dot[data-n="3"],
  .tour[data-step="4"] .tour-dots .dot[data-n="4"],
  .tour[data-step="5"] .tour-dots .dot[data-n="5"],
  .tour[data-step="6"] .tour-dots .dot[data-n="6"] { background: var(--text-primary); }
  @media (max-width: 1099px) {
    .tour { grid-template-columns: 1fr; }
    .tour-stage { display: none; }
    .tour-step { min-height: 0; padding-block: 1.5rem; }
    .tour-inline { display: block; }
  }
  @supports (animation-timeline: view()) {
    .tour-steps { position: relative; }
    .tour-steps::before {
      content: "";
      position: absolute;
      inset-block: 0;
      inset-inline-start: -1.25rem;
      inline-size: 1px;
      background: var(--text-primary);
      transform-origin: top;
      animation: tour-line linear both;
      animation-timeline: view();
      animation-range: entry 20% exit 80%;
    }
    @keyframes tour-line { from { scale: 1 0; } to { scale: 1 1; } }
  }
  @media (max-width: 1099px) { .tour-steps::before { display: none; } }

  /* Proof */
  .proof {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: start;
  }
  .proof > * { min-width: 0; }
  .proof .note-demo { max-inline-size: none; }
  .proof .note-panel { min-block-size: 30rem; }
  .proof-copy { position: sticky; top: 6rem; }
  .proof-copy h2 { font-size: var(--step-3); margin-bottom: 1rem; }
  .ledger { list-style: none; margin-top: 1.5rem; display: grid; gap: 1.25rem; }
  .ledger li { border-top: 1px solid var(--border-default); padding-top: 1rem; display: grid; gap: 0.25rem; }
  .ledger strong { font-family: var(--font-serif); font-weight: 400; font-size: var(--step-1); }
  .ledger span { color: var(--text-secondary); }
  @media (max-width: 1099px) {
    .proof { grid-template-columns: 1fr; }
    .proof-copy { position: static; order: -1; }
  }

  /* Tasks demo spacing */
  .tasks-demo { margin-top: 0; align-items: stretch; }
  .raw-tasks-box, .task-hub-box { padding: 1rem 1.25rem; }
  .hub-group:last-child { margin-bottom: 0; }

  /* Linked thinking */
  .link-grid {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: center;
  }
  .link-grid > * { min-width: 0; }
  .link-grid h2 { font-size: var(--step-3); margin-bottom: 1rem; }
  .wl-anchor-wrap .wl { anchor-name: --wl1; }
  .mini-table { border-collapse: collapse; margin-top: 1.5rem; font-size: var(--step--1); min-width: 14rem; }
  .mini-table caption { text-align: left; color: var(--text-muted); font-size: var(--step--1); padding-bottom: 0.25rem; }
  .mini-table th, .mini-table td { text-align: left; font-weight: 400; padding: 0.3rem 1.5rem 0.3rem 0; border-top: 1px solid var(--border-hairline); }
  .mini-table td { font-variant-numeric: tabular-nums; color: var(--text-muted); }
  @media (max-width: 900px) { .link-grid { grid-template-columns: 1fr; } }

  /* Theme strip */
  .theme-strip {
    display: flex;
    gap: 1.5rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: max(var(--gutter), calc((100vw - var(--page-max)) / 2 + var(--gutter)));
    padding: 1.5rem max(var(--gutter), calc((100vw - var(--page-max)) / 2 + var(--gutter))) 1rem;
    scroll-marker-group: after;
  }
  .theme-card {
    flex: 0 0 min(520px, 82vw);
    scroll-snap-align: start;
    display: grid;
    gap: 0.25rem;
    text-align: left;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    color: var(--text-primary);
  }
  .theme-card img {
    width: 100%;
    height: auto;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    margin-bottom: 0.5rem;
    transition: border-color var(--dur-fast) var(--ease-out);
  }
  .theme-card:hover img { border-color: var(--border-strong); }
  .theme-card[aria-pressed="true"] img { outline: 2px solid var(--text-primary); outline-offset: 2px; }
  .theme-card__name { font-family: var(--font-serif); font-size: var(--step-1); }
  .theme-card__desc { color: var(--text-muted); font-size: var(--step--1); }
  .theme-card::scroll-marker {
    content: "";
    inline-size: 8px;
    block-size: 8px;
    border-radius: 50%;
    border: 1px solid var(--border-strong);
  }
  .theme-card::scroll-marker:target-current { background: var(--text-primary); }
  .theme-strip::scroll-marker-group { display: flex; gap: 8px; justify-content: center; padding-top: 0.5rem; }
  .metals-lead { margin-top: 1rem; }
  .metals-list { margin-block: 1rem; }

  /* Phones */
  .phones {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: clamp(1rem, 3vw, 2.5rem);
    margin-top: 2.5rem;
  }
  .phones > .phone { flex: 0 0 260px; margin-inline: 0; }
  .phones > .phone:nth-child(2) { translate: 0 2.5rem; }
  @media (max-width: 900px) {
    .phones { justify-content: flex-start; overflow-x: auto; scroll-snap-type: x mandatory; scroll-marker-group: after; padding-bottom: 1rem; }
    .phones > .phone { flex: 0 0 min(260px, 72%); scroll-snap-align: center; translate: none !important; }
    .phones > .phone::scroll-marker { content: ""; inline-size: 8px; block-size: 8px; border-radius: 50%; border: 1px solid var(--border-strong); }
    .phones > .phone::scroll-marker:target-current { background: var(--text-primary); }
    .phones::scroll-marker-group { display: flex; gap: 8px; justify-content: center; }
  }

  /* v2 refinements */
  .section-lead code, .proof-copy code, .fine code { font-family: var(--font-mono); font-size: 0.85em; }
  .graph-wrap { border: 0; background: none; padding: 0; }
  .node, .node:hover { text-decoration: none; }
  .node text { text-decoration: none; }
  .graph-edge { stroke-dasharray: 2 6; animation: flow 40s linear infinite; }
  .graph-edge.lit { stroke-dasharray: none; stroke: var(--text-primary); stroke-width: 1.5px; animation: none; }
  @keyframes flow { to { stroke-dashoffset: -400; } }
  .tour-steps::before { background: var(--border-strong) !important; }
}

/* @layer pages */
@layer pages {
  /* Features Page */
  .features-layout {
    display: grid;
    grid-template-columns: minmax(0, var(--measure));
    gap: 3rem;
    align-items: start;
    padding-block: 3rem;
  }

  @media (min-width: 1100px) {
    .features-layout {
      grid-template-columns: 14rem minmax(0, var(--measure)) 16rem;
    }
  }

  .features-toc {
    display: none;
    position: sticky;
    top: 5rem;
    max-height: calc(100vh - 6rem);
    overflow-y: auto;
  }

  @media (min-width: 1100px) {
    .features-toc {
      display: block;
    }
  }

  .features-toc-mobile {
    display: block;
    margin-bottom: 2rem;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    padding: 1rem;
    background: var(--bg-elevated);
  }

  @media (min-width: 1100px) {
    .features-toc-mobile {
      display: none;
    }
  }

  .toc-progress {
    height: 1px;
    background: var(--accent);
    width: 100%;
    transform-origin: left;
    margin-bottom: 1rem;
  }

  @supports (animation-timeline: scroll()) {
    .toc-progress {
      animation: toc-grow linear;
      animation-timeline: scroll(root);
    }
    @keyframes toc-grow {
      from { scale: 0 1; }
      to { scale: 1 1; }
    }
  }

  .features-toc ol {
    list-style: none;
    scroll-target-group: auto;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  .features-toc li {
    font-size: var(--step--1);
  }

  .features-toc a {
    text-decoration: none;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .features-toc a:hover {
    color: var(--text-primary);
  }

  .features-toc a:target-current,
  .features-toc a[aria-current="true"] {
    color: var(--text-primary);
    font-weight: 500;
  }

  .toc-title {
    flex: 1;
  }

  .toc-dots {
    flex: 1;
    border-bottom: 1px dotted var(--border-strong);
    margin-inline: 0.25rem;
  }

  .toc-count {
    color: var(--text-muted);
    font-size: var(--step--1);
    font-family: var(--font-mono);
  }

  .chapter {
    margin-bottom: 5rem;
    content-visibility: auto;
    contain-intrinsic-size: auto 900px;
  }

  .chapter-header {
    margin-bottom: 2rem;
    border-bottom: 1px solid var(--border-default);
    padding-bottom: 1rem;
  }

  .chapter-header h2 {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: var(--step-2);
    margin-bottom: 0.5rem;
  }

  .chapter-intro {
    font-size: var(--step-0);
    color: var(--text-secondary);
  }

  .feat {
    margin-bottom: 3rem;
    position: relative;
  }

  .feat h3 {
    font-size: var(--step-1);
    font-weight: 400;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .feat p {
    margin-bottom: 0.75rem;
  }

  .feat-figure {
    margin-block: 1.5rem;
  }

  .tech {
    margin-top: 1rem;
    border-left: 2px solid var(--border-default);
    padding-left: 1rem;
    font-size: var(--step--1);
    color: var(--text-secondary);
  }

  .tech summary {
    cursor: pointer;
    font-weight: 500;
    color: var(--text-muted);
  }

  .margin {
    font-size: var(--step--1);
    color: var(--text-muted);
    border-left: 1px solid var(--border-default);
    padding-left: 1rem;
    margin-top: 1rem;
  }

  @media (min-width: 1100px) {
    .feat .margin {
      position: absolute;
      left: calc(100% + 3rem);
      top: 0;
      width: 15rem;
      margin-top: 0;
    }
  }

  /* Templates list 5 columns */
  .templates-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1.5rem;
    margin-block: 1.5rem;
  }

  @media (max-width: 900px) {
    .templates-grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  @media (max-width: 560px) {
    .templates-grid {
      grid-template-columns: 1fr;
    }
  }

  .template-col h4 {
    font-family: var(--font-sans);
    font-size: var(--step--1);
    font-weight: 500;
    color: var(--text-muted);
    margin-bottom: 0.75rem;
  }

  .template-col ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    font-size: var(--step--1);
  }

  /* Shortcuts Tables */
  .shortcuts-filter-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-block: 1.5rem;
  }

  .shortcuts-search {
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    background: var(--bg-elevated);
    padding: 0.5rem 0.75rem;
    color: var(--text-primary);
    font-size: var(--step--1);
    width: 100%;
    max-width: 300px;
  }

  .shortcuts-count {
    font-family: var(--font-mono);
    font-size: var(--step--1);
    color: var(--text-muted);
  }

  .shortcuts-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 2.5rem;
    font-size: var(--step--1);
  }

  .shortcuts-table th, .shortcuts-table td {
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid var(--border-hairline);
    text-align: left;
  }

  .shortcuts-table th {
    font-weight: 500;
    color: var(--text-muted);
    font-size: var(--step--1);
  }

  /* Privacy Vault Tree */
  .vault-tree {
    list-style: none;
    font-family: var(--font-mono);
    font-size: var(--step--1);
    background: var(--bg-canvas);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    padding: 1.5rem;
    margin-block: 1.5rem;
    line-height: 1.8;
    overflow-x: auto;
  }

  .vault-tree ul {
    list-style: none;
    padding-left: 1.5rem;
    border-left: 1px solid var(--border-default);
    margin-left: 0.5rem;
  }

  /* Download Page Steps */
  .steps-list {
    list-style: none;
    counter-reset: step-counter;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-block: 1.5rem;
  }

  .step-item {
    counter-increment: step-counter;
    display: flex;
    gap: 1.25rem;
    align-items: baseline;
  }

  .step-num {
    font-family: var(--font-mono);
    font-size: var(--step-0);
    color: var(--accent);
    font-weight: 500;
    width: 2ch;
  }

  .code-block-wrap {
    position: relative;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    background: var(--bg-canvas);
    padding: 1rem;
    margin-block: 0.75rem;
    font-family: var(--font-mono);
    font-size: var(--step--1);
  }

  .copy-btn {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    background: var(--bg-elevated);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    padding: 0.25rem 0.5rem;
    font-size: var(--step--1);
    color: var(--text-secondary);
    cursor: pointer;
  }
  .copy-btn:hover {
    color: var(--text-primary);
    border-color: var(--border-strong);
  }
}

/* v2 features page */
@layer pages {
  .features-layout { grid-template-columns: minmax(0, 1fr); padding-block: 2rem var(--section-gap); gap: 2rem; }
  @media (min-width: 1100px) {
    .features-layout { grid-template-columns: 14rem minmax(0, 62rem); gap: 4rem; }
  }
  .features-intro { margin-bottom: 2.5rem; }
  .features-intro h1 { font-size: var(--h1-page); line-height: 1; letter-spacing: -0.03em; font-weight: 300; margin-bottom: 1.25rem; }
  .features-intro .section-lead { margin-bottom: 0; }
  .features-toc-mobile ol { list-style: none; display: grid; gap: 0.5rem; margin-top: 0.75rem; }
  .chapter { margin-bottom: clamp(3rem, 6vw, 5rem); }
  .chapter-header { border-bottom: 0; padding-bottom: 0; margin-bottom: 1.5rem; }
  .chapter-header h2 { font-size: var(--step-3); gap: 1rem; margin-bottom: 0.5rem; }
  .chapter-header h2 .sigil { width: 28px; height: 28px; }
  .shot-crop { aspect-ratio: 16 / 8; margin-bottom: 2rem; box-shadow: none; }
  .shot-crop img { width: 100%; height: 100%; object-fit: cover; object-position: 50% var(--fy, 30%); }
  .feat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 3rem; }
  @media (max-width: 900px) { .feat-grid { grid-template-columns: 1fr; } }
  .feat { margin-bottom: 0; border-top: 1px solid var(--border-hairline); padding-top: 1rem; }
  .feat h3 { font-family: var(--font-sans); font-size: var(--step-0); font-weight: 600; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: 0.4rem; }
  .feat p { color: var(--text-secondary); margin-bottom: 0.5rem; }
  .feat-keys { display: flex; gap: 0.25rem; flex-wrap: wrap; }
  .feat code { font-family: var(--font-mono); font-size: 0.85em; }
  .specimen { margin-top: 2rem; border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: 1.25rem 1.5rem; background: var(--bg-canvas); }
  .specimen-templates { padding: 0.5rem 1.5rem 1rem; }
  .specimen-history { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
  @media (max-width: 700px) { .specimen-history { grid-template-columns: 1fr; } }
  .specimen ul { list-style: none; font-size: var(--step--1); }
  .specimen li { display: flex; gap: 0.75rem; padding: 0.3rem 0; border-top: 1px solid var(--border-hairline); }
  .specimen li span { color: var(--text-muted); margin-inline-start: auto; }
  .specimen li em { font-style: normal; text-decoration: underline; text-decoration-color: var(--accent); }
  .spec-h { font-size: var(--step--1); color: var(--text-muted); margin-bottom: 0.5rem; }
  .vault-tree-mono { font-family: var(--font-mono); font-size: var(--step--1); line-height: 1.7; white-space: pre-wrap; }
  .phones-small { margin-top: 2rem; }
  .phones-small > .phone { flex-basis: 200px; }
  .chapter.plain { content-visibility: visible; }
  .plain-list { padding-left: 1.25rem; display: grid; gap: 0.5rem; max-width: 52ch; }
  .hood { display: grid; gap: 1rem; max-width: 62ch; }
  .hood > div { display: grid; grid-template-columns: 7rem 1fr; gap: 1rem; border-top: 1px solid var(--border-hairline); padding-top: 0.75rem; }
  .hood dt { font-weight: 600; }
  .hood dd { color: var(--text-secondary); }
}

@layer pages {
  .combo { display: inline-flex; gap: 0.25rem; margin-right: 0.75rem; }
  .feat-keys { gap: 0.25rem 0; }
}

/* v3: hero, scroll-tinted page, numbered chapters */
@property --scroll-h { syntax: "<angle>"; inherits: true; initial-value: 60deg; }

:root { --page-bg: var(--bg-app); }
@supports (animation-timeline: scroll()) {
  :root {
    --page-bg: color-mix(in oklch, var(--bg-app) 44%, light-dark(oklch(0.94 0.04 var(--scroll-h)), oklch(0.27 0.055 var(--scroll-h))));
    animation: page-hue linear both;
    animation-timeline: scroll(root);
  }
  @keyframes page-hue {
    0%   { --scroll-h: 60deg; }
    22%  { --scroll-h: -50deg; }
    45%  { --scroll-h: -125deg; }
    68%  { --scroll-h: -270deg; }
    86%  { --scroll-h: -365deg; }
    100% { --scroll-h: -545deg; }
  }
}
@layer base { body { background: var(--page-bg); } }
@layer components { .site-header { background: var(--page-bg); } }
.site-header { background: var(--page-bg); }

@layer sections {
  .hero { padding-block: clamp(1.5rem, 3vw, 3rem) var(--section-gap); }
  .hero-grid h1 { grid-column: 1 / 9; grid-row: 1; font-size: var(--h1-page); }
  .hero-copy { grid-column: 1 / 7; grid-row: 2; margin-top: 2rem; }
  .hero-gem { grid-column: 9 / 13; grid-row: 1 / 3; align-self: center; justify-self: end; margin: 0; }
  .hero-gem .gem { height: clamp(260px, 32vw, 470px); width: auto; }
  .hero-window { grid-row: 3; margin-top: 4.5rem; }
  .hero-meta { font-family: var(--font-sans); font-size: var(--step--1); margin-top: 1rem; }
  @media (max-width: 1099px) {
    .hero-grid h1, .hero-copy, .hero-gem, .hero-window { grid-column: 1 / -1; grid-row: auto; }
    .hero-gem { order: -1; justify-self: start; margin: 0 0 1.5rem; }
    .hero-gem .gem { height: 150px; }
    .hero-window { margin-top: 2.5rem; }
  }
  @supports (animation-timeline: view()) {
    .hero-window .window-frame {
      transform-origin: 50% 0;
      animation: window-rise linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 40%;
    }
    @keyframes window-rise { from { scale: 0.9; translate: 0 2rem; } to { scale: 1; translate: 0 0; } }
  }
}

@layer pages {
  .toc-n { font-family: var(--font-serif); font-style: italic; color: var(--text-muted); width: 1.1rem; text-align: right; }
  .chap-n { font-family: var(--font-serif); font-style: italic; font-weight: 300; color: var(--text-muted); min-width: 2.2rem; }
  .features-toc a { gap: 0.6rem; }
}

/* Start-here page */
@layer pages {
  .start-hero { padding-block: clamp(2rem, 5vw, 4.5rem) var(--section-gap); }
  .start-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
  .start-grid h1 { font-size: var(--h1-page); line-height: 1; letter-spacing: -0.03em; font-weight: 300; margin-bottom: 1.5rem; }
  .start-lead { font-size: var(--step-1); color: var(--text-secondary); line-height: 1.5; margin-bottom: 2rem; max-width: 34ch; }
  .start-shot { margin: 0; }
  .start-narrow { max-width: 46rem; }
  .start-narrow .steps-list { margin-top: 1.5rem; }
  @media (max-width: 900px) { .start-grid { grid-template-columns: 1fr; } }
  .faq details { border-top: 1px solid var(--border-default); padding-block: 1rem; }
  .faq details:last-of-type { border-bottom: 1px solid var(--border-default); }
  .faq summary { cursor: pointer; font-family: var(--font-serif); font-size: var(--step-1); }
  .faq details p { color: var(--text-secondary); margin-top: 0.5rem; max-width: 52ch; }
}

/* Spacing system: one scale (0.5 / 1 / 2 / 3.5rem + --section-gap), one h1, one left edge */
@layer pages {
  .page-head { margin-bottom: var(--section-gap); }
  .page-head h1, .features-intro h1, .start-grid h1 { font-size: var(--h1-page); line-height: 1; letter-spacing: -0.03em; font-weight: 300; margin-bottom: var(--gap-m); }
  .page-head .section-lead, .features-intro .section-lead { margin-bottom: 0; }
  .page-doc { padding-block: var(--gap-l) var(--section-gap); }
  .page-doc > * { max-width: 46rem; }
  .page-doc section + section { margin-top: var(--section-gap); }
  .page-doc section > * + * { margin-top: var(--gap-m); }
  .page-doc section > h2 { font-size: var(--step-2); margin-bottom: 0; }
  .page-doc h3 { font-size: var(--step-0); font-weight: 600; font-family: var(--font-sans); }
  .page-doc section > h3 { margin-top: var(--gap-l); }
  .page-doc p { margin-bottom: 0; }
  .page-doc .btn-row { margin-top: var(--gap-m); }
  .start-narrow { max-width: var(--page-max); }
  .start-narrow > * { max-width: 46rem; }
  .start-hero { padding-block: var(--gap-l) var(--section-gap); }
  .closing { margin-top: var(--section-gap); }
  .chapter { margin-bottom: var(--section-gap); }
  .two-even h2, .proof-copy h2, .link-grid h2, .section-title { font-size: var(--step-3); }
  .section-title, .two-even h2, .proof-copy h2, .link-grid h2 { margin-bottom: var(--gap-m); }
  .section-lead { margin-bottom: var(--gap-l); }
  .two-even .section-lead, .proof-copy .section-lead, .link-grid .section-lead { margin-bottom: var(--gap-m); }
  .tasks-demo { margin-top: 0; }
}

@layer pages {
  .page-doc section div > * + * { margin-top: var(--gap-s); }
  .page-doc section div > h2 + *, .page-doc section div > h3 + * { margin-top: var(--gap-s); }
  .page-doc section div > .btn-row { margin-top: var(--gap-m); }
  .page-doc section div > p + .btn-row + p { margin-top: var(--gap-m); }
  .page-doc section > div { margin-top: var(--gap-m); }
  .page-doc section > h2 + div { margin-top: var(--gap-m); }
  .page-doc .steps-list { margin-top: var(--gap-m); }
  .page-doc section > p { color: var(--text-secondary); }
  .page-doc ul { padding-left: 1.25rem; }
}

@layer pages {
  .page-doc h2 { font-size: var(--step-2); line-height: 1.15; }
  .page-doc section > h2 + * { margin-top: 1.5rem; }
  .page-doc section div > h2 { font-size: var(--step-1); }
  .page-doc section div[style*="grid"] > * { margin-top: 0; }
  .page-head h1, .features-intro h1, .start-grid h1 { margin-bottom: 1.25rem; }
}

/* CSP and Phase 4 Utilities */
.facet-0 { --i: 0; --l: 0.84; }
.facet-1 { --i: 1; --l: 0.72; }
.facet-2 { --i: 2; --l: 0.66; }
.facet-3 { --i: 3; --l: 0.66; }
.facet-4 { --i: 4; --l: 0.58; }
.facet-5 { --i: 5; --l: 0.54; }
.facet-6 { --i: 6; --l: 0.78; }
.facet-7 { --i: 7; --l: 0.62; }

.shot-crop.crop-25 { --fy: 25%; }
.shot-crop.crop-20 { --fy: 20%; }

.dot-brass-light { background: #CDB27B; }
.dot-brass-dark { background: #785913; }
.dot-vermilion-light { background: #E2572B; }
.dot-vermilion-dark { background: #A8330F; }
.dot-oxblood-light { background: #D96868; }
.dot-oxblood-dark { background: #7A2E2E; }
.dot-cognac-light { background: #E58B44; }
.dot-cognac-dark { background: #8A4B22; }
.dot-verdigris-light { background: #5EB698; }
.dot-verdigris-dark { background: #256C54; }
.dot-ink-light { background: #EAE6DD; }
.dot-ink-dark { background: #1B1A17; }

.h3-step-0 { font-size: var(--step-0); }
.th-width-200 { width: 200px; }
.text-muted-sm { color: var(--text-muted); font-size: var(--step--1); }
.text-muted-xs-mb8 { color: var(--text-muted); font-size: var(--step--1); margin-bottom: 8px; }
.text-muted-xs-mt12 { color: var(--text-muted); font-size: var(--step--1); margin-top: 12px; }
.text-secondary-prose { color: var(--text-secondary); line-height: 1.6; }
.legal-list { padding-left: 1.5rem; color: var(--text-secondary); display: flex; flex-direction: column; gap: 0.5rem; }

/* Beta Banner & Badges */
.beta-banner {
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border-hairline);
  padding: 0.4rem 1rem;
  font-size: var(--step--1);
  color: var(--text-secondary);
}
.beta-banner .page {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.badge-beta {
  display: inline-block;
  padding: 0.1rem 0.45rem;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: var(--ink-fg);
  line-height: 1.2;
}

/* Pricing Section */
.pricing-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-block: var(--gap-m);
}
.toggle-btn {
  background: var(--bg-canvas);
  border: 1px solid var(--border-default);
  color: var(--text-secondary);
  padding: 0.4rem 1rem;
  border-radius: var(--radius-sm);
  font-size: var(--step-0);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.toggle-btn[aria-pressed="true"] {
  border-color: var(--accent);
  color: var(--text-primary);
  font-weight: 600;
}
.toggle-discount {
  font-size: var(--step--1);
  color: var(--accent);
  font-weight: 500;
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
  margin-block: var(--gap-l);
}
@media (max-width: 900px) {
  .pricing-grid {
    grid-template-columns: 1fr;
  }
}

.plan-card {
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: 2rem 1.75rem;
  background: var(--bg-canvas);
  display: flex;
  flex-direction: column;
}
.plan-card.highlight {
  border-color: var(--accent);
  position: relative;
}
.plan-header h3 {
  font-size: var(--step-2);
  margin-bottom: 0.5rem;
}
.plan-desc {
  color: var(--text-secondary);
  font-size: var(--step--1);
  min-height: 2.5em;
  margin-bottom: 1.5rem;
}
.plan-price-wrap {
  margin-bottom: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--border-hairline);
}
.plan-price {
  font-size: var(--step-3);
  font-weight: 600;
  color: var(--text-primary);
  font-family: var(--font-mono);
}
.plan-period {
  font-size: var(--step--1);
  color: var(--text-secondary);
}
.plan-meta {
  font-size: var(--step--1);
  color: var(--text-muted);
  margin-top: 0.25rem;
}
.plan-features {
  list-style: none;
  padding: 0;
  margin: 0 0 2rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  flex: 1;
}
.plan-features li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: var(--step--1);
  color: var(--text-secondary);
}
.plan-features svg {
  flex-shrink: 0;
  margin-top: 0.15rem;
  color: var(--accent);
}
.plan-card .btn {
  width: 100%;
  text-align: center;
  justify-content: center;
}

.pricing-callout {
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: 1.5rem;
  background: var(--bg-elevated);
  margin-block: var(--gap-m);
}
.pricing-callout.betanow-box {
  border-left: 4px solid var(--accent);
}
.pricing-callout h4 {
  font-size: var(--step-0);
  margin-bottom: 0.5rem;
}
.pricing-callout p {
  color: var(--text-secondary);
  font-size: var(--step--1);
  line-height: 1.6;
}

.steps-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.5rem;
  margin-block: var(--gap-l);
}
@media (max-width: 900px) {
  .steps-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 600px) {
  .steps-grid {
    grid-template-columns: 1fr;
  }
}
.step-item {
  border-top: 2px solid var(--accent);
  padding-top: 1rem;
}
.step-item h4 {
  font-size: var(--step-0);
  margin-bottom: 0.5rem;
}
.step-item p {
  font-size: var(--step--1);
  color: var(--text-secondary);
  line-height: 1.5;
}

/* Legal & Account Layouts */
.legal-layout {
  max-width: 52rem;
  margin-inline: auto;
  padding-block: var(--gap-l) var(--section-gap);
}
.legal-layout h1 {
  font-size: var(--step-4);
  margin-bottom: 0.5rem;
}
.legal-meta {
  color: var(--text-muted);
  font-size: var(--step--1);
  margin-bottom: var(--gap-l);
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border-hairline);
}
.legal-section {
  margin-bottom: var(--gap-l);
}
.legal-section h2 {
  font-size: var(--step-2);
  margin-bottom: 0.75rem;
}
.legal-section h3 {
  font-size: var(--step-1);
  margin-bottom: 0.5rem;
}
.legal-section p, .legal-section li {
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 0.75rem;
}
.table-wrap {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.legal-table {
  width: 100%;
  border-collapse: collapse;
  margin-block: 1rem;
  font-size: var(--step--1);
}
.legal-table th, .legal-table td {
  border: 1px solid var(--border-default);
  padding: 0.6rem 0.8rem;
  text-align: left;
}
.legal-table th {
  background: var(--bg-elevated);
  font-weight: 600;
}
.legal-table td {
  color: var(--text-secondary);
}

.account-card {
  max-width: 28rem;
  margin: var(--gap-l) auto;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: 2rem;
  background: var(--bg-canvas);
}
.account-card h1 {
  font-size: var(--step-2);
  margin-bottom: 0.5rem;
}
.account-card p {
  color: var(--text-secondary);
  font-size: var(--step--1);
  margin-bottom: 1.5rem;
}
.form-group {
  margin-bottom: 1.25rem;
}
.form-label {
  display: block;
  font-size: var(--step--1);
  font-weight: 500;
  margin-bottom: 0.35rem;
}
.form-input {
  width: 100%;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--bg-app);
  color: var(--text-primary);
  font-size: var(--step-0);
  box-sizing: border-box;
}
.form-input:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.account-status {
  margin-top: 1rem;
  font-size: var(--step--1);
  color: var(--text-secondary);
}

.account-card--wide {
  max-width: 48rem;
}

.page--wide {
  max-width: 50rem;
}

.dashboard-header {
  margin-bottom: var(--gap-m);
}

.dashboard-sub {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap-s);
  color: var(--text-secondary);
  font-size: var(--step--1);
}

.dashboard-section {
  margin-top: var(--gap-m);
  margin-bottom: var(--gap-m);
}

.dashboard-section h2 {
  font-size: var(--step-1);
  margin-bottom: 0.75rem;
}

.plan-status-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: var(--gap-m);
  margin-bottom: var(--gap-m);
  padding: var(--gap-m);
  background: var(--bg-panel);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-default);
}

.plan-status-item {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.plan-status-label {
  font-size: var(--step--1);
  color: var(--text-muted);
}

.plan-status-val {
  font-size: var(--step-0);
  font-weight: 600;
  color: var(--text-primary);
}

.badge {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: var(--radius-sm);
  font-size: var(--step--1);
  font-weight: 600;
  border: 1px solid var(--border-default);
}

.badge--active {
  background: var(--bg-elevated);
  color: var(--success);
  border-color: var(--success);
}

.badge--grace {
  background: var(--bg-elevated);
  color: var(--warning);
  border-color: var(--warning);
}

.badge--expired {
  background: var(--bg-elevated);
  color: var(--danger);
  border-color: var(--danger);
}

.badge--neutral {
  background: var(--bg-elevated);
  color: var(--text-muted);
}

.callout {
  padding: 0.75rem 1rem;
  border-radius: var(--radius-sm);
  margin: var(--gap-m) 0;
  border: 1px solid var(--border-default);
}

.callout p {
  margin: 0;
  font-size: var(--step--1);
}

.callout--warning {
  border-color: var(--warning);
  background: var(--bg-elevated);
  color: var(--warning);
}

.callout--danger {
  border-color: var(--danger);
  background: var(--bg-elevated);
  color: var(--danger);
}

.callout--info {
  border-color: var(--border-strong);
  background: var(--bg-elevated);
  color: var(--text-secondary);
}

.form-row {
  display: flex;
  gap: var(--gap-s);
  align-items: flex-start;
  flex-wrap: wrap;
}

.form-group--grow {
  flex: 1;
  min-width: 140px;
}

.form-actions-secondary {
  margin-top: 0.75rem;
}

.btn-danger {
  background: var(--danger);
  color: var(--ink-fg);
  border: 1px solid var(--danger);
  border-radius: var(--radius-sm);
  padding: 0.6rem 1.25rem;
  font-size: var(--step-0);
  cursor: pointer;
}

.btn-danger:hover {
  opacity: 0.9;
}

.btn-danger:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-link {
  background: none;
  border: none;
  padding: 0;
  color: var(--accent);
  text-decoration: underline;
  cursor: pointer;
  font-size: var(--step--1);
}

.account-note {
  font-size: var(--step--1);
  color: var(--text-muted);
  margin-top: 0.75rem;
}

.form-checkbox {
  margin: 1rem 0;
}

.form-checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: var(--step--1);
  color: var(--text-secondary);
  cursor: pointer;
}

.form-checkbox-label input[type="checkbox"] {
  margin-top: 0.2rem;
}

.form-input--code {
  letter-spacing: 0.25em;
  font-weight: 600;
  font-size: var(--step-1);
  text-align: center;
  max-width: 12rem;
}

.plan-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--gap-s);
  margin-bottom: var(--gap-m);
}

.plan-option, .period-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--bg-panel);
  cursor: pointer;
}

.plan-option:hover, .period-option:hover {
  border-color: var(--border-strong);
}

.plan-option input:checked + .plan-option__title,
.period-option input:checked + span {
  font-weight: 600;
  color: var(--accent);
}

.period-options {
  display: flex;
  gap: var(--gap-s);
  margin-bottom: var(--gap-m);
}

.summary-box {
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--bg-panel);
  padding: var(--gap-m);
  margin: var(--gap-m) 0;
}

.summary-line {
  display: flex;
  justify-content: space-between;
  font-size: var(--step--1);
  margin-bottom: 0.5rem;
}

.summary-divider {
  border: none;
  border-top: 1px solid var(--border-default);
  margin: 0.5rem 0;
}

.summary-line--total {
  font-size: var(--step-0);
  margin-bottom: 0;
}

.danger-zone {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border-default);
}

.danger-zone h3 {
  color: var(--danger);
  font-size: var(--step-0);
  margin-bottom: 0.5rem;
}

.delete-stepup {
  margin-top: var(--gap-m);
  padding: var(--gap-m);
  border: 1px solid var(--danger);
  border-radius: var(--radius-sm);
  background: var(--bg-canvas);
}

.vault-members-list {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0;
}

.vault-members-list li {
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--border-default);
  font-size: var(--step--1);
}

.table-wrap {
  overflow-x: auto;
  margin-top: 0.75rem;
}