/* Overrides to ensure page text color in light theme */
body:not(.dark) .list-item,
body:not(.dark) .list-item a,
body:not(.dark) .list-item h2,
body:not(.dark) .list-item p {
  color: var(--text) !important;
}

body:not(.dark) p.text-sm.text-gray-600 { color: var(--text) !important; }

/* Also ensure table cells that used white text show correctly in light mode */
body:not(.dark) td[style*="rgba(255,255,255"] { color: var(--text) !important; }

/* Hide visual top navigation in light mode while keeping it available to screen readers */
body:not(.dark) .nav {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Keep header background consistent in light mode (match About/Index/Contact)
   Consolidated for `.site-header` and `header.fixed` to avoid duplicate blocks. */
body:not(.dark) .site-header,
body:not(.dark) header.fixed {
  background: #ffffff !important;
  border-bottom: 1px solid rgba(16,24,40,.04) !important;
  position: relative !important;
  z-index: 60 !important;
  color: var(--text) !important;
}

/* Make sure nav links remain visible on overridden header */
body:not(.dark) header a, body:not(.dark) header .nav a {
  color: var(--text) !important;
}

/* System menu dropdown styles */
.system-menu-btn{ background:transparent;border:0;color:inherit;cursor:pointer }
.system-menu-dropdown a:hover{ background: rgba(0,0,0,0.04); border-radius:4px }

@media (max-width:640px){
  .system-path{ font-size:13px }
  .system-menu-btn{ padding:6px }
}

/* Ensure the hamburger/menu icon has consistent color in light and dark themes */
.system-menu-wrap, .system-path { color: inherit; }
.system-menu-btn { color: var(--agentic-menu-color, inherit); }
body.dark .system-menu-btn { color: #e6edf3 !important; }
body:not(.dark) .system-menu-btn { color: #0a0e1a !important; }

/* Dark theme adjustments for the compact menu */
body.dark .system-menu-dropdown{
  background: #0b1220 !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  box-shadow: 0 6px 18px rgba(2,6,23,0.6) !important;
}
body.dark .system-menu-dropdown a{
  color: #e6edf3 !important;
}
body.dark .system-menu-dropdown a:hover{
  background: rgba(255,255,255,0.03) !important;
}
body.dark .system-menu-btn{ color: inherit }

/* Accessibility focus styles */
.system-menu-btn:focus{ outline: 2px solid rgba(59,130,246,0.35); outline-offset:2px }
.system-menu-dropdown a:focus{ outline: 2px solid rgba(59,130,246,0.18); border-radius:4px }

/* Hero bento primary: use background image with overlay for readability */
.bento-card.bento-primary{
  position:relative;
  overflow:hidden;
  background-repeat:no-repeat;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  padding:18px;
  min-height:120px;
  color: var(--text) !important;
}

/* Ensure primary card infographic appears above the text */
.bento-card.bento-primary .infographic-img{ order:0 }
.bento-card.bento-primary::before{
  content:'';
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(2,6,23,0.06) 0%, rgba(2,6,23,0.12) 100%); /* subtle tone, keep image bright */
  pointer-events:none;
  z-index:1; /* overlay below image and below text */
}
.bento-card.bento-primary h2,
.bento-card.bento-primary p{
  position:relative; /* sit above overlay */
  z-index:3;
}

/* Ensure the headline+excerpt stay together in the text column */
.bento-card.bento-primary .bento-primary-content{
  display:flex;
  flex-direction:column;
  gap:8px;
  align-items:flex-start;
  text-align:left;
  margin-bottom:12px;
  z-index:3;
}

/* Shared infographic image styles for primary and visual cards */
.bento-card.bento-primary .bento-hero-img,
.bento-card.visual-card .visual-figure img,
.infographic-img {
  position:relative;
  width:100%;
  height:140px; /* uniform visual height */
  max-width:420px; /* uniform max width */
  object-fit:cover; /* crop consistently */
  display:block;
  z-index:2;
  border-radius:8px;
  box-shadow:0 14px 36px rgba(2,6,23,0.45);
}

@media (min-width:1200px){
  .bento-card.bento-primary{ grid-template-columns: minmax(260px,520px) 1fr; }
  .infographic-img, .bento-card.visual-card .visual-figure img, .bento-card.bento-primary .bento-hero-img{ max-width:520px; height:160px; }
}

/* Fallback small-screen adjustments */
@media(max-width:640px){
  /* mobile: use cover so the image fills the card on small screens */
  .bento-card.bento-primary{ min-height:84px; padding:10px; grid-template-columns: 1fr; }
  .bento-card.bento-primary h2{ font-size:1.125rem }
  .bento-card.bento-primary .bento-primary-content{ grid-column:auto }
}
@media(max-width:640px){
  .bento-card.bento-primary .bento-hero-img{ display:none }
  .bento-card.visual-card .visual-figure img{ display:none }
}

/* Make primary card typography match visual card baseline */
.bento-card.bento-primary h2,
.bento-card.bento-primary p{
  position:relative; /* sit above overlay */
  z-index:3;
}
}
.bento-card.bento-primary p{
  font-size:.95rem;
  line-height:1.25;
  color:var(--muted);
  font-weight:400;
}

@media (min-width:1400px){
  .bento-card.bento-primary{ min-height:160px; padding:24px }
  .bento-card.bento-primary .bento-hero-img{ max-width:920px }
  .bento-card.bento-primary h2{ font-size:1.55rem }
}

/* Style the visual card to match primary card aesthetics */
.bento-card.visual-card{
  position:relative;
  overflow:hidden;
  padding:18px;
  min-height:120px;
  border-radius:10px;
  background:linear-gradient(180deg, rgba(2,6,23,0.02), rgba(2,6,23,0.04));
  box-shadow:0 12px 30px rgba(2,6,23,0.35);
  color:inherit;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
}
.bento-card.visual-card::before{
  content:'';
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(2,6,23,0.02) 0%, rgba(2,6,23,0.06) 100%);
  pointer-events:none;
  z-index:1;
}
.bento-card.visual-card .visual-figure{ width:100%; display:flex; flex-direction:column; align-items:center; gap:.5rem }
.bento-card.visual-card .visual-figure img{ display:block; width:100%; max-width:520px; height:auto; border-radius:8px; box-shadow:0 12px 28px rgba(2,6,23,0.45); z-index:2 }
.bento-card.visual-card .vis-title{ position:relative; z-index:3; margin-bottom:8px; text-align:center }
.bento-card.visual-card .vis-caption{ position:relative; z-index:3; margin-top:10px; color:var(--muted); font-size:.95rem; text-align:center }

/* Compact bento grid: use a responsive CSS grid for consistent layout */
.bento-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 24px;
  align-items: stretch;
  background: none !important;
}
.bento-card {
  padding: 24px;
  min-height: 340px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: var(--card, #181c24);
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}
.bento-card.playbook-card {
  padding: 32px;
  min-height: 420px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  text-align: left;
  background: linear-gradient(180deg, rgba(11,22,35,0.32), rgba(11,22,35,0.16));
  border-left: 4px solid var(--clr-accent, #0b63d6);
}

/* Make the playbook scroller span full width below the main grid on larger screens */
.playbook-row{ margin-top: 12px }
@media (min-width: 900px){
  .playbook-row .playbook-card{ grid-column: 1 / -1; max-width: 1100px; margin: 0 auto; }
}
.bento-card .playbook-list li{ margin-bottom:4px }
.bento-card .vis-title{ margin-bottom:4px }

/* Playbook card height adjustments: compact and top-aligned */
/* Stronger, higher-specificity rules to ensure compact playbook card */
.hero .bento-card.playbook-card{
  /* Ensure playbook remains prominent when placed inside hero grid */
  min-height:420px !important;
  padding:32px !important;
}

.bento-card.playbook-card .playbook-header h3{ font-size:1.35rem; margin:0 0 12px }
.bento-card.playbook-card .playbook-list li{ font-size:1.05rem; margin-bottom:10px }

@media (min-width:900px){
  /* If playbook is inside the main grid, make it span two columns for emphasis */
  .bento-grid > .playbook-card{ grid-column: span 2; }
}

/* Playbook controls: softer, pill-shaped buttons with hover/focus */
.playbook-header{ display:flex; align-items:center; gap:12px; width:100% }
.playbook-header h3{ margin:0 }
.playbook-controls{ margin-left:auto; display:flex; gap:10px }
.playbook-controls .btn{
  padding:.45rem .85rem;
  border-radius:999px;
  box-shadow:0 4px 14px rgba(2,6,23,0.25);
  transition:transform .12s ease, box-shadow .12s ease, background-color .12s ease;
  font-weight:600;
}
.playbook-controls .btn .icon{ margin-right:8px; vertical-align:middle; display:inline-block }
.playbook-controls .btn .btn-label{ vertical-align:middle }
.playbook-controls .btn svg{ color:inherit }
.playbook-controls .btn:hover{ transform:translateY(-2px); box-shadow:0 8px 26px rgba(2,6,23,0.28) }
.playbook-controls .btn:active{ transform:translateY(0) }
.playbook-controls .btn:focus{ outline:2px solid rgba(79,70,229,0.18); outline-offset:3px }
.playbook-controls .btn.btn-outline{
  background: rgba(255,255,255,0.04);
  color:var(--clr-accent, #0b63d6);
  border:1px solid rgba(255,255,255,0.06);
}
.playbook-controls .btn.btn-outline:hover{ background: rgba(255,255,255,0.06) }

@media(max-width:640px){
  .playbook-controls{ margin-top:8px; margin-left:0 }
  .playbook-header{ flex-direction:column; align-items:flex-start }
}

/* Reduce font-size by ~30% for the safety test line for visual de-emphasis */
.playbook-list li.playbook-item--safety{ font-size:0.7em; line-height:1.25; color:var(--muted) }

@media(max-width:640px){
  .hero .bento-card.playbook-card{ min-height:44px !important; padding:6px !important }
}

/* Soften legal disclaimer: slightly smaller and lower opacity for muted presentation */
.disclaimer{
  font-size:0.85rem !important;
  color:var(--muted) !important;
  opacity:0.72 !important;
  line-height:1.25 !important;
}
body.dark .disclaimer{ opacity:0.84 !important; color:var(--muted-dark) !important }