/* ==========================================================================
   Appslin — mobile app pages + server pages updates (additive only)
   Loaded on: IOS-app-development, android-app-development,
              hybrid-application-development, linux-server, aws-server
   Nothing here replaces existing stylesheets.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1) PACKAGES — one full-width package per row (desktop, tablet & mobile)
   -------------------------------------------------------------------------- */
.page-mobapp .ma-pk-grid{
  grid-template-columns:1fr;
  gap:28px;
  max-width:1140px;
  margin-inline:auto;
}

.page-mobapp .ma-pk-card{
  display:grid;
  grid-template-columns:minmax(280px,340px) minmax(0,1fr);
  align-items:stretch;
  padding:0;
  overflow:hidden;
  border-radius:22px;
}

.page-mobapp .ma-pk-card .ma-pk-head{
  grid-row:1 / span 2;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:6px;
  padding:38px 32px;
  margin:0;
  border-bottom:0;
}
.page-mobapp .ma-pk-card .ma-pk-head::after{
  inset:0 0 0 auto;
  width:3px;
  height:auto;
  background:linear-gradient(180deg,#C9A24C,rgba(201,162,76,0));
}
.page-mobapp .ma-pk-card .ma-pk-head .dy-pk-tag{align-self:flex-start}
.page-mobapp .ma-pk-card .ma-pk-head h3{font-size:1.5rem;line-height:1.25}
.page-mobapp .ma-pk-card .ma-pk-head .dy-price{font-size:3.2rem;margin-top:12px}

/* right side: features + CTA stacked */
.page-mobapp .ma-pk-card .cms-pack-features{
  grid-column:2;
  padding:34px 34px 8px;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px 26px;
  align-content:start;
}
.page-mobapp .ma-pk-card .ma-pk-actions{
  grid-column:2;
  padding:18px 34px 34px;
  align-self:start;
}
.page-mobapp .ma-pk-card .ma-pk-actions .btn{flex:0 1 auto;min-width:190px}
.page-mobapp .ma-pk-flag{top:18px;right:24px}
.page-mobapp .ma-pk-card--featured .cms-pack-features{padding-top:60px}

@media (max-width:1024px){
  .page-mobapp .ma-pk-card{grid-template-columns:1fr}
  .page-mobapp .ma-pk-card .ma-pk-head{grid-row:auto;padding:30px 26px}
  .page-mobapp .ma-pk-card--featured .cms-pack-features{padding-top:26px}
  .page-mobapp .ma-pk-card .cms-pack-features{
    grid-column:1;
    padding:26px 26px 6px;
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .page-mobapp .ma-pk-card .ma-pk-actions{grid-column:1;padding:14px 26px 28px}
}

@media (max-width:640px){
  .page-mobapp .ma-pk-card .cms-pack-features{grid-template-columns:1fr}
  .page-mobapp .ma-pk-card .ma-pk-head .dy-price{font-size:2.6rem}
  .page-mobapp .ma-pk-card .ma-pk-actions .btn{flex:1 1 100%;min-width:0;text-align:center}
}

/* --------------------------------------------------------------------------
   2) Hybrid — Appcelerator Titanium spans one full row
   -------------------------------------------------------------------------- */
.page-mobapp .ec-grid .ec-card--fullrow{grid-column:1 / -1}

/* --------------------------------------------------------------------------
   3) FAQ visual — keep the image contained and aligned with the FAQ
   -------------------------------------------------------------------------- */
.page-mobapp #faq .pp-faq-visual img{
  display:block;
  width:100%;
  height:auto;
  object-fit:contain;
}

/* --------------------------------------------------------------------------
   4) Compact, consistent vertical rhythm between sections
   -------------------------------------------------------------------------- */
.page-mobapp .section,
.page-server .section{
  padding-block:clamp(38px,4.4vw,62px);
}
.page-mobapp .section .sec-head,
.page-server .section .sec-head{margin-bottom:clamp(20px,2.4vw,30px)}
.page-mobapp .pr-trust,
.page-server .pr-trust{padding-block:clamp(26px,3vw,40px)}
.page-mobapp .ma-wide-media,
.page-server .ma-wide-media{margin-top:22px}

@media (max-width:768px){
  .page-mobapp .section,
  .page-server .section{padding-block:34px}
}

@media (max-width:640px){
  .page-mobapp .ma-pk-card--featured{padding-top:0}
  .page-mobapp .ma-pk-flag{position:static;display:inline-block;margin:18px 0 -8px 24px}
}