/* 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: none;
    }
    #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;
    }
}