/* SkillKitLab visual system, 24 October 2026.
   Shared accessible document and purchase components, followed by the current dark product theme.
   Canonical design decisions: project-root DESIGN.md. */
@font-face{font-family:"Balicek Sans";src:url("fonts/BalicekSans-Bold.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Balicek Sans Mono";src:url("fonts/BalicekSansMono.woff2") format("woff2");font-weight:400;font-display:swap}
:root{
  color-scheme:dark;
  --bg:#090c10;--bg-2:#1f2023;--bg-3:#26272b;--bg-code:#121315;
  --line:#34353a;--line-2:#4a4b51;--ctl:#7c7d84;
  --text:#ece6dc;--text-2:#c8c0b4;--muted:#a69e92;--code:#f0c4a8;
  --accent:#e07a55;--accent-2:#ec8f6c;--on-accent:#1a1208;
  --todo-bg:#3a2c18;--todo-text:#f1d9ae;--note-bg:#241d14;--danger:#b23a2a;
  --font:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --display:"Balicek Sans",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --mono:"Balicek Sans Mono",ui-monospace,"Cascadia Code",Consolas,monospace;
  --wrap:68rem;--narrow:46rem;--gutter:1.25rem;--r:2px;--t-fast:120ms;--t:200ms;--ease:cubic-bezier(.2,.7,.2,1)
}
@media (min-width:48rem){:root{--gutter:2rem}}

/* základ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:1rem;scroll-behavior:smooth;background:var(--bg)}
body{margin:0;font:1.0625rem/1.6 var(--font);color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent);text-underline-offset:.2em;text-decoration-thickness:1px;transition:color var(--t-fast) var(--ease)}
a:hover{color:var(--accent-2);text-decoration-thickness:2px}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
::selection{background:var(--accent);color:var(--on-accent)}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--accent);color:var(--on-accent);padding:.6rem 1rem;font-weight:700}
.skip:focus{left:.5rem;top:.5rem}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
h1,h2,h3{font-family:var(--display);font-weight:700;line-height:1.08;letter-spacing:-.02em;margin:0;text-wrap:balance;color:var(--text)}
h1{font-size:clamp(2.4rem,7.4vw,4.75rem);letter-spacing:-.035em}
h2{font-size:clamp(1.75rem,4.4vw,2.9rem);letter-spacing:-.03em}
h3{font-size:1.05rem;letter-spacing:-.01em}
p,li{max-width:66ch}
p{margin:.75rem 0}
strong{color:var(--text)}
code,.mono{font-family:var(--mono);font-size:.86em}
code{color:var(--code);background:var(--bg-3);border-radius:var(--r);padding:.05em .3em;overflow-wrap:anywhere}
pre{background:var(--bg-code);color:var(--text-2);border-radius:var(--r);padding:.85rem 1rem;overflow-x:auto;font:.8rem/1.6 var(--mono);margin:.75rem 0;max-width:100%}
pre code{background:none;padding:0;color:inherit;font-size:inherit}
.label{font:400 .74rem/1.4 var(--mono);text-transform:uppercase;letter-spacing:.12em;color:var(--muted);margin:0 0 .6rem}
.lead{font-size:clamp(1.15rem,2.3vw,1.45rem);line-height:1.45;color:var(--text-2);max-width:38ch}
.small{font-size:.9rem;color:var(--muted)}
.small strong{color:var(--text-2)}
.note{color:var(--text-2);margin:.5rem 0 0}
.todo{background:var(--todo-bg);color:var(--todo-text);border-bottom:1px dashed var(--todo-text);padding:0 .25em}

/* pruhy nad záhlavím */
.bar{margin:0;padding:.45rem var(--gutter);max-width:none;font-size:.82rem;line-height:1.45;text-align:center;background:var(--note-bg);color:var(--todo-text)}
.bar-demo{background:var(--danger);color:#fff;position:sticky;top:0;z-index:30;font-size:.88rem}
.bar-demo strong{color:#fff}
html:has(.bar-demo){scroll-padding-top:5.5rem}

/* záhlaví bez navigační lišty: značka a přepínač jazyka v toku stránky */
.top{background:transparent}
.top-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-top:.9rem;padding-bottom:.9rem}
.brand{display:flex;align-items:center;gap:.65rem;color:var(--text);text-decoration:none;font:700 1rem/1.15 var(--display)}
.brand:hover{color:var(--text)}
.brand small{display:block;font:400 .72rem/1.3 var(--font);color:var(--muted)}
.brand img{display:block;width:auto;height:1.75rem}
.lang{display:flex;border:1px solid var(--ctl);border-radius:var(--r)}
.lang a{display:inline-flex;align-items:center;justify-content:center;min-width:2.75rem;min-height:2.75rem;padding:0 .5rem;font:400 .78rem var(--mono);color:var(--text-2);text-decoration:none;transition:background-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease)}
.lang a+a{border-left:1px solid var(--ctl)}
.lang a[aria-current="true"]{background:var(--accent);color:var(--on-accent)}
.lang a:hover:not([aria-current]){background:var(--bg-3);color:var(--text)}
@media (max-width:30rem){.brand small{display:none}}

/* tlačítka */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:3rem;padding:.7rem 1.6rem;border:1px solid var(--accent);border-radius:var(--r);
  background:var(--accent);color:var(--on-accent);font:700 1rem/1.2 var(--font);text-decoration:none;cursor:pointer;touch-action:manipulation;
  transition:background-color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease),transform var(--t-fast) var(--ease)}
.btn:hover{background:var(--accent-2);border-color:var(--accent-2);color:var(--on-accent)}
.btn:active{transform:translateY(1px)}
.btn-line{background:transparent;color:var(--text);border-color:var(--ctl)}
.btn-line:hover{background:transparent;color:var(--accent-2);border-color:var(--accent-2)}
.btn-small{min-height:2.5rem;padding:.4rem .9rem;font-size:.9rem}
.btn-demo{background:var(--danger);border-color:var(--danger);color:#fff}
.btn-demo:hover{background:#c6442f;border-color:#c6442f;color:#fff}
.actions{display:flex;flex-wrap:wrap;justify-content:center;gap:.75rem 1rem;margin:2rem 0 0;max-width:none}

/* úvod */
.hero{padding:clamp(3rem,10vw,7rem) 0 clamp(2rem,6vw,3.5rem);text-align:center}
.hero h1,.hero .lead{margin-left:auto;margin-right:auto}
.hero h1{max-width:14ch}
.hero .lead{margin-top:1.1rem}
.eyebrow{margin:0 0 1rem;font-size:.95rem;font-weight:600;color:var(--accent);max-width:none}

/* produktový vizuál: skutečné exporty na jedné ploše */
.showcase{padding:0 0 clamp(3rem,8vw,6rem)}
.stage{display:grid;gap:.75rem;padding:clamp(.75rem,3vw,2.5rem);background:var(--bg-2);border-radius:var(--r)}
.stage img{width:100%;border-radius:var(--r)}
.stage-post{display:none}
@media (min-width:48rem){.stage{grid-template-columns:minmax(0,1fr) minmax(0,2fr);align-items:start;gap:1rem}
  .stage-post{display:block;grid-row:span 2;align-self:stretch;height:100%;object-fit:cover;object-position:top}}
.caption{margin:.6rem auto 0;text-align:center;font-size:.86rem;color:var(--muted);max-width:60ch}
/* přepínač ukázek Web / Grafika: nativní přepínače (šipky na klávesnici), bez JavaScriptu; bez :has se zobrazí obě ukázky */
.switch{display:flex;justify-content:center;margin:0 auto 1.25rem;padding:0;border:0;min-width:0}
.switch input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.switch label{display:inline-flex;align-items:center;justify-content:center;min-width:7.5rem;min-height:2.75rem;padding:.5rem 1.25rem;border:1px solid var(--ctl);
  color:var(--text-2);font-weight:600;cursor:pointer;transition:background-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease)}
.switch label:first-of-type{border-radius:var(--r) 0 0 var(--r)}
.switch label:last-of-type{border-radius:0 var(--r) var(--r) 0;margin-left:-1px}
.switch label:hover{color:var(--text)}
.switch input:checked+label{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.switch input:focus-visible+label{outline:2px solid var(--accent);outline-offset:3px;position:relative;z-index:1}
.sample{display:none}
.showcase:has(#ukazka-web:checked) .sample-web,.showcase:has(#ukazka-grafika:checked) .sample-grafika{display:block;animation:reveal var(--t) var(--ease)}
@supports not selector(:has(*)){.sample{display:block}.sample+.sample{margin-top:2.5rem}.switch{display:none}}
.stage-web .shot-mobile{display:none}
@media (min-width:48rem){.stage.stage-web{grid-template-columns:minmax(0,3.56fr) minmax(0,1fr);align-items:start}.stage-web .shot-mobile{display:block}}
.benefit{margin:1.25rem auto 0;text-align:center;font-size:clamp(1.05rem,2vw,1.25rem);line-height:1.45;color:var(--text);max-width:46ch}
.benefit code{font-size:.8em}
.showcase .more{max-width:var(--narrow);margin:1.25rem auto 0}

/* sekce */
.sec{padding:clamp(2rem,5vw,3.5rem) 0}
/* sekce hlavní stránky (mají aria-labelledby): větší odstupy a nadpis na střed; podstránky zůstávají zarovnané vlevo */
.sec[aria-labelledby]{padding:clamp(2.75rem,7vw,5rem) 0}
.sec[aria-labelledby]>.wrap>h2{text-align:center;margin-bottom:clamp(1.5rem,4vw,2.5rem)}
.sec[aria-labelledby]>.wrap>.note{text-align:center;margin:1.25rem auto 0}

/* obsah balíčku: tři čísla */
.stats{list-style:none;margin:0 auto;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;max-width:52rem;text-align:center}
.stats li{display:grid;gap:.15rem;max-width:none;align-content:start}
.stats .big{font:700 clamp(2.6rem,9vw,4.5rem)/1 var(--display);letter-spacing:-.04em;color:var(--text)}
.stats li>span:nth-child(2){font-weight:600;color:var(--text);margin-top:.35rem}
.stats .small{font-size:.86rem}

/* rozbalovací podrobnosti */
.details-list{max-width:var(--narrow);margin:clamp(2rem,5vw,3rem) auto 0}
details{border-bottom:1px solid var(--line)}
.details-list>details:first-child,details.more{border-top:1px solid var(--line)}
summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.9rem 0;min-height:3rem;font-weight:600;color:var(--text);transition:color var(--t-fast) var(--ease)}
summary:hover{color:var(--accent-2)}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font:400 1.25rem/1 var(--mono);color:var(--accent);flex:none;transition:transform var(--t) var(--ease)}
details[open]>summary::after{transform:rotate(45deg)}
.more-body{padding:0 0 1.25rem}
details[open]>.more-body,details[open]>.buy-body{animation:reveal var(--t) var(--ease)}
@keyframes reveal{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.more-body>:first-child{margin-top:0}
.prompt{white-space:pre-wrap;overflow-wrap:anywhere;color:var(--text);border-left:2px solid var(--accent)}
.numbered{list-style:none;margin:.75rem 0;padding:0;counter-reset:n}
.numbered>li{counter-increment:n;position:relative;padding:.35rem 0 .35rem 2rem;max-width:none;color:var(--text-2);font-size:.95rem}
.numbered>li::before{content:counter(n,decimal-leading-zero);position:absolute;left:0;top:.5rem;font:400 .74rem var(--mono);color:var(--accent)}
.numbered pre{white-space:pre-wrap;overflow-wrap:anywhere}
.tree-list{list-style:none;margin:0 0 .5rem;padding:0}
.tree-list li{display:grid;grid-template-columns:minmax(7.25rem,auto) 1fr;gap:.75rem;padding:.3rem 0;font-size:.9rem;max-width:none;color:var(--text-2)}
.tree-list code{background:none;padding:0;font-size:.82rem}

/* tabulky */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r)}
table{border-collapse:collapse;width:100%;font-size:.9rem}
th,td{text-align:left;padding:.55rem .8rem;border-top:1px solid var(--line);vertical-align:top;color:var(--text-2)}
thead th{border-top:0;background:var(--bg-3);font:400 .72rem/1.3 var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--text-2)}
td code{white-space:nowrap}
.figure-plain{margin:1rem 0 0}
.figure-plain figcaption{font-size:.84rem;color:var(--muted);margin-top:.5rem}

/* cena a nákupní krok */
.buy{text-align:center}
.buy>.wrap>p{margin-left:auto;margin-right:auto}
.price{font:700 clamp(2.2rem,6vw,3.5rem)/1 var(--display);letter-spacing:-.03em;margin:0 0 .5rem}
.price-pending{font-size:1.1rem;color:var(--text-2);margin:0}
.buy-step{border:0;margin:1.75rem 0 0;text-align:left}
.buy-step>summary{display:flex;justify-content:center;width:fit-content;max-width:100%;margin:0 auto;padding:.7rem 1.6rem;min-height:3rem;border:1px solid var(--accent);border-radius:var(--r);
  background:var(--accent);color:var(--on-accent);font-weight:700;transition:background-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease)}
.buy-step>summary:hover{background:var(--accent-2);border-color:var(--accent-2);color:var(--on-accent)}
.buy-step>summary::after{content:none}
.buy-step[open]>summary{background:transparent;color:var(--text);border-color:var(--ctl)}
.buy-step[open]>summary:hover{color:var(--accent-2);border-color:var(--accent-2)}
.buy-step .when-open,.buy-step[open] .when-closed{display:none}
.buy-step[open] .when-open{display:inline}
.buy-body{margin-top:1.75rem;padding:clamp(1rem,3vw,2rem);background:var(--bg-2);border-radius:var(--r)}
.buy-body>.notice:first-child{margin-top:0}
.close-row{margin:1.5rem 0 0;text-align:center;max-width:none}
.order{display:grid;gap:2rem}
@media (min-width:60rem){.order{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:2.5rem}}
.summary h3{margin:0 0 .75rem}
.summary dl{display:grid;grid-template-columns:minmax(7rem,auto) 1fr;margin:0;border-top:1px solid var(--line)}
.summary dt,.summary dd{margin:0;padding:.55rem 0;border-bottom:1px solid var(--line)}
.summary dd{color:var(--text)}
.summary dt{font:400 .74rem/1.75 var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--muted);padding-right:1rem}
@media (max-width:30rem){.summary dl{grid-template-columns:5.75rem minmax(0,1fr);font-size:.94rem}.summary dt{padding-right:.6rem;font-size:.68rem}}
.choice{border:0;padding:0;margin:0 0 1rem;min-width:0}
.choice legend{font:700 1.05rem var(--display);margin-bottom:.6rem;padding:0;color:var(--text)}
.choice-grid{display:grid;gap:0;border:1px solid var(--line-2);border-radius:var(--r)}
.choice-option{display:block;position:relative;padding:1rem 1rem 1rem 2.9rem;cursor:pointer;min-width:0;transition:background-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease)}
.choice-option+.choice-option{border-top:1px solid var(--line-2)}
.choice-option:hover{background:var(--bg-3)}
.choice-option input{position:absolute;left:1rem;top:1.15rem;width:1.15rem;height:1.15rem;accent-color:var(--accent);margin:0}
.choice-option:has(input:checked){background:var(--bg-3);box-shadow:inset 3px 0 0 var(--accent)}
.choice-option:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:-2px}
.choice-option strong{color:var(--text)}
.choice-option span{display:block;color:var(--text-2);font-size:.93rem;margin-top:.2rem}
.consent-text{display:block;font-size:.88rem;border-left:2px solid var(--accent);padding:.4rem .75rem;margin:.6rem 0 0;background:var(--bg)}
.form-panel{display:none}
.order-form:has(#volba-okamzite:checked) .panel-okamzite,.order-form:has(#volba-odlozene:checked) .panel-odlozene{display:block}
.form-panel.is-only{display:block}
.foot-pay{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center;margin:.6rem 0}
.foot-pay img{height:24px;width:auto}
.choice-legend{font:700 1.05rem var(--display);margin:0 0 .6rem;color:var(--text)}
.choice-option.is-single{padding-left:1rem;cursor:default}
.choice-option.is-single:hover{background:none}
@supports not selector(:has(*)){.form-panel{display:block}}
.form-panel h3{margin:0 0 .75rem}
.placeholder{border:1px dashed var(--ctl);border-radius:var(--r);padding:1.1rem;font-size:.93rem;color:var(--text-2)}
.placeholder p:first-child{margin-top:0}
.demo-box{border:2px solid var(--danger);padding:1.1rem;margin-bottom:1rem}
.demo-box p:first-child{margin-top:0}
.notice{border-left:2px solid var(--accent);padding:.75rem 1rem;background:var(--bg);margin:1rem 0;color:var(--text-2)}
.notice strong{display:block;color:var(--text)}
.inline-list{list-style:none;padding:0;margin:.5rem 0;display:flex;flex-wrap:wrap;gap:.4rem}
.inline-list li{border:1px solid var(--line-2);padding:.25rem .6rem;font-size:.86rem}
.steps-mini{list-style:none;padding:0;margin:0 0 1rem;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,8.5rem),1fr));border-top:1px solid var(--line);border-left:1px solid var(--line);counter-reset:k}
.steps-mini li{counter-increment:k;border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:.6rem .7rem;font-size:.84rem;max-width:none;color:var(--text-2)}
.steps-mini li::before{content:counter(k,decimal-leading-zero);display:block;font:400 .72rem var(--mono);color:var(--accent)}

/* dokumenty a podstránky */
.doc>*{max-width:46rem}
.doc>.table-wrap,.doc>pre{max-width:46rem}
.doc h1{margin-bottom:.5rem;font-size:clamp(2rem,5vw,3rem)}
.doc h2{font-size:1.2rem;letter-spacing:-.01em;margin:2rem 0 .25rem;padding-top:1rem;border-top:1px solid var(--line)}
.doc li{margin:.3rem 0;color:var(--text-2)}
.doc p{color:var(--text-2)}
.doc li>strong:first-child{display:block;color:var(--text)}
.doc details{max-width:46rem}
.doc-meta{font:400 .78rem var(--mono);color:var(--muted);margin:.5rem 0 1.5rem}
.page-head{padding:clamp(2rem,5vw,3.5rem) 0 0}
.back{font:400 .84rem var(--mono)}
.root-choice{padding:4rem var(--gutter);max-width:40rem}
.root-choice h1{font-size:1.75rem;margin-bottom:1.5rem}
.sec-head{display:grid;gap:.15rem;margin-bottom:1.5rem}
.wash{background:var(--bg-2)}
.shots{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
.shots figure{margin:0;background:var(--bg);padding:1rem;min-width:0}

/* malá patička */
.foot{border-top:1px solid var(--line);padding:1.75rem 0 1.5rem;font-size:.84rem;color:var(--muted)}
.foot-links ul{list-style:none;margin:0 0 1rem;padding:0;display:flex;flex-wrap:wrap;gap:.25rem 1.25rem}
.foot-links li{max-width:none}
.foot-links a{display:inline-block;padding:.35rem 0;color:var(--text-2);text-decoration:none}
.foot-links a:hover{color:var(--accent-2);text-decoration:underline}
.foot p{margin:0 0 .4rem;max-width:80ch}
.foot strong{color:var(--text-2)}
.foot-meta{font:400 .72rem var(--mono);margin-top:.9rem!important}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}}
@media print{body{background:#fff;color:#000}.top,.foot,.actions,.skip,.bar{display:none}}


/* DESIGN-20261024: dark product interface and focused demonstrations. */
:root{--bg:#0a0e13;--bg-2:#111720;--bg-3:#1b2430;--bg-code:#0b1017;--text:#f1f3f5;--text-2:#c4ccd6;--muted:#a0adbd;--accent:#ee9a78;--accent-2:#ffb496;--on-accent:#20120b;--line:#293340;--line-2:#48576b;--ctl:#69798f;--code:#ffc1a8;--font:Arial,Helvetica,sans-serif;--display:Arial,Helvetica,sans-serif;--r:5px;--wrap:1120px;--narrow:760px;--gutter:clamp(1.25rem,4vw,2rem)}
body{font-family:var(--font);font-size:16px;background:var(--bg);color:var(--text)}
h1,h2,h3{font-family:var(--display);letter-spacing:-.045em}
h1 em,h2 em{font-style:normal;color:var(--accent)}
.wrap{max-width:var(--wrap);margin-inline:auto}
.bar{background:#111720;color:#bcc7d5;font-size:.75rem;padding:.42rem 1rem;border-bottom:1px solid var(--line)}
.bar-demo{background:#9b281d;color:#fff;font-size:.88rem}
.top-row{padding-top:1.2rem;padding-bottom:1.2rem}
.brand img{height:1.45rem;width:auto}
.lang{border-color:var(--line);border-radius:4px}
.lang a{min-height:2.75rem;min-width:2.6rem;font-size:.7rem}
.lang a+a{border-color:var(--line)}
.lang a[aria-current="true"]{color:var(--accent);background:#231a18}
.btn{font-size:.94rem;gap:1.2rem;padding:.82rem 1.25rem;border-radius:4px;min-height:3.15rem}
.btn span[aria-hidden]{font-size:1.25rem;margin-left:auto}
.hero{padding:4.5rem 0 5.5rem;text-align:left;position:relative}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:center;gap:3.5rem}
.hero h1{font-size:clamp(2.6rem,4.4vw,4rem);font-weight:700;line-height:1.025;letter-spacing:-.055em;max-width:none;margin:0}
.hero .lead{font-size:1.06rem;line-height:1.65;max-width:34ch;color:var(--text-2);margin:1.3rem 0 0}
.eyebrow,.section-kicker{font:400 .64rem/1.5 var(--mono);letter-spacing:.14em;color:var(--muted);margin:0 0 1.1rem;max-width:none}
.eyebrow{display:flex;align-items:center;gap:.65rem}
.live-dot{width:6px;height:6px;background:var(--accent);display:inline-block;flex:none;border-radius:50%}
.hero .actions{justify-content:flex-start;margin:1.65rem 0 0}
.hero-price{margin:.9rem 0 0;font-size:.9rem;font-weight:700;color:var(--text)}
.hero-price span{font-size:.8rem;font-weight:400;color:var(--muted)}
.hero-language{font-size:.74rem;color:var(--muted);margin:.55rem 0 0}
.workspace{min-width:0;position:relative;border:1px solid #3a424b;border-radius:7px;background:#10161f;box-shadow:0 18px 75px #0006}
.workspace:before{content:"";position:absolute;inset:-22px;z-index:-1;border:1px solid #19222c;border-radius:12px}
.workspace-top{display:flex;align-items:center;justify-content:space-between;gap:.7rem;padding:1rem;border-bottom:1px solid var(--line);font:.57rem var(--mono);letter-spacing:.07em;color:var(--muted)}
.window-dots{display:flex;gap:4px}.window-dots i{width:5px;height:5px;border-radius:50%;background:#546071}.window-dots i:first-child{background:var(--accent)}
.workspace-plus{font-size:1rem}
.workflow-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-bottom:1px solid var(--line);gap:0;padding:0 .6rem}
.workflow-tabs button{appearance:none;border:0;border-bottom:2px solid transparent;background:transparent;color:var(--muted);font:.74rem var(--font);cursor:pointer;min-height:3.2rem;padding:.6rem .3rem;display:flex;align-items:center;justify-content:center;gap:.4rem}
.workflow-tabs button span{font:.56rem var(--mono)}
.workflow-tabs button[aria-selected="true"]{color:var(--text);border-color:var(--accent)}
.workflow-tabs button[aria-selected="true"] span{color:var(--accent)}
.workspace-screen{min-height:262px;padding:1.5rem 1.3rem}
.command-line{font:400 .85rem var(--mono);display:flex;gap:.55rem;align-items:center;color:var(--accent)}
.command-line code{background:transparent;padding:0;color:var(--text);font-size:inherit}
.terminal-question{color:var(--muted);font-size:.82rem;line-height:1.5;margin:.8rem 0 1.4rem}
.workspace-result{display:flex;align-items:center;gap:.75rem;padding:1rem .85rem;border:1px solid #394250;background:#171f2b;border-radius:4px}
.result-icon{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;border:1px solid #6e493a;color:var(--accent);background:#30221d;font:.7rem var(--mono)}
.file-label{font:.55rem var(--mono);color:var(--muted);letter-spacing:.12em;display:block;margin-bottom:.3rem}
.workspace-result strong{font-size:.85rem;letter-spacing:-.01em}
.result-check{color:var(--accent);margin-left:auto;font-size:1.4rem}
.workflow-checks{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:.6rem 1rem;margin:1rem 0 0}
.workflow-checks li{display:flex;align-items:center;gap:.4rem;font-size:.61rem;color:var(--muted)}
.workflow-checks li span{color:var(--accent)}
.workspace-bottom{display:flex;align-items:center;gap:.55rem;border-top:1px solid var(--line);padding:.8rem 1rem;font:.61rem var(--mono);color:var(--text-2)}
.workspace-bottom>span:last-child{margin-left:auto;color:var(--muted)}
.workspace-disclaimer{position:absolute;left:0;right:0;bottom:-2.25rem;text-align:center;margin:0;color:var(--muted);font-size:.65rem;max-width:none}
.section-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;margin-bottom:1.75rem}
.section-heading h2,.content-heading h2,.buy h2{font-size:clamp(2rem,3.6vw,3rem);line-height:1.08;margin:0;max-width:none}
.section-heading .section-kicker,.content-heading .section-kicker{margin-bottom:.75rem}
.showcase{padding:1.5rem 0 4.25rem}
.switch{margin:0;padding:0;justify-content:flex-start;flex:none}
.switch label{min-width:5rem;font-size:.8rem;min-height:2.75rem;padding:.5rem 1rem;border-color:var(--line-2)}
.switch input:checked+label{background:var(--bg-3);color:var(--accent);border-color:var(--accent)}
.pattern-stage{padding:2.5rem;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1fr);gap:3rem;align-items:center;background:#10161f;border:1px solid var(--line);border-radius:6px}
.pattern-side h3{font-size:clamp(1.5rem,2.7vw,2.1rem);line-height:1.15;max-width:14ch;margin:0}
.pattern-side>p{margin-top:1.5rem;font-size:.7rem}.pattern-side code{background:none;color:var(--accent);padding:0}
.pattern-code{margin-top:1.5rem;display:flex;flex-wrap:wrap;gap:.35rem;align-items:center;font:.57rem var(--mono);color:var(--muted)}
.pattern-code b{font-weight:400;color:var(--accent)}
.pattern-code span{border:1px solid var(--line-2);border-radius:3px;padding:.4rem}
.pattern-demo{position:relative;min-width:0;border:1px solid #3c485a;border-radius:6px;background:#161d28;box-shadow:0 16px 40px #0004;padding:1.15rem}
.demo-header{display:flex;justify-content:space-between;align-items:center;gap:.75rem;margin-bottom:.9rem;color:var(--muted);font:.59rem var(--mono);letter-spacing:.1em}
.demo-reset{appearance:none;display:grid;place-items:center;border:1px solid var(--line-2);border-radius:3px;min-width:2.75rem;min-height:2.75rem;color:var(--text-2);background:#111720;font-size:1.25rem;cursor:pointer}
.demo-reset:hover{border-color:var(--accent);color:var(--accent)}
.demo-fields{display:grid;gap:.8rem}
.demo-fields label{display:block;font-size:.74rem;color:var(--text-2);line-height:1.4}
.demo-fields input,.demo-fields textarea{display:block;width:100%;max-width:100%;margin:.35rem 0 0;appearance:none;resize:vertical;background:#0c121b;color:var(--text);border:1px solid var(--ctl);border-radius:3px;padding:.65rem .75rem;font:.84rem/1.45 var(--font);min-height:2.8rem}
.demo-fields input:focus-visible,.demo-fields textarea:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.demo-feedback{min-height:2.5rem;margin:.85rem 0 .6rem;font-size:.72rem;line-height:1.5;color:var(--muted)}
.demo-submit{width:100%;min-height:2.9rem;font-size:.8rem;justify-content:center;padding:.65rem .85rem}
.demo-submit .demo-button-arrow{margin-left:auto}
.demo-submit[aria-disabled="true"]{opacity:1;background:#303a49;border-color:#69798f;color:#e2e8ef;cursor:wait}
.demo-local{margin:.7rem 0 0;font:.57rem/1.5 var(--mono);text-align:center;color:var(--muted);max-width:none}
.pattern-demo[data-state="error"] .demo-feedback{color:#ffb7a9}
.pattern-demo[data-state="success"] .demo-feedback{color:#a6ddba}
.demo-spinner{display:none;width:14px;height:14px;border:2px solid #8491a3;border-top-color:#fff;border-radius:50%;animation:demo-spin .7s linear infinite}
.pattern-demo[data-state="sending"] .demo-spinner{display:block}
@keyframes demo-spin{to{transform:rotate(360deg)}}
.benefit{margin:1rem 0 0;text-align:left;font-size:.91rem;line-height:1.55;max-width:75ch;color:var(--text-2)}
.caption{margin:.4rem 0 0;text-align:left;font-size:.72rem;line-height:1.6;max-width:85ch}
.showcase .more{max-width:none;margin-top:1rem;font-size:.82rem}
.showcase .more summary{font-size:.8rem}
.showcase .more-body{font-size:.8rem}
.stage{padding:1rem;border:1px solid var(--line);background:#10161f;border-radius:6px}
.sec[aria-labelledby]{padding:3.25rem 0}
.content-section{border-top:1px solid var(--line)}
.content-heading{max-width:38rem;margin-bottom:1.75rem}
.content-heading>p:last-child{font-size:.94rem;line-height:1.6;color:var(--muted);max-width:45ch}
.categories{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.categories li{display:flex;align-items:center;gap:1rem;max-width:none;padding:1.4rem 1rem 1.4rem 0;min-width:0}
.categories li+li{padding-left:1.5rem;border-left:1px solid var(--line)}
.category-number{font:400 2.5rem/1 var(--mono);letter-spacing:-.1em;color:var(--accent)}
.categories h3{font-size:1rem;letter-spacing:-.02em;margin:0}
.categories p{font-size:.8rem;line-height:1.5;color:var(--muted);margin:.35rem 0 0}
.category-arrow{color:var(--accent);margin-left:auto;font-size:1.25rem}
.details-list{max-width:none;margin-top:1rem}
summary{font-size:.9rem;min-height:3.2rem}
.more-body{font-size:.9rem;color:var(--text-2)}
.buy>.wrap{border:1px solid #515057;background:#111720;padding:2.75rem;border-radius:6px;max-width:1056px}
.buy>.wrap>h2{margin:0 0 1rem;text-align:center}
.buy .section-kicker{color:var(--accent);text-align:center}
.offer-note{font-size:.78rem;color:var(--muted);margin:.75rem auto 1.5rem}
.buy .price-pending{font:700 2.75rem/1.1 var(--display);letter-spacing:-.045em;color:var(--text);margin-top:1.5rem}
.buy>.wrap>.note{font-size:.76rem;margin-top:.65rem;color:var(--muted)}
.buy-step{margin-top:1.35rem}
.buy-step>summary{font-size:.88rem;min-height:3.1rem;border-radius:4px}
.buy-body{background:#0a0e13;border:1px solid var(--line);padding:1.5rem}
.summary dt{font-family:var(--font);text-transform:none;letter-spacing:0;font-size:.8rem}
.summary dd{font-size:.85rem}
.choice-option span{font-size:.82rem}
.consent-text{font-size:.79rem!important}
.placeholder{font-size:.84rem}
#faq>.wrap>h2{text-align:left;margin-bottom:1.5rem;font-size:2rem}
.foot{margin-top:1rem;padding-top:1.5rem;font-size:.71rem;line-height:1.65}
.foot-links a{font-size:.73rem;padding:.5rem 0}
.foot-links ul{gap:0 1.1rem;margin-bottom:1rem}
.foot p{max-width:115ch}
.foot-meta{font-size:.64rem}
.doc h1{letter-spacing:-.04em}
@media(min-width:1400px){.hero{padding-top:5.5rem;padding-bottom:6.5rem}}
@media(max-width:860px){.hero-grid{gap:2rem;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.hero h1{font-size:3.2rem}.workspace-screen{padding:1.25rem 1rem}.workflow-tabs button{font-size:.67rem}.workflow-tabs button span{display:none}.pattern-stage{padding:1.5rem;gap:1.5rem}.pattern-side h3{font-size:1.7rem}}
@media(max-width:640px){
 .top-row{padding-top:.8rem;padding-bottom:.8rem}.brand img{height:1.3rem}.bar{font-size:.64rem;line-height:1.4}
 .hero{padding:1.8rem 0 2.5rem}.hero-grid{grid-template-columns:1fr;gap:1.8rem}
 .hero h1{font-size:clamp(2.35rem,10.5vw,3.5rem);line-height:1.04}.hero .lead{font-size:.95rem;line-height:1.55;max-width:34ch;margin-top:1rem}
 .eyebrow{font-size:.56rem;margin-bottom:.85rem}.hero .actions{margin-top:1.2rem}.hero .btn{min-height:3.1rem;font-size:.88rem}.hero-price{font-size:.8rem;margin-top:.65rem}.hero-language{font-size:.68rem;margin-top:.4rem}
 .workspace{margin:0 .25rem}.workspace:before{inset:-10px;border-radius:8px}.workspace-top{padding:.7rem .8rem;font-size:.5rem}.workflow-tabs button{min-height:2.75rem;font-size:.68rem}.workflow-tabs button span{display:inline;font-size:.5rem}
 .workspace-screen{min-height:190px;padding:1.1rem .9rem}.command-line{font-size:.75rem}.terminal-question{font-size:.74rem;margin:.65rem 0 .9rem}.workspace-result{padding:.7rem}.workspace-result strong{font-size:.76rem}.file-label{font-size:.49rem}.workflow-checks{gap:.4rem .6rem;margin-top:.85rem}.workflow-checks li{font-size:.53rem}.workspace-bottom{font-size:.52rem;padding:.65rem .8rem}.workspace-disclaimer{font-size:.57rem;bottom:-1.6rem}
 .showcase{padding:1.5rem 0 2rem}.section-heading{align-items:flex-start;gap:1rem;margin-bottom:1.2rem;display:block}.section-heading h2,.content-heading h2,.buy h2{font-size:2rem;line-height:1.08}.section-kicker{font-size:.55rem;margin-bottom:.65rem}.section-heading .switch{margin-top:1rem}
 .switch label{min-height:2.75rem;min-width:5.5rem;padding:.5rem .8rem;font-size:.75rem}
 .pattern-stage{display:block;padding:.8rem}.pattern-side{display:none}.pattern-demo{padding:.9rem}.demo-header{margin-bottom:.6rem;font-size:.53rem}.demo-reset{min-height:2.75rem;min-width:2.75rem}.demo-fields{gap:.65rem}.demo-fields label{font-size:.72rem}.demo-fields input,.demo-fields textarea{font-size:.8rem;padding:.6rem}.demo-feedback{font-size:.68rem;min-height:2.1rem;margin:.7rem 0 .5rem}.demo-submit{font-size:.76rem;min-height:2.9rem}.demo-local{font-size:.52rem;margin-top:.55rem}
 .benefit{font-size:.81rem;line-height:1.5}.caption{font-size:.65rem;line-height:1.5}.showcase .more{margin-top:.75rem}.showcase .more summary{font-size:.75rem}
 .sec[aria-labelledby]{padding:1.75rem 0}.content-heading{margin-bottom:1rem}.content-heading>p:last-child{font-size:.83rem;line-height:1.55;margin:.85rem 0 0}
 .categories{grid-template-columns:1fr}.categories li{padding:1rem 0}.categories li+li{padding-left:0;border-left:0;border-top:1px solid var(--line)}.category-number{font-size:2rem}.categories h3{font-size:.9rem}.categories p{font-size:.73rem;margin-top:.25rem}.categories .category-arrow{font-size:1.1rem}
 .details-list{margin-top:.65rem}summary{font-size:.8rem;min-height:3rem;padding:.8rem 0}.buy{padding-left:var(--gutter)!important;padding-right:var(--gutter)!important}.buy>.wrap{padding:1.7rem 1rem}.buy .price-pending{font-size:2.4rem;margin-top:1.2rem}.offer-note{font-size:.68rem;line-height:1.65;margin:.75rem auto 1rem}.buy-step>summary{font-size:.8rem;padding:.7rem 1rem}.buy-body{padding:1rem .75rem;margin-top:1rem}.buy-body .summary dl{grid-template-columns:5.2rem minmax(0,1fr)}.summary dt,.summary dd{font-size:.75rem}.summary dt{padding-right:.6rem}.choice-option{padding-left:2.4rem;padding-right:.7rem}.choice-option input{left:.7rem}.choice-option span{font-size:.78rem}.consent-text{font-size:.75rem!important;padding:.4rem .5rem}.choice legend{font-size:.95rem}#faq>.wrap>h2{font-size:1.6rem;margin-bottom:.75rem}
 .foot{font-size:.65rem;margin-top:.5rem;padding-top:1.1rem}.foot-links ul{gap:0 .85rem}.foot-links a{font-size:.67rem}.foot-meta{font-size:.58rem}
}
@media(prefers-reduced-motion:reduce){.demo-spinner{animation:none!important}.workspace,.pattern-demo{scroll-behavior:auto}}

/* Primary sample is the bundled site; the hand-built form demo opens on request. */
.stage.stage-web{grid-template-columns:minmax(0,3.56fr) minmax(0,1fr);align-items:start}
.stage-web .shot-desktop,.stage-web .shot-mobile{display:block;max-height:none}
.form-example .more-body{padding-top:.9rem}
.demo-benefit{margin:1rem 0 0;font-size:.9rem;line-height:1.55;color:var(--text-2);max-width:75ch}
.demo-caption{margin:.4rem 0 0;font-size:.72rem;line-height:1.6;color:var(--muted);max-width:85ch}
@media(max-width:640px){.stage.stage-web{padding:.8rem}.demo-benefit{font-size:.81rem}.demo-caption{font-size:.65rem}}