/* Draft 6. NON-PRODUCTION.
 * Loaded only by app/templates/website/native/drafts/tree-testing-6.html.
 * Layered on top of home-parity.css (never edited).
 *
 * This is Draft 5's sheet (concept-tt-5.css) corrected and rescoped under .tt6.
 * The hero, recognition strip, outcome ledger, guard cards, loop, proof strip,
 * FAQ and close band are unchanged in form — only their prefix changed.
 *
 * Removed with the copy they styled:
 *   .tt5-eyebrow    LEVEL 1 / LEVEL 2 / VALIDITY GUARDRAILS / OUTPUTS. The page
 *                   no longer exposes internal taxonomy, so the class is gone
 *                   rather than left unused.
 *   .tt5-level      the two-tier split of the analytics chapter. The five
 *                   outcomes are standard analysis, so there is one block.
 *   .tt5-rail       Build / Pretest / Test / Iterate. Replaced by the journey.
 *   .tt5-deeper     the two-item "misleading success / participant journeys"
 *                   pair; the first belongs to §6, the second to §4's metrics.
 *
 * New here, and why:
 *   .tt6-story      the production journey, adapted from the live page's
 *                   .wt-showcase / .wt-story (tree-testing-landing.html:70-95):
 *                   same three-card grid, same arrow between cards, same menu
 *                   and record treatments, retuned to this page's scale and
 *                   sitting directly on the mint chapter instead of inside a
 *                   second tinted panel.
 *   .tt6-sub        one short line under a headline. Two uses only.
 *   .tt6-adv        the advanced-analytics rows: text beside a figure,
 *                   alternating side. Needed because these three capabilities
 *                   cannot be shown by labels — the visual IS the claim.
 *   .tt6-tree       the shared abstract tree behind the replay and traffic
 *                   figures, so the two views read as one product.
 *   .tt6-mark       the replay markers. They animate because the product
 *                   animates; prefers-reduced-motion rests them in place.
 *   .tt6-scen       the scenario-completion figure: participant rows of task
 *                   markers. No number is asserted.
 */

.tt6 {
  /* Tokens transcribed from home-parity.css and the live tree-testing page. */
  --tt6-ink: #303030;
  --tt6-body: #56514f;
  --tt6-muted: #6f6a68;
  --tt6-purple: #643995;          /* live brand purple */
  --tt6-purple-dark: #4e2c74;
  --tt6-pink: #f90473;
  --tt6-pink-ink: #b0034f;        /* the same accent, darkened for body-size text */
  --tt6-pink-tint: #fdeaf4;
  --tt6-pink-line: #f6cadd;
  --tt6-border: #e3dedd;
  --tt6-hairline: #f2eeec;
  --tt6-mint: #f3fce3;
  --tt6-lilac: #f4ecfb;
  --tt6-link: #2463ae;
  --tt6-shadow: 0 3px 14px rgba(48, 48, 48, .05);

  /* The product's own outcome colours (app/dendropad/util.py COLOR_MAP and the
     task-path diagram's outcomeColors), so the figures teach the real screen. */
  --tt6-direct: #4ade80;
  --tt6-indirect: #86efac;
  --tt6-elsewhere: #c084fc;
}

/* ---------- Chapter shell ---------- */

.tt6 .tt6-sec {
  padding: 64px 0;
  background: #fff;
  scroll-margin-top: 72px;
}

.tt6 .tt6-sec--mint { background: var(--tt6-mint); }

.tt6 .tt6-wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 38px;
}

.tt6 .tt6-wrap--narrow { max-width: 860px; }

.tt6 .tt6-head {
  max-width: 700px;
  margin: 0 auto 48px;
  text-align: center;
}

.tt6 .tt6-head--wide { max-width: 820px; }

.tt6 .tt6-head h2 {
  margin: 0;
  font-size: 32px;
  line-height: 1.24;
  color: var(--tt6-ink);
}

.tt6 .tt6-sub {
  margin: 14px 0 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--tt6-body);
}

.tt6 .tt6-note {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--tt6-muted);
}

.tt6 .tt6-note--center {
  max-width: 780px;
  margin: 30px auto 0;
  text-align: center;
}

.tt6 .tt6-centerlink { margin: 22px 0 0; text-align: center; }

.tt6 .tt6-textlink {
  display: inline-block;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--tt6-link);
  text-decoration: none;
}

.tt6 .tt6-textlink:hover { text-decoration: underline; }

.tt6 .tt6-cta-row { margin: 26px 0 0; }
.tt6 .tt6-fineprint { margin: 10px 0 0; font-size: 12.5px; color: #6d6d6d; }

/* Focus stays visible everywhere, not only on the shared button class. The
   canvas selector matters: under prefers-reduced-motion the shared script
   replaces the analysis GIF with a focusable canvas (tabindex 0). */
.tt6 a:focus-visible,
.tt6 summary:focus-visible,
.tt6 img:focus-visible,
.tt6 canvas:focus-visible {
  outline: 2px solid var(--tt6-purple);
  outline-offset: 3px;
  border-radius: 3px;
}

/* ---------- 1 · Hero ---------- */

.tt6 .tt6-sec--hero {
  padding: 66px 0 74px;
  background: linear-gradient(180deg, #fbf7fd 0%, #fff 62%);
}

.tt6 .tt6-sec--hero .tt6-wrap { max-width: 1200px; }

.tt6 .tt6-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 430px) minmax(0, 1fr);
  gap: 48px;
  align-items: center;
}

.tt6 .tt6-kicker {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 16px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--tt6-body);
}

.tt6 .tt6-dot {
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--tt6-purple);
}

.tt6 .tt6-hero__tagline {
  margin: 0 0 18px;
  max-width: 450px;
  font-size: 34px;
  line-height: 1.2;
  font-weight: 700;
  color: var(--tt6-ink);
}

.tt6 .tt6-hero__tagline em { font-style: italic; color: var(--tt6-pink); }

.tt6 .tt6-hero__desc {
  margin: 0;
  max-width: 430px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--tt6-body);
}

/* Four chips, each the promise of one section below. */
.tt6 .tt6-chips {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tt6 .tt6-chips li {
  padding: 7px 13px;
  border: 1px solid var(--tt6-border);
  border-radius: 999px;
  background: #fff;
  font-size: 13px;
  color: var(--tt6-body);
}

.tt6 .tt6-hero__media { text-align: center; }

/* The shared sheet frames and offsets this class for the live hero; the draft
   grid places it instead, so the offset and the 110% overflow are reset.
   The shared script only pauses this video under reduced motion — it is never
   swapped for a canvas — so no canvas variant is needed here. */
.tt6 video.header-23__img {
  width: 100%;
  max-width: 680px;
  max-height: none;
  margin-left: 0;
  height: auto;
  border: 1px solid #ece2f2;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 2px 6px rgba(37, 44, 97, .06), 0 18px 44px rgba(100, 57, 149, .10);
}

/* ---------- 2 · Recognition strip (headline + three titles must carry it) ---------- */

.tt6 .tt6-sec--strip { padding: 48px 0; }

.tt6 .tt6-strip__h {
  margin: 0 0 26px;
  font-size: 32px;
  line-height: 1.2;
  text-align: center;
  color: var(--tt6-ink);
}

.tt6 .tt6-strip {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 34px;
}

.tt6 .tt6-strip__item {
  padding-top: 16px;
  border-top: 3px solid var(--tt6-border);
}

.tt6 .tt6-strip__item--a { border-top-color: #e0bbf5; }
.tt6 .tt6-strip__item--b { border-top-color: #ffd1bb; }
.tt6 .tt6-strip__item--c { border-top-color: #d4ffbb; }

.tt6 .tt6-strip__item h3 {
  margin: 0 0 6px;
  font-size: 18px;
  line-height: 1.3;
  color: var(--tt6-ink);
}

.tt6 .tt6-strip__item p {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--tt6-body);
}

/* ---------- 3 · The journey (adapted from the live page's .wt-story) ---------- */

.tt6 .tt6-story {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  align-items: stretch;
}

.tt6 .tt6-step {
  position: relative;
  padding: 20px 20px 22px;
  border: 2px solid var(--tt6-purple);
  border-radius: 16px;
  background: #fff;
}

.tt6 .tt6-step + .tt6-step::before {
  content: "\2192";
  position: absolute;
  left: -13px;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  color: var(--tt6-purple);
  font-size: 34px;
  font-weight: 700;
  line-height: 1;
}

.tt6 .tt6-step__tag {
  display: inline-block;
  margin-bottom: 14px;
  font-size: 13px;
  font-weight: 700;
  color: var(--tt6-purple);
}

.tt6 .tt6-task {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--tt6-ink);
}

.tt6 .tt6-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 14.5px;
}

.tt6 .tt6-menu li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 10px;
  border-radius: 8px;
  color: var(--tt6-body);
}

.tt6 .tt6-menu__sub { margin-left: 14px; }
.tt6 .tt6-menu__picked { background: var(--tt6-lilac); color: var(--tt6-ink); font-weight: 600; }
.tt6 .tt6-menu__correct { background: #e8f6e0; color: #2f6d1e; font-weight: 700; }
.tt6 .tt6-chev { color: #bdb6b3; }
.tt6 .tt6-check { color: #4f8a3d; font-weight: 700; }

.tt6 .tt6-record { margin: 0; }

.tt6 .tt6-record > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--tt6-hairline);
}

.tt6 .tt6-record > div:last-child { border-bottom: 0; }
.tt6 .tt6-record dt { margin: 0; font-size: 13px; color: #8a8482; }

.tt6 .tt6-record dd {
  margin: 0;
  font-size: 13.5px;
  font-weight: 600;
  text-align: right;
  color: var(--tt6-ink);
}

.tt6 .tt6-outcome-tag {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  background: #d9f0cd;
  color: #2f6d1e;
  font-size: 12.5px;
  font-weight: 700;
}

/* ---------- 4 · Standard analysis (one block, no levels) ---------- */

.tt6 .tt6-results__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 540px);
  gap: 44px;
  align-items: start;
}

.tt6 .tt6-outcomes {
  margin: 0;
  padding: 0;
  border: 1px solid var(--tt6-border);
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
}

.tt6 .tt6-outcome {
  display: grid;
  grid-template-columns: 136px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  padding: 14px 18px;
  border-bottom: 1px solid var(--tt6-hairline);
}

.tt6 .tt6-outcome:last-child { border-bottom: 0; }
.tt6 .tt6-outcome dt { margin: 0; }

.tt6 .tt6-outcome dd {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--tt6-body);
}

.tt6 .tt6-pill {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
}

.tt6 .tt6-outcome--direct .tt6-pill { background: #ccfcc0; color: #245c18; }
.tt6 .tt6-outcome--indirect .tt6-pill { background: #e3fce1; color: #2c6320; }
.tt6 .tt6-outcome--elsewhere .tt6-pill { background: #f0eafe; color: #52288a; }

/* First click and Top destinations are analysis dimensions, not outcome states.
   Same row rhythm and chip geometry as the outcome pills, but outlined and
   neutral so they cannot read as a fourth and fifth outcome. */
.tt6 .tt6-chip {
  display: inline-block;
  padding: 3px 11px;
  border: 1px solid var(--tt6-border);
  border-radius: 999px;
  background: #fff;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--tt6-body);
  white-space: nowrap;
}

/* The wrapper keeps .steps-01__img_box so the shared script freezes the GIF
   under prefers-reduced-motion; its live-page geometry is reset here. */
.tt6 .tt6-results__media.steps-01__img_box {
  width: 100%;
  padding: 0;
  text-align: center;
}

.tt6 .tt6-gif,
.tt6 .tt6-results__media canvas {
  width: 100%;
  max-width: 540px;
  height: auto;
  padding: 0;
  border: 1px solid var(--tt6-border);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(37, 44, 97, .06), 0 12px 32px rgba(37, 44, 97, .06);
}

/* The rest of the standard set: names, not explanations. */
.tt6 .tt6-metrics {
  list-style: none;
  margin: 34px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.tt6 .tt6-metrics li {
  padding: 15px 20px;
  border: 1px solid var(--tt6-border);
  border-radius: 12px;
  background: #fff;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--tt6-ink);
}

/* ---------- 5 · Advanced analytics (text beside a figure, alternating) ---------- */

.tt6 .tt6-adv { display: grid; gap: 24px; }

.tt6 .tt6-adv__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 430px);
  gap: 40px;
  align-items: center;
  padding: 26px 32px;
  border: 1px solid var(--tt6-border);
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--tt6-shadow);
}

.tt6 .tt6-adv__item:nth-child(even) .tt6-adv__fig { order: -1; }

.tt6 .tt6-adv__text h3 {
  margin: 0 0 12px;
  font-size: 21px;
  line-height: 1.3;
  color: var(--tt6-ink);
}

.tt6 .tt6-adv__text p {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.62;
  color: var(--tt6-body);
}

.tt6 .tt6-adv__fig { min-width: 0; }

.tt6 .tt6-tree {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--tt6-hairline);
  border-radius: 12px;
  background: #fcfbfb;
}

.tt6 .tt6-tree__links path {
  fill: none;
  stroke: #ddd7d5;
  stroke-width: 2;
  stroke-linecap: round;
}

.tt6 .tt6-tree__nodes circle { fill: #8e8785; }
/* Same element, so these need to out-specify the group rule above. */
.tt6 .tt6-tree__nodes circle.tt6-tree__target { fill: var(--tt6-purple); }
.tt6 .tt6-tree__nodes circle.tt6-tree__unvisited { fill: #e6e1df; }

.tt6 .tt6-tree--traffic .tt6-flow--direct { stroke: var(--tt6-direct); }
.tt6 .tt6-tree--traffic .tt6-flow--indirect { stroke: var(--tt6-indirect); }
.tt6 .tt6-tree--traffic .tt6-flow--elsewhere { stroke: var(--tt6-elsewhere); }
.tt6 .tt6-tree--traffic .tt6-flow--faint { stroke: #ece7e5; }

/* Replay markers. Each keyframe stop is a node in the tree above, so the marker
   travels the same branches that are drawn. Resting positions are set as SVG
   transform attributes, which is what shows when the animation is off. */
.tt6 .tt6-mark circle { stroke: #fff; stroke-width: 1.5; }
.tt6 .tt6-mark--a circle { fill: var(--tt6-direct); }
.tt6 .tt6-mark--b circle { fill: var(--tt6-indirect); }
.tt6 .tt6-mark--c circle { fill: var(--tt6-elsewhere); }

.tt6 .tt6-mark--a { animation: tt6-path-direct 5s linear infinite; }
.tt6 .tt6-mark--b { animation: tt6-path-indirect 5s linear infinite .35s; }
.tt6 .tt6-mark--c { animation: tt6-path-elsewhere 5s linear infinite .7s; }

@keyframes tt6-path-direct {
  0%   { transform: translate(28px, 95px); }
  28%  { transform: translate(112px, 95px); }
  62%  { transform: translate(206px, 128px); }
  88%, 100% { transform: translate(292px, 128px); }
}

@keyframes tt6-path-indirect {
  0%   { transform: translate(28px, 95px); }
  20%  { transform: translate(112px, 95px); }
  38%  { transform: translate(206px, 68px); }
  52%  { transform: translate(206px, 68px); }
  68%  { transform: translate(112px, 95px); }
  86%  { transform: translate(206px, 128px); }
  100% { transform: translate(292px, 128px); }
}

@keyframes tt6-path-elsewhere {
  0%   { transform: translate(28px, 95px); }
  40%  { transform: translate(112px, 34px); }
  75%, 100% { transform: translate(206px, 22px); }
}

.tt6 .tt6-fig__cap {
  margin: 12px 0 0;
  font-size: 13px;
  line-height: 1.5;
  text-align: center;
  color: var(--tt6-muted);
}

.tt6 .tt6-key {
  display: inline-block;
  width: 9px;
  height: 9px;
  margin: 0 5px 0 12px;
  border-radius: 50%;
  vertical-align: baseline;
}

.tt6 .tt6-fig__cap .tt6-key:first-child { margin-left: 0; }
.tt6 .tt6-key--direct { background: var(--tt6-direct); }
.tt6 .tt6-key--indirect { background: var(--tt6-indirect); }
.tt6 .tt6-key--elsewhere { background: var(--tt6-elsewhere); }

/* Scenario completion: one row per participant, one marker per task. */
.tt6 .tt6-scen {
  padding: 20px 22px;
  border: 1px solid var(--tt6-hairline);
  border-radius: 12px;
  background: #fcfbfb;
}

.tt6 .tt6-scen__head,
.tt6 .tt6-scen__row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}

.tt6 .tt6-scen__head {
  margin-bottom: 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .05em;
  text-align: center;
  color: #8a8482;
}

.tt6 .tt6-scen__rows { display: grid; gap: 7px; }

.tt6 .tt6-scen__row i {
  display: block;
  height: 15px;
  border-radius: 4px;
  background: #e6e1df;
}

.tt6 .tt6-scen__row i.ok { background: var(--tt6-indirect); }
.tt6 .tt6-scen__row i.no { background: var(--tt6-elsewhere); }

.tt6 .tt6-scen__row--full {
  padding-bottom: 7px;
  border-bottom: 1px solid var(--tt6-border);
  margin-bottom: 3px;
}

.tt6 .tt6-scen__row--full i.ok { background: var(--tt6-direct); }

/* ---------- 6 · Study quality (risk, then response) ---------- */

.tt6 .tt6-guards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.tt6 .tt6-guard {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--tt6-border);
  border-radius: 16px;
  padding: 32px 26px 26px;
  box-shadow: var(--tt6-shadow);
}

.tt6 .tt6-guard::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5.2px;
}

.tt6 .tt6-guard--a::before { background: #e0bbf5; }
.tt6 .tt6-guard--b::before { background: #ffd1bb; }
.tt6 .tt6-guard--c::before { background: #d4ffbb; }

.tt6 .tt6-guard h3 {
  margin: 0 0 12px;
  font-size: 19px;
  line-height: 1.3;
  color: var(--tt6-ink);
}

/* The risk is stated quietly and the response carries the weight, because the
   response is the part UXbeam already performed. */
.tt6 .tt6-guard__risk {
  margin: 0 0 12px;
  padding-left: 13px;
  border-left: 2px solid var(--tt6-border);
  font-size: 14px;
  line-height: 1.55;
  color: var(--tt6-muted);
}

.tt6 .tt6-guard__fix {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--tt6-body);
}

.tt6 .tt6-guard .tt6-textlink { margin-top: auto; padding-top: 18px; }

/* ---------- 7 · The workflow loop (enlarged) ---------- */

.tt6 .tt6-loop {
  position: relative;
  padding: 52px 40px 118px;
  border: 2px solid var(--tt6-pink-line);
  border-radius: 24px;
  background: linear-gradient(180deg, #fff9fc 0%, #fff 55%);
}

.tt6 .tt6-loop__chain {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 28px;
}

.tt6 .tt6-loop__node {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 168px;
  padding: 26px 15px;
  border: 1px solid var(--tt6-pink-line);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 2px 10px rgba(176, 3, 79, .05);
  text-align: center;
}

.tt6 .tt6-loop__node--focus {
  border-color: var(--tt6-pink);
  border-width: 2px;
  background: var(--tt6-pink-tint);
}

.tt6 .tt6-loop__node + .tt6-loop__node::before {
  content: "\276F";
  position: absolute;
  left: -14px;
  top: 50%;
  transform: translate(-50%, -50%);
  color: var(--tt6-pink);
  font-size: 21px;
  font-weight: 700;
  line-height: 1;
}

.tt6 .tt6-loop__title {
  display: block;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--tt6-ink);
}

.tt6 .tt6-loop__cap {
  display: block;
  margin-top: 9px;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--tt6-muted);
}

/* The return path: a dashed U running from the last node back under the chain
   to the tree-test node, with an arrowhead pointing up into it.
   Column width is (content - 4 gaps) / 5, so with a 28px gap the third node's
   centre sits at 40px + 50% of the content box, and the fifth node's centre at
   28.8px + 90% measured from the right edge. */
.tt6 .tt6-loop__back {
  position: absolute;
  left: calc(40px + (100% - 80px) * .50);
  right: calc(29px + (100% - 80px) * .10);
  top: calc(100% - 108px);
  height: 46px;
  border: 3px dashed var(--tt6-pink-line);
  border-top: 0;
  border-radius: 0 0 22px 22px;
}

.tt6 .tt6-loop__back::before {
  content: "";
  position: absolute;
  left: -9px;
  top: -4px;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 11px solid var(--tt6-pink-line);
}

.tt6 .tt6-loop__backlabel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 30px;
  margin: 0;
  text-align: center;
  font-size: 15.5px;
  font-weight: 700;
  color: var(--tt6-pink-ink);
}

/* ---------- 8 · Handoff strip ---------- */

.tt6 .tt6-proof {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}

.tt6 .tt6-proof li {
  padding: 0 24px;
  border-left: 1px solid #d9e4c4;
}

.tt6 .tt6-proof li:first-child { padding-left: 0; border-left: 0; }
.tt6 .tt6-proof li:last-child { padding-right: 0; }

.tt6 .tt6-proof__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  margin-bottom: 12px;
  border-radius: 50%;
  background: var(--tt6-lilac);
  color: var(--tt6-purple);
}

.tt6 .tt6-proof__mark svg { width: 15px; height: 15px; display: block; }

.tt6 .tt6-proof h3 {
  margin: 0 0 8px;
  font-size: 16px;
  line-height: 1.35;
  color: var(--tt6-ink);
}

.tt6 .tt6-proof p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--tt6-body);
}

/* ---------- 9 · FAQ (single column) ---------- */

.tt6 .tt6-faq { display: grid; gap: 12px; }

.tt6 .tt6-faq details {
  background: #fff;
  border: 1px solid var(--tt6-border);
  border-radius: 14px;
  padding: 2px 22px;
}

.tt6 .tt6-faq summary {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 16px 0;
  font-weight: 700;
  color: var(--tt6-ink);
  cursor: pointer;
  list-style: none;
}

.tt6 .tt6-faq summary::-webkit-details-marker { display: none; }
.tt6 .tt6-faq summary::after { content: "+"; flex: none; color: #a9a3a1; }
.tt6 .tt6-faq details[open] summary::after { content: "\2013"; }

.tt6 .tt6-faq details p {
  margin: 0 0 16px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--tt6-body);
}

/* ---------- 10 · Full-width close ---------- */





/* The shared purple button disappears on a purple band; invert it rather than
   introduce a new button colour. */


/* ---------- Hover lift (cards only; the diagrams stay still) ---------- */

.tt6 .tt6-guard {
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.tt6 .tt6-guard:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(100, 57, 149, .10);
  border-color: #c9b8e0;
}

@media (prefers-reduced-motion: reduce) {
  .tt6 .tt6-guard { transition: none; }
  .tt6 .tt6-guard:hover { transform: none; }
  .tt6 .button { transition: none; }
  .tt6 .button:hover,
  .tt6 .button:focus { transform: none; }

  /* The replay markers fall back to their SVG transform attributes, which place
     each one on the branch it would have travelled. The figure still reads. */
  .tt6 .tt6-mark--a,
  .tt6 .tt6-mark--b,
  .tt6 .tt6-mark--c { animation: none; }
}

/* ---------- Responsive: 1440 → 768 → 390 ---------- */

@media (max-width: 1080px) {
  .tt6 .tt6-hero__grid {
    grid-template-columns: 1fr;
    gap: 34px;
    text-align: center;
  }

  .tt6 .tt6-kicker { justify-content: center; }

  .tt6 .tt6-hero__tagline,
  .tt6 .tt6-hero__desc {
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
  }

  .tt6 .tt6-chips { justify-content: center; }

  .tt6 .tt6-results__grid {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .tt6 .tt6-results__media.steps-01__img_box { order: -1; }

  .tt6 .tt6-adv__item {
    grid-template-columns: 1fr;
    gap: 26px;
    padding: 26px 24px;
  }

  /* One column: the figure always follows its own text. */
  .tt6 .tt6-adv__item:nth-child(even) .tt6-adv__fig { order: 0; }
}

@media (max-width: 900px) {
  .tt6 .tt6-sec { padding: 62px 0; }
  .tt6 .tt6-sec--hero { padding: 54px 0 62px; }
  .tt6 .tt6-sec--strip { padding: 44px 0; }
  .tt6 .tt6-wrap { padding: 0 22px; }
  .tt6 .tt6-head { margin-bottom: 32px; }
  .tt6 .tt6-head h2,
  .tt6 .tt6-strip__h { font-size: 26px; }
  .tt6 .tt6-sub { font-size: 15px; }

  .tt6 .tt6-strip,
  .tt6 .tt6-guards,
  .tt6 .tt6-metrics { grid-template-columns: 1fr; gap: 18px; }

  .tt6 .tt6-metrics { gap: 10px; margin-top: 26px; }
  .tt6 .tt6-strip { gap: 22px; }
  .tt6 .tt6-strip__h { margin-bottom: 22px; }

  /* The journey stacks, and the arrow between cards turns downward — the same
     substitution the live page makes at this width. */
  .tt6 .tt6-story { grid-template-columns: 1fr; gap: 32px; }

  .tt6 .tt6-step + .tt6-step::before {
    content: "\2193";
    left: 50%;
    top: -16px;
    font-size: 28px;
  }

  /* Loop turns vertical; the drawn return path is replaced by a labelled return
     chip so the cycle is still stated, without a fragile arc. */
  .tt6 .tt6-loop { padding: 26px 20px 26px; }

  .tt6 .tt6-loop__chain {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .tt6 .tt6-loop__node { min-height: 0; padding: 20px 16px; }

  .tt6 .tt6-loop__node + .tt6-loop__node::before {
    content: "\276F";
    left: 50%;
    top: -16px;
    transform: translate(-50%, -50%) rotate(90deg);
  }

  .tt6 .tt6-loop__back { display: none; }

  .tt6 .tt6-loop__backlabel {
    position: static;
    margin-top: 24px;
    padding: 12px 16px;
    border: 2px dashed var(--tt6-pink-line);
    border-radius: 999px;
  }

  .tt6 .tt6-loop__backlabel::before { content: "\21BA  "; }

  .tt6 .tt6-proof { grid-template-columns: 1fr 1fr; gap: 26px 0; }
  .tt6 .tt6-proof li:nth-child(odd) { padding-left: 0; border-left: 0; }
  .tt6 .tt6-proof li:nth-child(even) { padding-right: 0; }
}

@media (max-width: 560px) {
  .tt6 .tt6-hero__tagline { font-size: 30px; }
  .tt6 .tt6-head h2,
  .tt6 .tt6-strip__h { font-size: 24px; }
  .tt6 .tt6-guard { padding: 24px 20px; }
  .tt6 .tt6-outcome { grid-template-columns: 1fr; gap: 7px; }
  .tt6 .tt6-loop__title { font-size: 17px; }
  .tt6 .tt6-adv__text h3 { font-size: 19px; }

  .tt6 .tt6-proof { grid-template-columns: 1fr; gap: 24px; }
  .tt6 .tt6-proof li { padding: 0; border-left: 0; }
}


/* B3: the "when to use" support line, matched to the Card Sorting hub so the
   two method pages open their recognition section the same way. */
.tt6 .tt6-strip__sub {
  margin: 0 0 22px;
  font-size: 16px;
  font-weight: 700;
  color: var(--tt6-body);
}


/* B7: optional methodology depth. Disclosure, not hover, so it is reachable by
   keyboard and usable on a phone; the visible risk/fix lines already carry the
   product meaning on their own. */
.tt6 .tt6-why { margin: 0 0 10px; }
.tt6 .tt6-why summary {
  list-style: none; cursor: pointer;
  font-size: 13px; font-weight: 700; color: var(--tt6-purple);
  padding: 6px 0; display: inline-flex; align-items: center; gap: 6px;
}
.tt6 .tt6-why summary::-webkit-details-marker { display: none; }
.tt6 .tt6-why summary::after { content: "+"; font-size: 15px; line-height: 1; }
.tt6 .tt6-why[open] summary::after { content: "\2013"; }
.tt6 .tt6-why summary:focus-visible { outline: 2px solid var(--tt6-purple); outline-offset: 3px; border-radius: 3px; }
.tt6 .tt6-why p { margin: 4px 0 10px; font-size: 14px; line-height: 1.6; color: var(--tt6-body); }


/* B8: the differentiation marker, matched to the Card Sorting hub's device. */
.tt6 .tt6-eyebrow {
  display: inline-flex; align-items: center;
  margin: 0 0 12px; padding: 7px 16px;
  font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--tt6-purple); background: #fff;
  border: 1px solid var(--tt6-line); border-radius: 999px;
}


/* B6: the advanced figures are real product output rather than diagrams, so
   they need a frame and a size cap instead of the SVG sizing they replaced. */
.tt6 .tt6-adv__fig { margin: 0; }
.tt6 .tt6-adv__fig img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--tt6-border); border-radius: 12px;
  background: #fff; box-shadow: var(--tt6-shadow);
}


/* ==================================================================
   SIBLING PARITY PASS (2026-08-16)
   Values below are taken from the Card Sorting hub, which is the current
   reference for the newer public marketing language. Presentation only:
   no copy, no structure, no capability changes.
   ================================================================== */

/* Heading blocks: same measure and the same gap to the content beneath. */
.tt6 .tt6-head { max-width: 720px; margin-bottom: 30px; }
.tt6 .tt6-head h2,
.tt6 .tt6-strip__h { font-size: 30px; line-height: 1.22; }
@media (max-width: 760px) {
  .tt6 .tt6-head h2,
  .tt6 .tt6-strip__h { font-size: 25px; }
}

/* The "when to use" line is a lede, not a label. */
.tt6 .tt6-strip__sub { font-weight: 400; font-size: 16px; line-height: 1.55; margin: 0 0 26px; }

/* Situation cards: the sibling uses framed white cards, not top-ruled strips. */
.tt6 .tt6-strip { gap: 20px; }
.tt6 .tt6-strip__item {
  background: #fff;
  border: 1px solid var(--tt6-border);
  border-top: 4px solid var(--tt6-border);
  border-radius: 14px;
  padding: 22px 20px;
}
.tt6 .tt6-strip__item--a { border-top-color: #643995; }
.tt6 .tt6-strip__item--b { border-top-color: #F90473; }
.tt6 .tt6-strip__item--c { border-top-color: #2f6d1e; }

/* Hero measures. */
.tt6 .tt6-hero__tagline { max-width: 480px; }
.tt6 .tt6-hero__desc { max-width: 470px; line-height: 1.55; }

/* FAQ sits on the same measure as the sibling instead of a narrower column. */
.tt6 .tt6-sec--faq .tt6-wrap--narrow,
.tt6 #tt6-faq .tt6-wrap--narrow { max-width: 1080px; }



/* The recognition section's heading block takes the same 720px measure the
   sibling's .cs-head uses, instead of running the full container width. */
.tt6 .tt6-strip__h,
.tt6 .tt6-strip__sub { max-width: 720px; }

/* The hero text column was capped at 430px, which held the tagline below the
   sibling's 480px measure regardless of the max-width on the tagline itself. */
.tt6 .tt6-hero__grid { grid-template-columns: minmax(0, 490px) minmax(0, 1fr); }


/* The recognition heading was centred while its own lede and cards were left
   aligned. The sibling left-aligns the whole block. */
.tt6 .tt6-strip__h { text-align: left; margin-left: 0; margin-right: 0; }


/* ==================================================================
   ARCHITECTURE PASS (2026-08-16)
   Shared grammar taken from the Card Sorting hub.
   ================================================================== */

/* PART A: remove the accent-card regression. The sibling uses plain white
   cards; the coloured top edges were introduced here by mistake. */
.tt6 .tt6-strip__item,
.tt6 .tt6-guard {
  background: #fff;
  border: 1px solid var(--tt6-border);
  border-top: 1px solid var(--tt6-border);
  border-radius: 14px;
  padding: 22px 20px;
}
.tt6 .tt6-strip__item--a,
.tt6 .tt6-strip__item--b,
.tt6 .tt6-strip__item--c { border-top-color: var(--tt6-border); }
.tt6 .tt6-guard::before { display: none; }

/* PART A: the ownership eyebrow matches the sibling's pink outline. */
.tt6 .tt6-eyebrow,
.tt6 .tt6-why-band__eyebrow {
  display: inline-flex; align-items: center;
  margin: 0 0 16px; padding: 7px 16px;
  font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: #F90473; background: #fff; border: 1px solid #F90473; border-radius: 999px;
}
/* The band carries the marker now, so the section-level one is redundant. */
.tt6 #tt6-quality .tt6-eyebrow { display: none; }

/* PART C: one continuous differentiator field. */
.tt6 .tt6-why-band {
  background: linear-gradient(180deg, #faf6fb 0%, #f7f3fa 55%, #f3fce3 100%);
  border-top: 1px solid #ecdff1;
  border-bottom: 1px solid #ecdff1;
}
.tt6 .tt6-why-band__intro { padding: 56px 0 8px; text-align: left; }
.tt6 .tt6-why-band__line {
  font-size: 20px; line-height: 1.45; font-weight: 400;
  /* Thesis measure: wide enough to avoid a narrow ragged wrap, short enough
     that the line does not read as a full-width paragraph. */
  color: var(--tt6-ink); margin: 0; max-width: 820px;
}
.tt6 .tt6-why-band__num {
  font-size: 13px; font-weight: 700; color: var(--tt6-purple);
  letter-spacing: .06em; margin: 0 0 8px;
}
/* Inside the band the sections sit on the field, not on their own grounds. */
.tt6 .tt6-why-band .tt6-sec { background: transparent; padding: 40px 0; }
.tt6 .tt6-why-band .tt6-head { text-align: left; margin-left: 0; }

/* Soft gray, the third neutral the sibling uses for tool-in-action. */
.tt6 .tt6-sec--gray { background: #faf9f9; }

/* PART B/G: shared capability grid, label plus one sentence. */
.tt6 .tt6-caps,
.tt6 .tt6-complete {
  list-style: none; padding: 0; margin: 28px 0 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px 26px;
}
.tt6 .tt6-caps li,
.tt6 .tt6-complete li { border-top: 2px solid #ecdff1; padding-top: 12px; }
.tt6 .tt6-caps h3,
.tt6 .tt6-complete h3 { font-size: 16px; line-height: 1.3; margin: 0 0 5px; color: var(--tt6-ink); }
.tt6 .tt6-caps p,
.tt6 .tt6-complete p { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--tt6-body); }
.tt6 .tt6-sec--mint .tt6-complete li { border-top-color: #d6e8b8; }

/* PART E: advanced figures framed like the sibling's proof cards. */
.tt6 .tt6-why-band .tt6-adv__item {
  background: #fff; border: 1px solid var(--tt6-border);
  border-radius: 16px; padding: 20px; box-shadow: var(--tt6-shadow);
}

@media (max-width: 900px) {
  .tt6 .tt6-caps, .tt6 .tt6-complete { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .tt6 .tt6-caps, .tt6 .tt6-complete { grid-template-columns: 1fr; }
  .tt6 .tt6-why-band__line { font-size: 18px; }
}


/* PART J: artefact fragments. A small piece of the structure the visitor is
   holding, drawn in the tree vocabulary the product already uses. Deliberately
   different shapes rather than a matched icon set. */
.tt6 .tt6-frag { margin: 0 0 14px; }
.tt6 .tt6-frag svg { display: block; width: 132px; height: auto; }
.tt6 .tt6-frag--three svg { width: 132px; }


/* Complete-tool module, production form adapted to the newer card language.
   Two glyphs carry two meanings: purple infinity for "no limit", pink gem for
   "what you get". The word stays in the label so nothing depends on the mark. */
.tt6 .tt6-free-grid {
  list-style: none; margin: 34px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
}
.tt6 .tt6-free-item {
  display: flex; gap: 13px; align-items: center;
  background: #fff; border: 1px solid var(--tt6-border);
  border-radius: 14px; padding: 20px;
}
.tt6 .tt6-free-mark {
  flex: none; width: 27px; height: 27px; border-radius: 50%;
  font-weight: 700; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.tt6 .tt6-free-item--inf .tt6-free-mark { background: #f4ecfb; color: var(--tt6-purple); font-size: 17px; }
.tt6 .tt6-free-item--val .tt6-free-mark { background: #fdeaf4; color: #F90473; }
.tt6 .tt6-free-mark svg { width: 17px; height: 17px; display: block; }
.tt6 .tt6-free-label { font-size: 15px; font-weight: 600; line-height: 1.35; color: var(--tt6-ink); }
@media (max-width: 900px) { .tt6 .tt6-free-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .tt6 .tt6-free-grid { grid-template-columns: 1fr; } }


/* FAQ desktop layout: the first question spans the column, the remaining ten
   pair off. Same card grammar as the sibling; only the arrangement changes.
   Answers stay collapsed by default (no `open` attribute in the markup), and
   the grid collapses to one column on small screens. */
.tt6 .tt6-faq {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* 16px is the shared FAQ gutter on both the live page and the Card Sorting
     hub; Draft 6 had drifted to 14px. */
  gap: 16px;
  align-items: start;
}
.tt6 .tt6-faq > details:first-child { grid-column: 1 / -1; }
.tt6 .tt6-faq > details { margin: 0; }
@media (max-width: 900px) {
  .tt6 .tt6-faq { grid-template-columns: 1fr; }
  .tt6 .tt6-faq > details:first-child { grid-column: auto; }
}


/* ==================================================================
   ADVANCED-ANALYTICS FIGURES (2026-08-21)
   The three §02 figures are drawn rather than screenshotted: the figure
   column is 430px, and a 1200px product capture squeezed into it left the
   labels ~5px tall. Every value below is taken from the product:
     outcome colours  task-paths.html:452-454  DIRECT #4ADE80 /
                      INDIRECT #86EFAC / ELSEWHERE #C084FC
     one dot per real participant path         task-paths.html:395-402
     branch thickness max(4, count/max*16+4)   getBranchThickness :523
   The replay and traffic figures share one tree so the two views read as
   the same study seen two ways.
   ================================================================== */
.tt6 .tt6-adv__fig--svg .tt6-viz {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--tt6-border); border-radius: 12px;
  background: #fff; box-shadow: var(--tt6-shadow);
  font-family: Lato, Helvetica, sans-serif;
}

/* --- shared tree --- */
.tt6 .tt6-viz__links path,
.tt6 .tt6-viz__link--unused {
  fill: none; stroke: #ded8d6; stroke-width: 1.6;
}
.tt6 .tt6-viz__link--unused { stroke: #efeae8; stroke-dasharray: 4 4; }
.tt6 .tt6-viz__n { fill: #fff; stroke: #c9c3c1; stroke-width: 1.6; }
.tt6 .tt6-viz__n--direct { fill: #4ADE80; stroke: #15803D; }
.tt6 .tt6-viz__n--else   { fill: #C084FC; stroke: #9333EA; }
.tt6 .tt6-viz__n--off    { fill: #fff; stroke: #e8e3e1; }
.tt6 .tt6-viz__counts text {
  font-size: 9.5px; font-weight: 700; fill: #fff; text-anchor: middle;
}
.tt6 .tt6-viz__labels text { font-size: 11.5px; fill: #6f6866; }
.tt6 .tt6-viz__label--key { font-weight: 700; fill: #2f2b2a; }
.tt6 .tt6-viz__label--off { fill: #cfc9c7; }

/* --- 1 · path replay: one dot per participant path, outcome-coloured --- */
.tt6 .tt6-viz__p { opacity: 0; offset-rotate: 0deg; }
.tt6 .tt6-viz__p--r1, .tt6 .tt6-viz__p--r2 { fill: #4ADE80; }
.tt6 .tt6-viz__p--r4 { fill: #86EFAC; }
.tt6 .tt6-viz__p--r3, .tt6 .tt6-viz__p--r5 { fill: #C084FC; }
.tt6 .tt6-viz__p--r1, .tt6 .tt6-viz__p--r2 {
  offset-path: path("M30 134 C 90 134, 110 216, 170 216 C 230 216, 262 190, 322 190");
}
.tt6 .tt6-viz__p--r5 {
  offset-path: path("M30 134 C 90 134, 110 216, 170 216 C 230 216, 262 246, 322 246");
}
.tt6 .tt6-viz__p--r3 {
  offset-path: path("M30 134 H 170 C 230 134, 262 92, 322 92");
}
/* the backtracker: into Shop, back to Home, out again through Help */
.tt6 .tt6-viz__p--r4 {
  offset-path: path("M30 134 C 90 134, 110 44, 170 44 C 110 44, 90 134, 30 134 C 90 134, 110 216, 170 216 C 230 216, 262 190, 322 190");
}
@keyframes tt6-walk {
  0%        { offset-distance: 0%;   opacity: 0; }
  8%        { opacity: 1; }
  88%       { opacity: 1; }
  100%      { offset-distance: 100%; opacity: 0; }
}
.tt6 .tt6-viz__p { animation: tt6-walk 6s linear infinite; }
.tt6 .tt6-viz__p--r2 { animation-delay: 1.1s; }
.tt6 .tt6-viz__p--r3 { animation-delay: 2.0s; }
.tt6 .tt6-viz__p--r4 { animation-delay: 0.5s; animation-duration: 8s; }
.tt6 .tt6-viz__p--r5 { animation-delay: 3.4s; }

/* Reduced motion: the product's own paused-replay state — every marker
   rests part-way along its route instead of moving. */
@media (prefers-reduced-motion: reduce) {
  .tt6 .tt6-viz__p { animation: none; opacity: 1; }
  .tt6 .tt6-viz__p--r1 { offset-distance: 74%; }
  .tt6 .tt6-viz__p--r2 { offset-distance: 41%; }
  .tt6 .tt6-viz__p--r3 { offset-distance: 63%; }
  .tt6 .tt6-viz__p--r4 { offset-distance: 22%; }
  .tt6 .tt6-viz__p--r5 { offset-distance: 55%; }
}

/* --- 2 · traffic view: thickness carries the volume --- */
.tt6 .tt6-viz__flow path { fill: none; stroke-linecap: round; opacity: .92; }
.tt6 .tt6-viz__f--dir  { stroke: #4ADE80; }
.tt6 .tt6-viz__f--ind  { stroke: #86EFAC; }
.tt6 .tt6-viz__f--else { stroke: #C084FC; }
.tt6 .tt6-viz--traffic .tt6-viz__link--unused { opacity: .55; }

/* --- 3 · full-scenario completion: participants x tasks --- */
.tt6 .tt6-mx__h { font-size: 10.5px; font-weight: 700; fill: #6f6866; text-anchor: middle; }
.tt6 .tt6-mx__p { font-size: 10.5px; fill: #9a9391; text-anchor: end; }
.tt6 .tt6-mx__c { fill: #DCFCE7; stroke: #86EFAC; stroke-width: 1; }
.tt6 .tt6-mx__c--miss { fill: #F5E9FE; stroke: #C084FC; }
.tt6 .tt6-mx__done { fill: #4ADE80; stroke: #15803D; stroke-width: 1.4; }
.tt6 .tt6-mx__done--no { fill: #fff; stroke: #ded8d6; }
.tt6 .tt6-mx__tally line { stroke: #e3dedd; stroke-width: 1; }
.tt6 .tt6-mx__t { font-size: 10.5px; fill: #6f6866; text-anchor: middle; }
.tt6 .tt6-mx__t--lab { text-anchor: end; fill: #9a9391; }
.tt6 .tt6-mx__sum { font-size: 13px; font-weight: 700; fill: #2f2b2a; }

/* Reversed rows previously put the figure in the 1fr column, so the two tree
   figures rendered at different widths. Pin the figure column either way —
   only above the 1080px breakpoint, where the row is still two columns. */
@media (min-width: 1081px) {
  .tt6 .tt6-adv__item:nth-child(even) { grid-template-columns: minmax(0, 430px) minmax(0, 1fr); }
}

/* Accumulated replay traces: the routes the dots are walking, outcome-coloured,
   so the paused frame still reads as several different routes. */
.tt6 .tt6-viz__traces path {
  fill: none; stroke-width: 2.6; stroke-linecap: round; opacity: .42;
}
.tt6 .tt6-viz__tr--dir  { stroke: #4ADE80; }
.tt6 .tt6-viz__tr--ind  { stroke: #86EFAC; }
.tt6 .tt6-viz__tr--else { stroke: #C084FC; }
.tt6 .tt6-viz__p--r6 { fill: #4ADE80; animation-delay: 4.2s; }
.tt6 .tt6-viz__p--r7 { fill: #C084FC; animation-delay: 5.1s; }
.tt6 .tt6-viz__p--r6 {
  offset-path: path("M30 134 C 90 134, 110 216, 170 216 C 230 216, 262 190, 322 190");
}
.tt6 .tt6-viz__p--r7 { offset-path: path("M30 134 H 170 C 230 134, 262 92, 322 92"); }
@media (prefers-reduced-motion: reduce) {
  .tt6 .tt6-viz__p--r6 { offset-distance: 33%; }
  .tt6 .tt6-viz__p--r7 { offset-distance: 86%; }
}

/* Narrow screens scale the 460-unit viewBox down to ~304px, which would render
   the tree labels at ~7.6px. Scale the type back up inside the viewBox — 13.5px
   keeps the longest label ("Returns and refunds") inside 460 units. */
@media (max-width: 620px) {
  .tt6 .tt6-viz__labels text { font-size: 13.5px; }
  .tt6 .tt6-viz__counts text { font-size: 11px; }
  .tt6 .tt6-mx__h, .tt6 .tt6-mx__p, .tt6 .tt6-mx__t { font-size: 12.5px; }
  .tt6 .tt6-mx__sum { font-size: 15px; }
}

/* The band intro starts 38px left of the three-card grid below it (wrap 1080px
   from x=180; grid 1004px from x=218). 1040px lands its right edge on the
   grid's, tying the thesis to the content it introduces. Desktop only: below
   1080px the existing 820px measure and 18px size still apply. */
@media (min-width: 1081px) {
  .tt6 .tt6-why-band__line { max-width: 1040px; }
}

/* Interim CTA closing the Only-in band: same shared .bottom_cta/.buttons-set row
   the Card Sorting hub uses between sections; the band needs its own bottom
   inset because the row sits after the last chapter's 40px, not inside one. */
.tt6 .bottom_cta .buttons-set { margin-top: 40px; }      /* = the Card Sorting hub's rule */
.tt6 .tt6-band-cta .buttons-set { margin-top: 0; }        /* the chapter above already ends in 40px */
.tt6 .tt6-band-cta { padding-bottom: 56px; }