.about-page .primary-nav a[aria-current="page"] { color: var(--violet); }

.about-page-hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 83% 24%, rgba(159, 116, 244, 0.32), transparent 17%),
    radial-gradient(circle at 68% 80%, rgba(113, 60, 208, 0.12), transparent 25%),
    linear-gradient(118deg, #fbfaff 0%, #f1edfc 58%, #e9e0fb 100%);
}

.about-page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(87, 35, 185, 0.16) 1px, transparent 1px);
  background-size: 24px 24px;
  mask-image: linear-gradient(90deg, transparent 8%, #000 54%, transparent 100%);
  opacity: 0.42;
}

.about-hero-orbit {
  position: absolute;
  border: 1px solid rgba(89, 34, 191, 0.18);
  border-radius: 50%;
  pointer-events: none;
}

.about-hero-orbit-one {
  width: 530px;
  height: 530px;
  top: -260px;
  right: -54px;
  box-shadow: 0 0 0 34px rgba(116, 68, 211, 0.055), 0 0 0 68px rgba(116, 68, 211, 0.035);
}

.about-hero-orbit-two {
  width: 290px;
  height: 290px;
  right: 20%;
  bottom: -206px;
  box-shadow: 0 0 0 24px rgba(116, 68, 211, 0.045);
}

.about-page-hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.16fr) minmax(340px, 0.84fr);
  gap: clamp(38px, 7vw, 105px);
  align-items: center;
  min-height: 530px;
  padding: 72px 0;
}

.about-page-hero-copy { max-width: 700px; }
.about-page h1 { max-width: 720px; margin-bottom: 20px; font-size: clamp(3rem, 5.2vw, 4.55rem); }
.about-page h1 span { color: var(--violet); }
.about-page-hero-copy > p { max-width: 690px; color: #3f385f; font-size: var(--text-body-large); font-weight: 700; line-height: 1.62; }
.about-page-hero-copy .about-page-lead { margin-bottom: 12px; color: #2d2650; font-size: clamp(1.2rem, 1.7vw, 1.38rem); font-weight: 800; line-height: 1.52; }
.about-page-hero-copy .button-row { margin-top: 28px; }

.plain-language-card {
  position: relative;
  overflow: hidden;
  padding: 32px;
  border: 1px solid rgba(99, 45, 197, 0.18);
  border-radius: 20px;
  color: #fff;
  background: linear-gradient(145deg, #35117d 0%, #4f1dad 62%, #6730c8 100%);
  box-shadow: 0 20px 44px rgba(50, 20, 123, 0.19);
}

.plain-language-card::after {
  content: "";
  position: absolute;
  width: 220px;
  height: 220px;
  right: -132px;
  top: -110px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  box-shadow: 0 0 0 25px rgba(255, 255, 255, 0.045), 0 0 0 50px rgba(255, 255, 255, 0.025);
}

.plain-language-card > * { position: relative; z-index: 1; }
.plain-language-icon { width: 54px; height: 54px; display: grid; place-items: center; margin-bottom: 22px; border: 1px solid rgba(255, 255, 255, 0.72); border-radius: 50%; background: rgba(255, 255, 255, 0.1); }
.plain-language-icon .lucide { width: 29px; height: 29px; }
.plain-language-card .eyebrow { color: #d9c6ff; }
.plain-language-card h2 { margin-bottom: 12px; color: #fff; font-size: clamp(1.65rem, 2.1vw, 2.05rem); font-weight: 900; line-height: 1.15; }
.plain-language-card > p:not(.eyebrow) { margin-bottom: 21px; color: rgba(255, 255, 255, 0.91); font-size: var(--text-body); font-weight: 700; line-height: 1.55; }

.term-list { display: grid; gap: 12px; }
.term-list div { display: grid; grid-template-columns: 70px 1fr; gap: 10px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, 0.21); }
.term-list strong { color: #fff; font-size: var(--text-ui); font-weight: 900; }
.term-list span { color: rgba(255, 255, 255, 0.86); font-size: var(--text-caption); font-weight: 700; line-height: 1.45; }

.about-notice { border-bottom: 1px solid #e4dcf6; background: #fbfaff; }
.about-notice-inner { display: flex; align-items: center; gap: 13px; min-height: 58px; padding: 11px 0; }
.about-notice-inner .lucide { flex: 0 0 auto; width: 22px; height: 22px; color: var(--violet); stroke-width: 2.2; }
.about-notice-inner p { margin: 0; color: #453d64; font-size: var(--text-ui); font-weight: 800; line-height: 1.45; }

.about-heading { max-width: 835px; }
.about-heading > .eyebrow { max-width: none; margin: 0 0 8px; }
.about-heading h2, .types-intro h2, .source-layout h2 { margin-bottom: 12px; color: var(--violet); font-size: var(--heading-section); font-weight: 900; line-height: 1.14; }
.about-heading > p:last-child, .types-intro > p:last-child, .source-layout > div > p:last-child { margin: 0; color: #4c4568; font-size: var(--text-body-large); font-weight: 700; line-height: 1.58; }

.understanding-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 32px; }
.understanding-card { min-height: 242px; padding: 28px; border: 1px solid #e8e0f7; border-radius: 16px; background: #fff; box-shadow: 0 8px 21px rgba(55, 26, 131, 0.06); }
.about-icon { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 15px; color: var(--violet); background: #eee8fb; }
.about-icon .lucide { width: 30px; height: 30px; stroke-width: 2.1; }
.understanding-card h3 { margin: 20px 0 8px; color: #312659; font-size: var(--heading-card); font-weight: 900; line-height: 1.24; }
.understanding-card p { margin: 0; color: #56506d; font-size: var(--text-body); font-weight: 700; line-height: 1.56; }

.pathway-section { position: relative; overflow: hidden; padding: 64px 0; background: linear-gradient(180deg, #f8f6ff 0%, #f1edfc 100%); }
.pathway-section::before { content: ""; position: absolute; width: 290px; height: 290px; left: -130px; bottom: -180px; border: 1px solid rgba(88, 32, 188, 0.16); border-radius: 50%; box-shadow: 0 0 0 28px rgba(88, 32, 188, 0.035), 0 0 0 56px rgba(88, 32, 188, 0.02); }
.pathway-section .container { position: relative; z-index: 1; }
.metabolic-pathway { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; margin: 36px 0 22px; padding: 0; list-style: none; }
.pathway-step { position: relative; min-height: 270px; padding: 24px 20px; border: 1px solid #e4d9f6; border-radius: 16px; background: rgba(255, 255, 255, 0.9); box-shadow: 0 8px 19px rgba(51, 22, 121, 0.055); }
.pathway-step::after { content: ""; position: absolute; z-index: 2; top: 54px; left: calc(100% + 5px); width: 22px; height: 2px; background: #9a75e4; }
.pathway-step::before { content: ""; position: absolute; z-index: 2; top: 50px; left: calc(100% + 20px); width: 8px; height: 8px; border-top: 2px solid #9a75e4; border-right: 2px solid #9a75e4; transform: rotate(45deg); }
.pathway-step:last-child::after, .pathway-step:last-child::before { display: none; }
.pathway-icon { width: 60px; height: 60px; display: grid; place-items: center; margin-bottom: 19px; border-radius: 50%; color: #fff; background: linear-gradient(145deg, #6c37cf, #43118e); box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.38); }
.pathway-icon .lucide { width: 31px; height: 31px; stroke-width: 2.1; }
.pathway-kicker { margin: 0 0 4px; color: #6331bd; font-size: var(--text-caption); font-weight: 900; letter-spacing: 0.02em; line-height: 1.3; text-transform: uppercase; }
.pathway-step h3 { margin: 0 0 9px; color: #2d2552; font-size: 1.125rem; font-weight: 900; line-height: 1.24; }
.pathway-step p:last-of-type { margin: 0; color: #56506e; font-size: var(--text-ui); font-weight: 700; line-height: 1.52; }
.pathway-step-focus { border: 2px solid #7542d1; background: #fff; box-shadow: 0 12px 26px rgba(83, 34, 180, 0.14); }
.pathway-step-focus .pathway-icon { background: linear-gradient(145deg, #4a11a1, #712bd2); }
.pathway-flag { display: inline-block; margin-top: 13px; padding: 5px 8px; border-radius: 5px; color: #5420b2; background: #eee8fc; font-size: 0.75rem; font-weight: 900; line-height: 1.25; }
.pathway-caption { display: flex; align-items: flex-start; gap: 11px; max-width: 840px; padding: 15px 18px; margin: 0 auto; border-radius: 10px; color: #3d2f66; background: rgba(255, 255, 255, 0.62); }
.pathway-caption .lucide { flex: 0 0 auto; width: 21px; height: 21px; margin-top: 1px; color: #5a22bb; stroke-width: 2.2; }
.pathway-caption p { margin: 0; font-size: var(--text-ui); font-weight: 800; line-height: 1.5; }

.types-layout { display: grid; grid-template-columns: minmax(260px, 0.78fr) minmax(0, 1.22fr); gap: clamp(36px, 7vw, 90px); align-items: start; }
.types-intro { padding-top: 7px; }
.types-grid { display: grid; gap: 18px; }
.type-card { padding: 27px 28px; border: 1px solid #e4ddf5; border-radius: 16px; background: #fff; box-shadow: 0 7px 18px rgba(52, 23, 125, 0.055); }
.primary-type { border-left: 5px solid #5620b9; }
.secondary-type { border-left: 5px solid #a574e8; }
.type-card-title { display: grid; grid-template-columns: 56px 1fr; gap: 15px; align-items: center; margin-bottom: 14px; }
.type-label { margin: 0 0 2px; color: #6a38c5; font-size: var(--text-caption); font-weight: 900; letter-spacing: 0.025em; line-height: 1.3; text-transform: uppercase; }
.type-card h3 { margin: 0; color: #2d2454; font-size: 1.4rem; font-weight: 900; line-height: 1.16; }
.type-card > p { margin: 0 0 12px; color: #514a69; font-size: var(--text-body); font-weight: 700; line-height: 1.57; }
.type-card > p:last-child { margin-bottom: 0; }

.lived-experience { position: relative; overflow: hidden; color: #fff; background: linear-gradient(112deg, #281061 0%, #471b9e 58%, #6a28c3 100%); }
.lived-experience::after { content: ""; position: absolute; width: 380px; height: 380px; top: -250px; right: 6%; border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 50%; box-shadow: 0 0 0 38px rgba(255, 255, 255, 0.035), 0 0 0 76px rgba(255, 255, 255, 0.018); }
.lived-experience-inner { position: relative; z-index: 1; display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: 24px; align-items: center; min-height: 245px; padding: 42px 0; }
.lived-emblem { width: 68px; height: 68px; display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, 0.72); border-radius: 50%; color: #fff; background: rgba(255, 255, 255, 0.08); }
.lived-emblem .lucide { width: 38px; height: 38px; stroke-width: 2.1; }
.lived-experience .eyebrow { margin-bottom: 7px; color: #decfff; }
.lived-experience h2 { margin-bottom: 10px; color: #fff; font-size: clamp(1.75rem, 2.5vw, 2.25rem); font-weight: 900; line-height: 1.15; }
.lived-experience p:last-child { max-width: 790px; margin: 0; color: rgba(255, 255, 255, 0.91); font-size: var(--text-body); font-weight: 700; line-height: 1.59; }
.lived-experience .button { min-width: 183px; }

.diagnosis-section { background: #fff; }
.diagnosis-heading { margin-bottom: 29px; }
.diagnosis-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: 0; padding: 0; list-style: none; counter-reset: none; }
.diagnosis-steps li { position: relative; min-height: 224px; padding: 10px 24px 8px; border-left: 1px solid #ddd5f1; }
.diagnosis-steps li:first-child { padding-left: 0; border-left: 0; }
.diagnosis-steps li:last-child { padding-right: 0; }
.step-number { width: 44px; height: 44px; display: grid; place-items: center; margin-bottom: 17px; border-radius: 50%; color: #fff; background: linear-gradient(145deg, #6e37d0, #481392); font-size: 1.125rem; font-weight: 900; }
.diagnosis-steps h3 { margin: 0 0 7px; color: #312758; font-size: 1.125rem; font-weight: 900; line-height: 1.25; }
.diagnosis-steps p { margin: 0; color: #56506d; font-size: var(--text-ui); font-weight: 700; line-height: 1.54; }
.question-callout { display: grid; grid-template-columns: 42px 1fr; gap: 14px; align-items: start; max-width: 970px; padding: 20px 22px; margin-top: 30px; border: 1px solid #e2d8f5; border-radius: 13px; background: #f6f2fe; }
.question-callout .lucide { width: 32px; height: 32px; color: var(--violet); stroke-width: 2.1; }
.question-callout h3 { margin: 0 0 5px; color: #402678; font-size: 1.125rem; font-weight: 900; line-height: 1.25; }
.question-callout p { margin: 0; color: #514968; font-size: var(--text-ui); font-weight: 700; line-height: 1.55; }

.care-section { position: relative; overflow: hidden; padding: 62px 0 68px; color: #fff; background: linear-gradient(112deg, #211052 0%, #391082 52%, #5420ae 100%); }
.care-section::after { content: ""; position: absolute; width: 420px; height: 420px; right: -210px; top: -135px; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 50%; box-shadow: 0 0 0 34px rgba(255, 255, 255, 0.035), 0 0 0 68px rgba(255, 255, 255, 0.02); }
.care-section .container { position: relative; z-index: 1; }
.light-heading { max-width: 850px; margin: 0 auto 34px; }
.light-heading .eyebrow { color: #d9c8ff; }
.light-heading h2 { margin-bottom: 10px; color: #fff; font-size: var(--heading-section); font-weight: 900; line-height: 1.14; }
.light-heading p:last-child { margin: 0; color: rgba(255, 255, 255, 0.89); font-size: var(--text-body); font-weight: 700; line-height: 1.56; }
.care-evidence-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 19px; }
.care-evidence-card { min-height: 348px; padding: 29px; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 17px; background: rgba(255, 255, 255, 0.095); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09); }
.care-card-icon { width: 56px; height: 56px; display: grid; place-items: center; margin-bottom: 20px; border-radius: 15px; color: #fff; background: rgba(255, 255, 255, 0.13); }
.care-card-icon .lucide { width: 31px; height: 31px; stroke-width: 2.1; }
.evidence-label { margin: 0 0 6px; color: #dac8ff; font-size: var(--text-caption); font-weight: 900; letter-spacing: 0.024em; line-height: 1.35; text-transform: uppercase; }
.care-evidence-card h3 { margin: 0 0 12px; color: #fff; font-size: 1.35rem; font-weight: 900; line-height: 1.18; }
.care-evidence-card p:last-child { margin: 0; color: rgba(255, 255, 255, 0.89); font-size: var(--text-body); font-weight: 700; line-height: 1.57; }

.source-section { background: #f9f7ff; }
.source-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, 0.88fr); gap: clamp(36px, 7vw, 106px); align-items: center; }
.source-links { display: grid; gap: 11px; }
.source-link { display: grid; grid-template-columns: 34px 1fr 16px; gap: 12px; align-items: center; min-height: 76px; padding: 13px 16px; border: 1px solid #e4dcef; border-radius: 11px; background: #fff; box-shadow: 0 5px 14px rgba(49, 20, 118, 0.045); transition: transform 0.2s ease, border-color 0.2s ease; }
.source-link:hover { border-color: #a982e7; transform: translateY(-2px); }
.source-link > .lucide { width: 28px; height: 28px; color: var(--violet); stroke-width: 2.05; }
.source-link strong { display: block; color: #3e286f; font-size: var(--text-body); font-weight: 900; line-height: 1.3; }
.source-link small { display: block; margin-top: 2px; color: #625a78; font-size: var(--text-caption); font-weight: 700; line-height: 1.35; }
.source-link > span:last-child { color: var(--violet); font-size: 1.1rem; font-weight: 900; }

@media (max-width: 1100px) {
  .about-page-hero-grid { grid-template-columns: minmax(0, 1fr) minmax(310px, 0.8fr); gap: 42px; }
  .metabolic-pathway { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pathway-step::after, .pathway-step::before { display: none; }
  .pathway-step { min-height: 242px; }
  .diagnosis-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 26px; }
  .diagnosis-steps li:nth-child(3) { padding-left: 0; border-left: 0; }
  .diagnosis-steps li:nth-child(2) { padding-right: 0; }
  .care-evidence-card { min-height: 390px; }
}

@media (max-width: 910px) {
  .about-page-hero-grid { grid-template-columns: 1fr; gap: 34px; min-height: 0; padding: 58px 0; }
  .about-page-hero-copy { max-width: 750px; }
  .plain-language-card { max-width: 660px; }
  .types-layout, .source-layout { grid-template-columns: 1fr; gap: 28px; }
  .lived-experience-inner { grid-template-columns: 64px 1fr; gap: 18px; }
  .lived-experience .button { grid-column: 2; justify-self: start; }
  .care-evidence-grid { grid-template-columns: 1fr; }
  .care-evidence-card { min-height: 0; }
}

@media (max-width: 640px) {
  .about-page-hero-grid { padding: 48px 0; }
  .about-page h1 { font-size: clamp(2.7rem, 12vw, 3.65rem); }
  .about-page-hero-copy > p, .about-page-hero-copy .about-page-lead { font-size: var(--text-body); }
  .plain-language-card { padding: 25px 22px; border-radius: 16px; }
  .plain-language-card h2 { font-size: 1.65rem; }
  .about-notice-inner { align-items: flex-start; min-height: 0; padding: 14px 0; }
  .about-notice-inner p { font-size: var(--text-caption); }
  .about-heading > p:last-child, .types-intro > p:last-child, .source-layout > div > p:last-child { font-size: var(--text-body); }
  .understanding-grid, .metabolic-pathway { grid-template-columns: 1fr; }
  .understanding-card { min-height: 0; padding: 24px; }
  .pathway-section, .care-section { padding: 46px 0; }
  .metabolic-pathway { gap: 12px; margin-top: 28px; }
  .pathway-step { min-height: 0; padding: 21px; }
  .pathway-icon { margin-bottom: 15px; }
  .types-grid { gap: 14px; }
  .type-card { padding: 22px 20px; }
  .lived-experience-inner { grid-template-columns: 1fr; min-height: 0; gap: 16px; padding: 43px 0; }
  .lived-emblem { width: 59px; height: 59px; }
  .lived-experience .button { grid-column: auto; }
  .diagnosis-steps { grid-template-columns: 1fr; gap: 0; }
  .diagnosis-steps li, .diagnosis-steps li:nth-child(3), .diagnosis-steps li:nth-child(2) { min-height: 0; padding: 21px 0; border-top: 1px solid #e1daf1; border-left: 0; }
  .diagnosis-steps li:first-child { padding-top: 0; border-top: 0; }
  .diagnosis-steps li:last-child { padding-bottom: 0; }
  .step-number { margin-bottom: 12px; }
  .question-callout { grid-template-columns: 34px 1fr; padding: 18px; }
  .question-callout .lucide { width: 27px; height: 27px; }
  .care-evidence-card { padding: 24px 21px; }
  .source-link { grid-template-columns: 30px 1fr 15px; gap: 10px; padding: 13px; }
  .source-link > .lucide { width: 25px; height: 25px; }
}