@font-face{font-family:"Bricolage";src:url(/assets/fonts/bricolage-grotesque-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Bricolage";src:url(/assets/fonts/bricolage-grotesque-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Bricolage";src:url(/assets/fonts/bricolage-grotesque-latin-800-normal.woff2) format("woff2");font-weight:800;font-display:swap}
@font-face{font-family:"Atkinson";src:url(/assets/fonts/atkinson-hyperlegible-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Atkinson";src:url(/assets/fonts/atkinson-hyperlegible-latin-400-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Atkinson";src:url(/assets/fonts/atkinson-hyperlegible-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}

:root{
  --ink:#121a3a;--ink2:#3d4566;--mut:#6b7290;--line:#dde1ec;--bg:#ffffff;--soft:#f3f5fa;
  --blue:#1d2b6b;--blue2:#2f44a8;--coral:#ef6a4c;--coral-l:#fde4dc;--butter:#fbe9a6;--mint:#cfeee2;--lilac:#e5e2fb;
  --h:"Bricolage",system-ui,sans-serif;--b:"Atkinson",system-ui,-apple-system,"Segoe UI",sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 18px/1.6 var(--b)}
img{max-width:100%;height:auto;display:block}
a{color:var(--blue2)}
a:hover{color:var(--coral)}
h1,h2,h3{font-family:var(--h);font-weight:800;letter-spacing:-.025em;line-height:1.08;margin:0 0 .5em;color:var(--ink)}
h1{font-size:clamp(2.2rem,5.4vw,4rem)}
h2{font-size:clamp(1.5rem,3vw,2.1rem)}
h3{font-size:1.2rem;font-weight:700;letter-spacing:-.01em}
p{margin:0 0 1em}
.container{max-width:1240px;margin:0 auto;padding:0 28px}
.narrow{max-width:800px}
.skip{position:absolute;left:-999px}
.skip:focus{left:10px;top:10px;background:var(--ink);color:#fff;padding:8px 12px;z-index:30}
:focus-visible{outline:3px solid var(--coral);outline-offset:2px}

/* header */
.hd{border-bottom:2px solid var(--ink);background:#fff;position:sticky;top:0;z-index:20}
.hd-row{display:flex;align-items:center;justify-content:space-between;height:72px;gap:16px}
.logo{display:flex;align-items:center;gap:9px;font:500 1.55rem var(--h);letter-spacing:-.03em;color:var(--ink);text-decoration:none}
.logo b{font-weight:800;color:var(--blue)}
.logo-dot{width:22px;height:22px;border-radius:50% 50% 50% 0;background:var(--coral);transform:rotate(-45deg)}
.mainnav{display:flex;gap:2px}
.mainnav a{font:700 .95rem var(--h);color:var(--ink);text-decoration:none;padding:10px 14px;border-radius:8px}
.mainnav a:hover{background:var(--soft)}
.mainnav a.on{background:var(--butter)}
.menu-btn{display:none;font:700 .95rem var(--h);background:var(--ink);color:#fff;border:0;border-radius:8px;padding:10px 16px;cursor:pointer}
@media (max-width:900px){
  .menu-btn{display:block}
  .mainnav{display:none;position:absolute;top:72px;left:0;right:0;background:#fff;border-bottom:2px solid var(--ink);flex-direction:column;padding:10px 20px 18px}
  .mainnav.open{display:flex}
  .mainnav a{padding:14px 10px;font-size:1.05rem}
}

/* hero */
.hero{background:var(--blue);color:#fff;padding:72px 0}
.hero-in{display:grid;grid-template-columns:1.2fr .8fr;gap:56px;align-items:center}
.hero h1{color:#fff;max-width:13ch}
.hero-lead{font-size:1.2rem;color:#d7dcf3;max-width:52ch}
.ask{background:#fff;color:var(--ink);border-radius:20px;padding:26px;box-shadow:12px 12px 0 var(--coral)}
.ask-h{font:800 .8rem var(--h);letter-spacing:.1em;text-transform:uppercase;color:var(--coral);margin-bottom:10px}
.ask-list{list-style:none;padding:0;margin:0}
.ask-list li{border-top:1px solid var(--line)}
.ask-list li:first-child{border-top:0}
.ask-list a{display:flex;justify-content:space-between;gap:12px;padding:12px 0;color:var(--ink);text-decoration:none;font-weight:700}
.ask-list a::after{content:"\2192";color:var(--coral)}
.ask-list a:hover{color:var(--blue2)}
@media (max-width:860px){.hero{padding:44px 0 52px}.hero-in{grid-template-columns:1fr;gap:32px}}

/* bands */
.band{padding:72px 0}
.band-alt{background:var(--soft)}
.band-dark{background:var(--ink);color:#fff}
.band-dark h2{color:#fff}
.band-dark .vid-t{color:#fff}
.band-dark .vid-c{color:#b9bfd8}
.band-dark .vid-c a,.band-dark .all{color:var(--butter)}
.band-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:22px}
.band-head h2{margin:0}
.all{font:700 .95rem var(--h);text-decoration:none;white-space:nowrap}
.all::after{content:" \2192"}
.band-lead{color:var(--ink2);margin-top:-8px}
.split{display:grid;grid-template-columns:1fr 1fr;gap:64px}
@media (max-width:860px){.split{grid-template-columns:1fr;gap:48px}}

.timeline{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(8,1fr);gap:0;border-top:4px solid var(--ink);counter-reset:tl}
.timeline li{position:relative}
.timeline li::before{content:"";position:absolute;top:-12px;left:0;width:20px;height:20px;border-radius:50%;background:var(--coral);border:4px solid #fff;box-shadow:0 0 0 2px var(--ink)}
.timeline a{display:flex;flex-direction:column;gap:6px;padding:26px 16px 10px 0;text-decoration:none;color:var(--ink)}
.tl-stage{font:800 .74rem var(--h);letter-spacing:.1em;text-transform:uppercase;color:var(--coral)}
.tl-t{font:700 1.08rem/1.2 var(--h)}
.timeline a:hover .tl-t{color:var(--blue2);text-decoration:underline}
@media (max-width:1000px){.timeline{grid-template-columns:repeat(4,1fr);row-gap:30px}}
@media (max-width:600px){.timeline{grid-template-columns:1fr;border-top:0;border-left:4px solid var(--ink);margin-left:10px}.timeline li::before{top:22px;left:-14px}.timeline a{padding:18px 0 4px 24px}}

.sym-grid{display:flex;flex-wrap:wrap;gap:10px}
.sym{display:inline-block;padding:12px 18px;border:2px solid var(--ink);border-radius:999px;background:#fff;color:var(--ink);text-decoration:none;font:700 1rem var(--h);transition:.12s}
.sym:hover{background:var(--coral);border-color:var(--coral);color:#fff}
.plain-list{list-style:none;padding:0;margin:0;border-top:2px solid var(--ink)}
.plain-list li{border-bottom:1px solid var(--line)}
.plain-list a{display:block;padding:14px 0;font:700 1.1rem var(--h);color:var(--ink);text-decoration:none}
.plain-list a:hover{color:var(--blue2);padding-left:6px;transition:.12s}

.tools-band{background:var(--butter)}
.tool-cards,.tool-list{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.tool-list{padding-top:48px;padding-bottom:80px}
.tool-card{display:flex;flex-direction:column;gap:10px;background:#fff;border:2px solid var(--ink);border-radius:18px;padding:26px;color:var(--ink);text-decoration:none;transition:.12s}
.tool-card:hover{transform:translate(-3px,-3px);box-shadow:6px 6px 0 var(--ink);color:var(--ink)}
.tc-t{font:800 1.35rem var(--h)}
.tc-d{color:var(--ink2);font-size:.98rem}
.tools-note{margin:26px 0 0;max-width:80ch;color:var(--ink2);font-size:.98rem}
@media (max-width:860px){.tool-cards,.tool-list{grid-template-columns:1fr}}

.split-about p{color:var(--ink2)}
.about-side{background:var(--mint);border-radius:20px;padding:30px;align-self:start}
.about-side p{color:var(--ink)}

/* video */
.vid-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
@media (max-width:900px){.vid-grid{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.vid-grid{grid-template-columns:1fr}}
.vid-play,.vid-frame{position:relative;display:block;width:100%;aspect-ratio:16/9;border:0;padding:0;border-radius:12px;overflow:hidden;background:#222a4d;cursor:pointer}
.vid-play img{width:100%;height:100%;object-fit:cover;filter:saturate(.9)}
.vid-btn{position:absolute;left:14px;bottom:14px;background:var(--coral);color:#fff;font:800 .9rem var(--h);padding:9px 14px;border-radius:999px}
.vid-play:hover .vid-btn{background:var(--blue2)}
.vid-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vid-t{font:700 1rem/1.3 var(--h);margin:12px 0 2px}
.vid-c{font-size:.88rem;color:var(--mut);margin:0}
.vid-sec{padding:44px 0 10px}
.vid-sec:last-child{padding-bottom:80px}

/* page head */
.phead{background:var(--soft);border-bottom:2px solid var(--ink);padding:40px 0 34px}
.phead-life-stages{background:var(--lilac)}
.phead-symptoms{background:var(--coral-l)}
.phead-body{background:var(--mint)}
.phead-tools{background:var(--butter)}
.phead h1{max-width:20ch}
.phead-lead{font-size:1.15rem;color:var(--ink2);max-width:60ch;margin:0}
.trail{display:flex;flex-wrap:wrap;gap:8px;font-size:.9rem;margin-bottom:18px;color:var(--ink2)}
.trail a{color:var(--ink);font-weight:700;text-decoration:none}
.trail a:hover{text-decoration:underline}
.byline{color:var(--ink2);font-size:.95rem;margin:0}

/* hub */
.hub{display:grid;grid-template-columns:1.1fr .9fr;gap:64px;padding-top:44px;padding-bottom:80px}
@media (max-width:900px){.hub{grid-template-columns:1fr;gap:36px}}
.rows{list-style:none;padding:0;margin:0;border-top:2px solid var(--ink)}
.row{display:grid;grid-template-columns:1fr auto;gap:4px 16px;padding:18px 4px;border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink)}
.row-t{font:800 1.25rem var(--h)}
.row-d{grid-column:1;color:var(--ink2);font-size:.96rem}
.row-go{grid-row:1/3;grid-column:2;align-self:center;font-size:1.4rem;color:var(--coral)}
.row:hover{background:var(--soft)}
.row:hover .row-t{color:var(--blue2)}

/* article */
.art{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:64px;padding-top:40px;padding-bottom:64px}
@media (max-width:980px){.art{grid-template-columns:1fr;gap:28px}.art-side{order:-1}}
.art-main{max-width:740px}
.short{background:var(--butter);border-radius:18px;padding:24px 26px;margin-bottom:34px}
.short-h,.doc-h,.side-h{font:800 .78rem var(--h);letter-spacing:.1em;text-transform:uppercase;margin-bottom:8px}
.short p{font-size:1.12rem;margin-bottom:12px}
.short ul{margin:0;padding-left:1.1em}
.short li{margin:4px 0}
.txt h2{margin-top:1.7em;scroll-margin-top:90px}
.txt h3{margin-top:1.4em}
.txt ul,.txt ol{padding-left:1.25em}
.txt li{margin:.35em 0}
.txt li::marker{color:var(--coral);font-weight:700}
.tbl{overflow-x:auto;margin:1.4em 0;border:2px solid var(--ink);border-radius:12px}
table{border-collapse:collapse;width:100%;font-size:.95rem}
th,td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:top}
th{background:var(--soft);font-family:var(--h)}
tr:last-child td{border-bottom:0}
.art-side{display:flex;flex-direction:column;gap:22px;align-self:start;position:sticky;top:96px}
@media (max-width:980px){.art-side{position:static}}
.doc{background:var(--coral-l);border-left:6px solid var(--coral);border-radius:0 14px 14px 0;padding:20px 22px}
.doc ul{margin:0;padding-left:1.1em;font-size:.97rem}
.doc li{margin:6px 0}
.doc p{margin:0;font-size:.97rem}
.jump ul{list-style:none;padding:0;margin:0;font-size:.95rem}
.jump li{border-bottom:1px solid var(--line)}
.jump a{display:block;padding:8px 0;color:var(--ink);text-decoration:none}
.jump a:hover{color:var(--blue2)}
@media (max-width:980px){.jump{display:none}}
.qs{margin-top:48px}
.q{border-top:2px solid var(--ink);padding:16px 0 4px}
.q h3{margin-bottom:6px}
.q p{color:var(--ink2)}
.refs{margin-top:40px;font-size:.92rem}
.refs h2{font-size:1.2rem}
.refs ul{padding-left:1.1em;color:var(--ink2)}
.rel{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.rel a{display:flex;flex-direction:column;gap:6px;background:#fff;border:2px solid var(--ink);border-radius:16px;padding:20px;text-decoration:none;color:var(--ink)}
.rel a:hover{box-shadow:5px 5px 0 var(--coral)}
.rel-t{font:800 1.15rem var(--h)}
.rel-d{color:var(--ink2);font-size:.93rem}
@media (max-width:860px){.rel{grid-template-columns:1fr}}

/* tools */
.tool{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:56px;padding-top:40px;padding-bottom:80px}
@media (max-width:900px){.tool{grid-template-columns:1fr}}
.tool-side ol{padding-left:1.2em;color:var(--ink2)}
.side-more{font-size:.95rem;color:var(--ink2);margin-top:20px}
.btn-p,.btn-s{display:inline-block;font:800 1rem var(--h);border:2px solid var(--ink);border-radius:999px;padding:13px 26px;cursor:pointer;text-decoration:none}
.btn-p{background:var(--ink);color:#fff}
.btn-p:hover{background:var(--blue2);border-color:var(--blue2);color:#fff}
.btn-s{background:#fff;color:var(--ink)}
.timer{border:2px solid var(--ink);border-radius:20px;padding:28px}
.timer-set{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media (max-width:640px){.timer-set{grid-template-columns:1fr 1fr}}
.timer-set label{display:flex;flex-direction:column;gap:6px;font-weight:700;font-size:.9rem}
input[type=number],input[type=text],textarea{font:inherit;font-size:1rem;padding:10px 12px;border:2px solid var(--line);border-radius:10px;width:100%;background:#fff;color:var(--ink)}
input:focus,textarea:focus{border-color:var(--blue2);outline:0}
.timer-face{position:relative;width:min(280px,80vw);margin:30px auto}
.timer-face svg{transform:rotate(-90deg)}
.ring-bg{fill:none;stroke:var(--soft);stroke-width:14}
.ring{fill:none;stroke:var(--coral);stroke-width:14;stroke-linecap:round;stroke-dasharray:553;stroke-dashoffset:553;transition:stroke-dashoffset .25s linear}
.timer.relax .ring{stroke:var(--blue2)}
.timer-read{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
#t-phase{font:800 1.5rem var(--h)}
#t-count{font:800 3.6rem/1 var(--h)}
#t-step{font-size:.9rem;color:var(--mut);margin-top:6px}
.timer-btns{display:flex;gap:12px;justify-content:center}
.timer-tip{text-align:center;color:var(--ink2);margin-top:20px;font-size:.97rem}
fieldset{border:2px solid var(--line);border-radius:16px;padding:18px 20px;margin:0 0 18px}
legend{font:800 1.05rem var(--h);padding:0 8px}
fieldset label{display:flex;gap:10px;align-items:flex-start;padding:7px 0;cursor:pointer}
fieldset label input{margin-top:5px;accent-color:var(--blue2);width:18px;height:18px;flex:none}
label.blk{flex-direction:column;gap:6px;font-weight:700}
.result{margin-top:24px;border:2px solid var(--ink);border-radius:18px;padding:24px;background:var(--mint)}
.result h3{font-size:1.5rem}
.result ul{padding-left:1.2em}
@media print{.hd,.ft,.phead,.tool-side,.check fieldset,.check>.btn-p,.no-print{display:none}.result{border:0;background:none}}

.pagebody{padding-top:40px;padding-bottom:80px}

/* footer */
.ft{background:var(--ink);color:#c9cee3;padding:60px 0 28px;font-size:.95rem}
.ft a{color:#fff;text-decoration:none}
.ft a:hover{color:var(--butter)}
.ft-grid{display:grid;grid-template-columns:1.3fr repeat(4,1fr);gap:28px}
.logo-ft{color:#fff}.logo-ft b{color:var(--butter)}
.ft-note{margin-top:14px;max-width:34ch}
.ft-h{font:800 .8rem var(--h);letter-spacing:.1em;text-transform:uppercase;margin-bottom:10px}
.ft ul{list-style:none;padding:0;margin:0}
.ft li{margin:7px 0}
.ft li a{color:#c9cee3}
.ft-base{margin-top:44px;padding-top:20px;border-top:1px solid #2c3561;font-size:.85rem}
@media (max-width:900px){.ft-grid{grid-template-columns:1fr 1fr}.ft-grid>div:first-child{grid-column:1/-1}}
@media (max-width:520px){.container{padding:0 16px}.ft-grid{grid-template-columns:1fr}.ask{box-shadow:8px 8px 0 var(--coral)}}