/*
  SMART_PUBLIC_FIRSTVIEW_20260927_V1
  WEVIX Proof PublicWeb typography reference: H1 40-50px desktop.
  Official palette: Navy #0F2742, Deep Navy #081827, Gold #D4AF37,
  White #FFFFFF, Soft Gray #F5F6F7. Gold remains an identity accent.
  Scope: seven public entry pages and primary navigation only.
*/
:root{
  --fv-navy:#0F2742;
  --fv-deep-navy:#081827;
  --fv-gold:#D4AF37;
  --fv-text:#43546A;
  --fv-soft:#F5F6F7;
  --fv-line:#E1E7ED;
}
/* A slim gold underline rather than the prominent focus frame. */
.site-header .desktop-nav a,
.site-header .desktop-nav a.active,
.site-header .desktop-nav a:hover{
  position:relative;
  color:var(--fv-navy)!important;
  text-decoration:none!important;
  border-color:transparent!important;
  box-shadow:none!important;
  background:transparent!important;
}
.site-header .desktop-nav a.active::after{
  content:"";
  position:absolute;left:5px;right:5px;bottom:-9px;
  height:2px;border-radius:2px;background:var(--fv-gold);
}
.site-header .desktop-nav a:focus-visible,
.site-header .header-actions a:focus-visible{
  outline:2px solid var(--fv-navy)!important;
  outline-offset:4px!important;
  border-radius:4px;
}
/* Airy light entry surfaces: no full-screen navy slabs. */
.hero-home.public-hero,
main > section.page-hero[class="page-hero"],
main > section.page-hero.public-hero,
main > section.page-hero.demo-sales-hero,
main > section.page-hero.pdf-tool-hero,
.pricing-authority-page > section.page-hero.pricing-hero,
.smart-contact-page .support-hero{
  background:linear-gradient(180deg,#FFFFFF 0%,#F5F6F7 100%)!important;
  border-bottom:1px solid var(--fv-line)!important;
  color:var(--fv-navy)!important;
  box-shadow:none!important;
  min-height:0!important;
}
.hero-home.public-hero{padding:42px 0 46px!important}
main > section.page-hero[class="page-hero"],
main > section.page-hero.public-hero,
main > section.page-hero.demo-sales-hero,
main > section.page-hero.pdf-tool-hero,
.pricing-authority-page > section.page-hero.pricing-hero{padding:45px 0 46px!important}
.smart-contact-page .support-hero{padding:42px 0 30px!important}
/* WEVIX Proof public-scale headings, including Demo. */
.hero-home .hero-copy h1,
main > section.page-hero[class="page-hero"] h1,
main > section.page-hero.public-hero h1,
main > section.page-hero.demo-sales-hero h1,
main > section.page-hero.pdf-tool-hero h1,
.pricing-authority-page .pricing-hero h1,
.smart-contact-page .support-hero h1{
  font-size:clamp(2.375rem,3.5vw,3.125rem)!important;
  font-weight:800!important;
  line-height:1.12!important;
  letter-spacing:-.038em!important;
  text-transform:none!important;
  color:var(--fv-navy)!important;
  margin:12px 0 17px!important;
  max-width:840px;
}
.hero-home .hero-copy h1{max-width:660px!important}
main > section.page-hero.demo-sales-hero h1{max-width:815px!important}
.pricing-authority-page .pricing-hero h1{max-width:695px!important}
.smart-contact-page .support-hero h1{max-width:950px!important}
.hero-home .hero-copy .lead,
main > section.page-hero .lead,
.pricing-authority-page .pricing-hero .lead,
.smart-contact-page .support-hero p{
  max-width:745px;
  font-size:clamp(1.025rem,1.3vw,1.125rem)!important;
  line-height:1.58!important;
  color:var(--fv-text)!important;
  margin-bottom:0!important;
}
.hero-home .hero-copy .lead{max-width:605px}
main > section.page-hero .eyebrow,
.pricing-authority-page .pricing-hero .eyebrow,
.hero-home .hero-copy .eyebrow,
.smart-contact-page .support-hero .eyebrow{
  display:block;width:fit-content;
  padding-left:10px!important;
  border-left:3px solid var(--fv-gold);
  color:#506177!important;
  font-size:.71rem!important;
  line-height:1.45!important;
  font-weight:850!important;
  letter-spacing:.105em!important;
}
main > section.page-hero .breadcrumb,
.pricing-authority-page .page-hero .breadcrumb{
  margin:0 0 20px!important;
  font-size:.8125rem!important;
  color:#66788B!important;
  line-height:1.4;
}
main > section.page-hero .breadcrumb a,
.pricing-authority-page .page-hero .breadcrumb a{color:#506177!important}
/* Clear hierarchy on Produk/Harga; pale right panel instead of dark fill. */
main > section.page-hero[class="page-hero"] .page-hero-grid,
.pricing-authority-page .pricing-hero .page-hero-grid{
  grid-template-columns:minmax(0,1.09fr) minmax(0,.91fr)!important;
  align-items:center!important;
  gap:36px!important;
}
main > section.page-hero[class="page-hero"] .page-panel,
.pricing-authority-page .pricing-hero .page-panel{
  background:#FFFFFF!important;
  border:1px solid var(--fv-line)!important;
  border-radius:19px!important;
  padding:24px 28px!important;
  color:var(--fv-text)!important;
  box-shadow:none!important;
  align-self:center!important;
}
main > section.page-hero[class="page-hero"] .page-panel strong,
.pricing-authority-page .pricing-hero .page-panel strong{
  color:var(--fv-navy)!important;
  font-size:1.06rem!important;
  font-weight:800;
}
main > section.page-hero[class="page-hero"] .page-panel ul,
.pricing-authority-page .pricing-hero .page-panel ul{
  margin:11px 0 0!important;
  color:var(--fv-text)!important;
  font-size:.94rem!important;
  line-height:1.52!important;
}
main > section.page-hero[class="page-hero"] .page-panel li,
.pricing-authority-page .pricing-hero .page-panel li{margin:6px 0!important}
.pricing-authority-page .pricing-principles .kicker{
  color:#53647A!important;font-size:.7rem!important;
}
.pricing-authority-page .pricing-hero-trust{
  margin-top:20px!important;gap:7px!important;
}
.pricing-authority-page .pricing-hero-trust span{
  background:#FFFFFF!important;
  border:1px solid #E2E7EC!important;
  color:#3D526B!important;
  box-shadow:none!important;
}
/* Demo & PDF: actual choice and utility show above the fold. */
main > section.page-hero.demo-sales-hero .container{
  width:min(1180px,calc(100% - 40px));
}
main > section.page-hero.demo-sales-hero .lead{max-width:825px!important}
main > section.page-hero.demo-sales-hero .demo-reassurance{
  max-width:845px!important;
  margin-top:19px!important;padding:12px 16px!important;
  border:1px solid #E0E7ED!important;border-radius:12px!important;
  background:#FFFFFF!important;color:#46596D!important;
  box-shadow:none!important;font-size:.875rem!important;line-height:1.52!important;
}
main > section.demo-needs.section{padding-top:37px!important}
main > section.page-hero.pdf-tool-hero{padding-top:41px!important;padding-bottom:40px!important}
main > section.pdf-tool-section.section{padding-top:29px!important}
main > section.page-hero.public-hero{padding-top:41px!important;padding-bottom:39px!important}
/* Contact page stays soft gray/white, with Proof-scale H1. */
.smart-contact-page .support-choice-section{padding-top:23px!important}
.smart-contact-page .support-choice-card h2{
  font-size:clamp(1.7rem,2.55vw,2.2rem)!important;
  line-height:1.09!important;color:var(--fv-navy)!important;
}
/* Supporting section titles never visually exceed the page H1. */
main .section-head h2{
  font-size:clamp(1.8rem,2.6vw,2.25rem)!important;
  line-height:1.2!important;letter-spacing:-.031em!important;
}
@media(max-width:860px){
  .hero-home.public-hero{padding:36px 0 38px!important}
  main > section.page-hero[class="page-hero"],
  main > section.page-hero.public-hero,
  main > section.page-hero.demo-sales-hero,
  main > section.page-hero.pdf-tool-hero,
  .pricing-authority-page > section.page-hero.pricing-hero{padding:36px 0 39px!important}
  .smart-contact-page .support-hero{padding:35px 0 28px!important}
  main > section.page-hero[class="page-hero"] .page-hero-grid,
  .pricing-authority-page .pricing-hero .page-hero-grid{
    grid-template-columns:minmax(0,1fr)!important;gap:22px!important;
  }
  main > section.page-hero[class="page-hero"] .page-panel,
  .pricing-authority-page .pricing-hero .page-panel{padding:20px 22px!important}
}
@media(max-width:600px){
  .hero-home .hero-copy h1,
  main > section.page-hero[class="page-hero"] h1,
  main > section.page-hero.public-hero h1,
  main > section.page-hero.demo-sales-hero h1,
  main > section.page-hero.pdf-tool-hero h1,
  .pricing-authority-page .pricing-hero h1,
  .smart-contact-page .support-hero h1{
    font-size:clamp(2.05rem,9.2vw,2.4375rem)!important;
    line-height:1.14!important;margin:11px 0 14px!important;
  }
  main > section.page-hero[class="page-hero"],
  main > section.page-hero.public-hero,
  main > section.page-hero.demo-sales-hero,
  main > section.page-hero.pdf-tool-hero,
  .pricing-authority-page > section.page-hero.pricing-hero{padding:28px 0 32px!important}
  .hero-home.public-hero{padding:30px 0 33px!important}
  .smart-contact-page .support-hero{padding:30px 0 23px!important}
  main > section.page-hero .lead,
  .pricing-authority-page .pricing-hero .lead,
  .hero-home .hero-copy .lead,
  .smart-contact-page .support-hero p{
    font-size:1rem!important;line-height:1.57!important;
  }
  main > section.page-hero[class="page-hero"] .page-panel,
  .pricing-authority-page .pricing-hero .page-panel{padding:17px 19px!important;border-radius:15px!important}
  main > section.page-hero[class="page-hero"] .page-panel ul,
  .pricing-authority-page .pricing-hero .page-panel ul{
    font-size:.875rem!important;line-height:1.48!important;
  }
  main > section.page-hero.demo-sales-hero .demo-reassurance{
    padding:11px 13px!important;font-size:.81rem!important;line-height:1.5!important;
  }
  main > section.demo-needs.section{padding-top:27px!important}
  main > section.pdf-tool-section.section{padding-top:22px!important}
  main .section-head h2{font-size:clamp(1.6rem,7vw,1.95rem)!important}
  .smart-contact-page .support-choice-card h2{
    font-size:clamp(1.75rem,7vw,2rem)!important;
  }
}

/* SMART_FIRSTVIEW_MOBILE_PRICING_COMPACT:
   Preserve the full decision panel, remove redundant marketing chips
   so the actual product prices enter the first mobile viewport sooner. */
@media(max-width:600px){
  .pricing-authority-page .pricing-hero-trust{display:none!important}
  .pricing-authority-page .pricing-hero .page-hero-grid{gap:15px!important}
  .pricing-authority-page > section.page-hero.pricing-hero{padding:24px 0 27px!important}
  .pricing-authority-page .pricing-hero .breadcrumb{margin-bottom:12px!important}
  .pricing-authority-page .pricing-hero .page-panel{padding:15px 17px!important}
  .pricing-authority-page .pricing-hero .page-panel strong{font-size:1rem!important}
  .pricing-authority-page .pricing-hero .page-panel ul{
    font-size:.80rem!important;line-height:1.42!important;margin-top:8px!important
  }
  .pricing-authority-page .pricing-hero .page-panel li{margin:3px 0!important}
  .pricing-authority-page .pricing-cards-section.section{padding-top:30px!important}
}
/* SMART_FIRSTVIEW_HOME_DESKTOP_BALANCE: same Proof scale,
   shorter headline grouping on the split-layout Home. */
@media(min-width:861px){
  .hero-home .hero-copy h1{
    font-size:clamp(2.5rem,3.2vw,2.75rem)!important;
    max-width:660px!important;
  }
}