/* FretPro marketing site
 * Brand: Signal Red / Ink / Cream surfaces, Hubot Sans (width carries hierarchy).
 * Surfaces are the generated SVG textures from brand/textures.
 */

:root {
  --red: #FB5447;
  --accent: #E94948;
  --ink: #1A1A1A;
  --paper: #FEF4E5;
  --cream: #FDF5EE;
  --green: #74E599;
  --green-deep: #2FA85E;
  --tan: #D9C7A8;
  --ink-60: rgba(26, 26, 26, .62);
  --ink-40: rgba(26, 26, 26, .42);
  --ink-15: rgba(26, 26, 26, .15);
  --cream-70: rgba(253, 245, 238, .72);
  --cream-40: rgba(253, 245, 238, .42);
  --cream-15: rgba(253, 245, 238, .15);
  --tile: 400px;
  --gutter: clamp(20px, 5vw, 64px);
  --measure: 1180px;
  --radius: 6px;
}

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

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

body {
  margin: 0;
  background: var(--ink);
  color: var(--ink);
  font-family: "Hubot Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-variation-settings: "wdth" 100;
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button, input { font: inherit; }

/* ---------- Surfaces ---------- */

.bg-red {
  background-color: var(--red);
  background-image:
    radial-gradient(ellipse 60% 55% at 50% 50%, rgb(255 212 204), #fff 100%),
    url("/textures/fretpro-bg-red.svg");
  background-size: 100% 100%, var(--tile) var(--tile);
  background-blend-mode: multiply, normal;
  color: var(--ink);
}

.bg-ink {
  background-color: var(--ink);
  background-image:
    radial-gradient(ellipse 75% 65% at 50% 45%, rgb(255 255 255 / 0) 35%, rgb(255 255 255 / .07) 100%),
    url("/textures/fretpro-bg-ink.svg");
  background-size: 100% 100%, var(--tile) var(--tile);
  color: var(--cream);
}

.bg-cream {
  background-color: var(--paper);
  background-image:
    linear-gradient(35deg, rgb(150 110 60 / .08), rgb(150 110 60 / 0) 45%),
    url("/textures/fretpro-bg-cream.svg");
  background-size: 100% 100%, var(--tile) var(--tile);
  color: var(--ink);
}

/* ---------- Type roles ---------- */

.display {
  font-weight: 700;
  font-variation-settings: "wdth" 125;
  letter-spacing: -.02em;
  line-height: 1;
  margin: 0;
}

.eyebrow {
  font-size: 12px;
  font-weight: 700;
  font-variation-settings: "wdth" 80;
  text-transform: uppercase;
  letter-spacing: .16em;
  margin: 0 0 16px;
}

.script {
  font-family: "Caveat", "Segoe Script", cursive;
  font-weight: 700;
  font-variation-settings: normal;
  letter-spacing: 0;
  color: var(--red);
  display: inline-block;
  transform: rotate(-4deg);
  transform-origin: left bottom;
  line-height: .8;
}

.lede {
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.5;
  max-width: 44ch;
}

.wrap {
  width: min(100% - 2 * var(--gutter), var(--measure));
  margin-inline: auto;
}

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

.nav {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 5;
  padding-top: calc(18px + env(safe-area-inset-top, 0px));
}

.nav .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-weight: 800;
  font-variation-settings: "wdth" 115;
  font-size: 20px;
  letter-spacing: -.01em;
}

.brand img { height: 28px; width: auto; display: block; }
.nav .brand { color: var(--cream); }
.legal-page .brand { color: var(--ink); }

.nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-links a {
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
  font-variation-settings: "wdth" 85;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--cream-70);
}

.nav-links a:hover { color: var(--cream); }

.nav-links .pill {
  color: var(--ink);
  background: var(--cream);
  padding: 9px 14px;
  border-radius: 999px;
}

.nav-links .pill:hover { background: #fff; color: var(--ink); }

@media (max-width: 720px) {
  .nav-links li:not(.cta) { display: none; }
}

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

.hero {
  position: relative;
  overflow: hidden;
  padding-top: calc(104px + env(safe-area-inset-top, 0px));
}

.hero .wrap {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr);
  align-items: end;
  gap: clamp(24px, 4vw, 64px);
}

.hero-copy { padding-bottom: clamp(48px, 6vw, 88px); }

.hero .eyebrow { color: var(--cream-70); }
.hero .eyebrow span { color: var(--red); }

.hero h1 {
  font-size: clamp(48px, 6.6vw, 92px);
}

.hero h1 .script {
  font-size: 1.12em;
  margin-right: .06em;
}

.hero .lede { color: var(--cream-70); margin: 28px 0 0; }

.cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 22px;
  margin-top: 36px;
}

.badge { display: inline-block; line-height: 0; }
.badge img { height: 54px; width: auto; }
.badge:focus-visible { outline: 3px solid var(--red); outline-offset: 4px; border-radius: 8px; }

.android-link {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
  font-variation-settings: "wdth" 85;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--cream);
}

.android-link small {
  font-size: 12px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  font-variation-settings: "wdth" 100;
  color: var(--cream-70);
}

.android-link:hover span { text-decoration: underline; text-underline-offset: 4px; }

.rating {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 30px;
  font-size: 13px;
  font-weight: 700;
  font-variation-settings: "wdth" 85;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--cream-70);
}

.stars { display: inline-flex; gap: 2px; color: var(--red); }
.stars svg { width: 15px; height: 15px; }

.hero-phone {
  position: relative;
  align-self: end;
  margin: 0 auto;
  width: min(100%, 400px);
  max-height: min(64vh, 640px); /* the phone runs off the bottom edge of the hero */
  overflow: hidden;
  container-type: inline-size;
}

.hero-phone img {
  width: 100%;
  border-radius: 14cqw 14cqw 0 0;
  box-shadow: 0 -20px 80px rgba(0, 0, 0, .45);
  display: block;
}

@media (max-width: 840px) {
  .hero .wrap { grid-template-columns: 1fr; }
  .hero h1 { font-size: clamp(44px, 12vw, 64px); }
  .hero-copy { padding-bottom: 8px; }
  .hero-phone { width: min(78%, 360px); max-height: 440px; margin-top: 40px; }
}

/* ---------- Section scaffolding ---------- */

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

.section-head { max-width: 62ch; }

.section-head h2 {
  font-size: clamp(34px, 5.5vw, 72px);
  text-wrap: balance;
}

.section-head .eyebrow { color: var(--accent); }
.bg-red .section-head .eyebrow { color: var(--ink); opacity: .6; }
.bg-ink .section-head .eyebrow { color: var(--red); }

.section-head p { margin: 20px 0 0; }

/* ---------- Fretboard ribbon (signature) ---------- */

.listen {
  position: relative;
  overflow: hidden;
  padding-block: 0;
}

.listen .wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px;
  padding-block: 28px;
}

.fretboard {
  width: 100%;
  height: auto;
  display: block;
}

.fretboard .string { stroke: var(--cream); stroke-linecap: round; opacity: .55; }
.fretboard .fret { stroke: var(--cream); opacity: .28; }
.fretboard .nut { stroke: var(--cream); opacity: .8; }
.fretboard .inlay { fill: var(--cream); opacity: .25; }

.fretboard .ask { fill: var(--red); transition: opacity .3s; }
.fretboard .heard { fill: var(--green); opacity: 0; transition: opacity .3s; }
.fretboard .ring { fill: none; stroke: var(--green); stroke-width: 3; opacity: 0; transform-origin: center; transform-box: fill-box; }

.fretboard.is-heard .ask { opacity: 0; }
.fretboard.is-heard .heard { opacity: 1; }
.fretboard.is-heard .ring { animation: ring .9s ease-out 1; }

@keyframes ring {
  0% { opacity: .9; transform: scale(.6); }
  100% { opacity: 0; transform: scale(2.6); }
}

.listen-readout {
  min-width: 190px;
  display: grid;
  gap: 2px;
  text-align: right;
}

.listen-readout .label {
  font-size: 12px;
  font-weight: 700;
  font-variation-settings: "wdth" 80;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--cream-40);
}

.listen-readout .note {
  font-size: 52px;
  font-weight: 800;
  font-variation-settings: "wdth" 125;
  letter-spacing: -.02em;
  line-height: 1;
  color: var(--cream);
  transition: color .3s;
}

.listen-readout .where {
  font-size: 15px;
  font-weight: 600;
  color: var(--cream-70);
}

.listen.is-heard .listen-readout .note { color: var(--green); }

@media (max-width: 720px) {
  .listen .wrap { grid-template-columns: 1fr; gap: 12px; }
  .listen-readout { text-align: left; grid-auto-flow: column; justify-content: start; align-items: baseline; gap: 14px; }
  .listen-readout .label { display: none; }
  .listen-readout .note { font-size: 36px; }
}

/* ---------- Practice plan ---------- */

.plan-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 40px);
  margin-top: clamp(40px, 5vw, 64px);
}

.plan-card {
  border-top: 2px solid var(--ink);
  padding-top: 22px;
}

.plan-card .plan-art { display: block; height: 96px; width: auto; max-width: 100%; margin-bottom: 26px; object-fit: contain; }

.plan-card h3 {
  font-size: 24px;
  font-weight: 700;
  font-variation-settings: "wdth" 110;
  line-height: 1.1;
  margin: 0 0 10px;
  letter-spacing: -.01em;
}

.plan-card p { margin: 0; color: var(--ink-60); max-width: 30ch; }

@media (max-width: 720px) {
  .plan-grid { grid-template-columns: 1fr; gap: 32px; }
  .section-head h2 { font-size: clamp(32px, 9.2vw, 44px); }
}

/* ---------- Showcase (two phones) ---------- */

.showcase {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 4vw, 48px);
  margin-top: clamp(64px, 8vw, 112px);
}

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

.show {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 24px;
}

.show-copy h3 {
  font-size: clamp(28px, 3.2vw, 40px);
  font-weight: 700;
  font-variation-settings: "wdth" 125;
  letter-spacing: -.02em;
  line-height: 1;
  margin: 0 0 12px;
}

.show-copy p { margin: 0; color: var(--ink-60); max-width: 40ch; }

.show-img {
  position: relative;
  margin-inline: auto;
  width: min(100%, 460px);
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 88%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0, #000 88%, transparent 100%);
}

.show-img img { width: 100%; }

/* A phone shown whole: the image is a transparent cut-out, so no fade or corner rounding. */
.show-img.framed {
  -webkit-mask-image: none;
  mask-image: none;
}

.show-img.framed img {
  filter: drop-shadow(0 24px 40px rgba(60, 30, 10, .25));
}

@media (max-width: 720px) {
  .showcase { grid-template-columns: 1fr; gap: 56px; }
  .show-img { width: min(100%, 380px); }
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: clamp(48px, 6vw, 80px);
  padding: 0;
  list-style: none;
}

.chips li {
  font-size: 12px;
  font-weight: 700;
  font-variation-settings: "wdth" 85;
  text-transform: uppercase;
  letter-spacing: .12em;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  padding: 9px 14px;
}

/* ---------- Reviews ---------- */

.reviews-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 36px);
  margin-top: clamp(40px, 5vw, 64px);
}

.review {
  margin: 0;
  background: var(--paper);
  border-radius: var(--radius);
  padding: 28px 28px 24px;
  display: grid;
  gap: 20px;
  box-shadow: 0 1px 0 rgba(26, 26, 26, .12), 0 12px 32px rgba(120, 30, 20, .18);
}

.review blockquote {
  margin: 0;
  font-size: clamp(19px, 1.7vw, 23px);
  font-weight: 700;
  font-variation-settings: "wdth" 105;
  line-height: 1.25;
  letter-spacing: -.01em;
  text-wrap: pretty;
}

.review figcaption {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 12px;
  font-weight: 700;
  font-variation-settings: "wdth" 80;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--ink-60);
}

.review .stars { color: var(--accent); }
.review .stars svg { width: 12px; height: 12px; }

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

/* ---------- Download band ---------- */

.download {
  position: relative;
  overflow: hidden;
  min-height: clamp(460px, 56vw, 640px);
  display: grid;
  align-items: center;
  color: var(--cream);
  background: var(--ink);
}

.download-photo {
  position: absolute;
  inset: 0;
  margin: 0;
}

.download-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 60% 40%;
}

.download-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, rgba(26, 26, 26, .78) 0%, rgba(26, 26, 26, .45) 45%, rgba(26, 26, 26, .05) 100%),
    linear-gradient(to top, rgba(26, 26, 26, .55), rgba(26, 26, 26, 0) 50%);
}

.download .wrap { position: relative; padding-block: clamp(56px, 8vw, 96px); }

.download-card {
  display: grid;
  justify-items: start;
  gap: 18px;
  max-width: 520px;
}

.download-card .app-icon {
  width: 84px;
  height: 84px;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .4);
}

.download-card h2 { font-size: clamp(44px, 6vw, 80px); }
.download-card .rating { margin-top: 0; color: var(--cream); }
.download-card .badge { margin-top: 6px; }

/* ---------- Android / mailing list ---------- */

.android .wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 480px);
  gap: clamp(32px, 6vw, 96px);
  align-items: center;
}

.android .section-head p { color: var(--cream-70); }

.subscribe {
  display: grid;
  gap: 12px;
}

.subscribe .row {
  display: flex;
  gap: 10px;
}

.subscribe input[type="email"] {
  flex: 1;
  min-width: 0;
  background: rgba(253, 245, 238, .08);
  border: 1.5px solid var(--cream-40);
  color: var(--cream);
  border-radius: var(--radius);
  padding: 15px 16px;
  font-size: 16px;
}

.subscribe input[type="email"]::placeholder { color: var(--cream-40); }
.subscribe input[type="email"]:focus { outline: none; border-color: var(--cream); }

.subscribe button {
  background: var(--red);
  color: #fff;
  border: 0;
  border-radius: var(--radius);
  padding: 15px 22px;
  font-size: 13px;
  font-weight: 800;
  font-variation-settings: "wdth" 90;
  text-transform: uppercase;
  letter-spacing: .12em;
  cursor: pointer;
  white-space: nowrap;
}

.subscribe button:hover { background: #ff6a5e; }
.subscribe button:focus-visible { outline: 3px solid var(--cream); outline-offset: 3px; }
.subscribe button[disabled] { opacity: .6; cursor: wait; }

.subscribe .hint { font-size: 13px; color: var(--cream-40); margin: 0; }
.subscribe .status { font-size: 15px; font-weight: 600; margin: 0; min-height: 1.5em; }
.subscribe .status.ok { color: var(--green); }
.subscribe .status.err { color: var(--red); }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

@media (max-width: 760px) {
  .android .wrap { grid-template-columns: 1fr; }
  .subscribe .row { flex-direction: column; }
}

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

.footer {
  border-top: 1px solid var(--cream-15);
  padding-block: 56px calc(48px + env(safe-area-inset-bottom, 0px));
  font-size: 15px;
  color: var(--cream-70);
}

.footer .wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 40px;
  align-items: start;
}

.footer h2 {
  font-size: 22px;
  font-weight: 700;
  font-variation-settings: "wdth" 115;
  color: var(--cream);
  margin: 0 0 10px;
  letter-spacing: -.01em;
}

.footer p { margin: 0; max-width: 56ch; }
.footer p + p { margin-top: 12px; }
.footer a { color: var(--cream); text-decoration-thickness: 1px; text-underline-offset: 3px; }

.footer-links {
  display: grid;
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  font-variation-settings: "wdth" 85;
  text-transform: uppercase;
  letter-spacing: .12em;
}

.footer-links a { text-decoration: none; color: var(--cream-70); }
.footer-links a:hover { color: var(--cream); }

.footer .legal {
  grid-column: 1 / -1;
  padding-top: 28px;
  border-top: 1px solid var(--cream-15);
  font-size: 12px;
  font-weight: 700;
  font-variation-settings: "wdth" 85;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--cream-40);
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

@media (max-width: 640px) {
  .footer .wrap { grid-template-columns: 1fr; gap: 28px; }
}

/* ---------- Legal pages ---------- */

.legal-page { min-height: 100vh; }

.legal-page .nav { position: static; padding-bottom: 8px; }
.legal-page .nav-links a { color: var(--ink-60); }
.legal-page .nav-links a:hover { color: var(--ink); }
.legal-page .nav-links .pill { background: var(--ink); color: var(--cream); }
.legal-page .nav-links .pill:hover { background: #000; color: var(--cream); }

.legal-body {
  width: min(100% - 2 * var(--gutter), 720px);
  margin-inline: auto;
  padding-block: 48px 96px;
}

.legal-body h1 { font-size: clamp(36px, 5vw, 56px); margin-bottom: 8px; }
.legal-body .effective { color: var(--ink-60); margin: 0 0 40px; }
.legal-body h2 {
  font-size: 13px;
  font-weight: 800;
  font-variation-settings: "wdth" 85;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--ink-60);
  margin: 40px 0 10px;
}
.legal-body p, .legal-body li { max-width: 70ch; }
.legal-body ul { padding-left: 20px; }

/* ---------- Motion / a11y ---------- */

:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }

.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity .7s ease, transform .7s ease; }
.js .reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .fretboard.is-heard .ring { animation: none; }
  .script { transform: none; }
}