/* PUBLIC_SKIN_V1 (2026-10-11): one skin for the secondary public pages of gibrid.ai
   (about, apps, blog, partners, status, legal, for/*, compare/*, 404, sign-in).
   Loaded LAST via the partial _gibrid_public_skin.html. It only overrides: the shared
   stylesheets (gibrid-landing.css, gibrid-brand.css, gibrid-refresh.css ...) stay untouched,
   because the old home page at /?v=1 still uses them.
   Values mirror tools/landing_v2/landing_v2.css + landing_extra.py (NAVY_ACCENT_V1). */

/* ───────── 1. Tokens ───────── */
:root{
  --g2-bg:#141414;--g2-band:#171717;--g2-card:#1E1E1E;--g2-field:#262626;
  --g2-t1:#F2F3F5;--g2-t2:#A6ABB7;--g2-t3:#8E93A0;
  --g2-line:rgba(255,255,255,.07);--g2-line2:rgba(255,255,255,.10);--g2-line3:rgba(255,255,255,.16);
  --g2-navy-line:rgba(120,150,230,.30);
  --g2-font:Onest,system-ui,-apple-system,"Segoe UI",sans-serif;
  /* variables the page templates already use */
  --bg:#141414;--bg-elev-1:#1E1E1E;--bg-elev-2:#262626;
  --border:rgba(255,255,255,.08);--border-strong:rgba(255,255,255,.12);
  --fg:#F2F3F5;--fg-muted:#A6ABB7;--fg-dim:#8E93A0;
  --accent:#F2F3F5;--accent-hover:#fff;--accent-h:#fff;
  --success:#4ADE80;--danger:#F87171;--warn:#FBBF24;--hot:transparent;
  color-scheme:dark;
}

/* ───────── 2. Page, type ───────── */
html{background:var(--g2-bg)!important}
:root body{
  background:var(--g2-bg)!important; /* v4: no navy light at the top of the page (removed from the home hero too); the navy tint stays on ONE highlighted card */
  color:var(--g2-t1)!important;
}
:root body,:root body *:not([class*="material-symbols"]):not(.fa):not(.fas):not(.far):not(.fab):not(code):not(pre){font-family:var(--g2-font)!important}
html[lang="ar"]:root body,html[lang="ar"]:root body *:not(code):not(pre):not([class*="material-symbols"]):not(.fa):not(.fas):not(.fab):not(.far){font-family:"IBM Plex Sans Arabic",Onest,system-ui,-apple-system,"Segoe UI",sans-serif!important;letter-spacing:0!important}
body::after,.hero-fx,.gib-bg-l,.hfx-grid,.hfx-glow,#gibBgDots{display:none!important}
.material-symbols-rounded{display:inline-block;width:1em;overflow:hidden;white-space:nowrap;direction:ltr}
:root h1,:root h2,:root h3{color:var(--g2-t1)!important;font-weight:600!important;letter-spacing:-.02em!important;text-shadow:none!important}
:root h1{font-size:clamp(32px,4.2vw,50px)!important;line-height:1.12!important}
:root .section-head h2,:root .final h2{font-size:clamp(26px,3vw,36px)!important;line-height:1.16!important}
:root .serif,:root h1 .serif,:root h1 .vs,:root h1 .b{font-style:normal!important;font-weight:600!important;color:var(--g2-t2)!important;letter-spacing:-.02em!important}
:root .eyebrow,:root .section-eyebrow,:root .cat,:root .apx-hero .eye{
  color:var(--g2-t3)!important;font-size:12px!important;font-weight:600!important;letter-spacing:.12em!important;text-transform:uppercase;background:none!important;border:0!important}
:root .lead,:root .lede,:root .sub{color:var(--g2-t2)!important}
::selection{background:rgba(120,150,230,.35);color:#fff}
:root :focus-visible{outline:2px solid #F2F3F5!important;outline-offset:2px!important;border-radius:8px}
:root a:focus-visible,:root button:focus-visible{box-shadow:0 0 0 4px rgba(20,20,20,.9)}
@media (prefers-reduced-motion:reduce){:root *{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* ───────── 3. Header ───────── */
:root nav.top{background:rgba(10,10,15,.78)!important;-webkit-backdrop-filter:blur(24px) saturate(1.6);backdrop-filter:blur(24px) saturate(1.6);border-bottom:1px solid var(--g2-line)!important;box-shadow:none!important}
:root nav.top .nav-inner{gap:10px}
:root .brand{color:var(--g2-t1)!important;gap:10px!important;min-height:40px}
:root .brand-mark{background-color:transparent!important;background-image:url('/static/brand/gibrid/gibrid-app-icon-1024.svg')!important;background-size:100%!important;width:32px!important;height:32px!important;border-radius:9px!important;box-shadow:none!important;font-size:0!important;color:transparent!important;flex:0 0 32px}
:root .brand-wordmark{font-weight:800!important;letter-spacing:-.02em!important;text-transform:uppercase;font-size:14.5px!important;color:#F0EDE8!important}
:root .brand-wordmark>.gw-main{font-weight:800!important}
:root .brand-wordmark>.gw-dot{color:var(--g2-t2)!important;margin:0!important}
:root .brand-wordmark>.gw-ai{font-weight:500!important;opacity:1!important}
:root .nav-links a{color:var(--g2-t1)!important;font-weight:600!important;font-size:14px!important}
:root .nav-links a svg[fill="#fff"]{fill:var(--g2-t2)}
:root .nav-cta{background:#fff!important;background-image:none!important;color:#111!important;border:0!important;border-radius:999px!important;box-shadow:none!important;font-weight:600!important;font-size:14px!important;padding:0 18px!important;min-height:40px;display:inline-flex!important;align-items:center;gap:6px;text-decoration:none!important;opacity:1!important;transform:none!important;white-space:nowrap}
:root .nav-cta *{color:#111!important}
:root .nav-cta:hover{background:#e6e6e6!important}
:root .nav-dd-btn{color:var(--g2-t2)!important;min-height:40px}
:root .nav-dd-menu{background:var(--g2-card)!important;border:1px solid var(--g2-line2)!important;border-radius:14px!important;box-shadow:0 18px 50px -20px rgba(0,0,0,.9)!important}
:root .nav-profile-btn{background:transparent!important;border:1px solid var(--g2-line2)!important;border-radius:999px!important;color:var(--g2-t1)!important;min-height:40px}
:root .nav-profile-av-init{background:rgba(255,255,255,.08)!important;color:var(--g2-t1)!important}
/* EN/RU switch (gibrid-brand.css) */
:root .lang-switch{background:transparent!important;border:1px solid var(--g2-line2)!important;border-radius:999px!important;padding:3px!important;gap:2px!important;box-shadow:none!important;display:inline-flex;align-items:center}
:root .lang-switch .lang-btn{background:transparent!important;color:var(--g2-t3)!important;border:0!important;border-radius:999px!important;min-width:40px;min-height:32px;padding:0 10px!important;font-size:12.5px!important;font-weight:600!important;letter-spacing:.02em!important;box-shadow:none!important;cursor:pointer}
:root .lang-switch .lang-btn:hover{color:var(--g2-t1)!important}
:root .lang-switch .lang-btn.active{background:rgba(255,255,255,.10)!important;color:var(--g2-t1)!important}
/* sidebar toggle of gibrid_base pages */
:root #gibSbToggle{background:rgba(20,20,20,.92)!important;border:1px solid var(--g2-line3)!important;color:var(--g2-t1)!important;box-shadow:none!important}
:root .gib-sb-av-init{background:rgba(255,255,255,.08)!important}

/* ───────── 4. Buttons ───────── */
:root .btn{border-radius:999px!important;min-height:44px;padding:0 22px!important;font-weight:600!important;font-size:15px!important;letter-spacing:0!important;box-shadow:none!important;transform:none!important;text-decoration:none!important}
:root .btn-primary,:root .cta-end a.btn{background:#fff!important;background-image:none!important;color:#111!important;border:1px solid #fff!important}
:root .btn-primary *,:root .cta-end a.btn *{color:#111!important}
:root .btn-primary:hover,:root .cta-end a.btn:hover{background:#e6e6e6!important;border-color:#e6e6e6!important;color:#111!important;box-shadow:none!important}
:root .btn-ghost{background:transparent!important;color:var(--g2-t1)!important;border:1px solid var(--g2-line3)!important}
:root .btn-ghost:hover{border-color:rgba(255,255,255,.4)!important;background:transparent!important}
:root .btn[disabled]{opacity:.55}

/* ───────── 5. Cards, sections ───────── */
:root .card,:root .h-card,:root .step,:root .track,:root .math,:root .rules,:root .faq-item,:root .apply-card,:root .apply-ok,:root .pstate,:root .price-hint,
:root .choose-col,:root .compare-wrap,:root .cta-end,:root .section-card,:root .check-row,:root .stat,:root .apx-card{
  background-color:var(--g2-card)!important;background-image:none!important;border-color:var(--g2-line2)!important;box-shadow:none!important}
:root .card:hover,:root .apx-card:hover{background-color:#222!important;border-color:var(--g2-line3)!important;transform:none!important}
:root .stats{background:var(--g2-line2)!important;border-color:var(--g2-line2)!important;border-radius:18px!important}
:root .final{background:var(--g2-band)!important;border-color:var(--g2-line)!important}
:root .h-ico{background:rgba(255,255,255,.06)!important;color:var(--g2-t1)!important}
:root .faq-q{color:var(--g2-t1)!important;min-height:48px}
:root .faq-item.open .faq-q .chev{color:var(--g2-t1)!important}
:root .faq-a,:root .h-card p,:root .step p,:root .track p,:root .math p,:root .rules li,:root .pstate p{color:var(--g2-t2)!important}
:root .math p strong{color:var(--g2-t1)!important}
/* the ONE highlighted card per page: navy tint + navy hairline */
:root .choose-col.us,:root .track:last-child,:root .intro{
  background:linear-gradient(180deg,rgba(16,27,61,.60),rgba(16,27,61,.40))!important;background-color:var(--g2-card)!important;border:1px solid var(--g2-navy-line)!important}
:root .pstate.warn{background:var(--g2-card)!important;border-color:rgba(248,113,113,.4)!important}
:root .apply-ok{border-color:var(--g2-line3)!important}

/* ───────── 6. Tables ───────── */
:root .compare th{background:var(--g2-field)!important;color:var(--g2-t3)!important;font-weight:600!important;letter-spacing:.06em!important}
:root .compare th.us{color:var(--g2-t1)!important}
:root .compare th,:root .compare td{border-color:var(--g2-line)!important}
:root .compare td{color:var(--g2-t1)!important}
:root .compare td:first-child{color:var(--g2-t2)!important}
:root .compare td.us-col{background:rgba(255,255,255,.035)!important}
:root .compare .yes{color:var(--g2-t1)!important;font-weight:600!important}
:root .compare .no{color:var(--g2-t3)!important}
:root .compare .partial{color:var(--g2-t2)!important}

/* ───────── 7. Forms ───────── */
:root .field input,:root .field select,:root .field textarea,:root .signin-grid input,:root .blog-search input,:root .apx-search input{
  background:var(--g2-field)!important;border:1px solid var(--g2-line2)!important;border-radius:12px!important;color:var(--g2-t1)!important;min-height:44px;font-size:15px!important;box-shadow:none!important}
:root .field input::placeholder,:root .field textarea::placeholder,:root .signin-grid input::placeholder,:root .apx-search input::placeholder{color:var(--g2-t3)!important;opacity:1}
:root .field input:focus,:root .field select:focus,:root .field textarea:focus,:root .signin-grid input:focus,:root .blog-search input:focus,:root .apx-search input:focus{
  border-color:rgba(255,255,255,.34)!important;background:var(--g2-field)!important;box-shadow:0 0 0 4px rgba(30,58,138,.28)!important;outline:none!important}
:root .field label,:root .signin-grid label{color:var(--g2-t2)!important;letter-spacing:0!important;font-weight:500!important;font-size:13px!important;text-transform:none!important}
:root .field .req,:root .apply-privacy{color:var(--g2-t3)!important}
:root .field.invalid input,:root .field.invalid textarea,:root .field.invalid select{border-color:var(--danger)!important}
:root #gp-signin-msg.ok{color:var(--success)!important}

/* ───────── 8. Prose (blog post, legal) ───────── */
:root .article p,:root .article ul,:root .article ol{color:#D7DAE0!important;font-size:17px;line-height:1.7}
:root .article h2{font-size:24px!important;margin-top:40px}
:root .article h3{font-size:19px!important}
:root .article a,:root main .wrap p a,:root main .wrap li a,:root .contacts a{color:var(--g2-t1)!important;text-decoration:underline!important;text-decoration-color:rgba(255,255,255,.35)!important;text-underline-offset:3px}
:root .article a:hover,:root main .wrap p a:hover,:root main .wrap li a:hover{text-decoration-color:#fff!important}
:root .article code{background:var(--g2-field)!important;border-color:var(--g2-line2)!important;font-family:ui-monospace,SFMono-Regular,Menlo,monospace!important}
:root .article em{color:var(--g2-t2)!important}
:root .post-meta,:root .card-meta{color:var(--g2-t3)!important;letter-spacing:0!important}
:root .cover img{border-radius:22px!important;border:1px solid var(--g2-line2)!important}
:root .card-thumb{background:#0f0f0f!important}
:root .card-cat{background:rgba(20,20,20,.72)!important;border:1px solid var(--g2-line3)!important;font-weight:600!important}
:root .card-title{font-weight:600!important;letter-spacing:-.015em!important;color:var(--g2-t1)!important}
:root .card-excerpt{color:var(--g2-t2)!important}
:root .back{color:var(--g2-t2)!important;min-height:40px;text-decoration:none!important}
:root .back:hover{color:var(--g2-t1)!important}
/* legal + status (hard-coded colours in the templates) */
:root main .wrap>h1{font-size:clamp(28px,3.4vw,38px)!important}
:root .meta{color:var(--g2-t3)!important;letter-spacing:.04em}
:root .section-card h2,:root main .wrap>h2{font-size:19px!important;letter-spacing:-.01em!important}
:root .section-card p,:root .section-card li,:root main .wrap>p,:root main .wrap>ul li,:root .intro p,:root .contacts p{color:#C3C7D0!important}
:root .section-card strong,:root .intro strong,:root main .wrap strong{color:var(--g2-t1)!important}
:root .highlight{color:var(--g2-t1)!important}
:root .contacts{background:var(--g2-card)!important;border:1px solid var(--g2-line2)!important;border-radius:16px!important}
:root main .wrap>.nav-links{border-top:1px solid var(--g2-line)!important}
:root main .wrap>.nav-links a{border:1px solid var(--g2-line2)!important;border-radius:999px!important;color:var(--g2-t2)!important;font-weight:500!important;min-height:40px;padding:0 16px!important;text-decoration:none!important}
:root main .wrap>.nav-links a:hover{border-color:rgba(255,255,255,.4)!important;color:var(--g2-t1)!important}
:root .check-row{border-radius:16px!important}
:root .check-name{color:var(--g2-t1)!important}
:root .pill{background:var(--g2-card)!important;border:1px solid var(--g2-line2)!important;color:var(--g2-t1)!important;font-weight:500!important;padding:9px 16px!important}
:root .pill .dot{background:#4ADE80!important;box-shadow:none!important;animation:none!important}
:root .pill.degraded .dot{background:#F87171!important}
:root .ok{color:#4ADE80!important}:root .ok .dot{background:#4ADE80!important}
:root .fail{color:#F87171!important}:root .fail .dot{background:#F87171!important}

/* ───────── 9. Footer ───────── */
:root footer.foot,:root footer.page-foot{
  background:linear-gradient(180deg,#141414 0%,#0E1322 100%)!important;border-top:1px solid var(--g2-line)!important;
  color:var(--g2-t3)!important;font-size:13.5px!important;line-height:1.7!important;padding:30px 20px 38px!important;text-align:center}
:root footer.foot a,:root footer.page-foot a{color:var(--g2-t2)!important;text-decoration:none!important;display:inline-block;padding:3px 0}
:root footer.foot a:hover,:root footer.page-foot a:hover{color:var(--g2-t1)!important;text-decoration:underline!important}
:root footer.foot p{color:var(--g2-t3)!important;opacity:1!important;font-size:12px!important}
:root .gsk-foot-links{display:block;margin-top:6px}

/* ───────── 10. Per-page blocks ───────── */
/* about */
:root .abt .card{border-radius:18px!important}
:root .abt .mission,:root .abt .val p{color:var(--g2-t2)!important}
:root .abt .facts .k{color:var(--g2-t3)!important}
:root .abt .facts .v,:root .abt .facts .v a{color:var(--g2-t1)!important}
:root .abt .facts .row{border-color:var(--g2-line)!important}
:root .abt .mapw a{color:var(--g2-t2)!important;border-color:var(--g2-line)!important;min-height:40px}
:root .abt .chip{background:transparent!important;border:1px solid var(--g2-line2)!important;color:var(--g2-t2)!important}
:root .abt .chip i{color:var(--g2-t3)!important}
:root .abt .cta a{background:#fff!important;color:#111!important;border-radius:999px!important;min-height:48px;padding:0 28px!important}
:root .abt a[href="/roadmap/"]{background:transparent!important;color:var(--g2-t1)!important;border:1px solid var(--g2-line3)!important;border-radius:999px!important;font-size:15px!important;padding:13px 24px!important}
:root .abt a[href="/roadmap/"] svg path{stroke:#F2F3F5}:root .abt a[href="/roadmap/"] svg circle{fill:#F2F3F5}
:root .abt a[href="/roadmap/"]:hover{border-color:rgba(255,255,255,.4)!important}
/* apps catalogue */
:root .apx-hero h1{color:var(--g2-t1)!important}
:root .apx-hero p,:root .apx-d{color:var(--g2-t2)!important}
:root .apx-chip{background:transparent!important;border:1px solid var(--g2-line2)!important;border-radius:999px!important;color:var(--g2-t2)!important;font-weight:500!important;min-height:40px;padding:0 15px!important}
:root .apx-chip:hover{background:var(--g2-card)!important;color:var(--g2-t1)!important}
:root .apx-chip[aria-pressed="true"]{background:#fff!important;color:#111!important;border-color:#fff!important}
:root .apx-t,:root .apx-shelf-h{color:var(--g2-t1)!important;font-weight:600!important}
:root .apx-meta,:root .apx-count,:root .apx-empty{color:var(--g2-t3)!important}
:root .apx-star{color:var(--g2-t2)!important}
:root .apx-seeall{color:var(--g2-t2)!important;min-height:40px}
:root .apx-seeall:hover{color:var(--g2-t1)!important}
:root section.apx-shelf{padding:0!important;margin-bottom:34px!important;background:transparent!important;border:0!important}
:root .page-main>div>a[href="/chat"]{background:#fff!important;color:#111!important;border-radius:999px!important;min-height:48px}
/* blog */
:root header.head{padding:56px 0 20px!important}
:root header.hero{background:transparent!important}
/* persona */
:root .hero-cover{border:1px solid var(--g2-line2)!important;border-radius:22px!important;box-shadow:none!important;background:#0f0f0f!important}
/* 404 (errors/gibrid_404.html) */
.gsk-404{min-height:100vh;min-height:100dvh;display:grid;place-items:center;padding:96px 20px 64px;text-align:center}
.gsk-404-in{max-width:520px;width:100%}
.gsk-404 .brand{justify-content:center;margin-bottom:34px;text-decoration:none}
.gsk-404-code{display:inline-block;font-size:13px;font-weight:600;color:var(--g2-t3);border:1px solid rgba(120,150,230,.22);background:rgba(16,27,61,.38);border-radius:999px;padding:6px 14px;margin-bottom:18px}
:root .gsk-404 h1{font-size:clamp(30px,5vw,44px)!important;margin:0 0 12px}
.gsk-404 p.gsk-404-lede{color:var(--g2-t2);font-size:16px;line-height:1.6;margin:0 auto 28px;max-width:420px}
.gsk-404-row{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.gsk-404-row .btn{display:inline-flex;align-items:center;justify-content:center}
.gsk-404-help{margin-top:34px;display:flex;flex-wrap:wrap;gap:4px 18px;justify-content:center;font-size:13.5px}
.gsk-404-help a{color:var(--g2-t2);text-decoration:none;min-height:40px;display:inline-flex;align-items:center}
.gsk-404-help a:hover{color:var(--g2-t1);text-decoration:underline}
body.ru .en{display:none}body:not(.ru) .ru{display:none}

/* ───────── 11. Sign-in (tg_auth_react.html, body.gibrid) ───────── */
:root body.gibrid::before,:root body.gibrid::after,:root body.gibrid .gibrid-bg-grid,:root body.gibrid .gibrid-bg-vignette,:root body.gibrid>div.fixed.inset-0.pointer-events-none{display:none!important;content:none!important}
:root body.gibrid .bg-gray-800\/80{background:var(--g2-card)!important;border-color:var(--g2-line2)!important;border-radius:22px!important;box-shadow:0 18px 50px -30px rgba(0,0,0,.9)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
:root body.gibrid h1.text-xl{font-size:24px!important;line-height:1.2!important;margin-bottom:6px}
:root body.gibrid .text-gray-400{color:var(--g2-t2)!important}
:root body.gibrid .text-gray-500,:root body.gibrid .text-gray-600{color:var(--g2-t3)!important}
:root body.gibrid .text-gray-200,:root body.gibrid .text-gray-100,:root body.gibrid .text-white{color:var(--g2-t1)!important}
:root body.gibrid label.text-xs{font-size:13px!important;font-weight:500!important;letter-spacing:0!important;text-transform:none!important;color:var(--g2-t2)!important}
:root body.gibrid input{background:var(--g2-field)!important;border:1px solid var(--g2-line2)!important;border-radius:12px!important;color:var(--g2-t1)!important;font-size:16px!important;min-height:46px;letter-spacing:0!important;box-shadow:none!important}
:root body.gibrid input::placeholder{color:var(--g2-t3)!important;opacity:1}
:root body.gibrid input:focus{border-color:rgba(255,255,255,.34)!important;box-shadow:0 0 0 4px rgba(30,58,138,.28)!important;outline:none!important}
:root body.gibrid #loginBtn,:root body.gibrid #emergencyBtn button{background:#fff!important;color:#111!important;border:1px solid #fff!important;border-radius:999px!important;font-weight:600!important;letter-spacing:0!important;font-size:15px!important;min-height:48px;box-shadow:none!important}
:root body.gibrid #loginBtn:hover,:root body.gibrid #emergencyBtn button:hover{background:#e6e6e6!important;border-color:#e6e6e6!important}
:root body.gibrid #loginBtn:disabled{opacity:.6}
:root body.gibrid #appleBtn,:root body.gibrid a[href^="/dashboard/api/google/auth"]{background:transparent!important;color:var(--g2-t1)!important;border:1px solid var(--g2-line3)!important;border-radius:999px!important;min-height:48px;font-weight:500!important;font-size:15px!important;box-shadow:none!important}
:root body.gibrid #appleBtn:hover,:root body.gibrid a[href^="/dashboard/api/google/auth"]:hover{border-color:rgba(255,255,255,.4)!important;background:rgba(255,255,255,.04)!important}
:root body.gibrid .text-blue-400,:root body.gibrid .text-blue-300{color:var(--g2-t1)!important;text-decoration:underline;text-decoration-color:rgba(255,255,255,.35);text-underline-offset:3px}
:root body.gibrid a.text-xs.text-blue-400{display:inline-flex;align-items:center;min-height:24px}
:root body.gibrid .text-red-400{color:#FCA5A5!important}
:root body.gibrid .or-divider{color:var(--g2-t3)!important}
:root body.gibrid .or-divider::before,:root body.gibrid .or-divider::after{background:var(--g2-line2)!important}
:root body.gibrid .gibrid-brand-line{font-size:16px!important;font-weight:800!important;letter-spacing:-.02em!important;text-transform:uppercase;color:#F0EDE8!important}
:root body.gibrid .gibrid-brand-line .gw-dot{color:var(--g2-t2)!important;margin:0!important}
:root body.gibrid .gibrid-brand-line .gw-ai{font-weight:500!important;opacity:1!important}
:root body.gibrid .gibrid-tg-mark{background:url('/static/brand/gibrid/gibrid-app-icon-1024.svg') center/100% no-repeat transparent!important}
/* Telegram Mini App boot screen (shown only inside Telegram) */
:root body.gibrid #loadingProgress{background:#F2F3F5!important}
:root body.gibrid .bg-gray-700.rounded-full{background:rgba(255,255,255,.08)!important}
:root body.gibrid .animate-bounce{background:var(--g2-t2)!important}
:root body.gibrid #loadingPercentage{font-family:var(--g2-font)!important;font-variant-numeric:tabular-nums}

/* ───────── 12. Cookie notice injected by /static/consent.js ───────── */
:root #gb-consent{background:var(--g2-card)!important;color:var(--g2-t1)!important;border:1px solid var(--g2-line2)!important;border-radius:18px!important;box-shadow:0 18px 50px -20px rgba(0,0,0,.9)!important;font-family:var(--g2-font)!important}
:root #gb-consent p{color:var(--g2-t2)!important}
:root #gb-consent a{color:var(--g2-t1)!important;text-decoration:underline!important;text-decoration-color:rgba(255,255,255,.35)!important;text-underline-offset:3px;min-height:40px;display:inline-flex;align-items:center}
:root #gb-consent button{background:transparent!important;color:var(--g2-t1)!important;border:1px solid var(--g2-line3)!important;border-radius:999px!important;min-height:40px;padding:0 16px!important}
:root #gb-consent button.p{background:#fff!important;color:#111!important;border-color:#fff!important}

/* second header button (Home / Start free / Apply) is the secondary action next to Sign in */
:root nav.top .nav-inner>a.nav-cta{background:transparent!important;color:var(--g2-t1)!important;border:1px solid var(--g2-line3)!important}
:root nav.top .nav-inner>a.nav-cta *{color:var(--g2-t1)!important}
:root nav.top .nav-inner>a.nav-cta:hover{background:transparent!important;border-color:rgba(255,255,255,.4)!important}
/* blog post: that button is a second "Sign in" duplicating the auth chip */
:root body:has(main.article) nav.top .nav-inner>a.nav-cta{display:none!important}
:root .article a.back,:root .article .cta-end a{text-decoration:none!important}
:root .stats{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))!important}
:root .abt .facts .v a{display:inline-block;padding:12px 0;margin:-12px 0}
:root body.gibrid a.text-xs.text-blue-400{padding:12px 0;margin:-12px 0}
/* brand stays left-to-right on RTL pages */
:root .brand-wordmark,:root body.gibrid .gibrid-brand-line{direction:ltr;unicode-bidi:isolate}

/* ───────── 13. Mobile ───────── */
@media (max-width:720px){
  :root nav.top .nav-inner{padding-left:14px!important;padding-right:14px!important;gap:8px}
  :root nav.top .nav-inner>div{gap:6px!important;min-width:0}
  /* the second header button duplicates a hero/footer action; the header keeps logo, language, sign-in */
  :root nav.top .nav-inner>a.nav-cta{display:none!important}
  :root .nav-cta{padding:0 14px!important}
  :root .nav-cta .material-symbols-rounded{display:none!important}
  :root .lang-switch .lang-btn{min-height:40px;min-width:40px;padding:0 8px!important}
  :root .wrap{padding-left:18px!important;padding-right:18px!important}
  :root header.hero{padding:44px 0 36px!important}
  :root section{padding-top:48px;padding-bottom:48px}
  :root .final{padding:64px 0 68px!important}
  :root h1{font-size:clamp(30px,8.4vw,40px)!important;overflow-wrap:anywhere}
  :root .section-head{margin-bottom:28px!important}
  :root .cta-row .btn{flex:1 1 auto;justify-content:center}
  :root .section-card,:root .apply-card,:root .math,:root .rules,:root .track,:root .step,:root .choose-col{padding:20px 18px!important}
  :root .faq-q{padding:14px 16px!important;text-align:start}
  :root footer.foot a,:root footer.page-foot a,:root .card-meta{min-height:40px;display:inline-flex;align-items:center}
  :root .abt a[href="/roadmap/"]{font-size:14px!important;padding:12px 16px!important}
  :root .abt .facts .row{flex-wrap:wrap}
  :root .gsk-404-row .btn{flex:1 1 140px}
  :root #gb-consent .r{gap:8px}
}

/* I18N_PAGES_V1: six-language switch (native picker under a compact label), legal translation note, Arabic layout */
:root .lang-switch.lang-switch--select{position:relative;display:inline-flex!important;align-items:center;gap:6px!important;padding:0 12px!important;min-height:40px;min-width:40px;color:var(--g2-t2,#A6ABB7);cursor:pointer}
:root .lang-switch--select:hover{color:var(--g2-t1,#F2F3F5)}
:root .lang-switch--select .lang-cur{font-size:13px;font-weight:600;letter-spacing:.02em;line-height:1}
:root .lang-switch--select .lang-select{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;border:0;font-size:16px;appearance:none;-webkit-appearance:none}
:root .lang-switch--select .lang-select option{color:#111;background:#fff}
.legal-tr-note{margin:0 0 22px;padding:12px 16px;border:1px solid rgba(255,255,255,.14);border-radius:14px;background:#1A1A1A;color:#C9CDD6;font-size:14px;line-height:1.55}
.legal-tr-note a{color:#fff;text-decoration:underline;white-space:nowrap}
html[dir="rtl"] body,html[dir="rtl"] body *:not([class*="material-symbols"]):not(code):not(pre):not(pre *){font-family:"IBM Plex Sans Arabic",Onest,system-ui,-apple-system,"Segoe UI",sans-serif!important;letter-spacing:0!important}
html[dir="rtl"],html[dir="rtl"] body{overflow-x:hidden}
html[dir="rtl"] table{direction:rtl} html[dir="rtl"] th,html[dir="rtl"] td{text-align:right}
html[dir="rtl"] ul,html[dir="rtl"] ol{padding-left:0;padding-right:1.4em}
html[dir="rtl"] .back,html[dir="rtl"] .crumbs,html[dir="rtl"] .breadcrumbs{direction:rtl}

/* I18N_PAGES_RTL2 */
html[dir="rtl"] .gib-sb{left:auto;right:0;transform:translateX(100%)}
html[dir="rtl"] .gib-sb.show,html[dir="rtl"] body.gib-sb-open .gib-sb{transform:none}
html[dir="rtl"] .gib-sb-toggle{left:auto;right:14px;transform:none}
html[dir="rtl"] .gib-sb-prof,html[dir="rtl"] button.gib-sb-link{text-align:right}
@media (min-width:1024px){ html[dir="rtl"] body.gib-app:not(.gib-sb-collapsed){padding-left:0;padding-right:264px} html[dir="rtl"] body.gib-app:not(.gib-sb-collapsed) .gib-sb{transform:none} }
@media (max-width:1023px){ html[dir="rtl"] .gib-sb-toggle{right:11px} html[dir="rtl"] body.gib-sb-open .gib-sb-toggle{opacity:0;pointer-events:none} }
html[dir="rtl"] .nav-dd-menu{left:0;right:auto}
html[dir="rtl"] .mobile-menu .close{right:auto;left:14px}
html[dir="rtl"] .nav-cta .material-symbols-rounded,html[dir="rtl"] .menu-cta .material-symbols-rounded,html[dir="rtl"] .gib-sb-signin .material-symbols-rounded{transform:scaleX(-1)}
/* I18N round 2 */
html[dir="rtl"] .bk-arrow{display:inline-block;transform:scaleX(-1)}