/* ==========================================================================
   Home page. Loaded on the home page only, on top of app.css.

   A centred hero with a preview of the Members Hub, pill tabs, one dark
   feature panel, counting figures and a bold join banner, in Bixie's own
   purple and type. Everything that moves is switched off under
   prefers-reduced-motion at the end of this file.
   ========================================================================== */

/* --- Announcement bar ----------------------------------------------------- */
.hx-bar { background: var(--ink-deep); color: #FFFFFF; font-size: .85rem; }
.hx-bar a {
    display: flex; align-items: center; justify-content: center; gap: .65rem; min-width: 0;
    padding: .55rem var(--gutter); color: #FFFFFF; text-decoration: none;
}
.hx-bar a:hover { color: #FFFFFF; background: rgba(255, 255, 255, .06); }
.hx-bar__lead { font-weight: 700; white-space: nowrap; }
.hx-bar__text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #D9D3FA; }
.hx-bar__when { flex-shrink: 0; padding: .1rem .55rem; border-radius: 999px; background: rgba(255, 255, 255, .16); font-weight: 600; }
.hx-bar__go { display: inline-flex; align-items: center; gap: .3rem; flex-shrink: 0; font-weight: 600; }
.hx-bar__go svg { transition: transform .2s; }
.hx-bar a:hover .hx-bar__go svg { transform: translateX(3px); }
@media (max-width: 640px) { .hx-bar__go, .hx-bar__when { display: none; } }

.site-header { transition: box-shadow .25s; }
.site-header.is-scrolled { box-shadow: 0 8px 28px rgba(46, 38, 87, .1); }

/* --- Hero ----------------------------------------------------------------- */
.hx-hero {
    position: relative; overflow: hidden; padding: clamp(2.25rem, 5vw, 4rem) 0 0;
    background: linear-gradient(180deg, #ECE7FD 0%, #F6F3FE 60%, var(--surface-page) 100%);
}
.hx-hero__bg { position: absolute; inset: 0; pointer-events: none; }
.hx-blob { position: absolute; border-radius: 50%; filter: blur(64px); opacity: .6; will-change: transform; animation: hx-float 16s ease-in-out infinite alternate; }
.hx-blob--1 { width: 30rem; height: 30rem; left: -9rem; top: -8rem; background: #BFB2FB; }
.hx-blob--2 { width: 26rem; height: 26rem; right: -7rem; top: 2rem; background: #D5C9FF; animation-delay: -6s; }
.hx-blob--3 { width: 22rem; height: 22rem; left: 38%; top: 14rem; background: #E4DBFF; animation-delay: -11s; }

.hx-hero__inner {
    position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--space-4);
    max-width: 54rem; text-align: center;
}
.hx-hero__inner > * { animation: hx-fade-up .8s cubic-bezier(.2, .8, .2, 1) both; }
.hx-hero__inner > .hx-badge { animation-delay: .05s; }
.hx-hero__inner > .hx-checks { animation-delay: .55s; }
.hx-hero__inner > .hx-lede { animation-delay: .65s; }
.hx-hero__inner > .hx-actions { animation-delay: .75s; }
.hx-hero__inner > .hx-note { animation-delay: .85s; }

.hx-badge, .hx-tag {
    display: inline-flex; align-items: center; gap: .45rem; padding: .35rem .85rem; border-radius: 999px;
    background: #FFFFFF; border: 1px solid var(--purple-100); color: var(--purple-700);
    font-size: .82rem; font-weight: 600; box-shadow: 0 2px 10px rgba(108, 92, 231, .1);
}
.hx-badge svg, .hx-tag svg { color: var(--purple-600); }

.hx-title { font-size: clamp(2.1rem, 4.2vw + .9rem, 3.7rem); line-height: 1.1; letter-spacing: -0.03em; }
.hx-line { display: block; overflow: hidden; padding-bottom: .1em; margin-bottom: -.1em; }
.hx-line > span { display: inline-block; transform: translateY(110%); animation: hx-rise .9s cubic-bezier(.2, .8, .2, 1) .15s forwards; }
.hx-line:nth-child(2) > span { animation-delay: .32s; }
.hx-title em { position: relative; font-style: normal; color: var(--purple-600); }
.hx-title em::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: .02em; height: .16em; border-radius: 999px;
    background: linear-gradient(90deg, #A99BFF, #6C5CE7); transform: scaleX(0); transform-origin: left;
    animation: hx-underline .9s cubic-bezier(.2, .8, .2, 1) 1s forwards;
}

.hx-checks { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 1.4rem; font-weight: 600; font-size: .95rem; color: var(--heading); }
.hx-checks li { display: inline-flex; align-items: center; gap: .45rem; }
.hx-checks svg, .hx-list svg {
    flex-shrink: 0; width: 1.25rem; height: 1.25rem; padding: .25rem; border-radius: 50%;
    background: var(--purple-100); color: var(--purple-700);
}
.hx-lede { max-width: 42rem; }
.hx-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); }
.hx-actions--left { justify-content: flex-start; }
.hx-note { font-size: .85rem; color: var(--ink-faint); }

/* The Members Hub, drawn in markup: courses with progress, a group chat, worksheets. */
.hx-device {
    position: relative; max-width: 60rem; margin: clamp(1.75rem, 4vw, 3rem) auto 0; overflow: hidden;
    background: #FFFFFF; border: 1px solid var(--line); border-bottom: 0; border-radius: 22px 22px 0 0;
    box-shadow: 0 30px 80px rgba(79, 63, 208, .2);
    animation: hx-device-in 1.1s cubic-bezier(.2, .8, .2, 1) .55s both, hx-bob 9s ease-in-out 1.8s infinite alternate;
}
.hx-device::after {
    content: ""; position: absolute; inset: auto 0 0 0; height: 38%; pointer-events: none;
    background: linear-gradient(180deg, rgba(253, 253, 255, 0), var(--surface-page));
}
.hx-device__bar { display: flex; align-items: center; gap: .4rem; padding: .7rem 1rem; border-bottom: 1px solid var(--line-soft); background: #FBFAFF; }
.hx-device__bar i { width: .65rem; height: .65rem; border-radius: 50%; background: var(--purple-200); }
.hx-device__bar span { margin-left: .6rem; font-size: .78rem; font-weight: 600; color: var(--ink-faint); }
.hx-device__body { display: grid; grid-template-columns: 1.35fr 1fr; gap: 1rem; padding: 1rem; height: 24rem; background: #FAF9FE; text-align: left; }
.hx-col { display: grid; gap: 1rem; align-content: start; min-width: 0; }

.hx-card { padding: .85rem .95rem; background: #FFFFFF; border: 1px solid var(--line-soft); border-radius: 14px; box-shadow: 0 1px 2px rgba(46, 38, 87, .04); }
.hx-card h4 { margin-bottom: .35rem; font-size: .8rem; }
.hx-welcome {
    display: grid; gap: .35rem; padding: 1rem; border-radius: 14px; color: #FFFFFF;
    background: linear-gradient(135deg, #7A6AF0, #4F3FD0);
}
.hx-welcome__tag { font-size: .7rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #D8D1FF; }
.hx-welcome strong { font-family: var(--font-display); font-size: 1.05rem; }
.hx-welcome small { font-size: .72rem; color: #D8D1FF; }

.hx-row { display: flex; align-items: center; gap: .65rem; padding: .45rem 0; }
.hx-row + .hx-row { border-top: 1px solid var(--line-soft); }
.hx-row__text { display: grid; gap: .1rem; flex: 1 1 auto; min-width: 0; }
.hx-row__text b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .82rem; font-weight: 600; color: var(--ink); }
.hx-row__text small { font-size: .7rem; color: var(--ink-faint); }
.hx-row__pct { font-size: .74rem; font-weight: 600; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.hx-ico { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 9px; background: var(--purple-050); color: var(--purple-700); }
.hx-tile {
    display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; width: 2.1rem; height: 2.1rem;
    border-radius: 9px; color: #FFFFFF; font-size: .58rem; font-weight: 800; letter-spacing: .04em;
}
.hx-dl {
    display: inline-flex; flex-shrink: 0; align-items: center; gap: .3rem; padding: .28rem .6rem; border-radius: 999px;
    background: var(--purple-050); color: var(--purple-700); font-size: .72rem; font-weight: 600;
}
.hx-bar-track { display: block; height: 6px; margin-top: .3rem; overflow: hidden; border-radius: 999px; background: var(--purple-100); }
.hx-bar-track i {
    display: block; height: 100%; width: var(--w, 50%); border-radius: inherit; background: linear-gradient(90deg, #9C8DFF, #6C5CE7);
    animation: hx-grow 1.2s cubic-bezier(.2, .8, .2, 1) var(--d, .8s) both;
}
.hx-bar-track--light { background: rgba(255, 255, 255, .25); }
.hx-bar-track--light i { background: #FFFFFF; }

.hx-chat { display: grid; gap: .5rem; }
.hx-bubble {
    max-width: 88%; margin: 0; padding: .5rem .7rem; border-radius: 12px 12px 12px 4px; background: var(--purple-050);
    font-size: .76rem; line-height: 1.4; color: var(--ink);
    animation: hx-pop .5s cubic-bezier(.2, .9, .3, 1.2) calc(.9s + var(--n, 1) * .5s) both;
}
.hx-bubble b { display: block; margin-bottom: .1rem; font-size: .68rem; color: var(--purple-700); }
.hx-bubble--me { margin-left: auto; border-radius: 12px 12px 4px 12px; background: var(--purple-600); color: #FFFFFF; }
.hx-bubble--file { display: flex; align-items: center; gap: .5rem; background: #FFFFFF; border: 1px solid var(--line); font-weight: 600; }

/* --- Trust pills ---------------------------------------------------------- */
.hx-trust { padding: clamp(1.25rem, 3vw, 2rem) 0 0; }
.hx-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; }
.hx-pills li {
    display: inline-flex; align-items: center; gap: .5rem; padding: .5rem .95rem; border-radius: 999px;
    background: #FFFFFF; border: 1px solid var(--line); font-size: .86rem; font-weight: 600; color: var(--ink-soft);
}
.hx-pills svg { color: var(--purple-600); }

/* --- Sections ------------------------------------------------------------- */
.hx-section { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.hx-section--flush { padding-top: 0; }
.hx-section--tint { background: var(--surface-mute); }
.hx-head { display: flex; flex-direction: column; align-items: center; gap: .7rem; max-width: 46rem; margin-inline: auto; text-align: center; }
.hx-head .lede { margin: 0; }

/* The dark feature panel: What is Bixie */
.hx-panel {
    position: relative; overflow: hidden; display: grid; gap: var(--space-5); align-items: center; border-radius: 28px;
    padding: clamp(1.5rem, 4vw, 3.25rem); color: #FFFFFF;
    background: radial-gradient(120% 140% at 85% 0%, #6C5CE7 0%, #4A3BC4 38%, #2E2657 100%);
}
.hx-panel h2 { color: #FFFFFF; }
.hx-panel .lede { color: #DAD3FF; }
.hx-panel__arcs { position: absolute; right: -9rem; top: -9rem; width: 40rem; max-width: none; pointer-events: none; animation: hx-spin 90s linear infinite; }
.hx-panel__arcs circle { fill: none; stroke: rgba(255, 255, 255, .14); stroke-width: 1.5; }
.hx-panel__text { position: relative; display: grid; justify-items: start; gap: var(--space-3); }
.hx-panel__media { position: relative; }
.hx-panel__media .video-slot { box-shadow: 0 24px 60px rgba(14, 8, 48, .45); }
.hx-tag--dark { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .28); color: #FFFFFF; box-shadow: none; }
.hx-tag--dark svg { color: #FFFFFF; }
@media (min-width: 900px) { .hx-panel { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-7); } }

/* --- Pill tabs ------------------------------------------------------------ */
.hx-tabs-wrap { display: grid; gap: var(--space-4); }
.hx-tabs {
    display: flex; gap: .25rem; width: max-content; max-width: 100%; margin-inline: auto; padding: .3rem; overflow-x: auto;
    background: var(--purple-050); border: 1px solid var(--purple-100); border-radius: 999px;
}
html:not(.js) .hx-tabs { display: none; }
.hx-tab {
    position: relative; display: inline-flex; align-items: center; gap: .45rem; padding: .55rem 1.1rem; border: 0; border-radius: 999px;
    background: transparent; color: var(--ink-soft); font-size: .92rem; font-weight: 600; white-space: nowrap; cursor: pointer;
    transition: background-color .25s, color .25s, box-shadow .25s;
}
.hx-tab:hover { color: var(--purple-700); }
.hx-tab[aria-selected="true"] { background: #FFFFFF; color: var(--purple-700); box-shadow: 0 3px 12px rgba(79, 63, 208, .18); }
.hx-tabs.is-auto .hx-tab[aria-selected="true"]::after {
    content: ""; position: absolute; left: 1.1rem; right: 1.1rem; bottom: .25rem; height: 2px; border-radius: 2px;
    background: var(--purple-600); transform-origin: left; animation: hx-progress 7s linear forwards;
}
.hx-tabpanel {
    display: grid; gap: var(--space-5); align-items: center; padding: clamp(1.25rem, 3vw, 2.25rem);
    background: #FFFFFF; border: 1px solid var(--line); border-radius: 24px; box-shadow: var(--shadow-sm);
}
.hx-tabpanel[hidden] { display: none; }
.hx-tabpanel.is-active { animation: hx-panel-in .55s cubic-bezier(.2, .8, .2, 1) both; }
.hx-tabpanel__text { display: grid; justify-items: start; gap: var(--space-3); }
.hx-list { display: grid; gap: .55rem; font-weight: 500; }
.hx-list li { display: flex; align-items: center; gap: .6rem; }
.hx-visual {
    display: grid; place-items: center; min-height: 15rem; padding: 1.25rem; border-radius: 18px;
    background: linear-gradient(155deg, var(--purple-050), var(--purple-100));
}
.hx-visual .hx-card { width: 100%; max-width: 26rem; box-shadow: 0 14px 34px rgba(79, 63, 208, .14); }
.hx-row--tool { animation: hx-pop .5s cubic-bezier(.2, .9, .3, 1.2) calc(var(--n, 1) * .16s) both; }
.hx-tabpanel .hx-bubble { animation-delay: calc(var(--n, 1) * .4s); }
.hx-tabpanel .hx-bar-track i { animation-delay: var(--d, .3s); }
@media (min-width: 800px) { .hx-tabpanel { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

/* --- Figures -------------------------------------------------------------- */
.hx-stats-section { padding-block: clamp(1.5rem, 4vw, 2.5rem) clamp(.5rem, 2vw, 1rem); }
.hx-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: var(--space-5) 0; margin: 0; text-align: center; }
.hx-stats > div { display: grid; gap: .2rem; padding: .25rem var(--space-3); }
.hx-stats > div + div { border-left: 1px solid var(--line); }
.hx-stats dt {
    font-family: var(--font-display); font-size: clamp(2rem, 3.4vw + 1rem, 3rem); font-weight: 700; line-height: 1.1;
    color: var(--purple-600); font-variant-numeric: tabular-nums;
}
.hx-stats dd { margin: 0; font-size: .92rem; color: var(--ink-soft); }
@media (max-width: 640px) {
    .hx-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hx-stats > div:nth-child(odd) { border-left: 0; }
}

/* --- Join banner ---------------------------------------------------------- */
.hx-join {
    position: relative; overflow: hidden; display: grid; gap: var(--space-5); align-items: center; border-radius: 28px;
    padding: clamp(1.5rem, 4vw, 3rem); color: #FFFFFF;
    background: radial-gradient(90% 130% at 0% 0%, #8273F2 0%, #6C5CE7 38%, #4F3FD0 100%);
}
.hx-join h2 { color: #FFFFFF; }
.hx-join .lede { color: #E8E4FF; }
.hx-join__text { display: grid; justify-items: start; gap: var(--space-3); }
.hx-steps { display: grid; gap: .75rem; }
.hx-steps li {
    display: flex; gap: 1rem; padding: 1rem 1.1rem; border-radius: 16px;
    background: rgba(255, 255, 255, .13); border: 1px solid rgba(255, 255, 255, .24); backdrop-filter: blur(6px);
}
.hx-steps__n {
    display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; width: 2.2rem; height: 2.2rem;
    border-radius: 50%; background: #FFFFFF; color: var(--purple-700); font-weight: 700;
}
.hx-steps h3 { color: #FFFFFF; font-size: 1rem; }
.hx-steps p { margin: .15rem 0 0; font-size: .92rem; color: #E8E4FF; }
.btn--glass { background: rgba(255, 255, 255, .14); color: #FFFFFF; border-color: rgba(255, 255, 255, .45); }
.btn--glass:hover { background: rgba(255, 255, 255, .26); color: #FFFFFF; border-color: #FFFFFF; }
@media (min-width: 900px) { .hx-join { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-7); } }

/* --- Motion --------------------------------------------------------------- */
.event-card, .testimonial .video-slot, .hx-pills li { transition: transform .25s ease, box-shadow .25s ease; }
.event-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.hx-pills li:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(108, 92, 231, .14); }
.js .reveal.is-in.article-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); transition-delay: 0s; }
.hx-actions .btn, .hx-panel .btn, .hx-join .btn { transition: transform .2s ease, box-shadow .2s ease, background-color .18s, color .18s, border-color .18s; }
.hx-actions .btn:hover, .hx-panel .btn:hover, .hx-join .btn:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(79, 63, 208, .22); }

@keyframes hx-fade-up { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes hx-rise { to { transform: translateY(0); } }
@keyframes hx-underline { to { transform: scaleX(1); } }
@keyframes hx-float { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(2.2rem, 1.6rem, 0) scale(1.1); } }
@keyframes hx-device-in { from { opacity: 0; transform: translateY(70px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes hx-bob { from { transform: translateY(0); } to { transform: translateY(-10px); } }
@keyframes hx-grow { from { width: 0; } }
@keyframes hx-pop { from { opacity: 0; transform: translateY(8px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes hx-panel-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes hx-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes hx-spin { to { transform: rotate(360deg); } }

/* --- Smaller screens ------------------------------------------------------ */
@media (max-width: 700px) {
    .hx-device__body { grid-template-columns: 1fr; height: 21rem; }
    .hx-col--side { display: none; }
    .hx-checks { gap: .4rem 1rem; font-size: .88rem; }
    .hx-tabs { margin-inline: calc(var(--gutter) * -1); border-radius: 0; border-inline: 0; padding-inline: var(--gutter); width: auto; max-width: none; }
    .hx-visual { min-height: 12rem; padding: .9rem; }
    .hx-stats > div { padding-inline: var(--space-2); }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
    .hx-line > span { transform: none; }
    .hx-title em::after { transform: scaleX(1); }
}

@media (max-width: 480px) {
    /* All three tabs on one line without sliding sideways. */
    .hx-tabs { gap: .1rem; justify-content: center; }
    .hx-tab { padding: .5rem .8rem; font-size: .86rem; }
    .hx-tab svg { display: none; }
}

/* The panel slides up when it opens by itself. */
.meet.is-open .meet__panel { animation: hx-meet-in .5s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes hx-meet-in { from { opacity: 0; transform: translateY(18px) scale(.97); } to { opacity: 1; transform: none; } }


/* --- Events: the page band and the cards -------------------------------------------------- */
/* Used on the Events page and in "Coming up" on the home page. Every card has the same shape:
   a picture, or a soft placeholder when there is none, with the date set on top of it. */

.ev-top, .pg-top { padding-block: clamp(1.25rem, 3vw, 2rem) 0; }
.ev-hero, .pg-hero {
    position: relative; isolation: isolate; overflow: hidden; display: grid; justify-items: start; gap: var(--space-3);
    padding: clamp(1.5rem, 4vw, 3rem); border: 1px solid var(--line); border-radius: 28px;
    background: linear-gradient(135deg, #ECE7FD 0%, #E3DBFD 100%);
}
.ev-hero::before, .pg-hero::before, .ev-hero::after, .pg-hero::after {
    content: ""; position: absolute; z-index: -1; border-radius: 50%; pointer-events: none; filter: blur(48px);
    animation: hx-float 16s ease-in-out infinite alternate;
}
.ev-hero::before, .pg-hero::before { width: 20rem; height: 20rem; right: -5rem; top: -7rem; background: rgba(160, 140, 250, .5); }
.ev-hero::after, .pg-hero::after { width: 14rem; height: 14rem; right: 22%; bottom: -8rem; background: rgba(205, 192, 255, .6); animation-delay: -7s; }
.ev-hero > *, .pg-hero > * { margin: 0; animation: hx-fade-up .7s cubic-bezier(.2, .8, .2, 1) both; }
.ev-hero > :nth-child(2), .pg-hero > :nth-child(2) { animation-delay: .08s; }
.ev-hero > :nth-child(3), .pg-hero > :nth-child(3) { animation-delay: .16s; }
.ev-hero > :nth-child(4), .pg-hero > :nth-child(4) { animation-delay: .24s; }
.ev-hero h1, .pg-hero h1 { color: var(--heading); max-width: 24ch; }
.ev-hero .lede, .pg-hero .lede { max-width: 38rem; }
.ev-facts, .pg-facts { display: flex; flex-wrap: wrap; gap: .5rem; padding: 0; list-style: none; }
.ev-facts li, .pg-facts li {
    display: inline-flex; align-items: center; gap: .45rem; padding: .35rem .85rem; border-radius: 999px;
    background: rgba(255, 255, 255, .78); border: 1px solid rgba(108, 92, 231, .18);
    font-size: .88rem; font-weight: 600; color: var(--heading);
}
.ev-facts svg, .pg-facts svg { color: var(--purple-600); flex-shrink: 0; }

.ev-list-section, .pg-after { padding-top: clamp(1.5rem, 4vw, 2.5rem); }
.pg-after .plans { margin-top: 0; }

.event-list { align-items: stretch; grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); gap: var(--space-5); }
.event-card { box-shadow: 0 1px 2px rgba(46, 38, 87, .04); }
.event-card:hover { border-color: var(--purple-200); }
.event-card__media {
    position: relative; display: grid; place-items: center; aspect-ratio: 16 / 7; overflow: hidden;
    background: linear-gradient(135deg, var(--purple-100) 0%, #D8CFFA 100%); color: var(--purple-600);
}
.event-card__media .event-card__image { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; transition: transform .6s ease; }
.event-card:hover .event-card__image { transform: scale(1.04); }
.event-card__glyph { opacity: .5; }
.event-card__media.is-plain::after {
    content: ""; position: absolute; width: 12rem; height: 12rem; right: -3rem; bottom: -6rem; border-radius: 50%;
    background: rgba(255, 255, 255, .35); pointer-events: none;
}
.event-card__date {
    position: absolute; left: var(--space-4); top: var(--space-4); width: 3.3rem; padding: 0 0 .3rem; overflow: hidden;
    text-align: center; border-radius: var(--radius-md); background: #FFFFFF; box-shadow: 0 6px 18px rgba(46, 38, 87, .2);
    display: flex; flex-direction: column; line-height: 1.1;
}
.event-card__date span { padding: .18rem 0; background: var(--purple-600); color: #FFFFFF; font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.event-card__date strong { padding-top: .25rem; font-family: var(--font-display); font-size: 1.35rem; font-weight: 600; color: var(--heading); }
.event-card__body { display: block; padding: var(--space-4) var(--space-5) var(--space-3); }

.ev-empty {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); padding: var(--space-5);
    border: 1px dashed var(--line-strong); border-radius: var(--radius-lg); background: var(--surface-tint);
}
.ev-empty p { flex: 1 1 14rem; margin: 0; color: var(--ink-soft); }
.ev-empty__icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 44px; height: 44px; border-radius: var(--radius-md); background: var(--purple-100); color: var(--purple-700); }

@media (max-width: 34rem) {
    .event-card__body { padding: var(--space-4) var(--space-4) var(--space-3); }
}
/* While someone fills in "Keep me posted", the other cards keep their own height. */
.event-list:has(.event-card__keep[open]) { align-items: start; }


/* --- Page band for About, Contact, Privacy and Terms: the same band as Events, with room for a picture --- */
.pg-hero--split { align-items: center; }
@media (min-width: 62rem) {
    .pg-hero--split { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--space-7); }
    .pg-hero--split > .video-slot { width: 100%; }
}
.pg-hero--split > .stack { display: grid; gap: var(--space-3); justify-items: start; }
.pg-hero--split > .stack > * { margin: 0; }

/* A narrow card for text pages (Contact, Privacy, Terms). */
.pg-body { max-width: 46rem; }
.pg-card {
    display: grid; gap: var(--space-4); padding: clamp(1.25rem, 3vw, 2rem);
    background: var(--surface); border: 1px solid var(--line); border-radius: 22px; box-shadow: 0 1px 2px rgba(46, 38, 87, .04);
}
.pg-card > * { margin: 0; }
.pg-card__label { font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); }
.pg-card__big { font-family: var(--font-display); font-size: clamp(1.2rem, 2.4vw, 1.6rem); font-weight: 600; letter-spacing: -.01em; color: var(--heading); overflow-wrap: anywhere; }
.pg-points { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.pg-points li { display: grid; grid-template-columns: 1.6rem 1fr; gap: var(--space-3); align-items: start; }
.pg-points svg { color: var(--purple-600); margin-top: .2rem; }
.pg-note { display: flex; gap: var(--space-3); align-items: start; padding: var(--space-4); border-radius: 16px; background: var(--purple-050); color: var(--ink-soft); }
.pg-note svg { flex-shrink: 0; margin-top: .2rem; color: var(--purple-600); }
.pg-note > span { margin: 0; }


/* --- Sign-up, log-in and the other account screens: the page band's colours behind a card --- */
.auth { position: relative; isolation: isolate; overflow: hidden; background: linear-gradient(135deg, #ECE7FD 0%, #E3DBFD 100%); }
.auth::before, .auth::after {
    content: ""; position: absolute; z-index: -1; border-radius: 50%; pointer-events: none; filter: blur(48px);
    animation: hx-float 16s ease-in-out infinite alternate;
}
.auth::before { width: 22rem; height: 22rem; right: -6rem; top: -8rem; background: rgba(160, 140, 250, .5); }
.auth::after { width: 16rem; height: 16rem; left: -4rem; bottom: -7rem; background: rgba(205, 192, 255, .6); animation-delay: -7s; }
.auth__card { border-radius: 24px; box-shadow: 0 18px 40px -22px rgba(46, 38, 87, .35); }
.auth__card .hx-tag { align-self: flex-start; }
@media (prefers-reduced-motion: reduce) { .auth::before, .auth::after { animation: none; } }

/* The menu behind the picture in the slim header shows who is signed in; it is not a link. */
.user-menu__who--static:hover { background: none; }

/* In the slim header the picture menu is the only thing on the right, so it shows on a phone too. */
.site-header--slim .header-actions { display: flex; }

/* The colour fills the screen under the header, so there is no white strip below the card. */
.auth { min-height: calc(100vh - 65px); }