section.content { padding-block:91px; border-bottom:1px solid var(--line); }
.section-head { display:grid; grid-template-columns:1fr 1fr; gap:100px; align-items:center; margin-bottom:43px; }
.section-head p { font-size:15px; color:var(--muted); }
.section-index { display:block; font:10px var(--stoke-font-mono); color:var(--accent); text-transform:uppercase; letter-spacing:.15em; margin-bottom:18px; }
.features { display:grid; grid-template-columns:repeat(3,1fr); gap:30px; }
.feature { border-top:1px solid var(--line); padding-top:22px; }
.feature .number { display:block; color:var(--accent); font:11px var(--stoke-font-mono); margin-bottom:27px; }
.feature p { margin-top:13px; color:var(--muted); font-size:13px; max-width:300px; }
.flow { display:grid; grid-template-columns:minmax(0,1fr) 64px minmax(0,1fr) 64px minmax(0,1fr); align-items:center; gap:24px; padding:38px; border:1px solid var(--line); border-radius:8px; background:var(--soft); }
.flow-item { display:flex; justify-content:center; align-items:center; gap:15px; }
.flow-item img { width:40px; height:40px; }
.flow-item strong { display:block; font-size:15px; font-weight:550; }
.flow-item small { font-size:11px; color:var(--muted); }
.arrow { color:var(--accent); width:64px; height:24px; justify-self:center; }
details { padding:21px 0; border-top:1px solid var(--line); }
summary { cursor:pointer; font-size:15px; }
details p { color:var(--muted); font-size:13px; padding-top:14px; max-width:720px; }
.start { padding-block:74px; display:grid; grid-template-columns:1fr 1fr; gap:90px; align-items:center; }
.start p { color:var(--muted); font-size:14px; margin-top:16px; }
.install { background:var(--soft); border:1px solid var(--line); border-radius:7px; overflow:hidden; }
.install-head { display:flex; justify-content:space-between; align-items:center; padding:13px 18px; border-bottom:1px solid var(--line); font:10px var(--stoke-font-mono); }
.install button { font-size:10px; padding:5px 9px; border:1px solid var(--line); background:transparent; border-radius:3px; color:var(--ink); }
.install pre { margin:0; padding:24px 18px; font:11px/1.9 var(--stoke-font-mono); overflow:auto; }
@media(max-width:760px) {
 .shell { width:calc(100% - 36px); } .site-nav { padding-block:18px; }
 .hero { padding-top:55px; } .lead { font-size:15px; } .demo-stage { padding:14px; margin-top:38px; }
 .workspace { grid-template-columns:1fr; } .sidebar { display:none; } .preview { padding:18px 15px; }
 .terminal { padding:16px; font-size:11px; } .demo-controls .sample { width:100%; margin-top:6px; }
 .caption { font-size:8px; gap:15px; } section.content { padding-block:58px; }
 .section-head,.start { grid-template-columns:1fr; gap:24px; } .section-head { margin-bottom:28px; }
 .features { grid-template-columns:1fr; gap:26px; } .feature .number { margin-bottom:13px; } .feature p { max-width:none; }
 .flow { grid-template-columns:1fr; gap:17px; padding:24px; } .flow-item { justify-content:flex-start; width:100%; } .arrow { transform:rotate(90deg); width:44px; margin-block:10px; }
 .start { padding-block:52px; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } * { transition:none!important; } }

.preview,.install { min-width:0; }
.site-footer { background:var(--soft); border-top:1px solid var(--line); }
.footer-main { display:grid; grid-template-columns:1.4fr 2fr; gap:90px; padding-block:50px; }
.footer-brand .brand { width:fit-content; font-size:23px; }
.footer-brand p { color:var(--muted); font-size:13px; max-width:240px; margin-top:16px; }
.footer-links { display:grid; grid-template-columns:repeat(3,1fr); gap:32px; }
.footer-col h2 { font-size:10px; font-weight:650; text-transform:uppercase; letter-spacing:.12em; margin:3px 0 18px; }
.footer-col ul { list-style:none; padding:0; margin:0; }
.footer-col li + li { margin-top:12px; }
.footer-col a { font-size:12px; color:var(--muted); }
.footer-bottom { border-top:1px solid var(--line); padding-block:22px; display:flex; justify-content:space-between; gap:20px; color:var(--muted); font-size:10px; }
.footer-bottom div { display:flex; flex-wrap:wrap; gap:22px; }
@media(max-width:760px) {
 .site-nav { gap:12px; } .site-nav .brand { font-size:22px; gap:8px; } .site-nav .brand img { width:160px; height:52px; }
 .nav-right { gap:10px; } .nav-toggle { display:block; } .nav-cta { padding:10px 12px; font-size:11px; white-space:nowrap; }
 .nav-links { display:none; position:absolute; top:calc(100% - 1px); left:0; right:0; z-index:5; padding:16px; background:var(--paper); border:1px solid var(--line); border-radius:0 0 8px 8px; box-shadow:0 15px 25px #0000000a; }
 .nav-links[data-open="true"] { display:flex; flex-direction:column; align-items:stretch; gap:0; }
 .nav-links a { padding:13px 10px; }
 .footer-main { grid-template-columns:1fr; gap:35px; padding-block:35px; }
 .footer-links { gap:18px; } .footer-col a { font-size:11px; }
 .footer-bottom { flex-direction:column; gap:14px; }
}
@media(max-width:370px) { .nav-right > .nav-cta { display:none; } }

.toolkit { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:22px; margin-top:24px; color:var(--muted); font-size:12px; }
.toolkit > span { font-size:10px; text-transform:uppercase; letter-spacing:.1em; }
.toolkit a,.family-link { display:inline-flex; align-items:center; gap:7px; }
.toolkit img,.family-link img,.github-link img { object-fit:contain; flex-shrink:0; }

@media(max-width:420px) { .toolkit { gap:8px; } .tool-role { display:none; } .install-head { font-size:8px; } .preview-head { align-items:flex-start; gap:12px; } .status { flex-shrink:0; } }