/* TextScaleHQ — home.css (landing sections — front page, /pricing/ and /compare/)
   Generated from preview v3.26.0. Do not hand-edit in isolation:
   the preview file remains the design source of truth. */

/* ============================================================================
   HERO
   ========================================================================= */
.tsh-hero {
  position: relative;
  padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1.25rem, 4vw, 2rem) clamp(2rem, 6vw, 4rem);
  overflow: hidden;
  isolation: isolate;
}
.tsh-hero::before {
  content: '';
  position: absolute;
  top: -10%; left: 50%;
  transform: translateX(-50%);
  width: 1100px; height: 700px;
  background: none;
  filter: blur(40px);
  z-index: -2;
  pointer-events: none;
}
/* v3.12.4: grid pattern removed — hero now uses only the soft radial glow above. */
.tsh-hero-inner {
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
/* v3.14: hero is now stacked at desktop (single column) */
@media (min-width: 1024px) {
  .tsh-hero-inner {
    grid-template-columns: 1fr;
    align-items: center;
  }
}

.tsh-hero-copy { text-align: center; }
/* v3.14: hero copy stays centered at desktop */
@media (min-width: 1024px) {
  /* v3.18.7: 760px -> 1040px. The old cap was only constraining .tsh-ticks —
     .tsh-headline caps itself at 16ch, .tsh-subhead at 56ch, .tsh-ctas is a
     centred 2-button flex row. Three ticks + two 28px gaps did not fit 760px,
     so the third wrapped alone. Still well inside .tsh-hero-inner's 1240px. */
  .tsh-hero-copy { text-align: center; max-width: 1040px; margin: 0 auto; padding-top: 12px; }
}

/* Eyebrow pill */
.tsh-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 8px;
  background: rgba(11, 92, 255, 0.06);
  border: 1px solid rgba(11, 92, 255, 0.15);
  border-radius: 9999px;
  font-size: 12px; font-weight: 600;
  color: var(--brand-2);
  margin-bottom: 24px;
  animation: tshFadeUp 600ms ease-out both;
}
.tsh-eyebrow-tag {
  background: var(--brand-2);
  color: white;
  padding: 3px 8px;
  border-radius: 9999px;
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase;
}

/* Headline */
.tsh-headline {
  font-size: clamp(2.35rem, 6vw, 4.5rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.02;
  color: var(--ink);
  margin-bottom: 24px;
  animation: tshFadeUp 700ms 100ms ease-out both;
  max-width: 16ch;
  margin-left: auto; margin-right: auto;
}
@media (min-width: 1024px) { .tsh-headline { margin-left: auto; margin-right: auto; } }

/* Subhead */
.tsh-subhead {
  font-size: clamp(1.02rem, 1.4vw, 1.18rem);
  color: var(--ink-3);
  max-width: 56ch;
  margin: 0 auto 32px;
  line-height: 1.55;
  animation: tshFadeUp 700ms 200ms ease-out both;
}
@media (min-width: 1024px) { .tsh-subhead { margin-left: auto; margin-right: auto; } }
.tsh-subhead strong { color: var(--ink-2); font-weight: 600; }

/* CTAs */
.tsh-ctas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-bottom: 18px;
  animation: tshFadeUp 700ms 300ms ease-out both;
}
@media (min-width: 1024px) { .tsh-ctas { justify-content: center; } }

.tsh-btn-primary {
  background: var(--brand-2);
  color: white;
  font-size: 16px; font-weight: 600;
  padding: 14px 26px;
  border-radius: var(--btn-radius);
  box-shadow: 0 8px 24px -4px rgba(11, 92, 255, 0.45);
  transition: transform 150ms, box-shadow 200ms;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.tsh-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 28px -4px rgba(11, 92, 255, 0.55); }
.tsh-btn-primary:active { transform: translateY(0); }

.tsh-btn-secondary {
  background: white;
  color: var(--ink);
  font-size: 16px; font-weight: 600;
  padding: 14px 26px;
  border-radius: var(--btn-radius);
  border: 1px solid var(--line-2);
  transition: border-color 150ms, background 150ms;
}
.tsh-btn-secondary:hover { border-color: var(--ink-3); background: var(--bg-2); }

/* Trust line */
.tsh-trust {
  font-size: 13px;
  color: var(--ink-4);
  font-weight: 500;
  margin-top: 14px;
  animation: tshFadeUp 700ms 400ms ease-out both;
}
.tsh-trust .tsh-dot {
  display: inline-block;
  width: 3px; height: 3px;
  background: var(--ink-4);
  border-radius: 50%;
  margin: 0 10px;
  vertical-align: middle;
}

@keyframes tshFadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================================
   DASHBOARD MOCKUP
   ========================================================================= */
.tsh-mockup-wrap {
  margin-top: clamp(2rem, 5vw, 3.5rem);
  position: relative;
  padding: 0 clamp(0.25rem, 1vw, 0.75rem);
  animation: tshFadeUp 800ms 500ms ease-out both;
}
@media (min-width: 1024px) {
  .tsh-mockup-wrap { margin-top: 32px; padding: 0; }
}

.tsh-mockup {
  background: white;
  border: 1px solid var(--line);
  border-radius: clamp(12px, 1.4vw, 18px);
  box-shadow:
    0 50px 100px -20px rgba(15, 23, 42, 0.12),
    0 30px 60px -30px rgba(15, 23, 42, 0.18),
    0 0 0 1px rgba(15, 23, 42, 0.03);
  overflow: hidden;
  display: grid;
  grid-template-columns: 200px 1fr;
  min-height: 460px;
  position: relative;
}
@media (max-width: 700px) {
  .tsh-mockup { grid-template-columns: 1fr; min-height: auto; }
}

/* Browser-chrome top bar */
.tsh-mockup::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 28px;
  background: #f4f6f8;
  border-bottom: 1px solid var(--line);
  z-index: 10;
}
.tsh-mockup::after {
  content: '';
  position: absolute;
  top: 9px; left: 14px;
  width: 44px; height: 10px;
  background-image:
    radial-gradient(circle 5px at 5px 5px, #ff5f57 0 5px, transparent 5px),
    radial-gradient(circle 5px at 19px 5px, #febc2e 0 5px, transparent 5px),
    radial-gradient(circle 5px at 33px 5px, #28c840 0 5px, transparent 5px);
  z-index: 11;
}

/* Sidebar */
.tsh-mock-sidebar {
  background: white;
  border-right: 1px solid var(--line);
  padding: 40px 14px 14px;
}
@media (max-width: 700px) {
  .tsh-mock-sidebar {
    border-right: 0;
    border-bottom: 1px solid var(--line);
    padding: 36px 12px 8px;
    display: flex;
    overflow-x: auto;
    gap: 4px;
  }
}

.tsh-mock-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px 14px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
@media (max-width: 700px) { .tsh-mock-brand { display: none; } }
.tsh-mock-brand-mark { flex-shrink: 0; }
.tsh-mock-brand-name {
  font-size: 12px; font-weight: 800;
  color: var(--ink); letter-spacing: -0.01em;
}

.tsh-mock-nav { display: flex; flex-direction: column; gap: 2px; }
@media (max-width: 700px) { .tsh-mock-nav { flex-direction: row; gap: 4px; } }

.tsh-mock-nav-item {
  display: flex; align-items: center;
  gap: 9px;
  padding: 7px 10px;
  border-radius: 7px;
  font-size: 12px; font-weight: 500;
  color: var(--ink-3);
  white-space: nowrap;
}
.tsh-mock-nav-item-icon { width: 13px; height: 13px; opacity: 0.7; }
.tsh-mock-nav-item.is-active {
  background: rgba(11, 92, 255, 0.08);
  color: var(--brand-2);
  font-weight: 600;
}
.tsh-mock-nav-item.is-active .tsh-mock-nav-item-icon { opacity: 1; }

/* Main panel */
.tsh-mock-main {
  padding: 40px 22px 24px;
  background: var(--bg-2);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
@media (max-width: 700px) { .tsh-mock-main { padding: 16px; } }

.tsh-mock-topline {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 4px;
}
.tsh-mock-topline-title { font-size: 15px; font-weight: 700; color: var(--ink); }
.tsh-mock-topline-sub { font-size: 11px; color: var(--ink-4); margin-top: 2px; }

.tsh-mock-pill-live {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(16, 185, 129, 0.1);
  color: var(--green);
  font-size: 11px; font-weight: 600;
  padding: 4px 10px;
  border-radius: 9999px;
}
.tsh-mock-pill-live::before {
  content: '';
  width: 6px; height: 6px;
  background: var(--green);
  border-radius: 50%;
  animation: tshPulse 1.4s infinite ease-in-out;
}
@keyframes tshPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.7); }
}

/* Stat card */
.tsh-mock-stat-card {
  background: white;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px 18px;
  position: relative;
  overflow: hidden;
}
.tsh-mock-stat-card::before {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 50%;
  background: none;
  pointer-events: none;
}
.tsh-mock-stat-label {
  font-size: 11px; color: var(--ink-3);
  font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.04em;
  margin-bottom: 6px;
}
.tsh-mock-stat-value {
  font-size: 28px; font-weight: 800;
  letter-spacing: -0.02em; color: var(--ink);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.tsh-mock-stat-meta { font-size: 11px; color: var(--ink-3); margin-top: 6px; }
.tsh-mock-stat-meta strong { color: var(--green); font-weight: 600; }

.tsh-mock-progress {
  margin-top: 10px;
  height: 6px;
  background: var(--bg-3);
  border-radius: 9999px;
  overflow: hidden;
}
.tsh-mock-progress-bar {
  height: 100%;
  background: var(--brand-grad);
  border-radius: 9999px;
  width: 0;
  animation: tshProgressFill 4s ease-out forwards, tshProgressShimmer 2s 4s infinite ease-in-out;
}
@keyframes tshProgressFill { to { width: 73%; } }
@keyframes tshProgressShimmer {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

.tsh-mock-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tsh-mock-mini-card {
  background: white;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px;
}
.tsh-mock-mini-label {
  font-size: 10px; color: var(--ink-3);
  font-weight: 500; text-transform: uppercase;
  letter-spacing: 0.04em; margin-bottom: 4px;
}
.tsh-mock-mini-value {
  font-size: 18px; font-weight: 700;
  color: var(--ink); letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

.tsh-mock-businesses {
  background: white;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 4px 0;
}
.tsh-mock-business-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 14px;
  font-size: 12px;
  border-bottom: 1px solid var(--bg-3);
}
.tsh-mock-business-row:last-child { border-bottom: 0; }
.tsh-mock-biz-avatar {
  width: 22px; height: 22px;
  border-radius: 6px;
  background: var(--brand-grad);
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: white;
  font-size: 10px; font-weight: 700;
}
.tsh-mock-biz-avatar.alt-1 { background: #ea580c; }
.tsh-mock-biz-avatar.alt-2 { background: #059669; }
.tsh-mock-biz-name { flex: 1; color: var(--ink); font-weight: 600; }
.tsh-mock-biz-meta { color: var(--ink-4); font-size: 11px; font-variant-numeric: tabular-nums; }

/* ============================================================================
   CALCULATOR
   ========================================================================= */
.tsh-calc {
  position: relative;
  background: var(--bg-2);
  padding: clamp(2.5rem, 6vw, 4rem) clamp(1rem, 4vw, 2rem) clamp(3rem, 8vw, 5rem);
  overflow: hidden;
}
.tsh-calc::before {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(15,23,42,0.05) 1px, transparent 0);
  background-size: 28px 28px;
  -webkit-mask-image: linear-gradient(to bottom, black 0%, transparent 55%);
          mask-image: linear-gradient(to bottom, black 0%, transparent 55%);
  pointer-events: none;
}
.tsh-calc-inner { position: relative; z-index: 1; max-width: 720px; margin: 0 auto; }

/* Desktop 2-col layout — inputs on left, receipt on right.
   On mobile they stack naturally (block layout). */
@media (min-width: 960px) {
  .tsh-calc-inner { max-width: 1100px; }
  .tsh-calc-row {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 18px;
    align-items: start;
    margin-bottom: 14px;
  }
  .tsh-calc-row > * { margin-bottom: 0; }
}

/* v3.24.0: "vs the competition" sits under Your volume; the receipt and the
   MMS note (.tsh-calc-side) span both rows on the right. Row 1 is sized by
   Your volume alone, because an item that spans a 1fr track is left out of
   the auto track's sizing, so no gap opens between the two left cards.
   Below 960px the row is plain block flow in source order: Your volume, the
   bill, the MMS note, then the competition, exactly as before.
   Rows step 14px, the same rhythm as the cards stacked inside the right
   column; .tsh-card's own 14px margin is zeroed here because it is
   declared after .tsh-calc-row > * and would otherwise win. */
@media (min-width: 960px) {
  .tsh-calc-row { grid-template-rows: auto 1fr; row-gap: 14px; }
  .tsh-calc-row > .tsh-card.is-accented { grid-column: 1; grid-row: 1; margin-bottom: 0; }
  .tsh-calc-row > .tsh-calc-side { grid-column: 2; grid-row: 1 / span 2; }
  .tsh-calc-row > .tsh-card-compare { grid-column: 1; grid-row: 2; margin-bottom: 0; }
  .tsh-calc-side > :last-child { margin-bottom: 0; }
}

.tsh-calc-intro { margin-bottom: clamp(1.75rem, 4vw, 2.5rem); text-align: center; }
.tsh-kicker {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px; /* 2.6.1: even now the section number is gone */
  background: var(--ink); border-radius: 9999px;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: white;
  margin-bottom: 18px;
  font-variant-numeric: tabular-nums;
}
.tsh-kicker-dot { width: 5px; height: 5px; background: var(--brand-1); border-radius: 50%; flex-shrink: 0; }
.tsh-kicker-num { color: var(--brand-1); font-weight: 800; }
.tsh-calc-headline {
  font-size: clamp(1.9rem, 4.5vw, 3rem);
  font-weight: 800; letter-spacing: -0.03em;
  line-height: 1.05;
  margin: 0 0 12px;
}
.tsh-calc-sub { font-size: clamp(1rem, 1.3vw, 1.1rem); color: var(--ink-3); max-width: 48ch; margin: 0 auto; }

/* ===== Card scaffold ===== */
.tsh-card {
  background: white;
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow-sm);
  margin-bottom: 14px;
  overflow: hidden;
}

/* Accent stripe — thin brand-gradient bar across the top of a card */
.tsh-card.is-accented { position: relative; }
.tsh-card.is-accented::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(135deg, #6CB1FF 0%, #0b74ff 52%, #0856CC 100%);
  z-index: 2;
}

/* Section header inside cards (replaces dotted eyebrow) */
.tsh-card-label {
  padding: 22px 22px 4px;
  font-size: 18px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.02em;
}

/* ============================================================================
   INPUTS
   ========================================================================= */
.tsh-inputs { padding: 14px 22px 22px; }

/* Scenario dropdown row */
.tsh-scenario-row {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 22px;
  flex-wrap: wrap;
}
.tsh-scenario-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-3);
  flex-shrink: 0;
}
.tsh-scenario-wrap {
  position: relative;
  flex: 1;
  min-width: 180px;
}
.tsh-scenario-select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 100%;
  background: white;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  padding: 11px 38px 11px 14px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.005em;
  transition: border-color 150ms, box-shadow 150ms;
}
.tsh-scenario-select:hover { border-color: var(--line-2); }
.tsh-scenario-select:focus {
  outline: none;
  border-color: var(--brand-2);
  box-shadow: 0 0 0 3px rgba(11,92,255,0.10);
}
.tsh-scenario-chevron {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--ink-3);
}

/* Sliders */
.tsh-inputs-grid {
  display: grid;
  gap: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
@media (min-width: 600px) {
  .tsh-inputs-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
}
.tsh-slider-row { display: flex; flex-direction: column; gap: 10px; }
.tsh-slider-head { display: flex; flex-direction: column; gap: 4px; }
.tsh-slider-label {
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-4);
}
.tsh-slider-value {
  font-size: clamp(1.6rem, 4.5vw, 2rem);
  font-weight: 800; color: var(--ink);
  letter-spacing: -0.02em; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.tsh-slider {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 6px; border-radius: 9999px;
  background: linear-gradient(to right,
    var(--brand-2) 0%, var(--brand-2) var(--fill, 0%),
    var(--bg-3) var(--fill, 0%), var(--bg-3) 100%);
  outline: none; cursor: pointer;
  margin: 4px 0;
}
.tsh-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 22px; height: 22px; border-radius: 50%;
  background: white; border: 2px solid var(--brand-2);
  cursor: grab;
  box-shadow: 0 1px 2px rgba(15,23,42,0.12);
  transition: box-shadow 150ms;
}
.tsh-slider::-webkit-slider-thumb:hover {
  box-shadow: 0 1px 2px rgba(15,23,42,0.14), 0 0 0 6px rgba(11,92,255,0.12);
}
.tsh-slider::-webkit-slider-thumb:active {
  cursor: grabbing; transform: scale(1.05);
  box-shadow: 0 1px 2px rgba(15,23,42,0.16), 0 0 0 8px rgba(11,92,255,0.18);
}
.tsh-slider-minmax {
  display: flex; justify-content: space-between;
  font-size: 10px; color: var(--ink-4);
  font-weight: 600; letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}
.tsh-total-strip {
  margin-top: 24px;
  padding: 14px 16px;
  background: linear-gradient(180deg, var(--bg-2), white);
  border: 1px solid var(--line);
  border-radius: 10px;
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px;
}
.tsh-total-label { font-size: 12px; color: var(--ink-3); font-weight: 600; }
.tsh-total-val {
  font-size: 22px; font-weight: 800; color: var(--ink);
  letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
}
.tsh-total-unit { font-size: 12px; font-weight: 600; color: var(--ink-4); margin-left: 3px; }

/* ===== Receipt ===== */
.receipt {
  background: white;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--line);
  margin-bottom: 14px;
}
.receipt-header {
  /* v3.21.2: calculator gradient restored */
  background: linear-gradient(135deg, #6CB1FF 0%, #0b74ff 52%, #0856CC 100%);
  color: white;
  padding: 22px 24px 26px;
  position: relative;
  overflow: hidden;
}
.receipt-header::before {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.18) 1px, transparent 0);
  background-size: 24px 24px;
  -webkit-mask-image: radial-gradient(ellipse at 100% 0%, black, transparent 65%);
          mask-image: radial-gradient(ellipse at 100% 0%, black, transparent 65%);
  pointer-events: none;
}
.receipt-header-inner { position: relative; z-index: 1; }
.receipt-header-row {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; margin-bottom: 18px;
}
.receipt-tier {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 14px; font-weight: 700; color: white;
  letter-spacing: -0.005em;
}
.receipt-tier-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  border-radius: 7px;
  background: rgba(255,255,255,0.18);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  flex-shrink: 0; color: white;
}
.receipt-pill {
  display: inline-flex; align-items: center;
  padding: 5px 11px;
  border: 1px solid rgba(255,255,255,0.28);
  border-radius: 9999px;
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(255,255,255,0.92);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.receipt-header-label {
  font-size: 13px; font-weight: 500;
  color: rgba(255,255,255,0.85);
  margin-bottom: 6px;
  letter-spacing: -0.005em;
}
.receipt-header-amount {
  font-size: clamp(2.6rem, 11vw, 3.6rem);
  font-weight: 800; letter-spacing: -0.04em;
  line-height: 1; font-variant-numeric: tabular-nums;
}
/* CTA inside receipt header (v3.14.3) — pulled up from below the calc row.
   White button on the brand-gradient header reads as the primary action;
   no duplicate total needed at the bottom of the breakdown. */
.receipt-cta {
  display: flex; align-items: center; justify-content: center;
  margin-top: 18px;
  padding: 14px 22px;
  background: #fff;
  color: var(--brand-2);
  border-radius: 10px;
  font-weight: 700; font-size: 15px;
  text-decoration: none;
  box-shadow: 0 1px 0 rgba(15,23,42,0.04), 0 8px 22px -10px rgba(0,0,0,0.35);
  transition: transform 120ms ease, box-shadow 120ms ease;
}
.receipt-cta:hover { transform: translateY(-1px); box-shadow: 0 1px 0 rgba(15,23,42,0.04), 0 12px 28px -10px rgba(0,0,0,0.4); }
.receipt-cta:active { transform: translateY(0); }
.receipt-cta-note {
  margin-top: 10px; text-align: center;
  font-size: 11.5px; font-weight: 500;
  color: rgba(255,255,255,0.85);
  letter-spacing: -0.005em;
}
.receipt-body { padding: 22px 24px 24px; }
.receipt-section-label {
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-4);
  margin-bottom: 14px;
}
.receipt-items { display: flex; flex-direction: column; }
.receipt-item {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 16px; padding: 16px 0;
  border-bottom: 1px dashed var(--line);
}
.receipt-item:first-child { padding-top: 4px; }
.receipt-item:last-child { border-bottom: none; padding-bottom: 8px; }
.receipt-item-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.receipt-item-title {
  font-size: 16px; font-weight: 700;
  color: var(--ink); letter-spacing: -0.01em;
  display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.receipt-item-tag {
  display: inline-flex; align-items: center;
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-4); background: var(--bg-3);
  border-radius: 4px; padding: 2px 6px;
}
.receipt-item-sub {
  font-size: 13px; color: var(--ink-3);
  font-weight: 500; font-variant-numeric: tabular-nums;
}
.receipt-item-price {
  font-size: 17px; font-weight: 700;
  color: var(--ink); font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em; white-space: nowrap; flex-shrink: 0;
}
.receipt-item-price.is-zero { color: var(--green-1); }
.receipt-total {
  margin-top: 14px;
  padding: 18px 20px;
  background: linear-gradient(135deg, rgba(106,155,255,0.10), rgba(11,92,255,0.05));
  border: 1px solid rgba(11,92,255,0.18);
  border-radius: 14px;
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 16px;
}
.receipt-total-label { font-size: 15px; font-weight: 700; color: var(--ink); letter-spacing: -0.01em; }
.receipt-total-amount {
  font-size: clamp(1.7rem, 6vw, 2.1rem);
  font-weight: 800; letter-spacing: -0.03em;
  color: var(--brand-2); font-variant-numeric: tabular-nums;
  line-height: 1; white-space: nowrap;
}
.receipt-footer {
  display: flex; justify-content: center; align-items: center;
  gap: 12px;
  padding-top: 18px; margin-top: 18px;
  border-top: 1px solid var(--line);
  font-size: 12px; font-weight: 600;
}
.receipt-footer-left { display: inline-flex; align-items: center; gap: 7px; color: var(--green-1); }
.receipt-footer-check {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--green-1); color: white; flex-shrink: 0;
}
.receipt-footer-right { display: inline-flex; align-items: center; gap: 7px; color: var(--ink-4); }
.receipt-pulse {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--green-1); position: relative; flex-shrink: 0;
}
.receipt-pulse::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: var(--green-1); opacity: 0.5;
  animation: pulse 1.8s ease-out infinite;
}
@keyframes pulse {
  0%   { transform: scale(1); opacity: 0.5; }
  100% { transform: scale(2.5); opacity: 0; }
}

/* MMS note */
.mms-note {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 13px 16px;
  margin: 0 0 14px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  font-size: 13px;
  color: var(--ink-3);
  line-height: 1.5;
}
.mms-note-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  border-radius: 6px;
  background: white;
  border: 1px solid var(--line);
  color: var(--brand-2);
  flex-shrink: 0;
  margin-top: -1px;
}
.mms-note-text strong { color: var(--ink-2); font-weight: 700; }

/* Competition */
.compare-section { padding: 14px 22px 22px; }
.compare-sub { font-size: 12px; color: var(--ink-3); margin: 6px 0 22px; }
.compare-rows { display: flex; flex-direction: column; gap: 18px; }
.compare-row-meta {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 10px; margin-bottom: 8px;
}
.compare-row-name { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.compare-row-name-text {
  font-size: 14px; font-weight: 600;
  color: var(--ink-2); letter-spacing: -0.005em;
  display: inline-flex; align-items: center; gap: 6px;
}
.compare-row-sub { font-size: 11px; color: var(--ink-4); font-weight: 500; }
.compare-row-numbers { display: flex; align-items: baseline; gap: 10px; flex-shrink: 0; }
.compare-row-mult {
  font-size: 11px; font-weight: 700;
  color: var(--ink-3); background: var(--bg-3);
  padding: 3px 8px; border-radius: 9999px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}
.compare-row-price {
  font-size: 15px; font-weight: 700;
  color: var(--ink); font-variant-numeric: tabular-nums;
  letter-spacing: -0.005em; white-space: nowrap;
}
.compare-row-bar {
  position: relative; height: 8px;
  background: var(--bg-3); border-radius: 9999px;
  overflow: hidden;
}
.compare-row-bar-fill {
  height: 100%; border-radius: 9999px;
  background: linear-gradient(90deg, var(--orange-1), var(--orange-2));
  transition: width 350ms cubic-bezier(0.16, 1, 0.3, 1);
}
.compare-row.is-tsh {
  margin-top: 8px; padding-top: 18px;
  border-top: 1px dashed var(--line-2);
}
.compare-row.is-tsh .compare-row-name-text { color: var(--brand-2); font-weight: 800; }
.compare-row.is-tsh .compare-row-name-text::before {
  content: ''; width: 16px; height: 16px;
  border-radius: 5px; background: var(--brand-2);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none'><path d='M3 7l3 3 5-6' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-size: 16px; background-position: center; background-repeat: no-repeat;
  flex-shrink: 0;
}
.compare-row.is-tsh .compare-row-mult { background: rgba(11,92,255,0.10); color: var(--brand-2); }
.compare-row.is-tsh .compare-row-price { color: var(--brand-2); font-weight: 800; }
.compare-row.is-tsh .compare-row-bar-fill {
  background: linear-gradient(135deg, #6CB1FF 0%, #0b74ff 52%, #0856CC 100%);
  box-shadow: 0 1px 3px rgba(11,92,255,0.35);
}

/* CTA + fineprint */
.tsh-btn-primary {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--brand-2);
  color: white;
  padding: 16px 32px;
  border-radius: 10px;
  font-weight: 700; font-size: 16px;
  text-decoration: none; border: none;
  cursor: pointer;
  box-shadow: 0 1px 0 rgba(15,23,42,0.04), 0 8px 20px -8px rgba(11,92,255,0.5);
  transition: transform 120ms;
}
.tsh-btn-primary:hover { transform: translateY(-1px); }
.tsh-cta { text-align: center; margin-top: 32px; }
.tsh-cta-note { font-size: 12px; color: var(--ink-4); margin: 14px 0 0; }
.tsh-fineprint {
  margin-top: 32px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  font-size: 11px; color: var(--ink-4); line-height: 1.6;
}
.tsh-fineprint p { margin: 0 0 8px; }
.tsh-fineprint p:last-child { margin-bottom: 0; }
.tsh-fineprint strong { color: var(--ink-3); font-weight: 700; }

/* ============================================================================
   MANIFESTO
   ========================================================================= */
.tsh-manifesto {
  position: relative;
  background: #0a0a0a;
  color: #f8fafc;
  padding: clamp(4rem, 10vw, 7rem) clamp(1.25rem, 4vw, 2rem);
  overflow: hidden;
  isolation: isolate;
}
.tsh-manifesto-glow {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 900px; height: 600px;
  background: none;
  filter: blur(60px);
  pointer-events: none;
  z-index: -2;
}
.tsh-manifesto-grid {
  position: absolute; inset: 0;
  background-image:
    none;
  background-size: 28px 28px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, #000 40%, transparent 85%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, #000 40%, transparent 85%);
  pointer-events: none;
  z-index: -1;
}
.tsh-manifesto-inner {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}
.tsh-manifesto-eyebrow {
  display: inline-block;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  padding: 6px 14px;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 9999px;
  margin-bottom: 36px;
}
.tsh-manifesto-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: clamp(4px, 0.8vw, 10px);
  margin-bottom: clamp(2rem, 5vw, 3.5rem);
}
.tsh-manifesto-list li {
  font-size: clamp(1.6rem, 4.2vw, 3.25rem);
  font-weight: 900;
  letter-spacing: -0.035em;
  line-height: 1.08;
  color: rgba(255,255,255,0.92);
  max-width: 22ch;
  margin-left: auto;
  margin-right: auto;
}
.tsh-manifesto-list li:last-child {
  background: var(--brand-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.tsh-manifesto-outro {
  font-size: clamp(1rem, 1.8vw, 1.4rem);
  color: rgba(255,255,255,0.7);
  max-width: 56ch;
  margin: 0 auto;
  line-height: 1.5;
  font-weight: 400;
}
.tsh-manifesto-hl {
  color: white;
  font-weight: 600;
}
.tsh-manifesto-promise {
  margin-top: clamp(1.25rem, 2.5vw, 1.75rem);
  padding-top: clamp(1.25rem, 2.5vw, 1.75rem);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: clamp(0.85rem, 1.1vw, 0.95rem);
  color: rgba(255, 255, 255, 0.5);
  max-width: 54ch;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.55;
  font-style: italic;
  letter-spacing: 0.005em;
}

/* ============================================================================
   PRICING
   ========================================================================= */
.tsh-pricing {
  background: white;
  padding: clamp(3rem, 7vw, 5rem) clamp(1.25rem, 4vw, 2rem);
}
.tsh-pricing-inner { max-width: 1180px; margin: 0 auto; }
.tsh-pricing-intro {
  text-align: center;
  margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
}
.tsh-pricing-headline {
  font-size: clamp(1.9rem, 4.5vw, 3rem);
  font-weight: 800; letter-spacing: -0.03em;
  line-height: 1.05;
  margin-bottom: 12px;
}
.tsh-pricing-sub {
  font-size: clamp(1rem, 1.3vw, 1.1rem);
  color: var(--ink-3);
  max-width: 52ch;
  margin: 0 auto;
}

.tsh-pricing-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
@media (min-width: 700px) {
  .tsh-pricing-grid {
    grid-template-columns: 1fr 1fr;
  }
  .tsh-plan:last-child { grid-column: 1 / -1; max-width: 520px; justify-self: center; width: 100%; }
}
@media (min-width: 1024px) {
  .tsh-pricing-grid {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 24px;
  }
  .tsh-plan:last-child { grid-column: auto; max-width: none; justify-self: stretch; }
}

.tsh-plan {
  background: white;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: clamp(1.5rem, 3vw, 2rem);
  display: flex;
  flex-direction: column;
  position: relative;
  transition: border-color 200ms, transform 200ms;
}
.tsh-plan:hover { border-color: var(--line-2); }

.tsh-plan.is-featured {
  border: 2px solid var(--brand-2);
  background: #fff;
  box-shadow:
    0 20px 40px -20px rgba(15, 23, 42, 0.18),
    0 8px 20px -10px rgba(15, 23, 42, 0.10);
  transform: translateY(-4px);
}
@media (min-width: 1024px) {
  .tsh-plan.is-featured { transform: translateY(-8px); }
}

.tsh-plan-glow {
  position: absolute;
  inset: -20% -10% auto -10%;
  height: 60%;
  background: none;
  pointer-events: none;
  z-index: 0;
}
.tsh-plan > * { position: relative; z-index: 1; }

.tsh-plan-tag {
  position: absolute;
  top: -14px; left: 50%;
  transform: translateX(-50%);
  background: var(--brand-2);
  color: white;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 5px 14px;
  border-radius: 9999px;
  box-shadow: 0 6px 16px -4px rgba(11, 92, 255, 0.5);
  z-index: 2;
}

.tsh-plan-head { margin-bottom: 18px; }
.tsh-plan-name {
  font-size: 20px; font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: 4px;
}
.tsh-plan-desc {
  font-size: 13px;
  color: var(--ink-3);
}
.tsh-plan-price {
  display: flex; align-items: baseline; gap: 4px;
  margin-bottom: 8px;
}
.tsh-plan-price-amt {
  font-size: 48px; font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.tsh-plan-price-unit {
  font-size: 16px; font-weight: 600;
  color: var(--ink-3);
}
.tsh-plan-limit {
  font-size: 13px;
  color: var(--ink-3);
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--bg-3);
  font-weight: 500;
}
/* v3.20.0 — the cap is context, the send allowance is the pitch. */
.tsh-plan-limit strong {
  color: var(--ink);
  font-weight: 700;
}

.tsh-plan-feats {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 28px;
  flex-grow: 1;
}
.tsh-plan-feats li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  color: var(--ink-2);
  line-height: 1.55;
}
.tsh-plan-mark {
  font-size: 14px;
  font-weight: 800;
  color: var(--brand-2);
  line-height: 1.55;
  flex-shrink: 0;
}
.tsh-plan-cta {
  display: block;
  text-align: center;
  padding: 13px 18px;
  border-radius: var(--btn-radius);
  font-size: 14px; font-weight: 600;
  background: var(--bg-2);
  color: var(--ink);
  border: 1px solid var(--line-2);
  transition: background 150ms, border-color 150ms, transform 150ms;
  -webkit-tap-highlight-color: transparent;
}
.tsh-plan-cta:hover { background: var(--bg-3); border-color: var(--ink-4); }
.tsh-plan-cta.is-primary {
  background: var(--brand-2);
  color: white;
  /* v3.12.10: was border-color:transparent + 1px solid border-style inherited
     from base — on mobile the 1px transparent edge anti-aliased as a faint
     dark line at the button's bottom. Using border:0 removes the edge
     entirely. Shadow also softened (was 0 8px 20px -6px @ 0.5 alpha — too
     heavy, the lower band combined with the gradient's dark endpoint
     read as a horizontal line on phone screens). */
  border: 0;
  box-shadow: 0 4px 14px -4px rgba(11, 92, 255, 0.35);
}
.tsh-plan-cta.is-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 22px -6px rgba(11, 92, 255, 0.45); }

.tsh-pricing-foot {
  text-align: center;
  font-size: 13px;
  color: var(--ink-4);
  margin-top: 28px;
}
/* 2.6.2: the "Fair use applies." link, quiet like the line it sits in */
.tsh-pricing-foot a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.tsh-pricing-foot a:hover { color: var(--ink-2, inherit); }
/* 2.6.3: Monthly / Yearly pill (solid colours, no glow) and the yearly line under the price */
.tsh-bill-toggle { display: inline-flex; gap: 4px; margin-top: 24px; padding: 4px; border: 1px solid var(--line); border-radius: 9999px; background: var(--bg-3); }
.tsh-bill-toggle button { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 20px; border-radius: 9999px; font-size: 14px; font-weight: 600; color: var(--ink-3); transition: background-color 150ms, color 150ms; }
.tsh-bill-toggle button:hover { color: var(--ink); }
.tsh-bill-toggle button[aria-checked="true"] { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12); }
.tsh-bill-toggle button:focus-visible { outline: none; background: var(--ink); color: #fff; }
.tsh-bill-save { font-size: 12px; font-weight: 700; color: #047857; }
.tsh-bill-toggle button:focus-visible .tsh-bill-save { color: #6EE7B7; }
.tsh-plan-price-yr { margin: -4px 0 12px; font-size: 13px; color: var(--ink-3); }
.tsh-plan-price-yr:empty { display: none; } /* monthly: no gap (2.6.3 review) */
@media (max-width: 480px) { .tsh-bill-toggle button { padding: 0 14px; } }

/* ============================================================================
   FAQ
   ========================================================================= */
.tsh-faq {
  background: var(--bg-2);
  padding: clamp(3rem, 7vw, 5rem) clamp(1.25rem, 4vw, 2rem);
}
.tsh-faq-inner { max-width: 760px; margin: 0 auto; }
.tsh-faq-intro { text-align: center; margin-bottom: clamp(2rem, 4vw, 3rem); }
.tsh-faq-headline {
  font-size: clamp(1.9rem, 4.5vw, 3rem);
  font-weight: 800; letter-spacing: -0.03em;
  line-height: 1.05;
}

.tsh-faq-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.tsh-faq-item {
  background: white;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color 200ms, box-shadow 200ms;
}
.tsh-faq-item[open] {
  border-color: var(--line-2);
  box-shadow: 0 8px 24px -12px rgba(15, 23, 42, 0.08);
}

.tsh-faq-item summary {
  list-style: none;
  padding: 18px 22px;
  font-size: clamp(0.95rem, 1.2vw, 1.05rem);
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  position: relative;
}
.tsh-faq-item summary::-webkit-details-marker { display: none; }
.tsh-faq-item summary::after {
  content: '';
  width: 14px; height: 14px;
  flex-shrink: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  transition: transform 200ms;
}
.tsh-faq-item[open] summary::after { transform: rotate(180deg); }
.tsh-faq-item summary:hover { color: var(--brand-2); }
.tsh-faq-item summary:focus-visible {
  outline: 2px solid var(--brand-2);
  outline-offset: -2px;
}

.tsh-faq-ans {
  padding: 0 22px 20px;
  font-size: 14.5px;
  color: var(--ink-3);
  line-height: 1.6;
}
.tsh-faq-ans strong { color: var(--ink-2); font-weight: 600; }

/* ============================================================================
   NEW SECTIONS (pass 2: Works With · How It Works · Use Cases · Agency)
   ========================================================================= */

/* Shared eyebrows for new sections — replaced by unified .tsh-kicker above */

/* === WORKS WITH ======================================================== */
.tsh-carriers {
  background: var(--bg-2);
  padding: clamp(3rem, 6vw, 4.5rem) clamp(1.25rem, 4vw, 2rem);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  position: relative;
  overflow: hidden;
}
.tsh-carriers::before {
  content: '';
  position: absolute; inset: 0;
  background: none;
  pointer-events: none;
}
.tsh-carriers-inner { max-width: 1100px; margin: 0 auto; position: relative; z-index: 1; }

.tsh-carriers-head { display: flex; align-items: center; gap: 16px; margin-bottom: 28px; }
/* v3.18.4: the two nowrap labels (~181px + ~165px) plus 2x16px gap need
   ~378px. A 393pt iPhone gives 353px of content width, a 360px Android
   gives 320px — the flex:1 hairline collapsed to 0 and the tagline was
   clipped off the right edge (silently, via body{overflow-x:hidden}).
   Stack centred below 560px and drop the rule. */
@media (max-width: 559px) {
  .tsh-carriers-head {
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
  }
  .tsh-carriers-line { display: none; }
}
.tsh-carriers-label {
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-3); white-space: nowrap;
}
.tsh-carriers-line { flex: 1; height: 1px; background: var(--line); }
.tsh-carriers-tagline {
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--brand-2); white-space: nowrap;
}

.tsh-carriers-grid { display: grid; grid-template-columns: 1fr; gap: 14px; margin-bottom: 28px; }
@media (min-width: 700px) { .tsh-carriers-grid { grid-template-columns: 1fr 1fr; gap: 18px; } }

.tsh-carrier {
  background: white; border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 22px 24px;
  display: flex; align-items: center; gap: 18px;
  transition: border-color 200ms, transform 200ms, box-shadow 200ms;
  box-shadow: var(--shadow-xs);
}
.tsh-carrier:hover { border-color: var(--line-2); transform: translateY(-2px); box-shadow: var(--shadow-sm); }

.tsh-carrier-mark {
  width: 52px; height: 52px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; background: white; border: 1px solid var(--line);
  box-shadow: var(--shadow-xs);
}
.tsh-carrier-mark svg { width: 30px; height: 30px; }
.tsh-carrier-mark.twilio svg { color: #F22F46; }
.tsh-carrier-mark.vonage svg { color: #000000; }

.tsh-carrier-body { min-width: 0; flex: 1; }
.tsh-carrier-name { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.tsh-wordmark {
  font-size: 22px; line-height: 1;
  letter-spacing: -0.04em; font-weight: 900;
}
.tsh-wordmark.twilio {
  color: #F22F46; text-transform: lowercase;
  font-family: 'Inter', sans-serif; font-weight: 800;
  letter-spacing: -0.05em;
}
.tsh-wordmark.vonage {
  color: #000000; font-family: 'Inter', sans-serif;
  font-weight: 900; letter-spacing: -0.03em;
}
.tsh-carrier-check { width: 14px; height: 14px; color: var(--green); }

.tsh-carrier-note { font-size: 13px; color: var(--ink-3); line-height: 1.5; }
.tsh-carrier-note strong { color: var(--ink-2); font-weight: 600; }
.tsh-carrier-note .pay-direct {
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--brand-2); font-weight: 600;
}

/* === BYOC proof strip (replaces old .tsh-carriers-foot microcopy) === */
.tsh-byoc-strip {
  background: white;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 6px;
  display: grid; grid-template-columns: 1fr; gap: 0;
  box-shadow: var(--shadow-xs);
  position: relative;
}
@media (min-width: 760px) {
  .tsh-byoc-strip { grid-template-columns: repeat(3, 1fr); }
}
.tsh-byoc-pill {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px;
  position: relative;
}
@media (min-width: 760px) {
  .tsh-byoc-pill:not(:last-child)::after {
    content: '';
    position: absolute; right: 0; top: 14%; bottom: 14%;
    width: 1px; background: var(--line);
  }
}
@media (max-width: 759px) {
  .tsh-byoc-pill:not(:last-child) { border-bottom: 1px solid var(--line); }
}
.tsh-byoc-icon {
  width: 36px; height: 36px; border-radius: 10px;
  background: var(--bg-3);
  border: 1px solid rgba(11,92,255,0.15);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; color: var(--brand-2);
}
.tsh-byoc-icon svg { width: 18px; height: 18px; }
.tsh-byoc-text { font-size: 13.5px; font-weight: 600; color: var(--ink); line-height: 1.35; }
.tsh-byoc-text small { display: block; font-size: 12px; font-weight: 400; color: var(--ink-3); margin-top: 2px; }

.tsh-carriers-jump {
  margin-top: 20px; text-align: center;
  font-size: 12.5px; color: var(--ink-3);
}
.tsh-carriers-jump a {
  color: var(--brand-2); font-weight: 600; text-decoration: none;
  border-bottom: 1px dashed rgba(11,92,255,0.4);
  padding-bottom: 1px; transition: border-color 200ms;
}
.tsh-carriers-jump a:hover { border-bottom-color: var(--brand-2); }

/* === HOW IT WORKS ====================================================== */
/* Full responsive redesign in v3.18. Single tree handles desktop and
   mobile. No zig-zag, no timeline rail, no floating numbered circles.
   See changelog at top of file for the full architecture writeup.    */
.tsh-how {
  background: #fff;
  padding: clamp(3.5rem, 8vw, 6rem) clamp(1.25rem, 4vw, 2rem);
  position: relative; overflow: hidden;
}
.tsh-how::before {
  content: ''; position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 1100px; height: 600px;
  background: none;
  pointer-events: none; z-index: 0;
}
.tsh-how-inner {
  max-width: 1240px; margin: 0 auto;
  position: relative; z-index: 1;
}

/* Centered intro — matches .tsh-agency-copy shape at desktop */
.tsh-how-intro {
  text-align: center;
  max-width: 720px;
  margin: 0 auto clamp(3rem, 6vw, 5rem);
}
.tsh-how-headline {
  font-size: clamp(1.9rem, 4.5vw, 3rem);
  font-weight: 800; letter-spacing: -0.03em;
  line-height: 1.05; margin-bottom: 14px;
  max-width: 22ch; margin-left: auto; margin-right: auto;
}
.tsh-how-sub {
  font-size: clamp(1rem, 1.3vw, 1.1rem);
  color: var(--ink-3); max-width: 54ch;
  margin: 0 auto; line-height: 1.55;
}

/* Vertical stack of step compositions */
.tsh-how-flow {
  display: flex;
  flex-direction: column;
  gap: clamp(4.5rem, 9vw, 7.5rem);
}

/* Each step: copy LEFT, visual RIGHT — same for all 4 steps.
   Grid ratio 1fr 1.5fr gives the visual ~60% of the row width so
   dashboards (steps 2, 4) render at ~720px — enough room for the
   168px sidebar + ~530px main content area without cramping. Modal
   mockups (steps 1, 3) look balanced at the same width since they're
   designed compact. Matches the Linear / Stripe / Vercel feature-row
   pattern. */
.tsh-step {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
@media (max-width: 900px) {
  .tsh-step {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }
}

/* Copy column */
.tsh-step-copy { max-width: 460px; }
@media (max-width: 900px) {
  .tsh-step-copy { max-width: 100%; }
}

/* Step header — editorial pattern (Stripe / Linear style).
   Large display numeral as the focal indicator, small uppercase label
   beside it for context, hairline rule underneath for editorial
   separation. No chip, no badge, no pill. Both numeric and label
   in brand blue, matching the original .tsh-step-eyebrow palette. */
.tsh-step-marker {
  display: flex; align-items: baseline; gap: 12px;
  margin-bottom: 22px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
  width: fit-content;
  min-width: 160px;
}
.tsh-step-marker-num {
  font-size: 28px; font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--brand-2);
  font-feature-settings: 'tnum';
  line-height: 1;
}
.tsh-step-marker-label {
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--brand-2);
}

.tsh-step-title {
  font-size: clamp(1.5rem, 2.75vw, 2.25rem);
  font-weight: 800; letter-spacing: -0.025em;
  line-height: 1.1; color: var(--ink);
  margin: 0 0 14px;
}
.tsh-step-desc {
  font-size: 16px; line-height: 1.6;
  color: var(--ink-2); margin: 0 0 22px;
}
.tsh-step-desc strong { color: var(--ink); font-weight: 600; }
.tsh-step-desc code {
  font-family: 'JetBrains Mono', 'Menlo', 'Monaco', monospace;
  font-size: 0.92em;
  background: var(--bg-3);
  padding: 1px 6px;
  border-radius: 4px;
  color: var(--ink);
  font-weight: 500;
}

.tsh-step-meta {
  display: flex; flex-wrap: wrap;
  gap: 8px; font-size: 13px; color: var(--ink-3);
}
.tsh-step-meta-item {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px;
  background: var(--bg-2); border: 1px solid var(--bg-3);
  border-radius: 9999px; font-weight: 500;
}
.tsh-step-meta-item svg { width: 12px; height: 12px; color: var(--green); }

/* Visual column — atmospheric glow behind mockup */
.tsh-step-visual { position: relative; }
.tsh-step-visual::before {
  content: "";
  position: absolute;
  inset: 5% -3% -5% -3%;
  background: none;
  filter: blur(36px);
  pointer-events: none; z-index: 0;
}
.tsh-step-visual > * { position: relative; z-index: 1; }

/* ============================================================================
   Mobile mockup framing — Linear / Notion / Vercel / Cal.com pattern.
   Marketing dashboard mockups are PRODUCT SHOTS, not responsive UIs.
   On mobile, dashboards (steps 2 & 4 — those with .mn-side) keep
   their desktop composition, bleed past the right viewport edge, and
   a 72px gradient fade makes the overflow read as intentional. Modals
   (steps 1 & 3) skip this since they're compact already. Borrowed
   verbatim from .tsh-fleet-as-mockup at L4159 (multi-business section).
   ============================================================================ */
@media (max-width: 760px) {
  .tsh-step-visual:has(.mn-side) {
    overflow: hidden;
    margin-right: -1.25rem;
    border-radius: 14px 0 0 14px;
    position: relative;
  }
  .tsh-step-visual:has(.mn-side)::before { display: none; }
  .tsh-step-visual:has(.mn-side) .mw {
    width: 720px;
    max-width: none;
    border-radius: 14px 0 0 14px;
    border-right: none;
  }
  .tsh-step-visual:has(.mn-side)::after {
    content: "";
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 72px;
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, #ffffff 85%);
    pointer-events: none;
    z-index: 3;
  }
  /* Collapsed icon-only sidebar — labels hidden, narrow column */
  .tsh-step-visual .mw-body:has(.mn-side) {
    grid-template-columns: 52px 1fr;
  }
  .tsh-step-visual .mn-side {
    padding: 14px 6px;
  }
  .tsh-step-visual .mn-brand {
    justify-content: center;
    padding: 4px 0 12px;
    gap: 0;
  }
  .tsh-step-visual .mn-brand-text { display: none; }
  .tsh-step-visual .mn-nav-item {
    justify-content: center;
    padding: 9px 6px;
    gap: 0;
  }
  .tsh-step-visual .mn-nav-label { display: none; }
  .tsh-step-visual .mn-nav-divider { margin: 8px 4px; }
  .tsh-step-visual .mn-main { padding: 16px 18px 18px; }
}
/* === AI PROMO ASSISTANT ================================================= */
.tsh-aip{
  position:relative; overflow:hidden;
  padding:clamp(3rem,7vw,5rem) clamp(1.25rem,4vw,2rem);
  background:var(--bg-2);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
/* top-anchored brand glow — keeps this section distinct from the flat grey
   calculator above it and the flat white multi-business section below it */
.tsh-aip::before{
  content:''; position:absolute; left:50%; top:-280px; transform:translateX(-50%);
  width:1150px; height:660px; pointer-events:none; z-index:0;
  background:none;
}
/* faint grid removed in v3.19.1 — the radial glow alone carries the
   section separation, and the grid was competing with the app frame. */
.tsh-aip-inner{
  position:relative; z-index:1; max-width:1240px; margin:0 auto;
  display:grid; gap:clamp(2.25rem,4vw,3.25rem); align-items:center;
}
@media (min-width:1024px){
  .tsh-aip-inner{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(2.5rem,4vw,4rem);}
}

/* ---- eyebrow row: black kicker pill + borderless "included" line -------- */
.tsh-aip-eyebrow{display:flex;align-items:center;flex-wrap:wrap;gap:8px 16px;margin-bottom:18px;}
.tsh-aip-eyebrow .tsh-kicker{margin-bottom:0;}
.tsh-aip-incl{
  display:inline-flex; align-items:center; gap:7px;
  font-size:11px; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--brand-2);
}
.tsh-aip-incl svg{width:13px;height:13px;flex:none;}
.tsh-aip-incl .twinkle{animation:tshAipTwinkle 2.8s ease-in-out infinite;transform-origin:center;}
@keyframes tshAipTwinkle{0%,100%{opacity:.35;transform:scale(.82);}50%{opacity:1;transform:scale(1);}}

.tsh-aip-headline{
  font-size:clamp(1.9rem,4.4vw,3rem); font-weight:800;
  letter-spacing:-.03em; line-height:1.05; margin-bottom:16px; max-width:17ch;
}
/* Each sentence is its own block so it holds exactly one line. Measured
   against real Inter 800 metrics at every step of the clamp: the widest
   line is 467px at the 3rem cap, against a 579px 17ch box, and 296px at
   the 1.9rem floor against a 320px budget on a 360px phone. The 17ch cap
   stays as a safety net; if the copy ever grows past it the lines wrap
   and balance rather than overflowing.
   v3.21.0: "Up to a year of promos." measures 326px at the 1.9rem floor,
   6px over the 320px budget on a 360px phone, so phones under 375px step
   down to 1.8rem (309px). From 375px up the floor fits (335px budget). */
.tsh-aip-hl-ln{display:block;}
@media (max-width:374px){ .tsh-aip-headline{font-size:1.8rem;} }
.tsh-aip-sub{
  font-size:clamp(1rem,1.3vw,1.08rem); color:var(--ink-3);
  line-height:1.6; max-width:52ch;
}
/* Reuses the hero's .tsh-ticks / .tsh-tick-icon so the check treatment is
   literally the same element, not a lookalike. Two hero behaviours are
   neutralised by a (0,2,0) scoped override — same pattern the dashboard
   uses for .qrn-aip-* vs the global .qrn-app rules:
     1. animation: tshFadeUp fires on page load. This section is mid-page
        and reveals on scroll via data-reveal, so the load animation would
        have already burned before the section is ever seen.
     2. The hero centres the row at every width. Here the copy column is
        left-aligned from 1024px up, so the row goes flush left. */
.tsh-aip-copy .tsh-ticks{animation:none;margin-top:26px;}
@media (min-width:1024px){
  /* The hero's own desktop rule — flex row, wrap, 12px/28px gap — with the
     one change this column needs: flush left instead of centred, since the
     copy is a left column here and the hero is a centred stage.
     Wrap behaviour at 1240px inner: the left column resolves to ~529px and
     the three labels measure ~259 / 224 / 245, so rows 1+2 land at 511px
     and it breaks 2+1. Below roughly a 1230px viewport the column gets too
     narrow for that and it drops to one per line, which is a clean
     degradation rather than a ragged one. */
  .tsh-aip-copy .tsh-ticks{
    display:flex; flex-direction:row; flex-wrap:wrap;
    justify-content:flex-start; gap:12px 28px;
    margin-left:0; margin-right:0;
  }
}

/* ---- phase caption under the frame ------------------------------------- */
.tsh-aip-cap{margin-top:20px;}
.tsh-aip-cap-row{display:flex;align-items:baseline;gap:12px;min-height:26px;}
.tsh-aip-cap-n{
  flex:none; font-size:22px; font-weight:700; letter-spacing:-.025em;
  color:var(--brand-2); font-feature-settings:'tnum'; line-height:1;
}
.tsh-aip-cap-t{
  font-size:16px; font-weight:600; letter-spacing:-.015em; color:var(--ink);
  transition:opacity .25s ease;
}
.tsh-aip-cap.is-swap .tsh-aip-cap-t,
.tsh-aip-cap.is-swap .tsh-aip-cap-n{opacity:0;}
.tsh-aip-cap-n{transition:opacity .25s ease;}
.tsh-aip-cap-track{display:flex;gap:6px;margin-top:14px;}
.tsh-aip-cap-track span{
  flex:1; height:3px; border-radius:3px; background:var(--line); overflow:hidden;
}
.tsh-aip-cap-track span i{display:block;height:100%;width:0;background:var(--brand-2);border-radius:3px;}

/* ---- the animated frame (sits inside the page's own .mw component) ------ */
.tsh-aip-screens{position:relative;height:560px;background:#fff;}
.tsh-aip-screen{
  position:absolute; inset:0; padding:20px 22px; overflow:hidden;
  display:flex; flex-direction:column;
  opacity:0; visibility:hidden; transform:translateY(10px) scale(.99);
  transition:opacity .45s ease,transform .45s cubic-bezier(.16,1,.3,1),visibility .45s;
}
.tsh-aip-screen.is-live{opacity:1;visibility:visible;transform:none;}

/* screen head, shared by phase 1 and phase 3 */
.tsh-aip-head{flex:none;display:flex;align-items:center;justify-content:space-between;gap:10px;padding-bottom:13px;border-bottom:1px solid #f1f5f9;margin-bottom:16px;}
.tsh-aip-head-t{font-size:15px;font-weight:600;color:var(--ink);letter-spacing:-.01em;}
.tsh-aip-biz{display:inline-flex;align-items:center;gap:8px;flex:none;border:1px solid #e5e7eb;border-radius:9px;padding:6px 10px;background:#fff;}
.tsh-aip-biz-av{width:20px;height:20px;border-radius:6px;background:var(--brand-grad);flex:none;}
.tsh-aip-biz-nm{font-size:12px;font-weight:600;color:var(--ink);}
.tsh-aip-biz svg{width:13px;height:13px;color:var(--ink-4);}

/* ---- phase 1: setup form ----------------------------------------------- */
.tsh-aip-lbl{font-size:12px;font-weight:600;color:var(--ink);margin-bottom:6px;display:flex;align-items:center;gap:8px;}
.tsh-aip-grp{margin-bottom:16px;}
.tsh-aip-ta{
  border:1px solid #e5e7eb; border-radius:10px; background:#fff;
  padding:11px 13px; font-size:12.5px; line-height:1.55; color:var(--ink);
  min-height:62px; transition:border-color .25s,box-shadow .25s;
}
.tsh-aip-ta.is-typing{border-color:var(--brand-2);box-shadow:0 0 0 3px rgba(11,116,255,.12);}
.tsh-aip-ta .caret{display:inline-block;width:1.5px;height:1em;background:var(--brand-2);vertical-align:-2px;margin-left:1px;opacity:0;}
.tsh-aip-ta.is-typing .caret{animation:tshAipCaret 1s steps(1) infinite;}
@keyframes tshAipCaret{0%,49%{opacity:1;}50%,100%{opacity:0;}}
.tsh-aip-ta .ph{color:var(--ink-4);}

.tsh-aip-drop{
  display:flex; align-items:center; gap:11px; margin-top:9px;
  padding:9px 12px; border:1px dashed var(--line-2); border-radius:10px;
  background:#fbfcfe; transition:border-color .3s,background .3s;
}
.tsh-aip-drop.is-hit{border-color:var(--brand-2);background:#f3f8ff;}
.tsh-aip-drop-ic{width:26px;height:26px;flex:none;display:flex;align-items:center;justify-content:center;color:var(--brand-2);}
.tsh-aip-drop-ic svg{width:17px;height:17px;}
.tsh-aip-drop-t{display:block;font-size:12px;font-weight:600;color:var(--ink);}

.tsh-aip-opts{display:flex;flex-direction:column;gap:7px;}
.tsh-aip-o{
  display:flex; align-items:center; gap:11px; padding:10px 13px;
  border:1px solid #e5e7eb; border-radius:11px; background:#fff;
  transition:border-color .28s,background .28s,box-shadow .28s;
}
.tsh-aip-o.sel{border-color:var(--brand-2);background:#eff6ff;box-shadow:0 0 0 3px rgba(11,116,255,.1);}
.tsh-aip-o-radio{width:17px;height:17px;border-radius:50%;border:2px solid var(--line-2);flex:none;display:flex;align-items:center;justify-content:center;transition:border-color .28s;}
.tsh-aip-o.sel .tsh-aip-o-radio{border-color:var(--brand-2);}
.tsh-aip-o-radio::after{content:'';width:8px;height:8px;border-radius:50%;background:var(--brand-2);transform:scale(0);transition:transform .28s cubic-bezier(.34,1.56,.64,1);}
.tsh-aip-o.sel .tsh-aip-o-radio::after{transform:scale(1);}
.tsh-aip-o-main{display:block;flex:1;min-width:0;}
.tsh-aip-o-nm{display:block;font-size:12.5px;font-weight:600;color:var(--ink);}
.tsh-aip-o-ds{display:block;font-size:11px;color:var(--ink-3);margin-top:1px;}

.tsh-aip-gen{
  width:100%; margin-top:auto; padding:11px; border-radius:10px;
  background:var(--brand-2); color:#fff; font-size:13.5px; font-weight:600;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  box-shadow:0 8px 20px -10px rgba(11,116,255,.7);
  transition:transform .18s,box-shadow .18s,background .18s;
}
.tsh-aip-gen svg{width:15px;height:15px;}
.tsh-aip-gen.is-press{transform:scale(.975);background:#0a63db;box-shadow:0 3px 10px -6px rgba(11,116,255,.7);}

/* ---- phase 2: generating ----------------------------------------------- */
.tsh-aip-run{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:6px;}
.tsh-aip-ring{width:56px;height:56px;border-radius:50%;border:3px solid #e8eef7;border-top-color:var(--brand-2);margin-bottom:18px;}
.tsh-aip-screen.is-live .tsh-aip-ring{animation:tshAipSpin .9s linear infinite;}
@keyframes tshAipSpin{to{transform:rotate(360deg);}}
.tsh-aip-run-t{font-size:19px;font-weight:600;letter-spacing:-.015em;color:var(--ink);}
.tsh-aip-run-s{font-size:13px;color:var(--ink-3);min-height:20px;}
.tsh-aip-bar{width:min(420px,86%);height:6px;border-radius:999px;background:var(--bg-3);overflow:hidden;margin-top:20px;}
.tsh-aip-bar i{display:block;height:100%;width:0;border-radius:999px;background:var(--brand-grad);}
.tsh-aip-run-note{font-size:11.5px;color:var(--ink-4);margin-top:14px;}

/* ---- phase 3: plan view ------------------------------------------------ */
.tsh-aip-plan{flex:1;min-height:0;display:grid;grid-template-columns:158px minmax(0,1fr);gap:14px;}
.tsh-aip-rail{background:#fbfcfe;border:1px solid #f1f5f9;border-radius:12px;padding:7px;overflow:hidden;}
.tsh-aip-rail-h{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-4);padding:6px 8px 8px;}
.tsh-aip-wk{
  padding:8px 10px; border-radius:9px; margin-bottom:3px;
  border-left:3px solid transparent; background:transparent;
  opacity:0; transform:translateX(-8px);
  transition:opacity .4s ease,transform .4s cubic-bezier(.16,1,.3,1),background .3s,border-color .3s;
}
.tsh-aip-wk.is-in{opacity:1;transform:none;}
.tsh-aip-wk.active{background:#eff6ff;border-left-color:var(--brand-2);}
.tsh-aip-wk-n{font-size:11.5px;font-weight:600;color:var(--ink);}
.tsh-aip-wk-r{font-size:10px;color:var(--ink-4);margin-top:1px;white-space:nowrap;}

/* bottom fade so the cut-off message list reads as intentional depth */
.tsh-aip-detail{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,#000 80%,transparent 100%);
          mask-image:linear-gradient(180deg,#000 80%,transparent 100%);
}
.tsh-aip-eyebrow-sm{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--brand-2);}
.tsh-aip-dt{font-size:16px;font-weight:600;letter-spacing:-.015em;color:var(--ink);margin:4px 0 12px;}
.tsh-aip-msg{
  background:#fff; border:1px solid #e5e7eb; border-radius:12px;
  padding:13px 15px; margin-bottom:10px;
  opacity:0; transform:translateY(10px);
  transition:opacity .45s ease,transform .45s cubic-bezier(.16,1,.3,1);
}
.tsh-aip-msg.is-in{opacity:1;transform:none;}
.tsh-aip-msg-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:10px;}
.tsh-aip-msg-when{display:block;min-width:0;}
.tsh-aip-msg-w{display:block;font-size:12.5px;font-weight:600;color:var(--ink);}
.tsh-aip-st{
  display:inline-flex; align-items:center; gap:4px; flex:none;
  font-size:9.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  padding:4px 9px; border-radius:8px; white-space:nowrap;
  background:var(--bg-3); color:var(--ink-3);
  transition:background .35s ease,color .35s ease;
}
.tsh-aip-st.s-sched{background:#eff6ff;color:#1d4ed8;}
.tsh-aip-bubble{background:#f5f7fa;border:1px solid #f1f5f9;border-radius:11px;padding:11px 13px;font-size:12.5px;line-height:1.55;color:#1e293b;}
.tsh-aip-acts{display:flex;gap:6px;margin-top:11px;flex-wrap:wrap;}
.tsh-aip-act{font-size:11.5px;font-weight:500;padding:6px 11px;border-radius:8px;border:1px solid #e5e7eb;background:#fff;color:var(--ink);display:inline-flex;align-items:center;gap:5px;}
.tsh-aip-act svg{width:12px;height:12px;}
.tsh-aip-act--p{background:var(--brand-2);border-color:var(--brand-2);color:#fff;}

/* =======================================================================
   STACKED LAYOUT (<1024px) — copy centres.

   Same breakpoint-split logic the page already applies to subheads
   (v3.18.6): flush left where the paragraph box is narrower than its
   container, centred where it fills the column. Above 1024px this is a
   two-column split and the copy is a left column, so it stays flush left.
   To centre at every breakpoint instead, delete the media query wrapper
   and keep the rules.
   ======================================================================= */
@media (max-width:1023px){
  .tsh-aip-copy{text-align:center;}
  .tsh-aip-eyebrow{justify-content:center;}
  .tsh-aip-headline{margin-left:auto;margin-right:auto;}
  .tsh-aip-sub{margin-left:auto;margin-right:auto;text-wrap:pretty;}
  /* .tsh-ticks already centres as a block via width:fit-content + auto
     margins, with justify-items:start keeping the checkmarks in one
     column — the v3.18.4 fix for the ragged left edge. Nothing to add. */
  .tsh-aip-cap-row{justify-content:center;}
}

/* =======================================================================
   NARROW SCREENS (<=560px)

   The page's house rule for mockups is documented at the .tsh-step-visual
   media query: marketing dashboards are product shots, so they keep their
   desktop composition, bleed past the right edge, and fade out. That rule
   is right for the Businesses list and Campaign Manager, because those
   screens have no narrow layout in the real app — a cropped desktop shot
   is the only honest thing to show.

   AI Promo is the exception, for two reasons:
     1. The real app DOES restack. qrn-dashboard.php has
        @media (max-width:900px){.qrn-aip-planbody{grid-template-columns:1fr;
        grid-template-rows:auto 1fr;}} — weeks above, detail below. So the
        stacked layout IS the product shot on a phone; cropping would show
        a screen no phone user ever sees.
     2. The payoff of the animation is the Draft -> Scheduled pill flip, and
        those pills sit on the right edge of each message card. Bleeding at
        720px puts them behind the fade and kills the punchline.

   So: restructure, don't crop. No bleed, no horizontal overflow.
   ======================================================================= */
@media (max-width:560px){
  .tsh-aip-screens{height:474px;}
  .tsh-aip-screen{padding:15px;}

  /* tighter screen head so the business picker doesn't crowd the title */
  .tsh-aip-head{padding-bottom:11px;margin-bottom:13px;}
  .tsh-aip-head-t{font-size:13.5px;}
  .tsh-aip-biz{padding:5px 8px;gap:6px;}
  .tsh-aip-biz-av{width:17px;height:17px;}
  .tsh-aip-biz-nm{font-size:11px;}

  /* PHASE 1 — drop the plan-length radios. Least load-bearing beat: the
     52-week claim is still carried by the phase 2 counter and the phase 3
     "Week 1 of 52" eyebrow. Buys ~190px, which is what keeps the Generate
     button on screen instead of clipped. */
  .tsh-aip-narrow-hide{display:none;}
  .tsh-aip-ta{min-height:56px;font-size:12px;}

  /* PHASE 3 — stack, mirroring the app's own <=900px behaviour. The week
     rail becomes a horizontal strip so it costs ~64px instead of the 220px
     the app allows itself; message cards then run full width. */
  .tsh-aip-plan{display:flex;flex-direction:column;gap:11px;}
  .tsh-aip-rail-h{display:none;}
  .tsh-aip-rail{
    flex:none; display:flex; gap:6px; padding:6px;
    overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch;
  }
  .tsh-aip-rail::-webkit-scrollbar{display:none;}
  /* stripe stays on the LEFT edge, same as desktop and the real app —
     only the strip direction changes, not the active treatment */
  .tsh-aip-wk{
    flex:0 0 auto; margin:0; padding:7px 11px;
    border-radius:8px;
    transform:translateY(-7px);           /* drops in from above, not the side */
  }
  .tsh-aip-wk.is-in{transform:none;}
  .tsh-aip-wk-n{font-size:11px;}
  .tsh-aip-wk-r{font-size:9.5px;}
  .tsh-aip-detail{
    flex:1; min-height:0;
    /* fade starts later — at this height the first card nearly fills the
       column and an 80% mask would eat its own action row */
    -webkit-mask-image:linear-gradient(180deg,#000 88%,transparent 100%);
            mask-image:linear-gradient(180deg,#000 88%,transparent 100%);
  }
  .tsh-aip-bubble{font-size:12px;}

  /* caption */
  .tsh-aip-cap{margin-top:16px;}
  .tsh-aip-cap-n{font-size:18px;}
  .tsh-aip-cap-t{font-size:14.5px;}
  .tsh-aip-cap-track{margin-top:12px;}
}

/* ---- reduced motion: JS parks on phase 3, kill the loops ---------------- */
@media (prefers-reduced-motion:reduce){
  .tsh-aip-screen,.tsh-aip-msg,.tsh-aip-wk{transition:none;}
  .tsh-aip-ring,.tsh-aip-incl .twinkle,.tsh-aip-ta.is-typing .caret{animation:none;}
}

/* === AGENCY / WHITE-LABEL ============================================== */
.tsh-agency {
  background: white;
  padding: clamp(3rem, 7vw, 5rem) clamp(1.25rem, 4vw, 2rem);
  position: relative; overflow: hidden;
}
.tsh-agency::before {
  content: ''; position: absolute;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 1000px; height: 600px;
  background: none;
  pointer-events: none; z-index: 0;
}
.tsh-agency-inner {
  max-width: 1240px; margin: 0 auto;
  position: relative; z-index: 1;
  display: grid; gap: clamp(2.5rem, 4vw, 3.5rem); align-items: center;
}
/* v3.18.4: header centring hoisted OUT of the 1024px query. Below 1024px
   section 05 was the only section on the page with a left-aligned kicker /
   headline / sub — every other *-intro sets text-align:center with no
   breakpoint. CTAs centred to match the hero. The 36px bottom margin stays
   in the desktop query: at mobile .tsh-agency-inner's grid gap already
   supplies the spacing, and stacking 36px on top opened a ~76px hole.
   .tsh-agency-feats stays LEFT-aligned — long wrapping lines read better
   ragged-right, same as the how-it-works step copy. */
.tsh-agency-copy { text-align: center; max-width: 720px; margin-left: auto; margin-right: auto; }
.tsh-agency-copy .tsh-kicker { justify-content: center; }
.tsh-agency-headline { margin-left: auto; margin-right: auto; }
.tsh-agency-sub { margin-left: auto; margin-right: auto; }
.tsh-agency-ctas { justify-content: center; }

/* v3.13: Section 05 stacked at desktop (was 2-col 1fr 1.1fr) — mockup now
   gets the full container width instead of being squeezed into ~590px. */
@media (min-width: 1024px) {
  .tsh-agency-inner { gap: 0; align-items: stretch; }
  .tsh-agency-copy { margin-bottom: 36px; }
  .tsh-agency-feats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px 32px;
    max-width: 960px;
    margin: 0 auto 36px;
  }
  .tsh-agency-ctas { margin-bottom: 56px; }
}

.tsh-agency-headline {
  font-size: clamp(2rem, 4.5vw, 3.25rem);
  font-weight: 800; letter-spacing: -0.03em;
  line-height: 1.05; margin-bottom: 18px;
}
.tsh-agency-sub {
  font-size: clamp(1rem, 1.3vw, 1.1rem);
  color: var(--ink-3); max-width: 52ch;
  line-height: 1.55; margin-bottom: 26px;
}
.tsh-agency-sub strong { color: var(--ink-2); font-weight: 600; }

.tsh-agency-feats {
  list-style: none; display: flex;
  flex-direction: column; gap: 12px; margin-bottom: 30px;
}
.tsh-agency-feats li {
  display: flex; align-items: flex-start; gap: 12px;
  font-size: 14.5px; color: var(--ink-2); line-height: 1.5;
}
.tsh-agency-feats svg {
  width: 20px; height: 20px; flex-shrink: 0;
  color: var(--brand-2); margin-top: 1px;
}
.tsh-agency-feats strong { color: var(--ink); font-weight: 700; }
.tsh-agency-ctas { display: flex; flex-wrap: wrap; gap: 12px; }

.tsh-fleet {
  background: #0f172a; border-radius: 20px;
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  box-shadow:
    0 40px 80px -20px rgba(15, 23, 42, 0.35),
    0 20px 40px -20px rgba(11, 92, 255, 0.25);
  position: relative; overflow: hidden;
}
.tsh-fleet::before {
  content: ''; position: absolute;
  top: 0; left: 0; right: 0; height: 120px;
  background: none;
  pointer-events: none;
}
.tsh-fleet-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 18px; padding-bottom: 14px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  position: relative;
}
.tsh-fleet-brand { display: flex; align-items: center; gap: 10px; }
.tsh-fleet-logo {
  width: 28px; height: 28px; border-radius: 7px;
  background: var(--brand-grad);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800; color: white;
}
.tsh-fleet-title { font-size: 13px; font-weight: 700; color: white; letter-spacing: -0.01em; }
.tsh-fleet-title span { color: var(--ink-4); font-weight: 500; margin-left: 6px; }
.tsh-fleet-count {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
  font-size: 11px; font-weight: 600;
  padding: 4px 10px; border-radius: 9999px;
}
.tsh-fleet-count::before {
  content: ''; width: 6px; height: 6px;
  background: #34d399; border-radius: 50%;
}
.tsh-fleet-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@media (min-width: 500px) { .tsh-fleet-grid { grid-template-columns: 1fr 1fr 1fr; } }

.tsh-fleet-client {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px; padding: 11px 12px;
  display: flex; flex-direction: column; gap: 6px;
  transition: background 200ms, border-color 200ms;
}
.tsh-fleet-client:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.12);
}
.tsh-fleet-client-head { display: flex; align-items: center; gap: 8px; }
.tsh-fleet-client-avatar {
  width: 22px; height: 22px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  color: white; font-size: 11px; font-weight: 800; flex-shrink: 0;
}
.tsh-fleet-client-name {
  font-size: 12px; font-weight: 600; color: white;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tsh-fleet-client-meta {
  font-size: 10px; color: var(--ink-4);
  font-variant-numeric: tabular-nums;
  display: flex; justify-content: space-between; gap: 6px;
}
.tsh-fleet-client-meta strong { color: #93c5fd; font-weight: 600; }

.tsh-fleet-client .av-a { background: #0b74ff; }
.tsh-fleet-client .av-b { background: #ea580c; }
.tsh-fleet-client .av-c { background: #059669; }
.tsh-fleet-client .av-d { background: #7e22ce; }
.tsh-fleet-client .av-e { background: #db2777; }
.tsh-fleet-client .av-f { background: #ca8a04; }
.tsh-fleet-client .av-g { background: #0891b2; }
.tsh-fleet-client .av-h { background: #dc2626; }
.tsh-fleet-client .av-i { background: #475569; }

/* ====================================================================
   NEW SECTION STYLES — eyebrow dot, hero ticks,
   problem cards, dark comparison table
==================================================================== */

/* Hero eyebrow refresh — green status dot */
.tsh-eyebrow-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.18);
  flex: none;
}

/* Hero green-check ticks (replaces old tsh-trust line) */
.tsh-ticks {
  list-style: none; padding: 0;
  /* v3.18.4: was margin:28px 0 0 + justify-items:center, which centred each
     <li> individually — three different label lengths meant three different
     checkmark x-positions. Now the <ul> centres as a block (fit-content +
     auto margins) and the items align left inside it, so the checkmarks
     stack in one column. max-width:100% keeps a long label wrapping instead
     of overflowing on a 320px viewport. */
  margin: 28px auto 0;
  width: fit-content;
  max-width: 100%;
  display: grid; gap: 10px 24px;
  grid-template-columns: 1fr;
  justify-items: start;
  animation: tshFadeUp 800ms 280ms ease-out both;
}
/* v3.14: ticks centered horizontal row at desktop */
@media (min-width: 1024px) {
  .tsh-ticks {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px 28px;
  }
}
.tsh-ticks li {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 14px; font-weight: 500;
  color: var(--ink-2);
}
.tsh-tick-icon {
  width: 18px; height: 18px;
  flex: none;
  color: var(--green);
  background: rgba(16, 185, 129, 0.12);
  border-radius: 50%;
  padding: 3px;
  box-sizing: border-box;
}

/* v3.23.1: the switching strip used to mark where the hero ends (on phones the hero
   mockup bleeds to the hero's bottom edge). A hairline and a shorter top keep that seam. */
.tsh-hero + .tsh-problem { border-top: 1px solid var(--bg-3); padding-top: clamp(3.5rem, 8vw, 6rem); }

/* ============ PROBLEM section ============ */
.tsh-problem {
  padding: clamp(4rem, 9vw, 7rem) 24px;
  background: #fff;
  position: relative;
}
.tsh-problem::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 220px;
  background: none;
  pointer-events: none;
}
.tsh-problem-inner { max-width: 1240px; margin: 0 auto; position: relative; }
.tsh-problem-intro { text-align: center; margin-bottom: clamp(2.5rem, 5vw, 3.5rem); }
.tsh-problem-headline {
  font-size: clamp(2rem, 4.5vw, 3.25rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  /* v3.14.4: 1.35 still tight on iOS Safari. Bumped to 1.45 in concert with
     .tsh-grad padding-bottom and transform: translateZ(0) for guaranteed
     descender clearance. */
  line-height: 1.45;
  color: var(--ink);
  margin: 16px auto 18px;
  max-width: 22ch;
}
.tsh-problem-sub {
  font-size: clamp(1rem, 1.4vw, 1.125rem);
  color: var(--ink-3);
  max-width: 60ch;
  margin: 0 auto;
  line-height: 1.6;
}

.tsh-problem-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
@media (min-width: 760px) { .tsh-problem-grid { grid-template-columns: 1fr 1fr 1fr; gap: 24px; } }
.tsh-problem-card {
  background: #fff;
  border: 1px solid var(--bg-3);
  border-radius: 16px;
  padding: 28px 26px;
  box-shadow: 0 1px 3px rgba(0,0,0,.04), 0 4px 14px rgba(0,0,0,.025);
  transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}
.tsh-problem-card:hover {
  transform: translateY(-2px);
  border-color: rgba(11, 92, 255, 0.18);
  box-shadow: 0 4px 12px rgba(0,0,0,.05), 0 12px 32px -6px rgba(11, 92, 255, 0.12);
}
.tsh-problem-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: rgba(11, 92, 255, 0.08);
  color: var(--brand-2);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
}
.tsh-problem-icon svg { width: 22px; height: 22px; }
.tsh-problem-title {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 10px;
}
.tsh-problem-desc {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-3);
  margin: 0;
}

/* ============ COMPARISON TABLE — dark BG ============ */
.tsh-compare {
  padding: clamp(4.5rem, 9vw, 7rem) 24px;
  background: #0b1220;
  color: #e2e8f0;
  position: relative;
  overflow: hidden;
}
.tsh-compare-glow {
  position: absolute;
  inset: -10% -5% auto -5%;
  height: 80%;
  background: none;
  pointer-events: none;
  z-index: 0;
}
.tsh-compare-inner {
  max-width: 1100px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
.tsh-compare-intro {
  text-align: center;
  margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
}

/* Dark variant of kicker */
.tsh-kicker.is-dark {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #cbd5e1;
}
.tsh-kicker.is-dark .tsh-kicker-num { color: #fff; }

.tsh-compare-headline {
  font-size: clamp(2rem, 4.5vw, 3.25rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.08;
  color: #fff;
  margin: 16px auto 18px;
  max-width: 22ch;
}
.tsh-grad-light {
  background: #8db2ff;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.tsh-compare-sub {
  font-size: clamp(1rem, 1.4vw, 1.125rem);
  color: #94a3b8;
  max-width: 60ch;
  margin: 0 auto;
  line-height: 1.6;
}

.tsh-compare-table-wrap {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  overflow: hidden;
}
.tsh-compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}
.tsh-compare-table thead th {
  text-align: left;
  padding: 18px 24px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #94a3b8;
  background: rgba(255, 255, 255, 0.02);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.tsh-compare-table tbody th {
  text-align: left;
  padding: 22px 24px;
  font-weight: 700;
  font-size: 15px;
  color: #fff;
  letter-spacing: -0.005em;
  vertical-align: middle;
  width: 28%;
  background: rgba(255, 255, 255, 0.015);
}
.tsh-compare-table tbody td {
  padding: 22px 24px;
  font-size: 14.5px;
  line-height: 1.5;
  vertical-align: middle;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.tsh-compare-table tbody tr:first-child th,
.tsh-compare-table tbody tr:first-child td { border-top: none; }
.tsh-compare-bad { color: #f9a8a8; font-weight: 600; }
.tsh-compare-good { color: #86efac; font-weight: 600; }

@media (max-width: 720px) {
  .tsh-compare-table thead { display: none; }
  .tsh-compare-table tbody tr {
    display: grid;
    grid-template-columns: 1fr;
    padding: 18px 18px 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }
  .tsh-compare-table tbody tr:first-child { border-top: none; }
  .tsh-compare-table tbody th,
  .tsh-compare-table tbody td {
    padding: 6px 0;
    border: none;
    width: auto;
    background: transparent;
  }
  .tsh-compare-table tbody td::before {
    content: attr(data-label);
    display: block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #64748b;
    margin-bottom: 2px;
  }
  /* v3.20.6 — these two never rendered. The rule above is
     ".tsh-compare-table tbody td::before" = (0,1,2); these were
     ".tsh-compare-bad::before" = (0,1,0), so the generic
     content: attr(data-label) won — and no <td> carries a data-label, so it
     resolved to an empty string. Re-scoped to (0,2,2) to win without adding
     attributes to the markup. */
  .tsh-compare-table tbody td.tsh-compare-bad::before  { content: "Bundled platforms"; }
  .tsh-compare-table tbody td.tsh-compare-good::before { content: "TextScaleHQ"; }

  /* v3.20.6 — colour alone was carrying the them/us distinction once the
     thead is hidden. Accent rail gives the stacked cells a column edge to
     read against. */
  .tsh-compare-table tbody td {
    padding-left: 12px;
    border-left: 2px solid rgba(255, 255, 255, 0.10);
  }
  .tsh-compare-table tbody td.tsh-compare-bad  { border-left-color: rgba(249, 168, 168, 0.40); }
  .tsh-compare-table tbody td.tsh-compare-good { border-left-color: rgba(134, 239, 172, 0.55); }
}

/* ==========================================================================
   V3 PORT — vertical timeline, dashboard mockups, industry icons,
   trust strip, mobile horizontal scroll
========================================================================== */

/* === Shared mac window chrome ============================================= */
.mw {
  background: #fff;
  border-radius: 14px;
  border: 1px solid var(--bg-3);
  box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 24px 60px -20px rgba(15, 23, 42, 0.18), 0 8px 24px -8px rgba(15, 23, 42, 0.08);
  overflow: hidden;
  position: relative;
}
.mw-titlebar {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px;
  background: #f6f7f9;
  border-bottom: 1px solid var(--bg-3);
}
.mw-dots { display: flex; gap: 6px; flex: none; }
.mw-dot { width: 11px; height: 11px; border-radius: 50%; display: block; }
.mw-dot.red    { background: #ff5f57; }
.mw-dot.yellow { background: #febc2e; }
.mw-dot.green  { background: #28c840; }
.mw-url {
  flex: 1;
  text-align: center;
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-3);
  font-feature-settings: 'tnum';
  background: #fff;
  border: 1px solid var(--bg-3);
  border-radius: 5px;
  padding: 3px 10px;
  max-width: 280px;
  margin: 0 auto;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.mw-body {
  display: grid;
  grid-template-columns: 168px 1fr;
  background: var(--bg-2);
  min-height: 360px;
}

/* === Reusable sidebar nav inside mockups ================================= */
.mn-side {
  background: #fff;
  padding: 18px 12px 18px 14px;
  border-right: 1px solid var(--bg-3);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mn-brand {
  display: flex; align-items: center; gap: 9px;
  padding: 4px 6px 14px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--bg-3);
}
.mn-brand-logo {
  width: 28px; height: 28px;
  border-radius: 8px;
  background: var(--brand-grad);
  display: flex; align-items: center; justify-content: center;
  flex: none;
  box-shadow: 0 4px 10px -2px rgba(11, 92, 255, 0.4);
}
.mn-brand-logo svg { width: 16px; height: 16px; color: #fff; }
.mn-brand-name {
  font-size: 13px; font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.mn-brand-sub {
  font-size: 9px;
  font-weight: 500;
  color: var(--ink-3);
  letter-spacing: 0.04em;
  margin-top: 1px;
}
.mn-nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px;
  border-radius: 7px;
  font-size: 12px; font-weight: 500;
  color: var(--ink-2);
  cursor: default;
  text-decoration: none;
  transition: background 120ms;
}
.mn-nav-item svg { width: 14px; height: 14px; flex: none; color: var(--ink-3); }
.mn-nav-item.is-active {
  background: rgba(11, 92, 255, 0.08);
  color: var(--brand-2);
  font-weight: 600;
}
.mn-nav-item.is-active svg { color: var(--brand-2); }
.mn-nav-divider { height: 1px; background: var(--bg-3); margin: 8px 4px; }

.mn-main {
  padding: 18px 22px 22px;
  background: var(--bg-2);
  overflow: hidden;
}

/* === Create Business modal mockup (Step 01) =============================== */
.cb-mw .mw-body {
  display: block;
  background: #eef1f5;
  padding: 36px 24px;
  min-height: 300px;
}

/* === Import Contacts modal mockup (Step 03) =============================== */
.ic-mw .mw-body {
  display: block;
  background: #eef1f5;
  padding: 28px 22px;
  min-height: 340px;
}

/* === MULTI-BUSINESS — replace fleet visual with dashboard mockup ========= */
/* The new dashboard mockup uses .mw + .mn-* shared utilities defined above.
   We just need to drop the old fleet visual and make sure the column sizing
   still works on the multi-business section. */
.tsh-fleet-as-mockup {
  position: relative;
}
.tsh-fleet-as-mockup::before {
  content: ""; position: absolute;
  inset: 5% -5% -5% -5%;
  background: none;
  filter: blur(32px);
  pointer-events: none; z-index: 0;
}
.tsh-fleet-as-mockup > * { position: relative; z-index: 1; }

/* Mobile: Linear-style overflow clip (let mockup keep natural width, fade right edge) */
@media (max-width: 760px) {
  .tsh-fleet-as-mockup {
    overflow: hidden;
    /* v3.18.4: was -24px, but the section pads at clamp(1.25rem,4vw,2rem)
       which bottoms out at 20px on phones — 4px of overshoot past the
       viewport, silently clipped by body{overflow-x:hidden}. Matches the
       how-it-works step visual, which already used -1.25rem. */
    margin-right: -1.25rem; /* extend to viewport right edge */
    border-radius: 14px 0 0 14px;
  }
  .tsh-fleet-as-mockup::before {
    display: none; /* underglow gets clipped, drop it on mobile */
  }
  .tsh-fleet-as-mockup .mw {
    width: 720px;
    max-width: none;
    border-radius: 14px 0 0 14px;
    border-right: none;
  }
  .tsh-fleet-as-mockup::after {
    content: "";
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 64px;
    background: linear-gradient(to right, rgba(248, 250, 252, 0) 0%, var(--bg-2) 80%);
    pointer-events: none;
    z-index: 3;
  }

  /* === Collapsed icon-only sidebar on mobile (Linear/Notion pattern) === */
  .tsh-fleet-as-mockup .mw-body {
    grid-template-columns: 52px 1fr;
  }
  .tsh-fleet-as-mockup .mn-side {
    padding: 14px 6px;
  }
  .tsh-fleet-as-mockup .mn-brand {
    justify-content: center;
    padding: 4px 0 12px;
    gap: 0;
  }
  .tsh-fleet-as-mockup .mn-brand-text { display: none; }
  .tsh-fleet-as-mockup .mn-nav-item {
    justify-content: center;
    padding: 9px 6px;
    gap: 0;
  }
  .tsh-fleet-as-mockup .mn-nav-label { display: none; }
  .tsh-fleet-as-mockup .mn-nav-divider { margin: 8px 4px; }

  /* Slightly tighten main content padding so more fits in the visible area */
  .tsh-fleet-as-mockup .mn-main {
    padding: 16px 18px 18px;
  }
}

/* === MOBILE HORIZONTAL SCROLL — Use cases & Pricing ===================== */
@media (max-width: 760px) {
  /* Pricing scroll on mobile, keeping the same plan cards */
  .tsh-pricing-grid {
    display: flex !important;
    grid-template-columns: none !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 16px;
    /* v3.18.4 bleed fix: padding cancels the negative margin so card
       alignment is unchanged; this only removes the 4px per-side overshoot.
       (Was shared with .tsh-cases-grid, removed in v3.19.0.) */
    padding: 18px 1.25rem 16px;
    margin: 0 -1.25rem;
    scrollbar-width: none;
    scroll-padding: 1.25rem;
  }
  .tsh-pricing-grid::-webkit-scrollbar { display: none; }
  .tsh-plan {
    scroll-snap-align: start;
    flex: 0 0 calc(100vw - 64px);
    max-width: 320px;
  }
}

/* ==========================================================================
   HERO MOCKUP v3.14 — Stacked layout, phone + dashboard, iPhone Lock Screen
   Composition: iPhone with cycling SMS notifications (front-left) + full
   dashboard view behind. Mobile: dashboard extends past right edge (clean
   clip, no fade). Desktop: stacked centered, dashboard fully visible.
========================================================================== */

.heroD-stage {
  position: relative;
  width: 100%;
  height: 600px;
  isolation: isolate;
}
.heroD-stage::before {
  content: ""; position: absolute;
  inset: 8% -10% -5% -10%;
  background: none;
  filter: blur(28px);
  pointer-events: none; z-index: 0;
}

/* Dashboard board */
.heroD-board-wrap {
  position: absolute;
  top: 18px;
  left: 130px;
  right: -260px;
  z-index: 1;
}
.heroD-board {
  background: #fff;
  border-radius: 14px 0 0 14px;
  border: 1px solid var(--bg-3);
  border-right: none;
  box-shadow:
    0 1px 2px rgba(0,0,0,0.04),
    0 24px 56px -18px rgba(15, 23, 42, 0.18),
    0 10px 26px -10px rgba(15, 23, 42, 0.10);
  overflow: hidden;
  position: relative;
}
.heroD-board-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px;
  background: #f6f7f9;
  border-bottom: 1px solid var(--bg-3);
}
.heroD-dots { display: flex; gap: 6px; flex: none; }
.heroD-dot { width: 11px; height: 11px; border-radius: 50%; display: block; }
.heroD-dot.red    { background: #ff5f57; }
.heroD-dot.yellow { background: #febc2e; }
.heroD-dot.green  { background: #28c840; }
.heroD-url {
  flex: 1; text-align: center;
  font-size: 11px; font-weight: 500;
  color: var(--ink-3); font-feature-settings: 'tnum';
  background: #fff; border: 1px solid var(--bg-3);
  border-radius: 5px; padding: 3px 10px;
  max-width: 280px; margin: 0 auto;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.heroD-board-body {
  display: grid;
  grid-template-columns: 52px 1fr;
  background: var(--bg-2);
  min-height: 560px;
}

/* Sidebar — icon-only on mobile */
.heroD-side {
  background: #fff;
  padding: 14px 6px;
  border-right: 1px solid var(--bg-3);
  display: flex; flex-direction: column; gap: 4px;
}
.heroD-brand {
  display: flex; align-items: center; justify-content: center;
  padding: 4px 0 12px; margin-bottom: 6px;
  border-bottom: 1px solid var(--bg-3);
  gap: 0;
}
.heroD-brand-logo {
  width: 28px; height: 28px; border-radius: 8px;
  background: var(--brand-grad);
  display: flex; align-items: center; justify-content: center;
  flex: none;
  box-shadow: 0 4px 10px -2px rgba(11, 92, 255, 0.4);
}
.heroD-brand-logo svg { width: 16px; height: 16px; color: #fff; }
.heroD-brand-text { display: none; }
.heroD-brand-name { font-size: 13px; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); }
.heroD-brand-sub { font-size: 9px; font-weight: 500; color: var(--ink-3); letter-spacing: 0.04em; margin-top: 1px; }
.heroD-nav-item {
  display: flex; align-items: center; justify-content: center;
  padding: 9px 6px; gap: 0;
  border-radius: 7px;
  font-size: 12px; font-weight: 500;
  color: var(--ink-2);
  cursor: default; text-decoration: none;
}
.heroD-nav-item svg { width: 14px; height: 14px; flex: none; color: var(--ink-3); }
.heroD-nav-item span { display: none; }
.heroD-nav-item.is-active { background: rgba(11, 92, 255, 0.08); color: var(--brand-2); font-weight: 600; }
.heroD-nav-item.is-active svg { color: var(--brand-2); }
.heroD-nav-divider { height: 1px; background: var(--bg-3); margin: 8px 4px; }

/* Main */
.heroD-main { padding: 14px 16px 16px; background: var(--bg-2); min-width: 0; }
@keyframes heroD-wave {
  0%, 60%, 100% { transform: rotate(0deg); }
  10% { transform: rotate(14deg); } 20% { transform: rotate(-8deg); }
  30% { transform: rotate(14deg); } 40% { transform: rotate(-4deg); } 50% { transform: rotate(10deg); }
}

/* Active campaigns */
@keyframes heroD-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.45; transform: scale(0.85); }
}

/* Phone — iPhone Lock Screen style */
.heroD-phone {
  position: absolute;
  left: 0;
  top: 50px;
  width: 168px;
  aspect-ratio: 9 / 19;
  background: #0b1220;
  border-radius: 28px;
  padding: 6px;
  box-shadow:
    0 2px 4px rgba(0,0,0,0.08),
    0 24px 50px -14px rgba(15, 23, 42, 0.40),
    0 10px 24px -8px rgba(11, 92, 255, 0.18);
  z-index: 3;
  transform: rotate(-2deg);
  animation: heroD-phone-float 5s ease-in-out infinite;
}
@keyframes heroD-phone-float {
  0%, 100% { transform: rotate(-2deg) translateY(0); }
  50%      { transform: rotate(-2deg) translateY(-4px); }
}
.heroD-phone-screen {
  background: #8f9cb0;
  border-radius: 22px;
  height: 100%;
  display: flex; flex-direction: column;
  padding: 28px 9px 18px;
  position: relative;
  overflow: hidden;
}
.heroD-phone-notch {
  position: absolute;
  top: 7px; left: 50%; transform: translateX(-50%);
  width: 58px; height: 17px;
  background: #0b1220;
  border-radius: 9999px;
  z-index: 2;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}
.heroD-phone-status {
  position: absolute;
  top: 10px; left: 14px; right: 14px;
  display: flex; justify-content: space-between;
  font-size: 8px; font-weight: 700;
  color: #fff;
  font-feature-settings: 'tnum';
  z-index: 1;
  pointer-events: none;
  text-shadow: 0 1px 1px rgba(0,0,0,0.05);
}
.heroD-phone-status .signal svg { width: 8px; height: 8px; }
.heroD-phone-clock {
  text-align: center;
  margin-top: 6px;
  margin-bottom: 14px;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.08);
}
.heroD-phone-clock-date { font-size: 9px; font-weight: 600; letter-spacing: 0.01em; opacity: 0.95; margin-bottom: 1px; }
.heroD-phone-clock-time { font-size: 44px; font-weight: 200; line-height: 0.92; letter-spacing: -0.04em; font-feature-settings: 'tnum'; }
.heroD-phone-home {
  position: absolute;
  bottom: 6px; left: 50%; transform: translateX(-50%);
  width: 45%; height: 3px;
  background: #fff;
  border-radius: 99px;
  opacity: 0.85;
}
.heroD-phone-stack { position: relative; flex: 1; padding: 0 6px; }
.heroD-bubble {
  position: absolute;
  inset: 0 6px auto 6px;
  opacity: 0;
  animation: heroD-notif-cycle 12s cubic-bezier(0.34, 1.32, 0.64, 1) infinite;
}
.heroD-bubble:nth-child(1) { animation-delay: 0s; }
.heroD-bubble:nth-child(2) { animation-delay: 4s; }
.heroD-bubble:nth-child(3) { animation-delay: 8s; }
@keyframes heroD-notif-cycle {
  0%                  { opacity: 0; transform: translateY(-14px) scale(0.94); }
  4%                  { opacity: 1; transform: translateY(0) scale(1); }
  30%                 { opacity: 1; transform: translateY(0) scale(1); }
  34%, 100%           { opacity: 0; transform: translateY(-8px) scale(0.97); }
}
.heroD-notif {
  background: rgba(255, 255, 255, 0.78);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  border: 0.5px solid rgba(255, 255, 255, 0.5);
  border-radius: 14px;
  padding: 7px 8px 7px 7px;
  display: flex; gap: 6px;
  align-items: flex-start;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 4px 12px rgba(0, 0, 0, 0.08);
}
.heroD-notif-icon {
  width: 22px; height: 22px;
  border-radius: 6px;
  background: #34c759;
  display: flex; align-items: center; justify-content: center;
  flex: none;
  box-shadow: 0 1px 2px rgba(0,0,0,0.10);
}
.heroD-notif-icon svg { width: 13px; height: 13px; color: white; }
.heroD-notif-body { flex: 1; min-width: 0; }
.heroD-notif-head { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; margin-bottom: 1px; }
.heroD-notif-app { font-size: 8.5px; font-weight: 700; color: rgba(0,0,0,0.85); letter-spacing: -0.01em; }
.heroD-notif-time { font-size: 7.5px; font-weight: 500; color: rgba(0,0,0,0.45); }
.heroD-notif-text { font-size: 9px; line-height: 1.32; color: rgba(0,0,0,0.85); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.heroD-notif-text strong { font-weight: 700; color: #000; }

/* ============================================================================
   DESKTOP — stacked layout, mockup fully visible, bigger composition
   ============================================================================ */
@media (min-width: 1000px) {
  .heroD-stage {
    /* v3.14.3: bumped 780→860 + reduced negative margin-bottom from -40 to -10
       so the bottom of the Active campaigns card isn't covered by the next
       section's background. Previous values left Lakeside Pizza row clipped
       at certain viewports. */
    height: 860px;
    margin-bottom: -10px;
  }
  .heroD-stage::before {
    inset: 8% 5% -5% 5%;
    background: none;
  }

  /* Dashboard: fully visible at desktop, no overflow */
  .heroD-board-wrap {
    top: 30px;
    left: 240px;
    right: 0;
  }
  .heroD-board {
    border-radius: 16px;
    border: 1px solid var(--bg-3);
    border-right: 1px solid var(--bg-3);
  }
  .heroD-board-body {
    grid-template-columns: 196px 1fr;
    min-height: 720px;
  }

  /* Sidebar: full labels on desktop */
  .heroD-side { padding: 18px 12px 18px 14px; }
  .heroD-brand { justify-content: flex-start; padding: 4px 6px 14px; gap: 10px; }
  .heroD-brand-text { display: block; }
  .heroD-brand-name { font-size: 14px; }
  .heroD-brand-sub { font-size: 10px; }
  .heroD-nav-item { justify-content: flex-start; padding: 9px 11px; gap: 11px; font-size: 13px; }
  .heroD-nav-item svg { width: 16px; height: 16px; }
  .heroD-nav-item span { display: inline; }
  .heroD-nav-divider { margin: 10px 4px; }

  /* Main content scales up */
  .heroD-main { padding: 22px 26px 26px; }

  /* Phone: bigger, more presence */
  .heroD-phone {
    width: 260px;
    top: 70px;
    left: 0;
    border-radius: 36px;
    padding: 7px;
    box-shadow:
      0 2px 4px rgba(0,0,0,0.08),
      0 36px 70px -16px rgba(15, 23, 42, 0.40),
      0 14px 32px -8px rgba(11, 92, 255, 0.18);
  }
  .heroD-phone-screen { padding: 38px 12px 22px; border-radius: 30px; }
  .heroD-phone-notch { width: 78px; height: 22px; top: 10px; }
  .heroD-phone-status { top: 14px; left: 22px; right: 22px; font-size: 11px; }
  .heroD-phone-status .signal svg { width: 11px; height: 11px; }
  .heroD-phone-clock { margin-top: 12px; margin-bottom: 22px; }
  .heroD-phone-clock-date { font-size: 13px; }
  .heroD-phone-clock-time { font-size: 68px; }
  .heroD-phone-home { bottom: 8px; height: 4px; }
  .heroD-phone-stack { padding: 0 9px; }
  .heroD-bubble { inset: 0 9px auto 9px; }
  .heroD-notif { padding: 10px 12px 10px 10px; border-radius: 18px; gap: 9px; }
  .heroD-notif-icon { width: 32px; height: 32px; border-radius: 8px; }
  .heroD-notif-icon svg { width: 18px; height: 18px; }
  .heroD-notif-app { font-size: 12px; }
  .heroD-notif-time { font-size: 10.5px; }
  .heroD-notif-text { font-size: 12.5px; line-height: 1.35; }
}

/* ============================================================================
   v3.18.6 — SECTION SUBHEAD PARAGRAPHS: ALIGNMENT SPLIT AT 700px
   ----------------------------------------------------------------------------
   The 8 section subheads all sit inside centred intro blocks and inherit
   text-align:center. Whether flush-left is an improvement depends entirely
   on whether the paragraph box is narrower than its container:

     >=700px  box is capped at 48-60ch (~456-480px) inside a much wider
              container, so margin:0 auto centres the BOX and flush-left
              lines sit inside a visibly centred column. Centred AND
              aligned at the same time. -> text-align:left

     <700px   the container is already narrower than the 48-60ch cap
              (~353px at 393pt), so the box fills the column edge to edge
              and there is no space left for auto margins to centre it.
              Flush-left lines under a centred kicker + headline read as a
              mismatch. -> stay centred

   Centred text cannot have aligned edges — centring gives each line equal
   space on both sides, so a short line is inset on both. text-wrap:balance
   does not change that; it equalises the LINE LENGTHS so the rag is shallow
   and symmetric rather than random. It degrades to plain centred text where
   unsupported or past Chromium's line cap, so there is no layout risk.

   True edge alignment on phones would need text-align:justify +
   text-align-last:center (+ hyphens:auto). Rejected: a ~40-character column
   is too narrow to justify cleanly.

   To revert the whole decision: delete this block. Nothing else in the
   stylesheet sets text-align on any of these selectors.
   ========================================================================= */
@media (min-width: 700px) {
  .tsh-subhead,        /* hero */
  .tsh-problem-sub,    /* 01 the problem */
  .tsh-how-sub,        /* 02 how it works */
  .tsh-calc-sub,       /* 03 cost calculator */
  /* 04 is AI Promo now — .tsh-aip-sub sets its own alignment */
  .tsh-agency-sub,     /* 05 multi-business */
  .tsh-compare-sub,    /* 06 why textscalehq */
  .tsh-pricing-sub {   /* 07 pricing */
    text-align: left;
  }
}
@media (max-width: 699px) {
  .tsh-subhead,
  .tsh-problem-sub,
  .tsh-how-sub,
  .tsh-calc-sub,
  /* 04 is AI Promo now — .tsh-aip-sub sets its own alignment */
  .tsh-agency-sub,
  .tsh-compare-sub,
  .tsh-pricing-sub {
    text-wrap: balance;
  }
}

/* ==========================================================================
   v3.22.0 — PRODUCT MOCKUPS IN THE APP'S OWN LOOK (qrn-dashboard 0.99.18)
   Every mockup is still drawn in HTML/CSS (no screenshots, user call), now
   with the redesigned app's tokens: Inter, ink #0F2430, 6px cards on a
   #F5F7F9 page, white slate sidebar with a solid #3B82F6 active item, a
   56px top bar (breadcrumb, Help, bell, avatar), dot + word states.
   Sizes are in em off one font-size per mockup, so each frame scales from a
   single number. The sidebar keeps its old classes (heroD-* / mn-*) so the
   existing desktop / icon-only phone geometry still applies; only its
   colours change here.
   ========================================================================== */

/* ---- sidebar: colours only, geometry stays with the rules above ---------- */
.heroD-side, .mn-side { background: #fff; border-right-color: #E2E8F0; }
.heroD-brand, .mn-brand { border-bottom-color: #E2E8F0; }
.heroD-brand-logo, .mn-brand-logo { background: #0B74FF; border-radius: 8px; box-shadow: none; }
.heroD-brand-name, .mn-brand-name { color: #1E293B; }
.heroD-brand-sub, .mn-brand-sub { color: #64748B; letter-spacing: 0; }
.heroD-nav-item, .mn-nav-item { color: #1E293B; font-weight: 600; border-radius: 8px; }
.heroD-nav-item svg, .mn-nav-item svg { color: #64748B; }
.heroD-nav-item.is-active, .mn-nav-item.is-active { background: #3B82F6; color: #fff; font-weight: 600; }
.heroD-nav-item.is-active svg, .mn-nav-item.is-active svg { color: #fff; }
.heroD-nav-divider, .mn-nav-divider { background: #E2E8F0; }
.mn-side { gap: 2px; }
.mn-nav-item { padding: 6px 10px; font-size: 11px; white-space: nowrap; }
.mw-body, .heroD-board-body { background: #F5F7F9; }

/* ---- the kit ------------------------------------------------------------ */
.ax {
  --ax-ink: #0F2430; --ax-ink2: #546673; --ax-ink3: #7A8C97; --ax-body: #24404F;
  --ax-blue: #0B74FF; --ax-blue-t: #0A57C2; --ax-blue-bg: #EEF5FF;
  --ax-green: #0E7C66; --ax-green-bg: #E6F4F0;
  --ax-red: #A32D25; --ax-red-bg: #FBECEB;
  --ax-amber: #B26B0A; --ax-amber-t: #8A5209; --ax-amber-bg: #FDF3E1;
  --ax-grey: #8496A1; --ax-grey-bg: #EEF2F5;
  --ax-line: #DDE5EA; --ax-soft: #EBF0F3; --ax-input: #C9D4DB; --ax-page: #F5F7F9;
  font-family: Inter, system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 10.5px; line-height: 1.45; color: var(--ax-ink);
  font-variant-numeric: tabular-nums; letter-spacing: 0; text-align: left;
}
.ax *, .ax *::before, .ax *::after { box-sizing: border-box; }
.heroD-main.ax, .mn-main.ax { padding: 0; background: var(--ax-page); min-width: 0; overflow: hidden; }

/* top bar */
.ax-top { display: flex; align-items: center; gap: .9em; height: 4em; padding: 0 1.3em 0 1.8em; background: #fff; border-bottom: 1px solid #E2E8F0; }
.ax-crumb { flex: 1; min-width: 0; font-size: 1.04em; color: #64748B; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ax-crumb b { color: #0F172A; font-weight: 600; }
.ax-ico { position: relative; flex: none; width: 2.6em; height: 2.6em; display: flex; align-items: center; justify-content: center; color: #475569; }
.ax-ico svg { width: 1.45em; height: 1.45em; }
.ax-ico i { position: absolute; top: .2em; right: .15em; min-width: 1.3em; height: 1.3em; padding: 0 .3em; border-radius: .65em; border: 2px solid #fff; background: #DC2626; color: #fff; font-size: .75em; font-weight: 700; font-style: normal; line-height: 1; display: flex; align-items: center; justify-content: center; }
.ax-vsep { flex: none; width: 1px; height: 1.8em; background: #E2E8F0; }
.ax-av { flex: none; width: 2.6em; height: 2.6em; border-radius: 50%; background: #E8EEF5; color: #334155; font-size: .9em; font-weight: 700; display: flex; align-items: center; justify-content: center; }

/* page */
.ax-page { padding: 1.9em 2.2em 2.2em; display: flex; flex-direction: column; gap: 1.4em; }
.ax-back { font-size: 1em; font-weight: 600; color: var(--ax-blue); margin-bottom: -.6em; }
.ax-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1em 1.4em; flex-wrap: wrap; }
.ax-h1 { font-size: 1.95em; font-weight: 600; letter-spacing: -.015em; line-height: 1.2; color: var(--ax-ink); }
.ax-sub { margin-top: .3em; font-size: 1em; color: var(--ax-ink2); }
.ax-ctrls { display: flex; align-items: center; gap: .7em; }

/* buttons, inputs */
.ax-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5em; height: 2.9em; padding: 0 1.1em; border: 1px solid var(--ax-input); border-radius: 6px; background: #fff; color: var(--ax-ink); font-size: .96em; font-weight: 600; white-space: nowrap; }
.ax-btn svg { width: 1.15em; height: 1.15em; }
.ax-btn-p { background: var(--ax-blue); border-color: var(--ax-blue); color: #fff; }
.ax-btn-sm { height: 2.55em; padding: 0 .95em; font-size: .92em; }
.ax-btn-block { width: 100%; }
.ax-link { color: var(--ax-blue); font-weight: 600; font-size: .95em; white-space: nowrap; }
.ax-select { position: relative; display: inline-flex; align-items: center; gap: .55em; height: 2.9em; padding: 0 2.3em 0 .9em; border: 1px solid var(--ax-line); border-radius: 6px; background: #fff; font-size: .98em; font-weight: 500; color: var(--ax-ink); white-space: nowrap; }
.ax-select > svg { width: 1.2em; height: 1.2em; color: var(--ax-ink2); flex: none; }
.ax-select::after { content: ""; position: absolute; right: .9em; top: 50%; width: .45em; height: .45em; border-right: 1.6px solid var(--ax-ink2); border-bottom: 1.6px solid var(--ax-ink2); transform: translateY(-70%) rotate(45deg); }
.ax-seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 6px; background: #E9EEF2; }
.ax-seg span { display: inline-flex; align-items: center; height: 2.45em; padding: 0 .9em; border-radius: 4px; font-size: .93em; font-weight: 500; color: var(--ax-ink2); white-space: nowrap; }
.ax-seg span.on { background: #fff; color: var(--ax-ink); font-weight: 600; box-shadow: 0 1px 2px rgba(15,36,48,.16); }
.ax-field { display: flex; flex-direction: column; gap: .4em; }
.ax-lbl { font-size: .95em; font-weight: 600; color: var(--ax-ink); }
.ax-lbl em { font-style: normal; font-weight: 400; color: var(--ax-ink3); }
.ax-in { display: flex; align-items: center; min-height: 3em; padding: .5em .85em; border: 1px solid var(--ax-input); border-radius: 6px; background: #fff; font-size: 1em; color: var(--ax-ink); }
.ax-in.is-sel { position: relative; padding-right: 2.3em; }
.ax-in.is-sel::after { content: ""; position: absolute; right: .95em; top: 50%; width: .45em; height: .45em; border-right: 1.6px solid var(--ax-ink2); border-bottom: 1.6px solid var(--ax-ink2); transform: translateY(-70%) rotate(45deg); }
.ax-in.is-ph { color: var(--ax-ink3); }
.ax-hint { font-size: .87em; color: var(--ax-ink2); }
.ax-prev { padding: .6em .75em; border: 1px solid var(--ax-soft); border-radius: 4px; background: #F7F9FA; font-size: .9em; color: var(--ax-body); }
.ax-prev b { font-weight: 600; }
.ax-check { display: flex; align-items: flex-start; gap: .6em; font-size: .95em; color: var(--ax-ink); }
.ax-check i { flex: none; width: 1.15em; height: 1.15em; margin-top: .1em; border-radius: 3px; border: 1.5px solid var(--ax-input); background: #fff; display: flex; align-items: center; justify-content: center; }
.ax-check i.on { background: var(--ax-blue); border-color: var(--ax-blue); }
.ax-check i.on::after { content: ""; width: .32em; height: .6em; border-right: 2px solid #fff; border-bottom: 2px solid #fff; transform: translateY(-1px) rotate(45deg); }

/* cards */
.ax-card { background: #fff; border: 1px solid var(--ax-line); border-radius: 6px; min-width: 0; }
.ax-card-h { display: flex; align-items: baseline; justify-content: space-between; gap: .8em; padding: 1.25em 1.4em .5em; }
.ax-card-t { font-size: 1.08em; font-weight: 600; color: var(--ax-ink); }
.ax-card-s { margin-top: .2em; font-size: .9em; color: var(--ax-ink2); }
.ax-card-f { display: flex; align-items: center; gap: .5em; padding: .85em 1.4em; border-top: 1px solid var(--ax-soft); background: #F6F9FA; font-size: .88em; font-weight: 500; }
.ax-card-f svg { width: 1.2em; height: 1.2em; flex: none; }
.ax-grid21 { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 1.4em; align-items: start; }

/* KPI cards */
.ax-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.4em; }
.ax-kpi { padding: 1.2em 1.35em; display: flex; flex-direction: column; gap: .4em; }
.ax-kpi-l { font-size: .92em; font-weight: 500; color: var(--ax-ink2); }
.ax-kpi-r { display: flex; align-items: flex-end; justify-content: space-between; gap: .5em; }
.ax-kpi-v { font-size: 2em; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; }
.ax-spark { width: 6.4em; height: 2.2em; flex: none; }
.ax-spark path { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.ax-kpi-d { font-size: .88em; color: var(--ax-ink2); white-space: nowrap; }
.ax-kpi-d b { font-weight: 600; }
.ax-up { color: var(--ax-green); }
.ax-down { color: var(--ax-red); }

/* messages chart */
.ax-chart { padding: 1.4em; }
.ax-chart-h { display: flex; align-items: flex-start; justify-content: space-between; gap: .8em; flex-wrap: wrap; }
.ax-chart-ro { margin-top: .25em; font-size: .92em; color: var(--ax-ink2); }
.ax-lg { display: flex; gap: .45em; }
.ax-lg span { display: inline-flex; align-items: center; gap: .5em; height: 2.4em; padding: 0 .75em; border: 1px solid var(--ax-line); border-radius: 4px; background: #fff; font-size: .9em; font-weight: 500; }
.ax-lg i { width: .75em; height: .75em; border-radius: 2px; }
.ax-plot { display: grid; grid-template-columns: 2.4em minmax(0, 1fr); gap: .55em; margin-top: 1.3em; }
.ax-yl { position: relative; height: 12em; color: var(--ax-ink2); text-align: right; line-height: 1; }
.ax-yl span { position: absolute; right: 0; font-size: .8em; transform: translateY(50%); }
.ax-yl span:nth-child(1) { bottom: 0; } .ax-yl span:nth-child(2) { bottom: 25%; } .ax-yl span:nth-child(3) { bottom: 50%; } .ax-yl span:nth-child(4) { bottom: 75%; } .ax-yl span:nth-child(5) { bottom: 100%; }
.ax-bars { position: relative; height: 12em; }
.ax-bars svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ax-xl { display: flex; justify-content: space-between; margin: .5em 0 0 2.95em; color: var(--ax-ink2); }
.ax-xl span { font-size: .8em; }

/* dot + word */
.ax-dw { display: inline-flex; align-items: center; gap: .5em; font-size: .95em; font-weight: 500; white-space: nowrap; }
.ax-dw i { width: .58em; height: .58em; border-radius: 50%; flex: none; background: var(--ax-grey); }
.ax-dw.ok { color: var(--ax-green); } .ax-dw.ok i { background: var(--ax-green); }
.ax-dw.send i { background: var(--ax-blue); }
.ax-dw.idle { color: var(--ax-ink2); } .ax-dw.idle i { background: var(--ax-ink3); }
.ax-dw.act { color: var(--ax-amber-t); } .ax-dw.act i { background: #A9640F; }
.ax-dw.stop { color: var(--ax-red); } .ax-dw.stop i { background: var(--ax-red); }
/* ringed dot (Businesses) */
.ax-rd { display: inline-flex; align-items: center; gap: .5em; font-size: .97em; font-weight: 500; white-space: nowrap; }
.ax-rd i { width: .62em; height: .62em; border-radius: 50%; border: 2px solid currentColor; background: currentColor; flex: none; }
.ax-rd.ok { color: var(--ax-green); }
.ax-rd.setup { color: var(--ax-amber-t); } .ax-rd.setup i { border-color: var(--ax-amber); background: #fff; }
.ax-rd.paused { color: var(--ax-ink2); } .ax-rd.paused i { border-color: var(--ax-grey); background: #fff; }
.ax-rd.stop { color: var(--ax-red); }
/* tinted chips (Messaging Setup) */
.ax-chip { display: inline-flex; align-items: center; gap: .45em; height: 1.95em; padding: 0 .7em; border-radius: 1em; font-size: .88em; font-weight: 600; white-space: nowrap; background: var(--ax-grey-bg); color: var(--ax-ink2); }
.ax-chip i { width: .55em; height: .55em; border-radius: 50%; background: var(--ax-grey); }
.ax-chip.ok { background: var(--ax-green-bg); color: var(--ax-green); } .ax-chip.ok i { background: var(--ax-green); }
.ax-chip.wait { background: #EAF2FF; color: #1D5FBF; } .ax-chip.wait i { background: var(--ax-blue); }
.ax-chip.act { background: var(--ax-amber-bg); color: var(--ax-amber-t); } .ax-chip.act i { background: var(--ax-amber); }
.ax-badge { display: inline-flex; align-items: center; height: 1.75em; padding: 0 .6em; border-radius: .9em; background: var(--ax-blue-bg); color: #0B5BD3; font-size: .82em; font-weight: 600; white-space: nowrap; }
.ax-tag { display: inline-flex; align-items: center; padding: .1em .5em; border-radius: 4px; background: var(--ax-grey-bg); color: var(--ax-ink2); font-size: .8em; font-weight: 600; }

/* tabs and pills */
.ax-tabs { display: flex; gap: 1.6em; padding: 0 1.4em; border-bottom: 1px solid var(--ax-soft); }
.ax-tab { display: inline-flex; align-items: center; gap: .45em; height: 3.1em; margin-bottom: -1px; border-bottom: 2px solid transparent; font-size: .95em; font-weight: 500; color: var(--ax-ink2); white-space: nowrap; }
.ax-tab.on { border-bottom-color: var(--ax-blue); color: var(--ax-ink); font-weight: 600; }
.ax-tab b { min-width: 1.6em; height: 1.6em; padding: 0 .45em; border-radius: .8em; background: var(--ax-grey-bg); color: var(--ax-ink2); font-size: .82em; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; }
.ax-tab.on b { background: #E8F1FE; color: var(--ax-blue-t); }
.ax-tab .dot { width: .55em; height: .55em; border-radius: 50%; background: var(--ax-amber); }
.ax-pills { display: flex; gap: .55em; flex-wrap: wrap; }
.ax-pill { display: inline-flex; align-items: center; gap: .45em; height: 2.55em; padding: 0 1em; border: 1px solid var(--ax-input); border-radius: 1.3em; background: #fff; font-size: .93em; font-weight: 600; white-space: nowrap; }
.ax-pill span { font-weight: 500; color: var(--ax-ink3); }
.ax-pill.on { background: var(--ax-ink); border-color: var(--ax-ink); color: #fff; }
.ax-pill.on span { color: #C9D4DB; }
.ax-search { position: relative; display: flex; align-items: center; width: 19em; max-width: 45%; height: 2.85em; padding: 0 .85em 0 2.5em; border: 1px solid var(--ax-input); border-radius: 6px; background: #fff; font-size: .95em; color: var(--ax-ink3); white-space: nowrap; overflow: hidden; }
.ax-search svg { position: absolute; left: .85em; top: 50%; width: 1.1em; height: 1.1em; transform: translateY(-50%); color: var(--ax-ink3); }

/* tables */
.ax-th { display: grid; gap: 1em; align-items: center; padding: .6em 1.4em; border-top: 1px solid var(--ax-soft); border-bottom: 1px solid var(--ax-soft); background: #FAFBFC; font-size: .86em; font-weight: 600; color: var(--ax-ink2); }
.ax-tr { display: grid; gap: 1em; align-items: center; padding: .85em 1.4em; border-bottom: 1px solid var(--ax-soft); font-size: .95em; }
.ax-tr:last-child { border-bottom: 0; }
.ax-r { text-align: right; }
.ax-nm { font-weight: 600; font-size: 1.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ax-mt { margin-top: .15em; font-size: .88em; color: var(--ax-ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ax-mt.lt { color: var(--ax-ink3); }
.ax-bar { height: 4px; border-radius: 2px; background: var(--ax-soft); overflow: hidden; margin-bottom: .45em; }
.ax-bar i { display: block; height: 100%; background: var(--ax-blue); border-radius: 2px; }
.ax-row { display: flex; align-items: center; justify-content: space-between; gap: .8em; padding: .9em 1.4em; border-top: 1px solid var(--ax-soft); }
.ax-init { flex: none; width: 2.6em; height: 2.6em; border-radius: 7px; color: #fff; font-size: .88em; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.ax-biz { display: flex; align-items: center; gap: .8em; min-width: 0; }
.ax-biz > div { min-width: 0; }

/* tiles (Businesses) */
.ax-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: #fff; border: 1px solid var(--ax-line); border-radius: 6px; overflow: hidden; }
.ax-tile { padding: 1.15em 1.3em; border-right: 1px solid var(--ax-soft); }
.ax-tile:last-child { border-right: 0; }
.ax-tile-l { font-size: .92em; font-weight: 500; color: var(--ax-ink2); }
.ax-tile-v { margin-top: .35em; font-size: 1.8em; font-weight: 600; letter-spacing: -.01em; line-height: 1.1; }
.ax-tile-s { margin-top: .4em; font-size: .87em; color: var(--ax-ink3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ax-tile-s.amber { color: var(--ax-amber-t); }

/* dialog */
.ax-dlg { background: #fff; border-radius: 6px; box-shadow: 0 24px 60px rgba(15,36,48,.22), 0 2px 6px rgba(15,36,48,.08); margin: 0 auto; overflow: hidden; }
.ax-dlg-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 1em; padding: 1.5em 1.7em .3em; }
.ax-dlg-t { font-size: 1.3em; font-weight: 600; line-height: 1.3; }
.ax-dlg-s { margin-top: .25em; font-size: .95em; line-height: 1.45; color: var(--ax-ink2); }
.ax-x { flex: none; width: 1.3em; height: 1.3em; color: var(--ax-ink2); position: relative; }
.ax-x::before, .ax-x::after { content: ""; position: absolute; left: 50%; top: 50%; width: 1.1em; height: 1.5px; background: currentColor; }
.ax-x::before { transform: translate(-50%, -50%) rotate(45deg); }
.ax-x::after { transform: translate(-50%, -50%) rotate(-45deg); }
.ax-dlg-b { padding: 1em 1.7em 0; display: flex; flex-direction: column; gap: 1em; }
.ax-dlg-f { display: flex; justify-content: flex-end; gap: .7em; margin-top: 1.4em; padding: 1em 1.7em; background: #F7F9FC; border-top: 1px solid #E6EAF2; }
.ax-dlg-f.split { justify-content: space-between; }

/* notes, bubbles, checks */
.ax-note { padding: .75em .9em; border-radius: 4px; background: #F6F9FA; color: var(--ax-body); font-size: .9em; line-height: 1.5; }
.ax-bub { padding: .6em .8em; border-radius: 1.2em 1.2em 1.2em .3em; background: #E6E9ED; color: var(--ax-ink); font-size: .95em; line-height: 1.42; }
.ax-checks { display: flex; flex-direction: column; gap: .45em; }
.ax-checks div { display: flex; gap: .6em; align-items: flex-start; font-size: .9em; color: var(--ax-body); line-height: 1.4; }
.ax-checks i { flex: none; width: 1.25em; height: 1.25em; margin-top: .05em; border-radius: 50%; background: #E2F3EE; position: relative; }
.ax-checks i::after { content: ""; position: absolute; left: .44em; top: .24em; width: .3em; height: .58em; border-right: 1.6px solid var(--ax-green); border-bottom: 1.6px solid var(--ax-green); transform: rotate(45deg); }

/* checklist (Messaging Setup) */
.ax-ck-h { display: flex; align-items: center; gap: .6em .9em; flex-wrap: wrap; padding: 1.1em 1.3em; border-bottom: 1px solid var(--ax-soft); }
.ax-ck-h .ax-card-t { flex: 1; min-width: 0; }
.ax-ck-n { font-size: .92em; color: var(--ax-ink3); }
.ax-ck { display: flex; align-items: center; gap: .9em; padding: .85em 1.3em; border-top: 1px solid var(--ax-soft); }
.ax-ck:first-of-type { border-top: 0; }
.ax-ck-c { flex: none; width: 1.75em; height: 1.75em; border-radius: 50%; border: 1.5px solid var(--ax-input); background: #fff; display: flex; align-items: center; justify-content: center; }
.ax-ck-c svg { width: 1em; height: 1em; }
.ax-ck-c.ok { background: var(--ax-green); border-color: var(--ax-green); color: #fff; }
.ax-ck-c.wait { background: #EAF2FF; border-color: var(--ax-blue); color: var(--ax-blue); }
.ax-ck-c.act { background: var(--ax-amber-bg); border-color: var(--ax-amber); color: var(--ax-amber-t); }
.ax-ck-x { flex: 1; min-width: 0; }
.ax-ck-t { font-size: 1em; font-weight: 600; }
.ax-ck-s { margin-top: .1em; font-size: .92em; line-height: 1.45; color: var(--ax-ink2); }

/* carrier bar + number rows (Messaging Setup) */
.ax-carrier { display: flex; align-items: center; gap: .75em; padding: .75em 1.3em; border-top: 1px solid var(--ax-line); background: #F6F9FA; }
.ax-carrier-logo { flex: none; width: 2.2em; height: 2.2em; border: 1px solid var(--ax-line); border-radius: 6px; background: #fff; display: flex; align-items: center; justify-content: center; }
.ax-carrier-logo svg { width: 1.45em; height: 1.45em; }
.ax-carrier-x { flex: 1; min-width: 0; }
.ax-num { font-size: 1.05em; font-weight: 600; }

/* composer */
.ax-steps { display: flex; flex-direction: column; gap: .9em; }
.ax-step { padding: 1.15em 1.3em; }
.ax-step-h { display: flex; align-items: center; gap: .7em; font-size: 1.05em; font-weight: 600; }
.ax-step-h .n { flex: none; width: 1.75em; height: 1.75em; border-radius: 50%; background: var(--ax-blue-bg); color: var(--ax-blue); font-size: .82em; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.ax-step-h .n.done { background: var(--ax-green); color: #fff; }
.ax-step-h .v { margin-left: auto; font-size: .88em; font-weight: 500; color: var(--ax-ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ax-ed { margin-top: .9em; border: 1px solid var(--ax-line); border-radius: 6px; }
.ax-lock { display: flex; align-items: center; gap: .5em; padding: .65em .8em 0; font-size: .85em; color: var(--ax-ink2); }
.ax-lock.bot { padding: 0 .8em .65em; }
.ax-lock svg { width: 1em; height: 1em; flex: none; }
.ax-lock b { padding: .1em .5em; border-radius: 4px; background: var(--ax-grey-bg); color: var(--ax-body); font-weight: 600; white-space: nowrap; }
.ax-lock span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ax-ed-t { padding: .55em .8em .65em; font-size: 1.02em; line-height: 1.5; }
.ax-tools { display: flex; align-items: center; gap: .45em; padding: .55em .7em; border-top: 1px solid var(--ax-soft); background: #FAFBFC; border-radius: 0 0 6px 6px; }
.ax-tools span { display: inline-flex; align-items: center; height: 2.2em; padding: 0 .65em; border: 1px solid var(--ax-line); border-radius: 6px; background: #fff; font-size: .86em; font-weight: 600; white-space: nowrap; }
.ax-tools .ct { margin-left: auto; border: 0; background: none; padding: 0; font-weight: 500; color: var(--ax-ink2); }
.ax-rail { display: flex; flex-direction: column; gap: .9em; }
.ax-phone { margin: .8em 1.1em 0; border: 5px solid #1F2933; border-radius: 1.3em; background: #fff; overflow: hidden; }
.ax-phone-h { display: flex; flex-direction: column; align-items: center; gap: .25em; padding: .6em 0 .5em; background: #F6F7F8; border-bottom: 1px solid #E6E9ED; }
.ax-phone-h b { width: 2.2em; height: 2.2em; border-radius: 50%; background: #A7B0BA; color: #fff; font-size: .95em; display: flex; align-items: center; justify-content: center; }
.ax-phone-h span { font-size: .78em; color: var(--ax-body); }
.ax-phone-b { padding: .7em .6em .9em; }
.ax-phone-ts { text-align: center; font-size: .72em; color: var(--ax-ink3); margin-bottom: .5em; }
.ax-phone .ax-bub { font-size: .86em; margin-right: 10%; }
.ax-dl { padding: .2em 1.2em .4em; }
.ax-dl > div { display: grid; grid-template-columns: 5.6em minmax(0, 1fr); gap: .6em; padding: .55em 0; border-top: 1px solid var(--ax-soft); font-size: .9em; }
.ax-dl > div:first-child { border-top: 0; }
.ax-dl dt { color: var(--ax-ink2); }
.ax-dl dd { margin: 0; font-weight: 600; min-width: 0; }
.ax-dl dd small { display: block; font-size: .9em; font-weight: 400; color: var(--ax-ink3); line-height: 1.35; margin-top: .1em; }
.ax-rail-f { display: grid; grid-template-columns: 1fr 1fr; gap: .5em; padding: 0 1.2em 1.2em; }
.ax-rail-f .ax-btn-p { grid-column: 1 / -1; }

/* import: match the columns */
.ax-tbl { border: 1px solid var(--ax-line); border-radius: 6px; overflow: hidden; }
.ax-tbl .ax-th { border-top: 0; padding: .65em 1em; grid-template-columns: 22% minmax(0, 1fr) 15.5em; }
.ax-tbl .ax-tr { padding: .4em 1em; grid-template-columns: 22% minmax(0, 1fr) 15.5em; }
.ax-tbl .ax-in { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ax-tbl .ax-tr .ax-in { min-height: 2.7em; padding-top: .3em; padding-bottom: .3em; font-size: .95em; transition: border-color .3s, box-shadow .3s, background .3s, color .3s; }
.ax-tbl .ax-tr .c1 { font-weight: 600; }
.ax-tbl .ax-tr .c2 { font-size: .93em; color: var(--ax-ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ax-tbl .ax-tr.skip .c1 { color: var(--ax-ink3); }
.ax-tbl .ax-tr.skip .c2 { color: #9AAAB4; }
.ax-tbl .ax-tr.skip .ax-in { background: #F6F9FA; border-color: var(--ax-line); color: var(--ax-ink2); }
.ax-tbl .ax-in.is-wait { color: var(--ax-ink3); }
.ax-tbl .ax-in.is-hit { border-color: var(--ax-blue); box-shadow: 0 0 0 3px rgba(11,116,255,.12); }
.ax-match { font-size: .93em; color: var(--ax-body); }
.ax-match b { font-weight: 600; }
.ax-go { transition: opacity .35s ease, transform .2s ease; }
.ax-go.is-off { opacity: .5; }
.ax-go.is-press { transform: scale(.97); }

/* modal mockups: the dialog sits on a dimmed page, as in the app */
.cb-mw .mw-body, .ic-mw .mw-body { background: #DCE2E7; }

/* ---- AI Promo frame: same animation classes, the app's look ------------- */
.tsh-aip-head { border-bottom-color: #EBF0F3; }
.tsh-aip-head-t { font-size: 15px; font-weight: 600; color: #0F2430; }
.tsh-aip-head-s { display: block; font-size: 11.5px; font-weight: 400; color: #546673; margin-top: 2px; letter-spacing: 0; }
.tsh-aip-biz { border-color: #DDE5EA; border-radius: 6px; }
.tsh-aip-biz-av { background: #7A2E5A; border-radius: 5px; color: #fff; font-size: 8.5px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.tsh-aip-lbl { color: #0F2430; }
.tsh-aip-lbl { flex-wrap: wrap; row-gap: 1px; }
.tsh-aip-lbl em { font-style: normal; font-weight: 400; color: #7A8C97; font-size: 11px; }
.tsh-aip-ta { border-color: #C9D4DB; border-radius: 6px; }
.tsh-aip-ta.is-typing { border-color: #0B74FF; }
.tsh-aip-ta .caret { background: #0B74FF; }
.tsh-aip-drop { display: inline-flex; padding: 6px 11px; gap: 7px; border: 1px solid #C9D4DB; border-radius: 6px; background: #fff; }
.tsh-aip-drop.is-hit { border-color: #0B74FF; background: #EEF5FF; }
.tsh-aip-drop-ic { width: 16px; height: 16px; color: #546673; }
.tsh-aip-drop.is-hit .tsh-aip-drop-ic { color: #0B74FF; }
.tsh-aip-drop-ic svg { width: 15px; height: 15px; }
.tsh-aip-drop-t { font-size: 11.5px; }
.tsh-aip-drop-row { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.tsh-aip-drop-row .tsh-aip-drop { margin-top: 0; }
.tsh-aip-cnt { font-size: 10.5px; color: #7A8C97; }
.tsh-aip-offers { display: flex; flex-direction: column; gap: 5px; }
.tsh-aip-offer { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 8px 6px 11px; border: 1px solid #EBF0F3; border-radius: 6px; background: #FAFBFC; font-size: 11.5px; color: #0F2430; }
.tsh-aip-offer i { width: 9px; height: 9px; flex: none; position: relative; color: #7A8C97; }
.tsh-aip-offer i::before, .tsh-aip-offer i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 1.4px; background: currentColor; }
.tsh-aip-offer i::before { transform: translate(-50%,-50%) rotate(45deg); }
.tsh-aip-offer i::after { transform: translate(-50%,-50%) rotate(-45deg); }
.tsh-aip-opts { flex-direction: row; gap: 7px; }
.tsh-aip-o { flex: 1 1 0; min-width: 0; align-items: flex-start; padding: 9px 10px; border-color: #DDE5EA; border-radius: 6px; }
.tsh-aip-o.sel { border-color: #0B74FF; background: #F5F9FF; box-shadow: 0 0 0 1px #0B74FF; }
.tsh-aip-o-radio { width: 15px; height: 15px; border-color: #B8C6CF; margin-top: 1px; }
.tsh-aip-o-radio::after { width: 7px; height: 7px; background: #0B74FF; }
.tsh-aip-o.sel .tsh-aip-o-radio { border-color: #0B74FF; }
.tsh-aip-o-nm { font-size: 12px; display: flex; align-items: center; gap: 5px; }
.tsh-aip-o-ds { font-size: 10.5px; color: #546673; }
.tsh-aip-pro { display: inline-flex; padding: 0 5px; border-radius: 4px; background: #EEF2F5; color: #546673; font-size: 9.5px; font-weight: 600; }
.tsh-aip-gen { border-radius: 6px; background: #0B74FF; box-shadow: none; font-size: 13px; }
.tsh-aip-gen.is-press { background: #0A5FD0; box-shadow: none; }
.tsh-aip-ring { border-color: #E3EBF5; border-top-color: #0B74FF; }
.tsh-aip-run-t { font-size: 18px; color: #0F2430; }
.tsh-aip-run-s { color: #546673; }
.tsh-aip-bar { height: 8px; border-radius: 4px; background: #E3EBF5; }
.tsh-aip-bar i { background: #0B74FF; border-radius: 4px; }
.tsh-aip-run-note { color: #7A8C97; max-width: 34ch; line-height: 1.45; }
.tsh-aip-rail { background: #fff; border-color: #DDE5EA; border-radius: 6px; padding: 0; }
.tsh-aip-rail-h { padding: 9px 12px 6px; color: #7A8C97; letter-spacing: .06em; }
.tsh-aip-wk { margin: 0; padding: 7px 10px 7px 9px; border-radius: 0; border-left-width: 3px; }
.tsh-aip-wk.active { background: #EEF5FF; border-left-color: #0B74FF; }
.tsh-aip-wk-n { font-size: 10px; font-weight: 400; color: #546673; white-space: nowrap; }
.tsh-aip-wk-r { font-size: 11.5px; font-weight: 600; color: #0F2430; margin-top: 1px; }
.tsh-aip-hol { display: inline-flex; margin-top: 4px; padding: 1px 6px; border-radius: 4px; background: #F3E8FF; color: #6B21A8; font-size: 9.5px; font-weight: 600; }
.tsh-aip-eyebrow-sm { font-size: 10.5px; font-weight: 600; text-transform: none; letter-spacing: 0; color: #546673; }
.tsh-aip-dt { font-size: 15px; font-weight: 600; margin: 3px 0 10px; }
.tsh-aip-msg { border-color: #DDE5EA; border-radius: 6px; padding: 11px 13px; margin-bottom: 9px; }
.tsh-aip-msg-top { align-items: center; margin-bottom: 8px; }
.tsh-aip-msg-w { font-size: 12px; }
.tsh-aip-st { gap: 6px; padding: 0; background: none; border-radius: 0; font-size: 11.5px; font-weight: 600; letter-spacing: 0; text-transform: none; color: #8A5209; }
.tsh-aip-st::before { content: ""; width: 8px; height: 8px; border-radius: 50%; box-sizing: border-box; border: 2px solid #B26B0A; background: #fff; transition: background .35s ease, border-color .35s ease; }
.tsh-aip-st.s-sched { background: none; color: #0B5CC7; }
.tsh-aip-st.s-sched::before { border-color: #0B74FF; background: #0B74FF; }
.tsh-aip-bubble { background: #E6E9ED; border: 0; border-radius: 15px 15px 15px 4px; padding: 8px 11px; font-size: 12px; line-height: 1.45; color: #0F2430; }
.tsh-aip-checks { display: flex; flex-direction: column; gap: 4px; margin-top: 9px; }
.tsh-aip-checks div { display: flex; gap: 7px; align-items: flex-start; font-size: 10.5px; line-height: 1.4; color: #24404F; }
.tsh-aip-checks i { flex: none; width: 13px; height: 13px; border-radius: 50%; background: #E2F3EE; position: relative; margin-top: 0; }
.tsh-aip-checks i::after { content: ""; position: absolute; left: 4.6px; top: 2.5px; width: 3px; height: 6px; border-right: 1.5px solid #0E7C66; border-bottom: 1.5px solid #0E7C66; transform: rotate(45deg); }
.tsh-aip-acts { gap: 6px; margin-top: 10px; }
.tsh-aip-act { border-radius: 6px; border-color: #C9D4DB; font-weight: 600; padding: 5px 10px; }
.tsh-aip-act--p { background: #0B74FF; border-color: #0B74FF; }
.tsh-aip-review { flex: none; display: inline-flex; align-items: center; height: 28px; padding: 0 11px; border-radius: 6px; background: #0B74FF; color: #fff; font-size: 11.5px; font-weight: 600; white-space: nowrap; }
@media (max-width:560px){
  .tsh-aip-head-s { display: none; }
  .tsh-aip-review { height: 26px; padding: 0 9px; font-size: 10.5px; }
  .tsh-aip-wk-r { font-size: 11px; }
  .tsh-aip-hol { display: none; }
  .tsh-aip-cnt { display: none; }
  .tsh-aip-lbl em { flex-basis: 100%; }
}

/* ---- per-frame sizes ---------------------------------------------------- */
.heroD-main.ax { font-size: 9.6px; }
.heroD-main.ax .ax-page { min-width: 720px; }
@media (min-width: 1000px) {
  .heroD-main.ax { font-size: clamp(8.6px, .87vw, 10.6px); }
  .heroD-main.ax .ax-page { min-width: 0; }
}
.tsh-step-visual .mn-main.ax { font-size: 9.4px; }
.tsh-fleet-as-mockup .mn-main.ax { font-size: 10.6px; }
.ax-dlg--biz { max-width: 30em; font-size: 10.5px; }
.ax-dlg--imp { max-width: 46em; font-size: 10px; }
@media (max-width: 760px) {
  .tsh-step-visual .mn-main.ax { font-size: 9.6px; }
  .tsh-fleet-as-mockup .mn-main.ax .ax-page { min-width: 668px; }
  .ax-dlg--imp { font-size: 9px; }
}
@media (max-width: 420px) {
  .ax-dlg--biz { font-size: 9.6px; }
  .ax-dlg--imp .ax-tbl .ax-th, .ax-dlg--imp .ax-tbl .ax-tr { grid-template-columns: 26% minmax(0,1fr) 13.5em; }
}
@media (prefers-reduced-motion: reduce) {
  .ax-tbl .ax-tr .ax-in, .ax-go { transition: none; }
}

/* v3.22.0: the header fits 360px phones. The burger's -10px margin plus the
   trial pill ran 3px past the edge (page scrollWidth 363 at 360). */
@media (max-width: 374px) {
  .tsh-header-actions { gap: 6px; }
  .tsh-cta-pill { padding: 9px 13px; font-size: 13.5px; }
}

/* ---- mid widths: icon-only sidebars where a frame is too narrow for labels.
   Same collapsed treatment the phone rules use, minus the bleed. --------- */
@media (min-width: 1000px) and (max-width: 1279px) {
  .heroD-board-body { grid-template-columns: 52px 1fr; }
  .heroD-side { padding: 14px 6px; }
  .heroD-brand { justify-content: center; padding: 4px 0 12px; gap: 0; }
  .heroD-brand-text { display: none; }
  .heroD-nav-item { justify-content: center; padding: 9px 6px; gap: 0; }
  .heroD-nav-item span { display: none; }
  .tsh-step-visual .mn-main.ax { font-size: 8.4px; }
}
@media (min-width: 761px) and (max-width: 1279px) {
  .tsh-step-visual .mw-body:has(.mn-side) { grid-template-columns: 52px 1fr; }
  .tsh-step-visual .mn-side { padding: 14px 6px; }
  .tsh-step-visual .mn-brand { justify-content: center; padding: 4px 0 12px; gap: 0; }
  .tsh-step-visual .mn-brand-text { display: none; }
  .tsh-step-visual .mn-nav-item { justify-content: center; padding: 9px 6px; gap: 0; }
  .tsh-step-visual .mn-nav-label { display: none; }
}
@media (min-width: 761px) and (max-width: 999px) {
  .tsh-fleet-as-mockup .mw-body { grid-template-columns: 52px 1fr; }
  .tsh-fleet-as-mockup .mn-side { padding: 14px 6px; }
  .tsh-fleet-as-mockup .mn-brand { justify-content: center; padding: 4px 0 12px; gap: 0; }
  .tsh-fleet-as-mockup .mn-brand-text { display: none; }
  .tsh-fleet-as-mockup .mn-nav-item { justify-content: center; padding: 9px 6px; gap: 0; }
  .tsh-fleet-as-mockup .mn-nav-label { display: none; }
  .tsh-fleet-as-mockup .mn-main.ax { font-size: 9.6px; }
}
/* ==========================================================================
   v3.23.0 — 04 COMPLIANCE BUILT IN and 07 WHAT'S INCLUDED
   Site look (16px cards, kicker pill, centred intro), solid colours only.
   Compliance sits between two #f8fafc sections, so it is white; What's
   included sits between white Agencies and the dark table, so it is grey.
   ========================================================================== */
.tsh-cmp { background: #fff; padding: clamp(3.5rem, 8vw, 6rem) clamp(1.25rem, 4vw, 2rem); }
.tsh-incl { background: var(--bg-2); padding: clamp(3.5rem, 8vw, 6rem) clamp(1.25rem, 4vw, 2rem); border-top: 1px solid var(--line); }
.tsh-cmp-inner, .tsh-incl-inner { max-width: 1240px; margin: 0 auto; }
.tsh-cmp-intro, .tsh-incl-intro { text-align: center; margin-bottom: clamp(2rem, 5vw, 3.25rem); }
.tsh-cmp-headline, .tsh-incl-headline {
  font-size: clamp(1.9rem, 4.5vw, 3rem); font-weight: 800; letter-spacing: -0.03em;
  line-height: 1.05; margin: 0 auto 14px; max-width: 22ch; color: var(--ink); text-wrap: balance;
}
.tsh-cmp-sub, .tsh-incl-sub {
  font-size: clamp(1rem, 1.3vw, 1.1rem); color: var(--ink-3);
  max-width: 56ch; margin: 0 auto; line-height: 1.55;
}
@media (min-width: 700px) { .tsh-cmp-sub, .tsh-incl-sub { text-align: left; } }
@media (max-width: 699px) { .tsh-cmp-sub, .tsh-incl-sub { text-wrap: balance; } }

/* ---- compliance: two panels -------------------------------------------- */
.tsh-cmp-show { display: grid; grid-template-columns: 1fr; gap: 20px; margin-bottom: 20px; }
@media (min-width: 900px) { .tsh-cmp-show { grid-template-columns: 1fr 1fr; } }
.tsh-cmp-panel {
  margin: 0; background: var(--bg-2); border: 1px solid var(--bg-3); border-radius: 16px;
  padding: 24px; display: flex; flex-direction: column; gap: 18px; min-width: 0;
}
.tsh-cmp-cap { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.tsh-cmp-phone { background: #fff; border: 1px solid var(--bg-3); border-radius: 14px; padding: 16px; }
.tsh-cmp-from { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; font-size: 12.5px; color: var(--ink-3); }
.tsh-cmp-from b { width: 30px; height: 30px; border-radius: 50%; background: #A7B0BA; color: #fff; font-size: 13px; display: flex; align-items: center; justify-content: center; flex: none; }
.tsh-cmp-bubble {
  max-width: 92%; padding: 11px 14px; border-radius: 18px 18px 18px 5px; background: #E6E9ED;
  font-size: 15px; line-height: 1.5; color: var(--ink);
}
.tsh-cmp-bubble mark { border-radius: 4px; padding: 1px 4px; font-weight: 600; }
.tsh-cmp-bubble mark.is-pre { background: #DCE9FD; color: #0A57C2; }
.tsh-cmp-bubble mark.is-stop { background: #D7EFE7; color: #0E7C66; white-space: nowrap; }
.tsh-cmp-keys { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.tsh-cmp-keys li { display: grid; gap: 7px; justify-items: start; font-size: 14px; line-height: 1.55; color: var(--ink-2); }
.tsh-cmp-keys strong { color: var(--ink); font-weight: 600; }
/* 2.5.7: each line is labelled with the chip it explains, as the dashboard shows it */
.tsh-cmp-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px 3px 8px; border: 1px solid var(--line); border-radius: 6px; background: #fff; font-size: 12.5px; font-weight: 600; line-height: 1.4; color: var(--ink); white-space: nowrap; }
.tsh-cmp-chip svg { flex: none; color: var(--ink-3); }
.tsh-cmp-waves { display: grid; gap: 9px; background: #fff; border: 1px solid var(--bg-3); border-radius: 14px; padding: 18px 16px 14px; }
.tsh-cmp-wave { display: grid; grid-template-columns: 68px minmax(0, 1fr); gap: 12px; align-items: center; font-size: 12.5px; font-weight: 500; color: var(--ink-2); }
.tsh-cmp-track { position: relative; height: 16px; border-radius: 4px; background: var(--bg-3); overflow: hidden; }
.tsh-cmp-track i { position: absolute; top: 0; bottom: 0; border-radius: 4px; background: var(--brand-2); }
.tsh-cmp-wave.is-tx .tsh-cmp-track i { background: #B26B0A; }
.tsh-cmp-axis { display: grid; grid-template-columns: 68px minmax(0, 1fr); gap: 12px; margin-top: 2px; }
.tsh-cmp-axis div { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tsh-cmp-note { margin: 0; font-size: 14px; line-height: 1.55; color: var(--ink-2); }
.tsh-cmp-time { text-align: center; font-size: 11px; color: var(--ink-3); margin: -2px 0 8px; }
@media (max-width: 479px) { .tsh-cmp-axis .is-mid { display: none; } }

/* ---- compliance: rule cards -------------------------------------------- */
.tsh-cmp-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 640px) { .tsh-cmp-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .tsh-cmp-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; } }
.tsh-cmp-card { background: #fff; border: 1px solid var(--bg-3); border-radius: 16px; padding: 24px; box-shadow: 0 1px 3px rgba(0,0,0,.04), 0 4px 14px rgba(0,0,0,.025); }
.tsh-cmp-ic { width: 40px; height: 40px; border-radius: 11px; background: var(--bg-2); border: 1px solid var(--bg-3); color: var(--ink); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.tsh-cmp-ic svg { width: 20px; height: 20px; }
.tsh-cmp-t { margin: 0 0 8px; font-size: 17px; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); }
.tsh-cmp-d { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--ink-3); }
.tsh-cmp-d strong { color: var(--ink); font-weight: 600; }
@media (max-width: 639px) {
  .tsh-cmp-grid { gap: 12px; }
  .tsh-cmp-card { display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: 14px; padding: 20px; }
  .tsh-cmp-ic { width: 36px; height: 36px; margin: 0; grid-row: 1 / span 2; }
  .tsh-cmp-t { margin: 8px 0 6px; }
}

/* ---- what's included ---------------------------------------------------- */
.tsh-incl-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 640px) { .tsh-incl-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .tsh-incl-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; } }
.tsh-incl-card { background: #fff; border: 1px solid var(--bg-3); border-radius: 16px; padding: 18px 18px 24px; box-shadow: 0 1px 3px rgba(0,0,0,.04), 0 4px 14px rgba(0,0,0,.025); min-width: 0; }
.tsh-incl-vis {
  height: 128px; margin-bottom: 18px; padding: 14px; border-radius: 12px; background: var(--bg-2); border: 1px solid var(--bg-3);
  display: flex; flex-direction: column; justify-content: center; overflow: hidden;
  font-family: Inter, system-ui, sans-serif; font-size: 12px; color: #0F2430; font-variant-numeric: tabular-nums;
  container-type: inline-size;
}
.tsh-incl .nw { white-space: nowrap; }
.tsh-incl-t { margin: 0 0 8px 6px; font-size: 17px; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); }
.tsh-incl-d { margin: 0 6px; font-size: 14.5px; line-height: 1.6; color: var(--ink-3); }
.tsh-incl-lbl { font-size: 11px; color: #546673; }
.tsh-incl-v-list { display: grid; gap: 6px; }
.tsh-incl-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 10px; background: #fff; border: 1px solid #DDE5EA; border-radius: 6px; }
.tsh-incl-row span { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tsh-incl-row b { font-weight: 600; color: #8A5209; background: #FDF3E1; border-radius: 4px; padding: 0 4px; }
.tsh-incl-row em { font-style: normal; font-size: 10.5px; color: #546673; background: #EEF2F5; border-radius: 4px; padding: 1px 6px; white-space: nowrap; }
.tsh-incl-v-tags { display: grid; gap: 6px; }
.tsh-incl-v-tags > div:not(.tsh-incl-lbl) { display: flex; gap: 6px; flex-wrap: wrap; }
.tsh-incl-chip { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 4px; background: #EEF5FF; color: #1D4ED8; font-size: 12px; font-weight: 500; }
.tsh-incl-chip::after { content: "\00d7"; margin-left: 7px; color: currentColor; opacity: .6; }
.tsh-incl-chip.is-out { background: #FBECEB; color: #A32D25; }
.tsh-incl-v-cal { display: grid; gap: 12px; }
.tsh-incl-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.tsh-incl-week span { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 0 7px; border-radius: 6px; background: #fff; border: 1px solid #DDE5EA; }
.tsh-incl-week em { font-style: normal; font-size: 10px; color: #7A8C97; }
.tsh-incl-week b { font-size: 13px; font-weight: 600; }
.tsh-incl-week span.is-on { border-color: #0B74FF; background: #EEF5FF; box-shadow: inset 0 -3px 0 #0B74FF; }
.tsh-incl-pill { justify-self: start; display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 13px; background: #0F2430; color: #fff; font-size: 11.5px; font-weight: 600; }
.tsh-incl-v-qr { flex-direction: row; align-items: center; gap: 14px; display: flex; }
.tsh-incl-qr { flex: none; width: 96px; height: 96px; padding: 5px; background: #fff; border: 1px solid #DDE5EA; border-radius: 8px; }
.tsh-incl-qr svg { width: 100%; height: 100%; display: block; }
.tsh-incl-qr-x { min-width: 0; display: grid; gap: 8px; }
.tsh-incl-kw { padding: 8px 10px; border-radius: 14px 14px 14px 4px; background: #E6E9ED; font-size: 12px; line-height: 1.35; }
.tsh-incl-kw b { font-weight: 700; }
.tsh-incl-v-stats { flex-direction: row; display: flex; gap: 8px; align-items: stretch; }
.tsh-incl-v-stats > div { flex: 1; min-width: 0; padding: 12px 10px; background: #fff; border: 1px solid #DDE5EA; border-radius: 6px; display: flex; flex-direction: column; gap: 3px; }
.tsh-incl-v-stats b { font-size: 19px; font-weight: 700; letter-spacing: -0.02em; }
.tsh-incl-v-stats span { font-size: 11px; color: #546673; }
.tsh-incl-v-stats > div:first-child b { color: #0E7C66; }
.tsh-incl-v-send { display: grid; gap: 10px; }
.tsh-incl-btns, .tsh-incl-run { display: flex; gap: 8px; align-items: center; }
.tsh-incl-btn { display: inline-flex; align-items: center; height: 30px; padding: 0 11px; border-radius: 6px; border: 1px solid #C9D4DB; background: #fff; font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.tsh-incl-btn.is-p { background: #0B74FF; border-color: #0B74FF; color: #fff; }
.tsh-incl-btn.is-stop { border-color: #F0C4C0; color: #A32D25; }
.tsh-incl-bar { flex: 1; height: 6px; border-radius: 3px; background: #EBF0F3; overflow: hidden; }
.tsh-incl-bar i { display: block; width: 58%; height: 100%; background: #0B74FF; border-radius: 3px; }
@container (max-width: 260px) {
  .tsh-incl-v-stats > div { padding: 10px 8px; }
  .tsh-incl-v-stats b { font-size: 17px; }
  .tsh-incl-qr { width: 78px; height: 78px; padding: 4px; }
  .tsh-incl-v-qr { gap: 12px; }
  .tsh-incl-kw { font-size: 11.5px; }
}
@media (max-width: 380px) {
  .tsh-cmp-panel { padding: 18px; }
  .tsh-cmp-wave, .tsh-cmp-axis { grid-template-columns: 58px minmax(0, 1fr); gap: 8px; }
}

/* ==========================================================================
   2.4.0 — PLAIN ICONS, NO BUTTON GLOW
   Icons are the glyph alone, one colour, no tile behind them. Buttons change
   colour on hover and press instead of glowing or lifting.
   ========================================================================== */
.tsh-problem-icon,
.tsh-byoc-icon,
.tsh-cmp-ic,
.mms-note-icon {
  background: none !important; border: 0 !important; box-shadow: none !important;
  width: auto !important; height: auto !important; border-radius: 0 !important;
  justify-content: flex-start !important; color: var(--brand-2) !important;
}
.tsh-problem-icon svg, .tsh-byoc-icon svg, .tsh-cmp-ic svg { width: 26px; height: 26px; }
.receipt-tier-icon { background: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; width: auto !important; }

.tsh-btn-primary,
.tsh-plan-cta.is-primary { box-shadow: none !important; transition: background-color 150ms !important; }
.tsh-btn-primary:hover,
.tsh-plan-cta.is-primary:hover { transform: none !important; box-shadow: none !important; background: var(--brand-3) !important; color: #fff; }
.tsh-btn-primary:active,
.tsh-plan-cta.is-primary:active { background: #0747A6 !important; }
.receipt-cta { box-shadow: none !important; transition: background-color 150ms !important; }
.receipt-cta:hover { transform: none !important; box-shadow: none !important; background: #e8f1ff !important; }
.receipt-cta:active { background: #d4e5ff !important; }

/* ==========================================================================
   2.4.0 — REAL SCREENS ON THE HOME PAGE
   How it works, Compliance, AI Promo and Multi-business show the real
   dashboard (inc/features.php tsh_home_visual, styles in shots.css and
   assets/css/shots/home.css). The hero at the top keeps its own mockup.
   ========================================================================== */
.tsh-hv { min-width: 0; }
.tsh-hv.is-panel { background: var(--bg-3); border-radius: 20px; padding: clamp(16px, 3vw, 32px); }
.tsh-step-visual .tsh-collage { border-radius: 20px; }
.tsh-agency-shot { min-width: 0; }
@media (min-width: 1024px) { .tsh-agency-shot { margin-top: 8px; } }

/* "Learn more" links under each section */
.tsh-more { display: inline-flex; align-items: center; gap: 6px; margin-top: 18px; font-size: 15px; font-weight: 600; color: var(--brand-2); text-decoration: none; }
.tsh-more .tsh-ico { width: 16px; height: 16px; transition: transform 150ms; }
.tsh-more:hover { color: var(--brand-3); }
.tsh-more:hover .tsh-ico { transform: translateX(3px); }
.tsh-step-copy .tsh-more { margin-top: 20px; }
.tsh-aip-copy .tsh-more { margin-top: 22px; }

/* Compliance: two screens side by side, the quiet-hours chart across under them */
.tsh-cmp-panel.is-wide { grid-column: 1 / -1; }
@media (min-width: 900px) {
  .tsh-cmp-panel.is-wide { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 18px 32px; align-items: center; }
  .tsh-cmp-panel.is-wide > .tsh-cmp-cap { grid-column: 1 / -1; }
}
.tsh-cmp-panel > .tsh-hv { flex: 1; display: flex; align-items: center; justify-content: center; }
.tsh-cmp-panel > .tsh-hv > .tsh-shot-wrap { width: 100%; }

/* AI Promo: three screens stepped through by tabs (shots.js) */
.tsh-hv.is-tabs { display: flex; flex-direction: column; gap: 16px; }
.tsh-hv-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.tsh-hv-tab { appearance: none; background: none; border: 0; padding: 0 0 12px; margin: 0; cursor: pointer; text-align: left; font: inherit; display: flex; align-items: baseline; gap: 8px; position: relative; color: var(--ink-3); }
.tsh-hv-tab:hover { color: var(--ink); }
.tsh-hv-tab[aria-selected="true"] { color: var(--ink); }
.tsh-hv-tab:focus-visible { outline: 2px solid var(--brand-2); outline-offset: 4px; border-radius: 4px; }
.tsh-hv-n { font-size: 13px; font-weight: 700; color: var(--brand-2); font-variant-numeric: tabular-nums; }
.tsh-hv-t { font-size: 14px; font-weight: 600; line-height: 1.35; }
.tsh-hv-tab i { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; border-radius: 3px; background: var(--line); overflow: hidden; }
.tsh-hv-tab i b { display: block; height: 100%; width: 0; background: var(--brand-2); border-radius: 3px; }
.tsh-hv-tab[aria-selected="true"] i b { width: 100%; }
.tsh-hv.is-run .tsh-hv-tab[aria-selected="true"] i b { animation: tshHvBar 7s linear forwards; }
.tsh-hv.is-run:hover .tsh-hv-tab i b,
.tsh-hv.is-run:focus-within .tsh-hv-tab i b,
.tsh-hv.is-run.is-away .tsh-hv-tab i b { animation-play-state: paused; }
@keyframes tshHvBar { from { width: 0; } to { width: 100%; } }
.tsh-hv-panes { display: grid; }
.tsh-hv-pane { grid-area: 1 / 1; min-width: 0; display: flex; align-items: flex-start; justify-content: center; transition: opacity .35s ease, visibility 0s linear .35s; }
.tsh-hv-pane > .tsh-shot-wrap { width: 100%; }
/* 2.5.9: every AI tab sits on the same grey panel (the middle one's collage
   already had it), so the panel doesn't come and go as the tabs turn. */
.tsh-hv-pane > .tsh-shot-wrap { background: var(--bg-3); border-radius: 20px; padding: clamp(18px, 3vw, 32px); }
@media (max-width: 760px) { .tsh-hv-pane > .tsh-shot-wrap { padding: 14px; } }
.tsh-hv-pane:not(.is-on) { opacity: 0; visibility: hidden; }
.tsh-hv-pane.is-on { transition: opacity .35s ease; }
@media (max-width: 560px) {
  .tsh-hv-tabs { gap: 6px; }
  .tsh-hv-n { display: none; }
  .tsh-hv-t { font-size: 12.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .tsh-hv-pane, .tsh-hv-pane.is-on { transition: none; }
  .tsh-more .tsh-ico { transition: none; }
}
@media (max-width: 560px) {
  .tsh-hv.is-panel { padding: 10px; border-radius: 16px; }
}
.tsh-step-copy, .tsh-step-visual, .tsh-aip-stage, .tsh-aip-copy { min-width: 0; }

/* 2.5.0: sources under the comparison table (parts/compare.php); /compare/ loads home.css too */
.tsh-compare-src { max-width: 980px; margin: 18px auto 0; font-size: 12.5px; line-height: 1.6; color: #94a3b8; text-align: center; }
.tsh-compare-src a { color: #cbd5e1; text-decoration: underline; }
.tsh-compare-src a:hover { color: #fff; }

/* 2.4.2: a tab can hold two screens (AI Promo, Draft the plan) */
.tsh-hv-pane > .tsh-collage { width: 100%; }
/* Phones: panes differ a lot in height there, so only the open one takes space */
@media (max-width: 760px) {
  .tsh-hv-panes { display: block; }
  .tsh-hv-pane:not(.is-on) { display: none; }
}