/* SingingNumbers Website — Luminous, Clean, Accessible
   Colors are pulled from the app palette (see colors.html). */

:root {
  /* Brand */
  --color-primary: #6750A4;
  --color-primary-light: #EADDFF;
  --color-on-primary: #FFFFFF;
  --color-on-primary-light: #21005D;
  --color-secondary: #625B71;

  /* Surfaces */
  --color-surface: #FFFBFE;
  --color-surface-elev: #FFFFFF;
  --color-surface-variant: #E7E0EC;
  --color-on-surface: #1C1B1F;
  --color-on-surface-variant: #49454F;
  --color-outline: #79747E;

  /* Note colors 0-9 — the app's rainbow */
  --note-0: #D7263D; /* Deep Red    */
  --note-1: #F46036; /* Orange      */
  --note-2: #F9C74F; /* Golden      */
  --note-3: #90BE6D; /* Lime        */
  --note-4: #43AA8B; /* Emerald     */
  --note-5: #4DCCBD; /* Cyan        */
  --note-6: #3A86FF; /* Sky Blue    */
  --note-7: #5E60CE; /* Indigo      */
  --note-8: #9D4EDD; /* Purple      */
  --note-9: #F15BB5; /* Magenta     */

  /* Big-Calc luminous accents (used for highlights/glow) */
  --accent-spring: #06D6A0;
  --accent-hotpink: #FF006E;
  --accent-electric: #8338EC;
  --accent-skyglow: #4CC9F0;

  /* Layout */
  --max-width: 1100px;
  --content-width: 760px;
  --spacing: 1.5rem;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;

  /* Effects */
  --shadow-sm: 0 1px 2px rgba(33, 0, 93, 0.06), 0 1px 3px rgba(33, 0, 93, 0.08);
  --shadow-md: 0 6px 18px rgba(33, 0, 93, 0.10), 0 2px 6px rgba(33, 0, 93, 0.06);
  --shadow-lg: 0 18px 48px rgba(33, 0, 93, 0.16), 0 6px 16px rgba(33, 0, 93, 0.10);
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-primary: #D0BCFF;
    --color-primary-light: #4F378B;
    --color-on-primary: #381E72;
    --color-on-primary-light: #EADDFF;
    --color-secondary: #CCC2DC;

    --color-surface: #141318;
    --color-surface-elev: #1F1D24;
    --color-surface-variant: #2A2730;
    --color-on-surface: #E6E1E5;
    --color-on-surface-variant: #CAC4D0;
    --color-outline: #938F99;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 8px 20px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 20px 52px rgba(0, 0, 0, 0.65), 0 6px 16px rgba(0, 0, 0, 0.45);
  }
}

/* ---------- Base ---------- */

*, *::before, *::after {
  box-sizing: border-box;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.6;
  color: var(--color-on-surface);
  background-color: var(--color-surface);
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img {
  max-width: 100%;
}

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color 0.15s ease, opacity 0.15s ease;
}

a:hover {
  text-decoration: underline;
}

code {
  background-color: var(--color-surface-variant);
  padding: 0.125rem 0.375rem;
  border-radius: var(--radius-sm);
  font-family: "SF Mono", Monaco, Consolas, monospace;
  font-size: 0.9em;
}

/* ---------- Accessibility primitives ----------
   Voluntary WCAG 2.1 AA support. See `.ai-agent/legal/accessibility.txt`
   for why this is voluntary rather than required, and
   `.ai-agent/website/accessibility.html` for the public statement. */

/* Visually hide content while keeping it available to screen readers
   and keyboard focus traversal. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* "Skip to main content" link. Hidden until it receives keyboard focus,
   at which point it slides into view at the top of the page. */
.skip-link {
  position: absolute;
  top: -3rem;
  left: 0.5rem;
  z-index: 100;
  background: var(--color-primary);
  color: var(--color-on-primary);
  padding: 0.6rem 1rem;
  border-radius: var(--radius-sm);
  font-weight: 600;
  text-decoration: none;
  transition: top 0.15s ease;
}

.skip-link:focus,
.skip-link:focus-visible {
  top: 0.5rem;
  outline: 2px solid var(--color-on-primary);
  outline-offset: 2px;
}

/* Uniform high-contrast focus ring for keyboard users on every
   interactive element. Mouse clicks do NOT trigger this (focus-visible
   only). */
:focus {
  outline: none;
}

a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
.button:focus-visible,
.faq__item summary:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* On dark / high-contrast surfaces the primary purple ring loses
   contrast; the final-cta banner is white-on-purple, so we invert. */
.final-cta a:focus-visible,
.final-cta .button:focus-visible {
  outline-color: #FFFFFF;
}

/* ---------- Header (legal pages keep this simple style) ---------- */

header {
  text-align: center;
  padding: calc(var(--spacing) * 1.25) var(--spacing);
  background-color: var(--color-primary);
  color: var(--color-on-primary);
}

header h1 {
  margin: 0;
  font-size: 2.25rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

header h1 a {
  color: inherit;
  text-decoration: none;
}

header .tagline {
  margin: 0.35rem 0 0;
  font-size: 1.1rem;
  opacity: 0.92;
}

/* ---------- Sticky site nav (index.html) ---------- */

header.site-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.6rem max(var(--spacing), calc((100vw - var(--max-width)) / 2));
  background: color-mix(in srgb, var(--color-surface) 82%, transparent);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid color-mix(in srgb, var(--color-outline) 25%, transparent);
  color: var(--color-on-surface);
  text-align: left;
}

.site-nav .brand {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--color-on-surface);
  letter-spacing: -0.01em;
}

.site-nav .brand:hover {
  text-decoration: none;
  opacity: 0.85;
}

.site-nav .brand__mark {
  display: inline-block;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: url('icon-192.png') center / contain no-repeat;
  box-shadow: 0 0 0 2px var(--color-surface), 0 2px 8px rgba(103, 80, 164, 0.35);
}

.site-nav nav {
  display: flex;
  gap: 1.1rem;
  margin-left: auto;
  flex-wrap: wrap;
}

.site-nav nav a {
  color: var(--color-on-surface-variant);
  font-size: 0.95rem;
  font-weight: 500;
  padding: 0.35rem 0.1rem;
}

.site-nav nav a:hover {
  color: var(--color-primary);
  text-decoration: none;
}

.site-nav .button--nav {
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
}

/* ---------- Layout ---------- */

main {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: var(--spacing);
}

main.legal {
  padding-top: calc(var(--spacing) * 2);
}

section {
  margin-bottom: calc(var(--spacing) * 2.5);
  scroll-margin-top: 80px;
}

h2 {
  color: var(--color-primary);
  font-size: 1.65rem;
  margin-top: calc(var(--spacing) * 1.5);
  margin-bottom: var(--spacing);
  letter-spacing: -0.01em;
}

main.legal h2 {
  border-bottom: 2px solid var(--color-surface-variant);
  padding-bottom: 0.5rem;
}

p { margin: 0 0 1rem; }
ul { padding-left: 1.5rem; margin-bottom: 1rem; }
li { margin-bottom: 0.5rem; }

table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0;
  font-size: 0.95rem;
}

th, td {
  padding: 0.75rem;
  text-align: left;
  border-bottom: 1px solid var(--color-outline);
}

th {
  background-color: var(--color-surface-variant);
  font-weight: 600;
}

tr:hover {
  background-color: var(--color-surface-variant);
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  isolation: isolate;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: clamp(2rem, 6vw, 4rem) var(--spacing) clamp(2rem, 5vw, 3.5rem);
  text-align: center;
  overflow: hidden;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

/* Luminous mesh-gradient background built from app's note colors */
.hero::before {
  content: "";
  position: absolute;
  inset: -10% -5%;
  z-index: -1;
  background:
    radial-gradient(40% 50% at 12% 18%, color-mix(in srgb, var(--note-9) 65%, transparent) 0%, transparent 70%),
    radial-gradient(35% 45% at 88% 22%, color-mix(in srgb, var(--note-6) 60%, transparent) 0%, transparent 72%),
    radial-gradient(45% 55% at 78% 88%, color-mix(in srgb, var(--note-3) 55%, transparent) 0%, transparent 72%),
    radial-gradient(40% 50% at 22% 82%, color-mix(in srgb, var(--note-2) 60%, transparent) 0%, transparent 72%),
    radial-gradient(60% 80% at 50% 50%, color-mix(in srgb, var(--color-primary-light) 90%, transparent) 0%, var(--color-surface) 85%);
  filter: saturate(120%);
}

.hero h1 {
  margin: 0 0 0.4rem;
  font-size: clamp(2.4rem, 6vw, 3.6rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--color-on-surface);
}

.hero h1 .hero__brand-accent {
  background: linear-gradient(95deg,
    var(--note-0), var(--note-1), var(--note-2), var(--note-3),
    var(--note-4), var(--note-5), var(--note-6), var(--note-7),
    var(--note-8), var(--note-9));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero .tagline {
  margin: 0 0 1.2rem;
  font-size: clamp(1.1rem, 2.2vw, 1.35rem);
  color: var(--color-on-surface-variant);
  font-weight: 500;
}

.hero__lead {
  max-width: 38rem;
  margin: 0 auto 1.5rem;
  font-size: clamp(1rem, 1.6vw, 1.1rem);
  color: var(--color-on-surface);
}

.hero__lead strong { color: var(--color-primary); }

.hero__chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin: 0 auto 1.5rem;
  max-width: 40rem;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-surface-elev) 85%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-outline) 35%, transparent);
  font-size: 0.85rem;
  color: var(--color-on-surface-variant);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.chip::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--note-4);
  box-shadow: 0 0 8px var(--note-4);
}

.chip.chip--privacy::before { background: var(--note-3); box-shadow: 0 0 8px var(--note-3); }
.chip.chip--offline::before { background: var(--note-6); box-shadow: 0 0 8px var(--note-6); }
.chip.chip--free::before    { background: var(--note-9); box-shadow: 0 0 8px var(--note-9); }
.chip.chip--noads::before   { background: var(--note-1); box-shadow: 0 0 8px var(--note-1); }

.hero__art {
  margin: 1.75rem auto 0;
  max-width: 980px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  background: var(--color-primary);
  line-height: 0;
}

.hero__art img {
  width: 100%;
  height: auto;
  display: block;
}

/* ---------- Buttons ---------- */

.cta { margin-top: var(--spacing); }

.button {
  display: inline-block;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--accent-electric) 100%);
  color: var(--color-on-primary);
  padding: 0.875rem 1.75rem;
  border-radius: 999px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: var(--shadow-md);
  transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}

.button:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-lg);
  text-decoration: none;
  opacity: 1;
}

.button--large {
  padding: 1rem 2.25rem;
  font-size: 1.05rem;
}

.button--ghost {
  background: transparent;
  color: var(--color-primary);
  border: 1.5px solid color-mix(in srgb, var(--color-primary) 55%, transparent);
  box-shadow: none;
}

.button--ghost:hover {
  background: color-mix(in srgb, var(--color-primary) 8%, transparent);
}

.button--disabled {
  background: var(--color-outline);
  cursor: not-allowed;
  pointer-events: none;
  box-shadow: none;
  opacity: 0.85;
}

/* Google Play badge: an image-anchor (no gradient pill background). The
   asset is the official "Get it on Google Play" PNG; we constrain its
   max width so the badge sits comfortably alongside hero / final-CTA
   layouts on phones, tablets, and desktops. */
.play-badge {
  display: inline-block;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  line-height: 0;
  border-radius: 8px;
  transition: transform 0.15s ease, opacity 0.15s ease;
}

.play-badge:hover {
  transform: translateY(-1px);
  opacity: 0.92;
  text-decoration: none;
}

.play-badge img {
  display: block;
  width: 100%;
  max-width: 240px;
  height: auto;
}

.site-nav .play-badge img { max-width: 160px; }
.final-cta .play-badge img { max-width: 260px; }

/* ---------- Features grid ---------- */

.features__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.feature-card {
  position: relative;
  padding: 1.25rem 1.25rem 1.1rem;
  background: var(--color-surface-elev);
  border: 1px solid color-mix(in srgb, var(--color-outline) 18%, transparent);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
  overflow: hidden;
  margin: 0;
}

.feature-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: var(--feature-color, var(--color-primary));
}

.feature-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: color-mix(in srgb, var(--feature-color, var(--color-primary)) 40%, transparent);
}

.feature-card__title {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 0.4rem;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-on-surface);
}

.feature-card__dot {
  display: inline-block;
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 50%;
  background: var(--feature-color, var(--color-primary));
  box-shadow: 0 0 10px color-mix(in srgb, var(--feature-color, var(--color-primary)) 60%, transparent);
  flex-shrink: 0;
}

.feature-card p {
  margin: 0;
  font-size: 0.95rem;
  color: var(--color-on-surface-variant);
  line-height: 1.55;
}

/* ---------- How it works ---------- */

.how-it-works ol {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  counter-reset: step;
}

.how-it-works ol li {
  position: relative;
  padding: 1.25rem 1.25rem 1.1rem 1.25rem;
  background: var(--color-surface-elev);
  border: 1px solid color-mix(in srgb, var(--color-outline) 18%, transparent);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  counter-increment: step;
}

.how-it-works ol li::before {
  content: counter(step);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  margin-bottom: 0.6rem;
  border-radius: 50%;
  background: var(--step-color, var(--color-primary));
  color: white;
  font-weight: 700;
  font-size: 1.05rem;
  box-shadow: 0 0 14px color-mix(in srgb, var(--step-color, var(--color-primary)) 50%, transparent);
}

.how-it-works ol li strong {
  display: block;
  font-size: 1.05rem;
  margin-bottom: 0.25rem;
  color: var(--color-on-surface);
}

.how-it-works ol li p {
  margin: 0;
  font-size: 0.95rem;
  color: var(--color-on-surface-variant);
}

/* ---------- Screenshots gallery ---------- */

.screenshots .gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}

.screenshots figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  background-color: var(--color-surface-variant);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.screenshots figure:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.screenshots figure a {
  display: block;
  line-height: 0;
}

.screenshots figure img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 1 / 2;
  object-fit: cover;
  background-color: #000;
}

.screenshots figcaption {
  padding: 0.5rem 0.75rem;
  font-size: 0.85rem;
  color: var(--color-on-surface-variant);
  text-align: center;
}

/* ---------- Privacy & Requirements cards ---------- */

.privacy-summary,
.requirements {
  padding: calc(var(--spacing) * 1.1);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.privacy-summary {
  background: linear-gradient(135deg,
    var(--color-primary-light) 0%,
    color-mix(in srgb, var(--accent-spring) 18%, var(--color-primary-light)) 100%);
  color: var(--color-on-primary-light);
}

.privacy-summary h2 {
  margin-top: 0;
  color: var(--color-on-primary-light);
}

.privacy-summary a {
  color: var(--color-on-primary-light);
  font-weight: 600;
  text-decoration: underline;
}

.requirements {
  background: var(--color-surface-elev);
  border: 1px solid color-mix(in srgb, var(--color-outline) 18%, transparent);
}

.requirements h2 { margin-top: 0; }

/* ---------- FAQ ---------- */

.faq__list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.faq__item {
  background: var(--color-surface-elev);
  border: 1px solid color-mix(in srgb, var(--color-outline) 18%, transparent);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: 0.5rem 1rem;
  transition: border-color 0.15s ease;
}

.faq__item[open] {
  border-color: color-mix(in srgb, var(--color-primary) 45%, transparent);
}

.faq__item summary {
  cursor: pointer;
  padding: 0.65rem 1.75rem 0.65rem 0;
  list-style: none;
  font-weight: 600;
  color: var(--color-on-surface);
  position: relative;
}

.faq__item summary::-webkit-details-marker { display: none; }

.faq__item summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--color-primary);
  transition: transform 0.2s ease;
  line-height: 1;
}

.faq__item[open] summary::after {
  content: "−";
  transform: translateY(-50%) rotate(180deg);
}

.faq__item p {
  margin: 0.25rem 0 0.6rem;
  color: var(--color-on-surface-variant);
}

/* ---------- Final CTA banner ---------- */

.final-cta {
  position: relative;
  isolation: isolate;
  text-align: center;
  padding: clamp(2rem, 5vw, 3rem) var(--spacing);
  border-radius: var(--radius-lg);
  color: white;
  overflow: hidden;
  background:
    radial-gradient(50% 60% at 80% 25%, color-mix(in srgb, var(--accent-hotpink) 55%, transparent) 0%, transparent 70%),
    radial-gradient(45% 55% at 18% 78%, color-mix(in srgb, var(--accent-skyglow) 50%, transparent) 0%, transparent 72%),
    linear-gradient(135deg, var(--color-primary) 0%, var(--accent-electric) 100%);
}

.final-cta h2 {
  color: white;
  margin-top: 0;
  font-size: clamp(1.6rem, 3.5vw, 2.1rem);
}

.final-cta p {
  color: color-mix(in srgb, white 90%, transparent);
  max-width: 36rem;
  margin: 0 auto 1.25rem;
}

.final-cta .button {
  background: white;
  color: var(--color-primary);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

.final-cta .button--disabled {
  background: color-mix(in srgb, white 35%, transparent);
  color: white;
}

/* ---------- Footer ---------- */

footer {
  text-align: center;
  padding: calc(var(--spacing) * 2) var(--spacing);
  background-color: var(--color-surface-variant);
  margin-top: calc(var(--spacing) * 2);
  position: relative;
}

footer::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg,
    var(--note-0), var(--note-1), var(--note-2), var(--note-3),
    var(--note-4), var(--note-5), var(--note-6), var(--note-7),
    var(--note-8), var(--note-9));
}

footer nav { margin-bottom: 1rem; }
footer nav a { color: var(--color-on-surface-variant); margin: 0 0.35rem; }
footer p {
  color: var(--color-on-surface-variant);
  font-size: 0.9rem;
  margin: 0 0 0.5rem;
}
footer .copyright {
  font-size: 0.8rem;
  opacity: 0.75;
  margin-top: 0.5rem;
  margin-bottom: 0;
}

/* ---------- Responsive ---------- */

@media (max-width: 720px) {
  header.site-nav {
    flex-wrap: wrap;
    padding: 0.55rem var(--spacing);
  }
  .site-nav nav { gap: 0.8rem; }
  .site-nav nav a { font-size: 0.9rem; }
  .site-nav .button--nav { display: none; }
}

@media (max-width: 600px) {
  header h1 { font-size: 1.9rem; }
  .hero h1 { font-size: 2.2rem; }
  h2 { font-size: 1.4rem; }
  table { font-size: 0.85rem; }
  th, td { padding: 0.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}