/* Native system font stack — renders instantly from the operating system,
   so there is NO network fetch and NO font-swap flicker on reload.
   Reused via var(--db-font) throughout the stylesheet. */

:root {
  --db-font: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Liberation Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --db-font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', 'Courier New', monospace;
  --db-brand-blue: #1447E6;
  --db-brand-cyan: #1DE8FF;
  --db-brand-navy: #0B1E5C;
  --db-primary: #1447E6;
  --db-primary-light: #E8EDFD;
  --db-primary-dark: #0A2F99;
  --db-purple: #0D9488;
  --db-purple-light: #CCFBF1;
  --db-purple-dark: #0F766E;
  --db-amber: #BA7517;
  --db-amber-light: #FAEEDA;
  --db-coral: #D85A30;
  --db-coral-light: #FAECE7;
  --db-text: #0B1E5C;
  --db-text-secondary: #4a5275;
  --db-text-tertiary: #8a8a8a;
  --db-border: #e2e6ef;
  --db-border-light: #eef1f6;
  --db-bg: #ffffff;
  --db-bg-secondary: #f5f7fc;
  --db-bg-tertiary: #ebeff8;
  --db-radius-sm: 6px;
  --db-radius-md: 10px;
  --db-radius-lg: 14px;
  --db-shadow-sm: 0 1px 3px rgba(0,0,0,0.04);
  --db-shadow-md: 0 2px 8px rgba(0,0,0,0.06);
  --db-max-width: 960px;
  --db-admin-color: #1447E6;
  --db-admin-bg: #E8EDFD;
  --db-user-color: #0D9488;
  --db-user-bg: #CCFBF1;
  --db-instructor-color: #BA7517;
  --db-instructor-bg: #FAEEDA;
  --db-instructor-dark: #7B4E0F;
  --db-student-color: #D85A30;
  --db-student-bg: #FAECE7;
  --db-student-dark: #92391C;
}

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

body {
  font-family: var(--db-font);
  color: var(--db-text);
  background: var(--db-bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }

/* ========== HEADER / NAVBAR ========== */
.db-header {
  border-bottom: 1px solid var(--db-border);
  background: var(--db-bg);
  position: sticky;
  top: 0;
  z-index: 100;
}
.db-header-inner {
  max-width: var(--db-max-width);
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.db-logo {
  display: flex;
  align-items: center;
  gap: 18px;
  font-size: 0; /* hides redundant "DrillBit" text node — wordmark is in the logo PNG */
  color: var(--db-brand-navy);
  line-height: 1;
}
.db-logo-icon {
  width: 110px;
  height: 28px;
  border-radius: 0;
  background: url('../assets/drillbit-logo-tight.svg') left center/contain no-repeat;
  flex-shrink: 0;
}
.db-logo-icon svg { display: none; }
.db-logo-label {
  display: inline-flex;
  align-items: center;
  height: 26px;
  font-size: 12px;
  font-weight: 500;
  color: var(--db-text-secondary);
  background: var(--db-bg-tertiary);
  padding: 0 12px;
  border-radius: 20px;
  margin-left: 0;
  line-height: 1;
}
.db-header-nav {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 18px;
}

/* Visible-on-navbar links: Home (first-of-type) AND the active product */
.db-header-nav a:first-of-type,
.db-header-nav a.active {
  position: static;
  font-size: 14px;
  color: var(--db-text-secondary);
  background: transparent;
  padding: 0;
  border: none;
  box-shadow: none;
  opacity: 1;
  visibility: visible;
  transform: none;
  min-width: 0;
  white-space: nowrap;
  transition: color 0.15s;
  order: 0;
}
.db-header-nav a:first-of-type { order: 1; }
.db-header-nav a.active { order: 2; }

.db-header-nav a:first-of-type:hover,
.db-header-nav a.active:hover {
  color: var(--db-text);
  background: transparent;
}
.db-header-nav a:first-of-type.active,
.db-header-nav a.active {
  color: var(--db-primary);
  font-weight: 500;
}

/* Hamburger trigger — sits to the right of Home and the active link */
.db-header-nav::after {
  content: "";
  display: inline-block;
  width: 40px;
  height: 38px;
  border-radius: 8px;
  cursor: pointer;
  background-color: transparent;
  background-image: linear-gradient(var(--db-text-secondary), var(--db-text-secondary)),
                    linear-gradient(var(--db-text-secondary), var(--db-text-secondary)),
                    linear-gradient(var(--db-text-secondary), var(--db-text-secondary));
  background-size: 20px 2px, 20px 2px, 20px 2px;
  background-repeat: no-repeat;
  background-position: 50% 12px, 50% 50%, 50% calc(100% - 12px);
  transition: background-color 0.15s ease;
  order: 99;
}
.db-header-nav:hover::after,
.db-header-nav:focus-within::after {
  background-color: var(--db-bg-secondary);
  background-image: linear-gradient(var(--db-primary), var(--db-primary)),
                    linear-gradient(var(--db-primary), var(--db-primary)),
                    linear-gradient(var(--db-primary), var(--db-primary));
}

/* All non-first, non-active links collapse into the dropdown.
   Anchor to the navbar's right edge — same edge the hamburger sits on —
   so the panel never extends past the icon. */
.db-header-nav a:not(:first-of-type):not(.active) {
  position: absolute;
  right: 0;
  left: auto;
  display: block;
  font-size: 14px;
  color: var(--db-text-secondary);
  background: var(--db-bg);
  padding: 10px 18px;
  white-space: nowrap;
  text-align: left;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.18s ease, visibility 0.18s ease, transform 0.18s ease, color 0.15s, background 0.15s;
  z-index: 120;
  width: 220px;
  min-width: 0;
  box-sizing: border-box;
  border-left: 1px solid var(--db-border);
  border-right: 1px solid var(--db-border);
  border-bottom: 1px solid var(--db-border-light);
  order: 100;
}
/* Stack collapsed items as a single rounded card.
   We can't predict which sibling indexes are collapsed, so each one targets
   itself based on whether it has any non-first/non-active predecessors. */
.db-header-nav a:not(:first-of-type):not(.active):nth-of-type(2),
.db-header-nav a:not(:first-of-type):not(.active):nth-of-type(3),
.db-header-nav a:not(:first-of-type):not(.active):nth-of-type(4),
.db-header-nav a:not(:first-of-type):not(.active):nth-of-type(5) {
  /* default: stacked positions filled in below per-index */
}
/* Position each *displayed* dropdown item using sibling counting.
   The trick: count preceding hidden items to compute vertical offset. */
.db-header-nav a:not(:first-of-type):not(.active) {
  /* default top — overridden when a previous sibling is also hidden */
  top: calc(100% + 10px);
  border-top: 1px solid var(--db-border);
  border-top-left-radius: var(--db-radius-md);
  border-top-right-radius: var(--db-radius-md);
}
/* If a hidden item has at least one hidden item before it, push it down 40px */
.db-header-nav a:not(:first-of-type):not(.active)
  ~ a:not(:first-of-type):not(.active) {
  top: calc(100% + 10px + 40px);
  border-top: none;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
/* Two predecessors → push 80px */
.db-header-nav a:not(:first-of-type):not(.active)
  ~ a:not(:first-of-type):not(.active)
  ~ a:not(:first-of-type):not(.active) {
  top: calc(100% + 10px + 80px);
}
/* Three predecessors → push 120px */
.db-header-nav a:not(:first-of-type):not(.active)
  ~ a:not(:first-of-type):not(.active)
  ~ a:not(:first-of-type):not(.active)
  ~ a:not(:first-of-type):not(.active) {
  top: calc(100% + 10px + 120px);
}
/* Last hidden item gets the rounded bottom + shadow */
.db-header-nav a:not(:first-of-type):not(.active):last-of-type {
  border-bottom: 1px solid var(--db-border);
  border-bottom-left-radius: var(--db-radius-md);
  border-bottom-right-radius: var(--db-radius-md);
  box-shadow: 0 12px 28px -10px rgba(15, 23, 42, 0.18);
}

.db-header-nav:hover a:not(:first-of-type):not(.active),
.db-header-nav:focus-within a:not(:first-of-type):not(.active) {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.db-header-nav a:not(:first-of-type):not(.active):hover {
  color: var(--db-primary);
  background: var(--db-bg-secondary);
}

/* ========== HERO SECTION ========== */
.db-hero {
  position: relative;
  text-align: center;
  padding: 72px 24px 72px;
  background: linear-gradient(180deg, #f5f8ff 0%, #ecf1fe 60%, #e4ecfd 100%);
  border-bottom: 1px solid var(--db-border-light);
  overflow: hidden;
  transition: padding 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Collapsed hero when user is searching — shrink hero so results are visible
   without scrolling. The kicker, title, subtitle, and popular pills fade out
   and collapse to zero height, leaving only the search bar at the top. */
.db-hero.is-searching {
  padding: 20px 24px 20px;
}
.db-hero.is-searching .db-hero-kicker,
.db-hero.is-searching h1,
.db-hero.is-searching p,
.db-hero.is-searching .db-hero-pills {
  opacity: 0;
  max-height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  pointer-events: none;
  transform: translateY(-8px);
  transition: opacity 0.2s ease, max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              margin 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              padding 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.25s ease;
}
.db-hero .db-hero-kicker,
.db-hero h1,
.db-hero p,
.db-hero .db-hero-pills {
  max-height: 200px;
  transition: opacity 0.25s ease, max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              margin 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              padding 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.25s ease;
}
.db-hero-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.db-hero-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.4;
}
.db-hero-blob-1 {
  width: 380px; height: 380px;
  background: radial-gradient(circle, rgba(20,71,230,0.25), rgba(20,71,230,0));
  top: -120px; left: -100px;
}
.db-hero-blob-2 {
  width: 340px; height: 340px;
  background: radial-gradient(circle, rgba(29,232,255,0.35), rgba(29,232,255,0));
  bottom: -160px; right: -80px;
}
.db-hero-mark {
  position: absolute;
  width: 520px; height: 520px;
  right: -180px;
  top: 50%;
  transform: translateY(-50%);
  background: url('../assets/drillbit-icon.png') center/contain no-repeat;
  opacity: 0.04;
}
.db-hero-inner {
  position: relative;
  z-index: 1;
}
.db-hero-kicker {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  color: var(--db-brand-blue);
  background: rgba(255,255,255,0.7);
  border: 1px solid rgba(20,71,230,0.15);
  padding: 5px 14px;
  border-radius: 20px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  margin-bottom: 18px;
  backdrop-filter: blur(4px);
}
.db-hero h1 {
  font-size: 40px;
  font-weight: 700;
  letter-spacing: -1px;
  margin-bottom: 10px;
  color: var(--db-brand-navy);
  line-height: 1.15;
}
.db-hero p {
  font-size: 16px;
  color: var(--db-text-secondary);
  margin-bottom: 28px;
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
}
.db-hero-pills {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}
.db-hero-pill-label {
  font-size: 13px;
  color: var(--db-text-tertiary);
  margin-right: 2px;
}
.db-hero-pill {
  display: inline-block;
  font-size: 13px;
  color: var(--db-brand-navy);
  background: rgba(255,255,255,0.85);
  border: 1px solid rgba(20,71,230,0.12);
  padding: 6px 14px;
  border-radius: 20px;
  transition: all 0.15s;
  backdrop-filter: blur(4px);
}
.db-hero-pill:hover {
  background: var(--db-brand-blue);
  color: #fff;
  border-color: var(--db-brand-blue);
  transform: translateY(-1px);
}

/* ========== SECTION LABEL ========== */
.db-section-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--db-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-top: 36px;
  margin-bottom: 14px;
}
.db-search {
  position: relative;
  max-width: 540px;
  margin: 0 auto;
}
.db-search input {
  width: 100%;
  padding: 13px 18px 13px 46px;
  font-size: 15px;
  font-family: inherit;
  border: 1px solid var(--db-border);
  border-radius: var(--db-radius-lg);
  background: var(--db-bg);
  color: var(--db-text);
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.db-search input:focus {
  border-color: var(--db-primary);
  box-shadow: 0 0 0 3px rgba(20,71,230,0.15);
}
.db-search input::placeholder { color: var(--db-text-tertiary); }
.db-search-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--db-text-tertiary);
}

/* ========== BREADCRUMBS ========== */
.db-breadcrumb {
  max-width: var(--db-max-width);
  margin: 0 auto;
  padding: 16px 24px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--db-text-tertiary);
  flex-wrap: wrap;
}
.db-breadcrumb a { color: var(--db-text-secondary); transition: color 0.15s; }
.db-breadcrumb a:hover { color: var(--db-primary); }
.db-breadcrumb .sep { font-size: 10px; opacity: 0.5; }
.db-breadcrumb .current { color: var(--db-text); font-weight: 500; }

/* ========== MAIN CONTENT ========== */
.db-main {
  max-width: var(--db-max-width);
  margin: 0 auto;
  padding: 0 24px 64px;
}

/* ========== PRODUCT CARDS (Landing) ========== */
.db-products {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 6px;
}
/* Per-variant accent so every hover effect (bar, glow, border, icon ring,
   title, CTA) shares one source of truth — same pattern as feature cards. */
.db-product-card                    { --pc: var(--db-brand-blue); --pc-soft: rgba(20,71,230,0.10);  --pc-bar-end: var(--db-brand-cyan); }
.db-product-card.featured           { --pc: var(--db-brand-blue); --pc-soft: rgba(20,71,230,0.12);  --pc-bar-end: var(--db-brand-cyan); }
.db-product-card.featured-classroom { --pc: #0D9488;              --pc-soft: rgba(13,148,136,0.12); --pc-bar-end: #34D399; }
.db-product-card.featured-personal  { --pc: #c2410c;              --pc-soft: rgba(194,65,12,0.12);  --pc-bar-end: #f59e0b; }
.db-product-card.featured-lms       { --pc: #7c3aed;              --pc-soft: rgba(124,58,237,0.12); --pc-bar-end: #a855f7; }

.db-product-card {
  position: relative;
  background: var(--db-bg);
  border: 1px solid var(--db-border);
  border-radius: var(--db-radius-lg);
  padding: 28px 24px 24px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  isolation: isolate;
  transition: border-color 0.25s ease, box-shadow 0.3s ease, transform 0.25s ease;
}
/* Idle tint per variant — keeps brand identity visible without a static top bar */
.db-product-card.featured           { border-color: rgba(20,71,230,0.25);  box-shadow: 0 4px 24px rgba(20,71,230,0.08); }
.db-product-card.featured-classroom { border-color: rgba(13,148,136,0.25); box-shadow: 0 4px 24px rgba(13,148,136,0.08); }
.db-product-card.featured-personal  { border-color: rgba(194,65,12,0.25);  box-shadow: 0 4px 24px rgba(194,65,12,0.08); }
.db-product-card.featured-lms       { border-color: rgba(124,58,237,0.25); box-shadow: 0 4px 24px rgba(124,58,237,0.08); }

/* Direct children sit above the ::after glow but below the ::before bar */
.db-product-card > * { position: relative; z-index: 1; }

/* Top accent bar — slides in from the left on hover */
.db-product-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--pc), var(--pc-bar-end) 60%, transparent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 2;
}
.db-product-card:hover::before { transform: scaleX(1); }

/* Soft colored glow that fades in behind the card content on hover */
.db-product-card::after {
  content: '';
  position: absolute;
  top: -40%;
  right: -30%;
  width: 60%;
  height: 140%;
  background: radial-gradient(circle, var(--pc-soft) 0%, transparent 65%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
  z-index: 0;
}
.db-product-card:hover::after { opacity: 1; }

/* Lift + accent border + tinted shadow on hover */
.db-product-card:hover {
  border-color: var(--pc);
  box-shadow: 0 12px 28px -10px var(--pc-soft), 0 6px 14px -6px rgba(11,30,92,0.08);
  transform: translateY(-4px);
}

.db-product-card.disabled {
  cursor: not-allowed;
  background: var(--db-bg-secondary);
  border-style: dashed;
}
.db-product-card.disabled::before,
.db-product-card.disabled::after { display: none; }
.db-product-card.disabled:hover {
  border-color: var(--db-border);
  transform: none;
  box-shadow: none;
}
.db-product-card.disabled h3,
.db-product-card.disabled p,
.db-product-card.disabled .icon {
  opacity: 0.55;
}
.db-card-status {
  position: absolute;
  top: 16px;
  right: 16px;
  font-size: 10px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 20px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.db-card-status.live {
  background: #E7F7EF;
  color: #0F7A47;
}
.db-card-status.live::before {
  content: '';
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #1BB563;
  margin-right: 6px;
  vertical-align: 1px;
  box-shadow: 0 0 0 2px rgba(27,181,99,0.25);
  animation: dbPulse 2s ease-in-out infinite;
}
@keyframes dbPulse {
  0%, 100% { box-shadow: 0 0 0 2px rgba(27,181,99,0.25); }
  50% { box-shadow: 0 0 0 5px rgba(27,181,99,0); }
}
.db-card-status.soon {
  background: var(--db-bg-tertiary);
  color: var(--db-text-secondary);
}
.db-product-card .icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  position: relative;
  transition: border-radius 0.35s ease, box-shadow 0.35s ease;
}
.db-product-card .icon svg {
  display: block;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  will-change: transform;
}
/* Pulsing ring around the icon — idle hidden, amplified on hover */
.db-product-card .icon::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: inherit;
  border: 2px solid var(--pc);
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 0.3s ease, transform 0.3s ease, border-radius 0.35s ease;
}
.db-product-card:hover .icon {
  border-radius: 50%;
  box-shadow: 0 8px 20px -6px var(--pc-soft);
}
.db-product-card:hover .icon svg {
  transform: scale(1.12);
}
.db-product-card:hover .icon::before {
  opacity: 0.35;
  transform: scale(1.15);
  animation: db-product-ring 1.6s ease-out infinite;
}
.db-product-card.disabled:hover .icon { border-radius: 14px; box-shadow: none; }
.db-product-card.disabled:hover .icon svg { transform: none; }
.db-product-card.disabled:hover .icon::before { opacity: 0; animation: none; }
@keyframes db-product-ring {
  0%   { opacity: 0.35; transform: scale(1);    }
  70%  { opacity: 0;    transform: scale(1.35); }
  100% { opacity: 0;    transform: scale(1.35); }
}
.db-product-card .icon.pro { background: var(--db-admin-bg); color: var(--db-admin-color); }
.db-product-card .icon.extreme { background: var(--db-user-bg); color: var(--db-user-color); }
.db-product-card .icon.personal { background: #fff4e6; color: #c2410c; }
.db-product-card .icon.lms { background: #f3e8ff; color: #7c3aed; }
.db-product-card h3 {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--db-brand-navy);
  transition: color 0.25s ease;
}
.db-product-card:hover h3 { color: var(--pc); }
.db-product-card.disabled:hover h3 { color: var(--db-brand-navy); }
.db-product-card p { font-size: 14px; color: var(--db-text-secondary); line-height: 1.55; }
.db-product-card .meta {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--db-border-light);
  font-size: 12px;
  color: var(--db-text-tertiary);
  font-weight: 500;
}
.db-card-cta {
  margin-top: 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--pc, var(--db-brand-blue));
  display: inline-flex;
  align-items: center;
  gap: 6px;
  position: relative;
  align-self: flex-start;
  transition: gap 0.25s ease;
}
/* Underline grows from the left on hover */
.db-card-cta::before {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  height: 1.5px;
  width: 100%;
  background: var(--pc, var(--db-brand-blue));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.db-product-card:hover .db-card-cta::before { transform: scaleX(1); }
.db-card-cta svg { transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1); }
.db-product-card:hover .db-card-cta { gap: 10px; }
.db-product-card:hover .db-card-cta svg { transform: translateX(4px); }
.db-product-card.disabled:hover .db-card-cta::before { transform: scaleX(0); }
.db-product-card.disabled:hover .db-card-cta { gap: 6px; }
.db-product-card.disabled:hover .db-card-cta svg { transform: none; }

/* Respect reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .db-product-card,
  .db-product-card::before,
  .db-product-card::after,
  .db-product-card .icon,
  .db-product-card .icon svg,
  .db-product-card .icon::before,
  .db-card-cta,
  .db-card-cta::before,
  .db-card-cta svg { transition: none; }
  .db-product-card:hover { transform: none; }
  .db-product-card:hover .icon { transform: none; }
  .db-product-card:hover .icon::before { animation: none; }
}

/* ========== SECTION HEADERS ========== */
.db-section-header {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--db-border-light);
  margin-bottom: 28px;
  margin-top: 8px;
}
.db-section-header .icon {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.db-section-header .icon.admin { background: var(--db-admin-bg); color: var(--db-admin-color); }
.db-section-header .icon.user { background: var(--db-user-bg); color: var(--db-user-color); }
.db-section-header .icon.instructor { background: var(--db-instructor-bg); color: var(--db-instructor-color); }
.db-section-header .icon.student { background: var(--db-student-bg); color: var(--db-student-color); }
.db-section-header .icon.lms { background: #f3e8ff; color: #7c3aed; }
.db-section-header h1 { font-size: 24px; font-weight: 600; margin-bottom: 4px; }
.db-section-header p { font-size: 15px; color: var(--db-text-secondary); line-height: 1.5; }

/* ========== BADGES ========== */
.db-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 20px;
  vertical-align: middle;
  margin-left: 8px;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}
.db-badge.admin { background: var(--db-admin-bg); color: var(--db-primary-dark); }
.db-badge.user { background: var(--db-user-bg); color: var(--db-purple-dark); }
.db-badge.instructor { background: var(--db-instructor-bg); color: var(--db-instructor-dark); }
.db-badge.student { background: var(--db-student-bg); color: var(--db-student-dark); }
.db-badge.pro { background: var(--db-admin-bg); color: var(--db-primary-dark); }
.db-badge.extreme { background: var(--db-user-bg); color: var(--db-purple-dark); }

/* Product chip used in search-results & popular-items: small folder icon + label */
.db-prod-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 20px;
  vertical-align: middle;
  margin-left: auto;
  letter-spacing: 0.3px;
  background: #F1F5F9;
  color: #334155;
  border: 1px solid #E2E8F0;
  white-space: nowrap;
}
.db-prod-tag svg { display: block; width: 12px; height: 12px; stroke-width: 2; }
.db-prod-tag.folder-mgmt { background: #FFF7ED; color: #9A3412; border-color: #FED7AA; }
.db-prod-tag.classroom   { background: var(--db-admin-bg); color: var(--db-admin-color); border-color: #C5D2FA; }
.db-prod-tag.personal    { background: #fff4e6; color: #c2410c; border-color: #ffd9b3; }
.db-prod-tag.lms         { background: #f3e8ff; color: #7c3aed; border-color: #ddd6fe; }

/* ========== ROLE TABS ========== */
.db-role-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--db-border);
  margin-bottom: 32px;
}
.db-role-tab {
  padding: 12px 24px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  border: none;
  background: none;
  color: var(--db-text-secondary);
  border-bottom: 2px solid transparent;
  transition: all 0.2s;
  font-family: inherit;
}
.db-role-tab:hover { color: var(--db-text); }
.db-role-tab.active { color: var(--db-primary); border-bottom-color: var(--db-primary); }

/* ========== CATEGORY CARDS GRID ========== */
.db-category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}
.db-category-card {
  background: var(--db-bg);
  border: 1px solid var(--db-border);
  border-radius: var(--db-radius-lg);
  padding: 22px 20px;
  transition: all 0.2s;
  cursor: pointer;
  display: block;
}
.db-category-card:hover {
  border-color: var(--db-border);
  background: var(--db-bg-secondary);
  transform: translateY(-1px);
  box-shadow: var(--db-shadow-sm);
}
.db-category-card .card-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}
.db-category-card .card-icon.admin { background: var(--db-admin-bg); color: var(--db-admin-color); }
.db-category-card .card-icon.user { background: var(--db-user-bg); color: var(--db-user-color); }
.db-category-card .card-icon.instructor { background: var(--db-instructor-bg); color: var(--db-instructor-color); }
.db-category-card .card-icon.student { background: var(--db-student-bg); color: var(--db-student-color); }
.db-category-card .card-icon.lms { background: #f3e8ff; color: #7c3aed; }
.db-category-card h3 { font-size: 15px; font-weight: 500; margin-bottom: 5px; line-height: 1.35; }
.db-category-card p { font-size: 13px; color: var(--db-text-secondary); line-height: 1.5; }
.db-category-card .card-meta {
  margin-top: 12px;
  font-size: 12px;
  color: var(--db-text-tertiary);
}

/* ========== ARTICLE LIST ========== */
.db-article-list { margin-top: 8px; }
.db-article-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 18px;
  border-radius: var(--db-radius-md);
  transition: background 0.15s;
  cursor: pointer;
  border-bottom: 1px solid var(--db-border-light);
}
.db-article-item:last-child { border-bottom: none; }
.db-article-item:hover { background: var(--db-bg-secondary); }
.db-article-item .art-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--db-bg-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--db-text-secondary);
}
.db-article-item h3 { font-size: 15px; font-weight: 500; margin-bottom: 3px; line-height: 1.35; }
.db-article-item p { font-size: 13px; color: var(--db-text-secondary); line-height: 1.5; }
.db-article-item .art-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
  font-size: 12px;
  color: var(--db-text-tertiary);
}
.db-article-item .art-meta .dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--db-text-tertiary);
}

/* ========== ARTICLE CONTENT ========== */
.db-article-content {
  max-width: 760px;
  margin: 0 auto;
  padding: 40px 0 80px;
  --db-read: #243060; /* body reading colour (slightly darker than secondary) */
}

/* Article H1 --------
   NOTE: padding-bottom + generous line-height + overflow:visible is
   required because `-webkit-background-clip: text` on a gradient fill
   clips to the glyph metrics. With a tight line-height, descenders
   (the tails of g, p, y, j) get cropped on some browsers. The extra
   space guarantees descenders stay fully visible. */
.db-article-content h1 {
  font-size: 36px;
  font-weight: 700;
  letter-spacing: -0.8px;
  line-height: 1.3;
  padding-bottom: 6px;
  overflow: visible;
  color: var(--db-brand-navy);
  margin-bottom: 14px;
  background: linear-gradient(90deg, var(--db-brand-navy) 0%, var(--db-brand-blue) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.db-article-content h1 .db-badge {
  -webkit-text-fill-color: initial;
  color: var(--db-primary-dark);
  vertical-align: middle;
  font-size: 11px;
}

.db-article-content .article-meta {
  font-size: 13px;
  color: var(--db-text-tertiary);
  margin-bottom: 32px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.db-article-content .article-meta .dot {
  width: 3px; height: 3px; border-radius: 50%;
  background: var(--db-text-tertiary);
}

/* Intro paragraph (lede) -------- */
.db-article-content > p:first-of-type,
.db-article-content > .db-lede {
  font-size: 17.5px;
  line-height: 1.65;
  color: var(--db-brand-navy);
  font-weight: 400;
  margin-bottom: 28px;
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
}

/* Section headings -------- */
.db-article-content h2 {
  position: relative;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.3px;
  color: var(--db-brand-navy);
  margin: 48px 0 18px;
  padding-left: 16px;
  line-height: 1.25;
}
.db-article-content h2::before {
  content: '';
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 4px;
  border-radius: 4px;
  background: linear-gradient(180deg, var(--db-brand-blue) 0%, var(--db-brand-cyan) 100%);
}
.db-article-content h3 {
  position: relative;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.2px;
  color: var(--db-brand-navy);
  margin: 32px 0 10px;
  padding-left: 12px;
  line-height: 1.35;
}
.db-article-content h3::before {
  content: '';
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 3px;
  border-radius: 3px;
  background: var(--db-brand-blue);
}
.db-article-content h4 {
  font-size: 14px;
  font-weight: 600;
  color: var(--db-text-secondary);
  margin: 22px 0 8px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

/* Body paragraphs -------- */
.db-article-content p {
  font-size: 15.5px;
  line-height: 1.78;
  color: var(--db-read);
  margin-bottom: 18px;
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
  text-justify: inter-word;
}
.db-article-content p strong {
  color: var(--db-brand-navy);
  font-weight: 600;
}
.db-article-content a:not(.db-back):not(.support-materials a) {
  color: var(--db-primary);
  border-bottom: 1px solid rgba(20,71,230,0.25);
  transition: border-color 0.15s, color 0.15s;
}
.db-article-content a:not(.db-back):not(.support-materials a):hover {
  color: var(--db-primary-dark);
  border-bottom-color: var(--db-primary);
}

/* Lists -------- */
.db-article-content ul, .db-article-content ol {
  font-size: 15.5px;
  color: var(--db-read);
  line-height: 1.78;
  margin: 14px 0 22px;
  padding-left: 0;
  list-style: none;
}
.db-article-content li {
  position: relative;
  margin-bottom: 10px;
  padding-left: 32px;
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
}
.db-article-content li p {
  margin-bottom: 8px;
  text-align: justify;
}
.db-article-content li p:last-child { margin-bottom: 0; }

/* Ordered list: blue numbered badges */
.db-article-content ol { counter-reset: db-ol; }
.db-article-content ol > li { counter-increment: db-ol; }
.db-article-content ol > li::before {
  content: counter(db-ol);
  position: absolute;
  left: 0;
  top: 2px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--db-brand-blue) 0%, var(--db-primary-dark) 100%);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 3px rgba(20,71,230,0.3);
  letter-spacing: 0;
}

/* Unordered list: small brand-blue disc — quiet, readable, visually
   subordinate to numbered steps so prose stays primary. Convention used
   by mainstream documentation (Stripe, GitHub, Microsoft Learn, Notion). */
.db-article-content ul {
  padding-left: 0;
}
.db-article-content ul > li {
  padding-left: 22px;
  font-weight: 400;
  color: var(--db-read);
}
.db-article-content ul > li::before {
  content: '';
  position: absolute;
  left: 6px;
  top: 11px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--db-brand-blue);
  box-shadow: none;
  transform: none;
  border: none;
}
/* Strong text inside bullets feels punchier */
.db-article-content ul > li > strong,
.db-article-content ol > li > strong {
  color: var(--db-brand-blue);
  font-weight: 700;
}

/* Nested lists: smaller, lighter disc, reduced indent */
.db-article-content li ul, .db-article-content li ol {
  margin: 8px 0 8px;
}
.db-article-content li ul > li {
  padding-left: 18px;
  font-weight: 400;
}
.db-article-content li ul > li::before {
  top: 12px;
  left: 4px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--db-brand-blue);
  opacity: 0.55;
  box-shadow: none;
  transform: none;
  border: none;
}

/* Callouts -------- */
.db-article-content .callout {
  position: relative;
  background: linear-gradient(135deg, #eef3ff 0%, #e0e9ff 100%);
  border: 1px solid rgba(20,71,230,0.22);
  border-left: 5px solid var(--db-brand-blue);
  padding: 20px 24px 20px 68px;
  border-radius: var(--db-radius-md);
  margin: 28px 0;
  font-size: 15px;
  color: var(--db-brand-navy);
  line-height: 1.65;
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
  box-shadow: 0 2px 10px rgba(20,71,230,0.10), 0 1px 2px rgba(20,71,230,0.06);
  transition: box-shadow .25s ease, transform .25s ease;
}
.db-article-content .callout:hover {
  box-shadow: 0 6px 18px rgba(20,71,230,0.14), 0 1px 2px rgba(20,71,230,0.06);
}
.db-article-content .callout strong {
  color: var(--db-brand-blue);
  font-weight: 700;
}
.db-article-content .callout ul,
.db-article-content .callout ol {
  margin: 8px 0 2px 18px;
  text-align: left;
}
.db-article-content .callout ul li,
.db-article-content .callout ol li {
  margin: 4px 0;
  font-size: 14.5px;
}
/* Default info icon badge --------------------------------- */
.db-article-content .callout::before {
  content: '';
  position: absolute;
  left: 18px;
  top: 18px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--db-brand-blue) 0%, #2E5BFF 100%);
  box-shadow: 0 4px 10px rgba(20,71,230,0.35), inset 0 -1px 0 rgba(0,0,0,0.08);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 20px 20px;
  background-image:
    linear-gradient(135deg, var(--db-brand-blue) 0%, #2E5BFF 100%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><line x1='12' y1='16' x2='12' y2='12'/><line x1='12' y1='8' x2='12.01' y2='8'/></svg>");
  background-blend-mode: normal;
  /* layered backgrounds render bottom first, so put gradient first, icon on top via second bg layer */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><line x1='12' y1='16' x2='12' y2='12'/><line x1='12' y1='8' x2='12.01' y2='8'/></svg>"),
    linear-gradient(135deg, var(--db-brand-blue) 0%, #2E5BFF 100%);
}

/* Tip variant: cyan lightbulb ------------------------------ */
.db-article-content .callout.tip {
  background: linear-gradient(135deg, #e5fbff 0%, #cff5ff 100%);
  border-color: rgba(11,196,220,0.45);
  border-left-color: #0BC4DC;
  box-shadow: 0 2px 10px rgba(11,196,220,0.16), 0 1px 2px rgba(11,196,220,0.06);
}
.db-article-content .callout.tip:hover {
  box-shadow: 0 6px 18px rgba(11,196,220,0.22), 0 1px 2px rgba(11,196,220,0.06);
}
.db-article-content .callout.tip strong { color: #0A8FA3; }
.db-article-content .callout.tip::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M9 18h6'/><path d='M10 22h4'/><path d='M12 2a7 7 0 0 0-4 12.7c.5.4 1 1 1 1.8V17h6v-.5c0-.8.5-1.4 1-1.8A7 7 0 0 0 12 2z'/></svg>"),
    linear-gradient(135deg, #0BC4DC 0%, #1DE8FF 100%);
  box-shadow: 0 4px 10px rgba(11,196,220,0.40), inset 0 -1px 0 rgba(0,0,0,0.06);
}

/* Note variant: slate bookmark ----------------------------- */
.db-article-content .callout.note {
  background: linear-gradient(135deg, #f1f4fa 0%, #e3e9f4 100%);
  border-color: rgba(71,85,115,0.28);
  border-left-color: #475573;
  box-shadow: 0 2px 10px rgba(71,85,115,0.10), 0 1px 2px rgba(71,85,115,0.05);
}
.db-article-content .callout.note strong { color: #2F3B54; }
.db-article-content .callout.note::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'><path d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/><polyline points='14 2 14 8 20 8'/><line x1='8' y1='13' x2='16' y2='13'/><line x1='8' y1='17' x2='13' y2='17'/></svg>"),
    linear-gradient(135deg, #475573 0%, #65749A 100%);
  box-shadow: 0 4px 10px rgba(71,85,115,0.30), inset 0 -1px 0 rgba(0,0,0,0.08);
}

/* Important variant: amber alert triangle ------------------ */
.db-article-content .callout.important {
  background: linear-gradient(135deg, #fff4e1 0%, #ffe5bf 100%);
  border-color: rgba(204,124,19,0.45);
  border-left-color: #CC7C13;
  color: #5a3c0a;
  box-shadow: 0 2px 10px rgba(204,124,19,0.16), 0 1px 2px rgba(204,124,19,0.06);
}
.db-article-content .callout.important:hover {
  box-shadow: 0 6px 18px rgba(204,124,19,0.22), 0 1px 2px rgba(204,124,19,0.06);
}
.db-article-content .callout.important strong { color: #8A4D05; }
.db-article-content .callout.important::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'><path d='M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'/><line x1='12' y1='9' x2='12' y2='13'/><line x1='12' y1='17' x2='12.01' y2='17'/></svg>"),
    linear-gradient(135deg, #CC7C13 0%, #E89C2E 100%);
  box-shadow: 0 4px 10px rgba(204,124,19,0.38), inset 0 -1px 0 rgba(0,0,0,0.08);
}

/* Warning variant: red octagon ----------------------------- */
.db-article-content .callout.warning {
  background: linear-gradient(135deg, #ffeded 0%, #ffdada 100%);
  border-color: rgba(196,37,50,0.45);
  border-left-color: #C42532;
  color: #651318;
  box-shadow: 0 2px 10px rgba(196,37,50,0.15), 0 1px 2px rgba(196,37,50,0.05);
}
.db-article-content .callout.warning:hover {
  box-shadow: 0 6px 18px rgba(196,37,50,0.22), 0 1px 2px rgba(196,37,50,0.05);
}
.db-article-content .callout.warning strong { color: #C42532; }
.db-article-content .callout.warning::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'><polygon points='7.86 2 16.14 2 22 7.86 22 16.14 16.14 22 7.86 22 2 16.14 2 7.86 7.86 2'/><line x1='12' y1='8' x2='12' y2='12'/><line x1='12' y1='16' x2='12.01' y2='16'/></svg>"),
    linear-gradient(135deg, #C42532 0%, #E14353 100%);
  box-shadow: 0 4px 10px rgba(196,37,50,0.35), inset 0 -1px 0 rgba(0,0,0,0.08);
}

/* Success variant: green check ----------------------------- */
.db-article-content .callout.success {
  background: linear-gradient(135deg, #e6faed 0%, #cff1d9 100%);
  border-color: rgba(21,135,66,0.40);
  border-left-color: #158742;
  box-shadow: 0 2px 10px rgba(21,135,66,0.14), 0 1px 2px rgba(21,135,66,0.05);
}
.db-article-content .callout.success strong { color: #0E6B33; }
.db-article-content .callout.success::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'><path d='M22 11.08V12a10 10 0 1 1-5.93-9.14'/><polyline points='22 4 12 14.01 9 11.01'/></svg>"),
    linear-gradient(135deg, #158742 0%, #2DAA5E 100%);
  box-shadow: 0 4px 10px rgba(21,135,66,0.34), inset 0 -1px 0 rgba(0,0,0,0.08);
}

/* Admin role tag: purple shield ---------------------------- */
.db-article-content .callout.role-admin {
  background: linear-gradient(135deg, #f3efff 0%, #e5dcff 100%);
  border-color: rgba(104,64,201,0.40);
  border-left-color: #6840C9;
  box-shadow: 0 2px 10px rgba(104,64,201,0.14), 0 1px 2px rgba(104,64,201,0.05);
}
.db-article-content .callout.role-admin strong { color: #4F2EA0; }
.db-article-content .callout.role-admin::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'><path d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/><polyline points='9 12 11 14 15 10'/></svg>"),
    linear-gradient(135deg, #6840C9 0%, #8A64E8 100%);
  box-shadow: 0 4px 10px rgba(104,64,201,0.34), inset 0 -1px 0 rgba(0,0,0,0.08);
}

/* User role tag: teal person ------------------------------- */
.db-article-content .callout.role-user {
  background: linear-gradient(135deg, #e0faf6 0%, #c8f1ea 100%);
  border-color: rgba(14,143,123,0.40);
  border-left-color: #0E8F7B;
  box-shadow: 0 2px 10px rgba(14,143,123,0.14), 0 1px 2px rgba(14,143,123,0.05);
}
.db-article-content .callout.role-user strong { color: #0A6B5C; }
.db-article-content .callout.role-user::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'><path d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/><circle cx='12' cy='7' r='4'/></svg>"),
    linear-gradient(135deg, #0E8F7B 0%, #2DBFA5 100%);
  box-shadow: 0 4px 10px rgba(14,143,123,0.34), inset 0 -1px 0 rgba(0,0,0,0.08);
}

/* Blockquote -------- */
.db-article-content blockquote {
  margin: 28px 0;
  padding: 16px 0 16px 28px;
  border-left: 3px solid var(--db-brand-cyan);
  font-size: 17px;
  font-style: italic;
  color: var(--db-text-secondary);
  line-height: 1.7;
}

/* Inline code -------- */
.db-article-content code {
  background: var(--db-bg-tertiary);
  color: var(--db-brand-navy);
  padding: 2px 7px;
  border-radius: 4px;
  font-family: var(--db-font-mono);
  font-size: 0.9em;
  border: 1px solid var(--db-border);
}

/* Section divider -------- */
.db-article-content hr {
  border: none;
  height: 1px;
  margin: 40px 0;
  background: linear-gradient(90deg, transparent 0%, var(--db-border) 50%, transparent 100%);
}

/* Support materials card -------- */
.db-article-content .support-materials {
  position: relative;
  background: linear-gradient(135deg, #f7faff 0%, #eef3ff 100%);
  border: 1px solid rgba(20,71,230,0.12);
  border-radius: var(--db-radius-lg);
  padding: 24px 26px;
  margin: 48px 0 24px;
  overflow: hidden;
}
.db-article-content .support-materials::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--db-brand-blue) 0%, var(--db-brand-cyan) 100%);
}
.db-article-content .support-materials h4 {
  font-size: 12px;
  font-weight: 700;
  color: var(--db-brand-blue);
  text-transform: uppercase;
  letter-spacing: 1.2px;
  margin: 0 0 14px;
}
.db-article-content .support-materials a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 15px;
  font-weight: 500;
  color: var(--db-brand-navy);
  padding: 10px 14px;
  margin: 0 -14px;
  border-radius: var(--db-radius-sm);
  border-bottom: none;
  transition: all 0.15s;
}
.db-article-content .support-materials a:hover {
  background: rgba(20,71,230,0.08);
  color: var(--db-primary);
  padding-left: 18px;
}
.db-article-content .support-materials a + a {
  border-top: 1px solid rgba(20,71,230,0.08);
}

/* ========== BACK BUTTON ========== */
.db-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: var(--db-text-secondary);
  cursor: pointer;
  padding: 10px 16px;
  border-radius: var(--db-radius-md);
  border: 1px solid var(--db-border);
  background: none;
  font-family: inherit;
  transition: all 0.15s;
  margin-top: 28px;
}
.db-back:hover { background: var(--db-bg-secondary); color: var(--db-text); }

/* ========== PREV / NEXT ARTICLE NAV ========== */
/* ========== FLOATING PREV/NEXT ARROW BUTTONS ==========
   Fixed circular buttons vertically centered on the viewport's left/right edges.
   Hover reveals a tooltip with the article title. The label (Previous/Next)
   and title are kept in the DOM but visually hidden / repurposed as tooltip. */
.db-article-nav {
  /* container no longer renders — children are fixed-positioned */
  display: contents;
}
.db-article-nav a {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  z-index: 50;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--db-primary-light, #e8efff);
  color: var(--db-primary, #1447E6);
  border-radius: 50%;
  text-decoration: none;
  box-shadow: 0 4px 14px -6px rgba(20, 71, 230, 0.3);
  transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.db-article-nav a.prev { left: 24px; }
.db-article-nav a.next { right: 24px; }
.db-article-nav a:not(.disabled):hover {
  background: var(--db-primary, #1447E6);
  color: #fff;
  box-shadow: 0 8px 22px -6px rgba(20, 71, 230, 0.5);
  transform: translateY(-50%) scale(1.08);
}
.db-article-nav a:not(.disabled):hover .nav-arrow svg,
.db-article-nav a:not(.disabled):hover .nav-arrow svg * {
  stroke: #fff;
}
.db-article-nav a.disabled {
  pointer-events: none;
  opacity: 0.35;
  background: var(--db-bg-secondary, #f3f4f8);
  color: var(--db-text-tertiary, #9aa2b1);
  box-shadow: none;
}
.db-article-nav .nav-arrow {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.db-article-nav .nav-arrow svg {
  width: 20px;
  height: 20px;
  stroke-width: 2.2;
}

/* Hide the text block visually but keep it accessible; repurpose as tooltip */
.db-article-nav .nav-text {
  position: absolute;
  pointer-events: none;
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  background: var(--db-text, #1a1f36);
  color: #fff;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  box-shadow: 0 6px 20px -6px rgba(0, 0, 0, 0.25);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.18s ease, visibility 0.18s ease, transform 0.18s ease;
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.2;
}
.db-article-nav a.prev .nav-text {
  left: 64px;
  transform: translateY(-50%) translateX(-6px);
  text-align: left;
  align-items: flex-start;
}
.db-article-nav a.next .nav-text {
  right: 64px;
  transform: translateY(-50%) translateX(6px);
  text-align: right;
  align-items: flex-end;
}
.db-article-nav a:not(.disabled):hover .nav-text {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%) translateX(0);
}
/* Tooltip pointer arrows */
.db-article-nav .nav-text::before {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
}
.db-article-nav a.prev .nav-text::before {
  left: -6px;
  border-right: 6px solid var(--db-text, #1a1f36);
}
.db-article-nav a.next .nav-text::before {
  right: -6px;
  border-left: 6px solid var(--db-text, #1a1f36);
}
.db-article-nav .nav-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  opacity: 0.7;
  font-weight: 600;
}
.db-article-nav .nav-title {
  font-size: 13px;
  font-weight: 600;
}

/* On small screens, keep buttons fixed but tuck in tighter to the edges
   and flip tooltips inward so they don't get clipped. */
@media (max-width: 640px) {
  .db-article-nav a { width: 40px; height: 40px; }
  .db-article-nav a.prev { left: 10px; }
  .db-article-nav a.next { right: 10px; }
  .db-article-nav .nav-arrow svg { width: 16px; height: 16px; }
  .db-article-nav a.prev .nav-text { left: 52px; }
  .db-article-nav a.next .nav-text { right: 52px; }
}

/* ========== POPULAR ARTICLES ========== */
.db-popular {
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid var(--db-border-light);
}
.db-popular h2 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 16px;
  color: var(--db-text-secondary);
}
.db-popular-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: var(--db-radius-sm);
  transition: background 0.15s;
  cursor: pointer;
  font-size: 14px;
}
.db-popular-item:hover { background: var(--db-bg-secondary); }
.db-popular-item .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.db-popular-item .dot.admin { background: var(--db-primary); }
.db-popular-item .dot.user { background: var(--db-purple); }
.db-popular-item .dot.instructor { background: #F59E0B; }
.db-popular-item .dot.student { background: #EC4899; }

/* Title fills the space between the dot and the right-aligned tag/badge
   so the product tag and role badge always line up in consistent columns. */
.db-popular-item > :not(.dot):not(.db-prod-tag):not(.db-badge) {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Text nodes (the title) aren't wrapped in a span, so target via pseudo: we
   rely on the title being a text node directly inside .db-popular-item. */
.db-popular-item {
  min-width: 0;
}
/* Fixed-width right-aligned chip columns keep every row's badges aligned.
   Badge is sized to fit the longest label ("INSTRUCTOR") without clipping. */
.db-popular-item .db-prod-tag {
  flex: 0 0 auto;
  width: 118px;
  justify-content: center;
  margin-left: auto;
}
.db-popular-item .db-badge {
  flex: 0 0 auto;
  width: 96px;
  text-align: center;
  margin-left: 8px;
  padding-left: 4px;
  padding-right: 4px;
  box-sizing: border-box;
}

/* ========== FOOTER ========== */
.db-footer {
  border-top: 1px solid var(--db-border);
  padding: 24px;
  text-align: center;
  font-size: 13px;
  color: var(--db-text-tertiary);
}
.db-footer a { color: var(--db-primary); }

/* ========== QUICK LINKS BOTTOM ========== */
.db-quick-links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 40px;
}
.db-quick-card {
  background: var(--db-bg-secondary);
  border-radius: var(--db-radius-lg);
  padding: 22px;
  text-align: center;
  transition: background 0.15s;
  cursor: pointer;
}
.db-quick-card:hover { background: var(--db-bg-tertiary); }
.db-quick-card .qc-icon { margin-bottom: 8px; color: var(--db-text-secondary); }
.db-quick-card h4 { font-size: 14px; font-weight: 500; margin-bottom: 3px; }
.db-quick-card p { font-size: 12px; color: var(--db-text-secondary); }

/* ========== FEATURE CARDS (home: Explore features) ========== */
.db-features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 8px;
  margin-bottom: 8px;
}

/* Per-card accent colors driven by CSS custom properties so every effect
   (glow, sheen, ring, icon, CTA) shares one source of truth. */
.db-feature-card.similarity { --fc: #1447E6; --fc-light: #E8EDFD; --fc-soft: rgba(20, 71, 230, 0.12); }
.db-feature-card.ai         { --fc: #16A34A; --fc-light: #DCFCE7; --fc-soft: rgba(22, 163, 74, 0.12); }
.db-feature-card.quality    { --fc: #EA580C; --fc-light: #FFF4E6; --fc-soft: rgba(234, 88, 12, 0.12); }
.db-feature-card.title      { --fc: #9333EA; --fc-light: #F3E8FF; --fc-soft: rgba(147, 51, 234, 0.12); }

.db-feature-card {
  display: block;
  background: var(--db-bg);
  border: 1px solid var(--db-border);
  border-radius: var(--db-radius-lg);
  padding: 24px 24px 22px;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: border-color 0.25s ease, box-shadow 0.3s ease, transform 0.25s ease;
}

/* Top accent bar — slides in from the left on hover */
.db-feature-card::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  height: 3px;
  width: 100%;
  background: linear-gradient(90deg, var(--fc), var(--fc) 60%, transparent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 2;
}
.db-feature-card:hover::before { transform: scaleX(1); }

/* Soft colored glow that fades in behind the card content on hover */
.db-feature-card::after {
  content: "";
  position: absolute;
  top: -40%;
  right: -30%;
  width: 60%;
  height: 140%;
  background: radial-gradient(circle, var(--fc-soft) 0%, transparent 65%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
  z-index: 0;
}
.db-feature-card:hover::after { opacity: 1; }

.db-feature-card:hover {
  border-color: var(--fc);
  box-shadow: 0 12px 28px -10px var(--fc-soft), 0 6px 14px -6px rgba(11, 30, 92, 0.08);
  transform: translateY(-4px);
}

.db-feature-card-inner {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  position: relative;
  z-index: 1;
}

.db-feature-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--fc-light);
  color: var(--fc);
  position: relative;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), border-radius 0.35s ease, box-shadow 0.35s ease;
}
.db-feature-icon svg {
  width: 22px;
  height: 22px;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Pulsing ring around the icon — idle subtle, amplified on hover */
.db-feature-icon::before {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: inherit;
  border: 2px solid var(--fc);
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.db-feature-card:hover .db-feature-icon {
  transform: scale(1.08) rotate(-4deg);
  border-radius: 50%;
  box-shadow: 0 8px 20px -6px var(--fc-soft);
}
.db-feature-card:hover .db-feature-icon svg {
  transform: rotate(4deg) scale(1.05);
}
.db-feature-card:hover .db-feature-icon::before {
  opacity: 0.35;
  transform: scale(1.15);
  animation: db-feature-ring 1.6s ease-out infinite;
}

@keyframes db-feature-ring {
  0%   { opacity: 0.35; transform: scale(1);    }
  70%  { opacity: 0;    transform: scale(1.35); }
  100% { opacity: 0;    transform: scale(1.35); }
}

.db-feature-body { flex: 1; min-width: 0; }
.db-feature-body h3 {
  font-size: 16px;
  font-weight: 600;
  color: var(--db-brand-navy);
  margin-bottom: 6px;
  transition: color 0.25s ease;
}
.db-feature-card:hover .db-feature-body h3 { color: var(--fc); }
.db-feature-body p {
  font-size: 13.5px;
  color: var(--db-text-secondary);
  line-height: 1.55;
  margin-bottom: 14px;
}

.db-feature-cta {
  font-size: 13px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--fc);
  position: relative;
  transition: gap 0.25s ease;
}
/* Underline grows from left on hover */
.db-feature-cta::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  height: 1.5px;
  width: 100%;
  background: var(--fc);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.db-feature-card:hover .db-feature-cta::before { transform: scaleX(1); }
.db-feature-cta::after {
  content: "→";
  font-size: 15px;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.db-feature-card:hover .db-feature-cta { gap: 10px; }
.db-feature-card:hover .db-feature-cta::after { transform: translateX(4px); }

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .db-feature-card,
  .db-feature-card::before,
  .db-feature-card::after,
  .db-feature-icon,
  .db-feature-icon svg,
  .db-feature-icon::before,
  .db-feature-cta,
  .db-feature-cta::before,
  .db-feature-cta::after,
  .db-feature-body h3 {
    transition: none !important;
    animation: none !important;
  }
  .db-feature-card:hover { transform: none; }
  .db-feature-card:hover .db-feature-icon { transform: none; }
}

/* ========== ARTICLE COUNT ========== */
.db-count {
  font-size: 13px;
  color: var(--db-text-tertiary);
  margin-bottom: 20px;
}

/* ========== SEARCH RESULTS ========== */
.db-no-results {
  text-align: center;
  padding: 40px 20px;
  color: var(--db-text-secondary);
  font-size: 15px;
  display: none;
}

/* ========== RESPONSIVE ========== */
@media (max-width: 960px) {
  .db-products { grid-template-columns: 1fr 1fr; }
  .db-hero h1 { font-size: 32px; }
  .db-hero-mark { width: 380px; height: 380px; right: -140px; opacity: 0.04; }
}
@media (max-width: 640px) {
  .db-products { grid-template-columns: 1fr; }
  .db-category-grid { grid-template-columns: 1fr; }
  .db-quick-links { grid-template-columns: 1fr; }
  .db-features { grid-template-columns: 1fr; }
  .db-hero h1 { font-size: 26px; letter-spacing: -0.5px; }
  .db-hero { padding: 48px 16px 48px; }
  .db-hero-kicker { font-size: 10px; padding: 4px 12px; }
  .db-hero-pills { gap: 6px; }
  .db-hero-pill { font-size: 12px; padding: 5px 11px; }
  .db-hero-mark { display: none; }
  .db-header-inner { padding: 12px 16px; gap: 10px; }
  .db-main { padding: 0 16px 48px; }
  .db-section-header { flex-direction: column; gap: 12px; }
  .db-logo-icon { width: 95px; height: 24px; }

  /* Tighten the navbar gap so logo + nav fit on a phone */
  .db-header-nav { gap: 4px; }

  /* Visible navbar links: keep tight type sizing + comfortable line-height */
  .db-header-nav a:first-of-type,
  .db-header-nav a.active {
    line-height: 1.2;
    font-size: 12px;
    text-align: left;
  }
  /* Home stays on one line and gets right-margin to separate it from the active link */
  .db-header-nav a:first-of-type {
    white-space: nowrap;
    max-width: none;
    margin-right: 10px;
  }
  /* Active product name is allowed to wrap onto two lines */
  .db-header-nav a.active {
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
    max-width: 110px;
  }
  /* Trim the gap between the active link and the hamburger only */
  .db-header-nav::after { margin-left: 2px; }

  /* Dropdown items inside the hamburger menu */
  .db-header-nav a:not(:first-of-type):not(.active) {
    width: 200px;
    min-width: 0;
    padding: 9px 14px;
    font-size: 13px;
    white-space: normal;
    right: 0;
    left: auto;
  }
}

/* ========== SCROLL TO TOP ========== */
.db-scroll-top {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 44px;
  height: 44px;
  background: var(--db-brand-navy);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  z-index: 1000;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  border: none;
  outline: none;
}
.db-scroll-top.show {
  opacity: 1;
  visibility: visible;
}
.db-scroll-top:hover {
  background: var(--db-brand-blue);
  transform: translateY(-4px);
}
.db-scroll-top svg {
  width: 20px;
  height: 20px;
}