/* Training showcase: fully editable HTML/CSS mockups — no hero screenshot. */
.product-hero { --deep:#12283f; --midnight:#101f35; --sage:#0c7a55;
  background:linear-gradient(110deg,#f7fbff 0%,#edf4fd 38%,#d6e7f7 48%,#172b45 68%,#11283d 100%);
  position:relative;isolation:isolate;overflow:hidden; }
.product-hero:after {content:"";position:absolute;inset:auto -8% -75px -8%;height:175px;
  background:linear-gradient(120deg,#e4effc 0%,#eaf2ff 45%,#143855 67%,#0a533f 100%);
  transform:rotate(-3deg);z-index:-1}
.product-hero__inner {width:min(1530px,calc(100% - 58px)); margin:0 auto;
  min-height:780px;display:grid;grid-template-columns:minmax(370px, 37%) minmax(0, 63%);align-items:center;}
.product-hero__copy {z-index:3;padding:52px 25px 64px 0;align-self:center;}
.product-hero__eyebrow {color:#13895b;text-transform:uppercase;font-weight:850;font-size:.78rem;letter-spacing:.20em;margin-bottom:19px;}
.product-hero h1 {font-size:clamp(2.5rem,3.65vw,3.83rem);font-weight:850;line-height:1.065;letter-spacing:-.052em;
  margin:0 0 25px;color:#10223b;max-width:none;white-space:nowrap;}
.product-hero h1 span {color:#078158;}
.product-hero__lead {color:#4a627e;font-size:1.03rem;line-height:1.7;max-width:510px;margin:0 0 27px;}
.product-hero__features {display:grid;gap:16px;margin-top:27px;}
.product-hero__feature {display:flex;align-items:center;gap:13px;}
.product-hero__feature-icon {width:47px;height:47px;flex:none;border-radius:11px;background:#e6f0ff;color:#2865dd;
  font-size:1.48rem;font-weight:850;display:grid;place-items:center;box-shadow:inset 0 0 0 1px #dceaff;}
.product-hero__feature:nth-child(3) .product-hero__feature-icon {font-size:1.08rem;}
.product-hero__feature strong {display:block;font-size:.99rem;line-height:1.25;color:#11233c;}
.product-hero__feature small {display:block;font-size:.83rem;line-height:1.5;margin-top:3px;color:#5c708b;}
.product-hero__buttons {display:flex;flex-wrap:wrap;align-items:center;gap:17px;margin-top:34px;}
.product-hero__button {display:inline-flex;align-items:center;justify-content:center;gap:20px;border-radius:999px;
  background:linear-gradient(95deg,#1ac56c,#08704e);color:#fff;padding:13px 27px;min-width:212px;min-height:49px;
  box-shadow:0 13px 25px #13865635;text-decoration:none;font-weight:800;font-size:.96rem;}
.product-hero__button:hover {filter:brightness(1.06)}
.product-hero__secondary {font-size:.87rem;font-weight:750;color:#1b446c;text-decoration:underline;}
.product-hero__disclaimer {position:relative;z-index:3;text-align:center;margin:0;padding:12px 25px 16px;
  background:#f8fbffd9;color:#607188;font-size:.71rem;}
.showcase-stage {font-size:12px; position:relative;align-self:stretch; height:760px;min-width:0;perspective:1600px;transform-style:flat;}
.showcase-stage__mesh {position:absolute;inset:0 -80px 0 26%;opacity:.55;pointer-events:none;
 background:radial-gradient(circle at 20% 20%,#5985ad4d 0,transparent 43%),radial-gradient(circle at 80% 65%,#30bd9a35 0,transparent 35%);
 background-size:auto;}
.showcase-stage__mesh:after {content:"";position:absolute;right:0;top:5%;width:44%;height:85%;opacity:.22;
 background-image:radial-gradient(#b4d5ec 1px,transparent 1px);background-size:13px 13px;mask-image:linear-gradient(90deg,transparent,#000)}
.mock-window {position:absolute;overflow:hidden;border:1px solid #92afce;border-radius:13px;background:#fff;
 box-shadow:0 17px 35px #04172b80,0 3px 7px #0c254b40;transform-style:flat;backface-visibility:hidden;color:#172943;
 transition:transform .22s ease,box-shadow .22s ease;}
.mock-window:hover {box-shadow:0 22px 48px #04172ba6,0 6px 10px #0c254b55;}
.mock-chrome {height:27px;background:#132940;color:#e7f1ff;display:flex;align-items:center;gap:10px;padding:0 12px;font-size:.73rem;}
.mock-chrome__dots {display:flex;gap:4px;}
.mock-chrome__dots i {width:7px;height:7px;border-radius:50%;background:#f76157;}
.mock-chrome__dots i:nth-child(2) {background:#f9c652;}.mock-chrome__dots i:nth-child(3){background:#46c776;}
.mock-chrome__name {white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:700;}
.mock-chrome__right {font-size:.75rem;letter-spacing:.12em;margin-left:auto;opacity:.7;white-space:nowrap;}
.mock-window h3,.mock-window h4,.mock-window p{margin:0}
.mock-window h3{font-size:.95rem;letter-spacing:-.02em;font-weight:800;}
.mock-window h4{font-size:.72rem;font-weight:850;margin-bottom:7px;}
.mock-window small {color:#62768e;font-size:.64rem;line-height:1.4;}
.mock-window--finance {top:45px;left:4%;width:78%;height:366px;z-index:1;transform:rotateY(-9deg) rotateZ(2deg);}
.mock-dashboard {display:flex;height:calc(100% - 27px);}
.mock-side {width:110px;flex:none;background:#f7faff;border-right:1px solid #e6edf6;padding:10px 7px;}
.mock-side__heading {font-size:.76rem;font-weight:850;display:flex;align-items:center;gap:4px;white-space:nowrap;margin:0 0 15px;}
.mini-brand {width:19px;height:19px;display:grid;place-items:center;border-radius:5px;color:#fff;background:linear-gradient(135deg,#19344c 0%,#1da36b 100%);font-weight:900;}
.mock-side__item {display:flex;align-items:center;gap:7px;color:#526985;font-size:.67rem;padding:8px 6px;border-radius:5px;margin-bottom:5px;}
.mock-side__item.is-active {background:#e1ecff;color:#1d60cd;font-weight:800;}
.mock-finance__main {flex:1;min-width:0;padding:12px 12px 10px;}
.mock-finance__heading {display:flex;align-items:center;justify-content:space-between;gap:7px;margin-bottom:12px;}
.mock-finance__heading small {font-size:.53rem;letter-spacing:.11em;font-weight:750;color:#407bb9;}
.mock-finance__date {border:1px solid #e3eaf4;border-radius:5px;padding:5px;color:#69809b;font-size:.62rem;white-space:nowrap;}
.mock-finance__kpis {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-bottom:10px;}
.mock-finance__kpis>div {display:grid;grid-template-columns:20px 1fr;grid-template-rows:auto auto;align-items:center;
  padding:8px 5px;gap:1px 5px;border:1px solid #e1e9f2;border-radius:7px;min-width:0;}
.kpi-mark {grid-row:1/3;width:20px;height:20px;display:grid;place-items:center;border-radius:50%;background:#e9f1ff;color:#3674d7;}
.kpi-mark.is-green {color:#159965;background:#def8e9;}
.mock-finance__kpis strong {font-size:.59rem;white-space:nowrap;}
.mock-finance__kpis small {font-size:.52rem;white-space:nowrap;}
.mock-finance__dashboard {display:grid;grid-template-columns:minmax(0,1.55fr) minmax(110px, .88fr);gap:8px;}
.chart-panel,.mock-summary {border:1px solid #e2eaf4;border-radius:7px;padding:8px;min-width:0;}
.chart-legend {display:flex;gap:8px;color:#71849e;font-size:.52rem;justify-content:center;white-space:nowrap;}
.legend-blue {color:#276fe0;}.legend-green {color:#149567;}
.chart-panel svg {display:block;width:100%;height:103px;margin-top:4px;}
.chart-years {display:flex;justify-content:space-around;color:#7b8ba4;font-size:.53rem;}
.mock-summary>div {border-bottom:1px solid #eaf0f7;padding:6px 0;display:flex;flex-direction:column;}
.mock-summary small {font-size:.59rem;}.mock-summary strong {font-size:.66rem;color:#178960;}
.mock-summary__link {display:block;color:#1c62cb;font-weight:750;margin-top:11px;font-size:.63rem;}
.mock-window--strategy {top:229px;right:-1%;width:50%;height:218px;z-index:3;transform:rotateY(-4deg) rotateZ(-5deg);}
.mock-strategies {padding:11px 10px;}.mock-strategies__title {display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;}
.mock-strategies__title h3{font-size:.83rem}.mock-strategies__title small{font-size:.54rem;}
.mock-strategies__grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;}
.strategy {min-width:0;border:1px solid #dce7f1;border-radius:7px;padding:7px 6px 6px;display:flex;flex-direction:column;}
.strategy--selected {background:#effaf4;border-color:#6ac89c;}
.strategy strong {font-size:.68rem;}.strategy small {font-size:.53rem;white-space:nowrap}.strategy svg {width:100%;height:53px;margin:4px 0;}
.strategy em {font-size:.53rem;font-style:normal;white-space:nowrap;color:#506780;margin-top:3px;}
.mock-window--chat {top:436px;left:0%;width:59%;height:295px;z-index:4;transform:rotateY(-8deg) rotateZ(1.3deg);}
.mock-chat {display:flex;height:calc(100% - 27px);}
.mock-chat__side {width:122px;flex:none;background:#f8fbff;border-right:1px solid #e2ebf5;padding:9px 6px;display:flex;flex-direction:column;gap:7px;}
.mock-chat__brand {display:flex;align-items:center;gap:4px;font-size:.65rem;margin-bottom:9px;}
.mock-chat__side>span {font-size:.63rem;color:#546c89;padding:6px;border-radius:4px;white-space:nowrap;}
.mock-chat__side>span.is-active {color:#2664d4;background:#e6efff;font-weight:700;}
.mock-chat__main {flex:1;min-width:0;display:flex;flex-direction:column;padding:10px 11px;gap:10px;}
.mock-chat__main h3{font-size:.83rem;}.mock-chat__main h3 small{display:block;font-weight:400;margin-top:2px;}
.bubble {border-radius:9px;padding:9px 11px;font-size:.62rem;line-height:1.55;max-width:91%;color:#425673;}
.bubble.bot {background:#f0f4f9;align-self:flex-start;}.bubble.visitor {background:#e3edff;align-self:flex-end;}
.mock-chat__prompt {margin-top:auto;border:1px solid #dce6f3;border-radius:6px;color:#9aabc0;font-size:.63rem;padding:8px;display:flex;justify-content:space-between;}
.mock-chat__prompt span {color:#346fe0;}
.mock-window--listings {top:475px;right:-1%;width:57%;height:266px;z-index:5;transform:rotateY(7deg) rotateZ(-1.4deg);}
.mock-properties {padding:11px 12px;}
.mock-properties__top {display:flex;justify-content:space-between;align-items:center;margin-bottom:9px;}
.mock-properties__top small {display:block;font-size:.54rem;}.mock-properties__top h3{font-size:.82rem;}
.mock-properties__add {background:#286de0;color:#fff;border-radius:4px;padding:6px;font-size:.59rem;}
.mock-properties__search {height:28px;border:1px solid #e0e7f2;border-radius:4px;color:#93a3b5;font-size:.60rem;
 display:flex;align-items:center;justify-content:space-between;padding:0 7px;margin-bottom:9px;}
.mock-properties__search span {color:#526f8e;}
.mock-properties__grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;}
.property-card {border:1px solid #e1e9f2;border-radius:7px;overflow:hidden;min-width:0;}
.property-card img {height:73px;width:100%;object-fit:cover;display:block;}
.property-card>div {padding:6px;display:flex;flex-direction:column;gap:3px;}
.property-status {color:#167c4f;font-size:.49rem;font-weight:800;}.property-status.muted{color:#697a8c;}
.property-card strong {font-size:.64rem;}.property-card small{font-size:.55rem;}
.showcase-annotation {position:absolute;color:#e8f5ff;font-family:cursive;font-style:italic;font-size:.91rem;line-height:1.25;z-index:6;text-shadow:0 1px 5px #07213870;}
.showcase-annotation span {color:#45da9c;font-size:2.1rem;font-family:Arial,sans-serif;vertical-align:middle;line-height:0;}
.showcase-annotation--finance {top:15px;right:1%;}.showcase-annotation--strategy {top:142px;right:0%;}
.showcase-annotation--chat {left:0%;bottom:31px;transform:translateX(-5%);}
.showcase-annotation--properties {right:0%;bottom:7px;}
/* Large laptop: ensure the hero remains a composition rather than a wide rasterized image. */
@media(max-width:1270px){
  .product-hero__inner {width:min(100% - 40px,1160px);grid-template-columns:minmax(310px,37%) 63%;min-height:720px;}
  .product-hero h1 {font-size:clamp(2.2rem,3.7vw,3.3rem);white-space:normal;}
  .product-hero__lead {font-size:.92rem;}.product-hero__feature small{font-size:.75rem}
  .showcase-stage {height:690px;transform:scale(.9);transform-origin:center left;width:112%;}
}
/* Tablets: the scene moves below real text and scales to fit without clipping. */
@media(max-width:980px){
  .product-hero {background:linear-gradient(165deg,#f7fbff,#e5effb 35%,#19334d 60%,#10283f 100%);}
  .product-hero__inner {display:block;width:min(100% - 40px,800px);min-height:unset;}
  .product-hero__copy {padding:58px 0 20px;max-width:670px;}
  .product-hero h1 {white-space:normal;font-size:clamp(2.5rem,6vw,3.8rem);}
  .product-hero__features {grid-template-columns:repeat(2,1fr);}
  .showcase-stage {transform:none;width:100%;height:710px;margin:20px auto 0;}
}
@media(max-width:650px){
  .product-hero__inner {width:calc(100% - 30px);}
  .product-hero__copy {padding:44px 4px 15px;}
  .product-hero__eyebrow {font-size:.66rem;letter-spacing:.12em;}
  .product-hero h1 {font-size:clamp(2.2rem,9.3vw,3.2rem);letter-spacing:-.04em;}
  .product-hero__lead {font-size:.92rem;line-height:1.65;}
  .product-hero__features {grid-template-columns:1fr;gap:13px;}
  .product-hero__feature-icon{width:42px;height:42px;}
  .product-hero__buttons {gap:10px;}
  .showcase-stage {display:flex;flex-direction:column;gap:17px;height:auto;perspective:none;transform:none;margin:27px 0 0;}
  .showcase-stage__mesh,.showcase-annotation {display:none;}
  .mock-window {position:relative;inset:auto!important;width:100%!important;height:auto!important;min-height:0;
    transform:none!important;box-shadow:0 12px 25px #03162b66;}
  .mock-window--finance {order:1;}.mock-window--chat {order:2;}.mock-window--strategy {order:3;}.mock-window--listings {order:4;}
  .mock-dashboard {height:300px;}.mock-finance__dashboard {grid-template-columns:minmax(0,1fr) 90px;}
  .mock-side {width:78px;}.mock-side__heading {font-size:.55rem;}.mock-side__item{font-size:.56rem;gap:2px;padding:7px 3px;}
  .mock-finance__main {padding:8px;}.mock-finance__heading h3{font-size:.78rem}.mock-finance__date{font-size:.55rem;}
  .mock-finance__kpis {gap:3px}.mock-finance__kpis>div {display:flex;flex-direction:column;padding:5px 2px;text-align:center;}
  .mock-finance__kpis strong {font-size:.51rem;}.mock-finance__kpis small{font-size:.48rem;}.kpi-mark{width:18px;height:18px;}
  .chart-panel,.mock-summary{padding:5px;}.mock-summary small{font-size:.51rem;}.mock-summary strong{font-size:.54rem;}
  .mock-finance__dashboard .chart-panel svg {height:93px;}
  .mock-strategies {padding:15px}.mock-strategies__grid{gap:9px}.strategy{padding:10px 8px;}
  .mock-chat {height:283px;}.mock-chat__side {width:92px;}.mock-chat__brand{font-size:.58rem;}
  .mock-chat__side>span{font-size:.56rem;}.mock-chat__main{padding:9px;gap:8px;}.bubble{font-size:.60rem;}
  .mock-properties__grid{gap:5px}.property-card img{height:85px;}.mock-properties {padding:14px;}
  .product-hero__disclaimer {font-size:.68rem;padding:17px;}
}
@media(prefers-reduced-motion:reduce){.mock-window{transition:none}}