/*
 speech.expert 1.8.1.20 — public mobile application shell.
 Public desktop is untouched. Mobile keeps semantic/SEO HTML intact and adds app-like navigation.
 PUBLIC_MOBILE_APP_LAYER=1
*/
.sx-mobile-public-nav{display:none}
@media(max-width:820px){
  *,*::before,*::after{box-sizing:border-box}
  :root{
    --sxma-bg:#f6f9fd;--sxma-surface:#fff;--sxma-ink:#071329;--sxma-text:#3a4a65;
    --sxma-muted:#748398;--sxma-line:#e1e9f4;--sxma-blue:#126bfa;--sxma-blue-soft:#edf4ff;
  }
  html{scroll-padding-top:72px;background:var(--sxma-bg);overscroll-behavior-y:none;overflow-x:clip}
  body{
    min-width:320px!important;background:var(--sxma-bg)!important;overflow-x:clip!important;
    padding-bottom:calc(86px + env(safe-area-inset-bottom,0px))!important;
    -webkit-tap-highlight-color:transparent;
  }
  body.sx-mobile-public-ready{min-height:100dvh}
  body.sx-mobile-public-ready :is(button,a,input,select,textarea){touch-action:manipulation}

  /* Keep the existing public header, but make it behave like an app bar. */
  .site-header,header.site-header{
    position:sticky!important;top:0!important;z-index:55!important;
    background:rgba(255,255,255,.94)!important;border-bottom:1px solid rgba(218,227,239,.92)!important;
    box-shadow:0 1px 0 rgba(15,23,42,.02)!important;
    backdrop-filter:saturate(160%) blur(18px);-webkit-backdrop-filter:saturate(160%) blur(18px);
  }
  .site-header .desktop-nav,.desktop-nav{display:none!important}
  .site-header :is(.container,.shell,.sx-shell){min-height:62px!important;padding-left:14px!important;padding-right:14px!important}

  /* Mobile content rhythm: more like screens, less like shrunken desktop. */
  :is(.container,.shell,.sx-shell){width:100%!important;max-width:none!important;padding-left:16px!important;padding-right:16px!important}
  :is(.section,.sx-section){padding-top:52px!important;padding-bottom:52px!important}
  :is(.section-heading,.sx-section-head){margin-bottom:22px!important}
  :is(.section-heading h2,.sx-section-head h2){font-size:28px!important;line-height:1.12!important;letter-spacing:-.04em!important;text-wrap:balance}
  :is(.section-heading p,.sx-section-head p){font-size:15px!important;line-height:1.58!important}
  :is(.hero h1,.sx-hero h1,h1){text-wrap:balance}
  :is(.hero,.sx-hero){padding-top:34px!important;padding-bottom:42px!important}
  :is(.hero h1,.sx-hero h1){font-size:clamp(34px,10vw,46px)!important;line-height:1.02!important;letter-spacing:-.055em!important}
  :is(.hero p,.sx-hero p){font-size:16px!important;line-height:1.58!important}

  /* Cards and CTAs get touch-first geometry without forcing every section into a box. */
  :is(.button,.sx-btn,a.button,button.button){min-height:50px!important;border-radius:14px!important;font-size:14px!important}
  :is(.problem-card,.sx-card,.case-card,.tariff-card,.public-tariff-card,.public-tariff-wide){border-radius:20px!important}
  :is(.problem-card,.sx-card,.case-card){padding:20px!important}
  img,video{max-width:100%;height:auto}
  input,select,textarea{font-size:16px!important}

  /* Article pages should read like a native reading view. */
  body.public-article-v1800 :is(.sx-content-article-shell,.sx-content-article){max-width:none!important;width:100%!important}
  body.public-article-v1800 .sx-content-article-shell{padding-left:16px!important;padding-right:16px!important}
  body.public-article-v1800 .sx-content-article{border-radius:20px!important;padding:22px 18px!important}
  body.public-article-v1800 h1{font-size:32px!important;line-height:1.12!important;letter-spacing:-.04em!important}
  body.public-article-v1800 :is(p,li){font-size:16px!important;line-height:1.7!important}

  /* App bottom bar. */
  .sx-mobile-public-nav{
    display:grid;position:fixed;left:8px;right:8px;bottom:calc(8px + env(safe-area-inset-bottom,0px));
    height:66px;grid-template-columns:repeat(5,minmax(0,1fr));align-items:center;padding:5px 6px;
    border:1px solid rgba(214,224,237,.96);border-radius:22px;background:rgba(255,255,255,.96);
    box-shadow:0 12px 34px rgba(15,23,42,.15);z-index:70;
    backdrop-filter:saturate(165%) blur(18px);-webkit-backdrop-filter:saturate(165%) blur(18px);
  }
  .sx-mobile-public-nav a{
    position:relative;height:54px;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    border-radius:15px;color:#7b8798!important;text-decoration:none!important;font-size:9px!important;font-weight:650!important;
  }
  .sx-mobile-public-nav a svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .sx-mobile-public-nav a span{font-size:9px!important;line-height:1!important;white-space:nowrap}
  .sx-mobile-public-nav a.is-active{color:var(--sxma-blue)!important;background:var(--sxma-blue-soft)!important}
  .sx-mobile-public-nav a:active{transform:scale(.96)}
  .sx-mobile-public-nav .sx-mobile-public-primary{
    width:52px;height:52px;min-width:52px;justify-self:center;align-self:center;margin-top:-18px;
    border:4px solid var(--sxma-bg);border-radius:18px;background:var(--sxma-blue)!important;color:#fff!important;
    box-shadow:0 10px 24px rgba(18,107,250,.30);
  }
  .sx-mobile-public-nav .sx-mobile-public-primary span{font-size:8px!important}

  /* Remove hover-only assumptions on touch screens. */
  @media(hover:none){
    :is(.problem-card,.sx-card,.case-card,.button,.sx-btn){transform:none!important}
  }
  :focus-visible{outline:3px solid rgba(18,107,250,.28)!important;outline-offset:2px!important}
}
@media(max-width:380px){
  :is(.container,.shell,.sx-shell){padding-left:13px!important;padding-right:13px!important}
  .sx-mobile-public-nav{left:6px;right:6px}
  .sx-mobile-public-nav a span{font-size:8px!important}
}