/* Help and Contact page framing around the ChatOne and ContactOne components. */

/* The page row owns the shell width and inset, so --cfa-block-pad is zero here
   and these pages frame up exactly like Features, Models and the footer. */
.cfa-support {
  padding: 58px var(--cfa-block-pad) 82px;
  color: var(--cfa-text);
}

/* WPBakery emits `padding: 0 !important` on .vc_column-inner; inset the wrapper. */
.coderfriendai-support-page .vc_column-inner > .wpb_wrapper {
  padding: 0;
}

/* WordPress' generic page title sits outside the WPO content shell. Both support
   components supply their own editable heading, so suppress the duplicate title. */
body.coderfriendai-support-page .wpo-page-title {
  display: none;
}

/* ---------- Hero ---------- */

.cfa-support__hero {
  max-width: 820px;
  margin: 0 0 48px;
}

.cfa-support__eyebrow,
.cfa-support-card__status,
.cfa-support__micro-label {
  margin: 0 0 12px;
  color: var(--cfa-cyan);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.cfa-support h1 {
  max-width: 820px;
  margin: 0;
  font-size: clamp(2.55rem, 4.8vw, 4.9rem);
  font-weight: 560;
  line-height: 0.98;
  letter-spacing: -0.058em;
}

.cfa-support__intro {
  max-width: 690px;
  margin: 22px 0 0;
  color: rgba(234, 239, 249, 0.82);
  font-size: 1.04rem;
  line-height: 1.68;
}

.cfa-support__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cfa-card-gap);
  margin-top: 32px;
}

.cfa-support__button {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 22px;
  border: 1px solid var(--cfa-cyan);
  border-radius: var(--cfa-action-radius);
  background: var(--cfa-cyan);
  color: #02101e !important;
  font-weight: 700;
  text-decoration: none;
}

.cfa-support__button:hover,
.cfa-support__button:focus {
  background: transparent;
  color: var(--cfa-cyan) !important;
}

.cfa-support__text-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 46px;
  color: var(--cfa-text);
  font-weight: 600;
  text-decoration: none;
}

.cfa-support__text-link:hover,
.cfa-support__text-link:focus {
  color: var(--cfa-cyan);
}

/* ---------- Help search ---------- */

.cfa-help__search {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 32px;
}

.cfa-help__search input {
  width: 100%;
  min-height: 54px;
  padding: 0 18px;
  border: 1px solid var(--cfa-border);
  border-radius: var(--cfa-surface-radius);
  background: #081426;
  color: var(--cfa-text);
  font: inherit;
  outline: none;
}

.cfa-help__search input:focus {
  border-color: var(--cfa-cyan);
  box-shadow: 0 0 0 3px rgba(24, 213, 208, 0.15);
}

.cfa-help__search button {
  flex: 0 0 auto;
  min-height: 46px;
  padding: 0 18px;
  border: 1px solid var(--cfa-border);
  border-radius: var(--cfa-action-radius);
  background: transparent;
  color: var(--cfa-muted);
  font: inherit;
  cursor: pointer;
}

.cfa-help__search button:hover {
  border-color: var(--cfa-cyan);
  color: var(--cfa-cyan);
}

.cfa-help__count {
  margin: 16px 0 0;
  color: var(--cfa-muted);
  font-size: 0.92rem;
}

/* ---------- Sections ---------- */

.cfa-support__section {
  margin-top: var(--cfa-section-gap);
}

.cfa-support__section-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--cfa-card-gap);
  /* Keep the introduction clear of the first card below it. */
  margin-bottom: 24px;
}

.cfa-support__section-header h2 {
  margin: 0;
  font-size: clamp(1.6rem, 2.6vw, 2.35rem);
  line-height: 1.12;
  letter-spacing: -0.03em;
}

.cfa-support__section-intro {
  max-width: 520px;
  margin: 0;
  color: var(--cfa-muted);
  line-height: 1.65;
}

/* ---------- Cards ---------- */

.cfa-help__grid,
.cfa-contact__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--cfa-card-gap);
}

.cfa-contact__grid {
  margin-top: var(--cfa-section-gap);
}

.cfa-support-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 24px;
  border: 1px solid rgba(202, 216, 237, 0.22);
  border-radius: var(--cfa-surface-radius);
  background: linear-gradient(145deg, rgba(10, 26, 48, 0.98), rgba(3, 10, 24, 0.98));
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.04), 0 16px 44px rgba(0, 0, 0, 0.22);
}

.cfa-support-card__number {
  display: block;
  margin-bottom: 36px;
  color: #718096;
  font: 700 0.78rem/1 monospace;
}

.cfa-support-card h2,
.cfa-support-card h3,
.cfa-support__handoff h2 {
  margin: 0;
  color: var(--cfa-text);
  font-size: 1.25rem;
  line-height: 1.25;
}

.cfa-support-card p {
  margin: 14px 0 0;
  color: var(--cfa-muted);
  line-height: 1.65;
}

.cfa-support-card__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  color: var(--cfa-cyan);
  font-weight: 600;
  text-decoration: none;
}

.cfa-support-card__link:hover,
.cfa-support-card__link:focus {
  text-decoration: underline;
}

/* ---------- Quick answers ---------- */

/* Same card gap as the imported manual below it; two accordions on one page
   with different gaps read as a defect. */
.cfa-help__accordion {
  display: grid;
  gap: var(--cfa-card-gap);
}

.cfa-help__accordion details {
  border: 1px solid rgba(202, 216, 237, 0.2);
  border-radius: var(--cfa-surface-radius);
  background: linear-gradient(180deg, rgba(9, 24, 43, 0.92), rgba(4, 15, 31, 0.92));
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.025), 0 14px 38px rgba(0, 0, 0, 0.14);
}

.cfa-help__accordion summary {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
  cursor: pointer;
  list-style: none;
}

.cfa-help__accordion summary::-webkit-details-marker {
  display: none;
}

.cfa-help__accordion summary h3 {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: 16px;
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.35;
}

.cfa-help__accordion summary h3 span:first-child {
  color: #718096;
  font: 700 0.78rem/1 monospace;
}

.cfa-help__accordion summary h3 span:nth-child(2) {
  flex: 1 1 auto;
}

.cfa-help__accordion summary i {
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--cfa-cyan);
  border-bottom: 2px solid var(--cfa-cyan);
  transform: rotate(45deg);
  transition: transform 0.18s ease;
}

.cfa-help__accordion details[open] summary i {
  transform: rotate(-135deg);
}

.cfa-help__accordion details > div {
  padding: 0 24px 24px;
}

.cfa-help__accordion details p {
  margin: 0;
  color: var(--cfa-muted);
  line-height: 1.7;
}

.cfa-help__empty {
  margin-top: var(--cfa-card-gap);
  padding: 24px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: var(--cfa-surface-radius);
  color: var(--cfa-muted);
}

/* ---------- Contact desk ---------- */

.cfa-contact__desk {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--cfa-card-gap);
  align-items: start;
}

.cfa-contact__checklist {
  padding: 24px;
  border: 1px solid rgba(202, 216, 237, 0.2);
  border-radius: var(--cfa-surface-radius);
  background: linear-gradient(180deg, rgba(9, 24, 43, 0.92), rgba(4, 15, 31, 0.92));
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.025), 0 14px 38px rgba(0, 0, 0, 0.14);
}

.cfa-contact__checklist ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.cfa-contact__checklist li {
  display: flex;
  gap: 16px;
  padding: 20px 0;
  border-top: 1px solid rgba(148, 163, 184, 0.14);
}

.cfa-contact__checklist li:first-child {
  padding-top: 0;
  border-top: 0;
}

.cfa-contact__checklist li:last-child {
  padding-bottom: 0;
}

.cfa-contact__checklist li span {
  flex: 0 0 auto;
  color: #718096;
  font: 700 0.78rem/1.6 monospace;
}

.cfa-contact__checklist strong {
  display: block;
  color: var(--cfa-text);
  font-size: 1rem;
}

.cfa-contact__checklist p {
  margin: 8px 0 0;
  color: var(--cfa-muted);
  line-height: 1.6;
}

.cfa-contact__form-panel > header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  /* Keep the label clear of the ContactOne card that follows it. */
  margin-bottom: 16px;
  padding: 0 4px;
}

.cfa-contact__form-panel > header span {
  color: var(--cfa-text);
  font-weight: 700;
}

.cfa-contact__form-panel > header small {
  color: var(--cfa-muted);
}

/* ---------- Embedded ContactOne form ---------- */

/* ContactOne renders its own panel from its Design Studio settings (dark
   palette, 24px padding, 9px radii are seeded by the child theme). Only the
   integration into the desk column is handled here, so colour, spacing, and
   shape stay editable under ContactOne > Design Studio. */
.cfa-contact__form-panel .contact-one-form-wrapper {
  width: 100%;
  margin: 0;
}

.cfa-contact__form-panel .contact-one-dropzone {
  cursor: pointer;
}

.cfa-contact__form-panel .contact-one-form textarea {
  min-height: 150px;
  resize: vertical;
}

/* ---------- Embedded ChatOne assistant ---------- */

.cfa-support__assistant-panel {
  padding: 24px;
  border: 1px solid rgba(202, 216, 237, 0.22);
  border-radius: var(--cfa-surface-radius);
  background: linear-gradient(145deg, rgba(10, 26, 48, 0.98), rgba(3, 10, 24, 0.98));
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.04), 0 16px 44px rgba(0, 0, 0, 0.22);
}

/* ChatOne writes its palette as an inline style from its own Design Studio, so
   the colours stay admin-editable there. Only the layout is adjusted here. */
.cfa-support__assistant-panel .chatone-widget-shell {
  max-width: none;
  margin: 0;
}

.cfa-support__assistant-panel .chatone-widget {
  width: 100%;
  grid-template-columns: minmax(0, 1fr);
}

/* Keep long documentation answers inside the transcript at every breakpoint.
   Height, typography, palette and radius still use ChatOne's saved controls. */
.cfa-support__assistant-panel .chatone-widget__title {
  font-size: var(--chatone-title-font-size, 24px);
}

.cfa-support__assistant-panel .chatone-widget__header,
.cfa-support__assistant-panel .chatone-widget__composer,
.cfa-support__assistant-panel .chatone-widget__messages,
.cfa-support__assistant-panel .chatone-message {
  padding: 24px;
}

.cfa-support__assistant-panel .chatone-widget__modebar {
  padding: 16px 24px;
}

.cfa-support__assistant-panel .chatone-widget__messages {
  min-width: 0;
  grid-template-columns: minmax(0, 1fr);
  min-height: 0;
  height: var(--chatone-panel-height, 430px);
  max-height: var(--chatone-panel-height, 430px);
  gap: 16px;
  overscroll-behavior-y: contain;
}

.cfa-support__assistant-panel .chatone-message {
  min-width: 0;
  overflow-wrap: anywhere;
}

@media (max-width: 720px) {
  .cfa-support__assistant-panel .chatone-widget__header,
  .cfa-support__assistant-panel .chatone-widget__composer,
  .cfa-support__assistant-panel .chatone-widget__messages,
  .cfa-support__assistant-panel .chatone-message {
    padding: 20px;
  }

  .cfa-support__assistant-panel .chatone-widget__modebar {
    padding: 16px 20px;
  }

  .cfa-support__assistant-panel .chatone-widget__messages {
    gap: 10px;
  }
}

/* ChatOne hardcodes white backgrounds and white-to-white gradients on its panel,
   message list, mode bar, composer, input, and handoff card, while their text
   colour follows --chatone-ink. Against the dark palette that renders near-white
   on white, so re-derive those surfaces from ChatOne's own Design Studio
   variables instead of pinning project colours here. */
.cfa-support__assistant-panel .chatone-widget {
  background: var(--chatone-surface, #07090a);
}

.cfa-support__assistant-panel .chatone-widget__messages {
  background:
    radial-gradient(circle at top right, rgba(24, 213, 208, 0.09), transparent 28%),
    var(--chatone-surface, #07090a);
}

.cfa-support__assistant-panel .chatone-widget__handoff-card {
  background: var(--chatone-surface-strong, #151a1b);
}

.cfa-support__assistant-panel .chatone-widget__modebar {
  background: var(--chatone-surface-strong, #151a1b);
}

.cfa-support__assistant-panel .chatone-widget__composer {
  background: var(--chatone-surface-strong, #151a1b);
}

.cfa-support__assistant-panel .chatone-widget__input {
  background: var(--chatone-surface, #07090a);
  color: var(--chatone-ink, #edf4f3);
}

.cfa-support__assistant-panel .chatone-widget__input::placeholder {
  color: var(--chatone-muted, #a9b4b3);
}

.cfa-support__missing {
  margin: 0;
  color: var(--cfa-muted);
}

/* ---------- Handoff ---------- */

.cfa-support__handoff {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  margin-top: var(--cfa-section-gap);
  padding: 24px;
  border: 1px solid rgba(202, 216, 237, 0.22);
  border-radius: var(--cfa-surface-radius);
  background: linear-gradient(180deg, rgba(9, 24, 43, 0.9), rgba(4, 15, 31, 0.9));
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.025), 0 16px 50px rgba(0, 0, 0, 0.13);
}

.cfa-support__handoff p:not(.cfa-support__eyebrow) {
  max-width: 720px;
  margin: 12px 0 0;
  color: var(--cfa-muted);
  line-height: 1.6;
}

/* ---------- Responsive ---------- */

@media (max-width: 1024px) {
  .cfa-contact__desk {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 850px) {
  .cfa-help__grid,
  .cfa-contact__grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 600px) {
  .cfa-support {
    padding: 42px var(--cfa-block-pad) 62px;
  }

  .cfa-support h1 {
    font-size: clamp(2.25rem, 12vw, 3.35rem);
  }

  .cfa-support__intro {
    font-size: 1rem;
  }

  .cfa-support__hero {
    margin-bottom: var(--cfa-mobile-section-gap);
  }

  .cfa-support__section,
  .cfa-contact__grid,
  .cfa-support__handoff {
    margin-top: var(--cfa-mobile-section-gap);
  }

  .cfa-support__section-header {
    margin-bottom: 20px;
  }

  .cfa-help__grid,
  .cfa-contact__grid,
  .cfa-contact__desk {
    grid-template-columns: 1fr;
    gap: var(--cfa-mobile-card-gap);
  }

  .cfa-support-card,
  .cfa-contact__checklist,
  .cfa-support__assistant-panel,
  .cfa-help__empty,
  .cfa-support__handoff {
    padding: 20px;
  }

  .cfa-help__accordion {
    gap: var(--cfa-mobile-card-gap);
  }

  .cfa-help__accordion summary {
    padding: 16px 20px;
  }

  .cfa-help__accordion details > div {
    padding: 0 20px 20px;
  }

  .cfa-support-card__number {
    margin-bottom: 24px;
  }

  .cfa-support__handoff {
    flex-direction: column;
    align-items: flex-start;
  }

  .cfa-help__search {
    flex-wrap: wrap;
  }
}

/* ---------- Imported application help ---------- */

/* Standalone the manual frames the page like any other block; embedded in the
   Help component it is one more section and inherits that frame. */
.cfa-help-manual.cfa-support {
  padding: 72px var(--cfa-block-pad) 96px;
}

.cfa-help-manual__contents {
  padding: 24px;
  border: 1px solid rgba(202, 216, 237, 0.2);
  border-radius: var(--cfa-surface-radius);
  background: linear-gradient(180deg, rgba(9, 24, 43, 0.92), rgba(4, 15, 31, 0.92));
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.025), 0 14px 38px rgba(0, 0, 0, 0.14);
}

.cfa-help-manual__contents ol {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px var(--cfa-card-gap);
  /* Keep the first link clear of the label above it. */
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: cfa-help-manual;
}

.cfa-help-manual__contents li {
  min-width: 0;
  counter-increment: cfa-help-manual;
}

.cfa-help-manual__contents a {
  display: block;
  color: var(--cfa-muted);
  line-height: 1.5;
  text-decoration: none;
}

.cfa-help-manual__contents a::before {
  content: counter(cfa-help-manual, decimal-leading-zero) " ";
  color: #718096;
  font: 700 0.78rem/1 monospace;
}

.cfa-help-manual__contents a:hover,
.cfa-help-manual__contents a:focus {
  color: var(--cfa-cyan);
}

.cfa-help-manual__sections {
  display: grid;
  gap: var(--cfa-card-gap);
  /* Keep the first section clear of the contents card above it. */
  margin-top: var(--cfa-card-gap);
}

/* Grid items default to min-width:auto, so a wide help table would stretch its
   section past the viewport. The page hides that overflow, which would leave
   the far side of the table unreachable instead of scrolling it. */
.cfa-help-manual__section {
  --card-tone: var(--cfa-cyan);
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(50, 94, 135, .42);
  border-radius: var(--cfa-surface-radius);
  background:
    linear-gradient(148deg, color-mix(in srgb, var(--card-tone) 4.5%, rgba(8, 23, 42, .95)), rgba(3, 13, 29, .97));
  box-shadow: inset 0 1px rgba(255, 255, 255, .023);
  scroll-margin-top: 96px;
}

.cfa-help-manual__section > summary {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px 24px;
  cursor: pointer;
  list-style: none;
}

.cfa-help-manual__section > summary::-webkit-details-marker {
  display: none;
}

/*
 * The number and title live inside the summary's <h3>, not beside it. The
 * selectors here expected them as direct children of <summary>, so neither
 * matched: the heading fell through to the site's display scale and a manual
 * subsection rendered at the size of a page title, with the index unstyled
 * beside it. Matched against the markup the component actually emits, and
 * sized like the accordion directly above it on the same page.
 */
.cfa-help-manual__section > summary h3 {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: 16px;
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: normal;
  text-transform: none;
}

.cfa-help-manual__section > summary h3 span:first-child {
  flex: 0 0 auto;
  color: #718096;
  font: 700 0.78rem/1 monospace;
}

.cfa-help-manual__section > summary > span:first-child {
  flex: 0 0 auto;
  padding-top: 4px;
  color: #718096;
  font: 700 0.78rem/1 monospace;
}

.cfa-help-manual__label {
  flex: 1 1 auto;
  min-width: 0;
}

.cfa-help-manual__label strong {
  display: block;
  font-size: 1.05rem;
  line-height: 1.35;
}

.cfa-help-manual__preview {
  display: block;
  margin-top: 6px;
  color: var(--cfa-muted);
  font-size: 0.92rem;
  font-style: normal;
  line-height: 1.55;
}

.cfa-help-manual__section[open] .cfa-help-manual__preview {
  display: none;
}

.cfa-help-manual__section > summary > i {
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  margin-top: 6px;
  border-right: 2px solid var(--cfa-cyan);
  border-bottom: 2px solid var(--cfa-cyan);
  transform: rotate(45deg);
  transition: transform 0.18s ease;
}

.cfa-help-manual__section[open] > summary > i {
  transform: rotate(-135deg);
}

.cfa-help-manual__body {
  min-width: 0;
  padding: 0 24px 24px;
  color: var(--cfa-muted);
}

.cfa-help-manual__body > *:first-child {
  margin-top: 0;
}

.cfa-help-manual__body > *:last-child {
  margin-bottom: 0;
}

.cfa-help-manual__body p {
  margin: 0 0 16px;
  line-height: 1.7;
}

.cfa-help-manual__body ul,
.cfa-help-manual__body ol {
  margin: 0 0 16px;
  padding-left: 22px;
}

.cfa-help-manual__body li {
  margin-bottom: 10px;
  line-height: 1.7;
}

.cfa-help-manual__body strong {
  color: var(--cfa-text);
}

.cfa-help-manual__body em {
  color: var(--cfa-text);
  font-style: italic;
}

.cfa-help-manual__body code,
.cfa-help-manual__body kbd {
  padding: 2px 6px;
  border: 1px solid var(--cfa-border);
  border-radius: 5px;
  background: rgba(2, 8, 23, 0.75);
  color: var(--cfa-text);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.86em;
  overflow-wrap: anywhere;
}

/* Help tables are two wide prose columns. They scroll inside their own frame so
   a phone never gets a sideways page. */
.cfa-help-manual__table {
  max-width: 100%;
  margin: 0 0 16px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: var(--cfa-surface-radius);
  overflow-x: auto;
}

.cfa-help-manual__table:focus-visible {
  outline: 2px solid var(--cfa-cyan);
  outline-offset: 2px;
}

.cfa-help-manual__table table {
  width: 100%;
  min-width: 420px;
  border-collapse: collapse;
}

.cfa-help-manual__table td,
.cfa-help-manual__table th {
  padding: 16px 24px;
  border-top: 1px solid rgba(148, 163, 184, 0.14);
  line-height: 1.6;
  text-align: left;
  vertical-align: top;
}

.cfa-help-manual__table tr:first-child td,
.cfa-help-manual__table tr:first-child th {
  border-top: 0;
}

.cfa-help-manual__table td:first-child {
  width: 30%;
  color: var(--cfa-text);
}

.cfa-help-manual__platform {
  color: var(--cfa-muted);
  font-size: 0.86em;
  white-space: nowrap;
}

.cfa-help-manual__source {
  /* Keep the provenance note clear of the last section above it. */
  margin: 24px 0 0;
  color: var(--cfa-muted);
  font-size: 0.92rem;
  line-height: 1.6;
}

.cfa-help-manual__source span {
  display: block;
  color: #718096;
}

@media (max-width: 1024px) {
  .cfa-help-manual__contents ol {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .cfa-help-manual.cfa-support {
    padding: 48px var(--cfa-block-pad) 68px;
  }

  .cfa-help-manual__contents {
    padding: 20px;
  }

  .cfa-help-manual__contents ol {
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 20px;
  }

  .cfa-help-manual__sections {
    gap: var(--cfa-mobile-card-gap);
    margin-top: var(--cfa-mobile-card-gap);
  }

  .cfa-help-manual__section > summary {
    padding: 16px 20px;
  }

  .cfa-help-manual__body {
    padding: 0 20px 20px;
  }

  /* Dense rows may compress vertically, but keep the 24px horizontal inset;
     the table scrolls inside its own frame, so it costs no page width. */
  .cfa-help-manual__table td,
  .cfa-help-manual__table th {
    padding: 16px 24px;
  }

  .cfa-help-manual__table table {
    min-width: 320px;
  }

  .cfa-help-manual__source {
    margin-top: 20px;
  }
}

/* Keep Help search beside its editable SliderOne guide on wide screens. */
.cfa-help .cfa-help__hero {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  align-items: center;
  gap: 48px;
  max-width: none;
}
.cfa-help__hero-copy {
  min-width: 0;
}
@media (max-width: 1100px) {
  .cfa-help .cfa-help__hero {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 600px) {
  .cfa-help .cfa-help__hero {
    gap: 34px;
  }
}