/* ═══════════════════════════════════════════════════════════════
   WOODSONG STYLES.CSS  —  V11 Sales Master
   Design tokens · Wood grain · Nav · Pages · Components · Mobile
═══════════════════════════════════════════════════════════════ */

/* ── GOOGLE FONTS loaded in index.html ── */

/* ═══ DESIGN TOKENS ═══════════════════════════════════════════ */
:root {
  /* Portal accent colours */
  --player:       #c8963e;
  --player-dim:   rgba(200,150,62,0.15);
  --player-glow:  rgba(200,150,62,0.32);
  --student:      #4a9eff;
  --student-dim:  rgba(74,158,255,0.15);
  --student-glow: rgba(74,158,255,0.32);
  --teacher:      #4ecb71;
  --teacher-dim:  rgba(78,203,113,0.15);
  --teacher-glow: rgba(78,203,113,0.32);
  --luthier:      #e06c8a;
  --luthier-dim:  rgba(224,108,138,0.15);
  --luthier-glow: rgba(224,108,138,0.32);

  /* Gold gradient stops — shared across all brand elements */
  --gold-hi:   #f3cf8a;
  --gold-mid:  #e8a030;
  --gold-base: #c8963e;
  --gold-lo:   #a06820;
  --gold-gradient: linear-gradient(145deg,#f3cf8a 0%,#e8a030 28%,#c8963e 52%,#e8a030 76%,#f3cf8a 100%);
}

/* ═══ DARK MODE — Rosewood (default) ══════════════════════════ */
/* Dark vars live on :root so they are always the baseline.
   We do NOT repeat them on [data-theme="dark"] — if we did,
   a body with data-theme="dark" would override html's light vars. */
:root {
  --wood-bg:     #1c0c08;
  --surface:     rgba(38,18,12,0.88);
  --surface2:    rgba(52,26,16,0.90);
  --card-bg:     rgba(36,16,12,0.90);
  --card-border: rgba(180,80,50,0.20);
  --border:      rgba(160,70,40,0.14);
  --border2:     rgba(200,90,55,0.26);
  --nav-bg:      rgba(12,5,3,0.96);
  --text:        #f0e0cc;
  --text-mid:    #c09870;
  --text-dim:    #806040;
  --shadow:      rgba(0,0,0,0.55);
}

/* ═══ LIGHT MODE — Maple ═══════════════════════════════════════ */
[data-theme="light"] {
  --wood-bg:     #c8a768;
  --surface:     rgba(248,238,215,0.82);
  --surface2:    rgba(236,220,190,0.90);
  --card-bg:     rgba(250,242,222,0.88);
  --card-border: rgba(140,95,35,0.22);
  --border:      rgba(140,95,35,0.15);
  --border2:     rgba(140,95,35,0.30);
  --nav-bg:      rgba(38,20,6,0.96);  /* dark nav bar keeps gold readable */
  --text:        #1c1008;
  --text-mid:    #3d2510;
  --text-dim:    #6a4820;
  --shadow:      rgba(80,48,16,0.20);
}

/* Light mode — body text and card text */
[data-theme="light"] .hero-subtitle { color: #3d2510; }
[data-theme="light"] .hero-desc     { color: #5a3a18; }
[data-theme="light"] .section-tag   { color: #7a4e20; }
[data-theme="light"] .section-title { color: #1c1008; }
[data-theme="light"] .section-title em { color: var(--gold-base); }
[data-theme="light"] .card-label    { color: var(--gold-base); }
[data-theme="light"] .fc-name       { color: #1c1008; }
[data-theme="light"] .fc-desc       { color: #4a2e10; }
[data-theme="light"] .pc-name       { color: #1c1008; }
[data-theme="light"] .pc-list li    { color: #4a2e10; }

/* Light mode — nav links on dark nav bar */
[data-theme="light"] .nav-link      { color: rgba(255,255,255,0.80); cursor: pointer; transition: opacity 0.15s; }
.nav-link:hover { opacity: 0.75; }
[data-theme="light"] .nav-link:hover{ color: #fff; background: rgba(255,255,255,0.12); }
[data-theme="light"] .breadcrumb    { color: rgba(255,255,255,0.70); }
[data-theme="light"] .breadcrumb:hover { color: #fff; }
[data-theme="light"] .theme-btn     { background: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.25); }

/* Light mode — footer stays on warm wood */
[data-theme="light"] footer         { background: rgba(200,165,100,0.94); border-color: rgba(140,95,35,0.35); }
[data-theme="light"] .footer-bottom { color: #5a3a18; border-color: rgba(140,95,35,0.22); }


/* ═══ GOLD GRADIENT — The WoodSong brand colour ═══════════════
   Critical: applied with identical values in both themes.
   -webkit-text-fill-color: transparent is what makes it work.
   Never override with a solid colour in [data-theme="light"].
══════════════════════════════════════════════════════════════ */
.ws-gold {
  background: linear-gradient(145deg, #f3cf8a 0%, #e8a030 30%, #c8963e 55%, #e8a030 78%, #f3cf8a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #c8963e; /* non-gradient fallback */
}

/* Hero brand title */
.hero-brand-title {
  font-family: 'Cinzel', serif;
  font-size: clamp(3rem, 9vw, 7rem);
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  line-height: 1;
  margin: 0 0 0.6rem 0;
  background: linear-gradient(145deg, #f3cf8a 0%, #e8a030 28%, #c8963e 52%, #e8a030 76%, #f3cf8a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #c8963e;
  filter: drop-shadow(0 3px 16px rgba(200,140,30,0.38));
  transition: filter 0.4s;
}
/* Both themes: same gradient — never turn black or brown */
[data-theme="light"] .hero-brand-title,
[data-theme="dark"]  .hero-brand-title {
  background: linear-gradient(145deg, #f3cf8a 0%, #e8a030 28%, #c8963e 52%, #e8a030 76%, #f3cf8a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #c8963e;
}

/* Nav brand name */
.nav-brand-name {
  font-family: 'Cinzel', serif;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  background: linear-gradient(145deg, #f3cf8a 0%, #e8a030 35%, #c8963e 60%, #f3cf8a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #c8963e;
  white-space: nowrap;
  filter: drop-shadow(0 1px 6px rgba(200,130,30,0.35));
}
[data-theme="light"] .nav-brand-name,
[data-theme="dark"]  .nav-brand-name {
  background: linear-gradient(145deg, #f3cf8a 0%, #e8a030 35%, #c8963e 60%, #f3cf8a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #c8963e;
}

/* Footer brand in Cinzel gold — always */
.footer-brand {
  font-family: 'Cinzel', serif;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  background: linear-gradient(145deg, #f3cf8a 0%, #e8a030 35%, #c8963e 60%, #f3cf8a 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: #c8963e !important;
  margin-bottom: 0.75rem;
}
[data-theme="light"] .footer-brand,
[data-theme="dark"]  .footer-brand {
  background: linear-gradient(145deg, #f3cf8a 0%, #e8a030 35%, #c8963e 60%, #f3cf8a 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}


/* ═══ BASE RESET ════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Outfit', sans-serif;
  color: var(--text);
  min-height: 100vh;
  overflow-x: hidden;
  transition: color 0.3s;
}


/* Dark — Rosewood deep grain (default, no data-theme selector needed) */
.wood-bg {
  position: fixed;
  inset: 0;
  z-index: -2;
  background-color: #1c0c08;
  background-image:
    repeating-linear-gradient(172deg,
      transparent 0px, transparent 5px,
      rgba(160,50,28,0.12) 5px, rgba(160,50,28,0.12) 6px,
      transparent 6px, transparent 14px,
      rgba(120,34,18,0.16) 14px, rgba(120,34,18,0.16) 16px,
      transparent 16px, transparent 48px,
      rgba(100,28,14,0.12) 48px, rgba(100,28,14,0.12) 49px
    ),
    repeating-linear-gradient(169.5deg,
      transparent 0px, transparent 36px,
      rgba(100,26,12,0.18) 36px, rgba(100,26,12,0.18) 38px,
      transparent 38px, transparent 82px,
      rgba(140,44,22,0.12) 82px, rgba(140,44,22,0.12) 84px
    ),
    radial-gradient(ellipse 110% 60% at 18% 28%, rgba(90,24,14,0.55) 0%, transparent 70%),
    radial-gradient(ellipse 80% 55% at 78% 68%,  rgba(70,18,10,0.45) 0%, transparent 65%);
  transition: background-color 0.4s;
}

/* Light — Maple honey grain */
[data-theme="light"] .wood-bg {
  background-color: #c8a76a;
  background-image:
    repeating-linear-gradient(174deg,
      transparent 0px, transparent 3px,
      rgba(140,88,22,0.08) 3px,  rgba(140,88,22,0.08) 4px,
      transparent 4px, transparent 9px,
      rgba(160,108,36,0.11) 9px, rgba(160,108,36,0.11) 10px,
      transparent 10px, transparent 18px,
      rgba(120,76,18,0.06) 18px, rgba(120,76,18,0.06) 19px,
      transparent 19px, transparent 32px,
      rgba(180,124,48,0.09) 32px, rgba(180,124,48,0.09) 33px,
      transparent 33px, transparent 52px,
      rgba(100,64,14,0.05) 52px, rgba(100,64,14,0.05) 54px
    ),
    repeating-linear-gradient(176.5deg,
      transparent 0px, transparent 28px,
      rgba(200,144,56,0.06) 28px, rgba(200,144,56,0.06) 29px,
      transparent 29px, transparent 58px,
      rgba(160,108,36,0.09) 58px, rgba(160,108,36,0.09) 60px,
      transparent 60px, transparent 100px,
      rgba(140,92,28,0.07) 100px, rgba(140,92,28,0.07) 101px
    ),
    radial-gradient(ellipse 130% 65% at 25% 30%, rgba(220,180,110,0.30) 0%, transparent 70%),
    radial-gradient(ellipse 90%  50% at 72% 68%, rgba(190,148,78,0.20)  0%, transparent 60%);
}

/* Fine noise overlay */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.07'/%3E%3C/svg%3E");
}


/* ═══ NAVIGATION — Three-zone Flexbox ════════════════════════════
   LEFT  : golden treble-clef logo + Home   (flex-shrink:0)
   CENTRE: WoodSong wordmark (position:absolute, always exactly centred)
   RIGHT : portal links + Get Started + theme + hamburger
═════════════════════════════════════════════════════════════════ */
/* ═══ NAVIGATION — sticky, transparent, works on all pages ═════

   initGlobalNav() injects #mainNav + #mobileNav into every portal
   page. The nav must be sticky (not fixed) so it doesn't overlap
   the page's own scroll position tracking, and must remain readable
   over both the dark hero images on index.html and the solid
   --surface backgrounds on the dashboard pages.

   --nav-bg is already defined in the theme tokens above:
     dark  → rgba(12,5,3,0.96)    — near-opaque rosewood
     light → rgba(38,20,6,0.96)   — dark bar keeps gold readable

   backdrop-filter blurs whatever is behind it on scroll, giving the
   frosted-glass effect on both the marketing hero and dashboards.
══════════════════════════════════════════════════════════════ */
nav, #mainNav {
  position: sticky;
  top: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.6rem 0 0;
  height: 68px;
  background: var(--nav-bg);
  backdrop-filter: blur(22px) saturate(1.4);
  -webkit-backdrop-filter: blur(22px) saturate(1.4);
  border-bottom: 1px solid var(--border2);
  transition: background 0.4s;
  /* relative needed so the absolutely-centred wordmark
     is positioned against the nav bar, not the viewport */
  position: sticky; /* explicit repeat keeps specificity clear */
}

/* Prevent the right zone from overflowing the nav width */
#navRight {
  overflow: hidden;
  min-width: 0;
  flex-shrink: 1;
}

/* Sub-pages: ensure <body> is not overflow:hidden which would
   prevent sticky from working. Dashboard pages use their own
   .t-body / .s-body / .l-body scroll containers — those are fine. */
body {
  overflow-x: hidden; /* horizontal only — vertical scroll must be free */
}

.nav-logo-wrap {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  cursor: pointer;
  flex-shrink: 0;
  text-decoration: none;
  min-width: 0;
}
.nav-logo-img {
  display: block;
  height: 44px;
  width: auto;
  object-fit: contain;
  flex-shrink: 0;
  transition: opacity .2s, transform .2s;
}
.nav-logo-wrap:hover .nav-logo-img { opacity: 0.82; transform: scale(1.05); }

.nav-right {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  flex-wrap: nowrap;
}

.nav-link {
  font-family: 'DM Mono', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-mid);
  background: none;
  border: none;
  padding: 0 0.85rem;
  height: 44px;
  min-width: 44px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}
.nav-link:hover { color: var(--text); background: var(--player-dim); }
.nav-link.active { color: var(--gold-base); background: var(--player-dim); }

.theme-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--border2);
  background: var(--surface);
  font-size: 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s, background 0.3s;
  flex-shrink: 0;
}
.theme-btn:hover { transform: scale(1.1); }

.nav-cta {
  font-family: 'DM Mono', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #1a0e04;
  background: var(--gold-base);
  border: none;
  padding: 0 1.4rem;
  height: 44px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.2s;
  box-shadow: 0 2px 12px var(--player-glow);
  white-space: nowrap;
  flex-shrink: 0;
}
.nav-cta:hover { opacity: 0.88; transform: translateY(-1px); box-shadow: 0 4px 20px var(--player-glow); }

/* ── Get Started dropdown ────────────────────────────────────── */
.nav-cta-wrap {
  position: relative;
  flex-shrink: 0;
}
.nav-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 300px;
  background: var(--nav-bg);
  border: 1px solid var(--border2);
  border-radius: 14px;
  padding: 0.6rem;
  backdrop-filter: blur(22px) saturate(1.4);
  box-shadow: 0 12px 48px rgba(0,0,0,0.45);
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
  z-index: 500;
}
.nav-cta-wrap.open .nav-dropdown {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
/* Small caret */
.nav-dropdown::before {
  content: '';
  position: absolute;
  top: -6px;
  right: 18px;
  width: 11px;
  height: 11px;
  background: var(--nav-bg);
  border-left: 1px solid var(--border2);
  border-top: 1px solid var(--border2);
  transform: rotate(45deg);
}
.nav-dd-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.65rem 0.85rem;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s;
  text-decoration: none;
  gap: 0.5rem;
}
.nav-dd-item:hover { background: rgba(255,255,255,0.06); }
.nav-dd-label {
  font-family: 'DM Mono', monospace;
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 0.15rem;
}
.nav-dd-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.1;
}
.nav-dd-price {
  font-family: 'DM Mono', monospace;
  font-size: 0.62rem;
  color: var(--text-dim);
  white-space: nowrap;
  text-align: right;
}
.nav-dd-divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 0.4rem 0.5rem;
}
.nav-dd-full {
  display: block;
  text-align: center;
  font-family: 'DM Mono', monospace;
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-base);
  padding: 0.55rem;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s;
  text-decoration: none;
}
.nav-dd-full:hover { background: rgba(200,150,62,0.1); }

/* Breadcrumb — shown on portal pages, hidden on home */
.breadcrumb {
  display: none; /* shown via JS on portal pages */
  align-items: center;
  gap: 0.4rem;
  font-family: 'DM Mono', monospace;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-mid);
  cursor: pointer;
  background: none;
  border: none;
  padding: 0 0.75rem;
  height: 44px;
  border-radius: 6px;
  transition: color 0.2s, background 0.2s;
  white-space: nowrap;
}
.breadcrumb:hover { color: var(--text); background: rgba(255,255,255,0.06); }
.breadcrumb.visible { display: flex; }


/* ═══ HAMBURGER MENU ════════════════════════════════════════════ */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  background: none;
  border: 1px solid var(--border2);
  border-radius: 8px;
  cursor: pointer;
  padding: 0 10px;
  flex-shrink: 0;
  transition: border-color 0.2s;
}
.hamburger span {
  display: block;
  height: 2px;
  background: rgba(255,255,255,0.85); /* fixed light — nav bar is dark in both themes */
  border-radius: 2px;
  transition: all 0.3s;
}
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile drawer */
.mobile-nav {
  display: none;
  position: fixed;
  top: 68px;
  left: 0;
  right: 0;
  background: rgba(12, 5, 3, 0.97);
  backdrop-filter: blur(32px) saturate(1.6);
  -webkit-backdrop-filter: blur(32px) saturate(1.6);
  border-bottom: 2px solid var(--border2);
  padding: 0.75rem 1.25rem 1rem;
  flex-direction: column;
  gap: 0.2rem;
  z-index: 9999;
  box-shadow: 0 8px 32px rgba(0,0,0,0.45);
}
[data-theme="light"] .mobile-nav {
  background: rgba(245, 235, 220, 0.97);
}
.mobile-nav.open { display: flex; }
.mobile-nav .nav-link {
  display: flex;
  align-items: center;
  text-align: left;
  height: 48px;
  font-size: 0.78rem;
  border-radius: 8px;
  padding: 0 1rem;
}
.mobile-nav .nav-cta {
  margin-top: 0.5rem;
  height: 48px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
}

/* Full-screen backdrop shown behind mobile nav drawer */
#mobileNavBackdrop {
  display: none;
  position: fixed;
  inset: 68px 0 0 0;
  z-index: 9998;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: wsBackdropIn 0.18s ease;
}
#mobileNavBackdrop.open { display: block; }
[data-theme="light"] #mobileNavBackdrop {
  background: rgba(0, 0, 0, 0.45);
}
@keyframes wsBackdropIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}


/* ═══ TRUST & SECURITY SECTION ═══════════════════════════════════ */
.trust-section {
  padding: 5rem 2rem;
  border-top: 1px solid var(--border2);
}

.trust-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  max-width: 1100px;
  margin: 0 auto 2.5rem;
  text-align: left;
}

.trust-card {
  background: var(--surface);
  border: 0.5px solid var(--border2);
  border-radius: 14px;
  padding: 1.5rem 1.5rem 1.75rem;
  transition: transform 0.2s, box-shadow 0.2s;
  position: relative;
  overflow: hidden;
}

.trust-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--gold-base), transparent);
  opacity: 0;
  transition: opacity 0.2s;
}

.trust-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 36px rgba(0,0,0,0.22);
}

.trust-card:hover::before {
  opacity: 1;
}

.trust-icon {
  font-size: 1.6rem;
  margin-bottom: 0.85rem;
  line-height: 1;
}

.trust-card-title {
  font-family: 'Cinzel', serif;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--text);
  margin: 0 0 0.6rem;
}

.trust-card-body {
  font-family: 'Cormorant Garamond', serif;
  font-size: 0.97rem;
  color: var(--text-dim);
  line-height: 1.75;
  margin: 0;
}

/* Legal strip at bottom of trust section */
.trust-legal-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.6rem 1rem;
  font-family: 'DM Mono', monospace;
  font-size: 0.68rem;
  color: var(--text-dim);
  padding-top: 2rem;
  border-top: 0.5px solid var(--border2);
  max-width: 1100px;
  margin: 0 auto;
}

.trust-legal-link {
  color: #c8963e;
  text-decoration: none;
  transition: opacity 0.15s;
}

.trust-legal-link:hover { opacity: 0.75; }

.trust-legal-dot { color: var(--border2); }

/* Responsive */
@media (max-width: 900px) {
  .trust-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
  .trust-grid { grid-template-columns: 1fr; }
  .trust-section { padding: 3.5rem 1.25rem; }
}


/* ═══ PAGE SYSTEM ════════════════════════════════════════════════ */
.page { display: none; }
.page.active {
  display: block;
  animation: pgFade 0.35s ease;
}
@keyframes pgFade {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* ═══ HERO ════════════════════════════════════════════════════── */
.hero {
  min-height: calc(100vh - 68px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 5rem 2rem 4rem;
}

.hero-eyebrow {
  font-family: 'DM Mono', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold-base);
  margin-bottom: 1.2rem;
  opacity: 0;
  animation: fadeUp 0.7s ease 0.15s forwards;
}
.hero-subtitle {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1rem, 2.5vw, 1.5rem);
  font-style: italic;
  font-weight: 300;
  color: var(--text-mid);
  max-width: 640px;
  line-height: 1.55;
  margin-bottom: 1rem;
  opacity: 0;
  animation: fadeUp 0.8s ease 0.45s forwards;
  transition: opacity 0.3s, transform 0.3s;
}
.hero-desc {
  font-size: 0.95rem;
  color: var(--text-dim);
  max-width: 500px;
  line-height: 1.75;
  margin-bottom: 3.5rem;
  opacity: 0;
  animation: fadeUp 0.8s ease 0.6s forwards;
  transition: opacity 0.3s, transform 0.3s;
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* ═══ PORTAL BUTTONS (home page hero) ════════════════════════── */
.portal-buttons {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  max-width: 1100px;
  width: 100%;
  opacity: 0;
  animation: fadeUp 0.9s ease 0.75s forwards;
  margin-bottom: 3rem;
}

.portal-btn {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  cursor: pointer;
  aspect-ratio: 3/4;
  border: none;
  background: #333;
  display: block;
  transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.35s ease;
  box-shadow: 0 8px 36px var(--shadow);
}
.portal-btn:hover { transform: translateY(-8px) scale(1.025); }
.portal-btn.player:hover  { box-shadow: 0 22px 64px var(--player-glow),  0 8px 24px var(--shadow); }
.portal-btn.student:hover { box-shadow: 0 22px 64px var(--student-glow), 0 8px 24px var(--shadow); }
.portal-btn.teacher:hover { box-shadow: 0 22px 64px var(--teacher-glow), 0 8px 24px var(--shadow); }
.portal-btn.luthier:hover { box-shadow: 0 22px 64px var(--luthier-glow), 0 8px 24px var(--shadow); }

.pb-photo {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 15%;
  transition: transform 0.5s ease;
}
.portal-btn:hover .pb-photo { transform: scale(1.07); }

.pb-tint { position: absolute; inset: 0; }
.portal-btn.player  .pb-tint { background: linear-gradient(155deg, rgba(200,150,62,0.52) 0%, rgba(160,110,30,0.32) 45%, rgba(60,35,5,0.72) 100%); }
.portal-btn.student .pb-tint { background: linear-gradient(155deg, rgba(74,158,255,0.50) 0%, rgba(30,100,200,0.30) 45%, rgba(5,30,90,0.72) 100%); }
.portal-btn.teacher .pb-tint { background: linear-gradient(155deg, rgba(78,203,113,0.48) 0%, rgba(30,150,70,0.28) 45%, rgba(5,55,25,0.72) 100%); }
.portal-btn.luthier .pb-tint { background: linear-gradient(155deg, rgba(224,108,138,0.50) 0%, rgba(170,60,90,0.30) 45%, rgba(60,12,36,0.72) 100%); }

.pb-vignette {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 30%, rgba(0,0,0,0.12) 58%, rgba(0,0,0,0.72) 100%);
}

.pb-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1.4rem 1.3rem 1.5rem;
}
.pb-tag {
  display: block;
  font-family: 'Cinzel', serif;
  font-size: clamp(1.0rem, 1.9vw, 1.3rem);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 0.35rem;
  text-shadow: 0 2px 8px rgba(0,0,0,0.65);
  color: #fff;
}
.pb-name {
  display: block;
  font-family: 'Outfit', sans-serif;
  font-size: clamp(0.75rem, 1.3vw, 0.9rem);
  font-weight: 400;
  color: rgba(255,255,255,0.78);
  line-height: 1.35;
  margin-bottom: 0.3rem;
}
.pb-role {
  display: block;
  font-family: 'DM Mono', monospace;
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}
.pb-arrow {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.28);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  color: rgba(255,255,255,0.92);
  transition: all 0.25s;
}
.portal-btn:hover .pb-arrow { background: rgba(255,255,255,0.28); transform: translate(2px,-2px); }


/* ═══ CHOOSE YOUR PATH SECTION ════════════════════════════════── */
.path-section {
  padding: 5rem 2rem;
  background: var(--surface);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--border2);
}
.path-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  max-width: 1100px;
  margin: 2.5rem auto 0;
}
.path-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 16px;
  padding: 2rem 1.75rem;
  position: relative;
  overflow: hidden;
  transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.3s ease;
  backdrop-filter: blur(10px);
}
.path-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
}
.path-card.player::before  { background: linear-gradient(90deg, var(--player),  transparent); }
.path-card.teacher::before { background: linear-gradient(90deg, var(--teacher), transparent); }
.path-card.luthier::before { background: linear-gradient(90deg, var(--luthier), transparent); }
.path-card:hover { transform: translateY(-6px); }
.path-card.player:hover  { box-shadow: 0 16px 48px var(--player-glow); }
.path-card.teacher:hover { box-shadow: 0 16px 48px var(--teacher-glow); }
.path-card.luthier:hover { box-shadow: 0 16px 48px var(--luthier-glow); }

.path-icon { font-size: 2.5rem; margin-bottom: 1rem; display: block; }
.path-portal-label {
  font-family: 'DM Mono', monospace;
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 0.4rem;
}
.path-card.player  .path-portal-label { color: var(--player); }
.path-card.teacher .path-portal-label { color: var(--teacher); }
.path-card.luthier .path-portal-label { color: var(--luthier); }
.path-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 0.5rem;
}
.path-price {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 0.25rem;
}
.path-card.player  .path-price { color: var(--player); }
.path-card.teacher .path-price { color: var(--teacher); }
.path-card.luthier .path-price { color: var(--luthier); }
.path-price-note {
  font-family: 'DM Mono', monospace;
  font-size: 0.62rem;
  color: var(--text-dim);
  letter-spacing: 0.08em;
  margin-bottom: 1rem;
}
.path-pitch {
  font-size: 0.88rem;
  color: var(--text-dim);
  line-height: 1.7;
  margin-bottom: 1.5rem;
}
.path-features {
  list-style: none;
  margin-bottom: 1.75rem;
}
.path-features li {
  font-size: 0.82rem;
  color: var(--text-mid);
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.path-features li:last-child { border-bottom: none; }
.path-features li::before { content: '✓'; font-size: 0.72rem; flex-shrink: 0; }
.path-card.player  .path-features li::before { color: var(--player); }
.path-card.teacher .path-features li::before { color: var(--teacher); }
.path-card.luthier .path-features li::before { color: var(--luthier); }


/* ═══ SHARED SECTION STYLES ═════════════════════════════════── */
.container { max-width: 1200px; margin: 0 auto; padding: 0 2rem; }
section { padding: 5rem 0; }

.section-tag {
  font-family: 'DM Mono', monospace;
  font-size: 0.65rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 0.5rem;
}
.section-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.9rem, 4.5vw, 3.2rem);
  font-weight: 700;
  color: var(--text);
  line-height: 1.1;
  margin-bottom: 0.8rem;
}
.section-title em { font-style: italic; color: var(--gold-base); }

.glass-surface {
  background: var(--surface);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--border2);
  border-bottom: 1px solid var(--border2);
}


/* ═══ CARDS ═════════════════════════════════════════════════── */
.card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 14px;
  padding: 1.6rem;
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 22px var(--shadow);
  position: relative;
  overflow: hidden;
  transition: transform 0.25s, box-shadow 0.25s;
  margin-bottom: 1.25rem;
}
.card:hover { transform: translateY(-3px); box-shadow: 0 8px 32px var(--shadow); }
.card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; }
.card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 14px;
  background: linear-gradient(110deg, transparent 20%, rgba(255,255,255,0.06) 50%, transparent 80%);
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}
.card:hover::after { opacity: 1; }

.card-label {
  font-family: 'DM Mono', monospace;
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-base);
  margin-bottom: 0.9rem;
}

/* Feature cards on portal pages */
.feature-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(285px, 1fr)); gap: 1.25rem; }
.feature-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 13px;
  padding: 1.5rem;
  backdrop-filter: blur(10px);
  box-shadow: 0 3px 18px var(--shadow);
  transition: transform 0.25s, box-shadow 0.25s;
  position: relative;
  overflow: hidden;
}
.feature-card:hover { transform: translateY(-3px); box-shadow: 0 8px 28px var(--shadow); }
.feature-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 13px;
  background: linear-gradient(110deg, transparent 20%, rgba(255,255,255,0.06) 50%, transparent 80%);
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}
.feature-card:hover::after { opacity: 1; }
.feature-card.paid { border-style: dashed; }
.fc-icon { width: 44px; height: 44px; border-radius: 11px; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; margin-bottom: 0.9rem; }
.fc-name { font-size: 0.96rem; font-weight: 600; color: var(--text); margin-bottom: 0.35rem; }
.fc-desc { font-size: 0.82rem; color: var(--text-dim); line-height: 1.65; }
.fc-paid-tag { position: absolute; top: 0.9rem; right: 0.9rem; font-family: 'DM Mono', monospace; font-size: 0.58rem; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.2rem 0.55rem; border-radius: 4px; }

.feature-bullets { list-style: none; margin-top: 0.65rem; padding-top: 0.65rem; border-top: 1px solid var(--border); }
.feature-bullets li { font-size: 0.78rem; color: var(--text-dim); padding: 0.18rem 0; display: flex; align-items: flex-start; gap: 0.5rem; }
.feature-bullets li::before { font-family: 'DM Mono', monospace; font-size: 0.62rem; flex-shrink: 0; margin-top: 1px; content: '—'; }


/* ═══ PORTAL PAGE HEADER BANNER ═════════════════════════════── */
.portal-page-header {
  position: relative;
  min-height: 340px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.pph-photo { position: absolute; inset: 0; background-size: cover; background-position: center 20%; }
.pph-overlay { position: absolute; inset: 0; }
.pph-content { position: relative; z-index: 2; padding: 2.5rem 3rem 2.5rem; max-width: 1200px; margin: 0 auto; width: 100%; }
.pph-tag { font-family: 'DM Mono', monospace; font-size: 0.65rem; letter-spacing: 0.25em; text-transform: uppercase; font-weight: 600; display: block; margin-bottom: 0.6rem; }
.pph-title { font-family: 'Cormorant Garamond', serif; font-size: clamp(2.2rem, 5vw, 3.8rem); font-weight: 700; color: #fff; line-height: 1.05; text-shadow: 0 3px 14px rgba(0,0,0,0.6); margin-bottom: 0.6rem; }
.pph-desc { font-size: 1rem; color: rgba(255,255,255,0.82); max-width: 560px; line-height: 1.7; margin-bottom: 1.5rem; }
.pph-price-badge { display: inline-flex; align-items: center; gap: 0.75rem; background: rgba(0,0,0,0.45); backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,0.2); border-radius: 50px; padding: 0.55rem 1.3rem; }
.pph-price { font-family: 'Cormorant Garamond', serif; font-size: 1.4rem; font-weight: 700; color: #fff; }
.pph-price-note { font-family: 'DM Mono', monospace; font-size: 0.65rem; letter-spacing: 0.08em; color: rgba(255,255,255,0.65); }


/* ═══ BUTTONS ════════════════════════════════════════════════── */
.portal-ctas { display: flex; gap: 1rem; margin-top: 2.5rem; flex-wrap: wrap; }

.btn-primary {
  font-family: 'DM Mono', monospace;
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0 2rem;
  height: 48px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  font-weight: 600;
  color: #fff;
  transition: transform 0.25s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.3s ease, opacity 0.2s;
  position: relative;
  overflow: hidden;
}
.btn-primary:hover { opacity: 0.92; transform: translateY(-4px) scale(1.03); }

.btn-secondary {
  font-family: 'DM Mono', monospace;
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0 2rem;
  height: 48px;
  border-radius: 8px;
  background: transparent;
  color: var(--text-dim);
  border: 1px solid var(--border2);
  cursor: pointer;
  transition: transform 0.25s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.3s ease, color 0.2s, background 0.2s;
}
.btn-secondary:hover { color: var(--text); background: var(--surface); transform: translateY(-3px) scale(1.02); }

/* Portal-specific glow on primary buttons */
.portal-player  .btn-primary:hover { box-shadow: 0 8px 28px var(--player-glow),  0 2px 8px rgba(0,0,0,0.3); }
.portal-student .btn-primary:hover { box-shadow: 0 8px 28px var(--student-glow), 0 2px 8px rgba(0,0,0,0.3); }
.portal-teacher .btn-primary:hover { box-shadow: 0 8px 28px var(--teacher-glow), 0 2px 8px rgba(0,0,0,0.3); }
.portal-luthier .btn-primary:hover { box-shadow: 0 8px 28px var(--luthier-glow), 0 2px 8px rgba(0,0,0,0.3); }
.portal-player  .btn-secondary:hover { box-shadow: 0 6px 20px var(--player-glow); }
.portal-student .btn-secondary:hover { box-shadow: 0 6px 20px var(--student-glow); }
.portal-teacher .btn-secondary:hover { box-shadow: 0 6px 20px var(--teacher-glow); }
.portal-luthier .btn-secondary:hover { box-shadow: 0 6px 20px var(--luthier-glow); }

/* Path/pricing CTA buttons */
.btn-path {
  display: block;
  width: 100%;
  font-family: 'DM Mono', monospace;
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  height: 48px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  font-weight: 600;
  color: #fff;
  transition: transform 0.25s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.3s, opacity 0.2s;
}
.btn-path:hover { opacity: 0.9; transform: translateY(-3px); }
.path-card.player  .btn-path { background: var(--player);  box-shadow: 0 3px 14px var(--player-glow); }
.path-card.player  .btn-path:hover { box-shadow: 0 8px 28px var(--player-glow); }
.path-card.teacher .btn-path { background: var(--teacher); box-shadow: 0 3px 14px var(--teacher-glow); }
.path-card.teacher .btn-path:hover { box-shadow: 0 8px 28px var(--teacher-glow); }
.path-card.luthier .btn-path { background: var(--luthier); box-shadow: 0 3px 14px var(--luthier-glow); }
.path-card.luthier .btn-path:hover { box-shadow: 0 8px 28px var(--luthier-glow); }


/* ═══ PRICING CARDS ═════════════════════════════════════════── */
.pricing-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 16px;
  padding: 2rem 1.75rem;
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 24px var(--shadow);
  max-width: 360px;
}
.pc-label { font-family: 'DM Mono', monospace; font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 0.75rem; }
.pc-name  { font-family: 'Cormorant Garamond', serif; font-size: 1.5rem; font-weight: 700; color: var(--text); margin-bottom: 0.75rem; }
.pc-amount { font-family: 'Cormorant Garamond', serif; font-size: 2.5rem; font-weight: 700; line-height: 1; }
.pc-period { font-family: 'DM Mono', monospace; font-size: 0.65rem; color: var(--text-dim); margin-bottom: 1.5rem; }
.pc-note   { font-family: 'DM Mono', monospace; font-size: 0.65rem; color: var(--text-dim); padding: 0.3rem 0.7rem; border-radius: 4px; background: var(--surface); border: 1px solid var(--border); display: inline-block; margin-bottom: 1rem; }
.pc-list { list-style: none; margin-bottom: 1.75rem; }
.pc-list li { font-size: 0.83rem; color: var(--text-dim); padding: 0.45rem 0; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 0.5rem; }
.pc-list li:last-child { border-bottom: none; }
.pc-list li.inc { color: var(--text-mid); }
.pc-list li.inc::before { content: '✓'; font-size: 0.75rem; flex-shrink: 0; }


/* ═══ INSTRUMENT SELECTOR (Player/Student portals only) ═════── */
.inst-selector-portal {
  display: flex;
  align-items: center;
  flex-wrap: wrap;          /* 5 buttons wrap on narrow screens */
  gap: 0;
  background: rgba(200,150,62,0.08);
  border: 1px solid rgba(200,150,62,0.25);
  border-radius: 10px;
  overflow: visible;
  min-height: 44px;
  height: auto;
  margin-bottom: 2rem;
}
.inst-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0 1rem;
  height: 44px;
  min-width: 44px;
  background: transparent;
  border: none;
  border-right: 1px solid rgba(200,150,62,0.18);
  color: var(--text-dim);
  font-family: 'DM Mono', monospace;
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  white-space: nowrap;
}
.inst-btn:last-child { border-right: none; }
.inst-btn:hover { background: rgba(200,150,62,0.12); color: #c8963e; }
.inst-btn.inst-active {
  background: rgba(200,150,62,0.22);
  color: #f3cf8a;
  font-weight: 700;
}
.inst-icon { font-size: 1rem; line-height: 1; }

/* Context transition */
.ctx-fade { transition: opacity 0.3s ease, transform 0.3s ease; }
.ctx-fade.ctx-out { opacity: 0; transform: translateY(6px); }


/* ═══ HUMIDITY GAUGE ════════════════════════════════════════── */
.humidity-gauge {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 14px;
  padding: 1.4rem 1.5rem;
  backdrop-filter: blur(10px);
}
.gauge-ring-wrap {
  position: relative;
  width: 120px;
  height: 120px;
  margin: 0 auto 1rem;
}
.gauge-ring-wrap svg { transform: rotate(-90deg); }
.gauge-track { fill: none; stroke: rgba(200,150,62,0.14); stroke-width: 10; }
.gauge-fill  { fill: none; stroke-width: 10; stroke-linecap: round; stroke-dasharray: 314; transition: stroke-dashoffset 0.8s ease, stroke 0.5s; }
.gauge-label { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.gauge-pct   { font-family: 'Cinzel', serif; font-size: 1.6rem; font-weight: 700; color: #c8963e; line-height: 1; }
.gauge-unit  { font-family: 'DM Mono', monospace; font-size: 0.58rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-dim); margin-top: 0.2rem; }
.gauge-status { font-family: 'DM Mono', monospace; font-size: 0.65rem; letter-spacing: 0.1em; text-transform: uppercase; text-align: center; padding: 0.25rem 0.7rem; border-radius: 5px; margin-bottom: 0.75rem; }
.gauge-ok   { background: rgba(78,203,113,0.14);  color: #4ecb71; }
.gauge-warn { background: rgba(243,156,18,0.14);  color: #f39c12; }
.gauge-crit { background: rgba(231,76,60,0.14);   color: #e74c3c; }


/* ═══ TUNER & METRONOME WIDGETS ═════════════════════════════── */
.tuner-preset {
  font-family: 'DM Mono', monospace;
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  padding: 0 0.8rem;
  height: 36px;
  min-width: 44px;
  border-radius: 5px;
  border: 1px solid var(--border2);
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}
.tuner-preset:hover { color: var(--gold-base); border-color: rgba(200,150,62,0.35); }
.tuner-preset.active-preset {
  background: rgba(200,150,62,0.14);
  border-color: rgba(200,150,62,0.35);
  color: var(--gold-base);
}
.met-sig {
  font-family: 'DM Mono', monospace;
  font-size: 0.68rem;
  padding: 0 0.7rem;
  height: 36px;
  min-width: 44px;
  border-radius: 5px;
  border: 1px solid var(--border2);
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  transition: all 0.2s;
}
.met-sig.active-sig { background: rgba(200,150,62,0.14); border-color: rgba(200,150,62,0.35); color: var(--gold-base); }


/* ═══ FOOTER ════════════════════════════════════════════════── */
footer {
  background: var(--surface);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--border2);
  padding: 3.5rem 2rem 2rem;
}
.footer-inner { max-width: 1200px; margin: 0 auto; }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 1.5rem;
  margin-top: 1.5rem;
  border-top: 1px solid var(--border);
  font-family: 'DM Mono', monospace;
  font-size: 0.65rem;
  color: var(--text-dim);
}


/* ═══════════════════════════════════════════════════════════════
   WS NOTE AWARD SYSTEM — Metallic gradients + animations
   ─────────────────────────────────────────────────────────────
   Four tier classes, each with:
   · A metallic linear-gradient fill (used on SVG wrapper divs
     and any badge/pill elements via background-clip:text or
     as a box background)
   · A drop-shadow glow appropriate to the tier's prestige
   · Hover lift for interactivity

   Usage:
     <div class="ws-note-bronze">  ← wraps the note SVG
     <span class="ws-note-gold ws-note-text">WS Gold Note</span>
     <div class="ws-note-platinum ws-note-shimmer"> ← final mastery
═══════════════════════════════════════════════════════════════ */

/* ── Shared base for all note tier elements ─────────────────── */
.ws-note-bronze,
.ws-note-silver,
.ws-note-gold,
.ws-note-platinum {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  transition: transform 0.2s ease, filter 0.2s ease;
  position: relative;
}

.ws-note-bronze:hover,
.ws-note-silver:hover,
.ws-note-gold:hover,
.ws-note-platinum:hover {
  transform: translateY(-2px) scale(1.04);
}

/* ── Bronze — warm copper, earthy prestige ──────────────────── */
.ws-note-bronze {
  background: linear-gradient(
    145deg,
    #5c3008 0%,
    #8B5214 18%,
    #cd7f32 38%,
    #e8a96a 52%,
    #cd7f32 66%,
    #8B5214 82%,
    #5c3008 100%
  );
  filter:
    drop-shadow(0 1px 3px rgba(139, 82, 20, 0.40))
    drop-shadow(0 2px 8px rgba(205, 127, 50, 0.25));
}

/* ── Silver — cool steel, refined and clean ─────────────────── */
.ws-note-silver {
  background: linear-gradient(
    145deg,
    #4a4e52 0%,
    #6e7275 16%,
    #a8a9ad 35%,
    #e2e3e6 50%,
    #a8a9ad 65%,
    #6e7275 84%,
    #4a4e52 100%
  );
  filter:
    drop-shadow(0 1px 3px rgba(74, 78, 82, 0.45))
    drop-shadow(0 2px 10px rgba(168, 169, 173, 0.30));
}

/* ── Gold — rich warm gold, one tier above silver ───────────── */
.ws-note-gold {
  background: linear-gradient(
    145deg,
    #4a3600 0%,
    #7a5c00 16%,
    #c8963e 34%,
    #f3cf8a 50%,
    #c8963e 66%,
    #7a5c00 84%,
    #4a3600 100%
  );
  filter:
    drop-shadow(0 1px 4px rgba(122, 92, 0, 0.50))
    drop-shadow(0 3px 12px rgba(200, 150, 62, 0.35))
    drop-shadow(0 0  18px rgba(243, 207, 138, 0.15));
}

/* ── Platinum — peak mastery, iridescent white + cool shimmer ─ */
.ws-note-platinum {
  background: linear-gradient(
    145deg,
    #6e7480 0%,
    #9ba0a8 14%,
    #c8ccd4 28%,
    #e8e6e1 40%,
    #ffffff 50%,
    #e8e6e1 60%,
    #c8ccd4 72%,
    #9ba0a8 86%,
    #6e7480 100%
  );
  filter:
    drop-shadow(0 1px 4px rgba(110, 116, 128, 0.50))
    drop-shadow(0 3px 14px rgba(200, 210, 220, 0.45))
    drop-shadow(0 0  24px rgba(229, 228, 226, 0.35))
    drop-shadow(0 0  40px rgba(180, 200, 255, 0.15));
}

/* ── Text gradient variant ──────────────────────────────────── */
/* Apply alongside a tier class to render gradient text:
   <span class="ws-note-gold ws-note-text">WS Gold Note</span>  */
.ws-note-text {
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  font-weight: 700;
}

/* ── Badge pill variant ─────────────────────────────────────── */
/* A compact pill badge for use in tables / progress rows:
   <span class="ws-note-bronze ws-note-pill">Bronze</span>      */
.ws-note-pill {
  font-family: 'DM Mono', monospace;
  font-size: 0.58rem;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  padding: 0.22rem 0.75rem;
  border-radius: 50px;
  color: #1a0e04;
  font-weight: 600;
}

/* Pill text colours override gradient for legibility on small text */
.ws-note-bronze.ws-note-pill { color: #3d1e04; }
.ws-note-silver.ws-note-pill { color: #1a1c1e; }
.ws-note-gold.ws-note-pill   { color: #2e1e00; }
.ws-note-platinum.ws-note-pill { color: #1a1e24; }

/* ═══════════════════════════════════════════════════════════════
   PLATINUM SHIMMER — slow iridescent sweep animation
   ─────────────────────────────────────────────────────────────
   Apply .ws-note-shimmer alongside .ws-note-platinum to activate.
   The animation cycles through filter brightness and hue-rotate
   values giving a slow, living light effect — like light shifting
   across polished platinum.

   Designed to be subtle at rest and noticeable on focus/hover.
   The full effect runs at 4s — fast enough to be alive, slow
   enough to feel premium rather than distracting.
═══════════════════════════════════════════════════════════════ */
@keyframes ws-shimmer-sweep {
  0%   {
    filter:
      drop-shadow(0 1px 4px rgba(110,116,128,0.50))
      drop-shadow(0 3px 14px rgba(200,210,220,0.45))
      drop-shadow(0 0  24px rgba(229,228,226,0.35))
      drop-shadow(0 0  40px rgba(180,200,255,0.15))
      brightness(1.00) hue-rotate(0deg);
  }
  20%  {
    filter:
      drop-shadow(0 2px 8px  rgba(110,116,128,0.55))
      drop-shadow(0 4px 20px rgba(200,210,220,0.55))
      drop-shadow(0 0  32px  rgba(220,230,255,0.45))
      drop-shadow(0 0  56px  rgba(160,190,255,0.22))
      brightness(1.18) hue-rotate(8deg);
  }
  40%  {
    filter:
      drop-shadow(0 2px 10px rgba(120,120,140,0.50))
      drop-shadow(0 5px 24px rgba(210,215,230,0.50))
      drop-shadow(0 0  38px  rgba(230,230,240,0.40))
      drop-shadow(0 0  60px  rgba(200,210,240,0.20))
      brightness(1.28) hue-rotate(14deg);
  }
  60%  {
    filter:
      drop-shadow(0 2px 8px  rgba(100,110,130,0.55))
      drop-shadow(0 4px 20px rgba(195,205,225,0.50))
      drop-shadow(0 0  30px  rgba(215,225,245,0.42))
      drop-shadow(0 0  50px  rgba(175,195,255,0.18))
      brightness(1.18) hue-rotate(6deg);
  }
  80%  {
    filter:
      drop-shadow(0 1px 6px  rgba(110,116,128,0.52))
      drop-shadow(0 3px 16px rgba(200,210,220,0.48))
      drop-shadow(0 0  26px  rgba(225,228,235,0.36))
      drop-shadow(0 0  44px  rgba(180,200,255,0.16))
      brightness(1.08) hue-rotate(3deg);
  }
  100% {
    filter:
      drop-shadow(0 1px 4px rgba(110,116,128,0.50))
      drop-shadow(0 3px 14px rgba(200,210,220,0.45))
      drop-shadow(0 0  24px rgba(229,228,226,0.35))
      drop-shadow(0 0  40px rgba(180,200,255,0.15))
      brightness(1.00) hue-rotate(0deg);
  }
}

@keyframes ws-shimmer-bg {
  0%   { background-position: 200% center; }
  100% { background-position: -200% center; }
}

.ws-note-shimmer {
  animation: ws-shimmer-sweep 4s ease-in-out infinite;
  background-size: 300% 300%;
  background: linear-gradient(
    120deg,
    #6e7480 0%,
    #9ba0a8 10%,
    #c8ccd4 20%,
    #e8e6e1 30%,
    #ffffff 40%,
    #e0eaff 48%,   /* faint blue iridescence at peak */
    #ffffff 56%,
    #e8e6e1 65%,
    #c8ccd4 75%,
    #9ba0a8 88%,
    #6e7480 100%
  );
  background-size: 300% 300%;
  animation: ws-shimmer-sweep 4s ease-in-out infinite,
             ws-shimmer-bg    8s linear infinite;
}

/* Reduce motion — respect user preference */
@media (prefers-reduced-motion: reduce) {
  .ws-note-shimmer {
    animation: none;
    filter:
      drop-shadow(0 2px 10px rgba(200,210,220,0.50))
      drop-shadow(0 0  28px  rgba(229,228,226,0.40));
  }
  .ws-note-bronze:hover,
  .ws-note-silver:hover,
  .ws-note-gold:hover,
  .ws-note-platinum:hover {
    transform: none;
  }
}

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem; }
hr.divider { border: none; border-top: 1px solid var(--border2); margin: 3rem 0; }

/* All interactive elements — 44px minimum touch target */
button, .btn-primary, .btn-secondary, .btn-path, .portal-btn,
.nav-link, .nav-cta, .theme-btn, input[type="range"],
.inst-btn, .breadcrumb {
  min-height: 44px;
}
.tuner-preset, .met-sig { min-height: 36px; }


/* ═══ RESPONSIVE ════════════════════════════════════════════── */
@media(max-width:1000px){
  .portal-buttons { grid-template-columns: repeat(2,1fr); max-width:620px; }
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .path-grid { grid-template-columns: 1fr; max-width: 480px; margin: 2rem auto 0; }
}

/* ── Nav collapses to hamburger at 1100px ─────────────────────
   Raised from 900px — pill buttons + wordmark were still
   overlapping at laptop widths (1280px).
═══════════════════════════════════════════════════════════════ */
@media(max-width:1100px){
  #navRight .nav-link,
  #navRight .nav-cta  { display: none !important; }
  #navRight .theme-btn { display: flex; }
  .hamburger           { display: flex; }
  .nav-wordmark        { display: none; }
}

/* Hide wordmark whenever desktop pills are showing (< 1400px)
   to prevent overlap — logo on the left already identifies the brand */
@media(min-width:1101px) and (max-width:1399px){
  .nav-wordmark { display: none; }
}
@media(max-width:768px){
  .portal-buttons { grid-template-columns: repeat(2,1fr); max-width:520px; gap:1rem; }
  .portal-btn { aspect-ratio: 4/5; }
  .pph-title { font-size: clamp(1.6rem,5vw,2.4rem); }
  .pph-content { padding: 1.5rem 1.5rem 2rem; }
  .feature-grid { grid-template-columns: 1fr; }
  section { padding: 3rem 0; }
  .container { padding: 0 1.25rem; }
  #toolsGrid { grid-template-columns: 1fr !important; }
}
@media(max-width:600px){
  .portal-buttons { grid-template-columns: 1fr; max-width:340px; }
  nav { padding: 0 1rem; }
  .nav-brand-name      { display: none; }
  .hero-brand-title    { font-size: clamp(2.5rem,12vw,4.5rem); }
  .portal-ctas         { flex-direction: column; }
  .portal-ctas .btn-primary,
  .portal-ctas .btn-secondary { width: 100%; justify-content: center; }
  .path-grid { grid-template-columns: 1fr; }
  .inst-selector-portal { flex-wrap: wrap; height: auto; padding: 0.5rem; gap: 0.4rem; border-radius: 12px; }
  .inst-btn { border-right: none; border: 1px solid rgba(200,150,62,0.25); border-radius: 8px; }
}


/* ═══ CONTRAST & ACCESSIBILITY FIXES ══════════════════════════
   Added to ensure WCAG AA compliance for helper text in dark mode.
   --text-dim (#806040) on dark surface (~#261208) ≈ 3.9:1 — below AA.
   These rules bring small/helper text up to AA threshold (4.5:1).
══════════════════════════════════════════════════════════════ */

/* Field hints, password rules, small helper labels */
.field-hint,
.field-label,
#pwHint,
#pwRules {
  color: var(--text-mid);
}

/* In light mode these are already fine — keep them at text-dim */
[data-theme="light"] .field-hint,
[data-theme="light"] .field-label,
[data-theme="light"] #pwHint,
[data-theme="light"] #pwRules {
  color: var(--text-dim);
}

/* Portal dot labels (signin portal selector) — boost contrast in dark mode */
.portal-dot {
  opacity: 0.55;
}
.portal-dot.active {
  opacity: 1;
}

/* Auth step helper text — confirmation email line etc */
.auth-step p,
.success-screen p {
  color: var(--text-mid);
}
[data-theme="light"] .auth-step p,
[data-theme="light"] .success-screen p {
  color: var(--text-dim);
}

/* Feature chips — non-interactive, no hover state */
.feature-chip-static,
.feature-chip-static:hover {
  cursor: default !important;
  user-select: none;
  pointer-events: none;
}

/* ═══ NAV LINK CURSOR — already set above but reinforce for buttons ═ */
button.nav-link {
  cursor: pointer;
}

/* ═══ HAMBURGER — align breakpoint with existing 600px rule ══════════
   index.html had an inline style showing hamburger at 768px which
   conflicted with styles.css showing it at 600px. This comment documents
   the canonical breakpoint: hamburger shows at max-width: 600px (below).
   The inline override in index.html <style> block can be removed once
   styles.css is consistently loaded across all pages.
══════════════════════════════════════════════════════════════════════ */

/* ── Family Studio card — stacks vertically on mobile ─────────
   The horizontal 3-column layout inside the featured Family
   Studio plan card collapses to a single column below 768px.
══════════════════════════════════════════════════════════════ */
@media(max-width:768px){
  .family-studio-grid {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }
}