/* Trinity pages' shell — shared by / (#trinity) and /trinity/ (round 6, 2026-09-24). Loaded
   after soft.css on both routes; every value is a soft.css / styles.css token (--surface,
   --ink, --e-*, --r-*, --fs-*, --d-*, --font-*). The phone itself (.tp-*) is drawn by
   trinity-film.css. 2026-10-19 (lane Z): the retired stage's .ts-* / .trinity-stage rules and
   the tokens only they read were deleted; nothing on either page matched them. */

:root {
  /* The pearl's white top-left rims; in dark they drop to a faint hairline instead of drawing
     white outlines. */
  --ts-rim: light-dark(rgb(255 255 255 / 65%), rgb(242 243 247 / 7%));
  --ts-rim-60: light-dark(rgb(255 255 255 / 60%), rgb(242 243 247 / 7%));
}

/* ─── The homepage chapter (#trinity) ──────────────────────────────────────────── */
.trinity-chapter__stage {
  margin-top: clamp(36px, 4vw, 56px);
}
.trinity-chapter__more {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px 24px;
  margin: 28px 0 0;
}

/* ─── /trinity/ ────────────────────────────────────────────────────────────────── */
.trinity-page main [id] {
  scroll-margin-top: 112px;
}
.trinity-page .pages-intro {
  padding-bottom: 8px;
}
.trinity-intro__id {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  margin: 0 0 20px;
}
.trinity-intro {
  display: grid;
  gap: 32px var(--grid-gap);
  align-items: start;
}
.trinity-intro__copy {
  min-width: 0;
}
.trinity-intro__copy .pages-lede {
  max-width: 48ch;
}
.trinity-intro__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0 0 24px;
}
.trinity-intro__result {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  padding: 20px;
  border-radius: var(--r-28);
  background: var(--surface);
  box-shadow: var(--e-inset-lg);
}

@media (min-width: 1024px) {
  .trinity-intro {
    grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  }
  /* Fix round 3: on a short desktop screen the three-line h1 pushed both hero actions
     under the fold (1280x720). The h1's display size also scales with the viewport's
     height, so the h1, the lede and both actions fit the first view at 1280x720 and
     1366x768; from 900px tall it is the plain --d-h1 (96px), and phones never reach
     this block. */
  .trinity-intro .pages-title {
    --d-h1: clamp(56px, min(7.4vw, 10.7vh), 96px);
    --d-h1: clamp(56px, min(7.4vw, 10.7svh), 96px);
  }
}
@media (min-width: 761px) and (max-width: 1023px) {
  .trinity-intro__result {
    max-width: 640px;
  }
}

.trinity-page .pages-section {
  padding: 80px 0 0;
}
.trinity-page .pages-section:last-of-type {
  padding-bottom: 96px;
}
.trinity-page .pages-section-title {
  margin-bottom: 20px;
}
.trinity-section-lede {
  max-width: 60ch;
  margin: 0 0 32px;
  color: var(--ink-secondary);
  font-size: var(--fs-20);
  line-height: var(--lh-prose);
  text-wrap: pretty;
}

.trinity-status {
  margin: 8px 0 0;
  padding: 10px 14px;
  border-radius: var(--r-16);
  background: var(--surface);
  box-shadow: var(--e-inset-sm);
  color: var(--ink-secondary);
  font: 600 var(--fs-13) / var(--lh-ui) var(--font-body);
  width: fit-content;
  max-width: 100%;
}
.trinity-status > b {
  color: var(--ink);
}
/* How it works: numbered, Barlow numerals */
.trinity-how {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--border);
  counter-reset: how;
}
.trinity-how > li {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 8px 16px;
  padding: 22px 0;
  border-bottom: 1px solid var(--border);
  counter-increment: how;
}
.trinity-how > li::before {
  content: counter(how, decimal-leading-zero);
  grid-row: span 2;
  color: var(--ink-secondary);
  font: 700 var(--d-card) / 1 var(--font-display);
}
.trinity-how > li > h3 {
  margin: 0;
  font: 700 var(--d-card) / var(--d-card-lh) var(--font-display);
  letter-spacing: var(--d-card-ls);
}
.trinity-how > li > p {
  max-width: 62ch;
  margin: 0;
  color: var(--ink-secondary);
  font-size: var(--fs-17);
  line-height: var(--lh-prose);
  text-wrap: pretty;
}
@media (min-width: 1024px) {
  .trinity-how > li {
    grid-template-columns: 56px minmax(0, 5fr) minmax(0, 7fr);
    align-items: baseline;
  }
  .trinity-how > li::before {
    grid-row: auto;
  }
}

.trinity-page .faq-answer > p + p {
  margin-top: 12px;
}

/* FAQ reuses pages.css's .faq-list / .faq-item / .disclosure */
.trinity-page .faq-list {
  max-width: 760px;
}
/* Close: .site-close, one component with /app/'s; its rules live in pages-art.css (fix
   round 3), which both routes load. */
@media (max-width: 760px) {
  .trinity-page .pages-section {
    padding-top: 56px;
  }
}

.trinity-intro__result {
  gap: 16px;
  padding: 24px;
}

/* The supporting chapters use their existing shells: two sides of a request, a
   connected process, a launch/planned ledger, and the team's single pass. */
.trinity-page .pages-section {
  padding-top: clamp(72px, 8vw, 112px);
}

.trinity-status {
  padding: 12px 16px;
  margin-top: 20px;
  line-height: var(--lh-prose);
}

.trinity-how {
  border-top: 0;
}
.trinity-how > li {
  position: relative;
  padding: 28px 0;
  gap: 12px 24px;
}
.trinity-how > li::before {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: var(--r-16);
  background: var(--surface);
  color: var(--trinity-accent-ink);
  box-shadow: var(--e-raised-sm);
}
.trinity-how > li:last-child {
  border-bottom: 0;
}
.trinity-how > li:last-child > h3 {
  color: var(--trinity-accent-ink);
}
.trinity-how + .trinity-status {
  max-width: 100%;
  padding: 20px 24px;
  border-radius: var(--r-16);
  font-weight: 400;
}

.trinity-page .faq-list {
  max-width: none;
}
.trinity-page .faq-item {
  border-bottom-color: var(--border);
}
.trinity-page .faq-item > summary {
  padding-block: 22px;
  font-size: var(--fs-17);
}
.trinity-page .faq-item[open] > summary {
  color: var(--trinity-accent-ink);
}
.trinity-page .faq-answer {
  max-width: 76ch;
  padding-bottom: 24px;
}
@media (min-width: 1024px) {
  .trinity-intro__result {
    margin-top: 10px;
  }
  .trinity-how > li {
    grid-template-columns: 56px minmax(0, 4fr) minmax(0, 7fr);
  }
  #faq {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    gap: 24px var(--grid-gap);
    align-items: start;
  }
  #faq > h2 {
    margin-top: 16px;
  }
}
@media (max-width: 760px) {
  .trinity-intro__result {
    padding: 18px;
    gap: 14px;
  }

  .trinity-how > li {
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 10px 16px;
  }
  .trinity-how > li::before {
    grid-row: span 2;
  }
  .trinity-how > li > p {
    grid-column: 2;
  }
  .trinity-how + .trinity-status {
    padding: 18px;
  }

  .trinity-page .faq-item > summary {
    padding-block: 20px;
  }
  .trinity-page .pages-section {
    padding-top: 64px;
  }
}

/* How it works: three numbered steps (Ask. Review. Confirm.) sit side by side from 1024px.
   Whitespace separates the cards; phones and tablets keep the stacked list. */
@media (min-width: 1024px) {
  .trinity-page .trinity-how {
    position: relative;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--grid-gap);
    padding-top: 0;
  }
  .trinity-page .trinity-how > li {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 28px 24px 26px;
    border: 1px solid var(--ts-rim-60);
    border-radius: var(--r-28);
    background: var(--surface);
    box-shadow: var(--e-raised-sm);
  }
  .trinity-page .trinity-how > li:last-child {
    border-bottom: 1px solid var(--ts-rim-60);
    background: color-mix(in srgb, var(--trinity-accent) 5%, var(--surface));
  }
  .trinity-page .trinity-how > li::before {
    position: relative;
    z-index: 1;
    margin-bottom: 4px;
  }
  .trinity-page .trinity-how > li > h3 {
    font-size: var(--d-card);
  }
  .trinity-page .trinity-how > li > p {
    font-size: var(--fs-15);
  }
}

/* Route-only layout: retain all prose, disclose secondary copy, shorten vertical gaps. */
.trinity-page .pages-section {
  padding-block: clamp(20px, 3svh, 32px) 0;
}
.trinity-page .pages-section:last-of-type {
  padding-bottom: 24px;
}
.trinity-page .pages-section-title {
  margin: 0 0 14px;
  font-size: clamp(32px, 5svh, 48px);
}
.trinity-page .trinity-section-lede {
  font-size: var(--fs-17);
  margin-bottom: 16px;
  max-width: 76ch;
}

.trinity-page details > summary {
  cursor: pointer;
}

.trinity-page .pages-intro {
  padding-top: 24px;
  padding-bottom: 0;
  gap: 24px;
}
.trinity-page .trinity-intro__id {
  margin-bottom: 12px;
}
.trinity-page .trinity-intro .pages-title {
  margin-bottom: 16px;
}
.trinity-page .trinity-intro .pages-lede {
  margin-bottom: 0;
  font-size: var(--fs-20);
}

.trinity-page .trinity-intro__actions {
  margin-bottom: 8px;
}

.trinity-page .trinity-intro__result {
  padding: 16px;
  gap: 8px;
}

.trinity-page .trinity-status {
  margin-top: 12px;
  padding: 10px 12px;
  font-size: var(--fs-13);
}
.trinity-page .trinity-how > li {
  padding: 18px 16px;
  gap: 10px;
}
.trinity-page .trinity-how > li > h3 {
  font-size: var(--fs-20);
}
.trinity-page .trinity-how + .trinity-status {
  padding: 12px;
}

@media (max-width: 760px) {
  .trinity-page .pages-intro {
    gap: 12px;
    padding-top: 12px;
  }
  .trinity-page .trinity-intro__id {
    margin-bottom: 8px;
  }
  .trinity-page .trinity-intro .pages-title {
    font-size: clamp(44px, 7svh, 56px);
    margin-bottom: 10px;
  }
  .trinity-page .trinity-intro .pages-lede {
    font-size: var(--fs-17);
  }

  .trinity-page .trinity-intro__actions {
    gap: 8px;
  }
  .trinity-page .trinity-intro__result {
    padding: 10px 12px;
    margin-top: 0;
  }

  .trinity-page .trinity-how {
    margin-top: 0;
  }
  .trinity-page .trinity-how > li {
    display: flex;
    flex-direction: column;
    padding: 16px;
    border-radius: var(--r-16);
    background: var(--surface);
    gap: 12px;
  }
  .trinity-page .trinity-how > li > p {
    font-size: var(--fs-15);
  }
}
/* Height and type refinement after the first measured pass. */
.trinity-page .pages-section-title {
  font-size: var(--d-price);
  line-height: var(--d-price-lh);
}

.trinity-page .trinity-how > li > h3 {
  line-height: var(--lh-ui);
}

@media (max-height: 820px) and (min-width: 1024px) {
  .trinity-page .trinity-intro__result {
    gap: 8px;
  }
}

@media (max-width: 760px) {
  .trinity-page .trinity-intro .pages-title {
    font-size: var(--d-h1);
  }
}

/* Native closed disclosures have no painted descendants. Explicit display keeps
   geometry readers from treating their retained layout boxes as visible controls. */
.trinity-page details:not([open]) > :not(summary) {
  display: none;
}

/* Lane SP (2026-10-20): /trinity/ on the one rhythm (soft.css spacing scale). Sections are
   spaced by margin; every heading, lede and block gap is a scale token. */
.trinity-page .pages-intro {
  row-gap: var(--space-block);
  padding-top: var(--space-top);
  padding-bottom: 0;
}
.trinity-page .trinity-intro .pages-title {
  margin-bottom: var(--space-head);
}
.trinity-page .trinity-intro .pages-lede {
  margin-bottom: var(--space-lede);
}
.trinity-page .trinity-intro__actions {
  margin-bottom: 0;
}
.trinity-page .pages-section,
.trinity-page .pages-section:last-of-type {
  margin-top: var(--space-section);
  padding-block: 0;
}
.trinity-page .pages-section-title {
  margin: 0 0 var(--space-head);
}
.trinity-page .trinity-section-lede {
  margin-bottom: var(--space-lede);
}
.trinity-page .trinity-status {
  margin-top: var(--space-caption);
}

/* 2026-10-19 refresh: "In the app". The app's own Trinity screen beside the scripted stage.
   Copy on columns 1-6, the screen on columns 7-12 (data-grid-col="7"); one column on phones,
   the screen kept small enough that the section stays within about one phone screen. */
.trinity-inapp {
  row-gap: var(--space-lede);
  align-items: center;
}
.trinity-inapp__copy,
.trinity-capture {
  grid-column: 1 / -1;
  min-width: 0;
}
.trinity-page .trinity-inapp .trinity-section-lede {
  margin-bottom: 0;
}

.trinity-capture {
  display: grid;
  justify-items: center;
  gap: 16px;
  margin: 0;
}
/* The preview is the top 610pt of the screen with the device's own rounded top corners
   (transparent outside them); the frame clips the flat bottom edge to the same radius. */
.trinity-capture__screen {
  width: min(180px, 50vw);
  overflow: hidden;
  border-radius: var(--r-28);
  box-shadow: var(--e-raised-lg);
}
.trinity-capture__screen > img {
  display: block;
  width: 100%;
  height: auto;
}
@media (min-width: 1024px) {
  .trinity-inapp__copy {
    grid-column: 1 / span 6;
  }
  .trinity-capture {
    grid-column: 7 / -1;
  }
  .trinity-capture__screen {
    width: 300px;
  }
}
/* Tablets stack copy over the screen: beside it, the label pill had no room at 150% text. */
@media (min-width: 761px) and (max-width: 1023px) {
  .trinity-capture__screen {
    width: 220px;
  }
}

/* 2026-10-19 rebuild: The hero's real capture (/trinity/), in place of the old scripted result folio. */
.trinity-intro__capture {
  display: grid;
  justify-items: center;
  gap: 12px;
  margin: 0;
}
.trinity-intro__capture > img {
  display: block;
  width: 200px;
  height: auto;
  border-radius: var(--r-28);
  box-shadow: var(--e-raised-lg);
}
.trinity-intro__capture figcaption {
  display: grid;
  justify-items: center;
  gap: 8px;
  color: var(--ink-secondary);
  font: 400 var(--fs-15) / var(--lh-ui) var(--font-body);
  text-align: center;
}
.trinity-intro__capture figcaption p {
  margin: 0;
}
@media (min-width: 1024px) {
  .trinity-intro__capture > img {
    width: 240px;
  }
}

@media (max-width: 760px) {
  .trinity-intro__capture {
    grid-template-columns: 128px minmax(0, 1fr);
    align-items: center;
    justify-items: start;
    gap: 16px;
  }
  .trinity-intro__capture > img {
    width: 128px;
    border-radius: var(--r-16);
  }
  .trinity-intro__capture figcaption {
    display: contents;
  }
  .trinity-intro__capture figcaption > p:first-child {
    text-align: left;
  }
}

/* Copy diet (2026-10-20): the three steps are single words, set as display type. */
.trinity-page .trinity-how > li > h3 {
  font: 700 var(--d-card) / var(--d-card-lh) var(--font-display);
  letter-spacing: var(--d-card-ls);
}

/* Copy diet (2026-10-20): what Trinity can do, six short items in a quiet grid. */
.trinity-can {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 var(--grid-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}
.trinity-can > li {
  position: relative;
  padding: 16px 0 16px 22px;
  border-top: 1px solid var(--border);
  color: var(--ink);
  font-size: var(--fs-17);
  font-weight: 600;
  line-height: var(--lh-ui);
  text-wrap: pretty;
}
.trinity-can > li::before {
  content: '';
  position: absolute;
  top: calc(16px + 0.5em);
  left: 2px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--trinity-accent);
}
@media (max-width: 1023px) {
  .trinity-can {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 760px) {
  .trinity-can {
    grid-template-columns: minmax(0, 1fr);
  }
  .trinity-can > li {
    padding-block: 12px;
    font-size: var(--fs-15);
  }
  .trinity-can > li::before {
    top: calc(12px + 0.5em);
  }
}