/*
  POSTPILOT BACKGROUND SYSTEM v8.4.1 REPAIR
  =========================================

  Safe rule:
  - This file adds atmosphere/background polish only.
  - It does not rebuild product cards.
  - It does not fake images.
  - It does not override the main component layout.

  CSS is for:
  dark gradients, glow, grid, panel depth, pricing/CTA atmosphere.

  HTML remains:
  headings, buttons, cards, pricing, labels and copy.
*/

:root{
  --pp-bg-0:#03070d;
  --pp-bg-1:#05080d;
  --pp-bg-2:#07101d;
  --pp-blue:#386cff;
  --pp-purple:#8f5cff;
  --pp-green:#35d982;
  --pp-line:rgba(255,255,255,.11);
}

.pp-bg-system{
  background:
    radial-gradient(circle at 18% 8%,rgba(47,128,255,.14),transparent 28%),
    radial-gradient(circle at 88% 12%,rgba(143,92,255,.10),transparent 30%),
    linear-gradient(180deg,var(--pp-bg-1) 0%,var(--pp-bg-2) 42%,var(--pp-bg-0) 100%) !important;
}

.pp-bg-system::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-2;
  pointer-events:none;
  background:
    linear-gradient(rgba(255,255,255,.014) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.014) 1px,transparent 1px);
  background-size:56px 56px;
  opacity:.35;
  mask-image:linear-gradient(180deg,rgba(0,0,0,.82),transparent 72%);
}

.pp-bg-system::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(circle at 50% 0%,rgba(255,255,255,.022),transparent 26%),
    radial-gradient(circle at 8% 70%,rgba(47,128,255,.05),transparent 34%),
    radial-gradient(circle at 94% 76%,rgba(143,92,255,.05),transparent 36%);
}

/* Reusable safe background helper classes */
.bg-hero,
.bg-section,
.bg-panel-wrap,
.bg-pricing,
.bg-cta{
  position:relative;
  isolation:isolate;
}

.bg-hero::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:72%;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(circle at 74% 45%,rgba(56,108,255,.13),transparent 32%),
    radial-gradient(circle at 22% 20%,rgba(47,128,255,.08),transparent 30%),
    linear-gradient(180deg,rgba(56,108,255,.05),transparent);
}

.bg-section::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(circle at 50% 0%,rgba(56,108,255,.045),transparent 32%),
    linear-gradient(180deg,transparent,rgba(255,255,255,.008),transparent);
}

.bg-panel-wrap{
  background:
    radial-gradient(circle at 12% 80%,rgba(56,108,255,.045),transparent 28%),
    linear-gradient(180deg,rgba(255,255,255,.030),rgba(255,255,255,.010)) !important;
}

.bg-pricing::before{
  content:"";
  position:absolute;
  left:50%;
  top:44%;
  width:520px;
  height:520px;
  transform:translate(-50%,-50%);
  z-index:-1;
  pointer-events:none;
  border-radius:50%;
  background:radial-gradient(circle,rgba(56,108,255,.07),transparent 68%);
}

.bg-cta{
  background:
    radial-gradient(circle at 84% 50%,rgba(143,92,255,.19),transparent 36%),
    radial-gradient(circle at 55% 52%,rgba(56,108,255,.10),transparent 28%),
    linear-gradient(135deg,#08284a,#07101a 60%,#120b2c) !important;
}

.bg-grid::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    linear-gradient(rgba(255,255,255,.011) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.011) 1px,transparent 1px);
  background-size:42px 42px;
  opacity:.35;
  mask-image:linear-gradient(180deg,rgba(0,0,0,.62),transparent 78%);
}

.glow-blue::after{
  content:"";
  position:absolute;
  width:260px;
  height:260px;
  right:8%;
  top:18%;
  z-index:-1;
  border-radius:50%;
  background:radial-gradient(circle,rgba(56,108,255,.10),transparent 70%);
  pointer-events:none;
}

.glow-purple::after{
  content:"";
  position:absolute;
  width:260px;
  height:260px;
  right:10%;
  top:20%;
  z-index:-1;
  border-radius:50%;
  background:radial-gradient(circle,rgba(143,92,255,.10),transparent 70%);
  pointer-events:none;
}

/* Subtle panel/card polish only */
.product-panel,
.step-card,
.mini-social,
.industry-css-grid article,
.clean-flow-preview article,
.price-card{
  box-shadow:0 22px 60px rgba(0,0,0,.27) !important;
}

.product-panel{
  box-shadow:0 34px 90px rgba(0,0,0,.40),0 0 42px rgba(56,108,255,.10) !important;
}

.demo-panel{
  box-shadow:0 22px 60px rgba(0,0,0,.26) !important;
}

.price-card{
  box-shadow:0 28px 70px rgba(0,0,0,.34),0 0 32px rgba(56,108,255,.10) !important;
}

/* Button shine: subtle only */
.btn{
  position:relative;
  overflow:hidden;
}

.btn::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(110deg,transparent 0 40%,rgba(255,255,255,.14) 48%,transparent 56%);
  transform:translateX(-125%);
  transition:transform .75s ease;
  pointer-events:none;
}

.btn:hover::after{
  transform:translateX(125%);
}

/* Never show old fake image/thumbnail artefacts */
.asset-grid-glow,
.visual-orbit,
.visual-card-stack,
.phone-mini,
.phone-card{
  display:none !important;
}

@media (max-width:760px){
  .pp-bg-system::before{
    background-size:34px 34px;
    opacity:.24;
  }

  .glow-blue::after,
  .glow-purple::after,
  .bg-pricing::before{
    display:none;
  }
}



/*
  POSTPILOT v8.5 — Mock-up Matched CSS Polish
  ===========================================
  Goal:
  Bring back the premium mock-up feel while keeping the rule:
  CSS = atmosphere, depth, polish.
  HTML = real text and UI.
  No fake photos. No generated screenshots.
*/

/* Page atmosphere: richer but controlled */
.pp-v85{
  background:
    radial-gradient(circle at 17% 8%,rgba(47,128,255,.16),transparent 29%),
    radial-gradient(circle at 90% 10%,rgba(143,92,255,.12),transparent 30%),
    radial-gradient(circle at 48% 42%,rgba(56,108,255,.045),transparent 45%),
    linear-gradient(180deg,#05080d 0%,#07101d 42%,#03070d 100%) !important;
}

/* Header polish */
.pp-v85 .topbar{
  background:rgba(4,7,13,.82)!important;
  border-bottom:1px solid rgba(255,255,255,.075)!important;
}
.pp-v85 .brand-logo{
  height:32px;
}

/* Hero: bigger and more like the approved mock */
.pp-v85 .hero{
  grid-template-columns:minmax(380px,.82fr) minmax(720px,1.18fr)!important;
  gap:58px!important;
  min-height:720px!important;
  padding-top:62px!important;
  padding-bottom:92px!important;
}
.pp-v85 .hero h1{
  font-size:clamp(54px,6.3vw,86px)!important;
  line-height:1.01!important;
}
.pp-v85 .lead{
  max-width:610px;
}

/* Hero visual */
.v85-hero-visual{
  position:relative;
  min-height:590px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.v85-orbit{
  position:absolute;
  width:520px;
  height:520px;
  border-radius:50%;
  background:
    radial-gradient(circle,rgba(56,108,255,.12),transparent 62%);
  border:1px solid rgba(103,139,255,.08);
  box-shadow:0 0 110px rgba(56,108,255,.16);
  pointer-events:none;
}
.v85-product{
  position:relative;
  width:min(880px,100%);
  padding:28px 28px 86px;
  border-radius:34px;
  background:
    radial-gradient(circle at 54% 22%,rgba(56,108,255,.17),transparent 34%),
    radial-gradient(circle at 90% 10%,rgba(143,92,255,.10),transparent 34%),
    linear-gradient(180deg,rgba(255,255,255,.058),rgba(255,255,255,.018));
  border:1px solid rgba(255,255,255,.13);
  box-shadow:0 44px 110px rgba(0,0,0,.46),0 0 70px rgba(56,108,255,.14);
}
.v85-browser{
  border-radius:24px;
  overflow:hidden;
  background:#07101a;
  border:1px solid rgba(103,139,255,.46);
  box-shadow:0 26px 70px rgba(0,0,0,.38);
}
.v85-browser-top{
  display:grid;
  grid-template-columns:11px 11px 11px 1fr;
  gap:8px;
  align-items:center;
  padding:16px 18px;
  background:linear-gradient(180deg,#182235,#0c1420);
}
.v85-browser-top span{
  width:10px;
  height:10px;
  border-radius:50%;
  display:block;
  background:#56657a;
}
.v85-browser-top span:first-child{background:#ff5f66}
.v85-browser-top span:nth-child(2){background:#ffc45b}
.v85-browser-top span:nth-child(3){background:#39d98a}
.v85-url{
  justify-self:end;
  width:min(385px,100%);
  padding:9px 14px;
  border-radius:9px;
  background:#f8fbff;
  color:#152033;
  font-weight:850;
  font-size:14px;
}
.v85-browser-body{
  display:grid;
  grid-template-columns:1fr 92px 1fr;
  gap:18px;
  align-items:stretch;
  padding:26px;
  background:
    linear-gradient(rgba(255,255,255,.013) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.013) 1px,transparent 1px),
    radial-gradient(circle at 78% 18%,rgba(143,92,255,.08),transparent 35%),
    linear-gradient(135deg,#080d16,#111b2b 58%,#07101b);
  background-size:34px 34px,34px 34px,auto,auto;
}
.v85-source,
.v85-generated article{
  border-radius:19px;
  background:linear-gradient(180deg,rgba(255,255,255,.060),rgba(255,255,255,.022));
  border:1px solid rgba(255,255,255,.11);
  box-shadow:0 18px 45px rgba(0,0,0,.23);
}
.v85-source{
  padding:25px;
}
.v85-source h3{
  margin:0 0 12px;
  font-size:31px;
  line-height:1.05;
  letter-spacing:-.055em;
}
.v85-source p{
  color:#b7c2d4;
  line-height:1.55;
}
.v85-flow{
  position:relative;
  display:grid;
  place-items:center;
}
.v85-line{
  position:absolute;
  left:-22px;
  right:-22px;
  top:50%;
  height:2px;
  background:linear-gradient(90deg,transparent,rgba(56,108,255,.52),rgba(143,92,255,.42),transparent);
  box-shadow:0 0 24px rgba(56,108,255,.36);
}
.v85-spark{
  position:relative;
  z-index:2;
  display:grid;
  place-items:center;
  width:72px;
  height:72px;
  border-radius:50%;
  background:radial-gradient(circle,#193a91,#091220);
  border:2px solid rgba(87,131,255,.9);
  box-shadow:0 0 42px rgba(56,108,255,.62);
  font-size:32px;
}
.v85-generated{
  display:grid;
  gap:14px;
}
.v85-generated article{
  padding:18px;
}
.v85-generated b{
  display:block;
  margin-bottom:7px;
}
.v85-generated p{
  margin:0;
  color:#b7c2d4;
  line-height:1.45;
}
.v85-generated article:nth-child(1){border-color:rgba(57,114,255,.46)}
.v85-generated article:nth-child(2){border-color:rgba(143,92,255,.42)}
.v85-generated article:nth-child(3){border-color:rgba(53,217,130,.38)}

.v85-floating-row{
  position:absolute;
  left:38px;
  right:38px;
  bottom:-10px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}
.v85-float-card{
  min-height:118px;
  padding:18px;
  border-radius:18px;
  background:rgba(7,12,20,.96);
  border:1px solid rgba(255,255,255,.13);
  box-shadow:0 25px 70px rgba(0,0,0,.40);
}
.v85-float-card span{
  display:grid;
  place-items:center;
  width:30px;
  height:30px;
  border-radius:50%;
  background:linear-gradient(135deg,#386cff,#8f5cff);
  font-weight:900;
  margin-bottom:12px;
}
.v85-float-card strong{
  display:block;
  margin-bottom:7px;
}
.v85-float-card p{
  margin:0;
  color:#b7c2d4;
  font-size:14px;
}
.v85-float-card.blue{border-color:rgba(57,114,255,.52)}
.v85-float-card.purple{border-color:rgba(143,92,255,.48)}
.v85-float-card.green{border-color:rgba(53,217,130,.40)}

/* Split band: more contrast */
.pp-v85 .split-band{
  background:
    radial-gradient(circle at 50% 50%,rgba(56,108,255,.05),transparent 26%),
    linear-gradient(90deg,rgba(255,255,255,.018),rgba(56,108,255,.035))!important;
}

/* Steps: slightly richer cards */
.pp-v85 .step-card{
  min-height:218px!important;
  border-radius:20px!important;
}
.pp-v85 .asset-step-icon{
  margin-bottom:18px!important;
}

/* Preview panel: more app-like output cards */
.pp-v85 .demo-panel{
  max-width:1370px!important;
  padding:36px!important;
  border-radius:26px!important;
  background:
    radial-gradient(circle at 12% 80%,rgba(56,108,255,.06),transparent 28%),
    linear-gradient(180deg,rgba(255,255,255,.046),rgba(255,255,255,.016))!important;
}
.v85-output-card{
  position:relative;
  min-height:285px!important;
  border-radius:20px!important;
  padding:22px!important;
  overflow:hidden;
}
.v85-output-card::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.035),transparent 45%);
}
.v85-output-card strong{
  position:relative;
  z-index:1;
}
.v85-output-card p,
.v85-output-card small,
.v85-output-card .card-accent{
  position:relative;
  z-index:1;
}
.v85-output-card .card-accent{
  height:5px;
  box-shadow:0 0 18px rgba(56,108,255,.20);
}
.v85-output-card:nth-child(1){border-color:rgba(57,114,255,.40)!important}
.v85-output-card:nth-child(2){border-color:rgba(143,92,255,.38)!important}
.v85-output-card:nth-child(3){border-color:rgba(53,217,130,.34)!important}

/* Industry: modern bento grid, not plain equal boxes */
.v85-bento{
  max-width:1180px!important;
  display:grid!important;
  grid-template-columns:1.15fr 1fr 1fr!important;
  gap:20px!important;
}
.v85-bento article{
  min-height:192px!important;
  border-radius:22px!important;
  padding:26px!important;
  overflow:hidden;
}
.v85-bento article.wide{
  min-height:220px!important;
  background:
    radial-gradient(circle at 100% 0,rgba(56,108,255,.12),transparent 34%),
    linear-gradient(180deg,rgba(255,255,255,.060),rgba(255,255,255,.020))!important;
}
.v85-bento article:nth-child(1){grid-row:span 2}
.v85-bento article:nth-child(6){grid-column:span 2}
.v85-bento article::after{
  height:5px!important;
}

/* Mobile flow: better card depth */
.v85-flow-preview{
  grid-template-columns:repeat(3,1fr)!important;
  gap:20px!important;
  padding:26px!important;
  border-radius:28px!important;
}
.v85-flow-preview article{
  min-height:190px!important;
  border-radius:22px!important;
}

/* Pricing: modern spotlight */
.v85-pricing-layout{
  max-width:1180px!important;
}
.v85-price-card{
  min-height:455px!important;
  transform:translateY(-4px);
  border-radius:22px!important;
  background:
    radial-gradient(circle at 50% 0,rgba(56,108,255,.20),transparent 36%),
    linear-gradient(180deg,#111d2d,#07101c)!important;
}
.pp-v85 .pricing::before{
  opacity:1!important;
  background:radial-gradient(circle,rgba(56,108,255,.10),transparent 68%)!important;
}
.pp-v85 .benefit{
  opacity:.92;
}
.pp-v85 .benefit-icon{
  border-color:rgba(103,139,255,.24)!important;
}

/* CTA: closer to mock-up */
.pp-v85 .final-cta{
  min-height:250px;
  background:
    radial-gradient(circle at 80% 42%,rgba(143,92,255,.27),transparent 34%),
    radial-gradient(circle at 55% 52%,rgba(56,108,255,.17),transparent 25%),
    linear-gradient(135deg,#08284a,#07101a 58%,#120b2c)!important;
}
.pp-v85 .final-cta .btn{
  min-width:235px;
}

/* Responsive */
@media (max-width:1180px){
  .pp-v85 .hero{
    grid-template-columns:1fr!important;
  }
  .v85-hero-visual{
    min-height:auto;
  }
  .v85-product{
    max-width:860px;
  }
}
@media (max-width:900px){
  .v85-browser-body{
    grid-template-columns:1fr;
  }
  .v85-flow{
    min-height:72px;
  }
  .v85-line{
    left:20%;
    right:20%;
  }
  .v85-floating-row{
    position:relative;
    left:auto;
    right:auto;
    bottom:auto;
    margin-top:18px;
    grid-template-columns:1fr;
  }
  .v85-bento{
    grid-template-columns:1fr 1fr!important;
  }
  .v85-bento article:nth-child(1),
  .v85-bento article:nth-child(6){
    grid-row:auto;
    grid-column:auto;
  }
}
@media (max-width:760px){
  .pp-v85 .hero{
    min-height:auto!important;
    padding-top:46px!important;
  }
  .pp-v85 .hero h1{
    font-size:42px!important;
  }
  .v85-product{
    padding:18px!important;
    border-radius:26px;
  }
  .v85-browser-body,
  .v85-bento,
  .v85-flow-preview{
    grid-template-columns:1fr!important;
  }
  .v85-source h3{
    font-size:25px;
  }
  .pp-v85 .demo-panel{
    padding:22px!important;
  }
}



/*
  POSTPILOT v8.6 — Professional Layout Polish
  ==========================================
  Aim:
  - Less oversized hero text
  - Better first-screen balance
  - Cleaner alignment
  - More professional, less AI-generated feel
  - Keep CSS as atmosphere only, not fake images
*/

/* Overall max-width consistency */
.pp-v86 .topbar,
.pp-v86 .hero,
.pp-v86 .steps,
.pp-v86 .pricing,
.pp-v86 .mobile-preview{
  --page-max:1240px;
}

.pp-v86 .topbar{
  padding-left:max(28px,calc((100vw - 1240px)/2 + 24px))!important;
  padding-right:max(28px,calc((100vw - 1240px)/2 + 24px))!important;
}

.pp-v86 .section-pad{
  padding-left:max(28px,calc((100vw - 1240px)/2 + 24px))!important;
  padding-right:max(28px,calc((100vw - 1240px)/2 + 24px))!important;
}

/* Header: calmer, sharper */
.pp-v86 .topbar{
  min-height:72px;
}
.pp-v86 .brand-logo{
  height:30px!important;
}
.pp-v86 .nav{
  gap:34px!important;
  font-size:13px!important;
}
.pp-v86 .btn-small{
  min-height:40px!important;
  padding:0 18px!important;
}

/* Hero: professional landing-page balance */
.pp-v86 .hero{
  grid-template-columns:minmax(420px,.92fr) minmax(560px,1.08fr)!important;
  gap:54px!important;
  min-height:650px!important;
  padding-top:58px!important;
  padding-bottom:76px!important;
  align-items:center!important;
}

.pp-v86 .hero-copy{
  max-width:620px!important;
}

.pp-v86 .eyebrow{
  font-size:11px!important;
  letter-spacing:.07em!important;
  padding:8px 13px!important;
}

.pp-v86 .hero h1{
  font-size:clamp(46px,4.8vw,66px)!important;
  line-height:1.04!important;
  letter-spacing:-.055em!important;
  margin:24px 0 20px!important;
  max-width:660px!important;
}

.pp-v86 .hero h1 span{
  display:inline;
}

.pp-v86 .lead{
  font-size:17px!important;
  line-height:1.65!important;
  max-width:575px!important;
}

.pp-v86 .hero-buttons{
  margin-top:30px!important;
  margin-bottom:30px!important;
}

.pp-v86 .hero-buttons .btn{
  min-height:52px!important;
  padding:0 22px!important;
}

.pp-v86 .trust-row{
  grid-template-columns:repeat(3,minmax(120px,1fr))!important;
  gap:16px!important;
  max-width:560px!important;
  font-size:12px!important;
}

/* Hero visual: less busy, more aligned */
.pp-v86 .v85-hero-visual{
  min-height:510px!important;
  justify-content:flex-end!important;
}

.pp-v86 .v85-product{
  width:min(690px,100%)!important;
  padding:22px 22px 66px!important;
  border-radius:28px!important;
  box-shadow:0 34px 88px rgba(0,0,0,.42),0 0 56px rgba(56,108,255,.12)!important;
}

.pp-v86 .v85-browser{
  border-radius:20px!important;
}

.pp-v86 .v85-browser-body{
  grid-template-columns:1fr 62px 1.05fr!important;
  gap:14px!important;
  padding:20px!important;
}

.pp-v86 .v85-source{
  padding:21px!important;
}

.pp-v86 .v85-source h3{
  font-size:25px!important;
  line-height:1.08!important;
}

.pp-v86 .v85-source p,
.pp-v86 .v85-generated p{
  font-size:13px!important;
  line-height:1.45!important;
}

.pp-v86 .source-tags{
  gap:7px!important;
  margin-top:17px!important;
}

.pp-v86 .source-tags span{
  padding:7px 9px!important;
  font-size:11px!important;
}

.pp-v86 .v85-spark{
  width:54px!important;
  height:54px!important;
  font-size:24px!important;
}

.pp-v86 .v85-generated{
  gap:10px!important;
}

.pp-v86 .v85-generated article{
  padding:14px!important;
}

.pp-v86 .v85-generated b{
  font-size:13px!important;
}

.pp-v86 .v86-floating-row{
  left:28px!important;
  right:28px!important;
  bottom:-4px!important;
  gap:12px!important;
}

.pp-v86 .v85-float-card{
  min-height:88px!important;
  padding:14px!important;
  border-radius:15px!important;
}

.pp-v86 .v85-float-card span{
  width:24px!important;
  height:24px!important;
  margin-bottom:8px!important;
  font-size:12px!important;
}

.pp-v86 .v85-float-card strong{
  font-size:12px!important;
  margin-bottom:4px!important;
}

.pp-v86 .v85-float-card p{
  font-size:12px!important;
}

/* Better vertical rhythm */
.pp-v86 .split-band{
  padding-top:0!important;
  padding-bottom:0!important;
}
.pp-v86 .split-band>div:not(.vs){
  padding-top:64px!important;
  padding-bottom:64px!important;
}

.pp-v86 .section-head h2{
  font-size:30px!important;
}

.pp-v86 .steps.section-pad{
  padding-top:72px!important;
  padding-bottom:72px!important;
}

.pp-v86 .step-grid{
  max-width:980px!important;
}

/* Demo panel: align form and output neatly */
.pp-v86 .demo-panel{
  max-width:1240px!important;
  padding:30px!important;
  grid-template-columns:.82fr 1.38fr!important;
  gap:30px!important;
  border-radius:22px!important;
}

.pp-v86 .demo-panel h2{
  font-size:29px!important;
  line-height:1.12!important;
}

.pp-v86 .demo-form input,
.pp-v86 .demo-form select{
  height:52px!important;
}

.pp-v86 .demo-form .btn{
  width:68%!important;
  min-height:52px!important;
}

.pp-v86 .preview-head{
  margin-bottom:16px!important;
}

.pp-v86 .v85-output-card{
  min-height:245px!important;
  padding:18px!important;
}

.pp-v86 .v85-output-card p{
  font-size:14px!important;
}

/* Bento layout: fix uneven empty-looking card */
.pp-v86 .v85-bento{
  max-width:1080px!important;
  grid-template-columns:repeat(3,1fr)!important;
  gap:18px!important;
}

.pp-v86 .v85-bento article,
.pp-v86 .v85-bento article.wide{
  min-height:178px!important;
  grid-row:auto!important;
  grid-column:auto!important;
  padding:24px!important;
}

.pp-v86 .industry-css-grid h3{
  font-size:15px!important;
}

/* Mobile preview section: cleaner professional balance */
.pp-v86 .mobile-preview{
  grid-template-columns:minmax(340px,.9fr) minmax(520px,1.1fr)!important;
  gap:52px!important;
  align-items:center!important;
  padding-top:74px!important;
}

.pp-v86 .mobile-copy h2{
  font-size:34px!important;
  line-height:1.12!important;
}

.pp-v86 .v85-flow-preview{
  padding:22px!important;
  gap:16px!important;
}

.pp-v86 .v85-flow-preview article{
  min-height:160px!important;
  padding:22px!important;
}

/* Pricing: tighter, more lined up */
.pp-v86 .pricing.section-pad{
  padding-top:82px!important;
}

.pp-v86 .pricing-layout{
  max-width:1040px!important;
  grid-template-columns:.86fr 1.05fr .86fr!important;
  gap:34px!important;
}

.pp-v86 .v85-price-card{
  min-height:430px!important;
  padding:40px!important;
}

.pp-v86 .benefit{
  align-self:center!important;
}

.pp-v86 .benefit p{
  max-width:230px!important;
}

/* CTA: professional spacing */
.pp-v86 .final-cta{
  padding-left:max(34px,calc((100vw - 1240px)/2 + 36px))!important;
  padding-right:max(34px,calc((100vw - 1240px)/2 + 36px))!important;
}

.pp-v86 .final-cta h2{
  font-size:34px!important;
}

.pp-v86 .final-cta p{
  font-size:16px!important;
}

/* Mobile responsiveness */
@media (max-width:1180px){
  .pp-v86 .hero{
    grid-template-columns:1fr!important;
    max-width:820px;
    margin:0 auto;
  }

  .pp-v86 .v85-hero-visual{
    justify-content:center!important;
  }

  .pp-v86 .v85-product{
    width:min(780px,100%)!important;
  }

  .pp-v86 .demo-panel,
  .pp-v86 .mobile-preview,
  .pp-v86 .pricing-layout{
    grid-template-columns:1fr!important;
  }
}

@media (max-width:760px){
  .pp-v86 .section-pad{
    padding-left:20px!important;
    padding-right:20px!important;
  }

  .pp-v86 .hero{
    padding-top:44px!important;
    padding-bottom:58px!important;
  }

  .pp-v86 .hero h1{
    font-size:39px!important;
    line-height:1.07!important;
  }

  .pp-v86 .hero-buttons{
    flex-direction:column!important;
  }

  .pp-v86 .trust-row{
    grid-template-columns:1fr!important;
  }

  .pp-v86 .v85-product{
    padding:16px!important;
  }

  .pp-v86 .v85-browser-body,
  .pp-v86 .v86-floating-row,
  .pp-v86 .v85-bento,
  .pp-v86 .preview-cards,
  .pp-v86 .v85-flow-preview{
    grid-template-columns:1fr!important;
  }

  .pp-v86 .v86-floating-row{
    position:relative!important;
    left:auto!important;
    right:auto!important;
    bottom:auto!important;
    margin-top:14px!important;
  }

  .pp-v86 .demo-form .btn{
    width:100%!important;
  }

  .pp-v86 .final-cta{
    padding-left:20px!important;
    padding-right:20px!important;
  }
}