/* Site chrome shared by every bundled page: the brand lockup, the header,
   the footer and the narrow-screen corrections for both. The pages lay
   themselves out with inline styles, so these overrides need !important.
   Each page's loader links this file into the document it renders, and the
   crawlable page source in each <body> carries its own styles instead.
   Anything here must hold on every page; page-specific rules belong in that
   page's own <style id="textguru-responsive"> block. */

/* ---------- TextGuru brand lockup (see /brand/README.md) ---------- */
.tg-lockup { display: inline-flex; align-items: center; gap: 0.647em; text-decoration: none; line-height: 1; }

.tg-mark { --tg-mark-w: 3.647em; width: var(--tg-mark-w); flex: none; display: grid; gap: calc(var(--tg-mark-w) * 0.0726); justify-items: start; }

.tg-mark__sent { display: block; height: calc(var(--tg-mark-w) * 0.1774); width: calc(var(--tg-mark-w) * 0.5968); border-radius: calc(var(--tg-mark-w) * 0.0887) calc(var(--tg-mark-w) * 0.0887) calc(var(--tg-mark-w) * 0.0323) calc(var(--tg-mark-w) * 0.0887); background: #0A7CFF; justify-self: end; }

.tg-mark__reply { display: flex; align-items: center; box-sizing: border-box; height: calc(var(--tg-mark-w) * 0.25); padding: 0 calc(var(--tg-mark-w) * 0.0927); gap: calc(var(--tg-mark-w) * 0.0806); border-radius: calc(var(--tg-mark-w) * 0.129) calc(var(--tg-mark-w) * 0.129) calc(var(--tg-mark-w) * 0.129) calc(var(--tg-mark-w) * 0.0403); background: #E9E9EB; }

.tg-mark__dot { display: block; width: calc(var(--tg-mark-w) * 0.0565); height: calc(var(--tg-mark-w) * 0.0565); border-radius: 50%; background: #8E8E93; }

.tg-wordmark { font-weight: 760; letter-spacing: -0.035em; color: #1C1C1E; white-space: nowrap; }

.tg-wordmark__text { color: #0A7CFF; }

/* Reversed: on the brand blue or the near-black footer */
.tg-lockup--reversed .tg-mark__sent { background: #FFFFFF; }

.tg-lockup--reversed .tg-mark__reply { background: rgba(255,255,255,0.55); }

.tg-lockup--reversed .tg-mark__dot { background: #0A7CFF; }

.tg-lockup--reversed .tg-wordmark { color: #FFFFFF; }

.tg-lockup--reversed .tg-wordmark__text { color: #FFFFFF; }

/* Typing bounce, opt-in per placement. Same motion the product uses. */
.tg-mark--live .tg-mark__dot { animation: tg-dot 1.1s cubic-bezier(0.2, 0.9, 0.3, 1) infinite; }

.tg-mark--live .tg-mark__dot:nth-child(2) { animation-delay: 0.18s; }

.tg-mark--live .tg-mark__dot:nth-child(3) { animation-delay: 0.36s; }

@keyframes tg-dot { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(calc(var(--tg-mark-w) * -0.0323)); } }

@media (prefers-reduced-motion: reduce) { .tg-mark--live .tg-mark__dot { animation: none; } }

html {
  scroll-behavior: smooth;
}

.tg-compatibility {
  margin: 12px 0 0;
  max-width: 42ch;
  color: oklch(0.48 0.014 260);
  font-size: 16px;
  line-height: 1.5;
  text-wrap: pretty;
}

.tg-section-label {
  margin: 0 0 12px;
  color: #0A7CFF;
  font-size: 17px;
  line-height: 1.3;
  font-weight: 700;
}

@media (max-width: 1023px) {
  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  body {
    display: block !important;
    min-height: 0 !important;
  }

  [style*="min-width: 1000px"] {
    width: 100% !important;
    min-width: 0 !important;
  }
}

@media (max-width: 900px) {
  header > div[style*="max-width: 1180px"] {
    padding: 12px 28px !important;
    gap: 16px !important;
    justify-content: space-between !important;
  }

  header nav {
    display: none !important;
  }

  header a[aria-label="TextGuru home"] {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  header a[href^="sms"] {
    min-height: 44px !important;
    margin-left: 0 !important;
    padding: 11px 18px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  section > div[style*="max-width: 1180px"] {
    padding: 56px 28px 60px !important;
  }

  #top > div,
  #safety > div,
  .tg-respect-grid,
  [style*="grid-template-columns: 1.08fr 0.92fr"],
  [style*="grid-template-columns: 0.86fr 1.14fr"],
  [style*="grid-template-columns: 0.82fr 1.18fr"],
  [style*="grid-template-columns: repeat(3, 1fr)"],
  [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #top > div {
    gap: 48px !important;
  }

  #safety > div,
  .tg-respect-grid,
  [style*="grid-template-columns: 0.82fr 1.18fr"] {
    gap: 38px !important;
  }
}

@media (max-width: 767px) {
  header > div[style*="max-width: 1180px"] {
    padding: 10px 20px !important;
  }

  header span[style*="font-size: 25px"] {
    font-size: 22px !important;
  }

  header a[href^="sms"] {
    font-size: 16px !important;
    padding: 10px 16px !important;
    border-radius: 9px !important;
  }

  section {
    scroll-margin-top: 68px;
  }

  section > div[style*="max-width: 1180px"] {
    padding: 46px 20px 50px !important;
  }

  #top > div {
    padding: 44px 20px 52px !important;
    gap: 40px !important;
  }

  #top h1 {
    max-width: 100% !important;
    margin-bottom: 20px !important;
    font-size: clamp(40px, 11vw, 48px) !important;
    line-height: 1.05 !important;
    letter-spacing: -1.1px !important;
    text-wrap: balance;
  }

  #top h1 + p {
    max-width: 100% !important;
    margin-bottom: 26px !important;
    font-size: 19px !important;
    line-height: 1.5 !important;
  }

  section h2 {
    font-size: clamp(30px, 8.5vw, 36px) !important;
    line-height: 1.12 !important;
    letter-spacing: -0.6px !important;
  }

  section a[href^="sms"] {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 52px !important;
    padding: 15px 18px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 18px !important;
    line-height: 1.35 !important;
    text-align: center !important;
    border-radius: 10px !important;
  }

  section div[style*="display: flex"][style*="flex-wrap: wrap"] {
    align-items: stretch !important;
    flex-direction: column !important;
    gap: 20px !important;
  }

  section div[style*="display: flex"][style*="flex-wrap: wrap"] > a {
    margin-left: 0 !important;
  }

  [style*="grid-template-columns: 0.82fr 1.18fr"] > div:last-child {
    padding: 22px 16px !important;
  }

  footer > div {
    padding: 32px 20px 38px !important;
    flex-direction: column !important;
    gap: 18px !important;
  }

  footer nav {
    width: 100% !important;
    margin-left: 0 !important;
    flex-direction: column !important;
    gap: 0 !important;
  }

  footer nav a {
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
  }

  h1,
  h2,
  h3,
  p,
  a {
    overflow-wrap: break-word;
  }
}

@media (max-width: 374px) {
  header > div[style*="max-width: 1180px"],
  section > div[style*="max-width: 1180px"],
  #top > div,
  footer > div {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  #top h1 {
    font-size: 38px !important;
  }
}