/* SALSA Compliance Portal — ocean identity: sky & royal blue with coral accent */
:root{
  --p1:#0EA5E9;            /* sky blue */
  --p2:#2563EB;            /* royal blue */
  --deep:#081A33;          /* deep navy */
  --deep2:#10294D;
  --accent:#FF6B54;        /* coral */
  --accent-dark:#E14E38;
  --bg:#F5F8FC;            /* cool blue-grey background */
  --card:#FFFFFF;
  --line:#DBE4F0;
  --ink:#10233F;
  --muted:#5D7290;
  --ok:#16A34A; --warn:#D97706; --bad:#DC2626;
  --grad:linear-gradient(135deg,#0EA5E9 0%,#2563EB 100%);
  --shadow:0 10px 30px rgba(8,26,51,.10);
  --shadow-sm:0 3px 12px rgba(8,26,51,.07);
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:"Plus Jakarta Sans",Inter,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
  color:var(--ink);background:var(--bg);line-height:1.6;font-size:16px}
a{color:var(--p2);text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:1140px;margin:0 auto;padding:0 24px}

/* ---------- header ---------- */
.topbar{background:rgba(255,255,255,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50}
.topbar .container{display:flex;align-items:center;gap:28px;height:70px}
.brand{display:flex;align-items:center;gap:11px;font-weight:800;color:var(--deep);font-size:17.5px;letter-spacing:-.2px}
.brand img{height:40px;width:auto}
.nav{display:flex;gap:24px;margin-left:auto;align-items:center}
.nav a{color:var(--ink);font-size:14.5px;font-weight:600}
.nav a.active{color:var(--p2)}
.btn{display:inline-block;background:var(--grad);color:#fff!important;padding:11px 22px;border-radius:12px;
  border:none;font-family:inherit;font-size:14.5px;font-weight:700;cursor:pointer;text-decoration:none!important;
  box-shadow:0 4px 14px rgba(37,99,235,.28);transition:transform .12s ease, box-shadow .12s ease}
.btn:hover{transform:translateY(-1px);box-shadow:0 7px 18px rgba(37,99,235,.34)}
.btn.ghost{background:#fff;color:var(--p2)!important;border:2px solid var(--p1);box-shadow:none;padding:9px 20px}
.btn.ghost:hover{background:#EFF6FF}
.btn.small{padding:7px 15px;font-size:13px;border-radius:10px}
.btn.amber{background:linear-gradient(135deg,#FF8A70,#E14E38);box-shadow:0 4px 14px rgba(225,78,56,.3)}

/* ---------- hero / site ---------- */
.hero{background:var(--deep);color:#fff;padding:92px 0 98px;position:relative;overflow:hidden}
.hero:before{content:"";position:absolute;inset:0;
  background:radial-gradient(600px 400px at 85% 10%,rgba(14,165,233,.38),transparent 60%),
             radial-gradient(500px 380px at 5% 95%,rgba(255,107,84,.20),transparent 60%)}
.hero .container{position:relative}
.hero h1{font-size:46px;line-height:1.12;max-width:740px;font-weight:800;letter-spacing:-.8px}
.hero h1 em{font-style:normal;background:linear-gradient(120deg,#7DD3FC,#A5B4FC);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p.lead{font-size:19px;color:#B5C7E4;max-width:640px;margin:24px 0 36px}
.hero .btn{background:var(--grad);margin-right:12px}
.hero .btn.outline{background:transparent;color:#fff!important;border:2px solid rgba(255,255,255,.35);box-shadow:none}
.hero .btn.outline:hover{border-color:#7DD3FC}
.badge{display:inline-block;background:rgba(14,165,233,.15);border:1px solid rgba(125,211,252,.4);
  color:#7DD3FC;font-size:12.5px;font-weight:700;padding:6px 16px;border-radius:999px;letter-spacing:1.1px;margin-bottom:24px}
section.block{padding:68px 0}
section.block.alt{background:#fff}
h2.section-title{font-size:31px;color:var(--deep);margin-bottom:10px;font-weight:800;letter-spacing:-.4px}
p.section-sub{color:var(--muted);margin-bottom:38px;max-width:660px}
.grid{display:grid;gap:22px}
.grid.c3{grid-template-columns:repeat(3,1fr)}
.grid.c4{grid-template-columns:repeat(4,1fr)}
.grid.c2{grid-template-columns:repeat(2,1fr)}
.card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:28px;box-shadow:var(--shadow-sm)}
.card h3{color:var(--deep);font-size:17.5px;margin-bottom:8px;font-weight:700}
.card p{color:var(--muted);font-size:14.5px}
.card .num{display:inline-flex;width:40px;height:40px;border-radius:12px;background:var(--grad);color:#fff;
  font-weight:800;align-items:center;justify-content:center;margin-bottom:14px;font-size:17px;box-shadow:0 4px 10px rgba(37,99,235,.25)}
.footer{background:var(--deep);color:#9FB4D4;padding:38px 0;font-size:13.5px}
.footer .container{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.footer img{height:42px}

/* ---------- pricing ---------- */
.plan{position:relative;display:flex;flex-direction:column}
.plan .price{font-size:40px;color:var(--deep);font-weight:800;margin:10px 0 2px;letter-spacing:-1px}
.plan .price span{font-size:14px;color:var(--muted);font-weight:500}
.plan ul{list-style:none;margin:18px 0 24px;flex:1}
.plan ul li{padding:6px 0 6px 28px;position:relative;font-size:14px;color:var(--ink)}
.plan ul li:before{content:"✓";position:absolute;left:0;top:5px;width:19px;height:19px;border-radius:50%;
  background:#DBEAFE;color:var(--p2);font-weight:800;font-size:12px;display:flex;align-items:center;justify-content:center}
.plan.featured{border:2px solid var(--p1);box-shadow:0 16px 40px rgba(37,99,235,.16)}
.plan .tag{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:linear-gradient(135deg,#FF8A70,#E14E38);
  color:#fff;font-size:12px;font-weight:800;padding:4px 16px;border-radius:999px;letter-spacing:.5px}

/* ---------- forms ---------- */
.form-card{max-width:460px;margin:56px auto;background:var(--card);border:1px solid var(--line);
  border-radius:20px;padding:38px;box-shadow:var(--shadow)}
.form-card h1{color:var(--deep);font-size:26px;margin-bottom:6px;font-weight:800;letter-spacing:-.4px}
.form-card p.sub{color:var(--muted);font-size:14px;margin-bottom:24px}
label{display:block;font-size:13px;font-weight:700;color:var(--deep);margin:14px 0 5px}
input[type=text],input[type=email],input[type=password],input[type=date],select,textarea{
  width:100%;padding:11px 13px;border:1.5px solid var(--line);border-radius:10px;font-family:inherit;
  font-size:14.5px;background:#fff;color:var(--ink);transition:border-color .12s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--p1);box-shadow:0 0 0 3px rgba(14,165,233,.18)}
.form-actions{margin-top:24px}
.flash{padding:13px 17px;border-radius:12px;margin:18px 0;font-size:14.5px;font-weight:500}
.flash.success{background:#D1FAE5;color:#065F46;border:1px solid #A7F3D0}
.flash.error{background:#FEE2E2;color:#991B1B;border:1px solid #FECACA}

/* ---------- portal ---------- */
.portal{display:grid;grid-template-columns:232px 1fr;min-height:calc(100vh - 70px)}
.sidenav{background:var(--deep);padding:26px 0}
.sidenav a{display:block;padding:10px 26px;color:#A9BEDF;font-size:14px;font-weight:600;border-left:3px solid transparent}
.sidenav a:hover{color:#fff;text-decoration:none}
.sidenav a.active{background:rgba(14,165,233,.16);border-left-color:var(--p1);color:#fff}
.sn-head{padding:18px 26px 5px;font-size:10.5px;letter-spacing:1.4px;color:#5F7FAB;text-transform:uppercase;font-weight:800}
.main{padding:36px 40px;background:var(--bg)}
.page-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:26px;gap:16px;flex-wrap:wrap}
.page-head h1{font-size:26px;color:var(--deep);font-weight:800;letter-spacing:-.4px}
.clausetag{display:inline-block;background:#DBEAFE;color:#1D4ED8;font-size:12px;font-weight:700;padding:4px 13px;border-radius:999px;margin-left:10px;vertical-align:middle}
.stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:30px}
.stat{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:20px 22px;box-shadow:var(--shadow-sm)}
.stat .v{font-size:31px;font-weight:800;color:var(--deep);letter-spacing:-.5px}
.stat .l{font-size:12px;color:var(--muted);letter-spacing:.5px;text-transform:uppercase;margin-top:2px;font-weight:600}
.table{width:100%;border-collapse:separate;border-spacing:0;font-size:14px;background:var(--card);
  border:1px solid var(--line);border-radius:14px;overflow:hidden}
.table th{background:#EDF3FB;color:var(--deep2);text-align:left;padding:11px 13px;font-size:12px;
  letter-spacing:.5px;text-transform:uppercase;font-weight:700}
.table td{padding:12px 13px;border-top:1px solid #EFF3FA;vertical-align:top;background:var(--card)}
.pill{display:inline-block;font-size:12px;font-weight:700;padding:3px 12px;border-radius:999px}
.pill.ok{background:#D1FAE5;color:#065F46} .pill.warn{background:#FEF3C7;color:#92400E}
.pill.bad{background:#FEE2E2;color:#991B1B} .pill.mut{background:#E9EFF7;color:var(--muted)}
.pill.navy{background:#DBEAFE;color:#1D4ED8}
.risk-low{background:#D1FAE5;color:#065F46} .risk-medium{background:#FEF3C7;color:#92400E} .risk-high{background:#FEE2E2;color:#991B1B}

/* progress ring + bars */
.ring{--p:0;--c:var(--ok);width:150px;height:150px;border-radius:50%;
  background:conic-gradient(var(--c) calc(var(--p)*1%),#DBE4F0 0);display:grid;place-items:center;box-shadow:var(--shadow-sm)}
.ring>div{width:112px;height:112px;background:var(--card);border-radius:50%;display:grid;place-items:center;
  font-size:30px;font-weight:800;color:var(--deep)}
.bar{height:9px;background:#DBE4F0;border-radius:6px;overflow:hidden}
.bar>i{display:block;height:100%;background:var(--grad);border-radius:6px}
.sec-row{display:flex;align-items:center;gap:18px;padding:18px 22px;background:var(--card);
  border:1px solid var(--line);border-radius:14px;margin-bottom:12px;box-shadow:var(--shadow-sm)}
.sec-row .t{flex:1}
.sec-row .t b{color:var(--deep)}
.sec-row .counts{font-size:12.5px;color:var(--muted)}

/* clause cards */
.clause{border:1px solid var(--line);border-radius:16px;padding:24px;margin-bottom:18px;background:var(--card);box-shadow:var(--shadow-sm)}
.clause h3{color:var(--deep);font-size:16px;margin-bottom:6px;font-weight:700}
.clause p.req{font-size:14px;margin-bottom:6px}
.clause p.gui{font-size:13px;color:var(--muted);margin-bottom:12px}
.clause .opts{display:flex;gap:14px;flex-wrap:wrap;margin:10px 0}
.clause .opts label{display:flex;align-items:center;gap:6px;font-weight:500;font-size:13.5px;margin:0;cursor:pointer}
.clause .opts input[type=radio]{accent-color:var(--p2)}
.clause textarea{min-height:44px;font-size:13.5px}
.clause .two{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:8px}
.savebar{position:sticky;bottom:0;background:rgba(245,248,252,.95);backdrop-filter:blur(6px);border-top:1px solid var(--line);
  padding:14px 0;display:flex;gap:12px;align-items:center}

/* checks & modules */
.check-tile{border:1px solid var(--line);border-radius:16px;padding:20px;display:flex;flex-direction:column;gap:8px;
  background:var(--card);box-shadow:var(--shadow-sm)}
.check-tile b{color:var(--deep)}
.check-tile .meta{font-size:12.5px;color:var(--muted)}
.inline-form{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.inline-form input,.inline-form select{width:auto}
.formgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:0 18px}
.formgrid .full{grid-column:1/-1}
.matrix{overflow-x:auto}
.matrix table td,.matrix table th{text-align:center;white-space:nowrap}
.matrix table td:first-child,.matrix table th:first-child{text-align:left}
.permtable select{padding:5px 8px;font-size:12.5px}
input[type=checkbox]{accent-color:var(--p2)}

/* checkout sim */
.simcard{max-width:520px;margin:56px auto;border:1px solid var(--line);border-radius:20px;overflow:hidden;background:var(--card);box-shadow:var(--shadow)}
.simcard .head{background:var(--deep);color:#fff;padding:24px 30px}
.simcard .body{padding:30px}
.testbanner{background:linear-gradient(90deg,#FF8A70,#E14E38);color:#fff;text-align:center;font-size:13px;font-weight:700;padding:7px}

@media (max-width:900px){
  .grid.c3,.grid.c4,.grid.c2{grid-template-columns:1fr}
  .stat-row{grid-template-columns:repeat(2,1fr)}
  .portal{grid-template-columns:1fr}
  .sidenav{display:flex;overflow-x:auto;padding:0}
  .sidenav a{border-left:none;border-bottom:3px solid transparent;white-space:nowrap}
  .sn-head{display:none}
  .hero h1{font-size:33px}
  .formgrid{grid-template-columns:1fr}
}

/* ---------- multicolour accents per area ---------- */
.clausetag.violet{background:#EDE9FE;color:#6D28D9}
.clausetag.amber{background:#FEF3C7;color:#B45309}
.clausetag.rose{background:#FFE4E6;color:#BE123C}
.clausetag.cyan{background:#CFFAFE;color:#0E7490}
.sn-head{display:flex;align-items:center;gap:7px}
.sn-head:before{content:"";width:8px;height:8px;border-radius:3px;background:#3B82F6}
.sn-head.violet{color:#B7A6F5}.sn-head.violet:before{background:#8B5CF6}
.sn-head.amber{color:#F5CE84}.sn-head.amber:before{background:#F59E0B}
.sn-head.rose{color:#F5A3B0}.sn-head.rose:before{background:#F43F5E}
.sn-head.cyan{color:#8FE3F2}.sn-head.cyan:before{background:#06B6D4}
.sidenav a.active.violet{border-left-color:#8B5CF6;background:rgba(139,92,246,.16)}
.sidenav a.active.amber{border-left-color:#F59E0B;background:rgba(245,158,11,.14)}
.sidenav a.active.rose{border-left-color:#F43F5E;background:rgba(244,63,94,.14)}
.sidenav a.active.cyan{border-left-color:#06B6D4;background:rgba(6,182,212,.14)}
.grid .card:nth-child(3n+2) .num{background:linear-gradient(135deg,#8B5CF6,#6D28D9);box-shadow:0 4px 10px rgba(109,40,217,.25)}
.grid .card:nth-child(3n+3) .num{background:linear-gradient(135deg,#F59E0B,#EA580C);box-shadow:0 4px 10px rgba(234,88,12,.25)}

/* ---------- dashboard v3 ---------- */
.heroband{background:var(--deep);border-radius:20px;padding:30px 34px;display:flex;justify-content:space-between;
  align-items:center;gap:26px;color:#fff;margin-bottom:20px;position:relative;overflow:hidden;box-shadow:var(--shadow)}
.heroband:before{content:"";position:absolute;inset:0;background:
  radial-gradient(420px 260px at 90% 0%,rgba(14,165,233,.35),transparent 60%),
  radial-gradient(360px 240px at 10% 110%,rgba(255,107,84,.16),transparent 60%)}
.heroband>*{position:relative}
.hb-hello{color:#8CA3C7;font-size:13.5px;font-weight:600}
.heroband h1{font-size:27px;font-weight:800;letter-spacing:-.4px;margin:2px 0}
.hb-sub{color:#B5C7E4;font-size:13.5px}
.hb-countdown{display:flex;align-items:center;gap:12px;margin-top:16px;background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:10px 16px;width:fit-content}
.hb-countdown .n{font-size:30px;font-weight:800;color:#FDBA74}
.hb-countdown .t{font-size:11.5px;color:#B5C7E4;line-height:1.35}
.hb-right{text-align:center}
.hb-ringlabel{font-size:12.5px;color:#B5C7E4;margin-top:8px;line-height:1.4}
.ring.dark{width:128px;height:128px;margin:0 auto;box-shadow:none;background:conic-gradient(var(--c) calc(var(--p)*1%),rgba(255,255,255,.14) 0)}
.ring.dark>div{width:96px;height:96px;background:var(--deep);color:#fff;font-size:26px}
.quickrow{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:20px}
.qa{flex:1;min-width:150px;display:flex;align-items:center;gap:10px;background:var(--card);border:1px solid var(--line);
  border-radius:14px;padding:12px 16px;font-size:13.5px;font-weight:700;color:var(--deep);box-shadow:var(--shadow-sm)}
.qa:hover{text-decoration:none;border-color:var(--p1);transform:translateY(-1px)}
.qi{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;font-size:15px}
.dashgrid{display:grid;grid-template-columns:1.6fr 1fr;gap:22px;align-items:start}
.meter{margin:12px 0}
.meter .mt{display:flex;justify-content:space-between;font-size:13.5px;margin-bottom:5px}
.meter .mt a,.meter .mt span{color:var(--ink);font-weight:600}
.sparkgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;margin-top:6px}
.spark .sp-head{display:flex;justify-content:space-between;font-size:13px;margin-bottom:4px}
.spark .sp-head b{color:var(--deep)}
.sp-ok{color:var(--ok);font-weight:800}.sp-bad{color:var(--bad);font-weight:800}
.sp-range{font-size:11.5px;color:var(--muted);margin-top:2px}
.alert-item{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:10px;font-size:13px;
  color:var(--ink);margin-bottom:7px;border:1px solid var(--line);font-weight:500}
.alert-item:hover{text-decoration:none;border-color:var(--p1)}
.alert-item .dot{width:9px;height:9px;border-radius:50%;flex:none}
.alert-item.warn .dot{background:var(--warn)} .alert-item.warn{background:#FFFBEB}
.alert-item.bad .dot{background:var(--bad)} .alert-item.bad{background:#FEF2F2}
.mbars{display:flex;gap:10px;align-items:flex-end;padding-top:14px}
.mbar{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px}
.mbar i{display:block;width:100%;max-width:34px;background:#2563EB;border-radius:4px 4px 0 0}
.mbar .mv{font-size:11.5px;font-weight:700;color:var(--deep)}
.mbar .ml{font-size:11px;color:var(--muted)}
.feed-item{display:flex;gap:10px;padding:8px 0;border-bottom:1px solid #EFF3FA;font-size:13px}
.feed-item:last-child{border-bottom:none}
.fi-dot{width:8px;height:8px;border-radius:50%;background:var(--p1);margin-top:6px;flex:none}
.fi-time{font-size:11.5px;color:var(--muted);margin-top:1px}
@media (max-width:1000px){.dashgrid{grid-template-columns:1fr}.heroband{flex-direction:column;align-items:flex-start}
.stat-row[style]{grid-template-columns:repeat(3,1fr)!important}}

/* ---------- guided journey ---------- */
.jstep{display:flex;gap:18px;background:var(--card);border:1px solid var(--line);border-radius:16px;
  padding:22px 24px;margin-bottom:16px;box-shadow:var(--shadow-sm)}
.jstep.done{border-color:#A7F3D0;background:#FBFEFC}
.jnum{width:38px;height:38px;border-radius:50%;background:var(--grad);color:#fff;font-weight:800;
  display:grid;place-items:center;flex:none;font-size:16px}
.jstep.done .jnum{background:var(--ok)}
.jbody{flex:1}
.jbody h3{color:var(--deep);font-size:16.5px;margin-bottom:4px;font-weight:700}
.jtodo{font-size:14px;color:var(--ink);margin-bottom:10px;max-width:760px}
.jauto{font-size:13px;font-weight:600;border-radius:10px;padding:9px 13px;margin:8px 0;max-width:760px}
.jauto.pass{background:#D1FAE5;color:#065F46}
.jauto.fail{background:#FEF3C7;color:#92400E}
.jactions{display:flex;gap:10px;margin-top:10px;align-items:center}
.jreqs{margin:10px 0}
.jreq{border-left:3px solid var(--p1);padding:8px 0 8px 16px;margin-bottom:10px;max-width:780px}
.jreq b{color:var(--deep);font-size:14px}
.jreq .req{font-size:13.5px;margin:3px 0}
.jreq .gui{font-size:12.5px;color:var(--muted)}