/* ECHANNEL v4: illustrations, textures, multi-tone icons */
:root{--teal:#2E9C93;--teal-2:#CBEAE5;--ivory:#FBF4E4}
.gx{display:block;overflow:visible}
/* page texture: faint dot grid + soft top wash */
.app{background-color:var(--bg);background-image:radial-gradient(120% 40% at 100% 0,rgba(203,234,229,.35),transparent 60%),url(gfx/paper.svg);background-size:auto,28px 28px}
/* navy bars get the banknote wave pattern */
.appbar:not(.light),.appbar-tail{background-image:url(gfx/navy-pattern.svg),linear-gradient(160deg,#0B1F3A,#163661);background-size:cover,auto;background-position:right top}
.appbar-tail{background-position:right bottom}

/* ---------- home hero ---------- */
.h-top{background:radial-gradient(90% 70% at 85% 30%,rgba(58,100,160,.55),transparent 70%),linear-gradient(165deg,#0B1F3A 0%,#13305A 55%,#1A3D6E 100%);padding-bottom:78px}
.h-top::after{border-color:rgba(201,164,92,.16)}
.h-top::before{content:"";position:absolute;inset:0;background:url(gfx/navy-pattern.svg) right top/cover no-repeat;opacity:.7;pointer-events:none}
.hero-top{position:relative;z-index:2}
.hero-body{position:relative;z-index:1;display:flex;align-items:center;gap:6px;margin-top:6px;min-height:118px}
.hero-txt{flex:1;min-width:0}
.hero-txt .hello{margin:0 0 10px;font-size:19px;font-weight:700;line-height:1.35;color:#fff}
.hero-pill{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;line-height:1.35;color:#F3E3BC;background:rgba(255,255,255,.07);border:1px solid rgba(227,201,143,.38);padding:4px 10px 4px 5px;border-radius:999px;backdrop-filter:blur(2px)}
.hero-pill .gx{width:18px;height:18px;flex:0 0 18px}
.hero-art{flex:0 0 160px;width:160px;height:124px;margin-right:-8px;filter:drop-shadow(0 8px 14px rgba(0,0,0,.25))}
.hero-sky{position:absolute;left:0;right:0;bottom:0;width:100%;height:60px;pointer-events:none}
@media (prefers-reduced-motion:no-preference){
  .hero-float{animation:gxFloat 6s ease-in-out infinite;transform-origin:98px 60px}
  .spk{animation:gxTw 3.2s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
  .spk.s2{animation-delay:1.4s}
}
@keyframes gxFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes gxTw{0%,100%{opacity:.35;transform:scale(.8)}50%{opacity:1;transform:scale(1)}}
@media (max-width:360px){.hero-art{flex-basis:126px;width:126px;height:100px}.hero-txt .hello{font-size:17px}}

/* loan card guilloche corner */
.loan-card{position:relative;overflow:hidden;background:linear-gradient(180deg,#fff 0%,#FFFDF8 100%)}
.loan-card>*{position:relative;z-index:1}
.loan-card .lc-guil{position:absolute;z-index:0;right:-110px;top:-120px;width:240px;height:240px;background:url(gfx/guilloche.svg) center/contain no-repeat;opacity:.9}
.loan-card::before{content:"";position:absolute;left:-90px;bottom:-130px;width:240px;height:240px;background:url(gfx/guilloche.svg) center/contain no-repeat;opacity:.5;z-index:0}
.loan-card::after{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,transparent,var(--gold),transparent);z-index:1}

/* ---------- illustrated icon tiles ---------- */
.gx-tile{background:linear-gradient(155deg,#FFFFFF 0%,#EEF3F9 100%)!important;border:1px solid #E4E9F1;box-shadow:0 1px 1px rgba(11,31,58,.04),0 6px 12px -4px rgba(19,48,90,.18),inset 0 1px 0 #fff;padding:6px}
.q-ic.gx-tile{width:52px;height:52px;border-radius:16px;padding:7px}
.q-ic.t-borrow{background:linear-gradient(155deg,#FFFBF1,#F5E6C4)!important;border-color:#EEDDB7}
.q-ic.t-cs{background:linear-gradient(155deg,#FFFFFF,#E3F3F0)!important;border-color:#D3ECE7}
.q-ic.t-docs,.q-ic.t-apps{background:linear-gradient(155deg,#FFFFFF,#F7F1E4)!important}
.fgrid-card{background:linear-gradient(180deg,#fff,#FBFCFE)}
.fgrid a,.fgrid button{font-weight:600;color:var(--ink)}
@media (prefers-reduced-motion:no-preference){.fgrid a:active .gx-tile,.fgrid button:active .gx-tile{transform:translateY(1px) scale(.97)}}
.gx-tile{transition:transform .15s}

/* section headers with tiny illustrations */
.gx-h{display:flex;align-items:center;justify-content:flex-start!important;gap:8px}
.gxh{display:inline-block;flex:0 0 26px;width:26px;height:26px;padding:3px;border-radius:9px;background:#fff;border:1px solid #E6E9EF;box-shadow:0 3px 8px -3px rgba(19,48,90,.2)}
.gx-h2{display:flex;align-items:center;gap:10px}
.gx-h2 .gxh{flex-basis:34px;width:34px;height:34px;padding:4px;border-radius:11px}
.gx-h3{display:flex;align-items:center;gap:6px}
.gx-h3 svg{color:var(--gold-d)}
.gx-h3b{display:flex;align-items:center;gap:8px}

/* steps: gold ring numbers */
.hsteps i{background:radial-gradient(circle at 35% 30%,#2C5592,#0B1F3A);box-shadow:0 0 0 3px #FBF4E4,0 0 0 4px #E7D3A6}
/* products */
.prod{position:relative;overflow:hidden;padding-top:14px}
.prod-gx{position:absolute;right:-6px;bottom:-8px;width:58px;height:58px;opacity:.16}
.prod>*:not(.prod-gx){position:relative}
.prod{background:linear-gradient(160deg,#fff 55%,#FBF6EA)}
.prod+.prod{background:linear-gradient(160deg,#fff 55%,#EEF3F9)}

/* FAQ glyphs */
.fq-ic{flex:0 0 28px;width:28px;height:28px;border-radius:9px;display:grid;place-items:center;background:#F3F6FA;color:var(--navy-3)}
.faq-i:nth-child(3n+2) .fq-ic{background:#FBF4E4;color:#8A6A2A}
.faq-i:nth-child(3n) .fq-ic{background:#E9F5F3;color:#1F7A72}
.faq-i summary>svg{flex:0 0 auto}
.faq-card{background:linear-gradient(180deg,#fff,#FCFDFE)}
.gx-banner{display:flex;align-items:center;gap:12px;margin:4px 0 12px;padding:14px 14px 14px 16px;border-radius:16px;background:url(gfx/navy-pattern.svg) right top/cover no-repeat,linear-gradient(135deg,#0B1F3A,#1D3F70);color:#fff;box-shadow:0 6px 18px rgba(11,31,58,.16)}
.gx-banner div{flex:1}
.gx-banner b{display:block;font-size:17px}
.gx-banner span{font-size:12.5px;color:#D3DCEA}
.gx-banner-art{flex:0 0 64px;width:64px;height:64px;padding:8px;border-radius:18px;background:rgba(255,255,255,.95);box-shadow:0 6px 14px rgba(0,0,0,.2)}

/* customer service card */
.cs-card{position:relative;overflow:hidden}
.cs-card::after{content:"";position:absolute;right:-90px;top:-100px;width:220px;height:220px;background:url(gfx/guilloche.svg) center/contain no-repeat;opacity:.55;pointer-events:none}
.cs-card>*{position:relative;z-index:1}
.cs-ic.gx-tile{flex:0 0 52px;height:52px;border-radius:16px;padding:6px}
.cs-mini{flex:0 0 30px;width:30px;height:30px;margin-top:-2px}
.cs-rows a{background:#fff;border:1px solid #EDF0F5}

/* contact screen */
.c-hero{position:relative;padding-top:4px}
.c-hero-art{position:relative;height:92px;margin:-2px 0 6px;border-radius:14px;background:url(gfx/paper.svg),linear-gradient(135deg,#F3F6FB,#FBF4E4);background-size:28px 28px,auto;overflow:hidden}
.c-hero-art::before{content:"";position:absolute;left:0;right:0;bottom:16px;border-top:1.5px dashed rgba(46,156,147,.45)}
.c-hero-art span{position:absolute;filter:drop-shadow(0 6px 10px rgba(19,48,90,.18))}
.c-hero-art .ch1{left:50%;top:6px;width:76px;height:76px;transform:translateX(-50%)}
.c-hero-art .ch2{left:16%;top:22px;width:52px;height:52px}
.c-hero-art .ch3{right:16%;top:22px;width:52px;height:52px}
@media (prefers-reduced-motion:no-preference){.c-hero-art .ch1{animation:gxFloatC 5s ease-in-out infinite}}
@keyframes gxFloatC{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,-3px)}}
.c-row .o-ic.gx-c,.loc-h .o-ic.gx-c{background:none!important;padding:0}
.c-row .o-ic.gx-c{flex-basis:42px;height:42px;width:42px}
.lic-big{position:relative;overflow:hidden;background:linear-gradient(180deg,#FFFDF7,#fff);border:1px solid #EFE3C6}
.lic-big>*{position:relative;z-index:1}
.lic-wm{position:absolute!important;z-index:0!important;right:-18px;bottom:-22px;width:130px;height:130px;opacity:.07}
.lic-card{background:linear-gradient(135deg,#FFFDF7,#fff);border:1px solid #EFE3C6}
.lic-card .o-ic.gx-cert{flex:0 0 46px;height:46px;width:46px;background:none;padding:0}

/* ---------- borrow ---------- */
.amt-hero{position:relative;overflow:hidden;background:radial-gradient(60% 80% at 50% 0,#FBF4E4 0%,rgba(251,244,228,0) 70%),#fff}
.amt-hero>*:not(.amt-gx){position:relative;z-index:1}
.amt-gx{position:absolute;top:16px;width:70px;height:70px;opacity:.2;z-index:0;pointer-events:none}
.amt-gx.l{left:-14px;transform:rotate(-8deg)}
.amt-gx.r{right:-12px;top:22px;transform:rotate(10deg);opacity:.14}
.chips-g.ten button{position:relative;box-shadow:0 1px 0 rgba(11,31,58,.03)}
.chips-g.ten button[aria-pressed=true]{box-shadow:0 4px 10px -4px rgba(169,132,63,.55)}
.tc-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--teal);margin-right:5px;vertical-align:middle;box-shadow:0 0 0 2px rgba(46,156,147,.18)}
.live{position:relative;overflow:hidden;background:url(gfx/navy-pattern.svg) right top/cover no-repeat,radial-gradient(80% 90% at 100% 0,#2A5290 0%,transparent 60%),linear-gradient(160deg,#0B1F3A 0%,#13305A 100%)}
.live::after{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,transparent,#E3C98F,transparent);opacity:.8}
.live>*{position:relative}
.ofr{position:relative;overflow:hidden;background:url(gfx/navy-pattern.svg) right top/cover no-repeat,linear-gradient(135deg,#0B1F3A,#1D3F70)}

/* ---------- hub ---------- */
.hub-h{align-items:center}
.hub-gx{flex:0 0 44px;width:44px;height:44px;padding:5px;border-radius:14px;background:linear-gradient(155deg,#fff,#EEF3F9);border:1px solid #E4E9F1;box-shadow:0 6px 12px -4px rgba(19,48,90,.18)}
.hub-ht{flex:1;min-width:0}
.acc-ic.gx-tile{flex:0 0 42px;width:42px;height:42px;border-radius:12px;padding:5px}
.acc.ok .acc-ic.gx-tile{background:linear-gradient(155deg,#fff,#E6F5EE)!important;border-color:#CFEADB}
.acc{box-shadow:0 1px 2px rgba(11,31,58,.04),0 6px 16px -10px rgba(11,31,58,.18)}
.acc.ok{border-left:3px solid #3CA676}
.acc.todo{border-left:3px solid #E3C98F}
.acc.bad{border-left-color:var(--warn)}
.help-row{background:linear-gradient(90deg,#fff,#FBFCFE)}

/* location + done */
.loc-h .o-ic.gx-c{flex:0 0 40px;width:40px;height:40px}
.gx-done{background:none!important;width:84px!important;height:84px!important}
.done-hd{background:url(gfx/paper.svg),radial-gradient(70% 60% at 50% 0,#FBF4E4,#fff 70%);background-size:28px 28px,auto}

/* agreement paper: guilloche watermark */
.contract::after{content:"";position:absolute;right:-120px;top:-120px;width:280px;height:280px;background:url(gfx/guilloche.svg) center/contain no-repeat;opacity:.55;pointer-events:none}
.contract>*{position:relative}

.faq-i summary span.fq-ic{flex:0 0 28px}
.loan-card::before{opacity:.3}
.loan-card .lc-guil{opacity:.7}
/* v5: slim form + room for ship.page badge */
.screen{padding-bottom:calc(var(--tab-h) + var(--sab) + 76px)}
body.has-act .screen{padding-bottom:calc(var(--tab-h) + var(--act-h) + var(--sab) + 72px)}
body.no-tabs .screen{padding-bottom:calc(var(--act-h) + var(--sab) + 72px)}
.emp-inc{display:flex;align-items:center;gap:8px;margin:6px 0 0;padding:10px 12px;border-radius:12px;background:#F6F1E6;color:var(--navy);font-size:13.5px}
.emp-inc svg{color:var(--gold-d);flex:none}
.emp-inc span{flex:1}
.emp-inc a{color:var(--navy-3);font-weight:600;text-decoration:none;font-size:13px}
.bank-later{display:flex;gap:8px;align-items:flex-start;margin:0 0 12px;padding:10px 12px;border-radius:12px;background:#EEF3FA;color:var(--navy-2);font-size:13px;line-height:1.55}
.bank-later svg{flex:none;margin-top:2px;color:var(--navy-3)}