@layer reset, base, layout, components, states, motion, responsive;

@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  html {
    scroll-behavior: smooth;
  }

  body,
  h1,
  h2,
  h3,
  p,
  figure,
  dl,
  dd,
  ol,
  ul {
    margin: 0;
  }

  ol,
  ul {
    padding: 0;
  }

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

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

@layer base {
  @font-face {
    font-family: "Sebastian Slab";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("https://assets.sebastian-software.com/fonts/Elena/Elena-Medium-latin-f0e984d3e709.woff2") format("woff2");
    unicode-range:
      U+20-7E, U+A0-AC, U+AE-17E, U+192, U+1FA-1FF, U+218-21B, U+312, U+315, U+326, U+1E80-1E85,
      U+1EF2-1EF3, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A,
      U+2044, U+20AC, U+FB01-FB02;
  }

  @font-face {
    font-family: "Sebastian Slab";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("https://assets.sebastian-software.com/fonts/Elena/Elena-Medium-extended-dd103fb5b57e.woff2") format("woff2");
    unicode-range:
      U+2C6-2C7, U+2D8-2DD, U+3C0, U+2113, U+2116, U+2122, U+2126, U+212E, U+2153-2154, U+215B-215E,
      U+2202, U+2206, U+220F, U+2211-2212, U+221A, U+221E, U+222B, U+2248, U+2260, U+2264-2265, U+25CA;
  }

  /* Metric-matched fallback from the Consulting site's shared brand styles. */
  @font-face {
    font-family: "Sebastian Slab Fallback";
    src: local("Georgia"), local("Times New Roman");
    font-style: normal;
    font-weight: 500;
    size-adjust: 83.5%;
    ascent-override: 107.8%;
    descent-override: 29.9%;
    line-gap-override: 0%;
  }

  :root {
    color-scheme: light dark;
    --paper: #e7f0f3;
    --paper-soft: #dbe8ed;
    --white: #ffffff;
    --ink: #002731;
    --muted: #45616b;
    --line: #c4d8df;
    --line-strong: #005164;
    --blue: #005164;
    --blue-dark: #002731;
    --blue-surface: #005164;
    --signal: #b9e7f2;
    --coral: #38afcc;
    --coral-deep: #005164;
    --sky: #cceaf2;
    --sky-ink: #002731;
    --panel: #002731;
    --accent-ink: #002731;
    --display: "Sebastian Slab", "Sebastian Slab Fallback", Rockwell, ui-serif, Georgia, serif;
    --sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    --shell: min(1200px, calc(100vw - 48px));
    --shadow: 0 24px 70px rgb(0 0 0 / 10%);
  }

  @media (prefers-color-scheme: dark) {
    :root {
      --paper: #030d11;
      --paper-soft: #08212b;
      --white: #0c2934;
      --ink: #e7f0f3;
      --muted: #a7bec7;
      --line: #274753;
      --line-strong: #9dc4d1;
      --blue: #6dc5dc;
      --blue-dark: #a2d9e7;
      --blue-surface: #005164;
      --signal: #b9e7f2;
      --coral: #38afcc;
      --coral-deep: #005164;
      --sky: #123a48;
      --sky-ink: #e7f0f3;
      --panel: #030d11;
      --accent-ink: #002731;
      --shadow: 0 24px 70px rgb(0 0 0 / 45%);
    }
  }

  body {
    min-width: 320px;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 1rem;
    line-height: 1.6;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
  }

  a {
    color: inherit;
    text-decoration-thickness: 0.08em;
    text-underline-offset: 0.16em;
  }

  button,
  a {
    -webkit-tap-highlight-color: transparent;
  }

  ::selection {
    background: var(--signal);
    color: var(--accent-ink);
  }

  [hidden] {
    display: none !important;
  }

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

  .shell {
    width: var(--shell);
    margin-inline: auto;
  }

  .section {
    padding-block: clamp(5rem, 9vw, 8.5rem);
    scroll-margin-top: 5rem;
  }

  .eyebrow {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin-bottom: 1.25rem;
    color: var(--blue);
    font-size: 0.77rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    line-height: 1.2;
    text-transform: uppercase;
  }

  .eyebrow::before {
    width: 1.75rem;
    height: 2px;
    background: currentColor;
    content: "";
  }

  h1,
  h2 {
    font-family: var(--display);
    font-weight: 500;
    letter-spacing: -0.022em;
    line-height: 1.04;
  }

  h2 {
    max-width: 16ch;
    font-size: clamp(2.75rem, 6vw, 5.3rem);
  }

  h3 {
    font-family: var(--display);
    font-weight: 500;
    font-size: 1.3rem;
    line-height: 1.2;
  }

  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .skip-link {
    position: fixed;
    z-index: 100;
    top: 0.75rem;
    left: 0.75rem;
    padding: 0.7rem 1rem;
    background: var(--ink);
    color: var(--white);
    font-weight: 800;
    transform: translateY(-150%);
  }

  .skip-link:focus {
    transform: translateY(0);
  }
}

@layer layout {
  .site-header {
    position: fixed;
    z-index: 50;
    top: 0;
    right: 0;
    left: 0;
    border-bottom: 1px solid transparent;
    background: rgb(231 240 243 / 84%);
    backdrop-filter: blur(18px);
  }

  .site-header.is-scrolled {
    border-color: rgb(0 39 49 / 11%);
    box-shadow: 0 8px 30px rgb(0 0 0 / 4%);
  }

  .header-inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    min-height: 4.75rem;
    gap: 2rem;
  }

  .brand {
    display: inline-flex;
    align-items: center;
    justify-self: start;
    gap: 0.65rem;
    text-decoration: none;
  }

  .brand-mark {
    display: block;
    width: 2.5rem;
    height: 2.5rem;
    flex: 0 0 auto;
  }

  .brand-mark img {
    width: 100%;
    height: 100%;
  }

  .brand-copy {
    display: grid;
    font-size: 0.75rem;
    line-height: 1.25;
  }

  .brand-copy strong {
    letter-spacing: 0.02em;
  }

  .brand-copy span {
    color: var(--muted);
  }

  .primary-nav {
    display: flex;
    align-items: center;
    gap: 1.7rem;
  }

  .primary-nav a,
  .header-action {
    font-size: 0.79rem;
    font-weight: 750;
    text-decoration: none;
  }

  .primary-nav a {
    position: relative;
    color: #385762;
  }

  .primary-nav a::after {
    position: absolute;
    right: 0;
    bottom: -0.35rem;
    left: 0;
    height: 2px;
    background: var(--blue);
    content: "";
    transform: scaleX(0);
    transform-origin: right;
  }

  .primary-nav a:hover::after {
    transform: scaleX(1);
    transform-origin: left;
  }

  .header-action {
    justify-self: end;
    padding: 0.62rem 0.9rem;
    border: 1px solid var(--ink);
    background: var(--white);
    border-radius: 4px;
  }

  .hero {
    position: relative;
    padding: clamp(7.5rem, 12vh, 9rem) 0 3rem;
    overflow: hidden;
  }

  .hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    gap: clamp(2.5rem, 5vw, 5rem);
  }

  .hero-aside {
    display: grid;
    min-width: 0;
    gap: 2rem;
  }

  .model-seal-pair {
    display: flex;
    justify-content: center;
    gap: clamp(1rem, 2vw, 2rem);
  }

  .model-seal-pair img {
    width: min(44%, 224px);
    height: auto;
    border-radius: 50%;
    box-shadow: 0 6px 14px rgb(0 0 0 / 12%);
  }

  .model-seals figcaption {
    margin-top: 1rem;
    color: var(--muted);
    font-size: 0.75rem;
    text-align: center;
  }

  .model-seals figcaption a {
    display: inline-block;
    margin-left: 0.4rem;
    color: var(--blue);
  }

  .engineering-stack {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.8rem 1.25rem;
    margin-top: 2rem;
    font-size: 0.85rem;
  }

  .engineering-stack > span {
    color: var(--muted);
  }

  .engineering-stack a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    gap: 0.5rem;
    font-weight: 700;
    text-decoration: none;
  }

  .engineering-stack a:hover {
    text-decoration: underline;
  }

  .hero h1 {
    max-width: 16ch;
    font-size: clamp(3.6rem, 5.2vw, 4.7rem);
    line-height: 1.02;
  }

  .hero h1 > span {
    color: var(--blue);
  }

  .hero-context {
    margin-bottom: 1.5rem;
    color: var(--blue);
    font-size: 1rem;
    font-weight: 750;
  }

  .hero-intro {
    max-width: 38rem;
    margin-top: 2rem;
    color: var(--muted);
    font-size: clamp(1.05rem, 1.5vw, 1.2rem);
    line-height: 1.65;
  }

  .hero-actions,
  .about-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    margin-top: 2.2rem;
  }

  .proof-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    max-width: 41rem;
    margin-top: 2.25rem;
    border-top: 1px solid var(--line);
  }

  .proof-row > div {
    display: flex;
    flex-direction: column-reverse;
    padding: 1rem 1rem 0 0;
  }

  .proof-row > div + div {
    padding-left: 1rem;
    border-left: 1px solid var(--line);
  }

  .proof-row dd {
    font-family: var(--display);
    font-weight: 500;
    font-size: 2.3rem;
    line-height: 1;
  }

  .proof-row dt {
    margin-top: 0.35rem;
    color: var(--muted);
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.35;
    text-transform: uppercase;
  }

  .scope-map {
    min-width: 0;
    border: 1px solid var(--line-strong);
    background: var(--white);
    border-radius: 6px;
    overflow: hidden;
  }

  .scope-map figcaption {
    display: grid;
    gap: 0.4rem;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--line-strong);
    background: var(--blue-surface);
    color: white;
  }

  .scope-map figcaption > span {
    color: var(--signal);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

  .scope-map figcaption > strong {
    font-family: var(--display);
    font-size: clamp(1.15rem, 1.8vw, 1.4rem);
    font-weight: 500;
    line-height: 1.1;
  }

  .scope-map ol {
    list-style: none;
  }

  .scope-map li {
    display: grid;
    grid-template-columns: 1.6rem 7rem minmax(0, 1fr);
    align-items: baseline;
    gap: 0.75rem;
    padding: 0.6rem 1.5rem;
    border-bottom: 1px solid var(--line);
    font-size: 0.875rem;
    line-height: 1.4;
  }

  .scope-number {
    color: var(--blue);
    font-family: var(--mono);
    font-size: 0.75rem;
  }

  .scope-map li > span:last-child,
  .scope-map > p {
    color: var(--muted);
  }

  .scope-map > p {
    padding: 1rem 1.5rem;
    font-size: 0.875rem;
  }

  .model-tuning-note {
    grid-column: 1 / -1;
    padding-top: 2rem;
    border-top: 1px solid var(--line);
    scroll-margin-top: 8rem;
  }

  .model-tuning-note p {
    max-width: 80ch;
    margin-block: 0.75rem;
    color: var(--muted);
    font-size: 0.95rem;
  }

  .model-tuning-note a {
    color: var(--blue);
    font-size: 0.85rem;
    font-weight: 700;
  }

  .command-dock {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    margin-top: 3rem;
    padding: 1rem 1rem 1rem 1.4rem;
    border: 1px solid var(--ink);
    background: var(--panel);
    border-radius: 6px;
    color: white;
  }

  .command-dock > div {
    display: flex;
    min-width: 0;
    align-items: baseline;
    gap: 1.5rem;
  }

  .command-label {
    color: var(--signal);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .command-dock code {
    overflow: hidden;
    font-size: clamp(0.67rem, 1.1vw, 0.82rem);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .signal-strip {
    overflow: hidden;
    padding: 0.9rem 0;
    border-block: 1px solid var(--ink);
    background: var(--signal);
  }

  .signal-track {
    display: flex;
    width: max-content;
    min-width: 100%;
    align-items: center;
    justify-content: space-around;
    gap: 2.5rem;
    padding-inline: 2rem;
    color: var(--accent-ink);
    font-size: 0.78rem;
    font-weight: 850;
    letter-spacing: 0.11em;
    text-transform: uppercase;
  }

  .signal-track i {
    width: 0.5rem;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--blue-surface);
  }

  .capabilities {
    border-bottom: 1px solid var(--line-strong);
  }

  .capabilities-heading {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(18rem, 0.75fr);
    align-items: end;
    gap: 4rem;
  }

  .capabilities-heading h2 {
    max-width: 12ch;
  }

  .capabilities-heading > p {
    max-width: 38rem;
    color: var(--muted);
    font-size: 1.08rem;
  }

  .capability-explorer {
    display: grid;
    grid-template-columns: minmax(18rem, 0.68fr) minmax(0, 1.32fr);
    min-height: 41rem;
    margin-top: 4rem;
    border: 1px solid var(--line-strong);
    background: var(--panel);
  }

  .capability-tabs {
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--line-strong);
    background: var(--white);
  }

  .capability-tabs > p {
    padding: 1.4rem 1.5rem;
    color: var(--muted);
    font-size: 0.75rem;
    font-weight: 850;
    letter-spacing: 0.11em;
    text-transform: uppercase;
  }

  .capability-tablist {
    display: flex;
    flex: 1;
    flex-direction: column;
  }

  .capability-tabs button {
    display: grid;
    flex: 1;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 1rem;
    min-height: 5.5rem;
    padding: 1rem 1.5rem;
    border: 0;
    border-top: 1px solid var(--line);
    background: transparent;
    color: var(--ink);
    cursor: pointer;
    text-align: left;
  }

  .capability-tabs button:hover {
    background: var(--paper-soft);
  }

  .capability-tabs button[aria-selected="true"] {
    background: var(--signal);
    color: var(--accent-ink);
  }

  .capability-tabs button > span:last-child {
    display: grid;
    gap: 0.28rem;
  }

  .capability-tabs small {
    color: var(--muted);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    line-height: 1.25;
    text-transform: uppercase;
  }

  .capability-tabs button[aria-selected="true"] small {
    color: rgb(0 39 49 / 68%);
  }

  .capability-tabs strong {
    font-size: 1rem;
    line-height: 1.25;
  }

  .capability-index {
    color: var(--blue);
    font-family: var(--display);
    font-weight: 500;
    font-size: 1.8rem;
    line-height: 1;
  }

  .capability-tabs button[aria-selected="true"] .capability-index {
    color: var(--blue-surface);
  }

  .capability-stage {
    min-width: 0;
    display: grid;
    padding: clamp(1.75rem, 4vw, 3.5rem);
    background: var(--panel);
    color: white;
  }

  .capability-panel {
    min-width: 0;
    display: flex;
    flex-direction: column;
  }

  .capability-panel-topline {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgb(255 255 255 / 22%);
    color: rgb(255 255 255 / 68%);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

  .capability-panel-copy {
    padding: clamp(2rem, 4vw, 3.25rem) 0;
  }

  .capability-panel-copy blockquote {
    max-width: 46rem;
    margin: 0.65rem 0 0;
    color: rgb(255 255 255 / 86%);
    font-size: 1rem;
    line-height: 1.65;
  }

  .example-label {
    margin-top: 1.8rem;
    color: var(--signal);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .capability-question {
    max-width: 15ch;
    font-family: var(--display);
    font-size: clamp(2.2rem, 4vw, 3.4rem);
    font-weight: 500;
    letter-spacing: -0.022em;
    line-height: 0.96;
  }

  .review-snapshot {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    border: 1px solid rgb(255 255 255 / 24%);
  }

  .review-verdict,
  .review-register {
    padding: clamp(1.25rem, 3vw, 2rem);
  }

  .review-verdict {
    background: var(--blue-surface);
  }

  .review-verdict.verdict-blocked {
    background: var(--coral-deep);
  }

  .review-verdict.verdict-learning {
    background: #005164;
  }

  .output-label {
    display: block;
    color: rgb(255 255 255 / 70%);
    font-size: 0.75rem;
    font-weight: 850;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

  .review-verdict strong {
    display: block;
    max-width: 12ch;
    margin-top: 1rem;
    font-family: var(--display);
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    font-weight: 500;
    line-height: 1;
  }

  .review-verdict p {
    margin-top: 1rem;
    color: rgb(255 255 255 / 82%);
    font-size: 0.875rem;
  }

  .review-register {
    background: rgb(255 255 255 / 5%);
  }

  .review-register ul {
    margin-top: 0.9rem;
    list-style: none;
  }

  .review-register li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 0.8rem;
    padding: 0.75rem 0;
    border-top: 1px solid rgb(255 255 255 / 15%);
    font-size: 0.875rem;
  }

  .review-register .coverage-list li {
    display: block;
  }

  .panel-skill-link {
    display: inline-block;
    margin-top: 1rem;
    color: var(--signal);
    font-size: 0.75rem;
    font-weight: 750;
  }

  .principles-intro .text-link {
    display: inline-block;
    color: var(--blue);
    margin-top: 1.5rem;
  }

  .pack-list {
    display: grid;
    gap: 1.5rem;
  }

  .pack-list > div {
    padding-top: 1.1rem;
    border-top: 1px solid currentColor;
  }

  .pack-list dt {
    font-weight: 800;
  }

  .pack-list dd {
    margin-top: 0.4rem;
    font-size: 0.9rem;
  }

  .optional-packs {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--line);
  }

  .optional-packs summary {
    padding-block: 0.4rem;
    font-size: 0.8rem;
    font-weight: 750;
    cursor: pointer;
  }

  .optional-packs > p {
    font-size: 0.8rem;
  }

  .claim-status {
    min-width: 6.5rem;
    padding: 0.25rem 0.45rem;
    border: 1px solid rgb(255 255 255 / 28%);
    color: white;
    font-size: 0.75rem;
    font-weight: 850;
    letter-spacing: 0.06em;
    line-height: 1.2;
    text-align: center;
    text-transform: uppercase;
  }

  .status-supported {
    border-color: var(--signal);
    background: var(--signal);
    color: var(--accent-ink);
  }

  .status-partial,
  .status-unknown {
    border-color: var(--sky);
    color: #e7f0f3;
  }

  .status-unsupported,
  .status-contradicted {
    border-color: var(--coral);
    color: #a2d9e7;
  }

  .panel-outcome {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 1rem;
    margin-top: auto;
    padding-top: 1.5rem;
    color: rgb(255 255 255 / 78%);
    font-size: 0.875rem;
  }

  .panel-outcome > span {
    color: var(--signal);
    font-size: 0.75rem;
    font-weight: 850;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

  .review-contract {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: 1px;
    list-style: none;
    gap: 1px;
    background: var(--line-strong);
    border: 1px solid var(--line-strong);
  }

  .review-contract li {
    min-height: 13rem;
    padding: 1.4rem;
    background: var(--white);
  }

  .review-contract li > span {
    color: var(--blue);
    font-family: var(--display);
    font-weight: 500;
    font-size: 1.45rem;
  }

  .review-contract strong {
    display: block;
    margin-top: 2.2rem;
    font-size: 0.92rem;
  }

  .review-contract p {
    margin-top: 0.6rem;
    color: var(--muted);
    font-size: 0.875rem;
  }

  .capability-cta {
    display: grid;
    grid-template-columns: minmax(18rem, 0.85fr) minmax(0, 1.15fr);
    align-items: center;
    gap: clamp(2rem, 5vw, 5rem);
    margin-top: 2rem;
    padding: clamp(1.75rem, 4vw, 3.25rem);
    background: var(--blue-surface);
    color: white;
  }

  .capability-cta .eyebrow {
    color: var(--signal);
  }

  .capability-cta h3 {
    max-width: 22ch;
    font-family: var(--display);
    font-size: clamp(1.75rem, 3vw, 2.7rem);
    font-weight: 500;
  }

  .capability-cta .text-link {
    margin-top: 1.5rem;
  }

  .capability-command {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1rem 1rem 1.25rem;
    border: 1px solid rgb(255 255 255 / 32%);
    background: var(--panel);
  }

  .capability-command code {
    min-width: 0;
    color: white;
    font-size: 0.75rem;
    overflow-wrap: anywhere;
  }

  .section-heading {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(18rem, 0.6fr);
    align-items: end;
    gap: 3rem;
    margin-bottom: 5rem;
  }

  .section-heading .eyebrow {
    grid-column: 1 / -1;
    margin-bottom: -1.5rem;
  }

  .section-heading > p:last-child,
  .library-heading > p,
  .principles-intro > p:last-child,
  .install-heading > p:last-child,
  .about-copy > p {
    max-width: 37rem;
    color: var(--muted);
    font-size: 1.08rem;
  }

  .journey {
    list-style: none;
    border-top: 1px solid var(--line-strong);
  }

  .journey-step {
    display: grid;
    grid-template-columns: 0.25fr 1fr;
    gap: 2rem;
    padding: 2.5rem 0;
    border-bottom: 1px solid var(--line);
  }

  .journey-step > div {
    display: grid;
    grid-template-columns: minmax(12rem, 0.8fr) minmax(18rem, 1.2fr);
    align-items: start;
    gap: 1.5rem 3rem;
  }

  .step-number {
    font-family: var(--display);
    font-weight: 500;
    font-size: 3.4rem;
    line-height: 0.8;
  }

  .step-label {
    color: var(--blue);
    font-size: 0.75rem;
    font-weight: 850;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  .journey h3 {
    grid-column: 1;
    max-width: 15ch;
    margin-top: 0.4rem;
    font-family: var(--display);
    font-size: clamp(1.8rem, 3vw, 2.7rem);
    font-weight: 500;
  }

  .journey h3 + p {
    grid-column: 2;
    grid-row: 1 / span 2;
    max-width: 35rem;
    color: var(--muted);
  }

  .step-skills {
    grid-column: 2;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .step-skills a {
    padding: 0.35rem 0.6rem;
    border: 1px solid var(--line);
    background: var(--white);
    font-size: 0.75rem;
    font-weight: 750;
    text-decoration: none;
  }

  .flagship {
    position: relative;
    overflow: hidden;
    background: var(--blue-surface);
    color: white;
  }

  .flagship::before {
    position: absolute;
    top: -9rem;
    right: -4rem;
    width: 30rem;
    aspect-ratio: 1;
    border: 1px solid rgb(255 255 255 / 20%);
    border-radius: 50%;
    content: "";
  }

  .flagship-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(25rem, 1.2fr);
    align-items: center;
    gap: clamp(4rem, 8vw, 8rem);
  }

  .flagship .eyebrow {
    color: var(--signal);
  }

  .flagship h2 {
    max-width: 11ch;
  }

  .flagship-copy > p:not(.eyebrow) {
    max-width: 39rem;
    margin-top: 2rem;
    color: rgb(255 255 255 / 88%);
  }

  .flagship-stats {
    display: flex;
    gap: 2rem;
    margin: 2.2rem 0;
    padding-block: 1.2rem;
    border-block: 1px solid rgb(255 255 255 / 25%);
  }

  .flagship-stats div {
    display: grid;
  }

  .flagship-stats strong {
    color: var(--signal);
    font-family: var(--display);
    font-size: 2.2rem;
    font-weight: 500;
    line-height: 1;
  }

  .flagship-stats span {
    color: rgb(255 255 255 / 88%);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
  }

  .text-link {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    color: white;
    font-size: 0.85rem;
    font-weight: 850;
  }

  .route-cloud {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
    padding: clamp(2rem, 5vw, 4rem);
    border: 1px solid rgb(255 255 255 / 28%);
    background: rgb(255 255 255 / 6%);
  }

  .route {
    padding: 0.75rem 1rem;
    border: 1px solid rgb(255 255 255 / 48%);
    background: rgb(0 39 49 / 70%);
    font-size: 0.76rem;
    font-weight: 750;
  }

  .route-large {
    padding: 1rem 1.4rem;
    background: var(--signal);
    color: var(--accent-ink);
    font-family: var(--display);
    font-weight: 500;
    font-size: 1.25rem;
  }

  .route-wide { flex-basis: 43%; text-align: center; }
  .route-accent { background: var(--coral-deep); }
  .route-accent-2 { background: var(--sky); color: var(--sky-ink); }

  .library {
    background: var(--paper-soft);
  }

  .library-heading {
    display: grid;
    grid-template-columns: 1.25fr 0.75fr;
    align-items: end;
    gap: 4rem;
  }

  .library-heading h2 {
    max-width: 14ch;
  }

  .filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin: 3.5rem 0 2rem;
  }

  .filter-bar button {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    min-height: 2.8rem;
    padding: 0.55rem 0.85rem;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    background: transparent;
    color: var(--ink);
    cursor: pointer;
    font-size: 0.75rem;
    font-weight: 800;
  }

  .filter-bar button span {
    display: grid;
    min-width: 1.35rem;
    aspect-ratio: 1;
    place-items: center;
    border-radius: 50%;
    background: rgb(0 39 49 / 8%);
    font-size: 0.75rem;
  }

  .filter-bar button[aria-pressed="true"] {
    background: var(--panel);
    color: white;
  }

  .filter-bar button[aria-pressed="true"] span {
    background: var(--signal);
    color: var(--accent-ink);
  }

  .skill-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    border: 1px solid var(--ink);
    background: var(--ink);
  }

  .skill-card {
    position: relative;
    display: flex;
    min-height: 20rem;
    flex-direction: column;
    padding: 1.6rem;
    overflow: hidden;
    background: var(--white);
  }

  .skill-card::after {
    position: absolute;
    right: -2.2rem;
    bottom: -2.2rem;
    width: 7rem;
    aspect-ratio: 1;
    border: 1px solid rgb(0 39 49 / 10%);
    border-radius: 50%;
    content: "";
  }

  .skill-card-feature {
    grid-column: span 2;
    background: var(--signal);
    color: var(--accent-ink);
  }

  .card-topline {
    display: flex;
    justify-content: space-between;
    color: var(--muted);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

  .skill-card h3 {
    max-width: 13ch;
    margin-top: auto;
    padding-top: 3rem;
    font-family: var(--display);
    font-size: clamp(1.8rem, 3vw, 2.55rem);
    font-weight: 500;
  }

  .skill-card p {
    max-width: 32rem;
    margin-top: 1rem;
    color: var(--muted);
    font-size: 0.88rem;
  }

  .skill-card ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 1rem;
    list-style: none;
  }

  .skill-card li {
    padding: 0.28rem 0.5rem;
    border: 1px solid rgb(0 39 49 / 25%);
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 750;
  }

  .skill-card > a {
    align-self: flex-start;
    margin-top: 1.4rem;
    font-size: 0.75rem;
    font-weight: 850;
  }

  .principles-grid {
    display: grid;
    grid-template-columns: minmax(20rem, 0.75fr) minmax(28rem, 1.25fr);
    gap: clamp(4rem, 10vw, 10rem);
  }

  .principles-intro {
    position: sticky;
    top: 8rem;
    align-self: start;
  }

  .principles-intro h2 {
    max-width: 10ch;
  }

  .principles-intro > p:last-child {
    margin-top: 2rem;
  }

  .principle-list {
    list-style: none;
    border-top: 1px solid var(--line-strong);
  }

  .principle-list li {
    display: grid;
    grid-template-columns: 3.5rem 1fr;
    gap: 1.2rem;
    padding: 2rem 0;
    border-bottom: 1px solid var(--line);
  }

  .principle-list li > span {
    color: var(--blue);
    font-family: var(--display);
    font-weight: 500;
    font-size: 1.5rem;
  }

  .principle-list p {
    max-width: 36rem;
    margin-top: 0.65rem;
    color: var(--muted);
  }

  .landscape-teaser {
    border-block: 1px solid var(--ink);
    background: var(--signal);
    color: var(--accent-ink);
  }

  .landscape-teaser-grid {
    display: grid;
    grid-template-columns: minmax(18rem, 0.9fr) minmax(24rem, 1.1fr);
    align-items: end;
    gap: clamp(3rem, 10vw, 9rem);
  }

  .landscape-teaser h2 {
    max-width: 10ch;
  }

  .landscape-teaser .eyebrow {
    color: var(--accent-ink);
  }

  .landscape-teaser-copy {
    display: grid;
    max-width: 40rem;
    justify-items: start;
    gap: 2rem;
  }

  .landscape-hero {
    padding: clamp(10rem, 18vh, 13rem) 0 clamp(5rem, 9vw, 8rem);
    border-bottom: 1px solid var(--ink);
    background:
      linear-gradient(90deg, transparent 49.8%, rgb(0 39 49 / 6%) 50%, transparent 50.2%),
      var(--paper);
  }

  .landscape-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(20rem, 0.75fr);
    align-items: end;
    gap: clamp(3rem, 9vw, 8rem);
  }

  .landscape-hero-copy h1 {
    max-width: 12ch;
    font-size: clamp(4rem, 8vw, 7.8rem);
  }

  .landscape-hero-copy > p:last-child {
    max-width: 49rem;
    margin-top: 2rem;
    color: var(--muted);
    font-size: clamp(1.05rem, 1.8vw, 1.35rem);
  }

  .verdict-key {
    padding: clamp(1.5rem, 3vw, 2.2rem);
    border: 1px solid var(--ink);
    background: var(--white);
    border-radius: 6px;
  }

  .verdict-key h2 {
    max-width: 13ch;
    margin-top: 0.65rem;
    font-family: var(--sans);
    font-size: clamp(1.45rem, 2.7vw, 2.2rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.08;
  }

  .verdict-key dl {
    display: grid;
    gap: 1rem;
    margin-top: 2rem;
  }

  .verdict-key dl > div {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: start;
    gap: 0.85rem;
  }

  .verdict-key dd {
    color: var(--muted);
    font-size: 0.78rem;
    line-height: 1.45;
  }

  .comparison-kicker {
    color: var(--blue);
    font-size: 0.75rem;
    font-weight: 850;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  .method-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: 4rem;
    border: 1px solid var(--ink);
    background: var(--ink);
    gap: 1px;
    list-style: none;
  }

  .method-grid li {
    min-height: 15rem;
    padding: 1.5rem;
    background: var(--white);
  }

  .method-grid li > span {
    color: var(--blue);
    font-family: var(--display);
    font-weight: 500;
    font-size: 1.5rem;
  }

  .method-grid h3 {
    margin-top: 3.5rem;
  }

  .method-grid p {
    margin-top: 0.75rem;
    color: var(--muted);
    font-size: 0.82rem;
  }

  .comparison-list {
    border-top: 1px solid var(--ink);
    background: var(--paper-soft);
  }

  .comparison-list-focused {
    background: var(--paper);
  }

  .comparison-section-heading {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(18rem, 0.8fr);
    align-items: end;
    gap: 3rem;
  }

  .comparison-section-heading h2 {
    max-width: 13ch;
  }

  .comparison-section-heading > p {
    max-width: 34rem;
    color: var(--muted);
  }

  .comparison-cards {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
    margin-top: 4rem;
  }

  .comparison-card {
    padding: clamp(1.5rem, 4vw, 3rem);
    border: 1px solid var(--ink);
    background: var(--white);
    border-radius: 6px;
  }

  .comparison-card > header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 2rem;
  }

  .comparison-card h3 {
    margin-top: 0.4rem;
    font-family: var(--display);
    font-size: clamp(2rem, 4vw, 3.5rem);
    font-weight: 500;
    letter-spacing: -0.022em;
    overflow-wrap: anywhere;
  }

  .fit-badge {
    display: inline-flex;
    min-height: 1.75rem;
    align-items: center;
    justify-content: center;
    padding: 0.28rem 0.55rem;
    border: 1px solid currentColor;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 850;
    letter-spacing: 0.05em;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .fit-companion {
    background: var(--signal);
    color: var(--accent-ink);
  }

  .fit-selective {
    background: var(--sky);
    color: var(--ink);
  }

  .fit-covered {
    background: var(--paper-soft);
    color: var(--ink);
  }

  .comparison-summary {
    max-width: 65rem;
    margin-top: 2rem;
    font-size: clamp(1rem, 1.7vw, 1.2rem);
  }

  .comparison-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 2.5rem;
    border-top: 1px solid var(--line-strong);
    border-left: 1px solid var(--line);
  }

  .comparison-facts > div {
    min-height: 11rem;
    padding: 1.4rem;
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
  }

  .comparison-facts dt {
    color: var(--blue);
    font-size: 0.75rem;
    font-weight: 850;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

  .comparison-facts dd {
    margin-top: 0.8rem;
    color: var(--muted);
    font-size: 0.86rem;
  }

  .comparison-card > footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    margin-top: 2rem;
    font-size: 0.75rem;
    font-weight: 800;
  }

  .comparison-card > footer a {
    color: var(--blue);
  }

  .comparison-card > footer span {
    color: var(--muted);
    font-weight: 650;
  }

  .compatibility {
    border-top: 1px solid var(--ink);
    background: var(--signal);
    color: var(--accent-ink);
  }

  .compatibility-grid {
    display: grid;
    grid-template-columns: minmax(18rem, 0.9fr) minmax(24rem, 1.1fr);
    align-items: start;
    gap: clamp(3rem, 10vw, 9rem);
  }

  .compatibility h2 {
    max-width: 11ch;
  }

  .compatibility .eyebrow {
    color: var(--accent-ink);
  }

  .compatibility-rules {
    display: grid;
    justify-items: start;
    gap: 2rem;
  }

  .compatibility-rules ol {
    display: grid;
    gap: 1px;
    width: 100%;
    border: 1px solid var(--ink);
    background: var(--ink);
    list-style-position: inside;
  }

  .compatibility-rules li {
    padding: 1.2rem 1.4rem;
    background: var(--white);
    color: var(--ink);
  }

  .install {
    border-block: 1px solid var(--ink);
    background: var(--sky);
    color: var(--sky-ink);
  }

  .install-heading > p {
    color: inherit;
  }

  .install-heading {
    display: grid;
    grid-template-columns: 1.25fr 0.75fr;
    align-items: end;
    gap: 3rem;
  }

  .install-heading .eyebrow {
    grid-column: 1 / -1;
    margin-bottom: -1rem;
    color: inherit;
  }

  .install-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 4rem;
  }

  .install-card {
    min-width: 0;
    display: flex;
    min-height: 27rem;
    flex-direction: column;
    color: var(--ink);
    padding: clamp(1.5rem, 3vw, 2.5rem);
    border: 1px solid var(--ink);
    background: var(--white);
    border-radius: 6px;
  }

  .install-card-heading,
  .install-card-heading > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.9rem;
  }

  .method-number {
    color: var(--blue);
    font-family: var(--display);
    font-weight: 500;
    font-size: 1.5rem;
  }

  .method-badge {
    padding: 0.35rem 0.55rem;
    border-radius: 999px;
    background: var(--signal);
    color: var(--accent-ink);
    font-size: 0.75rem;
    font-weight: 850;
  }

  .install-card > p {
    max-width: 35rem;
    margin-top: 1.5rem;
    color: var(--muted);
  }

  .code-block {
    position: relative;
    display: flex;
    min-height: 9rem;
    align-items: flex-start;
    margin-top: 2rem;
    padding: 1.35rem 4.5rem 1.35rem 1.35rem;
    overflow: auto;
    background: var(--panel);
    color: white;
  }

  .code-block code {
    font-size: 0.75rem;
    line-height: 1.8;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
  }

  .code-block .copy-button {
    position: absolute;
    top: 0.8rem;
    right: 0.8rem;
  }

  .code-block-multiline {
    min-height: 11rem;
  }

  .install-card .method-note {
    margin-top: auto;
    padding-top: 1.5rem;
    font-size: 0.875rem;
  }

  .method-note code {
    padding: 0.12rem 0.3rem;
    background: var(--paper-soft);
    color: var(--ink);
  }

  .install-footer {
    display: flex;
    justify-content: space-between;
    gap: 2rem;
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgb(0 39 49 / 35%);
    font-size: 0.85rem;
    font-weight: 750;
  }

  .about-grid {
    display: grid;
    grid-template-columns: 0.45fr 1.55fr;
    align-items: center;
    gap: clamp(3rem, 8vw, 8rem);
  }

  .about-mark {
    display: block;
    width: min(100%, 16rem);
    justify-self: center;
  }

  .about-mark img {
    width: 100%;
    height: auto;
  }

  .about-copy h2 {
    max-width: 12ch;
  }

  .about-copy > p {
    margin-top: 2rem;
  }

  .site-footer {
    padding-block: 3.5rem;
    border-top: 1px solid var(--ink);
    background: var(--panel);
    color: white;
  }

  .footer-grid {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 3rem;
  }

  .footer-brand .brand-copy span {
    color: rgb(255 255 255 / 58%);
  }

  .footer-grid > div:first-child > p {
    max-width: 34rem;
    margin-top: 1.25rem;
    color: rgb(255 255 255 / 62%);
    font-size: 0.82rem;
  }

  .footer-links {
    display: grid;
    grid-template-columns: repeat(2, auto);
    gap: 0.6rem 2rem;
    align-content: start;
  }

  .footer-links a {
    font-size: 0.75rem;
    font-weight: 750;
  }

  .copyright {
    grid-column: 1 / -1;
    padding-top: 2rem;
    border-top: 1px solid rgb(255 255 255 / 18%);
    color: rgb(255 255 255 / 62%);
    font-size: 0.75rem;
  }

  .asset-credit {
    display: block;
    max-width: 95ch;
    margin-top: 0.75rem;
  }
}

@layer components {
  .button {
    border-radius: 4px;
    display: inline-flex;
    min-height: 3rem;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1rem;
    border: 1px solid var(--ink);
    font-size: 0.78rem;
    font-weight: 850;
    text-decoration: none;
  }

  .button-primary {
    background: var(--panel);
    color: white;
    border-color: var(--blue-surface);
  }

  .button-secondary {
    background: var(--white);
    color: var(--ink);
  }

  .copy-button {
    display: inline-flex;
    min-height: 2.45rem;
    align-items: center;
    gap: 0.55rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid rgb(255 255 255 / 35%);
    background: transparent;
    color: white;
    cursor: pointer;
    font-size: 0.75rem;
    font-weight: 800;
  }
}

@layer states {
  :focus-visible {
    outline: 3px solid var(--ink);
    outline-offset: 4px;
    box-shadow: 0 0 0 7px var(--white);
  }
}

@layer motion {
  .site-header,
  .primary-nav a::after,
  .header-action,
  .button,
  .filter-bar button,
  .skill-card,
  .skill-card > a,
  .copy-button {
    transition-duration: 180ms;
    transition-property: background-color, border-color, color, box-shadow, transform;
    transition-timing-function: ease-out;
  }

  .header-action:hover,
  .button:hover {
    transform: translateY(-2px);
  }

  .button-secondary:hover {
    background: var(--signal);
  }

  .copy-button:hover {
    border-color: var(--signal);
    color: var(--signal);
  }

  .filter-bar button:hover {
    background: var(--white);
  }

  .filter-bar button[aria-pressed="true"]:hover {
    background: var(--panel);
  }

  .skill-card:hover {
    z-index: 2;
    box-shadow: inset 0 0 0 4px var(--blue);
    transform: translateY(-4px);
  }

  .skill-card-feature:hover {
    box-shadow: inset 0 0 0 4px var(--ink);
  }

  .skill-card > a:hover {
    color: var(--blue);
    transform: translateX(4px);
  }

  .reveal-ready .reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 600ms ease-out, transform 600ms cubic-bezier(0.2, 0.7, 0.2, 1);
  }

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

@layer responsive {
  @media (max-width: 980px) {
    html {
      scroll-padding-top: 7rem;
    }

    :root {
      --shell: min(100% - 36px, 760px);
    }

    .header-inner {
      grid-template-columns: 1fr auto;
      gap: 0.65rem 1rem;
      padding-block: 0.65rem;
    }

    .primary-nav {
      display: flex;
      grid-column: 1 / -1;
      grid-row: 2;
      width: 100%;
      justify-content: space-between;
      gap: 1rem;
      padding-bottom: 0.2rem;
      overflow-x: auto;
      scrollbar-width: none;
    }

    .primary-nav::-webkit-scrollbar {
      display: none;
    }

    .primary-nav a {
      flex: none;
    }

    .hero {
      min-height: auto;
      padding-top: 10rem;
    }

    .hero-grid,
    .capabilities-heading,
    .capability-explorer,
    .capability-cta,
    .section-heading,
    .flagship-grid,
    .library-heading,
    .principles-grid,
    .landscape-teaser-grid,
    .landscape-hero-grid,
    .comparison-section-heading,
    .compatibility-grid,
    .install-heading,
    .about-grid {
      grid-template-columns: 1fr;
    }

    .capabilities-heading {
      gap: 2rem;
    }

    .capability-explorer {
      min-height: auto;
    }

    .capability-tabs {
      border-right: 0;
      border-bottom: 1px solid var(--line-strong);
    }

    .capability-tablist {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .capability-tabs button {
      min-height: 6.5rem;
    }

    .capability-tabs button:nth-of-type(even) {
      border-left: 1px solid var(--line);
    }

    .review-contract {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .capability-cta {
      gap: 2.5rem;
    }

    .hero-copy {
      position: relative;
      z-index: 2;
    }

    .section-heading .eyebrow,
    .install-heading .eyebrow {
      margin-bottom: 0;
    }

    .journey-step > div {
      grid-template-columns: 1fr;
    }

    .journey h3 + p,
    .step-skills {
      grid-column: 1;
      grid-row: auto;
    }

    .flagship-grid {
      gap: 4rem;
    }

    .skill-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .method-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .principles-intro {
      position: static;
    }

    .install-heading {
      gap: 1.5rem;
    }

    .about-grid {
      grid-template-columns: minmax(12rem, 0.45fr) 1fr;
    }
  }

  @media (max-width: 680px) {
    :root {
      --shell: calc(100% - 28px);
    }

    .section {
      padding-block: 4.5rem;
    }

    .brand-copy,
    .header-action span {
      display: none;
    }

    .header-action {
      padding: 0.55rem 0.7rem;
    }

    .hero {
      padding-top: 8.5rem;
    }

    .hero h1 {
      font-size: clamp(3rem, 12vw, 5rem);
    }

    .engineering-stack > span {
      flex-basis: 100%;
    }

    .scope-map li {
      grid-template-columns: 1.35rem minmax(0, 1fr);
      gap: 0.2rem 0.7rem;
      padding: 0.85rem 1.15rem;
    }

    .scope-map li > span:last-child {
      grid-column: 2;
    }

    .landscape-hero {
      padding-top: 10rem;
    }

    .landscape-hero-copy h1 {
      font-size: clamp(3.5rem, 15vw, 5.2rem);
    }

    .hero-actions,
    .about-actions {
      align-items: stretch;
      flex-direction: column;
    }

    .button {
    border-radius: 4px;
      width: 100%;
    }

    .proof-row {
      gap: 0;
    }

    .proof-row dd {
      font-size: 1.8rem;
    }

    .command-dock,
    .command-dock > div {
      align-items: flex-start;
      flex-direction: column;
    }

    .command-dock code {
      overflow: visible;
      text-overflow: clip;
      white-space: normal;
      overflow-wrap: anywhere;
    }

    .signal-track {
      justify-content: flex-start;
    }

    .section-heading,
    .capabilities-heading,
    .library-heading,
    .principles-grid,
    .about-grid {
      gap: 2.5rem;
    }

    .capability-explorer {
      margin-top: 3rem;
    }

    .capability-tabs button {
      min-height: 5.75rem;
      gap: 0.5rem;
      padding: 0.75rem;
    }

    .capability-tabs strong {
      font-size: 0.83rem;
    }

    .capability-index {
      font-size: 1.35rem;
    }

    .capability-stage {
      padding: 1.4rem;
    }

    .capability-panel-topline {
      align-items: flex-start;
      flex-direction: column;
    }

    .review-snapshot,
    .panel-outcome {
      grid-template-columns: minmax(0, 1fr);
    }

    .review-contract {
      grid-template-columns: minmax(0, 1fr);
    }

    .review-contract li {
      min-height: auto;
    }

    .review-contract strong {
      margin-top: 1.25rem;
    }

    .capability-command {
      align-items: flex-start;
      flex-direction: column;
    }

    .about-grid {
      grid-template-columns: 1fr;
    }

    .journey-step {
      grid-template-columns: 1fr;
    }

    .step-number {
      font-size: 2.4rem;
    }

    .route-cloud {
      padding: 1.4rem;
      transform: none;
    }

    .route-wide {
      flex-basis: auto;
    }

    .library-heading {
      align-items: start;
    }

    .filter-bar {
      flex-wrap: nowrap;
      margin-inline: -14px;
      padding-inline: 14px;
      overflow-x: auto;
      scrollbar-width: none;
    }

    .filter-bar button {
      flex: none;
    }

    .skill-grid,
    .install-grid,
    .method-grid,
    .comparison-facts {
      grid-template-columns: minmax(0, 1fr);
    }

    .comparison-card > header,
    .comparison-card > footer {
      align-items: flex-start;
      flex-direction: column;
    }

    .comparison-facts > div {
      min-height: auto;
    }

    .skill-card-feature {
      grid-column: auto;
    }

    .skill-card {
      min-height: 18rem;
    }

    .install-card {
      min-height: auto;
    }

    .install-card-heading {
      align-items: flex-start;
    }

    .install-footer,
    .footer-grid {
      align-items: flex-start;
      flex-direction: column;
      grid-template-columns: 1fr;
    }

    .about-mark {
      width: min(14rem, 65vw);
    }

    .footer-links {
      grid-template-columns: repeat(2, 1fr);
    }

    .copyright {
      grid-column: 1;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    html {
      scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      scroll-behavior: auto !important;
      transition-duration: 0.01ms !important;
    }

    .reveal-ready .reveal {
      opacity: 1;
      transform: none;
    }
  }

  @media (prefers-color-scheme: dark) {
    .site-header {
      background: rgb(3 13 17 / 84%);
    }

    .site-header.is-scrolled {
      border-color: rgb(255 255 255 / 14%);
      box-shadow: 0 8px 30px rgb(0 0 0 / 35%);
    }

    .primary-nav a {
      color: #b9d0d9;
    }

    .skill-card::after {
      border-color: rgb(255 255 255 / 12%);
    }

    .skill-card-feature .card-topline,
    .skill-card-feature p {
      color: var(--accent-ink);
    }

    .landscape-hero {
      background:
        linear-gradient(90deg, transparent 49.8%, rgb(231 240 243 / 7%) 50%, transparent 50.2%),
        var(--paper);
    }

    .filter-bar button:not([aria-pressed="true"]) span {
      background: rgb(255 255 255 / 12%);
    }

    .install-footer {
      border-top-color: rgb(255 255 255 / 35%);
    }

    .button-secondary:hover {
      color: var(--accent-ink);
    }

    .skill-card-feature:hover {
      box-shadow: inset 0 0 0 4px var(--accent-ink);
    }

    .skill-card-feature > a:hover {
      color: var(--blue-surface);
    }
  }

  @media (forced-colors: active) {
    .button,
    .header-action,
    .command-dock,
    .skill-card,
    .install-card,
    .verdict-key,
    .comparison-card,
    .method-grid,
    .compatibility-rules ol,
    .scope-map,
    .filter-bar button {
      border: 2px solid ButtonText;
      box-shadow: none;
    }
  }

  @media print {
    .site-header,
    .signal-strip,
    .copy-button,
    .filter-bar {
      display: none;
    }

    .hero {
      min-height: auto;
      padding-top: 2rem;
    }

    .landscape-hero {
      padding-top: 2rem;
    }

    .section {
      padding-block: 2rem;
      break-inside: avoid;
    }
  }
}