/* Gaia fit — last cascade layer.
   Type, frames, and overflow so every public screen sizes to the viewport
   instead of clipping, stretching, or colliding. Phone first, then desktop,
   then tablet. */

html,
body.gaia-app,
body.gaia-v2 {
  max-width: 100%;
  overflow-x: clip;
}

body.gaia-v2,
body.gaia-app {
  --fit-pad: 16px;
  --fit-gap: 14px;
  --fit-title: clamp(1.7rem, 7.2vw, 2.15rem);
  --fit-display: clamp(1.85rem, 8vw, 2.35rem);
  --fit-section: clamp(1.28rem, 4.6vw, 1.7rem);
  --fit-body: 0.9375rem;
  --fit-muted: 0.8125rem;
  --fit-radius: 20px;
}

body.gaia-v2 .gaia-shell,
body.gaia-v2 .gaia-main,
body.gaia-v2 .g-home,
body.gaia-v2 .g-page,
body.gaia-v2 .g-store,
body.gaia-v2 .g-super-home,
.gaia-splash-shell,
.gaia-splash-content {
  min-width: 0;
  max-width: 100%;
}

body.gaia-v2 .gaia-main {
  overflow-x: visible;
}

body.gaia-v2 .gaia-main > *,
body.gaia-v2 .g-super-home > *,
body.gaia-v2 .g-page > *,
body.gaia-v2 .g-store > *,
body.gaia-v2 .g-card,
body.gaia-v2 .g-super-list,
body.gaia-v2 .g-super-empty-panel,
body.gaia-v2 .g-feature-event,
body.gaia-v2 .g-free-tools,
body.gaia-v2 .g-pass,
body.gaia-v2 .g-next {
  min-width: 0;
  max-width: 100%;
}

body.gaia-v2 h1,
body.gaia-v2 h2,
body.gaia-v2 h3,
body.gaia-v2 p,
body.gaia-v2 small,
body.gaia-v2 strong,
body.gaia-v2 .g-card__meta,
body.gaia-v2 .g-super-page-head > p,
.gaia-splash-title,
.gaia-splash-body {
  max-width: 100%;
  overflow-wrap: break-word;
  word-wrap: break-word;
  white-space: normal;
}

body.gaia-v2 .g-super-empty-panel {
  display: grid;
  justify-content: start;
  align-items: start;
  gap: 8px;
}

body.gaia-v2 .g-super-empty-panel h2,
body.gaia-v2 .g-super-empty-panel p {
  max-width: 48ch;
}

body.gaia-v2 .g-super-empty-panel p {
  margin-top: 0;
}

body.gaia-v2 .g-super-home > section + section {
  margin-top: 0;
}

/* —— Phone ——————————————————————————————————————————————————————————— */
@media (max-width: 699px) {
  body.gaia-v2 .g-home,
  body.gaia-v2 .g-page,
  body.gaia-v2 .g-store {
    gap: var(--fit-gap);
    padding: 8px var(--fit-pad) calc(118px + env(safe-area-inset-bottom, 0px));
  }

  body.gaia-v2 .g-topbar {
    min-height: 46px;
    padding: 6px var(--fit-pad);
  }

  body.gaia-v2 .g-topbar__brand {
    min-width: 0;
    font-size: 16px;
  }

  body.gaia-v2 .g-super-page-head,
  body.gaia-v2 .g-page__head,
  body.gaia-v2 .g-store__head {
    min-height: 0;
    margin-bottom: 16px;
    padding: 18px 16px;
    border-radius: var(--fit-radius);
  }

  body.gaia-v2 .g-super-page-head {
    padding: 8px 2px 12px;
    background: none;
    border: 0;
  }

  body.gaia-v2 .g-super-page-head h1,
  body.gaia-v2 .g-page__title,
  body.gaia-v2 .g-store__title {
    font-size: var(--fit-title) !important;
    line-height: 1.12;
    letter-spacing: -0.03em;
  }

  body.gaia-v2 .g-super-page-head > p:last-child,
  body.gaia-v2 .g-store__sub,
  body.gaia-v2 .g-page__sub {
    margin-top: 8px;
    max-width: 46ch;
    font-size: var(--fit-body);
    line-height: 1.5;
  }

  body.gaia-v2 .g-super-section-head h2,
  body.gaia-v2 .g-section__title,
  body.gaia-v2 .g-sec-head__title {
    font-size: var(--fit-section);
    line-height: 1.15;
  }

  /* First fold: greeting + Elevate card must both fit on a phone
     without scrolling. Heights are set in the fold budget at the
     end of this file so they win over older min-height rules. */
  body.gaia-v2 .g-super-home {
    gap: 8px;
  }
  body.gaia-v2 .g-super-home > section + section {
    margin-top: 0;
  }

  body.gaia-v2 .g-super-hero h1 {
    max-width: 16ch;
    font-size: 1.2rem !important;
    line-height: 1.06;
  }

  body.gaia-v2 .g-super-home .g-super-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
  }

  body.gaia-v2 .g-super-home .g-super-hero__art {
    position: absolute;
    z-index: 0;
    inset: 0;
    height: auto;
    min-height: 0;
    opacity: 0.94;
    border: 0;
  }

  body.gaia-v2 .g-super-home .g-super-hero__art img {
    object-position: center center;
  }

  body.gaia-v2 .g-super-home .g-super-hero .g-super-hero__intro {
    position: relative;
    z-index: 2;
    min-height: 0 !important;
    height: 100%;
    align-content: start;
    background: transparent;
    padding: clamp(8px, 2vw, 11px) clamp(12px, 3.4vw, 16px) clamp(9px, 1.6vw, 12px);
  }

  body.gaia-v2 .g-super-home .g-super-hero .g-super-hero__intro::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    background: linear-gradient(180deg, rgba(7, 16, 10, .32) 0%, rgba(7, 16, 10, .1) 40%, rgba(7, 16, 10, .5) 100%);
  }

  body.gaia-v2 .g-super-hero__intro .g-super-date {
    margin: 0 0 4px;
  }

  body.gaia-v2 .g-super-hero__intro > p:not(.g-super-date) {
    max-width: 28ch;
    margin: 0 0 7px;
    font-size: 0.82rem;
    line-height: 1.3;
  }

  /* Side-by-side on the fold so labels stay whole and the stack stays short. */
  body.gaia-v2 .g-super-home .g-super-discover {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
    max-width: 100%;
    margin-top: 0;
  }

  body.gaia-v2 .g-super-home .g-super-discover .g-btn {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    min-height: 44px;
    padding: 10px 8px;
    gap: 5px;
    justify-content: center;
    align-items: center;
    font-size: clamp(11px, 3.1vw, 12.5px);
    line-height: 1.2;
    white-space: normal;
    text-align: center;
    text-wrap: balance;
    overflow: hidden;
  }

  body.gaia-v2 .g-super-home .g-super-discover .g-btn .ph {
    flex: 0 0 auto;
    font-size: 14px;
    line-height: 1;
  }

  body.gaia-v2 .g-super-actions .g-btn,
  body.gaia-v2 .g-pass__actions .g-btn,
  body.gaia-v2 .g-member-access .g-btn {
    width: 100%;
    min-width: 0;
    justify-content: center;
    white-space: nowrap;
  }

  body.gaia-v2 .g-super-home .g-feature-event {
    min-height: 0;
  }

  body.gaia-v2 .g-super-home .g-feature-event .g-feature-event__art {
    height: 100%;
  }

  body.gaia-v2 .g-super-home .g-feature-event .g-feature-event__art img {
    opacity: 1;
    object-fit: cover;
    object-position: center 40%;
  }

  body.gaia-v2 .g-super-home .g-feature-event__body {
    padding: 10px 12px 12px;
    gap: 5px;
  }

  body.gaia-v2 .g-feature-event__title {
    font-size: 1.05rem;
    line-height: 1.22;
    overflow: visible;
    display: block;
    -webkit-line-clamp: unset;
  }

  body.gaia-v2 .g-feature-event__meta {
    font-size: var(--fit-muted);
    line-height: 1.35;
  }

  body.gaia-v2 .g-super-home .g-feature-event__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
    margin-top: 4px;
  }

  body.gaia-v2 .g-super-home .g-feature-event__actions .g-btn {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    min-height: 44px;
    padding: 10px 8px;
    justify-content: center;
    align-items: center;
    font-size: clamp(11px, 3.1vw, 12.5px);
    line-height: 1.2;
    white-space: normal;
    text-align: center;
    text-wrap: balance;
    overflow: hidden;
  }

  body.gaia-v2 .g-super-actions,
  body.gaia-v2 .g-pass__actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    width: 100%;
  }

  /* Two readable doors per row on phones; four across is too tight. */
  body.gaia-v2 .g-free-tools {
    padding: 16px 14px;
  }

  body.gaia-v2 .g-free-tools__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  body.gaia-v2 .g-free-tool {
    min-height: 96px;
    gap: 8px;
    padding: 14px 10px;
  }

  body.gaia-v2 .g-free-tool strong {
    font-size: 13px;
    line-height: 1.25;
  }

  body.gaia-v2 .g-tabs {
    width: 100%;
    max-width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.gaia-v2 .g-tab {
    min-width: 0;
    padding: 10px 8px;
    font-size: 13px;
  }

  body.gaia-v2 .g-energy-switcher {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  body.gaia-v2 .g-energy-switcher button {
    min-height: 58px;
    padding: 8px 4px;
    font-size: 10px;
  }

  body.gaia-v2 .g-energy-intro h2 {
    font-size: var(--fit-title);
  }

  body.gaia-v2 .g-super-service__copy strong,
  body.gaia-v2 .g-super-event__copy strong {
    font-size: 1.2rem;
  }

  body.gaia-v2 .g-super-empty-panel,
  body.gaia-v2 .g-degraded,
  body.gaia-v2 .g-super-list {
    padding: 16px;
    border-radius: var(--fit-radius);
  }

  body.gaia-v2 .g-super-empty-panel h2,
  body.gaia-v2 .g-pass__title {
    font-size: var(--fit-section);
    line-height: 1.15;
  }

  body.gaia-v2 .g-tile__title {
    white-space: normal;
    -webkit-line-clamp: 2;
  }

  body.gaia-v2 .gaia-tabbar {
    left: 10px !important;
    right: 10px !important;
    width: auto !important;
    max-width: none !important;
    bottom: max(8px, env(safe-area-inset-bottom, 0px)) !important;
    padding: 0 0 max(6px, env(safe-area-inset-bottom)) !important;
    transform: none !important;
  }

  body.gaia-v2 .gaia-tabbar__inner {
    width: 100%;
    max-width: none !important;
    min-width: 0;
  }

  body.gaia-v2 .gaia-tabbar__link {
    min-width: 0;
    flex: 1 1 0;
    overflow: visible;
  }

  body.gaia-v2 .gaia-tabbar__label {
    display: block !important;
    max-width: 100%;
    overflow: visible;
    font-size: 10px !important;
    text-overflow: clip;
  }

  body.gaia-v2 .gaia-tabbar__assist {
    width: 48px;
    height: 48px;
    margin: -0.35rem 2px 0;
  }

  .g-install {
    z-index: 80;
    bottom: calc(86px + env(safe-area-inset-bottom, 0px));
    padding: 0 12px;
  }

  .g-install__panel {
    max-width: 100%;
    min-width: 0;
    padding: 14px;
    gap: 10px;
  }

  .g-install__head,
  .g-install__head > div {
    min-width: 0;
  }

  .g-install__title {
    font-size: 0.95rem;
  }

  .g-install__sub {
    overflow: visible;
    white-space: normal;
  }

  .g-install__actions {
    flex-wrap: wrap;
  }

  .g-install__actions .g-btn {
    min-width: 0;
  }

  body:has(.gaia-assist-nudge) .g-install {
    bottom: calc(168px + env(safe-area-inset-bottom, 0px));
  }

  .gaia-assist-nudge {
    width: min(100% - 24px, 360px);
    min-width: 0;
    bottom: max(96px, calc(env(safe-area-inset-bottom, 0px) + 84px));
  }

  body:has(.gaia-assist-nudge) .g-home,
  body:has(.gaia-assist-nudge) .g-page,
  body:has(.gaia-assist-nudge) .g-store {
    padding-bottom: calc(186px + env(safe-area-inset-bottom, 0px));
  }

  body:has(.g-install) .g-home,
  body:has(.g-install) .g-page,
  body:has(.g-install) .g-store {
    padding-bottom: calc(168px + env(safe-area-inset-bottom, 0px));
  }

  body:has(.g-install):has(.gaia-assist-nudge) .g-home,
  body:has(.g-install):has(.gaia-assist-nudge) .g-page,
  body:has(.g-install):has(.gaia-assist-nudge) .g-store {
    padding-bottom: calc(248px + env(safe-area-inset-bottom, 0px));
  }

  .gaia-splash-shell {
    padding: max(0.85rem, env(safe-area-inset-top)) 1.15rem max(1.1rem, env(safe-area-inset-bottom));
  }

  .gaia-splash-content,
  .gaia-splash-footer {
    max-width: min(100%, 22.5rem);
  }

  .gaia-splash-title {
    font-size: clamp(1.65rem, 7vw, 2.15rem);
  }

  .gaia-splash-body {
    max-width: 34ch;
    font-size: 0.9375rem;
    line-height: 1.5;
  }

  .gaia-splash-btn {
    width: 100%;
    min-height: 48px;
  }
}

@media (max-width: 699px) and (max-height: 700px) {
  body.gaia-v2 .g-super-home .g-super-hero {
    min-height: 0;
  }
}

@media (max-width: 379px) {
  /* Narrowest phones get a tighter gutter. Set on the token, not just on the
     content: the header reads --fit-pad too, and overriding only the content
     left the brand 4px inside the cards it sits above. */
  body.gaia-v2,
  body.gaia-app { --fit-pad: 12px; }

  body.gaia-v2 .g-home,
  body.gaia-v2 .g-page,
  body.gaia-v2 .g-store {
    padding-inline: var(--fit-pad);
  }

  body.gaia-v2 .g-super-hero h1,
  body.gaia-v2 .g-super-page-head h1 {
    font-size: 1.55rem !important;
  }

  body.gaia-v2 .gaia-tabbar__label {
    font-size: 9px !important;
  }
}

/* —— Desktop ———————————————————————————————————————————————————————— */
@media (min-width: 1100px) {
  body.gaia-v2 {
    --fit-title: clamp(2.35rem, 3vw, 2.85rem);
    --fit-display: clamp(2.6rem, 3.4vw, 3.5rem);
    --fit-section: 1.85rem;
    --fit-body: 1.02rem;
    --fit-pad: 40px;
  }

  body.gaia-v2 .g-home,
  body.gaia-v2 .g-page,
  body.gaia-v2 .g-store {
    padding: 28px var(--fit-pad) 56px;
  }

  body.gaia-v2 .g-super-page-head h1,
  body.gaia-v2 .g-page__title,
  body.gaia-v2 .g-store__title {
    font-size: var(--fit-title) !important;
    line-height: 1.08;
  }

  body.gaia-v2 .g-super-page-head > p:last-child,
  body.gaia-v2 .g-page__sub,
  body.gaia-v2 .g-energy-intro > p:last-child {
    max-width: 62ch;
    font-size: var(--fit-body);
    line-height: 1.6;
  }

  body.gaia-v2 .g-super-hero h1 {
    font-size: var(--fit-display) !important;
    max-width: 14ch;
  }

  body.gaia-v2 .g-super-discover {
    display: flex;
    flex-wrap: wrap;
    width: auto;
  }

  body.gaia-v2 .g-super-discover .g-btn,
  body.gaia-v2 .g-feature-event__actions .g-btn {
    width: auto;
  }

  body.gaia-v2 .g-feature-event__actions,
  body.gaia-v2 .g-super-actions,
  body.gaia-v2 .g-pass__actions {
    display: flex;
    flex-wrap: wrap;
    width: auto;
  }

  body.gaia-v2 .g-free-tools__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
  }

  body.gaia-v2 .g-free-tool {
    min-height: 128px;
    padding: 18px 14px;
  }

  body.gaia-v2 .g-free-tool strong {
    font-size: 14px;
  }

  body.gaia-v2 .g-feature-event__title {
    font-size: clamp(1.2rem, 1.6vw, 1.7rem);
    overflow: visible;
    display: block;
    -webkit-line-clamp: unset;
    line-clamp: unset;
  }

  body.gaia-v2 .g-tabs {
    max-width: 380px;
  }

  body.gaia-v2 .g-store-rail,
  body.gaia-v2 .g-store-rail.g-rail {
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  }

  body.gaia-v2 .g-super-home:not(:has(.g-feature-event)):not(:has(.g-super-event)):not(:has([data-sky-host] > .g-sky)) > .g-super-hero {
    grid-column: 1 / -1;
  }

  body.gaia-v2 .g-super-home > [data-sky-host]:empty {
    display: none;
  }

  body.gaia-v2 .g-energy-intro,
  body.gaia-v2 .g-energy-panel {
    max-width: 72ch;
  }

  .gaia-splash-shell {
    padding: 2.25rem 2.5rem 2.75rem;
  }

  .gaia-splash-content,
  .gaia-splash-footer {
    max-width: 26rem;
  }

  .gaia-splash-title {
    font-size: clamp(2.15rem, 3vw, 2.7rem);
  }
}

/* —— Tablet ————————————————————————————————————————————————————————— */
@media (min-width: 700px) and (max-width: 1099px) {
  body.gaia-v2 {
    --fit-title: clamp(2rem, 4.2vw, 2.45rem);
    --fit-display: clamp(2.15rem, 4.6vw, 2.7rem);
    --fit-section: 1.65rem;
    --fit-body: 0.98rem;
    --fit-pad: clamp(24px, 4vw, 36px);
  }

  body.gaia-v2 .g-home,
  body.gaia-v2 .g-page,
  body.gaia-v2 .g-store {
    gap: 18px;
    padding-top: 18px;
    padding-inline: var(--fit-pad);
  }
}

@media (min-width: 700px) and (max-width: 999px) {
  body.gaia-v2 .g-home,
  body.gaia-v2 .g-page,
  body.gaia-v2 .g-store {
    padding-bottom: calc(108px + env(safe-area-inset-bottom, 0px));
  }
}

@media (min-width: 1000px) and (max-width: 1099px) {
  body.gaia-v2 .g-home,
  body.gaia-v2 .g-page,
  body.gaia-v2 .g-store {
    padding-bottom: 40px;
  }
}

@media (min-width: 700px) and (max-width: 1099px) {

  body.gaia-v2 .g-super-page-head h1,
  body.gaia-v2 .g-page__title,
  body.gaia-v2 .g-store__title {
    font-size: var(--fit-title) !important;
    line-height: 1.1;
  }

  body.gaia-v2 .g-super-page-head > p:last-child {
    max-width: 52ch;
    font-size: var(--fit-body);
  }

  body.gaia-v2 .g-super-hero h1 {
    font-size: var(--fit-display) !important;
  }

  body.gaia-v2 .g-super-discover {
    display: flex;
    flex-wrap: wrap;
    max-width: 420px;
  }

  body.gaia-v2 .g-super-discover .g-btn {
    width: auto;
    flex: 1 1 auto;
  }

  body.gaia-v2 .g-feature-event__actions {
    display: flex;
    flex-wrap: wrap;
  }

  body.gaia-v2 .g-feature-event__actions .g-btn {
    width: auto;
  }

  body.gaia-v2 .g-free-tools__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
  }

  body.gaia-v2 .g-free-tool {
    min-height: 118px;
    padding: 16px 12px;
  }

  body.gaia-v2 .g-free-tool strong {
    font-size: 13.5px;
  }

  body.gaia-v2 .g-tabs {
    max-width: 420px;
  }

  .gaia-splash-shell {
    padding: 1.75rem 2rem 2.25rem;
  }

  .gaia-splash-content,
  .gaia-splash-footer {
    max-width: 24rem;
  }

  .gaia-splash-title {
    font-size: clamp(1.9rem, 4vw, 2.4rem);
  }
}

/* —— Home fold photos: fluid while the window is dragged ——————————————
   Photo B (moon meditator) lives in .g-super-hero__art.
   Photo A (Elevate wordmark) lives in .g-feature-event__art.
   Heights use svh/clamp so a live resize does not jump between three
   fixed layouts, and object-position keeps ELEVATE and the figure in frame. */
body.gaia-v2 .g-super-home .g-super-hero,
body.gaia-v2 .g-super-home .g-feature-event {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

body.gaia-v2 .g-super-home .g-super-hero__art {
  position: absolute;
  inset: 0;
  z-index: 0;
  min-width: 0;
  min-height: 0;
}

body.gaia-v2 .g-super-home .g-super-hero__art img,
body.gaia-v2 .g-super-home .g-super-hero__art picture {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

body.gaia-v2 .g-super-home .g-super-hero__art img {
  object-fit: cover;
  object-position: center center;
}

@media (min-width: 900px) {
  body.gaia-v2 .g-super-home .g-super-hero__art img {
    object-position: center 24%;
  }
}

body.gaia-v2 .g-super-home .g-super-hero__art::after {
  background: linear-gradient(180deg, rgba(4, 7, 10, .12) 0%, rgba(4, 7, 10, .04) 38%, rgba(4, 7, 10, .58) 100%);
}

body.gaia-v2 .g-super-home .g-feature-event__art {
  position: absolute;
  inset: 0;
  z-index: 0;
  min-width: 0;
  overflow: hidden;
}

body.gaia-v2 .g-super-home .g-feature-event__art img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  opacity: 1;
  transform: none;
  filter: none;
}

/* Tablet / small laptop: keep a compact stack so both photos stay on the
   first screen. The 510px two-column hero from superapp.css is too tall. */
@media (min-width: 700px) and (max-width: 899px) {
  body.gaia-v2 .g-super-home {
    gap: clamp(10px, 1.6vw, 16px);
  }

  body.gaia-v2 .g-super-home .g-super-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
  }

  body.gaia-v2 .g-super-home .g-super-hero__art {
    position: absolute;
    z-index: 0;
    inset: 0;
    height: auto;
    opacity: 0.9;
    border: 0;
  }

  body.gaia-v2 .g-super-home .g-super-hero__art img {
    object-position: center center;
  }

  body.gaia-v2 .g-super-home .g-super-hero .g-super-hero__intro {
    position: relative;
    z-index: 2;
    min-height: 0 !important;
    height: 100%;
    align-content: start;
    background: transparent;
    padding: clamp(16px, 2.4vw, 28px);
  }

  body.gaia-v2 .g-super-home .g-super-hero .g-super-hero__intro::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    background: linear-gradient(180deg, rgba(7, 16, 10, .38) 0%, rgba(7, 16, 10, .12) 48%, rgba(7, 16, 10, .7) 100%);
  }

  body.gaia-v2 .g-super-home .g-super-hero h1 {
    font-size: clamp(1.85rem, 4.2vw, 2.45rem) !important;
  }

  body.gaia-v2 .g-super-home .g-feature-event {
    position: relative;
    flex-direction: column;
    min-height: 0;
  }

  body.gaia-v2 .g-super-home .g-feature-event .g-feature-event__art {
    position: absolute;
    inset: 0;
    flex: none;
    width: auto;
    height: auto;
  }

  body.gaia-v2 .g-super-home .g-feature-event .g-feature-event__art img {
    object-position: center 42%;
  }
}

/* Wide enough for two photos side by side: greeting | Elevate, both on fold.
   Sky moves under that pair so it cannot steal the event's column. */
@media (min-width: 900px) {
  body.gaia-v2 .g-super-home {
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
    gap: clamp(14px, 1.6vw, 22px);
    align-items: stretch;
  }

  body.gaia-v2 .g-super-home > .g-super-hero {
    grid-column: 1;
    grid-row: 1;
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
    height: auto;
  }

  body.gaia-v2 .g-super-home > .g-super-hero__art,
  body.gaia-v2 .g-super-home .g-super-hero__art {
    position: absolute;
    z-index: 0;
    inset: 0;
    height: auto;
    opacity: 0.92;
    border: 0;
  }

  /* The hero is a ~3:1 strip here, so the 16:9 photo is cut top and bottom.
     Aim the cut at the meditator (and the lower half of the moon) rather
     than the middle, which used to leave only the top of the figure's head. */
  body.gaia-v2 .g-super-home .g-super-hero__art img {
    object-position: center 24%;
  }

  body.gaia-v2 .g-super-home .g-super-hero .g-super-hero__intro {
    position: relative;
    z-index: 2;
    min-height: 0 !important;
    max-width: 38rem;
    height: 100%;
    display: grid;
    align-content: end;
    background: transparent;
    padding: clamp(20px, 2.8vw, 40px);
  }

  body.gaia-v2 .g-super-home .g-super-hero .g-super-hero__intro::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    background: linear-gradient(100deg, rgba(4, 7, 10, .78) 0%, rgba(4, 7, 10, .28) 52%, rgba(4, 7, 10, .04) 78%);
  }

  body.gaia-v2 .g-super-home > .g-feature-event,
  body.gaia-v2 .g-super-home > .g-super-event {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: auto;
  }

  body.gaia-v2 .g-super-home > .g-feature-event .g-feature-event__art {
    position: absolute;
    inset: 0;
    flex: none;
    width: auto;
    max-width: none;
    min-height: 0;
    height: auto;
  }

  body.gaia-v2 .g-super-home > .g-feature-event .g-feature-event__art img {
    object-position: center 40%;
  }

  body.gaia-v2 .g-super-home > .g-feature-event .g-feature-event__body {
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
    margin-top: auto;
    max-width: none;
    padding: clamp(12px, 1.6vw, 22px);
  }

  body.gaia-v2 .g-super-home > [data-sky-host] {
    grid-column: 1 / -1;
    grid-row: auto;
  }
}

/* —— First-fold budget (must win last) ——————————————————————————————
   On open, greeting + Elevate (including Event details / Buy Tickets) have
   to sit fully above the tab bar. 100svh is the Safari viewport with chrome
   visible — the moment someone lands on the site. Art is a backdrop; copy
   overlays it so the event card is one short poster, not a banner + body. */
body.gaia-v2 .gaia-screen[data-screen="today"] {
  --gaia-topbar-h: 46px;
  --gaia-main-pad-top: 8px;
  --gaia-g-home-pad-top: 8px;
  --gaia-fold-gap: 8px;
  /* Tab bar + Safari bottom URL bar on real iPhones (not standalone PWA). */
  --gaia-tab-h: calc(118px + env(safe-area-inset-bottom, 0px));
  --gaia-fold: calc(
    100vh - var(--gaia-topbar-h) - var(--gaia-main-pad-top) - var(--gaia-g-home-pad-top) - var(--gaia-tab-h)
  );
}
@supports (height: 100svh) {
  body.gaia-v2 .gaia-screen[data-screen="today"] {
    --gaia-fold: calc(
      100svh - var(--gaia-topbar-h) - var(--gaia-main-pad-top) - var(--gaia-g-home-pad-top) - var(--gaia-tab-h)
    );
  }
}
@supports (height: 100dvh) {
  body.gaia-v2 .gaia-screen[data-screen="today"] {
    --gaia-fold: calc(
      100dvh - var(--gaia-topbar-h) - var(--gaia-main-pad-top) - var(--gaia-g-home-pad-top) - var(--gaia-tab-h)
    );
  }
}

body.gaia-v2 .g-super-home .g-super-hero,
body.gaia-v2 .g-super-home .g-feature-event,
body.gaia-v2 .g-super-home .g-super-event {
  position: relative;
  overflow: hidden;
}

body.gaia-v2 .g-super-home .g-super-hero__art,
body.gaia-v2 .g-super-home .g-feature-event__art {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  flex: none !important;
}

body.gaia-v2 .g-super-home .g-super-hero__intro {
  position: relative;
  z-index: 1;
  min-height: 0 !important;
}

body.gaia-v2 .g-super-home .g-feature-event__body {
  position: absolute !important;
  inset: auto 0 0 0 !important;
  z-index: 2 !important;
  min-height: 0 !important;
  margin-top: 0 !important;
}

@media (max-width: 899px) {
  body.gaia-v2 .gaia-screen[data-screen="today"] {
    --gaia-hero-h: clamp(7rem, calc(var(--gaia-fold) * 0.28), 8.75rem);
    --gaia-event-h: min(
      calc(var(--gaia-fold) - var(--gaia-hero-h) - var(--gaia-fold-gap)),
      12.75rem
    );
  }

  body.gaia-v2 .gaia-screen[data-screen="today"] .g-topbar {
    min-height: var(--gaia-topbar-h);
    padding-block: 6px;
  }

  body.gaia-v2 .gaia-screen[data-screen="today"] .gaia-main--today {
    padding-top: var(--gaia-main-pad-top) !important;
  }

  body.gaia-v2 .g-super-home {
    gap: var(--gaia-fold-gap) !important;
  }

  body.gaia-v2 .g-super-home .g-super-hero {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end;
    min-height: 0 !important;
    height: var(--gaia-hero-h) !important;
  }

  body.gaia-v2 .g-super-home .g-feature-event,
  body.gaia-v2 .g-super-home .g-super-event {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end;
    min-height: 0 !important;
    max-height: var(--gaia-event-h) !important;
    height: var(--gaia-event-h) !important;
  }

  body.gaia-v2 .g-super-home .g-super-event--empty {
    display: grid !important;
    align-content: center;
    gap: 8px;
    padding: 14px 16px !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: var(--gaia-event-h) !important;
  }

  body.gaia-v2 .g-super-home .g-super-event--empty h2 {
    font-size: 1.35rem !important;
  }

  body.gaia-v2 .g-super-home .g-feature-event__art img {
    opacity: 1 !important;
    object-position: center 52% !important;
  }

  body.gaia-v2 .g-super-home .g-super-hero__intro {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 2px;
    height: auto !important;
    padding: 10px 12px 12px !important;
    background: transparent;
  }

  body.gaia-v2 .g-super-hero__intro .g-super-date {
    margin: 0 0 2px;
    font-size: 10px;
  }

  body.gaia-v2 .g-super-home .g-super-hero h1 {
    font-size: clamp(1.2rem, 5.4vw, 1.45rem) !important;
    line-height: 1.08;
    margin: 0;
  }

  body.gaia-v2 .g-super-hero__intro > p:not(.g-super-date) {
    margin: 2px 0 8px !important;
    font-size: 12.5px !important;
    line-height: 1.3;
  }

  body.gaia-v2 .g-super-home .g-super-discover {
    display: flex !important;
    flex-wrap: nowrap;
    gap: 8px;
    width: 100%;
    margin-top: 0 !important;
  }

  body.gaia-v2 .g-super-home .g-super-discover .g-btn {
    flex: 1 1 0;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    min-height: 44px;
    padding: 10px 8px !important;
    gap: 5px;
    justify-content: center;
    align-items: center;
    font-size: clamp(11px, 3.1vw, 12.5px);
    line-height: 1.2;
    letter-spacing: -0.01em;
    white-space: normal;
    text-align: center;
    text-wrap: balance;
    overflow: hidden;
  }

  body.gaia-v2 .g-super-home .g-super-discover .g-btn .ph {
    flex: 0 0 auto;
    font-size: 14px;
    line-height: 1;
  }

  body.gaia-v2 .g-super-home .g-feature-event__body {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 5px;
    padding: 10px 12px 12px !important;
    background: linear-gradient(180deg, transparent 0%, rgba(4, 7, 10, .62) 22%, rgba(4, 7, 10, .94) 100%);
  }

  body.gaia-v2 .g-feature-event__kicker {
    font-size: 0.64rem;
  }

  body.gaia-v2 .g-feature-event__title {
    font-size: clamp(0.98rem, 4.2vw, 1.12rem);
    line-height: 1.2;
  }

  body.gaia-v2 .g-feature-event__meta {
    font-size: 0.75rem;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  body.gaia-v2 .g-super-home .g-feature-event__actions {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    margin-top: 4px;
  }

  body.gaia-v2 .g-super-home .g-feature-event__actions .g-btn {
    flex: 1 1 0;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    min-height: 44px;
    padding: 10px 8px !important;
    gap: 0;
    justify-content: center;
    align-items: center;
    font-size: clamp(11px, 3.1vw, 12.5px);
    line-height: 1.2;
    letter-spacing: -0.01em;
    white-space: normal;
    text-align: center;
    text-wrap: balance;
    overflow: hidden;
  }

  /* Assist / install chips sit on top of Buy Tickets on iPhone. */
  body.gaia-v2:has(.gaia-screen[data-screen="today"].is-active) .gaia-assist-nudge,
  body.gaia-v2:has(.gaia-screen[data-screen="today"].is-active) .g-install {
    display: none !important;
  }
}

@media (max-width: 899px) and (max-height: 700px) {
  body.gaia-v2 .gaia-screen[data-screen="today"] {
    --gaia-hero-h: clamp(6.5rem, calc(var(--gaia-fold) * 0.26), 7.75rem);
    --gaia-event-h: min(
      calc(var(--gaia-fold) - var(--gaia-hero-h) - var(--gaia-fold-gap)),
      11.25rem
    );
  }

  body.gaia-v2 .g-super-home .g-super-hero h1 {
    font-size: 1.15rem !important;
  }

  body.gaia-v2 .g-super-home .g-super-discover .g-btn,
  body.gaia-v2 .g-super-home .g-feature-event__actions .g-btn {
    min-height: 42px;
    padding: 9px 7px !important;
    font-size: 11px;
    line-height: 1.15;
  }

  body.gaia-v2 .g-super-home .g-super-discover .g-btn .ph {
    font-size: 13px;
  }
}

@media (min-width: 700px) and (max-width: 899px) {
  body.gaia-v2 .gaia-screen[data-screen="today"] {
    --gaia-topbar-h: 56px;
    --gaia-main-pad-top: 14px;
    --gaia-fold-gap: 12px;
    --gaia-tab-h: calc(88px + env(safe-area-inset-bottom, 0px));
    --gaia-hero-h: clamp(9.5rem, calc(var(--gaia-fold) * 0.34), 12.5rem);
  }

  body.gaia-v2 .g-super-home .g-super-hero__intro,
  body.gaia-v2 .g-super-home .g-feature-event__body {
    padding: 16px 18px 18px !important;
  }

  body.gaia-v2 .g-super-home .g-super-hero h1 {
    font-size: clamp(1.7rem, 4vw, 2.2rem) !important;
  }
}

@media (min-width: 900px) {
  body.gaia-v2 .gaia-screen[data-screen="today"] {
    --gaia-topbar-h: 64px;
    --gaia-main-pad-top: 20px;
    --gaia-tab-h: 0px;
    --gaia-fold: calc(100vh - var(--gaia-topbar-h) - var(--gaia-main-pad-top) - var(--gaia-tab-h) - 24px);
  }
}

@supports (height: 100svh) {
  @media (min-width: 900px) {
    body.gaia-v2 .gaia-screen[data-screen="today"] {
      --gaia-fold: calc(100svh - var(--gaia-topbar-h) - var(--gaia-main-pad-top) - var(--gaia-tab-h) - 24px);
    }
  }
}

@media (min-width: 900px) {
  body.gaia-v2 .g-super-home > .g-super-hero {
    grid-column: 1 / 2 !important;
    grid-row: 1 !important;
  }

  body.gaia-v2 .g-super-home > .g-feature-event,
  body.gaia-v2 .g-super-home > .g-super-event {
    grid-column: 2 / 3 !important;
    grid-row: 1 !important;
  }

  body.gaia-v2 .g-super-home > .g-super-hero,
  body.gaia-v2 .g-super-home > .g-feature-event,
  body.gaia-v2 .g-super-home > .g-super-event {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end;
    min-height: 0 !important;
    height: clamp(18rem, calc(var(--gaia-fold) * 0.72), 28rem) !important;
  }

  body.gaia-v2 .g-super-home .g-super-hero__intro,
  body.gaia-v2 .g-super-home .g-feature-event__body {
    margin-top: auto;
    height: auto !important;
  }

  body.gaia-v2 .g-super-home .g-feature-event__body {
    background: linear-gradient(180deg, transparent 0%, rgba(4, 7, 10, .5) 36%, rgba(4, 7, 10, .9) 100%);
  }
}

@media (min-width: 900px) and (max-width: 999px) {
  body.gaia-v2 .gaia-screen[data-screen="today"] {
    --gaia-tab-h: calc(88px + env(safe-area-inset-bottom, 0px));
  }
}

/* Fold CTAs: keep label + icon inside the pill on every phone width. */
@media (max-width: 899px) {
  body.gaia-v2 .g-super-home .g-super-discover .g-btn,
  body.gaia-v2 .g-super-home .g-feature-event__actions .g-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 44px !important;
    padding: 10px 8px !important;
    font-size: clamp(11px, 3.1vw, 12.5px) !important;
    font-weight: 650 !important;
    line-height: 1.2 !important;
    letter-spacing: -0.01em;
    white-space: normal !important;
    text-align: center;
    text-wrap: balance;
    overflow: hidden;
    border-radius: 999px;
  }

  body.gaia-v2 .g-super-home .g-super-discover .g-btn .ph {
    flex: 0 0 auto;
    font-size: 14px;
    line-height: 1;
  }
}

@media (max-width: 380px) {
  body.gaia-v2 .g-super-home .g-super-discover .g-btn,
  body.gaia-v2 .g-super-home .g-feature-event__actions .g-btn {
    min-height: 42px !important;
    padding: 8px 6px !important;
    font-size: 10.5px !important;
  }

  body.gaia-v2 .g-super-home .g-super-discover .g-btn .ph {
    font-size: 12px;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   FINAL WORD — layout corrections on top of the fold rules above.
   The fold pass squeezed the hero into a centred block (wrapping its own
   CTA) and floated the event kicker back over the poster art. These keep
   the fold's intent — everything important above the tab bar — while
   restoring the template's composition: words seated bottom-left on the
   hero, and the poster as a banner ABOVE the details, never behind them.
   This file loads last, so this section is the page's actual last word.
   ════════════════════════════════════════════════════════════════════════ */

/* ── The landing: two complete cards, any device ──────────────────────────
   Sized so the hero AND the Elevate card both finish above the tab bar on
   every screen, using dvh (the viewport height that survives mobile toolbars).

   The artwork is the ORIGINAL 720×749 — complete moon, sky, mountains, figure
   and reflection. The earlier "tall" asset extended it with a blurred smear
   that filled a third of the card; that was the real ugliness, not the crop.
   The card carries the image's own ratio, so nothing is cut until a short
   screen forces a cap — and then it trims water from the bottom, which the
   text already covers. */

:root{ --gaia-landing-chrome:186px; }   /* top bar + tab bar + gaps */

body.gaia-v2 .g-super-home .g-super-hero{position:relative;display:flex !important;
  flex-direction:column !important;width:100%;
  aspect-ratio:720/749;height:auto !important;
  max-height:calc(40vh);max-height:calc(40dvh);
  min-height:0 !important;border-radius:24px;overflow:hidden;isolation:isolate}

body.gaia-v2 .g-super-home .g-super-hero__art{position:absolute !important;
  inset:0 !important;z-index:0;height:auto !important;width:auto;max-height:none;
  border:0;opacity:1 !important;transform:none;background-color:#0a1310;
  background-image:url("assets/gaia-hero-moon.jpg") !important;
  background-repeat:no-repeat;background-size:cover;background-position:center top}
body.gaia-v2 .g-super-home .g-super-hero__art::before{content:none}
body.gaia-v2 .g-super-home .g-super-hero__art::after{content:"";position:absolute;
  inset:0;background:linear-gradient(180deg,rgba(4,7,10,.78) 0%,rgba(4,7,10,.42) 20%,
    rgba(4,7,10,.06) 38%,transparent 52%,rgba(4,7,10,.5) 78%,rgba(4,7,10,.92) 100%)}

body.gaia-v2 .g-super-home .g-super-hero .g-super-hero__intro{position:relative;
  z-index:1;width:100% !important;max-width:none !important;height:100% !important;
  min-height:0 !important;margin:0 !important;
  display:flex !important;flex-direction:column !important;
  /* Greeting at the top, actions at the bottom, artwork breathing between
     them — the flat markup groups itself via margin-top:auto on the CTA row. */
  align-items:flex-start !important;justify-content:flex-start !important;
  gap:0;text-align:left !important;padding:18px 18px 16px !important}
body.gaia-v2 .g-super-home .g-super-hero .g-super-hero__intro::before{content:none}
body.gaia-v2 .g-super-home .g-super-hero .g-super-hero__intro > *{
  align-self:flex-start !important;margin-left:0 !important;margin-right:0 !important;
  max-width:100%}
/* The date opens the bottom group, so it carries the push. */
body.gaia-v2 .g-super-hero__intro .g-super-date{margin:auto 0 5px !important;
  font-size:10.5px !important;text-shadow:0 1px 6px rgba(0,0,0,.6)}
body.gaia-v2 .g-super-hero h1,
body.gaia-v2 .g-super-hero__intro h1{font-size:clamp(25px,6.4vw,38px) !important;
  line-height:1.04;margin:0 !important;max-width:none !important;
  text-align:left !important;text-shadow:0 2px 14px rgba(0,0,0,.6)}
body.gaia-v2 .g-super-hero__intro > p:not(.g-super-date){margin:0 0 11px !important;
  max-width:32ch;font-size:clamp(12.5px,3.4vw,15px);line-height:1.3;
  color:rgba(255,255,255,.9);text-align:left !important;
  text-shadow:0 1px 8px rgba(0,0,0,.6)}
body.gaia-v2 .g-super-home .g-super-hero .g-super-discover,
body.gaia-v2 .g-super-home .g-super-discover{display:flex !important;
  flex-direction:row !important;justify-content:flex-start !important;
  align-items:center;gap:8px;flex-wrap:nowrap;
  width:100% !important;max-width:100%;min-width:0;margin:0 !important}
/* Equal halves — two buttons of different widths read as an accident. */
body.gaia-v2 .g-super-home .g-super-discover .g-btn{white-space:nowrap !important;
  flex:1 1 0 !important;width:auto !important;min-width:0;max-width:220px;
  justify-content:center !important;
  font-size:clamp(11.5px,3.1vw,13.5px) !important;
  padding:10px 12px !important;min-height:44px}

/* Elevate: complete card — banner, kicker, title, dates, both buttons. */
body.gaia-v2 .g-super-home .g-feature-event .g-feature-event__art{
  height:clamp(96px,15vh,150px) !important;height:clamp(96px,15dvh,150px) !important}
body.gaia-v2 .g-super-home .g-feature-event__body{padding:12px 16px 14px !important;
  gap:5px !important}
body.gaia-v2 .g-feature-event__kicker{font-size:10.5px !important}
body.gaia-v2 .g-feature-event__title{font-size:clamp(15px,4.1vw,19px) !important;
  line-height:1.18 !important}
body.gaia-v2 .g-feature-event__meta{font-size:clamp(11.5px,3.1vw,13px) !important;
  line-height:1.3 !important}
body.gaia-v2 .g-super-home .g-feature-event__actions{margin-top:7px !important;gap:8px}
body.gaia-v2 .g-super-home .g-feature-event__actions .g-btn{
  font-size:clamp(11.5px,3.1vw,13.5px) !important;padding:10px 14px !important;
  min-height:44px;white-space:nowrap}

/* Short screens (iPhone SE and friends): the same two complete cards, tighter.
   Measured — at 667px tall the default tier overshot the tab bar by 23px. */
@media (max-height:740px){
  body.gaia-v2 .g-super-home .g-super-hero{max-height:calc(22vh);max-height:calc(22dvh)}
  body.gaia-v2 .g-super-home .g-super-hero .g-super-hero__intro{padding:9px 16px 9px !important}
  body.gaia-v2 .g-super-hero h1,
  body.gaia-v2 .g-super-hero__intro h1{font-size:clamp(21px,5.4vw,26px) !important;
    margin:0 0 3px !important}
  body.gaia-v2 .g-super-hero__intro > p:not(.g-super-date){margin:0 0 9px !important;
    font-size:12.5px}
  body.gaia-v2 .g-super-home .g-feature-event .g-feature-event__art{
    height:clamp(140px,22vh,170px) !important;height:clamp(140px,22dvh,170px) !important}
  body.gaia-v2 .g-super-home .g-feature-event__body{padding:10px 14px 12px !important}
  body.gaia-v2 .g-feature-event__meta{font-size:11.5px !important}
  body.gaia-v2 .g-super-home .g-super-home{gap:10px}
}

/* Roomier once there is room: tablets and up. */
@media (min-height:820px) and (max-width:1059px){
  /* Only the padding gets roomier. An earlier 52dvh bump here was written
     when the poster banner was half its current height and pushed the cards
     8px past the tab bar. */
  body.gaia-v2 .g-super-home .g-super-hero .g-super-hero__intro{padding:18px 20px 18px !important}
}

/* Event: banner, then details. Nothing overlays the poster's lettering. */
body.gaia-v2 .g-super-home .g-feature-event{display:flex !important;flex-direction:column !important;
  /* The fold bands cap the card's height, which crops the poster to a sliver
     of crowd. The card is as tall as its banner plus its details — always. */
  min-height:0;height:auto !important;max-height:none !important;overflow:hidden}
/* The Elevate artwork is a whole poster — logo, wordmark, tagline, crowd — at
   426×358, and this slot is a wide band. `cover` therefore had to throw most of
   it away, and how much it threw away depended on the width: the band is a
   fixed pixel height, so at 360px wide it showed about half the poster and at
   690px wide only 28% of it, magnified 1.6×. That widening zoom is what made it
   look wrong on anything larger than a phone.

   So the poster is no longer cropped at all. It is contained — shown whole at
   every width — over a blurred, scaled copy of itself that fills the rest of
   the band. The poster's own edges are #061510, so the bed reads as the
   artwork continuing outward rather than as letterboxing. The band's height
   stays governed by the fold, which is the one thing that genuinely cannot
   move: the card must finish above the tab bar. */
body.gaia-v2 .g-super-home .g-feature-event .g-feature-event__art{position:relative !important;
  inset:auto !important;flex:none;width:100%;
  height:clamp(150px,21vh,200px) !important;
  height:clamp(150px,21dvh,200px) !important;
  border-radius:0;overflow:hidden;opacity:1;background:#061510;isolation:isolate}
/* The bed: the same artwork, blurred. Inset negatively so the blur's soft edge
   is pushed outside the band instead of showing as a pale rim. */
body.gaia-v2 .g-super-home .g-feature-event .g-feature-event__art::before{content:"";
  position:absolute;inset:-14%;z-index:0;
  /* The plain url() stays as the fallback declaration; a browser that does not
     understand image-set() simply keeps it. WebP is 19KB against the PNG's 203. */
  background:url("assets/gaia-elevate-hero.png") center/cover no-repeat;
  background-image:-webkit-image-set(url("assets/gaia-elevate-hero.webp") type("image/webp"),
                                     url("assets/gaia-elevate-hero.png") type("image/png"));
  background-image:image-set(url("assets/gaia-elevate-hero.webp") type("image/webp"),
                             url("assets/gaia-elevate-hero.png") type("image/png"));
  /* Kept lit and saturated on purpose. Darkened to near-black it stopped
     reading as the artwork continuing and the poster looked like a rectangle
     pasted onto a panel; the poster's own green glow is what ties the two
     together. */
  filter:blur(30px) saturate(1.25) brightness(.72);transform:scale(1.12)}
body.gaia-v2 .g-super-home .g-feature-event .g-feature-event__art img{position:relative;
  z-index:1;width:100%;height:100%;object-fit:contain;object-position:center;
  opacity:1;transform:none;filter:none}
body.gaia-v2 .g-super-home .g-feature-event .g-feature-event__art::after{content:"";
  position:absolute;inset:0;z-index:2;
  background:linear-gradient(180deg,transparent 58%,rgba(4,7,10,.55) 100%)}
body.gaia-v2 .g-super-home .g-feature-event__body{position:relative !important;inset:auto !important;
  margin:0 !important;flex:none;display:flex;flex-direction:column;gap:8px;
  padding:16px 18px 18px !important;background:none}
body.gaia-v2 .g-super-home .g-feature-event__actions{margin-top:10px;gap:10px}
body.gaia-v2 .g-super-home .g-feature-event__actions .g-btn{white-space:nowrap}

/* Desktop: taller hero; the poster earns its side seat. */
@media (min-width:1060px){
  /* The hero's height is set with the event's, from --pair-h below. */
  body.gaia-v2 .g-super-home .g-super-hero__art{background-position:center 30%}
  body.gaia-v2 .g-super-home .g-feature-event .g-feature-event__art{height:auto !important;
    max-height:none;min-height:0}
  body.gaia-v2 .g-super-home .g-super-hero .g-super-hero__intro{padding:44px 48px 52px !important}
  body.gaia-v2 .g-super-home .g-feature-event{flex-direction:column !important;
    align-items:stretch;min-height:0}
  body.gaia-v2 .g-super-home .g-feature-event .g-feature-event__art::after{
    background:linear-gradient(180deg,transparent 60%,rgba(4,7,10,.5) 100%)}
  /* Body type, both button pairs and the free-tools grid live in the
     min-width:900px block at the end of this file — that is where the columns
     actually pair up, and one owner beats two. */
}




/* ============================================================================
   Paired columns — from 900px, which is where gaia-fit's own grid puts the
   hero beside the event and Try Gaia beside the ecosystem. These rules were
   first written at 1060px, which left the 900–1059 band with the very faults
   they fix: at 1024 the event ran 52px taller than the hero and Try Gaia
   carried 597px of empty card under a single row of four tiles.
   ========================================================================= */
@media (min-width:900px){
  /* Both columns end level. The event card could not do this while its poster
     was cropped — a tall panel cut the lettering to "alers / ATE / TRANSFOR" —
     but contained, a taller band simply shows the poster larger. */
  body.gaia-v2 .g-super-home > .g-feature-event{align-self:stretch !important;
    height:100% !important;min-height:0}
  /* The banner absorbs the extra height; the details keep their own. The floor
     is low enough that the event's own content can never define the row —
     when it did, the hero sat short beside it at 320px against 554px. */
  body.gaia-v2 .g-super-home .g-feature-event .g-feature-event__art{flex:1 1 auto !important;
    width:100%;height:auto !important;min-height:140px}
  body.gaia-v2 .g-super-home .g-feature-event .g-feature-event__art img{object-fit:contain}

  /* Matching the hero's height left the card's contents behind: a 19px title
     against the hero's 38px, and two buttons hugging their own text at 112px
     and 97px inside a 517px row. */
  body.gaia-v2 .g-super-home .g-feature-event__body{gap:6px !important;
    padding:clamp(18px,2vw,24px) clamp(20px,2.2vw,28px) clamp(20px,2.2vw,26px) !important}
  body.gaia-v2 .g-super-home .g-feature-event__kicker{font-size:11.5px !important;
    letter-spacing:.09em}
  body.gaia-v2 .g-super-home .g-feature-event__title{
    font-size:clamp(19px,2vw,26px) !important;line-height:1.2 !important}
  body.gaia-v2 .g-super-home .g-feature-event__meta{
    font-size:clamp(13px,1.1vw,14.5px) !important;line-height:1.45 !important}

  /* Equal halves in both cards. The hero's pair and the event's pair are the
     same control sitting side by side, so any difference between them reads as
     a mistake rather than a choice. */
  body.gaia-v2 .g-super-home .g-feature-event__actions{margin-top:14px !important;
    gap:12px !important;flex-wrap:nowrap !important}
  body.gaia-v2 .g-super-home .g-super-discover{gap:12px !important}
  /* One width for all four buttons. Left to flex:1 they filled their own card,
     and the two cards are different widths (1.12fr against 1fr) — so the
     hero's pair came out 189px and the event's 161px, side by side. */
  body.gaia-v2 .g-super-home .g-feature-event__actions .g-btn,
  body.gaia-v2 .g-super-home .g-super-discover .g-btn{
    flex:0 0 auto !important;width:clamp(150px,13.5vw,190px) !important;
    min-width:0;max-width:none;justify-content:center !important;
    font-size:clamp(13px,1.05vw,14.5px) !important;
    padding:12px 16px !important;min-height:48px}

  /* Try Gaia today sits beside a three-row ecosystem column, so one row of
     four tiles left the card mostly empty. Two by two, stretched to the row's
     height — the tiles get roomier rather than the card getting emptier. */
  body.gaia-v2 .g-super-home .g-free-tools{display:flex !important;
    flex-direction:column;min-height:0}
  body.gaia-v2 .g-super-home .g-free-tools__grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    flex:1 1 auto;align-content:stretch;gap:14px !important}
  body.gaia-v2 .g-super-home .g-free-tool{min-height:0 !important;height:100%;
    justify-content:center}
}

/* One height for the paired row, shared by both cards.

   Neither card owned it before. The hero kept the single-column 40dvh cap —
   sized so two *stacked* cards clear the tab bar, which is the wrong
   constraint once they sit side by side — and the event had no definite
   height at all, so its <img> at natural aspect defined the row: 554px of
   event beside 416px of hero at 1024. Giving both the same explicit height
   settles it, and the event's banner flexes into whatever the body leaves. */
@media (min-width:900px){
  body.gaia-v2 .g-super-home{--pair-h:clamp(400px,52dvh,560px)}
  body.gaia-v2 .g-super-home > .g-super-hero,
  body.gaia-v2 .g-super-home > .g-feature-event{
    aspect-ratio:auto !important;height:var(--pair-h) !important;
    min-height:0 !important;max-height:none !important}
}
@media (min-width:1060px){
  body.gaia-v2 .g-super-home{--pair-h:clamp(420px,calc(100dvh - 210px),680px)}
}

/* The header heads the content, so it shares the content's gutter. Left to
   itself it ran 22px wider at 920px and 4px narrower at 1440px — the brand and
   the Menu button drifting out of line with the column beneath them at almost
   every width. --fit-pad is that gutter, already tracking each breakpoint. */
body.gaia-v2 .g-topbar{padding-left:var(--fit-pad) !important;
  padding-right:var(--fit-pad) !important}


/* Status-bar safe area, definitively. In a standalone PWA with the translucent
   status bar the app draws under the iPhone clock, so the header MUST reserve
   env(safe-area-inset-top). Multiple .g-topbar owners meant the winning rule
   sometimes lacked it and the logo/menu overlapped the clock. This one wins. */
body.gaia-v2 .g-topbar,
body.gaia-app .g-topbar {
  padding-top: max(12px, env(safe-area-inset-top, 12px)) !important;
}
@media (display-mode: standalone) {
  .gaia-booking-modal__head { padding-top: max(0px, env(safe-area-inset-top, 0px)); }
}


/* Featured event art: subtract the safe-area insets.
   The art height is vh/dvh based, but vh cannot see the status-bar and
   home-indicator safe areas a standalone install adds. On a notched iPhone that
   stole vertical space and pushed the event's Buy Ticket / Event details buttons
   under the floating tab bar on the landing screen. Subtracting the insets keeps
   the card compact enough for the buttons to stay visible; in a normal browser
   the insets are 0 so the art is unchanged. Appended last so it wins the several
   older art-height rules above. */
body.gaia-v2 .g-super-home .g-feature-event .g-feature-event__art {
  height: clamp(120px, calc(22vh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)), 180px) !important;
  height: clamp(120px, calc(22dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)), 180px) !important;
}


/* ── Two visual fixes (2026-08-20) ─────────────────────────────────────────
   Reported clipping/overlap; verified in a real browser and fixed at source.
   (The splash title and the wellness tool cards were also reported but use
   white-space:normal and do NOT clip even at 320px — left untouched.) */

/* Hero CTAs stack on very narrow screens. "Check my energy" / "Ask Gaia" are two
   50%-width, white-space:nowrap buttons; below ~360px the label clips (e.g. at
   320px). Stack them full-width there so the text always fits — iPhone-SE width
   (375) and up keep the side-by-side row. The base layout forces
   flex-direction:row !important, so this override matches its specificity, adds
   !important, and is appended last to win the cascade. */
@media (max-width: 360px) {
  body.gaia-v2 .g-super-home .g-super-hero .g-super-discover,
  body.gaia-v2 .g-super-home .g-super-discover {
    flex-direction: column !important;
  }
  body.gaia-v2 .g-super-home .g-super-discover > .g-btn {
    width: 100% !important;
  }
}

/* PWA install prompt on desktop. The bottom card is centered (max-width 420),
   which floated over the middle of the page on wide screens. Dock it to the
   bottom-right as a toast on desktop so it never covers content; on mobile it
   stays centered and full-width as before. */
@media (min-width: 768px) {
  .g-install { justify-content: flex-end; padding-right: 20px; padding-left: 20px; }
  .g-install__panel { max-width: 380px; }
}


/* ── Logged-out home rework (2026-08-20) ───────────────────────────────────── */
/* Hero: a single full-width primary action for guests. */
body.gaia-v2 .g-super-home .g-super-hero .g-super-discover--solo { display: block !important; }
body.gaia-v2 .g-super-home .g-super-hero .g-super-discover--solo > .g-btn { width: 100%; }

/* Header: Sign in pill for guests, sitting beside the Menu button. */
body.gaia-v2 .g-topbar__actions.gaia-header-actions { display: flex; align-items: center; gap: 8px; }
.gaia-header-signin {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 36px; height: 36px; min-width: 0; padding: 0; border: 0; border-radius: 11px;
  background: transparent; color: inherit; font-size: 20px; line-height: 1;
  cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color .15s ease, transform .12s ease;
}
.gaia-header-signin:hover { background: rgba(125, 217, 86, .12); }
.gaia-header-signin:active { transform: scale(.92); }


/* ── First-run tour (spotlight) ─────────────────────────────────────────────── */
.gaia-tour { position: fixed; inset: 0; z-index: 1000; }
.gaia-tour__spot {
  position: fixed; border-radius: 18px; border: 2px solid var(--g-accent, #A6E84B);
  box-shadow: 0 0 0 9999px rgba(4,8,6,.48), 0 0 12px rgba(166,232,75,.12);
  transition: left .32s cubic-bezier(.2,.8,.3,1), top .32s cubic-bezier(.2,.8,.3,1),
    width .32s cubic-bezier(.2,.8,.3,1), height .32s cubic-bezier(.2,.8,.3,1);
  pointer-events: none;
}
.gaia-tour__card {
  position: fixed; left: 16px; right: 16px; max-width: 420px; margin: 0 auto;
  background: #0e1a11; border: 1px solid var(--g-line-strong, rgba(190,240,170,.18));
  border-radius: 20px; padding: 18px; box-shadow: 0 20px 50px rgba(0,0,0,.6);
}
.gaia-tour__eyebrow { font-size: 10.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--g-accent, #A6E84B); }
.gaia-tour__title { font-family: var(--g-font-serif, "Cormorant Garamond", serif); font-weight: 600; font-size: 22px; margin-top: 6px; line-height: 1.1; }
.gaia-tour__body { font-size: 13.5px; color: var(--g-text-dim, #93A597); margin-top: 6px; line-height: 1.45; }
.gaia-tour__row { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; gap: 12px; }
.gaia-tour__dots { display: flex; gap: 6px; }
.gaia-tour__dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--g-line-strong, rgba(190,240,170,.18)); display: block; transition: width .2s, background .2s; }
.gaia-tour__dots i.on { width: 20px; border-radius: 99px; background: var(--g-accent, #A6E84B); }
.gaia-tour__btns { display: flex; gap: 8px; align-items: center; }
.gaia-tour__skip { background: none; border: none; color: var(--g-text-dim, #93A597); font-size: 12.5px; font-weight: 600; cursor: pointer; }
.gaia-tour__next { background: var(--g-accent, #A6E84B); color: #0a1705; border: none; border-radius: 999px; padding: 9px 18px; font-weight: 700; font-size: 13px; cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .gaia-tour__spot { transition: none; } }


/* ── Today's sky — illumination stat (replaces the ring) ────────────────────── */
.g-sky__illum { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; line-height: 1; }
.g-sky__illum strong { font-family: var(--g-font-serif, "Cormorant Garamond", serif); font-weight: 600; font-size: 36px; letter-spacing: -.02em; color: var(--g-text, #EAF3E6); }
.g-sky__illum strong i { font-style: normal; font-weight: 600; font-size: 17px; color: var(--sky-tint, #A78BFA); vertical-align: super; margin-left: 1px; }
.g-sky__illum span { font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--g-text-dim, #93A597); }

/* ── Numerology ───────────────────────────────────────────────────────────
   Three readings sit in one panel, so each is a row rather than a poster:
   the number, then the label and theme on a single line, then the practice.
   At poster scale the three of them ran 852px — taller than the phone the
   panel opens on — which is why the type here tracks the app's own 15px
   section titles instead of sitting above them. */
.g-num__intro { margin: 0 0 12px; font-size: 13px; line-height: 1.5; color: var(--g-text-dim, #93A597); }
.g-num__row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.g-num__row .g-input { flex: 1 1 160px; min-width: 0; }
.g-num__note, .g-num__foot { margin: 9px 0 0; font-size: 12px; line-height: 1.45; color: var(--g-text-muted, #7C8C80); }
.g-num__err { margin: 8px 0 0; font-size: 12.5px; color: #F5A3A3; }

.g-num__cards { display: grid; gap: 1px; background: var(--g-line, rgba(190,240,170,0.14));
  border: 1px solid var(--g-line, rgba(190,240,170,0.14)); border-radius: 14px; overflow: hidden; }
@media (min-width: 760px) { .g-num__cards { grid-template-columns: repeat(3, 1fr); } }

.g-num__card { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px;
  background: var(--g-surface, #0f1a12); }
.g-num__figure { flex: 0 0 auto; min-width: 26px; text-align: center;
  font-family: var(--g-font-serif, "Cormorant Garamond", serif); font-weight: 600;
  font-size: 25px; line-height: 1.15; color: var(--g-accent, #A6E84B); }
.g-num__body { min-width: 0; flex: 1; }
.g-num__head { margin: 0; display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
.g-num__kind { font-size: 9.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--g-text-muted, #7C8C80); }
.g-num__master { font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  padding: 1px 6px; border-radius: 999px; color: var(--g-accent, #A6E84B);
  background: color-mix(in srgb, var(--g-accent, #A6E84B) 14%, transparent); }
.g-num__theme { font-family: var(--g-font-serif, "Cormorant Garamond", serif); font-weight: 600;
  font-size: 16px; line-height: 1.2; color: var(--g-text, #E8F0E4); }
.g-num__meta { margin: 1px 0 0; font-size: 11.5px; color: var(--g-text-muted, #7C8C80); }
.g-num__practice { margin: 6px 0 0; font-size: 13px; line-height: 1.45; }
.g-num__journal { margin: 3px 0 0; font-size: 12px; line-height: 1.45; font-style: italic;
  color: var(--g-text-dim, #93A597); }

.g-num__echo { margin: 9px 0 0; font-size: 12px; line-height: 1.45; color: var(--g-text-dim, #93A597); }
.g-num__echo b { color: var(--g-accent, #A6E84B); font-weight: 600; }
.g-num__again { background: none; border: 0; padding: 0; font: inherit; cursor: pointer;
  color: var(--g-accent, #A6E84B); text-decoration: underline; }
.g-num__again:focus-visible { outline: 2px solid var(--g-accent, #A6E84B); outline-offset: 2px; }


/* ── Membership upgrade card (free members) ─────────────────────────────────── */
.g-upgrade { position: relative; overflow: hidden; border-radius: 24px; padding: 24px 20px;
  background: linear-gradient(150deg, #14260f 0%, #0a140d 62%);
  border: 1px solid rgba(166,232,75,.18); box-shadow: 0 22px 54px -26px rgba(166,232,75,.28); }
.g-upgrade__aura { position: absolute; top: -46%; right: -22%; width: 300px; height: 300px; border-radius: 50%;
  background: radial-gradient(circle, rgba(166,232,75,.22), transparent 68%); pointer-events: none; }
.g-upgrade > *:not(.g-upgrade__aura) { position: relative; }
.g-upgrade__kicker { font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--g-accent, #A6E84B); }
.g-upgrade__title { font-family: var(--g-font-serif, "Cormorant Garamond", serif); font-weight: 600; font-size: 28px; margin-top: 8px; line-height: 1.05; }
.g-upgrade__lede { color: var(--g-text-dim, #93A597); font-size: 14px; line-height: 1.5; margin-top: 10px; max-width: 42ch; }
.g-upgrade__tiers { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.g-upgrade__tier { font-size: 11px; font-weight: 700; letter-spacing: .03em; padding: 6px 13px; border-radius: 999px;
  border: 1px solid var(--g-line, rgba(190,240,170,.10)); color: var(--g-text-dim, #93A597); }
.g-upgrade__tier.is-current { border-color: rgba(166,232,75,.42); color: var(--g-accent, #A6E84B); background: rgba(166,232,75,.08); }
.g-upgrade__cta { margin-top: 18px; width: 100%; }
@media (min-width: 720px) { .g-upgrade__cta { width: auto; min-width: 260px; } }


/* ── Desktop home grid (authoritative) ──────────────────────────────────────
   Placed here (last-loaded, body.gaia-v2, !important) so it beats the older
   grid rules. Only hero + next-gathering are pinned as the feature row; every
   other section runs the full width, tools become one row of four, the home is
   capped and centred. Robust to guest/member order + section-set differences. */
@media (min-width: 1060px) {
  body.gaia-v2 .g-super-home {
    grid-template-columns: minmax(0, 1.32fr) minmax(0, 1fr) !important;
    max-width: 1180px !important; margin-inline: auto !important; align-items: start !important;
  }
  body.gaia-v2 .g-super-home > .g-super-hero { grid-column: 1 !important; grid-row: 1 !important; }
  body.gaia-v2 .g-super-home > .g-feature-event,
  body.gaia-v2 .g-super-home > .g-super-event { grid-column: 2 !important; grid-row: 1 !important; height: 100%; margin: 0; }
  body.gaia-v2 .g-super-home > [data-sky-host],
  body.gaia-v2 .g-super-home > .g-upgrade,
  body.gaia-v2 .g-super-home > .g-free-tools,
  body.gaia-v2 .g-super-home > .g-super-discover-gaia { grid-column: 1 / -1 !important; }
  body.gaia-v2 .g-super-home > .g-free-tools .g-free-tools__grid { grid-template-columns: repeat(4, 1fr) !important; }
  body.gaia-v2 .g-super-home > [data-sky-host] .g-sky { max-width: 900px; }
}

/* ============================================================= */
/* Daily Energy card + Shareable cards (Phase: Daily Energy)      */
/* ============================================================= */
.g-de {
  position: relative; overflow: hidden;
  border-radius: 22px;
  padding: 15px 16px 15px;
  margin: 0 0 4px;
  background:
    radial-gradient(120% 90% at 50% -10%, color-mix(in srgb, var(--de-c, #A6E84B) 20%, transparent), transparent 60%),
    var(--g-card-bg, rgba(20, 30, 22, 0.72));
  border: 1px solid var(--g-line, rgba(190, 240, 170, 0.14));
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.34);
  isolation: isolate;
}
.g-de__aura {
  position: absolute; inset: -40% 20% auto; height: 300px; z-index: -1;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--de-c, #A6E84B) 30%, transparent), transparent);
  filter: blur(24px); opacity: 0.7; pointer-events: none;
}
.g-de__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.g-de__kicker {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: color-mix(in srgb, var(--de-c, #A6E84B) 78%, #ffffff);
}
.g-de__focus { display: flex; align-items: center; gap: 14px; margin-top: 8px; }
.g-de__orb {
  position: relative; flex: 0 0 auto; width: 56px; height: 56px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffffff, var(--de-c, #A6E84B) 55%, color-mix(in srgb, var(--de-c, #A6E84B) 40%, #000) 100%);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--de-c, #A6E84B) 16%, transparent), 0 8px 22px color-mix(in srgb, var(--de-c, #A6E84B) 40%, transparent);
}
.g-de__orb-core { position: absolute; inset: 0; border-radius: 50%; animation: g-de-pulse 3.6s ease-in-out infinite; box-shadow: inset 0 0 18px rgba(255,255,255,0.5); }
@keyframes g-de-pulse { 0%,100% { transform: scale(1); opacity: 0.85; } 50% { transform: scale(1.06); opacity: 1; } }
.g-de__title { font-family: var(--g-font-serif, "Cormorant Garamond", serif); font-weight: 600; font-size: 26px; line-height: 1.08; margin: 0; text-wrap: balance; }
.g-de__chakra { font-size: 12.5px; color: var(--g-text-dim, #93A597); margin-top: 3px; }
.g-de__tip { font-size: 14.5px; line-height: 1.45; color: var(--g-text, #E7EFE6); margin: 10px 0 0; }
.g-de__practice { margin-top: 10px; padding: 10px 12px; border-radius: 14px; background: rgba(255,255,255,0.04); border: 1px solid var(--g-line, rgba(190,240,170,0.12)); }
.g-de__label { font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--g-text-dim, #93A597); margin: 0 0 4px; }
.g-de__practice p { margin: 0; font-size: 14px; line-height: 1.5; }
.g-de__track { display: flex; align-items: center; gap: 14px; margin-top: 16px; }
.g-de__streak { display: inline-flex; align-items: baseline; gap: 5px; font-size: 22px; font-weight: 700; color: #F4F7F1; }
.g-de__streak i { color: #FF8A3D; font-size: 22px; }
.g-de__streak small { font-size: 11px; font-weight: 600; color: var(--g-text-dim, #93A597); letter-spacing: 0.02em; }
.g-de__streak--rest { font-size: 13px; font-weight: 500; color: var(--g-text-dim, #93A597); }
.g-de__days { display: flex; gap: 7px; margin-left: auto; }
.g-de__day { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.g-de__day i { width: 12px; height: 12px; border-radius: 50%; background: rgba(255,255,255,0.10); display: block; transition: background 0.25s, box-shadow 0.25s; }
.g-de__day.is-done i { background: var(--de-c, #A6E84B); box-shadow: 0 0 10px color-mix(in srgb, var(--de-c, #A6E84B) 60%, transparent); }
.g-de__day em { font-size: 9px; font-style: normal; color: var(--g-text-dim, #93A597); }
.g-de__milestone { margin: 12px 0 0; font-size: 13px; color: color-mix(in srgb, var(--de-c, #A6E84B) 80%, #fff); font-weight: 600; }
.g-de__actions { display: flex; gap: 10px; margin-top: 12px; }
.g-de__actions .g-btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.g-de__done.is-done { background: color-mix(in srgb, var(--de-c, #A6E84B) 22%, transparent); color: #F4F7F1; border: 1px solid color-mix(in srgb, var(--de-c, #A6E84B) 45%, transparent); }
.g-de__journal { margin-top: 14px; }
.g-de__journal summary { cursor: pointer; font-size: 12.5px; color: var(--g-text-dim, #93A597); font-weight: 600; list-style: none; }
.g-de__journal summary::-webkit-details-marker { display: none; }
.g-de__journal summary::before { content: "＋ "; color: var(--de-c, #A6E84B); }
.g-de__journal[open] summary::before { content: "－ "; }
.g-de__journal p { margin: 8px 0 0; font-size: 14px; line-height: 1.5; font-style: italic; color: var(--g-text, #E7EFE6); }
.g-de__personalise { margin-top: 11px; padding-top: 11px; border-top: 1px solid var(--g-line, rgba(190,240,170,0.12)); }
.g-de__personalise p { margin: 0 0 9px; font-size: 13.5px; line-height: 1.5; color: var(--g-text-dim, #93A597); }
.g-de--preview .g-de__title { font-size: 24px; }
.g-de--celebrate { animation: g-de-cel 0.6s ease; }
@keyframes g-de-cel { 0% { transform: scale(1); } 30% { transform: scale(1.012); } 100% { transform: scale(1); } }
.g-de--loading .g-de__skeleton { height: 120px; border-radius: 14px; margin-top: 12px; background: linear-gradient(90deg, rgba(255,255,255,0.04), rgba(255,255,255,0.09), rgba(255,255,255,0.04)); background-size: 200% 100%; animation: g-de-shimmer 1.3s linear infinite; }
@keyframes g-de-shimmer { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) {
  .g-de__orb-core, .g-de--celebrate, .g-de--loading .g-de__skeleton { animation: none; }
}

/* Share modal */
.gaia-share-modal { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(4, 8, 5, 0.72); backdrop-filter: blur(6px); }
.gaia-share-modal__panel { position: relative; width: 100%; max-width: 360px; max-height: 92vh; overflow-y: auto; border-radius: 22px; padding: 20px 18px calc(18px + env(safe-area-inset-bottom, 0px)); background: var(--g-card-bg, #101A12); border: 1px solid var(--g-line, rgba(190,240,170,0.16)); box-shadow: 0 26px 60px rgba(0,0,0,0.5); }
.gaia-share-modal__kicker { font-size: 10.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--g-accent, #A6E84B); margin: 0 0 12px; }
.gaia-share-modal__preview { border-radius: 16px; overflow: hidden; background: #070C08; }
.gaia-share-modal__preview canvas { display: block; width: 100%; height: auto; }
.gaia-share-modal__toggle { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 13.5px; color: var(--g-text, #E7EFE6); cursor: pointer; }
.gaia-share-modal__note { margin: 10px 0 0; font-size: 11.5px; line-height: 1.45; color: var(--g-text-dim, #93A597); }
.gaia-share-modal__actions { margin-top: 14px; }
.gaia-share-modal__actions .g-btn { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.gaia-share-modal__status { margin: 10px 0 0; font-size: 12.5px; color: var(--g-accent, #A6E84B); min-height: 1em; text-align: center; }

@media (min-width: 1060px) {
  .g-super-home > [data-daily-host] { grid-column: 1 / -1; }
}

.g-de__source { margin: 14px 0 0; font-size: 10.5px; line-height: 1.4; color: var(--g-text-dim, #93A597); opacity: 0.72; }

/* Quick personalisation sheet (onboarding "aha") */
.gaia-onboard-modal { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(4, 8, 5, 0.72); backdrop-filter: blur(6px); }
.gaia-onboard-modal__panel { position: relative; width: 100%; max-width: 380px; max-height: 92vh; overflow-y: auto; border-radius: 22px; padding: 22px 20px calc(20px + env(safe-area-inset-bottom, 0px)); background: var(--g-card-bg, #101A12); border: 1px solid var(--g-line, rgba(190,240,170,0.16)); box-shadow: 0 26px 60px rgba(0,0,0,0.5); }
.g-onb__kicker { font-size: 10.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--g-accent, #A6E84B); margin: 0; }
.g-onb__title { font-family: var(--g-font-serif, "Cormorant Garamond", serif); font-weight: 600; font-size: 28px; line-height: 1.05; margin: 6px 0 0; }
.g-onb__lead { font-size: 13.5px; line-height: 1.5; color: var(--g-text-dim, #93A597); margin: 8px 0 16px; }
.g-onb__row { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; font-size: 12.5px; color: var(--g-text-dim, #93A597); }
.g-onb__row input, .gaia-onboard-modal select, .gaia-onboard-modal input[type=number] {
  width: 100%; padding: 12px 14px; border-radius: 12px; font-size: 15px;
  background: rgba(255,255,255,0.05); border: 1px solid var(--g-line, rgba(190,240,170,0.16)); color: var(--g-text, #E7EFE6);
}
.g-onb__dob { margin-bottom: 14px; }
.g-onb__dob-label { display: block; font-size: 12.5px; color: var(--g-text-dim, #93A597); margin-bottom: 5px; }
.g-onb__dob-fields { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 8px; }
.g-onb__dob-fields select, .g-onb__dob-fields input { min-width: 0; }
.gaia-onboard-modal select:focus, .gaia-onboard-modal input:focus { outline: 2px solid color-mix(in srgb, var(--g-accent, #A6E84B) 60%, transparent); outline-offset: 1px; }
.g-onb__submit { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 7px; margin-top: 4px; }
.g-onb__status { margin: 10px 0 0; font-size: 12.5px; text-align: center; color: var(--g-accent, #A6E84B); min-height: 1em; }
.g-onb__status.is-error { color: #ff8a8a; }
.g-onb__note { margin: 10px 0 0; font-size: 11px; line-height: 1.45; color: var(--g-text-dim, #93A597); opacity: 0.85; text-align: center; }

/* Guest 'Make Gaia Healers yours' join section (truthful benefits, in-app Join) */

/* ============================================================= */
/* Find a Gaia Healer — practitioner directory (real data)       */
/* ============================================================= */
.g-directory .g-page__head { margin-bottom: 4px; }
.g-dir__loading, .g-dir__empty { color: var(--g-text-dim, #93A597); font-size: 14px; padding: 24px 4px; text-align: center; }
.g-dir__unavailable { text-align: center; padding: 40px 16px; color: var(--g-text-dim, #93A597); }
.g-dir__unavailable i { font-size: 34px; color: var(--g-accent, #A6E84B); opacity: 0.7; display: block; margin-bottom: 10px; }
.g-dir__unavailable p { font-size: 14px; margin: 0 0 14px; }

.g-dir__controls { display: flex; flex-direction: column; gap: 10px; margin: 8px 0 12px; }
.g-dir__search { position: relative; display: flex; align-items: center; }
.g-dir__search i { position: absolute; left: 13px; color: var(--g-text-dim, #93A597); font-size: 18px; pointer-events: none; }
.g-dir__search input { width: 100%; padding: 12px 14px 12px 40px; border-radius: 14px; font-size: 15px; background: rgba(255,255,255,0.05); border: 1px solid var(--g-line, rgba(190,240,170,0.16)); color: var(--g-text, #E7EFE6); }
.g-dir__search input:focus { outline: 2px solid color-mix(in srgb, var(--g-accent, #A6E84B) 55%, transparent); outline-offset: 1px; }
.g-dir__fchips, .g-dir__schips { display: flex; gap: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 2px; scrollbar-width: none; }
.g-dir__fchips::-webkit-scrollbar, .g-dir__schips::-webkit-scrollbar { display: none; }
/* These were 35px tall against a 44px minimum for a comfortable thumb. Height
   is raised without touching the padding, type or radius, so the chips look
   the same and only the tap area grows. */
.g-dir-fchip, .g-dir-schip { flex: 0 0 auto; padding: 7px 13px; border-radius: 999px; font-size: 12.5px; font-weight: 600;
  min-height: 44px; display: inline-flex; align-items: center; white-space: nowrap; cursor: pointer;
  background: rgba(255,255,255,0.04); border: 1px solid var(--g-line, rgba(190,240,170,0.14)); color: var(--g-text-dim, #93A597); }
.g-dir-fchip.is-on, .g-dir-schip.is-on { background: color-mix(in srgb, var(--g-accent, #A6E84B) 22%, transparent); color: #F4F7F1; border-color: color-mix(in srgb, var(--g-accent, #A6E84B) 45%, transparent); }
.g-dir__count { font-size: 12px; color: var(--g-text-dim, #93A597); margin: 2px 2px 10px; font-weight: 600; letter-spacing: 0.02em; }

.g-dir__map { height: 260px; border-radius: 16px; overflow: hidden; margin-bottom: 14px; border: 1px solid var(--g-line, rgba(190,240,170,0.14)); background: #0c130d; }
.leaflet-container { background: #0c130d; font: inherit; }
.leaflet-tile { filter: saturate(0.85) brightness(0.9); }
.leaflet-popup-content-wrapper, .leaflet-popup-tip { background: #16211a; color: var(--g-text, #E7EFE6); box-shadow: 0 10px 30px rgba(0,0,0,0.4); }
.leaflet-popup-content { margin: 12px 14px; }
.g-dir-pop { display: flex; flex-direction: column; gap: 3px; min-width: 150px; }
.g-dir-pop strong { font-size: 14px; }
.g-dir-pop span { font-size: 12px; color: var(--g-text-dim, #93A597); }
.g-dir-pop em { font-size: 11.5px; color: var(--g-accent, #A6E84B); font-style: normal; }
.g-dir-pop button { margin-top: 6px; padding: 6px 10px; border-radius: 8px; font-size: 12px; font-weight: 700; cursor: pointer; background: var(--g-accent, #A6E84B); color: #0a0f0a; border: none; }
.leaflet-control-attribution { background: rgba(0,0,0,0.5) !important; color: #93A597 !important; }
.leaflet-control-attribution a { color: #A6E84B !important; }

.g-dir__list { display: grid; gap: 10px; grid-template-columns: 1fr; }
.g-dir-card { display: flex; gap: 12px; text-align: left; width: 100%; padding: 12px; border-radius: 16px; cursor: pointer;
  background: var(--g-card-bg, rgba(20,30,22,0.6)); border: 1px solid var(--g-line, rgba(190,240,170,0.12)); transition: border-color 0.15s, transform 0.1s; }
.g-dir-card:hover { border-color: color-mix(in srgb, var(--g-accent, #A6E84B) 40%, transparent); }
.g-dir-card:active { transform: scale(0.995); }
.g-dir-card__photo { flex: 0 0 auto; }
.g-dir-card__img { width: 60px; height: 60px; border-radius: 12px; object-fit: cover; display: block; }
.g-dir-avatar { width: 60px; height: 60px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 20px; text-transform: uppercase;
  color: #0a0f0a; background: linear-gradient(135deg, var(--g-accent, #A6E84B), #6fb03a); }
.g-dir-card__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.g-dir-card__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.g-dir-card__top strong { font-size: 15px; color: var(--g-text, #E7EFE6); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g-dir-card__rating { flex: 0 0 auto; font-size: 12px; font-weight: 700; color: #FFC24B; display: inline-flex; align-items: center; gap: 3px; }
.g-dir-card__rating small { color: var(--g-text-dim, #93A597); font-weight: 500; }
.g-dir-card__loc { font-size: 12px; color: var(--g-text-dim, #93A597); display: inline-flex; align-items: center; gap: 4px; }
.g-dir-card__specs { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 1px; }
.g-dir-chip { font-size: 10.5px; padding: 3px 8px; border-radius: 999px; background: rgba(255,255,255,0.06); color: var(--g-text-dim, #cfe0c8); white-space: nowrap; }
.g-dir-card__avail { align-self: flex-start; margin-top: 2px; font-size: 11px; font-weight: 600; color: var(--g-accent, #A6E84B); display: inline-flex; align-items: center; gap: 4px; }

/* Profile modal */
.gaia-dirprofile-modal { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center; padding: 18px; background: rgba(4,8,5,0.74); backdrop-filter: blur(6px); }
.gaia-dirprofile__panel { position: relative; width: 100%; max-width: 400px; max-height: 90vh; overflow-y: auto; border-radius: 22px; padding: 22px 20px calc(20px + env(safe-area-inset-bottom, 0px)); background: var(--g-card-bg, #101A12); border: 1px solid var(--g-line, rgba(190,240,170,0.16)); box-shadow: 0 26px 60px rgba(0,0,0,0.5); }
.gaia-dirprofile__hero { display: flex; gap: 14px; align-items: center; margin-bottom: 14px; }
.gaia-dirprofile__img { width: 76px; height: 76px; border-radius: 16px; object-fit: cover; }
.gaia-dirprofile__hero h2 { font-family: var(--g-font-serif, "Cormorant Garamond", serif); font-weight: 600; font-size: 24px; line-height: 1.05; margin: 0 0 4px; }
.gaia-dirprofile__loc { font-size: 13px; color: var(--g-text-dim, #93A597); margin: 0 0 6px; display: inline-flex; align-items: center; gap: 4px; }
.gaia-dirprofile__specs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.gaia-dirprofile__actions { display: flex; flex-direction: column; gap: 8px; }
.gaia-dirprofile__actions .g-btn { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.gaia-dirprofile__src { margin: 14px 0 0; font-size: 11px; color: var(--g-text-dim, #93A597); opacity: 0.8; text-align: center; }

@media (min-width: 720px) {
  .g-dir__list { grid-template-columns: 1fr 1fr; }
  .g-dir__map { height: 340px; }
}
@media (min-width: 1060px) {
  .g-dir__list { grid-template-columns: 1fr 1fr 1fr; }
}

/* My Gaia Healers Journey — real credentials (derived from tags/membership) */
.g-jcreds { margin: 4px 0 10px; }
.g-jcreds__grid { display: grid; gap: 10px; grid-template-columns: 1fr; margin-top: 10px; }
@media (min-width: 560px) { .g-jcreds__grid { grid-template-columns: 1fr 1fr; } }
.g-jcred { display: flex; align-items: center; gap: 13px; padding: 14px 15px; border-radius: 16px;
  background: radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--g-accent, #A6E84B) 16%, transparent), transparent 60%), var(--g-card-bg, rgba(20,30,22,0.6));
  border: 1px solid color-mix(in srgb, var(--g-accent, #A6E84B) 30%, var(--g-line, rgba(190,240,170,0.14))); }
.g-jcred__ic { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 22px; color: #0a0f0a; background: linear-gradient(135deg, var(--g-accent, #A6E84B), #6fb03a); }
.g-jcred__body { display: flex; flex-direction: column; min-width: 0; }
.g-jcred__body strong { font-size: 14.5px; color: var(--g-text, #E7EFE6); line-height: 1.2; }
.g-jcred__body small { font-size: 11.5px; color: var(--g-text-dim, #93A597); margin-top: 2px; }

/* ================= UI polish pass ================= */
/* Action button rows wrap gracefully — a button never spills past its frame. */
.g-de__actions, .g-super-actions, .g-card__actions, .gaia-share-modal__actions, .gaia-onboard-modal .g-super-actions, .g-feature-event__actions, .gaia-dirprofile__actions, .g-pass__actions, .g-upgrade__tiers { flex-wrap: wrap; }

/* Close (×) buttons: centre the glyph (was baseline-offset) + a real hover state. */
.gaia-sheet-close, .gaia-booking-modal__close, .gaia-assist__close, .gaia-portal-workspace__close {
  display: inline-flex; align-items: center; justify-content: center; padding: 0; line-height: 1;
}
.gaia-sheet-close { transition: background .15s ease, color .15s ease, border-color .15s ease; }
.gaia-sheet-close:hover, .gaia-sheet-close:focus-visible {
  background: color-mix(in srgb, var(--g-accent, #A6E84B) 18%, transparent);
  color: var(--g-text, #E7EFE6);
  border-color: color-mix(in srgb, var(--g-accent, #A6E84B) 45%, transparent);
}

/* Community transition sheet (Mighty-hosted communities) */
.gaia-transition-modal { position: fixed; inset: 0; z-index: 1250; display: flex; align-items: center; justify-content: center; padding: 22px; background: rgba(4,8,5,0.74); backdrop-filter: blur(6px); }
.gaia-transition__panel { width: 100%; max-width: 360px; border-radius: 22px; padding: 24px 22px calc(22px + env(safe-area-inset-bottom,0px)); background: var(--g-card-bg, #101A12); border: 1px solid var(--g-line, rgba(190,240,170,0.16)); box-shadow: 0 26px 60px rgba(0,0,0,0.5); text-align: center; }
.gaia-transition__kicker { font-size: 10.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--g-accent, #A6E84B); margin: 0; }
.gaia-transition__title { font-family: var(--g-font-serif, 'Cormorant Garamond', serif); font-weight: 600; font-size: 26px; line-height: 1.1; margin: 6px 0 12px; }
.gaia-transition__body { font-size: 14px; line-height: 1.55; color: var(--g-text-dim, #93A597); margin: 0 0 20px; }
.gaia-transition__actions { display: flex; flex-direction: column; gap: 10px; }
.gaia-transition__actions .g-btn { width: 100%; }


/* ==== IA redesign: 6-tab bottom bar (Today·Energy·Academy · Assist · Community·Shop·You) ====
   Three labels per side, no truncation from 320px up. Tabs are content-sized
   (flex:0 1 auto) so short labels (Shop, You) hand their slack to the long one
   (Community); space-around keeps them evenly spread. Scoped to the phone bar
   only (the >=1000px side-rail keeps its own vertical sizing). */
@media (max-width: 999px) {
  .gaia-tabbar__inner .gaia-tabbar__group,
  body.gaia-v2 .gaia-tabbar__inner .gaia-tabbar__group { gap: 0; justify-content: space-around; }
  .gaia-tabbar__inner .gaia-tabbar__link,
  body.gaia-v2 .gaia-tabbar__inner .gaia-tabbar__link { flex: 0 1 auto !important; min-width: 0; padding-left: 0.14rem; padding-right: 0.14rem; }
  .gaia-tabbar__inner .gaia-tabbar__label,
  body.gaia-v2 .gaia-tabbar__inner .gaia-tabbar__label { font-size: 0.5rem !important; letter-spacing: -0.02em; }
  .gaia-tabbar__inner .gaia-tabbar__icon,
  body.gaia-v2 .gaia-tabbar__inner .gaia-tabbar__icon { width: 1.15rem; height: 1.15rem; }
}


/* ==== IA Stage 2: Energy "More" toolkit + Academy Library launch cards ==== */
.g-energy-more { margin-top: 22px; display: grid; gap: 16px; }
.g-energy-tool { margin: 0; }
.g-energy-launch { display: grid; gap: 12px; }
.g-energy-launch__card {
  display: flex; align-items: center; gap: 14px; width: 100%;
  text-align: left; padding: 14px 16px; font: inherit; color: inherit; cursor: pointer;
  border: 1px solid var(--super-line); border-radius: 20px; background: #0b160f;
  transition: border-color .15s ease, transform .15s ease;
}
.g-energy-launch__card:hover { border-color: var(--super-accent); }
.g-energy-launch__card:active { transform: scale(.99); }
.g-energy-launch__icon {
  display: grid; place-items: center; width: 44px; height: 44px; flex: none;
  border-radius: 14px; background: rgba(92, 184, 46, .14); color: var(--super-accent); font-size: 22px;
}
.g-energy-launch__body { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.g-energy-launch__body strong { font-size: 15px; font-weight: 700; }
.g-energy-launch__body small { color: var(--super-muted); font-size: 12px; }
.g-energy-launch__go { margin-left: auto; flex: none; color: var(--super-muted); font-size: 18px; }
.g-academy-library { margin-top: 18px; }


/* ==== Header: one compact row — [menu/back] | centered wordmark | [sign in/avatar] ==== */
.g-topbar { display: grid !important; grid-template-columns: minmax(44px, 1fr) auto minmax(44px, 1fr); align-items: center; column-gap: 6px; }
.g-topbar__nav,
.gaia-menu-button {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 36px; height: 36px; min-width: 0; padding: 0; border: 0; border-radius: 11px;
  background: transparent; color: inherit; font-size: 20px; line-height: 1; letter-spacing: normal;
  cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color .15s ease, transform .12s ease;
}
.g-topbar__nav { justify-self: start; }
.g-topbar__nav:hover,
.gaia-menu-button:hover { background: rgba(125, 217, 86, .12); }
.g-topbar__nav:active,
.gaia-menu-button:active { transform: scale(.92); }
/* Brand: small mark + wordmark, one line, optically centered on screen */
.g-topbar__brand--stack {
  justify-self: center; display: inline-flex; flex-direction: row; align-items: center; gap: 7px;
  text-decoration: none; line-height: 1; white-space: nowrap;
}
.g-topbar__brand--stack img { width: 22px; height: 22px; margin: 0; }
.g-topbar__brand--stack span { font-size: 15px; font-weight: 700; letter-spacing: .01em; }
/* Right zone: a single compact account action (Sign in guest / avatar member) */
.g-topbar__actions.gaia-header-actions { justify-self: end; display: inline-flex; align-items: center; flex-wrap: nowrap; }
.gaia-header-avatar {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 36px; height: 36px; padding: 0; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--g-line-strong, rgba(190,240,170,.22)); background: rgba(166,232,75,.12);
  color: var(--g-accent, #A6E84B); font-family: inherit; font-weight: 800; font-size: 15px; line-height: 1;
  -webkit-tap-highlight-color: transparent; transition: transform .12s ease;
}
.gaia-header-avatar:active { transform: scale(.94); }

/* ============================================================= */
/* Event carousel — the home "Next gathering" becomes a swipeable */
/* set of upcoming events, each with its own hero. Native         */
/* scroll-snap does the swipe; the dots reflect and drive it.     */
.g-event-carousel { position: relative; }
.g-event-carousel__track {
  display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch; scrollbar-width: none; overscroll-behavior-x: contain;
}
.g-event-carousel__track::-webkit-scrollbar { display: none; }
.g-event-carousel__slide { flex: 0 0 100%; min-width: 0; scroll-snap-align: start; }
.g-event-carousel__slide > .g-feature-event { height: 100%; margin: 0; }
.g-event-carousel__dots { display: flex; justify-content: center; gap: 7px; margin-top: 12px; }
.g-event-carousel__dot {
  width: 7px; height: 7px; padding: 0; border: 0; border-radius: 999px; cursor: pointer;
  background: rgba(190,240,170,.28); transition: width .2s ease, background .2s ease;
}
.g-event-carousel__dot.is-active { width: 22px; background: var(--g-accent, #A6E84B); }
@media (min-width: 1060px) {
  body.gaia-v2 .g-super-home > .g-event-carousel {
    grid-column: 2 !important; grid-row: 1 !important; align-self: stretch !important; height: 100%; margin: 0;
  }
  body.gaia-v2 .g-super-home > .g-event-carousel .g-event-carousel__track,
  body.gaia-v2 .g-super-home > .g-event-carousel .g-event-carousel__slide { height: 100%; }
}


/* Event Info / FAQ / Help — an accordion of cards. */
.g-info-list { display: flex; flex-direction: column; gap: 8px; }
.g-info-item { border: 1px solid var(--g-line, rgba(190,240,170,.12)); border-radius: 14px;
  background: var(--g-card, rgba(255,255,255,.02)); overflow: hidden; }
.g-info-item > summary { list-style: none; cursor: pointer; padding: 14px 16px; font-weight: 600;
  display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.g-info-item > summary::-webkit-details-marker { display: none; }
.g-info-item > summary::after { content: "+"; color: var(--g-accent, #A6E84B); font-size: 20px; line-height: 1; flex: 0 0 auto; }
.g-info-item[open] > summary::after { content: "\2013"; }
.g-info-item__body { padding: 0 16px 14px; color: var(--g-text-dim, #93A597); line-height: 1.55; }


/* Event resources — downloadable links under the Info tab. */
.g-resource { display: flex; align-items: center; gap: 12px; text-decoration: none;
  border: 1px solid var(--g-line, rgba(190,240,170,.12)); border-radius: 14px; padding: 13px 16px;
  background: var(--g-card, rgba(255,255,255,.02)); color: inherit; }
.g-resource:hover { border-color: rgba(166,232,75,.4); }
.g-resource__body { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.g-resource__body strong { font-weight: 600; }
.g-resource__body em { font-style: normal; color: var(--g-text-dim, #93A597); font-size: 13px; }
.g-resource__go { color: var(--g-accent, #A6E84B); flex: 0 0 auto; display: flex; }
.g-resource__go i { font-size: 20px; }

/* ============================================================================
   iOS Safari opener fit — the full splash must sit inside the frame with the
   Continue / Skip controls always fully visible, on every iPhone height and
   with Safari's address bar + bottom toolbar showing. Previously the artwork
   (13rem) and the steps block (min-height 12rem) were fixed, so on short
   viewports the footer was pushed past the fold and clipped by overflow:hidden.
   Fix: strict flex column (header/footer fixed, middle flexes), artwork + copy
   sized to the SMALL viewport (svh), and the footer never allowed to shrink.
   This block is at the end of the last cascade layer so it wins.
   ========================================================================== */
.gaia-splash-shell {
  /* fill the live viewport (dvh) but never rely on it being large: the content
     below is sized to the small-viewport state so nothing is ever clipped */
  min-height: 100vh;
  min-height: 100dvh;
  /* keep the footer clear of the home indicator in Safari too (not only PWA) */
  padding-bottom: max(1.1rem, calc(env(safe-area-inset-bottom) + 0.5rem));
}

.gaia-splash-header { flex: 0 0 auto; }
.gaia-splash-content {
  flex: 1 1 auto;
  min-height: 0;          /* allow the middle to shrink instead of overflowing */
  justify-content: center;
}
.gaia-splash-footer {
  flex: 0 0 auto;         /* footer is always its natural size, pinned, in-frame */
  padding-top: 0.35rem;   /* keep the progress dots off the body copy */
}

/* Artwork + its gap scale with the small-viewport height, so on a short Safari
   frame the illustration shrinks rather than shoving the copy/footer off. */
.gaia-splash-stage {
  width: clamp(7rem, 26svh, 13rem);
  height: clamp(7rem, 26svh, 13rem);
  margin-bottom: clamp(0.85rem, 3svh, 2.25rem);
}
.gaia-splash-steps { min-height: 0; }   /* was 12rem/10rem — let copy set height */

/* Short viewports (iPhone SE, or any iPhone with the Safari bars visible):
   tighten type + spacing so header + artwork + copy + footer all fit. */
@media (max-height: 700px) {
  .gaia-splash-header { margin-bottom: 0.75rem; }
  .gaia-splash-eyebrow { margin-bottom: 0.6rem; }
  .gaia-splash-title { font-size: clamp(1.5rem, 6.2vw, 2rem); }
  .gaia-splash-body { font-size: 0.9rem; line-height: 1.45; margin-top: 0.6rem; }
  .gaia-splash-footer { gap: 0.85rem; }
  .gaia-splash-btn { padding: 0.85rem 1.25rem; min-height: 46px; }
}
@media (max-height: 600px) {
  .gaia-splash-stage {
    width: clamp(5.25rem, 19svh, 7.5rem);
    height: clamp(5.25rem, 19svh, 7.5rem);
    margin-bottom: 0.6rem;
  }
  .gaia-splash-header { margin-bottom: 0.5rem; }
  .gaia-splash-title { font-size: clamp(1.35rem, 5.6vw, 1.75rem); }
  .gaia-splash-body { font-size: 0.85rem; line-height: 1.4; margin-top: 0.5rem; }
  .gaia-splash-footer { gap: 0.7rem; }
  .gaia-splash-btn { min-height: 44px; }
  .gaia-splash-skip { min-height: 40px; }
}

/* Ultra-short — landscape phones (~740x360) and any viewport under ~430px tall.
   The opener must still show every control in-frame, so the artwork, brand and
   type collapse hard and the gaps tighten; the footer stays fixed and visible. */
@media (max-height: 430px) {
  .gaia-splash-shell {
    padding-top: max(0.4rem, env(safe-area-inset-top));
    padding-bottom: max(0.5rem, calc(env(safe-area-inset-bottom) + 0.35rem));
  }
  .gaia-splash-header { margin-bottom: 0.3rem; }
  .gaia-splash-logo-mark { width: 1.75rem; height: 1.75rem; }
  .gaia-splash-brand { font-size: 1rem; }
  .gaia-splash-stage {
    width: clamp(3rem, 14svh, 4.25rem);
    height: clamp(3rem, 14svh, 4.25rem);
    margin-bottom: 0.35rem;
  }
  .gaia-splash-eyebrow { margin-bottom: 0.35rem; padding: 0.2rem 0.65rem; font-size: 0.68rem; }
  .gaia-splash-title { font-size: clamp(1.05rem, 4vw, 1.4rem); line-height: 1.08; }
  .gaia-splash-body { font-size: 0.78rem; line-height: 1.3; margin-top: 0.3rem; max-width: 54ch; }
  .gaia-splash-steps { min-height: 0; }
  .gaia-splash-footer { gap: 0.45rem; padding-top: 0.15rem; }
  .gaia-splash-progress { gap: 0.35rem; }
  .gaia-splash-progress [data-splash-dot] { height: 0.4rem; }
  .gaia-splash-btn { min-height: 40px; padding: 0.55rem 1rem; font-size: 0.95rem; }
  .gaia-splash-skip { min-height: 32px; font-size: 0.82rem; }
}

/* ============================================================================
   Universal viewport-fit hardening — every page, every size (phone / tablet /
   desktop / landscape). Belt-and-suspenders on top of the app's existing
   responsive system, targeting the whole class of "cut off / half there":
     · iOS Safari address bar overshoot (bare 100vh),
     · content hidden behind the fixed bottom tab bar,
     · media / long content forcing sideways scroll.
   ========================================================================== */

/* 1) No sideways scroll, ever — on any page (splash, app, redirect shells). */
html, body { max-width: 100%; overflow-x: clip; }

/* 2) Media + embeds can never be wider than their column. */
img, svg, video, canvas, iframe { max-width: 100%; }

/* 3) Full-height helpers use the dynamic/small viewport instead of bare 100vh,
   so the address bar can't push content out of frame. Progressive: the last
   unit the browser understands wins; ancient browsers keep 100vh. */
.min-h-screen { min-height: 100svh; min-height: 100dvh; }
body.gaia-app, body.gaia-v2 { min-height: 100svh; min-height: 100dvh; }

/* 4) App content must ALWAYS clear the fixed bottom tab bar. Its raised centre
   button makes it ~90px tall; some short-height tiers reserved less than that,
   hiding the primary CTAs (Join free / Sign in) behind the bar in landscape and
   on short screens. Enforce a floor (max() never reduces the tuned values). */
@media (max-width: 899px) {
  body.gaia-v2.gaia-has-tabbar {
    padding-bottom: max(6rem, calc(92px + env(safe-area-inset-bottom, 0px)));
  }
}

/* ============================================================
   Gaia Assist panel (2026-09-28)
   - Close and minimise sat on top of each other: the 44px tap-target
     rule widened close, but minimise was still placed for a 36px one.
   - "Speak naturally" / "Pause listening" only while a live session is
     actually listening (gaia-assist--live-session, set in gaia-ui.js).
   - The suggestion chips scroll sideways; fade the edge so the cut-off
     chip reads as "more this way", not as a layout bug.
   ============================================================ */
body.gaia-v2 .gaia-assist__close,
body.gaia-v2 .gaia-assist__minimize {
  top: 0.75rem;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
}
body.gaia-v2 .gaia-assist__close { right: 0.75rem; }
body.gaia-v2 .gaia-assist__minimize { right: calc(0.75rem + 44px + 0.5rem); }

body.gaia-v2 .gaia-assist:not(.gaia-assist--live-session) .gaia-assist__hint-line,
body.gaia-v2 .gaia-assist:not(.gaia-assist--live-session) .gaia-assist__listen-toggle {
  display: none;
}

body.gaia-v2 .gaia-assist__chips {
  padding-right: 2rem;
  scroll-snap-type: x proximity;
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 2rem), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 2rem), transparent);
}
body.gaia-v2 .gaia-assist__chips button { scroll-snap-align: start; }

/* The conversation was capped at 5.5rem (~3 lines), so a spoken answer
   showed only its last line and the question above it scrolled away.
   Give it the room, and keep the chips from being squashed by it. */
body.gaia-v2 .gaia-assist:not(.gaia-assist--minimized):not(.gaia-assist--welcome) .gaia-assist__transcript {
  max-height: min(36vh, 18rem);
}
body.gaia-v2 .gaia-assist__chips { flex-shrink: 0; }
body.gaia-v2 .gaia-assist:not(.gaia-assist--minimized):not(.gaia-assist--welcome) .gaia-assist__panel {
  max-height: min(82vh, 42rem);
  max-height: min(82dvh, 42rem);
}

/* the directory, opened with a purpose */
.g-dir__intent { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; padding: 12px 14px; border-radius: 16px; border: 1px solid rgba(166, 237, 104, .32); background: rgba(166, 237, 104, .08); color: var(--g-text, #EAF3E6); }
.g-dir__intent i { font-size: 22px; color: var(--g-accent, #A6E84B); flex: none; }
.g-dir__intent div { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; }
.g-dir__intent strong { font-size: 15px; }
.g-dir__intent span { font-size: 13px; color: var(--g-text-dim, #93A597); }
.g-dir__intent .g-btn { flex: none; }
.g-dir__intent-x { flex: none; background: none; border: 0; color: var(--g-text-dim, #93A597); font-size: 20px; line-height: 1; cursor: pointer; padding: 4px 6px; }
@media (max-width: 480px) { .g-dir__intent { flex-wrap: wrap; } .g-dir__intent div { flex-basis: calc(100% - 40px); } .g-dir__intent .g-btn { margin-left: 34px; } }

.gaia-tour__back { background: none; border: 1px solid var(--g-line-strong); border-radius: 999px; padding: 8px 12px; color: var(--g-text); cursor: pointer; }
.gaia-tour__count { color: var(--g-text-muted); font-size: 12px; white-space: nowrap; }
.gaia-tour__card { font-family: var(--g-font-body, sans-serif); }
.gaia-tour__spot { transition: none; }
.gaia-tour__title { font-family: inherit; font-size: 20px; line-height: 1.25; }