/* Chaos Choreographer website — Glitter Pop: blush page, plum "mat" blocks, hot pink accents, gold sparkle.
   Layout: one narrow reading column; the hero pairs the promise with a comp-morning run of show. */
@font-face {
  font-family: 'Archivo';
  src: url('/fonts/archivo.woff2') format('woff2');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}
@font-face {
  font-family: 'Figtree';
  src: url('/fonts/figtree.woff2') format('woff2');
  font-weight: 300 900;
  font-display: swap;
}

:root {
  --cream: #fff0f6; /* blush page */
  --paper: #ffffff;
  --mat: #1b0b2e; /* plum night blocks, like the app's comp card */
  --mat-soft: #35204a;
  --gold: #ff2d87; /* hot pink: buttons and highlights */
  --sparkle: #ffc233; /* sparkle gold, used sparingly */
  --gold-ink: #c4005e; /* pink that reads as text on blush */
  --ink: #1b0b2e;
  --muted: #6b5577;
  --line: #f2d3e1;
  --on-mat: #ffffff;
  --on-mat-soft: #d9cbe3;
  --display: 'Archivo', 'Arial Narrow', 'Helvetica Neue', Arial, sans-serif;
  --body: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font: 400 1.0625rem/1.6 var(--body);
}
img { max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 6px; }

.wrap { max-width: 68rem; margin: 0 auto; padding-inline: max(1rem, env(safe-area-inset-left, 0px)); }

/* Header */
.top { padding-block: 1rem; }
.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.brand { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; }
.brand img { width: 2.25rem; height: 2.25rem; border-radius: 0.6rem; }
.brand span { font: 800 1.05rem/1 var(--display); font-stretch: 112%; letter-spacing: -0.01em; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 3rem; padding: 0 1.4rem; border-radius: 999px;
  background: var(--gold); color: var(--mat);
  font: 700 1rem/1 var(--body); text-decoration: none; white-space: nowrap;
  transition: transform 0.15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn.dark { background: var(--mat); color: var(--on-mat); }
.btn.small { min-height: 2.5rem; padding: 0 1.1rem; font-size: 0.95rem; }

/* Hero */
.hero { padding-block: 2.5rem 4rem; }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 3rem; align-items: center; }
.eyebrow { font: 700 0.8rem/1 var(--body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-ink); margin: 0 0 1rem; }
h1 {
  font: 900 clamp(2.5rem, 10.5vw, 4.5rem)/0.95 var(--display);
  font-stretch: 112%;
  letter-spacing: -0.035em;
  margin: 0;
  text-wrap: balance;
}
h1 .gold { color: var(--gold); -webkit-text-stroke: 0; }
.lede { font-size: 1.2rem; color: var(--muted); max-width: 34rem; margin: 1.4rem 0 1.8rem; }
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.cta-note { font-size: 0.95rem; color: var(--muted); }

/* The comp-morning run of show (the hero's picture) */
.run {
  margin: 0;
  background: var(--mat); color: var(--on-mat);
  border-radius: 1.6rem; padding: 1.5rem;
  box-shadow: 0 30px 60px -30px rgba(17, 17, 17, 0.45);
  transform: rotate(1.5deg);
}
.run-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.run-label { font: 700 0.72rem/1 var(--body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--on-mat-soft); }
.counts { font: 800 0.8rem/1 var(--display); font-stretch: 115%; letter-spacing: 0.25em; color: var(--sparkle); white-space: nowrap; }
.run-next { margin: 1rem 0 0.2rem; color: var(--on-mat-soft); font-size: 0.95rem; }
.run-next b { color: var(--on-mat); }
.run-clock { font: 900 3.4rem/1 var(--display); font-stretch: 120%; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.steps { list-style: none; margin: 1.3rem 0 0; padding: 0; display: grid; gap: 0.15rem; }
.steps li {
  display: grid; grid-template-columns: 4.6rem 1fr; gap: 0.75rem; align-items: baseline;
  padding: 0.55rem 0; border-top: 1px solid var(--mat-soft);
  font-size: 0.98rem;
}
.steps time { font-variant-numeric: tabular-nums; color: var(--on-mat-soft); font-size: 0.9rem; }
.steps .done { color: var(--on-mat-soft); text-decoration: line-through; text-decoration-color: var(--sparkle); }
.steps .now span { color: var(--gold); font-weight: 700; }

/* Sections */
section { padding-block: 3.5rem; }
h2 {
  font: 850 clamp(1.9rem, 4.6vw, 2.8rem)/1 var(--display);
  font-stretch: 118%;
  letter-spacing: -0.025em;
  margin: 0 0 0.8rem;
  text-wrap: balance;
}
.section-lede { color: var(--muted); max-width: 38rem; margin: 0 0 2rem; }

.features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem 2.5rem; }
.feature h3 { font: 800 1.15rem/1.2 var(--display); font-stretch: 110%; margin: 0 0 0.4rem; }
.feature p { margin: 0; color: var(--muted); }
.feature .tag { display: block; width: 2.2rem; height: 0.35rem; border-radius: 999px; background: var(--gold); margin-bottom: 0.9rem; }
.feature:nth-child(even) .tag { background: var(--sparkle); }

.band { background: var(--mat); color: var(--on-mat); border-radius: 1.6rem; padding: 2.5rem; }
.band .section-lede { color: var(--on-mat-soft); }
.band .code {
  display: inline-block; font: 900 clamp(1.5rem, 7vw, 2rem)/1 var(--display); font-stretch: 115%; white-space: nowrap;
  letter-spacing: 0.06em; color: var(--sparkle); margin: 0.4rem 0 1.4rem;
}
.band ul { margin: 0; padding-left: 1.2rem; display: grid; gap: 0.5rem; color: var(--on-mat-soft); }
.band ul b { color: var(--on-mat); }

.install { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.device { background: var(--paper); border: 1px solid var(--line); border-radius: 1.2rem; padding: 1.5rem; }
.device h3 { font: 800 1.1rem/1.2 var(--display); font-stretch: 110%; margin: 0 0 0.8rem; }
.device ol { margin: 0; padding-left: 1.25rem; display: grid; gap: 0.45rem; }

.promise { display: flex; flex-wrap: wrap; gap: 0.75rem 2rem; padding: 1.4rem 0; border-top: 2px solid var(--mat); border-bottom: 2px solid var(--mat); }
.promise span { font: 800 1.05rem/1.2 var(--display); font-stretch: 112%; }
.promise span::before { content: ''; display: inline-block; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--gold); margin-right: 0.55rem; vertical-align: 0.1em; }

footer { padding-block: 2.5rem 3.5rem; color: var(--muted); font-size: 0.95rem; }
footer .wrap { display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; justify-content: space-between; }
footer nav { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; }
footer a { text-decoration: none; font-weight: 600; color: var(--ink); }
footer a:hover { text-decoration: underline; }

/* For gyms */
.gyms { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2.5rem; align-items: center;
  background: var(--paper); border: 2px solid var(--gold); border-radius: 1.6rem; padding: 2.5rem; }
.gyms .section-lede { margin-bottom: 1.6rem; }
.gym-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem; }
.gym-list li { display: grid; gap: 0.2rem; padding-left: 1.1rem; border-left: 4px solid var(--sparkle); }
.gym-list li:nth-child(even) { border-left-color: var(--gold); }
.gym-list b { font: 800 1.1rem/1.2 var(--display); font-stretch: 110%; }
.gym-list span { color: var(--muted); }

/* Pricing */
.pricing { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; max-width: 44rem; }
.price-card { position: relative; background: var(--paper); border: 2px solid var(--line); border-radius: 1.2rem; padding: 1.5rem; }
.price-card.best { border-color: var(--gold); }
.price-card h3 { font: 800 1.15rem/1.2 var(--display); font-stretch: 110%; margin: 0 0 0.6rem; }
.price { margin: 0; font-size: 1.05rem; color: var(--muted); }
.price b { font: 900 2.4rem/1 var(--display); font-stretch: 115%; color: var(--ink); letter-spacing: -0.02em; }
.price-note { margin: 0.5rem 0 0; color: var(--muted); }
.price-badge { position: absolute; top: -0.8rem; right: 1rem; background: var(--gold); color: var(--mat); font: 800 0.72rem/1 var(--body); letter-spacing: 0.1em; text-transform: uppercase; padding: 0.4rem 0.6rem; border-radius: 0.5rem; }
.fine { color: var(--muted); font-size: 0.95rem; max-width: 44rem; margin: 1.4rem 0; }

/* Privacy page */
.doc { max-width: 44rem; padding-block: 1rem 3rem; }
.doc h1 { font-size: clamp(2.4rem, 7vw, 3.6rem); }
.doc .updated { color: var(--muted); margin: 0.8rem 0 2rem; }
.doc h2 { font-size: clamp(1.4rem, 3.4vw, 1.75rem); margin-top: 2.6rem; }
.doc p, .doc li { max-width: 65ch; }
.doc ul { padding-left: 1.25rem; display: grid; gap: 0.4rem; }
.doc .short { background: var(--paper); border: 1px solid var(--line); border-radius: 1.2rem; padding: 1.25rem 1.5rem; }
.doc .short h2 { margin-top: 0; }
.table-scroll { overflow-x: auto; margin: 1rem 0; }
.doc table { border-collapse: collapse; width: 100%; min-width: 34rem; font-size: 0.95rem; }
.doc th, .doc td { text-align: left; vertical-align: top; padding: 0.65rem 0.75rem; border-bottom: 1px solid var(--line); }
.doc th { font: 700 0.78rem/1.2 var(--body); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }

@media (max-width: 52rem) {
  .hero .wrap { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
  .run { transform: none; }
  .features { grid-template-columns: minmax(0, 1fr); gap: 1.6rem; }
  .install { grid-template-columns: minmax(0, 1fr); }
  .pricing { grid-template-columns: minmax(0, 1fr); gap: 1.4rem; }
  .band { padding: 1.75rem 1.4rem; }
  .gyms { grid-template-columns: minmax(0, 1fr); gap: 1.8rem; padding: 1.75rem 1.4rem; }
}
@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
}