/* World Lending Group, public site and apply flow.
   Built on the structure of the site the client likes (sureti.co): a sticky solid-colour
   bar with an outlined sign-in and a bright call to action, a cream page with a tinted
   hero, product cards that overlap the hero edge on soft triple shadows, a strip row,
   a three-column FAQ accordion, big figures with a short accent bar, and a deep footer
   with a lighter bottom bar. Colours are WLG's: navy where they use purple, gold where
   they use yellow. Served at /theme.css for WLG only; ABC keeps the shared dark shell. */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap");

:root{
  --navy:#0A2342; --navy-2:#12315C; --navy-3:#2C5AA0; --deep:#071A33;
  --gold:#C9982A; --gold-hi:#DCAE3E; --gold-soft:#E5BC5A; --gold-deep:#9A6F0F;
  --cream:#FFFDF3; --cream-line:#EDE3B8; --tint:#E7ECF4;
  --text:#3A4658; --head:#1B2638; --mute:#667085; --line:#E4E7EC; --bg:#FFFDF3;
  --ok:#1E8E5A; --warn:#B7791F; --bad:#C0392B; --info:#2C5AA0;
  --r:10px; --r-sm:8px;
  --shadow:0 4px 10px rgba(94,94,94,.20),0 18px 18px rgba(94,94,94,.14),0 40px 24px rgba(94,94,94,.07);
  --shadow-sm:0 1px 2px rgba(16,24,40,.05),0 6px 16px rgba(16,24,40,.07);
}

body{
  background:var(--cream);color:var(--text);
  font:16px/1.5 Inter,"Helvetica Neue",sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
::selection{background:var(--navy);color:#fff}
a{color:var(--navy-3);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{font-family:Inter,sans-serif;color:var(--head);font-weight:700;letter-spacing:-.019em;line-height:1.15}
h1{font-size:clamp(2rem,3.6vw + .6rem,2.9rem);font-weight:800;line-height:1.15}
h2{font-size:clamp(1.8rem,3vw + .6rem,3rem)}
h3{font-size:1.2rem}
.muted{color:var(--mute)}
.small{font-size:.9rem}
.gold{color:var(--gold-deep)}
hr{border-top-color:var(--line)}
.wrap{max-width:1294px;padding:0 32px}
.narrow{max-width:780px}

/* ---------------------------------------------------------------- bar */
header.site{position:sticky;top:0;z-index:1000;background:var(--navy);backdrop-filter:none;border-bottom:0;box-shadow:0 2px 14px rgba(7,26,51,.18);transition:box-shadow .25s}
header.site.is-scrolled{box-shadow:0 6px 22px rgba(7,26,51,.30)}
header.site .wrap{height:auto;padding-top:12px;padding-bottom:12px;gap:24px}
.brandmark{color:#fff;gap:0}
.brandmark img{height:54px;width:auto}
.brandmark span{display:none}
.brandmark .mk{background:none;color:#fff;width:auto;height:auto;font-size:1.3rem}
nav.main{gap:26px}
nav.main a{color:#fff;font-size:15px;font-weight:600;text-decoration:none;padding:0;border:0;white-space:nowrap;transition:color .2s}
nav.main a:hover{color:var(--gold-soft)}
nav.main a.on{color:var(--gold-soft)}
/* outlined sign-in, solid call to action: the pair the reference puts at the right of its bar */
nav.main a[href="/login"]{font-size:14px;padding:9px 16px;border:1.5px solid rgba(255,255,255,.55);border-radius:var(--r-sm);transition:.2s}
nav.main a[href="/login"]:hover{background:rgba(255,255,255,.14);border-color:#fff;color:#fff}
nav.main a.btn{background:var(--gold);border:0;color:var(--navy);font-size:14px;font-weight:700;padding:10px 18px;border-radius:var(--r-sm)}
nav.main a.btn:hover{background:var(--gold-hi);color:var(--navy);filter:none}
/* #14789: the button also carries a typed menu glyph/word from app.js and the static WLG pages (not a language switch,
   there is no language-switching code anywhere in this app); font-size 0 hides that text so only the drawn bars below
   show, leaving one menu icon instead of two. */
.navtoggle{border:0;background:none;padding:8px 4px;font-family:Inter,sans-serif;font-weight:600;font-size:0;line-height:0;color:transparent}
.navtoggle::after{content:"";display:inline-block;width:22px;height:2.5px;background:#fff;border-radius:2px;margin-left:0;vertical-align:middle;box-shadow:0 -7px 0 #fff,0 7px 0 #fff}
@media(max-width:1023px){
  header.site .wrap{padding-top:10px;padding-bottom:10px}
  .brandmark img{height:46px}
  nav.main{top:100%;background:#fff;border-bottom:1px solid var(--line);padding:6px 24px 20px;box-shadow:0 18px 30px rgba(7,26,51,.18)}
  nav.main a,nav.main a[href="/login"]{color:var(--head);padding:14px 0;border:0;border-bottom:1px solid #F1EFE3;border-radius:0;font-size:16px;background:none}
  nav.main a:hover,nav.main a[href="/login"]:hover{color:var(--navy-3);background:none}
  nav.main a.btn{margin-top:14px;text-align:center;border-radius:10px;padding:14px;border:0;color:var(--navy)}
}

/* ------------------------------------------------------------ buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--gold);color:var(--navy);border:2px solid var(--gold);border-radius:6px;
  font:700 16px/22px Inter,sans-serif;padding:14px 24px;transition:all .2s ease;text-align:center;
}
.btn:hover{background:var(--gold-hi);border-color:var(--gold-hi);filter:none;transform:none;text-decoration:none;color:var(--navy)}
.btn.ghost{background:transparent;color:var(--navy);border-color:var(--navy)}
.btn.ghost:hover{background:var(--navy);color:#fff;border-color:var(--navy)}
.btn.sm{padding:9px 16px;font-size:14px;line-height:20px}
.btn.lg{padding:14px 26px}
.btn:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,button:focus-visible{outline:3px solid var(--navy-3);outline-offset:2px}

/* ----------------------------------------------------------- surfaces */
.card,.panel{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:24px;box-shadow:var(--shadow-sm)}
.panel h3{margin-bottom:.4rem}
.eyebrow{
  display:inline-block;background:#fff;color:var(--navy-3);border:1px solid var(--tint);
  border-radius:999px;padding:.3rem .85rem;margin:0 0 1.1rem;font-size:.76rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
}
.stat .n{color:var(--navy-3);font-weight:800}
.stat .l{color:var(--mute)}
.kv{grid-template-columns:130px 1fr;gap:.7rem 1.2rem;font-size:.98rem}
.kv dt{color:var(--mute);font-size:.84rem}
.kv dd{color:var(--head);font-weight:500;overflow-wrap:anywhere}
@media(max-width:600px){.kv{grid-template-columns:1fr;gap:.15rem 0}.kv dt{margin-top:.7rem}}

/* -------------------------------------------------------------- forms */
label{color:var(--head);font-size:.88rem;font-weight:600;letter-spacing:0}
input,select,textarea{background:#fff;color:var(--text);border:1.5px solid #E4E1F0;border-radius:10px;font-size:1rem;padding:.75rem .85rem}
input:focus,select:focus,textarea:focus{border-color:var(--navy-3);box-shadow:0 0 0 3px rgba(44,90,160,.14);outline:none}
select{background-color:#fff;background-image:linear-gradient(45deg,transparent 50%,#667085 50%),linear-gradient(135deg,#667085 50%,transparent 50%);background-position:calc(100% - 18px) 55%,calc(100% - 13px) 55%;background-size:5px 5px;background-repeat:no-repeat}
.hint{color:var(--mute);font-size:.84rem}
.choice{background:#fff;border:1.5px solid #E4E1F0;border-radius:10px}
.choice:hover{border-color:var(--navy-3)}
.choice.on{border-color:var(--navy-3);background:#F4F7FC}
.choice .t{color:var(--head);font-weight:600}
.choice .d{color:var(--mute)}
input[type="radio"],input[type="checkbox"]{border-color:#98A2B3;background:#fff}
input[type="radio"]::before,input[type="checkbox"]::before{background:var(--navy-3)}
input[type="radio"]:checked,input[type="checkbox"]:checked{border-color:var(--navy-3)}
input[type="file"]::file-selector-button{border:1.5px solid var(--navy);background:transparent;color:var(--navy);border-radius:8px;font-weight:600}
input[type="file"]::file-selector-button:hover{background:var(--navy);color:#fff}

/* ------------------------------------------------------------- status */
.pill{border-radius:999px;letter-spacing:.02em;font-size:.72rem;text-transform:none}
.pill.green{background:#E6F4EC;color:var(--ok);border-color:#BFE3CE}
.pill.yellow{background:#FBF1DD;color:var(--warn);border-color:#F0E2B6}
.pill.red{background:#FBE6E3;color:var(--bad);border-color:#F2C4BE}
.pill.grey{background:#EEF0F3;color:var(--mute);border-color:var(--line)}
.banner{border-radius:10px;border-width:1px;font-size:.94rem}
.banner.warn{background:#FBF6E8;border-color:#F0E2B6;color:#5B4A12}
.banner.err{background:#FBE6E3;border-color:#F2C4BE;color:#7A2418}
.banner.ok{background:#E6F4EC;border-color:#BFE3CE;color:#17613F}
.banner.info{background:#E6EEF8;border-color:#C5D6EE;color:#1E3F70}
body #toasts .banner{box-shadow:0 8px 24px rgba(16,24,40,.18)}

/* --------------------------------------------------------- apply flow */
body .steps>div{border-radius:99px;height:6px;background:#E4E7EC}
body .steps>div.on{background:var(--navy-3)}
body .result .num{color:var(--navy-3);font-weight:800}
body .doclist li{border:1.5px solid #E4E1F0;border-radius:10px;background:#fff}
body .doclist li.done{border-color:#BFE3CE;background:#F1F9F4}
body .drop{border:2px dashed #CBD3E0;border-radius:12px;background:#fff}
body .drop:hover,body .drop.hot{border-color:var(--navy-3);background:#F4F7FC}
.spin{border-color:var(--line);border-top-color:var(--navy-3)}
table{font-size:.95rem}
th{color:var(--mute)}
th,td{border-bottom-color:var(--line)}
tbody tr:hover{background:#F9FAFB}
.bar{background:#EEF0F3}
.bar>i{background:linear-gradient(90deg,var(--navy-3),var(--navy))}

/* ------------------------------------------------------------- footer */
/* Same markup as the apply page's injected footer: a grid wrap, then a small wrap for the bottom bar. */
footer.site{background:var(--deep);color:#fff;border-top:0;margin-top:0;padding:0;font-size:16px}
footer.site>.wrap.grid{max-width:1400px;padding:60px 40px;display:grid;grid-template-columns:1.2fr 1fr 1fr .8fr;gap:80px;align-items:start}
footer.site h4{color:#fff;font-family:Inter,sans-serif;font-size:22px;font-weight:700;letter-spacing:-.01em;text-transform:none;margin:0 0 22px}
footer.site p,footer.site .small{color:#A7B6CC;font-size:16px;line-height:1.6}
footer.site a{color:#A7B6CC;text-decoration:none;transition:.3s}
footer.site a:hover{color:#fff;text-decoration:none}
footer.site .grid>div>div{margin-bottom:12px}
footer.site .brandmark img{height:62px}
footer.site>.wrap.small{max-width:none!important;margin:0!important;padding:18px 40px!important;background:var(--navy-2);border-top:0!important;text-align:center;font-size:13px;color:#D2DCEC}
@media(max-width:991px){
  footer.site>.wrap.grid{grid-template-columns:1fr;gap:36px;text-align:center;padding:40px 24px}
  footer.site .brandmark{justify-content:center}
  footer.site .grid .small{font-size:15px}
}

a.btn,a.btn:hover,.brandmark,.brandmark:hover{text-decoration:none}
.cols>*,.box>*,.grid3>*{min-width:0}