/* SMART_PUBLIC_COMPACT_20260927_V1
   Spacing-only follow-up for all 7 public first views.
   Preserve previous Proof-scale H1, navy/deep navy, subtle gold and content.
   No layout hiding, no changes to payments, catalog, AI or customer app. */
:root{--public-compact-gap:18px}
/* Universal headline rhythm: reduce vertical whitespace without shrinking H1. */
.hero-home .hero-copy h1,
main > section.page-hero h1,
.pricing-authority-page .pricing-hero h1,
.smart-contact-page .support-hero h1{margin-top:7px!important;margin-bottom:10px!important}
.hero-home .hero-copy .eyebrow,
main > section.page-hero .eyebrow,
.pricing-authority-page .pricing-hero .eyebrow,
.smart-contact-page .support-hero .eyebrow{margin-bottom:4px!important}
main > section.page-hero .breadcrumb,
.pricing-authority-page .page-hero .breadcrumb{margin-bottom:11px!important}
.hero-home .hero-copy .lead,
main > section.page-hero .lead,
.pricing-authority-page .pricing-hero .lead,
.smart-contact-page .support-hero p{margin-top:0!important}
/* The user sees the four product cards immediately below the hero. */
main > section.page-hero[class="page-hero"]{padding-top:23px!important;padding-bottom:25px!important}
main > section.page-hero[class="page-hero"] .page-hero-grid{gap:22px!important}
main > section.page-hero[class="page-hero"] .page-panel{padding:17px 21px!important}
main > section.page-hero[class="page-hero"] .page-panel ul{margin-top:7px!important;line-height:1.46!important}
main > section.page-hero[class="page-hero"] .page-panel li{margin:3px 0!important}
main > section.page-hero[class="page-hero"] + section.section{padding-top:19px!important}
/* Harga: put the actual pricing cards nearer to the top. */
.pricing-authority-page > section.page-hero.pricing-hero{padding-top:23px!important;padding-bottom:23px!important}
.pricing-authority-page .pricing-hero .page-hero-grid{gap:21px!important}
.pricing-authority-page .pricing-hero .page-panel{padding:17px 20px!important}
.pricing-authority-page .pricing-hero .page-panel ul{margin-top:7px!important;line-height:1.45!important}
.pricing-authority-page .pricing-hero .page-panel li{margin:3px 0!important}
.pricing-authority-page .pricing-hero-trust{margin-top:11px!important}
.pricing-authority-page .pricing-cards-section.section{padding-top:19px!important}
.pricing-authority-page .pricing-cards-section .section-head{margin-bottom:17px!important}
/* Demo: goal cards start within the first viewport on a typical desktop. */
main > section.page-hero.demo-sales-hero{padding-top:21px!important;padding-bottom:20px!important}
main > section.page-hero.demo-sales-hero .lead{max-width:960px!important}
main > section.page-hero.demo-sales-hero .demo-reassurance{
  max-width:1000px!important;
  margin-top:11px!important;
  padding:9px 13px!important;
  font-size:.84rem!important;
  line-height:1.42!important;
}
main > section.demo-needs.section{padding-top:17px!important;padding-bottom:22px!important}
main > section.demo-needs .section-head{margin-bottom:14px!important}
main > section.demo-needs .section-head h2{font-size:clamp(1.65rem,2.25vw,2rem)!important}
main > section.demo-needs .demo-goal-card{padding:16px 17px!important}
main > section.showroom-focus.section{padding-top:19px!important}
/* PDF is a utility: picker must be visible without reading a tall marketing hero. */
main > section.page-hero.pdf-tool-hero{padding-top:21px!important;padding-bottom:22px!important}
main > section.page-hero.pdf-tool-hero .hero-proof{margin-top:13px!important}
main > section.pdf-tool-section.section{padding-top:17px!important}
/* Blog: show the article section early, not only its headline. */
main > section.page-hero.public-hero{padding-top:24px!important;padding-bottom:26px!important}
main > section.page-hero.public-hero + section.section{padding-top:20px!important}
main > section.page-hero.public-hero + section.section .section-head{margin-bottom:18px!important}
/* Kontak: start the 3 action cards directly below the short heading. */
.smart-contact-page .support-hero{padding-top:24px!important;padding-bottom:17px!important}
.smart-contact-page .support-hero h1{max-width:1000px!important}
.smart-contact-page .support-choice-section{padding-top:16px!important}
.smart-contact-page .support-choice-card{padding:19px 21px!important}
.smart-contact-page .support-choice-card h2{margin:12px 0!important}
/* Beranda has the two-column dashboard visual; keep it, remove only empty space. */
.hero-home.public-hero{padding-top:23px!important;padding-bottom:25px!important}
.hero-home .hero-copy .hero-actions{margin-top:17px!important;gap:10px!important}
.hero-home .hero-copy .hero-proof{margin-top:13px!important;gap:7px!important}
.hero-home .hero-showcase{transform:none!important}
main > section.home-problem.section{padding-top:26px!important}
main > section.home-problem .section-head{margin-bottom:18px!important}
@media(max-width:860px){
  .hero-home.public-hero{padding:23px 0 25px!important}
  main > section.page-hero[class="page-hero"],
  .pricing-authority-page > section.page-hero.pricing-hero{padding:23px 0 24px!important}
  main > section.page-hero[class="page-hero"] .page-hero-grid,
  .pricing-authority-page .pricing-hero .page-hero-grid{gap:15px!important}
  main > section.page-hero[class="page-hero"] .page-panel,
  .pricing-authority-page .pricing-hero .page-panel{padding:15px 18px!important}
}
@media(max-width:600px){
  .hero-home.public-hero{padding:20px 0 23px!important}
  main > section.page-hero[class="page-hero"]{padding:19px 0 21px!important}
  main > section.page-hero[class="page-hero"] + section.section{padding-top:15px!important}
  main > section.page-hero[class="page-hero"] .page-hero-grid{gap:13px!important}
  main > section.page-hero[class="page-hero"] .page-panel{padding:13px 15px!important}
  main > section.page-hero[class="page-hero"] .page-panel ul{line-height:1.39!important}
  .pricing-authority-page > section.page-hero.pricing-hero{padding:18px 0 20px!important}
  .pricing-authority-page .pricing-hero .page-hero-grid{gap:12px!important}
  .pricing-authority-page .pricing-hero .page-panel{padding:12px 15px!important}
  .pricing-authority-page .pricing-cards-section.section{padding-top:15px!important}
  .pricing-authority-page .pricing-cards-section .section-head{margin-bottom:13px!important}
  main > section.page-hero.demo-sales-hero{padding:19px 0 18px!important}
  main > section.page-hero.demo-sales-hero .demo-reassurance{margin-top:9px!important;padding:8px 11px!important;font-size:.78rem!important}
  main > section.demo-needs.section{padding:13px 0 17px!important}
  main > section.demo-needs .section-head{margin-bottom:11px!important}
  main > section.demo-needs .demo-goal-card{padding:12px 14px!important}
  main > section.page-hero.pdf-tool-hero{padding:19px 0 18px!important}
  main > section.pdf-tool-section.section{padding-top:13px!important}
  main > section.page-hero.public-hero{padding:19px 0 21px!important}
  main > section.page-hero.public-hero + section.section{padding-top:15px!important}
  .smart-contact-page .support-hero{padding:19px 0 14px!important}
  .smart-contact-page .support-choice-section{padding-top:13px!important}
  .smart-contact-page .support-choice-card{padding:15px 17px!important}
  main > section.home-problem.section{padding-top:20px!important}
}