/* =========================================================
   MITIN DEV — SALES LAYER + MOBILE RELIABILITY
   Keeps the immersive demo sites, but makes the commercial
   purpose explicit and fixes critical mobile hero rendering.
========================================================= */

/* Main hub: clear commercial positioning without changing the visual language. */
.hub-sales-actions{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:28px
}
.hub-sales-primary,.hub-sales-secondary{
  min-height:48px;border-radius:999px;padding:0 18px;display:inline-flex;align-items:center;
  justify-content:center;gap:10px;font:900 10px/1 Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  letter-spacing:.055em;text-transform:uppercase;text-decoration:none;cursor:pointer;transition:.22s ease
}
.hub-sales-primary{border:1px solid #1b2430;background:#1b2430;color:#fff}
.hub-sales-secondary{border:1px solid rgba(27,36,48,.16);background:rgba(255,255,255,.64);color:#1b2430}
.hub-sales-primary:hover,.hub-sales-secondary:hover{transform:translateY(-2px)}

.hub-sales-value{
  margin:0 0 34px;padding:22px;border:1px solid rgba(27,36,48,.10);border-radius:24px;
  background:rgba(255,255,255,.66);box-shadow:0 16px 50px rgba(19,29,38,.05)
}
.hub-sales-value-head{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;margin-bottom:18px}
.hub-sales-value-head span{font-size:8px;font-weight:900;letter-spacing:.16em;color:#777f87;text-transform:uppercase}
.hub-sales-value-head strong{max-width:700px;font:500 clamp(24px,3vw,38px)/1.05 Georgia,"Times New Roman",serif;letter-spacing:-.035em;color:#1d2730}
.hub-sales-value-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.hub-sales-value-grid article{min-width:0;padding:16px;border-radius:17px;background:#f7f7f4;border:1px solid rgba(27,36,48,.08)}
.hub-sales-value-grid article>span{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:#202b35;color:#fff;font-size:14px;margin-bottom:14px}
.hub-sales-value-grid b{display:block;font-size:12px;color:#1f2932;margin-bottom:7px}
.hub-sales-value-grid p{margin:0;color:#69727a;font-size:11px;line-height:1.55}

/* Inside every niche demo: a small explanation that this is a purchasable development scenario. */
.mitin-demo-context{
  display:grid;grid-template-columns:1fr auto;gap:7px 14px;align-items:center;
  padding:11px 12px;margin:0 0 16px;border-radius:14px;background:#eef2f4;border:1px solid rgba(27,36,48,.10)
}
.mitin-demo-context span{
  grid-column:1/-1;font:900 7px/1.2 Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  letter-spacing:.15em;text-transform:uppercase;color:#72808a
}
.mitin-demo-context b{
  min-width:0;font:800 10px/1.4 Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  color:#27343e
}
.mitin-demo-context button{
  min-height:35px;border:0;border-radius:999px;padding:0 12px;background:#1d2933;color:#fff;
  font:900 8px/1 Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  letter-spacing:.05em;white-space:nowrap;cursor:pointer
}
.f3-body .mitin-demo-context{background:#f2ebe4;border-color:rgba(67,48,38,.12)}
.f3-body .mitin-demo-context b{color:#3e3028}
.f3-body .mitin-demo-context button{background:#2a211c}

/* Real MITIN DEV call-to-action at the end of each demo. */
.mitin-contact-strip .mitin-open-contact{cursor:pointer}

/* Critical accessibility fix: when OS/browser disables animation, hero content must stay visible. */
@media(prefers-reduced-motion:reduce){
  .p-load,.f3-load,.p-hero-stage,.f3-hero-stage{
    opacity:1!important;transform:none!important;animation:none!important
  }
}

/* Tablet: keep hero readable, compact and touch-friendly. */
@media(max-width:980px){
  .hub-sales-value-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mitin-demo-context{grid-template-columns:1fr}
  .mitin-demo-context span{grid-column:auto}
  .mitin-demo-context button{justify-self:start}
}

/* Phone: remove animation-dependent blank cards and make the demo a normal vertical site. */
@media(max-width:768px){
  .hub-sales-actions{display:grid;grid-template-columns:1fr;margin-top:22px}
  .hub-sales-primary,.hub-sales-secondary{width:100%;min-height:50px}
  .hub-sales-value{margin:0 0 18px;padding:14px;border-radius:20px}
  .hub-sales-value-head{display:grid;gap:8px;margin-bottom:13px}
  .hub-sales-value-head strong{font-size:27px}
  .hub-sales-value-grid{grid-template-columns:1fr 1fr;gap:7px}
  .hub-sales-value-grid article{padding:13px;border-radius:14px}
  .hub-sales-value-grid p{font-size:10px}

  /* Hero content is critical information: never hide it behind entrance animation on mobile. */
  .p-load,.f3-load,.p-hero-stage,.f3-hero-stage{
    opacity:1!important;transform:none!important;animation:none!important
  }
  .p-hero,.f3-hero{
    height:auto!important;min-height:0!important;padding-top:64px!important;padding-bottom:82px!important;
    align-items:flex-start!important;overflow:hidden!important
  }
  .p-hero-photo,.f3-hero-photo{
    inset:0!important;transform:none!important;will-change:auto!important;background-position:center!important
  }
  .p-hero-content,.f3-hero-content{
    width:calc(100% - 20px)!important;max-width:none!important;margin:86px 10px 18px!important;
    padding:16px!important;border-radius:20px!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
    box-shadow:0 18px 48px rgba(12,18,24,.18)!important
  }
  .p-hero-stage,.f3-hero-stage{grid-template-columns:minmax(0,1fr)!important;gap:16px!important}
  .p-stage-copy,.f3-stage-copy{min-width:0!important}
  .p-stage-copy h1,.f3-stage-copy h1{
    font-size:clamp(38px,11.5vw,48px)!important;line-height:.94!important;letter-spacing:-.055em!important;
    overflow-wrap:anywhere
  }
  .p-stage-copy p,.f3-stage-copy p{font-size:13px!important;line-height:1.58!important}
  .p-hero-actions,.f3-hero-actions{display:grid!important;grid-template-columns:1fr!important;gap:8px!important;margin-top:18px!important}
  .p-btn,.f3-btn,.p-text-link,.f3-text-link{
    width:100%!important;min-height:46px!important;box-sizing:border-box!important;justify-content:center!important
  }
  .p-stage-visual,.f3-stage-visual{min-height:155px!important;border-radius:16px!important}
  .p-stage-meta,.f3-stage-meta{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:6px!important;margin-top:12px!important}
  .p-stage-meta div,.f3-stage-meta div{min-width:0!important;padding:9px 7px!important;border-radius:11px!important}
  .p-stage-meta b,.f3-stage-meta b{font-size:13px!important;overflow-wrap:anywhere}
  .p-stage-meta span,.f3-stage-meta span{display:block;font-size:8px!important;line-height:1.25!important;overflow-wrap:anywhere}
  .p-stage-note,.f3-stage-note{margin-top:12px!important;font-size:9px!important;line-height:1.5!important}
  .p-hero-meta,.f3-hero-meta{display:none!important}

  .mitin-demo-context{grid-template-columns:1fr;gap:7px;padding:10px;margin-bottom:13px}
  .mitin-demo-context span{grid-column:auto;font-size:7px}
  .mitin-demo-context b{font-size:10px;line-height:1.35}
  .mitin-demo-context button{width:100%;min-height:42px;font-size:8px}

  /* Bottom navigation is the persistent commercial CTA on demo pages. */
  .mobile-demo-nav{grid-template-columns:1fr 1fr 1.15fr!important}
  .mobile-demo-nav a{font-size:8px!important;padding:0 5px!important;text-align:center}
  body.p-body .mitin-real-contact-fab,body.f3-body .mitin-real-contact-fab{display:none!important}
}

@media(max-width:390px){
  .hub-sales-value-grid{grid-template-columns:1fr}
  .p-hero-content,.f3-hero-content{width:calc(100% - 16px)!important;margin-left:8px!important;margin-right:8px!important;padding:14px!important}
  .p-stage-copy h1,.f3-stage-copy h1{font-size:38px!important}
  .p-stage-meta,.f3-stage-meta{grid-template-columns:1fr!important}
}