/* AKIŞ Task V14.40.2 — CSP-safe demo widths + fluid promotional phone artwork. */
body:not(.auth-view) .demo-progress-35{width:35%}
body:not(.auth-view) .demo-progress-40{width:40%}
body:not(.auth-view) .demo-progress-68{width:68%}
body:not(.auth-view) .demo-progress-100{width:100%}

/* 520 px is only the illustration's internal design coordinate system.
   The visible element uses its parent's available width, never a fixed 520px.
   JS recalculates --hero-art-scale on resize; CSS supplies a safe fallback. */
body:not(.auth-view) .hero-visual,
body:not(.auth-view) .hero-visual.reveal,
body:not(.auth-view) .hero-visual.reveal.visible{
  --hero-art-scale:1;
  position:relative;
  width:100%!important;
  max-width:520px!important;
  height:calc(560px * var(--hero-art-scale))!important;
  min-width:0;
  left:auto!important;
  margin:0 auto!important;
  transform:none!important;
  overflow:visible;
}
body:not(.auth-view) .hero-visual .hero-artboard{
  position:absolute;
  top:0;
  left:50%;
  width:520px;
  height:560px;
  transform-origin:top center;
  transform:translateX(-50%) scale(var(--hero-art-scale));
}
body:not(.auth-view) :is(.hero,.showcase-section,.sharing-section,.final-cta){
  overflow:clip;
}
body:not(.auth-view) .nav-wrap{
  min-width:0;
}
body:not(.auth-view) .site-header :is(.brand,.nav-actions,.menu-toggle){
  flex-shrink:0;
}
body:not(.auth-view) .site-header .brand-mark img,
body:not(.auth-view) .small-brand img{
  display:block;
  max-width:100%;
  height:auto;
}
body:not(.auth-view) .hero-trust{
  flex-wrap:wrap;
  row-gap:6px;
}
body:not(.auth-view) .hero-trust .dot-sep{
  display:inline-block;
}
body:not(.auth-view) .showcase-glow{
  width:min(430px,92vw)!important;
  height:min(450px,96vw)!important;
}
body:not(.auth-view) .showcase-glow.green-glow{
  width:min(430px,92vw)!important;
}
body:not(.auth-view) .cta-ring{
  pointer-events:none;
}
body:not(.auth-view) .scroll-top{
  position:fixed;
  right:max(18px,env(safe-area-inset-right));
  bottom:max(22px,env(safe-area-inset-bottom));
  z-index:80;
  display:grid;
  place-items:center;
  width:48px;
  height:48px;
  border:1px solid rgba(194,222,244,.78);
  border-radius:18px;
  background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(235,247,255,.92));
  color:#0f7cf5;
  box-shadow:0 18px 42px rgba(16,88,157,.22);
  backdrop-filter:blur(16px);
  opacity:0;
  transform:translateY(14px) scale(.96);
  transition:opacity .18s ease,transform .18s ease,box-shadow .18s ease;
}
body:not(.auth-view) .scroll-top[hidden]{
  display:none;
}
body:not(.auth-view) .scroll-top.is-visible{
  opacity:1;
  transform:translateY(0) scale(1);
}
body:not(.auth-view) .scroll-top:hover{
  box-shadow:0 22px 48px rgba(16,88,157,.3);
  transform:translateY(-2px) scale(1);
}
body:not(.auth-view) .scroll-top svg{
  width:22px;
  height:22px;
  stroke:currentColor;
  stroke-width:2.5;
  fill:none;
  transform:rotate(-90deg);
}
body:not(.auth-view) .scroll-top:focus-visible{
  outline:3px solid #f4a925;
  outline-offset:3px;
}
@media(max-width:920px){
  body:not(.auth-view) .hero-visual{--hero-art-scale:.90}
  body:not(.auth-view) .site-header .nav-wrap{
    gap:10px;
  }
  body:not(.auth-view) .site-header .nav-actions{
    margin-left:auto;
  }
}
@media(max-width:600px){
  body:not(.auth-view) .site-header .nav-wrap{
    min-height:66px!important;
  }
  body:not(.auth-view) .site-header .brand{
    font-size:20px!important;
    letter-spacing:-.04em!important;
  }
  body:not(.auth-view) .site-header .brand-mark{
    width:34px!important;
    height:34px!important;
    border-radius:10px!important;
  }
  body:not(.auth-view) .site-header .brand-mark img{
    width:28px;
    height:28px;
  }
  body:not(.auth-view) .site-header .nav-login{
    display:none;
  }
  body:not(.auth-view) .site-header .nav-actions .btn-primary{
    min-height:38px!important;
    padding:9px 10px!important;
    max-width:128px;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  body:not(.auth-view) .menu-toggle{
    width:38px!important;
    height:38px!important;
  }
  body:not(.auth-view) .hero h1{
    overflow-wrap:anywhere;
  }
  body:not(.auth-view) .hero-trust{
    justify-content:center;
    gap:6px 10px;
    max-width:310px;
    margin-inline:auto;
  }
  body:not(.auth-view) .hero-trust .dot-sep{
    display:none;
  }
  body:not(.auth-view) .hero-visual{
    --hero-art-scale:.67;
    height:calc(520px * var(--hero-art-scale))!important;
    margin-top:18px!important;
  }
  body:not(.auth-view) .floating-badge{
    white-space:normal;
    max-width:170px;
  }
  body:not(.auth-view) .floating-badge strong{
    line-height:1.15;
  }
  body:not(.auth-view) .showcase-device{
    min-height:455px!important;
  }
  body:not(.auth-view) .showcase-glow{
    opacity:.52;
  }
  body:not(.auth-view) .cta-ring{
    width:320px;
    height:320px;
    right:-140px;
    top:-120px;
  }
  body:not(.auth-view) .scroll-top{
    right:max(14px,env(safe-area-inset-right));
    bottom:max(16px,env(safe-area-inset-bottom));
    width:44px;
    height:44px;
    border-radius:16px;
  }
}
@media(max-width:370px){
  body:not(.auth-view) .site-header .nav-actions .btn-primary{
    max-width:112px;
    font-size:10px!important;
  }
  body:not(.auth-view) .hero-visual{--hero-art-scale:.58}
  body:not(.auth-view) .hero-trust{
    max-width:280px;
    font-size:9px!important;
  }
}
@media(max-width:330px){
  body:not(.auth-view) .site-header .nav-actions .btn-primary{
    display:none;
  }
  body:not(.auth-view) .hero-visual{--hero-art-scale:.52}
}
@media(prefers-reduced-motion:reduce){
  body:not(.auth-view) .hero-artboard{transition:none!important}
  body:not(.auth-view) .scroll-top{transition:none!important}
}