/* Date:          2026-08-27
   Function:      Portal styling. Light and dark are both defined at token level so the page
                  holds on either ground; a colour defined only inside a media query would
                  render one theme's text on the other theme's background.
   Developed by:  EMP-4113
   Reports to:    Rahul Gudadhe, Chief Architect
   Accountable:   Shashi Suman, Project Director and Programme Management Office */
:root{
  --ground:#F7F6FB; --surface:#FFFFFF; --surface-2:#FBFAFE;
  --ink:#1A1433; --ink-2:#544C70; --ink-3:#5D5578;
  --rule:#E1DDEE; --navy:#3B2F8F; --accent:#4B3BB0; --accent-soft:#EEEBFA;
  --warn:#9A5B00; --warn-soft:#FBF0DE; --stop:#B3301B; --on-accent:#FFFFFF;
  --shadow:0 1px 2px rgba(16,27,41,.05), 0 8px 24px -16px rgba(16,27,41,.18);
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --ground:#0E0B1C; --surface:#181330; --surface-2:#1F1940;
  --ink:#ECE9F7; --ink-2:#B4ACD0; --ink-3:#A79DC6;
  --rule:#2E2752; --navy:#A99BF0; --accent:#A99BF0; --accent-soft:#231C4A;
  --warn:#E0A356; --warn-soft:#2A2113; --stop:#F09182; --on-accent:#0E0B1C;
  --shadow:0 1px 2px rgba(0,0,0,.35), 0 10px 30px -18px rgba(0,0,0,.7);
}}
:root[data-theme="dark"]{
  --ground:#0E0B1C; --surface:#181330; --surface-2:#1F1940;
  --ink:#ECE9F7; --ink-2:#B4ACD0; --ink-3:#A79DC6;
  --rule:#2E2752; --navy:#A99BF0; --accent:#A99BF0; --accent-soft:#231C4A;
  --warn:#E0A356; --warn-soft:#2A2113; --stop:#F09182; --on-accent:#0E0B1C;
  --shadow:0 1px 2px rgba(0,0,0,.35), 0 10px 30px -18px rgba(0,0,0,.7);
}
*{box-sizing:border-box}
body{margin:0;background:var(--ground);color:var(--ink);
  font-family:"Source Sans 3",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:16.5px;line-height:1.65;-webkit-font-smoothing:antialiased}
h1,h2,.brand{font-family:Archivo,"Helvetica Neue",Arial,sans-serif;text-wrap:balance}
h1{font-size:2rem;font-weight:700;letter-spacing:-.018em;line-height:1.16;margin:.1em 0 .3em}
h2{font-size:1.16rem;font-weight:700;letter-spacing:-.01em;margin:2.2em 0 .6em;
  padding-top:1em;border-top:1px solid var(--rule)}
p{max-width:72ch}
a{color:var(--accent);text-decoration:none}
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
.wrap{max-width:1080px;margin:0 auto;padding:0 26px}
.narrow{max-width:620px}
.top{background:var(--navy);color:#fff}
/* The bar takes the brand violet in light mode. The dark variant must not be reachable from
   the unset state: :root:not([data-theme="light"]) matches when no theme is chosen at all, so
   on its own it darkened the bar for every default viewer. It is gated on the media query. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .top{background:#140F2C;border-bottom:1px solid var(--rule)}
}
:root[data-theme="dark"] .top{background:#140F2C;border-bottom:1px solid var(--rule)}
.top .wrap{display:flex;align-items:center;gap:14px;padding-top:15px;padding-bottom:15px}
.brand{font-weight:700;font-size:1.05rem;color:#fff}
.sub{font-size:.85rem;color:#B9CCE2}
.who{margin-left:auto;font-size:.85rem;color:#D5E2F0}
.who em{font-style:normal;color:#9FBBD8;margin-left:6px}
.top .btn{margin-left:auto}
.top .who + .btn{margin-left:0}
.btn{display:inline-block;background:var(--accent);color:var(--on-accent);font-weight:600;font-size:.9rem;
  padding:9px 16px;border-radius:8px;border:1px solid transparent;cursor:pointer}
.btn.big{padding:13px 22px;font-size:.98rem;margin-top:14px}
.btn.ghost{background:transparent;border-color:#3D5C80;color:#D5E2F0}
.hero{padding:54px 26px 40px}
.eyebrow{font-family:Archivo,sans-serif;font-size:.68rem;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-3);margin:0}
.lede{font-size:1.06rem;color:var(--ink-2)}
.note{font-size:.9rem;color:var(--ink-2)}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:1px;
  background:var(--rule);border:1px solid var(--rule);border-radius:12px;overflow:hidden;margin:28px 0}
.stats div{background:var(--surface);padding:16px 18px}
.stats b{font-family:Archivo,sans-serif;font-size:1.6rem;font-weight:700;display:block;line-height:1;
  font-variant-numeric:tabular-nums}
.stats span{font-size:.76rem;color:var(--ink-2);display:block;margin-top:6px}
.card{background:var(--surface);border:1px solid var(--rule);border-radius:12px;padding:22px 24px;
  margin:20px 0;box-shadow:var(--shadow)}
.card h2{margin-top:0;padding-top:0;border-top:0;font-size:1.05rem}
label{display:block;font-size:.8rem;font-weight:600;color:var(--ink-2);margin:14px 0 5px}
input{width:100%;padding:11px 13px;font-size:1rem;font-family:inherit;color:var(--ink);
  background:var(--surface-2);border:1px solid var(--rule);border-radius:8px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:13px}
.doc{display:block;background:var(--surface);border:1px solid var(--rule);border-radius:12px;
  padding:17px 19px;box-shadow:var(--shadow);color:var(--ink)}
.doc:hover{border-color:var(--accent)}
.doc .ref{font-family:"IBM Plex Mono",monospace;font-size:.64rem;color:var(--ink-3);letter-spacing:.03em}
.doc .nm{font-family:Archivo,sans-serif;font-weight:600;font-size:.98rem;margin:6px 0 4px;display:block}
.doc .ds{font-size:.85rem;color:var(--ink-2);margin:0;max-width:none}
.doc .ext{color:var(--ink-3)}
.banner{border-radius:12px;padding:15px 19px;margin:20px 0;border:1px solid}
.banner.warn,.warn{background:var(--warn-soft);border-color:color-mix(in srgb,var(--warn) 32%,transparent);color:var(--ink)}
p.warn{padding:11px 14px;border-radius:9px;border:1px solid color-mix(in srgb,var(--warn) 32%,transparent);font-size:.86rem}
.err{background:color-mix(in srgb,var(--stop) 12%,transparent);border:1px solid color-mix(in srgb,var(--stop) 34%,transparent);
  color:var(--stop);padding:11px 14px;border-radius:9px;font-size:.9rem}
.foot{padding:34px 26px 60px;font-size:.82rem;color:var(--ink-2);border-top:1px solid var(--rule);margin-top:44px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
@media (max-width:640px){h1{font-size:1.62rem}.top .wrap{flex-wrap:wrap}}

/* ---------------------------------------------------------------- landing
   Pattern: Enterprise Gateway. Path selection, trust signals, sign in as the
   secondary bar action and the primary page action.
   Departure recorded: the design tool proposed Exaggerated Minimalism, which
   means 900 weight display type at up to 12rem. That reads as a fashion or
   agency brand. This is a regulated lending programme whose reviewers have
   already seen the pack in navy, so the pack's own scale and palette are kept
   and only the pattern and the checklist are taken from the tool. What breaks
   if this changes: the portal and the programme documents stop looking like one
   system, and the customer sees two brands for one delivery. */
.skip{position:absolute;left:-9999px;top:0;background:var(--surface);color:var(--ink);
  padding:10px 16px;border-radius:0 0 8px 0;z-index:100}
.skip:focus{left:0}
.hero{padding:64px 0 52px;border-bottom:1px solid var(--rule)}
.hero h1{font-size:clamp(1.85rem,4.4vw,3rem);line-height:1.12;letter-spacing:-.022em;margin:.25em 0 .35em}
.hero .lede{max-width:64ch}
.cta{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:26px}
.btn.quiet{background:transparent;color:var(--accent);border:1px solid var(--rule);font-weight:600;
  padding:13px 20px;font-size:.98rem}
.btn.quiet:hover{border-color:var(--accent)}
.band{padding:52px 0;border-bottom:1px solid var(--rule)}
.band.alt{background:var(--surface)}
h2.sec{font-family:Archivo,sans-serif;font-size:.72rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);margin:0 0 22px;padding:0;border:0}
.paths{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px}
.path{display:block;background:var(--surface);border:1px solid var(--rule);border-radius:14px;
  padding:26px 26px 22px;box-shadow:var(--shadow);color:var(--ink);
  transition:border-color 180ms ease, transform 180ms ease}
.band.alt .path{background:var(--ground)}
.path:hover{border-color:var(--accent);transform:translateY(-2px)}
.path .ttl{font-family:Archivo,sans-serif;font-weight:700;font-size:1.18rem;display:block;margin:14px 0 8px}
.path p{font-size:.94rem;color:var(--ink-2);margin:0 0 16px}
.path .go{font-weight:600;color:var(--accent);font-size:.92rem}
.ic{display:grid;place-items:center;width:44px;height:44px;border-radius:11px;
  background:var(--accent-soft);color:var(--accent)}
.ic svg{width:23px;height:23px}
.ic.sm{width:38px;height:38px;border-radius:10px}
.ic.sm svg{width:20px;height:20px}
.assure{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(400px,100%),1fr));gap:28px 40px}
/* The container is 1080px wide less 52px padding, so 3 columns fit at any minimum up to
   about 330px. 400px forces two columns and the four statements sit
   as a 2 by 2 block. The min(400px,100%) wrapper is required: a bare 400px minimum is
   wider than a 375px viewport and produced horizontal overflow on a small phone., so the four statements sit
   as a 2 by 2 block. At 258px it produced three across and orphaned the fourth. */
.assure h3{font-family:Archivo,sans-serif;font-size:1rem;font-weight:600;margin:13px 0 6px}
.assure p{font-size:.9rem;color:var(--ink-2);margin:0}
.phases{list-style:none;padding:0;margin:22px 0 26px;display:grid;gap:1px;
  background:var(--rule);border:1px solid var(--rule);border-radius:12px;overflow:hidden}
.phases li{background:var(--surface);padding:15px 20px;display:grid;
  grid-template-columns:96px minmax(0,1fr);gap:6px 18px;align-items:baseline}
.phases .ph{font-family:"IBM Plex Mono",monospace;font-size:.7rem;color:var(--ink-3);
  letter-spacing:.05em;grid-row:span 2}
.phases b{font-family:Archivo,sans-serif;font-size:1rem}
.phases .d{font-size:.88rem;color:var(--ink-2);grid-column:2}
.foot{padding:34px 0 60px;border-top:1px solid var(--rule);font-size:.85rem;color:var(--ink-2)}
.foot .fine{font-size:.79rem;color:var(--ink-3);max-width:80ch}
@media (max-width:560px){
  .hero{padding:44px 0 38px}
  .band{padding:40px 0}
  .phases li{grid-template-columns:1fr}
  .phases .ph{grid-row:auto}
  .phases .d{grid-column:1}
  .cta .btn{width:100%;text-align:center}
}
@media (prefers-reduced-motion:reduce){.path:hover{transform:none}}

/* Customer brand mark slot. The bar is dark, so an asset supplied on a light ground is placed on
   a small light plate rather than recoloured. Recolouring a brand mark is a misuse, and the plate
   keeps the supplied artwork exactly as issued. */
.brandslot{display:inline-flex;align-items:center;margin-left:2px}
.brandmark{height:26px;width:auto;display:block;background:#FFFFFF;border-radius:5px;padding:4px 7px}
.brandword{font-size:.85rem;color:#B9CCE2}
@media (max-width:560px){ .brandmark{height:22px} }

/* -------------------------------------------------------------- open items */
.sr{position:absolute;left:-9999px}
.oi{background:var(--surface);border:1px solid var(--rule);border-radius:12px;padding:16px 18px;
  margin:12px 0;box-shadow:var(--shadow)}
.oi-h{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.oi-id{font-family:"IBM Plex Mono",monospace;font-size:.72rem;color:var(--ink-3)}
.oi-t{font-family:Archivo,sans-serif;font-weight:600;font-size:1rem;flex:1;min-width:220px}
.oi-m{font-size:.85rem;color:var(--ink-2);margin:6px 0 0;max-width:none}
.oi-u{font-size:.75rem;color:var(--ink-3);margin:8px 0 0;max-width:none}
.oi-a{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:12px}
.oi-a select,.oi-a input{padding:9px 11px;font-size:.9rem;font-family:inherit;color:var(--ink);
  background:var(--surface-2);border:1px solid var(--rule);border-radius:8px}
.oi-a select{min-width:150px}
.oi-a input{flex:1;min-width:200px}
.oi-a button{padding:9px 18px;font-size:.9rem;font-weight:600;font-family:inherit;cursor:pointer;
  background:var(--accent);color:var(--on-accent);border:1px solid transparent;border-radius:8px}
.st-open{background:var(--warn-soft);color:var(--warn);border:1px solid color-mix(in srgb,var(--warn) 30%,transparent)}
.st-prog{background:var(--accent-soft);color:var(--accent);border:1px solid color-mix(in srgb,var(--accent) 30%,transparent)}
.st-done{background:#E4F1EA;color:#0E6B42;border:1px solid #B7DCC6}
.st-def{background:var(--surface-2);color:var(--ink-2);border:1px solid var(--rule)}
.st-none{background:var(--surface-2);color:var(--ink-3);border:1px solid var(--rule)}
:root[data-theme="dark"] .st-done,:root:not([data-theme="light"]) .st-done{background:#12281E;color:#5FC894;border-color:#1E4634}
.pill{display:inline-block;font-family:"IBM Plex Mono",monospace;font-size:.68rem;font-weight:500;
  padding:3px 9px;border-radius:6px;white-space:nowrap}

/* ------------------------------------------------------------ screen gallery */
.sc-card{margin:20px 0 0;border:1px solid var(--rule);border-radius:14px;overflow:hidden;
  background:var(--surface);box-shadow:var(--shadow)}
.sc-plate{background:var(--surface-2);padding:26px;display:flex;justify-content:center}
.sc-plate img{max-width:100%;height:auto;border-radius:8px;border:1px solid var(--rule);
  box-shadow:0 2px 10px rgba(0,0,0,.10)}
.sc-card figcaption{padding:13px 20px;font-family:Archivo,sans-serif;font-weight:600;
  font-size:.92rem;border-top:1px solid var(--rule)}
.sc-bar{display:flex;gap:12px;margin:16px 0 0;flex-wrap:wrap}
.sc-nav{flex:1;min-width:220px;border:1px solid var(--rule);border-radius:10px;padding:12px 16px;
  background:var(--surface);color:var(--ink);box-shadow:var(--shadow)}
.sc-nav:hover{border-color:var(--accent)}
.sc-nav.off{opacity:.4}
.sc-nav.next{text-align:right}
.sc-l{display:block;font-family:"IBM Plex Mono",monospace;font-size:.62rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-3)}
.sc-t{display:block;font-family:Archivo,sans-serif;font-size:.94rem;margin-top:3px}
.sc-strip{display:flex;gap:12px;overflow-x:auto;padding:4px 2px 14px}
.sc-th{flex:0 0 96px;border:1px solid var(--rule);border-radius:9px;overflow:hidden;
  background:var(--surface);text-align:center;padding-bottom:6px}
.sc-th.on{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}
.sc-th img{width:100%;height:78px;object-fit:cover;object-position:top;display:block}
.sc-th span{font-family:"IBM Plex Mono",monospace;font-size:.62rem;color:var(--ink-2);display:block;margin-top:5px}

/* ------------------------------------------------------------ brand lockup
   The customer mark leads, the product name sits under it. The mark is shown on its own
   light plate and is never recoloured or reproportioned. */
.lockup{display:inline-flex;flex-direction:column;gap:5px;align-items:flex-start;
  text-decoration:none;border:0;padding:2px 0}
.lockup .lk-mark{display:block;line-height:0}
.lockup .brandmark{height:30px;width:auto;background:#FFFFFF;border-radius:6px;padding:5px 9px;
  display:block;box-shadow:0 1px 3px rgba(0,0,0,.16)}
.lockup .lk-name{font-family:Archivo,sans-serif;font-weight:700;font-size:1rem;letter-spacing:-.01em;
  color:#FFFFFF;line-height:1}
.lockup:hover .lk-name{color:#E6E1FA}
.top .wrap{align-items:center;padding-top:12px;padding-bottom:12px}
.brandword{font-size:.85rem;color:#CFC7EE}

/* ------------------------------------------------------------ landing type */
.hero .lede,.band p:not(.eyebrow):not(.note),.path p,.assure p{
  text-align:justify;hyphens:auto;-webkit-hyphens:auto}
.hero .lede{max-width:62ch}
.hero{padding:70px 0 58px}
.hero h1{margin-bottom:.5em}

/* -------------------------------------------------------------- statistics */
.stats{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.stats div{padding:20px 20px 18px}
.stats b{font-size:2rem;letter-spacing:-.03em;color:var(--navy)}
.stats span{font-family:Archivo,sans-serif;font-size:.74rem;font-weight:600;letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink-2);margin-top:8px;line-height:1.35}

/* ------------------------------------------------------------- sign in page */
body.auth{background:var(--ground)}
.authwrap{min-height:100dvh;display:grid;grid-template-columns:minmax(0,440px) minmax(0,1fr)}
.authside{background:linear-gradient(160deg,#3B2F8F 0%,#4B3BB0 58%,#5B49C4 100%);
  color:#fff;padding:44px 40px;display:flex;flex-direction:column;gap:18px}
.authside h2{font-family:Archivo,sans-serif;font-size:1.42rem;font-weight:700;line-height:1.25;
  margin:26px 0 0;color:#fff;max-width:20ch}
.authside p{color:#D3CBF2;font-size:.94rem;margin:0;max-width:38ch}
.authpts{list-style:none;padding:0;margin:8px 0 0;display:grid;gap:9px}
.authpts li{color:#E6E1FA;font-size:.9rem;padding-left:22px;position:relative}
.authpts li::before{content:"";position:absolute;left:0;top:.55em;width:9px;height:9px;
  border-radius:2px;background:#C98A05}
.authfoot{margin-top:auto!important;font-size:.74rem;color:#B3A9E4;max-width:40ch}
.authmain{display:flex;align-items:center;justify-content:center;padding:44px 32px}
.authcard{width:100%;max-width:420px;background:var(--surface);border:1px solid var(--rule);
  border-radius:16px;padding:38px 36px;box-shadow:0 1px 2px rgba(26,20,51,.04),0 24px 60px -34px rgba(26,20,51,.35)}
.authcard h1{font-family:Archivo,sans-serif;font-size:1.72rem;font-weight:700;margin:6px 0 8px;
  letter-spacing:-.02em}
.authlede{font-size:.92rem;color:var(--ink-2);margin:0 0 24px}
.authform label{display:block;font-size:.76rem;font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;color:var(--ink-2);margin:16px 0 6px}
.authform input{width:100%;padding:13px 14px;font-size:.98rem;font-family:inherit;color:var(--ink);
  background:var(--surface-2);border:1px solid var(--rule);border-radius:9px}
.authform input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.authform .btn.big{width:100%;text-align:center;margin-top:22px;padding:14px}
.authsso{display:block;text-align:center;width:100%;margin-top:4px}
.author{display:flex;align-items:center;gap:12px;margin:22px 0 4px;color:var(--ink-3);font-size:.78rem}
.author::before,.author::after{content:"";flex:1;height:1px;background:var(--rule)}
.authhelp{margin:22px 0 0;padding-top:18px;border-top:1px solid var(--rule);
  font-size:.8rem;color:var(--ink-2)}
.authcard .err{margin-bottom:4px}
@media (max-width:880px){
  .authwrap{grid-template-columns:1fr}
  .authside{padding:28px 24px;gap:14px}
  .authside h2{margin-top:16px;font-size:1.22rem}
  .authpts,.authfoot{display:none}
  .authmain{padding:28px 20px}
  .authcard{padding:30px 24px}
}
.oi{scroll-margin-top:20px}
.oi:target{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.oi-d{display:grid;grid-template-columns:150px minmax(0,1fr);gap:6px 16px;margin:12px 0 0}
.oi-d dt{font-family:Archivo,sans-serif;font-size:.64rem;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink-3);padding-top:2px}
.oi-d dd{margin:0;font-size:.88rem;color:var(--ink-2)}
@media (max-width:640px){.oi-d{grid-template-columns:1fr}.oi-d dt{margin-top:6px}}

/* --------------------------------------------------------------- previewer */
.doc .ref{display:flex;align-items:center;gap:8px}
.pdf{font-family:"IBM Plex Mono",monospace;font-size:.56rem;letter-spacing:.08em;
  background:var(--accent-soft);color:var(--accent);border:1px solid color-mix(in srgb,var(--accent) 26%,transparent);
  border-radius:4px;padding:1px 5px}
.pv{position:fixed;inset:0;z-index:200;background:rgba(14,11,28,.62);
  display:flex;align-items:center;justify-content:center;padding:24px}
.pv[hidden]{display:none}
.pv-box{background:var(--surface);border:1px solid var(--rule);border-radius:14px;
  width:min(1180px,96vw);height:min(88vh,1000px);display:flex;flex-direction:column;overflow:hidden;
  box-shadow:0 30px 90px -30px rgba(0,0,0,.6)}
.pv-h{display:flex;align-items:center;gap:12px;padding:12px 14px 12px 18px;
  border-bottom:1px solid var(--rule);background:var(--surface-2)}
.pv-r{font-family:"IBM Plex Mono",monospace;font-size:.64rem;color:var(--ink-3);white-space:nowrap}
.pv-t{font-family:Archivo,sans-serif;font-weight:600;font-size:.96rem;flex:1;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pv-b{font-size:.8rem;font-weight:600;padding:7px 13px;border-radius:8px;white-space:nowrap;
  border:1px solid var(--rule);color:var(--ink-2);background:var(--surface)}
.pv-b:hover{border-color:var(--accent);color:var(--accent)}
.pv-b.pv-dl{background:var(--accent);color:var(--on-accent);border-color:transparent}
.pv-x{background:none;border:0;font-size:1.5rem;line-height:1;color:var(--ink-2);cursor:pointer;
  padding:2px 8px;border-radius:7px}
.pv-x:hover{background:var(--rule)}
.pv-f{flex:1;width:100%;border:0;background:var(--ground)}
@media (max-width:640px){
  .pv{padding:0}.pv-box{width:100vw;height:100vh;border-radius:0}
  .pv-t{display:none}.pv-b{padding:7px 10px}
}

/* Proceed to the Application. Placed above and below the document cards so the journey can be
   started without scrolling past the pack, and without hunting for it after reading. */
.proceed{display:grid;grid-template-columns:1fr auto;align-items:center;gap:.35rem 1.5rem;
  margin:1.75rem 0;padding:1.35rem 1.6rem;border-radius:14px;text-decoration:none;
  background:linear-gradient(100deg,var(--navy),var(--accent));color:var(--on-accent);
  box-shadow:var(--shadow);border:1px solid transparent}
.proceed:hover{filter:brightness(1.07)}
.proceed:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.proceed .pr-t{grid-column:1;font:700 1.15rem/1.3 Archivo,system-ui,sans-serif;
  color:var(--on-accent)}
.proceed .pr-d{grid-column:1;font:400 .875rem/1.5 'Source Sans 3',system-ui,sans-serif;
  color:var(--on-accent);opacity:.88;max-width:62ch}
.proceed .pr-go{grid-column:2;grid-row:1 / span 2;font-size:1.6rem;line-height:1;
  color:var(--on-accent);opacity:.9}
@media (max-width:520px){
  .proceed{grid-template-columns:1fr}
  .proceed .pr-go{grid-column:1;grid-row:auto;text-align:right}
}

/* Sign in guide. A person arriving here should be able to see which account is theirs without
   asking. Names, identifiers and what each view shows; never a password hint. */
.guidehead{margin:1.6rem 0 .25rem;font:700 .82rem/1.3 Archivo,system-ui,sans-serif;
  letter-spacing:.07em;text-transform:uppercase;color:#fff;opacity:.92}
.guidenote{margin:0 0 .7rem;font:400 .8rem/1.5 'Source Sans 3',system-ui,sans-serif;
  color:#fff;opacity:.72;max-width:44ch}
ul.guide{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.4rem}
ul.guide li{display:grid;grid-template-columns:auto auto;gap:.1rem .5rem;
  padding:.55rem .7rem;border-radius:9px;background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14)}
ul.guide .g-n{grid-column:1;font:600 .875rem/1.3 'Source Sans 3',system-ui,sans-serif;color:#fff}
ul.guide .g-i{grid-column:2;justify-self:start;font:500 .78rem/1.3 'IBM Plex Mono',
  ui-monospace,monospace;color:#fff;opacity:.78}
ul.guide .g-r{grid-column:1;font:600 .7rem/1.3 'Source Sans 3',system-ui,sans-serif;
  letter-spacing:.05em;text-transform:uppercase;color:#fff;opacity:.66}
ul.guide .g-o{grid-column:2;justify-self:start;font:400 .7rem/1.3 'Source Sans 3',system-ui,
  sans-serif;color:#fff;opacity:.6}
ul.guide .g-d{grid-column:1 / -1;margin-top:.2rem;
  font:400 .76rem/1.45 'Source Sans 3',system-ui,sans-serif;color:#fff;opacity:.72}
@media (max-width:900px){ ul.guide li{grid-template-columns:1fr} 
  ul.guide .g-i,ul.guide .g-o{grid-column:1} }

/* Closure360 product wordmark. Two weights and two colours across one break, with the numerals
   spaced away from the word so the lockup reads as a product name rather than a run of
   characters. Sits beneath the Satin mark, which leads. */
.lockup .lk-name{display:inline-flex;align-items:baseline;gap:.14em;letter-spacing:-.005em}
.lockup .lk-a{font-weight:700;color:#FFFFFF}
.lockup .lk-b{font-weight:400;color:#FFC845;letter-spacing:.06em}
/* On a light ground the word takes the ink colour and the numerals keep the accent, so the
   pairing survives wherever the lockup is placed. */
body.auth .authside .lockup .lk-a,.top .lockup .lk-a{color:#FFFFFF}
.landing-light .lockup .lk-a{color:var(--ink)}
.landing-light .lockup .lk-b{color:var(--accent)}