:root{
  --ink:#121820;--muted:#566070;--faint:#7a8494;--line:#e2e6eb;--bg:#fff;--soft:#f5f7f9;--card:#fff;
  --accent:#143a52;--accent2:#1f6f96;--glow:#7fc0e0;--night:#0b1d2a;--night2:#10283a;--night-ink:#e8eff5;--night-muted:#a9bccb;--night-line:rgba(255,255,255,.12);
  --ok:#1f8a5b;--warn:#8a5a12;
  --atc:#6d3fa6;--qel:#0e7c66;--pac:#a14a06;--val:#1d4ed8;--vey:#be123c;--nas:#0f766e;
  --serif:"Charter","Bitstream Charter","Sitka Text","Iowan Old Style",Cambria,Georgia,serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"Cascadia Mono","SF Mono",Menlo,Consolas,monospace;
  --shadow:0 1px 2px rgba(16,24,32,.05),0 10px 28px -10px rgba(16,24,32,.14);--r:14px;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --ink:#e8ecf1;--muted:#a9b3bf;--faint:#8b95a2;--line:#27303a;--bg:#0c1016;--soft:#121820;--card:#141b24;
  --accent:#7fc0e0;--accent2:#8fcbe8;--night:#08131c;--night2:#0d1e2b;--ok:#4cc38a;--warn:#e3b154;
  --atc:#c3a0ee;--qel:#43c9a8;--pac:#f0a54a;--val:#8fb2ff;--vey:#f7889e;--nas:#4fd0c0;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 10px 28px -10px rgba(0,0,0,.5);}}
:root[data-theme="dark"]{
  --ink:#e8ecf1;--muted:#a9b3bf;--faint:#8b95a2;--line:#27303a;--bg:#0c1016;--soft:#121820;--card:#141b24;
  --accent:#7fc0e0;--accent2:#8fcbe8;--night:#08131c;--night2:#0d1e2b;--ok:#4cc38a;--warn:#e3b154;
  --atc:#c3a0ee;--qel:#43c9a8;--pac:#f0a54a;--val:#8fb2ff;--vey:#f7889e;--nas:#4fd0c0;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 10px 28px -10px rgba(0,0,0,.5);}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:17px/1.6 var(--sans);-webkit-font-smoothing:antialiased}
a{color:var(--accent2)}
.wrap{max-width:1140px;margin:0 auto;padding:0 24px}
.skip{position:absolute;left:-999px}.skip:focus{left:16px;top:12px;z-index:50;background:#fff;color:#000;padding:8px 12px;border-radius:8px}
h1,h2,h3{margin:0;letter-spacing:-.015em}
h2{font:600 clamp(1.6rem,3vw,2.3rem)/1.15 var(--serif);margin-bottom:10px}
.eyebrow{font:700 .74rem/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--accent2);margin:0 0 14px}
.sub{color:var(--muted);max-width:64ch;margin:0 0 32px}
section{padding:72px 0;scroll-margin-top:64px}
.alt{background:var(--soft);border-block:1px solid var(--line)}

/* header */
header.site{background:var(--night);border-bottom:1px solid var(--night-line)}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;height:60px;gap:16px}
.logo{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;font:700 1.02rem/1 var(--sans);letter-spacing:.05em}
.logo svg{width:28px;height:28px;flex:none}
nav.top{display:flex;gap:24px;align-items:center}
nav.top a{color:var(--night-muted);text-decoration:none;font-size:.92rem}
nav.top a:hover{color:#fff}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:600 .95rem/1 var(--sans);padding:.85rem 1.2rem;border-radius:10px;text-decoration:none;border:1px solid transparent;cursor:pointer;min-height:44px}
.btn.primary{background:var(--glow);color:#08131c}
.btn.primary:hover{background:#a3d4ec}
.btn.ghost{color:#fff;border-color:rgba(255,255,255,.3)}
.btn.ghost:hover{background:rgba(255,255,255,.08)}
.btn.solid{background:var(--accent);color:#fff}
:root[data-theme="dark"] .btn.solid{color:#08131c}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .btn.solid{color:#08131c}}
.btn.line{color:var(--ink);border-color:var(--line);background:var(--card)}
.btn.line:hover{border-color:var(--accent2)}
.btn.small{padding:.6rem .9rem;font-size:.9rem;min-height:40px}

/* hero */
.hero{background:var(--night);color:var(--night-ink);padding:40px 0 56px}
.hero .wrap{display:grid;grid-template-columns:1.1fr 1fr;gap:48px;align-items:start}
.hero h1{font:600 clamp(2rem,4.6vw,3.5rem)/1.08 var(--serif);letter-spacing:-.02em;margin:0 0 14px}
.hero .principle{color:var(--night-muted);font-size:1.08rem;margin:0 0 22px;max-width:40ch}
.hero .eyebrow{color:var(--glow)}
.ctas{display:flex;gap:10px;flex-wrap:wrap}

/* picker */
.picker{background:var(--night2);border:1px solid var(--night-line);border-radius:16px;padding:18px}
.picker h2{font:600 1.2rem/1.2 var(--sans);color:#fff;margin:0 0 4px}
.picker p.hint{color:var(--night-muted);font-size:.86rem;margin:0 0 12px}
.picker .q{display:grid;grid-template-columns:1fr;gap:4px;margin-bottom:10px}
.picker label{font-size:.82rem;font-weight:600;color:var(--night-ink)}
.picker select{width:100%;padding:.6rem .7rem;border-radius:9px;border:1px solid rgba(255,255,255,.2);background:#0b1d2a;color:#fff;font:inherit;font-size:.95rem;min-height:44px}
.picker .go{width:100%;margin-top:4px}
.result{margin-top:14px;padding:14px;border-radius:12px;background:rgba(127,192,224,.1);border:1px solid rgba(127,192,224,.3)}
.result[hidden]{display:none}
.result b{color:#fff;font-size:1.05rem}
.result p{margin:6px 0 12px;color:var(--night-ink);font-size:.94rem}
.result .ctas .btn{flex:1 1 auto}

/* product grid */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{position:relative;display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:22px;box-shadow:var(--shadow);overflow:hidden}
.card::before{content:"";position:absolute;inset:0 0 auto;height:4px;background:var(--c,var(--accent2))}
.c-atc{--c:var(--atc)}.c-qel{--c:var(--qel)}.c-pac{--c:var(--pac)}.c-val{--c:var(--val)}.c-vey{--c:var(--vey)}.c-nas{--c:var(--nas)}
.card .hd{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.card .m{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;flex:none;background:color-mix(in srgb,var(--c) 15%,transparent);color:var(--c);font:700 1.1rem/1 var(--serif)}
.card h3{font:650 1.15rem/1.2 var(--sans)}
.card .who{display:block;font-size:.8rem;color:var(--muted);margin-top:3px}
.card .what{margin:0 0 14px;font-size:.97rem}
.card .price{margin:0 0 16px;padding:10px 12px;border-radius:10px;background:var(--soft);font-size:.92rem}
.card .price b{display:block;font-size:1rem}
.card .price small{color:var(--muted)}
.card .acts{margin-top:auto;display:flex;gap:8px;flex-wrap:wrap}
.card .acts .btn{flex:1 1 120px}
.card .try-note{font-size:.8rem;color:var(--muted);margin:8px 0 0}
.stage{display:inline-block;font:700 .64rem/1 var(--sans);letter-spacing:.09em;text-transform:uppercase;padding:.3rem .5rem;border-radius:5px;color:var(--warn);background:color-mix(in srgb,var(--warn) 14%,transparent);margin-top:4px}
.fine{font-size:.82rem;color:var(--muted);margin:18px 0 0}

/* shop */
.shop{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.kit{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px}
.kit h3{font:650 1rem/1.25 var(--sans);margin-bottom:6px}
.kit .amt{font:700 1.5rem/1 var(--sans);margin:4px 0 8px}
.kit p{margin:0 0 14px;color:var(--muted);font-size:.88rem}
.kit .btn{margin-top:auto}

/* tools + templates teaser */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
.tile{display:block;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px;text-decoration:none;color:var(--ink)}
.tile:hover{border-color:var(--accent2)}
.tile b{display:block;color:var(--accent2);margin-bottom:4px}
.tile span{font-size:.9rem;color:var(--muted)}

/* proof strip */
.proof{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:12px 28px}
.proof li{padding:12px 0 12px 16px;border-left:3px solid var(--c);font-size:.94rem;color:var(--muted)}
.proof li b{color:var(--ink);display:block;font-size:.85rem;letter-spacing:.04em}

/* template pages */
.crumb{font-size:.85rem;color:var(--night-muted);margin:0 0 12px}
.crumb a{color:var(--night-muted)}
.page-hero{background:var(--night);color:var(--night-ink);padding:36px 0 40px}
.page-hero h1{font:600 clamp(1.8rem,4vw,2.8rem)/1.1 var(--serif);margin:0 0 12px}
.page-hero p{color:var(--night-muted);max-width:62ch;margin:0}
.dl{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:22px;box-shadow:var(--shadow);margin-top:-24px;position:relative}
.dl h2{font:650 1.2rem/1.2 var(--sans);margin-bottom:8px}
.dl .row{display:flex;gap:10px;flex-wrap:wrap;margin:12px 0}
.legal{font-weight:600;color:var(--warn);margin:8px 0 0;font-size:.92rem}
.upsell{margin-top:16px;padding:16px;border-radius:12px;border:1px solid color-mix(in srgb,var(--c) 40%,var(--line));background:color-mix(in srgb,var(--c) 7%,var(--card))}
.upsell b{display:block;font-size:1.02rem;margin-bottom:4px}
.upsell p{margin:0 0 10px;font-size:.92rem;color:var(--muted)}
.cols{display:grid;grid-template-columns:1.4fr 1fr;gap:40px;align-items:start}
.doc{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:24px 26px;font-size:.95rem}
.doc h3{font:700 1.02rem/1.3 var(--sans);margin:18px 0 6px}
.doc .dt{font:700 1.3rem/1.2 var(--serif);margin:0 0 6px}
.doc .dn{font-style:italic;color:var(--warn)}
.doc p{margin:0 0 8px}
.doc ul{margin:0 0 8px;padding-left:20px}
.doc .sig{color:var(--muted)}
details.doc-wrap{margin-top:8px}
details.doc-wrap summary{cursor:pointer;font-weight:600;padding:8px 0}
ol.steps{padding-left:20px}ol.steps li{margin-bottom:8px}
.faq details{border-bottom:1px solid var(--line);padding:12px 0}
.faq summary{cursor:pointer;font-weight:600}
.faq p{margin:8px 0 0;color:var(--muted)}
table.cols-table{border-collapse:collapse;width:100%;font-size:.88rem}
table.cols-table th,table.cols-table td{border:1px solid var(--line);padding:6px 8px;text-align:left;vertical-align:top}
table.cols-table th{background:var(--soft)}
.side{position:sticky;top:16px}
.side .tile{margin-bottom:10px}

/* footer */
footer{background:var(--night);color:var(--night-muted);padding:44px 0 36px;font-size:.9rem}
footer .grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:32px;padding-bottom:28px;border-bottom:1px solid var(--night-line)}
footer p{margin:0;max-width:44ch}
footer h2{font:700 .72rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:#fff;margin:0 0 12px}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
footer a{color:var(--night-muted);text-decoration:none}
footer a:hover{color:#fff}
footer .legal-line{padding-top:20px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.84rem}
.nf{padding:80px 0}

/* store v0.4.0: seller template packs and guides */
.shop-h{font:650 1.05rem/1.3 var(--sans);margin:28px 0 12px}
.kit .free-v{display:block;margin-top:10px;font-size:.88rem}
.btn.off,.btn[disabled]{background:var(--soft);color:var(--ink);border-color:var(--line);cursor:default}
:root[data-theme="dark"] .btn.off{color:var(--ink)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .btn.off{color:var(--ink)}}
.pack-box{margin:28px 0;padding:22px;border-radius:16px;border:2px solid var(--accent2);background:var(--card);box-shadow:var(--shadow)}
.pack-box h2{font:650 1.25rem/1.25 var(--sans);margin-bottom:4px}
.pack-box .amt{font:700 1.6rem/1 var(--sans);margin:8px 0 10px}
.pack-box .amt small{font-size:.85rem;font-weight:500;color:var(--muted)}
.pack-box ul{padding-left:20px;margin:0 0 16px}
.dated{font-size:.88rem;color:var(--warn);font-weight:600;margin:6px 0 0}
.prose .dated{margin-bottom:16px}
.prose h2{font:650 1.3rem/1.25 var(--sans);margin:28px 0 8px}
.prose ul{padding-left:20px}
.prose li{margin-bottom:6px}
ul.sources{list-style:none;padding:0;margin:8px 0 16px;font-size:.9rem}
ul.sources li{padding:4px 0 4px 14px;border-left:2px solid var(--line);margin-bottom:4px}
.tscroll{overflow-x:auto;margin:12px 0}
.tscroll table{min-width:560px}
.doc .tscroll table{min-width:0}
.next{margin:24px 0;padding:16px;border-radius:12px;background:var(--soft);border:1px solid var(--line)}
.next b{display:block}
.next p{margin:4px 0 10px;color:var(--muted);font-size:.92rem}
h2.gap{margin-top:36px}
footer .grid{grid-template-columns:1.4fr 1fr 1fr 1fr}

@media (max-width:1020px){.shop{grid-template-columns:repeat(3,1fr)}}
@media print{header.site,footer,.side,.dl .row,.pack-box,.upsell,.faq,.skip,.page-hero .crumb{display:none}.page-hero{background:none;color:#000}details.doc-wrap>summary{display:none}}
@media (max-width:980px){
  nav.top a.hide-m{display:none}
  .hero .wrap,.cols{grid-template-columns:1fr;gap:24px}
  .grid3{grid-template-columns:1fr 1fr}
  .side{position:static}
  footer .grid{grid-template-columns:1fr 1fr}footer .grid>div:first-child{grid-column:1/-1}
}
@media (max-width:640px){
  body{font-size:16px}
  .wrap{padding:0 16px}
  section{padding:52px 0}
  nav.top{gap:14px}
  .hero{padding:22px 0 40px}
  .hero h1{font-size:1.85rem;margin-bottom:10px}
  .hero .principle{font-size:.98rem;margin-bottom:14px}
  .hero .ctas .btn{flex:1 1 auto;padding:.7rem .9rem}
  .picker{padding:14px}
  .picker .q{margin-bottom:8px}
  .grid3,.shop,.proof{grid-template-columns:1fr}
  .doc{padding:18px 16px}
}