/* Layout of zapdata.dev and docs.zapdata.dev on top of the ZapData design system (ds.css).
   Only tokens and zd-* classes from the design system; the classes here are the page layout. */

html{scroll-behavior:smooth;scroll-padding-top:calc(var(--topbar-height) + var(--space-4))}
body{background:var(--bg-app);overflow-x:hidden}
img{max-width:100%}
.lucide{flex:none}

.wrap{width:100%;max-width:1160px;margin:0 auto;padding:0 var(--page-padding)}
@media (max-width:640px){.wrap{padding:0 var(--page-padding-mobile)}}

.skip{position:absolute;left:var(--space-4);top:-100px;z-index:var(--z-tooltip);padding:var(--space-2) var(--space-4);border-radius:var(--radius-button);background:var(--ink);color:var(--on-ink)}
.skip:focus{top:var(--space-2)}

/* Header */
.site-header{position:sticky;top:0;z-index:var(--z-sticky);background:var(--bg-app);border-bottom:1px solid var(--border-subtle)}
.site-header__row{display:flex;align-items:center;gap:var(--space-6);min-height:var(--topbar-height);flex-wrap:wrap}
.site-logo{display:inline-flex;align-items:center;gap:var(--space-2);text-decoration:none;color:var(--text-2);font:var(--type-meta-strong)}
.site-logo img{display:block;height:22px;width:auto}
.site-nav{display:flex;align-items:center;gap:var(--space-1);flex:1;min-width:0}
.site-nav a{display:inline-flex;align-items:center;min-height:var(--touch-target);padding:0 var(--space-3);border-radius:var(--radius-button);font:var(--type-control);color:var(--text-2);text-decoration:none}
.site-nav a:hover{color:var(--text-1);background:var(--surface-2)}
.site-nav a[aria-current="page"]{color:var(--brand-strong);background:var(--brand-subtle)}
.site-actions{display:flex;align-items:center;gap:var(--space-2);margin-left:auto}
@media (max-width:900px){
  .site-header__row{gap:0 var(--space-2);padding-top:var(--space-2)}
  .site-nav{order:3;flex:0 0 100%;flex-wrap:wrap;margin:0 calc(var(--space-3) * -1);padding-bottom:var(--space-1)}
  .site-nav a{padding:0 var(--space-3)}
}
@media (max-width:640px){.site-header .hide-sm{display:none}}

/* Sections */
.section{padding:var(--space-16) 0}
.section--flush{padding-top:0}
.section--surface{background:var(--surface);border-block:1px solid var(--border-subtle)}
.section__head{max-width:640px;margin-bottom:var(--space-10)}
.section__head--center{margin-inline:auto;text-align:center}
.eyebrow{display:block;margin-bottom:var(--space-2);font:var(--type-meta-strong);color:var(--brand-strong)}
.h2{font:var(--type-page-title);letter-spacing:var(--ls-page);text-wrap:balance}
.lead{margin-top:var(--space-3);font:var(--type-message);color:var(--text-2);text-wrap:pretty}
@media (max-width:640px){.section{padding:var(--space-12) 0}.section__head{margin-bottom:var(--space-8)}}

/* Hero */
.hero{position:relative;overflow:hidden;isolation:isolate;padding:var(--space-16) 0}
.hero__mark{position:absolute;right:-120px;bottom:-180px;width:min(640px,60vw);z-index:-1}
.hero__grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:var(--space-12);align-items:center}
.hero h1{margin-top:var(--space-4);font:var(--weight-medium) var(--fs-metric)/var(--lh-metric) var(--font-sans);letter-spacing:var(--ls-metric);text-wrap:balance}
.hero__sub{margin-top:var(--space-5);max-width:520px;font:var(--type-message);color:var(--text-2);text-wrap:pretty}
.hero__ctas{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-8)}
.hero__note{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-5);margin-top:var(--space-6);font:var(--type-meta-strong);color:var(--text-2)}
.hero__note span{display:inline-flex;align-items:center;gap:var(--space-2)}
.hero__note .lucide{color:var(--brand-mark)}
@media (max-width:960px){.hero__grid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:640px){
  .hero{padding:var(--space-10) 0 var(--space-12)}
  .hero h1{font-size:var(--fs-page);line-height:var(--lh-page);letter-spacing:var(--ls-page)}
  .hero__mark{display:none}
  .hero__ctas .zd-btn{flex:1 1 auto}
}

/* Code */
.code{min-width:0;border-radius:var(--radius-card);background:var(--surface-inverse);color:var(--text-inverse);box-shadow:var(--shadow-card);overflow:hidden}
.code__bar{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);padding:var(--space-3) var(--space-5);border-bottom:1px solid var(--border-inverse);font:var(--type-meta-strong);color:var(--text-inverse-2)}
.code pre,.md pre{margin:0;padding:var(--space-5);overflow-x:auto;font:400 13px/20px var(--font-mono);tab-size:2}
.code pre{color:var(--text-inverse)}
.code .c-k{color:var(--zd-orange-200)}
.code .c-s{color:var(--text-inverse-2)}
:is([data-theme="dark"],.dark) .code{box-shadow:0 0 0 1px var(--border-subtle)}
:is([data-theme="dark"],.dark) .code .c-k{color:var(--brand-strong)}
.code-stack{position:relative;padding-bottom:var(--space-12)}
.code-stack pre{padding-bottom:var(--space-10)}
.bubble{position:absolute;right:var(--space-5);bottom:0;max-width:260px;padding:var(--space-3) var(--space-4);border-radius:var(--radius-bubble);background:var(--surface);box-shadow:var(--shadow-menu);font:var(--type-message)}
.bubble__meta{display:flex;align-items:center;justify-content:flex-end;gap:var(--space-1);margin-top:2px;font:var(--type-meta);color:var(--text-3)}
.bubble__meta .lucide{color:var(--info-fg)}

/* Feature grid */
.grid{display:grid;gap:var(--space-4)}
.grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:1024px){.grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:860px){.grid--3{grid-template-columns:minmax(0,1fr)}}
@media (max-width:640px){.grid--4{grid-template-columns:minmax(0,1fr)}}
.feature{display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-6)}
.feature__icon{display:grid;place-items:center;width:44px;height:44px;margin-bottom:var(--space-2);border-radius:var(--radius-bubble);background:var(--brand-subtle);color:var(--brand-strong)}
.feature h3{font:var(--type-component-title);letter-spacing:var(--ls-component)}
.feature p{color:var(--text-2);text-wrap:pretty}
.feature--wide{grid-column:span 2}
@media (max-width:640px){.feature--wide{grid-column:auto}}

/* uazapi band */
.band{display:flex;align-items:center;justify-content:space-between;gap:var(--space-6);flex-wrap:wrap;padding:var(--space-8);margin-top:var(--space-10)}
.band h3{font:var(--type-section-title);letter-spacing:var(--ls-section)}
.band p{margin-top:var(--space-1);max-width:620px}
@media (max-width:640px){.band{padding:var(--space-6)}}

/* Steps */
.steps{counter-reset:step;list-style:none;margin:0;padding:0}
.step{position:relative;padding:var(--space-6)}
.step__n{display:grid;place-items:center;width:36px;height:36px;margin-bottom:var(--space-4);border-radius:50%;background:var(--brand);color:var(--on-brand);font:var(--type-body-strong);font-variant-numeric:tabular-nums}
.step h3{font:var(--type-component-title)}
.step p{margin-top:var(--space-2);color:var(--text-2)}

/* Pricing */
.price-group + .price-group{margin-top:var(--space-10)}
.price-group__head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-4);flex-wrap:wrap;margin-bottom:var(--space-4)}
.price-group__head h3{font:var(--type-section-title);letter-spacing:var(--ls-section)}
.price-group__head p{color:var(--text-2)}
.plans{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:var(--space-4)}
.plan{display:flex;flex-direction:column;gap:var(--space-4);padding:var(--space-6)}
.plan__name{font:var(--type-component-title)}
.plan__cap{font:var(--type-body);color:var(--text-2)}
.plan__price{font:var(--type-metric);letter-spacing:var(--ls-metric);font-variant-numeric:tabular-nums}
.plan__per{display:block;font:var(--type-meta);letter-spacing:0;color:var(--text-3)}
.plan .zd-btn{margin-top:auto}
.plan-skel{height:208px;border-radius:var(--radius-card)}
.prices-soon{padding:var(--space-10) var(--space-6)}
.prices-soon .zd-empty{padding:0}

/* FAQ */
.faq{max-width:760px;margin:0 auto}
.faq details{border-bottom:1px solid var(--border-subtle)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);min-height:var(--touch-target);padding:var(--space-4) 0;font:var(--type-component-title);cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--surface-2);color:var(--text-2);font:var(--type-component-title);transition:transform var(--dur-base) var(--ease-standard)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 var(--space-10) var(--space-5) 0;color:var(--text-2);text-wrap:pretty}
@media (max-width:640px){.faq details p{padding-right:0}}

/* Final call */
.cta{position:relative;overflow:hidden;isolation:isolate;display:flex;align-items:center;justify-content:space-between;gap:var(--space-6);flex-wrap:wrap;padding:var(--space-10)}
.cta h2{font:var(--type-page-title);letter-spacing:var(--ls-page)}
.cta p{margin-top:var(--space-2);max-width:520px}
@media (max-width:640px){.cta{padding:var(--space-8) var(--space-6)}.cta .zd-btn{flex:1 1 auto}}

/* Footer */
.site-footer{padding:var(--space-12) 0 var(--space-10);border-top:1px solid var(--border-subtle);background:var(--surface)}
.site-footer__row{display:flex;justify-content:space-between;gap:var(--space-8);flex-wrap:wrap}
.site-footer__brand p{margin-top:var(--space-3);max-width:320px;color:var(--text-2)}
.site-footer__cols{display:flex;gap:var(--space-12);flex-wrap:wrap}
.site-footer__col h2{font:var(--type-meta-strong);color:var(--text-3);margin-bottom:var(--space-2)}
.site-footer__col ul{list-style:none;margin:0;padding:0}
.site-footer__col a{display:inline-flex;align-items:center;min-height:32px;color:var(--text-1);text-decoration:none}
.site-footer__col a:hover{color:var(--brand-strong);text-decoration:underline}
.site-footer__legal{margin-top:var(--space-10);font:var(--type-meta);color:var(--text-3)}

/* Docs */
.docs{display:grid;grid-template-columns:232px minmax(0,1fr);gap:var(--space-10);padding:var(--space-10) 0 var(--space-16)}
.toc{position:sticky;top:calc(var(--topbar-height) + var(--space-6));align-self:start;max-height:calc(100vh - var(--topbar-height) - var(--space-12));overflow:auto}
.toc h2{font:var(--type-meta-strong);color:var(--text-3);margin:0 0 var(--space-2) var(--space-3)}
.toc a{display:flex;align-items:center;min-height:36px;padding:var(--space-1) var(--space-3);border-radius:var(--radius-control);color:var(--text-2);text-decoration:none;font:var(--type-control)}
.toc a:hover{background:var(--surface-2);color:var(--text-1)}
@media (max-width:900px){.docs{grid-template-columns:minmax(0,1fr);gap:var(--space-6);padding-top:var(--space-6)}.toc{position:static;max-height:none}}

.md{min-width:0;padding:var(--space-8);font:var(--type-message)}
@media (max-width:640px){.md{padding:var(--space-5)}}
.md h1{font:var(--type-page-title);letter-spacing:var(--ls-page);margin-bottom:var(--space-4)}
.md h2{font:var(--type-section-title);letter-spacing:var(--ls-section);margin:var(--space-10) 0 var(--space-3)}
.md h3{font:var(--type-component-title);margin:var(--space-8) 0 var(--space-2)}
.md p,.md ul,.md ol,.md table,.md pre{margin:0 0 var(--space-4)}
.md ul,.md ol{padding-left:var(--space-6)}
.md li{margin:var(--space-1) 0}
.md li > pre{margin-top:var(--space-2)}
.md hr{border:0;border-top:1px solid var(--border-subtle);margin:var(--space-10) 0}
.hero :not(pre) > code,.step :not(pre) > code,.zd-tile code,.md :not(pre) > code{padding:1px 6px;border-radius:var(--radius-xs);background:var(--surface-2);font:400 13px/20px var(--font-mono);overflow-wrap:anywhere}
.md pre{border-radius:var(--radius-popover);background:var(--surface-inverse);color:var(--text-inverse)}
.md pre code{padding:0;background:none;color:inherit;overflow-wrap:normal}
.md table{display:block;max-width:100%;overflow-x:auto;border-collapse:collapse;font:var(--type-body)}
.md th,.md td{padding:var(--space-2) var(--space-3);border-bottom:1px solid var(--border-subtle);text-align:left;vertical-align:top}
.md th{font:var(--type-meta-strong);color:var(--text-3);background:var(--surface-2)}
.md-status{padding:var(--space-10) 0;color:var(--text-2)}

.quick{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-4)}
.quick .step{display:grid;grid-template-columns:36px minmax(0,1fr);gap:0 var(--space-4)}
.quick .step__n{margin:0}
.quick .step p{margin-bottom:var(--space-3)}
.quick .code{margin-top:var(--space-1)}
.quick .after-code{margin:var(--space-3) 0 0}

#redoc{min-height:60vh;background:var(--surface)}
a.zd-tile{text-decoration:none;color:inherit}

/* Theme toggle: moon in the light theme, sun in the dark one */
.theme-ic--sun{display:none}
:is([data-theme="dark"],.dark) .theme-ic--sun{display:inline-block}
:is([data-theme="dark"],.dark) .theme-ic--moon{display:none}

/* Redoc paints markdown tables white whatever the theme */
:is([data-theme="dark"],.dark) #redoc table tr,:is([data-theme="dark"],.dark) #redoc table th,:is([data-theme="dark"],.dark) #redoc table td{background-color:var(--surface)!important;border-color:var(--border-subtle)!important}
:is([data-theme="dark"],.dark) #redoc table tr:nth-child(2n){background-color:var(--surface-2)!important}