/* Hallmark · shape: kept · genre: playful · theme: brand · redesign: full (the country page's presentation section)
 * paper: oklch(98.6% 0.008 95) · accent: oklch(53% 0.19 28) · display: Archivo · body: Archivo · hero: kept (the app above) · nav: kept · footer: kept · signature: kept
 * axes: warm/grotesk-heavy/pen-red · posture: Committed · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P3 H2 E3 S2 R3 V2 · weakest: S, the section sits under a working app; it stays quiet and readable */
/* What Korektor is, how it works, the local scale, prices, questions and articles, in the country's language,
   rendered by the server so it reads without JavaScript. Hidden for teachers with an account. */
.about {
  --a-paper: oklch(100% 0 0); --a-paper-2: oklch(96.2% 0.035 95); --a-ink: oklch(20% 0.012 90); --a-ink-2: oklch(32% 0.012 90);
  --a-muted: oklch(45% 0.012 90); --a-rule: oklch(86% 0.014 90); --a-pen: oklch(53% 0.19 28); --a-focus: oklch(50% 0.2 28);
  --a-section: clamp(2rem, 2.5vw + 1rem, 3.25rem); --a-title: clamp(1.25rem, 0.75vw + 0.875rem, 1.5rem); --a-lead: clamp(1.125rem, 0.35vw + 1rem, 1.3rem);
  background: var(--a-paper); color: var(--a-ink); font-size: 1.0625rem; padding-block: 120px 96px; margin-top: 64px; border-top: 4px solid var(--a-ink);
}
.about .wrap { display: grid; gap: 96px; max-width: 1240px; }
.about h2 { font: 900 var(--a-section)/1.05 Archivo, sans-serif; letter-spacing: -0.025em; margin: 0; max-width: 22ch; text-wrap: balance; }
.about h3 { font: 700 var(--a-title)/1.2 Archivo, sans-serif; margin: 0; }
.about p { margin: 0; line-height: 1.6; max-width: 65ch; text-wrap: pretty; }
.about a:focus-visible, .about summary:focus-visible { outline: 3px solid var(--a-focus); outline-offset: 3px; border-radius: 6px; }
.about-intro { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px 96px; align-items: start; }
.about-intro p { font-size: var(--a-lead); }
.about-intro .btn { margin-top: 24px; justify-self: start; }
.about-steps { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; counter-reset: s; }
.about-steps li { counter-increment: s; display: grid; gap: 8px; align-content: start; border-top: 3px solid var(--a-ink); padding-top: 16px; }
.about-steps li::before { content: counter(s); font: 900 var(--a-section)/1 Archivo, sans-serif; color: var(--a-pen); }
.about-steps b { font-size: var(--a-title); }
.about-steps span { color: var(--a-ink-2); }
.about-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 96px; }
.about-two > div { display: grid; gap: 16px; align-content: start; border-top: 1px solid var(--a-rule); padding-top: 24px; }
.about-two h2 { font-size: clamp(1.6rem, 1.5vw + 1rem, 2.25rem); }
.about-faq { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 32px; }
.about details { border-bottom: 1px solid var(--a-rule); }
.about details:first-of-type { border-top: 1px solid var(--a-rule); }
.about details summary { cursor: pointer; list-style: none; font-weight: 700; font-size: var(--a-title); padding: 20px 0; display: flex; justify-content: space-between; gap: 16px; text-align: start; text-decoration: none; color: var(--a-ink); }
.about details summary::before { content: none; }
.about summary::-webkit-details-marker { display: none; }
.about details summary::after { content: "+"; font-weight: 400; flex-shrink: 0; transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1); }
.about details[open] > summary::after { transform: rotate(45deg); }
.about details p { padding-bottom: 20px; color: var(--a-ink-2); }
.about-posts { list-style: none; padding: 0; margin: 0; display: grid; border-top: 1px solid var(--a-rule); }
.about-posts li { border-bottom: 1px solid var(--a-rule); padding: 20px 0; display: grid; gap: 4px; }
.about-posts a { font-weight: 700; font-size: var(--a-title); color: var(--a-ink); text-decoration: none; }
.about-posts a:hover { text-decoration: underline; text-decoration-color: var(--a-pen); text-underline-offset: 5px; }
.about-posts span { color: var(--a-muted); }
.about .all { margin-top: 16px; font-weight: 700; color: var(--a-ink); text-decoration: underline; text-underline-offset: 5px; }
[dir="rtl"] .about details summary::after { order: -1; }
@media (max-width: 760px) {
  .about { padding-block: 72px 56px; }
  .about .wrap { gap: 64px; }
  .about-intro, .about-two, .about-faq, .about-steps { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) { .about details summary::after { transition: none; } }
body.member .about { display: none; }