/* =====================================================================
   UZBBETTING EDITORIAL UI v3 — responsive-first static/guide pages
   Scope: .modern-editorial only, so the main landing page is untouched.
   ===================================================================== */
.modern-editorial{
  --page-accent:var(--brand-blue,#1464f4);
  --page-accent-2:#75a9ff;
  --page-soft:var(--surface-2);
  --page-line:var(--line);
  --page-max:1240px;
  --copy-max:76ch;
  background:var(--bg);
  overflow-x:clip;
}

@supports (color:color-mix(in srgb, red, white)){
  .modern-editorial{
    --page-soft:color-mix(in srgb,var(--page-accent) 8%,var(--surface));
    --page-line:color-mix(in srgb,var(--page-accent) 20%,var(--line));
  }
}
.modern-editorial.page-accent-green{--page-accent:var(--brand-green,#18c96e);--page-accent-2:#5ee3a5}
.modern-editorial.page-accent-violet{--page-accent:#7658e8;--page-accent-2:#b19cff}
.modern-editorial.page-accent-cyan{--page-accent:#078fb5;--page-accent-2:#59cbe7}
.modern-editorial.page-accent-orange{--page-accent:#d96f18;--page-accent-2:#f2ad69}
.modern-editorial .page-width{margin-inline:auto}
.modern-editorial *{box-sizing:border-box}
.modern-editorial img{max-width:100%}
.modern-editorial .reading-progress{position:fixed;left:0;right:0;top:0;height:3px;z-index:600;pointer-events:none;background:transparent}
.modern-editorial .reading-progress i{display:block;width:0;height:100%;background:linear-gradient(90deg,var(--page-accent),var(--brand-green));box-shadow:0 0 12px color-mix(in srgb,var(--page-accent) 45%,transparent)}

/* Header: deliberately simpler than the landing-page header. */
.modern-editorial .static-header{box-shadow:0 8px 26px rgba(2,17,33,.15)}
.modern-editorial .static-header .header-main{min-height:70px;height:auto}
.modern-editorial .brand-image{max-height:42px;max-width:200px;object-fit:contain}
.modern-editorial .static-main-nav{min-width:0}
.modern-editorial .static-main-nav a{font-size:12px;padding-inline:11px}
.modern-editorial .static-mobile-menu{border-top:1px solid rgba(255,255,255,.08);background:color-mix(in srgb,var(--navy) 97%,transparent)}
.modern-editorial .static-mobile-menu[hidden]{display:none!important}
.modern-editorial .static-mobile-menu .page-width{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding-block:10px}
.modern-editorial .static-mobile-menu a{min-height:46px;display:flex;align-items:center;justify-content:center;gap:8px;padding:8px 10px;border:1px solid rgba(255,255,255,.1);border-radius:12px;background:rgba(255,255,255,.05);color:#dce9f5;font-size:11px;font-weight:800;text-align:center}
.modern-editorial .static-mobile-menu a:hover{background:rgba(255,255,255,.1);color:#fff}

/* Breadcrumb */
.editorial-breadcrumb{min-height:48px;display:flex;align-items:center;gap:7px;color:var(--muted);font-size:11px;overflow-x:auto;white-space:nowrap;scrollbar-width:none}
.editorial-breadcrumb::-webkit-scrollbar{display:none}
.editorial-breadcrumb a{color:var(--ink-soft);font-weight:750}
.editorial-breadcrumb a:hover{color:var(--page-accent)}
.editorial-breadcrumb i{font-size:8px;color:var(--line-strong)}
.editorial-breadcrumb span{font-weight:800;color:var(--muted)}

/* Hero */
.editorial-shell{padding:0 0 46px}
.editorial-hero{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr);gap:clamp(24px,4vw,50px);align-items:center;padding:clamp(34px,5vw,58px);overflow:hidden;border:1px solid var(--page-line);border-radius:28px;background:var(--surface);background:linear-gradient(135deg,color-mix(in srgb,var(--surface) 97%,var(--page-accent)),var(--surface) 56%,color-mix(in srgb,var(--surface) 95%,var(--brand-green)));box-shadow:0 22px 60px rgba(8,34,61,.09)}
.editorial-hero:before{content:"";position:absolute;z-index:-2;right:-140px;top:-180px;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--page-accent) 18%,transparent),transparent 68%)}
.editorial-hero:after{content:"";position:absolute;z-index:-1;left:46%;bottom:-230px;width:520px;height:360px;border:1px solid color-mix(in srgb,var(--page-accent) 11%,transparent);border-radius:50%;box-shadow:0 0 0 40px color-mix(in srgb,var(--page-accent) 2.5%,transparent),0 0 0 80px color-mix(in srgb,var(--page-accent) 1.5%,transparent)}
.hero-copy{min-width:0}
.hero-kicker{display:inline-flex;align-items:center;gap:9px;margin-bottom:14px;color:var(--page-accent);font-size:10px;font-weight:900;letter-spacing:.11em;text-transform:uppercase}
.hero-kicker>span{width:34px;height:34px;display:grid;place-items:center;border:1px solid var(--page-line);border-radius:11px;background:var(--page-soft);font-size:15px;letter-spacing:0}
.editorial-hero h1{max-width:820px;margin:0;font-size:clamp(34px,4.2vw,58px);line-height:1.04;letter-spacing:-.04em;text-wrap:balance;overflow-wrap:anywhere}
.hero-lead{max-width:760px;margin:17px 0 0;color:var(--ink-soft);font-size:clamp(15px,1.3vw,18px);line-height:1.72}
.hero-lead+.hero-lead{margin-top:7px;color:var(--muted);font-size:13px}
.hero-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:23px}
.editorial-btn{min-height:46px;display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:0 17px;border:1px solid transparent;border-radius:13px;font-size:12px;font-weight:900;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease,background .18s ease}
.editorial-btn:hover{transform:translateY(-1px)}
.editorial-btn.primary{background:var(--page-accent);background:linear-gradient(135deg,var(--page-accent),color-mix(in srgb,var(--page-accent) 72%,#061b35));color:#fff;box-shadow:0 12px 28px color-mix(in srgb,var(--page-accent) 22%,transparent)}
.editorial-btn.secondary{border-color:var(--line);background:color-mix(in srgb,var(--surface) 91%,transparent);color:var(--ink);box-shadow:var(--shadow-xs)}
.editorial-btn.secondary:hover{border-color:var(--page-line);background:var(--page-soft)}
.hero-pills{display:flex;flex-wrap:wrap;gap:7px;margin-top:18px}
.hero-pills a{min-height:34px;display:inline-flex;align-items:center;padding:0 11px;border:1px solid var(--line);border-radius:999px;background:color-mix(in srgb,var(--surface) 88%,transparent);color:var(--ink-soft);font-size:10px;font-weight:800;white-space:nowrap}
.hero-pills a:hover{border-color:var(--page-line);background:var(--page-soft);color:var(--page-accent)}
.hero-meta-line{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:20px;color:var(--muted);font-size:10px;font-weight:750}
.hero-meta-line span{display:inline-flex;align-items:center;gap:6px}.hero-meta-line i{color:var(--page-accent)}

/* Hero summary */
.hero-intelligence{min-width:0;padding:19px;border:1px solid var(--page-line);border-radius:22px;background:var(--surface);background:color-mix(in srgb,var(--surface) 92%,transparent);box-shadow:0 16px 44px rgba(12,43,75,.09);backdrop-filter:blur(12px)}
.hero-intelligence-head{display:grid;grid-template-columns:50px minmax(0,1fr) 22px;align-items:center;gap:11px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.hero-topic-icon{width:50px;height:50px;display:grid;place-items:center;border-radius:15px;background:linear-gradient(145deg,var(--page-accent),color-mix(in srgb,var(--page-accent) 68%,#092748));color:#fff;font-size:20px;box-shadow:0 10px 24px color-mix(in srgb,var(--page-accent) 18%,transparent)}
.hero-intelligence-head small,.hero-intelligence-head strong{display:block}.hero-intelligence-head small{color:var(--muted);font-size:8px;font-weight:900;letter-spacing:.09em;text-transform:uppercase}.hero-intelligence-head strong{margin-top:3px;font:800 16px/1.3 var(--font-display)}
.verified-dot{color:var(--brand-green);font-size:18px}
.hero-signal-list{display:grid;gap:7px;margin-top:12px}
.hero-signal-list>div{display:grid;grid-template-columns:32px minmax(0,1fr);align-items:center;gap:9px;padding:10px;border:1px solid var(--line-2);border-radius:12px;background:color-mix(in srgb,var(--surface-2) 72%,transparent)}
.hero-signal-list>div>i{width:32px;height:32px;display:grid;place-items:center;border-radius:9px;background:var(--page-soft);color:var(--page-accent)}
.hero-signal-list b,.hero-signal-list small{display:block}.hero-signal-list b{font-size:10.5px}.hero-signal-list small{margin-top:2px;color:var(--muted);font-size:9.5px;line-height:1.35}
.hero-promo-minimal{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:9px;margin-top:12px;padding:12px;border:1px dashed var(--page-line);border-radius:13px;background:var(--page-soft)}
.hero-promo-minimal small,.hero-promo-minimal strong{display:block}.hero-promo-minimal small{color:var(--muted);font-size:8px;font-weight:900;text-transform:uppercase;letter-spacing:.06em}.hero-promo-minimal strong{margin-top:3px;font:900 18px/1.1 var(--font-display)}
.hero-promo-minimal button{min-height:36px;border:1px solid var(--page-line);border-radius:10px;background:var(--surface);color:var(--page-accent);display:flex;align-items:center;gap:6px;padding:0 10px;font-size:9px;font-weight:900}
.hero-trust-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;margin-top:11px}
.hero-trust-strip span{padding:8px 5px;border-radius:9px;background:var(--surface-2);color:var(--muted);font-size:7.5px;font-weight:850;text-align:center;line-height:1.3}
.hero-trust-strip i{display:block;margin-bottom:3px;color:var(--page-accent);font-size:12px}

/* Key facts */
.editorial-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:14px}
.editorial-facts article{display:grid;grid-template-columns:30px minmax(0,1fr) 34px;align-items:center;gap:10px;min-height:96px;padding:14px 16px;border:1px solid var(--line);border-radius:16px;background:var(--surface);box-shadow:0 9px 25px rgba(12,43,75,.05)}
.fact-index{color:color-mix(in srgb,var(--page-accent) 50%,var(--muted));font:800 11px/1 var(--font-display)}
.editorial-facts h2{margin:0;font-size:13px;line-height:1.3}.editorial-facts p{margin:4px 0 0;color:var(--muted);font-size:9.5px;line-height:1.45}.editorial-facts article>i{width:34px;height:34px;display:grid;place-items:center;border-radius:10px;background:var(--page-soft);color:var(--page-accent)}

/* Main content */
.editorial-layout{grid-template-columns:minmax(0,1fr) 300px;gap:28px;align-items:start;margin-top:34px}
.editorial-article{min-width:0;}
.article-overview{display:grid;grid-template-columns:44px minmax(0,1fr);gap:12px;margin-bottom:12px;padding:15px 17px;border:1px solid var(--page-line);border-radius:15px;background:linear-gradient(135deg,var(--page-soft),var(--surface))}
.overview-icon{width:44px;height:44px;display:grid;place-items:center;border-radius:13px;background:var(--page-accent);color:#fff;font-size:17px}.article-overview strong{font:800 13px/1.3 var(--font-display)}.article-overview p{margin:4px 0 0;color:var(--muted);font-size:10.5px;line-height:1.55}
.editorial-content{counter-reset:section;display:grid;gap:12px}
.editorial-content>.content-section,.custom-main-wrap .section{counter-increment:section;position:relative;scroll-margin-top:92px;padding:clamp(22px,2.6vw,32px);border:1px solid var(--line);border-radius:18px;background:var(--surface);box-shadow:0 7px 22px rgba(12,43,75,.04);overflow:hidden}
.editorial-content>.content-section:before,.custom-main-wrap .section:before{content:counter(section,decimal-leading-zero);position:absolute;right:20px;top:18px;color:color-mix(in srgb,var(--page-accent) 14%,var(--surface));font:900 46px/1 var(--font-display);letter-spacing:-.06em;pointer-events:none}
.editorial-content>.content-section:hover{border-color:var(--page-line)}
.editorial-content h2,.custom-main-wrap .section h2{position:relative;z-index:1;max-width:720px;margin:0 0 13px;padding-right:45px;font-size:clamp(23px,2vw,31px);line-height:1.18;letter-spacing:-.025em;text-wrap:balance;overflow-wrap:anywhere}
.editorial-content h3,.custom-main-wrap .section h3{margin:22px 0 8px;font-size:18px;line-height:1.3}
.editorial-content p,.custom-main-wrap .section p{position:relative;z-index:1;margin:0 0 13px;color:var(--ink-soft);font-size:15px;line-height:1.76;overflow-wrap:anywhere}
.editorial-content p:last-child,.custom-main-wrap .section p:last-child{margin-bottom:0}
.editorial-content .content-section>p:first-of-type{color:var(--ink);font-size:15.5px}
.editorial-content a,.custom-main-wrap .section a{color:var(--page-accent);font-weight:760;text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--page-accent) 28%,transparent);text-underline-offset:3px;overflow-wrap:anywhere}
.editorial-content strong{color:var(--ink)}

/* Lists */
.editorial-content .bullet-list,.editorial-content ul:not(.list),.custom-main-wrap .list{display:grid;gap:8px;margin:17px 0 0;padding:0;list-style:none}
.editorial-content .bullet-list li,.editorial-content ul:not(.list)>li,.custom-main-wrap .list li{position:relative;padding:11px 12px 11px 39px;border:1px solid var(--line-2);border-radius:12px;background:var(--surface-2);color:var(--ink-soft);font-size:13px;line-height:1.5;overflow-wrap:anywhere}
.editorial-content .bullet-list li:before,.editorial-content ul:not(.list)>li:before{content:"✓";position:absolute;left:11px;top:10px;width:19px;height:19px;border-radius:6px;background:var(--page-soft);color:var(--page-accent);display:grid;place-items:center;font-size:10px;font-weight:900}
.editorial-content .steps{counter-reset:guideStep;display:grid;gap:8px;margin:17px 0 0;padding:0;list-style:none}
.editorial-content .steps li{counter-increment:guideStep;position:relative;min-height:52px;padding:12px 13px 12px 52px;border:1px solid var(--line);border-radius:12px;background:var(--surface-2);color:var(--ink-soft);font-size:13px;line-height:1.5}
.editorial-content .steps li:before{content:counter(guideStep);position:absolute;left:11px;top:10px;width:31px;height:31px;border-radius:9px;background:linear-gradient(145deg,var(--page-accent),color-mix(in srgb,var(--page-accent) 72%,#0a2948));color:#fff;display:grid;place-items:center;font:900 10px/1 var(--font-display);box-shadow:0 6px 15px color-mix(in srgb,var(--page-accent) 18%,transparent)}

/* Tables */
.editorial-content .table-wrap{width:100%;margin:19px 0 0;overflow:auto;border:1px solid var(--line);border-radius:14px;background:var(--surface);-webkit-overflow-scrolling:touch}
.editorial-content table{width:100%;min-width:620px;border-collapse:separate;border-spacing:0;font-size:12px}
.editorial-content th{padding:12px 13px;background:var(--surface-3);color:var(--ink);font-size:9px;font-weight:900;text-transform:uppercase;letter-spacing:.055em;text-align:left;border-bottom:1px solid var(--line)}
.editorial-content td{padding:12px 13px;color:var(--ink-soft);vertical-align:top;border-bottom:1px solid var(--line-2);line-height:1.5;overflow-wrap:anywhere}.editorial-content tr:last-child td{border-bottom:0}.editorial-content tbody tr:nth-child(even){background:color-mix(in srgb,var(--surface-2) 62%,transparent)}

/* Promo / notices / FAQs */
.editorial-content .promo-copy{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;margin:12px 0;padding:14px 15px;border:1px solid var(--page-line);border-radius:14px;background:var(--page-soft)}
.editorial-content .promo-copy-main span,.editorial-content .promo-copy-main strong,.editorial-content .promo-copy-main p{display:block}.editorial-content .promo-copy-main span{color:var(--muted);font-size:8px;font-weight:900;text-transform:uppercase;letter-spacing:.06em}.editorial-content .promo-copy-main strong{margin-top:3px;font:900 18px/1.2 var(--font-display)}.editorial-content .promo-copy-note{margin:4px 0 0!important;font-size:10px!important;color:var(--muted)!important}.editorial-content .promo-copy-button{min-height:38px;border:1px solid var(--page-line);border-radius:10px;background:var(--surface);color:var(--page-accent);padding:0 12px;font-size:10px;font-weight:900}
.note-box,.editorial-visual-inline{margin:17px 0 0;padding:14px 16px;border:1px solid var(--page-line);border-radius:13px;background:linear-gradient(135deg,var(--page-soft),var(--surface));color:var(--ink-soft);font-size:12.5px;line-height:1.62}
.editorial-visual-inline{display:grid;grid-template-columns:40px minmax(0,1fr);gap:11px;align-items:center}.editorial-visual-inline>span{width:40px;height:40px;display:grid;place-items:center;border-radius:11px;background:var(--page-accent);color:#fff}.editorial-visual-inline strong{display:block;font-size:11px}.editorial-visual-inline p{margin:3px 0 0!important;font-size:11px!important;color:var(--muted)!important}
.editorial-content #faq{padding-bottom:24px}
.editorial-content .faq-item{margin:7px 0 0;border:1px solid var(--line);border-radius:12px;background:var(--surface-2);overflow:hidden}
.editorial-content .faq-item summary{position:relative;cursor:pointer;list-style:none;padding:13px 42px 13px 14px;color:var(--ink);font-size:12.5px;font-weight:800;line-height:1.45}.editorial-content .faq-item summary::-webkit-details-marker{display:none}.editorial-content .faq-item summary:after{content:"+";position:absolute;right:13px;top:50%;transform:translateY(-50%);width:24px;height:24px;display:grid;place-items:center;border-radius:8px;background:var(--surface);color:var(--page-accent);font-size:16px}.editorial-content .faq-item[open] summary:after{content:"–"}.editorial-content .faq-item p{max-width:none;margin:0!important;padding:0 14px 14px;font-size:12px!important;color:var(--muted)!important;line-height:1.65}

/* Sidebar */
.editorial-sidebar{position:sticky;top:88px;display:grid;gap:10px;max-height:calc(100dvh - 104px);overflow:auto;scrollbar-width:thin;align-self:start}
.sidebar-panel{padding:15px;border:1px solid var(--line);border-radius:15px;background:var(--surface);box-shadow:0 6px 20px rgba(12,43,75,.04)}
.panel-title{display:grid;grid-template-columns:37px minmax(0,1fr);align-items:center;gap:10px;margin-bottom:10px}.panel-title>span{width:37px;height:37px;display:grid;place-items:center;border-radius:11px;background:var(--page-soft);color:var(--page-accent)}.panel-title small,.panel-title strong{display:block}.panel-title small{color:var(--muted);font-size:7.5px;font-weight:900;text-transform:uppercase;letter-spacing:.07em}.panel-title strong{margin-top:2px;font-size:12px}
.editorial-toc{display:grid;gap:4px}.editorial-toc a{display:grid;grid-template-columns:26px minmax(0,1fr);gap:8px;align-items:center;min-height:35px;padding:7px 8px;border-radius:9px;color:var(--ink-soft);font-size:9.5px;font-weight:760;line-height:1.3}.editorial-toc a span{color:var(--muted);font-size:8px}.editorial-toc a:hover,.editorial-toc a.active{background:var(--page-soft);color:var(--page-accent)}
.responsible-panel p,.promo-panel p{margin:0;color:var(--muted);font-size:10px;line-height:1.55}.responsible-panel>a{display:inline-flex;align-items:center;gap:5px;margin-top:9px;color:var(--page-accent);font-size:9.5px;font-weight:900}
.sidebar-promo-code{display:grid;grid-template-columns:minmax(0,1fr) 36px;gap:7px}.sidebar-promo-code code{min-width:0;padding:9px 10px;border-radius:9px;background:var(--surface-2);color:var(--ink);font-size:11px;font-weight:900;overflow:hidden;text-overflow:ellipsis}.sidebar-promo-code button{border:1px solid var(--page-line);border-radius:9px;background:var(--page-soft);color:var(--page-accent)}

/* Editorial reviewer */
.editor-review-card{display:grid;grid-template-columns:60px minmax(0,1fr) auto;gap:13px;align-items:center;margin-top:13px;padding:16px;border:1px solid var(--line);border-radius:16px;background:var(--surface)}.editor-review-card img{width:60px;height:60px;object-fit:cover;border-radius:16px;background:var(--surface-3);border:1px solid var(--line)}.editor-review-card span{color:var(--page-accent);font-size:7.5px;font-weight:900;letter-spacing:.07em;text-transform:uppercase}.editor-review-card h2{margin:3px 0 0;font-size:14px}.editor-review-card p{margin:4px 0;color:var(--muted);font-size:10px;line-height:1.45}.editor-review-card a{color:var(--page-accent);font-size:9.5px;font-weight:900}.review-date{min-width:105px;padding-left:13px;border-left:1px solid var(--line)}.review-date small,.review-date strong{display:block}.review-date small{color:var(--muted);font-size:7.5px;text-transform:uppercase}.review-date strong{margin-top:4px;font-size:10.5px}

/* Related cards */
.editorial-related{padding-top:42px}.related-header{display:flex;align-items:end;justify-content:space-between;gap:18px;margin-bottom:14px}.section-kicker{display:block;color:var(--page-accent);font-size:8px;font-weight:900;letter-spacing:.1em;text-transform:uppercase}.related-header h2{margin:5px 0 0;font-size:clamp(24px,2.6vw,34px)}.related-header>a{color:var(--page-accent);font-size:10px;font-weight:900}.related-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}.related-cards>a{position:relative;min-width:0;min-height:170px;display:flex;flex-direction:column;padding:16px;border:1px solid var(--line);border-radius:16px;background:var(--surface);box-shadow:var(--shadow-xs);transition:transform .18s ease,border-color .18s ease}.related-cards>a:hover{transform:translateY(-2px);border-color:var(--page-line)}.related-icon{width:40px;height:40px;display:grid;place-items:center;border-radius:11px;background:var(--page-soft);color:var(--page-accent);font-size:16px}.related-cards small{display:block;margin-top:14px;color:var(--muted);font-size:7.5px;font-weight:900;text-transform:uppercase;letter-spacing:.06em}.related-cards strong{display:block;margin-top:4px;font:800 13px/1.35 var(--font-display);overflow-wrap:anywhere}.related-cards p{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;margin:7px 0 0;color:var(--muted);font-size:9.5px;line-height:1.5}.related-cards>a>i{position:absolute;right:13px;top:13px;color:var(--muted);font-size:10px}

/* CI hub */
.hub-directory{margin-top:42px;padding:26px;border:1px solid var(--line);border-radius:22px;background:linear-gradient(145deg,var(--surface),color-mix(in srgb,var(--page-accent) 3.5%,var(--surface)));box-shadow:0 12px 34px rgba(12,43,75,.05)}
.hub-directory-head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:15px}.hub-directory-head h2{margin:5px 0 0;font-size:clamp(25px,2.8vw,36px)}.hub-directory-head p{max-width:720px;margin:7px 0 0;color:var(--muted);font-size:11px;line-height:1.55}.hub-count{flex:0 0 auto;padding:8px 10px;border:1px solid var(--page-line);border-radius:999px;background:var(--page-soft);color:var(--page-accent);font-size:8px;font-weight:900;text-transform:uppercase;letter-spacing:.05em}
.hub-directory-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.hub-directory-grid article{padding:15px;border:1px solid var(--line);border-radius:15px;background:var(--surface)}.hub-group-title{display:flex;align-items:center;gap:9px;margin-bottom:9px}.hub-group-title>span{width:36px;height:36px;display:grid;place-items:center;border-radius:10px;background:var(--page-soft);color:var(--page-accent)}.hub-group-title h3{margin:0;font-size:13px}.hub-directory-grid nav{display:grid;gap:3px}.hub-directory-grid nav a{display:grid;grid-template-columns:minmax(0,1fr) 18px;align-items:center;gap:8px;padding:8px;border-radius:8px;color:var(--ink-soft);font-size:9.5px;font-weight:760;overflow-wrap:anywhere}.hub-directory-grid nav a:hover{background:var(--page-soft);color:var(--page-accent)}.hub-directory-grid nav i{font-size:8px}

/* Author profile custom page */
.custom-main-wrap{margin-top:32px}.custom-main-wrap .main{width:100%}.custom-main-wrap .wrap.grid{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:24px}.custom-main-wrap .wrap.grid>div:first-child{display:grid;gap:12px}.custom-main-wrap .side{position:sticky;top:88px;align-self:start}.profile-card{padding:20px;border:1px solid var(--line);border-radius:18px;background:var(--surface);box-shadow:var(--shadow-sm);text-align:center}.profile-card>img{width:86px;height:86px;object-fit:cover;border-radius:22px;margin:0 auto 11px}.profile-card h2{margin:0;font-size:17px}.profile-card>p{margin:5px 0 14px;color:var(--muted);font-size:10.5px}.facts{display:grid;gap:7px;text-align:left}.fact{padding:9px;border:1px solid var(--line);border-radius:10px;background:var(--surface-2)}.fact b,.fact span{display:block}.fact b{color:var(--muted);font-size:7.5px;text-transform:uppercase;letter-spacing:.05em}.fact span{margin-top:3px;font-size:10px}.card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.mini{padding:13px;border:1px solid var(--line);border-radius:12px;background:var(--surface-2)}.mini h3{margin:0;font-size:12px}.mini p{margin:5px 0 0!important;font-size:10.5px!important}

/* Footer */
.modern-editorial .static-footer{margin-top:52px}.modern-editorial .static-footer .footer-top-v6{padding-top:44px;padding-bottom:38px}.modern-editorial .static-footer-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}.footer-legal-nav{display:flex;flex-wrap:wrap;gap:8px 17px;padding:15px 0;border-top:1px solid rgba(255,255,255,.09);border-bottom:1px solid rgba(255,255,255,.09)}.footer-legal-nav a{color:#9fb4c7;font-size:9.5px;font-weight:700}.footer-legal-nav a:hover{color:#fff}
.page-toast{position:fixed;left:50%;bottom:24px;z-index:500;transform:translate(-50%,14px);opacity:0;visibility:hidden;max-width:calc(100% - 24px);padding:10px 13px;border-radius:10px;background:var(--navy);color:#fff;box-shadow:var(--shadow-lg);font-size:10px;font-weight:900;white-space:nowrap;transition:.18s ease}.page-toast.show{transform:translate(-50%,0);opacity:1;visibility:visible}

/* ---------------------------------------------------------------------
   Responsive: breakpoints are intentionally content-driven.
   --------------------------------------------------------------------- */
@media(max-width:1120px){
  .modern-editorial .static-main-nav{display:none!important}
  .modern-editorial .menu-trigger{display:inline-flex!important}
  .editorial-hero{grid-template-columns:minmax(0,1fr) 310px;padding:38px}
  .editorial-layout{grid-template-columns:minmax(0,1fr) 270px;gap:20px}
  .related-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:920px){
  .editorial-hero{grid-template-columns:1fr;padding:34px;gap:22px}
  .hero-intelligence{display:grid;grid-template-columns:minmax(0,1fr)}
  .editorial-facts{grid-template-columns:repeat(3,minmax(0,1fr))}
  .editorial-layout{grid-template-columns:1fr;gap:14px}
  .editorial-sidebar{position:static;grid-row:1;max-height:none;display:grid;grid-template-columns:1fr 1fr;overflow:visible}
  .editorial-article{grid-row:2;max-width:none}
  .toc-panel{grid-column:1/-1}
  .editorial-toc{display:flex;overflow-x:auto;gap:6px;padding-bottom:2px;scrollbar-width:none}
  .editorial-toc::-webkit-scrollbar{display:none}.editorial-toc a{flex:0 0 auto;max-width:230px;border:1px solid var(--line)}
  .custom-main-wrap .wrap.grid{grid-template-columns:1fr}.custom-main-wrap .side{position:static}
  .modern-editorial .static-footer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:720px){
  .modern-editorial .page-width{width:min(100% - 24px,var(--page-max))}
  .modern-editorial .static-header .header-main{padding-inline:0;gap:8px}
  .modern-editorial .header-download{display:none!important}
  .modern-editorial .static-theme-toggle{width:40px!important;min-width:40px!important;padding:0!important;justify-content:center}.modern-editorial .static-theme-toggle span{display:none!important}
  .modern-editorial .static-mobile-menu .page-width{grid-template-columns:repeat(2,minmax(0,1fr))}
  .editorial-breadcrumb{min-height:42px;font-size:10px}
  .editorial-hero{padding:28px 22px;border-radius:22px}
  .editorial-hero h1{font-size:clamp(31px,8vw,44px)}
  .hero-lead{font-size:14px;line-height:1.65}
  .hero-actions{display:grid;grid-template-columns:1fr 1fr}.editorial-btn{width:100%}
  .hero-pills{flex-wrap:nowrap;overflow-x:auto;padding-bottom:3px;scrollbar-width:none}.hero-pills::-webkit-scrollbar{display:none}.hero-pills a{flex:0 0 auto}
  .hero-meta-line{gap:7px 11px}
  .hero-intelligence{padding:15px;border-radius:18px}.hero-trust-strip{grid-template-columns:1fr 1fr 1fr}
  .editorial-facts{grid-template-columns:1fr;gap:8px}.editorial-facts article{min-height:84px}
  .editorial-layout{margin-top:22px}.editorial-sidebar{grid-template-columns:1fr}.toc-panel{grid-column:auto}
  .article-overview{margin-bottom:10px}
  .editorial-content>.content-section,.custom-main-wrap .section{padding:22px 18px;border-radius:16px}
  .editorial-content>.content-section:before,.custom-main-wrap .section:before{right:15px;top:15px;font-size:40px}
  .editorial-content h2,.custom-main-wrap .section h2{font-size:clamp(22px,5.5vw,28px);padding-right:38px}
  .editorial-content p,.custom-main-wrap .section p{font-size:14.5px;line-height:1.72}
  .editorial-content .content-section>p:first-of-type{font-size:15px}
  .related-header{display:block}.related-header>a{display:inline-flex;margin-top:7px}.related-cards{grid-template-columns:1fr}.related-cards>a{min-height:145px}
  .hub-directory{padding:20px 16px;border-radius:18px}.hub-directory-head{display:block}.hub-count{display:inline-flex;margin-top:9px}.hub-directory-grid{grid-template-columns:1fr}
  .editor-review-card{grid-template-columns:54px minmax(0,1fr)}.editor-review-card img{width:54px;height:54px}.review-date{grid-column:1/-1;border-left:0;border-top:1px solid var(--line);padding:9px 0 0}
}
@media(max-width:560px){
  .modern-editorial .page-width{width:min(100% - 18px,var(--page-max))}
  .modern-editorial .brand-v6{font-size:27px}.modern-editorial .brand-image{max-height:36px;max-width:140px}
  .editorial-breadcrumb{padding-inline:2px}
  .editorial-hero{padding:24px 16px;border-radius:18px}
  .editorial-hero:after{display:none}
  .editorial-hero h1{font-size:clamp(29px,9vw,39px);line-height:1.07}
  .hero-actions{grid-template-columns:1fr}.editorial-btn{min-height:45px}
  .hero-meta-line{display:grid;grid-template-columns:1fr;gap:5px}
  .hero-intelligence-head{grid-template-columns:45px minmax(0,1fr) 20px}.hero-topic-icon{width:45px;height:45px}
  .hero-trust-strip{grid-template-columns:1fr}.hero-trust-strip span{display:flex;align-items:center;justify-content:center;gap:6px}.hero-trust-strip i{display:inline;margin:0}
  .editorial-facts article{grid-template-columns:26px minmax(0,1fr) 32px;padding:13px}
  .editorial-sidebar{gap:8px}.sidebar-panel{padding:13px}
  .article-overview{grid-template-columns:38px minmax(0,1fr);padding:13px}.overview-icon{width:38px;height:38px}
  .editorial-content{gap:9px}
  .editorial-content>.content-section,.custom-main-wrap .section{padding:20px 14px;border-radius:15px}
  .editorial-content>.content-section:before,.custom-main-wrap .section:before{right:11px;top:12px;font-size:36px}
  .editorial-content h2,.custom-main-wrap .section h2{font-size:22px;padding-right:34px}
  .editorial-content p,.custom-main-wrap .section p{font-size:14px;line-height:1.7}
  .editorial-content .bullet-list li,.editorial-content ul:not(.list)>li,.custom-main-wrap .list li,.editorial-content .steps li{font-size:12px}
  .editorial-content .promo-copy{grid-template-columns:1fr;gap:9px}.editorial-content .promo-copy-button{width:100%;min-height:40px}
  .editorial-content .table-wrap{overflow:visible;border:0;background:transparent}
  .editorial-content table{min-width:0;display:block}.editorial-content thead{display:none}.editorial-content tbody,.editorial-content tr,.editorial-content td{display:block;width:100%}
  .editorial-content tr{margin:0 0 9px;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--surface)}
  .editorial-content td{display:grid;grid-template-columns:minmax(92px,36%) minmax(0,1fr);gap:9px;padding:10px 11px;border-bottom:1px solid var(--line);font-size:11.5px}.editorial-content td:last-child{border-bottom:0}.editorial-content td:before{content:attr(data-label);color:var(--muted);font-size:8px;font-weight:900;text-transform:uppercase;letter-spacing:.04em}
  .editorial-visual-inline{grid-template-columns:36px minmax(0,1fr);padding:12px}.editorial-visual-inline>span{width:36px;height:36px}
  .custom-main-wrap{margin-top:20px}.custom-main-wrap .wrap.grid{display:block}.custom-main-wrap .side{padding-top:10px}.card-grid{grid-template-columns:1fr}
  .modern-editorial .static-footer{margin-top:38px}.modern-editorial .static-footer .footer-top-v6{padding:32px 0}.modern-editorial .static-footer-grid{grid-template-columns:1fr 1fr;gap:18px}.footer-legal-nav{gap:8px 13px}.page-toast{bottom:78px}
}
@media(max-width:400px){
  .modern-editorial .page-width{width:min(100% - 14px,var(--page-max))}
  .modern-editorial .static-mobile-menu .page-width{grid-template-columns:1fr 1fr}
  .editorial-hero{padding:22px 13px}.editorial-hero h1{font-size:29px}.hero-kicker{font-size:9px}.hero-kicker>span{width:31px;height:31px}
  .hero-promo-minimal{grid-template-columns:1fr}.hero-promo-minimal button{width:100%;justify-content:center}
  .editorial-content>.content-section,.custom-main-wrap .section{padding:18px 12px}.editorial-content h2,.custom-main-wrap .section h2{font-size:21px}.editorial-content p,.custom-main-wrap .section p{font-size:13.75px}
  .editorial-content td{grid-template-columns:1fr;gap:4px}.editorial-content td:before{margin-bottom:1px}
  .modern-editorial .static-footer-grid{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){.editorial-btn,.related-cards>a,.page-toast{transition:none!important}.reading-progress i{transition:none!important}}
@media print{.modern-editorial .static-header,.editorial-sidebar,.editorial-related,.hub-directory,.totop-v6,.page-toast,.reading-progress{display:none!important}.modern-editorial .page-width{width:100%!important}.editorial-hero,.editorial-content>.content-section{box-shadow:none!important;border:1px solid #ccc!important}.editorial-layout{display:block}.editorial-article{max-width:none}.editorial-content>.content-section{break-inside:avoid}}

/* CMS PRO media slots */
.cms-hero-media{margin:-14px -14px 16px;border-radius:18px 18px 12px 12px;overflow:hidden;background:var(--page-soft,#eef3fb);aspect-ratio:3/2;border:1px solid var(--line-soft,rgba(127,143,164,.18))}.cms-hero-media img{display:block;width:100%;height:100%;object-fit:cover}.cms-section .cms-figure{margin:20px 0 24px}.cms-section .cms-figure img{display:block;width:100%;height:auto;max-height:620px;object-fit:cover;border-radius:18px}.cms-section .cms-figure figcaption{font-size:.78rem;line-height:1.45;opacity:.7;margin-top:8px}.cms-layout-split .cms-figure{max-width:52%;float:right;margin:0 0 20px 26px}@media(max-width:720px){.cms-hero-media{margin:-8px -8px 13px;border-radius:14px 14px 10px 10px}.cms-layout-split .cms-figure{max-width:none;float:none;margin:18px 0}}

/* =====================================================================
   UZBBETTING EDITORIAL UI v4 — scroll stability + responsive typography
   2026-09-12
   ---------------------------------------------------------------------
   - Applies the intended 1240px editorial max-width on desktop.
   - Keeps readable line lengths and scalable type on large/small screens.
   - Removes the nested sidebar scroll area that can capture mouse-wheel.
   - Horizontal TOC remains independently scrollable on tablet/mobile.
   ===================================================================== */

.modern-editorial{
  --page-max:1240px;
  --copy-max:76ch;
  --type-body:clamp(15.5px, .24vw + 14.7px, 17px);
  --type-lead:clamp(16px, .36vw + 14.8px, 18px);
  --type-small:clamp(11.5px, .12vw + 11px, 12.5px);
  --type-label:clamp(9px, .10vw + 8.6px, 10px);
}

/* The previous file declared --page-max but still inherited the 1720px
   landing-page container. Editorial pages now use their own measure. */
.modern-editorial .page-width{
  width:min(var(--page-max),calc(100% - clamp(32px,4vw,72px)));
  margin-inline:auto;
}

/* Comfortable document sizing on desktop/laptop. */
.editorial-hero{
  padding:clamp(32px,3.5vw,52px);
  gap:clamp(24px,3vw,42px);
}
.editorial-hero h1{
  font-size:clamp(38px,3.75vw,58px);
  line-height:1.06;
  letter-spacing:-.035em;
}
.hero-kicker{font-size:clamp(10px,.16vw + 9.3px,11px)}
.hero-lead{font-size:var(--type-lead);line-height:1.7}
.hero-lead+.hero-lead{font-size:clamp(13px,.18vw + 12.3px,14px)}
.editorial-btn{font-size:13px;min-height:47px}
.hero-pills a{font-size:11px;min-height:35px}
.hero-meta-line{font-size:11.5px;line-height:1.45}
.hero-intelligence-head small{font-size:9px}
.hero-intelligence-head strong{font-size:17px}
.hero-signal-list b{font-size:12px;line-height:1.35}
.hero-signal-list small{font-size:11px;line-height:1.48}
.hero-promo-minimal small{font-size:9px}
.hero-promo-minimal button{font-size:10.5px}
.hero-trust-strip span{font-size:9.5px;line-height:1.4}

.editorial-facts h2{font-size:15px;line-height:1.35}
.editorial-facts p{font-size:12px;line-height:1.55}
.fact-index{font-size:11.5px}

/* Main column: avoid very long lines on wide monitors. */
.editorial-layout{display:grid}
.editorial-article{min-width:0;max-width:880px}
.article-overview strong{font-size:14.5px}
.article-overview p{font-size:12.5px;line-height:1.6}
.editorial-content h2,.custom-main-wrap .section h2{
  max-width:760px;
  font-size:clamp(25px,1.55vw + 7px,32px);
  line-height:1.2;
}
.editorial-content h3,.custom-main-wrap .section h3{
  font-size:clamp(19px,.45vw + 14px,21px);
  line-height:1.35;
}
.editorial-content p,.custom-main-wrap .section p{
  max-width:var(--copy-max);
  font-size:var(--type-body);
  line-height:1.74;
}
.editorial-content .content-section>p:first-of-type{
  font-size:clamp(16px,.28vw + 15px,17.5px);
  line-height:1.72;
}
.editorial-content .bullet-list li,
.editorial-content ul:not(.list)>li,
.custom-main-wrap .list li,
.editorial-content .steps li{
  font-size:clamp(14px,.18vw + 13.4px,15px);
  line-height:1.58;
}
.editorial-content table{font-size:13px}
.editorial-content th{font-size:10px;line-height:1.35}
.editorial-content td{font-size:13px;line-height:1.55}
.note-box,.editorial-visual-inline{font-size:14px;line-height:1.65}
.editorial-visual-inline strong{font-size:12.5px}
.editorial-visual-inline p{font-size:12px!important;line-height:1.55!important}
.editorial-content .promo-copy-main span{font-size:9px}
.editorial-content .promo-copy-note{font-size:11.5px!important}
.editorial-content .promo-copy-button{font-size:11px}
.editorial-content .faq-item summary{font-size:14px;line-height:1.5}
.editorial-content .faq-item p{font-size:13.5px!important;line-height:1.68!important}

/* Sidebar stays sticky but no longer becomes its own wheel-scroll document. */
.editorial-sidebar{
  max-height:none;
  overflow:visible;
}
.panel-title small{font-size:9px}
.panel-title strong{font-size:13px}
.editorial-toc a{font-size:11px;line-height:1.38;min-height:38px}
.editorial-toc a span{font-size:9px}
.responsible-panel p,.promo-panel p{font-size:11.5px;line-height:1.6}
.responsible-panel>a{font-size:10.5px}
.sidebar-promo-code code{font-size:12px}

.editor-review-card span{font-size:9px}
.editor-review-card h2{font-size:15px}
.editor-review-card p{font-size:12px;line-height:1.55}
.editor-review-card a{font-size:10.5px}
.review-date small{font-size:9px}.review-date strong{font-size:11.5px}
.section-kicker{font-size:9.5px}
.related-header>a{font-size:11.5px}
.related-cards small{font-size:9px}
.related-cards strong{font-size:15px;line-height:1.4}
.related-cards p{font-size:12px;line-height:1.55}
.hub-directory-head p{font-size:13px;line-height:1.6}
.hub-count{font-size:9.5px}
.hub-group-title h3{font-size:14.5px}
.hub-directory-grid nav a{font-size:11.5px;line-height:1.4}
.profile-card h2{font-size:18px}
.profile-card>p{font-size:12px;line-height:1.55}
.fact b{font-size:9px}.fact span{font-size:11.5px}
.mini h3{font-size:14px}.mini p{font-size:12.5px!important}
.footer-legal-nav a{font-size:10.5px}
.page-toast{font-size:11.5px}

/* Horizontal controls should never influence vertical document position. */
@media(max-width:920px){
  .modern-editorial .page-width{width:min(100% - 32px,var(--page-max))}
  .editorial-article{max-width:none}
  .editorial-toc,
  .hero-pills,
  .editorial-breadcrumb{
    overscroll-behavior-inline:contain;
    -webkit-overflow-scrolling:touch;
  }
  .editorial-toc{scroll-behavior:smooth}
  .editorial-toc a{font-size:11.5px;max-width:260px}
  .editorial-content p,.custom-main-wrap .section p{font-size:16px}
}

/* Tablet / small laptop */
@media(min-width:721px) and (max-width:1120px){
  .editorial-hero h1{font-size:clamp(36px,4.4vw,48px)}
  .hero-lead{font-size:16px}
  .editorial-content h2,.custom-main-wrap .section h2{font-size:clamp(24px,2.7vw,29px)}
  .editorial-content h3,.custom-main-wrap .section h3{font-size:19px}
}

/* Phones and compact tablets: retain readable body text instead of shrinking
   everything to 12-14px. */
@media(max-width:720px){
  .modern-editorial .page-width{width:min(100% - 24px,var(--page-max))}
  .editorial-hero{padding:27px 20px}
  .editorial-hero h1{font-size:clamp(30px,7.7vw,40px);line-height:1.08}
  .hero-kicker{font-size:10px}
  .hero-lead{font-size:15.5px;line-height:1.67}
  .hero-lead+.hero-lead{font-size:13px}
  .editorial-btn{font-size:12.5px}
  .hero-pills a{font-size:10.5px}
  .hero-meta-line{font-size:10.5px}
  .hero-signal-list b{font-size:11.5px}.hero-signal-list small{font-size:10.5px}
  .hero-trust-strip span{font-size:9.5px}
  .editorial-facts h2{font-size:14.5px}.editorial-facts p{font-size:11.5px}
  .article-overview strong{font-size:14px}.article-overview p{font-size:12px}
  .editorial-content>.content-section,.custom-main-wrap .section{padding:22px 18px}
  .editorial-content h2,.custom-main-wrap .section h2{font-size:clamp(23px,5.5vw,28px);line-height:1.22}
  .editorial-content h3,.custom-main-wrap .section h3{font-size:18.5px}
  .editorial-content p,.custom-main-wrap .section p{font-size:15.5px;line-height:1.72}
  .editorial-content .content-section>p:first-of-type{font-size:16px}
  .editorial-content .bullet-list li,
  .editorial-content ul:not(.list)>li,
  .custom-main-wrap .list li,
  .editorial-content .steps li{font-size:14px;line-height:1.56}
  .editorial-content .faq-item summary{font-size:14px}
  .editorial-content .faq-item p{font-size:13.75px!important}
  .related-cards strong{font-size:14.5px}.related-cards p{font-size:11.75px}
}

@media(max-width:560px){
  .modern-editorial .page-width{width:min(100% - 18px,var(--page-max))}
  .editorial-hero{padding:24px 16px}
  .editorial-hero h1{font-size:clamp(29px,8.8vw,37px)}
  .editorial-content>.content-section,.custom-main-wrap .section{padding:20px 15px}
  .editorial-content h2,.custom-main-wrap .section h2{font-size:23px;line-height:1.23}
  .editorial-content h3,.custom-main-wrap .section h3{font-size:18px}
  .editorial-content p,.custom-main-wrap .section p{font-size:15.25px;line-height:1.7}
  .editorial-content .bullet-list li,
  .editorial-content ul:not(.list)>li,
  .custom-main-wrap .list li,
  .editorial-content .steps li{font-size:13.75px}
  .editorial-content td{font-size:12.5px;line-height:1.5}
  .editorial-content td:before{font-size:9px}
  .sidebar-panel{padding:14px}
  .editorial-toc a{font-size:11.5px}
}

@media(max-width:400px){
  .modern-editorial .page-width{width:min(100% - 14px,var(--page-max))}
  .editorial-hero h1{font-size:clamp(27px,8.6vw,31px)}
  .hero-lead{font-size:15px}
  .editorial-content>.content-section,.custom-main-wrap .section{padding:18px 13px}
  .editorial-content h2,.custom-main-wrap .section h2{font-size:22px}
  .editorial-content p,.custom-main-wrap .section p{font-size:15px;line-height:1.68}
  .editorial-content .content-section>p:first-of-type{font-size:15.5px}
  .editorial-content .bullet-list li,
  .editorial-content ul:not(.list)>li,
  .custom-main-wrap .list li,
  .editorial-content .steps li{font-size:13.5px}
}

/* Large/high-density monitors: keep hierarchy visible without stretching copy. */
@media(min-width:1440px){
  .editorial-hero h1{font-size:56px}
  .hero-lead{font-size:18px}
  .editorial-content h2,.custom-main-wrap .section h2{font-size:31px}
  .editorial-content p,.custom-main-wrap .section p{font-size:16.5px}
}

@media(prefers-reduced-motion:reduce){
  .editorial-toc{scroll-behavior:auto!important}
}