/* Native menus need explicit foreground and background colors on Windows too. */
:root { color-scheme: dark; }
select, input, textarea { color-scheme: dark; }
select option, select optgroup { color: #eef3e5; background-color: #1b2c23; }
select option:disabled { color: #a9b9b0; }
@media (forced-colors: active) {
  select option, select optgroup { color: CanvasText; background-color: Canvas; }
  select option:disabled { color: GrayText; }
}

/* Shared by the homepage and the guide pages: illustrated figures, "Read more" and plus-marker lists. */
:is(.benefits-home, .guide-page) { --line: #2b3c32; --muted: #a9b9b0; --accent: #d6f58b; }
:is(.benefits-home, .guide-page) .lede { max-width: 640px; font-size: 19px; line-height: 1.6; color: #c3d0c6; margin: 0 0 8px; }
:is(.benefits-home, .guide-page) svg.graphic { display: block; width: 100%; height: auto; }
:is(.benefits-home, .guide-page) svg.graphic text { font-family: Manrope, 'Segoe UI', sans-serif; }
:is(.benefits-home, .guide-page) svg.graphic.g-narrow { display: none; }
:is(.benefits-home, .guide-page) .graphic-frame { margin: 56px 0 24px; }
:is(.benefits-home, .guide-page) .graphic-frame figcaption { font-size: 13px; line-height: 1.7; color: #8fa196; max-width: 760px; margin-top: 18px; }

:is(.benefits-home, .guide-page) .point-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 56px; margin: 24px 0 0; padding: 0; list-style: none; }
:is(.benefits-home, .guide-page) .point-list li { border-top: 1px solid var(--line); margin: 0; padding: 0; }
:is(.benefits-home, .guide-page) .point-list summary { list-style: none; display: flex; align-items: center; gap: 16px; padding: 22px 0; font-size: 19px; font-weight: 600; letter-spacing: -.3px; line-height: 1.35; cursor: pointer; }
:is(.benefits-home, .guide-page) .point-list summary::-webkit-details-marker { display: none; }
:is(.benefits-home, .guide-page) .point-list summary::after { content: '+'; margin-left: auto; font-size: 24px; font-weight: 400; color: var(--accent); transition: transform .15s; }
:is(.benefits-home, .guide-page) .point-list details[open] summary::after { transform: rotate(45deg); }
:is(.benefits-home, .guide-page) .point-list summary:hover { color: var(--accent); }
:is(.benefits-home, .guide-page) .point-list details p { font-size: 15px; line-height: 1.75; color: var(--muted); margin: -6px 0 14px; max-width: 520px; }
:is(.benefits-home, .guide-page) .point-list details .text-link { margin-bottom: 22px; }
:is(.benefits-home, .guide-page) .point-list .n { flex: 0 0 auto; font-size: 13px; color: var(--accent); font-weight: 700; min-width: 24px; }

:is(.benefits-home, .guide-page) .more { margin-top: 22px; border-top: 1px solid var(--line); }
:is(.benefits-home, .guide-page) .more > summary { list-style: none; cursor: pointer; padding: 16px 0; color: var(--accent); font-size: 15px; font-weight: 600; }
:is(.benefits-home, .guide-page) .more > summary::-webkit-details-marker { display: none; }
:is(.benefits-home, .guide-page) .more > summary::after { content: ' ↓'; }
:is(.benefits-home, .guide-page) .more[open] > summary::after { content: ' ↑'; }
:is(.benefits-home, .guide-page) .more-body { max-width: 820px; padding-bottom: 8px; }
.benefits-home .more-body p { font-size: 15px; line-height: 1.8; color: var(--muted); margin: 0 0 16px; }
.benefits-home .more-body strong { color: #eef3e5; }

/* Guide pages: plain concept line instead of pills, and a calmer figure. */
.guide-page .concept-tags { display: flex; flex-wrap: wrap; gap: 4px 20px; margin-top: 22px; padding: 0; list-style: none; }
.guide-page .concept-tags li { background: none; border: 0; padding: 0; border-radius: 0; font-size: 13px; color: var(--muted); }
.guide-page .guide-hero { border-bottom: 0; padding-bottom: 0; }
.guide-page .graphic-frame { margin: 36px 0 12px; }
.guide-page .guide-content > section > .more { margin-top: 18px; }
.guide-page .guide-content .more-body p { font-size: 16px; }
.guide-page .guide-content .point-list { margin-top: 8px; }
.guide-page .guide-content .point-list li { padding-left: 0; }

@media (max-width: 760px) {
  :is(.benefits-home, .guide-page) .point-list { grid-template-columns: 1fr; }
  :is(.benefits-home, .guide-page) .lede { font-size: 17px; }
  :is(.benefits-home, .guide-page) .graphic-frame { margin-top: 28px; }
  :is(.benefits-home, .guide-page) svg.graphic.g-wide { display: none; }
  :is(.benefits-home, .guide-page) svg.graphic.g-narrow { display: block; max-width: 420px; margin-inline: auto; }
}

:is(.benefits-home, .guide-page) .sub-heading { font-size: 26px; letter-spacing: -.6px; margin: 64px 0 12px; font-weight: 600; }