/* copax.app — About and Support pages (D86). Loaded after /assets/site.css; uses its tokens only. */

/* ---------- About ---------- */
.about-head h1 { max-width: 18ch; }
.about-head .lead { font-size: clamp(1.125rem, 1rem + 0.5vw, 1.3125rem); color: var(--ink); max-width: 40rem; }
.about-head .lead + p { color: var(--muted); font-size: 1.0625rem; max-width: 40rem; }

.statement { display: grid; gap: 1rem; grid-template-columns: 1fr; padding-top: 1rem; }
.statement-vision {
  background: var(--blue); color: #FFFFFF; border-radius: var(--radius-l);
  padding: clamp(1.5rem, 4vw, 3rem);
}
.statement-mission {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l);
  padding: clamp(1.5rem, 4vw, 3rem);
}
.statement h2 { font-size: 1.0625rem; font-weight: 700; letter-spacing: 0; margin: 0 0 1rem; }
.statement-vision h2 { color: var(--blue-pale); }
.statement-mission h2 { color: var(--blue); }
.statement p { margin: 0; font-weight: 800; letter-spacing: -0.02em; line-height: 1.22; }
.statement-vision p { font-size: clamp(1.625rem, 1.1rem + 2vw, 2.5rem); max-width: 22ch; }
.statement-mission p { font-size: clamp(1.25rem, 1rem + 1vw, 1.625rem); max-width: 30ch; }
@media (min-width: 860px) {
  .statement { grid-template-columns: 1.35fr 1fr; align-items: stretch; }
}
@media (prefers-color-scheme: dark) {
  .statement-vision { background: var(--blue-pale); color: var(--ink); }
  .statement-vision h2 { color: var(--blue); }
}

.beliefs { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.beliefs li { display: grid; gap: 0.25rem 2rem; padding: 1.25rem 0; border-bottom: 1px solid var(--line); }
.beliefs h3 { margin: 0; font-size: 1.1875rem; }
.beliefs p { margin: 0; color: var(--muted); }
@media (min-width: 760px) {
  .beliefs li { grid-template-columns: 16rem 1fr; align-items: baseline; }
}

.split { display: grid; gap: 2rem; }
@media (min-width: 860px) { .split { grid-template-columns: 16rem 1fr; gap: 3rem; } }
.split > h2 { margin: 0; font-size: var(--t-h2); }

.section-tight { padding-top: clamp(2.5rem, 5vw, 4rem); padding-bottom: 0; }

/* ---------- Support ---------- */
ul.contact-list { margin: 0; padding: 0; max-width: none; list-style: none; display: grid; gap: 0.75rem; }
.contact-list li {
  display: grid; gap: 0.15rem 1.5rem; padding: 1rem 1.25rem; margin: 0;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-m);
}
.contact-list .what { font-weight: 700; margin: 0; }
.contact-list .what span { display: block; font-weight: 500; color: var(--muted); font-size: var(--t-small); }
.contact-list a { font-weight: 700; overflow-wrap: anywhere; }
@media (min-width: 640px) {
  .contact-list li { grid-template-columns: 1fr auto; align-items: center; }
}
.note { color: var(--muted); font-size: var(--t-small); margin-top: 1rem; }

ol.steps { counter-reset: step; list-style: none; padding: 0; margin: 1rem 0 1.5rem; }
.steps li { counter-increment: step; position: relative; padding-left: 2.75rem; margin: 0 0 0.9rem; min-height: 2rem; }
.steps li::before {
  content: counter(step); position: absolute; left: 0; top: 0;
  width: 2rem; height: 2rem; border-radius: var(--radius-pill);
  background: var(--blue-pale); color: var(--blue-deep);
  font-weight: 800; font-size: 0.9375rem; display: grid; place-items: center;
}
.ui { font-weight: 700; color: var(--ink); white-space: nowrap; }

.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l); padding: clamp(1.25rem, 3vw, 2rem); margin: 1.5rem 0; }
.panel h3 { margin-top: 0; }
.panel > :last-child { margin-bottom: 0; }

.faq { border-top: 1px solid var(--line); margin-top: 1rem; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer; list-style: none; font-weight: 700; font-size: 1.0625rem;
  padding: 1.1rem 2.5rem 1.1rem 0; position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 0.25rem; top: 50%; transform: translateY(-50%);
  font-size: 1.5rem; font-weight: 600; color: var(--blue); line-height: 1;
}
.faq details[open] summary::after { content: "\2212"; }
.faq details p { margin: 0 0 1.1rem; color: var(--muted); }
.faq summary:focus-visible { outline-offset: 2px; }

.prose h2[id] { scroll-margin-top: 1.5rem; }