/* Clod - the About page (the fictional lab's homepage). Layered on styles.css
   and its tokens, so light and dark come for free. Phone first; five screens
   at 390px. No inline styles anywhere: the CSP forbids them. */

.about-page { display: block; height: auto; overflow: auto; }

.about-nav {
  display: flex; align-items: center; justify-content: space-between;
  max-width: 880px; margin: 0 auto; padding: 14px var(--gutter);
}
.about-brand { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); text-decoration: none; }
.about-brand .mark-slot { width: 28px; height: 28px; }
.about-brand .wordmark { font-family: var(--serif); font-size: 1.25rem; }
.nav-cta { margin-top: 0; padding: 8px 14px; font-size: .9rem; }

.about { max-width: 880px; margin: 0 auto; padding: 0 var(--gutter) 48px; }
.about section { padding: 40px 0; }
.about h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(1.5rem, 5vw, 2rem); margin: 0 0 6px; }
.about .sub { color: var(--ink-soft); margin: 0 0 18px; }
.about .small { font-size: .8rem; color: var(--ink-faint); }

/* Hero */
.hero { display: flex; flex-direction: column; gap: 18px; min-height: 60dvh; justify-content: center; padding-top: 24px; }
.hero-mark { display: block; width: 96px; height: 96px; }
.eyebrow { margin: 0 0 8px; font-weight: 600; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); }
.hero h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(2rem, 8vw, 3.2rem); line-height: 1.12; margin: 0 0 10px; }
.hero .sub { font-size: 1.1rem; }
.hero .primary-link { margin-top: 4px; }

/* Mission band: the one dark block, both themes */
.band {
  margin: 0 calc(-1 * var(--gutter)); padding: 40px var(--gutter);
  background: #262624; color: #f5f4ef; text-align: center;
}
.band h2 { color: #f5f4ef; margin-bottom: 4px; }
.band p { margin: 0; color: #c9c6bb; }

/* Model card */
.specs { width: 100%; border-collapse: collapse; margin: 12px 0 28px; }
.specs th, .specs td { padding: 10px 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.specs th { font-weight: 400; color: var(--ink-faint); width: 44%; }
.bench { margin: 0; padding: 18px; background: var(--raised); border: 1px solid var(--line); border-radius: var(--radius); }
.bench-title { font-weight: 600; margin-bottom: 14px; }
.bar { display: grid; grid-template-columns: 92px 1fr 36px; align-items: center; gap: 10px; margin-bottom: 10px; font-size: .9rem; }
.bar-label { color: var(--ink-soft); }
.bar-track { display: block; height: 14px; background: var(--panel); border-radius: 7px; overflow: hidden; }
.bar-fill { display: block; height: 100%; background: var(--accent); border-radius: 7px; }
.bar-100 { width: 100%; }
.bar-40 { width: 40%; }
.bar-value { text-align: right; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.caption { margin: 12px 0 0; font-size: .84rem; color: var(--ink-faint); }

/* Coming soon */
.products { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 10px; }
.products li { padding: 14px 16px; background: var(--raised); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.products h3 { margin: 0 0 4px; font-size: 1rem; font-weight: 600; }
.products p { margin: 0 0 8px; color: var(--ink-soft); font-size: .92rem; }
.notify { font-size: .88rem; }

/* Pricing */
.plans { width: 100%; border-collapse: collapse; margin: 12px 0 10px; font-size: .92rem; }
.plans th, .plans td { padding: 10px 6px 10px 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.plans th { font-weight: 600; white-space: nowrap; }
.plans .price { color: var(--ink-faint); white-space: nowrap; }
.plans td:last-child { text-align: right; }
.plans-note { font-weight: 600; margin: 10px 0 0; }

/* FAQ */
.faq details { border-bottom: 1px solid var(--line); padding: 12px 0; }
.faq summary { cursor: pointer; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; color: var(--ink-faint); }
.faq details[open] summary::after { content: '\2212'; }
.faq p { margin: 10px 0 0; color: var(--ink-soft); }

/* Notify / newsletter, inline so the link works with scripts off */
.notify-section { max-width: 460px; }
.notify-section .stack { margin-top: 12px; }

/* Footer */
.about-foot { max-width: 880px; margin: 0 auto; padding: 24px var(--gutter) calc(32px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); font-size: .86rem; color: var(--ink-soft); }
.about-foot p { margin: 0 0 8px; }
.about-foot strong { color: var(--ink); }

/* Toasts on this page have no composer to sit above. */
.about-page .toasts { position: fixed; left: 0; right: 0; bottom: 24px; margin: 0; }

@media (min-width: 720px) {
  .hero { flex-direction: row; align-items: center; gap: 36px; }
  .hero-mark { width: 120px; height: 120px; flex: none; }
  .products { grid-template-columns: 1fr 1fr; }
  .plans .price { width: 130px; }
}