/* tsycdn page styles — an original layout language built on the site's tokens.
   Deliberately NOT a copy of tsycdn's centred card stack:
     · asymmetric two-column sections (sticky left rail + content right)
     · hairline rules instead of boxed cards
     · numbered rails for processes
     · data-first comparison blocks with the winner highlighted
     · a single accent used sparingly, everything else neutral
   Colours, fonts, radii and spacing all come from the captured design
   tokens, so the visual style stays consistent with the rest of the site. */

/* Design tokens, taken from the approved visual reference: one saturated blue
   for every accent, near-black headings, slate body copy, and a very light
   tint for alternating bands. Every component below reads these, so changing
   the reference only means changing this block. */
.tc-page {
  --tc-rule: #e8edf5;
  --tc-rule-strong: #dce5f1;
  --tc-ink: #0c172a;
  --tc-muted: #4c5a6f;
  --tc-muted-2: #6b7c93;
  --tc-accent: #0063fd;
  --tc-accent-deep: #0656d4;
  --tc-accent-tint: #eaf3ff;
  --tc-surface: #ffffff;
  --tc-band: #fcfcfd;
  --tc-card-border: #e2eaf5;
  --tc-radius: 10px;
  --tc-radius-sm: 8px;
  --tc-gutter: 72px;
  --tc-maxw: 1440px;
  color: var(--tc-ink);
}

/* The reference runs a 1440px column with 72px gutters. That is wider than the
   previous 1200/32, which made every section look inset against the header. */
.tc-wrap {
  max-width: var(--tc-maxw);
  margin: 0 auto;
  padding: 0 var(--tc-gutter);
}

@media (max-width: 1199px) {
  .tc-wrap { padding: 0 40px; }
}

@media (max-width: 767px) {
  .tc-wrap { padding: 0 20px; }
}

/* ---------------------------------------------------------------- hero */

.tc-hero {
  position: relative;
  padding: 128px 0 88px;
  border-bottom: 1px solid var(--tc-rule);
  overflow: hidden;
}

/* Every hero gets the same quiet backdrop: a faint dot grid fading out toward
   the copy. The index page layers a stronger bloom on top via .tc-hero-bg. */
.tc-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(circle, color-mix(in srgb, var(--tc-ink) 14%, transparent) 1px, transparent 1px);
  background-size: 24px 24px;
  -webkit-mask-image: radial-gradient(ellipse 70% 76% at 82% 8%, #000 0%, transparent 70%);
  mask-image: radial-gradient(ellipse 70% 76% at 82% 8%, #000 0%, transparent 70%);
  opacity: .4;
}

.tc-hero > .tc-wrap { position: relative; z-index: 1; }

.tc-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 64px;
  align-items: end;
}

.tc-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--tc-accent);
}

/* The reference marks every section label with a short rule before the text. */
.tc-kicker::before {
  content: "";
  width: 25px;
  height: 2px;
  background: currentColor;
}

.tc-kicker::before {
  content: "";
  width: 22px;
  height: 1px;
  background: currentColor;
}

.tc-h1 {
  margin: 0;
  font-size: clamp(34px, 3.8vw, 52px);
  line-height: 1.2;
  font-weight: 850;
  letter-spacing: -0.025em;
  color: var(--tc-ink);
}

.tc-h1 em {
  font-style: normal;
  color: var(--tc-accent);
}

.tc-h2 {
  margin: 0;
  font-size: clamp(25px, 2.5vw, 34px);
  line-height: 1.38;
  font-weight: 800;
  letter-spacing: -0.014em;
  color: var(--tc-ink);
}

.tc-h3 {
  margin: 0 0 9px;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.45;
  color: var(--tc-ink);
}

.tc-lede {
  margin: 24px 0 0;
  max-width: 790px;
  font-size: clamp(16px, 1.32vw, 19px);
  line-height: 1.7;
  color: var(--tc-muted);
}

.tc-desc {
  margin: 14px 0 0;
  font-size: 15px;
  line-height: 1.8;
  color: var(--tc-muted);
}

.tc-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 34px;
}

.tc-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 46px;
  padding: 0 24px;
  font-size: 14px;
  font-weight: 600;
  border-radius: var(--tc-radius-sm);
  border: 1px solid var(--tc-rule);
  color: var(--tc-ink);
  text-decoration: none;
  transition: background .18s ease, border-color .18s ease, opacity .18s ease;
}

.tc-btn:hover {
  border-color: color-mix(in srgb, var(--tc-accent) 50%, var(--tc-rule));
  background: color-mix(in srgb, var(--tc-accent) 5%, transparent);
}

.tc-btn-p {
  background: var(--tc-accent);
  border-color: var(--tc-accent);
  color: #fff;
}

.tc-btn-p:hover {
  background: color-mix(in srgb, var(--tc-accent) 88%, #000);
  border-color: transparent;
}

/* Hero stats sit in the right column as a stacked ledger, not centred tiles. */
.tc-ledger {
  border-left: 1px solid var(--tc-rule-strong);
  padding-left: 54px;
}

.tc-ledger-row {
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 15px 0 20px;
  border-bottom: 1px solid var(--tc-rule);
}

.tc-ledger-row:last-child { border-bottom: none; }

.tc-ledger-main {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 28px;
  flex: 1;
  min-width: 0;
}

/* Progress ring: hairline track, accent arc, rotated to start at 12 o'clock. */
.tc-ring {
  flex: none;
  width: 44px;
  height: 44px;
  transform: rotate(-90deg);
}

.tc-ring-track {
  fill: none;
  stroke: var(--tc-rule);
  stroke-width: 3;
}

.tc-ring-val {
  fill: none;
  stroke: var(--tc-accent);
  stroke-width: 3;
  stroke-linecap: round;
}

.tc-ledger-v {
  font-size: clamp(28px, 2.9vw, 42px);
  font-weight: 760;
  line-height: 1.15;
  letter-spacing: -0.024em;
  color: var(--tc-accent);
  font-variant-numeric: tabular-nums;
}

.tc-ledger-l {
  font-size: 13px;
  color: var(--tc-muted);
  text-align: right;
}

/* ------------------------------------------------------------ sections */

.tc-sec {
  padding: 70px 0;
  border-bottom: 1px solid var(--tc-rule);
}

/* Alternate bands, as in the reference: white, then a barely-there tint. */
.tc-sec:nth-of-type(even) {
  background: var(--tc-band);
}

.tc-sec-grid {
  display: grid;
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  gap: 64px;
  align-items: start;
}

.tc-rail {
  position: sticky;
  top: 96px;
}

.tc-rail .tc-h2 {
  margin-top: 14px;
  font-size: clamp(22px, 2.2vw, 30px);
  line-height: 1.22;
  text-wrap: balance;
}

.tc-rail-desc {
  margin: 16px 0 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--tc-muted);
}

/* Hairline list: rows separated by rules, no boxes. */
.tc-list {
  border-top: 1px solid var(--tc-rule);
}

.tc-row {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr);
  gap: 32px;
  padding: 26px 0;
  border-bottom: 1px solid var(--tc-rule);
  transition: background .18s ease;
}

.tc-row:hover {
  background: color-mix(in srgb, var(--tc-accent) 3%, transparent);
}

.tc-row-idx {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.tc-row-idx .tc-entry-i {
  align-self: center;
  width: 18px;
  height: 18px;
  margin-top: 0;
  flex: none;
}

.tc-row-n {
  flex: none;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--tc-accent);
  font-variant-numeric: tabular-nums;
}

.tc-row-d {
  font-size: 14px;
  line-height: 1.7;
  color: var(--tc-muted);
}

/* Two-up grid for shorter items. */
.tc-pairs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 48px;
}

.tc-pair {
  padding: 24px 0;
  border-bottom: 1px solid var(--tc-rule);
}

.tc-pair-i {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin-bottom: 14px;
  border-radius: 9px;
  color: var(--tc-accent);
  background: color-mix(in srgb, var(--tc-accent) 7%, transparent);
  transition: transform .2s ease;
}

.tc-pair:hover .tc-pair-i { transform: translateY(-2px); }

.tc-pair-i svg { width: 18px; height: 18px; }

.tc-pair-t {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 600;
  color: var(--tc-ink);
}

.tc-pair-d {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--tc-muted);
}

/* --------------------------------------------------------- comparison */

.tc-cmp {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.tc-cmp th {
  padding: 14px 18px 14px 0;
  text-align: left;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tc-muted);
  border-bottom: 1px solid var(--tc-ink);
}

.tc-cmp td {
  padding: 16px 18px 16px 0;
  border-bottom: 1px solid var(--tc-rule);
  color: var(--tc-muted);
  vertical-align: top;
  line-height: 1.6;
}

.tc-cmp td:first-child {
  color: var(--tc-ink);
  font-weight: 500;
}

/* The last column is the product's own position — mark it. */
.tc-cmp td:last-child,
.tc-cmp th:last-child {
  padding-right: 0;
  color: var(--tc-ink);
  font-weight: 500;
}

.tc-cmp tr:hover td {
  background: color-mix(in srgb, var(--tc-accent) 3%, transparent);
}

.tc-cmp-wrap {
  overflow-x: auto;
}

/* --------------------------------------------------------------- faq */

.tc-faqs {
  border-top: 1px solid var(--tc-rule);
}

.tc-faq {
  border-bottom: 1px solid var(--tc-rule);
}

.tc-faq summary {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 24px;
  align-items: start;
  gap: 16px;
  padding: 22px 0;
  font-size: 15px;
  font-weight: 500;
  color: var(--tc-ink);
  cursor: pointer;
  list-style: none;
}

.tc-faq summary::-webkit-details-marker { display: none; }

.tc-faq-q {
  font-size: 12px;
  font-weight: 600;
  color: var(--tc-accent);
  font-variant-numeric: tabular-nums;
  padding-top: 2px;
}

.tc-faq-m {
  font-size: 18px;
  font-weight: 400;
  color: var(--tc-muted);
  text-align: right;
  transition: transform .2s ease, color .2s ease;
}

.tc-faq[open] .tc-faq-m {
  transform: rotate(45deg);
  color: var(--tc-accent);
}

.tc-faq-a {
  margin: 0;
  padding: 0 0 24px 44px;
  max-width: 68ch;
  font-size: 14px;
  line-height: 1.75;
  color: var(--tc-muted);
}

/* --------------------------------------------------------------- cta */

.tc-cta {
  padding: 96px 0;
}

.tc-cta-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 48px;
  align-items: center;
}

.tc-cta .tc-desc {
  max-width: 62ch;
}

/* ------------------------------------------------------------ responsive */

@media (max-width: 960px) {
  .tc-hero-grid,
  .tc-sec-grid,
  .tc-cta-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }
  .tc-rail { position: static; }
  .tc-row { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .tc-pairs { grid-template-columns: minmax(0, 1fr); gap: 0; }
}

@media (max-width: 767px) {
  .tc-hero { padding: 92px 0 64px; }
  .tc-sec { padding: 60px 0; }
  .tc-cta { padding: 64px 0; }
  .tc-wrap { padding: 0 20px; }
  .tc-faq-a { padding-left: 0; }
}

/* ==================================================================
   Layout variants
   Each page family gets a distinct structure. Shared tokens keep the
   visual language identical; only arrangement differs.
   ================================================================== */

/* ---- centred hero (hub / data / solution / profile / pricing) ---- */

.tc-hero-c {
  text-align: center;
  padding: 140px 0 96px;
}

.tc-hero-c .tc-lede,
.tc-hero-c .tc-desc {
  margin-left: auto;
  margin-right: auto;
}

.tc-hero-c .tc-actions {
  justify-content: center;
}

.tc-hero-wide .tc-lede { max-width: 900px; }

.tc-metrics {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0;
  margin-top: 56px;
  border-top: 1px solid var(--tc-rule);
  border-bottom: 1px solid var(--tc-rule);
}

.tc-metric {
  flex: 1 1 200px;
  padding: 26px 24px;
  border-right: 1px solid var(--tc-rule);
}

.tc-metric:last-child { border-right: 0; }

.tc-metric-v {
  font-size: clamp(24px, 2.6vw, 34px);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--tc-accent);
  font-variant-numeric: tabular-nums;
}

.tc-metric-l {
  margin-top: 6px;
  font-size: 13px;
  color: var(--tc-muted);
}

/* ---- spec strip (product pages) ---- */

.tc-specs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1px;
  margin-top: 40px;
  background: var(--tc-rule);
  border: 1px solid var(--tc-rule);
  border-radius: 10px;
  overflow: hidden;
}

.tc-spec {
  padding: 26px;
  background: var(--tc-surface);
  transition: background .18s ease;
}

.tc-spec:hover { background: color-mix(in srgb, var(--tc-accent) 4%, var(--tc-surface)); }

.tc-spec-i {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin-bottom: 16px;
  border-radius: 10px;
  color: var(--tc-accent);
  background: color-mix(in srgb, var(--tc-accent) 8%, transparent);
}

.tc-spec-i svg { width: 19px; height: 19px; }

.tc-spec-t {
  font-size: 15px;
  font-weight: 600;
  color: var(--tc-ink);
  margin-bottom: 8px;
}

.tc-spec-d {
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--tc-muted);
}

/* ---- hub entry grid ---- */

.tc-head-left {
  max-width: 720px;
  margin-bottom: 40px;
}

.tc-head-left .tc-h2 { margin-top: 12px; }

.tc-entries {
  display: grid;
  /* The column count is chosen per section from its item count (set inline as
     --tc-entry-cols) so rows fill evenly instead of leaving a stub row. */
  grid-template-columns: repeat(var(--tc-entry-cols, 4), minmax(0, 1fr));
  gap: 0 40px;
  border-top: 1px solid var(--tc-rule);
}

@media (max-width: 1199px) {
  .tc-entries { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  .tc-entries { grid-template-columns: minmax(0, 1fr); }
}

.tc-entry {
  position: relative;
  display: grid;
  /* Number and icon sit on the title line; the description gets the full
     column width underneath. With four entries per row the old inline layout
     left the text only ~150px wide. */
  grid-template-columns: 26px 26px minmax(0, 1fr);
  grid-template-areas:
    "n i t"
    "d d d";
  gap: 6px 10px;
  padding: 22px 8px 22px 0;
  border-bottom: 1px solid var(--tc-rule);
  text-decoration: none;
  transition: background .18s ease, padding .18s ease;
}

.tc-entry::before {
  content: "";
  position: absolute;
  left: -12px;
  top: 12px;
  bottom: 12px;
  width: 2px;
  background: var(--tc-accent);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .22s cubic-bezier(.22, 1, .36, 1);
}

.tc-entry:hover {
  background: color-mix(in srgb, var(--tc-accent) 4%, transparent);
  padding-left: 10px;
}

.tc-entry:hover::before { transform: scaleY(1); }

/* The icon is shared by several layouts, so the named area is scoped to the
   entry list — the one grid that defines it. Elsewhere it would land in an
   implicit column. */
.tc-entry .tc-entry-i { grid-area: i; }

.tc-entry-i {
  width: 22px;
  height: 22px;
  margin-top: 1px;
  color: var(--tc-accent);
  opacity: .85;
  transition: opacity .18s ease, transform .22s cubic-bezier(.22, 1, .36, 1);
}

.tc-entry:hover .tc-entry-i {
  opacity: 1;
  transform: scale(1.08);
}

.tc-entry-a {
  grid-area: a;
  align-self: center;
  font-size: 16px;
  color: var(--tc-accent);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity .18s ease, transform .22s cubic-bezier(.22, 1, .36, 1);
}

.tc-entry:hover .tc-entry-a {
  opacity: 1;
  transform: translateX(0);
}

.tc-entry-n {
  grid-area: n;
  font-size: 12px;
  font-weight: 600;
  color: var(--tc-accent);
  font-variant-numeric: tabular-nums;
  padding-top: 5px;
}

.tc-entry-t {
  grid-area: t;
  font-size: 15px;
  font-weight: 600;
  color: var(--tc-ink);
}

.tc-entry-d {
  grid-area: d;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--tc-muted);
}

/* ---- data bars ---- */

.tc-bars {
  margin-top: 36px;
  border-top: 1px solid var(--tc-rule);
}

.tc-bar {
  display: grid;
  grid-template-columns: 200px 1fr 74px;
  align-items: center;
  gap: 20px;
  padding: 14px 0;
  border-bottom: 1px solid var(--tc-rule);
}

.tc-bar-l {
  font-size: 13.5px;
  color: var(--tc-ink);
}

.tc-bar-track {
  height: 8px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--tc-ink) 7%, transparent);
  overflow: hidden;
}

.tc-bar-fill {
  height: 100%;
  border-radius: 4px;
  background: var(--tc-accent);
  transition: width .6s ease;
}

.tc-bar:first-child .tc-bar-fill {
  background: var(--tc-accent);
}

.tc-bar:not(:first-child) .tc-bar-fill {
  background: color-mix(in srgb, var(--tc-accent) 42%, transparent);
}

.tc-bar-v {
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--tc-muted);
  text-align: right;
}

/* ---- solution tiles ---- */

.tc-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}

.tc-tile {
  padding: 30px 26px;
  border: 1px solid var(--tc-rule);
  border-radius: 12px;
  background: var(--tc-surface);
  transition: border-color .2s ease, transform .2s ease;
}

.tc-tile:hover {
  border-color: color-mix(in srgb, var(--tc-accent) 40%, var(--tc-rule));
  transform: translateY(-2px);
}

.tc-tile-n {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  color: var(--tc-accent);
  margin-bottom: 16px;
}

.tc-tile-t {
  margin: 0 0 8px;
  font-size: 17px;
  font-weight: 600;
  color: var(--tc-ink);
}

.tc-tile-d {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--tc-muted);
}

/* ---- doc layout ---- */

.tc-doc {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 72px;
  align-items: start;
}

.tc-toc {
  position: sticky;
  top: 100px;
  border-left: 1px solid var(--tc-rule);
  padding-left: 20px;
}

.tc-toc-h {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tc-muted);
  margin-bottom: 16px;
}

.tc-toc-i {
  display: flex;
  gap: 10px;
  padding: 7px 0;
  font-size: 13.5px;
  color: var(--tc-muted);
  text-decoration: none;
  transition: color .15s ease;
}

.tc-toc-i:hover { color: var(--tc-accent); }

.tc-toc-i span {
  font-variant-numeric: tabular-nums;
  opacity: .55;
  font-size: 12px;
  padding-top: 2px;
}

.tc-chapter { padding-bottom: 56px; }

.tc-chapter .tc-h2 {
  font-size: clamp(20px, 2vw, 27px);
  margin: 10px 0 24px;
}

.tc-chapter-steps {
  border-top: 1px solid var(--tc-rule);
}

.tc-ch-step {
  display: grid;
  grid-template-columns: 22px 30px minmax(0, 1fr);
  gap: 14px;
  padding: 20px 0;
  border-bottom: 1px solid var(--tc-rule);
  align-items: start;
}

.tc-ch-step .tc-entry-i {
  width: 20px;
  height: 20px;
  margin-top: 2px;
}

.tc-ch-n {
  font-size: 12px;
  font-weight: 600;
  color: var(--tc-accent);
  font-variant-numeric: tabular-nums;
  padding-top: 3px;
}

/* ---- profile values ---- */

.tc-values {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 0 56px;
  border-top: 1px solid var(--tc-rule);
}

.tc-value {
  padding: 28px 0;
  border-bottom: 1px solid var(--tc-rule);
}

.tc-value-i {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin-bottom: 14px;
  border-radius: 9px;
  color: var(--tc-accent);
  background: color-mix(in srgb, var(--tc-accent) 7%, transparent);
}

.tc-value-i svg { width: 18px; height: 18px; }

.tc-value-t {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 600;
  color: var(--tc-ink);
}

.tc-value-d {
  margin: 0;
  font-size: 14px;
  line-height: 1.75;
  color: var(--tc-muted);
}

/* ---- pricing plans ---- */

.tc-plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin-top: 44px;
  align-items: start;
}

.tc-plan {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 26px;
  border: 1px solid var(--tc-card-border);
  border-radius: var(--tc-radius);
  background: var(--tc-surface);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.tc-plan:hover {
  border-color: color-mix(in srgb, var(--tc-accent) 40%, transparent);
  box-shadow: 0 12px 34px -20px color-mix(in srgb, var(--tc-accent) 40%, transparent);
  transform: translateY(-2px);
}

.tc-plan-ic {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  color: var(--tc-accent);
  background: color-mix(in srgb, var(--tc-accent) 8%, transparent);
}

.tc-plan-ic svg { width: 20px; height: 20px; }

.tc-plan-badge {
  position: absolute;
  top: -11px;
  right: 20px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  color: #fff;
  background: var(--tc-accent);
}

.tc-plan-ck {
  display: inline-block;
  width: 16px;
  margin-right: 8px;
  color: var(--tc-accent);
  font-weight: 700;
}

.tc-plan-hi {
  border-color: var(--tc-accent);
  box-shadow: 0 10px 40px -18px color-mix(in srgb, var(--tc-accent) 45%, transparent);
}

.tc-plan-n {
  font-size: 19px;
  font-weight: 600;
  color: var(--tc-ink);
}

.tc-plan-f {
  margin: 0;
  padding: 0;
  list-style: none;
  flex: 1;
}

.tc-plan-f li {
  padding: 9px 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--tc-muted);
  border-bottom: 1px solid var(--tc-rule);
}

.tc-plan-f li:last-child { border-bottom: 0; }

/* ---- contact channels ---- */

.tc-channels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin-top: 36px;
}

.tc-channel {
  padding: 26px;
  border: 1px solid var(--tc-card-border);
  border-radius: var(--tc-radius);
  background: var(--tc-surface);
}

.tc-channel-t {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 600;
  color: var(--tc-ink);
}

.tc-channel-d {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--tc-muted);
}

@media (max-width: 960px) {
  .tc-doc { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .tc-toc { position: static; border-left: 0; padding-left: 0; border-top: 1px solid var(--tc-rule); padding-top: 20px; }
  .tc-bar { grid-template-columns: 1fr 60px; gap: 10px; }
  .tc-bar-track { grid-column: 1 / -1; order: 3; }
  .tc-hero-c { padding: 100px 0 64px; }
  .tc-metric { border-right: 0; border-bottom: 1px solid var(--tc-rule); flex-basis: 100%; }
  .tc-metric:last-child { border-bottom: 0; }
}

/* ==================================================================
   Hero variants — one per layout family so no two page types open
   with the same composition.
   ================================================================== */

.tc-h1-xl {
  font-size: clamp(36px, 5.4vw, 70px);
  line-height: 1.06;
  letter-spacing: -0.03em;
  max-width: 20ch;
  text-wrap: balance;
}

.tc-index-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 56px;
  align-items: start;
  margin-top: 44px;
  padding-top: 36px;
  border-top: 1px solid var(--tc-rule);
}

.tc-index-row .tc-lede {
  margin: 0;
  font-size: clamp(17px, 1.6vw, 21px);
}

.tc-index-row .tc-actions {
  margin-top: 24px;
}

/* ---- profile: editorial statement + meta list ---- */

.tc-editorial {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.7fr);
  gap: 80px;
  align-items: start;
}

.tc-editorial-main .tc-h1 {
  max-width: 18ch;
}

.tc-editorial-side {
  padding-top: 8px;
  border-top: 1px solid var(--tc-ink);
}

.tc-meta {
  margin: 0;
}

.tc-meta-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 0;
  border-bottom: 1px solid var(--tc-rule);
}

.tc-meta-row .tc-entry-i {
  width: 18px;
  height: 18px;
  margin-top: 0;
  flex: none;
}

.tc-meta-row dt { flex: 1; }

.tc-meta-row dt {
  font-size: 13px;
  color: var(--tc-muted);
  margin: 0;
}

.tc-meta-row dd {
  margin: 0;
  font-size: 19px;
  font-weight: 500;
  color: var(--tc-accent);
  font-variant-numeric: tabular-nums;
}

/* ---- solution: band layout ---- */

.tc-hero-band {
  padding: 132px 0 0;
  background: color-mix(in srgb, var(--tc-accent) 4%, transparent);
  border-bottom: 1px solid var(--tc-rule);
}

.tc-h1-band {
  font-size: clamp(36px, 5vw, 66px);
  max-width: 20ch;
}

.tc-band-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  margin-top: 28px;
}

.tc-band-row .tc-lede {
  margin: 0;
  max-width: 56ch;
}

.tc-band-row .tc-actions {
  margin: 0;
}

.tc-hero-band .tc-desc {
  max-width: 70ch;
  margin-top: 22px;
}

.tc-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin-top: 48px;
  border-top: 1px solid var(--tc-rule);
}

.tc-strip-item {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 20px 40px 20px 0;
  margin-right: 40px;
  border-right: 1px solid var(--tc-rule);
}

.tc-strip-item:last-child { border-right: 0; margin-right: 0; }

.tc-strip-v {
  font-size: 22px;
  font-weight: 500;
  color: var(--tc-accent);
  font-variant-numeric: tabular-nums;
}

.tc-strip-l {
  font-size: 13px;
  color: var(--tc-muted);
}

/* ---- pricing: compact header, plans dominate ---- */

.tc-hero-compact {
  padding: 120px 0 64px;
  border-bottom: 0;
}

.tc-compact-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  gap: 64px;
  align-items: end;
  margin-top: 8px;
}

.tc-compact-aside .tc-lede {
  margin: 0;
  font-size: 16px;
}

.tc-compact-aside .tc-actions {
  margin-top: 20px;
}

.tc-hero-compact .tc-desc {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--tc-rule);
  max-width: none;
}

/* ---- contact: title + direct card ---- */

.tc-contact-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 64px;
  align-items: center;
}

.tc-contact-card {
  padding: 34px 32px;
  border: 1px solid var(--tc-rule);
  border-radius: 14px;
  background: color-mix(in srgb, var(--tc-accent) 4%, var(--tc-surface));
}

.tc-contact-l {
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tc-accent);
  margin-bottom: 12px;
}

.tc-contact-v {
  font-size: 22px;
  font-weight: 500;
  color: var(--tc-ink);
  margin-bottom: 24px;
}

.tc-contact-card .tc-actions {
  margin-top: 0;
}

@media (max-width: 960px) {
  .tc-index-row,
  .tc-editorial,
  .tc-compact-row,
  .tc-contact-hero {
    grid-template-columns: minmax(0, 1fr);
    gap: 36px;
  }
  .tc-hero-band { padding: 100px 0 0; }
  .tc-strip-item { padding-right: 24px; margin-right: 24px; }
}

/* ==================================================================
   Globe section

   The sphere itself is the published RegionEarth island, which paints into
   its own canvas and handles drag-to-rotate. Everything here is the frame
   around it: a dark stage so the wireframe reads, a fade at the edges, and
   the stat row underneath.
   ================================================================== */

.tc-globe {
  position: relative;
  padding: 96px 0 0;
  overflow: hidden;
  background: var(--tc-surface);
  color: var(--tc-ink);
  border-bottom: 1px solid var(--tc-rule);
}

.tc-globe-head {
  position: relative;
  z-index: 2;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
  text-align: center;
}

.tc-globe-head .tc-h2 { margin: 14px 0 0; }

.tc-globe-head .tc-sec-d {
  color: var(--tc-muted);
  max-width: 620px;
  margin: 16px auto 0;
}

/* The island fills this box; RegionEarth sizes its canvas from the parent.
   Height matches the published section (420px, 500px from md up) — the globe
   paints every frame, so a taller canvas is directly more pixels to shade. */
.tc-globe-stage {
  position: relative;
  height: 420px;
  margin-top: -16px;
}

.tc-globe-stage astro-island,
.tc-globe-stage .tc-globe-fallback {
  display: block;
  width: 100%;
  height: 100%;
}

/* The sphere is drawn for a light page: its meridians use --color-border-100,
   a near-white grey. On a dark stage those lines invert into a hard bright
   cage that dominates the point-cloud continents. Keeping the surface light
   and fading the grid back lets the dots lead, as in the original. */
.tc-globe-stage canvas { opacity: .95; }

.tc-globe-stats {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px 72px;
  background: none;
}

.tc-globe-stat {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 24px 8px 0;
  border-top: 1px solid var(--tc-rule);
}

.tc-globe-stat b {
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1;
  color: var(--tc-accent);
}

.tc-globe-stat span {
  font-size: 13px;
  color: var(--tc-muted);
}

@media (min-width: 768px) {
  .tc-globe-stage { height: 500px; }
}

@media (max-width: 900px) {
  .tc-globe-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  .tc-globe { padding-top: 64px; }
  .tc-globe-stage { height: 380px; }
  .tc-globe-stat b { font-size: 24px; }
  .tc-globe-stats { padding-bottom: 56px; }
}

/* ==================================================================
   Flow diagram

   Replaces the plain comparison table for pipeline copy: each row becomes a
   node on a vertical spine, with the stage icon, the action taken and the
   outcome. The spine is drawn with a pseudo-element so it needs no extra
   markup.
   ================================================================== */

/* Four stages side by side, as the reference draws the request pipeline. */
.tc-flow {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}

@media (max-width: 1023px) {
  .tc-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  .tc-flow { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .tc-flow-node { padding: 22px 20px; }
}

.tc-flow-node {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 24px;
  border: 1px solid var(--tc-card-border);
  border-radius: var(--tc-radius);
  background: var(--tc-surface);
}

/* Icon and step number on one line at the top of the card. */
.tc-flow-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}


.tc-flow-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  flex: none;
  border-radius: 50%;
  border: 1px solid var(--tc-rule);
  background: var(--tc-surface);
  color: var(--tc-accent);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.tc-flow-icon svg,
.tc-flow-icon .tc-ico {
  width: 22px;
  height: 22px;
  flex: none;
  display: block;
}

.tc-flow-node:hover .tc-flow-icon {
  border-color: color-mix(in srgb, var(--tc-accent) 45%, transparent);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--tc-accent) 8%, transparent);
  transform: translateY(-1px);
}

.tc-flow-n {
  font-size: 15px;
  font-weight: 800;
  line-height: 1.2;
  color: var(--tc-accent);
  font-variant-numeric: tabular-nums;
}

.tc-flow-t {
  font-size: 19px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--tc-ink);
}

.tc-flow-a {
  margin-top: 6px;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--tc-muted);
}

.tc-flow-r {
  margin-top: auto;
  padding-top: 14px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--tc-accent);
}

@media (max-width: 767px) {
  .tc-flow-icon { width: 38px; height: 38px; }
  .tc-flow-icon svg, .tc-flow-icon .tc-ico { width: 19px; height: 19px; }
}

/* ==================================================================
   Scroll reveal

   Sections and list rows fade up once as they enter the viewport. The bridge
   adds .is-in when the element intersects; without JS (or with reduced motion)
   everything is visible from the start, so this is purely additive.
   ================================================================== */

.tc-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s cubic-bezier(.22, 1, .36, 1),
              transform .6s cubic-bezier(.22, 1, .36, 1);
}

.tc-reveal.is-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .tc-reveal { opacity: 1; transform: none; transition: none; }
}


/* ==================================================================
   Pricing matrix

   Each line group shows a price ladder, then the full parameter table for the
   same tiers. The table scrolls horizontally on narrow screens instead of
   squeezing six columns into a phone.
   ================================================================== */

.tc-pgroup + .tc-pgroup {
  margin-top: 72px;
  padding-top: 56px;
  border-top: 1px solid var(--tc-rule);
}

.tc-pgroup-head { margin-bottom: 28px; }

.tc-pgroup-head .tc-h3 { margin: 0 0 12px; font-size: 20px; }

.tc-pg-tags { display: flex; flex-wrap: wrap; gap: 8px; }

.tc-pg-tag {
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  color: var(--tc-accent);
  background: color-mix(in srgb, var(--tc-accent) 8%, transparent);
}

.tc-pg-note {
  margin: 14px 0 0;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--tc-muted);
  max-width: 78ch;
}

.tc-sec-plans .tc-plans {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
}

.tc-sec-plans .tc-plan {
  padding: 22px 16px;
  gap: 14px;
  align-items: stretch;
}

.tc-plan-price {
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--tc-accent);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.tc-plan-cur { font-size: 15px; margin-right: 2px; }

.tc-plan-per {
  font-size: 12px;
  font-weight: 400;
  color: var(--tc-muted);
  margin-left: 3px;
}

.tc-sec-plans .tc-btn {
  height: 38px;
  padding: 0 10px;
  font-size: 13px;
}

/* Parameter table */
.tc-matrix-wrap {
  margin-top: 32px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.tc-matrix {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  font-size: 13.5px;
}

.tc-matrix th,
.tc-matrix td {
  padding: 13px 12px;
  text-align: center;
  border-bottom: 1px solid var(--tc-rule);
  white-space: nowrap;
}

.tc-matrix thead th {
  font-weight: 600;
  font-size: 13px;
  color: var(--tc-ink);
  border-bottom: 1px solid color-mix(in srgb, var(--tc-ink) 22%, transparent);
}

.tc-matrix tbody th {
  text-align: left;
  font-weight: 500;
  color: var(--tc-muted);
}

.tc-matrix tbody tr:hover { background: color-mix(in srgb, var(--tc-accent) 3%, transparent); }

.tc-yes { color: var(--tc-accent); font-weight: 600; }
.tc-no { color: var(--tc-muted); opacity: .5; }

@media (max-width: 1199px) {
  .tc-sec-plans .tc-plans { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  .tc-sec-plans .tc-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tc-plan-price { font-size: 22px; }
}

/* ==================================================================
   Tutorial screenshots

   Each step can carry a capture of the console panel it describes. The images
   are wide UI shots, so they run the width of the step column inside a
   hairline frame, with the caption underneath.
   ================================================================== */

.tc-ch-body { min-width: 0; }

.tc-fig {
  margin: 18px 0 4px;
  border: 1px solid var(--tc-rule);
  border-radius: 10px;
  overflow: hidden;
  background: var(--tc-surface);
  transition: border-color .2s ease, box-shadow .2s ease;
}

.tc-fig:hover {
  border-color: color-mix(in srgb, var(--tc-accent) 35%, transparent);
  box-shadow: 0 14px 38px -24px color-mix(in srgb, var(--tc-ink) 55%, transparent);
}

.tc-fig img {
  display: block;
  width: 100%;
  height: auto;
}

.tc-fig figcaption {
  padding: 10px 14px;
  font-size: 12px;
  color: var(--tc-muted);
  border-top: 1px solid var(--tc-rule);
  background: color-mix(in srgb, var(--tc-ink) 2%, var(--tc-surface));
}

@media (max-width: 767px) {
  .tc-fig { border-radius: 8px; }
  .tc-fig figcaption { padding: 8px 10px; font-size: 11.5px; }
}

/* --------------------------------------------------------------- portal */

.tc-entry-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.tc-entry-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 26px;
  border: 1px solid var(--tc-card-border);
  border-radius: var(--tc-radius);
  background: var(--tc-surface);
  text-decoration: none;
  color: inherit;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.tc-entry-card:hover {
  border-color: color-mix(in srgb, var(--tc-accent) 45%, transparent);
  box-shadow: 0 18px 44px -30px color-mix(in srgb, var(--tc-ink) 60%, transparent);
  transform: translateY(-2px);
}

.tc-entry-card-hi {
  border-color: color-mix(in srgb, var(--tc-accent) 55%, transparent);
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--tc-accent) 5%, var(--tc-surface)),
      var(--tc-surface) 62%);
}

.tc-entry-badge {
  align-self: flex-start;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--tc-muted);
  background: color-mix(in srgb, var(--tc-ink) 6%, transparent);
}

.tc-entry-badge-hi {
  color: #fff;
  background: var(--tc-accent);
}

.tc-entry-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin: 16px 0 14px;
  border-radius: var(--tc-radius);
  color: var(--tc-accent);
  background: var(--tc-accent-tint);
}

.tc-entry-ico svg { width: 20px; height: 20px; }

.tc-entry-card-t {
  margin: 0 0 8px;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -.01em;
}

.tc-entry-card-d {
  margin: 0 0 20px;
  font-size: 14px;
  line-height: 1.68;
  color: var(--tc-muted);
}

.tc-entry-card-go {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: auto;
  font-size: 14px;
  font-weight: 600;
  color: var(--tc-accent);
}

.tc-entry-card-go span { transition: transform .18s ease; }
.tc-entry-card:hover .tc-entry-card-go span { transform: translateX(3px); }

.tc-entry-card-feat {
  display: block;
  margin-top: 10px;
  padding-top: 14px;
  border-top: 1px solid var(--tc-rule);
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--tc-muted);
}

.tc-caps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0 40px;
  border-top: 1px solid var(--tc-rule);
}

.tc-cap {
  padding: 24px 0;
  border-bottom: 1px solid var(--tc-rule);
}

.tc-cap-i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin-bottom: 14px;
  border-radius: 9px;
  color: var(--tc-accent);
  background: color-mix(in srgb, var(--tc-accent) 9%, transparent);
}

.tc-cap-i svg { width: 18px; height: 18px; }

.tc-cap-t {
  margin: 0 0 6px;
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.4;
}

.tc-cap-d {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.66;
  color: var(--tc-muted);
}

@media (max-width: 1199px) {
  .tc-caps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  .tc-entry-cards { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .tc-entry-card { padding: 22px 20px 18px; }
  .tc-caps { grid-template-columns: minmax(0, 1fr); }
}

.tc-hero-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 28px;
}

.tc-hero-chip {
  padding: 7px 15px;
  border: 1px solid var(--tc-rule);
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--tc-muted);
  background: var(--tc-surface);
}

/* ------------------------------------------------- home hero (reference) */

/* Cap the artwork scale independently of the viewport. Its proportions follow
   the reference, while the page keeps the site's content width and type scale. */
.tc-layout-hub .tc-hero-index,
.tc-layout-hub .tc-statbar {
  --tc-home-u: clamp(.56px, .05050505vw, .625px);
  font-family: "Microsoft YaHei", "PingFang SC", "Noto Sans SC", sans-serif;
}

.tc-layout-hub .tc-hero-index {
  margin-top: 72px;
  padding: calc(60 * var(--tc-home-u)) 0 calc(46 * var(--tc-home-u));
  overflow: hidden;
  border-bottom: 1px solid #edf3fc;
  /* The SVG has equal horizontal bleed; retain its original 1980-unit scale. */
  background: #fff url(/assets/home-hero-sweep.svg) center / calc(min(100%, var(--tc-maxw)) * 1.58585859) 100% no-repeat;
}

.tc-layout-hub .tc-hero-index::before { content: none; }

.tc-layout-hub .tc-hero-index > .tc-wrap,
.tc-layout-hub .tc-statbar > .tc-wrap {
  max-width: var(--tc-maxw);
  padding: 0 var(--tc-gutter);
}

.tc-layout-hub .tc-hero-split { position: relative; }

.tc-layout-hub .tc-hero-copy {
  position: relative;
  width: 53%;
  min-width: 0;
}

.tc-layout-hub .tc-hero-index .tc-kicker {
  gap: calc(14 * var(--tc-home-u));
  margin: 0 0 calc(20 * var(--tc-home-u));
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: 0;
  color: #0063fd;
}

.tc-layout-hub .tc-hero-index .tc-kicker::before {
  width: calc(32 * var(--tc-home-u));
  height: calc(2 * var(--tc-home-u));
}

.tc-layout-hub .tc-hero-index .tc-h1-xl {
  max-width: none;
  margin: 0;
  font-size: calc(84 * var(--tc-home-u));
  font-weight: 800;
  line-height: calc(108 * var(--tc-home-u));
  letter-spacing: calc(-2 * var(--tc-home-u));
  color: #0c172a;
  text-wrap: initial;
}

.tc-home-title-line { display: block; white-space: nowrap; }
.tc-h1-accent { color: var(--tc-accent); }

.tc-layout-hub .tc-hero-index .tc-h1-accent {
  font-size: calc(96 * var(--tc-home-u));
  line-height: calc(110 * var(--tc-home-u));
  letter-spacing: calc(-1.4 * var(--tc-home-u));
}

.tc-layout-hub .tc-hero-index .tc-lede {
  max-width: none;
  margin: calc(24 * var(--tc-home-u)) 0 0;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.7;
  color: #4c5a6f;
}

.tc-layout-hub .tc-hero-index .tc-actions {
  gap: calc(28 * var(--tc-home-u));
  margin-top: calc(34 * var(--tc-home-u));
}

.tc-layout-hub .tc-hero-index .tc-btn {
  justify-content: center;
  height: 46px;
  min-height: 44px;
  min-width: calc(212 * var(--tc-home-u));
  padding: 0 calc(32 * var(--tc-home-u));
  border: 1px solid #cdd8e8;
  border-radius: calc(10 * var(--tc-home-u));
  background: rgba(255, 255, 255, .9);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}

.tc-layout-hub .tc-hero-index .tc-btn-p {
  min-width: calc(290 * var(--tc-home-u));
  gap: calc(10 * var(--tc-home-u));
  border-color: #0676ff;
  background: linear-gradient(180deg, #0075ff, #0065f4);
  color: #fff;
  font-weight: 500;
}

.tc-home-button-arrow {
  width: calc(24 * var(--tc-home-u));
  height: calc(24 * var(--tc-home-u));
  flex: none;
}

.tc-layout-hub .tc-checks {
  display: flex;
  flex-wrap: wrap;
  gap: calc(12 * var(--tc-home-u)) calc(38 * var(--tc-home-u));
  margin-top: calc(32 * var(--tc-home-u));
}

.tc-layout-hub .tc-check {
  display: inline-flex;
  align-items: center;
  gap: calc(18 * var(--tc-home-u));
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
  color: #152034;
  white-space: nowrap;
}

.tc-layout-hub .tc-check-i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(24 * var(--tc-home-u));
  height: calc(24 * var(--tc-home-u));
  flex: none;
  border: 1px solid #82b6ff;
  border-radius: 50%;
  background: linear-gradient(145deg, #69afff, #2d7bff);
  color: #fff;
}

.tc-layout-hub .tc-check-i svg { width: 72%; height: 72%; }

.tc-layout-hub .tc-hero-art {
  position: absolute;
  top: calc(-60 * var(--tc-home-u));
  bottom: calc(-46 * var(--tc-home-u));
  left: 53%;
  right: 0;
  pointer-events: none;
}

.tc-layout-hub .tc-art-shield {
  position: absolute;
  top: 48.6%;
  left: 56.2%;
  width: calc(256 * var(--tc-home-u));
  height: calc(280 * var(--tc-home-u));
  max-width: none;
  transform: translate(-50%, -50%);
}

.tc-layout-hub .tc-float {
  position: absolute;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(14 * var(--tc-home-u));
  height: calc(72 * var(--tc-home-u));
  border: 1px solid #e1edff;
  border-radius: calc(36 * var(--tc-home-u));
  background: rgba(255, 255, 255, .86);
  box-shadow: 0 calc(12 * var(--tc-home-u)) calc(30 * var(--tc-home-u)) rgba(40, 105, 200, .025);
  font-size: 13px;
  font-weight: 600;
  color: #0c172a;
  white-space: nowrap;
}

.tc-layout-hub .tc-float .tc-home-icon {
  width: calc(38 * var(--tc-home-u));
  height: calc(38 * var(--tc-home-u));
  flex: none;
  color: #0067ff;
}

.tc-layout-hub .tc-float-a {
  top: calc(118 * var(--tc-home-u)); left: calc(50 * var(--tc-home-u));
  width: calc(212 * var(--tc-home-u));
}
.tc-layout-hub .tc-float-b {
  top: calc(290 * var(--tc-home-u)); left: calc(32 * var(--tc-home-u));
  width: calc(204 * var(--tc-home-u));
}
.tc-layout-hub .tc-float-c {
  top: calc(172 * var(--tc-home-u)); right: calc(-10 * var(--tc-home-u));
  width: calc(178 * var(--tc-home-u));
}
.tc-layout-hub .tc-float-d {
  top: calc(322 * var(--tc-home-u)); right: calc(-32 * var(--tc-home-u));
  width: calc(192 * var(--tc-home-u));
}

/* ------------------------------------------- four-column feature strip */

.tc-layout-hub .tc-statbar {
  margin: 0;
  padding: calc(50 * var(--tc-home-u)) 0 calc(40 * var(--tc-home-u));
  border: 0;
  background: #fff;
}

.tc-layout-hub .tc-statbar-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.tc-layout-hub .tc-statbar-c {
  display: flex;
  align-items: center;
  gap: calc(30 * var(--tc-home-u));
  min-width: 0;
  padding: 0 0 0 calc(52 * var(--tc-home-u));
}

.tc-layout-hub .tc-statbar-c:first-child { padding-left: 0; }
.tc-layout-hub .tc-statbar-c:last-child { padding-right: 0; }
.tc-layout-hub .tc-statbar-c + .tc-statbar-c { border-left: 1px solid #e0e7f1; }

.tc-layout-hub .tc-statbar-i { display: flex; flex: none; color: #0067ff; }
.tc-layout-hub .tc-statbar-i svg {
  display: block;
  width: calc(60 * var(--tc-home-u));
  height: calc(60 * var(--tc-home-u));
  filter: drop-shadow(0 4px 4px rgba(0, 99, 253, .06));
}

.tc-layout-hub .tc-statbar-b { min-width: 0; }
.tc-layout-hub .tc-statbar-t {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  color: #0c172a;
}
.tc-layout-hub .tc-statbar-d {
  margin-top: calc(10 * var(--tc-home-u));
  font-size: 13px;
  font-weight: 400;
  line-height: 1.6;
  color: #64748b;
}

@media (max-width: 1099px) {
  .tc-layout-hub .tc-hero-index,
  .tc-layout-hub .tc-statbar { --tc-home-u: .625px; }
  .tc-layout-hub .tc-hero-index { padding: 36px 0 30px; }
  .tc-layout-hub .tc-hero-index > .tc-wrap,
  .tc-layout-hub .tc-statbar > .tc-wrap { padding: 0 40px; }
  .tc-layout-hub .tc-hero-copy { width: 57%; }
  .tc-layout-hub .tc-hero-index .tc-h1-xl { font-size: 38px; line-height: 1.24; letter-spacing: -.8px; }
  .tc-layout-hub .tc-hero-index .tc-h1-accent { font-size: 50px; line-height: 1.15; }
  .tc-layout-hub .tc-hero-index .tc-lede { font-size: 15px; line-height: 1.8; }
  .tc-layout-hub .tc-hero-index .tc-lede br { display: none; }
  .tc-layout-hub .tc-hero-art { left: 57%; top: -36px; bottom: -30px; }
  .tc-layout-hub .tc-float-a { left: 0; }
  .tc-layout-hub .tc-float-b { left: 0; }
  .tc-layout-hub .tc-float-c { right: 0; }
  .tc-layout-hub .tc-float-d { right: 0; }
  .tc-layout-hub .tc-statbar-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 0; }
  .tc-layout-hub .tc-statbar-c { padding: 0 24px; }
  .tc-layout-hub .tc-statbar-c:nth-child(3) { padding-left: 0; border-left: 0; }
  .tc-layout-hub .tc-statbar-t { font-size: 16px; line-height: 1.5; }
  .tc-layout-hub .tc-statbar-d { font-size: 13px; line-height: 1.6; }
}

@media (max-width: 767px) {
  .tc-layout-hub .tc-hero-index { margin-top: 54px; padding: 30px 0 24px; background-size: auto 100%; background-position: 56.30573248% center; }
  .tc-layout-hub .tc-hero-index > .tc-wrap,
  .tc-layout-hub .tc-statbar > .tc-wrap { padding: 0 20px; }
  .tc-layout-hub .tc-hero-copy { width: 100%; }
  .tc-layout-hub .tc-hero-index .tc-h1-xl { font-size: clamp(27px, 7.5vw, 43px); line-height: 1.3; }
  .tc-layout-hub .tc-hero-index .tc-h1-accent { font-size: clamp(42px, 11vw, 54px); line-height: 1.2; }
  .tc-layout-hub .tc-hero-index .tc-kicker { margin-bottom: 16px; font-size: 12px; line-height: 1.6; }
  .tc-layout-hub .tc-hero-index .tc-kicker::before { width: 20px; }
  .tc-layout-hub .tc-hero-index .tc-lede { margin-top: 18px; }
  .tc-layout-hub .tc-hero-index .tc-actions { margin-top: 22px; gap: 12px; }
  .tc-layout-hub .tc-hero-index .tc-btn { min-width: 0; padding: 0 16px; font-size: 13px; }
  .tc-layout-hub .tc-checks { margin-top: 16px; gap: 12px 18px; }
  .tc-layout-hub .tc-check { font-size: 12px; line-height: 1.6; gap: 7px; }
  .tc-layout-hub .tc-check-i { width: 16px; height: 16px; }
  .tc-layout-hub .tc-hero-art { position: relative; inset: auto; height: 300px; margin-top: 16px; }
  .tc-layout-hub .tc-art-shield { top: 50%; left: 50%; width: 148px; height: 162px; }
  .tc-layout-hub .tc-float { font-size: 12px; height: 40px; gap: 8px; }
  .tc-layout-hub .tc-float .tc-home-icon { width: 23px; height: 23px; }
  .tc-layout-hub .tc-float-a { top: 20px; left: 0; width: 132px; }
  .tc-layout-hub .tc-float-b { top: 155px; left: 0; width: 125px; }
  .tc-layout-hub .tc-float-c { top: 63px; right: 0; width: 116px; }
  .tc-layout-hub .tc-float-d { top: 208px; right: 0; width: 126px; }
  .tc-layout-hub .tc-statbar { padding: 24px 0; }
  .tc-layout-hub .tc-statbar-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .tc-layout-hub .tc-statbar-c { padding: 16px 0; }
  .tc-layout-hub .tc-statbar-c + .tc-statbar-c { border-left: 0; border-top: 1px solid #edf3fb; }
  .tc-layout-hub .tc-statbar-i svg { width: 38px; height: 38px; }
}

/* ------------------------------------------------------- numbered cards */

.tc-ncards {
  display: grid;
  grid-template-columns: repeat(var(--tc-ncard-cols, 3), minmax(0, 1fr));
  gap: 20px;
}

/* Two columns: copy on the left, the tinted glyph in its own fixed column.
   The glyph used to be absolutely positioned in the bottom-right corner, where
   the description ran straight over it — 44px horizontally, 37px vertically on
   a three-line card. Giving it a real column means the text can never reach
   it, whatever the copy length. */
.tc-ncard {
  position: relative;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 56px;
  grid-template-areas:
    "n t i"
    "n b i";
  column-gap: 12px;
  padding: 26px;
  border: 1px solid var(--tc-card-border);
  border-radius: var(--tc-radius);
  background: var(--tc-surface);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.tc-ncard:hover {
  border-color: color-mix(in srgb, var(--tc-accent) 42%, transparent);
  box-shadow: 0 16px 40px -28px color-mix(in srgb, var(--tc-ink) 55%, transparent);
  transform: translateY(-2px);
}

.tc-ncard-n {
  grid-area: n;
  font-size: 19px;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--tc-accent);
}

.tc-ncard-b {
  grid-area: b;
  min-width: 0;
}

.tc-ncard-t {
  grid-area: t;
  margin: 0 0 8px;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--tc-ink);
}

.tc-ncard-d {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.72;
  color: var(--tc-muted);
}

/* The glyph sits in its own column, bottom-aligned, and is never overlapped. */
.tc-ncard-i {
  grid-area: i;
  align-self: end;
  justify-self: end;
  display: flex;
  align-items: flex-end;
  color: color-mix(in srgb, var(--tc-accent) 16%, transparent);
  pointer-events: none;
}

.tc-ncard-i svg { width: 56px; height: 56px; }

@media (max-width: 1023px) {
  .tc-ncards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  .tc-ncards { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .tc-ncard { padding: 22px 20px; }
}


/* Figure variant of the four-column strip: large blue number, grey caption. */
.tc-statbar-fig .tc-statbar-i { margin-top: 4px; }

.tc-statbar-v {
  font-size: clamp(22px, 2.2vw, 30px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--tc-accent);
  font-variant-numeric: tabular-nums;
}

.tc-statbar-fig .tc-statbar-d { margin-top: 4px; }

/* Request flow: one continuous track; endpoints share the track's axis. */
.tc-request-flow { padding: 56px 0 40px; border-bottom: 1px solid var(--tc-rule); background: #fff; }
.tc-request-heading { margin-bottom: 30px; }
.tc-request-heading .tc-kicker { margin-bottom: 12px; }
.tc-request-heading .tc-desc { margin-top: 10px; }

.tc-request-diagram {
  --tc-request-axis: 123px;
  display: grid;
  grid-template-columns: minmax(96px, auto) 110px minmax(0, 1fr) 110px minmax(96px, auto);
  align-items: stretch;
}

.tc-request-endpoint { display: flex; flex-direction: column; align-items: center; gap: 2px; padding-top: calc(var(--tc-request-axis) - 31px); text-align: center; min-width: 0; }
.tc-request-icon { display: flex; align-items: center; justify-content: center; width: 62px; height: 62px; margin-bottom: 6px; background: #f3f8ff; border: 1px solid #cee1ff; border-radius: 16px; color: var(--tc-accent); }
.tc-request-icon svg { width: 30px; height: 30px; }
.tc-request-endpoint strong { font-size: 14px; line-height: 1.5; color: var(--tc-ink); }
.tc-request-endpoint > span:last-child { font-size: 11px; line-height: 1.6; color: var(--tc-muted-2); }
.tc-request-origin .tc-request-icon { color: #0f9d63; border-color: #bfe8d6; background: #effaf5; }

.tc-request-wire { position: relative; min-width: 0; }
.tc-request-wire::before { content: ""; position: absolute; left: 0; right: 0; top: var(--tc-request-axis); height: 2px; margin-top: -1px; background: #b7d3fb; }
.tc-request-wire::after { content: ""; position: absolute; right: -2px; top: var(--tc-request-axis); width: 8px; height: 8px; margin-top: -5px; border-top: 2px solid #8fb7f5; border-right: 2px solid #8fb7f5; transform: rotate(45deg); }
.tc-request-wire > span { position: absolute; left: 50%; top: var(--tc-request-axis); transform: translate(-50%, -50%); padding: 3px 10px; border: 1px solid #d5e5fd; border-radius: 999px; background: #fff; font-size: 11px; font-weight: 600; line-height: 1.5; color: var(--tc-accent); white-space: nowrap; }
.tc-request-wire > i { position: absolute; left: 0; top: var(--tc-request-axis); width: 6px; height: 6px; margin: -3px 0 0; border-radius: 50%; background: var(--tc-accent); box-shadow: 0 0 0 3px rgba(0, 99, 253, .08); animation: tc-request-run-in 6s linear infinite; }
.tc-request-wire-out::before { background: #b2e4cd; }
.tc-request-wire-out::after { border-color: #63c49a; }
.tc-request-wire-out > span { color: #0f9d63; border-color: #c4ead9; }
.tc-request-wire-out > i { background: #12b76a; box-shadow: 0 0 0 3px rgba(18, 183, 106, .1); animation-name: tc-request-run-out; }

.tc-request-node { min-width: 0; border: 1px solid var(--tc-rule-strong); border-radius: 14px; background: #fff; box-shadow: 0 14px 34px -22px rgba(12, 23, 42, .18); }
.tc-request-node-head { display: flex; align-items: center; gap: 12px; height: 72px; padding: 0 20px; border-bottom: 1px solid var(--tc-rule); background: linear-gradient(90deg, #edf4ff, #f7fbff 55%, #fff); }
.tc-request-node-icon { display: flex; flex: none; align-items: center; justify-content: center; width: 42px; height: 42px; border: 1px solid #d8e7fc; border-radius: 11px; background: #fff; color: var(--tc-accent); }
.tc-request-node-icon svg { width: 24px; height: 24px; }
.tc-request-node-head h3 { margin: 0; font-size: 16px; font-weight: 700; line-height: 1.4; color: var(--tc-ink); }
.tc-request-node-head p { margin: 2px 0 0; font-size: 11px; line-height: 1.5; color: var(--tc-muted-2); }
.tc-request-policy { flex: none; margin-left: auto; padding: 4px 10px; border: 1px solid #cfe0fb; border-radius: 999px; background: #fff; font-size: 11px; font-weight: 600; line-height: 1.5; color: var(--tc-accent); white-space: nowrap; }

.tc-request-node-body { position: relative; padding: 24px; }
.tc-request-track { position: absolute; left: 24px; right: 24px; top: 51px; height: 2px; margin-top: -1px; background: #cfe0fb; }
.tc-request-track::after { content: ""; position: absolute; right: -2px; top: 50%; width: 7px; height: 7px; margin-top: -4.5px; border-top: 2px solid #a9c6f5; border-right: 2px solid #a9c6f5; transform: rotate(45deg); }
.tc-request-stages { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) 118px; gap: 0 26px; list-style: none; margin: 0; padding: 0; }
.tc-request-stages > li { min-width: 0; }
.tc-request-tile { position: relative; display: flex; align-items: center; justify-content: center; width: 54px; height: 54px; margin: 0 auto; border: 1px solid #d8e7fc; border-radius: 14px; background: #f6faff; color: var(--tc-accent); }
.tc-request-tile svg { width: 26px; height: 26px; }
.tc-request-tile b { position: absolute; top: -8px; right: -12px; min-width: 20px; height: 20px; padding: 0 5px; border: 1px solid color-mix(in srgb, currentColor 28%, #fff); border-radius: 999px; background: #fff; color: inherit; font-size: 10px; font-weight: 700; line-height: 18px; text-align: center; }
.tc-request-step { display: block; margin-top: 14px; font-size: 10px; font-weight: 700; letter-spacing: .05em; color: #8fb0dc; text-align: center; }
.tc-request-stages h4 { margin: 4px 0 5px; font-size: 14px; font-weight: 700; line-height: 1.4; color: var(--tc-ink); text-align: center; }
.tc-request-stages p { margin: 0; font-size: 12px; line-height: 1.7; color: var(--tc-muted); text-align: center; }

.tc-request-branch { display: flex; flex-direction: column; align-items: center; padding-top: 28px; }
.tc-request-branch > i { position: relative; flex: 1; width: 2px; min-height: 12px; background: linear-gradient(#cfe0fb, #f0c6cc); }
.tc-request-branch > i::after { content: ""; position: absolute; left: 50%; top: 0; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: #cb4858; box-shadow: 0 0 0 3px rgba(203, 72, 88, .12); opacity: 0; animation: tc-request-drop 6s linear infinite; }
.tc-request-block { display: inline-flex; align-items: center; gap: 7px; margin-top: 10px; padding: 8px 12px; border: 1px solid #f2ccd2; border-radius: 999px; background: #fff8f8; color: #cb4858; font-size: 12px; font-weight: 600; line-height: 1; white-space: nowrap; }
.tc-request-block b { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 15px; height: 15px; border: 1px solid #efc0c8; border-radius: 50%; font-size: 10px; font-weight: 700; }

.tc-request-caption { margin: 18px 0 0; text-align: center; font-size: 11px; line-height: 1.8; color: var(--tc-muted-2); }

/* Stage identity: one colour per processing block, kept even without motion. */
.tc-request-stages > .tc-request-s1 .tc-request-tile { color: #0063fd; border-color: #c9dcfc; background: #f4f9ff; }
.tc-request-stages > .tc-request-s2 .tc-request-tile { color: #ee7f18; border-color: #f5d9b8; background: #fff8ef; }
.tc-request-stages > .tc-request-s3 .tc-request-tile { color: #7b5bf5; border-color: #ddd4fb; background: #f7f5ff; }

/* The moving dot rides one shared 6s timeline: it takes on the colour of the
   block it is passing, and each block lights up as the dot reaches it. */
.tc-request-mover { position: absolute; left: 0; top: 51px; width: 10px; height: 10px; margin: -5px 0 0; border-radius: 50%; background: #0063fd; box-shadow: 0 0 0 3px rgba(0, 99, 253, .12); opacity: 0; animation: tc-request-mover 6s linear infinite; }
@keyframes tc-request-mover {
  0%, 13% { left: 0; opacity: 0; background: #0063fd; box-shadow: 0 0 0 3px rgba(0, 99, 253, .12); }
  14% { opacity: 1; }
  21% { background: #ee7f18; box-shadow: 0 0 0 3px rgba(238, 127, 24, .13); }
  36% { background: #7b5bf5; box-shadow: 0 0 0 3px rgba(123, 91, 245, .13); }
  64% { left: calc(100% - 10px); opacity: 1; }
  66%, 100% { left: calc(100% - 10px); opacity: 0; }
}
@keyframes tc-glow-1 { 0%, 19% { box-shadow: 0 0 0 0 rgba(0, 99, 253, 0); background: #f4f9ff; } 22%, 28% { box-shadow: 0 0 0 5px rgba(0, 99, 253, .14); background: #e9f2ff; } 34%, 100% { box-shadow: 0 0 0 0 rgba(0, 99, 253, 0); background: #f4f9ff; } }
@keyframes tc-glow-2 { 0%, 33% { box-shadow: 0 0 0 0 rgba(238, 127, 24, 0); background: #fff8ef; } 36%, 42% { box-shadow: 0 0 0 5px rgba(238, 127, 24, .15); background: #ffefdd; } 48%, 100% { box-shadow: 0 0 0 0 rgba(238, 127, 24, 0); background: #fff8ef; } }
@keyframes tc-glow-3 { 0%, 48% { box-shadow: 0 0 0 0 rgba(123, 91, 245, 0); background: #f7f5ff; } 51%, 57% { box-shadow: 0 0 0 5px rgba(123, 91, 245, .14); background: #efeaff; } 63%, 100% { box-shadow: 0 0 0 0 rgba(123, 91, 245, 0); background: #f7f5ff; } }
.tc-request-s1 .tc-request-tile { animation: tc-glow-1 6s linear infinite; }
.tc-request-s2 .tc-request-tile { animation: tc-glow-2 6s linear infinite; }
.tc-request-s3 .tc-request-tile { animation: tc-glow-3 6s linear infinite; }

@keyframes tc-request-drop { 0%, 58% { top: 0; opacity: 0; } 60% { opacity: 1; } 68% { top: calc(100% - 6px); opacity: 1; } 70%, 100% { top: calc(100% - 6px); opacity: 0; } }
@keyframes tc-pulse-block { 0%, 68% { box-shadow: 0 0 0 0 rgba(203, 72, 88, 0); } 72%, 78% { box-shadow: 0 0 0 4px rgba(203, 72, 88, .12); } 82%, 100% { box-shadow: 0 0 0 0 rgba(203, 72, 88, 0); } }
.tc-request-block { animation: tc-pulse-block 6s linear infinite; }

@keyframes tc-pulse-user { 0%, 2% { box-shadow: 0 0 0 0 rgba(0, 99, 253, 0); } 5%, 9% { box-shadow: 0 0 0 5px rgba(0, 99, 253, .12); } 13%, 100% { box-shadow: 0 0 0 0 rgba(0, 99, 253, 0); } }
.tc-request-endpoint:not(.tc-request-origin) .tc-request-icon { animation: tc-pulse-user 6s linear infinite; }
@keyframes tc-pulse-origin { 0%, 78% { box-shadow: 0 0 0 0 rgba(18, 183, 106, 0); } 82%, 88% { box-shadow: 0 0 0 5px rgba(18, 183, 106, .14); } 92%, 100% { box-shadow: 0 0 0 0 rgba(18, 183, 106, 0); } }
.tc-request-origin .tc-request-icon { animation: tc-pulse-origin 6s linear infinite; }

@keyframes tc-request-run-in { 0% { left: 0; opacity: 0; } 2%, 11% { opacity: 1; } 13%, 100% { left: calc(100% - 6px); opacity: 0; } }
@keyframes tc-request-run-out { 0%, 66% { left: 0; opacity: 0; } 68%, 78% { opacity: 1; } 80%, 100% { left: calc(100% - 6px); opacity: 0; } }
@keyframes tc-request-run-in-down { 0% { top: 0; opacity: 0; } 2%, 11% { opacity: 1; } 13%, 100% { top: calc(100% - 6px); opacity: 0; } }
@keyframes tc-request-run-out-down { 0%, 66% { top: 0; opacity: 0; } 68%, 78% { opacity: 1; } 80%, 100% { top: calc(100% - 6px); opacity: 0; } }
@keyframes tc-request-mover-down {
  0%, 13% { top: 42px; opacity: 0; background: #0063fd; box-shadow: 0 0 0 3px rgba(0, 99, 253, .12); }
  14% { opacity: 1; }
  21% { background: #ee7f18; box-shadow: 0 0 0 3px rgba(238, 127, 24, .13); }
  36% { background: #7b5bf5; box-shadow: 0 0 0 3px rgba(123, 91, 245, .13); }
  64% { top: calc(100% - 120px); opacity: 1; }
  66%, 100% { top: calc(100% - 120px); opacity: 0; }
}

@media (min-width: 1000px) and (max-width: 1199px) {
  .tc-request-diagram { grid-template-columns: minmax(84px, auto) 64px minmax(0, 1fr) 64px minmax(84px, auto); }
  .tc-request-node-body { padding: 20px; }
  .tc-request-track { left: 20px; right: 20px; top: 47px; }
  .tc-request-stages { grid-template-columns: repeat(3, minmax(0, 1fr)) 96px; gap: 0 18px; }
  .tc-request-branch { padding-top: 24px; }
  .tc-request-wire > span { padding: 2px 7px; font-size: 10px; }
}

@media (max-width: 999px) {
  .tc-request-diagram { grid-template-columns: minmax(0, 1fr); }
  .tc-request-endpoint { flex-direction: row; justify-content: flex-start; gap: 12px; padding-top: 0; text-align: left; }
  .tc-request-endpoint > span:last-child { margin-left: auto; }
  .tc-request-icon { width: 46px; height: 46px; margin: 0; border-radius: 12px; }
  .tc-request-icon svg { width: 24px; height: 24px; }
  .tc-request-wire { width: 2px; height: 44px; margin: 8px 0 8px 22px; }
  .tc-request-wire::before { left: 0; right: auto; top: 0; bottom: 0; width: 2px; height: auto; margin: 0; }
  .tc-request-wire::after { right: auto; left: -3px; top: auto; bottom: -2px; margin: 0; border: 0; border-right: 2px solid #8fb7f5; border-bottom: 2px solid #8fb7f5; transform: rotate(45deg); }
  .tc-request-wire > span { left: 16px; top: 50%; }
  .tc-request-wire > i { left: 0; top: 0; margin: 0; animation-name: tc-request-run-in-down; }
  .tc-request-wire-out > i { animation-name: tc-request-run-out-down; }
  .tc-request-mover { left: 38px; top: 42px; margin: 0; animation-name: tc-request-mover-down; }
  .tc-request-node-head { height: auto; min-height: 64px; flex-wrap: wrap; padding: 12px 16px; row-gap: 6px; }
  .tc-request-policy { margin-left: 54px; }
  .tc-request-node-body { padding: 20px 16px; }
  .tc-request-track { display: none; }
  .tc-request-stages { display: block; }
  .tc-request-stages > li { position: relative; padding: 0 0 26px 66px; }
  .tc-request-stages > li:nth-child(-n+2)::after { content: ""; position: absolute; left: 26px; top: 54px; bottom: 2px; width: 2px; background: #cfe0fb; }
  .tc-request-tile { position: absolute; left: 0; top: 0; margin: 0; }
  .tc-request-step, .tc-request-stages h4, .tc-request-stages p { text-align: left; }
  .tc-request-stages > li:nth-child(3)::after { content: ""; position: absolute; left: 26px; top: 54px; bottom: 0; width: 2px; background: #f0c6cc; }
  .tc-request-branch { display: contents; }
  .tc-request-branch > i { display: none; }
  .tc-request-block { position: relative; margin: 6px 0 0; }
  .tc-request-block::before { content: ""; position: absolute; left: 25px; bottom: 100%; height: 8px; border-left: 2px solid #f0c6cc; }
  .tc-request-caption { text-align: left; }
}

@media (max-width: 599px) {
  .tc-request-flow { padding: 40px 0 30px; }
  .tc-request-node-head h3 { font-size: 15px; }
  .tc-request-stages > li { padding-left: 62px; }
  .tc-request-tile { width: 50px; height: 50px; }
  .tc-request-stages > li:nth-child(-n+2)::after { left: 24px; top: 50px; }
  .tc-request-stages > li:nth-child(3)::after { left: 24px; top: 50px; }
  .tc-request-block::before { left: 23px; }
}

@media (prefers-reduced-motion: reduce) {
  .tc-request-wire > i, .tc-request-mover, .tc-request-branch > i::after { animation: none; display: none; }
  .tc-request-endpoint .tc-request-icon, .tc-request-stages .tc-request-tile, .tc-request-block { animation: none; }
}

/* Pricing keeps the existing data in one line-selectable comparison sheet. */
.tc-price-picker { margin-top: 30px; }
.tc-price-lines { display: flex; align-items: center; gap: 32px; padding-bottom: 20px; border-bottom: 1px solid var(--tc-rule); }
.tc-price-control-label { font-size: 13px; font-weight: 600; color: var(--tc-muted-2); }
.tc-price-tabs { display: flex; flex-wrap: wrap; gap: 12px; }
.tc-price-tab { display: inline-flex; align-items: center; justify-content: center; gap: 14px; padding: 13px 20px; border: 1px solid var(--tc-rule-strong); border-radius: 8px; background: #fff; font: inherit; font-size: 15px; font-weight: 600; color: var(--tc-muted); cursor: pointer; }
.tc-price-tab-badge { display: inline-block; padding: 2px 7px; background: #fff0e6; border-radius: 4px; font-size: 11px; line-height: 1.5; color: #c54108; white-space: nowrap; }
.tc-price-tab[aria-selected="true"] { border-color: var(--tc-accent); box-shadow: inset 0 0 0 1px var(--tc-accent); background: #f4f9ff; color: var(--tc-accent); }
.tc-price-panel[hidden] { display: none; }
.tc-price-line-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 20px; padding: 26px 0 22px; }
.tc-price-line-head .tc-h3 { margin: 0; font-size: 21px; }
.tc-price-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.tc-price-tag { padding: 5px 11px; border-radius: 999px; background: var(--tc-accent-tint); color: var(--tc-accent-deep); font-size: 12px; font-weight: 600; }
.tc-price-tag:nth-child(2) { background: #eefaf5; color: #168764; }
.tc-price-tag:nth-child(3) { background: #fff2f3; color: #bd424d; }
.tc-price-note { flex-basis: 100%; margin: 0; text-align: center; font-size: 13px; line-height: 1.8; color: var(--tc-muted-2); }
.tc-price-scroll { overflow-x: auto; border: 1px solid var(--tc-rule-strong); border-radius: 10px; }
.tc-price-matrix { width: 100%; min-width: 1000px; table-layout: fixed; border-collapse: separate; border-spacing: 0; font-size: 13px; line-height: 1.6; }
.tc-price-label-col { width: 160px; }
.tc-price-matrix [data-pricing-col] { cursor: pointer; }
.tc-price-matrix th, .tc-price-matrix td { padding: 12px 10px; border-bottom: 1px solid var(--tc-rule); text-align: center; vertical-align: middle; color: var(--tc-muted); overflow-wrap: anywhere; }
.tc-price-matrix thead th { padding: 0; background: #f6f8fc; color: var(--tc-ink); font-weight: 600; }
.tc-price-matrix tr > th:first-child { position: sticky; left: 0; z-index: 1; padding: 12px; text-align: left; background: #f6f8fc; font-weight: 600; color: var(--tc-ink); }
.tc-price-select { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 13px; width: 100%; min-height: 130px; padding: 14px 8px; background: transparent; color: inherit; font: inherit; cursor: pointer; border: 0; }
.tc-price-name { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 5px; font-size: 15px; font-weight: 700; }
.tc-price-recommended { padding: 1px 5px; background: #e7f1ff; color: var(--tc-accent); border-radius: 4px; font-size: 10px; line-height: 1.6; }
.tc-price-amount { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; max-width: 100%; color: var(--tc-accent); font-size: 12px; }
.tc-price-amount > span:last-child { white-space: nowrap; }
.tc-price-amount strong { font-size: 20px; font-weight: 800; }
.tc-price-amount > span:last-child { margin-left: 3px; color: var(--tc-muted-2); }
.tc-price-matrix .tc-price-column.is-selected { background: #f3f8ff; border-left: 1px solid var(--tc-accent); border-right: 1px solid var(--tc-accent); }
.tc-price-matrix thead .tc-price-column.is-selected { background: #0968f7; color: #fff; box-shadow: inset 0 2px 0 var(--tc-accent); }
.tc-price-matrix thead .is-selected .tc-price-amount, .tc-price-matrix thead .is-selected .tc-price-amount > span { color: #fff; }
.tc-price-matrix tbody tr:last-child .is-selected { border-bottom-color: var(--tc-accent); }
.tc-price-row-note { display: block; margin-top: 3px; font-size: 11px; line-height: 1.5; font-weight: 500; color: #8a9db8; }
.tc-price-footer-note { margin: 20px 0 0; text-align: center; font-size: 12px; line-height: 1.8; color: var(--tc-muted-2); }
.tc-price-matrix td.tc-price-green { color: #13a552; font-weight: 600; }
.tc-price-matrix td.tc-yes { color: #18ad64; font-size: 18px; font-weight: 700; }
.tc-price-matrix td.tc-no { color: #ef5350; font-size: 16px; }
.tc-price-matrix tfoot td, .tc-price-matrix tfoot th { border-bottom: 0; }
.tc-price-choose { display: inline-block; color: var(--tc-accent); font-size: 12px; font-weight: 600; text-decoration: none; padding: 6px 0; }
.tc-price-choose:hover { text-decoration: underline; text-underline-offset: 3px; }
.tc-price-summary { display: flex; align-items: center; flex-wrap: wrap; gap: 24px; margin-top: 24px; padding: 24px; border: 1px solid var(--tc-rule-strong); border-radius: 10px; background: #fff; }
.tc-price-summary-info { display: flex; flex-direction: column; gap: 9px; margin-right: auto; }
.tc-price-billing { display: flex; align-items: center; flex-basis: 100%; gap: 40px; margin-bottom: 12px; }
.tc-price-billing-options { display: flex; gap: 10px; flex-wrap: wrap; }
.tc-price-billing-button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-width: 110px; padding: 10px 18px; border: 1px solid var(--tc-rule-strong); border-radius: 8px; background: #fff; color: var(--tc-muted); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.tc-price-billing-button[aria-pressed="true"] { color: var(--tc-accent); background: #f4f9ff; border-color: var(--tc-accent); box-shadow: inset 0 0 0 1px var(--tc-accent); }
.tc-price-selected-detail { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.tc-price-selected-detail > strong { font-size: 16px; color: var(--tc-ink); }
.tc-price-detail { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 12px; color: var(--tc-muted-2); }
.tc-price-detail::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #19be67; box-shadow: 0 0 0 4px #e3f8ed; margin-right: 4px; }
.tc-price-detail strong { color: var(--tc-ink); }
.tc-price-total { display: flex; align-items: baseline; gap: 12px; }
.tc-price-total-value { color: #ec580c; font-weight: 700; white-space: nowrap; }
.tc-price-total-value strong { font-size: 30px; line-height: 1.2; }
.tc-price-total-value > span { font-size: 13px; color: var(--tc-muted-2); margin-left: 3px; }
.tc-price-summary-actions { display: flex; gap: 12px; }
.tc-price-picker button:focus-visible, .tc-price-scroll:focus-visible { outline: 2px solid var(--tc-accent); outline-offset: 3px; }
.tc-price-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.tc-price-mobile-hint { display: none; }
@media (max-width: 1099px) {
  .tc-price-mobile-hint { display: block; margin: 16px 0 0; font-size: 12px; color: var(--tc-muted-2); }
  .tc-price-summary { gap: 18px; }
}
@media (max-width: 767px) {
  .tc-price-lines { align-items: flex-start; flex-direction: column; gap: 12px; }
  .tc-price-tabs { width: 100%; gap: 8px; }
  .tc-price-tab { flex: 1; min-width: 130px; padding: 12px 8px; font-size: 13px; flex-wrap: wrap; gap: 6px; }
  .tc-price-billing { align-items: flex-start; flex-direction: column; gap: 12px; }
  .tc-price-billing-options { width: 100%; gap: 8px; }
  .tc-price-billing-button { min-width: 0; flex: 1; padding: 10px 8px; gap: 5px; font-size: 13px; flex-wrap: wrap; }
  .tc-price-selected-detail { align-items: flex-start; flex-direction: column; gap: 12px; }
  .tc-price-line-head { justify-content: flex-start; padding: 20px 0; }
  .tc-price-line-head .tc-h3 { font-size: 19px; }
  .tc-price-tags { justify-content: flex-start; }
  .tc-price-note { text-align: left; }
  .tc-price-label-col { width: 140px; }
  .tc-price-summary { padding: 20px 16px; gap: 18px; }
  .tc-price-summary-info, .tc-price-summary-actions { width: 100%; }
  .tc-price-summary-info > strong { font-size: 15px; }
  .tc-price-summary-actions .tc-btn { flex: 1; min-width: 0; justify-content: center; padding: 0 12px; }
}

/* Floating WeChat service entry, bottom-right on every page. Oval pill with
   icon + label. z-index sits under the fixed header and the mobile drawer
   overlay so it can never cover navigation. */
.tc-wechat-float {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 56px;
  padding: 0 20px 0 17px;
  border-radius: 28px;
  background: #07c160;
  color: #fff;
  box-shadow: 0 10px 26px -10px rgba(7, 193, 96, .55);
  transition: transform .18s ease, background-color .18s ease, box-shadow .18s ease;
}
.tc-wechat-float:hover { background: #06ad56; transform: translateY(-2px); box-shadow: 0 14px 30px -10px rgba(7, 193, 96, .6); }
.tc-wechat-float:focus-visible { outline: 2px solid #07c160; outline-offset: 3px; }
.tc-wechat-float svg { width: 26px; height: 26px; flex: none; }
.tc-wechat-float-t { font-size: 14px; font-weight: 600; line-height: 1; letter-spacing: 1px; white-space: nowrap; }

@media (max-width: 767px) {
  .tc-wechat-float { right: 16px; bottom: 16px; height: 48px; padding: 0 15px 0 13px; border-radius: 24px; }
  .tc-wechat-float svg { width: 23px; height: 23px; }
  .tc-wechat-float-t { font-size: 13px; letter-spacing: .5px; }
}

/* Update-notice popup, bottom-left. Copy mirrors the platform changelog;
   layout is our own. The modal overlay covers the fixed header. */
.tc-notice-card {
  position: fixed;
  left: 22px;
  bottom: 22px;
  z-index: 9000;
  width: min(340px, calc(100vw - 44px));
  padding: 18px 18px 16px;
  border: 1px solid var(--tc-card-border);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 18px 44px -18px rgba(12, 23, 42, .25);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .25s ease, transform .25s ease;
}
.tc-notice-card.is-in { opacity: 1; transform: none; }
.tc-notice-topline { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.tc-notice-badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border: 1px solid #cfe0fb; border-radius: 999px; background: #f0f6ff; color: #0063fd; font-size: 11px; font-weight: 700; line-height: 1.6; }
.tc-notice-badge i { width: 6px; height: 6px; border-radius: 50%; background: #0063fd; animation: tc-notice-blink 1.6s ease-in-out infinite; }
@keyframes tc-notice-blink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.tc-notice-close { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border: 0; border-radius: 50%; background: transparent; color: #64748b; font-size: 18px; line-height: 1; cursor: pointer; }
.tc-notice-close:hover { background: #eef2f8; color: #0c172a; }
.tc-notice-title { margin: 0 0 6px; font-size: 16px; font-weight: 700; line-height: 1.5; color: var(--tc-ink); }
.tc-notice-desc { margin: 0 0 10px; font-size: 13px; line-height: 1.7; color: var(--tc-muted-2); }
.tc-notice-list { list-style: none; margin: 0 0 14px; padding: 0; }
.tc-notice-list li { position: relative; margin-top: 6px; padding-left: 14px; font-size: 12.5px; line-height: 1.7; color: var(--tc-muted); }
.tc-notice-list li::before { content: ""; position: absolute; left: 0; top: .62em; width: 5px; height: 5px; border-radius: 50%; background: #80aff4; }
.tc-notice-actions { display: flex; align-items: center; gap: 10px; }
.tc-notice-btn-p { height: 34px; padding: 0 14px; border: 0; border-radius: 8px; background: linear-gradient(180deg, #0075ff, #0065f4); color: #fff; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.tc-notice-btn-p:hover { background: linear-gradient(180deg, #0067e8, #0553cf); }
.tc-notice-btn-s { height: 34px; padding: 0 12px; border: 1px solid #cdd8e8; border-radius: 8px; background: #fff; color: var(--tc-muted); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; }
.tc-notice-btn-s:hover { border-color: #9fb4d2; color: var(--tc-ink); }
.tc-notice-card :is(button, a):focus-visible { outline: 2px solid #0063fd; outline-offset: 2px; }

.tc-notice-modal { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; padding: 24px; }
.tc-notice-modal[hidden], .tc-notice-card[hidden] { display: none; }
.tc-notice-backdrop { position: absolute; inset: 0; background: rgba(12, 23, 42, .45); opacity: 0; transition: opacity .2s ease; }
.tc-notice-dialog { position: relative; display: flex; flex-direction: column; width: min(620px, 100%); max-height: min(78vh, 720px); border-radius: 14px; background: #fff; box-shadow: 0 30px 80px -20px rgba(12, 23, 42, .4); opacity: 0; transform: translateY(14px) scale(.98); transition: opacity .2s ease, transform .2s ease; }
.tc-notice-modal.is-in .tc-notice-backdrop { opacity: 1; }
.tc-notice-modal.is-in .tc-notice-dialog { opacity: 1; transform: none; }
.tc-notice-dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 20px 22px 14px; border-bottom: 1px solid var(--tc-rule); }
.tc-notice-dialog-head h3 { margin: 8px 0 2px; font-size: 18px; font-weight: 700; line-height: 1.4; color: var(--tc-ink); }
.tc-notice-dialog-head p { margin: 0; font-size: 12.5px; line-height: 1.6; color: var(--tc-muted-2); }
.tc-notice-dialog-body { overflow-y: auto; padding: 16px 22px 18px; }
.tc-notice-lead { margin: 0 0 10px; font-size: 13.5px; line-height: 1.8; color: var(--tc-muted); }
.tc-notice-dialog-body h4 { display: flex; align-items: center; gap: 8px; margin: 14px 0 4px; font-size: 13px; font-weight: 700; color: var(--tc-ink); }
.tc-notice-dialog-body h4::before { content: ""; width: 14px; height: 2px; border-radius: 2px; background: #0063fd; }
.tc-notice-details { list-style: none; margin: 0; padding: 0; }
.tc-notice-details li { position: relative; margin-top: 8px; padding-left: 16px; font-size: 13px; line-height: 1.8; color: var(--tc-muted); }
.tc-notice-details li::before { content: ""; position: absolute; left: 2px; top: .68em; width: 5px; height: 5px; border-radius: 50%; background: #80aff4; }
.tc-notice-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.tc-notice-links a { display: inline-block; padding: 4px 12px; border: 1px solid #cfe0fb; border-radius: 999px; background: #f0f6ff; color: #0063fd; font-size: 12px; font-weight: 600; line-height: 1.6; text-decoration: none; transition: background-color .2s ease, color .2s ease, border-color .2s ease; }
.tc-notice-links a:hover { background: #0063fd; border-color: #0063fd; color: #fff; }
.tc-notice-dialog-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 22px; border-top: 1px solid var(--tc-rule); }
.tc-notice-dialog-foot span { font-size: 12.5px; line-height: 1.6; color: var(--tc-muted-2); }
.tc-notice-lock { overflow: hidden; }

@media (max-width: 767px) {
  .tc-notice-card { left: 16px; bottom: 16px; width: calc(100vw - 32px); max-width: 360px; padding: 16px; }
  .tc-notice-modal { padding: 16px; }
  .tc-notice-dialog { max-height: 84vh; }
}

@media (prefers-reduced-motion: reduce) {
  .tc-notice-card, .tc-notice-backdrop, .tc-notice-dialog { transition: none; transform: none; }
  .tc-notice-badge i { animation: none; }
}