/* ============================================================
   Pick One · About Us Page Refinement Layer
   ------------------------------------------------------------
   Loaded after about.css and pick-one-ds.css.

   This refinement layer enforces:
     1 · Container lock & consistent section vertical rhythm
     2 · Elimination of repeated section eyebrow labels
     3 · Equal-height card rows across scenario, psych & feature grids
     4 · Anti-slop typography & river elimination on narrow text
     5 · Frosted glass accents at signature storytelling moments
   ============================================================ */

/* ---------- 1 · Container & Section Rhythm ------------------- */
.about-page .wrap,
.about-page .container {
  width: 100%;
  max-width: var(--container-max-w, 80rem);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}

.about-page .section {
  padding-block: clamp(3.5rem, 7vw, 6.5rem);
}

.about-page .section--tight {
  padding-block: clamp(2.5rem, 4.5vw, 4rem);
}

.about-page .section--white {
  background-color: #ffffff;
}

.about-page .section--sand,
.about-page .section--cream {
  background-color: var(--cream, #fef8ec);
}

/* ---------- 2 · Section Header Rhythm ------------------------ */
.about-page .section-heading-center {
  max-width: 48rem;
  margin-inline: auto;
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
  text-align: center;
}

.about-page .section-heading-center .h-1,
.about-page .section-heading-center h2 {
  font-family: var(--font-display);
  font-size: clamp(1.85rem, 3.2vw, 2.75rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: var(--ink, #1a1a1a);
  text-wrap: balance;
}

.about-page .eyebrow {
  display: inline-block;
  margin-bottom: 0.875rem;
  padding: 0.35rem 0.85rem;
  border-radius: var(--radius-full);
  background: var(--surface-peach, #fcece5);
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent-coral-ink, #b8402d);
}

/* ---------- 3 · Hero & Origin Story -------------------------- */
.about-page .about-hero {
  padding-block: clamp(3rem, 6vw, 5.5rem) clamp(3.5rem, 7vw, 6rem);
  background:
    radial-gradient(100% 70% at 85% 15%, rgba(252, 189, 76, 0.14) 0%, rgba(252, 189, 76, 0) 50%),
    radial-gradient(90% 70% at 10% 90%, rgba(240, 104, 88, 0.1) 0%, rgba(240, 104, 88, 0) 55%),
    linear-gradient(180deg, #fffdf9 0%, var(--cream, #fef8ec) 100%);
}

/* Her reference (Screen Shot 2026-09-08 at 18.41.28): the headline sits LEFT,
   above its own copy, in one half of a two-column hero; the photograph holds
   the other half. This is the one place on the site where a heading is not
   centred, at her explicit request. */
.about-page .about-hero__content {
  text-align: left;
}

.about-page .about-hero__content .about-hero__title {
  text-align: left;
  margin-inline: 0;
}

.about-page .about-hero__grid {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
  grid-template-columns: 1fr;
}

@media (min-width: 58rem) {
  .about-page .about-hero__grid {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
    gap: clamp(2.5rem, 5vw, 4.5rem);
  }
}

.about-page .about-hero__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.8vw, 3.125rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.03em;
  color: var(--ink, #1a1a1a);
  margin-bottom: 1.5rem;
  text-wrap: balance;
}

/* The picture IS the left half: it fills its column edge to edge instead of
   floating in the middle of it as a small framed snapshot. */
.about-page .portrait-stage {
  position: relative;
  max-width: none;
  margin-inline: 0;
}

/* Her reference frames the photograph as a clean rounded rectangle with no
   shadow and no feathered edge, so the earlier dissolve mask is gone. */
.about-page .portrait-stage__img {
  border-radius: var(--radius-lg);
  box-shadow: none;
  object-fit: cover;
  object-position: 50% 30%;
  width: 100%;
  aspect-ratio: 4 / 4.6;
  -webkit-mask-image: none;
  mask-image: none;
}

/* Her mock (Screen Shot 2026-09-08 at 16.08.56) puts the quote back at the
   BOTTOM of the picture, hanging below its lower edge and starting just outside
   its left edge, with the text set flush left inside the card. That supersedes
   the centred placement she asked for at 08:40. */
.about-page .about-hero__media {
  padding-bottom: 3rem;
}

.about-page .portrait-stage__badge {
  position: absolute;
  left: -1.25rem;
  right: 1.25rem;
  bottom: -2rem;
  top: auto;
  transform: none;
  width: auto;
  padding: 1.25rem 1.5rem;
  text-align: left;
}

/* The flush-text guard in pick-one-ds.css §3 sets `text-align: start` on every
   <p> inside a `.qcard-frosted`, and it outranks a two-class selector. This one
   has to be more specific to centre the quote inside the bubble. */
body.about-page .portrait-stage .portrait-stage__quote,
body.about-page .portrait-stage .portrait-stage__author {
  text-align: start;
  text-align-last: auto;
  margin-inline: 0;
}

/* The story copy carries its own half, so it is set larger than body prose. */
.about-page .about-hero__lede {
  font-size: clamp(1.0625rem, 1.15vw, 1.1875rem);
  max-width: 34rem;
}

.about-page .about-hero__lede .lede-accent {
  font-size: clamp(1.25rem, 1.7vw, 1.5rem);
}

@media (max-width: 48rem) {
  .about-page .portrait-stage__badge {
    position: static;
    top: auto;
    transform: none;
    width: 100%;
    margin-top: 1rem;
  }
}

/* ---------- 4 · Frosted Glass System ------------------------- */
.about-page .qcard-frosted {
  background: rgba(255, 255, 255, 0.85);
  -webkit-backdrop-filter: blur(18px) saturate(1.35);
  backdrop-filter: blur(18px) saturate(1.35);
  border: 1px solid rgba(255, 255, 255, 0.85);
  border-radius: var(--radius-md);
  box-shadow:
    0 1px 2px rgba(26, 26, 26, 0.04),
    0 18px 40px -16px rgba(26, 26, 26, 0.24);
}

.about-page .qcard-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.65rem;
  border-radius: var(--radius-full);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.about-page .chip--terracotta {
  background: var(--surface-peach, #fcece5);
  color: var(--accent-coral-ink, #b8402d);
}

.about-page .chip--teal {
  background: #e9f5f4;
  color: #1c5a57;
}

.about-page .chip--blue {
  background: #edf3f8;
  color: #27496d;
}

.about-page .chip--ochre {
  background: #fff6e3;
  color: var(--ochre-ink, #7a4c00);
}

.about-page .chip--sage {
  background: #f0f5e5;
  color: #3d470f;
}

.about-page .chip--amber {
  background: #fff0db;
  color: #874800;
}

/* ---------- 5 · Card Grids & Equal Heights ------------------- */
.about-page .scenario-grid {
  display: grid;
  gap: clamp(1rem, 2vw, 1.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  align-items: stretch;
}

.about-page .scenario-card {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1px solid var(--border-card);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-subtle);
  padding: clamp(1.25rem, 2vw, 1.75rem);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

.about-page .scenario-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-hover);
}

.about-page .scenario-card > :last-child {
  margin-top: auto;
}

/* Scenario copy follows its title. The cards stretch to equal height, so the
   bottom-pinned last child opened a void under the shorter card titles. */
.about-page .scenario-card > .scenario-card__text {
  margin-top: 0;
}

.about-page .psych-grid {
  display: grid;
  gap: clamp(1rem, 2vw, 1.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  align-items: stretch;
}

.about-page .psych-card {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1px solid var(--border-card);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-subtle);
  padding: clamp(1.25rem, 2vw, 1.75rem);
}

.about-page .psych-card > :last-child {
  margin-top: auto;
}

.about-page .about-features {
  display: grid;
  gap: clamp(1rem, 2vw, 1.25rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  align-items: stretch;
}

.about-page .feature-card {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1px solid var(--border-card);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-subtle);
  padding: clamp(1.125rem, 1.8vw, 1.5rem);
}

.about-page .feature-card > :last-child {
  margin-top: auto;
}

.about-page .matrix-grid {
  display: grid;
  gap: clamp(1.25rem, 2.5vw, 2rem);
  grid-template-columns: 1fr;
  align-items: stretch;
}

@media (min-width: 52rem) {
  .about-page .matrix-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.about-page .matrix-col {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1px solid var(--border-card);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-subtle);
  padding: clamp(1.25rem, 2.5vw, 2rem);
}

.about-page .matrix-col--pickone {
  border-color: rgba(240, 104, 88, 0.35);
  box-shadow: 0 4px 16px rgba(240, 104, 88, 0.08), 0 16px 36px -12px rgba(240, 104, 88, 0.16);
}

/* ---------- 6 · Justified Text & Rivers Fix ------------------ */
.about-page :is(
  .about-hero__lede, .scenario-card, .matrix-item, .psych-card,
  .principle-card, .prose, .topics-prose, .app-narrative,
  .feature-card, .founder-letter-card, .manifesto-subprose,
  .climax-box, .qcard-frosted, .checks, .lead, .pivot
) :is(p, li, span, div, strong, em, dd, dt) {
  text-align: start;
  text-align-last: auto;
  -webkit-hyphens: manual;
  hyphens: manual;
}

.about-page .matrix-subhead,
.about-page .psych-subhead,
.about-page .features-subhead {
  text-align: center;
  text-align-last: auto;
  text-wrap: pretty;
}

/* ---------- 7 · Interactive Elements ------------------------- */
.about-page :is(a, button, summary, [role="button"]) {
  cursor: pointer;
}

/* ---------- Viewport + anti-slop pass (2026-08-31) ------------------
   Every block fits one desktop viewport. The two-column "clinical vs
   Pick One" matrix is the shared comparison stage now; the three
   scenario cards lose their coloured top borders; the five icon boxes
   are a client render beside a check list; the two shouting uppercase
   statements read at section size in sentence case. */
.about-page .scenario-card { border-top: 0 !important; }
.about-page .scenario-grid { gap: 1rem; }
.about-page .scenario-card { padding: clamp(1.25rem, 2.2vw, 1.6rem) !important; }
.about-page .scenario-card__text { font-size: 0.95rem; }
.about-page .pivot-lead { font-size: 1.05rem !important; max-width: 60ch; margin-bottom: 0.75rem; }
.about-page .climax-box { margin-top: 1.5rem; padding: 1.25rem 1.5rem; }

.about-page .statement--line {
  margin: 1.5rem auto 0;
  max-width: 40rem;
  text-align: center;
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--coral-deep, #d9503f);
  text-transform: none;
}
.about-page .topics-prose { font-size: 1rem; }
.about-page .topics-prose > * + * { margin-top: 0.6em; }
.about-page .topics-counter { margin-top: 1.5rem; }
.about-page .topics-counter .lead { font-size: 1.1rem; }

.about-page #app .app-evolution-grid { margin-top: 0; align-items: center; }
.about-page .app-stage__device { max-height: 540px; width: auto; }
.about-page .app-narrative__prose { font-size: 1rem; }
.about-page .app-narrative__prose > * + * { margin-top: 0.7em; }

.about-page .founder-letter-card { padding: clamp(1.5rem, 3vw, 2.25rem) !important; }
.about-page .founder-letter-card__body { font-size: 1rem; }
.about-page .founder-letter-card__body > * + * { margin-top: 0.7em; }
.about-page .founder-letter-card__signoff { margin-top: 1.25rem; }

.about-page .manifesto-subprose { font-size: 1rem; }
.about-page .manifesto-subprose > * + * { margin-top: 0.5em; }
.about-page .cta-card { padding: clamp(1.75rem, 4vw, 2.5rem) 1.5rem !important; }
.about-page .cta-card__line { margin-top: 0 !important; }
/* The principle cards used a two-track grid (number + text). The numbers
   are gone, so the text was landing in the auto-sized first track. */
.about-page .principle-card { grid-template-columns: 1fr !important; gap: 0.5rem !important; padding: clamp(1.1rem, 2vw, 1.5rem) !important; }
.about-page .principles-stack { gap: 1rem !important; }
/* Her About deck, slide 4: the three-line coral statement, uppercase as she set
   it, at section size rather than poster size. */
.about-page .statement--upper {
  margin: 1.5rem auto 0; max-width: 40rem; text-align: center;
  font-family: var(--font-display); font-size: clamp(1.5rem, 2.8vw, 2.25rem); font-weight: 800;
  line-height: 1.12; letter-spacing: -0.01em; color: var(--coral-deep, #d9503f); text-transform: uppercase;
}
.about-page .features-split__media img { max-width: 34rem; margin-inline: auto; }
/* Measured: topics 929px, features 1,044px. */
.about-page .statement--upper { font-size: clamp(1.35rem, 2.4vw, 1.9rem); margin-top: 1.1rem; }
.about-page .topics-counter { margin-top: 1.1rem; }
.about-page .features-split__media img { max-width: 26rem; }
.about-page #features .checks { margin-top: clamp(2rem, 4vw, 3.5rem) !important; gap: 0.5rem; }
.about-page #features .check { padding: 0.7rem 1rem; font-size: 0.95rem; }
.about-page #features .features-list { gap: 0.75rem 1.25rem; }
/* The two lines under the uppercase statement sat left-aligned under a
   centred block. Same alignment as every other headline group. */
.about-page .topics-counter { text-align: center; }

/* ---------- 3b · Section 3: the founders in front of the question wall ------ */
/* The photograph carries thirty readable question cards behind the two people,
   so it needs real width; at the stock 25rem frame the card text turns to
   texture. No frosted overlay on this one either: the picture already has
   question cards in it, and a card on top would sit on their words
   (House rule 12). */
.about-page .prototype-frame--wide {
  max-width: 34rem;
}

.about-page .prototype-frame--wide .prototype-frame__img {
  border-radius: var(--radius-lg);
  box-shadow: none;
}

/* ---------- 4b · Section 4: the bridge phone ------------------------------- */
/* 2026-10-23, her words: "this image we already have locked, fix it". The
   two-phones-in-hands shot is gone; the bridge uses the homepage's approved
   single phone (device-q-appreciate.webp) at the shared pick-one-ds.css size,
   so both bridges match. */

/* The "we kept arriving at the same place" box now opens section 3, so it needs
   air between it and the section headline that follows. */
.about-page #research .climax-box {
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

/* ---------- 3c · Section 3: the founders photo, small and calm ------------- */
/* Her 2026-10-01 note: the photo was too big and too busy. It is now a framed
   picture inside the reading column, not a full-bleed band. The file is a new
   cut of her original (founders-question-wall-calm.webp, 1266x993, native
   pixels, no upscale): the couple are her original pixels, the wall behind
   them was rebuilt from the photo's own wall tone and carries three of its own
   cards above their heads, so no card sits on a body or crosses a head. */
.about-page .study-band {
  width: min(100% - 2 * var(--gutter, 1.25rem), 36rem);
  margin: clamp(2rem, 4vw, 3rem) auto 0;
  padding: 0;
  line-height: 0;
}

.about-page .study-band__img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-md, 1.25rem);
}

.about-page .study-prose {
  max-width: 46rem;
  margin-inline: auto;
}

.about-page .study-prose__highlight {
  font-size: 1.2rem;
  color: var(--ink, #1a1a1a);
  border-left: 3px solid var(--accent-ochre, #fcbd4c);
  padding-left: 1rem;
  margin-top: 1.75rem;
}

/* ---------- 5c · Section 5: the topic grid --------------------------------- */
/* The four "About ..." lines were a stack of loose sentences in one narrow
   column. Each is now a card carrying its own category chip, so the four
   subjects read as the four territories the questions cover. Her sentences are
   unchanged, including the "About money:" opening of each one. */
.about-page .topic-grid {
  display: grid;
  gap: clamp(1rem, 2vw, 1.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  align-items: stretch;
  max-width: 62rem;
  margin-inline: auto;
}

.about-page .topic-card {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  align-items: flex-start;
  background: #ffffff;
  border: 1px solid var(--border-card);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-subtle);
  padding: clamp(1.25rem, 2.2vw, 1.75rem);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

.about-page .topic-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-hover);
}

.about-page .topic-card__text {
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--text-charcoal, #47423c);
}

.about-page .topic-card__text strong {
  color: var(--ink, #1a1a1a);
}

.about-page .topics-coda {
  max-width: 48rem;
  margin: clamp(2rem, 4vw, 3rem) auto 0;
  text-align: center;
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--text-charcoal, #47423c);
}

/* House rule 11: never justify a column narrower than ~46ch. The topic cards
   are new, so they join the flush-text guard here and in pick-one-ds.css §3.
   Without this the site-wide `p { text-align: justify }` opens rivers of white
   down the two cards whose sentences are longest. */
body.about-page .topic-card .topic-card__text {
  text-align: start;
  text-align-last: auto;
  -webkit-hyphens: none;
  hyphens: none;
}

/* The counter is a centred block, but its paragraphs inherit the site-wide
   justify rule, which reads as flush left on a one-line sentence. */
body.about-page .topics-counter p {
  text-align: center;
  text-align-last: center;
  margin-inline: auto;
}

/* 2026-10-22 · #features: her ask "use the image attached" — the homepage
   four-phone app-features picture replaces the orbit graphic + feature list.
   Section bg = the image's own #fff9f4 so its edges never show a seam. */
.about-page #features { background: #fff9f4; }
.about-page .about-app-features { display: block; width: 100%; margin-top: clamp(1.5rem, 3vw, 2.5rem); }
.about-page .about-app-features__img { display: block; width: 100%; height: auto; }

/* 2026-10-23 · #story coda: her copy, closing the three scenario cards and
   leading into #research. Text styles reuse the hero's charcoal lede and its
   terracotta "The real ones." accent. */
.about-page .story-coda { max-width: 46rem; margin: clamp(2.5rem, 5vw, 4rem) auto 0; text-align: center; }
.about-page .story-coda p { text-align: center; }
.about-page .story-coda__lead { font-size: clamp(1.1rem, 1.8vw, 1.35rem); line-height: 1.55; color: var(--text-charcoal, #47423c); text-wrap: balance; }
.about-page .story-coda__lead strong { color: var(--ink, #1a1a1a); }
.about-page .story-coda__turn { margin-top: var(--s-3, 0.75rem); font-size: clamp(1.25rem, 1.7vw, 1.5rem); font-weight: 700; color: var(--accent-terracotta); }

/* 2026-10-23 · #research photo back to full width, her words: "this picture
   needs to be full width and the wall of questions needs to look like a
   wallpaper. we had one before". The original wallpaper shot
   (founders-question-wall-full.webp, 1266x1243 from her 2026-09-08 upload)
   spans edge to edge at its natural ratio: the figure sits outside .wrap, so
   no 100vw arithmetic and no scrollbar overflow. Not cropped: a letterbox
   would slice the top row of cards or the heads. */
.about-page .study-band {
  width: 100%;
  max-width: none;
  margin: clamp(2.5rem, 5vw, 4rem) 0 0;
}
.about-page .study-band__img { border-radius: 0; }
.about-page #research { padding-bottom: 0; }

/* 2026-10-23 · #research: her words "this should be 3 bullets in a row not
   one after another, redesign". The three study paragraphs sit side by side
   as numbered points on one dashed line (stacked below 48rem), and the turn
   line closes them centred in coral, leading into the wallpaper photo. */
.about-page .study-points {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 72rem;
  display: grid;
  gap: 2rem;
  position: relative;
}
.about-page .study-point { position: relative; padding-left: 4rem; }
.about-page .study-point__num {
  position: absolute; left: 0; top: 0;
  width: 2.75rem; height: 2.75rem; border-radius: 50%;
  display: grid; place-items: center;
  font-family: "Gabarito", sans-serif; font-weight: 800; font-size: 1rem;
  color: #1a1a1a; border: 2px solid; z-index: 1;
}
.about-page .study-point--teal  .study-point__num { border-color: #97c1bf; background: #e9f5f4; }
.about-page .study-point--blue  .study-point__num { border-color: #92aec6; background: #eaf1f8; }
.about-page .study-point--amber .study-point__num { border-color: #fcbd4c; background: #fff6e3; }
.about-page .study-point p {
  margin: 0.35rem 0 0;
  font-size: 1.0625rem; line-height: 1.65; color: #302f2e;
  text-align: left; text-wrap: pretty; hyphens: none;
}
.about-page .study-turn {
  margin: clamp(2.25rem, 4vw, 3.25rem) auto 0;
  max-width: 40rem;
  text-align: center; text-wrap: balance;
  font-family: "Gabarito", sans-serif;
  font-size: clamp(1.35rem, 2.2vw, 1.75rem); line-height: 1.3;
  color: var(--accent-terracotta, #f06858);
}
@media (min-width: 48rem) {
  .about-page .study-points { --g: clamp(1.75rem, 3.5vw, 3rem); grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--g); }
  /* the line runs from the first number to the third, never past it */
  .about-page .study-points::before {
    content: ""; position: absolute; left: 1.375rem; right: calc((100% - 2 * var(--g)) / 3 - 1.375rem); top: 1.375rem;
    border-top: 2px dashed rgba(26, 26, 26, 0.16);
  }
  .about-page .study-point { padding-left: 0; padding-top: 3.75rem; }
  .about-page .study-point p { margin-top: 0; }
}

/* 2026-10-23 · #topics close, her words "needs a better design". Her copy is
   unchanged. The three "ones" sentences become three tilted question cards in
   a row (the app's own card vocabulary, chips are real app categories); the
   statement and the count share one cream panel: the three lines set large on
   the left, "three thousand" as the hero numeral on the right, and the closing
   line ends on the app's typing dots, so "we still haven't stopped" moves. */
.about-page .ones-row {
  list-style: none; margin: clamp(2.5rem, 5vw, 4rem) auto 0; padding: 0;
  max-width: 64rem; display: grid; gap: 1.25rem;
}
.about-page .ones-card {
  background: #ffffff;
  border: 1px solid rgba(26, 26, 26, 0.08);
  border-radius: 20px;
  padding: 1.4rem 1.5rem 1.5rem;
  box-shadow: 0 16px 36px -22px rgba(26, 26, 26, 0.3);
  transform: rotate(var(--tilt, 0deg));
  transition: transform 0.35s ease;
}
.about-page .ones-card:hover { transform: rotate(0deg) translateY(-4px); }
.about-page .ones-card p {
  margin: 0.85rem 0 0; text-align: left; text-wrap: pretty; hyphens: none;
  font-family: "Gabarito", sans-serif; font-weight: 600;
  font-size: clamp(1.1rem, 1.5vw, 1.25rem); line-height: 1.4; color: #1a1a1a;
}
@media (min-width: 48rem) {
  .about-page .ones-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.25rem, 2.5vw, 2rem); }
}

.about-page .count-panel {
  margin: clamp(3rem, 6vw, 4.5rem) auto 0;
  max-width: 64rem;
  background: #fef8ec;
  border-radius: 32px;
  padding: clamp(2rem, 5vw, 3.5rem) clamp(1.5rem, 5vw, 4rem);
  display: grid; gap: 2rem; align-items: center;
}
.about-page .count-panel p { margin: 0; text-align: center; hyphens: none; }
.about-page .count-panel__pre,
.about-page .count-panel__post { font-size: 1.125rem; color: #302f2e; }
.about-page .count-panel__still {
  margin-top: 1.25rem !important;
  display: inline-flex; align-items: center; gap: 0.6rem;
  background: #ffffff; border-radius: 999px; padding: 0.6rem 1.1rem;
  font-size: 1.0625rem; color: #1a1a1a;
  box-shadow: 0 10px 24px -16px rgba(26, 26, 26, 0.35);
}
.about-page .count-panel__count { text-align: center; }
.about-page .count-panel__dots { display: inline-flex; gap: 4px; }
.about-page .count-panel__dots i {
  width: 6px; height: 6px; border-radius: 50%; background: #f06858;
  animation: count-dot 1.2s ease-in-out infinite;
}
.about-page .count-panel__dots i:nth-child(2) { animation-delay: 0.15s; }
.about-page .count-panel__dots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes count-dot { 0%, 60%, 100% { opacity: 0.3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) {
  .about-page .count-panel__dots i { animation: none; opacity: 0.7; }
  .about-page .ones-card { transition: none; }
}
@media (min-width: 56rem) {
  .about-page .count-panel { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); }
  .about-page .count-panel__count { border-left: 2px dashed rgba(240, 104, 88, 0.3); padding-left: clamp(2rem, 4vw, 3.5rem); }
}

/* 2026-10-23 · her words "use two column section here, one with an app 365
   inside, the right side with text and play and app store button". The cream
   panel is now phone | text: the /365 lock-screen phone (365-lockscreen-v2,
   the approved /365 asset) on the left; the statement, the count, the typing
   pill and the two store badges (static, as on /365) on the right. */
.about-page .count-panel--app { overflow: hidden; padding-bottom: 0; align-items: end; }
.about-page .count-panel__text { padding-bottom: clamp(2rem, 5vw, 3.5rem); text-align: center; }
.about-page .count-panel--app .count-panel__line { margin-top: 1.25rem; font-size: 1.125rem; line-height: 1.35; color: #302f2e; }
.about-page .count-panel__stores { justify-content: center; margin-top: 1.75rem; }
@media (min-width: 56rem) {
  .about-page .count-panel--app { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr); align-items: center; padding-top: clamp(2rem, 4vw, 3rem); }
  .about-page .count-panel__text { text-align: left; padding-left: 0; border: 0; }
  .about-page .count-panel--app p { text-align: left; }
  .about-page .count-panel__stores { justify-content: flex-start; }
}

/* ==========================================================================
   2026-10-26 · /about round 2 — her approved design preview (build pack,
   projects/pick-one/design/about/build-pack/README.md). Hero untouched.
   ========================================================================== */

/* 1 · Hero → story gap 168px → 112px (story top trimmed, hero padding untouched). */
.about-page #story { padding-top: 1rem !important; }

/* 2 · Story headline across the whole section; lead on the same width. */
.about-page #story .pivot-lead { max-width: none !important; margin-inline: auto; text-wrap: balance; }

/* 2b · Story cards: photos out, brand icon circles in. */
.about-page .scenario-card--icon {
  padding: clamp(1.5rem, 2.4vw, 2rem) !important;
  border: 1px solid rgba(26, 26, 26, 0.08);
  display: flex; flex-direction: column;
}
.about-page .scenario-card--icon .scenario-card__body { padding: 0 !important; margin-top: 1.25rem; }
.about-page .scenario-card--icon .scenario-card__title { margin-bottom: 0.6rem; font-size: 1.25rem !important; }
.about-page .scenario-icon {
  width: 3.5rem; height: 3.5rem; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; flex: none;
}
.about-page .scenario-icon svg { width: 1.6rem; height: 1.6rem; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.about-page .scenario-icon--amber { background: #FCBD4C; }
.about-page .scenario-icon--amber svg { stroke: #1A1A1A; }
.about-page .scenario-icon--coral { background: #F06858; }
.about-page .scenario-icon--coral svg { stroke: #FFFFFF; }
.about-page .scenario-icon--blue { background: #94B7D5; }
.about-page .scenario-icon--blue svg { stroke: #1A1A1A; }

/* 3 · "We wanted more so we started writing our own questions." — one-line headline. */
.about-page .study-turn--h {
  max-width: none !important; margin: 3.5rem auto 0 !important; text-align: center;
  font-family: "Gabarito", sans-serif; font-weight: 800;
  font-size: 2.5rem; line-height: 1.1; letter-spacing: -0.03em; color: #1A1A1A;
  white-space: nowrap;
}
.about-page #research .wrap { padding-bottom: 3.5rem; }
@media (max-width: 64rem) {
  .about-page .study-turn--h { white-space: normal; font-size: 1.875rem; margin-top: 2.5rem !important; text-wrap: balance; }
}

/* 4+5 · Founders in front of the question wall, one card row above their heads. */
.about-page .study-band__img { width: 100%; height: auto; }

/* 6 · The three "ones" cards: flat, same as the topic cards. */
.about-page .ones-card--flat {
  transform: none !important;
  padding: 28px !important;
  box-shadow: 0 1px 2px 0 rgba(26, 26, 26, 0.04), 0 12px 32px -18px rgba(26, 26, 26, 0.18) !important;
}
.about-page .ones-card--flat:hover { transform: none !important; }
.about-page .ones-card--flat p {
  margin-top: 1.1rem !important;
  font-family: "Figtree", sans-serif !important; font-weight: 400 !important;
  font-size: 17px !important; line-height: 1.6 !important; color: #3e4741 !important;
}
.about-page .ones-row { max-width: 62rem !important; margin-top: 1.25rem !important; gap: 1.25rem !important; }
.about-page .topic-grid { gap: 1.25rem; }

/* 7 + 8 · Count panel: the founders with the My Games phone, whole, on the panel's
   own cream; sentence-case H3, one sentence per line, then the count line. */
.about-page .count-panel--photo {
  max-width: 62rem !important; overflow: hidden; align-items: center !important;
  background: #FEF8EC !important;
  padding: clamp(2rem, 4vw, 3rem) clamp(1.5rem, 4vw, 3.5rem) !important;
  gap: clamp(1.5rem, 4vw, 3.5rem) !important;
}
.about-page .count-panel__photo { margin: 0; line-height: 0; align-self: center; }
.about-page .count-panel__photo img { display: block; width: 100%; height: auto; max-width: 34rem; margin-inline: auto; }
.about-page .count-panel--photo .count-panel__text { padding: 0 !important; }
.about-page .count-panel__head {
  margin: 0; font-family: "Gabarito", sans-serif; font-weight: 800;
  font-size: 2.5rem; line-height: 1.1; letter-spacing: -0.03em; color: #1A1A1A; text-wrap: balance;
}
.about-page .count-panel__head span { display: block; }
.about-page .count-panel--photo .count-panel__line {
  margin-top: 1rem !important; font-family: "Gabarito", sans-serif !important;
  font-size: 1.75rem !important; font-weight: 700 !important; line-height: 1.2 !important; color: #1A1A1A !important;
}
.about-page .count-panel--photo .count-panel__line strong { font-weight: 800; color: #1A1A1A; }
.about-page .count-panel--photo .count-panel__still { margin-top: 1.5rem !important; }
.about-page .count-panel--photo .count-panel__stores { margin-top: 2rem !important; }
@media (min-width: 56rem) {
  .about-page .count-panel--photo { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr) !important; padding-block: 1.5rem !important; }
}

/* 10 · Store badges: always the same size, side by side on one line (house rule). */
.about-page .count-panel__stores { display: flex !important; flex-wrap: nowrap !important; gap: 0.75rem !important; justify-content: flex-start; }
.about-page .count-panel__stores .store-badge { flex: 0 0 11rem !important; width: 11rem !important; height: 3.25rem !important; box-sizing: border-box; justify-content: flex-start; padding-inline: 0.9rem !important; margin: 0 !important; }

@media (max-width: 40rem) {
  .about-page .study-band__img { aspect-ratio: 1 / 1; object-fit: cover; object-position: 50% 50%; }
  .about-page .scenario-card--icon { min-height: 0 !important; }
  .about-page .count-panel__head { font-size: 1.875rem; }
  .about-page .count-panel--photo .count-panel__line { font-size: 1.375rem !important; }
  .about-page .count-panel--photo .count-panel__text,
  .about-page .count-panel--photo p { text-align: center !important; }
  .about-page .count-panel__stores { justify-content: center; }
  .about-page .count-panel__stores .store-badge { flex-basis: 9.75rem !important; width: 9.75rem !important; padding-inline: 0.7rem !important; }
}

/* 9 · Every section headline and text block spans the content width and lines up
   with its section. The hero and #app keep their own headline. */
.about-page section:not(.about-hero):not(#app) .h-1 {
  max-width: none !important; width: 100%;
  font-size: 2.5rem !important; line-height: 1.1 !important; letter-spacing: -0.03em;
  text-wrap: balance;
}
.about-page section:not(.about-hero):not(#app) .section-heading-center,
.about-page section:not(.about-hero):not(#app) .center { max-width: none !important; }
.about-page #mechanics .matrix-subhead,
.about-page #features .features-subhead { max-width: none !important; text-wrap: balance; }
.about-page .story-coda { max-width: none !important; }
.about-page .story-coda__lead,
.about-page .story-coda__turn { max-width: none !important; width: 100%; text-wrap: balance; }
.about-page .manifesto-headline ~ *,
.about-page section:last-of-type .prose { max-width: none !important; }
.about-page section:last-of-type p { max-width: none !important; text-align: center !important; text-wrap: balance; }
.about-page .statement--line,
.about-page .cta-card__line { max-width: none !important; }
@media (max-width: 40rem) {
  .about-page section:not(.about-hero):not(#app) .h-1 { font-size: 1.875rem !important; }
}

/* 11 · App features ticks: the three lines in one row. */
.about-page .checks--row { display: grid !important; grid-template-columns: repeat(3, auto); justify-content: space-between; gap: 1rem !important; max-width: none !important; margin: 2.5rem 0 0 !important; padding: 0; }
.about-page .checks--row .check { margin: 0 !important; height: 100%; box-sizing: border-box; align-items: center; white-space: nowrap; }
@media (max-width: 75rem) { .about-page .checks--row .check { white-space: normal; } }
@media (max-width: 56rem) { .about-page .checks--row { grid-template-columns: 1fr; } }

/* 12 · Closing manifesto: headline in two balanced lines, the payoff one level down,
   then the belief as one short body pair. */
.about-page .manifesto-block { max-width: none !important; }
.about-page .manifesto-headline span { display: block; }
.about-page .manifesto-subprose { max-width: none !important; margin-top: 1rem !important; }
.about-page .manifesto-subprose p { margin: 0 !important; }
.about-page .manifesto-pay {
  font-family: "Gabarito", sans-serif !important; font-weight: 700 !important;
  font-size: 1.75rem !important; line-height: 1.25 !important; color: #1A1A1A !important;
}
.about-page .manifesto-subprose p.manifesto-body { margin-top: 1.5rem !important; font-size: 1.125rem !important; line-height: 1.6 !important; color: #3e4741 !important; }
.about-page section:last-of-type .statement--line { margin-top: 3rem !important; }
@media (max-width: 40rem) {
  .about-page .manifesto-headline span { display: inline; }
  .about-page .manifesto-pay { font-size: 1.375rem !important; }
  .about-page .manifesto-body { font-size: 1rem !important; }
  .about-page .manifesto-body br { display: none; }
}

/* 15 · #app: sides swapped on her explicit request (2026-10-26) — text left, phone
   and floating cards right on desktop; mobile order unchanged. */
@media (min-width: 56rem) {
  .about-page #app .app-stage-wrapper { order: 2; }
  .about-page #app .app-narrative { order: 1; }
}
.about-page #app #app-title { margin-bottom: 1.25rem !important; }