/* ATLAS PROTOTYPE COPY of dist/css/home-globe.css. Layout rules unchanged; the "Atlas book skin" block at the end restyles it on paper. */
/* Homepage: Mind / Body / Life menu on the left, the original globe on the right. */

.home-explore {
  display: grid;
  grid-template-columns: minmax(260px, 360px) minmax(0, 1fr);
  gap: 24px;
  /* The hero's text column is narrow; let this row use the page width. */
  width: min(1300px, 94vw);
  max-width: none;
  margin: 1.25rem 0 0.75rem;
  text-align: left;
  align-items: start;
}

/* Menu: the cards' own badges and chips, as dropdowns */
.mbl-menu { display: flex; flex-direction: column; gap: 10px; }
.mbl-group.smart-category { border-radius: 14px; opacity: 1; transform: none; }
.mbl-head {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0.85rem 1rem;
  background: none;
  border: 0;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.mbl-head .smart-badge { margin: 0; flex-shrink: 0; }
/* Icon in the area's own gradient circle, then the name and what it covers */
.mbl-icon.smart-badge {
  width: 52px;
  height: 52px;
  padding: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  letter-spacing: 0;
}
.mbl-icon svg { width: 28px; height: 28px; }
.mbl-text { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mbl-name { font-family: var(--font-serif); font-size: 1.45rem; font-weight: 600; line-height: 1.05; letter-spacing: 0.01em; }
.mbl-title { font-family: var(--font-sans); font-size: 0.85rem; font-weight: 400; opacity: 0.75; line-height: 1.3; }
.mbl-chev { transition: transform 0.25s ease; }
.mbl-group.is-open .mbl-chev { transform: rotate(180deg); }
.mbl-chips {
  display: none;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.35rem;
  padding: 0 1rem 1rem;
}
.mbl-group.is-open .mbl-chips { display: grid; }
.mbl-opt {
  display: block;
  padding: 0.5rem 0.65rem;
  border-radius: 8px;
  background: rgba(255,250,240,.55);
  border: 1px solid var(--ink-faint);
  color: var(--ink);
  font-size: 0.82rem;
  line-height: 1.25;
  text-decoration: none;
}
.mbl-opt:hover { background: rgba(255,250,240,.55); }
.mbl-opt.is-on { background: rgba(255,250,240,.55); border-color: var(--ink-faint); }

/* The original globe panel, placed in the page instead of over it */
.globe-slot { position: relative; height: min(70vh, 640px); min-height: 420px; }
#globe-slot .eg-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: transparent;
  opacity: 1;
  pointer-events: auto;
}
#globe-slot .eg-modal { transform: none; padding: 0.5rem 0 2.5rem; max-width: none; }
#globe-slot .eg-close,
#globe-slot .eg-back,
#globe-slot .eg-bar-right { display: none; }

@media (max-width: 860px) {
  /* The page fades the hero while scrolling; on phones the ball sits lower, so keep it visible. */
  .hero-content { opacity: 1 !important; }

  .home-explore { display: block; width: 100vw; margin: 1rem 0 0.5rem; }

  /* Mind | Body | Life as three tabs, the open one's specialties in one swipeable row */
  .mbl-menu { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; padding: 0 12px; }
  .mbl-group.smart-category { display: contents; }
  .mbl-head { grid-row: 1; flex-direction: column; justify-content: center; gap: 6px; padding: 4px 0; min-height: 48px; opacity: 0.6; transition: opacity 0.2s ease; }
  .mbl-group.is-open .mbl-head { opacity: 1; }
  .mbl-icon.smart-badge { width: 48px; height: 48px; transition: transform 0.2s ease; }
  .mbl-group.is-open .mbl-icon.smart-badge { transform: scale(1.08); }
  .mbl-icon svg { width: 26px; height: 26px; }
  .mbl-text { align-items: center; flex: none; }
  .mbl-name { font-size: 1.1rem; }
  .mbl-title, .mbl-chev { display: none; }
  .mbl-chips {
    grid-row: 2;
    grid-column: 1 / -1;
    margin: 4px -16px 0;
    padding: 6px 16px 10px;
    gap: 8px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 28px), transparent 100%);
  }
  .mbl-chips::-webkit-scrollbar { display: none; }
  .mbl-group.is-open .mbl-chips { display: flex; }
  .mbl-opt { flex: none; white-space: nowrap; scroll-snap-align: start; padding: 0.6rem 0.9rem; border-radius: 999px; font-size: 0.9rem; min-height: 40px; display: inline-flex; align-items: center; }

  .globe-slot { height: clamp(520px, calc(100svh - 170px), 640px); margin-top: 4px; }
  #globe-slot .eg-modal { padding: 0 12px 2.5rem; }
}

/* Desktop: one focal point. The ball is the hero; the menu is a slim rail of the
   same height; both share one top line. Phones keep their own layout above. */
@media (min-width: 861px) {
  .home-explore {
    /* Rail | ball | matching empty column: the ball sits on the page's center line, under the headline */
    grid-template-columns: minmax(220px, 260px) minmax(0, 1fr) minmax(220px, 260px);
    gap: 32px;
    grid-template-rows: minmax(0, 1fr);
    align-items: stretch;
    height: clamp(560px, calc(100vh - 230px), 720px);
    margin-top: 0.75rem;
  }

  /* Rail: same height as the ball; the open list scrolls inside it */
  .mbl-menu { height: 100%; min-height: 0; overflow: hidden; gap: 8px; }
  .mbl-group.smart-category:not(.is-open) { flex: none; }
  .mbl-group.smart-category {
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: rgba(70,52,20,0.09);
    border: 0;
    border-top: 2px solid;
    box-shadow: none;
  }
  .mbl-group.smart-category.mind { border-top-color: var(--ink-line); }
  .mbl-group.smart-category.body { border-top-color: rgba(52, 211, 153, 0.7); }
  .mbl-group.smart-category.life { border-top-color: rgba(251, 191, 36, 0.7); }
  .mbl-group.smart-category.spirit { border-top-color: var(--ink-faint); }
  .mbl-group.is-open { flex: 0 1 auto; }
  .mbl-head { padding: 0.75rem 0.9rem; }
  .mbl-icon.smart-badge { width: 42px; height: 42px; }
  .mbl-icon svg { width: 22px; height: 22px; }
  .mbl-name { font-size: 1.25rem; }
  .mbl-title { font-size: 0.78rem; }
  .mbl-group.is-open .mbl-chips {
    display: flex;
    flex-direction: column;
    gap: 0;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 0 0.5rem 0.75rem;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
  }
  .mbl-opt {
    background: none;
    border: 0;
    border-left: 2px solid transparent;
    border-radius: 0;
    padding: 0.42rem 0.75rem;
    font-size: 0.86rem;
    color: var(--ink);
  }
  .mbl-opt:hover { color: var(--ink); background: rgba(255,250,240,.55); }
  .mbl-opt.is-on { color: var(--paper); }
  .mind .mbl-opt.is-on { border-left-color: var(--ink-line); background: var(--paper-card); }
  .body .mbl-opt.is-on { border-left-color: #34d399; background: rgba(52, 211, 153, 0.14); }
  .life .mbl-opt.is-on { border-left-color: #fbbf24; background: rgba(251, 191, 36, 0.14); }
  .spirit .mbl-opt.is-on { border-left-color: var(--ink-faint); background: rgba(251, 113, 133, 0.14); }

  /* Ball: fills its column, title centered above, quiet pool behind it */
  .globe-slot { grid-column: 2; height: 100%; min-height: 0; overflow: visible; }
  #globe-slot .eg-modal { height: 100%; padding: 0 0 0.25rem; }
  #globe-slot .eg-bar { order: 1; justify-content: center; text-align: center; border-bottom: 0; padding-bottom: 0; }
  #globe-slot .eg-bar-left { align-items: center; }
  #globe-slot .eg-title { font-size: clamp(1.9rem, 2.6vw, 2.5rem); }
  #globe-slot .eg-search-link-below {
    order: 2;
    margin: 0.35rem auto 0;
    padding: 0;
    background: none;
    border: 0;
    color: var(--ink);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
  }
  #globe-slot .eg-stage { order: 3; flex: 1; height: auto; max-height: none; min-height: 0; margin-top: 0.25rem; background: none; }
  #globe-slot .eg-legend { order: 4; padding: 0.25rem 0 0; }
  #globe-slot .eg-hint { order: 5; font-size:.75rem; opacity: 0.5; margin-top: 0.3rem; }
}

/* Phones: ball on the first screen, centered topic header, key under the ball,
   smaller labels, no hint. */
@media (max-width: 860px) {
  .hero-content h1 { margin-bottom: 10px !important; }
  .hero-tagline { margin-top: 4px !important; margin-bottom: 6px !important; }
  .home-explore { margin-top: 10px; }
  .mbl-icon.smart-badge { width: 44px; height: 44px; }
  .mbl-icon svg { width: 24px; height: 24px; }
  .mbl-head { gap: 4px; }

  :root { --eg-label-base: 10px; }
  .globe-slot { height: clamp(500px, calc(100svh - 230px), 600px); }
  #globe-slot .eg-modal { padding: 0 8px 0.75rem; }
  #globe-slot .eg-bar { order: 1; justify-content: center; text-align: center; border-bottom: 0; padding-bottom: 0; }
  #globe-slot .eg-bar-left { align-items: center; }
  #globe-slot .eg-eyebrow { font-size:.75rem; }
  #globe-slot .eg-title { font-size: 1.7rem; }
  #globe-slot .eg-blurb { margin-top: 0; font-size:1rem; }
  #globe-slot .eg-search-link-below {
    order: 2;
    margin: 0.25rem auto 0;
    padding: 0.25rem 0;
    background: none;
    border: 0;
    color: var(--ink);
    font-size: 0.9rem;
    text-decoration: underline;
    text-underline-offset: 3px;
  }
  #globe-slot .eg-stage { order: 3; flex: 1; height: auto; max-height: none; min-height: 0; margin-top: 0; background: none; }
  #globe-slot .eg-legend { order: 4; gap: 0.9rem; padding: 0.35rem 0 0; }
  #globe-slot .eg-hint { display: none; }
}

/* One "See all results" pill under the ball (replaces the separate All Providers pill). */
#globe-slot .eg-search-link-below {
  order: 5;
  display: inline-flex;
  align-items: center;
  align-self: center;
  margin: 0.7rem auto 0;
  padding: 0.7rem 1.7rem;
  border-radius: 999px;
  background: rgba(255,250,240,.55);
  border: 1px solid var(--ink-faint);
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: 1.05rem;
  font-weight: 500;
  text-decoration: none;
}
#globe-slot .eg-search-link-below:hover { background: rgba(255,250,240,.55); color: var(--ink); }
#globe-slot .eg-legend { order: 4; }
#globe-slot .eg-hint { order: 6; }

/* Designer icon mark: glass disc, fine gradient ring in the area's color, soft glow. */
.mbl-group { --c1: var(--ink); --c2: var(--ink); }
.mbl-group.body { --c1: #34d399; --c2: var(--ink-soft); }
.mbl-group.life { --c1: #fbbf24; --c2: var(--ink-soft); }
.mbl-group.spirit { --c1: var(--ink-soft); --c2: var(--ink-soft); }
.mbl-head .mbl-icon.smart-badge {
  position: relative;
  width: 54px;
  height: 54px;
  background: radial-gradient(circle at 32% 28%, rgba(255,250,240,.55), rgba(255,250,240,.55) 62%), var(--ink);
  box-shadow: 0 0 26px -8px var(--c1), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  color: var(--paper);
}
.mbl-head .mbl-icon.smart-badge::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  padding: 1.5px;
  background: linear-gradient(140deg, var(--c2), var(--c1) 55%, rgba(255,250,240,.55));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.mbl-head .mbl-icon svg { width: 32px; height: 32px; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--c1) 55%, transparent)); }
.mbl-group.is-open .mbl-head .mbl-icon.smart-badge { box-shadow: 0 0 34px -6px var(--c1), inset 0 1px 0 rgba(255, 255, 255, 0.16); }

/* How it works: three steps, so it reads as a search */
.how-steps {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 28px;
  margin: 0.5rem auto 0.25rem;
  padding: 0 1rem;
  font-family: var(--font-sans);
  font-size: 0.95rem;
  color: var(--ink);
}
.how-steps li { display: inline-flex; align-items: center; gap: 10px; }
.how-num {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid var(--ink-faint);
  font-size: 0.8rem;
  font-weight: 600;
}

/* The instruction on the ball itself */
#globe-slot .eg-hint.gl-cta {
  order: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: center;
  margin: 0.55rem auto 0;
  padding: 0.45rem 1rem;
  border-radius: 999px;
  background: rgba(255,250,240,.55);
  border: 1px solid var(--ink-faint);
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  opacity: 1;
  animation: gl-cta-pulse 2.6s ease-in-out infinite;
}
#globe-slot .eg-hint.gl-cta svg { width: 18px; height: 18px; }
@keyframes gl-cta-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,250,240,0); }
  50% { box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.08); }
}

/* Color key = the approach buttons (Traditional / Alternative / Progressive) */
#globe-slot a.eg-legend-item {
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  border: 1px solid var(--ink-faint);
  background: rgba(70,52,20,0.16);
  color: var(--ink);
  text-decoration: none;
  font-weight: 500;
}
#globe-slot a.eg-legend-item:hover { background: rgba(255,250,240,.55); }

@media (max-width: 860px) {
  .how-steps { flex-direction: column; align-items: flex-start; width: fit-content; margin: 0.25rem auto 0.5rem; gap: 6px; font-size: 0.9rem; }
  .mbl-head .mbl-icon.smart-badge { width: 52px; height: 52px; }
  .mbl-head .mbl-icon svg { width: 30px; height: 30px; }
  #globe-slot .eg-hint.gl-cta { display: inline-flex; font-size: 0.85rem; }
}
@media (prefers-reduced-motion: reduce) {
  #globe-slot .eg-hint.gl-cta { animation: none; }
}

/* The line under the headline (was styled inline before; now wraps on phones) */
.hero-content .hero-sub {
  display: block;
  max-width: 40em;
  margin: 0.75rem auto 0.25rem;
  font-family: var(--font-sans);
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  line-height: 1.55;
  color: var(--ink);
  text-align: center;
}

/* Approach buttons: big, clear pills in each approach's own color */
#globe-slot .eg-legend { gap: 0.75rem; padding-top: 0.6rem; }
#globe-slot a.eg-legend-item {
  --ac: var(--ink);
  gap: 0.6rem;
  padding: 0.7rem 1.35rem;
  min-height: 46px;
  border-radius: 999px;
  border: 1.5px solid color-mix(in srgb, var(--ac) 70%, transparent);
  background: color-mix(in srgb, var(--ac) 16%, var(--paper-light));
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  box-shadow: 0 0 22px -10px var(--ac);
  transition: background 0.2s ease, transform 0.2s ease;
}
#globe-slot a.eg-legend-item[data-a='alternative'] { --ac: var(--ink-soft); }
#globe-slot a.eg-legend-item[data-a='progressive'] { --ac: #fb923c; }
#globe-slot a.eg-legend-item:hover { background: color-mix(in srgb, var(--ac) 30%, var(--paper-light)); transform: translateY(-1px); }
#globe-slot a.eg-legend-item .eg-legend-dot { width: 11px; height: 11px; }
@media (max-width: 860px) {
  #globe-slot .eg-legend { gap: 0.5rem; }
  #globe-slot a.eg-legend-item { padding: 0.6rem 0.95rem; font-size: 0.92rem; min-height: 44px; }
}

/* The page fades the hero while scrolling; the menu and ball live in the hero, so keep it fully visible. */
.hero-content { opacity: 1 !important; }

/* No instruction text on the ball; the first-visit demo shows what to do. */
#globe-slot .eg-hint, #globe-slot .eg-hint.gl-cta { display: none !important; }

/* Demo 1: the three areas light up in turn (long and obvious), then all together */
.mbl-menu.mbl-intro .mbl-group,
.mbl-menu.mbl-intro-all .mbl-group { position: relative; z-index: 2; }
.mbl-menu.mbl-intro .mbl-group { animation: mbl-start 1.5s ease-in-out both; }
.mbl-menu.mbl-intro .mbl-group.body { animation-delay: 0.75s; }
.mbl-menu.mbl-intro .mbl-group.spirit { animation-delay: 1.5s; }
.mbl-menu.mbl-intro .mbl-group.life { animation-delay: 2.25s; }
.mbl-menu.mbl-intro-all .mbl-group { animation: mbl-start 1.1s ease-in-out both; }
@keyframes mbl-start {
  0%, 100% { box-shadow: none; transform: scale(1); }
  40%, 60% {
    box-shadow: 0 0 0 3px var(--c1), 0 0 60px 4px color-mix(in srgb, var(--c1) 70%, transparent);
    transform: scale(1.04);
    background-color: color-mix(in srgb, var(--c1) 22%, rgba(70,52,20,0.14));
  }
}
.mbl-menu.mbl-intro .mbl-group .mbl-icon.smart-badge,
.mbl-menu.mbl-intro-all .mbl-group .mbl-icon.smart-badge { animation: mbl-icon-pop 1.5s ease-in-out both; }
.mbl-menu.mbl-intro .mbl-group.body .mbl-icon.smart-badge { animation-delay: 0.75s; }
.mbl-menu.mbl-intro .mbl-group.spirit .mbl-icon.smart-badge { animation-delay: 1.5s; }
.mbl-menu.mbl-intro .mbl-group.life .mbl-icon.smart-badge { animation-delay: 2.25s; }
@keyframes mbl-icon-pop {
  0%, 100% { transform: scale(1); }
  40%, 60% { transform: scale(1.22); box-shadow: 0 0 40px 2px var(--c1); }
}

/* Demo 2 and 3: the hand */
.gl-hand {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 5;
  width: 46px;
  height: 46px;
  pointer-events: none;
  opacity: 0;
  transform-origin: 35% 10%;
  filter: drop-shadow(0 6px 14px rgba(70,52,20,0.45));
}
.gl-hand svg { width: 100%; height: 100%; fill: var(--ink); }
.gl-ripple {
  position: absolute;
  left: 9px;
  top: -6px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--ink-line);
  opacity: 0;
}
.gl-hand.gl-tap .gl-ripple { animation: gl-ripple 0.7s ease-out; }
@keyframes gl-ripple { from { transform: scale(0.4); opacity: 1; } to { transform: scale(2.4); opacity: 0; } }
#globe-slot .gl-demo-pick { box-shadow: 0 0 0 2px #fff, 0 0 24px rgba(255, 255, 255, 0.55) !important; transform: scale(1.08); transition: transform 0.2s ease, box-shadow 0.2s ease; }

/* Soft, even shade centered on the ball itself (replaces the off-center dark pool). */
#globe-slot .eg-stage::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  height: min(100%, 620px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(circle, var(--paper-light) 0%, rgba(70,52,20,0.14) 38%, rgba(70,52,20,0.05) 58%, rgba(255,250,240,0) 70%);
}
#globe-slot .eg-canvas { z-index: 1; }

/* The hand flashes as it appears: two bright pulses and a glowing ring. */
.gl-halo {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 64px;
  height: 64px;
  margin: -32px 0 0 -32px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--paper-card) 0%, rgba(255,250,240,.55) 45%, rgba(255,250,240,0) 70%);
  border: 2px solid var(--ink-line);
  opacity: 0;
  pointer-events: none;
}
.gl-hand.gl-hand-in svg { animation: gl-hand-flash 0.5s ease-in-out 2; }
.gl-hand.gl-hand-in .gl-halo { animation: gl-halo-pulse 0.5s ease-out 2; }
@keyframes gl-hand-flash {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(255,250,240,0)); }
  50% { filter: drop-shadow(0 0 14px rgba(255, 255, 255, 1)) drop-shadow(0 0 28px rgba(70,52,20,0.45)); }
}
@keyframes gl-halo-pulse {
  0% { transform: scale(0.5); opacity: 0.95; }
  100% { transform: scale(1.7); opacity: 0; }
}

/* The demo hand travels across the menu and the ball */
.home-explore { position: relative; }

/* =====================================================================
   Atlas book skin (prototype): the same layout, drawn on paper.
   ===================================================================== */
.atlas-hero .home-explore { margin-top: 16px; }
.mbl-group { --c: var(--mind); --c1: var(--mind); --c2: var(--ink); }
.mbl-group.body { --c: var(--body); --c1: var(--body); --c2: #62a07b; }
.mbl-group.spirit { --c: var(--spirit); --c1: var(--spirit); --c2: var(--ink-soft); }
.mbl-group.life { --c: var(--life); --c1: var(--life); --c2: var(--ink-soft); }

/* area cards: paper slips with a brush stroke of the area color on top */
.mbl-group.smart-category,
.mbl-group.smart-category.mind, .mbl-group.smart-category.body,
.mbl-group.smart-category.spirit, .mbl-group.smart-category.life {
  position: relative;
  background: rgba(255, 252, 242, 0.78);
  border: 0;
  border-radius: 6px 9px 7px 8px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset, 0 6px 16px -12px rgba(70,52,20,0.45);
}
.mbl-group.smart-category::before {
  content: "";
  position: absolute;
  left: 6px; right: 10px; top: -3px;
  height: 8px;
  background: var(--c);
  -webkit-mask: url("/assets/atlas/brush-stroke.svg") center / 100% 100% no-repeat;
  mask: url("/assets/atlas/brush-stroke.svg") center / 100% 100% no-repeat;
  opacity: 0.9;
  pointer-events: none;
}
.mbl-group.smart-category::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1.2px solid rgba(44, 68, 41, 0.32);
  border-radius: inherit;
  filter: url(#ink-wobble);
  pointer-events: none;
}
.mbl-head { color: var(--ink); }
.mbl-name { font-family: var(--font-fell); font-weight: 400; color: var(--ink); }
.mbl-title { font-family: var(--font-sans); font-size: 0.9375rem; opacity: 1; color: var(--ink-soft); }
.mbl-chev { color: var(--ink-soft); }

/* the area icon = its watercolor painting, no disc, no glow */
.mbl-head .mbl-icon.smart-badge,
.mbl-group.is-open .mbl-head .mbl-icon.smart-badge {
  width: 62px;
  height: 50px;
  border-radius: 0;
  background: url("/assets/atlas/area-mind-watercolor.png") center / contain no-repeat;
  box-shadow: none;
}
.mbl-group.body .mbl-head .mbl-icon.smart-badge { background-image: url("/assets/atlas/area-body-watercolor.png"); }
.mbl-group.spirit .mbl-head .mbl-icon.smart-badge { background-image: url("/assets/atlas/area-spirit-watercolor.png"); }
.mbl-group.life .mbl-head .mbl-icon.smart-badge { background-image: url("/assets/atlas/area-life-watercolor.png"); }
.mbl-head .mbl-icon.smart-badge::before { display: none; }
.mbl-head .mbl-icon svg { display: none; }

/* the topics: ink on paper, a hand-drawn rule in the area color when picked */
.mbl-opt,
.mbl-group .mbl-opt {
  color: var(--ink);
  background: none;
  border: 0;
  font-size: 1.0625rem;
}
.mbl-opt:hover { background: rgba(234, 220, 184, 0.55); color: var(--ink); }
.mbl-opt.is-on,
.mind .mbl-opt.is-on, .body .mbl-opt.is-on, .spirit .mbl-opt.is-on, .life .mbl-opt.is-on {
  color: var(--ink);
  font-weight: 600;
  background: color-mix(in srgb, var(--c) 13%, transparent);
  border-left: 3px solid var(--c);
}

@media (min-width: 861px) {
  .atlas-hero .home-explore {
    height: clamp(540px, calc(100vh - 330px), 700px);
    width: min(1320px, 96vw);
    margin-top: 16px;
  }
  .mbl-menu { overflow: visible; gap: 12px; }
  .mbl-group.smart-category { overflow: visible; }
  .mbl-head { padding: 0.8rem 0.9rem 0.7rem; }
  .mbl-name { font-size: 1.5rem; }
  .mbl-group.is-open .mbl-chips {
    gap: 1px;
    padding: 0 0.5rem 0.75rem;
    scrollbar-color: rgba(44, 68, 41, 0.35) transparent;
  }
  .mbl-opt, .mbl-group .mbl-opt { color: var(--ink); font-size: 1.0625rem; padding: 0.4rem 0.7rem; border-left: 3px solid transparent; border-radius: 0 4px 4px 0; }
  .mbl-opt:hover { color: var(--ink); background: rgba(234, 220, 184, 0.6); }
}

/* the ball's frame: title above, inked buttons below */
#globe-slot .eg-eyebrow { color: var(--ink-soft); font-size: 0.875rem; letter-spacing: 0.2em; }
#globe-slot .eg-title { font-family: var(--font-fell); font-weight: 400; color: var(--ink); }
#globe-slot .eg-blurb { color: var(--ink-soft); }
#globe-slot .eg-search-link-below,
#globe-slot .eg-search-link-below:hover {
  background: var(--paper-light);
  border: 1.5px solid var(--ink);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  font-weight: 600;
  text-decoration: none;
  padding: 0.65rem 1.5rem;
}
#globe-slot .eg-search-link-below:hover { background: var(--ink); color: var(--paper); }
#globe-slot a.eg-legend-item,
#globe-slot a.eg-legend-item[data-a='alternative'],
#globe-slot a.eg-legend-item[data-a='progressive'] {
  --ac: var(--ink);
  background: rgba(255, 250, 240, 0.85);
  border: 1.5px solid rgba(44, 68, 41, 0.55);
  color: var(--ink);
  box-shadow: 0 4px 10px -8px rgba(70,52,20,0.45);
  font-size: 1.0625rem;
}
#globe-slot a.eg-legend-item[data-a='alternative'] { --ac: #94507a; }
#globe-slot a.eg-legend-item[data-a='progressive'] { --ac: #b0602a; }
#globe-slot a.eg-legend-item:hover { background: #fffdf6; border-color: var(--ink); }
#globe-slot .eg-legend-item .eg-legend-dot { background: var(--ac) !important; }

/* behind the ball: a large inked compass rose, and the artifact's shadow on the page */
#globe-slot .eg-stage::before {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  height: min(118%, 700px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.2;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><g fill='none' stroke='%232c4429' stroke-width='.45'><circle cx='100' cy='100' r='96'/><circle cx='100' cy='100' r='92.5'/><circle cx='100' cy='100' r='70' stroke-dasharray='1 2.2'/></g><g stroke='%232c4429' stroke-width='.35'><path d='M100 2v14M100 184v14M2 100h14M184 100h14M31 31l9 9M169 31l-9 9M31 169l9-9M169 169l-9-9'/></g><g fill='%232c4429' fill-opacity='.18' stroke='%232c4429' stroke-width='.4'><path d='M100 6 L106 94 L100 100 L94 94Z'/><path d='M194 100 L106 106 L100 100 L106 94Z'/><path d='M100 194 L94 106 L100 100 L106 106Z'/><path d='M6 100 L94 94 L100 100 L94 106Z'/></g></svg>") center / contain no-repeat;
  filter: url(#ink-wobble);
}
#globe-slot .eg-stage::after {
  content: "";
  position: absolute;
  left: 50%; bottom: 3%;
  width: min(46%, 340px);
  height: 26px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(80, 60, 25, 0.28), rgba(255,250,240,0));
  pointer-events: none;
  z-index: 0;
}

/* first-visit demo hand: an ink hand on paper */
.gl-hand { filter: drop-shadow(0 4px 8px rgba(70,52,20,0.35)); }
.gl-hand svg { fill: var(--ink); stroke: var(--paper-light); stroke-width: 8px; paint-order: stroke; }
.gl-ripple { border-color: var(--ink); }
.gl-halo { background: radial-gradient(circle, rgba(227, 203, 146, 0.6), rgba(255,250,240,0) 70%); border-color: rgba(44, 68, 41, 0.6); }
#globe-slot .gl-demo-pick { box-shadow: 0 0 0 2.5px var(--ink), 0 8px 20px -6px rgba(70,52,20,0.45) !important; }
@keyframes mbl-start {
  0%, 100% { box-shadow: none; transform: scale(1); }
  40%, 60% { box-shadow: 0 0 0 2px var(--c), 0 14px 30px -14px rgba(70,52,20,0.45); transform: scale(1.03); }
}
@keyframes mbl-icon-pop { 0%, 100% { transform: scale(1); } 40%, 60% { transform: scale(1.14) rotate(-2deg); } }
@keyframes gl-hand-flash {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(255,250,240,0)); }
  50% { filter: drop-shadow(0 0 10px rgba(70,52,20,0.45)); }
}

/* phones: area tabs show the paintings; topics as paper pills */
@media (max-width: 860px) {
  :root { --eg-label-base: 13px; }
  .atlas-hero .home-explore { width: calc(100vw - 0px); margin-left: -16px; margin-right: -16px; margin-top: 18px; }
  .mbl-group.smart-category { display: contents; }
  .mbl-group.smart-category::before, .mbl-group.smart-category::after { display: none; }
  .mbl-head { position: relative; opacity: 0.62; padding: 6px 0 8px; border-radius: 8px; }
  .mbl-group.is-open .mbl-head { opacity: 1; background: rgba(255, 252, 242, 0.75); box-shadow: inset 0 -3px 0 var(--c); }
  .mbl-head .mbl-icon.smart-badge, .mbl-group.is-open .mbl-head .mbl-icon.smart-badge { width: 54px; height: 42px; transform: none; }
  .mbl-name { font-size: 1.15rem; }
  .mbl-group .mbl-opt, .mbl-opt {
    background: rgba(255, 250, 240, 0.9);
    border: 1.2px solid rgba(44, 68, 41, 0.35);
    border-radius: 999px;
    color: var(--ink);
    font-size: 1.0625rem;
  }
  .mbl-opt.is-on, .mind .mbl-opt.is-on, .body .mbl-opt.is-on, .spirit .mbl-opt.is-on, .life .mbl-opt.is-on {
    border: 1.5px solid var(--c);
    border-left-width: 1.5px;
    background: color-mix(in srgb, var(--c) 14%, var(--paper-light));
  }
  #globe-slot .eg-search-link-below { font-size: 1.0625rem; }
  #globe-slot .eg-stage::before { height: min(100%, 420px); }
}

/* skin: hero line ink (the copied rule above made it white for the video) */
.atlas-hero .hero-content .hero-sub { color: var(--ink-soft); margin: 8px auto 14px; text-wrap: balance; }
@media (min-width: 861px) {
  .atlas-hero .home-explore {
    grid-template-columns: minmax(240px, 280px) minmax(0, 1fr) minmax(240px, 280px);
    height: clamp(620px, calc(100vh - 250px), 780px);
  }
  #globe-slot .eg-blurb { margin-top: 2px; }
}

/* =====================================================================
   Phones: one screen for the areas and the ball (the results take the same screen)
   The search line, the area tabs, their needs in one row, then the ball fills the rest. Nothing jumps:
   one tab is always open, and the search line keeps its space while the search card is on screen.
   ===================================================================== */
.eg-mini { display: none; }
@media (max-width: 860px) {
  .atlas-hero .home-explore { display: flex; flex-direction: column; align-items: stretch; overflow-x: clip; height: 100vh; height: 100svh; min-height: 520px; margin-top: 10px; }
  .atlas-hero .hero-content .home-explore { margin-top: 0; }
  .home-explore > .mbl-menu { flex: none; }
  .home-explore .globe-slot { flex: 1 1 auto; height: auto; min-height: 0; margin-top: 0; }
  .eg-mini { flex: none; display: flex; align-items: center; gap: 8px; margin: 0 16px 6px; padding: 4px 4px 4px 12px; border: 1.5px solid rgba(44, 68, 41, 0.55); border-radius: 14px; background: var(--paper-light); box-shadow: 0 6px 16px -12px rgba(70,52,20,0.45); visibility: hidden; opacity: 0; transition: opacity 0.2s ease, visibility 0s linear 0.2s; }
  .home-explore.show-mini .eg-mini { visibility: visible; opacity: 1; transition: opacity 0.2s ease; }
  .home-explore.is-results .eg-mini { display: none; }
  .eg-mini-edit { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0; border: 0; background: none; color: var(--ink); font: 500 1.0625rem var(--font-sans); text-align: left; cursor: text; }
  .eg-mini-edit svg { flex: none; width: 18px; height: 18px; color: var(--ink-soft); }
  .eg-mini-q { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .eg-mini-q.is-empty { color: var(--placeholder-hint, var(--ink-soft)); font-style: italic; }
  .eg-mini-go { flex: none; min-height: 44px; padding: 0 18px; border: 0; border-radius: 11px; background: var(--ink); color: var(--paper); font: 600 1rem var(--font-sans); cursor: pointer; }
  /* the needs of the open area (owner: "looks just like text, make it super evident"): tappable pills in the
     area's color in one swipeable row, the right edge fading to show there is more, the picked one filled */
  .mbl-chips { margin: 2px 0 0; padding: 2px 12px 6px; gap: 8px; align-items: center;
    -webkit-mask: linear-gradient(90deg, #000 calc(100% - 36px), transparent); mask: linear-gradient(90deg, #000 calc(100% - 36px), transparent); }
  .mbl-group .mbl-opt, .mbl-opt { flex: none; min-height: 44px; min-width: 44px; justify-content: center; padding: 0 16px; white-space: nowrap;
    background: color-mix(in srgb, var(--c) 14%, #fdf8ec); border: 1.5px solid color-mix(in srgb, var(--c) 70%, transparent); border-radius: 999px;
    box-shadow: 0 3px 8px -6px rgba(70,52,20,0.45); font: 500 1.0625rem var(--font-sans); color: var(--ink); }
  .mbl-opt:active { transform: scale(0.97); }
  .mbl-opt.is-on, .mind .mbl-opt.is-on, .body .mbl-opt.is-on, .spirit .mbl-opt.is-on, .life .mbl-opt.is-on { background: color-mix(in srgb, var(--c) 32%, var(--ink)); border: 2px solid var(--c); font-weight: 600; box-shadow: none; }
  /* Free & low-cost help: a slim slip under the area tabs and their needs, full width */
  .mbl-menu > .mbl-link { grid-column: 1 / -1; grid-row: 3; margin: 6px 4px 2px; padding: 2px 12px 2px 6px; min-height: 48px; gap: 8px; }
  .mbl-menu > .mbl-link::before { display: none; }
  .mbl-link .mbl-link-icon { width: 44px; height: 34px; }
  .mbl-link .mbl-text { flex: 1; align-items: flex-start; }
  .mbl-link .mbl-name { font-size: 1.15rem; }
  .mbl-link .mbl-title { display: none; }
  .mbl-link .mbl-chev { display: inline; }
}
/* the fifth card, under Life: Free & low-cost help. A link to its page (same tab): the area cards' paper slip,
   frame and painting slot, an arrow instead of the area cards' ▾ (owner) */
.mbl-link { position: relative; flex: none; display: flex; align-items: center; gap: 10px; padding: 0.8rem 0.9rem 0.7rem; color: var(--ink); text-decoration: none;
  background: rgba(255, 252, 242, 0.78); border-radius: 6px 9px 7px 8px; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset, 0 6px 16px -12px rgba(70,52,20,0.45); }
.mbl-link::before { content: ""; position: absolute; left: 6px; right: 10px; top: -3px; height: 8px; background: var(--gold);
  -webkit-mask: url("/assets/atlas/brush-stroke.svg") center / 100% 100% no-repeat; mask: url("/assets/atlas/brush-stroke.svg") center / 100% 100% no-repeat; opacity: 0.9; pointer-events: none; }
.mbl-link::after { content: ""; position: absolute; inset: 0; border: 1.5px solid rgba(44, 68, 41, 0.55); outline: 1px solid rgba(44, 68, 41, 0.14); outline-offset: 3px; border-radius: inherit; pointer-events: none; }
.mbl-link:hover { background: rgba(255, 252, 242, 0.96); }
.mbl-link-icon { flex: none; width: 62px; height: 50px; background: url("/assets/atlas/area-nonprofits-watercolor.png") center / contain no-repeat; }
.mbl-link .mbl-name { line-height: 1.1; }
.mbl-link .mbl-chev { flex: none; font-size: 1.15rem; color: var(--ink-soft); }
/* desktop (owner: "single line and less prominent"): a quiet one-line link under the four area cards, no frame,
   no subtitle, a small painting, the arrow kept */
@media (min-width: 861px) {
  .mbl-link { gap: 8px; min-height: 44px; padding: 0 0.6rem; margin-top: 2px; background: none; box-shadow: none; color: var(--ink-soft); white-space: nowrap; }
  .mbl-link::before, .mbl-link::after { display: none; }
  .mbl-link:hover { background: rgba(255, 252, 242, 0.6); color: var(--ink); }
  .mbl-link .mbl-link-icon { width: 30px; height: 24px; opacity: 0.85; }
  .mbl-link .mbl-text { flex: 1; min-width: 0; }
  .mbl-link .mbl-name { font: 500 0.98rem/1.2 var(--font-sans); }
  .mbl-link .mbl-title { display: none; }
  .mbl-link .mbl-chev { font-size: 0.95rem; }
}