@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@300;400;500;600;700&display=swap');
:root {
  --ks1:#041C20;--ks2:#052D34;--ks3:#0C4E5A;--ks4:#638D94;--ks5:#A0C1C6;--ks6:#DEE7E7;
  --cp3:#844025;--cp4:#BC785D;--cp5:#E2B19E;--cp6:#F2ECE2;
  --bd3:#E7E8E1;--bd4:#F7F8F1;--topaz:#FFFECA;--pearl:#FFFFFF;
  --font:'Barlow','Franklin Gothic Medium',Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0;}
html,body{font-family:var(--font);background:var(--bd4);color:var(--ks1);min-height:100vh;font-size:16px;}
body{display:flex;}
a{color:inherit;}
#sidebar{width:288px;height:100vh;background:var(--ks1);display:flex;flex-direction:column;position:fixed;top:0;left:0;z-index:100;overflow-y:scroll;scrollbar-width:thin;scrollbar-color:var(--cp4) rgba(255,255,255,0.05);}
#sidebar::-webkit-scrollbar{width:8px;}
#sidebar::-webkit-scrollbar-track{background:rgba(255,255,255,0.04);}
#sidebar::-webkit-scrollbar-thumb{background:var(--cp4);border-radius:4px;border:2px solid var(--ks1);}
#sidebar::-webkit-scrollbar-thumb:hover{background:var(--cp3);}
.sidebar-logo{padding:30px 26px 22px;border-bottom:1px solid rgba(255,255,255,0.07);text-decoration:none;display:block;}
.sidebar-logo .wordmark{font-size:15px;font-weight:700;letter-spacing:0.2em;color:var(--pearl);text-transform:uppercase;}
.sidebar-logo .sub{font-size:13px;font-weight:300;letter-spacing:0.14em;color:var(--ks5);text-transform:uppercase;margin-top:4px;}
#sidebar nav{padding:18px 0;flex:1;}
.nav-label{font-size:13px;font-weight:700;letter-spacing:0.22em;text-transform:uppercase;color:var(--ks4);padding:18px 26px 6px;}
#sidebar nav a{display:block;padding:10px 26px;color:rgba(255,255,255,0.68);text-decoration:none;font-size:15px;font-weight:300;border-left:2px solid transparent;transition:all 0.12s;line-height:1.4;position:relative;}
#sidebar nav a:hover{color:var(--pearl);background:rgba(255,255,255,0.05);border-left-color:var(--ks4);}
#sidebar nav a.active{color:var(--pearl);background:rgba(255,255,255,0.07);border-left-color:var(--cp4);font-weight:500;}
#sidebar nav a.lvl-1,
#sidebar nav a.lvl-2{padding-left:26px;font-size:15px;color:rgba(255,255,255,0.68);}
#sidebar nav a.lvl-1::before,
#sidebar nav a.lvl-2::before{content:none;}
#main{margin-left:288px;flex:1;display:flex;flex-direction:column;}
#topbar{background:var(--pearl);border-bottom:1px solid var(--bd3);height:62px;padding:0 48px;display:flex;align-items:center;gap:32px;position:sticky;top:0;z-index:50;}
.topbar-logo{display:flex;align-items:center;height:100%;flex-shrink:0;text-decoration:none;}
.topbar-logo img{height:28px;width:auto;display:block;}
.topbar-logo:hover{opacity:0.85;}
.breadcrumb{font-size:14px;color:var(--ks4);letter-spacing:0.02em;flex:1;}
.breadcrumb b{color:var(--ks2);font-weight:600;}
.breadcrumb a{color:var(--ks4);text-decoration:none;}
.breadcrumb a:hover{color:var(--ks2);}
.search-wrap{display:flex;border:1px solid var(--bd3);background:var(--bd4);height:38px;width:300px;}
.search-wrap input{border:none;background:transparent;outline:none;font-size:14px;color:var(--ks1);font-family:var(--font);padding:0 14px;width:100%;}
.search-wrap input::placeholder{color:var(--ks4);}
.search-btn{background:var(--ks2);border:none;color:var(--pearl);padding:0 18px;font-size:13px;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;cursor:pointer;font-family:var(--font);}
#content{padding:56px 64px 72px;max-width:1560px;width:100%;margin:0;}
.hero{background:var(--ks1);padding:36px 56px 72px;margin-bottom:44px;position:relative;overflow:hidden;text-align:center;}
.hero>*{position:relative;z-index:1;}
.hero p{margin-left:auto;margin-right:auto;}
.hero::after{content:'';position:absolute;right:-50px;top:-50px;width:280px;height:280px;border:36px solid rgba(255,255,255,0.03);z-index:0;}
.hero::before{content:'';position:absolute;right:30px;top:30px;width:160px;height:160px;border:22px solid rgba(255,255,255,0.04);z-index:0;}
.hero-tag{font-size:13px;font-weight:700;letter-spacing:0.2em;text-transform:uppercase;color:var(--cp4);margin-bottom:8px;}
.hero h1{font-size:44px;font-weight:300;color:var(--pearl);line-height:1.15;margin-bottom:18px;letter-spacing:-0.01em;}
.hero h1 strong{font-weight:600;display:block;}
.hero p{font-size:17px;color:var(--ks5);max-width:620px;line-height:1.6;font-weight:300;}
.hero-meta{margin-top:28px;font-size:13px;color:var(--ks4);letter-spacing:0.04em;border-top:1px solid rgba(255,255,255,0.07);padding-top:18px;}
h2.s{font-size:26px;font-weight:700;letter-spacing:0.04em;color:var(--ks1);margin:56px 0 22px;padding-bottom:14px;border-bottom:1px solid var(--bd3);line-height:1.25;}
h3.ss{font-size:22px;font-weight:600;color:var(--ks2);margin:40px 0 18px;padding-bottom:10px;border-bottom:1px solid var(--bd3);letter-spacing:-0.005em;}
h4.sss{font-size:17px;font-weight:600;color:var(--ks3);margin:28px 0 12px;padding-bottom:8px;border-bottom:1px solid var(--bd3);}
p.body{font-size:16px;line-height:1.75;color:var(--ks3);margin-bottom:18px;font-weight:300;}
p.body strong{font-weight:700;color:var(--ks1);}
ul.bullets li strong{font-weight:700;color:var(--ks1);}
.callout strong{font-weight:700;color:inherit;}
.dt{width:100%;border-collapse:collapse;font-size:15px;margin:14px 0 36px;background:var(--pearl);border:1px solid var(--bd3);}
.dt thead{background:var(--ks2);}
.dt th{padding:14px 20px;text-align:left;font-size:13px;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:var(--pearl);}
.dt td{padding:14px 20px;border-bottom:1px solid var(--bd3);vertical-align:top;color:var(--ks2);font-weight:300;line-height:1.6;}
.dt tr:last-child td{border-bottom:none;}
.dt td strong{font-weight:600;color:var(--ks1);}
.dt tr:hover td{background:var(--bd4);}
.dt td a{color:var(--ks2);text-decoration:none;}
.dt td a:hover{color:var(--cp3);}
.dt.toc th.num,.dt.toc td.num{width:52px;text-align:center;color:var(--ks4);font-weight:600;}
.dt.toc thead th.num{color:var(--pearl);}
.dt.toc tr.sub td{background:var(--pearl);color:var(--ks3);}
.dt.toc tr.sub .branch{display:none;}
.callout{padding:18px 22px;margin:20px 0;font-size:15px;line-height:1.65;border-left:4px solid;}
.callout.warn{background:var(--cp6);border-color:var(--cp3);color:var(--cp3);}
.callout.info{background:var(--ks6);border-color:var(--ks3);color:var(--ks2);}
.callout strong{font-weight:700;}
.callout a{color:var(--cp3);text-decoration:underline;text-underline-offset:3px;}
.callout a:hover{color:var(--ks1);}
ol.steps{list-style:none;padding:0;margin:16px 0 30px;counter-reset:step;border-left:1px solid var(--bd3);}
ol.steps li{counter-increment:step;position:relative;padding:14px 6px 14px 58px;font-size:16px;color:var(--ks2);font-weight:300;line-height:1.7;border-bottom:1px solid var(--bd4);}
ol.steps li:last-child{border-bottom:none;}
ol.steps li::before{content:counter(step);background:var(--ks2);color:var(--pearl);width:28px;height:28px;font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center;position:absolute;left:16px;top:14px;}
ol.steps li strong{font-weight:600;color:var(--ks1);}
ol.steps li a{color:var(--cp3);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;}
ol.steps li a:hover{color:var(--ks1);}
ol.steps li a strong{color:inherit;}
p.body a{color:var(--cp3);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;}
p.body a:hover{color:var(--ks1);}
p.body a strong{color:inherit;}
.hier{display:flex;background:var(--ks2);margin:14px 0 30px;overflow:hidden;flex-wrap:wrap;}
.hier .node{color:var(--pearl);padding:16px 22px;font-size:15px;font-weight:400;letter-spacing:0.03em;border-right:1px solid rgba(255,255,255,0.08);}
.hier .node span{display:block;font-size:13px;color:var(--ks5);letter-spacing:0.14em;text-transform:uppercase;margin-bottom:4px;font-weight:400;}
.hier .node:last-child{border-right:none;}
.fig{margin:22px auto 32px;border:1px solid var(--bd3);background:var(--pearl);width:fit-content;max-width:650px;}
.fig img{display:block;width:100%;max-width:650px;height:auto;background:var(--bd4);}
.fig.inline,
.fig.fig-narrow,
.fig.fig-tiny,
.fig.fig-compact,
.fig.fig-medium{max-width:650px;width:fit-content;}
.fig.fig-small{max-width:320px;width:100%;}
.fig.fig-small img{width:100%;max-width:320px;}
.fig.crop-top img{object-fit:cover;object-position:center 100%;}
.fig .cap{padding:13px 20px;font-size:13px;color:var(--ks4);letter-spacing:0.04em;background:var(--bd4);border-top:1px solid var(--bd3);}
.fig .cap b{color:var(--ks2);font-weight:700;letter-spacing:0.12em;text-transform:uppercase;font-size:13px;margin-right:10px;}
.pagefoot{display:flex;justify-content:space-between;gap:18px;margin-top:60px;padding-top:26px;border-top:1px solid var(--bd3);}
.pagefoot a{display:block;flex:1;padding:20px 24px;background:var(--pearl);border:1px solid var(--bd3);text-decoration:none;color:var(--ks2);transition:background 0.1s;}
.pagefoot a:hover{background:var(--ks6);}
.pagefoot a .dir{font-size:13px;font-weight:700;letter-spacing:0.18em;text-transform:uppercase;color:var(--cp4);margin-bottom:6px;display:block;}
.pagefoot a .lbl{font-size:16px;font-weight:600;color:var(--ks1);}
.pagefoot a.prev{text-align:left;}
.pagefoot a.next{text-align:right;}
.pagefoot a.empty{visibility:hidden;}

/* BULLET LIST */
ul.bullets {
  list-style: none;
  padding: 0;
  margin: 12px 0 26px;
  border-left: 1px solid var(--bd3);
}
ul.bullets li {
  position: relative;
  padding: 10px 6px 10px 32px;
  font-size: 16px;
  color: var(--ks2);
  font-weight: 300;
  line-height: 1.7;
  border-bottom: 1px solid var(--bd4);
}
ul.bullets li:last-child { border-bottom: none; }
ul.bullets li::before {
  content: '';
  position: absolute;
  left: 16px;
  top: 20px;
  width: 6px;
  height: 6px;
  background: var(--cp4);
  border-radius: 50%;
}
ul.bullets li strong { font-weight: 600; color: var(--ks1); }
ul.bullets li a { color: var(--cp3); text-decoration: underline; text-underline-offset: 3px; }
ul.bullets li a:hover { color: var(--ks1); }

/* Keep numbered step counter when list is split with start=N */
ol.steps[start] { counter-reset: step calc(attr(start type(<integer>), 1) - 1); }

/* Inline figure within a step */
.fig.inline{max-width:650px;width:100%;}

/* ============================================================
   Figure image sizing across the whole guide.
   ============================================================ */
.fig,
.mockup {
  width: fit-content;
  max-width: 650px;
  margin-left: auto;
  margin-right: auto;
}
.fig img {
  width: 100%;
  max-width: 650px;
  height: auto;
  display: block;
  background: var(--bd4);
}
.fig.inline{max-width:650px;width:100%;}

/* ============================================================
   UI MOCKUPS — Login screen + Update Profile form
   ============================================================ */
.mockup {
  border: 1px solid var(--bd3);
  background: var(--pearl);
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  margin: 22px auto 32px;
}
.mockup .cap {
  padding: 13px 20px;
  font-size: 13px;
  color: var(--ks4);
  letter-spacing: 0.04em;
  background: var(--bd4);
  border-top: 1px solid var(--bd3);
  font-family: var(--font);
}
.mockup .cap b {
  color: var(--ks2);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 13px;
  margin-right: 10px;
}
.mockup .frame {
  aspect-ratio: 3 / 2;
  position: relative;
  overflow: hidden;
  background: #ffffff;
}

/* --- LOGIN SCREEN --- */
.mock-login {
  display: grid;
  grid-template-columns: 25% 1fr;
  height: 100%;
  background: #ffffff;
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
.mock-login .brand {
  background: #1a0a4c;
  padding: 6% 0 0 0;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  overflow: hidden;
}
.mock-login .brand svg {
  width: 220%;
  max-width: none;
  height: auto;
  margin-right: -40%;
}
.mock-login .form {
  padding: 8% 12% 6% 12%;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #111111;
  position: relative;
}
.mock-login .form h4 {
  font-size: 3.4em;
  font-weight: 300;
  align-self: flex-start;
  margin: 0 0 8% 0;
  color: #111111;
  border: none;
  padding: 0;
  letter-spacing: -0.02em;
  line-height: 1;
}
.mock-login .form .field {
  width: 100%;
  margin-bottom: 3%;
}
.mock-login .form .field label {
  display: block;
  font-size: 0.72em;
  color: #9c9ca6;
  margin-bottom: 2px;
}
.mock-login .form .field .box {
  height: 42px;
  background: #f5f5f7;
  border-bottom: 1px solid #d8d8de;
}
.mock-login .form .row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.86em;
  color: #111;
  margin-top: 8px;
}
.mock-login .form .row .cb {
  width: 14px;
  height: 14px;
  border: 1.5px solid #b0b0b6;
  display: inline-block;
  background: #ffffff;
}
.mock-login .form .fp {
  font-size: 0.86em;
  color: #6a4dcf;
  text-decoration: underline;
  display: block;
  text-align: center;
  margin: 4% 0 4%;
}
.mock-login .form .btn {
  width: 100%;
  background: #8a6de0;
  color: #ffffff;
  padding: 14px;
  text-align: center;
  font-weight: 500;
  border-radius: 999px;
  margin-bottom: 8%;
  font-size: 0.95em;
}
.mock-login .form .foot {
  display: flex;
  gap: 50px;
  font-size: 0.78em;
  color: #6a4dcf;
  align-self: center;
}
.mock-login .form .foot span { text-decoration: underline; }

/* --- UPDATE PROFILE FORM --- */
.mock-profile {
  padding: 4% 5% 5%;
  color: #111111;
  background: #ffffff;
  height: 100%;
  overflow: auto;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
.mock-profile h4 {
  font-size: 1em;
  font-weight: 700;
  color: #1a2c3a;
  margin: 0 0 22px 0;
  padding: 0;
  border: none;
}
.mock-profile .field { margin-bottom: 16px; }
.mock-profile .field label {
  display: block;
  font-size: 0.7em;
  color: #8a8a92;
  margin-bottom: 4px;
}
.mock-profile .field .box {
  height: 34px;
  background: #f2f2f4;
  border-bottom: 1px solid #cfcfd4;
}
.mock-profile .cpass {
  font-size: 0.85em;
  color: #1a2c3a;
  font-weight: 500;
  margin: 8px 0 14px;
}
.mock-profile .actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin: 20px 0 6px;
}
.mock-profile .actions .btn {
  padding: 6px 20px;
  font-size: 0.82em;
  border-radius: 4px;
  font-weight: 500;
}
.mock-profile .actions .btn.primary { background: #8a6de0; color: #ffffff; }
.mock-profile .actions .btn.ghost {
  border: 1px solid #8a6de0;
  color: #8a6de0;
  background: #ffffff;
}
.mock-profile .mfa {
  border-top: 1px solid #e8e8ec;
  margin-top: 22px;
  padding-top: 18px;
}
.mock-profile .mfa h5 {
  font-size: 0.95em;
  font-weight: 700;
  color: #1a2c3a;
  margin-bottom: 10px;
}
.mock-profile .mfa .btn {
  display: inline-block;
  background: #8a6de0;
  color: #ffffff;
  padding: 6px 14px;
  font-size: 0.8em;
  border-radius: 4px;
  font-weight: 500;
}

/* ============================================================
   APP-CHROME MOCKUPS
   ============================================================ */
.appmock {
  height: 100%;
  background: #ffffff;
  color: #263238;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  display: flex;
  flex-direction: column;
  font-size: 0.72em;
  line-height: 1.4;
}
.appmock .toolbar {
  height: 8%;
  background: #ffffff;
  border-bottom: 1px solid #e7e8ec;
  display: flex;
  align-items: center;
  padding: 0 14px;
  gap: 10px;
  flex-shrink: 0;
}
.appmock .toolbar .homeicon {
  width: 22px; height: 22px;
  background: #f2f2f5;
  border: 1px solid #e0e0e6;
}
.appmock .toolbar .client {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 12px 4px 4px;
  border: 1px solid #e7e8ec;
  border-radius: 999px;
  font-weight: 600;
}
.appmock .toolbar .client .avatar {
  width: 20px; height: 20px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #d97a63, #8a3d24);
}
.appmock .toolbar .search {
  flex: 1; height: 24px;
  background: #f5f5f7;
  border: 1px solid #e7e8ec;
  padding: 0 10px;
  color: #a0a0a6;
  display: flex; align-items: center;
  gap: 6px;
}
.appmock .toolbar .search::before { content: '⌕'; color: #7a4dd8; }
.appmock .toolbar .icons {
  display: flex; gap: 8px;
  color: #7a4dd8;
}
.appmock .breadcrumbs {
  padding: 6px 16px;
  color: #8a8a92;
  background: #f7f7fa;
  border-bottom: 1px solid #eef0f4;
  display: flex;
  justify-content: space-between;
  flex-shrink: 0;
}
.appmock .breadcrumbs .path b { color: #263238; }
.appmock .body {
  flex: 1;
  display: flex;
  overflow: hidden;
}
.appmock .body .main {
  flex: 1;
  padding: 16px 20px;
  overflow: auto;
}
.appmock .body .side {
  width: 30%;
  border-left: 1px solid #eef0f4;
  padding: 14px;
  background: #ffffff;
  overflow: auto;
}
.appmock h3 {
  font-size: 1.05em;
  font-weight: 700;
  color: #263238;
  margin: 0 0 12px;
  border: none;
  padding: 0;
}
.appmock .tabs {
  display: flex;
  gap: 22px;
  padding: 4px 20px;
  border-bottom: 1px solid #eef0f4;
  color: #8a8a92;
  font-weight: 500;
  flex-shrink: 0;
}
.appmock .tabs .tab { padding: 8px 0; }
.appmock .tabs .tab.active { color: #7a4dd8; border-bottom: 2px solid #7a4dd8; }
.appmock .badge {
  display: inline-block;
  background: #ede7f6;
  color: #7a4dd8;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.9em;
  font-weight: 500;
}
.appmock .badge.warn {
  background: #fff2df; color: #8a5a1a;
}
.appmock .btn {
  display: inline-block;
  padding: 4px 12px;
  border: 1px solid #7a4dd8;
  color: #7a4dd8;
  font-weight: 500;
  border-radius: 4px;
}
.appmock .btn.solid { background: #7a4dd8; color: #ffffff; }
.appmock .kv { display: flex; justify-content: space-between; padding: 3px 0; }
.appmock .kv .k { color: #8a8a92; }
.appmock .kv .v { color: #263238; }
.appmock.dashboard .welcome {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  background: #ffffff;
  border-bottom: 1px solid #eef0f4;
}
.appmock.dashboard .welcome .who {
  display: flex; align-items: center; gap: 10px;
}
.appmock.dashboard .welcome .who .avatar {
  width: 28px; height: 28px; background: #a08bea;
  color: #ffffff; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 0.9em;
}
.appmock.dashboard .cardheader {
  font-weight: 700;
  color: #263238;
  padding: 6px 0;
}
.appmock.dashboard .row3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 12px;
  padding: 6px 0;
  color: #8a8a92;
  font-weight: 600;
  font-size: 0.9em;
  border-bottom: 1px solid #eef0f4;
}
.appmock.client .summary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  align-items: start;
}
.appmock.client .filters {
  display: flex; gap: 10px; margin-bottom: 12px;
}
.appmock.client .filters .filter {
  flex: 1; height: 32px;
  background: #f7f7fa;
  border: 1px solid #eef0f4;
  padding: 4px 10px;
  display: flex; flex-direction: column;
  color: #8a8a92; font-size: 0.85em;
}
.appmock.client .filters .filter b { color: #263238; font-weight: 500; }
.appmock.client .actlog .r {
  display: grid;
  grid-template-columns: 90px 80px 100px 1fr 20px;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid #eef0f4;
  align-items: center;
}
.appmock.client .actlog .r .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #d97a63; display: inline-block;
  margin-right: 4px;
}
.appmock.client .side .sh {
  font-weight: 700; color: #263238;
  margin: 10px 0 6px;
}
.appmock.client .side .link {
  color: #7a4dd8; padding: 5px 0;
  border-bottom: 1px solid #eef0f4;
}
.appmock.obligation .grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.appmock.obligation .metric .amt {
  font-size: 1.9em; font-weight: 400;
  color: #263238; line-height: 1;
}
.appmock.obligation .metric .lbl {
  color: #8a8a92; margin-top: 2px;
}
.appmock.obligation .chips {
  display: flex; gap: 14px; margin: 12px 0;
}
.appmock.obligation .chips .chip {
  display: flex; align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: #f7f7fa;
  border-radius: 6px;
  color: #263238;
  font-weight: 500;
}
.appmock.obligation .chips .chip small { color: #8a8a92; font-weight: 400; }
.appmock.obligation .autopay {
  display: flex; justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  border: 1px solid #d3c6f5;
  border-radius: 4px;
  color: #7a4dd8;
  margin: 12px 0;
}
.appmock.obligation .side .notice {
  text-align: center;
  color: #8a8a92;
  padding: 20px 0;
}
.appmock.obligor .card { padding: 12px 16px; }
.appmock.obligor .card h3 { margin-bottom: 10px; }
.appmock.obligor .cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.appmock.obligor .lbl {
  color: #8a8a92; font-weight: 600;
  letter-spacing: 0.06em;
  font-size: 0.9em;
  padding: 3px 0;
}
.appmock.obligor .val { padding: 2px 0 8px; color: #263238; }
.appmock.obligor .tabs2 {
  display: flex; gap: 24px;
  border-bottom: 1px solid #eef0f4;
  padding: 4px 16px;
  color: #8a8a92;
}
.appmock.obligor .tabs2 .active { color: #7a4dd8; border-bottom: 2px solid #7a4dd8; padding-bottom: 6px; }
.appmock.obligor .oblig {
  border-left: 3px solid #d97a63;
  padding: 12px 16px;
  border: 1px solid #eef0f4;
  border-left: 3px solid #d97a63;
}

/* TOC nested tree on home page */
.toctree {
  margin: 14px 0 36px;
  padding-left: 0;
  list-style: none;
}
.toctree ul { list-style: none; padding-left: 26px; margin: 8px 0; border-left: 1px solid var(--bd3); }
.toctree li { padding: 10px 0; border-bottom: 1px dashed var(--bd3); }
.toctree li:last-child { border-bottom: none; }
.toctree > li { padding: 10px 0; }

/* ============================================================
   TASK-BASED SCROLL REVEAL ANIMATIONS
   ============================================================ */
ol.steps li,
.callout,
.fig,
h3.ss,
h4.sss,
table.dt {
  opacity: 1;
}
.js-reveal ol.steps li,
.js-reveal .callout,
.js-reveal .fig,
.js-reveal h3.ss,
.js-reveal h4.sss,
.js-reveal table.dt {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.js-reveal .revealed {
  opacity: 1 !important;
  transform: translateY(0) !important;
}
.js-reveal ol.steps li::before {
  transform: scale(0);
  opacity: 0;
  transition: transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.5s ease-out;
}
.js-reveal ol.steps li.revealed::before {
  transform: scale(1);
  opacity: 1;
}
.js-reveal ol.steps li.revealed:nth-child(1) { transition-delay: 0.00s; }
.js-reveal ol.steps li.revealed:nth-child(2) { transition-delay: 0.15s; }
.js-reveal ol.steps li.revealed:nth-child(3) { transition-delay: 0.30s; }
.js-reveal ol.steps li.revealed:nth-child(4) { transition-delay: 0.45s; }
.js-reveal ol.steps li.revealed:nth-child(5) { transition-delay: 0.60s; }
.js-reveal ol.steps li.revealed:nth-child(6) { transition-delay: 0.75s; }
.js-reveal ol.steps li.revealed:nth-child(7) { transition-delay: 0.90s; }
.js-reveal ol.steps li.revealed:nth-child(1)::before { transition-delay: 0.15s; }
.js-reveal ol.steps li.revealed:nth-child(2)::before { transition-delay: 0.30s; }
.js-reveal ol.steps li.revealed:nth-child(3)::before { transition-delay: 0.45s; }
.js-reveal ol.steps li.revealed:nth-child(4)::before { transition-delay: 0.60s; }
.js-reveal ol.steps li.revealed:nth-child(5)::before { transition-delay: 0.75s; }
.js-reveal ol.steps li.revealed:nth-child(6)::before { transition-delay: 0.90s; }
.js-reveal ol.steps li.revealed:nth-child(7)::before { transition-delay: 1.05s; }
.js-reveal .fig {
  transform: translateY(20px) scale(0.98);
}
.js-reveal .fig.revealed {
  transform: translateY(0) scale(1) !important;
  transition-duration: 0.6s;
}
.js-reveal .callout {
  transform: translateX(-8px);
}
.js-reveal .callout.revealed {
  transform: translateX(0) !important;
}
@media (prefers-reduced-motion: reduce) {
  .js-reveal ol.steps li,
  .js-reveal .callout,
  .js-reveal .fig,
  .js-reveal h3.ss,
  .js-reveal h4.sss,
  .js-reveal table.dt,
  .js-reveal ol.steps li::before {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}