/* Tierux marketing pages — shared design system.
   Mirrors the tokens/components inlined in index.html so /pricing, /docs and /vs/*
   match the landing exactly. Keep token values in sync with index.html <style>. */
:root{
  --ink-900:#06070a; --ink-850:#0a0c12; --ink-800:#0f121a; --ink-750:#181d2b; --ink-700:#1e2436;
  --line:rgba(255,255,255,.07); --line-2:rgba(255,255,255,.11); --line-3:rgba(255,255,255,.16);
  --text-hi:#f8f9fa; --text:#cbd1db; --text-lo:#8a94a6; --text-faint:#5b6475;
  --accent:#ff5e00; --accent-2:#ff9c66; --accent-ink:#331200; --accent-glow:rgba(255,94,0,.16);
  --violet:#ffd166; --violet-2:#ffe8b3; --violet-glow:rgba(255,209,102,.12);
  --ok:#4fe5a3; --warn:#f4c14e; --danger:#f26d7d;
  --r-xs:5px; --r-sm:8px; --r:11px; --r-lg:15px;
  --shadow:0 1px 0 rgba(255,255,255,.04) inset,0 18px 40px -24px rgba(0,0,0,.8);
  --shadow-pop:0 1px 0 rgba(255,255,255,.05) inset,0 30px 70px -28px rgba(0,0,0,.85);
  --sans:"Hanken Grotesk",system-ui,-apple-system,sans-serif;
  --display:"Bricolage Grotesque",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"SF Mono","Fira Code",monospace;
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{font-family:var(--sans);color:var(--text);background:var(--ink-900);-webkit-font-smoothing:antialiased;overflow-x:hidden;line-height:1.5;}
body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(820px 520px at -6% -10%,var(--accent-glow),transparent 60%),
             radial-gradient(720px 600px at 106% 4%,var(--violet-glow),transparent 55%);}
::selection{background:rgba(255,94,0,.22);color:var(--text-hi);}
a{color:inherit;}
.wrap{position:relative;z-index:1;max-width:1080px;margin:0 auto;padding:0 36px;}
.narrow{max-width:880px;}

/* nav */
.site-nav{position:relative;z-index:1;max-width:1080px;margin:0 auto;padding:24px 36px;display:flex;align-items:center;justify-content:space-between;gap:16px;}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;}
.logo{width:32px;height:32px;border-radius:9px;background:linear-gradient(150deg,var(--accent),var(--violet) 70%);display:grid;place-items:center;box-shadow:0 6px 18px -6px var(--accent-glow),0 0 0 1px rgba(255,255,255,.12) inset;flex:none;}
.logo svg{width:15px;height:15px;}
.brand-name{font-size:15px;font-weight:700;color:var(--text-hi);letter-spacing:-.01em;}
.brand-sub{font-family:var(--mono);font-size:9px;color:var(--text-faint);letter-spacing:.08em;text-transform:uppercase;margin-top:1px;}
.nav-links{display:flex;align-items:center;gap:22px;}
.nav-links a{font-size:13.5px;color:var(--text-lo);text-decoration:none;transition:color .15s;}
.nav-links a:hover,.nav-links a.on{color:var(--text-hi);}
@media(max-width:680px){.nav-links .hide-sm{display:none;}}

/* buttons */
.btn{font-family:var(--sans);font-size:13.5px;font-weight:600;cursor:pointer;border-radius:var(--r-sm);padding:10px 18px;border:1px solid var(--line-2);background:rgba(255,255,255,.04);color:var(--text);display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:all .15s;white-space:nowrap;text-decoration:none;}
.btn:hover{background:rgba(255,255,255,.08);border-color:var(--line-3);color:var(--text-hi);}
.btn.primary{background:linear-gradient(135deg,var(--accent),var(--violet));color:var(--accent-ink);border-color:transparent;box-shadow:0 8px 20px -10px rgba(255,94,0,.4);}
.btn.primary:hover{filter:brightness(1.06);}
.btn.lg{padding:13px 24px;font-size:15px;}
.btn.sm{padding:7px 13px;font-size:12.5px;}

/* page header */
.page-head{position:relative;z-index:1;text-align:center;padding:54px 0 14px;}
.eyebrow{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);background:rgba(255,94,0,.08);border:1px solid rgba(255,94,0,.22);border-radius:20px;padding:5px 13px;margin-bottom:18px;}
.page-head h1{font-family:var(--display);font-size:40px;line-height:1.06;font-weight:800;letter-spacing:-.03em;color:var(--text-hi);margin-bottom:14px;}
.page-head h1 .grad{background:linear-gradient(120deg,var(--accent),var(--violet));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.page-head p{font-size:16px;color:var(--text-lo);max-width:620px;margin:0 auto;line-height:1.6;}
.sec-label{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-faint);text-align:center;margin:48px 0 22px;}
@media(max-width:560px){.page-head h1{font-size:30px;}}

/* pricing */
.pricing-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;align-items:start;}
.price-card{background:linear-gradient(180deg,rgba(255,255,255,.025),transparent 45%),var(--ink-800);border:1px solid var(--line);border-radius:var(--r-lg);padding:26px 24px;display:flex;flex-direction:column;gap:14px;}
.price-card.feat{border-color:rgba(255,94,0,.35);box-shadow:0 0 0 1px rgba(255,94,0,.14),0 24px 60px -34px rgba(255,94,0,.5);}
.price-card .pc-tag{align-self:flex-start;font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);background:rgba(255,94,0,.12);border:1px solid rgba(255,94,0,.28);border-radius:20px;padding:3px 9px;}
.price-card .pc-name{font-size:17px;font-weight:700;color:var(--text-hi);}
.price-card .pc-price{font-size:38px;font-weight:800;color:var(--text-hi);letter-spacing:-.03em;line-height:1;font-family:var(--display);}
.price-card .pc-price span{font-size:14px;font-weight:500;color:var(--text-faint);font-family:var(--sans);}
.price-card .pc-desc{font-size:13px;color:var(--text-lo);line-height:1.5;min-height:38px;}
.price-card ul{list-style:none;display:flex;flex-direction:column;gap:9px;margin-top:4px;}
.price-card li{display:flex;gap:9px;font-size:13px;color:var(--text);line-height:1.4;}
.price-card li svg{width:16px;height:16px;color:var(--accent);flex:none;margin-top:1px;}

/* generic feature/info cards */
.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;}
.info-card{background:var(--ink-800);border:1px solid var(--line);border-radius:var(--r-lg);padding:24px;}
.info-card h3{font-size:15.5px;font-weight:700;color:var(--text-hi);margin-bottom:7px;}
.info-card p{font-size:13.5px;color:var(--text-lo);line-height:1.55;}

/* code blocks (docs) */
.code{position:relative;background:var(--ink-800);border:1px solid var(--line-2);border-radius:var(--r-sm);padding:16px 18px;margin:12px 0;overflow-x:auto;}
.code pre{font-family:var(--mono);font-size:12.5px;line-height:1.7;color:var(--text-hi);margin:0;white-space:pre;}
.code .c{color:var(--text-faint);}
.code .k{color:var(--accent);}
.code .s{color:var(--ok);}
.doc-step{display:flex;gap:16px;padding:20px 0;border-top:1px solid var(--line);}
.doc-step:first-of-type{border-top:none;}
.doc-step .num{width:32px;height:32px;border-radius:9px;background:rgba(255,94,0,.1);border:1px solid rgba(255,94,0,.22);display:grid;place-items:center;font-family:var(--mono);font-weight:700;color:var(--accent);flex:none;}
.doc-step .body{flex:1;min-width:0;}
.doc-step h3{font-size:16px;font-weight:700;color:var(--text-hi);margin-bottom:5px;}
.doc-step p{font-size:13.5px;color:var(--text-lo);line-height:1.55;}
.doc-step code{font-family:var(--mono);font-size:12px;background:rgba(255,255,255,.06);padding:1px 5px;border-radius:4px;color:var(--accent-2);}

/* comparison table */
.cmp{position:relative;z-index:1;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--ink-800);}
.cmp table{width:100%;border-collapse:collapse;font-size:13.5px;}
.cmp th,.cmp td{padding:14px 18px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top;}
.cmp thead th{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-faint);background:var(--ink-850);}
.cmp thead th.us{color:var(--accent);}
.cmp tbody tr:last-child td{border-bottom:none;}
.cmp td:first-child{color:var(--text-hi);font-weight:600;width:38%;}
.cmp .yes{color:var(--ok);}
.cmp .no{color:var(--text-faint);}
.cmp .partial{color:var(--warn);}
.cmp-note{font-size:11.5px;color:var(--text-faint);margin-top:12px;text-align:center;}
@media(max-width:620px){.cmp table{font-size:12px;}.cmp th,.cmp td{padding:11px 12px;}}

/* CTA band + footer */
.cta-band{position:relative;z-index:1;margin:56px 0 0;text-align:center;background:linear-gradient(135deg,rgba(255,94,0,.07),rgba(255,209,102,.07));border:1px solid var(--line-2);border-radius:var(--r-lg);padding:40px 24px;}
.cta-band h2{font-family:var(--display);font-size:26px;font-weight:700;color:var(--text-hi);letter-spacing:-.02em;margin-bottom:8px;}
.cta-band p{font-size:14px;color:var(--text-lo);margin-bottom:22px;}
.site-footer{position:relative;z-index:1;border-top:1px solid var(--line);margin-top:60px;padding:22px 36px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;max-width:1080px;margin-left:auto;margin-right:auto;}
.site-footer-copy{font-size:12px;color:var(--text-faint);}
.site-footer-links{display:flex;gap:14px 20px;flex-wrap:wrap;}
.site-footer-links a{font-size:12px;color:var(--text-lo);text-decoration:none;transition:color .15s;}
.site-footer-links a:hover{color:var(--text-hi);}
.faq details{border:1px solid var(--line-2);border-radius:var(--r-sm);background:var(--ink-800);margin-bottom:8px;}
.faq summary{padding:14px 16px;cursor:pointer;font-size:14px;font-weight:600;color:var(--text-hi);list-style:none;display:flex;justify-content:space-between;align-items:center;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+";color:var(--text-faint);font-size:18px;}
.faq details[open] summary::after{content:"–";}
.faq .fa{padding:0 16px 14px;font-size:13.5px;color:var(--text-lo);line-height:1.6;}