/* FAQ connected layout, scoped to the private connected prototype. */
[data-faq-connected="v1"] {
  --faq-header-height: 72px;
  --faq-topicbar-height: 0px;
}
[data-faq-connected="v1"] .faq-connected-layout {
  align-items: start;
  display: grid;
  gap: 32px;
  grid-template-columns: 224px minmax(0, 1fr);
  margin-inline: auto;
  padding-block: 24px 48px;
  width: min(1280px, calc(100% - 64px));
}
[data-faq-connected="v1"] .faq-topic-rail { min-width: 0; }
[data-faq-connected="v1"][data-faq-enhanced="true"] .faq-topic-rail {
  max-height: calc(100dvh - var(--faq-header-height, 72px) - 32px);
  overflow-y: auto;
  position: sticky;
  top: calc(var(--faq-header-height, 72px) + 16px);
}
[data-faq-connected="v1"] .faq-topics {
  background: transparent;
  position: relative;
}
[data-faq-connected="v1"] .faq-topics-heading {
  color: #425b36;
  font-family: "DM Sans", sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  line-height: 1.3;
  margin: 0 0 10px;
  text-transform: uppercase;
}
[data-faq-connected="v1"] .faq-topics ul {
  border: 0;
  display: block;
  list-style: none;
  margin: 0;
  padding: 0;
}
[data-faq-connected="v1"] .faq-topics li {
  border: 0;
  margin: 0;
  padding: 0;
}
[data-faq-connected="v1"] .faq-topics ul > li:first-child { position: relative; }
[data-faq-connected="v1"] .faq-vine-art,
[data-faq-connected="v1"] .faq-vine-progress {
  height: var(--faq-vine-height, 264px);
  left: 0;
  overflow: visible;
  pointer-events: none;
  position: absolute;
  top: var(--faq-vine-start, 22px);
  width: 44px;
}
[data-faq-connected="v1"] .faq-vine-art {
  fill: none;
  stroke: #5f7a4b;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.25px;
  z-index: 0;
}
[data-faq-connected="v1"] .faq-vine-progress {
  fill: none;
  stroke: #425b36;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.4px;
  visibility: hidden;
  z-index: 2;
}
[data-faq-connected="v1"][data-faq-vine-ready="true"] .faq-vine-progress { visibility: visible; }
[data-faq-connected="v1"] .faq-vine-art path,
[data-faq-connected="v1"] .faq-vine-progress path { vector-effect: non-scaling-stroke; }
[data-faq-connected="v1"] .faq-topics a {
  background: transparent;
  border-bottom: 1px solid #c2cab9;
  color: #4f6048;
  display: flex;
  align-items: center;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.35;
  min-height: 44px;
  padding: 10px 8px 10px 48px;
  position: relative;
  text-decoration: none;
  transition: background-color 160ms ease, color 160ms ease;
  z-index: 1;
}
[data-faq-connected="v1"] .faq-topics a[aria-current="location"] {
  background: #edf1e9;
  color: #425b36;
  font-weight: 600;
}
[data-faq-connected="v1"] .faq-topics a:hover,
[data-faq-connected="v1"] .faq-topics a:focus-visible {
  color: #425b36;
  text-decoration: underline;
  text-underline-offset: .18em;
}
[data-faq-connected="v1"] .faq-topics a:focus-visible,
[data-faq-connected="v1"] .faq-topics-toggle:focus-visible {
  outline: 2px solid #8a674f;
  outline-offset: 3px;
  position: relative;
  z-index: 1;
}
[data-faq-connected="v1"] .faq-topics-toggle[hidden],
[data-faq-connected="v1"] .faq-topics ul[hidden],
[data-faq-connected="v1"] .faq-topics-heading[hidden] {
  display: none !important;
}
[data-faq-connected="v1"] .faq-topics-toggle { display: none; }
[data-faq-connected="v1"] .faq-reading-column { min-width: 0; }
[data-faq-connected="v1"] .faq-intro {
  background: transparent;
  border: 0;
  display: grid;
  gap: 24px;
  grid-template-columns: minmax(0, 1.15fr) minmax(240px, .85fr);
  margin: 0;
  min-height: 0;
  padding: 0 0 24px;
}
[data-faq-connected="v1"] .faq-opening-copy {
  grid-column: 1;
  grid-row: 1;
  max-width: none;
  min-width: 0;
  padding: 0;
}
[data-faq-connected="v1"] .faq-intro .eyebrow {
  color: #936d54;
  font-size: 11px;
  line-height: 1.35;
  margin: 0 0 8px;
}
[data-faq-connected="v1"] .faq-intro h1 {
  color: #425b36;
  font-size: clamp(38px, 3.3vw, 48px);
  line-height: 1.03;
  margin: 0 0 12px;
  max-width: none;
}
[data-faq-connected="v1"] .faq-intro-lede {
  color: var(--muted);
  font-size: 16px;
  line-height: 1.5;
  margin: 0;
  max-width: none;
}
[data-faq-connected="v1"] .faq-intro-photo {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
  min-width: 0;
  padding: 0;
}
[data-faq-connected="v1"] .faq-intro-photo img {
  border: 1px solid #d2d5c9;
  border-radius: 2px;
  display: block;
  height: clamp(190px, 17vw, 240px);
  object-fit: cover;
  object-position: center 53%;
  width: 100%;
}
[data-faq-connected="v1"] .faq-intro-photo figcaption {
  color: #66695e;
  font-size: 11px;
  line-height: 1.35;
  margin: 4px 0 0;
}
[data-faq-connected="v1"] .faq-group {
  scroll-margin-top: calc(var(--faq-header-height, 72px) + var(--faq-topicbar-height, 0px) + 16px);
}
[data-faq-connected="v1"] .faq-item {
  scroll-margin-top: calc(var(--faq-header-height, 72px) + var(--faq-topicbar-height, 0px) + 16px);
}
@media (min-width: 960px) and (max-width: 1199px) {
  [data-faq-connected="v1"] .faq-connected-layout {
    gap: 24px;
    grid-template-columns: 208px minmax(0, 1fr);
    width: calc(100% - 40px);
  }
}
@media (max-width: 959px) {
  [data-faq-connected="v1"] .faq-connected-layout {
    display: block;
    margin-inline: auto;
    padding: 12px 0 48px;
    width: calc(100% - 40px);
  }
  [data-faq-connected="v1"] .faq-topic-rail {
    max-height: none;
    overflow: visible;
    position: static;
  }
  [data-faq-connected="v1"] .faq-topics { position: relative; }
  [data-faq-connected="v1"][data-faq-enhanced="true"] .faq-topic-rail {
    background: var(--cream);
    max-height: none;
    overflow: visible;
    position: sticky;
    top: var(--faq-header-height, 64px);
    z-index: 10;
  }
  [data-faq-connected="v1"] .faq-topics-heading {
    font-size: 11px;
    margin: 0 0 8px;
  }
  [data-faq-connected="v1"][data-faq-enhanced="true"] .faq-topics-heading { display: none; }
  [data-faq-connected="v1"] .faq-topics-toggle {
    align-items: center;
    background: var(--cream);
    border: 1px solid #b9c4ae;
    border-radius: 2px;
    box-sizing: border-box;
    color: #425b36;
    cursor: pointer;
    display: grid;
    font: 600 14px/19px "DM Sans", sans-serif;
    gap: 8px;
    grid-template-columns: minmax(0, 1fr) 14px;
    height: 64px;
    min-height: 64px;
    padding: 12px;
    text-align: left;
    width: 100%;
  }
  [data-faq-connected="v1"] .faq-topics-toggle-copy {
    display: block;
    line-height: 19px;
    min-width: 0;
    overflow-wrap: anywhere;
  }
  [data-faq-connected="v1"] .faq-topics-toggle-arrow {
    border-bottom: 1.5px solid currentColor;
    border-right: 1.5px solid currentColor;
    height: 7px;
    justify-self: center;
    transform: translateY(-2px) rotate(45deg);
    transition: transform 160ms ease;
    width: 7px;
  }
  [data-faq-connected="v1"] .faq-topics-toggle[aria-expanded="true"] .faq-topics-toggle-arrow {
    transform: translateY(2px) rotate(225deg);
  }
  [data-faq-connected="v1"][data-faq-enhanced="true"] .faq-topics ul {
    background: var(--cream);
    border: 1px solid #c2cab9;
    box-shadow: 0 8px 20px rgb(31 37 27 / 12%);
    left: 0;
    max-height: min(60dvh, 420px);
    overflow-y: auto;
    position: absolute;
    top: 100%;
    width: 100%;
    z-index: 11;
  }
  [data-faq-connected="v1"] .faq-intro {
    display: grid;
    gap: 12px;
    grid-template-columns: minmax(0, 1fr);
    margin: 0;
    padding: 16px 0 20px;
  }
  [data-faq-connected="v1"] .faq-opening-copy,
  [data-faq-connected="v1"] .faq-intro-photo {
    grid-column: 1;
    grid-row: auto;
  }
  [data-faq-connected="v1"] .faq-intro h1 {
    font-size: 36px;
    line-height: 1.05;
    margin-bottom: 10px;
  }
  [data-faq-connected="v1"] .faq-intro-lede { font-size: 15px; line-height: 1.5; }
  [data-faq-connected="v1"] .faq-intro-photo img {
    height: clamp(140px, 41vw, 160px);
  }
}
@media (max-width: 359px) {
  [data-faq-connected="v1"] .faq-connected-layout { width: calc(100% - 32px); }
  [data-faq-connected="v1"] .faq-intro h1 { font-size: 32px; }
  [data-faq-connected="v1"] .faq-intro-photo img { height: 140px; }
}
@media (prefers-reduced-motion: reduce) {
  [data-faq-connected="v1"] .faq-topics a,
  [data-faq-connected="v1"] .faq-topics-toggle-arrow { transition: none; }
}

/* Keep the FAQ opening order consistent for readers and screen readers. */
[data-faq-connected="v1"] .faq-intro > h1 { grid-column: 1; grid-row: 1; }
[data-faq-connected="v1"] .faq-intro > .faq-intro-photo { grid-column: 2; grid-row: 1 / span 2; }
[data-faq-connected="v1"] .faq-intro > .faq-intro-lede { grid-column: 1; grid-row: 2; }
@media (max-width: 959px) {
  [data-faq-connected="v1"] .faq-intro {
    gap: 8px;
    grid-template-columns: minmax(0, 1fr);
  }
  [data-faq-connected="v1"] .faq-intro > h1 { grid-column: 1; grid-row: 1; }
  [data-faq-connected="v1"] .faq-intro > .faq-intro-photo { grid-column: 1; grid-row: 2; margin: 0; }
  [data-faq-connected="v1"] .faq-intro > .faq-intro-lede { grid-column: 1; grid-row: 3; }
}

[data-faq-connected="v1"][data-faq-motion="off"] .faq-vine-progress { visibility: hidden; }

/* Mobile FAQ reading rail reuses the canonical spine and scroll adapter. Desktop keeps the topic-rail branch. */
[data-faq-connected="v1"] [data-faq-mobile-spine] {
  --spine-width: 18;
  --spine-scale: .28;
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  margin: 0;
  padding-left: 0;
}
[data-faq-connected="v1"] [data-faq-mobile-spine] > .tf-flow-spine { display: none; }
@media (max-width: 959px) {
  [data-faq-connected="v1"] [data-faq-mobile-spine] { padding-left: 24px; }
  [data-faq-connected="v1"] [data-faq-mobile-spine] > .tf-flow-spine {
    display: block;
    width: 18px;
    left: 0;
  }
  [data-faq-connected="v1"] .faq-topics .faq-vine-art,
  [data-faq-connected="v1"] .faq-topics .faq-vine-progress { display: none; }
}
@media (max-width: 959px) {
  [data-faq-connected="v1"] [data-faq-mobile-spine] > .tf-flow-spine { z-index: 2; }
}