@layer reset, base, tokens, layout, components, utilities;

@font-face { font-family: "EB Garamond"; src: url("fonts/eb-garamond-500-normal-latin.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url("fonts/eb-garamond-600-normal-latin.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url("fonts/eb-garamond-500-italic-latin.woff2") format("woff2"); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("fonts/jetbrains-mono-400-normal-latin.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("fonts/jetbrains-mono-500-normal-latin.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("fonts/instrument-sans-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("fonts/instrument-sans-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("fonts/instrument-sans-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }

@layer reset {
  :where(*, *::before, *::after) { box-sizing: border-box; }
  :where(body, h1, h2, h3, p, figure, dl, dd, ol, ul) { margin: 0; }
  :where(ol, ul)[role="list"] { list-style: none; padding: 0; }
  :where(img, svg) { display: block; max-inline-size: 100%; block-size: auto; }
  :where(button, input) { font: inherit; color: inherit; }
}

@layer tokens {
  /* Ink comes from the DHCraft website. The accents are a spectrum at matched OKLCH lightness,
     so every hue carries the same visual weight and the rainbow reads as one calm system. */
  :root {
    color-scheme: light dark;

    --paper: oklch(100% 0 0);
    --ink: oklch(28.3% 0.064 270.7); /* #1e2749 */
    --ink-deep: oklch(24% 0.053 271); /* #161d38 */
    --purple-deep: oklch(41.6% 0.105 307); /* #5b3a78 */

    --red: oklch(66% 0.16 25);
    --orange: oklch(74% 0.14 60);
    --yellow: oklch(84% 0.14 95);
    --green: oklch(70% 0.14 150);
    --cyan: oklch(74% 0.1 205);
    --blue: oklch(68% 0.12 255);
    --purple: oklch(58% 0.15 300);
    --pink: oklch(70% 0.13 345);
    --spectrum: linear-gradient(90deg, var(--red), var(--orange), var(--yellow), var(--green), var(--cyan), var(--blue), var(--purple));

    --bg: light-dark(var(--paper), var(--ink-deep));
    --surface: light-dark(oklch(97.6% 0.004 270), oklch(28% 0.06 270));
    --raised: light-dark(white, oklch(31% 0.06 270));
    --text: light-dark(var(--ink), oklch(95% 0.01 270));
    --text-muted: light-dark(oklch(45% 0.03 270), oklch(80% 0.025 270));
    --on-ink: oklch(88% 0.02 270);
    --rule: light-dark(oklch(90% 0.01 270), oklch(40% 0.05 270));
    --grid: light-dark(oklch(28% 0.064 271 / 0.07), oklch(100% 0 0 / 0.06));
    --link: light-dark(var(--purple-deep), oklch(82% 0.1 315));
    --focus: light-dark(var(--purple-deep), var(--orange));
    --warn-bg: light-dark(oklch(95% 0.05 75), oklch(40% 0.08 65));
    --ok: oklch(55% 0.14 150);

    --font-display: "EB Garamond", Georgia, serif;
    --font-body: "Instrument Sans", system-ui, sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, monospace;

    --step--1: clamp(0.875rem, 0.85rem + 0.1vw, 0.94rem);
    --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
    --step-1: clamp(1.15rem, 1.07rem + 0.4vw, 1.4rem);
    --step-2: clamp(2rem, 1.6rem + 1.8vw, 3.1rem);
    --step-3: clamp(2.9rem, 2rem + 3.8vw, 5.4rem);
    --step-4: clamp(2.7rem, 1.7rem + 4.8vw, 6rem);
    --radius-control: 0.5rem;

    --space-xs: 0.5rem;
    --space-s: 0.75rem;
    --space-m: clamp(1rem, 0.9rem + 0.5vw, 1.5rem);
    --space-l: clamp(2rem, 1.6rem + 2vw, 3.5rem);
    --space-xl: clamp(4rem, 3rem + 5vw, 8rem);
    --space-section: clamp(3.5rem, 2.5rem + 4vw, 6rem);

    --radius: 1rem;
    --measure: 62ch;
    --page: 76rem;
    --shadow: 0 1.75rem 3.5rem -1.75rem light-dark(oklch(28% 0.064 271 / 0.35), oklch(0% 0 0 / 0.6));
  }
}

@layer base {
  html { scroll-padding-block-start: 5rem; }
  @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

  body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    font-size: var(--step-0);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
  }

  h1, h2, h3 {
    font-family: var(--font-display);
    font-weight: 500;
    line-height: 1.08;
    letter-spacing: -0.01em;
    text-wrap: balance;
  }

  h3 { font-size: calc(var(--step-1) * 1.12); font-weight: 600; }

  a { color: var(--link); text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
  a:hover { text-decoration-thickness: 2px; }

  :focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 0.25rem; }
}

@layer layout {
  .wrap {
    inline-size: min(100% - 2 * var(--space-m), var(--page));
    margin-inline: auto;
  }

  .section { padding-block: var(--space-section); }
  .section.tinted { background: var(--surface); }
  .section-title { font-size: var(--step-2); margin-block-end: var(--space-l); }
}

@layer components {
  .skip-link {
    position: absolute;
    inset-inline-start: var(--space-m);
    inset-block-start: -10rem;
    padding: var(--space-xs) var(--space-s);
    background: var(--text);
    color: var(--bg);
    z-index: 10;
    &:focus { inset-block-start: var(--space-xs); }
  }

  .site-header {
    position: sticky;
    inset-block-start: 0;
    z-index: 5;
    background: var(--bg);

    &::after { content: ""; position: absolute; inset-inline: 0; inset-block-end: 0; block-size: 2px; background: var(--spectrum); }

    & .wrap {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 0 var(--space-m);
      min-block-size: 4rem;
    }
  }

  .brand {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding-block: 0.6rem;
    color: var(--text);
    text-decoration: none;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.45rem;

    & svg { inline-size: 2.9rem; block-size: auto; flex: none; }
  }

  .mark-line { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .mark-prism { fill: light-dark(white, var(--ink-deep)); stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
  .mark-ray { fill: none; stroke-width: 2.2; stroke-linecap: round; }
  .r1 { stroke: var(--red); }
  .r2 { stroke: var(--orange); }
  .r3 { stroke: var(--yellow); }
  .r4 { stroke: var(--green); }
  .r5 { stroke: var(--cyan); }
  .r6 { stroke: var(--blue); }
  .r7 { stroke: var(--purple); }

  .site-nav ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 var(--space-m);
  }

  .site-nav a {
    display: inline-block;
    padding-block: 0.6rem;
    color: var(--text);
    text-decoration: none;
    font-weight: 500;
    font-size: var(--step--1);
    &:hover { text-decoration: underline; }
  }

  .site-nav .nav-cta {
    padding-inline: 1rem;
    border-radius: var(--radius-control);
    background: var(--text);
    color: var(--bg);
    &:hover { text-decoration: none; background: var(--purple-deep); color: white; }
  }

  /* On narrow screens the section links form a swipeable row under the wordmark, request first,
     so every section stays one tap away without a script-driven menu. */
  @media (max-width: 52rem) {
    .site-nav {
      inline-size: 100%;
      overflow-x: auto;
      scrollbar-width: none;
      mask-image: linear-gradient(90deg, black 85%, transparent);
    }
    .site-nav ul { flex-wrap: nowrap; padding-block-end: var(--space-xs); }
    .site-nav li { flex: none; }
    .site-nav li:last-child { order: -1; }
    .site-nav li:nth-last-child(2) { padding-inline-end: var(--space-l); }
  }

  @media (max-width: 24rem) {
    .brand { font-size: var(--step-0); }
    .site-nav .nav-cta { padding-inline: 0.75rem; }
  }

  /* "(research)" is set back so the name reads as tools first, research as the home ground. */
  .paren {
    font-style: italic;
    font-weight: 500;
    color: var(--text-muted);
  }

  /* The bang is the one playful gesture of the page: the palette in a single glyph. */
  .bang {
    background: linear-gradient(180deg, var(--red), var(--orange), var(--yellow), var(--green), var(--cyan), var(--blue), var(--purple));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    padding-inline-end: 0.04em;
  }

  /* The hero fills the first screen so the request button never sits above an empty band. */
  .hero {
    display: grid;
    align-content: center;
    min-block-size: min(50rem, calc(100svh - 4rem));
    padding-block: var(--space-l);
    overflow: clip;
    position: relative;
    isolation: isolate;

    /* A faint measuring grid, the instrument side of the identity. */
    &::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -1;
      background-image:
        linear-gradient(var(--grid) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid) 1px, transparent 1px);
      background-size: 3rem 3rem;
      mask-image: radial-gradient(ellipse 60% 70% at 72% 45%, black, transparent);
    }
  }

  .hero-grid {
    display: grid;
    gap: var(--space-l);
    align-items: center;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr));
  }

  .hero h1 {
    font-size: var(--step-3);
    font-weight: 500;
    letter-spacing: -0.015em;
    line-height: 1;
  }

  .lede {
    margin-block: var(--space-m) var(--space-l);
    max-inline-size: 40ch;
    font-size: var(--step-1);
    color: var(--text-muted);
  }

  .provider {
    display: inline-flex;
    align-items: center;
    gap: var(--space-s);
    margin-block-start: var(--space-l);
    color: var(--text-muted);
    text-decoration: none;
    font-size: var(--step--1);
    font-weight: 500;

    & img { inline-size: 2.5rem; block-size: 2.5rem; }
    &:hover { color: var(--text); }
  }

  .actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-s);
    align-items: center;
  }

  .button {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    min-block-size: 3rem;
    padding: 0.6rem 1.2rem;
    border-radius: var(--radius-control);
    border: 1px solid var(--rule);
    color: var(--text);
    text-decoration: none;
    font-weight: 600;
    transition: transform 150ms, background-color 150ms, border-color 150ms;

    &:hover { border-color: var(--text); text-decoration: none; }
    &.primary { background: var(--text); color: var(--bg); border-color: var(--text); }
    &.primary::after { content: "→"; }
    &.primary:hover { background: var(--purple-deep); border-color: var(--purple-deep); color: white; }
    &.on-dark { background: var(--paper); color: var(--ink); border-color: var(--paper); }
    &.on-dark:hover { background: var(--orange); border-color: var(--orange); color: var(--ink); }
    &.on-dark-ghost { color: var(--paper); border-color: oklch(100% 0 0 / 0.35); }
    &.on-dark-ghost:hover { border-color: var(--paper); }
  }

  @media (prefers-reduced-motion: no-preference) {
    .button:hover { transform: translateY(-2px); }
  }

  /* Before and after: scattered files fall behind one tool that checks while you read. */
  .compare {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-areas: "stack";
    padding-block: var(--space-m);

  }

  .pane { grid-area: stack; min-inline-size: 0; }

  .fig-caption {
    grid-column: 1 / -1;
    margin-block-start: var(--space-m);
    max-inline-size: 60ch;
    font-size: var(--step--1);
    color: var(--text-muted);

    & span { font-family: var(--font-mono); font-weight: 500; font-size: 0.85em; color: var(--text); margin-inline-end: 0.4rem; }
  }

  .before {
    justify-self: start;
    align-self: start;
    inline-size: min(60%, 17rem);
    opacity: 0.85;
  }

  .after {
    justify-self: end;
    align-self: end;
    inline-size: 82%;
    margin-block-start: 8.5rem;
    z-index: 1;
  }

  .pane-label {
    display: inline-block;
    margin-block-end: var(--space-xs);
    padding: 0.15rem 0.6rem;
    border-radius: 0.35rem;
    background: var(--bg);
    box-shadow: 0 0 0 1px var(--rule);
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: 0.78rem;
    color: var(--text-muted);
  }

  .after { position: relative; }

  .after .pane-label {
    position: absolute;
    inset-block-start: -0.9rem;
    inset-inline-end: 1rem;
    z-index: 2;
    margin: 0;
    background: var(--text);
    color: var(--bg);
    box-shadow: none;
  }

  .files {
    display: grid;
    gap: 0.45rem;
    padding: var(--space-s);
    border-radius: var(--radius);
    background: var(--surface);
    border: 1px dashed var(--rule);
    font-size: 0.9rem;
    box-shadow: var(--shadow);

    & li {
      display: flex;
      align-items: center;
      gap: 0.45rem;
      min-inline-size: 0;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }

  .file-icon {
    flex: none;
    display: grid;
    place-items: center;
    inline-size: 1.3rem;
    block-size: 1.6rem;
    border-radius: 0.2rem;
    background: var(--blue);
    color: var(--ink);
    font-size: 0.65rem;
    font-weight: 700;
    &.x { background: var(--green); }
  }

  .app {
    border-radius: var(--radius);
    background: var(--raised);
    box-shadow: 0 0 0 1px var(--rule), var(--shadow);
    overflow: hidden;
    font-size: 0.95rem;
  }

  .app-bar {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.5rem 0.7rem;
    background: var(--surface);
    font-size: 0.78rem;

    & .dot { flex: none; inline-size: 0.5rem; block-size: 0.5rem; border-radius: 50%; background: var(--rule); }
    & .dot:nth-child(3) { margin-inline-end: 0.4rem; }
  }

  .app-tab {
    flex: none;
    padding: 0.2rem 0.55rem;
    border-radius: 0.4rem;
    white-space: nowrap;
    color: var(--text-muted);
    &.is-ok::after { content: " ✓"; color: var(--ok); font-weight: 700; }
    &.is-current { background: var(--raised); color: var(--text); font-weight: 600; box-shadow: 0 0 0 1px var(--rule); }
  }

  .app-search {
    flex: 1;
    min-inline-size: 0;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    background: var(--raised);
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .app-body {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    grid-template-areas: "facs text" "checks checks";
    gap: 0.7rem;
    padding: 0.8rem;
  }

  .app-label {
    font-family: var(--font-mono);
    margin-block-end: 0.4rem;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-muted);
  }

  .app-facs { grid-area: facs; min-inline-size: 0; }

  .facs { inline-size: 100%; }
  .facs-paper { fill: light-dark(oklch(93% 0.04 85), oklch(80% 0.05 80)); }
  .facs-ink { fill: none; stroke: oklch(38% 0.06 50); stroke-width: 1.6; stroke-linecap: round; }
  .facs-zone { fill: color-mix(in oklch, var(--orange) 25%, transparent); stroke: var(--orange); stroke-width: 1.5; }

  .app-text {
    grid-area: text;
    min-inline-size: 0;
    display: grid;
    align-content: start;
    gap: 0.45rem;
  }

  .tline {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    min-block-size: 1.3rem;
    padding: 0.1rem 0.25rem;
    border-radius: 0.3rem;
    &.is-flagged { outline: 2px solid var(--orange); outline-offset: 1px; }
  }

  .bar { display: block; block-size: 0.45rem; border-radius: 999px; background: var(--rule); }
  .w20 { inline-size: 20%; }
  .w30 { inline-size: 30%; }
  .w40 { inline-size: 40%; }
  .w60 { inline-size: 60%; }
  .w70 { inline-size: 70%; }

  .ent {
    flex: none;
    padding: 0 0.35rem;
    border-radius: 0.25rem;
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--ink);
    &.person { background: color-mix(in oklch, var(--pink) 55%, white); }
    &.place { background: var(--blue); }
    &.date { background: var(--orange); }
  }

  .app-checks {
    grid-area: checks;
    display: grid;
    gap: 0.35rem;
    font-size: 0.8rem;
  }

  .app-check {
    padding: 0.4rem 0.6rem;
    border-radius: 0.45rem;
    border-inline-start: 3px solid var(--orange);
    background: var(--warn-bg);
    font-weight: 500;
    &::before { content: "! "; font-weight: 700; }
    &.soft { border-color: var(--blue); background: var(--surface); }
    &.ok { border-color: var(--green); background: var(--surface); }
    &.ok::before { content: "✓ "; color: var(--ok); }
  }

  @media (prefers-reduced-motion: no-preference) {
    .app-check:not(.ok) { animation: pop 500ms 600ms both cubic-bezier(.2, .8, .2, 1.2); }
    .app-check.soft { animation-delay: 900ms; }
  }

  @keyframes pop { from { opacity: 0; transform: translateY(0.4rem) scale(0.97); } }

  @media (max-width: 30rem) {
    .before { display: none; }
    .after { inline-size: 100%; margin-block-start: 0; }
  }

  .abilities {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
    gap: var(--space-s);

    & li {
      display: grid;
      grid-template-columns: auto 1fr;
      column-gap: var(--space-s);
      align-items: center;
      padding: var(--space-s) var(--space-m);
      border-radius: var(--radius);
      background: var(--surface);
    }
    & li:nth-child(1) { --c: var(--red); }
    & li:nth-child(2) { --c: var(--orange); }
    & li:nth-child(3) { --c: var(--yellow); }
    & li:nth-child(4) { --c: var(--green); }
    & li:nth-child(5) { --c: var(--blue); }
    & li:nth-child(6) { --c: var(--purple); }
    & a { grid-column: 2; font-size: var(--step--1); }
  }

  .ability-icon {
    grid-row: span 2;
    inline-size: 2.5rem;
    block-size: 2.5rem;
    padding: 0.45rem;
    border-radius: 0.7rem;
    background: color-mix(in oklch, var(--c) 28%, transparent);
    fill: none;
    stroke: var(--text);
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .ability-name { font-family: var(--font-display); font-weight: 600; font-size: 1.2rem; line-height: 1.15; }

  .tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;

    & li {
      padding: 0.1rem 0.5rem;
      border-radius: 0.35rem;
      background: var(--bg);
      box-shadow: 0 0 0 1px var(--rule);
      font-family: var(--font-mono);
      font-size: 0.8rem;
    }
  }

  .tools {
    display: grid;
    gap: var(--space-section);
  }

  .tool { container-type: inline-size; }

  .tool-grid {
    display: grid;
    gap: var(--space-m) var(--space-l);
    align-items: center;
  }

  @container (inline-size > 52rem) {
    .tool-grid { grid-template-columns: 1.2fr 1fr; }
    .tool:nth-child(even) .shot { order: 2; }
  }

  .shot {
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--raised);
    box-shadow: 0 0 0 1px var(--rule), var(--shadow);

    & img { inline-size: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top left; }
  }

  .shot.schema { display: grid; place-items: center; aspect-ratio: 16 / 10; background: var(--surface); }
  .shot.schema .diagram { padding: var(--space-m); background: none; }
  .d-photo { fill: color-mix(in oklch, var(--yellow) 45%, var(--raised)); stroke: var(--rule); }
  .d-col rect { fill: var(--raised); stroke: var(--rule); }
  .d-cell { stroke: var(--rule); stroke-width: 5; stroke-linecap: round; }
  .d-conflict { fill: none; stroke: var(--red); stroke-width: 2; }

  .variants {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
    gap: var(--space-l) var(--space-m);

    & a { display: grid; gap: var(--space-s); color: var(--text); text-decoration: none; }
    & img { border-radius: var(--radius); box-shadow: 0 0 0 1px var(--rule), var(--shadow); }
    & a:hover .variant-name { text-decoration: underline; }
    & p { margin-block-start: var(--space-xs); color: var(--text-muted); }
  }

  .variant-name { font-family: var(--font-display); font-weight: 600; font-size: var(--step-1); }

  .tool-body > * + * { margin-block-start: var(--space-s); }
  .tool h3 { font-size: var(--step-2); }
  .tool .problem { font-weight: 500; max-inline-size: var(--measure); }
  .tool .solution { color: var(--text-muted); max-inline-size: var(--measure); }
  .tool .button { min-block-size: 2.75rem; padding: 0.5rem 1.1rem; font-size: var(--step--1); }

  .state {
    max-inline-size: var(--measure);
    font-size: var(--step--1);
  }

  .evidence { margin-inline-start: 0.2rem; white-space: nowrap; }

  .state-label {
    display: inline-block;
    margin-inline-end: 0.4rem;
    padding: 0 0.45rem;
    border-radius: 0.3rem;
    background: var(--text);
    color: var(--bg);
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: 0.78em;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }

  .motif {
    margin-block-end: var(--space-l);

    & svg { inline-size: 100%; block-size: clamp(7rem, 4rem + 14vw, 16rem); }
  }

  .m-beam { fill: none; stroke: var(--text); stroke-width: 3; stroke-linecap: round; }
  .m-prism { fill: light-dark(oklch(100% 0 0 / 0.75), oklch(24% 0.053 271 / 0.8)); stroke: var(--text); stroke-width: 2.5; stroke-linejoin: round; }
  .m-band { fill: var(--c); opacity: 0.85; }
  .b1 { --c: var(--red); }
  .b2 { --c: var(--orange); }
  .b3 { --c: var(--yellow); }
  .b4 { --c: var(--green); }
  .b5 { --c: var(--cyan); }
  .b6 { --c: var(--blue); }
  .b7 { --c: var(--purple); }
  .m-hatch-line { stroke: var(--text); stroke-width: 1.2; }

  .legal {
    max-inline-size: var(--measure);

    & h2 { font-size: var(--step-1); margin-block: var(--space-l) var(--space-xs); }
    & p + p { margin-block-start: var(--space-s); }
    & .legal-date { margin-block-start: var(--space-l); color: var(--text-muted); font-size: var(--step--1); }
  }

  .methods {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr));
    gap: var(--space-l) var(--space-m);
  }

  .method {
    display: flex;
    flex-direction: column;
    gap: var(--space-s);

    & .solution { color: var(--text-muted); }
    & .actions { margin-block-start: auto; padding-block-start: var(--space-xs); }
    & .button { min-block-size: 2.75rem; padding: 0.5rem 1.1rem; font-size: var(--step--1); }
  }

  /* Diagram labels are SVG text at a fixed 12px inside a scaling viewBox, so they grow with the card. */
  .diagram {
    inline-size: 100%;
    padding: var(--space-s);
    border-radius: var(--radius);
    background: var(--surface);
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 600;

    & text { fill: var(--text); text-anchor: middle; }
  }

  .d-ring { fill: none; stroke: var(--rule); stroke-width: 2; stroke-dasharray: 5 5; }
  .d-arrow { fill: none; stroke: var(--text-muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .d-core { fill: var(--raised); stroke: var(--purple); stroke-width: 2; }
  .d-line { stroke: var(--rule); stroke-width: 4; stroke-linecap: round; }
  .d-node rect { fill: var(--c); }
  .diagram .d-node text { fill: var(--ink); }
  .n1 { --c: var(--orange); }
  .n2 { --c: var(--blue); }
  .n3 { --c: color-mix(in oklch, var(--pink) 70%, white); }
  .n4 { --c: var(--green); }

  .d-layer rect { fill: var(--raised); stroke: var(--rule); }
  .diagram .d-layer text { text-anchor: start; }
  .l1 rect { stroke: var(--purple); stroke-width: 2; }
  .d-thread { stroke: var(--orange); stroke-width: 2.5; stroke-dasharray: 4 3; }
  .d-anchor { fill: var(--orange); }
  .d-passage { fill: color-mix(in oklch, var(--orange) 30%, transparent); stroke: var(--orange); stroke-width: 2; }
  .d-check circle { fill: var(--raised); stroke: var(--rule); stroke-width: 2; }
  .d-check path { fill: none; stroke: var(--text-muted); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
  .d-check.human circle { fill: var(--green); stroke: var(--green); }
  .d-check.human path { stroke: white; }

  .d-flow { fill: none; stroke: var(--rule); stroke-width: 3; stroke-dasharray: 6 5; }
  .d-step rect { fill: var(--raised); stroke: var(--c, var(--rule)); stroke-width: 2; }
  .d-mark { fill: none; stroke: var(--text-muted); stroke-width: 2; stroke-linecap: round; }
  .s1 { --c: var(--orange); }
  .s2 { --c: var(--blue); }
  .s3 { --c: var(--green); }
  .s3 rect { fill: color-mix(in oklch, var(--green) 18%, var(--raised)); }
  .s4 { --c: var(--purple); }
  .s5 { --c: var(--pink); }
  .diagram .d-code { font-family: ui-monospace, monospace; fill: var(--link); }

  .tool .actions { margin-block-start: var(--space-m); }

  .claims {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
    gap: var(--space-l);

    & div { padding-inline-start: var(--space-m); border-inline-start: 3px solid var(--c, var(--red)); }
    & div:nth-child(2) { --c: var(--orange); }
    & div:nth-child(3) { --c: var(--green); }
    & div:nth-child(4) { --c: var(--blue); }
    & div:nth-child(5) { --c: var(--purple); }
    & dt { font-family: var(--font-display); font-weight: 600; font-size: calc(var(--step-1) * 1.12); }
    & dd { margin-block-start: var(--space-xs); color: var(--text-muted); max-inline-size: 46ch; }
  }

  .about {
    margin-block-start: var(--space-section);
    max-inline-size: var(--measure);

    & h3, & ~ .clients h3 { font-size: var(--step-1); }
    & p { margin-block-start: var(--space-xs); font-size: var(--step-0); color: var(--text-muted); }
  }

  .clients {
    margin-block-start: var(--space-l);

    & h3 { font-size: var(--step-0); color: var(--text-muted); font-weight: 600; }
    & ul {
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-s) var(--space-l);
      margin-block-start: var(--space-m);
      font-family: var(--font-display);
      font-weight: 600;
      font-size: var(--step-1);
      letter-spacing: -0.02em;
    }
  }

  .steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 12.5rem), 1fr));
    gap: var(--space-l) var(--space-m);
    counter-reset: step;

    & li { counter-increment: step; }
    & li::before {
      content: counter(step);
      display: grid;
      place-items: center;
      inline-size: 3rem;
      block-size: 3rem;
      margin-block-end: var(--space-s);
      border-radius: 50%;
      background: var(--text);
      color: var(--bg);
      font-family: var(--font-display);
      font-weight: 700;
      font-size: var(--step-1);
    }
    & p { margin-block-start: var(--space-xs); color: var(--text-muted); }
  }

  .fit {
    margin-block-start: var(--space-section);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
    gap: var(--space-l);
  }

  .fit-list {
    margin-block-start: var(--space-s);
    padding: 0;
    list-style: none;
    display: grid;
    gap: var(--space-xs);

    & li { display: flex; gap: 0.6rem; }
    & li::before { flex: none; font-weight: 700; inline-size: 1.2rem; }
    &.yes li::before { content: "✓"; color: var(--ok); }
    &.no li::before { content: "✕"; color: var(--text-muted); }
  }


  .cta {
    background: var(--ink);
    color: var(--paper);

    & .section-title { font-size: var(--step-3); letter-spacing: -0.03em; margin-block-end: var(--space-l); }
    & .actions { margin-block-start: var(--space-m); }
  }

  .paths {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
    gap: var(--space-l);
  }

  .path {
    padding: var(--space-m) var(--space-l) var(--space-l);
    border-radius: var(--radius);
    background: oklch(100% 0 0 / 0.05);
    box-shadow: inset 0 0 0 1px oklch(100% 0 0 / 0.12);

    & h3 { font-size: var(--step-1); color: var(--paper); }
    & > p { margin-block-start: var(--space-xs); color: var(--on-ink); }
  }

  .billing {
    margin-block-start: var(--space-l);
    color: var(--on-ink);
  }

  .ask {
    margin-block-start: var(--space-m);
    display: grid;
    gap: var(--space-xs);
    counter-reset: ask;
    font-size: var(--step-0);

    & li { counter-increment: ask; display: flex; gap: var(--space-s); }
    & li::before { content: counter(ask); color: var(--orange); font-family: var(--font-display); font-weight: 700; }
    &.bullets li::before { content: "•"; }
  }

  .site-footer {
    padding-block: var(--space-l);
    background: var(--ink-deep);
    color: var(--on-ink);
    font-size: var(--step--1);

    & .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-m); }
    & a { color: inherit; }
  }

  .footer-brand {
    display: flex;
    align-items: center;
    gap: var(--space-s);
    text-decoration: none;
    & img { inline-size: 3rem; block-size: 3rem; }
    & span { line-height: 1.4; }
  }

  .variant-switch {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-xs) var(--space-m);
    inline-size: 100%;
    padding-block: var(--space-s);
    border-block: 1px solid oklch(100% 0 0 / 0.15);

    & p { font-weight: 600; color: var(--paper); }
    & ul { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-m); }
    & a { display: inline-block; padding-block: 0.4rem; }
    & a[aria-current="page"] { color: var(--paper); font-weight: 600; text-decoration: none; }
  }

  .address { margin-block-start: var(--space-s); font-family: var(--font-mono); user-select: all; }

  .footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs) var(--space-m);
    & a { display: inline-block; padding-block: 0.4rem; }
  }
}

@media print {
  .site-header, .actions, .compare, .variant-switch, .abilities { display: none; }
  .section { padding-block: 1.5rem; }
  .cta, .site-footer { background: none; color: black; }
}