/* NorthStar Live Systems — shared premium product shell */
:root{
  color-scheme:light;
  --bg:#e9eef2;
  --panel:#ffffff;
  --panel2:#eef3f7;
  --glass:rgba(255,255,255,.88);
  --ink:#4d5967;
  --ink-strong:#202c39;
  --ink2:#6d7a89;
  --ink3:#8a96a3;
  --line:rgba(37,53,70,.15);
  --line2:rgba(37,53,70,.08);
  --shadow:0 24px 56px -34px rgba(43,73,104,.48);
  --r:18px;
}
html{background:#e9eef2}
body{
  min-height:100%;
  background:
    radial-gradient(80% 70% at 88% -10%,rgba(255,255,255,.98),transparent 58%),
    radial-gradient(64% 58% at 103% 58%,rgba(145,174,202,.23),transparent 62%),
    linear-gradient(135deg,#f9fafb 0%,#e2e7eb 30%,#f5f7f8 58%,#dbe2e8 100%);
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  opacity:.3;
  background-image:
    linear-gradient(rgba(44,64,84,.07) 1px,transparent 1px),
    linear-gradient(90deg,rgba(44,64,84,.07) 1px,transparent 1px);
  background-size:54px 54px;
  mask-image:radial-gradient(circle at 62% 38%,black,transparent 82%);
}
:focus-visible{outline:3px solid color-mix(in srgb,var(--blue) 48%,transparent);outline-offset:3px}
.demoflag{
  height:42px;
  padding:0 16px;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:14px;
  color:#52606f;
  background:rgba(250,252,253,.94);
  border-bottom:1px solid rgba(38,54,72,.13);
  box-shadow:0 8px 26px -22px rgba(39,67,96,.65);
  backdrop-filter:blur(18px) saturate(1.2);
  font:600 9px/1 var(--disp);
  letter-spacing:.14em;
  text-transform:uppercase;
}
.demoflag a{
  text-decoration:none;
  color:#315f91;
  padding:6px 10px;
  border:1px solid rgba(49,95,145,.16);
  border-radius:999px;
  background:rgba(255,255,255,.7);
  transition:.18s;
  min-height:32px;
  display:inline-flex;
  align-items:center;
}
.demoflag a:hover{background:#fff;border-color:rgba(49,95,145,.38);transform:translateY(-1px)}
.demo-live{display:inline-flex;align-items:center;gap:7px;color:#315f91}
.demo-live i{width:7px;height:7px;border-radius:50%;background:#3fae8f;box-shadow:0 0 0 4px rgba(63,174,143,.12),0 0 12px rgba(63,174,143,.54)}
.demo-name{color:#202c39;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.demo-suite-links{margin-left:auto;display:flex;align-items:center;gap:6px}
.demo-suite-links .build-mine{color:#fff;background:linear-gradient(135deg,var(--blue),var(--blue-deep));border-color:transparent;box-shadow:0 8px 18px -12px color-mix(in srgb,var(--blue-deep) 72%,transparent)}

.app{
  grid-template-columns:264px minmax(0,1fr)!important;
  margin-top:42px!important;
  height:calc(100vh - 42px)!important;
}
.side{
  padding:18px 14px;
  border-color:rgba(38,54,72,.13);
  background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(229,235,240,.82));
  box-shadow:18px 0 48px -40px rgba(42,70,99,.72);
}
.brand{
  margin:0 2px 10px;
  padding:12px;
  border:1px solid rgba(38,54,72,.1);
  border-radius:15px;
  background:linear-gradient(145deg,rgba(255,255,255,.94),rgba(229,235,240,.68));
  box-shadow:0 14px 30px -26px rgba(42,70,99,.64),inset 0 1px rgba(255,255,255,.96);
}
.brand img{height:38px;width:auto;filter:drop-shadow(0 6px 12px rgba(49,95,145,.28))}
.brand b{color:#202c39}
.navlbl{color:#7f8b98;padding-top:16px}
.nav a,.nav button{border:1px solid transparent;border-radius:12px}
.nav a:hover,.nav button:hover{border-color:color-mix(in srgb,var(--blue) 20%,transparent);background:color-mix(in srgb,var(--blue-soft) 72%,white)}
.nav a.on,.nav button.on{
  background:linear-gradient(135deg,color-mix(in srgb,var(--blue) 90%,white),var(--blue-deep));
  box-shadow:0 14px 24px -16px color-mix(in srgb,var(--blue-deep) 76%,transparent),inset 0 1px rgba(255,255,255,.28);
}
.side .back{border-top:1px solid var(--line2);margin-top:auto!important;padding-top:14px}
.main{background:rgba(249,251,252,.32)}
.top{
  min-height:76px;
  padding:15px clamp(18px,3vw,36px);
  background:rgba(249,251,252,.82);
  border-color:rgba(38,54,72,.1);
  box-shadow:0 12px 30px -30px rgba(42,70,99,.72);
  backdrop-filter:blur(20px) saturate(1.25);
}
.top h1{font-weight:700;color:#202c39;letter-spacing:.015em}
.top .sub{color:#71808f}
.wrap{width:min(1560px,100%);margin:0 auto;padding:clamp(20px,3vw,34px)}
.card{
  border-color:rgba(38,54,72,.12);
  background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(242,246,249,.86));
  box-shadow:0 22px 50px -38px rgba(39,67,96,.62),inset 0 1px rgba(255,255,255,.98);
}
.card:hover{border-color:color-mix(in srgb,var(--blue) 24%,rgba(38,54,72,.12))}
.kpi{position:relative;overflow:hidden}
.kpi::after{content:"";position:absolute;right:-24px;top:-24px;width:76px;height:76px;border-radius:50%;border:1px solid color-mix(in srgb,var(--blue) 18%,transparent)}
.kpi .v{color:#202c39;letter-spacing:-.035em}
.sec-h h2,.ch-h b{color:#202c39}
.btn{
  border-radius:999px;
  background:linear-gradient(135deg,color-mix(in srgb,var(--blue) 90%,white),var(--blue-deep));
  box-shadow:0 12px 24px -16px color-mix(in srgb,var(--blue-deep) 78%,transparent),inset 0 1px rgba(255,255,255,.3);
}
.btn.ghost,.iconbtn,.search{
  background:rgba(255,255,255,.78);
  border-color:rgba(38,54,72,.13);
  box-shadow:0 10px 22px -20px rgba(39,67,96,.62);
}
.badge2{border:1px solid rgba(38,54,72,.06)}
.tbl{border-spacing:0}
.tbl th{color:#7c8997;background:rgba(225,232,238,.38)}
.tbl td{color:#4f5d6b}
.tbl tr:hover td{background:color-mix(in srgb,var(--blue-soft) 45%,white)}
input,textarea,select,.inp,.ta,.sel{
  border-color:rgba(38,54,72,.14)!important;
  background:rgba(255,255,255,.86)!important;
  box-shadow:inset 0 1px 2px rgba(31,50,70,.03);
}
.toast{
  background:#213142;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 20px 44px -22px rgba(31,50,70,.74);
}

/* Individual modules retain their own layout while sharing better surfaces. */
:is(.deal,.tk,.tcard,.prod,.slot,.appt,.mcard,.src-card,.tpl,.conn,.vis,.auto,.vrow,.review-card,.bub,.node,.flow,.item,.member){
  box-shadow:0 13px 28px -28px rgba(39,67,96,.62);
}
:is(.deal,.tk,.tcard,.prod,.slot,.mcard,.src-card,.tpl,.conn,.vis,.auto,.vrow,.review-card,.node,.flow,.item,.member):hover{
  border-color:color-mix(in srgb,var(--blue) 34%,rgba(38,54,72,.12))!important;
}
.frame{border-color:rgba(38,54,72,.14);box-shadow:0 28px 60px -38px rgba(39,67,96,.68)}
.chrome{background:linear-gradient(180deg,#f7f9fb,#e8edf1)}
.composer{background:rgba(238,243,247,.84)!important;backdrop-filter:blur(18px)}
.composer-in{background:rgba(255,255,255,.92);box-shadow:0 18px 40px -30px rgba(39,67,96,.62)}

/* The systems directory is part of the same suite, not a separate brochure. */
.page{max-width:1240px!important;padding-top:34px!important}
.top2{
  position:sticky;
  top:14px;
  z-index:30;
  padding:12px 14px;
  border:1px solid rgba(38,54,72,.12);
  border-radius:18px;
  background:rgba(249,251,252,.88);
  box-shadow:0 18px 42px -30px rgba(39,67,96,.65);
  backdrop-filter:blur(18px);
}
.lead{
  position:relative;
  padding:clamp(34px,6vw,72px);
  border:1px solid rgba(38,54,72,.11);
  border-radius:28px;
  overflow:hidden;
  background:
    radial-gradient(circle at 84% 28%,rgba(255,255,255,.96),transparent 34%),
    linear-gradient(135deg,rgba(255,255,255,.9),rgba(211,222,231,.68));
  box-shadow:0 34px 74px -50px rgba(39,67,96,.68),inset 0 1px rgba(255,255,255,.98);
}
.lead::after{content:attr(data-count);position:absolute;right:4%;bottom:-14%;font:700 clamp(130px,22vw,270px)/.8 var(--disp);color:rgba(49,95,145,.07);pointer-events:none}
.lead h1{max-width:11ch;color:#202c39}
.tiles{grid-template-columns:repeat(3,1fr)!important;gap:16px!important}
.tile{
  min-height:360px;
  border-color:rgba(38,54,72,.12)!important;
  border-radius:22px!important;
  background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(238,243,247,.82))!important;
  box-shadow:0 24px 54px -42px rgba(39,67,96,.66)!important;
}
.tile:hover{transform:translateY(-7px)!important;border-color:color-mix(in srgb,var(--blue) 34%,rgba(38,54,72,.12))!important;box-shadow:0 34px 68px -38px rgba(39,67,96,.62)!important}
.tile .ic{border-radius:16px!important;box-shadow:0 14px 26px -15px rgba(39,67,96,.58)!important}
.tile h3{color:#202c39!important}
.tile .num{color:rgba(49,95,145,.1)!important}
.cta-b{background:linear-gradient(145deg,rgba(255,255,255,.94),rgba(226,233,239,.72))!important;box-shadow:0 24px 54px -42px rgba(39,67,96,.62)}

@media(max-width:1080px){
  .tiles{grid-template-columns:repeat(2,1fr)!important}
}
@media(max-width:900px){
  .app{grid-template-columns:1fr!important}
  .side{top:42px!important}
}
@media(max-width:680px){
  .demoflag{padding:0 9px;gap:8px}
  .demo-name{display:none}
  .demo-suite-links a:first-child{display:none}
  .demoflag a{padding:6px 8px}
  .top{min-height:66px}
  .top .sub{max-width:48vw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .tiles{grid-template-columns:1fr!important}
  .lead{padding:34px 24px}
  .tile{min-height:0}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .demoflag a:hover,.tile:hover{transform:none!important}
}