/* about.html — page-specific only.
   Loaded after css/site.css. Nothing shared is redefined here.

   The page is mostly prose — the story of why DetailBook exists — so it is set
   the way the founder story is, and the two card grids become the hairline
   device used everywhere else rather than eight shadowed boxes. */

/* Clears the 108px fixed nav with room to breathe, matching pricing and demo. */
body.ab .about-hero{padding:168px 0 8px}
body.ab .about-hero .sechead{text-align:center;margin:0 auto;max-width:720px}
body.ab .about-hero h1{font-size:44px;font-weight:800;letter-spacing:-.03em;
  line-height:1.12;color:var(--ink);margin:0 0 14px;text-wrap:balance}
body.ab .about-hero .lead{font-size:17.5px;line-height:1.7;color:var(--body);text-wrap:pretty}

/* ── the story ────────────────────────────────────────────────────────────
   site.css's .narrow is the reading column; these sections stack, so they get
   tighter padding than a standalone marketing section would. */
body.ab .about-story{padding:44px 0}
body.ab .about-story .narrow{margin:0 auto}
body.ab .about-story h2{font-size:31px;font-weight:800;letter-spacing:-.028em;
  line-height:1.2;color:var(--ink);margin:0 0 16px;text-wrap:balance}
body.ab .about-story p{font-size:17px;line-height:1.78;color:var(--body);margin-bottom:22px}
body.ab .about-story p:last-child{margin-bottom:0}
body.ab .about-story strong{color:var(--ink);font-weight:700}
body.ab .about-story a{color:var(--pu);font-weight:600}

/* The visual audit flagged this at 12.8px in #9ca3af on white — about 2.54:1,
   below the site's own 15px minimum and below normal contrast expectations. */
body.ab .disclaimer{font-size:15px;line-height:1.7;color:var(--mute);
  font-style:normal;padding-top:18px;margin-top:26px;border-top:1px solid var(--line)}

/* ── promises and differentiators ─────────────────────────────────────────
   Were eight cards with 2px borders and shadows. One hairline container with
   1px dividers instead — the same device as How It Works and the reviews grid. */
body.ab .values-section h2,
body.ab .differentiators-section h2{font-size:40px;font-weight:800;
  letter-spacing:-.03em;line-height:1.14;color:var(--ink);text-align:center;margin:0 0 14px}
body.ab .values-section .wrap > div > p{font-size:17.5px;line-height:1.7;color:var(--body);
  text-align:center;max-width:620px;margin:0 auto 44px}

body.ab .values-grid,
body.ab .diff-grid{display:grid;gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:20px;overflow:hidden;margin:0}
body.ab .values-grid{grid-template-columns:1fr 1fr}
body.ab .diff-grid{grid-template-columns:repeat(3,1fr)}
body.ab .value-card,
body.ab .diff-card{background:#fff;border:0;border-radius:0;box-shadow:none;padding:32px 30px}
body.ab .value-card h3,
body.ab .diff-card h3{font-size:18.5px;font-weight:700;letter-spacing:-.018em;
  line-height:1.3;color:var(--ink);margin:0 0 10px}
body.ab .value-card p,
body.ab .diff-card p{font-size:15.5px;line-height:1.7;color:var(--body);margin:0}

/* ── what detailers say ───────────────────────────────────────────────────
   Genuine reviews, set as quiet editorial quotes rather than bordered cards —
   the treatment the homepage's featured review uses. */
body.ab blockquote{background:none;border:0;border-radius:0;box-shadow:none;
  padding:0;margin:0}
body.ab blockquote p{font-size:17px;line-height:1.7;color:var(--ink);margin:0 0 12px}
body.ab blockquote cite{font-style:normal;font-size:13px;font-weight:600;
  letter-spacing:.04em;text-transform:uppercase;color:var(--mute)}

/* ── closing ──────────────────────────────────────────────────────────────
   Was a gradient band; now the same centred panel as the homepage. */
body.ab .final-cta{padding:72px 0 96px}
body.ab .final-cta .cta-panel{max-width:680px;margin:0 auto;text-align:center}
body.ab .final-cta h2{font-size:40px;font-weight:800;letter-spacing:-.03em;
  line-height:1.14;color:var(--ink);margin:0 0 14px}
body.ab .final-cta > .wrap > .cta-panel > p{font-size:17.5px;line-height:1.7;
  color:var(--body);margin:0 0 28px}
body.ab .cta-buttons{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
body.ab .cta-buttons .btn-primary{background:var(--grad);color:#fff;font-size:15.5px;
  font-weight:700;padding:15px 28px;border-radius:13px;box-shadow:0 6px 18px rgba(102,126,234,.32)}
body.ab .cta-buttons .btn-secondary{background:#fff;border:1px solid var(--line);
  color:var(--ink);font-size:15.5px;font-weight:700;padding:15px 28px;border-radius:13px}
body.ab .cta-buttons .btn-secondary:hover{border-color:var(--pu);color:var(--pu)}

@media (max-width:860px){
  body.ab .about-hero{padding:150px 0 4px}
  body.ab .about-hero h1{font-size:31px}
  body.ab .about-story{padding:32px 0}
  body.ab .about-story h2{font-size:26px}
  body.ab .values-grid,body.ab .diff-grid{grid-template-columns:1fr}
  body.ab .values-section h2,
  body.ab .differentiators-section h2,
  body.ab .final-cta h2{font-size:27px}
  body.ab .cta-buttons .btn-primary,body.ab .cta-buttons .btn-secondary{width:100%;text-align:center}
}

/* Two genuine reviews, set as quiet quotes rather than bordered cards — the
   treatment the homepage's featured review uses. They were carrying their card
   styling inline, which beat any stylesheet rule. */
body.ab .say-section{padding:56px 0 8px}
body.ab .say-section h2{font-size:40px;font-weight:800;letter-spacing:-.03em;line-height:1.14;color:var(--ink);text-align:center;margin:0 0 40px}
body.ab .say-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;
  max-width:820px;margin:0 auto}
body.ab .say-grid blockquote{padding-left:22px;border-left:2px solid var(--line)}
body.ab .say-section .say-more{display:block;text-align:center;margin-top:34px}
body.ab .say-more{font-size:15px;font-weight:600;color:var(--pu)}
@media (max-width:860px){
  body.ab .say-grid{grid-template-columns:1fr;gap:28px}
}

/* ── numbered commitments ─────────────────────────────────────────────────
   The promises and the switching reasons were two grids of equal-weight boxes,
   and the reasons carried three large purple line icons — the only decorative
   icons on the page, and the exact shape of every SaaS feature section. Numbers
   turn both into commitment lists that read as founder-led rather than
   templated, and remove the last decorative purple. */
body.ab .value-card .n,
body.ab .diff-card .n{display:block;font-size:11.5px;font-weight:700;
  letter-spacing:.14em;color:var(--pu);margin-bottom:12px}

/* ── rhythm ───────────────────────────────────────────────────────────────
   Measured before: story chapters sat 44/44, so 88px apart — almost the same as
   the 96px separating entirely different section types, which is why the
   narrative did not read as continuous. Chapters now close with 48 and open
   with 0, letting the h2's own margin do the spacing, so the step up to 96 is a
   genuine change of gear. */
body.ab .about-story{padding:0 0 48px}
body.ab .about-story:first-of-type{padding-top:8px}

/* Was 56/8 — the most lopsided pair on the page, and why the quotes felt
   detached from what followed. */
body.ab .say-section{padding:56px 0}
body.ab .say-grid blockquote p{font-size:18.5px;line-height:1.65}

body.ab .final-cta{padding:56px 0 96px}

/* The affiliation note is a qualifier, not a chapter break — no rule above it. */
body.ab .affil{font-size:13.5px;line-height:1.7;color:var(--mute);
  margin-top:14px;padding-top:0;border-top:0}

/* ── final rhythm pass ────────────────────────────────────────────────────
   Measured: the intro sat 8px above the first chapter — the opening read as
   sparse because of the canvas around it, not the gap, and the gap itself was
   too tight. Meanwhile 152px separated the reasons from the quotes and 170px
   the quotes from the CTA, which is where the page actually felt empty. */
body.ab .about-hero{padding:168px 0 48px}
body.ab .about-story:first-of-type{padding-top:0}
body.ab .differentiators-section{padding-bottom:56px}
body.ab .say-section{padding:56px 0 40px}
body.ab .final-cta{padding:48px 0 88px}

/* The quotes read as two text blocks under a heading; a little more room
   between them and a firmer rule makes them deliberate proof. */
body.ab .say-grid{gap:56px}
body.ab .say-grid blockquote{border-left-color:#DCD7EE}
body.ab .say-grid blockquote cite{display:block;margin-top:14px}

/* The support bubble waits until the reader is past the quotes, so it never
   sits beside a section transition or competes with the closing CTA. */
body.ab #db-chat-bubble{opacity:0;pointer-events:none;transition:opacity .3s ease}
body.ab.past-quotes #db-chat-bubble{opacity:1;pointer-events:auto}

@media (max-width:860px){
  body.ab .about-hero{padding:150px 0 36px}
  body.ab .differentiators-section{padding-bottom:40px}
  body.ab .say-section{padding:40px 0 32px}
  body.ab .final-cta{padding:40px 0 64px}
}