/* Approved blue-v4 reference stylesheet. */
:root{
    --blue:#2461e9;
    --navy:#1d3a89;
    --dark:#172d60;
    --accent:#5fa4f9;
    --ink:#192941;
    --muted:#67758b;
    --line:#e5eaf2;
    --bg:#f6f8fb;
    --green:#298368
}
*{
    box-sizing:border-box
}
html{
    scroll-behavior:smooth;
    scroll-padding-top:105px
}
body{
    margin:0;
    font:16px/1.65 Inter,"Segoe UI",Arial,sans-serif;
    color:var(--ink);
    background:#fff;
    -webkit-font-smoothing:antialiased
}
a{
    color:inherit;
    text-decoration:none
}
button,input,textarea{
    font:inherit
}
button,a,input,textarea{
    -webkit-tap-highlight-color:transparent
}
button{
    cursor:pointer
}
button{
    color:inherit
}
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible{
    outline:3px solid var(--accent);
    outline-offset:5px
}
button{
    border:0;
    background:none
}
svg{
    width:20px;
    height:20px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.7;
    stroke-linecap:round;
    stroke-linejoin:round;
    flex-shrink:0
}
h1,h2,h3,p{
    margin:0
}
h1,h2,h3{
    line-height:1.15
}
h2{
    font-size:43px;
    font-weight:650;
    letter-spacing:-1.8px
}
h3{
    font-size:21px;
    font-weight:650;
    letter-spacing:-.5px
}
::selection{
    background:#dce8ff
}
.wrap{
    max-width:1280px;
    margin:auto;
    padding:0 40px
}
.section{
    padding:100px 0
}
.muted{
    color:var(--muted)
}
.eyebrow{
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:2.1px;
    font-weight:700;
    color:var(--blue);
    margin-bottom:18px
}
.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    min-height:48px;
    padding:12px 20px;
    border:1px solid var(--line);
    border-radius:9px;
    font-size:14px;
    font-weight:600;
    line-height:1.5;
    transition:transform .18s,background .18s,box-shadow .18s;
    white-space:nowrap
}
.btn:hover{
    transform:translateY(-2px)
}
.btn.primary{
    background:var(--blue);
    border-color:var(--blue);
    color:#fff;
    box-shadow:0 5px 14px #2461e91a
}
.btn.primary:hover{
    background:#1952d4;
    box-shadow:0 7px 20px #2461e928
}
.btn.light{
    background:#fff
}
.btn.light:hover{
    background:#f6f8fb
}
.btn svg{
    width:17px;
    height:17px
}
.link{
    color:var(--blue);
    font-size:14px;
    font-weight:600;
    display:inline-flex;
    align-items:center;
    gap:9px
}
.link:hover{
    text-decoration:underline
}
.brand{
    display:flex;
    align-items:center;
    gap:15px
}
.homepage .header .brand-logo{
    display:block;
    width:108px;
    height:auto;
    flex:none
}
.brand-product{
    font-size:10px;
    letter-spacing:2.8px;
    font-weight:600;
    border-left:1px solid #d6dfed;
    padding-left:15px;
    color:#6c7d99
}
.header{
    position:sticky;
    top:0;
    z-index:30;
    background:#ffffffed;
    backdrop-filter:blur(18px);
    border-bottom:1px solid #e9edf4
}
.header-row{
    display:flex;
    align-items:center;
    height:86px;
    gap:35px
}
.nav{
    display:flex;
    gap:28px;
    margin:auto;
    font-size:14px;
    color:#607088
}
.nav a:hover,.nav a.active{
    color:var(--blue)
}
.header-actions{
    display:flex;
    align-items:center;
    gap:22px;
    font-size:14px;
    font-weight:600
}
.header .btn{
    min-height:42px;
    padding:10px 15px;
    font-size:13px
}
.menu-btn{
    display:none;
    width:44px;
    height:44px;
    align-items:center;
    justify-content:center
}
.skip{
    position:fixed;
    left:20px;
    top:-80px;
    background:var(--dark);
    color:white;
    padding:10px 20px;
    z-index:100
}
.skip:focus{
    top:10px
}
.hero{
    padding:86px 0 72px;
    overflow:hidden;
    background:radial-gradient(ellipse at 91% 37%,#edf4ff 0%,#fff 58%)
}
.hero-grid{
    display:grid;
    grid-template-columns:.92fr 1.18fr;
    gap:44px;
    align-items:center
}
.hero-label{
    display:inline-flex;
    align-items:center;
    gap:9px;
    font-size:12px;
    font-weight:600;
    color:#416295;
    border:1px solid #dce7f9;
    background:#f4f8ff;
    border-radius:50px;
    padding:7px 12px;
    margin-top:23px
}
.hero-label svg{
    width:15px;
    height:15px;
    color:var(--blue)
}
h1{
    font-size:66px;
    line-height:1.07;
    letter-spacing:-3.5px;
    font-weight:650;
    max-width:570px
}
h1 span{
    color:var(--blue)
}
.hero-copy>p{
    font-size:17px;
    color:var(--muted);
    line-height:1.85;
    margin-top:24px;
    max-width:425px
}
.hero-buttons{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin-top:29px
}
.trial-note{
    display:flex;
    gap:16px;
    flex-wrap:wrap;
    color:#78859b;
    font-size:12px;
    margin-top:18px
}
.trial-note span{
    display:inline-flex;
    align-items:center;
    gap:5px
}
.trial-note svg{
    height:14px;
    width:14px;
    color:#6581ac
}
.product-stage{
    position:relative;
    padding:17px 0 44px
}
.app{
    border:1px solid #dce4f2;
    border-radius:13px;
    overflow:hidden;
    background:white;
    box-shadow:0 24px 65px #172d6014,0 4px 12px #172d6006;
    transform:perspective(1600px) rotateY(-4deg);
    transform-origin:left center;
    position:relative
}
.app-bar{
    height:49px;
    display:flex;
    align-items:center;
    gap:7px;
    padding:0 16px;
    border-bottom:1px solid var(--line);
    color:#8593a8;
    font-size:10px
}
.window-dot{
    width:6px;
    height:6px;
    border-radius:50%;
    background:#dce2ec
}
.app-address{
    margin:auto;
    letter-spacing:.3px;
    display:flex;
    align-items:center;
    gap:5px
}
.app-address svg{
    width:11px;
    height:11px
}
.app-bar>span:last-child{
    font-size:9px;
    background:#f2f5fa;
    border-radius:4px;
    padding:2px 6px
}
.cost-float{
    position:absolute;
    bottom:1px;
    left:-24px;
    z-index:2;
    display:flex;
    gap:15px;
    align-items:center;
    background:white;
    border:1px solid #e0e8f3;
    border-radius:12px;
    box-shadow:0 12px 30px #172d6012;
    padding:16px 21px
}
.cost-icon{
    width:40px;
    height:40px;
    display:grid;
    place-items:center;
    background:#eef4ff;
    color:var(--blue);
    border-radius:10px
}
.cost-float small{
    display:block;
    color:#8190a6;
    font-size:10px
}
.cost-float strong{
    display:block;
    font-size:22px;
    letter-spacing:-.7px;
    font-weight:650;
    margin-top:1px
}
.cost-float .cost-tag{
    font-size:9px;
    color:#4f826f;
    background:#edf7f2;
    padding:4px 7px;
    margin-left:6px;
    border-radius:5px
}
.sample-caption{
    text-align:right;
    color:#8e9aae;
    font-size:10px;
    margin:12px 5px 0
}
.audience{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    border-top:1px solid var(--line);
    padding-top:31px;
    margin-top:68px;
    color:#6e7f98;
    font-size:13px
}
.audience>p{
    font-size:12px;
    color:#8a96a8;
    max-width:170px;
    line-height:1.6
}
.audience-item{
    display:flex;
    align-items:center;
    gap:10px;
    font-weight:550
}
.audience-item svg{
    height:19px;
    width:19px;
    color:#8499b9
}
.features{
    background:var(--bg);
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line)
}
.section-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:40px;
    margin-bottom:38px
}
.section-head h2{
    max-width:570px
}
.section-head>p{
    font-size:15px;
    color:var(--muted);
    max-width:335px;
    line-height:1.8
}
.feature-grid{
    display:grid;
    grid-template-columns:1.15fr 1fr 1fr;
    gap:20px
}
.feature-card{
    background:white;
    border:1px solid var(--line);
    border-radius:15px;
    overflow:hidden;
    display:flex;
    flex-direction:column
}
.feature-card .copy{
    padding:27px 27px 20px
}
.icon-tile{
    display:grid;
    place-items:center;
    width:39px;
    height:39px;
    color:#527cbd;
    background:#edf3fd;
    border-radius:10px;
    margin-bottom:20px
}
.feature-card h3{
    font-size:20px;
    letter-spacing:-.5px
}
.feature-card p{
    font-size:14px;
    line-height:1.8;
    color:var(--muted);
    margin-top:13px
}
.feature-visual{
    margin:14px 25px 25px;
    border-radius:9px;
    background:#f8faff;
    border:1px solid #e9eef6;
    padding:16px;
    min-height:137px;
    margin-top:auto
}
.mini-label{
    font-size:10px;
    color:#8b98ac;
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:12px
}
.mini-label strong{
    font-weight:550;
    color:#5a6d8d
}
.mini-shift{
    display:flex;
    justify-content:space-between;
    gap:10px;
    font-size:10px;
    border-left:3px solid #81a8f0;
    border-radius:5px;
    padding:10px;
    background:#eaf1ff;
    color:#5479b9;
    margin-bottom:7px
}
.mini-shift:last-child{
    background:#ebf5f0;
    border-color:#8ec4ad;
    color:#5e8b78;
    margin-bottom:0
}
.mini-shift strong{
    font-weight:600
}
.team-row{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:10px;
    color:#61728d;
    padding:6px 0
}
.team-row+.team-row{
    border-top:1px solid #e9edf4
}
.circle{
    width:26px;
    height:26px;
    display:grid;
    place-items:center;
    font-size:8px;
    border-radius:50%;
    background:#dfeaff;
    color:#5b7dac
}
.circle.peach{
    background:#f6eade;
    color:#ab896b
}
.circle.purple{
    background:#ebe5f8;
    color:#8a77b2
}
.team-row .available{
    margin-left:auto;
    font-size:9px;
    color:#648e7d
}
.mini-cost{
    font-size:24px;
    letter-spacing:-1px;
    font-weight:650
}
.mini-cost small{
    font-weight:400;
    font-size:10px;
    letter-spacing:0;
    color:#92a0b5;
    margin-left:5px
}
.cost-bars{
    display:flex;
    gap:8px;
    align-items:flex-end;
    height:48px;
    margin-top:8px
}
.cost-bars i{
    display:block;
    flex:1;
    background:#c9dcff;
    border-radius:3px 3px 0 0
}
.cost-bars i:nth-child(5){
    background:#2461e9
}
.features-bottom{
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
    gap:30px;
    margin-top:28px;
    color:#78879b;
    font-size:12px
}
.features-bottom span{
    display:flex;
    gap:7px;
    align-items:center
}
.features-bottom svg{
    height:15px;
    width:15px;
    color:#7091c6
}
.flow-grid{
    display:grid;
    grid-template-columns:.8fr 1.1fr;
    align-items:center;
    gap:100px
}
.flow-copy>p{
    color:var(--muted);
    margin-top:22px;
    font-size:16px;
    line-height:1.85
}
.flow-copy .link{
    margin-top:24px
}
.steps{
    display:flex;
    flex-direction:column;
    gap:30px
}
.step{
    display:flex;
    gap:23px;
    position:relative
}
.step:not(:last-child):after{
    content:"";
    position:absolute;
    left:20px;
    top:46px;
    bottom:-23px;
    width:1px;
    background:#dfe7f4
}
.step-no{
    position:relative;
    z-index:1;
    background:#f0f5ff;
    border:1px solid #dce7fa;
    flex:0 0 41px;
    height:41px;
    display:grid;
    place-items:center;
    color:#6484ba;
    border-radius:50%;
    font-size:12px;
    font-weight:600
}
.step h3{
    font-size:18px;
    margin-top:9px;
    letter-spacing:-.3px
}
.step p{
    color:var(--muted);
    font-size:14px;
    margin-top:9px;
    max-width:440px;
    line-height:1.8
}
.story{
    background:#172d60;
    color:#fff;
    position:relative;
    overflow:hidden
}
.story-grid{
    display:grid;
    grid-template-columns:1.15fr .85fr;
    gap:95px;
    align-items:center
}
.story .eyebrow{
    color:#91baff
}
.story h2{
    font-size:42px
}
.story p{
    color:#b7c6e2;
    font-size:15px;
    line-height:1.9
}
.story p+p{
    margin-top:20px
}
.story-stamp{
    margin-top:26px;
    display:flex;
    align-items:center;
    gap:12px;
    color:#a8bee4;
    font-size:12px
}
.story-stamp svg{
    color:#90b7f8;
    width:24px;
    height:24px
}
.pricing{
    background:#f7f9fc
}
.pricing-grid{
    display:grid;
    grid-template-columns:.95fr 1.05fr;
    gap:95px;
    align-items:center
}
.pricing-copy>p{
    font-size:16px;
    color:var(--muted);
    line-height:1.85;
    margin-top:22px;
    max-width:360px
}
.pricing-copy .link{
    margin-top:24px
}
.price-panel{
    background:white;
    border:1px solid #dce5f4;
    border-radius:16px;
    padding:32px;
    box-shadow:0 15px 40px #172d6007;
    position:relative
}
.plan-heading{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:20px;
    gap:15px
}
.plan-heading h3{
    font-size:19px
}
.plan-tag{
    font-size:11px;
    color:#5574a8;
    background:#eff4fd;
    padding:5px 9px;
    border-radius:5px
}
.price{
    display:flex;
    align-items:baseline;
    gap:5px;
    line-height:1.1
}
.price .currency{
    font-size:24px;
    color:#45648e;
    align-self:flex-start;
    padding-top:12px
}
.price strong{
    font-weight:650;
    font-size:67px;
    letter-spacing:-3px
}
.price span:last-child{
    color:#8290a4;
    font-size:13px;
    line-height:1.6;
    margin-left:10px;
    max-width:100px
}
.price-note{
    font-size:11px;
    color:#92a0b3;
    margin-top:9px
}
.plan-divider{
    height:1px;
    background:var(--line);
    margin:24px 0
}
.included{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:13px 18px;
    margin-bottom:26px;
    padding:0;
    list-style:none
}
.included li{
    font-size:12px;
    color:#697a92;
    display:flex;
    align-items:flex-start;
    gap:7px
}
.included svg{
    width:14px;
    height:14px;
    color:#7294c6;
    margin-top:3px
}
.price-panel .btn{
    width:100%
}
.price-caption{
    text-align:center;
    font-size:11px;
    color:#91a0b6;
    margin-top:12px
}
.pricing-assumption{
    font-size:11px;
    color:#8291a6;
    margin-top:15px;
    max-width:345px
}
.contact-grid{
    display:grid;
    grid-template-columns:.9fr 1.1fr;
    gap:95px
}
.contact-copy>p{
    color:var(--muted);
    font-size:16px;
    line-height:1.8;
    margin-top:20px;
    max-width:370px
}
.contact-email{
    margin-top:28px;
    display:inline-flex;
    gap:10px;
    align-items:center;
    color:var(--blue);
    font-size:14px
}
.contact-form{
    border:1px solid var(--line);
    border-radius:14px;
    padding:28px;
    background:#fcfdff
}
.form-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:17px
}
.field{
    display:block;
    font-size:12px;
    font-weight:600;
    color:#526580;
    margin-bottom:17px
}
.field input,.field textarea{
    display:block;
    width:100%;
    border:1px solid #dfe6f0;
    border-radius:7px;
    background:white;
    color:var(--ink);
    padding:11px 12px;
    font-size:14px;
    margin-top:7px;
    outline-offset:2px
}
.field input::placeholder,.field textarea::placeholder{
    color:#a0adbe
}
.field textarea{
    resize:vertical;
    min-height:105px
}
.form-bottom{
    display:flex;
    gap:15px;
    justify-content:space-between;
    align-items:center
}
.form-bottom p{
    font-size:11px;
    color:#8997ac;
    max-width:225px;
    line-height:1.7
}
.form-bottom .btn{
    min-height:42px;
    font-size:12px
}
.form-status{
    font-size:13px;
    color:#3e7b66;
    line-height:1.7;
    margin-top:14px
}
.closing{
    border:1px solid #dce6f8;
    border-radius:16px;
    padding:34px 39px;
    background:#f0f5ff;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:30px;
    margin-top:74px
}
.closing h2{
    font-size:28px;
    letter-spacing:-1px
}
.closing p{
    font-size:14px;
    color:#7890b3;
    margin-top:10px
}
.footer{
    border-top:1px solid var(--line);
    padding:31px 0 24px
}
.footer-top,.footer-bottom{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:25px
}
.homepage .footer .brand-logo{
    display:block;
    width:108px;
    height:auto;
    flex:none
}
.footer-top>p{
    color:#8a98ad;
    font-size:12px
}
.footer-links{
    display:flex;
    gap:22px;
    font-size:12px;
    color:#71839e
}
.footer-links a:hover{
    color:var(--blue)
}
.footer-bottom{
    margin-top:25px;
    padding-top:21px;
    border-top:1px solid #edf0f6;
    font-size:10px;
    color:#98a3b4
}
.footer-bottom .concept{
    color:#8195b5
}
@media(min-width:1450px){
    .wrap{
        max-width:1360px
    }
    .hero{
        padding-top:98px;
        padding-bottom:78px
    }
    h1{
        font-size:73px
    }
    .hero-grid{
        gap:62px
    }
}
@media(max-width:1120px){
    .wrap{
        padding:0 28px
    }
    .header-row{
        gap:20px
    }
    .nav{
        gap:19px
    }
    .header-actions{
        gap:15px
    }
    .brand-product{
        display:none
    }
    .hero{
        padding:65px 0 55px
    }
    .hero-grid{
        gap:30px;
        grid-template-columns:.9fr 1.1fr
    }
    h1{
        font-size:55px;
        letter-spacing:-2.6px
    }
    .hero-copy>p{
        font-size:15px
    }
    .hero-buttons{
        gap:9px
    }
    .hero-buttons .btn{
        font-size:12px;
        padding:11px 14px
    }
    .cost-float{
        left:-12px;
        padding:12px 15px
    }
    .audience{
        margin-top:49px
    }
    .section{
        padding:78px 0
    }
    .feature-card .copy{
        padding:24px 20px
    }
    .feature-visual{
        margin-left:18px;
        margin-right:18px;
        padding:12px
    }
    .feature-card h3{
        font-size:18px
    }
    .flow-grid,.story-grid,.pricing-grid,.contact-grid{
        gap:55px
    }
    h2,.story h2{
        font-size:37px
    }
    .included{
        column-gap:10px
    }
    .included li{
        font-size:11px
    }
}
@media(max-width:860px){
    .nav{
        gap:16px;
        font-size:13px
    }
    .header-row{
        height:76px
    }
    .header-actions>a:first-child{
        display:none
    }
    .hero-grid{
        grid-template-columns:1fr
    }
    .hero-copy{
        max-width:610px;
        text-align:center;
        margin:auto
    }
    .hero-label{
        margin-top:20px
    }
    h1{
        font-size:64px;
        max-width:620px
    }
    .hero-copy>p{
        max-width:495px;
        margin-left:auto;
        margin-right:auto;
        font-size:17px
    }
    .hero-buttons,.trial-note{
        justify-content:center
    }
    .hero-buttons .btn{
        font-size:14px
    }
    .product-stage{
        width:100%;
        max-width:660px;
        margin:15px auto 0;
        padding-bottom:35px
    }
    .app{
        transform:none
    }
    .cost-float{
        left:-10px;
        bottom:0
    }
    .audience{
        flex-wrap:wrap;
        justify-content:center;
        gap:23px 30px
    }
    .audience>p{
        max-width:none;
        width:100%;
        text-align:center
    }
    .section-head{
        align-items:flex-start;
        gap:25px
    }
    .section-head>p{
        max-width:270px;
        font-size:14px
    }
    .feature-grid{
        grid-template-columns:1fr 1fr
    }
    .feature-card:first-child{
        grid-column:1/-1;
        display:grid;
        grid-template-columns:1fr 1fr;
        align-items:center
    }
    .feature-card:first-child .feature-visual{
        margin:25px
    }
    .feature-card:first-child .copy{
        padding:28px
    }
    .flow-grid,.story-grid,.pricing-grid,.contact-grid{
        gap:35px
    }
    .price-panel{
        padding:25px
    }
    .included{
        grid-template-columns:1fr;
        gap:10px
    }
    .included li{
        font-size:12px
    }
    .form-row{
        grid-template-columns:1fr;
        gap:0
    }
    .form-bottom{
        align-items:flex-start;
        flex-direction:column
    }
    .story h2{
        font-size:34px
    }
    .footer-top{
        flex-wrap:wrap
    }
    .footer-top>p{
        margin-right:auto
    }
    .closing{
        padding:30px
    }
    .closing h2{
        font-size:26px
    }
}
@media(max-width:620px){
    .wrap{
        padding:0 21px
    }
    .header-row{
        height:70px;
        gap:10px
    }
    .homepage .header .brand-logo{
        width:88px
    }
    .header-actions{
        margin-left:auto;
        gap:8px
    }
    .header-actions .btn{
        font-size:11px;
        padding:9px 11px;
        min-height:38px
    }
    .menu-btn{
        display:flex
    }
    .nav{
        display:none;
        position:absolute;
        left:0;
        right:0;
        top:70px;
        background:white;
        border-bottom:1px solid var(--line);
        padding:22px;
        box-shadow:0 12px 18px #172d6008;
        flex-direction:column;
        gap:0
    }
    .nav.open{
        display:flex
    }
    .nav a{
        padding:10px;
        font-size:15px
    }
    .hero{
        padding:43px 0 42px
    }
    .hero-label{
        font-size:11px;
        padding:6px 10px
    }
    h1{
        font-size:49px;
        letter-spacing:-2.5px;
        line-height:1.09
    }
    .hero-copy>p{
        font-size:15px;
        line-height:1.8;
        max-width:380px;
        margin-top:20px
    }
    .hero-buttons{
        margin-top:24px;
        gap:8px
    }
    .hero-buttons .btn{
        font-size:12px;
        padding:12px 14px;
        min-height:46px
    }
    .trial-note{
        font-size:10px;
        gap:12px;
        margin-top:15px
    }
    .product-stage{
        margin-top:8px;
        padding-bottom:35px
    }
    .app{
        border-radius:9px
    }
    .app-bar{
        height:35px;
        font-size:8px;
        padding:0 11px
    }
    .app-bar>span:last-child{
        font-size:7px
    }
    .cost-float{
        left:6px;
        bottom:0;
        padding:10px 13px;
        gap:10px;
        border-radius:9px
    }
    .cost-float strong{
        font-size:18px
    }
    .cost-float small{
        font-size:8px
    }
    .cost-float .cost-tag{
        font-size:8px
    }
    .cost-icon{
        width:31px;
        height:31px;
        border-radius:8px
    }
    .cost-icon svg{
        width:17px;
        height:17px
    }
    .sample-caption{
        font-size:8px;
        margin-top:9px
    }
    .audience{
        margin-top:35px;
        padding-top:24px;
        gap:18px 22px
    }
    .audience-item{
        font-size:11px;
        gap:7px
    }
    .audience-item svg{
        width:17px;
        height:17px
    }
    .section{
        padding:60px 0
    }
    h2,.story h2{
        font-size:33px;
        letter-spacing:-1.3px
    }
    .eyebrow{
        font-size:10px;
        letter-spacing:1.9px;
        margin-bottom:14px
    }
    .section-head{
        display:block;
        margin-bottom:26px
    }
    .section-head>p{
        max-width:100%;
        margin-top:18px;
        line-height:1.8
    }
    .feature-grid{
        grid-template-columns:1fr;
        gap:16px
    }
    .feature-card:first-child{
        display:flex;
        grid-column:auto
    }
    .feature-card .copy,.feature-card:first-child .copy{
        padding:24px
    }
    .feature-card .icon-tile{
        margin-bottom:17px
    }
    .feature-card h3{
        font-size:21px
    }
    .feature-visual,.feature-card:first-child .feature-visual{
        margin:0 24px 24px;
        padding:16px;
        min-height:120px
    }
    .mini-label,.mini-shift,.team-row{
        font-size:11px
    }
    .team-row .available{
        font-size:10px
    }
    .features-bottom{
        gap:11px 21px;
        font-size:11px;
        margin-top:24px
    }
    .flow-grid,.story-grid,.pricing-grid,.contact-grid{
        grid-template-columns:1fr;
        gap:34px
    }
    .flow-copy>p,.pricing-copy>p,.contact-copy>p{
        font-size:15px;
        max-width:none
    }
    .steps{
        gap:25px
    }
    .step{
        gap:18px
    }
    .step p{
        font-size:14px
    }
    .story p{
        font-size:15px
    }
    .story-stamp{
        margin-top:20px
    }
    .pricing-grid{
        gap:30px
    }
    .price-panel{
        padding:26px
    }
    .price strong{
        font-size:62px
    }
    .included{
        grid-template-columns:1fr 1fr;
        gap:12px
    }
    .included li{
        font-size:11px
    }
    .pricing-assumption{
        font-size:10px;
        max-width:none
    }
    .contact-form{
        padding:22px
    }
    .form-row{
        grid-template-columns:1fr
    }
    .form-bottom{
        flex-direction:row;
        align-items:center
    }
    .form-bottom p{
        font-size:10px;
        max-width:150px
    }
    .form-bottom .btn{
        padding:10px 13px
    }
    .closing{
        margin-top:47px;
        padding:26px;
        flex-direction:column;
        align-items:flex-start;
        gap:23px
    }
    .closing h2{
        font-size:26px
    }
    .closing p{
        font-size:13px
    }
    .closing .btn{
        font-size:13px
    }
    .footer-top,.footer-bottom{
        align-items:flex-start;
        flex-direction:column;
        gap:17px
    }
    .footer-top>p{
        margin-top:-6px
    }
    .footer-bottom{
        font-size:9px;
        line-height:1.8;
        margin-top:23px;
        padding-top:18px;
        gap:10px
    }
    .footer-links{
        font-size:11px
    }
    .footer{
        padding-top:27px
    }
}
@media(max-width:380px){
    .header-actions .btn svg{
        display:none
    }
    .header-actions .btn{
        padding:9px 10px
    }
    .homepage .header .brand-logo{
        width:76px
    }
}
@media(prefers-reduced-motion:reduce){
    html{
        scroll-behavior:auto
    }
    *,*:before,*:after{
        transition:none!important;
        animation:none!important
    }
}
/* Blue colour alternative. Presentation colours only;
original layout and behaviour retained. */
:root{
    --blue:#6aabff;
    --navy:#adcfff;
    --dark:#f3f7ff;
    --accent:#72b3ff;
    --ink:#f2f6ff;
    --muted:#bdcce9;
    --line:#8baef52e;
    --bg:#203b81;
    --green:#8ed4bc
}
body{
    background-color:#203b81;
    background-image:radial-gradient(ellipse 1000px 850px at 105% 2%,#609aec30,transparent 72%),radial-gradient(ellipse 1000px 1000px at -15% 46%,#417de02b,transparent 74%),radial-gradient(ellipse 1050px 1100px at 105% 80%,#4a8bec26,transparent 73%);
    color:#f2f6ff
}
::selection{
    background:#6aabff;
    color:#102b61
}
.eyebrow{
    color:#a7c9ff
}
.muted{
    color:#bdcce9
}
.header{
    background:#203c85e8;
    border-bottom-color:#91b4f42b
}
.brand-product{
    color:#b8ccec;
    border-left-color:#8eafe447
}
.nav{
    color:#c2d1ec
}
.nav a:hover,.nav a.active{
    color:#fff
}
.header-actions{
    color:#e4edff
}
.menu-btn{
    color:#d6e5ff
}
.btn{
    border-color:#82a7ea55;
    color:#eaf2ff
}
.btn.primary{
    background:#65a5fa;
    border-color:#65a5fa;
    color:#16356f;
    box-shadow:0 5px 18px #0a204c1a
}
.btn.primary:hover{
    background:#82b9ff;
    border-color:#82b9ff;
    box-shadow:0 7px 23px #071e4a30
}
.btn.light{
    background:#31559740;
    border-color:#83ace35c;
    color:#edf5ff
}
.btn.light:hover{
    background:#4e79bb4d;
    border-color:#a2c8ff80
}
.link{
    color:#a6cfff
}
.link:hover{
    color:#dcecff
}
.skip{
    background:#65a5fa;
    color:#102b61
}
.hero{
    background-color:transparent;
    background-image:radial-gradient(ellipse at 97% 40%,#649def36 0%,#477bd319 34%,transparent 65%),radial-gradient(ellipse at 2% 94%,#142c681c,transparent 63%)
}
.hero-label{
    color:#bcd5f8;
    border-color:#91b4f43d;
    background:#3d66a72b
}
.hero-label svg{
    color:#9bc7ff
}
h1,h2,h3{
    color:#f4f7ff
}
h1 span{
    color:#66a8ff
}
.hero-copy>p{
    color:#c0cfea
}
.trial-note{
    color:#b5c8e7
}
.trial-note svg{
    color:#8dbafa
}
.app{
    background:#192f65;
    border-color:#86a9ee43;
    box-shadow:0 24px 65px #0a194b36,0 4px 12px #0a194b17
}
.app-bar{
    background:#1c346f;
    border-bottom-color:#84a7eb24;
    color:#a8bfdf
}
.window-dot{
    background:#5775ad
}
.app-bar>span:last-child{
    background:#ffffff0a;
    color:#b5ccec
}
.cost-float{
    background:#193166;
    border-color:#87acee40;
    box-shadow:0 12px 30px #0a194b2e
}
.cost-icon{
    background:#6ca6ff1a;
    color:#96c4ff
}
.cost-float small{
    color:#b0c4e3
}
.cost-float strong{
    color:#f1f6ff
}
.cost-float .cost-tag{
    background:#79c9ad18;
    color:#a8dbc7
}
.sample-caption{
    color:#a8bee2
}
.audience{
    border-top-color:#91b4f42b;
    color:#bdcfed
}
.audience>p{
    color:#b0c3e3
}
.audience-item svg{
    color:#9bbce9
}
.features{
    background-color:#192f661f;
    background-image:radial-gradient(ellipse at 6% 20%,#436dc127,transparent 60%),radial-gradient(ellipse at 100% 100%,#619dec1a,transparent 68%);
    border-top-color:#91b4f429;
    border-bottom-color:#91b4f429
}
.section-head>p{
    color:#bdcce9
}
.feature-card{
    background:#182f67db;
    border-color:#8eafe63a
}
.icon-tile{
    color:#91bffd;
    background:#6d9fe51c
}
.feature-card p{
    color:#b6c7e6
}
.feature-visual{
    background:#152c6059;
    border-color:#88aae42b
}
.mini-label{
    color:#a6bcdd
}
.mini-label strong{
    color:#c5d9f7
}
.mini-shift{
    background:#2a4a81;
    color:#c6ddff;
    border-left-color:#82b4fc
}
.mini-shift:last-child{
    background:#284c63;
    color:#c0e3d5;
    border-color:#81c6ad
}
.team-row{
    color:#c6d7f2
}
.team-row+.team-row{
    border-top-color:#83a7e529
}
.circle{
    background:#36578d;
    color:#cbe0ff
}
.circle.peach{
    background:#5c5369;
    color:#f1d3b7
}
.circle.purple{
    background:#464779;
    color:#d4c9f4
}
.team-row .available{
    color:#a5d6c0
}
.team-row>span[style]{
    color:#c3b9e0!important
}
.mini-cost{
    color:#eef5ff
}
.mini-cost small{
    color:#abc0df
}
.cost-bars i{
    background:#41639c
}
.cost-bars i:nth-child(5){
    background:#68aaff
}
.features-bottom{
    color:#b5c9e9
}
.features-bottom svg{
    color:#97bffa
}
.flow-copy>p,.step p{
    color:#bdcce9
}
.step-no{
    background:#5e91e719;
    border-color:#8fb3f044;
    color:#afd1ff
}
.step:not(:last-child):after{
    background:#8caee439
}
.story{
    background-color:#192f6970;
    background-image:radial-gradient(ellipse at 84% 65%,#4c87dc24,transparent 71%),radial-gradient(ellipse at 0% 10%,#15295a24,transparent 64%);
    color:#f5f8ff
}
.story .eyebrow{
    color:#a8cfff
}
.story p{
    color:#c1d0eb
}
.story-stamp{
    color:#b2c9ed
}
.story-stamp svg{
    color:#9dc7ff
}
.pricing{
    background-color:transparent;
    background-image:radial-gradient(ellipse at 98% 52%,#64a1f430,transparent 67%),radial-gradient(ellipse at 8% 100%,#152b611c,transparent 70%)
}
.pricing-copy>p{
    color:#bfcee9
}
.price-panel{
    background:#192f68e8;
    border-color:#94b8f344;
    box-shadow:0 15px 40px #091b4626
}
.plan-tag{
    background:#6d9fea1a;
    color:#b8d4ff
}
.price .currency{
    color:#bed7ff
}
.price strong{
    color:#f5f8ff
}
.price span:last-child{
    color:#b8cae7
}
.price-note,.price-caption{
    color:#a8c0e1
}
.plan-divider{
    background:#87a9e62e
}
.included li{
    color:#c4d4ee
}
.included svg{
    color:#96c2ff
}
.pricing-copy .pricing-assumption{
    color:#b0c4e5
}
.contact-copy>p{
    color:#bfcee9
}
.contact-email{
    color:#a8cfff
}
.contact-form{
    background:#1a326adc;
    border-color:#8fb2ec3b
}
.field{
    color:#bed2f1
}
.field input,.field textarea{
    background:#152c6099;
    border-color:#8eaee748;
    color:#edf4ff
}
.field input::placeholder,.field textarea::placeholder{
    color:#96afd5
}
.field input:focus,.field textarea:focus{
    border-color:#92c2ff
}
.form-bottom p{
    color:#adc1e0
}
.form-status{
    color:#a9ddc7
}
.closing{
    background-color:#254986;
    background-image:radial-gradient(ellipse at 82% 10%,#76b5ff27,transparent 72%),linear-gradient(110deg,#162e6126,transparent);
    border-color:#99bbef45
}
.closing p{
    color:#bed2f0
}
.footer{
    background:#192f641c;
    border-top-color:#8caee436
}
.footer-top>p{
    color:#b0c4e5
}
.footer-links{
    color:#b6cdee
}
.footer-links a:hover{
    color:#eef5ff
}
.footer-bottom{
    border-top-color:#8baae52b;
    color:#a8bedf
}
.footer-bottom .concept{
    color:#b0c9ec
}
@media(max-width:620px){
    .nav{
        background:#1e3878;
        border-bottom-color:#8eaff345;
        box-shadow:0 12px 18px #091b4633
    }
}
/* Version 4: dark navigation, then light/dark alternating sections.
   Colour-only changes;
original copy, layout and scripts retained. */
#home,#how-it-works,#pricing,.footer{
    --blue:#2461e9;
    --navy:#1d3a89;
    --dark:#172d60;
    --accent:#5fa4f9;
    --ink:#192941;
    --muted:#67758b;
    --line:#e5eaf2;
    --bg:#f1f6ff;
    --green:#298368;
    color:#192941;
    background-color:#f1f6ff;
    background-image:radial-gradient(ellipse at 8% 10%,#ffffffb8,transparent 65%),radial-gradient(ellipse at 93% 70%,#e5eeff91,transparent 62%);
}
#home{
    background:#fff radial-gradient(ellipse at 91% 37%,#edf4ff 0%,#fff 58%)
}
#home h1,#home h2,#home h3,#how-it-works h2,#how-it-works h3,#pricing h2,#pricing h3{
    color:#192941
}
#home h1 span{
    color:#2461e9
}
#home .hero-label{
    color:#416295;
    border-color:#dce7f9;
    background:#f4f8ff
}
#home .hero-label svg{
    color:#2461e9
}
#home .hero-copy>p{
    color:#67758b
}
#home .trial-note{
    color:#78859b
}
#home .trial-note svg{
    color:#6581ac
}
#home .btn{
    border-color:#e5eaf2;
    color:#192941
}
#home .btn.primary,#pricing .btn.primary{
    background:#2461e9;
    border-color:#2461e9;
    color:#fff;
    box-shadow:0 5px 14px #2461e91a
}
#home .btn.primary:hover,#pricing .btn.primary:hover{
    background:#1952d4;
    border-color:#1952d4;
    box-shadow:0 7px 20px #2461e928
}
#home .btn.light{
    background:#fff;
    border-color:#e5eaf2;
    color:#192941
}
#home .btn.light:hover{
    background:#f6f8fb
}
/* Restore the light roster illustration from the original homepage. */
#home .app{
    background:#fff;
    border-color:#dce4f2;
    box-shadow:0 24px 65px #172d6014,0 4px 12px #172d6006
}
#home .app-bar{
    background:#fff;
    border-bottom-color:#e5eaf2;
    color:#8593a8
}
#home .window-dot{
    background:#dce2ec
}
#home .app-bar>span:last-child{
    background:#f2f5fa;
    color:#8593a8
}
#home .cost-float{
    background:#fff;
    border-color:#e0e8f3;
    box-shadow:0 12px 30px #172d6012
}
#home .cost-icon{
    background:#eef4ff;
    color:#2461e9
}
#home .cost-float small{
    color:#8190a6
}
#home .cost-float strong{
    color:#192941
}
#home .cost-float .cost-tag{
    background:#edf7f2;
    color:#4f826f
}
#home .sample-caption{
    color:#8e9aae
}
#home .audience{
    border-top-color:#e5eaf2;
    color:#6e7f98
}
#home .audience>p{
    color:#8a96a8
}
#home .audience-item svg{
    color:#8499b9
}
/* Light workflow and pricing sections alternate with the existing blue sections. */
#how-it-works .eyebrow,#pricing .eyebrow{
    color:#3268b9
}
#how-it-works .flow-copy>p,#how-it-works .step p,#pricing .pricing-copy>p{
    color:#5d708d
}
#how-it-works .link,#pricing .link{
    color:#2461e9
}
#how-it-works .link:hover,#pricing .link:hover{
    color:#194891
}
#how-it-works .step-no{
    background:#f0f5ff;
    border-color:#cfdef5;
    color:#4d72ac
}
#how-it-works .step:not(:last-child):after{
    background:#ccd9ed
}
#pricing .price-panel{
    background:#fff;
    border-color:#dce5f4;
    box-shadow:0 15px 40px #172d6007
}
#pricing .plan-tag{
    background:#eff4fd;
    color:#5574a8
}
#pricing .price .currency{
    color:#45648e
}
#pricing .price strong{
    color:#192941
}
#pricing .price span:last-child{
    color:#667b97
}
#pricing .price-note,#pricing .price-caption{
    color:#687f9e
}
#pricing .plan-divider{
    background:#e0e7f2
}
#pricing .included li{
    color:#526b8a
}
#pricing .included svg{
    color:#557fb9
}
#pricing .pricing-assumption{
    color:#6b809e
}
.footer{
    border-top-color:#dae4f3
}
.footer .brand-product{
    color:#6c7d99;
    border-left-color:#d6dfed
}
.footer-top>p{
    color:#657d9e
}
.footer-links{
    color:#526c90
}
.footer-links a:hover{
    color:#2461e9
}
.footer-bottom{
    border-top-color:#dce5f3;
    color:#6e829f
}
.footer-bottom .concept{
    color:#607b9f
}

/* Static homepage roster: a simplified view of the product, with no controls. */
.product-stage .roster-preview {
    color: #254369;
    font-size: 11px;
    line-height: 1.4;
    background: #f5f7fb;
}
.product-stage .preview-header {
    color: white;
    background: radial-gradient(ellipse at 78% 0%, #4774c975, transparent 53%), linear-gradient(112deg, #192f70, #233f8b 48%, #203b81);
}
.product-stage .preview-brand {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 18px;
}
.product-stage .preview-brand img {
    width: 90px;
    height: auto;
    flex: none;
}
.product-stage .preview-location {
    min-width: 0;
    padding-left: 16px;
    border-left: 1px solid #a9c8ff38;
}
.product-stage .preview-location strong { display: block; font-size: 15px; }
.product-stage .preview-location small { display: block; margin-top: 3px; font-size: 9px; color: #d0dff6; }
.product-stage .preview-publish,
.product-stage .preview-add {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 11px;
    border-radius: 5px;
    font-size: 10px;
    font-weight: 650;
    white-space: nowrap;
}
.product-stage .preview-publish { margin-left: auto; background: #78b5ff; color: #142d64; }
.product-stage .preview-publish svg { width: 12px; height: 12px; }
.product-stage .preview-stats {
    display: grid;
    grid-template-columns: 1fr 1fr 1.3fr;
    padding: 9px 18px;
    border-top: 1px solid #ffffff24;
    background: linear-gradient(112deg, #192f7040, #4774c930 78%, #203b8140);
}
.product-stage .preview-stats > div { display: flex; align-items: center; gap: 8px; }
.product-stage .preview-stats > div + div { padding-left: 14px; border-left: 1px solid #ffffff24; }
.product-stage .preview-stats span { font-size: 9px; color: #cfdef6; }
.product-stage .preview-stats strong { font-size: 18px; white-space: nowrap; }
.product-stage .preview-stats small { font-size: 8px; font-weight: 400; color: #cfdef6; }
.product-stage .preview-main { padding: 13px 12px 54px; }
.product-stage .preview-tools {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px;
    border: 1px solid #e2e9f3;
    border-bottom: 0;
    border-radius: 9px 9px 0 0;
    background: white;
}
.product-stage .preview-add { background: #2461e9; color: white; }
.product-stage .preview-add > span { font-size: 16px; font-weight: 400; line-height: 1; }
.product-stage .preview-weekly { margin-left: auto; padding: 5px 8px; background: #f1f5fc; border-radius: 4px; color: #526f9b; font-size: 9px; }
.product-stage .preview-period { display: flex; align-items: center; gap: 10px; font-size: 10px; white-space: nowrap; }
.product-stage .preview-period svg { width: 12px; height: 12px; }
.product-stage .preview-previous { transform: rotate(180deg); }
.product-stage .preview-period strong span { color: #7486a0; font-weight: 400; margin-left: 4px; }
.product-stage .preview-grid { border: 1px solid #e2e9f3; border-radius: 0 0 7px 7px; overflow: hidden; background: white; }
.product-stage .preview-grid table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.product-stage .preview-grid th,
.product-stage .preview-grid td { padding: 5px; border-right: 1px solid #e5ebf4; border-bottom: 1px solid #e5ebf4; text-align: left; }
.product-stage .preview-grid tr > :last-child { border-right: 0; }
.product-stage .preview-grid tbody tr:last-child > * { border-bottom: 0; }
.product-stage .preview-grid thead th { height: 51px; text-align: center; background: #eef3fb; font-size: 8px; font-weight: 600; color: #5d7293; }
.product-stage .preview-grid thead th:nth-child(even) { background: #e8eff9; }
.product-stage .preview-grid thead strong { margin-left: 3px; font-size: 14px; color: #304e79; }
.product-stage .preview-grid tr > :first-child { width: 105px; padding-left: 9px; }
.product-stage .preview-grid thead th:first-child { text-align: left; font-size: 12px; color: #304e79; }
.product-stage .preview-grid small { display: block; margin-top: 5px; font-size: 9px; font-weight: 400; color: #607b9d; }
.product-stage .preview-grid tbody th { font-size: 10px; font-weight: 600; }
.product-stage .preview-grid tbody td { height: 55px; vertical-align: top; padding-top: 5px; }
.product-stage .preview-person { display: flex; align-items: center; gap: 6px; }
.product-stage .preview-avatar { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 50%; background: #e6eefb; color: #5278ac; font-size: 8px; }
.product-stage .preview-shift { padding: 7px 4px; min-height: 44px; border-radius: 5px; border-left: 3px solid #4a85d0; background: #dce9f9; color: #234263; font-size: 9px; }
.product-stage .preview-shift strong { display: block; font-size: 8px; font-weight: 650; }
.product-stage .preview-shift strong span { white-space: nowrap; }
.product-stage .preview-shift > span { display: block; margin-top: 3px; }
.product-stage .preview-shift.mint { background: #dceee7; border-color: #329875; }
.product-stage .preview-shift.violet { background: #e9dff6; border-color: #9757cf; }
@media (min-width: 861px) and (max-width: 1120px) {
    .product-stage .preview-brand { gap: 9px; padding: 15px 10px; }
    .product-stage .preview-brand img { width: 66px; }
    .product-stage .preview-location { padding-left: 9px; }
    .product-stage .preview-location strong { font-size: 12px; }
    .product-stage .preview-location small { font-size: 7px; }
    .product-stage .preview-stats > div { flex-direction: column; align-items: flex-start; gap: 3px; }
    .product-stage .preview-grid tr > :first-child { width: 80px; }
    .product-stage .preview-person { gap: 4px; }
    .product-stage .preview-avatar { width: 19px; height: 19px; }
    .product-stage .preview-grid tbody th { font-size: 8px; }
    .product-stage .preview-shift { font-size: 8px; }
    .product-stage .preview-shift strong { font-size: 7px; }
    .product-stage .preview-tools { gap: 7px; padding: 9px; }
    .product-stage .preview-period { gap: 5px; font-size: 8px; }
}
@media (max-width: 620px) {
    .product-stage .preview-brand { gap: 8px; padding: 12px 9px; }
    .product-stage .preview-brand img { width: 55px; }
    .product-stage .preview-location { padding-left: 8px; }
    .product-stage .preview-location strong { font-size: 11px; }
    .product-stage .preview-location small { font-size: 6px; }
    .product-stage .preview-publish { padding: 6px; gap: 4px; font-size: 8px; }
    .product-stage .preview-publish svg { width: 9px; height: 9px; }
    .product-stage .preview-stats { padding: 9px; gap: 7px; }
    .product-stage .preview-stats > div { flex-direction: column; align-items: flex-start; gap: 3px; }
    .product-stage .preview-stats > div + div { padding-left: 7px; }
    .product-stage .preview-stats span { font-size: 7px; }
    .product-stage .preview-stats strong { font-size: 14px; }
    .product-stage .preview-main { padding: 8px 5px 43px; }
    .product-stage .preview-tools { padding: 7px; gap: 6px; }
    .product-stage .preview-add { font-size: 7px; gap: 3px; padding: 6px; }
    .product-stage .preview-add > span { font-size: 12px; }
    .product-stage .preview-weekly { padding: 3px; font-size: 7px; }
    .product-stage .preview-period { gap: 4px; font-size: 7px; }
    .product-stage .preview-period svg { width: 9px; height: 9px; }
    .product-stage .preview-period strong span { margin-left: 1px; }
    .product-stage .preview-grid tr > :first-child { width: 61px; padding-left: 4px; }
    .product-stage .preview-grid th, .product-stage .preview-grid td { padding: 3px 2px; }
    .product-stage .preview-grid thead th { height: 40px; font-size: 6px; }
    .product-stage .preview-grid thead strong { font-size: 10px; margin-left: 1px; }
    .product-stage .preview-grid thead th:first-child { font-size: 9px; }
    .product-stage .preview-grid small { font-size: 7px; margin-top: 4px; }
    .product-stage .preview-grid tbody th { font-size: 7px; }
    .product-stage .preview-grid tbody td { height: 55px; padding-top: 5px; }
    .product-stage .preview-person { gap: 3px; }
    .product-stage .preview-avatar { width: 17px; height: 17px; font-size: 6px; }
    .product-stage .preview-shift { padding: 5px 2px; min-height: 43px; border-left-width: 2px; font-size: 6px; border-radius: 3px; }
    .product-stage .preview-shift strong { font-size: 6px; }
    .product-stage .preview-shift strong span { display: block; }
}

/* Application integration: hidden security fields, real submission feedback. */
.d-none { display: none !important; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.contact-form .error-message { color: #ffe0e3; }
.contact-form .form-bottom { justify-content: flex-end; margin-bottom: 14px; }
@media (max-width: 620px) { .header .nav { max-height: calc(100dvh - 70px); overflow-y: auto; } }
.contact-form .sent-message { color: #a9ddc7; }
.contact-form button:disabled { cursor: wait; opacity: .7; }
.contact-form [aria-busy="true"] svg { display: none; }
.spinner-border { display: inline-block; width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: contact-spin .7s linear infinite; }
@keyframes contact-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation: none !important; transition: none !important; }
}