/* "Turn Texts Into" template — page-specific styles (enqueued, versioned).
   Shared/responsive design-system rules (stat strip, headings, hero-mockup collapse) live in
   global.css; the feature-tabs look comes from modules/ts-features/css/frontend.css. Keep page
   one-offs here — never inline in the template. */

.tti-btn { transition: transform .15s ease, filter .15s ease; }
.tti-btn:hover { transform: translateY(-2px); filter: brightness(1.04); }

/* Layout grids (desktop base; global.css collapses the hero, use-case, and template grids on mobile). */
.tti-hero-grid { display: grid; grid-template-columns: 1fr 1.06fr; gap: 52px; align-items: center; }
.tti-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.tti-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.tti-how { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; position: relative; }
.tti-tpl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* Merge-tag highlight + copy button (shared with the templates library). */
.tti-mt { color: #0B6FB8; font-weight: 700; background: #EAF4FE; border-radius: 5px; padding: 0 4px; font-size: .94em; }
.tti-copy { margin-top: 14px; align-self: flex-start; display: inline-flex; align-items: center; gap: 7px; font-family: 'Figtree'; font-weight: 700; font-size: 13px; color: #0B6FB8; background: #EAF4FE; border: none; border-radius: 9px; padding: 8px 14px; cursor: pointer; transition: background .15s; }
.tti-copy:hover { background: #D9ECFC; }
.tti-copy.done { background: #E3F7F0; color: #0E9E90; }

/* Scrollable comparison table on small screens (FAQ now uses the shared .acb-faq). */
.tti-cmp-mobwrap { overflow-x: auto; }

/* Hub archive cards. */
.tth-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.tth-card { transition: transform .15s ease, box-shadow .15s ease; }
.tth-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(20,43,73,.10); }

/* Comparison table: signal that it scrolls horizontally on small screens. */
.tti-cmp-mobwrap { position: relative; }
.tti-cmp-hint { display: none; }

@media (max-width: 900px) { .tth-grid, .tti-siblings { grid-template-columns: 1fr 1fr; } }
@media (max-width: 860px) {
  /* (.tti-hero-grid collapses via global.css's shared inbox-mockup guard.) */
  .tti-grid-3, .tti-grid-2, .tti-tpl-grid, .tti-how, .tti-siblings { grid-template-columns: 1fr; }
  .tti-how__line { display: none; }
  .tti-phone { display: none; }
}
@media (max-width: 720px) {
  /* Comparison table: a scroll hint, and shrink the whole table so there's less to scroll. */
  .tti-cmp-hint { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: #8DA0B8; margin: 0 0 12px; }
  .tti-cmp-table { min-width: 460px !important; }
  .tti-cmp-table > div > div { padding: 12px 12px !important; font-size: 12.5px !important; }
  .tti-cmp-table > div > div:first-child { font-size: 12.5px !important; }
  .tti-cmp-table [style*="font-size: 20px"] { font-size: 15px !important; }
  .tti-cmp-table [style*="font-size: 17px"] { font-size: 14px !important; }
  .tti-cmp-table [style*="font-size: 13px"] { font-size: 11.5px !important; }
}
@media (max-width: 640px) {
  /* Success-story callout: stack icon / copy / CTA. */
  .tti-story { grid-template-columns: 1fr !important; text-align: center; gap: 14px !important; }
  .tti-story > span:first-child { margin: 0 auto; }
  .tti-story > span:last-child { justify-content: center; }
}
@media (max-width: 620px) {
  .tth-grid { grid-template-columns: 1fr; }
  /* Hero inbox: drop the contact sidebar so the thread isn't cramped on a phone. */
  .tti-hero-inbox { grid-template-columns: 1fr !important; }
  .tti-hero-inbox > div:first-child { display: none !important; }
}