/* ============================================================
   SITE-TEN v4 — APPLE ENTERPRISE PRESENCE LAYER (2026-10-22)
   Don's bar update: "more Apple to it on the visuals — enterprise
   Apple look across everything." Clean-and-correct is not the
   finish line; visual presence is. Loaded AFTER site-ten-v3.css.
   Principles, taken from apple.com product pages:
   - the product visual DOMINATES: wider than the text column,
     larger internal type, deep soft shadow, big radius
   - cinematic spacing: one idea per section, huge quiet gaps
   - minimal copy per visual: the panel is the argument
   ============================================================ */

/* --- hero: copy gets quieter, product gets the stage --- */
.hero{padding:56px 0 30px !important}
.hero h1{font-size:clamp(42px,6vw,76px) !important;letter-spacing:-.035em !important;line-height:1.04 !important}
.hero .lede,.hero .sub{font-size:21px !important;line-height:1.5 !important;max-width:800px !important}
.eyebrow{margin-bottom:22px}
.hero-cta,.cta-row{margin-top:30px}

/* --- the product visual breaks out of the text column --- */
/* NOTE: original per-site CSS carries .hero .hero-visual rules at
   (0,2,0) specificity — match it or width/margins silently lose
   while translate applies, which shoves the panel off-screen. */
.hero .hero-visual{
  width:min(1260px,94vw) !important;
  max-width:none !important;
  margin-left:calc(50% - min(630px,47vw)) !important;
  margin-right:0 !important;
  translate:none;
  margin-top:50px !important;
}
.pv{border-radius:30px;box-shadow:0 40px 110px rgba(16,24,40,.17),0 6px 22px rgba(16,24,40,.07)}
.pv-top{padding:17px 28px;font-size:16px}
.pv-brand{gap:11px}
.pv-mark{width:32px;height:32px;border-radius:9px;font-size:12.5px}
.pv-live{font-size:12.5px}
.pv-grid{grid-template-columns:1.85fr 1fr}
.pv-main{padding:36px 38px 40px}
.pv-side{padding:32px 30px;gap:26px}
.pv h3{font-size:31px;letter-spacing:-.025em;line-height:1.12;margin:8px 0 10px}
.pv-eyebrow{font-size:12px;letter-spacing:.15em}
.pv-copy{font-size:16.5px;line-height:1.6}
.pv-table th{font-size:11.5px;padding:14px 12px}
.pv-table td{font-size:15px;padding:17px 12px;line-height:1.45}
.pv-tname{font-size:15.5px}
.pv-steps{gap:20px;margin-top:24px}
.pv-step-num{width:30px;height:30px;font-size:14px}
.pv-step b{font-size:16.5px}
.pv-step span{font-size:14.5px;line-height:1.5}
.pv-stats{gap:14px}
.pv-stat{padding:20px 18px;border-radius:18px}
.pv-stat b{font-size:31px}
.pv-stat span{font-size:13px}
.pv-row{padding:15px 2px}
.pv-row-name{font-size:16px}
.pv-row-sub{font-size:13.5px}
.pv-chip{font-size:12px;padding:5px 12px}
.pv-note{font-size:13.5px;padding:14px 18px}
.pv-phone{border-radius:40px;padding:30px 20px 34px;max-width:330px}
.pv-bubble{font-size:14.5px;padding:12px 16px;border-radius:19px}
.pv-bar-row{font-size:13.5px}
.pv-progress{height:9px}

/* product page: the detail visual gets the same presence */
main .pv{border-radius:30px}

/* --- cinematic sections: one idea, room to breathe --- */
.section,section{padding:120px 0 !important}
.section h2{font-size:clamp(32px,4vw,47px);letter-spacing:-.03em;line-height:1.1;max-width:22ch}
.section .lede,.section .lead{font-size:21px !important;line-height:1.55 !important;max-width:760px !important;margin-bottom:52px !important}
.grid3,.grid2{gap:22px}
.card{padding:32px 30px;border-radius:22px}
.card h3{font-size:21px;letter-spacing:-.015em}
.card p{font-size:16px;line-height:1.6}
.steps{gap:8px}
.step{padding:26px 0}
.step h3{font-size:20px}
.step p{font-size:16px;line-height:1.6}
.btn{padding:16px 32px !important;font-size:16.5px}
.btn.small{padding:12px 24px;font-size:15px}
.guarantee{padding:52px 48px;border-radius:26px}
.guarantee h2{font-size:34px}
.price-card{padding:38px 34px;border-radius:26px}
.price-card .amount{font-size:52px}
table.checks td{padding:15px 12px;font-size:15.5px}

/* --- footer: quieter, larger, complete --- */
.site-footer{padding:72px 0 44px}
.site-footer h4{font-size:15px;margin-bottom:16px}
.site-footer a{font-size:15px;padding:5px 0}
.site-footer .fine{font-size:13px;margin-top:40px}

@media (max-width:860px){
  /* compact mobile hero so the product visual still enters frame 1 */
  .hero{padding:42px 0 20px !important}
  .hero h1{font-size:clamp(34px,10.5vw,46px) !important;line-height:1.06 !important}
  .hero .lede,.hero .sub{font-size:18px !important;line-height:1.5 !important}
  .eyebrow{margin-bottom:18px}
  .hero .hero-visual{width:94vw !important;margin-left:calc(50% - 47vw) !important;margin-top:34px !important}
  .pv-grid{grid-template-columns:1fr}
  .pv-main{padding:28px 24px 30px}
  .pv-side{padding:26px 24px}
  .pv h3{font-size:26px}
  .section,section{padding:78px 0 !important}
  .section .lede{margin-bottom:38px}
  .guarantee{padding:38px 28px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}