/* ==========================================================================
   Pianeer — marketing & support site
   Hand-authored CSS. No frameworks, no web fonts, no build step.
   The palette is lifted from the app itself: iOS grouped-background grey,
   white cards, the app's blue accent, and the gold used for lesson stars.
   ========================================================================== */

/* --- Tokens --------------------------------------------------------------- */

:root {
  --bg: #eef1f5;
  --bg-2: #e7ebf1;
  --card: #ffffff;
  --card-2: #f7f9fc;

  --ink: #14161a;
  --ink-2: #565961;
  --ink-3: #8b8f98;

  --blue: #0a7cff;
  --blue-ink: #0a6ae0;
  --blue-wash: #e7f1ff;
  --gold: #e9a020;
  --green: #1fa855;
  --violet: #8b5cf6;

  --line: rgba(20, 22, 26, 0.08);
  --line-strong: rgba(20, 22, 26, 0.14);

  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.05);
  --shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 10px 28px rgba(16, 24, 40, 0.07);
  --shadow-lg: 0 2px 6px rgba(16, 24, 40, 0.05), 0 24px 64px rgba(16, 24, 40, 0.14);

  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 22px;

  --serif: ui-serif, "New York", "Iowan Old Style", Palatino, "Palatino Linotype", Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --nav-bg: rgba(238, 241, 245, 0.72);
  --page: 1120px;

  color-scheme: light;
}

/* DARK-THEME (disabled) ------------------------------------------------------
   The site is light-only for now, to match the app, which is itself light-only
   (UIUserInterfaceStyle: Light). The dark palette below is kept, complete and
   working, but gated behind :root[data-theme="dark"] — an attribute nothing
   sets — so it never applies.

   Two ways to bring it back. To follow the reader's OS setting again, delete
   `[data-theme="dark"]` from the three DARK-THEME blocks and restore the dark
   `theme-color` meta tag in each page's <head>. To offer an explicit toggle
   instead, keep the selectors and have a control set data-theme="dark" on
   <html>. Either way, search this file for DARK-THEME to find all three.
   -------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root[data-theme="dark"] {
    /* Derived from the app's falling-notes view: deep navy, not neutral black. */
    --bg: #0a0e18;
    --bg-2: #070a12;
    --card: #141a28;
    --card-2: #1a2130;

    --ink: #f2f4f8;
    --ink-2: #a3aab8;
    --ink-3: #6f7789;

    --blue: #3d9bff;
    --blue-ink: #6bb4ff;
    --blue-wash: #12233c;
    --gold: #f0b040;

    --line: rgba(255, 255, 255, 0.09);
    --line-strong: rgba(255, 255, 255, 0.16);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 10px 28px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 2px 6px rgba(0, 0, 0, 0.4), 0 24px 64px rgba(0, 0, 0, 0.6);

    --nav-bg: rgba(10, 14, 24, 0.72);

    color-scheme: dark;
  }
}

/* --- Reset ---------------------------------------------------------------- */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Deliberately no `overflow-x: hidden` here: it makes <body> a scroll
     container, which silently breaks `position: sticky` on the nav in several
     engines. Anything that would overhang is clipped by its own section
     instead. */
}

/* height:auto matters — every <img> carries width/height attributes so the
   browser can reserve space before the file arrives, and without this the
   attribute height would survive the CSS width and squash the aspect ratio. */
img { max-width: 100%; height: auto; display: block; }
a { color: var(--blue-ink); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { margin: 0; line-height: 1.15; letter-spacing: -0.022em; font-weight: 700; }
p { margin: 0; }

:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
  border-radius: 6px;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--card);
  padding: 12px 18px;
  border-radius: 0 0 var(--radius-sm) 0;
  z-index: 100;
}
.skip:focus { left: 0; }

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

.wrap {
  width: min(100% - 40px, var(--page));
  margin-inline: auto;
}

section { padding: clamp(64px, 9vw, 116px) 0; }
.section-tight { padding: clamp(48px, 6vw, 76px) 0; }

.eyebrow {
  font-size: 13px;
  font-weight: 650;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--blue-ink);
  margin-bottom: 14px;
}

.section-head { max-width: 660px; margin-bottom: clamp(36px, 5vw, 56px); }
.section-head.center { margin-inline: auto; text-align: center; }

h2 { font-size: clamp(30px, 4.2vw, 44px); letter-spacing: -0.03em; }

.lede {
  margin-top: 16px;
  font-size: clamp(17px, 1.5vw, 19px);
  color: var(--ink-2);
  line-height: 1.6;
}

/* Tinted section, used to separate stretches of the support page. */
.band {
  background: var(--card);
  border-block: 1px solid var(--line);
}

/* --- Wordmark ------------------------------------------------------------- */

.wordmark {
  font-family: var(--serif);
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--ink);
}

/* --- Nav ------------------------------------------------------------------ */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--nav-bg);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}
/* --nav-bg is translucent and relies on the blur to stay legible. Without
   backdrop-filter the page would scroll visibly through it, so fall back to an
   opaque bar plus a hairline to keep it separated from the content. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nav { background: var(--bg); border-bottom-color: var(--line); }
}
.nav-inner {
  display: flex;
  align-items: center;
  gap: 28px;
  height: 60px;
}
.nav-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 20px;
  margin-right: auto;
}
.nav-brand:hover { text-decoration: none; }
.nav-brand img { width: 28px; height: 28px; border-radius: 7px; }
.nav-links { display: flex; gap: 26px; align-items: center; }
.nav-links a {
  font-size: 15px;
  font-weight: 500;
  color: var(--ink-2);
}
.nav-links a:hover { color: var(--ink); text-decoration: none; }
.nav-cta { display: flex; }

@media (max-width: 860px) {
  .nav-links { display: none; }
}

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 22px;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-primary {
  background: var(--blue);
  color: #fff;
  box-shadow: 0 1px 2px rgba(10, 124, 255, 0.3), 0 8px 20px rgba(10, 124, 255, 0.22);
}
.btn-primary:hover { background: var(--blue-ink); }

.btn-ghost {
  background: var(--card);
  color: var(--ink);
  border-color: var(--line-strong);
  box-shadow: var(--shadow-sm);
}
.btn-ghost:hover { background: var(--card-2); }

.btn-sm { padding: 8px 16px; font-size: 14px; }

/* App Store button. Swap for Apple's official badge artwork when you have it —
   see README. Until then this is a plain, unbranded link styled to read as a
   store button without imitating Apple's badge. */
.appstore {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 11px 22px 11px 18px;
  border-radius: 14px;
  background: #10131a;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  box-shadow: 0 2px 10px rgba(16, 19, 26, 0.25);
}
.appstore:hover { text-decoration: none; transform: translateY(-1px); box-shadow: 0 6px 22px rgba(16, 19, 26, 0.32); }
.appstore svg { width: 26px; height: 26px; flex: none; fill: #fff; }
.appstore-text { display: flex; flex-direction: column; line-height: 1.15; text-align: left; }
.appstore-text small { font-size: 11px; opacity: 0.72; letter-spacing: 0.02em; }
.appstore-text strong { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }

/* DARK-THEME (disabled) — the badge inverts on a dark ground. */
@media (prefers-color-scheme: dark) {
  :root[data-theme="dark"] .appstore { background: #f2f4f8; color: #10131a; border-color: rgba(0, 0, 0, 0.1); }
  :root[data-theme="dark"] .appstore svg { fill: #10131a; }
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}

.cta-note {
  margin-top: 18px;
  font-size: 14px;
  color: var(--ink-3);
}

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

.hero {
  position: relative;
  padding: clamp(48px, 7vw, 84px) 0 clamp(40px, 6vw, 72px);
  overflow: hidden;
}
/* Soft blue bloom behind the hero, echoing the app icon's gradient. */
.hero::before {
  content: "";
  position: absolute;
  inset: -30% 20% auto -10%;
  height: 620px;
  background: radial-gradient(closest-side, rgba(10, 124, 255, 0.16), transparent 72%);
  pointer-events: none;
}
.hero > * { position: relative; }

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}

.hero-lockup {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 26px;
}
.hero-lockup img {
  width: 72px;
  height: 72px;
  border-radius: 17px;
  box-shadow: var(--shadow);
}
.hero-lockup .wordmark { font-size: 44px; }

h1 {
  font-size: clamp(34px, 5.2vw, 56px);
  letter-spacing: -0.035em;
  line-height: 1.06;
}
.hero-sub {
  margin-top: 20px;
  font-size: clamp(17px, 1.7vw, 20px);
  color: var(--ink-2);
  max-width: 30ch;
}
.hero-cta { margin-top: 32px; }

/* Hero device composition */
.hero-stage {
  position: relative;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  /* The iPad shot is 3:4, so its width is what sets the hero's height. Keep it
     modest or the headline gets pushed off a laptop screen. */
  padding-left: 12%;
}
.hero-stage .ipad { width: 100%; max-width: 420px; }
.hero-stage .iphone {
  position: absolute;
  left: 0;
  bottom: -6%;
  width: 40%;
  max-width: 166px;
}

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-sub { max-width: none; }
  /* Stacked: put the two devices side by side instead of overlapping, so
     neither gets clipped by the narrow column. */
  .hero-stage {
    padding-left: 0;
    justify-content: center;
    align-items: flex-end;
    gap: 4%;
    margin-top: 16px;
  }
  .hero-stage .ipad { width: 58%; max-width: 380px; }
  .hero-stage .iphone { position: static; width: 26%; max-width: 150px; }
}

/* --- Device frames -------------------------------------------------------- */

.device { position: relative; }

.device-iphone {
  border-radius: 13.5% / 6.5%;
  padding: 5px;
  background: linear-gradient(160deg, #3a3f4a, #15181e 42%, #2b2f38);
  box-shadow: var(--shadow-lg);
}
.device-iphone img {
  border-radius: 11.5% / 5.5%;
  width: 100%;
}

.device-ipad {
  border-radius: 3.4%/2.6%;
  padding: 5px;
  background: linear-gradient(160deg, #3a3f4a, #15181e 42%, #2b2f38);
  box-shadow: var(--shadow-lg);
}
.device-ipad img { border-radius: 2.2%/1.7%; width: 100%; }

/* --- Spec list ------------------------------------------------------------
   What's inside, as a spec sheet rather than eight cards: hairline rules
   instead of eight borders and shadows, so the section reads as one list and
   the eye can run down it. */

.specs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  column-gap: clamp(28px, 4vw, 56px);
  margin: 0;
}
.spec {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  padding: 15px 0;
  border-top: 1px solid var(--line);
}
.spec > svg { width: 21px; height: 21px; color: var(--blue); margin-top: 2px; }
.spec dt { font-weight: 600; font-size: 16.5px; letter-spacing: -0.012em; }
.spec dd { margin: 2px 0 0; color: var(--ink-2); font-size: 15.5px; line-height: 1.5; }

/* --- Price ----------------------------------------------------------------
   One block, not a pair of competing plan cards: the free tier is described in
   the section lede, so all this has to carry is what paying adds. */

.pro {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(26px, 3.4vw, 38px);
  box-shadow: var(--shadow-sm);
  max-width: 820px;
}
.pro-head {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 32px;
  align-items: baseline;
  justify-content: space-between;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--line);
}
.pro-head h3 { font-size: 21px; }
.pro-head p { color: var(--ink-2); font-size: 15.5px; margin-top: 6px; }
.pro-price {
  font-size: 36px;
  font-weight: 700;
  letter-spacing: -0.035em;
  color: var(--ink);
  white-space: nowrap;
}
.pro-price span {
  font-size: 15px;
  font-weight: 500;
  color: var(--ink-3);
  letter-spacing: 0;
  margin-left: 8px;
}
.pro-list {
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 10px 32px;
}
.pro-list li {
  position: relative;
  padding-left: 26px;
  font-size: 15.5px;
  color: var(--ink-2);
}
/* A drawn tick rather than an inline SVG on every row. */
.pro-list li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 6px;
  width: 6px;
  height: 11px;
  border-right: 2px solid var(--blue);
  border-bottom: 2px solid var(--blue);
  transform: rotate(45deg);
}

/* --- Screenshot gallery --------------------------------------------------- */

/* Device switch. Two radios drive it, so the strips swap with no JavaScript
   and the control stays keyboard-operable (arrow keys, as radios should be).
   Shaped like the segmented controls the app itself uses. */
.seg-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.seg {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border-radius: 11px;
  background: rgba(20, 22, 26, 0.06);
  margin-bottom: 22px;
}
/* DARK-THEME (disabled) — the track needs to lighten, not darken. */
@media (prefers-color-scheme: dark) {
  :root[data-theme="dark"] .seg { background: rgba(255, 255, 255, 0.08); }
}
.seg label {
  padding: 6px 20px;
  border-radius: 8px;
  font-size: 14.5px;
  font-weight: 550;
  color: var(--ink-2);
  cursor: pointer;
  user-select: none;
  transition: background 0.15s ease, color 0.15s ease;
}
.seg label:hover { color: var(--ink); }

/* The selected tab, and the strip that goes with it. */
#seg-iphone:checked ~ .wrap .seg label[for="seg-iphone"],
#seg-ipad:checked ~ .wrap .seg label[for="seg-ipad"] {
  background: var(--card);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}
#seg-iphone:checked ~ .gallery-ipad,
#seg-ipad:checked ~ .gallery-iphone { display: none; }

/* The real input is off-screen, so its focus ring has to be drawn on the
   label the reader can actually see. */
.seg-input:focus-visible ~ .wrap .seg label[for="seg-iphone"],
.seg-input:focus-visible ~ .wrap .seg label[for="seg-ipad"] { outline: 2px solid var(--blue); outline-offset: 2px; }
.seg-input#seg-ipad:focus-visible ~ .wrap .seg label[for="seg-iphone"],
.seg-input#seg-iphone:focus-visible ~ .wrap .seg label[for="seg-ipad"] { outline: none; }

.gallery {
  display: flex;
  gap: 22px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 8px 0 28px;
  /* Full-bleed: this sits outside .wrap, so it is already the page's full
     width. The inline padding recreates the .wrap gutter on the first and last
     card while letting the strip run to both edges. */
  padding-inline: max(20px, calc((100% - var(--page)) / 2));
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
}
.gallery::-webkit-scrollbar { height: 8px; }
.gallery::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 999px; }
.gallery::-webkit-scrollbar-track { background: transparent; }

.shot {
  flex: 0 0 auto;
  scroll-snap-align: center;
}
/* Phones and tablets have different aspect ratios, so size every shot by
   HEIGHT rather than width. The frames then differ in width, as the real
   devices do, and the captions still line up along one row. */
.gallery .device img {
  height: 470px;
  width: auto;
  max-width: none;
}
.shot figcaption {
  margin-top: 14px;
  font-size: 14px;
  color: var(--ink-2);
  text-align: center;
}

/* --- Closing section (support page) -------------------------------------- */

.final {
  text-align: center;
  background:
    radial-gradient(closest-side at 50% 0%, rgba(10, 124, 255, 0.14), transparent 70%),
    var(--bg-2);
  border-top: 1px solid var(--line);
}
.final .cta-row { justify-content: center; }

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

footer {
  background: var(--bg-2);
  border-top: 1px solid var(--line);
  padding: 48px 0 56px;
  font-size: 14.5px;
  color: var(--ink-3);
}
.footer-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 40px;
  align-items: center;
  justify-content: space-between;
}
.footer-links { display: flex; flex-wrap: wrap; gap: 22px; }
.footer-links a { color: var(--ink-2); }
.footer-brand { display: flex; align-items: center; gap: 10px; }
.footer-brand img { width: 26px; height: 26px; border-radius: 7px; }
.footer-brand .wordmark { font-size: 19px; }
.footer-privacy {
  flex-basis: 100%;
  margin-top: 4px;
  color: var(--ink-2);
  line-height: 1.6;
}
.footer-legal { flex-basis: 100%; margin-top: 4px; line-height: 1.6; }

/* --- Sub-page (support / privacy) ---------------------------------------- */

.page-hero {
  padding: clamp(48px, 7vw, 84px) 0 clamp(28px, 4vw, 44px);
}
.page-hero h1 { font-size: clamp(32px, 4.6vw, 46px); }
.page-hero .lede { max-width: 62ch; }
.page-meta { margin-top: 18px; font-size: 14px; color: var(--ink-3); }

.prose { max-width: 68ch; }
.prose h2 {
  font-size: clamp(23px, 2.4vw, 28px);
  margin-top: 48px;
  margin-bottom: 14px;
  scroll-margin-top: 80px;
}
.prose h3 { font-size: 18.5px; margin-top: 30px; margin-bottom: 8px; }
.prose p,
.prose li { color: var(--ink-2); font-size: 16.5px; line-height: 1.7; }
.prose p + p { margin-top: 14px; }
.prose ul, .prose ol { margin: 14px 0; padding-left: 22px; display: grid; gap: 8px; }
.prose strong { color: var(--ink); font-weight: 600; }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 44px 0; }
.prose code {
  font-family: var(--mono);
  font-size: 0.88em;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 1px 6px;
}

/* FAQ */
.faq { display: grid; gap: 12px; max-width: 820px; }
details.qa {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
details.qa > summary {
  cursor: pointer;
  list-style: none;
  padding: 18px 54px 18px 22px;
  font-weight: 600;
  font-size: 16.5px;
  letter-spacing: -0.012em;
  position: relative;
}
details.qa > summary::-webkit-details-marker { display: none; }
details.qa > summary::after {
  content: "";
  position: absolute;
  right: 22px;
  top: 50%;
  width: 9px;
  height: 9px;
  margin-top: -6px;
  border-right: 2px solid var(--ink-3);
  border-bottom: 2px solid var(--ink-3);
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}
details.qa[open] > summary::after { transform: rotate(-135deg); margin-top: -2px; }
details.qa > summary:hover { background: var(--card-2); }
.qa-body { padding: 0 22px 20px; }
.qa-body p, .qa-body li { color: var(--ink-2); font-size: 16px; line-height: 1.65; }
.qa-body p + p { margin-top: 12px; }
.qa-body ul, .qa-body ol { margin: 12px 0 0; padding-left: 20px; display: grid; gap: 7px; }