/*
 * Guitar Mode Finder — the app pages (/app/ and /app/privacy/)
 *
 * These two pages sell and explain the iPhone app, so they wear the app's own design
 * rather than the rest of the site's: the tokens below are the app's, from
 * guitarmodefinder-app/src/data/theme.ts. Layout follows the sister app's site,
 * guitarharmonyfinder.com (guitar-harmony-finder/public/css/site.css), so the two read
 * as a pair.
 *
 * Orange is the app's accent and its root note. The fretboard key — root, characteristic,
 * pentatonic, scale tone — is the other identity; keep both.
 *
 * 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). Both 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:          #181613;
  --surface:     #110f0d;
  --raised:      #1d1a16;
  --border:      #312d27;

  --accent:      #ef8f33;
  --accent-deep: #d1731f;
  --accent-on:   #2a1804;
  --pent:        #d2c1a0;
  --tone:        #322d27;

  --ink:         #f4f1ea;
  --muted:       #e7e1d6;

  --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(--accent); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible {
  outline: 2px solid var(--accent);
  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(--accent);
  color: var(--accent-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 INPUT — CHORD PROGRESSION 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;
}

.accent { color: var(--accent); }

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

/* A chord progression, as typed into the app. */
.chords {
  font-family: var(--mono);
  font-size: 0.95em;
  color: var(--accent);
  white-space: nowrap;
}

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

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(24, 22, 19, 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(--accent);
  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,
.site-nav a[aria-current="page"] { color: var(--accent); }

/* The app's ANALYZE button: the accent run into its deeper shade. */
.site-nav a.cta {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  background: linear-gradient(180deg, var(--accent), var(--accent-deep));
  color: var(--accent-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(--accent-on); background: var(--accent); }

@media (max-width: 860px) {
  .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: var(--raised);
  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;
  /* Capped so "Type the chords." holds one line beside the phone on a desktop. */
  font-size: clamp(2.3rem, 5vw, 3.5rem);
  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;
}

/* The fretboard's colour key, as the app draws it. */
.key {
  display: grid;
  grid-template-columns: repeat(2, max-content);
  gap: 12px 32px;
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
  font-family: var(--mono);
  font-size: 0.85rem;
}
.key li { display: flex; align-items: center; gap: 10px; }
.dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  flex-shrink: 0;
}
.dot.is-root  { background: var(--accent); }
.dot.is-char  { border: 2px solid var(--accent); }
.dot.is-pent  { background: var(--pent); }
/* The app's scale-tone fill is close to the page; the rim keeps the dot visible. */
.dot.is-tone  { background: var(--tone); box-shadow: inset 0 0 0 1px #4a443b; }

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

/* ── 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 result up close, cut from the same shot the hero shows whole.
   The crop runs from just above the input label to the parent scale row of the
   660×1434 image: y 205–1035, so the position is 205 / (1434 − 830) = 33.9%. */
.detail {
  width: 100%;
  max-width: 440px;
  aspect-ratio: 660 / 830;
  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 33.9%;
}

.step-num {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--accent), var(--accent-deep));
  color: var(--accent-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; }

/* Mode names as the app prints them in a result: one per chip. */
.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(--accent);
  border-color: var(--accent);
  color: var(--accent-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;
}
/* The first four are the app's own tab icons, drawn as it draws them; the last two are
   Material Symbols (Rounded, filled, Apache 2.0), inlined so nothing loads from Google.
   They take turns in orange and the pentatonic sand, like the dots on the neck. */
.card-icon {
  display: block;
  width: 48px;
  height: 48px;
  padding: 12px;
  margin-bottom: 20px;
  border-radius: 14px;
  color: var(--accent);
  background: rgba(239, 143, 51, 0.12);
}
.card-icon .fill { fill: currentColor; }
.card-icon .line { fill: none; stroke: currentColor; }
.card:nth-child(even) .card-icon {
  color: var(--pent);
  background: rgba(210, 193, 160, 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 page (privacy) ──────────────────────────────────────── */

.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(--accent);
}
.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 DETECTED MODE card, 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(--accent);
}

@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(--accent); }

/* ── 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; }
}