/*
  HSMS Theme Override
  - Indigo palette aligned to the HSMS icon (used for brand accents, links, icons)
  - Microsoft 365-style typography (Segoe UI), heading weights, button radii,
    near-black primary CTAs and subtle hero gradients
*/

/* ===== Microsoft 365 typography ===== */
body, .fbs__net-navbar, .btn, input, select, textarea, button {
  font-family: "Segoe UI", "Segoe UI Variable", -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
  letter-spacing: 0;
}

h1, h2, h3, h4, h5, h6, .hero-title {
  font-family: "Segoe UI", "Segoe UI Variable Display", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  letter-spacing: -.01em;
  color: #171717;
}
h1, .hero-title { font-weight: 600; letter-spacing: -.02em; }
h2 { font-weight: 600; }
h3, h4 { font-weight: 600; }

/* M365-style body color */
body {
  color: #262626;
}

/* ===== M365-style primary buttons (dark slate, small radius) =====
   Replaces Nova's indigo-pill .btn-primary across the site.            */
.btn.btn-primary,
.btn-primary {
  background-color: #171717 !important;
  border-color: #171717 !important;
  color: #ffffff !important;
  border-radius: 6px !important;
  box-shadow: none !important;
  padding: .55rem 1.25rem;
  font-weight: 500;
  transition: background-color .15s ease, border-color .15s ease;
}
.btn.btn-primary:hover,
.btn-primary:hover {
  background-color: #262626 !important;
  border-color: #262626 !important;
  color: #ffffff !important;
}

/* Nova .btn (no -primary) also goes dark for consistency, except where
   we've explicitly used a different colour class (.btn-white, .tier-cta-outline) */
.btn:not(.btn-white):not(.btn-white-outline):not(.tier-cta-outline):not(.btn-fill):not(.btn-outline-pill):not(.solution-btn):not(.btn-indigo-pill):not(.tier-cta) {
  background-color: #171717;
  border-color: #171717;
  color: #ffffff;
  border-radius: 6px;
  padding: .55rem 1.25rem;
  font-weight: 500;
  transition: background-color .15s ease, border-color .15s ease;
}
.btn:not(.btn-white):not(.btn-white-outline):not(.tier-cta-outline):not(.btn-fill):not(.btn-outline-pill):not(.solution-btn):not(.btn-indigo-pill):not(.tier-cta):hover {
  background-color: #262626;
  color: #ffffff;
  border-color: #262626;
}

/* M365 footer subscribe & form-submit buttons override */
footer .btn.btn-primary,
.form-wrapper .btn.btn-primary {
  background-color: #171717 !important;
  border-color: #171717 !important;
  color: #fff !important;
}

/* ===== M365-style subtle hero gradients ===== */
.bg-indigo-gradient {
  background: linear-gradient(135deg, #eef2ff 0%, #f8fafc 50%, #ffffff 100%);
}
.bg-indigo-deep {
  background: linear-gradient(135deg, #1e293b 0%, #303f9f 50%, #4053bb 100%);
  color: #ffffff;
}
/* App hero gradients tuned to feel Microsoft-soft */
.app-hero {
  background: linear-gradient(180deg, #eef2ff 0%, #f5f8ff 60%, #ffffff 100%);
}
.accent-teal .app-hero {
  background: linear-gradient(180deg, #ecfdf5 0%, #f0fdfa 60%, #ffffff 100%);
}

/* Indigo palette retained for brand accents below */

:root,
[data-bs-theme=light] {
  /* Primary = icon's dominant indigo */
  --bs-primary: #4053bb;
  --bs-primary-rgb: 64, 83, 187;
  --bs-primary-hover: #303f9f;          /* Material Indigo 700 */
  --bs-primary-hover-rgb: 48, 63, 159;

  /* Soft indigo surfaces from the icon's light tones */
  --bs-secondary: #e8eaf6;
  --bs-secondary-rgb: 232, 234, 246;

  /* Indigo links + nav hover */
  --bs-link-color: var(--bs-primary);
  --nav-hover-color: #4053bb;
  --dropdown-color: #4053bb;

  /* Heading + body tweaks */
  --bs-heading-color: #0f172a;
  --bs-body-color: #475569;
}

[data-bs-theme=dark] {
  --bs-primary: #7986cc;          /* icon mid, pops on dark */
  --bs-primary-rgb: 121, 134, 204;
  --bs-primary-hover: #9ea8db;    /* icon light */
  --bs-primary-hover-rgb: 158, 168, 219;
  --bs-secondary: #1a237e;        /* Material Indigo 900 */
  --bs-secondary-rgb: 26, 35, 126;
  --bs-link-color: var(--bs-primary);
  --nav-hover-color: #7986cc;
}

/* Subtle indigo selection */
::-moz-selection {
  background-color: rgba(64, 83, 187, 0.92);
  color: #ffffff;
}
::selection {
  background-color: rgba(64, 83, 187, 0.92);
  color: #ffffff;
}

/* Soft indigo gradient utility for hero + feature panels */
.bg-indigo-gradient {
  background: linear-gradient(135deg, #e8eaf6 0%, #ffffff 60%, #f0f1fa 100%);
}
.bg-indigo-deep {
  background: linear-gradient(135deg, #303f9f 0%, #4053bb 50%, #7986cc 100%);
  color: #ffffff;
}
.bg-indigo-deep .subtitle,
.bg-indigo-deep h1,
.bg-indigo-deep h2,
.bg-indigo-deep h3,
.bg-indigo-deep p,
.bg-indigo-deep .lead {
  color: #ffffff;
}

/* Pill badges used in headings ("New", "AI", etc.) */
.badge-soft {
  display: inline-block;
  padding: .35rem .65rem;
  font-size: .75rem;
  font-weight: 600;
  border-radius: 999px;
  background-color: rgba(64, 83, 187, 0.10);
  color: #303f9f;
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* App-grid card hover lift */
.app-tile {
  border: 1px solid #e8eaf6;
  border-radius: 1rem;
  padding: 1.75rem;
  background-color: #ffffff;
  height: 100%;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.app-tile:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px -20px rgba(64, 83, 187, 0.35);
  border-color: rgba(64, 83, 187, 0.35);
}
.app-tile .app-icon {
  display: none;
}
.app-tile h3 {
  font-size: 1.15rem;
  margin-bottom: .5rem;
  color: var(--bs-heading-color);
}
.app-tile p {
  font-size: .95rem;
  color: var(--bs-body-color);
  margin-bottom: 0;
}

/* Compliance / trust strip */
.trust-row {
  border-top: 1px solid #e8eaf6;
  border-bottom: 1px solid #e8eaf6;
  padding: 1.5rem 0;
}
.trust-row .trust-item {
  display: flex;
  align-items: center;
  gap: .65rem;
  color: #475569;
  font-size: .92rem;
}
.trust-row .trust-item i {
  color: #4053bb;
  font-size: 1.15rem;
}

/* Step chips for "How it works" */
.step-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background-color: #4053bb;
  color: #ffffff;
  font-weight: 700;
  margin-bottom: 1rem;
}

/* Footer indigo accents */
footer .footer-link {
  color: #cbd5e1;
  text-decoration: none;
  transition: color .2s ease;
}
footer .footer-link:hover {
  color: #ffffff;
}
footer .footer-heading {
  color: #ffffff;
  font-weight: 600;
  margin-bottom: 1rem;
  font-size: .95rem;
}

/* Make the primary "Get a demo" button pop slightly more */
.btn.btn-primary {
  box-shadow: 0 8px 20px -10px rgba(64, 83, 187, 0.65);
}

/* Solutions page section — themable accent (default indigo) */
.solution-section .solution-icon {
  display: none;
}
.solution-section .label-today {
  color: #94a3b8;
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  font-weight: 600;
}
.solution-section .label-fix {
  color: #4053bb;
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  font-weight: 600;
}
.solution-section .solution-bullets i {
  color: #4053bb;
  margin-right: .35rem;
  margin-top: .25rem;
}
.solution-section .solution-btn {
  background-color: #4053bb;
  border-color: #4053bb;
  color: #ffffff;
  box-shadow: 0 8px 20px -10px rgba(64, 83, 187, 0.65);
}
.solution-section .solution-btn:hover,
.solution-section .solution-btn:focus {
  background-color: #303f9f;
  border-color: #303f9f;
  color: #ffffff;
}

/* ============================================================
   .accent-teal — page-wide teal repaint
   Wrap a <main> (or any container) in this class and any indigo
   surface inside swaps to teal. Used on the Teacher app page.
   ============================================================ */

/* Solution-section overrides (only used if the wrapper is on a Solutions section) */
.accent-teal .solution-icon {
  background-color: rgba(13, 148, 136, 0.12);
  color: #0f766e;
}
.accent-teal .label-fix { color: #0d9488; }
.accent-teal .solution-bullets i { color: #0d9488; }
.accent-teal .solution-btn {
  background-color: #0d9488;
  border-color: #0d9488;
  box-shadow: 0 8px 20px -10px rgba(13, 148, 136, 0.65);
}
.accent-teal .solution-btn:hover,
.accent-teal .solution-btn:focus {
  background-color: #0f766e;
  border-color: #0f766e;
}

/* Page-wide overrides */
.accent-teal .bg-indigo-gradient {
  background: linear-gradient(135deg, #ccfbf1 0%, #ffffff 60%, #f0fdfa 100%);
}
.accent-teal .bg-indigo-deep {
  background: linear-gradient(135deg, #115e59 0%, #0d9488 50%, #14b8a6 100%);
}

.accent-teal .hero-subtitle,
.accent-teal .subtitle {
  color: #0d9488;
}

.accent-teal .badge-soft {
  background-color: rgba(13, 148, 136, 0.10);
  color: #0f766e;
}

/* App-tile cards (icon backgrounds + hover) */
.accent-teal .app-tile .app-icon {
  background-color: rgba(13, 148, 136, 0.12);
  color: #0f766e;
}
.accent-teal .app-tile:hover {
  box-shadow: 0 18px 40px -20px rgba(13, 148, 136, 0.35);
  border-color: rgba(13, 148, 136, 0.35);
}

/* Buttons — primary/filled + outline. Skip white CTA buttons used inside dark CTA strips. */
.accent-teal .btn:not(.btn-white):not(.btn-white-outline) {
  background-color: #0d9488;
  border-color: #0d9488;
  color: #ffffff;
  box-shadow: 0 8px 20px -10px rgba(13, 148, 136, 0.55);
}
.accent-teal .btn:not(.btn-white):not(.btn-white-outline):hover,
.accent-teal .btn:not(.btn-white):not(.btn-white-outline):focus {
  background-color: #0f766e;
  border-color: #0f766e;
  color: #ffffff;
}

/* Bullet checkmarks in features__v2 panel etc. */
.accent-teal .features__v2 .icon,
.accent-teal .features__v2 ul.features li .icon {
  background-color: rgba(13, 148, 136, 0.12);
  color: #0f766e;
}

/* "Why choose / Why HSMS" panel feature icons */
.accent-teal section.features__v2 .col-sm-6 .icon {
  background-color: rgba(13, 148, 136, 0.12) !important;
  color: #0f766e !important;
}

/* "How HSMS solves my problems" cards — pain on top, fix below */
.problem-tile {
  border: 1px solid #e8eaf6;
  border-radius: 1rem;
  padding: 1.75rem;
  background-color: #ffffff;
  height: 100%;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.problem-tile:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px -20px rgba(64, 83, 187, 0.35);
  border-color: rgba(64, 83, 187, 0.35);
}
.problem-tile .pt-icon {
  display: none;
}
.problem-tile h3 {
  font-size: 1.05rem;
  font-weight: 600;
  margin-bottom: 1rem;
  color: #0f172a;
}
.problem-tile .pt-pain {
  font-size: .92rem;
  color: #64748b;
  margin-bottom: .75rem;
  padding-bottom: .75rem;
  border-bottom: 1px dashed #e2e8f0;
}
.problem-tile .pt-pain::before {
  content: "Today: ";
  color: #94a3b8;
  font-weight: 600;
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  display: block;
  margin-bottom: .25rem;
}
.problem-tile .pt-fix {
  font-size: .95rem;
  color: #1f2937;
  margin-bottom: 0;
  font-weight: 500;
}
.problem-tile .pt-fix::before {
  content: "With HSMS: ";
  color: #4053bb;
  font-weight: 600;
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  display: block;
  margin-bottom: .25rem;
}

/* ============================================================
   "What's included" / HSMS apps showcase — M365-style
   ============================================================ */
.apps-showcase .apps-eyebrow {
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #64748b;
  margin-bottom: .5rem;
}
.apps-showcase h2 {
  font-size: 2rem;
  font-weight: 500;
  color: #0f172a;
  margin-bottom: 0;
}
.apps-showcase .apps-explore {
  color: #1f2937;
  text-decoration: none;
  font-weight: 500;
  font-size: .95rem;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  transition: color .15s ease;
}
.apps-showcase .apps-explore:hover { color: #171717; }
.apps-showcase .apps-explore .arrow {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background-color: #171717;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .85rem;
}

/* The tall promo card on the left */
.apps-showcase .promo-card {
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  background-color: #ffffff;
  height: 100%;
  min-height: 460px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.75rem;
}
.apps-showcase .promo-card .promo-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  opacity: 1;
  z-index: 0;
}
.apps-showcase .promo-card .promo-content {
  position: relative;
  z-index: 1;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 1.25rem;
  border-radius: 12px;
  border: 1px solid rgba(64, 83, 187, 0.15);
}
.apps-showcase .promo-card h3 {
  font-size: 1.25rem;
  font-weight: 600;
  color: #171717;
  margin-bottom: .5rem;
}
.apps-showcase .promo-card p {
  font-size: .9rem;
  color: #475569;
  margin-bottom: 1rem;
}
.apps-showcase .promo-card .btn-indigo-pill {
  display: inline-block;
  padding: .55rem 1.25rem;
  background-color: #171717;
  color: #fff;
  border-radius: 6px;
  text-decoration: none;
  font-size: .9rem;
  font-weight: 500;
  transition: background-color .15s ease;
  box-shadow: none;
}
.apps-showcase .promo-card .btn-indigo-pill:hover {
  background-color: #262626;
  color: #fff;
}

/* Individual app cards on the right */
.apps-showcase .app-card {
  background: #ffffff;
  border-radius: 16px;
  padding: 1.5rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-decoration: none;
  color: inherit;
  border: 1px solid #eef2ff;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.apps-showcase .app-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px -22px rgba(15, 23, 42, 0.25);
  border-color: #c5cae8;
  color: inherit;
}
.apps-showcase .app-card .app-card-icon {
  width: 44px;
  height: 44px;
  margin-bottom: 1rem;
  display: block;
}
.apps-showcase .app-card h3 {
  font-size: 1.05rem;
  font-weight: 500;
  color: #0f172a;
  margin-bottom: .5rem;
}
.apps-showcase .app-card p {
  font-size: .85rem;
  color: #64748b;
  line-height: 1.55;
  margin-bottom: 1rem;
  flex-grow: 1;
}
.apps-showcase .app-card .learn-more {
  font-size: .85rem;
  font-weight: 500;
  color: #1f2937;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.apps-showcase .app-card:hover .learn-more {
  color: #4053bb;
}

/* The Security card spans both columns of its row */
.apps-showcase .app-card.wide {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1.5rem;
}
.apps-showcase .app-card.wide .app-card-icon {
  width: 56px;
  height: 56px;
  margin: 0;
  flex-shrink: 0;
}
.apps-showcase .app-card.wide .wide-content {
  flex-grow: 1;
}
.apps-showcase .app-card.wide h3 {
  margin-bottom: .35rem;
}
.apps-showcase .app-card.wide p {
  margin-bottom: 0;
}

/* ============================================================
   M365-style product detail page — hero, sticky sub-nav, cross-sell
   ============================================================ */

/* Hero: big app name, two pill CTAs, product image on the right */
.app-hero {
  padding: 5rem 0 4rem;
  background: linear-gradient(180deg, #f0f4ff 0%, #ffffff 100%);
  position: relative;
  overflow: hidden;
}
.app-hero h1 {
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 600;
  line-height: 1.1;
  color: #0f172a;
  letter-spacing: -.02em;
  margin-bottom: 1.25rem;
}
.app-hero .hero-sub {
  font-size: 1.1rem;
  line-height: 1.6;
  color: #475569;
  max-width: 560px;
  margin-bottom: 2rem;
}
.app-hero .hero-cta {
  display: flex;
  gap: .75rem;
  flex-wrap: wrap;
}
.app-hero .hero-cta .btn-fill {
  display: inline-block;
  padding: .75rem 1.5rem;
  background-color: #0f172a;
  color: #ffffff;
  border-radius: 999px;
  text-decoration: none;
  font-size: .95rem;
  font-weight: 500;
  border: 1px solid #0f172a;
  transition: background-color .15s ease;
}
.app-hero .hero-cta .btn-fill:hover { background-color: #1f2937; color: #fff; }
.app-hero .hero-cta .btn-outline-pill {
  display: inline-block;
  padding: .75rem 1.5rem;
  background-color: transparent;
  color: #0f172a;
  border-radius: 999px;
  text-decoration: none;
  font-size: .95rem;
  font-weight: 500;
  border: 1px solid #0f172a;
  transition: background-color .15s ease;
}
.app-hero .hero-cta .btn-outline-pill:hover { background-color: rgba(15,23,42,0.06); }

/* Teal accent overrides for the Teacher page */
.accent-teal .app-hero {
  background: linear-gradient(180deg, #ecfdf5 0%, #ffffff 100%);
}

/* Sticky sub-nav below hero */
.app-subnav {
  position: sticky;
  top: 0;
  z-index: 50;
  background-color: rgba(255,255,255,0.95);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid #e5e7eb;
}
.app-subnav .subnav-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .9rem 0;
}
.app-subnav .subnav-links {
  display: flex;
  gap: 1.5rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  flex-grow: 1;
  min-width: 0;
}
.app-subnav .subnav-links::-webkit-scrollbar { display: none; }
.app-subnav .subnav-links a {
  font-size: .9rem;
  font-weight: 500;
  color: #475569;
  text-decoration: none;
  padding: .35rem 0;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: color .15s ease, border-color .15s ease;
}
.app-subnav .subnav-links a:hover {
  color: #0f172a;
}
.app-subnav .subnav-links a.active {
  color: #0f172a;
  border-bottom-color: #4053bb;
}
.app-subnav .subnav-cta {
  display: inline-block;
  padding: .5rem 1.1rem;
  background-color: #0f172a;
  color: #fff;
  border-radius: 999px;
  text-decoration: none;
  font-size: .85rem;
  font-weight: 500;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background-color .15s ease;
}
.app-subnav .subnav-cta:hover { background-color: #1f2937; color: #fff; }
.accent-teal .app-subnav .subnav-links a.active { border-bottom-color: #0d9488; }

/* "Other HSMS apps" cross-sell */
.cross-sell {
  background-color: #f8fafc;
}
.cross-sell h2 {
  font-size: 1.75rem;
  font-weight: 500;
  color: #0f172a;
  margin-bottom: 2rem;
}
.cross-sell .cs-card {
  background: #ffffff;
  border-radius: 14px;
  padding: 1.25rem;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 1rem;
  text-decoration: none;
  color: inherit;
  border: 1px solid #eef2ff;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.cross-sell .cs-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px -18px rgba(15,23,42,0.25);
  border-color: #c5cae8;
  color: inherit;
}
.cross-sell .cs-card img {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
}
.cross-sell .cs-card h3 {
  font-size: .95rem;
  font-weight: 500;
  color: #0f172a;
  margin: 0;
}
.cross-sell .cs-card p {
  font-size: .8rem;
  color: #64748b;
  margin: 0;
}

/* ============================================================
   M365-style footer
   ============================================================ */
.footer-m365 {
  background-color: #f2f2f2;
  padding: 3rem 0 1.5rem;
  border-top: 1px solid #e5e7eb;
  color: #262626;
}
.footer-m365 .footer-links h6 {
  font-size: .92rem;
  font-weight: 600;
  color: #171717;
  margin-bottom: 1rem;
  letter-spacing: 0;
}
.footer-m365 .footer-links ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer-m365 .footer-links li {
  margin-bottom: .65rem;
}
.footer-m365 .footer-links a {
  color: #262626;
  text-decoration: none;
  font-size: .85rem;
  transition: color .15s ease, text-decoration-color .15s ease;
}
.footer-m365 .footer-links a:hover {
  color: #171717;
  text-decoration: underline;
}
.footer-m365 .footer-bottom {
  border-top: 1px solid #d1d5db;
  margin-top: 2.25rem;
  padding-top: 1.25rem;
}
.footer-m365 .footer-bottom .legal-row {
  color: #616161;
  font-size: .8rem;
}
.footer-m365 .footer-bottom .legal-row a {
  color: #616161;
  text-decoration: none;
}
.footer-m365 .footer-bottom .legal-row a:hover {
  color: #171717;
  text-decoration: underline;
}
.footer-m365 .footer-bottom .footer-cta {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .5rem 1.15rem;
  background-color: #171717;
  color: #fff;
  border-radius: 6px;
  text-decoration: none;
  font-size: .85rem;
  font-weight: 500;
  transition: background-color .15s ease;
}
.footer-m365 .footer-bottom .footer-cta:hover {
  background-color: #262626;
  color: #fff;
}

/* ============================================================
   M365-style pricing cards
   ============================================================ */
.pricing-m365 .tier-card {
  background: #ffffff;
  border-radius: 16px;
  border: 1px solid #e5e7eb;
  padding: 2rem 1.75rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: transform .25s ease, box-shadow .25s ease;
}
.pricing-m365 .tier-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px -22px rgba(15, 23, 42, 0.18);
}
.pricing-m365 .tier-card .tier-name {
  font-size: 1.15rem;
  font-weight: 500;
  color: #0f172a;
  margin-bottom: 1.5rem;
}
.pricing-m365 .tier-card .tier-price {
  font-size: 2.6rem;
  font-weight: 500;
  color: #0f172a;
  line-height: 1.1;
  margin-bottom: .15rem;
}
.pricing-m365 .tier-card .tier-period {
  font-size: .85rem;
  color: #475569;
  margin-bottom: 1.25rem;
}
.pricing-m365 .tier-card .tier-note {
  font-size: .82rem;
  color: #64748b;
  line-height: 1.5;
  margin-bottom: 1.5rem;
  min-height: 3rem;
}
.pricing-m365 .tier-card .tier-cta {
  display: inline-block;
  padding: .55rem 1.25rem;
  background-color: #0f172a;
  color: #ffffff;
  border-radius: 6px;
  text-decoration: none;
  font-size: .9rem;
  font-weight: 500;
  align-self: flex-start;
  border: 1px solid #0f172a;
  transition: background-color .15s ease;
}
.pricing-m365 .tier-card .tier-cta:hover {
  background-color: #1f2937;
  color: #ffffff;
}
.pricing-m365 .tier-card .tier-cta-outline {
  display: inline-block;
  padding: .55rem 1.25rem;
  background-color: #ffffff;
  color: #0f172a;
  border-radius: 6px;
  text-decoration: none;
  font-size: .9rem;
  font-weight: 500;
  border: 1px solid #0f172a;
  margin-left: .5rem;
  transition: background-color .15s ease;
}
.pricing-m365 .tier-card .tier-cta-outline:hover {
  background-color: rgba(15, 23, 42, 0.06);
  color: #0f172a;
}
.pricing-m365 .tier-card hr {
  border: 0;
  border-top: 1px solid #e5e7eb;
  margin: 1.5rem 0;
  opacity: 1;
}
.pricing-m365 .tier-card .tier-includes {
  font-size: .9rem;
  font-weight: 600;
  color: #0f172a;
  margin-bottom: 1rem;
}
.pricing-m365 .tier-card .tier-features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: .65rem;
}
.pricing-m365 .tier-card .tier-features li {
  display: flex;
  gap: .65rem;
  align-items: flex-start;
  font-size: .9rem;
  color: #1f2937;
  line-height: 1.5;
}
.pricing-m365 .tier-card .tier-features li .check {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  border-radius: 0;
  background-color: transparent;
  color: #171717;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  font-weight: 700;
  margin-top: .15rem;
}

/* Custom (wide) card variant */
.pricing-m365 .tier-card.custom-wide {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}
.pricing-m365 .tier-card.custom-wide .custom-text {
  flex-grow: 1;
}
.pricing-m365 .tier-card.custom-wide .tier-name {
  margin-bottom: .25rem;
}
.pricing-m365 .tier-card.custom-wide .tier-note {
  min-height: 0;
  margin-bottom: 0;
}

/* Section spacing tightening on long pages */
.section-tight {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

/* Nav dropdowns — kill Bootstrap's bright blue :hover / :focus / :active splash */
.dropdown-menu .dropdown-item {
  color: #1f2937;
  border-radius: 6px;
  transition: background-color .15s ease, color .15s ease;
}
.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus,
.dropdown-menu .dropdown-item:focus-visible,
.dropdown-menu .dropdown-item:active,
.dropdown-menu .dropdown-item.active {
  background-color: rgba(64, 83, 187, 0.08) !important;
  color: #4053bb !important;
  outline: none;
  box-shadow: none;
}

/* Nav dropdowns — flat, no drop shadow */
.fbs__net-navbar .navbar-nav .dropdown-menu,
.fbs__net-navbar .navbar-nav .dropend > .dropdown-menu,
.fbs__net-navbar .navbar-nav .dropstart > .dropdown-menu {
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
}

/* Mobile hamburger — transparent background, plain black icon */
.fbs__net-navbar .fbs__net-navbar-toggler {
  background-color: transparent !important;
  color: #000000;
  border: none;
  box-shadow: none;
  width: 44px;
  height: 44px;
  transition: opacity .15s ease;
}
.fbs__net-navbar .fbs__net-navbar-toggler:hover,
.fbs__net-navbar .fbs__net-navbar-toggler:focus {
  background-color: transparent !important;
  color: #000000;
  opacity: .7;
}

/* ===== M365 step circles (How it works) — neutral, no indigo ===== */
.howitworks__v1 .step-card .step-number {
  background-color: #ffffff !important;
  color: #171717 !important;
  border: 1px solid #d0d7de;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .06);
}

/* ===== Footer socials (Facebook / YouTube) ===== */
.footer-m365 .footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid #d0d7de;
  color: #171717;
  font-size: 1rem;
  text-decoration: none;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.footer-m365 .footer-social a:hover {
  background-color: #171717;
  border-color: #171717;
  color: #ffffff;
}

/* ===== Home hero CTAs (M365-style pills) ===== */
.hero__v6 .hero-ctas a {
  display: inline-flex;
  align-items: center;
  padding: .65rem 1.5rem;
  border-radius: 6px;
  font-weight: 500;
  font-size: .95rem;
  text-decoration: none;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.hero__v6 .hero-ctas .hero-pill-primary {
  background-color: #171717;
  color: #ffffff;
  border: 1px solid #171717;
}
.hero__v6 .hero-ctas .hero-pill-primary:hover {
  background-color: #262626;
  border-color: #262626;
  color: #ffffff;
}
.hero__v6 .hero-ctas .hero-pill-ghost {
  background-color: transparent;
  color: #171717;
  border: 1px solid #d0d7de;
}
.hero__v6 .hero-ctas .hero-pill-ghost:hover {
  background-color: #ffffff;
  border-color: #171717;
  color: #171717;
}

/* ============================================================
   M365 FINAL SWEEP — kill any remaining indigo titles / buttons / surfaces
   Loaded last so it wins specificity ties.
   Keep this block at the bottom of the file.
   ============================================================ */

/* ---- Brand primary swapped to M365 dark slate ---- */
:root,
[data-bs-theme=light] {
  --bs-primary: #171717;
  --bs-primary-rgb: 23, 23, 23;
  --bs-primary-hover: #262626;
  --bs-primary-hover-rgb: 38, 38, 38;
  --bs-secondary: #f1f5f9;        /* M365 neutral surface tint */
  --bs-secondary-rgb: 241, 245, 249;
  --bs-link-color: #171717;
  --bs-link-hover-color: #2563eb; /* M365 link blue on hover only */
  --nav-hover-color: #171717;
  --dropdown-color: #171717;
  --bs-heading-color: #171717;
}

/* ---- Hero gradient containers: neutral M365 wash ---- */
.bg-indigo-gradient,
.accent-teal .bg-indigo-gradient {
  background: linear-gradient(180deg, #f6f8fb 0%, #fbfcfe 60%, #ffffff 100%) !important;
}
.bg-indigo-deep,
.accent-teal .bg-indigo-deep {
  background: linear-gradient(135deg, #1f2937 0%, #111827 100%) !important;
  color: #ffffff !important;
}

/* ---- Selection: neutral grey ---- */
::-moz-selection { background-color: #171717; color: #fff; }
::selection { background-color: #171717; color: #fff; }

/* ---- Soft pill badges (used on chip rows like Solutions nav) ---- */
.badge-soft {
  background-color: #f1f5f9 !important;
  color: #171717 !important;
  border: 1px solid #e2e8f0;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
.badge-soft:hover {
  background-color: #e2e8f0 !important;
  color: #171717 !important;
  border-color: #cbd5e1;
}

/* ---- Trust strip icons ---- */
.trust-row .trust-item i {
  color: #171717 !important;
}
.trust-row {
  border-top-color: #e5e7eb !important;
  border-bottom-color: #e5e7eb !important;
}

/* ---- Step chips ---- */
.step-chip {
  background-color: #171717 !important;
  color: #ffffff !important;
}

/* ---- Solutions: bullet ticks, "With HSMS:" label, Talk to us btn ---- */
.solution-section .label-fix { color: #171717 !important; }
.solution-section .solution-bullets i { color: #171717 !important; }
.solution-section .solution-btn {
  background-color: #171717 !important;
  border-color: #171717 !important;
  color: #ffffff !important;
  border-radius: 6px !important;
  box-shadow: none !important;
  padding: .55rem 1.25rem;
  font-weight: 500;
}
.solution-section .solution-btn:hover,
.solution-section .solution-btn:focus {
  background-color: #262626 !important;
  border-color: #262626 !important;
  color: #ffffff !important;
}
/* Teal accent (Teacher) keeps its own surface accents; primary buttons stay teal */
.accent-teal .solution-btn { background-color: #0d9488 !important; border-color: #0d9488 !important; }
.accent-teal .solution-btn:hover { background-color: #0f766e !important; border-color: #0f766e !important; }

/* ---- Problem tiles: "With HSMS:" label colour ---- */
.problem-tile .pt-fix::before { color: #171717 !important; }

/* ---- App sub-nav active underline ---- */
.app-subnav .subnav-links a.active {
  border-bottom-color: #171717 !important;
  color: #171717 !important;
}

/* ---- Nav dropdown hover: neutral grey, not indigo wash ---- */
.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus,
.dropdown-menu .dropdown-item:focus-visible,
.dropdown-menu .dropdown-item:active,
.dropdown-menu .dropdown-item.active {
  background-color: #f1f5f9 !important;
  color: #171717 !important;
}

/* ---- Apps showcase: card hover "Learn more" stays dark ---- */
.apps-showcase .app-card:hover .learn-more { color: #171717 !important; }

/* ---- App tile hover shadow: neutral, not indigo glow ---- */
.app-tile:hover {
  box-shadow: 0 18px 40px -20px rgba(15, 23, 42, .25) !important;
  border-color: #d0d7de !important;
}
.app-tile {
  border-color: #e5e7eb !important;
}

/* ---- Primary button shadow: none (M365 buttons are flat) ---- */
.btn.btn-primary { box-shadow: none !important; }

/* ---- Generic link colour stays neutral; underline appears on hover ---- */
a { color: #171717; }
a:hover { color: #2563eb; }
/* Footer + nav links keep their own colours via more specific rules already in place */

/* ---- Headings: never indigo ---- */
h1, h2, h3, h4, h5, h6, .hero-title { color: #171717 !important; }
.bg-indigo-deep h1, .bg-indigo-deep h2, .bg-indigo-deep h3,
.bg-indigo-deep h4, .bg-indigo-deep h5, .bg-indigo-deep h6,
.bg-indigo-deep .hero-title { color: #ffffff !important; }

/* ============================================================
   Downloads page cards
   ============================================================ */
.dl-card {
  background-color: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: 1.5rem 1.75rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.dl-card:hover {
  border-color: #d0d7de;
  box-shadow: 0 14px 30px -18px rgba(15, 23, 42, .18);
  transform: translateY(-2px);
}
.dl-card-head {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  margin-bottom: 1.25rem;
}
.dl-card-icon {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
}
.dl-card h3 {
  font-size: 1.15rem;
  font-weight: 600;
  color: #171717;
}
.dl-card p {
  font-size: .9rem;
  color: #475569;
  line-height: 1.45;
}
.dl-card-btns {
  display: flex;
  flex-direction: column;
  gap: .65rem;
  margin-top: auto;
}
.dl-card-btns .dl-btn {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  padding: .65rem 1rem;
  border-radius: 8px;
  font-size: .9rem;
  font-weight: 500;
  text-decoration: none;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.dl-card-btns .dl-btn i {
  font-size: 1.25rem;
}
.dl-card-btns .dl-btn span {
  line-height: 1.15;
  text-align: left;
}
.dl-card-btns .dl-btn small {
  font-size: .7rem;
  opacity: .8;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.dl-card-btns .dl-btn-dark {
  background-color: #171717;
  color: #ffffff;
  border: 1px solid #171717;
}
.dl-card-btns .dl-btn-dark:hover {
  background-color: #262626;
  color: #ffffff;
}
.dl-card-btns .dl-btn-light {
  background-color: #ffffff;
  color: #171717;
  border: 1px solid #d0d7de;
}
.dl-card-btns .dl-btn-light:hover {
  background-color: #f1f5f9;
  border-color: #171717;
}

/* ============================================================
   App hero icon (above H1 on each Product page)
   ============================================================ */
.app-hero .app-hero-icon {
  margin-bottom: 1rem;
}
.app-hero .app-hero-icon img {
  width: 56px;
  height: 56px;
  display: block;
}

/* ============================================================
   Per-app accent tinting — matches the SVG icon palette.
   Override the neutral M365 sweep selectively for app pages.
   ============================================================ */

/* ---- accent-indigo (Administrator: #4053bb) ---- */
.accent-indigo .app-hero {
  background: linear-gradient(180deg, #e8eaf6 0%, #f0f1fa 60%, #ffffff 100%) !important;
}
.accent-indigo .app-subnav .subnav-links a.active {
  border-bottom-color: #4053bb !important;
  color: #4053bb !important;
}
.accent-indigo .app-hero .btn-fill {
  background-color: #4053bb !important;
  border-color: #4053bb !important;
  color: #fff !important;
}
.accent-indigo .app-hero .btn-fill:hover {
  background-color: #303f9f !important;
  border-color: #303f9f !important;
}

/* ---- accent-teal (Teacher: #009788) — already defined earlier, reinforce hero ---- */
.accent-teal .app-hero {
  background: linear-gradient(180deg, #e0f2f2 0%, #f0fdfa 60%, #ffffff 100%) !important;
}
.accent-teal .app-subnav .subnav-links a.active {
  border-bottom-color: #009788 !important;
  color: #009788 !important;
}
.accent-teal .app-hero .btn-fill {
  background-color: #009788 !important;
  border-color: #009788 !important;
  color: #fff !important;
}
.accent-teal .app-hero .btn-fill:hover {
  background-color: #00766b !important;
  border-color: #00766b !important;
}

/* ---- accent-slate (Parent: #263339 / #607d8b) ---- */
.accent-slate .app-hero {
  background: linear-gradient(180deg, #eceff1 0%, #f5f7f8 60%, #ffffff 100%) !important;
}
.accent-slate .app-subnav .subnav-links a.active {
  border-bottom-color: #263339 !important;
  color: #263339 !important;
}
.accent-slate .app-hero .btn-fill {
  background-color: #263339 !important;
  border-color: #263339 !important;
  color: #fff !important;
}
.accent-slate .app-hero .btn-fill:hover {
  background-color: #11181c !important;
  border-color: #11181c !important;
}

/* ---- accent-purple (Student: #673bb8) ---- */
.accent-purple .app-hero {
  background: linear-gradient(180deg, #eee8f6 0%, #f4eefb 60%, #ffffff 100%) !important;
}
.accent-purple .app-subnav .subnav-links a.active {
  border-bottom-color: #673bb8 !important;
  color: #673bb8 !important;
}
.accent-purple .app-hero .btn-fill {
  background-color: #673bb8 !important;
  border-color: #673bb8 !important;
  color: #fff !important;
}
.accent-purple .app-hero .btn-fill:hover {
  background-color: #4f2a91 !important;
  border-color: #4f2a91 !important;
}