/* Site enhancements: mobile responsiveness + cross-browser fixes.
   Loaded on every page after the design's own styles; overrides inline styles
   only where the exported desktop layout breaks on small screens. */

html { -webkit-text-size-adjust: 100%; }

/* Keep dropdown prompts visually consistent with text-field placeholders. */
input::placeholder,
textarea::placeholder,
select:required:invalid,
select:has(option[value=""]:checked) {
  color: #7C8A91 !important;
  opacity: 1;
}
select option {
  color: #0A2A34;
}
select option[value=""] {
  color: #7C8A91;
}

/* image-slot disables touch gestures on its internal image so the design
   editor can pan/reframe it. On touch devices that also prevents a page
   scroll from starting over full-bleed hero photos. Restore vertical panning
   for normal viewing while preserving editor reframe behavior. */
@media (pointer: coarse) {
  image-slot:not([data-reframe])::part(image) {
    touch-action: pan-y !important;
  }
}

/* Safari < 18 needs the -webkit- prefix for the frosted header */
header { -webkit-backdrop-filter: blur(14px); }

/* Home campaign ticker. Its animation phase is synchronized by
   site-enhancements.js. */
.sscc-global-ticker {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  display: block;
  overflow: hidden;
  padding: 13px 0;
  background: #0A4B5C;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
  transition: background .35s;
}
.sscc-global-ticker:hover { background: #0E6378; }
.sscc-global-ticker:hover,
.sscc-global-ticker:focus,
.sscc-global-ticker:active,
.sscc-global-ticker:visited,
.sscc-global-ticker:hover .sscc-global-ticker__group,
.sscc-global-ticker:focus .sscc-global-ticker__group,
.sscc-global-ticker:active .sscc-global-ticker__group,
.sscc-global-ticker:visited .sscc-global-ticker__group {
  color: #fff !important;
}
.sscc-global-ticker__track {
  display: flex;
  width: max-content;
  animation: sscc-shared-ticker 26s linear infinite;
  will-change: transform;
}
.sscc-global-ticker__group {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 44px;
  padding-right: 44px;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.sscc-global-ticker__dot,
.sscc-global-ticker:hover .sscc-global-ticker__dot,
.sscc-global-ticker:focus .sscc-global-ticker__dot,
.sscc-global-ticker:active .sscc-global-ticker__dot,
.sscc-global-ticker:visited .sscc-global-ticker__dot {
  color: #5BD9CE !important;
}
@keyframes sscc-shared-ticker {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (max-width: 720px) {
  .sscc-global-ticker { padding: 11px 0; }
  .sscc-global-ticker__group {
    gap: 28px;
    padding-right: 28px;
    font-size: 14px;
  }
}

/* Hamburger button (hidden on desktop; JS injects it into the header) */
.sscc-nav-toggle {
  display: none;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 10px;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  z-index: 120;
}
.sscc-nav-toggle span {
  display: block;
  width: 24px;
  height: 2px; /* whole pixels only — fractional heights rasterize unevenly */
  background: #0A2A34;
  border-radius: 2px;
  transition: transform .25s ease, opacity .25s ease;
}
.sscc-nav-toggle.sscc-x span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.sscc-nav-toggle.sscc-x span:nth-child(2) { opacity: 0; }
.sscc-nav-toggle.sscc-x span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Desktop navigation: one underline treatment for hover, keyboard focus,
   and the current page. The final link is the pill CTA, not a text tab. */
@media (min-width: 921px) {
  header nav > a:not(:last-child) {
    position: relative;
    padding: 10px 0;
    transition: color .22s ease;
  }
  header nav > a:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 4px;
    height: 2px;
    border-radius: 2px;
    background: #0E6378;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform .22s ease;
  }
  header nav > a:not(:last-child):hover,
  header nav > a:not(:last-child):focus-visible,
  header nav > a[aria-current="page"]:not(:last-child) {
    color: #0E6378 !important;
  }
  header nav > a:not(:last-child):hover::after,
  header nav > a:not(:last-child):focus-visible::after,
  header nav > a[aria-current="page"]:not(:last-child)::after {
    transform: scaleX(1);
  }
}

@media (max-width: 920px) {
  /* Header: restore side padding lost to the desktop flush-left layout */
  header > div {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  /* Collapse the nav into a dropdown behind the hamburger */
  .sscc-nav-toggle { display: inline-flex !important; }
  header nav { display: none !important; }
  header nav.sscc-open {
    display: flex !important;
    position: fixed;
    top: 76px;
    left: 0;
    right: 0;
    flex-direction: column;
    /* !important: the nav's inline style carries align-items:center, which
       otherwise shrink-wraps and centers each link in the dropdown */
    align-items: stretch !important;
    gap: 0 !important;
    background: #F4F4EF;
    border-bottom: 1px solid #DAE0E3;
    padding: 6px 18px 18px;
    box-shadow: 0 24px 40px rgba(6, 32, 40, .16);
    max-height: calc(100vh - 76px);
    max-height: calc(100dvh - 76px);
    overflow-y: auto;
    z-index: 110;
  }
  header nav.sscc-open a {
    font-size: 18px !important;
    padding: 13px 2px;
    width: auto;
    border-bottom: 1px solid rgba(10, 42, 52, .07);
    text-align: left !important;
    justify-content: flex-start !important;
  }
  header nav.sscc-open a:last-child {
    border-bottom: 0;
    margin-top: 10px;
    /* the CTA stays a pill button, anchored left like the links */
    align-self: flex-start;
    padding: 13px 26px;
  }

  /* Forms: comfortable padding on small screens; unstick the sidebar form */
  form[data-reveal] {
    padding: 26px 20px !important;
    position: static !important;
  }

  /* Story cards: fixed 3-column grid becomes 1 column */
  [data-story-grid] { grid-template-columns: minmax(0, 1fr) !important; }
}

@media (min-width: 640px) and (max-width: 920px) {
  [data-story-grid] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

/* Fixed multi-column grids from the desktop export that overflow phone widths */
@media (max-width: 720px) {
  /* How Lives Are Saved: turn the desktop evidence grid into a compact,
     deliberate mobile sequence and remove the compounded gap before cards. */
  [data-evidence-list] {
    padding: 46px 20px 0 !important;
  }
  [data-evidence-row] {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 24px !important;
    padding: 38px 24px 42px !important;
    box-sizing: border-box;
  }
  [data-evidence-row]:nth-child(even) {
    background: rgba(255,255,255,.48);
  }
  [data-evidence-row] > div:first-child {
    position: static !important;
  }
  [data-evidence-row] [data-num] {
    position: static !important;
    top: auto !important;
    left: auto !important;
    display: block;
    width: fit-content;
    font-size: 68px !important;
    line-height: .86 !important;
    margin: 0 0 24px !important;
    -webkit-text-stroke: 1.5px rgba(14,99,120,.45) !important;
    opacity: 1;
  }
  [data-evidence-row] h2 {
    margin: 0 !important;
    max-width: 22ch;
    font-size: 24px !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
  }
  [data-evidence-row] > div:last-child {
    padding-top: 0 !important;
  }
  [data-evidence-row] > div:last-child p {
    font-size: 19.5px !important;
    line-height: 1.65 !important;
  }
  [data-evidence-row]:last-child {
    padding-bottom: 42px !important;
  }
  [data-survival-section] {
    padding: 8px 16px 86px !important;
  }
  [data-survival-grid] {
    grid-template-columns: minmax(0, 1fr) !important;
    border-radius: 22px !important;
    box-shadow: 0 18px 42px rgba(6,32,40,.14) !important;
  }
  [data-survival-card] {
    min-width: 0;
    padding: 38px 28px 36px !important;
  }
  [data-survival-card] + [data-survival-card] {
    border-top: 1px solid rgba(241,247,249,.12);
  }
  [data-survival-card] > div:first-child {
    margin-bottom: 18px !important;
  }
  [data-survival-card] > p:last-child {
    max-width: 30ch !important;
  }

  /* Home: three-column "how care saves" rows stack vertically.
     Selectors cover both raw and browser-normalized style serializations. */
  [data-card][style*="minmax(90px,160px)"],
  [data-card][style*="minmax(90px, 160px)"] {
    grid-template-columns: minmax(0, 1fr) !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  /* Home: two-column dark feature card stacks */
  [data-card][style*="repeat(2,minmax(230px"],
  [data-card][style*="repeat(2, minmax(230px"] { grid-template-columns: minmax(0, 1fr) !important; }

  /* Poll: label gets its own row so the bar keeps full width */
  div[style*="minmax(150px,220px)"],
  div[style*="minmax(150px, 220px)"] { grid-template-columns: 1fr 52px !important; }
  div[style*="minmax(150px,220px)"] > span:first-child,
  div[style*="minmax(150px, 220px)"] > span:first-child {
    grid-column: 1 / -1;
    text-align: left !important;
  }

  /* Who: intro split (min 280px column overflows phones) */
  [style*="minmax(280px,5fr)"],
  [style*="minmax(280px, 5fr)"] { grid-template-columns: minmax(0, 1fr) !important; }

  /* Who: story reader modal, once stacked by the rule above. The inline
     grid-template-rows:minmax(0,1fr) collapses the image row to 0px in the
     single-column layout, so the photo (min-height:280px) overflows its row
     and covers the story's tag/headline. Give the photo its own fixed row
     and let the text row take the rest (keeps its internal scrolling). */
  [data-reader-panel] {
    grid-template-rows: clamp(160px, 30vh, 260px) minmax(0, 1fr) !important;
  }
  [data-reader-panel] > div:first-child { min-height: 0 !important; }

  /* Who: story reader header — on phones the name shares one narrow row
     with the arrows plus a 96px close-button gutter (the close button sits
     over the photo here), so long names squish into a tall skinny column.
     Give the name the full width and drop the arrows onto their own line. */
  [data-reader-scroll] > div:first-child {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
    padding-right: 0 !important;
  }
  [data-reader-scroll] > div:first-child > p {
    font-size: 14px !important;
    letter-spacing: .1em !important;
    line-height: 1.5 !important;
  }
  [data-reader-scroll] > div:first-child > div { margin-left: -8px; }

  /* Home: split panels and the cost-comparison row stack vertically */
  [style*="1.15fr 1fr"] { grid-template-columns: minmax(0, 1fr) !important; }

  /* Home scrolly ("billing rule") section: tighten the stacked column gap
     (the pinned layout itself is flattened for phones further below). */
  [data-sec2-grid] { gap: 28px !important; }
  [data-step-slide] { justify-content: flex-start !important; }
  [style*="grid-template-columns:1fr auto 1fr"],
  [style*="grid-template-columns: 1fr auto 1fr"] { grid-template-columns: minmax(0, 1fr) !important; gap: 28px !important; }
  /* …and once stacked, every stat reads as a clean left-aligned block
     (desktop centers the 250x and right-aligns the third stat) */
  [style*="grid-template-columns:1fr auto 1fr"] > div,
  [style*="grid-template-columns: 1fr auto 1fr"] > div { text-align: left !important; }
  [style*="grid-template-columns:1fr auto 1fr"] > div p,
  [style*="grid-template-columns: 1fr auto 1fr"] > div p { margin-left: 0 !important; }

  /* Tall desktop section padding tightens on phones */
  [style*="padding:100px 24px"], [style*="padding: 100px 24px"],
  [style*="padding:110px 24px"], [style*="padding: 110px 24px"],
  [style*="padding:120px 24px"], [style*="padding: 120px 24px"] {
    padding: 64px 20px !important;
  }

  /* Keep the fixed diagnosis counter desktop-only. On mobile it overlaps
     content and its orange glow bleeds through Safari's translucent toolbar. */
  [data-diag-pill] {
    display: none !important;
  }
}

@media (max-width: 640px) {
  /* Home: label/value stat rows stack */
  [style*="clamp(150px,12vw,210px) 1fr"],
  [style*="clamp(150px, 12vw, 210px) 1fr"] { grid-template-columns: minmax(0, 1fr) !important; }
  /* Home policy-impact card: keep the supporting stats readable
     as one vertical list on phones instead of a 2+1 wrap */
  [style*="minmax(130px,1fr)"],
  [style*="minmax(130px, 1fr)"] { grid-template-columns: minmax(0, 1fr) !important; }
}

/* Anchor targets scroll to rest below the fixed header instead of under it */
[id] { scroll-margin-top: 92px; }

/* Hero photos move downward slightly during the scroll parallax. Give the
   media layer hidden overscan so that translation never exposes the dark
   section background as bars along the top or sides. */
[data-hero-media] {
  top: -16% !important;
  right: -2% !important;
  bottom: -2% !important;
  left: -2% !important;
}
[data-hero-media][data-static-hero] {
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  transform: none !important;
}
@media (max-width: 920px) {
  [data-community-hero-section] {
    background: #062028;
    min-height: calc(100svh - 76px);
    display: flex;
    align-items: center;
  }
  [data-community-hero-section] [data-hero-media][data-static-hero] {
    inset: 0 !important;
    height: auto;
  }
  [data-community-hero-overlay] {
    inset: 0 !important;
    height: auto;
    background: linear-gradient(to right,
      rgba(6,32,40,.9) 0%,
      rgba(6,32,40,.8) 46%,
      rgba(6,32,40,.5) 76%,
      rgba(6,32,40,.26) 100%) !important;
  }
  [data-community-hero-content] {
    width: 100%;
    box-sizing: border-box;
    padding: 76px 24px 72px !important;
    background: transparent;
  }
  #community-hero::part(image) {
    left: 34% !important;
  }
}

/* Poll Data uses a landscape consultation photo with faces close to its top
   edge. Keep that edge in frame instead of center-cropping through heads. */
#poll-hero::part(image) {
  top: 0 !important;
  transform: translate(-50%, 0) !important;
}
/* Animated numbers keep a constant digit width so counts don't jitter.
   The live badge uses its own centered layout so 4+ digits expand evenly. */
[data-count], [data-live-diag] { font-variant-numeric: tabular-nums; }
[data-diag-pill] { z-index: 9999 !important; }
[data-live-diag] {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 54px !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  white-space: nowrap;
}

/* Home scrolly: keep the prev/next arrows clear of the fixed counter pill
   (the pinned 100vh panel bottom-aligns near where the pill floats) */
[data-story-wrap] > div[style*="position:sticky"],
[data-story-wrap] > div[style*="position: sticky"] { padding-bottom: 96px !important; }

/* Hero overlay: the export's left-to-right darkening fades out at desktop
   pixel stops (560-1080px), so on small screens the whole hero stays ~90%
   dark and the photo is invisible. Re-scale the fade to the viewport so the
   lighter right side of each hero image shows through. (Both raw and
   space-normalized inline-style spellings — the dc-runtime re-serializes.) */
@media (max-width: 1024px) {
  [style*="linear-gradient(to right,rgba(6,32,40,.9)"],
  [style*="linear-gradient(to right, rgba(6, 32, 40, 0.9)"] {
    background: linear-gradient(to right,
      rgba(6, 32, 40, 0.86) 0%,
      rgba(6, 32, 40, 0.72) 40%,
      rgba(6, 32, 40, 0.43) 72%,
      rgba(6, 32, 40, 0.18) 100%) !important;
  }
}

/* Header logo/nav gutter on small screens (desktop uses the container's own
   flush-left alignment; without this the logo would touch the screen edge). */
@media (max-width: 1327px) {
  header > div {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

/* Click/tap toggles the full message and number-only badge on every screen.
   Mobile stays fixed; desktop also retains the legacy drag interaction. */
[data-diag-pill].sscc-tappable {
  cursor: pointer !important;
  touch-action: manipulation !important;
  resize: none !important;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
@media (min-width: 921px) {
  [data-diag-pill].sscc-tappable {
    cursor: grab !important;
    touch-action: none !important;
  }
  [data-diag-pill].sscc-tappable:active { cursor: grabbing !important; }
}
[data-diag-pill].sscc-collapsed {
  gap: 0 !important;
  padding: 6px !important;
  max-width: none;
}
[data-diag-pill].sscc-collapsed > span:nth-child(1),
[data-diag-pill].sscc-collapsed > span:nth-child(2) {
  display: none; /* dot + message hidden; just the number in a slim orange ring */
}

/* Phones: the pinned "billing rule" scrolly section is flattened into a
   normal stacked list. Pinning a 280vh scroll-driven stage on touch made
   the page feel stuck ("can't scroll down"), so below the breakpoint there
   is no pin and no scroll-driving — all five steps are simply visible in
   order. The page script skips its animation driver at the same width;
   these rules override the inline stage/slide styles. */
@media (max-width: 920px) {
  [data-story-wrap] { height: auto !important; }
  [data-story-wrap] > div[style*="position:sticky"],
  [data-story-wrap] > div[style*="position: sticky"] {
    position: static !important;
    height: auto !important;
    overflow: visible !important;
    padding: 72px 0 !important;
  }
  [data-rolodex] { margin-top: 10px; }
  [data-stage] {
    height: auto !important;
    margin-left: 5px;
    padding-left: 22px;
    border-left: 1px solid rgba(91, 217, 206, .38);
  }
  [data-step-slide] {
    position: relative !important;
    inset: auto !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 64px;
    column-gap: 12px;
    align-items: start;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    min-height: 0 !important;
    box-sizing: border-box;
    padding: 0 0 38px 6px;
  }
  [data-step-slide]::before {
    content: "";
    position: absolute;
    left: -33px;
    top: 5px;
    width: 9px;
    height: 9px;
    border: 3px solid #062028;
    border-radius: 50%;
    background: #5BD9CE;
    box-shadow: 0 0 0 1px rgba(91, 217, 206, .72);
  }
  [data-step-slide] + [data-step-slide] {
    margin-top: 0;
    padding-top: 10px;
  }
  [data-step-slide] + [data-step-slide]::before {
    top: 15px;
  }
  [data-step-slide]:last-child { padding-bottom: 0; }
  [data-step-slide] > :not([data-ghost]) { grid-column: 1; }
  [data-ghost] {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    grid-column: 2;
    grid-row: 1 / span 3;
    align-self: start;
    justify-self: end;
    display: block !important;
    transform: none !important;
  }
  [data-ghost] svg {
    display: block;
    width: 64px !important;
    height: auto !important;
    stroke-width: 6.5 !important;
  }
  /* step counter + prev/next arrows make no sense in a flat list */
  [data-rolodex] > div:not([data-stage]) { display: none !important; }
}

/* Home "Where it lands first": on phones the section stacks to one column;
   show the text first and the 14-states map card right under it (desktop
   keeps map left / text right — this only applies once stacked). */
@media (max-width: 840px) {
  [data-map-flip] { grid-template-columns: minmax(0, 1fr) !important; }
  [data-map-flip] [data-map-card] { order: 3 !important; }
}