/* TouchSuite design system.
   Loaded after each page's inline <style>, so these rules win at equal
   specificity and bring every page onto one type scale, spacing scale,
   button, card, header and footer. Colors come from tokens.css only. */

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
body, h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 88px; }
body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg, video, canvas { max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4 { color: var(--color-heading); letter-spacing: -0.02em; text-wrap: balance; }
h1 { font-size: var(--text-4xl); line-height: var(--leading-tight); font-weight: 800; }
h2 { font-size: var(--text-3xl); line-height: 1.2; font-weight: 800; }
h3 { font-size: var(--text-lg); line-height: var(--leading-snug); font-weight: 700; letter-spacing: -0.01em; }
p { text-wrap: pretty; }
a { color: var(--color-link); text-underline-offset: 3px; }
strong { font-weight: 700; }
.container { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
@media (max-width: 480px) { :root { --gutter: 20px; } }

.blue { color: var(--ts-blue-750); }
.muted { color: var(--ts-muted); }
.section-label { color: var(--ts-blue-750); }
.mono { font-family: var(--font-mono); }

:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
  border-radius: 4px;
}
.skip-link {
  position: absolute; left: 12px; top: -48px; z-index: 1000;
  background: var(--ts-navy-900); color: var(--ts-on-dark);
  padding: 10px 16px; border-radius: var(--radius-sm); font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: 12px; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Eyebrow / badge ---------- */
.badge, .eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--ts-blue-tint);
  border: 1px solid var(--ts-blue-line);
  border-radius: var(--radius-pill);
  padding: 6px 14px;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ts-blue-750);
  margin-bottom: var(--space-4);
}
.badge::before, .eyebrow::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--ts-blue-500); flex: none;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 12px 24px;
  border-radius: var(--radius-md);
  font-family: var(--font-sans); font-size: var(--text-base); font-weight: 600; line-height: 1.2;
  text-decoration: none; cursor: pointer;
  border: 1.5px solid transparent;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn[disabled], .btn[aria-disabled="true"], .btn:disabled {
  opacity: 0.55; cursor: not-allowed; transform: none; box-shadow: none;
}
/* Primary button (session 10). One style sitewide, native to the navy/blue palette:
   on light sections the brand blue-to-navy fill with white text (7.3:1 or more);
   on dark scenes (homepage header and hero, equipment band, closing CTA, footer, any
   .on-dark wrapper) a white-to-light-blue fill with navy text and a soft glow on hover. */
.btn-primary {
  background: linear-gradient(180deg, var(--ts-blue-800) 0%, var(--ts-blue-950) 100%); color: var(--ts-white);
  border-color: var(--ts-blue-800);
  box-shadow: 0 6px 18px rgba(0, 53, 102, 0.22);
}
.btn-primary:hover { background: var(--ts-blue-950); border-color: var(--ts-blue-950); color: var(--ts-white); box-shadow: 0 10px 26px rgba(0, 87, 160, 0.32); }
.btn-primary:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }
.site-header.is-overlay .sh-actions .btn-primary, .hero .btn-primary, .eq .btn-primary, .cta-band .btn-primary,
.site-footer .btn-primary, .on-dark .btn-primary {
  background: linear-gradient(180deg, var(--ts-white) 0%, var(--ts-sky-140) 100%); color: var(--ts-navy-900);
  border-color: rgba(255, 255, 255, 0.9); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}
.site-header.is-overlay .sh-actions .btn-primary:hover, .hero .btn-primary:hover, .eq .btn-primary:hover, .cta-band .btn-primary:hover,
.site-footer .btn-primary:hover, .on-dark .btn-primary:hover {
  background: linear-gradient(180deg, var(--ts-white) 0%, var(--ts-sky-200) 100%); color: var(--ts-navy-900); border-color: var(--ts-white);
  box-shadow: 0 0 0 4px rgba(142, 207, 238, 0.28), 0 10px 30px rgba(0, 167, 239, 0.38);
}
.site-header.is-overlay .sh-actions .btn-primary:focus-visible, .hero .btn-primary:focus-visible, .eq .btn-primary:focus-visible,
.cta-band .btn-primary:focus-visible, .site-footer .btn-primary:focus-visible, .on-dark .btn-primary:focus-visible { outline-color: var(--ts-on-dark); }
.btn-outline, .btn-secondary {
  background: var(--ts-white); color: var(--ts-navy-900);
  border-color: var(--ts-line);
}
.btn-outline:hover, .btn-secondary:hover { border-color: var(--ts-blue-750); color: var(--ts-blue-750); background: var(--ts-white); }
.btn-find-solution { background: var(--ts-white); color: var(--ts-navy-900); border-color: var(--ts-line); box-shadow: none; }
.btn-find-solution:hover { background: var(--ts-white); color: var(--ts-blue-750); border-color: var(--ts-blue-750); box-shadow: none; }
.btn-on-dark {
  background: transparent; color: var(--ts-on-dark); border-color: rgba(255, 255, 255, 0.45);
}
.btn-on-dark:hover { background: rgba(255, 255, 255, 0.08); color: var(--ts-on-dark); border-color: var(--ts-on-dark); }
.btn svg { flex: none; }

/* ---------- Sections ---------- */
section { padding-block: var(--section-y); }
.section-head { max-width: 760px; margin: 0 auto var(--space-7); text-align: center; }
.section-head p:not(.badge) { color: var(--ts-muted); font-size: var(--text-md); margin-top: var(--space-3); }
.bg-mid, .alt-row { background: var(--ts-sky-50); }
.bg-white { background: var(--ts-white); }

/* ---------- Cards (component and legacy names) ---------- */
.card,
.feature-card, .why-card, .value-card, .sol-card, .cap-card, .biz-card, .gateway-card,
.risk-card, .iu-card, .blog-card, .erp-step, .problem-item, .resource-pill, .clover-model-card {
  background: var(--ts-white);
  border: 1px solid var(--ts-line-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.card:hover,
.feature-card:hover, .why-card:hover, .value-card:hover, .sol-card:hover, .cap-card:hover, .biz-card:hover,
.gateway-card:hover, .iu-card:hover, .blog-card:hover {
  box-shadow: var(--shadow-2);
  border-color: var(--ts-blue-line);
}
.feature-card h3, .why-card h3, .value-card h3, .sol-card h3, .cap-card h3, .biz-card h3 { color: var(--ts-navy-900); }
.feature-card p, .why-card p, .value-card p, .sol-card p, .cap-card p, .biz-card p, .gateway-card p { color: var(--ts-muted); }

/* Icon tiles */
.icon-tile, .feature-icon, .sol-icon, .cap-icon, .feat-icon, .biz-icon, .prob-icon, .res-ico, .erp-stat-icon, .iu-category-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; flex: none;
  border-radius: 12px;
  background: var(--ts-blue-tint);
  color: var(--ts-blue-750);
  border: 1px solid var(--ts-blue-line);
}
.icon-tile svg, .feature-icon svg, .biz-icon svg { width: 24px; height: 24px; }

/* Tags / pills */
.tag, .pos-tag, .industry-tag, .feature-pill, .method-pill, .integration-pill, .iu-card-tag, .model-badge {
  border-radius: var(--radius-pill);
}

/* Stats */
.stat-block { display: flex; flex-direction: column; gap: 2px; }
.stat-block .stat-value { font-size: var(--text-2xl); font-weight: 800; color: var(--ts-navy-900); letter-spacing: -0.02em; line-height: 1.1; }
.stat-block .stat-label { font-size: var(--text-sm); color: var(--ts-muted); }

/* Testimonials */
.testimonial-card {
  background: var(--ts-white); border: 1px solid var(--ts-line-soft);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-1);
}
.testimonial-card blockquote { color: var(--ts-ink); font-size: var(--text-base); line-height: 1.7; }
.star { color: var(--ts-gold-ink); }

/* Breadcrumb */
.site-breadcrumb, .breadcrumb { font-size: var(--text-sm); color: var(--ts-muted); }
.site-breadcrumb a, .breadcrumb a { color: var(--ts-blue-750); text-decoration: none; }
.site-breadcrumb a:hover, .breadcrumb a:hover { text-decoration: underline; }
.bc-current { color: var(--ts-muted); }

/* ---------- FAQ accordion (details and legacy checkbox variants) ---------- */
.faq-item, .bp-faq-item {
  border: 1px solid var(--ts-line-soft);
  border-radius: var(--radius-md);
  background: var(--ts-white);
  overflow: hidden;
}
.faq-item + .faq-item, .bp-faq-item + .bp-faq-item { margin-top: var(--space-3); }
.faq-question, .bp-faq-q, .faq-item > summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  min-height: 56px; padding: var(--space-4) var(--space-5);
  font-weight: 600; color: var(--ts-navy-900); cursor: pointer; list-style: none;
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::after {
  content: ""; width: 10px; height: 10px; flex: none;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-3px); transition: transform var(--dur) var(--ease);
}
.faq-item[open] > summary::after { transform: rotate(-135deg) translateY(-3px); }
.faq-answer, .bp-faq-a, .faq-item > .faq-body { color: var(--ts-muted); }
.faq-item > .faq-body { padding: 0 var(--space-5) var(--space-5); }
.faq-item input[type="checkbox"]:focus-visible + .faq-question { outline: 3px solid var(--color-focus); outline-offset: -3px; }

/* ---------- Forms ---------- */
input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="url"], input[type="search"],
select, textarea {
  font-family: var(--font-sans); font-size: var(--text-base);
  color: var(--ts-ink);
  background-color: var(--ts-white);
  border: 1.5px solid var(--ts-slate-500);
  border-radius: var(--radius-md);
  min-height: 48px;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
textarea { min-height: 120px; }
input:hover, select:hover, textarea:hover { border-color: var(--ts-slate-700); }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--color-focus);
  box-shadow: 0 0 0 3px var(--color-focus);
}
input:disabled, select:disabled, textarea:disabled { background: var(--ts-sky-50); color: var(--ts-muted); cursor: not-allowed; }
label { color: var(--ts-navy-800); }
::placeholder { color: var(--ts-muted); opacity: 1; }
button[type="submit"]:not(.btn) {
  min-height: 48px; border-radius: var(--radius-md);
  background: var(--ts-blue-500); color: var(--ts-navy-900); font-weight: 600;
  border: 1.5px solid var(--ts-blue-500); cursor: pointer;
}
button[type="submit"]:not(.btn):hover { background: var(--ts-blue-600); }
button[type="submit"]:disabled { opacity: 0.55; cursor: not-allowed; }

/* ---------- Inner page hero (legacy .page-hero) ---------- */
.page-hero {
  position: relative;
  background:
    radial-gradient(1200px 400px at 85% -10%, var(--ts-blue-tint-strong), transparent 60%),
    linear-gradient(180deg, var(--ts-sky-50), var(--ts-white));
  border-bottom: 1px solid var(--ts-line-soft);
  padding-block: clamp(48px, 7vw, 88px);
}
.page-hero h1 { color: var(--ts-navy-900); max-width: 18ch; }
.page-hero-content { max-width: 860px; }
.page-hero-sub, .page-hero p { color: var(--ts-muted); font-size: var(--text-md); max-width: 68ch; }

/* ---------- Legal pages ---------- */
.legal-section h2 { font-size: var(--text-xl); margin-bottom: var(--space-3); }
.legal-section p, .legal-section li { color: var(--ts-ink); max-width: 75ch; }

/* ---------- Shared header ---------- */
/* shared.js injects the header after the first paint. Reserve its height
   (72px bar + 1px border) until then so the page does not shift; shared.js
   adds .ts-chrome to <html> in the same task that inserts the header. */
html:not(.ts-chrome) body { padding-top: 73px; }
.site-header {
  position: sticky; top: 0; z-index: 900;
  background: rgba(255, 255, 255, 0.96);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--ts-line-soft);
}
.site-header .sh-inner {
  max-width: 1320px; margin: 0 auto; padding: 0 var(--gutter);
  height: 72px; display: flex; align-items: center; gap: var(--space-5);
}
.site-header .sh-logo { display: inline-flex; align-items: center; flex: none; min-height: 44px; }
.site-header .sh-logo img { height: 34px; width: auto; display: block; }
.site-header .sh-nav {
  flex: 1; display: flex; justify-content: center;
  /* neutralise legacy page rules written for a bare `nav` element */
  position: static; height: auto; background: transparent; box-shadow: none; border: 0;
  -webkit-backdrop-filter: none; backdrop-filter: none; z-index: auto; top: auto;
}
.site-header .sh-menu { list-style: none; display: flex; align-items: center; gap: 2px; margin: 0; padding: 0; }
.site-header .sh-item { position: relative; display: flex; align-items: center; }
.site-header .sh-link {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px;
  font-size: 0.9rem; font-weight: 500; color: var(--ts-navy-800);
  text-decoration: none; border-radius: var(--radius-sm); white-space: nowrap;
}
.site-header .sh-link:hover, .site-header .sh-link[aria-current="page"] { color: var(--ts-blue-750); }
.site-header .sh-link[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--ts-blue-500); border-radius: 0; }
.site-header .sh-sub-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 44px; margin-left: -8px; padding: 0;
  background: none; border: 0; color: var(--ts-muted); cursor: pointer; border-radius: var(--radius-sm);
}
.site-header .sh-sub-toggle svg { transition: transform var(--dur) var(--ease); }
.site-header .sh-sub-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.site-header .sh-sub {
  position: absolute; top: calc(100% + 4px); left: 0; z-index: 950;
  min-width: 260px; padding: var(--space-2);
  list-style: none; margin: 0;
  background: var(--ts-white); border: 1px solid var(--ts-line-soft);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-3);
  display: none;
}
.site-header .sh-item.is-open > .sh-sub { display: block; }
@media (hover: hover) and (min-width: 1200px) {
  .site-header .sh-item:hover > .sh-sub { display: block; }
  .site-header .sh-item::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 8px; }
}
.site-header .sh-sub a {
  display: flex; align-items: center; min-height: 40px; padding: 8px 12px;
  font-size: 0.9rem; color: var(--ts-navy-800); text-decoration: none; border-radius: var(--radius-sm);
}
.site-header .sh-sub a:hover { background: var(--ts-sky-50); color: var(--ts-blue-750); }
.site-header .sh-sub .sh-divider { height: 1px; background: var(--ts-line-soft); margin: 6px 8px; }
.site-header .sh-sub .sh-label {
  padding: 8px 12px 4px; font-family: var(--font-mono); font-size: 0.7rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ts-muted);
}
.site-header .sh-actions { display: flex; align-items: center; gap: var(--space-3); flex: none; }
.site-header .sh-actions .btn { min-height: 44px; padding: 10px 18px; font-size: 0.9rem; }
.site-header .nav-toggle {
  display: none; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0; margin-left: auto;
  background: none; border: 1px solid var(--ts-line); border-radius: var(--radius-md);
  color: var(--ts-navy-900); cursor: pointer;
}
.site-header .nav-toggle .bar { display: block; margin: 0; width: 20px; height: 2px; background: currentColor; border-radius: 2px; transition: transform var(--dur) var(--ease), opacity var(--dur); }
.site-header .nav-toggle .bars { display: grid; gap: 4px; }
.site-header.is-open .nav-toggle .bar:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.site-header.is-open .nav-toggle .bar:nth-child(2) { opacity: 0; }
.site-header.is-open .nav-toggle .bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 1199px) {
  .site-header .nav-toggle { display: inline-flex; }
  .site-header .sh-actions { display: none; }
  .site-header .sh-nav {
    display: none; position: fixed; inset: 72px 0 0 0; z-index: 899;
    background: var(--ts-white); overflow-y: auto; overscroll-behavior: contain;
    padding: var(--space-4) var(--gutter) var(--space-7);
    border-top: 1px solid var(--ts-line-soft);
  }
  .site-header.is-open .sh-nav { display: block; }
  .site-header .sh-menu { flex-direction: column; align-items: stretch; gap: 0; }
  .site-header .sh-item { flex-wrap: wrap; border-bottom: 1px solid var(--ts-line-soft); }
  .site-header .sh-link { flex: 1; min-height: 52px; font-size: 1rem; font-weight: 600; padding: 0 4px; }
  .site-header .sh-link[aria-current="page"] { box-shadow: none; }
  .site-header .sh-sub-toggle { width: 52px; height: 52px; margin: 0; }
  .site-header .sh-sub { position: static; box-shadow: none; border: 0; border-radius: 0; min-width: 0; width: 100%; padding: 0 0 var(--space-3) var(--space-3); background: transparent; }
  .site-header .sh-sub a { min-height: 44px; font-size: 0.95rem; }
  .site-header .sh-mobile-cta { display: flex !important; flex-direction: column; gap: var(--space-3); padding-top: var(--space-5); }
  .site-header .sh-mobile-cta .btn { width: 100%; }
  body.nav-locked { overflow: hidden; }
}
.site-header .sh-mobile-cta { display: none; }

/* ---------- Shared footer ---------- */
.site-footer { background: var(--ts-navy-900); color: var(--ts-on-dark-muted); padding: var(--space-8) 0 0; margin-top: 0; }
.site-footer a { color: var(--ts-on-dark-muted); text-decoration: none; }
.site-footer a:hover { color: var(--ts-on-dark); text-decoration: underline; }
.site-footer a.btn-primary, .site-footer a.btn-primary:hover { color: var(--ts-navy-900); text-decoration: none; }
.site-footer .sf-inner { max-width: 1320px; margin: 0 auto; padding: 0 var(--gutter); }
.site-footer .sf-cta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-5);
  padding: var(--space-6); margin-bottom: var(--space-7);
  border: 1px solid rgba(255, 255, 255, 0.12); border-radius: var(--radius-xl);
  background: linear-gradient(135deg, rgba(0, 167, 239, 0.16), rgba(0, 167, 239, 0.04));
}
.site-footer .sf-cta h2 { color: var(--ts-on-dark); font-size: var(--text-2xl); margin: 0 0 4px; }
.site-footer .sf-cta p { margin: 0; color: var(--ts-on-dark-muted); }
.site-footer .sf-stats { display: flex; flex-wrap: wrap; gap: var(--space-6); margin-top: var(--space-4); }
.site-footer .sf-stat strong { display: block; color: var(--ts-on-dark); font-size: var(--text-xl); font-weight: 800; letter-spacing: -0.02em; }
.site-footer .sf-stat span { font-size: var(--text-sm); }
.site-footer .sf-grid {
  display: grid; grid-template-columns: 1.5fr repeat(5, 1fr); gap: var(--space-6);
  padding-bottom: var(--space-7);
}
.site-footer .sf-grid > * { min-width: 0; }
.site-footer .sf-brand img { height: 34px; width: auto; background: var(--ts-white); padding: 8px 12px; border-radius: var(--radius-md); box-sizing: content-box; }
.site-footer .sf-brand p { font-size: var(--text-sm); margin: var(--space-4) 0; max-width: 34ch; }
.site-footer .sf-contact { list-style: none; padding: 0; margin: 0 0 var(--space-4); display: grid; gap: var(--space-2); }
.site-footer .sf-contact a { display: inline-flex; align-items: flex-start; gap: 10px; font-size: var(--text-sm); min-height: 28px; }
.site-footer .sf-contact svg { flex: none; margin-top: 3px; color: var(--ts-on-dark-blue); }
.site-footer .sf-social { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; padding: 0; margin: 0; }
.site-footer .sf-social a {
  display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
  border-radius: var(--radius-md); border: 1px solid rgba(255, 255, 255, 0.16);
}
.site-footer .sf-social a:hover { background: rgba(255, 255, 255, 0.08); text-decoration: none; }
.site-footer h3.sf-h {
  font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ts-on-dark); margin: 0 0 var(--space-4); font-family: var(--font-sans);
}
.site-footer .sf-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 2px; }
.site-footer .sf-col a { display: inline-flex; align-items: center; min-height: 32px; font-size: var(--text-sm); line-height: 1.35; }
.site-footer .sf-legal { font-size: var(--text-xs); line-height: 1.6; color: var(--ts-on-dark-muted); max-width: 46ch; }
.site-footer .sf-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding: var(--space-5) 0; display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3);
  font-size: var(--text-sm);
}
.site-footer .sf-bottom ul { display: flex; gap: var(--space-5); list-style: none; padding: 0; margin: 0; }
@media (max-width: 1100px) {
  .site-footer .sf-grid { grid-template-columns: repeat(3, 1fr); }
  .site-footer .sf-brand { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .site-footer .sf-grid { grid-template-columns: 1fr 1fr; gap: var(--space-5); }
  .site-footer .sf-cta { padding: var(--space-5); }
  .site-footer .sf-cta .btn { width: 100%; }
}

/* Hide the old runtime-injected chrome if any page still carries it. */
nav.legacy-nav, footer.legacy-footer { display: none !important; }

/* ---------- Rate explainer on /pricing (session 5) ----------
   CSS only. Native radios (keyboard and screen-reader ready) switch between
   interchange-plus and a blended rate; the bars regrow on each switch and
   reveal on scroll where scroll-driven animations exist. Not to scale, no
   numbers: it shows structure only. */
.rate-explainer { padding-block: var(--section-y); background: var(--ts-white); }
.rate-explainer .rx-layout { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--space-8); align-items: center; }
.rate-explainer .rx-intro h2 { margin: var(--space-3) 0 var(--space-4); max-width: 18ch; }
.rate-explainer .rx-intro p { color: var(--ts-muted); max-width: 52ch; margin: 0; }
.rate-explainer .rx-panel {
  background: linear-gradient(160deg, var(--ts-navy-900), var(--ts-blue-975));
  color: var(--ts-on-dark); border-radius: var(--radius-xl); padding: clamp(20px, 4vw, 40px); box-shadow: var(--shadow-3);
}
.rate-explainer .rx-switch { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.rate-explainer .rx-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.rate-explainer .rx-switch label {
  display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 8px 14px; text-align: center;
  border-radius: var(--radius-pill); border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.06); color: var(--ts-on-dark); font-weight: 600; cursor: pointer;
  transition: background-color 200ms var(--ease), color 200ms var(--ease), border-color 200ms var(--ease);
}
.rate-explainer .rx-switch label:hover { border-color: rgba(255, 255, 255, 0.5); }
.rate-explainer .rx-switch input:checked + label { background: var(--ts-blue-500); border-color: var(--ts-blue-500); color: var(--ts-navy-900); }
.rate-explainer .rx-switch input:focus-visible + label { outline: 3px solid var(--ts-on-dark-blue); outline-offset: 3px; }
.rate-explainer .rx-views { grid-column: 1 / -1; margin-top: var(--space-6); }
.rate-explainer .rx-view { display: none; }
.rate-explainer #rx-ip:checked ~ .rx-views .rx-view-ip,
.rate-explainer #rx-blend:checked ~ .rx-views .rx-view-blend { display: block; }
.rate-explainer .rx-bar { display: flex; gap: 4px; height: 56px; border-radius: 14px; overflow: hidden; }
.rate-explainer .rx-seg { display: block; height: 100%; transform-origin: left center; animation: rx-grow 800ms var(--ease) both; }
.rate-explainer .rx-seg-network { flex: 0 0 80%; background: linear-gradient(90deg, var(--ts-blue-850), var(--ts-blue-650)); }
.rate-explainer .rx-seg-margin { flex: 1 1 auto; background: var(--ts-blue-500); animation-delay: 300ms; }
.rate-explainer .rx-seg-blend {
  flex: 1 1 auto;
  background: linear-gradient(90deg, var(--ts-blue-850), var(--ts-slate-500) 55%, var(--ts-blue-650));
}
@keyframes rx-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.rate-explainer .rx-legend { display: grid; gap: var(--space-4); margin: var(--space-5) 0 0; }
.rate-explainer .rx-legend dt { display: flex; align-items: flex-start; gap: 10px; font-weight: 700; color: var(--ts-on-dark); }
.rate-explainer .rx-legend dd { margin: 4px 0 0 24px; color: var(--ts-on-dark-muted); }
.rate-explainer .rx-key { flex: none; width: 14px; height: 14px; border-radius: 4px; margin-top: 0.3em; }
.rate-explainer .rx-key-network { background: var(--ts-blue-650); }
.rate-explainer .rx-key-margin { background: var(--ts-blue-500); }
.rate-explainer .rx-key-blend { background: linear-gradient(90deg, var(--ts-blue-850), var(--ts-slate-500), var(--ts-blue-650)); }
.rate-explainer .rx-note { margin: var(--space-5) 0 0; font-size: var(--text-sm); color: var(--ts-on-dark-muted); }
@media (max-width: 900px) {
  .rate-explainer .rx-layout { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
}
@media (max-width: 480px) {
  .rate-explainer .rx-switch label { font-size: var(--text-sm); padding-inline: 10px; }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .rate-explainer .rx-bar { animation: rx-wipe linear both; animation-timeline: view(); animation-range: entry 20% cover 40%; }
    @keyframes rx-wipe { from { clip-path: inset(0 100% 0 0 round 14px); } to { clip-path: inset(0 0 0 0 round 14px); } }
  }
}
@media (prefers-reduced-motion: reduce) {
  .rate-explainer .rx-seg { animation: none; }
}

/* ---------- Motion ---------- */
.reveal { opacity: 0; transform: translateY(12px); transition: opacity 500ms var(--ease), transform 500ms var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important; scroll-behavior: auto !important;
  }
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; }
}

/* ---------- Print ---------- */
@media print {
  .site-header, .site-footer { display: none; }
}

/* ---------- Contrast fixes for page-level inline styles ----------
   These page rules used the logo blue (#00a7ef, 2.7:1 on white) or #0090d4 for
   small text. site.css loads after the inline styles, so these win on order. */
.learn-more, .wu-value-num, .catalog-link, .why-num, .team-bio-title, .industry-card-link,
.wk-card-title, .rotate-word, .legal-hero h1 .blue, .hero h1 .rotate-word, .processor-note strong { color: var(--ts-blue-750); }
.iu-btn-primary, .cl-btn-primary, .wk-card .btn-wk { background: var(--ts-blue-500); color: var(--ts-navy-900); }
.iu-btn-primary:hover, .cl-btn-primary:hover, .wk-card .btn-wk:hover { background: var(--ts-blue-600); color: var(--ts-navy-900); }
.footer-legal, .footer-copy { color: var(--ts-muted); }
.wu-value-num { opacity: 1; }
.savings-callout p { color: var(--ts-navy-900); }
.stat-item .stat-label { opacity: 1; }
.wk-support-block a[href^="tel:"], .wk-card a[href^="tel:"], .legal-card p a { text-decoration: underline; text-underline-offset: 2px; }

/* Blogs section (DECISIONS #35): the hand-written posts (.bp-*) and the /blog
   index cards use the same type scale as the generated article pages. */
.bp-header h1 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem); line-height: 1.12; }
.bp-body p, .bp-body li { font-size: 1.0625rem; line-height: 1.75; }
.bp-body h2 { font-size: var(--text-2xl); line-height: 1.2; }
.bp-body h3 { font-size: var(--text-lg); line-height: 1.3; }
.bp-faq-a { font-size: var(--text-base); line-height: 1.7; color: var(--ts-ink); }
.blog-card { position: relative; }
.blog-card h3 { font-size: var(--text-lg); line-height: 1.3; }
.blog-excerpt { font-size: var(--text-base); }
.blog-date, .blog-author { font-size: var(--text-sm); }
.blog-read { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--text-sm); }
.blog-read::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.blog-read:focus-visible::after { outline: 2px solid var(--ts-blue-750); outline-offset: 2px; }

/* Design run 1 fixes. Blue CTA panels: solid navy text (>= 4.9:1 on blue-500
   to blue-600); panels whose gradient ran to blue-720 are flat blue-500. */
.review-cta p, .big-cta p, .cta-card p, .cta-check-list li, .founding-card p,
.integration-banner p, .savings-callout p, .pricing-banner p, .pricing-period,
.stats-banner-label { color: var(--ts-navy-900); opacity: 1; }
.cta-card, .founding-card { background: var(--ts-blue-500); }
/* Headings on navy sections stay white; accent words use the logo blue. */
.cl-hero h1, .cl-cta h2, .iu-hero h1, .iu-cta h2, .erp-footer-actions h2 { color: var(--ts-white); }
.cl-hero h1 span, .iu-hero h1 span, .erp-hero-text h1 span { color: var(--ts-blue-500); }
/* Centred page heroes: the 18ch h1 box is centred with the rest. */
.page-hero-content h1 { margin-inline: auto; }
.page-hero > .page-hero-content { padding-inline: var(--gutter); }
/* Legal body text at the base size. */
.legal-section p, .legal-section li { font-size: var(--text-base); }
/* Lucide icons that replaced emoji (brief: no emoji as icons). */
svg[data-emoji-icon] { width: 1em; height: 1em; vertical-align: -0.125em; color: var(--ts-blue-750); flex-shrink: 0; }
/* Inline two-column grids stack on small screens. */
@media (max-width: 900px) { .stack-900 { grid-template-columns: 1fr !important; gap: 32px !important; } }
@media (max-width: 600px) { .stack-600 { grid-template-columns: 1fr !important; } }
/* Comparison grids keep their columns and scroll sideways on small screens. */
@media (max-width: 900px) {
  .comparison-grid { grid-template-columns: minmax(150px, 1.4fr) repeat(4, minmax(104px, 1fr)) !important; overflow-x: auto !important; }
}
.comparison-grid:focus-visible { outline: 2px solid var(--ts-blue-750); outline-offset: 2px; }
@media (max-width: 600px) { .iso-feature-grid { grid-template-columns: 1fr !important; } }
.iso-feature-grid li, .iso-feature-grid p { font-size: var(--text-base); }
.team-bio-text p { max-width: 68ch; font-size: var(--text-base); }
.social-btn { width: 44px; height: 44px; background: var(--ts-sky-100); border-color: var(--ts-line-soft); color: var(--ts-blue-750); }
.social-btn svg { width: 20px; height: 20px; }
.screenshots-grid img:only-child { grid-column: 1 / -1; }
.iu-card-logo svg { width: 22px; height: 22px; }
/* Blogs (design run 2): one post card for the /blog index and "Related posts",
   on tokens; FAQ cards on hand-written posts aligned; no sub-16px text. */
.blog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }
@media (max-width: 1024px) { .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .blog-grid { grid-template-columns: 1fr; } }
.blog-card { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-6, 32px); background: var(--ts-white); border: 1px solid var(--ts-line-soft); border-radius: var(--radius-xl); transition: border-color .2s, transform .2s; }
.blog-card:hover { border-color: var(--ts-blue-500); transform: translateY(-3px); }
.blog-card h3 { margin: 0; color: var(--ts-navy-900); }
.blog-category { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.08em; color: var(--ts-blue-750); }
.blog-excerpt { color: var(--ts-muted); line-height: 1.65; flex: 1; margin: 0; }
.blog-meta { display: flex; justify-content: space-between; align-items: center; margin-top: auto; }
.blog-date { color: var(--ts-muted); }
.blog-read { font-weight: 600; color: var(--ts-blue-750); text-decoration: none; }
.bp-faq-q { font-size: var(--text-md); }
.bp-quick p, .bp-cta p { font-size: var(--text-base); }
.bp-faq-item { padding: 0; }
.bp-faq-a { padding: 0 var(--space-5) var(--space-5); }
.bp-faq-item:last-child { border-bottom: 1px solid var(--ts-line-soft); }
.bp-meta, .bp-breadcrumb { font-size: var(--text-sm); }
/* Design run 2: centred section eyebrows on /why-us, welcome h1 measure,
   readable reassurance pills on /apply-now. */
.wu-reviews-inner > .badge, .wu-partners-inner > .badge { display: flex; width: fit-content; margin-inline: auto; }
.wk-hero h1 { max-width: 22ch; }
.reassurance-pill { color: var(--ts-navy-900); }
/* Design run 3 (part B minors): card body text on the ERP, TS Connect and
   Integrations Universe pages at the 16px base size. */
.problem-item p, .sol-body p, .cap-card p, .erp-step p, .iu-card-desc,
.cl-prod-card p, .cl-erp-tile span, .cl-step p { font-size: var(--text-base); }
/* Mobile menu (tester run 7). A backdrop-filter makes the header the
   containing block for the fixed .sh-nav panel, collapsing it to ~65px, so
   below the desktop breakpoint the header is solid white with no filter.
   Legacy styles.css draws every span in .nav-toggle as a bar; only .bar may. */
@media (max-width: 1199px) {
  .site-header { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--ts-white); }
}
.site-header .nav-toggle .bars { width: auto; height: auto; background: none; margin: 0; }
.site-header .nav-toggle .visually-hidden { width: 1px; height: 1px; background: none; margin: -1px; }

/* ---------- Overlay header (session 6) ----------
   Pages whose first section is dark opt in with <html data-header="overlay">
   (only the homepage today). The header is fixed (it follows the page from the
   top, owner request) and transparent over that section, with a white logo and
   white links; shared.js adds .is-solid as soon as the page scrolls, and the bar fades to solid navy. Trade-off: a fixed layer over the
   animated WebGL canvas costs mobile Lighthouse time (DECISIONS #62, #65). The
   header is out of flow, so nothing is reserved for it and its injection cannot
   shift the page. Dropdown panels and the mobile menu panel stay white with dark text. */
html[data-header="overlay"]:not(.ts-chrome) body { padding-top: 0; }
.site-header.is-overlay {
  position: fixed; top: 0; left: 0; right: 0;
  /* A light top shade keeps white text at AA over the brightest hero frames. */
  background: linear-gradient(180deg, rgba(10, 18, 32, 0.55), rgba(10, 18, 32, 0));
  -webkit-backdrop-filter: none; backdrop-filter: none;
  /* No border: a transparent border let the top shade repeat into that row and
     draw a thin dark line between the header and the hero (session 7). */
  border-bottom: 0; padding-bottom: 1px;
  transition: background-color 300ms var(--ease), border-color 300ms var(--ease), box-shadow 300ms var(--ease);
}
.site-header.is-overlay::before {
  /* The solid state fades in as a layer (a gradient cannot transition). */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--ts-navy-900); /* opaque: no blur below 1200 px */
  opacity: 0; transition: opacity 300ms var(--ease);
}
.site-header.is-overlay.is-solid, .site-header.is-overlay.is-open {
  box-shadow: 0 8px 24px -12px rgba(0, 8, 20, 0.6);
}
.site-header.is-overlay.is-solid::before, .site-header.is-overlay.is-open::before { opacity: 1; }
@media (min-width: 1200px) {
  .site-header.is-overlay.is-solid { -webkit-backdrop-filter: saturate(160%) blur(12px); backdrop-filter: saturate(160%) blur(12px); }
  .site-header.is-overlay.is-solid::before { background: rgba(15, 27, 45, 0.88); }
}
/* White bar content: logo, top-level links, chevrons and the menu button. */
.site-header.is-overlay :focus-visible { outline-color: var(--ts-on-dark-blue); }
.site-header.is-overlay .nav-toggle { color: var(--ts-on-dark); border-color: rgba(255, 255, 255, 0.45); }
.site-header.is-overlay .nav-toggle:hover { background: rgba(255, 255, 255, 0.1); border-color: var(--ts-on-dark); }
@media (min-width: 1200px) {
  .site-header.is-overlay .sh-link, .site-header.is-overlay .sh-sub-toggle { color: var(--ts-on-dark); transition: color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
  .site-header.is-overlay .sh-link:hover, .site-header.is-overlay .sh-item.is-open > .sh-link { color: var(--ts-on-dark); box-shadow: inset 0 -2px 0 var(--ts-on-dark-blue); border-radius: 0; }
  /* Keep the focus ring inside the link so it stops before the chevron button. */
  .site-header.is-overlay .sh-link:focus-visible { outline-offset: -3px; }
  .site-header.is-overlay .sh-sub-toggle { margin-left: -4px; }
  .site-header.is-overlay .sh-sub-toggle:hover, .site-header.is-overlay .sh-sub-toggle[aria-expanded="true"] { color: var(--ts-on-dark); background: rgba(255, 255, 255, 0.12); }
  .site-header.is-overlay .sh-link[aria-current] { color: var(--ts-on-dark); box-shadow: inset 0 -2px 0 var(--ts-on-dark-blue); }
  /* Dropdown panels stay white, so their focus ring returns to the dark-on-light one. */
  .site-header.is-overlay .sh-sub :focus-visible { outline-color: var(--color-focus); }
}
/* Below 1200 px the open menu is a white panel under the bar: its links keep the dark text. */
@media (max-width: 1199px) {
  .site-header.is-overlay .sh-nav :focus-visible { outline-color: var(--color-focus); }
}
@media (prefers-reduced-motion: reduce) {
  .site-header.is-overlay, .site-header.is-overlay::before { transition: none; }
}