/* chatterbox_csi_two_sides_ver8.css

   Page styles for /chatterbox_csi_two_sides_ver8 only. Every rule is scoped under
   .ts8-page and loads after chatterbox_csi_tokens.css and chatterbox_csi_ver8.css,
   which still own the tokens, bands, buttons, thread, FAQ, final CTA, the reveal
   and stagger transitions, and the one figure animation (dot-run).

   Values follow the Chatterbox design system (tokens v1, synced 2026-09-23,
   master@f2ab64d1; component bundle lifted at master@a48e3da0). No shared token is
   redeclared and no keyframes are declared here: the figures ride on the family's
   dot-run, so the shared reduced-motion rule stops it; the halos are static. New layout
   values follow the family's role values, and new breakpoints use the system's 640
   and 880 widths only.

   Colour carries one meaning each. Teal is action and the product: the core box in
   every figure, the shared outcome. Ocean is flow and the direction of contact: every
   arrow, dot and side label. Coral is the moment a person picks up: the team node in
   each figure, the two team steps in the paths, the record's top edge and the
   "Awaiting your team" badge. Every coloured state also carries a word. */

.ts8-page {
  /* Badge vocabulary, page-scoped (the ver8 sheet has no ops-badge). The team state
     takes the page's coral (a person picks up) rather than the operations amber, so
     the marketing surface keeps its three colours. Each pair measures on white:
     coral-deep on the coral tint 5.1:1, ocean-text on the ocean tint 4.76:1. */
  --ts8-status-team-text: var(--coral-deep);
  --ts8-status-team-bg: var(--coral-tint);
  --ts8-status-info-text: var(--ocean-text);
  --ts8-status-info-bg: rgba(8, 145, 178, 0.10);
  --ts8-status-neutral-text: var(--ink-soft);
  --ts8-status-neutral-bg: rgba(12, 39, 48, 0.07);
  --ts8-lift: inset 0 1px 1px rgba(255, 255, 255, 0.95), 0 24px 60px -40px rgba(12, 39, 48, 0.35);
  --ts8-lift-teal: inset 0 1px 1px rgba(255, 255, 255, 0.95), 0 18px 40px -28px rgba(15, 118, 110, 0.35);
  --ts8-lift-hover: inset 0 1px 1px rgba(255, 255, 255, 0.95), 0 26px 48px -26px rgba(15, 118, 110, 0.42), 0 0 0 1px rgba(15, 118, 110, 0.08);
}

/* Anchors clear the 72px sticky nav through scroll-padding-top on the
   family sheet's html rule; a scroll-margin here would double it. */

/* ---- figure vocabulary ----
   The page draws with the family's .fig-* set (chatterbox_csi_ver8.css): a customer
   node, the core box and the team node, ocean arrows and the shared flow dots. */
/* The contact gate adds two marks: a gate tick (teal, the core's stroke, because the
   rule is applied by your Chatterbox) and the STOP bar (the figure's one coral mark,
   because STOP is the customer's word ending contact). */
.ts8-page .ts8-fig-gate { fill: none; stroke: var(--teal-deep); stroke-width: 2; stroke-linecap: round; }
.ts8-page .ts8-fig-stop { fill: none; stroke: var(--coral-deep); stroke-width: 3.5; stroke-linecap: round; }

/* ---- shared small parts ---- */
/* The status tints are translucent, so each badge sits on an opaque white base with
   the tint laid over it; the pairs above are measured on that base. */
.ts8-page .ts8-badge {
  --ts8-badge-bg: var(--ts8-status-neutral-bg);
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 11px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 12px; font-weight: 700; letter-spacing: 0.02em; line-height: 1.4;
  background: linear-gradient(var(--ts8-badge-bg), var(--ts8-badge-bg)), #FFFFFF;
  color: var(--ts8-status-neutral-text);
}
.ts8-page .ts8-badge::before {
  content: ""; flex: none;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor; opacity: 0.8;
}
.ts8-page .ts8-badge.is-team { --ts8-badge-bg: var(--ts8-status-team-bg); color: var(--ts8-status-team-text); border-color: rgba(180, 35, 74, 0.22); }
.ts8-page .ts8-badge.is-info { --ts8-badge-bg: var(--ts8-status-info-bg); color: var(--ts8-status-info-text); border-color: rgba(8, 145, 178, 0.22); }

/* ---- hero ---- */
/* The motto takes the family's ownership pill and its tri-colour grammar (ocean,
   coral, teal), left-aligned under the lede rather than centred as a section close. */
.ts8-page .hero .ownership-line {
  display: flex;
  flex-wrap: wrap;
  width: fit-content;
  column-gap: 0.3em;
  margin: 1.25rem 0 0;
  padding: 9px 22px;
  font-size: clamp(1.05rem, 1.7vw, 1.25rem);
  line-height: 1.35;
}
/* Wrap between complete phrases so the pill cannot widen the mobile hero grid.
   Keep the existing phrase spacing without relying on whitespace between spans. */
.ts8-page .hero .ownership-line span { white-space: nowrap; }
.ts8-page .ts8-hero-note {
  display: flex; gap: 8px; align-items: baseline;
  margin-top: 1rem;
  font-size: 14.5px;
  color: var(--ink-soft);
}
.ts8-page .ts8-hero-note i { flex: none; color: var(--teal-deep); }

/* The glimpse figure: customers on the left, your Chatterbox in the centre, your
   team on the right. The legend sits under the three shapes at their positions. */
.ts8-page .ts8-glimpse-figure { padding: 14px 4px 0; }
.ts8-page .ts8-glimpse-svg { display: block; width: 100%; max-width: 340px; height: auto; margin: 0 auto; overflow: visible; }
.ts8-page .ts8-glimpse-legend {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) minmax(0, 1fr);
  max-width: 340px; margin: 2px auto 0;
  text-align: center;
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-soft);
}
.ts8-page .ts8-glimpse-legend span:nth-child(2) { color: var(--teal-deep); }
.ts8-page .ts8-glimpse-legend span:nth-child(3) { color: var(--coral-deep); }

.ts8-page .ts8-glimpse-list { list-style: none; margin: 0; padding: 14px 0 0; display: grid; gap: 8px; }
.ts8-page .ts8-glimpse-item {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 16px;
  background: var(--card);
  border: 1px solid var(--hairline);
  border-top-color: rgba(255, 255, 255, 0.98);
  border-radius: 16px;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 1), 0 4px 12px rgba(12, 39, 48, 0.04);
}
.ts8-page .ts8-glimpse-item .icon-tile { margin-bottom: 0; }
.ts8-page .ts8-glimpse-kicker {
  display: block; margin-bottom: 4px;
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--teal-deep);
}
.ts8-page .ts8-glimpse-item strong { display: block; font-size: 15px; line-height: 1.4; color: var(--ink); }
.ts8-page .ts8-glimpse-item .ts8-badge { margin-top: 8px; }
.ts8-page .ts8-glimpse-foot {
  margin-top: 16px; padding-top: 12px;
  border-top: 1px solid var(--hairline-neutral);
  text-align: center;
  font-size: 13.5px;
  color: var(--ink-soft);
}

/* ---- two jobs ---- */
.ts8-page .ts8-jobs { display: grid; grid-template-columns: 1fr; gap: 16px; }
.ts8-page .ts8-job {
  position: relative;
  isolation: isolate;
  display: flex; flex-direction: column;
  padding: clamp(20px, 3vw, 32px);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.84) 0%, rgba(240, 253, 250, 0.62) 100%);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  backdrop-filter: blur(14px) saturate(1.15);
  border: 1px solid var(--hairline);
  border-top-color: rgba(255, 255, 255, 0.98);
  border-radius: 20px;
  box-shadow: var(--ts8-lift-teal);
  transition: translate 280ms var(--ease-out), border-color 280ms var(--ease-out), box-shadow 280ms var(--ease-out);
}
/* A corner glow, like the family's stat tile; z-index keeps it behind the copy. */
.ts8-page .ts8-job::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  background: radial-gradient(320px 200px at 100% 0%, rgba(45, 212, 191, 0.14), transparent 70%);
  pointer-events: none;
  z-index: -1;
}
.ts8-page .ts8-job-figure { margin: -4px 0 12px; }
.ts8-page .ts8-job-figure svg { display: block; width: min(100%, 250px); height: auto; overflow: visible; }
.ts8-page .ts8-job .ts8-job-kicker {
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--teal-deep);
}
.ts8-page .ts8-job h3 { margin-top: 8px; font-size: clamp(1.35rem, 2.2vw, 1.6rem); line-height: 1.2; }
.ts8-page .ts8-job p { font-size: 15.5px; line-height: 1.6; color: var(--ink); text-wrap: pretty; }
.ts8-page .ts8-job h3 + p { margin-top: 16px; }
.ts8-page .ts8-job p + p { margin-top: 8px; color: var(--ink-soft); }
.ts8-page .ts8-job .ts8-job-link { margin-top: auto; padding-top: 16px; }
.ts8-page .ts8-job-link a,
.ts8-page .ts8-example-note a {
  display: inline-flex; align-items: center;
  min-height: 44px;
  font-weight: 700;
  color: var(--teal-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.ts8-page .ts8-job-link a:hover { text-decoration-thickness: 2px; }

/* ---- starting problems ----
   The six problem cards from the Starting problems page sit under the two job cards in
   the same band, so they take the band's surface: the job card's glass, hairline and
   white top edge at the smaller card's radius and shadow. The shared sheet's grid goes
   two-up at 640 and three-up at 960; here the third column arrives at 880 with the
   job cards, so the band changes shape once. */
.ts8-page .ts8-problems-lede { margin: 48px auto 0; text-align: center; }
.ts8-page .ts8-problems { margin-top: 24px; gap: 16px; }
.ts8-page .ts8-problems .problem-card {
  position: relative;
  isolation: isolate;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.84) 0%, rgba(240, 253, 250, 0.62) 100%);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  backdrop-filter: blur(14px) saturate(1.15);
  border-top-color: rgba(255, 255, 255, 0.98);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.95), 0 4px 18px -6px rgba(12, 39, 48, 0.08);
  transition: translate 280ms var(--ease-out), box-shadow 280ms var(--ease-out);
}
.ts8-page .ts8-problems .problem-card p { text-wrap: pretty; }
/* The in-card link takes the page's link treatment without the standalone link's
   44px box, because it runs inline in the sentence. */
.ts8-page .ts8-problems .problem-card a {
  font-weight: 700;
  color: var(--teal-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.ts8-page .ts8-problems .problem-card a:hover { text-decoration-thickness: 2px; }

/* ---- worked examples ---- */
.ts8-page .ts8-example {
  position: relative;
  isolation: isolate;
  margin-top: 32px;
  padding: clamp(20px, 3.2vw, 36px);
  background: rgba(255, 255, 255, 0.58);
  -webkit-backdrop-filter: blur(16px) saturate(1.15);
  backdrop-filter: blur(16px) saturate(1.15);
  border: 1px solid var(--hairline);
  border-top-color: rgba(255, 255, 255, 0.98);
  border-radius: 24px;
  box-shadow: var(--ts8-lift);
}
.ts8-page .ts8-example::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  background: radial-gradient(420px 260px at 100% 0%, rgba(45, 212, 191, 0.12), transparent 70%);
  pointer-events: none;
  z-index: -1;
}
.ts8-page .ts8-example + .ts8-example { margin-top: 24px; }
.ts8-page .ts8-example-head { margin-bottom: 24px; }
.ts8-page .ts8-example-kicker {
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--teal-deep);
  text-wrap: balance;
}
.ts8-page .ts8-example-head h3 { margin-top: 6px; font-size: clamp(1.4rem, 2.4vw, 1.75rem); line-height: 1.2; }
.ts8-page .ts8-illustrative {
  display: inline-block;
  margin-top: 12px;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(12, 39, 48, 0.06);
  border: 1px solid rgba(12, 39, 48, 0.12);
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-soft);
}
.ts8-page .ts8-example-body {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--hairline-neutral);
}
.ts8-page .ts8-conversation { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.ts8-page .ts8-conversation .thread-msg { max-width: min(88%, 440px); }
.ts8-page .ts8-conversation-context { margin-bottom: 12px; font-size: 13.5px; color: var(--ink-soft); }

/* The team record reuses the home page's .thread-record: coral top edge, because
   the record is where a person picks the work up. */
.ts8-page .ts8-record { margin-top: 0; }
.ts8-page .ts8-record .thread-who { margin: 0; font-family: var(--sans); font-size: 11.5px; line-height: 1.4; }
.ts8-page .ts8-record dl { gap: 2px; }
.ts8-page .ts8-record dl > div { padding: 6px 8px; margin: 0 -8px; border-radius: var(--r-sm); }
.ts8-page .ts8-record dl > div.is-key { background: rgba(15, 118, 110, 0.06); }
.ts8-page .ts8-record dl > div.is-key dd { font-weight: 700; }
.ts8-page .ts8-record dd .ts8-badge { font-weight: 700; }
/* The conversation list is its own stagger, so its messages arrive one after another
   (70ms apart, --i from the family JS). The record is a sibling in the example body's
   stagger with --i 1, which would land it before the last message, so its two staggered
   longhands wait for the longer conversation (four messages) plus a beat. Five values
   match the shared rule's transition-property list (opacity, transform, translate,
   border-color, box-shadow). The selector stays rooted on .ts8-page (the sheet's scope
   test) and out-specifies the shared rule at (0,5,0) against (0,4,1); it holds in both
   reveal states, so the delay is never read from the old one. Without JS the record has
   no transition of its own, so the delay is inert there. */
.ts8-page [data-reveal] .ts8-example-body[data-stagger] > .ts8-record {
  transition-delay: calc(4 * 70ms + 150ms), calc(4 * 70ms + 150ms), 0s, 0s, 0s;
}
/* The credit example has two turns, so its record follows sooner. */
.ts8-page [data-reveal] .ts8-example-body[data-stagger] > .ts8-conversation-wrap + .ts8-record {
  transition-delay: calc(2 * 70ms + 150ms), calc(2 * 70ms + 150ms), 0s, 0s, 0s;
}
.ts8-page .ts8-example-note {
  margin-top: 16px;
  max-width: 72ch;
  font-size: 14.5px; line-height: 1.55;
  color: var(--ink-soft);
  text-wrap: pretty;
}

/* ---- the coin figure ----
   Two faces of one symbolic coin, drawn as line geometry with no text inside, joined
   by one arc each way. Every label is live HTML beside the drawing, and the SVGs are
   aria-hidden so nothing is read twice. Arrow direction, not colour, tells the faces
   apart. The aura behind each face is a static wash; the only motion is the pair of
   flow dots on each arc, and the shared reduced-motion rule stops them. */
.ts8-page .ts8-coin-figure { margin: 8px auto 0; max-width: 960px; }
.ts8-page .ts8-rim {
  position: relative;
  padding: 24px 20px 56px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.5);
  -webkit-backdrop-filter: blur(16px) saturate(1.15);
  backdrop-filter: blur(16px) saturate(1.15);
  border: 2px solid rgba(15, 118, 110, 0.38);
  box-shadow:
    inset 0 0 0 6px rgba(255, 255, 255, 0.7),
    inset 0 0 0 7px rgba(8, 145, 178, 0.26),
    0 24px 60px -40px rgba(12, 39, 48, 0.4);
}
.ts8-page .ts8-faces { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; align-items: center; }
.ts8-page .ts8-face { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 16px; align-items: center; }
.ts8-page .ts8-coin { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 10px 18px rgba(15, 118, 110, 0.18)); }
.ts8-page .ts8-coin-body { stroke-width: 5; }
.ts8-page .ts8-coin-ring { fill: none; stroke: var(--ocean-mid); stroke-opacity: 0.35; stroke-width: 1.5; }
.ts8-page .ts8-coin-ring.is-inner { stroke: var(--teal-deep); stroke-opacity: 0.18; stroke-width: 1; }
.ts8-page .ts8-coin-glare { fill: #FFFFFF; opacity: 0.55; }
.ts8-page .ts8-coin-arrows path { fill: none; stroke: var(--ocean-mid); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.ts8-page .ts8-coin-halo { fill: none; stroke: var(--teal-deep); stroke-opacity: 0.28; stroke-width: 1.5; }
.ts8-page .ts8-coin-core { fill: var(--teal-deep); }

/* The link between the faces: portrait between stacked faces on a phone, landscape
   beside them from 640px. */
.ts8-page .ts8-link { display: grid; justify-items: center; padding: 4px 0; }
.ts8-page .ts8-link-svg { display: block; height: auto; }
.ts8-page .ts8-link-svg.is-landscape { display: none; }
.ts8-page .ts8-link-svg.is-portrait { width: 64px; }

.ts8-page .ts8-face-kicker {
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ocean-text);
}
.ts8-page .ts8-face-title { margin-top: 2px; font-size: clamp(1.3rem, 2.2vw, 1.55rem); line-height: 1.2; }
.ts8-page .ts8-face-list { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.ts8-page .ts8-face-list li {
  padding: 3px 12px;
  border-radius: 999px;
  background: var(--card);
  border: 1px solid var(--hairline);
  font-size: 13.5px; font-weight: 600;
  color: var(--ink);
}

/* The foundation sits on the rim's lower edge, like an inscription. */
.ts8-page .ts8-rim-label {
  /* The pill's bottom sits a fixed 20px below the rim's outer edge (22px below
     the padding box, inside the 2px border), whatever its line count. Centring
     it on the edge let a two-line pill hang lower, so the outcome stem's gap
     above changed with the viewport. */
  position: absolute; left: 50%; bottom: -22px;
  transform: translateX(-50%);
  width: max-content;
  max-width: calc(100% - 32px);
  padding: 8px 20px;
  border-radius: 999px;
  background: linear-gradient(180deg, #FFFFFF 0%, #F0FDFA 100%);
  border: 2px solid rgba(15, 118, 110, 0.38);
  box-shadow: 0 8px 20px -10px rgba(15, 118, 110, 0.35);
  text-align: center;
  font-family: var(--serif);
  font-size: clamp(1rem, 1.8vw, 1.2rem);
  line-height: 1.3;
  color: var(--teal-deep);
  text-wrap: balance;
}

/* The shared outcome is the product's promise, so it takes teal; the coral mark
   moves to the two team steps below, where a person picks up. */
.ts8-page .ts8-outcome {
  position: relative;
  /* 20px of pill below the rim, then 7px, the 22px stem, 7px. */
  margin: 56px auto 0;
  max-width: 480px;
  padding: 16px 24px 18px;
  text-align: center;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(240, 253, 250, 0.9));
  border: 1px solid var(--hairline);
  border-top: 3px solid var(--teal-deep);
  border-radius: var(--r-md);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.95), 0 10px 26px -10px rgba(15, 118, 110, 0.18);
}
.ts8-page .ts8-outcome::before {
  content: "";
  /* Measured from the padding box: 3px border-top plus the 7px gap. */
  position: absolute; left: 50%; top: -32px;
  width: 2px; height: 22px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, rgba(8, 145, 178, 0.25), var(--ocean-mid));
}
.ts8-page .ts8-outcome-kicker {
  display: block;
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--teal-deep);
}
.ts8-page .ts8-outcome-text {
  display: block; margin-top: 4px;
  font-family: var(--serif);
  font-size: clamp(1.3rem, 2.4vw, 1.6rem);
  line-height: 1.25;
  color: var(--ink);
}

.ts8-page .ts8-paths { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 32px; }
.ts8-page .ts8-path {
  padding: 20px;
  background: var(--card);
  border: 1px solid var(--hairline);
  border-top-color: rgba(255, 255, 255, 0.98);
  border-radius: 16px;
  box-shadow: 0 4px 18px -6px rgba(12, 39, 48, 0.08);
}
.ts8-page .ts8-path-title {
  margin-bottom: 16px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--teal-deep);
}
/* Steps stack with a down arrow on a phone and run left to right from 640px.
   The arrows are pseudo-elements, so a screen reader hears only the ordered list. */
.ts8-page .ts8-path-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
.ts8-page .ts8-path-steps li {
  position: relative;
  display: flex; flex-direction: column; gap: 4px;
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--ocean-tint);
  border: 1px solid rgba(8, 145, 178, 0.22);
  text-align: center;
}
/* The team steps carry the figure's coral: the moment a person picks up. */
.ts8-page .ts8-path-steps li.is-team {
  background: #FFFFFF;
  border-color: rgba(180, 35, 74, 0.24);
  border-top: 3px solid var(--coral-deep);
  padding-top: 8px;
  box-shadow: 0 8px 20px -12px rgba(180, 35, 74, 0.2);
}
.ts8-page .ts8-path-steps li + li::before {
  content: "";
  position: absolute; left: 50%; top: -26px;
  width: 2px; height: 12px;
  transform: translateX(-50%);
  background: var(--ocean-mid);
}
.ts8-page .ts8-path-steps li + li::after {
  content: "";
  position: absolute; left: 50%; top: -20px;
  width: 8px; height: 8px;
  border-right: 2px solid var(--ocean-mid);
  border-bottom: 2px solid var(--ocean-mid);
  transform: translateX(-50%) rotate(45deg);
}
.ts8-page .ts8-path-steps li.is-team::before { top: -28px; }
.ts8-page .ts8-path-steps li.is-team::after { top: -22px; }
.ts8-page .ts8-step-name { font-size: 14.5px; font-weight: 700; line-height: 1.3; color: var(--ink); }
.ts8-page .ts8-step-side {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  font-size: 12px; font-weight: 600; line-height: 1.35;
  color: var(--ocean-text);
}
.ts8-page .ts8-path-steps li.is-team .ts8-step-side { color: var(--coral-deep); }
/* The glyph repeats the coin's arrow grammar beside the words: in, out, or the
   coral ring for the team. It inherits the label's colour. */
.ts8-page .ts8-step-glyph { flex: none; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ts8-page .ts8-step-glyph .is-fill { fill: currentColor; stroke: none; }

.ts8-page .ts8-coin-caption {
  margin-top: 24px;
  text-align: center;
  font-family: var(--sans);
  font-size: 14px;
  color: var(--ink-soft);
  text-wrap: balance;
}
.ts8-page .ts8-figure-note {
  margin: 16px auto 0;
  max-width: 62ch;
  text-align: center;
  font-size: 13.5px; line-height: 1.55;
  color: var(--ink-soft);
  text-wrap: pretty;
}

/* ---- language ---- */
.ts8-page .ts8-lang { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.ts8-page .ts8-modes { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-content: start; }
.ts8-page .ts8-mode {
  padding: 18px 20px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(240, 253, 250, 0.7) 100%);
  border: 1px solid var(--hairline);
  border-top-color: rgba(255, 255, 255, 0.98);
  border-radius: 16px;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.95), 0 4px 18px -6px rgba(12, 39, 48, 0.08);
  transition: translate 280ms var(--ease-out), box-shadow 280ms var(--ease-out);
}
.ts8-page .ts8-mode dt {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--teal-deep);
}
.ts8-page .ts8-mode dt i { flex: none; font-size: 1.05rem; }
/* The coverage values are body text in the family's bold sans, not a display role. */
.ts8-page .ts8-mode dd { margin: 6px 0 0; font-size: 16px; font-weight: 700; line-height: 1.4; color: var(--ink); }

.ts8-page .ts8-specimen {
  position: relative;
  isolation: isolate;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px;
  padding: clamp(18px, 3vw, 28px);
  background: rgba(255, 255, 255, 0.58);
  -webkit-backdrop-filter: blur(16px) saturate(1.15);
  backdrop-filter: blur(16px) saturate(1.15);
  border: 1px solid var(--hairline);
  border-top-color: rgba(255, 255, 255, 0.98);
  border-radius: 24px;
  box-shadow: var(--ts8-lift);
}
.ts8-page .ts8-specimen::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  background: radial-gradient(360px 220px at 0% 100%, rgba(45, 212, 191, 0.12), transparent 70%);
  pointer-events: none;
  z-index: -1;
}
.ts8-page .ts8-original { margin: 0; }
.ts8-page .ts8-label {
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-soft);
}
/* The original words sit in the same ink bubble a customer message uses above. */
.ts8-page .ts8-original blockquote {
  margin: 10px 0 0;
  padding: 14px 18px;
  border-radius: 18px;
  border-bottom-right-radius: 6px;
  background: var(--ink);
  box-shadow: var(--shadow-soft);
}
.ts8-page .ts8-original blockquote p { font-size: 15.5px; line-height: 1.5; color: var(--on-dark); }
/* The bridge from the original words to the English record: portrait between the
   stacked columns on a phone, landscape between them from 640px. */
.ts8-page .ts8-bridge { display: grid; justify-items: center; align-self: center; }
.ts8-page .ts8-bridge-svg { display: block; height: auto; overflow: visible; }
.ts8-page .ts8-bridge-svg.is-landscape { display: none; }
.ts8-page .ts8-bridge-svg.is-portrait { width: 40px; }
/* The specimen's record column is narrow at every width, so its fields always
   stack label over value, as the shared thread record does on a phone. */
.ts8-page .ts8-record.is-compact dl > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }

/* ---- your team sets the rules ---- */
/* The controls sentence sits in its own quiet tile under the three cards, with the
   section's coral kept to the eyebrow and the emphasis. */
.ts8-page .ts8-controls {
  margin: 24px auto 0;
  max-width: 72ch;
  padding: 14px 20px;
  text-align: center;
  font-size: 14px; line-height: 1.6;
  color: var(--ink-soft);
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid var(--hairline-neutral);
  border-top-color: rgba(255, 255, 255, 0.98);
  border-radius: var(--r-md);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.95);
  text-wrap: pretty;
}

/* The contact gate sits under the controls in the same quiet tile: drawing beside its
   numbered labels above 640, stacked below. The drawing carries no text; the list names
   each mark in the drawing's left-to-right order. The dot rides the shared .flow-dot
   run as far as the last gate, so the shared reduced-motion rule stops it. */
.ts8-page .ts8-gate-figure {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px;
  margin: 16px auto 0;
  max-width: 880px;
  padding: 20px;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid var(--hairline-neutral);
  border-top-color: rgba(255, 255, 255, 0.98);
  border-radius: var(--r-md);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.95);
}
.ts8-page .ts8-gate-figure svg { display: block; width: 100%; height: auto; overflow: visible; align-self: center; }
.ts8-page .ts8-gate-steps {
  margin: 0; padding: 0 0 0 1.5em;
  display: grid; gap: 4px;
  font-size: 14px; line-height: 1.5;
  color: var(--ink-soft);
  text-wrap: pretty;
}
.ts8-page .ts8-gate-steps li::marker { font-weight: 700; color: var(--ink); }
.ts8-page .ts8-gate-figure figcaption {
  margin: 0;
  font-size: 13px; line-height: 1.5;
  color: var(--ink-soft);
  text-align: center;
  text-wrap: pretty;
}

/* ---- questions ----
   The shared sheet styles no link inside a FAQ answer; the Pilot link takes the
   page's job-link treatment (teal is the action colour) instead of the browser default. */
.ts8-page .faq-body a {
  color: var(--teal-deep);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.ts8-page .faq-body a:hover { text-decoration-thickness: 2px; }

/* ---- hover lift (pointer devices only) ----
   translate, not transform, so the lift composes with the shared stagger reveal,
   which owns transform on these cards. The shared reduced-motion rule removes the
   transition, so the lift then lands without motion. */
@media (hover: hover) and (pointer: fine) {
  .ts8-page .ts8-job:hover { translate: 0 -3px; border-color: rgba(15, 118, 110, 0.34); box-shadow: var(--ts8-lift-hover); }
  .ts8-page .ts8-mode:hover { translate: 0 -3px; box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.95), 0 12px 28px -12px rgba(15, 118, 110, 0.3); }
  .ts8-page .ts8-problems .problem-card:hover { translate: 0 -3px; box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.95), 0 12px 28px -12px rgba(15, 118, 110, 0.3); }
}

/* ---- breakpoints: the system's 640 and 880 ---- */
@media (min-width: 640px) {
  .ts8-page .ts8-glimpse-legend { grid-template-columns: repeat(3, minmax(0, 1fr)); justify-items: center; }
  .ts8-page .ts8-glimpse-legend span { white-space: nowrap; }
  .ts8-page .ts8-example-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 24px; align-items: start; }
  .ts8-page .ts8-example-kicker,
  .ts8-page .ts8-example-head h3 { grid-column: 1; }
  .ts8-page .ts8-illustrative { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; }

  .ts8-page .ts8-rim { padding: 40px 32px 64px; }
  .ts8-page .ts8-faces { grid-template-columns: minmax(0, 1fr) clamp(96px, 13vw, 150px) minmax(0, 1fr); gap: 16px; }
  .ts8-page .ts8-face { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
  .ts8-page .ts8-coin { width: clamp(150px, 19vw, 200px); }
  .ts8-page .ts8-face-list { justify-content: center; }
  .ts8-page .ts8-link { padding: 0; align-self: start; margin-top: clamp(30px, 6vw, 56px); }
  .ts8-page .ts8-link-svg.is-portrait { display: none; }
  .ts8-page .ts8-link-svg.is-landscape { display: block; width: 100%; }

  .ts8-page .ts8-path-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
  .ts8-page .ts8-path-steps li { justify-content: center; padding-inline: 8px; }
  .ts8-page .ts8-path-steps li + li::before { left: -26px; top: 50%; width: 12px; height: 2px; transform: translateY(-50%); }
  .ts8-page .ts8-path-steps li + li::after { left: -20px; top: 50%; transform: translateY(-50%) rotate(-45deg); }
  /* A team step's 3px top border (1px on the others) moves its padding box
     down 2px, so its padding-box middle sits 1px below the card's middle. */
  .ts8-page .ts8-path-steps li.is-team::before,
  .ts8-page .ts8-path-steps li.is-team::after { top: calc(50% - 1px); }

  .ts8-page .ts8-modes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ts8-page .ts8-specimen { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 16px; align-items: start; }
  .ts8-page .ts8-bridge { align-self: center; padding-top: 22px; }
  .ts8-page .ts8-bridge-svg.is-portrait { display: none; }
  .ts8-page .ts8-bridge-svg.is-landscape { display: block; width: clamp(72px, 9vw, 112px); }

  .ts8-page .ts8-gate-figure { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 16px 28px; align-items: center; padding: 20px 24px; }
  .ts8-page .ts8-gate-figure figcaption { grid-column: 1 / -1; }
}

@media (min-width: 880px) {
  .ts8-page .ts8-jobs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  .ts8-page .ts8-problems { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
  .ts8-page .ts8-example-body { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 32px; align-items: start; }
  /* The two paths stay stacked so their steps line up and the change of side
     reads down the page; the title moves beside its steps. */
  .ts8-page .ts8-path { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: 24px; align-items: center; }
  .ts8-page .ts8-path-title { margin-bottom: 0; }
  .ts8-page .ts8-lang { grid-template-columns: minmax(0, 0.8fr) minmax(0, 2fr); gap: 24px; }
  .ts8-page .ts8-modes { grid-template-columns: minmax(0, 1fr); }
  .ts8-page .ts8-specimen { gap: 24px; }
}