/* ══════════════════════════════════════════════════════════════
   Cloudframe Solutions — base design system
   Small, reusable visual patterns that show up on multiple pages:
   eyebrow/label text, the navy callout box, and the bordered
   panel used to frame screenshots and content blocks.

   Difference from shared.css: shared.css is site CHROME (the header,
   footer, and buttons) — the exact same markup on every page.
   base.css is a set of shared PATTERNS that different pages apply
   to their own, different content. Existing page-specific class
   names (like .credibility-quote or .knowledge-callout) are kept
   as aliases here so no page markup had to change — each page's
   own <style> block only keeps the bits that make it unique
   (spacing, gradients, layout).
   ══════════════════════════════════════════════════════════════ */

/* Eyebrow / label text -- small uppercase heading used above a title,
   on a light background. New pages: use class="eyebrow-label". */
.section-label,
.hero-label,
.eyebrow-label {
  display: block;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 12px;
}

/* Same eyebrow style, for use inside a dark/navy box.
   New pages: use class="eyebrow-label-dark". */
.credibility-quote-label,
.requirement-box-label,
.eyebrow-label-dark {
  display: block;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 16px;
}

/* Pill-style eyebrow -- small rounded badge above a page-hero title.
   New pages: use class="eyebrow-pill". */
.page-eyebrow,
.eyebrow-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(56,189,248,0.1);
  border: 1px solid rgba(56,189,248,0.25);
  color: var(--accent);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  font-family: var(--font-display);
  padding: 5px 14px;
  border-radius: 20px;
  margin-bottom: 24px;
}
.page-eyebrow::before,
.eyebrow-pill::before {
  content: '';
  width: 6px;
  height: 6px;
  background: var(--accent);
  border-radius: 50%;
}

/* Navy callout box -- used for pull-quotes and CTA panels.
   Each page adds its own margin/gradient/layout on top of this.
   New pages: use class="callout-box". */
.credibility-quote,
.article-cta,
.knowledge-callout,
.requirement-box,
.callout-box {
  background: var(--navy);
  border-radius: 16px;
  padding: 40px;
}

/* Bordered panel -- frames a screenshot, table, or content block.
   New pages: use class="bordered-panel". */
.snapshot-col,
.evidence-col,
.failure-block,
.adds-grid,
.mapping-grid,
.drift-timeline,
.bordered-panel {
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
}

/* Screenshot lightbox -- click-to-enlarge modal used on the homepage
   and both product pages. */
.lightbox-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 999;
  background: rgba(0,0,0,0.85);
  align-items: center;
  justify-content: center;
}
.lightbox-overlay.active { display: flex; }
.lightbox-overlay img { max-width: 90vw; max-height: 90vh; border-radius: 8px; }
.lightbox-close {
  position: absolute;
  top: 24px;
  right: 32px;
  font-size: 28px;
  color: white;
  cursor: pointer;
  line-height: 1;
  z-index: 1;
}