/* Mobile-only progressive disclosure for the homepage's longest supporting sections. */
.mobile-disclosure-toggle { display: none; }

@media (max-width: 699px) {
  .mobile-disclosure-toggle {
    position: relative; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 18px;
    width: 100%; min-height: 68px; margin: 24px 0 0; padding: 15px 2px;
    border: 0; border-block: 1px solid currentColor; background: transparent; color: inherit;
    font: inherit; text-align: left; cursor: pointer;
  }
  .mobile-disclosure-copy { display: grid; gap: 3px; }
  .mobile-disclosure-copy strong { font-size: .92rem; font-weight: 650; letter-spacing: -.01em; }
  .mobile-disclosure-copy small {
    color: var(--muted, #53655b); font-size: .7rem; font-weight: 600;
    letter-spacing: .08em; line-height: 1.45; text-transform: uppercase;
  }
  .dark .mobile-disclosure-copy small { color: #a8bbb0; }
  .mobile-disclosure-mark {
    position: relative; width: 36px; height: 36px; border: 1px solid currentColor;
    border-radius: 50%; opacity: .82;
  }
  .mobile-disclosure-mark::before, .mobile-disclosure-mark::after {
    content: ""; position: absolute; inset: 50% auto auto 50%; width: 13px; height: 1px;
    background: currentColor; transform: translate(-50%, -50%);
    transition: transform .25s ease, opacity .2s ease;
  }
  .mobile-disclosure-mark::after { transform: translate(-50%, -50%) rotate(90deg); }
  .mobile-disclosure-toggle[aria-expanded="true"] .mobile-disclosure-mark::after {
    opacity: 0; transform: translate(-50%, -50%) rotate(0);
  }
  .mobile-disclosure-toggle:focus-visible { outline: 2px solid var(--gold, #d5af59); outline-offset: 5px; }
  #membership .mobile-disclosure-toggle { margin-top: 34px; color: var(--ink, #183328); }
  #membership .plans .mobile-disclosure-toggle { margin-top: 0; grid-column: 1 / -1; }
  #direction .mobile-disclosure-toggle, #how .mobile-disclosure-toggle {
    color: var(--paper, #f4f2ea); border-color: rgba(213, 175, 89, .5);
  }
  #direction .mobile-disclosure-toggle { margin-bottom: 12px; }
  #how .mobile-disclosure-toggle { margin-bottom: 28px; }
  .mobile-disclosure-target[hidden] { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-disclosure-mark::before, .mobile-disclosure-mark::after { transition: none; }
}