@font-face{font-family:'Archivo';font-style:normal;font-weight:100 900;font-display:swap;src:url(/static/Archivo-var.woff2) format('woff2');}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:100 900;font-display:swap;src:url(/static/HankenGrotesk-var.woff2) format('woff2');}
:root{
  --bg:#0e0c0a; --bg2:#080706; --card:rgba(255,255,255,.045); --cardline:rgba(255,255,255,.09);
  --ink:#f2ede6; --ink2:#b3aca2; --mut:#8a8178; --line:rgba(255,255,255,.09);
  --orange:#f26522; --orange-h:#f5893f; --dark:#141210; --dark2:#1c1815; --on-dark:#f2ede6;
  --ok:#5fd694; --chip:rgba(255,255,255,.06);
}
*{box-sizing:border-box; margin:0}
html{scroll-behavior:smooth}
body{background:var(--bg); color:var(--ink);
  font:16px/1.6 'Hanken Grotesk',-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;}
h1,h2,h3,.stat b,.traj,.calc .spendv,.calc .rec .tier,.logo{font-family:'Archivo','Hanken Grotesk',sans-serif;}
img{max-width:100%}
a{color:inherit}
/* `color:inherit` matters as much as the font: a button that sets no colour of its own falls
   back to the UA `buttontext` (black) on this dark page, not to the page ink. That is what made
   the /pricing/ step-1 offer-card titles invisible (Stefan, 2026-08-04) while their .oc/.od
   siblings, which do set a colour, stayed readable. Pinned by test_website_pricing_page.py. */
button{font:inherit; color:inherit; cursor:pointer}

/* ambient glow (fixed, behind everything) */
.blobwrap{position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden;}
.blob{position:absolute; border-radius:50%; filter:blur(80px); opacity:.13;
  background:radial-gradient(circle,#f26522,transparent 70%); animation:drift 28s ease-in-out infinite alternate;}
@keyframes drift{from{transform:translate(0,0) scale(1)}to{transform:translate(80px,60px) scale(1.14)}}
main{display:block; position:relative; z-index:1;}

/* ===== shared site chrome ===== */
.nav{background:rgba(10,8,7,.8); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line); position:sticky; top:0; z-index:50;}
.nav-in{max-width:1280px; margin:0 auto; display:flex; align-items:center; gap:28px; padding:14px 24px;}
.logo{display:flex; align-items:center; white-space:nowrap;}
.logo img{height:34px; width:auto; display:block;}
footer.site .lg img{height:30px; width:auto; display:block;}
.nav-links{display:flex; gap:22px; font-size:14.5px; color:var(--ink2); flex:1;}
.nav-links a{text-decoration:none;}
.nav-links a:hover{color:var(--ink)}
.nav-links a.hot{color:var(--orange-h); font-weight:600;}
.btn{display:inline-block; background:var(--orange); color:#fff; font-weight:700; font-size:15px;
  padding:11px 22px; border-radius:10px; text-decoration:none; border:none; transition:box-shadow .18s, background .18s;
  box-shadow:0 0 30px rgba(242,101,34,.35);}
.btn:hover{background:#d4531a; box-shadow:0 0 40px rgba(242,101,34,.5);}
.btn.ghost{background:rgba(255,255,255,.06); color:var(--ink); border:1px solid rgba(255,255,255,.16); box-shadow:none;}
.btn.ghost:hover{background:rgba(255,255,255,.12);}
.btn.on-dark{background:var(--orange)}
.btn.ghost-dark{background:transparent; color:var(--on-dark); border:1.5px solid #4a443d; box-shadow:none;}
.btn.ghost-dark:hover{border-color:var(--on-dark)}
.btn:focus-visible,a:focus-visible{outline:2px solid var(--orange); outline-offset:2px;}

.wrap{max-width:1280px; margin:0 auto; padding:0 24px;}
section{padding:64px 0}
.eyebrow{display:inline-block; font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--orange-h); margin-bottom:10px;}
h1{font-size:46px; line-height:1.08; font-weight:850; letter-spacing:-1.2px; text-wrap:balance;}
h2{font-size:32px; line-height:1.15; font-weight:800; letter-spacing:-.7px; text-wrap:balance; margin-bottom:10px; color:#fff;}
h3{font-size:18px; font-weight:700; letter-spacing:-.2px;}
.lead{font-size:18px; color:var(--ink2); max-width:60ch;}
.grid{display:grid; gap:18px}
.g2{grid-template-columns:repeat(2,1fr)} .g3{grid-template-columns:repeat(3,1fr)} .g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.g4,.g3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){
  .g4,.g3,.g2{grid-template-columns:1fr}
  h1{font-size:33px} h2{font-size:26px}
  section{padding:44px 0}
}
/* mobile menu (2026-09-24): below 620px the links fold behind a toggle instead of vanishing
   — before this a phone visitor had no route to Pricing/Accounts/Blog/Contact at all. */
.navtog{display:none}
@media(max-width:620px){
  .nav-in{gap:12px; padding:12px 16px}
  .logo img{height:30px}
  .nav-links{display:none}
  .navcta{margin-left:auto; padding:9px 14px; font-size:14px; white-space:nowrap}
  .navcta-long{display:none}
  .navtog{display:flex; flex-direction:column; justify-content:center; gap:5px; width:44px;
    height:44px; padding:0 11px; background:transparent; border:1px solid var(--cardline);
    border-radius:10px; cursor:pointer}
  .navtog span{display:block; height:2px; background:var(--ink); border-radius:2px;
    transition:transform .18s, opacity .18s}
  .nav.open .navtog span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .nav.open .navtog span:nth-child(2){opacity:0}
  .nav.open .navtog span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .nav.open .nav-links{display:flex; flex-direction:column; gap:0; position:absolute; top:100%;
    left:0; right:0; background:var(--bg); border-bottom:1px solid var(--line);
    padding:6px 16px 12px; font-size:17px; box-shadow:0 18px 40px rgba(0,0,0,.6)}
  .nav.open .nav-links a{padding:13px 0; border-bottom:1px solid var(--line); color:var(--ink)}
  .nav.open .nav-links a:last-child{border-bottom:none}
  .nav.open .nav-links a.hot{color:var(--orange-h)}
}
.card{background:var(--card); border:1px solid var(--cardline); border-radius:16px; padding:22px;}
.card h3{margin-bottom:6px}
.card p{font-size:14.5px; color:var(--ink2);}

/* hero band */
.hero-grid{padding:64px 24px 48px; display:grid; grid-template-columns:1.15fr .85fr; gap:40px; align-items:center;}
.hero-grid.big{padding:72px 24px 56px; grid-template-columns:1.2fr .8fr; gap:44px;}
.split{display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:start;}
@media(max-width:860px){.hero-grid,.hero-grid.big,.split{grid-template-columns:1fr; padding-top:44px; padding-bottom:36px;}}
.heroband{border-bottom:1px solid var(--line); background:
  radial-gradient(900px 420px at 82% -10%, rgba(242,101,34,.14), transparent 60%);}

/* trust strip */
.truststrip{display:flex; gap:14px; flex-wrap:wrap; align-items:center; margin-top:26px;}
.badge{display:flex; align-items:center; gap:8px; background:var(--card); border:1px solid var(--cardline);
  border-radius:8px; padding:8px 14px; font-size:13px; font-weight:600; color:var(--ink);}
.badge svg{width:16px; height:16px; stroke:var(--ok); stroke-width:2.4; fill:none;}
.badge small{display:block; font-weight:400; color:var(--mut); font-size:11px;}

/* ops panel (hero visual) */
.opspanel{background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.11); border-radius:18px;
  padding:20px; backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); box-shadow:0 30px 80px rgba(0,0,0,.5);}
.oph{display:flex; justify-content:space-between; align-items:center; font-size:11.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--mut); padding-bottom:12px;}
.dotlive{width:9px; height:9px; border-radius:50%; background:#38c172; box-shadow:0 0 12px #38c172;}
.oprow{display:grid; grid-template-columns:1.3fr 1fr auto; gap:12px; align-items:center; padding:13px 0;
  border-top:1px solid rgba(255,255,255,.07); font-size:13px;}
.oprow b{display:block; font-size:14px; color:var(--ink);}
.oprow span{color:var(--mut); font-size:11.5px;}
.opr{text-align:right;}
.opr b{font-variant-numeric:tabular-nums; color:var(--orange-h);}
.st{font-size:10.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; padding:3px 10px; border-radius:99px;}
.st.ok{background:rgba(56,193,114,.14); color:#5fd694;}
.st.warn{background:rgba(242,101,34,.16); color:var(--orange-h);}
.optoast{margin-top:14px; background:rgba(56,193,114,.1); border:1px solid rgba(56,193,114,.25); color:#8fe0b0;
  border-radius:10px; padding:10px 14px; font-size:12.5px;}

/* platform ticker */
.ticker{overflow:hidden; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:13px 0; white-space:nowrap;}
.ticker div{display:inline-block; animation:tick 36s linear infinite; font-size:13px; color:var(--mut);
  letter-spacing:.14em; text-transform:uppercase;}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.ticker b{color:var(--orange-h); margin:0 12px;}

/* elevated bands (was .dark on light design) */
.dark{background:var(--bg2); color:var(--on-dark); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.dark h2{color:#fff}
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:18px;}
@media(max-width:900px){.stats{grid-template-columns:repeat(2,1fr)}}
.stat{background:var(--card); border:1px solid var(--cardline); border-radius:16px; padding:20px;}
.stat b{display:block; font-size:36px; font-weight:850; letter-spacing:-1px; color:var(--orange-h);
  font-variant-numeric:tabular-nums; text-shadow:0 0 26px rgba(242,101,34,.35);}
.stat span{font-size:13.5px; color:var(--ink2);}
.stat small{display:block; font-size:11.5px; color:var(--mut); margin-top:3px;}

/* platform cards */
.plat{display:flex; flex-direction:column; gap:8px; position:relative;}
.plat .from{font-size:13px; color:var(--ink2);}
.plat .from b{font-size:21px; color:var(--orange-h); font-weight:800; font-variant-numeric:tabular-nums;}
.plat .go{margin-top:8px; font-weight:700; color:var(--orange-h); font-size:14px; text-decoration:none;}
.plat-logo{font-weight:800; font-size:17px; display:flex; align-items:center; gap:8px; color:#fff;}
.dot{width:10px;height:10px;border-radius:3px;background:var(--orange);display:inline-block}

/* steps */
.steps{display:grid; grid-template-columns:repeat(5,1fr); gap:14px; counter-reset:st;}
@media(max-width:900px){.steps{grid-template-columns:1fr; max-width:520px}}
.step{background:var(--card); border:1px solid var(--cardline); border-radius:16px; padding:18px; position:relative;}
.step::before{counter-increment:st; content:counter(st,decimal-leading-zero);
  font-size:13px; font-weight:800; color:var(--orange-h); letter-spacing:.06em;}
.step h3{font-size:15.5px; margin:6px 0 4px;}
.step p{font-size:13.5px; color:var(--ink2);}

/* case studies */
.case{padding:24px; display:flex; flex-direction:column; gap:10px;}
.case .traj{font-size:24px; font-weight:850; letter-spacing:-.5px; font-variant-numeric:tabular-nums; color:#fff;}
.case .traj em{font-style:normal; color:var(--orange-h);}
.case .bars{display:flex; align-items:flex-end; gap:5px; height:56px; margin:6px 0;}
.case .bars i{flex:1; background:linear-gradient(180deg,#f9a06f,var(--orange)); border-radius:3px 3px 0 0; display:block;
  box-shadow:0 0 18px rgba(242,101,34,.25);}
.case .meta-line{font-size:12.5px; color:var(--ink2);}
.case .meta-line b{color:var(--ink)}

/* testimonials */
.quote{padding:22px; display:flex; flex-direction:column; gap:12px;}
.quote p{font-size:16px; font-weight:550; line-height:1.5; color:var(--ink);}
.quote p::before{content:"\201C"; color:var(--orange-h); font-weight:900;}
.quote p::after{content:"\201D"; color:var(--orange-h); font-weight:900;}
.quote .who{font-size:12.5px; color:var(--mut);}

/* pricing tables */
.tiers{width:100%; border-collapse:collapse; background:transparent; font-size:14.5px; color:var(--ink);}
.tiers th,.tiers td{padding:12px 14px; border-bottom:1px solid var(--line); text-align:right; font-variant-numeric:tabular-nums;}
.tiers th:first-child,.tiers td:first-child{text-align:left;}
.tiers thead th{font-size:11.5px; text-transform:uppercase; letter-spacing:.07em; color:var(--mut); font-weight:700;
  border-bottom:2px solid rgba(255,255,255,.25);}
.tiers .pricerow{background:rgba(242,101,34,.07);}
/* bundle contents: injected by site.js ABOVE the tier table (a bundle ships the same assets on
   S as on XL) and outside the table's .fx scroll wrapper, so it stays readable on a phone */
.bundlebox{display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:14px 16px;
  margin-bottom:12px; border:1px solid var(--cardline); border-left:3px solid var(--orange);
  border-radius:12px; background:rgba(242,101,34,.06);}
.bundlebox[hidden]{display:none;}
.bundlebox .bbk{font-size:11.5px; font-weight:800; letter-spacing:.07em; text-transform:uppercase;
  color:var(--orange-h); width:100%;}
.bundlebox .bba{display:inline-flex; align-items:center; gap:6px; font-size:13.5px; font-weight:600;
  color:var(--ink); background:var(--chip); border:1px solid var(--cardline); border-radius:99px; padding:5px 12px;}
.bundlebox .bba::before{content:"\2713"; color:var(--ok); font-weight:800;}
.bundlebox .bbn{width:100%; font-size:12.5px; color:var(--mut);}
.tiers .hl{background:#2a1b12;}
.tiers .hl td{color:#fff;}
.tiers .hl td:first-child{border-left:3px solid var(--orange);}
.tiers td b{font-weight:800}
.lowrate{display:inline-block; background:#3a2417; color:var(--orange-h); border-radius:99px; padding:1px 8px;
  font-size:10.5px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; margin-left:8px; vertical-align:1px;}
.tipq{display:inline-flex; align-items:center; justify-content:center; width:16px; height:16px; border-radius:50%;
  border:1.5px solid currentColor; background:none; color:inherit; font-size:10.5px; font-weight:800; margin-left:6px;
  position:relative; vertical-align:1px; cursor:help; padding:0; line-height:1;}
.tipq .tipbox{display:none; position:absolute; bottom:140%; right:-10px; width:min(320px,72vw); background:#26201a;
  border:1px solid rgba(255,255,255,.15); color:#fff; font-size:12.5px; font-weight:500; line-height:1.5; padding:12px 14px;
  border-radius:10px; text-align:left; text-transform:none; letter-spacing:0; z-index:30; box-shadow:0 6px 24px rgba(0,0,0,.5);}
.tipq:hover .tipbox, .tipq:focus .tipbox{display:block;}
.tiernote{font-size:12.5px; color:var(--mut); margin-top:10px; max-width:78ch;}
.fx{overflow-x:auto; border:1px solid var(--cardline); border-radius:16px; background:var(--card);}
.toggle{display:inline-flex; border:1px solid rgba(255,255,255,.25); border-radius:8px; overflow:hidden; margin:0 0 14px;}
.toggle button{background:transparent; border:none; padding:8px 18px; font-size:14px; font-weight:600; color:var(--ink2);}
.toggle button.on{background:var(--orange); color:#fff;}
.toggle.dk{border-color:rgba(255,255,255,.25);}
.toggle.dk button{background:transparent; color:var(--ink2);}
.toggle.dk button.on{background:var(--orange); color:#fff;}
.ptabs{display:flex; gap:8px; margin-bottom:16px; flex-wrap:wrap;}
.ptabs button{background:var(--card); border:1px solid var(--cardline); border-radius:8px; padding:9px 18px;
  font-weight:700; font-size:14.5px; color:var(--ink2);}
.ptabs button.on{border-color:var(--orange); color:var(--orange-h); background:rgba(242,101,34,.12);}

/* calculator */
.calc{background:var(--dark2); border:1px solid var(--cardline); color:var(--on-dark); border-radius:18px; padding:28px;
  display:grid; grid-template-columns:1fr 1fr; gap:28px; align-items:center;
  box-shadow:0 30px 80px rgba(0,0,0,.4);}
@media(max-width:760px){.calc{grid-template-columns:1fr}}
.calc label{display:block; font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; color:#a79d92; margin-bottom:6px;}
.calc input[type=range]{width:100%; accent-color:var(--orange);}
.calc .spendv{font-size:34px; font-weight:850; font-variant-numeric:tabular-nums; color:#fff;}
.calc .rec{background:#0f0e0c; border:1px solid #3a352f; border-radius:12px; padding:20px;}
.calc .rec .tier{font-size:30px; font-weight:850; color:var(--orange-h);}
.calc .rec .row{display:flex; justify-content:space-between; font-size:14px; padding:5px 0;
  border-bottom:1px solid #2c2823; color:#cfc8c0;}
.calc .rec .row b{color:#fff; font-variant-numeric:tabular-nums;}
.calc .note{font-size:11.5px; color:#7d746a; margin-top:10px;}

/* objections / FAQ */
.faq details{background:var(--card); border:1px solid var(--cardline); border-radius:12px; margin-bottom:10px; padding:0 18px;}
.faq summary{font-weight:700; font-size:15.5px; padding:15px 0; cursor:pointer; list-style:none; position:relative; padding-right:28px;}
.faq summary::after{content:"+"; position:absolute; right:2px; top:12px; font-size:20px; color:var(--orange-h); font-weight:800;}
.faq details[open] summary::after{content:"\2013"}
.faq details p{padding:0 0 16px; font-size:14.5px; color:var(--ink2); max-width:80ch;}

/* objection cards */
.obj{border-left:3px solid var(--orange);}
.obj .q{font-size:13px; color:var(--mut); font-style:italic; margin-bottom:8px;}
.obj .q::before{content:"Real client question: "; font-style:normal; font-weight:700; color:var(--orange-h); font-size:11px;
  text-transform:uppercase; letter-spacing:.05em; display:block; margin-bottom:2px;}

/* CTA band */
.ctaband{background:radial-gradient(700px 340px at 50% -40%, rgba(242,101,34,.22), transparent 65%), var(--bg2);
  border-top:1px solid var(--line); color:var(--on-dark); text-align:center; padding:72px 24px;}
.ctaband h2{color:#fff; margin-bottom:8px;}
.ctaband p{color:var(--ink2); margin-bottom:24px;}
.ctaband .btns{display:flex; gap:14px; justify-content:center; flex-wrap:wrap;}

/* mini lead form */
.leadform{max-width:520px; background:var(--card); border:1px solid var(--cardline); border-radius:18px; padding:26px;}
.leadform .f{margin-bottom:14px;}
.leadform label{display:block; font-size:13px; font-weight:600; margin-bottom:5px;}
.leadform label em{color:var(--orange-h); font-style:normal;}
.leadform input,.leadform select{width:100%; padding:11px 12px; border:1px solid rgba(255,255,255,.16); border-radius:8px;
  font:inherit; font-size:14.5px; background:rgba(0,0,0,.3); color:var(--ink);}
.leadform input::placeholder{color:#7d746a;}
.leadform input:focus,.leadform select:focus{outline:2px solid var(--orange); border-color:transparent;}
.leadform select option{background:#1c1815; color:var(--ink);}

/* footer */
footer.site{background:var(--bg2); color:var(--ink2); padding:48px 0 30px; font-size:14px; border-top:1px solid var(--line);}
footer.site .cols{display:grid; grid-template-columns:2fr 1fr 1fr 1fr auto; gap:28px; margin-bottom:28px;}
@media(max-width:760px){footer.site .cols{grid-template-columns:1fr 1fr}}
footer.site a{text-decoration:none; display:block; padding:3px 0; color:var(--ink2);}
footer.site a:hover{color:#fff}
footer.site .lg{color:#fff; font-weight:900; font-size:18px; margin-bottom:10px;}
footer.site .fine{border-top:1px solid var(--line); padding-top:18px; font-size:12px; color:var(--mut);}

/* accounts catalog */
.filters{display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:18px;}
.filters input[type=search]{flex:1 1 260px; padding:11px 14px; border:1px solid rgba(255,255,255,.16); border-radius:10px;
  font:inherit; font-size:14.5px; background:rgba(0,0,0,.3); color:var(--ink);}
.filters input::placeholder{color:#7d746a;}
.filters select{padding:11px 12px; border:1px solid rgba(255,255,255,.16); border-radius:10px; font:inherit; font-size:14px;
  background:rgba(0,0,0,.3); color:var(--ink);}
.filters select option{background:#1c1815;}
.filters input:focus,.filters select:focus{outline:2px solid var(--orange); border-color:transparent;}
.fcount{font-size:13px; color:var(--mut); margin-left:auto;}
.acclist{display:grid; gap:10px;}
.accrow{display:grid; grid-template-columns:210px 1fr auto; gap:18px; align-items:center;
  background:var(--card); border:1px solid var(--cardline); border-radius:14px; padding:16px 20px;}
@media(max-width:820px){.accrow{grid-template-columns:1fr}}
.accrow .nm{font-weight:800; font-size:16px; color:#fff;}
.accrow .nm .price{display:block; font-size:12.5px; color:var(--orange-h); font-weight:700; margin-top:2px;}
.accrow .ds{font-size:13.5px; color:var(--ink2);}
.accrow .tags{margin-top:6px; display:flex; gap:6px; flex-wrap:wrap;}
.accrow .tag{background:var(--chip); border:1px solid var(--cardline); border-radius:99px; padding:1px 9px;
  font-size:11px; color:var(--ink2); font-weight:600;}
.accrow .open{font-weight:700; color:var(--orange-h); font-size:14px; text-decoration:none; white-space:nowrap;}
/* blog */
.featpost{display:grid; grid-template-columns:1.4fr .6fr; gap:24px; text-decoration:none; align-items:center;}
@media(max-width:760px){.featpost{grid-template-columns:1fr}}
.featthumb{background:radial-gradient(340px 200px at 70% 30%, rgba(242,101,34,.5), transparent 70%), #1c1510;
  border:1px solid var(--cardline); border-radius:14px; min-height:180px;
  display:flex; align-items:center; justify-content:center;}
.featthumb span{color:var(--orange-h); font-weight:800; letter-spacing:.1em; text-transform:uppercase; font-size:12px;}
.card.post{text-decoration:none; display:flex; flex-direction:column; gap:8px;}
.card.post h3{font-size:16.5px; line-height:1.3;}
.card.post p{font-size:13.5px;}
.postmeta{font-size:12px; color:var(--mut); margin-top:auto; padding-top:6px;}
.card.post:hover h3, .featpost:hover h2{color:var(--orange-h);}
.pill{display:inline-block; background:rgba(242,101,34,.14); color:var(--orange-h); border-radius:99px; padding:2px 10px;
  font-size:11.5px; font-weight:700; letter-spacing:.03em;}

/* content-strategy tab (internal doc) */
.doc{max-width:860px; margin:0 auto; padding:48px 24px;}
.doc h1{font-size:30px; margin-bottom:8px; color:#fff;}
.doc h2{font-size:21px; margin:36px 0 10px;}
.doc p,.doc li{font-size:15px; color:var(--ink2);}
.doc ul{padding-left:22px;} .doc li{margin:6px 0;}
.doc table{width:100%; border-collapse:collapse; font-size:13.5px; background:var(--card); display:block; overflow-x:auto;}
.doc th,.doc td{padding:9px 12px; border:1px solid var(--cardline); text-align:left; vertical-align:top; color:var(--ink2);}
.doc th{background:var(--chip); font-size:11.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--mut);}
.doc .src{color:var(--ok); font-weight:600; white-space:nowrap;}
.doc .need{color:#ff8f86; font-weight:600;}
@media (prefers-reduced-motion: reduce){*{transition:none!important; animation:none!important; scroll-behavior:auto!important}
  .blob{display:none}}

/* article prose (blog posts, product bodies, legal pages) */
.prose{max-width:74ch; color:var(--ink2); font-size:15.5px;}
.prose h1,.prose h2,.prose h3{color:#fff; margin:28px 0 10px; letter-spacing:-.4px;}
.prose h2{font-size:24px;} .prose h3{font-size:18px;}
.prose p{margin:12px 0;}
.prose ul,.prose ol{margin:12px 0; padding-left:24px;}
.prose li{margin:6px 0;}
.prose a{color:var(--orange-h); font-weight:600; text-decoration:none;}
.prose a:hover{text-decoration:underline;}
.prose img{border-radius:12px; border:1px solid var(--cardline); margin:16px 0; height:auto;}
.prose table{width:100%; border-collapse:collapse; font-size:13.5px; margin:16px 0; display:block; overflow-x:auto;}
.prose th,.prose td{padding:9px 12px; border:1px solid var(--cardline); text-align:left;}
.prose th{background:var(--chip); color:var(--mut); font-size:11.5px; text-transform:uppercase; letter-spacing:.05em;}
.prose blockquote{border-left:3px solid var(--orange); padding:6px 16px; margin:14px 0; color:var(--ink);}
.prose code{background:var(--chip); border-radius:4px; padding:1px 6px; font-size:13px;}
.prose strong{color:var(--ink);}

/* telegram affordance: every t.me link carries the icon + label */
.tgico{width:16px; height:16px; display:inline-block; vertical-align:-2px; margin-right:8px; fill:currentColor;}
a.btn .tgico{width:17px; height:17px;}
.tgsuffix{opacity:.85; font-weight:600;}

/* product landing layout: content + sticky offer rail */
.landgrid{display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:40px; align-items:start;}
@media(max-width:980px){.landgrid{grid-template-columns:1fr}}
.railcard{position:sticky; top:76px;}
.railcard .price{font-size:26px; font-weight:800; color:var(--orange-h); font-variant-numeric:tabular-nums;}
.railcard ul{list-style:none; padding:0; margin:12px 0; font-size:13.5px; color:var(--ink2);}
.railcard li{padding:6px 0; border-bottom:1px solid rgba(255,255,255,.06);}
.railcard li:last-child{border:none;}
.prose{max-width:none;}
.prose > p:first-child{font-size:17px; color:var(--ink);}

/* partner cards */
.pcard{display:flex; flex-direction:column; gap:8px;}
.plogo{background:#f4f1ec; border-radius:12px; padding:14px; display:flex; align-items:center; justify-content:center; height:86px;}
.plogo img{max-height:56px; max-width:70%; width:auto; object-fit:contain;}
.pcard h3{font-size:18px;}
.ptag{font-size:12.5px; color:var(--orange-h); font-weight:700;}
.pcard p{font-size:13.5px; color:var(--ink2);}
.pbul{list-style:none; padding:0; margin:4px 0; font-size:13px; color:var(--ink2);}
.pbul li{padding:3px 0;}
.promo{display:inline-block; background:rgba(242,101,34,.14); color:var(--orange-h); border-radius:8px;
  padding:6px 12px; font-size:12.5px; font-weight:700; margin-bottom:10px;}
.pfoot{margin-top:auto; display:flex; flex-direction:column; gap:10px;}
.pfoot .btn{text-align:center;}

html[lang="ru"] .obj .q::before{content:"Реальный вопрос клиента: ";}

.qrcol{display:none;}
@media(min-width:900px){.qrcol{display:block;}}
#tg-qr{background:#fff; padding:8px; border-radius:10px; width:164px; height:164px; display:flex; align-items:center; justify-content:center;}
#tg-qr img, #tg-qr canvas{display:block; width:148px; height:148px;}

/* cookie consent bar */
.cookiebar{position:fixed; left:0; right:0; bottom:0; z-index:80; background:rgba(10,8,7,.97);
  backdrop-filter:blur(10px); border-top:1px solid var(--cardline);}
.cookiebar-in{max-width:1280px; margin:0 auto; padding:16px 24px; display:flex; gap:20px; align-items:center;
  justify-content:space-between; flex-wrap:wrap;}
.cookiebar p{font-size:13.5px; color:var(--ink2); margin:0; max-width:70ch;}
.cookiebar p a{color:var(--orange-h);}
.cookiebar-btns{display:flex; gap:10px; flex-shrink:0;}
.cookiebar .btn{padding:9px 20px; font-size:14px;}
@media(max-width:620px){.cookiebar-in{flex-direction:column; align-items:stretch;} .cookiebar-btns{justify-content:flex-end;}}

/* ===================================================================
   PRICING PAGE REDESIGN (2026-07-31, owner-approved, ported from
   mockups/zmatic-pricing-redesign.html). The fragment wraps its markup
   in .page-pricing; rules below that collide with existing class names
   used elsewhere (.tiers, .step, .calc, .rec, .plat) are namespaced
   under it so the 58 product pages and home/ru cards keep their own
   meaning of those names. Genuinely new classes are appended plain.
   .bundlebox and .fx are reused as-is (already correct for this page).
=================================================================== */
.page-pricing .hero{padding:44px 0 8px}
.page-pricing .proof{display:flex; flex-wrap:wrap; gap:8px; margin-top:20px}
.page-pricing .proof span{font-size:13px; font-weight:600; color:var(--ink2); background:var(--chip);
  border:1px solid var(--cardline); border-radius:99px; padding:6px 13px}
.page-pricing .proof b{color:var(--ink)}

/* step blocks: numbered inline row, NOT the numbered card grid used on /how-it-works/ */
.page-pricing .step{display:flex; align-items:baseline; gap:10px; margin-bottom:14px;
  background:none; border:none; padding:0}
.page-pricing .step::before{content:none}
.page-pricing .step .stepn{flex:none; width:24px; height:24px; border-radius:7px; background:var(--orange);
  color:#fff; font-size:13px; font-weight:800; display:grid; place-items:center;
  font-family:'Archivo',sans-serif}
.page-pricing .step h2{margin:0}
.page-pricing .step p{font-size:14.5px; color:var(--mut); margin-left:auto; text-align:right}

/* 1. picker */
.page-pricing .pickbar{display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:14px}
.page-pricing .search{position:relative; flex:1 1 260px; max-width:340px}
.page-pricing .search input{width:100%; background:var(--dark2); border:1px solid var(--cardline);
  border-radius:10px; padding:10px 12px 10px 34px; font-size:14.5px}
.page-pricing .search input::placeholder{color:var(--mut)}
.page-pricing .search::before{content:"⌕"; position:absolute; left:12px; top:8px; color:var(--mut); font-size:16px}
.page-pricing .fams{display:flex; gap:6px; flex-wrap:wrap}
.page-pricing .fams button{background:transparent; border:1px solid var(--cardline); color:var(--ink2);
  border-radius:99px; padding:7px 14px; font-size:13.5px; font-weight:600}
.page-pricing .fams button.on{background:var(--chip); color:var(--ink); border-color:rgba(255,255,255,.2)}

/* offer filter: two real choices plus "show me everything", each stating what it is and who
   it suits — a bare Standard/High-risk toggle told a first-time buyer nothing */
.page-pricing .offers{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:16px}
.page-pricing .offers button{text-align:left; background:var(--card); border:1px solid var(--cardline);
  border-radius:13px; padding:13px 15px; display:flex; flex-direction:column; gap:3px;
  transition:border-color .15s, background .15s}
.page-pricing .offers button:hover{border-color:rgba(255,255,255,.24)}
.page-pricing .offers button.on{border-color:var(--orange); background:rgba(242,101,34,.1)}
.page-pricing .offers .ot{font-size:15px; font-weight:800; letter-spacing:-.2px; display:flex; gap:8px;
  align-items:baseline}
.page-pricing .offers .oc{font-size:11.5px; font-weight:700; color:var(--mut)}
.page-pricing .offers button.on .oc{color:var(--orange-h)}
.page-pricing .offers .od{font-size:12.5px; line-height:1.4; color:var(--ink2)}
.page-pricing .pcount{font-size:13px; color:var(--mut); margin-left:auto}
.page-pricing .morewrap{display:flex; justify-content:center; gap:10px; margin-top:12px; flex-wrap:wrap}

.page-pricing .plats{display:grid; grid-template-columns:repeat(auto-fill,minmax(178px,1fr)); gap:8px}
@media(max-width:620px){.page-pricing .plats{grid-template-columns:repeat(2,1fr)}}
/* .plat COLLIDES with the home/ru platform-card class — fully overridden here, namespaced */
.page-pricing .plat{display:flex; flex-direction:column; gap:2px; text-align:left; background:var(--card);
  border:1px solid var(--cardline); border-radius:12px; padding:10px 12px; cursor:pointer;
  transition:border-color .15s, background .15s; position:static}
.page-pricing .plat:hover{border-color:rgba(255,255,255,.24)}
.page-pricing .plat.on{border-color:var(--orange); background:rgba(242,101,34,.1)}
.page-pricing .plat .pn{font-size:14px; font-weight:700; letter-spacing:-.2px; display:flex; gap:6px;
  align-items:baseline; justify-content:space-between}
.page-pricing .plat .pd{font-size:12px; line-height:1.3; color:var(--ink2); display:-webkit-box;
  -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.page-pricing .plat .pf{font-size:11.5px; font-weight:700; color:var(--mut); white-space:nowrap}
.page-pricing .plat.on .pf{color:var(--orange-h)}
.page-pricing .plat .pfoot{display:flex; align-items:center; gap:8px; margin-top:auto; padding-top:7px}
.page-pricing .plat .choose{flex:1; background:var(--chip); border:1px solid rgba(255,255,255,.16);
  color:var(--ink); border-radius:8px; padding:6px 8px; font-size:12.5px; font-weight:700}
.page-pricing .plat:hover .choose{background:rgba(255,255,255,.12)}
.page-pricing .plat.on .choose{background:var(--orange); border-color:var(--orange); color:#fff}
.page-pricing .plat .deep{font-size:11.5px; font-weight:700; color:var(--orange-h); text-decoration:none;
  white-space:nowrap}
.page-pricing .plat .deep:hover{text-decoration:underline}
.page-pricing a.plat.more{text-decoration:none; border-style:dashed; background:rgba(255,255,255,.02)}
.page-pricing a.plat.more:hover{border-color:var(--orange); background:rgba(242,101,34,.07)}
.page-pricing a.plat.more .pf{color:var(--orange-h)}
.page-pricing a.plat.more .choose{display:block; text-align:center; color:var(--orange-h)}
.page-pricing .plat .badge{align-self:flex-start; margin-top:4px; font-size:10px; font-weight:800; letter-spacing:.06em;
  text-transform:uppercase; color:#0e0c0a; background:var(--orange-h); border-radius:4px; padding:1px 5px}
.page-pricing .plat .badge.hr{background:transparent; color:var(--warn,#e8a838); border:1px solid rgba(232,168,56,.45)}

.page-pricing .famnote{font-size:13px; color:var(--mut); margin:0 0 12px; max-width:82ch}
.page-pricing .deeplink{margin:-4px 0 14px}
.page-pricing .deeplink a{font-size:14px; font-weight:700; color:var(--orange-h); text-decoration:none}
.page-pricing .deeplink a:hover{text-decoration:underline}
.page-pricing .bands{display:flex; gap:6px; margin:0 0 8px; flex-wrap:wrap; align-items:center}
.page-pricing .bands .bandlab{font-size:11.5px; font-weight:800; letter-spacing:.07em; text-transform:uppercase;
  color:var(--mut); margin-right:4px}
.page-pricing .bands button{background:var(--dark2); border:1px solid var(--cardline); color:var(--ink2);
  border-radius:9px; padding:9px 16px; font-size:14px; font-weight:700}
.page-pricing .bands button.on{background:var(--orange); border-color:var(--orange); color:#fff}
.page-pricing .bands button[disabled]{opacity:.32; cursor:not-allowed}
.page-pricing .bandnote{font-size:13px; color:var(--mut); margin-top:8px; max-width:70ch}
.page-pricing .tiny{font-size:11.5px; color:var(--mut)}

/* 2. product copy above the table */
.page-pricing .pgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; align-items:start}
.page-pricing .pgrid .card h3{display:flex; align-items:center; gap:8px; margin-bottom:8px; font-size:12px;
  letter-spacing:.08em; text-transform:uppercase; color:var(--orange-h); font-weight:800}
.page-pricing .pgrid p{font-size:14.5px; color:var(--ink2)}
.page-pricing .pgrid ul{list-style:none; padding:0; display:flex; flex-direction:column; gap:5px;
  font-size:14px; color:var(--ink2)}
.page-pricing .pgrid li{display:flex; gap:8px}
.page-pricing .pgrid li::before{content:"✓"; color:var(--ok); font-weight:800; flex:none}

/* 3. compact tier strip (COLLIDES with the product-page .tiers TABLE — fully overridden) */
.page-pricing .tiers{display:grid; grid-template-columns:repeat(4,1fr); gap:10px; width:auto;
  background:none; font-size:inherit; color:inherit}
.page-pricing .tw{position:relative; text-align:left; background:var(--card); border:1px solid var(--cardline);
  border-radius:14px; padding:14px; display:flex; flex-direction:column; gap:8px; transition:border-color .15s}
.page-pricing .tw:hover{border-color:rgba(255,255,255,.24)}
.page-pricing .tw.on{border-color:var(--orange); background:rgba(242,101,34,.08)}
.page-pricing .tw .tt{display:flex; align-items:baseline; gap:7px}
.page-pricing .tw .tl{font-size:15px; font-weight:800; letter-spacing:-.2px}
.page-pricing .tw .ts{font-size:11.5px; color:var(--mut); text-transform:uppercase; letter-spacing:.06em}
.page-pricing .tw-pct{font-size:31px; font-weight:850; letter-spacing:-1.4px; line-height:1;
  font-family:'Archivo','Hanken Grotesk',sans-serif}
.page-pricing .tw-pct small{font-size:13px; font-weight:600; color:var(--mut); letter-spacing:0; margin-left:4px}
.page-pricing .tw .row{display:flex; justify-content:space-between; gap:10px; font-size:13px; color:var(--ink2);
  border-top:1px solid var(--line); padding-top:6px}
.page-pricing .tw .row b{font-weight:700; color:var(--ink)}
.page-pricing .tw .best{position:absolute; top:-9px; right:10px; font-size:10px; font-weight:800;
  letter-spacing:.06em; text-transform:uppercase; background:#3a2417; color:var(--orange-h);
  border-radius:99px; padding:2px 8px}

/* calculator (COLLIDES with the product-page .calc — fully overridden, different grid ratio) */
.page-pricing .calc{display:grid; grid-template-columns:1.25fr .75fr; gap:22px; background:var(--dark);
  border:1px solid var(--cardline); color:inherit; border-radius:18px; padding:22px; box-shadow:none}
@media(max-width:760px){.page-pricing .calc{grid-template-columns:1fr}}
.page-pricing .calc label{font-size:12px; letter-spacing:.07em; text-transform:uppercase; color:var(--mut)}
.page-pricing .calc .spendv{font-family:'Archivo',sans-serif; font-size:34px; font-weight:850;
  letter-spacing:-1.4px; margin:4px 0 12px; color:var(--ink)}
.page-pricing .calc input[type=range]{width:100%; accent-color:var(--orange)}
.page-pricing .calc .rec{background:var(--dark2); border:1px solid var(--cardline); border-radius:14px;
  padding:16px}
.page-pricing .calc .rec .recv{font-size:30px; font-weight:850; letter-spacing:-1px; color:var(--orange-h);
  line-height:1; font-family:'Archivo','Hanken Grotesk',sans-serif}
.page-pricing .calc .rec .r{display:flex; justify-content:space-between; gap:12px; font-size:13.5px;
  color:var(--ink2); border-bottom:1px solid var(--line); padding:7px 0}
.page-pricing .calc .rec .r:last-child{border:none}
.page-pricing .calc .rec .r b{color:#fff}

/* comparison matrix, collapsed by default (new — no collision) */
details.cmp{margin-top:16px; border:1px solid var(--cardline); border-radius:14px; background:var(--card)}
details.cmp>summary{cursor:pointer; list-style:none; padding:14px 18px; font-weight:700; font-size:15px;
  display:flex; align-items:center; gap:10px}
details.cmp>summary::-webkit-details-marker{display:none}
details.cmp>summary::after{content:"+"; margin-left:auto; color:var(--orange-h); font-weight:800; font-size:19px}
details.cmp[open]>summary::after{content:"–"}
table.matrix{width:100%; border-collapse:collapse; font-size:14px; min-width:560px}
table.matrix th,table.matrix td{padding:10px 12px; border-bottom:1px solid var(--line);
  text-align:right; font-variant-numeric:tabular-nums}
table.matrix th:first-child,table.matrix td:first-child{text-align:left; color:var(--ink2)}
table.matrix thead th{font-size:11.5px; text-transform:uppercase; letter-spacing:.07em; color:var(--mut);
  border-bottom:2px solid rgba(255,255,255,.22)}
table.matrix tr.price{background:rgba(242,101,34,.07)}
table.matrix tr.price td,table.matrix tr.price th{color:#fff; font-weight:700}
table.matrix td.sel,table.matrix th.sel{background:rgba(242,101,34,.1)}

/* sticky selection bar (new) */
.selbar{position:fixed; left:0; right:0; bottom:0; z-index:70; transform:translateY(110%);
  transition:transform .22s ease; background:rgba(20,18,16,.94); backdrop-filter:blur(14px);
  border-top:1px solid var(--cardline)}
.selbar.show{transform:none}
.selbar-in{max-width:1280px; margin:0 auto; padding:11px 24px; display:flex; align-items:center;
  gap:16px; flex-wrap:wrap}
.selbar .who{font-weight:800; letter-spacing:-.3px}
.selbar .bits{display:flex; gap:14px; flex-wrap:wrap; font-size:13.5px; color:var(--ink2)}
.selbar .bits b{color:#fff}
.selbar .sbl{font-size:13.5px; font-weight:700; color:var(--orange-h); text-decoration:none; margin-left:auto}
.selbar .sbcta{padding:9px 16px; font-size:14px; white-space:nowrap}
.page-pricing .reccta{display:block; text-align:center; margin-top:18px}
.page-pricing .reccta-note{margin-top:8px; text-align:center}
/* phone: the bar was 159px (19% of an 844px screen) with only an exit link; keep one line of
   price + the bot button */
@media(max-width:620px){
  .selbar-in{padding:8px 16px; gap:10px; flex-wrap:nowrap}
  .selbar .who{font-size:14.5px; white-space:nowrap; min-width:0; overflow:hidden;
    text-overflow:ellipsis}
  .selbar .bits{gap:8px; font-size:12.5px; flex-wrap:nowrap; flex-shrink:0}
  .selbar .bits > span:first-child, .selbar .bits > span:nth-child(3), .selbar .sb-minbit,
  .selbar .sbl{display:none}
  .selbar .bits > span{white-space:nowrap}
  .selbar .sbcta{margin-left:auto; padding:8px 12px; font-size:13.5px}
  .page-pricing .plat .deep{display:block; padding:8px 0}
}

@media(max-width:960px){
  .page-pricing .offers{grid-template-columns:1fr}
  .page-pricing .pgrid{grid-template-columns:1fr}
  .page-pricing .calc{grid-template-columns:1fr}
  .page-pricing .tiers{grid-template-columns:repeat(2,1fr)}
  .page-pricing .step p{display:none}
}
@media(max-width:620px){
  .page-pricing .plat .pfoot{flex-direction:column; align-items:stretch; gap:6px}
  .page-pricing .plat .choose{width:100%}
  .page-pricing .plat .deep{text-align:center}
}