/* Founder story — page-specific only.
   Loaded after css/site.css. Every rule here is scoped to .founder so the 44
   blog posts that share .ahero / .prose are untouched.

   Nothing in this file restyles the article system. It covers three things the
   shared defaults cannot know about: this page has no contents rail, it carries
   a stats grid the blog posts do not have, and it is a single long read where
   the support bubble must not sit over the text. */

/* ── hero ─────────────────────────────────────────────────────────────────
   The shared .ahero pads 158px/190px, tuned for posts with a contents rail
   beside the byline. A single-column story does not need 190px below it. */
.founder .ahero{padding:120px 0 78px}
.founder .ahero .wrap{max-width:820px}
.founder .ahero h1{max-width:760px}
/* .kicker is inline-flex, but as a flex item in the hero wrap it stretches to
   the column width. Constrain it here rather than touching the shared rule. */
.founder .ahero .kicker{align-self:flex-start;width:fit-content}
.founder .ahero-byline{margin:22px 0 0;font-size:15px;color:rgba(255,255,255,.7)}

/* ── reading column ───────────────────────────────────────────────────────
   .prose already caps at 720px; this centres it, since there is no rail. */
.founder .founder-wrap{padding-top:44px;padding-bottom:8px}
.founder .prose{margin:0 auto}

/* ── pull quotes ──────────────────────────────────────────────────────────
   .pull-quote is shared and already correct — hairline left rule, 23px, no
   quotation marks. Only the attribution line is specific to this page. */
.founder .prose .pull-quote cite{display:block;margin-top:14px;font-style:normal;
  font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--mute)}

/* ── the numbers ──────────────────────────────────────────────────────────
   A genuine object that earns containment: four figures from one real business.
   Hairline grid on a tint background, matching the device used on the homepage
   rather than four shadowed cards. */
.founder .prose .stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:18px;
  overflow:hidden;margin:0 0 30px}
.founder .prose .stat-card{background:#fff;padding:24px 18px;text-align:center}
.founder .prose .stat-card .number{display:block;font-size:27px;font-weight:800;
  letter-spacing:-.03em;color:var(--ink);line-height:1.1}
.founder .prose .stat-card .label{display:block;margin-top:8px;font-size:13px;
  line-height:1.45;color:var(--mute)}

/* ── end CTA ──────────────────────────────────────────────────────────────
   .cta-box is shared and already a dark panel rather than a purple gradient.
   Only the quiet second action is added here. */
.founder .prose .cta-box .cta-quiet{background:none;box-shadow:none;color:rgba(255,255,255,.72);
  padding:15px 4px;margin-left:14px;font-weight:600;font-size:15px}
.founder .prose .cta-box .cta-quiet:hover{color:#fff;transform:none}

/* ── closing links ────────────────────────────────────────────────────────
   Three trailing italic notes, now one quiet block above the footer. */
.founder .prose .story-links{border-top:1px solid var(--line);margin:40px 0 0;padding:22px 0 0}
.founder .prose .story-links p{font-size:14.5px;line-height:1.72;color:var(--mute);margin-bottom:8px}
.founder .prose .story-links p:last-child{margin-bottom:0}

/* ── support bubble ───────────────────────────────────────────────────────
   Long-form reading is the one place UI must never cover text. Hidden for the
   whole article; it returns only once the end CTA is on screen. */
.founder #db-chat-bubble{opacity:0;pointer-events:none;transition:opacity .3s ease}
.founder.past-story #db-chat-bubble{opacity:1;pointer-events:auto}

@media (max-width:768px){
  .founder .ahero{padding:96px 0 72px}
  .founder .ahero h1{font-size:32px}
  .founder .ahero-byline{font-size:14px;margin-top:18px}
  .founder .founder-wrap{padding-top:32px}
  .founder .prose .stats-grid{grid-template-columns:1fr 1fr}
  .founder .prose .pull-quote{font-size:19px}
}