:root{
  /* Brand */
  --maroon:#7d0025;
  --maroon-600:#8f1433;
  --black:#111111;
  --white:#ffffff;
  --muted:#666666;

  /* Layout */
  --bg:#ffffff;
  --bg2:#f6f7fb;
  --line:#eee;
  --maxw:1200px;
  --radius:14px;
  --shadow:0 8px 24px rgba(0,0,0,.08);
  --shadow-lg:0 16px 40px rgba(0,0,0,.10);

  /* Header + Sidebar */
  --header-h:64px;
  --sidebarW:248px;
  --sidebarW-collapsed:76px;
  --side-bg:#fff;
  --side-line:#eee;
  --side-active:#f7f8ff;
  --sidebar-logo-h:36px; /* match main header logo by default */
}

/* Base reset / structure */
*{ box-sizing:border-box }
html,body{ height:100% }
html{ scroll-behavior:smooth }
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color:var(--black);
  background:var(--bg);
  line-height:1.55;
  padding-top:var(--header-h); /* keep content from sliding under fixed header */
}

/* Utilities */
.container{ max-width:var(--maxw); margin:0 auto; padding:0 1.25rem }
.section{ padding:64px 0 }
.section--tight{ padding:40px 0 }
.grid{ display:grid; gap:24px }
.grid-4{ grid-template-columns:repeat(4,1fr) }
.grid-3{ grid-template-columns:repeat(3,minmax(0,1fr)) }
.grid-2{ grid-template-columns:repeat(2,minmax(0,1fr)) }
@media (max-width:1100px){ .grid-4{ grid-template-columns:repeat(3,1fr) } }
@media (max-width:800px){ .grid-4{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:700px){ .grid-3,.grid-2{ grid-template-columns:1fr } }
.muted{ color:var(--muted) }

/* Screen reader utility */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* Buttons */
.sp-btn{
  display:inline-flex; align-items:center; gap:6px;
  font-weight:700; text-decoration:none; cursor:pointer;
  border-radius:12px; padding:10px 16px;
  transition:transform .06s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
  border:2px solid transparent; background:#fff; color:var(--black);
}
.sp-btn:active{ transform:translateY(1px) }
.sp-btn[disabled], .sp-btn:disabled{ opacity:.55; cursor:not-allowed; box-shadow:none; transform:none }
.sp-btn--primary{ background:var(--maroon); color:var(--white) }
.sp-btn--primary:hover{ background:var(--maroon-600) }
.sp-btn--outline{ background:transparent; border-color:var(--maroon); color:var(--maroon) }
.sp-btn--outline:hover{ background:var(--maroon); color:var(--white) }
.sp-btn--ghost{ background:transparent; color:var(--black) }

/* Focus states */
:focus-visible{ outline:3px solid var(--maroon); outline-offset:2px; border-radius:6px }
.footer a:focus-visible{ outline:2px solid var(--maroon); outline-offset:2px }

/* ===== Header (guest + marketing) ===== */
.sp-header{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  background:var(--white);
  border-bottom:1px solid #eee;
  box-shadow:0 6px 14px rgba(0,0,0,.05);
}
.sp-header__inner{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  max-width:var(--maxw); margin:0 auto; padding:14px 20px; min-height:var(--header-h);
}
.sp-header__brand{ display:flex; align-items:center; gap:10px; text-decoration:none }
.sp-logo{ height:36px; width:auto; display:block }
@media (max-width:900px){ .sp-logo{ height:32px } }

.sp-nav{ display:flex; align-items:center; gap:16px }
.sp-nav__list{ display:flex; list-style:none; gap:18px; margin:0; padding:0 }
.sp-nav__list a{
  color:var(--black); text-decoration:none; font-weight:600;
  padding:8px 10px; border-radius:10px;
}
.sp-nav__list a:hover{ background:#f4f4f4 }
.sp-nav__list a.active{ color:var(--maroon); background:#f9f4f6 }
.sp-nav__cta{ margin-left:8px }

/* Mobile header nav */
.sp-nav__toggle{
  display:none; background:#fff; border:1px solid #e5e7eb; border-radius:10px; padding:8px 10px; cursor:pointer;
}
.sp-nav__toggle .bar{ display:block; width:18px; height:2px; background:var(--black); margin:3px 0; border-radius:1px }
@media (max-width:900px){
  .sp-nav__toggle{ display:inline-block }
  .sp-nav{
    position:absolute; left:0; right:0; top:var(--header-h);
    background:#fff; border-bottom:1px solid #eee;
    transform:translateY(-120%); transition:transform .18s ease;
    flex-direction:column; align-items:flex-start; padding:12px 16px; gap:12px;
  }
  .sp-nav.is-open,
  .sp-nav.open{ /* support both class names */
    transform:none;
  }
  .sp-nav__list{ flex-direction:column; align-items:flex-start; gap:10px }
  .sp-nav__cta{ width:100% }
  .sp-nav__cta .sp-btn{ width:100%; justify-content:center }
}

/* ===== Hero / Banner ===== */
.hero{
  background:linear-gradient(135deg, var(--maroon), #490015);
  color:var(--white);
  padding:80px 0;
}
.hero__wrap{ display:grid; gap:28px; align-items:center }
@media(min-width:900px){ .hero__wrap{ grid-template-columns:1.25fr .75fr } }
.heroCard{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.18);
  border-radius:var(--radius);
  padding:24px;
  box-shadow:var(--shadow-lg);
}
.hero__title{ font-size:2.2rem; line-height:1.2; margin:0 0 .5rem; letter-spacing:.2px }
.hero__subtitle{ margin:0 0 1.2rem; color:#f6e9ee }
.hero__ctaRow{ display:flex; gap:12px; flex-wrap:wrap }

/* Welcome banner */
.welcomeBanner{
  background:#f7f3f4; border:2px dashed var(--maroon); color:var(--maroon);
  border-radius:var(--radius); padding:24px; text-align:center; font-weight:700;
}

/* Feature Cards */
.card{
  border:1px solid #eee; border-radius:var(--radius); background:#fff;
  box-shadow:var(--shadow);
  padding:20px; transition:transform .08s ease, box-shadow .2s ease, border-color .2s ease;
}
.card:hover{ transform:translateY(-2px); box-shadow:0 10px 28px rgba(0,0,0,.12) }
.card:focus-within{ box-shadow:0 12px 30px rgba(0,0,0,.14) }
.card h3{ margin:.1rem 0 .35rem }
.card p{ margin:.35rem 0 0; color:var(--muted) }
.icon{
  width:40px; height:40px; border-radius:10px; background:#f2f2f2;
  display:flex; align-items:center; justify-content:center; font-weight:800; color:var(--maroon);
  margin-bottom:10px;
}
.icon-small{ font-size:20px }

/* CTA band */
.band{
  background:#0f0f10; color:#fff; border-radius:var(--radius);
  padding:28px; display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap;
}

/* Footer */
.footer{
  border-top:1px solid #eee; color:#444; padding:32px 0; background:#fff;
}
.footer small{ color:#777 }
.footer a{ color:var(--maroon); text-decoration:none }
.footer a:hover{ text-decoration:underline }

/* ===== Forms ===== */
label{ font-weight:600; display:inline-block; margin-bottom:6px }
.form-row{ display:grid; gap:12px }
.form-msg{ font-size:.9rem }
.form-msg--error{ color:#b00020 }
.form-msg--ok{ color:#0a7a32 }
#recaptcha-container, #mfa-recaptcha{ margin-top:8px }
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"]{
  width:100%; padding:10px 12px; border:1px solid #ddd; border-radius:10px;
  background:#fff; color:var(--black); line-height:1.3;
}
input:focus-visible{ border-color:var(--maroon); box-shadow:0 0 0 3px rgba(125,0,37,.15) }

/* ===== Dashboard Shell (left sidebar layout) ===== */
.shell{
  display:grid; grid-template-columns:var(--sidebarW) 1fr; min-height:100dvh;
  background:var(--bg2); color:var(--black)
}
@media (max-width:900px){ .shell{ grid-template-columns:1fr } }

.top{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 16px; border-bottom:1px solid var(--line); background:#fff;
}
.top .right{ display:flex; align-items:center; gap:10px }
.mobile-toggle{ display:none }
@media (max-width:900px){ .mobile-toggle{ display:inline-flex } }

.main{ padding:18px }

/* App cards in dashboard */
.app-card{
  text-decoration:none; color:inherit;
  border:1px solid #eceff3; border-radius:16px; padding:16px; background:#fff;
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.app-card:hover{ transform:translateY(-2px); box-shadow:0 10px 24px rgba(16,24,40,.08); border-color:#d6dae1 }

/* ===== Sidebar ===== */
.sp-sidebar{
  position:sticky; top:0; height:100dvh; background:var(--side-bg);
  border-right:1px solid var(--side-line); width:var(--sidebarW);
  display:flex; flex-direction:column; gap:8px; transition:width .18s ease; will-change:width;
  z-index:999; /* sit under header, above content */
}
.sp-sidebar[data-collapsed="true"]{ width:var(--sidebarW-collapsed) }

.sp-sidebar__brand{
  display:flex; align-items:center; gap:8px; padding:12px;
  border-bottom:1px solid var(--side-line);
}
.sp-brand{ display:flex; align-items:center; justify-content:center; background:transparent; border:none; padding:0 }
.sp-sidebar .sp-logo{
  height:var(--sidebar-logo-h); width:auto; display:block; border:0; background:transparent;
}

.sp-collapse{
  margin-left:auto; border:1px solid var(--side-line); background:#fff;
  border-radius:10px; padding:6px 10px; cursor:pointer;
}
.sp-close{
  display:none; margin-left:4px; border:1px solid var(--side-line); background:#fff;
  border-radius:10px; padding:6px 8px; cursor:pointer;
}

.sp-nav--side{ padding:8px 8px 12px 8px; overflow:auto }
.sp-nav--side ul{ list-style:none; margin:0; padding:0 }
.sp-link{
  display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:12px;
  color:inherit; text-decoration:none; border:1px solid transparent;
  transition:background .12s ease, border-color .12s ease, transform .06s ease;
}
.sp-link .ico{
  display:grid; place-items:center; width:38px; height:38px; border-radius:12px; background:#f2f4f7; font-size:18px;
}
.sp-link:hover{ background:#fff; border-color:#e1e5ea; transform:translateY(-1px) }
.sp-link[aria-current="page"]{ background:var(--side-active); border-color:#d8def5; box-shadow:inset 0 0 0 1px #d8def5 }
.sp-sidebar[data-collapsed="true"] .sp-link .txt{ display:none }

.sp-sidebar__foot{
  margin-top:auto; padding:10px; display:flex; align-items:center; justify-content:space-between; gap:8px;
  border-top:1px dashed var(--side-line);
}
.sp-mini-link, .sp-mini-btn{
  display:flex; align-items:center; gap:8px; text-decoration:none; color:inherit;
  border:1px solid var(--side-line); background:#fff; border-radius:12px; padding:8px 10px; cursor:pointer;
}
.sp-mini-link .ico{ font-size:16px }
.sp-sidebar[data-collapsed="true"] .sp-mini-link .txt{ display:none }

/* Sidebar submenu */
.has-submenu > .sp-link{ position:relative }
.has-submenu > .sp-link::after{
  content:"▾"; margin-left:auto; font-size:.8rem; opacity:.6;
}
.submenu{
  display:none; margin:6px 0 8px 38px; padding-left:10px; border-left:2px solid var(--side-line);
}
.submenu .sp-link{ padding:8px 10px }
.has-submenu[aria-expanded="true"] > .submenu{ display:block }
@media (hover:hover){ .has-submenu:hover > .submenu{ display:block } }

/* Sidebar mobile drawer */
@media (max-width:900px){
  :root{ --sidebar-logo-h:32px }
  .sp-sidebar{
    position:fixed; left:0; top:0; bottom:0; z-index:1040;
    transform:translateX(-110%); transition:transform .2s ease, width .18s ease;
  }
  .sp-sidebar[data-open="true"]{ transform:none }
  .sp-close{ display:inline-block }
  /* Disable hover-driven submenu on touch, rely on aria-expanded */
  .has-submenu:hover > .submenu{ display:none }
}

/* ===== Accessibility & Animations ===== */
@keyframes fadeUp{ from{ opacity:0; transform:translateY(12px) } to{ opacity:1; transform:translateY(0) } }
@keyframes fadeIn{ from{ opacity:0 } to{ opacity:1 } }
.animate-fade-up{ opacity:0; animation:fadeUp .6s ease-out forwards }
.animate-fade-in{ opacity:0; animation:fadeIn .7s ease-out forwards }
.grid .card.animate-fade-up:nth-child(1){ animation-delay:.05s }
.grid .card.animate-fade-up:nth-child(2){ animation-delay:.12s }
.grid .card.animate-fade-up:nth-child(3){ animation-delay:.19s }
.grid .card.animate-fade-up:nth-child(4){ animation-delay:.26s }
.grid .card.animate-fade-up:nth-child(5){ animation-delay:.33s }
.grid .card.animate-fade-up:nth-child(6){ animation-delay:.40s }

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important }
  .animate-fade-up, .animate-fade-in{ opacity:1 !important; transform:none !important }
}

/* ===== Optional: Dark mode base ===== */
@media (prefers-color-scheme:dark){
  :root{
    --black:#e9e9e9; --white:#0f0f10; --bg:#0f0f10; --muted:#a4a4a4;
    --line:#2a2a2a; --side-bg:#0f0f10; --side-line:#2a2a2a; --bg2:#121214; --side-active:#171a25;
  }
  body{ background:var(--bg); color:var(--black) }
  .sp-header, .card, .footer{ background:var(--white) }
  .sp-nav__list a:hover{ background:#1b1b1c }
  .card{ border-color:#2a2a2a; box-shadow:0 8px 24px rgba(0,0,0,.4) }
  .hero{ background:linear-gradient(135deg,#6e0021,#2a0010) }
  .welcomeBanner{ background:#1a1214; border-color:var(--maroon); color:#ffd9e4 }
}