.about-page{display:grid;gap:16px}
.about-page .hero{margin:0}

.about-hero{padding:28px 32px 24px}
.about-hero .page-header-shell__subtitle{max-width:68ch}
.about-hero__boundary{
  max-width:76ch;
  margin:16px 0 0;
  padding-top:12px;
  border-top:1px solid var(--line);
  color:var(--muted);
  font-size:13px;
  line-height:1.55;
}

/* The hero and the disclosure are surfaces.  The three principles between
   them are ordinary reading content, so their inner dividers carry hierarchy
   without adding a second pair of full-width rules. */
.about-essentials{border:0}
.about-essentials__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.about-essential{min-width:0;padding:18px 20px 18px 0}
.about-essential + .about-essential{padding-left:20px;border-left:1px solid var(--line)}
.about-essential h3{margin:0 0 7px;font-size:15px;line-height:1.3}
.about-essential p{margin:0;color:var(--muted);font-size:13px;line-height:1.58}

.about-details{
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--card);
  box-shadow:0 1px 2px rgba(23,32,51,.035);
}
.about-details summary{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto 10px;
  align-items:center;
  gap:10px;
  min-height:62px;
  padding:14px 18px;
  color:var(--text);
  cursor:pointer;
  list-style:none;
}
.about-details summary::-webkit-details-marker{display:none}
.about-details summary>span{font-size:16px;font-weight:750;line-height:1.3}
.about-details summary small{color:var(--muted);font-size:12px;line-height:1.4;text-align:right}
.about-details summary::after{
  content:"";
  width:7px;
  height:7px;
  border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translateY(-2px);
  transition:transform var(--transition);
}
.about-details[open] summary::after{transform:rotate(225deg) translate(-1px,-1px)}
.about-details summary:hover{color:var(--accent)}
.about-details[data-avds-pattern="method-disclosure"] summary:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:-2px;
}
.about-details__body{display:grid;gap:16px;padding:0 18px 18px;border-top:1px solid var(--line)}
.about-details__body>p{max-width:72ch;margin:16px 0 0;color:var(--muted);font-size:13px;line-height:1.58}
.about-details__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(180px,.32fr);gap:22px;align-items:start}
.about-details__grid h3{margin:0 0 8px;color:var(--muted);font-size:11px;font-weight:800;letter-spacing:0;line-height:1.3;text-transform:none}
.about-source-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 18px;margin:0;padding:0;list-style:none}
.about-source-list li{min-width:0;padding:9px 0;border-bottom:1px solid var(--line);color:var(--muted);font-size:12.5px;line-height:1.45}
.about-source-list a{color:var(--text);font-weight:750;text-decoration:none}
.about-source-list a:hover{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.about-details__links{display:grid;gap:8px;padding:1px 0 1px 18px;border-left:1px solid var(--line)}
.about-details__links a{width:max-content;max-width:100%;color:var(--accent);font-size:13px;font-weight:700;line-height:1.4;text-decoration:none}
.about-details__links a:hover{text-decoration:underline;text-underline-offset:3px}

.about-contact{display:flex;align-items:baseline;gap:8px 14px;padding:2px 0 0;color:var(--muted)}
.about-contact p{margin:0;font-size:13px;line-height:1.5}
.about-contact-link{color:var(--accent);font-size:14px;font-weight:750;text-decoration:none}
.about-contact-link:hover{text-decoration:underline;text-underline-offset:3px}

@media (max-width:980px){
  .about-essentials__grid{grid-template-columns:1fr}
  .about-essential{padding:15px 0}
  .about-essential + .about-essential{padding-left:0;border-top:1px solid var(--line);border-left:0}
  .about-details__grid{grid-template-columns:1fr;gap:16px}
  .about-details__links{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding:14px 0 0;border-top:1px solid var(--line);border-left:0}
}

@media (max-width:767px){
  .about-page{gap:12px}
  .about-hero{padding:18px 16px 16px}
  .about-hero__boundary{margin-top:13px;padding-top:10px;font-size:12.5px;line-height:1.5}
  .about-essential{padding:14px 0}
  .about-essential h3{margin-bottom:5px;font-size:14px}
  .about-essential p{font-size:12.5px;line-height:1.52}
  .about-details{border-radius:10px;box-shadow:none}
  .about-details summary{grid-template-columns:minmax(0,1fr) 10px;gap:8px;min-height:58px;padding:12px 14px}
  .about-details summary>span{font-size:15px}
  .about-details summary small{grid-column:1;color:var(--muted);font-size:11.5px;text-align:left}
  .about-details summary::after{grid-column:2;grid-row:1 / span 2}
  .about-details__body{gap:14px;padding:0 14px 14px}
  .about-details__body>p{margin-top:13px;font-size:12.5px;line-height:1.52}
  .about-source-list{grid-template-columns:1fr}
  .about-source-list li{padding:8px 0;font-size:12px}
  .about-details__links{grid-template-columns:1fr;gap:7px;padding-top:12px}
  .about-details__links a{font-size:12.5px}
  .about-contact{display:grid;gap:4px;padding-top:2px}
  .about-contact p{font-size:12.5px}
  .about-contact-link{font-size:13.5px}
}