/* ═══════════════════════════════════════════════════════════════════════
   mobile.css — aliasvps.com
   Loaded LAST (after the page stylesheet) with media="(max-width:1100px)",
   so nothing in here can touch the desktop layout above 1100 px.

   1. Tablet / landscape phone (769–1100 px): tighter header, safe areas
   2. Phone (≤ 768 px): app shell — compact top bar, bottom tab bar, menu,
      language picker and sign-in as bottom sheets, keyboard-aware chrome,
      cross-page transitions
   3. Responsive fixes found by the multi-width audit: scrolling tables,
      fluid grids, clipped labels, long words, RTL overflow, 44 px touch
      targets, 11–12 px text floor
   Page-level inline <style> blocks load after this file, which is why a few
   selectors carry an extra `body` for specificity.
   ═══════════════════════════════════════════════════════════════════════ */

/* ═══════════════ 1. EVERY TOUCH-SIZED VIEWPORT ═══════════════ */
:root{color-scheme:dark}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;touch-action:manipulation}
/* Notched phones in landscape: keep content out of the sensor housing.
   (viewport-fit=cover makes env() non-zero; it is 0 everywhere else.) */
body{padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px);
  background-attachment:scroll}
/* Long URLs, hashes and German compounds wrap instead of widening the page */
body{overflow-wrap:break-word}
.ftr-coins img{width:auto}

/* Sign-in dialog: centre with auto margins so a dialog taller than a short
   landscape viewport scrolls from its top instead of being cut off. */
.auth-modal{align-items:flex-start}
.auth-card{margin:auto}

/* Touch tablets (desktop layout, finger input): desktop-sized controls grow to
   a 44 px hit area. A mouse-driven window of the same width is untouched. */
@media (min-width:769px) and (pointer:coarse){
  .hdr .btn,.hdr-user,.hdr .lang-sw-trigger{min-height:44px}
  .hdr .brand,.ftr-brand .brand{min-height:44px}
  .mob-close{width:44px;height:44px}
  .mob-actions .btn,.btn,.wallet-btn,.sec-btn,.dply-authed-btn,.plan-switcher-tabs button,
  .panel-nav a,.panel-signout,.sum-signup-btn{min-height:44px}
  .ftr-sec-links a{display:flex;align-items:center;min-height:44px;padding:0}
  .ftr-bottom a{display:inline-block;padding:13px 2px;margin:-13px -2px}
  .crumb a{display:inline-flex;align-items:center;min-height:44px;margin:-13px -4px;padding:0 4px}
}
/* Client panel: the horizontal tab strip must scroll inside its row instead of
   widening the one-column grid (it pushed the page to ~590 px on phones). */
@media (max-width:960px){
  .panel-wrap{grid-template-columns:minmax(0,1fr)}
  .panel-side,.panel-main{min-width:0}
}
@media (min-width:721px) and (max-width:768px){
  .panel-side{margin-left:-20px;margin-right:-20px}
}
@media (max-width:768px){
  /* Panel: touch sizes and the 11–12 px text floor */
  .panel-mobstrip-out{min-width:44px;min-height:44px}
  .wallet-btn,.sec-btn,#topup-go,.topup-preset{min-height:44px}
  .sec-field input,.topup-input input{min-height:44px}
  body .panel-nav a .badge,body .panel-nav a .badge.money,body .empty-plan .tier .type,body .topup-preset .b,
  body .stat-lbl,body .wallet-meta .k,body .acc-row .k,body .empty-plan .price small{font-size:11px}
  body .panel-mobstrip-meta span,body .stat-sub,body .empty-plan .specs,body .pcard-head .meta,body .sec-hint,
  body .topup-hint{font-size:12px}
  /* Deploy configurator */
  body .plan-pick-meta em.ddr,body #stp-plan-badge,body .plan-pick-price small,body .period-sub,body .sum .lbl,
  body .sum-coins-lbl,body .sum-qty .val span,body #sum-qty .val span,
  body .topup-preset.has-bonus .b{font-size:11px}
  body .dply-authed-body span,body .period-label .hint{font-size:12px}
  /* Payment page: copying the deposit address is the key tap */
  .pd-copy{min-height:44px}
  .pd-row .k,.prog-label{font-size:11px}
}
@media (max-width:760px){
  .pay-grid{grid-template-columns:minmax(0,1fr)}
}
@media (min-width:769px){
  .hdr-inner{gap:14px}
  .nav a{padding:0 10px}
  .nav a.active::after,.nav a::before{left:10px;right:10px}
  .hdr-right{gap:6px}
  .hdr-right .btn{padding:8px 12px}
  /* Panel tab strip sits under the 64 px header in this range, not 60 px */
  .panel-side{top:64px}
}
@media (min-width:769px) and (max-width:880px){
  /* The four nav links + three actions do not fit: the links move into the
     side drawer opened by the menu button. */
  .hdr .nav{display:none}
  .hdr .mob-toggle{display:inline-flex;width:44px;height:44px}
}

/* ═══════════════ 2. PHONE APP SHELL (≤ 768 px) ═══════════════ */
@media (max-width:768px){
  html{scroll-padding-top:72px;scroll-padding-bottom:calc(76px + env(safe-area-inset-bottom,0px))}
  body{padding-bottom:calc(60px + env(safe-area-inset-bottom,0px))}

  /* ── Top bar: logo · language. Opaque instead of blurred — cheaper to
        scroll on low-end phones and lets the language sheet be position:fixed
        relative to the screen (a backdrop-filter ancestor would trap it). ── */
  .hdr{background:rgba(11,15,25,.97);backdrop-filter:none;-webkit-backdrop-filter:none;
    height:calc(60px + env(safe-area-inset-top,0px));padding-top:env(safe-area-inset-top,0px)}
  .hdr-inner{gap:10px}
  .hdr .mob-toggle{display:none}
  .hdr .brand{min-height:44px}
  .hdr .lang-sw-trigger{height:44px;padding:6px 12px 6px 10px}
  .lang-sw-code{font-size:12px}
  .hdr-back{display:none;width:40px;height:40px;margin-inline-start:-8px;border-radius:12px;
    align-items:center;justify-content:center;font-size:22px;color:var(--text)}
  html.bv-standalone .hdr-back:not([hidden]){display:inline-flex}
  [dir="rtl"] .hdr-back i{transform:scaleX(-1)}

  /* ── Bottom tab bar ── */
  .tabbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:90;
    height:calc(60px + env(safe-area-inset-bottom,0px));
    padding:0 max(4px,env(safe-area-inset-right,0px)) env(safe-area-inset-bottom,0px) max(4px,env(safe-area-inset-left,0px));
    background:rgba(11,15,25,.97);border-top:1px solid var(--border);
    box-shadow:0 -12px 32px -14px rgba(0,0,0,.65);
    transition:transform .25s var(--ease)}
  .tab{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    position:relative;padding:6px 2px 4px;color:var(--text-3);text-decoration:none;
    font-size:11px;font-weight:600;line-height:1.1;letter-spacing:.1px;
    -webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;
    transition:color .15s var(--ease),transform .12s var(--ease)}
  @media (min-width:361px){.tab{font-size:12px}}
  .tab > i{font-size:23px;line-height:1;transition:color .15s var(--ease)}
  .tab > span:last-child{display:block;max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
  .tab:active{transform:scale(.92)}
  .tab.on{color:#f5f9ff}
  .tab.on > i{color:#67e8f9}
  .tab.on::before{content:"";position:absolute;top:-1px;left:50%;width:28px;margin-left:-14px;height:3px;
    border-radius:0 0 3px 3px;background:linear-gradient(90deg,#22d3ee,#10b981)}
  .tab-cta-ico{display:flex;align-items:center;justify-content:center;width:46px;height:30px;border-radius:11px;
    background:linear-gradient(180deg,#10b981,#059669);color:#06080f;
    box-shadow:0 0 0 1px rgba(16,185,129,.35),0 8px 18px -8px rgba(16,185,129,.7)}
  .tab-cta-ico i{font-size:19px;color:#06080f}
  .tab-cta{color:#a7f3d0}
  .tab-cta.on{color:#f5f9ff}
  .tab-cta.on::before{display:none}
  .tab-avatar{display:flex;align-items:center;justify-content:center;width:25px;height:25px;border-radius:50%;
    font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:800;color:#06080f;
    background:linear-gradient(135deg,#22d3ee,#10b981);box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}
  .tab.on .tab-avatar{box-shadow:0 0 0 2px rgba(103,232,249,.55)}
  /* Typing: the bar steps aside so it never floats above the keyboard */
  body.bv-kb .tabbar{transform:translateY(110%)}

  /* Panel support toast clears the tab bar */
  body .sup-flash{bottom:calc(76px + env(safe-area-inset-bottom,0px))}
  /* Panel tab strip: under the 60 px top bar (+ status bar in standalone) */
  .panel-side{top:calc(60px + env(safe-area-inset-top,0px))}

  /* ── Shared sheet chrome ── */
  .sheet-grab{width:40px;height:5px;border-radius:3px;background:rgba(148,163,184,.38);margin:0 auto}
  .mob-panel .sheet-grab{display:block}

  /* ── Menu → bottom sheet ── */
  .mob-overlay{display:block;opacity:0;visibility:hidden;z-index:998;
    transition:opacity .3s var(--ease),visibility 0s linear .3s}
  body.bv-mob-open .mob-overlay{opacity:1;visibility:visible;transition:opacity .3s var(--ease)}
  .mob-panel{top:auto;left:0;right:0;bottom:0;width:auto;max-width:none;height:auto;
    max-height:calc(100vh - 32px - env(safe-area-inset-top,0px));
    max-height:calc(100dvh - 32px - env(safe-area-inset-top,0px));
    border-left:0;border-top:1px solid var(--border);border-radius:22px 22px 0 0;
    background:linear-gradient(180deg,#121a2b,#0b0f19 220px);
    padding-bottom:env(safe-area-inset-bottom,0px);overscroll-behavior:contain;
    transform:translateY(104%);visibility:hidden;
    transition:transform .36s cubic-bezier(.32,.72,0,1),visibility 0s linear .36s;
    box-shadow:0 -24px 60px -12px rgba(0,0,0,.75)}
  body.bv-mob-open .mob-panel{right:0;transform:none;visibility:visible;
    transition:transform .36s cubic-bezier(.32,.72,0,1)}
  .mob-panel-head{position:relative;padding:24px 12px 10px 20px;border-bottom:0}
  .mob-panel-head .sheet-grab{position:absolute;top:9px;left:50%;margin:0 0 0 -20px}
  .mob-panel-head .brand{min-height:44px}
  .mob-panel .lang-sw[data-variant="mobile"]{margin:2px 16px 12px;width:calc(100% - 32px)}
  .mob-panel .lang-sw[data-variant="mobile"] .lang-sw-trigger{height:48px;border-radius:14px;font-size:14px}
  .mob-panel .lang-sw-opt{min-height:48px;font-size:14.5px}
  .mob-nav{flex:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:2px 16px 16px}
  .mob-nav a{flex-direction:column;align-items:flex-start;justify-content:space-between;gap:12px;min-height:88px;
    padding:13px 14px;border:1px solid var(--border);border-left:1px solid var(--border);border-radius:16px;
    background:rgba(26,35,54,.7);color:var(--text);font-size:14px;font-weight:600;line-height:1.25;
    transition:transform .12s var(--ease),background .15s var(--ease),border-color .15s var(--ease)}
  .mob-nav a i{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:11px;
    font-size:19px;color:#67e8f9;background:rgba(34,211,238,.08);border:1px solid rgba(34,211,238,.22)}
  .mob-nav a:hover{background:rgba(26,35,54,.7);border-left-color:var(--border)}
  .mob-nav a:hover i{color:#67e8f9}
  .mob-nav a:active{transform:scale(.97);background:var(--bg-card-hover)}
  .mob-nav a.on{border-color:rgba(34,211,238,.45);background:linear-gradient(135deg,rgba(34,211,238,.12),rgba(16,185,129,.07))}
  .mob-nav a.mob-nav-wide{grid-column:1/-1;min-height:60px;flex-direction:row;align-items:center;justify-content:flex-start}
  .mob-actions{padding:14px 16px 18px;border-top:1px solid var(--border)}
  .mob-actions .btn{min-height:50px;border-radius:14px;font-size:15px}

  /* ── Language picker in the top bar → bottom sheet ── */
  .hdr .lang-sw.open::after{content:"";position:fixed;inset:0;z-index:1;background:rgba(4,7,15,.62);
    animation:bvFade .25s var(--ease) both}
  .hdr .lang-sw-menu{position:fixed;top:auto;left:0;right:0;bottom:0;z-index:2;width:auto;
    max-height:min(80vh,640px);max-height:min(80dvh,640px);overflow-y:auto;overscroll-behavior:contain;
    padding:10px 12px calc(14px + env(safe-area-inset-bottom,0px));
    border-radius:22px 22px 0 0;border-bottom:0;background:linear-gradient(180deg,#131a2b,#0b0f19 260px);
    animation:bvSheetUp .34s cubic-bezier(.32,.72,0,1) backwards}
  [dir="rtl"] .hdr .lang-sw-menu{left:0;right:0}
  .hdr .lang-sw-menu::before{border-radius:23px 23px 0 0}
  .hdr .lang-sw-head{display:flex;flex-direction:column;align-items:center;gap:12px;
    padding:0 14px 12px;margin-bottom:6px;font-size:11.5px;text-align:center}
  .hdr .lang-sw-head::before{content:"";width:40px;height:5px;border-radius:3px;background:rgba(148,163,184,.38)}
  .hdr .lang-sw-opt{min-height:52px;padding:12px 14px;font-size:15px;border-radius:12px}
  .lang-sw-iso{font-size:11px}

  /* ── Touch targets ≥ 44 px ── */
  .btn{min-height:44px}
  .btn-sm{min-height:40px}
  .ftr-brand .brand{min-height:44px}
  .ftr-sec-links a{min-height:44px}
  .ftr-bottom a{display:inline-block;padding:13px 2px;margin:-13px -2px}
  /* The exchange line reads as one sentence instead of three stacked rows */
  .ftr-bottom[style]{display:block;text-align:center;font-size:12px!important;line-height:1.6}
  .crumb a{display:inline-flex;align-items:center;min-height:44px;margin:-12px -4px;padding:0 4px}
  .prose li > a,.cmp-cites li > a{display:inline-block;padding:7px 0}
  .cmp-cta{display:inline-flex;align-items:center;min-height:44px}
  .signed-head-right a{min-height:44px}
  .plan-switcher-tabs button{min-height:44px}
  .dply-signin-link{padding:12px 6px;margin:-12px -6px}
  .dply-authed-btn{min-height:44px}
  /* Root password tools (generate · show · copy) inside the field */
  .pwd-tools{gap:0;right:2px}
  .pwd-tool{width:44px;height:44px}
  .pwd-wrap input{padding-right:136px;min-height:48px}
  .sum-signup-btn,.sum-signup-btn.ghost{min-height:44px}
  body .reset-foot a{display:inline-block;padding:14px 6px}
  .auth-forgot{padding:10px 0;margin:-8px 0}
  .auth-totp-back{min-height:44px}
  .auth-tab{min-height:44px}
  .auth-pwd-toggle{width:44px;height:44px;right:2px}

  /* ── Text floor: 11 px for uppercase micro-labels, 12 px for meta ── */
  .s-eyebrow,.eyebrow,.cp-cat,.cpf-k,.metric-lbl,.loc-tier,.loc-sla,.loc-city code,.loc-table dt,
  .hw-cap,.hw-table dt,.alt-card-vs,.alt-card-tag,.sol-plan-tag,.net-stat-lbl,.ddos-cap,.ddos-meta dt,
  .l-stat-lbl,.net-kpi dt,.fac-lbl,.prod-cta-cat,.loc-card-tier,.loc-card-sla,.loc-card-title code,
  .cmp-table tbody th,.hero-coins-lbl,.carrier-list code,.net-list code,.legal-toc-title,
  .auth-field label,.auth-field label .auth-opt,.auth-foot,.auth-hint,.auth-strength,
  .period-flag,.sum-head .sum-tag,.arch-table thead th,.cmp-table thead th{font-size:11px}
  .cmp-tbl-wrap table.cmp-tbl thead th{font-size:11px}
  body .gh-card-eyebrow,body .guide-toc-label{font-size:11px}
  body .mf-num,body .tl-year,body .jur-flag span,body .team-stat .l,body .banner-right .lbl,
  body .sched-body h4 span,body .sched-meta,body .comp-name span,body .comp-up .sub,body .comp-stat,
  body .spark-legend,body .spark-legend-keys span,body .rollup-lbl,body .canary-status-right span,
  body .carrier-list code,body .net-list code{font-size:11px}
  .crumb,.crumb a,.crumb span{font-size:12.5px}
  .ftr-bottom,.ftr-bottom a,.ftr-copy,.ftr-trust li{font-size:12px}
  .vhero-meta span,.vhero-meta strong,.vhero-trust span,.cmp-eyebrow,.plan-sku,.dsl,.legal-foot span,
  .legal-foot strong,.loc-live,.loc-card-live,.loc-city,.sol-plan-sku,.sol-plan-price em,.sol-loc-tag,
  .cp-price > span,.tl-c,.tl-v,.tl-y,.tl-g,.lg-term > span,.ddos-meta dd,.pol p code,.faq-body code,
  .flag-wrap strong,.legal-table thead th,.sum-signup-btn.ghost{font-size:12px}
  body .guide-meta,body .gh-card-time,body .gh-card-cta{font-size:12px}
  .cpf-k{letter-spacing:.5px}
  /* Slate-500 micro-labels on card backgrounds fall to ~3.3:1; on a phone
     (outdoors, small type) they get the regular tertiary tone (≈ 6:1). */
  .hw-cap,.hw-table dt,.legal-toc-title,.legal-toc ol li a::before,.l-stat-lbl,.net-kpi dt,.fac-lbl,
  .peer-name span,.loc-card-sla,.loc-table dt,.loc-sla,.ddos-cap,.ddos-meta dt,.lg-term .tl-c,.net-stat-lbl,
  .comp-up .sub,.rollup-month,.rollup-lbl,.sub-chip small,.banner-right .lbl,.comp-name span,.live-lbl,
  .office-extra dt{color:var(--text-3)}

  /* ── Footer: the tab bar already reserves the home-indicator inset ── */
  .ftr{padding-bottom:32px}

  /* ── Long documents (legal, guides): the table of contents becomes a
        sticky row of swipeable chips under the top bar, like a native
        section switcher; ui.js keeps the active chip in view. ── */
  .legal-toc,body .guide-toc-side{position:sticky;top:calc(60px + env(safe-area-inset-top,0px));z-index:20;
    margin:0 -20px 18px;padding:8px 0;max-height:none;border:0;border-radius:0;
    border-bottom:1px solid var(--border);background:rgba(11,15,25,.97);box-shadow:0 10px 24px -18px rgba(0,0,0,.8)}
  .legal-toc-title,body .guide-toc-side .guide-toc-label{display:none}
  .legal-toc ol,body .guide-toc-side ol{display:flex;flex-direction:row;flex-wrap:nowrap;gap:8px;
    overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:none;
    padding:0 20px;margin:0}
  .legal-toc ol::-webkit-scrollbar,body .guide-toc-side ol::-webkit-scrollbar{display:none}
  .legal-toc ol li,body .guide-toc-side li{flex:0 0 auto;max-width:82vw;padding:0;scroll-snap-align:start}
  body .guide-toc-side li::before{content:none}
  .legal-toc ol li a,body .guide-toc-side a{display:flex;align-items:center;gap:8px;min-height:44px;padding:8px 14px;
    border:1px solid var(--border);border-radius:100px;background:rgba(255,255,255,.03);
    font-size:13px;font-weight:600;line-height:1.2;color:var(--text-2);white-space:nowrap;
    overflow:hidden;text-overflow:ellipsis;transform:none}
  body .guide-toc-side a::before{content:counter(toc,decimal-leading-zero);font-family:'JetBrains Mono',monospace;
    font-size:11px;font-weight:700;color:var(--text-3)}
  .legal-toc ol li a::before{margin-top:0;font-size:11px}
  .legal-toc ol li a.active,body .guide-toc-side a.active{color:#f5f9ff;border-color:rgba(34,211,238,.45);
    background:linear-gradient(135deg,rgba(34,211,238,.14),rgba(16,185,129,.08))}
  .legal-toc ol li a.active::before,body .guide-toc-side a.active::before{color:#67e8f9}
  html.bv-doc{scroll-padding-top:136px}

  /* ── 404 ── */
  .e404-wrap{padding:56px 20px 48px}
  .e404-wrap p{color:var(--text-2);font-size:15.5px}

  /* Inline code (commands, hashes) wraps instead of widening its card */
  :not(pre) > code{overflow-wrap:anywhere}
  .verify{grid-template-columns:38px minmax(0,1fr)}
}
@media (max-width:720px){
  .spark-legend-keys{flex-wrap:wrap;row-gap:4px}
  .comp-row{grid-template-columns:minmax(0,1fr)}
  .comp-right{min-width:0}
  .comp-up{white-space:normal;min-width:0}
  .comp-up .sub{overflow-wrap:anywhere}
}
@media (max-width:480px){
  .legal-toc,body .guide-toc-side{margin-left:-14px;margin-right:-14px}
  .legal-toc ol,body .guide-toc-side ol{padding:0 14px}
}
/* Cross-page navigation cross-fades like an app screen change. The top bar
   and tab bar are identical on both pages, so they read as fixed chrome. */
@media (max-width:768px) and (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
  ::view-transition-old(root),::view-transition-new(root){animation-duration:.2s}
}
@media (max-width:768px) and (max-height:500px){
  /* Short landscape phones: slimmer bar, icons only */
  .tabbar{height:calc(50px + env(safe-area-inset-bottom,0px))}
  body{padding-bottom:calc(50px + env(safe-area-inset-bottom,0px))}
  .tab > span:last-child{display:none}
  .tab-cta > span:last-child{display:none}
}
@media (max-width:520px){
  .auth-modal{padding:max(10px,env(safe-area-inset-top,0px)) 0 0}
  .auth-card{margin:auto 0 0;border-bottom:0;border-radius:22px 22px 0 0;
    padding-bottom:env(safe-area-inset-bottom,0px);
    animation:authRiseMob .38s cubic-bezier(.32,.72,0,1) backwards}
  .auth-card::before{border-radius:23px 23px 0 0}
  .auth-modal .sheet-grab{display:block;position:absolute;top:8px;left:50%;margin-left:-20px;z-index:2}
  .auth-head{padding-top:30px}
  .auth-modal.closing .auth-card{animation:bvSheetDown .22s cubic-bezier(.4,0,1,1) forwards}
  .auth-modal.closing .auth-backdrop{animation:bvFadeOut .22s var(--ease) forwards}
}
@media (max-width:520px) and (max-height:760px){
  .auth-brand{display:none}
}

@keyframes bvSheetUp{from{transform:translateY(100%)}to{transform:none}}
@keyframes bvSheetDown{from{transform:none}to{transform:translateY(100%)}}
@keyframes bvFade{from{opacity:0}to{opacity:1}}
@keyframes bvFadeOut{from{opacity:1}to{opacity:0}}

/* ═══════════════ 3. RESPONSIVE FIXES ═══════════════ */

/* Wide tables scroll inside their own box (ui.js wraps them in .tbl-scroll)
   with a soft fade on the edge that still hides columns. */
.tbl-scroll{position:relative;max-width:100%;overflow-x:auto;overflow-y:hidden;
  -webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;scrollbar-width:none}
.tbl-scroll::-webkit-scrollbar{display:none}
.tbl-scroll > table{display:table!important;overflow:visible!important;max-width:none!important;white-space:normal}
.tbl-scroll.is-scrollable:not(.at-end){-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent);
  mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent)}
.tbl-scroll.is-scrollable.at-end:not(.at-start){-webkit-mask-image:linear-gradient(270deg,#000 calc(100% - 40px),transparent);
  mask-image:linear-gradient(270deg,#000 calc(100% - 40px),transparent)}
.tbl-scroll.is-scrollable:not(.at-end):not(.at-start){-webkit-mask-image:linear-gradient(90deg,transparent,#000 40px,#000 calc(100% - 40px),transparent);
  mask-image:linear-gradient(90deg,transparent,#000 40px,#000 calc(100% - 40px),transparent)}
[dir="rtl"] .tbl-scroll.is-scrollable:not(.at-end){-webkit-mask-image:linear-gradient(270deg,#000 calc(100% - 40px),transparent);
  mask-image:linear-gradient(270deg,#000 calc(100% - 40px),transparent)}
[dir="rtl"] .tbl-scroll.is-scrollable.at-end:not(.at-start){-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent);
  mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent)}
/* Locations matrix: the min-width belongs to the table, not to its scroll box */
.tbl-scroll > .cmp-table{min-width:640px}
.cmp-table{min-width:0}
.tbl-scroll > .cmp-table tbody th{position:sticky;left:0;z-index:1;background:#0d1322}
[dir="rtl"] .tbl-scroll > .cmp-table tbody th{left:auto;right:0}
.arch-wrap{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
pre{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}

/* Card grids never ask for more than the column they are in */
.alt-card-grid{grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr))}
.sol-others{grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr))}
.sol-feats,.sol-plans{grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr))}
.cmp-hub-grid{grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr))}
body .gh-grid{grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr))}
body .cmp-feat-grid{grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr))}
body .alt-rel-grid{grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr))}
.sol-others[style*="minmax(220px"]{grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr))!important}
.sol-others[style*="minmax(260px"]{grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr))!important}
.sol-others[style*="minmax(280px"]{grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr))!important}
.metrics-inner[style*="minmax(180px"]{grid-template-columns:repeat(auto-fit,minmax(min(180px,100%),1fr))!important}
/* Grid/flex children shrink below their widest word or table */
body .guide-layout > *,.cp-feats > *,.vhero-wrap > *,.hero-wrap > *,.metrics-inner > *{min-width:0}

/* Home product cards: specs wrap rather than run under the card edge */
@media (max-width:520px){
  .cp-feats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cpf{align-items:flex-start}
  .cpf-v{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere}
}
@media (max-width:340px){
  .cp-feats{grid-template-columns:minmax(0,1fr)}
}

@media (max-width:768px){
  .metric-lbl,.net-stat-lbl,.l-stat-lbl,.fac-lbl,.team-stat .l{overflow-wrap:anywhere;hyphens:auto}
  /* About page (long German / Russian labels at 320 px) */
  .jur-wrap{grid-template-columns:minmax(0,1fr)}
  .team-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .jur-flag{max-width:100%;flex-wrap:wrap}
  .period-flag{width:max-content;max-width:calc(100% - 10px);white-space:normal;text-align:center;line-height:1.2}
}
@media (max-width:480px){
  /* Long CTA labels (DE / RU / TR) wrap inside the button */
  .btn{max-width:100%;white-space:normal;text-align:center}
  html[lang="de"] h1,html[lang="de"] h2,html[lang="de"] h3{hyphens:auto;-webkit-hyphens:auto}
}