/* Hero headline and filled buttons share the same light blue gradient. */
:root { --logo-gradient: url('./branding/logo-gradient-light.svg?v=3'); --logo-button-gradient: var(--logo-gradient); --blue: #142536; --blue-text: #142536; --blue-hover: #142536; --blue-soft: #f4f6f9; }
.button-primary, .button-primary:is(:hover, :active), .m-post {
  background-image: var(--logo-button-gradient); background-position: center; background-size: 100% 100%; background-repeat: no-repeat; background-color: #35aaf4; color: #fff;
}

.hero-heading-accent, .pricing-head h1 span, .pricing-closing h2 span,
.setup-list li::before, .faq-icon, .feature-help summary,
.text-link, .faq-contact a, .help-answer-link, .help-contact a, .contact-email a,
.menu-utilities .menu-trial, .menu-links a[aria-current],
.launch-offer-label,
.prose a:not(.card), .crumb, .search-res a small, .search-res mark, .search-res [data-search-retry],
.top-links a:hover, .tabs a.on, .nav-sec a.on, .toc a.on, .brand em, .card .tag {
  background-image: var(--logo-gradient) !important; background-size: 100% 100% !important; background-position: center !important;
  background-color: transparent !important; background-clip: text !important; -webkit-background-clip: text !important;
  color: transparent !important; -webkit-text-fill-color: transparent;
}
.text-link:is(:hover, :focus-visible), .faq-contact a:is(:hover, :focus-visible), .help-answer-link:hover { text-decoration: underline; text-decoration-color: #142536; }
.text-link svg, .faq-contact a svg, .benefit-strip-icon svg, .plan-points svg { stroke: url('#logo-blue-paint'); }
.benefit-strip-icon svg { fill: url('#logo-blue-paint'); stroke: none; }
.plain-list { list-style: none; padding-left: 0; }
.plain-list li { position: relative; padding-left: 20px; }
.plain-list li::before { content: ''; position: absolute; left: 3px; top: .7em; width: 5px; height: 5px; border-radius: 50%; background: var(--logo-gradient) center / 100% 100%; }
.closing-inner h2 span { color: #f5f7fa; text-decoration: underline; text-decoration-color: transparent; background: var(--logo-gradient) left bottom / 100% 3px no-repeat; padding-bottom: 5px; }
.closing-section, .site-footer { --blue-text: #f5f7fa; }
.site-footer a:is(:hover, :focus-visible) { background: var(--logo-gradient) left bottom / 100% 2px no-repeat !important; }
.plan-popular, .plan-comparison th[colspan], .nav-sec a.on, .brand em, .card .tag { border-top: 3px solid transparent; border-image: var(--logo-gradient) 3; }
/* Preserve readable field fills; focus/carets use neutral ink. */
input, textarea { caret-color: currentColor !important; }
:where(a, button, summary, input, textarea, select, [tabindex]):focus-visible { outline-color: currentColor; }
:root[data-theme="dark"] .prose a:not(.card), :root[data-theme="dark"] .crumb,
:root[data-theme="dark"] .nav-sec a.on, :root[data-theme="dark"] .toc a.on {
  -webkit-text-fill-color: var(--ink); color: var(--ink) !important; background-clip: border-box !important; -webkit-background-clip: border-box !important;
  background-size: 100% 2px !important; background-position: left bottom !important; background-repeat: no-repeat;
}
@media (forced-colors: active) {
  .button-primary, .button-primary:is(:hover, :active), .m-post { background: Highlight; color: HighlightText; }
  .product-tablist::before { background: Highlight; }
  .hero-heading-accent, .text-link, .prose a { -webkit-text-fill-color: LinkText; color: LinkText !important; }
}
/* Non-gradient fallbacks and browser-only indicators stay neutral. */
:root { --accent: #142536; --accent-ink: #142536; --accent-soft: #f4f6f9; --brand-blue: #142536; --brand-blue-text: #142536; --brand-blue-pressed: #142536; --brand-blue-light: #e2e8f0; --post: #142536; }
:root[data-theme="dark"] { --accent: #e2e8f0; --accent-ink: #e2e8f0; --post: #e2e8f0; }
.menu-links a:hover, .menu-utilities a:hover,
.faq-toggle:hover {
  background-image: var(--logo-gradient); background-size: 100% 100%; background-clip: text; -webkit-background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
}
.hero-heading-accent, .pricing-head h1 span, .pricing-closing h2 span { display: inline-block; }

/* Keep the shared button proportions. */
.product-tablist button[aria-selected="true"] { color: #fff; }
.button { min-width: 90px; min-height: 32px; padding: 6px 12px; border-radius: 6px; font-weight: 600; transition: box-shadow .16s ease, border-color .16s ease; }
.button-primary { border-color: transparent; box-shadow: 0 2px 4px #0000000d; }
.button-primary:hover { box-shadow: 0 4px 12px #0000001a; }
.button-primary:active { box-shadow: none; }
.button-primary:focus-visible { outline: 2px solid #142536; outline-offset: 4px; }
.button-secondary { background: #fff; color: #000; border-color: #000; box-shadow: none; }
.button-secondary:is(:hover, :active) { background: #f4f6f9; color: #000; border-color: #000; }
.button-secondary:focus-visible { outline: 2px solid #000; outline-offset: 4px; }
.hero-actions { gap: 12px; }
@media (max-width: 899px), (pointer: coarse) { .button { min-height: 44px; } }
/* Soft blue supports the primary logo-blue gradient. */
:root { --secondary-accent: #A5C4EB; --secondary-accent-hover: #A5C4EB; --secondary-accent-ink: #000; }
.penny-mute, .navigation-menu > summary,
.theme-btn, .menu-btn, .search-btn {
  background: #fff; color: var(--secondary-accent-ink); border-color: #dce2e9;
}
.penny-mute:hover, .navigation-menu > summary:hover,
.theme-btn:hover, .menu-btn:hover, .search-btn:hover {
  background: #fff; color: var(--secondary-accent-ink); border-color: #8baedb;
}
.penny-mute:focus-visible, .navigation-menu > summary:focus-visible,
.theme-btn:focus-visible, .menu-btn:focus-visible, .search-btn:focus-visible { outline: 2px solid #142536; outline-offset: 4px; }
.product-tablist::before { background: var(--logo-button-gradient) center / 100% 100% no-repeat; border: 0; }
.billing button[aria-checked="true"] { background: #fff; border: 1px solid #A5C4EB; box-sizing: border-box; color: #000; }
.product-tablist button[aria-selected="true"] { color: #fff; }
@media (forced-colors: active) {
  .button-secondary { background: ButtonFace; }
  .product-tablist::before { background: Highlight; }
  .product-tablist button[aria-selected="true"] { color: HighlightText; }
}

/* Blue carries the main wayfinding; soft blue stays in supporting details. */
.benefit-strip-icon svg path[opacity] { fill: url('#logo-blue-paint'); opacity: .25; }
.plan-points svg { stroke: url('#logo-blue-paint'); }
.plain-list li::before { background: var(--logo-gradient) center / 100% 100%; }
.setup-list li::before, .faq-icon {
  background: #fff !important; border: 1px solid #dce2e9; background-clip: border-box !important; -webkit-background-clip: border-box !important;
  color: #000 !important; -webkit-text-fill-color: #000; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
}
.setup-list li::before { font-size: 15px; line-height: 1; }
.faq-icon { font-size: 20px; line-height: 1; }
.closing-inner h2 span { background-image: var(--logo-gradient); }
.callout { border-left-color: #A5C4EB; }

.setup-list li::before { background: var(--logo-button-gradient) center / 100% 100% no-repeat !important; color: #fff !important; -webkit-text-fill-color: #fff; }

/* Black header controls match the monochrome wordmark. */
.site-navigation .navigation-menu > summary { justify-content: center; width: 44px; height: 44px; min-height: 44px; padding: 10px; background: #000; color: #f5f7fa; border-color: #444; }
.site-navigation .navigation-menu > summary:hover { border-color: #a5c4eb; }
.navigation-menu > summary svg { width: 22px; height: 22px; }
.theme-btn, .menu-btn, .search-btn, .theme-btn:hover, .menu-btn:hover, .search-btn:hover { background: var(--bg, #fff); color: var(--ink, #142536); }
.flow-reset:hover, .cube-faces button:hover, .cube-faces button[aria-pressed="true"],
.flow-routes button:hover, .flow-routes button[aria-checked="true"], .flow-pause:hover { background: transparent; }
.feature-help summary { background: transparent !important; color: #142536 !important; -webkit-text-fill-color: #142536; }

/* Readable link states on the black header. */
.site-navigation .desktop-navigation a, .site-navigation .login-link { background: transparent; color: #fff; -webkit-text-fill-color: currentColor; }
.site-navigation .desktop-navigation a:is(:hover, :focus-visible, [aria-current]), .site-navigation .login-link:is(:hover, :focus-visible) {
  background: transparent; color: #fff; -webkit-text-fill-color: currentColor;
  text-decoration: underline; text-decoration-color: currentColor; text-decoration-thickness: 1.5px; text-underline-offset: 6px;
}

.site-navigation :is(a, button, summary):focus-visible { outline-color: #fff; }