@import url("/assets/tokens.css?v=e468e95c1a"); /* design tokens, the one source; must stay the first statement (design system Phase 0b, 12 October 2026) */
/* psychology.com, test suite styles. Clean-editorial system, aligned to site style.css. */
/* Tokens moved to /assets/tokens.css on 12 October 2026 (design system Phase 0b). The old block of 26 custom properties stood here. */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:18px;line-height:1.7;text-rendering:optimizeLegibility}
img{max-width:100%;display:block}
a{color:var(--brand);text-decoration:none}
a:hover{color:var(--brand-hover);text-decoration:underline;text-underline-offset:2px}
:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:3px}
.hero :focus-visible,.result-hero :focus-visible,.site-header :focus-visible,.site-footer :focus-visible,.panel-top :focus-visible{outline-color:var(--honey)}
h1,h2,h3,h4{font-family:var(--serif);font-weight:400;letter-spacing:-0.02em;line-height:1.12;text-wrap:balance;margin:0}
.wide{max-width:var(--wide);margin:0 auto;padding:0 24px}
.read{max-width:var(--read)}
p{text-wrap:pretty}
.skip-link{position:absolute;left:12px;top:-60px;z-index:200;background:var(--honey);color:oklch(0.25 0.04 70);padding:11px 18px;border-radius:0 0 10px 10px;font-family:var(--sans);font-weight:700;text-decoration:none;transition:top .2s var(--ease)}
.skip-link:focus{top:0}
.poc-flag{background:var(--dark);color:var(--on-dark-soft);text-align:center;font-family:var(--sans);font-weight:500;font-size:0.8rem;letter-spacing:0.01em;padding:8px 16px}
/* header */
.site-header{position:sticky;top:0;z-index:50;background:oklch(0.20 0.017 50 / 0.9);backdrop-filter:saturate(150%) blur(12px);border-bottom:1px solid oklch(0.35 0.012 55 / 0.5)}
.site-header .navbar{max-width:var(--wide);margin:0 auto;padding:15px 24px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{font-family:var(--sans);font-weight:800;font-size:1.28rem;letter-spacing:-0.02em;color:var(--on-dark)}
.brand:hover{text-decoration:none}
.brand i{font-style:normal;font-weight:700;color:var(--honey);font-size:0.96em}
.nav{display:flex;align-items:center;gap:28px}
.nav a{color:var(--on-dark-soft);font-weight:500;font-size:0.9rem}
.nav a:hover{color:var(--on-dark);text-decoration:none}
.nav a.btn-primary{background:var(--honey);color:oklch(0.25 0.04 70);padding:9px 18px;border-radius:999px;font-weight:700}
.nav a.btn-primary:hover{background:var(--honey-deep)}
@media(max-width:760px){.nav{gap:18px}}
/* hero, solid, editorial, restrained */
.hero{background:linear-gradient(150deg, oklch(0.30 0.034 52) 0%, var(--dark) 68%);color:var(--on-dark);padding:66px 0 60px;position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;inset:0;background:radial-gradient(70% 120% at 88% 0%, oklch(0.62 0.12 78 / 0.13), transparent 60%);pointer-events:none}
.hero .wide{position:relative;z-index:1}
.crumbs{font-size:0.82rem;color:var(--on-dark-soft);margin-bottom:26px}
.crumbs a{color:var(--on-dark-soft)}
.crumbs a:hover{color:var(--on-dark)}
.hero .eyebrow{display:none}
.hero h1{font-size:clamp(2.3rem,4.6vw,3.4rem);font-weight:300;color:#fff;max-width:20ch;letter-spacing:-0.015em;text-wrap:balance}
.hero .sub{font-family:var(--serif);font-weight:300;font-size:clamp(1.1rem,1.6vw,1.3rem);line-height:1.5;color:var(--on-dark);max-width:46ch;margin:16px 0 0}
.meta-row{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;margin-top:30px;font-size:0.9rem;color:var(--on-dark-soft)}
.meta-row .rev{display:flex;align-items:center;gap:10px}
.rev-dot{width:34px;height:34px;border-radius:50%;background:transparent;border:1px solid oklch(0.55 0.02 60 / 0.6);color:var(--honey);display:grid;place-items:center;font-weight:700;font-size:0.82rem;font-family:var(--sans)}
.hero-cta{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-top:34px}
.hero-link{color:var(--honey);font-weight:600;font-size:0.96rem}
.hero-link:hover{color:var(--on-dark);text-decoration:none}
.trust{display:flex;flex-wrap:wrap;gap:8px 24px;margin-top:30px;padding-top:24px;border-top:1px solid oklch(0.4 0.012 55 / 0.4)}
/* The chip (hero fact chip and pill) is one block in /assets/chrome.css since October 15, 2026 (Phase 1 Chip step). */
/* sections */
main{padding:0 0 84px}
section{padding:54px 0}
.lead{font-size:var(--lede-size,1.25rem);color:var(--ink);line-height:var(--lede-lh,1.55)}
.muted{color:var(--ink-soft)}
.kicker{display:none}
/* "what it measures", editorial numbered list, no card chrome */
.measures{margin-top:30px;display:grid;gap:12px}
.measure{display:grid;grid-template-columns:auto 1fr;gap:24px;align-items:baseline;padding:22px 24px;background:var(--surface);border:1px solid var(--line);border-radius:14px}
.measure .mi{font-family:var(--serif);font-size:2.4rem;font-weight:300;color:var(--brand);line-height:1;min-width:1.6ch;letter-spacing:-0.03em}
.measure h3{font-size:1.3rem;margin-bottom:7px;font-weight:500}
.measure p{margin:0;color:var(--ink);font-size:var(--body-size,1.125rem);line-height:var(--body-lh,1.6);max-width:64ch}
@media(max-width:560px){.measure{grid-template-columns:1fr;gap:6px}.measure .mi{font-size:1.6rem}}
/* Table context rules of the article family (types, ai-therapy, practice-guides), layout only: the box, the
   cells and the colours are chrome.css's Table block (design system Phase 1, PSY-2292, October 15, 2026). This
   family keeps its 34 px top and bottom margin (the engine sheets' tables have 38 px on top only; the rule carries .read
   so it outranks the chrome.css block, which loads after this sheet) and never
   splits words inside cells: chrome.css sets overflow-wrap:anywhere on main td/th for long URLs, which broke
   "Psycholo gy Today" in narrow first columns (Seph, September 27, 2026); the wrapper scrolls horizontally
   instead, and the first column keeps a 9.5rem minimum. Listed in docs/design-system.md, "Table", for the
   type-scale step to decide. */
.read .table-wrap{margin:34px 0}
.table-wrap th,.table-wrap td{overflow-wrap:normal;word-break:normal;hyphens:manual}
.table-wrap th:first-child,.table-wrap td:first-child{min-width:9.5rem}
/* test panel */
.panel{border:1px solid var(--line);border-radius:18px;overflow:hidden;background:var(--bg)}
.progress{height:3px;background:var(--line);position:relative}
.progress span{position:absolute;left:0;top:0;bottom:0;background:var(--brand);width:0;transition:width .45s var(--ease)}
.panel-top{background:var(--surface);padding:22px 30px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;border-bottom:1px solid var(--line)}
.panel-top h2{font-size:1.4rem}
.panel-top .step-label{font-family:var(--sans);font-size:0.78rem;color:var(--ink-soft);font-weight:700;letter-spacing:0.06em;text-transform:uppercase}
.panel-body{padding:38px 40px 40px}
@media(max-width:600px){.panel-body{padding:28px 20px 32px}.panel-top{padding:18px 20px}}
.stage{display:none}
.stage.active{display:block;animation:fade .45s var(--ease)}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.stage.active{animation:none}.progress span,.bar i{transition:none}html{scroll-behavior:auto}}
.intro-stage h3{font-size:1.7rem;margin-bottom:14px;font-weight:400}
.section-tag{display:inline-block;font-family:var(--sans);font-weight:700;font-size:0.74rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:20px}
.q .qnum{font-family:var(--sans);font-weight:700;color:var(--brand);font-size:0.8rem;letter-spacing:0.04em;text-transform:uppercase}
.q .qtext{font-family:var(--serif);font-size:1.4rem;line-height:1.32;margin:10px 0 4px;display:block;font-weight:400}
.q .qhelp{color:var(--ink-soft);font-size:0.98rem;margin:6px 0 22px}
.opts{display:grid;gap:11px;max-width:560px}
.opt{display:flex;align-items:center;gap:14px;border:1px solid var(--line-2);border-radius:12px;padding:15px 18px;cursor:pointer;font-weight:500;font-size:1.02rem;transition:border-color .15s,background .15s;background:var(--bg);text-align:left;width:100%;font-family:var(--sans);color:var(--ink)}
.opt:hover{border-color:var(--ink-soft);background:var(--surface)}
.opt.sel{border-color:var(--brand);background:oklch(0.97 0.02 70);box-shadow:inset 0 0 0 1px var(--brand)}
.opt .box{width:20px;height:20px;border-radius:5px;border:1.5px solid var(--line-2);display:grid;place-items:center;flex:none;transition:border-color .15s,background .15s}
.opt.sel .box{border-color:var(--brand);background:var(--brand)}
.opt .box svg{width:12px;height:12px;color:#fff;opacity:0}
.opt.sel .box svg{opacity:1}
.opt .lbl{flex:1}
.scale-opts{grid-template-columns:repeat(5,1fr);display:grid;gap:8px;max-width:660px}
.scale-opts .opt{flex-direction:column;text-align:center;gap:9px;padding:14px 8px;font-size:0.8rem;font-weight:600}
.scale-opts .opt .box{margin:0 auto}
@media(max-width:560px){.scale-opts{grid-template-columns:1fr}.scale-opts .opt{flex-direction:row;text-align:left;font-size:1rem;font-weight:500}.scale-opts .opt .box{margin:0}}
.qblock{padding:20px 0}
.qblock:first-child{padding-top:6px}
.qblock:last-child{border-bottom:0}
.privacy-note{display:flex;gap:13px;align-items:flex-start;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:16px 18px;margin:22px 0;font-size:0.94rem;color:var(--ink-soft)}
.privacy-note svg{width:21px;height:21px;color:var(--brand);flex:none;margin-top:1px}
.nav-btns{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-top:34px}
.btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--sans);font-weight:700;font-size:1rem;padding:14px 28px;border-radius:999px;border:1px solid transparent;cursor:pointer;transition:transform .2s var(--ease),background .2s,border-color .2s;text-decoration:none}
.btn:hover{text-decoration:none}
.btn-primary{background:var(--honey);color:oklch(0.25 0.04 70)}
.btn-primary:hover{background:var(--honey-deep)}
.btn-primary[disabled]{opacity:.4;cursor:not-allowed}
.btn-line{border-color:var(--line-2);color:var(--ink);background:var(--bg)}
.btn-line:hover{border-color:var(--ink-soft)}
.btn-ghost{background:none;color:var(--ink-soft);border:0;font-weight:600;cursor:pointer;font-family:var(--sans);font-size:0.95rem}
.btn-ghost:hover{color:var(--ink)}
.btn-dark{background:var(--brand);color:#fff}
.btn-dark:hover{background:var(--brand-hover)}
/* results */
#results{display:none}
.result-hero{background:var(--dark);color:var(--on-dark);border-radius:18px 18px 0 0;padding:42px 40px 36px}
.result-hero .lbl{font-family:var(--sans);font-weight:700;font-size:0.74rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--on-dark-soft)}
.score-big{display:flex;align-items:baseline;gap:14px;margin:16px 0 8px}
.score-big .num{font-family:var(--serif);font-size:4.6rem;line-height:1;color:var(--on-dark);font-weight:300}
.score-big .den{font-size:1.3rem;color:var(--on-dark-soft)}
.band-tag{display:inline-block;font-family:var(--sans);font-weight:700;font-size:0.9rem;padding:6px 14px;border-radius:999px;margin-top:4px;border:1px solid currentColor}
.result-body{border:1px solid var(--line);border-top:0;border-radius:0 0 18px 18px;padding:38px 40px 42px}
@media(max-width:600px){.result-hero,.result-body{padding-left:20px;padding-right:20px}.score-big .num{font-size:3.4rem}}
.metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:8px 0}
@media(max-width:680px){.metrics{grid-template-columns:1fr}}
.metric{padding:2px 0}
.metric .mlabel{font-size:0.78rem;font-weight:700;letter-spacing:0.03em;text-transform:uppercase;color:var(--ink-soft)}
.metric .mval{font-family:var(--serif);font-size:1.9rem;margin:6px 0 0;font-weight:400}
.metric .mnote{font-size:0.84rem;color:var(--ink-soft);margin-top:6px}
.bar{height:5px;border-radius:999px;background:var(--line);overflow:hidden;margin-top:11px}
.bar i{display:block;height:100%;border-radius:999px;transition:width .6s var(--ease)}
.breakdown{margin:30px 0}
.brow{display:grid;grid-template-columns:190px 1fr 48px;gap:16px;align-items:center;padding:9px 0;font-size:0.96rem}
.brow:last-child{border-bottom:0}
@media(max-width:560px){.brow{grid-template-columns:1fr auto;gap:6px 12px}.brow .bar{grid-column:1 / -1;order:3}}
.brow .blabel{font-weight:600}
.brow .bnum{text-align:right;font-weight:600;font-family:var(--serif);color:var(--ink-soft)}
.interp{border:1px solid var(--line);border-radius:14px;padding:24px 26px;margin:30px 0;background:var(--surface)}
.interp h3{font-size:0.78rem;font-family:var(--sans);font-weight:700;letter-spacing:0.07em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:12px}
.interp p{font-size:var(--body-size,1.125rem);line-height:var(--body-lh,1.6);color:var(--ink);font-family:var(--serif)}
.health-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px 40px;margin-top:20px}
@media(max-width:600px){.health-grid{grid-template-columns:1fr}}
.health-item{font-size:0.95rem;color:var(--ink-soft)}
.health-item b{display:block;font-family:var(--serif);font-weight:500;font-size:1.08rem;margin-bottom:4px;color:var(--ink)}
.resilience-box{border:1px solid var(--line);border-radius:14px;padding:24px 26px;margin:30px 0;background:var(--surface)}
.resilience-box h3{font-size:1.2rem;font-weight:500;color:var(--ink)}
.resilience-box p{margin:8px 0 0}
.steps{counter-reset:s;margin:24px 0;padding:0;list-style:none}
.steps li{counter-increment:s;position:relative;padding:12px 0 12px 48px;line-height:1.55}
.steps li:last-child{border-bottom:0}
.steps li:before{content:counter(s);position:absolute;left:0;top:15px;font-family:var(--serif);font-weight:400;color:var(--brand);font-size:1.4rem;line-height:1}
/* profile dimensions / type result */
.type-result{text-align:center;padding:6px 0}
.type-result .lbl{font-family:var(--sans);font-weight:700;font-size:0.74rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--on-dark-soft)}
.type-result .type-name{font-family:var(--serif);font-size:clamp(2rem,5vw,3rem);color:var(--on-dark);margin:12px 0 0;font-weight:300}
.dims{margin:26px 0}
.dim{display:grid;grid-template-columns:210px 1fr 52px;gap:16px;align-items:center;padding:9px 0;font-size:0.98rem}
.dim:last-child{border-bottom:0}
@media(max-width:560px){.dim{grid-template-columns:1fr auto;gap:6px 12px}.dim .bar{grid-column:1 / -1;order:3}}
.dim .dname{font-weight:600}
.dim.top .dname{color:var(--brand)}
.dim .dnum{text-align:right;font-weight:600;font-family:var(--serif);color:var(--ink-soft)}
.dim .bar{margin:0}
.dl-row{display:flex;gap:13px;flex-wrap:wrap;margin:30px 0}
/* The FAQ rows (details.faq-item) are styled by chrome.css only since design system Phase 1 (PSY-2292, October 15, 2026); the bare `details` rules that lived here moved there, declaration for declaration. */
.refs{font-size:0.9rem;color:var(--ink-soft);padding-left:1.1em}
.refs li{margin:0 0 10px;overflow-wrap:anywhere}
.refs a{word-break:break-all}
/* The author box (.byline-full) is styled by chrome.css only since design system Phase 1 (PSY-2292, October 15, 2026); the rules that lived here moved there, declaration for declaration. */
.cite-block{margin:40px 0 0;border:1px solid var(--line-2);border-radius:14px;padding:22px 26px;background:var(--tint);scroll-margin-top:84px;transition:border-color .3s,box-shadow .3s}
.cite-block:target{border-color:var(--honey-deep);box-shadow:0 0 0 3px oklch(0.82 0.13 82 / 0.22)}
.cite-block h3{margin:0 0 10px;font-size:1.05rem}
.cite-text{margin:0 0 16px;font-family:var(--sans);font-size:.92rem;line-height:1.65;color:var(--ink-soft);overflow-wrap:break-word}
.cite-copy{display:inline-flex;align-items:center;gap:7px;font-family:var(--sans);font-weight:600;font-size:.88rem;padding:9px 18px;border-radius:999px;border:1px solid var(--line-2);background:transparent;color:var(--brand);cursor:pointer;transition:background .2s,border-color .2s}
.cite-copy:hover{background:oklch(1 0 0 / 0.5);border-color:var(--brand)}
.cite-copy.copied{background:#3fbf6f;border-color:#3fbf6f;color:#fff}
/* Byline "Cite" jump-link: fast path from the hero byline to the Cite this source box (AI pages) */
.hero .hm-line .cite-sep{white-space:nowrap}
.hero .hm-line .cite-jump{display:inline-flex;align-items:center;gap:4px;white-space:nowrap;color:var(--honey);font-weight:600;text-decoration:none;border-bottom:1px solid transparent;transition:border-color .15s}
.hero .hm-line .cite-jump:hover{border-bottom-color:var(--honey)}
.hero .hm-line .cite-jump:focus-visible{outline:2px solid var(--honey);outline-offset:3px;border-radius:2px}
.hero .hm-line .cite-jump .cite-ico{width:13px;height:13px;flex:none}
/* footer */
.site-footer{background:var(--dark);color:var(--on-dark-soft);padding:56px 0 30px;margin-top:48px}
.site-footer .top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:30px}
@media(max-width:820px){.site-footer .top{grid-template-columns:1fr 1fr}}
.site-footer .brand{color:var(--on-dark)}
.site-footer p{font-size:0.92rem;max-width:34ch;margin:12px 0 0}
.site-footer .col-label{font-family:var(--sans);font-weight:700;font-size:0.76rem;letter-spacing:0.06em;text-transform:uppercase;color:var(--on-dark);margin:0 0 12px}
.site-footer .col a{display:block;color:var(--on-dark-soft);font-size:0.92rem;margin:0 0 9px}
.site-footer .col a:hover{color:var(--on-dark)}
.site-footer .legal{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;border-top:1px solid var(--line-dark);margin-top:38px;padding-top:22px;font-size:0.84rem}
.crisis-line b{color:var(--honey)}
/* hub, editorial list grouped by category */
.hub-hero{background:var(--dark);color:var(--on-dark);padding:72px 0 60px}
.hub-hero h1{font-size:clamp(2.4rem,5.4vw,3.8rem);color:var(--on-dark);max-width:20ch;font-weight:300;letter-spacing:-0.025em}
.hub-hero p{color:var(--on-dark-soft);font-size:1.16rem;max-width:62ch;margin:22px 0 0;line-height:1.6}
.hub-hero .eyebrow{display:inline-block;font-family:var(--sans);font-weight:600;font-size:0.84rem;color:var(--honey);margin-bottom:18px}
.hub-cat{font-family:var(--serif);font-size:1.5rem;margin:48px 0 6px;font-weight:400}
.test-list{display:grid;grid-template-columns:1fr 1fr;gap:14px 16px}
@media(max-width:760px){.test-list{grid-template-columns:1fr}}
.test-row{display:block;padding:18px 20px;background:var(--surface);border:1px solid var(--line);border-radius:14px;transition:border-color .15s var(--ease),background .15s var(--ease),transform .15s var(--ease)}
.test-row h3{font-size:1.24rem;margin:0 0 5px;font-weight:500;color:var(--ink);display:flex;align-items:center;gap:10px}
.test-row .arr{color:var(--brand);opacity:0;transform:translateX(-4px);transition:opacity .15s var(--ease),transform .15s var(--ease);font-size:1rem}
.test-row:hover{text-decoration:none;background:var(--bg);border-color:var(--line-2);transform:translateY(-1px);box-shadow:0 10px 24px oklch(0.2 0.01 65 / 0.06)}
.test-row:hover h3{color:var(--brand)}
.test-row:hover .arr{opacity:1;transform:translateX(0)}
.test-row p{margin:0;font-size:0.95rem;color:var(--ink-soft);max-width:52ch}
.test-row .tmeta{margin-top:10px;font-size:0.8rem;color:var(--ink-soft);display:flex;gap:8px 14px;flex-wrap:wrap}
.test-row .tmeta .sep{color:var(--line-2)}
/* ===== hub: designed landing ===== */
.ic{width:22px;height:22px;flex:none}
.hub-hero-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:40px;align-items:center}
@media(max-width:860px){.hub-hero-grid{grid-template-columns:1fr}.hub-hero-art{display:none}}
.hub-hero-text .eyebrow{display:inline-block;font-family:var(--sans);font-weight:600;font-size:0.84rem;color:var(--honey);margin-bottom:18px}
.hub-stats{display:flex;flex-wrap:wrap;gap:14px 26px;margin-top:30px;padding-top:24px;border-top:1px solid oklch(0.4 0.012 55 / 0.4)}
.hub-stats .stat{display:inline-flex;align-items:center;gap:9px;color:var(--on-dark-soft);font-size:0.92rem;font-weight:500}
.hub-stats .stat b{color:var(--on-dark);font-weight:700}
.si{width:18px;height:18px;color:var(--honey);flex:none}
.hub-hero-art{display:flex;justify-content:center}
/* Photo-style hub illustration (concepts), matching .hero-art on the rebuilt Resources hubs. */
.hub-hero-art img{width:100%;height:auto;max-width:440px;border-radius:16px;display:block;aspect-ratio:4/3;object-fit:cover;box-shadow:0 18px 44px oklch(0.15 0.02 60 / 0.35)}
@media(max-width:860px){.hub-hero-art:has(img){display:block;order:-1;margin:0 0 26px}.hub-hero-art:has(img) img{max-width:100%;aspect-ratio:16/9;border-radius:14px}}
/* popular / featured */
.feat-section{padding-top:46px}
.featured{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:820px){.featured{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.featured{grid-template-columns:1fr}}
.feat{display:block;border:1px solid var(--line);border-radius:16px;padding:22px 22px 24px;background:var(--bg);position:relative;overflow:hidden;transition:border-color .18s var(--ease),transform .18s var(--ease),box-shadow .18s var(--ease)}
.feat:before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--accent)}
.feat:hover{text-decoration:none;transform:translateY(-3px);border-color:var(--accent);box-shadow:0 16px 36px oklch(0.2 0.01 65 / 0.10)}
.feat-ic{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--tintc);color:var(--accent);margin-bottom:14px}
.feat-ic .ic{width:23px;height:23px}
.feat-cat{display:block;font-family:var(--sans);font-weight:700;font-size:0.72rem;letter-spacing:0.06em;text-transform:uppercase;color:var(--accent);margin-bottom:6px}
.feat h3{font-size:1.26rem;font-weight:500;color:var(--ink);margin-bottom:6px}
.feat p{margin:0;font-size:0.93rem;color:var(--ink-soft)}
/* how it works */
.how{padding:48px 0;background:var(--surface)}
.how-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:34px}
@media(max-width:760px){.how-grid{grid-template-columns:1fr;gap:24px}}
.how-step{position:relative;padding-top:8px}
.how-n{font-family:var(--serif);font-size:2.4rem;font-weight:300;color:var(--honey-deep);line-height:1;display:block;margin-bottom:10px}
.how-step h3{font-size:1.2rem;font-weight:500;margin-bottom:6px}
.how-step p{margin:0;color:var(--ink-soft);font-size:0.96rem;max-width:42ch}
/* all-tests by category */
.all-head{margin-bottom:8px}
.cat-block{margin-top:14px}
.hub-cat{display:flex;align-items:center;gap:12px;font-family:var(--serif);font-size:1.4rem;margin:44px 0 8px;font-weight:400}
.cat-ic{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:9px;background:color-mix(in oklch, var(--accent) 12%, transparent);color:var(--accent);flex:none}
.cat-ic .ic{width:19px;height:19px}
.hub-cat .cat-n{font-family:var(--sans);font-size:0.8rem;font-weight:700;color:var(--ink-soft);background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:2px 10px;margin-left:auto}
/* closing */
.closing{padding:20px 0 0}
.closing-band{background:var(--dark);color:var(--on-dark);border-radius:18px;padding:38px 40px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.closing-band h2{color:var(--on-dark);font-size:1.7rem;font-weight:400;max-width:18ch}
.closing-band p{color:var(--on-dark-soft);margin:10px 0 0;max-width:46ch;font-size:0.98rem}
@media(prefers-reduced-motion:reduce){.feat:hover{transform:none}}
/* ===== full site nav: dropdown + mobile burger (ported from style.css) ===== */
.nav-burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:42px;height:42px;padding:9px;border-radius:10px;cursor:pointer;flex:none}
.nav-burger span{display:block;height:2px;width:100%;background:var(--on-dark);border-radius:2px;transition:transform .25s var(--ease),opacity .2s var(--ease)}
.nav-burger:hover{background:color-mix(in oklch, currentColor 10%, transparent)}
.nav-toggle:checked + .nav-burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle:checked + .nav-burger span:nth-child(2){opacity:0}
.nav-toggle:checked + .nav-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.nav-toggle:focus-visible + .nav-burger{outline:2px solid var(--honey);outline-offset:3px}
.nav .has-dd{position:relative;display:flex;align-items:center}
.nav .dd-trigger{display:inline-flex;align-items:center;gap:5px;cursor:pointer;background:none;border:0;font:inherit;font-weight:500;font-size:0.9rem;color:var(--on-dark-soft);padding:0}
.nav .has-dd:hover .dd-trigger,.nav .has-dd:focus-within .dd-trigger{color:var(--on-dark)}
.nav .dd-trigger .chev{width:11px;height:7px;opacity:0.7;transition:transform .2s var(--ease)}
.nav .has-dd:hover .dd-trigger .chev,.nav .has-dd:focus-within .dd-trigger .chev{transform:rotate(180deg)}
.nav .has-dd::after{content:"";position:absolute;top:100%;left:0;right:-10px;height:14px}
.nav .dropdown{position:absolute;top:calc(100% + 12px);left:-8px;min-width:244px;background:var(--bg);border:1px solid var(--line);border-radius:13px;box-shadow:0 18px 44px oklch(0.2 0.01 65 / 0.20);padding:7px;display:none;flex-direction:column;gap:2px;z-index:60}
.nav .has-dd:hover .dropdown,.nav .has-dd:focus-within .dropdown{display:flex}
.nav .dropdown a{display:block;padding:11px 14px;border-radius:8px;font-size:0.92rem;color:var(--ink-soft);white-space:nowrap}
.nav .dropdown a:hover{background:var(--tint);color:var(--ink)}
@media(max-width:760px){
  .nav-burger{display:flex;order:3}
  .nav{position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:2px;padding:10px;background:var(--dark);border-bottom:1px solid var(--line-dark);box-shadow:0 16px 40px oklch(0.2 0.01 65 / 0.18);display:none;opacity:0;transform:translateY(-6px);transition:opacity .2s var(--ease),transform .2s var(--ease)}
  .nav-toggle:checked ~ .nav{display:flex;opacity:1;transform:none}
  .nav a{padding:13px 12px;font-size:1rem;border-radius:10px;color:var(--on-dark)}
  .nav a:hover{background:color-mix(in oklch, currentColor 8%, transparent);text-decoration:none}
  .nav a.btn{margin-top:8px;justify-content:center}
  .site-header .navbar{position:relative;flex-wrap:wrap}
  .nav .has-dd{flex-direction:column;align-items:stretch}
  .nav .dd-trigger{width:100%;justify-content:space-between;padding:13px 12px;font-size:1rem;color:var(--on-dark);border-radius:10px}
  .nav .has-dd::after{display:none}
  .nav .dropdown,.nav .has-dd:hover .dropdown,.nav .has-dd:focus-within .dropdown{position:static;display:flex;min-width:0;padding:0 0 6px 10px;background:transparent;border:0;box-shadow:none}
  .nav .dropdown a{color:var(--on-dark-soft);padding:11px 12px}
}
/* ===== tools: worksheet / printable / tracker ===== */
.tool-body{max-width:760px;margin:0 auto}
.tool-intro{font-size:1.12rem;color:var(--ink);line-height:1.65}
.howto{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:22px 24px;margin:26px 0}
.howto h3{font-size:0.8rem;font-family:var(--sans);font-weight:700;letter-spacing:0.06em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:10px}
.howto p{margin:0;color:var(--ink)}
.tool-actions{display:flex;gap:13px;flex-wrap:wrap;margin:28px 0}
/* interactive worksheet fields */
.ws-section{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:24px 26px;margin:18px 0}
.ws-section > h3{font-family:var(--serif);font-weight:500;font-size:1.3rem;margin-bottom:6px}
.ws-section .ws-intro{color:var(--ink-soft);font-size:0.96rem;margin:0 0 16px}
.field{margin:16px 0}
.field label{display:block;font-weight:600;font-size:0.98rem;margin-bottom:7px;color:var(--ink)}
.field input[type=text],.field textarea{width:100%;border:1px solid var(--line-2);border-radius:10px;padding:12px 14px;font:inherit;font-size:1rem;background:var(--bg);color:var(--ink);resize:vertical}
.field textarea{min-height:84px}
.field input:focus,.field textarea:focus{outline:2px solid var(--brand);outline-offset:1px;border-color:var(--brand)}
.field .opts-row{display:flex;flex-wrap:wrap;gap:8px}
.chip-opt{border:1px solid var(--line-2);border-radius:999px;padding:8px 15px;cursor:pointer;font-size:0.92rem;font-weight:500;background:var(--bg);user-select:none}
.chip-opt.on{background:oklch(0.97 0.02 70);border-color:var(--brand);color:var(--brand)}
.scale-row{display:flex;gap:8px;flex-wrap:wrap}
.scale-row .sc{width:40px;height:40px;border:1px solid var(--line-2);border-radius:10px;display:grid;place-items:center;cursor:pointer;font-weight:700}
.scale-row .sc.on{background:var(--brand);color:#fff;border-color:var(--brand)}
/* tracker table */
.tracker-wrap{overflow-x:auto;margin:18px 0;border:1px solid var(--line);border-radius:14px}
table.tracker{width:100%;border-collapse:collapse;font-size:0.92rem;min-width:520px}
table.tracker th{background:var(--surface);text-align:left;padding:11px 13px;font-family:var(--sans);font-weight:700;font-size:0.78rem;letter-spacing:0.02em;color:var(--ink-soft);border-bottom:1px solid var(--line)}
table.tracker td{padding:6px 8px;border-bottom:1px solid var(--line);border-left:1px solid var(--line)}
table.tracker td:first-child{border-left:0}
table.tracker input{width:100%;border:0;background:transparent;font:inherit;font-size:0.92rem;padding:6px;color:var(--ink)}
table.tracker input:focus{outline:2px solid var(--brand);border-radius:6px}
/* The related grid is chrome.css's Related cards block since October 15, 2026 (Phase 1 RelatedCards step). */
.fmt-badge{display:inline-block;font-family:var(--sans);font-weight:700;font-size:0.72rem;letter-spacing:0.04em;text-transform:uppercase;color:var(--brand);background:oklch(0.97 0.02 70);padding:4px 11px;border-radius:999px;margin-bottom:14px}
/* ===== concepts: read-only article layout ===== */
#article{max-width:770px;margin:0 auto}
.tldr{background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--brand);border-radius:14px;padding:22px 26px;margin:0 0 14px}
.tldr h2{font-size:0.8rem;font-family:var(--sans);font-weight:700;letter-spacing:0.06em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:10px}
.tldr p{margin:0;font-size:var(--body-size,1.125rem);line-height:var(--body-lh,1.6);color:var(--ink)}
/* The article body is the def's blocks since design system Phase 2 step 2 (sections to blocks, PSY-2293, October 16,
   2026): h2.sec + div.tblock per former section inside div.blocks, the page's block container. Context rules, layout
   only, that reproduce the retired section.art-sec wrapper to the pixel: its 26 px top padding is the heading's (padding,
   not margin, so the gap after the tldr, the family strip and the quote stays what it was), its 12 px heading margin,
   its paragraph margins (1em, none on the last of a block); the block wrapper's own 30 px margins are off here so the
   quote's and the table box's margins meet the neighbours as they did. The retired .art-sec h2.sec size was dead:
   chrome.css's .read h2.sec (1.45 rem) outranked it on every page, and still sizes the heading. */
#article .blocks > h2.sec{padding-top:26px;margin-bottom:12px}
#article .blocks .tblock{margin:0}
#article .blocks .tblock p{margin:0 0 var(--body-gap,1em);color:var(--ink);font-size:var(--body-size,1.125rem);line-height:var(--body-lh,1.6)}
#article .blocks .tblock p:last-child{margin-bottom:0}
.takeaways{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:26px 30px;margin:40px 0}
.takeaways h2.sec{font-size:1.4rem;margin-bottom:14px}
.takeaways ul{margin:0;padding-left:1.2em}
.takeaways li{margin:0 0 11px;color:var(--ink);font-size:var(--body-size,1.125rem);line-height:var(--body-lh,1.6)}
.takeaways li:last-child{margin-bottom:0}
.art-about{margin-top:44px;padding-top:8px;border-top:1px solid var(--line)}
/* Article platform context classes (design system tail, lockups and fonts, PSY-2290, 17 October 2026): the inline
   style= attributes the article templates and article.mjs passed as margins became classes when the coaching-guides
   family (PSY-2411) arrived under check_tokens.py's hard zero-inline-style rule. Layout and size only, value for value:
   art-top is the opening section's 28 px top padding (section{} above gives 54); the heading contexts (main + h2/h3.sec +
   class, so they outrank chrome.css's .read h2.sec size whatever the load order) are the FAQ heading (art-h-questions),
   the related-cards heading (art-h-more), the References h3 (art-h-refs) and a comparison table's heading (art-h-table),
   the last three written by article.mjs for ai-therapy, practice-guides, coaching-guides and types alike; the hub
   classes are the guides hub's "Every ... guide" heading, its intro line and its category groups. The ai-therapy,
   practice-guides and types templates still carry the inline equivalents of art-top and art-h-questions (STYLE_HOLDOUTS). */
section.art-top{padding-top:28px}
main h2.sec.art-h-questions{margin:48px 0 18px}
main h2.sec.art-h-more{margin:48px 0 16px;font-size:1.5rem}
main h3.sec.art-h-refs{margin:40px 0 14px;font-size:1.5rem}
main h2.sec.art-h-table{margin:40px 0 16px}
main h2.sec.art-hub-head{margin:8px 0 6px}
.art-hub-intro{margin:0 0 22px;color:var(--ink-soft);max-width:70ch}
.art-hub-group{margin-bottom:34px}
main h3.sec.art-hub-group-h{margin:0 0 14px;font-size:1.15rem}
/* article hero image (ai-therapy) */
.art-hero{margin:22px 0 0;border-radius:16px;overflow:hidden;border:1px solid var(--line);box-shadow:0 18px 40px oklch(0.2 0.02 60 / 0.12)}
.art-hero img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
@media(max-width:600px){.art-hero{margin-top:14px;box-shadow:0 10px 22px oklch(0.2 0.02 60 / 0.1)}.art-hero img{max-height:62vh}}
/* split hero: text left, image right (matches tests); image hidden on mobile */
.hero-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:44px;align-items:center}
.hero-art{display:flex;justify-content:center}
.hero-art img{width:100%;max-width:440px;border-radius:16px;display:block;aspect-ratio:4/3;object-fit:cover;box-shadow:0 18px 44px oklch(0.15 0.02 60 / 0.35)}
@media(max-width:860px){.hero-grid{grid-template-columns:1fr;gap:0}.hero-art{display:none}.hero-art:has(img){display:block;order:-1;margin:0 0 26px}.hero-art:has(img) img{width:100%;max-width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:14px}}
/* ===== large resources-style header illustration (matches /resources hero) =====
   Applies to ANY article hero that carries a real <img> (concepts, ai-therapy,
   careers, degrees). Motif-only heroes (tools/tests SVG) are untouched. */
.hero-grid:has(.hero-art img){grid-template-columns:1.04fr 0.96fr;gap:clamp(28px,4vw,56px)}
.hero-art:has(img){display:block;justify-content:initial;margin:0;border-radius:20px;overflow:hidden;box-shadow:0 26px 64px oklch(0.12 0.02 60 / 0.42)}
.hero-art:has(img) img{width:100%;max-width:100%;height:auto;display:block;aspect-ratio:16/10;object-fit:cover;border-radius:0;box-shadow:none}
@media(max-width:860px){.hero-grid:has(.hero-art img){grid-template-columns:1fr;gap:0}.hero-art:has(img){order:-1;margin:0 0 26px}.hero-art:has(img) img{aspect-ratio:16/9}}

.hero .hm-row{display:flex;align-items:center;gap:11px}
.hero .hm-row + .hm-row{margin-top:9px}
.hero .hm-line{margin:0;font-family:var(--sans);font-size:.92rem;line-height:1.4;color:var(--on-dark-soft)}
.hero .hm-line a{color:var(--honey);font-weight:600;text-decoration:none}
.hero .hm-line a:hover{text-decoration:underline}
.hero .hm-check{width:15px;height:15px;margin-right:5px;vertical-align:-2px;flex:none}


/* ===== merged from careers/_assets/style.css (platform-unique blocks) ===== */
.timeline-band{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;background:var(--brand);color:#fff;border-radius:14px;padding:16px 24px;margin:18px 0 6px}
.timeline-band .tl-label{font-family:var(--sans);font-weight:700;font-size:0.78rem;letter-spacing:0.06em;text-transform:uppercase;opacity:0.85}
.timeline-band .tl-val{font-size:1.4rem;font-weight:600}
.steps ol{margin:0;padding-left:0;counter-reset:step;list-style:none}
.steps li b{display:block;margin-bottom:3px;font-size:1.08rem}






/* ===== merged from degrees/_assets/style.css (platform-unique blocks) ===== */
.requirements{margin:40px 0}
.requirements ul{margin:0;padding-left:1.2em}
.requirements li{margin:0 0 12px;color:var(--ink);line-height:1.6}
.requirements li b{display:block;margin-bottom:2px;font-size:1.05rem}

/* Long H1s (title plus qualifier, PSY-1501): smaller display size and a wider measure so they
   sit in three lines at most. Short titles keep the display size. */
.hero h1.long{font-size:clamp(1.85rem,3.1vw,2.55rem);max-width:24ch;line-height:1.16}
@media(max-width:860px){.hero h1.long{font-size:clamp(1.7rem,7vw,2.1rem);max-width:none}}

/* No placeholder motif: pages without an illustration get a clean single-column hero until the
   image lane reaches them (Seph, September 14, 2026: 'weird graphic line illustration'). */
.hero-art:not(:has(img)){display:none}
@media(min-width:861px){.hero-grid:not(:has(.hero-art img)){grid-template-columns:1fr}.}

/* Hero balance (Seph, September 14, 2026, /tests/16-personalities): the illustration fills its column
   at 4:3 instead of sitting as a small 16:9 strip beside a tall text stack. */
@media(min-width:861px){
.hero-grid:has(.hero-art img){grid-template-columns:1.1fr 0.9fr;gap:clamp(32px,4vw,64px);align-items:center}
.hero-art:has(img){display:block}
.hero-art img{width:100%;max-width:none;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:18px;box-shadow:0 22px 50px oklch(0.15 0.02 60 / 0.4)}
}

/* ===== Hero with illustration on the article platforms (types, careers, degrees, concepts, AI therapy),
   September 14, 2026, same spec as tests and tools: left column breadcrumb, H1, subtitle, byline;
   right column illustration with the CTA and trust chips beneath. Header .chip pill rule scoped out. */
.hero-art:not(:has(img)){display:none}
.hero-actions .hero-cta{margin-top:0}
.hero-actions .trust{margin-top:22px;padding-top:18px;gap:8px 20px}
.hero-actions{margin-top:26px}
@media(min-width:861px){
.hero-grid:has(.hero-art img){display:grid;grid-template-columns:1.1fr 0.9fr;grid-template-areas:'main art' 'main actions';column-gap:clamp(32px,4vw,64px);row-gap:24px;align-items:start}

.hero-grid:has(.hero-art img) .hero-art{grid-area:art;display:block}
.hero-grid:has(.hero-art img) .hero-art img{width:100%;max-width:none;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:18px;box-shadow:0 22px 50px oklch(0.15 0.02 60 / 0.4)}
.hero-grid:has(.hero-art img) .hero-actions{grid-area:actions;margin-top:0}
.hero-grid:not(:has(.hero-art img)){grid-template-columns:1fr}

}
@media(max-width:860px){.hero-grid{display:grid;grid-template-columns:1fr}.hero-art:has(img){display:block;order:-1;margin:0 0 26px}.hero-art:has(img) img{width:100%;max-width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:14px}.hero-actions{order:2;margin-top:24px}}

/* Header rows on one line, motif shown until the illustration exists (Seph, September 14, 2026 16:20). */
.hero-art:not(:has(img)){display:flex}
@media(min-width:861px){
.hero-grid{display:grid;grid-template-columns:1.1fr 0.9fr;grid-template-areas:'main art' 'main actions';column-gap:clamp(32px,4vw,64px);row-gap:24px;align-items:start}

.hero-grid .hero-art{grid-area:art;display:flex;justify-content:center;align-items:center}
.hero-grid .hero-actions{grid-area:actions;margin-top:0}
.hero-grid:not(:has(.hero-art img)) .hero-art{min-height:342px}
}
@media(min-width:1180px){
.hero .meta-row{flex-wrap:nowrap;white-space:nowrap;gap:0 12px;font-size:0.84rem}


.hero-actions .hero-cta{flex-wrap:nowrap;white-space:nowrap;gap:18px}
.hero-actions .trust{flex-wrap:nowrap;gap:0 18px;overflow:hidden}
}

/* No divider rules, no stacked avatar in the hero (Seph, September 14, 2026 16:40): byline is one inline
   row with a small photo, chips row without a border, no-wrap from the two-column breakpoint up. */
.hero .hero-meta{border-top:0;padding-top:0;margin-top:22px;display:flex;align-items:center;gap:10px}



.hero .meta-row{border-top:0;padding-top:0}
.hero .trust,.hero-actions .trust{border-top:0;padding-top:0;margin-top:18px}
@media(min-width:861px){
.hero .meta-row{flex-wrap:nowrap;white-space:nowrap;gap:0 12px;font-size:0.84rem;overflow:hidden;text-overflow:ellipsis}

.hero-actions .hero-cta{flex-wrap:nowrap;white-space:nowrap;gap:18px}
.hero-actions .trust{flex-wrap:nowrap;gap:0 18px;overflow:hidden}
}
@media(min-width:861px){.}