@import url("styles/mother-base.css");
/* Chorix / Judgment Layer. The mother (Chorix 919) stylesheet is imported unchanged above: a byte copy of the file the
   Kymtx and Ensemble sites import (sha1 01b43c3b...). Everything below is this site's own layer. The family layer that
   follows is the Kymtx site's layer with its names and its colour changed (kx- to jl-, cyan to purple), so the three
   sites stay one grammar. Purple is the Judgment Layer's colour; green is kept for authority only (the person who
   rules, the live dot, Implemented), as on the other family sites. */
:root{--jl-purple:#d9a8ea;--jl-purple-soft:rgba(134,0,160,.16);--jl-line:rgba(190,120,210,.24)}

/* ---- 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}
/* the Judgment Layer's hero gradient runs through its own purple into the family green. */
.hero .hero-tagline span{background:linear-gradient(100deg,#f2ecf8 2%,#d9a8ea 35%,#b44fcf 75%,#a02fbd 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:#b9add6}
@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:1770/1500;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(--jl-purple)}
.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,.jl-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(--jl-purple);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}}

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

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

/* The thread: twelve numbered steps from matter to evolution. An ordered list, so it reads without colour. */
.jl-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}
.jl-thread-rail li{display:flex;align-items:center;gap:6px;color:var(--text)}
.jl-thread-rail li + li::before{content:"\2192";color:var(--jl-purple)}
.jl-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}
.jl-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}
.jl-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(--jl-line);color:var(--jl-purple);font:700 11px/30px var(--mono);text-align:center}
.jl-steps h3{margin:0 0 4px;font-size:.95rem;color:var(--text)}
.jl-steps p{margin:0;font-size:.86rem;line-height:1.55;color:var(--muted)}
@media(max-width:1050px){.jl-steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.jl-steps{grid-template-columns:1fr}}

/* Chips: provenance labels, readiness states, epistemic states. Each chip carries its word; colour only seconds it. */
.jl-chips{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 0;padding:0;list-style:none}
.jl-chips li{border:1px solid var(--jl-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)}
.jl-chips li.is-reach{border-style:dashed;color:var(--muted)}
.jl-chips li.is-ok{border-color:rgba(57,255,107,.5);color:#39FF6B}
.jl-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. */
.jl-ladder{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 22px;margin:26px 0 0;padding:0;list-style:none}
.jl-ladder li{display:grid;grid-template-columns:190px 1fr;gap:14px;align-items:baseline;padding:10px 0;border-bottom:1px solid var(--line)}
.jl-ladder b{font:700 11px/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--jl-purple)}
.jl-ladder span{font-size:.9rem;line-height:1.5;color:var(--muted)}
@media(max-width:900px){.jl-ladder{grid-template-columns:1fr}.jl-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). */
.jl-arch{display:grid;justify-items:center;gap:0;margin:30px auto 0;max-width:860px}
.jl-arch .n{width:min(100%,460px);border:1px solid var(--jl-line);border-radius:14px;background:var(--panel);padding:13px 18px;text-align:center}
.jl-arch .n b{display:block;font:700 12px/1.3 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--text)}
.jl-arch .n span{display:block;margin-top:4px;font-size:.84rem;line-height:1.45;color:var(--muted)}
.jl-arch .n.is-human{border-color:rgba(57,255,107,.55)}
.jl-arch .n.is-human b{color:#39FF6B}
.jl-arch .n.is-ses{border-color:var(--jl-purple);background:var(--jl-purple-soft)}
.jl-arch .n.is-ses b{color:var(--jl-purple)}
.jl-arch .a{height:26px;width:1px;background:var(--jl-line);position:relative}
.jl-arch .a::after{content:"";position:absolute;left:-4px;bottom:0;border:4.5px solid transparent;border-top-color:var(--jl-purple);border-bottom:0}
.jl-arch .row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;width:100%}
.jl-arch .row .n{width:auto}
@media(max-width:620px){.jl-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)}
.jl-legend{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 18px;margin:22px 0 0;padding:0;list-style:none}
.jl-legend li{font-size:.84rem;line-height:1.5;color:var(--muted)}
.jl-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){.jl-legend{grid-template-columns:1fr}}
.jl-status-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:30px}
@media(max-width:980px){.jl-status-grid{grid-template-columns:1fr}}

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

/* Attribution table at the foot. */
.jl-attrib{width:100%;border-collapse:collapse;margin-top:26px;font-size:.88rem;line-height:1.5}
.jl-attrib th{text-align:left;padding:10px 12px;font:600 11px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--jl-purple);border-bottom:1px solid var(--line-bright)}
.jl-attrib td{padding:10px 12px;vertical-align:top;color:var(--muted);border-bottom:1px solid var(--line)}
.jl-attrib td:first-child{color:var(--text);white-space:nowrap}
.jl-fine{margin:20px 2px 0;font-size:.86rem;line-height:1.65;color:var(--muted-2)}
.jl-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}
.jl-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:26px}
@media(max-width:900px){.jl-pair{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){a.jl-card{transition:none}a.jl-card:hover{transform:none}}

/* ---- Colour identity (2026-10-08): purple is the Judgment Layer's 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(--jl-purple)}
.eyebrow{color:#ead3f3}
.eyebrow-icon{border-color:rgba(134,0,160,.32);background:rgba(134,0,160,.10)}
.eyebrow-icon svg{fill:var(--jl-purple)}
.mechanic-copy h2 span,.section-heading h2 span,.faq-heading h2 span,.cta-content h2 span,.scorecard-copy h2 span{color:var(--jl-purple)}
.mechanic-points article>span{color:var(--jl-purple)}
.flow-rail a:hover,.flow-rail a.is-current{border-color:rgba(134,0,160,.42);background:rgba(134,0,160,.07)}
.button-primary{color:#150a24;background:linear-gradient(135deg,#cdbdf0,#9a78d6 70%);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 12px 34px rgba(134,0,160,.24)}
.button-primary:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.23),0 17px 40px rgba(134,0,160,.34)}
.score-row strong{color:#39FF6B}
.jl-law div.is-authority{border-left-color:#39FF6B}
.jl-law div.is-authority span{color:#39FF6B}
.jl-fine a,.jl-card p a,.section-heading p a{color:var(--jl-purple);text-underline-offset:3px}
/* Docs page: a definition table per taxonomy. */
.jl-defs{width:100%;border-collapse:collapse;margin-top:14px;font-size:.9rem;line-height:1.55}
.jl-defs th{text-align:left;padding:9px 12px;font:600 11px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--jl-purple);border-bottom:1px solid var(--line-bright)}
.jl-defs td{padding:9px 12px;vertical-align:top;color:var(--muted);border-bottom:1px solid var(--line)}
.jl-defs td:first-child{font:700 11px/1.5 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--text);white-space:nowrap}
.jl-doc{max-width:940px;margin-inline:auto}
.jl-doc h2{font-size:clamp(24px,2.4vw,32px);margin:56px 0 8px}
.jl-doc > p{color:var(--muted);line-height:1.7;margin:0 0 6px}
.jl-doc-toc{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 0;padding:0;list-style:none}
.jl-doc-toc a{display:block;border:1px solid var(--jl-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}
.jl-doc-toc a:hover,.jl-doc-toc a:focus-visible{border-color:var(--jl-purple)}

/* ---- 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 --jl-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{--jl-small:#a79ab3}
.capture figcaption,.jl-chips-note,.jl-fine,.board-note,.placeholder small{color:var(--jl-small)}
.capture figcaption a,.jl-fine a,.jl-card p a,.section-heading p a,.jl-doc p a{color:var(--jl-purple);text-decoration:underline;text-underline-offset:3px}
.jl-law span,.jl-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:#b3a8be}
.scorecard-top span{font-size:12px;color:#b3a8be}
.total-score span{color:#b3a8be}
.score-row strong.st-research{color:#b3a8be}
.jl-chips li.is-reach{color:#b3a8be}
table.board td.s-build,.score-row strong.st-planned{color:#ff8a70}
.footer-bottom,.footer-bottom a,.site-footer p{color:#b3a8be}
:where(a,button,[tabindex]):focus-visible{outline:2px solid var(--jl-purple);outline-offset:3px;border-radius:6px}
.table-scroll:focus-visible,.jl-defs-scroll:focus-visible{outline:2px solid var(--jl-purple);outline-offset:2px}
.jl-defs-scroll{overflow-x:auto}
@media(max-width:700px){.jl-defs{min-width:520px}.jl-defs td:first-child{white-space:normal}}
.jl-thread-rail li + li::before{content:"\2192" / ""}
.jl-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}
.jl-chips li,.jl-doc-toc a{font-size:11px}

/* ---- The Judgment Layer's own layer (2026-10-08) ---- */
/* The room: the mother's navy field turned to a deep aubergine. Tokens of this site's own; no mother token is edited. */
:root{--jl-orchid:#8600a0;--jl-lilac:#d9a8ea;--jl-vellum:#f2ecf8;
  --bg:#050406;--bg-soft:#08050a;--panel:rgba(11,7,14,.82);--panel-solid:#0b070e;--panel-2:#120b16;--jl-brand:#8600a0;--jl-brand-light:#d9a8ea}
body{background:radial-gradient(1200px 700px at 50% 12%,#150a1a 0%,var(--bg) 60%) fixed var(--bg)}
.ambient-one{background:rgba(134,0,160,.18)}
.ambient-two{background:rgba(134,0,160,.10)}
.cta-panel{background:linear-gradient(145deg,#160a1b,#0b070e)}
.screen-frame{border-color:rgba(134,0,160,.5);background:#050406}
.brand-mark{border-radius:9px;background:transparent}
.brand-copy{text-transform:none}
.brand-copy span:last-child{text-transform:none;letter-spacing:.12em}
.site-footer p{max-width:520px}

/* The layer stack: the mark's companion. Three planes; the one inserted between the other two is the lit one. */
.jl-stack{display:grid;grid-template-columns:minmax(0,360px) minmax(0,1fr);gap:40px;align-items:center;margin-top:34px}
.jl-stack svg{width:100%;height:auto;display:block}
.jl-stack ol{margin:0;padding:0;list-style:none;display:grid;gap:12px}
.jl-stack li{border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--panel);padding:16px 20px}
.jl-stack li.is-layer{border-color:var(--jl-orchid);background:var(--jl-purple-soft)}
.jl-stack li span{display:block;margin-bottom:6px;font:700 11px/1.35 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--jl-purple)}
.jl-stack li h3{margin:0 0 4px;font-size:1.02rem;color:var(--text)}
.jl-stack li p{margin:0;font-size:.9rem;line-height:1.6;color:var(--muted)}
@media(max-width:860px){.jl-stack{grid-template-columns:1fr;gap:22px}.jl-stack svg{max-width:260px;margin-inline:auto}}
.jl-glyph{display:inline-block;width:18px;height:18px;vertical-align:-3px;margin-right:8px}
.section-label .jl-glyph{width:16px;height:16px}

/* The verbs: five and the HOLD control, each with what comes back to the system. */
.jl-verbs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:30px}
@media(max-width:980px){.jl-verbs{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.jl-verbs{grid-template-columns:1fr}}
.jl-verb{border:1px solid var(--line);border-top:2px solid var(--jl-orchid);border-radius:var(--radius-sm);background:var(--panel);padding:16px 20px}
.jl-verb b{display:block;font:700 15px/1.2 var(--mono);letter-spacing:.08em;color:var(--text)}
.jl-verb em{display:block;margin:6px 0 8px;font:700 11px/1.35 var(--mono);font-style:normal;letter-spacing:.14em;text-transform:uppercase;color:var(--jl-purple)}
.jl-verb p{margin:0;font-size:.9rem;line-height:1.6;color:var(--muted)}
.jl-verb.is-hold{border-top-style:dashed}

/* Code and terminal output, as the product printed it. */
.jl-code{margin:0;border:1px solid var(--jl-line);border-radius:var(--radius-sm);background:#050406;overflow:auto}
.jl-code .cap{padding:10px 16px;border-bottom:1px solid var(--line);font:700 11px/1.35 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--jl-purple)}
.jl-code pre{margin:0;padding:16px 18px;font:13px/1.65 var(--mono);color:#e6dcec;white-space:pre;tab-size:2}
.jl-code pre b{color:#39FF6B;font-weight:600}
.jl-code pre i{color:#b3a8be;font-style:normal}
.jl-code:focus-visible{outline:2px solid var(--jl-purple);outline-offset:2px}

/* Tiers. */
.jl-tiers{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:30px}
@media(max-width:1050px){.jl-tiers{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.jl-tiers{grid-template-columns:1fr}}
.jl-tier{border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--panel);padding:22px 22px 20px}
.jl-tier.is-mid{border-color:var(--jl-orchid)}
.jl-tier > span{display:block;font:700 11px/1.35 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--jl-purple)}
.jl-tier strong{display:block;margin:10px 0 2px;font-size:2rem;line-height:1.1;letter-spacing:-.02em;font-weight:500;color:var(--text)}
.jl-tier strong small{font-size:.85rem;font-weight:400;color:#b3a8be;letter-spacing:0}
.jl-tier ul{margin:14px 0 0;padding:0 0 0 18px;font-size:.9rem;line-height:1.7;color:var(--muted)}
.jl-tier p{margin:6px 0 0;font-size:.84rem;color:#b3a8be}

/* Captures side by side, and a tall capture kept to a readable height. */
.jl-shots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:30px;align-items:start}
@media(max-width:900px){.jl-shots{grid-template-columns:1fr}}
.jl-table{width:100%;border-collapse:collapse;font-size:.9rem;line-height:1.55}
.jl-table th{text-align:left;padding:11px 14px;font:600 11px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--jl-purple);border-bottom:1px solid var(--line-bright);background:var(--panel-solid)}
.jl-table td{padding:11px 14px;vertical-align:top;color:var(--muted);border-bottom:1px solid var(--line)}
.jl-table td:first-child{color:var(--text);min-width:190px}
.jl-table code,.jl-fine code,.jl-card code,.mechanic-points code,.faq-answer code{font:600 .9em var(--mono);color:#ead3f3}
.jl-split .jl-card.is-out{border-color:rgba(205,189,240,.4)}
.jl-split .jl-card.is-out > span{color:var(--jl-lilac)}
.jl-law div.is-authority{border-left-color:#39FF6B}
.jl-law div.is-authority span{color:#39FF6B}
.board-section code{color:#ead3f3}
table.board td.s-blocker{color:#ff8a70}
@media(min-width:1051px){.jl-steps.c3{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:1051px){.hero .hero-tagline{font-size:clamp(44px,3.9vw,58px);line-height:1.04}}
.hero h1.hero-seo{color:#b9add6}

/* ---- The app's palette (2026-10-08, evening): black and purple #8600A0, as the product's own desk now wears it (branch
   jl-purple-ledger-2026-10-08, scripts/make-desk-skin.mjs: bg #050406, panel #0b070e, line #2c1a36, brand #8600a0, brand
   light #d9a8ea). The site's tokens above were turned to those values; these are the places the brand fills a surface. ---- */
:root{--line:rgba(217,168,234,.10);--line-bright:rgba(217,168,234,.20)}
.button-primary{color:#fff;background:#8600a0;box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 12px 34px rgba(134,0,160,.34)}
.button-primary:hover{background:#9612b1;box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 17px 40px rgba(134,0,160,.46)}
.button-primary svg{stroke:#fff}
/* Type and the mother's hard-coded navy surfaces, turned by the app's own rule (blue-grey type to a lavender grey at the same
   light; navy surfaces to black with a breath of purple). tools/navy-check.mjs lists what is left. */
:root{--text:#efecf1;--muted:#a79ab3;--muted-2:#6f6279}
.desktop-nav a,.status-pill{color:#b9afc2}
.hero-definition,.hero-definition span{color:#e4dfe8}
.hero-meet-m{color:#cfc7d6}
.section-heading p,.tiers-problem{color:#a79ab3}
.mechanic-points article{background:rgba(11,7,14,.78);border-color:rgba(217,168,234,.14)}
.mechanic-points article p{color:#a79ab3}
.mechanic-section{border-top-color:rgba(217,168,234,.08)}
.flow-rail a{background:rgba(11,7,14,.78);color:#a79ab3}
.scorecard-panel{background:linear-gradient(180deg,rgba(18,11,22,.92),rgba(8,5,10,.94))}
.faq{background-image:linear-gradient(180deg,rgba(11,7,14,.55),transparent)}
.faq-item button,.faq-item button span{color:#e4dfe8}
.faq-item button i::before,.faq-item button i::after{background:#8a7d95}
.button-secondary,.button-ghost{color:#efecf1}
.footer-links strong{color:#b3a8be}
.faq-answer > p{color:#a79ab3}
.footer-links a,.mobile-nav a{color:#a79ab3}
.footer-links a:hover,.mobile-nav a:hover{color:#efecf1}
.site-header.is-scrolled{background:rgba(5,4,6,.82)}
.mobile-nav{background:rgba(8,5,10,.97)}
/* GOLD MARKS THE PERSON: purple is the system, gold is the one who rules. Carried from the site palette preview of
   2026-10-08 (jl-site-purple-preview-2026-10-08), same four headlines, same gold. */
.human,.hero .hero-tagline em.human,.section-heading h2 span.human,.mechanic-copy h2 span.human,.cta-content h2 span.human{color:#f2b544;-webkit-text-fill-color:#f2b544;background:none;font-style:normal}
/* 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}