.about-page main {
  padding-block: clamp(1.25rem,3vw,2.75rem);
}

.about-hero {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0,1.25fr) minmax(17rem,.75fr);
  gap: clamp(2rem,5vw,4.5rem);
  align-items: center;
  padding: clamp(1.6rem,4.5vw,3.75rem);
  overflow: hidden;
  background:
    linear-gradient(135deg,color-mix(in srgb,var(--accent) 5%,var(--card)),var(--card) 48%),
    var(--card);
}

.about-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: -8rem;
  bottom: -10rem;
  width: 24rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: color-mix(in srgb,var(--accent) 9%,transparent);
}

.about-hero > div { min-width: 0; max-width: 46rem; }
.about-eyebrow,.about-kicker { color: var(--accent); font-size: .76rem; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.about-eyebrow { display: flex; align-items: center; gap: .65rem; margin: 0; }
.about-eyebrow::before { content: ""; width: 1.75rem; height: 2px; background: linear-gradient(90deg,var(--accent),var(--accent2)); }
.about-hero h1 { max-width: 13ch; margin: .65rem 0 1rem; font-size: clamp(2.8rem,5.3vw,4.75rem); line-height: .98; letter-spacing: -.055em; text-wrap: balance; }
.about-lede { max-width: 62ch; margin-bottom: .9rem; color: var(--text); font-size: clamp(1.06rem,1.7vw,1.22rem); line-height: 1.7; }
.about-hero > div > p:not(.about-eyebrow,.about-lede,.about-status) { max-width: 62ch; color: var(--muted); line-height: 1.72; }
.about-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin: 1.45rem 0 1.3rem; }
.about-status { display: inline-flex; align-items: center; gap: .55rem; width: fit-content; margin: .45rem 0 0; padding: .48rem .75rem; border: 1px solid color-mix(in srgb,#16a34a 32%,var(--line)); border-radius: 999px; background: color-mix(in srgb,#16a34a 9%,var(--card)); color: color-mix(in srgb,#15803d 82%,var(--text)); font-size: .86rem; font-weight: 750; line-height: 1.35; }
.about-status span { width: .52rem; height: .52rem; flex: 0 0 auto; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 .22rem color-mix(in srgb,#22c55e 16%,transparent); }
[data-theme="dark"] .about-status { color: #86efac; }

.about-credentials { display: flex; flex-wrap: wrap; gap: .55rem; padding: 1.15rem 0 0; margin: 0; border-top: 1px solid var(--line); list-style: none; }
.about-credentials li { display: inline-flex; align-items: center; gap: .48rem; padding: .42rem .68rem; border: 1px solid var(--line); border-radius: 999px; background: color-mix(in srgb,var(--soft-surface) 92%,var(--accent) 8%); color: var(--muted); font-size: .82rem; font-weight: 700; }
.about-credentials li::before { content: "✓"; color: var(--accent); font-weight: 900; }
.about-credentials .about-credential--in-progress::before { content: "○"; color: var(--muted); }

.about-portrait { position: relative; width: 100%; max-width: 21rem; margin: 0; justify-self: center; }
.about-portrait::before { content: ""; position: absolute; inset: 1rem -1rem -1rem 1rem; z-index: -1; border-radius: 1.5rem; background: linear-gradient(145deg,var(--accent),var(--accent2)); opacity: .16; }
.about-portrait img { display: block; width: 100%; aspect-ratio: 1/1.07; object-fit: cover; object-position: center top; border: 1px solid color-mix(in srgb,var(--accent) 20%,var(--line)); border-radius: 1.25rem; background: var(--card); box-shadow: var(--shadow); filter: saturate(.92) contrast(1.02); }
.about-portrait figcaption { margin-top: .9rem; padding-left: .8rem; border-left: 2px solid var(--accent); color: var(--muted); font-size: .88rem; line-height: 1.55; }

.about-section { padding-block: clamp(3.5rem,7vw,6rem); }
.about-section[id] { scroll-margin-top: 8rem; }
.about-section+.about-section { border-top: 1px solid var(--line); }
.about-section-head { display: grid; grid-template-columns: minmax(12rem,.6fr) minmax(0,1.4fr); gap: clamp(1.5rem,4vw,3.5rem); margin-bottom: 2.25rem; }
.about-section h2 { max-width: 19ch; margin: .4rem 0; font-size: clamp(2rem,3.8vw,3.2rem); line-height: 1.05; letter-spacing: -.038em; text-wrap: balance; }
.about-story { max-width: 70ch; font-size: 1.06rem; line-height: 1.82; }
.about-story p { margin-top: 0; }
.about-story p + p { margin-top: 1.15rem; }
.about-story p:first-child { color: var(--text); font-size: 1.22rem; line-height: 1.65; }

.about-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1rem; }
.about-tile { --tile-accent: var(--accent); position: relative; display: flex; flex-direction: column; padding: clamp(1.35rem,3vw,1.85rem); overflow: hidden; border: 1px solid var(--line); border-radius: 1.1rem; background: var(--card); transition: transform .22s ease,border-color .22s ease,box-shadow .22s ease; }
.about-tile::before { content: ""; position: absolute; inset: 0 0 auto; height: .3rem; background: var(--tile-accent); }
.about-tile--support { --tile-accent: var(--pillar-support); }
.about-tile--software { --tile-accent: var(--pillar-software); }
.about-tile--data { --tile-accent: var(--pillar-data); }
.about-tile--primary { border-color: color-mix(in srgb,var(--tile-accent) 36%,var(--line)); background: linear-gradient(145deg,color-mix(in srgb,var(--tile-accent) 8%,var(--card)),var(--card) 62%); }
.about-tile:hover,.about-tile:focus-within { transform: translateY(-3px); border-color: color-mix(in srgb,var(--tile-accent) 48%,var(--line)); box-shadow: var(--shadow); }
.about-tile__number { color: var(--tile-accent); font-size: .76rem; font-weight: 850; letter-spacing: .07em; text-transform: uppercase; }
.about-tile h3 { margin: .75rem 0; font-size: 1.35rem; }
.about-tile p { line-height: 1.7; }
.about-tools { display: flex; flex-wrap: wrap; gap: .45rem; margin: .35rem 0 1.25rem; padding: 0; list-style: none; }
.about-tools li { padding: .32rem .56rem; border: 1px solid color-mix(in srgb,var(--tile-accent) 22%,var(--line)); border-radius: 999px; background: color-mix(in srgb,var(--tile-accent) 7%,var(--card)); color: var(--text); font-family: var(--font-mono); font-size: .72rem; font-weight: 600; line-height: 1.35; }
.about-tile .about-tile__link { display: inline-flex; align-items: center; justify-content: space-between; gap: .7rem; width: fit-content; margin-top: auto; padding: .65rem .78rem; border-radius: .7rem; background: var(--tile-accent); color: #fff; font-size: .88rem; font-weight: 750; text-decoration: none; }
.about-tile .about-tile__link:hover,.about-tile .about-tile__link:focus-visible { color: #fff; filter: brightness(.92); }

.about-places { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1rem; }
.about-place { padding: 1.45rem; border-left: 3px solid var(--accent); border-radius: 0 1rem 1rem 0; background: color-mix(in srgb,var(--card) 92%,var(--accent) 8%); transition: transform .22s ease,background-color .22s ease; }
.about-place:hover { transform: translateX(3px); background: color-mix(in srgb,var(--card) 86%,var(--accent) 14%); }
.about-place span { display: block; color: var(--muted); font-size: .8rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }

.about-values { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem; }
.about-value { padding: 1.2rem; border: 1px solid var(--line); border-top: 3px solid color-mix(in srgb,var(--accent) 48%,var(--line)); border-radius: .9rem; background: color-mix(in srgb,var(--card) 94%,var(--accent) 6%); }
.about-value h3 { margin: 0 0 .5rem; font-size: 1.05rem; }
.about-value p { line-height: 1.68; }

.about-timeline { position: relative; display: grid; gap: .35rem; margin: 1.5rem 0 0; padding: 0; list-style: none; }
.about-timeline::before { content: ""; position: absolute; top: 1.35rem; bottom: 1.35rem; left: 8rem; width: 2px; background: color-mix(in srgb,var(--accent) 28%,var(--line)); }
.about-timeline li { display: grid; grid-template-columns: 6.7rem minmax(0,1fr); align-items: start; gap: 2.6rem; padding: .85rem 1rem .85rem 0; border: 1px solid transparent; border-radius: 1rem; transition: background-color .2s ease,border-color .2s ease; }
.about-timeline li:hover { border-color: color-mix(in srgb,var(--accent) 18%,var(--line)); background: color-mix(in srgb,var(--accent) 5%,var(--card)); }
.about-timeline time { width: max-content; padding: .28rem .6rem; border: 1px solid color-mix(in srgb,var(--accent) 22%,var(--line)); border-radius: 999px; background: color-mix(in srgb,var(--accent) 8%,var(--card)); color: var(--accent); font-size: .9rem; font-weight: 800; line-height: 1.3; white-space: nowrap; justify-self: end; }
.about-timeline__body { position: relative; }
.about-timeline__body::before { content: "✓"; position: absolute; top: .16rem; left: -3.13rem; display: grid; place-items: center; width: 1rem; height: 1rem; border: 3px solid var(--bg); border-radius: 50%; background: var(--pillar-data); color: #fff; font-size: .62rem; font-weight: 900; box-shadow: 0 0 0 2px color-mix(in srgb,var(--pillar-data) 22%,transparent); }
.about-timeline__status { display: inline-flex; padding: .2rem .5rem; border-radius: 999px; background: color-mix(in srgb,var(--pillar-data) 10%,var(--card)); color: color-mix(in srgb,var(--pillar-data) 88%,var(--text)); font-size: .72rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.about-timeline p { margin: .45rem 0 0; line-height: 1.65; }
.about-timeline__item--in-progress { border-style: dashed !important; border-color: color-mix(in srgb,var(--accent) 36%,var(--line)) !important; background: color-mix(in srgb,var(--accent) 6%,var(--card)); }
.about-timeline__item--in-progress .about-timeline__body::before { content: ""; background: var(--card); box-shadow: inset 0 0 0 .2rem var(--accent),0 0 0 2px color-mix(in srgb,var(--accent) 22%,transparent); }
.about-timeline__item--in-progress .about-timeline__status { background: color-mix(in srgb,var(--accent) 12%,var(--card)); color: var(--accent); }

.about-explore { padding: clamp(2rem,5vw,4rem); }
.about-explore__intro { max-width: 46rem; margin: 0 auto 2rem; text-align: center; }
.about-explore h2 { max-width: 24ch; margin: .45rem auto 0; }
.about-explore__intro > p:last-child { max-width: 62ch; margin: 1rem auto 0; }
.about-next-steps { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .85rem; }
.about-next-step { --next-accent: var(--accent); position: relative; display: flex; flex-direction: column; gap: .7rem; min-height: 15.5rem; padding: 1.3rem; overflow: hidden; border: 2px solid color-mix(in srgb,var(--next-accent) 26%,var(--line)); border-radius: 1rem; background: var(--card); color: var(--text); text-align: left; text-decoration: none; transition: transform .22s ease,border-color .22s ease,box-shadow .22s ease; }
.about-next-step::before { content: ""; position: absolute; inset: 0 0 auto; height: .28rem; background: var(--next-accent); }
.about-next-step--primary { background: linear-gradient(145deg,#1d4ed8,#2563eb 58%,#0e7490); color: #fff; border-color: transparent; }
.about-next-step--knowledge { --next-accent: var(--pillar-data); }
.about-next-step--contact { --next-accent: var(--pillar-software); }
:root[data-theme="dark"] .about-next-step--knowledge { --next-accent: #5eead4; }
:root[data-theme="dark"] .about-next-step--contact { --next-accent: #c4b5fd; }
.about-next-step:hover,.about-next-step:focus-visible { transform: translateY(-3px); border-color: var(--next-accent); box-shadow: var(--shadow-hover); }
.about-next-step:focus-visible { outline: 3px solid color-mix(in srgb,var(--next-accent) 38%,transparent); outline-offset: 3px; }
.about-next-step__label { color: var(--next-accent); font-size: .72rem; font-weight: 850; letter-spacing: .09em; text-transform: uppercase; }
.about-next-step--primary .about-next-step__label { color: #dbeafe; }
.about-next-step strong { font-family: var(--font-heading); font-size: 1.12rem; line-height: 1.35; }
.about-next-step > span:not(.about-next-step__label,.about-next-step__action) { color: var(--muted); font-size: .9rem; line-height: 1.6; }
.about-next-step--primary > span:not(.about-next-step__label,.about-next-step__action) { color: #eff6ff; }
.about-next-step__action { display: inline-flex; align-items: center; justify-content: space-between; gap: .7rem; margin-top: auto; color: var(--next-accent); font-weight: 800; }
.about-next-step--primary .about-next-step__action { color: #fff; }

@media(prefers-color-scheme:dark) {
  :root:not([data-theme="light"]) .about-next-step--knowledge { --next-accent: #5eead4; }
  :root:not([data-theme="light"]) .about-next-step--contact { --next-accent: #c4b5fd; }
}

@media(max-width:900px) {
  .about-hero { grid-template-columns: minmax(0,1.12fr) minmax(15rem,.88fr); gap: 2rem; }
  .about-hero h1 { font-size: clamp(2.65rem,6vw,4rem); }
  .about-grid { grid-template-columns: 1fr 1fr; }
  .about-tile--primary { grid-column: 1/-1; }
  .about-next-steps { grid-template-columns: 1fr 1fr; }
  .about-next-step--primary { grid-column: 1/-1; min-height: 12rem; }
}

@media(max-width:760px) {
  .about-hero,.about-section-head { grid-template-columns: 1fr; }
  .about-portrait { max-width: 19rem; order: -1; }
  .about-grid,.about-places,.about-values { grid-template-columns: 1fr; }
  .about-tile--primary { grid-column: auto; }
  .about-section-head { gap: .5rem; }
  .about-next-steps { grid-template-columns: 1fr; }
  .about-next-step--primary { grid-column: auto; }
  .about-next-step { min-height: auto; }
}

@media(max-width:560px) {
  .about-page main { padding-top: 1rem; }
  .about-hero { gap: 1.5rem; padding: 1.15rem; }
  .about-hero h1 { max-width: 12ch; font-size: clamp(2.65rem,13vw,3.7rem); }
  .about-lede { font-size: 1rem; line-height: 1.65; }
  .about-actions { display: grid; grid-template-columns: 1fr; }
  .about-actions .btn { justify-content: center; width: 100%; }
  .about-status { align-items: flex-start; border-radius: .85rem; }
  .about-credentials { display: grid; grid-template-columns: 1fr; }
  .about-credentials li { width: fit-content; }
  .about-portrait { max-width: 16rem; }
  .about-section { padding-block: 2.8rem; }
  .about-section[id] { scroll-margin-top: 6rem; }
  .about-timeline { gap: .6rem; }
  .about-timeline::before { top: 1.8rem; bottom: 1.8rem; left: .42rem; }
  .about-timeline li { grid-template-columns: 1fr; gap: .45rem; padding: .75rem .75rem .75rem 1.85rem; }
  .about-timeline time { justify-self: start; }
  .about-timeline__body::before { top: .18rem; left: -2.07rem; }
  .about-timeline p { margin-top: .45rem; }
}

@media(prefers-reduced-motion:reduce) {
  .about-portrait::before { display: none; }
  .about-tile,.about-place,.about-timeline li,.about-next-step { transition: none; }
  .about-tile:hover,.about-tile:focus-within,.about-place:hover,.about-next-step:hover,.about-next-step:focus-visible { transform: none; }
}