/* ================================================================
   DaySquad — Global Stylesheet
   Brand Colors:
     Navy:   #0D1B4B
     Red:    #E8302B
     Orange: #E8612B
     Gold:   #F5A623
     Banana: #FFE135
     White:  #FFFFFF
   ================================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --navy:       #0D1B4B;
  --navy-light: #162362;
  --red:        #E8302B;
  --red-dark:   #C42520;
  --orange:     #E8612B;
  --gold:       #F5A623;
  --banana:     #FFE135;
  --white:      #FFFFFF;
  --gray-50:    #F9FAFB;
  --gray-100:   #F3F4F6;
  --gray-200:   #E5E7EB;
  --gray-300:   #D1D5DB;
  --gray-400:   #9CA3AF;
  --gray-500:   #6B7280;
  --gray-600:   #4B5563;
  --gray-700:   #374151;
  --gray-800:   #1F2937;
  --radius-sm:  6px;
  --radius-md:  12px;
  --radius-lg:  20px;
  --radius-xl:  32px;
  --shadow-sm:  0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04);
  --shadow-md:  0 4px 16px rgba(0,0,0,.10);
  --shadow-lg:  0 8px 32px rgba(0,0,0,.14);
  --shadow-xl:  0 20px 60px rgba(0,0,0,.18);
  --transition: .22s cubic-bezier(.4,0,.2,1);
  --font-sans:  'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
}

html { scroll-behavior: smooth; font-size: 16px; }

body {
  font-family: var(--font-sans);
  color: var(--gray-800);
  background: var(--white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
button { cursor: pointer; font-family: inherit; border: none; background: none; }
input, select, textarea { font-family: inherit; }

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

.section { padding: 96px 0; }

/* ---- Section Header ---- */
.section-header { text-align: center; max-width: 720px; margin: 0 auto 64px; }
.section-badge {
  display: inline-block;
  background: rgba(232,48,43,.1);
  color: var(--red);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 16px;
}
.section-title { font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 800; color: var(--navy); line-height: 1.2; margin-bottom: 16px; }
.section-subtitle { font-size: 1.0625rem; color: var(--gray-600); line-height: 1.7; }

/* ================================================================
   BUTTONS
   ================================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 24px;
  border-radius: var(--radius-sm);
  font-size: .9375rem;
  font-weight: 600;
  transition: var(--transition);
  white-space: nowrap;
}
.btn-primary { background: var(--red); color: var(--white); }
.btn-primary:hover { background: var(--red-dark); transform: translateY(-1px); box-shadow: 0 6px 20px rgba(232,48,43,.35); }
.btn-outline { background: transparent; color: var(--navy); border: 2px solid var(--navy); }
.btn-outline:hover { background: var(--navy); color: var(--white); }
.btn-ghost { background: rgba(255,255,255,.15); color: var(--white); border: 2px solid rgba(255,255,255,.4); }
.btn-ghost:hover { background: rgba(255,255,255,.25); }
.btn-lg { padding: 14px 32px; font-size: 1rem; border-radius: var(--radius-md); }
.btn-full { width: 100%; }

/* ================================================================
   NAVBAR
   ================================================================ */
.navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  background: rgba(255,255,255,.95);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--gray-200);
  transition: box-shadow var(--transition);
}
.navbar.scrolled { box-shadow: var(--shadow-md); }
.nav-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav-logo { display: flex; align-items: center; gap: 10px; }
.nav-logo-img { width: 72px; height: 72px; object-fit: contain; border-radius: 50%; }
.nav-logo-text { font-size: 1.25rem; font-weight: 800; color: var(--navy); letter-spacing: -.02em; }

.nav-links { display: flex; align-items: center; gap: 32px; }
.nav-links a:not(.btn) { font-size: .9rem; font-weight: 500; color: var(--gray-600); transition: color var(--transition); }
.nav-links a:not(.btn):hover { color: var(--navy); }
/* Direct email address in the nav. Hidden between the hamburger breakpoint and
   1200px, where the nav bar has no room left for it. */
.nav-links a.nav-email { color: var(--red); font-weight: 600; }
.nav-links a.nav-email:hover { color: var(--red-dark); }
@media (min-width: 769px) and (max-width: 1200px) { .nav-email { display: none; } }
.nav-links .btn { margin-left: 4px; }
.nav-links .btn-outline { padding: 9px 20px; }
.nav-links .btn-primary { padding: 9px 20px; }

.hamburger { display: none; flex-direction: column; gap: 5px; padding: 4px; }
.hamburger span { display: block; width: 24px; height: 2px; background: var(--navy); border-radius: 2px; transition: var(--transition); }

/* ================================================================
   HERO
   ================================================================ */
.hero {
  position: relative;
  min-height: 100vh;
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 60%, #1e3a8a 100%);
  display: flex;
  align-items: center;
  padding-top: 96px;
  overflow: hidden;
}
.hero-bg-shapes { position: absolute; inset: 0; pointer-events: none; }
.shape {
  position: absolute;
  border-radius: 50%;
  opacity: .07;
}
.shape-1 { width: 600px; height: 600px; background: var(--red); top: -100px; right: -100px; }
.shape-2 { width: 400px; height: 400px; background: var(--gold); bottom: -50px; left: -80px; }
.shape-3 { width: 200px; height: 200px; background: var(--orange); top: 40%; left: 35%; }

.hero-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 64px;
  padding-top: 60px;
  padding-bottom: 80px;
}
.hero-badge {
  display: inline-block;
  background: rgba(245,166,35,.2);
  color: var(--gold);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 6px 16px;
  border-radius: 999px;
  border: 1px solid rgba(245,166,35,.3);
  margin-bottom: 20px;
}
.hero-title {
  font-size: clamp(2.25rem, 5vw, 3.75rem);
  font-weight: 900;
  color: var(--white);
  line-height: 1.1;
  letter-spacing: -.03em;
  margin-bottom: 20px;
}
.text-gradient {
  background: linear-gradient(90deg, var(--gold), var(--orange));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.text-banana { color: var(--banana); }
.text-white { color: var(--white); }
.hero-subtitle {
  font-size: 1.125rem;
  color: rgba(255,255,255,.75);
  line-height: 1.7;
  margin-bottom: 36px;
  max-width: 480px;
}
.hero-ctas { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 48px; }

.hero-quicknav {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0;
  margin-top: 8px;
}
.hero-qnav-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  padding: 6px 28px 6px 0;
  text-decoration: none;
  color: #ffffff;
  transition: opacity var(--transition);
}
.hero-qnav-item:hover { opacity: .7; }
.qnav-icon {
  font-size: 1.8rem;
  line-height: 1;
  flex-shrink: 0;
}
.qnav-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.qnav-label {
  font-size: .95rem;
  font-weight: 700;
  color: #ffffff;
  line-height: 1;
}
.qnav-desc {
  font-size: .72rem;
  font-weight: 500;
  color: rgba(255,255,255,.55);
  line-height: 1;
}
.qnav-divider {
  width: 1px;
  height: 36px;
  background: rgba(255,255,255,.2);
  margin-right: 28px;
  flex-shrink: 0;
}

.hero-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-logo-img {
  width: 360px;
  height: 360px;
  object-fit: cover;
  object-position: center;
  border-radius: 50%;
  border: 12px solid #ffffff;
  box-shadow: 0 20px 80px rgba(0,0,0,.4);
  animation: float 4s ease-in-out infinite;
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-12px); }
}

.hero-card {
  position: absolute;
  background: rgba(255,255,255,.97);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: var(--shadow-lg);
  min-width: 200px;
  animation: float-card 5s ease-in-out infinite;
}
.hero-card-1 { top: -56px; right: -30px; animation-delay: 0s; }
.hero-card-2 { bottom: -64px; right: -50px; animation-delay: 1.5s; }
.hero-card-3 { bottom: -64px; left: -50px; animation-delay: .8s; }
/* Tablet widths: narrower hero column, so keep cards inside the viewport */
@media (min-width: 769px) and (max-width: 1240px) {
  .hero-card-1 { top: -84px; right: -20px; }
  .hero-card-2 { bottom: -84px; right: 0; }
  .hero-card-3 { bottom: -84px; left: -40px; }
}
@media (min-width: 769px) and (max-width: 900px) {
  .hero-card-3 { display: none; } /* not enough room for two cards under the logo */
}
@keyframes float-card {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%       { transform: translateY(-8px) rotate(.5deg); }
}
.hcard-icon { font-size: 1.5rem; }
.hcard-svg { display: block; filter: drop-shadow(0 1px 1px rgba(0,0,0,.15)); }
.hcard-text strong { display: block; font-size: .85rem; font-weight: 700; color: var(--navy); }
.hcard-text span { font-size: .75rem; color: var(--navy); }

/* ================================================================
   TAGLINE BAR
   ================================================================ */
.tagline-bar { background: var(--navy); padding: 18px 0; overflow: hidden; }
.tagline-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  font-size: .875rem;
  font-weight: 600;
  color: rgba(255,255,255,.7);
  letter-spacing: .02em;
}
.dot { color: var(--gold); font-size: .5rem; }

/* ================================================================
   FEATURES GRID
   ================================================================ */
.features-overview { background: var(--gray-50); }
.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.feature-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 36px 28px;
  box-shadow: var(--shadow-sm);
  border-top: 4px solid transparent;
  transition: transform var(--transition), box-shadow var(--transition);
}
.feature-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.feature-card--accent-red  { border-top-color: var(--red); }
.feature-card--accent-orange { border-top-color: var(--orange); }
.feature-card--accent-navy { border-top-color: var(--navy); }
.feature-card--accent-gold { border-top-color: var(--gold); }
.feature-icon { font-size: 2.25rem; margin-bottom: 16px; }
.feature-card h3 { font-size: 1.1875rem; font-weight: 700; color: var(--navy); margin-bottom: 10px; }
.feature-card p { font-size: .9375rem; color: var(--gray-600); line-height: 1.65; margin-bottom: 16px; }
.feature-link { font-size: .875rem; font-weight: 600; color: var(--red); transition: color var(--transition); }
.feature-link:hover { color: var(--red-dark); }

/* ================================================================
   CHAT SECTION
   ================================================================ */
.chat-section { background: var(--white); }
.chat-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
}

/* App Mockup */
.app-mockup {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-xl);
  border: 1px solid var(--gray-200);
  background: var(--white);
}
.mockup-topbar {
  background: var(--navy);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.mockup-dots { display: flex; gap: 6px; }
.mockup-dots span { width: 12px; height: 12px; border-radius: 50%; background: rgba(255,255,255,.3); }
.mockup-dots span:first-child { background: #FF5F56; }
.mockup-dots span:nth-child(2) { background: #FFBD2E; }
.mockup-dots span:last-child { background: #27C93F; }
.mockup-title { font-size: .8rem; font-weight: 600; color: rgba(255,255,255,.7); margin-left: 8px; }
.mockup-body { display: flex; height: 360px; }

.mockup-sidebar {
  width: 160px;
  background: var(--gray-50);
  border-right: 1px solid var(--gray-200);
  padding: 12px 0;
  flex-shrink: 0;
  overflow-y: auto;
}
.sidebar-item {
  padding: 10px 14px;
  font-size: .8rem;
  font-weight: 500;
  color: var(--gray-600);
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: var(--radius-sm);
  margin: 0 6px;
  transition: background var(--transition);
  cursor: pointer;
}
.sidebar-item:hover { background: var(--gray-200); }
.sidebar-item.active { background: var(--navy); color: var(--white); }
.sidebar-icon { font-size: 1rem; }

.mockup-chat {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 16px;
  gap: 14px;
  overflow-y: auto;
}
.chat-bubble { display: flex; gap: 10px; align-items: flex-start; }
.bubble-other { flex-direction: row; }
.bubble-self { flex-direction: row-reverse; }
.bubble-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--white);
  font-size: .65rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.bubble-content { max-width: 75%; }
.bubble-name { font-size: .7rem; font-weight: 600; color: var(--navy); display: block; margin-bottom: 4px; }
.bubble-content p {
  background: var(--gray-100);
  padding: 8px 12px;
  border-radius: var(--radius-md);
  font-size: .8rem;
  color: var(--gray-800);
  line-height: 1.4;
}
.bubble-self .bubble-content p { background: var(--navy); color: var(--white); }
.bubble-reactions { display: flex; gap: 6px; margin-top: 4px; }
.bubble-reactions span { font-size: .65rem; background: var(--gray-100); border-radius: 999px; padding: 2px 6px; }
.mockup-input {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  border-top: 1px solid var(--gray-200);
  padding-top: 12px;
}
.mockup-input span { flex: 1; font-size: .8rem; color: var(--gray-400); }
.mockup-input button {
  background: var(--red);
  color: var(--white);
  padding: 6px 14px;
  border-radius: var(--radius-sm);
  font-size: .75rem;
  font-weight: 600;
}

/* Feature List */
.feature-list { list-style: none; display: flex; flex-direction: column; gap: 24px; }
.feature-list li { display: flex; gap: 16px; align-items: flex-start; }
.list-icon {
  width: 24px; height: 24px;
  background: var(--red);
  color: var(--white);
  border-radius: 50%;
  font-size: .8rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}
.feature-list strong { display: block; font-size: 1rem; font-weight: 700; color: var(--navy); margin-bottom: 4px; }
.feature-list p { font-size: .9rem; color: var(--gray-600); line-height: 1.6; }

/* ================================================================
   EDUCATION SECTION
   ================================================================ */
.education-section { background: var(--gray-50); }
.education-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
}
.edu-categories { display: flex; flex-direction: column; gap: 20px; margin-top: 32px; }
.edu-cat { display: flex; gap: 16px; align-items: flex-start; }
.edu-cat-icon { font-size: 1.5rem; flex-shrink: 0; }
.edu-cat strong { display: block; font-size: .9875rem; font-weight: 700; color: var(--navy); margin-bottom: 4px; }
.edu-cat p { font-size: .875rem; color: var(--gray-600); line-height: 1.5; }

.edu-mockup .mockup-body { display: block; height: auto; }
.edu-mockup-body { padding: 16px; }
.edu-search {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--gray-100);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  margin-bottom: 16px;
}
.edu-search input {
  background: none;
  border: none;
  outline: none;
  font-size: .85rem;
  color: var(--gray-600);
  flex: 1;
}
.edu-section-list { display: flex; flex-direction: column; gap: 4px; }
.edu-section-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  transition: background var(--transition);
  cursor: pointer;
}
.edu-section-item:hover { background: var(--gray-100); }
.edu-section-item.highlight { background: rgba(232,48,43,.06); }
.esi-icon { font-size: 1.25rem; }
.esi-text { flex: 1; }
.esi-text strong { display: block; font-size: .85rem; font-weight: 700; color: var(--navy); }
.esi-text small { font-size: .75rem; color: var(--gray-400); }
.esi-arrow { color: var(--gray-400); font-size: 1.25rem; }

/* ================================================================
   INDUSTRIES
   ================================================================ */
.industries-section { background: var(--white); }
.industries-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.industry-card {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--gray-200);
  transition: transform var(--transition), box-shadow var(--transition);
}
.industry-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.industry-img {
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3.5rem;
}
.industry-corporate { background: linear-gradient(135deg, #0D1B4B, #162362); }
.industry-healthcare { background: linear-gradient(135deg, #0f766e, #14b8a6); }
.industry-industrial { background: linear-gradient(135deg, #92400e, #d97706); }
.industry-service    { background: linear-gradient(135deg, #1e40af, #3b82f6); }
.industry-body { padding: 20px; }
.industry-body h3 { font-size: 1rem; font-weight: 700; color: var(--navy); margin-bottom: 8px; }
.industry-body p { font-size: .875rem; color: var(--gray-600); line-height: 1.55; }

/* ================================================================
   HOW IT WORKS
   ================================================================ */
.how-section { background: var(--gray-50); }
.steps-row {
  display: flex;
  align-items: flex-start;
  gap: 0;
}
.step-card {
  flex: 1;
  text-align: center;
  padding: 36px 24px;
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  position: relative;
}
.step-number {
  font-size: 3rem;
  font-weight: 900;
  color: var(--gray-200);
  line-height: 1;
  margin-bottom: 8px;
}
.step-icon { font-size: 2rem; margin-bottom: 12px; }
.step-card h3 { font-size: 1.0625rem; font-weight: 700; color: var(--navy); margin-bottom: 10px; }
.step-card p { font-size: .875rem; color: var(--gray-600); line-height: 1.6; margin-bottom: 16px; }
.step-time {
  display: inline-block;
  background: rgba(232,48,43,.1);
  color: var(--red);
  font-size: .75rem;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 999px;
}
.step-connector {
  flex-shrink: 0;
  width: 48px;
  height: 2px;
  background: linear-gradient(90deg, var(--red), var(--orange));
  align-self: center;
  position: relative;
  top: -20px;
}

/* ================================================================
   QUOTE
   ================================================================ */
.quote-section { background: var(--navy); }
.quote-inner { text-align: center; max-width: 760px; margin: 0 auto; }
.big-quote { font-size: 8rem; color: var(--gold); opacity: .3; line-height: .5; margin-bottom: 16px; font-family: Georgia, serif; }
blockquote { font-size: clamp(1.125rem, 2.5vw, 1.5rem); color: var(--white); font-style: italic; line-height: 1.6; margin-bottom: 24px; }
cite { font-size: .9rem; color: rgba(255,255,255,.55); font-style: normal; font-weight: 600; }

/* ================================================================
   PRICING
   ================================================================ */
.pricing-section { background: var(--white); }
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: stretch;
}
.pricing-card {
  border-radius: var(--radius-lg);
  padding: 36px 28px;
  border: 2px solid var(--gray-200);
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
}
.pricing-card--featured {
  border-color: var(--red);
  box-shadow: 0 0 0 4px rgba(232,48,43,.08), var(--shadow-lg);
  transform: scale(1.03);
}
.pricing-badge-top {
  position: absolute;
  top: -16px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--red);
  color: var(--white);
  font-size: .75rem;
  font-weight: 700;
  padding: 6px 18px;
  border-radius: 999px;
  white-space: nowrap;
}
.pricing-tier { font-size: 1.25rem; font-weight: 800; color: var(--navy); }
.pricing-employees { font-size: .875rem; color: var(--gray-400); font-weight: 500; margin-bottom: 8px; }
.pricing-price { font-size: 2rem; font-weight: 900; color: var(--navy); margin-bottom: 8px; }
.pricing-features { list-style: none; display: flex; flex-direction: column; gap: 10px; flex: 1; margin-bottom: 24px; }
.pricing-features li { font-size: .9rem; color: var(--gray-600); }

/* ================================================================
   FAQ
   ================================================================ */
.faq-section { background: var(--gray-50); }
.faq-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  max-width: 1000px;
  margin: 0 auto;
}
.faq-item {
  background: var(--white);
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: box-shadow var(--transition), border-color var(--transition);
}
.faq-item.open {
  border-color: var(--navy);
  box-shadow: var(--shadow-md);
}
.faq-question {
  width: 100%;
  background: none;
  border: none;
  padding: 20px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-sans);
  font-size: .95rem;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.4;
}
.faq-chevron {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--gray-100);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .7rem;
  color: var(--navy);
  transition: transform var(--transition), background var(--transition);
}
.faq-item.open .faq-chevron {
  transform: rotate(180deg);
  background: var(--navy);
  color: var(--white);
}
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s cubic-bezier(.4,0,.2,1);
}
.faq-answer-inner {
  padding: 0 24px 20px;
  font-size: .9rem;
  color: var(--gray-600);
  line-height: 1.7;
}
@media (max-width: 700px) {
  .faq-grid { grid-template-columns: 1fr; }
}

/* ================================================================
   CONTACT FORM
   ================================================================ */
.contact-section { background: var(--gray-50); }
.contact-inner {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 72px;
  align-items: flex-start;
}
.contact-benefits { display: flex; flex-direction: column; gap: 14px; margin-top: 32px; }
.cb-item {
  display: flex;
  gap: 12px;
  align-items: center;
  font-size: .9375rem;
  font-weight: 600;
  color: var(--navy);
}
.cb-item span { color: var(--red); font-weight: 700; font-size: 1.1rem; }

.contact-form { background: var(--white); border-radius: var(--radius-xl); padding: 40px; box-shadow: var(--shadow-lg); display: flex; flex-direction: column; gap: 20px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-group label { font-size: .8125rem; font-weight: 600; color: var(--navy); }
.form-group input,
.form-group select,
.form-group textarea {
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-sm);
  padding: 11px 14px;
  font-size: .9375rem;
  color: var(--gray-800);
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition);
  background: var(--white);
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(13,27,75,.1);
}
.form-group textarea { resize: vertical; }
.form-disclaimer { font-size: .8rem; color: var(--gray-400); text-align: center; }

/* "Or email us directly" — the low-friction alternative to the demo form,
   repeated at each point where a CTA sends visitors to #contact. */
.email-direct {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: .875rem;
  color: var(--gray-600);
}
.email-direct a { color: var(--red); font-weight: 600; }
.email-direct a:hover { color: var(--red-dark); text-decoration: underline; }
.email-direct--on-dark { color: rgba(255,255,255,.65); justify-content: flex-start; }
.email-direct--on-dark a { color: var(--banana); }
.email-direct--on-dark a:hover { color: var(--gold); }
.email-direct--hero { margin: -34px 0 40px; }
.email-direct--pricing { margin-top: 32px; }
.email-direct--features { margin-top: 36px; }
.email-direct--contact { justify-content: flex-start; margin-top: 24px; }

/* ================================================================
   FOOTER
   ================================================================ */
.footer { background: var(--navy); padding: 72px 0 0; }
.footer-inner {
  display: grid;
  grid-template-columns: 1.5fr 2fr;
  gap: 64px;
  padding-bottom: 56px;
}
.footer-logo { width: 64px; height: 64px; object-fit: contain; border-radius: 50%; margin-bottom: 14px; }
.footer-tagline { font-size: 1rem; font-weight: 700; color: var(--gold); margin-bottom: 8px; }
.footer-desc { font-size: .875rem; color: rgba(255,255,255,.5); line-height: 1.6; max-width: 280px; }
/* Three columns since the demo-readiness sweep (2026-09-06) removed the
   dead placeholder links (About Us, Careers, Blog, Help Center, …). */
.footer-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.footer-col { display: flex; flex-direction: column; gap: 12px; }
.footer-col h4 { font-size: .8125rem; font-weight: 700; color: rgba(255,255,255,.4); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 4px; }
.footer-col a { font-size: .875rem; color: rgba(255,255,255,.65); transition: color var(--transition); }
.footer-col a:hover { color: var(--white); }
/* Slightly smaller than its siblings so the address fits the narrow footer
   column on one line; the <wbr> in the markup lets it break after the "@"
   rather than mid-domain when the column gets tighter. */
.footer-col a.footer-email { color: var(--banana); font-weight: 600; font-size: .78rem; }
.footer-col a.footer-email:hover { color: var(--white); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.1); padding: 20px 0; }
.footer-bottom-inner { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; }
.footer-bottom p { font-size: .8rem; color: rgba(255,255,255,.35); }
.footer-bottom a { color: rgba(255,255,255,.5); transition: color var(--transition); }
.footer-bottom a:hover { color: var(--white); }

/* ================================================================
   LOGIN PAGE
   ================================================================ */
.login-page {
  min-height: 100vh;
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.login-card {
  background: var(--white);
  border-radius: var(--radius-xl);
  padding: 48px 40px;
  width: 100%;
  max-width: 420px;
  box-shadow: var(--shadow-xl);
  text-align: center;
}
.login-logo { width: 80px; height: 80px; margin: 0 auto 16px; border-radius: 50%; }
.login-title { font-size: 1.625rem; font-weight: 800; color: var(--navy); margin-bottom: 6px; }
.login-subtitle { font-size: .9rem; color: var(--gray-600); margin-bottom: 32px; }
.login-form { display: flex; flex-direction: column; gap: 18px; text-align: left; }
.login-divider { display: flex; align-items: center; gap: 12px; margin: 8px 0; }
.login-divider::before, .login-divider::after { content: ''; flex: 1; height: 1px; background: var(--gray-200); }
.login-divider span { font-size: .75rem; color: var(--gray-400); }
.login-footer { margin-top: 24px; font-size: .85rem; color: var(--gray-400); }
.login-footer a { color: var(--red); font-weight: 600; }

/* ================================================================
   EMPLOYEE DASHBOARD
   ================================================================ */
.dashboard-layout {
  display: flex;
  min-height: 100vh;
  padding-top: 96px;
}
.app-navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 96px;
  background: var(--navy);
  display: flex;
  align-items: center;
  padding: 0 24px;
  gap: 16px;
  z-index: 100;
  box-shadow: var(--shadow-md);
}
.app-nav-logo { display: flex; align-items: center; gap: 10px; }
.app-nav-logo img { width: 72px; height: 72px; border-radius: 50%; object-fit: contain; background: #fff; padding: 3.5px; box-sizing: border-box; box-shadow: 0 2px 10px rgba(0,0,0,.25); }
.app-nav-logo span { font-size: 1rem; font-weight: 800; color: var(--white); }
.app-nav-right { margin-left: auto; display: flex; align-items: center; gap: 16px; }

/* Always-visible Sign Out button in the portal top nav */
.nav-signout {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: var(--radius-md);
  font-size: .85rem;
  font-weight: 700;
  color: var(--white);
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .38);
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
}
.nav-signout:hover {
  background: rgba(255, 255, 255, .14);
  border-color: rgba(255, 255, 255, .7);
  color: var(--white);
}

/* ---- Portal-wide top nav tabs ---- */
.portal-nav-tabs {
  display: flex;
  align-items: stretch;
  gap: 2px;
  flex: 1;
  margin-left: 24px;
  height: 96px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.portal-nav-tabs::-webkit-scrollbar { display: none; }
.portal-nav-tab {
  display: flex;
  align-items: center;
  /* 13px, not 16. BL-147: with nine admin tabs the bar needed a ~1500px window
     before the "More" button was cut off; this brings it down to ~1440, which
     covers a 15-inch laptop and any external monitor. Visually near-identical,
     and it costs the employee and employer bars (7 tabs) nothing. */
  padding: 0 13px;
  font-size: .82rem;
  font-weight: 600;
  color: rgba(255,255,255,.6);
  white-space: nowrap;
  border-bottom: 3px solid transparent;
  transition: color var(--transition), border-color var(--transition), background var(--transition);
  text-decoration: none;
}
.portal-nav-tab:hover { color: var(--white); background: rgba(255,255,255,.07); }
.portal-nav-tab.active { color: var(--white); border-bottom-color: var(--gold); }

/* ---- Admin "More ▾" menu (BL-147) --------------------------------------------
   The admin bar outgrew its width at eleven tabs, with the last few reachable
   only by scrolling sideways and nothing to say they were there. The daily five
   stay as tabs; everything occasional is folded in here by js/main.js.
   On phones this stands down entirely — the "☰" menu below already lists every
   destination flat, so nesting them would only bury them twice. */
.portal-nav-more { position: relative; display: flex; align-items: stretch; }
.portal-nav-more-btn {
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  font-family: inherit;
  cursor: pointer;
}
.portal-nav-more-menu {
  display: none;
  /* Fixed, not absolute. The tab strip scrolls sideways (`overflow-x: auto`),
     which also clips vertically — an absolutely positioned dropdown inside it
     is cut off at the bottom of the bar and never appears. Fixed escapes that
     container; js/main.js sets top/left from the button when it opens. */
  position: fixed;
  top: 96px; left: 0;
  min-width: 210px;
  background: var(--navy);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 6px 0;
  z-index: 200;
}
.portal-nav-more.open .portal-nav-more-menu { display: block; }
.portal-nav-more-menu .portal-nav-tab {
  height: auto;
  padding: 11px 18px;
  border-bottom: none;
  border-left: 3px solid transparent;
}
.portal-nav-more-menu .portal-nav-tab.active {
  border-bottom-color: transparent;
  border-left-color: var(--gold);
  background: rgba(255,255,255,.08);
}
.portal-nav-more-divider { height: 1px; background: rgba(255,255,255,.14); margin: 6px 0; }

/* ---- Portal mobile "☰" menu (button + injected Sign Out hidden on desktop) ---- */
.portal-hamburger { display: none; }
.portal-nav-tab-signout { display: none; }

@media (max-width: 768px) {
  /* Turn the horizontal tab strip into a drop-down list under the bar */
  .portal-nav-tabs {
    display: none;
    position: fixed;
    top: 96px; left: 0; right: 0;
    margin: 0;
    flex: none;
    height: auto;
    max-height: calc(100vh - 96px);
    overflow-y: auto;
    flex-direction: column;
    align-items: stretch;
    background: var(--navy);
    box-shadow: var(--shadow-md);
    padding: 6px 0;
    z-index: 99;
  }
  .app-navbar.portal-nav-open .portal-nav-tabs { display: flex; }
  .portal-nav-tab {
    height: auto;
    padding: 15px 24px;
    font-size: 1rem;
    color: rgba(255,255,255,.85);
    border-bottom: 3px solid transparent;
    border-left: 3px solid transparent;
  }
  .portal-nav-tab.active {
    border-bottom-color: transparent;
    border-left-color: var(--gold);
    background: rgba(255,255,255,.06);
  }
  /* Sign Out lives at the bottom of the menu on phones */
  .portal-nav-tab-signout {
    display: block;
    margin-top: 4px;
    border-top: 1px solid rgba(255,255,255,.12);
    color: #ff9a9a;
  }
  /* Hide the right-side cluster on phones; the menu covers navigation + sign out */
  .app-navbar .app-nav-right { display: none; }

  /* Flatten the "More" menu back out on phones. `display: contents` drops the
     wrapper so its links become ordinary rows of the "☰" list — otherwise the
     occasional destinations would sit behind a menu inside a menu. */
  .portal-nav-more { display: contents; }
  .portal-nav-more-btn { display: none; }
  .portal-nav-more-menu {
    display: block;
    position: static;
    min-width: 0;
    background: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
  }
  .portal-nav-more-menu .portal-nav-tab { padding: 15px 24px; font-size: 1rem; }
  .portal-nav-more-divider { margin: 4px 24px; }

  /* Show the "☰" button, pushed to the far right of the bar */
  .portal-hamburger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    margin-left: auto;
    width: 46px; height: 46px;
    padding: 11px;
    background: transparent;
    border: none;
    cursor: pointer;
  }
  .portal-hamburger span {
    display: block;
    width: 100%; height: 3px;
    background: #fff;
    border-radius: 2px;
    transition: transform .2s ease, opacity .2s ease;
  }
  /* Morph the "☰" into an "✕" while the menu is open */
  .app-navbar.portal-nav-open .portal-hamburger span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .app-navbar.portal-nav-open .portal-hamburger span:nth-child(2) { opacity: 0; }
  .app-navbar.portal-nav-open .portal-hamburger span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
}

.app-nav-tabs { display: flex; gap: 4px; margin-left: 32px; }
.app-nav-tab {
  padding: 8px 20px;
  border-radius: var(--radius-sm);
  font-size: .875rem;
  font-weight: 600;
  color: rgba(255,255,255,.6);
  transition: var(--transition);
  cursor: pointer;
}
.app-nav-tab:hover { color: var(--white); background: rgba(255,255,255,.1); }
.app-nav-tab.active { background: var(--red); color: var(--white); }

.app-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--navy);
  font-size: .8rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Chat dashboard */
.chat-dashboard { display: flex; flex: 1; overflow: hidden; }
.chat-dash-sidebar {
  width: 220px;
  background: var(--gray-50);
  border-right: 1px solid var(--gray-200);
  padding: 16px 0;
  overflow-y: auto;
  flex-shrink: 0;
}
.dash-sidebar-header { padding: 0 16px 12px; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--gray-400); }
.dash-sidebar-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  font-size: .875rem;
  font-weight: 500;
  color: var(--gray-600);
  cursor: pointer;
  transition: background var(--transition);
}
.dash-sidebar-item:hover { background: var(--gray-200); }
.dash-sidebar-item.active { background: var(--navy); color: var(--white); font-weight: 700; }
.dash-sidebar-item .badge { margin-left: auto; background: var(--red); color: var(--white); border-radius: 999px; font-size: .65rem; font-weight: 700; padding: 1px 6px; }

.chat-dash-main { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.chat-dash-header {
  padding: 16px 24px;
  border-bottom: 1px solid var(--gray-200);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.chat-dash-header h2 { font-size: 1rem; font-weight: 700; color: var(--navy); }
.chat-dash-header small { font-size: .8rem; color: var(--gray-400); }
.chat-dash-feed { flex: 1; overflow-y: auto; padding: 24px; display: flex; flex-direction: column; gap: 20px; }

.post-card { background: var(--white); border-radius: var(--radius-lg); padding: 20px; box-shadow: var(--shadow-sm); border: 1px solid var(--gray-200); }
.post-header { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.post-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--navy); color: var(--white); font-size: .8rem; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.post-meta strong { display: block; font-size: .9rem; font-weight: 700; color: var(--navy); }
.post-meta span { font-size: .75rem; color: var(--gray-400); }
.post-channel { margin-left: auto; font-size: .7rem; font-weight: 600; background: rgba(13,27,75,.08); color: var(--navy); padding: 3px 10px; border-radius: 999px; }
.post-body { font-size: .9375rem; color: var(--gray-800); line-height: 1.65; margin-bottom: 14px; }
.post-image { border-radius: var(--radius-md); overflow: hidden; margin-bottom: 14px; }
.post-image img { width: 100%; }
.post-actions { display: flex; gap: 8px; align-items: center; border-top: 1px solid var(--gray-100); padding-top: 12px; }
.emoji-btn {
  background: var(--gray-100);
  border: none;
  border-radius: 999px;
  padding: 6px 12px;
  font-size: .8rem;
  font-weight: 600;
  color: var(--gray-600);
  cursor: pointer;
  transition: background var(--transition);
  display: flex;
  align-items: center;
  gap: 4px;
}
.emoji-btn:hover { background: var(--gray-200); }
.emoji-btn.active { background: rgba(232,48,43,.1); color: var(--red); }
.comment-btn { background: none; border: none; font-size: .8rem; color: var(--gray-400); font-weight: 600; cursor: pointer; margin-left: auto; }
.comment-btn:hover { color: var(--navy); }

.post-composer {
  padding: 16px 24px;
  border-bottom: 1px solid var(--gray-200);
  display: flex;
  gap: 12px;
  align-items: flex-end;
  background: var(--white);
}
.composer-input {
  flex: 1;
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  font-size: .9rem;
  resize: none;
  outline: none;
  font-family: inherit;
  color: var(--gray-800);
  min-height: 44px;
  max-height: 120px;
}
.composer-input:focus { border-color: var(--navy); box-shadow: 0 0 0 3px rgba(13,27,75,.08); }
.composer-actions { display: flex; gap: 8px; }

/* Education dashboard */
.edu-dashboard { flex: 1; padding: 32px; overflow-y: auto; }
.edu-dash-header { margin-bottom: 28px; }
.edu-dash-header h2 { font-size: 1.5rem; font-weight: 800; color: var(--navy); margin-bottom: 6px; }
.edu-dash-header p { font-size: .9rem; color: var(--gray-600); }
.edu-search-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--white);
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  margin-bottom: 32px;
  box-shadow: var(--shadow-sm);
}
.edu-search-bar input { flex: 1; border: none; outline: none; font-size: 1rem; color: var(--gray-800); font-family: inherit; }
.edu-cats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.edu-cat-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--gray-200);
  cursor: pointer;
  transition: transform var(--transition), box-shadow var(--transition);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.edu-cat-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.edu-cat-card-icon { font-size: 2rem; }
.edu-cat-card h3 { font-size: 1rem; font-weight: 700; color: var(--navy); }
.edu-cat-card p { font-size: .8125rem; color: var(--gray-600); }
.edu-cat-card-meta { font-size: .75rem; color: var(--gray-400); font-weight: 500; margin-top: auto; }
.edu-new-badge { background: var(--red); color: var(--white); font-size: .65rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; margin-left: 6px; }

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width: 1024px) {
  .features-grid { grid-template-columns: repeat(2, 1fr); }
  .industries-grid { grid-template-columns: repeat(2, 1fr); }
  .pricing-grid { grid-template-columns: 1fr; }
  .pricing-card--featured { transform: none; }
  .steps-row { flex-direction: column; gap: 16px; }
  .step-connector { width: 2px; height: 32px; align-self: center; }
  .edu-cats-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .section { padding: 64px 0; }
  .hero { min-height: unset; padding-bottom: 48px; }
  .hero-content { grid-template-columns: 1fr; text-align: center; gap: 24px; padding-top: 40px; padding-bottom: 40px; }
  .hero-subtitle { margin-left: auto; margin-right: auto; }
  .hero-ctas { justify-content: center; }
  .email-direct--on-dark { justify-content: center; }
  .hero-quicknav { justify-content: center; flex-wrap: wrap; gap: 12px; }
  .hero-qnav-item { padding: 6px 16px 6px 0; }
  .qnav-divider { display: none; }
  /* Mobile hero: logo + feature cards sit between the subtitle and the buttons.
     .hero-text is flattened so its children and .hero-visual share one ordered column. */
  .hero-content { gap: 0; }
  .hero-text { display: contents; }
  .hero-title { order: 1; }
  .hero-subtitle { order: 2; }
  .hero-visual { order: 3; flex-direction: column; gap: 12px; margin: 4px 0 36px; }
  .hero-ctas { order: 4; }
  .email-direct--hero { order: 5; }
  .hero-quicknav { order: 6; }
  .hero-logo-img { width: 200px; height: 200px; border-width: 8px; margin-bottom: 8px; }
  .hero-card { position: static; width: 100%; max-width: 300px; min-width: 0; text-align: left; }
  .chat-inner { grid-template-columns: 1fr; gap: 40px; }
  .education-inner { grid-template-columns: 1fr; gap: 40px; }
  .contact-inner { grid-template-columns: 1fr; gap: 40px; }
  .footer-inner { grid-template-columns: 1fr; gap: 40px; }
  .footer-links { grid-template-columns: repeat(2, 1fr); }
  .form-row { grid-template-columns: 1fr; }
  .nav-links { display: none; flex-direction: column; position: fixed; top: 96px; left: 0; right: 0; background: var(--white); padding: 20px 24px; gap: 12px; border-bottom: 1px solid var(--gray-200); box-shadow: var(--shadow-md); }
  .nav-links.open { display: flex; }
  .hamburger { display: flex; }
  .features-grid { grid-template-columns: 1fr; }
  .industries-grid { grid-template-columns: 1fr; }
  .tagline-inner { gap: 10px; }
  .dot { display: none; }
  .edu-cats-grid { grid-template-columns: 1fr; }
  .app-nav-tabs { display: none; }
  .chat-dash-sidebar { display: none; }
  .contact-form { padding: 24px; }
}

/* ================================================================
   EDU SUBPAGES — shared layout
   ================================================================ */
.edu-subpage-main {
  padding-top: 96px;
  min-height: 100vh;
  background: var(--gray-50);
}

/* ── Education section ribbon nav (inside navbar) ─────────── */
.edu-nav-tabs {
  flex: 1;
  display: flex;
  align-items: stretch;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  margin-left: 16px;
  height: 96px;
}
.edu-nav-tabs::-webkit-scrollbar { display: none; }
.edu-nav-tab {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 18px;
  font-size: .82rem;
  font-weight: 600;
  color: #ffffff;
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 3px solid transparent;
  transition: border-color .2s, opacity .2s;
  flex-shrink: 0;
  opacity: .75;
}
.edu-nav-tab:hover { opacity: 1; }
.edu-nav-tab.active {
  color: #ffffff;
  font-weight: 800;
  border-bottom-color: var(--gold);
  opacity: 1;
}
.edu-nav-tab .rt-icon { font-size: .95rem; }

/* Sub-navbar breadcrumb bar */
.edu-sub-topbar {
  background: var(--white);
  border-bottom: 1px solid var(--gray-200);
  padding: 10px 32px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .82rem;
  color: var(--gray-400);
}
.edu-sub-topbar a { color: var(--navy); font-weight: 600; transition: color var(--transition); }
.edu-sub-topbar a:hover { color: var(--red); }
.edu-sub-topbar .crumb-sep { color: var(--gray-300); }

/* Section hero banner */
.edu-sub-hero {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 36px 32px;
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%);
  color: var(--white);
}
.edu-sub-hero-icon {
  font-size: 3rem;
  width: 72px;
  height: 72px;
  background: rgba(255,255,255,.12);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.edu-sub-hero h1 { font-size: 1.5rem; font-weight: 800; margin-bottom: 6px; }
.edu-sub-hero p { font-size: .9rem; color: rgba(255,255,255,.7); line-height: 1.55; }
.edu-sub-hero-meta { display: flex; gap: 20px; margin-top: 12px; }
.edu-sub-hero-meta span {
  font-size: .75rem;
  font-weight: 600;
  background: rgba(255,255,255,.12);
  padding: 4px 12px;
  border-radius: 999px;
}

/* Content sections */
.edu-content-area { padding: 32px; max-width: 1100px; margin: 0 auto; }

/* ── Two-column layout with sidebar ── */
.edu-page-layout {
  display: grid;
  grid-template-columns: 1fr 288px;
  gap: 28px;
  padding: 32px;
  max-width: 1240px;
  margin: 0 auto;
  align-items: start;
}
.edu-page-main { min-width: 0; }
.edu-page-sidebar {
  position: sticky;
  top: 112px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* ── Newsletter sidebar widget ── */
.newsletter-widget {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.newsletter-widget-header {
  background: linear-gradient(135deg, var(--navy), #1e3a8a);
  color: var(--white);
  padding: 16px 20px;
}
.newsletter-widget-title { font-size: .9rem; font-weight: 800; margin-bottom: 2px; }
.newsletter-widget-sub { font-size: .72rem; opacity: .7; }
.newsletter-latest {
  padding: 16px 20px;
  border-bottom: 1px solid var(--gray-100);
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  display: block;
  transition: background var(--transition);
}
.newsletter-latest:hover { background: var(--gray-50); }
.newsletter-latest-badge {
  font-size: .65rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .06em; color: #059669; margin-bottom: 5px;
}
.newsletter-latest-title { font-size: .9rem; font-weight: 800; color: var(--navy); margin-bottom: 5px; line-height: 1.35; }
.newsletter-latest-desc { font-size: .77rem; color: var(--gray-500); line-height: 1.45; margin-bottom: 8px; }
.newsletter-latest-read { font-size: .77rem; font-weight: 700; color: #059669; }
.newsletter-past-list { padding: 8px 20px 4px; }
.newsletter-past-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 0; border-bottom: 1px solid var(--gray-100);
  text-decoration: none; color: inherit; cursor: pointer;
  transition: opacity var(--transition);
}
.newsletter-past-item:last-child { border-bottom: none; }
.newsletter-past-item:hover { opacity: .75; }
.newsletter-past-icon {
  font-size: 1.1rem; width: 34px; height: 34px;
  background: var(--gray-100); border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.newsletter-past-month { font-size: .82rem; font-weight: 700; color: var(--navy); }
.newsletter-past-topics { font-size: .7rem; color: var(--gray-500); margin-top: 1px; }
.newsletter-view-all {
  display: block; text-align: center; padding: 12px 20px;
  font-size: .78rem; font-weight: 700; color: #059669;
  text-decoration: none; border-top: 1px solid var(--gray-100);
  transition: background var(--transition);
}
.newsletter-view-all:hover { background: var(--gray-50); }

/* ── Newsletter CTA strip ── */
.newsletter-cta-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  background: linear-gradient(135deg, var(--navy) 0%, #1e3a8a 100%);
  border-radius: var(--radius-xl);
  padding: 12px 20px;
  margin-bottom: 32px;
  border-left: 5px solid #fde68a;
  box-shadow: 0 4px 20px rgba(15,23,42,0.18);
}
.newsletter-cta-strip span {
  font-size: .95rem;
  color: rgba(255,255,255,.92);
  font-weight: 700;
  line-height: 1.45;
  flex: 1;
}
.newsletter-cta-strip a {
  display: inline-block;
  background: #fde68a;
  color: var(--navy);
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  font-size: .82rem;
  padding: 10px 20px;
  border-radius: var(--radius-lg);
  transition: background .15s;
}
.newsletter-cta-strip a:hover { background: #fbbf24; text-decoration: none; }
@media (max-width: 600px) {
  .newsletter-cta-strip { flex-direction: column; align-items: flex-start; gap: 14px; }
}

/* ── Newsletter archive cards ── */
.newsletter-archive-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.newsletter-issue-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xl);
  overflow: hidden;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  display: flex; flex-direction: column;
  transition: transform var(--transition), box-shadow var(--transition);
}
.newsletter-issue-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.newsletter-issue-cover {
  height: 96px;
  display: flex; align-items: center; justify-content: center; flex-direction: column;
  gap: 4px; color: white;
}
.newsletter-issue-month { font-size: 1rem; font-weight: 800; }
.newsletter-issue-year { font-size: .72rem; opacity: .75; font-weight: 600; }
.newsletter-issue-body { padding: 14px 16px 16px; flex: 1; display: flex; flex-direction: column; gap: 8px; }
.newsletter-issue-headline { font-size: .88rem; font-weight: 800; color: var(--navy); line-height: 1.3; }
.newsletter-issue-topics { display: flex; flex-wrap: wrap; gap: 4px; }
.newsletter-issue-topic {
  font-size: .65rem; font-weight: 700; padding: 2px 8px;
  border-radius: 999px; background: var(--gray-100); color: var(--gray-600);
}
.newsletter-issue-read { font-size: .77rem; font-weight: 700; color: #059669; margin-top: auto; padding-top: 8px; }

@media (max-width: 900px) {
  .edu-page-layout { grid-template-columns: 1fr; }
  .edu-page-sidebar { position: static; }
  .newsletter-archive-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .edu-page-layout { padding: 16px; }
  .newsletter-archive-grid { grid-template-columns: 1fr; }
}
.edu-content-section { margin-bottom: 40px; }
.edu-section-title {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--navy);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.edu-section-title::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--gray-200);
}

/* ---- Video Grid ---- */
.video-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.video-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--gray-200);
  cursor: pointer;
  transition: transform var(--transition), box-shadow var(--transition);
}
.video-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.video-thumb {
  position: relative;
  height: 130px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.video-thumb-icon { font-size: 2.5rem; opacity: .6; }
.play-btn-overlay {
  position: absolute;
  width: 48px;
  height: 48px;
  background: rgba(255,255,255,.95);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  color: var(--navy);
  box-shadow: 0 4px 16px rgba(0,0,0,.25);
  transition: transform var(--transition);
}
.video-card:hover .play-btn-overlay { transform: scale(1.1); }
.video-duration-badge {
  position: absolute;
  bottom: 8px;
  right: 10px;
  background: rgba(0,0,0,.7);
  color: var(--white);
  font-size: .65rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
}
.video-meta { padding: 12px 14px 14px; }
.video-meta strong {
  display: block;
  font-size: .875rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 4px;
  line-height: 1.3;
}
.video-meta span { font-size: .75rem; color: var(--gray-400); }

/* Gradient thumbnails per topic */
.vthumb-blue    { background: linear-gradient(135deg, #0D1B4B, #1e40af); }
.vthumb-red     { background: linear-gradient(135deg, #9f1239, #E8302B); }
.vthumb-orange  { background: linear-gradient(135deg, #92400e, #E8612B); }
.vthumb-green   { background: linear-gradient(135deg, #064e3b, #059669); }
.vthumb-purple  { background: linear-gradient(135deg, #4c1d95, #7c3aed); }
.vthumb-teal    { background: linear-gradient(135deg, #134e4a, #0d9488); }
.vthumb-gold    { background: linear-gradient(135deg, #78350f, #F5A623); }
.vthumb-slate   { background: linear-gradient(135deg, #1e293b, #475569); }

/* ---- Video Modal ---- */
.video-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.75);
  z-index: 500;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.video-modal-overlay.open { display: flex; }
.video-modal-box {
  background: var(--white);
  border-radius: var(--radius-xl);
  width: 100%;
  max-width: 720px;
  overflow: hidden;
  box-shadow: var(--shadow-xl);
}
.video-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--gray-200);
}
.video-modal-header h3 { font-size: 1rem; font-weight: 700; color: var(--navy); }
.video-modal-close {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--gray-100);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .9rem;
  cursor: pointer;
  border: none;
  color: var(--gray-600);
  transition: background var(--transition);
}
.video-modal-close:hover { background: var(--gray-200); }
.video-player-frame {
  background: #000;
  aspect-ratio: 16/9;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  color: rgba(255,255,255,.5);
  font-size: .875rem;
}
.video-player-frame .big-play {
  width: 64px;
  height: 64px;
  background: rgba(255,255,255,.15);
  border: 2px solid rgba(255,255,255,.3);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: var(--white);
}
.video-modal-footer {
  padding: 12px 20px;
  font-size: .8rem;
  color: var(--gray-400);
  border-top: 1px solid var(--gray-100);
}

/* ---- Document Library ---- */
.doc-library { display: flex; flex-direction: column; gap: 4px; }
.doc-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  background: var(--white);
  border-radius: var(--radius-md);
  border: 1px solid var(--gray-200);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.doc-item:hover { border-color: var(--navy); box-shadow: var(--shadow-sm); }
.doc-icon { font-size: 1.5rem; flex-shrink: 0; }
.doc-info { flex: 1; }
.doc-info strong { display: block; font-size: .875rem; font-weight: 700; color: var(--navy); }
.doc-info span { font-size: .75rem; color: var(--gray-400); }
.doc-badge {
  font-size: .65rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(232,48,43,.1);
  color: var(--red);
}
.doc-download {
  background: var(--gray-100);
  border: none;
  border-radius: var(--radius-sm);
  padding: 6px 14px;
  font-size: .78rem;
  font-weight: 600;
  color: var(--navy);
  cursor: pointer;
  transition: background var(--transition);
}
.doc-download:hover { background: var(--navy); color: var(--white); }

/* ---- Resource Cards ---- */
.resource-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.resource-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 20px;
  border: 1px solid var(--gray-200);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 8px;
  cursor: pointer;
  transition: transform var(--transition), box-shadow var(--transition);
}
.resource-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.resource-card-icon { font-size: 1.75rem; }
.resource-card h4 { font-size: .9rem; font-weight: 700; color: var(--navy); }
.resource-card p { font-size: .8rem; color: var(--gray-600); line-height: 1.5; flex: 1; }
.resource-card-action { font-size: .78rem; font-weight: 600; color: var(--red); margin-top: 4px; }

/* ---- Info Banner ---- */
.info-banner {
  border-radius: var(--radius-md);
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 24px;
  font-size: .875rem;
}
.info-banner.info-gold { background: rgba(245,166,35,.12); border: 1px solid rgba(245,166,35,.3); color: #92400e; }
.info-banner.info-red  { background: rgba(232,48,43,.08); border: 1px solid rgba(232,48,43,.2); color: var(--red-dark); }
.info-banner.info-green { background: rgba(5,150,105,.08); border: 1px solid rgba(5,150,105,.2); color: #064e3b; }
.info-banner.info-navy { background: rgba(13,27,75,.06); border: 1px solid rgba(13,27,75,.15); color: var(--navy); }
.info-banner strong { font-weight: 700; }
.info-banner-icon { font-size: 1.25rem; flex-shrink: 0; }

/* ---- Contact Cards ---- */
.contact-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.contact-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 20px;
  border: 1px solid var(--gray-200);
  box-shadow: var(--shadow-sm);
}
.contact-card-logo { font-size: 2rem; margin-bottom: 10px; }
.contact-card h4 { font-size: .9rem; font-weight: 700; color: var(--navy); margin-bottom: 6px; }
.contact-card p { font-size: .8rem; color: var(--gray-600); margin-bottom: 4px; }
.contact-card a { font-size: .8rem; color: var(--red); font-weight: 600; }

/* ---- Cert Tracker ---- */
.cert-table { width: 100%; border-collapse: collapse; background: var(--white); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); }
.cert-table th { background: var(--navy); color: var(--white); font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding: 12px 16px; text-align: left; }
.cert-table td { padding: 12px 16px; font-size: .875rem; border-bottom: 1px solid var(--gray-100); color: var(--gray-800); }
.cert-table tr:last-child td { border-bottom: none; }
.cert-status { display: inline-flex; align-items: center; gap: 5px; font-size: .75rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; }
.cert-status.complete { background: rgba(5,150,105,.1); color: #065f46; }
.cert-status.pending  { background: rgba(245,166,35,.15); color: #92400e; }
.cert-status.overdue  { background: rgba(232,48,43,.1); color: var(--red-dark); }

/* ---- Quick Action Button Row ---- */
.quick-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 24px; }
.quick-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--white);
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-md);
  padding: 10px 18px;
  font-size: .875rem;
  font-weight: 600;
  color: var(--navy);
  cursor: pointer;
  transition: border-color var(--transition), box-shadow var(--transition);
  font-family: inherit;
}
.quick-action-btn:hover { border-color: var(--navy); box-shadow: var(--shadow-sm); }
.quick-action-btn.btn-red { background: var(--red); border-color: var(--red); color: var(--white); }
.quick-action-btn.btn-red:hover { background: var(--red-dark); }

/* ---- Demo Banner ---- */
.demo-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2000;
  height: 36px;
  background: linear-gradient(90deg, #7c3aed 0%, #5b21b6 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .02em;
}
/* HR previewing the employee portal (BL-127). Same bar as the demo banner so
   the offset rules already in place still apply — but YELLOW on BLACK, not the
   navy it started as: against a navy navbar that read as barely a shade off and
   you had to be looking for it. This bar exists to be noticed, so it uses the
   one colour nothing else in the portal uses at full strength. */
.preview-banner {
  background: #FFD400;
  color: #111827;
  font-weight: 800;
}
/* The child elements default to white-on-dark — every one has to be flipped,
   or it disappears against the yellow. */
.preview-banner .demo-banner-sep { color: #111827; opacity: .45; }
.preview-banner .demo-banner-exit {
  white-space: nowrap;
  background: rgba(0,0,0,.08);
  border: 1px solid rgba(0,0,0,.35);
  color: #111827;
  font-weight: 800;
}
.preview-banner .demo-banner-exit:hover { background: rgba(0,0,0,.18); }

.demo-banner-dot {
  width: 7px;
  height: 7px;
  background: #a78bfa;
  border-radius: 50%;
  animation: demoPulse 1.6s ease-in-out infinite;
}
@keyframes demoPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .5; transform: scale(.75); }
}
.demo-banner-sep {
  opacity: .4;
  font-weight: 400;
}
.demo-banner-exit {
  background: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.3);
  color: #fff;
  border-radius: 999px;
  padding: 2px 12px;
  font-size: .72rem;
  font-weight: 700;
  cursor: pointer;
  transition: background var(--transition);
  font-family: inherit;
}
.demo-banner-exit:hover { background: rgba(255,255,255,.28); }
/* At phone widths the bar's text wraps; let the bar grow instead of clipping.
   Scripts that offset the navbar under this bar measure its real height
   (initDemoMode's syncOffset) rather than assuming the one-line 36px. */
@media (max-width: 700px) {
  .demo-banner { height: auto; min-height: 36px; flex-wrap: wrap; padding: 5px 12px; row-gap: 2px; column-gap: 8px; }
}

/* ── Newsletter Link Tiles (used across all pages) ── */
.nl-link-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.nl-link-card { display: flex; gap: 14px; background: var(--white); border: 2px solid var(--gray-200); border-radius: var(--radius-xl); padding: 16px; text-decoration: none; color: inherit; transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition); align-items: flex-start; }
.nl-link-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: #0891b2; }
.nl-link-icon { width: 48px; height: 48px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; font-size: 1.4rem; flex-shrink: 0; }
.nl-link-title { font-size: .9rem; font-weight: 800; color: var(--navy); margin-bottom: 4px; }
.nl-link-desc { font-size: .78rem; color: var(--gray-600); line-height: 1.5; margin-bottom: 6px; }
.nl-link-cta { font-size: .75rem; font-weight: 700; color: #0891b2; }
@media (max-width: 700px) { .nl-link-grid { grid-template-columns: 1fr; } }

/* Newsletter tile art (2026-09-14): the home / My Benefits / Wellbeing /
   Retirement newsletter tiles wear the current issue's cover picture,
   sized LARGER than the Newsletters page's own 100px tile covers (her
   call). js/main.js paints the picture at view time onto elements marked
   data-nl-art and adds nl-has-art; without a picture the brand gradient
   stays and nothing here changes a page that has not opted in. */
.newsletter-issue-cover.nl-has-art { height: 150px; }
.nl-link-card.nl-art-card { flex-direction: column; align-items: stretch; padding: 0 0 16px; overflow: hidden; }
.nl-link-cover { height: 150px; background-size: cover; background-position: center; flex-shrink: 0; }
.nl-art-card .nl-link-row { display: flex; gap: 14px; align-items: flex-start; padding: 14px 16px 0; }

/* Subpage responsive */
@media (max-width: 900px) {
  .video-grid { grid-template-columns: repeat(2, 1fr); }
  .resource-card-grid { grid-template-columns: repeat(2, 1fr); }
  .contact-card-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .edu-content-area { padding: 16px; }
  .video-grid { grid-template-columns: 1fr; }
  .resource-card-grid { grid-template-columns: 1fr; }
  .contact-card-grid { grid-template-columns: 1fr; }
  .edu-sub-hero { padding: 24px 16px; }
  .edu-sub-topbar { padding: 10px 16px; }
}

/* ================================================================
   PORTAL SEARCH  (shared — auto-mounted on employee pages, BL-178)
   Moved here verbatim from dashboard.html's inline styles when the
   search box went portal-wide; the trigger and overlay are injected
   by js/main.js on every employee page with the portal top bar.
   ================================================================ */
.search-trigger {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--gray-100); border: 1.5px solid transparent;
  border-radius: 999px; padding: 7px 14px; cursor: pointer;
  font-family: inherit; font-size: .82rem; color: var(--gray-400);
  font-weight: 600; transition: border-color var(--transition), background var(--transition);
}
.search-trigger:hover { border-color: var(--gray-200); background: var(--white); }
.search-trigger .search-kbd {
  font-size: .68rem; font-weight: 700; color: var(--gray-400);
  background: var(--white); border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm); padding: 1px 6px; margin-left: 2px;
}
@media (max-width: 720px) { .search-trigger .search-trigger-label, .search-trigger .search-kbd { display: none; } .search-trigger { padding: 8px; } }

.gsearch-overlay {
  position: fixed; inset: 0; background: rgba(15,23,42,.5);
  z-index: 4200; display: none; justify-content: center; align-items: flex-start;
  padding: 80px 20px 20px;
}
.gsearch-overlay.open { display: flex; }
.gsearch-box {
  background: var(--white); border-radius: var(--radius-xl); width: 100%;
  max-width: 560px; box-shadow: 0 25px 60px rgba(0,0,0,.3);
  overflow: hidden; display: flex; flex-direction: column; max-height: 70vh;
}
.gsearch-input-row {
  display: flex; align-items: center; gap: 12px; padding: 16px 20px;
  border-bottom: 1px solid var(--gray-100);
}
.gsearch-input-row .gsearch-icon { font-size: 1.1rem; color: var(--gray-400); }
.gsearch-input-row input {
  flex: 1; border: none; outline: none; font-family: inherit;
  font-size: 1rem; color: var(--gray-800); background: none;
}
.gsearch-esc {
  font-size: .68rem; font-weight: 700; color: var(--gray-400);
  background: var(--gray-100); border-radius: var(--radius-sm); padding: 3px 8px;
}
.gsearch-results { overflow-y: auto; padding: 8px 0 10px; }
.gsearch-group-label {
  font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
  color: var(--gray-400); padding: 12px 20px 4px;
}
.gsearch-result {
  display: flex; align-items: center; gap: 12px; padding: 9px 20px;
  cursor: pointer; text-decoration: none; color: inherit;
  border-left: 3px solid transparent; transition: background var(--transition);
}
.gsearch-result:hover, .gsearch-result.active { background: var(--gray-50); border-left-color: #0d9488; }
.gsearch-result-icon {
  width: 34px; height: 34px; border-radius: var(--radius-md); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 1rem;
  background: var(--gray-100);
}
.gsearch-result-text { flex: 1; min-width: 0; }
.gsearch-result-title { font-size: .88rem; font-weight: 600; color: var(--navy); }
.gsearch-result-title mark { background: #fef08a; color: inherit; border-radius: 2px; padding: 0 1px; }
.gsearch-result-sub { font-size: .74rem; color: var(--gray-400); margin-top: 1px; }
.gsearch-result-tag { font-size: .62rem; font-weight: 700; color: #0d9488; text-transform: uppercase; letter-spacing: .03em; flex-shrink: 0; }
.gsearch-empty { text-align: center; padding: 40px 24px; color: var(--gray-400); font-size: .85rem; line-height: 1.5; }
.gsearch-empty .gsearch-empty-icon { font-size: 1.8rem; display: block; margin-bottom: 8px; }

/* The phone menu's Search row: on phones the top bar's right cluster (the
   search trigger included) is hidden, so the "☰" menu carries its own Search
   row — injected by js/main.js, styled like the other menu rows, and never
   shown on desktop. */
.portal-nav-tab-search {
  display: none;
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  border-left: 3px solid transparent;
  font-family: inherit;
  text-align: left;
  width: 100%;
  cursor: pointer;
}
@media (max-width: 768px) {
  .app-navbar .portal-nav-tabs .portal-nav-tab-search { display: block; }
}

/* Arriving from a section search result (?sc-go=): the matched heading is lit
   briefly so the eye lands on the right section of a long page. The
   scroll-margin keeps it clear of the fixed top bar when scrolled into view. */
.sc-go-flash {
  animation: sc-go-flash 2.6s ease-out;
  border-radius: 6px;
  scroll-margin-top: 96px;
}
@keyframes sc-go-flash {
  0%   { background: #fef08a; box-shadow: 0 0 0 6px #fef08a; }
  70%  { background: #fef08a; box-shadow: 0 0 0 6px #fef08a; }
  100% { background: transparent; box-shadow: 0 0 0 6px transparent; }
}

/* ================================================================
   NOTIFICATIONS CENTER  (shared — auto-mounted on employee pages)
   ================================================================ */
.notif-menu { position: relative; }
.notif-bell {
  position: relative; background: none; border: none; cursor: pointer;
  font-size: 1.15rem; line-height: 1; padding: 6px; border-radius: var(--radius-md);
  transition: background var(--transition);
}
.notif-bell:hover { background: var(--gray-100); }
.notif-badge {
  position: absolute; top: -2px; right: -2px;
  background: var(--red); color: #fff; font-size: .6rem; font-weight: 700;
  min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--white); box-sizing: content-box;
}
.notif-badge.hidden { display: none; }
.notif-panel {
  position: absolute; top: calc(100% + 10px); right: 0;
  width: 360px; max-width: calc(100vw - 32px);
  background: var(--white); border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  display: none; z-index: 300; overflow: hidden;
}
.notif-panel.open { display: block; }
.notif-panel-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px 0; gap: 8px;
}
.notif-panel-title { font-size: 1rem; font-weight: 800; color: var(--navy); }
.notif-markall {
  background: none; border: none; font-size: .72rem; font-weight: 700;
  color: #0d9488; cursor: pointer; font-family: inherit; padding: 4px 6px;
  border-radius: var(--radius-sm); transition: background var(--transition);
}
.notif-markall:hover { background: #f0fdfa; }
.notif-tabs { display: flex; gap: 4px; padding: 8px 12px 0; }
.notif-tab {
  flex: 1; background: none; border: none; cursor: pointer; font-family: inherit;
  font-size: .8rem; font-weight: 700; color: var(--gray-400);
  padding: 8px 6px; border-bottom: 2px solid transparent; transition: all var(--transition);
}
.notif-tab:hover { color: var(--navy); }
.notif-tab.active { color: var(--navy); border-bottom-color: #0d9488; }
.notif-tab .notif-tab-count {
  font-size: .62rem; background: var(--red); color: #fff; font-weight: 700;
  border-radius: 999px; padding: 1px 6px; margin-left: 4px; vertical-align: middle;
}
.notif-tab .notif-tab-count.hidden { display: none; }
.notif-tab-body { max-height: 380px; overflow-y: auto; padding: 4px 0 8px; }
.notif-item {
  display: flex; gap: 10px; padding: 11px 16px; cursor: pointer;
  border-left: 3px solid transparent; transition: background var(--transition);
  text-decoration: none; color: inherit;
}
.notif-item:hover { background: var(--gray-50); }
.notif-item.unread { background: #f0fdfa; border-left-color: #0d9488; }
.notif-item-icon {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: .95rem;
  background: var(--gray-100);
}
.notif-item.unread .notif-item-icon { background: #ccfbf1; }
.notif-item-content { flex: 1; min-width: 0; }
.notif-item-text { font-size: .82rem; color: var(--gray-800); line-height: 1.4; }
.notif-item-text strong { color: var(--navy); font-weight: 700; }
.notif-item-meta {
  display: flex; align-items: center; gap: 6px; margin-top: 3px;
  font-size: .68rem; color: var(--gray-400); font-weight: 600;
}
.notif-item-cat {
  text-transform: uppercase; letter-spacing: .03em; font-size: .62rem;
  color: #0d9488; font-weight: 700;
}
.notif-empty {
  text-align: center; padding: 36px 24px; color: var(--gray-400);
  font-size: .82rem; line-height: 1.5;
}
.notif-empty .notif-empty-icon { font-size: 1.8rem; display: block; margin-bottom: 8px; }

/* Fallback toast for pages without their own showToast */
.sc-notif-toast {
  position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%) translateY(70px);
  background: var(--navy); color: #fff; padding: 10px 22px;
  border-radius: 99px; font-size: .85rem; font-weight: 600;
  z-index: 3000; transition: transform .3s ease; pointer-events: none; white-space: nowrap;
}
.sc-notif-toast.show { transform: translateX(-50%) translateY(0); }

/* Save/bookmark button on the wellbeing articles (MVP-20 / BL-024).
   Mounted into .well-hero by js/main.js, which is why it lives here rather
   than in each of the 26 articles' own <style> block. Styled to match
   .well-hero-nav a, since it sits on the same dark hero. */
.sc-save-btn {
  margin-left: auto; align-self: flex-start; flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .78rem; font-weight: 700; font-family: inherit; color: #fff;
  background: rgba(255,255,255,.18); border: 1.5px solid rgba(255,255,255,.3);
  border-radius: 99px; padding: 7px 15px; cursor: pointer;
  transition: background .15s, border-color .15s, opacity .15s;
}
.sc-save-btn:hover:not(:disabled) { background: rgba(255,255,255,.3); border-color: rgba(255,255,255,.5); }
.sc-save-btn:disabled { opacity: .45; cursor: default; }
.sc-save-btn.is-saved { background: #fff; border-color: #fff; color: #4338ca; }
@media (max-width: 700px) {
  .sc-save-btn { margin-left: 0; align-self: stretch; justify-content: center; }
}

/* The employer task card shell (BL-062). Defined ONCE here — it used to be
   defined separately (and differently) inside employer-tasks.html and
   employer-home.html; the DaySquad Admin chose the Tasks page look for both
   (2026-09-08): only clickable cards lift on hover, locked cards get a
   slightly gray background. Per-page layout spacing (stacking margins, grid
   gaps) stays with each page — only the look lives here. */
.worktask-card { background: #fff; border-radius: var(--radius-xl); border: 1px solid var(--gray-200); box-shadow: var(--shadow-sm); padding: 20px 24px; display: flex; flex-direction: column; gap: 13px; position: relative; overflow: hidden; transition: transform var(--transition), box-shadow var(--transition); }
.worktask-card.clickable { cursor: pointer; }
.worktask-card.clickable:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.worktask-card.is-locked { background: #fcfcfd; }