/* OCALLY · about.css: /about. Tokens and components come from base.css. A reading page that leads with people: the
   value prop, then the team and the founder's note on navy, then what Ocally does, what makes it different, who uses
   it, how it works, the key facts as a crawlable definition list, and questions. The footer closes the page. */
html, body { background: var(--paper); }
.ab { color: var(--navy); }
.ab-h1 { margin: clamp(20px, 3.4vh, 32px) 0 0; max-width: 13em; font: var(--t-h1); letter-spacing: var(--ls-h1); text-wrap: balance; }
.ab-h2 { margin: 0; max-width: 16em; font: var(--t-h2); letter-spacing: var(--ls-h2); text-wrap: balance; }
.ab-lead { margin: var(--gap-lede) 0 0; max-width: 32em; font: var(--t-lead); color: var(--navy); }
.ab-p { margin: 16px 0 0; max-width: 38em; font: var(--t-body); color: var(--body); }
.ab-hero { padding: clamp(48px, 9vh, 112px) var(--edge) clamp(40px, 7vh, 80px); background: var(--sky); }

/* the team, on navy */
.ab-team { padding: var(--sec-y) var(--edge); background: var(--navy); color: var(--on-navy); }
.ab-team .ab-h2 { color: var(--on-navy); }
.ab-team__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 32px var(--gap-cols); }
.ab-team__in .ab-h2 { grid-column: 1 / -1; }
.ab-team__story p { margin: 0 0 16px; font: var(--t-body); color: var(--on-navy-body); }
.ab-note { grid-row: span 2; margin: 0; padding: clamp(26px, 3vw, 44px); background: var(--paper); color: var(--navy); border: 1.5px solid var(--paper); box-shadow: var(--lift-l) var(--orange); }
.ab-note__k { margin: 0 0 16px; font: var(--t-label); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--orange-ink); }
.ab-note blockquote { margin: 0; }
.ab-note blockquote p { margin: 0 0 16px; font: var(--t-lead); color: var(--navy); }
.ab-note blockquote p:first-child::before { content: "\201C"; color: var(--orange); }
.ab-note blockquote p:last-child::after { content: "\201D"; color: var(--orange); }
.ab-note figcaption { margin-top: 8px; font: var(--t-ui); color: var(--navy); }
.ab-person { padding-top: 18px; border-top: 1px solid var(--on-navy-line); }
.ab-person h3 { margin: 0; font: var(--t-h5); letter-spacing: var(--ls-h5); color: var(--on-navy); }
.ab-person__role { margin: 6px 0 10px; font: var(--t-label); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--amber); }
.ab-person p:not(.ab-person__role):not(.ab-person__links) { margin: 0; font: var(--t-card); color: var(--on-navy-body); }
.ab-person__links { display: flex; gap: 20px; margin: 14px 0 0; }

/* sections */
.ab-sec { padding: var(--sec-y) var(--edge); }
.ab-sec--alt { background: var(--cream); }
.ab-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-cards); margin-top: var(--gap-head); }
.ab-grid article { padding: var(--card-pad); background: #fff; border: var(--rule); box-shadow: var(--lift) var(--navy); }
.ab-grid h3, .ab-list h3, .ab-steps h3, .ab-faq h3 { margin: 0; font: var(--t-h5); letter-spacing: var(--ls-h5); color: var(--navy); }
.ab-grid p, .ab-list p, .ab-steps p { margin: 10px 0 0; max-width: 40em; font: var(--t-card); color: var(--body); }
.ab-list { list-style: none; counter-reset: d; margin: var(--gap-head) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--gap-cols); }
.ab-list li { counter-increment: d; position: relative; padding: 26px 0 26px 58px; border-top: var(--rule); }
.ab-list li::before { content: counter(d, decimal-leading-zero); position: absolute; left: 0; top: 30px; font: var(--t-data); color: var(--orange-ink); }
.ab-who { list-style: none; margin: clamp(28px, 4vh, 44px) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.ab-who li { padding: 12px 16px; background: var(--sky); border: var(--rule); font: var(--t-card); font-weight: 500; color: var(--navy); }
.ab-steps { list-style: none; counter-reset: s; margin: var(--gap-head) 0 0; padding: 0; display: grid; gap: 0; max-width: 56rem; }
.ab-steps li { counter-increment: s; position: relative; padding: 22px 0 22px 64px; border-top: 1px solid var(--line); }
.ab-steps li::before { content: counter(s); position: absolute; left: 0; top: 20px; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--navy); color: var(--on-navy); font: var(--t-h6); }
.ab-facts { margin: var(--gap-head) 0 0; max-width: 64rem; border-top: var(--rule); }
.ab-facts div { display: grid; grid-template-columns: minmax(150px, 240px) 1fr; gap: 24px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.ab-facts dt { font: var(--t-label); letter-spacing: var(--ls-label); text-transform: uppercase; line-height: 1.5; color: var(--muted); }
.ab-facts dd { margin: 0; font: var(--t-body); font-weight: 500; color: var(--navy); }
.ab-facts a { color: var(--navy); border-bottom: 2px solid var(--orange); text-decoration: none; }
.ab-faq { margin-top: var(--gap-head); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px var(--gap-cols); }
.ab-faq section { padding-top: 18px; border-top: var(--rule); }
.ab-faq p { margin: 10px 0 0; max-width: 40em; font: var(--t-body); color: var(--body); }
@media (max-width: 900px) {
  .ab-team__in, .ab-grid, .ab-list, .ab-faq { grid-template-columns: 1fr; }
  .ab-note { grid-row: auto; }
  .ab-facts div { grid-template-columns: 1fr; gap: 4px; }
}