:root{--bg:#F7F5FC;--sf:#FFFFFF;--bd:#E2DEF0;--tx:#1B1830;--mu:#5A5673;--ac:#5B4BC4;--on:#FFFFFF;color-scheme:light dark}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#0B0A12;--sf:#100F1A;--bd:#2A2740;--tx:#F2EEFF;--mu:#A8A3BD;--ac:#A69BE0;--on:#14112B}}
:root[data-theme=dark]{--bg:#0B0A12;--sf:#100F1A;--bd:#2A2740;--tx:#F2EEFF;--mu:#A8A3BD;--ac:#A69BE0;--on:#14112B;color-scheme:dark}
:root[data-theme=light]{color-scheme:light}
*{box-sizing:border-box}html{scroll-padding-top:5rem}
body{margin:0;background:var(--bg);color:var(--tx);font:17.5px/1.65 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
a{color:var(--ac)}a:focus-visible,button:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid var(--ac);outline-offset:2px}
.skip{position:absolute;left:-999px}.skip:focus{left:8px;top:8px;background:var(--sf);padding:.5rem 1rem;z-index:9}
.wrap{max-width:1000px;margin:auto;padding:0 20px}
header{border-bottom:1px solid var(--bd)}header .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;min-height:64px}
.logo{font-weight:700;font-size:1.2rem;color:var(--tx);text-decoration:none;margin-right:auto;min-height:44px;display:inline-flex;align-items:center}
nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 8px;color:var(--tx)}
select{min-height:44px;background:var(--sf);color:var(--tx);border:1px solid var(--bd);border-radius:12px;padding:0 10px;font:inherit}
h1,h2,h3{line-height:1.2;margin:2em 0 .5em}h1{font-size:2.2rem;margin-top:1.2em}h2{font-size:1.45rem}
main{padding-bottom:3rem}.doc{max-width:70ch}.layout{display:grid;gap:24px}
@media(min-width:900px){.layout{grid-template-columns:230px minmax(0,1fr)}details.toc{position:sticky;top:16px;align-self:start}}
details.toc{border:1px solid var(--bd);background:var(--sf);border-radius:16px;padding:12px 16px;margin-top:2rem}
.toc summary{min-height:44px;display:flex;align-items:center;cursor:pointer;font-weight:600}.toc a{display:block;padding:6px 0;color:var(--mu)}
blockquote{margin:1.2rem 0;padding:14px 18px;border:1px solid var(--ac);border-radius:16px;background:var(--sf)}blockquote p{margin:0}
.tw{overflow-x:auto}table{border-collapse:collapse;width:100%}th,td{border:1px solid var(--bd);padding:8px 10px;text-align:left}
mark.ph{background:#FFE066;color:#000;padding:0 3px;border-radius:4px;outline:1px dashed #B8860B}
.meta{color:var(--mu)}
.hero{padding:4rem 0 2rem;display:grid;gap:32px;align-items:center;background:radial-gradient(60% 60% at 20% 0,color-mix(in srgb,var(--ac) 14%,transparent),transparent)}
@media(min-width:800px){.hero{grid-template-columns:1.2fr .8fr}}
.hero h1{font-size:clamp(2.2rem,6vw,3.4rem);margin:.2em 0}
.badge,.btn{display:inline-flex;align-items:center;min-height:44px;padding:0 20px;border-radius:999px;font-weight:600;text-decoration:none}
.badge{border:1px solid var(--bd);background:var(--sf);color:var(--mu)}.btn{background:var(--ac);color:var(--on)}
.phone{display:block;max-width:260px;width:100%;height:auto;margin:auto;border-radius:32px;background:transparent;filter:drop-shadow(0 20px 44px color-mix(in srgb,var(--ac) 30%,transparent))}
.cards{display:grid;gap:16px;margin:2rem 0}@media(min-width:800px){.cards{grid-template-columns:repeat(3,1fr)}}
.card{border:1px solid var(--bd);background:var(--sf);border-radius:20px;padding:20px;text-align:center}.card h3{margin:0 0 .3em;font-size:1.15rem}.card p{margin:0;color:var(--mu)}
/* ponytail: phone screenshots are 1008x1883 — cap height not width, or one
   card row becomes taller than the fold and the grid looks broken. */
.card img.shot{display:block;width:auto;max-width:100%;max-height:340px;height:auto;margin:.4rem auto 0;border-radius:16px}
.cta{text-align:center;padding:2rem 0}
footer{border-top:1px solid var(--bd);padding:24px 0;color:var(--mu);font-size:.95rem}footer a{display:inline-flex;min-height:44px;align-items:center;margin-right:14px;color:var(--mu)}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media print{:root,:root[data-theme]{--bg:#fff;--sf:#fff;--bd:#999;--tx:#000;--mu:#000;--ac:#000}header,.toc,.skip,footer nav{display:none}body{font-size:12pt}a{text-decoration:underline}}