/* Unison · The site's one stylesheet
 *
 * Seven pages draw with these rules — the landing page, privacy, support and terms, and the Spanish
 * twins of the first three — and until 2026-09-15 each carried its own copy in a `<style>` block:
 * three of the four English blocks were byte-identical and the fourth (`index.html`'s) was those
 * plus thirteen lines for the screenshot rail. A Spanish twin of each would have made seven copies,
 * and seven copies drift the first time one of them is corrected. So the rules live once, here, the
 * move `stores.css` already made for the badges and for the same reason.
 *
 * Nothing in the cascade moved: the shared block first, the screenshot rail where `index.html` had
 * it, the `main.doc` rules after, exactly as the `<style>` blocks were ordered. The four English
 * pages were rendered at 390 px and 1280 px before and after the lift and compared pixel for pixel
 * (`RISK-054`). Two things are new at the foot: the language switch and the bilingual foot's rule.
 *
 * `stores.css` is separate on purpose. It is the two vendors' badge sizing and it is loaded by the
 * share cards the Worker renders, which do not load this file.
 */

/* The app's own palette, so the page and the product are recognisably the same thing. */
:root {
  color-scheme: dark;
  --charcoal: #0F1115;
  --surface: #17171B;
  --graphite: #24242A;
  --hairline: #2A2A31;
  --off-white: #FAFAF8;
  --muted: #A3A3AD;
  --quiet: #8C8C96;
  --lavender: #A99AF7;
  --sky: #6FCBFF;
  --coral: #FF735C;
  --mint: #8FDFC4;
  --amber: #F0C66B;
  --measure: 62rem;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Helvetica, Arial, sans-serif;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
}

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

body {
  margin: 0;
  background: var(--charcoal);
  color: var(--off-white);
  font: 17px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.wrap { max-width: var(--measure); margin: 0 auto; padding: 0 1.5rem; }
a { color: var(--lavender); }
h1, h2, h3 { letter-spacing: -0.022em; line-height: 1.12; margin: 0; }
h1 { font-size: clamp(2.6rem, 7vw, 4.6rem); font-weight: 800; }
h2 { font-size: clamp(1.7rem, 3.6vw, 2.5rem); font-weight: 700; }
h3 { font-size: 1.12rem; font-weight: 650; }
p { margin: 0; }

/* Confirmation. Supabase sends a member here after they click the link in their email, so this
   page is both the front door and the place that has to say "it worked". Hidden unless the URL
   fragment says otherwise — see the script at the foot. */
#confirmation {
  display: none;
  background: rgba(143, 223, 196, 0.09);
  border-bottom: 1px solid rgba(143, 223, 196, 0.25);
}
#confirmation .wrap { padding-top: 1rem; padding-bottom: 1rem; }
#confirmation h2 { font-size: 1.15rem; }
#confirmation p { color: var(--muted); font-size: 0.95rem; margin-top: 0.2rem; }
#confirmation.problem {
  background: rgba(255, 115, 92, 0.09);
  border-bottom-color: rgba(255, 115, 92, 0.28);
}

header.top { padding: 1.6rem 0; }
header.top .wrap { display: flex; align-items: center; gap: 0.7rem; }
/* The real mark, not a drawn approximation of it. */
.mark { width: 30px; height: 29px; flex: none; display: block; }
.wordmark { font-weight: 750; letter-spacing: -0.01em; font-size: 1.12rem; }
.top-cta { margin-left: auto; font-size: 0.95rem; font-weight: 600; text-decoration: none; }

/* Hero */
.hero { padding: 2rem 0 4.5rem; position: relative; }
.hero::before {
  content: ""; position: absolute; inset: -20% 0 auto; height: 60vh; pointer-events: none;
  background: radial-gradient(60% 60% at 50% 0%, rgba(169,154,247,0.16), transparent 70%);
}
.hero .wrap { position: relative; }
.kicker {
  display: inline-block; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--lavender);
  border: 1px solid rgba(169,154,247,0.35); border-radius: 999px;
  padding: 0.35rem 0.8rem; margin-bottom: 1.4rem;
}
.lede {
  font-family: var(--serif); font-size: clamp(1.15rem, 2.4vw, 1.5rem); line-height: 1.5;
  color: var(--muted); max-width: 34rem; margin-top: 1.2rem;
}
.lede em { color: var(--off-white); font-style: italic; }

.cta-row { display: flex; flex-wrap: wrap; gap: 0.9rem; align-items: center; margin-top: 2.2rem; }
.button {
  display: inline-flex; align-items: center; gap: 0.55rem;
  background: var(--lavender); color: #14141A; text-decoration: none;
  font-weight: 700; font-size: 1.02rem;
  padding: 0.95rem 1.6rem; border-radius: 999px; border: 0;
  min-height: 44px;
}
.button:hover { filter: brightness(1.07); }
.button.ghost {
  background: transparent; color: var(--off-white);
  border: 1px solid var(--hairline);
}
.cta-note { color: var(--quiet); font-size: 0.9rem; }

.stats { display: flex; flex-wrap: wrap; gap: 2.2rem; margin-top: 3rem; }
.stat b { display: block; font-size: 1.55rem; font-weight: 750; font-variant-numeric: tabular-nums; }
.stat span { color: var(--quiet); font-size: 0.86rem; }

/* Sections */
section { padding: 4.5rem 0; border-top: 1px solid var(--graphite); }
.section-kicker {
  font-size: 0.76rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--quiet); margin-bottom: 0.8rem;
}
.section-lede { color: var(--muted); max-width: 42rem; margin-top: 0.9rem; }

.grid { display: grid; gap: 1rem; margin-top: 2.4rem; grid-template-columns: 1fr; }
@media (min-width: 700px) { .grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .grid.three { grid-template-columns: repeat(3, 1fr); } }

.card {
  background: var(--surface); border: 1px solid var(--graphite);
  border-radius: 18px; padding: 1.5rem;
}
.card .icon {
  width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center;
  background: rgba(169,154,247,0.13); margin-bottom: 0.95rem;
}
.card .icon svg { width: 20px; height: 20px; }
.card p { color: var(--muted); font-size: 0.96rem; margin-top: 0.5rem; }

/* Screenshots. A horizontal rail rather than a grid: on a phone these are read one at a time,
   and a two-column grid of phone screenshots on a phone is four unreadable thumbnails. */
.shots { margin-top: 2.4rem; overflow-x: auto; -webkit-overflow-scrolling: touch;
         scroll-snap-type: x mandatory; padding-bottom: 0.6rem; }
.shots-row { display: flex; gap: 1.1rem; min-width: min-content; }
.shot { flex: 0 0 auto; width: 232px; scroll-snap-align: start; }
.shot img {
  width: 100%; height: auto; display: block; border-radius: 20px;
  border: 1px solid var(--graphite); background: var(--surface);
}
.shot figcaption { color: var(--muted); font-size: 0.88rem; margin-top: 0.7rem; }
@media (min-width: 900px) { .shot { width: 258px; } }

/* The comparison table is the part a searcher for "letterboxd for music" is looking for. */
.compare { width: 100%; border-collapse: collapse; margin-top: 2.2rem; font-size: 0.98rem; }
.compare th, .compare td { text-align: left; padding: 0.85rem 0.9rem; vertical-align: top; }
.compare thead th { color: var(--quiet); font-size: 0.78rem; letter-spacing: 0.1em;
                    text-transform: uppercase; font-weight: 700; }
.compare tbody tr { border-top: 1px solid var(--graphite); }
.compare td:first-child { color: var(--muted); width: 34%; }
.compare td b { color: var(--off-white); }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

details {
  border-top: 1px solid var(--graphite); padding: 1.15rem 0;
}
details summary {
  cursor: pointer; font-weight: 650; font-size: 1.05rem; list-style: none;
  display: flex; align-items: flex-start; gap: 0.8rem; min-height: 34px;
}
details summary::-webkit-details-marker { display: none; }
details summary::after {
  content: "+"; margin-left: auto; color: var(--lavender); font-weight: 400; font-size: 1.4rem;
  line-height: 1;
}
details[open] summary::after { content: "–"; }
details p { color: var(--muted); margin-top: 0.7rem; max-width: 46rem; }

.closing { text-align: center; }
.closing .cta-row { justify-content: center; }

footer { padding: 3rem 0 4rem; border-top: 1px solid var(--graphite); color: var(--quiet);
         font-size: 0.88rem; }
footer .wrap { display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center; }
footer .powered { margin-left: auto; }
/* The wordmark keeps its own colour — it is another company's brand, not an icon in Unison's
   palette. Sized to sit on the footer's baseline rather than to a round number. */
footer .tenxs { display: inline-block; vertical-align: -4px; line-height: 0; }
footer .tenxs img { display: block; width: 44px; height: auto; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap;
}
:focus-visible { outline: 2px solid var(--lavender); outline-offset: 3px; border-radius: 6px; }

/* The prose pages — privacy, support, terms — and their Spanish twins. */
main.doc { max-width: 44rem; margin: 0 auto; padding: 3rem 1.5rem 5rem; }
main.doc h1 { font-size: clamp(2rem, 5vw, 3rem); margin-bottom: .4rem; }
main.doc h2 { font-size: 1.3rem; margin: 2.4rem 0 .7rem; }
main.doc p, main.doc li { color: var(--muted); }
main.doc p { margin: .8rem 0; }
main.doc ul { padding-left: 1.2rem; }
main.doc li { margin: .45rem 0; }
main.doc .updated { color: var(--quiet); font-size: .9rem; }
main.doc strong { color: var(--off-white); }

/* The language switch — English · Español — in the header and the footer of every translated
   page. A `<nav>` with a name, two real links in their own languages (the endonyms the web app's
   `LanguageChoice` uses; `lang` on each so a screen reader changes voice), the one being read
   marked `aria-current="page"`, and a 44 px target on each. In the landing page's header it sits
   beside *Get the app*; on the prose pages, where there is no call to action, it takes the same
   place at the right (`.alone`). Nothing on the page moves when the language does. */
nav.language { display: flex; align-items: center; gap: 0.5rem; font-size: 0.95rem; }
header.top nav.language { margin-left: 1.4rem; }
header.top nav.language.alone { margin-left: auto; }
/* On a phone the landing page's row is too narrow for the mark, the call to action and two words
   beside it — *Descarga la app* wrapped onto two lines at 390 px — so there the switch takes a row
   of its own under the call to action, still at the right, and the call to action never wraps.
   The prose pages' header has room and keeps the switch on the one row. */
header.top .wrap { flex-wrap: wrap; }
.top-cta { white-space: nowrap; }
@media (max-width: 560px) {
  header.top nav.language:not(.alone) { flex-basis: 100%; justify-content: flex-end; margin-left: 0; }
}
nav.language a {
  text-decoration: none; min-height: 44px; display: inline-flex; align-items: center;
  padding: 0 2px;
}
nav.language a[aria-current="page"] {
  color: var(--off-white); font-weight: 600; text-decoration: underline;
  text-underline-offset: 4px; text-decoration-color: var(--lavender);
}
nav.language span { color: var(--quiet); }