/* ============================================
   TheMusterApp — Marketing Site Styles
   Premium dark enterprise palette
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

/* ── Reset & Base ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg: hsl(0 0% 7%);
  --fg: hsl(0 0% 95%);
  --card: hsl(0 0% 10%);
  --card-fg: hsl(0 0% 95%);
  --primary: hsl(0 0% 85%);
  --primary-fg: hsl(0 0% 7%);
  --secondary: hsl(0 0% 12%);
  --secondary-fg: hsl(0 0% 85%);
  --muted: hsl(0 0% 15%);
  --muted-fg: hsl(0 0% 55%);
  --accent: hsl(0 0% 65%);
  --border: hsl(0 0% 15%);
  --destructive: hsl(0 62% 50%);
  --highlight: hsl(38 35% 60%);
  --status-in: hsl(142 76% 45%);
  --status-out: hsl(0 0% 45%);
  --status-unaccounted: hsl(0 72% 55%);
  --radius: 0.5rem;
  --container: 1200px;
  --font: 'Inter', system-ui, -apple-system, sans-serif;
}

html { scroll-behavior: smooth; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--fg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.6;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
button { font-family: inherit; cursor: pointer; }
ul, ol { list-style: none; }

/* SVG safety net.
   Inline SVGs without explicit width/height attributes collapse to fill
   their parent element when the parent has no fixed dimensions. This has
   bitten the help section once already (icons rendering at viewport size).
   Cap every SVG by default at 1.5em — any SVG that legitimately needs to
   be bigger gets an explicit `width:` rule that overrides this. Specific
   rules elsewhere in the file (.feature-icon svg, .help-empty-state svg,
   etc.) ALWAYS win over this default because they set width/height
   directly, not max-width/max-height. */
svg {
  max-width: 1.5em;
  max-height: 1.5em;
  flex-shrink: 0;
}

/* ── Container ── */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

/* ── Typography ── */
.text-muted { color: var(--muted-fg); }
.text-sm { font-size: 0.875rem; }
.text-xs { font-size: 0.75rem; }
.text-lg { font-size: 1.125rem; }
.text-xl { font-size: 1.25rem; }
.text-2xl { font-size: 1.5rem; }
.text-3xl { font-size: 1.875rem; }
.text-4xl { font-size: 2.25rem; }
.text-5xl { font-size: 3rem; }
.text-6xl { font-size: 3.75rem; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.tracking-tight { letter-spacing: -0.025em; }

/* ── Buttons ── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 24px;
  border-radius: var(--radius);
  font-size: 0.875rem;
  font-weight: 500;
  transition: all 0.2s ease;
  border: 1px solid transparent;
  cursor: pointer;
}
.btn-primary {
  background: var(--primary);
  color: var(--primary-fg);
}
.btn-primary:hover { opacity: 0.9; }
.btn-lg { padding: 14px 32px; font-size: 1rem; }
.btn-outline {
  background: transparent;
  color: var(--fg);
  border-color: var(--border);
}
.btn-outline:hover {
  background: hsla(0, 0%, 100%, 0.05);
  border-color: var(--fg);
}
.btn-full { width: 100%; }

/* ── Navbar ── */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: hsla(0, 0%, 7%, 0.8);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid var(--border);
}
.navbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0;
}
.navbar-logo img { height: 32px; width: auto; }
.navbar-links {
  display: flex;
  align-items: center;
  gap: 32px;
}
.navbar-links a {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--muted-fg);
  transition: color 0.2s;
}
.navbar-links a:hover,
.navbar-links a.active { color: var(--fg); }
.navbar-cta .btn { font-size: 0.875rem; padding: 8px 20px; }

/* Mobile menu */
.navbar-mobile-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--fg);
  padding: 8px;
}
.navbar-mobile-toggle svg { width: 24px; height: 24px; }
.navbar-mobile {
  display: none;
  flex-direction: column;
  gap: 16px;
  padding: 16px 0;
}
.navbar-mobile.open { display: flex; }
.navbar-mobile a {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--muted-fg);
  transition: color 0.2s;
}
.navbar-mobile a:hover { color: var(--fg); }

@media (max-width: 768px) {
  .navbar-links, .navbar-cta { display: none; }
  .navbar-mobile-toggle { display: flex; align-items: center; }
}

/* ── Glass Card ── */
.glass-card {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(135deg, hsla(0,0%,12%,0.8) 0%, hsla(0,0%,8%,0.9) 100%);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid hsla(0,0%,100%,0.08);
  box-shadow: inset 0 0 0 1px hsla(0,0%,0%,0.3), 0 2px 20px -2px hsla(0,0%,0%,0.4), 0 0 40px -20px hsla(0,0%,100%,0.05);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.glass-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, hsla(0,0%,100%,0.15) 30%, hsla(0,0%,100%,0.15) 70%, transparent);
}
.glass-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 0%, hsla(0,0%,100%,0.03) 0%, transparent 60%);
  pointer-events: none;
}
.glass-card:hover { transform: scale(1.02); }
.glass-card.popular { overflow: visible; }
.glass-card > * { position: relative; z-index: 1; }

/* ── Glassmorphism (non-card, used in analytics, etc.) ── */
.glass-panel {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
}
.glass-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  background: hsla(0,0%,100%,0.02);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.glass-panel::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, hsla(0,0%,100%,0.08) 0%, transparent 50%, transparent 100%);
  border-radius: 16px;
  border: 1px solid hsla(0,0%,100%,0.08);
  pointer-events: none;
}
.glass-panel > * { position: relative; z-index: 1; }

/* ── Sections ── */
.section {
  padding: 96px 0;
  position: relative;
  overflow: hidden;
}
.section-border { border-top: 1px solid var(--border); }
.section-header {
  text-align: center;
  margin-bottom: 64px;
}
.section-header h2 {
  font-size: 1.875rem;
  font-weight: 600;
  letter-spacing: -0.025em;
  margin-bottom: 16px;
}
.section-header p {
  color: var(--muted-fg);
  max-width: 32rem;
  margin: 0 auto;
}
@media (min-width: 768px) {
  .section-header h2 { font-size: 2.25rem; }
}

/* ── Hero ── */
.hero {
  min-height: 100vh;
  padding-top: 128px;
  padding-bottom: 80px;
}
.hero-content {
  text-align: center;
  max-width: 48rem;
  margin: 0 auto 64px;
}
.hero h1 {
  font-size: 2.25rem;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.025em;
  margin-bottom: 24px;
}
.hero p {
  font-size: 1.125rem;
  color: var(--muted-fg);
  max-width: 42rem;
  margin: 0 auto 32px;
}
@media (min-width: 768px) {
  .hero h1 { font-size: 3rem; }
}
@media (min-width: 1024px) {
  .hero h1 { font-size: 3.75rem; }
}

/* ── iPad Mockup ── */
.ipad-frame {
  position: relative;
  border-radius: 2.8rem;
  padding: 1.6%;
  background: linear-gradient(145deg, #2e2e2e 0%, #1a1a1a 40%, #222 100%);
  box-shadow: 0 0 0 1px #3a3a3a, 0 30px 80px -10px rgba(0,0,0,0.8), inset 0 1px 0 rgba(255,255,255,0.08);
}
.ipad-screen {
  border-radius: 2.2rem;
  overflow: hidden;
  background: #0d0d0d;
}
.ipad-screen img { width: 100%; height: auto; display: block; }
.ipad-camera {
  position: absolute;
  top: 50%; right: 0.9%;
  transform: translateY(-50%);
  width: 1%; aspect-ratio: 1;
  border-radius: 50%;
  background: #2a2a2a;
  border: 1px solid #333;
}
.ipad-bar-left {
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 0.7%; height: 18%;
  border-radius: 0 9999px 9999px 0;
  background: #3a3a3a;
  z-index: 10;
}
.ipad-bar-right {
  position: absolute;
  right: 0; top: 50%;
  transform: translateY(-50%);
  width: 0.7%; height: 18%;
  border-radius: 9999px 0 0 9999px;
  background: #3a3a3a;
  z-index: 10;
}

/* ── Monitor Mockup ── */
.monitor-body {
  border-radius: 12px;
  border: 1px solid hsla(0,0%,100%,0.08);
  background: hsl(0 0% 10%);
  padding: 5px;
  padding-bottom: 0;
  box-shadow: 0 25px 50px -12px hsla(0,0%,0%,0.5);
}
.monitor-bezel {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 0;
}
.monitor-camera { width: 6px; height: 6px; border-radius: 50%; background: hsla(0,0%,100%,0.08); }
.monitor-screen { border-radius: 6px; overflow: hidden; }
.monitor-screen img { width: 100%; display: block; }
.monitor-neck {
  width: 64px;
  height: 32px;
  margin: 0 auto;
  background: linear-gradient(to bottom, hsl(0 0% 12%), hsl(0 0% 8%));
  border-left: 1px solid hsla(0,0%,100%,0.05);
  border-right: 1px solid hsla(0,0%,100%,0.05);
}
.monitor-base {
  width: 128px;
  height: 6px;
  margin: 0 auto;
  border-radius: 0 0 8px 8px;
  background: linear-gradient(to bottom, hsl(0 0% 11%), hsl(0 0% 8%));
  border: 1px solid hsla(0,0%,100%,0.05);
  border-top: none;
}

/* ── Phone Mockup ── */
.phone-frame {
  border-radius: 3rem;
  background: linear-gradient(to bottom, #555 0%, #222 100%);
  padding: 12px;
  box-shadow: 0 25px 50px -12px rgba(0,0,0,0.6);
}
.phone-screen {
  border-radius: 2.25rem;
  background: hsl(0 0% 4%);
  overflow: hidden;
}
.phone-notch {
  height: 32px;
  background: hsl(0 0% 6%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.phone-notch-pill { width: 80px; height: 20px; background: hsl(0 0% 4%); border-radius: 9999px; }

/* ── Feature Grid ── */
.feature-grid {
  display: grid;
  gap: 20px;
}
.feature-grid-2 { grid-template-columns: 1fr; }
.feature-grid-3 { grid-template-columns: 1fr; }
@media (min-width: 640px) {
  .feature-grid-2 { grid-template-columns: repeat(2, 1fr); }
  .feature-grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .feature-grid-3 { grid-template-columns: repeat(3, 1fr); }
}

.feature-card { padding: 20px 24px; }
.feature-icon {
  width: 40px; height: 40px;
  border-radius: 8px;
  background: linear-gradient(135deg, hsla(0,0%,100%,0.1), hsla(0,0%,100%,0.05));
  border: 1px solid hsla(0,0%,100%,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  transition: background 0.3s;
}
.glass-card:hover .feature-icon {
  background: linear-gradient(135deg, hsla(0,0%,100%,0.15), hsla(0,0%,100%,0.1));
}
.feature-icon svg {
  width: 20px; height: 20px;
  stroke: var(--fg);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.feature-card h3 {
  font-size: 1rem;
  font-weight: 500;
  margin-bottom: 6px;
}
.feature-card p {
  font-size: 0.875rem;
  color: var(--muted-fg);
  line-height: 1.6;
}

/* ── Badge / Pill ── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 500;
}
.badge svg { width: 16px; height: 16px; }
.badge-muted { background: hsla(0,0%,85%,0.1); border: 1px solid hsla(0,0%,85%,0.2); color: var(--primary); }
.badge-amber { background: hsla(38,80%,50%,0.1); border: 1px solid hsla(38,80%,50%,0.2); color: hsl(38,80%,55%); }
.badge-red { background: hsla(0,70%,50%,0.15); border: 1px solid hsla(0,70%,50%,0.3); color: hsl(0,70%,60%); }
.badge-emerald { background: hsla(142,76%,45%,0.1); border: 1px solid hsla(142,76%,45%,0.2); color: hsl(142,76%,50%); }
.badge-blue { background: hsla(200,70%,50%,0.1); border: 1px solid hsla(200,70%,50%,0.2); color: hsl(200,70%,55%); }
.badge-destructive { background: hsla(0,62%,50%,0.1); border: 1px solid hsla(0,62%,50%,0.2); color: var(--destructive); }
.badge-sm { padding: 4px 10px; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.05em; }

/* ── Two-Column Layout ── */
.split {
  display: grid;
  gap: 48px;
  align-items: center;
}
@media (min-width: 1024px) {
  .split { grid-template-columns: 1fr 1fr; gap: 64px; }
}
.split-reverse .split-visual { order: 2; }
.split-reverse .split-content { order: 1; }
@media (max-width: 1023px) {
  .split-reverse .split-visual { order: 1; }
  .split-reverse .split-content { order: 2; }
}

/* ── Pricing ── */
.pricing-grid {
  display: grid;
  gap: 24px;
  max-width: 64rem;
  margin: 0 auto;
}
@media (min-width: 768px) {
  .pricing-grid { grid-template-columns: repeat(3, 1fr); align-items: start; }
}
.pricing-card {
  padding: 32px;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.pricing-card.popular {
  ring: 2px solid var(--primary);
  box-shadow: 0 0 0 2px var(--primary);
}
.pricing-popular-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  background: var(--primary);
  color: var(--primary-fg);
  font-size: 0.75rem;
  font-weight: 500;
  padding: 4px 12px;
  border-radius: 9999px;
  white-space: nowrap;
}
.pricing-header { text-align: center; margin-bottom: 24px; }
.pricing-header h3 { font-size: 1.125rem; font-weight: 600; margin-bottom: 4px; }
.pricing-header .desc { font-size: 0.875rem; color: var(--muted-fg); margin-bottom: 16px; }
.pricing-price {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
}
.pricing-price .amount { font-size: 2.25rem; font-weight: 600; }
.pricing-price .period { color: var(--muted-fg); }
.pricing-vat { font-size: 0.75rem; color: var(--muted-fg); margin-top: 4px; }
.pricing-features {
  flex: 1;
  margin-bottom: 32px;
}
.pricing-features li {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  font-size: 0.875rem;
}
.pricing-check {
  flex-shrink: 0;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: hsla(0,0%,95%,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
}
.pricing-check svg {
  width: 12px; height: 12px;
  stroke: var(--fg);
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ── Footer ── */
.footer {
  padding: 64px 0;
  border-top: 1px solid var(--border);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  margin-bottom: 48px;
}
@media (min-width: 768px) {
  .footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; }
}
.footer-brand p { font-size: 0.875rem; color: var(--muted-fg); margin-top: 16px; max-width: 20rem; }
.footer-col h4 { font-size: 0.875rem; font-weight: 600; margin-bottom: 16px; }
.footer-col ul { display: flex; flex-direction: column; gap: 8px; }
.footer-col a { font-size: 0.875rem; color: var(--muted-fg); transition: color 0.2s; }
.footer-col a:hover { color: var(--fg); }
.footer-bottom {
  padding-top: 32px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
@media (min-width: 768px) {
  .footer-bottom { flex-direction: row; justify-content: space-between; }
}
.footer-bottom p { font-size: 0.875rem; color: var(--muted-fg); }
.footer-legal { display: flex; gap: 24px; }
.footer-legal a { font-size: 0.875rem; color: var(--muted-fg); transition: color 0.2s; }
.footer-legal a:hover { color: var(--fg); }

/* ── Scroll Animations ── */
.fade-up {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}
.fade-left {
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.fade-left.visible {
  opacity: 1;
  transform: translateX(0);
}
.fade-right {
  opacity: 0;
  transform: translateX(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.fade-right.visible {
  opacity: 1;
  transform: translateX(0);
}

/* Stagger children */
.stagger > *:nth-child(1) { transition-delay: 0s; }
.stagger > *:nth-child(2) { transition-delay: 0.08s; }
.stagger > *:nth-child(3) { transition-delay: 0.16s; }
.stagger > *:nth-child(4) { transition-delay: 0.24s; }
.stagger > *:nth-child(5) { transition-delay: 0.32s; }
.stagger > *:nth-child(6) { transition-delay: 0.4s; }
.stagger > *:nth-child(7) { transition-delay: 0.48s; }
.stagger > *:nth-child(8) { transition-delay: 0.56s; }

/* ── Gradient Text ── */
.gradient-text {
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.gradient-emerald { background-image: linear-gradient(to right, hsl(142,60%,55%), var(--primary)); }
.gradient-amber { background-image: linear-gradient(to right, hsl(38,80%,55%), hsl(25,80%,55%)); }
.gradient-blue { background-image: linear-gradient(to right, hsl(200,70%,55%), hsl(180,60%,50%)); }
.gradient-amber-orange { background-image: linear-gradient(to right, hsl(38,80%,55%), hsl(25,80%,55%)); }

/* ── Ambient Glows ── */
.glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  z-index: -1;
}
.glow-center {
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 60%; height: 60%;
}
.glow-primary { background: hsla(0,0%,85%,0.05); }
.glow-amber { background: hsla(38,80%,50%,0.05); }
.glow-blue { background: hsla(200,70%,50%,0.05); }

/* ── Divider ── */
.divider-fade {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border) 20%, var(--border) 80%, transparent);
}

/* ── Search Level Cards (Security page) ── */
.search-level-card {
  padding: 28px;
  border-radius: 12px;
  background: hsla(0,0%,12%,0.5);
  border: 1px solid transparent;
  transition: all 0.3s;
  position: relative;
}
.search-level-card:hover { background: hsla(0,0%,12%,0.8); }
.search-level-accent {
  position: absolute;
  top: 0; left: 24px; right: 24px;
  height: 1px;
  opacity: 0.5;
  transition: opacity 0.3s;
}
.search-level-card:hover .search-level-accent { opacity: 1; }

/* ── Steps (How it works) ── */
.step {
  display: flex;
  gap: 24px;
  margin-bottom: 32px;
}
.step:last-child { margin-bottom: 0; }
.step-num {
  flex-shrink: 0;
  width: 48px; height: 48px;
  border-radius: 8px;
  background: var(--secondary);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--muted-fg);
}
.step-content { padding-top: 4px; }
.step-content h3 { font-weight: 600; margin-bottom: 4px; }
.step-content p { font-size: 0.875rem; color: var(--muted-fg); line-height: 1.6; }

/* ── Waveform (Audio Recording) ── */
.waveform {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  height: 96px;
}
.waveform-bar {
  width: 3px;
  border-radius: 9999px;
  background: linear-gradient(to top, hsla(0,0%,85%,0.5), var(--primary));
  animation: waveform-pulse 1s ease-in-out infinite alternate;
}
@keyframes waveform-pulse {
  0% { height: 8px; }
  100% { height: var(--wave-h, 40px); }
}

/* ── Recording indicator ── */
.rec-dot {
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--destructive);
  position: relative;
}
.rec-dot::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--destructive);
  animation: rec-ping 1.5s ease-out infinite;
}
@keyframes rec-ping {
  0% { transform: scale(1); opacity: 1; }
  100% { transform: scale(2.5); opacity: 0; }
}

/* ── Rotating Backgrounds (Visitor Onboarding) ── */
.bg-rotate {
  position: absolute;
  inset: 0;
  object-fit: cover;
  width: 100%;
  height: 100%;
  transition: opacity 1.2s ease;
}
.bg-rotate.hidden { opacity: 0; }
.bg-rotate.visible { opacity: 1; }

/* ── Feature List (with icon) ── */
.feature-row {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.feature-row-icon {
  flex-shrink: 0;
  width: 40px; height: 40px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.feature-row-icon svg {
  width: 20px; height: 20px;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}
.feature-row h4 { font-weight: 600; margin-bottom: 4px; }
.feature-row p { font-size: 0.875rem; color: var(--muted-fg); line-height: 1.6; }

/* ── Slide indicators ── */
.slide-indicators {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 16px;
}
.slide-dot {
  height: 6px;
  border-radius: 9999px;
  background: hsla(0,0%,100%,0.15);
  border: none;
  cursor: pointer;
  transition: width 0.5s ease;
  position: relative;
  overflow: hidden;
}
.slide-dot.inactive { width: 12px; }
.slide-dot.active { width: 48px; }
.slide-dot-fill {
  position: absolute;
  top: 0; bottom: 0; left: 0;
  background: var(--primary);
  border-radius: 9999px;
  width: 0;
}
.slide-dot.active .slide-dot-fill {
  animation: slide-fill 15s linear forwards;
}
@keyframes slide-fill {
  from { width: 0; }
  to { width: 100%; }
}

/* ── Emergency Action Buttons ── */
.emergency-btn {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  padding: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 16px;
  border: none;
  width: 100%;
  text-align: left;
}
.emergency-btn-icon {
  width: 48px; height: 48px;
  border-radius: 12px;
  background: hsla(0,0%,100%,0.2);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.emergency-btn-icon svg { width: 24px; height: 24px; stroke: white; fill: none; stroke-width: 2; }
.emergency-btn-text { flex: 1; }
.emergency-btn-text p:first-child { font-weight: 600; color: white; }
.emergency-btn-text p:last-child { font-size: 0.875rem; color: hsla(0,0%,100%,0.7); }
.emergency-btn-shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, hsla(0,0%,100%,0.1), transparent);
  transform: translateX(-100%);
  transition: transform 0.7s;
}
.emergency-btn:hover .emergency-btn-shine { transform: translateX(100%); }

/* ── Chart (SVG-based, for analytics) ── */
.chart-container { position: relative; }

/* ── Stats Grid ── */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
@media (min-width: 1024px) {
  .stats-grid { grid-template-columns: repeat(4, 1fr); }
}
.stat-card {
  text-align: center;
  padding: 20px 24px;
}
.stat-card svg { width: 20px; height: 20px; stroke: var(--muted-fg); fill: none; margin: 0 auto 12px; stroke-width: 2; }
.stat-value { font-size: 1.5rem; font-weight: 700; margin-bottom: 4px; }
.stat-label { font-size: 0.875rem; color: hsl(0 0% 80%); font-weight: 500; margin-bottom: 4px; }
.stat-sub { font-size: 0.75rem; color: var(--muted-fg); }
@media (min-width: 768px) {
  .stat-value { font-size: 1.875rem; }
}

/* ── Utility ── */
.mx-auto { margin-left: auto; margin-right: auto; }
.text-center { text-align: center; }
.hidden { display: none; }
.relative { position: relative; }
.overflow-hidden { overflow: hidden; }
.max-w-2xl { max-width: 42rem; }
.max-w-3xl { max-width: 48rem; }
.max-w-4xl { max-width: 56rem; }
.max-w-5xl { max-width: 64rem; }
.max-w-6xl { max-width: 72rem; }
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 12px; }
.gap-4 { gap: 16px; }
.gap-6 { gap: 24px; }
.gap-8 { gap: 32px; }
.mb-1 { margin-bottom: 4px; }
.mb-2 { margin-bottom: 8px; }
.mb-3 { margin-bottom: 12px; }
.mb-4 { margin-bottom: 16px; }
.mb-6 { margin-bottom: 24px; }
.mb-8 { margin-bottom: 32px; }
.mt-2 { margin-top: 8px; }
.mt-4 { margin-top: 16px; }
.mt-6 { margin-top: 24px; }
.pt-4 { padding-top: 16px; }
.pb-6 { padding-bottom: 24px; }
.p-5 { padding: 20px; }
.p-6 { padding: 24px; }
.p-8 { padding: 32px; }
.flex-1 { flex: 1; }
.shrink-0 { flex-shrink: 0; }
.w-full { width: 100%; }
.leading-relaxed { line-height: 1.65; }
.leading-tight { line-height: 1.15; }
.space-y-2 > * + * { margin-top: 8px; }
.space-y-3 > * + * { margin-top: 12px; }
.space-y-4 > * + * { margin-top: 16px; }
.space-y-6 > * + * { margin-top: 24px; }
.space-y-8 > * + * { margin-top: 32px; }
.flex-wrap { flex-wrap: wrap; }
.inline-flex { display: inline-flex; }

/* ── Desk surface (under monitor) ── */
.desk-line {
  height: 2px;
  background: linear-gradient(to right, transparent, hsla(0,0%,100%,0.06), transparent);
}
.desk-surface {
  height: 64px;
  background: linear-gradient(to bottom, hsla(0,0%,100%,0.02), transparent);
  border-radius: 0 0 16px 16px;
}

/* ── Floating iPad (over monitor) ── */
.floating-ipad {
  position: absolute;
  right: 8%;
  bottom: -30px;
  z-index: 20;
  width: 34%;
}
.floating-ipad-frame {
  border-radius: 1.6rem;
  padding: 3.5%;
  background: linear-gradient(145deg, #2e2e2e 0%, #1a1a1a 40%, #222 100%);
  box-shadow: 0 0 0 1px #3a3a3a, 0 20px 60px -8px rgba(0,0,0,0.9), inset 0 1px 0 rgba(255,255,255,0.08);
  position: relative;
}
.floating-ipad-screen { border-radius: 1.1rem; overflow: hidden; background: black; }
.floating-ipad-screen img { width: 100%; display: block; }

/* ============================================
   Help Center
   Lives at /help with sub-routes /help/<category>/<article>.
   Uses the existing dark monochrome palette and the existing
   .glass-card / .feature-grid / .feature-icon components so
   the help section feels native to the marketing site.
   ============================================ */

/* Global safety net for inline SVGs anywhere in the help section.
   Without this, an SVG with viewBox but no width/height attribute
   collapses to fill its parent — which on a section with no other
   content (e.g. an unstyled fallback) makes the icon fill the entire
   viewport. Cap it at 1.5em so even if a more specific rule fails,
   nothing can ever blow out the layout. More specific rules (e.g.
   .help-search-icon { width: 18px }) still win the cascade. */
.help-hero svg,
.help-categories svg,
.help-category-page svg,
.help-article-page svg {
  max-width: 1.5em;
  max-height: 1.5em;
  flex-shrink: 0;
}
/* Allow the empty-state "clock" icon and similar prominent illustrations
   to be larger if the rule explicitly says so (the .help-empty-state svg
   rule sets 48×48 below). */
.help-empty-state svg {
  max-width: none;
  max-height: none;
}

/* ── Hero ── */
.help-hero {
  padding-top: 128px;  /* clear the fixed navbar */
  padding-bottom: 64px;
  position: relative;
  overflow: hidden;
}
.help-hero::before {
  /* subtle radial glow behind the title, same idiom as other sections */
  content: '';
  position: absolute;
  top: 0; left: 50%;
  width: 1000px;
  height: 600px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, hsla(0,0%,100%,0.04) 0%, transparent 60%);
  pointer-events: none;
}
.help-hero-inner {
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
  position: relative;
}
.help-hero h1 {
  font-size: 2.25rem;
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.15;
  margin-bottom: 16px;
}
.help-hero p {
  color: var(--muted-fg);
  font-size: 1.0625rem;
  margin-bottom: 32px;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}
.help-hero p a { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.help-hero p a:hover { color: var(--highlight); }
@media (min-width: 768px) {
  .help-hero h1 { font-size: 2.75rem; }
}

/* ── Search input ── */
.help-search-wrap {
  position: relative;
  max-width: 560px;
  margin: 0 auto;
}
.help-search-icon {
  position: absolute;
  top: 50%;
  left: 20px;
  width: 18px;
  height: 18px;
  transform: translateY(-50%);
  color: var(--muted-fg);
  pointer-events: none;
}
.help-search-input {
  width: 100%;
  padding: 16px 20px 16px 50px;
  border-radius: 12px;
  background: hsl(0 0% 10%);
  border: 1px solid var(--border);
  color: var(--fg);
  font-family: inherit;
  font-size: 1rem;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
  -webkit-appearance: none;
  appearance: none;
}
.help-search-input::placeholder { color: hsl(0 0% 45%); }
.help-search-input:focus {
  outline: none;
  background: hsl(0 0% 12%);
  border-color: hsl(0 0% 30%);
  box-shadow: 0 0 0 4px hsla(0,0%,100%,0.04);
}

/* ── Category cards ── */
.help-categories { padding-bottom: 64px; }
.help-category-card {
  display: block;
  text-decoration: none;
  color: inherit;
  position: relative;
}
.help-category-card h3 {
  font-size: 1.0625rem;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--fg);
}
.help-category-card p {
  font-size: 0.875rem;
  color: var(--muted-fg);
  line-height: 1.55;
  margin-bottom: 14px;
}
.help-category-count {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted-fg);
  padding-top: 4px;
  border-top: 1px solid hsla(0,0%,100%,0.05);
  width: 100%;
}

.help-search-empty {
  text-align: center;
  padding: 48px 24px;
  color: var(--muted-fg);
}
.help-search-empty a {
  color: var(--fg);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ── Still need help CTA ── */
.help-cta-inner {
  text-align: center;
  padding: 56px 32px;
  max-width: 720px;
  margin: 0 auto;
}
.help-cta-inner h2 {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 12px;
  letter-spacing: -0.02em;
}
.help-cta-inner p {
  color: var(--muted-fg);
  margin-bottom: 24px;
  font-size: 1rem;
}

/* ── Breadcrumb (used on category & article pages) ── */
.help-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--muted-fg);
  margin-bottom: 24px;
}
.help-breadcrumb a {
  color: var(--muted-fg);
  transition: color 0.15s;
}
.help-breadcrumb a:hover { color: var(--fg); }
.help-breadcrumb svg {
  width: 14px;
  height: 14px;
  opacity: 0.5;
}
.help-breadcrumb-current {
  color: var(--fg);
}

/* ── Category page (list of articles in one category) ── */
.help-category-page {
  padding-top: 112px;
  padding-bottom: 96px;
}
.help-category-header {
  max-width: 760px;
  margin: 0 auto 40px;
}
.help-category-header h1 {
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: -0.025em;
  margin-bottom: 12px;
}
.help-category-header p {
  color: var(--muted-fg);
  font-size: 1.0625rem;
}

.help-article-list {
  max-width: 760px;
  margin: 0 auto;
  border-top: 1px solid var(--border);
}
.help-article-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 4px;
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  color: var(--fg);
  transition: background 0.15s, padding 0.2s;
}
.help-article-row:hover {
  background: hsla(0,0%,100%,0.02);
  padding-left: 12px;
  padding-right: 12px;
}
.help-article-row-content { min-width: 0; flex: 1; }
.help-article-row h3 {
  font-size: 1rem;
  font-weight: 500;
  margin-bottom: 4px;
  color: var(--fg);
}
.help-article-row p {
  font-size: 0.85rem;
  color: var(--muted-fg);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.help-article-row-arrow {
  flex-shrink: 0;
  color: var(--muted-fg);
  transition: transform 0.2s, color 0.2s;
}
.help-article-row-arrow svg { width: 18px; height: 18px; }
.help-article-row:hover .help-article-row-arrow {
  color: var(--fg);
  transform: translateX(4px);
}

/* "Coming soon" empty state for placeholder category pages */
.help-empty-state {
  text-align: center;
  padding: 80px 24px;
  max-width: 520px;
  margin: 0 auto;
}
.help-empty-state svg {
  width: 48px;
  height: 48px;
  color: var(--muted-fg);
  opacity: 0.5;
  margin-bottom: 16px;
}
.help-empty-state h2 {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 8px;
}
.help-empty-state p {
  color: var(--muted-fg);
  margin-bottom: 24px;
}

/* ── Article page (single help article) ── */
.help-article-page {
  padding-top: 112px;
  padding-bottom: 96px;
}
.help-article-inner {
  max-width: 720px;
  margin: 0 auto;
}
.help-article-inner h1 {
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.2;
  margin-bottom: 12px;
}
.help-article-meta {
  font-size: 0.85rem;
  color: var(--muted-fg);
  margin-bottom: 36px;
}
.help-article-body {
  font-size: 1rem;
  color: hsl(0 0% 88%);
  line-height: 1.75;
}
.help-article-body p { margin-bottom: 18px; }
.help-article-body h2 {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--fg);
  margin-top: 40px;
  margin-bottom: 14px;
  letter-spacing: -0.015em;
}
.help-article-body h3 {
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--fg);
  margin-top: 28px;
  margin-bottom: 10px;
}
.help-article-body ul,
.help-article-body ol {
  list-style: revert;
  padding-left: 24px;
  margin-bottom: 18px;
  color: hsl(0 0% 80%);
}
.help-article-body li { margin-bottom: 8px; line-height: 1.7; }
.help-article-body a {
  color: var(--fg);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.help-article-body a:hover { color: var(--highlight); }
.help-article-body strong { color: var(--fg); font-weight: 600; }
.help-article-body code {
  background: hsl(0 0% 10%);
  border: 1px solid var(--border);
  padding: 2px 8px;
  border-radius: 6px;
  font-family: 'SF Mono', Menlo, Consolas, monospace;
  font-size: 0.85em;
  color: hsl(0 0% 88%);
}
.help-article-body blockquote {
  border-left: 2px solid var(--border);
  padding-left: 20px;
  margin: 24px 0;
  color: var(--muted-fg);
  font-style: italic;
}
/* Placeholder image box — visible "screenshot goes here" container that
   we'll swap for real <img> tags later. */
.help-article-body .help-image-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: hsl(0 0% 9%);
  border: 1px dashed hsl(0 0% 22%);
  border-radius: 12px;
  padding: 48px 24px;
  margin: 24px 0;
  color: var(--muted-fg);
  font-size: 0.85rem;
  text-align: center;
  font-style: italic;
}

/* "Was this helpful?" + related articles footer */
.help-article-footer {
  margin-top: 56px;
  padding-top: 32px;
  border-top: 1px solid var(--border);
}
.help-article-footer h4 {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 16px;
  color: var(--fg);
}
.help-article-related {
  display: grid;
  gap: 12px;
}
.help-article-related a {
  display: block;
  padding: 14px 18px;
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--fg);
  font-size: 0.9rem;
  transition: background 0.15s, border-color 0.15s;
}
.help-article-related a:hover {
  background: hsla(0,0%,100%,0.02);
  border-color: hsl(0 0% 25%);
}