:root {
  --indigo: #241154;
  --indigo-light: #341c6b;
  --violet: #6c3ce9;
  --violet-dark: #5b2fd1;
  --amber: #f2a93b;
  --amber-ink: #2e1a05;
  --cream: #fbf7f1;
  --ink: #201a34;
  --muted: #6b6478;
  --muted-2: #8a7fa0;
  --sidebar-text: #d8cbf6;
  --sidebar-heading: #7e70a8;
  --card-border: #efe7fb;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: 'Nunito Sans', system-ui, -apple-system, sans-serif;
  color: var(--ink);
  background: var(--cream);
}

h1, h2, h3 { font-family: 'Quicksand', sans-serif; margin: 0; }

a { color: var(--violet); text-decoration: none; }
a:hover { color: var(--violet-dark); }

.layout {
  display: flex;
  min-height: 100vh;
}

/* Sidebar */

.sidebar {
  width: 260px;
  flex-shrink: 0;
  background: var(--indigo);
  padding: 28px 22px;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 26px 4px;
}

.sidebar-logo-link {
  display: block;
  flex-shrink: 0;
  border-radius: 6px;
  opacity: 1;
  transition: opacity .15s ease;
}
.sidebar-logo-link:hover { opacity: .8; }
.sidebar-logo-link:focus-visible {
  outline: 2px solid var(--violet);
  outline-offset: 2px;
}

.sidebar-logo {
  height: 36px;
  width: auto;
  display: block;
  flex-shrink: 0;
}

.sidebar-brand-text {
  display: flex;
  padding-left: 12px;
  border-left: 1px solid #4a3580;
  cursor: pointer;
  border-radius: 6px;
  transition: background .15s ease;
}
.sidebar-brand-text:hover { background: rgba(255,255,255,0.05); }
.sidebar-brand-text:focus-visible {
  outline: 2px solid var(--violet);
  outline-offset: 2px;
}

/* The reel is the clipping window (fixed to the 3-line block's own
   height, via overflow) — it moves as ONE unit, like a slot-machine
   reel, not each line separately. */
.brand-reel {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  overflow: hidden;
}
.brand-reel span {
  display: block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .3px;
  color: #9c8dc4;
  text-transform: uppercase;
}

/* Slot-machine reel swap (brand-rotator.js): the whole 3-line block
   slides up and out, then the new block slides up from below to take
   its place — one motion, not per-line. --flip-ms is set inline per
   call — quick for the automatic tick, longer for a click-triggered
   spin. */
@keyframes brand-slot-out {
  from { transform: translateY(0);      opacity: 1; }
  to   { transform: translateY(-100%);  opacity: 0; }
}
@keyframes brand-slot-in {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
.brand-reel.flip-out { animation: brand-slot-out var(--flip-ms, 160ms) cubic-bezier(.4,0,1,1) forwards; }
.brand-reel.flip-in { animation: brand-slot-in var(--flip-ms, 160ms) cubic-bezier(0,0,.2,1) forwards; }

.sidebar-nav { display: flex; flex-direction: column; }

.nav-group { margin-bottom: 20px; }

.nav-heading {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--sidebar-heading);
  margin: 0 0 10px 4px;
}

.nav-link {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 10px;
  border-radius: 9px;
  color: var(--sidebar-text);
  font-size: 13.5px;
  font-weight: 600;
}
.nav-link svg { flex-shrink: 0; }
.nav-link:hover {
  color: #ffffff;
  background: rgba(255,255,255,0.06);
}
.nav-link.is-active {
  color: #ffffff;
  background: rgba(255,255,255,0.1);
}

.sidebar-spacer { flex-grow: 1; }

.sidebar-user {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 20px;
  border-top: 1px solid #3b2470;
  color: var(--sidebar-text);
  font-size: 12.5px;
}
.sidebar-user-clickable {
  cursor: pointer;
  border-radius: 8px;
  margin: 0 -8px;
  padding-left: 8px;
  padding-right: 8px;
  transition: background .15s ease;
}
.sidebar-user-clickable:hover { background: rgba(255,255,255,0.06); }

.avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--violet);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}

/* Main content */

.content {
  flex-grow: 1;
  position: relative;
  overflow: hidden;
}

.blob {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.blob-violet {
  width: 420px;
  height: 420px;
  background: radial-gradient(circle, rgba(108,60,233,0.08), transparent 70%);
  top: -140px;
  right: -80px;
}
.blob-amber {
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(242,169,59,0.14), transparent 70%);
  top: 420px;
  left: -100px;
}

.content-inner {
  position: relative;
  padding: 44px 48px 56px;
  max-width: 1180px;
}

/* MOTD — site-wide banner (motd.js), sticky at the very top of every page.
   Deliberately a color nothing else on the site uses, so it can't blend in. */

:root { --motd-height: 44px; }

.motd-bar {
  position: sticky;
  top: 0;
  z-index: 1000;
  min-height: var(--motd-height);
  display: flex;
  align-items: center;
  gap: 14px;
  background: #d81e2c;
  color: #ffffff;
  padding: 10px 24px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}
.motd-bar[hidden] { display: none; }
.motd-message { font-size: 13.5px; font-weight: 600; }
.motd-link {
  color: #ffffff !important;
  font-weight: 700;
  text-decoration: underline;
  font-size: 13.5px;
  white-space: nowrap;
}
.motd-spacer { flex-grow: 1; }
.motd-edit-btn {
  background: rgba(255,255,255,0.18);
  border: none;
  border-radius: 6px;
  padding: 5px 7px;
  cursor: pointer;
  color: #ffffff;
  display: flex;
  flex-shrink: 0;
}
.motd-edit-btn:hover { background: rgba(255,255,255,0.3); }

/* Push the sidebar's sticky position (and its 100vh height) down by the
   banner's height so it sticks right below the banner, not underneath it. */
body.has-motd .sidebar {
  top: var(--motd-height);
  height: calc(100vh - var(--motd-height));
}

/* Generic lightweight modal shell, shared across every page (unlike
   Capabilities' own edit modal, which only capabilities.css loads) --
   used by both the MOTD editor and the account/sign-out modal. */
.site-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(36,17,84,0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.site-modal-box {
  background: #ffffff;
  border-radius: 16px;
  padding: 26px 28px;
  max-width: 420px;
  width: 100%;
  box-shadow: 0 20px 60px rgba(36,17,84,0.3);
}
.site-modal-box-narrow { max-width: 320px; text-align: center; }
.site-modal-title {
  font-family: 'Quicksand', sans-serif;
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 16px;
}
.site-modal-copy { font-size: 13px; color: var(--muted); margin: 0 0 18px; }
.site-modal-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}
.site-modal-field span {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: var(--muted-2);
}
.site-modal-field input, .site-modal-field textarea {
  font-family: inherit;
  font-size: 13.5px;
  color: var(--ink);
  border: 1px solid var(--card-border);
  border-radius: 8px;
  padding: 8px 10px;
  width: 100%;
  box-sizing: border-box;
}
.site-modal-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--ink);
  margin-bottom: 18px;
}
.site-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 14px;
  border-top: 1px solid var(--card-border);
}
.site-modal-btn {
  display: inline-block;
  font-family: 'Quicksand', sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  padding: 7px 16px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: var(--indigo);
  color: #ffffff;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
}
.site-modal-btn-ghost {
  background: transparent;
  color: var(--violet-dark);
  border: 1px solid var(--card-border);
}
.site-modal-actions-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Toast — shared by any page with an inline-editable record (Capabilities,
   Services) to confirm a save without a full modal. */
.site-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--indigo);
  color: #ffffff;
  font-size: 13px;
  font-weight: 600;
  padding: 10px 20px;
  border-radius: 999px;
  box-shadow: 0 10px 30px rgba(36,17,84,0.3);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
  z-index: 1100;
}
.site-toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); }
.site-toast.site-toast-error { background: #9c2b2b; }

/* A labeled row of chips, e.g. "Modules" or "Professional Services" on a
   Capabilities card, or "Pull-Through Modules" / "Associated Capabilities"
   on a Services card -- shared across both pages so every such section
   looks identical instead of each having its own near-duplicate. */
.tag-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--card-border);
}
.tag-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-right: 4px;
}

/* A row grouped under a .tag-row heading (which already drew the section's
   one divider line) -- same label style, no divider of its own. */
.tag-subrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
}
.chip {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--muted);
  background: var(--cream);
  border: 1px solid var(--card-border);
  padding: 3px 10px;
  border-radius: 999px;
}
.chip-link {
  text-decoration: none;
  cursor: pointer;
  transition: all .15s ease;
}
.chip-link:hover {
  color: var(--violet-dark);
  border-color: #c9b8f5;
}

/* Inline validation errors inside an edit form (Capabilities, Services). */
.edit-errors {
  background: #fdecec;
  color: #9c2b2b;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 12.5px;
  margin-bottom: 16px;
}

/* Greeting */

.greeting {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.sparkle { color: var(--violet); flex-shrink: 0; }
.greeting h1 { font-size: 30px; font-weight: 700; }

.lede {
  font-size: 15.5px;
  color: #5f5570;
  line-height: 1.6;
  max-width: 640px;
  margin: 0 0 36px;
}

/* Featured cards */

.featured-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-bottom: 36px;
}

.feat-card {
  background: #ffffff;
  border-radius: 20px;
  padding: 26px;
  display: block;
  color: inherit;
  transition: box-shadow .18s ease, transform .18s ease;
}
.feat-card:hover {
  box-shadow: 0 16px 34px rgba(36,17,84,0.16);
  transform: translateY(-3px);
  color: inherit;
}

.feat-icon {
  width: 44px;
  height: 44px;
  border-radius: 13px;
  background: #efe7fb;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--violet);
  margin-bottom: 18px;
}

.feat-title {
  font-family: 'Quicksand', sans-serif;
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 8px;
}

.feat-desc {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.55;
}

/* Secondary grid */

.section-heading {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--muted-2);
  margin: 0 0 14px;
}

.small-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 44px;
}

.small-card {
  background: #ffffff;
  border: 1px solid var(--card-border);
  border-radius: 16px;
  padding: 18px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: var(--violet-dark);
  transition: border-color .15s ease;
}
.small-card:hover { border-color: #c9b8f5; color: var(--violet-dark); }
.small-card span {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink);
}

/* Footer */

.page-footer {
  padding-top: 24px;
  border-top: 1px solid var(--card-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--muted-2);
  font-size: 12.5px;
}

/* Responsive */

/* Tablet: still plenty of width for content once the sidebar collapses */
@media (max-width: 980px) {
  .layout { flex-direction: column; }
  .sidebar {
    width: 100%;
    height: auto;
    position: relative;
    padding: 16px 20px;
  }
  .sidebar-search { max-width: 260px; }
  .sidebar-nav {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 6px 10px;
  }
  .nav-group { display: contents; }
  .nav-heading { display: none; }
  .nav-link { padding: 7px 10px; }
  .sidebar-spacer { display: none; }
  .sidebar-user { border-top: 1px solid #3b2470; margin-top: 16px; padding-top: 16px; }
  .featured-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .small-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .content-inner { padding: 28px 32px 40px; }
}

/* Phone: narrow enough that even 2 columns get cramped */
@media (max-width: 640px) {
  .featured-grid { grid-template-columns: 1fr; }
  .small-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .content-inner { padding: 24px 20px 40px; }
  .greeting h1 { font-size: 24px; }
}

/* Site-wide access gate (site-gate.js) */

.site-gate-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: linear-gradient(160deg, var(--indigo), #1a0f42);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
/* A class selector's `display` otherwise beats the browser's native
   [hidden] { display: none }, so el.hidden = true silently does nothing. */
.site-gate-overlay[hidden] {
  display: none;
}
.site-gate-box {
  background: #ffffff;
  border-radius: 18px;
  padding: 40px 36px;
  max-width: 360px;
  width: 100%;
  text-align: center;
  box-shadow: 0 24px 70px rgba(0,0,0,0.35);
}
.site-gate-brand {
  font-family: 'Quicksand', sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: var(--violet-dark);
  margin-bottom: 14px;
}
.site-gate-copy {
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.55;
  margin: 0 0 20px;
}
.site-gate-btn {
  font-family: 'Quicksand', sans-serif;
  font-size: 13.5px;
  font-weight: 700;
  padding: 10px 22px;
  border-radius: 10px;
  border: none;
  background: var(--indigo);
  color: #ffffff;
  cursor: pointer;
  transition: opacity .15s ease;
}
.site-gate-btn:hover { opacity: .9; }
.site-gate-error {
  color: #9c2b2b;
  background: #fdecec;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 12.5px;
  word-break: break-word;
}
.site-gate-version {
  margin: 16px 0 0;
  font-size: 10.5px;
  color: var(--muted-2);
  font-family: monospace;
}