/* ── Raleway variable font (self-hosted; no third-party CDN per GDPR) ── */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/fonts/raleway/raleway-variable.woff2') format('woff2-variations'),
       url('/fonts/raleway/raleway-variable.woff2') format('woff2');
}

/* ──────────────────────────────────────────────────────────────────────
   Brand tokens (Sound Scouts Visual Identity, Feb 2019)
   Source: docs/superpowers/specs/visual-identity-design.md
   ────────────────────────────────────────────────────────────────────── */
:root {
  /* Brand palette */
  --ss-cobalt:  #193A9E;   /* C100 M90 Y0 K10 — primary */
  --ss-azure:   #00C1FD;   /* C70  M10 Y0 K0  — accent */
  --ss-mint:    #1DE3CA;   /* C60  M0  Y40 K0 — secondary accent */
  --ss-black:   #000000;
  --ss-grey:    #666666;   /* C0 M0 Y0 K60 */
  --ss-light-grey: #DDDDDD;
  --ss-dark-grey: #505050;
  --ss-white:   #FFFFFF;

  /* Brand gradient (135deg Cobalt → deeper Cobalt) */
  --ss-gradient-cobalt:
    linear-gradient(135deg, #193A9E 0%, #122B7A 50%, #0E2466 100%);

  /* Semantic aliases — components reference these, not raw brand tokens */
  --ss-color-primary:           var(--ss-cobalt);
  --ss-color-primary-contrast:  var(--ss-white);
  --ss-color-primary-hover:      #122B7A;   /* derived darker cobalt */
  --ss-color-primary-active:     #0E2466;   /* derived darkest cobalt */
  --ss-color-accent:            var(--ss-azure);
  --ss-color-highlight:         var(--ss-mint);

  --ss-color-text:              var(--ss-black);
  --ss-color-text-muted:        var(--ss-dark-grey);
  --ss-color-text-on-dark:      var(--ss-white);

  --ss-color-surface:           var(--ss-white);
  --ss-color-surface-alt:        #193a9e0f;   /* off-white neutral backdrop */
  --ss-color-surface-accent:     #00C1FD1a;   /* off-white neutral backdrop */
  --ss-color-surface-highlight:  #1DE3CA1a;   /* off-white neutral backdrop */
  --ss-color-surface-inverse:   var(--ss-cobalt);

  --ss-color-link:              var(--ss-cobalt);  /* on light */
  --ss-color-link-on-dark:      var(--ss-azure);   /* on Cobalt */
  --ss-color-focus:             var(--ss-cobalt);

  --ss-color-border:             #193a9e29;
  --ss-color-border-subtle:      #193a9e14;

  /* Typography */
  --ss-font-family: 'Raleway', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --ss-text-display:  clamp(2.5rem, 6vw + 1rem, 4.5rem);
  --ss-text-h1:       clamp(2rem, 5vw + 1rem, 3.25rem);
  --ss-text-h2:       clamp(1.75rem, 3vw + 1rem, 2.25rem);
  --ss-text-h3:       clamp(1.25rem, 1.5vw + 1rem, 1.5rem);
  --ss-text-lead:     clamp(1.0625rem, 1vw + 0.875rem, 1.25rem);
  --ss-text-body:     1rem; /* equivalent of is-size-6 */
  --ss-text-small:    0.9rem;
  --ss-text-overline: 0.75rem; /* equivalient of is-size-7 */

  /* Spacing scale (4px base) */
  --ss-space-0:  0;
  --ss-space-1:  0.25rem;
  --ss-space-2:  0.5rem;
  --ss-space-3:  0.75rem;
  --ss-space-4:  1rem;
  --ss-space-5:  1.5rem;
  --ss-space-6:  2rem;
  --ss-space-8:  3rem;
  --ss-space-10: 4rem;
  --ss-space-12: 6rem;

  /* Radius */
  --ss-radius-sm:   4px;
  --ss-radius-md:   8px;
  --ss-radius-lg:   16px;
  --ss-radius-pill: 9999px;

  /* Elevation (Cobalt-tinted) */
  --ss-shadow-1: 0 1px 2px rgba(25, 58, 158, 0.08), 0 1px 1px rgba(0, 0, 0, 0.04);
  --ss-shadow-2: 0 4px 12px rgba(25, 58, 158, 0.10), 0 2px 4px rgba(0, 0, 0, 0.06);
  --ss-shadow-3: 0 12px 32px rgba(25, 58, 158, 0.16), 0 4px 8px rgba(0, 0, 0, 0.08);
  --ss-shadow-4: 0 8px 32px #193a9e29, 0 4px 8px #193a9e39;

  /* Bulma 1.0 overrides — Cobalt as primary */
  --bulma-family-primary: var(--ss-font-family);
  --bulma-body-color: var(--ss-color-text);
  --bulma-body-background-color: var(--ss-color-surface);
  --bulma-body-size: 1rem;

  --bulma-primary-h: 230;
  --bulma-primary-s: 73%;
  --bulma-primary-l: 36%;

  --bulma-link-h: 230;
  --bulma-link-s: 73%;
  --bulma-link-l: 36%;

  /* Lock Bulma to light-mode values — site has no dark-mode design tokens;
     without this, Bulma 1.0's @media(prefers-color-scheme:dark) block
     overrides these with values optimised for a dark canvas, causing WCAG
     contrast failures on our white backgrounds. */
  --bulma-scheme-brightness: light;
  --bulma-scheme-main-l: 100%;
  --bulma-background-l: 96%;
  --bulma-text-l: 29%;
  --bulma-text-weak-l: 48%;
  --bulma-text-strong-l: 21%;
  --bulma-text-title-l: 14%;
  --bulma-link-on-scheme-l: 58%;
  --bulma-soft-l: 90%;
  --bulma-bold-l: 20%;
  --bulma-border-weak-l: 93%;
  --bulma-border-l: 86%;
}

/* ──────────────────────────────────────────────────────────────────────
   Component — Button
   ────────────────────────────────────────────────────────────────────── */
.button,
.ss-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ss-space-2);
  font-family: var(--ss-font-family);
  font-weight: 700;
  font-size: var(--ss-text-body);
  line-height: 1.2;
  border-radius: var(--ss-radius-md);
  padding: var(--ss-space-3) var(--ss-space-5);
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 120ms ease, color 120ms ease,
              border-color 120ms ease, box-shadow 120ms ease,
              transform 120ms ease;
}

/* Primary — Cobalt on light */
.button.is-primary,
.ss-button.is-primary {
  background: var(--ss-color-primary);
  color: var(--ss-color-primary-contrast);
  border-color: var(--ss-color-primary);
}
.button.is-primary:hover,
.ss-button.is-primary:hover { background: var(--ss-color-primary-hover); border-color: var(--ss-color-primary-hover); }
.button.is-primary:active,
.ss-button.is-primary:active { background: var(--ss-color-primary-active); border-color: var(--ss-color-primary-active); }

/* Secondary — outline Cobalt */
.ss-button.is-secondary {
  background: transparent;
  color: var(--ss-color-primary);
  border-color: var(--ss-color-primary);
}
.ss-button.is-secondary:hover {
  background: rgba(25, 58, 158, 0.06);
}

/* Tertiary — text button */
.ss-button.is-tertiary {
  background: transparent;
  color: var(--ss-color-primary);
  border-color: transparent;
  padding-left: var(--ss-space-2);
  padding-right: var(--ss-space-2);
}
.ss-button.is-tertiary:hover { text-decoration: underline; }

/* Inverse — for Cobalt backgrounds */
.is-on-dark .button.is-primary,
.is-on-dark .ss-button.is-primary {
  background: var(--ss-white);
  color: var(--ss-color-primary);
  border-color: var(--ss-white);
}

.is-on-dark .ss-button.is-secondary {
  color: var(--ss-white);
  border-color: var(--ss-white);
}

/* White button on dark backgrounds — use primary text color for contrast */
.is-on-dark .button.is-white {
  background: var(--ss-white);
  color: var(--ss-color-primary);
  border-color: var(--ss-white);
}

.is-on-dark .button.is-white:hover,
.is-on-dark .button.is-primary:hover,
.is-on-dark .ss-button.is-primary:hover {
  background-color: var(--ss-light-grey);
}

.is-on-dark .button.is-white:focus-visible,
.is-on-dark .button.is-primary:focus-visible,
.is-on-dark .ss-button.is-primary:focus-visible {
  background-color: var(--ss-light-grey);
  outline: 2px solid var(--ss-white);
  outline-offset: 2px;
}

/* Disabled */
.button[disabled],
.ss-button[disabled],
.button.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ──────────────────────────────────────────────────────────────────────
   Base typography
   ────────────────────────────────────────────────────────────────────── */
/* Declare light-only color scheme — site has no dark-mode token set;
   prevents Bulma 1.0's built-in @media(prefers-color-scheme:dark) block
   from activating on devices/browsers set to dark OS theme. */
html {
  scroll-behavior: smooth;
  color-scheme: light;
}

body {
  font-family: var(--ss-font-family);
  font-size: var(--ss-text-body);
  line-height: 1.6;
  color: var(--ss-color-text);
  background: var(--ss-color-surface);
  padding-top: 4rem; /* clear fixed Bulma navbar */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.ss-display {
  font-size: var(--ss-text-display);
  font-weight: 300;            /* Raleway Light — display only */
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--ss-color-text);
}

.ss-h1 {
  font-size: var(--ss-text-h1);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--ss-color-text);
}

.ss-h2 {
  font-size: var(--ss-text-h2);
  font-weight: 700;
  line-height: 1.15;
  color: var(--ss-color-text);
  text-wrap: balance;
}

.ss-h3 {
  font-size: var(--ss-text-h3);
  font-weight: 700;
  line-height: 1.25;
  color: var(--ss-color-text);
}

.ss-lead {
  font-size: var(--ss-text-lead);
  font-weight: 400;
  color: var(--ss-color-text-muted);
  line-height: 1.55;
}
.ss-lead strong { color: var(--ss-color-text); }
.is-on-dark .ss-lead strong { color: var(--ss-color-text-on-dark); }

.ss-pullquote {
  font-size: clamp(1.2rem, 1.5vw + 0.75rem, 1.5rem);
  font-weight: 500;
  color: var(--ss-color-text);
  line-height: 1.6;
  text-align: center;
  max-width: 40rem;
  margin-inline: auto;
}
.ss-pullquote::before {
  content: '';
  display: block;
  width: 2.5rem;
  height: 3px;
  background: var(--ss-color-highlight);
  border-radius: 2px;
  margin: 0 auto var(--ss-space-5);
}

.ss-overline {
  font-size: var(--ss-text-overline);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--ss-color-primary);
}

.ss-small {
  font-size: var(--ss-text-small);
  color: var(--ss-color-text-muted);
}

.ss-nowrap {
  white-space: nowrap;
}

/* On-dark variants — apply when typography sits on Cobalt */
.is-on-dark .ss-display,
.is-on-dark .ss-h1,
.is-on-dark .ss-h2,
.is-on-dark .ss-h3 { color: var(--ss-color-text-on-dark); }
.is-on-dark .ss-lead,
.is-on-dark .ss-small { color: rgba(255, 255, 255, 0.85); }
.is-on-dark .ss-overline { color: var(--ss-color-accent); }

/* ──────────────────────────────────────────────────────────────────────
   Skip link
   ────────────────────────────────────────────────────────────────────── */
.ss-skip-link {
  position: absolute; left: 0; top: -100px;
  background: var(--ss-color-primary);
  color: var(--ss-color-primary-contrast);
  padding: var(--ss-space-3) var(--ss-space-4);
  z-index: 1000;
  text-decoration: none;
  font-weight: 700;
}
.ss-skip-link:focus { top: 0; }

/* ──────────────────────────────────────────────────────────────────────
   Focus ring (WCAG 2.4.7)
   ────────────────────────────────────────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--ss-color-focus);
  outline-offset: 2px;
  z-index: 10;
}
.is-on-dark :focus-visible {
  outline-color: var(--ss-azure);
}

/* ──────────────────────────────────────────────────────────────────────
   Tap target enforcement (WCAG 2.5.5)
   ────────────────────────────────────────────── */
.button,
.navbar-item.is-tappable,
.ss-tap {
  min-height: 44px;
  min-width: 44px;
}

/* ── Fade-in on scroll utility (driven by Alpine in Task 6) ── */
.ss-fade { opacity: 0; visibility: hidden; transform: translateY(16px); }
@media (prefers-reduced-motion: no-preference) {
  .ss-fade {
    transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),
                visibility 0s linear 0.6s;
  }
}
.ss-fade.is-visible { opacity: 1; visibility: visible; transform: none; transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1), transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0s; }
@media (prefers-reduced-motion: reduce) {
  .ss-fade { opacity: 1; visibility: visible; transform: none; }
}

/* ──────────────────────────────────────────────────────────────────────
   Component — Navbar
   ────────────────────────────────────────────────────────────────────── */
.ss-navbar .navbar {
  background: var(--ss-color-surface);
  box-shadow: var(--ss-shadow-1);
  transition: box-shadow 160ms ease;
}
.ss-navbar.is-scrolled .navbar { box-shadow: var(--ss-shadow-2); }

.ss-navbar .navbar-item,
.ss-navbar .navbar-link {
  color: var(--ss-color-text);
  font-weight: 700;
  background-color: var(--ss-color-surface);
}
.ss-navbar .navbar-item:not(.no-hover):hover,
.ss-navbar .navbar-link:not(.no-hover):hover {
  background: rgba(25, 58, 158, 0.06);
  color: var(--ss-color-primary);
}

@media (min-width: 1024px) {
  .ss-navbar-button {
    width:100%;
  }
}

.ss-navbar-button {
  width: 100%;
}

.ss-navbar .ss-brand { padding: var(--ss-space-2) var(--ss-space-4); }
.ss-navbar .ss-logo { display: block; max-height: none; }
/* Lift Bulma's 1.75rem image cap so the brand logo can breathe. */
.ss-navbar .navbar-brand,
.ss-navbar .navbar-brand .navbar-item { min-height: 4rem; }
.ss-navbar .navbar-brand .navbar-item img { max-height: none; }

/* Audience pill switcher — tablet+ */
.ss-audience-switch { display: flex; }
.ss-switch-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.375rem 1.125rem; border-radius: 999px;
  font-size: var(--ss-text-small); font-weight: 500;
  color: var(--ss-color-text-muted); text-decoration: none;
}
.ss-switch-btn[aria-selected="true"] {
  background: #fff; color: var(--ss-black); font-weight: 600;
  box-shadow: 0 1px 2px rgba(10, 15, 26, 0.04);
}
@media (min-width: 769px) {
  .ss-audience-switch {
    background: var(--ss-color-border-subtle);
    border-radius: 999px;
    padding: 3px;
    margin: 0 auto;
  }
}
@media (max-width: 768.99px) {
  .ss-audience-switch {
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.5rem 1rem;
  }
}

/* Burger keyboard target */
.navbar-burger { color: var(--ss-color-text); }
.navbar-burger:focus-visible { outline-offset: -2px; }

[id] {
  /* nav bar is 64px add some margin of 4px */
  scroll-margin-top: 68px;
}

@media screen and (min-width: 1024px) {
  [id] {
    /* nav bar is 68px add some margin of 4px */
    scroll-margin-top: 72px;;
  }
}

/* ──────────────────────────────────────────────────────────────────────
   Component — Footer
   ────────────────────────────────────────────────────────────────────── */
.ss-footer {
  background: var(--ss-black);
  color: var(--ss-color-text-on-dark);
  padding: var(--ss-space-10) 0 var(--ss-space-6);
}
@media (max-width: 768px) {
  .ss-footer { padding-left: var(--ss-space-5); padding-right: var(--ss-space-5); }
}
.ss-footer a {
  color: var(--ss-color-link-on-dark);
  text-decoration: underline;
}
.ss-footer a:hover { color: var(--ss-white); }

.ss-footer-brand { margin-bottom: var(--ss-space-4); }
.ss-footer-brand-tagline {
  font-size: var(--ss-text-lead);
  font-weight: 300;
  color: var(--ss-color-text-on-dark);
  margin: 0 0 var(--ss-space-2);
}
.ss-footer-tagline {
  font-size: var(--ss-text-body);
  color: rgba(255, 255, 255, 0.8);
  max-width: 50ch;
  margin: 0 0 var(--ss-space-5);
}
.ss-footer-contact a { display: inline-block; margin-bottom: var(--ss-space-1); }

.ss-footer-heading {
  font-size: var(--ss-text-overline);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--ss-color-accent);
  margin: 0 0 var(--ss-space-4);
}

/* Mobile accordion — heading becomes a tap target */
.ss-footer-accordion-btn {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  background: none;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  cursor: pointer;
  color: var(--ss-color-accent);
  font-family: var(--ss-font-family);
  font-size: var(--ss-text-overline);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  padding: var(--ss-space-3) 0;
  min-height: 44px;
  text-align: left;
}
.ss-footer-accordion-btn:focus-visible {
  outline: 2px solid var(--ss-azure);
  outline-offset: 2px;
}
.ss-footer-chevron {
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
.ss-footer-chevron.is-open {
  transform: rotate(180deg);
}

/* Tablet+: disable accordion, always show lists */
@media (min-width: 769px) {
  .ss-footer-accordion-btn {
    pointer-events: none;
    border-bottom: none;
    padding: 0;
    display: block;
  }
  .ss-footer-chevron { display: none; }
  .ss-footer-list { display: block !important; }
}
.ss-footer-list { list-style: none; padding: 0; margin: 0; }
.ss-footer-list li { margin-bottom: var(--ss-space-2); }

.ss-footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  margin-top: 3rem; padding-top: 1.5rem;
  display: flex; flex-direction: column; gap: 1rem;
}
@media (min-width: 769px) {
  .ss-footer-bottom { flex-direction: row; justify-content: space-between; align-items: center; }
}
.ss-footer-ack {
  display: flex; align-items: center; gap: 0.75rem;
}
.ss-footer-ack img {
  flex-shrink: 0; border-radius: 4px;
}
.ss-footer-bottom p {
  font-size: var(--ss-text-small); max-width: 520px; line-height: 1.6;
  color: rgba(255, 255, 255, 0.7);
}
.ss-footer-legal {
  list-style: none; margin: 0; padding: 0;
  display: flex; gap: 1.5rem;
}
.ss-footer-legal a {
  font-size: var(--ss-text-small); color: rgba(255, 255, 255, 0.7); text-decoration: none;
}
.ss-footer-legal a:hover,
.ss-footer-legal a:focus-visible { color: #fff; text-decoration: underline; }

/* ── Gateway page ── */
.ss-gateway {
  min-height: calc(100vh - 3.25rem);
  display: flex; align-items: center;
  background: var(--ss-color-surface-alt);
  padding: 3rem 1.5rem;
}
.ss-gateway .container { max-width: 880px; }
.ss-gateway-intro { text-align: center; margin-bottom: 3rem; }
.ss-gateway-sub {
  font-size: clamp(1rem, 1.5vw + 0.75rem, 1.1875rem);
  color: var(--ss-color-text-muted);
  font-weight: 500;
  margin-top: 0.75rem;
}

.ss-gateway-cards { margin-bottom: 3rem; }

/* ──────────────────────────────────────────────────────────────────────
   Component — Card
   ────────────────────────────────────────────────────────────────────── */

.ss-card {
  display: block;
  background: var(--ss-color-surface);
  border: 1px solid var(--ss-color-border-subtle);
  border-radius: var(--ss-radius-lg);
  padding: var(--ss-space-5);
  box-shadow: var(--ss-shadow-1);
  color: var(--ss-color-text);
  text-decoration: none;
  transition: box-shadow 160ms ease, transform 160ms ease;
}

.support-list .ss-card { padding: var(--ss-space-3); }
.is-ifu-history .ss-card { padding: var(--ss-space-3) var(--ss-space-5) var(--ss-space-5) var(--ss-space-5); }

.ss-card-arrow::after {
  content: "\2192";
  font-weight: bold;
  color: var(--ss-cobalt);
}

@media (min-width: 769px) {
  .ss-card { padding: var(--ss-space-6); }
  .support-list .ss-card { padding: var(--ss-space-4); }
}

a.ss-card:hover,
.ss-card.is-interactive:hover {
  box-shadow: var(--ss-shadow-2);
  transform: translateY(-2px);
}

a.ss-card:focus-visible {
  outline: 2px solid var(--ss-color-focus);
  outline-offset: 4px;
}

.ss-card .ss-overline { margin-bottom: var(--ss-space-2); }
.ss-card-title {
  font-size: var(--ss-text-h3);
  font-weight: 700;
  color: var(--ss-color-text);
  margin: 0 0 var(--ss-space-3);
}
.ss-card-desc {
  font-size: var(--ss-text-body);
  color: var(--ss-color-text-muted);
  margin: 0 0 var(--ss-space-4);
  max-width: 60ch;
}

.ss-gateway-cta {
  margin-top: 1.5rem;
  display: inline-flex; align-items: center; gap: 0.375rem;
  font-weight: 700; font-size: var(--ss-text-small);;
  color: var(--ss-color-primary);
}

/* Mini trust row beneath cards */
.ss-trust-mini {
  display: flex; flex-wrap: wrap; gap: 1.5rem;
  justify-content: center;
  list-style: none; margin: 0; padding: 0;
}
.ss-trust-mini li {
  display: inline-flex; align-items: center; gap: 0.375rem;
  font-size: var(--ss-text-small);
  color: var(--ss-color-text-muted);
}

/* ── Trust bar (full-width band) ── */
.ss-trust-bar {
  background: var(--ss-color-surface);
  border-top: 1px solid var(--ss-color-border-subtle);
  border-bottom: 1px solid var(--ss-color-border-subtle);
  padding: 1.25rem 1.5rem;
}
.ss-trust-bar ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 1rem 2rem;
  justify-content: center; align-items: center;
  max-width: 1180px; margin-inline: auto;
}
.ss-trust-bar li {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: var(--ss-text-small); font-weight: 500;
  color: var(--ss-color-text-muted);
}
.ss-trust-bar a {
  color: inherit;
  text-decoration: none;
}
.ss-trust-bar a:hover { text-decoration: underline; }

/* ── Hero image generic ── */
.ss-hero-img {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: 100%; max-width: 100%; height: auto;
  border-top-left-radius: 6rem;
  box-shadow: 0 20px 48px rgba(10, 15, 26, 0.5);
  object-fit: cover;
}

/* ── Hero alt text on dark background ── */
.is-on-dark .ss-hero-img {
  color: var(--ss-white);
}

/* ── Hero (consumer + clinician share base) ── */
.ss-hero { padding: 2rem 1.5rem; }
@media (min-width: 769px) { .ss-hero { padding: 3rem 1.5rem 3.5rem; } }
.ss-hero .container { max-width: 1180px; }
.ss-hero--cobalt-tint { background: var(--ss-color-surface-alt); }
.ss-hero--tint { background: var(--ss-color-surface-alt); } 
.consumer.product .ss-hero--tint { background: var(--ss-color-surface-highlight); }

.ss-hero .ss-h1 { margin: 0.75rem 0 1rem; }
.ss-hero .ss-lead { margin-bottom: 1.75rem; }

.ss-hero-actions {
  display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 1.5rem;
}
.ss-btn-outline {
  background: transparent;
  border: 1.5px solid var(--ss-color-border);
  color: var(--ss-color-primary);
}
.ss-btn-outline:hover,
.ss-btn-outline:focus-visible {
  background: var(--ss-color-surface-alt);
  border-color: var(--ss-color-border);
}

.ss-store-badges {
  list-style: none; margin: 1rem 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center;
}
.ss-store-badges li { display: flex; }
.ss-store-badge-img {
  height: 40px;
  width: auto;
  display: block;
}

/* ── Section base ── */
.ss-section { padding: 1.5rem 1.5rem; }
@media (min-width: 769px) { .ss-section { padding: 1.5rem 1.5rem; } }
@media (min-width: 1024px) { .ss-section { padding: 2rem 1.5rem; } }
.ss-section .container { max-width: 1180px; }
.ss-section--white { background: var(--ss-white); }
.ss-section--neutral { background: var(--ss-color-surface-alt); }
.ss-section--tint { background: var( --ss-color-surface-alt); }
.consumer.product .ss-section--tint { background: var( --ss-color-surface-accent); }
.ss-section--navy { background: var(--ss-cobalt); color: var(--ss-white); }

.ss-section-head { margin-bottom: 2.5rem; }
.ss-section-head .ss-h2 { margin: 0.625rem 0 0.625rem; }
.ss-section-head.is-centered { text-align: center; margin-inline: auto; }

/* Step card (How it works) */
.ss-step-card {
  padding: 1.75rem 1.5rem;
  border-radius: 1rem;
  background: var(--ss-color-surface-alt);
  border: 1px solid var(--ss-color-border-subtle);
  height: 100%;
}
.ss-step-num {
  font-size: 1.75rem; font-weight: 800;
  color: var(--ss-color-primary);
  margin-bottom: 0.75rem; letter-spacing: -0.04em;
}
.ss-step-title {
  font-size: 1rem; font-weight: 700;
  color: var(--ss-black);
  margin-bottom: 0.375rem;
}
.ss-step-desc {
  font-size: 0.9375rem;
  color: var(--ss-color-text-muted);
  line-height: 1.55;
}

/* App screens image (How it works) */
.ss-app-screens { margin-top: 3rem; text-align: center; }
.ss-app-screens-img {
  width: 100%;
  max-width: 1120px;
  height: auto;
  aspect-ratio: 21 / 9;
  object-fit: cover;
  display: inline-block;
  border-radius: 1rem;
  box-shadow: 0 10px 30px rgba(10, 15, 26, 0.18);
}

/* Test card (What it tests) */
.ss-test-card {
  padding: 1.5rem 1.75rem 1.5rem 1.5rem;
  border-left: 3px solid var(--ss-color-primary);
  height: 100%;
}
.ss-test-eyebrow {
  font-size: 0.6875rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--ss-color-primary);
  margin-bottom: 0.875rem;
}
.ss-test-title {
  font-size: 1.125rem; font-weight: 700;
  color: var(--ss-black); margin-bottom: 0.5rem;
}
.ss-test-desc {
  font-size: var(--ss-text-body);
  color: var(--ss-color-text-muted);
  line-height: 1.6;
}
.ss-test-card--cobalt {
  background: rgba(25, 58, 158, 0.07);
  border-left-color: var(--ss-cobalt);
}
.ss-test-card--mint {
  background: rgba(29, 227, 202, 0.12);
  border-left-color: var(--ss-mint);
}
.ss-test-card--azure {
  background: rgba(0, 193, 253, 0.12);
  border-left-color: var(--ss-azure);
}

/* Stats strip */
.ss-stats { padding-block: 3.5rem; }
.ss-stats-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 2rem;
  grid-template-columns: 1fr;
  text-align: center;
}
@media (min-width: 481px) {
  .ss-stats-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .ss-stats-grid { grid-template-columns: repeat(4, 1fr); }
}
.ss-stats-grid li { display: flex; flex-direction: column; gap: 0.25rem; }
.ss-stats-grid strong {
  font-size: clamp(1.875rem, 3vw + 1rem, 2.5rem);
  font-weight: 800; letter-spacing: -0.02em;
  color: var(--ss-cobalt);
}
.ss-stats-grid span {
  font-size: 1rem;
  color: var(--ss-color-text-muted);
}

/* Narrow container variant */
.ss-narrow { max-width: 880px !important; }

/* Quote card */
.ss-quote {
  padding: 2rem 1.75rem;
  border-radius: 1rem;
  background: var(--ss-color-surface-alt);
  border: 1px solid var(--ss-color-border-subtle);
  margin: 0;
  height: 100%;
  display: flex; flex-direction: column; justify-content: space-between;
  gap: 1.5rem;
}
.ss-quote p {
  font-size: 0.9375rem;
  color: var(--ss-color-text);
  line-height: 1.65;
  font-style: italic;
}
.ss-quote footer {
  display: flex; align-items: center; gap: 0.75rem;
}
.ss-quote-avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--ss-color-border-subtle);
  flex-shrink: 0;
}
.ss-quote cite { font-style: normal; display: flex; flex-direction: column; }
.ss-quote-name {
  font-size: var(--ss-text-small);; font-weight: 600;
  color: var(--ss-black);
}
.ss-quote-role {
  font-size: 0.75rem; color: var(--ss-color-text-muted);
}

/* CTA band */
.ss-cta { text-align: center; }
.ss-cta-inner { display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.ss-cta .ss-h2 { color: var(--ss-black); }
.ss-section--navy .ss-h2 { color: #fff; }
.ss-section--navy .ss-lead { color: var(--ss-color-text-on-dark); }

.ss-hero-meta {
  font-size: var(--ss-text-small);;
  color: var(--ss-color-text-muted);
  margin-bottom: 1.5rem;
  max-width: 60ch;
}

/* Battery card */
.ss-battery-card {
  display: block;
  padding: 1.5rem 1.75rem;
  border-radius: var(--ss-radius-lg);
  background: var(--ss-color-surface);
  border: 1px solid var(--ss-color-border-subtle);
  box-shadow: var(--ss-shadow-1);
  height: 100%;
  color: inherit;
  text-decoration: none;
  transition: box-shadow 160ms ease, transform 160ms ease;
}
a.ss-battery-card:hover {
  box-shadow: var(--ss-shadow-2);
}
@media (prefers-reduced-motion: no-preference) {
  a.ss-battery-card:hover { transform: translateY(-2px); }
}
a.ss-battery-card:focus-visible {
  outline: 2px solid var(--ss-color-focus);
  outline-offset: 4px;
}
.ss-battery-head {
  display: flex; align-items: center; gap: 0.875rem; margin-bottom: 0.625rem;
}
.ss-battery-num {
  width: 32px; height: 32px; border-radius: 0.5rem;
  background: rgba(25, 58, 158, 0.06);
  border: 1px solid rgba(12, 35, 64, 0.12);
  color: var(--ss-color-primary);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.75rem; font-weight: 800;
}
.ss-battery-abbr {
  font-size: var(--ss-text-h3); font-weight: 700;
  color: var(--ss-cobalt);
}
.ss-battery-full {
  font-size: var(--ss-text-small); font-weight: 500;
  color: var(--ss-color-primary);
  margin-bottom: 0.375rem;
}
.ss-battery-desc {
  font-size: var(--ss-text-body);;
  color: var(--ss-color-text-muted); line-height: 1.55;
}

/* Dark CTA variant */
.ss-btn-outline-dark {
  background: transparent;
  border: 1.5px solid rgba(255, 255, 255, 0.65);
  color: #fff;
}

.ss-btn-outline-dark:hover,
.ss-btn-outline-dark:focus-visible {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.85);
  color: #fff;
}

.ss-btn-outline-dark:focus-visible {
  outline: 2px solid var(--ss-white);
  outline-offset: 2px;
}

/* Battery card — age badge and remediation note */
.ss-battery-age {
  font-size: 0.6875rem; font-weight: 600;
  color: var(--ss-color-text-muted);
  margin-left: auto;
  white-space: nowrap;
}
.ss-battery-rem {
  display: flex; align-items: flex-start; gap: 0.375rem;
  font-size: 0.75rem; font-weight: 500;
  color: var(--ss-color-primary);
  margin-top: 0.75rem; line-height: 1.4;
}

/* Differential testing pull-quote */
.ss-differential-note {
  margin-top: 3rem;
  padding: 2rem 2.25rem;
  border-left: 3px solid var(--ss-color-primary);
  background: rgba(25, 58, 158, 0.06);
  border-radius: 0 0.75rem 0.75rem 0;
}
.ss-differential-quote {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ss-cobalt);
  font-style: italic;
  margin-bottom: 0.625rem;
}
.ss-differential-attr {
  font-size: var(--ss-text-small);
  color: var(--ss-color-text-muted);
  font-weight: 500;
}

/* Evidence section — stat list */
.ss-evidence-stats {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 1.5rem;
}
.ss-evidence-stats li {
  display: flex; flex-direction: column; gap: 0.25rem;
}
.ss-evidence-stats strong {
  font-size: clamp(1.75rem, 3vw + 1rem, 2.25rem);
  font-weight: 800; letter-spacing: -0.02em;
  color: var(--ss-cobalt);
}
.ss-evidence-stats span {
  font-size: var(--ss-text-small);;
  color: var(--ss-color-text-muted);
  line-height: 1.4;
  max-width: 28ch;
}

/* Evidence section — publication list */
.ss-pub-list-heading {
  font-size: 0.75rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--ss-color-text-muted);
  margin-bottom: 1.25rem;
}
.ss-pub-list {
  margin: 0 0 1.25rem 0; padding: 0;
  display: flex; flex-direction: column; gap: 1.125rem;
}
.ss-pub-list li {
  font-size: var(--ss-text-small);;
  color: var(--ss-color-text-muted);
  line-height: 1.55;
}
.ss-pub-list cite { color: var(--ss-color-text); font-style: normal; }
.ss-pub-list em { color: var(--ss-color-text); }
.ss-pub-doi {
  display: inline-block;
  margin-left: 0.375rem;
  font-size: 0.75rem; font-weight: 600;
  color: var(--ss-color-primary);
  text-decoration: none;
}
.ss-pub-doi:hover,
.ss-pub-doi:focus-visible { text-decoration: underline; }
.ss-pub-more {
  font-size: var(--ss-text-small);
  color: var(--ss-color-text-muted);
}
.ss-pub-more a {
  color: var(--ss-color-primary);
  text-decoration: none;
  font-weight: 500;
}
.ss-pub-more a:hover,
.ss-pub-more a:focus-visible { text-decoration: underline; }

/* Evidence page — citation card (authors, institution, journal — whole card is the link) */
.ss-paper-source {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2rem;
  background: rgba(25, 58, 158, 0.06);
  border: 1px solid var(--ss-color-border);
  border-radius: var(--ss-radius-md);
  padding: 0.75rem 1rem;
  text-decoration: none;
  transition: background 120ms ease, border-color 120ms ease;
  min-height: 44px;
}
.ss-paper-source:hover,
.ss-paper-source:focus-visible {
  background: rgba(25, 58, 158, 0.12);
  border-color: var(--ss-color-primary);
  text-decoration: none;
}
.ss-paper-source-authors {
  font-size: var(--ss-text-small);;
  font-weight: 600;
  color: var(--ss-color-text);
}
.ss-paper-source-institution {
  font-size: var(--ss-text-small);
  color: var(--ss-color-text-muted);
}
.ss-paper-source-journal {
  font-size: var(--ss-text-small);;
  font-weight: 600;
  color: var(--ss-color-primary);
  margin-top: 0.25rem;
}
.ss-paper-source-note {
  font-size: var(--ss-text-small);
  color: var(--ss-color-text-muted);
  margin-top: 0.25rem;
}
.is-evidence .ss-differential-quote {
  color: var(--ss-color-text);
}

/* Treatment — loop steps */
.ss-treatment-loop {
  display: flex; flex-direction: column; gap: 1.25rem;
  margin: 2rem 0;
}
.ss-loop-step {
  display: flex; gap: 1rem; align-items: flex-start;
}
.ss-loop-num {
  flex-shrink: 0;
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(25, 58, 158, 0.06);
  border: 1.5px solid var(--ss-color-primary);
  color: var(--ss-color-primary);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--ss-text-small); font-weight: 800;
}
.ss-loop-title {
  font-size: var(--ss-text-lead); font-weight: 700;
  color: var(--ss-cobalt);
  margin-bottom: 0.25rem;
}
.ss-loop-desc {
  font-size: var(--ss-text-body);;
  color: var(--ss-color-text-muted);
  line-height: 1.55;
}

/* Advanced settings card (automated audiometry — What it measures) */
.ss-advanced-card {
  background: rgba(25, 58, 158, 0.06);
  border: 1.5px solid var(--ss-color-border);
  border-radius: 1.25rem;
  padding: 2rem;
  margin-top: 2.5rem;
  height: 100%;
  box-sizing: border-box;
}
.ss-advanced-card-eyebrow {
  font-size: var(--ss-text-overline); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.15em;
  color: var(--ss-color-primary);
  margin-bottom: 0.5rem;
}
.ss-advanced-card-title {
  font-size: 1.25rem; font-weight: 700;
  color: var(--ss-cobalt);
  margin-bottom: 0.75rem;
}
.ss-advanced-card-desc {
  font-size: var(--ss-text-body);
  color: var(--ss-color-text-muted);
  line-height: 1.65;
}
.column > .ss-advanced-card {
  margin-top: 0;
  padding: 1.5rem;
}
.ss-section--tint .ss-advanced-card {
  background: var(--ss-color-surface);
}
.ss-freq-chips {
  display: flex; flex-wrap: wrap; gap: 0.375rem;
  margin-top: 1rem;
}
.ss-freq-chip {
  font-size: 0.75rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--ss-color-primary);
  background: rgba(25, 58, 158, 0.10);
  border: 1px solid var(--ss-color-border);
  border-radius: 0.375rem;
  padding: 0.25rem 0.625rem;
}

/* Trust bar — narrow notice band between hero and content */
.ss-trust-bar {
  background: rgba(25, 58, 158, 0.04);
  border-top: 1px solid rgba(12, 35, 64, 0.10);
  border-bottom: 1px solid rgba(12, 35, 64, 0.10);
  padding: 0.75rem 1.5rem;
}
.ss-trust-bar .container {
  max-width: 1180px;
  display: flex;
  justify-content: center;
}

/* Treatment beta notice */
.ss-treatment-beta {
  display: flex; align-items: flex-start; gap: 0.5rem;
  font-size: var(--ss-text-small);
  color: var(--ss-color-text-muted);
  line-height: 1.5;
  margin: 0;
}

/* Soundiverse info card */
.ss-soundiverse-card {
  background: rgba(25, 58, 158, 0.06);
  border: 1.5px solid rgba(12, 35, 64, 0.12);
  border-radius: 1.25rem;
  padding: 2.25rem 2rem;
}
.ss-soundiverse-eyebrow {
  font-size: 0.6875rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.15em;
  color: var(--ss-color-primary);
  margin-bottom: 0.25rem;
}
.ss-soundiverse-tagline {
  font-size: 1.375rem; font-weight: 800;
  color: var(--ss-cobalt);
  margin-bottom: 1.5rem;
}
.ss-soundiverse-specs {
  list-style: none; margin: 0 0 2rem; padding: 0;
  display: flex; flex-direction: column; gap: 1.125rem;
}
.ss-soundiverse-specs li {
  display: flex; flex-direction: column; gap: 0.2rem;
}
.ss-soundiverse-specs strong {
  font-size: var(--ss-text-lead); font-weight: 700;
  color: var(--ss-cobalt);
}
.ss-soundiverse-specs span {
  font-size: var(--ss-text-body);
  color: var(--ss-color-text-muted);
  line-height: 1.4;
}

/* SSIMPL — workflow rail */
.ss-ssimpl-workflow {
  display: flex; flex-direction: column;
  border-left: 2px solid rgba(12, 35, 64, 0.15);
  padding-left: 1.5rem;
  margin-bottom: 3rem;
  gap: 0;
}
.ss-ssimpl-step {
  display: flex; gap: 1.25rem; align-items: flex-start;
  padding: 1.25rem 0;
  border-bottom: 1px solid rgba(12, 35, 64, 0.08);
}
.ss-ssimpl-step:last-child { border-bottom: 0; }
.ss-ssimpl-step-num {
  flex-shrink: 0;
  font-size: 1.25rem; font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--ss-color-primary);
  width: 2.5rem;
}
.ss-ssimpl-step-title {
  font-size: 0.9375rem; font-weight: 700;
  color: var(--ss-cobalt);
  margin-bottom: 0.25rem;
}
.ss-ssimpl-step-desc {
  font-size: var(--ss-text-small);;
  color: var(--ss-color-text-muted);
  line-height: 1.55;
}

/* SSIMPL — capability cards */
.ss-ssimpl-caps { margin-bottom: 2.5rem; }
.ss-cap-card {
  padding: 2rem 1.75rem;
  border-radius: 1rem;
  background: #fff;
  border: 1px solid rgba(12, 35, 64, 0.1);
  box-shadow: 0 1px 2px rgba(10, 15, 26, 0.04);
  height: 100%;
}
.ss-cap-bullet {
  display: inline-block;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--ss-color-primary);
  margin-bottom: 1rem;
}
.ss-cap-title {
  font-size: 1.0625rem; font-weight: 700;
  color: var(--ss-cobalt);
  margin-bottom: 0.5rem;
}
.ss-cap-desc {
  font-size: 0.9375rem;
  color: var(--ss-color-text-muted);
  line-height: 1.6;
}

/* SSIMPL — bottom CTA row */
.ss-ssimpl-cta {
  display: flex; flex-wrap: wrap; gap: 0.75rem;
}

/* Pricing tiers */
.ss-pricing-grid { margin-bottom: 2rem; padding-top: 1rem; }

.ss-plan {
  padding: 2rem 1.75rem;
  border-radius: 1.25rem;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.5);
  height: 100%;
  display: flex; flex-direction: column; gap: 0.625rem;
  position: relative;
}
.ss-plan--featured {
  background: #fff;
  border-color: #fff;
}
.ss-plan-badge {
  position: absolute; top: -0.75rem; left: 50%; transform: translateX(-50%);
  background: var(--ss-color-primary);
  color: #fff;
  font-size: var(--ss-text-overline); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em;
  padding: 0.25rem 0.875rem;
  border-radius: 999px;
  white-space: nowrap;
}
.ss-plan-name {
  font-size: var(--ss-text-lead); font-weight: 700;
  color: var(--ss-color-primary);
  margin-top: 0.5rem;
}
.ss-plan--featured .ss-plan-name { color: var(--ss-cobalt); }
.ss-plan-sessions {
  font-size: var(--ss-text-body);
  color: var(--ss-color-text);
  margin-bottom: 0.75rem;
}
.ss-plan--featured .ss-plan-sessions { color: var(--ss-color-text); }
.ss-plan-price {
  display: flex; align-items: baseline; gap: 0.375rem;
}
.ss-plan-amount {
  font-size: 2.25rem; font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--ss-color-primary);
}
.ss-plan--featured .ss-plan-amount { color: var(--ss-cobalt); }
.ss-plan-period {
  font-size: var(--ss-text-small);
  color: var(--ss-color-text);
}
.ss-plan--featured .ss-plan-period { color: var(--ss-color-text); }
.ss-plan-annual {
  font-size: var(--ss-text-small);
  color: var(--ss-color-text);
  margin-bottom: 1rem;
}
.ss-plan--featured .ss-plan-annual { color: var(--ss-color-text); }
/* Featured card sits on white, so restore the standard primary button colours */
.ss-plan--featured .button.is-primary {
  background: var(--ss-color-primary);
  color: var(--ss-color-primary-contrast);
  border-color: var(--ss-color-primary);
}
.ss-plan--featured .button.is-primary:hover,
.ss-plan--featured .button.is-primary:focus-visible {
  background: var(--ss-color-primary-hover);
  border-color: var(--ss-color-primary-hover);
}

/* Enterprise row */
.ss-plan-enterprise {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-top: 1.5rem;
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 1rem; justify-content: center; text-align: center;
}
.ss-plan-enterprise p {
  font-size: var(--ss-text-small);;
  color: rgba(255, 255, 255, 0.7);
}
.ss-plan-enterprise-link {
  font-size: var(--ss-text-small);; font-weight: 600;
  color: var(--ss-color-link-on-dark);
  text-decoration: none;
}
.ss-plan-enterprise-link:hover,
.ss-plan-enterprise-link:focus-visible {
  color: #fff;
  text-decoration: underline;
}

/* ──────────────────────────────────────────────────────────────────────
   Audience accents — Mint as secondary / highlight
   Scoped via body.consumer / body.clinician. Use --ss-color-highlight
   only as a background, border, shape or icon — never as text on white.
   Cobalt-on-Mint = 7.6:1 (passes WCAG AA for normal text).
   ────────────────────────────────────────────────────────────────────── */

.product .ss-plan-badge {
  background: var(--ss-color-highlight);
  color: var(--ss-color-primary);
}

.product .ss-cap-bullet {
  background: var(--ss-color-highlight);
}

.product .ss-test-eyebrow {
  display: inline-block;
  padding: 0.25rem 0.625rem;
  border-radius: var(--ss-radius-pill);
}

/* Consumer classes | embrace mint as the consumer accent */

.consumer.product .ss-test-card {
  border-left-color: var(--ss-color-highlight);
}

.consumer.product .ss-step-num::before {
  content: "";
  display: block;
  width: 24px;
  height: 3px;
  background: var(--ss-color-highlight);
  border-radius: var(--ss-radius-pill);
  margin-bottom: 0.5rem;
}
.consumer.product .ss-test-eyebrow {
  background: var(--ss-color-highlight);
  color: var(--ss-color-primary);
}

/* Clinical classes */

.clinical.product .ss-test-card {
  border-left-color: var(--ss-color-primary);
}

.clinical.product .ss-test-eyebrow {
  background: var(--ss-color-primary);
  color: var(--ss-color-surface);
}

.clinical.product .ss-battery-num {
  background: var(--ss-color-surface-alt);
  border-radius: var(--ss-radius-md);
  padding: 0.5rem 0.625rem;
}

.clinical.product .ss-solution-card-evidence {
  border-left: 2px solid var(--ss-color-surface-inverse);
}

.clinical.product .ss-solution-card-bullets li::before {
  background: var(--ss-color-surface-inverse);
}


/* ──────────────────────────────────────────────────────────────────────
   Component — Form controls
   ────────────────────────────────────────────────────────────────────── */
.input,
.textarea,
.select select {
  font-family: var(--ss-font-family);
  font-size: var(--ss-text-body);
  color: var(--ss-color-text);
  background: var(--ss-color-surface);
  border: 1px solid var(--ss-grey);
  border-radius: var(--ss-radius-md);
  padding: var(--ss-space-3) var(--ss-space-4);
  min-height: 44px;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.input:focus,
.textarea:focus,
.select select:focus {
  border-color: var(--ss-color-primary);
  border-width: 2px;
  outline: none;
  box-shadow: 0 0 0 3px rgba(25, 58, 158, 0.25);
}

.ss-field-label {
  display: block;
  font-weight: 700;
  font-size: var(--ss-text-small);
  color: var(--ss-color-text);
  margin-bottom: var(--ss-space-2);
}
.ss-field-required {
  color: var(--ss-color-primary);
  margin-left: 2px;
}
.ss-field-help {
  font-size: var(--ss-text-small);
  color: var(--ss-color-text-muted);
  margin-top: var(--ss-space-1);
}

/* ──────────────────────────────────────────────────────────────────────
   Component — Link
   ────────────────────────────────────────────────────────────────────── */
a {
  color: var(--ss-color-link);
  text-decoration: underline;
  text-underline-offset: 2px;
}
a:hover { color: var(--ss-color-primary-hover); }

.is-on-dark a {
  color: var(--ss-color-link-on-dark);
}
.is-on-dark a:hover { color: var(--ss-white); }

/* Reset for navigation lists where underlines are not wanted */
.navbar a,
.ss-footer-list a,
.button { text-decoration: none; }
.ss-footer-list a { text-decoration: underline; }

/* ──────────────────────────────────────────────────────────────────────
   Component — Legal index list
   ────────────────────────────────────────────────────────────────────── */
.ss-legal-index {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ss-legal-index-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem 1rem;
  border-top: 1px solid var(--ss-color-border, #e5e7eb);
  color: var(--ss-color-text, inherit);
  text-decoration: none;
  border-radius: 4px;
  transition: background 0.15s ease, color 0.15s ease;
  min-height: 44px;
}

.ss-legal-index li:last-child .ss-legal-index-item {
  border-bottom: 1px solid var(--ss-color-border, #e5e7eb);
}

.ss-legal-index-item:hover,
.ss-legal-index-item:focus-visible {
  background: var(--ss-color-surface-alt, #f5f8ff);
  color: var(--ss-color-primary, #1a3a6b);
  outline: 2px solid var(--ss-color-primary, #1a3a6b);
  outline-offset: -2px;
}

.ss-legal-index-text {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.ss-legal-index-title {
  font-weight: 600;
}

.ss-legal-index-desc {
  font-size: 0.9rem;
  color: var(--ss-color-text-muted, #6b7280);
}

.ss-legal-index-arrow {
  flex: 0 0 auto;
  font-size: 1.1rem;
  color: var(--ss-color-text-muted, #6b7280);
  transition: transform 0.15s ease;
}

.ss-legal-index-item:hover .ss-legal-index-arrow,
.ss-legal-index-item:focus-visible .ss-legal-index-arrow {
  transform: translateX(3px);
  color: var(--ss-color-primary, #1a3a6b);
}

/* ── About: combined story + team page ── */
.ss-story-layout {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.ss-story-figure {
  margin: 0;
}

.ss-story-img {
  border-radius: var(--ss-radius-lg);
  width: 100%;
  height: auto;
  display: block;
}

@media (min-width: 769px) {
  .ss-story-layout {
    flex-direction: row;
    align-items: flex-start;
    gap: 3rem;
  }

  .ss-story-body {
    flex: 1;
    min-width: 0;
  }

  .ss-story-figure {
    flex-shrink: 0;
    width: 38%;
    position: sticky;
    top: 2rem;
  }
}

.ss-story-content blockquote {
  border-left: 4px solid var(--ss-color-primary);
  background: var(--ss-color-surface-alt);
  padding: 1.25rem 1.5rem;
  border-radius: 0 var(--ss-radius-md) var(--ss-radius-md) 0;
  font-size: var(--ss-text-lead);
  color: var(--ss-color-text);
  font-style: italic;
  margin: 2rem 0;
}


.ss-awards-section {
  background: var(--ss-color-surface-alt);
}

.ss-partners-section {
  background: var(--ss-color-surface-alt);
}

.ss-team-card {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
  height: 100%;
}

.ss-team-photo {
  flex-shrink: 0;
  width: 80px;
  height: 80px;
  margin: 0;
}

.ss-team-photo img {
  width: 80px;
  height: 80px;
  object-fit: cover;
}

.ss-team-body {
  flex: 1;
  min-width: 0;
}

.ss-team-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.125rem;
}

.ss-team-name {
  font-weight: 700;
  font-size: 1rem;
  color: var(--ss-color-text);
  margin: 0;
}

.ss-team-linkedin {
  flex-shrink: 0;
  color: var(--ss-color-text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  border-radius: var(--ss-radius-sm);
  transition: color 0.15s;
}

.ss-team-linkedin:hover,
.ss-team-linkedin:focus-visible {
  color: var(--ss-color-primary);
  outline: 2px solid var(--ss-color-primary);
  outline-offset: 2px;
}

.ss-team-role {
  font-size: var(--ss-text-small);;
  color: var(--ss-color-text-muted);
  margin-bottom: 0.625rem;
}

.ss-team-bio {
  font-size: var(--ss-text-small);;
  line-height: 1.65;
  color: var(--ss-color-text);
  margin: 0;
}

.ss-credits-section {
  border-top: 1px solid var(--ss-color-border-subtle);
}

.ss-credits-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 769px) {
  .ss-credits-list {
    grid-template-columns: 1fr 1fr;
  }
}

.ss-credits-entry {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
}

.ss-credits-icon {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ss-color-surface-alt);
  border-radius: var(--ss-radius-md);
  color: var(--ss-color-primary);
}

.ss-ci-unicode {
  font-size: 1.125rem;
  line-height: 1;
}

.ss-credits-text {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding-top: 0.25rem;
}

.ss-credits-role {
  font-weight: 700;
  font-size: var(--ss-text-small);;
  color: var(--ss-color-text);
}

.ss-credits-names {
  font-size: var(--ss-text-small);;
  color: var(--ss-color-text-muted);
}

.ss-credits-note {
  margin-top: 1.75rem;
  font-size: var(--ss-text-small);
  color: var(--ss-color-text-muted);
  font-style: italic;
  max-width: 72ch;
  border-top: 1px solid var(--ss-color-border-subtle);
  padding-top: 1.25rem;
}

/* ── Learn section ────────────────────────────────────────────────────────── */

/* Breadcrumb */
.ss-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ss-space-1);
  list-style: none;
  margin: 0 0 var(--ss-space-4);
  padding: 0;
  font-size: var(--ss-text-small);
  color: var(--ss-color-text-muted);
}
.ss-breadcrumb li + li::before {
  content: '›';
  margin-right: var(--ss-space-1);
  color: var(--ss-color-text-muted);
}
.ss-breadcrumb a {
  color: var(--ss-color-link);
  text-decoration: none;
}
.ss-breadcrumb a:hover { text-decoration: underline; }
.ss-breadcrumb [aria-current="page"] { color: var(--ss-color-text-muted); }

/* Hub section card */
.ss-learn-hub-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: var(--ss-color-text);
  transition: box-shadow 120ms ease, transform 120ms ease;
}
.ss-learn-hub-card:hover {
  box-shadow: var(--ss-shadow-3);
  transform: translateY(-2px);
  color: var(--ss-color-text);
}
.ss-learn-hub-card-image {
  overflow: hidden;
  border-radius: var(--ss-radius-lg);
  background: var(--ss-color-surface-alt);
}
.ss-learn-hub-card-img {
  display: block;
  width: 100%;
  height: 180px;
  object-fit: cover;
}
.ss-learn-hub-card .title { color: var(--ss-color-primary); }
.ss-learn-hub-card-desc { flex: 1; }
.ss-learn-hub-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
}
.ss-learn-hub-card-header .ss-gateway-tile-icon {
  font-size: 2rem;
}
a.ss-learn-hub-card {
  position: relative;
}
a.ss-learn-hub-card .title::after {
  content: " \2192";
  font-weight: 400;
  color: var(--ss-color-link);
}
a.ss-learn-hub-card::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 1.75rem;
  height: 1.75rem;
  background: linear-gradient(
    315deg,
    #e0e4ef 40%,
    rgba(0, 0, 0, 0.10) 47%,
    transparent 54%
  );
  pointer-events: none;
  transition: width 160ms ease, height 160ms ease;
}
@media (prefers-reduced-motion: no-preference) {
  a.ss-learn-hub-card:hover::after {
    width: 2.5rem;
    height: 2.5rem;
  }
}

/* Shared image slot for learn index cards */
.ss-card-image {
  overflow: hidden;
  border-radius: var(--ss-radius-lg);
  background: var(--ss-color-surface-alt);
  margin-bottom: var(--ss-space-4);
  height: 180px;
}

.ss-card-image img {
  display: block;
  width: 100%;
  height: 180px;
  object-fit: cover;
}

/* Placeholder when no image is available — semantic hook for future styling */
.ss-card-image--placeholder {
  background: var(--ss-color-surface-alt);
}

/* Article card (section list) */
.ss-article-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: var(--ss-color-text);
  transition: box-shadow 120ms ease, transform 120ms ease;
}
.ss-article-card:hover {
  box-shadow: var(--ss-shadow-3);
  transform: translateY(-2px);
  color: var(--ss-color-text);
}
.ss-article-card .title { color: var(--ss-color-primary); }
.ss-article-card-desc { flex: 1; }
a.ss-article-card {
  position: relative;
}
a.ss-article-card .title::after {
  content: " \2192";
  font-weight: 400;
  color: var(--ss-color-link);
}
a.ss-article-card::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 1.75rem;
  height: 1.75rem;
  background: linear-gradient(
    315deg,
    #e0e4ef 40%,
    rgba(0, 0, 0, 0.10) 47%,
    transparent 54%
  );
  pointer-events: none;
  transition: width 160ms ease, height 160ms ease;
}
@media (prefers-reduced-motion: no-preference) {
  a.ss-article-card:hover::after {
    width: 2.5rem;
    height: 2.5rem;
  }
}

/* Article body */
.ss-prose { line-height: 1.75; }
.ss-prose img {
  display: block;
  max-width: 80%;
  margin: var(--ss-space-8) auto;
  border-radius: var(--ss-radius-lg);
  box-shadow: var(--ss-shadow-2);
}
.is-resource .ss-prose img {
  max-width: 100%;
  width: auto;
  max-height: 16rem;
  margin: auto;
  box-shadow: var(--ss-shadow-4);
}
.ss-prose h2 {
  color: var(--ss-color-primary);
  margin-top: var(--ss-space-8);
  margin-bottom: var(--ss-space-3);
}
.is-resource .ss-prose h2 {
  margin-top: var(--ss-space-2);
}
.ss-prose h3 {
  color: var(--ss-color-primary);
  margin-top: var(--ss-space-6);
  margin-bottom: var(--ss-space-2);
}
.ss-prose blockquote {
  border-left: 4px solid var(--ss-color-accent);
  padding: var(--ss-space-3) var(--ss-space-5);
  background: var(--ss-color-surface-alt);
  border-radius: 0 var(--ss-radius-md) var(--ss-radius-md) 0;
  margin: var(--ss-space-5) 0;
}

/* Expandable Details and Summary */
details {
  margin-bottom: var(--ss-space-2);
}

summary {
  margin-bottom: var(--ss-space-1);
}

summary::marker {
  content: '→ ';
}

details[open] summary::marker {
  content: '↓ ';
}

/* CTA band (bottom of articles) */
.ss-cta-band {
  background: var(--ss-gradient-cobalt);
  padding-top: var(--ss-space-12);
  padding-bottom: var(--ss-space-12);
}
.ss-cta-band .title { color: var(--ss-white); }

/* Prev / next article navigation */
.ss-prev-next {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--ss-space-5);
  padding: var(--ss-space-6) 0 0;
  border-top: 1px solid var(--ss-color-border);
  margin-top: var(--ss-space-5);
}
.ss-prev-next--prev { text-align: left; min-width: 0; }
.ss-prev-next--next { text-align: right; min-width: 0; }
.ss-prev-next a {
  display: flex;
  flex-direction: column;
  gap: var(--ss-space-1);
  text-decoration: none;
}
.ss-prev-next-label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ss-color-text-muted);
}
.ss-prev-next-title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ss-color-link);
}
.ss-prev-next a:hover .ss-prev-next-title,
.ss-prev-next a:focus-visible .ss-prev-next-title { text-decoration: underline; }

/* Enterprise tier link sits on a light cap-card (SSIMPL page); the base
   .ss-plan-enterprise-link is azure for dark sections, so scope it here to
   --ss-color-link (navy), which passes WCAG AA on the white cap-card. */
.ss-cap-card .ss-plan-enterprise-link { color: var(--ss-color-link); }
.ss-cap-card .ss-plan-enterprise-link:hover,
.ss-cap-card .ss-plan-enterprise-link:focus-visible {
  color: var(--ss-cobalt);
  text-decoration: underline;
}

/* ── Nav dropdown (Products) ── */
.ss-nav-dropdown { 
  position: relative; 
  display: inline-flex; 
  align-items: center; 
}

.ss-nav-dropdown-trigger {
  background: none; 
  border: 0; 
  cursor: pointer; 
  font: inherit; 
  color: inherit;
  display: inline-flex; 
  align-items: center; 
  gap: var(--ss-space-1);
}
.ss-nav-caret { 
  font-size: 0.7em; 
}

.ss-nav-dropdown-menu {
  position: absolute; 
  top: 100%; 
  left: 0; 
  min-width: 220px; 
  z-index: 50;
  background: var(--ss-color-surface); 
  border: 1px solid var(--ss-color-border-subtle);
  border-radius: var(--ss-radius-md); 
  box-shadow: var(--ss-shadow-2);
  padding: var(--ss-space-2); 
  display: flex; 
  flex-direction: column;
}

.ss-nav-dropdown-item {
  display: flex; 
  align-items: center; 
  min-height: 44px;
  padding: var(--ss-space-2) var(--ss-space-3);
  color: var(--ss-color-text); 
  text-decoration: none; 
  border-radius: var(--ss-radius-sm);
}

.ss-nav-dropdown-item:hover, .ss-nav-dropdown-item:focus-visible {
  background: var(--ss-color-surface-alt); 
  color: var(--ss-color-link);
}

.ss-nav-dropdown-trigger:focus-visible,
.ss-nav-dropdown-item:focus-visible { 
  outline: 2px solid var(--ss-color-focus); 
  outline-offset: 2px; }
[x-cloak] { display: none !important; }

/* Semantic list wrappers for nav groups (WCAG H48).
   At desktop the <li> must mirror what the old direct <div> child did as a
   flex item of .navbar-end — stretch to fill the full bar height so the inner
   .navbar-item is clickable edge-to-edge. At mobile (<1024px) Bulma renders
   .navbar-menu as a block column so <li> reverts to its natural block display. */
@media screen and (min-width: 1024px) {
  .ss-nav-list > li { display: flex; align-items: stretch; }
}

/* While the navbar is collapsed to the burger (≤1023px, Bulma's navbar
   breakpoint) the dropdown menu shows inline, not absolutely positioned. */
@media (max-width: 1023px) {
  .ss-nav-dropdown { display: block; width: 100%; }
  .ss-nav-dropdown-menu { position: static; box-shadow: none; border: 0; min-width: 0; }
}

/* ── Solutions nav — group labels and wide two-column dropdown ── */
.ss-nav-group-label {
  font-size: 11px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ss-color-text-muted);
  padding: var(--ss-space-2) var(--ss-space-3) var(--ss-space-1);
  display: block;
}
.ss-nav-dropdown-menu--wide {
  min-width: 420px;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
@media (max-width: 1023px) {
  .ss-nav-dropdown-menu--wide {
    grid-template-columns: 1fr;
    min-width: 0;
  }
}

/* ── Language / region switcher ── */
.ss-lang-trigger { font-size: 1.25rem; padding-inline: var(--ss-space-2); }
.ss-lang-menu { right: 0; left: auto; min-width: 200px; }
.ss-lang-menu .ss-nav-dropdown-item { gap: var(--ss-space-2); }
.ss-lang-label { font-size: var(--ss-text-small); }
@media (max-width: 1023px) {
  .ss-lang-menu { position: static; box-shadow: none; border: 0; min-width: 0; }
}

/* ── Solution page product card ── */
.ss-solution-card {
  border: 0.5px solid var(--ss-color-border-subtle);
  border-radius: var(--ss-radius-lg);
  padding: var(--ss-space-5) var(--ss-space-6);
  background: var(--ss-color-surface);
  display: flex; flex-direction: column; gap: var(--ss-space-3);
  height: 100%;
}
.ss-solution-card-eyebrow {
  font-size: var(--ss-text-overline);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ss-color-text-muted);
  margin: 0;
}

.consumer.product .ss-solution-card-eyebrow {
  color: var(--ss-color-accent);
}

.clinical.product .ss-solution-card-eyebrow {
  color: var(--ss-color-primary);
}

.ss-solution-card-name {
  font-size: 18px; font-weight: 500; color: var(--ss-color-text); margin: 0;
}
.ss-solution-card-desc {
  font-size: var(--ss-text-body); color: var(--ss-color-text-muted); line-height: 1.65; margin: 0;
}
.ss-solution-card-bullets {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: var(--ss-space-2);
}
.ss-solution-card-bullets li {
  font-size: var(--ss-text-small); color: var(--ss-color-text-muted);
  padding-left: var(--ss-space-4); position: relative;
}
.ss-solution-card-bullets li::before {
  content: ""; position: absolute; left: 0; top: 0.55em;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--ss-color-highlight);
}
.ss-solution-card-link {
  font-size: 14px; font-weight: 500; color: var(--ss-color-link);
  text-decoration: none; margin-top: auto;
}
.ss-solution-card-link:hover,
.ss-solution-card-link:focus-visible { text-decoration: underline; }
.ss-solution-card-evidence {
  font-size: var(--ss-text-overline); color: var(--ss-color-text-muted);
  border-left: 2px solid var(--ss-color-highlight);
  padding-left: var(--ss-space-3); line-height: 1.55;
}

/* ── Solution card — interactive anchor variant ── */
a.ss-solution-card {
  text-decoration: none;
  color: var(--ss-color-text);
  transition: box-shadow 160ms ease;
}
a.ss-solution-card .ss-solution-card-name::after {
  content: " \2192";
  font-weight: 400;
  color: var(--ss-color-link);
}
a.ss-solution-card:hover {
  box-shadow: var(--ss-shadow-2);
}
@media (prefers-reduced-motion: no-preference) {
  a.ss-solution-card { transition: box-shadow 160ms ease, transform 160ms ease; }
  a.ss-solution-card:hover { transform: translateY(-2px); }
}
a.ss-solution-card:focus-visible {
  outline: 2px solid var(--ss-color-focus);
  outline-offset: 4px;
}

.ss-solution-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
}
.ss-solution-card-header .ss-solution-card-eyebrow {
  margin-top: 0.15rem;
  margin-right: 2.5rem;
}

.ss-solution-card-header img {
  position: absolute;
  top: 1rem;
  right: 2rem;
}

.ss-solution-card-icon {
  font-size: 2rem;
  line-height: 1;
  flex-shrink: 0;
}
.ss-solution-card-icon-img {
  height: 40px;
  width: auto;
  object-fit: contain;
  flex-shrink: 0;
}

.ss-solution-card--tinted {
  background: #f7f9fc;
  border: 1px solid #dde3ed;
}

.ss-platform-loop-img {
  display: block;
  width: 100%;
  max-width: 480px;
  height: auto;
  margin: 0 auto;
}

/* ── Endorsement logo strip ── */
.ss-logo-strip {
  display: flex; flex-wrap: wrap; gap: 2rem; align-items: center;
  margin-top: var(--ss-space-6);
}
.ss-logo-strip-img {
  max-height: 48px; width: auto; opacity: 0.55; filter: brightness(0);
}
@media (prefers-reduced-motion: no-preference) {
  .ss-logo-strip-img { transition: opacity 0.15s; }
}
.ss-logo-strip-img:hover { opacity: 0.85; }
.ss-logo-strip--color { justify-content: center; }
.ss-logo-strip--color .ss-logo-strip-img { filter: none; opacity: 1; }
.ss-logo-strip--color .ss-logo-strip-img:hover { opacity: 0.8; }

/* ──────────────────────────────────────────────────────────────────────
   Homepage — hero gradient modifier
   ────────────────────────────────────────────────────────────────────── */
.ss-hero--gradient {
  background: var(--ss-gradient-cobalt);
}

/* ──────────────────────────────────────────────────────────────────────
   Hero - Logo in Background
   ────────────────────────────────────────────────────────────────────── */

.ss-hero-with-logo {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.ss-hero-mark {
  position: absolute;
  top: -2rem;
  bottom: -2rem;
  left: 0;
  right: 0;
  z-index: -1;
  pointer-events: none;
  user-select: none;
}

@media (min-width: 769px) {
  .ss-hero-mark {
    top: -3rem;
    bottom: -3.5rem;
  }
}
.ss-hero-mark-img {
  position: absolute;
  top: 0;
  right: 0;
  left: auto;
  transform: translateX(50%);
  height: 100%;
  width: auto;
  max-width: none;
  object-fit: contain;
  opacity: 0.2;
}
.ss-hero-mark-img--light { display: none; }
.ss-hero-mark-img--dark { display: block; }
.is-on-dark .ss-hero-mark-img--light { display: block; }
.is-on-dark .ss-hero-mark-img--dark { display: none; }
.ss-hero--gradient .column {
  position: relative;
  z-index: 1;
}

/* ──────────────────────────────────────────────────────────────────────
   CTA - Logo in Background
   ────────────────────────────────────────────────────────────────────── */
.ss-cta-with-logo {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.ss-cta-mark {
  position: absolute;
  top: -2rem;
  bottom: -2rem;
  left: 0;
  right: 0;
  z-index: -1;
  pointer-events: none;
  user-select: none;
}

@media (min-width: 769px) {
  .ss-cta-mark {
    top: -3rem;
    bottom: -3.5rem;
  }
}
.ss-cta-mark-img {
  position: absolute;
  top: 0;
  height: 200%;
  transform: translateY(-25%) translateX(-50%);
  width: auto;
  max-width: none;
  object-fit: contain;
  opacity: 0.2;
}
.ss-cta-mark-img--light { display: none; }
.ss-cta-mark-img--dark { display: block; }
.is-on-dark .ss-cta-mark-img--light { display: block; }
.is-on-dark .ss-cta-mark-img--dark { display: none; }
.column {
  position: relative;
  z-index: 1;
}

.support-list .column {
  padding: var(--ss-space-2) var(--ss-space-6)
}

/* ──────────────────────────────────────────────────────────────────────
   Homepage — audience gateway tile
   Extends .ss-card.is-interactive; use together.
   ────────────────────────────────────────────────────────────────────── */
.ss-gateway-tile {
  display: flex;
  flex-direction: column;
}
a.ss-gateway-tile,
a.ss-solution-card,
a.ss-battery-card {
  position: relative;
}
a.ss-gateway-tile::after,
a.ss-solution-card::after,
a.ss-battery-card::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 1.75rem;
  height: 1.75rem;
  background: linear-gradient(
    315deg,
    #e0e4ef 40%,
    rgba(0, 0, 0, 0.10) 47%,
    transparent 54%
  );
  pointer-events: none;
  transition: width 160ms ease, height 160ms ease;
}
@media (prefers-reduced-motion: no-preference) {
  a.ss-gateway-tile:hover::after,
  a.ss-solution-card:hover::after,
  a.ss-battery-card:hover::after {
    width: 2.5rem;
    height: 2.5rem;
  }
}
.ss-gateway-tile-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: var(--ss-space-2);
}
.ss-gateway-tile-header .ss-gateway-tile-title {
  margin-bottom: 0;
}
.ss-gateway-tile-icon {
  font-size: 3rem;
  line-height: 1;
  flex-shrink: 0;
}
.ss-gateway-tile-title {
  font-size: var(--ss-text-h3);
  font-weight: 700;
  color: var(--ss-color-primary);
  margin: 0 0 var(--ss-space-2);
}
a.ss-gateway-tile .ss-gateway-tile-title::after {
  content: " \2192";
  font-weight: 400;
}

a.ss-gateway-tile .ss-gateway-tile-title--no-after::after {
  content: none;
}

.ss-gateway-tile-desc {
  font-size: var(--ss-text-body);
  color: var(--ss-color-text-muted);
  line-height: 1.55;
  margin: 0;
  flex: 1;
}
.ss-gateway-tile-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: var(--ss-text-small);;
  font-weight: 700;
  color: var(--ss-color-primary);
  margin-top: var(--ss-space-4);
}

/* ──────────────────────────────────────────────────────────────────────
   Homepage — CTA strip: side-by-side buttons
   ────────────────────────────────────────────────────────────────────── */
.ss-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
  align-items: center;
}

/* ──────────────────────────────────────────────────────────────────────
   Awards — shared logo image
   ────────────────────────────────────────────────────────────────────── */
.ss-award-logo {
  max-height: 56px;
  width: auto;
  object-fit: contain;
  display: block;
}

/* ──────────────────────────────────────────────────────────────────────
   Awards — homepage callout
   ────────────────────────────────────────────────────────────────────── */
.ss-award-stat {
  font-size: clamp(2.5rem, 6vw, 4rem);
  font-weight: 700;
  color: var(--ss-cobalt);
  line-height: 1.1;
  margin: var(--ss-space-3) 0 var(--ss-space-6);
}
.ss-award-logos {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--ss-space-6);
}
.ss-awards-cta {
  display: inline-block;
  padding: 0.625rem 0;
  font-weight: 600;
  color: var(--ss-cobalt);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.ss-awards-cta:hover { color: var(--ss-azure); }

/* ──────────────────────────────────────────────────────────────────────
   Awards — full awards page cards
   ────────────────────────────────────────────────────────────────────── */
.ss-award-card-logo {
  height: 64px;
  display: flex;
  align-items: center;
  margin-bottom: var(--ss-space-4);
}
.ss-award-card-year {
  font-size: var(--ss-text-small);
  font-weight: 700;
  color: var(--ss-cobalt);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin: 0 0 var(--ss-space-2);
}
.ss-award-card-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--ss-color-text);
  margin: 0 0 var(--ss-space-3);
  line-height: 1.4;
}
.ss-award-card-title a {
  color: var(--ss-cobalt);
  text-decoration: none;
}
.ss-award-card-title a:focus-visible { text-decoration: underline; }
a.ss-award-card:hover {
  background: #eef1fb;
}
.ss-award-card-desc {
  font-size: var(--ss-text-small);
  color: var(--ss-color-text-muted);
  margin: 0;
  line-height: 1.6;
}

/* ──────────────────────────────────────────────────────────────────────
   Awards — about page recognition strip
   ────────────────────────────────────────────────────────────────────── */
.ss-about-award {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ss-space-2);
  text-align: center;
}
.ss-about-award .ss-small {
  color: var(--ss-color-text-muted);
}
.ss-award-logos--start { justify-content: flex-start; }

/* ── About page — horizontal-scroll awards strip ── */
.ss-awards-scroll {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  gap: var(--ss-space-5);
  padding: var(--ss-space-4) var(--ss-space-6) var(--ss-space-5);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--ss-color-border-subtle) transparent;
}
.ss-awards-scroll::-webkit-scrollbar {
  height: 4px;
}
.ss-awards-scroll::-webkit-scrollbar-track {
  background: transparent;
}
.ss-awards-scroll::-webkit-scrollbar-thumb {
  background: var(--ss-color-border-subtle);
  border-radius: 2px;
}
.ss-awards-scroll-item {
  flex: 0 0 auto;
  width: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ss-space-2);
  text-align: center;
  text-decoration: none;
  color: inherit;
}
.ss-awards-scroll-item:hover img {
  opacity: 0.75;
}
.ss-awards-scroll-item:hover .ss-awards-scroll-year {
  color: var(--ss-color-link);
}
.ss-awards-scroll-item img {
  max-width: 90px;
  max-height: 52px;
  width: auto;
  height: auto;
  object-fit: contain;
}
.ss-awards-scroll-year {
  font-size: 0.75rem;
  color: var(--ss-color-text-muted);
  white-space: nowrap;
}


/* ──────────────────────────────────────────────────────────────────────
   Awards — winner highlight
   ────────────────────────────────────────────────────────────────────── */
.ss-award-card--winner {
  border-color: var(--ss-cobalt);
  border-width: 2px;
}
.ss-award-winner-badge {
  display: inline-block;
  background: var(--ss-cobalt);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.1rem 0.35rem;
  border-radius: 2px;
  vertical-align: middle;
  margin-left: 0.35rem;
}

/* ──────────────────────────────────────────────────────────────────────
   News — press release cards
   ────────────────────────────────────────────────────────────────────── */
.ss-news-card {
  display: block;
  border: 1px solid var(--ss-color-border-subtle);
  border-radius: var(--ss-radius-lg);
  overflow: hidden;
  color: var(--ss-color-text);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.ss-news-card:hover {
  box-shadow: var(--ss-shadow-2);
  transform: translateY(-2px);
}
.ss-news-card-img {
  aspect-ratio: 16 / 5;
  overflow: hidden;
  background: var(--ss-color-border-subtle);
  opacity: 0.7;
}
.ss-news-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ss-news-card-body {
  padding: var(--ss-space-4);
}
.ss-news-card-title {
  font-weight: 600;
  line-height: 1.4;
  color: var(--ss-color-text);
}
.ss-news-card:hover .ss-news-card-title { color: var(--ss-color-link); }

/* ──────────────────────────────────────────────────────────────────────
   News — coverage list with outlet logos
   ────────────────────────────────────────────────────────────────────── */
.ss-news-list { list-style: none; margin: 0; padding: 0; }
.ss-news-item {
  display: flex;
  gap: var(--ss-space-5);
  align-items: flex-start;
  padding: var(--ss-space-4) 0;
  border-bottom: 1px solid var(--ss-color-border-subtle);
}
.ss-news-item:first-child { border-top: 1px solid var(--ss-color-border-subtle); }
.ss-news-logo {
  flex: 0 0 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
}
.ss-news-logo img {
  max-width: 80px;
  max-height: 36px;
  width: auto;
  height: auto;
  object-fit: contain;
  opacity: 0.85;
}
.ss-news-body { flex: 1; min-width: 0; }
.ss-news-meta { font-size: var(--ss-text-small); color: var(--ss-color-text-muted); display: flex; gap: var(--ss-space-2); align-items: center; margin-bottom: var(--ss-space-1); }
.ss-news-title { font-weight: 500; color: var(--ss-color-link); line-height: 1.4; }
.ss-news-title:hover { text-decoration: underline; }
span.ss-news-title { color: var(--ss-color-text); }

/* ──────────────────────────────────────────────────────────────────────
   Partnerships — partner cards
   ────────────────────────────────────────────────────────────────────── */
.ss-partner-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--ss-space-6);
  border: 1px solid var(--ss-color-border-subtle);
  border-radius: var(--ss-radius-lg);
  background: var(--ss-color-surface);
}
.ss-partner-logo {
  display: flex;
  align-items: center;
  min-height: 110px;
  margin-bottom: var(--ss-space-5);
}
.ss-partner-logo img {
  max-height: 100px;
  max-width: 220px;
  width: auto;
  height: auto;
  object-fit: contain;
}
.ss-partner-body { flex: 1; display: flex; flex-direction: column; }
.ss-partner-tagline {
  font-weight: 600;
  font-size: 1.05rem;
  line-height: 1.4;
  color: var(--ss-color-text);
  margin-bottom: var(--ss-space-3);
}
.ss-partner-desc {
  font-size: var(--ss-text-small);
  color: var(--ss-color-text-muted);
  line-height: 1.6;
  flex: 1;
  margin-bottom: var(--ss-space-4);
}
.ss-partner-link {
  font-size: var(--ss-text-small);
  font-weight: 600;
  color: var(--ss-color-link);
  text-decoration: none;
  align-self: flex-start;
}
.ss-partner-link:hover { text-decoration: underline; }

.is-about .ss-partner-card {
  padding: var(--ss-space-4);
}
.is-about .ss-partner-logo {
  min-height: 64px;
  margin-bottom: var(--ss-space-3);
}
.is-about .ss-partner-logo img {
  max-height: 56px;
  max-width: 140px;
}
.is-about .ss-partner-tagline {
  font-size: 0.9rem;
}
.is-about .ss-partner-desc {
  font-size: 0.8rem;
}

/* ──────────────────────────────────────────────────────────────────────
   News — article banner
   ────────────────────────────────────────────────────────────────────── */
.ss-news-article-banner {
  border-radius: var(--ss-radius-lg);
  overflow: hidden;
}
.ss-news-article-banner img {
  width: 100%;
  height: auto;
  display: block;
}

/* ──────────────────────────────────────────────────────────────────────
   Contact page
   ────────────────────────────────────────────────────────────────────── */
.ss-form-card,
.ss-contact-address-card {
  padding: var(--ss-space-6);
}

.ss-download-card {
  text-align: center;
}

address.ss-contact-address {
  font-style: normal;
  line-height: 1.6;
}

.ss-contact-divider {
  background-color: var(--ss-color-border-subtle);
  height: 1px;
  margin: var(--ss-space-5) 0;
  border: none;
}

.ss-contact-map-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--ss-radius-sm);
  border: 1px solid var(--ss-color-border);
}
.ss-contact-map-img:hover {
  opacity: 0.9;
}

/* ──────────────────────────────────────────────────────────────────────
   Single property classes - acts as framework classes
   ────────────────────────────────────────────────────────────────────── */

.flex {
  display: flex;
}

.flex-col {
  flex-direction: column;
}

.items-center {
  align-items: center;
}

.justify-center{
  justify-content: center;
}

.no-underline {
  text-decoration: none;
}

.text-light-grey {
  color: var(--ss-grey);
}

.text-sm {
  font-size: var(--ss-text-small);
}

.emoji-filter {
  /* filter: sepia(100%) hue-rotate(185deg) saturate(400%) brightness(0.9); */
  filter: sepia(100%) hue-rotate(175deg) saturate(200%) brightness(90%) contrast(110%)
}

.h-full {
  height: 100%;
}

/* ──────────────────────────────────────────────────────────────────────
   Bulma overrides
   ────────────────────────────────────────────────────────────────────── */

/* removes strange negative margin top */
.ss-section .columns
{
  margin-top: auto;
}

/* Table Styling */
.ss-section thead {
  background: var(--ss-color-surface-alt);

  th {
    color: var(--ss-color-primary);
  }
}

.ss-section tbody {
  a {
    text-decoration: none;
  }
}

/* 
  for some reason applying a small amount of padding activates margin of inner HTML 
  also, bulma seems to pick up on these and generates them
*/
/*
.pt-0 {
  padding-top: 0.01rem;
}

.px-6 {
  padding-left: var(--ss-space-8);
  padding-right: var(--ss-space-8);
}

.pb-6 {
  padding-bottom: var(--ss-space-8);
}
*/

/* ──────────────────────────────────────────────────────────────────────
   WCAG 1.4.3 contrast fixes
   ────────────────────────────────────────────────────────────────────── */

/* code/pre: Bulma default is insufficient contrast on its light bg.
   #101010 on #f5f5f5 = 16.6:1 (passes AA). */
code, pre code {
  color: #101010;
  background: #f5f5f5;
}

/* Bulma danger (used for required-field asterisks): override to a red
   that passes 4.5:1 on white. #c0392b on white = 4.72:1 (passes AA). */
:root {
  --bulma-danger-h: 5;
  --bulma-danger-s: 60%;
  --bulma-danger-l: 36%;
}

/* Bulma breadcrumb active link: override the muted default to Cobalt.
   #193A9E on white = 9.81:1 (passes AA). Scoped to Bulma .breadcrumb
   only — .ss-breadcrumb already uses ss-color-text-muted. */
.breadcrumb li.is-active a,
.breadcrumb li.is-active a:hover {
  color: var(--ss-cobalt);
}

/* Awards callout hover: azure #00C1FD fails on white. Use Cobalt instead.
   #193A9E on white = 9.81:1 (passes AA). */
.ss-awards-cta:hover { color: var(--ss-cobalt); }