/* TCH variant 1, UPDATE lane. Shared styles for home, owners and article.
   Every value is a token from tokens.css. No hex in this file. */

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--tch-nav-h) + var(--tch-sp-4)); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--tch-canvas);
  color: var(--tch-text);
  font-family: var(--tch-font-body);
  font-size: var(--tch-fs-body);
  line-height: var(--tch-lh-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, video, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4 { margin: 0; color: var(--tch-ink); font-family: var(--tch-font-display); font-weight: var(--tch-fw-bold); letter-spacing: var(--tch-ls-display); text-wrap: balance; }
h1, .tch-demo-h1 { font-size: var(--tch-fs-display); line-height: var(--tch-lh-display); }
.tch-demo-h1 { margin: 0; color: var(--tch-ink); font-family: var(--tch-font-display); font-weight: var(--tch-fw-bold); letter-spacing: var(--tch-ls-display); text-wrap: balance; }
h2 { font-size: var(--tch-fs-h2); line-height: var(--tch-lh-heading); }
h3 { font-size: var(--tch-fs-h3); line-height: var(--tch-lh-heading); }
h4 { font-size: var(--tch-fs-h4); line-height: var(--tch-lh-heading); }
p { margin: 0; }
a { color: var(--tch-teal); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--tch-teal-ink); }
ul, ol { margin: 0; padding: 0; list-style: none; }
dl, dd, figure { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: var(--tch-bw-2) solid var(--tch-focus); outline-offset: var(--tch-focus-offset); border-radius: var(--tch-r-xs); }
.tch-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tch-skip { position: absolute; left: var(--tch-sp-4); top: -100px; z-index: 100; background: var(--tch-teal); color: var(--tch-teal-on); padding: var(--tch-sp-3) var(--tch-sp-4); border-radius: var(--tch-r-pill); }
.tch-skip:focus { top: var(--tch-sp-3); color: var(--tch-teal-on); }

/* The teal emphasis inside a serif headline: the ad's "Double your income" move. */
.tch-em { color: var(--tch-teal); font-style: normal; }

/* ---------- Layout ---------- */
.tch-container { width: 100%; max-width: calc(var(--tch-w-page) + 2 * var(--tch-gutter)); margin-inline: auto; padding-inline: var(--tch-gutter); }
.tch-container--narrow { max-width: calc(var(--tch-w-narrow) + 2 * var(--tch-gutter)); }
.tch-section { padding-block: var(--tch-section-y); }
.tch-section--alt { background: var(--tch-alt); }
.tch-section--tight { padding-block: calc(var(--tch-section-y) * 0.55); }
.tch-head { max-width: 46rem; display: grid; gap: var(--tch-sp-4); margin-bottom: var(--tch-sp-7); }
.tch-head--center { margin-inline: auto; text-align: center; justify-items: center; }
.tch-lead { font-size: var(--tch-fs-lead); color: var(--tch-text); }
.tch-eyebrow { font-size: var(--tch-fs-label); font-weight: var(--tch-fw-semibold); letter-spacing: var(--tch-ls-label); text-transform: uppercase; color: var(--tch-slate); }
.tch-rule { display: block; width: var(--tch-rule-w); height: var(--tch-rule-h); border-radius: var(--tch-r-pill); background: var(--tch-rule); }

/* ---------- Reveal (uses the translate property, so it never touches transform) ---------- */
.js [data-reveal] { opacity: 0; translate: 0 var(--tch-reveal-shift); transition: opacity var(--tch-dur-3) var(--tch-ease), translate var(--tch-dur-3) var(--tch-ease); }
.js [data-reveal].is-in { opacity: 1; translate: 0 0; }

/* ---------- Button ---------- */
.tch-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--tch-sp-2);
  min-height: var(--tch-tap); padding: 0 var(--tch-sp-5);
  border: var(--tch-bw-15) solid transparent; border-radius: var(--tch-r-pill);
  font-size: var(--tch-fs-body); font-weight: var(--tch-fw-semibold); line-height: 1; white-space: nowrap;
  text-decoration: none; cursor: pointer;
  transition: background var(--tch-dur-1) var(--tch-ease), color var(--tch-dur-1) var(--tch-ease), border-color var(--tch-dur-1) var(--tch-ease), scale var(--tch-dur-1) var(--tch-ease);
}
.tch-btn:active { scale: 0.98; }
.tch-btn--primary { background: var(--tch-teal); color: var(--tch-teal-on); }
.tch-btn--primary:hover { background: var(--tch-teal-ink); color: var(--tch-teal-on); }
.tch-btn--outline { background: transparent; border-color: var(--tch-teal); color: var(--tch-teal); }
.tch-btn--outline:hover { background: var(--tch-teal-tint); color: var(--tch-teal-ink); }
.tch-btn--light { background: var(--tch-card); color: var(--tch-teal-ink); }
.tch-btn--light:hover { background: var(--tch-teal-tint); color: var(--tch-teal-ink); }
.tch-btn--lg { min-height: 3.25rem; padding-inline: var(--tch-sp-6); font-size: var(--tch-fs-lead); }
.tch-btn--block { width: 100%; }
.tch-textlink { font-weight: var(--tch-fw-semibold); }

/* ---------- Chip ---------- */
.tch-chip { display: inline-flex; align-items: center; gap: var(--tch-sp-2); min-height: 1.75rem; padding: 0 var(--tch-sp-3); border-radius: var(--tch-r-pill); background: var(--tch-chip); color: var(--tch-slate); font-size: var(--tch-fs-small); font-weight: var(--tch-fw-semibold); line-height: 1; white-space: nowrap; }
.tch-chip--teal { background: var(--tch-teal-tint); color: var(--tch-teal-ink); }
.tch-chip--gold { background: var(--tch-gold-wash); color: var(--tch-gold-ink); }
.tch-chip--dot::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: var(--tch-r-pill); background: currentColor; }

/* ---------- Nav ---------- */
.tch-nav { position: sticky; top: 0; z-index: 50; background: var(--tch-canvas); border-bottom: var(--tch-bw-1) solid var(--tch-line-soft); }
.tch-nav__bar { display: flex; align-items: center; gap: var(--tch-sp-5); min-height: var(--tch-nav-h); }
.tch-nav__logo { display: inline-flex; align-items: center; min-height: var(--tch-tap); flex: none; }
.tch-nav__logo img { width: 9.5rem; height: auto; }
.tch-nav__links { display: none; align-items: center; gap: var(--tch-sp-2); margin-left: auto; }
.tch-nav__link, .tch-nav__drop > summary { display: inline-flex; align-items: center; gap: var(--tch-sp-2); min-height: var(--tch-tap); padding: 0 var(--tch-sp-3); border-radius: var(--tch-r-pill); color: var(--tch-ink); font-weight: var(--tch-fw-medium); text-decoration: none; cursor: pointer; list-style: none; white-space: nowrap; }
.tch-nav__drop > summary::-webkit-details-marker { display: none; }
.tch-nav__link:hover, .tch-nav__drop > summary:hover { background: var(--tch-teal-tint); color: var(--tch-teal-ink); }
.tch-nav__link[aria-current="page"] { color: var(--tch-teal); }
.tch-caret { width: 0.45rem; height: 0.45rem; border-right: var(--tch-bw-15) solid currentColor; border-bottom: var(--tch-bw-15) solid currentColor; rotate: 45deg; margin-top: -0.2rem; transition: rotate var(--tch-dur-1) var(--tch-ease); }
details[open] > summary .tch-caret { rotate: 225deg; margin-top: 0.2rem; }
.tch-nav__drop { position: relative; }
.tch-nav__menu { position: absolute; top: calc(100% + var(--tch-sp-2)); left: 0; min-width: 13rem; padding: var(--tch-sp-2); background: var(--tch-card); border: var(--tch-bw-1) solid var(--tch-line); border-radius: var(--tch-r-md); box-shadow: var(--tch-shadow-2); }
.tch-nav__menu a { display: flex; align-items: center; min-height: var(--tch-tap); padding: 0 var(--tch-sp-3); border-radius: var(--tch-r-sm); color: var(--tch-ink); text-decoration: none; }
.tch-nav__menu a:hover { background: var(--tch-teal-tint); color: var(--tch-teal-ink); }
.tch-nav__cta { display: none; align-items: center; gap: var(--tch-sp-3); }
.tch-nav__mobile { margin-left: auto; }
.tch-nav__mobile > summary { display: inline-flex; align-items: center; gap: var(--tch-sp-2); min-height: var(--tch-tap); padding: 0 var(--tch-sp-4); border: var(--tch-bw-15) solid var(--tch-line); border-radius: var(--tch-r-pill); font-weight: var(--tch-fw-semibold); color: var(--tch-ink); cursor: pointer; list-style: none; }
.tch-nav__mobile > summary::-webkit-details-marker { display: none; }
.tch-burger { width: 1.1rem; height: 0.75rem; border-block: var(--tch-bw-2) solid currentColor; position: relative; }
.tch-burger::after { content: ""; position: absolute; inset: 50% 0 auto 0; height: 2px; margin-top: -1px; background: currentColor; }
.tch-nav__panel { position: absolute; left: 0; right: 0; top: 100%; max-height: calc(100dvh - var(--tch-nav-h)); overflow-y: auto; background: var(--tch-canvas); border-bottom: var(--tch-bw-1) solid var(--tch-line); box-shadow: var(--tch-shadow-2); padding: var(--tch-sp-4) var(--tch-gutter) var(--tch-sp-6); display: grid; gap: var(--tch-sp-1); }
.tch-nav__panel a { display: flex; align-items: center; min-height: var(--tch-tap); color: var(--tch-ink); text-decoration: none; font-weight: var(--tch-fw-medium); }
.tch-nav__panel .tch-nav__group { margin-top: var(--tch-sp-3); font-size: var(--tch-fs-label); letter-spacing: var(--tch-ls-label); text-transform: uppercase; color: var(--tch-muted); font-weight: var(--tch-fw-semibold); }
.tch-nav__panel .tch-nav__sub { padding-left: var(--tch-sp-4); font-weight: var(--tch-fw-regular); }
.tch-nav__panel .tch-btn { margin-top: var(--tch-sp-3); color: var(--tch-teal); font-weight: var(--tch-fw-semibold); }
.tch-nav__panel .tch-btn--primary { color: var(--tch-teal-on); }
@media (min-width: 1080px) {
  .tch-nav__links, .tch-nav__cta { display: flex; }
  .tch-nav__mobile { display: none; }
}

/* ---------- Photo card (the ad's rounded photo) ---------- */
.tch-photo { position: relative; overflow: hidden; border-radius: var(--tch-r-lg); background: var(--tch-before); }
.tch-photo img, .tch-photo video { width: 100%; height: 100%; object-fit: cover; }
.tch-photo--before img { filter: grayscale(1) contrast(1.02); }
.tch-caption { margin-top: var(--tch-sp-2); font-size: var(--tch-fs-small); color: var(--tch-muted); }

/* ---------- Stat: the ad's number pairing (serif number, Inter label) ---------- */
.tch-stat { display: grid; gap: var(--tch-sp-1); align-content: start; }
.tch-stat__num { font-family: var(--tch-font-display); font-weight: var(--tch-fw-bold); font-size: var(--tch-fs-money-lg); line-height: var(--tch-lh-tight); color: var(--tch-teal); letter-spacing: var(--tch-ls-display); }
.tch-stat__label { font-size: var(--tch-fs-small); color: var(--tch-text); max-width: 22ch; }

/* ---------- Logo row: one grey, one row, no caption ---------- */
.tch-logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--tch-sp-5) var(--tch-sp-7); }
.tch-logos img { height: var(--tch-logo-h-md); width: auto; filter: var(--tch-filter-logo); opacity: var(--tch-opacity-logo); }
.tch-logos img[src$="logo-gsa.png"] { filter: var(--tch-filter-logo-knockout); opacity: 1; mix-blend-mode: multiply; }
.tch-logos img.tch-logos__tall { height: var(--tch-logo-h-tall-md); }
@media (min-width: 900px) { .tch-logos { justify-content: space-between; } .tch-logos img { height: var(--tch-logo-h-lg); } .tch-logos img.tch-logos__tall { height: var(--tch-logo-h-tall-lg); } }

/* ---------- Footer ---------- */
.tch-footer { background: var(--tch-alt); border-top: var(--tch-bw-1) solid var(--tch-line-soft); padding-block: var(--tch-sp-8) var(--tch-sp-6); color: var(--tch-text); }
.tch-footer__grid { display: grid; gap: var(--tch-sp-7) var(--tch-sp-6); grid-template-columns: 1fr 1fr; }
.tch-footer__brand { grid-column: 1 / -1; display: grid; gap: var(--tch-sp-4); align-content: start; }
.tch-lockup { display: inline-grid; justify-items: center; gap: var(--tch-sp-3); width: max-content; text-decoration: none; }
.tch-lockup img { width: 11rem; }
.tch-footer__contact { display: grid; gap: 0; }
.tch-footer__contact a, .tch-footer__col a, .tch-footer__social a, .tch-footer__legal a { display: inline-flex; align-items: center; min-height: var(--tch-tap); color: var(--tch-text); text-decoration: none; }
.tch-footer__contact a:hover, .tch-footer__col a:hover, .tch-footer__social a:hover, .tch-footer__legal a:hover { color: var(--tch-teal); text-decoration: underline; }
.tch-footer__social { display: flex; flex-wrap: wrap; gap: 0 var(--tch-sp-5); }
.tch-footer__col h2 { font-family: var(--tch-font-body); font-size: var(--tch-fs-label); letter-spacing: var(--tch-ls-label); text-transform: uppercase; color: var(--tch-ink); font-weight: var(--tch-fw-semibold); margin-bottom: var(--tch-sp-2); }
.tch-footer__col li { line-height: 1.3; }
.tch-footer__legal { margin-top: var(--tch-sp-7); padding-top: var(--tch-sp-4); border-top: var(--tch-bw-1) solid var(--tch-line); display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--tch-sp-5); font-size: var(--tch-fs-small); color: var(--tch-muted); }
.tch-footer__legal span { margin-right: auto; min-height: var(--tch-tap); display: inline-flex; align-items: center; }
@media (min-width: 900px) {
  .tch-footer__grid { grid-template-columns: 1.5fr repeat(4, 1fr); }
  .tch-footer__brand { grid-column: auto; }
}

/* ---------- Home: hero ---------- */
.tch-hero { padding-block: var(--tch-sp-7) var(--tch-sp-8); }
.tch-hero__grid { display: grid; gap: var(--tch-sp-7); align-items: center; }
.tch-hero__copy { display: grid; gap: var(--tch-sp-5); justify-items: start; }
.tch-hero__copy .tch-lead { max-width: var(--tch-w-copy-sm); }
.tch-hero__stats { display: grid; gap: var(--tch-sp-4); width: 100%; max-width: var(--tch-w-copy-md); margin-top: var(--tch-sp-3); padding-top: var(--tch-sp-5); border-top: var(--tch-bw-1) solid var(--tch-line); }
.tch-hero__stats .tch-stat { grid-template-columns: 8.5rem 1fr; align-items: center; gap: var(--tch-sp-4); }
.tch-hero__stats .tch-stat__label { max-width: none; }
@media (min-width: 640px) { .tch-hero__stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--tch-sp-5); } .tch-hero__stats .tch-stat { grid-template-columns: 1fr; align-items: start; gap: var(--tch-sp-1); } }
.tch-hero__photos { display: grid; grid-template-columns: 1fr 1fr; gap: var(--tch-sp-4); }
.tch-hero__photos .tch-photo { aspect-ratio: 3 / 4; }
.tch-hero__photos .tch-photo:last-child { margin-top: var(--tch-sp-7); }
@media (min-width: 960px) {
  .tch-hero { padding-block: var(--tch-sp-8) var(--tch-sp-9); }
  .tch-hero__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: var(--tch-sp-8); }
  .tch-hero__photos .tch-photo { aspect-ratio: 5 / 8; }
  .tch-hero__photos .tch-photo:last-child { margin-top: var(--tch-sp-8); }
}

/* ---------- Home: city ticker ---------- */
.tch-ticker { overflow: hidden; display: grid; gap: var(--tch-sp-3); -webkit-mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent); mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent); }
.tch-ticker__track { display: flex; width: max-content; gap: var(--tch-sp-3); animation: tch-ticker var(--tch-ticker-dur) linear infinite; }
.tch-ticker__track--rev { animation-direction: reverse; }
.tch-ticker__track li { flex: none; display: inline-flex; align-items: center; min-height: 2.5rem; padding: 0 var(--tch-sp-4); border: var(--tch-bw-1) solid var(--tch-line); border-radius: var(--tch-r-pill); background: var(--tch-card); color: var(--tch-slate); font-weight: var(--tch-fw-medium); white-space: nowrap; }
@keyframes tch-ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .tch-ticker { -webkit-mask-image: none; mask-image: none; }
  .tch-ticker__track { animation: none; width: auto; flex-wrap: wrap; justify-content: center; }
  .tch-ticker__track [aria-hidden="true"] { display: none; }
}

/* ---------- Property card ---------- */
.tch-homes { display: grid; gap: var(--tch-sp-5); }
.tch-home { display: grid; grid-template-rows: auto 1fr; background: var(--tch-card); border: var(--tch-bw-1) solid var(--tch-line); border-radius: var(--tch-r-lg); overflow: hidden; text-decoration: none; color: inherit; transition: box-shadow var(--tch-dur-2) var(--tch-ease), border-color var(--tch-dur-2) var(--tch-ease); }
.tch-home:hover { box-shadow: var(--tch-shadow-2); border-color: var(--tch-teal-line); color: inherit; }
.tch-home__photo { aspect-ratio: 3 / 2; overflow: hidden; background: var(--tch-before); }
.tch-home__photo img { width: 100%; height: 100%; object-fit: cover; transition: scale var(--tch-dur-3) var(--tch-ease); }
.tch-home:hover .tch-home__photo img { scale: 1.03; }
.tch-home__body { display: grid; gap: var(--tch-sp-2); align-content: start; padding: var(--tch-sp-5); }
.tch-home__title { font-size: var(--tch-fs-h4); }
.tch-home__city { color: var(--tch-muted); font-size: var(--tch-fs-small); }
.tch-home__specs { display: flex; flex-wrap: wrap; gap: var(--tch-sp-2) var(--tch-sp-4); margin-top: var(--tch-sp-2); padding-top: var(--tch-sp-3); border-top: var(--tch-bw-1) solid var(--tch-line-soft); font-size: var(--tch-fs-small); color: var(--tch-text); }
.tch-home__specs b { color: var(--tch-ink); font-weight: var(--tch-fw-semibold); }
.tch-home__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--tch-sp-2); }
@media (min-width: 720px) {
  .tch-homes--feature { grid-template-columns: 1.35fr 1fr; grid-template-rows: auto auto; }
  .tch-homes--feature .tch-home:first-child { grid-row: 1 / span 2; grid-template-rows: 1fr auto; }
  .tch-homes--feature .tch-home:first-child .tch-home__photo { aspect-ratio: auto; min-height: 20rem; }
  .tch-homes--feature .tch-home:first-child .tch-home__title { font-size: var(--tch-fs-h3); }
  .tch-homes--feature .tch-home:not(:first-child) { grid-template-columns: 42% 1fr; grid-template-rows: auto; }
  .tch-homes--feature .tch-home:not(:first-child) .tch-home__photo { aspect-ratio: auto; height: 100%; min-height: 11rem; }
  .tch-homes--six { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1040px) { .tch-homes--six { grid-template-columns: repeat(3, 1fr); } }
.tch-after-grid { margin-top: var(--tch-sp-6); }

/* ---------- Home: map search ---------- */
.tch-split { display: grid; gap: var(--tch-sp-7); align-items: center; }
.tch-split__copy { display: grid; gap: var(--tch-sp-4); justify-items: start; }
@media (min-width: 960px) { .tch-split { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--tch-sp-8); } .tch-split--flip > :first-child { order: 2; } }
.tch-search { display: grid; gap: var(--tch-sp-3); width: 100%; max-width: var(--tch-w-copy-xs); margin-top: var(--tch-sp-3); padding: var(--tch-sp-4); background: var(--tch-card); border: var(--tch-bw-1) solid var(--tch-line); border-radius: var(--tch-r-lg); box-shadow: var(--tch-shadow-2); }
@media (min-width: 560px) { .tch-search { grid-template-columns: 1fr 1fr auto; align-items: end; } }
.tch-field { display: grid; gap: var(--tch-sp-1); min-width: 0; }
.tch-field label { font-size: var(--tch-fs-small); font-weight: var(--tch-fw-semibold); color: var(--tch-ink); }
.tch-field input, .tch-field select { width: 100%; min-height: var(--tch-tap); padding: 0 var(--tch-sp-3); background: var(--tch-card); border: var(--tch-bw-15) solid var(--tch-line); border-radius: var(--tch-r-sm); color: var(--tch-ink); }
.tch-field input::placeholder { color: var(--tch-muted); }
.tch-field input:focus-visible, .tch-field select:focus-visible { outline: none; border-color: var(--tch-teal); box-shadow: var(--tch-ring); }

/* ---------- Home: benefits ---------- */
.tch-benefits__photo { aspect-ratio: 16 / 10; margin-bottom: var(--tch-sp-7); }
@media (min-width: 800px) { .tch-benefits__photo { aspect-ratio: 21 / 8; } }
.tch-benefits__list { display: grid; gap: var(--tch-sp-6); }
.tch-benefits__list > li { display: grid; gap: var(--tch-sp-3); align-content: start; padding-top: var(--tch-sp-5); border-top: var(--tch-bw-2) solid var(--tch-teal); }
@media (min-width: 800px) { .tch-benefits__list { grid-template-columns: repeat(3, 1fr); gap: var(--tch-sp-7); } }

/* ---------- Home: reviews row and owner line ---------- */
.tch-reviews { display: inline-flex; align-items: center; gap: var(--tch-sp-3); margin-top: var(--tch-sp-3); padding: var(--tch-sp-3) var(--tch-sp-4); border: var(--tch-bw-1) solid var(--tch-line); border-radius: var(--tch-r-md); background: var(--tch-card); color: var(--tch-ink); font-weight: var(--tch-fw-medium); text-decoration: none; min-height: var(--tch-tap); }
.tch-reviews img { height: 1.375rem; width: auto; }
.tch-ownerline { margin-top: var(--tch-sp-8); display: grid; gap: var(--tch-sp-4); align-items: center; padding: var(--tch-sp-5) var(--tch-sp-5); border-radius: var(--tch-r-lg); background: var(--tch-teal-tint); border: var(--tch-bw-1) solid var(--tch-teal-line); color: var(--tch-ink); }
.tch-ownerline p { font-size: var(--tch-fs-lead); }
.tch-ownerline strong { font-family: var(--tch-font-display); color: var(--tch-teal-ink); }
@media (min-width: 800px) { .tch-ownerline { grid-template-columns: 1fr auto; padding: var(--tch-sp-5) var(--tch-sp-6); } }

/* ---------- Owners: video hero. Only the headline block and the scrim sit on the video. ---------- */
.tch-vhero { padding: var(--tch-sp-3) var(--tch-sp-3) 0; }
.tch-vhero__frame { position: relative; display: grid; align-items: end; min-height: min(78dvh, 44rem); border-radius: var(--tch-r-xl); overflow: hidden; background: var(--tch-ink); isolation: isolate; }
.tch-vhero__frame video, .tch-vhero__frame > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.tch-vhero__frame::before { content: ""; position: absolute; inset: 0; background: var(--tch-scrim); z-index: -1; }
.tch-vhero__copy { display: grid; gap: var(--tch-sp-4); justify-items: start; max-width: var(--tch-w-copy-xl); padding: var(--tch-sp-7) var(--tch-gutter); color: var(--tch-on-photo); }
.tch-vhero__copy h1, .tch-vhero__copy .tch-demo-h1 { color: var(--tch-on-photo); font-size: var(--tch-fs-h1-video); }
.tch-vhero__copy .tch-lead { color: var(--tch-on-photo); max-width: var(--tch-w-copy); }
.tch-vhero__proof { font-size: var(--tch-fs-small); color: var(--tch-on-photo); max-width: var(--tch-w-copy); opacity: 0.92; }
@media (min-width: 960px) { .tch-vhero { padding: var(--tch-sp-4) var(--tch-sp-5) 0; } .tch-vhero__copy { padding: var(--tch-sp-8); } }

/* ---------- Owners: the earnings card. Signature device 1. ---------- */
.tch-earn { background: var(--tch-card); border: var(--tch-bw-1) solid var(--tch-line); border-radius: var(--tch-r-xl); box-shadow: var(--tch-shadow-3); padding: var(--tch-sp-6) var(--tch-sp-4); display: grid; gap: var(--tch-sp-6); }
.tch-earn__head { display: grid; gap: var(--tch-sp-4); justify-items: center; text-align: center; max-width: var(--tch-w-copy-lg); margin-inline: auto; }
.tch-earn__pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--tch-sp-3); }
.tch-earn__side { display: grid; grid-template-rows: auto 1fr; gap: var(--tch-sp-3); padding: var(--tch-sp-2); border-radius: calc(var(--tch-r-lg) + var(--tch-sp-2)); min-width: 0; }
.tch-earn__side--before { background: var(--tch-before); }
.tch-earn__side--after { background: var(--tch-teal-tint); }
.tch-earn__side .tch-photo { aspect-ratio: 5 / 7; }
.tch-earn__side--before .tch-photo img { object-position: 0% 50%; filter: grayscale(1); }
.tch-earn__side--after .tch-photo img { object-position: 100% 50%; }
.tch-earn__fig { display: grid; gap: var(--tch-sp-1); justify-items: center; text-align: center; padding: var(--tch-sp-2) var(--tch-sp-1) var(--tch-sp-4); }
.tch-earn__when { font-size: var(--tch-fs-small); color: var(--tch-muted); }
.tch-earn__side--after .tch-earn__when { color: var(--tch-teal-ink); }
.tch-money { font-family: var(--tch-font-display); font-weight: var(--tch-fw-bold); letter-spacing: var(--tch-ls-display); line-height: var(--tch-lh-tight); font-variant-numeric: lining-nums tabular-nums; }
.tch-earn__num { font-size: var(--tch-fs-money-xl); color: var(--tch-text); }
.tch-earn__side--after .tch-earn__num { color: var(--tch-teal); }
.tch-earn__unit { font-weight: var(--tch-fw-bold); color: var(--tch-ink); }
.tch-earn__desc { font-size: var(--tch-fs-small); color: var(--tch-text); max-width: 20ch; }
.tch-earn__side--after .tch-earn__desc { color: var(--tch-teal-ink); }
.tch-seg { display: inline-grid; grid-auto-flow: column; gap: var(--tch-sp-1); padding: var(--tch-sp-1); border-radius: var(--tch-r-pill); background: var(--tch-chip); justify-self: center; max-width: 100%; }
.tch-seg button { min-height: var(--tch-tap); padding: 0 var(--tch-sp-4); border: 0; border-radius: var(--tch-r-pill); background: transparent; color: var(--tch-slate); font-weight: var(--tch-fw-semibold); cursor: pointer; white-space: nowrap; font-size: var(--tch-fs-small); }
.tch-seg button[aria-pressed="true"] { background: var(--tch-card); color: var(--tch-teal-ink); box-shadow: var(--tch-shadow-1); }
.tch-pl { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.tch-pl caption { text-align: left; font-size: var(--tch-fs-small); color: var(--tch-muted); padding-bottom: var(--tch-sp-3); }
.tch-pl th, .tch-pl td { padding: var(--tch-sp-3) var(--tch-sp-2); border-bottom: var(--tch-bw-1) solid var(--tch-line-soft); text-align: right; font-weight: var(--tch-fw-regular); }
.tch-pl th:first-child, .tch-pl td:first-child { text-align: left; }
.tch-pl thead th { font-size: var(--tch-fs-small); font-weight: var(--tch-fw-semibold); color: var(--tch-muted); vertical-align: bottom; }
.tch-pl thead th:last-child { color: var(--tch-teal-ink); }
.tch-pl tbody th { color: var(--tch-ink); font-weight: var(--tch-fw-medium); }
.tch-pl td:last-child { color: var(--tch-teal-ink); font-weight: var(--tch-fw-semibold); }
.tch-pl .is-total th, .tch-pl .is-total td { border-bottom: 0; border-top: var(--tch-bw-2) solid var(--tch-ink); font-family: var(--tch-font-display); font-weight: var(--tch-fw-bold); font-size: var(--tch-fs-h4); padding-top: var(--tch-sp-4); }
.tch-pl .is-total td:last-child { color: var(--tch-teal); }
.tch-pl .is-total td:nth-child(2) { color: var(--tch-text); }
.tch-earn__foot { display: grid; gap: var(--tch-sp-4); justify-items: center; text-align: center; max-width: var(--tch-w-copy); margin-inline: auto; }
.tch-earn__foot small { font-size: var(--tch-fs-small); color: var(--tch-muted); }
@media (min-width: 860px) {
  .tch-earn { padding: var(--tch-sp-8); grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); gap: var(--tch-sp-7) var(--tch-sp-8); align-items: center; }
  .tch-earn__head, .tch-earn__foot { grid-column: 1 / -1; }
  .tch-earn__pair { gap: var(--tch-sp-4); }
  .tch-earn__side { padding: var(--tch-sp-3); }
  .tch-earn__desc { font-size: var(--tch-fs-body); }
}

/* ---------- Owners: device section ---------- */
.tch-device-wrap { display: grid; justify-items: center; gap: var(--tch-sp-3); padding: var(--tch-sp-6) var(--tch-sp-4) var(--tch-sp-5); border-radius: var(--tch-r-xl); background: var(--tch-teal-tint); }
.tch-device { width: 100%; max-width: 22.5rem; border: var(--tch-device-bezel) solid var(--tch-ink); border-radius: var(--tch-r-device); overflow: hidden; background: var(--tch-canvas); box-shadow: var(--tch-shadow-3); }
.tch-device__screen { height: 38rem; overflow: hidden; }
.tch-device-wrap .tch-chip { margin-top: var(--tch-sp-2); }

/* ---------- Owners: steps ---------- */
.tch-steps { display: grid; gap: var(--tch-sp-7); counter-reset: step; }
.tch-step { display: grid; gap: var(--tch-sp-4); align-content: start; }
.tch-step .tch-photo { aspect-ratio: 4 / 3; }
.tch-step__n { font-family: var(--tch-font-display); font-weight: var(--tch-fw-bold); color: var(--tch-teal); font-size: var(--tch-fs-h4); }
.tch-step h3 { display: flex; align-items: baseline; gap: var(--tch-sp-3); }
@media (min-width: 860px) {
  .tch-steps { grid-template-columns: repeat(3, 1fr); gap: var(--tch-sp-6); }
  .tch-step:nth-child(2) { margin-top: var(--tch-sp-7); }
  .tch-step:nth-child(3) { margin-top: var(--tch-sp-9); }
}

/* ---------- Owners: demand proof ---------- */
.tch-proof { display: grid; gap: var(--tch-sp-7); }
.tch-proof__stats { display: grid; grid-template-columns: 1fr 1fr; gap: var(--tch-sp-6) var(--tch-sp-5); }
.tch-proof__stats .tch-stat { padding-top: var(--tch-sp-4); border-top: var(--tch-bw-1) solid var(--tch-line); }
.tch-proof__stats .tch-stat__label { font-size: var(--tch-fs-body); max-width: 26ch; }
@media (min-width: 960px) { .tch-proof { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: var(--tch-sp-8); align-items: start; } }
.tch-proof__logos { margin-top: var(--tch-sp-8); padding-top: var(--tch-sp-6); border-top: var(--tch-bw-1) solid var(--tch-line); }

/* ---------- Owners: comparison ---------- */
.tch-compare-wrap { border: var(--tch-bw-1) solid var(--tch-line); border-radius: var(--tch-r-lg); background: var(--tch-card); overflow: hidden; }
.tch-compare { width: 100%; border-collapse: collapse; }
.tch-compare th, .tch-compare td { padding: var(--tch-sp-4); text-align: left; vertical-align: top; border-bottom: var(--tch-bw-1) solid var(--tch-line-soft); font-weight: var(--tch-fw-regular); }
.tch-compare tr:last-child th, .tch-compare tr:last-child td { border-bottom: 0; }
.tch-compare thead th { font-family: var(--tch-font-display); font-weight: var(--tch-fw-bold); color: var(--tch-ink); font-size: var(--tch-fs-h4); vertical-align: bottom; background: var(--tch-card); }
.tch-compare tbody th { color: var(--tch-ink); font-weight: var(--tch-fw-semibold); width: 20%; }
.tch-compare td { width: 22%; }
.tch-compare .is-tch { background: var(--tch-teal-tint); color: var(--tch-ink); width: 36%; }
.tch-compare thead .is-tch { color: var(--tch-teal-ink); }
.tch-compare .is-none { color: var(--tch-muted); }
.tch-compare .tch-money { font-size: var(--tch-fs-money-md); }
.tch-compare td .tch-money { color: var(--tch-text); }
.tch-compare .is-tch .tch-money { color: var(--tch-teal); }
@media (max-width: 859px) {
  .tch-compare-wrap { border: 0; background: transparent; border-radius: 0; overflow: visible; }
  .tch-compare, .tch-compare tbody, .tch-compare tr, .tch-compare th, .tch-compare td { display: block; width: auto; }
  .tch-compare thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tch-compare tbody { display: grid; gap: var(--tch-sp-4); }
  .tch-compare tr { border: var(--tch-bw-1) solid var(--tch-line); border-radius: var(--tch-r-md); background: var(--tch-card); overflow: hidden; }
  .tch-compare tbody th { width: auto; padding: var(--tch-sp-4); font-family: var(--tch-font-display); font-weight: var(--tch-fw-bold); font-size: var(--tch-fs-h4); border-bottom: var(--tch-bw-1) solid var(--tch-line-soft); }
  .tch-compare td, .tch-compare td.is-tch { width: auto; display: grid; grid-template-columns: 7.5rem 1fr; gap: var(--tch-sp-3); padding: var(--tch-sp-3) var(--tch-sp-4); }
  .tch-compare td::before { content: attr(data-col); font-size: var(--tch-fs-small); font-weight: var(--tch-fw-semibold); color: var(--tch-muted); }
  .tch-compare td.is-tch::before { color: var(--tch-teal-ink); }
  .tch-compare tr td:last-child { border-bottom: 0; }
}

/* ---------- Owners: testimonials ---------- */
.tch-quotes { display: grid; gap: var(--tch-sp-5); }
.tch-quote { display: grid; gap: var(--tch-sp-5); align-content: space-between; margin: 0; padding: var(--tch-sp-6) var(--tch-sp-5); background: var(--tch-card); border: var(--tch-bw-1) solid var(--tch-line); border-radius: var(--tch-r-lg); }
.tch-quote blockquote { margin: 0; color: var(--tch-ink); font-size: var(--tch-fs-lead); line-height: 1.55; }
.tch-quote--lead blockquote { font-family: var(--tch-font-display); font-weight: var(--tch-fw-bold); font-size: var(--tch-fs-h3); line-height: 1.4; letter-spacing: var(--tch-ls-display); }
.tch-quote figcaption { display: grid; grid-template-columns: auto 1fr; gap: var(--tch-sp-2) var(--tch-sp-4); align-items: center; }
.tch-quote figcaption img { width: 4rem; height: 4rem; border-radius: var(--tch-r-pill); object-fit: cover; }
.tch-quote__name { font-weight: var(--tch-fw-bold); color: var(--tch-ink); display: block; }
.tch-quote__since { font-size: var(--tch-fs-small); color: var(--tch-muted); display: block; }
.tch-quote .tch-textlink { grid-column: 1 / -1; justify-self: start; }
@media (min-width: 960px) {
  .tch-quotes { grid-template-columns: 1fr 1fr; }
  .tch-quote--lead { grid-column: 1 / -1; grid-template-columns: 1.6fr 1fr; align-items: center; column-gap: var(--tch-sp-8); padding: var(--tch-sp-7); background: var(--tch-teal-tint); border-color: var(--tch-teal-line); }
  .tch-quote--lead figcaption img { width: 5.5rem; height: 5.5rem; }
}

/* ---------- FAQ chips with one answer card ---------- */
.tch-faq { display: grid; gap: var(--tch-sp-5); }
.tch-faq__chips { display: flex; flex-wrap: wrap; gap: var(--tch-sp-2); }
.tch-faq__chips button { min-height: var(--tch-tap); padding: var(--tch-sp-2) var(--tch-sp-4); border: var(--tch-bw-15) solid var(--tch-line); border-radius: var(--tch-r-xl); background: var(--tch-card); color: var(--tch-ink); font-weight: var(--tch-fw-medium); cursor: pointer; text-align: left; line-height: 1.3; transition: background var(--tch-dur-1) var(--tch-ease), border-color var(--tch-dur-1) var(--tch-ease); }
.tch-faq__chips button:hover { border-color: var(--tch-teal); }
.tch-faq__chips button[aria-selected="true"] { background: var(--tch-teal); border-color: var(--tch-teal); color: var(--tch-teal-on); }
.tch-faq__panel { padding: var(--tch-sp-6) var(--tch-sp-5); background: var(--tch-card); border: var(--tch-bw-1) solid var(--tch-line); border-radius: var(--tch-r-lg); box-shadow: var(--tch-shadow-2); display: grid; gap: var(--tch-sp-3); }
.tch-faq__panel h3 { font-size: var(--tch-fs-h3); }
.tch-faq__panel p { font-size: var(--tch-fs-lead); max-width: 60ch; }
.js .tch-faq__panel[hidden] { display: none; }
.no-js .tch-faq__chips { display: none; }
@media (min-width: 960px) { .tch-faq { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--tch-sp-7); align-items: start; } .tch-faq__chips { flex-direction: column; align-items: stretch; } .tch-faq__panels { position: sticky; top: calc(var(--tch-nav-h) + var(--tch-sp-5)); } .tch-faq__panel { padding: var(--tch-sp-7); } }
.tch-faq__panels { display: grid; gap: var(--tch-sp-4); }

/* ---------- CTA band with the form inside. Flat teal; the wave rides on it (tch-atmos). ---------- */
.tch-band { background: var(--tch-teal); color: var(--tch-teal-on); border-radius: var(--tch-r-xl); padding: var(--tch-sp-7) var(--tch-sp-5); display: grid; gap: var(--tch-sp-6); }
.tch-band h2 { color: var(--tch-teal-on); }
.tch-band__copy { display: grid; gap: var(--tch-sp-4); align-content: center; justify-items: start; }
.tch-band__copy p { color: var(--tch-teal-on); font-size: var(--tch-fs-lead); max-width: var(--tch-w-copy-xs); }
.tch-form { display: grid; gap: var(--tch-sp-4); padding: var(--tch-sp-5); background: var(--tch-card); border-radius: var(--tch-r-lg); color: var(--tch-text); }
.tch-form__note { font-size: var(--tch-fs-small); color: var(--tch-muted); }
.tch-form__done { display: grid; gap: var(--tch-sp-2); padding: var(--tch-sp-6) var(--tch-sp-5); background: var(--tch-card); border-radius: var(--tch-r-lg); color: var(--tch-ink); }
.tch-form__done strong { font-family: var(--tch-font-display); font-size: var(--tch-fs-h3); }
.tch-form__done[hidden] { display: none; }
@media (min-width: 720px) { .tch-form { grid-template-columns: 1fr 1fr; } .tch-form .tch-field--wide, .tch-form .tch-btn, .tch-form__note { grid-column: 1 / -1; } }
@media (min-width: 960px) { .tch-band { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); padding: var(--tch-sp-8); gap: var(--tch-sp-8); align-items: center; } }
.tch-band--simple { text-align: center; justify-items: center; grid-template-columns: 1fr; }
.tch-band--simple .tch-band__copy { justify-items: center; }

/* ---------- Article ---------- */
.tch-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--tch-sp-2); font-size: var(--tch-fs-small); color: var(--tch-muted); }
.tch-crumbs a { display: inline-flex; align-items: center; min-height: var(--tch-tap); }
.tch-arthead { display: grid; gap: var(--tch-sp-4); max-width: var(--tch-w-narrow); padding-block: var(--tch-sp-5) var(--tch-sp-7); }
.tch-arthead h1, .tch-arthead .tch-demo-h1 { font-size: var(--tch-fs-h1-article); }
.tch-arthead .tch-lead { max-width: var(--tch-w-measure); color: var(--tch-slate); }
.tch-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--tch-sp-2) var(--tch-sp-4); font-size: var(--tch-fs-small); color: var(--tch-muted); }
.tch-meta b { color: var(--tch-ink); font-weight: var(--tch-fw-semibold); }
.tch-arthero { aspect-ratio: 16 / 9; border-radius: var(--tch-r-xl); }
@media (min-width: 800px) { .tch-arthero { aspect-ratio: 21 / 9; } }
.tch-artgrid { display: grid; gap: var(--tch-sp-7); padding-block: var(--tch-sp-7) var(--tch-section-y); }
.tch-toc { display: none; }
@media (min-width: 1100px) {
  .tch-artgrid { grid-template-columns: 15rem minmax(0, var(--tch-w-measure)); gap: var(--tch-sp-9); justify-content: start; }
  .tch-toc { display: block; position: sticky; top: calc(var(--tch-nav-h) + var(--tch-sp-6)); align-self: start; }
  .tch-toc h2 { font-family: var(--tch-font-body); font-size: var(--tch-fs-label); letter-spacing: var(--tch-ls-label); text-transform: uppercase; color: var(--tch-muted); font-weight: var(--tch-fw-semibold); margin-bottom: var(--tch-sp-3); }
  .tch-toc ol { border-left: var(--tch-bw-1) solid var(--tch-line); }
  .tch-toc a { display: flex; align-items: center; min-height: var(--tch-tap); padding: var(--tch-sp-2) var(--tch-sp-4); margin-left: -1px; border-left: var(--tch-bw-2) solid transparent; color: var(--tch-slate); font-size: var(--tch-fs-small); line-height: 1.4; text-decoration: none; }
  .tch-toc a:hover, .tch-toc a.is-here { color: var(--tch-teal-ink); border-left-color: var(--tch-teal); }
}
.tch-prose { max-width: var(--tch-w-measure); font-size: var(--tch-fs-article); line-height: var(--tch-lh-article); color: var(--tch-text); margin-inline: auto; width: 100%; }
.tch-prose > * + * { margin-top: var(--tch-sp-5); }
.tch-prose h2 { font-size: var(--tch-fs-h2-article); margin-top: var(--tch-sp-8); }
.tch-prose h2:first-child { margin-top: 0; }
.tch-prose h2 + * { margin-top: var(--tch-sp-4); }
.tch-prose h3 { font-size: var(--tch-fs-h3-article); margin-top: var(--tch-sp-6); }
.tch-prose h3 + * { margin-top: var(--tch-sp-2); }
.tch-prose strong { color: var(--tch-ink); font-weight: var(--tch-fw-semibold); }
.tch-prose a { text-decoration: underline; }
.tch-prose ul { display: grid; gap: var(--tch-sp-4); padding: var(--tch-sp-5); background: var(--tch-alt); border-radius: var(--tch-r-lg); border: var(--tch-bw-1) solid var(--tch-line-soft); }
.tch-prose ul li { padding-left: var(--tch-sp-5); position: relative; }
.tch-prose ul li::before { content: ""; position: absolute; left: 0; top: 0.72em; width: 0.625rem; height: 2px; background: var(--tch-teal); }
.tch-principle { margin-inline: 0; padding: var(--tch-sp-2) 0 var(--tch-sp-2) var(--tch-sp-5); border-left: var(--tch-bw-3) solid var(--tch-teal); color: var(--tch-ink); font-family: var(--tch-font-display); font-weight: var(--tch-fw-bold); font-size: var(--tch-fs-principle); line-height: 1.6; }
.tch-tablewrap { border: var(--tch-bw-1) solid var(--tch-line); border-radius: var(--tch-r-md); overflow: hidden; background: var(--tch-card); }
.tch-table { width: 100%; border-collapse: collapse; font-size: var(--tch-fs-body); line-height: 1.5; }
.tch-table th, .tch-table td { padding: var(--tch-sp-3) var(--tch-sp-4); text-align: left; vertical-align: top; border-bottom: var(--tch-bw-1) solid var(--tch-line-soft); }
.tch-table thead th { background: var(--tch-alt); color: var(--tch-ink); font-size: var(--tch-fs-small); font-weight: var(--tch-fw-semibold); }
.tch-table tbody th { color: var(--tch-ink); font-weight: var(--tch-fw-semibold); }
.tch-table tr:last-child th, .tch-table tr:last-child td { border-bottom: 0; }
@media (max-width: 639px) {
  .tch-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tch-table, .tch-table tbody, .tch-table tr, .tch-table th, .tch-table td { display: block; }
  .tch-table tr { padding: var(--tch-sp-3) 0; border-bottom: var(--tch-bw-1) solid var(--tch-line); }
  .tch-table tr:last-child { border-bottom: 0; }
  .tch-table th, .tch-table td { border: 0; padding: var(--tch-sp-1) var(--tch-sp-4); }
  .tch-table td::before { content: attr(data-col) ": "; font-size: var(--tch-fs-small); font-weight: var(--tch-fw-semibold); color: var(--tch-muted); }
}
.tch-artcta { margin-top: var(--tch-sp-8); }
.tch-divider { border: 0; border-top: var(--tch-bw-1) solid var(--tch-line); margin: 0; }

/* ---------- Insights cards and tabs ---------- */
.tch-cards { display: grid; gap: var(--tch-sp-6) var(--tch-sp-5); }
@media (min-width: 700px) { .tch-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .tch-cards { grid-template-columns: repeat(3, 1fr); } }
.tch-card { display: grid; grid-template-rows: auto 1fr; gap: var(--tch-sp-4); }
.tch-card[hidden] { display: none; }
.tch-card .tch-photo { aspect-ratio: 16 / 10; border-radius: var(--tch-r-lg); }
.tch-card .tch-photo img { transition: scale var(--tch-dur-3) var(--tch-ease); }
.tch-card:hover .tch-photo img { scale: 1.03; }
.tch-card__body { display: grid; gap: var(--tch-sp-2); align-content: start; }
.tch-card__title { font-size: var(--tch-fs-h3-article); line-height: 1.35; }
.tch-card__title a { color: var(--tch-ink); text-decoration: none; }
.tch-card__title a:hover { color: var(--tch-teal); }
.tch-card__sum { color: var(--tch-text); }
.tch-tabs { display: inline-flex; gap: var(--tch-sp-1); padding: var(--tch-sp-1); border-radius: var(--tch-r-pill); background: var(--tch-chip); margin-bottom: var(--tch-sp-6); max-width: 100%; }
.tch-tabs button { min-height: var(--tch-tap); padding: 0 var(--tch-sp-5); border: 0; border-radius: var(--tch-r-pill); background: transparent; color: var(--tch-slate); font-weight: var(--tch-fw-semibold); cursor: pointer; }
.tch-tabs button[aria-selected="true"], .tch-tabs button[aria-pressed="true"] { background: var(--tch-teal); color: var(--tch-teal-on); }
.tch-empty { padding: var(--tch-sp-7) var(--tch-sp-5); border: var(--tch-bw-15) dashed var(--tch-line); border-radius: var(--tch-r-lg); text-align: center; color: var(--tch-slate); font-size: var(--tch-fs-lead); }
.tch-empty[hidden] { display: none; }

/* ---------- Print: flatten blur and shadow, which Chromium PDF paints gray ---------- */
@media print {
  * { box-shadow: none !important; -webkit-mask-image: none !important; mask-image: none !important; }
  .tch-nav { position: static; }
}

/* ---------- Small helpers added with the pages ---------- */
.tch-footer__contact { font-style: normal; }
.tch-form[hidden] { display: none; }
.tch-figure { margin: 0; }
.tch-photo--wide { aspect-ratio: 16 / 10; }
.tch-photo--tall { aspect-ratio: 4 / 3; }
@media (min-width: 960px) { .tch-photo--tall { aspect-ratio: 5 / 5.4; } }
.tch-stat__num--word { font-size: var(--tch-fs-money-md); line-height: 1.5; white-space: nowrap; }

/* ---------- Owners page additions ---------- */
.tch-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.tch-section--flush { padding-top: 0; }
.tch-logos--small img { height: var(--tch-logo-h-sm); }
.tch-earn__detail { display: grid; gap: var(--tch-sp-5); align-content: center; }
.tch-device__screen { height: auto; }
.tch-device__title { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--tch-sp-2); }
.tch-device__title b { font-family: var(--tch-font-display); font-size: var(--tch-fs-h4); color: var(--tch-ink); letter-spacing: var(--tch-ls-display); }
.tch-device__avatar { margin-left: auto; }
@media (min-width: 960px) { .tch-split--device { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (max-width: 639px) { .tch-logos { gap: var(--tch-sp-4) var(--tch-sp-5); } .tch-logos img { height: var(--tch-logo-h-sm); } .tch-logos img.tch-logos__tall { height: var(--tch-logo-h-tall-sm); } }

/* Look round 1, owners */
.tch-logos--small { justify-content: center; gap: var(--tch-sp-4) var(--tch-sp-8); }
@media (min-width: 900px) { .tch-logos--small { justify-content: center; } .tch-logos--small img { height: var(--tch-logo-h-row); } }
@media (max-width: 639px) { .tch-pl .is-total th, .tch-pl .is-total td { font-size: var(--tch-fs-body); } .tch-pl th, .tch-pl td { padding-inline: var(--tch-sp-1); } }
.tch-quote blockquote p { text-wrap: wrap; }
.tch-cards[hidden] { display: none; }
.tch-prose .tch-band h2 { margin-top: 0; font-size: var(--tch-fs-h3); }
.tch-prose a.tch-btn { text-decoration: none; }
/* Look round 1, article */
@media (min-width: 640px) { .tch-table thead th { white-space: nowrap; } }
@media (max-width: 639px) {
  .tch-prose ul { padding: var(--tch-sp-4); }
  .tch-prose ul li { padding-left: var(--tch-sp-4); }
  .tch-table--pair td::before { content: none; }
}
.tch-prose p { text-wrap: wrap; }
/* Look round 1, home */
.tch-nowrap { white-space: nowrap; }
@media (min-width: 900px) { .tch-homes--feature .tch-home:not(:first-child) .tch-home__body { align-content: center; } }

/* Look round 2: card links share one baseline per row */
.tch-card__body { grid-template-rows: auto auto 1fr auto; }
.tch-card__body > .tch-textlink { align-self: end; justify-self: start; }


/* =====================================================================
   Refinement round 3 (Julia + Mark, 2026-09-21)
   J = Julia's deck note. M = Mark's note. S = SEO template fix. F = shared fault.
   ===================================================================== */

/* J1 search form: the input and the select are the same box */
.tch-field input, .tch-field select { height: var(--tch-tap); line-height: 1.2; font-family: inherit; font-size: var(--tch-fs-body); color: var(--tch-ink); }
.tch-field select { -webkit-appearance: none; appearance: none; padding-right: var(--tch-sp-6); background-image: linear-gradient(45deg, transparent 50%, var(--tch-slate) 50%), linear-gradient(135deg, var(--tch-slate) 50%, transparent 50%); background-repeat: no-repeat; background-size: 0.375rem 0.375rem; background-position: calc(100% - 1.125rem) 50%, calc(100% - 0.75rem) 50%; }
.tch-field select:invalid, .tch-field select.is-empty { color: var(--tch-muted); }

/* J4 footer: the gold rule starts at the left edge of the logo */
.tch-lockup { justify-items: start; }

/* J5 owners earnings card: space between the note and the button */
.tch-earn__foot .tch-btn { margin-top: var(--tch-sp-3); }

/* J11 article CTA: section-heading size */
.tch-prose .tch-band h2 { font-size: var(--tch-fs-h2); }

/* M1 count-up: fixed-width numerals so the stat does not shift */
[data-count] { font-variant-numeric: tabular-nums; }

/* M3 gold: highlighter under the hero keyword */
.tch-hero h1 .tch-em, .tch-hero .tch-demo-h1 .tch-em { background: linear-gradient(transparent 66%, var(--tch-hl-gold) 66%, var(--tch-hl-gold) 94%, transparent 94%); -webkit-box-decoration-break: clone; box-decoration-break: clone; padding-inline: 0.06em; }

/* M2 photo band: text on a home photo */
.tch-photoband { position: relative; isolation: isolate; overflow: hidden; display: grid; align-items: end; min-height: var(--tch-band-min-h); padding: var(--tch-sp-7) var(--tch-sp-5); border-radius: var(--tch-r-xl); background: var(--tch-teal-ink); color: var(--tch-on-photo); }
.tch-photoband__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.tch-photoband::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--tch-scrim-band); }
.tch-photoband__copy { display: grid; gap: var(--tch-sp-4); justify-items: start; max-width: var(--tch-w-copy-lg); }
.tch-photoband h1, .tch-photoband .tch-demo-h1, .tch-photoband h2, .tch-photoband h3, .tch-photoband p, .tch-photoband .tch-lead, .tch-photoband .tch-stat__label, .tch-photoband label { color: var(--tch-on-photo); }
.tch-photoband .tch-em, .tch-photoband .tch-stat__num { color: var(--tch-gold); }
.tch-photoband .tch-head { margin-bottom: 0; }
.tch-photoband .tch-proof__stats .tch-stat { border-top-color: var(--tch-line-on-photo); }
.tch-photoband .tch-crumbs, .tch-photoband .tch-crumbs a { color: var(--tch-on-photo); }
@media (min-width: 960px) {
  .tch-photoband { padding: var(--tch-sp-8); }
  .tch-photoband--side::before { background: var(--tch-scrim-band-side); }
  .tch-proof.tch-photoband { align-items: center; }
}

/* M4 shapes: three marks from the palette. Fills come from tokens. */
.tch-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.tch-shape { position: absolute; z-index: -1; pointer-events: none; }
.tch-shape--arc { fill: var(--tch-gold); }
.tch-shape--arch { fill: var(--tch-teal-tint); }
.tch-shape--roof { fill: var(--tch-teal); }
.tch-shape__cut { stroke: var(--tch-gold); }
.tch-hero__photos { position: relative; isolation: isolate; }
.tch-shape--hero.tch-shape--arc { width: var(--tch-shape-sm); height: var(--tch-shape-sm); top: calc(-1 * var(--tch-sp-3)); right: calc(-1 * var(--tch-sp-3)); rotate: 90deg; }
.tch-shape--hero.tch-shape--arch { width: var(--tch-shape-sm); height: calc(var(--tch-shape-sm) * 1.2); left: calc(-1 * var(--tch-sp-4)); top: 46%; }
@media (min-width: 960px) {
  .tch-shape--hero.tch-shape--arc { width: var(--tch-shape-md); height: var(--tch-shape-md); top: calc(-1 * var(--tch-sp-4)); right: calc(-1 * var(--tch-sp-4)); }
  .tch-shape--hero.tch-shape--arch { width: var(--tch-shape-md); height: calc(var(--tch-shape-md) * 1.2); left: calc(-1 * var(--tch-sp-6)); top: 44%; }
}
.tch-band { position: relative; isolation: isolate; overflow: hidden; }
.tch-shape--band { width: var(--tch-sp-7); height: var(--tch-sp-7); top: 0; right: 0; rotate: -90deg; }
@media (min-width: 960px) { .tch-shape--band { width: var(--tch-sp-8); height: var(--tch-sp-8); } }
.tch-head--shape .tch-shape--head { position: static; z-index: auto; width: var(--tch-shape-sm); height: var(--tch-shape-sm); }

/* M5 reviews: the slot for the Elfsight widget */
.tch-elfsight { display: grid; gap: var(--tch-sp-4); padding: var(--tch-sp-4); background: var(--tch-card); border: var(--tch-bw-15) dashed var(--tch-teal-line); border-radius: var(--tch-r-lg); }
.tch-elfsight__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--tch-sp-3); }
.tch-elfsight__bar .tch-reviews { margin-top: 0; }
.tch-elfsight__cards { display: grid; gap: var(--tch-sp-4); }
.tch-elfsight__cards li { display: grid; gap: var(--tch-sp-3); padding: var(--tch-sp-5); background: var(--tch-canvas); border: var(--tch-bw-1) solid var(--tch-line); border-radius: var(--tch-r-md); }
.tch-stars { display: block; width: calc(var(--tch-star-w) * 5); height: var(--tch-star-w); background: var(--tch-gold); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 1.6l2.6 5.4 5.9.8-4.3 4.1 1 5.9L10 15l-5.2 2.8 1-5.9L1.5 7.8l5.9-.8z'/%3E%3C/svg%3E") 0 0 / var(--tch-star-w) var(--tch-star-w) repeat-x; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 1.6l2.6 5.4 5.9.8-4.3 4.1 1 5.9L10 15l-5.2 2.8 1-5.9L1.5 7.8l5.9-.8z'/%3E%3C/svg%3E") 0 0 / var(--tch-star-w) var(--tch-star-w) repeat-x; }
.tch-skel { display: block; height: var(--tch-skel-h); border-radius: var(--tch-r-pill); background: var(--tch-line-soft); }
.tch-skel--short { width: 60%; }
.tch-elfsight .tch-caption { margin-top: 0; }
@media (min-width: 800px) { .tch-elfsight { padding: var(--tch-sp-5); } .tch-elfsight__cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tch-subhead { margin-top: var(--tch-sp-8); margin-bottom: var(--tch-sp-4); font-size: var(--tch-fs-h3); }
.tch-ownerline--flat { margin-top: 0; }

/* S1 city ticker: every city is a link. The strip stops on hover and on keyboard focus. */
.tch-ticker__track li { min-height: var(--tch-tap); padding: 0; }
.tch-ticker__track li a { display: inline-flex; align-items: center; min-height: var(--tch-tap); padding: 0 var(--tch-sp-4); border-radius: var(--tch-r-pill); color: inherit; text-decoration: none; }
.tch-ticker__track li:hover, .tch-ticker__track li:focus-within { border-color: var(--tch-teal); color: var(--tch-teal-ink); }
.tch-ticker:hover .tch-ticker__track, .tch-ticker:focus-within .tch-ticker__track { animation-play-state: paused; }

/* S2 metro row: four static links to the metro pages */
.tch-metros { display: grid; grid-template-columns: 1fr 1fr; gap: var(--tch-sp-3); margin-top: var(--tch-sp-6); }
.tch-metros a { display: grid; gap: var(--tch-sp-1); align-content: center; min-height: 4.5rem; padding: var(--tch-sp-3) var(--tch-sp-4); background: var(--tch-card); border: var(--tch-bw-1) solid var(--tch-line); border-radius: var(--tch-r-md); text-decoration: none; color: var(--tch-text); transition: border-color var(--tch-dur-1) var(--tch-ease), box-shadow var(--tch-dur-2) var(--tch-ease); }
.tch-metros a:hover { border-color: var(--tch-teal); box-shadow: var(--tch-shadow-2); }
.tch-metros b { font-family: var(--tch-font-display); font-size: var(--tch-fs-h4); color: var(--tch-ink); }
.tch-metros span { display: inline-flex; align-items: center; gap: var(--tch-sp-2); font-size: var(--tch-fs-small); font-weight: var(--tch-fw-semibold); color: var(--tch-teal); }
.tch-metros .tch-caret { rotate: -45deg; margin-top: 0; }
@media (min-width: 800px) { .tch-metros { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--tch-sp-4); } }

/* Build note under a grid that the app fills */
.tch-devnote { margin-top: var(--tch-sp-4); padding-left: var(--tch-sp-3); border-left: var(--tch-bw-3) solid var(--tch-gold); font-size: var(--tch-fs-small); color: var(--tch-muted); max-width: var(--tch-w-copy-lg); }
.tch-btnrow { display: flex; flex-wrap: wrap; align-items: center; gap: var(--tch-sp-3) var(--tch-sp-5); }

/* F1 owners: sticky CTA on a phone, shown when the hero and the form are out of view */
.tch-sticky { position: fixed; inset: auto 0 0 0; z-index: var(--tch-sticky-z); padding: var(--tch-sp-3) var(--tch-gutter) calc(var(--tch-sp-3) + env(safe-area-inset-bottom, 0px)); background: var(--tch-card); border-top: var(--tch-bw-1) solid var(--tch-line); box-shadow: var(--tch-shadow-3); translate: 0 110%; visibility: hidden; transition: translate var(--tch-dur-2) var(--tch-ease), visibility 0s linear var(--tch-dur-2); }
.tch-sticky.is-on { translate: 0 0; visibility: visible; transition-delay: 0s; }
@media (min-width: 800px) { .tch-sticky { display: none; } }

/* F2 form: inline errors */
.tch-field__err { font-size: var(--tch-fs-small); font-weight: var(--tch-fw-medium); color: var(--tch-red); }
.tch-field__err:empty { display: none; }
.tch-field input[aria-invalid="true"] { border-color: var(--tch-red); background: var(--tch-red-tint); }
.tch-form__done a { font-weight: var(--tch-fw-semibold); }

/* F3 comparison table: a dash, with the words kept for screen readers */
.tch-compare__note { margin-top: var(--tch-sp-3); }

/* City page (metro and location template), round 3 */
.tch-cityhero { padding-top: var(--tch-sp-3); }
.tch-photoband--hero { min-height: min(72dvh, 38rem); align-items: end; }
.tch-photoband--hero h1, .tch-photoband--hero .tch-demo-h1 { font-size: var(--tch-fs-h1-video); }
.tch-cityhero__count { font-size: var(--tch-fs-lead); }
.tch-cityhero__count b { font-family: var(--tch-font-display); font-size: var(--tch-fs-money-md); color: var(--tch-gold); }
.tch-textlink--light { color: var(--tch-on-photo); }
.tch-photoband .tch-search { max-width: var(--tch-w-copy-sm); color: var(--tch-text); }
.tch-photoband .tch-search label { color: var(--tch-ink); }
.tch-home--ph .tch-home__photo img { filter: grayscale(1); opacity: 0.35; }
.tch-home--ph .tch-home__title, .tch-home--ph .tch-home__specs, .tch-home--ph .tch-home__city { color: var(--tch-muted); }
.tch-state { display: grid; gap: var(--tch-sp-3); justify-items: start; margin-top: var(--tch-sp-6); padding: var(--tch-sp-6) var(--tch-sp-5); background: var(--tch-alt); border: var(--tch-bw-1) dashed var(--tch-line); border-radius: var(--tch-r-lg); }
.tch-state h3 { font-size: var(--tch-fs-h3); }
.tch-state[hidden] { display: none; }
.tch-areas { display: flex; flex-wrap: wrap; gap: var(--tch-sp-3); }
.tch-areas a { display: inline-flex; align-items: center; min-height: var(--tch-tap); padding: 0 var(--tch-sp-5); background: var(--tch-card); border: var(--tch-bw-1) solid var(--tch-line); border-radius: var(--tch-r-pill); color: var(--tch-ink); font-weight: var(--tch-fw-medium); text-decoration: none; transition: border-color var(--tch-dur-1) var(--tch-ease), color var(--tch-dur-1) var(--tch-ease); }
.tch-areas a:hover { border-color: var(--tch-teal); color: var(--tch-teal-ink); }
.tch-uses { display: grid; gap: var(--tch-sp-5); }
.tch-use { display: grid; gap: var(--tch-sp-3); align-content: start; justify-items: start; padding: var(--tch-sp-5); background: var(--tch-card); border: var(--tch-bw-1) solid var(--tch-line); border-radius: var(--tch-r-lg); }
.tch-use__mark { width: var(--tch-shape-sm); height: var(--tch-shape-sm); fill: var(--tch-teal); }
.tch-use__mark .tch-shape__cut { stroke: var(--tch-gold); }
.tch-use h3 { font-size: var(--tch-fs-h3); }
.tch-use p { max-width: 44ch; }
@media (min-width: 800px) { .tch-uses { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tch-linklist { display: grid; gap: var(--tch-sp-3); max-width: var(--tch-w-narrow); }
.tch-linklist a { display: flex; align-items: center; gap: var(--tch-sp-4); min-height: var(--tch-tap); padding: var(--tch-sp-3) var(--tch-sp-4); background: var(--tch-card); border: var(--tch-bw-1) solid var(--tch-line); border-radius: var(--tch-r-md); color: var(--tch-ink); font-weight: var(--tch-fw-medium); text-decoration: none; }
.tch-linklist a:hover { border-color: var(--tch-teal); color: var(--tch-teal-ink); }
.tch-container--narrow { max-width: var(--tch-w-narrow); }
.tch-qas { display: grid; gap: var(--tch-sp-3); }
.tch-qa { background: var(--tch-card); border: var(--tch-bw-1) solid var(--tch-line); border-radius: var(--tch-r-md); }
.tch-qa > summary { display: flex; align-items: center; justify-content: space-between; gap: var(--tch-sp-4); min-height: var(--tch-tap); padding: var(--tch-sp-4) var(--tch-sp-5); cursor: pointer; list-style: none; font-family: var(--tch-font-display); font-weight: var(--tch-fw-bold); font-size: var(--tch-fs-h4); color: var(--tch-ink); }
.tch-qa > summary::-webkit-details-marker { display: none; }
.tch-qa > p { padding: 0 var(--tch-sp-5) var(--tch-sp-5); max-width: 62ch; }

/* ---------- Owners subpages (midterm rentals, target properties and markets, furnishing guide, refer an owner) ---------- */
.tch-subnav { justify-content: center; }
.tch-subnav a[aria-current="page"] { background: var(--tch-teal); border-color: var(--tch-teal); color: var(--tch-teal-on); }
.tch-specs { display: grid; gap: var(--tch-sp-4); margin: 0; }
.tch-spec { display: grid; gap: var(--tch-sp-2); align-content: start; padding: var(--tch-sp-5); background: var(--tch-card); border: var(--tch-bw-1) solid var(--tch-line); border-radius: var(--tch-r-lg); }
.tch-spec dt { font-size: var(--tch-fs-small); font-weight: var(--tch-fw-semibold); letter-spacing: var(--tch-ls-label); text-transform: uppercase; color: var(--tch-muted); }
.tch-spec dd { margin: 0; font-family: var(--tch-font-display); font-weight: var(--tch-fw-bold); font-size: var(--tch-fs-h3); line-height: var(--tch-lh-heading); color: var(--tch-ink); }
@media (min-width: 640px) { .tch-specs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) { .tch-specs { grid-template-columns: repeat(3, minmax(0, 1fr)); } .tch-split .tch-specs { grid-template-columns: 1fr; } }
.tch-specs + .tch-caption, .tch-specs + .tch-devnote { margin-top: var(--tch-sp-5); }
.tch-why__note { margin-top: var(--tch-sp-7); max-width: var(--tch-w-narrow); }
.tch-band__cta { display: grid; align-content: center; justify-items: start; }
@media (min-width: 960px) { .tch-band__cta { justify-items: end; } }
.tch-markets { display: grid; gap: var(--tch-sp-6); }
.tch-market { display: grid; gap: var(--tch-sp-4); align-content: start; }
.tch-market h3 { font-size: var(--tch-fs-h3); padding-bottom: var(--tch-sp-3); border-bottom: var(--tch-bw-2) solid var(--tch-teal); }
.tch-market ul { display: grid; gap: var(--tch-sp-2); margin: 0; padding: 0; list-style: none; }
.tch-market li { display: flex; align-items: center; justify-content: space-between; gap: var(--tch-sp-3); min-height: var(--tch-tap); padding: 0 var(--tch-sp-3); background: var(--tch-card); border: var(--tch-bw-1) solid var(--tch-line-soft); border-radius: var(--tch-r-md); }
@media (min-width: 640px) { .tch-market--wide ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 800px) { .tch-markets { grid-template-columns: repeat(4, minmax(0, 1fr)); } .tch-market--wide { grid-column: span 2; } }
.tch-steps--text .tch-step p { max-width: 40ch; }
.tch-steps--text .tch-step { padding: var(--tch-sp-5); background: var(--tch-card); border: var(--tch-bw-1) solid var(--tch-line); border-radius: var(--tch-r-lg); }
@media (min-width: 860px) { .tch-steps--text .tch-step:nth-child(2), .tch-steps--text .tch-step:nth-child(3) { margin-top: 0; } }
@media (min-width: 800px) { .tch-steps--text { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tch-benefits__list--four > li { grid-column: auto; }
@media (min-width: 800px) { .tch-benefits__list--four { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .tch-benefits__list--four { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.tch-gallery { display: grid; gap: var(--tch-sp-4); margin: 0; padding: 0; list-style: none; }
.tch-gallery .tch-photo { aspect-ratio: 3 / 2; }
@media (min-width: 640px) { .tch-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) { .tch-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tch-gallery + .tch-caption { margin-top: var(--tch-sp-5); }
.tch-split .tch-refer { width: 100%; margin-top: var(--tch-sp-4); }
.tch-split .tch-subhead { margin-top: 0; }

/* =====================================================================
   Themes from the Radius system (2026-09-22, redesigned 2026-09-22 pm,
   rebuilt on the teal-to-sky gradient and the wave 2026-09-30).
   Each device is a Radius pattern rebuilt on the TCH tokens. The signature
   is the teal-to-sky gradient (--tch-grad): it is the stroke of the wave,
   the rule, the step track, the underline of a link, the accent bar on a
   chip. Rules: one wave per zone, the wave hides under 992px, light
   surfaces only, the gradient is a stroke and never a text fill on white,
   never a button fill. The gradient carries no gold, so it does not count
   as a gold use.
   ===================================================================== */

/* R1 the wave: a field of 32 lines in the gradient, in constant slow motion.
   site.js draws the paths and the SMIL morph into an empty <svg class="tch-wave" data-wave>;
   the markup on the page carries no path data. --tch-pat-stroke is the stroke; the light
   variant on a teal band reads the sprite's sky-to-white gradient. The wave enters with one
   opacity fade when its zone scrolls in (.is-in), pauses off screen, and holds frame 0 under
   prefers-reduced-motion. Never under a glass (backdrop-filter) surface; never on a photo. */
.tch-atmos { position: relative; isolation: isolate; overflow: hidden; }
.tch-wave { position: absolute; z-index: -1; pointer-events: none; display: none; color: var(--tch-teal); opacity: 0; --tch-pat-stroke: url(#tch-grad-stroke); transition: opacity var(--tch-dur-3) var(--tch-ease); }
.tch-atmos.is-in .tch-wave, .no-js .tch-wave { opacity: var(--tch-pattern-op); }
.tch-wave path { stroke: var(--tch-pat-stroke); opacity: var(--op, 1); }
@media (min-width: 992px) { .tch-wave { display: block; } }
.tch-wave--foot { left: 50%; bottom: 0; width: 100vw; height: var(--tch-wave-h); translate: -50% 0; mask-image: linear-gradient(to top, black 55%, transparent); -webkit-mask-image: linear-gradient(to top, black 55%, transparent); }
.tch-wave--light { color: var(--tch-teal-on); --tch-pat-stroke: url(#tch-grad-stroke-light); }
.tch-wave--solid { --tch-pat-stroke: currentColor; }
/* on a teal band the wave runs edge to edge in the light gradient, a little softer */
.tch-band.tch-atmos .tch-wave { color: var(--tch-teal-on); --tch-pat-stroke: url(#tch-grad-stroke-light); }
.tch-band.tch-atmos.is-in .tch-wave { opacity: calc(var(--tch-pattern-op) * 0.7); }
.tch-band.tch-atmos .tch-wave--foot { width: 100%; left: 0; translate: 0 0; height: var(--tch-wave-h-band); mask-image: none; -webkit-mask-image: none; }
@media (prefers-reduced-motion: reduce) { .tch-wave { transition: none; } }

/* R2 corner wash on a card, with the gradient edge variant */
.tch-wash { position: relative; background-image: var(--tch-wash); background-repeat: no-repeat; }
.tch-wash--gold { background-image: var(--tch-wash), var(--tch-wash-gold); }
.tch-wash--edge { background-image: var(--tch-grad), var(--tch-wash); background-size: 100% var(--tch-connector-h), auto; background-position: 0 0, 0 0; }
.tch-wash--edge.tch-wash--gold { background-image: var(--tch-grad), var(--tch-wash), var(--tch-wash-gold); background-size: 100% var(--tch-connector-h), auto, auto; }

/* R3 float chip: one live fact over the device, with a gradient bar at its left edge */
.tch-device-wrap { position: relative; }
.tch-float { position: absolute; z-index: 2; right: var(--tch-sp-4); top: auto; bottom: var(--tch-sp-8); width: var(--tch-float-w); display: grid; gap: var(--tch-sp-1); padding: var(--tch-sp-4) var(--tch-sp-4) var(--tch-sp-4) calc(var(--tch-sp-4) + var(--tch-sp-2)); border-radius: var(--tch-r-lg); background: var(--tch-teal-on); box-shadow: var(--tch-shadow-3); overflow: hidden; }
.tch-float::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: var(--tch-connector-h); background: var(--tch-grad-v); }
.tch-float .tch-chip { margin: 0 0 var(--tch-sp-1); justify-self: start; }
.tch-float__num { font-family: var(--tch-font-display); font-weight: var(--tch-fw-bold); font-size: var(--tch-fs-h3); line-height: 1.1; color: var(--tch-teal); }
.tch-float__label { font-size: var(--tch-fs-small); color: var(--tch-muted); }
@media (max-width: 991px) { .tch-float { display: none; } }
@media (min-width: 1200px) { .tch-float { right: var(--tch-sp-5); } }

/* R4 stat panel: teal gradient ground, one gradient rule over each serif number, one source line */
.tch-statpanel { display: grid; gap: var(--tch-sp-5); padding: var(--tch-sp-6) var(--tch-sp-5); border-radius: var(--tch-r-xl); background: var(--tch-panel-grad); color: var(--tch-teal-on); }
.tch-statpanel__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--tch-sp-5) var(--tch-sp-4); }
.tch-statpanel .tch-stat { border: 0; padding: 0; }
.tch-statpanel .tch-stat::before { content: ""; display: block; width: var(--tch-sp-7); height: var(--tch-connector-h); margin-bottom: var(--tch-sp-3); border-radius: var(--tch-r-pill); background: var(--tch-grad-light); transform-origin: left center; scale: 0 1; transition: scale var(--tch-draw-dur) var(--tch-ease); }
.tch-statpanel.is-in .tch-stat::before, .no-js .tch-statpanel .tch-stat::before { scale: 1 1; }
.tch-statpanel .tch-stat:nth-child(2)::before { transition-delay: var(--tch-stagger); }
.tch-statpanel .tch-stat:nth-child(3)::before { transition-delay: calc(var(--tch-stagger) * 2); }
.tch-statpanel .tch-stat:nth-child(4)::before { transition-delay: calc(var(--tch-stagger) * 3); }
.tch-statpanel .tch-stat__num { color: var(--tch-teal-on); }
.tch-statpanel .tch-stat__label { color: rgba(255, 255, 255, 0.82); }
.tch-statpanel__source { font-size: var(--tch-fs-small); color: rgba(255, 255, 255, 0.72); margin: 0; }
@media (min-width: 860px) { .tch-statpanel { padding: var(--tch-sp-7) var(--tch-sp-7); } .tch-statpanel__grid { grid-template-columns: repeat(4, 1fr); } }
.tch-uses + .tch-statpanel { margin-top: var(--tch-sp-6); }
.tch-statpanel + .tch-why__note { margin-top: var(--tch-sp-6); }

/* R5 gradient rule under a section heading: teal to sky, draws from the left on reveal */
.tch-head--rule h2::after { content: ""; display: block; width: var(--tch-sp-9); height: var(--tch-connector-h); margin-top: var(--tch-sp-4); border-radius: var(--tch-r-pill); background: var(--tch-grad); transform-origin: left center; scale: 0 1; transition: scale var(--tch-draw-dur) var(--tch-ease) var(--tch-dur-2); }
.tch-head--rule.is-in h2::after, .no-js .tch-head--rule h2::after { scale: 1 1; }
.tch-head--center.tch-head--rule h2::after { margin-inline: auto; transform-origin: center; }

/* R6 step flow: numbered steps on one gradient track. The track draws over --tch-draw-dur, then the steps
   arrive one after another every --tch-step-stagger. Ported from the Radius for-hosts "how it works" flow.
   .tch-lifecycle is the four-stage alias used on the owners demand section. Vertical under 768px. */
.tch-stepflow, .tch-lifecycle { position: relative; display: grid; gap: var(--tch-sp-5); margin: 0; padding: 0 0 0 calc(var(--tch-step-size) + var(--tch-sp-4)); list-style: none; counter-reset: step; }
.tch-stepflow::before, .tch-lifecycle::before { content: ""; position: absolute; left: calc(var(--tch-step-size) / 2 - var(--tch-connector-h) / 2); top: calc(var(--tch-step-size) / 2); bottom: calc(var(--tch-step-size) / 2); width: var(--tch-connector-h); border-radius: var(--tch-r-pill); background: var(--tch-grad-v); transform-origin: center top; scale: 1 0; transition: scale var(--tch-draw-dur) var(--tch-ease); }
.js .tch-stepflow.is-in::before, .js .tch-lifecycle.is-in::before, .no-js .tch-stepflow::before, .no-js .tch-lifecycle::before { scale: 1 1; }
.tch-stepflow__step, .tch-lifecycle__stage { position: relative; display: grid; gap: var(--tch-sp-2); align-content: start; }
.tch-stepflow__step::before, .tch-lifecycle__stage::before { counter-increment: step; content: counter(step); position: absolute; left: calc(-1 * var(--tch-step-size) - var(--tch-sp-4)); top: 0; display: grid; place-items: center; width: var(--tch-step-size); height: var(--tch-step-size); box-sizing: border-box; border: var(--tch-ring) solid transparent; border-radius: var(--tch-r-pill); background: linear-gradient(var(--tch-teal-on), var(--tch-teal-on)) padding-box, var(--tch-grad) border-box; color: var(--tch-teal); font-family: var(--tch-font-display); font-weight: var(--tch-fw-bold); font-size: var(--tch-fs-body); line-height: 1; }
.tch-stepflow__kicker { font-size: var(--tch-fs-small); font-weight: var(--tch-fw-semibold); letter-spacing: 0.04em; text-transform: uppercase; color: var(--tch-teal); }
.tch-stepflow__step h3, .tch-lifecycle__stage h3 { font-size: var(--tch-fs-h4); margin: 0; }
.tch-stepflow__step p, .tch-lifecycle__stage p { margin: 0; font-size: var(--tch-fs-body); color: var(--tch-muted); max-width: 32ch; }
.tch-stepflow__step b, .tch-lifecycle__stage b { color: var(--tch-teal); }
/* the steps arrive after the track: opacity and translate, staggered */
.js .tch-stepflow > .tch-stepflow__step, .js .tch-lifecycle > .tch-lifecycle__stage { opacity: 0; translate: 0 var(--tch-reveal-shift); transition: opacity var(--tch-dur-3) var(--tch-ease), translate var(--tch-dur-3) var(--tch-ease); }
.js .tch-stepflow.is-in > .tch-stepflow__step, .js .tch-lifecycle.is-in > .tch-lifecycle__stage { opacity: 1; translate: 0 0; }
.js .tch-stepflow.is-in > :nth-child(1), .js .tch-lifecycle.is-in > :nth-child(1) { transition-delay: var(--tch-step-delay); }
.js .tch-stepflow.is-in > :nth-child(2), .js .tch-lifecycle.is-in > :nth-child(2) { transition-delay: calc(var(--tch-step-delay) + var(--tch-step-stagger)); }
.js .tch-stepflow.is-in > :nth-child(3), .js .tch-lifecycle.is-in > :nth-child(3) { transition-delay: calc(var(--tch-step-delay) + var(--tch-step-stagger) * 2); }
.js .tch-stepflow.is-in > :nth-child(4), .js .tch-lifecycle.is-in > :nth-child(4) { transition-delay: calc(var(--tch-step-delay) + var(--tch-step-stagger) * 3); }
.js .tch-stepflow.is-in > :nth-child(5), .js .tch-lifecycle.is-in > :nth-child(5) { transition-delay: calc(var(--tch-step-delay) + var(--tch-step-stagger) * 4); }
.js .tch-stepflow.is-in > :nth-child(6), .js .tch-lifecycle.is-in > :nth-child(6) { transition-delay: calc(var(--tch-step-delay) + var(--tch-step-stagger) * 5); }
@media (min-width: 768px) {
  .tch-stepflow, .tch-lifecycle { grid-template-columns: repeat(var(--tch-steps, 3), 1fr); gap: var(--tch-sp-6); padding: calc(var(--tch-step-size) + var(--tch-sp-4)) 0 0; }
  .tch-lifecycle { --tch-steps: 4; }
  .tch-stepflow::before, .tch-lifecycle::before { left: calc(var(--tch-step-size) / 2); right: calc(var(--tch-step-size) / 2); top: calc(var(--tch-step-size) / 2 - var(--tch-connector-h) / 2); bottom: auto; width: auto; height: var(--tch-connector-h); background: var(--tch-grad); transform-origin: left center; scale: 0 1; }
  .tch-stepflow__step::before, .tch-lifecycle__stage::before { left: 0; top: calc(-1 * var(--tch-step-size) - var(--tch-sp-4)); }
}
.tch-stepflow--card > li, .tch-lifecycle--card > li { padding: var(--tch-sp-5); border-radius: var(--tch-r-lg); background: var(--tch-teal-on); border: var(--tch-bw-1) solid var(--tch-line); }
/* the replay control on the themes page and anywhere a flow needs a second run */
.tch-replay { display: inline-flex; align-items: center; gap: var(--tch-sp-2); min-height: var(--tch-tap); padding: 0 var(--tch-sp-4); border: var(--tch-bw-15) solid var(--tch-teal); border-radius: var(--tch-r-pill); background: var(--tch-card); color: var(--tch-teal); font: inherit; font-size: var(--tch-fs-small); font-weight: var(--tch-fw-semibold); cursor: pointer; }
.tch-replay:hover { background: var(--tch-teal-tint); }
.is-reset, .is-reset * , .is-reset::before, .is-reset *::before, .is-reset::after, .is-reset *::after { transition: none !important; }

/* R7 trust strip: proof chips in one row, each with a gradient dot */
.tch-trust { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--tch-sp-2) var(--tch-sp-3); margin: 0 0 var(--tch-sp-5); padding: 0; list-style: none; }
.tch-trust li { display: inline-flex; align-items: baseline; gap: var(--tch-sp-2); padding: var(--tch-sp-2) var(--tch-sp-4); border-radius: var(--tch-r-pill); background: var(--tch-card); border: var(--tch-bw-1) solid var(--tch-line); color: var(--tch-teal-ink); font-size: var(--tch-fs-small); }
.tch-trust li::before { content: ""; align-self: center; width: 0.5rem; height: 0.5rem; border-radius: var(--tch-r-pill); background: var(--tch-grad); }
.tch-trust b { font-family: var(--tch-font-display); font-weight: var(--tch-fw-bold); font-size: var(--tch-fs-body); color: var(--tch-teal); }

/* R8 math card: two columns of the same figures, the TCH column marked with a gradient cap */
.tch-math { display: grid; gap: var(--tch-sp-5); padding: var(--tch-sp-5); border-radius: var(--tch-r-xl); background: var(--tch-teal-on); border: var(--tch-bw-1) solid var(--tch-line); box-shadow: var(--tch-shadow-2); }
.tch-math__head { display: grid; gap: var(--tch-sp-2); }
.tch-math__head p { margin: 0; color: var(--tch-muted); }
.tch-math table { width: 100%; border-collapse: collapse; font-size: var(--tch-fs-body); }
.tch-math th, .tch-math td { padding: var(--tch-sp-3) var(--tch-sp-2); text-align: left; border-top: var(--tch-bw-1) solid var(--tch-line); vertical-align: top; }
.tch-math thead th { border-top: 0; font-size: var(--tch-fs-small); color: var(--tch-muted); font-weight: var(--tch-fw-medium); }
.tch-math td { font-variant-numeric: tabular-nums; }
.tch-math .is-tch { background: var(--tch-teal-tint); }
.tch-math thead .is-tch { color: var(--tch-teal-ink); font-weight: var(--tch-fw-bold); background: var(--tch-grad) 0 0 / 100% var(--tch-connector-h) no-repeat, var(--tch-teal-tint); }
.tch-math .tch-math__total td { font-family: var(--tch-font-display); font-weight: var(--tch-fw-bold); font-size: var(--tch-fs-h4); }
.tch-math .tch-math__total td.is-tch { color: var(--tch-teal); }
.tch-math__source { margin: 0; font-size: var(--tch-fs-small); color: var(--tch-muted); }
@media (min-width: 860px) { .tch-math { padding: var(--tch-sp-6); grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); align-items: start; } .tch-math__source { grid-column: 1 / -1; } }

/* R9 motion: hover lift, press, stagger, reading progress in the gradient */
.tch-card, .tch-use, .tch-float { transition: translate var(--tch-dur-2) var(--tch-ease), box-shadow var(--tch-dur-2) var(--tch-ease), opacity var(--tch-dur-3) var(--tch-ease); }
.tch-card:hover, .tch-use:hover { translate: 0 var(--tch-lift); }
.js .tch-card[data-reveal]:not(.is-in), .js .tch-use[data-reveal]:not(.is-in) { translate: 0 var(--tch-reveal-shift); }
.tch-btn:active { scale: var(--tch-press); }
.tch-stagger > [data-reveal]:nth-child(2) { transition-delay: var(--tch-stagger); }
.tch-stagger > [data-reveal]:nth-child(3) { transition-delay: calc(var(--tch-stagger) * 2); }
.tch-stagger > [data-reveal]:nth-child(4) { transition-delay: calc(var(--tch-stagger) * 3); }
.tch-stagger > [data-reveal]:nth-child(5) { transition-delay: calc(var(--tch-stagger) * 4); }
.tch-stagger > [data-reveal]:nth-child(6) { transition-delay: calc(var(--tch-stagger) * 5); }
.tch-progress { position: fixed; left: 0; top: 0; z-index: calc(var(--tch-sticky-z) + 1); width: 100%; height: var(--tch-progress-h); pointer-events: none; }
.tch-progress span { display: block; height: 100%; width: 100%; background: var(--tch-grad); transform-origin: left center; scale: var(--p, 0) 1; }
@media (prefers-reduced-motion: reduce) { .tch-card:hover, .tch-use:hover { translate: 0 0; } .tch-btn:active { scale: 1; } }

/* R10 gradient link: teal text on a teal-to-sky underline. The underline draws from the left on reveal and
   thickens on hover. The --go variant adds a chevron that steps right on hover. Ported from the Radius for-hosts learn link.
   Every .tch-textlink in Variant 1 is this link. On a photo or a teal band the text is white and the underline sky to white. */
.tch-textlink { display: inline; padding-block: 0.75em; font-weight: var(--tch-fw-semibold); color: var(--tch-teal); text-decoration: none; --tch-ul: var(--tch-grad); --tch-ul-h: 2px; background-image: var(--tch-ul); background-repeat: no-repeat; background-size: 100% var(--tch-ul-h); background-position: 0 calc(100% - 0.7em); -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: background-size var(--tch-draw-dur) var(--tch-ease), color var(--tch-dur-1) var(--tch-ease); }
.js .tch-textlink[data-reveal], .js [data-reveal]:not(.is-in) .tch-textlink { background-size: 0% var(--tch-ul-h); }
.js .tch-textlink[data-reveal].is-in, .js [data-reveal].is-in .tch-textlink { background-size: 100% var(--tch-ul-h); }
.tch-textlink:hover { color: var(--tch-teal-ink); --tch-ul-h: 3px; }
.tch-textlink--light { color: var(--tch-on-photo); --tch-ul: var(--tch-grad-light); }
.tch-textlink--light:hover { color: var(--tch-on-photo); }
.tch-textlink--go::after { content: ""; display: inline-block; width: 0.8em; height: 0.8em; margin-left: 0.35em; vertical-align: -0.08em; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M7 3l7 7-7 7' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M7 3l7 7-7 7' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; transition: translate var(--tch-dur-1) var(--tch-ease); }
.tch-textlink--go:hover::after { translate: 0.2em 0; }

/* Themes gallery page: the catalogue of every device in Variant 1 and the Radius ports */
.tch-catnav { display: flex; flex-wrap: wrap; gap: var(--tch-sp-2); margin: 0 0 var(--tch-sp-6); padding: 0; list-style: none; }
.tch-catnav a { display: inline-flex; align-items: center; min-height: var(--tch-tap); padding: 0 var(--tch-sp-4); border-radius: var(--tch-r-pill); border: var(--tch-bw-1) solid var(--tch-line); background: var(--tch-card); color: var(--tch-teal-ink); font-size: var(--tch-fs-small); font-weight: var(--tch-fw-semibold); text-decoration: none; }
.tch-catnav a:hover { background: var(--tch-teal-tint); }
.tch-catgroup { display: grid; gap: var(--tch-sp-7); }
.tch-catgroup > .tch-head { margin: 0; }
.tch-cat { display: grid; gap: var(--tch-sp-4); padding-top: var(--tch-sp-6); border-top: var(--tch-bw-1) solid var(--tch-line); }
.tch-cat__head { display: grid; gap: var(--tch-sp-2); }
.tch-cat__head h3 { margin: 0; font-size: var(--tch-fs-h3); }
.tch-cat__head p { margin: 0; color: var(--tch-muted); max-width: var(--tch-w-copy-lg); }
.tch-cat__where { font-size: var(--tch-fs-small); color: var(--tch-teal-ink); }
.tch-cat__where code, .tch-cat__head code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.92em; color: var(--tch-teal-ink); background: var(--tch-alt); padding: 0 0.3em; border-radius: 0.25em; }
.tch-cat__demo { position: relative; padding: var(--tch-sp-6) var(--tch-sp-4); border-radius: var(--tch-r-xl); border: var(--tch-bw-1) solid var(--tch-line); background: var(--tch-canvas); overflow: hidden; }
.tch-cat__demo--alt { background: var(--tch-alt); }
.tch-cat__demo--flush { padding: 0; }
.tch-cat__demo--bare { padding: 0; border: 0; background: transparent; overflow: visible; }
.tch-cat__demo--teal { background: var(--tch-teal); color: var(--tch-teal-on); }
.tch-cat__demo--app { background: var(--tch-alt); }
.tch-cat__demo--app .tch-app__col { padding-inline: 0; }
.tch-cat__demo .tch-section { padding-block: var(--tch-sp-6); }
.tch-cat__demo .tch-sticky { position: static; display: block; max-width: 24rem; }
.tch-cat__demo .tch-progress { position: relative; height: var(--tch-progress-h); }
.tch-cat__demo .tch-progress span { --p: 0.62; }
.tch-cat__demo .tch-float { display: grid; }
.tch-cat__demo .tch-wave { display: block; }
.tch-cat__demo .tch-nav { position: static; }
.tch-cat__demo .tch-app { min-height: 0; }
.tch-cat__demo .tch-view[hidden] { display: none; }
.tch-cat__tools { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--tch-sp-2); margin: 0 0 var(--tch-sp-4); }
.tch-cat__demo--teal .tch-lead, .tch-cat__demo--teal p { color: var(--tch-teal-on); }
.tch-cat__states { display: grid; gap: var(--tch-sp-4); }
.tch-cat__states .tch-state { display: grid; }
.tch-cat--wide { grid-template-columns: minmax(0, 1fr); }
.tch-cat--wide .tch-cat__head { position: static; }
.tch-cat__demo--patterns { min-height: 20rem; display: grid; align-content: end; }
.tch-cat__demo--patterns .tch-wave { opacity: var(--tch-pattern-op); }
.tch-cat__demo--patterns.tch-band .tch-wave { opacity: calc(var(--tch-pattern-op) * 0.7); }
.tch-cat__demo--patterns .tch-wave--foot { width: 100%; left: 0; translate: 0 0; height: 70%; }
.tch-cat__demo--patterns p { position: relative; z-index: 1; margin: 0; max-width: 30rem; }
@media (min-width: 860px) { .tch-cat { grid-template-columns: minmax(0, 18rem) minmax(0, 1fr); gap: var(--tch-sp-6); align-items: start; } .tch-cat__head { position: sticky; top: calc(var(--tch-nav-h, 4.5rem) + var(--tch-sp-4)); } .tch-cat__demo { padding: var(--tch-sp-6); } .tch-cat__demo--flush { padding: 0; } .tch-cat--wide { grid-template-columns: minmax(0, 1fr); } .tch-cat--wide .tch-cat__head { position: static; max-width: 44rem; } }
/* Themes gallery page (kept from the first pass) */
.tch-themehead { display: grid; gap: var(--tch-sp-4); margin-bottom: var(--tch-sp-6); }
.tch-themefacts { display: grid; gap: var(--tch-sp-4); margin: 0; }
.tch-themefacts div { display: grid; gap: var(--tch-sp-1); }
.tch-themefacts dt { font-size: var(--tch-fs-small); font-weight: var(--tch-fw-semibold); text-transform: uppercase; letter-spacing: 0.04em; color: var(--tch-muted); }
.tch-themefacts dd { margin: 0; max-width: var(--tch-w-copy); }
.tch-themefacts code, .tch-tokens td:first-child { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.9em; color: var(--tch-teal-ink); }
@media (min-width: 860px) { .tch-themefacts { grid-template-columns: repeat(3, 1fr); gap: var(--tch-sp-6); } }
.tch-themedemo { display: grid; gap: var(--tch-sp-5); }
.tch-themebox { min-height: 16rem; padding: var(--tch-sp-6); border-radius: var(--tch-r-xl); border: var(--tch-bw-1) solid var(--tch-line); background: var(--tch-card); display: grid; align-content: end; }
.tch-themebox .tch-wave { display: block; }
.tch-themedevice { max-width: 30rem; }
.tch-themedevice__screen { height: 22rem; background: var(--tch-teal-tint); }
.tch-themedevice .tch-float { display: grid; right: var(--tch-sp-4); }
.tch-themecode { margin-top: var(--tch-sp-5); }
.tch-themecode summary { cursor: pointer; min-height: var(--tch-tap); display: flex; align-items: center; font-weight: var(--tch-fw-semibold); color: var(--tch-teal); }
.tch-themecode pre { margin: var(--tch-sp-3) 0 0; padding: var(--tch-sp-4); border-radius: var(--tch-r-md); background: var(--tch-alt); overflow-x: auto; white-space: pre-wrap; word-break: break-word; font-size: var(--tch-fs-small); line-height: 1.5; }
.tch-tokens { width: 100%; border-collapse: collapse; margin-top: var(--tch-sp-5); font-size: var(--tch-fs-body); }
.tch-tokens th, .tch-tokens td { padding: var(--tch-sp-3) var(--tch-sp-2); text-align: left; border-top: var(--tch-bw-1) solid var(--tch-line); }
.tch-tokens thead th { border-top: 0; font-size: var(--tch-fs-small); color: var(--tch-muted); }
.tch-themeno { display: grid; gap: var(--tch-sp-3); margin: 0; padding-left: 1.2em; max-width: var(--tch-w-copy-lg); }