/* ============================================================
   MEAIOW DESIGN SYSTEM
   ============================================================ */

:root {
  /* Backgrounds */
  --bg-primary: #FAFAFA;
  --bg-dark: #0A0A0F;
  --bg-warm: #F4F3EE;

  /* Brand */
  --purple: #621FDF;
  --purple-light: #EFEAFD;
  --purple-mid: #9D7BF2;

  /* Text */
  --text-primary: #1A1A2E;
  --text-secondary: #6B6B7B;
  --text-invert: #FAFAFA;

  /* Lines */
  --border: #E5E4DF;
  --border-dark: #1F1F28;

  /* Sector accents */
  --teal: #0F6E56;
  --coral: #993C1D;
  --amber: #854F0B;

  /* Type */
  --font-sans: "Söhne", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  --font-mono: "JetBrains Mono", "IBM Plex Mono", "Menlo", monospace;

  /* Layout */
  --max: 1200px;
  --pad: 48px;
}

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

html, body {
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

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

::selection { background: var(--purple); color: white; }

/* ============================================================
   TYPOGRAPHY
   ============================================================ */

.display {
  font-size: clamp(48px, 7.5vw, 96px);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.025em;
}
.h1 {
  font-size: clamp(40px, 5vw, 64px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.h2 {
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.015em;
}
.h3 {
  font-size: clamp(22px, 2vw, 28px);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.lead {
  font-size: clamp(18px, 1.5vw, 22px);
  font-weight: 400;
  line-height: 1.55;
  color: var(--text-secondary);
}
.body {
  font-size: 17px;
  line-height: 1.7;
  max-width: 65ch;
}
.label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--purple);
}
.label--gray { color: var(--text-secondary); }
.label--invert { color: var(--purple-mid); }

.meta {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
  text-transform: uppercase;
}

/* ============================================================
   LAYOUT
   ============================================================ */

.section {
  padding: 120px var(--pad);
}
.section--tight { padding: 80px var(--pad); }
.section--dark {
  background: var(--bg-dark);
  color: var(--text-invert);
  position: relative;
  overflow: hidden;
}
/* Light grid-net + soft purple gradient on all dark sections (matches the hero).
   Footer is .footer, not .section--dark, so it stays plain. */
.section--dark::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(157,123,242,0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(157,123,242,0.055) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse 90% 80% at 50% 30%, black 0%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 30%, black 0%, transparent 78%);
}
.section--dark::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.6;
  background:
    radial-gradient(circle at 18% 20%, rgba(157,123,242,0.16) 0%, transparent 42%),
    radial-gradient(circle at 82% 78%, rgba(98,31,223,0.14) 0%, transparent 46%);
}
.section--dark > * { position: relative; z-index: 1; }
/* The home hero already carries its own .hero-grid / .hero-particles;
   suppress the duplicate section-level layers there. */
.section--dark.hero::before,
.section--dark.hero::after { display: none; }
.section--warm { background: var(--bg-warm); }

.section--dark .label { color: var(--purple-mid); }
.section--dark .lead { color: #B5B5C0; }
.section--dark .display,
.section--dark .h1,
.section--dark .h2,
.section--dark .h3,
.section--dark .card-title,
.section--dark .wp-block-heading {
  color: var(--text-invert) !important;
}
.section--dark .hero-subtitle {
  color: var(--purple-mid) !important;
}
.section--dark .body,
.section--dark .card-body,
.section--dark p:not(.label):not(.meta):not(.hero-subtitle) {
  color: #B5B5C0;
}

.container { max-width: var(--max); margin: 0 auto; }
.container--narrow { max-width: 880px; margin: 0 auto; }

/* Gutenberg keeps the site editable, but its constrained layout defaults
   would otherwise squeeze MEAIOW's 1200px product/stat/tile systems to 880px. */
.section > .container,
.section > .container.alignwide,
.section .container.alignwide {
  max-width: var(--max) !important;
  width: min(100%, var(--max)) !important;
}

.section > .container.wp-block-group-is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)),
.section .container.wp-block-group-is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
  max-width: none;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.section .container > .h1,
.section .container > .wp-block-heading.h1 {
  margin-top: 24px;
  margin-bottom: 16px;
  max-width: 20ch;
}

.section .container > .lead,
.section .container > .wp-block-paragraph.lead {
  margin-bottom: 56px;
  max-width: 720px;
}

.section.hero {
  padding-top: 140px !important;
  padding-bottom: 140px !important;
}

.section.hero .container > .display {
  max-width: 15ch;
}

.section.hero .container > .lead {
  max-width: 640px;
  margin-bottom: 44px;
}

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.grid-5x3 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); }

.wp-block-group.grid-2,
.wp-block-group.grid-3,
.wp-block-group.grid-4,
.wp-block-group.grid-5x3 {
  display: grid !important;
}

.wp-block-group.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.wp-block-group.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.wp-block-group.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
.wp-block-group.grid-5x3 { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; gap: 1px !important; }

.stack-md > * + * { margin-top: 24px; }
.stack-lg > * + * { margin-top: 48px; }
.stack-xs > * + * { margin-top: 8px; }
.stack-sm > * + * { margin-top: 16px; }

/* ============================================================
   NAV
   ============================================================ */

.nav {
  position: sticky !important;
  top: 0;
  z-index: 90;
  background: rgba(250, 250, 250, 0.85);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid var(--border);
}

.wp-site-blocks > header.wp-block-template-part:first-child {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
}

.wp-site-blocks > header.wp-block-template-part:first-child .nav {
  position: relative !important;
  top: auto;
}

.wp-site-blocks {
  padding-top: 74px;
}
.nav--dark {
  background: rgba(10, 10, 15, 0.85);
  border-bottom: 1px solid var(--border-dark);
  color: var(--text-invert);
}
.nav-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 18px var(--pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}
.nav-logo {
  font-weight: 700;
  font-size: 26px;
  letter-spacing: 0.04em;
  cursor: pointer;
  min-width: 0;
}
.nav-logo img { height: 30px; width: auto; display: block; }
.nav-links {
  display: flex;
  align-items: center;
  gap: 32px;
  font-size: 14px;
  font-weight: 500;
}
.nav .wp-block-navigation__container {
  gap: 32px;
}
.nav .wp-block-navigation-item__content {
  color: inherit;
  opacity: 0.85;
  text-decoration: none;
  transition: opacity 0.2s;
}
.nav .wp-block-navigation-item__content:hover {
  opacity: 1;
}
.nav .wp-block-navigation__submenu-container {
  min-width: 320px !important;
  background: white !important;
  border: 1px solid var(--border) !important;
  border-radius: 14px !important;
  padding: 16px !important;
  box-shadow: 0 24px 60px -20px rgba(10,10,15,0.18);
}
.nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  display: block;
  padding: 12px 14px;
  border-radius: 8px;
  color: var(--text-primary);
}
.nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
  background: var(--bg-warm);
}
.nav .wp-block-navigation__responsive-container-open {
  width: 36px;
  height: 36px;
  border: 1px solid var(--border);
  border-radius: 8px;
  align-items: center;
  justify-content: center;
}
.nav .wp-block-navigation__responsive-container.is-menu-open {
  padding: 24px;
}
.nav-link {
  cursor: pointer;
  padding: 6px 0;
  position: relative;
  color: inherit;
  opacity: 0.85;
  transition: opacity 0.2s;
  white-space: nowrap;
}
.nav-link:hover, .nav-link.active { opacity: 1; }
.nav-link--accent { color: var(--purple); opacity: 1; font-weight: 600; }
.nav--dark .nav-link--accent { color: var(--purple-mid); }
.nav-link.active::after {
  content: "";
  position: absolute;
  bottom: -22px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--purple);
}
.nav-cta {
  margin: 0;
}
.nav-cta .wp-block-button__link,
.nav-cta.wp-block-button .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 100px;
  background: var(--text-primary);
  color: white;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid var(--text-primary);
  transition: opacity 0.2s;
  line-height: 1.2;
  text-decoration: none;
}
.nav-cta:hover .wp-block-button__link { opacity: 0.88; }
.nav-cta--ghost .wp-block-button__link {
  background: transparent;
  border-color: var(--border);
  color: var(--text-primary);
}
.nav--dark .nav-cta--ghost {
  border-color: var(--border-dark);
  color: var(--text-invert);
}
.nav-actions { display: flex; align-items: center; gap: 10px; }

.nav-dropdown-wrap {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
}

.nav-dropdown-wrap::after {
  content: "";
  position: absolute;
  left: -18px;
  right: -18px;
  top: 100%;
  height: 18px;
}

.nav-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  left: -16px;
  min-width: 320px;
  background: white;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px;
  box-shadow: 0 24px 60px -20px rgba(10,10,15,0.18);
  display: block;
  opacity: 0;
  pointer-events: none;
  transform: translateY(4px);
  transition: opacity 0.16s ease, transform 0.16s ease;
  z-index: 95;
}
.nav-dropdown-wrap:hover .nav-dropdown,
.nav-dropdown-wrap:focus-within .nav-dropdown {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.nav-dropdown a {
  display: block;
  padding: 12px 14px;
  border-radius: 8px;
  cursor: pointer;
}
.nav-dropdown a:hover { background: var(--bg-warm); }
.nav-dropdown .nd-title { font-weight: 500; font-size: 14px; }
.nav-dropdown .nd-desc { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }

/* Mobile nav */
.nav-burger {
  display: none;
  width: 36px;
  height: 36px;
  border: 1px solid var(--border);
  background: white;
  border-radius: 8px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.nav-burger span {
  display: block;
  width: 16px;
  height: 1.5px;
  background: var(--text-primary);
  position: relative;
}
.nav-burger span::before,
.nav-burger span::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 1.5px;
  background: var(--text-primary);
}
.nav-burger span::before { top: -5px; }
.nav-burger span::after { bottom: -5px; }

.nav-mobile {
  display: none;
  border-top: 1px solid var(--border);
  background: white;
  padding: 16px var(--pad);
}
.nav-mobile a {
  display: block;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
  font-size: 16px;
  font-weight: 500;
}
.nav-mobile a:last-child { border-bottom: none; }

/* ============================================================
   BUTTONS
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 28px;
  border-radius: 100px;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.2s;
  background: var(--text-primary);
  color: white;
  letter-spacing: -0.005em;
  line-height: 1.2;
}
.btn:hover { background: var(--purple); transform: translateY(-1px); }
.btn--purple { background: var(--purple); }
.wp-block-button.btn .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 28px;
  border-radius: 100px;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.005em;
  line-height: 1.2;
  border: 1px solid transparent;
  transition: all 0.2s;
}
.wp-block-button.btn {
  display: inline-flex;
  width: auto;
  min-width: 0;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}
.wp-block-buttons.meaiow-buttons {
  gap: 12px !important;
}
.wp-block-button.btn--purple .wp-block-button__link {
  background: var(--purple);
  border-color: var(--purple);
}
.btn--purple .wp-block-button__link,
.is-style-meaiow-primary .wp-block-button__link {
  color: #fff !important;
}
.btn--purple:hover { background: #3D31A0; }
.btn--ghost {
  background: transparent;
  border-color: var(--border);
  color: var(--text-primary);
}
.wp-block-button.btn--ghost .wp-block-button__link {
  background: transparent;
  border-color: var(--border);
  color: var(--text-primary);
}
.btn--ghost:hover { background: var(--text-primary); color: white; transform: none; }
.section--dark .btn--ghost {
  border-color: rgba(255,255,255,0.2);
  color: var(--text-invert);
}
.section--dark .wp-block-button.btn--ghost .wp-block-button__link {
  border-color: rgba(255,255,255,0.2);
}
.section--dark .btn--ghost .wp-block-button__link,
.section--dark .is-style-meaiow-ghost .wp-block-button__link {
  color: var(--text-invert) !important;
}
.section--dark .btn--ghost:hover { background: white; color: var(--text-primary); }
.btn--link {
  background: none;
  border: none;
  padding: 0;
  color: var(--purple);
  border-radius: 0;
  font-weight: 500;
}
.btn--link:hover { background: none; color: var(--purple); transform: none; }

/* ============================================================
   COMPONENTS
   ============================================================ */

.card {
  background: white;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 36px 32px;
  transition: all 0.25s;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.wp-block-group.card {
  border-color: var(--border) !important;
  border-radius: 16px !important;
  padding: 36px 32px !important;
  min-height: auto !important;
}
.card:hover { border-color: var(--purple); transform: translateY(-2px); }
.card--dark {
  background: #14141C;
  border-color: var(--border-dark);
  color: var(--text-invert);
}
.card--dark:hover { border-color: var(--purple-mid); }

.card-title { font-size: 22px; font-weight: 600; margin: 10px 0 12px; letter-spacing: -0.005em; line-height: 1.3; }
.wp-block-heading.card-title,
.has-card-title-font-size.card-title {
  font-size: 22px !important;
  line-height: 1.3 !important;
}
.card-body { color: var(--text-secondary); flex: 1; font-size: 15px; line-height: 1.6; }
.wp-block-paragraph.card-body {
  font-size: 15px !important;
  line-height: 1.6 !important;
}
.card--dark .card-body { color: #9999A8; }
.card-cta { margin-top: 24px; font-size: 14px; color: var(--purple); font-weight: 500; }
.card--dark .card-cta { color: var(--purple-mid); }

/* Thumbnail / placeholder */
.thumb {
  background:
    repeating-linear-gradient(135deg, transparent 0 8px, rgba(98,31,223,0.06) 8px 9px),
    var(--purple-light);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--purple);
  border: 1px solid rgba(98,31,223,0.2);
  position: relative;
  overflow: hidden;
}
.thumb--dark {
  background:
    repeating-linear-gradient(135deg, transparent 0 8px, rgba(157,123,242,0.08) 8px 9px),
    #14141C;
  color: var(--purple-mid);
  border-color: rgba(157,123,242,0.25);
}
.thumb--video::after {
  content: "▶";
  position: absolute;
  font-size: 14px;
  top: 10px;
  right: 12px;
  opacity: 0.7;
  font-family: var(--font-sans);
}
/* When a generated concept image is present */
.thumb--img, .photo--img { overflow: hidden; }
.thumb--img::after { display: none; }
.thumb-media, .photo-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.thumb-cap {
  position: relative;
  z-index: 2;
}
.thumb--img .thumb-cap, .photo--img .photo-cap {
  position: absolute;
  z-index: 2;
  left: 10px;
  bottom: 10px;
  right: 10px;
  margin: 0;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #EFEAFD;
  background: rgba(10,10,15,0.62);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  padding: 5px 9px;
  border-radius: 6px;
  border: 1px solid rgba(157,123,242,0.3);
  line-height: 1.35;
  width: max-content;
  max-width: calc(100% - 20px);
}
.thumb--img .thumb-cap::before, .photo--img .photo-cap::before {
  content: "CONCEPT · ";
  color: var(--purple-mid);
}
.play-btn {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(98,31,223,0.92);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 4px;
  box-shadow: 0 8px 30px -6px rgba(98,31,223,0.6), 0 0 0 1px rgba(255,255,255,0.15) inset;
}
.play-btn::after {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.25);
}
.thumb--neutral {
  background:
    repeating-linear-gradient(135deg, transparent 0 8px, rgba(0,0,0,0.04) 8px 9px),
    var(--bg-warm);
  color: var(--text-secondary);
  border-color: var(--border);
}

/* Stat card */
.stat {
  padding: 32px 0;
  border-top: 1px solid var(--border);
}
.section--dark .stat { border-top-color: var(--border-dark); }
.stat-num {
  font-size: clamp(48px, 5vw, 64px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--text-primary);
}
.section--dark .stat-num { color: var(--text-invert); }
.stat-num.is-meaiow { color: var(--purple); }
.section--dark .stat-num.is-meaiow { color: var(--purple-mid); }
.stat-label {
  font-size: 14px;
  color: var(--text-secondary);
  margin-top: 14px;
  max-width: 22ch;
  line-height: 1.5;
}

/* Industry tile */
.ind-tile {
  position: relative;
  background: white;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  cursor: pointer;
  transition: background 0.2s;
  min-height: 130px;
}
.ind-tile-link .wp-block-button__link {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  border-radius: 0;
  background: transparent !important;
  color: transparent !important;
  text-decoration: none;
  font-size: 0;
}
.ind-tile:hover { background: var(--purple-light); }
.ind-tile:hover .ind-icon { color: var(--purple); }
.ind-tile .ind-icon {
  width: 28px;
  height: 28px;
  color: var(--text-secondary);
  transition: color 0.2s;
}
.ind-tile .ind-name {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.grid-5x3 > .wp-block-html {
  margin: 0 !important;
}
.grid-5x3 .ind-tile {
  height: 130px;
  min-height: 130px;
  color: var(--text-primary);
}

/* Pill / tag */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 100px;
  background: var(--purple-light);
  color: var(--purple);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.tag--ghost {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-secondary);
}
.tag--invert {
  background: rgba(157,123,242,0.15);
  color: var(--purple-mid);
}

/* Stage list */
.stage {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 32px;
  padding: 36px 0;
  border-top: 1px solid var(--border);
}
.stage:last-child { border-bottom: 1px solid var(--border); }
.stage--featured {
  background: var(--purple-light);
  margin: 8px -32px;
  padding: 36px 32px;
  border-radius: 16px;
  border: 1px solid rgba(98,31,223,0.2);
}
.stage--featured + .stage { border-top: none; }
.stage-num {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-secondary);
  letter-spacing: 0.04em;
}
.stage-title { font-size: 22px; font-weight: 500; letter-spacing: -0.01em; margin-bottom: 8px; }
.stage-body { color: var(--text-secondary); font-size: 15px; line-height: 1.6; max-width: 60ch; }
.stage--featured .stage-num { color: var(--purple); font-weight: 600; }
.stage--featured .stage-title { color: var(--purple); }
.stage--featured .stage-body { color: var(--text-primary); }

/* Footer */
.footer {
  background: var(--bg-dark);
  color: var(--text-invert);
  padding: 100px var(--pad) 32px;
}
.footer-inner {
  max-width: var(--max);
  margin: 0 auto;
  display: grid !important;
  grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr;
  gap: 48px;
}
.footer-col h4 {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--purple-mid);
  font-weight: 500;
  margin-bottom: 20px;
}
.footer-col a {
  display: block;
  font-size: 14px;
  color: #B5B5C0;
  padding: 6px 0;
  transition: color 0.2s;
}
.footer-col a:hover { color: white; }
/* .footer-col a's font-size:14px above also reaches the social-links icon
   anchor (same .footer-col ancestor), clobbering the icon-size classes'
   em-based sizing since the icon's width/height are set in em relative to
   this inherited font-size. Restore inheritance from the icon-size class
   on the .wp-block-social-links wrapper instead of the nav-link rule. */
.footer-col .wp-block-social-links a { font-size: inherit; }
.footer-col p {
  margin: 0;
}
.footer-tag { color: #B5B5C0; font-size: 14px; margin-top: 12px; }
.footer-logo {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--text-invert);
}
.footer-slogan {
  margin-top: 18px;
  line-height: 1.25;
  letter-spacing: -0.015em;
}
.footer-slogan .fs-line1 {
  font-size: 22px;
  font-weight: 600;
  color: #FFFFFF;
}
.footer-slogan .fs-line2 {
  font-size: 22px;
  font-weight: 500;
  color: var(--purple-mid);
}
.footer-tm {
  font-size: 11px;
  color: #6B6B7B;
  margin-top: 24px;
  letter-spacing: 0.04em;
  line-height: 1.6;
}
.footer-verb { display: block; color: var(--purple-mid); font-size: 12px; margin-top: 1px; }
.axiom-cell { background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 24px 22px; transition: border-color 0.18s, box-shadow 0.18s; }
.axiom-cell:hover { border-color: var(--purple); box-shadow: 0 8px 26px -16px rgba(98,31,223,0.4); }
.axiom-cell--dark { background: #14141C; border-color: var(--border-dark); }
.axiom-cell--dark:hover { border-color: var(--purple-mid); }
.footer-bottom {
  max-width: var(--max);
  margin: 120px auto 0;
  border-top: 1px solid var(--border-dark);
  padding-top: 32px;
  display: flex;
  justify-content: space-between;
  gap: 24px;
  font-size: 12px;
  color: #6B6B7B;
  flex-wrap: wrap;
}
.footer-bottom a { color: #6B6B7B; }
.footer-bottom a:hover { color: white; }
.footer-final {
  max-width: var(--max);
  margin: 24px auto 0;
  font-size: 14px;
  color: #8A8A9A;
  line-height: 1.7;
  letter-spacing: 0.01em;
  max-width: 900px;
}
/* footer-cta is a <p> wrapper around the actual <a>, so the color rule
   must target the descendant <a> directly (matching the .footer-col a
   pattern) — a selector on the wrapper alone never reaches the link's own
   inline-styled color, and :hover on the wrapper doesn't override the
   child's inline style either. The mockup's own source CSS made this same
   mistake, which is also why its hover color happened to equal the
   default (making it a no-op even where it did apply) — using white here
   instead, the same "brighten on hover" treatment already used for every
   other footer link, so the effect is actually visible. */
.footer-cta a { color: var(--purple-mid) !important; }
.footer-cta a:hover { color: #FFFFFF !important; }

/* Modal */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10,10,15,0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 24px;
  animation: fade 0.18s ease;
}
.modal {
  background: var(--bg-dark);
  color: var(--text-invert);
  width: 100%;
  max-width: 480px;
  border-radius: 20px;
  padding: 40px;
  border: 1px solid var(--border-dark);
  position: relative;
}
.modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--border-dark);
  background: transparent;
  color: var(--text-invert);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}
.modal-close:hover { background: rgba(255,255,255,0.06); }

.field { margin-bottom: 18px; }
.field label {
  display: block;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--purple-mid);
  margin-bottom: 8px;
  font-weight: 500;
}
.field input, .field select, .field textarea {
  width: 100%;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border-dark);
  color: white;
  padding: 14px 16px;
  border-radius: 10px;
  font-size: 15px;
  outline: none;
  transition: border-color 0.15s, background 0.15s;
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--purple-mid);
  background: rgba(255,255,255,0.06);
}
.field--light input, .field--light select, .field--light textarea {
  background: white;
  border: 1px solid var(--border);
  color: var(--text-primary);
}
.field--light label { color: var(--purple); }

/* Subtle grid-net texture for light sections (echoes the dark hero grid) */
.section--net {
  position: relative;
}
.section--net > * { position: relative; z-index: 1; }
.section--net::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(98,31,223,0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(98,31,223,0.045) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, black 0%, transparent 85%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, black 0%, transparent 85%);
}
.section--net.section--warm::before {
  background-image:
    linear-gradient(rgba(98,31,223,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(98,31,223,0.05) 1px, transparent 1px);
}

/* Photo placeholder slot — neutral, for review-stage imagery */
.photo {
  background:
    repeating-linear-gradient(135deg, transparent 0 10px, rgba(0,0,0,0.025) 10px 11px),
    linear-gradient(160deg, #EDECE6, #E2E1DA);
  border: 1px solid var(--border);
  border-radius: 14px;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  position: relative;
  overflow: hidden;
  min-height: 200px;
}
.photo::before {
  content: "";
  position: absolute;
  top: 18px; left: 18px;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: rgba(98,31,223,0.18);
  box-shadow: 0 0 0 6px rgba(98,31,223,0.07);
}
.photo .photo-cap {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-secondary);
  background: rgba(255,255,255,0.7);
  padding: 6px 10px;
  margin: 14px;
  border-radius: 6px;
  backdrop-filter: blur(4px);
  position: relative;
  z-index: 2;
}
.photo--dark {
  background:
    repeating-linear-gradient(135deg, transparent 0 10px, rgba(255,255,255,0.03) 10px 11px),
    linear-gradient(160deg, #1A1A24, #101018);
  border-color: var(--border-dark);
}
.photo--dark .photo-cap { background: rgba(0,0,0,0.4); color: #9999A8; }

/* Coined word */
.coin-word {
  font-size: clamp(72px, 12vw, 160px);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  text-align: center;
}
.coin-word .placeholder {
  border: 2px dashed rgba(157,123,242,0.4);
  padding: 8px 24px;
  display: inline-block;
  border-radius: 8px;
  color: var(--purple-mid);
}

/* Hero visual */
.hero {
  position: relative;
  overflow: hidden;
}
.hero .container,
.hero .is-style-meaiow-container {
  position: relative;
  z-index: 2;
}
.hero-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.5;
  z-index: 0;
  background:
    radial-gradient(circle at 20% 30%, rgba(157,123,242,0.18) 0%, transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(98,31,223,0.15) 0%, transparent 45%);
}
.hero-grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(rgba(157,123,242,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(157,123,242,0.06) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse at center, black 0%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 0%, transparent 70%);
}

/* Channels strip */
.channels {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}
.channel-pill {
  padding: 10px 18px;
  border: 1px solid var(--border);
  border-radius: 100px;
  font-size: 13px;
  font-weight: 500;
  background: white;
}
.section--dark .channel-pill {
  background: rgba(255,255,255,0.04);
  border-color: var(--border-dark);
}

/* Code-ish block (Stripe-inspired technical credibility) */
.code-block {
  background: #0F0F18;
  border: 1px solid var(--border-dark);
  border-radius: 14px;
  padding: 28px;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.7;
  color: #C5C5D0;
  overflow-x: auto;
}
.code-block .k { color: var(--purple-mid); }
.code-block .s { color: #8DD9B5; }
.code-block .c { color: #6B6B7B; }
.code-block .n { color: #E5C58D; }

/* Animations */
@keyframes fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
.fade-in { animation: fade 0.4s ease both; }

@keyframes scrollFade {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 1024px) {
  .nav .wp-block-navigation.nav-links { display: flex; }
  .nav .wp-block-navigation__container { display: none; }
  .nav .wp-block-navigation__responsive-container-open { display: flex; }
  .nav-actions .nav-cta--ghost { display: none; }
  .nav-burger { display: flex; }
  .nav-mobile.is-open { display: block; }
}

/* CONTINUUM responsive */
@media (max-width: 900px) {
  .continuum-stats { grid-template-columns: 1fr 1fr !important; }
  .continuum-principles { grid-template-columns: 1fr 1fr !important; }
  .continuum-eng-head { display: none !important; }
  .continuum-eng-row {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
  }
  .continuum-eng-row > div:first-child { font-size: 13px !important; }
  .pillar-items { grid-template-columns: 1fr !important; }
  .meaiow-letters { grid-template-columns: repeat(3, 1fr) !important; }
  .axioms-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .axiom-wave-cell { grid-column: 1 / -1 !important; }
  .wave-strip { grid-template-columns: 1fr !important; }
  .stack-row { grid-template-columns: 1fr !important; gap: 6px !important; }
  .cog-loop-box { grid-template-columns: 1fr !important; gap: 28px !important; }
  .cog-loop-art { order: -1; }
  .learn-body { grid-template-columns: 1fr !important; }
  .stack-row > :last-child { display: none !important; }
  .evidence-grid { grid-template-columns: 1fr !important; }
  .govbody-row { grid-template-columns: 1fr !important; gap: 16px !important; }
  .firstaid-band { grid-template-columns: 1fr 1fr !important; }
  .firstaid-mech { grid-template-columns: 1fr !important; gap: 12px !important; }
  .firstaid-std { grid-template-columns: 1fr !important; gap: 6px !important; }
}

@media (max-width: 900px) {
  :root { --pad: 24px; }
  .wp-site-blocks {
    padding-top: 81px;
  }
  .section {
    padding: 80px var(--pad) !important;
  }
  .section--tight { padding: 56px var(--pad); }
  .nav-inner {
    padding: 14px var(--pad);
    gap: 12px;
    max-width: none;
    width: 100%;
  }
  .nav-logo {
    flex: 0 0 82px;
    width: 82px;
  }
  .nav-logo img {
    display: none !important;
  }
  .nav-logo::before {
    content: "MEAIOW";
    display: block;
    color: var(--text-primary);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1;
  }
  .nav-actions {
    flex-shrink: 0;
    gap: 8px;
  }
  .nav-actions .nav-cta {
    padding: 9px 14px;
    font-size: 12px;
    white-space: nowrap;
  }
  .nav-actions .nav-cta:not(.nav-cta--ghost) {
    width: 118px;
    justify-content: center;
    overflow: hidden;
  }
  .section.hero .container {
    width: 100%;
    max-width: calc(100vw - (2 * var(--pad)));
  }
  .section.hero .lead {
    max-width: 100% !important;
  }
  .nav-mobile.is-open { display: block; }

  .grid-2,
  .grid-3,
  .grid-4,
  .wp-block-group.grid-2,
  .wp-block-group.grid-3,
  .wp-block-group.grid-4 {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .grid-5x3,
  .wp-block-group.grid-5x3 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .footer-inner { grid-template-columns: 1fr 1fr !important; gap: 32px !important; }
  .footer-col:first-child { grid-column: 1 / -1; }

  .stage { grid-template-columns: 1fr; gap: 12px; padding: 28px 0; }
  .stage--featured { margin: 8px 0; padding: 28px 20px; }

  .display { font-size: clamp(40px, 10vw, 56px); }
  .h1 { font-size: clamp(34px, 8vw, 48px); }
  .h2 { font-size: clamp(26px, 6vw, 32px); }

  .footer-bottom { flex-direction: column; }
  .modal { padding: 28px 22px; }
}

/* ============================================================
   MOBILE PREVIEW FRAME (review mode)
   ============================================================ */

body.preview-mobile {
  background: #181820;
  min-height: 100vh;
  padding: 40px 0 60px;
}
body.preview-mobile #app-root {
  width: 390px;
  margin: 0 auto;
  background: var(--bg-primary);
  border-radius: 40px;
  overflow: hidden;
  height: 844px;
  overflow-y: auto;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,0.5), 0 0 0 10px #2A2A35, 0 0 0 11px #3A3A45;
  position: relative;
  scrollbar-width: thin;
}
body.preview-mobile #app-root::-webkit-scrollbar { width: 4px; }
body.preview-mobile #app-root::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.2); border-radius: 4px; }

/* Force mobile breakpoint when in preview */
body.preview-mobile #app-root .nav-links { display: none; }
body.preview-mobile #app-root .nav-actions .nav-cta--ghost { display: none; }
body.preview-mobile #app-root .nav-burger { display: flex; }
body.preview-mobile #app-root .grid-2,
body.preview-mobile #app-root .grid-3,
body.preview-mobile #app-root .grid-4 { grid-template-columns: 1fr; gap: 16px; }
body.preview-mobile #app-root .grid-5x3 { grid-template-columns: repeat(2, 1fr); }
body.preview-mobile #app-root .section { padding: 56px 22px; }
body.preview-mobile #app-root .footer { padding: 56px 22px 24px; }
body.preview-mobile #app-root .footer-inner { grid-template-columns: 1fr 1fr; gap: 28px; }
body.preview-mobile #app-root .stage { grid-template-columns: 1fr; gap: 10px; padding: 24px 0; }
body.preview-mobile #app-root .display { font-size: 42px; }
body.preview-mobile #app-root .h1 { font-size: 34px; }
body.preview-mobile #app-root .h2 { font-size: 26px; }
body.preview-mobile #app-root .nav-inner { padding: 14px 22px; }
body.preview-mobile #app-root .continuum-stats { grid-template-columns: 1fr 1fr !important; }
body.preview-mobile #app-root .continuum-principles { grid-template-columns: 1fr 1fr !important; }
body.preview-mobile #app-root .continuum-eng-head { display: none !important; }
body.preview-mobile #app-root .continuum-eng-row { grid-template-columns: 1fr !important; gap: 6px !important; }
body.preview-mobile #app-root .pillar-items { grid-template-columns: 1fr !important; }
body.preview-mobile #app-root .meaiow-letters { grid-template-columns: repeat(3, 1fr) !important; }
body.preview-mobile #app-root .axioms-grid { grid-template-columns: 1fr !important; }
body.preview-mobile #app-root .axiom-wave-cell { grid-column: 1 / -1 !important; }
body.preview-mobile #app-root .wave-strip { grid-template-columns: 1fr !important; }
body.preview-mobile #app-root .cog-loop-box { grid-template-columns: 1fr !important; gap: 28px !important; }
body.preview-mobile #app-root .learn-body { grid-template-columns: 1fr !important; }
body.preview-mobile #app-root .stack-row { grid-template-columns: 1fr !important; gap: 6px !important; }
body.preview-mobile #app-root .stack-row > :last-child { display: none !important; }
body.preview-mobile #app-root .evidence-grid { grid-template-columns: 1fr !important; }
body.preview-mobile #app-root .govbody-row { grid-template-columns: 1fr !important; gap: 16px !important; }
body.preview-mobile #app-root .firstaid-band { grid-template-columns: 1fr 1fr !important; }
body.preview-mobile #app-root .firstaid-mech { grid-template-columns: 1fr !important; gap: 12px !important; }
body.preview-mobile #app-root .firstaid-std { grid-template-columns: 1fr !important; gap: 6px !important; }

.preview-toggle {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 200;
  background: #0A0A0F;
  color: white;
  border: 1px solid #2A2A35;
  border-radius: 100px;
  padding: 10px 16px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 10px 30px -10px rgba(0,0,0,0.4);
}
.preview-toggle:hover { background: var(--purple); }
body.preview-mobile .preview-toggle { background: var(--purple); }

/* ============================================================
   INTRO ANIMATION OVERLAY
   ============================================================ */
#intro-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #0B0A10;
  opacity: 1;
  transition: opacity 0.8s ease;
}
#intro-overlay #stage, #intro-overlay #intro-stage-root { display: block; width: 100vw; height: 100vh; position: relative; }
/* Hide the animation engine's playback bar during the intro */
#intro-stage-root > div > div:last-child { display: none !important; }
#intro-stage-root > div { background: #0B0A10 !important; }
#intro-stage-root svg[data-om-exportable-video-with-duration-secs] { box-shadow: none !important; }
#intro-overlay.intro-hide { opacity: 0; pointer-events: none; }
html.intro-seen #intro-overlay { display: none !important; }
#intro-skip {
  position: fixed;
  bottom: 28px; right: 28px;
  background: rgba(255,255,255,0.06);
  color: #FAFAFA;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 100px;
  padding: 9px 18px;
  font-family: var(--font-sans);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}
#intro-skip:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.32); }
html.intro-lock, html.intro-lock body { overflow: hidden; }
:root {
  --font-serif: "Newsreader", "Times New Roman", "Georgia", serif;
}

/* Headline type moves to the serif; body / labels / data stay sans */
.display, .h1, .h2, .h3,
.card-title, .stage-title {
  font-family: var(--font-serif);
  font-weight: 500;
}
.display { font-weight: 600; letter-spacing: -0.02em; }
.h1 { font-weight: 600; letter-spacing: -0.015em; }
.h2 { font-weight: 500; letter-spacing: -0.01em; }
.h3 { font-weight: 500; letter-spacing: -0.005em; }
.card-title { font-weight: 600; letter-spacing: -0.005em; }
.stage-title { font-weight: 500; }

/* Body, lead, labels, meta and data numerals explicitly remain sans */
.lead, .body, .label, .meta, .stat-label,
.stat-num, .coin-word, .nav-logo, .footer-slogan, .btn, .nav-link {
  font-family: var(--font-sans);
}

/* ============================================================
   SECTION DIVIDERS — hairline between adjacent light sections
   ============================================================ */
/* Any two consecutive non-dark sections get a hairline seam
   (covers primary→primary, warm→warm and the subtle warm↔primary). */
.section:not(.section--dark) + .section:not(.section--dark) {
  border-top: 1px solid var(--border);
}
/* Two consecutive dark sections: faint dark seam */
.section--dark + .section--dark {
  border-top: 1px solid var(--border-dark);
}
/* Never draw a seam where the tone flips to/from dark (contrast is enough) */
.section--dark + .section:not(.section--dark),
.section:not(.section--dark) + .section--dark {
  border-top: none;
}

/* Footer logo image sizing */
.footer-logo img { height: 34px; width: auto; display: block; }

/* ============================================================
   GUTENBERG BLOCK STYLES
   These are editor-selectable styles registered in functions.php.
   Core spacing, color, typography and border values remain block attributes.
   ============================================================ */
.is-style-meaiow-section {
  position: relative;
}
.is-style-meaiow-section-dark {
  position: relative;
  background: var(--bg-dark);
  color: var(--text-invert);
}
.is-style-meaiow-section-warm {
  position: relative;
  background: var(--bg-warm);
  color: var(--text-primary);
}
.is-style-meaiow-container {
  max-width: var(--max);
  margin-left: auto;
  margin-right: auto;
}
.is-style-meaiow-card {
  display: flex;
  flex-direction: column;
  min-height: 240px;
  transition: border-color 0.2s, transform 0.2s;
}
.is-style-meaiow-card:hover {
  border-color: var(--purple);
  transform: translateY(-2px);
}
.is-style-meaiow-problem-row {
  border-top: 1px solid var(--border);
}
.is-style-meaiow-proof-chain {
  margin-top: 56px;
}
.is-style-meaiow-spec-stat {
  margin-top: 32px;
  border: 1px solid var(--border);
}
.is-style-meaiow-hero-grid,
.is-style-meaiow-hero-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.is-style-meaiow-display,
.is-style-meaiow-headline,
.is-style-meaiow-section-title,
.is-style-meaiow-card-title {
  font-family: var(--font-serif);
}
.is-style-meaiow-label,
.is-style-meaiow-meta {
  font-family: var(--font-mono);
}
.is-style-meaiow-photo {
  overflow: hidden;
}
.is-style-meaiow-primary .wp-block-button__link {
  background: var(--purple);
  color: #fff;
}
.is-style-meaiow-ghost .wp-block-button__link {
  background: transparent;
  border: 1px solid currentColor;
}
.is-style-meaiow-text .wp-block-button__link {
  background: transparent;
  color: var(--purple);
  padding: 0;
}

/* ============================================================
   TEAM — cards + member profile
   ============================================================ */
.team-card { transition: transform 0.2s, box-shadow 0.2s; }
.team-card:hover { transform: translateY(-4px); box-shadow: 0 24px 50px -24px rgba(10,10,15,0.28); }
.team-portrait {
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: #EAE8F5;
}
.team-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

/* Member hero */
.member-hero {
  display: grid;
  grid-template-columns: 560px 1fr;
  gap: 72px;
  align-items: end;
}
.member-hero-portrait {
  aspect-ratio: 4 / 5;
  border-radius: 18px 18px 0 0;
  overflow: hidden;
  background: #14141C;
  transform: translateY(1px);
}
.member-hero-portrait img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }

.member-body {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 48px;
  align-items: start;
}
.member-body-side { position: sticky; top: 100px; }

@media (max-width: 900px) {
  .member-hero { grid-template-columns: 1fr; gap: 28px; }
  .member-hero-portrait { max-width: 300px; border-radius: 18px; transform: none; }
  .member-body { grid-template-columns: 1fr; gap: 20px; }
  .member-body-side { position: static; }
}
body.preview-mobile #app-root .member-hero { grid-template-columns: 1fr; gap: 28px; }
body.preview-mobile #app-root .member-hero-portrait { max-width: 300px; border-radius: 18px; transform: none; }
body.preview-mobile #app-root .member-body { grid-template-columns: 1fr; gap: 20px; }
body.preview-mobile #app-root .member-body-side { position: static; }

/* ============================================================
   WORDPRESS FSE CONVERSION — native blocks matching prototype
   ============================================================ */
.verdict-letter {
  min-height: 112px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  padding: 18px 12px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: rgba(255, 255, 255, 0.035);
}

.verdict-letter strong {
  font-size: clamp(34px, 4vw, 56px);
  line-height: 0.9;
  color: var(--purple-mid);
}

.verdict-letter span {
  color: #B5B5C0;
  font-size: 12px;
  line-height: 1.2;
}

.verdict-letter--solid {
  align-items: center;
  justify-content: center;
  background: var(--purple);
  color: white;
  font-size: 42px;
  font-weight: 700;
}

.hp-verdict-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 64px !important;
  align-items: center;
}

.hp-verdict-grid > .wp-block-column,
.hp-verdict-grid > div {
  min-width: 0;
}

.verdict-letters-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

.verdict-letters-grid > .verdict-letter {
  margin: 0 !important;
}

.problem-row {
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr);
  gap: 32px;
  padding: 32px 0;
  border-bottom: 1px solid var(--border);
}

.problem-row:first-child {
  border-top: 1px solid var(--border);
}

.proof-chain {
  margin-top: 56px;
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 16px;
  flex-wrap: wrap;
}

.proof-chain div {
  min-width: 148px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  padding: 18px;
  background: rgba(255, 255, 255, 0.04);
}

.proof-chain strong,
.proof-chain span {
  display: block;
}

.proof-chain strong {
  color: white;
  font-size: 14px;
  letter-spacing: 0.08em;
}

.proof-chain span {
  margin-top: 8px;
  color: var(--purple-mid);
  font-size: 13px;
}

.proof-chain b {
  display: flex;
  align-items: center;
  color: var(--purple-mid);
  font-size: 24px;
}

.spec-stat {
  margin-top: 44px;
  display: grid;
  grid-template-columns: minmax(120px, 220px) minmax(0, 1fr);
  gap: 28px;
  align-items: center;
  border: 1px solid rgba(98, 31, 223, 0.18);
  border-radius: 8px;
  background: rgba(98, 31, 223, 0.055);
  padding: clamp(24px, 4vw, 44px);
}

.photo--img .photo-media {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body:not(.home) #intro-overlay {
  display: none;
}

@media (max-width: 900px) {
  .hp-verdict-grid,
  .grid-2,
  .grid-3,
  .grid-4,
  .grid-5x3 {
    grid-template-columns: 1fr !important;
  }

  .grid-5x3 {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .wp-block-group.grid-2,
  .wp-block-group.grid-3,
  .wp-block-group.grid-4 {
    grid-template-columns: 1fr !important;
  }

  .wp-block-group.grid-5x3 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .problem-row,
  .spec-stat {
    grid-template-columns: 1fr;
  }

  .hp-verdict-grid > div:last-child {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100%;
    min-width: 0;
  }

  .hp-verdict-grid {
    grid-template-columns: 1fr !important;
  }

  .verdict-letters-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .proof-chain {
    justify-content: flex-start;
  }

  .proof-chain b {
    display: none;
  }
}

@media (max-width: 560px) {
  .section.hero {
    padding-top: 140px !important;
    padding-bottom: 140px !important;
  }

  .section.hero .display {
    font-size: 40px !important;
  }

  .nav-inner {
    padding-left: 22px;
    padding-right: 14px;
  }

  .nav-logo img {
    max-width: 124px;
  }

  .section.hero .container > div[style*="display:flex"] {
    width: 100%;
    max-width: 100%;
  }

  .section.hero .btn {
    width: auto;
    max-width: 100%;
    flex: 0 0 auto;
    justify-content: center;
  }

  .nav-burger {
    display: flex !important;
  }

  .verdict-letter {
    min-height: 96px;
  }
}

/* ============================================================
   LEGAL PAGES — table styling (Privacy / Terms / GDPR)
   ============================================================ */
.legal-table {
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  margin: 8px 0 20px;
}
.legal-table table {
  width: 100%;
  border-collapse: collapse;
}
.legal-table thead th {
  background: var(--bg-dark);
  color: white;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
  padding: 12px 16px;
  text-align: left;
  border: none;
}
.legal-table tbody td {
  border: none;
  border-top: 1px solid var(--border);
  background: white;
  padding: 14px 16px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text-secondary);
  font-weight: 400;
  vertical-align: top;
}
.legal-table tbody td:first-child {
  color: var(--text-primary);
  font-weight: 600;
}

/* Fix: .container--narrow's 880px max-width was being overridden by
   .is-style-meaiow-container's 1200px (same specificity, later in source).
   A compound selector wins on specificity regardless of source order. */
.container--narrow.is-style-meaiow-container {
  max-width: 880px;
}

/* Fix: constrained-layout children of a .container--narrow box (e.g. the
   Company page's Preamble "four obligations" list) were being centered by
   WordPress's default .is-layout-constrained child rule (margin:auto
   !important). The theme already neutralizes this for plain .container via
   the .container.wp-block-group-is-layout-constrained rule above, but that
   rule requires the bare .container class — which .container--narrow
   sections don't have, and adding it would wrongly trigger the .section >
   .container width:100%/max-width:1200px !important rule too. This mirrors
   the same neutralization scoped to .container--narrow instead, without
   pulling in that width side effect. */
.container--narrow.wp-block-group-is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
  max-width: none;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Fix: constrained-layout rows built with their own inline display:grid
   (e.g. the Company page's numbered "obligations" rows: a 52px-number
   column + 1fr-text column) were having their direct-child spans centered
   by WordPress's generic .is-layout-constrained child rule (margin:auto
   !important) — the row's own inline grid-template-columns should be the
   only thing controlling child placement. Scoped via the row's own inline
   style rather than a specific class, so any future custom grid row built
   the same way is covered automatically, not just this one instance. */
.is-layout-constrained[style*="display:grid"] > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Fix: paragraphs stacked inside a .stack-md/.stack-lg/.stack-sm/.stack-xs
   wrapper (e.g. the Company page's Preamble intro paragraphs) were being
   centered the same way — those utility wrappers aren't .container or
   .container--narrow themselves, so neither of the fixes above reach them. */
.stack-md.wp-block-group-is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)),
.stack-lg.wp-block-group-is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)),
.stack-sm.wp-block-group-is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)),
.stack-xs.wp-block-group-is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Fix: two more recurrences of the same WordPress-core auto-centering
   behavior found during a full sweep of this page:
   (1) card/card--dark tiles (Cognitive Architecture, Governance sections)
       had their number/title text centered instead of left-aligned —
       body paragraphs looked fine only because their text nearly fills
       the card width already, masking the same root cause.
   (2) THE NAME section's real-logo letter-crop tiles (fixed-size
       background-image divs, has-background-background-color) had the
       letter graphic centered horizontally instead of left-aligned —
       confirmed against the mockup source, which only vertically centers
       the image (flex align-items:center, no justify-content, so the
       default is flex-start / left). */
.card.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)),
.card--dark.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)),
.is-layout-constrained.has-background-background-color > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* ============================================================
   Block-validity utility classes
   Added to let hand-authored blocks match their declared attributes
   exactly (WordPress editor "invalid content" fix), instead of relying
   on undeclared inline style properties. Zero visual change from what
   they replace.
   ============================================================ */
.mw-15ch { max-width: 15ch; }
.mw-18ch { max-width: 18ch; }
.mw-20ch { max-width: 20ch; }
.mw-22ch { max-width: 22ch; }
.mw-24ch { max-width: 24ch; }
.mw-30ch { max-width: 30ch; }
.u-text-center { text-align: center; }
.naming-item { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 8px; }
.bg-purple-light { background: var(--purple-light); }
.items-end { align-items: end; }
.grid-60-1fr { grid-template-columns: 60px 1fr; }
/* Gives dark hero-style sections (built without the ".hero" class, which
   would incorrectly trigger .section.hero's 140px !important padding
   override) the same position:relative their .hero-grid/.hero-particles
   decorative children need as an absolute-positioning anchor. */
.section--dark.is-style-meaiow-section-dark { position: relative; }