/* Reference-inspired hero. All text and app screens remain native page content. */
.hero-landscape {
  position: relative;
  isolation: isolate;
  padding: 35px 0 0;
  background: #eef7ff;
}
.hero-landscape::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: 0 0 135px;
  background: linear-gradient(90deg,rgba(255,255,255,.95),rgba(255,255,255,.74) 33%,rgba(255,255,255,.12) 65%,transparent),url('/assets/images/hero-landscape.webp') center bottom / cover;
}
.hero-landscape::after {
  content: "";
  position: absolute;
  z-index: -1;
  height: 205px;
  bottom: 0;
  inset-inline: 0;
  background: linear-gradient(176deg,transparent 0 17%,rgba(255,255,255,.96) 17.3%,#fff 90%);
}
.hero-landscape .container { width: min(1440px,calc(100% - 88px)); }
.hero-landscape .hero-inner {
  grid-template-columns: .88fr 1.12fr;
  min-height: 750px;
  gap: 25px;
}
.hero-landscape .hero-text { padding: 20px 0 70px; }
.hero-landscape h1 { font-size: clamp(40px,4.5vw,68px); letter-spacing: -.065em; }
.hero-landscape .hero-sub { font-size: 20px; max-width: 440px; color: #334e73; }
.hero-landscape .hero-actions { margin-top: 33px; gap: 15px 24px; }
.hero-primary {
  border-radius: 100px;
  background: #087df5;
  box-shadow: 0 12px 32px #047ced25;
  padding: 18px 30px;
  font-size: 16px;
  min-width: 235px;
}
.hero-primary:hover { background: #0968d0; }
.hero-landscape .hero-note { color: #48617f; font-size: 12px; }
.hero-landscape .hero-showcase { height: 720px; width: 100%; margin: 0; }
.hero-landscape .hero-phones { height: 700px; margin: 0; }
.hero-landscape .phone-center { width: 270px; bottom: 0; left: 49%; }
.hero-landscape .phone-left,
.hero-landscape .phone-right { width: 224px; bottom: 14px; }
.hero-landscape .phone-left { left: -1%; transform: perspective(1000px) rotateY(8deg) rotate(-4deg); }
.hero-landscape .phone-right { right: -1%; transform: perspective(1000px) rotateY(-8deg) rotate(4deg); }
.hero-landscape .phone-wrap img {
  border-radius: 39px;
  border: 5px solid #323131;
  outline: 1px solid #c8baa8;
  box-shadow: 2px 2px 0 3px #746b62,5px 5px 0 4px #d7cdc0,0 20px 36px #18365242;
}
.hero-landscape .phone-label { display: none; }
.hero-callout {
  position: absolute;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 194px;
  padding: 14px;
  border: 1px solid rgba(255,255,255,.95);
  border-radius: 20px;
  background: rgba(255,255,255,.92);
  color: #122d5c;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.3;
  letter-spacing: -.025em;
  box-shadow: 0 8px 30px #2453830d;
}
.hero-callout:hover { background: white; box-shadow: 0 8px 30px #24538328; }
.callout-icon { width: 30px; height: 30px; flex-shrink: 0; color: #087df5; }
.callout-arrow { position: absolute; width: 44px; height: 44px; bottom: -38px; left: 33px; color: #087df5; pointer-events: none; }
.callout-cashflow { top: 81px; left: -4%; }
.callout-retirement { top: -5px; left: 33%; width: 202px; }
.callout-retirement .callout-arrow { left: auto; right: -30px; bottom: -20px; }
.callout-brokerage { top: 57px; right: -1%; width: 192px; }
.callout-brokerage .callout-icon,.callout-brokerage .callout-arrow { color: #158e50; }
.callout-brokerage .callout-arrow { transform: scaleX(-1); }
.hero-forecast-motif { position: absolute; inset-inline: 0; bottom: 125px; width: 100%; height: 230px; z-index: -1; opacity: .65; }
.hero-landscape .hero-planner-summaries {
  border: 0;
  padding: 32px 0 38px;
  margin-top: 0;
  gap: 30px;
  position: relative;
}
.hero-landscape .hero-planner-summary,
.hero-landscape .hero-planner-summary:first-child {
  padding: 0;
  border: 0;
  display: flex;
  gap: 16px;
  align-items: flex-start;
  font-size: 14px;
}
.summary-icon { display: grid; place-items: center; width: 58px; height: 58px; flex-shrink: 0; border-radius: 16px; background: linear-gradient(140deg,#1698ff,#0069ed); color: white; box-shadow: 0 7px 18px #076ad21a; }
.summary-icon svg { width: 30px; height: 30px; }
.summary-retirement .summary-icon { background: linear-gradient(140deg,#28d877,#0b9e45); }
.summary-brokerage .summary-icon { background: linear-gradient(140deg,#ffaf35,#ef6f13); }
.summary-copy { display: flex; flex-direction: column; gap: 3px; }
.summary-copy strong { font-size: 23px; font-weight: 750; color: #122746; letter-spacing: -.035em; line-height: 1.2; }
.summary-copy b { font-size: 13px; font-weight: 650; line-height: 1.45; color: #18365d; }
.summary-copy>span { font-size: 12px; font-weight: 400; line-height: 1.6; color: #526c8c; }
.hero-planner-summary:hover .summary-copy strong { color: #087df5; }
#whatif-heading { font-size: clamp(50px,6vw,76px); color: #122d5c; }
@media(min-width:1600px) {
  .hero-landscape .hero-inner { min-height: 790px; }
  .hero-landscape .hero-showcase { height: 750px; }
  .hero-landscape .hero-phones { height: 735px; }
  .hero-landscape .phone-center { width: 285px; }
  .hero-landscape .phone-left,.hero-landscape .phone-right { width: 240px; }
  .hero-callout { font-size: 14px; width: 210px; }
}
@media(max-width:1200px) and (min-width:941px) {
  .hero-landscape .container { width: calc(100% - 64px); }
  .hero-landscape .hero-inner { grid-template-columns: .9fr 1.1fr; min-height: 660px; gap: 10px; }
  .hero-landscape h1 { font-size: 45px; }
  .hero-landscape .hero-sub { font-size: 18px; max-width: 360px; }
  .hero-landscape .hero-showcase { height: 650px; }
  .hero-landscape .hero-phones { height: 620px; }
  .hero-landscape .phone-center { width: 228px; }
  .hero-landscape .phone-left,.hero-landscape .phone-right { width: 183px; bottom: 17px; }
  .hero-callout { font-size: 11px; width: 160px; padding: 12px; gap: 8px; border-radius: 16px; }
  .callout-icon { width: 23px; height: 23px; }
  .callout-cashflow { left: -6%; top: 110px; }
  .callout-retirement { top: 5px; left: 25%; }
  .callout-brokerage { right: -2%; top: 110px; }
  .hero-landscape .hero-planner-summaries { gap: 22px; }
  .summary-icon { width: 46px; height: 46px; border-radius: 13px; }
  .summary-copy strong { font-size: 20px; }
}
@media(max-width:940px) {
  .hero-landscape { padding-top: 45px; }
  .hero-landscape::before { inset: 0 0 160px; background-position: center bottom; }
  .hero-landscape .container { width: calc(100% - 64px); }
  .hero-landscape .hero-inner { grid-template-columns: 1fr; gap: 28px; min-height: 0; }
  .hero-landscape .hero-text { padding: 0; }
  .hero-landscape h1 { font-size: 59px; }
  .hero-landscape .hero-sub { max-width: 560px; margin-inline: auto; }
  .hero-landscape .hero-showcase { width: min(650px,100%); height: 760px; margin: auto; }
  .hero-landscape .hero-phones { height: 730px; }
  .hero-landscape .phone-center { width: 270px; }
  .hero-landscape .phone-left,.hero-landscape .phone-right { width: 215px; }
  .callout-cashflow { top: 105px; left: 0; width: 180px; }
  .callout-retirement { top: 10px; left: 32%; width: 200px; }
  .callout-brokerage { top: 105px; right: 0; width: 180px; }
  .hero-landscape .hero-planner-summaries { gap: 20px; }
  .hero-landscape .hero-planner-summary { flex-direction: column; gap: 13px; }
  .summary-copy strong { font-size: 21px; }
  .hero-forecast-motif { bottom: 200px; }
}
@media(max-width:640px) {
  .hero-landscape .container { width: calc(100% - 40px); }
  .hero-landscape::before { inset: 0 0 450px; background-image: linear-gradient(180deg,#fffffff5,rgba(255,255,255,.86) 28%,rgba(255,255,255,.15) 65%,#ffffffaa),url('/assets/images/hero-landscape-mobile.webp'); }
  .hero-landscape::after { height: 480px; background: linear-gradient(176deg,transparent 0 5%,#fff 5.4%); }
  .hero-landscape h1 { font-size: clamp(36px,9vw,54px); }
  .hero-landscape .hero-text { padding-bottom: 0; }
  .hero-landscape .hero-sub { font-size: 17px; max-width: 440px; }
  .hero-landscape .hero-actions { margin-top: 25px; gap: 10px; }
  .hero-landscape .hero-note { font-size: 11px; }
  .hero-landscape .hero-inner { gap: 32px; }
  .hero-landscape .hero-showcase { height: auto; padding: 0; display: flex; flex-direction: column; gap: 12px; align-items: center; }
  .hero-landscape .hero-phones { height: auto; width: 100%; margin-bottom: 20px; }
  .hero-landscape .phone-center { position: relative; width: min(76vw,300px); left: auto; bottom: auto; transform: none; }
  .hero-landscape .phone-left,.hero-landscape .phone-right { display: none; }
  .hero-callout,.callout-cashflow,.callout-retirement,.callout-brokerage { position: relative; inset: auto; width: 100%; max-width: 400px; border-radius: 15px; background: #fffffff5; font-size: 14px; padding: 15px 18px; gap: 14px; box-shadow: 0 4px 18px #163b6910; }
  .callout-icon { width: 28px; height: 28px; }
  .callout-arrow { display: none; }
  .hero-landscape .hero-planner-summaries { grid-template-columns: 1fr; padding: 36px 0 30px; margin-top: 25px; gap: 0; }
  .hero-landscape .hero-planner-summary,.hero-landscape .hero-planner-summary:first-child { flex-direction: row; padding: 22px 0; gap: 17px; }
  .hero-landscape .hero-planner-summary+.hero-planner-summary { border-top: 1px solid #dce6f1; }
  .summary-icon { width: 50px; height: 50px; border-radius: 14px; }
  .summary-copy strong { font-size: 22px; }
  .summary-copy b { font-size: 12px; }
  .summary-copy>span { font-size: 12px; }
  .hero-forecast-motif { display: none; }
}
@media(max-width:374px) {
  .hero-landscape .container { width: calc(100% - 32px); }
  .hero-landscape h1 { font-size: 35px; }
  .hero-landscape .hero-note { font-size: 10px; }
  .hero-callout { font-size: 13px; }
}