@import url("styles/mother-base.css");
/* Chorix / Kymtx — the mother (Chorix 919) stylesheet is imported unchanged above (byte copy of
   C:\ChorixDrop\out\licensing-revision-20260824\website\styles.css, sha1 01b43c3b…, the same file the Ensemble site
   imports). Family pattern, ruled 2026-09-25 (R6) and K2 (2026-10-03): one stylesheet in line with 919. Everything below
   is Kymtx's own layer. Nothing here overrides a mother token; Kymtx's cyan (#52c8d8, the Atomic pill law's hairline,
   app/dist/kymtx-atomic.css) is added as its own token. */
:root{--kx-cyan:#52c8d8;--kx-cyan-soft:rgba(82,200,216,.14);--kx-line:rgba(152,184,203,.22)}

/* ---- the mother's own inline page rules (index.html <style>), carried as on the Ensemble site ---- */
.hero .hero-tagline{margin:23px 0 24px;max-width:680px;font-size:clamp(50px,4.9vw,74px);line-height:1;letter-spacing:-.03em;font-weight:500}
/* Kymtx's hero gradient runs through its own cyan into the family green. */
.hero .hero-tagline span{background:linear-gradient(100deg,#eaf5f7 2%,#8fe3ee 30%,#52c8d8 70%,#2aa3b6 98%);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero h1.hero-seo{margin:-6px 0 18px;max-width:640px;font-size:20px;line-height:1.42;letter-spacing:-.014em;font-weight:400;color:#9db4d8}
@media(max-width:1050px){.hero .hero-tagline{max-width:none}}
@media(max-width:700px){.hero .hero-tagline{font-size:clamp(42px,12vw,60px)}.hero h1.hero-seo{font-size:17px}}
.hero-visual .screen-frame-wide{aspect-ratio:1060/930;padding:clamp(10px,1.2vw,16px)}
@media(max-width:720px){.hero-visual .screen-frame-wide{aspect-ratio:auto;padding:10px}}
html{scroll-padding-top:96px}

/* ---- carried from the Ensemble layer (same rules, same names) ---- */
.review-banner{position:relative;z-index:1;margin:78px 0 0;padding:12px 20px;border-bottom:1px dashed #c79a2e;background:rgba(253,233,176,.08);color:var(--text);font-size:.9rem;line-height:1.5;text-align:center}
.review-banner b{color:#fde9b0}
.review-banner a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.flow-rail{grid-template-columns:repeat(7,1fr)}
@media(max-width:1050px){.flow-rail{grid-template-columns:repeat(4,1fr)}}
@media(max-width:600px){.flow-rail{grid-template-columns:repeat(2,1fr)}}
.capture{margin:0;min-width:0}
.capture .screen-frame{aspect-ratio:auto}
.capture .screen-frame img{height:auto;object-fit:contain}
.capture figcaption{margin:12px 4px 0;font-size:.86rem;line-height:1.55;color:var(--muted-2)}
.capture figcaption strong{color:var(--text)}
.capture figcaption a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.placeholder{display:grid;place-items:center;min-height:240px;padding:28px;border:2px dashed rgba(143,177,232,.35);border-radius:28px;background:#050812;color:var(--muted);font:600 14px/1.5 var(--mono);text-align:center}
.placeholder small{display:block;margin-top:8px;font:400 12px/1.5 system-ui;color:var(--muted-2)}
.tiers-problem b{color:var(--text)}
.assurances .as-tag{color:var(--kx-cyan)}
.board-section{padding-top:40px}
.board-section .section-heading{max-width:980px}
.board-section .section-heading p{color:var(--muted);line-height:1.7}
.board-section .section-heading b{color:var(--text)}
.board-section code,.kx-code{font:600 .9em var(--mono);color:var(--amber)}
.table-scroll{overflow-x:auto;border:1px solid var(--line-bright);border-radius:var(--radius-sm);background:var(--panel-solid)}
table.board{width:100%;min-width:980px;border-collapse:collapse;font-size:.84rem;line-height:1.5}
table.board th{position:sticky;top:0;text-align:left;padding:12px 14px;color:var(--kx-cyan);font:600 11px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;background:var(--panel-solid);border-bottom:1px solid var(--line-bright)}
table.board td{padding:11px 14px;vertical-align:top;color:var(--muted);border-bottom:1px solid var(--line)}
table.board td:first-child{font:600 12px/1.5 var(--mono);color:var(--text);white-space:nowrap}
table.board td:nth-child(2){color:var(--text);min-width:260px}
table.board td.status{white-space:nowrap;font:700 11px/1.5 var(--mono);letter-spacing:.08em;text-transform:uppercase}
table.board td.s-complete{color:#39FF6B}
table.board td.s-embodiment{color:#fde9b0}
table.board td.s-build{color:#FF6A4D}
.board-note{margin:18px 4px 0;font-size:.86rem;line-height:1.6;color:var(--muted-2)}
@media print{table.board td.s-complete,table.board td.s-embodiment,table.board td.s-build{color:#000}}
.mechanic-layout > .capture{align-self:start;position:sticky;top:110px}
@media(max-width:1050px){.mechanic-layout > .capture{position:static}}

/* ---- Kymtx's own layer ---- */
/* The distinction: four short lines under the hero, the product's one-sentence law. */
.kx-law{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:34px}
.kx-law div{border:1px solid var(--line);border-left:2px solid var(--kx-cyan);border-radius:var(--radius-sm);background:var(--panel);padding:16px 18px}
.kx-law span{display:block;margin-bottom:6px;font:700 10px/1.3 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--kx-cyan)}
.kx-law p{margin:0;font-size:.95rem;line-height:1.5;color:var(--text)}
@media(max-width:980px){.kx-law{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.kx-law{grid-template-columns:1fr}}

/* Cards in a grid: the problem list, the family of surfaces, the use cases. */
.kx-grid{display:grid;gap:14px;margin-top:30px}
.kx-grid.c2{grid-template-columns:repeat(2,minmax(0,1fr))}
.kx-grid.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.kx-grid.c4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:1050px){.kx-grid.c3,.kx-grid.c4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.kx-grid.c2,.kx-grid.c3,.kx-grid.c4{grid-template-columns:1fr}}
.kx-card{border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--panel);padding:18px 20px;min-width:0}
.kx-card > span{display:block;margin-bottom:8px;font:700 10px/1.3 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--kx-cyan)}
.kx-card h3{margin:0 0 6px;font-size:1.02rem;line-height:1.35;color:var(--text)}
.kx-card p{margin:0;font-size:.9rem;line-height:1.6;color:var(--muted)}
a.kx-card{text-decoration:none;transition:border-color .2s,transform .2s}
a.kx-card:hover,a.kx-card:focus-visible{border-color:var(--kx-cyan);transform:translateY(-2px)}

/* The thread: twelve numbered steps from matter to evolution. An ordered list, so it reads without colour. */
.kx-thread-rail{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 6px;margin:26px 0 8px;padding:0;list-style:none;font:700 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase}
.kx-thread-rail li{display:flex;align-items:center;gap:6px;color:var(--text)}
.kx-thread-rail li + li::before{content:"\2192";color:var(--kx-cyan)}
.kx-steps{counter-reset:kx;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:26px 0 0;padding:0;list-style:none}
.kx-steps li{counter-increment:kx;position:relative;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--panel);padding:16px 18px 16px 58px;min-width:0}
.kx-steps li::before{content:counter(kx,decimal-leading-zero);position:absolute;left:16px;top:16px;width:30px;height:30px;border-radius:50%;border:1px solid var(--kx-line);color:var(--kx-cyan);font:700 11px/30px var(--mono);text-align:center}
.kx-steps h3{margin:0 0 4px;font-size:.95rem;color:var(--text)}
.kx-steps p{margin:0;font-size:.86rem;line-height:1.55;color:var(--muted)}
@media(max-width:1050px){.kx-steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.kx-steps{grid-template-columns:1fr}}

/* Chips: provenance labels, readiness states, epistemic states. Each chip carries its word; colour only seconds it. */
.kx-chips{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 0;padding:0;list-style:none}
.kx-chips li{border:1px solid var(--kx-line);border-radius:999px;padding:6px 12px;font:700 10.5px/1.2 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--text);background:rgba(5,10,14,.6)}
.kx-chips li.is-reach{border-style:dashed;color:var(--muted)}
.kx-chips li.is-ok{border-color:rgba(57,255,107,.5);color:#39FF6B}
.kx-chips-note{margin:10px 2px 0;font-size:.82rem;line-height:1.55;color:var(--muted-2)}

/* The epistemic ladder: what a thing on screen is allowed to be called. */
.kx-ladder{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 22px;margin:26px 0 0;padding:0;list-style:none}
.kx-ladder li{display:grid;grid-template-columns:190px 1fr;gap:14px;align-items:baseline;padding:10px 0;border-bottom:1px solid var(--line)}
.kx-ladder b{font:700 11px/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--kx-cyan)}
.kx-ladder span{font-size:.9rem;line-height:1.5;color:var(--muted)}
@media(max-width:900px){.kx-ladder{grid-template-columns:1fr}.kx-ladder li{grid-template-columns:150px 1fr}}

/* The architecture, as boxes and arrows in the page's own type (no drawn picture of the app). */
.kx-arch{display:grid;justify-items:center;gap:0;margin:30px auto 0;max-width:860px}
.kx-arch .n{width:min(100%,460px);border:1px solid var(--kx-line);border-radius:14px;background:var(--panel);padding:13px 18px;text-align:center}
.kx-arch .n b{display:block;font:700 12px/1.3 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--text)}
.kx-arch .n span{display:block;margin-top:4px;font-size:.84rem;line-height:1.45;color:var(--muted)}
.kx-arch .n.is-human{border-color:rgba(57,255,107,.55)}
.kx-arch .n.is-human b{color:#39FF6B}
.kx-arch .n.is-ses{border-color:var(--kx-cyan);background:var(--kx-cyan-soft)}
.kx-arch .n.is-ses b{color:var(--kx-cyan)}
.kx-arch .a{height:26px;width:1px;background:var(--kx-line);position:relative}
.kx-arch .a::after{content:"";position:absolute;left:-4px;bottom:0;border:4.5px solid transparent;border-top-color:var(--kx-cyan);border-bottom:0}
.kx-arch .row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;width:100%}
.kx-arch .row .n{width:auto}
@media(max-width:620px){.kx-arch .row{grid-template-columns:1fr}}

/* The status section: the mother's scorecard, with one state word per row. */
.score-row strong.st-partial{color:#fde9b0}
.score-row strong.st-planned{color:#FF6A4D}
.score-row strong.st-research{color:var(--muted)}
.kx-legend{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 18px;margin:22px 0 0;padding:0;list-style:none}
.kx-legend li{font-size:.84rem;line-height:1.5;color:var(--muted)}
.kx-legend b{display:block;font:700 10.5px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--text)}
@media(max-width:900px){.kx-legend{grid-template-columns:1fr}}
.kx-status-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:30px}
@media(max-width:980px){.kx-status-grid{grid-template-columns:1fr}}

/* Two columns of plain lists: Kymtx's fee beside what outside science costs; what stays beside what leaves. */
.kx-split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:30px}
@media(max-width:820px){.kx-split{grid-template-columns:1fr}}
.kx-split .kx-card ul{margin:10px 0 0;padding:0 0 0 18px;color:var(--muted);font-size:.9rem;line-height:1.7}
.kx-split .kx-card.is-out{border-color:rgba(255,207,138,.4)}
.kx-split .kx-card.is-out > span{color:var(--amber)}

/* Attribution table at the foot. */
.kx-attrib{width:100%;border-collapse:collapse;margin-top:26px;font-size:.88rem;line-height:1.5}
.kx-attrib th{text-align:left;padding:10px 12px;font:600 11px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--kx-cyan);border-bottom:1px solid var(--line-bright)}
.kx-attrib td{padding:10px 12px;vertical-align:top;color:var(--muted);border-bottom:1px solid var(--line)}
.kx-attrib td:first-child{color:var(--text);white-space:nowrap}
.kx-fine{margin:20px 2px 0;font-size:.86rem;line-height:1.65;color:var(--muted-2)}
.kx-fine b{color:var(--text)}

/* Stacked mechanic sections keep their figure to a readable width. */
.mechanic-layout-stacked > .capture{max-width:1100px;margin-inline:auto}
.kx-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:26px}
@media(max-width:900px){.kx-pair{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){a.kx-card{transition:none}a.kx-card:hover{transform:none}}

/* ---- Colour identity (2026-10-08): cyan is Kymtx's scientific colour; green is kept for authority and readiness only
   (the Principal, Judgment, READY, Implemented, the live status dot). These rules restyle the mother's components on this
   site; no mother token is changed. ---- */
.section-label{color:var(--kx-cyan)}
.eyebrow{color:#bfeef4}
.eyebrow-icon{border-color:rgba(82,200,216,.32);background:rgba(82,200,216,.10)}
.eyebrow-icon svg{fill:var(--kx-cyan)}
.mechanic-copy h2 span,.section-heading h2 span,.faq-heading h2 span,.cta-content h2 span,.scorecard-copy h2 span{color:var(--kx-cyan)}
.mechanic-points article>span{color:var(--kx-cyan)}
.flow-rail a:hover,.flow-rail a.is-current{border-color:rgba(82,200,216,.42);background:rgba(82,200,216,.07)}
.button-primary{color:#031217;background:linear-gradient(135deg,#8fe3ee,#52c8d8 70%);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 12px 34px rgba(82,200,216,.24)}
.button-primary:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.23),0 17px 40px rgba(82,200,216,.34)}
.score-row strong{color:#39FF6B}
.kx-law div.is-authority{border-left-color:#39FF6B}
.kx-law div.is-authority span{color:#39FF6B}
.kx-fine a,.kx-card p a,.section-heading p a{color:var(--kx-cyan);text-underline-offset:3px}
/* Docs page: a definition table per taxonomy. */
.kx-defs{width:100%;border-collapse:collapse;margin-top:14px;font-size:.9rem;line-height:1.55}
.kx-defs th{text-align:left;padding:9px 12px;font:600 11px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--kx-cyan);border-bottom:1px solid var(--line-bright)}
.kx-defs td{padding:9px 12px;vertical-align:top;color:var(--muted);border-bottom:1px solid var(--line)}
.kx-defs td:first-child{font:700 11px/1.5 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--text);white-space:nowrap}
.kx-doc{max-width:940px;margin-inline:auto}
.kx-doc h2{font-size:clamp(24px,2.4vw,32px);margin:56px 0 8px}
.kx-doc > p{color:var(--muted);line-height:1.7;margin:0 0 6px}
.kx-doc-toc{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 0;padding:0;list-style:none}
.kx-doc-toc a{display:block;border:1px solid var(--kx-line);border-radius:999px;padding:7px 13px;font:700 10.5px/1.2 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--text);text-decoration:none}
.kx-doc-toc a:hover,.kx-doc-toc a:focus-visible{border-color:var(--kx-cyan)}

/* ---- Accessibility pass (2026-10-08, WCAG 2.1 AA). The mother's --muted-2 (#4b5872) is about 2.6:1 on this background,
   under the 4.5:1 that body text needs; small print on this site uses --kx-small (about 6.3:1) instead. Nothing smaller than
   11px carries meaning. Links inside prose are underlined, so colour is never the only cue. ---- */
:root{--kx-small:#93a0b6}
.capture figcaption,.kx-chips-note,.kx-fine,.board-note,.placeholder small{color:var(--kx-small)}
.capture figcaption a,.kx-fine a,.kx-card p a,.section-heading p a,.kx-doc p a{color:var(--kx-cyan);text-decoration:underline;text-underline-offset:3px}
.kx-law span,.kx-card > span,.mechanic-points article>span{font-size:11px;line-height:1.35}
.score-row strong{font-size:11px}
.score-row span{font-size:13px;color:#aab4c6}
.scorecard-top span{font-size:12px;color:#aab4c6}
.total-score span{color:#aab4c6}
.score-row strong.st-research{color:#aab4c6}
.kx-chips li.is-reach{color:#aab4c6}
table.board td.s-build,.score-row strong.st-planned{color:#ff8a70}
.footer-bottom,.footer-bottom a,.site-footer p{color:#aab4c6}
:where(a,button,[tabindex]):focus-visible{outline:2px solid var(--kx-cyan);outline-offset:3px;border-radius:6px}
.table-scroll:focus-visible,.kx-defs-scroll:focus-visible{outline:2px solid var(--kx-cyan);outline-offset:2px}
.kx-defs-scroll{overflow-x:auto}
@media(max-width:700px){.kx-defs{min-width:520px}.kx-defs td:first-child{white-space:normal}}
.kx-thread-rail li + li::before{content:"\2192" / ""}
.kx-arch .n b{font-size:12px}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.reveal{opacity:1!important;transform:none!important;transition:none!important}}
.footer-links strong{font-size:11px}
.kx-chips li,.kx-doc-toc a{font-size:11px}
/* the way back to SPEKTX: the house's mark at the top-left of the header, before the product's own, on every page of every SPEKTX site;
   the same place the SPEKTX logo has on spektx.com (2026-10-09) */
.spektx-home{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:10px;background:#000;border:1px solid rgba(255,255,255,.22);margin-right:-10px;opacity:.9;transition:opacity .15s}
.spektx-home:hover,.spektx-home:focus-visible{opacity:1}
.spektx-home img{width:26px;height:26px;display:block;border-radius:6px}
.spektx-home + .brand{margin-right:auto}