/*
 * Guitar Harmony Finder — website
 *
 * Tokens are the app's own, from guitarharmonyfinder-app/src/theme.ts:
 *   yellow = melody, blue = harmony. That pairing is the identity; keep it.
 *
 * No grey text tier, same rule as the app: secondary text is off-white and
 * steps back through size and weight, not through dimming.
 */

/* Self-hosted, so no visitor's IP goes to Google and nothing blocks on a
   third-party stylesheet. Latin subsets of the variable fonts (OFL), from
   Google Fonts. The two files are preloaded from each page's <head>. */
@font-face {
  font-family: 'JetBrains Mono';
  src: url('/fonts/jetbrains-mono-latin.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Space Grotesk';
  src: url('/fonts/space-grotesk-latin.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg:          #0f0f0e;
  --surface:     #0a0a0a;
  --raised:      #1b1b19;
  --border:      #31302d;

  --melody:      #fffb1d;
  --melody-on:   #191a06;
  --harmony:     #65bfff;
  --harmony-on:  #041e33;

  --ink:         #f1f1f0;
  --muted:       #d9d8d6;

  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --wrap: 1120px;
  --gutter: clamp(16px, 4vw, 40px);
  color-scheme: dark;
}

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

html { scroll-behavior: smooth; scroll-padding-top: 88px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.0625rem;   /* 17px at the default, and follows the reader's own setting */
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
/* <picture> only picks the file; the <img> inside does the layout. */
picture { display: contents; }

a { color: var(--melody); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible {
  outline: 2px solid var(--melody);
  outline-offset: 3px;
  border-radius: 4px;
}

/* viewport-fit=cover lets the page run under the notch in landscape, so the
   gutter grows to the safe area where there is one. */
.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
}

.skip-nav {
  position: absolute;
  left: -9999px;
  top: 8px;
  z-index: 200;
  background: var(--melody);
  color: var(--melody-on);
  padding: 8px 14px;
  border-radius: 8px;
  font-family: var(--mono);
  font-weight: 700;
}
.skip-nav:focus { left: max(8px, env(safe-area-inset-left, 0px)); }

/* ── Labels: the app's SCALE / MELODY / HARMONY style ─────────────── */

.label {
  font-family: var(--mono);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 16px;
}
.label.is-harmony { color: var(--harmony); }

.melody  { color: var(--melody); }
.harmony { color: var(--harmony); }

/* A button's name in the app, as printed on it: PLAY, SAVE. */
.ui-name {
  font-family: var(--mono);
  font-size: 0.9em;
  font-weight: 700;
  color: var(--ink);
}

/* ── Header ───────────────────────────────────────────────────────── */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(15, 15, 14, 0.88);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 68px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--melody);
  font-family: var(--mono);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.brand img { width: 48px; height: 36px; }

.site-nav {
  display: flex;
  align-items: center;
  gap: 28px;
}
.site-nav a {
  font-family: var(--mono);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
}
.site-nav a:hover { color: var(--melody); }

.site-nav a.cta {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  background: var(--melody);
  color: var(--melody-on);
  font-family: var(--mono);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 999px;
  padding: 9px 18px;
}
.site-nav a.cta:hover { color: var(--melody-on); background: #feff8e; }

@media (max-width: 760px) {
  .site-nav a:not(.cta) { display: none; }
  .brand span { font-size: 0.92rem; }
}
/* Below this the name and the button no longer fit on one line. The name
   stays in the accessibility tree, so the logo link keeps its label. */
@media (max-width: 460px) {
  .brand span {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
}

/* ── Phone frame ──────────────────────────────────────────────────── */

.phone {
  width: 100%;
  max-width: 300px;
  margin-inline: auto;
  border-radius: 46px;
  padding: 9px;
  background: #1b1b19;
  box-shadow:
    0 0 0 1px var(--border),
    0 30px 80px -20px rgba(0, 0, 0, 0.9);
}
/* The frame takes its height from the screenshot, so nothing is cropped. */
.phone img {
  width: 100%;
  height: auto;
  border-radius: 38px;
}

/* ── Hero ─────────────────────────────────────────────────────────── */

.hero .wrap {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(32px, 6vw, 80px);
  align-items: center;
  padding-block: clamp(48px, 9vw, 112px);
}

.hero h1 {
  font-family: var(--mono);
  font-weight: 700;
  font-size: clamp(2.3rem, 5.4vw, 4.1rem);
  line-height: 1.06;
  letter-spacing: -0.035em;
  margin: 0 0 24px;
}

.lede {
  font-size: clamp(1.1rem, 1.8vw, 1.3rem);
  line-height: 1.55;
  color: var(--muted);
  max-width: 34em;
  margin: 0 0 32px;
}

.store-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
}
.store-badge { display: inline-block; }
.store-badge img { width: 180px; height: 60px; }

.fine {
  font-family: var(--mono);
  font-size: 0.82rem;
  line-height: 1.7;
  color: var(--muted);
  margin: 0;
}

.voices {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
  font-family: var(--mono);
  font-size: 0.85rem;
}
.voices li { display: flex; align-items: center; gap: 10px; }
.dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  flex-shrink: 0;
}
.dot.is-melody  { background: var(--melody); }
.dot.is-harmony { background: var(--harmony); }

@media (max-width: 860px) {
  .hero .wrap { grid-template-columns: 1fr; }
  .hero .phone { max-width: 270px; }
}

/* ── Sections ─────────────────────────────────────────────────────── */

.section { padding-block: clamp(64px, 10vw, 120px); }

.section-head { max-width: 40em; margin-bottom: clamp(40px, 6vw, 72px); }
.section-head h2 {
  font-family: var(--mono);
  font-weight: 700;
  font-size: clamp(1.8rem, 3.6vw, 2.6rem);
  line-height: 1.15;
  letter-spacing: -0.03em;
  margin: 0 0 16px;
}
.section-head p { color: var(--muted); margin: 0; font-size: 1.1rem; }

/* ── How it works ─────────────────────────────────────────────────── */

.steps { list-style: none; margin: 0; padding: 0; }

.step {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 6vw, 88px);
  align-items: center;
}
.step + .step { margin-top: clamp(64px, 10vw, 128px); }
.step:nth-child(even) .step-text { order: 2; }

.step-text { max-width: 30em; }
.step:nth-child(odd) .step-text { justify-self: end; }

/* Visuals sit against the text, not centred in their column. */
.step .phone, .step .detail { margin-inline: 0; }
.step:nth-child(odd)  .phone, .step:nth-child(odd)  .detail { justify-self: start; }
.step:nth-child(even) .phone, .step:nth-child(even) .detail { justify-self: end; }

/* Step 1 shows the necks up close, cut from the same shot the hero shows whole.
   The crop is the fretboard region of the 660×1434 image: y 165–905. */
.detail {
  width: 100%;
  max-width: 440px;
  aspect-ratio: 660 / 740;
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.9);
}
.detail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 0 23.8%;
}

.step-num {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--melody);
  color: var(--melody-on);
  font-family: var(--mono);
  font-weight: 700;
  font-size: 1.05rem;
  margin-bottom: 20px;
}

.step h3 {
  font-family: var(--sans);
  font-weight: 600;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 0 0 14px;
}
.step p { margin: 0 0 14px; color: var(--muted); }
.step p:last-child { margin-bottom: 0; }

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}
.chips li {
  font-family: var(--mono);
  font-size: 0.82rem;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--raised);
}
.chips li.is-on {
  background: var(--harmony);
  border-color: var(--harmony);
  color: var(--harmony-on);
  font-weight: 700;
}

@media (max-width: 760px) {
  .step { grid-template-columns: 1fr; }
  .step:nth-child(even) .step-text { order: 0; }
  .step:nth-child(odd) .step-text { justify-self: start; }
  .step .phone { max-width: 260px; }
  .step:nth-child(n) .phone, .step:nth-child(n) .detail { justify-self: center; }
}

/* ── Features ─────────────────────────────────────────────────────── */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.card {
  background: var(--raised);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 26px 26px 28px;
}
/* Material Symbols (Rounded, filled, weight 400, Apache 2.0), inlined as SVG so
   nothing loads from Google. The icons take turns in the two voices, so the
   grid reads as melody and harmony side by side. */
.card-icon {
  display: block;
  width: 48px;
  height: 48px;
  padding: 11px;
  margin-bottom: 20px;
  border-radius: 14px;
  fill: currentColor;
  color: var(--melody);
  background: rgba(255, 251, 29, 0.09);
}
.card:nth-child(even) .card-icon {
  color: var(--harmony);
  background: rgba(101, 191, 255, 0.12);
}
.card h3 {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 1.2rem;
  margin: 0 0 8px;
}
.card p { margin: 0; color: var(--muted); font-size: 1rem; }

/* ── Get the app ──────────────────────────────────────────────────── */

.get {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(24px, 5vw, 56px);
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 28px;
  padding: clamp(28px, 5vw, 56px);
}
.get img.mascot { width: clamp(120px, 18vw, 200px); height: auto; }
.get h2 {
  font-family: var(--mono);
  font-weight: 700;
  font-size: clamp(1.6rem, 3.2vw, 2.3rem);
  letter-spacing: -0.03em;
  line-height: 1.15;
  margin: 0 0 12px;
}
.get p { color: var(--muted); margin: 0 0 24px; }

@media (max-width: 640px) {
  .get { grid-template-columns: 1fr; }
}

/* ── Questions and support: short headed blocks in a grid ────────── */

.faq,
.support {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 32px 48px;
}
.faq h3,
.support h3 {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 1.15rem;
  line-height: 1.35;
  margin: 0 0 8px;
}
.faq p,
.support p { margin: 0; color: var(--muted); }

/* ── Document pages (privacy, 404) ────────────────────────────────── */

.doc {
  max-width: 44em;
  margin: 0 auto;
  padding: clamp(48px, 8vw, 96px) var(--gutter) clamp(64px, 10vw, 120px);
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
}
.doc h1 {
  font-family: var(--mono);
  font-weight: 700;
  font-size: clamp(2rem, 4.5vw, 3rem);
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin: 0 0 12px;
  color: var(--melody);
}
.doc .meta {
  font-family: var(--mono);
  font-size: 0.85rem;
  color: var(--muted);
  margin: 0 0 48px;
}
.doc h2 {
  font-family: var(--mono);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 48px 0 12px;
}
.doc p, .doc li { color: var(--ink); }
.doc ul { padding-left: 1.2em; }
.doc li + li { margin-top: 6px; }

/* The app's SCALE  D major readout, four times over: label, then the value. */
.readout {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  margin: 36px 0;
  padding: 24px 0;
  border-block: 1px solid var(--border);
}
.readout dt {
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.5;
  color: var(--muted);
  min-height: 3em;
}
.readout dd {
  margin: 6px 0 0;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 1.6rem;
  letter-spacing: -0.02em;
  color: var(--melody);
}

@media (max-width: 640px) {
  .readout { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── Footer ───────────────────────────────────────────────────────── */

.site-footer {
  border-top: 1px solid var(--border);
  padding-block: 28px calc(28px + env(safe-area-inset-bottom, 0px));
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--muted);
}
.site-footer .wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px 24px;
}
.site-footer nav { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.site-footer a { color: var(--muted); text-decoration: none; }
/* The copyright link sits inside a sentence, so it needs its underline to read as a link. */
.site-footer .copy a { text-decoration: underline; }
.site-footer a:hover { color: var(--melody); }

/* ── Forced colours (Windows high contrast) ───────────────────────── */

/* The colour key and step numbers carry meaning in their colour; keep it. */
@media (forced-colors: active) {
  .dot, .step-num { forced-color-adjust: none; }
  .chips li.is-on { outline: 2px solid CanvasText; }
}