/* WB-6 · The scripted Trinity phone (2026-10-19 rebuild), shared by the homepage film
   (#trinity), the /trinity/ stage (#stage) and the /app/ excerpt (#trinity). The markup it
   styles is drawn by src/trinity-stage.js from src/trinity-scenarios.js.

   Two layers:
   1. Site chrome (.tp-*, outside .tp-screen): the guide with its step markers, status,
      controls (no truth tag since 2026-10-19), and the dark staged panel that holds the phone. Site tokens
      only (light-dark() pairs), the site's type and radius scales, 44px targets.
   2. The phone (.tp-screen, data-lint-exempt): the mobile app's own Trinity screens at the
      app's own metrics, in points, on a 402×874 iPhone 17 Pro screen, scaled as one picture
      by --tp-s (set from the panel's size by the script). Colours are the app's light
      appearance tokens (packages/ui/src/tokens/color.ts), fixed, because the phone shows the
      app as the real captures in public/previews/app-real/ do; they are product content, not
      site palette. Type: the app's iOS text styles (body 17/22, subheadline 15/20 semibold,
      caption1 12/16, headline 17 semibold) in the system face, and Barlow Condensed Bold for
      the app's display type (the Trinity wordmark at 24, the review head at 20). */

/* ─── 1. Site chrome ─────────────────────────────────────────────────────────────── */

.tp {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  min-width: 0;
}
.tp-side {
  display: contents;
}
.tp-intro {
  order: 1;
  display: grid;
  gap: 12px;
  min-width: 0;
}
.tp-intro > * {
  margin: 0;
}
/* The stage (2026-10-19, owner note): no panel. The phone stands on the page itself, with a
   faint glow of the brand ramp behind it (orange, red, purple; static, very low opacity) and a
   soft floor shadow under it, centred in its column with equal room above and below. */
.tp-stage {
  --tp-glow-orange: light-dark(rgb(255 124 42 / 11%), rgb(255 124 42 / 15%));
  --tp-glow-red: light-dark(rgb(255 42 67 / 10%), rgb(255 42 67 / 17%));
  --tp-glow-purple: light-dark(rgb(116 42 255 / 10%), rgb(116 42 255 / 22%));
  --tp-floor: light-dark(rgb(6 8 7 / 30%), rgb(0 0 0 / 60%));
  --tp-pad-block: 28px;
  order: 2;
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: clamp(460px, 86svh, 660px);
  padding: var(--tp-pad-block) 12px;
  isolation: isolate;
}
.tp-stage::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(34% 30% at 40% 38%, var(--tp-glow-purple), transparent 70%),
    radial-gradient(34% 30% at 60% 46%, var(--tp-glow-red), transparent 70%),
    radial-gradient(30% 26% at 48% 60%, var(--tp-glow-orange), transparent 70%);
  pointer-events: none;
}
.tp-stage[hidden] {
  display: none;
}
.tp-guide {
  order: 3;
  min-width: 0;
}

/* No JavaScript: the walkthrough is text. */
.tp-static {
  display: grid;
  gap: 8px;
  margin: 0;
  padding-left: 1.4em;
  color: var(--ink-secondary);
  font: 400 var(--fs-15) / var(--lh-prose) var(--font-body);
}
.tp-static b {
  color: var(--ink);
  font-weight: 600;
}

.tp-ui,
.tp-panel {
  display: grid;
  gap: 12px;
  min-width: 0;
}
.tp-who {
  margin: 0;
  color: var(--ink-secondary);
  font: 400 var(--fs-13) / var(--lh-ui) var(--font-body);
}

/* Audience tabs (/trinity/) */
.tp-tabs {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  width: fit-content;
  max-width: 100%;
  padding: 4px;
  border-radius: var(--r-pill);
  background: var(--surface);
  box-shadow: var(--e-inset-sm);
}
.tp-tabs [role='tab'] {
  min-height: 44px;
  padding: 0 18px;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--ink-secondary);
  font: 600 var(--fs-15) / var(--lh-ui) var(--font-body);
  cursor: pointer;
}
.tp-tabs [role='tab'][aria-selected='true'] {
  background: var(--surface);
  box-shadow: var(--e-raised-sm);
  color: var(--ink);
}

/* Step markers: numbered pills; the current one is raised, finished ones carry a tick. */
.tp-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.tp-step {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  min-width: 44px;
  padding: 0 14px 0 8px;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--ink-secondary);
  font: 600 var(--fs-13) / var(--lh-ui) var(--font-body);
  cursor: pointer;
}
.tp-step__n {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: var(--e-inset-sm);
  font-variant-numeric: tabular-nums;
}
.tp-step.is-past .tp-step__n {
  background: var(--ink);
  box-shadow: none;
  color: var(--surface);
}
.tp-step[aria-current='step'] {
  background: var(--surface);
  box-shadow: var(--e-raised-sm);
  color: var(--ink);
}
.tp-step[aria-current='step'] .tp-step__n {
  background: var(--brand);
  box-shadow: none;
  color: var(--on-dark);
}
.tp-step:hover {
  color: var(--ink);
}

.tp-status {
  min-height: calc(var(--fs-15) * var(--lh-prose) * 2);
  margin: 0;
  color: var(--ink);
  font: 400 var(--fs-15) / var(--lh-prose) var(--font-body);
  text-wrap: pretty;
}
.tp-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
}
.tp-play {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px 0 14px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--surface);
  box-shadow: var(--e-raised-sm);
  color: var(--ink);
  font: 600 var(--fs-15) / var(--lh-ui) var(--font-body);
  cursor: pointer;
}
.tp-play::before {
  content: '';
  width: 16px;
  height: 16px;
  background: currentColor;
  -webkit-mask: url('/icons/pause.svg') center / 16px 16px no-repeat;
  mask: url('/icons/pause.svg') center / 16px 16px no-repeat;
}
.tp-play:is([data-mode='manual'], [data-mode='paused'])::before {
  -webkit-mask-image: url('/icons/play.svg');
  mask-image: url('/icons/play.svg');
}
.tp-play[data-mode='done']::before {
  -webkit-mask-image: url('/icons/rotate-ccw.svg');
  mask-image: url('/icons/rotate-ccw.svg');
}
.tp-play[hidden] {
  display: none;
}
.tp-play:active {
  box-shadow: var(--e-inset-sm);
}
.tp-text {
  min-width: 0;
  color: var(--ink-secondary);
  font: 400 var(--fs-13) / var(--lh-ui) var(--font-body);
}
.tp-text > summary {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ink);
  font: 600 var(--fs-13) / var(--lh-ui) var(--font-body);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.tp-text__list {
  display: grid;
  gap: 8px;
  margin: 4px 0 0;
  padding-left: 1.4em;
  font: 400 var(--fs-13) / var(--lh-prose) var(--font-body);
}
.tp-text__list b {
  color: var(--ink);
}
.tp-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* The phone in the panel, scaled as one picture. */
.tp-device {
  --tp-s: 0.6;
  position: relative;
  width: calc(424px * var(--tp-s));
  height: calc(896px * var(--tp-s));
  border-radius: calc(68px * var(--tp-s));
  outline-offset: 6px;
}
/* Floor shadow: a soft ellipse the phone stands on, inside the stage's bottom room. */
.tp-device::after {
  content: '';
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: calc(-0.5 * var(--tp-pad-block, 24px));
  height: calc(var(--tp-pad-block, 24px) * 0.9);
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--tp-floor), transparent);
  z-index: -1;
  filter: blur(6px);
  pointer-events: none;
}
.tp-scale {
  position: absolute;
  inset: 0 auto auto 0;
  width: 424px;
  height: 896px;
  transform: scale(var(--tp-s));
  transform-origin: 0 0;
}
.tp-bezel {
  width: 424px;
  height: 896px;
  padding: 11px;
  border-radius: 68px;
  background: #0b0c10;
  box-shadow:
    inset 0 0 0 2px #3a3c43,
    inset 0 0 0 5px #0b0c10,
    0 40px 80px -30px rgb(0 0 0 / 80%),
    0 0 0 1px rgb(255 255 255 / 6%);
}

/* ─── 2. The phone ──────────────────────────────────────────────────────────────── */

.tp-screen {
  --a-ink: #0d0f14;
  --a-secondary: #6e7180;
  --a-tertiary: #9d9d9d;
  --a-page: #ffffff;
  --a-subtle: #f5f6fa;
  --a-muted: #f3f3f4;
  --a-border: #cccccc;
  --a-accent: #0060fc;
  --a-primary: #ff2a43;
  --a-success: #56b977;
  --a-backdrop: #cccccc;
  --a-sys: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, sans-serif;
  --a-display: 'Barlow Condensed', 'Barlow Condensed Fallback', sans-serif;
  position: relative;
  width: 402px;
  height: 874px;
  overflow: hidden;
  border-radius: 57px;
  /* overflow alone does not clip the frosted sheet (backdrop-filter) to the rounded corners. */
  clip-path: inset(0 round 57px);
  background: var(--a-page);
  color: var(--a-ink);
  font: 400 17px/22px var(--a-sys);
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  text-align: left;
  user-select: none;
  /* A picture of the app at the app's own metrics: the page's text-size adjustment does not
     reflow it (the readable copy is the status and "Read it as text" outside the phone). */
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}
.tp-screen *,
.tp-screen *::before,
.tp-screen *::after {
  box-sizing: border-box;
}
.tp-screen :is(p, h3, h4, ul, li) {
  margin: 0;
  padding: 0;
  list-style: none;
}
.tp-screen button {
  margin: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-align: inherit;
  cursor: pointer;
}
.tp-ic {
  display: block;
  flex: none;
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.tp-ic-fill {
  fill: var(--a-page);
}
.tp-layers {
  position: absolute;
  inset: 0;
}

/* Status bar and home indicator, over everything */
.tp-statusbar {
  position: absolute;
  inset: 0 0 auto;
  z-index: 20;
  height: 54px;
  pointer-events: none;
}
.tp-time {
  position: absolute;
  top: 18px;
  left: 50px;
  font: 600 17px/22px var(--a-sys);
  letter-spacing: -0.02em;
}
.tp-island {
  position: absolute;
  top: 11px;
  left: 138px;
  width: 126px;
  height: 37px;
  border-radius: 20px;
  background: #000;
}
.tp-sys {
  position: absolute;
  top: 22px;
  right: 34px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.tp-sys svg {
  display: block;
  fill: var(--a-ink);
}
.tp-signal {
  width: 18px;
  height: 12px;
}
.tp-wifi {
  width: 16px;
  height: 12px;
}
.tp-battery {
  width: 27px;
  height: 13px;
}
.tp-batt-rim {
  fill: none;
  stroke: var(--a-ink);
  stroke-opacity: 0.4;
}
.tp-homebar {
  position: absolute;
  bottom: 8px;
  left: 134px;
  z-index: 20;
  width: 134px;
  height: 5px;
  border-radius: 3px;
  background: var(--a-ink);
  pointer-events: none;
}

/* Chat home, as the real Chat capture draws it */
.tp-base {
  position: absolute;
  inset: 0;
  background: var(--a-page);
}
.tp-largetitle {
  position: absolute;
  top: 60px;
  left: 16px;
  margin: 0;
  font: 700 34px/41px var(--a-sys);
  letter-spacing: 0.01em;
}
.tp-pearl {
  position: absolute;
  top: 61px;
  left: 252px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  width: 133px;
  height: 44px;
  padding: 0 8px;
  border-radius: 22px;
  background: var(--a-page);
  box-shadow: 0 6px 24px rgb(0 0 0 / 8%);
}
.tp-search {
  position: absolute;
  top: 119px;
  left: 17px;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 368px;
  height: 41px;
  padding: 0 14px;
  border-radius: 21px;
  background: var(--a-muted);
  color: #8a8a8e;
  font-size: 17px;
}
.tp-search .tp-ic {
  color: var(--a-ink);
  width: 21px;
  height: 21px;
}
.tp-section {
  position: absolute;
  top: 178px;
  left: 16px;
  font: 700 20px/22px var(--a-display);
  letter-spacing: 0.02em;
}
.tp-groups {
  position: absolute;
  top: 212px;
  left: 15px;
  display: flex;
  gap: 16px;
}
.tp-group {
  display: grid;
  justify-items: center;
  gap: 6px;
  width: 64px;
}
.tp-group small {
  color: var(--a-ink);
  font-size: 13px;
  line-height: 16px;
  white-space: nowrap;
}
.tp-group:first-child small {
  color: var(--a-tertiary);
}
.tp-group__create,
.tp-group__team {
  position: relative;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
}
.tp-group__create {
  border: 2px solid var(--a-border);
  color: var(--a-tertiary);
}
.tp-group__create .tp-ic {
  width: 26px;
  height: 26px;
  stroke-width: 1.4;
}
.tp-group__team,
.tp-avatar.tp-avatar--group {
  background: var(--a-ink);
  color: var(--a-page);
}
.tp-group__team .tp-ic,
.tp-avatar.tp-avatar--group .tp-ic {
  width: 24px;
  height: 24px;
  fill: var(--a-page);
  stroke: var(--a-page);
  stroke-width: 1.2;
}
.tp-dot {
  position: absolute;
  top: 1px;
  right: 1px;
  width: 11px;
  height: 11px;
  border: 2px solid var(--a-page);
  border-radius: 50%;
  background: var(--a-primary);
}
.tp-rows {
  position: absolute;
  top: 296px;
  left: 16px;
  right: 16px;
}
.tp-row {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 61px;
}
.tp-avatar {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  background: #eeeeef;
  color: #8a8a8e;
  font: 500 17px/1 var(--a-sys);
}
.tp-row__text {
  display: grid;
  flex: 1;
  min-width: 0;
  align-self: stretch;
  align-content: center;
  border-bottom: 0.5px solid var(--a-border);
}
.tp-row:last-child .tp-row__text {
  border-bottom: 0;
}
.tp-row__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.tp-row__top b {
  overflow: hidden;
  font: 600 19px/24px var(--a-sys);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tp-row__when {
  flex: none;
  color: var(--a-ink);
  font-size: 15px;
}
.tp-row__sub {
  overflow: hidden;
  color: var(--a-ink);
  font-size: 16px;
  line-height: 21px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tp-tabbar {
  position: absolute;
  top: 791px;
  left: 21px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: center;
  width: 290px;
  height: 62px;
  padding: 0 4px;
  border-radius: 31px;
  background: var(--a-page);
  box-shadow:
    0 8px 34px rgb(0 0 0 / 12%),
    0 0 0 0.5px rgb(0 0 0 / 4%);
}
.tp-tab {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 1px;
  height: 54px;
  align-content: center;
  border-radius: 27px;
  color: var(--a-ink);
}
.tp-tab small {
  font: 600 11px/13px var(--a-sys);
  letter-spacing: 0;
}
.tp-tab .tp-ic {
  width: 27px;
  height: 27px;
}
.tp-tab.is-on {
  background: #ededed;
  color: #f6213a;
}
.tp-badge {
  position: absolute;
  top: 2px;
  left: calc(50% + 6px);
  display: grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: #f5333f;
  color: #fff;
  font: 600 12px/1 var(--a-sys);
}
.tp-launcher {
  position: absolute;
  top: 791px;
  left: 319px;
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: var(--a-page);
  box-shadow:
    0 8px 34px rgb(0 0 0 / 12%),
    0 0 0 0.5px rgb(0 0 0 / 4%);
}
.tp-launcher img {
  display: block;
  width: 17px;
  height: auto;
}

/* The Trinity sheet at its peek detent (0.77 of the screen), frosted over Chat */
.tp-sheet {
  position: absolute;
  top: 201px;
  left: 8px;
  right: 8px;
  bottom: 8px;
  z-index: 5;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 46px 46px 50px 50px;
  background: rgb(255 255 255 / 84%);
  -webkit-backdrop-filter: blur(22px) saturate(1.4);
  backdrop-filter: blur(22px) saturate(1.4);
  box-shadow:
    0 -2px 40px rgb(0 0 0 / 14%),
    0 0 0 0.5px rgb(0 0 0 / 6%);
}
.tp-grabber {
  position: absolute;
  top: 6px;
  left: 50%;
  z-index: 2;
  width: 36px;
  height: 5px;
  margin-left: -18px;
  border-radius: 3px;
  background: #c6c6c6;
}
.tp-head {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 89px;
  padding: 22px 18px 12px 24px;
  border-bottom: 0.5px solid var(--a-border);
}
.tp-head__text {
  flex: 1;
  min-width: 0;
}
/* AI-28's wordmark: Barlow Condensed Bold 24 painted with §6.4's ramp (orange, brand red,
   the 58% red/purple mix, purple) at its 20° lean, resting cool-to-warm as the board draws
   it; it drifts while the preview plays, as the app's does, and stops with the preview. */
.tp-wordmark {
  display: inline-block;
  font: 700 24px/29px var(--a-display);
  letter-spacing: 0;
}
.tp-wordmark > span,
.tp-sig-word {
  background: linear-gradient(
      110deg,
      #742aff 0%,
      color-mix(in srgb, #ff2a43 58%, #742aff) 14%,
      #ff2a43 31%,
      #ff7c2a 50%,
      #ff2a43 69%,
      color-mix(in srgb, #ff2a43 58%, #742aff) 86%,
      #742aff 100%
    )
    0 0 / 200% 100% repeat-x;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.tp-context {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
  color: var(--a-tertiary);
  font-size: 12px;
  line-height: 16px;
}
.tp-context .tp-ic {
  width: 13px;
  height: 13px;
  stroke-width: 2.4;
}
.tp-disc {
  display: grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgb(120 120 128 / 12%);
  color: #5d5f68;
}
.tp-disc .tp-ic {
  width: 20px;
  height: 20px;
  stroke-width: 2;
}
.tp-transcript {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 0;
  overflow: hidden;
}
.tp-transcript-body {
  display: flex;
  flex-direction: column;
  padding: 18px 0 12px;
}
.tp-transcript-body.is-empty {
  align-self: stretch;
  margin-bottom: auto;
}
.tp-transcript:has(.is-empty) {
  justify-content: flex-start;
}
.tp-prompt {
  margin: 0 16px 12px !important;
  font: 700 20px/24px var(--a-display);
  letter-spacing: 0.01em;
}
.tp-disclosure {
  margin: 0 16px 12px !important;
  color: var(--a-secondary);
  font-size: 12px;
  line-height: 16px;
}
.tp-starters {
  display: grid;
  gap: 8px;
  margin: 0 16px;
}
.tp-starter {
  display: block;
  width: 100%;
  padding: 11px 13px;
  border: 0.5px solid var(--a-border) !important;
  border-radius: 9px;
  background: var(--a-subtle) !important;
  color: var(--a-ink);
  font: 600 15px/20px var(--a-sys) !important;
}
.tp-q {
  display: flex;
  justify-content: flex-end;
  margin: 0 16px 17px;
}
.tp-q p {
  max-width: 82%;
  padding: 10px 15px;
  border-radius: 20px;
  background: var(--a-ink);
  color: var(--a-page);
  font-size: 17px;
  line-height: 22px;
}
.tp-tool {
  display: inline-flex !important;
  align-items: center;
  align-self: flex-start;
  gap: 9px;
  margin: 0 16px 13px !important;
  padding: 8px 11px !important;
  border-radius: 999px;
  background: var(--a-muted);
  color: var(--a-secondary);
  font-size: 12px;
  line-height: 16px;
}
.tp-tool .tp-ic {
  width: 13px;
  height: 13px;
  color: var(--a-secondary);
  stroke-width: 2.4;
}
.tp-spin {
  width: 12px;
  height: 12px;
  border: 1.6px solid rgb(110 113 128 / 30%);
  border-top-color: var(--a-secondary);
  border-radius: 50%;
}
.tp-answer {
  padding: 4px 16px 15px !important;
  color: var(--a-ink);
  font-size: 17px;
  line-height: 22px;
}
.tp-answer b {
  font-weight: 600;
}
.tp-sources {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 6px;
  margin: 0 16px 12px !important;
}
.tp-sources li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px 6px 9px !important;
  border: 0.5px solid var(--a-border);
  border-radius: 999px;
  background: var(--a-subtle);
  color: var(--a-ink);
  font-size: 12px;
  line-height: 16px;
}
.tp-sources .tp-ic {
  width: 14px;
  height: 14px;
  stroke-width: 2;
}
.tp-sources .tp-more {
  color: var(--a-secondary);
}
.tp-deeplink {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 46px;
  margin: 0 16px 8px !important;
  padding: 0 4px 0 12px !important;
  border-top: 0.5px solid var(--a-border);
  border-bottom: 0.5px solid var(--a-border);
  font: 600 17px/22px var(--a-sys);
}
.tp-deeplink .tp-ic {
  width: 18px;
  height: 18px;
  color: var(--a-ink);
}
.tp-feedback {
  display: flex;
  gap: 4px;
  margin: 0 8px 4px !important;
  color: var(--a-secondary);
}
.tp-feedback span {
  display: grid;
  place-items: center;
  width: 36px;
  height: 32px;
}
.tp-feedback .tp-ic {
  width: 20px;
  height: 20px;
}
.tp-feedback .tp-report {
  margin-left: 6px;
}
.tp-plan {
  margin: 0 16px 8px;
  overflow: hidden;
  border-radius: 9px;
  background: var(--a-subtle);
}
.tp-plan__title {
  padding: 11px 13px 9px !important;
  font: 600 15px/20px var(--a-sys);
}
.tp-plan__row {
  display: flex;
  align-items: baseline;
  gap: 9px;
  padding: 9px 13px !important;
  border-top: 0.5px solid var(--a-border);
  font-size: 12px;
  line-height: 16px;
}
.tp-plan__row:nth-child(2) {
  border-top: 0;
}
.tp-plan__mark {
  min-width: 14px;
  text-align: center;
}
.tp-plan__label {
  flex: 1;
}
.tp-plan__row.is-unstarted :is(.tp-plan__mark, .tp-plan__state) {
  color: var(--a-tertiary);
}
.tp-plan__row.is-executed :is(.tp-plan__mark, .tp-plan__state) {
  color: var(--a-success);
}
.tp-plan__stop {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 13px !important;
  border-top: 0.5px solid var(--a-border);
  color: var(--a-secondary);
  font-size: 12px;
}

/* Composer: hairline bar, 36pt capsule field, mic / red send / ink stop */
.tp-composer {
  flex: none;
  padding: 8px 16px 26px;
  border-top: 0.5px solid var(--a-border);
}
.tp-field {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 4px 4px 4px 14px;
  border: 0.5px solid var(--a-border);
  border-radius: 20px;
  background: var(--a-page);
}
.tp-ph {
  flex: 1;
  color: var(--a-tertiary);
}
.tp-draft {
  flex: 1;
  min-height: 22px;
  color: var(--a-ink);
}
.tp-draft.is-typing::after {
  content: '';
  display: inline-block;
  width: 2px;
  height: 20px;
  margin-left: 1px;
  vertical-align: -4px;
  background: var(--a-accent);
}
.tp-mic {
  width: 22px !important;
  height: 22px !important;
  margin-right: 6px;
  color: var(--a-secondary);
}
.tp-sendbtn,
.tp-stopbtn {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--a-primary) !important;
  color: var(--a-page) !important;
}
.tp-sendbtn .tp-ic {
  width: 17px;
  height: 17px;
  stroke-width: 2.6;
}
.tp-stopbtn {
  background: var(--a-ink) !important;
}
.tp-stopbtn i {
  width: 11px;
  height: 11px;
  border-radius: 2px;
  background: var(--a-page);
}

/* The review plane at the large detent, over the dimmed screen (the real capture) */
.tp-dim {
  position: absolute;
  inset: 0;
  z-index: 8;
  background: var(--a-backdrop);
}
.tp-plane {
  position: absolute;
  inset: 61px 0 0;
  z-index: 9;
  display: flex;
  flex-direction: column;
  border-radius: 38px 38px 0 0;
  background: var(--a-page);
}
.tp-plane .tp-grabber {
  top: 6px;
}
.tp-planehead {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: 81px;
  padding: 12px 20px 0;
  border-bottom: 0.5px solid var(--a-border);
}
.tp-planehead h4 {
  position: absolute;
  left: 0;
  right: 0;
  top: 33px;
  margin: 0;
  font: 700 20px/24px var(--a-display);
  letter-spacing: 0.01em;
  text-align: center;
}
.tp-planehead .tp-disc {
  background: var(--a-muted);
  color: #6b6d74;
}
.tp-planebody {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  padding-top: 16px;
}
.tp-planecontext {
  margin: 0 16px 10px !important;
  color: var(--a-tertiary);
  font-size: 13px;
  line-height: 18px;
}
.tp-card {
  margin: 0 16px 12px;
  overflow: hidden;
  border: 1.5px solid var(--a-accent);
  border-radius: 9px;
  background: var(--a-page);
}
.tp-card.is-executed {
  border-color: var(--a-success);
}
.tp-card.is-cancelled {
  border-width: 0.5px;
  border-color: var(--a-border);
}
.tp-card__title {
  padding: 11px 13px 9px !important;
  font: 600 15px/20px var(--a-sys);
}
.tp-card__row {
  display: flex;
  gap: 10px;
  padding: 8px 13px !important;
  font-size: 12px;
  line-height: 16px;
}
.tp-card__key {
  flex: 0 0 84px;
  color: var(--a-secondary);
}
.tp-card__val {
  display: grid;
  min-width: 0;
}
.tp-card__val b {
  font-weight: 600;
}
.tp-card__was {
  color: var(--a-secondary);
}
.tp-card__sum {
  padding-top: 9px !important;
  padding-bottom: 6px !important;
  border-top: 0.5px solid var(--a-border);
}
.tp-card__note {
  padding: 0 13px 10px !important;
  color: var(--a-secondary);
  font-size: 12px;
  line-height: 16px;
}
.tp-card__row + .tp-card__note {
  padding-top: 4px !important;
}
.tp-next {
  display: grid;
  gap: 2px;
  margin: 0 16px 8px;
  padding: 11px 13px;
  border: 0.5px solid var(--a-border);
  border-radius: 9px;
}
.tp-next__kicker {
  color: var(--a-secondary);
  font-size: 12px;
  line-height: 16px;
}
.tp-next__label {
  font: 600 15px/20px var(--a-sys);
}
.tp-pinned,
.tp-actions {
  display: flex;
  border-top: 0.5px solid var(--a-border);
  background: var(--a-page);
}
.tp-pinned {
  min-height: 48px;
  margin-bottom: 0;
}
.tp-plane:not(:has(.tp-fine)) .tp-pinned {
  margin-bottom: 0;
}
.tp-act {
  display: grid !important;
  place-items: center;
  flex: 1 1 0;
  min-height: 48px;
  padding: 0 8px !important;
  color: var(--a-accent) !important;
  font: 600 17px/22px var(--a-sys) !important;
  text-align: center !important;
}
.tp-act--quiet {
  border-right: 0.5px solid var(--a-border) !important;
  color: var(--a-secondary) !important;
  font-weight: 400 !important;
}
.tp-act.is-busy {
  color: var(--a-tertiary) !important;
}
.tp-fine {
  padding: 2px 16px 30px !important;
  color: var(--a-secondary);
  font-size: 12px;
  line-height: 16px;
}

/* A tap target in the phone: the next control of the story. The ring is the site's hint,
   not app UI, and appears only once the visitor is driving. */
.tp-screen [data-tap] {
  position: relative;
  outline: none;
}
/* Each tap target's hit area is padded so it is at least 44 CSS px at the phone's scale. */
.tp-screen [data-tap]::before {
  content: '';
  position: absolute;
  inset: calc(-1 * max(0px, (44px / var(--tp-s, 1) - 36px) / 2));
}
.tp-screen [data-tap][data-hint='on']::after {
  content: '';
  position: absolute;
  inset: -4px;
  border: 3px solid rgb(255 42 67 / 85%);
  border-radius: inherit;
  pointer-events: none;
}
.tp-screen .tp-act[data-tap][data-hint='on']::after,
.tp-screen .tp-starter[data-tap][data-hint='on']::after {
  inset: 3px;
  border-radius: 9px;
}
.tp-screen [data-tap]:focus-visible::after {
  content: '';
  position: absolute;
  inset: -5px;
  border: 4px solid #0d0f14;
  border-radius: inherit;
  box-shadow: 0 0 0 3px #fff;
  pointer-events: none;
}
.tp-screen .tp-act[data-tap]:focus-visible::after,
.tp-screen .tp-starter[data-tap]:focus-visible::after {
  inset: 3px;
  border-radius: 9px;
}
.tp-screen [data-tap].is-pressed {
  filter: brightness(0.92);
}
.tp-touch {
  position: absolute;
  top: var(--ty, -100px);
  left: var(--tx, -100px);
  z-index: 30;
  width: 54px;
  height: 54px;
  margin: -27px 0 0 -27px;
  border-radius: 50%;
  background: rgb(13 15 20 / 22%);
  border: 2px solid rgb(255 255 255 / 70%);
  opacity: 0;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  [data-tp-mounted][data-mode='auto']:not([data-frozen]) .tp-wordmark > span {
    animation: tp-drift 9s linear infinite;
  }
  .tp-spin {
    animation: tp-spin 0.8s linear infinite;
  }
  [data-tp-mounted]:is([data-mode='paused'], [data-frozen]) .tp-spin {
    animation-play-state: paused;
  }
  .tp-enter {
    animation: tp-rise 0.32s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  }
  .tp-sheet.tp-enter,
  .tp-plane.tp-enter {
    animation: tp-sheet 0.46s cubic-bezier(0.2, 0.85, 0.25, 1) both;
  }
  .tp-dim.tp-enter {
    animation: tp-fade 0.3s ease-out both;
  }
  .tp-touch.is-on {
    animation: tp-touch 0.45s ease-out;
  }
  [data-tp-mounted]:not([data-mode='paused'], [data-frozen])
    .tp-screen
    [data-tap][data-hint='on']::after {
    animation: tp-hint 1.4s ease-in-out 3;
  }
}
@keyframes tp-drift {
  to {
    background-position: -200% 0;
  }
}
@keyframes tp-spin {
  to {
    transform: rotate(1turn);
  }
}
@keyframes tp-rise {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}
@keyframes tp-sheet {
  from {
    transform: translateY(105%);
  }
}
@keyframes tp-fade {
  from {
    opacity: 0;
  }
}
@keyframes tp-touch {
  0% {
    opacity: 0;
    transform: scale(0.6);
  }
  30% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1.15);
  }
}
@keyframes tp-hint {
  50% {
    opacity: 0.35;
  }
}

/* ─── Placement ──────────────────────────────────────────────────────────────────── */

/* Desktop: the copy and the guide on the left, the phone panel on the right, one screen. */
@media (min-width: 1024px) {
  .tp {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    align-items: stretch;
    gap: 0 48px;
  }
  .tp > .tp-side {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
    padding-top: 8px;
  }
  .tp-intro,
  .tp-guide {
    order: 0;
  }
  .tp-stage {
    --tp-pad-block: 32px;
    height: clamp(540px, calc(100svh - 150px), 860px);
    padding: var(--tp-pad-block) 24px;
  }
  .tp > .tp-stage {
    grid-column: 2;
    grid-row: 1;
  }
}

/* Phones: the phone at a readable size, a vertical step rail beside it. */
@media (max-width: 1023px) {
  .tp-stage {
    height: min(calc(100svh - 96px), 640px);
    min-height: 500px;
  }
}
@media (max-width: 760px) {
  .tp {
    gap: 16px;
  }
  .tp-stage {
    --tp-pad-block: 24px;
    padding: var(--tp-pad-block) 8px;
  }
  .tp-step {
    padding: 0;
    justify-content: center;
  }
  .tp-step .tp-step__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .tp-step[aria-current='step'] {
    background: transparent;
    box-shadow: none;
  }
  .tp-steps {
    display: grid;
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
    gap: 0;
  }
  .tp-step {
    width: 100%;
    min-width: 0;
  }
  .tp-status {
    font-size: var(--fs-15);
  }
}

/* Forced colours: the phone keeps its own drawing; the ring and markers use system ink. */
@media (forced-colors: active) {
  .tp-wordmark > span {
    background: none;
    color: CanvasText;
    -webkit-text-fill-color: CanvasText;
  }
  .tp-screen [data-tap][data-hint='on']::after {
    border-color: Highlight;
  }
}

/* ─── The homepage chapter (#trinity) ────────────────────────────────────────────── */
#trinity.trinity-chapter {
  padding-block: 0;
}
#trinity .trinity-chapter__id {
  justify-content: flex-start;
  margin: 0;
}
#trinity .trinity-sig {
  font-size: 32px;
}
#trinity .tp-intro h2 {
  margin: 0;
  color: var(--ink);
  font: 700 40px / 1.4 var(--font-display);
  letter-spacing: -0.02em;
  text-wrap: balance;
}
#trinity .tp-intro .chapter-lede {
  font-size: var(--fs-17);
  line-height: var(--lh-prose);
}
#trinity .trinity-chapter__more {
  justify-self: start;
  text-align: left;
}
#trinity .trinity-chapter__more a {
  font-size: var(--fs-15);
}
/* Lane SP (2026-10-20): the soft.css spacing scale, as on /trinity/'s #stage. The mark sits
   12px over the heading (an eyebrow); the heading to its lede is a head gap; the lede to the
   walkthrough link one lede gap; the intro to the guide and stage one block gap. */
#trinity .tp-intro {
  gap: 0;
}
#trinity .tp-intro > * + * {
  margin-top: var(--space-head);
}
#trinity .tp-intro > .trinity-chapter__id + h2 {
  margin-top: 12px;
}
#trinity .tp-intro > .trinity-chapter__more {
  margin-top: var(--space-lede);
}
#trinity .tp,
#trinity .tp > .tp-side {
  row-gap: var(--space-block);
}

/* ─── /trinity/ (#stage) ─────────────────────────────────────────────────────────── */
#stage .tp-intro .pages-section-title {
  margin: 0;
}
#stage .tp-intro .trinity-section-lede {
  margin: var(--space-head) 0 0;
}
/* Lane SP (2026-10-20): the soft.css spacing scale. The heading to its lede is a head gap; the
   lede to the tabs one lede gap; the tabs to the guide and stage one block gap. */
#stage .tp-intro {
  gap: 0;
}
#stage .tp-intro > * + * {
  margin-top: var(--space-head);
}
#stage .tp-intro > .tp-tabs {
  margin-top: var(--space-lede);
}
#stage .tp,
#stage .tp > .tp-side {
  row-gap: var(--space-block);
}

/* ─── /app/ (#trinity, the bridge) ───────────────────────────────────────────────── */
.bridge[data-trinity-stage] .bridge__stage {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 16px;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}
.bridge[data-trinity-stage] .bridge__guide {
  order: 3;
  grid-column: 1 / -1;
  min-width: 0;
}
.bridge[data-trinity-stage] .bridge__more {
  order: 4;
}
@media (min-width: 1024px) {
  .bridge[data-trinity-stage] {
    align-items: stretch;
  }
  .bridge[data-trinity-stage] .bridge__side {
    align-content: start;
  }
  .bridge[data-trinity-stage] .tp-stage {
    height: clamp(520px, calc(100svh - 210px), 820px);
  }
}
.bridge[data-trinity-stage] .bridge__stage > .tp-stage {
  order: 1;
}