/* Homepage text-to-inbox composition; scoped to the marketing homepage. */
.hero { grid-template-columns:minmax(0,.9fr) minmax(0,1.15fr); gap:4vw; padding:72px max(4vw,24px) 64px; }
.hero-copy { max-width:580px; }
.hero h1 { font-size:clamp(48px,5.2vw,76px); }
@media(max-width:600px) {
  .hero h1 { font-size:clamp(36px,10.5vw,44px); line-height:1.06; }
}
.hero-visual.hero-story { height:570px; min-width:0; isolation:isolate; }
.hero-story::before { border:0; width:90%; height:85%; inset:6% 0 auto auto; background:radial-gradient(ellipse,#d9ecee 0%,#eaf4f5 55%,transparent 72%); z-index:-1; }
.story-inbox { position:absolute; top:30px; left:56px; right:-24px; background:white; border:1px solid #dbe6ed; border-radius:14px; box-shadow:0 24px 65px -28px #173b5050; overflow:hidden; }
.story-window { display:flex; align-items:center; gap:14px; padding:14px 16px; border-bottom:1px solid #e9eef2; color:#425c70; font-size:12px; font-weight:600; }
.story-dots { color:#bdcbd4; font-size:9px; letter-spacing:3px; }
.story-live { margin-left:auto; color:#6b8291; font-size:10px; font-weight:400; }
.story-capture { display:block; position:relative; overflow:hidden; height:262px; }
.story-capture img { display:block; width:860px; max-width:none; height:auto; }
.story-row-focus { position:absolute; top:162px; left:16px; right:8px; height:41px; background:#358ddd09; border:1px solid #5aa3d47a; border-left:3px solid #478dc3; border-radius:5px; pointer-events:none; }
.story-zoom { display:block; text-align:right; padding:9px 15px; color:#60788a; font-size:11px; border-top:1px solid #eef2f5; }
.hero-story > img.story-phone { position:absolute; width:218px; height:auto; left:0; top:132px; object-fit:contain; border-radius:0; box-shadow:none; filter:drop-shadow(0 18px 20px #17344728); z-index:2; }
.story-handoff { position:absolute; left:244px; right:0; top:410px; display:flex; gap:14px; align-items:flex-start; }
.story-arrow { font-size:32px; line-height:1; color:#348da2; }
.story-handoff p { margin:0; font-size:17px; line-height:1.5; }
.story-handoff strong { display:block; color:#163747; }
.story-handoff p span { display:block; color:#536f80; font-size:14px; margin-top:5px; }
.story-capture:focus-visible { outline:3px solid #378cbb; outline-offset:-3px; }
@media(min-width:1600px) { .hero { padding-left:max(5vw,calc((100vw - 1500px)/2)); padding-right:max(5vw,calc((100vw - 1500px)/2)); } }
@media(max-width:1100px) { .hero { grid-template-columns:1fr; gap:24px; } .hero-copy { max-width:720px; } .hero-visual.hero-story { width:100%; max-width:760px; justify-self:center; } .story-inbox { right:0; left:90px; } .hero-story > img.story-phone { left:20px; } .story-handoff { left:275px; } }
@media(max-width:600px) { .hero { padding-left:22px; padding-right:22px; } .hero-visual.hero-story { height:480px; } .story-inbox { top:12px; left:34px; right:-8px; } .story-window { padding:12px; font-size:11px; } .story-live { display:none; } .story-capture { height:227px; } .story-capture img { width:760px; } .story-row-focus { top:143px; height:36px; left:12px; } .hero-story > img.story-phone { width:166px; left:-6px; top:147px; } .story-handoff { left:178px; top:333px; gap:6px; } .story-arrow { font-size:22px; } .story-handoff p { font-size:15px; } .story-handoff p span { font-size:13px; } }
@media(max-width:600px) {
  #main-content .hero-visual.hero-story { height:660px; }
  #main-content .story-inbox { left:0; right:0; }
  #main-content .story-capture { height:210px; }
  #main-content .story-capture img { width:650px; transform:translateX(-132px); }
  #main-content .story-row-focus { top:123px; left:3px; right:3px; height:30px; }
  #main-content .hero-story > img.story-phone { top:305px; left:0; }
  #main-content .story-handoff { top:386px; left:182px; }
}