/* dodoAI — site stylesheet — dodo- prefix */

/* =========================================================
   CUSTOM PROPERTIES
   ========================================================= */
:root {
  --bg-void: #0a0e17;
  --bg-deep: #0e1520;
  --bg-surface: #141c2b;
  --bg-raised: #1a2438;
  --bg-light: #f4f5f7;
  --bg-white: #ffffff;
  --bg-cream: #f8f9fa;

  --text-on-dark-primary: #e8ecf2;
  --text-on-dark-muted: #8a95a8;
  --text-on-dark-subtle: #4e5a6d;
  --text-on-light-primary: #111827;
  --text-on-light-muted: #4b5563;
  --text-on-light-subtle: #9ca3af;

  --accent-green: #00c27a;
  --accent-green-dim: #009e63;
  --accent-green-glow: rgba(0, 194, 122, 0.15);

  --border-dark: rgba(255, 255, 255, 0.08);
  --border-light: rgba(0, 0, 0, 0.10);

  --status-ok: #00c27a;
  --status-warn: #f59e0b;
  --status-neutral: #60a5fa;

  --font-heading: 'Sora', Inter, system-ui, -apple-system, sans-serif;
  --font-body: 'DM Sans', Inter, system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'Courier New', monospace;

  --scale-display: clamp(2.8rem, 5vw, 4.2rem);
  --scale-h1: clamp(2rem, 3.5vw, 3rem);
  --scale-h2: clamp(1.5rem, 2.5vw, 2rem);
  --scale-h3: 1.25rem;
  --scale-body: 1rem;
  --scale-small: 0.875rem;
  --scale-mono: 0.8125rem;

  --radius-component: 4px;
  --radius-card: 8px;
  --radius-badge: 2px;

  --container-max: 1200px;
  --container-wide: 1400px;
  --section-pad-desktop: 96px;
  --section-pad-tablet: 64px;
  --section-pad-mobile: 48px;

  --nav-height: 72px;
  --transition-base: 0.2s ease;
}

/* =========================================================
   RESET & BASE
   ========================================================= */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

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

body {
  font-family: var(--font-body);
  font-size: var(--scale-body);
  line-height: 1.6;
  background: var(--bg-void);
  color: var(--text-on-dark-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  line-height: 1.15;
}

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

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

button {
  cursor: pointer;
  font-family: var(--font-body);
  border: none;
  background: none;
}

ul, ol {
  list-style: none;
}

table {
  border-collapse: collapse;
  width: 100%;
}

/* =========================================================
   LAYOUT UTILITIES
   ========================================================= */
.dodo-container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}

.dodo-container--wide {
  max-width: var(--container-wide);
}

/* =========================================================
   PAGE THEME CLASSES
   ========================================================= */
.dodo-page--dark-top {
  background: var(--bg-void);
}

.dodo-page--light-top {
  background: var(--bg-white);
}

/* =========================================================
   SECTION BACKGROUNDS
   ========================================================= */
.dodo-section--dark {
  background: var(--bg-void);
}

.dodo-section--dark-alt {
  background: var(--bg-deep);
}

.dodo-section--surface {
  background: var(--bg-surface);
}

.dodo-section--light {
  background: var(--bg-light);
}

.dodo-section--cream {
  background: var(--bg-cream);
}

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

/* =========================================================
   NAV
   ========================================================= */
.dodo-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  height: var(--nav-height);
  display: flex;
  align-items: center;
  transition: background var(--transition-base), border-bottom var(--transition-base);
}

.dodo-page--dark-top .dodo-nav {
  background: transparent;
  border-bottom: 1px solid transparent;
}

.dodo-page--light-top .dodo-nav {
  background: var(--bg-white);
  border-bottom: 1px solid var(--border-light);
}

.dodo-nav--scrolled {
  background: var(--bg-deep) !important;
  border-bottom: 1px solid var(--border-dark) !important;
}

.dodo-nav__inner {
  display: flex;
  align-items: center;
  gap: 2rem;
  width: 100%;
}

.dodo-nav__logo {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.dodo-nav__logo img {
  height: 36px;
  width: auto;
}

.dodo-nav__logo-dark {
  display: none;
}

.dodo-nav__logo-light {
  display: block;
}

.dodo-page--light-top .dodo-nav:not(.dodo-nav--scrolled) .dodo-nav__logo-dark {
  display: block;
}

.dodo-page--light-top .dodo-nav:not(.dodo-nav--scrolled) .dodo-nav__logo-light {
  display: none;
}

.dodo-page--dark-top .dodo-nav--scrolled .dodo-nav__logo-dark {
  display: none !important;
}

.dodo-page--dark-top .dodo-nav--scrolled .dodo-nav__logo-light {
  display: block !important;
}

.dodo-page--light-top .dodo-nav--scrolled .dodo-nav__logo-dark {
  display: none !important;
}

.dodo-page--light-top .dodo-nav--scrolled .dodo-nav__logo-light {
  display: block !important;
}

.dodo-nav__links {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin-left: auto;
}

.dodo-nav__link {
  font-size: 0.9375rem;
  font-weight: 500;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-component);
  transition: color var(--transition-base), background var(--transition-base);
  display: flex;
  align-items: center;
  gap: 0.35rem;
  white-space: nowrap;
}

.dodo-page--dark-top .dodo-nav:not(.dodo-nav--scrolled) .dodo-nav__link {
  color: var(--text-on-dark-primary);
}

.dodo-page--dark-top .dodo-nav:not(.dodo-nav--scrolled) .dodo-nav__link:hover {
  color: var(--accent-green);
  background: var(--accent-green-glow);
}

.dodo-page--light-top .dodo-nav:not(.dodo-nav--scrolled) .dodo-nav__link {
  color: var(--text-on-light-primary);
}

.dodo-page--light-top .dodo-nav:not(.dodo-nav--scrolled) .dodo-nav__link:hover {
  color: var(--accent-green-dim);
  background: rgba(0, 194, 122, 0.08);
}

.dodo-nav--scrolled .dodo-nav__link {
  color: var(--text-on-dark-primary) !important;
}

.dodo-nav--scrolled .dodo-nav__link:hover {
  color: var(--accent-green) !important;
  background: var(--accent-green-glow) !important;
}

.dodo-nav__cta-wrap {
  margin-left: 1rem;
  flex-shrink: 0;
}

.dodo-nav__hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 0.5rem;
  margin-left: auto;
  cursor: pointer;
  background: none;
  border: none;
}

.dodo-nav__hamburger-bar {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--text-on-dark-primary);
  border-radius: 2px;
  transition: background var(--transition-base), transform var(--transition-base), opacity var(--transition-base);
}

.dodo-page--light-top .dodo-nav:not(.dodo-nav--scrolled) .dodo-nav__hamburger-bar {
  background: var(--text-on-light-primary);
}

.dodo-nav--scrolled .dodo-nav__hamburger-bar {
  background: var(--text-on-dark-primary) !important;
}

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

.dodo-nav__hamburger[aria-expanded="true"] .dodo-nav__hamburger-bar:nth-child(2) {
  opacity: 0;
}

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

.dodo-nav__mobile-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--bg-deep);
  z-index: 999;
  flex-direction: column;
  padding: calc(var(--nav-height) + 2rem) 2rem 2rem;
  overflow-y: auto;
}

.dodo-nav__mobile-overlay.dodo-nav__mobile-overlay--open {
  display: flex;
}

.dodo-nav__mobile-links {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
}

.dodo-nav__mobile-link {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text-on-dark-primary);
  padding: 0.875rem 1rem;
  border-radius: var(--radius-component);
  border-bottom: 1px solid var(--border-dark);
  transition: color var(--transition-base);
}

.dodo-nav__mobile-link:hover {
  color: var(--accent-green);
}

.dodo-nav__mobile-cta {
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border-dark);
}

/* =========================================================
   BUTTONS
   ========================================================= */
.dodo-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 600;
  border-radius: var(--radius-component);
  transition: background var(--transition-base), color var(--transition-base), border-color var(--transition-base), opacity var(--transition-base);
  white-space: nowrap;
  cursor: pointer;
  line-height: 1;
}

.dodo-btn--primary {
  background: var(--accent-green);
  color: var(--bg-void);
  border: 1px solid var(--accent-green);
}

.dodo-btn--primary:hover {
  background: var(--accent-green-dim);
  border-color: var(--accent-green-dim);
  color: var(--bg-void);
}

.dodo-btn--outline-dark {
  background: transparent;
  color: var(--text-on-light-primary);
  border: 1px solid var(--border-light);
}

.dodo-btn--outline-dark:hover {
  border-color: var(--text-on-light-muted);
  color: var(--text-on-light-primary);
}

.dodo-btn--ghost-on-dark {
  background: transparent;
  color: var(--text-on-dark-primary);
  border: 1px solid var(--border-dark);
}

.dodo-btn--ghost-on-dark:hover {
  border-color: var(--text-on-dark-muted);
  color: var(--text-on-dark-primary);
}

.dodo-btn--ghost-on-light {
  background: transparent;
  color: var(--text-on-light-muted);
  border: 1px solid var(--border-light);
}

.dodo-btn--ghost-on-light:hover {
  border-color: var(--accent-green);
  color: var(--accent-green-dim);
}

.dodo-btn--link-arrow {
  background: none;
  border: none;
  padding: 0;
  color: var(--accent-green);
  font-weight: 600;
  gap: 0.35rem;
}

.dodo-btn--link-arrow:hover {
  color: var(--accent-green-dim);
}

.dodo-btn--sm {
  padding: 0.5rem 1rem;
  font-size: var(--scale-small);
}

/* =========================================================
   BADGES & LABELS
   ========================================================= */
.dodo-badge {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.25rem 0.625rem;
  border-radius: var(--radius-badge);
  background: var(--accent-green-glow);
  color: var(--accent-green);
  border: 1px solid rgba(0, 194, 122, 0.25);
}

.dodo-section-label {
  display: block;
  font-size: var(--scale-small);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

.dodo-section--dark .dodo-section-label,
.dodo-section--dark-alt .dodo-section-label,
.dodo-section--surface .dodo-section-label {
  color: var(--accent-green);
}

.dodo-section--light .dodo-section-label,
.dodo-section--cream .dodo-section-label,
.dodo-section--white .dodo-section-label {
  color: var(--accent-green-dim);
}

/* =========================================================
   HERO — INDEX (HERO-SPLIT)
   ========================================================= */
.dodo-hero {
  padding-top: calc(var(--nav-height) + 80px);
  padding-bottom: 96px;
  background: var(--bg-void);
  position: relative;
  overflow: hidden;
}

.dodo-hero__bg-pattern {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.35;
}

.dodo-hero__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}

.dodo-hero__content {
  max-width: 600px;
}

.dodo-hero__eyebrow {
  display: inline-block;
  font-size: var(--scale-small);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-green);
  margin-bottom: 1.5rem;
}

.dodo-hero__h1 {
  font-size: var(--scale-display);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--text-on-dark-primary);
  line-height: 1.08;
  margin-bottom: 1.5rem;
}

.dodo-hero__sub {
  font-size: 1.125rem;
  line-height: 1.7;
  color: var(--text-on-dark-muted);
  margin-bottom: 2.5rem;
  max-width: 540px;
}

.dodo-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.dodo-hero__media {
  position: relative;
  border-radius: var(--radius-card);
  overflow: hidden;
  border: 1px solid var(--border-dark);
}

.dodo-hero__media img {
  width: 100%;
  height: auto;
  aspect-ratio: 3/2;
  object-fit: cover;
  display: block;
}

.dodo-hero__media-glow {
  position: absolute;
  bottom: -40px;
  left: 50%;
  transform: translateX(-50%);
  width: 300px;
  height: 200px;
  background: radial-gradient(ellipse, rgba(0, 194, 122, 0.2) 0%, transparent 70%);
  pointer-events: none;
}

/* =========================================================
   TRUST STRIP / METRICS STRIP
   ========================================================= */
.dodo-trust-strip {
  padding: 40px 0;
  background: var(--bg-deep);
  border-top: 1px solid var(--border-dark);
  border-bottom: 1px solid var(--border-dark);
}

.dodo-trust-strip__inner {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0;
}

.dodo-trust-strip__item {
  padding: 1rem 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.dodo-trust-strip__item + .dodo-trust-strip__item {
  border-left: 1px solid var(--border-dark);
}

.dodo-trust-strip__value {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--accent-green);
  margin-bottom: 0.375rem;
}

.dodo-trust-strip__label {
  font-size: var(--scale-small);
  color: var(--text-on-dark-muted);
  line-height: 1.4;
}

/* =========================================================
   SECTION PADDING UTILITY
   ========================================================= */
.dodo-section {
  padding-top: var(--section-pad-desktop);
  padding-bottom: var(--section-pad-desktop);
}

/* =========================================================
   PROBLEM STATEMENT / THESIS SECTION
   ========================================================= */
.dodo-thesis {
  background: var(--bg-surface);
}

.dodo-thesis__inner {
  max-width: 900px;
  margin-inline: auto;
  text-align: center;
}

.dodo-thesis__quote {
  font-family: var(--font-heading);
  font-size: clamp(1.375rem, 2.5vw, 1.875rem);
  font-weight: 300;
  line-height: 1.5;
  color: var(--text-on-dark-primary);
  margin-bottom: 2.5rem;
}

.dodo-thesis__quote em {
  font-style: normal;
  color: var(--accent-green);
}

.dodo-thesis__attribution {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.dodo-thesis__attribution-line {
  width: 2rem;
  height: 1px;
  background: var(--border-dark);
}

.dodo-thesis__attribution-name {
  font-size: var(--scale-small);
  font-weight: 600;
  color: var(--text-on-dark-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* =========================================================
   HOW IT WORKS / PROCESS VISUAL
   ========================================================= */
.dodo-process {
  background: var(--bg-surface);
}

.dodo-process__header {
  text-align: center;
  margin-bottom: 4rem;
}

.dodo-process__title {
  font-size: var(--scale-h2);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text-on-dark-primary);
}

.dodo-process__steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  position: relative;
}

.dodo-process__step {
  position: relative;
  padding: 2rem;
  background: var(--bg-raised);
  border: 1px solid var(--border-dark);
  border-radius: var(--radius-card);
}

.dodo-process__step-num {
  font-family: var(--font-heading);
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--accent-green);
  opacity: 0.4;
  line-height: 1;
  margin-bottom: 1rem;
}

.dodo-process__step-title {
  font-size: var(--scale-h3);
  font-weight: 600;
  color: var(--text-on-dark-primary);
  margin-bottom: 0.75rem;
}

.dodo-process__step-desc {
  font-size: var(--scale-small);
  color: var(--text-on-dark-muted);
  line-height: 1.6;
}

/* =========================================================
   USE CASE CARDS (3-COL ON LIGHT BG)
   ========================================================= */
.dodo-usecase-section {
  background: var(--bg-light);
}

.dodo-usecase-section__header {
  text-align: center;
  margin-bottom: 3rem;
}

.dodo-usecase-section__title {
  font-size: var(--scale-h2);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text-on-light-primary);
}

.dodo-usecase-section__sub {
  font-size: 1.0625rem;
  color: var(--text-on-light-muted);
  margin-top: 0.75rem;
}

.dodo-usecase-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.dodo-usecase-card {
  background: var(--bg-deep);
  border: 1px solid var(--border-dark);
  border-left: 3px solid var(--accent-green);
  border-radius: var(--radius-card);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  transition: border-color var(--transition-base), transform var(--transition-base);
}

.dodo-usecase-card:hover {
  border-left-color: var(--accent-green);
  transform: translateY(-2px);
}

.dodo-usecase-card__icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-green-glow);
  border-radius: var(--radius-component);
  color: var(--accent-green);
  font-size: 1.375rem;
  flex-shrink: 0;
}

.dodo-usecase-card__title {
  font-family: var(--font-heading);
  font-size: var(--scale-h3);
  font-weight: 600;
  color: var(--text-on-dark-primary);
}

.dodo-usecase-card__desc {
  font-size: var(--scale-small);
  color: var(--text-on-dark-muted);
  line-height: 1.65;
  flex: 1;
}

.dodo-usecase-card__link {
  font-size: var(--scale-small);
  font-weight: 600;
  color: var(--accent-green);
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: auto;
}

.dodo-usecase-card__link:hover {
  color: var(--accent-green-dim);
}

/* =========================================================
   DEPLOYMENT ARCHITECTURE SPLIT
   ========================================================= */
.dodo-arch-split {
  background: var(--bg-cream);
}

.dodo-arch-split__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: center;
}

.dodo-arch-split__title {
  font-size: var(--scale-h2);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text-on-light-primary);
  margin-bottom: 1.5rem;
}

.dodo-arch-split__list {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  margin-bottom: 2rem;
}

.dodo-arch-split__list-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.9375rem;
  color: var(--text-on-light-muted);
  line-height: 1.5;
}

.dodo-arch-split__list-icon {
  color: var(--accent-green);
  margin-top: 0.2rem;
  flex-shrink: 0;
}

.dodo-arch-split__diagram {
  background: var(--bg-surface);
  border-radius: var(--radius-card);
  padding: 2.5rem;
  border: 1px solid var(--border-dark);
}

/* =========================================================
   CTA BAND
   ========================================================= */
.dodo-cta-band {
  background: var(--bg-void);
  text-align: center;
}

.dodo-cta-band--light {
  background: var(--bg-cream);
}

.dodo-cta-band__inner {
  max-width: 640px;
  margin-inline: auto;
}

.dodo-cta-band__title {
  font-size: var(--scale-h2);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text-on-dark-primary);
  margin-bottom: 1rem;
}

.dodo-cta-band--light .dodo-cta-band__title {
  color: var(--text-on-light-primary);
}

.dodo-cta-band__sub {
  font-size: 1.0625rem;
  color: var(--text-on-dark-muted);
  margin-bottom: 2.5rem;
  line-height: 1.6;
}

.dodo-cta-band--light .dodo-cta-band__sub {
  color: var(--text-on-light-muted);
}

.dodo-cta-band__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}

/* =========================================================
   FOOTER
   ========================================================= */
.dodo-footer {
  background: var(--bg-deep);
  border-top: 1px solid var(--border-dark);
  padding-top: 64px;
  padding-bottom: 40px;
}

.dodo-footer__main {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 3rem;
  margin-bottom: 4rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid var(--border-dark);
}

.dodo-footer__brand {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.dodo-footer__logo img {
  height: 32px;
  width: auto;
}

.dodo-footer__tagline {
  font-size: var(--scale-small);
  color: var(--text-on-dark-muted);
  line-height: 1.6;
  max-width: 260px;
}

.dodo-footer__col {
  display: flex;
  flex-direction: column;
}

.dodo-footer__col-title {
  font-family: var(--font-heading);
  font-size: var(--scale-small);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-on-dark-subtle);
  margin-bottom: 1.25rem;
}

.dodo-footer__col-links {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.dodo-footer__col-link {
  font-size: 0.9375rem;
  color: var(--text-on-dark-muted);
  transition: color var(--transition-base);
}

.dodo-footer__col-link:hover {
  color: var(--text-on-dark-primary);
}

.dodo-footer__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.dodo-footer__copyright {
  font-size: var(--scale-small);
  color: var(--text-on-dark-subtle);
}

.dodo-footer__address {
  font-size: var(--scale-small);
  color: var(--text-on-dark-subtle);
  font-style: normal;
}

.dodo-footer__address-link {
  color: var(--text-on-dark-subtle);
  transition: color var(--transition-base);
}

.dodo-footer__address-link:hover {
  color: var(--text-on-dark-muted);
}

.dodo-footer__legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  align-items: center;
}

.dodo-footer__legal-link {
  font-size: var(--scale-small);
  color: var(--text-on-dark-subtle);
  transition: color var(--transition-base);
}

.dodo-footer__legal-link:hover {
  color: var(--text-on-dark-muted);
}

/* =========================================================
   SUB-PAGE HERO
   ========================================================= */
.dodo-sub-hero {
  padding-top: calc(var(--nav-height) + 72px);
  padding-bottom: 72px;
  position: relative;
  overflow: hidden;
}

.dodo-sub-hero--dark {
  background: var(--bg-void);
}

.dodo-sub-hero--dark .dodo-sub-hero__eyebrow {
  color: var(--accent-green);
}

.dodo-sub-hero--dark .dodo-sub-hero__breadcrumb {
  color: var(--text-on-dark-muted);
}

.dodo-sub-hero--dark .dodo-sub-hero__breadcrumb a {
  color: var(--text-on-dark-muted);
}

.dodo-sub-hero--dark .dodo-sub-hero__title {
  color: var(--text-on-dark-primary);
}

.dodo-sub-hero--dark .dodo-sub-hero__sub {
  color: var(--text-on-dark-muted);
}

.dodo-sub-hero--light {
  background: var(--bg-light);
}

.dodo-sub-hero--light .dodo-sub-hero__eyebrow {
  color: var(--accent-green-dim);
}

.dodo-sub-hero--light .dodo-sub-hero__breadcrumb {
  color: var(--text-on-light-muted);
}

.dodo-sub-hero--light .dodo-sub-hero__breadcrumb a {
  color: var(--text-on-light-muted);
}

.dodo-sub-hero--light .dodo-sub-hero__title {
  color: var(--text-on-light-primary);
}

.dodo-sub-hero--light .dodo-sub-hero__sub {
  color: var(--text-on-light-muted);
}

.dodo-sub-hero__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}

.dodo-sub-hero__inner--centered {
  display: block;
  max-width: 720px;
}

.dodo-sub-hero__breadcrumb {
  font-size: var(--scale-small);
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.dodo-sub-hero__breadcrumb a {
  transition: color var(--transition-base);
}

.dodo-sub-hero__breadcrumb a:hover {
  color: var(--accent-green);
}

.dodo-sub-hero__eyebrow {
  display: block;
  font-size: var(--scale-small);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

.dodo-sub-hero__title {
  font-size: var(--scale-h1);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-bottom: 1.25rem;
}

.dodo-sub-hero__sub {
  font-size: 1.0625rem;
  line-height: 1.7;
  max-width: 580px;
}

.dodo-sub-hero__ornament {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* =========================================================
   PLATFORM LAYERS / 3-COL CARDS (DARK)
   ========================================================= */
.dodo-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.dodo-card-grid--2col {
  grid-template-columns: repeat(2, 1fr);
}

.dodo-card-grid--4col {
  grid-template-columns: repeat(4, 1fr);
}

.dodo-card--dark {
  background: var(--bg-surface);
  border: 1px solid var(--border-dark);
  border-radius: var(--radius-card);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  transition: border-color var(--transition-base), transform var(--transition-base);
}

.dodo-card--dark:hover {
  border-color: rgba(0, 194, 122, 0.3);
  transform: translateY(-2px);
}

.dodo-card--dark.dodo-card--link {
  cursor: pointer;
}

.dodo-card--light {
  background: var(--bg-white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-card);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

.dodo-card--light:hover {
  border-color: rgba(0, 194, 122, 0.3);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
}

.dodo-card__icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-green-glow);
  border-radius: var(--radius-component);
  color: var(--accent-green);
  font-size: 1.25rem;
  flex-shrink: 0;
}

.dodo-card--dark .dodo-card__title {
  font-family: var(--font-heading);
  font-size: var(--scale-h3);
  font-weight: 600;
  color: var(--text-on-dark-primary);
}

.dodo-card--dark .dodo-card__desc {
  font-size: var(--scale-small);
  color: var(--text-on-dark-muted);
  line-height: 1.65;
  flex: 1;
}

.dodo-card--dark .dodo-card__link {
  font-size: var(--scale-small);
  font-weight: 600;
  color: var(--accent-green);
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: auto;
  color: var(--accent-green);
}

.dodo-card--dark .dodo-card__link:hover {
  color: var(--accent-green-dim);
}

.dodo-card--light .dodo-card__title {
  font-family: var(--font-heading);
  font-size: var(--scale-h3);
  font-weight: 600;
  color: var(--text-on-light-primary);
}

.dodo-card--light .dodo-card__desc {
  font-size: var(--scale-small);
  color: var(--text-on-light-muted);
  line-height: 1.65;
  flex: 1;
}

.dodo-card--light .dodo-card__link {
  font-size: var(--scale-small);
  font-weight: 600;
  color: var(--accent-green-dim);
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: auto;
}

.dodo-card--light .dodo-card__link:hover {
  color: var(--accent-green);
}

/* =========================================================
   FEATURE GRID (2-COL, DARK)
   ========================================================= */
.dodo-feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.dodo-feature-tile {
  padding: 1.75rem;
  background: var(--bg-raised);
  border: 1px solid var(--border-dark);
  border-radius: var(--radius-card);
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

.dodo-feature-tile__icon {
  color: var(--accent-green);
  font-size: 1.375rem;
}

.dodo-feature-tile__title {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-on-dark-primary);
}

.dodo-feature-tile__desc {
  font-size: var(--scale-small);
  color: var(--text-on-dark-muted);
  line-height: 1.6;
}

/* =========================================================
   INLINE MOCK TERMINAL
   ========================================================= */
.dodo-terminal {
  background: #080d14;
  border: 1px solid var(--border-dark);
  border-radius: var(--radius-card);
  overflow: hidden;
}

.dodo-terminal__titlebar {
  background: var(--bg-raised);
  padding: 0.75rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border-bottom: 1px solid var(--border-dark);
}

.dodo-terminal__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.dodo-terminal__dot--red {
  background: #ff5f57;
}

.dodo-terminal__dot--yellow {
  background: #febc2e;
}

.dodo-terminal__dot--green {
  background: #28c840;
}

.dodo-terminal__title {
  font-size: var(--scale-small);
  color: var(--text-on-dark-muted);
  font-family: var(--font-mono);
  margin-left: 0.5rem;
}

.dodo-terminal__body {
  padding: 1.5rem 1.75rem;
  font-family: var(--font-mono);
  font-size: var(--scale-mono);
  line-height: 1.8;
}

.dodo-terminal__line {
  display: block;
  color: var(--text-on-dark-primary);
}

.dodo-terminal__line--pass {
  color: var(--status-ok);
}

.dodo-terminal__line--escalate {
  color: var(--status-warn);
}

.dodo-terminal__line--muted {
  color: var(--text-on-dark-muted);
}

.dodo-terminal__line--prompt {
  color: var(--text-on-dark-subtle);
}

/* =========================================================
   NUMBERED TIMELINE
   ========================================================= */
.dodo-timeline {
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
}

.dodo-timeline::before {
  content: '';
  position: absolute;
  left: 20px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--border-light);
}

.dodo-timeline__item {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 1.5rem;
  padding: 1.75rem 0;
  border-bottom: 1px solid var(--border-light);
  position: relative;
}

.dodo-timeline__item:last-child {
  border-bottom: none;
}

.dodo-timeline__num {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--accent-green);
  color: var(--bg-void);
  font-family: var(--font-heading);
  font-size: var(--scale-small);
  font-weight: 700;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

.dodo-timeline__content {
  padding-top: 0.5rem;
}

.dodo-timeline__label {
  font-size: var(--scale-small);
  font-weight: 600;
  color: var(--accent-green-dim);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.5rem;
}

.dodo-timeline__title {
  font-family: var(--font-heading);
  font-size: var(--scale-h3);
  font-weight: 600;
  color: var(--text-on-light-primary);
  margin-bottom: 0.5rem;
}

.dodo-timeline__desc {
  font-size: 0.9375rem;
  color: var(--text-on-light-muted);
  line-height: 1.6;
}

/* =========================================================
   SPEC TABLE
   ========================================================= */
.dodo-spec-table {
  width: 100%;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-card);
  overflow: hidden;
}

.dodo-spec-table th {
  background: var(--bg-light);
  padding: 0.875rem 1.25rem;
  text-align: left;
  font-size: var(--scale-small);
  font-weight: 600;
  color: var(--text-on-light-primary);
  border-bottom: 1px solid var(--border-light);
}

.dodo-spec-table td {
  padding: 0.875rem 1.25rem;
  font-size: 0.9375rem;
  color: var(--text-on-light-muted);
  border-bottom: 1px solid var(--border-light);
  vertical-align: top;
}

.dodo-spec-table tr:last-child td {
  border-bottom: none;
}

.dodo-spec-table tr:hover td {
  background: rgba(0, 0, 0, 0.02);
}

/* =========================================================
   INTEGRATION GRID
   ========================================================= */
.dodo-integration-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

.dodo-integration-tile {
  background: var(--bg-white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-card);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.75rem;
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

.dodo-integration-tile:hover {
  border-color: rgba(0, 194, 122, 0.3);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

.dodo-integration-tile__icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-light);
  border-radius: var(--radius-component);
  color: var(--text-on-light-muted);
  font-size: 1.25rem;
}

.dodo-integration-tile__name {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text-on-light-primary);
}

.dodo-integration-tile__method {
  font-size: 0.75rem;
  font-family: var(--font-mono);
  color: var(--accent-green-dim);
  background: rgba(0, 194, 122, 0.08);
  padding: 0.2rem 0.5rem;
  border-radius: var(--radius-badge);
}

/* =========================================================
   CALLOUT BLOCK
   ========================================================= */
.dodo-callout {
  background: var(--bg-cream);
  border: 1px solid var(--border-light);
  border-left: 4px solid var(--accent-green);
  border-radius: var(--radius-card);
  padding: 2rem 2.5rem;
}

.dodo-callout--dark {
  background: var(--bg-surface);
  border-color: var(--border-dark);
  border-left: 4px solid var(--accent-green);
}

.dodo-callout__label {
  font-size: var(--scale-small);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-green);
  margin-bottom: 0.75rem;
}

.dodo-callout__title {
  font-family: var(--font-heading);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--text-on-light-primary);
  margin-bottom: 0.75rem;
}

.dodo-callout--dark .dodo-callout__title {
  color: var(--text-on-dark-primary);
}

.dodo-callout__body {
  font-size: 0.9375rem;
  color: var(--text-on-light-muted);
  line-height: 1.7;
}

.dodo-callout--dark .dodo-callout__body {
  color: var(--text-on-dark-muted);
}

/* =========================================================
   PROBLEM-SOLUTION SPLIT
   ========================================================= */
.dodo-prob-sol {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: start;
}

.dodo-prob-sol__col-label {
  font-size: var(--scale-small);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 1.25rem;
}

.dodo-prob-sol__problem .dodo-prob-sol__col-label {
  color: var(--status-warn);
}

.dodo-prob-sol__solution .dodo-prob-sol__col-label {
  color: var(--status-ok);
}

.dodo-prob-sol__title {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text-on-light-primary);
  margin-bottom: 1rem;
}

.dodo-prob-sol__list {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

.dodo-prob-sol__list-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.9375rem;
  color: var(--text-on-light-muted);
  line-height: 1.5;
}

.dodo-prob-sol__problem .dodo-prob-sol__list-item i {
  color: var(--status-warn);
  margin-top: 0.15rem;
}

.dodo-prob-sol__solution .dodo-prob-sol__list-item i {
  color: var(--status-ok);
  margin-top: 0.15rem;
}

/* =========================================================
   METRICS ROW (3 PLAUSIBLE METRICS)
   ========================================================= */
.dodo-metrics-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.dodo-metric-card {
  background: var(--bg-white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-card);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.dodo-metric-card__value {
  font-family: var(--font-heading);
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--accent-green-dim);
  line-height: 1;
}

.dodo-metric-card__label {
  font-size: 0.9375rem;
  color: var(--text-on-light-primary);
  font-weight: 600;
  line-height: 1.4;
}

.dodo-metric-card__desc {
  font-size: var(--scale-small);
  color: var(--text-on-light-muted);
  line-height: 1.6;
}

/* =========================================================
   SECURITY PRINCIPLES GRID
   ========================================================= */
.dodo-principles-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.dodo-principle-card {
  background: var(--bg-raised);
  border: 1px solid var(--border-dark);
  border-radius: var(--radius-card);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

.dodo-principle-card__icon {
  color: var(--accent-green);
  font-size: 1.5rem;
}

.dodo-principle-card__title {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-on-dark-primary);
}

.dodo-principle-card__desc {
  font-size: var(--scale-small);
  color: var(--text-on-dark-muted);
  line-height: 1.6;
}

/* =========================================================
   ARCHITECTURE CALLOUT (LIGHT)
   ========================================================= */
.dodo-arch-callout {
  background: var(--bg-cream);
}

.dodo-arch-callout__inner {
  max-width: 800px;
  margin-inline: auto;
  text-align: center;
}

.dodo-arch-callout__title {
  font-size: var(--scale-h2);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text-on-light-primary);
  margin-bottom: 1rem;
}

.dodo-arch-callout__caption {
  font-size: 1rem;
  color: var(--text-on-light-muted);
  font-style: italic;
  margin-top: 1.5rem;
}

/* =========================================================
   JAPAN COMPLIANCE NOTE
   ========================================================= */
.dodo-appi-note {
  background: var(--bg-cream);
}

.dodo-appi-note__inner {
  max-width: 800px;
  margin-inline: auto;
}

.dodo-appi-note__title {
  font-family: var(--font-heading);
  font-size: var(--scale-h3);
  font-weight: 600;
  color: var(--text-on-light-primary);
  margin-bottom: 0.875rem;
}

.dodo-appi-note__body {
  font-size: 0.9375rem;
  color: var(--text-on-light-muted);
  line-height: 1.7;
}

/* =========================================================
   FOUNDING STORY / EDITORIAL PROSE
   ========================================================= */
.dodo-prose {
  max-width: 760px;
}

.dodo-page--dark-top .dodo-prose p {
  color: var(--text-on-dark-muted);
  line-height: 1.8;
  margin-bottom: 1.25rem;
}

.dodo-page--light-top .dodo-prose p {
  color: var(--text-on-light-muted);
  line-height: 1.8;
  margin-bottom: 1.25rem;
}

.dodo-prose__title {
  font-size: var(--scale-h2);
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 2rem;
}

.dodo-page--dark-top .dodo-prose__title {
  color: var(--text-on-dark-primary);
}

.dodo-page--light-top .dodo-prose__title {
  color: var(--text-on-light-primary);
}

/* =========================================================
   TEAM GRID
   ========================================================= */
.dodo-team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.dodo-team-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1rem;
}

.dodo-team-card__portrait {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--border-light);
  flex-shrink: 0;
}

.dodo-team-card__portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

.dodo-team-card__name {
  font-family: var(--font-heading);
  font-size: var(--scale-h3);
  font-weight: 600;
  color: var(--text-on-light-primary);
}

.dodo-team-card__title {
  font-size: var(--scale-small);
  color: var(--accent-green-dim);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.dodo-team-card__bio {
  font-size: var(--scale-small);
  color: var(--text-on-light-muted);
  line-height: 1.6;
}

/* =========================================================
   VALUES GRID (DARK)
   ========================================================= */
.dodo-values-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.dodo-value-card {
  background: var(--bg-raised);
  border: 1px solid var(--border-dark);
  border-radius: var(--radius-card);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

.dodo-value-card__num {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--accent-green);
  opacity: 0.5;
}

.dodo-value-card__title {
  font-family: var(--font-heading);
  font-size: var(--scale-h3);
  font-weight: 600;
  color: var(--text-on-dark-primary);
}

.dodo-value-card__desc {
  font-size: var(--scale-small);
  color: var(--text-on-dark-muted);
  line-height: 1.6;
}

/* =========================================================
   BLOG CARD GRID
   ========================================================= */
.dodo-blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.dodo-blog-card {
  display: flex;
  flex-direction: column;
  background: var(--bg-white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-card);
  overflow: hidden;
  transition: box-shadow var(--transition-base), border-color var(--transition-base);
  color: inherit;
}

.dodo-blog-card:hover {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  border-color: rgba(0, 194, 122, 0.25);
}

.dodo-blog-card__cover-wrap {
  aspect-ratio: 16/9;
  overflow: hidden;
  background: var(--bg-light);
}

.dodo-blog-card__cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  height: auto;
  aspect-ratio: 16/9;
  display: block;
  transition: transform 0.4s ease;
}

.dodo-blog-card:hover .dodo-blog-card__cover {
  transform: scale(1.03);
}

.dodo-blog-card__body {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  flex: 1;
}

.dodo-blog-card__date {
  font-size: 0.8125rem;
  color: var(--text-on-light-subtle);
  font-weight: 500;
}

.dodo-blog-card__title {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-on-light-primary);
  line-height: 1.35;
}

.dodo-blog-card__excerpt {
  font-size: var(--scale-small);
  color: var(--text-on-light-muted);
  line-height: 1.65;
  flex: 1;
}

.dodo-blog-card__read {
  font-size: var(--scale-small);
  font-weight: 600;
  color: var(--accent-green-dim);
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.5rem;
}

/* =========================================================
   BLOG ARTICLE PAGE
   ========================================================= */
.dodo-article-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 4rem;
  align-items: start;
}

.dodo-article__cover {
  width: 100%;
  max-width: 900px;
  height: auto;
  aspect-ratio: 16/9;
  object-fit: cover;
  border-radius: var(--radius-card);
  margin-bottom: 2.5rem;
  display: block;
}

.dodo-article__meta {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}

.dodo-article__date,
.dodo-article__author {
  font-size: var(--scale-small);
  color: var(--text-on-light-muted);
}

.dodo-article__title {
  font-family: var(--font-heading);
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text-on-light-primary);
  margin-bottom: 2rem;
  line-height: 1.15;
}

.dodo-article__body {
  max-width: 720px;
  font-size: 1.0625rem;
  line-height: 1.8;
  color: var(--text-on-light-muted);
}

.dodo-article__body h2 {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--text-on-light-primary);
  margin-top: 2.5rem;
  margin-bottom: 1rem;
  letter-spacing: -0.01em;
}

.dodo-article__body h3 {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text-on-light-primary);
  margin-top: 2rem;
  margin-bottom: 0.75rem;
}

.dodo-article__body p {
  margin-bottom: 1.25rem;
  color: var(--text-on-light-muted);
}

.dodo-article__body ul,
.dodo-article__body ol {
  padding-left: 1.5rem;
  margin-bottom: 1.25rem;
}

.dodo-article__body ul {
  list-style: disc;
}

.dodo-article__body ol {
  list-style: decimal;
}

.dodo-article__body li {
  margin-bottom: 0.5rem;
  color: var(--text-on-light-muted);
  line-height: 1.7;
}

.dodo-article__body blockquote {
  border-left: 3px solid var(--accent-green);
  padding-left: 1.25rem;
  margin: 2rem 0;
  font-style: italic;
  color: var(--text-on-light-muted);
}

.dodo-article__body pre {
  background: var(--bg-surface);
  border: 1px solid var(--border-dark);
  border-radius: var(--radius-component);
  padding: 1.25rem 1.5rem;
  overflow-x: auto;
  margin-bottom: 1.25rem;
}

.dodo-article__body code {
  font-family: var(--font-mono);
  font-size: var(--scale-mono);
  color: var(--accent-green);
  background: rgba(0, 194, 122, 0.08);
  padding: 0.15rem 0.375rem;
  border-radius: var(--radius-badge);
}

.dodo-article__body pre code {
  background: none;
  padding: 0;
  color: var(--text-on-dark-primary);
}

.dodo-article-sidebar {
  position: sticky;
  top: calc(var(--nav-height) + 2rem);
}

.dodo-article-sidebar__title {
  font-family: var(--font-heading);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text-on-light-primary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 1.25rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border-light);
}

.dodo-related-posts {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.dodo-related-post {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--border-light);
}

.dodo-related-post:last-child {
  border-bottom: none;
}

.dodo-related-post__date {
  font-size: 0.75rem;
  color: var(--text-on-light-subtle);
}

.dodo-related-post__title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-on-light-primary);
  line-height: 1.35;
}

.dodo-related-post__title:hover {
  color: var(--accent-green-dim);
}

/* =========================================================
   CONTACT PAGE
   ========================================================= */
.dodo-contact-layout {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 5rem;
  align-items: start;
}

.dodo-contact-form {
  background: var(--bg-white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-card);
  padding: 2.5rem;
}

.dodo-contact-form__title {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text-on-light-primary);
  margin-bottom: 2rem;
}

.dodo-form-group {
  margin-bottom: 1.25rem;
}

.dodo-form-label {
  display: block;
  font-size: var(--scale-small);
  font-weight: 600;
  color: var(--text-on-light-primary);
  margin-bottom: 0.375rem;
}

.dodo-form-input,
.dodo-form-select,
.dodo-form-textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  color: var(--text-on-light-primary);
  background: var(--bg-white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-component);
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
  outline: none;
  appearance: none;
}

.dodo-form-input:focus,
.dodo-form-select:focus,
.dodo-form-textarea:focus {
  border-color: var(--accent-green);
  box-shadow: 0 0 0 3px var(--accent-green-glow);
}

.dodo-form-textarea {
  resize: vertical;
  min-height: 120px;
}

.dodo-form-checkgroup {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  margin-top: 0.5rem;
}

.dodo-form-check {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 0.9375rem;
  color: var(--text-on-light-muted);
  cursor: pointer;
}

.dodo-form-check input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--accent-green);
  cursor: pointer;
  flex-shrink: 0;
}

.dodo-form-check input[type="radio"] {
  width: 16px;
  height: 16px;
  accent-color: var(--accent-green);
  cursor: pointer;
  flex-shrink: 0;
}

.dodo-contact-info {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.dodo-contact-info__block {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.dodo-contact-info__label {
  font-size: var(--scale-small);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-green-dim);
}

.dodo-contact-info__value {
  font-size: 0.9375rem;
  color: var(--text-on-light-muted);
  line-height: 1.6;
  font-style: normal;
}

.dodo-contact-info__value a {
  color: var(--text-on-light-muted);
  transition: color var(--transition-base);
}

.dodo-contact-info__value a:hover {
  color: var(--accent-green-dim);
}

.dodo-contact-quote {
  background: var(--bg-cream);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-card);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 1rem;
}

.dodo-contact-quote__portrait {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}

.dodo-contact-quote__portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

.dodo-contact-quote__header {
  display: flex;
  align-items: center;
  gap: 0.875rem;
}

.dodo-contact-quote__name {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text-on-light-primary);
}

.dodo-contact-quote__role {
  font-size: var(--scale-small);
  color: var(--text-on-light-muted);
}

.dodo-contact-quote__text {
  font-size: 0.9375rem;
  color: var(--text-on-light-muted);
  line-height: 1.7;
  font-style: italic;
}

/* =========================================================
   LEGAL PAGES
   ========================================================= */
.dodo-legal-page {
  background: var(--bg-white);
}

.dodo-legal-wrap {
  max-width: 800px;
  margin-inline: auto;
  padding-top: calc(var(--nav-height) + 64px);
  padding-bottom: 96px;
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}

.legal-article {
  background: var(--bg-white);
}

.legal-header {
  margin-bottom: 3rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--border-light);
}

.legal-header h1 {
  font-family: var(--font-heading);
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 700;
  color: var(--text-on-light-primary);
  margin-bottom: 0.75rem;
}

.legal-meta {
  font-size: var(--scale-small);
  color: var(--text-on-light-muted);
}

.legal-article section {
  margin-bottom: 2.5rem;
}

.legal-article h2 {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text-on-light-primary);
  margin-bottom: 1rem;
}

.legal-article p {
  font-size: 0.9375rem;
  color: var(--text-on-light-muted);
  line-height: 1.75;
  margin-bottom: 1rem;
}

.legal-article ul,
.legal-article ol {
  padding-left: 1.5rem;
  margin-bottom: 1rem;
}

.legal-article ul {
  list-style: disc;
}

.legal-article ol {
  list-style: decimal;
}

.legal-article li {
  font-size: 0.9375rem;
  color: var(--text-on-light-muted);
  line-height: 1.7;
  margin-bottom: 0.5rem;
}

.legal-article a {
  color: var(--accent-green-dim);
  text-decoration: underline;
}

.legal-article address {
  font-style: normal;
  font-size: 0.9375rem;
  color: var(--text-on-light-muted);
  line-height: 1.75;
}

.legal-table {
  width: 100%;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-component);
  overflow: hidden;
  margin-bottom: 1rem;
  font-size: var(--scale-small);
}

.legal-table th {
  background: var(--bg-light);
  padding: 0.75rem 1rem;
  text-align: left;
  font-weight: 600;
  color: var(--text-on-light-primary);
  border-bottom: 1px solid var(--border-light);
}

.legal-table td {
  padding: 0.75rem 1rem;
  color: var(--text-on-light-muted);
  border-bottom: 1px solid var(--border-light);
}

.legal-table tr:last-child td {
  border-bottom: none;
}

/* =========================================================
   SITEMAP PAGE
   ========================================================= */
.dodo-sitemap-page {
  background: var(--bg-white);
}

.dodo-sitemap-wrap {
  padding-top: calc(var(--nav-height) + 64px);
  padding-bottom: 96px;
}

.dodo-sitemap-title {
  font-family: var(--font-heading);
  font-size: var(--scale-h1);
  font-weight: 700;
  color: var(--text-on-light-primary);
  margin-bottom: 3rem;
}

.dodo-sitemap-group {
  margin-bottom: 2.5rem;
}

.dodo-sitemap-group__title {
  font-family: var(--font-heading);
  font-size: 0.9375rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent-green-dim);
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border-light);
}

.dodo-sitemap-links {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  list-style: none;
}

.dodo-sitemap-links a {
  font-size: 0.9375rem;
  color: var(--text-on-light-muted);
  transition: color var(--transition-base);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.dodo-sitemap-links a:hover {
  color: var(--accent-green-dim);
}

/* =========================================================
   SECTION HEADERS (SHARED)
   ========================================================= */
.dodo-section-header {
  margin-bottom: 3rem;
}

.dodo-section-header--centered {
  text-align: center;
  max-width: 640px;
  margin-inline: auto;
  margin-bottom: 3rem;
}

.dodo-section-header__title {
  font-size: var(--scale-h2);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.dodo-section--dark .dodo-section-header__title,
.dodo-section--dark-alt .dodo-section-header__title,
.dodo-section--surface .dodo-section-header__title {
  color: var(--text-on-dark-primary);
}

.dodo-section--light .dodo-section-header__title,
.dodo-section--cream .dodo-section-header__title,
.dodo-section--white .dodo-section-header__title {
  color: var(--text-on-light-primary);
}

.dodo-section-header__sub {
  font-size: 1.0625rem;
  line-height: 1.6;
  margin-top: 0.875rem;
}

.dodo-section--dark .dodo-section-header__sub,
.dodo-section--dark-alt .dodo-section-header__sub,
.dodo-section--surface .dodo-section-header__sub {
  color: var(--text-on-dark-muted);
}

.dodo-section--light .dodo-section-header__sub,
.dodo-section--cream .dodo-section-header__sub,
.dodo-section--white .dodo-section-header__sub {
  color: var(--text-on-light-muted);
}

/* =========================================================
   FADE-IN ANIMATION
   ========================================================= */
.dodo-fade-in {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}

.dodo-fade-in.dodo-visible {
  opacity: 1;
  transform: translateY(0);
}

/* =========================================================
   COOKIE BANNER
   ========================================================= */
.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  background: var(--bg-raised);
  border-top: 1px solid var(--border-dark);
}

.cookie-banner__inner {
  max-width: var(--container-max);
  margin-inline: auto;
  padding: 1.25rem clamp(1.25rem, 4vw, 2.5rem);
  display: flex;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
}

.cookie-banner__text {
  flex: 1;
  font-size: var(--scale-small);
  color: var(--text-on-dark-muted);
  line-height: 1.6;
  min-width: 200px;
}

.cookie-banner__text a {
  color: var(--accent-green);
  text-decoration: underline;
}

.cookie-banner__actions {
  flex-shrink: 0;
}

.cookie-banner__btn {
  font-family: var(--font-body);
  font-size: var(--scale-small);
  font-weight: 600;
  padding: 0.5rem 1.25rem;
  border-radius: var(--radius-component);
  cursor: pointer;
  transition: background var(--transition-base), color var(--transition-base);
}

.cookie-banner__btn--primary {
  background: var(--accent-green);
  color: var(--bg-void);
  border: 1px solid var(--accent-green);
}

.cookie-banner__btn--primary:hover {
  background: var(--accent-green-dim);
  border-color: var(--accent-green-dim);
  color: var(--bg-void);
}

/* =========================================================
   INLINE SVG ARCHITECTURE DIAGRAM UTILITY
   ========================================================= */
.dodo-svg-diagram {
  width: 100%;
  height: auto;
}

/* =========================================================
   NUMBERED PROCESS (vendor onboarding)
   ========================================================= */
.dodo-numbered-process {
  display: flex;
  flex-direction: column;
  gap: 0;
  counter-reset: process-counter;
}

.dodo-numbered-process__item {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 1.5rem;
  padding: 1.75rem 0;
  border-bottom: 1px solid var(--border-light);
  align-items: start;
}

.dodo-numbered-process__item:last-child {
  border-bottom: none;
}

.dodo-numbered-process__num {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--accent-green);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bg-void);
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 700;
  flex-shrink: 0;
}

.dodo-numbered-process__title {
  font-family: var(--font-heading);
  font-size: var(--scale-h3);
  font-weight: 600;
  color: var(--text-on-light-primary);
  margin-bottom: 0.5rem;
}

.dodo-numbered-process__desc {
  font-size: 0.9375rem;
  color: var(--text-on-light-muted);
  line-height: 1.6;
}

/* =========================================================
   FEATURE CALLOUT (DARK — COMPLIANCE)
   ========================================================= */
.dodo-feature-callout {
  background: var(--bg-surface);
}

.dodo-feature-callout__inner {
  max-width: 800px;
  margin-inline: auto;
  text-align: center;
}

.dodo-feature-callout__quote {
  font-family: var(--font-heading);
  font-size: clamp(1.25rem, 2.2vw, 1.75rem);
  font-weight: 300;
  line-height: 1.5;
  color: var(--text-on-dark-primary);
  margin-bottom: 1.5rem;
}

.dodo-feature-callout__quote em {
  font-style: normal;
  color: var(--accent-green);
  font-weight: 600;
}

/* =========================================================
   PROCESS / SVG WORKFLOW DIAGRAM (procurement)
   ========================================================= */
.dodo-workflow-section {
  background: var(--bg-surface);
}

.dodo-workflow-section__inner {
  max-width: 960px;
  margin-inline: auto;
}

/* =========================================================
   FULL-WIDTH DIAGRAM SECTION
   ========================================================= */
.dodo-diagram-section {
  background: var(--bg-light);
}

.dodo-diagram-section__inner {
  text-align: center;
}

.dodo-diagram-section__title {
  font-size: var(--scale-h2);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text-on-light-primary);
  margin-bottom: 0.875rem;
}

.dodo-diagram-section__sub {
  font-size: 1.0625rem;
  color: var(--text-on-light-muted);
  margin-bottom: 2.5rem;
}

.dodo-diagram-section__img {
  width: 100%;
  max-width: 1000px;
  margin-inline: auto;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-card);
  overflow: hidden;
}

.dodo-diagram-section__img img {
  width: 100%;
  height: auto;
  display: block;
}

/* =========================================================
   SCROLLED / BEHAVIOR — supplemental
   ========================================================= */
.dodo-page--dark-top .dodo-nav--scrolled {
  background: var(--bg-deep) !important;
}

.dodo-page--light-top .dodo-nav--scrolled {
  background: var(--bg-deep) !important;
}

/* =========================================================
   RESPONSIVE — TABLET (≤ 1024px)
   ========================================================= */
@media (max-width: 1024px) {
  .dodo-hero__inner {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .dodo-hero__content {
    max-width: 100%;
  }

  .dodo-hero__media {
    max-width: 640px;
    margin-inline: auto;
  }

  .dodo-process__steps {
    grid-template-columns: repeat(2, 1fr);
  }

  .dodo-footer__main {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }

  .dodo-section--desktop {
    padding-top: var(--section-pad-tablet);
    padding-bottom: var(--section-pad-tablet);
  }

  .dodo-section {
    padding-top: var(--section-pad-tablet);
    padding-bottom: var(--section-pad-tablet);
  }

  .dodo-arch-split__inner {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .dodo-sub-hero__inner {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .dodo-article-layout {
    grid-template-columns: 1fr;
  }

  .dodo-contact-layout {
    grid-template-columns: 1fr;
  }

  .dodo-integration-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .dodo-prob-sol {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

/* =========================================================
   RESPONSIVE — MOBILE (≤ 768px)
   ========================================================= */
@media (max-width: 768px) {
  .dodo-nav__links,
  .dodo-nav__cta-wrap {
    display: none;
  }

  .dodo-nav__hamburger {
    display: flex;
  }

  .dodo-section {
    padding-top: var(--section-pad-mobile);
    padding-bottom: var(--section-pad-mobile);
  }

  .dodo-hero {
    padding-top: calc(var(--nav-height) + 48px);
    padding-bottom: 64px;
  }

  .dodo-hero__h1 {
    font-size: clamp(2rem, 7vw, 2.8rem);
  }

  .dodo-trust-strip__inner {
    grid-template-columns: 1fr;
  }

  .dodo-trust-strip__item + .dodo-trust-strip__item {
    border-left: none;
    border-top: 1px solid var(--border-dark);
  }

  .dodo-usecase-grid {
    grid-template-columns: 1fr;
  }

  .dodo-card-grid {
    grid-template-columns: 1fr;
  }

  .dodo-card-grid--2col {
    grid-template-columns: 1fr;
  }

  .dodo-card-grid--4col {
    grid-template-columns: repeat(2, 1fr);
  }

  .dodo-feature-grid {
    grid-template-columns: 1fr;
  }

  .dodo-process__steps {
    grid-template-columns: 1fr;
  }

  .dodo-footer__main {
    grid-template-columns: 1fr;
  }

  .dodo-blog-grid {
    grid-template-columns: 1fr;
  }

  .dodo-team-grid {
    grid-template-columns: 1fr;
  }

  .dodo-values-grid {
    grid-template-columns: 1fr;
  }

  .dodo-principles-grid {
    grid-template-columns: 1fr;
  }

  .dodo-metrics-row {
    grid-template-columns: 1fr;
  }

  .dodo-integration-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .dodo-footer__legal {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }

  .dodo-cta-band__actions {
    flex-direction: column;
    align-items: center;
  }

  .dodo-sub-hero {
    padding-top: calc(var(--nav-height) + 48px);
    padding-bottom: 48px;
  }
}

/* =========================================================
   RESPONSIVE — SMALL MOBILE (≤ 480px)
   ========================================================= */
@media (max-width: 480px) {
  .dodo-hero__actions {
    flex-direction: column;
    width: 100%;
  }

  .dodo-hero__actions .dodo-btn {
    width: 100%;
    justify-content: center;
  }

  .dodo-card-grid--4col {
    grid-template-columns: 1fr;
  }

  .dodo-blog-grid {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   PROCESS FLOW SVG (inline procurement diagram)
   ========================================================= */
.dodo-flow-svg {
  width: 100%;
  max-width: 900px;
  margin-inline: auto;
  display: block;
}

.dodo-nav__has-dropdown {
  position: relative;
}

.dodo-nav__dropdown-toggle {
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 0.3em;
}

.dodo-nav__dropdown {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  min-width: 220px;
  background: var(--bg-raised);
  border: 1px solid var(--border-dark);
  border-radius: var(--radius-card);
  padding: 0.75rem 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 150ms ease, visibility 150ms ease, transform 150ms ease;
  z-index: 1100;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.dodo-nav__has-dropdown.dodo-nav__dropdown--open .dodo-nav__dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.dodo-nav__dropdown-link {
  display: block;
  padding: 0.75rem 1.5rem;
  font-size: var(--scale-small);
  font-weight: 500;
  color: var(--text-on-dark-muted);
  transition: color 150ms ease, background 150ms ease;
  white-space: nowrap;
  text-decoration: none;
}

.dodo-nav__dropdown-link:hover {
  color: var(--accent-green);
  background: var(--accent-green-glow);
}