/* ── /about — the public overview page, rewritten 2026-09-24 (runbook Step 66) ──────────────
   Palette is theme.css tokens only; templates/about.html carries NO hex (it held 37 before this
   rewrite — tests/test_about_page.py pins zero). Same header and footer treatment as
   static/css/legal.css so the four public pages read as one site. The header bar is
   --remedi-brand, the app's own header colour since the 2026-08-18 reskin, so a reader who signs
   in from here sees the same blue on the other side of the door.

   Copy rules the layout serves (docs/about/REMEDI_ABOUT_PAGE_COPY_2026-09-24.md): no emoji, no
   statistics, no featured audience — the seven "Who it's for" panels are one column, one border,
   one padding, one type size. Body text is 17px desktop / 16px phone so it reads without zoom. */
.about { font-family: var(--remedi-font-brand); color: var(--remedi-ink-2); background: var(--remedi-surface); line-height: 1.6; margin: 0; -webkit-text-size-adjust: 100%; }
.about a { color: inherit; }

.about-header {
  background: var(--remedi-brand); color: var(--remedi-surface); padding: 0 32px;
  display: flex; align-items: center; justify-content: space-between; height: 64px;
}
.about-header .logo { font-size: 21px; font-weight: 700; letter-spacing: -0.5px; text-decoration: none; }
.about-header .header-nav { display: flex; align-items: center; gap: 18px; }
.about-header a.plain { font-size: 13px; font-weight: 500; opacity: 0.8; text-decoration: none; }
.about-header a.plain:hover { opacity: 1; }
.about-header .header-cta {
  background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.3);
  border-radius: var(--remedi-radius-sm); padding: 7px 16px; font-size: 13px; font-weight: 600; text-decoration: none;
}
.about-header .header-cta:hover { background: rgba(255,255,255,0.18); }

/* Section 0 — the dark blue opening band: opening paragraph, mission, vision. Same blue as the
   header and the app; the mission and vision are the login page's words, kept in step by test. */
.about-hero { background: var(--remedi-brand); color: var(--remedi-surface); }
.about-hero-inner { max-width: 760px; margin: 0 auto; padding: 44px 24px 40px; }
.about-hero-lead { font-size: 19px; line-height: 1.55; margin: 0 0 30px; }
.about-hero-mv { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.about-hero-label { font-size: var(--remedi-fs-label); font-weight: 800; text-transform: uppercase; letter-spacing: .9px; opacity: 0.7; margin: 0 0 6px; }
.about-hero-text { font-size: 17px; font-weight: 600; line-height: 1.5; margin: 0; }

.about-main { max-width: 760px; margin: 0 auto; padding: 16px 24px 56px; }
.about-section { padding: 40px 0; border-bottom: 1px solid var(--remedi-line-2); }
.about-section:last-child { border-bottom: 0; }
.about-label { font-size: var(--remedi-fs-label); font-weight: 800; text-transform: uppercase; letter-spacing: .9px; color: var(--remedi-muted); margin: 0 0 10px; }
.about h1 { font-size: 30px; font-weight: 700; line-height: 1.25; letter-spacing: -0.4px; color: var(--remedi-ink); margin: 0 0 18px; }
.about h2 { font-size: 22px; font-weight: 700; line-height: 1.3; letter-spacing: -0.2px; color: var(--remedi-ink); margin: 0 0 14px; }
.about p { font-size: 17px; margin: 0 0 14px; }
.about p:last-child { margin-bottom: 0; }
.about strong { font-weight: 600; color: var(--remedi-ink); }

/* Section 3 — two groups of tool rows: the reskin spec's tool row (title + one line, no icon,
   no numbering) under a plain group label. */
.about-group { margin-top: 22px; }
.about-group h3 { font-size: var(--remedi-fs-label); font-weight: 800; text-transform: uppercase; letter-spacing: .9px; color: var(--remedi-muted); margin: 0 0 10px; }
.about-tools { list-style: none; margin: 0; padding: 0; border: 1px solid var(--remedi-line); border-radius: var(--remedi-radius-row); }
.about-tools li { padding: 14px 18px; border-bottom: 1px solid var(--remedi-line-2); font-size: 16px; }
.about-tools li:last-child { border-bottom: 0; }
.about-tools li strong { display: block; font-size: var(--remedi-fs-md); color: var(--remedi-ink); margin-bottom: 2px; }

/* Section 4 — seven equal panels. One column, same border, same padding, same type. Nothing is
   featured; a grid would leave a seventh panel alone on its row and read as one. */
.about-panels { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 14px; }
.about-panel { border: 1px solid var(--remedi-line); border-radius: var(--remedi-radius-row); padding: 22px 22px 20px; background: var(--remedi-surface); }
.about-panel .about-label { margin-bottom: 8px; }
.about-panel h3 { font-size: 18px; font-weight: 700; line-height: 1.35; color: var(--remedi-ink); margin: 0 0 10px; }
.about-panel p { font-size: 16px; }

/* Section 9 — contact. The address is the link; there is nothing else to click. */
.about-contact a { font-weight: 600; color: var(--remedi-brand); text-decoration: underline; text-underline-offset: 3px; }
.about-contact a:hover { color: var(--remedi-brand-hover); }

.about-footer { padding: 24px 32px 40px; text-align: center; font-size: 12px; color: var(--remedi-gray-500); border-top: 1px solid var(--remedi-gray-100); }
.about-footer a { text-decoration: none; }
.about-footer a:hover { text-decoration: underline; }

@media (max-width: 640px) {
  .about-header { padding: 12px 16px; height: auto; flex-wrap: wrap; gap: 8px; }
  .about-hero-inner { padding: 32px 16px 30px; }
  .about-hero-lead { font-size: 17px; margin-bottom: 24px; }
  .about-hero-mv { grid-template-columns: 1fr; gap: 18px; }
  .about-hero-text { font-size: 16px; }
  .about-main { padding: 8px 16px 40px; }
  .about-section { padding: 32px 0; }
  .about h1 { font-size: 26px; }
  .about h2 { font-size: 20px; }
  .about p { font-size: 16px; }
  .about-panel { padding: 18px 16px; }
}