/* Free tools: shared chrome + light-system re-skin of the tool widgets (2026-10) */
.tx-top { overflow-x: clip; }
.tx-hero { padding: 140px 0 64px; }
.tx-hero-in { position: relative; max-width: 1200px; }
.tx-hero h1 { max-width: 17ch; }
.tx-hero .gx-hero-sub { max-width: 640px; }
.tx-hero .gx-hero-facts b { color: #fff; }
.tx-suite { position: sticky; top: 69px; z-index: 30; background: rgba(255,255,255,.94); backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid #E3E9F1; }
.tx-suite-in { display: flex; gap: 6px; overflow-x: auto; padding-block: 10px; scrollbar-width: none; }
.tx-suite-in::-webkit-scrollbar { display: none; }
.tx-suite a { flex: none; display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 999px; font-family: var(--font-body); font-size: .9rem; font-weight: 600; color: #3F5378; text-decoration: none; border: 1px solid transparent; white-space: nowrap; }
.tx-suite a:hover { color: #0B1220; border-color: #E3E9F1; }
.tx-suite a.on { color: #fff; background: #0B1220; }
@media (max-width: 921px) { .tx-suite { top: 57px; } }
@media (max-width: 760px) { .tx-hero { padding: 112px 0 44px; } }

/* Old per-page tool navs and fade-ins: the suite nav replaces them; content shows at rest. */
.ms-tool-nav { display: none !important; }
.an, .gk-reveal, .calc-fade-in, .rv { opacity: 1 !important; transform: none !important; }

/* Re-skin: tool tokens mapped to the light gx palette (teal brand accent, no indigo). */
html body {
  --ms-blue: #19728A; --ms-indigo: #19728A; --ms-violet: #34A3BC; --ms-cyan: #34A3BC;
  --cc-blue: #19728A; --cc-indigo: #19728A; --cc-violet: #34A3BC;
  --calc-primary: #19728A; --calc-primary-dark: #145E72; --calc-accent: #34A3BC; --calc-secondary: #0B1220;
  --calc-light-bg: #F6F8FB; --calc-border: #E3E9F1; --calc-text: #0B1220; --calc-text-light: #5B6B82;
  --fh: var(--font-heading); --fb: var(--font-body); --fm: var(--font-mono);
}
html body .tl, html body .tl.light, html body .cpc, html body .cpc.light, html body .rf, html body .th, html body .cc-page, html body .cc-page.light {
  --bg: #F6F8FB; --sf: rgba(11,18,32,.03); --bd: #E3E9F1; --tx: #0B1220; --mt: #5B6B82; --acc: #19728A; --card-bg: #FFFFFF; --card: #FFFFFF;
}
html body .gk, html body .gk[data-theme] {
  --bg: #F6F8FB; --bg2: #FFFFFF; --bg3: #EEF1F6; --card: #FFFFFF; --card-h: #F6F8FB; --surf: #F6F8FB;
  --bdr: #E3E9F1; --bdr-h: #CBD5E1; --tx: #3F5378; --tx2: #5B6B82; --txh: #0B1220; --blue: #19728A; --teal: #34A3BC; --cyan: #34A3BC;
}
@media (min-width: 1100px) { .tx-suite-in { flex-wrap: wrap; justify-content: center; overflow: visible; } }