:root{
    font-family:
        Inter,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    color:#182833;
    background:#f3f6f7;

    --navy:#172b38;
    --navy-2:#203d4d;
    --green:#2f7957;
    --green-soft:#e8f3ed;
    --gold:#bb8b26;
    --line:#dce3e6;
    --muted:#667680;
    --white:#fff;
}

*{
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    margin:0;
    background:#f3f6f7;
}

button,
a{
    font:inherit;
}


/* ==========================================================
   HEADER
   ========================================================== */

.public-header{
    min-height:70px;

    display:flex;
    align-items:center;

    gap:32px;

    padding:10px
            clamp(18px,4vw,64px);

    background:var(--navy);

    color:#fff;

    border-bottom:
        1px solid
        rgba(255,255,255,.1);
}


.public-brand{
    flex:0 0 auto;

    display:flex;
    align-items:center;

    gap:11px;

    color:#fff;
    text-decoration:none;
}


.public-logo{
    width:42px;
    height:42px;

    display:grid;
    place-items:center;

    border:
        1px solid
        rgba(255,255,255,.45);

    border-radius:7px;

    font-weight:800;
    letter-spacing:.04em;
}


.public-brand-text{
    display:flex;
    flex-direction:column;

    line-height:1.15;
}


.public-brand-text strong{
    font-size:18px;
}


.public-brand-text small{
    margin-top:3px;

    color:#b9c9d1;

    font-size:10px;
}


.public-tabs{
    flex:1;

    display:flex;
    align-items:center;
    justify-content:flex-end;

    gap:3px;

    overflow:auto;
}


.public-tabs button{
    flex:0 0 auto;

    padding:9px 11px;

    border:0;
    border-radius:5px;

    background:transparent;
    color:#dae4e9;

    cursor:pointer;

    font-size:12px;
    font-weight:650;
}


.public-tabs button:hover{
    background:
        rgba(255,255,255,.08);
}


.public-tabs button.active{
    background:#fff;
    color:var(--navy);
}


.public-tabs .login-tab{
    margin-left:8px;

    border:
        1px solid
        rgba(255,255,255,.4);
}


/* ==========================================================
   COMMON
   ========================================================== */

.public-main{
    max-width:1400px;

    margin:0 auto;

    padding:
        40px
        clamp(18px,4vw,64px)
        64px;
}


.tab-panel{
    display:none;
}


.tab-panel.active{
    display:block;
}


.eyebrow{
    display:inline-block;

    margin-bottom:10px;

    color:var(--green);

    font-size:11px;
    font-weight:800;

    letter-spacing:.11em;
}


.section-heading{
    max-width:800px;

    margin-bottom:32px;
}


.section-heading h1{
    margin:0 0 12px;

    color:var(--navy);

    font-size:
        clamp(28px,4vw,43px);

    line-height:1.08;
}


.section-heading p{
    margin:0;

    color:var(--muted);

    font-size:16px;
    line-height:1.65;
}


/* ==========================================================
   HERO
   ========================================================== */

.hero{
    display:grid;

    grid-template-columns:
        minmax(0,1.4fr)
        minmax(300px,.8fr);

    gap:48px;

    align-items:center;

    min-height:430px;
}


.hero-copy h1{
    max-width:820px;

    margin:0 0 18px;

    color:var(--navy);

    font-size:
        clamp(34px,5vw,60px);

    line-height:1.03;

    letter-spacing:-.035em;
}


.hero-copy p{
    max-width:790px;

    color:#44555f;

    font-size:16px;
    line-height:1.68;
}


.hero-lead{
    font-size:20px !important;
    color:#243d4b !important;
}


.hero-actions{
    display:flex;
    flex-wrap:wrap;

    gap:10px;

    margin-top:28px;
}


.hero-actions button{
    padding:11px 16px;

    border-radius:6px;

    cursor:pointer;

    font-weight:700;
}


.hero-actions .primary{
    border:1px solid var(--navy);

    background:var(--navy);
    color:#fff;
}


.hero-actions .secondary{
    border:1px solid #aebbc2;

    background:#fff;
    color:var(--navy);
}


.hero-card{
    padding:25px;

    background:#fff;

    border:1px solid var(--line);
    border-radius:12px;

    box-shadow:
        0 10px 32px
        rgba(30,50,60,.06);
}


.hero-card h2{
    margin:0 0 20px;

    font-size:18px;
}


.process{
    display:flex;
    flex-direction:column;

    gap:8px;
}


.process > div{
    display:grid;

    grid-template-columns:
        36px
        1fr;

    column-gap:12px;

    padding:10px;

    border-radius:7px;

    background:#f5f8f9;
}


.process span{
    grid-row:1/3;

    width:30px;
    height:30px;

    display:grid;
    place-items:center;

    border-radius:50%;

    background:var(--green);
    color:#fff;

    font-size:11px;
    font-weight:800;
}


.process strong{
    font-size:13px;
}


.process small{
    margin-top:2px;

    color:var(--muted);
}


/* ==========================================================
   CARDS
   ========================================================== */

.intro-grid,
.feature-grid{
    display:grid;

    grid-template-columns:
        repeat(4,minmax(0,1fr));

    gap:14px;

    margin-top:20px;
}


.info-card,
.feature-card,
.compliance-card,
.delivery-step,
.price-card{
    background:#fff;

    border:1px solid var(--line);
    border-radius:9px;
}


.info-card{
    padding:19px;
}


.card-icon{
    width:41px;
    height:41px;

    display:grid;
    place-items:center;

    margin-bottom:16px;

    border-radius:6px;

    background:var(--green-soft);

    color:var(--green);

    font-size:12px;
    font-weight:800;
}


.info-card h3,
.feature-card h3{
    margin:0 0 8px;

    color:var(--navy);

    font-size:15px;
}


.info-card p,
.feature-card p{
    margin:0;

    color:var(--muted);

    font-size:13px;
    line-height:1.55;
}


.statement{
    margin-top:28px;

    padding:23px;

    display:flex;
    justify-content:space-between;
    align-items:center;

    gap:20px;

    border-radius:9px;

    background:var(--navy);

    color:#fff;
}


.statement strong{
    font-size:18px;
}


.statement span{
    color:#c2d7cb;

    font-size:11px;
    font-weight:800;

    letter-spacing:.08em;
}


/* ==========================================================
   DELIVERY
   ========================================================== */

.delivery-grid{
    display:grid;

    grid-template-columns:
        repeat(5,minmax(0,1fr));

    gap:12px;
}


.delivery-step{
    position:relative;

    min-height:225px;

    padding:20px;
}


.step-number{
    display:block;

    margin-bottom:30px;

    color:#9eabb2;

    font-size:11px;
    font-weight:800;
}


.delivery-step h3{
    margin:0 0 10px;

    color:var(--navy);

    font-size:15px;
}


.delivery-step p{
    margin:0;

    color:var(--muted);

    font-size:13px;
    line-height:1.55;
}


/* ==========================================================
   FEATURES
   ========================================================== */

.feature-card{
    min-height:165px;

    padding:20px;
}


/* ==========================================================
   COMPLIANCE
   ========================================================== */

.management-ladder{
    display:grid;

    grid-template-columns:
        repeat(5,minmax(0,1fr));

    gap:6px;

    margin:
        5px
        0
        32px;
}


.management-ladder article{
    min-height:180px;

    padding:18px;

    background:#fff;

    border:
        1px solid
        var(--line);

    border-top:
        4px solid
        var(--green);
}


.level{
    width:31px;
    height:31px;

    display:grid;
    place-items:center;

    margin-bottom:20px;

    border-radius:50%;

    background:var(--navy);
    color:#fff;

    font-size:12px;
    font-weight:800;
}


.management-ladder strong{
    color:var(--navy);

    font-size:14px;
}


.management-ladder p{
    margin:7px 0 0;

    color:var(--muted);

    font-size:12px;
    line-height:1.5;
}


.compliance-grid{
    display:grid;

    grid-template-columns:
        repeat(4,minmax(0,1fr));

    gap:14px;
}


.compliance-card{
    padding:19px;
}


.compliance-tag{
    color:var(--green);

    font-size:9px;
    font-weight:800;

    letter-spacing:.08em;
}


.compliance-card h3{
    margin:8px 0 10px;

    color:var(--navy);

    font-size:18px;
}


.compliance-card p{
    min-height:90px;

    margin:0 0 14px;

    color:var(--muted);

    font-size:12px;
    line-height:1.55;
}


.compliance-card strong{
    font-size:11px;
}


.legal-note{
    margin-top:20px;

    padding:16px 18px;

    display:grid;

    grid-template-columns:
        120px
        1fr;

    gap:12px;

    border:
        1px solid
        #e0d19d;

    border-radius:7px;

    background:#fffaf0;
}


.legal-note strong{
    color:#69541b;
}


.legal-note p{
    margin:0;

    color:#665d44;

    font-size:12px;
    line-height:1.55;
}


/* ==========================================================
   PRICING
   ========================================================== */

.price-grid{
    display:grid;

    grid-template-columns:
        repeat(2,minmax(0,1fr));

    gap:18px;

    max-width:950px;
}


.price-card{
    padding:26px;
}


.price-card.featured{
    border:
        2px solid
        var(--green);
}


.price-label{
    color:var(--green);

    font-size:10px;
    font-weight:800;

    letter-spacing:.09em;
}


.price{
    margin-top:8px;

    color:var(--navy);

    font-size:48px;
    font-weight:800;

    letter-spacing:-.04em;
}


.price-sub{
    min-height:42px;

    color:var(--muted);

    font-size:12px;
}


.price-sub strong{
    display:block;

    margin-top:3px;

    color:var(--green);
}


.price-card h3{
    margin:
        20px
        0
        14px;

    color:var(--navy);

    font-size:15px;
}


.price-card ul{
    margin:0;
    padding-left:19px;

    color:#53636c;

    font-size:13px;
    line-height:1.75;
}


.example{
    max-width:950px;

    margin-top:18px;

    display:grid;

    grid-template-columns:
        .9fr
        1.6fr;

    gap:24px;

    padding:22px;

    background:var(--navy);

    border-radius:9px;

    color:#fff;
}


.example h2{
    margin:0;

    font-size:18px;
}


.example-numbers{
    display:grid;

    grid-template-columns:
        repeat(3,1fr);

    gap:12px;
}


.example-numbers div{
    padding-left:12px;

    border-left:
        1px solid
        rgba(255,255,255,.25);
}


.example-numbers span{
    display:block;

    margin-bottom:5px;

    color:#b8c8d0;

    font-size:10px;
}


.example-numbers strong{
    font-size:20px;
}


.price-note{
    max-width:950px;

    color:var(--muted);

    font-size:11px;
    line-height:1.55;
}


/* ==========================================================
   LOGIN
   ========================================================== */

.login-panel{
    max-width:570px;

    margin:
        55px
        auto;

    padding:38px;

    text-align:center;

    background:#fff;

    border:1px solid var(--line);
    border-radius:12px;

    box-shadow:
        0 12px 35px
        rgba(20,40,50,.07);
}


.login-symbol{
    width:58px;
    height:58px;

    display:grid;
    place-items:center;

    margin:
        0 auto
        22px;

    border-radius:9px;

    background:var(--navy);
    color:#fff;

    font-weight:800;
}


.login-panel h1{
    margin:0 0 12px;

    color:var(--navy);

    font-size:31px;
}


.login-panel p{
    max-width:440px;

    margin:
        0 auto
        25px;

    color:var(--muted);

    line-height:1.6;
}


.login-button{
    display:inline-block;

    padding:12px 22px;

    border-radius:6px;

    background:var(--green);
    color:#fff;

    text-decoration:none;

    font-weight:750;
}


.login-panel small{
    display:block;

    margin-top:18px;

    color:#86929a;
}


/* ==========================================================
   FOOTER
   ========================================================== */

.public-footer{
    min-height:76px;

    display:flex;
    justify-content:space-between;
    align-items:center;

    gap:20px;

    padding:
        18px
        clamp(18px,4vw,64px);

    background:#e9eef0;

    border-top:
        1px solid
        #d7e0e3;

    color:#63727b;

    font-size:11px;
}


.public-footer > div:first-child{
    display:flex;
    flex-direction:column;

    gap:3px;
}


.public-footer strong{
    color:var(--navy);

    font-size:14px;
}


/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media(max-width:1050px){

    .public-header{
        align-items:flex-start;
        flex-direction:column;

        gap:8px;
    }

    .public-tabs{
        width:100%;

        justify-content:flex-start;
    }

    .hero{
        grid-template-columns:1fr;
    }

    .intro-grid,
    .feature-grid,
    .compliance-grid{
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

    .delivery-grid,
    .management-ladder{
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }
}


@media(max-width:680px){

    .public-main{
        padding-top:24px;
    }

    .public-brand-text small{
        display:none;
    }

    .hero{
        gap:20px;

        min-height:auto;
    }

    .intro-grid,
    .feature-grid,
    .compliance-grid,
    .delivery-grid,
    .management-ladder,
    .price-grid,
    .example,
    .example-numbers{
        grid-template-columns:1fr;
    }

    .statement{
        align-items:flex-start;
        flex-direction:column;
    }

    .legal-note{
        grid-template-columns:1fr;
    }

    .example-numbers div{
        padding:
            8px
            0
            0;

        border-left:0;
        border-top:
            1px solid
            rgba(255,255,255,.2);
    }

    .public-footer{
        align-items:flex-start;
        flex-direction:column;
    }
}