/* General container rhythm on small screens */
@media (max-width: 768px){
  body { font-size: 16px; line-height: 1.45; }
}

/* Remove the built-in padding on the template that holds #hero */
.webix_template:has(#hero){
  padding: 0 !important;
}


#hero {
  background: url("/i/male_pianist_big.png");
  height: 100vh;
  background-repeat: no-repeat;
  background-size: cover !important;   
  background-position: center top;
}

@media (max-width: 768px) {
  #hero {
    background-image: url("/i/male_pianist_small.png");
    background-size: contain !important;   
    height: 65vh;
  }
}

@media (max-width: 380px){
  #hero{ height: 78svh; }
}

/* Allow content sections to expand fully after async load */
div[view_id="howCarouselTpl"],
div[view_id="guideTpl"],
div[view_id="techTpl"],
div[view_id="preTpl"]{
  height:auto !important;
}
div[view_id="howCarouselTpl"] .webix_template,
div[view_id="guideTpl"] .webix_template,
div[view_id="techTpl"] .webix_template,
div[view_id="preTpl"] .webix_template{
  overflow:visible !important;
}

/* Prevent vertical clipping in richselect list items */
.webix_list_item{
  height:auto !important;
}

/* Keep both top bars fixed above content */
.fixedToolbar { position: fixed; top: 0; left: 0; right: 0; z-index: 10; background: #fff; }
.fixedTabs    { position: fixed; top: 56px; left: 0; right: 0;  z-index: 10;background: #fff; }

/* Offset page content so it doesn't hide under the fixed bars (56 + ~40) */
body { padding-top: 96px; }

/* keep account menu above fixed toolbars/tabs */
.accountMenuPopup{
  position: fixed !important;
  top: 64px !important;      /* 56px top bar + 8px gap */
  right: 12px !important;    /* align with toolbar padding */
  left: auto !important;
  z-index: 5000 !important;  /* above fixed toolbars/tabs */
}

/* Borderless richselect (keep it in the fixed toolbar flow) */
.langSelectFixed .webix_inp_static,
.langSelectFixed .webix_el_box{
  border: 0 !important;
}

.langSelectFixed{
  z-index: 5000 !important;  /* above fixed toolbars/tabs */
}

.marketingBox{ margin:30px auto;  }
.marketingInner{ display:grid; gap:24px; align-items:center;  }

/* desktop/laptop: centred card with fixed max width */
@media (min-width:600px){
  .marketingBox{ max-width:800px; }
  .marketingInner{ grid-template-columns: 2fr 1fr; }
  .marketingImg img{ max-width:300px; }
}


/* phone: stacked, image on top */
@media (max-width:599px){
  .marketingInner{ grid-template-columns: 1fr;}
  .marketingText{ order: 2; }
  .marketingImg{ order: 1; justify-content:center; }
  .marketingImg img{ max-width:220px; }
}

/* image sizing */
.marketingImg{ display:flex; justify-content:right; }
.marketingImg img{ width:100%; max-width:280px; height:auto; }

/* phone: image on top and full width feel */
@media (max-width:599px){
  .marketingImg{ justify-content:center; }
  .marketingImg img{ max-width:220px; }
}


/* Why: clean card look + readable caption; Outcome: consistent slide visuals */
#howCarouselMount{ max-width:800px; margin:0 auto; }
.howCarouselCard .webix_cell {
}
.howCarouselCard .webix_view{
   border: 0 !important;
}
.howCarouselCard .webix_template{
   margin:0 auto;  
   border: 0 !important;
   box-shadow: none !important;}
.howSlide{ display:grid; gap:16px; align-items:center; grid-template-columns: 1fr 1fr; }
.howSlide img{ width:100%; height:100%;min-height:0;object-fit:contain;}
.howCaption{ font-size:16px; line-height:1.5; }
.howImage {object-fit:contain;align-items:center; }

/* phone: stack image above text */
@media (max-width:599px){
  .howSlide{ grid-template-columns: 1fr; }
}

/* Preview strip (thumbnails) */
.howThumb{
  width:60px; height:70px;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.howThumb img{ width:100%; height:100%; object-fit:contain; display:block; }
.howThumbSel{ outline:2px solid var(--tt-accent);object-fit:contain; }

.webix_nav_button_side.webix_nav_button_next, 
.webix_nav_button_side.webix_nav_button_prev {
  width: 60px !important;   /* Standard ist ~100px */
  height: 60px !important;
  line-height: 60px !important;
}

/* Phone-style frame for screenshots (responsive, no overflow) */
.phoneFrame{
  display:inline-block;
  position:relative;
  padding:14px;
  border-radius:28px;
  background:linear-gradient(#2a2a2a,#1d1d1d);
  box-shadow:0 8px 24px rgba(0,0,0,.18);
  box-sizing:border-box;
  max-width:100%;
}
.phoneFrame::before{
  content:"";
  position:absolute; left:50%; top:6px;
  width:64px; height:6px; transform:translateX(-50%);
  border-radius:6px; background:#0e0e0e;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
}
.phoneFrame::after{
  content:"";
  position:absolute; right:-4px; top:72px;
  width:4px; height:56px; border-radius:2px; background:#262626;
  box-shadow: 0 78px 0 0 #262626, 0 120px 0 0 #262626;
}
.phoneFrame .phoneScreen{
  background:#fff; overflow:hidden; border-radius:22px;
  border:1px solid rgba(0,0,0,.06);
}
.phoneFrame .phoneScreen > img{
  display:block; width:100%; height:auto; max-width:100%;
}

/* Guide mobile fixes */
@media (max-width: 480px){
  #guide{ max-width:100% !important; width:100% !important; margin:16px auto; padding-left:12px; padding-right:12px; box-sizing:border-box; }
  .phoneFrame{ width:100% !important; max-width:100% !important; }
  .phoneFrame::after{ display:none; }
}


/* Ensure images in guide never overflow */
#guide img{ max-width:100%; height:auto; }


/* Preorder mobile  */
@media (max-width: 480px){
  #pre, #pre input, #pre textarea, #pre button{
    box-sizing: border-box;
  }
  #pre input, #pre textarea, #pre button{
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin-left: 0;
    margin-right: 0;
  }
}

.webix_template.siteFooter,
.webix_view.siteFooter,
.siteFooter{
  background: var(--tt-surface-weak);
  color:  var(--tt-accent);
  text-align: center;
  padding: 16px;
  margin-top: 40px;
}
.siteFooter a{
  color: var(--tt-accent);
  margin: 0 8px;
  text-decoration: none;
}

/* Let the static page grow to its content and avoid clipping */
div[view_id="staticTpl"]{ height:auto !important; }
div[view_id="staticTpl"] .webix_template{ overflow:visible !important; }