:root{--ink:#1d2433;--muted:#4a5466;--bg:#fbfaf7;--card:#ffffff;--line:#e3e0d8;--accent:#0b5d4b;--accent-ink:#ffffff;--soft:#e7f2ee;--focus:#c2410c}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:1.0625rem;line-height:1.6;color:var(--ink);background:var(--bg)}
a{color:var(--accent);text-underline-offset:2px}
a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.wrap{max-width:68rem;margin:0 auto;padding:0 1.25rem}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:#fff;padding:.5rem 1rem;z-index:10}
.skip:focus{left:1rem;top:1rem}
header.site{padding:1.25rem 0;border-bottom:1px solid var(--line)}
header.site .wrap{display:flex;justify-content:space-between;align-items:center;gap:1rem}
.brand{font-weight:700;font-size:1.125rem;color:var(--ink);text-decoration:none}
.brand span{color:var(--accent)}
.hero{padding:3.5rem 0 2.5rem}
.eyebrow{display:inline-block;background:var(--soft);color:var(--accent);font-weight:600;font-size:.875rem;padding:.25rem .75rem;border-radius:999px;margin:0 0 1rem}
h1{font-size:clamp(2rem,5vw,3.25rem);line-height:1.12;margin:0 0 1rem;letter-spacing:-.02em;max-width:22ch}
.lede{font-size:1.1875rem;color:var(--muted);max-width:40rem;margin:0 0 1.75rem}
.signup{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:1.25rem;max-width:36rem}
.signup label{display:block;font-weight:600;margin-bottom:.5rem}
.row{display:flex;gap:.5rem;flex-wrap:wrap}
input[type=email],input[type=text],input[type=url]{flex:1 1 14rem;min-width:0;font:inherit;padding:.75rem .875rem;border:1px solid #8a8f99;border-radius:10px;background:#fff;color:var(--ink)}
button{font:inherit;font-weight:600;padding:.75rem 1.25rem;border:0;border-radius:10px;background:var(--accent);color:var(--accent-ink);cursor:pointer}
button:hover{background:#08493b}
.small{font-size:.9375rem;color:var(--muted);margin:.75rem 0 0}
section{padding:2.5rem 0}
h2{font-size:clamp(1.5rem,3vw,2rem);line-height:1.2;margin:0 0 .75rem;letter-spacing:-.01em}
.intro{color:var(--muted);max-width:42rem;margin:0 0 1.5rem}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(15.5rem,1fr));gap:1rem;list-style:none;padding:0;margin:0}
.tile{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:1.25rem;display:flex;flex-direction:column}
.tile h3{font-size:1.125rem;margin:0 0 .25rem;display:flex;justify-content:space-between;align-items:baseline;gap:.5rem}
.soon{flex:none;font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:#7a3e00;background:#fdf0dc;border-radius:999px;padding:.125rem .5rem}
.who{color:var(--muted);font-size:.9375rem;margin:0 0 .75rem}
.tile ul{margin:0;padding-left:1.1rem}
.tile li{margin:.25rem 0}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:1rem;padding:0;margin:0;list-style:none;counter-reset:s}
.steps li{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:1.25rem;counter-increment:s}
.steps li::before{content:counter(s);display:inline-grid;place-items:center;width:2rem;height:2rem;border-radius:50%;background:var(--soft);color:var(--accent);font-weight:700;margin-bottom:.5rem}
.steps strong{display:block}
details.vendor{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:1rem 1.25rem;max-width:40rem}
details.vendor summary{cursor:pointer;font-weight:600}
.vendor form{margin-top:1rem;display:grid;gap:.875rem}
.vendor label{display:block;font-weight:600;margin-bottom:.25rem}
.vendor input{width:100%}
.hp{position:absolute;left:-5000px}
footer{border-top:1px solid var(--line);padding:2rem 0 3rem;color:var(--muted);font-size:.9375rem}
footer nav a{margin-right:1rem}
.prose{max-width:44rem;padding:2.5rem 0 3rem}
.prose h1{font-size:clamp(1.75rem,4vw,2.5rem)}
.prose h2{font-size:1.375rem;margin-top:2rem}
.notice{background:var(--soft);border-radius:10px;padding:1rem}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
/* Directory */
header.site nav{display:flex;gap:1rem;flex-wrap:wrap}
.vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.totw{background:var(--soft);border-radius:14px;padding:1.25rem 1.5rem;max-width:44rem;margin:0 0 .5rem}
.totw .eyebrow{background:#fff;margin-bottom:.5rem}
.totw h2{font-size:1.5rem;margin:0 0 .5rem}
.totw p{margin:0 0 .5rem}
.totw .small{margin:0}
.filter{display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 1.5rem}
.chip{font-size:.9375rem;padding:.5rem .875rem;border-radius:999px;background:var(--card);color:var(--ink);border:1px solid #8a8f99}
.chip:hover{background:var(--soft)}
.chip[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.chip .n,.group h3 .n{font-weight:400}
.jump ul{display:flex;flex-wrap:wrap;gap:.25rem 1rem;list-style:none;padding:0;margin:.25rem 0 1.5rem}
.jump .small{margin:0}
.group{padding:0 0 2rem}
.group[hidden]{display:none}
.group h3{font-size:1.25rem;margin:0 0 .75rem}
.listings{display:grid;grid-template-columns:repeat(auto-fill,minmax(17rem,1fr));gap:1rem;list-style:none;padding:0;margin:0}
.listing{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:1rem 1.25rem;overflow-wrap:anywhere}
.listing h4{font-size:1.0625rem;margin:0 0 .25rem}
.listing p{margin:0 0 .5rem}
.facts{list-style:none;padding:0;margin:0;font-size:.9375rem;color:var(--muted)}
.facts li{margin:.125rem 0}
.facts .k{font-weight:600;color:var(--ink)}
.live{flex:none;font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--accent);background:var(--soft);border-radius:999px;padding:.125rem .5rem}
.tile .more{margin:.75rem 0 0;font-weight:600}
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.filter[hidden],.jump[hidden]{display:none}
.own-badge{display:inline-block;margin:0 0 .5rem;font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:#1d2433;background:#fff;border:1px solid #1d2433;border-radius:999px;padding:.125rem .5rem}
.listing .note{font-size:.9375rem;font-weight:600;color:var(--ink)}
.group-intro{color:var(--muted);margin:-.5rem 0 .75rem}
/* Phase 1: buttons, homepage, quiz, kits, guides */
.button{display:inline-block;font-weight:600;padding:.75rem 1.25rem;border-radius:10px;background:var(--accent);color:var(--accent-ink);text-decoration:none;border:2px solid var(--accent)}
.button:hover{background:#08493b;border-color:#08493b}
.button-alt{background:var(--card);color:var(--accent);border:2px solid var(--accent)}
.button-alt:hover{background:var(--soft);color:#08493b}
button.button-alt{padding:.625rem 1.125rem}
.button-big{font-size:1.1875rem;padding:.875rem 1.5rem}
.cta{margin:0 0 .25rem}
.cta-note{margin:0 0 1.75rem}
.narrow,.kit,.guide{padding-top:2.5rem}
.narrow>*,.guide>*{max-width:46rem}
.page-head{padding:2.5rem 0 0}
.page-head h1{font-size:clamp(1.75rem,4vw,2.5rem);max-width:none}
.guide-tiles .tile p{margin:0 0 .5rem}
.guide-tiles .tile p a{font-weight:600}
.honest{background:var(--soft);border-radius:14px;padding:1.5rem;margin:1rem 0}
.honest-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));gap:.75rem 1.5rem;list-style:none;padding:0;margin:0}
.honest-list strong{display:block}
details.fold{margin:1rem 0 0;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:.875rem 1.25rem}
details.fold summary{cursor:pointer;font-weight:600}
details.fold .small{margin:.5rem 0 1rem}
details.fold[open] summary{margin-bottom:.25rem}
pre:focus-visible,.q:focus-visible,h2[tabindex]:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
/* quiz */
.quiz{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:1.25rem 1.5rem;margin:1.5rem 0}
.quiz fieldset{border:0;padding:0;margin:0;min-width:0}
.quiz fieldset[hidden],.step[hidden],.sub[hidden]{display:none}
.quiz legend{padding:0;margin:0 0 .75rem}
.quiz .q{display:block;font-size:1.375rem;font-weight:700;line-height:1.3}
.quiz .hint{margin:-.5rem 0 .75rem}
.choice{display:flex;gap:.625rem;align-items:flex-start;padding:.625rem .875rem;margin:0 0 .5rem;border:1px solid #8a8f99;border-radius:10px;cursor:pointer;background:#fff}
.choice:hover{background:var(--soft)}
.choice input{margin:.3rem 0 0;flex:none;width:1.125rem;height:1.125rem;accent-color:var(--accent)}
.sub{margin:.75rem 0 0 1rem;padding:.75rem 0 0 1rem;border-left:3px solid var(--soft)}
.sub legend{font-weight:600}
.progress{font-size:.9375rem;color:var(--muted);margin:0 0 .75rem}
.error{color:#9a1c1c;font-weight:600;margin:.5rem 0 0}
.quiz-nav{display:flex;gap:.75rem;justify-content:space-between;flex-wrap:wrap;margin:1rem 0 0}
.quiz-nav #quiz-next{margin-left:auto}
.other-result{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:1.25rem 1.5rem;margin:1.5rem 0}
.kit-list{padding-left:1.1rem}
.kit-list li{margin:.375rem 0}
/* kit pages */
.kit h1{max-width:28ch;font-size:clamp(1.75rem,4vw,2.5rem)}
.kit h2{margin-top:2rem}
.k{font-weight:600;color:var(--ink)}
.fitted{list-style:none;padding:0;margin:0 0 1rem;display:flex;flex-wrap:wrap;gap:.25rem 1.25rem;font-size:.9375rem;color:var(--muted)}
.kit-tools{display:grid;grid-template-columns:repeat(auto-fill,minmax(17rem,1fr));gap:1rem;list-style:none;padding:0;margin:0}
.kit-tool{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:1rem 1.25rem;overflow-wrap:anywhere}
.kit-tool h3{font-size:1.125rem;margin:0 0 .25rem}
.kit-tool p{margin:0 0 .5rem}
.kit-tool .price{font-weight:600}
.tag{display:inline-block;font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;border-radius:999px;padding:.125rem .5rem;margin:0 0 .5rem}
.tag-new{background:var(--soft);color:var(--accent)}
.tag-existing,.tag-existing-paid,.tag-current-app{background:#eef0f5;color:#1d2433}
.tag-free{background:var(--soft);color:var(--accent);margin:0 0 0 .25rem}
.tag-soon{background:#fdf0dc;color:#7a3e00;margin:0 0 0 .25rem}
.kit-cost{background:var(--soft);border-radius:14px;padding:1rem 1.25rem;margin:1.25rem 0 0}
.kit-cost p{margin:0 0 .375rem}
.kit-cost .small{margin:.5rem 0 0}
.kit-notes{margin:1rem 0 0;padding-left:1.1rem;color:var(--muted)}
.kit-upgrade{border:1px dashed #8a8f99;border-radius:14px;padding:1rem 1.25rem;margin:1.25rem 0 0}
.kit-upgrade h3{font-size:1.0625rem;margin:0 0 .25rem}
.kit-upgrade p{margin:0}
.kit-guides{padding-left:1.1rem}
.kit-guides li{margin:.5rem 0}
.preorder{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:1.25rem 1.5rem;margin:2.5rem 0 1.5rem}
.preorder h2{margin-top:0}
.po-buttons{list-style:none;padding:0;margin:1rem 0 0;display:flex;flex-wrap:wrap;gap:.75rem}
.po-buttons .button{text-align:center}
.po-note{display:block;font-size:.8125rem;font-weight:600;opacity:.95}
/* guides */
.guide{padding-bottom:1rem}
.guide h1{font-size:clamp(1.75rem,4vw,2.5rem);max-width:none}
.narrow h2{font-size:1.375rem;margin:2rem 0 .5rem}
.narrow h1{font-size:clamp(1.75rem,4vw,2.5rem);max-width:none}
.guide h2{font-size:1.375rem;margin:2rem 0 .5rem}
.guide-meta{list-style:none;padding:0;margin:0 0 1rem;display:flex;flex-wrap:wrap;gap:.25rem 1.5rem;font-size:.9375rem;color:var(--muted)}
.stale{background:#fdf0dc;color:#5c2e00;border-radius:10px;padding:.75rem 1rem;margin:0 0 1rem}
.stale p{margin:0}
.guide-steps{padding-left:1.4rem}
.guide-steps>li{margin:0 0 1.25rem;padding-left:.25rem}
.guide-steps p{margin:0 0 .375rem}
.do{font-weight:600}
.where,.check{font-size:.9375rem}
.shot{margin:.5rem 0}
.shot-box{display:grid;place-items:center;min-height:7rem;margin:0;border:2px dashed #8a8f99;border-radius:10px;background:#f3f1ec;color:var(--muted);font-weight:600;text-align:center;padding:1rem}
.shot figcaption{font-size:.875rem;color:var(--muted);margin:.25rem 0 0}
.src{font-size:.875rem;color:var(--muted)}
.prompts{list-style:none;padding:0;margin:0}
.prompts h3{font-size:1.0625rem;margin:1rem 0 .375rem}
.prompt,.card-template{white-space:pre-wrap;overflow-wrap:anywhere;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.9375rem;line-height:1.55;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:.875rem 1rem;margin:0}
.snags li,.sources li,.changelog li{margin:.375rem 0}
.disclaimer{border-left:4px solid var(--accent);padding:.5rem 0 .5rem 1rem}
.disclaimer p{margin:0}
.clinical{background:#eef0f5;border-radius:14px;padding:1rem 1.25rem;margin:1.5rem 0 0}
.clinical h2{margin-top:0}
.clinical ul{margin:0 0 .5rem;padding-left:1.1rem}
.notice{margin:0 0 1rem}
.brand{white-space:nowrap}
header.site .wrap{flex-wrap:wrap;row-gap:.5rem}