/* ==========================================================================
   MainSDK — marketing site layout (site/index.html, site/404.html). Tokens only.
   Ported from the approved canvas board designs/canvas/Landing.dc.html.
   The parts every surface shares (lockup, header and footer, buttons, links, .code, .cmd, .copy, .seg,
   .chip, utilities) live in components.css; this file is page layout and landing-only sections.
   Motion: JS sets state classes, CSS transitions animate them. Hidden start states hang off html.site-anim,
   which site.js adds only when the motion.css gate is open, so reduced motion, ?static=1 and no JavaScript
   all render the complete static design.
   ========================================================================== */

/* ---------- Page frame ---------- */
body[data-shell="none"]{overflow-x:hidden}
.site-main{display:block}
.kicker{font:400 var(--t-sm)/1.4 var(--mono);color:var(--muted)}
.sec-intro{display:flex;flex-direction:column;gap:var(--s3);max-width:720px}
.sec-h{font:600 clamp(var(--t-2xl),4vw,var(--t-3xl))/1.08 var(--font-display);letter-spacing:-.02em;text-wrap:balance}

/* ---------- Splash: the chevron draws, the cursor blinks, then it fades (pure CSS, safe without JS) ---------- */
.splash{position:fixed;inset:0;z-index:50;display:grid;place-items:center;background:var(--bg);pointer-events:none}
.splash-mark{width:76px;height:76px}
html:not([data-motion="reduced"]):not(.static) .splash{animation:splash-out .42s var(--ease) 1.5s forwards}
html:not([data-motion="reduced"]):not(.static) .splash .chev{animation:splash-draw .5s var(--ease) both}
html:not([data-motion="reduced"]):not(.static) .splash .cur{animation:splash-cur 1.5s steps(1) both}
@keyframes splash-draw{from{stroke-dashoffset:40}}
@keyframes splash-cur{0%,33%{opacity:0}34%,44%{opacity:1}45%,55%{opacity:0}56%,100%{opacity:1}}
@keyframes splash-out{to{opacity:0;visibility:hidden}}
html[data-motion="reduced"] .splash,html.static .splash{display:none}
@media (prefers-reduced-motion:reduce){.splash{display:none}}

/* ---------- Hero ---------- */
.hero{max-width:var(--content);margin:0 auto;padding:var(--s9) var(--s6);display:flex;flex-wrap:wrap;gap:var(--s9);align-items:center}
.hero-copy{flex:1 1 460px;min-width:0;display:flex;flex-direction:column;gap:var(--s6)}
.pill{align-self:flex-start;font:400 var(--t-sm)/1.2 var(--mono);padding:6px var(--s3);border:1px solid var(--line);border-radius:var(--pill);color:var(--muted)}
.hero-h{font:600 clamp(var(--t-3xl),6vw,var(--t-5xl))/1.02 var(--font-display);letter-spacing:-.03em}
.hero-lede{font-size:var(--t-lg);line-height:1.55;color:var(--muted);max-width:520px}
.install{display:flex;flex-direction:column;gap:var(--s3);max-width:460px}
.install .seg{align-self:flex-start}
.cta-row{display:flex;gap:var(--s4);align-items:center;flex-wrap:wrap;font-size:var(--t-sm)}
@media (max-width:640px){.hero{padding-block:var(--s7) var(--s8);gap:var(--s8)}}

/* Terminal demo and the quickstart panel: a .code with taller bodies */
.site-term{flex:1 1 480px}
.term-body{min-height:300px;padding:var(--s5) var(--s5) var(--s6);font:400 var(--t-sm)/1.75 var(--mono)}
.tl{white-space:pre;overflow:hidden;text-overflow:ellipsis}

/* ---------- Logo strip ---------- */
.marquee{border-block:1px solid var(--line);overflow:hidden;padding:var(--s5) 0}
.mq-track{display:flex;gap:var(--s9);width:max-content;will-change:transform}
.mq-item{display:flex;align-items:center;gap:var(--s3);font-size:var(--t-base);font-weight:500;color:var(--muted);white-space:nowrap}
.mq-item svg{width:26px;height:26px}
.mq-item path{fill:var(--muted);transition:fill .22s var(--ease)}
.mq-item:hover path{fill:var(--b,var(--muted))}
html:not(.site-anim) .marquee{padding-inline:var(--s6)}
html:not(.site-anim) .mq-track{width:auto;flex-wrap:wrap;justify-content:center;gap:var(--s4) var(--s7)}

/* ---------- Section reveal ---------- */
html.site-anim .sv{opacity:0;translate:0 26px;transition:opacity .6s var(--ease) var(--rd,0ms),translate .6s var(--ease) var(--rd,0ms),border-color .5s,background-color .5s}
html.site-anim .seen .sv,html.site-anim .sv.seen{opacity:1;translate:none}
.pains .sv:nth-child(2),.vals .sv:nth-child(2){--rd:80ms}
.pains .sv:nth-child(3),.vals .sv:nth-child(3){--rd:160ms}
.pains .sv:nth-child(4),.vals .sv:nth-child(4){--rd:240ms}
.pains .sv:nth-child(5){--rd:320ms}
.pains .sv:nth-child(6){--rd:400ms}

/* Hero entrance, after the splash */
html.site-anim .hero-in{opacity:0;translate:0 18px;transition:opacity .7s var(--ease) var(--hd,0ms),translate .7s var(--ease) var(--hd,0ms)}
html.site-anim .hero-in[data-d="term"]{translate:0 28px;scale:.98;transition:opacity .8s var(--ease) .2s,translate .8s var(--ease) .2s,scale .8s var(--ease) .2s}
html.site-anim.site-ready .hero-in{opacity:1;translate:none;scale:none}
.hero-in[data-d="1"]{--hd:90ms} .hero-in[data-d="2"]{--hd:180ms} .hero-in[data-d="3"]{--hd:270ms}

/* ---------- Why: pains that transform from without to with ---------- */
.why{padding-top:var(--s10);padding-bottom:var(--s6);display:flex;flex-direction:column;gap:var(--s7)}
.why-head{display:flex;flex-wrap:wrap;gap:var(--s6);justify-content:space-between;align-items:flex-end}
.why-head .sec-intro{max-width:700px}
.why-ctrl{display:flex;flex-direction:column;gap:var(--s3);align-items:flex-end}
.why-meta{display:flex;align-items:center;gap:var(--s3);font-size:var(--t-sm);color:var(--muted)}
.why-meta [data-fixed-label]{font-variant-numeric:tabular-nums}
@media (max-width:760px){.why-ctrl{align-items:flex-start}}

.pains{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:var(--s4)}
.pain{padding:var(--s5);border-radius:var(--r-lg);border:1px solid var(--line);background:var(--surface);display:flex;flex-direction:column;gap:var(--s3);transition:border-color .5s,background-color .5s}
.pain:hover{border-color:var(--line-2)}
.pain.is-fixed:hover{border-color:var(--ink)}
.pain.is-fixed{border-color:color-mix(in srgb,var(--ink) 45%,var(--line));background:var(--surface-2)}
.pain-t{font:600 var(--t-md)/1.35 var(--font)}
.pain-e{font-size:var(--t-sm);line-height:1.5;color:var(--muted)}
.pain-flip{margin-top:auto;padding-top:var(--s3);border-top:1px solid var(--line);display:grid;min-height:72px}
.pain-bad,.pain-good{grid-area:1/1;display:flex;gap:var(--s3);align-items:flex-start;font-size:var(--t-sm);line-height:1.5}
.pain-bad{transition:opacity .36s var(--ease),translate .36s var(--ease)}
.pain-good{transition:opacity .46s var(--ease) .12s,translate .46s var(--ease) .12s}
.pain .x{flex:none;width:18px;height:18px;margin-top:2px;fill:none;stroke:var(--crit);stroke-width:2;stroke-linecap:square;stroke-linejoin:miter}
/* The fixed tick: a dark tile with a light tick in both themes; status reads by mark, never by green */
.tick{flex:none;width:22px;height:22px;border-radius:var(--r-sm);background:var(--code-bg);display:flex;align-items:center;justify-content:center;transition:scale .42s var(--spring) .16s}
.tick svg{width:14px;height:14px;fill:none;stroke:var(--code-strong);stroke-width:3;stroke-linecap:square;stroke-linejoin:miter}
.good-txt{display:flex;flex-direction:column;gap:var(--s1)}
.good-txt b{font-weight:500}
.saves{font-size:var(--t-xs);line-height:1.45;color:var(--muted)}
.pain.is-fixed .pain-bad{opacity:0;translate:0 -8px;visibility:hidden;transition:opacity .36s var(--ease),translate .36s var(--ease),visibility 0s .36s}
.pain:not(.is-fixed) .pain-good{opacity:0;translate:0 10px;visibility:hidden;transition:opacity .2s var(--ease),translate .2s var(--ease),visibility 0s .2s}
.pain:not(.is-fixed) .tick{scale:.4}
.sources{font-size:var(--t-xs);color:var(--muted)}
.sources a{color:var(--ink);text-decoration:underline;text-decoration-color:rgba(var(--accent-rgb),.55);text-underline-offset:3px;text-decoration-thickness:1px}
.sources a:hover{text-decoration-color:var(--accent)}

/* ---------- Quickstart ---------- */
.start{padding-top:var(--s10);padding-bottom:var(--s8);display:flex;flex-direction:column;gap:var(--s7)}
.start-grid{display:flex;flex-wrap:wrap;gap:var(--s6)}
.steps-list{flex:1 1 320px;display:flex;flex-direction:column;gap:var(--s3)}
.step{position:relative;overflow:hidden;text-align:start;padding:var(--s5);border-radius:var(--r-lg);border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer;display:flex;gap:var(--s4);font:inherit;transition:border-color .24s,translate .2s var(--ease)}
html:not([data-motion="reduced"]):not(.static) .step:hover{translate:0 -2px}
.step.on{border-color:var(--ink)}
.step-n{flex:none;width:28px;height:28px;border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;font:400 var(--t-sm) var(--mono);background:var(--well);color:var(--ink);transition:background-color .24s,color .24s}
.step.on .step-n{background:var(--ink);color:var(--on-ink)}
.step-txt{display:flex;flex-direction:column;gap:6px}
.step-t{font-weight:600;font-size:var(--t-md)}
.step-b{font-size:var(--t-sm);line-height:1.5;color:var(--muted)}
.step-prog{position:absolute;inset-inline-start:0;bottom:0;width:100%;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:left}
[dir="rtl"] .step-prog{transform-origin:right}
html:not([data-motion="reduced"]):not(.static) .step.on.playing .step-prog{animation:step-prog var(--qs-dur,4.95s) linear forwards}
@keyframes step-prog{to{transform:scaleX(1)}}
.step-code{flex:2 1 520px}
.step-panel{padding:var(--s5);font:400 var(--t-sm)/1.75 var(--mono);min-height:290px}
.step-panel .ln{white-space:pre-wrap}
html.site-anim .step-panel.play .ln{animation:ln-in .32s var(--ease) both;animation-delay:calc(var(--i,0) * 165ms)}
@keyframes ln-in{from{opacity:0;translate:0 6px}}

/* ---------- Integrations wall ---------- */
.plug{padding-block:var(--s9);display:flex;flex-direction:column;gap:var(--s6)}
.plug-grid{display:flex;flex-wrap:wrap;gap:var(--s6);align-items:flex-start}
.drvs{flex:2 1 560px;min-width:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:var(--s3)}
.drv-txt{grid-column:1/-1;font-size:var(--t-sm);color:var(--muted)}
.drv{height:104px;border-radius:var(--r-lg);border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s3);padding:0 var(--s2);font:inherit;transition:translate .18s var(--ease),border-color .18s,box-shadow .18s}
html:not([data-motion="reduced"]):not(.static) .drv:hover{translate:0 -2px}
html.site-anim .drv{animation:drv-in .3s var(--ease) both;animation-delay:calc(var(--i,0) * 18ms)}
@keyframes drv-in{from{opacity:0;scale:.96}}
.drv svg{width:30px;height:30px}
.drv path{fill:var(--muted);transition:fill .22s var(--ease)}
.drv:hover path,.drv[aria-pressed="true"] path{fill:var(--b,var(--ink))}
.drv-n{font-size:var(--t-xs);font-weight:500;color:var(--muted);text-align:center;line-height:1.25}
.drv[aria-pressed="true"]{border-color:var(--ink);box-shadow:inset 0 0 0 .5px var(--ink)}
.drv[aria-pressed="true"] .drv-n{color:var(--ink)}
.pick{flex:1 1 320px;min-width:0;display:flex;flex-direction:column;gap:var(--s3)}
.pick-logo{width:20px;height:20px}
.pick-logo path{fill:var(--pb,var(--code-strong))}
html.site-anim .pick .code-b.flash{animation:ln-in .3s var(--ease) both}
.note{font-size:var(--t-sm);line-height:1.55;color:var(--muted)}

/* ---------- Value cards ---------- */
.vals{padding-block:var(--s6) var(--s10);display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:var(--s4)}
.val{padding:var(--s6);border-radius:var(--r-lg);border:1px solid var(--line);background:var(--surface);display:flex;flex-direction:column;gap:var(--s3);transition:border-color var(--dur)}
.val:hover{border-color:var(--line-2)}
.val-t{font:600 var(--t-md)/1.35 var(--font)}
.val-b{font-size:var(--t-base);line-height:1.55;color:var(--muted)}

/* ---------- FAQ: a visible accordion (details/summary); FAQPage JSON-LD in the head matches it word for word ---------- */
.faq{padding-block:var(--s2) var(--s10);display:flex;flex-wrap:wrap;gap:var(--s8) var(--s9);align-items:flex-start}
.faq-intro{flex:1 1 300px;display:flex;flex-direction:column;gap:var(--s3);position:sticky;top:calc(var(--head-h) + var(--s7))}
.faq-more{font-size:var(--t-base);line-height:1.55;color:var(--muted)}
.faq-more a{color:var(--ink);text-decoration:underline;text-decoration-color:rgba(var(--accent-rgb),.55);text-underline-offset:3px;text-decoration-thickness:1px}
.faq-more a:hover{text-decoration-color:var(--accent)}
.faq-list{flex:2 1 560px;min-width:0;border-top:1px solid var(--line)}
.faq .sv:nth-child(2){--rd:80ms}
.faq-item{border-bottom:1px solid var(--line)}
.faq-item summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:var(--s4);padding:var(--s5) 0;font:600 var(--t-md)/1.4 var(--font);color:var(--ink)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:var(--r-sm)}
.faq-ic{flex:none;position:relative;width:28px;height:28px;border:1px solid var(--line);border-radius:var(--r-sm);transition:border-color var(--dur),background-color var(--dur)}
.faq-ic::before,.faq-ic::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:1.5px;background:var(--ink);translate:-50% -50%;transition:rotate .24s var(--ease),background-color var(--dur)}
.faq-ic::after{rotate:90deg}
.faq-item summary:hover .faq-ic{border-color:var(--ink)}
.faq-item[open] .faq-ic{background:var(--ink);border-color:var(--ink)}
.faq-item[open] .faq-ic::before,.faq-item[open] .faq-ic::after{background:var(--on-ink)}
.faq-item[open] .faq-ic::after{rotate:0deg}
.faq-a{padding:0 var(--s9) var(--s6) 0;max-width:72ch}
.faq-a p{font-size:var(--t-base);line-height:1.65;color:var(--muted)}
.faq-a code{color:var(--ink)}
html.site-anim .faq-item[open] .faq-a{animation:ln-in .3s var(--ease) both}
@media (max-width:760px){.faq-intro{position:static}.faq-a{padding-right:0}}

/* ---------- Final CTA ---------- */
.final{border-top:1px solid var(--line)}
.final-in{padding-block:var(--s10);display:flex;flex-wrap:wrap;gap:var(--s6);align-items:center;justify-content:space-between}
.final-h{font:600 clamp(var(--t-2xl),4vw,var(--t-3xl))/1.1 var(--font-display);letter-spacing:-.02em}
.final-actions{display:flex;gap:var(--s3);flex-wrap:wrap;align-items:center;min-width:0}
.final-actions .cmd{height:52px}

/* ---------- 404 ---------- */
.nf{max-width:var(--content);margin:0 auto;padding:var(--s10) var(--s6);display:flex;flex-wrap:wrap;gap:var(--s9);align-items:center;min-height:60vh}
.nf-copy{flex:1 1 420px;display:flex;flex-direction:column;gap:var(--s5)}
.nf-code{font:600 var(--t-5xl)/1 var(--font-display);letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.nf-code .acc{color:var(--accent)}
.nf-actions{display:flex;gap:var(--s3);flex-wrap:wrap}
.nf .code{flex:1 1 380px}
@media (max-width:760px){.pick{order:-1}.drv{height:88px}}