/* MorpheOS family: existing founder colours and Plex families, shared roles. */
.family-page {
  --surface-page: #f2efe4;
  --surface-inverse: #10110f;
  --surface-evidence: #171812;
  --text-primary: #171812;
  --text-secondary: #55564f;
  --text-inverse: #f2efe4;
  --accent: #b9f27c;
  --accent-ink: #16220d;
  --border-paper: #c9c6b9;
  --family-gutter: clamp(20px, 4vw, 48px);
  --family-section: clamp(48px, 6vw, 88px);
  --family-display: clamp(2.65rem, 1.8rem + 3vw, 4.7rem);
  --family-heading: clamp(1.9rem, 1.35rem + 1.7vw, 3rem);
  --family-body: "IBM Plex Sans", "Aptos", "Segoe UI", sans-serif;
  --family-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-family: var(--family-body);
}
.family-page main h1 {font-size: var(--family-display); line-height: 1.04; letter-spacing: -.045em; text-wrap: balance; max-width: 20ch;}
.family-page main h2 {font-size: var(--family-heading); line-height: 1.12; letter-spacing: -.025em; text-wrap: balance;}
.family-page main h3 {font-size: clamp(1.25rem, 1.12rem + .5vw, 1.6rem); line-height: 1.25;}
.family-page main p {text-wrap: pretty;}
.family-page main .eyebrow, .family-page main .offer-kicker {font: 500 .8rem/1.5 var(--family-body); letter-spacing: .035em; text-transform: none;}
.family-page .section-band {padding: var(--family-section) var(--family-gutter);}
.family-page .section-grid, .family-page .section-heading, .family-page .studio-hero-grid,
.family-page .service-page-grid, .family-page .route-cards, .family-page .work-grid {width: min(1180px, 100%);}
.family-page main .hero-copy {font-size: clamp(1.075rem, 1rem + .2vw, 1.2rem); max-width: 57ch; line-height: 1.6;}
.family-page main .button, .family-page .site-header .button, .family-page .nav-buy {
  min-height: 44px; border-radius: 4px; font: 600 .9rem/1.35 var(--family-body);
  letter-spacing: 0; text-transform: none; box-shadow: none; transition: background-color 120ms ease, color 120ms ease;
}
.family-page main .button.primary, .family-page main .button-primary, .family-page .site-header .button-primary, .family-page .nav-buy {
  background: var(--accent); color: var(--accent-ink); border: 1px solid #6b874c;
}
.family-page main .button.primary:hover, .family-page main .button-primary:hover {background: #c9f69b; color: var(--accent-ink);}
.family-page main .button:active, .family-page .nav-buy:active {filter: brightness(.9);}
.family-page main :is(a,button,summary):focus-visible, .family-page .site-header :is(a,button):focus-visible,
.family-page .site-footer a:focus-visible {outline: 3px solid #47722b; outline-offset: 4px; box-shadow: 0 0 0 7px var(--surface-page);}
.family-page .site-header {position: sticky; top: 0; min-height: 72px; padding: 12px var(--family-gutter); background: var(--surface-inverse); backdrop-filter: none;}
.family-page .site-header .brand {flex-shrink: 0;}
.family-page .site-nav {gap: clamp(12px, 1.4vw, 22px); font: 400 .85rem/1.3 var(--family-body);}
.family-page .site-nav a {display: inline-flex; align-items: center; min-height: 44px;}
.family-page .launch-banner {font-size: .8rem; min-height: 40px; padding: 6px 20px; gap: 12px;}
.family-page .launch-banner a {min-height: 28px; display: inline-flex; align-items: center;}
.family-menu {color: var(--text-inverse); background: transparent; border: 1px solid #5f6144; border-radius: 4px; min-height: 44px; padding: 8px 14px; font: 500 .9rem var(--family-body);}
.family-menu span {margin-left: 16px;}
.family-menu[hidden] {display: none;}
.family-skip {position: fixed; top: 8px; left: 8px; z-index: 100; padding: 12px 18px; color: var(--accent-ink); background: var(--accent); transform: translateY(-200%);}
.family-skip:focus {transform: none;}
/* Oat owns the introductory and reading surfaces; dark bands hold proof and work. */
.family-page :is(.studio-hero,.service-page-hero,.route-band,.intro-band,.studio-about,.sample-map-band) {
  --ink: #171812; --muted: #55564f; --paper: #171812; --paper-muted: #55564f; --signal: #345324; --line: #c9c6b9;
  color: var(--text-primary); background: var(--surface-page); border-bottom: 1px solid var(--border-paper);
}
.family-page :is(.studio-hero,.service-page-hero,.route-band,.intro-band,.studio-about,.sample-map-band) .button.secondary {color: var(--text-primary); border-color: #77786c; background: transparent;}
.family-page :is(.studio-hero,.service-page-hero,.route-band,.intro-band,.studio-about,.sample-map-band) .button.secondary:hover {background: #e5e0d1;}
.family-page .studio-hero {min-height: 0; display: block; padding-top: clamp(32px,5vw,72px);}
.family-page .studio-hero::before, .family-page .studio-hero::after {display: none;}
.family-page .studio-hero-grid {grid-template-columns: minmax(0,1.3fr) minmax(280px,.7fr); gap: clamp(32px,6vw,88px); align-items: center;}
.family-index {border-top: 2px solid var(--text-primary); padding-top: 16px;}
.family-index > a {display: grid; gap: 10px; padding: 26px 0; border-bottom: 1px solid var(--border-paper); text-decoration: none;}
.family-index > a > span {font: .78rem var(--family-body); color: var(--text-secondary);}
.family-index strong {display: flex; justify-content: space-between; gap: 12px; font-size: clamp(1.4rem,2.3vw,2rem); font-weight: 500; letter-spacing: -.035em;}
.family-index > a:hover strong {color: #345324; text-decoration: underline; text-underline-offset: 6px;}
.family-page .studio-console {width: min(1180px,100%); margin: auto; border: 0; border-radius: 0; background: transparent; box-shadow: none; padding: 0; gap: 24px;}
.family-page .console-title {max-width: 20ch; margin: 0;}
.family-page .console-grid {grid-template-columns: repeat(3,minmax(0,1fr)); gap: 32px;}
.family-page .console-grid article {padding: 20px 0 0; border: 0; border-top: 1px solid #5f6144; border-radius: 0; background: transparent;}
.family-page .console-grid p {font: 500 .9rem var(--family-body); text-transform: none;}
.family-page .console-note {grid-template-columns: 1fr 2fr; gap: 32px; padding: 20px 0 0; border: 0; border-top: 1px solid #5f6144; background: transparent;}
.family-page .route-cards {display: block;}
.family-page .route-cards article {display: grid; grid-template-columns: .5fr 1fr 1.5fr; gap: 16px 32px; min-height: 0; padding: 28px 0; border: 0; border-top: 1px solid var(--border-paper); border-radius: 0; background: transparent;}
.family-page .route-cards h3 {margin: 0;}
.family-page .route-cards .text-link {grid-column: 3; justify-self: start;}
.family-page .route-cards article > span {font: 500 .85rem var(--family-body);}
.family-page .work-card {border: 0; border-top: 1px solid #5f6144; border-radius: 0; box-shadow: none; background: transparent; padding: 24px 0;}
.family-page .work-grid {gap: 32px;}
.family-page .service-page-hero {padding-top: clamp(32px,5vw,72px);}
.family-page .service-page-grid {grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 48px; align-items: center;}
.family-page .family-release {font: .8rem/1.6 var(--family-mono); color: var(--text-secondary); margin-top: 24px; max-width: 52ch;}
.family-evidence {margin: 0; min-width: 0; border: 1px solid var(--border-paper); border-radius: 4px; overflow: hidden; box-shadow: none; background: #f4f7f5; color: var(--text-primary);}
.family-evidence figcaption {display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; padding: 14px 16px; margin: 0; font: .75rem/1.5 var(--family-mono); color: var(--text-primary); background: var(--surface-page); border-bottom: 1px solid var(--border-paper);}
.family-evidence img {display: block; width: 100%; height: auto; border-radius: 0;}
.family-evidence > a {display: block;}
.family-evidence .evidence-caption {padding: 14px 16px; margin: 0; font-size: .8rem; color: var(--text-secondary); background: var(--surface-page);}
.sample-detail-views {display: grid; grid-template-columns: repeat(2,minmax(0,390px)); justify-content: center; gap: 32px; width: min(1180px,100%); margin: 40px auto 0;}
.family-page .service-detail-grid > div {border-radius: 0; background: transparent; box-shadow: none; border: 0; border-top: 2px solid #5f6144; padding: 24px 0;}
.family-page .service-detail-grid {gap: 32px;}
.family-page .moat-comparison article {border-radius: 0; box-shadow: none;}
.family-page .proof-metrics p {border-radius: 0; background: transparent; border: 0; border-top: 1px solid var(--border-paper);}
/* Voice shares type and interaction roles, with a direct utility composition. */
.family-voice {background: var(--surface-page); color: var(--text-primary); --text: #171812; --muted: #55564f; --line: #c9c6b9; --gutter: var(--family-gutter); --section: var(--family-section);}
.family-voice::before {display: none;}
.family-voice .site-header {padding: 0; color: var(--text-inverse); --muted: #b9b6ab; --line: #373829;}
.family-voice .header-inner {min-height: 72px;}
.family-voice .site-nav {color: var(--text-inverse);}
.family-voice .hero {min-height: 0; padding-top: clamp(32px,5vw,72px); padding-bottom: var(--family-section); grid-template-columns: minmax(0,1.25fr) minmax(0,.75fr); gap: 48px;}
.family-voice .hero h1 {max-width: 15ch; margin: 24px 0;}
.family-voice .hero-descriptor {font-size: clamp(1.2rem,1rem + .5vw,1.5rem); line-height: 1.4; color: var(--text-primary);}
.family-voice .hero-support {color: var(--text-secondary); font-size: 1.075rem;}
.family-voice .product-label {color: #345324; font: .8rem/1.5 var(--family-body); letter-spacing: .035em;}
.family-voice .parent-mark {display: none;}
.family-voice .button-outline {color: var(--text-primary); border-color: #77786c; background: transparent;}
.family-voice .button-outline:hover {background: #e5e0d1; color: var(--text-primary);}
.family-voice .release-line {font: .75rem/1.7 var(--family-mono); letter-spacing: 0; flex-wrap: wrap; color: var(--text-secondary);}
.family-voice .voice-console {border: 0; border-left: 1px solid var(--border-paper); border-radius: 0; box-shadow: none; background: transparent; padding-left: 24px;}
.family-voice .voice-console figcaption {padding: 0 0 20px; font: .75rem/1.5 var(--family-body); color: var(--text-secondary);}
.family-voice .voice-console figcaption span:first-child {color: #345324;}
.family-voice .voice-rail {padding: 24px 0 0;}
.family-voice .rail-label {color: var(--text-primary); font: 500 .85rem/1.5 var(--family-body);}
.family-voice .rail-node {border-color: #77786c; color: #345324; background: var(--surface-page);}
.family-voice .rail-step {padding-bottom: 24px;}
.family-voice .rail-step:last-child {padding-bottom: 0;}
.family-voice .voice-rail::before {background: var(--border-paper);}
.family-voice kbd {border-color: #77786c; color: var(--text-primary); background: transparent;}
.family-voice .voice-console blockquote {background: #e5e0d1; border-color: #345324; color: var(--text-primary);}
.family-voice .cursor {animation: none; background: #345324;}
.family-voice .section-index {font: .8rem var(--family-body); letter-spacing: .035em; text-transform: none; color: #345324; border-color: var(--border-paper);}
.family-voice .download-heading {max-width: 780px;}
.family-voice .download-layout, .family-voice .platform-secondary {display: block;}
.family-voice .platform {display: grid; grid-template-columns: minmax(160px,.65fr) minmax(0,1.4fr) minmax(200px,.9fr); column-gap: 32px; min-height: 0; padding: 28px 0; background: transparent; border: 0; border-top: 1px solid var(--border-paper);}
.family-voice .platform-top {display: grid; align-content: start; gap: 10px; grid-column: 1; grid-row: 1 / 3; margin: 0;}
.family-voice .platform-os {color: var(--text-primary); font: 500 1rem var(--family-body);}
.family-voice .platform-status {color: #345324; text-align: left; font: .8rem var(--family-body);}
.family-voice .platform h3 {grid-column: 2; margin: 0 0 10px;}
.family-voice .platform > p {grid-column: 2; margin: 0; color: var(--text-secondary);}
.family-voice .platform-buttons {grid-column: 3; grid-row: 1 / 3; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; margin: 0; gap: 12px;}
.family-voice .platform-buttons .text-link {min-height: 44px; display: inline-flex; align-items: center; justify-content: center;}
.family-voice .proof-boundary {color: var(--text-secondary); border-color: var(--border-paper);}
.family-voice #processing, .family-voice .open-band {color: var(--text-inverse); background: var(--surface-inverse); --text: #f2efe4; --muted: #b9b6ab; --line: #373829;}
.family-voice #processing {width: 100%; max-width: none; padding-inline: max(var(--family-gutter),calc((100% - 1180px)/2));}
.family-voice #processing :is(.eyebrow,.section-index), .family-voice .open-band .eyebrow {color: var(--accent);}
.family-voice .mode-stack {border-radius: 0; box-shadow: none;}
.family-voice .step, .family-voice .use-case {border-radius: 0; box-shadow: none;}
.family-voice .faq-list summary {min-height: 56px;}
.family-voice .site-footer {color: var(--text-inverse); background: var(--surface-inverse); --muted:#b9b6ab;}
@media (max-width: 1200px) {
  .family-page .site-header {flex-wrap: wrap;}
  .family-menu:not([hidden]) {display: inline-flex; align-items:center;}
  .family-page .site-header > .site-nav {position: static; flex-basis: 100%; flex-wrap: wrap; padding: 12px 0;}
  .family-page .site-header[data-family-enhanced] > .site-nav {display: none;}
  .family-page .site-header[data-family-enhanced][data-family-open] > .site-nav {display: flex;}
}
@media (min-width: 1201px) {.family-menu:not([hidden]) {display:none;}}
@media (max-width: 980px) {
  .family-page .studio-hero-grid, .family-page .service-page-grid, .family-voice .hero {grid-template-columns: 1fr; gap: 32px;}
  .family-index {max-width: none;}
  .family-index > a {padding: 20px 0;}
  .family-voice .voice-console {border-left: 0; border-top: 1px solid var(--border-paper); padding: 24px 0 0;}
  .family-voice .voice-rail {display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px;}
  .family-voice .voice-rail::before {display: none;}
  .family-voice .platform {grid-template-columns: minmax(130px,.6fr) minmax(0,1.4fr);}
  .family-voice .platform-buttons {grid-column:2; grid-row:auto; margin-top:20px;}
  .family-page .route-cards article {grid-template-columns: 1fr 2fr;}
  .family-page .route-cards article > span {grid-column:1; grid-row:1 / 3;}
  .family-page .route-cards :is(h3,p,.text-link) {grid-column:2;}
  .family-voice .site-nav {top:72px; background:var(--surface-inverse);}
  .family-voice:not(.js) .site-nav {position:static; display:flex;}
  html.js .family-voice .site-nav {position:absolute; display:none;}
  html.js.nav-open .family-voice .site-nav {display:flex;}
}
@media (max-width: 600px) {
  .family-page .launch-banner {display:grid; grid-template-columns: 1fr auto; gap:0 8px; text-align:left; padding:6px 20px; font-size:.72rem; line-height:1.35;}
  .family-page .launch-banner > span:first-child {grid-column:1 / 3;}
  .family-page .launch-limit {font-size:.65rem;}
  .family-page .launch-banner a {min-height:28px;}
  .family-page .site-header {min-height:64px; padding-block:8px;}
  .family-page .site-header > .site-nav {max-height:65svh; overflow-y:auto; align-items:stretch; flex-direction:column; gap:2px;}
  .family-page .site-header > .site-nav a {padding:8px 12px;}
  .family-page .studio-hero, .family-page .service-page-hero, .family-voice .hero {padding-top:24px;}
  .family-page main h1 {font-size:2.65rem; line-height:1.04;}
  .family-page .hero-actions {gap:12px;}
  .family-page .hero-actions .button {width:100%; text-align:center;}
  .family-page .console-grid, .family-page .console-note {grid-template-columns:1fr; gap:24px;}
  .family-page .route-cards article {display:grid; grid-template-columns:1fr; gap:12px;}
  .family-page .route-cards article > :is(span,h3,p,.text-link) {grid-column:1; grid-row:auto;}
  .family-page .sample-detail-views {grid-template-columns:minmax(0,390px); gap:24px;}
  .family-page .product-hero-art img {aspect-ratio:390 / 844;}
  .family-voice .site-header {padding:0;}
  .family-voice .header-inner {min-height:64px; grid-template-columns:1fr auto;}
  .family-voice .header-actions {display:none;}
  .family-voice .site-nav {top:64px;}
  .family-voice .hero h1 {margin:18px 0;}
  .family-voice .voice-rail {grid-template-columns:1fr; gap:0;}
  .family-voice .platform {grid-template-columns:1fr; gap:12px;}
  .family-voice .platform-top {grid-column:1; grid-row:auto; display:flex; justify-content:space-between; align-items:center; margin-bottom:8px;}
  .family-voice .platform > :is(h3,p,.platform-buttons) {grid-column:1; grid-row:auto; margin:0;}
  .family-voice .platform-buttons {padding-top:8px;}
  .family-voice .proof-boundary {display:block;}
}
@media (prefers-reduced-motion: reduce) {
  html {scroll-behavior:auto;}
  .family-page main *, .family-page .site-header * {animation:none !important; transition:none !important; scroll-behavior:auto !important;}
}
.family-voice main :is(.eyebrow,.text-link,.inline-links a) {color:#345324;}
.family-voice #processing :is(.eyebrow,.text-link,.inline-links a), .family-voice .open-band :is(.eyebrow,.text-link,.inline-links a) {color:var(--accent);}
@media (max-width:600px) {
  .family-page .site-header {flex-direction:row; align-items:center; justify-content:space-between; gap:0;}
  .family-page .studio-hero, .family-page .service-page-hero {padding-top:16px;}
  .family-page .studio-hero-grid > div:first-child, .family-page .service-page-grid > div:first-child {gap:12px;}
  .family-page .service-page-hero h1 {margin-top:12px;}
}
.family-page .site-header .brand {min-width:0;}
.family-page .site-header .site-nav .nav-buy {display:inline-flex;}
@media (max-width:600px) {
  .family-page .service-page-hero .eyebrow {font-size:.75rem; line-height:1.4;}
  .family-page .service-page-hero h1 {margin-top:8px;}
}
.family-voice :is(.large-copy,.faq-list summary) {color:var(--text-primary);}
.family-voice :is(.use-list span,.proof-boundary a,.text-link span,.faq-list summary::after) {color:#345324;}
.family-voice .open-band p {color:#b9b6ab;}
.family-voice .final-cta {color:var(--text-inverse); --text:#f2efe4; --muted:#b9b6ab;}
.family-voice .final-cta :is(.eyebrow,.text-link) {color:var(--accent);}
.family-voice .section-index {margin-bottom:32px;}
@media(max-width:600px) {
  .family-page .service-page-hero .eyebrow {line-height:1.4;}
  .family-page .service-page-hero h1 {margin-top:0;}
  .family-page .service-page-grid > div:first-child {gap:8px;}
}
.family-page .split-band {--paper-muted:#55564f; --signal:#345324;}
.family-page .split-band .moat-comparison article {border-top-color:#77786c;}
.family-page .split-band .method-list > li > span {color:#345324;}
.family-page .enquiry-band .button.secondary {color:#171812; border-color:#171812;}
.family-voice :is(.open-band,.final-cta) .text-link span {color:var(--accent);}
.family-page .enquiry-band h3 {color:#171812;}
.family-voice #processing .text-link span {color:var(--accent);}
/* Direct anchor navigation keeps long evidence pages predictable. */
html {scroll-behavior:auto;}
@media (prefers-reduced-motion:no-preference) {
  .family-page main .button {transition:background-color 120ms ease,color 120ms ease,transform 100ms ease-out;}
  .family-page main .button:active {transform:translateY(1px);}
  .family-index strong > span {transition:transform 160ms ease-out;}
  .family-index > a:is(:hover,:focus-visible) strong > span {transform:translate(3px,-3px);}
}
.family-page .enquiry-band .checkout-requirements li {color:#27100a;}