:root {
  --hub-bg: var(--site-background, #07100d);
  --hub-surface: var(--site-surface, #0b1b15);
  --hub-surface-alt: var(--site-surface-alt, #10251d);
  --hub-primary: var(--site-primary, #123e35);
  --hub-secondary: var(--site-secondary, #0f897d);
  --hub-accent: var(--site-accent, #d7ad62);
  --hub-accent-soft: var(--site-accent-soft, #f0d49b);
  --hub-text: var(--site-text, #f4f0e7);
  --hub-muted: var(--site-muted, #9fb7a9);
  --hub-line: color-mix(in srgb, var(--hub-accent) 18%, transparent);
  --hub-line-soft: rgba(255, 255, 255, .075);
}

body.bg.hub-page {
  min-height: 100vh;
  color: var(--hub-text);
  background:
    radial-gradient(circle at 7% 8%, color-mix(in srgb, var(--hub-secondary) 18%, transparent), transparent 31rem),
    radial-gradient(circle at 91% 38%, color-mix(in srgb, var(--hub-accent) 11%, transparent), transparent 34rem),
    var(--hub-bg);
}

body.hub-page::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .025;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.75'/%3E%3C/svg%3E");
}

.hub-page *,
.hub-page *::before,
.hub-page *::after { box-sizing: border-box; }

.hub-page button,
.hub-page input { font: inherit; }

.hub-visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; }

.hub-shell {
  width: min(1240px, calc(100% - 150px));
  margin: 0 auto;
  padding: 0 0 120px;
}

.hub-hero {
  position: relative;
  min-height: 565px;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(350px, .9fr);
  align-items: center;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid var(--hub-line-soft);
  border-top: 0;
  border-radius: 0 0 38px 38px;
  background:
    linear-gradient(112deg,
      color-mix(in srgb, var(--hub-primary) 72%, var(--hub-bg)) 0%,
      color-mix(in srgb, var(--hub-surface-alt) 86%, var(--hub-bg)) 66%,
      color-mix(in srgb, var(--hub-surface) 92%, var(--hub-bg)) 100%);
  box-shadow: 0 42px 110px rgba(0, 0, 0, .28);
}

.hub-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  opacity: .085;
  background-image:
    linear-gradient(rgba(255,255,255,.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.09) 1px, transparent 1px);
  background-size: 68px 68px;
  mask-image: linear-gradient(90deg, transparent 7%, #000 72%, transparent);
}

.hub-hero__glow {
  position: absolute;
  z-index: -1;
  top: -270px;
  right: -160px;
  width: 660px;
  height: 660px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--hub-accent) 22%, transparent), transparent 69%);
}

.hub-hero__copy { max-width: 740px; padding: 74px 22px 66px 68px; }

.hub-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--hub-accent-soft);
  font-size: .64rem;
  font-weight: 900;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.hub-eyebrow > span { width: 30px; height: 1px; background: var(--hub-accent); }

.hub-hero h1 {
  max-width: 760px;
  margin: 20px 0 22px;
  color: var(--hub-text);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(3rem, 5.15vw, 5rem);
  font-weight: 400;
  line-height: .99;
  letter-spacing: -.052em;
}

.hub-hero h1 em { color: var(--hub-accent-soft); font-weight: 400; }
.hub-hero__copy > p { max-width: 620px; margin: 0; color: color-mix(in srgb, var(--hub-muted) 88%, var(--hub-text)); font-size: .91rem; line-height: 1.75; }

.hub-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.hub-button {
  min-height: 51px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 0 22px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 999px;
  color: var(--hub-text);
  background: rgba(255,255,255,.025);
  font-size: .7rem;
  font-weight: 900;
  letter-spacing: .015em;
  transition: transform .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.hub-button:hover { color: var(--hub-text); border-color: color-mix(in srgb, var(--hub-accent) 54%, transparent); transform: translateY(-2px); }
.hub-button--primary { color: #152019; border-color: var(--hub-accent-soft); background: var(--hub-accent-soft); box-shadow: 0 15px 36px color-mix(in srgb, var(--hub-accent) 20%, transparent); }
.hub-button--primary:hover { color: #101a14; background: color-mix(in srgb, var(--hub-accent-soft) 90%, white); }
.hub-button--ghost { backdrop-filter: blur(8px); }

.hub-section { margin-top: 92px; scroll-margin-top: 105px; }
.hub-section-heading { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, .55fr); align-items: end; gap: 38px; margin-bottom: 30px; }
.hub-section-heading > div > span { display: block; margin-bottom: 8px; color: var(--hub-accent-soft); font-size: .62rem; font-weight: 900; letter-spacing: .17em; text-transform: uppercase; }
.hub-section-heading h2 { margin: 0; color: var(--hub-text); font-family: Georgia, "Times New Roman", serif; font-size: clamp(2rem, 3.6vw, 3.35rem); font-weight: 400; line-height: 1.05; letter-spacing: -.04em; }
.hub-section-heading > p { margin: 0 0 5px; padding-left: 22px; border-left: 1px solid var(--hub-line); color: var(--hub-muted); font-size: .74rem; line-height: 1.7; }

.hub-live-status { min-height: 1px; margin: 0; color: var(--hub-accent-soft); font-size: .68rem; }
.hub-live-status:not(:empty) { margin-bottom: 14px; padding: 10px 13px; border: 1px solid var(--hub-line); border-radius: 11px; background: color-mix(in srgb, var(--hub-accent) 6%, transparent); }

.hub-empty {
  min-height: 330px;
  display: grid;
  place-items: center;
  align-content: center;
  padding: 45px 24px;
  border: 1px solid var(--hub-line-soft);
  border-radius: 28px;
  background:
    radial-gradient(circle at 50% 0, color-mix(in srgb, var(--hub-accent) 11%, transparent), transparent 21rem),
    color-mix(in srgb, var(--hub-surface) 90%, transparent);
  text-align: center;
}
.hub-empty[hidden] { display: none; }
.hub-empty > span:not(.hub-empty__icon) { color: var(--hub-accent-soft); font-size: .6rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.hub-empty__icon { width: 72px; height: 72px; display: grid; place-items: center; margin-bottom: 18px; border: 1px solid var(--hub-line); border-radius: 50%; color: var(--hub-accent-soft); background: color-mix(in srgb, var(--hub-accent) 8%, transparent); }
.hub-empty__icon svg { width: 29px; fill: currentColor; }
.hub-empty h3 { margin: 10px 0 8px; color: var(--hub-text); font-family: Georgia, serif; font-size: 1.7rem; font-weight: 400; }
.hub-empty p { max-width: 520px; margin: 0 0 22px; color: var(--hub-muted); font-size: .74rem; line-height: 1.7; }
.hub-empty--error > span { width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid rgba(220,100,75,.3); border-radius: 50%; color: #ffb4a3; }

.hub-pagination { display: flex; align-items: center; justify-content: center; gap: 13px; margin-top: 30px; }
.hub-pagination a { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid var(--hub-line); border-radius: 50%; color: var(--hub-accent-soft); background: color-mix(in srgb, var(--hub-surface) 86%, transparent); }
.hub-pagination span { color: var(--hub-muted); font-size: .65rem; }

/* Favorites */
.favorites-privacy { display: flex; align-items: center; gap: 8px; margin-top: 25px !important; color: color-mix(in srgb, var(--hub-muted) 76%, transparent) !important; font-size: .62rem !important; }
.favorites-privacy svg { width: 17px; flex: 0 0 17px; fill: var(--hub-secondary); }
.favorites-hero__visual { position: relative; min-height: 520px; display: grid; place-items: center; }
.favorites-orbit { position: absolute; border: 1px solid color-mix(in srgb, var(--hub-accent) 17%, transparent); border-radius: 50%; }
.favorites-orbit--one { width: 390px; height: 390px; animation: hub-orbit 18s linear infinite; }
.favorites-orbit--one::before { content: ""; position: absolute; top: 20px; left: 72px; width: 12px; height: 12px; border-radius: 50%; background: var(--hub-accent-soft); box-shadow: 0 0 30px color-mix(in srgb, var(--hub-accent) 80%, transparent); }
.favorites-orbit--two { width: 285px; height: 285px; border-style: dashed; opacity: .7; animation: hub-orbit 25s linear infinite reverse; }
.favorites-count-card { position: relative; z-index: 2; width: 250px; height: 250px; display: flex; align-items: center; justify-content: center; flex-direction: column; overflow: hidden; border: 1px solid color-mix(in srgb, var(--hub-accent) 31%, transparent); border-radius: 50%; background: color-mix(in srgb, var(--hub-bg) 76%, transparent); box-shadow: 0 35px 95px rgba(0,0,0,.38), inset 0 1px rgba(255,255,255,.06); backdrop-filter: blur(16px); }
.favorites-count-card::after { content: ""; position: absolute; inset: 13px; border: 1px dashed color-mix(in srgb, var(--hub-accent) 18%, transparent); border-radius: inherit; }
.favorites-heart { position: relative; z-index: 1; width: 38px; height: 38px; display: grid; place-items: center; margin-bottom: 3px; color: var(--hub-accent-soft); }
.favorites-heart svg { width: 27px; fill: currentColor; }
.favorites-count-card strong { position: relative; z-index: 1; color: var(--hub-text); font: 400 4.4rem/.9 Georgia, serif; }
.favorites-count-card > span:not(.favorites-heart) { position: relative; z-index: 1; margin-top: 9px; color: var(--hub-accent-soft); font-size: .62rem; font-weight: 850; }
.favorites-count-card small { position: relative; z-index: 1; margin-top: 4px; color: var(--hub-muted); font-size: .54rem; letter-spacing: .07em; text-transform: uppercase; }

.favorites-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.favorites-grid[hidden] { display: none; }
.favorite-card { min-width: 0; overflow: hidden; border: 1px solid var(--hub-line-soft); border-radius: 25px; background: linear-gradient(155deg, color-mix(in srgb, var(--hub-surface-alt) 88%, var(--hub-bg)), color-mix(in srgb, var(--hub-surface) 93%, var(--hub-bg))); box-shadow: 0 22px 60px rgba(0,0,0,.2); transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease, opacity .25s ease; }
.favorite-card:hover { border-color: color-mix(in srgb, var(--hub-accent) 32%, transparent); box-shadow: 0 32px 78px rgba(0,0,0,.3); transform: translateY(-6px); }
.favorite-card.is-removing { opacity: 0; transform: scale(.95) translateY(15px); }
.favorite-card__media { position: relative; height: 248px; overflow: hidden; background: var(--hub-surface-alt); }
.favorite-card__media > img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .55s cubic-bezier(.2,.75,.2,1), filter .3s ease; }
.favorite-card:hover .favorite-card__media > img { filter: brightness(.74) saturate(.92); transform: scale(1.055); }
.favorite-card__shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(3,12,8,.8), transparent 60%), linear-gradient(120deg, rgba(3,12,8,.18), transparent); }
.favorite-card__number { position: absolute; left: 17px; bottom: 15px; z-index: 2; color: rgba(255,255,255,.42); font: 400 2.7rem/.8 Georgia, serif; }
.favorite-card__type { position: absolute; top: 16px; left: 16px; z-index: 2; padding: 7px 10px; border: 1px solid rgba(255,255,255,.16); border-radius: 999px; color: var(--hub-text); background: rgba(4,15,10,.55); backdrop-filter: blur(10px); font-size: .54rem; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }
.favorite-card__play { position: absolute; z-index: 3; left: 50%; top: 50%; width: 58px; height: 58px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.3); border-radius: 50%; color: #142019; background: var(--hub-accent-soft); box-shadow: 0 17px 42px rgba(0,0,0,.34); opacity: .94; transform: translate(-50%, -50%); transition: transform .2s ease, background .2s ease; }
.favorite-card__play:hover { color: #142019; background: white; transform: translate(-50%, -50%) scale(1.08); }
.favorite-card__play svg { width: 22px; fill: currentColor; }
.favorite-card__remove { position: absolute; z-index: 4; top: 14px; right: 14px; width: 43px; height: 43px; display: grid; place-items: center; margin: 0; padding: 0; border: 1px solid color-mix(in srgb, var(--hub-accent) 34%, transparent); border-radius: 50%; color: var(--hub-accent-soft); background: rgba(4,15,10,.68); box-shadow: 0 10px 28px rgba(0,0,0,.24); backdrop-filter: blur(12px); cursor: pointer; transition: transform .18s ease, color .18s ease, background .18s ease; }
.favorite-card__remove:hover { color: #182019; background: var(--hub-accent-soft); transform: scale(1.06); }
.favorite-card__remove:disabled { opacity: .58; cursor: wait; }
.favorite-card__remove svg { width: 19px; fill: currentColor; }
.favorite-card__body { padding: 22px 22px 20px; }
.favorite-card__meta { display: flex; align-items: center; gap: 7px; overflow: hidden; color: color-mix(in srgb, var(--hub-muted) 78%, transparent); font-size: .57rem; font-weight: 800; letter-spacing: .055em; text-transform: uppercase; white-space: nowrap; }
.favorite-card__meta span { overflow: hidden; color: var(--hub-accent-soft); text-overflow: ellipsis; }
.favorite-card__meta i { width: 3px; height: 3px; flex: 0 0 3px; border-radius: 50%; background: var(--hub-secondary); }
.favorite-card__body h2 { min-height: 2.42em; margin: 10px 0 8px; color: var(--hub-text); font-family: Georgia, "Times New Roman", serif; font-size: 1.28rem; font-weight: 400; line-height: 1.21; }
.favorite-card__body h2 a { color: inherit; }
.favorite-card__body > p { min-height: 3.35em; margin: 0; color: color-mix(in srgb, var(--hub-muted) 84%, transparent); font-size: .69rem; line-height: 1.64; }
.favorite-card__footer { min-height: 40px; display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 18px; padding-top: 15px; border-top: 1px solid var(--hub-line-soft); }
.favorite-card__saved { display: inline-flex; align-items: center; gap: 6px; color: color-mix(in srgb, var(--hub-muted) 77%, transparent); font-size: .55rem; }
.favorite-card__saved svg { width: 13px; fill: var(--hub-accent); }
.favorite-card__actions { display: flex; align-items: center; gap: 5px; }
.favorite-card__actions > span,
.favorite-card__actions > button { min-width: 33px; height: 33px; display: inline-flex; align-items: center; justify-content: center; gap: 4px; margin: 0; padding: 0 8px; border: 1px solid var(--hub-line-soft); border-radius: 999px; color: var(--hub-muted); background: rgba(255,255,255,.025); font-size: .56rem; }
.favorite-card__actions > button { width: 33px; min-width: 33px; padding: 0; cursor: pointer; }
.favorite-card__actions svg { width: 13px; fill: currentColor; }
.favorite-card__actions > button:hover { color: var(--hub-accent-soft); border-color: var(--hub-line); }
.favorite-card__listen { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; color: var(--hub-accent-soft); font-size: .64rem; font-weight: 900; }
.favorite-card__listen span { transition: transform .18s ease; }
.favorite-card__listen:hover { color: var(--hub-text); }
.favorite-card__listen:hover span { transform: translateX(4px); }

/* Discipleship */
.discipleship-hero__visual { position: relative; min-height: 510px; display: grid; place-items: center; padding: 40px; }
.discipleship-compass { position: relative; width: min(390px, 100%); aspect-ratio: 1; display: grid; place-items: center; border: 1px solid var(--hub-line); border-radius: 50%; }
.discipleship-compass::before,
.discipleship-compass::after { content: ""; position: absolute; background: linear-gradient(90deg, transparent, var(--hub-line), transparent); }
.discipleship-compass::before { width: 115%; height: 1px; }
.discipleship-compass::after { width: 1px; height: 115%; }
.discipleship-compass__ring { position: absolute; inset: 38px; border: 1px dashed color-mix(in srgb, var(--hub-accent) 24%, transparent); border-radius: 50%; animation: hub-orbit 30s linear infinite; }
.discipleship-compass__core { position: relative; z-index: 2; width: 176px; height: 176px; display: grid; place-items: center; align-content: center; border: 1px solid color-mix(in srgb, var(--hub-accent) 34%, transparent); border-radius: 50%; background: color-mix(in srgb, var(--hub-bg) 82%, transparent); box-shadow: 0 28px 80px rgba(0,0,0,.34); }
.discipleship-compass__core svg { width: 37px; fill: var(--hub-accent-soft); }
.discipleship-compass__core strong { margin-top: 10px; color: var(--hub-text); font: 400 1.4rem/1 Georgia, serif; }
.discipleship-compass__core small { margin-top: 5px; color: var(--hub-muted); font-size: .54rem; letter-spacing: .12em; text-transform: uppercase; }
.discipleship-compass__point { position: absolute; z-index: 3; min-width: 80px; padding: 8px 10px; border: 1px solid var(--hub-line-soft); border-radius: 999px; color: var(--hub-muted); background: color-mix(in srgb, var(--hub-bg) 89%, transparent); text-align: center; font-size: .55rem; font-weight: 800; backdrop-filter: blur(10px); }
.discipleship-compass__point--one { top: -14px; left: 50%; transform: translateX(-50%); }
.discipleship-compass__point--two { right: -18px; top: 50%; transform: translateY(-50%); }
.discipleship-compass__point--three { bottom: -14px; left: 50%; transform: translateX(-50%); }
.discipleship-compass__point--four { left: -18px; top: 50%; transform: translateY(-50%); }

.journey-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; counter-reset: journey; }
.journey-card { position: relative; min-height: 310px; display: flex; flex-direction: column; overflow: hidden; padding: 24px; border: 1px solid var(--hub-line-soft); border-radius: 24px; background: linear-gradient(150deg, color-mix(in srgb, var(--hub-surface-alt) 88%, var(--hub-bg)), color-mix(in srgb, var(--hub-surface) 94%, var(--hub-bg))); transition: transform .24s ease, border-color .24s ease; }
.journey-card:hover { border-color: color-mix(in srgb, var(--hub-accent) 28%, transparent); transform: translateY(-5px); }
.journey-card::after { counter-increment: journey; content: "0" counter(journey); position: absolute; right: -2px; bottom: -17px; color: color-mix(in srgb, var(--hub-accent) 7%, transparent); font: 400 7rem/1 Georgia, serif; }
.journey-card__icon { width: 46px; height: 46px; display: grid; place-items: center; border: 1px solid var(--hub-line); border-radius: 14px; color: var(--hub-accent-soft); background: color-mix(in srgb, var(--hub-accent) 7%, transparent); }
.journey-card__icon svg { width: 21px; fill: currentColor; }
.journey-card > span { margin-top: 28px; color: var(--hub-secondary); font-size: .58rem; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }
.journey-card h3 { margin: 8px 0 10px; color: var(--hub-text); font-family: Georgia, serif; font-size: 1.45rem; font-weight: 400; }
.journey-card p { margin: 0; color: var(--hub-muted); font-size: .67rem; line-height: 1.65; }
.journey-card ul { position: relative; z-index: 1; display: grid; gap: 7px; margin: auto 0 0; padding: 22px 0 0; list-style: none; }
.journey-card li { display: flex; gap: 7px; color: color-mix(in srgb, var(--hub-muted) 87%, var(--hub-text)); font-size: .61rem; }
.journey-card li::before { content: "✓"; color: var(--hub-accent-soft); }

.rhythm-panel { display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); overflow: hidden; border: 1px solid var(--hub-line-soft); border-radius: 29px; background: color-mix(in srgb, var(--hub-surface) 91%, transparent); box-shadow: 0 28px 80px rgba(0,0,0,.2); }
.rhythm-panel__intro { position: relative; min-height: 420px; display: flex; justify-content: flex-end; flex-direction: column; overflow: hidden; padding: 38px; background: linear-gradient(155deg, color-mix(in srgb, var(--hub-primary) 78%, var(--hub-bg)), var(--hub-bg)); }
.rhythm-panel__intro::before { content: "7"; position: absolute; right: 12px; top: -45px; color: color-mix(in srgb, var(--hub-accent) 9%, transparent); font: 400 18rem/1 Georgia, serif; }
.rhythm-panel__intro > span { position: relative; color: var(--hub-accent-soft); font-size: .61rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.rhythm-panel__intro h3 { position: relative; max-width: 380px; margin: 12px 0 12px; color: var(--hub-text); font: 400 clamp(2rem, 3.4vw, 3rem)/1.04 Georgia, serif; }
.rhythm-panel__intro p { position: relative; max-width: 410px; margin: 0; color: var(--hub-muted); font-size: .72rem; line-height: 1.7; }
.rhythm-list { display: grid; align-content: center; padding: 22px 34px; }
.rhythm-item { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 17px 0; border-bottom: 1px solid var(--hub-line-soft); }
.rhythm-item:last-child { border-bottom: 0; }
.rhythm-item > span { color: var(--hub-accent-soft); font: 400 1.1rem/1 Georgia, serif; }
.rhythm-item h4 { margin: 0 0 4px; color: var(--hub-text); font-size: .72rem; }
.rhythm-item p { margin: 0; color: var(--hub-muted); font-size: .61rem; line-height: 1.5; }
.rhythm-item small { color: color-mix(in srgb, var(--hub-muted) 68%, transparent); font-size: .53rem; }

.hub-podcast-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.hub-podcast-card { overflow: hidden; border: 1px solid var(--hub-line-soft); border-radius: 23px; background: color-mix(in srgb, var(--hub-surface) 93%, var(--hub-bg)); transition: transform .24s ease, border-color .24s ease; }
.hub-podcast-card:hover { border-color: color-mix(in srgb, var(--hub-accent) 28%, transparent); transform: translateY(-5px); }
.hub-podcast-card__cover { position: relative; height: 220px; overflow: hidden; }
.hub-podcast-card__cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(3,12,8,.72), transparent 62%); }
.hub-podcast-card__cover img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
.hub-podcast-card:hover img { transform: scale(1.045); }
.hub-podcast-card__play { position: absolute; z-index: 2; left: 16px; bottom: 15px; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; color: #142019; background: var(--hub-accent-soft); }
.hub-podcast-card__play svg { width: 17px; fill: currentColor; }
.hub-podcast-card__body { padding: 20px; }
.hub-podcast-card__meta { color: var(--hub-accent-soft); font-size: .56rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.hub-podcast-card h3 { min-height: 2.4em; margin: 10px 0 7px; color: var(--hub-text); font: 400 1.25rem/1.2 Georgia, serif; }
.hub-podcast-card p { min-height: 3.2em; margin: 0; color: var(--hub-muted); font-size: .67rem; line-height: 1.6; }
.hub-podcast-card__link { display: flex; justify-content: space-between; margin-top: 16px; color: var(--hub-accent-soft); font-size: .62rem; font-weight: 900; }

.hub-final-cta { position: relative; min-height: 330px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 34px; margin-top: 92px; overflow: hidden; padding: 54px 60px; border: 1px solid var(--hub-line); border-radius: 30px; background: linear-gradient(125deg, color-mix(in srgb, var(--hub-primary) 78%, var(--hub-bg)), color-mix(in srgb, var(--hub-surface-alt) 80%, var(--hub-bg))); }
.hub-final-cta::after { content: ""; position: absolute; right: -140px; top: -210px; width: 480px; height: 480px; border: 1px solid var(--hub-line); border-radius: 50%; box-shadow: inset 0 0 0 55px color-mix(in srgb, var(--hub-accent) 3%, transparent), inset 0 0 0 110px color-mix(in srgb, var(--hub-accent) 3%, transparent); }
.hub-final-cta > div { position: relative; z-index: 1; }
.hub-final-cta > div > span { color: var(--hub-accent-soft); font-size: .61rem; font-weight: 900; letter-spacing: .15em; text-transform: uppercase; }
.hub-final-cta h2 { max-width: 720px; margin: 12px 0 13px; color: var(--hub-text); font: 400 clamp(2rem, 3.8vw, 3.5rem)/1.04 Georgia, serif; letter-spacing: -.035em; }
.hub-final-cta p { max-width: 650px; margin: 0; color: var(--hub-muted); font-size: .72rem; line-height: 1.7; }
.hub-final-cta .hub-actions { position: relative; z-index: 2; margin: 0; }

/* Help */
.help-hero__visual { position: relative; min-height: 510px; display: grid; place-items: center; padding: 35px; }
.help-signal { position: relative; width: 300px; height: 300px; display: grid; place-items: center; border: 1px solid var(--hub-line); border-radius: 50%; }
.help-signal::before,
.help-signal::after { content: ""; position: absolute; inset: -45px; border: 1px solid color-mix(in srgb, var(--hub-accent) 12%, transparent); border-radius: 50%; }
.help-signal::after { inset: -92px; opacity: .5; }
.help-signal__core { position: relative; z-index: 2; width: 175px; height: 175px; display: grid; place-items: center; align-content: center; border-radius: 50%; color: var(--hub-accent-soft); background: color-mix(in srgb, var(--hub-bg) 88%, transparent); box-shadow: 0 30px 90px rgba(0,0,0,.35); }
.help-signal__core svg { width: 40px; fill: currentColor; }
.help-signal__core strong { margin-top: 11px; color: var(--hub-text); font: 400 1.25rem/1 Georgia, serif; }
.help-signal__core small { margin-top: 6px; color: var(--hub-muted); font-size: .54rem; }
.help-signal__dot { position: absolute; z-index: 3; width: 17px; height: 17px; border: 4px solid var(--hub-primary); border-radius: 50%; background: var(--hub-accent-soft); box-shadow: 0 0 25px color-mix(in srgb, var(--hub-accent) 54%, transparent); }
.help-signal__dot--one { top: 18px; right: 62px; }
.help-signal__dot--two { bottom: 48px; left: 32px; }
.help-signal__dot--three { right: 2px; bottom: 96px; }

.help-quick-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.help-quick-card { position: relative; min-height: 235px; display: flex; flex-direction: column; padding: 23px; overflow: hidden; border: 1px solid var(--hub-line-soft); border-radius: 23px; background: linear-gradient(150deg, color-mix(in srgb, var(--hub-surface-alt) 88%, var(--hub-bg)), color-mix(in srgb, var(--hub-surface) 94%, var(--hub-bg))); transition: transform .22s ease, border-color .22s ease; }
.help-quick-card:hover { color: inherit; border-color: color-mix(in srgb, var(--hub-accent) 31%, transparent); transform: translateY(-5px); }
.help-quick-card__icon { width: 47px; height: 47px; display: grid; place-items: center; border: 1px solid var(--hub-line); border-radius: 15px; color: var(--hub-accent-soft); background: color-mix(in srgb, var(--hub-accent) 7%, transparent); }
.help-quick-card__icon svg { width: 21px; fill: currentColor; }
.help-quick-card > span { margin-top: 25px; color: var(--hub-secondary); font-size: .55rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.help-quick-card h3 { margin: 8px 0 7px; color: var(--hub-text); font: 400 1.34rem/1.12 Georgia, serif; }
.help-quick-card p { margin: 0; color: var(--hub-muted); font-size: .63rem; line-height: 1.55; }
.help-quick-card b { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 18px; color: var(--hub-accent-soft); font-size: .59rem; }

.help-layout { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(300px, .75fr); align-items: start; gap: 20px; }
.help-faq-panel,
.help-contact-card { border: 1px solid var(--hub-line-soft); border-radius: 25px; background: color-mix(in srgb, var(--hub-surface) 92%, transparent); }
.help-faq-panel { padding: 22px; }
.help-search { position: relative; margin-bottom: 15px; }
.help-search svg { position: absolute; top: 50%; left: 15px; width: 18px; fill: none; stroke: var(--hub-muted); stroke-width: 1.8; transform: translateY(-50%); pointer-events: none; }
.help-search input { width: 100%; height: 52px; padding: 0 15px 0 45px; border: 1px solid var(--hub-line-soft); border-radius: 14px; outline: none; color: var(--hub-text); background: rgba(2,12,8,.42); font-size: .68rem; }
.help-search input::placeholder { color: color-mix(in srgb, var(--hub-muted) 65%, transparent); }
.help-search input:focus { border-color: color-mix(in srgb, var(--hub-accent) 44%, transparent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--hub-accent) 7%, transparent); }
.help-faq-list { display: grid; gap: 8px; }
.help-faq-item { overflow: hidden; border: 1px solid var(--hub-line-soft); border-radius: 15px; background: rgba(255,255,255,.018); }
.help-faq-item[hidden] { display: none; }
.help-faq-question { width: 100%; min-height: 62px; display: grid; grid-template-columns: 28px minmax(0, 1fr) 34px; align-items: center; gap: 10px; margin: 0; padding: 10px 12px 10px 16px; border: 0; color: var(--hub-text); background: transparent; text-align: left; cursor: pointer; }
.help-faq-question > span:first-child { color: var(--hub-accent-soft); font: 400 .92rem/1 Georgia, serif; }
.help-faq-question strong { font-size: .69rem; font-weight: 750; line-height: 1.35; }
.help-faq-toggle { width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid var(--hub-line-soft); border-radius: 50%; color: var(--hub-accent-soft); transition: transform .2s ease; }
.help-faq-toggle svg { width: 14px; fill: currentColor; }
.help-faq-question[aria-expanded="true"] .help-faq-toggle { transform: rotate(45deg); }
.help-faq-answer { padding: 0 52px 18px 54px; }
.help-faq-answer[hidden] { display: none; }
.help-faq-answer p { margin: 0; color: var(--hub-muted); font-size: .67rem; line-height: 1.72; }
.help-faq-empty { margin: 0; padding: 24px; color: var(--hub-muted); text-align: center; font-size: .67rem; }
.help-faq-empty[hidden] { display: none; }

.help-contact-card { position: sticky; top: 105px; overflow: hidden; padding: 28px; }
.help-contact-card::before { content: ""; position: absolute; top: -110px; right: -95px; width: 230px; height: 230px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--hub-accent) 14%, transparent), transparent 70%); }
.help-contact-card > span { color: var(--hub-accent-soft); font-size: .58rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.help-contact-card h3 { position: relative; margin: 10px 0 10px; color: var(--hub-text); font: 400 1.7rem/1.1 Georgia, serif; }
.help-contact-card > p { position: relative; margin: 0; color: var(--hub-muted); font-size: .67rem; line-height: 1.7; }
.help-contact-list { display: grid; gap: 8px; margin-top: 22px; }
.help-contact-link { min-height: 58px; display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 9px 11px; border: 1px solid var(--hub-line-soft); border-radius: 14px; color: var(--hub-text); background: rgba(255,255,255,.02); }
.help-contact-link:hover { color: var(--hub-text); border-color: var(--hub-line); }
.help-contact-link > span:first-child { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; color: var(--hub-accent-soft); background: color-mix(in srgb, var(--hub-accent) 7%, transparent); }
.help-contact-link svg { width: 18px; fill: currentColor; }
.help-contact-link div { min-width: 0; }
.help-contact-link strong { display: block; font-size: .64rem; }
.help-contact-link small { display: block; margin-top: 3px; overflow: hidden; color: var(--hub-muted); font-size: .54rem; text-overflow: ellipsis; white-space: nowrap; }
.help-contact-link > b { color: var(--hub-accent-soft); font-size: .8rem; }
.help-contact-note { margin-top: 18px !important; padding-top: 16px; border-top: 1px solid var(--hub-line-soft); font-size: .56rem !important; }

.hub-toast { position: fixed; z-index: 140; left: 50%; bottom: 28px; min-width: min(360px, calc(100% - 28px)); max-width: calc(100% - 28px); padding: 13px 16px; opacity: 0; visibility: hidden; border: 1px solid var(--hub-line); border-radius: 13px; color: var(--hub-text); background: color-mix(in srgb, var(--hub-bg) 94%, transparent); box-shadow: 0 22px 70px rgba(0,0,0,.46); text-align: center; font-size: .65rem; transform: translate(-50%, 12px); transition: .2s ease; backdrop-filter: blur(16px); }
.hub-toast.is-visible { opacity: 1; visibility: visible; transform: translate(-50%, 0); }

@keyframes hub-orbit { to { transform: rotate(360deg); } }

@media (min-width: 1380px) {
  .hub-shell { width: min(1240px, calc(100% - 48px)); }
}

@media (max-width: 1100px) {
  .hub-hero { grid-template-columns: minmax(0, 1fr) 330px; }
  .hub-hero__copy { padding-left: 44px; }
  .favorites-orbit--one { width: 320px; height: 320px; }
  .favorites-orbit--two { width: 235px; height: 235px; }
  .favorites-count-card { width: 215px; height: 215px; }
  .favorites-count-card strong { font-size: 3.8rem; }
  .favorites-grid,
  .hub-podcast-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .journey-grid,
  .help-quick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hub-final-cta { grid-template-columns: 1fr; }
  .hub-final-cta .hub-actions { margin-top: 4px; }
}

@media (max-width: 820px) {
  .hub-shell { width: min(100% - 24px, 1240px); padding-bottom: 104px; }
  .hub-hero { min-height: auto; grid-template-columns: 1fr; border-radius: 0 0 30px 30px; }
  .hub-hero__copy { padding: 58px 30px 34px; }
  .hub-hero h1 { font-size: clamp(2.75rem, 10vw, 4.2rem); }
  .favorites-hero__visual,
  .discipleship-hero__visual,
  .help-hero__visual { min-height: 375px; }
  .favorites-orbit--one { width: 300px; height: 300px; }
  .discipleship-compass { width: 310px; }
  .help-signal { width: 240px; height: 240px; }
  .help-signal::before { inset: -32px; }
  .help-signal::after { inset: -63px; }
  .hub-section { margin-top: 70px; }
  .hub-section-heading { grid-template-columns: 1fr; gap: 14px; }
  .hub-section-heading > p { max-width: 620px; }
  .rhythm-panel,
  .help-layout { grid-template-columns: 1fr; }
  .rhythm-panel__intro { min-height: 350px; }
  .help-contact-card { position: relative; top: auto; }
  .hub-final-cta { min-height: 0; padding: 44px 34px; }
}

@media (max-width: 620px) {
  .hub-shell { width: min(100% - 16px, 1240px); }
  .hub-hero__copy { padding: 48px 23px 30px; }
  .hub-hero h1 { font-size: clamp(2.45rem, 11vw, 3.35rem); }
  .hub-hero__copy > p { font-size: .82rem; }
  .hub-actions { align-items: stretch; flex-direction: column; }
  .hub-button { width: 100%; }
  .favorites-privacy { align-items: flex-start; }
  .favorites-hero__visual,
  .discipleship-hero__visual,
  .help-hero__visual { min-height: 330px; padding: 25px; overflow: hidden; }
  .favorites-orbit--one { width: 265px; height: 265px; }
  .favorites-orbit--two { width: 200px; height: 200px; }
  .favorites-count-card { width: 190px; height: 190px; }
  .favorites-count-card strong { font-size: 3.25rem; }
  .discipleship-compass { width: 250px; }
  .discipleship-compass__ring { inset: 28px; }
  .discipleship-compass__core { width: 145px; height: 145px; }
  .discipleship-compass__point--two { right: -10px; }
  .discipleship-compass__point--four { left: -10px; }
  .help-signal { width: 205px; height: 205px; }
  .help-signal__core { width: 140px; height: 140px; }
  .favorites-grid,
  .hub-podcast-grid,
  .journey-grid,
  .help-quick-grid { grid-template-columns: 1fr; }
  .favorite-card__media { height: min(67vw, 315px); }
  .favorite-card__body h2,
  .favorite-card__body > p { min-height: 0; }
  .favorite-card__footer { align-items: flex-start; flex-direction: column; }
  .favorite-card__actions { align-self: stretch; justify-content: flex-end; }
  .journey-card { min-height: 280px; }
  .rhythm-panel__intro { min-height: 315px; padding: 28px; }
  .rhythm-list { padding: 13px 20px; }
  .rhythm-item { grid-template-columns: 32px minmax(0, 1fr); }
  .rhythm-item small { display: none; }
  .hub-final-cta { margin-top: 68px; padding: 38px 24px; border-radius: 24px; }
  .help-faq-panel { padding: 13px; }
  .help-faq-question { grid-template-columns: 23px minmax(0, 1fr) 32px; padding-left: 11px; }
  .help-faq-answer { padding: 0 15px 17px 44px; }
  .help-contact-card { padding: 23px; }
  .hub-toast { bottom: 92px; }
}

@media (prefers-reduced-motion: reduce) {
  .hub-page *,
  .hub-page *::before,
  .hub-page *::after { scroll-behavior: auto !important; animation: none !important; transition-duration: .01ms !important; }
}