/* Fonts are self-hosted variable fonts (DM Sans 100–1000, Manrope 200–800). */
@font-face{font-family:'DM Sans';font-style:normal;font-weight:100 1000;font-display:swap;src:url(/assets/fonts/dm-sans-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:100 1000;font-display:swap;src:url(/assets/fonts/dm-sans-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Manrope';font-style:normal;font-weight:200 800;font-display:swap;src:url(/assets/fonts/manrope-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Manrope';font-style:normal;font-weight:200 800;font-display:swap;src:url(/assets/fonts/manrope-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

html{scroll-behavior:smooth;scroll-padding-top:90px}
html,body{margin:0;background:#ffffff;color:#171c19;-webkit-font-smoothing:antialiased}
*{box-sizing:border-box}
a{color:#171c19;text-decoration:none}
a:hover{color:#435f26}
input::placeholder,textarea::placeholder{color:#8a938c}
::selection{background:#d8f24c;color:#171c19}
button,a,summary{-webkit-tap-highlight-color:transparent}
:focus-visible{outline:2px solid #678328;outline-offset:3px}
.skip-link{position:fixed;left:16px;top:-80px;z-index:100;background:#171c19;color:#fff;padding:10px 16px;border-radius:5px}
.skip-link:focus{top:12px;color:#fff}

/* Demo binding elements are transparent to layout */
sc-if,sc-for{display:contents}
sc-if[hidden]{display:none}
@keyframes qf-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* ---------------- Top: hero + sticky demo ---------------- */
.topgrid{display:flex;flex-direction:column}
.leftcol{display:contents}
.hero-sec{order:-2;container-type:inline-size}
.vis{order:-1;position:relative;margin:8px 0 0;z-index:5}
.demo-body{position:relative;overflow:hidden;aspect-ratio:760/520}
.demo-scaler{position:absolute;left:0;top:0;width:760px;height:520px;transform-origin:0 0;font-size:13px}
@media (min-width:960px){
  .topgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr)}
  .leftcol{display:flex;flex-direction:column}
  .hero-sec{order:0;min-height:calc(100vh - 60px)}
  .feat{min-height:92vh}
  .vis{order:0;position:sticky;top:84px;height:calc(100vh - 108px);max-height:760px;margin:24px 0}
  .demo-body{flex:1;aspect-ratio:auto}
}
@media (max-width:959px){ .feat{cursor:pointer} }

.seg{flex:1;border:0;background:transparent;padding:8px 0;cursor:pointer}
.seg span{display:block;height:3px;border-radius:2px;background:#4a554d;transition:background .3s}
.seg.on span{background:#d8f24c}
.seg:hover span{background:#7d8a80}
.seg.on:hover span{background:#d8f24c}

/* ---------------- Navigation ---------------- */
.menu-btn{order:2;display:none;align-items:center;justify-content:center;width:42px;height:42px;border:1px solid #dce1dc;border-radius:5px;background:#fff;color:#171c19;cursor:pointer}
@media (max-width:900px){
  .menu-btn{display:inline-flex}
  .nav-links{display:none!important;position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0!important;background:#fff;border-bottom:1px solid #dce1dc;padding:8px clamp(16px,3vw,40px) 16px;box-shadow:0 16px 30px -20px rgba(23,28,25,.25)}
  .nav-links.open{display:flex!important}
  .nav-links a{padding:12px 0;border-bottom:1px solid #eef1ee}
  .nav-links a:last-child{border-bottom:0}
}
@media (max-width:560px){
  .nav-docs{display:none}
  .site-nav{gap:12px!important}
}

/* ---------------- FAQ ---------------- */
.faq{border-bottom:1px solid #dce1dc}
.faq summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;font-size:18px;padding:22px 0;cursor:pointer;color:#171c19}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:#435f26}
.faq-sign::before{content:'+';color:#606962;font-size:20px;line-height:1}
.faq[open] .faq-sign::before{content:'\2212'}
.faq p{margin:0 0 22px;font-size:15px;line-height:1.6;color:#606962;max-width:620px}

/* ---------------- Contact dialog ---------------- */
.contact{border:1px solid #dce1dc;border-radius:12px;padding:0;width:min(520px,calc(100% - 32px));max-height:calc(100% - 32px);color:#171c19;background:#fff;box-shadow:0 40px 90px -30px rgba(23,28,25,.35)}
.contact::backdrop{background:rgba(23,28,25,.45)}
.contact-form{display:flex;flex-direction:column;gap:14px;padding:26px 26px 22px;font-family:'DM Sans',sans-serif}
.contact-head{display:flex;justify-content:space-between;align-items:center;gap:16px}
.contact-head h2{margin:0;font:600 26px/1.2 'Manrope',sans-serif;letter-spacing:-.04em}
.contact-close{width:36px;height:36px;border:1px solid #dce1dc;border-radius:5px;background:#fff;color:#171c19;display:flex;align-items:center;justify-content:center;cursor:pointer}
.contact-sub{margin:0 0 4px;font-size:15px;line-height:1.55;color:#606962}
.contact-form label{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:500;color:#3d4640}
.contact-form .opt{font-weight:400;color:#8a938c}
.contact-form input,.contact-form textarea{font:inherit;font-size:15px;font-weight:400;color:#171c19;background:#f5f7f5;border:1px solid #ced7c7;border-radius:5px;padding:11px 12px;resize:vertical}
.contact-form input:focus,.contact-form textarea:focus{outline:2px solid #678328;outline-offset:1px;background:#fff}
.contact-form .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.contact-actions{display:flex;flex-direction:column;gap:10px;margin-top:4px}
.contact-submit{align-self:flex-start;display:inline-flex;align-items:center;gap:22px;min-height:46px;padding:11px 18px;border:0;border-radius:5px;background:#171c19;color:#fff;font:500 15px 'DM Sans',sans-serif;cursor:pointer}
.contact-submit:disabled{opacity:.5;cursor:wait}
.contact-status{margin:0;font-size:14px;color:#606962;min-height:1.4em}
.contact-status.ok{color:#435f26}
.contact-status.err{color:#b3261e}

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