/* Soc-Promotion new engine — design system ported from tmpl_idea/21 */
/* SINGLE SOURCE OF TRUTH for design tokens. Every stylesheet that loads together
   with app.css must USE these names, never redefine them and never invent a second
   name for the same value. recovery-reset.css is the one exception: it is a
   standalone page that never loads app.css and carries its own palette. */
:root{
  --navy:#22304A;
  --navy-2:#2E3F5F;
  --text:#5E6E82;
  --head:var(--navy);   /* semantic alias of --navy — do not fork it */
  --blue:#2C7BE5;
  --blue-d:#1B62C4;
  --blue-t:#EAF2FD;
  --green:#00B67A;
  --green-d:#009A67;
  --green-t:#E9FBF4;
  --orange:#F5803E;
  --orange-d:#E56E2B;
  --bg:#FFFFFF;
  --bg-soft:#EDF2F9;
  --line:#E3E9F1;
  --mut:#93A3B8;
  --star-off:#D9E1EB;
  --radius:12px;
  --shadow:0 1px 2px rgba(34,48,74,.06),0 6px 20px -8px rgba(34,48,74,.12);
  --shadow-lg:0 10px 34px -10px rgba(34,48,74,.22);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:80px}
body{
  font-family:'Open Sans',system-ui,-apple-system,sans-serif;
  font-size:15px;line-height:1.6;color:var(--text);background:var(--bg);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
h1,h2,h3,h4{font-family:'Poppins',sans-serif;color:var(--head);line-height:1.25;font-weight:700}
img{max-width:100%;height:auto}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}
button{font-family:inherit;cursor:pointer}
.container{max-width:1140px;margin:0 auto;padding:0 16px}
.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
:focus-visible{outline:3px solid rgba(44,123,229,.45);outline-offset:2px;border-radius:6px}
/* [hidden] must beat any component display: rule (e.g. .rev{display:flex}). */
[hidden]{display:none!important}

/* ---------- breakpoints ----------
   Ladder for all NEW work — mobile-first, min-width only:

       480px   large phone
       600px   small tablet / phone landscape
       768px   tablet
       992px   desktop

   Use exactly these four. Do not invent a value "just for this component" —
   that is how the current file ended up with 29 distinct conditions
   (420/481/560/600/620/700/768/900/992 min- and 399/420/440/480/560/600/640/
   680/719/720/760/899 max-), several of which differ only by a space or by
   one pixel. Existing queries were left alone on purpose: migrating them is a
   separate pass with its own visual review, not a side effect of this cleanup.

   prefers-reduced-motion is a separate concern and currently appears in 10
   blocks across the stylesheets; fold them together when you touch them. */

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:44px;padding:10px 18px;border-radius:10px;border:1px solid transparent;
  font-family:'Poppins',sans-serif;font-weight:600;font-size:14px;line-height:1.2;
  text-decoration:none!important;transition:background .18s,border-color .18s,transform .12s,box-shadow .18s;
  white-space:nowrap;
}
.btn:active{transform:translateY(1px)}
.btn-orange{background:var(--orange);color:#fff!important;box-shadow:0 6px 16px -6px rgba(245,128,62,.55)}
.btn-orange:hover{background:var(--orange-d)}
.btn-blue{background:var(--blue);color:#fff!important;box-shadow:0 6px 16px -6px rgba(44,123,229,.5)}
.btn-blue:hover{background:var(--blue-d)}.btn-ghost-blue{background:#fff;color:var(--blue)!important;border-color:#C4D8F5}
.btn-ghost-blue:hover{background:#F0F6FE}
.btn-big{min-height:52px;font-size:16px}
.icon-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:10px;border:none;background:transparent;color:var(--navy);
}
.icon-btn:hover{background:var(--bg-soft)}

/* ---------- header ---------- */
.site-header{
  position:sticky;top:0;z-index:60;background:rgba(255,255,255,.95);
  backdrop-filter:blur(8px);border-bottom:1px solid transparent;transition:border-color .2s,box-shadow .2s;
}
.site-header.scrolled{border-bottom-color:var(--line);box-shadow:0 4px 18px -8px rgba(34,48,74,.14)}
.header-in{display:flex;align-items:center;gap:4px;min-height:62px;max-width:1140px;margin:0 auto;padding:0 10px}
.brand{display:inline-flex;align-items:center;gap:7px;text-decoration:none!important;margin-right:2px;min-height:44px}
.brand img{width:32px;height:32px;display:block}
.brand-name{font-family:'Poppins',sans-serif;font-weight:700;font-size:12.5px;line-height:1.1;color:var(--blue)}
.spacer{flex:1}
.header-in .btn{min-height:44px;padding:8px 12px;font-size:12.5px}
.header-in .btn-orange{box-shadow:none}
.header-in .btn-blue{box-shadow:none}
@media(max-width:399px){
  .header-in{gap:2px;padding:0 6px}
  .header-in .btn{padding:8px 8px;font-size:11.5px;border-radius:8px}
  .brand{gap:5px}
  .brand-name{font-size:11.5px}
  #burgerBtn{width:44px}
}
@media(min-width:600px){
  .header-in{gap:10px;padding:0 16px}
  .header-in .btn{font-size:13.5px;padding:9px 16px}
  .brand img{width:38px;height:38px}
  .brand-name{font-size:13.5px}
}

/* ---------- drawer ---------- */
.overlay{
  position:fixed;inset:0;background:rgba(30,42,58,.45);z-index:70;
  opacity:0;transition:opacity .25s ease;
}
.overlay.show{opacity:1}
.drawer{
  position:fixed;top:0;left:0;bottom:0;width:min(320px,88vw);z-index:80;
  background:#fff;box-shadow:0 0 40px rgba(34,48,74,.25);
  transform:translateX(-105%);transition:transform .28s cubic-bezier(.4,0,.2,1);
  display:flex;flex-direction:column;
}
.drawer.open{transform:translateX(0)}
.drawer-head{
  display:flex;align-items:center;gap:8px;padding:10px 10px 10px 16px;
  border-bottom:1px solid var(--line);flex:none;
}
.drawer-brand{display:flex;align-items:center;gap:8px;text-decoration:none!important;border-radius:10px;margin:-4px -6px;padding:4px 6px}
.drawer-brand:hover{background:var(--blue-t)}
.drawer-head .brand-name{font-size:11.5px}
.drawer-close{
  margin-left:auto;width:44px;height:44px;border:none;background:none;color:var(--head);
  display:flex;align-items:center;justify-content:center;border-radius:12px;flex:none;
}
.drawer-close:hover{background:var(--blue-t);color:var(--blue)}
.drawer-body{overflow-y:auto;flex:1;padding:8px 10px 16px}
.nav-link,.nav-toggle{
  display:flex;align-items:center;gap:12px;width:100%;
  padding:11px 10px;border:none;background:none;border-radius:12px;
  font-size:14.5px;font-weight:600;color:var(--head);text-align:left;
  font-family:'Open Sans',sans-serif;text-decoration:none!important;min-height:44px;
}
.nav-link:hover,.nav-toggle:hover{background:var(--blue-t);color:var(--blue)}
.nav-link .icon,.nav-toggle .icon{width:19px;height:19px;color:var(--blue);flex:none}
.nav-toggle .chev{margin-left:auto;width:16px;height:16px;color:#9AAABE;transition:transform .25s ease}
.nav-group.open>.nav-toggle .chev{transform:rotate(180deg)}
.nav-sub{display:none;padding:2px 0 4px 34px;list-style:none}
.nav-group.open>.nav-sub{display:block;animation:fadeIn .25s ease}
.nav-sub a{display:flex;align-items:center;min-height:44px;padding:5px 10px;border-radius:10px;font-size:13.5px;color:var(--text)}
.nav-sub a:hover{background:var(--blue-t);color:var(--blue);text-decoration:none}
/* current page — light-blue like the hover; left bar + bold mark "you are here" */
.nav-link.active,.nav-sub a.active{background:var(--blue-t);color:var(--blue);box-shadow:inset 3px 0 0 var(--blue)}
.nav-link.active{font-weight:700}
.nav-sub a.active{font-weight:600}
.nav-link.active .icon{color:var(--blue)}
.nav-link.active:hover,.nav-sub a.active:hover{background:#DEEBFB;color:var(--blue-d)}
.drawer-sep{border:none;border-top:1px solid var(--line);margin:6px 4px}
.drawer-cta{display:flex;flex-wrap:wrap;gap:8px;padding:12px 16px;border-bottom:1px solid var(--line);flex:none}
.drawer-cta .btn{flex:1}
.drawer-cta form{flex:1;display:flex}
.drawer-cta .drawer-balance{flex:1 0 100%;margin:0}
.drawer-balance{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 12px;margin:2px 2px 6px;background:var(--blue-t);border-radius:10px;font-size:13px;font-weight:600;color:var(--mut)}
.drawer-balance b{color:var(--blue);font-size:15px}

/* Contact page — searchable multi-select order picker */
.order-picker{position:relative}
.order-picker-trigger{display:flex;align-items:center;gap:10px;width:100%;padding:11px 14px;border:1px solid var(--line);border-radius:var(--radius);background:var(--bg);color:var(--head);font:inherit;font-weight:600;cursor:pointer;text-align:left;transition:border-color .15s,box-shadow .15s}
.order-picker-trigger:hover{border-color:var(--blue)}
.order-picker.is-open .order-picker-trigger{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-t)}
.op-summary{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.op-summary.is-empty{color:var(--mut);font-weight:400}
.op-chev{width:18px;height:18px;color:var(--mut);flex:none;transition:transform .2s}
.order-picker.is-open .op-chev{transform:rotate(180deg)}
.order-picker-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.op-chip{display:inline-flex;align-items:center;gap:4px;padding:4px 6px 4px 10px;background:var(--blue-t);color:var(--blue-d);border-radius:999px;font-size:13px;font-weight:700}
.op-chip-x{border:none;background:transparent;color:var(--blue-d);font-size:18px;line-height:1;cursor:pointer;padding:0 2px;border-radius:50%;opacity:.7}
.op-chip-x:hover{opacity:1}
.order-picker-panel{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:66;background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-lg);overflow:hidden;display:flex;flex-direction:column;max-height:min(60vh,380px)}
.order-picker-search{padding:10px;border-bottom:1px solid var(--line);flex:none}
.op-search{width:100%;padding:9px 12px;border:1px solid var(--line);border-radius:8px;font:inherit;background:var(--bg-soft)}
.op-search:focus{outline:none;border-color:var(--blue);background:var(--bg)}
.order-picker-list{overflow-y:auto;padding:6px;flex:1;-webkit-overflow-scrolling:touch}
.order-picker-item{display:flex;align-items:center;gap:11px;padding:11px 10px;border-radius:9px;cursor:pointer;font-size:14px;color:var(--text);transition:background .12s;position:relative}
.order-picker-item:hover{background:var(--bg-soft)}
.order-picker-item input{position:absolute;opacity:0;width:0;height:0}
.op-box{flex:none;width:22px;height:22px;border:2px solid var(--line);border-radius:7px;display:flex;align-items:center;justify-content:center;color:#fff;transition:background .12s,border-color .12s}
.op-box .icon{width:14px;height:14px;opacity:0;transition:opacity .12s}
.order-picker-item input:checked ~ .op-box{background:var(--blue);border-color:var(--blue)}
.order-picker-item input:checked ~ .op-box .icon{opacity:1}
.order-picker-item input:focus-visible ~ .op-box{box-shadow:0 0 0 3px var(--blue-t)}
/* The thumbnail of an order's target: the list of orders in the cabinet and
   the order picker of the contact page show the same one (it was in
   orders.css alone until 20.09.2026). 48 px here, 52 on a wide card in
   orders.css, 40 in the picker. */
.o-thumb{ width:48px; height:48px; border-radius:12px; flex:none; position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; }
.o-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.o-thumb .o-chip{ position:absolute; right:3px; bottom:3px; width:17px; height:17px; border-radius:6px; background:#fff; display:flex; align-items:center; justify-content:center; box-shadow:0 1px 3px rgba(0,0,0,.28); z-index:2; }
.o-thumb .o-chip svg{ width:11px; height:11px; }
.o-thumb .o-glyph{ display:none; }
.o-thumb.is-photo{ box-shadow:inset 0 0 0 1px rgba(34,48,74,.10); }
.o-thumb.is-avatar{ border-radius:50%; }
.o-thumb.is-ph{ background:var(--bg-soft); border:1px solid var(--line); }
.o-thumb.is-ph img, .o-thumb.is-ph .o-chip{ display:none; }
.o-thumb.is-ph .o-glyph{ display:flex; align-items:center; justify-content:center; }
.o-thumb.is-ph .o-glyph svg{ width:24px; height:24px; }
.order-picker-item .o-thumb{width:40px;height:40px;border-radius:10px}
.order-picker-item .o-thumb .o-chip{right:2px;bottom:2px;width:15px;height:15px;border-radius:5px}
.order-picker-item .o-thumb .o-chip svg{width:10px;height:10px}
.order-picker-item .o-thumb.is-ph .o-glyph svg{width:20px;height:20px}
.op-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;line-height:1.35;overflow-wrap:anywhere}
.op-line{display:flex;align-items:baseline;gap:8px;color:var(--mut);font-size:12.5px}
.op-line b{color:var(--head);font-size:14px;font-variant-numeric:tabular-nums}
.op-what{color:var(--text);font-weight:600}
.order-picker-empty{padding:18px 10px;text-align:center;color:var(--mut);font-size:14px;margin:0}
.order-picker-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px;border-top:1px solid var(--line);flex:none}
.op-clear{border:none;background:transparent;color:var(--mut);font:inherit;font-weight:600;cursor:pointer;padding:6px 8px}
.op-clear:hover{color:var(--head)}
.op-done{padding:8px 20px}
.drawer-lang{
  display:flex;align-items:center;gap:10px;font-size:13px;font-weight:600;
  padding:12px 4px 4px;border-top:1px solid var(--line);margin-top:8px;
}
.drawer-lang .cur{color:var(--head);background:var(--bg-soft);border:1px solid var(--line);border-radius:8px;padding:4px 12px}
.drawer-lang a{color:var(--mut);padding:4px 12px;min-height:44px;min-width:44px;display:inline-flex;align-items:center;justify-content:center}
@keyframes fadeIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

/* ---------- hero ---------- */
.hero{padding:34px 0 26px;background:
  radial-gradient(700px 300px at 85% -80px,rgba(0,182,122,.07),transparent 60%),
  radial-gradient(600px 260px at 5% -60px,rgba(44,123,229,.07),transparent 60%),#fff;}
.hero h1{font-size:clamp(27px,6.6vw,42px);font-weight:800;letter-spacing:-.5px}
.hero .sub{margin-top:8px;font-size:14.5px;max-width:640px}.hero-slim{padding:28px 0 20px}
.trust-strip{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.tchip{
  display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);
  border-radius:10px;padding:8px 12px;font-size:13px;font-weight:600;color:var(--head);
  box-shadow:0 1px 2px rgba(34,48,74,.05);min-height:44px;
}
a.tchip{text-decoration:none!important}
a.tchip:hover{border-color:#B9CBE4;box-shadow:var(--shadow)}
.tchip svg{width:17px;height:17px;color:var(--green);flex:none}
.tchip .muted{color:#8496AB;font-weight:400}

/* ---------- stars ---------- */
.star5{position:relative;display:inline-block;line-height:0;flex:none}
.star5 .row{display:flex;gap:2px;width:max-content}
.star5 svg{width:17px;height:17px;fill:currentColor}
.star5 .s-bg{color:var(--star-off)}
.star5 .s-fg{position:absolute;top:0;left:0;overflow:hidden;color:var(--green);width:var(--p,100%)}
.star5.lg svg{width:24px;height:24px}
/* discrete star rating (review cards) — N filled + rest empty, no overlay */
.stars-int{display:inline-flex;gap:2px;flex:none;line-height:0}
.stars-int svg{width:17px;height:17px;display:block;fill:currentColor}
.stars-int .s-on{color:var(--green)}
.stars-int .s-off{color:var(--star-off)}
.rev-top .stars-int{margin-left:auto}

/* ---------- sections ---------- */
.section{padding:44px 0}
.section.alt{background:var(--bg-soft)}
.sec-head{margin-bottom:22px}
.sec-head h2{font-size:clamp(21px,4.6vw,30px)}
.sec-head p{margin-top:6px;max-width:640px}

/* ---------- platform CTA grid (home) ---------- */
.cta-grid{display:grid;grid-template-columns:1fr;gap:10px}
@media(min-width:600px){.cta-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:992px){.cta-grid{grid-template-columns:repeat(3,1fr);gap:12px}}
.cta-btn{
  display:flex;align-items:center;gap:12px;background:#fff;border:1.5px solid var(--line);
  border-radius:var(--radius);padding:14px 16px;min-height:56px;
  font-family:'Poppins',sans-serif;font-weight:600;font-size:14.5px;color:var(--head);
  text-decoration:none!important;transition:border-color .15s,box-shadow .15s,transform .15s;
  box-shadow:0 1px 2px rgba(34,48,74,.04);
}
.cta-btn:hover{border-color:#B9CBE4;box-shadow:var(--shadow);transform:translateY(-1px)}
.cta-btn .cta-ico{width:22px;height:22px;flex:none}
.cta-btn.ig .cta-ico{color:#833AB4}
.cta-btn.tt .cta-ico{color:#FE0050}
.cta-btn .cta-arr{width:18px;height:18px;margin-left:auto;color:var(--mut);flex:none;transition:transform .15s,color .15s}
.cta-btn:hover .cta-arr{color:var(--blue);transform:translateX(3px)}

/* ---------- steps ---------- */
.steps{counter-reset:step;display:grid;grid-template-columns:1fr;grid-auto-rows:1fr;gap:12px;margin-top:6px}
@media(min-width:560px){.steps{grid-template-columns:repeat(2,1fr)}}
@media(min-width:768px){.steps{grid-template-columns:repeat(4,1fr)}}
.step{
  position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  height:100%;padding:20px 16px 16px;box-shadow:0 1px 2px rgba(34,48,74,.04);
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.step:hover{transform:translateY(-2px);border-color:rgba(44,123,229,.4);box-shadow:0 12px 26px -12px rgba(34,48,74,.3)}
.step-num{
  display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;
  background:var(--blue);color:#fff;font-family:'Poppins',sans-serif;font-weight:700;font-size:15px;margin-bottom:10px;
}
.step h3{font-size:15.5px;margin-bottom:4px}
.step p{font-size:13.5px}

/* ---------- we accept ---------- */
/* We Accept payment strip (light theme, based on design variant 5) */
.accept{padding:40px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--bg-soft)}
.accept .pay-methods{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;gap:10px;list-style:none;padding:0;margin:0}
.pm{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:10px;background:#fff;border:1px solid var(--line);transition:border-color .2s ease,box-shadow .2s ease}
.pm:hover{border-color:rgba(44,123,229,.4);box-shadow:0 6px 16px -10px rgba(34,48,74,.3)}
.pm-label{font-family:'Open Sans',sans-serif;font-weight:700;font-size:13px;color:var(--head)}
.pm-visa{font-family:'Poppins',sans-serif;font-style:italic;font-weight:800;font-size:16px;letter-spacing:.4px;color:#1A1F71}
.pm-mc{width:30px;height:19px}
.pm-apple{width:16px;height:19px;color:#0A0A0A}
.pm-g{width:18px;height:18px}
.pm-btc{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:radial-gradient(circle at 34% 28%,#FBB24A,#F7931A);color:#fff;font-family:'Poppins',sans-serif;font-weight:700;font-size:12px;line-height:1}
.accept-note{text-align:center;max-width:560px;margin:18px auto 0;font-size:12.5px;line-height:1.55;color:var(--mut)}.cabinet-flash.ok{background:var(--green-t);border:1px solid #BFEFDD;color:#00875A;padding:10px 14px;border-radius:10px;margin-bottom:14px;font-size:14px;font-weight:600}

/* Register consent checkbox */
.field-check{margin:2px 0 4px}
.check-inline{display:flex;align-items:flex-start;gap:9px;font-size:13.5px;color:var(--text);cursor:pointer;line-height:1.5}
.check-inline input{margin-top:3px;flex:0 0 auto;width:16px;height:16px;accent-color:var(--blue)}
.check-inline a{color:var(--blue);font-weight:600}

/* TikTok legal disclaimer card (service_text.php parity) */
.tt-disclaimer{background:var(--bg-soft);border:1px solid var(--line);border-radius:14px;padding:20px 22px}
.tt-disclaimer h2{font-family:'Poppins',sans-serif;font-size:16px;font-weight:700;color:var(--head);letter-spacing:.4px;margin-bottom:8px}
.tt-disclaimer p{font-size:13px;line-height:1.6;color:var(--mut)}

/* Branded 404 */
.err-page{text-align:center;max-width:520px;margin:0 auto;padding:20px 0 10px}
.err-code{display:block;font-family:'Poppins',sans-serif;font-weight:800;font-size:clamp(64px,16vw,110px);line-height:1;color:var(--blue);opacity:.9}
.err-page h1{font-size:clamp(22px,5vw,30px);margin:6px 0 8px;color:var(--head)}
.err-page p{color:var(--mut);margin-bottom:22px}

/* ---------- rating summary ---------- */
.rev-summary{
  display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;background:#fff;border:1px solid var(--line);
  border-radius:16px;padding:18px 20px;box-shadow:var(--shadow);margin-bottom:18px;
}
.rev-score{font-family:'Poppins',sans-serif;font-weight:800;font-size:42px;color:var(--head);line-height:1}
.rev-score small{font-size:19px;color:var(--mut);font-weight:600}
.rev-meta{display:flex;flex-direction:column;gap:4px}
.rev-meta .cnt{font-size:13.5px}
/* non-interactive <span> on every screen that renders it — no tap-target
   min-height and no hover affordance. */
.rev-badge{
  margin-left:auto;display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;color:#00875A;
  background:var(--green-t);border:1px solid #BFEFDD;border-radius:999px;padding:7px 13px;
}
.rev-badge svg{width:15px;height:15px}
@media(max-width:600px){.rev-badge{margin-left:0}}
.rev-note{margin-top:14px;font-size:12.5px;color:var(--mut);text-align:center;max-width:560px;margin-left:auto;margin-right:auto}

/* ---------- stats ---------- */
.stats-sec{padding:44px 0}
.stats{
  display:grid;grid-template-columns:1fr;gap:12px;background:#fff;border:1px solid var(--line);
  border-radius:16px;padding:20px 22px;box-shadow:0 1px 2px rgba(34,48,74,.04);
}
@media(min-width:600px){.stats{grid-template-columns:repeat(3,1fr)}}
.stat h3{display:flex;align-items:center;gap:7px;flex-wrap:wrap;font-size:13px;text-transform:uppercase;letter-spacing:.5px;color:#8496AB}
.stat-live{display:inline-flex;align-items:center;gap:4px;padding:2px 6px;border-radius:999px;background:#E9F8F1;color:#278460;font-size:9px;font-weight:800;line-height:1.35;letter-spacing:.6px}
.stat-live i{width:6px;height:6px;border-radius:50%;background:#2ABB7F;box-shadow:0 0 0 0 rgba(42,187,127,.35);animation:stat-live-pulse 1.8s ease-out infinite}
.stat-num{display:inline-block;font-family:'Poppins',sans-serif;font-weight:800;font-size:clamp(22px,4.5vw,30px);font-variant-numeric:tabular-nums;color:var(--head);line-height:1.2;letter-spacing:-.025em;white-space:nowrap;transform-origin:50% 70%;will-change:transform,opacity}
.stats.is-live .stat-num{color:#172D4F}
.stat-sub{font-size:12px;color:var(--mut)}
@keyframes stat-live-pulse{0%{box-shadow:0 0 0 0 rgba(42,187,127,.38)}65%,100%{box-shadow:0 0 0 6px rgba(42,187,127,0)}}
@media(prefers-reduced-motion:reduce){.stat-live i{animation:none}.stat-num{will-change:auto}}

/* ---------- why choose ---------- */
.why{background:linear-gradient(160deg,var(--navy) 0%,#1B2740 100%);color:#B9C6D9}
.why .sec-head h2,.why h3{color:#fff}
.why .sec-head p{color:#9FB0C7}
.why-grid{display:grid;grid-template-columns:1fr;gap:6px 22px}
@media(min-width:768px){.why-grid{grid-template-columns:1fr 1fr}}
.why-item{display:flex;gap:13px;padding:13px 0;border-bottom:1px solid rgba(255,255,255,.08)}
.why-item:last-child{border-bottom:none}
.why-check{
  flex:none;width:26px;height:26px;border-radius:50%;background:rgba(0,182,122,.18);color:var(--green);
  display:flex;align-items:center;justify-content:center;margin-top:2px;
}
.why-check svg{width:14px;height:14px}
.why-item h3{font-size:15.5px;margin-bottom:3px}
.why-item p{font-size:13.5px;line-height:1.6}

/* ---------- faq ---------- */
.faq-list{max-width:820px;margin:0 auto;display:grid;gap:9px}
.faq{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:box-shadow .2s}
.faq.open{box-shadow:var(--shadow)}
.faq-heading{margin:0;font:inherit}
.faq-q{
  width:100%;display:flex;align-items:center;gap:12px;text-align:left;background:none;border:none;
  padding:15px 16px;min-height:52px;font-family:'Poppins',sans-serif;font-weight:600;font-size:14.5px;color:var(--head);
}
.faq-q:hover{color:var(--blue)}
.faq-q .chev{margin-left:auto;flex:none;width:26px;height:26px;border-radius:50%;background:var(--bg-soft);
  display:flex;align-items:center;justify-content:center;color:#7d8da3;transition:transform .25s,background .2s,color .2s}
.faq.open .faq-q .chev{transform:rotate(180deg);background:var(--green);color:#fff}
.faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .28s ease}
.faq.open .faq-a{grid-template-rows:1fr}
.faq-a-in{overflow:hidden}
.faq-a-body{padding:0 16px 16px;font-size:14px;display:grid;gap:8px}
.faq-a-body ul{padding-left:20px;display:grid;gap:4px}

/* ---------- ask ---------- */
.ask{padding:0 0 50px}
/* when the grey ask band directly follows page content (FAQ), it needs its own top padding */
.ask--pad{padding-top:52px}
.ask-card{
  background:linear-gradient(135deg,var(--navy),#31456B);border-radius:18px;padding:34px 22px;text-align:center;
  color:#C3CFDF;box-shadow:var(--shadow-lg);
}
.ask-card h2{color:#fff;font-size:clamp(20px,4.5vw,27px);margin-bottom:6px}
.ask-card p{margin-bottom:18px;font-size:14.5px}

/* ---------- FAQ page: always-open Q&A cards (masonry columns) ---------- */
.faq-open{padding:36px 0 56px}
.faq-open-grid{columns:2 380px;column-gap:18px}
.faq-open-card{
  break-inside:avoid;background:#fff;border:1px solid var(--line);border-radius:16px;
  box-shadow:0 8px 24px -18px rgba(34,48,74,.18);padding:20px 22px 18px;margin:0 0 18px;
}
.faq-open-q{display:flex;align-items:flex-start;gap:11px;font-family:'Poppins',sans-serif;font-weight:700;font-size:16px;line-height:1.4;color:var(--head);margin:0 0 10px}
.faq-open-n{flex:none;width:26px;height:26px;border-radius:8px;background:var(--blue-t);color:var(--blue-d);font-size:12.5px;font-weight:700;display:flex;align-items:center;justify-content:center;margin-top:1px}
.faq-open-a{font-size:14px;line-height:1.65;color:var(--text)}
.faq-open-a p{margin:0 0 10px}
.faq-open-a>:last-child{margin-bottom:0}
.faq-open-a ul,.faq-open-a ol{margin:0 0 10px;padding-left:20px}
.faq-open-a li{margin:5px 0}
.faq-open-a li::marker{color:var(--mut)}
.faq-open-a a{color:var(--blue);text-decoration:underline}
.faq-open-a b{color:var(--head)}
@media(max-width:640px){
  .faq-open{padding:24px 0 44px}
  .faq-open-card{padding:16px 16px 15px;margin-bottom:14px}
  .faq-open-q{font-size:15px}
}.pill{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  min-height:44px;padding:8px 18px;border-radius:999px;border:1px solid var(--line);background:#fff;
  font-family:'Poppins',sans-serif;font-weight:600;font-size:13.5px;color:var(--head);text-decoration:none!important;
  transition:border-color .15s,background .15s,color .15s;
}
.pill:hover{border-color:var(--blue);color:var(--blue);background:var(--blue-t)}.svc{
  background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px 16px;
  box-shadow:0 1px 2px rgba(34,48,74,.04);scroll-margin-top:126px;
}
.svc + .svc{margin-top:16px}
@media(min-width:768px){.svc{padding:24px 24px 22px}}.svc-rating{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:5px;font-size:13.5px;font-weight:600;color:var(--head)}
.svc-rating .muted{color:#8496AB;font-weight:400}/* ---------- plan cards (static) ---------- */
/* Tariff cards — prototype 06 "gradient accent": compact tiles (3 → 4 → 6 per
   row), a 3px platform-gradient top bar, amount + unit icon on one line,
   full-width divider, price, and the Save badge as quiet naked caps text
   at the card foot (no fill, no frame). */
.plan-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px 8px}
@media(min-width:620px){.plan-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px 10px}}
@media(min-width:992px){.plan-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:14px 12px}}
.plan{
  position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  background:#fff;border:1px solid var(--line);border-radius:12px;
  padding:13px 8px 15px;transition:border-color .15s,box-shadow .15s,transform .15s;
  text-align:center;
}
/* platform-branded 3px top bar (--plat/--plat-grad come from [data-system] on #orderFlow) */
.plan::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--plat-grad-h,var(--plat,var(--blue)));border-radius:12px 12px 0 0}
.plan:hover{border-color:rgba(44,123,229,.4);box-shadow:0 10px 22px -10px rgba(34,48,74,.3);transform:translateY(-2px)}
.plan.is-picked{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-t)}
.plan-btn{cursor:pointer;font:inherit}
.plan-soon{opacity:.62}
.plan-soon .plan-price{color:var(--mut)}
/* Save / starter badge — naked caps text at the card foot (prototype V5) */
.plan.has-badge{padding-bottom:6px}
.plan.has-badge .plan-price{margin-bottom:13px}
.plan .plan-badge{
  order:10;align-self:center;
  font-size:9.5px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;white-space:nowrap;
  color:var(--blue);
}
.plan .plan-badge.save{color:#00875A}
.plan-top{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:0}
.plan-count{display:block;font-family:'Poppins',sans-serif;font-weight:800;font-size:16px;color:var(--head);line-height:1.1;white-space:nowrap}
.plan-unit-icon{display:inline-flex;align-items:center;width:14px;height:14px;flex:none}
.plan-unit-icon svg{width:100%;height:100%;display:block;fill:currentColor}
.plan-unit-icon.u-like{color:#FB3B63}
.plan-unit-icon.u-follow{color:var(--blue)}
.plan-unit-icon.u-view{color:var(--green)}
/* inline unit word — only for units that have no icon */
.plan-top-word{font-size:10.5px;font-weight:700;color:var(--mut);text-transform:uppercase;letter-spacing:.6px}
/* full-width divider between the amount and the price */
.plan-rule{align-self:stretch;height:1px;margin:9px 0 8px;background:var(--line)}
.plan-price{font-family:'Poppins',sans-serif;font-weight:700;font-size:13.5px;color:var(--green);margin-top:auto}
.plan-soon-label{display:block;font-size:11.5px;font-weight:700;color:#8496AB;text-transform:uppercase;letter-spacing:.4px;margin-top:2px}
/* wide screens: 6 per row — cards stay compact, just a touch more air */
@media(min-width:992px){
  .plan{padding:15px 10px 17px}
  .plan-count{font-size:17px}
  .plan-unit-icon{width:15px;height:15px}
  .plan-rule{margin:10px 0 9px}
  .plan-price{font-size:15px}
  .plan.has-badge{padding-bottom:8px}
  .plan .plan-badge{font-size:10px}
}

/* ---------- breadcrumbs ---------- */
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:13px;color:#8496AB;margin-bottom:12px}
.crumbs a{color:var(--blue);text-decoration:none;font-weight:600}
.crumbs a:hover{text-decoration:underline}
.crumbs .crumbs-sep{color:#B9CBE4}
.crumbs [aria-current="page"]{color:var(--head)}

/* ---------- prose (imported static-page / blog HTML) ---------- */
.prose{max-width:820px;margin:0 auto;font-size:15px;line-height:1.7;color:var(--text)}
.prose h2{font-size:clamp(19px,4vw,24px);margin:26px 0 10px;color:var(--head)}
.prose h3{font-size:clamp(16px,3.4vw,19px);margin:20px 0 8px;color:var(--head)}
.prose h4{font-size:clamp(15px,3vw,17px);font-weight:700;color:var(--head);margin:18px 0 6px}
.prose h5{font-size:clamp(14px,2.6vw,15.5px);font-weight:700;color:var(--head);margin:14px 0 6px}
.prose p{margin:0 0 14px}
.prose ol p,.prose ul p{margin:8px 0}
.prose ul,.prose ol{margin:0 0 14px;padding-left:24px}
.prose li{margin:7px 0;padding-left:2px}
.prose li::marker{color:var(--mut)}
/* legal / policy page polish */
.prose .page-updated{font-size:13px;color:var(--mut);margin:0 0 20px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.prose .legal-entity{margin-top:22px;background:var(--bg-soft);border:1px solid var(--line);border-radius:14px;padding:16px 20px}
.prose .legal-entity-label{font-family:'Poppins',sans-serif;font-weight:700;font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--mut);margin:0 0 6px}
.prose .legal-entity address{font-style:normal;line-height:1.75;color:var(--head);margin:0;font-variant-numeric:tabular-nums}
.prose a{color:var(--blue);text-decoration:underline}
.prose b,.prose strong{color:var(--head)}
.prose hr{border:none;border-top:1px solid var(--line);margin:22px 0}
.prose img{max-width:100%;height:auto;border-radius:var(--radius);margin:10px 0}
.prose table{width:100%;border-collapse:collapse;margin:0 0 14px}
.prose th,.prose td{border:1px solid var(--line);padding:8px 10px;text-align:left}
.prose thead th{background:var(--bg-soft);font-family:'Poppins',sans-serif;font-weight:600;font-size:13px;color:var(--head)}
.prose tbody tr:nth-child(even) td{background:#FAFCFE}/* inline-SVG figures inside long-form content */
.prose figure.svc-fig{margin:22px 0;padding:16px 18px;background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--radius)}
.prose figure.svc-fig svg,
.prose figure.svc-fig img{display:block;width:100%;height:auto;max-width:640px;margin:0 auto;border-radius:0;overflow:visible}
.prose figure.svc-fig figcaption{margin-top:12px;font-size:13px;line-height:1.55;color:var(--mut);text-align:center}
.prose .svc-story{
  width:min(1040px,calc(100vw - 32px));margin:48px 50% 14px;padding:36px 0 16px;
  transform:translateX(-50%);display:grid;grid-template-columns:minmax(0,1.05fr) minmax(320px,.95fr);
  align-items:center;gap:clamp(34px,5vw,68px);border-top:1px solid var(--line)
}
.prose .svc-story-copy{
  display:flex;flex-direction:column;justify-content:center
}
.prose .svc-story-copy h2{margin:0 0 14px;font-size:clamp(23px,2.5vw,31px);line-height:1.24}
.prose .svc-story-copy p:last-child{margin-bottom:0}
.prose .svc-story-visual{
  display:grid;place-items:center;min-height:310px;margin:0;padding:24px;
  overflow:hidden;border:1px solid rgba(44,123,229,.12);border-radius:24px;
  box-shadow:0 22px 52px -42px rgba(34,48,74,.72);
  background:
    radial-gradient(circle at 20% 18%,rgba(225,48,108,.12),transparent 35%),
    radial-gradient(circle at 84% 82%,rgba(44,123,229,.14),transparent 38%),
    linear-gradient(145deg,#F7FAFE,#EEF4FC)
}
.prose .svc-story-visual img{display:block;width:100%;height:auto;max-width:420px;margin:0;border-radius:0}
.prose .svc-story.is-reverse .svc-story-visual{grid-column:1;grid-row:1}
.prose .svc-story.is-reverse .svc-story-copy{grid-column:2;grid-row:1}
.prose .svc-story + h3{margin-top:14px}
.prose .svc-final-cta{
  margin:38px 0 0;padding:30px clamp(20px,5vw,44px);text-align:center;
  border:1px solid rgba(44,123,229,.18);border-radius:22px;
  background:linear-gradient(145deg,#F8FBFF,#EDF4FD);
  box-shadow:0 22px 52px -44px rgba(34,48,74,.72)
}
.svc-final-cta-section .svc-final-cta{margin-top:0}
.prose .svc-final-cta h2{margin:0 0 10px;font-size:clamp(22px,3.5vw,29px)}
.prose .svc-final-cta>p{max-width:660px;margin:0 auto 18px}
.prose .svc-final-cta .btn{
  display:inline-flex;min-height:48px;margin:2px auto 18px;padding:13px 24px;
  align-items:center;justify-content:center;color:#fff!important;text-decoration:none
}
.prose .svc-final-cta .svc-final-cta-links{
  margin-bottom:0;font-size:13px;line-height:1.6;color:var(--mut)
}
@media(max-width:760px){
  .prose .svc-story{
    width:100%;margin:34px 0 10px;padding:28px 0 8px;transform:none;
    grid-template-columns:1fr;gap:18px
  }
  .prose .svc-story-copy,
  .prose .svc-story.is-reverse .svc-story-copy{
    grid-column:1;grid-row:1;padding:0
  }
  .prose .svc-story-visual,
  .prose .svc-story.is-reverse .svc-story-visual{
    grid-column:1;grid-row:2;min-height:0;padding:8px 22px 14px;border-radius:17px;
    box-shadow:0 16px 38px -34px rgba(34,48,74,.65)
  }
  .prose .svc-story-visual img{max-width:295px}
  .prose .svc-story-copy h2{font-size:21px}
  .prose .svc-final-cta{margin-top:30px;padding:24px 18px;border-radius:17px}
  .prose .svc-final-cta .btn{display:flex;width:100%}
}
.prose>:first-child{margin-top:0}
.prose>:last-child{margin-bottom:0}
.rating-stars{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap}
.rating-stars .num{font-weight:700;color:var(--head)}
.rating-stars .muted{color:#8496AB}

/* ---------- blog listing ---------- */
.post-grid{display:grid;grid-template-columns:1fr;gap:18px;max-width:900px;margin:0 auto}
@media(min-width:700px){.post-grid{grid-template-columns:1fr 1fr}}
.post-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:box-shadow .2s,transform .2s}
.post-card:hover{box-shadow:var(--shadow);transform:translateY(-2px)}
.post-card img{width:100%;aspect-ratio:16/9;object-fit:cover}
.post-card .post-body{padding:16px;display:flex;flex-direction:column;gap:8px;flex:1}
.post-card h3{font-size:17px;line-height:1.3;color:var(--head)}
.post-card .post-cat{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--blue)}
.post-card .post-excerpt{font-size:13.5px;line-height:1.55;color:var(--mut)}
.post-card .post-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;padding-top:6px}
.post-card .post-meta{font-size:12.5px;color:var(--mut)}
.post-card .post-more{font-size:12.5px;font-weight:700;color:var(--blue);white-space:nowrap}
.blog-empty{text-align:center;color:var(--mut)}
.blog-back{max-width:820px;margin:0 auto;text-align:center}

/* ---------- blog single article ---------- */
.article .eyebrow,.hero .eyebrow{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--blue);margin-bottom:6px}
.article-crumbs{font-size:12.5px;color:var(--mut);margin-bottom:8px;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.article-crumbs a{color:var(--mut)}
.article-crumbs a:hover{color:var(--blue)}
.article-byline{margin-top:10px;font-size:13.5px;color:var(--mut);display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.article-byline a{color:var(--head);font-weight:600}
.article-byline a:hover{color:var(--blue)}
.article-cover{display:block;width:100%;max-width:820px;margin:18px auto 0;aspect-ratio:16/9;object-fit:cover;border-radius:var(--radius)}.svc-hero-main{min-width:0}
/* NOTE: the service work-status chip is fully styled in order-wizard.css
   (.svc-hero .svc-status*). The old .svc-status / .svc-status-pill / .svc-status-check
   rules were removed — a leftover .svc-status{flex-wrap:wrap} leaked into the hero
   chip and pushed the label under the icon on mobile. */
.svc-hero-rating{
  display:inline-flex;align-items:center;gap:6px;flex:none;background:#FFF7EF;border:1px solid #FBD9BE;
  color:#C46632;font-family:'Poppins',sans-serif;font-weight:700;font-size:16px;padding:8px 14px;border-radius:12px;
  text-decoration:none!important;transition:box-shadow .18s,transform .12s;
}
.svc-hero-rating:hover{box-shadow:var(--shadow);transform:translateY(-1px)}
.svc-hero-rating svg{width:17px;height:17px;color:#F5803E}
/* mobile: the rating never fits beside a long title, so stack it as a compact
   badge ABOVE the title instead of letting it wrap awkwardly under the intro */
@media(max-width:640px){  .svc-hero-rating{order:-1;align-self:flex-end;font-size:14px;padding:6px 12px}
  .svc-hero-rating svg{width:15px;height:15px}
}
.svc-empty{font-size:14px;color:var(--mut);text-align:center;padding:26px 0}
.svc-benefits .why-item{border-bottom:1px solid var(--line)}
.svc-benefits .why-item:last-child{border-bottom:none}

/* free-promotion CTA (no order flow yet) */
.free-cta{
  max-width:460px;margin:0 auto;text-align:center;background:#fff;border:1.5px solid var(--line);
  border-radius:18px;padding:30px 24px;box-shadow:var(--shadow);display:flex;flex-direction:column;align-items:center;gap:8px;
}
.free-cta-ico{
  width:56px;height:56px;border-radius:16px;background:var(--green-t);color:var(--green);
  display:flex;align-items:center;justify-content:center;margin-bottom:4px;
}
.free-cta-ico svg{width:28px;height:28px}
.free-cta h2{font-size:clamp(20px,5vw,26px)}.free-cta .btn-big{margin-top:8px;min-width:220px}
/* customer review cards — shared by service pages, home and /reviews */
.rev-list{display:grid;gap:11px;grid-template-columns:minmax(0,1fr)}
@media(min-width:768px){.rev-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:992px){.rev-list{grid-template-columns:repeat(3,minmax(0,1fr))}}
.rev{min-width:0;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:16px;display:flex;flex-direction:column;gap:9px;box-shadow:0 1px 2px rgba(34,48,74,.04);transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
.rev:hover{transform:translateY(-2px);border-color:rgba(44,123,229,.4);box-shadow:0 12px 26px -12px rgba(34,48,74,.3)}
.rev-top{display:flex;align-items:center;gap:11px}
.avatar{flex:none;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-family:'Poppins',sans-serif;font-weight:700;font-size:14px;letter-spacing:.5px}
.rev-who{min-width:0}
.rev-nick{font-weight:700;color:var(--head);font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rev-date{font-size:12px;color:var(--mut)}
.rev-top .star5{margin-left:auto;flex:none}
.rev-text{font-size:14px;color:var(--head);overflow-wrap:anywhere}
.rev-hidden{opacity:.5;font-style:italic}
.rev-order{display:flex;align-items:center;gap:6px;font-size:12px;color:#8496AB;margin-top:auto;padding-top:8px;border-top:1px dashed var(--line)}
.rev-order svg{width:13px;height:13px;color:var(--green);flex:none}
.rev-order b{color:var(--head)}
.rev-service-link{font-weight:700;color:var(--head);text-decoration:underline;text-decoration-color:#B9C7D8;text-underline-offset:3px;transition:color .15s,text-decoration-color .15s}
.rev-service-link:hover{color:var(--blue);text-decoration-color:var(--blue)}
.rev-more{margin-top:16px;text-align:center}
.btn-ghost{background:#fff;border:1px solid var(--line);color:var(--head)}
.btn-ghost:hover{border-color:var(--blue);color:var(--blue);background:var(--blue-t)}
.faq-more{text-align:center;margin-top:22px;display:flex;flex-direction:column;align-items:center;gap:10px}
.faq-more p{font-size:14px;color:var(--mut)}

/* ---------- footer ---------- */
.site-footer{background:#1B2740;color:#8FA0B8;padding:30px 0 26px;font-size:13.5px}
.foot-in{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px}
.foot-brand{display:inline-flex;align-items:center;gap:8px;min-height:44px}
.foot-brand img{width:30px;height:30px}
.foot-brand span{font-family:'Poppins',sans-serif;font-weight:700;color:#fff;font-size:13px;line-height:1.15}
.foot-nav{display:flex;flex-wrap:wrap;gap:6px 18px}
.foot-nav a{color:#8FA0B8;display:inline-flex;align-items:center;min-height:44px}
.foot-nav a:hover{color:#fff}
.foot-copy{margin-left:auto;color:#6E7F99}
@media(max-width:600px){.foot-copy{margin-left:0}}

/* ---------- toast ---------- */
.toast{
  position:fixed;left:50%;bottom:24px;transform:translate(-50%,16px);z-index:90;background:var(--navy);color:#fff;
  font-size:13.5px;font-weight:600;padding:11px 18px;border-radius:10px;box-shadow:var(--shadow-lg);
  opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;max-width:88vw;text-align:center;
}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ---------- reveal animation ---------- */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease}
.reveal.vis{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none}
}

/* ---------- auth pages (login / register / recovery) ---------- */
.auth-wrap{padding:34px 0 52px}
.auth-card{
  max-width:440px;margin:0 auto;background:#fff;border:1px solid var(--line);
  border-radius:16px;box-shadow:var(--shadow-lg);padding:26px 22px;
}
@media(min-width:600px){.auth-card{padding:32px 30px}}
.auth-head{text-align:center;margin-bottom:20px}
.auth-head h1{font-size:clamp(23px,5vw,30px);font-weight:800;letter-spacing:-.4px}
.auth-head p{margin-top:7px;font-size:14px;color:var(--mut)}
.auth-form{display:flex;flex-direction:column;gap:15px}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-family:'Poppins',sans-serif;font-weight:600;font-size:13px;color:var(--head)}
.field .hint{font-size:12px;color:var(--mut)}
.input{
  width:100%;min-height:46px;padding:11px 14px;border:1.5px solid var(--line);border-radius:10px;
  font-family:inherit;font-size:15px;color:var(--head);background:#fff;transition:border-color .15s,box-shadow .15s;
}
.input::placeholder{color:#AEBBCC}
.input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(44,123,229,.15)}
.input.is-invalid{border-color:#E0483D;box-shadow:0 0 0 3px rgba(224,72,61,.13)}
/* read-only / locked field (e.g. a confirmed email that can't be edited): looks inactive */
.input.is-locked{background:var(--bg-soft);color:var(--mut);-webkit-text-fill-color:var(--mut);cursor:not-allowed;border-color:var(--line);box-shadow:none}
.input.is-locked:focus{box-shadow:none;border-color:var(--line)}
.field-error{font-size:12.5px;color:#D23B30;font-weight:600}
.auth-form .btn{width:100%}
.auth-alt{margin-top:18px;text-align:center;font-size:13.5px;color:var(--text)}
.auth-alt a{font-weight:600}
.auth-links{margin-top:10px;text-align:center;font-size:13px}
.auth-note{
  margin-top:16px;padding:11px 13px;background:var(--bg-soft);border-radius:10px;
  font-size:12.5px;color:var(--mut);line-height:1.5;text-align:center;
}

/* ---------- flash / inline alerts ---------- */
.alert{
  display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border-radius:10px;
  font-size:14px;font-weight:600;line-height:1.45;border:1px solid transparent;
}
.alert svg{width:18px;height:18px;flex:none;margin-top:1px}
.alert-list{margin:6px 0 0;padding-left:18px;font-weight:400;font-size:13px}
.alert-success{background:var(--green-t);border-color:#B7EAD8;color:#0A7B57}
.alert-success svg{color:var(--green)}
.alert-error{background:#FDECEA;border-color:#F6C9C4;color:#B4322A}
.alert-error svg{color:#E0483D}
.alert-info{background:var(--blue-t);border-color:#C4DCFB;color:#1B62C4}
.alert-info svg{color:var(--blue)}
.flash-stack{max-width:760px;margin:16px auto 0;padding:0 16px;display:flex;flex-direction:column;gap:10px}
.auth-form .alert{width:100%}

/* ---------- unconfirmed-email banner ---------- */
.confirm-banner{
  background:#FFF6E9;border-bottom:1px solid #F6DDB6;color:#8A5A12;
}
.confirm-banner .in{
  max-width:1140px;margin:0 auto;padding:10px 16px;display:flex;align-items:center;gap:12px;
  flex-wrap:wrap;font-size:13.5px;font-weight:600;
}
.confirm-banner svg{width:18px;height:18px;color:var(--orange);flex:none}
.confirm-banner form{margin-left:auto}
.confirm-banner button{
  background:none;border:none;color:var(--orange-d);font-weight:700;font-size:13.5px;
  text-decoration:underline;padding:6px 4px;min-height:36px;
}
.confirm-banner button:hover{color:var(--orange)}

/* ---------- utilities ---------- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.hero-slim .hero-lead{margin-top:8px;font-size:14.5px;color:var(--text);max-width:640px}.ref-card{
  background:#fff;border:1px solid var(--line);border-radius:16px;
  padding:22px 20px;box-shadow:var(--shadow);
}
@media(min-width:600px){.ref-card{padding:26px 24px}}
.ref-card-title{font-size:clamp(17px,3.4vw,20px);font-weight:700}.ref-stats{margin:0}
.ref-stats .stat-num{font-size:clamp(20px,4vw,26px)}/* ---------- contact page (/contact) ---------- */
.contact-wrap{max-width:680px}
.contact-card{
  background:#fff;border:1px solid var(--line);border-radius:16px;
  padding:22px 20px;box-shadow:var(--shadow);
}
@media(min-width:600px){.contact-card{padding:28px 26px}}
.contact-lead{font-size:14px;color:var(--text);line-height:1.6}
.contact-signed{margin-top:10px;font-size:13.5px;color:var(--text)}
.contact-signed b{color:var(--head)}
.contact-signed-email{color:var(--mut)}
.contact-form{display:flex;flex-direction:column;gap:15px;margin-top:16px}
.contact-form textarea.input{min-height:120px;resize:vertical;line-height:1.55}
.contact-orders{min-height:auto;height:auto;padding:8px}
.contact-orders option{padding:6px 8px;border-radius:6px}
.contact-foot{margin-top:16px;font-size:12.5px;color:var(--mut)}

/* ---------- tickets cabinet (/user/tickets, /user/ticket/{id}) ---------- */
.tk-wrap{display:flex;flex-direction:column;gap:18px;max-width:900px}
.tk-toolbar{display:flex;justify-content:flex-end}
.btn-xs{min-height:32px;padding:5px 11px;font-size:12.5px;border-radius:8px}.tk-subject a{color:var(--head);font-weight:600;text-decoration:none}
.tk-subject a:hover{color:var(--blue);text-decoration:underline}
.tk-muted{color:var(--mut)}.tk-close{color:#B4322A!important;border-color:#F6C9C4}
.tk-close:hover{background:#FDECEA}/* status badges */
.tk-badge{
  display:inline-block;padding:3px 10px;border-radius:20px;font-size:12px;font-weight:700;
  white-space:nowrap;line-height:1.4;
}
.tk-badge-secondary{background:var(--bg-soft);color:#5E6E82}
.tk-badge-primary{background:var(--blue-t);color:var(--blue-d)}
.tk-badge-warning{background:#FFF4E5;color:#B9721B}
.tk-badge-success{background:var(--green-t);color:var(--green-d)}
.tk-badge-danger{background:#FDECEA;color:#B4322A}.tk-orders-card .tk-orders{margin-top:10px;display:flex;flex-direction:column;gap:6px;font-size:13.5px;color:var(--head)}
/* clickable order number inside a ticket → opens the order preview popup */
.tk-order-link{border:0;background:var(--blue-t);color:var(--blue-d);font-family:'Poppins',sans-serif;font-weight:700;font-size:inherit;padding:1px 8px;border-radius:7px;cursor:pointer;transition:background .15s,color .15s}
.tk-order-link:hover{background:var(--blue);color:#fff}

/* ---- ticket thread = messenger-style chat ---- */
.tk-thread-card{background:var(--bg-soft)}
/* scrollable chat window; JS opens it scrolled to the newest message */
.tk-thread{display:flex;flex-direction:column;gap:16px;max-height:60vh;overflow-y:auto;padding:4px 4px 4px 2px}
.tk-msg{display:flex;flex-direction:column;gap:4px;max-width:82%}
.tk-msg-user{align-self:flex-end;align-items:flex-end}
.tk-msg-admin{align-self:flex-start;align-items:flex-start}
.tk-msg-head{display:flex;align-items:baseline;gap:8px;padding:0 6px}
.tk-msg-author{font-weight:700;font-size:12.5px;color:var(--head)}
.tk-msg-user .tk-msg-author{color:var(--blue-d)}
.tk-msg-admin .tk-msg-author{color:var(--orange-d)}
.tk-msg-time{font-size:11.5px;color:var(--mut);white-space:nowrap}
.tk-msg-body{padding:10px 14px;border-radius:16px;font-size:14px;line-height:1.55;word-break:break-word;overflow-wrap:anywhere;box-shadow:0 1px 2px rgba(34,48,74,.06)}
.tk-msg-user .tk-msg-body{background:var(--blue);color:#fff;border-bottom-right-radius:5px}
.tk-msg-user .tk-msg-body a{color:#fff}
.tk-msg-admin .tk-msg-body{background:#fff;color:var(--text);border:1px solid var(--line);border-bottom-left-radius:5px}
/* attachments: never overflow the bubble (overrides the stored inline max-width) */
.tk-msg-body img{max-width:100%!important;height:auto;border-radius:10px;display:block}
.tk-reply-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:4px}
.tk-reopen-note{margin-bottom:12px;font-size:13px}

/* ---- order-preview popup (ticket order number → modal) ----
   Prefix .ocard-* = the cabinet's order card and its modal.
   Do not confuse with .oc-* in svc.css, which is the order-creation flow
   on service pages. The two used to share the .oc- prefix and collided on
   .oc-head / .oc-title / .oc-body. Keep them apart. ---- */
.ocard-modal{position:fixed;inset:0;z-index:220;display:flex;align-items:center;justify-content:center;padding:18px}
.ocard-backdrop{position:absolute;inset:0;background:rgba(34,48,74,.5)}
.ocard-dialog{position:relative;z-index:1;width:100%;max-width:440px;background:var(--bg);border-radius:18px;box-shadow:0 30px 70px -20px rgba(34,48,74,.5);overflow:hidden;animation:ocard-in .2s ease both}
@keyframes ocard-in{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
.ocard-dhead{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 18px;border-bottom:1px solid var(--line)}
.ocard-dhead h3{margin:0;font-family:'Poppins',sans-serif;font-weight:800;font-size:16px;color:var(--head)}
.ocard-x{border:0;background:none;font-size:26px;line-height:1;color:var(--mut);cursor:pointer;padding:0 6px;border-radius:8px}
.ocard-x:hover{color:var(--head);background:var(--bg-soft)}
.ocard-body{padding:16px 18px 18px}
.ocard-loading{padding:26px 4px;text-align:center;color:var(--mut);font-size:14px}
.ocard-loading--err{color:#B4322A}
.ocard-head{display:flex;align-items:center;gap:12px}
.ocard-thumb{width:52px;height:52px;border-radius:12px;flex:none;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center}
.ocard-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.ocard-thumb .ocard-chip{position:absolute;right:3px;bottom:3px;width:18px;height:18px;border-radius:6px;background:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 3px rgba(0,0,0,.28)}
.ocard-thumb .ocard-chip svg{width:11px;height:11px}
.ocard-thumb .ocard-glyph{display:none}
.ocard-thumb.is-avatar{border-radius:50%}
.ocard-thumb.is-ph{background:var(--bg-soft);border:1px solid var(--line)}
.ocard-thumb.is-ph img,.ocard-thumb.is-ph .ocard-chip{display:none}
.ocard-thumb.is-ph .ocard-glyph{display:flex;align-items:center;justify-content:center}
.ocard-thumb.is-ph .ocard-glyph svg{width:26px;height:26px}
.ocard-thumb.pk-ig{color:#E1306C}.ocard-thumb.pk-tt{color:#111827}.ocard-thumb.pk-yt{color:#FF0033}.ocard-thumb.pk-fb{color:#1877F2}
.ocard-headmain{flex:1;min-width:0}
.ocard-title{font-family:'Poppins',sans-serif;font-weight:600;font-size:14.5px;color:var(--head);line-height:1.25}
.ocard-sub{margin-top:2px;font-size:12px;color:var(--mut)}
.ocard-badge{flex:none;display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 9px;border-radius:999px;font-family:'Poppins',sans-serif;font-weight:600;font-size:11px;white-space:nowrap}
.ocard-badge .d{width:6px;height:6px;border-radius:50%;flex:none}
.ocard-b1{background:var(--blue-t);color:var(--blue-d)}.ocard-b1 .d{background:var(--blue)}
.ocard-b3{background:var(--green-t);color:var(--green-d)}.ocard-b3 .d{background:var(--green)}
.ocard-b4{background:#ECEDFB;color:#4340C8}.ocard-b4 .d{background:#5B5BD6}
.ocard-b8{background:#FCEDED;color:#E5484D}.ocard-b8 .d{background:#E5484D}
.ocard-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 14px;margin:16px 0 0}
.ocard-cell{display:flex;flex-direction:column;gap:2px;min-width:0}
.ocard-wide{grid-column:1/-1}
.ocard-cell dt{font-size:10.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--mut)}
.ocard-cell dd{margin:0;font-size:13.5px;font-weight:600;color:var(--head);overflow-wrap:anywhere}
.ocard-added{color:var(--green-d)}
.ocard-tag{display:inline-block;margin-left:4px;padding:1px 7px;border-radius:999px;background:#E8A317;color:#fff;font-family:'Poppins',sans-serif;font-weight:700;font-size:10.5px;vertical-align:middle}
.ocard-link{color:var(--blue);text-decoration:none;font-weight:600}
.ocard-link:hover{text-decoration:underline}
.ocard-userlink{font-weight:500}
.ocard-err{margin-top:14px;display:flex;gap:7px;align-items:flex-start;background:#FCEDED;color:#B4322A;border-radius:10px;padding:9px 12px;font-size:12.5px;font-weight:600}
.ocard-err svg{width:15px;height:15px;flex:none;margin-top:1px}
.ocard-viewlink{display:inline-block;margin-top:16px;font-family:'Poppins',sans-serif;font-weight:600;font-size:13px;color:var(--blue);text-decoration:none}
.ocard-viewlink:hover{text-decoration:underline}

/* ==================== user cabinet (orders / history / settings) ==================== */
.cabinet{padding:22px 0 52px}
.cabinet-grid{display:grid;grid-template-columns:1fr;gap:20px}
@media(min-width:900px){
  .cabinet-grid{grid-template-columns:264px minmax(0,1fr);gap:26px;align-items:start}
}
.cabinet-main{min-width:0}
.cabinet-head{margin-bottom:16px;scroll-margin-top:80px}
.cabinet-head h1{font-size:clamp(22px,4vw,28px);font-weight:800;letter-spacing:-.4px}
.cabinet-head p{margin-top:5px;font-size:14px;color:var(--mut)}

/* ---- sidebar ---- */
.cabinet-side{position:relative}
@media(min-width:900px){.cabinet-side{position:sticky;top:78px}}
.cabinet-balance{
  background:var(--bg-soft);border:1px solid var(--line);border-radius:14px;
  padding:13px 16px;display:flex;flex-direction:column;gap:3px;
}
.cb-greet{font-family:'Poppins',sans-serif;font-weight:700;font-size:14.5px;color:var(--head);letter-spacing:-.01em;overflow-wrap:anywhere}
.cb-bal{font-size:12.5px;color:var(--mut)}
.cb-bal b{font-family:'Poppins',sans-serif;font-weight:700;color:var(--head)}

.cabinet-menu{margin-top:14px;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);overflow:hidden}
.cabinet-menu-toggle{
  display:none;align-items:center;gap:10px;padding:13px 16px;font-family:'Poppins',sans-serif;
  font-weight:600;font-size:14px;color:var(--head);cursor:pointer;list-style:none;user-select:none;
}
.cabinet-menu-toggle::-webkit-details-marker{display:none}
.cabinet-menu-toggle .icon{width:20px;height:20px;color:var(--blue)}
.cabinet-menu-toggle .chev{margin-left:auto;transition:transform .2s}
.cabinet-menu[open] .cabinet-menu-toggle .chev{transform:rotate(180deg)}

.cabinet-nav{display:flex;flex-direction:column;padding:8px}
.cabinet-nav-item{
  display:flex;align-items:center;gap:11px;padding:11px 12px;border-radius:10px;
  font-family:'Poppins',sans-serif;font-weight:600;font-size:14px;color:var(--head);
  text-decoration:none!important;transition:background .15s,color .15s;
}
.cabinet-nav-item .icon{width:20px;height:20px;color:var(--mut);flex:none;transition:color .15s}
.cabinet-nav-item:hover{background:var(--bg-soft)}
.cabinet-nav-item.is-active{background:var(--blue-t);color:var(--blue-d)}
.cabinet-nav-item.is-active .icon{color:var(--blue)}
.cabinet-nav-item.is-soon{color:var(--mut);cursor:not-allowed}
.cabinet-nav-item.is-soon:hover{background:transparent}
.cabinet-badge{
  margin-left:auto;background:var(--green-t);color:var(--green-d);font-size:11px;font-weight:800;
  padding:2px 8px;border-radius:999px;font-family:'Poppins',sans-serif;
}

/* On mobile the sidebar collapses into a <details> accordion. */
@media(max-width:899px){
  .cabinet-menu-toggle{display:flex}
  .cabinet-nav{display:none;border-top:1px solid var(--line)}
  .cabinet-menu[open] .cabinet-nav{display:flex}
}
/* On desktop the nav is always shown (summary toggle hidden). Modern browsers
   collapse a CLOSED <details> to its summary height via the ::details-content
   pseudo (content-visibility:hidden); with .cabinet-menu overflow:hidden that
   clips the whole nav to a 1px sliver. Force the content box visible. Older
   engines lack ::details-content and instead honour .cabinet-nav{display:flex}
   above, so the two rules together cover every browser. */
@media(min-width:900px){
  .cabinet-menu::details-content{content-visibility:visible}
}

/* ---- content cards / tables ---- */
.cabinet-card{background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:20px}.amount{font-weight:800}
.amount.is-credit{color:var(--green-d)}
.amount.is-debit{color:#D23B30}
/* ---- status badges ---- */
.badge{
  display:inline-block;font-family:'Poppins',sans-serif;font-weight:700;font-size:12px;
  padding:4px 11px;border-radius:999px;white-space:nowrap;line-height:1.4;
}.badge-success{background:var(--green-t);color:var(--green-d)}
.badge-danger{background:#FDECEA;color:#B4322A}
.badge-muted{background:var(--bg-soft);color:#6E7E93}

/* ---- empty state ---- */
.cabinet-empty{
  background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);
  padding:40px 24px;text-align:center;
}
.cabinet-empty svg{width:44px;height:44px;color:var(--star-off);margin-bottom:6px}
.cabinet-empty h2{font-size:19px;font-weight:700}
.cabinet-empty p{margin:7px auto 18px;font-size:14px;color:var(--mut);max-width:360px}

/* ---- settings ---- */
.settings-summary{display:flex;flex-wrap:wrap;gap:26px;padding-bottom:18px;margin-bottom:20px;border-bottom:1px solid var(--line)}
.settings-summary .ss-label{display:block;font-size:12.5px;font-weight:600;color:var(--mut);margin-bottom:4px}
.settings-summary .ss-value{font-family:'Poppins',sans-serif;font-weight:800;font-size:22px;color:var(--head)}.settings-form{max-width:420px}
.settings-sep{border:none;border-top:1px solid var(--line);margin:4px 0}
/* ticket thread header row (cabinet shell): back link + status + date */
.tk-thread-top{display:flex;align-items:center;flex-wrap:wrap;gap:10px 14px;margin-bottom:16px}
.tk-back{font-family:'Poppins',sans-serif;font-weight:600;font-size:13.5px;color:var(--blue);text-decoration:none}
.tk-back:hover{text-decoration:underline}
.settings-resend{margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}
.settings-resend p{font-size:13.5px;color:var(--mut);margin-bottom:10px}

/* ---- pager ---- */
/* AJAX table region: subtle dim while the next page is fetched in the background */
[data-ajax-table].is-ajax-loading{opacity:.55;transition:opacity .12s ease;pointer-events:none}
.pager{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:20px}
.pager-btn{
  display:inline-flex;align-items:center;min-height:40px;padding:8px 16px;border-radius:10px;
  border:1px solid #C4D8F5;background:#fff;color:var(--blue)!important;font-family:'Poppins',sans-serif;
  font-weight:600;font-size:13.5px;text-decoration:none!important;transition:background .15s,border-color .15s;
}
.pager-btn:hover{background:#F0F6FE}
.pager-btn.is-disabled{color:var(--mut)!important;border-color:var(--line);background:var(--bg-soft);pointer-events:none}
.pager-info{font-size:13px;color:var(--mut);font-weight:600}

/* ---------- Blog comments -------------------------------------------------- */
.comments{padding-top:8px}
.comments-inner{max-width:820px;margin:0 auto}
.comments-title{font-family:'Poppins',sans-serif;font-weight:700;font-size:clamp(19px,4vw,24px);color:var(--head);display:flex;align-items:center;gap:10px;margin:0 0 18px}
.comments-count{display:inline-flex;align-items:center;justify-content:center;min-width:26px;height:26px;padding:0 8px;border-radius:999px;background:var(--blue-t);color:var(--blue-d);font-size:13px;font-weight:700}
.comments-notice{margin-bottom:18px}
.comments-empty{color:var(--mut);font-size:15px;margin:0 0 22px}
.comment-list{list-style:none;margin:0 0 26px;padding:0;display:flex;flex-direction:column;gap:16px}
.comment{display:flex;gap:14px;padding:16px 18px;background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--radius)}
.comment-avatar{flex:none;width:40px;height:40px;border-radius:50%;background:var(--blue);color:#fff;display:flex;align-items:center;justify-content:center;font-family:'Poppins',sans-serif;font-weight:700;font-size:16px}
.comment-main{flex:1;min-width:0}
.comment-meta{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin-bottom:5px}
.comment-author{font-family:'Poppins',sans-serif;font-weight:600;font-size:14.5px;color:var(--head)}
.comment-date{font-size:12.5px;color:var(--mut)}
.comment-pending{font-size:11.5px;font-weight:600;color:#B4322A;background:#FDECEA;border:1px solid #F6C9C4;border-radius:999px;padding:1px 8px}
.promo-banner-wrap{padding-top:16px}
.comment-body{margin:0;font-size:14.5px;line-height:1.6;color:var(--text);white-space:pre-line;overflow-wrap:anywhere}
.comment-form-wrap{border-top:1px solid var(--line);padding-top:24px}
.comment-form-title{font-family:'Poppins',sans-serif;font-weight:700;font-size:18px;color:var(--head);margin:0 0 14px}
.comment-form .field{margin-bottom:14px}
.comment-form textarea.input{min-height:110px;resize:vertical;line-height:1.55}
.comment-gate{font-size:15px;color:var(--text);background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;margin:0}
.comment-gate a{color:var(--blue);font-weight:600}
.comment-gate a:hover{color:var(--blue-d)}

/* ---------- cabinet: balance top-up ---------- */
.topup .topup-amount{margin-bottom:14px}
.topup-amount input.input{max-width:220px;font-family:'Poppins',sans-serif;font-weight:800;font-size:20px}
.topup-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.topup-chips .chip{background:#fff;border:1px solid var(--line);border-radius:10px;padding:9px 15px;font-family:'Poppins',sans-serif;font-weight:700;font-size:14px;color:var(--head);transition:.15s}
.topup-chips .chip:hover{border-color:var(--blue);color:var(--blue)}
.topup-chips .chip.is-active{background:var(--blue);border-color:var(--blue);color:#fff}
.topup-bonus{background:var(--bg-soft);border:1px solid var(--line);border-radius:14px;padding:16px 18px;margin-bottom:22px}
.topup-bonus-title{font-family:'Poppins',sans-serif;font-weight:700;font-size:15px;color:var(--head);margin:0 0 13px}
/* one bonus table — rows "From $X", columns Card | Crypto; active row highlighted */
.tb-table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums;margin-top:2px}
.tb-table th,.tb-table td{padding:9px 12px;text-align:left}
.tb-table thead th{font-family:'Poppins',sans-serif;font-weight:600;font-size:10.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--mut);border-bottom:1px solid var(--line)}
.tb-table th.tb-c,.tb-table td.tb-c{text-align:right;white-space:nowrap}
.tb-best{display:inline-block;margin-left:6px;font-size:9px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:#fff;background:var(--green);border-radius:999px;padding:2px 6px;vertical-align:middle}
.tb-table tbody tr:not(:last-child) td{border-bottom:1px solid var(--line)}
.tb-from{font-weight:600;color:var(--head)}
.tb-table td.tb-c{font-family:'Poppins',sans-serif;font-weight:700;color:var(--head)}
.tb-table td.tb-crypto{color:var(--green-d)}
.tb-table tbody tr.is-active td{background:var(--green-t);color:var(--green-d)}
.topup-bonus-note{margin:14px 0 0;font-size:12px;color:var(--mut);line-height:1.5}
.topup-methods{margin-bottom:22px}
.topup-methods-title,.topup-dev-head+*,.topup .field label{font-weight:600}
.topup-methods-title{font-family:'Poppins',sans-serif;font-weight:700;font-size:15px;color:var(--head);margin:0 0 12px}
.topup-methods .btn{width:100%;justify-content:center;margin-bottom:9px}
.topup-methods-note{margin:2px 0 0;font-size:12.5px;color:var(--mut)}
.btn-gw{background:#fff;color:var(--head)!important;border:1px solid #C4D3E6;cursor:pointer;opacity:1;box-shadow:0 4px 12px -9px rgba(34,48,74,.35)}
.btn-gw:hover{background:#F7FAFE;border-color:#9EB8D8;color:var(--blue-d)!important}
.btn-gw svg{opacity:1}
.topup-devcredit{border-top:1px dashed var(--line);padding-top:18px}
.topup-dev-head{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--mut);margin-bottom:12px}
.topup-devcredit .btn{width:100%;justify-content:center}

/* "We Accept" (a logo strip with no prose) and the TikTok legal notice were both
   <h2>. Demoted to <p> so the heading outline is editorial content only. */
.accept .accept-title{font-family:'Poppins',sans-serif;font-size:21px;font-weight:700;color:var(--head);margin:0 auto 10px;max-width:none;text-align:center}
.tt-disclaimer .tt-disc-title{font-family:'Poppins',sans-serif;font-size:16px;font-weight:700;color:var(--head);letter-spacing:.4px;margin-bottom:8px}
/* "Choose your plan:" is a wizard step label, not a section heading (see the
   order-wizard.css note). Same visual weight, no heading slot. */
.sec-head .sec-head-title{font-family:'Poppins',sans-serif;font-size:24px;font-weight:800;color:var(--head);line-height:1.25}
@media (max-width:640px){.sec-head .sec-head-title{font-size:20px}}

/* ---------- stage 9.1: the contact form and the tickets pages ---------- */
.contact-status{margin-top:12px;padding:10px 14px;border-radius:10px;background:var(--green-t);color:var(--green-d);font-weight:600;font-size:13.5px}
.contact-trap{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.contact-turnstile{min-height:65px}
.contact-hint{display:block;margin-top:4px;font-size:12.5px;color:var(--mut)}
.ocard-modal[hidden],.o-rev-modal[hidden]{display:none}
.cab-tk-tools{display:flex;gap:12px;flex-wrap:wrap;margin-top:10px}
.cab-tk-tool{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--mut)}
.cab-tk-tool .input{width:auto;min-height:36px;padding:4px 10px}
.tk-head-card,.tk-thread-card,.tk-reply{padding:16px 18px}
.tk-reply{margin-top:0}

/* ---------- stage 10.1: reviews ---------- */
.rev-options{font-style:normal;color:var(--mut);font-size:13px}
body.o-rev-open{overflow:hidden}

/* ---------- stage 11.1: the payment page ---------- */
.payment-methods .payment-method{display:flex;align-items:center;justify-content:center;gap:10px;margin:8px 0}
.payment-methods .payment-method small{font-weight:500;opacity:.85}
.payment-waiting .payment-spinner{display:inline-block;width:14px;height:14px;border:2px solid var(--line);border-top-color:var(--blue);border-radius:50%;animation:pay-spin .8s linear infinite;vertical-align:middle}
@keyframes pay-spin{to{transform:rotate(360deg)}}
.payment-note-sub{margin-top:6px;font-size:12.5px;color:var(--mut)}
.payment-forward{margin-top:16px}
.payment-forward-fields{margin-top:12px;font-size:12.5px}
.payment-forward-table{width:100%;margin-top:8px;font-size:12px}
.payment-forward-table th{text-align:left;padding:2px 8px 2px 0;color:var(--mut);white-space:nowrap}
.payment-forward-table td{word-break:break-all}

/* ---------- stage 12.1: the referral page ---------- */
.ref-card + .ref-card{margin-top:18px}
.ref-lead{margin-top:6px;font-size:13.5px;color:var(--mut)}
.ref-link{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}
.ref-link .input{flex:1;min-width:220px}
.stats-row{display:flex;gap:26px;flex-wrap:wrap;margin-top:16px}
.stats-row .stat{display:flex;flex-direction:column;gap:2px}
.stats-row .stat-label{font-size:12.5px;color:var(--mut)}
.ref-links{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.ref-links li{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:13.5px}
.ref-links-label{font-weight:600;color:var(--head);min-width:170px}
.ref-links-url{flex:1;min-width:200px;color:var(--mut);overflow-wrap:anywhere;font-size:12.5px}
.ref-table-wrap{overflow-x:auto;margin-top:12px}
.ref-table{width:100%;border-collapse:collapse;font-size:13.5px}
.ref-table th{text-align:left;padding:8px 10px;font-size:11.5px;text-transform:uppercase;letter-spacing:.03em;color:var(--mut);border-bottom:1px solid var(--line)}
.ref-table td{padding:9px 10px;border-bottom:1px solid var(--line);color:var(--head)}
.ref-table td.num,.ref-table th.num{text-align:right;font-variant-numeric:tabular-nums}
.ref-table td.is-neg{color:var(--mut)}
.ref-note{display:block;font-size:11.5px;color:var(--mut)}
.ref-empty{margin-top:12px;font-size:13.5px;color:var(--mut)}

/* Юридическая строка под страницей услуги (сверка 2026-09-07, J2). */
.legal-note{margin:24px auto 8px;max-width:900px;color:#7a7f87;font-size:13px;line-height:1.5;text-align:center}