/* SoloTracks — shared styles.
   Structure adapted from a dark, luxe single-column layout; recolored to a
   violet / lavender system drawn from the app icon. Mobile-first; column
   max-width 460px, expanding to 760 / 1080 on larger screens. */

:root {
  --bg:          #08070E;
  --ink:         rgba(245,243,255,0.72);
  --ink-soft:    rgba(245,243,255,0.5);
  --ink-faint:   rgba(245,243,255,0.32);

  --violet:      #7C3AED;
  --indigo:      #4F46E5;
  --lav:         #C4B5FD;
  --lav-2:       #A78BFA;
  --lav-hi:      #EDE9FE;
  --accent:      #8B5CF6;

  --hair:        rgba(167,139,250,0.14);
  --hair-2:      rgba(167,139,250,0.30);
  --hair-3:      rgba(167,139,250,0.55);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
  font-size: 14.5px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
}
img, video { max-width: 100%; display: block; }
a { color: var(--lav); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---- Layout columns ---- */
.col {
  max-width: 460px;
  margin: 0 auto;
  position: relative;
}
.col-home {
  background:
    radial-gradient(130% 50% at 50% 0%, #1a1030 0%, #100b1c 42%, #08070E 100%);
  overflow: hidden;
  box-shadow: 0 0 80px rgba(0,0,0,0.6);
}
.col-doc {
  padding: 0 22px;
  background:
    radial-gradient(130% 50% at 50% 0%, #1a1030 0%, #100b1c 42%, #08070E 100%);
  min-height: 100vh;
}

/* ---- Typography helpers ---- */
.display { font-family: 'Space Grotesk', 'Inter', sans-serif; }

.eyebrow {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
}
.subhead {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lav-hi);
}

/* Metallic "foil" fill — the lavender analog of the gold headline treatment */
.foil {
  background: linear-gradient(180deg,
    #F5F3FF 0%, #DDD6FE 22%, #C4B5FD 44%, #A78BFA 66%, #7C3AED 88%, #C4B5FD 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  background-size: 100% 220%;
  text-shadow: 0 2px 10px rgba(124,58,237,0.25);
  animation: foilShimmer 7s ease-in-out infinite alternate;
}
.section-title-gradient {
  background: linear-gradient(180deg, #EDE9FE, #C4B5FD 55%, #8B5CF6);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.small-wordmark {
  background: linear-gradient(180deg, #EDE9FE, #A78BFA);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

@keyframes foilShimmer {
  0%   { background-position: 50% 0; }
  100% { background-position: 50% 100%; }
}
@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}
@keyframes glowPulse {
  0%, 100% {
    box-shadow:
      0 8px 24px rgba(0,0,0,0.5),
      0 0 22px rgba(124,58,237,0.30),
      0 0 0 1px rgba(167,139,250,0.45) inset;
  }
  50% {
    box-shadow:
      0 8px 24px rgba(0,0,0,0.5),
      0 0 40px rgba(124,58,237,0.55),
      0 0 0 1px rgba(167,139,250,0.75) inset;
  }
}

/* ---- Flourish divider (play-triangle motif) ---- */
.flourish {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 14px auto;
}
.flourish .rule { width: 44px; height: 1px; }
.flourish .rule.l { background: linear-gradient(90deg, transparent, var(--accent)); }
.flourish .rule.r { background: linear-gradient(270deg, transparent, var(--accent)); }
.flourish .mark { color: var(--accent); font-size: 9px; line-height: 1; }

/* ---- App Store badge (official artwork + violet glow) ---- */
.badge-row {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: center;
}
.appstore-badge {
  display: inline-block;
  border-radius: 13px;
  transition: transform 0.15s ease;
}
.appstore-badge img { height: 52px; width: auto; }
.appstore-badge:hover { transform: scale(1.03); text-decoration: none; }
.appstore-badge.pulse { animation: glowPulse 4s ease-in-out infinite; }

.pricing-line {
  margin-top: 16px;
  font-size: 13px;
  color: var(--ink-soft);
  letter-spacing: 0.02em;
}
.pricing-line strong { color: var(--lav); font-weight: 600; }

/* ---- Sections (home) ---- */
.section {
  padding: 46px 26px;
  border-top: 1px solid var(--hair);
}
.section.hero {
  padding: 30px 26px 40px;
  position: relative;
  border-top: none;
  background: radial-gradient(125% 60% at 50% -8%, #241547, #150d2a 46%, #08070E 100%);
  overflow: hidden;
}
.section.alt-a { background: linear-gradient(180deg, #0c0916, #0f0b1c); }
.section.alt-b { background: radial-gradient(120% 55% at 50% 0%, #180f2e, #0c0916); }
.section.signature {
  background: radial-gradient(135% 70% at 50% 100%, #2a1856, #1a1030 50%, #0c0916 100%);
}
.section.cta-band {
  background: linear-gradient(180deg, #150d2a, #08070E);
  border-top: 1px solid var(--hair-2);
  text-align: center;
  padding: 40px 26px;
}

.hero .bokeh {
  position: absolute;
  top: -50px; right: -70px;
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(124,58,237,0.28), transparent 68%);
  filter: blur(6px);
  pointer-events: none;
}

/* Inline header used in hero */
.hero-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  z-index: 1;
}
.hero-header .wordmark-sm {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.01em;
}
.hero-header nav a {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(196,181,253,0.6);
  margin-left: 18px;
}
.hero-header nav a:hover { color: var(--lav-hi); text-decoration: none; }

/* Hero content */
.hero-inner { text-align: center; position: relative; z-index: 1; }
.hero-icon {
  width: 88px; height: 88px;
  border-radius: 20px;
  margin: 26px auto 6px;
  box-shadow: 0 14px 44px rgba(124,58,237,0.45);
}
.hero-eyebrow { margin: 8px auto 6px; color: rgba(139,92,246,0.85); }
.h1-wordmark {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 56px;
  line-height: 0.95;
  letter-spacing: -0.03em;
  margin: 6px 0 12px;
}
.tagline {
  max-width: 360px;
  margin: 14px auto 22px;
  color: var(--ink);
  font-size: 14.5px;
}

/* Section titles */
.h2 {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 28px;
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-align: center;
  margin: 0 0 8px;
}
.h2.small { font-size: 24px; }
.section .sub {
  text-align: center;
  margin: 4px auto 22px;
  max-width: 360px;
  color: var(--ink);
  font-size: 14.5px;
}

/* Feature rows */
.feature-list {
  display: flex;
  flex-direction: column;
  gap: 22px;
  margin-top: 8px;
}
/* When a block stacks on mobile (phone above the rows), give the first
   row room to breathe. Reset to 0 in the side-by-side desktop grid. */
.block-grid .feature-list { margin-top: 34px; }
.feature-row {
  display: flex;
  gap: 15px;
  align-items: flex-start;
  text-align: left;
}
.icon-circle {
  flex: none;
  width: 46px; height: 46px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 32%, rgba(124,58,237,0.28), rgba(0,0,0,0.2));
  border: 1px solid var(--hair-3);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.12),
    0 4px 14px rgba(76,29,149,0.35);
  color: var(--lav);
}
.icon-circle.sm { width: 44px; height: 44px; }
.icon-circle svg {
  width: 21px; height: 21px;
  stroke: currentColor; fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.feature-title {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--lav);
  margin: 4px 0 4px;
}
.feature-body {
  color: var(--ink);
  font-size: 14px;
  line-height: 1.5;
}

/* Big feature block: title + phone + rows */
.block-head { text-align: center; }
.block-head .soon {
  display: inline-block;
  margin-left: 8px;
  vertical-align: middle;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--lav);
  background: rgba(124,58,237,0.18);
  border: 1px solid var(--hair-2);
  border-radius: 999px;
  padding: 3px 9px;
}

/* Phone mockup (portrait) */
.phone {
  margin: 28px auto 0;
  width: 100%;
  max-width: 288px;
  aspect-ratio: 9 / 19.5;
  border-radius: 42px;
  padding: 5px;
  background: linear-gradient(150deg, #3a3550, #171528 40%, #4c3d78 66%, #1a1730);
  box-shadow:
    0 30px 60px -18px rgba(0,0,0,0.85),
    0 0 42px rgba(124,58,237,0.22),
    inset 0 0 0 1px rgba(196,181,253,0.12);
  position: relative;
}
.phone.float { animation: floatY 6s ease-in-out infinite; }
.phone .screen {
  position: relative;
  width: 100%; height: 100%;
  border-radius: 37px;
  overflow: hidden;
  background: #000;
  isolation: isolate;
  transform: translateZ(0);
}
.phone .screen video,
.phone .screen img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 37px;
  transform: scale(1.04);
}

/* Speed / loop meter (repurposed progress widget) */
.meter {
  max-width: 300px;
  margin: 22px auto 4px;
}
.meter-top {
  display: flex; justify-content: space-between;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  font-size: 12px;
  color: var(--lav-hi);
  margin-bottom: 8px;
  letter-spacing: 0.04em;
}
.meter-top .r { color: var(--lav); opacity: 0.85; }
.meter-bar {
  position: relative;
  height: 9px;
  border-radius: 6px;
  background: rgba(255,255,255,0.07);
  border: 1px solid var(--hair-2);
  overflow: hidden;
}
.meter-fill {
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, var(--indigo), var(--lav-2));
  box-shadow: 0 0 12px rgba(124,58,237,0.6);
  border-radius: 6px;
}

/* Founder card */
.card {
  background: linear-gradient(180deg, rgba(40,25,72,0.6), rgba(20,14,34,0.5));
  border: 1px solid var(--hair-2);
  border-radius: 18px;
  padding: 28px 26px;
  box-shadow: 0 14px 40px -18px rgba(0,0,0,0.75);
  text-align: center;
}
.card p {
  font-size: 15.5px;
  color: rgba(245,243,255,0.85);
  line-height: 1.6;
  margin: 0 0 14px;
}
.card p.signature {
  font-size: 14px;
  color: var(--ink-soft);
  font-style: italic;
  margin: 0;
}

/* Tier cards */
.tiers {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  max-width: 720px;
  margin: 24px auto 0;
}
.tier {
  padding: 24px;
  border-radius: 16px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  text-align: left;
}
.tier.pro {
  background: linear-gradient(180deg, rgba(124,58,237,0.16), rgba(124,58,237,0.06));
  border-color: var(--hair-3);
  box-shadow: 0 0 30px -10px rgba(124,58,237,0.4);
}
.tier-header {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin-bottom: 14px;
}
.tier-name {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.01em;
  color: var(--lav-hi);
}
.tier-price { font-size: 14px; color: var(--ink-soft); }
.tier.pro .tier-price strong {
  color: #fff; font-weight: 700; font-size: 16px; letter-spacing: -0.01em;
}
.tier-trial {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: 0.01em;
  color: var(--lav);
  margin: -4px 0 16px;
}
.tier ul { list-style: none; padding: 0; margin: 0; }
.tier li {
  font-size: 14px;
  color: var(--ink);
  padding: 5px 0 5px 24px;
  position: relative;
}
.tier li::before {
  content: "";
  position: absolute; left: 2px; top: 11px;
  width: 12px; height: 7px;
  border-left: 2px solid var(--lav);
  border-bottom: 2px solid var(--lav);
  transform: rotate(-45deg);
}
.promises-line {
  text-align: center;
  font-size: 13px;
  color: var(--ink-soft);
  margin: 24px auto 20px;
  letter-spacing: 0.02em;
}

/* CTA band */
.cta-line {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -0.01em;
  margin-bottom: 20px;
}
.cta-line .m { color: var(--accent); margin: 0 10px; font-size: 12px; vertical-align: middle; }

/* ---- Footer ---- */
.footer {
  text-align: center;
  padding: 40px 26px 34px;
  border-top: 1px solid var(--hair);
}
.footer .wordmark-lg {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 26px;
  letter-spacing: -0.02em;
  margin-bottom: 18px;
}
.footer nav {
  display: flex; justify-content: center; gap: 20px;
  margin-bottom: 14px; flex-wrap: wrap;
}
.footer nav a {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(196,181,253,0.7);
}
.footer nav a.current { color: var(--lav-hi); }
.footer .madeby {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 6px;
}
.footer .copyright { color: var(--ink-faint); font-size: 11px; }

/* ---- Doc pages (support / privacy) ---- */
.doc-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 0 18px;
  border-bottom: 1px solid var(--hair);
}
.doc-header .wordmark-sm {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.01em;
}
.doc-header nav a {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(196,181,253,0.6);
  margin-left: 18px;
}
.doc-header nav a.current { color: var(--lav-hi); }
.doc-header nav a:hover { color: var(--lav-hi); text-decoration: none; }

.doc-title-block { text-align: center; padding: 34px 0 12px; }
.h1-doc {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 40px;
  line-height: 0.98;
  letter-spacing: -0.03em;
  margin: 6px 0 12px;
}
.doc-intro { max-width: 400px; margin: 0 auto; color: var(--ink); font-size: 14.5px; }
.doc-updated { text-align: center; color: var(--ink-faint); font-size: 13px; margin-bottom: 8px; }

/* Contact / highlight card */
.contact-card {
  background: linear-gradient(180deg, rgba(40,25,72,0.6), rgba(20,14,34,0.5));
  border: 1px solid var(--hair-2);
  border-radius: 16px;
  padding: 22px;
  box-shadow: 0 10px 30px -14px rgba(0,0,0,0.7);
  margin: 26px 0;
}
.contact-card h2 {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 18px;
  color: var(--lav-hi);
  margin: 0 0 8px;
}
.contact-card p { margin: 0; color: var(--ink); font-size: 14px; }

/* Prose (support / privacy body) */
.prose { max-width: 720px; margin: 0 auto; }
.prose h2 {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 0.01em;
  color: var(--lav);
  margin: 34px 0 10px;
}
.prose h3 {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  font-size: 15.5px;
  color: var(--lav-hi);
  margin: 22px 0 6px;
}
.prose p, .prose li {
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--ink);
  margin: 0 0 12px;
}
.prose ul { padding-left: 22px; margin: 0 0 12px; }
.prose a { color: var(--lav); text-decoration: underline; }
.prose code {
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--hair);
  border-radius: 6px;
  padding: 1px 6px;
  font-size: 13px;
}
.home-link {
  display: inline-block;
  margin-top: 34px;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  text-decoration: none;
}
.home-link:hover { color: var(--lav); }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .foil, .phone.float, .appstore-badge.pulse { animation: none; }
}

/* =========================================================
   Responsive scale-up — iPad and desktop
   ========================================================= */
@media (min-width: 768px) {
  body {
    background: radial-gradient(60% 40% at 50% 0%, #1a1030 0%, #100b1c 60%, #08070E 100%);
  }
  .col { max-width: 760px; }
  .col-home { box-shadow: 0 0 120px rgba(0,0,0,0.75); }
  .col-doc { padding: 0 40px; }

  .section { padding: 72px 48px; }
  .section.hero { padding: 48px 48px 64px; }
  .section.cta-band { padding: 56px 48px; }

  .h1-wordmark { font-size: 84px; }
  .h2 { font-size: 36px; }
  .h2.small { font-size: 30px; }
  .h1-doc { font-size: 56px; }
  .tagline, .sub { max-width: 460px; font-size: 16px; }
  .feature-body { font-size: 15px; }

  /* Hero: text + phone side-by-side */
  .section.hero .hero-inner {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    align-items: center;
    gap: 40px;
    text-align: left;
  }
  .section.hero .hero-inner > .hero-icon,
  .section.hero .hero-inner > .eyebrow,
  .section.hero .hero-inner > .flourish,
  .section.hero .hero-inner > .h1-wordmark,
  .section.hero .hero-inner > .subhead,
  .section.hero .hero-inner > .tagline,
  .section.hero .hero-inner > .badge-row,
  .section.hero .hero-inner > .pricing-line {
    grid-column: 1;
    justify-self: start;
  }
  .section.hero .hero-inner > .hero-icon { margin: 0 0 4px; }
  .section.hero .hero-inner > .flourish { margin-left: 0; }
  .section.hero .hero-inner > .tagline { margin-left: 0; }
  .section.hero .hero-inner > .phone {
    grid-column: 2;
    grid-row: 1 / span 8;
    margin: 0;
    justify-self: center;
  }

  /* Big feature blocks: phone beside a 2-up row grid */
  .block-grid {
    display: grid;
    grid-template-columns: 300px 1fr;
    align-items: center;
    gap: 44px;
    margin-top: 28px;
  }
  .block-grid .phone { margin: 0; }
  .block-grid.reverse .phone { order: 2; }
  .block-grid .feature-list { margin-top: 0; }

  /* Icon-grid section 2-up */
  .grid-2 .feature-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px 36px;
  }

  .phone { max-width: 300px; border-radius: 46px; }
  .phone .screen { border-radius: 41px; }
  .phone .screen video, .phone .screen img { border-radius: 41px; }

  .doc-intro { max-width: 560px; font-size: 16px; }
  .prose p, .prose li { font-size: 15.5px; }

  .footer { padding: 56px 48px 44px; }
  .footer .wordmark-lg { font-size: 34px; }
}

@media (min-width: 1100px) {
  .col { max-width: 1080px; }
  .col-doc { padding: 0 64px; }

  .section { padding: 96px 72px; }
  .section.hero { padding: 64px 72px 80px; }
  .section.cta-band { padding: 72px 72px; }

  .h1-wordmark { font-size: 104px; }
  .h2 { font-size: 42px; }
  .h1-doc { font-size: 64px; }
  .tagline, .sub { max-width: 520px; font-size: 17px; }

  .section.hero .hero-inner { gap: 56px; }
  .block-grid { gap: 64px; grid-template-columns: 320px 1fr; }
  .grid-2 .feature-list { grid-template-columns: 1fr 1fr 1fr; }

  .col-doc .doc-title-block,
  .col-doc .contact-card,
  .col-doc .prose { max-width: 760px; margin-left: auto; margin-right: auto; }
}