/* Patois homepage.

   One idea: the product is a story about a song arriving in the wrong app, so
   the page tells it. A hero that shows the two songs side by side, a ticker,
   then a phone that sticks to the page while the story scrolls past it, and
   the screen changes beat by beat.

   Colour is lifted from the artwork already on the page (cobalt, tomato,
   butter, lilac). Type is one heavy grotesque; the words that matter sit on a
   block of colour. */

:root {
  color-scheme: light;

  --bg: #fff4df;
  --ink: #14110f;
  --blue: #2b3cff;
  --tomato: #ff5b35;
  --butter: #ffd23f;
  --lilac: #c9b6ff;

  --muted: rgba(20, 17, 15, .62);
  --rule: rgba(20, 17, 15, .5);
  --focus: #1c53d6;

  --display: "Gabarito", "Host Grotesk", "Helvetica Neue", Arial, sans-serif;

  --gutter: clamp(20px, 5vw, 72px);
  --frame: 12px;                       /* the dark margin around every panel */
  --radius: clamp(22px, 2.6vw, 36px);
  --fs-h1: clamp(46px, 6.4vw, 96px);
  --fs-body: clamp(16px, 1.4vw, 20px);
  --fs-small: clamp(13px, 1.1vw, 15px);

  /* Both embeds have a hard minimum size before they collapse to a compact bar
     (Spotify needs 340x352), so they render at full size and the tile is scaled
     down around them. */
  --tile-scale: .8;
  --tile-w: calc(340px * var(--tile-scale));
  --tile-h: calc(352px * var(--tile-scale));
}

* { box-sizing: border-box; }

:where(a, button, input, [tabindex]):focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 6px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

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

html { background: var(--ink); }

body {
  margin: 0;
  background: var(--ink);
  color: var(--bg);
  font-family: var(--display);
  font-optical-sizing: auto;
  font-weight: 400;
  overflow-x: clip;
}

img { display: block; max-width: 100%; }
a { color: inherit; }

.wrap {
  width: 100%;
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* One family, kept calm: big type is regular weight and lowercase-friendly, the
   way the first version of the page spoke. Weight only goes up for controls. */
.brand, .btn, .card figcaption, .ticker, .beat__text,
.get__title, .pick__name, .footer__wordmark, .headline {
  font-family: var(--display);
  font-weight: 500;
}
.brand, .btn, .footer__wordmark { font-weight: 700; }

/* the words that matter sit on a block of colour, tilted like a sticker */
.mark {
  display: inline-block;
  padding: 0 .19em .08em;
  border-radius: .19em;
  background: var(--tomato);
  rotate: -2deg;
}

/* ---------- masthead ---------- */

.masthead {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: var(--frame) var(--frame) 0;
  padding: 18px max(var(--gutter), calc((100% - 1360px) / 2 + var(--gutter))) 0;
  border-radius: var(--radius) var(--radius) 0 0;
  background: var(--bg);
  color: var(--ink);
}
/* the dock: a small floating copy of the masthead, shown once the masthead
   has scrolled away (main.js), so the logo and download are always in reach */
.dock {
  position: fixed;
  top: calc(var(--frame) + 6px);
  left: 50%;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 6px 6px 6px 14px;
  border: 1px solid rgba(20, 17, 15, .12);
  border-radius: 999px;
  background: rgba(255, 244, 223, .86);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: 0 8px 28px rgba(20, 17, 15, .22);
  color: var(--ink);
  translate: -50% calc(-100% - 24px);
  opacity: 0;
  pointer-events: none;
  transition: translate .4s cubic-bezier(.2, .9, .3, 1.15), opacity .25s ease;
}
.dock.is-on { translate: -50% 0; opacity: 1; pointer-events: auto; }
.dock .brand { min-height: 36px; font-size: 21px; }
.dock .brand__ico { width: 26px; height: 26px; }
.dock .btn { padding: 8px 16px; font-size: 16px; }

.brand {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 30px;
  letter-spacing: -.02em;
  text-decoration: none;
}

.brand { gap: 10px; }
.brand__ico {
  width: 34px;
  height: 34px;
  border-radius: 22.5%;   /* the app icon's own rounded square */
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 22px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-size: 20px;
  text-decoration: none;
  white-space: nowrap;
  transition: background .2s ease, color .2s ease, rotate .25s cubic-bezier(.3, 1.6, .5, 1);
}
.btn__logo { width: 18px; height: auto; filter: invert(1); flex: none; transition: filter .2s ease; }
.btn:hover { background: var(--tomato); color: var(--ink); rotate: -2deg; }
.btn:hover .btn__logo { filter: none; }

/* ---------- hero ---------- */

.hero {
  position: relative;
  /* the masthead above now brings 18px of its own */
  padding: clamp(10px, calc(5vw - 18px), 54px) 0 clamp(56px, 7vw, 104px);
}

.hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(24px, 4vw, 64px);
}

.headline {
  margin: 0;
  font-size: var(--fs-h1);
  font-weight: 600;
  line-height: .96;
  letter-spacing: -.045em;
}
.ln { display: block; }
.hero__what {
  max-width: 28em;
  margin: clamp(22px, 2.6vw, 34px) 0 0;
  font-size: var(--fs-body);
  line-height: 1.4;
}
.hero__getrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin-top: 20px;
}
.hero__for { color: var(--muted); font-size: var(--fs-small); }
.btn--lg { padding: 14px 26px; font-size: 20px; }

.hero__sub {
  max-width: 24em;
  margin: clamp(16px, 2vw, 26px) 0 0;
  color: var(--muted);
  font-size: clamp(18px, 1.7vw, 24px);
  line-height: 1.25;
  letter-spacing: -.01em;
  text-wrap: balance;
}

/* ---------- paste a link ---------- */

.paste {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  max-width: 560px;
  margin-top: clamp(22px, 2.6vw, 34px);
}
.paste__label,
.paste__out { flex-basis: 100%; }
.paste__label { font-size: var(--fs-small); color: var(--muted); }

.paste__input {
  flex: 1 1 260px;
  min-height: 56px;
  padding: 0 24px;
  border: 3px solid var(--ink);
  border-radius: 999px;
  background: #fff;
  color: inherit;
  font: inherit;
  font-size: var(--fs-body);
}
.paste__input::placeholder { color: var(--muted); }

.paste__go {
  min-height: 56px;
  padding: 0 28px;
  border: 3px solid var(--ink);
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font: inherit;
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.paste__go:hover { background: var(--tomato); border-color: var(--ink); color: var(--ink); }
.paste__go[disabled] { opacity: .45; cursor: default; }

.paste__out {
  min-height: 1.4em;
  margin: 2px 0 0;
  font-size: var(--fs-small);
}
.paste__out a { font-weight: 700; }
.paste__out--error { color: #9b1c1c; }

/* ---------- the two songs ---------- */

/* The tile size follows the column it sits in (main.js sets --tile-scale from
   the width), so the two songs sit side by side without ever overlapping. */
.convert {
  --tile-scale: .62;
  --tile-w: calc(340px * var(--tile-scale));
  --tile-h: calc(352px * var(--tile-scale));
  position: relative;
  width: min(100%, 540px);
  height: calc(var(--tile-h) + 100px);
  margin-inline: auto;
  perspective: 1100px;
}

.card {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: var(--tile-w);
  margin: 0;
  transition: rotate .3s cubic-bezier(.3, 1.6, .5, 1);
}
.card--spotify { top: 0;    left: 0;  rotate: -4deg; }
.card--apple   { top: 64px; right: 0; rotate: 3deg; }
.card:hover { rotate: 0deg; }
.card figcaption {
  position: relative;
  z-index: 1;
  align-self: flex-start;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
}
.card--spotify figcaption { background: #1ed760; color: var(--ink); }
.card--apple figcaption { background: #fa2d48; color: #fff; }

.card__embed {
  position: relative;
  overflow: hidden;
  width: var(--tile-w);
  height: var(--tile-h);
  border-radius: 20px;
  background: var(--ink);
  box-shadow:
    0 calc(6px + var(--lift) * 16px) calc(14px + var(--lift) * 30px)
    rgba(20, 17, 15, calc(.14 + var(--lift) * .18));
  transition: box-shadow var(--float-ms, 420ms) ease-out;
}

.card__stage {
  position: absolute;
  top: 0;
  left: 0;
  width: 340px;
  height: 352px;
  transform: scale(var(--tile-scale));
  transform-origin: top left;
}
.card__embed iframe { display: block; width: 100%; border: 0; background: transparent; }
.card--spotify .card__embed iframe { height: 100%; }

/* Both tiles rest as a plain album cover and hand over to the real player on
   hover. Spotify's embed fills the tile, so its cover sits on top and fades;
   Apple's is a fixed bar, so it slides up over the cover instead. */
.card__cover,
.card--apple .card__art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.card__cover {
  z-index: 2;
  pointer-events: none;
  transition: opacity .3s ease;
}
.card:hover .card__cover,
.card:focus-within .card__cover { opacity: 0; }

.card--apple .card__embed iframe {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 175px;
  opacity: 0;
  transform: translateY(12%);
  transition: opacity .3s ease, transform .3s ease;
}
.card--apple:hover .card__embed iframe,
.card--apple:focus-within .card__embed iframe { opacity: 1; transform: none; }

/* No hover to give: show the players outright. The cover stays behind them, so
   a slow or refused embed falls back to the album art instead of a hole. */
@media (hover: none) {
  .card__cover { z-index: 0; }
  .card--spotify .card__embed iframe { position: relative; z-index: 1; }
  .card--apple .card__embed iframe { opacity: 1; transform: none; }
}

.convert__arrow {
  position: absolute;
  z-index: 2;
  top: 10%;
  left: 41.5%;
  width: 17%;
  height: auto;
  color: var(--ink);
  overflow: visible;
  animation: arrow-nudge 1.8s ease-in-out infinite;
}
@keyframes arrow-nudge { 0%, 100% { translate: 0 0; } 50% { translate: 4px 8px; } }

/* The float handler only writes --rx/--ry/--tx/--ty/--lift; the easing below is
   what actually animates, so there is no JS loop to stall or die. Depth and
   direction come from each element's data-float. */
[data-float] {
  --rx: 0deg;
  --ry: 0deg;
  --tx: 0px;
  --ty: 0px;
  --lift: 0;
  transform: translate3d(var(--tx), var(--ty), 0) rotateX(var(--rx)) rotateY(var(--ry));
  transform-style: preserve-3d;
  transition: transform var(--float-ms, 420ms) var(--float-ease, cubic-bezier(.22, 1.24, .36, 1));
}
.headline[data-float] { transition: transform calc(var(--float-ms, 700ms) * 1.9) cubic-bezier(.2, .7, .3, 1); }
.is-floating [data-float] { will-change: transform; }
.is-measuring [data-float],
.is-measuring .card__embed { transition: none !important; }

/* ---------- ticker ---------- */

.ticker {
  overflow: hidden;
  padding: 18px 0 16px;
  background: var(--butter);
  color: var(--ink);
  font-size: clamp(22px, 2.4vw, 34px);
  font-weight: 600;
  letter-spacing: -.03em;
  line-height: 1;
  white-space: nowrap;
}
.ticker__track {
  display: flex;
  width: max-content;
  animation: ticker 38s linear infinite;
}
.ticker__track span { padding-right: .4em; }
@keyframes ticker { to { transform: translateX(-50%); } }

/* ---------- the story ---------- */

.tale {
  scroll-margin-top: 110px;
  padding-block: clamp(48px, 6vw, 80px);
  background: var(--blue);
  color: var(--bg);
}

.tale__title {
  margin: 0 0 clamp(32px, 4vw, 56px);
  font-size: clamp(40px, 4.5vw, 64px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.04em;
}

.tale__beats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(16px, 2.2vw, 32px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.beat { display: flex; flex-direction: column; gap: 24px; }
.beat__text {
  margin: 0;
  font-size: clamp(22px, 1.9vw, 27px);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.02em;
  text-wrap: balance;
}
.beat em { color: var(--butter); font-style: normal; }

/* the phone: a plain outline, the screen inside sized from its own width */
.phone {
  position: relative;
  overflow: hidden;
  aspect-ratio: 296 / 420;
  border: clamp(6px, .6vw, 8px) solid var(--ink);
  border-radius: clamp(32px, 3.2vw, 44px);
  background: var(--bg);
}
.phone__screen {
  position: absolute;
  inset: 0;
  color: var(--ink);
  container-type: inline-size;
}

.scr {
  position: absolute;
  inset: 0;
  font-family: var(--display);
  font-size: 4.4cqw;      /* cqw needs an ancestor container: this is the screen's child */
  line-height: 1.25;
}

:where(.scr p, .scr b, .scr i, .scr span) { margin: 0; font-style: normal; }
.scr img { display: block; }

/* 1. the message: a text thread, the song arriving as a grey bubble */
.scr--msg { display: flex; flex-direction: column; gap: 2cqw; padding: 11cqw 5cqw 5cqw; }
.msg__head { display: grid; justify-items: center; gap: 1cqw; margin-bottom: 2cqw; }
.msg__avatar { display: grid; place-items: center; width: 11cqw; height: 11cqw; border-radius: 50%; background: var(--lilac); font-weight: 700; font-size: .95em; }
.scr__who { font-size: .8em; font-weight: 600; }
.msg__time { align-self: center; margin-bottom: 1cqw; color: rgba(20, 17, 15, .5); font-size: .72em; }
.bub { align-self: flex-start; max-width: 80%; border-radius: 5cqw; background: #e8e2d6; }
.bub--link { display: flex; align-items: center; gap: 3cqw; padding: 2.4cqw; border-bottom-left-radius: 1.4cqw; }
.bub--link img { width: 20cqw; height: 20cqw; border-radius: 2.4cqw; object-fit: cover; }
.bub--link p { display: grid; padding-right: 2cqw; }
.bub--link b { font-size: 1.05em; }
.bub--link span { color: rgba(20, 17, 15, .6); }
.bub--intro, .bub--text { padding: 2.4cqw 4cqw; border-bottom-left-radius: 1.4cqw; }
.bub--sent { align-self: flex-end; padding: 2.4cqw 4cqw; border-bottom-right-radius: 1.4cqw; background: var(--blue); color: #fff; }
.bub--link i { display: flex; align-items: center; gap: 1.2cqw; margin-top: .6cqw; font-size: .78em; font-weight: 600; color: rgba(20, 17, 15, .7); }
.bub--link i::before { content: ""; width: 2.4cqw; height: 2.4cqw; border-radius: 50%; background: #1ed760; }
.msg__compose { display: flex; align-items: center; justify-content: flex-end; margin-top: auto; padding: 1.6cqw 1.6cqw 1.6cqw 4cqw; border: .4cqw solid rgba(20, 17, 15, .2); border-radius: 99px; color: rgba(20, 17, 15, .4); font-size: .85em; }
.msg__send { display: grid; place-items: center; width: 7cqw; height: 7cqw; border-radius: 50%; background: var(--blue); color: #fff; font-size: .9em; font-weight: 700; }
.msg__send::after { content: "\2191"; }

/* 2. the wrong platform: the Spotify logo, crossed out */
.scr--wrong { display: grid; place-content: center; background: #121212; }
.wrong__cover { position: relative; width: 44cqw; }
.wrong__cover img { display: block; width: 100%; }
.wrong__cover b { position: absolute; right: -5cqw; bottom: -5cqw; display: grid; place-items: center; width: 16cqw; height: 16cqw; border-radius: 50%; background: var(--tomato); color: var(--ink); font-size: 1.4em; }

/* 3. the share sheet: back in the thread, the song bubble lifted by a long press */
.scr--share { background: var(--bg); }
.share__ghost { position: absolute; top: 14cqw; left: 5cqw; }
.share__dim { position: absolute; inset: 0; background: rgba(20, 17, 15, .62); }
.share__bub { position: absolute; top: 26cqw; left: 5cqw; scale: 1.05; transform-origin: left center; box-shadow: 0 3cqw 8cqw rgba(0, 0, 0, .4); }
.share__tap { position: absolute; top: 35cqw; left: 46cqw; width: 13cqw; height: 13cqw; border: .8cqw solid var(--tomato); border-radius: 50%; background: rgba(255, 91, 53, .3); opacity: 0; }
.sheet { position: absolute; right: 0; bottom: 0; left: 0; padding: 5cqw 5cqw 6cqw; border-radius: 7cqw 7cqw 0 0; background: var(--bg); }
.sheet__head { display: flex; align-items: center; gap: 3cqw; margin-bottom: 5cqw; }
.sheet__head img { width: 12cqw; height: 12cqw; border-radius: 2cqw; object-fit: cover; }
.sheet__head p { display: grid; }
.sheet__head span { color: rgba(20, 17, 15, .6); font-size: .78em; }
.sheet__apps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2cqw; text-align: center; font-size: .78em; }
.app { display: grid; justify-items: center; gap: 1.4cqw; }
.app__ico { width: 15cqw; height: 15cqw; border-radius: 3.6cqw; background: #d9d2c2; object-fit: cover; }
.app__ico svg { display: block; width: 100%; height: 100%; padding: 22%; box-sizing: border-box; fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.app__ico--msg { background: var(--lilac); }
.app__ico--msg svg { fill: var(--ink); stroke: none; }
.app__ico--mail { background: var(--butter); }
.app__ico--notes { background: #fff; box-shadow: inset 0 0 0 .4cqw rgba(20, 17, 15, .12); }
.app--patois .app__ico { outline: .9cqw solid var(--tomato); outline-offset: .6cqw; }
.app--patois span { font-weight: 700; }

/* 4. voilà */
.scr--done { display: grid; align-content: center; justify-items: center; gap: 3cqw; padding: 8cqw; background: #fa2d48; color: #fff; text-align: center; }
.done__cover { width: 44cqw; aspect-ratio: 1; border-radius: 3cqw; object-fit: cover; }
.done__title b { font-size: 1.25em; }
.done__pill { padding: 2cqw 4.5cqw; border-radius: 99px; background: var(--ink); color: var(--bg); font-weight: 600; font-size: .8em; }

/* Each phone plays its screen when it scrolls into view (main.js toggles
   .is-in), and plays it again on the way back. Without JS they just sit there. */
.js .beat .phone {
  opacity: 0;
  translate: 0 28px;
  transition: opacity .5s ease, translate .7s cubic-bezier(.2, .9, .2, 1);
}
.js .beat.is-in .phone { opacity: 1; translate: 0 0; }

.beat.is-in .bub--intro { animation: bubble-in .5s .3s cubic-bezier(.2, 1.3, .4, 1) both; }
.beat.is-in .bub--link { animation: bubble-in .5s .9s cubic-bezier(.2, 1.3, .4, 1) both; }
.beat.is-in .bub--text { animation: bubble-in .5s 1.5s cubic-bezier(.2, 1.3, .4, 1) both; }
.beat.is-in .bub--sent { animation: bubble-in-right .5s 2.3s cubic-bezier(.2, 1.3, .4, 1) both; }
.beat.is-in .wrong__cover { animation: shake .6s .7s both; }
.beat.is-in .wrong__cover b { animation: pop .5s .5s cubic-bezier(.2, 1.6, .4, 1) both; }
.beat.is-in .share__tap { animation: press 1s .4s ease-out both; }
.beat.is-in .share__bub { animation: lift .5s .3s cubic-bezier(.2, 1.3, .4, 1) both; }
.beat.is-in .sheet { animation: sheet-up .6s 1.3s cubic-bezier(.2, .8, .2, 1) both; }
.beat.is-in .app--patois .app__ico { animation: icon-press 1.2s 2.1s ease-in-out both, ring 1.8s 2.1s ease-out infinite; }
.beat.is-in .done__cover { animation: pop .6s .35s cubic-bezier(.2, 1.4, .4, 1) both; }
.beat.is-in .done__title,
.beat.is-in .done__pill { animation: rise .5s .8s ease-out both; }

@keyframes bubble-in { from { opacity: 0; scale: .7; translate: -4cqw 2cqw; } }
@keyframes bubble-in-right { from { opacity: 0; scale: .7; translate: 4cqw 2cqw; } }
@keyframes pop { from { opacity: 0; scale: .5; } }
@keyframes shake { 0%, 100% { translate: 0; } 20% { translate: -3cqw 0; rotate: -3deg; } 40% { translate: 3cqw 0; rotate: 3deg; } 60% { translate: -2cqw 0; } 80% { translate: 2cqw 0; } }
@keyframes press { 0% { opacity: 0; scale: 1.5; } 40% { opacity: 1; scale: 1; } 100% { opacity: 1; scale: .9; } }
@keyframes lift { from { scale: 1; box-shadow: none; } }
@keyframes sheet-up { from { translate: 0 105%; } }
@keyframes icon-press { 30% { scale: .85; } 60% { scale: 1.12; } 100% { scale: 1; } }
@keyframes ring { from { box-shadow: 0 0 0 0 rgba(255, 91, 53, .55); } to { box-shadow: 0 0 0 5cqw rgba(255, 91, 53, 0); } }
@keyframes rise { from { opacity: 0; translate: 0 3cqw; } }

/* ---------- get it ----------
   One loud panel, three stickers: each place Patois runs is a card that tilts
   like it was slapped on, and straightens up under the pointer. */

.get {
  padding: clamp(44px, 7vw, 96px) var(--gutter) clamp(52px, 8vw, 110px);
  background: var(--tomato);
  color: var(--ink);
  text-align: center;
  scroll-margin-top: 110px;
}
.get__title {
  margin: 0;
  font-size: clamp(56px, 8vw, 120px);
  font-weight: 600;
  line-height: .9;
  letter-spacing: -.045em;
}
.get__title .mark { background: var(--ink); color: var(--bg); }
.get__sub { margin: 18px 0 0; font-size: clamp(18px, 1.8vw, 24px); }

.get__picks {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 300px));
  justify-content: center;
  gap: clamp(18px, 2.4vw, 36px);
  margin-top: clamp(32px, 4.5vw, 60px);
}

.pick {
  display: grid;
  justify-items: start;
  gap: 6px;
  padding: 22px 22px 20px;
  border: 3px solid var(--ink);
  border-radius: 26px;
  background: var(--bg);
  box-shadow: 7px 7px 0 var(--ink);
  color: var(--ink);
  text-align: left;
  text-decoration: none;
  rotate: var(--tilt, 0deg);
  transition: rotate .3s cubic-bezier(.3, 1.6, .5, 1), translate .3s cubic-bezier(.3, 1.6, .5, 1), box-shadow .2s ease;
}
.pick--iphone { --tilt: -3deg; background: var(--butter); }
.pick--mac { --tilt: 2deg; background: var(--lilac); }
.pick--chrome { --tilt: -1.5deg; background: var(--bg); }
.pick:hover,
.pick:focus-visible { rotate: 0deg; translate: -3px -6px; box-shadow: 12px 13px 0 var(--ink); }
.pick:active { translate: 3px 3px; box-shadow: 3px 3px 0 var(--ink); }

.pick__ico { width: 46px; height: 46px; margin-bottom: 8px; fill: none; stroke: var(--ink); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.pick__name { font-size: clamp(32px, 3vw, 42px); font-weight: 600; line-height: 1; letter-spacing: -.035em; }
.pick__what { font-size: 16px; line-height: 1.3; }
.pick__where {
  display: inline-flex;
  gap: 6px;
  margin-top: 14px;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--bg);
  font-size: 15px;
  font-weight: 700;
}
.pick__where i { font-style: normal; transition: translate .25s ease; }
.pick:hover .pick__where i { translate: 2px -2px; }

/* ---------- footer ---------- */

.footer__stage {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(12px, 2.2vw, 32px);
  padding: clamp(32px, 4vw, 48px) var(--gutter) 0;
}
.footer__radio { width: clamp(72px, 10.4vw, 150px); height: auto; }
.footer__wordmark {
  margin: 0;
  color: var(--bg);
  font-size: clamp(88px, 13.9vw, 200px);
  font-weight: 800;
  line-height: .85;
  letter-spacing: -.06em;
}

.footer__legal {
  margin: 0;
  padding: 18px var(--gutter) 22px;
  color: var(--bg);
  font-size: var(--fs-small);
  line-height: 1;
  text-align: center;
}
.footer__legal a { display: inline-block; padding: 14px 3px; }   /* 44px target */
.footer__marks {
  margin: 0 auto;
  max-width: 34em;
  padding: 0 var(--gutter) 22px;
  color: var(--bg);
  font-size: var(--fs-small);
  line-height: 1.4;
  text-align: center;
  opacity: .6;
}

/* ---------- framed panels ----------
   The page is a dark canvas and every section is a rounded panel inset from its
   edges, so the dark shows through as a margin all round. The masthead is the
   top of the cream hero panel. */

.hero,
.ticker,
.tale,
.get,
.footer {
  margin-inline: var(--frame);
  border-radius: var(--radius);
}
.hero { margin-top: 0; border-top-left-radius: 0; border-top-right-radius: 0; background: var(--bg); color: var(--ink); overflow: clip; }
.ticker, .tale, .get, .footer { margin-top: var(--frame); }
.footer { margin-bottom: 0; }

/* ---------- narrow screens ---------- */

@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; }
  .convert { margin-top: 12px; }
  .tale__beats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 20px; }
}

@media (max-width: 560px) {
  .convert { height: calc(var(--tile-h) * 2 + 150px); }
  .card--apple { top: calc(var(--tile-h) + 86px); }
  .convert__arrow { top: calc(var(--tile-h) + 28px); left: 50%; width: 16%; }
}

@media (max-width: 780px) {
  :root {
    --frame: 8px;
    --radius: 22px;
    --fs-h1: clamp(42px, 13vw, 60px);
  }

  .brand { font-size: 26px; }
  .btn { font-size: 17px; padding: 9px 16px; }
  .paste__input { flex: 1 1 0; min-width: 0; padding: 0 18px; font-size: 16px; }
  .paste__go { flex: none; padding: 0 22px; }

  .masthead { padding-top: 18px; }
  .dock { gap: 12px; }
  .footer__stage { padding-top: 28px; }
}

@media (max-width: 860px) {
  .get__picks { grid-template-columns: minmax(0, 360px); }
  .pick { --tilt: 0deg; }
  .pick--iphone { --tilt: -1.5deg; }
  .pick--mac { --tilt: 1.2deg; }
}

@media (max-width: 480px) {
  .tale__beats { grid-template-columns: 1fr; }
  .beat { width: 100%; max-width: 320px; margin-inline: auto; }
  .beat__text { text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
  .ticker__track { transform: none; }
  .mark, .card, .btn:hover, .pick { rotate: none; }
  [data-float] { --tx: 0px !important; --ty: 0px !important; --rx: 0deg !important; --ry: 0deg !important; --lift: 0 !important; }
}

/* ---------- float tuner (only rendered on #tune) ---------- */

.tuner {
  position: fixed;
  z-index: 99;
  right: 16px;
  bottom: 16px;
  width: 232px;
  padding: 14px;
  border: 1px solid rgba(0, 0, 0, .18);
  border-radius: 10px;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(8px);
  font-size: 12px;
  line-height: 1.4;
}
.tuner h2 { display: flex; align-items: center; justify-content: space-between; margin: 0 0 10px; font-size: 12px; font-weight: 700; }
.tuner__hide { width: 20px; height: 20px; padding: 0; border: 0; border-radius: 4px; background: transparent; color: inherit; font: inherit; font-size: 15px; line-height: 1; cursor: pointer; }
.tuner__hide:hover { background: rgba(0, 0, 0, .08); }
.tuner label { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; margin-bottom: 9px; }
.tuner output { font-variant-numeric: tabular-nums; opacity: .6; }
.tuner input { grid-column: 1 / -1; width: 100%; margin: 0; }
.tuner button { width: 100%; margin-top: 4px; padding: 6px; border: 1px solid var(--ink); border-radius: 6px; background: transparent; font: inherit; cursor: pointer; }
.tuner button:hover { background: var(--ink); color: #fff; }