/* /about (CZ-6656). Loaded only by the About page, after site.css and checklists.css, built on their tokens; every class starts with "ab-".
   The page is flat (see ".page--flat" in site.css): sections on the one page background, no nested white panel. The shared header is untouched.
   Prose is held to a readable measure; the extra width goes to the hero art, the people cards, the link grid and the contributor grid.
   Images: every phone screen is an untouched frame of Kyle's real screen recording (wwwroot/img/app-real, cropped only) in a pure-CSS shell, never stretched. */
:root {
  --ab-navy: #10214A;
  --ab-navy-2: #1B2F6B;
  --ab-line: #E4DED2;
  --ab-paper: #FCFAF6;
  --ab-measure: 68ch;
}

.ab-title, .ab-h2 { font-family: var(--font-display); color: var(--ab-navy); font-weight: 700; letter-spacing: -0.015em; text-wrap: balance; }
.ab-h2 { font-size: clamp(26px, 2.6vw, 38px); line-height: 1.12; margin: 0 0 22px; }
.ab-prose { max-width: var(--ab-measure); font-size: 17px; color: var(--ink-2); margin: 0 0 20px; }
.ab-section { padding-block: 44px; border-top: 1px solid var(--ab-line); }

/* Hero: the pitch on the left, two real app screens standing on a deep stage on the right */
.ab-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px clamp(32px, 5vw, 88px); align-items: center; padding-block: 40px 52px; }
.ab-title { font-size: clamp(38px, 4.4vw, 64px); line-height: 1.04; letter-spacing: -0.02em; margin: 0; }
.ab-headline { margin: 18px 0 0; font-size: clamp(21px, 2vw, 28px); line-height: 1.25; font-weight: 700; color: var(--accent); max-width: 24em; }
.ab-lede { margin: 18px 0 28px; max-width: 36em; font-size: clamp(17px, 1.3vw, 19px); line-height: 1.6; color: var(--ink-2); }
.ab-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.ab-actions .btn { padding: 13px 24px; font-size: 16px; }

.ab-stage { position: relative; aspect-ratio: 1 / 0.8; border-radius: 12px; overflow: hidden; max-width: 760px; width: 100%; justify-self: end;
  background: radial-gradient(70% 60% at 50% 38%, #3A58B8 0%, var(--ab-navy-2) 45%, var(--ab-navy) 100%); box-shadow: 0 18px 40px rgba(16, 33, 74, 0.26); }
.ab-stage::after { content: ""; position: absolute; left: 6%; right: 6%; bottom: 0; height: 12%; border-radius: 50% 50% 0 0 / 100% 100% 0 0; background: rgba(255, 255, 255, 0.07); }
/* The phone shell: a plain dark bezel around one real frame. The frame sets the shape (660 x 1359), the bezel only pads it. */
.ab-phone { position: absolute; display: block; box-sizing: border-box; padding: 6px; border-radius: 13% / 6.3%; background: #0E0F14;
  box-shadow: inset 0 0 0 1px #3B3D47, 0 14px 22px rgba(0, 0, 0, 0.4); width: 40%; }
.ab-phone img { display: block; width: 100%; height: auto; border-radius: 11% / 5.3%; background: #fff; }
.ab-phone--a { left: 11%; bottom: -3%; z-index: 1; }
.ab-phone--b { right: 11%; bottom: -16%; z-index: 2; }

/* The people: two cards side by side; a person with no approved photo gets an initial in a plain disc */
.ab-people { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)) minmax(280px, 400px); gap: 20px; align-items: start; }
@media (max-width: 1180px) { .ab-people { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ab-people .video-card { grid-column: 1 / -1; max-width: 520px; } }
.ab-person { display: flex; gap: 20px; align-items: flex-start; padding: 24px; background: var(--panel); border: 1px solid var(--ab-line); border-radius: 12px; }
.ab-initial { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 72px; height: 72px; border-radius: 999px;
  background: var(--ab-navy); color: #fff; font-family: var(--font-display); font-size: 32px; font-weight: 700; }
.ab-person__body { min-width: 0; }
.ab-person h3 { font-size: 22px; font-family: var(--font-display); color: var(--ab-navy); }
.ab-person p { margin: 8px 0 0; color: var(--ink-2); }
.ab-person .ab-role { margin-top: 2px; font-weight: 700; color: var(--accent); }
.ab-person__links { margin-top: 12px !important; font-weight: 600; }


/* Where to start: links to real pages */
.ab-links { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.ab-link { display: flex; flex-direction: column; gap: 6px; height: 100%; padding: 18px 20px; background: var(--panel); border: 1px solid var(--ab-line); border-radius: 10px; color: var(--ink); text-decoration: none; }
.ab-link:hover { border-color: var(--outline); text-decoration: none; box-shadow: 0 4px 14px rgba(16, 33, 74, 0.09); }
.ab-link__title { font-weight: 700; font-size: 17px; color: var(--ab-navy); }
.ab-link__title::after { content: " \2192"; color: var(--accent); }
.ab-link__text { font-size: 14.5px; color: var(--muted); line-height: 1.45; }

/* Contributors: a compact, collapsed, browseable grid; the persona description of each is one more disclosure */
.ab-roster { margin-top: 4px; }
/* Flowing columns, not grid rows: the cards differ in height, and rows would leave a gap under every short card. */
.ab-roster__grid { list-style: none; margin: 0; padding: 0; columns: 300px; column-gap: 14px; }
.ab-persona { break-inside: avoid; margin: 0 0 14px; padding: 14px 16px; background: var(--tile); border: 1px solid var(--rule); border-radius: 10px; min-width: 0; }
.ab-persona__head { display: flex; gap: 12px; align-items: center; }
.ab-persona__emoji { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 999px; background: #fff; border: 1px solid var(--rule); font-size: 20px; }
.ab-persona h3 { font-size: 16px; }
.ab-persona__beat { margin: 2px 0 0; font-size: 13.5px; color: var(--muted); line-height: 1.35; }
.ab-persona__topics { margin: 10px 0 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 13px; color: var(--muted); }
.ab-persona__topics a { padding: 1px 10px; border: 1.5px solid var(--outline); border-radius: 999px; background: #fff; font-weight: 600; text-decoration: none; }
.ab-persona__topics a:hover { text-decoration: underline; }
.ab-persona__bio { margin: 10px 0 0; font-size: 14px; color: var(--ink-2); line-height: 1.5; }

.ab-cta .ab-stores { display: flex; flex-wrap: wrap; gap: 12px 14px; align-items: center; }
.ab-cta .ab-stores a { display: block; border-radius: 8px; }
.ab-cta .ab-stores img { display: block; height: 58px; width: auto; }

@media (max-width: 960px) {
  .ab-hero { grid-template-columns: minmax(0, 1fr); padding-block: 24px 36px; }
  .ab-stage { justify-self: stretch; max-width: 560px; aspect-ratio: 1 / 0.78; }
  .ab-people { grid-template-columns: minmax(0, 1fr); }
  .ab-people .video-card { max-width: none; }
}
@media (max-width: 560px) {
  .ab-section { padding-block: 32px; }
  .ab-actions .btn { display: block; width: 100%; text-align: center; }
  .ab-person { padding: 18px; gap: 14px; }
  .ab-initial { width: 56px; height: 56px; font-size: 26px; }
  .ab-links { grid-template-columns: minmax(0, 1fr); }
      .ab-persona__topics a { padding: 5px 12px; }
  .ab-cta .ab-stores img { height: 52px; }
}