/* SAIG Finance — one light, warm scheme (design/RULES.md §2); never follows the phone's dark mode. */
:root { color-scheme: light; --paper:#f8f5ee; --paper-2:#efe9dc; --ink:#17221f; --ink-2:#4b5552; --muted:#7b847f; --line:#e3dccc; --teal:#0f5f6b; --teal-2:#0b4a54; --tint:#e2eef0; --gold:#c9a24c; --ok:#1d7a4b; --warn:#a9671b; --bad:#a83232; --radius:16px; }
* { box-sizing:border-box } html { scroll-behavior:smooth }
body { margin:0; background:var(--paper); color:var(--ink); font:16px/1.55 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; -webkit-font-smoothing:antialiased }
h1,h2,h3 { font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif; font-weight:500; letter-spacing:-.01em; margin:0 }
h1 { font-size:clamp(1.8rem,4vw,2.6rem); line-height:1.08 } h2 { font-size:1.45rem } h3 { font-size:1.15rem }
a { color:var(--teal) } .wrap { max-width:1120px; margin:0 auto; padding:0 16px }
.top { position:sticky; top:0; z-index:40; padding:10px 12px } .bar { max-width:1120px; margin:0 auto; display:flex; align-items:center; gap:14px; padding:8px 10px 8px 14px; border-radius:999px; background:rgba(255,255,255,.78); border:1px solid rgba(23,34,31,.08); backdrop-filter:blur(14px); box-shadow:0 12px 36px -24px rgba(23,34,31,.4) }
.brand { display:flex; align-items:center; gap:10px; color:var(--ink); text-decoration:none; font-weight:600; letter-spacing:.01em } .brand b { color:var(--teal); font-weight:700 }
.mark { width:28px; height:28px; border-radius:9px; background:linear-gradient(135deg,var(--teal),#2a8c9a); box-shadow:inset 0 -3px 0 rgba(0,0,0,.18) }
.nav { display:flex; gap:2px; margin-left:auto } .nav a { padding:8px 12px; border-radius:999px; color:var(--ink-2); text-decoration:none; font-weight:500; font-size:14px } .nav a.on, .nav a:hover { background:var(--tint); color:var(--teal) }
.who { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--ink-2) }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:10px 18px; border-radius:999px; border:1px solid transparent; font:inherit; font-weight:600; font-size:14.5px; cursor:pointer; text-decoration:none; transition:.2s; white-space:nowrap }
.btn-p { background:var(--teal); color:#fff; box-shadow:inset 0 -3px 0 rgba(0,0,0,.18), 0 10px 22px -12px rgba(15,95,107,.6) } .btn-p:hover { background:var(--teal-2); transform:translateY(-1px) }
.btn-s { background:#fff; color:var(--ink); border-color:var(--line); box-shadow:inset 0 -2px 0 rgba(0,0,0,.05) } .btn-s:hover { border-color:var(--teal); color:var(--teal) }
.btn-sm { padding:7px 13px; font-size:13px } .btn[disabled] { opacity:.55; pointer-events:none }
.card { background:#fff; border:1px solid var(--line); border-radius:var(--radius); box-shadow:0 1px 0 rgba(23,34,31,.03), 0 14px 30px -26px rgba(23,34,31,.3) }
.kicker { font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--teal) } .kicker::before { content:""; display:inline-block; width:20px; height:1px; background:var(--gold); margin-right:9px; vertical-align:middle }
.hero { padding:36px 0 22px } .hero p { color:var(--ink-2); max-width:62ch; margin:10px 0 0 }
.grid { display:grid; gap:14px } @media (min-width:800px) { .grid-3 { grid-template-columns:repeat(3,1fr) } .grid-2 { grid-template-columns:1fr 1fr } }
.row { padding:18px 20px; display:grid; gap:10px; grid-template-columns:1.3fr 1fr 1fr 1fr 1.2fr; align-items:start; border-top:1px solid var(--line) } .row:first-child { border-top:0 }
.row.head { font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); padding:12px 20px } .row a.name { font-weight:600; color:var(--ink); text-decoration:none; font-size:16px }
.small { font-size:13px; color:var(--muted) }
.pill { display:inline-block; padding:3px 10px; border-radius:999px; font-size:12.5px; font-weight:600; background:var(--paper-2); color:var(--ink-2) }
.pill.s-approved { background:#dff1e6; color:var(--ok) } .pill.s-declined, .pill.s-no-response { background:#f6dddd; color:var(--bad) } .pill.s-info-requested, .pill.s-enhanced-due-diligence { background:#f8e9d2; color:var(--warn) } .pill.s-enquiry-sent, .pill.s-application-submitted { background:var(--tint); color:var(--teal) }
@media (max-width:799px) { .row { grid-template-columns:1fr 1fr } .row.head { display:none } .row > div:first-child { grid-column:1/-1 } .row > div::before { content:attr(data-l); display:block; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted) } .row > div:first-child::before { display:none } }
.tabs { display:flex; gap:4px; overflow-x:auto; padding:4px; border-radius:999px; background:var(--paper-2); width:max-content; max-width:100% } .tabs button { border:0; background:transparent; padding:8px 14px; border-radius:999px; font:inherit; font-weight:600; font-size:14px; color:var(--ink-2); cursor:pointer; white-space:nowrap } .tabs button.on { background:#fff; color:var(--teal); box-shadow:0 2px 8px -4px rgba(23,34,31,.3) }
.app { padding:18px 20px } .app + .app { border-top:1px solid var(--line) } .app .t { display:flex; flex-wrap:wrap; gap:8px 14px; align-items:center } .app dl { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:8px 16px; margin:12px 0 0; font-size:14px } .app dt { font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted) } .app dd { margin:0; color:var(--ink-2) }
form.f { display:grid; gap:12px; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)) } form.f label { display:grid; gap:4px; font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted) } form.f label.wide { grid-column:1/-1 }
input, select, textarea { font:inherit; font-size:15px; color:var(--ink); padding:10px 12px; border:1px solid var(--line); border-radius:12px; background:#fff; width:100%; text-transform:none; letter-spacing:0 } textarea { min-height:72px; resize:vertical } input:focus, select:focus, textarea:focus { outline:2px solid var(--teal); outline-offset:1px; border-color:transparent }
.actions { display:flex; flex-wrap:wrap; gap:8px; grid-column:1/-1 }
.log { list-style:none; margin:0; padding:0 } .log li { padding:12px 0; border-top:1px solid var(--line); font-size:14.5px } .log li:first-child { border-top:0 } .log time { display:block; font-size:12px; color:var(--muted) }
.note { padding:14px 16px; border-radius:12px; background:var(--tint); color:var(--teal-2); font-size:14px } .note.bad { background:#f6dddd; color:var(--bad) } .note.warn { background:#f8e9d2; color:var(--warn) }
.loading { padding:60px 0; color:var(--muted); text-align:center }
.signin { max-width:520px; margin:30px auto; padding:26px } .signin .alt { margin-top:18px; padding-top:16px; border-top:1px solid var(--line); font-size:14px; color:var(--ink-2) }
.foot { margin-top:60px; padding:26px 0; border-top:1px solid var(--line); background:var(--paper-2); font-size:13px; color:var(--muted) }
.toast { position:fixed; left:50%; bottom:max(16px,env(safe-area-inset-bottom)); transform:translateX(-50%); background:var(--ink); color:#fff; padding:10px 16px; border-radius:999px; font-size:14px; z-index:60; box-shadow:0 12px 30px -10px rgba(0,0,0,.5) }
.reveal { animation:up .5s cubic-bezier(.2,.8,.2,1) both } @keyframes up { from { opacity:0; transform:translateY(12px) } }
@media (prefers-reduced-motion:reduce) { .reveal { animation:none } }
.brand span { white-space:nowrap }
@media (max-width:640px) { .who > span { display:none } .bar { gap:8px; padding-left:10px } .nav a { padding:8px 10px } }