:root {
  --bg: #00296b;
  --bg-deep: #001b4d;
  --panel: #102867;
  --panel-alt: #0c1f57;
  --border: #223a80;
  --text: #f5f7ff;
  --muted: #9fb0de;
  --gold: #f7c625;
  --gold-dark: #d9a812;
  --navy-on-gold: #0a1740;
  --good: #34d399;
  --warn: #f7c625;
  --bad: #ff6b6b;
  --record: #ff5a6a;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
/* Every in-page target stops just under the sticky header (--header-h is kept
   in sync with the real header height by app.js) so no section is cut off. */
#hero, #courses, #about, #trainer, #testimonials, #contact { scroll-margin-top: var(--header-h, 92px); }

body {
  margin: 0;
  padding: 0;
  background: radial-gradient(circle at 50% 0%, var(--bg) 0%, var(--bg-deep) 60%);
  background-attachment: fixed;
  color: var(--text);
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  min-height: 100vh;
}

.logo { width: auto; filter: drop-shadow(0 2px 10px rgba(247, 198, 37, 0.15)); }
.muted { color: var(--muted); font-size: 0.9rem; }

main {
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  padding: 40px 16px 40px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  box-sizing: border-box;
}
main[hidden] { display: none; }

.card {
  background: linear-gradient(180deg, var(--panel) 0%, var(--panel-alt) 100%);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 26px;
  box-shadow: 0 10px 30px rgba(3, 8, 30, 0.35);
}

.screen { display: none; }
.screen.active { display: block; }
#screen-preptime.active, #screen-countdown.active, #screen-recording.active, #screen-analyzing.active { display: flex; flex-direction: column; align-items: center; text-align: center; }

.btn {
  border: none;
  border-radius: 999px;
  padding: 13px 26px;
  font-size: 1rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: opacity 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.btn:active { transform: scale(0.97); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }

.btn-record {
  background: var(--record);
  color: white;
  box-shadow: 0 6px 18px rgba(255, 90, 106, 0.35);
}
.btn-record .dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: white; display: inline-block;
}
.btn-record.recording {
  background: #b7233a;
  animation: pulse 1.4s ease-in-out infinite;
}
.btn-record.recording .dot { border-radius: 3px; }
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 90, 106, 0.5); }
  50% { box-shadow: 0 0 0 10px rgba(255, 90, 106, 0); }
}

.btn-accent {
  background: var(--gold);
  color: var(--navy-on-gold);
  justify-content: center;
  box-shadow: 0 6px 18px rgba(247, 198, 37, 0.3);
}
.btn-accent:not(:disabled):hover { background: var(--gold-dark); }

.btn-large { width: 100%; padding: 16px 26px; font-size: 1.05rem; margin-top: 8px; }

.btn-ghost {
  background: transparent;
  border: 1.5px solid var(--border);
  color: var(--muted);
  justify-content: center;
  margin-top: 14px;
}
.btn-ghost:not(:disabled):hover { border-color: var(--gold); color: var(--text); }

/* Visible only to the admin account (gated client-side in app.js) --
   links to the real game at /play. Dashed border keeps it visually marked
   as a preview/internal link rather than a normal site CTA. */
.gameplay-badge {
  border: 1.5px dashed var(--gold);
  color: var(--gold);
  font-size: 0.85rem;
}
.gameplay-badge:hover { background: rgba(247, 198, 37, 0.1); color: var(--gold); }

.status { text-align: center; color: var(--muted); min-height: 1.2em; margin: 14px 0 0; font-size: 0.9rem; }
.status.error { color: var(--bad); }

.phone-input {
  width: 100%;
  background: var(--bg-deep);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  color: var(--text);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  margin: 16px 0 6px;
  letter-spacing: 0.02em;
}
.phone-input:focus { outline: none; border-color: var(--gold); }
.phone-input::placeholder { color: var(--muted); font-weight: 500; }
.otp-input { text-align: center; letter-spacing: 0.4em; font-size: 1.3rem; }

.google-btn-wrap { display: flex; justify-content: center; margin: 18px 0 4px; min-height: 44px; }
.auth-divider {
  display: flex; align-items: center; gap: 12px; margin: 18px 0 4px;
  color: var(--muted); font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
}
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--border); }

.select-input {
  width: 100%;
  background: var(--bg-deep);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  color: var(--text);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  margin: 8px 0 6px;
  appearance: none;
}
.select-input:focus { outline: none; border-color: var(--gold); }

.field-label {
  text-align: left;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 20px 0 4px;
}

.interests-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 6px 0 10px;
}
@media (max-width: 420px) {
  .interests-grid:not(.chips-only) { grid-template-columns: minmax(0, 1fr); }
}
.interest-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-deep);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 600;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.interest-chip:has(input:checked) { border-color: var(--gold); background: rgba(247, 198, 37, 0.08); color: var(--gold); }
.interest-chip { min-width: 0; overflow-wrap: break-word; }
.interest-chip input { accent-color: var(--gold); width: 16px; height: 16px; flex-shrink: 0; }

/* popup variant: the whole chip is the toggle, no checkbox */
.interests-grid.chips-only .interest-chip { position: relative; justify-content: center; text-align: center; padding: 12px 8px; }
.interests-grid.chips-only .interest-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.interests-grid.chips-only .interest-chip:has(input:focus-visible) { outline: 2px solid var(--gold); outline-offset: 2px; }

.trend-up { color: var(--good); font-weight: 700; }
.trend-down { color: var(--bad); font-weight: 700; }
.trend-flat { color: var(--muted); font-weight: 600; }

/* --- calendar (Your Calendar) --- */
.calendar-nav { display: flex; align-items: center; justify-content: space-between; margin: 16px 0 14px; }
.calendar-nav-btn {
  background: var(--bg-deep); border: 1px solid var(--border); color: var(--text);
  width: 36px; height: 36px; border-radius: 50%; font-size: 1.2rem; line-height: 1;
  cursor: pointer; font-family: inherit;
}
.calendar-nav-btn:hover { border-color: var(--gold); color: var(--gold); }
.calendar-month-label { font-weight: 800; font-size: 1.02rem; }
.calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.calendar-daylabel { text-align: center; font-size: 0.68rem; font-weight: 700; color: var(--muted); padding-bottom: 4px; }
.calendar-cell {
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  background: var(--bg-deep); border: 1px solid var(--border); border-radius: 8px;
  color: var(--muted); font-size: 0.85rem; font-weight: 600; font-family: inherit;
}
.calendar-cell.empty { background: transparent; border: none; }
.calendar-cell.has-session {
  background: rgba(247, 198, 37, 0.12); border-color: rgba(247, 198, 37, 0.4);
  color: var(--gold); cursor: pointer; font-weight: 800;
}
.calendar-cell.has-session:hover { background: rgba(247, 198, 37, 0.22); }
.calendar-cell.today { box-shadow: inset 0 0 0 2px var(--gold); }
.calendar-cell.selected { background: var(--gold); color: var(--navy-on-gold); border-color: var(--gold); }
.calendar-detail { margin-top: 18px; }

/* --- Inline calendar section (marketing page, between Home and Courses) --- */
.calendar-panel {
  max-width: 480px; margin: 0 auto;
  background: linear-gradient(180deg, var(--panel) 0%, var(--panel-alt) 100%);
  border: 1px solid var(--border); border-radius: 18px;
  padding: 26px; box-shadow: 0 10px 30px rgba(3, 8, 30, 0.35);
}
#calendarLockedWrap { position: relative; }
.calendar-blurred {
  filter: blur(5px);
  opacity: 0.7;
  pointer-events: none;
  user-select: none;
}
.calendar-lock-overlay {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  background: rgba(0, 10, 32, 0.55);
  border-radius: 14px;
  padding: 20px; text-align: center;
}
.calendar-lock-overlay p { margin: 0; font-weight: 700; font-size: 1.05rem; color: var(--text); }

.progress-list { display: flex; flex-direction: column; gap: 10px; }
.progress-row {
  background: var(--bg-deep);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  text-align: left;
}
.progress-row-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 6px; }
.progress-date { color: var(--muted); font-size: 0.78rem; font-weight: 700; white-space: nowrap; }
.progress-topic { color: var(--text); font-size: 0.85rem; font-weight: 600; text-align: right; }
.progress-stats { display: flex; flex-wrap: wrap; gap: 10px; color: var(--muted); font-size: 0.78rem; font-weight: 600; }

/* --- topic selection --- */
.topic-list { display: flex; flex-direction: column; gap: 12px; margin: 18px 0 8px; }
.topic-card {
  background: var(--bg-deep);
  border: 1.5px solid var(--border);
  border-radius: 14px;
  padding: 18px;
  color: var(--text);
  font-family: inherit;
  font-size: 0.98rem;
  font-weight: 600;
  text-align: left;
  line-height: 1.5;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.1s ease;
}
.topic-card:hover { border-color: var(--gold); background: rgba(247, 198, 37, 0.06); }
.topic-card:active { transform: scale(0.99); }
.topic-card:disabled { cursor: default; }

.topic-card.spinning {
  color: var(--gold);
  filter: blur(0.4px);
  border-color: rgba(247, 198, 37, 0.4);
}
.topic-card.settle {
  animation: settle-bounce 0.35s ease;
  border-color: var(--gold);
}
@keyframes settle-bounce {
  0% { transform: scale(0.97); }
  55% { transform: scale(1.015); }
  100% { transform: scale(1); }
}

/* --- camera / countdown / recording --- */
.camera-wrap {
  position: relative;
  width: auto;
  height: min(38vh, 340px);
  aspect-ratio: 9 / 16;
  max-width: 100%;
  border-radius: 16px;
  overflow: hidden;
  background: #000;
  border: 1px solid var(--border);
  margin: 0 auto;
}
@media (min-width: 700px) {
  .camera-wrap {
    width: 100%;
    height: auto;
    max-width: 640px;
    aspect-ratio: 16 / 9;
  }
}
.camera-wrap video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scaleX(-1);
}
.topic-banner {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  background: linear-gradient(0deg, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0) 100%);
  color: white;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 24px 14px 10px;
  text-align: center;
}
.rec-indicator {
  position: absolute;
  top: 12px; left: 12px;
  background: rgba(0,0,0,0.6);
  color: white;
  font-size: 0.8rem;
  font-weight: 700;
  padding: 6px 10px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-variant-numeric: tabular-nums;
}
.rec-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--record);
  animation: pulse-dot 1.2s ease-in-out infinite;
}
@keyframes pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

.preptime-options {
  display: flex;
  gap: 12px;
  width: 100%;
  margin-top: 16px;
}
.preptime-btn {
  flex: 1;
  padding: 18px 8px;
  background: var(--bg-deep);
  border: 1.5px solid var(--border);
  border-radius: 14px;
  color: var(--text);
  font-family: inherit;
  font-size: 1.1rem;
  font-weight: 800;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.1s ease;
}
.preptime-btn:hover { border-color: var(--gold); background: rgba(247, 198, 37, 0.06); }
.preptime-btn:active { transform: scale(0.97); }

.countdown-number {
  font-size: 3.2rem;
  font-weight: 800;
  color: var(--gold);
  margin: 20px 0 6px;
  font-variant-numeric: tabular-nums;
}

/* --- analyzing --- */
.spinner {
  width: 44px; height: 44px;
  border: 4px solid var(--border);
  border-top-color: var(--gold);
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
  margin: 20px auto 18px;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* --- report --- */
.screen h2 { margin: 0 0 4px; font-size: 1.3rem; }
.report-topic { margin-bottom: 8px; }
.report-topic-text { font-size: 1.05rem; font-weight: 700; margin: 4px 0 0; }
.content-summary { color: var(--muted); font-size: 0.9rem; line-height: 1.6; margin: 8px 0 0; }
.report-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 28px; }

.score-row { margin-bottom: 18px; }
.score-row-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.score-label { font-weight: 700; font-size: 0.92rem; }
.score-value { font-weight: 800; font-size: 0.92rem; color: var(--text); }
.score-value.good { color: var(--good); }
.score-value.warn { color: var(--warn); }
.score-value.bad { color: var(--bad); }
.score-track { height: 8px; border-radius: 999px; background: var(--bg-deep); border: 1px solid var(--border); overflow: hidden; }
.score-fill { height: 100%; border-radius: 999px; background: var(--muted); }
.score-fill.good { background: var(--good); }
.score-fill.warn { background: var(--warn); }
.score-fill.bad { background: var(--bad); }
.score-feedback { color: var(--muted); font-size: 0.85rem; margin: 6px 0 0; line-height: 1.5; }

.metric-verdict { font-size: 0.72rem; font-weight: 700; margin-top: 6px; text-transform: uppercase; letter-spacing: 0.04em; }
.metric-verdict.good { color: var(--good); }
.metric-verdict.warn { color: var(--warn); }
.metric-verdict.bad { color: var(--bad); }

.improvement-box {
  background: rgba(247, 198, 37, 0.07);
  border: 1px solid rgba(247, 198, 37, 0.25);
  border-radius: 10px;
  padding: 10px 12px;
  margin-top: 8px;
}
.improvement-label { font-size: 0.72rem; font-weight: 700; color: var(--gold); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 6px; }
.improvement-text { font-size: 0.85rem; color: var(--text); line-height: 1.5; margin: 0; }
.swap-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 0.85rem; margin: 4px 0; }
.swap-used { color: var(--muted); font-style: italic; }
.swap-arrow { color: var(--gold); }
.swap-better { display: flex; flex-wrap: wrap; gap: 6px; }
.swap-pill {
  background: rgba(52, 211, 153, 0.12);
  border: 1px solid rgba(52, 211, 153, 0.35);
  color: var(--good);
  padding: 3px 9px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.8rem;
}
.metric-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin: 20px 0;
}
.metric {
  background: var(--bg-deep);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  text-align: center;
}
.metric .value { font-size: 1.7rem; font-weight: 800; color: var(--text); }
.metric .label { color: var(--muted); font-size: 0.78rem; margin-top: 4px; font-weight: 600; }
.metric.good .value { color: var(--good); }
.metric.warn .value { color: var(--warn); }
.metric.bad .value { color: var(--bad); }

.section-title {
  font-size: 0.85rem;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  margin: 26px 0 12px;
}

.filler-list { display: flex; flex-wrap: wrap; gap: 8px; }
.filler-pill {
  background: rgba(247, 198, 37, 0.1);
  border: 1px solid rgba(247, 198, 37, 0.35);
  color: var(--gold);
  padding: 7px 13px;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
}
.filler-pill b { color: var(--text); }

canvas { width: 100%; height: 160px; background: var(--bg-deep); border-radius: 12px; border: 1px solid var(--border); }

.transcript-box {
  max-height: 220px;
  overflow-y: auto;
  background: var(--bg-deep);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--muted);
}
.transcript-box mark {
  background: rgba(247, 198, 37, 0.22);
  color: var(--gold);
  border-radius: 4px;
  padding: 0 3px;
  font-weight: 600;
}

footer {
  display: flex;
  justify-content: center;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 28px 24px 36px;
  border-top: 1px solid var(--border);
  opacity: 0.7;
}

@media (max-width: 480px) {
  .card { padding: 20px; border-radius: 14px; }
}

/* =========================================================
   MARKETING SITE
   ========================================================= */

#marketingSite h1, #marketingSite h2, #marketingSite h3,
.site-logo-text {
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
}

.container { width: 100%; max-width: 1160px; margin: 0 auto; padding: 0 24px; box-sizing: border-box; }

/* --- sticky header / nav --- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  width: 100%;
  background: rgba(0, 27, 77, 0.86);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  transition: background 0.2s ease, box-shadow 0.2s ease;
}
.site-header.scrolled {
  background: rgba(0, 20, 61, 0.97);
  box-shadow: 0 8px 24px rgba(3, 8, 30, 0.4);
}
.site-header-inner {
  max-width: 1160px;
  margin: 0 auto;
  padding: 12px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.site-logo-link { display: flex; align-items: center; line-height: 0; }
.site-header .logo { height: 40px; }

.site-nav {
  display: flex;
  align-items: center;
  gap: 32px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-nav a {
  color: var(--text);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.92rem;
  letter-spacing: 0.01em;
  position: relative;
  padding: 6px 0;
}
.site-nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.2s ease;
}
.site-nav a:hover { color: var(--gold); }
.site-nav a:hover::after { transform: scaleX(1); }

.header-login-btn {
  background: none; border: 1.5px solid var(--border); color: var(--text);
  font-family: inherit; font-weight: 700; font-size: 0.82rem;
  padding: 9px 20px; border-radius: 999px; cursor: pointer; margin-left: 10px;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.header-login-btn:hover { border-color: var(--gold); color: var(--gold); }

.header-auth { position: relative; margin-left: 8px; }
.header-auth-btn {
  display: flex; align-items: center; gap: 9px;
  background: none; border: none; cursor: pointer; padding: 4px 6px 4px 4px;
  border-radius: 999px; color: var(--text);
  transition: background 0.15s ease;
}
.header-auth-btn:hover { background: rgba(255,255,255,0.06); }
.avatar-small { width: 32px; height: 32px; font-size: 0.75rem; flex-shrink: 0; }
.header-auth-name { font-weight: 600; font-size: 0.85rem; }
@media (max-width: 640px) { .header-auth-name { display: none; } }
.header-auth-menu {
  position: absolute; top: calc(100% + 10px); right: 0;
  background: var(--bg-deep); border: 1px solid var(--border); border-radius: 12px;
  padding: 8px; min-width: 200px;
  box-shadow: 0 14px 30px rgba(3, 8, 30, 0.45);
  z-index: 50;
}
.header-auth-email {
  margin: 4px 8px 8px; padding-bottom: 8px; border-bottom: 1px solid var(--border);
  color: var(--muted); font-size: 0.78rem; font-weight: 600; word-break: break-all;
}
.header-auth-menu button {
  width: 100%; text-align: left; background: none; border: none;
  color: var(--text); padding: 10px 10px; border-radius: 8px;
  font-size: 0.86rem; font-weight: 700; font-family: inherit; cursor: pointer;
}
.header-auth-menu button:hover { background: rgba(247, 198, 37, 0.1); color: var(--gold); }

.nav-toggle {
  display: none;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 8px;
  flex-direction: column;
  gap: 5px;
}
.nav-toggle span { width: 24px; height: 2px; background: var(--text); border-radius: 2px; transition: transform 0.2s ease, opacity 0.2s ease; }
.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 860px) {
  .nav-toggle { display: flex; }
  .site-nav {
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--bg-deep);
    border-bottom: 1px solid var(--border);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease;
  }
  .site-nav.open { max-height: 340px; }
  .site-nav a { width: 100%; padding: 15px 24px; box-sizing: border-box; border-bottom: 1px solid rgba(255,255,255,0.06); }
  .site-nav a::after { display: none; }
}

/* --- hero --- */
/* The sticky header sits above the hero in the page flow, so the hero is sized
   to exactly the space left under it (--header-h is measured by app.js; the
   values here are only the first-paint fallback) and its padding is
   symmetric -- that is what puts the text at the true centre of what's visible. */
:root { --header-h: 92px; }
@media (max-width: 860px) { :root { --header-h: 66px; } }

/* Two columns: a full-bleed classroom photo on the left, one single
   left-aligned content column on the right (greeting, headline, CTA, then
   the "We help you" card -- in that order). Stacks photo-above-content on
   narrow screens, same order preserved. */
.hero {
  position: relative;
  min-height: calc(100vh - var(--header-h));
  min-height: calc(100svh - var(--header-h));
  display: grid;
  grid-template-columns: minmax(300px, 46%) 1fr;
  box-sizing: border-box;
  overflow: hidden;
  background: linear-gradient(160deg, #001b4d 0%, #00296b 55%, #000e29 100%);
}

/* The photo itself fades to transparent over a long, eased curve (a mask, not
   a colour overlay on top of it) so the hero's own navy background shows
   through underneath -- a true dissolve, not a patch that stops at a visible
   edge. */
.hero-photo {
  position: relative; z-index: 1; overflow: hidden;
  /* Without this, a grid track sized "1fr" still grows to fit its item's
     min-content -- normally invisible with an absolutely-positioned
     full-bleed photo, but the avatar variant's <img> has real intrinsic
     size, which was stretching this column (and the whole .hero row)
     far wider than the viewport on mobile. */
  min-width: 0;
  -webkit-mask-image: linear-gradient(
    to right,
    #000 0%, #000 28%,
    rgba(0, 0, 0, 0.92) 40%,
    rgba(0, 0, 0, 0.72) 52%,
    rgba(0, 0, 0, 0.48) 64%,
    rgba(0, 0, 0, 0.26) 76%,
    rgba(0, 0, 0, 0.1) 88%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    #000 0%, #000 28%,
    rgba(0, 0, 0, 0.92) 40%,
    rgba(0, 0, 0, 0.72) 52%,
    rgba(0, 0, 0, 0.48) 64%,
    rgba(0, 0, 0, 0.26) 76%,
    rgba(0, 0, 0, 0.1) 88%,
    transparent 100%
  );
}
.hero-photo img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.6s ease;
}
.hero-photo img.active { opacity: 1; }

/* --- Faint photo backdrop behind the WHOLE hero section (both the avatar's
   side and the text side) -- a 3-way split spanning the full width on wide
   screens, all three visible at once side by side; one photo cross-fading
   into the next, full-bleed, on narrow ones (JS toggles .active the same
   way either width uses it -- the desktop img rule below ignores that
   class entirely, so one interval covers both layouts). Kept very light
   and desaturated on purpose: texture across the screen, never competing
   with Manav or the text sitting on top of it. */
.hero-photo-bg {
  position: absolute; inset: 0; z-index: 0;
  display: flex;
}
.hero-photo-bg img {
  flex: 1; min-width: 0; height: 100%;
  object-fit: cover;
  opacity: 0.18;
  filter: saturate(0.5) brightness(0.8);
}
@media (max-width: 900px) {
  .hero-photo-bg img {
    position: absolute; inset: 0; width: 100%;
    opacity: 0;
    transition: opacity 1.6s ease;
  }
  .hero-photo-bg img.active { opacity: 0.22; }
}

/* --- Hero avatar: replaces the rotating photos with Manav's avatar and his
   own greeting bubble, permanently -- not an overlay competing for space
   above the rest of the page (that approach could end up above the header
   on wide layouts), just normal content inside the hero's own photo slot.
   Avatar then bubble, stacked in normal flow (not overlapping/absolute) --
   on a short mobile box a bubble long enough to need several lines would
   otherwise cover the avatar entirely; stacking guarantees neither ever
   sits on top of the other, regardless of text length or screen size. */
.hero-photo.hero-photo-avatar {
  /* .hero-photo.hero-photo-avatar (two classes) beats the plain
     .hero-photo mobile media query's aspect-ratio: 4/3 -- that box is too
     short for an avatar-and-bubble column, so this variant sizes to its
     own content instead of a fixed photo aspect ratio. */
  -webkit-mask-image: none; mask-image: none;
  aspect-ratio: auto; height: auto;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 18px; padding: 32px 20px; overflow: visible;
}
.hero-photo-avatar .hero-avatar-img {
  /* Overrides .hero-photo img (class+element beats a lone class on
     specificity) which otherwise leaves this at its cycling-photo
     opacity: 0 default -- this variant has no .active class to add it. */
  position: relative; z-index: 1; inset: auto;
  width: auto; height: auto;
  max-width: 78%; max-height: 58vh;
  object-fit: contain;
  opacity: 1;
  filter: drop-shadow(0 16px 34px rgba(0, 5, 20, 0.5));
}
.hero-avatar-bubble {
  position: relative; z-index: 1;
  opacity: 0; max-height: 0; overflow: hidden;
  padding: 0 18px; margin: 0;
  transition: opacity 0.3s ease, max-height 0.4s ease, padding 0.4s ease;
  background: var(--panel-alt); border: 1px solid var(--border); border-radius: 16px;
  max-width: 340px; width: 90%; box-sizing: border-box;
  box-shadow: 0 12px 30px rgba(0, 5, 20, 0.5);
}
.hero-avatar-bubble.visible { opacity: 1; max-height: 280px; padding: 16px 18px; }
.hero-avatar-bubble p { margin: 0; font-size: 0.92rem; line-height: 1.45; color: var(--text); }
@media (max-width: 900px) {
  .hero-photo {
    -webkit-mask-image: linear-gradient(
      to bottom,
      #000 0%, #000 45%,
      rgba(0, 0, 0, 0.9) 58%,
      rgba(0, 0, 0, 0.65) 70%,
      rgba(0, 0, 0, 0.38) 82%,
      rgba(0, 0, 0, 0.15) 92%,
      transparent 100%
    );
    mask-image: linear-gradient(
      to bottom,
      #000 0%, #000 45%,
      rgba(0, 0, 0, 0.9) 58%,
      rgba(0, 0, 0, 0.65) 70%,
      rgba(0, 0, 0, 0.38) 82%,
      rgba(0, 0, 0, 0.15) 92%,
      transparent 100%
    );
  }
}

.hero-content {
  position: relative; z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  text-align: left;
  max-width: 860px;
  padding: 48px 56px;
  box-sizing: border-box;
}

.hero-greeting { color: var(--text); font-weight: 700; font-size: clamp(1.1rem, 2.8vw, 1.4rem); margin: 0 0 18px; }

.hero-slider { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; margin: 0 0 22px; }
.hero-line {
  display: block;
  opacity: 0;
  transition: transform 0.9s cubic-bezier(.22,.9,.32,1), opacity 0.7s ease;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(1.7rem, 3.6vw, 2.6rem);
  font-weight: 700;
  line-height: 1.18;
  color: var(--text);
  text-align: left;
}
.hero-line-accent { color: var(--gold); }
.hero-line[data-dir="left"] { transform: translateX(-70px); }
.hero-line[data-dir="right"] { transform: translateX(70px); }
.hero-line.active { opacity: 1; transform: translateX(0); }

/* The only thing on this whole screen meant to look like a button, flanked
   by two arrows that loop a small nudge towards it. The wrapper (not the
   button alone) is what gets centred under the headline in app.js, so the
   arrows always stay glued to its sides. */
.hero-cta-wrap { position: relative; display: inline-flex; align-items: center; gap: 16px; margin: 0 0 34px; }
.hero-start-btn {
  margin: 0;
  padding: 18px 56px;
  min-width: 380px;
  text-align: center;
  justify-content: center;
  font-size: 1.125rem;
  background: var(--gold);
  color: var(--navy-on-gold);
  box-shadow: 0 10px 26px rgba(247, 198, 37, 0.3);
}
.hero-start-btn:not(:disabled):hover { background: var(--gold-dark); }

/* Three chevrons a side (">>>" / "<<<"), lighting up one after another so the
   trio appears to chase inward towards the button, on a loop. */
.hero-cta-arrow { display: flex; align-items: center; color: var(--gold); flex-shrink: 0; }
.hero-cta-arrow svg { width: 11px; height: 18px; margin-left: -4px; }
.hero-cta-arrow svg:first-child { margin-left: 0; }
.hero-cta-arrow-left svg, .hero-cta-arrow-right svg { animation: hero-chevron-chase 1.2s ease-in-out infinite; }
/* Left group: outer chevron lights first, inner (closest to the button)
   lights last -- the pulse reads as travelling inward, towards the button. */
.hero-cta-arrow-left svg:nth-child(1) { animation-delay: 0s; }
.hero-cta-arrow-left svg:nth-child(2) { animation-delay: 0.15s; }
.hero-cta-arrow-left svg:nth-child(3) { animation-delay: 0.3s; }
/* Right group: same inward feel, mirrored -- outer (rightmost) first. */
.hero-cta-arrow-right svg:nth-child(1) { animation-delay: 0.3s; }
.hero-cta-arrow-right svg:nth-child(2) { animation-delay: 0.15s; }
.hero-cta-arrow-right svg:nth-child(3) { animation-delay: 0s; }
@keyframes hero-chevron-chase {
  0%, 100% { opacity: 0.2; }
  50% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-cta-arrow svg { animation: none; opacity: 0.8; }
}

.hero-benefits-card {
  width: 100%; max-width: 480px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-left: 3px solid var(--gold);
  border-radius: 12px;
  padding: 22px 26px;
  box-sizing: border-box;
}
.hero-benefits-title { color: var(--text); font-weight: 800; font-size: 1.05rem; margin: 0 0 14px; }
/* A plain, numbered list -- no per-item card/box/border, so it never reads
   as a row of buttons. Only Start Speaking is meant to look clickable. */
.hero-benefits { list-style: none; counter-reset: benefit; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.hero-benefits li {
  position: relative; padding-left: 26px;
  color: var(--text); font-weight: 600; font-size: 0.95rem; line-height: 1.45;
}
.hero-benefits li::before {
  counter-increment: benefit;
  content: counter(benefit) ".";
  position: absolute; left: 0; top: 0;
  color: var(--gold); font-weight: 800;
}

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; min-height: auto; }
  .hero-photo { aspect-ratio: 4 / 3; }
  .hero-content { max-width: none; padding: 24px 24px 40px; }
  /* The desktop button padding (56px a side) is sized for the wide, empty
     space either side of it in the two-column layout -- on a narrow phone
     that same padding pushes the arrows+button wider than the column. */
  .hero-start-btn { padding: 16px 34px; min-width: 0; }

  /* Phones report the avatar+bubble pushed "Start Speaking" below the
     fold -- side by side instead of stacked uses the available width
     instead of vertical space, so the avatar can stay this same size and
     greeting/headline/button still land in the first screen; the
     benefits list below is fine to need a scroll. */
  .hero-photo.hero-photo-avatar { flex-direction: row; align-items: center; justify-content: flex-start; padding: 16px 16px 14px; gap: 12px; }
  .hero-photo-avatar .hero-avatar-img { max-width: 46%; max-height: 19vh; flex: none; }
  .hero-avatar-bubble { flex: 1; min-width: 0; width: auto; max-width: none; }
  .hero-avatar-bubble.visible { max-height: 210px; padding: 10px 14px; }
  .hero-avatar-bubble p { font-size: 0.85rem; }
  .hero-greeting { margin: 0 0 10px; }
  .hero-slider { margin: 0 0 14px; }
}

/* --- shared section chrome --- */
.section { padding: 90px 24px; }
.section-eyebrow {
  display: block; text-align: center; color: var(--gold); font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; font-size: 0.78rem; margin: 0 0 14px;
}
.section-heading { text-align: center; font-size: clamp(1.8rem, 3.6vw, 2.6rem); margin: 0 0 16px; }
.section-intro { max-width: 720px; margin: 0 auto 50px; text-align: center; color: var(--muted); font-size: 1.02rem; line-height: 1.7; }

.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.in-view { opacity: 1; transform: translateY(0); }

/* --- courses --- */
.courses-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; max-width: 1160px; margin: 0 auto; }
@media (max-width: 860px) { .courses-grid { grid-template-columns: 1fr; } }
.course-card {
  background: linear-gradient(180deg, var(--panel) 0%, var(--panel-alt) 100%);
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 34px 30px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 10px 30px rgba(3, 8, 30, 0.35);
}
.course-card h3 { font-size: 1.4rem; margin: 0 0 12px; }
.course-desc { color: var(--muted); font-size: 0.95rem; line-height: 1.6; margin: 0 0 18px; }
.course-list { list-style: none; margin: 0 0 20px; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.course-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 0.9rem; color: var(--text); }
.course-list li::before { content: ""; flex-shrink: 0; margin-top: 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); }
.course-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 26px; }
.course-tag {
  background: rgba(247, 198, 37, 0.1); border: 1px solid rgba(247, 198, 37, 0.3);
  color: var(--gold); font-size: 0.76rem; font-weight: 700; padding: 6px 12px; border-radius: 999px;
}
.course-card .btn { margin-top: auto; width: 100%; justify-content: center; }
.course-card-note { color: var(--muted); font-size: 0.76rem; text-align: center; margin: 10px 0 0; }

/* --- about us: white section, breaks up the navy rhythm --- */
/* --- about: milestone roadmap, alternating left/right off a centre line --- */
.roadmap-track {
  position: relative;
  list-style: none;
  margin: 0 auto 60px;
  padding: 0;
  max-width: 1000px;
  display: flex;
  flex-direction: column;
  gap: 56px;
}
.roadmap-track::before {
  content: "";
  position: absolute; top: 6px; bottom: 6px; left: 50%;
  width: 3px; margin-left: -1.5px;
  background: linear-gradient(var(--gold), var(--gold-dark));
  border-radius: 2px;
}
.roadmap-item { position: relative; display: flex; }
.roadmap-item-left { justify-content: flex-end; padding-right: calc(50% + 34px); }
.roadmap-item-right { justify-content: flex-start; padding-left: calc(50% + 34px); }
.roadmap-dot {
  position: absolute; top: 4px; left: 50%; transform: translateX(-50%);
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 4px var(--bg-deep), 0 0 0 5px var(--border);
}
.roadmap-card { width: 100%; max-width: 360px; }
.roadmap-year {
  display: block; font-family: 'Playfair Display', Georgia, serif; font-weight: 800;
  font-size: 1.35rem; color: var(--gold-dark); margin: 0 0 10px;
}
.roadmap-media {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 14px;
  overflow: hidden;
  background: linear-gradient(160deg, var(--panel) 0%, var(--panel-alt) 100%);
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
}
.roadmap-media-icon { width: 34px; height: 34px; color: var(--muted); opacity: 0.5; }
.roadmap-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.roadmap-text { margin: 12px 0 0; color: var(--muted); font-size: 0.95rem; line-height: 1.55; font-weight: 600; }

@media (max-width: 760px) {
  .roadmap-track::before { left: 19px; margin-left: 0; }
  .roadmap-item-left, .roadmap-item-right { justify-content: flex-start; padding-left: 50px; padding-right: 0; }
  .roadmap-dot { left: 19px; }
  .roadmap-card { max-width: none; }
}


.about-story {
  max-width: 760px; margin: 0 auto 56px;
  text-align: center; color: var(--muted); font-size: 1.05rem; line-height: 1.8;
}
.about-story-tagline {
  display: inline-block; margin: 0 2px;
  font-family: 'Playfair Display', Georgia, serif; font-style: italic; font-weight: 700;
  color: var(--gold);
}

.about-quote {
  max-width: 780px; margin: 0 auto; text-align: center; padding: 36px 30px;
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.about-quote p {
  font-family: 'Playfair Display', Georgia, serif; font-style: italic;
  font-size: clamp(1.1rem, 2.4vw, 1.5rem); color: var(--text); margin: 0; line-height: 1.6;
}
.about-quote p::before, .about-quote p::after { content: '"'; color: var(--gold); }

/* --- trainer --- */
.trainer-section { background: var(--bg-deep); }
/* Desktop: stretch both columns to the same height, so the photo (which sits
   above the caption in a flex column) grows or shrinks to match however tall
   the credentials text ends up being, instead of using its own fixed
   aspect-ratio and possibly towering over the text. */
.trainer-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 54px; align-items: stretch; max-width: 1160px; margin: 0 auto; }
.trainer-grid > div:first-child { display: flex; flex-direction: column; }
@media (max-width: 900px) {
  .trainer-grid { grid-template-columns: 1fr; align-items: start; }
  .trainer-grid > div:first-child { display: block; }
}
.trainer-photo-card {
  position: relative; border-radius: 22px; overflow: hidden; border: 1px solid var(--border);
  box-shadow: 0 20px 50px rgba(3, 8, 30, 0.5);
  flex: 1; min-height: 0;
}
.trainer-photo-card img { width: 100%; height: 100%; display: block; object-fit: cover; }
@media (max-width: 900px) {
  .trainer-photo-card { flex: none; }
  .trainer-photo-card img { height: auto; aspect-ratio: 3 / 4; }
}
.trainer-badge {
  position: absolute; top: 16px; left: 16px; background: var(--gold); color: var(--navy-on-gold);
  font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em;
  padding: 6px 12px; border-radius: 999px;
}
.trainer-caption { text-align: center; color: var(--muted); font-size: 0.82rem; margin-top: 12px; font-weight: 600; }
.trainer-intro { color: var(--muted); font-size: 1rem; line-height: 1.75; margin: 0 0 30px; }
.credential-list { display: flex; flex-direction: column; gap: 20px; }
.credential-row { display: flex; gap: 16px; align-items: flex-start; }
.credential-icon {
  flex-shrink: 0; width: 46px; height: 46px; border-radius: 50%; background: rgba(247, 198, 37, 0.12);
  color: var(--gold); display: flex; align-items: center; justify-content: center;
}
.credential-icon svg { width: 22px; height: 22px; }
.credential-row h4 { margin: 0 0 4px; font-size: 1rem; }
.credential-row p { margin: 0; color: var(--muted); font-size: 0.88rem; line-height: 1.6; }

/* --- testimonials: a mid-tone navy so it doesn't blend into Trainer/Contact --- */
#testimonials { background: var(--bg); }

/* Continuous right-to-left marquee: app.js duplicates the card set once, and
   this animates the doubled track exactly -50% (one original-length set) on
   a loop, so the seam between the real cards and their clone is invisible. */
.testimonials-marquee {
  width: 100%; margin: 0 auto 40px; overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}
.testimonials-track {
  display: flex; gap: 26px; width: max-content;
  animation: testimonials-scroll 42s linear infinite;
}
.testimonials-marquee:hover .testimonials-track { animation-play-state: paused; }
@keyframes testimonials-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .testimonials-track { animation: none; }
}
.testimonial-card {
  background: var(--panel); border: 1px solid var(--border); border-radius: 18px; padding: 26px 24px;
  display: flex; flex-direction: column; box-shadow: 0 10px 24px rgba(3, 8, 30, 0.3);
  flex: 0 0 340px; width: 340px;
}
@media (max-width: 640px) { .testimonial-card { flex-basis: 280px; width: 280px; } }
.quote-icon { color: var(--gold); opacity: 0.5; margin-bottom: 12px; }
.quote-icon svg { width: 28px; height: 28px; }
.testimonial-text { color: var(--text); font-size: 0.9rem; line-height: 1.65; margin: 0 0 20px; flex: 1; }
.testimonial-person { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--border); }
.avatar-initials {
  width: 44px; height: 44px; border-radius: 50%; background: var(--bg-deep); border: 1.5px solid var(--gold);
  color: var(--gold); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 0.85rem; flex-shrink: 0;
}
.testimonial-person .person-name { font-weight: 700; font-size: 0.9rem; color: var(--text); }
.testimonial-person .person-role { font-size: 0.74rem; color: var(--muted); line-height: 1.4; margin-top: 2px; }

.linkedin-cta { text-align: center; }
.btn-outline-gold {
  background: transparent; border: 1.5px solid var(--gold); color: var(--gold);
  border-radius: 999px; padding: 13px 28px; font-weight: 700; font-size: 0.95rem;
  display: inline-flex; align-items: center; gap: 10px; text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}
.btn-outline-gold:hover { background: var(--gold); color: var(--navy-on-gold); }
.btn-outline-gold svg { width: 18px; height: 18px; }

/* --- contact us --- */
.contact-section { background: var(--bg-deep); }
.contact-grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 50px; max-width: 1160px; margin: 0 auto; align-items: start; }
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; } }
.contact-info-row { display: flex; align-items: center; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--border); }
.contact-info-row:last-child { border-bottom: none; }
.contact-info-icon {
  width: 46px; height: 46px; border-radius: 50%; background: var(--panel); border: 1px solid var(--border);
  color: var(--gold); display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.contact-info-icon svg { width: 20px; height: 20px; }
.contact-info-label { font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); font-weight: 700; margin: 0 0 3px; }
.contact-info-value { font-size: 1rem; font-weight: 600; color: var(--text); text-decoration: none; }
.contact-info-value:hover { color: var(--gold); }

.contact-form {
  display: flex; flex-direction: column; gap: 14px; background: var(--panel);
  border: 1px solid var(--border); border-radius: 20px; padding: 30px; box-sizing: border-box;
}
.contact-form input, .contact-form textarea {
  width: 100%; background: var(--bg-deep); border: 1.5px solid var(--border); border-radius: 12px;
  padding: 14px 16px; color: var(--text); font-family: inherit; font-size: 0.95rem; font-weight: 500;
  resize: vertical; box-sizing: border-box;
}
.contact-form textarea { min-height: 120px; }
.contact-form input:focus, .contact-form textarea:focus { outline: none; border-color: var(--gold); }
.contact-form input::placeholder, .contact-form textarea::placeholder { color: var(--muted); }

.btn-navy {
  background: linear-gradient(180deg, var(--panel) 0%, var(--panel-alt) 100%);
  color: var(--gold);
  border: 1.5px solid var(--gold);
  justify-content: center;
}
.btn-navy:hover { background: var(--bg-deep); }
.btn-navy svg { width: 17px; height: 17px; }

.site-footer { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.site-footer .footer-tagline { color: var(--muted); font-size: 0.75rem; opacity: 0.8; }
.footer-links { display: flex; align-items: center; gap: 14px; margin-top: 2px; }
.footer-privacy-link {
  background: none; border: none; padding: 0;
  color: var(--muted); font-size: 0.72rem; text-decoration: underline;
  cursor: pointer; opacity: 0.75; font-family: inherit;
}
.footer-privacy-link:hover { color: var(--gold); opacity: 1; }

@media (max-width: 640px) {
  .section { padding: 60px 20px; }
  .hero { padding: 40px 20px; }
}

/* --- utility / interests popup / forced-login note --- */
[hidden] { display: none !important; }

.login-required-note {
  margin: 10px 0 4px;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(247, 198, 37, 0.12);
  border: 1px solid rgba(247, 198, 37, 0.45);
  color: var(--gold);
  font-weight: 800;
  font-size: 0.95rem;
  text-align: center;
}

.modal-overlay {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  background: rgba(0, 10, 32, 0.78);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.modal-card {
  width: 100%; max-width: 460px; max-height: 90vh; overflow-y: auto;
  background: linear-gradient(180deg, var(--panel) 0%, var(--panel-alt) 100%);
  border: 1px solid var(--border); border-radius: 20px; padding: 26px;
  box-shadow: 0 24px 60px rgba(0, 5, 20, 0.6);
  color: var(--text);
  animation: modal-pop 0.22s ease;
}
.modal-card h2 { margin: 0 0 6px; font-size: 1.3rem; font-family: 'Playfair Display', Georgia, serif; }
.consent-list { margin: 10px 0 18px; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; color: var(--text); font-size: 0.88rem; line-height: 1.4; }
.consent-list li { padding-left: 2px; }
@keyframes modal-pop {
  from { opacity: 0; transform: translateY(10px) scale(0.98); }
  to { opacity: 1; transform: none; }
}

/* --- Manav avatar guide: transient coaching hints, reparented by JS to sit
   right after whichever content is currently visible (see
   showAvatarGuide/hideAvatarGuide in app.js) -- always in normal document
   flow, so it fills real blank space below that content instead of ever
   floating over a heading or button. Sized deliberately large (at least a
   quarter of the viewport height) so Manav is clearly visible, not a small
   tucked-away tooltip. */
:root { --avatar-guide-h: 30vh; }
@media (max-width: 480px) { :root { --avatar-guide-h: 27vh; } }

.avatar-guide-wrap {
  max-height: 0; overflow: hidden;
  background: linear-gradient(180deg, var(--panel) 0%, var(--panel-alt) 100%);
  transition: max-height 0.4s ease;
}
.avatar-guide-wrap.visible { max-height: var(--avatar-guide-h); }
.avatar-guide {
  display: flex; align-items: center; gap: 14px;
  height: var(--avatar-guide-h);
  padding: 16px;
  box-sizing: border-box;
  transform: translateX(-140%);
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.avatar-guide-wrap.visible .avatar-guide { transform: translateX(0); }
.avatar-guide-img {
  height: 100%; width: auto; max-width: 44%; flex: none;
  object-fit: contain;
  filter: drop-shadow(0 10px 22px rgba(0, 5, 20, 0.55));
}
.avatar-guide-bubble {
  position: relative; flex: 1; min-width: 0;
  background: var(--panel-alt);
  border: 1px solid var(--border); border-radius: 16px;
  padding: 16px 18px;
  box-shadow: 0 12px 30px rgba(0, 5, 20, 0.5);
}
.avatar-guide-bubble p { margin: 0; font-size: 0.95rem; line-height: 1.45; color: var(--text); }
.avatar-guide-actions { display: flex; justify-content: flex-end; margin-top: 12px; }
.avatar-guide-ok {
  background: var(--gold); color: var(--navy-on-gold); border: none; border-radius: 999px;
  padding: 7px 20px; font-weight: 800; font-size: 0.85rem; cursor: pointer;
}
.avatar-guide-close {
  position: absolute; top: -9px; right: -9px; width: 26px; height: 26px; border-radius: 50%;
  background: var(--panel-alt); border: 1px solid var(--border); color: var(--muted);
  font-size: 1rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center;
  padding: 0;
}

/* --- report: technique chips, CIDER, focus box, speech-design checklist --- */
.technique-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.technique-label { font-size: 0.7rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }
.technique-pill {
  background: rgba(247, 198, 37, 0.12); border: 1px solid rgba(247, 198, 37, 0.4); color: var(--gold);
  padding: 3px 11px; border-radius: 999px; font-size: 0.78rem; font-weight: 700;
}
.technique-pill.none { background: rgba(255, 107, 107, 0.1); border-color: rgba(255, 107, 107, 0.35); color: var(--bad); }

/* --- report: overview list of headings, one section open at a time --- */
.report-hint { color: var(--muted); font-size: 0.9rem; margin: -4px 0 14px; }
.report-menu { display: flex; flex-direction: column; gap: 10px; }
.report-menu .section-title { margin: 18px 0 2px; }
.report-tile {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  background: var(--panel-alt); border: 1px solid var(--border); border-radius: 14px;
  padding: 15px 16px; color: var(--text); font-family: inherit; cursor: pointer;
  transition: border-color 0.15s ease, transform 0.15s ease, background 0.15s ease;
}
.report-tile:hover, .report-tile:focus-visible { border-color: var(--gold); background: var(--panel); transform: translateY(-1px); outline: none; }
.tile-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tile-title { font-weight: 700; font-size: 1rem; }
.tile-sub { color: var(--muted); font-size: 0.8rem; }
.tile-badge {
  font-weight: 800; font-size: 0.88rem; padding: 4px 12px; border-radius: 999px; white-space: nowrap;
  border: 1px solid var(--border); color: var(--text);
}
.tile-badge.good { color: var(--good); border-color: rgba(52, 211, 153, 0.45); background: rgba(52, 211, 153, 0.1); }
.tile-badge.warn { color: var(--warn); border-color: rgba(247, 198, 37, 0.45); background: rgba(247, 198, 37, 0.1); }
.tile-badge.bad { color: var(--bad); border-color: rgba(255, 107, 107, 0.45); background: rgba(255, 107, 107, 0.1); }
.tile-chev { color: var(--gold); font-size: 1.6rem; line-height: 1; }
.report-back {
  background: none; border: 0; color: var(--gold); font: inherit; font-weight: 700; cursor: pointer;
  padding: 4px 0 10px; margin: 0;
}
.report-back:hover { text-decoration: underline; }
.report-section-title { margin-top: 0; }

.grammar-item { padding: 8px 0; border-top: 1px solid rgba(247, 198, 37, 0.15); font-size: 0.88rem; line-height: 1.5; }
.grammar-item:first-of-type { border-top: 0; padding-top: 2px; }
.grammar-area { color: var(--gold); font-weight: 700; font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase; }
.grammar-wrong { color: var(--bad); font-style: italic; }
.grammar-right { color: var(--good); font-weight: 600; }
.grammar-tip { color: var(--muted); font-size: 0.82rem; margin-top: 2px; }
.grammar-note { opacity: 0.7; font-size: 0.8rem; }

.cider-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.cider-pill {
  padding: 3px 10px; border-radius: 999px; font-size: 0.74rem; font-weight: 700;
  border: 1px solid var(--border); color: var(--muted); text-transform: capitalize;
}
.cider-pill.good { background: rgba(52, 211, 153, 0.12); border-color: rgba(52, 211, 153, 0.4); color: var(--good); }
.cider-pill.warn { background: rgba(247, 198, 37, 0.1); border-color: rgba(247, 198, 37, 0.4); color: var(--warn); }
.cider-pill.bad { background: rgba(255, 107, 107, 0.1); border-color: rgba(255, 107, 107, 0.35); color: var(--bad); }

.focus-box {
  margin-top: 18px; padding: 14px 16px; border-radius: 14px;
  background: linear-gradient(135deg, rgba(247, 198, 37, 0.16), rgba(247, 198, 37, 0.05));
  border: 1px solid rgba(247, 198, 37, 0.5);
}
.focus-label { font-size: 0.72rem; font-weight: 800; color: var(--gold); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 6px; }
.focus-box p { margin: 0; font-size: 0.95rem; font-weight: 600; line-height: 1.5; color: var(--text); }

.checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.check-item {
  display: flex; gap: 12px; align-items: flex-start; text-align: left;
  background: var(--bg-deep); border: 1px solid var(--border); border-radius: 12px; padding: 11px 13px;
}
.check-dot { flex-shrink: 0; width: 10px; height: 10px; border-radius: 50%; margin-top: 6px; background: var(--muted); }
.check-item.good .check-dot { background: var(--good); box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.18); }
.check-item.tip .check-dot { background: var(--gold); box-shadow: 0 0 0 3px rgba(247, 198, 37, 0.18); }
.check-label { font-size: 0.85rem; font-weight: 700; color: var(--text); }
.check-detail { font-size: 0.82rem; color: var(--muted); line-height: 1.5; margin-top: 2px; }