/* Landing visual density pass, Oct 2026.
   Intentional scoped overrides: keep playback logic, auth and live data untouched. */

/* A: One illustrated story with TWO visually separate cards. */
body #problem-story.gc-loss-story{
  padding:55px 0 46px !important;
}
body #problem-story .gc-loss-head{max-width:760px;margin-bottom:23px !important}
body #problem-story .gc-loss-head h2{font-size:clamp(28px,4vw,43px) !important;line-height:1.12 !important}
body #problem-story .gc-loss-stage{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  border-radius:0 !important;
  overflow:visible !important;
}
body #problem-story .gc-loss-topbar{
  background:#111c32 !important;
  border:1px solid #2d3b55 !important;
  border-radius:15px 15px 0 0 !important;
  padding:12px 15px !important;
}
body #problem-story .gc-loss-progress{
  border-radius:0 0 6px 6px;
  overflow:hidden;
  margin-bottom:14px;
}
body #problem-story .gc-loss-grid{
  display:grid !important;
  grid-template-columns:minmax(0,1.55fr) minmax(255px,.9fr) !important;
  gap:15px !important;
  align-items:stretch !important;
  min-height:0 !important;
}
body #problem-story .gc-loss-phonezone,
body #problem-story .gc-loss-side{
  border:1px solid rgba(185,201,235,.16) !important;
  border-radius:20px !important;
  background:linear-gradient(160deg,rgba(29,40,66,.90),rgba(11,23,43,.94)) !important;
  box-shadow:0 16px 36px rgba(1,8,23,.18) !important;
  min-width:0 !important;
}
body #problem-story .gc-loss-phonezone{
  display:grid !important;
  grid-template-columns:minmax(112px,.43fr) minmax(0,1fr) !important;
  gap:12px !important;
  align-items:center !important;
  justify-content:stretch !important;
  padding:14px !important;
}
body #problem-story .gc-owner-scene{
  box-sizing:border-box !important;
  width:100% !important;
  height:328px !important;
  min-height:0 !important;
  max-height:328px !important;
  padding:12px 8px !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:0 !important;
  overflow:hidden !important;
  border-radius:15px !important;
}
body #problem-story .gc-owner-cues{min-height:64px !important;max-height:77px !important;gap:5px !important}
body #problem-story .gc-owner-scene .gc-owner-pressure{padding:4px 6px !important;font-size:8px !important}
body #problem-story .gc-owner-scene .gc-owner-pressure.three{display:none !important}
body #problem-story .gc-owner-scene .gc-owner-solved{
  max-width:126px !important;font-size:10px !important;
  line-height:1.35 !important;padding:8px 6px !important;
}
body #problem-story .gc-owner-scene .gc-owner-visual{
  width:min(100%,110px) !important;
  max-width:110px !important;
  height:125px !important;
  aspect-ratio:auto !important;
  margin:6px auto 0 !important;
  flex-shrink:0 !important;
}
body #problem-story .gc-owner-scene .gc-owner-title{
  margin:7px 0 0 !important;font-size:10px !important;
  line-height:1.3 !important;text-align:center !important;
}
body #problem-story .gc-owner-scene .gc-owner-sub{
  font-size:8px !important;line-height:1.4 !important;
  margin:3px 0 0 !important;text-align:center !important;
  padding:0 !important;max-width:160px !important;
}
body #problem-story .gc-loss-phone{
  box-sizing:border-box !important;
  width:100% !important;
  min-width:0 !important;
  min-height:0 !important;
  height:328px !important;
  max-height:328px !important;
  border-width:4px !important;
  border-radius:17px !important;
  display:flex !important;
  flex-direction:column !important;
}
body #problem-story .gc-loss-phonehead.gc-loss-premium-head{
  box-sizing:border-box !important;
  min-height:50px !important;
  height:50px !important;
  flex:0 0 50px !important;
}
body #problem-story .gc-loss-chat{
  box-sizing:border-box !important;
  flex:1 1 auto !important;
  height:auto !important;
  min-height:0 !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  padding:9px !important;
  scrollbar-width:thin;
  overscroll-behavior:contain;
}
body #problem-story .gc-loss-msg{
  margin-bottom:7px !important;padding:7px 9px !important;
  font-size:10px !important;max-width:90% !important;
}
body #problem-story .gc-loss-composer{
  flex:0 0 42px !important;height:42px !important;padding:6px 9px !important;
}
body #problem-story .gc-loss-side{
  display:flex !important;
  flex-direction:column !important;
  align-items:stretch !important;
  justify-content:center !important;
  padding:20px !important;
}
body #problem-story .gc-loss-side-label{color:#b5a4d4 !important;font-size:10px !important}
body #problem-story .gc-loss-side h3{font-size:clamp(20px,2.2vw,27px) !important;line-height:1.18 !important}
body #problem-story .gc-loss-side p{font-size:11.5px !important;margin-bottom:12px !important;line-height:1.55 !important}
body #problem-story .gc-loss-metrics{gap:7px !important;grid-template-columns:repeat(2,minmax(0,1fr)) !important}
body #problem-story .gc-loss-metric{
  align-items:flex-start !important;flex-direction:column !important;
  min-height:60px !important;gap:4px !important;padding:10px 11px !important;
}
body #problem-story .gc-loss-metric span{font-size:10px !important;line-height:1.2 !important}
body #problem-story .gc-loss-metric b{font-size:17px !important;line-height:1.15 !important}
body #problem-story .gc-loss-handoff{margin-top:10px !important;padding:10px 11px !important}
body #problem-story .gc-loss-punch{margin-top:19px !important;font-size:12.5px !important}

/* B: compact dashboard — real SVG channel/AI identifiers in sample activity. */
body section.gc-story.gc-dashboard{padding:58px 0 60px !important}
body .gc-dashboard .gc-story-head{max-width:720px;margin-left:auto;margin-right:auto}
body .gc-dashboard .gc-story-head h2{font-size:clamp(30px,4vw,44px) !important;line-height:1.12 !important}
body .gc-dashboard .gc-story-head p{font-size:13px !important}
body .gc-dashboard .gc-dash{
  width:min(980px,100%) !important;
  margin:23px auto 0 !important;
  grid-template-columns:132px minmax(0,1fr) !important;
  border-radius:19px !important;
}
body .gc-dashboard .gc-dash>aside{padding:16px 11px !important}
body .gc-dashboard .gc-dash>main{padding:15px !important;min-width:0 !important}
body .gc-dashboard .gc-dash>main>header h3{font-size:16px !important}
body .gc-dashboard .gc-metrics{margin-top:12px !important;gap:8px !important}
body .gc-dashboard .gc-metrics article{padding:10px !important;border-radius:11px !important;min-width:0 !important}
body .gc-dashboard .gc-metrics b{font-size:21px !important;margin:3px 0 !important}
body .gc-dashboard .gc-dash-bottom{margin-top:8px !important;gap:8px !important;grid-template-columns:1.15fr 1fr !important}
body .gc-dashboard .gc-pipeline,
body .gc-dashboard .gc-activity{padding:12px !important;min-width:0 !important}
body .gc-dashboard .gc-pipeline svg{height:94px !important;display:block !important;margin:7px 0 !important}
body .gc-dashboard .gc-activity p{margin:7px 0 !important;gap:8px !important;min-width:0 !important}
body .gc-dashboard .gc-activity b{font-size:9px !important}
body .gc-dashboard .gc-activity small{font-size:8px !important}
body .gc-dashboard .gc-activity-icon{
  display:grid !important;place-items:center !important;
  width:30px !important;height:30px !important;
  min-width:30px !important;border-radius:10px !important;
  flex:0 0 30px !important;line-height:0 !important;color:#fff !important;
}
body .gc-dashboard .gc-activity-icon svg{width:20px !important;height:20px !important;display:block !important}
body .gc-dashboard .gc-activity-icon.wa{background:#20c764 !important}
body .gc-dashboard .gc-activity-icon.ig{background:linear-gradient(35deg,#ffcc52 1%,#fd5949 32%,#d6249f 62%,#515bd4 99%) !important}
body .gc-dashboard .gc-activity-icon.ai{background:linear-gradient(145deg,#7856db,#4d53df) !important}
body .gc-dashboard .gc-activity p>span:last-child{min-width:0 !important}
body .gc-dashboard .gc-activity b,
body .gc-dashboard .gc-activity small{overflow-wrap:anywhere}

/* C: CTA inherits the same subtle near-white indigo/blue hero gradient. */
body section.cta{
  background:radial-gradient(circle at 16% 0%,rgba(99,102,241,.14),transparent 36%),
             linear-gradient(180deg,#f7fcff 0%,#eef8ff 57%,#ffffff 100%) !important;
  padding:60px 18px !important;
  border-top:1px solid #e2eaf7 !important;
  color:#14213b !important;
}
body section.cta .cta-box{
  max-width:1000px !important;
  margin:0 auto !important;
  min-height:0 !important;
  padding:48px 28px !important;
  background:radial-gradient(circle at 50% 0,rgba(159,129,237,.13),transparent 54%),
             linear-gradient(165deg,#fff,#f5f9ff) !important;
  border:1px solid #dce4f0 !important;
  border-radius:23px !important;
  box-shadow:0 24px 50px rgba(57,67,115,.09) !important;
  color:#15233a !important;
}
body section.cta .cta-box h2{
  color:#18253c !important;
  font-size:clamp(30px,4vw,44px) !important;
  line-height:1.15 !important;
  margin:0 auto 14px !important;
}
body section.cta .cta-box p{
  color:#51627d !important;
  font-size:clamp(13px,1.65vw,16px) !important;
  line-height:1.65 !important;
  margin:0 auto 24px !important;
}
body section.cta .cta-btn-wrap{margin:20px 0 0 !important}
body section.cta .cta-box .btn-primary{
  color:white !important;background:#6366f1 !important;
  border-color:#6366f1 !important;
  box-shadow:0 9px 23px rgba(99,102,241,.22) !important;
}
body section.cta .cta-box .btn-primary:hover{background:#4f46e5 !important}

@media(max-width:920px){
  body #problem-story .gc-loss-grid{grid-template-columns:1fr !important}
  body #problem-story .gc-loss-phonezone{grid-template-columns:minmax(110px,.34fr) minmax(0,1fr) !important}
  body #problem-story .gc-loss-side{min-height:0 !important}
  body #problem-story .gc-loss-side .gc-loss-metrics{grid-template-columns:repeat(4,minmax(0,1fr)) !important}
  body .gc-dashboard .gc-dash{grid-template-columns:1fr !important}
  body .gc-dashboard .gc-dash>aside{display:none !important}
}
@media(max-width:620px){
  body #problem-story.gc-loss-story{padding:40px 0 35px !important}
  body #problem-story .gc-loss-wrap{width:min(100% - 24px,1120px) !important}
  body #problem-story .gc-loss-head{margin-bottom:18px !important}
  body #problem-story .gc-loss-head h2{font-size:31px !important;letter-spacing:-1px !important}
  body #problem-story .gc-loss-head p{font-size:12px !important}
  body #problem-story .gc-loss-grid{grid-template-columns:1fr !important;gap:12px !important}
  body #problem-story .gc-loss-topbar{padding:9px 10px !important;gap:8px !important}
  body #problem-story .gc-loss-tab{font-size:8px !important;padding:6px 8px !important}
  body #problem-story .gc-loss-replay{font-size:9px !important;padding:7px 8px !important}
  body #problem-story .gc-loss-phonezone{
    grid-template-columns:1fr !important;
    gap:9px !important;
    padding:10px !important;
    border-radius:17px !important;
  }
  body #problem-story .gc-owner-scene{
    box-sizing:border-box !important;
    width:100% !important;
    height:110px !important;min-height:0 !important;max-height:110px !important;
    display:grid !important;
    grid-template-columns:92px minmax(0,1fr) !important;
    grid-template-rows:53px 1fr !important;
    gap:0 8px !important;
    padding:7px 10px !important;
    align-items:center !important;justify-items:start !important;
    overflow:hidden !important;
  }
  body #problem-story .gc-owner-scene .gc-owner-visual{
    grid-column:1 !important;grid-row:1/3 !important;
    width:78px !important;max-width:78px !important;height:94px !important;
    margin:0 !important;
  }
  body #problem-story .gc-owner-cues{
    grid-column:2 !important;grid-row:1 !important;
    min-height:0 !important;width:100% !important;
    max-height:49px !important;align-content:center !important;
    justify-items:start !important;
  }
  body #problem-story .gc-owner-scene .gc-owner-pressure{
    font-size:7px !important;padding:3px 5px !important;
  }
  body #problem-story .gc-owner-scene .gc-owner-pressure.two{display:none !important}
  body #problem-story .gc-owner-scene .gc-owner-solved{
    max-width:100% !important;
    width:max-content !important;
    top:50% !important;left:0 !important;right:auto !important;
    transform:translateY(-50%) !important;
    font-size:9px !important;padding:5px 8px !important;
  }
  body #problem-story .gc-owner-scene.is-solved .gc-owner-solved{transform:translateY(-50%) !important}
  body #problem-story .gc-owner-scene .gc-owner-title{
    grid-column:2 !important;grid-row:2 !important;
    font-size:10px !important;margin:0 !important;
    text-align:left !important;align-self:start !important;
  }
  body #problem-story .gc-owner-scene .gc-owner-sub{display:none !important}
  body #problem-story .gc-loss-phone{
    height:263px !important;max-height:263px !important;min-height:0 !important;
    border-radius:15px !important;
  }
  body #problem-story .gc-loss-phonehead.gc-loss-premium-head{
    min-height:46px !important;height:46px !important;flex-basis:46px !important;
  }
  body #problem-story .gc-loss-chat{padding:8px !important}
  body #problem-story .gc-loss-msg{font-size:10px !important;padding:7px 8px !important;max-width:94% !important}
  body #problem-story .gc-loss-composer{height:40px !important;flex-basis:40px !important}
  body #problem-story .gc-loss-side{
    padding:16px !important;border-radius:17px !important;
  }
  body #problem-story .gc-loss-side h3{font-size:22px !important;margin-bottom:8px !important}
  body #problem-story .gc-loss-side p{font-size:11px !important;margin-bottom:10px !important}
  body #problem-story .gc-loss-side .gc-loss-metrics{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:6px !important;
  }
  body #problem-story .gc-loss-metric{min-height:54px !important;padding:9px !important}
  body #problem-story .gc-loss-metric b{font-size:16px !important}
  body #problem-story .gc-loss-punch{font-size:11px !important;margin-top:13px !important}

  body section.gc-story.gc-dashboard{padding:43px 0 46px !important}
  body .gc-dashboard .gc-story-head h2{font-size:31px !important}
  body .gc-dashboard .gc-story-head p{font-size:12px !important}
  body .gc-dashboard .gc-dash{
    margin-top:17px !important;
    grid-template-columns:1fr !important;border-radius:17px !important;
  }
  body .gc-dashboard .gc-dash>aside{display:none !important}
  body .gc-dashboard .gc-dash>main{padding:12px !important}
  body .gc-dashboard .gc-dash>main>header h3{font-size:14px !important}
  body .gc-dashboard .gc-metrics{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:7px !important;margin-top:10px !important;
  }
  body .gc-dashboard .gc-metrics article{padding:9px !important;min-height:65px !important}
  body .gc-dashboard .gc-metrics b{font-size:20px !important}
  body .gc-dashboard .gc-metrics small{font-size:8px !important}
  body .gc-dashboard .gc-dash-bottom{grid-template-columns:1fr !important;gap:7px !important}
  body .gc-dashboard .gc-pipeline,body .gc-dashboard .gc-activity{padding:10px !important}
  body .gc-dashboard .gc-pipeline svg{height:76px !important;margin:3px 0 !important}
  body .gc-dashboard .gc-activity p{margin:5px 0 !important;gap:7px !important}
  body .gc-dashboard .gc-activity-icon{width:27px !important;height:27px !important;min-width:27px !important;flex-basis:27px !important}
  body .gc-dashboard .gc-activity-icon svg{width:18px !important;height:18px !important}
  body .gc-dashboard .gc-activity b{font-size:10px !important}
  body .gc-dashboard .gc-activity small{font-size:8px !important}

  body section.cta{padding:36px 16px !important}
  body section.cta .cta-box{padding:40px 22px !important;border-radius:18px !important}
  body section.cta .cta-box h2{font-size:clamp(27px,7vw,34px) !important;line-height:1.17 !important}
  body section.cta .cta-box p{font-size:13px !important;line-height:1.65 !important;margin-bottom:19px !important}
  body section.cta .cta-box .btn-primary{font-size:13px !important;padding:13px 19px !important}
}
@media(prefers-reduced-motion:reduce){
  body #problem-story .gc-loss-chat{scroll-behavior:auto !important}
  body .gc-dashboard .gc-pipeline .line{animation:none !important;stroke-dashoffset:0 !important}
}