/* Foundation: corporate navy, Sirius green, neutral surfaces. */
:root{
    --green:#197647;
    --green-hover:#115b36;
    --navy:#101e36;
    --ink:#182840;
    --muted:#64748b;
    --sage:#edf6f0;
    --line:#e1e7ef;
    --orange:#ca6a2c;
    --white:#fff;
    --radius:12px;
    --display:'Segoe UI',Arial,sans-serif;
    --body:'Segoe UI',Arial,sans-serif
}
*{
    box-sizing:border-box
}
html{
    scroll-behavior:smooth;
    scroll-padding-top:105px
}
body{
    margin:0;
    font:16px/1.65 var(--body);
    color:var(--ink);
    background:#fff
}
a{
    color:inherit;
    text-decoration:none
}
button,input{
    font:inherit
}
button{
    cursor:pointer
}
img{
    display:block;
    max-width:100%
}
h1,h2,h3,p{
    margin-top:0
}
h1,h2,h3{
    font-family:var(--display);
    line-height:1.17
}
h2{
    font-size:clamp(1.9rem,3vw,2.7rem);
    letter-spacing:-1.2px;
    font-weight:650
}
h3{
    font-size:1.15rem;
    font-weight:650
}
p{
    color:var(--muted)
}
:focus-visible{
    outline:3px solid #e58b49;
    outline-offset:4px
}
.wrap{
    width:calc(100% - 80px);
    max-width:1220px;
    margin-inline:auto
}
.skip-link{
    position:fixed;
    top:-100px;
    left:20px;
    z-index:100;
    background:#fff;
    padding:12px
}
.skip-link:focus{
    top:10px
}
.site-header{
    position:sticky;
    top:0;
    z-index:10;
    background:#fff;
    border-bottom:1px solid var(--line)
}
.nav{
    height:86px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:24px
}
.logo{
    width:168px;
    height:42px
}
.nav-links,.nav-actions{
    display:flex;
    gap:28px;
    align-items:center;
    font-size:13px;
    font-weight:600
}
.nav a:not(.button):hover,.text-link:hover{
    color:var(--green)
}
.button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:23px;
    border:1px solid var(--green);
    border-radius:7px;
    padding:14px 23px;
    background:var(--green);
    color:#fff;
    font-size:14px;
    font-weight:650;
    line-height:1.5;
    transition:background .15s,box-shadow .15s
}
.button:hover{
    background:var(--green-hover);
    box-shadow:0 5px 16px #103c2820
}
.button:disabled{
    opacity:.6;
    cursor:wait
}
.button.small{
    padding:11px 18px;
    font-size:13px
}
.text-link{
    font-size:14px;
    font-weight:600;
    color:var(--green)
}
.eyebrow{
    font-size:11px;
    font-weight:700;
    letter-spacing:1.8px;
    color:var(--green);
    margin-bottom:17px
}
.section{
    padding-block:90px
}
/* Product-led introduction and interactive ERP preview. */
.hero{
    position:relative;
    padding:64px 0 25px;
    background:linear-gradient(180deg,#101e36 0%,#132a46 70%,#f5f7fb 70%,#f5f7fb 100%)
}
.hero-intro{
    text-align:center
}
.hero-badge{
    display:inline-flex;
    align-items:center;
    gap:10px;
    border:1px solid #ffffff29;
    border-radius:30px;
    background:#ffffff08;
    padding:6px 14px;
    color:#cbd8e7;
    font-size:10px;
    letter-spacing:1.6px;
    margin-bottom:22px
}
.status-dot{
    width:6px;
    height:6px;
    display:inline-block;
    border-radius:50%;
    background:#72d899
}
.hero h1{
    font-size:clamp(2.4rem,4.1vw,3.7rem);
    font-weight:650;
    letter-spacing:-1.9px;
    color:white;
    margin:0 auto 22px;
    line-height:1.13
}
.hero h1 span{
    color:#77d6a5
}
.lead{
    font-size:17px;
    line-height:1.8;
    color:#b8c8dc;
    max-width:740px;
    margin:0 auto 25px
}
.actions{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:14px;
    flex-wrap:wrap
}
.hero .button:not(.outline-light){
    background:#218a54;
    border-color:#218a54
}
.hero .button:not(.outline-light):hover{
    background:#27a363
}
.outline-light{
    background:#ffffff08;
    border-color:#6c7b90;
    color:#fff
}
.outline-light:hover{
    background:#ffffff16
}
.hero-assurances{
    display:flex;
    justify-content:center;
    gap:28px;
    color:#afc0d4;
    font-size:11px;
    margin:18px 0 40px
}
.platform-preview{
    border:1px solid #42516a;
    border-radius:12px;
    overflow:hidden;
    box-shadow:0 25px 65px #0d193030;
    background:white;
    scroll-margin-top:105px
}
.preview-toolbar{
    height:37px;
    background:#e9eef4;
    border-bottom:1px solid #dbe2ea;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:0 16px;
    font-size:10px;
    color:#65748a
}
.window-dots{
    color:#9eafc0;
    letter-spacing:3px;
    margin-right:20px;
    font-size:10px
}
.preview-caption{
    font-size:8px;
    letter-spacing:1px
}
.erp-shell{
    display:grid;
    grid-template-columns:205px minmax(0,1fr)
}
.erp-sidebar{
    border-right:1px solid var(--line);
    background:white;
    padding:22px 13px 16px;
    display:flex;
    flex-direction:column
}
.erp-sidebar>img{
    margin:0 12px 24px
}
.workspace-name,.sidebar-bottom{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:9px;
    font-weight:600
}
.workspace-name{
    border:1px solid var(--line);
    padding:9px 6px;
    border-radius:6px;
    margin-bottom:24px
}
.workspace-name small,.sidebar-bottom small{
    display:block;
    font-size:8px;
    color:var(--muted);
    font-weight:400
}
.workspace-avatar,.user-avatar{
    display:grid;
    place-items:center;
    width:27px;
    height:27px;
    border-radius:6px;
    background:#edf2f8;
    color:#56708d;
    font-size:9px;
    flex-shrink:0
}
.sidebar-label{
    font-size:8px;
    letter-spacing:1.3px;
    color:#8493a6;
    margin:0 9px 8px
}
.module-switcher{
    display:grid;
    gap:5px
}
.module-button{
    display:flex;
    align-items:center;
    gap:11px;
    padding:10px 11px;
    background:transparent;
    border:0;
    border-radius:5px;
    color:#64748b;
    text-align:left;
    font-size:10px;
    white-space:nowrap
}
.module-button>span{
    font-size:16px;
    line-height:1
}
.module-button:hover{
    background:#f3f6fa
}
.module-button.active{
    background:#eaf5ee;
    color:#187044;
    font-weight:600
}
.secondary-label{
    margin-top:23px
}
.sidebar-static{
    display:grid;
    gap:15px;
    margin:8px 12px;
    font-size:10px;
    color:#697b90
}
.sidebar-bottom{
    border-top:1px solid var(--line);
    margin-top:auto;
    padding:20px 7px 0
}
.erp-content{
    background:#f5f7fb;
    min-width:0
}
.erp-topbar{
    height:52px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:0 25px;
    border-bottom:1px solid var(--line);
    background:#fff;
    color:#7c8ba0;
    font-size:10px
}
.erp-topbar>span>span{
    margin-inline:10px
}
.erp-topbar strong{
    font-weight:500;
    color:#34445b
}
.preview-account{
    display:flex;
    align-items:center;
    gap:12px;
    font-size:9px
}
.erp-main{
    padding:24px
}
.dashboard-heading{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:15px;
    margin-bottom:22px
}
.dashboard-eyebrow{
    font-size:7px;
    letter-spacing:1.2px;
    color:#8795a8;
    margin-bottom:5px
}
.dashboard-heading h2{
    font-size:21px;
    letter-spacing:-.5px;
    margin:0 0 6px;
    font-weight:650
}
.dashboard-heading p:last-child{
    font-size:10px;
    margin:0;
    color:#7c8a9e
}
.date-label{
    border:1px solid var(--line);
    background:#fff;
    padding:7px 10px;
    border-radius:5px;
    font-size:9px;
    color:#53657c;
    white-space:nowrap
}
.date-label span{
    margin-left:14px
}
.metrics{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:13px;
    margin-bottom:18px
}
.metric{
    position:relative;
    border:1px solid var(--line);
    border-radius:8px;
    background:#fff;
    padding:17px 15px
}
.metric>span:first-child{
    font-size:10px;
    color:#697c91
}
.metric strong{
    display:block;
    font-size:26px;
    letter-spacing:-.8px;
    font-weight:650;
    line-height:1.6;
    white-space:nowrap
}
.metric small{
    font-size:10px;
    font-weight:400;
    color:#77879b;
    letter-spacing:0
}
.metric em{
    font-size:8px;
    font-style:normal;
    color:#7d8d9f
}
.metric-icon{
    position:absolute;
    right:12px;
    top:13px;
    display:grid;
    place-items:center;
    width:25px;
    height:25px;
    background:#ecf7ef;
    border-radius:7px;
    color:#238853;
    font-size:14px
}
.metric-icon.blue{
    background:#eef3ff;
    color:#537fc1
}
.metric-icon.orange{
    background:#fff3e8;
    color:#c38447
}
.analytics-grid{
    display:grid;
    grid-template-columns:minmax(0,1.9fr) minmax(0,1fr);
    gap:16px
}
.chart-panel,.balance-panel,.transactions{
    border:1px solid var(--line);
    border-radius:8px;
    background:white;
    padding:17px
}
.panel-heading{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:10px;
    font-size:11px;
    margin-bottom:15px
}
.panel-heading>span{
    font-size:8px;
    color:#8291a4
}
.panel-heading i,.balance-legend i{
    display:inline-block;
    width:6px;
    height:6px;
    border-radius:50%;
    background:#238453;
    margin-right:5px
}
.chart-layout{
    display:flex;
    gap:12px;
    margin-top:22px
}
.chart-axis{
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    padding:0 0 25px;
    font-size:7px;
    color:#8b99aa;
    min-width:30px
}
.chart-area{
    flex:1;
    min-width:0
}
.chart-area svg{
    width:100%;
    height:145px;
    display:block
}
.chart-days{
    display:flex;
    justify-content:space-between;
    font-size:7px;
    color:#8b99aa;
    margin-top:12px
}
.balance-ring{
    border-radius:50%;
    width:131px;
    height:131px;
    margin:4px auto 12px;
    background:conic-gradient(#268757 0deg 265deg,#e7a66b 265deg 360deg);
    padding:14px;
    transform:rotate(-90deg)
}
.balance-ring>div{
    border-radius:50%;
    height:100%;
    background:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    transform:rotate(90deg)
}
.balance-ring span{
    font-size:7px;
    color:#8794a7
}
.balance-ring strong{
    font-size:20px;
    letter-spacing:-.6px
}
.balance-legend{
    display:grid;
    gap:4px;
    font-size:8px;
    color:#7d8b9c
}
.balance-legend span{
    display:flex;
    align-items:center
}
.balance-legend b{
    margin-left:auto;
    color:#37485e;
    font-weight:500
}
.balance-legend span:last-child i{
    background:#e7a66b
}
.transactions{
    margin-top:16px;
    padding-bottom:4px
}
.table-scroll{
    overflow-x:auto
}
.transactions table{
    border-collapse:collapse;
    width:100%;
    font-size:9px;
    text-align:left;
    white-space:nowrap
}
.transactions th{
    font-size:8px;
    font-weight:500;
    color:#8491a2;
    background:#f7f9fb
}
.transactions th,.transactions td{
    padding:10px;
    border-bottom:1px solid #edf1f6
}
.transactions td:last-child,.transactions th:last-child{
    text-align:right
}
.transactions tr:last-child td{
    border-bottom:0
}
.state{
    border-radius:4px;
    padding:3px 7px;
    font-size:8px
}
.paid{
    background:#eaf6ef;
    color:#2a8559
}
.pending{
    background:#fff4e4;
    color:#ac7b2c
}
.preview-hint{
    text-align:center;
    font-size:10px;
    margin:21px 18px 0;
    color:#7b899c
}
/* Modules and operational narrative. */
.audiences{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    border-bottom:1px solid var(--line);
    padding-block:32px
}
.audiences>span:first-child{
    font-size:9px;
    letter-spacing:1px;
    max-width:170px;
    color:#8a96a6
}
.audiences strong{
    font-size:15px;
    font-weight:600;
    color:#53647c
}
.audiences>span:not(:first-child){
    color:#c6cfdc;
    font-size:13px
}
.section-heading{
    display:flex;
    justify-content:space-between;
    align-items:end;
    gap:70px;
    margin-bottom:36px
}
.section-heading h2{
    margin-bottom:0
}
.section-heading>p{
    max-width:350px;
    font-size:14px;
    margin-bottom:4px
}
.feature-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:20px
}
.feature{
    background:linear-gradient(140deg,#eff8f2,#f8fbf9);
    border:1px solid #d8e9de;
    border-radius:10px;
    padding:26px;
    transition:border-color .2s,box-shadow .2s
}
.feature:hover{
    border-color:#b9d6c6;
    box-shadow:0 12px 26px #13283b09
}
.feature-icon{
    width:43px;
    height:43px;
    display:grid;
    place-items:center;
    background:#edf6f0;
    color:#247d50;
    border:1px solid #deece3;
    border-radius:10px;
    font-size:24px;
    margin-bottom:22px
}
.feature:nth-child(3n+2) .feature-icon{
    background:#edf2fc;
    color:#5876a8;
    border-color:#e1e8f6
}
.feature:nth-child(3n) .feature-icon{
    background:#fff5eb;
    color:#ba7f40;
    border-color:#f4e9da
}
.feature h3{
    margin-bottom:13px
}
.feature p{
    font-size:13px;
    line-height:1.8;
    margin-bottom:22px
}
.feature-caption{
    display:block;
    border-top:1px solid #edf0f5;
    padding-top:14px;
    font-size:10px;
    color:#8492a5
}
.module-note{
    margin:25px 0 0;
    font-size:11px;
    text-align:center
}
.workflow{
    background:#f4f7fb;
    border-block:1px solid #e8edf4;
    padding:70px 0
}
.workflow-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:100px;
    align-items:center
}
.workflow-grid>div>p:not(.eyebrow){
    max-width:430px;
    font-size:14px
}
.day-card{
    background:#fff;
    border:1px solid var(--line);
    border-radius:12px;
    padding:30px 36px;
    box-shadow:0 12px 35px #162b4010
}
.day-card>div{
    display:flex;
    gap:25px;
    border-bottom:1px solid var(--line);
    padding:20px 0
}
.day-card>div>span{
    font:11px Consolas,monospace;
    color:var(--green);
    padding-top:4px
}
.day-card p{
    margin-bottom:0;
    font-size:13px
}
.day-card strong{
    display:block;
    margin-bottom:5px;
    color:var(--ink);
    font-weight:600
}
.day-card small{
    font-size:10px;
    color:var(--muted);
    display:block;
    margin-top:18px
}
/* Pricing, objections, and closing action. */
.center-heading{
    text-align:center;
    margin-bottom:40px
}
.center-heading h2{
    margin-bottom:17px
}
.center-heading>p:last-child{
    font-size:14px
}
.pricing-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr));
    gap:22px
}
.plan{
    position:relative;
    border:1px solid var(--line);
    border-top:4px solid #e79349;
    border-radius:12px;
    padding:30px;
    display:flex;
    flex-direction:column;
    background:#fff
}
.plan:nth-child(2){
    background:linear-gradient(155deg,#edf8f1 0%,#fff 65%);
    border:2px solid var(--green);
    padding:29px;
    box-shadow:0 12px 35px #16482b10
}
.plan h3{
    font-size:20px;
    margin-bottom:13px
}
.plan>p{
    font-size:12px;
    min-height:54px
}
.price{
    font-size:34px;
    font-weight:650;
    letter-spacing:-1px;
    border-top:1px solid var(--line);
    padding-top:20px;
    margin:5px 0 25px
}
.price span{
    display:block;
    font-size:11px;
    color:var(--muted);
    letter-spacing:0;
    font-weight:400
}
.plan .button{
    width:100%;
    font-size:12px
}
.plan:not(:nth-child(2)) .button{
    background:#edf6f0;
    color:var(--green);
    border-color:#d4e6dc
}
.plan:not(:nth-child(2)) .button:hover{
    background:#dcefe4
}
.plan ul{
    list-style:none;
    padding:0;
    font-size:12px;
    margin-bottom:0
}
.plan li{
    position:relative;
    padding:7px 0 7px 20px;
    line-height:1.7;
    color:#5e7086
}
.plan li::before{
    content:'✓';
    position:absolute;
    left:0;
    color:var(--green);
    font-weight:700
}
.pricing-note{
    font-size:11px;
    text-align:center;
    max-width:660px;
    margin:24px auto 0
}
.empty-state{
    grid-column:1/-1;
    border-radius:12px;
    background:#f5f8fb;
    text-align:center;
    padding:35px
}
.empty-state p{
    font-size:14px
}
.faq-section{
    display:grid;
    grid-template-columns:1fr 1.2fr;
    gap:80px;
    border-top:1px solid var(--line)
}
.faq-section>div>p:last-child{
    font-size:14px
}
.faq-list details{
    border-bottom:1px solid var(--line);
    padding:20px 0
}
.faq-list details:first-child{
    padding-top:0
}
.faq-list summary{
    list-style:none;
    display:flex;
    justify-content:space-between;
    gap:20px;
    font-size:14px;
    font-weight:600;
    cursor:pointer
}
.faq-list summary::-webkit-details-marker{
    display:none
}
.faq-list summary span{
    font-size:22px;
    font-weight:400;
    color:#6e7e92
}
.faq-list details[open] summary span{
    transform:rotate(45deg)
}
.faq-list details p{
    font-size:13px;
    margin:12px 30px 0 0
}
.final-section{
    padding-bottom:65px
}
.final-cta{
    background:linear-gradient(120deg,#111f37,#203c55);
    border:1px solid #29465d;
    border-radius:16px;
    text-align:center;
    padding:65px 24px;
    color:#fff
}
.final-cta .eyebrow{
    color:#83bca2
}
.final-cta h2{
    font-size:clamp(1.8rem,3vw,2.7rem)
}
.button.light{
    background:#fff;
    color:var(--navy);
    border-color:#fff
}
.button.light:hover{
    background:#e9f1ec
}
.final-cta>p:last-child{
    font-size:12px;
    color:#a3b5c9;
    margin:18px 0 0
}
.footer{
    border-top:1px solid var(--line);
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:25px;
    padding-block:30px
}
.footer>span,.footer>a{
    font-size:12px
}
.footer small{
    font-size:10px;
    color:var(--muted);
    width:100%
}
/* Registration: native dialog, keyboard focus and browser validation. */
.signup-dialog{
    border:1px solid var(--line);
    border-radius:14px;
    width:min(560px,calc(100% - 32px));
    max-height:90vh;
    padding:30px;
    color:var(--ink)
}
.signup-dialog::backdrop{
    background:#0a172cb5
}
.dialog-heading{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px
}
.dialog-heading h2{
    font-size:24px;
    letter-spacing:-.5px;
    margin:0
}
.close-dialog{
    background:#f1f4f8;
    border:0;
    border-radius:50%;
    width:38px;
    height:38px;
    font-size:24px;
    flex-shrink:0
}
.signup-dialog>p{
    font-size:13px;
    margin-top:14px
}
.form-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px
}
.form-field label{
    display:block;
    font-size:12px;
    font-weight:600;
    margin-bottom:5px
}
.form-field input{
    width:100%;
    min-width:0;
    padding:10px 12px;
    border:1px solid #aebccb;
    border-radius:6px
}
.form-field.wide{
    grid-column:1/-1
}
.form-note{
    font-size:11px;
    margin:18px 0
}
.form-status{
    font-size:13px;
    color:#993e20;
    min-height:22px;
    margin:14px 0
}
.signup-dialog form>.button{
    width:100%
}
/* Responsive layout: keep the demo legible instead of shrinking a desktop image. */
@media(max-width:1050px){
    .wrap{
        width:calc(100% - 48px)
    }
    .nav-links,.nav-actions{
        gap:18px
    }
    .erp-shell{
        grid-template-columns:175px minmax(0,1fr)
    }
    .erp-main{
        padding:18px
    }
    .metric{
        padding:15px 11px
    }
    .metric strong{
        font-size:23px
    }
    .metric-icon{
        display:none
    }
    .erp-sidebar{
        padding-inline:9px
    }
    .module-button{
        font-size:9px;
        gap:7px
    }
    .workspace-name{
        font-size:8px
    }
    .workspace-name small{
        font-size:7px
    }
    .balance-ring{
        width:117px;
        height:117px
    }
    .workflow-grid{
        gap:45px
    }
    .feature{
        padding:22px
    }
    .section-heading{
        gap:40px
    }
    .faq-section{
        gap:45px
    }
}
@media(max-width:760px){
    .wrap{
        width:calc(100% - 36px)
    }
    .nav{
        height:74px;
        gap:12px
    }
    .logo{
        width:130px;
        height:auto
    }
    .nav-links{
        display:none
    }
    .nav-actions{
        gap:15px;
        font-size:12px
    }
    .button.small{
        padding:10px 12px;
        font-size:11px
    }
    .hero{
        padding-top:40px;
        background:linear-gradient(180deg,#101e36 0%,#142b47 80%,#f5f7fb 80%)
    }
    .hero h1{
        font-size:clamp(2rem,6vw,2.8rem);
        letter-spacing:-1.1px;
        line-height:1.16
    }
    .hero h1 br{
        display:none
    }
    .lead{
        font-size:14px;
        max-width:520px
    }
    .lead br{
        display:none
    }
    .hero-badge{
        font-size:8px;
        letter-spacing:1px;
        padding:6px 10px
    }
    .hero-assurances{
        gap:8px 16px;
        flex-wrap:wrap;
        margin:18px 0 30px;
        font-size:9px
    }
    .actions .button{
        font-size:12px;
        padding:12px 17px;
        gap:15px
    }
    .erp-shell{
        display:block
    }
    .erp-sidebar{
        padding:10px;
        border-right:0;
        border-bottom:1px solid var(--line)
    }
    .erp-sidebar>img,.workspace-name,.sidebar-label,.sidebar-static,.sidebar-bottom{
        display:none
    }
    .module-switcher{
        display:grid;
        grid-template-columns:repeat(4,minmax(0,1fr));
        gap:4px
    }
    .module-button{
        flex-direction:column;
        gap:5px;
        font-size:8px;
        padding:9px 3px;
        white-space:normal;
        text-align:center;
        line-height:1.4;
        justify-content:center
    }
    .preview-caption{
        font-size:6px;
        letter-spacing:.4px
    }
    .preview-toolbar{
        padding-inline:10px;
        font-size:8px;
        height:31px
    }
    .window-dots{
        font-size:7px;
        margin-right:8px
    }
    .erp-topbar{
        height:39px;
        padding:0 14px;
        font-size:8px
    }
    .preview-account{
        font-size:0;
        gap:0
    }
    .user-avatar{
        font-size:8px;
        width:22px;
        height:22px
    }
    .erp-main{
        padding:15px
    }
    .dashboard-heading{
        margin-bottom:14px
    }
    .dashboard-heading h2{
        font-size:17px
    }
    .dashboard-heading p:last-child{
        font-size:8px;
        max-width:200px
    }
    .dashboard-eyebrow{
        font-size:6px
    }
    .date-label{
        display:none
    }
    .metrics{
        gap:7px;
        margin-bottom:12px
    }
    .metric{
        padding:10px 8px;
        border-radius:6px
    }
    .metric>span:first-child{
        font-size:8px
    }
    .metric strong{
        font-size:18px;
        line-height:1.7;
        letter-spacing:-.5px
    }
    .metric small{
        font-size:7px
    }
    .metric em{
        font-size:6px;
        display:block
    }
    .analytics-grid{
        grid-template-columns:1fr
    }
    .balance-panel{
        display:none
    }
    .chart-panel,.transactions{
        padding:12px
    }
    .panel-heading{
        font-size:9px;
        margin-bottom:12px
    }
    .panel-heading>span{
        font-size:7px
    }
    .chart-layout{
        margin-top:16px
    }
    .chart-area svg{
        height:125px
    }
    .chart-days{
        font-size:6px
    }
    .chart-axis{
        font-size:6px
    }
    .transactions{
        margin-top:12px
    }
    .transactions table{
        font-size:8px
    }
    .transactions th,.transactions td{
        padding:8px 5px
    }
    .transactions th{
        font-size:7px
    }
    .transactions th:nth-child(2),.transactions td:nth-child(2){
        display:none
    }
    .state{
        font-size:7px;
        padding:3px 4px
    }
    .preview-hint{
        font-size:9px;
        max-width:300px;
        margin-inline:auto;
        padding-inline:10px
    }
    .audiences{
        flex-wrap:wrap;
        justify-content:center;
        gap:12px 18px;
        padding-block:24px
    }
    .audiences>span:first-child{
        width:100%;
        max-width:none;
        text-align:center;
        font-size:8px
    }
    .audiences strong{
        font-size:12px
    }
    .section{
        padding-block:58px
    }
    .section-heading{
        display:block;
        margin-bottom:25px
    }
    .section-heading>p{
        margin-top:20px;
        max-width:100%
    }
    .feature-grid{
        grid-template-columns:1fr 1fr;
        gap:12px
    }
    .feature{
        padding:19px
    }
    .feature h3{
        font-size:16px
    }
    .feature p{
        font-size:12px
    }
    .feature-caption{
        font-size:9px
    }
    .workflow{
        padding-block:50px
    }
    .workflow-grid{
        grid-template-columns:1fr;
        gap:25px
    }
    .day-card{
        padding:25px
    }
    .faq-section{
        grid-template-columns:1fr;
        gap:24px
    }
    .final-section{
        padding-bottom:40px
    }
    .final-cta{
        padding:45px 20px
    }
    .footer>span{
        width:100%
    }
    .footer{
        gap:20px
    }
    .form-grid{
        grid-template-columns:1fr
    }
    .form-field.wide{
        grid-column:auto
    }
    .signup-dialog{
        padding:22px
    }
}
@media(max-width:460px){
    .feature-grid{
        grid-template-columns:1fr
    }
    .feature{
        padding:24px
    }
    .feature-icon{
        margin-bottom:16px
    }
    .hero h1{
        font-size:32px
    }
    .metric strong{
        font-size:16px
    }
    .metric small{
        font-size:6px
    }
    .metric{
        padding:9px 6px
    }
    .metric em{
        font-size:6px
    }
    .module-button{
        font-size:7px
    }
    .erp-main{
        padding:12px
    }
    .nav-actions{
        gap:12px
    }
    .logo{
        width:118px
    }
    .hero-assurances span:last-child{
        display:none
    }
    .panel-heading>span{
        font-size:6px
    }
}
@media(prefers-reduced-motion:reduce){
    html{
        scroll-behavior:auto
    }
    *,*::before,*::after{
        transition:none!important;
        animation:none!important
    }
}

.module-button svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* Brand colour surfaces: strong accents paired with readable text. */
.feature:nth-child(3n+2) {
    background: linear-gradient(135deg, #fff2e5, #fffbf6);
    border-color: #f1ddc8;
}
.feature:nth-child(3n) {
    background: linear-gradient(140deg, #edf2f9, #f8fafc);
    border-color: #dce5ef;
}
.feature:first-child {
    background: linear-gradient(135deg, #15623c, #218752);
    border-color: #22794c;
    color: #fff;
}
.feature:first-child p { color: #e0f1e6; }
.feature:first-child .feature-icon {
    background: #ffffff18;
    border-color: #ffffff35;
    color: #fff;
}
.feature:first-child .feature-caption {
    color: #e0f1e6;
    border-color: #ffffff30;
}
.feature:nth-child(3n+2) .feature-icon {
    background: #f9dfc3;
    color: #965219;
    border-color: #edcca8;
}
.feature:nth-child(3n) .feature-icon {
    background: #dfe9f6;
    color: #385d89;
    border-color: #cedbef;
}
.feature-caption { color: #5c6b7b; }
.day-card { border-top: 4px solid #e79349; }
/* Footer is a separate component so its layout does not inherit card styles. */
.site-footer {
    background: #101e32;
    border-top: 4px solid #238452;
    color: #d5deea;
}
.footer-intro {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    padding: 38px 0;
    border-bottom: 1px solid #ffffff18;
}
.footer-kicker {
    color: #e9a16b;
    font-size: 9px;
    letter-spacing: 1.7px;
    font-weight: 650;
}
.footer-intro h2 {
    font-size: 23px;
    letter-spacing: -.5px;
    margin: 9px 0 0;
    color: #fff;
}
.footer-grid {
    display: grid;
    grid-template-columns: 1.6fr .85fr 1fr 1.1fr;
    gap: 45px;
    padding: 50px 0;
}
.footer-brand > p:first-of-type {
    font-size: 10px;
    letter-spacing: 1px;
    color: #d4ddea;
    margin-top: 12px;
}
.footer-brand p {
    color: #aabace;
    font-size: 12px;
    line-height: 1.9;
    max-width: 310px;
}
.footer-location { color: #b5c6d8; font-size: 10px; }
.footer-location span { color: #e9a16b; margin: 0 5px; }
.footer-column { display: flex; flex-direction: column; align-items: flex-start; gap: 11px; }
.footer-column h3 { color: #fff; font-size: 13px; margin: 0 0 10px; }
.footer-column a { color: #afc0d3; font-size: 12px; }
.site-footer a:hover { color: #fff; }
.footer-column p { color: #afc0d3; font-size: 12px; margin: 0; }
.footer-account {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 10px 13px;
    border: 1px solid #ffffff30;
    border-radius: 6px;
    margin: 7px 0;
}
.footer-payment { border-left: 2px solid #e79349; padding-left: 12px; margin-top: 8px; }
.footer-payment strong { display: block; color: #dbe4ef; font-size: 11px; font-weight: 600; }
.footer-payment span { display: block; color: #aabace; font-size: 10px; margin-top: 4px; }
.footer-bottom {
    border-top: 1px solid #ffffff18;
    padding: 22px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    color: #aabace;
    font-size: 10px;
}
@media (max-width: 1000px) {
    .footer-grid { grid-template-columns: 1.4fr 1fr; gap: 36px; }
}
@media (max-width: 600px) {
    .footer-intro { flex-direction: column; align-items: flex-start; }
    .footer-intro h2 { font-size: 22px; }
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 30px 20px; padding: 35px 0; }
    .footer-brand, .footer-access { grid-column: 1 / -1; }
    .footer-brand p { max-width: 100%; }
    .footer-bottom { align-items: flex-start; flex-direction: column; gap: 12px; }
}