/* ThryveMS solution landing: product-focused hero.
 * Deliberately static. Scroll-driven product storytelling starts in #system.
 * Uses Thync & Thryve's Montserrat / Inter and approved landing palette.
 */
.product-hero{
  min-height:0!important;
  padding:clamp(135px,15vh,180px) 0 110px!important;
  background:#fff;position:relative;overflow:hidden;
}
.product-hero-grid{display:grid;grid-template-columns:minmax(0,.96fr) minmax(0,1.04fr);gap:clamp(28px,4vw,70px);align-items:center}
.product-hero-kicker{font:700 10px/1.6 Montserrat,sans-serif;letter-spacing:.13em;color:#0B7D6B;margin:0 0 24px}
.product-hero h1{
  font:700 clamp(42px,4.3vw,74px)/1.08 Montserrat,sans-serif!important;
  letter-spacing:-.055em!important;margin:0!important;max-width:680px
}
.product-hero h1 span{display:block;color:#0B7D6B}
.product-hero-desc{font:400 clamp(15px,1.12vw,18px)/1.72 Inter,sans-serif;color:#4f655c;margin:24px 0 30px;max-width:590px}
.product-hero-cta{display:flex;align-items:center;flex-wrap:wrap;gap:12px}
.product-hero-cta .btn{font-size:13px;min-height:48px}
.product-hero-cta .primary{background:#0A4639}
.product-hero-cta .ghost{background:white;border:1px solid #ccdcd3}
.product-hero-note{font:500 12px/1.6 Inter,sans-serif;color:#597269;margin:25px 0 0}
.product-hero-visual{min-width:0}
.product-hero-browser{background:white;border:1px solid #d2ded6;border-radius:20px;overflow:hidden;box-shadow:0 28px 65px rgba(10,70,57,.14);transform:rotate(-1deg);transition:transform .2s ease}
.product-hero-browser:hover{transform:rotate(0)}
.product-hero-chrome{display:flex;align-items:center;justify-content:space-between;gap:10px;background:#f5f8f6;border-bottom:1px solid #e0ebe3;padding:0 15px;height:39px;font:500 9px Inter,sans-serif;color:#62786b}
.product-hero-ui{display:grid;grid-template-columns:122px minmax(0,1fr);height:445px}
.product-hero-sidebar{background:#0A4639;color:white;padding:17px 10px;display:flex;flex-direction:column;gap:6px}
.product-hero-sidebar img{width:90px;height:30px;object-fit:contain;object-position:left;filter:brightness(0) invert(1);margin-bottom:15px}
.product-hero-sidebar span{font:500 10px Inter,sans-serif;padding:9px 8px;border-radius:7px;opacity:.75}
.product-hero-sidebar span.selected{opacity:1;background:rgba(255,255,255,.16);font-weight:700}
.product-hero-screen{padding:18px 16px;background:#f6f8f6;color:#163d30;overflow:hidden}
.product-hero-screen-label{font:700 8px Montserrat,sans-serif;letter-spacing:.13em;color:#748b7e}
.product-hero-screen-title{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:13px 0}
.product-hero-screen-title strong{font:700 15px Montserrat,sans-serif}.product-hero-screen-title small{font:500 9px Inter,sans-serif;color:#77897d}
.product-hero-readiness{display:grid;grid-template-columns:1fr 1.15fr;gap:12px;background:#fff;border:1px solid #e3eae5;border-radius:12px;padding:15px;min-height:135px}
.product-hero-readiness small,.product-hero-metrics small{display:block;font:500 9px/1.4 Inter,sans-serif;color:#698075}
.product-hero-readiness strong{display:block;font:700 48px/1.05 Montserrat,sans-serif;letter-spacing:-.06em;margin:7px 0}
.product-hero-readiness sup{font-size:20px}
.hero-attention{display:inline-block;background:#fff2d5;color:#835b17;padding:5px 7px;border-radius:6px;font:700 8px Inter,sans-serif}
.product-hero-status{display:flex;flex-direction:column;justify-content:center;gap:10px}
.hero-bars{display:flex;gap:4px}.hero-bars i{display:block;height:8px;flex:1;border-radius:5px}
.hero-bars i:nth-child(1){flex:5;background:#438b66}.hero-bars i:nth-child(2){flex:2;background:#e4b352}.hero-bars i:nth-child(3){background:#ce7c65}
.hero-line{background:#e9eeeb;height:6px;border-radius:20px}.hero-line i{display:block;background:#6eaa89;width:80%;height:100%;border-radius:20px}.hero-line.second i{width:55%}
.product-hero-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:9px}
.product-hero-metrics>div{background:white;border:1px solid #e3eae5;border-radius:10px;padding:12px 9px;min-width:0}
.product-hero-metrics strong{display:block;font:700 23px Montserrat,sans-serif;margin-top:5px}
.product-hero-activity{margin-top:9px;background:white;border:1px solid #e3eae5;border-radius:10px;padding:12px 14px}
.product-hero-activity>div{display:flex;justify-content:space-between;gap:10px;font:700 10px Montserrat,sans-serif;margin-bottom:4px}
.product-hero-activity>div span{font:500 9px Inter,sans-serif;color:#77897d}
.product-hero-activity p{display:flex;justify-content:space-between;gap:10px;margin:0;padding:7px 0;border-top:1px solid #edf1ed;font:500 9px Inter,sans-serif;color:#647c6f}
.product-hero-activity p span{color:#89682b}
.product-hero-caption{margin:14px 5px 0;text-align:right;font:500 11px Inter,sans-serif;color:#597167}
.system{scroll-margin-top:100px}
.system .product-sticky{top:113px}
.problem{margin-top:0!important}
@media(max-width:1100px){
 .product-hero-grid{grid-template-columns:1fr;gap:42px}
 .product-hero-copy{max-width:820px}
 .product-hero h1{font-size:clamp(48px,7vw,76px)!important}
 .product-hero-visual{max-width:820px;width:100%;margin:auto}
}
@media(max-width:760px){
 .product-hero{padding:114px 0 75px!important}
 .product-hero-grid{gap:30px}
 .product-hero h1{font-size:clamp(39px,10.4vw,55px)!important}
 .product-hero-kicker{font-size:9px;margin-bottom:18px}
 .product-hero-desc{font-size:15px;line-height:1.65;margin:18px 0 23px}
 .product-hero-cta .btn{width:100%}
 .product-hero-note{font-size:11px}
 .product-hero-browser{transform:none;border-radius:13px}
 .product-hero-ui{grid-template-columns:73px minmax(0,1fr);height:355px}
 .product-hero-sidebar{padding:12px 5px;gap:4px}
 .product-hero-sidebar img{width:63px;height:24px;margin-bottom:10px}
 .product-hero-sidebar span{font-size:7px;padding:7px 4px}
 .product-hero-screen{padding:11px 9px}
 .product-hero-screen-label{font-size:6px}
 .product-hero-screen-title strong{font-size:11px}
 .product-hero-screen-title small{font-size:7px}
 .product-hero-readiness{padding:9px;gap:5px;min-height:112px}
 .product-hero-readiness small,.product-hero-metrics small{font-size:7px}
 .product-hero-readiness strong{font-size:32px}
 .product-hero-metrics>div{padding:8px 6px}
 .product-hero-metrics strong{font-size:17px}
 .product-hero-activity{padding:9px}
 .product-hero-activity p{font-size:7px}
 .product-hero-caption{font-size:10px}
}
@media(prefers-reduced-motion:reduce){.product-hero-browser{transform:none;transition:none}}