/* Text Maker page (v188): characteristics strip, the Animation Center Types,
   the one click Feel stage, the Animation Effects stack builder, the Regular
   presets reel, the My Presets spotlight and the Text Maker vs Text+ recordings.
   Scoped to body.tm-page; tokens come from css/style.css. */

/* ---------- hero spacing and the characteristics strip ---------- */
.tm-page .tm-stats-sec {
  margin-top: clamp(40px, 5vw, 72px);
  padding-bottom: clamp(24px, 3vw, 40px);
}
/* desktop: the hero is laid out big and scaled down, which leaves a hollow
   under it; the strip is pulled up so about 100px separate it from the copy */
@media (min-width: 901px) { .tm-page .tm-stats-sec { margin-top: -66px; } }
.tm-page .tm-stats {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 0.78fr 2.05fr repeat(4, minmax(0, 1fr));
  position: relative;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
/* a soft ice light along the top rule */
.tm-page .tm-stats::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(205, 216, 255, 0.75) 22%, rgba(205, 216, 255, 0.2) 60%, transparent);
  pointer-events: none;
}
.tm-page .tm-stat {
  position: relative;
  padding: 30px 26px 28px;
  min-width: 0;
}
.tm-page .tm-stat + .tm-stat::after {
  content: "";
  position: absolute;
  left: 0;
  top: 28px;
  bottom: 28px;
  width: 1px;
  background: var(--line);
}
.tm-page .tm-stat:first-child { padding-left: 0; }
.tm-page .tm-stat-num {
  display: block;
  font: 600 clamp(38px, 4.2vw, 58px)/1 "Space Grotesk", sans-serif;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #ffffff 0%, #dfe6ff 55%, #9fb2ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.tm-page .tm-stat-lead .tm-stat-num { font-size: clamp(40px, 4.4vw, 64px); letter-spacing: -0.045em; }
.tm-page .tm-stat-label {
  display: block;
  margin-top: 14px;
  font: 600 12.5px/1.4 "Inter", sans-serif;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tm-eyebrow);
}
.tm-page .tm-stat-note {
  display: block;
  margin-top: 8px;
  max-width: 34ch;
  font-size: 14px;
  line-height: 1.5;
  color: var(--tm-soft);
}
/* the sphere section breathes after the strip */
.tm-page .tm-stats-sec + .tm-range { padding-top: clamp(96px, 11vw, 160px); }
@media (max-width: 1100px) {
  /* six stats: two rows of three, split by an inner rule */
  .tm-page .tm-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tm-page .tm-stat { padding: 26px 20px 24px; }
  .tm-page .tm-stat:nth-child(3n+1) { padding-left: 0; }
  .tm-page .tm-stat:nth-child(3n+1)::after { display: none; }
  .tm-page .tm-stat:nth-child(n+4) { border-top: 1px solid var(--tm-rule); }
  .tm-page .tm-stat-lead .tm-stat-num { font-size: clamp(38px, 4.2vw, 58px); }
}
/* phones: all six numerals one size (10,000+ was the smallest glyph in the band) */
@media (max-width: 640px) { .tm-page .tm-stat-num, .tm-page .tm-stat-lead .tm-stat-num { font-size: 34px; letter-spacing: -0.05em; } }
@media (max-width: 640px) {
  /* three rows of two */
  .tm-page .tm-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tm-page .tm-stat { padding: 22px 16px 20px; }
  .tm-page .tm-stat:nth-child(2n+1) { padding-left: 0; }
  .tm-page .tm-stat:nth-child(2n+1)::after { display: none; }
  .tm-page .tm-stat:nth-child(3n+1)::after { display: block; }
  .tm-page .tm-stat:nth-child(2n+2)::after { display: block; }
  .tm-page .tm-stat:nth-child(n+3) { border-top: 1px solid var(--tm-rule); }
  .tm-page .tm-stat:nth-child(n+4) { border-top: 1px solid var(--tm-rule); }
  .tm-page .tm-stat-note { max-width: none; }
}

/* ============================================================
   HAIRLINE PRIMITIVES (v189): the strip above, taken apart so every
   section is built from the same parts. Shared by both restyle builders.
   Tokens:  --tm-light (horizontal light), --tm-light-v (vertical light),
            --tm-num (numeral gradient).
   Parts:   .tm-hl-band      top and bottom rules plus the one light
            .tm-hl-quiet     (with .tm-hl-band) the rules without the light
            .tm-hl-cols      columns in a band, split by vertical hairlines
            .tm-hl-col       one column (first one flush left)
            .tm-hl-num       light numeral (size: --tm-num-size, default 32px)
            .tm-hl-label     tracked uppercase label
            .tm-hl-note      quiet supporting note
            .tm-hl-link      secondary text link with a hairline underline and an arrow
            .tm-hl-opt       text option button (the same recipe .tm-chip now wears)
   ============================================================ */
.tm-page {
  --tm-radius: 16px;
  --tm-light: linear-gradient(90deg, transparent, rgba(205, 216, 255, 0.75) 22%, rgba(205, 216, 255, 0.2) 60%, transparent);
  --tm-light-v: linear-gradient(180deg, transparent, rgba(205, 216, 255, 0.75) 22%, rgba(205, 216, 255, 0.2) 60%, transparent);
  --tm-num: linear-gradient(180deg, #ffffff 0%, #dfe6ff 55%, #9fb2ff 100%);
  /* small numerals (under 24px) end lighter, so they keep contrast on the open backdrop */
  --tm-num-sm: linear-gradient(180deg, #ffffff 0%, #e4eaff 55%, #c3cfff 100%);
  /* labels and notes now sit on the open backdrop, not in panels: a step lighter */
  --tm-eyebrow: #b3c4ff;
  --tm-soft: #bdc8f0;
}
.tm-page .tm-hl-band {
  position: relative;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.tm-page .tm-hl-band::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -1px;
  height: 1px;
  background: var(--tm-light);
  pointer-events: none;
}
.tm-page .tm-hl-band.tm-hl-quiet::before { content: none; }
.tm-page .tm-hl-cols {
  list-style: none;
  margin-left: 0;
  margin-right: 0;
  padding: 0;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
}
.tm-page .tm-hl-col { position: relative; min-width: 0; padding: 30px 26px 28px; }
.tm-page .tm-hl-col:first-child { padding-left: 0; }
.tm-page .tm-hl-col + .tm-hl-col::after {
  content: "";
  position: absolute;
  left: 0;
  top: 28px;
  bottom: 28px;
  width: 1px;
  background: var(--line);
}
.tm-page .tm-hl-num {
  display: block;
  font: 600 var(--tm-num-size, 32px)/1 "Space Grotesk", sans-serif;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
  background: var(--tm-num);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.tm-page .tm-hl-label {
  display: block;
  font: 600 12.5px/1.4 "Inter", sans-serif;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tm-eyebrow);
}
.tm-page .tm-hl-num + .tm-hl-label { margin-top: 14px; }
.tm-page .tm-hl-note {
  display: block;
  max-width: 46ch;
  font-size: 14px;
  line-height: 1.5;
  color: var(--tm-soft);
}
.tm-page .tm-hl-label + .tm-hl-note { margin-top: 8px; }
.tm-page .tm-hl-link {
  display: inline-block;
  padding: 12px 2px;
  font: 600 15px/1.3 "Inter", sans-serif;
  color: var(--tm-bright);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
  text-decoration-color: rgba(205, 216, 255, 0.4);
  transition: text-decoration-color 0.15s ease;
}
.tm-page .tm-hl-link::after {
  content: "\2192";
  display: inline-block;
  margin-left: 10px;
  text-decoration: none;
  transition: translate 0.15s ease;
}
.tm-page button.tm-hl-link { appearance: none; margin: 0; border: 0; border-radius: 0; background: none; cursor: pointer; }
.tm-page .tm-hl-link:hover { color: #fff; text-decoration-color: var(--tm-ice); }
.tm-page .tm-hl-link:hover::after { translate: 3px 0; }
@media (prefers-reduced-motion: reduce) { .tm-page .tm-hl-link::after { transition: none; } }

/* the text option control: every chip on the page becomes a plain text
   button; the pressed one turns white with a solid 1px bar under it (the
   band's top rule keeps the one light, so several groups never show several) */
.tm-page .tm-chips { gap: 2px 24px; }
.tm-page .tm-chip, .tm-page .tm-hl-opt {
  position: relative;
  height: auto;
  min-height: 40px;
  padding: 10px 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--tm-soft);
  font: 600 14px/1.3 "Inter", sans-serif;
  cursor: pointer;
  transition: color 0.15s ease;
}
.tm-page .tm-chip:hover, .tm-page .tm-hl-opt:hover { background: none; color: #fff; }
.tm-page .tm-chip[aria-pressed="true"], .tm-page .tm-chip[aria-selected="true"], .tm-page .tm-chip.is-active,
.tm-page .tm-hl-opt[aria-pressed="true"], .tm-page .tm-hl-opt[aria-selected="true"] {
  background: none;
  border-color: transparent;
  color: #fff;
}
.tm-page .tm-chip::after, .tm-page .tm-hl-opt::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 4px;
  height: 1px;
  background: rgba(205, 216, 255, 0.6);
  opacity: 0;
  transition: opacity 0.15s ease;
  pointer-events: none;
}
.tm-page .tm-chip[aria-pressed="true"]::after, .tm-page .tm-chip[aria-selected="true"]::after, .tm-page .tm-chip.is-active::after,
.tm-page .tm-hl-opt[aria-pressed="true"]::after, .tm-page .tm-hl-opt[aria-selected="true"]::after { opacity: 1; }
/* Windows contrast themes drop the bars' colours: draw them in the system text colour */
@media (forced-colors: active) {
  .tm-page .tm-chip[aria-pressed="true"]::after, .tm-page .tm-chip[aria-selected="true"]::after, .tm-page .tm-chip.is-active::after,
  .tm-page .tm-hl-opt[aria-pressed="true"]::after, .tm-page .tm-hl-opt[aria-selected="true"]::after,
  .tm-page .tm-views [aria-selected="true"]::after, .tm-page .tm-strip-segs a[aria-current="true"]::after {
    forced-color-adjust: none;
    background: CanvasText;
    opacity: 1;
    height: 2px;
  }
  :root .tm-page #finish details.tm-sw-row[open]::before, :root .tm-page .tm-qa details[open]::before { forced-color-adjust: none; background: CanvasText; width: 2px; }
}

/* shared details every section inherits */
.tm-page .eyebrow { letter-spacing: 0.16em; line-height: 1.4; }
.tm-page .eyebrow, .tm-page .tm-hl-label, .tm-page .tm-feel-now { text-wrap: balance; }
.tm-page :focus-visible { outline: 1px solid var(--tm-ice); outline-offset: 3px; }
.tm-page .btn { box-shadow: inset 0 1px 0 #fff; }
.tm-page .btn:hover { box-shadow: inset 0 1px 0 #fff; transform: translateY(-1px); }
.tm-page .tm-pausebtn, .tm-page .tm-vpause, .tm-page .tm-strip-pause {
  width: 36px;
  height: 36px;
  border: 1px solid rgba(205, 216, 255, 0.3);
  background: rgba(3, 5, 15, 0.4);
  box-shadow: none;
  transition: border-color 0.15s ease, opacity 0.15s ease;
}
/* over footage the button keeps a dark fill, so it and its icon stay readable on bright frames */
.tm-page .tm-vpause, .tm-page .tm-frame-pause { background: rgba(3, 5, 15, 0.66); }
.tm-page .tm-pausebtn:hover, .tm-page .tm-vpause:hover, .tm-page .tm-strip-pause:hover { border-color: var(--tm-ice); }
.tm-page .tm-pausebtn svg, .tm-page .tm-vpause svg, .tm-page .tm-strip-pause svg { stroke-width: 2; }

/* ============================================================
   HAIRLINE SECTIONS, part 1: hero, range, tutorials, answers, buy and
   the bottom strip (media and demo chapters are restyled further down).
   ============================================================ */

/* ---------- hero ---------- */
.tm-page .tm-hero::before { content: none; }
.tm-page .tm-hero h1 { filter: none; }
.tm-page .tm-hero .tm-hero-kicker { margin: 0; }
.tm-page .tm-hero .hero-cta { align-items: center; gap: 16px 32px; }
.tm-page .thumb3d,
.tm-page .thumb3d .hero-art,
.tm-page .thumb3d .hero-art-alt { border-radius: 16px; }
.tm-page .thumb3d .hero-art,
.tm-page .thumb3d .hero-art-alt { border: 1px solid var(--line); box-shadow: none; }
/* the desktop thumbnail is laid out big and scaled to about half, so its
   radius, border and pause button are set in that big space */
@media (min-width: 901px) {
  .tm-page .hero-scroll .thumb3d,
  .tm-page .hero-scroll .thumb3d .hero-art,
  .tm-page .hero-scroll .thumb3d .hero-art-alt { border-radius: 30px; border-width: 2px; }
  .tm-page .hero-scroll .tm-vpause { width: calc(var(--bigw) * 0.061); height: calc(var(--bigw) * 0.061); border-width: 2px; }
}

/* ---------- range: the numbers band and the contents row ---------- */
.tm-page .tm-contents p {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr);
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  align-items: baseline;
  margin: 40px 0 0;
  font-size: 14px;
  line-height: 1.4;
}
.tm-page .tm-contents-lead { padding: 20px 24px 18px 0; }
.tm-page .tm-contents p a {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 18px 16px 16px;
  text-decoration: none;
  white-space: normal;
  color: inherit;
}
.tm-page .tm-contents p a::after {
  content: "";
  position: absolute;
  left: 0;
  top: 18px;
  bottom: 18px;
  width: 1px;
  background: var(--line);
}
.tm-page .tm-contents-num { --tm-num-size: 22px; flex: none; background: var(--tm-num-sm); -webkit-background-clip: text; background-clip: text; }
.tm-page .tm-contents .tm-contents-name { margin-top: 0; color: var(--tm-soft); transition: color 0.15s ease; min-width: 0; overflow-wrap: normal; word-break: normal; hyphens: manual; }
.tm-page .tm-contents p a:hover .tm-contents-name { color: #fff; }
/* without the sphere the contents row still keeps its own band, a step below the numbers */
html.low-fx .tm-page .tm-range .tm-contents p { margin-top: 40px; }
/* 821 to 1100: the lead label takes its own row, the six chapters share the next */
@media (min-width: 821px) and (max-width: 1100px) {
  .tm-page .tm-contents p { grid-auto-flow: row; grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .tm-page .tm-contents-lead { grid-column: 1 / -1; padding: 18px 0 0; }
  .tm-page .tm-contents p a:nth-of-type(1) { padding-left: 0; }
  .tm-page .tm-contents p a:nth-of-type(1)::after { display: none; }
}
@media (max-width: 820px) {
            .tm-page .tm-contents p { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 40px; }
  .tm-page .tm-contents-lead { grid-column: 1 / -1; padding: 18px 0 6px; }
  .tm-page .tm-contents p a { padding: 14px 14px 14px 0; border-top: 1px solid var(--tm-rule); }
  .tm-page .tm-contents p a:nth-of-type(even) { padding-left: 14px; }
  .tm-page .tm-contents p a::after { display: none; }
  .tm-page .tm-contents p a:nth-of-type(even)::after { display: block; top: 14px; bottom: 14px; }
}
/* the one compact label step (numbers band and Types captions, phones only) */
@media (max-width: 640px) {
  }

/* ---------- answers: facts as a quiet band, questions on hairlines ---------- */
.tm-page .tm-runins { gap: 0; margin: 32px 0 0; }
.tm-page .tm-runins li { padding: 16px 0; font-size: 14px; line-height: 1.5; color: var(--tm-soft); }
.tm-page .tm-runins li + li { border-top: 1px solid var(--tm-rule); }
.tm-page .tm-runins b.tm-hl-label { margin-bottom: 6px; font-weight: 600; color: var(--tm-eyebrow); }
.tm-page .tm-qa details { position: relative; padding: 20px 0; border-top: 1px solid var(--tm-rule); }
.tm-page .tm-qa details:first-child { border-top-color: var(--line); }
.tm-page .tm-qa details:last-child { border-bottom: 1px solid var(--line); }
/* the open question's bar is the list's one light; it sits just outside the
   column, so the question text stays flush with the heading edge */
.tm-page .tm-qa details[open]::before {
  content: "";
  position: absolute;
  left: -14px;
  top: 18px;
  bottom: 18px;
  width: 1px;
  background: var(--tm-light-v);
  pointer-events: none;
}
.tm-page .tm-qa summary { font-size: 16px; color: var(--tm-body); transition: color 0.15s ease; }
.tm-page .tm-qa summary:hover, .tm-page .tm-qa details[open] summary { color: #fff; }
.tm-page .tm-qa summary::after { font: 300 22px/1 "Inter", sans-serif; color: var(--tm-soft); }
.tm-page .tm-qa details p { font-size: 15px; line-height: 1.55; color: var(--tm-soft); }

/* ---------- buy: the price and the specs share one band ---------- */
.tm-page .tm-buy-grid { align-items: stretch; gap: 0; }
.tm-page .tm-price { position: relative; padding: 34px 40px 30px 0; }
.tm-page .tm-price-num {
  font: 600 clamp(56px, 6vw, 84px)/1 "Space Grotesk", sans-serif;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
  background: var(--tm-num);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.tm-page .tm-price-once { margin-top: 16px; }
@media (max-width: 400px) { .tm-page .tm-price-once { letter-spacing: 0.1em; } }
.tm-page .tm-price-inc { margin-top: 8px; max-width: 40ch; }
.tm-page .tm-price-btn { max-width: 360px; margin-top: 26px; }
.tm-page .tm-price-foot { margin-top: 12px; text-align: left; }
.tm-page .tm-spec { position: relative; padding: 12px 0 12px 40px; }
.tm-page .tm-spec::after {
  content: "";
  position: absolute;
  left: 0;
  top: 28px;
  bottom: 28px;
  width: 1px;
  background: var(--line);
}
.tm-page .tm-spec > div { padding: 18px 0; border-top: 0; }
.tm-page .tm-spec > div + div { border-top: 1px solid var(--tm-rule); }
.tm-page .tm-spec > div:last-child { border-bottom: 0; }
.tm-page .tm-spec dt { letter-spacing: 0.16em; line-height: 1.4; padding-top: 3px; }
.tm-page .tm-spec dd { font-size: 15px; line-height: 1.5; color: var(--tm-bright); }
@media (max-width: 820px) {
  .tm-page .tm-buy-grid { gap: 0; }
  .tm-page .tm-price { padding: 28px 0 26px; }
  .tm-page .tm-price-btn { max-width: none; }
  .tm-page .tm-spec { padding: 0; border-top: 1px solid var(--tm-rule); }
  .tm-page .tm-spec::after { display: none; }
}

/* ---------- the bottom strip: solid, a top hairline and the one light ---------- */
/* no reserve under the footer: the strip is already gone from #buy on */
.tm-page { padding-bottom: 0; }
html:has(> body.tm-page) { scroll-padding-bottom: 76px; }
.tm-page .tm-strip {
  left: 0;
  right: 0;
  bottom: 0;
  width: auto;
  height: 60px;
  padding: 0 max(16px, calc((100vw - 1032px) / 2));
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: rgb(4, 6, 20);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  transform: translateY(calc(100% + 2px));
  /* hidden by position only (not visibility), so Tab still reaches its
     chapter links and Pause motion; focus slides it back in */
  visibility: visible;
  pointer-events: none;
  transition: transform 0.35s cubic-bezier(0.2, 0.9, 0.25, 1);
}
.tm-page .tm-strip.is-on, .tm-page .tm-strip:has(:focus-visible) { transform: translateY(0); pointer-events: auto; }
@media (prefers-reduced-motion: reduce) { .tm-page .tm-strip { transition: none; } }
html.low-fx .tm-page .tm-strip { background: rgb(4, 6, 20); }
.tm-page .tm-strip::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -1px;
  height: 1px;
  background: var(--tm-light);
  pointer-events: none;
}
.tm-page .tm-strip-name { font-weight: 600; }
.tm-page .tm-strip-name b {
  font: 600 16px/1 "Space Grotesk", sans-serif;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  background: var(--tm-num-sm);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.tm-page .tm-strip-segs li { position: relative; }
.tm-page .tm-strip-segs li + li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 18px;
  bottom: 18px;
  width: 1px;
  background: var(--tm-rule);
}
.tm-page .tm-strip-segs a {
  height: 40px;
  line-height: 40px;
  border-radius: 0;
  background: none;
  color: var(--tm-soft);
}
.tm-page .tm-strip-segs a:hover, .tm-page .tm-strip-segs a[aria-current="true"] { background: none; color: #fff; }
/* the current chapter gets a solid bar, so the strip keeps a single light */
.tm-page .tm-strip-segs a::after {
  content: "";
  position: absolute;
  left: 30%;
  right: 30%;
  bottom: 4px;
  height: 1px;
  background: rgba(205, 216, 255, 0.6);
  opacity: 0;
  transition: opacity 0.15s ease;
}
.tm-page .tm-strip-segs a[aria-current="true"]::after { opacity: 1; }
.tm-page .tm-strip-pause { background: none; border-color: var(--line); }
.tm-page .tm-strip-pause:hover { border-color: var(--tm-ice); }
/* narrower strips: a name that does not fit on one line takes two, never an ellipsis */
@media (max-width: 1279px) {
  .tm-page .tm-strip-segs a {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    font-size: 12.5px;
    line-height: 1.15;
    white-space: normal;
    text-overflow: clip;
  }
}
/* the strip's Tutorials link marks itself while the Tutorials section is mid screen */
.tm-page .tm-strip-tut { position: relative; }
.tm-page .tm-strip-tut[aria-current="true"] { color: #fff; }
.tm-page .tm-strip-tut::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 1px;
  background: rgba(205, 216, 255, 0.6);
  opacity: 0;
  transition: opacity 0.15s ease;
}
.tm-page .tm-strip-tut[aria-current="true"]::after { opacity: 1; }
/* phones: no segments, so the current chapter is named after the price */
.tm-page .tm-strip-now { display: none; }
@media (max-width: 820px) {
  .tm-page .tm-strip { padding: 0 12px 0 16px; }
  .tm-page .tm-strip-now:not([hidden]) {
    display: flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
    margin-right: auto;
    white-space: nowrap;
    overflow: hidden;
  }
  .tm-page .tm-strip-now:not([hidden]) ~ .tm-strip-segs, .tm-page .tm-strip:has(.tm-strip-now:not([hidden])) .tm-strip-name { margin-right: 0; }
  .tm-page .tm-strip-now-num {
    font: 600 15px/1 "Space Grotesk", sans-serif;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    background: var(--tm-num-sm);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
  .tm-page .tm-strip-now-name {
    overflow: hidden;
    text-overflow: ellipsis;
    font: 600 11.5px/1.4 "Inter", sans-serif;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--tm-eyebrow);
  }
}
/* small phones: while a chapter is named, it takes the name's place (Buy now stays) */
@media (max-width: 480px) {
  .tm-page .tm-strip:has(.tm-strip-now:not([hidden])) .tm-strip-name { display: none; }
}
@media (max-width: 400px) {
  .tm-page .tm-strip-now-name { letter-spacing: 0.1em; }
}
/* where scroll timelines run, the playhead itself is the light */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .tm-page .tm-strip::before { display: none; }
    .tm-page .tm-strip::after { left: 0; right: 0; top: -1px; height: 1px; border-radius: 0; background: var(--tm-light); }
  }
}

/* ---------- a) the four Types ---------- */
/* four black square stages; under them the captions run as one strip:
   band rules bridged across the 22px gaps, vertical dividers in the gaps,
   the one light along the top rule (drawn once, from the first caption) */
.tm-page .tm-types {
  --tm-types-gap: 22px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0 var(--tm-types-gap);
}
.tm-page .tm-type-stage {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--tm-stage);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: none;
}
.tm-page .tm-type-stage > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (max-width: 900px) {
  .tm-page .tm-type-stage { border-radius: 14px; }
}

/* ---------- a sub-section sits closer to its chapter ---------- */
.tm-page .tm-sec.tm-sub { padding-top: clamp(40px, 5vw, 72px); }
/* every hairline section shares the strip's column (the wrap's content box):
   both edges line up with .tm-stats, the numbers band, the lab and Buy.
   Scoped to this page's own sections; the helpers' chapters keep theirs. */
.tm-page :is(#animation, #feel, #stack, #regular, #save, #finish, #advanced, #styling, #versus, #tutorials) .tm-wide { width: 100%; }
@media (min-width: 1101px) {
  .tm-page #feel .tm-feel, .tm-page #stack .tm-builder, .tm-page #save .tm-save,
  .tm-page #finish .tm-sw-grid,
  .tm-page #advanced .tma-grid, .tm-page #styling .tma-grid { grid-template-columns: 340px minmax(0, 1fr); }
  /* the first fact column ends on the stage edge above it (340px + the 40px gap) */
  .tm-page .tm-save-facts { grid-auto-flow: row; grid-template-columns: 380px repeat(2, minmax(0, 1fr)); }
}
/* Order (5) and the six effects sit in three columns, so no option wraps alone */
.tm-page #feel-order-l + .tm-chips, .tm-page .tm-builder .tm-chips { display: grid; grid-template-columns: repeat(3, max-content); column-gap: 22px; justify-items: start; }
/* the band's one light rides its top rule, like the strip */
.tm-page .tm-feel-controls::before, .tm-page .tm-builder-controls::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -1px;
  height: 1px;
  background: var(--tm-light);
  pointer-events: none;
}
/* the easing graph: a transparent hairline box, the curve drawn in the ice light */
.tm-page .tm-feel-graph {
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 3;
  width: 150px;
  height: 100px;
  border-radius: 0;
  background: none;
  border: 1px solid var(--line);
}
/* the view switch: two text tabs, the selected one white with the light under it */
.tm-page .tm-views {
  display: inline-flex;
  gap: 26px;
  margin: 0 0 10px;
  padding: 0;
  border: 0;
  border-radius: 0;
}

/* ---------- Regular presets reel ---------- */
/* on the page column like the strip: no inset, no centring */
.tm-page .tm-regular .tm-reel { max-width: none; margin: 48px 0 0; padding-left: 0; padding-right: 0; }
/* the reel's option names: one hairline band as wide as the frame above it,
   the one light on its top rule, the pressed name's solid bar under it */
.tm-page .tm-reel .tm-chips::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -1px;
  height: 1px;
  background: var(--tm-light);
  pointer-events: none;
}
/* the fourteen Regular names: an aligned grid (6 + 6 on desktop, two columns on phones) */
.tm-page #regular .tm-reel .tm-chips {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  justify-items: start;
  column-gap: 16px;
}
.tm-page .tm-reel .tm-chips {
  position: relative;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0 26px;
  box-sizing: border-box;
  width: min(1120px, calc((100vh - 260px) * 16 / 9), 100%);
  width: min(1120px, calc((100svh - 260px) * 16 / 9), 100%);
  margin: 24px auto 0;
  padding: 8px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
/* the #regular reel sits on the page column and fills it */
.tm-page #regular .tm-reel-frame, .tm-page #regular .tm-reel .tm-chips { width: 100%; }
/* the clip name on the frame: a tracked label, no pill */
.tm-page .tm-badge {
  left: 18px;
  bottom: 18px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  font: 600 12.5px/1.4 "Inter", sans-serif;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #dfe6ff;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.9);
}

/* ---------- My Presets spotlight ---------- */
.tm-page .tm-save {
  display: grid;
  grid-template-columns: 380px minmax(0, 1fr);
  gap: 40px;
  align-items: start;
}
.tm-page .tm-save-panel {
  padding: 0 0 18px;
  border-radius: 14px;
  background: #1c1c1f;
  border: 1px solid var(--line);
  box-shadow: none;
  font-family: "Inter", sans-serif;
  overflow: hidden;
}
.tm-page .tm-save-head {
  padding: 12px 16px;
  background: #151517;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  font: 600 13px/1 "Inter", sans-serif;
  color: #7fe0a8;
}
.tm-page .tm-save-label {
  display: block;
  margin: 16px 16px 8px;
  font-size: 12px;
  color: #a9a9b2;
}
.tm-page .tm-save-input {
  display: block;
  width: calc(100% - 32px);
  margin: 0 16px;
  padding: 10px 12px;
  border-radius: 6px;
  border: 1px solid #3a3a40;
  background: #0f0f11;
  font: 500 15px/1.2 "Inter", sans-serif;
  color: #f0f0f3;
  box-sizing: border-box;
}
.tm-page .tm-save-input:focus { outline: 2px solid #5b7cff; outline-offset: 1px; border-color: #5b7cff; }
.tm-page .tm-save-btn {
  display: block;
  width: calc(100% - 32px);
  margin: 12px 16px 0;
  padding: 11px 12px;
  border: 1px solid #3a3a40;
  border-radius: 6px;
  background: #2a2a2f;
  font: 600 14px/1.2 "Inter", sans-serif;
  color: #f0f0f3;
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.tm-page .tm-save-btn:hover { background: #34343a; }
.tm-page .tm-save-btn:focus-visible { outline: 2px solid #5b7cff; outline-offset: 2px; }
.tm-page .tm-save-status { min-height: 20px; margin: 10px 16px 0; font-size: 13px; color: #a9a9b2; }
.tm-page .tm-save-status.is-ok { color: #7fe0a8; }
.tm-page .tm-save-list { margin-top: 6px; border-top: 1px solid rgba(255, 255, 255, 0.06); }
.tm-page .tm-save-list ul { list-style: none; margin: 0 16px; padding: 0; }
.tm-page .tm-save-list li {
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 14px;
  color: #e6e6ea;
}
.tm-page .tm-save-list li + li { margin-top: 2px; }
.tm-page .tm-save-list li.is-idle { color: #7d7d86; }
.tm-page .tm-save-list li.is-new { background: rgba(91, 124, 255, 0.22); color: #fff; }
/* markup: ul.tm-save-facts.tm-hl-band.tm-hl-cols > li.tm-hl-col (light title, label, note),
   the last child of .tm-save: a full width band under the panel and the stage, like the strip */
.tm-page .tm-save-facts { grid-column: 1 / -1; margin: 40px 0 0; }
.tm-page .tm-save-facts .tm-hl-col { padding: 26px 22px 24px; }
.tm-page .tm-save-facts .tm-hl-col:first-child { padding-left: 0; }
.tm-page .tm-save-facts .tm-hl-col + .tm-hl-col::after { top: 26px; bottom: 24px; }
.tm-page .tm-save-facts .tm-hl-num { --tm-num-size: clamp(26px, 2.6vw, 34px); letter-spacing: -0.03em; }
.tm-page .tm-save-facts .tm-hl-num + .tm-hl-label { margin-top: 12px; }
.tm-page .tm-save-facts .tm-hl-note { max-width: 30ch; }
@media (max-width: 1100px) {
  .tm-page .tm-save { grid-template-columns: 320px minmax(0, 1fr); gap: 28px; }
  .tm-page .tm-save-facts .tm-hl-col { padding: 22px 16px 20px; }
  .tm-page .tm-save-facts .tm-hl-col:first-child { padding-left: 0; }
  .tm-page .tm-save-facts .tm-hl-col + .tm-hl-col::after { top: 22px; bottom: 20px; }
}
@media (max-width: 820px) {
  .tm-page .tm-save { grid-template-columns: minmax(0, 1fr); }
  .tm-page .tm-save-stage { order: -1; }
}
@media (max-width: 640px) {
  .tm-page .tm-save-facts { grid-auto-flow: row; grid-template-columns: minmax(0, 1fr); }
  .tm-page .tm-save-facts .tm-hl-col { padding: 20px 0 18px; }
  .tm-page .tm-save-facts .tm-hl-col + .tm-hl-col { border-top: 1px solid var(--tm-rule); }
  .tm-page .tm-save-facts .tm-hl-col + .tm-hl-col::after { display: none; }
}

/* ---------- Text Maker vs Text+ recordings ---------- */
.tm-page .tm-versus { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.tm-page .tm-versus-side { margin: 0; }
.tm-page .tm-versus-side figcaption {
  position: relative;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--tm-rule);
  font-size: 14px;
  line-height: 1.5;
  color: var(--tm-soft);
}
.tm-page .tm-versus-side figcaption b {
  display: block;
  margin: 0 0 6px;
  font: 600 12.5px/1.4 "Inter", sans-serif;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tm-eyebrow);
}
.tm-page .tm-versus-side.is-tm .tm-frame { border-color: var(--line); }
/* the Text Maker side carries the pair's one light */
.tm-page .tm-versus-side.is-tm figcaption { border-top-color: var(--line); }
.tm-page .tm-versus-side.is-tm figcaption::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -1px;
  height: 1px;
  background: var(--tm-light);
  pointer-events: none;
}
.tm-page .tm-versus-side.is-tm figcaption b { color: #fff; }
@media (max-width: 820px) { .tm-page .tm-versus { grid-template-columns: minmax(0, 1fr); } }

/* ============================================================
   HAIRLINE SECTIONS, part 2: the media and demo chapters. Stages, the
   sphere and wave tiles, the lab's outer frame, the presets coverflow,
   the reels, the effects list and the Impact interlude.
   ============================================================ */

/* ---------- every black stage: a hairline, a small radius, no glow ---------- */
.tm-page .tm-frame { border-radius: 16px; box-shadow: none; }
.tm-page .tm-frame::before { content: none; }
@media (max-width: 820px) { .tm-page .tm-frame { border-radius: 14px; } }

/* ---------- the dark band fill is gone: the page stays one open space ---------- */
.tm-page .tm-band::before { content: none; }

/* ---------- sphere tiles (the JS moves them: no pseudo-elements here) ---------- */
.tm-page .scw-tile { border: 1px solid var(--line); border-radius: 14px; box-shadow: none; }
.tm-page .scw-tile.front { border-color: rgba(205, 216, 255, 0.4); box-shadow: none; }

/* ---------- the lab: Resolve inside, the page's hairline outside ---------- */
.tm-page .tm-stage { position: relative; }
.tm-page .lab { border-radius: 16px; border: 1px solid var(--line); box-shadow: none; }
/* the light rides the top rule, outside .lab (it clips its overflow) */
.tm-page .tm-stage::before {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  top: 0;
  height: 1px;
  z-index: 2;
  background: var(--tm-light);
  pointer-events: none;
}

/* ---------- wave tiles: open black media with a hairline ---------- */
.tm-page .wave-tile {
  background: var(--tm-stage);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: none;
}
.tm-page .wave-tile .wave-label {
  padding: 28px 12px 11px;
  font: 600 12.5px/1.4 "Inter", sans-serif;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #dfe6ff;
  background: linear-gradient(0deg, rgba(3, 5, 15, 0.82), rgba(3, 5, 15, 0));
}
/* the scrollable strip (phones, low-fx) takes keyboard focus: its edge fade
   would also fade the focus ring, so the fade steps aside while focused */
:root .tm-page .wave-stage:focus-visible { -webkit-mask-image: none; mask-image: none; outline-offset: -2px; }

/* ---------- presets coverflow: black media, a caption under the front one ---------- */
.tm-page .feature-card {
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}
.tm-page .feature-card .fmedia {
  box-sizing: border-box;
  overflow: hidden;
  background: var(--tm-stage);
  border: 1px solid var(--line);
  border-radius: 16px;
  transition: border-color 0.3s ease;
}
/* side cards dim their picture only (--fade, set by the coverflow), so the
   black stage stays opaque instead of letting the sky through */
.tm-page .feature-card .fmedia > video, .tm-page .feature-card .fmedia > img { opacity: var(--fade, 1); }
.tm-page .feature-card.front { border-color: transparent; box-shadow: none; }
.tm-page .feature-card.front .fmedia { border-color: rgba(205, 216, 255, 0.34); }
/* the one light, on the front stage's top rule (no inherit: the cards move) */
.tm-page .feature-card.front::before {
  content: "";
  position: absolute;
  inset: auto;
  left: 18px;
  right: 18px;
  top: 0;
  height: 1px;
  z-index: 2;
  border-radius: 0;
  background: var(--tm-light);
  background-size: auto;
  opacity: 1;
  animation: none;
  mix-blend-mode: normal;
  pointer-events: none;
}
.tm-page .feature-card .fbody { padding: 22px 2px 0; transition: opacity 0.3s ease; }
.tm-page .feature-card .fbody h3 {
  margin: 0 0 8px;
  font: 600 12.5px/1.4 "Inter", sans-serif;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tm-eyebrow);
}
.tm-page .feature-card.front .fbody h3 { color: #fff; }
.tm-page .feature-card .fbody p { max-width: 36ch; font-size: 14px; line-height: 1.5; color: var(--tm-soft); }
/* in the moving coverflow only the front card speaks; without a card body
   the stage is shorter, so the arrows stay close to the caption */
@media (min-width: 821px) {
  html:not(.low-fx) .tm-page .feature-stage .feature-card:not(.front) .fbody { opacity: 0; }
  html:not(.low-fx) .tm-page .feature-stage[data-carousel-presets] { height: 380px; }
  html:not(.low-fx) .tm-page .feature-stage[data-carousel-presets] > .feature-card { height: 330px; margin-top: -165px; }
}
@media (prefers-reduced-motion: reduce) { .tm-page .feature-card .fbody, .tm-page .feature-card .fmedia { transition: none; } }

/* arrows: hairline circles; the live position between them as a label and a light numeral */
.tm-page .tm-flow-ctl { gap: 22px; margin-top: 18px; }
.tm-page .tm-flow-arrow {
  width: 44px;
  height: 44px;
  padding: 0 0 2px;
  border: 1px solid var(--line);
  background: none;
  color: var(--tm-soft);
  font: 400 20px/1 "Inter", sans-serif;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.tm-page .tm-flow-arrow:hover { background: none; border-color: var(--tm-ice); color: #fff; }
.tm-page .tm-flow-label {
  display: flex;
  align-items: baseline;
  justify-content: center;
  position: relative;
  gap: 10px;
  min-width: 12ch;
  font-size: 14px;
  color: var(--tm-soft);
}
/* the front card's caption already shows the name: it stays for the live
   announcement only ("Wavy 1 of 9"), and the row reads "1 OF 9" */
.tm-page .tm-flow-name {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.tm-page .tm-flow-pos {
  font: 600 20px/1 "Space Grotesk", sans-serif;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  background: var(--tm-num-sm);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.tm-page .tm-flow-of { font: 600 12.5px/1.4 "Inter", sans-serif; letter-spacing: 0.16em; text-transform: uppercase; color: var(--tm-eyebrow); }

/* the static strip (phones and low-fx): hairline circle arrows, no glass */
.tm-page .car-arrow {
  border: 1px solid var(--line);
  background: rgba(3, 5, 15, 0.4);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  color: var(--tm-soft);
  font-family: "Inter", sans-serif;
  font-weight: 400;
}
.tm-page .car-arrow:hover { background: rgba(3, 5, 15, 0.4); box-shadow: none; border-color: var(--tm-ice); color: #fff; }
/* low-fx on a wide screen: the static strips start on the page's content edge */
@media (min-width: 821px) {
  html.low-fx .tm-page .feature-stage[data-carousel-presets] {
    padding: 6px max(72px, calc((100vw - 1032px) / 2)) 16px !important;
    scroll-padding-inline: max(72px, calc((100vw - 1032px) / 2));
  }
  html.low-fx .tm-page .feature-stage[data-carousel-presets] > * { scroll-snap-align: start; }
  /* the wave strip already sits in the column: no inset, and only the far edge fades */
  html.low-fx .tm-page .wave-stage {
    padding: 6px 0 16px !important;
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 88%, transparent 100%);
    mask-image: linear-gradient(90deg, #000 0, #000 88%, transparent 100%);
  }
  html.low-fx .tm-page .wave-stage > * { scroll-snap-align: start; }
}

/* ---------- effects list: rows on hairlines, the open row bright with a light bar ---------- */
/* the list's top rule, then a rule under every row (not li + li: gated rows
   are hidden siblings, so the last visible row cannot be picked out) */
.tm-page .tm-sw-rows { gap: 0; border-top: 1px solid var(--line); overflow-anchor: none; }
.tm-page .tm-row, .tm-page details.tm-sw-row { border-radius: 0; background: none; border-bottom: 1px solid var(--tm-rule); }
.tm-page .tm-row:hover, .tm-page .tm-row[open], .tm-page .tm-row.is-open,
.tm-page details.tm-sw-row[open], .tm-page details.tm-sw-row:not([open]):hover { background: none; }
/* names flush with the heading edge, like every other band's first column */
.tm-page .tm-sw-row > summary {
  min-height: 52px;
  padding: 12px 16px 12px 20px;
  border-radius: 0;
  font: 600 16px/1.3 "Inter", sans-serif;
  color: var(--tm-soft);
}
.tm-page #finish .tm-sw-row > summary { padding-left: 0; }
.tm-page .tm-sw-row > summary:hover, .tm-page .tm-sw-row[open] > summary { color: #fff; }
.tm-page details.tm-sw-row { position: relative; }
/* the open row's bar runs the row's whole height (name, text and, on phones,
   the stage), just outside the column in the page gutter */
.tm-page #finish .tm-sw-row > summary::before { content: none; }
.tm-page #finish details.tm-sw-row[open]::before {
  content: "";
  position: absolute;
  left: -14px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--tm-light-v);
  pointer-events: none;
}
.tm-page .tm-sw-body { padding: 0 16px 18px 20px; }
.tm-page #finish .tm-sw-body { padding-left: 0; }
.tm-page .tm-sw-pane .tm-chips { margin-top: 6px; }
.tm-page .tm-sw-cap { gap: 14px; margin-top: 16px; }
.tm-page .tm-sw-cap .tm-pausebtn { background: none; border-color: var(--line); }
.tm-page .tm-sw-cap .tm-pausebtn:hover { border-color: var(--tm-ice); }
.tm-page .tm-sw-where {
  font: 600 12.5px/1.4 "Inter", sans-serif;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tm-eyebrow);
}
.tm-page .tm-sw-text .tm-sw-body p { max-width: 52ch; font-size: 15px; line-height: 1.5; color: var(--tm-soft); }
/* a row without a clip: its words become an open band, no panel */
.tm-page .tm-sw.is-textonly .tm-sw-text {
  position: relative;
  border: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: none;
  padding-left: 0;
  padding-right: 0;
}
.tm-page .tm-sw.is-textonly .tm-sw-text::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -1px;
  height: 1px;
  background: var(--tm-light);
  pointer-events: none;
}
.tm-page .tm-sw.is-textonly .tm-sw-text .tm-sw-body p { color: var(--tm-lede); }
@media (max-width: 820px) {
  .tm-page .tm-sw-row .tm-sw-pane { padding: 0 0 18px 20px; }
  .tm-page .tm-sw-row .tm-sw-pane .tm-frame { border-radius: 14px; }
  .tm-page .tm-sw-body { padding: 0 16px 16px 20px; }
  .tm-page #finish .tm-sw-row .tm-sw-pane { padding-left: 0; }
  .tm-page #finish .tm-sw-body { padding-left: 0; }
}

/* ---------- v189 rhythm: one step between sub-sections, a bigger one between chapters ---------- */
.tm-page .tm-buy { padding-top: clamp(88px, 10vw, 144px); }
@media (max-width: 820px) {
  .tm-page .tm-sec.tm-sub { padding-top: 40px !important; }
  .tm-page .tm-buy { padding-top: 72px !important; }
  /* one head to component step on phones: 32px */
  .tm-page .tm-head + .wave-stage { margin-top: 32px; }
  /* the presets strip arrows sit on the page gutter, no fill */
  html .tm-page .car-wrap:has(> [data-carousel-presets]) > .car-arrow.prev { left: 0 !important; right: auto !important; }
  html .tm-page .car-wrap:has(> [data-carousel-presets]) > .car-arrow.next { right: 0 !important; left: auto !important; }
  html .tm-page .car-wrap:has(> [data-carousel-presets]) > .car-arrow,
  html .tm-page .car-wrap:has(> [data-carousel-presets]) > .car-arrow:hover { background: none; }
  /* centred on the 16:9 frame of the 66vw card, not on frame plus caption */
  html .tm-page .car-wrap:has(> [data-carousel-presets]) > .car-arrow { top: calc(6px + 66vw * 9 / 32) !important; }
}

/* ---------- site header on the Text Maker page: Hairline (2026-09-15) ----------
   Solid and still, with one hairline border and no blur, glow or pill. The
   other pages keep their header. */
.tm-page header nav {
  border-radius: 14px;
  background: rgba(4, 6, 20, 0.88);
  border: 1px solid var(--line);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
}
.tm-page header nav a.link.active { background: rgba(205, 216, 255, 0.1); box-shadow: inset 0 0 0 1px var(--line); color: #fff; }
.tm-page header nav a.link:hover { background: rgba(205, 216, 255, 0.06); }
.tm-page header .navbuy, .tm-page header .navbuy:hover { box-shadow: none; }

/* full chapter names in the bottom strip (2026-09-15): each segment takes the
   width its name needs, and a name that still does not fit wraps to two lines
   instead of being cut with an ellipsis */
.tm-page .tm-strip-segs li { flex: 1 1 auto; }
.tm-page .tm-strip-segs a {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  line-height: 1.15;
  text-align: center;
}
/* wide screens: every name on one line, the segments spread evenly */
@media (min-width: 1280px) {
  .tm-page .tm-strip-segs { justify-content: space-evenly; }
  .tm-page .tm-strip-segs li { flex: 0 0 auto; }
  .tm-page .tm-strip-segs a { padding: 0 8px; white-space: nowrap; font-size: 13px; }
}

/* ---------- 06 Layouts: the gallery wall (2026-09-15) ----------
   markup: ul.tm-wall > li.tm-wall-cell (clip gated) > .tm-wall-media > video
   (a normal budgeted loop) + p.tm-wall-cap (light numeral, tracked name,
   quiet note). Two by two, the cells split only by a hairline cross; the
   whole wall keeps one outer hairline and rounds its outer corners. */
.tm-page .tm-wall {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #000;
}
/* every clip missing: the wall would be its own border around nothing */
.tm-page .tm-wall:not(:has(> li:not([hidden]))) { display: none; }
.tm-page .tm-wall-cell { display: flex; flex-direction: column; min-width: 0; margin: 0; background: #000; }
/* the cross: counted over the cells that are on the page */
.tm-page .tm-wall-cell:nth-child(even of :not([hidden])) { border-left: 1px solid var(--line); }
.tm-page .tm-wall-cell:nth-child(n+3 of :not([hidden])) { border-top: 1px solid var(--line); }
.tm-page .tm-wall-cell:nth-child(odd of :not([hidden])):nth-last-child(1 of :not([hidden])) { grid-column: 1 / -1; }
.tm-page .tm-wall-media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #000; }
.tm-page .tm-wall-media > video { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; }
.tm-page .tm-wall-cell { container-type: inline-size; }
.tm-page .tm-wall-cap {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 14px;
  row-gap: 6px;
  align-items: baseline;
  margin: 0;
  padding: 14px 22px 20px;
}
.tm-page .tm-wall-cap .tm-hl-num { grid-row: 1; --tm-num-size: 20px; background: var(--tm-num-sm); -webkit-background-clip: text; background-clip: text; }
.tm-page .tm-wall-cap .tm-hl-label { grid-row: 1; grid-column: 2; }
.tm-page .tm-wall-cap .tm-hl-note { grid-column: 2; margin: 0; max-width: 44ch; }
/* a wide cell: numeral and name on the left, the note on the right, one line */
@container (min-width: 460px) {
  .tm-page .tm-wall-cap { grid-template-columns: auto auto minmax(0, 1fr); padding: 14px 24px 18px; }
  .tm-page .tm-wall-cap .tm-hl-note { grid-row: 1; grid-column: 3; justify-self: end; text-align: right; }
}
/* phones: four stacked cells would be an unbroken black column right under the
   black Impact band, so the wall becomes a snap row (the pattern #inside uses).
   The next cell peeks, so the row reads as scrollable. */
@media (max-width: 820px) {
  .tm-page .tm-wall {
    display: flex;
    gap: 0;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
    border-radius: 14px;
  }
  .tm-page .tm-wall::-webkit-scrollbar { display: none; }
  .tm-page .tm-wall-cell { flex: 0 0 78%; scroll-snap-align: start; }
  /* the peeking cell fades out instead of showing chopped caption letters */
  .tm-page .tm-wall { -webkit-mask-image: linear-gradient(90deg, #000 0, #000 84%, transparent 100%); mask-image: linear-gradient(90deg, #000 0, #000 84%, transparent 100%); }
  .tm-page .tm-wall-cell:nth-child(even of :not([hidden])) { border-left: 0; }
  .tm-page .tm-wall-cell:nth-child(n+2 of :not([hidden])) { border-top: 0; border-left: 1px solid var(--line); }
  .tm-page .tm-wall-cap { padding: 14px 18px 20px; }
}

/* ---------- Character Level Styling: capability map plus examples (2026-09-15) ----------
   A centred specimen: the stage sits in the middle of the section and the
   capability map flanks it, so the composition belongs to this section alone.
   markup: .tm-cls > dl.tm-cls-rows.tm-cls-left.tm-hl-band (Target, Pick) +
   .tm-cls-reel[data-reel] (the EXAMPLES label, .tm-frame.tm-cls-frame, then
   .tm-cls-examples > button.tm-cls-ex, the playing one aria-pressed) +
   dl.tm-cls-rows.tm-cls-right.tm-hl-band.tm-hl-quiet (Restyle, Slots) +
   p.tm-cls-note centred under all of it.
   The map says what the feature does; the reel is only examples of it. */
.tm-page .tm-cls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 560px) minmax(0, 1fr);
  gap: 0 48px;
  align-items: start;
}
/* no char clip: the two spec bands sit side by side instead */
.tm-page .tm-cls:has(> .tm-cls-reel[hidden]) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.tm-page .tm-cls:has(> .tm-cls-reel[hidden]) .tm-cls-left { text-align: left; }
.tm-page .tm-cls:has(> .tm-cls-reel[hidden]) .tm-cls-left .tm-cls-vals { align-items: flex-start; }
.tm-page .tm-cls-rows { margin: 0; padding: 0; }
.tm-page .tm-cls-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: 10px;
  align-items: baseline;
  padding: 20px 0 22px;
}
.tm-page .tm-cls-row + .tm-cls-row { border-top: 1px solid var(--tm-rule); }
.tm-page .tm-cls-row dt, .tm-page .tm-cls-row dd { margin: 0; }
.tm-page .tm-cls-vals {
  display: flex;
  flex-direction: column;
  row-gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.tm-page .tm-cls-vals li {
  display: inline-flex;
  align-items: center;
  font: 500 18px/1.4 "Space Grotesk", sans-serif;
  letter-spacing: -0.01em;
  color: var(--tm-bright);
  text-wrap: balance;
}
/* one value per line: no separator dot can hang at the end of a wrapped row */
.tm-page .tm-cls-vals li:not(:last-child)::after { display: none; }
.tm-page .tm-cls-left { text-align: right; }
.tm-page .tm-cls-left .tm-cls-vals { align-items: flex-end; }
.tm-page .tm-cls-note {
  grid-column: 1 / -1;
  margin: 40px auto 0;
  max-width: 60ch;
  text-align: center;
  text-wrap: pretty;
}
.tm-page .tm-cls-frame { width: 100%; }
.tm-page .tm-cls-frame > video { z-index: 1; }
/* the label sits above the stage, never over the footage; the 21px lines it up
   with TARGET and RESTYLE, which start one band border plus one row padding in */
.tm-page .tm-cls-tag { display: block; margin: 21px 0 12px; color: var(--tm-eyebrow); }
.tm-page .tm-cls-examples { margin-top: 20px; }
.tm-page .tm-cls-ex {
  position: relative;
  appearance: none;
  display: flex;
  align-items: baseline;
  width: 100%;
  margin: 0;
  padding: 13px 0 14px;
  border: 0;
  border-top: 1px solid var(--tm-rule);
  border-radius: 0;
  background: none;
  font: 400 15px/1.4 "Inter", sans-serif;
  color: var(--tm-soft);
  text-align: left;
  cursor: pointer;
  transition: color 0.3s ease;
}
.tm-page .tm-cls-ex:nth-last-child(1 of :not([hidden])) { border-bottom: 1px solid var(--tm-rule); }
.tm-page .tm-cls-ex::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -1px;
  height: 1px;
  background: var(--tm-light);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.tm-page .tm-cls-ex-num {
  flex: none;
  font: 600 12px/1.4 "Inter", sans-serif;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tm-eyebrow);
}
.tm-page .tm-cls-ex-dot { flex: none; align-self: center; width: 3px; height: 3px; margin: 0 10px; border-radius: 50%; background: currentColor; opacity: 0.5; }
@media (max-width: 370px) { .tm-page .tm-cls-ex-num { letter-spacing: 0.1em; } .tm-page .tm-cls-ex-dot { margin: 0 8px; } }
.tm-page .tm-cls-ex[aria-pressed="true"] { color: #fff; }
.tm-page .tm-cls-ex[aria-pressed="true"] .tm-cls-ex-num { color: #fff; }
.tm-page .tm-cls-ex[aria-pressed="true"]::before { opacity: 1; }
@media (hover: hover) {
  .tm-page .tm-cls-ex:not([aria-pressed="true"]):hover { color: #e4e9ff; }
}
@media (prefers-reduced-motion: reduce) { .tm-page .tm-cls-ex, .tm-page .tm-cls-ex::before { transition: none; } }
html[data-motion="off"] .tm-page .tm-cls-ex, html[data-motion="off"] .tm-page .tm-cls-ex::before { transition: none; }
@media (forced-colors: active) {
  .tm-page .tm-cls-ex[aria-pressed="true"]::before { forced-color-adjust: none; background: CanvasText; height: 2px; opacity: 1; }
}
@media (max-width: 1100px) {
  .tm-page .tm-cls { grid-template-columns: minmax(0, 1fr) minmax(0, 520px) minmax(0, 1fr); gap: 0 32px; }
}
/* phones: the two spec bands make one compact pair, the stage under them */
@media (max-width: 820px) {
  .tm-page .tm-cls { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 20px; align-items: stretch; }
  .tm-page .tm-cls-reel { grid-column: 1 / -1; grid-row: 2; margin-top: 36px; }
  .tm-page .tm-cls-tag { margin-top: 0; }
  .tm-page .tm-cls-note { grid-row: 3; margin-top: 24px; text-align: left; }
  .tm-page .tm-cls-left { text-align: left; }
  .tm-page .tm-cls-left .tm-cls-vals { align-items: flex-start; }
  .tm-page .tm-cls-left.tm-hl-band::before { content: none; }
  .tm-page .tm-cls-right.tm-hl-band::before { content: ""; }
  .tm-page .tm-cls-vals li { font-size: 17px; }
}

/* ---------- Inside the plugin: the five Inspector tabs (2026-09-15) ----------
   One hairline band, one column per tab: the real panel on top, then the
   light numeral, the tab name and a quiet note. The columns are spaced by a
   gap (not side padding) so every panel has the same width and the captions
   line up; the dividers sit in the middle of the gap. Phones scroll the
   columns sideways, one panel and a bit of the next in view. */
.tm-page .tm-inside-tabs { margin: 0; padding: 0; list-style: none; align-items: start; column-gap: 44px; }
.tm-page .tm-inside-tab, .tm-page .tm-inside-tab:first-child { display: flex; flex-direction: column; padding: 30px 0 28px; }
.tm-page .tm-inside-tab + .tm-inside-tab::after { left: -22px; }
.tm-page .tm-inside-shot {
  display: block;
  position: relative;
  margin: 0 0 24px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #1d1d20;
  transition: transform 0.32s cubic-bezier(0.2, 0.7, 0.2, 1), border-color 0.32s ease;
}
.tm-page .tm-inside-shot img { display: block; width: 100%; height: auto; }
.tm-page .tm-inside-tab .tm-hl-num { --tm-num-size: 28px; }
.tm-page .tm-inside-tab .tm-hl-note { max-width: 30ch; }
@media (max-width: 1100px) {
  .tm-page .tm-inside-tabs { column-gap: 28px; }
  .tm-page .tm-inside-tab + .tm-inside-tab::after { left: -14px; }
}
@media (max-width: 820px) {
  .tm-page .tm-inside-tabs {
    display: flex;
    gap: 28px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
  }
  .tm-page .tm-inside-tabs::-webkit-scrollbar { display: none; }
  .tm-page .tm-inside-tab, .tm-page .tm-inside-tab:first-child { flex: 0 0 62%; scroll-snap-align: start; padding: 26px 0 24px; }
}

/* ---------- Compatibility band (2026-09-15) ---------- */
.tm-page .tm-compat { margin: 0; padding: 0; list-style: none; align-items: start; }
.tm-page .tm-compat .tm-hl-num { --tm-num-size: 26px; line-height: 1.1; }
.tm-page .tm-compat .tm-hl-note { max-width: 30ch; }
@media (max-width: 820px) {
  /* one column: the long names (AutoSubs & SnapCaptions) never get clipped */
  .tm-page .tm-compat { grid-auto-flow: row; grid-template-columns: minmax(0, 1fr); }
  .tm-page .tm-compat .tm-hl-col { padding: 20px 0 18px; }
  .tm-page .tm-compat .tm-hl-col + .tm-hl-col { border-top: 1px solid var(--tm-rule); }
  .tm-page .tm-compat .tm-hl-col + .tm-hl-col::after { display: none; }
  .tm-page .tm-compat .tm-hl-note { max-width: none; }
}

/* launch price: the old price struck beside the big numeral (2026-09-16) */
.tm-page .tm-price-was {
  display: inline-block;
  margin-left: 14px;
  font: 500 0.36em/1 "Space Grotesk", sans-serif;
  letter-spacing: -0.02em;
  color: var(--tm-soft);
  text-decoration: line-through;
  text-decoration-color: rgba(205, 216, 255, 0.55);
  -webkit-text-fill-color: var(--tm-soft);
  background: none;
  vertical-align: 0.42em;
}

/* ---------- Inside the plugin: hover lift and the zoom lightbox (2026-09-16) ---------- */
.tm-page .tm-inside-zoom {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: zoom-in;
}
.tm-page .tm-inside-zoom:focus-visible { outline: none; }
.tm-page .tm-inside-zoom:focus-visible .tm-inside-shot { outline: 2px solid var(--tm-ice); outline-offset: 3px; }
/* the picture lifts, its frame brightens and a + badge appears */
.tm-page .tm-inside-tab:hover .tm-inside-shot,
.tm-page .tm-inside-zoom:focus-visible .tm-inside-shot { transform: translateY(-8px); border-color: rgba(205, 216, 255, 0.55); }
.tm-page .tm-inside-shot::after {
  content: "+";
  position: absolute;
  right: 12px;
  bottom: 12px;
  width: 32px;
  height: 32px;
  border: 1px solid rgba(205, 216, 255, 0.7);
  border-radius: 50%;
  background: rgba(3, 5, 15, 0.55);
  color: #f4f7ff;
  font: 300 22px/30px "Inter", sans-serif;
  text-align: center;
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}
.tm-page .tm-inside-tab:hover .tm-inside-shot::after,
.tm-page .tm-inside-zoom:focus-visible .tm-inside-shot::after { opacity: 1; }
.tm-page .tm-inside-tab .tm-hl-label { transition: color 0.25s ease; }
.tm-page .tm-inside-tab:hover .tm-hl-label { color: #ffffff; }
@media (hover: none) {
  .tm-page .tm-inside-shot::after { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .tm-page .tm-inside-shot { transition: border-color 0.2s ease; }
  .tm-page .tm-inside-tab:hover .tm-inside-shot, .tm-page .tm-inside-zoom:focus-visible .tm-inside-shot { transform: none; }
}
html[data-motion="off"] .tm-page .tm-inside-shot { transition: border-color 0.2s ease; }
html[data-motion="off"] .tm-page .tm-inside-tab:hover .tm-inside-shot,
html[data-motion="off"] .tm-page .tm-inside-zoom:focus-visible .tm-inside-shot { transform: none; }

/* the lightbox: a full-screen dialog, bar / stage / hint */
html.tm-lb-open { overflow: hidden; }
.tm-page dialog.tm-lb {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgba(3, 5, 15, 0.96);
  color: var(--tm-body);
  overflow: hidden;
  display: none;
  grid-template-rows: auto minmax(0, 1fr) auto;
}
.tm-page dialog.tm-lb[open] { display: grid; }
.tm-page dialog.tm-lb::backdrop { background: rgba(3, 5, 15, 0.7); }
.tm-page .tm-lb-bar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 14px 24px;
  border-bottom: 1px solid var(--tm-rule);
}
.tm-page .tm-lb-bar::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: var(--tm-light);
}
.tm-page .tm-lb-title { display: flex; align-items: baseline; gap: 14px; margin: 0; min-width: 0; }
.tm-page .tm-lb-title .tm-hl-num { --tm-num-size: 26px; }
.tm-page .tm-lb-of { white-space: nowrap; }
.tm-page .tm-lb-ctls { display: flex; align-items: center; gap: 12px; flex: none; }
.tm-page .tm-lb-round {
  width: 36px;
  height: 36px;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(205, 216, 255, 0.45);
  border-radius: 50%;
  background: rgba(3, 5, 15, 0.5);
  color: #f4f7ff;
  font: 300 22px/1 "Inter", sans-serif;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: border-color 0.2s ease;
}
.tm-page .tm-lb-round:hover { border-color: var(--tm-ice); }
.tm-page .tm-lb-text {
  margin: 0 4px;
  padding: 6px 0;
  border: 0;
  background: none;
  font: 600 14px/1.2 "Inter", sans-serif;
  color: var(--tm-bright);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
  text-decoration-color: rgba(205, 216, 255, 0.4);
  cursor: pointer;
}
.tm-page .tm-lb-text:hover { text-decoration-color: var(--tm-ice); }
.tm-page .tm-lb-level { min-width: 4.5ch; text-align: center; }
.tm-page .tm-lb-stage {
  position: relative;
  overflow: hidden;
  touch-action: none;
  cursor: zoom-in;
  outline: none;
  -webkit-user-select: none;
  user-select: none;
}
.tm-page .tm-lb-stage.is-zoomed { cursor: grab; }
.tm-page .tm-lb-stage.is-zoomed.is-dragging { cursor: grabbing; }
.tm-page .tm-lb-stage:focus-visible { box-shadow: inset 0 0 0 2px var(--tm-ice); }
.tm-page .tm-lb-img {
  position: absolute;
  left: 0;
  top: 0;
  max-width: none;
  display: block;
  transform-origin: 0 0;
  will-change: transform;
  -webkit-user-drag: none;
  pointer-events: none;
}
.tm-page .tm-lb-nav { position: absolute; top: 50%; margin-top: -18px; z-index: 2; }
.tm-page .tm-lb-prev { left: 18px; }
.tm-page .tm-lb-next { right: 18px; }
.tm-page .tm-lb-hint { margin: 0; padding: 12px 24px 14px; text-align: center; max-width: none; border-top: 1px solid var(--tm-rule); transition: opacity 0.3s ease; }
.tm-page dialog.tm-lb.is-used .tm-lb-hint { opacity: 0.45; }
.tm-page dialog.tm-lb.is-still .tm-lb-hint, .tm-page dialog.tm-lb.is-still .tm-lb-round { transition: none; }
@media (max-width: 820px) {
  .tm-page .tm-lb-bar { padding: 10px 14px; gap: 12px; }
  .tm-page .tm-lb-title { gap: 10px; }
  .tm-page .tm-lb-title .tm-hl-num { --tm-num-size: 22px; }
  .tm-page .tm-lb-of { display: none; }
  .tm-page .tm-lb-ctls { gap: 8px; }
  .tm-page .tm-lb-text { display: none; }
  .tm-page .tm-lb-round { width: 34px; height: 34px; }
  .tm-page .tm-lb-nav { top: auto; bottom: 84px; margin-top: 0; }
  .tm-page .tm-lb-prev { left: 12px; }
  .tm-page .tm-lb-next { right: 12px; }
  .tm-page .tm-lb-hint { padding: 12px 60px 14px; font-size: 13px; }
}

/* ---------- phone audit (2026-09-16) ---------- */
/* the hero kicker breaks into two clean lines on phones, no orphaned dot */
@media (max-width: 640px) {
  .tm-page .tm-hero-kicker .tm-kicker-dot { display: block; height: 0; overflow: hidden; }
}
@media (max-width: 820px) {
  /* labels at the 13px floor, and 16px inputs so iPhones do not zoom on focus */
  .tm-page .tm-save-label { font-size: 13px; }
  .tm-page .tm-save-input { font-size: 16px; }
}