/* ── App Store button ─────────────────────────────────
   The app's primary button: `crema` filled with `tinta` text. Not an accent
   fill — the accent marks what the user measured, and a download button is not
   that. */
.btn-appstore {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-family: var(--font-stack);
  font-size: 15px;
  font-weight: 700;
  height: 52px;
  padding: 0 24px;
  border-radius: var(--radius-btn);
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--transition-fast);
}

.btn-appstore:hover {
  background: var(--color-primary-hover);
}

.btn-appstore svg {
  width: 20px;
  height: 20px;
  flex: none;
}

.btn-appstore--large {
  font-size: 16px;
  height: 56px;
  padding: 0 28px;
  margin-top: 8px;
}

.btn-appstore--large svg {
  width: 22px;
  height: 22px;
}

/* ── Secondary button, and the nav's Download ─────────
   `relleno`, the app's secondary fill. Two primaries on one screen is what the
   old gold pair did; only one thing here is the primary action. */
.btn-secondary,
.btn-download {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-fill);
  color: var(--color-text);
  font-family: var(--font-stack);
  font-weight: 700;
  border: none;
  border-radius: var(--radius-btn);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--transition-fast);
}

.btn-download {
  font-size: 14px;
  padding: 9px 16px;
}

.btn-secondary {
  font-size: 15px;
  height: 52px;
  padding: 0 22px;
}

.btn-secondary:hover,
.btn-download:hover {
  background: var(--color-fill-hover);
}

/* ── Skip link ────────────────────────────────────────
   First in tab order, visible only when focused. The nav is fixed, so it is
   offset clear of it when it appears. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-weight: 700;
  padding: 12px 20px;
  border-radius: var(--radius-btn);
}

.skip-link:focus {
  left: var(--page-pad);
  top: 12px;
}

/* Text for screen readers only — not `display: none`, which is not announced. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ── Language toggle ──────────────────────────────────
   A pill of two, the active one filled. `aria-pressed` carries the state for a
   screen reader; the fill is only the visible half of it. */
.lang {
  display: flex;
  gap: 2px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-pill);
  padding: 3px;
}

.lang__btn {
  background: transparent;
  border: none;
  color: var(--color-text-meta);
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  padding: 5px 11px;
  border-radius: var(--radius-pill);
  cursor: pointer;
}

.lang__btn {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}

/* aria-current marks the language you are already reading. */
.lang__btn[aria-current] {
  background: var(--color-fill);
  color: var(--color-text);
}

.lang__btn:hover {
  color: var(--color-text);
}

/* ── The duel ─────────────────────────────────────────
   The app's own comparison surface, reproduced: two cards on ink split by a
   gap, the third answer floating in the seam between them. */
.duel__question {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--color-text-meta);
  margin-bottom: 14px;
  min-height: 22px;
}

.duel__stage {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 48px;
}

/* Reserved so the line appearing after the first pick cannot shift the page. */
.duel__count {
  margin-top: 16px;
  min-height: 20px;
  font-size: 13px;
  color: var(--color-text-meta);
}

/* The seam pill — the third answer, and it lives BETWEEN the two options
   because that is what it is. Only on pairs containing a film you don't own:
   "I don't know these" is false when both are already yours. */
.duel__neither {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  height: 36px;
  padding: 0 18px;
  border-radius: var(--radius-pill);
  border: none;
  cursor: pointer;
  background: var(--color-fill);
  color: var(--color-text);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  z-index: 2;
}

.duel__neither:hover {
  background: var(--color-fill-hover);
}

/* On a short screen the whole duel is 8px too tall to sit above the fold at
   1024x768, which the handoff asks for. The card height (292) and the gap (48)
   are the parts it fixes, so what gives is the component's own breathing room —
   the air above the pair and under it. Nothing moves on a tall screen. */
@media (max-height: 800px) {
  .duel__question { margin-bottom: 8px; }
  .duel__count { margin-top: 10px; }
}

/* ── A film card ──────────────────────────────────────
   Poster whole on the left at the app's 145:210, words beside it. They never
   overlap: the art is the thing being chosen between, so nothing is printed
   over it. */
.card {
  position: relative;
  display: flex;
  gap: 22px;
  height: 292px;
  padding: 16px 20px 16px 16px;
  background: var(--color-surface);
  border-radius: var(--radius-btn);
  overflow: hidden;
  cursor: pointer;
  transition: opacity 0.2s, filter 0.2s;
}

/* The block-link pattern.
 *
 * The pick control is a real <button> that stretches over the whole card with
 * ::after, and the discs are its SIBLINGS raised above it. That gives "the
 * whole card picks" without nesting one interactive element inside another —
 * which is invalid, and which axe reports as `nested-interactive`.
 *
 * The button itself is a zero-size anchor point; everything visible about it
 * is the overlay. */
.card__pick {
  position: static;
  width: 0;
  height: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.card__pick::after {
  content: '';
  position: absolute;
  inset: 0;
  cursor: pointer;
}

/* Focus lands on the button but has to be drawn on the card, since the button
   has no size of its own. */
.card:has(.card__pick:focus-visible) {
  outline: 2px solid var(--color-text);
  outline-offset: 2px;
}

/* The loser of a pick: dimmed AND desaturated, so the winner reads as chosen
   rather than merely brighter. */
.card--loser {
  opacity: 0.4;
  filter: grayscale(0.6);
}

.card__cover {
  width: clamp(120px, 34%, 168px);
  flex: none;
  align-self: flex-start;
  aspect-ratio: 145 / 210;
  border-radius: var(--radius-poster);
  overflow: hidden;
  /* The one shadow the system allows: a poster lifted off its card. */
  box-shadow: var(--shadow-card);
  background: var(--color-fill);
}

.card__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 6px 0 2px;
}

.card__name {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 0.98;
  text-wrap: pretty;
}

/* "Your No. 5" — the user's own measure, so it takes the accent. */
.card__phrase {
  margin-top: 10px;
  font-size: 15px;
  font-weight: 600;
  color: var(--color-accent-text);
}

/* "No duels yet" is not a smaller number, it is no place at all — so it is
   metadata, not an accent. */
.card__phrase--none {
  color: var(--color-text-meta);
}

/* "1997 · 3h 14min" — year and runtime, the app's own metadata line. */
.card__meta {
  margin-top: 6px;
  font-size: 13px;
  color: var(--color-text-meta);
}

.card__actions {
  display: flex;
  gap: 10px;
}

/* Action discs. They appear only on a side you don't own — a film already in
   your ranking has nothing to save and nothing to re-draw.
   `position: relative` lifts them above the pick overlay; without it the card
   swallows their clicks. */
.disc {
  position: relative;
  z-index: 1;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-pill);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-fill);
  color: var(--color-text);
  font-size: 17px;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.disc:hover {
  background: var(--color-fill-hover);
}

.disc--heart {
  font-size: 18px;
}

.disc[aria-pressed='true'] {
  background: var(--color-accent);
  color: var(--color-on-accent);
}

/* The result band. It announces where the winner landed, and it enters from
   under the card's own foot — never over the poster. */
.card__strip {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 44px;
  display: flex;
  align-items: center;
  padding: 0 20px;
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-size: 14px;
  font-weight: 700;
  animation: strip-in 0.3s cubic-bezier(0.2, 0.9, 0.3, 1.1);
}

/* ── End of the round ─────────────────────────────────
   Same height as the pair it replaces, so finishing the round does not make the
   page jump. */
.duel__end {
  background: var(--color-surface);
  border-radius: var(--radius-btn);
  padding: 48px 40px;
  min-height: 632px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 16px;
}

.duel__end h2 {
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 0.98;
  text-wrap: pretty;
}

.duel__end p {
  font-size: 15px;
  line-height: 1.5;
  color: var(--color-text-muted);
  max-width: 40ch;
}

.duel__end-actions {
  display: flex;
  gap: 12px;
  margin-top: 12px;
  flex-wrap: wrap;
}

/* ── Three steps ──────────────────────────────────────
   A numeral instead of an icon: it is the one glyph that means "first, then,
   then" without needing a word to explain it. */
.step__number {
  font-size: 40px;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--color-accent-text);
}

.step h3 {
  margin: 14px 0 0;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.step p {
  margin: 8px 0 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--color-text-muted);
}

/* ── Screenshot rail ──────────────────────────────── */
.shot {
  width: 264px;
  /* Not optional. The width/height attributes are there to reserve space and
     avoid layout shift, but `height` is a presentational hint — with only
     `width` set in CSS it wins, and the image renders 264x2868 instead of
     keeping its ratio. */
  height: auto;
  flex: none;
  border-radius: var(--radius-card);
  border: 1px solid var(--color-line);
  scroll-snap-align: start;
}

/* ── What's inside ────────────────────────────────────
   Rows on a rule. No icons: a feature that needs a pictogram to be understood
   needs better words instead. */
.inside__row {
  border-top: 1px solid var(--color-line);
  padding: 20px 0;
}

.inside__row h3 {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.inside__row p {
  margin: 6px 0 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--color-text-muted);
}

/* ── Closing CTA ──────────────────────────────────── */
.cta-section__icon {
  width: 72px;
  height: 72px;
  border-radius: 16px;
}

.cta-section h2 {
  font-size: 38px;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 0.98;
}

.cta-section__subtitle,
.hero__meta {
  font-size: 13px;
  color: var(--color-text-meta);
}

/* ── Support hero ─────────────────────────────────── */
.support-hero__icon {
  width: 96px;
  height: 96px;
  border-radius: 22px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
  margin-bottom: var(--spacing-md);
  /* `img` is display:block (base.css), so text-align on .support-hero does not
     reach it — it sat hard left while the heading under it was centred. */
  margin-inline: auto;
}

.support-hero__subtitle {
  font-size: 1.125rem;
  color: var(--color-text-muted);
  margin-top: var(--spacing-sm);
}

/* ── Support Sections ─────────────────────────────── */
.support-section {
  padding: var(--spacing-xl) 0;
}

.support-section--alt {
  background: var(--color-fill);
}

.container--narrow {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 var(--spacing-md);
}

/* ── FAQ ──────────────────────────────────────────── */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: var(--spacing-lg);
}

.faq-item {
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
  overflow: hidden;
  transition: background var(--transition-base);
}

.faq-item[open] {
  background: var(--color-surface-hover);
}

.faq-item__question {
  cursor: pointer;
  font-size: 1rem;
  font-weight: 600;
  padding: 20px var(--spacing-md);
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-sm);
  user-select: none;
}

.faq-item__question::-webkit-details-marker {
  display: none;
}

.faq-item__question::after {
  content: '+';
  font-size: 1.5rem;
  font-weight: 300;
  color: var(--color-accent-text);
  flex-shrink: 0;
  line-height: 1;
  transition: transform var(--transition-fast);
}

.faq-item[open] .faq-item__question::after {
  transform: rotate(45deg);
}

.faq-item__answer {
  padding: 0 var(--spacing-md) 20px;
  color: var(--color-text-muted);
}

.faq-item__answer p {
  font-size: 0.9375rem;
  line-height: 1.7;
}

.faq-item__answer p + p {
  margin-top: var(--spacing-sm);
}

.faq-item__answer ul {
  margin: var(--spacing-sm) 0 0 var(--spacing-sm);
  padding-left: var(--spacing-sm);
  font-size: 0.9375rem;
  line-height: 1.8;
}

.faq-item__answer a {
  color: var(--color-accent-text);
  text-decoration: none;
}

.faq-item__answer a:hover {
  text-decoration: underline;
}

/* ── Contact Cards ────────────────────────────────── */
.contact-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--spacing-md);
  margin-top: var(--spacing-lg);
}

.contact-card {
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
  padding: var(--spacing-md);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.contact-card__icon {
  font-size: 2rem;
}

.contact-card h3 {
  margin: 0;
}

.contact-card p {
  font-size: 0.9375rem;
  color: var(--color-text-muted);
  margin: 0;
  flex: 1;
}

.contact-card__btn {
  text-decoration: none;
  word-break: break-all;
  margin-top: auto;
}

/* ── Privacy Policy Body ──────────────────────────── */
.policy-body {
  margin-top: var(--spacing-lg);
  color: var(--color-text-muted);
  font-size: 0.9375rem;
  line-height: 1.8;
}

.policy-updated {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  margin-bottom: var(--spacing-lg);
}

.policy-body h3 {
  color: var(--color-text);
  font-size: 1.0625rem;
  margin-top: var(--spacing-lg);
  margin-bottom: 8px;
}

.policy-body h3:first-of-type {
  margin-top: 0;
}

.policy-body ul {
  margin: 8px 0 0 var(--spacing-sm);
  padding-left: var(--spacing-sm);
}

.policy-body a {
  color: var(--color-accent-text);
  text-decoration: none;
}

.policy-body a:hover {
  text-decoration: underline;
}

/* ── Footer Links ─────────────────────────────────── */
.footer__links {
  display: flex;
  align-items: center;
  gap: 16px;
}

.footer__link {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.footer__link:hover {
  color: var(--color-text);
}

/* ── Sticky Nav States ────────────────────────────── */
.nav.scrolled {
  /* tinta at .85 — kept in rgba for the blur, so it has to be
     changed by hand whenever --color-bg moves. */
  background: rgba(16, 16, 18, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-line);
}