/* The homepage example is a usable slice of the atlas. */
.ex-wrap--home { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 38px 48px; align-items: center; }
.ex-wrap--home > .ex-hero { display: block; margin: 0; }
.ex-wrap--home > .ex-layout, .ex-wrap--home > .ex-load-note { grid-column: 1 / -1; }
.ex-feature { min-width: 0; padding: 0 0 0 30px; border-left: 1px solid var(--ex-line); }
.ex-feature > .ex-eyebrow { margin-bottom: 10px; letter-spacing: .07em; }
.ex-feature__picker { display: flex; align-items: center; gap: 20px; margin-bottom: 18px; border-bottom: 1px solid var(--ex-line); }
.explorer .ex-feature__picker button { padding: 7px 0 10px; min-height: 42px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--ex-quiet); font-size: 12px; }
.explorer .ex-feature__picker button[aria-pressed="true"] { color: var(--accent-bright); border-bottom-color: var(--accent-bright); }
.explorer .ex-feature__story h3 { margin: 0 0 9px; font-size: 23px; line-height: 1.3; letter-spacing: -.025em; }
.ex-feature__story > p { margin: 0; color: var(--ex-quiet); font-size: 13px; line-height: 1.65; }
.ex-feature__map { position: relative; height: 210px; margin: 3px 0 8px; }
.ex-feature__map > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ex-feature__thread { fill: none; stroke: var(--accent-bright); stroke-width: 1.3; opacity: .65; vector-effect: non-scaling-stroke; }
.ex-feature__stops { list-style: none; margin: 0; padding: 0; }
.ex-feature__stop { position: absolute; width: 42%; transform: translateX(-50%); }
.ex-feature__stop--0 { left: 20%; top: 16.84%; }
.ex-feature__stop--1 { left: 80%; top: 16.84%; }
.ex-feature__stop--2 { left: 20%; top: 69.47%; }
.ex-feature__stop--3 { left: 80%; top: 69.47%; }
.ex-feature__stop a { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: start; gap: 5px; min-height: 54px; color: var(--text-primary); text-decoration: none; text-align: center; font-size: 12px; line-height: 1.35; transform: translateY(-12px); }
.ex-feature__stop a > span:not(.ex-feature__dot) { padding: 2px 4px; background: var(--bg); }
.ex-feature__stop a:hover { color: var(--accent-bright); }
.ex-feature__dot { display: grid; place-items: center; width: 24px; height: 24px; border: 1px solid var(--accent-bright); border-radius: 50%; background: var(--bg); color: var(--accent-bright); font-size: 10px; }
.ex-feature__stop--0 .ex-feature__dot { box-shadow: 0 0 0 4px var(--ex-gold-wash); }
.ex-feature__stop small { color: var(--atlas-core); font-size: 9px; }
.ex-feature__branches { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; padding: 15px 0; border-top: 1px solid var(--ex-line); border-bottom: 1px solid var(--ex-line); }
.ex-feature__branch { display: flex; align-items: center; gap: 9px; min-width: 0; color: var(--text-primary); text-decoration: none; min-height: 44px; }
.ex-feature__branch > span:nth-child(2) { flex: 1; min-width: 0; }
.ex-feature__branch-icon { color: var(--atlas-accent-violet); font-size: 20px; }
.ex-feature__branch--depth .ex-feature__branch-icon { color: var(--atlas-core); }
.ex-feature__branch small { display: block; margin-bottom: 5px; font-size: 10px; line-height: 1.4; color: var(--ex-quiet); }
.ex-feature__branch strong { display: block; font-size: 12px; font-weight: 500; line-height: 1.5; }
.ex-feature__branch > svg { display: none; flex-shrink: 0; color: var(--ex-quiet); }
.ex-feature__branch:hover strong { color: var(--accent-bright); }
.explorer .ex-feature__open { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 13px 0 0; border: 0; background: transparent; color: var(--accent-bright); font-size: 12px; text-align: left; }
.ex-feature__open svg { flex-shrink: 0; }
@media (max-width: 1100px) {
  .ex-wrap--home { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 32px; }
  .ex-feature { padding-left: 24px; }
  .ex-feature__branches { grid-template-columns: 1fr; gap: 12px; }
  .ex-feature__branch > svg { display: block; }
}
@media (max-width: 780px) {
  .ex-wrap--home { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .ex-wrap--home > .ex-hero { order: 0; margin-bottom: 24px; }
  .ex-wrap--home > .ex-load-note { order: 1; }
  .ex-wrap--home .ex-layout, .ex-wrap--home .ex-content { display: contents; }
  .ex-wrap--home .ex-sidebar { order: 2; margin: 0 0 16px; }
  .ex-wrap--home .ex-search-area { order: 3; margin-bottom: 28px; }
  .ex-feature { order: 4; border-left: 0; border-top: 1px solid var(--ex-line); padding: 24px 0 26px; margin-bottom: 24px; border-bottom: 1px solid var(--ex-line); }
  .ex-wrap--home #exploreResults { order: 5; }
  .ex-wrap--home.is-searching .ex-feature { display: none; }
  .ex-feature__branches { grid-template-columns: 1fr 1fr; }
  .ex-feature__branch > svg { display: none; }
  .ex-feature__map { height: 215px; }
}
@media (max-width: 380px) {
  .explorer .ex-feature__story h3 { font-size: 21px; }
  .ex-feature__branches { grid-template-columns: 1fr; }
  .ex-feature__branch > svg { display: block; }
  .ex-feature__picker { gap: 17px; }
}
@media (prefers-reduced-motion: no-preference) {
  .ex-feature__picker button, .ex-feature__stop a { transition: color 160ms ease-out; }
}