/* Clefmap — the page is built on a stave.
   Structural rules are five-line groups, ornaments are real SMuFL glyphs from
   Bravura (the same font the app engraves with), and every screenshot is the
   actual product. Nothing here is decorative for its own sake. */

@font-face {
  font-family: "Bravura";
  src: url("assets/Bravura.otf") format("opentype");
  font-display: swap;
}

@import url("https://api.fontshare.com/v2/css?f[]=cabinet-grotesk@800,700,500&f[]=switzer@400,500,600&display=swap");

:root {
  /* Ivory paper and warm ink, tinted toward the teal so nothing is a dead neutral. */
  --paper:      oklch(97.2% 0.008 160);
  --paper-deep: oklch(94.4% 0.012 160);
  --ink:        oklch(21% 0.018 220);
  --ink-soft:   oklch(46% 0.014 220);
  --rule:       oklch(78% 0.012 200);

  /* Committed: the teal carries whole sections, matching the app icon. */
  --teal:       oklch(58% 0.115 196);
  --teal-deep:  oklch(43% 0.098 216);
  --teal-lift:  oklch(72% 0.105 186);

  --stave-gap: 11px;

  --step--1: clamp(0.82rem, 0.79rem + 0.14vw, 0.9rem);
  --step-0:  clamp(1.02rem, 0.97rem + 0.24vw, 1.16rem);
  --step-1:  clamp(1.35rem, 1.22rem + 0.62vw, 1.75rem);
  --step-2:  clamp(1.85rem, 1.55rem + 1.45vw, 2.9rem);
  --step-3:  clamp(2.6rem, 1.9rem + 3.4vw, 5.2rem);
  --step-4:  clamp(3rem, 1.9rem + 5.2vw, 6.4rem);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Switzer", ui-sans-serif, system-ui, sans-serif;
  font-size: var(--step-0);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: "Cabinet Grotesk", ui-sans-serif, system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 0.98;
  margin: 0;
  text-wrap: balance;
}

a { color: inherit; }

.wrap { width: min(1180px, 100% - 2.5rem); margin-inline: auto; }
.narrow { width: min(68ch, 100% - 2.5rem); margin-inline: auto; }

/* ── The stave: five ruled lines used as real structure ───────────────── */
.stave {
  /* Five explicit 1px layers. A repeating gradient antialiases into extra rules
     at fractional pixel heights, which is how a stave ends up with seven lines. */
  height: calc(var(--stave-gap) * 4 + 1px);
  background-image:
    linear-gradient(var(--rule), var(--rule)),
    linear-gradient(var(--rule), var(--rule)),
    linear-gradient(var(--rule), var(--rule)),
    linear-gradient(var(--rule), var(--rule)),
    linear-gradient(var(--rule), var(--rule));
  background-size: 100% 1px;
  background-repeat: no-repeat;
  background-position:
    0 0,
    0 var(--stave-gap),
    0 calc(var(--stave-gap) * 2),
    0 calc(var(--stave-gap) * 3),
    0 calc(var(--stave-gap) * 4);
  opacity: 0.7;
}
.stave--tight { --stave-gap: 8px; }

.glyph {
  font-family: "Bravura";
  line-height: 1;
  display: inline-block;
  color: var(--teal-deep);
}

/* ── Masthead ─────────────────────────────────────────────────────────── */
.masthead {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 1.6rem 0 1.2rem;
}
.brand { display: flex; align-items: center; gap: 0.65rem; font-weight: 600; letter-spacing: -0.02em; }
.brand img { width: 34px; height: 34px; border-radius: 9px; display: block; }

.btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: var(--ink); color: var(--paper);
  padding: 0.72rem 1.15rem; border-radius: 8px;
  font-weight: 600; font-size: var(--step--1);
  text-decoration: none; border: 0; cursor: pointer;
  transition: transform 320ms cubic-bezier(0.22,1,0.36,1), background 320ms;
}
.btn:hover { transform: translateY(-2px); background: var(--teal-deep); }
.btn--ghost { background: transparent; color: var(--ink); border: 1px solid var(--rule); }
.btn--ghost:hover { background: var(--paper-deep); color: var(--ink); }
.btn--light { background: var(--paper); color: var(--teal-deep); }
.btn--light:hover { background: #fff; color: var(--teal-deep); }

/* ── Hero: asymmetric, type-led, the note sits ON the stave ───────────── */
.hero { padding: clamp(2.5rem, 6vw, 6rem) 0 clamp(3rem, 7vw, 7rem); }
.hero__grid {
  display: grid; gap: clamp(2rem, 5vw, 4.5rem);
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  align-items: end;
}
@media (max-width: 900px) { .hero__grid { grid-template-columns: 1fr; } }

.hero h1 { font-size: var(--step-4); }
.hero h1 em {
  font-style: normal;
  color: var(--teal-deep);
}
.hero__lede {
  font-size: var(--step-1);
  color: var(--ink-soft);
  max-width: 34ch;
  margin: 1.6rem 0 2.2rem;
  line-height: 1.4;
}
.hero__cta { display: flex; flex-wrap: wrap; gap: 0.7rem; align-items: center; }
.hero__note {
  font-size: var(--step--1); color: var(--ink-soft); margin-top: 1rem;
}

.hero__shot { position: relative; justify-self: end; max-width: 330px; }
.hero__shot img {
  width: 100%; height: auto; display: block;
  border-radius: 22px;
  border: 1px solid oklch(84% 0.008 200);
  box-shadow: 0 2px 4px oklch(21% 0.02 220 / 0.06),
              0 22px 54px oklch(21% 0.02 220 / 0.13);
}

/* ── Numbered proof strip, not a card grid ────────────────────────────── */
.proof {
  background: var(--ink); color: var(--paper);
  padding: clamp(2.6rem, 5vw, 4.4rem) 0;
}
.proof__row {
  display: grid; gap: clamp(1.6rem, 4vw, 3.4rem);
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.proof dt {
  font-family: "Cabinet Grotesk", sans-serif; font-weight: 800;
  font-size: var(--step-2); color: var(--teal-lift);
  letter-spacing: -0.03em; line-height: 1;
}
.proof dd { margin: 0.5rem 0 0; color: oklch(88% 0.01 200); font-size: var(--step--1); line-height: 1.5; }

/* ── Feature sections: alternating, each its own fold ─────────────────── */
.feature { padding: clamp(3.5rem, 8vw, 7.5rem) 0; }
.feature__grid {
  display: grid; gap: clamp(2rem, 5vw, 5rem);
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.78fr);
  align-items: center;
}
.feature--flip .feature__grid { grid-template-columns: minmax(0, 0.78fr) minmax(0, 1fr); }
.feature--flip .feature__copy { order: 2; }
@media (max-width: 880px) {
  .feature__grid, .feature--flip .feature__grid { grid-template-columns: 1fr; }
  .feature--flip .feature__copy { order: 0; }
}

.feature h2 { font-size: var(--step-2); margin-bottom: 1rem; }
.feature p { color: var(--ink-soft); max-width: 46ch; }
.feature img {
  width: 100%; max-width: 296px; height: auto; display: block;
  border-radius: 20px;
  border: 1px solid oklch(84% 0.008 200);
  box-shadow: 0 2px 4px oklch(21% 0.02 220 / 0.06),
              0 18px 42px oklch(21% 0.02 220 / 0.12);
}
.feature__media { display: flex; justify-content: center; }

.kicker {
  font-size: var(--step--1); font-weight: 600; color: var(--teal-deep);
  display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.9rem;
}

/* ── Price: drenched teal, the one loud fold ──────────────────────────── */
.price {
  background: linear-gradient(168deg, var(--teal) 0%, var(--teal-deep) 100%);
  color: var(--paper);
  padding: clamp(3.5rem, 8vw, 7rem) 0;
  text-align: center;
}
.price h2 { font-size: var(--step-3); }
.price__amount {
  font-family: "Cabinet Grotesk", sans-serif; font-weight: 800;
  font-size: var(--step-4); letter-spacing: -0.045em; line-height: 1;
  margin: 1.2rem 0 0.3rem;
}
.price__sub { font-size: var(--step-1); opacity: 0.92; margin: 0 0 2rem; }
.price ul {
  list-style: none; padding: 0; margin: 0 auto 2.4rem;
  max-width: 30rem; text-align: left; display: grid; gap: 0.6rem;
}
.price li { display: flex; gap: 0.7rem; align-items: baseline; opacity: 0.95; }
.price li::before { content: "♩"; font-family: "Bravura"; opacity: 0.7; }

/* ── Footer ───────────────────────────────────────────────────────────── */
.foot { padding: 3rem 0 4rem; font-size: var(--step--1); color: var(--ink-soft); }
.foot__row { display: flex; flex-wrap: wrap; gap: 1.4rem; justify-content: space-between; align-items: center; }
.foot nav { display: flex; gap: 1.4rem; flex-wrap: wrap; }
.foot a { text-decoration: none; }
.foot a:hover { color: var(--teal-deep); text-decoration: underline; text-underline-offset: 3px; }

/* ── Long-form (privacy) ──────────────────────────────────────────────── */
.doc { padding: clamp(2.5rem, 6vw, 5rem) 0 5rem; }
.doc h1 { font-size: var(--step-3); margin-bottom: 0.6rem; }
.doc__meta { color: var(--ink-soft); font-size: var(--step--1); margin-bottom: 2.6rem; }
.doc h2 {
  font-size: var(--step-1); margin: 2.8rem 0 0.7rem;
  padding-top: 1.4rem; border-top: 1px solid var(--rule);
}
.doc p, .doc li { color: var(--ink-soft); }
.doc ul { padding-left: 1.1rem; }
.doc li { margin-bottom: 0.4rem; }
.doc strong { color: var(--ink); font-weight: 600; }
.doc__lede { font-size: var(--step-1); color: var(--ink); line-height: 1.45; }

/* Entrance: one orchestrated reveal, not scattered micro-interactions. */
@media (prefers-reduced-motion: no-preference) {
  .rise { opacity: 0; transform: translateY(14px); animation: rise 900ms cubic-bezier(0.16,1,0.3,1) forwards; }
  .rise:nth-child(2) { animation-delay: 90ms; }
  .rise:nth-child(3) { animation-delay: 170ms; }
  @keyframes rise { to { opacity: 1; transform: none; } }
}