/* =============================================================================
   Debiasify — Site CSS
   Design system for the public-facing CMS site.
   Structure:
     1. Custom Properties (design tokens)
     2. Reset & Base
     3. Typography
     4. Layout utilities
     5. Buttons
     6. Navigation
     7. Footer
     8. Block: hero
     9. Block: text
    10. Block: features
    11. Block: pricing
    12. Block: steps
    13. Block: team
    14. Block: cta
    15. 404 page
    16. Responsive overrides (768px, 1024px)
    17. Enhanced design additions (Phase 7)
    18. Reduced motion
    19. Print
   ============================================================================= */

/* -----------------------------------------------------------------------------
   1. Custom Properties
   ----------------------------------------------------------------------------- */
:root {
  /* Colour palette */
  --color-navy-900:  #0f172a;
  --color-navy-800:  #1e293b;
  --color-navy-700:  #334155;
  --color-navy-600:  #475569;
  --color-blue-500:  #3b82f6;
  --color-blue-400:  #60a5fa;
  --color-blue-600:  #2563eb;
  --color-blue-100:  #dbeafe;
  --color-slate-100: #f1f5f9;
  --color-slate-200: #e2e8f0;
  --color-slate-500: #64748b;
  --color-slate-600: #475569;
  --color-slate-50:  #f8fafc;
  --color-white:     #ffffff;
  --color-text-secondary: #64748b;
  --color-text-body: #1e293b;
  --color-border:    #e2e8f0;
  --color-border-dark: #334155;

  /* Typography */
  --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
                 'Helvetica Neue', Arial, sans-serif;
  --font-size-base: 1rem;
  --font-size-sm:   0.875rem;
  --font-size-xs:   0.75rem;
  --font-size-lg:   1.125rem;
  --font-size-xl:   1.25rem;
  --font-size-2xl:  1.5rem;
  --font-size-3xl:  1.875rem;
  --font-size-4xl:  2.25rem;
  --font-size-5xl:  3rem;
  --font-size-6xl:  3.75rem;
  --line-height-tight:  1.2;
  --line-height-snug:   1.375;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.7;
  --font-weight-normal:   400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;
  --font-weight-extrabold: 800;

  /* Spacing scale (multiples of 0.25rem / 4px) */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* Borders & Radii */
  --radius-sm:  0.25rem;
  --radius-md:  0.5rem;
  --radius-lg:  0.75rem;
  --radius-xl:  1rem;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm:  0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md:  0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg:  0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-xl:  0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);

  /* Layout */
  --container-max: 1200px;
  --container-padding: var(--space-6);

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;

  /* Nav height */
  --nav-height: 4rem;
}


/* -----------------------------------------------------------------------------
   2. Reset & Base
   ----------------------------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  color: var(--color-text-body);
  background-color: var(--color-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, video, svg {
  display: block;
  max-width: 100%;
}

a {
  color: var(--color-blue-500);
  text-decoration: underline;
  text-underline-offset: 2px;
}

a:hover {
  color: var(--color-blue-600);
}

ul, ol {
  list-style: none;
}

h1, h2, h3, h4, h5, h6 {
  line-height: var(--line-height-tight);
  font-weight: var(--font-weight-bold);
  color: inherit;
}

p {
  line-height: var(--line-height-relaxed);
}

/* Focus styles — visible for keyboard users */
:focus-visible {
  outline: 3px solid var(--color-blue-500);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

:focus:not(:focus-visible) {
  outline: none;
}

/* Skip link for screen readers / keyboard users */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-4);
  background: var(--color-blue-500);
  color: var(--color-white);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-sm);
  z-index: 9999;
  text-decoration: none;
}

.skip-link:focus {
  top: var(--space-4);
}


/* -----------------------------------------------------------------------------
   3. Typography
   ----------------------------------------------------------------------------- */

/* Rich text body content */
.rich-text h2 {
  font-size: var(--font-size-2xl);
  margin-bottom: var(--space-4);
  margin-top: var(--space-8);
}

.rich-text h3 {
  font-size: var(--font-size-xl);
  margin-bottom: var(--space-3);
  margin-top: var(--space-6);
}

.rich-text p {
  margin-bottom: var(--space-4);
}

.rich-text ul,
.rich-text ol {
  list-style: revert;
  padding-left: var(--space-6);
  margin-bottom: var(--space-4);
}

.rich-text li {
  line-height: var(--line-height-relaxed);
  margin-bottom: var(--space-1);
}

.rich-text a {
  color: var(--color-blue-600);
}

.rich-text strong {
  font-weight: var(--font-weight-semibold);
}

.rich-text blockquote {
  border-left: 4px solid var(--color-blue-500);
  padding-left: var(--space-4);
  margin: var(--space-6) 0;
  color: var(--color-text-secondary);
  font-style: italic;
}


/* -----------------------------------------------------------------------------
   4. Layout utilities
   ----------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

.section {
  padding-block: var(--space-20);
}

.section--dark {
  background-color: var(--color-navy-900);
  color: var(--color-white);
}

.section--light {
  background-color: var(--color-slate-50);
}

.section--white {
  background-color: var(--color-white);
}

.section__header {
  margin-bottom: var(--space-12);
  text-align: center;
}

.section__headline {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-extrabold);
  letter-spacing: -0.02em;
  margin-bottom: var(--space-3);
}

.section__subtitle {
  font-size: var(--font-size-lg);
  color: var(--color-text-secondary);
  max-width: 56ch;
  margin-inline: auto;
}

.section--dark .section__subtitle {
  color: var(--color-blue-400);
}

/* Visually hidden (screen reader only) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}


/* -----------------------------------------------------------------------------
   5. Buttons
   ----------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.75rem 1.75rem;
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  line-height: 1;
  border-radius: var(--radius-md);
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background-color var(--transition-fast),
    border-color var(--transition-fast),
    color var(--transition-fast),
    box-shadow var(--transition-fast);
}

.btn--primary {
  background-color: var(--color-blue-500);
  color: var(--color-white);
  border-color: var(--color-blue-500);
}

.btn--primary:hover {
  background-color: var(--color-blue-600);
  border-color: var(--color-blue-600);
  color: var(--color-white);
  box-shadow: 0 4px 14px rgb(59 130 246 / 0.4);
}

.btn--secondary {
  background-color: transparent;
  color: var(--color-white);
  border-color: rgba(255, 255, 255, 0.45);
}

.btn--secondary:hover {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: var(--color-white);
  color: var(--color-white);
}

.btn--outline {
  background-color: transparent;
  color: var(--color-blue-500);
  border-color: var(--color-blue-500);
}

.btn--outline:hover {
  background-color: var(--color-blue-500);
  color: var(--color-white);
}

.btn--lg {
  padding: 1rem 2.25rem;
  font-size: var(--font-size-lg);
  border-radius: var(--radius-lg);
}


/* -----------------------------------------------------------------------------
   6. Navigation
   ----------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: var(--color-navy-900);
  border-bottom: 1px solid var(--color-border-dark);
  height: var(--nav-height);
  display: flex;
  align-items: center;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  height: 100%;
  position: relative;
}

.site-nav__logo {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-extrabold);
  color: var(--color-white);
  text-decoration: none;
  letter-spacing: -0.03em;
  flex-shrink: 0;
}

.site-nav__logo:hover {
  color: var(--color-blue-400);
}

/* The menu is hidden on mobile by default (flex handles desktop) */
.site-nav__menu {
  display: none;
  flex: 1;
  align-items: center;
  gap: var(--space-1);
  margin-left: var(--space-4);
}

.site-nav__menu li a {
  display: block;
  padding: var(--space-2) var(--space-3);
  color: rgba(255, 255, 255, 0.72);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
  border-radius: var(--radius-md);
  transition: color var(--transition-fast), background-color var(--transition-fast);
  white-space: nowrap;
}

.site-nav__menu li a:hover {
  color: var(--color-white);
  background-color: rgba(255, 255, 255, 0.08);
}

.site-nav__menu li a[aria-current="page"] {
  color: var(--color-blue-400);
  background-color: rgba(59, 130, 246, 0.1);
}

.site-nav__cta {
  margin-left: auto;
  flex-shrink: 0;
  padding: 0.5rem 1.25rem;
  font-size: var(--font-size-sm);
  display: none;
}

/* Hamburger toggle */
.site-nav__toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 2.25rem;
  height: 2.25rem;
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.15);
  cursor: pointer;
  padding: 0.35rem;
  margin-left: auto;
  border-radius: var(--radius-md);
  flex-shrink: 0;
}

.site-nav__toggle span {
  display: block;
  width: 100%;
  height: 2px;
  background-color: var(--color-white);
  border-radius: var(--radius-full);
  transition: transform var(--transition-base), opacity var(--transition-fast);
}

.site-nav__toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.site-nav__toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

.site-nav__toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Mobile menu open state */
.site-nav__menu.is-open {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  position: absolute;
  top: calc(var(--nav-height) - 1px);
  left: calc(-1 * var(--container-padding));
  right: calc(-1 * var(--container-padding));
  background-color: var(--color-navy-800);
  border-top: 1px solid var(--color-border-dark);
  border-bottom: 1px solid var(--color-border-dark);
  padding: var(--space-4) var(--space-6);
  gap: var(--space-1);
  z-index: 99;
}

.site-nav__menu.is-open li a {
  padding: var(--space-3) var(--space-4);
}


/* -----------------------------------------------------------------------------
   Language switcher
   ----------------------------------------------------------------------------- */
.lang-switcher {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin-left: 1rem;
  font-size: var(--font-size-sm);
}

.lang-switcher__link {
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  color: var(--color-text-secondary);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s ease, background-color 0.2s ease;
}

.lang-switcher__link:hover {
  color: var(--color-blue-600);
  background-color: var(--color-blue-100);
}

.lang-switcher__link--active {
  color: var(--color-blue-600);
  font-weight: 700;
  background-color: var(--color-blue-100);
}

.lang-switcher__sep {
  color: var(--color-border);
  user-select: none;
}


/* -----------------------------------------------------------------------------
   7. Footer
   ----------------------------------------------------------------------------- */
.site-footer {
  background-color: var(--color-navy-900);
  border-top: 1px solid var(--color-border-dark);
  padding-block: var(--space-12);
  color: rgba(255, 255, 255, 0.6);
}

.site-footer__inner {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}

.site-footer__company {
  font-size: var(--font-size-sm);
  color: rgba(255, 255, 255, 0.6);
}

.site-footer__address {
  font-size: var(--font-size-sm);
  color: rgba(255, 255, 255, 0.6);
}

.site-footer__legal {
  display: flex;
  gap: var(--space-4);
  justify-content: center;
  margin-top: var(--space-3);
}

.site-footer__legal a {
  font-size: var(--font-size-xs);
  color: rgba(255, 255, 255, 0.5);
  text-decoration: none;
}

.site-footer__legal a:hover {
  color: rgba(255, 255, 255, 0.8);
  text-decoration: underline;
}

.site-footer__copy {
  font-size: var(--font-size-xs);
  color: rgba(255, 255, 255, 0.38);
  margin-top: var(--space-2);
}


/* -----------------------------------------------------------------------------
   8. Block: hero
   ----------------------------------------------------------------------------- */
.block-hero {
  background-color: var(--color-navy-900);
  color: var(--color-white);
  padding-block: var(--space-24) var(--space-32);
  text-align: center;
  background-image:
    radial-gradient(circle at 20% 50%, rgba(59, 130, 246, 0.08) 0%, transparent 55%),
    radial-gradient(circle at 80% 30%, rgba(59, 130, 246, 0.06) 0%, transparent 50%);
}

.block-hero__inner {
  max-width: 860px;
  margin-inline: auto;
}

.block-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-blue-400);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: var(--space-6);
}

.block-hero__eyebrow::before,
.block-hero__eyebrow::after {
  content: '';
  display: block;
  width: 2rem;
  height: 1px;
  background-color: var(--color-blue-400);
  opacity: 0.5;
}

.block-hero__headline {
  font-size: clamp(var(--font-size-4xl), 6vw, var(--font-size-6xl));
  font-weight: var(--font-weight-extrabold);
  letter-spacing: -0.03em;
  line-height: var(--line-height-tight);
  margin-bottom: var(--space-8);
  color: var(--color-white);
}

.block-hero__subheadline {
  font-size: clamp(var(--font-size-lg), 2vw, var(--font-size-xl));
  color: rgba(255, 255, 255, 0.68);
  max-width: 62ch;
  margin-inline: auto;
  margin-bottom: var(--space-10);
  line-height: var(--line-height-relaxed);
}

.block-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  justify-content: center;
  align-items: center;
}

/* Two-column hero variant when an image is present */
.block-hero--with-image {
  text-align: left;
}

.block-hero--with-image .block-hero__inner {
  max-width: var(--container-max);
  display: flex;
  align-items: center;
  gap: var(--space-12);
}

.block-hero--with-image .block-hero__content {
  flex: 1 1 0;
  min-width: 0;
}

.block-hero--with-image .block-hero__eyebrow,
.block-hero--with-image .block-hero__subheadline {
  margin-inline: 0;
}

.block-hero--with-image .block-hero__actions {
  justify-content: flex-start;
}

.block-hero__image {
  flex: 0 0 auto;
  width: 45%;
  max-width: 520px;
}

.block-hero__image img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
}


/* -----------------------------------------------------------------------------
   9. Block: text
   ----------------------------------------------------------------------------- */
.block-text {
  background-color: var(--color-white);
  padding-block: var(--space-20);
}

.block-text__inner {
  max-width: 72ch;
  margin-inline: auto;
}

.block-text__headline {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-extrabold);
  letter-spacing: -0.02em;
  color: var(--color-navy-900);
  margin-bottom: var(--space-8);
  text-align: center;
}

.block-text__body {
  color: var(--color-text-body);
  font-size: var(--font-size-lg);
  line-height: var(--line-height-relaxed);
}

/* -----------------------------------------------------------------------------
   9b. Block: problem-solution
   ----------------------------------------------------------------------------- */
.block-problem-solution {
  background-color: var(--color-white);
  padding-block: var(--space-20);
}

.block-problem-solution__inner {
  max-width: 72ch;
  margin-inline: auto;
}

.block-problem-solution__header {
  margin-bottom: var(--space-10);
}

.block-problem-solution__headline {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-extrabold);
  letter-spacing: -0.02em;
  color: var(--color-navy-900);
  margin-bottom: var(--space-4);
}

.block-problem-solution__subtitle {
  color: var(--color-text-secondary);
  font-size: var(--font-size-lg);
  line-height: var(--line-height-relaxed);
}

.block-problem-solution__segment {
  margin-bottom: var(--space-8);
}

.block-problem-solution__segment-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-navy-900);
  margin-bottom: var(--space-3);
}

.block-problem-solution__indicator {
  display: inline-block;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  flex-shrink: 0;
}

.block-problem-solution__indicator--problem {
  background-color: #ef4444;
}

.block-problem-solution__indicator--solution {
  background-color: #22c55e;
}

.block-problem-solution__segment-description {
  color: var(--color-text-body);
  font-size: var(--font-size-base);
  line-height: var(--line-height-relaxed);
  padding-left: calc(0.75rem + var(--space-2));
}

.block-problem-solution__highlights {
  list-style: none;
  padding: 0;
  margin-top: var(--space-8);
}

.block-problem-solution__highlight {
  color: var(--color-text-body);
  font-size: var(--font-size-base);
  line-height: var(--line-height-relaxed);
  margin-bottom: var(--space-2);
}

.block-problem-solution__highlight strong {
  color: var(--color-navy-900);
  font-weight: var(--font-weight-bold);
}

/* -----------------------------------------------------------------------------
   9c. Block: category-grid
   ----------------------------------------------------------------------------- */
.block-category-grid {
  background-color: var(--color-white);
  padding-block: var(--space-20);
}

.block-category-grid__header {
  text-align: center;
  margin-bottom: var(--space-12);
}

.block-category-grid__headline {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-extrabold);
  letter-spacing: -0.02em;
  color: var(--color-navy-900);
  margin-bottom: var(--space-3);
  /* Anchor target for the hero "What the Plugin Detects" CTA — keep the
     headline clear of the sticky header when jumped to. */
  scroll-margin-top: calc(var(--nav-height) + var(--space-4));
}

.block-category-grid__subtitle {
  font-size: var(--font-size-lg);
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
  max-width: 64ch;
  margin-inline: auto;
}

.block-category-grid__columns {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-10);
}

.category-column__header {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
  background-color: var(--color-slate-50);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
}

.category-column__badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-lg);
  background-color: var(--color-blue-100);
  color: var(--color-blue-600);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  flex-shrink: 0;
}

.category-column__title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-navy-900);
}

.category-column__list {
  margin: 0;
  padding: 0;
}

.category-column__item {
  margin-bottom: var(--space-4);
}

.category-column__item-title {
  font-weight: var(--font-weight-bold);
  color: var(--color-navy-900);
  font-size: var(--font-size-base);
  display: inline;
}

.category-column__item-description {
  display: inline;
  margin: 0;
  color: var(--color-text-body);
  font-size: var(--font-size-base);
  line-height: var(--line-height-relaxed);
}

/* -----------------------------------------------------------------------------
   9d. Block: comparison
   ----------------------------------------------------------------------------- */
.block-comparison {
  background-color: var(--color-slate-50);
  padding-block: var(--space-20);
}

.block-comparison__header {
  text-align: center;
  margin-bottom: var(--space-12);
}

.block-comparison__headline {
  font-family: var(--font-heading);
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-extrabold);
  color: var(--color-navy-900);
  line-height: var(--line-height-tight);
  margin: 0 0 var(--space-4);
}

.block-comparison__subtitle {
  font-size: var(--font-size-lg);
  color: var(--color-text-body);
  margin: 0;
}

.block-comparison__columns {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
}

.comparison-card {
  background-color: var(--color-white);
  border: 1px solid var(--color-slate-200);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
}

.comparison-card__title {
  font-family: var(--font-heading);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-navy-900);
  margin: 0 0 var(--space-6);
}

.comparison-card__list {
  list-style: disc;
  padding-left: var(--space-5);
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.comparison-card__item {
  font-size: var(--font-size-base);
  line-height: var(--line-height-relaxed);
  color: var(--color-text-body);
}

.comparison-card__item-title {
  font-weight: var(--font-weight-bold);
  color: var(--color-navy-900);
}

/* -----------------------------------------------------------------------------
   10. Block: features
   ----------------------------------------------------------------------------- */
.block-features {
  background-color: var(--color-slate-50);
  padding-block: var(--space-20);
}

.block-features__header {
  text-align: center;
  margin-bottom: var(--space-12);
}

.block-features__headline {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-extrabold);
  letter-spacing: -0.02em;
  color: var(--color-navy-900);
  margin-bottom: var(--space-3);
}

.block-features__subtitle {
  font-size: var(--font-size-lg);
  color: var(--color-text-secondary);
}

.block-features__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

.feature-card {
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.feature-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.feature-card__icon {
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius-lg);
  background-color: var(--color-blue-100);
  color: var(--color-blue-600);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--space-5);
  flex-shrink: 0;
}

.feature-card__title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-navy-900);
  margin-bottom: var(--space-3);
}

.feature-card__description {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
}


/* -----------------------------------------------------------------------------
   11. Block: pricing
   ----------------------------------------------------------------------------- */
.block-pricing {
  background-color: var(--color-navy-900);
  color: var(--color-white);
  padding-block: var(--space-20);
}

.block-pricing__header {
  text-align: center;
  margin-bottom: var(--space-12);
}

.block-pricing__headline {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-extrabold);
  letter-spacing: -0.02em;
  margin-bottom: var(--space-3);
}

.block-pricing__subtitle {
  font-size: var(--font-size-lg);
  color: var(--color-blue-400);
}

.block-pricing__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

.pricing-card {
  background-color: var(--color-white);
  border: 1px solid var(--color-slate-200);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
}

.pricing-card--highlighted {
  background-color: var(--color-blue-600);
  border-color: var(--color-blue-600);
  box-shadow: 0 20px 40px rgb(59 130 246 / 0.2);
}

.pricing-card--highlighted .pricing-card__name,
.pricing-card--highlighted .pricing-card__price {
  color: var(--color-white);
}

.pricing-card--highlighted .pricing-card__period {
  color: rgba(255, 255, 255, 0.7);
}

.pricing-card--highlighted .pricing-card__description {
  color: rgba(255, 255, 255, 0.8);
  border-bottom-color: rgba(255, 255, 255, 0.2);
}

.pricing-card--highlighted .pricing-feature {
  color: rgba(255, 255, 255, 0.9);
}

.pricing-card--highlighted .pricing-feature--bold {
  color: var(--color-white);
}

.pricing-card--highlighted .pricing-feature__check {
  background-color: rgba(255, 255, 255, 0.2);
  color: var(--color-white);
}

.pricing-card__badge {
  display: inline-block;
  background-color: var(--color-blue-500);
  color: var(--color-white);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  margin-bottom: var(--space-4);
  align-self: flex-start;
}

.pricing-card__name {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-navy-900);
  margin-bottom: var(--space-2);
}

.pricing-card__price-row {
  display: flex;
  align-items: baseline;
  gap: var(--space-1);
  margin-bottom: var(--space-3);
}

.pricing-card__price {
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-extrabold);
  color: var(--color-navy-900);
  letter-spacing: -0.03em;
}

.pricing-card__period {
  font-size: var(--font-size-sm);
  color: var(--color-slate-500);
}

.pricing-card__alt-price {
  font-size: var(--font-size-sm);
  color: var(--color-slate-500);
  margin-bottom: var(--space-2);
}

.pricing-card--highlighted .pricing-card__alt-price {
  color: rgba(255, 255, 255, 0.7);
}

.pricing-card__description {
  font-size: var(--font-size-sm);
  color: var(--color-slate-600);
  line-height: var(--line-height-relaxed);
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--color-slate-200);
}

.pricing-card__features {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  flex: 1;
}

.pricing-feature {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--font-size-sm);
  color: var(--color-slate-600);
  line-height: var(--line-height-relaxed);
}

.pricing-feature--bold {
  font-weight: var(--font-weight-semibold);
  color: var(--color-navy-900);
}

.pricing-feature__check {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: var(--radius-full);
  background-color: rgba(59, 130, 246, 0.12);
  color: var(--color-blue-500);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  margin-top: 0.1rem;
  font-weight: var(--font-weight-bold);
}


/* -----------------------------------------------------------------------------
   12. Block: steps
   ----------------------------------------------------------------------------- */
.block-steps {
  background-color: var(--color-white);
  padding-block: var(--space-20);
}

.block-steps__headline {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-extrabold);
  letter-spacing: -0.02em;
  color: var(--color-navy-900);
  margin-bottom: var(--space-12);
  text-align: center;
}

.block-steps__list {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-width: 680px;
  margin-inline: auto;
}

.step {
  display: flex;
  gap: var(--space-6);
  position: relative;
  padding-bottom: var(--space-10);
}

.step:last-child {
  padding-bottom: 0;
}

/* Vertical connector line between steps */
.step:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 1.4375rem; /* (3rem badge / 2) - (2px line / 2) */
  top: 3rem;
  bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, var(--color-blue-500), rgba(59, 130, 246, 0.15));
}

.step__badge {
  flex-shrink: 0;
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius-full);
  background-color: var(--color-blue-500);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-extrabold);
  z-index: 1;
  position: relative;
  box-shadow: 0 0 0 4px var(--color-blue-100);
}

.step__content {
  padding-top: var(--space-2);
  flex: 1;
}

.step__title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-navy-900);
  margin-bottom: var(--space-2);
}

.step__description {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
}

/* Step with screenshot */
.step__info {
  display: flex;
  gap: var(--space-6);
  flex: 1;
}

.step--with-image {
  flex-direction: column;
}

.step__image {
  margin-top: var(--space-4);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-md);
  position: relative;
  z-index: 1;
  background: var(--color-white);
}

.step__image img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* First step image is a small sidebar tab — right-align it */
.step:first-child .step__image {
  display: flex;
  justify-content: flex-end;
}

.step:first-child .step__image img {
  width: auto;
}


/* -----------------------------------------------------------------------------
   13. Block: team
   ----------------------------------------------------------------------------- */
.block-team {
  background-color: var(--color-slate-50);
  padding-block: var(--space-20);
}

.block-team__header {
  text-align: center;
  margin-bottom: var(--space-12);
}

.block-team__headline {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-extrabold);
  letter-spacing: -0.02em;
  color: var(--color-navy-900);
}

.block-team__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

.team-card {
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  text-align: center;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-base);
}

.team-card:hover {
  box-shadow: var(--shadow-md);
}

.team-card__avatar {
  width: 5rem;
  height: 5rem;
  border-radius: var(--radius-full);
  background-color: var(--color-navy-800);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  margin-inline: auto;
  margin-bottom: var(--space-5);
  letter-spacing: -0.02em;
  user-select: none;
}

.team-card__name {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-navy-900);
  margin-bottom: var(--space-1);
}

.team-card__role {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-blue-500);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--space-4);
}

.team-card__bio {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
}

.team-card__photo {
  width: 5rem;
  height: 5rem;
  border-radius: var(--radius-full);
  overflow: hidden;
  margin-inline: auto;
  margin-bottom: var(--space-5);
}

.team-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.team-card__linkedin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: var(--space-4);
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.team-card__linkedin:hover {
  color: #0a66c2;
}


/* -----------------------------------------------------------------------------
   14. Block: cta
   ----------------------------------------------------------------------------- */
.block-cta {
  background-color: var(--color-navy-800);
  color: var(--color-white);
  padding-block: var(--space-20);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.block-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 50% 0%, rgba(59, 130, 246, 0.14) 0%, transparent 65%);
  pointer-events: none;
}

.block-cta__inner {
  position: relative;
  z-index: 1;
  max-width: 640px;
  margin-inline: auto;
}

.block-cta__headline {
  font-size: clamp(var(--font-size-3xl), 4vw, var(--font-size-4xl));
  font-weight: var(--font-weight-extrabold);
  letter-spacing: -0.02em;
  color: var(--color-white);
  margin-bottom: var(--space-4);
}

.block-cta__subtitle {
  font-size: var(--font-size-lg);
  color: rgba(255, 255, 255, 0.62);
  line-height: var(--line-height-relaxed);
  margin-bottom: var(--space-8);
}


/* -----------------------------------------------------------------------------
   15. 404 page
   ----------------------------------------------------------------------------- */
.page-404 {
  min-height: calc(100vh - var(--nav-height) - 12rem);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding-block: var(--space-20);
  padding-inline: var(--space-6);
}

.page-404__inner {
  max-width: 520px;
}

.page-404__code {
  font-size: 6rem;
  font-weight: var(--font-weight-extrabold);
  color: var(--color-blue-500);
  letter-spacing: -0.04em;
  line-height: 1;
  opacity: 0.2;
  margin-bottom: var(--space-4);
  user-select: none;
}

.page-404__headline {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-extrabold);
  color: var(--color-navy-900);
  letter-spacing: -0.02em;
  margin-bottom: var(--space-4);
}

.page-404__body {
  font-size: var(--font-size-lg);
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
  margin-bottom: var(--space-8);
}

.page-404__actions {
  display: flex;
  gap: var(--space-4);
  justify-content: center;
  flex-wrap: wrap;
}


/* -----------------------------------------------------------------------------
   15b. Flash messages
   ----------------------------------------------------------------------------- */
.flash-message {
  padding: var(--space-3) 0;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
}

.flash-message--success {
  background-color: #dcfce7;
  color: #166534;
  border-bottom: 1px solid #bbf7d0;
}

.flash-message--error {
  background-color: #fef2f2;
  color: #991b1b;
  border-bottom: 1px solid #fecaca;
}

.flash-message--warning {
  background-color: #fffbeb;
  color: #92400e;
  border-bottom: 1px solid #fde68a;
}


/* -----------------------------------------------------------------------------
   15c. Auth pages
   ----------------------------------------------------------------------------- */
.auth-section {
  min-height: calc(100vh - var(--nav-height) - 12rem);
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: var(--space-16);
  background-color: var(--color-slate-50);
}

.auth-card {
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-10);
  max-width: 480px;
  margin-inline: auto;
  box-shadow: var(--shadow-md);
}

.auth-card--centered {
  text-align: center;
}

.auth-card__icon {
  font-size: var(--font-size-5xl);
  margin-bottom: var(--space-4);
  line-height: 1;
}

.auth-card__title {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-extrabold);
  color: var(--color-navy-900);
  margin-bottom: var(--space-2);
  letter-spacing: -0.02em;
}

.auth-card__subtitle {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-8);
}

.auth-card__footer {
  text-align: center;
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin-top: var(--space-6);
}

.auth-card__footer a {
  color: var(--color-blue-500);
  font-weight: var(--font-weight-semibold);
}

.auth-alert {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  margin-bottom: var(--space-6);
}

.auth-alert--error {
  background-color: #fef2f2;
  color: #991b1b;
  border: 1px solid #fecaca;
}

.auth-alert--success {
  background-color: #dcfce7;
  color: #166534;
  border: 1px solid #bbf7d0;
}

.auth-resend-form {
  text-align: center;
  margin-bottom: var(--space-6);
}

.auth-resend-form__text {
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
  margin-bottom: var(--space-3);
}

/* OAuth buttons */
.auth-oauth {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

.btn--oauth {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  width: 100%;
  padding: 0.75rem 1.25rem;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background-color: var(--color-white);
  color: var(--color-text-body);
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.btn--oauth:hover {
  background-color: var(--color-slate-50);
  border-color: var(--color-navy-600);
  box-shadow: var(--shadow-sm);
  color: var(--color-text-body);
}

.btn--oauth__icon {
  flex-shrink: 0;
}

/* Divider */
.auth-divider {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
}

.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background-color: var(--color-border);
}

.auth-link {
  font-size: var(--font-size-sm);
  color: var(--color-blue-500);
}

/* Auth form */
.auth-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.form-group--row {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.form-group--half {
  flex: 1;
  min-width: 0;
}

.form-row {
  display: flex;
  gap: var(--space-4);
}

.form-label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-navy-900);
}

.form-input {
  width: 100%;
  padding: 0.625rem 0.875rem;
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  color: var(--color-text-body);
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form-input:focus {
  outline: none;
  border-color: var(--color-blue-500);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.form-input:disabled {
  background-color: var(--color-slate-50);
  color: var(--color-text-secondary);
  cursor: not-allowed;
}

.form-hint {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  margin-top: var(--space-1);
}

.form-error {
  font-size: var(--font-size-xs);
  color: #dc2626;
  margin-top: var(--space-1);
}

/* Symfony form_errors() renders <ul><li> — style them as visible error messages */
.form-group ul,
.auth-form ul {
  list-style: none;
  padding: 0;
  margin: var(--space-1) 0 0;
}

.form-group ul li,
.auth-form ul li {
  font-size: var(--font-size-xs);
  color: #dc2626;
  margin-top: var(--space-1);
}

/* Also add red border to invalid inputs */
.form-input.is-invalid,
.form-group:has(ul li) .form-input {
  border-color: #dc2626;
}

.form-checkbox {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--color-text-body);
  cursor: pointer;
}

.form-checkbox input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
  accent-color: var(--color-blue-500);
}

.form-divider {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: var(--space-6) 0;
}

.form-section-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-navy-900);
  margin-bottom: var(--space-4);
}

.btn--full {
  width: 100%;
}


/* -----------------------------------------------------------------------------
   15d. User dropdown (nav)
   ----------------------------------------------------------------------------- */
.site-nav__auth {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-left: auto;
  flex-shrink: 0;
}

.site-nav__login,
.site-nav__signup {
  padding: 0.5rem 1.25rem;
  font-size: var(--font-size-sm);
}

.site-nav__login {
  color: var(--color-white);
  border-color: rgba(255, 255, 255, 0.3);
}

.site-nav__login:hover {
  border-color: var(--color-white);
  color: var(--color-white);
  background-color: rgba(255, 255, 255, 0.1);
}

.user-dropdown {
  position: relative;
}

.user-dropdown__toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.5rem 0.875rem;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-md);
  color: var(--color-white);
  font-family: var(--font-family);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: background-color var(--transition-fast), border-color var(--transition-fast);
}

.user-dropdown__toggle:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.3);
}

.user-dropdown__chevron {
  transition: transform var(--transition-fast);
}

.user-dropdown__toggle[aria-expanded="true"] .user-dropdown__chevron {
  transform: rotate(180deg);
}

.user-dropdown__menu {
  display: none;
  position: absolute;
  top: calc(100% + var(--space-2));
  right: 0;
  min-width: 180px;
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-2);
  z-index: 200;
}

.user-dropdown__menu.is-open {
  display: block;
}

.user-dropdown__menu a {
  display: block;
  padding: var(--space-2) var(--space-3);
  font-size: var(--font-size-sm);
  color: var(--color-text-body);
  text-decoration: none;
  border-radius: var(--radius-md);
  transition: background-color var(--transition-fast);
}

.user-dropdown__menu a:hover {
  background-color: var(--color-slate-50);
  color: var(--color-navy-900);
}

.user-dropdown__divider {
  height: 1px;
  background-color: var(--color-border);
  margin: var(--space-2) var(--space-3);
}


/* -----------------------------------------------------------------------------
   15e. Dashboard
   ----------------------------------------------------------------------------- */
.dashboard {
  padding-block: var(--space-12) var(--space-20);
  background-color: var(--color-slate-50);
  min-height: calc(100vh - var(--nav-height));
}

.dashboard__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-bottom: var(--space-10);
}

.dashboard__title {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-extrabold);
  color: var(--color-navy-900);
  letter-spacing: -0.02em;
}

.dashboard__subtitle {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  margin-top: var(--space-1);
}

.dashboard__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

.dash-card {
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  box-shadow: var(--shadow-sm);
}

.dash-card--full {
  grid-column: 1 / -1;
}

/* Informational callout variant of dash-card. Used for non-destructive
 * recommendations (e.g. the "Try text-analysis instead" CTA on a failed
 * URL analysis detail). Tints the card with the blue accent colour while
 * keeping all dash-card layout / spacing / shadow tokens intact. */
.dash-card--callout-info {
  border-color: var(--color-blue-500);
  background-color: var(--color-blue-50, #eff6ff);
}

.dash-card__heading {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-navy-900);
  margin-bottom: var(--space-3);
}

.dash-card__text {
  color: var(--color-muted);
  margin-bottom: var(--space-5);
}

.dash-card__title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-navy-900);
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}

.dash-card__plan-badge {
  display: inline-block;
  background-color: var(--color-blue-100);
  color: var(--color-blue-600);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
}

.dash-card__stats {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.dash-card__stats li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-slate-100);
}

.dash-card__stat-label {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.dash-card__stat-value {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-navy-900);
  white-space: nowrap;
}

.dash-card__stat-right {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.dash-card__details {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-2) var(--space-4);
  margin-bottom: var(--space-6);
}

.dash-card__details dt {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-medium);
}

.dash-card__details dd {
  font-size: var(--font-size-sm);
  color: var(--color-navy-900);
}

.dash-card__body--empty {
  text-align: center;
  padding: var(--space-10) 0;
  color: var(--color-text-secondary);
}


/* -----------------------------------------------------------------------------
   16. Responsive overrides
   ----------------------------------------------------------------------------- */

/* On mobile, collapse hero two-column layout to single column */
@media (max-width: 47.9375rem) {
  .block-hero--with-image .block-hero__inner {
    flex-direction: column;
  }

  .block-hero--with-image {
    text-align: center;
  }

  .block-hero--with-image .block-hero__actions {
    justify-content: center;
  }

  .block-hero__image {
    width: 100%;
    max-width: 480px;
    margin-inline: auto;
  }

  .lang-switcher {
    display: none;
  }
}

/* --- 768px and up: tablets --- */
@media (min-width: 48rem) {
  /* Navigation */
  .site-nav__menu {
    display: flex;
    position: static;
    background: none;
    border: none;
    padding: 0;
    flex-direction: row;
  }

  .site-nav__toggle {
    display: none;
  }

  .site-nav__cta {
    display: inline-flex;
  }

  /* Dashboard grid */
  .dashboard__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Features */
  .block-features__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Category grid: 2-col on tablet */
  .block-category-grid__columns {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Comparison: 2-col on tablet */
  .block-comparison__columns {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Pricing */
  .block-pricing__grid {
    grid-template-columns: repeat(2, 1fr);
    align-items: stretch;
  }

  /* Team */
  .block-team__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* --- 1024px and up: desktops --- */
@media (min-width: 64rem) {
  /* Bigger section headlines */
  .section__headline {
    font-size: var(--font-size-4xl);
  }

  .block-features__headline,
  .block-problem-solution__headline,
  .block-category-grid__headline,
  .block-comparison__headline,
  .block-pricing__headline,
  .block-steps__headline,
  .block-team__headline,
  .block-text__headline,
  .block-video__headline {
    font-size: var(--font-size-4xl);
  }

  /* Features: 3-col */
  .block-features__grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Category grid: 3-col on desktop */
  .block-category-grid__columns {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Team: auto-fit */
  .block-team__grid {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  }

  /* Nav gap */
  .site-nav {
    gap: var(--space-6);
  }
}


/* -----------------------------------------------------------------------------
   17. Enhanced design additions (Phase 7)
   ----------------------------------------------------------------------------- */

/* --- Hero: gradient background & image column glow --- */
.block-hero {
  background-image:
    linear-gradient(135deg, var(--color-navy-900) 0%, #1a3a6e 55%, #1d4ed8 100%),
    radial-gradient(circle at 20% 50%, rgba(59, 130, 246, 0.08) 0%, transparent 55%),
    radial-gradient(circle at 80% 30%, rgba(59, 130, 246, 0.06) 0%, transparent 50%);
  background-blend-mode: normal;
}

/* Override the simpler radial-only fallback that was previously set inline */
.block-hero--with-image {
  background-image:
    linear-gradient(135deg, var(--color-navy-900) 0%, #1a3a6e 60%, #1d4ed8 100%);
}

/* Decorative glow behind the hero image on the right */
.block-hero__image::before {
  content: '';
  position: absolute;
  inset: -2rem;
  border-radius: var(--radius-xl);
  background: radial-gradient(circle at center, rgba(59, 130, 246, 0.22) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.block-hero__image {
  position: relative;
}

.block-hero__image img {
  position: relative;
  z-index: 1;
}


/* --- Features: stronger hover lift & circular icon variant --- */
.feature-card {
  /* Ensure transform origin is stable */
  will-change: transform, box-shadow;
}

.feature-card:hover {
  box-shadow: var(--shadow-xl);
  transform: translateY(-6px);
  border-color: var(--color-blue-100);
}

/* Circular icon background variant (applied when .feature-card__icon--circle is used) */
.feature-card__icon--circle {
  border-radius: var(--radius-full);
  width: 3.5rem;
  height: 3.5rem;
  background: linear-gradient(135deg, var(--color-blue-100) 0%, #bfdbfe 100%);
  box-shadow: 0 0 0 6px rgba(59, 130, 246, 0.08);
}


/* --- Pricing: hover lift & gradient border on highlighted card --- */
.pricing-card {
  transition: box-shadow var(--transition-base), transform var(--transition-base);
  will-change: transform, box-shadow;
}

.pricing-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 32px -8px rgba(0, 0, 0, 0.35);
}

/* Gradient border on the featured/highlighted pricing card.
   Uses a pseudo-element underlay so the gradient is visible
   through the transparent card background edges. */
.pricing-card--highlighted {
  position: relative;
  /* Remove the plain single-color border so the gradient shows */
  border: none;
  padding: calc(var(--space-8) + 2px);      /* compensate for the 2px gradient ring */
}

.pricing-card--highlighted::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px;
  background: linear-gradient(135deg, var(--color-blue-400) 0%, var(--color-blue-600) 50%, #7c3aed 100%);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 0;
}

.pricing-card--highlighted > * {
  position: relative;
  z-index: 1;
}

.pricing-card--highlighted:hover {
  box-shadow: 0 0 0 1px transparent, 0 20px 48px rgba(59, 130, 246, 0.24);
}


/* --- Steps: alternating layout (desktop) & wider connector line --- */

/* Widen the steps container on desktop to accommodate side-by-side image layout */
@media (min-width: 64rem) {
  .block-steps__list {
    max-width: 960px;
  }

  /* Odd steps (1st, 3rd, …): text left, image right */
  .step--with-image {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--space-8);
  }

  /* The badge+content column */
  .step--with-image .step__info {
    flex: 1 1 0;
    min-width: 0;
  }

  /* The image column */
  .step--with-image .step__image {
    flex: 0 0 42%;
    max-width: 420px;
    margin-top: 0;
    align-self: center;
  }

  /* Even steps: image left, text right */
  .step--with-image:nth-child(even) {
    flex-direction: row-reverse;
  }

  /* Adjust the connector line for the wider layout */
  .step--with-image:not(:last-child)::after {
    left: 1.4375rem;
    top: 3rem;
    bottom: 0;
  }
}


/* --- Team: photo hover overlay & card lift --- */
.team-card {
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.team-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}

/* Ring accent on team photo */
.team-card__photo {
  box-shadow: 0 0 0 3px var(--color-white), 0 0 0 5px var(--color-blue-100);
}


/* -----------------------------------------------------------------------------
   Dashboard navigation
   ----------------------------------------------------------------------------- */
.dash-nav {
  background-color: var(--color-white);
  border-bottom: 1px solid var(--color-border);
}

.dash-nav__list {
  display: flex;
  gap: var(--space-1);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.dash-nav__link {
  display: block;
  padding: var(--space-3) var(--space-4);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.dash-nav__link:hover {
  color: var(--color-navy-900);
}

.dash-nav__link--active {
  color: var(--color-blue-600);
  border-bottom-color: var(--color-blue-600);
  font-weight: var(--font-weight-semibold);
}


/* -----------------------------------------------------------------------------
   Plan cards (dashboard)
   ----------------------------------------------------------------------------- */
.dash-plan-card {
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  transition: box-shadow var(--transition-base), border-color var(--transition-base);
}

.dash-plan-card:hover {
  box-shadow: var(--shadow-md);
}

.dash-plan-card--current {
  border-color: var(--color-blue-500);
  box-shadow: 0 0 0 1px var(--color-blue-500), var(--shadow-md);
}

.dash-plan-card__header {
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}

.dash-plan-card__name {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-navy-900);
  margin-bottom: var(--space-2);
}

.dash-plan-card__price {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}

.dash-plan-card__amount {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-extrabold);
  color: var(--color-navy-900);
  letter-spacing: -0.02em;
}

.dash-plan-card__currency {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-medium);
}

.dash-plan-card__currency-select {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-navy-900);
  background: var(--color-slate-50);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-1) var(--space-2);
  cursor: pointer;
  appearance: auto;
}

.dash-plan-card__features {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
  flex: 1;
}

.dash-plan-card__features li {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-slate-100);
}

.dash-plan-card__features li strong {
  color: var(--color-navy-900);
  font-weight: var(--font-weight-semibold);
}

.dash-plan-card__action {
  margin-top: auto;
}


/* -----------------------------------------------------------------------------
   Invoice table
   ----------------------------------------------------------------------------- */
.invoice-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.invoice-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
}

.invoice-table th {
  text-align: left;
  padding: var(--space-3) var(--space-4);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
  border-bottom: 2px solid var(--color-border);
  white-space: nowrap;
}

.invoice-table td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-slate-100);
  color: var(--color-navy-900);
}

.invoice-table tbody tr:hover {
  background-color: var(--color-slate-50);
}


/* -----------------------------------------------------------------------------
   Subscription status badges
   ----------------------------------------------------------------------------- */
.sub-badge {
  display: inline-block;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-full);
  text-transform: capitalize;
}

.sub-badge--active,
.sub-badge--paid {
  background-color: #dcfce7;
  color: #166534;
}

.sub-badge--canceled {
  background-color: #f1f5f9;
  color: var(--color-navy-600);
}

.sub-badge--past_due {
  background-color: #fef3c7;
  color: #92400e;
}

.sub-badge--incomplete,
.sub-badge--draft,
.sub-badge--open {
  background-color: #fef2f2;
  color: #991b1b;
}

.sub-badge--void,
.sub-badge--uncollectible {
  background-color: #f1f5f9;
  color: var(--color-text-secondary);
}


/* Small button variant */
.btn--sm {
  padding: var(--space-1) var(--space-3);
  font-size: var(--font-size-xs);
}


/* -----------------------------------------------------------------------------
   Analysis dashboard
   ----------------------------------------------------------------------------- */

/* Sub-tab navigation (mirrors dash-nav style) */
.analysis-tabs {
  display: flex;
  gap: 0;
  margin-bottom: var(--space-6);
  border-bottom: 2px solid var(--color-border);
}

.analysis-tabs__tab {
  padding: var(--space-3) var(--space-5);
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text-secondary);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: color 0.15s, border-color 0.15s;
}

.analysis-tabs__tab:hover {
  color: var(--color-text-body);
  text-decoration: none;
}

.analysis-tabs__tab--active {
  color: var(--color-blue-500);
  border-bottom-color: var(--color-blue-500);
}

/* Filter bar */
.analysis-filter {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.analysis-filter .form-input {
  max-width: 280px;
}

/* Cursor pagination */
.pagination {
  display: flex;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}

/* Truncated URLs */
.url-truncate {
  display: inline-block;
  max-width: 320px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}

/* Score grid (3-column) on detail pages */
.analysis-detail__scores {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

@media (max-width: 768px) {
  .analysis-detail__scores {
    grid-template-columns: 1fr;
  }
}

/* Score value with colour coding */
.score-value {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
}

.score-value--green { color: #16a34a; }
.score-value--amber { color: #d97706; }
.score-value--red   { color: #dc2626; }

/* Status badges */
.status-badge {
  display: inline-block;
  padding: 0.15em 0.55em;
  font-size: var(--font-size-xs);
  font-weight: 600;
  border-radius: 9999px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.status-badge--completed {
  background-color: #dcfce7;
  color: #166534;
}

.status-badge--processing {
  background-color: #dbeafe;
  color: #1e40af;
}

.status-badge--failed {
  background-color: #fee2e2;
  color: #991b1b;
}

/* Finding cards */
.analysis-detail__finding {
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  margin-bottom: var(--space-4);
}

.analysis-detail__finding:last-child {
  margin-bottom: 0;
}

.analysis-detail__finding-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-3);
}

.analysis-detail__finding-terms {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.analysis-detail__finding-explanation {
  margin-bottom: var(--space-3);
}

.analysis-detail__finding-explanation p {
  margin: 0 0 var(--space-1);
}

.analysis-detail__finding-texts {
  margin-top: var(--space-3);
}

.analysis-detail__quote {
  border-left: 3px solid var(--color-blue-500);
  padding: var(--space-2) var(--space-4);
  margin: var(--space-2) 0;
  background: var(--color-slate-50);
  font-style: italic;
}

/* Long text content display */
.analysis-detail__text-content {
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 400px;
  overflow-y: auto;
  padding: var(--space-3);
  background: var(--color-slate-50);
  border-radius: 6px;
  font-size: var(--font-size-sm);
  line-height: 1.6;
}

/* Fact-check verification block — appears inside each finding when verificationData is present */
.analysis-detail__verification {
  margin-top: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-left: 3px solid var(--color-navy-600);
  background: var(--color-slate-50);
  border-radius: 0 6px 6px 0;
  font-size: var(--font-size-sm);
}

/* Inline status badge within the verification block */
.analysis-detail__verification-status {
  display: inline-block;
  margin-left: var(--space-2);
  padding: 0.15em 0.55em;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  border-radius: 9999px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  vertical-align: middle;
}

/* Refuted — red/danger tone */
.analysis-detail__verification-status--refuted {
  background-color: #fee2e2;
  color: #991b1b;
}

/* Unverifiable — amber/warning tone */
.analysis-detail__verification-status--unverifiable {
  background-color: #fef3c7;
  color: #92400e;
}

/* Source paragraph inside the verification block */
.analysis-detail__verification-source {
  margin: var(--space-2) 0 0;
}

/* Clickable source URL link */
.analysis-detail__verification-link {
  color: var(--color-blue-600);
  text-decoration: underline;
  word-break: break-all;
}

.analysis-detail__verification-link:hover {
  color: var(--color-blue-500);
}

/* Grounding snippet — italicised, visually subordinate */
.analysis-detail__verification-snippet {
  margin: var(--space-2) 0 0;
  font-style: italic;
  color: var(--color-text-secondary);
  font-size: var(--font-size-xs);
  line-height: 1.6;
}

/* Dashboard card header row */
.dash-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-3);
}


/* -----------------------------------------------------------------------------
   18. Reduced motion
   ----------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* Keep focus outline changes immediate */
  :focus-visible {
    transition: none;
  }

  /* Disable hover transforms */
  .feature-card:hover,
  .pricing-card:hover,
  .team-card:hover,
  .btn:hover {
    transform: none;
  }

  html {
    scroll-behavior: auto;
  }
}


/* -----------------------------------------------------------------------------
   19. Print
   ----------------------------------------------------------------------------- */
@media print {
  .site-header,
  .site-footer,
  .btn,
  .site-nav__toggle {
    display: none !important;
  }

  body {
    font-size: 12pt;
    color: #000;
    background: #fff;
  }

  .block-hero,
  .block-pricing,
  .block-cta,
  .section--dark {
    background: #f0f0f0 !important;
    color: #000 !important;
    background-image: none !important;
  }

  a {
    text-decoration: underline;
    color: #000;
  }

  .container {
    max-width: 100%;
    padding: 0;
  }

  .feature-card,
  .pricing-card,
  .team-card {
    border: 1px solid #ccc;
    box-shadow: none;
  }
}


/* -----------------------------------------------------------------------------
   20. Billing type toggle & conditional field visibility
   ----------------------------------------------------------------------------- */

/**
 * Card-style radio toggle for Individual / Company billing type selection.
 * Radio inputs are visually hidden; the parent <label> acts as the clickable card.
 */
.billing-type-toggle {
  display: flex;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

.billing-type-toggle__option {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3) var(--space-4);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
  text-align: center;
  font-weight: var(--font-weight-medium);
}

/* Hide the native radio input — the label itself is the interactive element */
.billing-type-toggle__option input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.billing-type-toggle__option:hover {
  border-color: var(--color-blue-600);
}

.billing-type-toggle__option--active {
  border-color: var(--color-blue-600);
  background-color: rgba(37, 99, 235, 0.06);
}

/* Utility class used by JS to toggle visibility of type-conditional form fields */
.billing-field--hidden {
  display: none !important;
}

/* Section wrapper — adds vertical breathing room between billing form and invoices */
.billing-section {
  margin-bottom: var(--space-12);
}

.billing-section__title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--space-6);
}


/* -----------------------------------------------------------------------------
   21. API key one-time reveal box
   ----------------------------------------------------------------------------- */

/**
 * Prominent banner displayed immediately after a key is generated.
 * Uses a high-contrast blue tint to draw attention to the one-time nature
 * of the reveal — the user must copy the key before navigating away.
 */
.api-key-reveal {
  background: #eef2ff;
  border: 2px solid #c7d2fe;
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  margin-bottom: var(--space-8);
}

.api-key-reveal__warning {
  font-weight: var(--font-weight-semibold);
  color: #4338ca;
  margin-bottom: var(--space-3);
}

.api-key-reveal__token-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

/* Monospace block for the plain-text token — user-select:all enables single-click selection */
.api-key-reveal__token {
  flex: 1;
  background: var(--color-navy-800);
  color: var(--color-slate-50);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
  font-size: var(--font-size-sm);
  word-break: break-all;
  user-select: all;
}

/* Danger variant for the revoke button — uses outline style by default,
   fills with red on hover for a clear destructive-action affordance. */
.btn--danger {
  color: #dc2626;
  border-color: #dc2626;
}

.btn--danger:hover {
  background: #dc2626;
  color: #fff;
}


/* -----------------------------------------------------------------------------
   22. Usage progress bars
   ----------------------------------------------------------------------------- */

/* Horizontal bar showing consumed / total quota for a plan limit. */
.progress-bar {
  width: 100%;
  height: 0.5rem;
  background: var(--color-gray-200, #e5e7eb);
  border-radius: 0.25rem;
  margin-top: var(--space-1, 0.25rem);
  overflow: hidden;
}

.progress-bar--compact {
  width: 5rem;
  margin-top: 0;
}

.progress-bar__fill {
  height: 100%;
  background: var(--color-primary, #2563eb);
  border-radius: 0.25rem;
  transition: width 0.3s ease;
}


/* -----------------------------------------------------------------------------
   23. Usage history chart
   ----------------------------------------------------------------------------- */

/* CSS-only grouped bar chart with a Y-axis, gridlines and per-month columns.
   Layout: [y-axis] [plot:relative] where plot = grid (background) + columns. */
.dash-card__subtitle {
  margin: 0;
  color: var(--color-gray-500, #6b7280);
  font-size: 0.8125rem;
  line-height: 1.4;
}

.usage-chart {
  --usage-chart-plot-height: 11rem;
  display: flex;
  gap: var(--space-3, 0.75rem);
  padding-top: var(--space-2, 0.5rem);
}

.usage-chart__y-axis {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: var(--usage-chart-plot-height);
  padding-bottom: 1.75rem; /* visual space for the x-axis label row in __plot */
  font-size: 0.6875rem;
  color: var(--color-gray-500, #6b7280);
  text-align: right;
  min-width: 1.75rem;
}

.usage-chart__y-tick {
  line-height: 1;
}

.usage-chart__plot {
  position: relative;
  flex: 1;
  min-width: 0;
}

.usage-chart__grid {
  position: absolute;
  inset: 0 0 1.75rem 0; /* leave the bottom row for x-axis labels */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  pointer-events: none;
}

.usage-chart__grid > span {
  display: block;
  height: 1px;
  background: var(--color-gray-200, #e5e7eb);
}

.usage-chart__columns {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
  height: var(--usage-chart-plot-height);
  overflow-x: auto;
}

.usage-chart__month {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  flex: 1 1 0;
  min-width: 2.25rem;
  height: 100%;
}

.usage-chart__bars {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 3px;
  flex: 1;
  min-height: 0;
  border-bottom: 1px solid var(--color-gray-300, #d1d5db);
  padding: 0 2px;
}

.usage-chart__bar {
  flex: 1 1 0;
  max-width: 0.75rem;
  min-height: 1px;
  border-radius: 3px 3px 0 0;
  transition: opacity 120ms ease-in-out;
}

.usage-chart__month:hover .usage-chart__bar {
  opacity: 0.85;
}

.usage-chart__bar--submit {
  background: var(--color-primary, #2563eb);
}

.usage-chart__bar--view {
  background: var(--color-secondary, #7c3aed);
}

.usage-chart__label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  font-size: 0.6875rem;
  color: var(--color-gray-500, #6b7280);
  margin-top: 0.375rem;
  white-space: nowrap;
  line-height: 1.1;
}

.usage-chart__label-month {
  font-weight: 600;
  color: var(--color-gray-700, #374151);
  text-transform: capitalize;
}

.usage-chart__label-year {
  font-size: 0.625rem;
}

.usage-chart__legend {
  display: flex;
  gap: var(--space-4, 1rem);
  margin-top: var(--space-3, 0.75rem);
  font-size: 0.75rem;
  color: var(--color-gray-700, #374151);
}

.usage-chart__legend-item {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.usage-chart__legend-swatch {
  display: inline-block;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 2px;
}

.usage-chart__legend-swatch--submit {
  background: var(--color-primary, #2563eb);
}

.usage-chart__legend-swatch--view {
  background: var(--color-secondary, #7c3aed);
}

/* -----------------------------------------------------------------------------
   Video block
   ----------------------------------------------------------------------------- */

.block-video {
  background-color: var(--color-white);
  padding-block: var(--space-20);
}

.block-video__inner {
  max-width: 72ch;
  margin-inline: auto;
}

.block-video__headline {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-extrabold);
  letter-spacing: -0.02em;
  color: var(--color-navy-900);
  margin-block-end: var(--space-4);
}

.block-video__description {
  color: var(--color-text-body);
  font-size: var(--font-size-lg);
  line-height: var(--line-height-relaxed);
  margin-block-end: var(--space-10);
}

.block-video__embed {
  position: relative;
  padding-block-end: 56.25%; /* 16:9 aspect ratio */
  height: 0;
  overflow: hidden;
  border-radius: var(--radius-lg, 0.75rem);
  box-shadow: var(--shadow-lg, 0 10px 15px -3px rgba(0,0,0,.1));
}

.block-video__embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}


/* =============================================================================
   Analysis detail v2
   Implements the 1D-confidence UI: gauge bars, threshold slider, bucket sections.
   ============================================================================= */

/* --- Bucket colour tokens --- */
:root {
  /* Amber for rhetorical (persuasion / framing patterns) — used for the heading chip */
  --bucket-rhetorical: #f59e0b;
  /* Teal for factual (verifiability / sourcing patterns) — used for the heading chip */
  --bucket-factual: #0d9488;

  /* Gauge fill colours signal the threshold verdict (not the bucket identity).
     Safe = green when the max confidence sits below the user's threshold.
     Danger = red when it crosses or exceeds the threshold. */
  --gauge-fill-safe:   #16a34a;
  --gauge-fill-danger: #dc2626;

  /* Per-tier opacity/shade helpers — applied via inline fill width */
  --tier-low-opacity:        0.35;
  --tier-medium-opacity:     0.55;
  --tier-high-opacity:       0.80;
  --tier-definitive-opacity: 1.00;
}

/* --- Gauge section wrapper --- */
.analysis-detail__gauges {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

/* Individual gauge row */
.analysis-gauge {
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-6) var(--space-8);
  box-shadow: var(--shadow-sm);
}

/* Heading is a coloured pill — the only place that still carries the bucket identity.
   The bar colour itself is reserved for the safe/danger threshold signal. */
.analysis-gauge__title {
  display: inline-flex;
  align-items: center;
  background-color: var(--gauge-color, var(--bucket-rhetorical));
  color: var(--color-white);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.35em 0.85em;
  border-radius: var(--radius-full);
  margin-bottom: var(--space-4);
  box-shadow: var(--shadow-sm);
}

/* Track — the grey background rail */
.analysis-gauge__bar {
  position: relative;
  width: 100%;
  height: 0.875rem;
  background-color: var(--color-slate-200);
  border-radius: var(--radius-full);
  overflow: visible; /* allow threshold marker to slightly protrude */
}

/* Coloured fill — width set by JS (or server-side default).
   Colour is driven by [data-gauge-state] on the parent .analysis-gauge wrapper:
     - "below" (default): safe green — max confidence is under the user's threshold
     - "above":           danger red — max confidence reaches or exceeds the threshold
   The bucket identity moved to the heading pill, so the bar is free to carry the verdict. */
.analysis-gauge__fill {
  height: 100%;
  border-radius: var(--radius-full);
  background-color: var(--gauge-fill-safe);
  transition: width 0.25s ease, background-color 0.25s ease;
  min-width: 0;
}

.analysis-gauge[data-gauge-state="above"] .analysis-gauge__fill {
  background-color: var(--gauge-fill-danger);
}

/* Value label + tier pill shown to the right of the bar */
.analysis-gauge__meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-2);
  flex-wrap: wrap;
}

.analysis-gauge__value {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-extrabold);
  color: var(--color-navy-900);
  line-height: 1;
}

/* Tier label pill */
.analysis-gauge__tier {
  display: inline-block;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  padding: 0.15em 0.65em;
  border-radius: var(--radius-full);
  background-color: var(--color-slate-100);
  color: var(--color-slate-600);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* "Top finding" quick-link line */
.analysis-gauge__top-link {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin-top: var(--space-2);
}

.analysis-gauge__top-link a {
  color: var(--color-blue-600);
  font-weight: var(--font-weight-medium);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Warning chip — shown when fact-check was superficial */
.analysis-gauge__warning {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
  background-color: #fef3c7;
  color: #92400e;
  border: 1px solid #fcd34d;
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
}

/* Warning icon element — CSS triangle/exclamation, no emoji in markup */
.icon--warning {
  display: inline-block;
  width: 0.875rem;
  height: 0.875rem;
  background-color: #92400e;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  flex-shrink: 0;
  position: relative;
}

/* Exclamation mark drawn via pseudo-element */
.icon--warning::after {
  content: '!';
  position: absolute;
  bottom: 0.075rem;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.55rem;
  font-weight: 900;
  color: #fef3c7;
  line-height: 1;
}


/* --- Confidence threshold slider --- */
.confidence-slider {
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-6) var(--space-8);
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--space-4);
}

.confidence-slider__label {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-navy-900);
  margin-bottom: var(--space-3);
}

.confidence-slider__row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}

/* The native range input — styled minimally, browsers provide accessible defaults */
.confidence-slider__range {
  flex: 1;
  min-width: 120px;
  accent-color: var(--color-blue-500);
  cursor: pointer;
  height: 1.5rem; /* taller click target */
}

/* Current value display */
.confidence-slider__output {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-extrabold);
  color: var(--color-navy-900);
  min-width: 3.5rem;
  text-align: right;
}

/* Save button — small, secondary style */
.confidence-slider__save {
  flex-shrink: 0;
}

/* Hide save button for anonymous viewers */
.confidence-slider__save--hidden {
  display: none !important;
}


/* --- Per-finding confidence bar --- */
.confidence-bar {
  position: relative;
  margin: var(--space-3) 0;
}

.confidence-bar__track {
  position: relative;
  width: 100%;
  height: 0.625rem;
  background-color: var(--color-slate-200);
  border-radius: var(--radius-full);
  overflow: visible;
}

/* Fill uses the per-card --bucket-color variable */
.confidence-bar__fill {
  height: 100%;
  border-radius: var(--radius-full);
  background-color: var(--bucket-color, var(--bucket-rhetorical));
  transition: width 0.2s ease;
}

/* Label showing the numeric confidence value */
.confidence-bar__label {
  display: inline-block;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
  margin-top: var(--space-1);
}

/* Vertical threshold marker — thin line overlaid at the threshold percentage */
.confidence-bar__threshold-marker {
  position: absolute;
  top: -0.25rem;
  bottom: -0.25rem;
  width: 2px;
  background-color: var(--color-navy-700);
  border-radius: 1px;
  pointer-events: none;
  transform: translateX(-50%);
  transition: left 0.2s ease;
}

/* Gauge threshold marker — same idea for the gauge bars */
.analysis-gauge__threshold-marker {
  position: absolute;
  top: -0.25rem;
  bottom: -0.25rem;
  width: 2px;
  background-color: var(--color-navy-700);
  border-radius: 1px;
  pointer-events: none;
  transform: translateX(-50%);
  transition: left 0.2s ease;
}


/* --- Finding card bucket theming --- */

/* Each finding card inherits --bucket-color from its inline style attribute.
   The left accent border and any underline/heading tint read from that variable. */
.analysis-detail__finding {
  border-left: 4px solid var(--bucket-color, var(--color-border));
}

.analysis-detail__finding[data-bucket="rhetorical"] {
  --bucket-color: var(--bucket-rhetorical);
}

.analysis-detail__finding[data-bucket="factual"] {
  --bucket-color: var(--bucket-factual);
}

/* Finding header now uses the bucket color for the term name */
.analysis-detail__finding-header strong {
  color: var(--bucket-color, var(--color-navy-900));
}

/* Group/bucket section heading above the findings list */
.analysis-detail__section-header {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-extrabold);
  color: var(--color-navy-900);
  letter-spacing: -0.01em;
  margin: var(--space-8) 0 var(--space-4);
  padding-bottom: var(--space-2);
  border-bottom: 2px solid var(--color-border);
}

.analysis-detail__section-header--rhetorical {
  border-bottom-color: var(--bucket-rhetorical);
}

.analysis-detail__section-header--factual {
  border-bottom-color: var(--bucket-factual);
}

/* Empty-state notice when all findings fall below the threshold */
.analysis-detail__empty-threshold {
  text-align: center;
  padding: var(--space-12) var(--space-6);
  color: var(--color-text-secondary);
  font-size: var(--font-size-base);
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  display: none; /* shown by JS when list is empty */
}

.analysis-detail__empty-threshold.is-visible {
  display: block;
}

/* Information value block — two-stat dl */
.analysis-detail__iv-stats {
  display: flex;
  gap: var(--space-8);
  flex-wrap: wrap;
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-slate-100);
}

.analysis-detail__iv-stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.analysis-detail__iv-stat dt {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.analysis-detail__iv-stat dd {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-extrabold);
  color: var(--color-navy-900);
  line-height: 1;
}

/* Summary prose cards */
.analysis-detail__summary-text {
  font-size: var(--font-size-base);
  line-height: var(--line-height-relaxed);
  color: var(--color-text-body);
}

/* Responsive: stack gauges to a single column at mobile widths */
@media (max-width: 48rem) {
  .analysis-detail__gauges {
    gap: var(--space-3);
  }

  .analysis-gauge {
    padding: var(--space-4) var(--space-5);
  }

  .confidence-slider {
    padding: var(--space-4) var(--space-5);
  }

  .confidence-slider__row {
    gap: var(--space-3);
  }

  .analysis-detail__iv-stats {
    gap: var(--space-4);
  }
}

/* =============================================================================
   Analysis UI revamp additions
   ============================================================================= */

/* -----------------------------------------------------------------------------
   Combined "Potential issues found" wrapper (TK6)
   Both gauge cards sit inside a single dash-card so they share one heading and
   card border, making the visual hierarchy clearer than two separate cards.
   ----------------------------------------------------------------------------- */
.analysis-issues-box__body {
  padding-top: var(--space-1);
}

/* -----------------------------------------------------------------------------
   Gauge unified readout (TK1/TK2/TK5)
   Replaces the separate value + tier spans with a single readable sentence.
   The JS counterpart writes to [data-gauge-readout] on threshold changes.
   ----------------------------------------------------------------------------- */
.analysis-gauge__readout {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-body);
}

/* -----------------------------------------------------------------------------
   Details disclosure look-and-feel
   Applied to both the page-level context <details> (TK8) and per-finding
   secondary-explanation <details> (TK16/TK17/TK18).
   ----------------------------------------------------------------------------- */
.analysis-detail__page-details,
.analysis-detail__finding-details {
  margin-top: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  background: var(--color-slate-50);
}

.analysis-detail__page-details > summary,
.analysis-detail__finding-details > summary {
  cursor: pointer;
  font-weight: var(--font-weight-semibold);
  list-style: revert; /* keep the native browser disclosure triangle */
}

.analysis-detail__page-details > summary::marker,
.analysis-detail__finding-details > summary::marker {
  color: var(--color-text-secondary);
}

.analysis-detail__finding-details-body,
.analysis-detail__page-details > dl {
  margin-top: var(--space-2);
}

/* Page-level details dl layout */
.analysis-detail__details-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.analysis-detail__details-list dt {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.analysis-detail__details-list dd {
  font-size: var(--font-size-base);
  color: var(--color-text-body);
}

/* -----------------------------------------------------------------------------
   Observation / Mechanism / Impact colour-coded highlight blocks (TK20)
   Three CSS custom properties keep the colour entirely data-driven; the
   modifier classes just set those variables.
   ----------------------------------------------------------------------------- */
.analysis-omi {
  border-left: 4px solid var(--omi-color);
  padding: var(--space-2) var(--space-3);
  background: var(--omi-bg);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  margin: 0 0 var(--space-2);
}

.analysis-omi__label {
  font-weight: var(--font-weight-bold);
  color: var(--omi-color);
  margin-right: var(--space-1);
}

.analysis-omi__text {
  color: var(--color-text-body);
}

.analysis-omi--observation {
  --omi-color: #2563eb; /* blue */
  --omi-bg: rgba(37, 99, 235, 0.06);
}

.analysis-omi--mechanism {
  --omi-color: #d97706; /* amber */
  --omi-bg: rgba(217, 119, 6, 0.06);
}

.analysis-omi--impact {
  --omi-color: #dc2626; /* red */
  --omi-bg: rgba(220, 38, 38, 0.06);
}

/* Secondary explanation heading inside <details> */
.analysis-detail__finding-explanation-heading {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 var(--space-2);
}

/* -----------------------------------------------------------------------------
   Information value bullets (TK11)
   ----------------------------------------------------------------------------- */
.analysis-detail__iv-intro {
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--space-2);
}

.analysis-detail__iv-bullets {
  margin: 0 0 var(--space-3) var(--space-4);
  padding: 0;
}

.analysis-detail__iv-bullets li {
  margin-bottom: var(--space-1);
  line-height: var(--line-height-relaxed);
}

/* -----------------------------------------------------------------------------
   IV scores block (TK12)
   Wraps the two numeric scores in a shaded panel so they stand apart visually
   from the bullet list above.
   ----------------------------------------------------------------------------- */
.analysis-detail__iv-stats-block {
  margin-top: var(--space-4);
  padding: var(--space-3);
  background: var(--color-slate-50);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
}

.analysis-detail__iv-stats-title {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  margin: 0 0 var(--space-2);
  color: var(--color-text-body);
}

/* -----------------------------------------------------------------------------
   Finding-card title (TK14)
   Replaces the inline <strong> + .sub-badge layout with a proper heading so the
   bias-term name has accessible heading semantics within the card.
   ----------------------------------------------------------------------------- */
.analysis-detail__finding-title {
  font-size: 1.05rem;
  font-weight: var(--font-weight-bold);
  margin: 0 0 var(--space-2);
  color: var(--color-navy-900);
}

/* -----------------------------------------------------------------------------
   Quote caption + clamp (TK19/TK21)
   ----------------------------------------------------------------------------- */
.analysis-detail__quote-wrap {
  margin: 0 0 var(--space-2);
}

.analysis-detail__quote-caption {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-1);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* Clamp long blockquotes to 6 lines; JS toggles data-expanded to remove the clamp. */
.analysis-detail__quote[data-clampable] {
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
  cursor: pointer;
  position: relative;
}

.analysis-detail__quote[data-clampable][data-expanded="true"] {
  -webkit-line-clamp: unset;
  overflow: visible;
}

/* -----------------------------------------------------------------------------
   Analyses list two-line item (C — My URLs tab + Public tab)
   Article title is the primary link; URL is muted secondary text.
   ----------------------------------------------------------------------------- */
.analysis-list-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.analysis-list-item__title {
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
  color: var(--color-text-body);
  word-break: break-word;
}

.analysis-list-item__title:hover {
  text-decoration: underline;
}

.analysis-list-item__meta {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
}

.analysis-list-item__domain {
  font-weight: var(--font-weight-medium);
  flex-shrink: 0;
  color: var(--color-text-secondary);
  text-decoration: none;
}

a.analysis-list-item__domain:hover {
  text-decoration: underline;
  color: var(--color-text-primary);
}

.analysis-list-item__url {
  display: inline-block;
  max-width: 36ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}


/* -----------------------------------------------------------------------------
   API documentation (developer guide) — /dashboard/api
   ----------------------------------------------------------------------------- */
.api-docs {
  margin-top: var(--space-6);
}

.api-docs__main {
  max-width: 900px;
}

.api-docs__section {
  margin-top: var(--space-10);
  scroll-margin-top: calc(var(--nav-height) + var(--space-4));
}

.api-docs__h2 {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-navy-900);
  margin-bottom: var(--space-3);
}

.api-docs__h3 {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-navy-900);
  margin: var(--space-6) 0 var(--space-3);
}

.api-docs p {
  color: var(--color-text-body);
  line-height: var(--line-height-relaxed);
  margin-bottom: var(--space-3);
}

.api-docs__note {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.api-docs code {
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
  font-size: 0.85em;
  background-color: var(--color-slate-100);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0.1em 0.35em;
  color: var(--color-navy-800);
  word-break: break-word;
}

/* API key call-to-action banner */
.api-docs__callout {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  flex-wrap: wrap;
  background-color: var(--color-blue-100);
  border: 1px solid var(--color-blue-400);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-6);
}

.api-docs__callout-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-navy-900);
  margin-bottom: var(--space-1);
}

.api-docs__callout-body {
  margin: 0;
  color: var(--color-navy-700);
  font-size: var(--font-size-sm);
}

/* Definition list for base URL / auth header */
.api-docs__meta {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--space-2) var(--space-6);
  margin: var(--space-4) 0;
}

.api-docs__meta dt {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
}

.api-docs__meta dd {
  margin: 0;
}

/* Endpoint overview table */
.api-docs__table-wrap {
  overflow-x: auto;
}

.api-docs__table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
}

.api-docs__table th,
.api-docs__table td {
  text-align: left;
  padding: var(--space-3);
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
}

.api-docs__table th {
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-semibold);
}

.http-method {
  display: inline-block;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  border-radius: var(--radius-sm);
  padding: 0.15em 0.5em;
  color: var(--color-white);
}

.http-method--get  { background-color: #0e7490; }
.http-method--post { background-color: #15803d; }

/* Status / field bullet lists */
.api-docs__status-list,
.api-docs__field-list {
  list-style: none;
  margin: var(--space-3) 0;
  padding: 0;
}

.api-docs__status-list li,
.api-docs__field-list li {
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-slate-100);
  color: var(--color-text-body);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
}

/* Tabbed code samples */
.code-tabs {
  margin: var(--space-4) 0;
  border: 1px solid var(--color-border-dark);
  border-radius: var(--radius-md);
  overflow: hidden;
  background-color: var(--color-navy-900);
}

.code-tabs__bar {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  background-color: var(--color-navy-800);
  border-bottom: 1px solid var(--color-border-dark);
}

.code-tabs__buttons {
  display: flex;
  flex-wrap: wrap;
}

.code-tabs__btn {
  appearance: none;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: #94a3b8;
  font-family: inherit;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.code-tabs__btn:hover {
  color: var(--color-white);
}

.code-tabs__btn--active {
  color: var(--color-white);
  border-bottom-color: var(--color-blue-500);
}

.code-tabs__copy {
  appearance: none;
  background: transparent;
  border: none;
  color: #94a3b8;
  font-family: inherit;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
  transition: color var(--transition-fast);
}

.code-tabs__copy:hover {
  color: var(--color-white);
}

.code-tabs__panel {
  display: none;
}

.code-tabs__panel--active {
  display: block;
}

.code-tabs__panel pre {
  margin: 0;
  padding: var(--space-4);
  overflow-x: auto;
}

.code-tabs__panel code {
  display: block;
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
  color: #e2e8f0;
  background: transparent;
  border: none;
  padding: 0;
  white-space: pre;
  word-break: normal;
}

@media (max-width: 640px) {
  .api-docs__callout {
    flex-direction: column;
    align-items: flex-start;
  }

  .api-docs__meta {
    grid-template-columns: 1fr;
    gap: var(--space-1) 0;
  }
}