:root{
    --navy:#142B49;
    --orange:#F28C28;
    --white:#FFFFFF;
    --line:#dbe4ef;
    --soft:#f1f6fc;
    --ink:#142B49;
    color:var(--ink);
    font-family:Arial,Helvetica,sans-serif
}
html{
    scroll-behavior:smooth
}
body{
    background:#fff
}
.icon{
    display:inline-block;
    width:26px;
    height:26px;
    vertical-align:middle;
    flex-shrink:0
}
h1,h2,h3{
    color:var(--navy);
    letter-spacing:-.035em;
    line-height:1.2
}
p{
    line-height:1.5
}
a{
    text-decoration:none
}
a:hover{
    text-decoration:underline
}
button{
    cursor:pointer
}
.button{
    white-space:normal;
    gap:.6rem;
    border-radius:9px;
    font-weight:700;
    min-height:46px;
    padding:.65rem 1.2rem;
    line-height:1.3
}
.button .icon{
    width:23px;
    height:23px
}
.button.orange{
    background:var(--orange);
    border-color:var(--orange);
    color:var(--navy)
}
.button.orange:hover{
    background:#f7a24e
}
.button.white{
    background:white;
    color:var(--navy);
    border-color:white
}
.button.danger{
    background:white;
    color:#9e2525;
    border-color:#9e2525
}
.estore-brand{
    display:flex;
    align-items:center;
    gap:4px;
    color:var(--navy);
    white-space:nowrap;
    line-height:1.1;
    text-decoration:none!important
}
.estore-brand>svg{
    width:54px;
    height:54px
}
.estore-brand b{
    font-size:clamp(1.3rem,2vw,2rem);
    letter-spacing:-.07em
}
.estore-brand em{
    font-style:normal;
    color:var(--orange)
}
.estore-brand small{
    display:block;
    text-align:center;
    font-size:.72rem;
    font-weight:700;
    margin-top:3px
}
.utility{
    background:var(--navy);
    color:white;
    padding:5px 4%;
    font-size:.8rem;
    display:flex;
    justify-content:space-between
}
.utility a{
    color:white
}
.public-header,.auth-header,.customer-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1rem;
    background:white;
    padding:14px 3%;
    border-bottom:1px solid var(--line)
}
.public-header nav{
    align-items:center;
    font-weight:700;
    gap:1.7rem
}
.public-header nav>a:not(.button){
    padding:.6rem 0
}
.landing-hero{
    background:var(--navy);
    color:white;
    display:grid;
    grid-template-columns:1.12fr 1fr;
    padding:32px 4% 0;
    min-height:340px;
    overflow:hidden;
    position:relative
}
.landing-hero h1{
    color:white;
    font-size:clamp(2rem,4.1vw,3.6rem);
    margin:0 0 12px;
    font-weight:800;
    letter-spacing:-.04em
}
.landing-hero h1 span{
    color:var(--orange)
}
.landing-hero>div>p{
    font-size:1.25rem;
    margin:.5rem 0 1rem
}
.hero-features{
    display:flex;
    gap:28px;
    margin:18px 0
}
.hero-features>span{
    display:flex;
    gap:12px;
    font-size:.9rem;
    line-height:1.3;
    font-weight:700;
    align-items:center
}
.hero-features .icon{
    width:32px;
    height:32px
}
.actions{
    display:flex;
    align-items:center;
    gap:12px;
    flex-wrap:wrap;
    margin:1rem 0
}
.landing-visual{
    position:relative;
    min-height:300px
}
.landing-content{
    max-width:1440px;
    padding:10px 2%;
    margin:auto
}
.process-cards{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:12px
}
.process-cards article{
    display:flex;
    gap:15px;
    align-items:center;
    border:1px solid var(--line);
    background:var(--soft);
    padding:16px;
    border-radius:14px
}
.process-cards .icon{
    width:42px;
    height:42px;
    color:var(--orange)
}
.process-cards h2{
    font-size:1.05rem;
    margin:0 0 5px
}
.process-cards p{
    font-size:.85rem;
    margin:0
}
.section-heading{
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    gap:20px;
    font-size:1.8rem;
    margin:26px 0 20px
}
.section-heading:before,.section-heading:after{
    content:'';
    height:2px;
    background:var(--orange);
    width:65px
}
.category-grid{
    display:grid;
    grid-template-columns:repeat(7,1fr);
    gap:10px
}
.category-grid a{
    border:1px solid var(--line);
    border-radius:14px;
    overflow:hidden;
    text-align:center;
    background:var(--soft)
}
.category-grid a>span{
    height:84px;
    display:grid;
    place-items:center
}
.category-grid .icon{
    width:46px;
    height:46px;
    color:var(--orange)
}
.category-grid b{
    display:block;
    background:var(--navy);
    color:white;
    padding:8px;
    font-size:.9rem
}
.category-grid .empty-state,.vendor-grid .empty-state{
    grid-column:1/-1
}
.store-search{
    background:#edf4fc;
    border:1px solid var(--line);
    border-radius:16px;
    padding:14px 20px;
    margin:24px 0
}
.store-search h2{
    font-size:1.3rem;
    margin:0
}
.store-search form{
    display:grid;
    grid-template-columns:repeat(4,1fr) 1.2fr;
    gap:15px;
    margin:10px 0 0
}
.how-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:25px
}
.how-grid article{
    display:flex;
    gap:16px;
    align-items:flex-start
}
.how-grid h3{
    font-size:1.1rem;
    margin:0 0 5px
}
.how-grid p{
    font-size:.9rem;
    margin:0
}
.step-icon{
    border-radius:50%;
    background:var(--orange);
    color:var(--navy);
    padding:12px
}
.step-icon .icon{
    width:32px;
    height:32px
}
.why-strip{
    display:flex;
    align-items:center;
    justify-content:space-around;
    gap:12px;
    background:var(--soft);
    border:1px solid var(--line);
    border-radius:16px;
    padding:20px;
    margin-top:24px
}
.why-strip h2{
    font-size:1.5rem;
    margin:0
}
.why-strip em{
    font-style:normal;
    color:#b95808
}
.why-strip>div{
    display:grid;
    gap:7px;
    justify-items:center;
    text-align:center;
    font-size:.9rem;
    max-width:130px
}
.why-strip .icon{
    color:var(--orange);
    width:32px;
    height:32px
}
.vendor-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px
}
.store-avatar{
    display:grid;
    place-items:center;
    background:var(--soft);
    border-radius:12px;
    width:68px;
    height:68px;
    color:var(--orange)
}
.store-avatar .icon{
    width:40px;
    height:40px
}
.join-banner{
    display:flex;
    gap:20px;
    justify-content:space-between;
    align-items:center;
    background:var(--navy);
    color:white;
    border-radius:16px;
    margin:24px 0;
    padding:24px
}
.join-banner h2{
    color:white;
    margin:0
}
.join-banner p{
    margin-bottom:0
}
.public-footer{
    background:var(--navy);
    color:white;
    display:grid;
    grid-template-columns:2fr repeat(4,1fr);
    gap:28px;
    padding:30px 4%;
    border:0
}
.public-footer .estore-brand{
    color:white
}
.public-footer h3{
    color:white;
    font-size:1rem;
    margin:10px 0
}
.public-footer a{
    color:white;
    display:block;
    margin:8px 0
}
.public-footer p{
    font-size:.85rem
}
.footer-bottom{
    grid-column:1/-1;
    border-top:1px solid #ffffff50;
    padding-top:20px;
    display:flex;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:10px
}
.footer-bottom a{
    display:inline
}
.page-container{
    max-width:1400px;
    margin:24px auto;
    padding:0 3%
}
.page-container.panel{
    padding:28px
}
.prose{
    max-width:900px
}
.prose li{
    margin:1rem 0
}
.page-banner{
    display:flex;
    align-items:center;
    gap:18px;
    background:var(--soft);
    padding:20px 24px;
    border-radius:16px;
    margin-bottom:18px;
    position:relative;
    overflow:hidden;
    border:1px solid var(--line)
}
.page-banner>.icon{
    width:56px;
    height:56px;
    color:var(--orange)
}
.page-banner h1{
    font-size:clamp(1.6rem,2.6vw,2.5rem);
    margin:0 0 6px
}
.page-banner p{
    margin:0
}
.page-banner>.button,.page-banner>form{
    margin-left:auto
}
.banner-percent{
    font-size:72px;
    font-weight:800;
    color:var(--orange);
    margin-left:auto;
    line-height:1
}
.panel{
    border:1px solid var(--line);
    border-radius:18px;
    background:white;
    padding:20px;
    box-shadow:0 2px 5px #142b4908;
    margin-bottom:18px;
    min-width:0
}
.panel h2{
    font-size:1.3rem;
    margin:0 0 14px;
    display:flex;
    align-items:center;
    gap:10px
}
.panel h2>.icon{
    color:var(--orange)
}
.two-columns{
    display:grid;
    grid-template-columns:1.15fr 1fr;
    gap:20px;
    align-items:start
}
.two-columns>div{
    min-width:0
}
.list-row{
    display:flex;
    gap:12px;
    align-items:center;
    justify-content:space-between;
    padding:14px 0;
    border-bottom:1px solid var(--line);
    overflow-wrap:anywhere
}
.list-row:last-child{
    border-bottom:0
}
.list-row h3{
    margin:0 0 5px
}
.list-row p{
    margin:0
}
.block{
    display:block
}
.badge{
    display:inline-block;
    white-space:nowrap;
    font-size:.8rem;
    font-weight:700;
    border-radius:20px;
    padding:4px 13px;
    background:#edf1f6;
    color:var(--navy)
}
.badge-issued,.badge-active,.badge-held{
    background:#e6f6e7;
    color:#1d6428
}
.badge-cancelled,.badge-expired,.badge-closed{
    background:#f1f1f1;
    color:#525b69
}
.badge-redeemed,.badge-posted,.badge-released{
    background:#edf3ff;
    color:var(--navy)
}
.notice{
    border:1px solid #b8d7c0;
    background:#effaf1;
    border-radius:10px;
    padding:14px;
    color:#20502c
}
.filter-bar{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    align-items:end;
    margin:14px 0 20px
}
.filter-bar input,.filter-bar select{
    width:auto;
    flex:1;
    min-width:120px
}
.filter-bar label{
    flex:1;
    min-width:140px;
    font-size:.9rem
}
.filter-bar label input{
    display:block;
    width:100%
}
.field{
    display:flex;
    flex-direction:column;
    gap:6px;
    font-size:.95rem;
    font-weight:700;
    margin:0
}
.field input,.field select,.field textarea{
    font-weight:400;
    color:var(--navy);
    border-color:#bbc6d6
}
.field input:read-only{
    background:#f5f7fa
}
.form-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:16px
}
.checkbox{
    display:flex;
    align-items:flex-start;
    gap:10px;
    font-weight:400;
    line-height:1.5
}
.checkbox input{
    width:20px;
    min-height:20px;
    margin-top:3px;
    accent-color:var(--navy)
}
form{
    gap:16px
}
.password-wrap{
    display:flex;
    position:relative
}
.password-wrap input{
    padding-right:65px
}
.password-toggle{
    position:absolute;
    right:7px;
    top:7px;
    bottom:7px;
    background:white;
    border:0;
    color:var(--navy);
    font-size:.8rem;
    padding:0 7px;
    min-height:32px
}
.auth-header{
    height:88px;
    padding:14px 3%
}
.auth-header>a:last-child{
    display:flex;
    align-items:center;
    gap:10px;
    font-size:1.15rem;
    font-weight:700
}
.auth-stage{
    background:var(--navy);
    display:grid;
    grid-template-columns:46% 54%;
    padding:32px 2.5%;
    min-height:840px;
    position:relative;
    gap:0
}
.auth-story{
    padding:10px 20px 20px 10px;
    color:white;
    position:relative
}
.auth-story h1{
    font-size:clamp(2.3rem,4.2vw,4rem);
    color:white;
    margin:0
}
.auth-story h1 span{
    color:var(--orange)
}
.auth-story>p{
    font-size:clamp(1.05rem,2vw,1.6rem);
    margin-top:18px;
    max-width:470px
}
.auth-panel{
    background:white;
    border-radius:28px;
    padding:30px;
    align-self:start;
    box-shadow:0 10px 25px #00000015;
    z-index:1;
    min-width:0
}
.auth-panel h1{
    font-size:clamp(1.6rem,2.6vw,2.5rem);
    margin:24px 0 8px
}
.auth-panel h1>.icon{
    width:40px;
    height:40px;
    color:var(--orange);
    margin-right:12px
}
.auth-subtitle{
    font-size:1.2rem;
    color:#526175;
    margin:0 0 26px
}
.auth-tabs,.identity-tabs{
    display:flex;
    gap:10px;
    margin-bottom:24px
}
.auth-tabs a{
    display:flex;
    gap:12px;
    align-items:center;
    justify-content:center;
    flex:1;
    padding:15px 10px;
    border:1px solid var(--navy);
    border-radius:12px;
    font-weight:700;
    font-size:1.2rem
}
.auth-tabs a.selected{
    background:var(--navy);
    color:white
}
.identity-tabs>*{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    flex:1;
    border:1px solid var(--line);
    border-radius:10px;
    padding:12px;
    font-size:.9rem
}
.identity-tabs>.selected{
    border-color:var(--navy);
    background:var(--soft);
    font-weight:700
}
.auth-panel form>.button{
    font-size:1.3rem;
    padding:15px
}
.forgot-link{
    text-align:right;
    font-weight:700
}
.auth-bottom{
    text-align:center;
    margin:26px 0 0
}
.auth-bottom a{
    font-weight:700;
    color:#a34a03;
    margin-left:8px
}
.story-features{
    background:white;
    color:var(--navy);
    border-radius:20px;
    padding:10px;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:6px;
    position:relative;
    margin-top:30px
}
.story-features>div{
    display:flex;
    flex-direction:column;
    gap:10px;
    text-align:center;
    align-items:center;
    background:var(--soft);
    border-radius:14px;
    padding:16px 7px;
    font-size:.9rem;
    line-height:1.2
}
.story-features .icon{
    width:40px;
    height:40px;
    color:var(--orange)
}
.trust-strip{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
    background:var(--soft);
    padding:30px 4%;
    margin:0
}
.trust-strip>div{
    display:flex;
    align-items:center;
    gap:20px;
    justify-content:center
}
.trust-strip .icon{
    width:44px;
    height:44px;
    color:var(--orange)
}
.trust-strip b{
    display:block;
    font-size:1.3rem
}
.trust-strip small{
    font-size:.95rem
}
.shopping-art{
    position:relative;
    height:280px;
    max-width:440px;
    margin:auto
}
.bag{
    position:absolute;
    width:110px;
    height:150px;
    background:var(--orange);
    border:2px solid #e4a04c;
    box-shadow:8px 8px 0 #00000010;
    transform:rotate(-7deg);
    bottom:20px
}
.bag:before{
    content:'';
    position:absolute;
    width:40px;
    height:60px;
    border:3px solid var(--white);
    border-bottom:0;
    border-radius:30px 30px 0 0;
    top:-46px;
    left:28px
}
.bag-small{
    left:10%;
    height:125px;
    width:90px;
    bottom:5px;
    background:#f6c15e
}
.bag-small:before{
    left:22px;
    width:35px
}
.bag-large{
    left:35%;
    height:180px;
    width:125px;
    bottom:15px;
    transform:rotate(3deg)
}
.bag-medium{
    left:60%;
    height:140px;
    width:100px;
    bottom:8px;
    background:white;
    border-color:white;
    transform:rotate(12deg)
}
.bag-medium:before{
    border-color:var(--orange)
}
.art-ticket{
    position:absolute;
    font-size:45px;
    bottom:6px;
    right:4%;
    font-weight:800;
    background:var(--orange);
    color:var(--navy);
    border:4px solid white;
    border-radius:15px;
    padding:0 20px;
    transform:rotate(-20deg)
}
.landing-visual .shopping-art{
    position:absolute;
    width:70%;
    left:-20px;
    bottom:0
}
.phone-mock{
    position:absolute;
    right:2%;
    bottom:-28px;
    width:225px;
    min-height:320px;
    background:white;
    color:var(--navy);
    border:7px solid #0e1e32;
    border-radius:30px;
    padding:22px 10px;
    transform:rotate(7deg);
    box-shadow:10px 10px 0 #ffffff20
}
.phone-mock>strong{
    font-size:1.4rem
}
.phone-mock em{
    color:#b95808;
    font-style:normal
}
.phone-mock>div{
    border-radius:10px;
    background:var(--navy);
    color:white;
    padding:14px 8px;
    margin:12px 0
}
.phone-mock b,.phone-mock small{
    display:block
}
.phone-mock p{
    font-size:.83rem;
    padding:10px 4px;
    margin:8px 0;
    border:1px solid var(--line);
    border-radius:8px
}
.phone-mock .icon{
    width:18px;
    height:18px
}
.customer-site{
    background:#f8fbff
}
.customer-header{
    min-height:76px;
    position:sticky;
    top:0;
    z-index:5;
    padding:8px 20px;
    box-shadow:0 1px 6px #142b490d
}
.customer-header .estore-brand{
    min-width:235px
}
.customer-header .estore-brand b{
    font-size:1.65rem
}
.header-page-title{
    font-size:1.7rem;
    font-weight:800;
    margin-right:auto;
    border-left:1px solid var(--navy);
    padding-left:22px
}
.account-menu{
    display:flex;
    align-items:center;
    gap:22px
}
.language-chip{
    border:1px solid var(--line);
    border-radius:10px;
    padding:8px 14px;
    font-size:.85rem;
    font-weight:700
}
.notification-link{
    position:relative
}
.notification-link .icon{
    width:29px;
    height:29px
}
.notification-link>span{
    position:absolute;
    top:-8px;
    right:-8px;
    background:#a52c26;
    color:white;
    border-radius:20px;
    min-width:18px;
    text-align:center;
    font-size:.7rem
}
.account-identity{
    display:flex;
    gap:10px;
    align-items:center
}
.avatar{
    background:var(--navy);
    color:white;
    border-radius:50%;
    display:grid;
    place-items:center;
    width:42px;
    height:42px
}
.account-identity strong{
    font-size:1rem
}
.account-identity small{
    display:block;
    font-size:.75rem;
    font-weight:400
}
.customer-shell{
    display:flex;
    align-items:stretch;
    min-height:calc(100vh - 76px)
}
.customer-sidebar{
    width:250px;
    flex:0 0 250px;
    position:relative;
    background:var(--navy);
    border-radius:0 22px 22px 0;
    color:white;
    padding:24px 8px 16px;
    display:flex;
    flex-direction:column
}
.customer-sidebar nav{
    display:flex;
    flex-direction:column;
    gap:5px;
    font-weight:500
}
.customer-sidebar nav a{
    display:flex;
    align-items:center;
    gap:17px;
    color:white;
    padding:14px 14px;
    border-radius:12px;
    font-size:1rem;
    min-height:54px
}
.customer-sidebar nav a.active{
    background:var(--orange);
    color:var(--navy);
    font-weight:700
}
.customer-sidebar nav .icon{
    width:29px;
    height:29px
}
.customer-main{
    flex:1;
    padding:18px 20px;
    min-width:0;
    max-width:1900px
}
.sidebar-art{
    height:210px;
    position:relative;
    margin-top:60px;
    overflow:hidden
}
.sidebar-art .bag{
    width:65px;
    height:100px;
    bottom:25px
}
.sidebar-art .bag:before{
    width:28px;
    height:36px;
    top:-29px;
    left:16px
}
.sidebar-art .bag-large{
    left:43%;
    height:125px;
    width:80px;
    bottom:27px
}
.sidebar-art .bag-small{
    left:13%
}
.sidebar-art>span{
    position:absolute;
    background:white;
    color:var(--orange);
    font-size:36px;
    font-weight:800;
    right:15px;
    bottom:27px;
    border:4px solid var(--orange);
    border-radius:10px;
    padding:0 7px;
    transform:rotate(-20deg)
}
.customer-sidebar>form{
    margin-top:auto
}
.sidebar-logout{
    background:transparent;
    border:1px solid #ffffff50;
    color:white;
    padding:12px;
    border-radius:9px;
    display:flex;
    gap:12px;
    align-items:center
}
.kpi-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:16px;
    margin-bottom:20px
}
.kpi{
    display:flex;
    gap:16px;
    align-items:center;
    padding:20px 16px;
    border:1px solid var(--line);
    border-radius:15px;
    background:white;
    min-width:0
}
.kpi>.icon{
    width:36px;
    height:36px;
    color:var(--orange)
}
.kpi span{
    font-size:.8rem;
    font-weight:700
}
.kpi strong{
    display:block;
    font-size:1.9rem
}
.section-title{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px
}
.section-title a{
    font-size:.8rem;
    white-space:nowrap
}
.balance-box{
    background:var(--navy);
    color:white;
    border-radius:14px;
    padding:18px
}
.balance-box span{
    display:block;
    font-weight:700
}
.balance-box strong{
    font-size:2.5rem;
    line-height:1.3
}
.step{
    display:inline-grid;
    place-items:center;
    width:30px;
    height:30px;
    background:var(--orange);
    color:var(--navy);
    border-radius:50%;
    font-size:1.1rem
}
.vendor-options{
    max-height:240px;
    overflow-y:auto;
    margin-bottom:20px
}
.vendor-option{
    display:flex;
    align-items:center;
    gap:15px;
    padding:12px;
    background:var(--soft);
    border:1px solid var(--line);
    border-radius:10px;
    margin-bottom:6px
}
.vendor-option.selected{
    border-color:var(--navy)
}
.vendor-option>.icon{
    color:var(--orange);
    width:36px;
    height:36px
}
.calculation{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    border:1px solid var(--line);
    border-radius:12px;
    overflow:hidden
}
.calculation>div{
    padding:12px 5px;
    text-align:center;
    background:var(--soft);
    font-size:.8rem
}
.calculation>div:nth-child(2){
    background:#eaf6eb
}
.calculation>div:last-child{
    background:#fff1e2
}
.calculation strong{
    display:block;
    font-size:1.4rem;
    margin-top:6px
}
.payable{
    text-align:right
}
.coupon-code{
    font-size:clamp(1rem,2vw,1.7rem);
    font-weight:800;
    border:2px dashed var(--orange);
    border-radius:14px;
    padding:20px;
    text-align:center;
    overflow-wrap:anywhere
}
.details-list>div{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:15px;
    padding:10px 0;
    border-bottom:1px solid var(--line)
}
.details-list dt{
    color:#526175
}
.details-list dd{
    font-weight:700;
    margin:0;
    text-align:right;
    overflow-wrap:anywhere
}
.tabs{
    display:flex;
    flex-wrap:wrap;
    gap:5px;
    border:1px solid var(--line);
    background:white;
    border-radius:12px;
    padding:4px;
    margin-bottom:18px
}
.tabs a{
    flex:1;
    text-align:center;
    padding:12px 8px;
    min-height:44px;
    font-weight:700;
    white-space:nowrap;
    font-size:.9rem
}
.tabs a.selected{
    background:var(--orange);
    color:var(--navy);
    border-radius:9px
}
.profile-overview{
    display:flex;
    align-items:center;
    gap:20px
}
.profile-overview h1{
    font-size:1.8rem;
    margin:0 0 8px
}
.profile-overview p{
    margin:5px 0;
    overflow-wrap:anywhere
}
.profile-avatar{
    display:grid;
    place-items:center;
    width:110px;
    height:110px;
    background:var(--soft);
    border-radius:50%;
    flex-shrink:0;
    color:var(--navy)
}
.profile-avatar .icon{
    width:70px;
    height:70px
}
.profile-kpis{
    display:flex;
    gap:12px;
    margin-left:auto
}
.profile-kpis>div{
    background:var(--soft);
    padding:18px;
    border:1px solid var(--line);
    border-radius:12px;
    font-size:.8rem;
    font-weight:700
}
.profile-kpis strong{
    display:block;
    font-size:1.8rem;
    margin-top:6px
}
.quick-actions{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:10px
}
.quick-actions .button{
    font-size:.85rem
}
.support-tiles{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:12px
}
.support-tiles>a{
    text-align:center;
    background:var(--soft);
    padding:20px 8px
}
.support-tiles .icon{
    width:42px;
    height:42px;
    color:var(--orange);
    margin-bottom:12px
}
.support-tiles h2{
    justify-content:center;
    font-size:1.15rem;
    margin-bottom:8px
}
.support-tiles p{
    margin:0;
    font-size:.85rem
}
details{
    padding:12px 0;
    border-bottom:1px solid var(--line)
}
summary{
    cursor:pointer;
    font-weight:700
}
.narrow{
    max-width:820px
}
.reply{
    border-bottom:1px solid var(--line);
    padding:20px 0
}
.reply small{
    float:right;
    color:#526175
}
.preserve-lines{
    white-space:pre-wrap;
    overflow-wrap:anywhere
}
.notification-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    padding:20px;
    border-bottom:1px solid var(--line)
}
.notification-row.unread{
    background:var(--soft)
}
.notification-row h2{
    font-size:1.1rem
}
.notification-row p{
    margin-bottom:5px
}
.sr-only{
    position:absolute;
    width:1px;
    height:1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap
}
th{
    background:var(--soft);
    font-size:.8rem
}
td{
    font-size:.85rem
}
td small{
    font-size:.7rem;
    line-height:1.5
}
table{
    white-space:normal
}
input,select,textarea{
    min-width:0
}
.empty-state{
    color:#526175;
    grid-column:1/-1
}
textarea{
    font:inherit;
    resize:vertical;
    width:100%
}
.menu-toggle{
    display:none
}
.auth-site .trust-strip{
    border:0
}
.prose a{
    text-decoration:underline
}
@media(min-width:1700px){
    .customer-main{
        padding:24px 30px
    }
    .customer-sidebar{
        width:270px;
        flex-basis:270px
    }
    .customer-sidebar nav a{
        font-size:1.1rem
    }
    .panel{
        padding:25px
    }
}
@media(max-width:1200px){
    .public-header nav{
        gap:1rem;
        font-size:.85rem
    }
    .process-cards article{
        gap:8px;
        padding:12px
    }
    .process-cards .icon{
        width:30px;
        height:30px
    }
    .customer-header .estore-brand{
        min-width:auto
    }
    .customer-header .estore-brand b{
        font-size:1.25rem
    }
    .customer-header .estore-brand>svg{
        width:40px
    }
    .header-page-title{
        font-size:1.3rem;
        padding-left:16px
    }
    .account-menu{
        gap:16px
    }
    .customer-sidebar{
        width:215px;
        flex-basis:215px
    }
    .customer-sidebar nav a{
        font-size:.9rem;
        padding:13px 8px;
        gap:12px
    }
    .customer-main{
        padding:15px
    }
    .profile-overview{
        flex-wrap:wrap
    }
    .profile-kpis{
        margin-left:0;
        flex:1
    }
    .profile-kpis>div{
        flex:1
    }
    .kpi{
        gap:10px;
        padding:15px 12px
    }
    .kpi>.icon{
        width:28px
    }
    .kpi strong{
        font-size:1.5rem
    }
    .support-tiles h2{
        font-size:1rem
    }
    .two-columns{
        gap:15px
    }
    .panel{
        padding:16px
    }
}
@media(max-width:980px){
    .public-header{
        flex-wrap:wrap
    }
    .public-header nav{
        width:100%;
        justify-content:space-between
    }
    .landing-hero{
        grid-template-columns:1.1fr 1fr
    }
    .phone-mock{
        width:190px
    }
    .hero-features{
        gap:15px
    }
    .landing-hero .actions .button{
        font-size:.85rem
    }
    .how-grid{
        grid-template-columns:repeat(2,1fr);
        gap:22px
    }
    .category-grid{
        grid-template-columns:repeat(4,1fr)
    }
    .process-cards{
        grid-template-columns:repeat(2,1fr)
    }
    .store-search form{
        grid-template-columns:repeat(3,1fr)
    }
    .public-footer{
        grid-template-columns:repeat(3,1fr)
    }
    .public-footer>div:first-child{
        grid-column:1/-1;
        max-width:450px
    }
    .auth-stage{
        grid-template-columns:40% 60%;
        padding:24px 2%
    }
    .auth-story{
        padding:10px
    }
    .auth-story h1{
        font-size:2.5rem
    }
    .auth-story>p{
        font-size:1.1rem
    }
    .auth-panel{
        padding:24px
    }
    .story-features{
        grid-template-columns:repeat(2,1fr)
    }
    .story-features .icon{
        width:30px
    }
    .story-features>div{
        padding:12px 5px
    }
    .shopping-art{
        height:240px
    }
    .bag{
        transform:scale(.8)
    }
    .auth-story .bag-small{
        left:0
    }
    .auth-story .bag-large{
        left:25%
    }
    .auth-story .bag-medium{
        left:50%
    }
    .two-columns{
        grid-template-columns:1fr
    }
    .generate-columns{
        grid-template-columns:1.15fr 1fr
    }
    .customer-header .account-identity strong{
        display:none
    }
    .customer-header .language-chip{
        display:none
    }
    .customer-sidebar{
        width:195px;
        flex-basis:195px
    }
    .customer-sidebar nav a{
        font-size:.85rem;
        gap:8px
    }
    .customer-sidebar nav .icon{
        width:24px
    }
    .kpi-grid{
        grid-template-columns:repeat(2,1fr)
    }
    .support-tiles{
        grid-template-columns:repeat(3,1fr)
    }
    .profile-avatar{
        width:85px;
        height:85px
    }
    .profile-overview h1{
        font-size:1.5rem
    }
}
@media(max-width:767px){
    .utility{
        font-size:.65rem
    }
    .public-header .menu-toggle,.customer-header .menu-toggle{
        display:block
    }
    .public-header nav.collapsed{
        display:none
    }
    .public-header nav{
        flex-direction:column;
        align-items:stretch;
        width:100%
    }
    .public-header nav>a{
        padding:10px!important
    }
    .landing-hero{
        grid-template-columns:1fr;
        padding:24px 5% 0
    }
    .landing-hero h1{
        font-size:2.3rem
    }
    .landing-hero>div>p{
        font-size:1rem
    }
    .landing-visual{
        min-height:280px;
        margin-top:10px
    }
    .landing-visual .shopping-art{
        left:0;
        max-width:350px
    }
    .phone-mock{
        right:7%;
        width:210px;
        bottom:-60px
    }
    .landing-content{
        padding:14px 4%
    }
    .process-cards{
        gap:8px
    }
    .process-cards article{
        flex-direction:column;
        align-items:flex-start
    }
    .section-heading{
        font-size:1.5rem;
        gap:10px
    }
    .section-heading:before,.section-heading:after{
        width:30px
    }
    .store-search form{
        grid-template-columns:1fr 1fr
    }
    .store-search .button{
        grid-column:1/-1
    }
    .why-strip{
        display:grid;
        grid-template-columns:repeat(3,1fr);
        padding:16px
    }
    .why-strip h2{
        font-size:1.1rem
    }
    .why-strip>div{
        font-size:.75rem
    }
    .vendor-grid{
        grid-template-columns:repeat(2,1fr)
    }
    .join-banner{
        flex-direction:column;
        align-items:flex-start
    }
    .public-footer{
        grid-template-columns:repeat(2,1fr);
        gap:15px
    }
    .auth-header{
        height:auto;
        padding:12px
    }
    .auth-header .estore-brand b{
        font-size:1.35rem
    }
    .auth-header .estore-brand>svg{
        width:40px
    }
    .auth-header>a:last-child{
        font-size:.8rem;
        gap:5px
    }
    .auth-header>a:last-child .icon{
        width:22px
    }
    .auth-stage{
        grid-template-columns:1fr;
        padding:22px 4%;
        min-height:0
    }
    .auth-story{
        display:none
    }
    .auth-panel{
        padding:24px 20px;
        border-radius:20px
    }
    .auth-panel h1{
        font-size:1.8rem
    }
    .auth-subtitle{
        font-size:1rem
    }
    .auth-tabs a{
        font-size:1rem;
        padding:12px 6px;
        gap:7px
    }
    .identity-tabs>*{
        font-size:.75rem;
        padding:10px
    }
    .trust-strip{
        grid-template-columns:1fr;
        padding:20px
    }
    .trust-strip>div{
        justify-content:flex-start
    }
    .trust-strip b{
        font-size:1.1rem
    }
    .customer-header{
        flex-wrap:wrap;
        padding:8px 12px;
        gap:8px
    }
    .customer-header .estore-brand b{
        font-size:1.2rem
    }
    .customer-header .estore-brand small{
        font-size:.6rem
    }
    .customer-header .estore-brand>svg{
        width:38px;
        height:38px
    }
    .header-page-title{
        order:5;
        width:100%;
        border:0;
        font-size:1.1rem;
        padding:5px 0 0
    }
    .account-menu{
        gap:12px;
        margin-left:auto
    }
    .avatar{
        width:32px;
        height:32px
    }
    .avatar .icon{
        width:22px
    }
    .notification-link .icon{
        width:25px
    }
    .customer-header .menu-toggle{
        padding:6px 10px;
        min-height:38px;
        font-size:.8rem
    }
    .customer-shell{
        display:block
    }
    .customer-sidebar{
        display:none;
        width:100%;
        border-radius:0;
        position:relative;
        padding:10px
    }
    .customer-sidebar.is-open{
        display:block
    }
    .customer-sidebar nav{
        display:grid;
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:3px
    }
    .customer-sidebar nav a{
        min-height:44px;
        padding:10px;
        font-size:.85rem;
        gap:10px
    }
    .sidebar-art{
        display:none
    }
    .customer-sidebar form{
        margin:10px 0
    }
    .customer-main{
        padding:12px;
        max-width:100%;
        overflow-wrap:anywhere
    }
    .page-banner{
        padding:15px 12px;
        gap:10px;
        flex-wrap:wrap
    }
    .page-banner>.icon{
        width:38px;
        height:38px
    }
    .page-banner h1{
        font-size:1.5rem
    }
    .page-banner p{
        font-size:.85rem
    }
    .page-banner>.button,.page-banner>form{
        margin-left:0
    }
    .banner-percent{
        display:none
    }
    .generate-columns{
        grid-template-columns:1fr
    }
    .two-columns{
        gap:0
    }
    .kpi-grid{
        gap:10px
    }
    .kpi{
        padding:14px 10px;
        gap:10px
    }
    .kpi span{
        font-size:.72rem
    }
    .kpi strong{
        font-size:1.5rem
    }
    .kpi>.icon{
        width:26px
    }
    .panel{
        border-radius:14px;
        padding:16px 12px
    }
    .panel h2{
        font-size:1.15rem
    }
    .support-tiles{
        grid-template-columns:repeat(2,1fr);
        gap:10px
    }
    .support-tiles>a{
        margin-bottom:0;
        padding:15px 8px
    }
    .support-tiles{
        margin-bottom:16px
    }
    .support-tiles h2{
        font-size:1rem
    }
    .support-tiles p{
        font-size:.8rem
    }
    .profile-overview{
        gap:12px
    }
    .profile-overview h1{
        font-size:1.5rem
    }
    .profile-avatar{
        width:65px;
        height:65px
    }
    .profile-avatar .icon{
        width:45px;
        height:45px
    }
    .profile-kpis{
        width:100%;
        display:grid;
        grid-template-columns:repeat(3,1fr);
        gap:6px
    }
    .profile-kpis>div{
        padding:10px 6px;
        font-size:.65rem
    }
    .profile-kpis strong{
        font-size:1.5rem
    }
    .tabs{
        gap:2px
    }
    .tabs a{
        font-size:.78rem;
        padding:10px 6px;
        white-space:normal
    }
    .tabs .icon{
        width:20px;
        height:20px
    }
    .calculation>div{
        font-size:.7rem
    }
    .calculation strong{
        font-size:1.2rem
    }
    .details-list>div{
        font-size:.85rem
    }
    .coupon-code{
        padding:18px 8px
    }
    .filter-bar{
        gap:8px
    }
    .filter-bar>*{
        min-width:110px
    }
    .notification-row{
        flex-direction:column;
        align-items:flex-start;
        padding:15px
    }
    .notification-row form{
        margin:0
    }
    .how-grid article{
        gap:10px
    }
    .step-icon{
        padding:8px
    }
    .step-icon .icon{
        width:25px;
        height:25px
    }
    .how-grid h3{
        font-size:.95rem
    }
    .how-grid p{
        font-size:.8rem
    }
    .form-grid{
        gap:12px
    }
    .field{
        font-size:.85rem
    }
}
@media(max-width:400px){
    .category-grid{
        grid-template-columns:repeat(2,1fr)
    }
    .vendor-grid{
        grid-template-columns:1fr
    }
    .hero-features{
        gap:12px
    }
    .hero-features>span{
        font-size:.75rem;
        gap:6px
    }
    .hero-features .icon{
        width:25px
    }
    .landing-hero .actions{
        flex-direction:column;
        align-items:stretch
    }
    .form-grid{
        grid-template-columns:1fr
    }
    .customer-header .estore-brand b{
        font-size:1.05rem
    }
    .customer-header .estore-brand>svg{
        width:32px
    }
    .account-menu{
        gap:8px
    }
    .customer-header .menu-toggle{
        padding:4px 6px
    }
    .quick-actions{
        grid-template-columns:1fr
    }
}
@media(prefers-reduced-motion:reduce){
    html{
        scroll-behavior:auto
    }
}
.shopper-art{
    display:block;
    width:100%;
    height:340px;
    margin-top:15px;
    border-radius:16px;
    overflow:hidden
}
.auth-story .story-features{
    margin-top:0
}
.couple-art{
    position:absolute;
    bottom:0;
    left:0;
    width:80%;
    height:100%;
    max-height:360px
}
.support-art{
    margin-left:auto;
    width:160px;
    height:95px;
    flex-shrink:0
}
.customer-main .page-banner:has(.support-art)>div{
    position:relative;
    z-index:1
}
@media(max-width:980px){
    .shopper-art{
        height:280px
    }
    .support-art{
        display:none
    }
}
@media(max-width:767px){
    .couple-art{
        width:65%
    }
}
@media(min-width:1000px){
    .auth-header{
        height:100px
    }
    .auth-header .estore-brand b{
        font-size:40px
    }
    .auth-header .estore-brand>svg{
        width:72px;
        height:72px
    }
    .auth-header .estore-brand small{
        font-size:16px
    }
    .auth-header>a:last-child{
        font-size:23px
    }
    .auth-stage{
        min-height:1050px;
        padding-top:38px
    }
    .auth-story h1{
        font-size:60px;
        line-height:1.05
    }
    .auth-story>p{
        font-size:25px;
        line-height:1.35
    }
    .auth-panel{
        padding:28px 34px;
        min-height:900px
    }
    .auth-panel h1{
        font-size:38px
    }
    .auth-subtitle{
        font-size:23px;
        line-height:1.3
    }
    .auth-panel .field{
        font-size:20px
    }
    .auth-panel .field input{
        min-height:54px;
        font-size:19px
    }
    .auth-panel .identity-tabs>*{
        font-size:18px
    }
    .auth-panel .auth-tabs a{
        font-size:23px
    }
    .auth-panel form>.button{
        font-size:25px;
        min-height:64px
    }
    .auth-panel .forgot-link{
        font-size:20px
    }
    .auth-panel .auth-bottom{
        font-size:20px;
        margin-top:40px
    }
    .shopper-art{
        height:390px
    }
    .story-features>div{
        font-size:17px
    }
    .trust-strip{
        padding:32px 4%;
        min-height:130px
    }
    .trust-strip b{
        font-size:25px
    }
    .trust-strip small{
        font-size:18px
    }
    .public-header .estore-brand b{
        font-size:27px
    }
    .public-header .estore-brand>svg{
        width:60px;
        height:60px
    }
}
@media(min-width:981px){
    .customer-sidebar{
        width:17.2vw;
        flex-basis:17.2vw;
        max-width:288px
    }
    .customer-sidebar nav a{
        font-size:clamp(16px,1.35vw,22px);
        padding:14px 12px;
        gap:15px
    }
    .customer-sidebar nav .icon{
        width:32px;
        height:32px
    }
    .customer-header .estore-brand b{
        font-size:clamp(24px,1.9vw,32px)
    }
    .customer-header .estore-brand>svg{
        width:56px;
        height:56px
    }
    .header-page-title{
        font-size:clamp(26px,2vw,34px)
    }
    .customer-header .account-identity strong{
        font-size:20px
    }
    .customer-main .panel h2{
        font-size:clamp(21px,1.7vw,28px)
    }
    .customer-main .field{
        font-size:clamp(16px,1.2vw,20px)
    }
    .customer-main .field input,.customer-main .field select{
        min-height:42px;
        font-size:18px
    }
    .customer-main .page-banner{
        min-height:100px
    }
    .support-tiles h2{
        font-size:clamp(20px,1.5vw,25px)!important
    }
    .support-tiles p{
        font-size:clamp(15px,1.1vw,19px)
    }
    .support-tiles .icon{
        width:48px;
        height:48px
    }
    .customer-main .list-row{
        font-size:18px
    }
    .profile-overview h1{
        font-size:32px
    }
    .profile-kpis>div{
        font-size:16px
    }
    .profile-kpis strong{
        font-size:30px
    }
    .customer-main .tabs a{
        font-size:18px
    }
    .customer-main .button{
        font-size:17px
    }
}
@media(min-width:1000px){
    .public-header{
        padding:6px 4%;
        min-height:64px
    }
    .public-header .estore-brand>svg{
        width:52px;
        height:52px
    }
    .public-header .estore-brand b{
        font-size:25px
    }
    .landing-hero{
        min-height:264px;
        padding:14px 4% 10px;
        grid-template-columns:1.1fr 1fr
    }
    .landing-hero h1{
        font-size:clamp(32px,3.8vw,52px);
        line-height:1.04;
        margin-bottom:6px
    }
    .landing-hero>div>p{
        font-size:18.5px;
        line-height:1.25;
        margin:6px 0
    }
    .landing-hero .hero-features{
        margin:8px 0;
        gap:25px
    }
    .landing-hero .hero-features>span{
        font-size:13px;
        line-height:1.2
    }
    .landing-hero .actions{
        margin:12px 0 0
    }
    .landing-hero .actions .button{
        min-height:42px;
        font-size:14px
    }
    .landing-visual{
        min-height:240px
    }
    .landing-visual .phone-mock{
        bottom:-45px;
        min-height:285px;
        width:205px
    }
    .process-cards article{
        padding:10px;
        gap:10px
    }
    .process-cards p{
        font-size:12px;
        line-height:1.3
    }
    .process-cards h2{
        font-size:15px
    }
    .category-grid>.empty-state{
        padding:25px
    }
    .section-heading{
        font-size:26px;
        margin:20px 0 16px
    }
}
.profile-pane{
    display:grid;
    gap:12px
}
.location-grid{
    grid-template-columns:repeat(3,minmax(0,1fr))
}
@media(min-width:981px){
    .customer-main .field{
        line-height:1.25;
        gap:4px
    }
    .customer-main .field input,.customer-main .field select{
        padding:4px 10px;
        line-height:1.3;
        height:40px;
        min-height:40px
    }
    .customer-main form{
        gap:12px
    }
    .landing-visual .phone-mock{
        top:0;
        bottom:auto;
        min-height:255px;
        padding:12px 8px
    }
    .landing-visual .phone-mock p{
        font-size:11px;
        padding:7px 3px;
        margin:4px 0
    }
    .landing-visual .phone-mock>div{
        padding:9px 6px;
        margin:8px 0
    }
    .landing-visual .phone-mock>strong{
        font-size:19px
    }
}
@media(max-width:500px){
    .location-grid{
        grid-template-columns:1fr
    }
}

/* Phase 5: restore reference artwork framing while retaining semantic forms. */
@media(min-width:1000px){
 .auth-stage{background:linear-gradient(135deg,#142B49 12%,#07427e 55%,#dceafa 100%);overflow:hidden}
 .auth-stage:before{content:"";position:absolute;left:39%;top:-25px;width:210px;height:350px;border-left:22px solid #F28C28;border-radius:75% 0 0 0;transform:rotate(18deg);pointer-events:none}
 .auth-story{z-index:1}.auth-story .shopper-art{border-radius:0 0 35% 0;height:390px}
 .auth-story .story-features{border:8px solid #fff;border-radius:28px;background:#fff;gap:7px;margin-left:-12px;margin-right:-8px;position:relative;z-index:1}
 .auth-story .story-features>div{border-radius:20px;background:linear-gradient(#f9fbff,#e9effb);padding:12px 6px}
 .auth-story .story-features>div:nth-child(2){background:#fff4e7}.auth-story .story-features>div:nth-child(3){background:#e8f4ff}.auth-story .story-features>div:nth-child(4){background:#eef8ee}
}