/* Sub-pages (compare, use cases). Builds on styles.css tokens and components. */
[hidden] { display: none !important; }
.page-hero { position: relative; overflow: hidden; color: #fff; padding: clamp(130px, 12vw, 170px) 0 clamp(70px, 8vw, 110px);
  background: radial-gradient(40% 50% at 15% 10%, rgba(71,200,245,0.22), transparent 70%), radial-gradient(45% 55% at 90% 20%, rgba(128,84,255,0.45), transparent 70%), linear-gradient(170deg, var(--night), var(--deeper) 45%, var(--deep)); }
.page-hero h1 { margin-top: 22px; font-weight: 600; font-size: clamp(40px, 4.6vw + 12px, 84px); line-height: 0.98; letter-spacing: -0.05em; max-width: 18ch; text-wrap: balance; }
.page-hero h1 span { color: #b9abff; }
.ph-lede { margin-top: 24px; max-width: 62ch; font-size: clamp(17px, 0.5vw + 15px, 21px); color: #ddd6ff; line-height: 1.5; }
.hero-cta.left { justify-content: flex-start; }
.ph-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: clamp(40px, 5vw, 64px); }
.ph-stats li { padding: 18px; border-radius: 20px; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.14); }
.ph-stats b { display: block; font-size: clamp(30px, 2vw + 16px, 44px); letter-spacing: -0.04em; line-height: 1; background: linear-gradient(95deg, #d4c6ff, var(--cyan)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ph-stats span { display: block; margin-top: 8px; font-size: 14px; color: #d6cefc; }
.crumb { display: flex; flex-wrap: wrap; gap: 8px; font-size: 14px; color: #b9b1e6; }
.crumb a { color: #fff; text-decoration: none; font-weight: 600; }
.crumb a:hover { text-decoration: underline; }
.pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.pills span { font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; padding: 6px 12px; border-radius: 99px; border: 1px solid rgba(255,255,255,0.22); color: #e6e0ff; }

.sec { padding-block: clamp(70px, 8vw, 120px); }
.sec.tight { padding-block: clamp(30px, 4vw, 50px); }
.sec.alt { background: linear-gradient(180deg, #f6f3ff, #fff); }
.sec.dark { color: #fff; background: radial-gradient(50% 60% at 100% 0%, rgba(71,200,245,0.18), transparent 70%), linear-gradient(160deg, var(--night), var(--deeper) 55%, var(--deep)); }
.sec h2 { font-size: clamp(30px, 2.6vw + 14px, 56px); line-height: 1.04; }
.sec h2 span.muted { color: #9b98ad; }
.dark h2 span.muted { color: #a89fe0; }
.h-sm { font-size: clamp(24px, 1.2vw + 16px, 32px) !important; }
.two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(30px, 5vw, 80px); align-items: start; }
.two .ticks { margin-top: 26px; }
.two .ticks li { font-size: 17px; }

/* ---------- compare ---------- */
.map-wrap { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(30px, 5vw, 70px); align-items: center; }
.map-card { padding: 18px; border-radius: 28px; background: #fff; border: 1px solid #ece7ff; box-shadow: 0 30px 60px -44px rgba(73,39,184,0.5); }
.map { width: 100%; height: auto; overflow: visible; }
.m-corner { fill: #f3efff; stroke: #c9b8ff; stroke-dasharray: 5 5; }
.m-corner-t { font: 600 12px var(--mono); fill: var(--purple); text-transform: uppercase; letter-spacing: 0.08em; }
.m-grid { stroke: #f0edf8; }
.m-axis { stroke: #cfc8e8; stroke-width: 1.5; }
.m-ax { font: 500 12px var(--font); fill: #6f6c80; }
.m-ax-t { font: 700 13px var(--font); fill: var(--ink-2); }
.m-pt circle { opacity: 0.78; stroke: #fff; stroke-width: 2; transition: r 200ms, opacity 200ms; }
.m-pt:hover circle, .m-pt:focus circle { opacity: 1; r: 9; }
.m-pt.on circle { opacity: 1; stroke-width: 3; }
.m-lbl { font: 700 13px var(--font); fill: var(--ink); }
.m-ax-pt circle { fill: var(--purple); filter: drop-shadow(0 6px 12px rgba(101,54,255,0.5)); }
.m-ax-pt text { font: 800 15px var(--font); fill: var(--deep); }
.m-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 22px; }
.m-legend li { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); font-weight: 600; }
.m-legend i { width: 10px; height: 10px; border-radius: 50%; }
.models-sec .sec-head { max-width: 860px; }
.mtiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 40px; }
.mtile { padding: 22px; border-radius: 22px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.16); }
.mtile b { display: block; font-size: 24px; letter-spacing: -0.03em; }
.mtile span { display: block; margin-top: 6px; font-size: 14px; color: #d6cefc; }
.adv { margin-top: clamp(44px, 5vw, 70px); }
.adv-line { font-size: clamp(24px, 1.6vw + 14px, 38px); font-weight: 600; letter-spacing: -0.03em; }
.adv-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 26px; }
.adv-grid article { padding: 22px; border-radius: 22px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12); }
.adv-n { font-family: var(--mono); font-size: 12px; color: var(--cyan); }
.adv-grid b { display: block; margin-top: 10px; font-size: 18px; }
.adv-grid p { margin-top: 8px; font-size: 14.5px; color: #d6cefc; }
.grid-top { display: flex; align-items: end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.search input { width: min(420px, 100%); min-height: 52px; padding: 0 20px; border-radius: 999px; border: 1.5px solid #ddd5ff; font: inherit; font-size: 16px; background: #fff; }
.search input:focus { outline: none; border-color: var(--purple); box-shadow: 0 0 0 4px rgba(101,54,255,0.12); }
.fchips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.fchips button { min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid #e4ddff; background: #fff; font-weight: 700; font-size: 14px; color: var(--ink-2); cursor: pointer; }
.fchips button[aria-pressed='true'] { background: var(--purple); border-color: var(--purple); color: #fff; }
.no-match { margin-top: 30px; color: var(--muted); }
.fam { margin-top: clamp(40px, 5vw, 60px); }
.fam-head { display: flex; align-items: end; justify-content: space-between; gap: 20px; }
.fam-head .label { margin-bottom: 6px; }
.fam-head h3 { font-size: clamp(20px, 1vw + 14px, 26px); font-weight: 600; letter-spacing: -0.025em; max-width: 40ch; }
.fam-head .more { flex: none; }
.ccards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 18px; }
.ccard { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 14px; align-items: start; padding: 18px; border-radius: 20px; border: 1px solid #ece7ff; background: #fff; text-decoration: none; transition: transform 250ms var(--ease), border-color 250ms, box-shadow 250ms; }
.ccard:hover { transform: translateY(-3px); border-color: #c9b8ff; box-shadow: 0 24px 40px -30px rgba(73,39,184,0.6); }
.clogo { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 15px; background: var(--h); }
.cc-body b { display: block; font-size: 16px; }
.cc-body small { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em; color: #6f6c80; margin-top: 2px; }
.cc-body > span { display: block; margin-top: 8px; font-size: 14px; color: var(--muted); line-height: 1.45; }
.caps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 40px; }
.caps article { padding: 22px; border-radius: 22px; background: #fff; border: 1px solid #ece7ff; }
.caps b { font-size: 17px; }
.caps p { margin-top: 8px; font-size: 14.5px; color: var(--muted); }
.corner { display: grid; gap: 14px; }
.corner article { padding: 22px; border-radius: 22px; background: #f7f5ff; border: 1px solid #ece7ff; }
.corner b { font-size: 18px; }
.corner p { margin-top: 6px; color: var(--muted); font-size: 15.5px; }
.faq-wrap { max-width: 900px; }
.faq { margin-top: 30px; display: grid; gap: 10px; }
.faq details { border-radius: 18px; background: #fff; border: 1px solid #ece7ff; padding: 0 22px; }
.faq summary { cursor: pointer; list-style: none; padding: 20px 0; font-weight: 700; font-size: 17px; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; color: var(--purple); font-size: 22px; line-height: 1; transition: transform 200ms; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding-bottom: 20px; color: var(--muted); }
.cta-band { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; padding: clamp(30px, 4vw, 56px); border-radius: 32px; color: #fff; background: radial-gradient(60% 80% at 100% 100%, rgba(71,200,245,0.35), transparent 70%), linear-gradient(140deg, var(--night), var(--deep) 60%, var(--purple)); }
.cta-band h2 { font-size: clamp(30px, 2.4vw + 14px, 52px); }
.cta-band p { margin-top: 10px; color: #ddd6ff; font-size: 18px; }
.cta-band .hero-cta { margin-top: 0; }
.verdict { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 34px; max-width: 980px; }
.verdict > div { padding: 20px 22px; border-radius: 22px; }
.verdict p { font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; }
.verdict b { display: block; margin-top: 8px; font-size: 17px; line-height: 1.4; }
.v-ax { background: #fff; color: var(--ink); }
.v-ax p { color: var(--purple); }
.v-them { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.2); }
.v-them p { color: #c6c0ec; }
.vs-title { display: flex; align-items: center; gap: 14px; margin-top: 28px; }
.ax-badge { width: 56px; height: 56px; border-radius: 16px; background: #fff; display: grid; place-items: center; padding: 8px; }
.ax-badge img { width: 100%; height: auto; }
.vs-title .clogo { width: 56px; height: 56px; border-radius: 16px; font-size: 18px; }
.vs-x { font-family: var(--mono); font-size: 14px; color: #c6c0ec; }
.vs-table { margin-top: 34px; border-radius: 24px; border: 1px solid #e9e4fb; overflow: hidden; background: #fff; }
.vs-row { display: grid; grid-template-columns: minmax(0, 0.6fr) minmax(0, 1.2fr) minmax(0, 1.2fr); }
.vs-row > span { padding: 18px 20px; border-top: 1px solid #f0edf8; font-size: 15px; color: var(--muted); line-height: 1.5; }
.vs-row > span[role='rowheader'] { color: var(--ink); font-weight: 700; }
.vs-row > .ax { background: #f6f3ff; color: var(--ink-2); }
.vs-head > span { border-top: 0; font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: #6f6c80; background: #fbfaff; }
.vs-head > .ax { background: var(--purple); color: #fff; }
.extra { margin-top: 18px; font-weight: 600; color: var(--deep); }
.diff-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 20px; }
.diff-grid article { padding: 26px; border-radius: 24px; background: #fff; border: 1px solid #ece7ff; }
.diff-main { background: linear-gradient(160deg, #f3efff, #fff) !important; }
.diff-main .ticks li { font-size: 17px; }
.diff-side { display: grid; gap: 14px; align-content: start; }
.diff-side p:not(.label) { color: var(--muted); }
.diff-side .works { border-color: #b9e6d3; background: #f2fbf7; }
.sources { padding: 18px 22px; border-radius: 18px; background: #faf9ff; border: 1px solid #ece7ff; font-size: 14px; color: var(--muted); }
.sources summary { cursor: pointer; font-weight: 700; color: var(--ink-2); }
.sources ul { margin-top: 12px; display: grid; gap: 6px; }
.sources a { color: var(--purple); font-weight: 600; }
.sources p { margin-top: 10px; }

/* ---------- use cases ---------- */
.uc-hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(30px, 5vw, 70px); align-items: center; }
.uc-hero h1 { font-size: clamp(38px, 3.6vw + 12px, 70px); }
.micro { margin-top: 18px; font-size: 14px; color: #c6c0ec; }
.wf { padding: 22px; border-radius: 28px; background: rgba(255,255,255,0.96); color: var(--ink); box-shadow: 0 40px 80px -30px rgba(0,0,0,0.6); }
.wf-top { display: flex; justify-content: space-between; gap: 10px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: #6f6c80; }
.wf-req { display: grid; grid-template-columns: 38px 1fr; gap: 12px; align-items: center; margin-top: 16px; padding: 14px; border-radius: 16px; background: #f4f2fb; }
.wf-av { width: 38px; height: 38px; border-radius: 11px; background: #1f5fd1; color: #fff; display: grid; place-items: center; font-weight: 700; }
.wf-req b { display: block; font-size: 13.5px; }
.wf-req p { font-size: 15px; font-weight: 600; }
.wf-line { width: 2px; height: 18px; margin: 6px 0 6px 31px; background: linear-gradient(var(--lilac-2), var(--purple)); }
.wf-twin { padding: 14px 16px; border-radius: 16px; border: 1px solid #e4ddff; }
.wf-twin-t { display: flex; align-items: center; gap: 10px; font-weight: 700; }
.wf-twin ul { margin-top: 10px; display: grid; gap: 7px; }
.wf-twin li { display: flex; gap: 10px; align-items: center; font-size: 14.5px; font-weight: 600; color: var(--ink-2); }
.wf-dec { padding: 14px 16px; border-radius: 16px; background: #fffaf0; border: 1px solid #f0d9a8; }
.wf-dec .k { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--amber); }
.wf-dec b { display: block; margin-top: 4px; font-size: 16px; }
.wf-dec p { font-size: 14px; color: var(--muted); margin-top: 2px; }
.wf-note { margin-top: 12px; font-size: 12px; color: #6f6c80; }
.persona { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(30px, 5vw, 80px); align-items: center; }
.persona .large { font-size: clamp(20px, 0.8vw + 16px, 26px); font-weight: 600; letter-spacing: -0.02em; }
.persona p + p { margin-top: 12px; color: var(--muted); }
.persona .emph { color: var(--deep) !important; font-weight: 700; font-size: 19px; }
.ppills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.ppills span { padding: 8px 14px; border-radius: 99px; background: #f3efff; color: var(--deep); font-weight: 700; font-size: 14px; }
.needs { padding: 26px; border-radius: 26px; background: #f7f5ff; border: 1px solid #ece7ff; }
.needs b { font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--purple); }
.before-grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(30px, 5vw, 70px); align-items: center; }
.friction { padding: 22px; border-radius: 28px; background: #fff; border: 1px solid #f3d6d4; box-shadow: 0 30px 60px -44px rgba(163,47,41,0.5); }
.alert { display: grid; grid-template-columns: 40px 1fr auto; gap: 14px; align-items: center; padding: 14px; border-radius: 16px; background: #fff4f3; }
.alert-i { width: 40px; height: 40px; border-radius: 12px; background: #d93a33; color: #fff; display: grid; place-items: center; font-weight: 800; }
.alert .tiny { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: #8a4a46; }
.alert h3 { font-size: 16px; }
.alert p { font-size: 13.5px; color: var(--muted); }
.tag-red { font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 99px; background: #d93a33; color: #fff; }
.qs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.qs div { padding: 14px; border-radius: 14px; background: #faf9fc; border: 1px solid #f0edf8; font-weight: 700; font-size: 15px; }
.qs span { display: block; font-family: var(--mono); font-size: 11px; color: #a32f29; margin-bottom: 4px; }
.qs small { display: block; margin-top: 4px; font-size: 13px; color: var(--muted); font-weight: 500; }
.friction-foot { margin-top: 14px; font-size: 15px; color: var(--muted); }
.friction-foot b { color: var(--ink); }
.anatomy { display: grid; grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1.1fr) 40px minmax(0, 1fr); gap: 10px; align-items: center; margin-top: 44px; }
.anat { padding: 22px; border-radius: 24px; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.15); }
.anat h3 { font-size: 18px; margin-bottom: 12px; }
.anat span { display: block; padding: 9px 12px; border-radius: 12px; background: rgba(255,255,255,0.07); margin-top: 6px; font-size: 14.5px; color: #e6e0ff; }
.anat-core { text-align: center; padding: 30px 22px; border-radius: 28px; background: linear-gradient(140deg, var(--purple), var(--deep)); box-shadow: 0 30px 60px -20px rgba(101,54,255,0.8); }
.anat-core img { width: 64px; height: 64px; border-radius: 18px; margin: 0 auto 12px; }
.anat-core h3 { font-size: 20px; }
.anat-core p { margin-top: 6px; color: #e6e0ff; font-family: var(--mono); font-size: 12.5px; }
.arrow-r { text-align: center; color: var(--cyan); font-size: 24px; font-weight: 700; }
.tool-rail { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 28px; }
.tool-rail span { padding: 8px 14px; border-radius: 99px; border: 1px solid rgba(255,255,255,0.22); font-weight: 600; font-size: 14px; color: #e6e0ff; }
.rule { margin-top: 22px; text-align: center; color: #c6c0ec; font-size: 15px; }
.walk-head { display: flex; align-items: end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.walk-head > p { color: var(--muted); max-width: 38ch; }
.steps-nav { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-top: 34px; }
.steps-nav button { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 12px 14px; min-height: 44px; border-radius: 16px; border: 1px solid #ece7ff; background: #fff; cursor: pointer; text-align: left; font-weight: 700; font-size: 15px; transition: background 200ms, border-color 200ms; }
.steps-nav button b { font-family: var(--mono); font-size: 11px; color: var(--purple); }
.steps-nav button[aria-pressed='true'] { background: var(--purple); border-color: var(--purple); color: #fff; }
.steps-nav button[aria-pressed='true'] b { color: #ddd6ff; }
.stage { margin-top: 16px; }
.step-pane { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 18px; animation: fade-up 450ms var(--ease); }
.step-story { padding: 28px; border-radius: 26px; background: #f7f5ff; border: 1px solid #ece7ff; display: flex; flex-direction: column; }
.step-story .when { font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--purple); }
.step-story h3 { margin-top: 10px; font-size: clamp(22px, 1vw + 16px, 30px); font-weight: 600; letter-spacing: -0.03em; line-height: 1.15; }
.step-story > p { margin-top: 12px; color: var(--muted); }
.you-box { margin-top: auto; padding: 14px 16px; border-radius: 16px; background: #fff; border: 1px solid #f0d9a8; }
.you-box span { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--amber); }
.you-box p { margin-top: 4px; font-weight: 600; font-size: 15px; }
.step-story .you-box { margin-top: 24px; }
.step-ctl { display: flex; align-items: center; gap: 12px; margin-top: 18px; font-size: 14px; color: var(--muted); }
.step-ctl button { width: 44px; height: 44px; border-radius: 50%; border: 1px solid #ddd5ff; background: #fff; cursor: pointer; font-size: 18px; color: var(--deep); }
.slackish { border-radius: 26px; overflow: hidden; background: #fff; border: 1px solid #e9e4fb; box-shadow: 0 30px 60px -44px rgba(73,39,184,0.5); display: flex; flex-direction: column; }
.sk-top { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: #3f0e40; color: #fff; font-weight: 700; font-size: 14px; }
.sk-top em { margin-left: auto; font-style: normal; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em; opacity: 0.75; }
.sk-chan { padding: 10px 16px; border-bottom: 1px solid #eee; font-weight: 700; font-size: 14.5px; }
.sk-body { padding: 16px; display: grid; gap: 14px; }
.sk-msg { display: grid; grid-template-columns: 36px 1fr; gap: 10px; font-size: 14.5px; line-height: 1.5; }
.sk-av { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 12px; background: #1f5fd1; }
.sk-av.twin { background: var(--deep) url('../icons/twin--purple.svg') center/125%; }
.sk-msg .who { font-weight: 700; font-size: 14px; }
.sk-msg .who em { font-style: normal; font-size: 10px; background: #eee; padding: 1px 5px; border-radius: 4px; margin-left: 4px; }
.sk-ev { margin-top: 8px; padding: 10px 12px; border-left: 3px solid var(--purple); background: #f7f5ff; border-radius: 0 10px 10px 0; font-size: 13.5px; }
.sk-act { display: inline-flex; gap: 6px; margin-top: 10px; }
.sk-act i { font-style: normal; font-size: 12.5px; font-weight: 700; padding: 6px 12px; border-radius: 8px; border: 1px solid #ddd; }
.sk-act i.go { background: #007a5a; color: #fff; border-color: #007a5a; }
.sk-work { margin: 0 16px 16px; padding: 14px; border-radius: 16px; background: #faf9ff; border: 1px solid #ece7ff; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.sk-work div span { display: block; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: #6f6c80; }
.sk-work div b { font-size: 14px; }
.illus { margin-top: 14px; font-size: 13px; color: #6f6c80; }
.modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 40px; }
.mode { padding: 24px; border-radius: 24px; background: #fff; border: 1px solid #ece7ff; }
.mode .mk { font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; }
.mode.m1 .mk { color: var(--green); } .mode.m2 .mk { color: var(--amber); } .mode.m3 .mk { color: var(--purple); }
.mode h3 { margin-top: 8px; font-size: 20px; }
.mode p { margin-top: 8px; color: var(--muted); font-size: 15px; }
.mode .ex { margin-top: 14px; padding: 12px 14px; border-radius: 14px; background: #faf9ff; font-size: 14px; font-weight: 600; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 20px; }
.split div { padding: 20px 22px; border-radius: 22px; }
.split .tw { background: #f3efff; } .split .yo { background: #fffaf0; border: 1px solid #f0d9a8; }
.split b { font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; }
.split .tw b { color: var(--purple); } .split .yo b { color: var(--amber); }
.split p { margin-top: 6px; font-weight: 600; }
.ucs { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; margin-top: 40px; }
.uc { padding: 26px; border-radius: 26px; background: #fff; border: 1px solid #ece7ff; display: flex; flex-direction: column; }
.uc .n { font-family: var(--mono); font-size: 12px; color: var(--purple); }
.uc h3 { margin-top: 8px; font-size: 22px; letter-spacing: -0.02em; }
.uc > p { margin-top: 10px; color: var(--ink-2); font-weight: 500; }
.uc dl { margin: 18px 0 0; padding-top: 16px; border-top: 1px solid #f0edf8; display: grid; gap: 10px; font-size: 14px; }
.uc dt { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: #6f6c80; }
.uc dd { margin: 2px 0 0; color: var(--muted); }
.outs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 40px; }
.outs article { padding: 22px; border-radius: 22px; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.15); }
.outs .ck { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: rgba(47,211,147,0.2); color: var(--green-glow); font-weight: 800; }
.outs h3 { margin-top: 12px; font-size: 19px; }
.outs p { margin-top: 6px; font-size: 14.5px; color: #d6cefc; }
.proofq { margin-top: 30px; display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; }
.proofq .sq { margin-top: 0; max-width: none; }
.tools-t { margin-top: 40px; border-radius: 24px; overflow: hidden; border: 1px solid #e9e4fb; background: #fff; }
.tools-t > div { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
.tools-t > div > span { padding: 16px 20px; border-top: 1px solid #f0edf8; color: var(--muted); font-size: 15px; }
.tools-t > div > span:first-child b { display: block; color: var(--ink); }
.tools-t > div > span:last-child { background: #f7f5ff; color: var(--ink-2); font-weight: 600; }
.tools-t .th > span { border-top: 0; font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: #6f6c80 !important; background: #fbfaff !important; }
.tools-t .th > span:last-child { background: var(--purple) !important; color: #fff !important; }
.start-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 40px; }
.start-steps article { padding: 22px; border-radius: 22px; background: #fff; border: 1px solid #ece7ff; }
.start-steps span { font-family: var(--mono); font-size: 13px; color: var(--purple); }
.start-steps h3 { margin-top: 10px; font-size: 18px; }
.start-steps p { margin-top: 6px; font-size: 14.5px; color: var(--muted); }
.first-job { margin-top: 20px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding: 20px 22px; border-radius: 22px; background: #f3efff; }
.first-job p { flex: 1; min-width: 260px; font-weight: 600; color: var(--deep); }
.first-job p::before { content: 'First job · '; font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--purple); }
.copy-btn { min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--purple); background: #fff; color: var(--deep); font-weight: 700; cursor: pointer; }
.related { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 24px; }
.fine-note { margin-top: 16px; font-size: 13px; color: #6f6c80; }
.uc-index { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 40px; }
.uci { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 18px; padding: 26px; border-radius: 28px; background: #fff; border: 1px solid #ece7ff; text-decoration: none; transition: transform 300ms var(--ease), border-color 300ms, box-shadow 300ms; }
.uci:hover { transform: translateY(-4px); border-color: #c9b8ff; box-shadow: 0 30px 50px -36px rgba(73,39,184,0.6); }
.uci img { width: 64px; height: 64px; border-radius: 18px; }
.uci h2 { font-size: 24px !important; letter-spacing: -0.025em; }
.uci p { margin-top: 6px; color: var(--muted); }
.uci ul { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.uci li { font-size: 12.5px; font-weight: 600; padding: 5px 10px; border-radius: 99px; background: #f3efff; color: var(--deep); }
.journey { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 40px; counter-reset: j; }
.journey article { padding: 22px; border-radius: 22px; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.15); }
.journey span { font-family: var(--mono); font-size: 12px; color: var(--cyan); }
.journey h3 { margin-top: 8px; font-size: 18px; }
.journey p { margin-top: 6px; font-size: 14.5px; color: #d6cefc; }

@media (max-width: 1080px) {
  .ccards, .caps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mtiles, .adv-grid, .ph-stats, .outs, .start-steps, .journey { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .map-wrap, .two, .diff-grid, .uc-hero, .persona, .before-grid, .step-pane, .uc-index { grid-template-columns: 1fr; }
  .anatomy { grid-template-columns: 1fr; }
  .arrow-r { transform: rotate(90deg); }
  .modes, .related { grid-template-columns: 1fr; }
  .steps-nav { grid-template-columns: repeat(5, minmax(120px, 1fr)); overflow-x: auto; padding-bottom: 4px; }
}
@media (max-width: 720px) {
  .ccards, .caps, .mtiles, .adv-grid, .outs, .start-steps, .journey, .verdict, .split, .qs { grid-template-columns: 1fr; }
  .ph-stats { grid-template-columns: 1fr 1fr; }
  .vs-row { grid-template-columns: 1fr 1fr; }
  .vs-row > span[role='rowheader'] { grid-column: 1 / -1; background: #fbfaff; padding-block: 12px; }
  .vs-head > span:first-child { display: none; }
  .vs-row > span { padding: 14px; font-size: 14px; }
  .tools-t > div { grid-template-columns: 1fr; }
  .sk-work { grid-template-columns: 1fr; }
  .fam-head { flex-direction: column; align-items: flex-start; }
  .uci { grid-template-columns: 1fr; }
}

/* =================== v6: dark theme for sub-pages =================== */
body { background: var(--bg); color: var(--tx); }
.sec, .sec.alt { background: var(--bg); border-top: 1px solid var(--line); }
.page-hero.dark { background: radial-gradient(70% 60% at 50% -10%, rgba(101,54,255,0.35), transparent 70%), var(--bg); }
.dark { background-color: var(--bg); }
.map-card, .ccard, .caps article, .corner article, .faq details, .v-ax, .vs-table, .diff-grid article, .diff-main, .diff-side .works, .sources,
.wf, .wf-req, .wf-dec, .needs, .friction, .alert, .qs div, .steps-nav button, .step-story, .you-box, .slackish, .sk-ev, .sk-work, .mode, .mode .ex,
.split .tw, .uc, .tools-t, .start-steps article, .first-job, .uci, .uci li, .persona, .related a, .outs article {
  background: var(--card) !important; border-color: var(--line) !important; color: var(--tx); box-shadow: none !important;
}
.search input { background: var(--card); border-color: var(--line-2); color: var(--tx); }
.search input::placeholder { color: var(--tx-3); }
.fchips button { background: transparent; border-color: var(--line-2); color: var(--tx-2); }
.fchips button[aria-pressed='true'] { background: var(--tx); color: #08090a; border-color: var(--tx); }
.ax-badge { background: rgba(128,84,255,0.18); color: #d6cbff; }
.vs-row > span, .vs-head > span { border-color: var(--line) !important; color: var(--tx-2); }
.vs-head > span { background: var(--card-2) !important; color: var(--tx-3); }
.vs-row > span[role='rowheader'] { color: var(--tx); background: transparent !important; }
.vs-row > .ax, .vs-head > .ax { background: rgba(101,54,255,0.12) !important; color: var(--tx); }
.tools-t > div { border-color: var(--line) !important; }
.tools-t > div > span:first-child b, .tools-t .th > span { color: var(--tx); }
.tools-t .th > span { background: var(--card-2) !important; }
.tools-t > div > span:last-child { background: rgba(101,54,255,0.08) !important; color: var(--tx-2); }
.tools-t > div > span:first-child { color: var(--tx-3); }
.ccard h3, .ccard b, .caps b, .corner b, .faq summary, .uc h3, .mode b, .start-steps b, .persona h3, .diff-grid h3, .wf b, .step-story h3 { color: var(--tx); }
.ccard p, .caps p, .corner p, .faq p, .uc p, .uc > p, .mode p, .start-steps p, .persona p, .diff-grid p, .step-story p, .wf p, .friction p, .needs, .extra { color: var(--tx-3); }
.steps-nav button { color: var(--tx-2); }
.steps-nav button[aria-pressed='true'] { background: rgba(128,84,255,0.16) !important; border-color: rgba(185,166,255,0.5) !important; color: var(--tx); }
.steps-nav button b, .steps-nav button[aria-pressed='true'] b, .step-story .when, .uc .n, .first-job p::before, .persona .emph, .needs b, .split .tw b, .friction-foot b, .tools-t > div > span:first-child b { color: #b9a6ff; }
.step-ctl button, .copy-btn { background: transparent; border-color: var(--line-2); color: var(--tx); }
.ppills span { background: rgba(255,255,255,0.05); border-color: var(--line); color: var(--tx-2); }
.sources a, .sources summary { color: #b9a6ff; }
.faq summary::after { color: #b9a6ff; }
.first-job p { color: var(--tx); }
.start-steps span { color: #b9a6ff; }
.wf-twin li { color: var(--tx-2); }
.fine-note, .uc-note { color: var(--tx-3); }
.tool-rail span { display: inline-flex; align-items: center; background: rgba(255,255,255,0.05); border-color: var(--line); color: var(--tx-2); }
.clogo { color: #fff; }