/* Page-scoped responsive and control-surface repairs. */
@media (max-width: 600px) {
  body[data-helper-page] main .directory-card-grid,
  body[data-helper-page] main .directory-feature-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  body[data-helper-page] main .directory-table-wrap {
    max-width: 100%;
  }
  body[data-helper-page] main .directory-table {
    min-width: 0;
    table-layout: fixed;
  }
  body[data-helper-page] main .directory-table th,
  body[data-helper-page] main .directory-table td {
    overflow-wrap: anywhere;
  }
}
body[data-helper-page] main .directory-filter {
  background-color: #252a24;
  color: #f4f1db;
}
body[data-helper-page] main .directory-filter.is-active {
  background-color: #c6df68;
  color: #20241d;
}
@media (max-width: 600px) {
  body[data-helper-page] main .directory-table-wrap {
    overflow-x: visible;
  }
  body[data-helper-page] main .directory-table,
  body[data-helper-page] main .directory-table thead,
  body[data-helper-page] main .directory-table tbody,
  body[data-helper-page] main .directory-table tr {
    display: block;
    width: 100%;
  }
  body[data-helper-page] main .directory-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    clip-path: inset(50%);
  }
  body[data-helper-page] main .directory-table tbody tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    margin-block: 0 12px;
    border: 1px solid #c8c3b2;
    border-radius: 12px;
    overflow: hidden;
  }
  body[data-helper-page] main .directory-table tbody th,
  body[data-helper-page] main .directory-table tbody td {
    display: grid;
    grid-template-columns: minmax(6.5rem, 0.7fr) minmax(0, 1.3fr);
    gap: 10px;
    width: 100%;
    padding: 12px 14px;
    text-align: left;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  body[data-helper-page] main .directory-table tbody th::before,
  body[data-helper-page] main .directory-table tbody td::before {
    color: #59604c;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }
  body[data-helper-page] main .directory-table tbody th::before { content: "What to review"; }
  body[data-helper-page] main .directory-table tbody td:nth-of-type(1)::before { content: "Questions to ask"; }
  body[data-helper-page] main .directory-table tbody td:nth-of-type(2)::before { content: "Why it helps"; }
}

/* Page-owned directory composition. */
.directory-hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(18rem, .9fr); align-items: center; gap: clamp(2rem, 6vw, 6rem); padding: clamp(3rem, 8vw, 7rem) max(6vw, calc((100vw - 1200px) / 2)); background: #252a24; color: #f4f1db; }
.directory-hero-copy { max-width: 42rem; }
.directory-kicker { margin: 0 0 1rem; color: #78835d; font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.directory-lede { max-width: 42rem; font-size: clamp(1.1rem, 1.7vw, 1.35rem); line-height: 1.65; }
.directory-button { display: inline-flex; align-items: center; gap: .65rem; margin-top: 1rem; padding: .9rem 1.2rem; border-radius: 999px; background-color: #c6df68; color: #20241d; font-weight: 700; text-decoration: none; }
.directory-hero-art { position: relative; display: grid; min-height: 22rem; place-items: center; overflow: hidden; border: 1px solid #78835d; border-radius: 48% 48% 42% 42%; background: radial-gradient(circle at 50% 42%, #68744b, #343b2f 67%); }
.directory-art-label { z-index: 1; color: #f4f1db; font-size: clamp(1.5rem, 3vw, 2.7rem); font-weight: 800; letter-spacing: .08em; line-height: 1.1; text-align: center; }
.directory-art-orbit { position: absolute; width: 75%; aspect-ratio: 1; border: 1px solid #c6df68; border-radius: 50%; }
.directory-art-caption { position: absolute; bottom: 1.5rem; color: #f4f1db; font-size: .9rem; }
.directory-browse, .directory-compare, .directory-access, .directory-checklist { padding: clamp(3.5rem, 7vw, 6rem) max(6vw, calc((100vw - 1200px) / 2)); background: #f1eddf; color: #252a24; }
.directory-section-heading { max-width: 48rem; margin-bottom: 2rem; }
.directory-filters { display: flex; flex-wrap: wrap; gap: .7rem; }
.directory-result-count { color: #59604c; }
.directory-theme-card { position: relative; padding: 1.5rem; border: 1px solid #d4cfbd; border-radius: 1rem; background: #faf8f0; }
.directory-card-index { color: #78835d; font-size: .8rem; font-weight: 800; }
.directory-card-note { display: inline-block; margin-top: .8rem; color: #59604c; font-size: .85rem; font-weight: 700; }
.directory-empty { padding: 1rem; border-left: 3px solid #78835d; }
.directory-compare { background: #e6e2d3; }
.directory-method { display: grid; grid-template-columns: minmax(15rem, .8fr) minmax(0, 1.2fr); align-items: center; gap: clamp(2rem, 7vw, 6rem); padding: clamp(3.5rem, 7vw, 6rem) max(6vw, calc((100vw - 1200px) / 2)); background: #dfe5c7; color: #252a24; }
.directory-method-panel { display: flex; align-items: center; justify-content: center; gap: 1rem; min-height: 14rem; padding: 2rem; border-radius: 1.5rem; background: #252a24; color: #f4f1db; font-size: 1.1rem; font-weight: 700; }
.directory-method-copy { max-width: 40rem; }
.directory-check-list { display: grid; gap: .7rem; padding-left: 1.25rem; line-height: 1.6; }
.directory-access { background: #252a24; color: #f4f1db; }
.directory-feature { padding: 1.4rem; border-top: 1px solid #78835d; }
.directory-feature-mark { color: #c6df68; font-size: .8rem; font-weight: 800; }
.directory-wide-note { display: flex; align-items: baseline; gap: 1rem; margin-top: 2rem; padding: 1rem 1.25rem; border-radius: .8rem; background: #343b2f; }
.directory-local { display: grid; grid-template-columns: minmax(0, 1fr) minmax(16rem, .8fr); align-items: center; gap: 3rem; padding: clamp(3.5rem, 7vw, 6rem) max(6vw, calc((100vw - 1200px) / 2)); background: #dfe5c7; color: #252a24; }
.directory-local-copy { max-width: 42rem; }
.directory-text-link { display: inline-flex; gap: .5rem; margin-top: .7rem; color: #39432a; font-weight: 700; }
.directory-local-panel { position: relative; display: grid; min-height: 16rem; place-items: center; overflow: hidden; border-radius: 50%; background: #78835d; }
.directory-local-sun { width: 8rem; aspect-ratio: 1; border-radius: 50%; background: #c6df68; }
.directory-local-word { position: absolute; color: #252a24; font-size: 3rem; font-weight: 800; line-height: 1; text-align: center; }
.directory-local-word small { font-size: .58rem; letter-spacing: .1em; }
.directory-checklist { background: #f1eddf; }
.directory-checklist-layout { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(16rem, .7fr); gap: 2rem; }
.directory-steps { display: grid; gap: 1rem; margin: 0; padding: 0; list-style: none; }
.directory-note { padding: 1.5rem; border-radius: 1rem; background: #e3e7d3; }
.directory-note-label { color: #59604c; font-size: .78rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.directory-button-dark { background-color: #252a24; color: #f4f1db; }
@media (max-width: 600px) {
  .directory-hero, .directory-method, .directory-local, .directory-checklist-layout { grid-template-columns: minmax(0, 1fr); }
  .directory-hero { padding: 3rem 1.25rem; }
  .directory-browse, .directory-compare, .directory-access, .directory-checklist, .directory-method, .directory-local { padding: 3rem 1.25rem; }
  .directory-hero-art { min-height: 16rem; }
  .directory-method-panel { min-height: 10rem; }
}