/* DTCRouter landing v3 (RouterGrowth structure, calm design). Rules: one accent (green), cool neutrals, light + dark via tokens.
   Shape rule: buttons and tabs are pills; every other surface and input uses --r (12px). */
:root{
  --bg:#F3F4F1;--surface:#FBFBF9;--tint:#E7EAE4;--ink:#15181A;--muted:#565D62;--line:#D9DDD6;
  --accent:#0E7A57;--accent-hover:#0B6447;--accent-ink:#FAFFFC;--accent-text:#0B6447;--accent-soft:#DCEFE6;
  --shadow:0 1px 2px rgba(21,40,30,.06),0 10px 30px rgba(21,40,30,.07);
  --backdrop:rgba(17,20,19,.55);
  --head:'Bricolage Grotesque',system-ui,sans-serif;--body:'Figtree',system-ui,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,monospace;
  --r:12px;--pill:999px;--gutter:clamp(16px,4vw,32px);--space:clamp(48px,7vw,88px);
}
@media (prefers-color-scheme:dark){:root{
  --bg:#111413;--surface:#181C1B;--tint:#1F2422;--ink:#E9ECE8;--muted:#A1A8A4;--line:#2A302D;
  --accent:#3CCB94;--accent-hover:#5AD8A7;--accent-ink:#06261A;--accent-text:#5FD9A9;--accent-soft:#16332A;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 10px 30px rgba(0,0,0,.35);--backdrop:rgba(0,0,0,.7);
}}
*{box-sizing:border-box}
html,body{overflow-x:clip}
html{scroll-behavior:smooth;color-scheme:light dark}
body{margin:0;background:var(--bg);color:var(--ink);font:17px/1.55 var(--body);-webkit-text-size-adjust:100%}
a{color:inherit}
h1,h2,h3{font-family:var(--head);font-weight:700;line-height:1.08;letter-spacing:-.022em;margin:0 0 .45em;text-wrap:balance;overflow-wrap:break-word;min-width:0}
h1{font-size:clamp(2rem,3.6vw,2.85rem)}
h2{font-size:clamp(1.7rem,3.4vw,2.5rem)}
h3{font-size:1.22rem;letter-spacing:-.01em}
p{margin:0 0 1em;text-wrap:pretty}
code{font-family:var(--mono);font-size:.86em}
.wrap{max-width:1160px;margin:0 auto;padding:0 var(--gutter)}
.section{padding:var(--space) 0}
.lede{font-size:1.12rem;color:var(--muted);max-width:58ch}
.muted{color:var(--muted)}
.small{font-size:.9rem}
.num{font-variant-numeric:tabular-nums}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:4px}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:var(--bg);padding:8px 12px;z-index:100}
.skip:focus{left:8px}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 22px;border-radius:var(--pill);border:1.5px solid var(--ink);background:transparent;color:var(--ink);font:600 1rem var(--body);cursor:pointer;text-decoration:none;white-space:nowrap;transition:background-color .2s,transform .1s}
.btn:hover{background:var(--tint)}
.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.primary:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
.btn.sm{min-height:40px;padding:0 16px;font-size:.92rem}
.link-btn{background:none;border:0;padding:6px 2px;font:600 .92rem var(--body);color:var(--accent-text);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.link-btn:hover{color:var(--ink)}
.actions{display:flex;flex-wrap:wrap;gap:10px}

/* strip + header */
.strip{background:var(--ink);color:var(--bg);text-align:center;padding:9px var(--gutter);font-size:.9rem}
.strip a{color:inherit;font-weight:600;text-underline-offset:3px}
header.site{position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;gap:16px;min-height:64px}
.logo{font:700 1.3rem var(--head);text-decoration:none;letter-spacing:-.03em}
#burger{margin-left:auto;min-height:44px;min-width:44px;border:1.5px solid var(--ink);background:none;color:var(--ink);border-radius:var(--r);font:600 .9rem var(--body);cursor:pointer}
#nav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--bg);border-bottom:1px solid var(--line);padding:8px var(--gutter) 16px;max-height:80vh;overflow:auto}
#nav.open{display:block}
#nav ul{list-style:none;margin:0;padding:0}
.nav-btn,#nav a.nl{display:flex;width:100%;justify-content:space-between;align-items:center;gap:6px;min-height:48px;background:none;border:0;font:600 1rem var(--body);color:var(--ink);text-decoration:none;cursor:pointer;padding:0}
.nav-btn::after{content:"";width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .2s}
.nav-btn[aria-expanded=true]::after{transform:translateY(1px) rotate(225deg)}
.menu{display:none}
.nav-btn[aria-expanded=true]+.menu{display:grid;gap:2px;padding:4px 0 12px}
.mega-item{display:block;text-decoration:none;padding:10px 12px;border-radius:var(--r)}
.mega-item:hover{background:var(--tint)}
.mega-item strong{display:block;font-size:.98rem}
.mega-item span{font-size:.88rem;color:var(--muted)}
.nav-cta{margin-top:8px}
@media(min-width:960px){
  #burger{display:none}
  #nav{display:block;position:static;border:0;padding:0;max-height:none;overflow:visible;margin-left:auto;background:none}
  #nav ul{display:flex;align-items:center;gap:2px}
  #nav li{position:relative}
  .nav-btn,#nav a.nl{width:auto;padding:0 12px;border-radius:var(--r)}
  .nav-btn:hover,#nav a.nl:hover{background:var(--tint)}
  .menu{position:absolute;top:calc(100% + 6px);left:0;width:min(620px,90vw);background:var(--surface);border-radius:var(--r);box-shadow:var(--shadow);grid-template-columns:1fr 1fr}
  .nav-btn[aria-expanded=true]+.menu{padding:8px}
  .nav-cta{margin:0 0 0 10px}
}

/* hero: centered, RouterGrowth layout */
.hero{padding:clamp(40px,7vw,88px) 0 clamp(28px,4vw,44px);text-align:center}
.hero h1{font-size:clamp(2.3rem,5.4vw,3.9rem);max-width:18ch;margin:0 auto .35em}
.hero .lede{margin:0 auto 26px;max-width:54ch}
.hero .actions{justify-content:center}
.connect{margin:26px auto 0;max-width:640px}
.connect .tabs{justify-content:center;flex-wrap:wrap;overflow:visible;margin:0 0 10px}
.panel{min-height:52px;display:flex;align-items:center;justify-content:center}
.panel[hidden]{display:none}
.cmd{display:inline-flex;align-items:center;gap:8px;max-width:100%;background:var(--surface);border-radius:var(--r);padding:6px 6px 6px 14px}
.cmd code{overflow-x:auto;white-space:nowrap;min-width:0;scrollbar-width:none}
.was{color:var(--muted);text-decoration:line-through;font-variant-numeric:tabular-nums}
.stars{color:var(--ink);letter-spacing:2px;font-size:.9rem;margin-right:6px}

/* session block under the hero */
.section.tight{padding-top:0}
.session-wrap{max-width:860px}
.works{text-align:center;color:var(--muted);font-size:.92rem;margin:0 0 16px}
.try{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;margin-top:14px}
.try .tabs{margin:0;padding-bottom:4px}
.center{text-align:center;margin-left:auto;margin-right:auto}

/* waterfall */
.falls{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:16px}
@media(min-width:760px){.falls{grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}}
.falls li{display:grid;gap:2px;padding-top:16px;border-top:2px solid var(--line)}
.falls li.hit{border-top-color:var(--accent)}
.falls b{font-weight:600}
.falls span{color:var(--muted)}
.falls .cost{font:700 1.4rem/1.3 var(--head);color:var(--ink);font-variant-numeric:tabular-nums}

/* recipes list */
.rlist{margin-top:24px}
.ritem{display:grid;gap:10px 40px;padding:20px 0;border-top:1px solid var(--line)}
@media(min-width:860px){.ritem{grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);align-items:start}}
.ritem h3{margin-bottom:4px}
.ritem p{margin:0;color:var(--muted);font-size:.95rem}
.prompt{background:var(--tint);border-radius:var(--r);padding:14px 16px}
.prompt q{display:block;quotes:none;font-size:.95rem;line-height:1.5}
.prompt .link-btn{margin-top:6px}

/* use cases */
.cases{display:grid;gap:16px;margin-top:28px}
@media(min-width:860px){.cases{grid-template-columns:repeat(2,minmax(0,1fr))}}
.case{background:var(--surface);border-radius:var(--r);padding:clamp(20px,3vw,28px);display:flex;flex-direction:column;gap:12px}
.case h3,.case p{margin:0}
.vertical{font-size:.85rem;color:var(--muted)}
.mini-rows{list-style:none;margin:0;padding:0}
.mini-rows li{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:12px;padding:9px 0;border-bottom:1px solid var(--line);font-size:.95rem}
.mini-rows li:last-child{border:0}
.mini-rows li>span:first-child{color:var(--muted)}
.ranks{list-style:none;margin:0;padding:0;counter-reset:r}
.ranks li{counter-increment:r;display:grid;grid-template-columns:1.6rem minmax(0,1fr) auto;gap:2px 10px;align-items:baseline;padding:9px 0;border-bottom:1px solid var(--line)}
.ranks li:last-child{border:0}
.ranks li::before{content:counter(r);font:700 1rem var(--head);color:var(--muted)}
.ranks .tag{grid-column:2;font-size:.82rem;color:var(--muted)}
.ranks .p{font-variant-numeric:tabular-nums;font-weight:600}
.mini-quotes p{margin:0 0 8px;font-weight:500}
.chips{margin-top:auto!important;padding-top:4px}
.also{margin-top:28px;color:var(--muted)}

/* session */
.tabs{display:flex;gap:6px;overflow-x:auto;padding:2px 2px 8px;margin:24px 0 12px;scrollbar-width:thin}
[role=tab]{min-height:40px;padding:0 15px;border-radius:var(--pill);border:1.5px solid var(--line);background:transparent;color:var(--ink);font:600 .92rem var(--body);cursor:pointer;white-space:nowrap;transition:background-color .2s}
[role=tab]:hover{background:var(--tint)}
[role=tab][aria-selected=true]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.session{background:var(--surface);border-radius:var(--r);padding:6px clamp(16px,3vw,28px);max-width:820px}
.step{display:grid;grid-template-columns:96px minmax(0,1fr);gap:14px;padding:14px 0;border-bottom:1px solid var(--line)}
.step:last-child{border:0}
.step>span{font:500 .82rem var(--mono);color:var(--muted);padding-top:3px}
.step.you>div{font-weight:600}
.step.answer-step>span{color:var(--accent-text)}
.chip{background:var(--tint);border-radius:6px;padding:2px 7px;margin:2px 4px 2px 0;display:inline-block}
@media(prefers-reduced-motion:no-preference){.step{animation:in .3s both}.step:nth-child(2){animation-delay:.06s}.step:nth-child(3){animation-delay:.12s}.step:nth-child(4){animation-delay:.18s}.step:nth-child(5){animation-delay:.24s}}
@keyframes in{from{opacity:0;transform:translateY(4px)}}

/* comparison table */
.compare{width:100%;border-collapse:collapse;margin-top:28px}
.compare th{text-align:left;font:600 .88rem var(--body);color:var(--muted);padding:0 16px 12px 0;border-bottom:1.5px solid var(--ink)}
.compare td{padding:16px 16px 16px 0;border-bottom:1px solid var(--line);vertical-align:top}
.compare td:first-child{font-weight:600}
.compare .sub{color:var(--muted)}
.compare .price{font-weight:600;white-space:nowrap}
.compare small{display:block;font:400 .8rem var(--mono);color:var(--muted);margin-top:3px}
@media(max-width:699px){
  .compare thead{position:absolute;left:-9999px}
  .compare tr{display:block;padding:14px 0;border-bottom:1px solid var(--line)}
  .compare td{display:block;padding:2px 0;border:0}
  .compare:not(.costs) td.sub::before{content:"Instead of "}
  .compare .price{white-space:normal}
}
.foot-note{font-size:.88rem;color:var(--muted);margin-top:14px;max-width:70ch}

/* terms: prices + safety */
.terms{display:grid;gap:40px;background:var(--surface);border-radius:var(--r);padding:clamp(24px,5vw,56px)}
@media(min-width:860px){.terms{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:64px}}
.figures{list-style:none;margin:0;padding:0;display:grid;gap:18px}
.figures li{display:grid;grid-template-columns:7rem 1fr;align-items:baseline;gap:14px}
.figures b{font:700 2.3rem/1 var(--head);letter-spacing:-.03em;color:var(--accent-text);font-variant-numeric:tabular-nums}

/* setup rows */
.setup{margin-top:16px}
.row{display:grid;gap:8px 16px;padding:14px 0;border-top:1px solid var(--line);align-items:center}
@media(min-width:860px){.row{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr) auto}}
.row p{margin:0;color:var(--muted);font-size:.95rem}
.row code{background:var(--tint);padding:8px 12px;border-radius:8px;overflow-wrap:anywhere}

/* faq */
.qa{display:grid;gap:8px 56px;margin:28px 0 0}
@media(min-width:860px){.qa{grid-template-columns:1fr 1fr}}
.qa div{padding:18px 0;border-top:1px solid var(--line)}
.qa dt{font-weight:600;margin-bottom:6px}
.qa dd{margin:0;color:var(--muted)}

/* final */
.final{background:var(--accent-soft);border-radius:var(--r);padding:clamp(32px,6vw,72px) var(--gutter);text-align:center}
.final h2{max-width:26ch;margin-left:auto;margin-right:auto}
.final .actions{justify-content:center;margin-top:16px}
.final .cmd{margin-top:4px}

footer.site{padding:32px 0 48px;color:var(--muted);font-size:.92rem}
footer .foot{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:baseline;border-top:1px solid var(--line);padding-top:24px}
footer nav{display:flex;flex-wrap:wrap;gap:4px 18px}
footer .fine{flex-basis:100%;margin:8px 0 0;font-size:.85rem}

/* catalog page */
.page-head{padding:clamp(28px,6vw,64px) 0 8px}
.filters{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:20px 0}
.filters input,.filters select{min-height:46px;border:1.5px solid var(--line);border-radius:var(--r);padding:0 14px;font:1rem var(--body);background:var(--surface);color:var(--ink)}
.filters input{flex:1;min-width:200px}
.seg{display:inline-flex;gap:4px}
.seg button{min-height:42px;padding:0 14px;border:1.5px solid var(--line);border-radius:var(--pill);background:transparent;font:600 .92rem var(--body);cursor:pointer;color:var(--ink)}
.seg button[aria-pressed=true]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.cat-group{padding:28px 0 0}
.cat-group h2{font-size:1.5rem}
.cap-grid{display:grid;gap:10px}
@media(min-width:700px){.cap-grid{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.cap-grid{grid-template-columns:repeat(3,1fr)}}
.cap{background:var(--surface);border-radius:var(--r);padding:16px;display:flex;flex-direction:column;gap:6px}
.cap p{margin:0;color:var(--muted);font-size:.95rem;flex:1}
.cap-top{display:flex;justify-content:space-between;gap:8px;align-items:center}
.cap-price{font-weight:600}
.status{font-size:.82rem;font-weight:600;color:var(--muted)}
.status.live{color:var(--accent-text)}

/* pricing page */
.plans{display:grid;gap:20px;margin-top:28px}
@media(min-width:760px){.plans{grid-template-columns:1fr 1fr}}
.plan{padding:clamp(22px,3vw,32px);border-radius:var(--r);background:var(--surface);display:flex;flex-direction:column;gap:12px}
.plan.alt-plan{background:transparent;border:1.5px solid var(--line)}
.plan .btn{align-self:flex-start;margin-top:auto}
.price-big{font:700 2.6rem/1 var(--head);letter-spacing:-.03em}
.price-big small{font:500 1rem var(--body);color:var(--muted);letter-spacing:0}
.plan ul{margin:0;padding-left:1.1em;color:var(--muted)}
.plan li{margin-bottom:6px}

/* modal */
dialog{border:0;border-radius:var(--r);padding:0;max-width:440px;width:calc(100% - 32px);box-shadow:var(--shadow);color:var(--ink);background:var(--surface)}
dialog::backdrop{background:var(--backdrop)}
.dlg{padding:28px 24px;position:relative}
.dlg h2{font-size:1.6rem;padding-right:36px}
.x{position:absolute;right:8px;top:8px;min-width:44px;min-height:44px;border:0;background:none;color:var(--ink);font-size:1.5rem;cursor:pointer;border-radius:var(--r)}
.dlg label{display:block;font-weight:600;margin:14px 0 6px}
.dlg input,.dlg select{width:100%;min-height:48px;border:1.5px solid var(--muted);border-radius:var(--r);padding:0 14px;font:1rem var(--body);background:var(--bg);color:var(--ink)}
.dlg .btn{width:100%;margin-top:12px}
.dlg [hidden]{display:none}
.dlg .honeypot{position:absolute;width:1px;min-height:0;height:1px;padding:0;border:0;clip-path:inset(50%);overflow:hidden}
.preview-note{margin-top:14px;padding:10px 12px;border-radius:var(--r);background:var(--tint);font-size:.88rem;color:var(--muted)}

@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}