@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display&family=Manrope:wght@400;500;600;700;800&display=swap');

:root{
  --ink:#10251f;
  --deep:#123c34;
  --deep-2:#0a2b25;
  --lime:#d9f36a;
  --mint:#eaf4e8;
  --paper:#f7f7f2;
  --white:#fff;
  --muted:#6f7d78;
  --line:#dce4df;
  --soft:#eef2ee;
  --danger:#a23c3c;
  --shadow:0 24px 70px rgba(15,42,35,.12);
  --radius:28px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:Manrope,system-ui,sans-serif;
  color:var(--ink);
  background:var(--paper);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
.container{width:min(1180px,calc(100% - 40px));margin:auto}
.narrow{width:min(820px,calc(100% - 40px));margin:auto}
.serif{font-family:"DM Serif Display",Georgia,serif}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:#547069;
}
.eyebrow:before{content:"";width:24px;height:1px;background:currentColor}
h1,h2,h3{letter-spacing:-.035em}
h1{font-size:clamp(46px,6.2vw,82px);line-height:.98}
h2{font-size:clamp(36px,4.5vw,58px);line-height:1.04}
h3{font-size:22px;line-height:1.2}
p{color:var(--muted)}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  border:0;border-radius:999px;padding:14px 21px;font-weight:800;font-size:14px;
  transition:.2s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--deep);color:#fff}
.btn-primary:hover{background:#0b3029}
.btn-lime{background:var(--lime);color:var(--deep)}
.btn-light{background:#fff;color:var(--deep);border:1px solid var(--line)}
.btn-ghost{background:transparent;color:var(--deep)}
.btn-small{padding:11px 16px;font-size:13px}
.site-header{
  position:sticky;top:0;z-index:50;background:rgba(247,247,242,.86);
  backdrop-filter:blur(18px);border-bottom:1px solid rgba(220,228,223,.7)
}
.nav{height:76px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand img{width:154px;height:auto;display:block}
.nav-links{display:flex;align-items:center;gap:28px;font-size:13px;font-weight:700;color:#42554f}
.nav-links a{position:relative}
.nav-links a:hover{color:var(--deep)}
.nav-actions{display:flex;align-items:center;gap:9px}
.menu-btn{display:none;border:0;background:transparent;padding:8px}
.mobile-menu{display:none;padding:0 20px 20px;border-top:1px solid var(--line)}
.mobile-menu a{display:block;padding:14px 0;font-weight:700;border-bottom:1px solid var(--line)}
.hero{
  position:relative;overflow:hidden;background:var(--deep);color:#fff;
  min-height:690px;display:flex;align-items:center;
}
.hero:before{
  content:"";position:absolute;width:700px;height:700px;border-radius:50%;
  right:-190px;top:-270px;background:radial-gradient(circle,#416c5d 0,transparent 68%);
  opacity:.8;
}
.hero:after{
  content:"";position:absolute;width:500px;height:500px;border-radius:50%;
  left:-270px;bottom:-320px;background:radial-gradient(circle,#d9f36a 0,transparent 65%);
  opacity:.15;
}
.hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:60px;padding:90px 0}
.hero h1{max-width:720px}
.hero p{color:#c6d4cf;font-size:18px;max-width:590px;margin:25px 0 32px}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap}
.hero-note{display:flex;gap:10px;align-items:center;margin-top:28px;font-size:12px;color:#a9bbb5}
.hero-note i{color:var(--lime)}
.hero-visual{position:relative;min-height:520px;display:grid;place-items:center}
.glow-card{
  width:min(420px,100%);aspect-ratio:1.45/1;border-radius:34px;
  background:linear-gradient(145deg,#f5f8ee,#bcd2c5 50%,#6e8c7f);
  box-shadow:0 35px 90px rgba(0,0,0,.32);transform:rotate(-7deg);
  padding:32px;color:var(--deep);position:relative;overflow:hidden;
}
.glow-card:before{content:"";position:absolute;width:250px;height:250px;border-radius:50%;right:-90px;top:-80px;background:#d9f36a;opacity:.75}
.glow-card .chip{width:54px;height:40px;border-radius:10px;background:#d9e0d2;margin-top:70px}
.glow-card .card-number{font-size:18px;letter-spacing:.18em;margin-top:34px;font-weight:700}
.glow-card .card-bottom{display:flex;justify-content:space-between;margin-top:22px;font-size:11px;text-transform:uppercase;letter-spacing:.1em}
.float-panel{
  position:absolute;bottom:20px;left:0;background:#fff;color:var(--ink);
  border-radius:20px;padding:18px 20px;box-shadow:var(--shadow);min-width:220px
}
.float-panel strong{display:block;font-size:22px}
.float-panel span{font-size:12px;color:var(--muted)}
.section{padding:105px 0}
.section-tight{padding:70px 0}
.section-head{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:45px}
.section-head p{max-width:500px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:30px;transition:.25s ease
}
.card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.icon-box{
  width:50px;height:50px;border-radius:16px;background:var(--mint);
  display:grid;place-items:center;color:var(--deep);margin-bottom:28px
}
.card p{margin-top:10px;font-size:14px}
.arrow{display:inline-flex;align-items:center;gap:8px;font-weight:800;font-size:13px;margin-top:24px}
.split{
  display:grid;grid-template-columns:1fr 1fr;min-height:560px;border-radius:34px;overflow:hidden;
}
.split-content{background:#e7f0e6;padding:70px;display:flex;flex-direction:column;justify-content:center}
.split-content p{margin:20px 0 28px;max-width:500px}
.split-art{background:var(--deep);position:relative;overflow:hidden;display:grid;place-items:center}
.split-art:before{
  content:"";width:340px;height:340px;border-radius:50%;
  border:1px solid rgba(217,243,106,.4);box-shadow:0 0 0 70px rgba(217,243,106,.05),0 0 0 140px rgba(217,243,106,.025)
}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:25px;overflow:hidden}
.stat{background:#fff;padding:30px}
.stat strong{font-size:34px;display:block;letter-spacing:-.05em}
.stat span{font-size:12px;color:var(--muted)}
.marquee{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:18px 0;background:#fff}
.marquee-track{display:flex;gap:60px;width:max-content;animation:scroll 25s linear infinite;font-size:12px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:#70807a}
@keyframes scroll{to{transform:translateX(-50%)}}
.testimonial{background:var(--deep);color:#fff;border-radius:34px;padding:60px}
.testimonial p{color:#d1ddd8;font-size:23px;line-height:1.4;max-width:850px}
.person{display:flex;align-items:center;gap:12px;margin-top:30px}
.avatar{width:42px;height:42px;border-radius:50%;background:#b9c9bf;display:grid;place-items:center;color:var(--deep);font-weight:800}
.footer{background:#0a2b25;color:#d3dfda;padding:70px 0 30px}
.footer-grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:50px}
.footer h4{font-size:12px;color:#fff;text-transform:uppercase;letter-spacing:.12em;margin-bottom:18px}
.footer a{display:block;font-size:13px;color:#9fb2ab;margin:10px 0}
.footer-brand p{margin-top:15px;max-width:280px;font-size:13px;color:#9fb2ab}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1);margin-top:55px;padding-top:20px;display:flex;justify-content:space-between;font-size:11px;color:#82968f}
.page-hero{background:var(--deep);color:#fff;padding:110px 0 100px}
.page-hero p{max-width:650px;color:#bdccc7;font-size:17px;margin-top:22px}
.breadcrumb{font-size:12px;color:#90aaa1;margin-bottom:28px}
.feature-list{display:grid;gap:12px;margin-top:25px}
.feature-list li{list-style:none;display:flex;gap:12px;align-items:flex-start;font-size:14px}
.feature-list i{color:#5f7d70;flex:none;margin-top:4px}
.form-shell{min-height:calc(100vh - 76px);display:grid;grid-template-columns:.9fr 1.1fr}
.form-side{background:var(--deep);color:#fff;padding:70px;display:flex;flex-direction:column;justify-content:center}
.form-side p{color:#b9c9c3;margin-top:20px;max-width:450px}
.form-main{padding:70px;display:flex;align-items:center;justify-content:center}
.form-card{width:min(480px,100%)}
.form-card h1{font-size:46px}
.form-card .lead{margin:12px 0 30px}
.field{margin-bottom:18px}
.field label{display:block;font-size:12px;font-weight:800;margin-bottom:8px}
.field input,.field select,.field textarea{
  width:100%;padding:14px 15px;border:1px solid var(--line);border-radius:14px;
  background:#fff;color:var(--ink);outline:none;transition:.2s
}
.field input:focus,.field select:focus,.field textarea:focus{border-color:#719187;box-shadow:0 0 0 4px rgba(113,145,135,.12)}
.input-wrap{position:relative}
.input-wrap input{padding-right:48px}
.input-wrap button{position:absolute;right:8px;top:7px;border:0;background:transparent;padding:7px;color:var(--muted)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.check{display:flex;align-items:flex-start;gap:9px;font-size:12px;color:var(--muted);margin:14px 0}
.check input{margin-top:4px}
.form-card .btn{width:100%;margin-top:8px}
.form-foot{text-align:center;font-size:12px;margin-top:20px;color:var(--muted)}
.dashboard-wrap{display:grid;grid-template-columns:245px 1fr;min-height:calc(100vh - 76px)}
.sidebar{background:#fff;border-right:1px solid var(--line);padding:25px 16px}
.side-profile{display:flex;align-items:center;gap:10px;padding:12px;margin-bottom:20px}
.side-links a{display:flex;align-items:center;gap:11px;padding:12px 13px;border-radius:12px;font-size:13px;font-weight:700;color:#687872;margin:3px 0}
.side-links a.active,.side-links a:hover{background:var(--mint);color:var(--deep)}
.dashboard-main{padding:38px;background:#f4f6f2}
.dash-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:25px}
.dash-top h1{font-size:36px}
.balance-card{background:var(--deep);color:#fff;border-radius:26px;padding:28px;position:relative;overflow:hidden}
.balance-card:after{content:"";position:absolute;width:220px;height:220px;border-radius:50%;right:-70px;top:-100px;border:1px solid rgba(217,243,106,.25);box-shadow:0 0 0 45px rgba(217,243,106,.04)}
.balance-label{font-size:12px;color:#a9bbb5}
.balance{font-size:42px;font-weight:800;letter-spacing:-.05em;margin:6px 0 20px}
.account-strip{display:flex;gap:10px;flex-wrap:wrap}
.account-chip{background:rgba(255,255,255,.1);padding:10px 12px;border-radius:12px;font-size:11px}
.dash-grid{display:grid;grid-template-columns:1.4fr .8fr;gap:18px;margin-top:18px}
.dash-card{background:#fff;border:1px solid var(--line);border-radius:22px;padding:24px}
.dash-card h3{font-size:17px;margin-bottom:20px}
.tx{display:flex;align-items:center;justify-content:space-between;padding:14px 0;border-bottom:1px solid var(--line)}
.tx:last-child{border-bottom:0}
.tx-left{display:flex;align-items:center;gap:12px}
.tx-icon{width:38px;height:38px;border-radius:12px;background:var(--soft);display:grid;place-items:center}
.tx-name{font-size:13px;font-weight:800}
.tx-date{font-size:11px;color:var(--muted)}
.tx-amount{font-weight:800;font-size:13px}
.positive{color:#2d7a4c}.negative{color:#a34b4b}
.cta{background:var(--lime);border-radius:30px;padding:55px;display:flex;justify-content:space-between;align-items:center;gap:30px}
.cta p{color:#42554f;margin-top:10px}
.notice{background:#fff9df;border:1px solid #eadb98;border-radius:14px;padding:12px 14px;font-size:12px;color:#6e602b;margin:18px 0}
@media(max-width:900px){
  .nav-links,.nav-actions .btn-light{display:none}
  .menu-btn{display:block}
  .mobile-menu.open{display:block}
  .hero-grid,.split,.form-shell{grid-template-columns:1fr}
  .hero{min-height:auto}
  .hero-grid{padding:75px 0}
  .hero-visual{min-height:390px}
  .split-art{min-height:380px}
  .grid-3{grid-template-columns:1fr 1fr}
  .stats{grid-template-columns:1fr 1fr}
  .footer-grid{grid-template-columns:1.5fr 1fr 1fr}
  .form-side{padding:55px 30px}
  .form-main{padding:55px 25px}
  .dashboard-wrap{grid-template-columns:1fr}
  .sidebar{display:none}
  .dash-grid{grid-template-columns:1fr}
}
@media(max-width:600px){
  .container{width:min(100% - 28px,1180px)}
  .nav{height:68px}
  .brand img{width:135px}
  h1{font-size:45px}
  h2{font-size:38px}
  .section{padding:75px 0}
  .section-head{display:block}
  .section-head p{margin-top:15px}
  .grid-3,.grid-2{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr 1fr}
  .stat{padding:22px 17px}
  .stat strong{font-size:27px}
  .testimonial{padding:35px 25px}
  .testimonial p{font-size:19px}
  .cta{padding:35px 25px;display:block}
  .cta .btn{margin-top:22px}
  .footer-grid{grid-template-columns:1fr 1fr}
  .footer-brand{grid-column:1/-1}
  .footer-bottom{display:block}
  .footer-bottom span{display:block;margin-top:7px}
  .form-row{grid-template-columns:1fr}
  .form-card h1{font-size:40px}
  .dashboard-main{padding:22px 14px}
  .dash-top h1{font-size:28px}
  .balance{font-size:35px}
}


/* ===== Rich banking experience ===== */
.hero-rich{min-height:760px}
.hero-rich .hero-grid{padding:95px 0 110px}
.hero-kicker{display:flex;gap:9px;align-items:center;flex-wrap:wrap;margin:22px 0 0;color:#a9bbb5;font-size:12px}
.hero-kicker span{padding:7px 10px;border:1px solid rgba(255,255,255,.14);border-radius:999px}
.hero-dashboard{width:min(470px,100%);background:#f8faf6;color:var(--ink);border-radius:28px;padding:18px;box-shadow:0 35px 90px rgba(0,0,0,.34);transform:rotate(2.5deg)}
.hd-top{display:flex;justify-content:space-between;align-items:center;padding:3px 4px 15px}
.hd-dot{width:30px;height:30px;border-radius:50%;background:var(--mint);display:grid;place-items:center}
.hd-balance{background:var(--deep);color:#fff;border-radius:20px;padding:22px;position:relative;overflow:hidden}
.hd-balance:after{content:"";position:absolute;right:-40px;top:-60px;width:150px;height:150px;border:1px solid rgba(217,243,106,.3);border-radius:50%;box-shadow:0 0 0 30px rgba(217,243,106,.05)}
.hd-balance small{color:#a9bbb5}.hd-balance strong{display:block;font-size:31px;letter-spacing:-.05em;margin:4px 0 17px}
.hd-pills{display:flex;gap:7px;flex-wrap:wrap}.hd-pills span{font-size:10px;background:rgba(255,255,255,.1);padding:7px 9px;border-radius:8px}
.hd-row{display:flex;justify-content:space-between;align-items:center;padding:14px 4px;border-bottom:1px solid var(--line)}
.hd-row:last-child{border:0}.hd-left{display:flex;gap:9px;align-items:center}.hd-icon{width:34px;height:34px;border-radius:11px;background:var(--soft);display:grid;place-items:center}
.hd-row small{display:block;color:var(--muted);font-size:9px}.hd-row b{font-size:11px}.hd-amount{font-size:11px;font-weight:800}
.trust-strip{background:#fff;border-bottom:1px solid var(--line);padding:17px 0}
.trust-row{display:flex;justify-content:space-between;align-items:center;gap:25px;flex-wrap:wrap}
.trust-item{display:flex;align-items:center;gap:8px;color:#6d7c76;font-size:11px;font-weight:800}.trust-item i{color:#547b6e}
.service-card{min-height:260px;display:flex;flex-direction:column;justify-content:space-between}
.service-top{display:flex;justify-content:space-between;align-items:flex-start}.service-number{font-size:12px;color:#9aa8a2;font-weight:800}
.service-card.dark{background:var(--deep);color:#fff;border-color:var(--deep)}.service-card.dark p{color:#b8c9c2}.service-card.dark .icon-box{background:rgba(217,243,106,.1);color:var(--lime)}.service-card.dark .arrow{color:var(--lime)}
.number-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.number-card{padding:25px;border-top:2px solid var(--deep)}
.number-card strong{font-size:37px;letter-spacing:-.05em;display:block}.number-card p{font-size:12px;margin-top:3px}
.quote-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:18px}.quote-card{background:#e7f0e6;border-radius:30px;padding:42px}.quote-card p{font-size:24px;line-height:1.35;color:var(--ink)}
.faq{border-top:1px solid var(--line)}.faq-item{border-bottom:1px solid var(--line)}.faq-q{width:100%;display:flex;justify-content:space-between;align-items:center;border:0;background:transparent;text-align:left;padding:21px 0;font-weight:800;color:var(--ink)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease}.faq-a p{padding:0 40px 22px 0;font-size:13px}.faq-item.open .faq-a{max-height:180px}.faq-item.open .faq-q i{transform:rotate(45deg)}.faq-q i{transition:.2s}

/* Account opening */
.application-page{min-height:100vh;background:linear-gradient(135deg,#eef2ff 0%,#f6f8fc 52%,#e9fbf7 100%);padding:18px 0 45px}
.application-header{width:min(1240px,calc(100% - 32px));height:68px;background:rgba(255,255,255,.92);border:1px solid #dfe7eb;border-radius:24px 24px 0 0;margin:auto;display:flex;align-items:center;justify-content:center;box-shadow:0 5px 20px rgba(25,55,65,.03)}
.application-header img{width:168px}.application-shell{width:min(1240px,calc(100% - 32px));margin:auto;background:#fff;border:1px solid #dfe7eb;border-radius:0 0 24px 24px;box-shadow:0 20px 70px rgba(29,52,65,.1);display:grid;grid-template-columns:245px 1fr;min-height:680px;overflow:hidden}
.application-sidebar{background:#f7fafb;border-right:1px solid #e0e8eb;padding:24px 10px}.app-side-label{font-size:10px;letter-spacing:.12em;text-transform:uppercase;font-weight:800;color:#b4c1c0;padding:0 10px 17px}
.app-step{display:flex;align-items:center;gap:10px;padding:12px 11px;border-radius:9px;margin:3px 0;color:#58716f;font-size:12px;font-weight:700;transition:.2s}.app-step .step-dot{width:24px;height:24px;border-radius:50%;border:1px solid #cbd9d8;display:grid;place-items:center;font-size:10px;flex:none;background:#fff}
.app-step.active{background:#197b7d;color:#fff;box-shadow:0 13px 25px rgba(25,123,125,.2)}.app-step.active .step-dot{background:#fff;color:#197b7d;border-color:#fff}.app-step.done{color:#1d6867}.app-step.done .step-dot{background:#d9f36a;border-color:#d9f36a;color:#123c34}
.app-main{padding:55px 62px}.app-content{max-width:815px}.app-content h1{font-family:Manrope,sans-serif;font-size:28px;letter-spacing:-.035em}.app-content .sub{font-size:13px;margin:8px 0 32px;color:#667b7b}
.app-grid{display:grid;grid-template-columns:1fr 1fr;gap:25px 22px}.app-field label{font-size:12px;font-weight:800;display:block;margin-bottom:8px}
.app-field input,.app-field select{width:100%;height:45px;border:1px solid #cbdadd;border-radius:10px;background:#fff;padding:0 13px;color:#29434a;outline:0}.app-field input:focus,.app-field select:focus{border-color:#197b7d;box-shadow:0 0 0 3px rgba(25,123,125,.1)}
.phone-field{display:grid;grid-template-columns:88px 1fr;gap:9px}.phone-field select{width:100%}.app-divider{height:1px;background:#dfe7e8;margin:26px 0 18px}.app-actions{display:flex;justify-content:flex-end;gap:10px}
.app-btn{border:0;border-radius:10px;padding:12px 18px;font-size:12px;font-weight:800}.app-btn.primary{background:#197b7d;color:#fff}.app-btn.secondary{background:#eef3f2;color:#47625e}
.app-review{display:grid;grid-template-columns:1fr 1fr;gap:12px}.review-box{border:1px solid #dfe7e8;border-radius:12px;padding:15px;background:#fbfcfb}.review-box span{display:block;color:#80908d;font-size:10px;margin-bottom:3px}.review-box strong{font-size:13px}
.verify-card{background:#f4f9f7;border:1px solid #dbe9e5;border-radius:15px;padding:22px}.verify-card h3{font-size:17px}.verify-card p{font-size:12px;margin:7px 0 17px}.code-inputs{display:flex;gap:8px}.code-inputs input{width:44px;height:48px;text-align:center;font-size:19px;font-weight:800}
.application-footer{text-align:center;font-size:11px;color:#78908a;margin:20px 0}.progress-mobile{display:none}
.terms-overlay{position:fixed;inset:0;background:rgba(21,37,46,.38);backdrop-filter:blur(5px);z-index:100;display:flex;align-items:center;justify-content:center;padding:20px}.terms-modal{width:min(420px,100%);background:#fff;border-radius:18px;padding:25px;box-shadow:0 30px 90px rgba(10,30,40,.25)}
.terms-modal h2{font-family:Manrope,sans-serif;font-size:22px;letter-spacing:-.03em}.terms-modal>p{font-size:12px;margin:8px 0 24px}.terms-label{font-size:12px;font-weight:800;color:#197b7d}
.terms-scroll{height:240px;overflow:auto;background:#eef4f5;border:1px solid #d6e1e4;border-radius:8px;padding:12px;color:#667c82;font-size:11px;line-height:1.6}.terms-actions{display:flex;justify-content:center;gap:18px;margin-top:14px}.terms-actions button{border:0;background:transparent;font-size:12px;font-weight:800;color:#71848a}.terms-actions .accept{color:#197b7d}.terms-hidden{display:none}
@media(max-width:900px){.hero-rich{min-height:auto}.number-grid{grid-template-columns:1fr 1fr}.quote-grid{grid-template-columns:1fr}.application-shell{grid-template-columns:1fr}.application-sidebar{display:none}.progress-mobile{display:block;padding:17px 20px;border-bottom:1px solid #e2e9ea}.progress-mobile strong{font-size:12px}.progress-bar{height:5px;background:#e8efef;border-radius:99px;margin-top:8px;overflow:hidden}.progress-bar span{display:block;height:100%;background:#197b7d;border-radius:99px;transition:.3s}.app-main{padding:35px 28px}}
@media(max-width:600px){.hero-dashboard{transform:none}.trust-row{align-items:flex-start;display:grid;grid-template-columns:1fr 1fr}.number-grid{grid-template-columns:1fr}.app-grid,.app-review{grid-template-columns:1fr}.application-page{padding:0}.application-header,.application-shell{width:100%;border-radius:0}.application-header{height:65px}.application-header img{width:145px}.app-main{padding:28px 19px 40px}.phone-field{grid-template-columns:82px 1fr}.app-actions{justify-content:stretch}.app-btn{flex:1}}

/* =============================================================
   CUSTOMER PORTAL / DASHBOARD
   -------------------------------------------------------------
   The portal is intentionally separated from the public website
   styles above. This makes future PHP/MySQL integration easier.
   ============================================================= */

.portal-body {
  min-height: 100vh;
  background: #f4f6f3;
  color: var(--ink);
}

/* -------------------------------------------------------------
   Portal header
   ------------------------------------------------------------- */

.portal-header {
  height: 74px;
  background: #ffffff;
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 50;
}

.portal-header-inner {
  width: min(100% - 42px, 1500px);
  height: 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.portal-brand img {
  width: 142px;
  display: block;
}

.portal-header-actions {
  display: flex;
  align-items: center;
  gap: 18px;
}

.portal-icon-btn,
.portal-card-menu {
  width: 40px;
  height: 40px;
  border: 1px solid var(--line);
  background: #fff;
  color: #52665f;
  border-radius: 12px;
  display: grid;
  place-items: center;
  cursor: pointer;
  position: relative;
}

.portal-icon-btn svg,
.portal-card-menu svg {
  width: 17px;
  height: 17px;
}

.notification-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #b5cf48;
  position: absolute;
  right: 9px;
  top: 8px;
  border: 2px solid #fff;
}

.portal-user-chip {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12px;
  font-weight: 800;
}

.portal-user-chip > svg {
  width: 14px;
  color: #87958f;
}

.portal-avatar {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  background: #dfeee7;
  color: var(--deep);
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 900;
}

.portal-avatar-large {
  width: 43px;
  height: 43px;
}

.portal-signout {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #667670;
  font-size: 11px;
  font-weight: 800;
}

.portal-signout svg {
  width: 15px;
}

/* -------------------------------------------------------------
   Portal layout + sidebar
   ------------------------------------------------------------- */

.portal-layout {
  width: min(100% - 42px, 1500px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 235px minmax(0, 1fr);
  min-height: calc(100vh - 74px);
}

.portal-sidebar {
  background: #fff;
  border-right: 1px solid var(--line);
  padding: 25px 14px 20px;
  min-height: calc(100vh - 74px);
  display: flex;
  flex-direction: column;
}

.portal-profile {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 5px 10px 25px;
}

.portal-profile strong,
.portal-profile span {
  display: block;
}

.portal-profile strong {
  font-size: 12px;
}

.portal-profile span {
  color: #7a8983;
  font-size: 10px;
  margin-top: 3px;
}

.portal-side-label {
  padding: 0 11px 9px;
  color: #9aa8a2;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.portal-side-label-spaced {
  margin-top: 24px;
}

.portal-nav {
  display: grid;
  gap: 3px;
}

.portal-nav a {
  min-height: 43px;
  padding: 0 11px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 11px;
  color: #697a73;
  font-size: 11px;
  font-weight: 800;
  transition: .2s ease;
}

.portal-nav a:hover,
.portal-nav a.active {
  background: var(--mint);
  color: var(--deep);
}

.portal-nav a svg {
  width: 16px;
  height: 16px;
  flex: none;
}

.portal-nav a small {
  margin-left: auto;
  min-width: 19px;
  height: 19px;
  border-radius: 50%;
  background: #edf2ef;
  display: grid;
  place-items: center;
  font-size: 9px;
}

.portal-sidebar-footer {
  margin-top: auto;
  padding: 20px 5px 0;
}

.portal-secure-badge {
  border: 1px solid var(--line);
  background: #f7faf7;
  border-radius: 14px;
  padding: 12px;
  display: flex;
  gap: 9px;
  align-items: flex-start;
}

.portal-secure-badge > svg {
  width: 16px;
  color: #4f786b;
  margin-top: 1px;
}

.portal-secure-badge strong,
.portal-secure-badge span {
  display: block;
}

.portal-secure-badge strong {
  font-size: 10px;
}

.portal-secure-badge span {
  font-size: 9px;
  color: #7e8e87;
  margin-top: 3px;
}

/* -------------------------------------------------------------
   Main dashboard area
   ------------------------------------------------------------- */

.portal-main {
  min-width: 0;
  padding: 34px 36px 45px;
  background: #f4f6f3;
}

.portal-welcome,
.portal-mobile-profile {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
}

.portal-overline {
  display: block;
  color: #87968f;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.portal-welcome h1,
.portal-mobile-profile h1 {
  margin-top: 7px;
  font-family: "DM Serif Display", Georgia, serif;
  font-size: 38px;
  line-height: 1;
  letter-spacing: -.04em;
}

.portal-welcome p {
  margin-top: 9px;
  color: #75847e;
  font-size: 12px;
}

.portal-primary-actions {
  display: flex;
  gap: 8px;
}

.portal-btn {
  min-height: 40px;
  padding: 0 14px;
  border-radius: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-size: 10px;
  font-weight: 900;
}

.portal-btn svg {
  width: 14px;
  height: 14px;
}

.portal-btn-primary {
  background: var(--deep);
  color: #fff;
}

.portal-btn-secondary {
  background: #fff;
  border: 1px solid var(--line);
  color: var(--deep);
}

.portal-btn-dark {
  background: var(--deep);
  color: #fff;
}

/* -------------------------------------------------------------
   Balance cards
   ------------------------------------------------------------- */

.portal-balance-grid {
  margin-top: 25px;
  display: grid;
  grid-template-columns: 1.12fr .88fr;
  gap: 16px;
}

.portal-total-card,
.portal-currency-card,
.portal-panel,
.portal-card-panel {
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #fff;
}

.portal-total-card {
  min-height: 248px;
  padding: 24px;
  background: var(--deep);
  color: #fff;
  position: relative;
  overflow: hidden;
}

.portal-total-card::after {
  content: "";
  width: 280px;
  height: 280px;
  border: 1px solid rgba(217, 243, 106, .18);
  border-radius: 50%;
  position: absolute;
  right: -110px;
  top: -130px;
  box-shadow: 0 0 0 45px rgba(217, 243, 106, .035),
              0 0 0 90px rgba(217, 243, 106, .025);
}

.portal-card-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.portal-card-label {
  display: block;
  font-size: 12px;
  font-weight: 900;
}

.portal-muted {
  display: block;
  color: #87978f;
  font-size: 9px;
  margin-top: 4px;
}

.portal-total-card .portal-muted {
  color: #9cb1a8;
}

.portal-card-menu {
  border-color: rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: #d5e2dc;
  z-index: 2;
}

.portal-total-balance {
  position: relative;
  z-index: 2;
  margin-top: 27px;
  font-size: clamp(34px, 4vw, 48px);
  font-weight: 800;
  letter-spacing: -.06em;
}

.portal-balance-change {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  color: #9cb1a8;
  font-size: 9px;
}

.portal-positive-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 7px;
  border-radius: 7px;
  background: rgba(217,243,106,.11);
  color: var(--lime);
  font-weight: 900;
}

.portal-positive-pill svg {
  width: 11px;
}

.portal-balance-footer {
  position: absolute;
  z-index: 2;
  left: 24px;
  right: 24px;
  bottom: 19px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  color: #829a90;
  font-size: 9px;
}

.portal-balance-footer a {
  color: var(--lime);
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.portal-balance-footer svg {
  width: 11px;
}

.portal-currency-card {
  padding: 22px;
}

.portal-heading-icon {
  width: 17px;
  height: 17px;
  color: #70847b;
}

.portal-currency-list {
  margin-top: 13px;
}

.portal-currency-row {
  display: grid;
  grid-template-columns: 34px 1fr auto;
  align-items: center;
  gap: 9px;
  min-height: 55px;
  border-top: 1px solid #edf0ed;
}

.currency-symbol {
  width: 31px;
  height: 31px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 900;
}

.currency-usd {
  background: #e5f0e9;
  color: #28634f;
}

.currency-eur {
  background: #eef0e5;
  color: #697330;
}

.currency-gbp {
  background: #e8eef0;
  color: #486b76;
}

.portal-currency-row strong,
.portal-currency-row span {
  display: block;
}

.portal-currency-row strong {
  font-size: 10px;
}

.portal-currency-row div span {
  color: #87958f;
  font-size: 8px;
  margin-top: 2px;
}

.portal-currency-row b {
  font-size: 11px;
  letter-spacing: -.02em;
}

/* -------------------------------------------------------------
   Sections + quick actions
   ------------------------------------------------------------- */

.portal-section {
  margin-top: 30px;
}

.portal-section-heading {
  margin-bottom: 13px;
}

.portal-section-heading h2,
.portal-panel-heading h2,
.portal-support-banner h2 {
  margin-top: 4px;
  font-size: 18px;
  letter-spacing: -.035em;
}

.portal-quick-actions {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.portal-action-card {
  min-height: 92px;
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  display: grid;
  grid-template-columns: 34px 1fr 15px;
  gap: 9px;
  align-items: center;
  transition: transform .2s ease, border-color .2s ease;
}

.portal-action-card:hover {
  transform: translateY(-2px);
  border-color: #bdcbc4;
}

.portal-action-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: #edf4ef;
  color: #4c7566;
  display: grid;
  place-items: center;
}

.portal-action-icon svg,
.portal-action-arrow {
  width: 15px;
  height: 15px;
}

.portal-action-card strong,
.portal-action-card small {
  display: block;
}

.portal-action-card strong {
  font-size: 10px;
}

.portal-action-card small {
  color: #87958f;
  font-size: 8px;
  line-height: 1.4;
  margin-top: 4px;
}

.portal-action-arrow {
  color: #8b9993;
}

/* -------------------------------------------------------------
   Transactions + spending
   ------------------------------------------------------------- */

.portal-content-grid {
  display: grid;
  grid-template-columns: 1.16fr .84fr;
  gap: 16px;
}

.portal-panel {
  padding: 21px;
}

.portal-panel-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 15px;
  margin-bottom: 15px;
}

.portal-panel-heading > a {
  color: #547669;
  font-size: 9px;
  font-weight: 900;
  padding-top: 3px;
}

.portal-select {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 8px;
  padding: 7px 8px;
  color: #687871;
  font-size: 8px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.portal-select svg {
  width: 11px;
}

.portal-transaction-list {
  border-top: 1px solid #edf0ed;
}

.portal-transaction {
  min-height: 64px;
  display: grid;
  grid-template-columns: 35px 1fr auto;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid #edf0ed;
}

.transaction-icon {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  display: grid;
  place-items: center;
}

.transaction-icon svg {
  width: 14px;
}

.transaction-incoming {
  background: #e7f1e8;
  color: #2e765d;
}

.transaction-card {
  background: #f0f0e9;
  color: #777947;
}

.transaction-transfer {
  background: #e8eef0;
  color: #4d7179;
}

.transaction-exchange {
  background: #eee9f0;
  color: #715b79;
}

.transaction-details strong,
.transaction-details span {
  display: block;
}

.transaction-details strong {
  font-size: 10px;
}

.transaction-details span {
  color: #8a9691;
  font-size: 8px;
  margin-top: 3px;
}

.transaction-amount {
  font-size: 10px;
  font-weight: 900;
  white-space: nowrap;
}

.transaction-positive {
  color: #39735d;
}

.portal-spend-total {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 7px 0 17px;
}

.portal-spend-total strong {
  font-size: 25px;
  letter-spacing: -.05em;
}

.portal-spend-total span {
  color: #8b9691;
  font-size: 8px;
}

.portal-spend-chart {
  height: 112px;
  padding: 0 3px 2px;
  border-bottom: 1px solid #e8ece9;
  display: flex;
  align-items: flex-end;
  gap: 7px;
}

.portal-spend-chart span {
  flex: 1;
  min-width: 5px;
  border-radius: 6px 6px 2px 2px;
  background: #bfd1c7;
}

.portal-spend-chart span:nth-child(6),
.portal-spend-chart span:nth-child(8) {
  background: #6f9182;
}

.portal-chart-labels {
  display: flex;
  justify-content: space-between;
  color: #a0aaa5;
  font-size: 7px;
  margin-top: 7px;
}

.portal-spend-breakdown {
  margin-top: 18px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 11px 15px;
}

.portal-spend-breakdown div {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 8px;
}

.portal-spend-breakdown span {
  color: #78867f;
  display: flex;
  align-items: center;
  gap: 5px;
}

.portal-spend-breakdown strong {
  font-size: 9px;
}

.spend-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  display: inline-block;
}

.spend-dot-one { background: #6f9182; }
.spend-dot-two { background: #a9bda9; }
.spend-dot-three { background: #c9cdb0; }
.spend-dot-four { background: #b5c0c4; }

/* -------------------------------------------------------------
   Lower dashboard panels
   ------------------------------------------------------------- */

.portal-bottom-grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr .95fr;
  gap: 16px;
}

.portal-card-panel {
  padding: 21px;
}

.portal-card-panel-dark {
  background: var(--deep);
  color: #fff;
  border-color: var(--deep);
}

.portal-panel-heading-light .portal-overline {
  color: #8ca49a;
}

.portal-panel-heading-light h2 {
  color: #fff;
}

.portal-panel-heading-light > a {
  color: var(--lime);
}

.demo-bank-card {
  margin-top: 16px;
  min-height: 156px;
  border-radius: 17px;
  padding: 17px;
  background: linear-gradient(145deg, #45665a, #183e35 65%, #102f29);
  border: 1px solid rgba(255,255,255,.11);
  box-shadow: 0 18px 35px rgba(0,0,0,.2);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.demo-bank-card-top,
.demo-bank-card-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.demo-bank-card-top span {
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .16em;
}

.demo-bank-card-top svg {
  width: 18px;
}

.demo-bank-card-number {
  font-size: 14px;
  letter-spacing: .18em;
  color: #d9e4df;
}

.demo-bank-card-bottom {
  font-size: 7px;
  letter-spacing: .1em;
  color: #c5d3cd;
}

.portal-card-meta {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: #9fb1aa;
  font-size: 8px;
  margin-top: 13px;
}

.portal-card-meta span:first-child {
  color: #d5e5dd;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.portal-card-meta svg {
  width: 10px;
}

.portal-goal-amount {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-top: 24px;
}

.portal-goal-amount strong {
  font-size: 25px;
  letter-spacing: -.05em;
}

.portal-goal-amount span {
  color: #8b9892;
  font-size: 9px;
}

.portal-goal-track {
  height: 9px;
  background: #edf1ed;
  border-radius: 99px;
  overflow: hidden;
  margin-top: 16px;
}

.portal-goal-track span {
  display: block;
  height: 100%;
  background: #6d8d7d;
  border-radius: inherit;
}

.portal-goal-footer {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  color: #8b9892;
  font-size: 8px;
  margin-top: 8px;
}

.portal-text-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #4f7467;
  font-size: 9px;
  font-weight: 900;
  margin-top: 22px;
}

.portal-text-link svg {
  width: 11px;
}

.portal-secure-icon {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  background: #e7f2e9;
  color: #4a7863;
}

.portal-secure-icon svg {
  width: 16px;
}

.portal-security-row {
  padding: 13px 0;
  border-top: 1px solid #edf0ed;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.portal-security-row strong,
.portal-security-row small {
  display: block;
}

.portal-security-row strong {
  font-size: 9px;
}

.portal-security-row small {
  color: #8a9791;
  font-size: 8px;
  margin-top: 3px;
}

.portal-security-row > svg {
  width: 15px;
  color: #5b806d;
}

.portal-status {
  padding: 5px 7px;
  border-radius: 7px;
  background: #e7f2e9;
  color: #3d725a;
  font-size: 8px;
  font-weight: 900;
}

/* -------------------------------------------------------------
   Support + footer
   ------------------------------------------------------------- */

.portal-support-banner {
  margin-top: 30px;
  padding: 20px;
  border-radius: 18px;
  background: #e7efe7;
  display: grid;
  grid-template-columns: 42px 1fr auto;
  gap: 13px;
  align-items: center;
}

.portal-support-icon {
  width: 42px;
  height: 42px;
  border-radius: 13px;
  background: var(--deep);
  color: var(--lime);
  display: grid;
  place-items: center;
}

.portal-support-icon svg {
  width: 18px;
}

.portal-support-banner h2 {
  font-size: 15px;
}

.portal-support-banner p {
  margin-top: 4px;
  color: #718079;
  font-size: 9px;
  max-width: 560px;
}

.portal-footer {
  padding: 24px 2px 0;
  display: flex;
  justify-content: space-between;
  gap: 15px;
  color: #9aa59f;
  font-size: 8px;
}

.portal-mobile-profile,
.portal-mobile-nav {
  display: none;
}

/* -------------------------------------------------------------
   Tablet
   ------------------------------------------------------------- */

@media (max-width: 1100px) {
  .portal-layout {
    grid-template-columns: 205px minmax(0, 1fr);
  }

  .portal-main {
    padding: 30px 25px 40px;
  }

  .portal-quick-actions {
    grid-template-columns: 1fr 1fr;
  }

  .portal-bottom-grid {
    grid-template-columns: 1fr 1fr;
  }

  .portal-card-panel-dark {
    grid-column: 1 / -1;
  }
}

/* -------------------------------------------------------------
   Mobile — deliberately centered and phone-friendly
   ------------------------------------------------------------- */

@media (max-width: 760px) {
  .portal-header {
    height: 62px;
  }

  .portal-header-inner {
    width: min(100% - 24px, 430px);
  }

  .portal-brand img {
    width: 124px;
  }

  .portal-header-actions {
    gap: 7px;
  }

  .portal-header-actions > .portal-icon-btn,
  .portal-header-actions > .portal-user-chip,
  .portal-header-actions > .portal-signout {
    display: none;
  }

  .portal-layout {
    width: 100%;
    display: block;
    min-height: auto;
  }

  .portal-sidebar {
    display: none;
  }

  .portal-main {
    width: min(100%, 430px);
    margin: 0 auto;
    padding: 20px 14px 95px;
    background: #f4f6f3;
  }

  .portal-welcome {
    display: none;
  }

  .portal-mobile-profile {
    display: flex;
    align-items: center;
    margin-bottom: 18px;
  }

  .portal-mobile-profile h1 {
    font-size: 28px;
    line-height: 1.05;
  }

  .portal-mobile-bell {
    flex: none;
  }

  .portal-balance-grid,
  .portal-content-grid,
  .portal-bottom-grid {
    grid-template-columns: 1fr;
  }

  .portal-balance-grid {
    margin-top: 0;
  }

  .portal-total-card {
    min-height: 230px;
    padding: 20px;
  }

  .portal-total-balance {
    font-size: 38px;
    margin-top: 25px;
  }

  .portal-currency-card,
  .portal-panel,
  .portal-card-panel {
    border-radius: 17px;
  }

  .portal-quick-actions {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .portal-action-card {
    min-height: 84px;
    padding: 12px;
  }

  .portal-section {
    margin-top: 24px;
  }

  .portal-transaction {
    grid-template-columns: 34px 1fr auto;
    gap: 8px;
  }

  .transaction-details span {
    font-size: 7.5px;
  }

  .transaction-amount {
    font-size: 9px;
  }

  .portal-bottom-grid {
    gap: 12px;
  }

  .portal-card-panel-dark {
    grid-column: auto;
  }

  .portal-support-banner {
    grid-template-columns: 38px 1fr;
    gap: 10px;
  }

  .portal-support-icon {
    width: 38px;
    height: 38px;
  }

  .portal-support-banner .portal-btn {
    grid-column: 1 / -1;
    width: 100%;
  }

  .portal-footer {
    display: block;
    text-align: center;
    line-height: 1.7;
  }

  .portal-footer span {
    display: block;
  }

  .portal-mobile-nav {
    position: fixed;
    left: 50%;
    bottom: 10px;
    transform: translateX(-50%);
    width: min(calc(100% - 20px), 410px);
    min-height: 62px;
    padding: 7px 7px 6px;
    background: rgba(255,255,255,.96);
    border: 1px solid #dce4df;
    border-radius: 19px;
    box-shadow: 0 15px 40px rgba(26,49,42,.14);
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    align-items: center;
    z-index: 60;
    backdrop-filter: blur(12px);
  }

  .portal-mobile-nav a {
    min-width: 0;
    min-height: 49px;
    border-radius: 13px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
    color: #87948f;
    font-size: 7px;
    font-weight: 900;
  }

  .portal-mobile-nav a.active {
    background: #edf5ee;
    color: var(--deep);
  }

  .portal-mobile-nav a svg {
    width: 17px;
    height: 17px;
  }

  .mobile-nav-transfer {
    width: 34px;
    height: 34px;
    margin-top: -17px;
    margin-bottom: -1px;
    border-radius: 50%;
    background: var(--deep);
    color: var(--lime);
    display: grid;
    place-items: center;
    border: 4px solid #f4f6f3;
  }

  .mobile-nav-transfer svg {
    width: 15px !important;
    height: 15px !important;
  }
}

@media (max-width: 360px) {
  .portal-main {
    padding-left: 10px;
    padding-right: 10px;
  }

  .portal-mobile-nav {
    width: calc(100% - 12px);
    bottom: 6px;
  }

  .portal-total-balance {
    font-size: 34px;
  }
}

/* Customer profile menu: right-aligned on desktop and mobile. */
.portal-user-menu{position:relative;display:flex;align-items:center}.portal-user-chip{border:0;background:transparent;color:inherit;cursor:pointer;padding:3px 0}.portal-user-dropdown{position:absolute;right:0;top:calc(100% + 12px);width:245px;padding:9px;background:#fff;border:1px solid #e2e8f0;border-radius:17px;box-shadow:0 22px 55px #0f172a20;z-index:500}.portal-user-dropdown[hidden]{display:none}.portal-user-dropdown-head{display:flex;align-items:center;gap:10px;padding:10px;border-bottom:1px solid #edf2f7;margin-bottom:5px}.portal-user-dropdown-head img{width:38px;height:38px;object-fit:cover;border-radius:50%}.portal-user-dropdown-head strong,.portal-user-dropdown-head small{display:block}.portal-user-dropdown-head small{color:#64748b;margin-top:3px}.portal-user-dropdown>a{display:flex;align-items:center;gap:10px;padding:11px 10px;border-radius:10px;color:#334155;text-decoration:none;font-size:13px;font-weight:700}.portal-user-dropdown>a:hover{background:#f1f5f9}.portal-user-dropdown>a svg{width:17px;height:17px;color:#64748b}
@media(max-width:900px){.portal-header-actions{margin-left:auto;justify-content:flex-end;gap:9px}.portal-user-menu{order:2}.portal-header-actions>.portal-icon-btn{order:1}.portal-user-chip .portal-user-name,.portal-user-chip>svg{display:none}.portal-user-chip .portal-avatar{width:38px;height:38px}.portal-user-dropdown{right:0;top:calc(100% + 10px)}}