/* About page — Digital MathLab */
.page-about {
  --color-primary: var(--blue-primary);
  --color-primary-dark: #005bb8;
  --color-badge-bg: var(--blue-50);
  --color-badge-border: rgba(0, 114, 255, 0.22);
  --color-gray-950: var(--gray-950);
  --color-gray-800: var(--gray-800);
  --color-gray-700: var(--gray-500);
  --color-gray-600: var(--gray-500);
  --color-gray-200: var(--gray-300);
  --color-gray-100: var(--gray-50);
  --color-white: #fff;
  --color-hero-wash: var(--blue-50);
}

.page-about .nav a.is-active {
  color: var(--blue-primary);
  font-weight: 500;
}

.page-about .site-header {
  position: fixed;
}

.page-about .about-hero {
  margin-top: var(--header-h);
}

.page-about .about-cta-section {
  padding: clamp(3rem, 8vw, 5rem) 0 clamp(4rem, 10vw, 6rem);
  background: var(--gray-50);
}

.page-about .about-cta__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  text-align: center;
  max-width: 42rem;
  margin: 0 auto;
  padding: clamp(2rem, 5vw, 3rem);
  border-radius: var(--radius-lg);
  border: 1px solid var(--gray-300);
  background: #fff;
  box-shadow: 0 8px 32px rgba(15, 23, 42, 0.06);
}

.page-about .about-cta__card h2 {
  margin: 0;
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 600;
  color: var(--gray-800);
}

.page-about .about-cta__card p {
  margin: 0;
  font-size: 1.125rem;
  line-height: 1.55;
  color: var(--gray-500);
}

.page-about,
.page-about .about-body {
  overflow-x: clip;
  max-width: 100%;
}

/* ============================================================
         ABOUT PAGE — overrides only. All shared tokens come from styles.css.
         ============================================================ */

    /* ---- GLOBAL TEXT RULE: justify all body copy ---- */
    .about-body,
    .about-body p,
    .about-body li,
    .about-body .card-body,
    .about-body .step-body,
    .about-body .belief-body,
    .about-body .stat-label,
    .about-body .timeline-desc {
      text-align: justify;
      text-justify: inter-word;
      hyphens: auto;
      -webkit-hyphens: auto;
    }

    /* ---- All headings centered on About ---- */
    .about-body h1,
    .about-body h2,
    .about-body h3,
    .about-body h4 {
      hyphens: none;
      -webkit-hyphens: none;
      text-align: center;
    }

    /* Eyebrows / labels that sit with headings */
    .about-body .about-eyebrow {
      text-align: center;
      hyphens: none;
      -webkit-hyphens: none;
    }

    /* Section intros: centered lead (overrides global justify on paragraphs) */
    .about-body .about-section-lead {
      text-align: center;
      text-justify: none;
      hyphens: none;
      -webkit-hyphens: none;
      margin-inline: auto;
    }

    /* Centered UI chrome */
    .about-body .about-hero__subtitle,
    .about-body .stat-bubble .stat-label,
    .about-body .stat-bubble .stat-num,
    .about-body .step-card__num,
    .about-body .timeline-year,
    .about-body .timeline-title,
    .about-body .role-tag,
    .about-body .location-chip,
    .about-body .eco-card__badge,
    .about-body .step-card__title,
    .about-body .roadmap-card__title,
    .about-body .core-belief__line {
      text-align: center;
      hyphens: none;
      -webkit-hyphens: none;
    }

    .about-body .built-text .about-built__lead {
      hyphens: auto;
      -webkit-hyphens: auto;
      text-align: justify;
      text-justify: inter-word;
      max-width: 42rem;
      width: 100%;
    }

    .about-body .mv-card p,
    .about-body .mv-card li {
      hyphens: auto;
      -webkit-hyphens: auto;
    }

    /* About CTA headline is longer than the home line — allow comfortable wrap */
    .about-body .cta-banner__content h2 {
      max-width: min(100%, 28ch);
    }

    /* Shown inside brochure.html via iframe — hide duplicate header/footer */
    html.about-embed .site-header,
    html.about-embed .site-footer {
      display: none !important;
    }

    /* ---- Shared eyebrow / section heading helpers ---- */
    .about-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 0.45rem;
      padding: 0.4rem 0.95rem;
      background: var(--color-badge-bg);
      border: 1px solid var(--color-badge-border);
      border-radius: 999px;
      font-family: var(--font);
      font-size: 0.8125rem;
      font-weight: 500;
      line-height: 1.2;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--color-primary-dark);
    }

    .about-eyebrow::before {
      content: "";
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--color-primary);
      box-shadow: 0 0 0 3px rgba(0, 114, 255, 0.15);
      flex-shrink: 0;
    }

    .about-section-title {
      position: relative;
      margin: 0;
      padding-top: 0.85rem;
      font-family: var(--font);
      font-weight: 600;
      font-size: clamp(1.75rem, calc(2.4vw + 1.05rem), 2.75rem);
      line-height: 1.12;
      letter-spacing: -0.015em;
      color: var(--color-gray-950);
      text-wrap: balance;
    }

    .about-section-title::before {
      content: "";
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 44px;
      height: 3px;
      border-radius: 999px;
      background: var(--color-primary);
      box-shadow: 0 0 12px rgba(0, 114, 255, 0.35);
    }

    /* ---- Heading word highlights (h1/h2/h3 accents) ---- */
    .about-body .accent {
      position: relative;
      display: inline-block;
      color: var(--color-primary);
      font-weight: inherit;
      white-space: nowrap;
    }

    .about-body .accent::after {
      content: "";
      position: absolute;
      left: -0.08em;
      right: -0.08em;
      bottom: 0.05em;
      height: 0.32em;
      background: var(--color-badge-bg);
      border-radius: 4px;
      z-index: -1;
      transform: skewX(-6deg);
    }

    .about-body .accent--gradient {
      background: linear-gradient(135deg, var(--color-primary) 0%, var(--blue-cyan) 100%);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      color: transparent;
    }

    .about-body .accent--gradient::after {
      display: none;
    }

    .about-body .accent--underline {
      color: var(--color-gray-950);
      background-image: linear-gradient(120deg, rgba(0, 114, 255, 0.28) 0%, rgba(0, 114, 255, 0.28) 100%);
      background-repeat: no-repeat;
      background-size: 100% 0.32em;
      background-position: 0 88%;
    }

    .about-body .accent--underline::after {
      display: none;
    }

    .about-section-lead {
      margin: 0;
      max-width: 42rem;
      font-family: var(--font);
      font-weight: 300;
      font-size: clamp(1rem, calc(0.4vw + 0.92rem), 1.1875rem);
      line-height: 1.6;
      color: var(--color-gray-700);
    }

    .about-section-head {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 1.1rem;
      margin: 0 auto clamp(2rem, 5vw, 3.25rem);
      max-width: 52rem;
      text-align: center;
    }

    @media (min-width: 768px) {
      .about-section-head {
        gap: 1.25rem;
        margin-bottom: clamp(2.5rem, 5.5vw, 3.75rem);
      }
    }

    .about-section {
      padding: clamp(3.5rem, 8vw, 6rem) 0;
    }

    /* Hide brochure CTA when About is embedded on brochure.html (avoids redundant control) */
    html.about-embed .about-cta-brochure {
      display: none !important;
    }

    /* ============================================================
         SECTION 1 — HERO
         ============================================================ */
    .about-hero {
      position: relative;
      overflow: hidden;
      isolation: isolate;
      background: var(--color-hero-wash, var(--blue-50));
      padding: clamp(4rem, 10vw, 7rem) 0 clamp(3.5rem, 8vw, 5.5rem);
    }

    /* Floating math symbols — layered on top of hero_bg.svg, under watermark + copy */
    .about-hero__symbols {
      position: absolute;
      inset: 0;
      z-index: 1;
      pointer-events: none;
    }

    .about-hero__symbols span {
      position: absolute;
      font-family: var(--font);
      font-weight: 600;
      color: rgba(0, 114, 255, 0.29);
      /* text-shadow: 0 2px 12px rgba(0, 114, 255, 0.18); */
      user-select: none;
      will-change: transform;
      animation-name: aboutHeroFloat;
      animation-iteration-count: infinite;
      animation-timing-function: ease-in-out;
    }

    .about-hero__symbols span:nth-child(1) {
      top: 12%;
      left: 8%;
      font-size: clamp(48px, 6vw, 84px);
      --rot: -12deg;
      animation-duration: 5.5s;
    }

    .about-hero__symbols span:nth-child(2) {
      top: 22%;
      right: 10%;
      font-size: clamp(40px, 5vw, 70px);
      --rot: 14deg;
      animation-duration: 4.6s;
    }

    .about-hero__symbols span:nth-child(3) {
      bottom: 28%;
      left: 14%;
      font-size: clamp(44px, 5.5vw, 80px);
      --rot: 7deg;
      animation-duration: 5.2s;
    }

    .about-hero__symbols span:nth-child(4) {
      bottom: 16%;
      right: 16%;
      font-size: clamp(36px, 4.5vw, 64px);
      --rot: -22deg;
      animation-duration: 4.2s;
    }

    .about-hero__symbols span:nth-child(5) {
      top: 48%;
      left: 4%;
      font-size: clamp(32px, 4vw, 56px);
      --rot: 18deg;
      animation-duration: 6s;
    }

    .about-hero__symbols span:nth-child(6) {
      top: 56%;
      right: 6%;
      font-size: clamp(38px, 4.8vw, 68px);
      --rot: -8deg;
      animation-duration: 4.8s;
    }

    .about-hero__symbols span:nth-child(7) {
      top: 18%;
      left: 42%;
      font-size: clamp(28px, 3.5vw, 48px);
      --rot: 25deg;
      animation-duration: 5.8s;
    }

    .about-hero__symbols span:nth-child(8) {
      bottom: 38%;
      right: 18%;
      font-size: clamp(30px, 3.8vw, 52px);
      --rot: -15deg;
      animation-duration: 4.4s;
    }

    .about-hero__symbols span {
      transform: rotate(var(--rot, 0deg));
    }

    @keyframes aboutHeroFloat {

      0%,
      100% {
        transform: translateY(0) rotate(var(--rot, 0deg));
      }

      50% {
        transform: translateY(-14px) rotate(var(--rot, 0deg));
      }
    }

    /* Giant watermark behind heading — above SVG + floating symbols, below copy */
    .about-hero__year-deco {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -58%);
      font-family: var(--font);
      font-weight: 600;
      font-size: clamp(120px, 20vw, 200px);
      line-height: 1;
      color: rgba(0, 114, 255, 0.06);
      z-index: 2;
      pointer-events: none;
      user-select: none;
      white-space: nowrap;
    }

    .about-hero>.container {
      position: relative;
      z-index: 3;
    }

    .about-hero__inner {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: clamp(1.5rem, 3vw, 2.25rem);
      max-width: 760px;
      margin: 0 auto;
      text-align: center;
    }

    .about-hero__title {
      margin: 0;
      font-family: var(--font);
      font-weight: 500;
      font-size: clamp(2rem, calc(3.6vw + 1rem), 3.5rem);
      line-height: 1.12;
      color: #030712;
      text-wrap: balance;
    }

    .about-hero__subtitle {
      margin: 0;
      max-width: 600px;
      font-family: var(--font);
      font-weight: 300;
      font-size: clamp(1rem, calc(0.4vw + 0.9rem), 1.125rem);
      line-height: 1.6;
      color: var(--color-gray-700);
    }

    .stat-bubbles {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: clamp(0.75rem, 2vw, 1.25rem);
      margin-top: clamp(0.5rem, 2vw, 1rem);
    }

    .stat-bubble {
      background: var(--color-white);
      border: 1px solid var(--color-gray-200);
      border-radius: var(--radius-lg);
      box-shadow: 0 10px 32px rgba(15, 23, 42, 0.06);
      padding: 1.25rem 1.75rem;
      min-width: 132px;
      text-align: center;
      opacity: 0;
      transform: translateY(12px) scale(0.96);
      transition: opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .stat-bubble.is-visible {
      opacity: 1;
      transform: translateY(0) scale(1);
    }

    .stat-bubble:nth-child(1) {
      transition-delay: 0ms;
    }

    .stat-bubble:nth-child(2) {
      transition-delay: 100ms;
    }

    .stat-bubble:nth-child(3) {
      transition-delay: 200ms;
    }

    .stat-num {
      display: block;
      font-family: var(--font);
      font-weight: 600;
      font-size: clamp(1.75rem, 2.2vw + 0.6rem, 2.25rem);
      line-height: 1.1;
      color: var(--color-primary);
    }

    .stat-label {
      display: block;
      margin-top: 0.35rem;
      font-family: var(--font);
      font-weight: 300;
      font-size: 0.8125rem;
      line-height: 1.3;
      color: var(--color-gray-600);
    }

    /* ============================================================
         SECTION 2 — WHY MATHTAB WAS BUILT (prose)
         ============================================================ */
    .about-why {
      background: var(--color-white);
    }

    .prose-column {
      max-width: 760px;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      gap: 1.25rem;
    }

    .prose-column p {
      margin: 0;
      font-family: var(--font);
      font-weight: 300;
      font-size: clamp(1rem, calc(0.4vw + 0.95rem), 1.0625rem);
      line-height: 1.75;
      color: var(--color-gray-700);
    }

    /* Inline highlighted, clickable link inside prose paragraphs */
    .prose-column p a,
    a.prose-link {
      position: relative;
      color: var(--color-primary);
      font-weight: 500;
      text-decoration: none;
      background-image: linear-gradient(120deg, rgba(0, 114, 255, 0.18) 0%, rgba(0, 114, 255, 0.18) 100%);
      background-repeat: no-repeat;
      background-size: 100% 0.32em;
      background-position: 0 88%;
      padding: 0 0.12em;
      border-radius: 3px;
      transition: background-size 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
    }

    .prose-column p a::after,

    .prose-column p a:hover,
    .prose-column p a:focus-visible,
    a.prose-link:hover,
    a.prose-link:focus-visible {
      color: var(--blue-cyan);
      background-size: 100% 100%;
      outline: none;
    }

    .prose-column p a:hover::after,
    .prose-column p a:focus-visible::after,
    a.prose-link:hover::after,
    a.prose-link:focus-visible::after {
      transform: translate(0.1em, -0.18em);
    }

    .prose-column p a:focus-visible,
    a.prose-link:focus-visible {
      box-shadow: 0 0 0 3px rgba(0, 114, 255, 0.35);
    }

    /* ============================================================
         SECTION 3 — WHO BUILT MATHTAB
         ============================================================ */
    .about-built {
      background: var(--color-hero-wash, var(--blue-50));
    }

    .about-built__grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 2.5rem;
      align-items: start;
    }

    @media (min-width: 900px) {
      .about-built__grid {
        grid-template-columns: 1fr 1fr;
        gap: 3.75rem;
      }
    }

    .built-text {
      display: flex;
      flex-direction: column;
      gap: 1.25rem;
      align-items: center;
      text-align: center;
    }

    .built-text .about-eyebrow {
      align-self: center;
    }

    .about-built__title {
      position: relative;
      margin: 0;
      padding-top: 0.85rem;
      font-family: var(--font);
      font-weight: 600;
      font-size: clamp(1.625rem, calc(1.8vw + 1.1rem), 2.5rem);
      line-height: 1.14;
      letter-spacing: -0.015em;
      color: var(--color-gray-950);
      text-wrap: balance;
    }

    .about-built__title::before {
      content: "";
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 44px;
      height: 3px;
      border-radius: 999px;
      background: var(--color-primary);
      box-shadow: 0 0 12px rgba(0, 114, 255, 0.35);
    }

    .about-built__lead {
      margin: 0;
      font-family: var(--font);
      font-weight: 300;
      font-size: clamp(1rem, calc(0.4vw + 0.95rem), 1.0625rem);
      line-height: 1.75;
      color: var(--color-gray-700);
    }

    .location-chip {
      display: inline-flex;
      align-items: center;
      gap: 0.45rem;
      padding: 0.5rem 0.85rem;
      background: var(--color-badge-bg);
      border: 1px solid var(--color-badge-border);
      border-radius: 12px;
      font-family: var(--font);
      font-weight: 500;
      font-size: 0.9375rem;
      color: var(--color-primary-dark);
    }

    .location-chip svg {
      width: 16px;
      height: 16px;
      flex-shrink: 0;
    }

    .role-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem;
    }

    .role-tag {
      display: inline-flex;
      align-items: center;
      padding: 0.4rem 0.85rem;
      background: var(--color-badge-bg);
      border: 1px solid var(--color-badge-border);
      border-radius: 12px;
      font-family: var(--font);
      font-weight: 500;
      font-size: 0.875rem;
      color: var(--color-primary-dark);
    }

    /* Timeline */
    .timeline {
      background: var(--color-white);
      border: 1px solid var(--color-gray-200);
      border-radius: var(--radius-lg);
      box-shadow: 0 10px 32px rgba(15, 23, 42, 0.06);
      padding: 1.75rem 1.5rem;
    }

    @media (min-width: 600px) {
      .timeline {
        padding: 2rem;
      }
    }

    .timeline__list {
      list-style: none;
      margin: 0;
      padding: 0;
      position: relative;
    }

    .timeline__list::before {
      content: "";
      position: absolute;
      top: 8px;
      bottom: 8px;
      left: 12px;
      width: 0;
      border-left: 2px dashed rgba(0, 114, 255, 0.45);
    }

    .timeline__item {
      position: relative;
      padding: 0 0 1.5rem 2.25rem;
    }

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

    .timeline__dot {
      position: absolute;
      left: 4px;
      top: 6px;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: var(--color-primary);
      box-shadow: 0 0 0 4px rgba(0, 114, 255, 0.15);
      transform: scale(0);
      transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .timeline__item.is-visible .timeline__dot {
      transform: scale(1);
    }

    .timeline-year {
      display: inline-block;
      margin-bottom: 0.25rem;
      padding: 0.2rem 0.6rem;
      background: var(--color-badge-bg);
      border-radius: 999px;
      font-family: var(--font);
      font-weight: 500;
      font-size: 0.75rem;
      color: var(--color-primary-dark);
    }

    .timeline-title {
      margin: 0.25rem 0 0.35rem;
      font-family: var(--font);
      font-weight: 500;
      font-size: 1.0625rem;
      line-height: 1.3;
      color: #030712;
    }

    .timeline-desc {
      margin: 0;
      font-family: var(--font);
      font-weight: 300;
      font-size: 0.875rem;
      line-height: 1.6;
      color: var(--color-gray-600);
    }

    /* ============================================================
         SECTION 4 — MISSION & VISION
         ============================================================ */
    .about-mv {
      background: var(--color-white);
    }

    .mv-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 1.5rem;
      max-width: 1100px;
      margin: 0 auto;
    }

    @media (min-width: 768px) {
      .mv-grid {
        grid-template-columns: 1fr 1fr;
        gap: 1.75rem;
        align-items: stretch;
      }
    }

    .mv-card {
      position: relative;
      background: var(--color-white);
      border: 1px solid var(--color-gray-200);
      border-radius: var(--radius-lg);
      box-shadow: 0 10px 32px rgba(15, 23, 42, 0.06);
      padding: 1.75rem 1.5rem;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.85rem;
      text-align: center;
    }

    @media (min-width: 600px) {
      .mv-card {
        padding: 2rem;
      }
    }

    .mv-card--mission {
      background: var(--color-badge-bg);
      border: 1px solid var(--color-badge-border);
    }

    .mv-card__kicker {
      display: inline-flex;
      align-self: center;
      padding: 0.3rem 0.7rem;
      background: var(--color-white);
      border: 1px solid var(--color-badge-border);
      border-radius: 999px;
      font-family: var(--font);
      font-weight: 500;
      font-size: 0.75rem;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: var(--color-primary-dark);
    }

    .mv-card--mission .mv-card__kicker {
      background: var(--color-white);
    }

    .mv-card__title {
      margin: 0;
      font-family: var(--font);
      font-weight: 500;
      font-size: clamp(1.25rem, calc(0.7vw + 1rem), 1.625rem);
      line-height: 1.25;
      color: #030712;
    }

    .mv-card p {
      margin: 0;
      width: 100%;
      font-family: var(--font);
      font-weight: 300;
      font-size: 1rem;
      line-height: 1.65;
      color: var(--color-gray-700);
      text-align: justify;
      text-justify: inter-word;
    }

    .mv-list {
      margin: 0;
      padding: 0;
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 0.55rem;
      width: 100%;
      text-align: left;
    }

    .mv-list li {
      position: relative;
      padding-left: 1.5rem;
      font-family: var(--font);
      font-weight: 300;
      font-size: 0.9375rem;
      line-height: 1.55;
      color: var(--color-gray-700);
    }

    .mv-list li::before {
      content: "✓";
      position: absolute;
      left: 0;
      top: 0;
      font-weight: 500;
      color: var(--color-primary);
    }

    /* ============================================================
         SECTION 5 — WHAT MAKES MATHTAB DIFFERENT (learning flow)
         ============================================================ */
    .about-flow {
      background: var(--color-hero-wash, var(--blue-50));
    }

    .about-flow__lead {
      text-align: center;
    }

    .about-flow__outro {
      max-width: 760px;
      margin: clamp(2rem, 5vw, 2.75rem) auto 0;
      font-family: var(--font);
      font-weight: 300;
      font-size: clamp(1rem, calc(0.4vw + 0.95rem), 1.0625rem);
      line-height: 1.75;
      color: var(--color-gray-700);
      text-align: center;
      text-wrap: pretty;
    }

    /* "No skipping / No shortcuts" pledge — single unified card under the outro */
    .about-flow__pledge {
      max-width: 100%;
      margin: clamp(1.1rem, 2.6vw, 1.6rem) auto 0;
      padding: 0;
      display: flex;
      justify-content: center;
      font-family: var(--font);
    }
    .about-flow__pledge-card {
      position: relative;
      display: inline-flex;
      align-items: center;
      flex-wrap: nowrap;
      gap: clamp(0.65rem, 1.6vw, 1.1rem);
      padding: clamp(0.6rem, 1.4vw, 0.85rem) clamp(0.95rem, 2.4vw, 1.6rem);
      border-radius: 999px;
      background:
        linear-gradient(135deg, rgba(0, 114, 255, 0.10) 0%, rgba(235, 51, 73, 0.08) 100%),
        var(--color-white, #ffffff);
      border: 1px solid rgba(0, 114, 255, 0.28);
      box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.6) inset,
        0 10px 28px rgba(0, 114, 255, 0.14);
      overflow: hidden;
    }
    .about-flow__pledge-card::before {
      content: "";
      position: absolute;
      top: 0;
      left: 12%;
      right: 12%;
      height: 2px;
      background: linear-gradient(90deg,
        rgba(0, 114, 255, 0) 0%,
        var(--color-primary) 50%,
        rgba(235, 51, 73, 0) 100%);
      border-radius: 999px;
    }
    .about-flow__pledge strong {
      flex: 0 1 auto;
      min-width: 0;
      white-space: nowrap;
      font-weight: 600;
      font-size: clamp(0.78rem, calc(0.55vw + 0.7rem), 1.0625rem);
      letter-spacing: 0.005em;
      color: var(--color-gray-950, #030712);
      line-height: 1.3;
    }
    .about-flow__pledge-sep {
      flex: 0 0 auto;
      width: 1px;
      height: 1.15em;
      background: linear-gradient(180deg,
        rgba(0, 114, 255, 0) 0%,
        var(--color-primary) 50%,
        rgba(235, 51, 73, 0) 100%);
      opacity: 0.7;
    }
    @media (max-width: 420px) {
      .about-flow__pledge-card {
        flex-direction: column;
        gap: 0.25rem;
        padding: 0.7rem 1rem;
        border-radius: 18px;
        text-align: center;
      }
      .about-flow__pledge-sep {
        width: 36%;
        height: 1px;
        background: linear-gradient(90deg,
          rgba(0, 114, 255, 0) 0%,
          var(--color-primary) 50%,
          rgba(235, 51, 73, 0) 100%);
      }
    }

    .steps-grid {
      position: relative;
      display: grid;
      grid-template-columns: 1fr;
      gap: 1.25rem;
    }

    @media (min-width: 768px) {
      .steps-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media (min-width: 900px) {
      .steps-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.5rem;
      }
    }

    @media (min-width: 1200px) {
      .steps-grid {
        grid-template-columns: repeat(4, 1fr);
      }
    }

    .step-card {
      position: relative;
      background: var(--color-white);
      border-radius: 20px;
      box-shadow: 0 10px 32px rgba(15, 23, 42, 0.06);
      padding: 1.5rem 1.5rem 1.75rem;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.65rem;
      opacity: 0;
      transform: translateY(18px);
      transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .step-card.is-visible {
      opacity: 1;
      transform: translateY(0);
    }

    .step-card__num {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0.35rem 0.8rem;
      background: var(--color-badge-bg);
      color: var(--color-primary);
      border-radius: 999px;
      font-family: var(--font);
      font-weight: 500;
      font-size: 0.75rem;
      letter-spacing: 0.04em;
    }

    .step-card__icon {
      width: 32px;
      height: 32px;
      margin-top: 0.35rem;
      color: var(--color-primary);
    }

    .step-card__icon--img {
      object-fit: contain;
      display: block;
    }

    .step-card__title {
      margin: 0.5rem 0 0;
      font-family: var(--font);
      font-weight: 500;
      font-size: 1rem;
      line-height: 1.3;
      color: #030712;
    }

    .step-body {
      margin: 0;
      font-family: var(--font);
      font-weight: 300;
      font-size: 0.875rem;
      line-height: 1.65;
      color: var(--color-gray-600);
    }

    /* Dashed orange connector (desktop only) */
    @media (min-width: 1200px) {
      .steps-grid::before {
        content: "";
        position: absolute;
        top: 56px;
        left: 6%;
        right: 6%;
        height: 0;
        border-top: 2px dashed rgba(0, 114, 255, 0.35);
        z-index: 0;
        pointer-events: none;
      }

      .step-card {
        z-index: 1;
      }
    }

    /* ============================================================
         SECTION 6 — OUR LEARNING PHILOSOPHY
         ============================================================ */
    .about-beliefs {
      background: linear-gradient(135deg, #fff8f5 0%, #fffffe 100%);
    }

    .belief-list {
      list-style: none;
      margin: 0 auto;
      padding: 0;
      max-width: 1100px;
      display: flex;
      flex-direction: column;
    }

    .belief {
      position: relative;
      display: grid;
      grid-template-columns: 1fr;
      gap: 0.5rem 2rem;
      align-items: center;
      padding: 2rem 0;
      border-bottom: 1px solid var(--color-gray-200);
    }

    .belief:last-child {
      border-bottom: none;
    }

    @media (min-width: 768px) {
      .belief {
        grid-template-columns: minmax(120px, 180px) 1fr;
        padding: 2.5rem 0;
      }

      .belief--even {
        grid-template-columns: 1fr minmax(120px, 180px);
      }

      .belief--even .belief__num {
        order: 2;
        justify-self: end;
      }

      .belief--even .belief__content {
        order: 1;
      }
    }

    .belief__num {
      font-family: var(--font);
      font-weight: 600;
      font-size: clamp(64px, 10vw, 96px);
      line-height: 1;
      color: rgba(0, 114, 255, 0.15);
      text-align: center;
      opacity: 0;
      transform: scale(0.8);
      transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
      user-select: none;
    }

    .belief.is-visible .belief__num {
      opacity: 1;
      transform: scale(1);
    }

    .belief__content {
      max-width: 580px;
      margin-inline: auto;
      text-align: center;
    }

    .belief__title {
      margin: 0 0 0.65rem;
      font-family: var(--font);
      font-weight: 500;
      font-size: clamp(1.25rem, calc(0.9vw + 0.95rem), 1.75rem);
      line-height: 1.25;
      color: #030712;
      text-wrap: balance;
    }

    .belief-body {
      margin: 0 auto;
      max-width: 520px;
      font-family: var(--font);
      font-weight: 300;
      font-size: 1rem;
      line-height: 1.7;
      color: var(--color-gray-700);
      text-align: justify;
      text-justify: inter-word;
    }

    /* ============================================================
         SECTION 7 — THE JOURNEY AHEAD (roadmap)
         ============================================================ */
    .about-roadmap {
      background: var(--color-white);
    }

    .roadmap-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 1rem;
      max-width: 1100px;
      margin: 0 auto;
    }

    @media (min-width: 768px) {
      .roadmap-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media (min-width: 900px) {
      .roadmap-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.25rem;
      }
    }

    .roadmap-card {
      position: relative;
      background: var(--color-white);
      border: 1px solid var(--color-gray-200);
      border-radius: var(--radius-md);
      padding: 1.25rem 1.25rem 1.35rem;
      display: flex;
      flex-direction: column;
      gap: 0.55rem;
      box-shadow: 0 6px 20px rgba(15, 23, 42, 0.04);
      opacity: 0;
      transform: translateY(14px);
      transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .roadmap-card.is-visible {
      opacity: 1;
      transform: translateY(0);
    }

    .roadmap-card__icon {
      width: 36px;
      height: 36px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 10px;
      background: var(--color-badge-bg);
      color: var(--color-primary);
      margin-bottom: 0.2rem;
    }

    .roadmap-card__icon svg {
      width: 18px;
      height: 18px;
    }

    .roadmap-card__title {
      margin: 0;
      font-family: var(--font);
      font-weight: 500;
      font-size: 1rem;
      line-height: 1.3;
      color: #030712;
    }

    .roadmap-card p {
      margin: 0;
      font-family: var(--font);
      font-weight: 300;
      font-size: 0.875rem;
      line-height: 1.55;
      color: var(--color-gray-600);
    }

    .about-roadmap__outro {
      max-width: 760px;
      margin: clamp(2rem, 5vw, 2.5rem) auto 0;
      font-family: var(--font);
      font-weight: 300;
      font-size: 1rem;
      line-height: 1.7;
      color: var(--color-gray-700);
    }

    /* ============================================================
         SECTION 8 — THE ECOSYSTEM
         ============================================================ */
    .about-eco {
      background: var(--color-gray-100);
    }

    .eco-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 1.25rem;
      max-width: 1200px;
      margin: 0 auto 2.5rem;
    }

    @media (min-width: 768px) {
      .eco-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.5rem;
        align-items: stretch;
      }
    }

    .eco-card {
      position: relative;
      background: var(--color-white);
      border: 1px solid var(--color-gray-200);
      border-radius: var(--radius-lg);
      box-shadow: 0 10px 32px rgba(15, 23, 42, 0.06);
      padding: 1.75rem 1.5rem;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.75rem;
      text-align: center;
    }

    .eco-card--highlight {
      background: var(--color-badge-bg);
      border: 2px solid var(--color-primary);
    }

    .eco-card__badge {
      position: absolute;
      top: 0.85rem;
      right: 0.85rem;
      padding: 0.3rem 0.65rem;
      background: var(--color-primary);
      color: var(--color-white);
      border-radius: 999px;
      font-family: var(--font);
      font-weight: 500;
      font-size: 0.7rem;
      letter-spacing: 0.02em;
    }

    .eco-card__kicker {
      display: block;
      width: 100%;
      font-family: var(--font);
      font-weight: 500;
      font-size: 0.75rem;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--color-primary-dark);
      text-align: center;
    }

    .eco-card__title {
      margin: 0;
      font-family: var(--font);
      font-weight: 500;
      font-size: 1.25rem;
      line-height: 1.3;
      color: #030712;
      text-align: center;
    }

    .eco-card .card-body {
      margin: 0;
      width: 100%;
      font-family: var(--font);
      font-weight: 300;
      font-size: 0.9375rem;
      line-height: 1.6;
      color: var(--color-gray-700);
      text-align: justify;
      text-justify: inter-word;
    }

    /* Core belief callout */
    .core-belief {
      max-width: 760px;
      margin: 0 auto;
      background: var(--color-white);
      border: 1px solid var(--color-badge-border);
      border-radius: var(--radius-lg);
      box-shadow: 0 10px 32px rgba(15, 23, 42, 0.06);
      padding: 1.5rem 1.5rem 1.75rem;
      text-align: center;
    }

    .core-belief__kicker {
      display: inline-block;
      margin-bottom: 0.5rem;
      font-family: var(--font);
      font-weight: 500;
      font-size: 0.75rem;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--color-primary-dark);
    }

    .core-belief__line {
      margin: 0;
      font-family: var(--font);
      font-weight: 500;
      font-size: clamp(1.125rem, calc(0.8vw + 0.95rem), 1.5rem);
      line-height: 1.3;
      color: #030712;
    }

    /* ============================================================
         Tablet & mobile (about page)
         ============================================================ */
    @media (max-width: 1024px) {
      .about-hero__year-deco {
        font-size: clamp(46px, 12vw, 96px);
        white-space: nowrap;
        text-align: center;
        max-width: none;
        line-height: 1;
      }

      .about-section {
        padding: clamp(2.5rem, 6vw, 4rem) 0;
      }

      .about-section-title {
        font-size: clamp(1.5rem, 4vw, 2.25rem);
      }
    }

    @media (max-width: 768px) {
      .about-hero {
        padding: clamp(2.25rem, 7vw, 3.5rem) 0 clamp(2rem, 5vw, 2.75rem);
      }

      .about-hero > .container,
      .about-hero__inner,
      .about-built__grid,
      .built-text,
      .timeline,
      .prose-column,
      .mv-grid,
      .steps-grid,
      .roadmap-grid,
      .eco-grid {
        width: 100%;
        max-width: 100%;
        min-width: 0;
      }

      .about-body .accent {
        white-space: normal;
        overflow-wrap: anywhere;
      }

      .about-hero__title br,
      .about-built__title br {
        display: none;
      }

      .about-hero__symbols span {
        opacity: 0.45;
      }

      .about-hero__symbols span:nth-child(5),
      .about-hero__symbols span:nth-child(6),
      .about-hero__symbols span:nth-child(7),
      .about-hero__symbols span:nth-child(8) {
        display: none;
      }

      .stat-bubbles {
        width: 100%;
      }

      .stat-bubble {
        min-width: 0;
        flex: 1 1 calc(50% - 0.5rem);
        max-width: calc(50% - 0.5rem);
        padding: 1rem 1.25rem;
      }

      .role-tags {
        justify-content: center;
      }

      .about-flow__pledge-card {
        flex-wrap: wrap;
        justify-content: center;
        max-width: 100%;
      }

      .about-flow__pledge strong {
        white-space: normal;
      }

      .roadmap-grid {
        grid-template-columns: 1fr;
      }

      .roadmap-card__icon {
        align-self: center;
        margin-inline: auto;
      }

      .eco-card--highlight {
        order: -1;
        padding-top: 2.75rem;
      }

      .eco-card__badge {
        font-size: 0.65rem;
        padding: 0.25rem 0.5rem;
        top: 0.65rem;
        right: 0.65rem;
      }

      .page-about .about-cta__card p {
        font-size: 1rem;
      }
    }

    @media (max-width: 640px) {
      .about-hero__year-deco {
        font-size: clamp(42px, 12vw, 84px);
        transform: translate(-50%, -52%);
      }

      .about-hero__title {
        font-size: clamp(1.65rem, 7vw, 2rem);
      }

      .about-hero__subtitle {
        font-size: 0.9375rem;
      }

      .stat-bubbles {
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: stretch;
        width: 100%;
        gap: 0.75rem;
      }

      .stat-bubble {
        flex: 1 1 0;
        min-width: 0;
        max-width: none;
        padding: 1rem 0.75rem;
      }

      .stat-num {
        font-size: clamp(1.35rem, 5vw, 1.75rem);
      }

      .about-built__grid {
        gap: 2rem;
      }

      .about-built__title {
        font-size: clamp(1.35rem, 5.5vw, 1.75rem);
      }

      .timeline {
        padding: 1.25rem 1rem;
      }

      .steps-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
      }

      .step-card {
        padding: 1.25rem 1.25rem 1.5rem;
      }

      .mv-card {
        padding: 1.35rem 1.15rem;
      }

      .about-body,
      .about-body .step-body,
      .about-body .belief-body,
      .about-body .timeline-desc,
      .about-body .card-body,
      .about-body .prose-column p,
      .about-body .about-built__lead,
      .about-body .mv-card p,
      .about-body .mv-card li {
        text-align: left;
        text-justify: auto;
        hyphens: none;
        -webkit-hyphens: none;
      }

      .about-body .about-section-lead,
      .about-body .about-flow__outro,
      .about-body .about-roadmap__outro {
        text-align: center;
        text-justify: none;
      }

      .belief {
        padding: 1.5rem 0;
      }

      .belief__num {
        font-size: clamp(48px, 14vw, 64px);
      }

      .belief__title {
        font-size: 1.125rem;
      }

      .eco-grid {
        gap: 1rem;
      }

      .eco-card {
        padding: 1.5rem 1.25rem;
        padding-top: 2.25rem;
      }

      .core-belief {
        padding: 1.25rem 1.15rem 1.5rem;
      }

      .page-about .how-card {
        padding: 40px 20px;
      }

      .page-about .how-card h2 {
        font-size: clamp(1.35rem, 5vw, 1.75rem);
      }

      .page-about .about-cta__card {
        padding: 1.5rem 1.25rem;
      }

      .page-about .about-cta__card h2 {
        font-size: clamp(1.25rem, 5.5vw, 1.5rem);
      }

      .page-about .about-cta__card .btn-demo {
        width: 100%;
        max-width: none;
        margin-top: 0;
      }
    }

    @media (max-width: 480px) {
      .about-section-head {
        margin-bottom: 1.75rem;
      }

      .about-eyebrow {
        font-size: 0.75rem;
        padding: 0.35rem 0.75rem;
      }

      .about-section-title,
      .about-built__title {
        font-size: clamp(1.25rem, 6vw, 1.5rem);
      }

      .prose-column p {
        font-size: 0.9375rem;
        line-height: 1.65;
      }

      .mv-card__title {
        font-size: 1.125rem;
      }

      .eco-card__badge {
        position: static;
        align-self: center;
        margin-bottom: 0.35rem;
      }

      .eco-card--highlight {
        padding-top: 1.5rem;
      }
    }

    /* ============================================================
         Reduced motion overrides
         ============================================================ */
    @media (prefers-reduced-motion: reduce) {
      .about-hero__symbols span {
        animation: none !important;
      }

      .stat-bubble,
      .step-card,
      .roadmap-card,
      .timeline__dot,
      .belief__num {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
      }
    }