/* ===================================================================
   GLOBAL KIRTAN — Landing Page
   Apple-grade, premium, sacred. Deep oxblood + warm gold on warm ivory.
   =================================================================== */

:root {
  /* Brand */
  --maroon:        #67111e;
  --maroon-deep:   #4a0c15;
  --maroon-soft:   #8b1f2d;
  --footer-ground: #2c0810;
  --gold:          #c29a55;
  --gold-soft:     #e6c98a;
  --dark-glass:    linear-gradient(135deg,
                    rgba(255,255,255,.18) 0px,
                    rgba(255,255,255,.10) 6px,
                    rgba(139,31,45,.90) 18px,
                    rgba(103,17,30,.72) 56%,
                    rgba(194,154,85,.18) 100%);

  /* Neutrals — warm, Apple-ivory */
  --ink:           #1c1a1a;
  --ink-2:         #4a4644;
  --ink-3:         #877f7b;
  --ivory:         #fbf8f4;
  --ivory-2:       #f4eee6;
  --paper:         #ffffff;
  --line:          rgba(28, 26, 26, 0.10);

  /* Type */
  --serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

  --maxw: 1180px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--ivory);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

::selection { background: var(--maroon); color: #fff; }

/* ---------- Layout helpers ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: clamp(20px, 5vw, 40px); }
.wrap--narrow { max-width: 820px; }
.center { text-align: center; }

.section { padding-block: clamp(72px, 11vw, 160px); position: relative; }

.eyebrow {
  display: inline-block;
  font-size: .76rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase;
  color: var(--maroon);
  margin-bottom: 1.1rem;
}
.eyebrow--light { color: var(--gold-soft); }

.display {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2rem, 5.4vw, 3.6rem);
  line-height: 1.08;
  letter-spacing: -0.015em;
  max-width: 18ch;
  margin-bottom: 1.4rem;
}
.display--light { color: var(--ivory); max-width: 22ch; }
.muted { color: var(--ink-3); }

.lede {
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  color: var(--ink-2);
  max-width: 58ch;
  font-weight: 400;
}
.lede--light { color: rgba(251, 248, 244, 0.78); margin-inline: auto; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4em;
  font-family: var(--sans); font-weight: 600; font-size: .98rem;
  padding: .85em 1.6em; border-radius: 100px; cursor: pointer; border: 0;
  text-decoration: none;
  transition: transform .4s var(--ease), background .3s, color .3s, box-shadow .4s var(--ease), filter .3s;
  will-change: transform;
}
.btn:hover { transform: translateY(-2px); }
.btn:is(a):hover { filter: brightness(1.15); }
.btn:active { transform: translateY(0); }
.btn--solid { background: var(--maroon); color: #fff; border: 1px solid rgba(255,255,255,.16); box-shadow: 0 8px 30px -10px rgba(103,17,30,.6); }
.btn--solid:hover { box-shadow: 0 16px 44px -12px rgba(103,17,30,.7); }
.btn--ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.btn--ghost:hover { box-shadow: inset 0 0 0 1px var(--ink); }
.btn--pill { background: var(--dark-glass); color: #fff; padding: .6em 1.25em; font-size: .9rem; border: 1px solid rgba(255,255,255,.16); }
.btn--pill:hover { background: var(--dark-glass); }
.btn--lg { padding: 1em 2em; font-size: 1.05rem; }
.btn--block { width: 100%; }
.btn--light { background: var(--ivory); color: var(--maroon); box-shadow: 0 12px 36px -14px rgba(0,0,0,.55); }
.btn--light:hover { background: #fff; }
.arrow { transition: transform .35s var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }

/* ===================================================================
   SCROLL PROGRESS
   =================================================================== */
.scroll-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0%;
  background: linear-gradient(90deg, var(--maroon), var(--gold));
  z-index: 1000; transition: width .1s linear;
}

.ambient-rings {
  display: none;          /* disabled: thin full-page pulsing rings */
  --ambient-x: 50vw;
  --ambient-y: 42vh;
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
  opacity: .5;
}
.ambient-rings span {
  position: absolute;
  left: var(--ambient-x);
  top: var(--ambient-y);
  width: clamp(180px, 28vw, 460px);
  aspect-ratio: 1;
  border: 1px solid rgba(103, 17, 30, .105);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(.42);
  animation: ambient-pulse 18s linear infinite;
}
.ambient-rings span:nth-child(2) {
  border-color: rgba(194, 154, 85, .14);
  animation-delay: -4.5s;
}
.ambient-rings span:nth-child(3) {
  width: clamp(260px, 42vw, 680px);
  border-color: rgba(103, 17, 30, .075);
  animation-delay: -9s;
}
.ambient-rings span:nth-child(4) {
  width: clamp(340px, 58vw, 920px);
  border-color: rgba(194, 154, 85, .09);
  animation-delay: -13.5s;
}
@keyframes ambient-pulse {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.42); }
  18% { opacity: .78; }
  72% { opacity: .16; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.18); }
}

/* ===================================================================
   NAV
   =================================================================== */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 900;
  transition: background .4s var(--ease), box-shadow .4s var(--ease), backdrop-filter .4s,
              transform .35s var(--ease);
}
/* Scrolling down = reading, so the bar gets out of the way; scrolling up = reaching for
   navigation, so it comes straight back. Applied by main.js, never while the menu is open. */
.nav--hidden { transform: translateY(-100%); }
.nav__inner {
  max-width: var(--maxw); margin-inline: auto;
  padding: 14px clamp(20px, 5vw, 40px);
  display: flex; align-items: center; justify-content: space-evenly; gap: 1.5rem;
}
.nav.is-scrolled {
  background: rgba(251, 248, 244, 0.72);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  box-shadow: 0 1px 0 var(--line);
}
.nav__brand { display: flex; align-items: center; gap: clamp(.4rem, 2vw, .6rem); min-width: 0; }
.nav__logo { width: clamp(26px, 7vw, 34px); height: clamp(26px, 7vw, 34px); object-fit: contain; flex-shrink: 0; }
.nav__name {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(.8rem, 3.4vw, 1.05rem);
  letter-spacing: .08em;
  color: var(--maroon);
  white-space: nowrap;
}

.nav__links { display: flex; gap: clamp(1rem, 2.4vw, 2.1rem); }
.nav__links a {
  font-size: .92rem; font-weight: 500; color: var(--ink-2); position: relative; padding: .2em 0;
  transition: color .12s ease-out;
}
.nav__links a:hover { color: var(--maroon); text-shadow: 0 0 .3px currentColor, 0 0 .3px currentColor; }
.nav__links a.is-active { color: var(--maroon-deep); font-weight: 700; }
.nav__links a:not(:first-child)::before {
  content: '·';
  position: absolute;
  top: 50%; left: calc(clamp(1rem, 2.4vw, 2.1rem) / -2);
  transform: translate(-50%, -50%);
  color: #8b6a2a;
  background: linear-gradient(180deg, var(--maroon-soft), var(--gold));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  font-size: 1.3em;
  font-weight: 700;
  pointer-events: none;
}

.nav__actions { display: none; align-items: center; gap: .8rem; }
.nav__burger {
  display: none; position: relative; cursor: pointer;
  width: 42px; height: 42px; border-radius: 100px;
  background: rgba(103,17,30,.06); border: 1px solid rgba(103,17,30,.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5);
  transition: background .3s, box-shadow .3s, transform .3s var(--ease);
}
.nav__burger:hover { background: rgba(103,17,30,.12); }
.nav__burger:active { transform: scale(.93); }
.nav__burger span {
  position: absolute; left: 50%; width: 17px; height: 2px; background: var(--maroon); border-radius: 2px;
  transform: translateX(-50%);
  transition: transform .4s var(--ease), opacity .3s;
}
.nav__burger span:nth-child(1) { top: 15px; }
.nav__burger span:nth-child(2) { top: 20px; }
.nav__burger span:nth-child(3) { top: 25px; }
.nav.is-open .nav__burger { background: rgba(103,17,30,.12); }
.nav.is-open .nav__burger span:nth-child(1) { transform: translateX(-50%) translateY(5px) rotate(45deg); }
.nav.is-open .nav__burger span:nth-child(2) { opacity: 0; }
.nav.is-open .nav__burger span:nth-child(3) { transform: translateX(-50%) translateY(-5px) rotate(-45deg); }

/* Nav sitting over a dark photo banner (About page) — reverts once .is-scrolled takes over with its own opaque backing.
   Desktop only: on mobile the links live inside their own always-opaque popout card (see the 720px block below),
   so they must never inherit this on-photo color swap — that mismatch was the low-contrast bug. */
@media (min-width: 721px) {
  .nav--on-dark:not(.is-scrolled) .nav__logo { content: url('../img/logo-cream.png'); }
  .nav--on-dark:not(.is-scrolled) .nav__name { color: var(--ivory); }
  .nav--on-dark:not(.is-scrolled) .nav__links a { color: rgba(251,248,244,.85); }
  .nav--on-dark:not(.is-scrolled) .nav__links a:hover { color: #fff; }
  .nav--on-dark:not(.is-scrolled) .nav__links a.is-active { color: var(--gold-soft); }
  .nav--on-dark:not(.is-scrolled) .nav__links a:not(:first-child)::before {
    background: linear-gradient(180deg, var(--gold-soft), var(--gold));
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  }
}

/* ===================================================================
   HERO
   =================================================================== */
.hero {
  --hero-photo-height: 44.77vw;
  min-height: 112svh; display: flex; flex-direction: column; justify-content: flex-start;
  position: relative; overflow: hidden;
  padding: 0 clamp(20px, 5vw, 40px) 60px;
  background:
    radial-gradient(120% 90% at 50% -10%, #fff 0%, var(--ivory) 45%, var(--ivory-2) 100%);
}
.hero__photo {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: var(--hero-photo-height);
  background: url('../img/hero-kirtan.jpg') center top / 100% auto no-repeat;
  z-index: 0;
  will-change: transform;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 52%, rgba(0,0,0,.78) 69%, rgba(0,0,0,.3) 86%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 52%, rgba(0,0,0,.78) 69%, rgba(0,0,0,.3) 86%, transparent 100%);
}
.hero__photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, .48) 0%,
    rgba(251, 248, 244, .32) 56%,
    rgba(251, 248, 244, .78) 84%,
    var(--ivory) 100%
  );
}
.hero__aura {
  position: absolute; top: 56%; left: 50%; width: min(900px, 120vw); aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(194,154,85,.20) 0%, rgba(103,17,30,.10) 35%, transparent 62%);
  filter: blur(10px); z-index: 0; animation: breathe 9s var(--ease) infinite;
}
@keyframes breathe { 0%,100% { transform: translate(-50%,-50%) scale(1); opacity: .9 } 50% { transform: translate(-50%,-50%) scale(1.12); opacity: 1 } }

.hero__rings { display: none; position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero__rings span {
  position: absolute; top: 60%; left: 50%; border: 1px solid rgba(103,17,30,.14); border-radius: 50%;
  transform: translate(-50%, -50%);
}
.hero__rings span:nth-child(1) { width: 340px; height: 340px; animation: ripple 7s var(--ease) infinite; }
.hero__rings span:nth-child(2) { width: 560px; height: 560px; animation: ripple 7s var(--ease) .9s infinite; }
.hero__rings span:nth-child(3) { width: 800px; height: 800px; animation: ripple 7s var(--ease) 1.8s infinite; }
@keyframes ripple { 0% { opacity: .5; transform: translate(-50%,-50%) scale(.85) } 70% { opacity: .12 } 100% { opacity: 0; transform: translate(-50%,-50%) scale(1.1) } }

.hero__content {
  position: relative;
  z-index: 3;
  max-width: 880px;
  margin: calc(var(--hero-photo-height) - clamp(4.7rem, 9vw, 8rem)) auto 0;
  padding-top: 0;
  text-align: center;
}
.hero__title {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(2.6rem, 8vw, 5.6rem); line-height: 1.04; letter-spacing: -0.025em;
  margin-bottom: 1.5rem;
}
.hero__title-over {
  display: block;
  position: relative;
  z-index: 2;
  color: var(--ink);
  text-shadow: 0 2px 18px rgba(255,255,255,.88), 0 18px 36px rgba(40,10,16,.12);
}
.hero__title-card {
  display: block;
  position: relative;
  z-index: 1;
  padding: .08em 0 .12em;
  color: var(--maroon);
  background: transparent;
  text-shadow: 0 2px 18px rgba(255,255,255,.85), 0 14px 30px rgba(40,10,16,.10);
}
.hero__title .hero__hl { font-style: normal; color: var(--maroon); }
.hero__sub { font-size: clamp(1.05rem, 1.7vw, 1.32rem); color: var(--ink-2); max-width: 60ch; margin: 0 auto 2.2rem; }
.hero__sub--mantra { color: var(--ink); font-size: clamp(.82rem, 1.25vw, 1rem); font-weight: 600; letter-spacing: .2em; }
.hero__cta { display: flex; gap: .9rem; justify-content: center; flex-wrap: wrap; }
.hero__mark { position: relative; z-index: 5; margin: 11rem auto 0; width: clamp(96px, 14vw, 150px); }
.hero__mark img { position: relative; z-index: 1; filter: drop-shadow(0 24px 40px rgba(103,17,30,.28)); animation: float 6s ease-in-out infinite; }
@keyframes float { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-14px) } }

/* Soft maroon halo that slowly breathes behind the logo */
.logo-glow {
  position: absolute; left: 50%; top: 50%;
  width: 285px; height: 285px; margin: -142.5px 0 0 -142.5px;
  border-radius: 50%; z-index: 0; pointer-events: none;
  background: radial-gradient(circle,
    rgba(255,255,255,.70) 0%,    /* whitish core */
    rgba(248,232,202,.48) 24%,   /* warm white -> gold */
    rgba(194,154,85,.30) 46%,    /* gold */
    rgba(139,31,45,.16) 68%,     /* soft maroon */
    transparent 86%);            /* softer outer boundary */
  animation: logoBreathe 7s ease-in-out infinite;
}
@keyframes logoBreathe {
  0%, 100% { transform: scale(.97); opacity: .72; }
  50%      { transform: scale(1.05); opacity: .96; }
}

/* Lighter pulse high in the banner that flows continuously outward.
   z-index 2 keeps it ABOVE the hero photo (z 0) so the image can't cover it.
   Two pseudo-layers offset by half a cycle => no gap, always flowing. */
.hero__glow-top {
  position: absolute; top: 10%; left: 50%;
  width: 1440px; height: 1440px; margin-left: -720px;
  z-index: 2; pointer-events: none;
}
.hero__glow-top::before,
.hero__glow-top::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle,
    transparent 0%,
    transparent 22%,            /* clear, see-through centre */
    rgba(139,31,45,.20) 40%,    /* red ring */
    rgba(194,154,85,.07) 62%,   /* gold hint flowing outward */
    transparent 80%);
  animation: glowFlow 6.5s ease-in-out infinite;
}
.hero__glow-top::after { animation-delay: -3.25s; }  /* half-cycle offset */
@keyframes glowFlow {
  0%   { transform: scale(.45); opacity: 0; }
  25%  { opacity: .9; }
  100% { transform: scale(1.7); opacity: 0; }
}

/* Marquee */
.marquee { position: relative; z-index: 2; margin-top: clamp(2rem, 5vw, 4rem); overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.marquee__track { display: inline-flex; align-items: center; gap: 1.4rem; white-space: nowrap; animation: scroll-x 34s linear infinite; }
.marquee__track span { font-family: var(--serif); font-style: italic; font-size: clamp(1.1rem, 2.4vw, 1.7rem); color: var(--ink-3); }
.marquee__track i { color: var(--gold); font-style: normal; }
@keyframes scroll-x { from { transform: translateX(0) } to { transform: translateX(-50%) } }

@media (max-width: 720px) {
  .hero {
    min-height: 104svh;
  }
  .hero__content {
    margin-top: calc(var(--hero-photo-height) - 3.25rem);
  }
}

/* ===================================================================
   CONCEPT + STATS
   =================================================================== */
.concept { background: var(--ivory); }
.concept .lede { margin-top: 1rem; }
.updates {
  --updates-bg-top: #f5e6d1;
  --updates-bg-bottom: #f0e0c7;
  --updates-card-bg: rgba(243, 225, 194, .62);
  --updates-card-edge: rgba(218, 194, 154, .72);
  background: linear-gradient(180deg, var(--updates-bg-top) 0%, var(--updates-bg-bottom) 100%);
  overflow: clip;
}
.updates__wrap {
  width: 100vw;
  max-width: none;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-inline: clamp(1rem, 4vw, 3rem);
  display: grid;
  gap: clamp(1rem, 2.6vw, 1.8rem);
}
.updates__stage {
  position: relative;
  display: block;
  background: linear-gradient(90deg, var(--updates-bg-top) 0%, var(--updates-bg-bottom) 100%);
  border-radius: 0;
  padding: 0;
  box-shadow: 0 18px 42px -36px rgba(77,31,17,.28);
}
.updates__picture,
.updates__picture img {
  display: block;
  width: 100%;
}
.updates__picture img {
  height: auto;
  object-fit: contain;
}
.stats {
  margin-top: clamp(2.6rem, 6vw, 4.5rem);
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--line); border: 1px solid var(--line); border-radius: 20px; overflow: hidden;
}
.stat { background: var(--paper); padding: clamp(1.4rem, 3vw, 2.4rem) 1.2rem; text-align: center; }
.stat__num { display: block; font-family: var(--serif); font-size: clamp(2.2rem, 5vw, 3.4rem); color: var(--maroon); line-height: 1; letter-spacing: -.02em; }
.stat__label { display: block; margin-top: .6rem; font-size: .86rem; color: var(--ink-3); }

/* ===================================================================
   TOOLS SHOWCASE
   =================================================================== */
.tools { background: linear-gradient(180deg, var(--ivory) 0%, var(--ivory-2) 100%); }
.tools .lede { margin: 1rem 0 0; }

.tools__segmented {
  position: relative; display: flex; width: fit-content; gap: 2px; margin: 2.5rem auto 3rem;
  background: rgba(244,238,230,.6); padding: 5px; border-radius: 100px;
  backdrop-filter: blur(16px) saturate(160%); -webkit-backdrop-filter: blur(16px) saturate(160%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.55), inset 0 1px 0 rgba(255,255,255,.7), 0 10px 30px -18px rgba(40,10,16,.35);
  max-width: 100%; overflow-x: auto; scrollbar-width: none;
}
.tools__segmented::-webkit-scrollbar { display: none; }
.seg {
  position: relative; z-index: 2; border: 0; background: transparent; cursor: pointer;
  font-family: var(--sans); font-weight: 600; font-size: .92rem; color: var(--ink-2);
  padding: .62em 1.3em; border-radius: 100px; white-space: nowrap; transition: color .35s, transform .25s var(--ease);
}
.seg.is-active { color: var(--maroon); }
.seg:hover { transform: scale(1.08); }
.seg:focus-visible { outline: 3px solid var(--maroon); outline-offset: 3px; }
.seg__pill {
  position: absolute; z-index: 1; top: 5px; left: 5px; height: calc(100% - 10px);
  background: rgba(255,255,255,.82); border-radius: 100px; box-shadow: 0 4px 14px -6px rgba(40,10,16,.28), inset 0 1px 0 rgba(255,255,255,.9);
  transition: transform .45s var(--ease), width .45s var(--ease);
}

/* cue text beside the picker; picker sits in the phone's column so it centres over the mock UI */
.tools__cuebar {
  display: grid; grid-template-columns: 1fr minmax(280px, 360px); gap: clamp(2rem, 6vw, 5rem);
  align-items: center; margin: 2.5rem 0 2rem;
}
.tools__cue { justify-self: end; text-align: right; max-width: 22ch; font-size: 1.02rem; font-weight: 600; color: var(--ink-2); }
.tools__cue--mobile { display: none; }
.tools__cuebar .tools__segmented { margin: 0; justify-self: center; width: max-content; max-width: none; }

.tools__stage {
  display: grid; grid-template-columns: 1fr minmax(280px, 360px); gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
}
.tools__copy { position: relative; min-height: 360px; }
.tool-panel {
  position: absolute; inset: 0; opacity: 0; transform: translateY(18px);
  transition: opacity .5s var(--ease), transform .5s var(--ease); pointer-events: none;
}
.tool-panel.is-active { position: relative; opacity: 1; transform: none; pointer-events: auto; }
.tool-icon { font-size: 2rem; display: block; margin-bottom: .8rem; }
.tool-banner {
  display: block; width: 100%; max-width: 506px; aspect-ratio: 16 / 9;
  object-fit: cover; object-position: center 28%; border-radius: 18px; margin-bottom: 1.2rem;
  box-shadow: 0 26px 52px -22px rgba(40,15,20,.55), inset 0 0 0 1px rgba(255,255,255,.4);
}
.tool-panel h3 { font-family: var(--serif); font-weight: 500; font-size: clamp(1.6rem, 3.2vw, 2.3rem); letter-spacing: -.01em; margin-bottom: .9rem; }
.tool-panel p { color: var(--ink-2); font-size: 1.06rem; max-width: 48ch; }
.tool-panel p b { color: var(--maroon); font-weight: 600; }
.tool-feats { list-style: none; margin-top: 1.4rem; display: grid; gap: .7rem; }
.tool-feats li { position: relative; padding-left: 1.7rem; color: var(--ink-2); font-size: .98rem; }
.tool-feats li::before { content: '✦'; position: absolute; left: 0; color: var(--gold); }

/* ===== Phone — Apple liquid-glass ===== */
.phone {
  justify-self: center; width: min(344px, 82vw); aspect-ratio: 344 / 724;
  background:
    linear-gradient(155deg, #4a4744 0%, #2a2522 26%, #141010 60%, #0c0908 82%, #1a1411 100%);
  border-radius: 56px; padding: 10px;
  box-shadow:
    0 60px 110px -34px rgba(40,10,16,.55),
    0 2px 6px rgba(0,0,0,.35),
    0 0 0 1px rgba(0,0,0,.35),
    inset 0 0 0 1px rgba(255,255,255,.14),
    inset 0 1px 1px rgba(255,255,255,.22),
    inset 0 -1px 1px rgba(0,0,0,.5);
  position: relative; transition: transform .7s var(--ease);
}
/* polished titanium side rails — subtle metallic catch-light on the edges */
.phone::before {
  content: ''; position: absolute; inset: 0; border-radius: 56px; z-index: 7; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(255,255,255,.20), rgba(255,255,255,0) 7px) left center / 10px 86% no-repeat,
    linear-gradient(270deg, rgba(255,255,255,.16), rgba(255,255,255,0) 7px) right center / 10px 86% no-repeat;
  -webkit-mask: linear-gradient(180deg, transparent, #000 8%, #000 92%, transparent);
          mask: linear-gradient(180deg, transparent, #000 8%, #000 92%, transparent);
}
.phone:hover { transform: translateY(-10px) rotate(-.6deg); }
/* no notch frame at all — just a whisper of the camera shining through, dead-centre */
.phone__notch {
  position: absolute; top: 25px; left: 50%; transform: translateX(-50%);
  width: 6px; height: 6px; border-radius: 50%; z-index: 8; pointer-events: none;
  background: radial-gradient(circle at 42% 36%, rgba(155,200,240,.30) 0, rgba(60,85,120,.14) 44%, rgba(10,12,16,0) 72%);
}
/* iPhone-style machined side buttons */
.phone__btn {
  position: absolute; z-index: 5; width: 3px; border-radius: 2px;
  background: linear-gradient(180deg, #45403c, #15110f);
  box-shadow: 0 1px 2px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.18);
}
.phone__btn--silent { left: -2.5px; top: 17.5%; height: 3.4%; }
.phone__btn--vol-up { left: -2.5px; top: 23.5%; height: 6%; }
.phone__btn--vol-dn { left: -2.5px; top: 31%;   height: 6%; }
.phone__btn--power  { right: -2.5px; top: 24.5%; height: 9.5%; }
.phone__screen { position: relative; height: 100%; width: 100%; border-radius: 42px; overflow: hidden; background: #0c0a0a; }
/* device glass sheen */
.phone__screen::after {
  content: ''; position: absolute; inset: 0; z-index: 9; pointer-events: none; border-radius: 42px;
  background: linear-gradient(135deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 30%, rgba(255,255,255,0) 70%, rgba(255,255,255,.06) 100%);
}

.screen {
  position: absolute; inset: 0; padding: 50px 15px 20px; overflow: hidden;
  opacity: 0; transform: scale(1.05); pointer-events: none;
  transition: opacity .55s var(--ease), transform .55s var(--ease);
  display: flex; flex-direction: column; gap: 11px;
  font-size: 12px; color: var(--ink);
}
.screen.is-active { opacity: 1; transform: none; pointer-events: auto; }

/* per-tool wallpaper + ambient color blob */
.screen[data-screen="events"]    { background: linear-gradient(165deg, #e7efe9 0%, #cfdcec 52%, #efe2d2 100%); }
.screen[data-screen="listen"]    { background: linear-gradient(165deg, #f6e2e2 0%, #efcdd1 45%, #f7e9d6 100%); }
.screen[data-screen="tutorials"] { background: linear-gradient(165deg, #e9e3f4 0%, #dcd9ef 50%, #f1e3e8 100%); }
.screen[data-screen="shop"]      { background: linear-gradient(165deg, #f7efe2 0%, #f0e2d2 55%, #efe6dc 100%); }
.screen--dark { background: linear-gradient(170deg, #1c1611 0%, #0c0a09 55%, #241412 100%); color: #f1e9df; }
.screen::before {
  content: ''; position: absolute; z-index: 0; width: 170px; height: 170px; border-radius: 50%;
  top: -30px; right: -40px; filter: blur(40px); opacity: .65; pointer-events: none;
}
.screen[data-screen="events"]::before    { background: radial-gradient(circle, #7fb0a0, transparent 70%); }
.screen[data-screen="listen"]::before     { background: radial-gradient(circle, #d98b9a, transparent 70%); }
.screen[data-screen="tutorials"]::before  { background: radial-gradient(circle, #9d8fd6, transparent 70%); }
.screen[data-screen="shop"]::before        { background: radial-gradient(circle, #e0b878, transparent 70%); }
.screen--dark::before                      { background: radial-gradient(circle, #7a2230, transparent 70%); opacity: .8; }
.screen > * { position: relative; z-index: 1; }

/* glass primitives */
.s-search, .s-field, .s-player, .s-event, .s-row, .s-card, .s-cal, .s-shop-head span {
  background: rgba(255,255,255,.46);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255,255,255,.7);
  box-shadow: 0 8px 22px -12px rgba(40,15,20,.4), inset 0 1px 0 rgba(255,255,255,.75);
}

.s-status { position: relative; display: flex; align-items: center; min-height: 22px; font-size: 11px; font-weight: 700; color: var(--ink-2); letter-spacing: .02em; }
.screen--dark .s-status { color: #b3a596; }
.s-head { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 7px; max-width: 82%; }
.s-logo { width: 24.5px; height: 24.5px; flex-shrink: 0; background: url('../img/logo.png') center / contain no-repeat; opacity: .95; }
.screen--dark .s-logo { background-image: url('../img/logo-cream.png'); }
.s-htitle { font-family: var(--serif); font-weight: 500; font-size: 13px; letter-spacing: -.01em; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.screen--dark .s-htitle { color: #f1e9df; }
.s-status .s-menu { margin-left: auto; }
.s-title { font-family: var(--serif); font-weight: 500; font-size: 18px; letter-spacing: -.01em; text-align: center; margin-top: -6px; }
/* biggest cards run edge-to-edge */
.s-map, .s-lyrics { margin-left: -15px; margin-right: -15px; }

.s-search { border-radius: 13px; padding: 10px 12px; color: var(--ink-2); font-size: 11.5px; font-weight: 500; }
.s-chips { display: flex; gap: 6px; }
.s-chips span {
  flex: 1; text-align: center;
  background: rgba(255,255,255,.55); border: 1px solid rgba(255,255,255,.6); backdrop-filter: blur(10px);
  border-radius: 9px; padding: 6px 4px; font-size: 10.5px; font-weight: 600; color: var(--ink-2);
}

.s-map {
  position: relative; flex: 1; min-height: 120px; border-radius: 16px;
  border: 1px solid rgba(255,255,255,.6);
  background: url('../img/amsterdam-map.svg') center / cover no-repeat, #eef1ec;
  overflow: hidden; box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 8px 22px -14px rgba(40,15,20,.45);
}
/* soft premium depth over the map */
.s-map::before { content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(130% 90% at 50% -10%, rgba(255,255,255,.22), transparent 55%),
    linear-gradient(0deg, rgba(20,10,12,.12), transparent 42%);
}
/* labelled venue markers */
.map-pin {
  position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: 5px;
  transform: translate(-50%, -100%);
  background: rgba(255,255,255,.85); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.92); border-radius: 100px; padding: 3px 8px 3px 6px;
  font-size: 9px; font-weight: 700; color: var(--ink); white-space: nowrap; letter-spacing: -.01em;
  box-shadow: 0 5px 12px -4px rgba(40,15,20,.45);
  animation: pinFloat 4s ease-in-out infinite;
}
.map-pin::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--maroon-soft), var(--maroon));
  box-shadow: 0 0 0 2px rgba(255,255,255,.75);
}
.map-pin::after {
  content: ''; position: absolute; left: 50%; bottom: -3px; width: 7px; height: 7px;
  background: rgba(255,255,255,.85);
  border-right: 1px solid rgba(255,255,255,.92); border-bottom: 1px solid rgba(255,255,255,.92);
  transform: translateX(-50%) rotate(45deg);
}
.map-pin--a { top: 60%; left: 33%; }
.map-pin--b { top: 49%; left: 62%; animation-delay: .8s; }
.map-pin--c { top: 72%; left: 24%; animation-delay: 1.6s; }
@keyframes pinFloat { 0%,100% { transform: translate(-50%,-100%) } 50% { transform: translate(-50%,-114%) } }
.s-pinhint {
  position: absolute; bottom: 11px; left: 11px; z-index: 2;
  background: rgba(255,255,255,.6); backdrop-filter: blur(14px); border: 1px solid rgba(255,255,255,.7);
  border-radius: 9px; padding: 5px 9px; font-size: 10px; font-weight: 600; color: var(--ink-2);
}
.s-add {
  position: absolute; bottom: 11px; right: 11px; z-index: 2;
  background: linear-gradient(180deg, var(--maroon-soft), var(--maroon)); color: #fff; border: 0;
  border-radius: 100px; padding: 7px 12px; font-size: 10.5px; font-weight: 700;
  box-shadow: 0 6px 16px -6px rgba(103,17,30,.7), inset 0 1px 0 rgba(255,255,255,.3);
}

.s-cal { border-radius: 14px; padding: 10px 11px; display: grid; gap: 8px; }
.s-cal-head { font-weight: 700; font-size: 11px; color: var(--ink-2); }
.s-event { border-radius: 11px; padding: 8px 10px; display: grid; gap: 1px; }
.s-event b { font-size: 11.5px; } .s-event span { font-size: 9.5px; color: var(--ink-2); opacity: .75; }

.s-player {
  border-radius: 20px; padding: 14px; display: grid; gap: 10px; justify-items: center;
  background: linear-gradient(160deg, rgba(255,255,255,.55), rgba(255,255,255,.3));
}
.s-art {
  width: 78px; height: 78px; border-radius: 20px; position: relative;
  background: radial-gradient(circle at 32% 28%, var(--maroon-soft), var(--maroon-deep)); display: grid; place-items: center;
  font-size: 34px; box-shadow: 0 14px 28px -8px rgba(103,17,30,.6), inset 0 2px 4px rgba(255,255,255,.25);
}
.s-art::after { content: ''; position: absolute; inset: 0; border-radius: 20px; background: linear-gradient(150deg, rgba(255,255,255,.35), transparent 50%); }
.s-pmeta { text-align: center; } .s-pmeta b { font-size: 13.5px; display: block; } .s-pmeta span { font-size: 10.5px; color: var(--ink-2); opacity: .7; }
.s-wave { display: flex; align-items: flex-end; gap: 3px; height: 26px; }
.s-wave i { width: 3px; background: linear-gradient(180deg, var(--maroon-soft), var(--maroon)); border-radius: 3px; animation: eq 1s ease-in-out infinite; }
.s-wave i:nth-child(odd) { animation-delay: .3s } .s-wave i:nth-child(3n) { animation-delay: .6s }
@keyframes eq { 0%,100% { height: 6px } 50% { height: 24px } }
.s-controls { display: flex; gap: 16px; align-items: center; font-size: 16px; color: var(--ink-2); }
.s-play {
  width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(180deg, var(--maroon-soft), var(--maroon));
  color: #fff; display: grid; place-items: center; font-size: 14px;
  box-shadow: 0 8px 18px -6px rgba(103,17,30,.7), inset 0 1px 0 rgba(255,255,255,.3);
}
.s-field { display: flex; justify-content: space-between; align-items: center; border-radius: 13px; padding: 10px 12px; font-size: 11.5px; color: var(--ink-2); font-weight: 500; }
.s-field b { color: var(--maroon); font-weight: 700; }
.s-pills { display: flex; gap: 6px; flex-wrap: wrap; }
.screen[data-screen="tutorials"] .s-pills span { flex: 1; text-align: center; }
.s-pills span {
  background: rgba(103,17,30,.1); color: var(--maroon); border: 1px solid rgba(103,17,30,.14);
  border-radius: 100px; padding: 5px 10px; font-size: 10px; font-weight: 700;
}
.s-pills span.on {
  background: linear-gradient(180deg, var(--maroon-soft), var(--maroon)); color: #fff;
  border-color: transparent; box-shadow: 0 5px 12px -5px rgba(103,17,30,.7), inset 0 1px 0 rgba(255,255,255,.25);
}

/* Listen → My Playlists card (light theme) */
.s-playlists {
  border-radius: 14px; padding: 9px 12px; display: grid; gap: 5px;
  background: rgba(255,255,255,.46); border: 1px solid rgba(255,255,255,.7);
  box-shadow: 0 8px 22px -12px rgba(40,15,20,.4), inset 0 1px 0 rgba(255,255,255,.75);
  -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%);
}
.s-pl-head { position: relative; display: flex; align-items: center; justify-content: center; }
.s-pl-title { font-family: var(--serif); font-weight: 500; font-size: 12.5px; color: var(--ink); }
.s-pl-add {
  position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  border: 1px solid rgba(103,17,30,.22); background: rgba(103,17,30,.06); color: var(--maroon);
  font-size: 9.5px; font-weight: 700; border-radius: 8px; padding: 3px 9px; cursor: pointer;
}
.s-pl-list { display: grid; gap: 3px; }
.s-pl-list span { font-size: 11px; color: var(--ink-2); display: flex; align-items: center; gap: 6px; }
.s-pl-list span::before { content: '♪'; color: var(--maroon); opacity: .8; }
.s-pl-list span.fav::before { content: '♥'; opacity: 1; }

/* Listen — now-playing */
.s-cover {
  width: auto; aspect-ratio: 16 / 9; margin: 0 -15px; align-self: stretch;
  border-radius: 16px; overflow: hidden; position: relative;
  box-shadow: 0 20px 38px -14px rgba(103,17,30,.6), inset 0 0 0 1px rgba(255,255,255,.5);
}
.s-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.s-cover::after { content: ''; position: absolute; inset: 0; border-radius: 18px; background: linear-gradient(150deg, rgba(255,255,255,.28), transparent 46%); pointer-events: none; }
.s-pmeta--np { margin-top: 2px; }
.s-pmeta--np b { font-family: var(--serif); font-weight: 500; font-size: 15px; }
.s-pmeta--np span { font-size: 11px; opacity: .8; }
.s-progress { width: 100%; display: grid; gap: 5px; }
.s-bar { display: block; height: 5px; border-radius: 100px; background: rgba(103,17,30,.16); position: relative; overflow: hidden; }
.s-bar i { position: absolute; inset: 0 55% 0 0; border-radius: 100px; background: linear-gradient(90deg, var(--maroon-soft), var(--maroon)); }
.s-times { display: flex; justify-content: space-between; font-size: 9.5px; font-weight: 600; color: var(--ink-2); }
.s-times em { font-style: normal; }
.s-controls--np { justify-content: center; gap: 18px; width: 100%; color: var(--maroon); font-size: 17px; }
.s-controls--np .s-play { width: 46px; height: 46px; font-size: 16px; }
.s-ico { font-family: 'Inter', sans-serif; font-variant-emoji: text; font-size: 18px; line-height: 1; color: var(--maroon); }
.s-menu { font-weight: 700; font-size: 15px; letter-spacing: .5px; line-height: 1; }

.s-list, .s-grid { display: grid; gap: 9px; }
.s-list { gap: 7px; }
.s-row { display: flex; align-items: center; gap: 9px; border-radius: 13px; padding: 7px; }
.s-thumb { width: 40px; height: 40px; border-radius: 10px; overflow: hidden; background: rgba(255,255,255,.7); display: grid; place-items: center; font-size: 21px; flex-shrink: 0; box-shadow: inset 0 0 0 1px rgba(255,255,255,.6); }
.s-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.s-row b { font-size: 11.5px; display: block; line-height: 1.15; }
.s-row em { display: block; font-style: normal; font-size: 9.5px; font-weight: 700; color: var(--maroon); margin-top: 1px; }
.s-row i { font-size: 9px; color: var(--ink-2); opacity: .7; font-style: normal; }

/* tutorials → shop preview card with mini instrument images */
.s-shoplink {
  border-radius: 13px; padding: 9px 11px; display: grid; gap: 8px;
  background: rgba(255,255,255,.46); border: 1px solid rgba(255,255,255,.7);
  box-shadow: 0 8px 22px -12px rgba(40,15,20,.4), inset 0 1px 0 rgba(255,255,255,.75);
}
.s-shoplink-top { display: flex; align-items: center; justify-content: space-between; font-size: 11.5px; color: var(--ink-2); font-weight: 500; }
.s-shoplink-top b { color: var(--maroon); font-weight: 700; }
.s-minis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.s-minis img {
  width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 9px; display: block;
  background: #f0e7da; box-shadow: inset 0 0 0 1px rgba(255,255,255,.6), 0 4px 10px -6px rgba(40,15,20,.4);
}

.s-grid { grid-template-columns: 1fr 1fr; }
.s-shop-head { display: flex; flex-direction: column; align-items: center; gap: 1px; }
.s-shop-head .s-title { font-size: 15.5px; line-height: 1.15; }
.s-shop-head span { font-size: 9.5px; font-weight: 700; color: var(--maroon); background: none; border: 0; box-shadow: none; padding: 0; -webkit-backdrop-filter: none; backdrop-filter: none; }
.s-card { border-radius: 16px; padding: 9px; display: grid; gap: 5px; overflow: hidden; }
.s-pic {
  width: 100%; aspect-ratio: 1 / 1; border-radius: 12px; overflow: hidden;
  background: radial-gradient(circle at 50% 38%, #fffefb, #f0e7da 78%);
  display: grid; place-items: center; box-shadow: inset 0 1px 4px rgba(0,0,0,.06);
}
.s-pic img { width: 100%; height: 100%; object-fit: cover; }
.s-pic--white { background: #fff; }
.s-card b { font-size: 11px; line-height: 1.2; }
.s-rate { font-size: 9px; color: #e0a93a; letter-spacing: -.5px; }
.s-rate i { color: var(--ink-2); opacity: .6; font-style: normal; }
.s-buy { display: flex; align-items: center; justify-content: space-between; margin-top: 1px; }
.s-price { font-size: 12.5px; font-weight: 800; color: var(--maroon); }
.s-cart {
  width: 24px; height: 24px; border: 0; border-radius: 50%; color: #fff; line-height: 1;
  display: grid; place-items: center;
  background: linear-gradient(180deg, var(--maroon-soft), var(--maroon));
  box-shadow: 0 5px 12px -4px rgba(103,17,30,.7), inset 0 1px 0 rgba(255,255,255,.3); cursor: pointer;
}
.s-cart svg { width: 13px; height: 13px; }
.s-checkout {
  margin-top: 2px; width: 100%; border: 0; border-radius: 12px; padding: 9px 0;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  background: linear-gradient(180deg, var(--maroon-soft), var(--maroon)); color: #fff;
  font-size: 11.5px; font-weight: 700; cursor: pointer;
  box-shadow: 0 8px 18px -6px rgba(103,17,30,.7), inset 0 1px 0 rgba(255,255,255,.25);
}
.s-checkout svg { width: 15px; height: 15px; }

.s-bright { display: flex; align-items: center; gap: 10px; }
.s-bright-ctrl { flex: 1; display: flex; align-items: center; gap: 8px; font-size: 10px; opacity: .5; }
.s-slider { flex: 1; height: 3px; border-radius: 3px; background: linear-gradient(90deg, #2c241e, #b3a48d); position: relative; }
.s-slider i { position: absolute; right: 26%; top: 50%; transform: translateY(-50%); width: 8px; height: 8px; border-radius: 50%; background: #e7ddcd; box-shadow: 0 1px 3px rgba(0,0,0,.5); }
.s-theme {
  flex-shrink: 0; width: 26px; height: 22px; padding: 0; border-radius: 8px; cursor: pointer;
  border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06); color: #ece2d2;
  display: grid; place-items: center;
}
.s-theme svg { width: 14px; height: 14px; }
.s-theme[aria-pressed="true"] {
  color: #fff; background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.45);
  box-shadow: inset 0 2px 5px rgba(0,0,0,.45), inset 0 -1px 1px rgba(255,255,255,.12), 0 0 6px rgba(255,255,255,.1);
}
.s-toolbar { display: flex; gap: 7px; align-items: stretch; }
.s-toggle { flex: 1; display: flex; gap: 4px; padding: 4px; border-radius: 13px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.09); }
.s-toggle span {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 4px;
  border-radius: 9px; padding: 6px 0; font-size: 10.5px; font-weight: 700; color: rgba(255,255,255,.5);
  background: transparent; border: 1px solid transparent;
}
.s-toggle span svg { width: 14px; height: 14px; display: block; }
/* active = pressed bezel + lit white frame, white/off-white only (no colour) */
.s-toggle span.on {
  color: #fff; border-color: rgba(255,255,255,.5);
  box-shadow: inset 0 2px 6px rgba(0,0,0,.5), inset 0 -1px 1px rgba(255,255,255,.14), 0 0 7px rgba(255,255,255,.1);
}
/* search sits in its own, distinctly greyer card, ~30% wider than a toggle button */
.s-searchcard {
  flex: 0 0 23%; display: grid; place-items: center; border-radius: 13px; cursor: pointer;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.22); color: rgba(255,255,255,.85);
}
.s-searchcard svg { width: 16px; height: 16px; }
.s-lyrics {
  position: relative; flex: 1 1 auto; min-height: 130px; margin-top: 2px;
  overflow: hidden; padding: 11px 14px 12px; border-radius: 16px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  display: flex; flex-direction: column;
}
.s-lyrics .s-lyr-title {
  font-family: var(--serif); font-weight: 500; font-size: 12.5px; color: var(--gold-soft);
  margin-bottom: 6px; flex-shrink: 0; letter-spacing: .01em; padding-right: 26px;
}
.s-lyr-full {
  position: absolute; top: 9px; right: 9px; z-index: 4;
  width: 20px; height: 20px; border: 0; border-radius: 6px;
  background: rgba(255,255,255,.08); color: #e9ddca; font-size: 12px; line-height: 1;
  display: grid; place-items: center; cursor: pointer;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.s-lyr-body {
  flex: 1; min-height: 0; overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between;
}
.s-lyr-body .lv { display: block; }
.s-lyrics p { font-size: 13.5px; font-weight: 600; line-height: 1.3; color: #fbf6e1; letter-spacing: .01em; }
.s-lyrics p.tr { color: #f9e7eb; font-weight: 400; font-style: italic; font-size: 11px; padding-left: 28px; margin: 1px 0 0; opacity: .92; }
.s-lyrics p em { font-style: normal; color: var(--gold-soft); font-size: 10px; font-weight: 500; }
.s-scrolly {
  position: absolute; top: 34px; bottom: 12px; right: 5px; width: 2px;
  border-radius: 2px; background: rgba(255,255,255,.08); pointer-events: none; z-index: 2;
}
.s-scrolly i { position: absolute; left: 0; width: 2px; height: 34%; bottom: 7%; border-radius: 2px; background: rgba(255,255,255,.36); }

/* Lyrics → My Collections card (dark theme) */
.s-collections {
  flex-shrink: 0; border-radius: 14px; padding: 9px 12px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); display: grid; gap: 4px;
}
.s-coll-title { font-family: var(--serif); font-weight: 500; font-size: 12.5px; color: #f3ebde; }
.s-coll-fav { font-size: 9px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--gold-soft); }
.s-coll-list { display: grid; gap: 3px; margin-top: 1px; }
.s-coll-list span { font-size: 11px; color: #e8ddcf; display: flex; align-items: center; gap: 7px; }
.s-coll-list span::before { content: '♡'; color: #e0909e; font-size: 11px; line-height: 1; }
.s-coll-head { position: relative; display: flex; align-items: center; justify-content: center; }
.s-coll-head .s-coll-title { text-align: center; }
.s-coll-add {
  position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  border: 1px dashed rgba(255,255,255,.22);
  background: rgba(255,255,255,.04); color: #ecdfce; font-size: 9.5px; font-weight: 700;
  border-radius: 8px; padding: 3px 9px; cursor: pointer;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.s-lyrics p.tr { font-size: 11.5px; font-weight: 400; color: #b3a596; margin-bottom: 8px; }

/* ===================================================================
   ABOUT US
   =================================================================== */
.about-us {
  background:
    linear-gradient(180deg, var(--ivory-2) 0%, var(--ivory) 100%);
  overflow: hidden;
}
.about__grid {
  display: grid;
  gap: clamp(2rem, 6vw, 3.5rem);
}
.about__intro .display { max-width: 28ch; }
.about__intro .lede { max-width: 52ch; }
.about__cards {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}
.about__cards::before {
  content: '';
  position: absolute;
  inset: -24px;
  border-radius: 34px;
  background:
    radial-gradient(circle at 20% 15%, rgba(194,154,85,.28), transparent 36%),
    radial-gradient(circle at 84% 82%, rgba(103,17,30,.16), transparent 38%);
  filter: blur(12px);
  opacity: .85;
}
.about-card {
  position: relative;
  z-index: 1;
  min-height: 210px;
  padding: clamp(1.6rem, 3vw, 2.3rem);
  border-radius: 28px;
  border: 1px solid rgba(255,255,255,.78);
  background: rgba(255,255,255,.62);
  backdrop-filter: blur(22px) saturate(170%);
  -webkit-backdrop-filter: blur(22px) saturate(170%);
  box-shadow: 0 34px 80px -46px rgba(40,10,16,.45), inset 0 1px 0 rgba(255,255,255,.86);
}
.about-card--deep {
  background: linear-gradient(145deg, rgba(103,17,30,.96), rgba(74,12,21,.98));
  border-color: rgba(230,201,138,.24);
  box-shadow: 0 40px 90px -44px rgba(103,17,30,.75), inset 0 1px 0 rgba(255,255,255,.16);
}
.about-card__head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  margin-bottom: 1rem;
}
.about-card__label {
  display: block;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--maroon);
}
.about-card--deep .about-card__label { color: var(--gold-soft); }
.about-card p {
  font-family: var(--serif);
  font-size: clamp(1.3rem, 2.5vw, 1.8rem);
  line-height: 1.22;
  color: var(--ink);
}
.about-card--deep p { color: var(--ivory); }

.about-card__icon {
  position: relative;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.about-card__icon svg {
  position: relative;
  z-index: 2;
  width: 13px;
  height: 13px;
  animation: about-icon-pulse 2.4s ease-in-out infinite;
}
.about-card__icon--heart svg { color: #7a0f16; }
.about-card__icon--house svg { color: #c9a227; }
.about-card__ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  opacity: 0;
  animation: about-icon-ring 2.4s ease-out infinite;
}
.about-card__icon--heart .about-card__ring { color: #7a0f16; }
.about-card__icon--house .about-card__ring { color: #c9a227; }
.about-card__ring:nth-child(2) { animation-delay: .8s; }

@keyframes about-icon-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.2); }
}
@keyframes about-icon-ring {
  0% { transform: scale(.5); opacity: .6; }
  75% { opacity: 0; }
  100% { transform: scale(2.1); opacity: 0; }
}

/* ===================================================================
   CORE TEAM
   =================================================================== */
.core-team {
  background:
    radial-gradient(80% 70% at 50% 0%, rgba(194,154,85,.22), transparent 58%),
    linear-gradient(180deg, #2b090f 0%, var(--maroon-deep) 46%, #170407 100%);
  overflow: hidden;
}
.team__halo {
  position: absolute;
  inset: 8% 0 auto 50%;
  width: min(760px, 120vw);
  aspect-ratio: 1;
  transform: translateX(-50%);
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(230,201,138,.20), rgba(103,17,30,.08) 48%, transparent 70%);
  filter: blur(8px);
  pointer-events: none;
}
.team__head {
  position: relative;
  z-index: 1;
  max-width: 760px;
  margin-inline: auto;
}
.team__head .display { margin-inline: auto; max-width: 18ch; }
.team-orbit {
  position: relative;
  z-index: 1;
  min-height: 620px;
  margin-top: clamp(3rem, 7vw, 5rem);
}
.team-orbit::before {
  content: '';
  position: absolute;
  inset: 50% auto auto 50%;
  width: min(520px, 76vw);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(230,201,138,.18);
  border-radius: 50%;
  box-shadow:
    0 0 0 90px rgba(230,201,138,.035),
    0 0 0 180px rgba(230,201,138,.02);
}
.team-orbit__center {
  position: absolute;
  inset: 50% auto auto 50%;
  width: 190px;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  display: grid;
  place-items: center;
  align-content: center;
  gap: .7rem;
  text-align: center;
  color: var(--ivory);
  background: radial-gradient(circle at 35% 20%, rgba(255,255,255,.18), rgba(103,17,30,.48) 42%, rgba(20,4,7,.78));
  border: 1px solid rgba(230,201,138,.35);
  box-shadow: 0 35px 90px -46px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.16);
}
.team-orbit__center img {
  width: 78px;
  filter: drop-shadow(0 14px 24px rgba(0,0,0,.34));
}
.team-orbit__center span {
  font-family: var(--serif);
  font-size: 1.05rem;
  color: var(--gold-soft);
}
.team-card {
  position: absolute;
  width: min(290px, 38vw);
  padding: 1.35rem;
  border-radius: 24px;
  color: rgba(251,248,244,.76);
  background: linear-gradient(145deg, rgba(255,255,255,.13), rgba(255,255,255,.055));
  border: 1px solid rgba(230,201,138,.20);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  box-shadow: 0 38px 90px -52px rgba(0,0,0,.88), inset 0 1px 0 rgba(255,255,255,.15);
}
.team-card--one { top: 0; left: 7%; }
.team-card--two { top: 12%; right: 5%; }
.team-card--three { bottom: 8%; left: 3%; }
.team-card--four { bottom: 0; right: 9%; }
.team-card__num {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin-bottom: 1.1rem;
  border-radius: 50%;
  font-family: var(--serif);
  font-size: .9rem;
  color: var(--gold-soft);
  background: rgba(230,201,138,.10);
  border: 1px solid rgba(230,201,138,.24);
}
.team-card h3 {
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--ivory);
  line-height: 1.14;
  margin-bottom: .65rem;
}
.team-card p {
  font-size: .93rem;
  color: rgba(251,248,244,.66);
}

/* ===================================================================
   USE CASES
   =================================================================== */
.use-cases { background: var(--ivory-2); position: relative; overflow: hidden; }
.use-cases::before {
  content: '';
  position: absolute;
  top: -20%;
  right: -8%;
  width: 560px;
  height: 560px;
  background: radial-gradient(circle, rgba(194,154,85,.16), transparent 68%);
  pointer-events: none;
}
.uc-grid {
  position: relative;
  margin-top: clamp(2.4rem, 5vw, 3.6rem);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 1.8vw, 1.6rem);
}
.uc {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  min-height: clamp(340px, 34vw, 440px);
  background: var(--maroon-deep);
  border-radius: 24px;
  border: 1px solid rgba(28,26,26,.14);
  isolation: isolate;
}
article.uc {
  transition: opacity 1s var(--ease), transform 1s var(--ease), box-shadow .6s var(--ease);
}
.uc__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.08);
  filter: saturate(.94) brightness(.96);
  transition: transform 1.6s var(--ease), filter 1.6s var(--ease);
}
.uc__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top,
      rgba(30,7,12,.92) 0%,
      rgba(30,7,12,.55) 34%,
      rgba(30,7,12,.12) 62%,
      rgba(30,7,12,0) 82%);
  transition: opacity .8s var(--ease);
  pointer-events: none;
}
.uc::after {
  content: '';
  position: absolute;
  inset: 10px;
  border-radius: 16px;
  border: 1px solid rgba(230,201,138,.28);
  opacity: 0;
  transition: opacity .7s var(--ease);
  pointer-events: none;
}
.uc:hover {
  transform: translateY(-8px);
  box-shadow: 0 40px 80px -36px rgba(74,12,21,.55);
}
.uc:hover .uc__photo {
  transform: scale(1.16) translateY(-1.5%);
  filter: saturate(1.06) brightness(1.02);
}
.uc:hover::after { opacity: 1; }
.uc-grid .uc:nth-child(1) { transition-delay: .05s; }
.uc-grid .uc:nth-child(2) { transition-delay: .17s; }
.uc-grid .uc:nth-child(3) { transition-delay: .29s; }
.uc-grid .uc:nth-child(4) { transition-delay: .41s; }
.uc-grid .uc:nth-child(5) { transition-delay: .53s; }
.uc-grid .uc:nth-child(6) { transition-delay: .65s; }
.uc__body {
  position: relative;
  width: 100%;
  padding: clamp(1.4rem, 2.2vw, 1.9rem);
  transform: translateY(4px);
  transition: transform .8s var(--ease);
}
.uc:hover .uc__body { transform: translateY(-2px); }
.uc h3 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.25rem;
  margin-bottom: .5rem;
  letter-spacing: -.01em;
  color: var(--ivory);
  text-shadow: 0 1px 14px rgba(30,7,12,.5);
}
.uc p {
  color: rgba(251,248,244,.8);
  font-size: .95rem;
  line-height: 1.55;
  text-shadow: 0 1px 10px rgba(30,7,12,.5);
}

/* ===================================================================
   ARTISTS & TEACHERS
   =================================================================== */
.artists { background: var(--ivory); position: relative; }
.artist-grid {
  margin-top: clamp(2.4rem, 5vw, 3.6rem);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(.9rem, 1.8vw, 1.6rem);
}
.artist {
  text-align: center;
  border-radius: 24px;
  padding: clamp(1.3rem, 2.4vw, 1.9rem) 1rem clamp(1.2rem, 2vw, 1.6rem);
  border: 1px solid rgba(255,255,255,.7);
  background: rgba(255,255,255,.55);
  backdrop-filter: blur(20px) saturate(165%);
  -webkit-backdrop-filter: blur(20px) saturate(165%);
  box-shadow: 0 26px 60px -40px rgba(40,10,16,.4), inset 0 1px 0 rgba(255,255,255,.8);
}
article.artist {
  transition: opacity .9s var(--ease), transform .9s var(--ease), box-shadow .55s var(--ease), border-color .55s var(--ease);
}
.artist:hover {
  box-shadow: 0 30px 60px -30px rgba(103,17,30,.38);
  border-color: rgba(194,154,85,.45);
}
.artist__photo {
  display: block;
  width: clamp(78px, 9vw, 124px);
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 auto 1rem;
  border: 2px solid rgba(194,154,85,.5);
  box-shadow: 0 14px 30px -14px rgba(103,17,30,.4);
  transform: translateZ(0);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease);
  transform-origin: center center;
}
.artist__photo img { width: 100%; height: 100%; object-fit: cover; }
.artist:hover .artist__photo {
  transform: scale(1.3);
  box-shadow: 0 20px 36px -16px rgba(103,17,30,.48);
}
.artist__photo--ph {
  display: grid;
  place-items: center;
  background: linear-gradient(155deg, rgba(194,154,85,.26), rgba(103,17,30,.14));
  color: var(--maroon);
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.3rem, 2vw, 1.7rem);
  letter-spacing: .04em;
}
.artist__photo--ph::after { content: attr(data-initials); }
.artist h3 { font-family: var(--serif); font-weight: 500; font-size: clamp(1rem, 1.6vw, 1.2rem); letter-spacing: -.01em; margin-bottom: .15rem; }
.artist p { font-size: clamp(.76rem, 1.1vw, .86rem); color: var(--ink-3); letter-spacing: .02em; }
.artist-grid .artist:nth-child(3n+2) { transition-delay: .1s; }
.artist-grid .artist:nth-child(3n+3) { transition-delay: .2s; }
.artist { min-width: 0; }
/* last card steps a touch darker/warmer so the eye eases toward the maroon section */
.artist-grid .artist:nth-child(9) {
  background: linear-gradient(160deg, rgba(255,246,240,.55), rgba(194,154,85,.16) 70%, rgba(103,17,30,.14));
  border-color: rgba(194,154,85,.45);
}
.artist-grid .artist:nth-child(8) {
  background: linear-gradient(160deg, rgba(255,250,246,.55), rgba(194,154,85,.09));
}
.artists__more { margin-top: clamp(2rem, 4vw, 3rem); text-align: left; color: var(--ink-2); font-family: var(--sans); font-style: normal; font-size: clamp(1.05rem, 1.6vw, 1.3rem); font-weight: 400; }
@media (max-width: 720px) {
  .artist-grid { gap: .6rem; }
  .artist { padding: 1rem .45rem .9rem; border-radius: 18px; }
  .artist h3 { font-size: .95rem; }
  .artist p { font-size: .72rem; }
}

/* ===================================================================
   DIFFERENCE (dark sacred)
   =================================================================== */
.difference {
  position: relative;
  background: radial-gradient(120% 120% at 50% 0%, var(--maroon) 0%, var(--maroon-deep) 55%, var(--footer-ground) 100%);
  text-align: center; overflow: hidden;
}
.difference .lede { margin-inline: auto; margin-bottom: 2.2rem; }
.difference__glow { position: absolute; top: -10%; left: 50%; transform: translateX(-50%); width: 700px; height: 700px; background: radial-gradient(circle, rgba(230,201,138,.22), transparent 60%); pointer-events: none; }
.difference__mark { width: clamp(72px, 10vw, 104px); margin: 0 auto 1.6rem; opacity: .95; filter: drop-shadow(0 14px 30px rgba(0,0,0,.4)); }
.difference .display { margin-inline: auto; }
.difference__bullets { list-style: none; display: grid; gap: .65rem; margin: 0 auto 2.2rem; color: rgba(251,248,244,.82); font-size: clamp(1rem, 1.5vw, 1.18rem); }
.difference__bullets li::before { content: '✦'; color: var(--gold-soft); margin-right: .7rem; }
.btn--pulse {
  color: #fff; border: 1px solid rgba(255,255,255,.22);
  background: var(--dark-glass);
  backdrop-filter: blur(14px) saturate(150%); -webkit-backdrop-filter: blur(14px) saturate(150%);
  box-shadow: 0 12px 30px -16px rgba(0,0,0,.52), inset 0 1px 0 rgba(255,255,255,.26), inset 12px 10px 24px -22px rgba(255,255,255,.32);
  animation: premiumPulse 5.5s var(--ease) infinite;
}
.btn--pulse:hover { background: linear-gradient(135deg, rgba(139,31,45,.96), rgba(103,17,30,.78) 52%, rgba(194,154,85,.26)); }
@keyframes premiumPulse {
  0%, 100% { transform: scale(1); box-shadow: 0 12px 30px -16px rgba(0,0,0,.52), inset 0 1px 0 rgba(255,255,255,.26), inset 12px 10px 24px -22px rgba(255,255,255,.32); }
  50% { transform: scale(1.045); box-shadow: 0 18px 40px -12px rgba(230,201,138,.38), inset 0 1px 0 rgba(255,255,255,.3), inset 12px 10px 24px -22px rgba(255,255,255,.36); }
}
.badges { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; margin-top: 2.2rem; }
.badge { font-size: .82rem; font-weight: 600; color: var(--gold-soft); padding: .5em 1.1em; border-radius: 100px; border: 1px solid rgba(230,201,138,.35); }

/* ===================================================================
   FREEMIUM
   =================================================================== */
.freemium { background: var(--ivory); }
.plans { margin-top: clamp(2.4rem, 5vw, 3.6rem); display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 2vw, 1.6rem); align-items: stretch; }
.plan {
  position: relative; border-radius: 26px; padding: clamp(1.8rem, 3vw, 2.6rem);
  display: flex; flex-direction: column;
  border: 1px solid rgba(255,255,255,.7);
  background: rgba(255,255,255,.5);
  backdrop-filter: blur(22px) saturate(165%);
  -webkit-backdrop-filter: blur(22px) saturate(165%);
  box-shadow: 0 30px 70px -46px rgba(40,10,16,.4), inset 0 1px 0 rgba(255,255,255,.8);
}
.plan--pro {
  background: linear-gradient(165deg, rgba(255,247,244,.6), rgba(139,31,45,.16) 78%, rgba(103,17,30,.22));
  border-color: rgba(103,17,30,.28);
  box-shadow: 0 44px 90px -42px rgba(103,17,30,.45), inset 0 1px 0 rgba(255,255,255,.6);
}
.plan__flag { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: var(--maroon); color: #fff; font-size: .76rem; font-weight: 700; letter-spacing: .08em; padding: .4em 1em; border: 1px solid rgba(255,255,255,.16); border-radius: 100px; box-shadow: 0 8px 22px -8px rgba(103,17,30,.6); }
.plan h3 { font-family: var(--serif); font-weight: 500; font-size: 1.7rem; margin-bottom: .4rem; }
.plan__price { font-size: 1.5rem; font-weight: 700; color: var(--maroon); margin-bottom: 1.5rem; }
.plan__price span { font-size: .9rem; font-weight: 500; color: var(--ink-3); }
.plan ul { list-style: none; display: grid; gap: .8rem; margin-bottom: 2rem; flex: 1; }
.plan li { position: relative; padding-left: 1.7rem; color: var(--ink-2); font-size: .98rem; }
.plan li::before { content: '✓'; position: absolute; left: 0; color: var(--maroon); font-weight: 700; }
.fineprint { margin-top: 1.5rem; text-align: center; font-size: .88rem; color: var(--ink-3); }

/* ===================================================================
   WAITLIST FORM
   =================================================================== */
.waitlist-wrap { max-width: 520px; margin: clamp(1.8rem, 4vw, 2.8rem) auto 0; }
.waitlist-form { display: grid; gap: 1rem; text-align: left; }
.waitlist-field { display: grid; gap: .4rem; }
.waitlist-field label { font-size: .82rem; font-weight: 600; letter-spacing: .04em; color: var(--ink-2); }
.waitlist-input {
  font-family: var(--sans); font-size: 1rem; color: var(--ink);
  padding: .9em 1.1em; border-radius: 14px; width: 100%;
  border: 1px solid rgba(103,17,30,.16);
  background: rgba(255,255,255,.6);
  backdrop-filter: blur(14px) saturate(150%); -webkit-backdrop-filter: blur(14px) saturate(150%);
  transition: border-color .3s, box-shadow .3s;
}
.waitlist-input::placeholder { color: var(--ink-3); }
.waitlist-input:focus { outline: 0; border-color: var(--maroon); box-shadow: 0 0 0 3px rgba(103,17,30,.12); }
.waitlist-msg { font-size: .92rem; min-height: 1.3em; text-align: center; }
.waitlist-msg.is-error { color: #a4122a; }
.waitlist-msg.is-ok { color: #1a7a3a; }
.waitlist-note { margin-top: 1.1rem; font-size: .8rem; color: var(--ink-3); text-align: center; }

/* ===================================================================
   GET / PWA
   =================================================================== */
.get { background: linear-gradient(180deg, var(--ivory) 0%, var(--ivory-2) 100%); }
.get__mark { width: clamp(80px, 12vw, 120px); margin: 0 auto 1.4rem; animation: float 6s ease-in-out infinite; }
.get .lede { margin: 1rem auto 0; }
.get__cta { display: flex; gap: .9rem; justify-content: center; flex-wrap: wrap; margin-top: 2rem; }
.get__hint { margin-top: 1.2rem; font-size: .86rem; color: var(--ink-3); }

/* ===================================================================
   VISION
   =================================================================== */
.vision { background: var(--ivory-2); }
.vision__big { font-family: var(--serif); font-weight: 400; font-size: clamp(1.7rem, 4.2vw, 3rem); line-height: 1.2; letter-spacing: -.015em; color: var(--ink); margin-bottom: 1.4rem; }
.vision__sub { font-size: clamp(1rem, 1.6vw, 1.2rem); color: var(--ink-2); max-width: 56ch; margin-inline: auto; }

/* ===================================================================
   OUR STORY (about.html)
   =================================================================== */
.story { background: var(--ivory); }
.story .lede { max-width: 68ch; margin-top: 1.4rem; }
.story .lede + .lede { margin-top: 1.1rem; }

.story-more { margin-top: 1.8rem; }
.story-more__toggle {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--serif); font-size: 1.02rem; font-weight: 500;
  color: var(--maroon); cursor: pointer; list-style: none;
  transition: color .25s;
}
.story-more__toggle::-webkit-details-marker { display: none; }
.story-more__toggle:hover { color: var(--maroon-deep); }
.story-more__arrow { width: 16px; height: 16px; flex-shrink: 0; transition: transform .3s var(--ease); }
.story-more[open] .story-more__arrow { transform: rotate(180deg); }
.story-more__card {
  margin-top: 1.4rem;
  max-width: 68ch;
  padding: clamp(1.6rem, 3vw, 2.3rem);
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,.78);
  background: rgba(255,255,255,.62);
  backdrop-filter: blur(22px) saturate(170%);
  -webkit-backdrop-filter: blur(22px) saturate(170%);
  box-shadow: 0 34px 80px -46px rgba(40,10,16,.45), inset 0 1px 0 rgba(255,255,255,.86);
}
.story-more__title {
  font-family: var(--serif); font-weight: 500; font-size: clamp(1.3rem, 2.3vw, 1.7rem);
  color: var(--maroon); margin-bottom: 1.1rem;
}
.story-more__card p { color: var(--ink-2); font-size: 1rem; line-height: 1.65; }
.story-more__card p + p { margin-top: 1rem; }
.story-more__quote {
  font-family: var(--serif); font-style: italic; font-weight: 500;
  font-size: clamp(1.05rem, 1.8vw, 1.22rem); color: var(--maroon-soft);
  border-left: 2px solid rgba(103,17,30,.28); padding-left: 1rem;
}

/* ===================================================================
   VALUES (about.html)
   =================================================================== */
.values { background: var(--ivory-2); }
.values-grid {
  margin-top: clamp(2rem, 5vw, 3rem);
  display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1rem, 2.4vw, 1.6rem);
}
/* 4 across is too tight below ~1080px — drop to 2x2 rather than leaving an orphan card */
@media (max-width: 1080px) { .values-grid { grid-template-columns: repeat(2, 1fr); } }
.value-card {
  padding: clamp(1.6rem, 3vw, 2.1rem);
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,.78);
  background: rgba(255,255,255,.62);
  backdrop-filter: blur(22px) saturate(170%);
  -webkit-backdrop-filter: blur(22px) saturate(170%);
  box-shadow: 0 26px 60px -40px rgba(40,10,16,.4), inset 0 1px 0 rgba(255,255,255,.8);
  transition: box-shadow .45s var(--ease), border-color .45s var(--ease);
}
.value-card:hover { box-shadow: 0 30px 60px -30px rgba(103,17,30,.34); border-color: rgba(194,154,85,.45); }
.value-card__icon {
  display: inline-grid; place-items: center; width: 44px; height: 44px; margin-bottom: 1.1rem;
  border-radius: 50%; color: var(--maroon);
  background: linear-gradient(155deg, rgba(194,154,85,.22), rgba(103,17,30,.10));
}
.value-card__icon svg { width: 25px; height: 25px; }
/* Unity-in-diversity: the two-circles glyph reads small next to the others, so it gets a
   2x svg. The drawn shape only spans 16 of the 24 viewBox units, so at 40px it still clears
   the 44px badge with room to spare — the badge itself stays the same size as the rest.
   Its stroke-width is halved inline (0.85) to offset the scale-up, so the line weight reads
   lighter than the others rather than heavier. */
.value-card__icon--lg svg { width: 40px; height: 40px; }
.value-card h3 { font-family: var(--serif); font-weight: 500; font-size: 1.2rem; margin-bottom: .5rem; color: var(--ink); }
.value-card p { font-size: .92rem; color: var(--ink-2); line-height: 1.5; }
.value-card p sup { font-size: .7em; line-height: 0; vertical-align: super; }
.value-card__link {
  display: block; margin-top: .8rem; padding-left: 1.6rem;
  font-size: .92rem; font-weight: 400; color: var(--maroon-deep);
  transition: color .25s ease-out;
}
.value-card__link:hover { color: var(--maroon); }
/* Needs `p.` to outrank `.value-card p` (class+element), which otherwise wins on
   specificity and silently forces the note back to body size. */
.value-card p.value-card__note {
  margin-top: .9rem;
  font-size: .575rem; line-height: 1.5; color: var(--ink-3);
}

/* ===================================================================
   CORE TEAM (about.html)
   =================================================================== */
.founders { background: var(--ivory); }
.founders-grid {
  margin-top: clamp(2rem, 5vw, 3rem);
  display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1.2rem, 3vw, 2rem);
  /* Capped because two founder cards at the full 1100px wrap would be ~535px each, giving
     ~90-character lines for a 160-word bio. `margin-inline: auto` is the other half of that
     decision — without it the grid sat left with a 420px void, the only block on the page
     that didn't fill its container. */
  max-width: 720px; margin-inline: auto;
}
.founder-card {
  text-align: center;
  padding: clamp(1.8rem, 3vw, 2.4rem) 1.2rem;
  border-radius: 26px;
  border: 1px solid rgba(255,255,255,.7);
  background: rgba(255,255,255,.55);
  backdrop-filter: blur(20px) saturate(165%);
  -webkit-backdrop-filter: blur(20px) saturate(165%);
  box-shadow: 0 26px 60px -40px rgba(40,10,16,.4), inset 0 1px 0 rgba(255,255,255,.8);
}
.founder-card__photo {
  display: block; width: clamp(96px, 12vw, 130px); aspect-ratio: 1; border-radius: 50%;
  margin: 0 auto 1.1rem; overflow: hidden;
  border: 2px solid rgba(194,154,85,.5);
  box-shadow: 0 14px 30px -14px rgba(103,17,30,.4);
}
.founder-card__photo img { width: 100%; height: 100%; object-fit: cover; }
.founder-card__photo--ph {
  display: grid; place-items: center;
  background: linear-gradient(155deg, rgba(194,154,85,.26), rgba(103,17,30,.14));
  color: var(--maroon); font-family: var(--serif); font-weight: 500; font-size: 1.6rem;
}
.founder-card__photo--ph::after { content: attr(data-initials); }
.founder-card h3 { font-family: var(--serif); font-weight: 500; font-size: 1.2rem; margin-bottom: .3rem; color: var(--ink); }
.founder-card__role {
  font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--gold); margin-bottom: .8rem;
}
.founder-card p { font-size: .92rem; color: var(--ink-2); line-height: 1.5; }
/* Bios run to three paragraphs, so they need separating. .founder-card__role is also a <p>,
   and already carries its own margin-bottom — so reset the one after it or the gap doubles.
   The reset needs `p.` : `.founder-card p + p` is (0,1,2) and would otherwise outrank a plain
   `.founder-card__role + p` (0,1,1). Same trap as .value-card__note — this stylesheet uses the
   `.block p` pattern a lot, so element-heavy selectors quietly beat BEM class selectors. */
.founder-card p + p { margin-top: .85rem; }
.founder-card p.founder-card__role + p { margin-top: 0; }
/* The card centres everything, which suited the one-line placeholder but not a real 130-word
   bio — centred body copy gives every line a different starting edge and slows reading badly.
   Photo, name and role stay centred; only the prose goes left. */
.founder-card p:not(.founder-card__role) { text-align: left; }

@media (max-width: 720px) {
  .values-grid { grid-template-columns: 1fr; }
  .founders-grid { grid-template-columns: 1fr; max-width: 340px; margin-inline: auto; }
}

/* ===================================================================
   STANDARD PAGES
   =================================================================== */
.page-main {
  min-height: 100svh;
  padding-top: 92px;
  background:
    radial-gradient(90% 70% at 50% 0%, rgba(255,255,255,.94), transparent 62%),
    linear-gradient(180deg, var(--ivory) 0%, var(--ivory-2) 100%);
}
.page-main--banner { padding-top: 0; }
.about-banner {
  position: relative;
  width: 100%;
  aspect-ratio: 977 / 658;
  overflow: hidden;
  background: var(--maroon-deep);
}
.about-banner img {
  width: 100%; height: 100%; object-fit: cover; object-position: center center;
  display: block;
}
.about-banner::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    var(--maroon-deep) 0%,
    rgba(74,12,21,.86) 8%,
    rgba(74,12,21,.5) 18%,
    rgba(74,12,21,.12) 29%,
    transparent 38%);
  pointer-events: none;
}
.about-banner::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0; height: 14%;
  background: linear-gradient(180deg, transparent, var(--ivory));
  pointer-events: none;
}

/* Concentric waves — the Home page's ring animation (Vision/Mission icons: `about-icon-ring`
   keyframes, 2.4s ease-out, .8s stagger, #7a0f16/#c9a227) scaled up to banner size. The soft flow
   comes from keeping the border PROPORTIONAL: Home's 1.5px border on a 22px ring is ~7% thick —
   a raw 1.5px border at 280px reads as a hard thin circle instead. Thicker border + blur restores it.
   Centering uses negative margins, not translate, because the keyframes own the transform (scale).
   Shifted up via transform, NOT negative margin — a negative margin drags <main>'s opaque ivory
   background up with it in layout, which buried the banner's bottom fade and the rings themselves. */
.about-waves {
  /* Anchor the wave origin on the candle-flower mandala at the heart of the photo:
     the banner is 100vw × 658/977 ≈ 67.35vw tall and the mandala center sits ≈58% down
     (≈42% above the bottom edge = 28.3vw) and ≈48% across. This element sits right after
     the banner, so translate up from the banner's bottom edge by that amount. */
  --wave-size: clamp(320px, 38vw, 580px);
  position: relative; height: 0; transform: translateY(-28.3vw);
  z-index: 1; pointer-events: none;
}
.about-waves span {
  position: absolute; left: 48%; top: 0;
  width: var(--wave-size); height: var(--wave-size);
  margin: calc(var(--wave-size) / -2) 0 0 calc(var(--wave-size) / -2);
  border-radius: 50%;
  border: 14px solid currentColor;
  filter: blur(8px);
  opacity: 0;
  animation: about-wave 7.2s linear infinite;
}
.about-waves span:nth-child(1) { color: #7a0f16; }
.about-waves span:nth-child(2) { color: #c9a227; animation-delay: 2.4s; }
.about-waves span:nth-child(3) { color: #7a0f16; animation-delay: 4.8s; }
/* Slower, broader take on Home's icon-ring wave: a new ring every 2.4s over a 7.2s life,
   so three soft bands are always alive at staggered radii, dissolving into each other. */
@keyframes about-wave {
  0%   { transform: scale(.3); opacity: 0; }
  15%  { opacity: .38; }
  75%  { opacity: .12; }
  100% { transform: scale(3); opacity: 0; }
}

.page-hero {
  padding-block: clamp(92px, 14vw, 170px);
}
.page-hero__inner {
  display: grid;
  gap: 1.6rem;
  max-width: 780px;
}
.page-hero h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.7rem, 8vw, 5.8rem);
  line-height: .96;
  color: var(--maroon);
}
.page-hero p {
  max-width: 58ch;
  color: var(--ink-2);
  font-size: clamp(1.05rem, 1.8vw, 1.28rem);
}
.page-placeholder {
  display: inline-flex;
  width: fit-content;
  color: var(--maroon);
  border: 1px solid rgba(103,17,30,.22);
  border-radius: 100px;
  padding: .5em 1em;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* ===================================================================
   FOOTER
   =================================================================== */
.footer {
  /* Footer transition rule: use --footer-ground as the exact final color of a
     preceding dark section. Only introduce a lead-in gradient after verifying
     that its final color is in the same maroon family; light page endings stay solid. */
  background: var(--footer-ground);
  color: rgba(251,248,244,.75);
  padding: clamp(1.8rem, 4vw, 3.5rem) 0;
}
.footer__inner {
  width: min(calc(100% - clamp(2rem, 8vw, 8rem)), 1040px); max-width: none;
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; gap: 1rem; justify-items: center; text-align: center;
  padding: clamp(1.55rem, 3vw, 2.3rem) clamp(1.5rem, 4vw, 3rem);
  background: linear-gradient(135deg,
              rgba(255,255,255,.14) 0px,
              rgba(255,255,255,.08) 6px,
              #53101b 18px,
              #4a0c15 58%,
              #5b1220 100%);
  border-radius: clamp(42px, 6vw, 82px);
  box-shadow: 0 18px 44px -34px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.3), inset 18px 16px 32px -28px rgba(255,255,255,.48), inset -14px -12px 28px -25px rgba(230,201,138,.2);
}
.footer__inner::before {
  content: ''; position: absolute; inset: 0; z-index: 0; border-radius: inherit; pointer-events: none;
  background:
    linear-gradient(135deg, rgba(255,255,255,.24) 0px, rgba(255,255,255,.12) 6px, transparent 18px),
    linear-gradient(180deg, rgba(255,255,255,.08), transparent 22px);
  opacity: .82;
}
.footer__inner::after {
  content: ''; position: absolute; inset: 0; z-index: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.09), inset 0 2px 18px -12px rgba(255,255,255,.18);
}
.footer__inner > * { position: relative; z-index: 1; }
.s-add, .s-pills span.on, .s-play, .s-cart, .s-checkout { background: var(--dark-glass); }

/* Shared interactive rule: a brighter state makes every link and button feel responsive. */
a:hover, button:hover { filter: brightness(1.12); }
.footer__brand { display: flex; align-items: center; gap: .6rem; }
.footer__brand img { width: 30px; height: 30px; filter: brightness(0) saturate(100%) invert(70%) sepia(20%) saturate(950%) hue-rotate(4deg) brightness(86%) contrast(90%); }
.footer__brand span { font-family: var(--serif); font-size: 1.15rem; color: var(--gold); }
.footer__nav { display: flex; flex-wrap: wrap; gap: 1.2rem; justify-content: center; }
.footer__nav a { font-size: .9rem; transition: color .3s; }
.footer__nav a + a::before { content: '|'; margin-right: 1.2rem; color: rgba(230,201,138,.46); }
.footer__nav a:hover { color: var(--gold-soft); }
.footer__copy { margin-top: clamp(1rem, 2vw, 1.4rem); text-align: center; font-size: .41rem; color: rgba(251,248,244,.45); }

/* ===================================================================
   REVEAL ANIMATION
   =================================================================== */
.reveal { opacity: 0; transform: translateY(32px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }

/* ===================================================================
   RESPONSIVE
   =================================================================== */
@media (max-width: 940px) {
  .stats { grid-template-columns: 1fr 1fr; }
  .uc-grid { grid-template-columns: 1fr 1fr; }
  .tools__stage { grid-template-columns: 1fr; }
  .tools__copy { min-height: auto; }
  .phone { order: -1; }
  .tools__cuebar { grid-template-columns: 1fr; gap: .7rem; justify-items: center; }
  .tools__cue { justify-self: center; text-align: center; }
  .tools__cuebar .tools__segmented { justify-self: center; max-width: 100%; width: fit-content; }
  .tool-banner { max-width: 345px; margin-inline: auto; }
  /* Phone layout: mockup first, then the tool picker, then descriptions */
  .tools .wrap { display: flex; flex-direction: column; }
  .tools .wrap > * { min-width: 0; max-width: 100%; }
  .tools__cuebar { width: 100%; }
  .tools .eyebrow { order: 1; }
  .tools .display { order: 2; }
  .tools .lede { order: 3; }
  .tools__stage { display: contents; }
  .tools .lede { margin-bottom: 2.4rem; }
  .phone { order: 4; margin-inline: auto; margin-top: 1rem; }
  .tools__cuebar { order: 5; }
  .tools__copy { order: 6; width: 100%; }
  .tools__cue--desktop { display: none; }
  .tools__cue--mobile { display: block; }
  /* picker overflows on small screens — show a slim slider to signal it scrolls */
  .tools__segmented { scrollbar-width: thin; scrollbar-color: rgba(103,17,30,.4) transparent; }
  .tools__segmented::-webkit-scrollbar { display: block; height: 3px; }
  .tools__segmented::-webkit-scrollbar-thumb { background: rgba(103,17,30,.4); border-radius: 100px; }
  .tools__segmented::-webkit-scrollbar-track { background: transparent; }
  .about__cards { grid-template-columns: 1fr; }
  .team-orbit { min-height: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
  .team-orbit::before { display: none; }
  .team-orbit__center {
    position: relative;
    inset: auto;
    transform: none;
    width: 100%;
    min-height: 220px;
    border-radius: 28px;
    grid-column: 1 / -1;
  }
  .team-card {
    position: relative;
    inset: auto;
    width: 100%;
  }
}

@media (max-width: 720px) {
  /* Slim frosted bar: brand left, burger right. The background is ALWAYS on (not just when
     scrolled) — that's deliberate. Every logo-legibility bug in this nav's history came from
     having no background, which forced the mark to fight whatever photo sat behind it. With a
     bar there, nothing needs glows or halos to stay readable. The bar hides on scroll-down
     (see .nav--hidden) so it costs no reading space while you're actually reading. */
  .nav,
  .nav.is-scrolled {
    background: rgba(251, 248, 244, .86);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    box-shadow: 0 1px 0 rgba(103,17,30,.10);
  }
  .nav__inner {
    justify-content: space-between; gap: .75rem;
    padding: 7px clamp(14px, 4vw, 20px);
  }
  .nav__brand { display: flex; }
  .nav__logo { width: 28px; height: 28px; }
  .nav__name { font-size: .8rem; letter-spacing: .07em; }

  .nav__links {
    position: fixed; top: 62px; right: clamp(14px, 4vw, 22px);
    width: 50vw; max-width: 300px; min-width: 190px;
    flex-direction: column; gap: 2px; align-items: stretch;
    background: rgba(247, 232, 235, .92);
    backdrop-filter: blur(22px) saturate(180%); -webkit-backdrop-filter: blur(22px) saturate(180%);
    border: 1px solid rgba(103,17,30,.14); border-radius: 20px; padding: 8px;
    box-shadow: 0 30px 70px -28px rgba(103,17,30,.5), inset 0 1px 0 rgba(255,255,255,.5);
    transform: translateY(-10px) scale(.96); transform-origin: top right;
    opacity: 0; pointer-events: none;
    transition: opacity .28s var(--ease), transform .4s var(--ease);
  }
  .nav.is-open .nav__links { opacity: 1; transform: none; pointer-events: auto; }
  .nav__actions { display: flex; }
  .nav__links a {
    font-size: 1.02rem; font-weight: 600; padding: .82rem 1rem; width: 100%;
    color: var(--maroon); border-radius: 13px; border-bottom: 1px solid rgba(103,17,30,.08);
    -webkit-tap-highlight-color: rgba(194,154,85,.4);
  }
  .nav__links a:last-child { border-bottom: 0; }
  .nav__links a:hover { background: rgba(103,17,30,.06); color: var(--maroon); }
  .nav__links a:active { background: rgba(194,154,85,.35); }
  .nav__links a::before { display: none; }

  /* Burger: quiet 42px circle sitting in the bar — golden-hued hover/open states. */
  .nav__burger {
    display: block;
    background: rgba(103,17,30,.05);
    border-color: rgba(103,17,30,.14);
    -webkit-tap-highlight-color: rgba(194,154,85,.4);
  }
  .nav__burger:hover { background: rgba(230,201,138,.5); }
  .nav.is-open .nav__burger { background: rgba(230,201,138,.5); }

  /* About page, while the bar still sits over the banner: take the banner's own
     var(--maroon-deep) so bar and photo read as one surface (the banner's top gradient starts
     at exactly this colour, so the seam disappears), and switch to the desktop on-dark palette
     — cream logo, ivory wordmark, gold active link. Reverts to the light bar once .is-scrolled
     lands, same as desktop.
     The popout card flips together with the bar and never on its own: light text on the light
     card was the original contrast bug, so these two always move as a pair. */
  .nav--on-dark:not(.is-scrolled) {
    background: var(--maroon-deep);
    backdrop-filter: none; -webkit-backdrop-filter: none;
    box-shadow: none;
  }
  .nav--on-dark:not(.is-scrolled) .nav__logo { content: url('../img/logo-cream.png'); }
  .nav--on-dark:not(.is-scrolled) .nav__name { color: var(--ivory); }
  .nav--on-dark:not(.is-scrolled) .nav__burger {
    background: rgba(255,255,255,.12);
    border-color: rgba(255,255,255,.3);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.25);
  }
  .nav--on-dark:not(.is-scrolled) .nav__burger:hover,
  .nav--on-dark:not(.is-scrolled).is-open .nav__burger { background: rgba(230,201,138,.38); }
  .nav--on-dark:not(.is-scrolled) .nav__burger span { background: var(--ivory); }

  .nav--on-dark:not(.is-scrolled) .nav__links {
    background: rgba(74,12,21,.95);
    border-color: rgba(230,201,138,.26);
    box-shadow: 0 30px 70px -28px rgba(20,4,8,.72), inset 0 1px 0 rgba(255,255,255,.10);
  }
  .nav--on-dark:not(.is-scrolled) .nav__links a {
    color: rgba(251,248,244,.9);
    border-bottom-color: rgba(230,201,138,.16);
  }
  .nav--on-dark:not(.is-scrolled) .nav__links a:hover { background: rgba(255,255,255,.09); color: #fff; }
  .nav--on-dark:not(.is-scrolled) .nav__links a:active { background: rgba(230,201,138,.28); }
  .nav--on-dark:not(.is-scrolled) .nav__links a.is-active { color: var(--gold-soft); }
  .nav__burger span { background: var(--maroon); }
  .uc-grid { grid-template-columns: 1fr; }
  .plans { grid-template-columns: 1fr; }
  .plan--pro { order: -1; }
  .team-orbit { grid-template-columns: 1fr; }
}

/* Slow, very subtle golden-yellow fire glow behind the logo above the mobile burger.
   The constant ivory base shadow keeps the dark logo legible over dark photos (About banner)
   while staying invisible on light pages; the gold layers do the slow flicker. */
@keyframes logo-fire {
  0%, 100% { filter: drop-shadow(0 0 1px rgba(251,248,244,.95)) drop-shadow(0 0 3px rgba(251,248,244,.7)) drop-shadow(0 0 4px rgba(194,154,85,.45)) drop-shadow(0 0 8px rgba(230,201,138,.2)); }
  35%      { filter: drop-shadow(0 0 1px rgba(251,248,244,.95)) drop-shadow(0 0 3px rgba(251,248,244,.7)) drop-shadow(0 0 6px rgba(194,154,85,.65)) drop-shadow(0 0 12px rgba(230,201,138,.38)); }
  60%      { filter: drop-shadow(0 0 1px rgba(251,248,244,.95)) drop-shadow(0 0 3px rgba(251,248,244,.7)) drop-shadow(0 0 5px rgba(230,201,138,.55)) drop-shadow(0 0 10px rgba(230,201,138,.28)); }
}

@media (max-width: 460px) {
  .stats { grid-template-columns: 1fr 1fr; }
  .hero__cta .btn, .get__cta .btn { width: 100%; }
}