:root {
  --bg: #4a8fdf;
  --bg-top: #6aafff;
  --bg-bottom: #4a8fdf;
  --bg-deep: #122535;
  --surface: rgba(255, 255, 255, 0.14);
  --surface-strong: rgba(255, 255, 255, 0.22);
  --line: rgba(255, 255, 255, 0.28);
  --text: #ffffff;
  --muted: rgba(255, 255, 255, 0.82);
  --accent: #ffffff;
  --accent-strong: #eaf3ff;
  --accent-soft: #a9ceff;
  --shadow: 0 22px 60px rgba(18, 37, 53, 0.18);
  --radius-xl: 34px;
  --radius-lg: 28px;
  --radius-md: 20px;
  --radius-sm: 14px;
  --shell: min(1180px, calc(100% - 40px));
  font-size: 16px;
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 110px;
  /* Canvas color: mobile Safari paints the overscroll AND the strip behind
     the URL/status bar with this, so it must match the gradient's LIGHT top —
     where the eye first lands below the browser chrome. Both overscroll ends
     read as this light blue. (Don't add an abspos strip to darken the bottom:
     a box positioned below the content extends the scroll area and produces a
     phantom extra page of scroll on mobile.) */
  background-color: var(--bg-top);
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: "Manrope", sans-serif;
  color: var(--text);
  /* Solid fallback = LIGHT top color (not the gradient's dark end): some
     browsers propagate the body's background-color to the overscroll canvas
     even when html has one, so this keeps the top overscroll matching the
     page top. The opaque gradient covers the body box, so this color only
     ever shows in the overscroll region. */
  background: linear-gradient(180deg, var(--bg-top) 0%, var(--bg-bottom) 100%) var(--bg-top);
  line-height: 1.6;
  /* Establish a BFC so the first child's top margin (.site-header's 18px)
     can't collapse through the body, which would lift the gradient down 18px
     and expose a flat canvas-colored band at the nav bar instead of the
     gradient's top. flow-root doesn't clip, so sticky/scroll are unaffected. */
  display: flow-root;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.18;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.55) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.55) 1px, transparent 1px);
  background-size: 96px 96px;
  mask: linear-gradient(180deg, rgba(0, 0, 0, 0.45), transparent 74%);
}

body.nav-open {
  overflow: hidden;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
textarea,
select {
  font: inherit;
}

.shell {
  width: var(--shell);
  margin: 0 auto;
}

.site-header {
  position: sticky;
  top: 18px;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 18px;
  padding: 16px 22px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(18px);
  box-shadow: 0 16px 40px rgba(18, 37, 53, 0.08);
}

.logo {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.logo-badge {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 56px;
  height: 56px;
}

.logo-image {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  box-shadow: 0 0 0 2.5px rgba(255, 255, 255, 0.95);
}

.logo-lockup {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.logo-lockup strong {
  font-size: 1.08rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.logo-lockup span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-top: 4px;
}

.nav {
  display: flex;
  align-items: center;
  gap: 8px;
}

.nav a {
  padding: 10px 14px;
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.95rem;
  font-weight: 700;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.nav a:hover,
.nav a:focus-visible,
.footer-nav a:hover,
.footer-nav a:focus-visible {
  color: var(--text);
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-1px);
}

.nav-cta {
  background: #ffffff;
  color: #4a8fdf !important;
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  width: 52px;
  height: 52px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  color: var(--text);
  cursor: pointer;
}

.nav-toggle span {
  width: 18px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.nav-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.nav-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

main {
  padding: 34px 0 68px;
}

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  gap: 34px;
  align-items: center;
  padding: 48px 0 32px;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 13px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  color: var(--accent-strong);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.eyebrow.muted {
  background: rgba(255, 255, 255, 0.14);
  color: var(--muted);
}

.hero h1,
.section-heading h2,
.screen-copy h4,
.brand-card-copy h2,
.signup-copy h2,
.legal h1 {
  margin: 0;
  font-family: "Fraunces", serif;
  font-weight: 700;
  letter-spacing: -0.04em;
}

.hero h1 {
  margin-top: 18px;
  font-size: clamp(3.3rem, 8vw, 5.6rem);
  line-height: 0.95;
}

.hero-text {
  max-width: 38rem;
  margin: 22px 0 30px;
  color: var(--muted);
  font-size: 1.06rem;
}

.hero-actions,
.hero-points {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 14px 24px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 0.98rem;
  font-weight: 800;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.button:hover,
.button:focus-visible,
.carousel-arrow:hover,
.carousel-arrow:focus-visible,
.carousel-dot:hover,
.carousel-dot:focus-visible {
  outline: none;
  transform: translateY(-1px);
}

.button.primary {
  background: #ffffff;
  color: #4a8fdf;
  box-shadow: 0 14px 30px rgba(18, 37, 53, 0.22);
}

.button.secondary {
  border-color: var(--line);
  background: rgba(255, 255, 255, 0.16);
  color: var(--text);
}

.hero-points {
  margin-top: 24px;
}

.hero-points span {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  color: var(--muted);
  font-size: 0.92rem;
  font-weight: 700;
}

.hero-visual {
  position: relative;
  min-height: 800px;
}

.ambient {
  position: absolute;
  border-radius: 50%;
  filter: blur(4px);
}

.ambient-a {
  top: 30px;
  right: 10px;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
  animation: drift 12s ease-in-out infinite;
}

.ambient-b {
  bottom: 10px;
  left: -18px;
  width: 220px;
  height: 220px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0));
  animation: drift 10s ease-in-out infinite reverse;
}

.glass-panel {
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(22px);
  box-shadow: var(--shadow);
}

.brand-card {
  position: absolute;
  top: 8px;
  left: 8px;
  right: 120px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 24px;
  border-radius: var(--radius-xl);
}

.brand-card-copy {
  flex: 1 1 auto;
}

.brand-card-copy h2 {
  margin-top: 14px;
  font-size: 1.7rem;
  line-height: 1.03;
}

.brand-card-copy p:last-child {
  margin-top: 12px;
  color: var(--muted);
}

.brand-card-logo {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 108px;
  height: 108px;
}

.brand-card-logo img {
  width: 108px;
  height: 108px;
  border-radius: 24px;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.95);
}

.device-cluster {
  position: absolute;
  inset: 132px 0 0;
}

.device-frame {
  position: absolute;
  width: clamp(228px, 34vw, 320px);
  filter: drop-shadow(0 30px 45px rgba(18, 37, 53, 0.22));
}

.device-frame img {
  display: block;
  width: 100%;
}

.device-main {
  top: 48px;
  right: 34px;
  transform: rotate(5deg);
  animation: float 8s ease-in-out infinite;
}

.device-secondary {
  bottom: 6px;
  left: 36px;
  transform: rotate(-8deg);
  animation: float 9s ease-in-out infinite reverse;
}

.floating-note {
  position: absolute;
  right: 0;
  bottom: 48px;
  max-width: 260px;
  padding: 18px 20px;
  border-radius: 22px;
  background: rgba(18, 37, 53, 0.95);
  color: #fff;
  box-shadow: 0 18px 36px rgba(18, 37, 53, 0.22);
}

.floating-note strong {
  display: block;
  margin-bottom: 6px;
  font-size: 1rem;
}

.floating-note span {
  color: rgba(255, 255, 255, 0.74);
  font-size: 0.95rem;
}

.value-strip,
.steps,
.feature-grid {
  display: grid;
  gap: 18px;
}

.value-strip {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding-top: 16px;
}

.value-card,
.step-card,
.feature-card {
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.14);
  box-shadow: 0 18px 44px rgba(18, 37, 53, 0.06);
}

.value-card span,
.feature-kicker,
.step-num {
  color: var(--accent-strong);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.value-card h3,
.step-card h3,
.feature-card h3 {
  margin: 14px 0 10px;
  font-size: 1.34rem;
  line-height: 1.2;
}

.value-card p,
.step-card p,
.feature-card p,
.section-heading p:last-child,
.screen-copy p,
.signup-copy p,
.form-note,
.faq p,
.legal p,
.legal ul {
  color: var(--muted);
}

.content-section {
  padding-top: 78px;
}

.section-heading {
  max-width: 760px;
  margin-bottom: 28px;
}

.section-heading.narrow {
  max-width: 680px;
}

.section-heading h2 {
  margin-top: 16px;
  font-size: clamp(2.5rem, 6vw, 4.25rem);
  line-height: 0.96;
}

.steps {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.section-cta {
  display: flex;
  margin-top: 26px;
}

.showcase-shell {
  padding: 30px;
  border-radius: 32px;
}

.showcase-intro {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 18px;
  margin-bottom: 26px;
}

.showcase-intro h3 {
  margin: 14px 0 0;
  max-width: 30rem;
  font-size: 1.55rem;
  line-height: 1.18;
}

.carousel-arrow {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  color: var(--text);
  cursor: pointer;
  flex-shrink: 0;
}

.carousel-arrow span {
  font-size: 1.3rem;
  line-height: 1;
}

.carousel-window {
  position: relative;
  min-height: 565px;
  touch-action: pan-y;
}

.screen-card {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
  gap: 26px;
  align-items: center;
  opacity: 0;
  transform: translateY(18px) scale(0.985);
  pointer-events: none;
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.screen-card.is-active {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.screen-image-wrap {
  display: grid;
  place-items: center;
  min-height: 520px;
  padding: 34px;
  border: 1px solid var(--line);
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0.1));
}

.screen-image-wrap img {
  width: auto;
  max-height: 470px;
  filter: drop-shadow(0 20px 30px rgba(18, 37, 53, 0.16));
}

.screen-copy {
  padding: 8px 4px;
}

.screen-label {
  display: inline-flex;
  padding: 9px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  color: var(--accent-strong);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.screen-copy h4 {
  margin-top: 18px;
  font-size: clamp(2rem, 5vw, 3rem);
  line-height: 0.98;
}

.screen-copy p {
  margin-top: 14px;
  font-size: 1rem;
}

.carousel-nav {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 24px;
}

.carousel-dots {
  display: flex;
  align-items: center;
  gap: 10px;
}

.carousel-dot {
  width: 12px;
  height: 12px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  transition: width 0.2s ease, background 0.2s ease;
}

.carousel-dot.is-active {
  width: 40px;
  background: var(--accent);
}

.feature-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.feature-card-dark {
  background: rgba(18, 37, 53, 0.96);
  color: #fff;
}

.feature-card-dark .feature-kicker {
  color: var(--accent-soft);
}

.feature-card-dark p {
  color: rgba(255, 255, 255, 0.72);
}

.faq-list {
  display: grid;
  gap: 12px;
}

.faq details {
  padding: 20px 22px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.14);
}

.faq summary {
  cursor: pointer;
  font-size: 1.03rem;
  font-weight: 800;
  list-style: none;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq p {
  margin: 12px 0 0;
}

.signup-card {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: 24px;
  padding: 32px;
  border-radius: 32px;
}

.signup-copy h2 {
  margin-top: 16px;
  font-size: clamp(2.3rem, 5vw, 3.6rem);
  line-height: 0.98;
}

.signup-form {
  display: grid;
  gap: 16px;
  align-content: start;
}

.signup-form label {
  display: grid;
  gap: 10px;
}

.signup-form label span {
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.signup-form input {
  min-height: 56px;
  padding: 0 18px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.92);
  color: #1f3f63;
  caret-color: #4a8fdf;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.signup-form input:focus,
.signup-form input:focus-visible {
  border-color: rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.28);
}

.form-note {
  min-height: 1.5em;
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
}

.site-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding: 24px 0 40px;
  border-top: 1px solid var(--line);
}

.site-footer p {
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
}

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.footer-nav a {
  padding: 8px 12px;
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.92rem;
  font-weight: 700;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

.legal .site-header {
  margin-top: 18px;
}

.legal .legal-content {
  width: var(--shell);
  margin: 40px auto 0;
  padding: 34px;
  border: 1px solid var(--line);
  border-radius: 32px;
  background: rgba(255, 255, 255, 0.14);
  box-shadow: var(--shadow);
}

.legal h1 {
  font-size: clamp(2.6rem, 6vw, 4.2rem);
  line-height: 0.95;
}

.legal h2 {
  margin: 34px 0 12px;
  font-size: 1.24rem;
}

.legal p,
.legal ul {
  margin: 0 0 14px;
}

.legal ul {
  padding-left: 1.2rem;
}

@keyframes drift {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  50% {
    transform: translate3d(8px, -14px, 0) scale(1.04);
  }
}

@keyframes float {
  0%,
  100% {
    transform: translateY(0) rotate(var(--tilt, 0deg));
  }
  50% {
    transform: translateY(-12px) rotate(var(--tilt, 0deg));
  }
}

.device-main {
  --tilt: 5deg;
}

.device-secondary {
  --tilt: -8deg;
}

@media (max-width: 1250px) {
  /* narrower copy column wraps the brand card taller; keep it over ≤1/4 of the phone */
  .hero-visual {
    min-height: 870px;
  }
}

@media (max-width: 1100px) {
  .hero {
    grid-template-columns: 1fr;
  }

  .hero-visual {
    min-height: 700px;
  }

  .brand-card {
    right: 40px;
  }

  .value-strip,
  .steps,
  .feature-grid,
  .signup-card {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .showcase-intro {
    align-items: flex-start;
  }

  .screen-card {
    grid-template-columns: 1fr;
  }

  /* Stacked layout: the step number sits on the same line as the heading. */
  .screen-copy {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 12px;
  }

  .screen-copy .screen-label {
    flex-shrink: 0;
  }

  .screen-copy h4 {
    margin-top: 0;
    flex: 1 1 0;
    min-width: 0;
  }

  .screen-copy p {
    width: 100%;
  }

  .carousel-window {
    min-height: 760px;
  }

  .screen-image-wrap {
    min-height: 420px;
  }
}

@media (max-width: 860px) {
  .site-header {
    top: 12px;
    border-radius: 30px;
  }

  .nav-toggle {
    display: inline-flex;
  }

  .nav {
    position: absolute;
    top: calc(100% + 12px);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 28px;
    background: rgba(62, 122, 194, 0.97);
    backdrop-filter: blur(18px);
    box-shadow: var(--shadow);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-8px);
    transition: opacity 0.2s ease, transform 0.2s ease;
  }

  .nav.show {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }

  .nav a {
    text-align: center;
  }

  .value-strip,
  .steps,
  .feature-grid,
  .signup-card {
    grid-template-columns: 1fr;
  }

  .brand-card {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    margin-bottom: 24px;
  }

  .device-cluster {
    position: relative;
    inset: auto;
    min-height: 430px;
  }

  .device-main {
    right: 14px;
  }

  .device-secondary {
    left: 10px;
  }

  .floating-note {
    right: 20px;
    bottom: 10px;
  }

  .site-footer {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 640px) {
  :root {
    --shell: min(100% - 20px, 1180px);
  }

  .site-header {
    padding: 14px 16px;
  }

  .logo-lockup span {
    display: none;
  }

  .hero {
    padding-top: 24px;
  }

  .hero h1 {
    font-size: clamp(2.9rem, 18vw, 4.4rem);
  }

  .brand-card {
    padding: 20px;
  }

  .brand-card-logo {
    width: 72px;
    height: 72px;
  }

  .brand-card-logo img {
    width: 72px;
    height: 72px;
    border-radius: 18px;
  }

  .hero-visual {
    min-height: auto;
  }

  .device-cluster {
    min-height: 380px;
  }

  .device-frame {
    width: min(63vw, 260px);
  }

  .device-main {
    top: 24px;
  }

  .device-secondary {
    bottom: 0;
  }

  .floating-note {
    left: 18px;
    right: 18px;
    max-width: none;
    bottom: -8px;
  }

  .content-section {
    padding-top: 64px;
  }

  .showcase-shell,
  .signup-card,
  .legal .legal-content {
    padding: 22px;
  }

  .showcase-intro {
    flex-direction: column;
  }

  .carousel-window {
    min-height: 630px;
  }

  .screen-image-wrap {
    min-height: 320px;
    padding: 20px;
  }

  .screen-image-wrap img {
    max-height: 360px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  [data-reveal] {
    opacity: 1;
    transform: none;
  }
}

/* -------------------------------------------------------------------------- */
/* Events page                                                                */
/* -------------------------------------------------------------------------- */

.events-page main.events-main {
  padding-top: 32px;
  padding-bottom: 80px;
}

.events-intro {
  text-align: center;
  padding: 24px 20px 32px;
  max-width: 720px;
  margin: 0 auto;
}

.events-intro h1 {
  font-family: "Fraunces", serif;
  font-size: clamp(2rem, 5vw, 2.7rem);
  line-height: 1.1;
  margin: 0 0 14px;
  color: var(--text);
}

.events-intro p {
  color: var(--muted);
  font-size: 1.06rem;
  margin: 0;
}

.events-filters {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0 0 34px;
}

.events-filter-btn {
  padding: 8px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  font: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease,
    transform 0.18s ease;
}

.events-filter-btn:hover {
  background: rgba(255, 255, 255, 0.28);
  transform: translateY(-1px);
}

.events-filter-btn.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: #4a8fdf;
}

.events-grid {
  display: grid;
  /* min(320px, 100%) lets the track shrink on viewports under ~340px
     (Display Zoom / page zoom), where a hard 320px floor overflows */
  grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
  gap: 22px;
}

.events-grid[aria-busy="true"] {
  min-height: 240px;
}

.event-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.14);
  box-shadow: 0 18px 44px rgba(18, 37, 53, 0.06);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  opacity: 0;
  transform: translateY(14px);
  animation: eventCardIn 0.55s ease forwards;
}

a.event-card:hover,
a.event-card:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 26px 60px rgba(18, 37, 53, 0.12);
  outline: none;
}

@keyframes eventCardIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.event-card-image {
  aspect-ratio: 16 / 10;
  background-color: var(--surface-strong);
  background-image: linear-gradient(135deg, #a9ceff, #7fb5f5);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.event-card-body {
  padding: 22px 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

.event-card-kicker {
  color: var(--accent-strong);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.event-card-title {
  font-family: "Fraunces", serif;
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.2;
  margin: 0;
  color: var(--text);
  overflow-wrap: anywhere;
}

.event-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  color: var(--muted);
  font-size: 0.94rem;
}

.event-card-vendor {
  color: var(--muted);
  font-size: 0.86rem;
  padding-top: 10px;
  margin-top: 4px;
  border-top: 1px solid var(--line);
}

.event-card-cta {
  color: var(--accent-strong);
  font-weight: 700;
  font-size: 0.92rem;
  margin-top: auto;
  padding-top: 6px;
}

.events-empty,
.events-error {
  text-align: center;
  padding: 60px 20px;
  color: var(--muted);
}

.events-error strong {
  color: var(--accent-strong);
}

/* must sit after the base events rules — same specificity, source order wins */
@media (max-width: 640px) {
  .events-intro {
    padding: 16px 4px 24px;
  }

  /* one swipeable chip row instead of four stacked rows of filters;
     negative margin bleeds the scroller to the viewport edge (shell
     gutter is 10px at this width) so chips slide under the screen edge */
  .events-filters {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin: 0 -10px 26px;
    padding: 2px 12px;
  }

  .events-filters::-webkit-scrollbar {
    display: none;
  }

  .events-filter-btn {
    flex: 0 0 auto;
  }

  .events-grid {
    gap: 16px;
  }

  .event-card-body {
    padding: 18px 16px 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .event-card {
    opacity: 1;
    transform: none;
    animation: none;
  }
}