/* hummusic.app (the user, 2026-11-05: "Copy cal ai's landing page ... move the main HUM landing page to the about tab
   ... Home will replace the FAQ tab which will be copying the cal ai main page layout. Remove the press tab and add the
   privacy and support tabs. Format the ui accordingly to match HUM's themes and app preview/ logo screenshots").
   One stylesheet for every page: the bar along the top (the logo, Home · About · Privacy · Support, Download), the
   foot, the Home page's sections, and the Privacy and Support pages' reading column. HUM's colours (DESIGN.md) and the
   App Store screenshots' blue: #2E6CFA at the top to #2765F8 to #1747C9; SF Pro on Apple's devices. */
:root {
  --blue: #2765F8;
  --blue-top: #2E6CFA;
  --blue-deep: #1747C9;
  --navy: #0A193D;
  --navy-up: #132A63;
  --ink: #2E3448;
  --muted: #727685;
  --line: #EDF0F7;
  --row: #F5F6F7;
  --soft: #E6F1FD;
  --green: #1CB991;
  --note: #A0DFD1;
  --note-line: #00AD81;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", system-ui, "Segoe UI", Roboto, sans-serif;
  --wide: 1200px;
  --gut: 24px;
  --bar-h: 64px;
  --lift: 0 1px 2px rgba(10, 25, 61, 0.06), 0 10px 30px rgba(10, 25, 61, 0.08);
  --phone-shadow: 0 30px 60px rgba(6, 18, 64, 0.28), 0 10px 22px rgba(6, 18, 64, 0.18);
}
@media (max-width: 760px) { :root { --gut: 16px; --bar-h: 100px; } }

/* ---------- every page: the bar and the foot ---------- */
.bar {
  position: sticky; top: 0; z-index: 30; height: var(--bar-h);
  background: rgba(255, 255, 255, 0.86); -webkit-backdrop-filter: saturate(1.6) blur(18px); backdrop-filter: saturate(1.6) blur(18px);
  border-bottom: 1px solid var(--line);
  font: 600 15px/1.2 var(--sans); color: var(--ink); letter-spacing: 0;
}
.bar-in {
  max-width: var(--wide); height: 100%; margin: 0 auto; padding: 0 var(--gut);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px;
}
.brand { justify-self: start; display: block; color: var(--blue); line-height: 0; }
.brand .mark { height: 26px; width: auto; }
.tabs { display: flex; gap: 32px; }
.tabs a { color: var(--ink); text-decoration: none; padding: 8px 0; border-bottom: 2px solid transparent; }
.tabs a:hover { color: var(--blue); }
.tabs a[aria-current="page"] { color: var(--blue); border-bottom-color: var(--blue); }
/* the store badges, one height side by side: Apple's own (badges/app-store.svg, as its marketing guidelines give it)
   and Google's (badges/google-play.png); Google Play is a button that says "Coming soon" (site.js) */
.badges { display: inline-flex; align-items: center; gap: 10px; }
.badge { position: relative; display: block; line-height: 0; margin: 0; padding: 0; border: 0; background: none; cursor: pointer; }
.badge img { display: block; height: 40px; width: auto; }
.soon {
  position: absolute; z-index: 40; left: 50%; top: calc(100% + 8px); transform: translate(-50%, -4px); opacity: 0;
  white-space: nowrap; pointer-events: none; background: var(--navy); color: #fff; font: 600 13px/1 var(--sans);
  padding: 8px 12px; border-radius: 10px; box-shadow: 0 8px 20px rgba(10, 25, 61, 0.25); transition: opacity 160ms ease, transform 160ms ease;
}
.play.say .soon { opacity: 1; transform: translate(-50%, 0); }
.bar .badges { justify-self: end; }
@media (max-width: 760px) {
  .bar-in { grid-template-columns: 1fr auto; grid-template-rows: 52px 40px; row-gap: 0; }
  .tabs { grid-column: 1 / -1; grid-row: 2; justify-content: center; gap: 26px; align-self: start; }
  .tabs a { padding: 6px 0; }
}
/* the narrowest phones: the App Store badge alone in the bar (both stay in the page and the foot) */
@media (max-width: 400px) { .bar .play { display: none; } }

.foot { background: #fff; border-top: 1px solid var(--line); font: 400 15px/1.5 var(--sans); color: var(--muted); }
.foot-in {
  max-width: var(--wide); margin: 0 auto; padding: 48px var(--gut) 28px;
  display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 32px;
}
.foot .mark { height: 30px; width: auto; color: var(--blue); }
.foot-brand { display: grid; gap: 14px; justify-items: start; }
.foot-brand p { margin: 0; color: var(--ink); font-weight: 500; }
.foot h3 { margin: 0 0 12px; font: 600 15px/1.2 var(--sans); color: var(--ink); }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.foot a { color: var(--muted); text-decoration: none; }
.foot a:hover { color: var(--blue); }
.foot .badges { justify-self: start; }
.foot-end .credit { font-size: 13px; }
.foot-end {
  grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  border-top: 1px solid var(--line); padding-top: 20px; font-size: 14px;
}
@media (max-width: 760px) { .foot-in { grid-template-columns: 1fr 1fr; } .foot-brand { grid-column: 1 / -1; } }

/* ---------- Home ---------- */
.home { margin: 0; background: #fff; color: var(--ink); font: 400 17px/1.55 var(--sans); -webkit-text-size-adjust: 100%; }
.home * { box-sizing: border-box; }
.home img { max-width: 100%; }
.wrap { max-width: var(--wide); margin: 0 auto; padding: 0 var(--gut); }
/* no margins of their own (no weight either, so each section's rules set theirs) */
:where(.home) :is(h1, h2, h3, p) { margin: 0; }
.home h2 { font-size: clamp(32px, 4.2vw, 48px); line-height: 1.08; font-weight: 800; letter-spacing: -0.025em; text-wrap: balance; }
.sub { color: var(--muted); font-size: 18px; margin-top: 12px; text-wrap: balance; }
.center { text-align: center; }
section { padding: 96px 0; }
@media (max-width: 760px) { section { padding: 64px 0; } }

/* the badges in the hero and the last word: larger */
.hero .badges, .last .badges { margin-top: 32px; }
.hero .badge img, .last .badge img { height: 52px; }

/* a phone: the App Store screenshots' frame, a screen of HUM inside */
.phone {
  position: relative; width: 280px; aspect-ratio: 600 / 1304; padding: 9px; border-radius: 46px; background: #0B0B0D;
  box-shadow: 0 0 0 2px #5A5E68, 0 0 0 3px #2A2C31, var(--phone-shadow);
}
.phone img { display: block; width: 100%; height: 100%; border-radius: 37px; object-fit: cover; background: #fff; }

/* the hero: words on the left; the singer, the hum and its notes on the right, drawn arrows between */
.hero { padding: 72px 0 104px; background: radial-gradient(900px 520px at 78% 10%, rgba(39, 101, 248, 0.12), rgba(39, 101, 248, 0) 70%), linear-gradient(180deg, #F2F6FF 0%, #FFFFFF 100%); overflow: hidden; }
.hero .wrap { display: grid; grid-template-columns: 0.82fr 1.18fr; gap: 32px; align-items: center; }
/* the words keep the bar's left edge; the singer and the screens run on toward the window's right edge (the user,
   2026-11-05: "move the singer and preview screenshotes to the right") */
@media (min-width: 961px) {
  .hero .wrap { max-width: none; padding-left: max(var(--gut), calc((100% - var(--wide)) / 2 + var(--gut))); padding-right: clamp(var(--gut), 4vw, 64px); }
}
/* the store subtitle under the hero's badges, large, in the heading's blue; it opens About (the user, 2026-11-05: "Make
   anti gen ai policy large text and not in a pill button. clicking on the anti gen ai policy should rerout to the about
   tab"; "make anti gen ai policy the same blue color as the other font. put it under the download buttons") */
.policy {
  display: inline-flex; align-items: center; gap: 0.35em; margin-top: 26px; color: var(--blue); text-decoration: none;
  font-size: clamp(22px, 2.5vw, 30px); line-height: 1.2; font-weight: 800; letter-spacing: -0.02em;
}
.policy span { background: linear-gradient(90deg, var(--blue-top), var(--blue-deep)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.policy svg { width: 0.85em; height: 0.85em; flex: none; transition: transform 160ms ease; }
.policy:hover span { text-decoration: underline; text-decoration-color: var(--blue); text-underline-offset: 0.15em; }
.policy:hover svg { transform: translateX(3px); }
.hero .badges + .policy { display: flex; width: max-content; }
.hero h1 { margin-top: 0; font-size: clamp(44px, 6vw, 76px); line-height: 1.0; font-weight: 800; letter-spacing: -0.035em; }
.hero h1 span { display: block; text-wrap: balance; }
.hero h1 .tint { background: linear-gradient(90deg, var(--blue-top), var(--blue-deep)); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: 0.06em; }
.lede { margin-top: 22px; max-width: 30em; font-size: 19px; color: var(--muted); }
/* the hero's right: one row, evenly spaced (the user, 2026-11-05: "add this icon ... make the icon the same color as the
   blue theme, add another squiggly arrow from the singer to the first screen, and make the original squiggly arrow ...
   spaced more evenly between the 2 screen previews"): the singer, an arrow, the hum, an arrow, its notes; each arrow
   its own item in the row, so it sits midway between its neighbours */
/* to the right edge, away from the words (the user: "move those 3 images together to the right to make the screen less
   crowded") */
.flow { display: flex; align-items: center; justify-content: flex-end; gap: 14px; }
.flow .singer { flex: none; width: 112px; height: auto; }
.flow .arrow { flex: none; width: 60px; height: 42px; color: var(--blue); }
.flow .phone { flex: none; width: 200px; }
.flow .one { transform: rotate(-4deg); }
.flow .two { transform: rotate(4deg); }
.flow .a1 { transform: translateY(-18px); }
.flow .a2 { transform: translateY(-30px); }
@media (max-width: 960px) {
  .hero .wrap { grid-template-columns: 1fr; text-align: center; }
  .lede { margin-left: auto; margin-right: auto; }
  .hero .badges + .policy { margin-left: auto; margin-right: auto; }
  /* one row inside a phone's width: 13 + 7 + 26 + 7 + 26 vw and four 1.6 vw gaps */
  .flow { justify-content: center; gap: 1.6vw; padding-top: 48px; }
  .flow .singer { width: min(13vw, 110px); }
  .flow .arrow { width: min(7vw, 60px); height: auto; }
  .flow .phone { width: min(26vw, 210px); padding: 5px; border-radius: 30px; }
  .flow .phone img { border-radius: 25px; }
}

/* What does HUM include?: seven cards, the App Store screenshots' seven; the phone shows the screen of the card picked */
.include { background: linear-gradient(180deg, #FFFFFF 0%, #F5F8FF 100%); }
.include .grid { margin-top: 56px; display: grid; grid-template-columns: 1fr 1.25fr; gap: 56px; align-items: center; }
.show { display: grid; justify-items: center; gap: 18px; }
.show .phone { width: 300px; }
.show .phone img { position: absolute; inset: 9px; width: calc(100% - 18px); height: calc(100% - 18px); opacity: 0; transition: opacity 240ms ease; }
.show .phone img.on { opacity: 1; }
.dots { display: flex; gap: 8px; }
.dots i { width: 8px; height: 8px; border-radius: 50%; background: #C9D2E4; transition: background 200ms ease, width 200ms ease; }
.dots i.on { background: var(--blue); width: 22px; border-radius: 4px; }
.cards { display: grid; gap: 10px; }
.card {
  display: block; width: 100%; text-align: left; cursor: pointer; font: inherit; color: inherit;
  background: #fff; border: 1.5px solid var(--line); border-radius: 18px; padding: 16px 22px; box-shadow: var(--lift);
  transition: border-color 160ms ease, background 160ms ease;
}
.card h3 { font-size: 18px; line-height: 1.25; font-weight: 700; letter-spacing: -0.01em; }
.card p { margin-top: 4px; color: var(--muted); font-size: 15px; line-height: 1.5; }
.card[aria-pressed="true"] { background: var(--soft); border-color: var(--blue); }
.card[aria-pressed="true"] h3 { color: var(--blue); }
/* a phone's width (the user: "why cant i see the other previews"): stacked, a card's screen changed on a phone scrolled
   out of sight; now the phone keeps its own column beside the cards and stays in view while they scroll */
@media (max-width: 960px) {
  .include .grid { grid-template-columns: 38% 1fr; gap: 14px; align-items: start; margin-top: 36px; }
  .show { position: sticky; top: calc(var(--bar-h) + 16px); gap: 12px; }
  .show .phone { width: 100%; padding: 6px; border-radius: 30px; }
  .show .phone img { inset: 6px; width: calc(100% - 12px); height: calc(100% - 12px); border-radius: 24px; }
  .dots { gap: 5px; }
  .dots i { width: 6px; height: 6px; }
  .dots i.on { width: 14px; }
  .card { padding: 12px 14px; border-radius: 16px; }
  .card h3 { font-size: 16px; }
  .card p { font-size: 14px; }
}

/* the promise: the app's dark end, the words left, My HUMs on a tilted phone right */
.promise { background: radial-gradient(800px 500px at 80% 40%, rgba(39, 101, 248, 0.35), rgba(39, 101, 248, 0) 70%), linear-gradient(180deg, var(--navy-up), var(--navy)); color: #fff; overflow: hidden; }
.promise .wrap { display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px; align-items: center; }
.kick { font-size: 14px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--green); }
.promise h2 { margin-top: 16px; color: #fff; }
.promise p.body { margin-top: 20px; font-size: 19px; color: #C9D4F0; max-width: 32em; }
.promise .phone { width: 290px; justify-self: center; transform: rotate(6deg); box-shadow: 0 0 0 2px #5A5E68, 0 0 0 3px #2A2C31, 0 40px 90px rgba(0, 0, 0, 0.55); }
@media (max-width: 960px) { .promise .wrap { grid-template-columns: 1fr; text-align: center; } .promise p.body { margin-left: auto; margin-right: auto; } .promise .phone { width: min(64vw, 280px); margin-top: 24px; } }

/* the questions: Support's and the Privacy Policy's answers, one tap each */
.faq { background: linear-gradient(180deg, #FFFFFF 0%, #F5F8FF 100%); }
.qs { max-width: 780px; margin: 48px auto 0; display: grid; gap: 12px; }
.qs details { background: #fff; border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--lift); }
.qs summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 22px 24px; font-size: 17px; font-weight: 600; color: var(--ink);
}
.qs summary::-webkit-details-marker { display: none; }
.qs summary::after {
  content: ""; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--row) url("chevron.svg") center / 12px no-repeat;
  transition: transform 200ms ease;
}
.qs details[open] summary::after { transform: rotate(180deg); }
.qs details p { padding: 0 24px 22px; margin: -6px 0 0; color: var(--muted); font-size: 16px; }
.qs a { color: var(--blue); }
.more { margin-top: 28px; display: flex; justify-content: center; }
.ghost { color: var(--ink); text-decoration: none; font-weight: 600; font-size: 16px; border: 1.5px solid var(--line); background: #fff; border-radius: 999px; padding: 12px 22px; }
.ghost:hover { border-color: var(--blue); color: var(--blue); }

/* the last word: the screenshots' blue, the logo in white */
.last {
  text-align: center; color: #fff;
  background: radial-gradient(1000px 600px at 50% -10%, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 70%), linear-gradient(180deg, var(--blue-top) 0%, var(--blue) 40%, var(--blue-deep) 100%);
}
.last .mark { height: 64px; width: auto; color: #fff; }
.last h2 { margin: 28px auto 0; color: #fff; max-width: 14em; }

/* ---------- Privacy, Support: a title band as Home's hero, each section a card as Home's questions ---------- */
.doc { margin: 0; background: #F5F8FF; color: var(--ink); font: 17px/1.6 var(--sans); -webkit-text-size-adjust: 100%; }
.doc * { box-sizing: border-box; }
.doc-hero {
  text-align: center; padding: 72px var(--gut) 44px;
  background: radial-gradient(800px 420px at 50% -10%, rgba(39, 101, 248, 0.14), rgba(39, 101, 248, 0) 70%), linear-gradient(180deg, #EEF4FF 0%, #F5F8FF 100%);
}
.doc-hero h1 { margin: 0; font-size: clamp(40px, 6vw, 64px); line-height: 1.02; font-weight: 800; letter-spacing: -0.035em; text-wrap: balance; }
.doc-hero .muted { margin: 14px 0 0; color: var(--muted); font-size: 16px; }
.doc-lede { max-width: 38em; margin: 20px auto 0; font-size: 18px; text-wrap: pretty; }
.doc-body { max-width: 820px; margin: 0 auto; padding: 0 var(--gut) 88px; display: grid; gap: 14px; }
.doc-card { background: #fff; border: 1px solid var(--line); border-radius: 24px; padding: 28px 32px; box-shadow: var(--lift); }
.doc-card h2 { margin: 0 0 10px; font-size: 21px; line-height: 1.3; font-weight: 700; letter-spacing: -0.01em; }
.doc-card p, .doc-card li { margin: 10px 0; color: #4A5068; }
.doc-card > :last-child { margin-bottom: 0; }
.doc-card ul { margin: 10px 0; padding-left: 20px; }
.doc-card li::marker { color: var(--blue); }
.doc-card .muted { color: var(--muted); font-size: 15px; }
.doc-card a, .doc-lede a { color: var(--blue); }
@media (max-width: 760px) { .doc-hero { padding: 48px var(--gut) 32px; } .doc-card { padding: 22px 20px; border-radius: 20px; } }

/* ---------- About: the old home page, its stage under the bar ---------- */
.about .bar { position: fixed; left: 0; right: 0; }
.about .stage { top: var(--bar-h); }