/* SECTION 9: "A note from Rivius" (agent D, v14, 2026-10-01; re-voiced v15, 2026-10-04). Every selector starts
   with .founder.
   Same 1/3 + 2/3 split as the FAQ below (Sola's FAQ columns: 445 / 891 at 1440), so the two sections share one
   vertical rule. The label sits in the left column, the note on the right in Hedvig serif. No quote marks and no
   rating: it is a company note, not a testimonial.
   v15: there is no invented name or face yet (brand/BRAND-FACTS.md), so the left column carries the label alone. Its
   padding, gap and column width are unchanged, and the .founder-photo / .founder-sign rules below are kept, so the
   real photo and signature drop straight back in under the label without touching the layout. */

.founder .founder-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  grid-template-areas: "side body";
  border-top: 1px solid var(--token-line);
}

/* .ph (sections.css) is no longer used here: every placeholder on the homepage is resolved. The rules below that
   still mention .founder-photo / .founder-sign are the drop-back-in slot, not live markup. */

/* ---- the note ---- */
.founder .founder-body {
  grid-area: body;
  display: flex; flex-direction: column; gap: 28px;
  padding: 72px 64px 80px 32px;   /* left edge on the column's text line, as in Comparison, Pricing and the FAQ below */
  min-width: 0;
}
.founder .founder-label { margin: 0; }
.founder .founder-note {
  max-width: 30em;
  font-family: var(--font-serif);
  font-size: 28px; font-weight: 400; line-height: 1.36; letter-spacing: -0.015em;
  color: var(--token-ink);
  text-wrap: pretty;
}
.founder .founder-note p + p { margin-top: .75em; }   /* no balance: it squeezed the line into a narrow block on tablets */
/* the address is set a touch smaller than the serif line around it, as the placeholder was, so it does not shout */
.founder .founder-mail { font-size: .82em; letter-spacing: 0; text-underline-offset: 4px; }
/* source line under the note: the fact strip's .fact-src style (integrator, v14) */
.founder .founder-src {
  margin-top: -8px;
  font-size: 12px; font-weight: 500; line-height: 1.5; letter-spacing: -0.02em;
  color: var(--token-grey-7a);
}

/* ---- left column: the label, and the slot the photo + signature return to ---- */
.founder .founder-side {
  grid-area: side;
  display: flex; flex-direction: column; align-items: flex-start; gap: 20px;
  padding: 72px 32px 80px;
  border-right: 1px solid var(--token-line);
  min-width: 0;
}
/* 4px drops the 12px mono label onto the cap line of the 28px serif note opposite it */
.founder .founder-side .founder-label { margin-top: 4px; }
.founder .founder-photo {
  margin: 0;
  width: min(100%, 248px);
  aspect-ratio: 1;
  padding: 6px;
  border: 1px solid rgba(38, 38, 38, .12);
  background: var(--token-bg);
}
.founder .founder-photo-mat {
  height: 100%;
  display: grid; place-items: center;
  padding: 8px;
  text-align: center;
  background:
    radial-gradient(circle at 1px 1px, rgba(0, 0, 0, .07) 1px, transparent 1.4px) 0 0 / 14px 14px,
    var(--token-surface);
}
.founder .founder-photo .ph {
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 11px; font-weight: 500; line-height: 1.5; letter-spacing: 0.04em;
}
.founder .founder-sign { display: flex; flex-direction: column; gap: 2px; }
.founder .founder-name { font-size: 16px; font-weight: 600; line-height: 1.4; letter-spacing: -0.035em; color: var(--token-ink); }
.founder .founder-role { font-size: 14px; font-weight: 500; line-height: 1.5; letter-spacing: -0.03em; color: var(--token-grey-61); }

/* ---------------- Tablet (810-1199) ---------------- */
@media (max-width: 1199px) {
  .founder .founder-grid { grid-template-columns: minmax(0, 3fr) minmax(0, 5fr); }   /* = the FAQ's tablet split */
  .founder .founder-body { padding: 56px 40px 64px 28px; gap: 24px; }
  .founder .founder-side { padding: 56px 24px 64px; }
  .founder .founder-note { font-size: 24px; line-height: 1.38; }
  .founder .founder-photo { width: min(100%, 208px); }
}

/* ---------------- Phone (<810): label on top, then the note ---------------- */
@media (max-width: 809px) {
  /* label first, then the note: one column, so the photo and signature return as a row under the label */
  .founder .founder-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "side" "body"; }
  .founder .founder-side {
    padding: 44px 24px 0; gap: 16px;
    border-right: 0;
  }
  .founder .founder-side .founder-label { margin-top: 0; }
  .founder .founder-body { padding: 18px 24px 48px; gap: 20px; }
  .founder .founder-note { font-size: 22px; line-height: 1.4; }
  .founder .founder-photo { flex: none; width: 96px; padding: 4px; }
  .founder .founder-photo-mat { padding: 4px; background-size: 10px 10px; }
}