/* About page — content sections, founder block, P.S. brand-voice moment.
 * Uses shared tokens.css for palette + spacing. Body font is the site
 * system sans (--font-body); the wordmark keeps Permanent Marker. */

/* Outer shell matches the Pricing/Resources pages: 1080px container, centred
 * on the page, sp-5 side padding. Headings sit at the container's left edge;
 * prose is capped to a readable width and left-anchored (see below). */
.about-section {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding: var(--sp-7) var(--sp-5);
  border-top: 1px solid var(--border-subtle);
}
/* Keep body copy at a comfortable reading measure, left-anchored. */
.about-section p,
.about-section .about-steps {
  max-width: 720px;
}
/* First block: no divider above. Top padding matches the Pricing hero
 * (sp-7) so the page heading sits at the same height across pages. */
.about-section--lead {
  border-top: none;
  padding-top: var(--sp-7);
}
.about-section h1,
.about-section h2 {
  margin: 0 0 var(--sp-4) 0;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
}
/* Lead block: page name as the big title, tagline smaller below */
.about-section--lead h1 {
  margin-bottom: var(--sp-3);
  font-size: clamp(30px, 4.5vw, 46px);
  line-height: 1.08;
  letter-spacing: -0.03em;
}
.about-section--lead h2 { margin-top: 0; }
.about-section p {
  margin: 0 0 var(--sp-4) 0;
  font-size: 17px;
  line-height: 1.65;
  color: rgba(245, 245, 245, 0.8);
}
.about-section p:last-child { margin-bottom: 0; }
.about-section a { color: var(--magenta); text-decoration: none; }
.about-section a:hover { text-decoration: underline; }

/* Lead CTA — opens the sign-in / sign-up modal */
.about-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  margin-top: var(--sp-3);
  padding: 0 var(--sp-6);
  background: var(--text);
  color: var(--bg);
  border: 1px solid var(--text);
  border-radius: 6px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease;
}
.about-cta:hover { background: #ffffff; border-color: #ffffff; text-decoration: none; }

/* How it works · numbered list with dot markers */
.about-steps {
  list-style: none;
  counter-reset: step;
  margin: var(--sp-4) 0 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.about-steps li {
  position: relative;
  padding-left: 24px;
  font-size: 17px;
  line-height: 1.6;
  color: rgba(245, 245, 245, 0.8);
}
.about-steps li strong { font-weight: 600; }
.about-steps li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 11px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--text);
}

/* Founder block */
.founder {
  display: flex;
  gap: var(--sp-5);
  align-items: center;
  margin: var(--sp-5) 0;
  flex-wrap: wrap;
}
.founder__photo {
  width: 104px;
  height: 104px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--border-subtle);
  flex-shrink: 0;
}
.founder__body { flex: 1; min-width: 240px; }
.founder__body p { margin: 0 0 var(--sp-3) 0; }
.founder__linkedin {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--magenta);
  text-decoration: none;
}
.founder__linkedin:hover { text-decoration: underline; }
.founder__linkedin svg { width: 18px; height: 18px; fill: currentColor; }

/* P.S. brand-voice moment · stands out without shouting */
.about-ps {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding: var(--sp-6) var(--sp-5);
}
.about-ps p { max-width: 760px; }
.about-ps p {
  margin: 0;
  padding: var(--sp-4) 0 var(--sp-4) var(--sp-5);
  border-left: 3px solid var(--magenta);
  font-size: 18px;
  line-height: 1.6;
  font-weight: 500;
  color: rgba(245, 245, 245, 0.92);
}
.about-ps strong { color: var(--magenta); }
/* Pink "WARNING" label above the P.S. · site body font, not the logo face */
.about-ps__warning {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 var(--sp-3) calc(var(--sp-5) + 3px);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--magenta);
}
.about-ps__warning svg { width: 20px; height: 20px; fill: currentColor; flex-shrink: 0; }

/* Legal fine print */
.about-finelegal {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding: var(--sp-7) var(--sp-5) var(--sp-9);
  border-top: 1px solid var(--border-subtle);
}
.about-finelegal p { max-width: 720px; }
.about-finelegal p {
  margin: 0;
  font-size: 17px;
  line-height: 1.65;
  color: rgba(245, 245, 245, 0.8);
}

@media (max-width: 720px) {
  .about-section { padding: var(--sp-6) var(--sp-5); }
  .founder { gap: var(--sp-4); }
}