/* ==========================================================================
   L&D — landing experience
   --------------------------------------------------------------------------
   Everything is scoped under .ld-* so it can sit inside a Sitecore page
   without colliding. No dependency on the page's DOM structure.
   ========================================================================== */

/* Colours are the migrated page's own, lifted from bswh-labor-delivery-main-v2.css
   (see public/landd/example/). Several of the category pastels fall short of
   WCAG AA against white — that is the old site's treatment and is deliberate
   here, so do not "fix" them without checking with the business first.

   The category pastels and the UI accents are separate sets: the old site runs
   a saturated teal for chrome and a soft teal for the teal category, and its
   danger red is not the soft red used on the red category's flag. */
.ld-scope {
  --ld-teal: #168fbc;
  --ld-teal-dark: #00718f;
  --ld-gold: #fdbc11;
  --ld-ink: #404040;
  --ld-muted: #5b6770;
  --ld-line: #dfe3e6;
  --ld-surface: #fff;
  --ld-surface-alt: #f5f8fa;
  --ld-radius: 10px;
  --ld-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
  --ld-green: #53e1d0;
  --ld-red: #ff3758;
  --ld-red-soft: #f891a5;
  --ld-teal-soft: #a0dbe9;
  --ld-blue: #98bfe9;
  --ld-purple: #ba7cbc;

  box-sizing: border-box;
  color: var(--ld-ink);
  line-height: 1.55;
  font-family:
    system-ui,
    -apple-system,
    'Segoe UI',
    Roboto,
    sans-serif;
}

.ld-scope p,
.ld-scope h2 {
  margin: 0;
  padding: 0;
  line-height: 1.3;
}

.ld-scope *,
.ld-scope *::before,
.ld-scope *::after {
  box-sizing: inherit;
}

.ld-scope p {
  text-wrap: pretty;
}

/* Also matches the element itself — the modal is moved to <body>, so it is not
   always a descendant of .ld-scope, and .ld-modal's display would win. */
.ld-scope[hidden],
.ld-scope [hidden] {
  display: none !important;
}

/* Held back by the deep-link bootstrap until the CSV says which section to
   show. visibility, not display, so the stage keeps its height and the reveal
   costs no reflow. */
.ld-booting [data-landd-section] {
  visibility: hidden;
}

.ld-wrap {
  margin: 0 auto;
  padding: 0 24px;
  width: 100%;
  max-width: 1180px;
}

.ld-sr-only {
  border: 0;
  clip: rect(0 0 0 0);
  position: absolute;
  margin: -1px;
  padding: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
  white-space: nowrap;
}

.ld-eyebrow {
  margin: 0 0 8px;
  color: var(--ld-teal);
  font-weight: 700;
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ------------------------------- buttons -------------------------------- */

.ld-btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease;
  cursor: pointer;
  border: 2px solid transparent;
  border-radius: 4px;
  padding: 0 28px;
  min-height: 52px;
  font: inherit;
  font-weight: 700;
  text-decoration: none;
}

.ld-btn--primary {
  border-color: var(--ld-gold);
  background: var(--ld-gold);
  color: var(--ld-ink);
}

.ld-btn--primary:hover {
  border-color: #e9a615;
  background: #e9a615;
}

.ld-btn--ghost {
  border-color: var(--ld-teal);
  background: transparent;
  color: var(--ld-teal-dark);
}

.ld-btn--ghost:hover {
  background: rgba(0, 144, 185, 0.08);
}

.ld-btn.is-disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.ld-scope :focus-visible {
  outline: 3px solid var(--ld-teal);
  outline-offset: 2px;
}

/* -------------------------------- stage --------------------------------- */

/* Blocks 1 and 2 share this shell. Both are the same height with the image in
   the same place, so swapping between them leaves the image untouched. */
.ld-stage {
  --ld-header-height: 0px;

  display: flex;
  background: var(--ld-surface-alt);
  overflow: hidden;
}

.ld-stage__inner {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: 40px;
  padding-top: 32px;
  padding-bottom: 32px;
  width: 100%;
}

@media (min-width: 900px) {
  .ld-stage__inner {
    grid-template-columns: 1.05fr 0.95fr;
  }
}

/* Opts out of .ld-stage__inner's centering: the row is as tall as whichever
   column is taller, which differs per section, so a centred image lands at a
   different height in each one. Anchored to the row's top it does not. */
.ld-stage__media {
  align-self: start;
}

.ld-stage__media img {
  display: block;
  border-radius: var(--ld-radius);
  width: 100%;
  max-height: calc(100dvh - var(--ld-header-height) - 96px);
  -o-object-fit: cover;
  object-fit: cover;
}

/* -------------------------------- panels -------------------------------- */

/* Panels are stacked so the column never resizes as they swap. Its height is
   the tallest panel, which keeps the image and the column edges still. */
.ld-panels {
  display: grid;
  align-items: center;
}

.ld-panel {
  grid-area: 1 / 1;
  transform: translateY(28px);
  visibility: hidden;
  opacity: 0;
  transition:
    opacity 0.4s ease,
    transform 0.4s ease,
    visibility 0.4s;
  pointer-events: none;
}

.ld-panel.is-active {
  transform: translateY(0);
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

/* Outgoing panels leave upwards, so the sequence reads as a scroll forwards. */
.ld-panel.is-past {
  transform: translateY(-28px);
}

/* Below the two-column breakpoint the pinned-image stage stops working: the
   image and the copy are stacked inside one viewport-height box, so both get
   squeezed. Each step becomes its own pane that scrolls normally instead —
   hero plus image, then the questions on their own, then the form. */
@media (max-width: 899px) {
  .ld-stage {
    height: auto;
    min-height: calc(100dvh - var(--ld-header-height));
    overflow: visible;
  }

  /* Each step starts at the top of its pane: the stage keeps a viewport-height
     floor, which would otherwise strand short copy in the middle of it. */
  .ld-stage__inner {
    align-items: start;
  }

  /* Un-stacked so the pane is as tall as the step being shown, rather than the
     tallest step in the deck. */
  .ld-panels {
    display: block;
  }

  .ld-panel {
    display: none;
  }

  .ld-panel.is-active {
    display: block;
  }

  /* The image belongs to the hero step; every step after it stands alone. */
  [data-landd-active-panel]:not([data-landd-active-panel='hero']) .ld-stage__media,
  [data-landd-section='form'] .ld-stage__media {
    display: none;
  }

  /* Stacked, the hero leads with the image rather than burying it under the
     headline and two paragraphs. Source order is left alone so the heading
     still comes first for assistive tech and for the two-column layout. */
  [data-landd-section='intro'] .ld-stage__media {
    order: -1;
  }

  .ld-stage__media img {
    max-height: 40vh;
  }
}

.ld-panel__title {
  margin: 0 0 12px;
  font-size: clamp(1.5rem, 3vw, 2.125rem);
}

.ld-panel__intro {
  margin: 0 0 24px;
  color: var(--ld-muted);
}

.ld-hero__title {
  margin: 0 0 20px;
  font-size: clamp(2.25rem, 5vw, 3.5rem);
  line-height: 1.1;
}

.ld-hero__lede {
  margin: 0 0 16px;
  font-size: 1.0625rem;
}

.ld-hero__sub {
  margin: 0 0 28px;
  color: var(--ld-muted);
}

/* ------------------------------ questions ------------------------------- */

.ld-madlib {
  margin: 0 auto;
  max-width: 900px;
  font-size: clamp(1.125rem, 2.4vw, 1.5rem);
  line-height: 2.2;
  text-align: center;
}

/* On the stage the madlib is part of a left-aligned column, not a centred band. */
.ld-panel .ld-madlib {
  margin: 0;
  font-size: clamp(1.0625rem, 1.6vw, 1.3125rem);
  text-align: left;
}

.ld-select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor: pointer;
  margin: 0 6px 12px;
  border: 2px solid var(--ld-teal);
  border-radius: 4px;
  background: var(--ld-surface)
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%230090b9' d='M5.5 7.5 10 12l4.5-4.5z'/%3E%3C/svg%3E")
    no-repeat right 10px center/18px;
  padding: 6px 34px 6px 12px;
  max-width: 100%;
  color: var(--ld-teal-dark);
  font: inherit;
  font-weight: 700;
}

.ld-select.is-invalid {
  border-color: var(--ld-red);
  color: var(--ld-red);
}

.ld-error {
  margin: 16px 0 0;
  color: var(--ld-red);
  font-weight: 700;
  text-align: center;
}

.ld-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 32px;
}

.ld-actions--start {
  justify-content: flex-start;
}

.ld-panel .ld-error {
  text-align: left;
}

/* -------------------------------- form ---------------------------------- */

.ld-form-shell {
  box-shadow: var(--ld-shadow);
  border-radius: var(--ld-radius);
  background: var(--ld-surface);
  padding: 24px;
}

/* Air between a step's copy and the form under it. The results step has no
   form of its own, so it is untouched by both selectors. */
form[data-landd-quiz],
.ld-scope .bsw-form-container,
.ld-form-stage .bsw-form-container {
  -webkit-margin-before: 36px;
  margin-block-start: 36px;
}

/* --------------------------- authored form stage ------------------------- */

/* In Sitecore the form step is an authored column splitter (form beside image)
   rather than Custom HTML, so it cannot use .ld-stage. These rules give it the
   stage's geometry so the image lands in the same place and does not jump as
   the step changes. Both classes are added by landd-section-2-form.js.

   Literal values rather than the tokens: this sits outside .ld-scope, which is
   where the custom properties are declared. Keep in step with .ld-stage. */
.ld-form-stage {
  background: #f5f8fa;
}

/* Doubled-up selector plus !important on the two the theme also forces: its
   utilities set display and padding that way, and specificity alone loses. */
.ld-form-stage .ld-form-stage__grid {
  display: grid !important;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 40px;
  margin: 0 auto;
  padding: 32px 24px !important;
  width: 100%;
  max-width: 1180px;
}

.ld-form-stage .ld-form-stage__grid > [data-column-number] {
  padding: 0 !important;
  min-width: 0;
}

/* Top-anchored like .ld-stage__media, so the image keeps its position however
   tall the form column grows. */
.ld-form-stage .ld-form-stage__grid > [data-column-number]:last-child {
  align-self: start;
}

.ld-form-stage .ld-form-stage__grid img {
  display: block;
  border-radius: 10px;
  width: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

/* The form's copy is block 1's stage shell reused for its heading styles. Sat
   inside the authored stage it has to behave as plain content: its own grid
   otherwise reserves an empty image column that squeezes the copy, and its
   mobile rule would give a three-line heading a viewport-height floor. */
.ld-form-stage .ld-stage {
  display: block;
  background: transparent;
  min-height: 0;
}

.ld-form-stage .ld-stage__inner {
  grid-template-columns: 1fr;
  padding: 0;
  max-width: none;
}

/* Sitecore's forms builder gives no way to put a class on the submit button,
   and it skins it with a per-form hashed selector, so match .btn-primary-teal
   here instead and out-specify that hash (0,2,0). Colour needs !important:
   .bsw-form-container forces it on every descendant. */
.ld-form-stage .bsw-form-container .submit-button {
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease;
  border: 1px solid var(--color-primary-b2);
  border-radius: 4px;
  background-color: var(--color-primary-b2);
  padding: 16px 24px;
  color: var(--color-secondary-a1) !important;
}

.ld-form-stage .bsw-form-container .submit-button:hover {
  border-color: var(--color-primary-b2);
  background-color: var(--color-secondary-b2);
}

@media (max-width: 899px) {
  .ld-form-stage .ld-form-stage__grid {
    grid-template-columns: 1fr;
  }

  /* The form step stands alone below this width, matching what .ld-stage does
     with its own media column. */
  .ld-form-stage .ld-form-stage__grid > [data-column-number]:last-child {
    display: none;
  }
}

/* ---------------------------- theme overrides ---------------------------- */

/* The theme's row padding (p-10, so 40px a side) is too heavy once the stage
   stacks. :has() keeps this to the rows holding this experience rather than
   every row on the site, and !important is needed because the theme's own
   utility carries it. Vertical padding is left alone. */
@media (max-width: 991px) {
  .row:has([data-landd-section]),
  .row:has(.ld-form-stage) {
    padding-inline: 24px !important;
  }
}

/* ------------------------------- results -------------------------------- */

.ld-results__head {
  margin: 0 auto 28px;
  max-width: 760px;
  text-align: center;
}

.ld-results__intro {
  margin: 0;
  color: var(--ld-muted);
}

/* Reserved so a loading/error message swapping in doesn't shove the grid. */
.ld-results__status {
  margin: 0;
  min-height: 1.55em;
  color: var(--ld-muted);
  font-size: 0.9375rem;
}

.ld-results__status--error {
  color: var(--ld-red);
  font-weight: 700;
}

.ld-refine {
  margin: 0 0 32px;
  border-radius: var(--ld-radius);
  background: var(--ld-surface-alt);
  padding: 24px;
}

.ld-refine .ld-madlib {
  font-size: 1.0625rem;
  line-height: 2;
}

.ld-fast-tracks-section {
  margin-top: 24px;
  border-radius: var(--ld-radius);
  background: var(--ld-blue);
  padding: 24px;
}

.ld-fast-tracks-section__heading {
  /** We have to override as we have a global style that sets the margin */
  margin: 0 0 24px !important;
  color: var(--ld-ink);
  font-size: clamp(1rem, 2vw, 1.5rem);
  text-align: center;
}

/* Quick links out to the rest of the site, replacing the old restart/phone
   actions row. Icon-over-text card echoes the live page's fast-tracks-section
   treatment (shadow, centered icon, hover scale) at a smaller size — its
   290px squares on a full-width colored band are too heavy for a row under
   the card grid. Stacks to one column at the same 640px breakpoint the card
   grid uses (see the mobile-narrowing media query further down). */
.ld-fast-tracks {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
}

/* The heading already sets the 24px gap down to the tiles here. */
.ld-fast-tracks-section .ld-fast-tracks {
  margin-top: 0;
}

.ld-fast-tracks > li {
  flex: 1 1 0;
  min-width: 200px;
}

.ld-fast-track {
  display: flex;
  justify-content: center;
  align-items: center;
  transition:
    box-shadow 0.15s ease-out,
    transform 0.15s ease-out;
  box-shadow: var(--ld-shadow);
  border-radius: var(--ld-radius);
  background: var(--ld-surface);
  padding: 24px 16px;
  height: 100%;
  min-height: 44px;
  color: var(--ld-ink);
  text-align: center;
  text-decoration: none;
}

.ld-fast-track:hover,
.ld-fast-track:focus-visible {
  transform: scale(1.03);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.16);
}

/* Icon+text as one centered group, separate from .ld-fast-track's own
   centering — lets the mobile media query flip this to a row without
   fighting the outer element's centering. */
.ld-fast-track__inner {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ld-fast-track__icon {
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--ld-teal-dark);
}

.ld-fast-track__icon img {
  width: 48px;
  height: auto;
}

.ld-fast-track__text {
  line-height: 1.3;
}

/* --------------------------------- tabs --------------------------------- */

.ld-tabs {
  display: none;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 0 0 24px;
  border-bottom: 1px solid var(--ld-line);
  padding: 0 0 20px;
  list-style: none;
}

@media (min-width: 768px) {
  .ld-tabs {
    display: flex;
  }

  .ld-category-select {
    display: none;
  }
}

/* Matches the live page's tab style: a slanted gold "flag" fill appears behind
   the label only when selected, echoing the same pennant shape as the card
   tags. Unselected tabs are plain uppercase gray text, no fill.

   Animating a plain `background`/gradient isn't supported in any browser, and
   an @property-registered custom property turned out to be unreliable here —
   var()-fed registered properties stopped resolving after any class toggle
   past the initial paint (confirmed even with a raw classList.add() bypassing
   all app JS). A ::before with a fixed gradient whose opacity fades is the
   dependable, works-everywhere version of the same effect: one extra layer,
   not two independently-timed ones, fading in sync with the text color. */
.ld-tab {
  /* Fill and the text that sits on it; the per-category modifiers below swap
     both together so the pair is never mismatched. Gold takes white text, as
     the old site's category navbar does; the pastels take its body ink. */
  --ld-tab-fill: var(--ld-gold);
  --ld-tab-ink: #fff;

  display: inline-block;
  position: relative;
  z-index: 0;
  transition: color 0.25s ease-in-out;
  cursor: pointer;
  border: 0;
  background: none;
  padding: 7px 48px 5px 18px;
  color: var(--ld-muted);
  font: inherit;
  font-weight: 800;
  font-size: 1.25rem;
  line-height: 1.1;
  text-transform: uppercase;
  white-space: nowrap;
}

.ld-tab::before {
  position: absolute;
  opacity: 0;
  z-index: -1;
  transition: opacity 0.25s ease-in-out;
  inset: 0;
  background: linear-gradient(
    135deg,
    var(--ld-tab-fill) 0,
    var(--ld-tab-fill) calc(100% - 24px),
    transparent calc(100% - 24px)
  );
  content: '';
}

/* Each fill is the category's flag colour, paired with the ink the old site
   puts on that colour everywhere else. */
.ld-tab--green {
  --ld-tab-fill: var(--ld-green);
  --ld-tab-ink: var(--ld-ink);
}

.ld-tab--red {
  --ld-tab-fill: var(--ld-red-soft);
  --ld-tab-ink: var(--ld-ink);
}

.ld-tab--teal {
  --ld-tab-fill: var(--ld-teal-soft);
  --ld-tab-ink: var(--ld-ink);
}

.ld-tab--blue {
  --ld-tab-fill: var(--ld-blue);
  --ld-tab-ink: var(--ld-ink);
}

/* Purple is the one fill dark enough to carry white, which is what the old
   site puts on it — its purple flag holds a white icon. */
.ld-tab--purple {
  --ld-tab-fill: var(--ld-purple);
  --ld-tab-ink: #fff;
}

/* Hover previews the category colour as a tint, so the label can stay dark
   rather than needing the selected state's text colour. */
.ld-tab:hover {
  color: var(--ld-ink);
}

.ld-tab:hover::before {
  opacity: 0.22;
}

/* After the hover rules: same specificity, so source order keeps a selected
   tab fully filled while the pointer is over it. */
.ld-tab.is-selected {
  color: var(--ld-tab-ink);
}

.ld-tab.is-selected::before {
  opacity: 1;
}

.ld-category-select {
  margin: 0 0 24px;
}

.ld-category-select label {
  display: block;
  margin-bottom: 6px;
  font-weight: 700;
}

.ld-category-select .ld-select {
  margin: 0;
  width: 100%;
}

/* -------------------------------- cards --------------------------------- */

/* Fixed height so filtering never changes the page height, and a scrollbar that
   is always rendered so the cards never shift sideways either. overflow-y:
   scroll is not enough on its own — macOS overlay scrollbars take no space and
   stay invisible until scrolled, which is the shift we are avoiding. */
.ld-cards-viewport {
  padding: 4px 12px 4px 4px;
  height: 60vh;
  min-height: 320px;
  overflow-y: scroll;
  scrollbar-color: var(--ld-teal) var(--ld-surface-alt);
  scrollbar-gutter: stable;
  scrollbar-width: thin;
}

/* Styling the WebKit scrollbar opts out of overlay behaviour, so it stays put. */
.ld-cards-viewport::-webkit-scrollbar {
  width: 10px;
}

.ld-cards-viewport::-webkit-scrollbar-track {
  border-radius: 999px;
  background: var(--ld-surface-alt);
}

.ld-cards-viewport::-webkit-scrollbar-thumb {
  border: 2px solid var(--ld-surface-alt);
  border-radius: 999px;
  background: var(--ld-teal);
}

.ld-cards-viewport::-webkit-scrollbar-thumb:hover {
  background: var(--ld-teal-dark);
}

.ld-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-items: stretch;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 700px) {
  .ld-cards {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1100px) {
  .ld-cards {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Mobile narrowing. Placed after the min-width rules above (and 640 after 768)
   so they win the overlap — source order, not just specificity, breaks ties. */
@media (max-width: 768px) {
  .ld-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .ld-cards {
    grid-template-columns: repeat(1, 1fr);
  }

  .ld-fast-track {
    min-height: unset;
    font-size: 0.75rem;
  }

  .ld-fast-track__inner {
    flex-direction: row;
    gap: 4px;
  }
}

/* Stretches to the tallest card in its row so every card in that row matches. */
.ld-card {
  height: 100%;
}

/* Flag sits in its own column on the left; content sits beside it in a second
   column with the same padding the flag column gets. */
.ld-card__btn {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
  cursor: pointer;
  border: 1px solid var(--ld-line);
  border-radius: var(--ld-radius);
  background: var(--ld-surface);
  padding: 16px;
  width: 100%;
  height: 100%;
  font: inherit;
  text-align: left;
}

.ld-card__btn:hover {
  /* Darker shadow and border only — no scale/lift, unlike the live page's card hover. */
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
  border-color: #b9c0c6;
}

/* Pennant/flag shape from the live page: a rectangle whose bottom half is cut
   diagonally down to a point on the left, flush on the right. Height is
   always exactly 2x width so the 50% clip point lands on the diagonal.
   Sized to match the modal's flag — for now at least. */
.ld-tag {
  position: relative;
  flex: 0 0 auto;
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 50%, 0 100%);
  clip-path: polygon(0 0, 100% 0, 100% 50%, 0 100%);
  /* Cancels the button's own top padding so the flag is flush with the card's
     top edge, like the live page, while the content keeps its normal padding. */
  margin-top: -16px;
  width: 40px;
  height: 80px;
}

.ld-tag__icon {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: auto;
}

.ld-modal__row .ld-tag {
  /* Cancels the base .ld-tag rule's -16px (that's for the card's own padding);
     the flag sits in normal flow here, inset by the dialog's own padding. */
  margin-top: 0;
}

.ld-tag--green {
  background: var(--ld-green);
}
.ld-tag--red {
  background: var(--ld-red-soft);
}
.ld-tag--teal {
  background: var(--ld-teal-soft);
}
.ld-tag--blue {
  background: var(--ld-blue);
}
.ld-tag--purple {
  background: var(--ld-purple);
}

.ld-card__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

/* Shown (not color-only) so category is never conveyed by tag color alone.
   Deliberately stays neutral rather than taking the category's pastel, which
   the old site tints it with — at this size that is unreadable. */
.ld-card__category {
  color: var(--ld-muted);
  font-weight: 700;
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.ld-card__title {
  color: var(--ld-ink);
  font-weight: 700;
  font-size: 0.875rem;
  line-height: 1.35;
}

.ld-card__badge {
  align-self: flex-start;
  margin-top: auto;
  border-radius: 3px;
  background: var(--ld-teal);
  padding: 2px 8px;
  color: #fff;
  font-weight: 700;
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.ld-empty {
  padding: 32px 0;
  color: var(--ld-muted);
  text-align: center;
}

/* -------------------------------- modal --------------------------------- */

/* The lock itself is applied inline by landd-section-3-results.js so it cannot
   be defeated by the theme or by a stale stylesheet; this class is only a
   state marker for anything else that wants to hook it. */

.ld-modal {
  display: flex;
  position: fixed;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  inset: 0;
  padding: 20px;
}

.ld-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
}

.ld-modal__dialog {
  display: flex;
  position: relative;
  flex-direction: column;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
  border-radius: var(--ld-radius);
  background: var(--ld-surface);
  /* Right side trimmed from 24px so the content column gets more width. */
  padding: 0 12px 32px 24px;
  width: 100%;
  max-width: 800px;
  max-height: 90vh;
  /* The dialog itself no longer scrolls — .ld-modal__stack does, so the flag
     and close button (siblings in .ld-modal__row) stay put. */
  overflow: hidden;
}

/* Right-hand column of the row: close on top, share icons under it. Mirrors
   the live page's share sidebar, minus its "Share" label. */
.ld-modal__aside {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.ld-modal__share {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Box is bigger than the 20px glyph for a comfortable tap target, but stays
   the close button's width so the column costs the content no extra room. */
.ld-modal__share-link {
  display: flex;
  justify-content: center;
  align-items: center;
  transition: color 0.15s ease;
  width: 32px;
  height: 32px;
  color: var(--ld-teal);
}

.ld-modal__share-link:hover {
  color: var(--ld-teal-dark);
}

.ld-modal__share-link svg {
  fill: currentColor;
  width: 20px;
  height: 20px;
}

.ld-modal__close {
  /* Part of the heading row now, pushed to the far right by
     justify-content: space-between on .ld-modal__heading-row. */
  flex: 0 0 auto;
  cursor: pointer;
  border: 0;
  background: none;
  padding: 4px 8px;
  color: var(--ld-muted);
  font-size: 1.75rem;
  line-height: 1;
}

/* Outer row: flag on the left (spacing from the edge via the dialog's own
   padding, no absolute positioning), heading/body/video/footer stacked beside
   it. Fills whatever height .ld-modal__dialog has left so .ld-modal__stack has
   a bounded height to scroll within. */
.ld-modal__row {
  display: flex;
  flex: 1 1 auto;
  align-items: flex-start;
  gap: 16px;
  min-height: 0;
}

.ld-modal__row .ld-tag {
  flex: 0 0 auto;
}

.ld-modal__stack {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  /* Stretches to the row's full height (the flag/close stay content-sized via
     the row's align-items: flex-start) so the scroll region below has
     somewhere to kick in. */
  align-self: stretch;
  min-width: 0;
  min-height: 0;
  -webkit-padding-before: 32px;
  padding-block-start: 32px;
}

/* Header and footer are flex:0 0 auto siblings of .ld-modal__scroll, so they
   never shrink or scroll — only the body/video between them do. */
.ld-modal__heading-row {
  display: flex;
  flex: 0 0 auto;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.ld-modal__scroll {
  flex: 1 1 auto;
  margin-top: 16px;
  min-height: 0;
  overflow-y: auto;
  /* Stops a scroll that reaches either end here from moving the page behind. */
  -ms-scroll-chaining: none;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.ld-modal__category {
  display: block;
  /* Matches .ld-modal__qa's flex-basis (34px) + .ld-modal__title's gap (10px),
     so this lines up with the title's own text, not the "Q:" label beside it. */
  padding-left: 44px;
  color: var(--ld-muted);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.ld-modal__title {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 2px 0 0;
  font-size: 1.5rem;
}

/* Shared by the "Q:" (title) and "A:" (body) labels so both sit in the same
   fixed-width column and top-align with the first line instead of centering
   against the full, possibly multi-line, text beside them. Font size is set
   explicitly to match .ld-modal__title (1.5rem) since "A:" otherwise
   inherits the body's smaller size. */
.ld-modal__qa {
  flex: 0 0 34px;
  color: var(--ld-teal);
  font-weight: 700;
  font-size: 1.5rem;
}

.ld-modal__answer {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

/* The flex item beside "A:" now — holds body + video so both stay right of
   the label instead of just the body text. Spacing between them lives here
   (one gap) instead of a margin on .ld-modal__video. */
.ld-modal__answer-content {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}

/* Some items have a video with no AnswerText (or the reverse) — body.innerHTML
   is set to '' in that case, so :empty collapses it out of the flex layout
   instead of leaving a phantom gap before the video. */
.ld-modal__body:empty {
  display: none;
}

.ld-modal__body p {
  margin: 0 0 14px;
}

.ld-modal__body :last-child {
  margin-bottom: 0;
}

.ld-modal__video {
  aspect-ratio: 16 / 9;
  width: 100%;
}

.ld-modal__video iframe {
  border: 0;
  border-radius: 6px;
  width: 100%;
  height: 100%;
}

.ld-modal__footer {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 16px;
  border-top: 1px solid var(--ld-line);
  padding-top: 16px;
}

/* Cancels the tiles' own top margin (meant for their spot under the results
   page's card grid) — the footer's padding-top already sets the line-to-tile
   gap here. */
.ld-modal__footer .ld-fast-tracks {
  margin-top: 0;
}

/* Full-viewport sheet below 640px: no outer inset, no rounded corners, no
   left/right padding (top/bottom padding on the dialog is untouched), and a
   tighter flag-to-content gap. Placed after every rule it overrides — source
   order, not just specificity, decides ties in the cascade. */
@media (max-width: 639px) {
  .ld-modal {
    padding: 0;
  }

  .ld-modal__dialog {
    border-radius: 0;
    padding-right: 0;
    padding-left: 0;
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
  }

  .ld-modal__row {
    gap: 8px;
  }

  /* Pulls the content column back over the empty space left by the flag's
     tapered lower half, which the narrow viewport needs more than the gap. */
  .ld-modal__stack {
    margin-left: -16px;
  }

  /* justify-content: center lives on the container (not just width: 100% on
     the buttons) so centering survives if the 100% width is dropped later. */
  .ld-modal__footer {
    justify-content: center;
  }

  .ld-modal .ld-btn {
    width: 100%;
  }
}

/* ----------------------------- transitions ------------------------------ */

/* Only the results block fades in. Blocks 1 and 2 share the same stage and the
   same pinned image, so fading either one would give away the handover — the
   movement there belongs to the sliding panels, not the section. */
[data-landd-section='results'].is-landd-visible {
  -webkit-animation: ld-fade 0.3s ease;
  animation: ld-fade 0.3s ease;
}

@-webkit-keyframes ld-fade {
  from {
    transform: translateY(8px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes ld-fade {
  from {
    transform: translateY(8px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ld-scope *,
  [data-landd-show-on].is-landd-visible {
    -webkit-animation: none !important;
    animation: none !important;
    transition: none !important;
  }
}

/* --------------------------------- footer -------------------------------- */

/* Same webfont the rest of the site uses for icons (BSWSharpSans/bsw-icons),
   loaded from the CDN copy already used elsewhere (see csp-domains.config.js)
   instead of duplicating the binary into this repo. Only the 5 glyphs the
   footer actually uses are ported over, not the whole icon set. */
@font-face {
  src: url('https://bswcdndesign-prod.bswhealth.com/content/icons/fonts/bsw-icons.woff2')
    format('woff2');
  font-family: 'bsw-icons';
  font-display: swap;
}

.ld-footer [class^='bsw-icon-']::before {
  display: flex;
  justify-content: center;
  align-items: center;
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  font-family: 'bsw-icons', sans-serif;
}

.bsw-icon-facebook::before {
  content: '\e022';
}
.bsw-icon-instagram::before {
  content: '\e02a';
}
.bsw-icon-pinterest::before {
  content: '\e03b';
}
.bsw-icon-twitter-x::before {
  content: '\f117';
}
.bsw-icon-youtube::before {
  content: '\e05a';
}

/* Two groups (icons+address, copyright+legal) as row-reverse siblings so the
   icons/address group — first in source order, which is what mobile wants on
   top — lands on the right at desktop widths without a duplicated DOM order. */
.ld-footer {
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  gap: 24px;
  border-top: 1px solid var(--ld-line);
  padding: 32px 24px;
  color: var(--ld-muted);
  font-size: 0.8125rem;
}

.ld-footer__group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ld-footer__group--social {
  align-items: flex-end;
}

.ld-footer__social {
  display: flex;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Bare glyph, no chip behind it, sized as the old site sizes its social SVGs. */
.ld-footer__social a {
  display: flex;
  justify-content: center;
  align-items: center;
  transition: opacity 0.25s ease;
  color: var(--ld-teal);
  font-size: 1.5rem;
  text-decoration: none;
}

.ld-footer__social a:hover,
.ld-footer__social a:focus-visible {
  opacity: 0.8;
}

.ld-footer__address {
  margin: 0;
  text-align: right;
}

.ld-footer__copyright {
  margin: 0;
}

.ld-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
}

.ld-footer__legal a {
  color: var(--ld-muted);
  text-decoration: underline;
}

@media (max-width: 639px) {
  .ld-footer {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .ld-footer__group--social {
    align-items: center;
  }

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