/* PI AI CREATIVE STUDIO
RESPONSIVE UI/UX UPGRADE V3.2.1 — FINAL VISUAL POLISH
Requires V3.2. UI only. */
/* V3.2.1_SOURCE_VERIFIED */

:root{
  --v321-max:1440px;
  --v321-gap:clamp(16px,1.6vw,24px);
}

/* Tighten excessive vertical rhythm without flattening sections */
main>.section{padding-top:clamp(34px,4vw,56px)!important;padding-bottom:clamp(34px,4vw,56px)!important}
main>.section+.section{margin-top:0!important}
.section-head{margin-bottom:26px!important}
.section-head h2{margin-bottom:8px!important}
.soft{padding-top:clamp(36px,4.2vw,58px)!important;padding-bottom:clamp(36px,4.2vw,58px)!important}

/* Feature cards: larger readable desktop typography */
.features .card{min-height:180px!important;padding:24px!important}
.features .card h3{font-size:19px!important;margin:14px 0 8px!important}
.features .card p{font-size:14px!important;line-height:1.65!important;color:#b9c5d8!important}
.features .icon{width:48px!important;height:48px!important}

/* Demo: stronger media emphasis and less dead space */
.video-grid{gap:18px!important}
.video-grid .card{padding:12px!important}
.video-grid video,.video-grid img{width:100%;display:block;border-radius:15px!important}
.video-grid .card h3{font-size:17px!important}
.video-grid .card p{font-size:13px!important;line-height:1.55!important}

/* Learning cards */
.learning-grid{gap:18px!important}
.learning-grid .card{min-height:190px!important;padding:22px!important}
.learning-grid .card h3{font-size:18px!important}
.learning-grid .card p{font-size:14px!important;line-height:1.6!important}

/* Pricing: exactly three visible plans should fill the available row */
.plans{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:clamp(18px,2vw,28px)!important;
  max-width:none!important;
}
.plans .card{
  min-height:350px!important;
  padding:28px!important;
}
.plans .card h3{font-size:21px!important;margin:12px 0 4px!important}
.plans .price{font-size:44px!important;margin:12px 0!important}
.plans .card>p{font-size:14px!important;line-height:1.6!important}
.plans .benefits{font-size:14px!important;line-height:1.85!important}
.plans .btn{font-size:14px!important;font-weight:800!important}

/* CTA and footer compactness */
.cta{margin-top:0!important}
footer{padding-top:28px!important;padding-bottom:28px!important}
.footer-grid{gap:28px!important}
.footer-grid p,.footer-grid a{font-size:13px!important;line-height:1.6!important}

/* The old product phrase can remain in CMS data, but should not appear as a second brand identity. */
.footer-brand-legacy{display:none!important}

/* Laptop/tablet */
@media(max-width:1100px){
  .plans{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .plans .card{padding:22px!important}
}
@media(max-width:920px){
  main>.section{padding-top:38px!important;padding-bottom:38px!important}
  .plans{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .plans .card:last-child:nth-child(odd){grid-column:1/-1;max-width:620px;width:100%;justify-self:center}
}

/* Mobile */
@media(max-width:700px){
  main>.section,.soft{padding-top:32px!important;padding-bottom:32px!important}
  .section-head{margin-bottom:20px!important}
  .features .card,.learning-grid .card,.plans .card{min-height:auto!important}
  .features .card h3{font-size:18px!important}
  .plans{grid-template-columns:1fr!important}
  .plans .card:last-child:nth-child(odd){grid-column:auto;max-width:none}
  .plans .price{font-size:38px!important}
}