/* ============================================================
   TextSpot — global design system / tokens
   Ported from the TextSpot redesign (Claude design files). The designs use
   inline styles per section; this file holds the shared tokens, fonts, base
   type, container, buttons, eyebrow/heading helpers and the CSS-only reveal.
   Section-specific CSS lives in each Beaver Builder module's frontend.css.
   ============================================================ */

:root {
	/* --- brand & ink --- */
	--ts-blue:        #109CF1;   /* primary */
	--ts-blue-600:    #0B6FB8;
	--ts-blue-700:    #0B5FA8;
	--ts-blue-800:    #0A3F73;
	--ts-ink:         #142B49;   /* headings / darkest text */
	--ts-ink-footer:  #112138;
	--ts-ink-soft:    #243A52;
	--ts-text:        #4A5E78;   /* body copy */
	--ts-text-2:      #5B6F88;
	--ts-muted:       #8198B4;
	--ts-faint:       #9DAFC4;
	--ts-placeholder: #9FB2C8;

	/* --- lines & surfaces --- */
	--ts-line:        #EAF1F8;
	--ts-line-2:      #DCEBF8;
	--ts-surface:     #ffffff;
	--ts-tint:        #F4F9FE;   /* alt section bg */
	--ts-tint-blue:   #E9F4FE;
	--ts-tint-cool:   #F1F6FB;
	--ts-tint-warm:   #FFF1E9;
	--ts-tint-warm-2: #FFF8F4;

	/* --- accents (the rainbow) --- */
	--ts-pink:   #FF5C93;
	--ts-orange: #FF7A4D;
	--ts-amber:  #FFB020;
	--ts-amber-ink: #E0930C;
	--ts-teal:   #11C5B3;
	--ts-purple: #7B61FF;
	--ts-rainbow: linear-gradient(90deg, #FF5C93 0%, #FF7A4D 16%, #FFB020 33%, #11C5B3 55%, #109CF1 76%, #7B61FF 100%);

	/* --- content widths (single source of truth for section containers) --- */
	--ts-content:        1200px;   /* canonical full-width container */
	--ts-content-narrow: 960px;    /* tighter reading/centered sections (FAQ, stats, calculator) */

	/* --- radii & shadow --- */
	--ts-r-sm: 8px; --ts-r-md: 11px; --ts-r-lg: 16px; --ts-r-pill: 999px;
	--ts-sh-cta:   0 6px 16px rgba(16,156,241,0.35);
	--ts-sh-card:  0 24px 50px rgba(20,43,73,0.12);

	/* --- type --- */
	--ts-display: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--ts-sans:    'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	--ts-msg:     'Nunito', -apple-system, BlinkMacSystemFont, sans-serif;
	--ts-maxw: 1180px;

	/* blueprint compatibility aliases (so shared helpers keep working) */
	--maxw: 1180px;
	--brand: #109CF1;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
	font-family: var(--ts-sans);
	color: var(--ts-ink);
	background: var(--ts-surface);
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }

.ts-wrap, .wrap { width: 100%; max-width: var(--ts-maxw); margin: 0 auto; padding: 0 40px; }

/* ---------- shared button ---------- */
.ts-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	font-family: var(--ts-sans); font-weight: 600; font-size: 15px; line-height: 1;
	padding: 13px 22px; border-radius: var(--ts-r-md); border: none; cursor: pointer;
	transition: transform .15s ease, filter .15s ease, box-shadow .15s ease;
	white-space: nowrap;
}
.ts-btn--primary { background: var(--ts-blue); color: #fff; box-shadow: var(--ts-sh-cta); }
.ts-btn--primary:hover { transform: translateY(-2px); filter: brightness(1.06); box-shadow: 0 10px 22px rgba(16,156,241,0.45); }
.ts-btn--ghost { background: #fff; color: var(--ts-ink); border: 1px solid var(--ts-line-2); }
.ts-btn--ghost:hover { transform: translateY(-2px); border-color: var(--ts-blue); }
.ts-btn--light { background: rgba(255,255,255,0.16); color: #fff; }
.ts-btn--lg { padding: 16px 30px; font-size: 16px; }

/* ---------- eyebrow + section heading helpers ---------- */
.ts-eyebrow {
	font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
	color: var(--ts-faint);
}
.ts-h2 { font-family: var(--ts-display); font-weight: 800; color: var(--ts-ink); line-height: 1.12; margin: 0; }
.ts-lead { color: var(--ts-text); font-size: 18px; line-height: 1.6; }

/* ============================================================
   HEADER / NAV + FOOTER (global chrome)
   ============================================================ */
.ts-nav { font-family: var(--ts-sans); position: fixed; top: 0; left: 0; right: 0; z-index: 60; }
/* Logged-in WP admin bar: push the whole fixed nav (and its mega menus, which are absolute to it)
   below the admin bar so they don't sit underneath it. */
body.admin-bar .ts-nav { top: 32px; }
@media screen and (max-width: 782px) { body.admin-bar .ts-nav { top: 46px; } }
.ts-navbar { transition: box-shadow .2s ease; }
.ts-nav.is-stuck .ts-navbar { box-shadow: 0 6px 20px rgba(20,43,73,0.07); }
.ts-nav__top { cursor: pointer; display: flex; align-items: center; gap: 5px; color: var(--ts-text); transition: color .12s ease; }
.ts-nav__top.is-active, .ts-nav__top:hover { color: var(--ts-blue); }
.ts-nav__login { transition: color .12s ease; }
.ts-nav__login:hover { color: var(--ts-blue); }

@keyframes tsMenuIn { 0% { opacity: 0; transform: translateY(-8px); } 100% { opacity: 1; transform: translateY(0); } }
.ts-mega {
	display: none; position: absolute; top: 100%; left: 0; right: 0; background: #fff;
	border-bottom: 1px solid var(--ts-line); box-shadow: var(--ts-sh-card); z-index: 1;
}
.ts-mega.open { display: block; animation: tsMenuIn .18s ease; }
.ts-menu-link { transition: color .12s ease; }
.ts-menu-link:hover { color: var(--ts-blue) !important; }
/* Global CTA button hover — every CTA button class lifts + brightens the same way. */
.ts-cta, .rs-cta, .fp-cta, .lh-cta, .bp-cta, .dm-btn, .air-go { transition: transform .15s ease, box-shadow .15s ease, filter .15s ease; }
.ts-cta:hover, .rs-cta:hover, .fp-cta:hover, .lh-cta:hover, .bp-cta:hover, .dm-btn:hover, .air-go:hover { transform: translateY(-2px); filter: brightness(1.06); }
.ts-foot-link { transition: color .12s ease; }
.ts-foot-link:hover { color: #fff !important; }
/* Inline links inside FAQ answers. */
.ts-faq a { color: var(--ts-blue, #109CF1); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.ts-faq a:hover { color: #0B6FB8; }
/* Linked icon-cards (e.g. feature cross-link grid): lift + accent border on hover. Non-link cards stay static. */
a.ts-iconcard--link { cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
a.ts-iconcard--link:hover { transform: translateY(-3px); border-color: #BFE0FA !important; box-shadow: 0 14px 30px rgba(20,43,73,0.10); }
a.ts-iconcard--link:hover h3 { color: var(--ts-blue, #109CF1); }
a.ts-iconcard--link .ts-iconcard__more svg { transition: transform .15s ease; }
a.ts-iconcard--link:hover .ts-iconcard__more svg { transform: translateX(3px); }

/* --- Mobile nav (added for responsiveness; design is desktop-only) --- */
.ts-burger { background: transparent; border: none; color: var(--ts-ink); cursor: pointer; padding: 6px; line-height: 0; }
.ts-mobile {
	display: none; flex-direction: column; gap: 4px; position: absolute; top: 100%; left: 0; right: 0;
	background: #fff; border-bottom: 1px solid var(--ts-line); box-shadow: var(--ts-sh-card);
	padding: 18px 24px 26px; max-height: calc(100vh - 73px); overflow-y: auto;
}
.ts-mobile.open { display: flex; }
.ts-mobile .m-collapse { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; background: transparent; border: none; text-align: left; font-family: var(--ts-sans); font-weight: 700; font-size: 16px; color: var(--ts-ink); padding: 12px 0; cursor: pointer; border-bottom: 1px solid var(--ts-line); }
.ts-mobile .m-collapse__chev { display: inline-flex; flex: none; color: #9DAFC4; transition: transform .2s ease; }
.ts-mobile .m-collapse[aria-expanded="true"] .m-collapse__chev { transform: rotate(180deg); }
.ts-mobile .m-collapse-body { display: none; flex-direction: column; gap: 2px; padding: 4px 0 14px 12px; }
.ts-mobile .m-collapse-body.open { display: flex; }
.ts-mobile .m-collapse-body a { color: var(--ts-text); font-size: 14px; padding: 7px 0; }
.ts-mobile .m-col-head { font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #9DAFC4; margin: 14px 0 2px; }
.ts-mobile .m-col-head:first-child { margin-top: 4px; }
.ts-mobile .m-col-promo { display: inline-flex !important; align-items: center; gap: 6px; font-weight: 700; color: #109CF1 !important; margin-top: 10px; }
.ts-mobile__link { font-weight: 700; font-size: 16px; color: var(--ts-ink); padding: 12px 0; border-bottom: 1px solid var(--ts-line); }
#menuBackdrop { display: none; position: fixed; inset: 73px 0 0; background: rgba(20,43,73,0.35); z-index: 55; }
#menuBackdrop.open { display: block; }

@media (max-width: 980px) {
	.ts-nav__links { display: none !important; }
	.ts-nav__login { display: none !important; }
	.ts-burger { display: inline-flex !important; }
	.ts-mega { display: none !important; }
	.ts-foot-grid { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 560px) {
	.ts-navbar { padding: 12px 20px !important; }
	.ts-foot-grid { grid-template-columns: 1fr !important; }
}

/* ============================================================
   SHARED WIDGET PRIMITIVES (used across TextSpot BB modules)
   ============================================================ */
.ts-tabbtn { cursor: pointer; border: none; background: transparent; font-family: 'Figtree', sans-serif; }
/* Calculator option buttons must shrink + wrap inside their grid cells so the card never overflows on mobile. */
.ts-calc .ts-tabbtn { min-width: 0; white-space: normal; overflow-wrap: anywhere; }
.ts-learn { transition: color .15s ease; }
.ts-learn svg { transition: transform .15s ease; }
.ts-learn:hover { text-decoration: underline; }
.ts-learn:hover svg { transform: translateX(4px); }
details.ts-faq > summary { list-style: none; cursor: pointer; }
details.ts-faq > summary::-webkit-details-marker { display: none; }
details.ts-faq[open] .ts-faq-plus { transform: rotate(45deg); }

/* Shared FAQ accordion — one look across the whole site (native <details>, no JS needed). */
.acb-faq-list { display: flex; flex-direction: column; gap: 12px; }
.acb-faq { border: 1px solid #E7EFF7; border-radius: 14px; overflow: hidden; background: #fff; }
.acb-faq > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 22px; }
.acb-faq > summary::-webkit-details-marker { display: none; }
.acb-faq-qt { margin: 0; font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 16.5px; line-height: 1.4; color: #142B49; }
.acb-faq-ico { width: 26px; height: 26px; border-radius: 7px; flex: none; background: #EAF1F8; color: #5B6F88; display: inline-flex; align-items: center; justify-content: center; transition: transform .2s ease; }
.acb-faq[open] .acb-faq-ico { transform: rotate(45deg); }
.acb-faq-a { padding: 0 22px 20px; }
.acb-faq-a p { font-size: 15.5px; line-height: 1.65; color: #4A5E78; margin: 0 0 10px; }
.acb-faq-a p:last-child { margin-bottom: 0; }
.acb-faq-a a { color: #109CF1; text-decoration: underline; text-underline-offset: 2px; }
.acb-faq-a a:hover { color: #0B6FB8; }
input[type=range].ts-range { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 999px; outline: none; }
input[type=range].ts-range::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%; background: #109CF1; border: 3px solid #fff; box-shadow: 0 2px 8px rgba(16,156,241,0.5); cursor: pointer; }
input[type=range].ts-range::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: #109CF1; border: 3px solid #fff; box-shadow: 0 2px 8px rgba(16,156,241,0.5); cursor: pointer; }

@keyframes tsFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes tsFloatSlow { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-15px); } }
@keyframes tsGiftRise { 0% { transform: translateY(40px) scale(.8); opacity: 0; } 100% { transform: translateY(0) scale(1); opacity: 1; } }
@keyframes tsConfetti { 0% { transform: translateY(0) rotate(0); opacity: 1; } 100% { transform: translateY(-140px) rotate(360deg); opacity: 0; } }

/* Generic section-heading helpers used by the simpler modules */
.ts-section-eyebrow { font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.ts-section-h2 { font-family: 'Montserrat'; font-weight: 800; font-size: 42px; line-height: 1.08; letter-spacing: -0.025em; color: #142B49; }

/* Responsive: collapse multi-column module grids on small screens */
@media (max-width: 860px) {
  .ts-grid-3 { grid-template-columns: 1fr !important; }
  .ts-grid-5, .ts-aud__grid { grid-template-columns: 1fr 1fr !important; }
  .ts-grid-2 { grid-template-columns: 1fr !important; }
  .ts-split { grid-template-columns: 1fr !important; }
  /* feature-page hero grids (2-way uses .fp-hero__grid, other features use .rs-hero__grid)
     must collapse, and their columns must be allowed to shrink so the fixed-width inbox/phone
     mockups don't force the column wider than the viewport (which then clips). */
  .fp-hero__grid, .rs-hero__grid, .tti-hero-grid { grid-template-columns: 1fr !important; }
  .fp-hero__grid > div, .rs-hero__grid > div, .tti-hero-grid > div { min-width: 0; }
  .fp-inbox .rs-tab-group { grid-template-columns: 1fr !important; }
  /* how-it-works: hide the horizontal connector + space the stacked steps */
  .ts-how__line { display: none !important; }
  .ts-how__grid { gap: 30px !important; }
  /* numbered buyer's guide: 2-up -> 1-up */
  .ts-guide__grid { grid-template-columns: 1fr !important; }
  /* Tablet display headings on standalone coded pages — keep them from sitting at desktop
     size between 600–860px. Pages may still override in their own <style> if needed. */
  .acb-page h1 { font-size: 38px !important; line-height: 1.1 !important; }
  .acb-page h2 { font-size: 28px !important; }
}

/* Safety net: never let a stray fixed-width element create horizontal scroll. */
.fl-builder-content, .acb-page main { overflow-x: clip; }
/* Hard guard — the page must never scroll horizontally on any device. */
html { overflow-x: clip; }

/* Mobile: trim display headings + hero leads across the board. */
@media (max-width: 600px) {
  .acb-page h1, .fl-builder-content h1 { font-size: 27px !important; line-height: 1.16 !important; }
  .acb-page h2, .fl-builder-content h2 { font-size: 22px !important; }
  .acb-page h3, .fl-builder-content h3 { font-size: 17px !important; }
  .bp-hero p, .bp-lead p, .fp-hero p, .rs-hero p, .lh-hero p { font-size: 15.5px !important; }
  /* tighter hero gutters so fixed-width mockups (280px phone, inbox) fit the viewport */
  .fp-hero, .rs-hero { padding-left: 22px !important; padding-right: 22px !important; }
  /* decorative floating phone overlaps + spills off-screen on mobile — hide it */
  .fp-hero-phone { display: none !important; }
  /* credit calculator: tighten so it fits + let its panels shrink (no overflow) */
  .ts-calc__card > div { padding: 26px !important; min-width: 0; }
  .ts-calc-needed { font-size: 40px !important; }
  /* stats band: reflow to a tidy 2-up grid on phones — 4 stats become 2x2, 3 stats become
     2 + 1 centered — so a wide strip never overflows and every strip behaves identically.
     (Flex + center keeps an odd last stat centered instead of stuck in a column.) */
  .ts-stats__grid { display: flex !important; flex-wrap: wrap; justify-content: center; row-gap: 20px; }
  .ts-stats__grid > div { flex: 0 0 50%; min-width: 0; border-left: none !important; padding: 8px 14px !important; }
  .ts-stats__grid > div > div:first-child { font-size: 28px !important; letter-spacing: -0.02em !important; }
  .ts-stats__grid > div > div:first-child span { font-size: 20px !important; }
  .ts-stats__grid > div > div:last-child { font-size: 12px !important; line-height: 1.35 !important; }
  /* final CTA: shrink the card padding + keep the button text on one line */
  .ts-finalcta { padding-left: 16px !important; padding-right: 16px !important; }
  .ts-finalcta > div { padding: 44px 22px !important; }
  .ts-finalcta a { white-space: nowrap; }
}

/* ---------- Reveal (CSS-only entrance, never gates the LCP) ---------- */
@keyframes ts-reveal { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
.ts-reveal, .reveal { animation: ts-reveal .7s cubic-bezier(.2,.7,.3,1) both; }
.ts-reveal[data-d="1"], .reveal[data-d="1"] { animation-delay: .07s; }
.ts-reveal[data-d="2"], .reveal[data-d="2"] { animation-delay: .14s; }
.ts-reveal[data-d="3"], .reveal[data-d="3"] { animation-delay: .21s; }
.ts-reveal[data-d="4"], .reveal[data-d="4"] { animation-delay: .28s; }
@media (prefers-reduced-motion: reduce) { .ts-reveal, .reveal { animation: none; opacity: 1; transform: none; } }

/* ---- Formidable forms styled to match the site's native form look (.acb-frm) ----
   Applied to the Contact, Demo, and Free-Migration forms. Mirrors the old .dm-field /
   .dm-btn styling so the switch to Formidable keeps the exact on-brand appearance. */
.acb-frm.frm-show-form { margin: 0; }
.acb-frm .frm_form_fields > fieldset { border: 0; margin: 0; padding: 0; }
.acb-frm .frm_fields_container { display: flex; flex-wrap: wrap; gap: 0 14px; }
.acb-frm .frm_form_field { flex: 1 1 100%; margin: 0 0 14px; padding: 0; }
.acb-frm .frm_form_field.acb-half { flex: 1 1 calc(50% - 7px); }
@media (max-width: 560px) { .acb-frm .frm_form_field.acb-half { flex-basis: 100%; } }
.acb-frm .frm_primary_label { display: block; font-family: 'Figtree', sans-serif; font-weight: 700; font-size: 13px; color: #2C3E57; margin: 0; padding: 0 0 6px; }
.acb-frm .frm_required { color: #E0533A; }
.acb-frm .frm_description { font-size: 12.5px; color: #7C8DA4; margin-top: 5px; }
.acb-frm input[type="text"], .acb-frm input[type="email"], .acb-frm input[type="tel"],
.acb-frm select, .acb-frm textarea {
	font-family: 'Figtree', sans-serif; font-size: 15px; color: #243A52;
	border: 1.5px solid #DCEBF8; border-radius: 11px; padding: 12px 14px;
	background: #fff; width: 100%; box-sizing: border-box; -webkit-appearance: none; appearance: none;
}
.acb-frm select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 9l6 6 6-6' stroke='%237C8DA4' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 13px center; padding-right: 38px; }
.acb-frm textarea { min-height: 96px; resize: vertical; }
.acb-frm input:focus, .acb-frm select:focus, .acb-frm textarea:focus { outline: none; border-color: #109CF1; box-shadow: 0 0 0 3px rgba(16,156,241,.15); }
.acb-frm .frm_submit { flex: 1 1 100%; margin: 4px 0 0; padding: 0; text-align: left; }
.acb-frm .frm_button_submit {
	width: 100%; cursor: pointer; border: none; font-family: 'Figtree', sans-serif; font-weight: 700;
	font-size: 16px; color: #fff; background: #109CF1; border-radius: 12px; padding: 15px;
	box-shadow: 0 12px 26px rgba(16,156,241,0.4); transition: transform .15s ease, filter .15s ease;
}
.acb-frm .frm_button_submit:hover { transform: translateY(-1px); filter: brightness(1.05); }
/* Hide Formidable's built-in honeypot row so it doesn't leave a gap. */
.acb-frm .frm_verify { position: absolute !important; left: -9999px !important; }
.acb-frm .frm_form_field:has(> .frm_verify), .acb-frm .frm_form_field:has(> label > .frm_verify) { display: none !important; }
/* Inline validation + success message. */
.acb-frm .frm_error { color: #E0533A; font-size: 12.5px; font-weight: 600; margin-top: 5px; }
.acb-frm .frm_error_style, .frm_forms .frm_error_style { background: #FDEEEA; border: 1px solid #F5C6BB; color: #B23A22; border-radius: 11px; padding: 12px 14px; font-size: 14px; }
.frm_message { background: #EAF7F5; border: 1px solid #BDE9E2; color: #142B49; border-radius: 14px; padding: 20px 22px; font-size: 15.5px; line-height: 1.55; }
.frm_message p { margin: 0; }