/* songinfos.de. Colours are the app's: systemPink as the accent, the five measure identities of
   docs/Design/Surfaces.md §7 for forms (plays violet, time indigo, extent blue, rating red, skips
   orange), the cover's own colour wherever an object has a picture. The icon gradient belongs to
   the waveform only. */
:root {
  --bg: #ffffff; --ink: #111116; --muted: #74747e; --soft: #f5f5f7; --soft2: #e8e8ed; --line: rgba(17,17,22,.08);
  --accent: #ff2d55;
  --plays: #b756d2; --time: #725ccc; --extent: #5988cf; --rating: #d0585c; --skips: #d5721a; --up: #1f9d55;
  --brand: linear-gradient(180deg, #ff1d48, #ff2c8f 50%, #b02bff);
  --text: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --num: ui-rounded, "SF Pro Rounded", system-ui, -apple-system, sans-serif;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --spring: cubic-bezier(.34, 1.4, .64, 1);
  --gut: 16px;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #000; --ink: #f5f5f7; --muted: #8e8e98; --soft: #151518; --soft2: #26262b; --line: rgba(255,255,255,.09);
          --accent: #ff375f; --plays: #b95ad3; --time: #8773d3; --skips: #e78e40; --rating: #d15c60; }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--text); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 8px; }
button { font: inherit; color: inherit; }

/* ---------- type ---------- */
.h-xl, .h-l { margin: 0; font-family: var(--text); font-weight: 800; letter-spacing: -.05em; line-height: .98; text-wrap: balance; }
.h-xl { font-size: clamp(42px, 11.6vw, 124px); max-width: 11ch; margin-inline: auto; }
.h-l { font-size: clamp(34px, 8.8vw, 74px); }
.narrow { max-width: 13ch; margin-inline: auto; }
:lang(ja) .h-xl, :lang(ja) .narrow { max-width: 9.5em; }
:lang(ja) .h-xl, :lang(ja) .h-l { letter-spacing: -.02em; line-height: 1.12; word-break: auto-phrase; }
.lead { margin: 16px 0 0; font: 500 18px/1.45 var(--text); color: var(--muted); max-width: 32ch; text-wrap: pretty; }
.kick { display: block; margin-bottom: 12px; font: 650 14px var(--text); color: var(--accent); }
.small { font: 500 13px/1.35 var(--text); color: var(--muted); }
.center { text-align: center; }
.center .lead { margin-inline: auto; }
.between { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.mt { margin-top: 14px; }

/* ---------- top bar: the name stays visible ---------- */
.top { position: sticky; top: 0; z-index: 50; display: flex; justify-content: space-between; align-items: center; gap: 12px;
  min-height: 56px; padding: env(safe-area-inset-top) max(var(--gut), env(safe-area-inset-right)) 0 max(var(--gut), env(safe-area-inset-left));
  background: color-mix(in srgb, var(--bg) 76%, transparent); -webkit-backdrop-filter: blur(20px) saturate(1.8); backdrop-filter: blur(20px) saturate(1.8);
  border-bottom: 1px solid transparent; transition: border-color .3s; }
.top.scrolled { border-bottom-color: var(--line); }
.brand { display: flex; align-items: center; gap: 10px; font: 700 17px var(--text); letter-spacing: -.01em; text-decoration: none; }
.brand img { width: 30px; height: 30px; border-radius: 7px; box-shadow: 0 0 0 .5px var(--line); }
.get { padding: 8px 16px; border-radius: 99px; background: var(--ink); color: var(--bg); font: 600 14px var(--text); text-decoration: none; transition: transform .2s var(--ease); }
.get:active { transform: scale(.96); }

.store { display: inline-block; margin-top: 28px; transition: transform .25s var(--ease); }
.store img { height: 54px; width: auto; }
.store:hover { transform: translateY(-2px); }
.store.light img { filter: none; }

section { position: relative; padding: 104px var(--gut) 0; }
.tile { position: relative; overflow: hidden; border-radius: 26px; background: var(--soft); padding: 18px; }
.tile.row { display: flex; flex-direction: row !important; align-items: center; gap: 18px; }

/* the app's segmented control */
.seg { display: flex; gap: 2px; padding: 3px; border-radius: 99px; background: var(--soft2); position: relative; }
.seg button { flex: 1; appearance: none; border: 0; background: none; cursor: pointer; padding: 9px 4px; border-radius: 99px; font: 600 14px var(--text); color: var(--muted); position: relative; z-index: 1; transition: color .3s; }
.seg button[aria-pressed="true"] { color: var(--ink); }
.seg .thumb { position: absolute; z-index: 0; top: 3px; bottom: 3px; left: 0; border-radius: 99px; background: var(--bg); box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 0 0 .5px var(--line); transition: transform .45s var(--spring), width .45s var(--spring); }
@media (prefers-color-scheme: dark) { .seg .thumb { background: #3a3a40; } }

/* ---------- reveal on scroll ---------- */
.js [data-in] { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease), transform 1.1s var(--ease); transition-delay: var(--d, 0s); }
.js [data-in].in { opacity: 1; transform: none; }
.js [data-split] .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; }
.js [data-split] .w > span { display: inline-block; transform: translateY(108%); transition: transform 1s var(--ease); transition-delay: calc(var(--i) * 60ms + var(--d, 0s)); }
.js [data-split].in .w > span { transform: none; }
.js [data-stagger] > * { opacity: 0; transform: translateY(30px) scale(.97); transition: opacity .8s var(--ease), transform 1s var(--ease); transition-delay: calc(var(--i, 0) * 70ms); }
.js [data-stagger].in > * { opacity: 1; transform: none; }

/* ---------- S01 hero: the icon's waveform, breathing ---------- */
.hero { padding-top: 0; }
/* The icon keeps its proportions at every size: one width W sets bar, gap and height alike. */
.wave { --W: min(74vw, 440px, calc(46svh / .7)); display: flex; align-items: center; justify-content: center; gap: calc(var(--W) * .042); width: var(--W); height: calc(var(--W) * .7); margin: 6svh auto 4svh;
  transform: translateY(calc(var(--sp, 0) * 60px)) scaleY(calc(1 - var(--sp, 0) * .45)); opacity: calc(1 - var(--sp, 0) * .7); }
.wave i { flex: none; width: calc(var(--W) * .045); height: var(--h); border-radius: 99px; background: var(--brand); background-size: 100% calc(var(--W) * .7); background-position: center; box-shadow: 0 0 40px rgba(255,40,110,.26);
  transform-origin: center; transform: scaleY(.04); }
.wave.go i { animation: rise 1.3s var(--spring) both, breathe 2.6s ease-in-out infinite alternate; animation-delay: calc(var(--i) * 55ms), calc(1.3s + var(--i) * -.37s); }
@keyframes rise { from { transform: scaleY(.04); } to { transform: scaleY(1); } }
@keyframes breathe { from { transform: scaleY(1); } to { transform: scaleY(var(--b, .8)); } }
.hero .lead { max-width: 30ch; font-size: 19px; }

/* ---------- S02 a song ---------- */
.songs { display: flex; gap: 10px; margin: 30px 0 12px; }
.songs button { appearance: none; border: 0; padding: 0; background: none; cursor: pointer; width: 56px; height: 56px; border-radius: 12px; overflow: hidden; opacity: .45; transition: opacity .35s, transform .45s var(--spring), box-shadow .35s; box-shadow: 0 0 0 .5px var(--line); }
.songs button:hover { opacity: .8; }
.songs button[aria-pressed="true"] { opacity: 1; transform: translateY(-3px); box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--c); }
.songs img { width: 100%; height: 100%; object-fit: cover; }
.song { --c: #d03866; border-radius: 30px; padding: 18px; background: color-mix(in srgb, var(--c) 9%, var(--bg)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--c) 15%, transparent); transition: background .7s var(--ease), box-shadow .7s; }
.song .hd { display: grid; grid-template-columns: 96px 1fr; gap: 16px; align-items: center; }
.song .art { width: 96px; height: 96px; border-radius: 14px; overflow: hidden; box-shadow: 0 16px 30px -14px color-mix(in srgb, var(--c) 80%, black); }
.song .art img { width: 100%; height: 100%; object-fit: cover; }
.song .t { font: 750 22px/1.1 var(--text); letter-spacing: -.03em; }
.song .a { margin-top: 3px; font: 600 15px var(--text); color: color-mix(in srgb, var(--c) 82%, var(--ink)); }
.song [data-k], .song .art img { transition: opacity .28s var(--ease), transform .4s var(--ease); }
.song.swap [data-k], .song.swap .art img { opacity: 0; transform: translateY(6px); }
.song.swap .art img { transform: scale(.92); }
.timeline { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 20px; }
.timeline::before { content: ""; position: absolute; left: 5px; right: 5px; top: 5px; height: 1.5px; background: color-mix(in srgb, var(--c) 30%, var(--soft2)); transform-origin: left; transform: scaleX(var(--tl, 1)); transition: transform 1.2s var(--ease) .2s; }
.timeline div { position: relative; padding-top: 20px; }
.timeline div::before { content: ""; position: absolute; top: 0; left: 0; width: 11px; height: 11px; border-radius: 50%; background: color-mix(in srgb, var(--c) 42%, var(--soft2)); }
.timeline div:nth-child(2) { text-align: center; } .timeline div:nth-child(2)::before { left: calc(50% - 5.5px); }
.timeline div:nth-child(3) { text-align: right; } .timeline div:nth-child(3)::before { left: auto; right: 0; background: var(--c); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 22%, transparent); animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--c) 10%, transparent); } }
.timeline small, .lyr small { display: block; font: 700 10.5px var(--text); letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.timeline b { font: 650 15px/1.3 var(--text); }
.facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 18px; }
.facts div { padding: 12px; border-radius: 16px; background: var(--bg); }
.facts b { display: block; font: 750 22px/1 var(--num); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.facts span { font: 500 12px var(--text); color: var(--muted); }
.lyr { margin-top: 16px; padding: 16px; border-radius: 18px; background: var(--bg); }
.lyr small { margin-bottom: 10px; }
.lyr .lines { height: calc(3 * 1.22em + 8px); overflow: hidden; font: 750 19px/1.22 var(--text); letter-spacing: -.03em; -webkit-mask: linear-gradient(transparent, #000 18%, #000 82%, transparent); mask: linear-gradient(transparent, #000 18%, #000 82%, transparent); }
.lyr .roll { transition: transform .8s var(--ease); }
.lyr p { margin: 0 0 4px; color: color-mix(in srgb, var(--ink) 24%, transparent); transition: color .6s var(--ease); }
.lyr p.on { color: var(--ink); }

/* ---------- S03 the numbers ---------- */
.bento { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 30px; }
.bento .tile { min-height: 150px; display: flex; flex-direction: column; }
.span2 { grid-column: span 2; }
.bento .tile.span2 { min-height: 0; }
.l { font: 600 13px var(--text); color: var(--muted); }
.n { margin-top: auto; font: 750 44px/1 var(--num); letter-spacing: -.045em; font-variant-numeric: tabular-nums; }
.n.mid { font-size: 30px; margin-top: 14px; }
.d { margin-top: 5px; font: 500 13px/1.3 var(--text); color: var(--muted); }
.state { margin-top: 4px; font: 750 21px/1.12 var(--text); letter-spacing: -.03em; }
.spark { display: flex; align-items: flex-end; gap: 4px; height: 28px; margin-top: 10px; }
.spark i { flex: 1; height: var(--h); border-radius: 3px; background: var(--soft2); transform-origin: bottom; }
.spark i.on { background: var(--plays); }
.dots { display: flex; gap: 4px; margin-top: 10px; }
.dots i { width: 11px; height: 11px; border-radius: 50%; background: var(--plays); }
.dots i.off { background: var(--soft2); }
.up { color: var(--up); font-size: .6em; vertical-align: .28em; margin-right: 3px; }
@property --p { syntax: "<number>"; inherits: false; initial-value: 0; }
.ring { --v: 82; --p: var(--v); width: 104px; aspect-ratio: 1; flex: none; display: grid; place-items: center; border-radius: 50%; background: conic-gradient(var(--extent) calc(var(--p) * 1%), var(--soft2) 0); transition: --p 1.6s var(--ease) .3s; }
.ring > div { width: 86%; aspect-ratio: 1; border-radius: 50%; background: var(--soft); display: grid; place-items: center; text-align: center; }
.ring b { font: 750 32px/1 var(--num); letter-spacing: -.04em; }
.ring small { display: block; font: 600 10px var(--text); color: var(--muted); }
.heat { display: grid; grid-template-rows: repeat(7, 1fr); grid-auto-flow: column; gap: 4px; margin-top: 14px; }
.heat i, .legend i { aspect-ratio: 1; border-radius: 3px; background: var(--soft2); }
[data-l="1"] { background: color-mix(in srgb, var(--plays) 24%, var(--soft2)) !important; }
[data-l="2"] { background: color-mix(in srgb, var(--plays) 48%, var(--soft2)) !important; }
[data-l="3"] { background: color-mix(in srgb, var(--plays) 74%, var(--soft2)) !important; }
[data-l="4"] { background: var(--plays) !important; }
.legend { display: flex; align-items: center; justify-content: flex-end; gap: 4px; margin-top: 10px; font: 500 12px var(--text); color: var(--muted); }
.legend i { width: 11px; height: 11px; }
.mini { display: flex; gap: 12px; align-items: center; margin-top: 12px; }
.mini img { width: 54px; height: 54px; border-radius: 12px; object-fit: cover; }
.mini b { display: block; font: 700 17px/1.2 var(--text); letter-spacing: -.02em; }
.genres { display: flex; gap: 2px; height: 12px; margin-top: 14px; border-radius: 6px; overflow: hidden; transform-origin: left; }
.genres i { flex: var(--f); background: var(--extent); opacity: var(--o); }
.glist { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 10px; font: 500 13px var(--text); color: var(--muted); }
.glist span::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 2px; background: var(--extent); opacity: var(--o); }
/* the pieces inside the tiles come alive once the grid is in view */
.js .bento .spark i { transform: scaleY(0); transition: transform .9s var(--spring); transition-delay: calc(.35s + var(--j, 0) * 60ms); }
.js .bento.in .spark i { transform: none; }
.js .bento .dots i { transform: scale(0); transition: transform .5s var(--spring); transition-delay: calc(.4s + var(--j, 0) * 70ms); }
.js .bento.in .dots i { transform: none; }
.js .bento .ring { --p: 0; }
.js .bento.in .ring { --p: var(--v); }
.js .bento .heat i { opacity: 0; transform: scale(.4); transition: opacity .5s, transform .6s var(--spring); transition-delay: calc(.3s + var(--j, 0) * 9ms); }
.js .bento.in .heat i { opacity: 1; transform: none; }
.js .bento .genres { transform: scaleX(0); transition: transform 1.3s var(--ease) .5s; }
.js .bento.in .genres { transform: none; }

/* ---------- S04 the recap ---------- */
.stories { display: flex; justify-content: center; align-items: center; margin-top: 40px; padding-bottom: 10px; }
.story { position: relative; flex: none; width: 236px; aspect-ratio: 9 / 16; border-radius: 28px; overflow: hidden; color: #fff; text-align: left; box-shadow: 0 40px 70px -30px rgba(40,10,40,.55); transition: transform 1.2s var(--spring), opacity 1s var(--ease); }
.story .g { position: absolute; inset: -25%; background-size: cover; background-position: center; filter: blur(28px) saturate(1.3); animation: drift 16s ease-in-out infinite alternate; }
@keyframes drift { from { transform: scale(1.1) translate(-4%, -3%); } to { transform: scale(1.25) translate(4%, 3%); } }
.story .v { position: absolute; inset: 0; background: linear-gradient(rgba(0,0,0,.35), rgba(0,0,0,.55), rgba(0,0,0,.7)); }
.story .in { position: relative; display: flex; flex-direction: column; height: 100%; padding: 12px 16px 20px; }
.story .left { text-align: left; }
.story .ticks { display: flex; gap: 3px; }
.story .ticks i { position: relative; flex: 1; height: 2.5px; overflow: hidden; border-radius: 3px; background: rgba(255,255,255,.3); }
.story .ticks i.on { background: #fff; }
.story .ticks i.go::after { content: ""; position: absolute; inset: 0; background: #fff; transform-origin: left; transform: scaleX(0); animation: tick 5s linear infinite; }
@keyframes tick { to { transform: scaleX(1); } }
.story .wk { margin-top: 10px; font: 600 11px var(--text); opacity: .85; }
.story .push { margin-top: auto; }
.story .gap { flex: .6; }
.story .mid { margin: auto 0; text-align: center; }
.story .cap { font: 700 11px var(--text); letter-spacing: .08em; text-transform: uppercase; opacity: .82; }
.story .range { font: 600 13px var(--text); opacity: .85; }
.story .big { margin-top: 6px; font: 800 40px/1 var(--num); letter-spacing: -.04em; }
.story .sub { font: 700 17px var(--text); opacity: .85; }
.story .pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.story .mid .pills { justify-content: center; }
.story .pills span { padding: 6px 10px; border-radius: 99px; background: rgba(255,255,255,.18); font: 600 11px var(--text); }
.story .sw { width: 128px; height: 128px; margin: 14px auto 0; border-radius: 12px; object-fit: cover; box-shadow: 0 10px 24px rgba(0,0,0,.4); }
.story .ttl { margin-top: 16px; font: 800 28px/1.02 var(--text); letter-spacing: -.035em; }
.story .ttl.small { font-size: 22px; margin-top: 12px; color: #fff; }
.story .sen { margin-top: 8px; font: 600 13px/1.35 var(--text); opacity: .85; }
.emblem { position: relative; width: 96px; height: 96px; margin: 16px auto 0; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.16); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); }
.emblem::after { content: ""; position: absolute; inset: -8px; border-radius: 50%; border: 2px solid rgba(255,255,255,.55); clip-path: inset(0 0 0 0); }
.emblem svg { width: 42px; height: 42px; }
.story.side { width: 196px; opacity: .6; filter: saturate(.85); }
.story.side.l { margin-right: -70px; transform: rotate(-5deg); }
.story.side.r { margin-left: -70px; transform: rotate(5deg); }
.story.main { z-index: 2; }
.js .stories .story.main { transform: translateY(40px) scale(.94); opacity: 0; }
.js .stories .story.side.l { transform: translateX(80px) rotate(0); opacity: 0; }
.js .stories .story.side.r { transform: translateX(-80px) rotate(0); opacity: 0; }
.js .stories.in .story.main { transform: none; opacity: 1; }
.js .stories.in .story.side.l { transform: rotate(-5deg); opacity: .6; transition-delay: .25s; }
.js .stories.in .story.side.r { transform: rotate(5deg); opacity: .6; transition-delay: .25s; }
.js .stories .emblem { transform: scale(.6); opacity: 0; transition: transform .9s var(--spring) .7s, opacity .5s .7s; }
.js .stories.in .emblem { transform: none; opacity: 1; }
.js .stories .emblem::after { transform: rotate(-90deg); -webkit-mask: conic-gradient(#000 0, transparent 0); mask: conic-gradient(#000 0, transparent 0); }
.js .stories.in .emblem::after { animation: ring 1.1s var(--ease) 1.1s forwards; }
@property --r { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes ring { from { --r: 0deg; } to { --r: 360deg; } }
.js .stories.in .emblem::after { -webkit-mask: conic-gradient(#000 var(--r), transparent 0); mask: conic-gradient(#000 var(--r), transparent 0); }

/* ---------- S05 ranking, each bar in the colour of its cover ---------- */
.rank .rows { display: grid; gap: 10px; margin-top: 16px; }
.bar { display: grid; grid-template-columns: 18px 1fr; gap: 10px; align-items: center; }
.bar > span { font: 700 14px var(--text); color: var(--muted); text-align: center; }
.bar > div { display: flex; align-items: center; justify-content: space-between; width: var(--w); min-width: 132px; height: 48px; padding: 0 12px 0 6px; border-radius: 14px; background: var(--c); color: #fff; transform-origin: left; transform: scaleX(0); transition: transform 1s var(--ease); transition-delay: calc(var(--i) * 70ms); }
.bar > div > * { opacity: 0; transition: opacity .4s; transition-delay: calc(.45s + var(--i) * 70ms); }
.rows.go .bar > div { transform: none; }
.rows.go .bar > div > * { opacity: 1; }
.bar img { width: 36px; height: 36px; border-radius: 9px; object-fit: cover; }
.bar img.round { border-radius: 50%; }
.bar b { font: 700 15px var(--num); font-variant-numeric: tabular-nums; }
.bar .rise { margin-left: auto; margin-right: 10px; padding: 3px 7px; border-radius: 99px; background: rgba(255,255,255,.22); font: 700 11px var(--text); }

/* ---------- S06 album and artist ---------- */
#pageSeg { margin-top: 28px; }
.panes { display: grid; margin-top: 16px; }
.page { grid-area: 1 / 1; --c: #b95a4f; border-radius: 30px; padding: 18px; background: color-mix(in srgb, var(--c) 8%, var(--bg)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--c) 15%, transparent); opacity: 0; transform: translateY(10px) scale(.985); pointer-events: none; transition: opacity .45s var(--ease), transform .6s var(--ease); align-self: start; }
.page.on { opacity: 1; transform: none; pointer-events: auto; }
.page .hd { display: flex; gap: 14px; align-items: center; }
.page .hd img { width: 64px; height: 64px; border-radius: 12px; object-fit: cover; }
.page .hd img.round { border-radius: 50%; }
.page .hd b { display: block; font: 750 20px var(--text); letter-spacing: -.03em; }
.page .hd small { font: 550 13px var(--text); color: var(--muted); }
.one { display: flex; gap: 14px; align-items: center; margin-top: 16px; padding: 14px 16px; border-radius: 20px; background: var(--c); color: #fff; }
.one i { font: 800 38px/1 var(--num); font-style: normal; letter-spacing: -.04em; }
.one small { display: block; opacity: .8; font: 500 12px var(--text); }
.one b { font: 650 15px var(--text); }
.dist { display: flex; gap: 2px; height: 14px; margin-top: 6px; border-radius: 5px; overflow: hidden; }
.dist i { flex: var(--f); background: var(--c); opacity: var(--o); transform-origin: bottom; transform: scaleY(0); transition: transform .7s var(--spring); transition-delay: calc(.2s + var(--i) * 60ms); }
.page.on .dist i { transform: none; }
.cards { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.cards div { display: flex; justify-content: space-between; align-items: center; padding: 13px; border-radius: 16px; background: var(--bg); }
.cards b { display: block; font: 750 21px/1 var(--num); letter-spacing: -.03em; }
.cards span span { font: 500 12px var(--text); color: var(--muted); }
.cards em { flex: none; width: 24px; height: 24px; border-radius: 50%; border: 3.5px solid var(--c); }
.cards.two { margin-top: 16px; }
.strong-h { color: var(--ink); font-weight: 650; }
.strong { display: grid; gap: 10px; margin-top: 12px; }
.strong div { display: grid; grid-template-columns: 16px 1fr auto; gap: 4px 10px; align-items: center; font: 550 14px var(--text); }
.strong span { grid-row: span 2; font-size: 12px; color: var(--muted); }
.strong em { font-style: normal; font-size: 13px; color: var(--muted); }
.strong i { grid-column: 2 / 4; height: 4px; overflow: hidden; border-radius: 2px; background: var(--soft2); }
.strong i::after { content: ""; display: block; width: var(--w); height: 100%; border-radius: 2px; background: var(--c); transform-origin: left; transform: scaleX(0); transition: transform 1s var(--ease); transition-delay: calc(.2s + var(--i) * 80ms); }
.page.on .strong i::after { transform: none; }

/* ---------- S07 charts ---------- */
#chartCard { margin-top: 28px; }
.card-t { font: 750 19px var(--text); letter-spacing: -.03em; }
.trend { display: inline-flex; align-items: center; gap: 2px; padding: 5px 10px; border-radius: 99px; background: color-mix(in srgb, var(--up) 13%, transparent); color: var(--up); font: 700 14px var(--text); transform: scale(.6); opacity: 0; transition: transform .6s var(--spring) 1.2s, opacity .3s 1.2s; }
.chart svg { display: block; width: 100%; height: auto; margin-top: 16px; overflow: visible; }
.grid line { stroke: var(--line); stroke-width: 1; }
.chart .line { stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.chart .prev { stroke: currentColor; stroke-opacity: .22; stroke-width: 2.5; stroke-dasharray: 5 6; opacity: 0; transition: opacity .8s .3s; }
.chart .area { opacity: 0; transition: opacity 1s .7s; }
.chart .peak { fill: #e0459b; stroke: var(--soft); stroke-width: 3; transform-box: fill-box; transform-origin: center; transform: scale(0); transition: transform .6s var(--spring) 1.4s; }
.chart.draw .line { stroke-dashoffset: 0; transition: stroke-dashoffset 1.6s cubic-bezier(.45, 0, .2, 1); }
.chart.draw .prev, .chart.draw .area { opacity: 1; }
.chart.draw .peak, .chart.draw .trend { transform: none; opacity: 1; }
.axis { display: flex; justify-content: space-between; margin-top: 6px; font: 500 11px var(--text); color: var(--muted); }
.leg { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 12px 0 16px; font: 500 12px var(--text); color: var(--muted); }
.leg i { display: inline-block; width: 16px; height: 3px; margin-right: 6px; vertical-align: middle; border-radius: 3px; background: linear-gradient(90deg, #ff2d78, #b756d2); }
.leg i.prev { height: 0; background: none; border-top: 2.5px dashed var(--muted); }

/* ---------- S08 AI ---------- */
.chat { display: grid; gap: 10px; margin-top: 30px; }
.me { justify-self: end; max-width: 82%; padding: 11px 15px; border-radius: 20px 20px 6px 20px; background: var(--accent); color: #fff; font: 500 16px/1.3 var(--text); }
.ai { justify-self: start; max-width: 92%; padding: 13px 15px; border-radius: 20px 20px 20px 6px; background: var(--soft); font: 400 16px/1.4 var(--text); }
.ai .who { margin-bottom: 4px; font: 600 12px var(--text); color: var(--muted); }
.ai .rows { margin-top: 8px; }
.ai .rows div { display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 10px; padding: 6px 0; border-top: 1px solid var(--line); font: 600 14px/1.2 var(--text); }
.ai .rows small { display: block; font-weight: 400; color: var(--muted); }
.ai .rows img { width: 38px; height: 38px; border-radius: 8px; object-fit: cover; }
.ai .rows b { font: 650 14px var(--num); color: var(--plays); }
.faces { display: flex; margin-top: 10px; }
.faces img { width: 52px; height: 52px; margin-right: -10px; border-radius: 50%; object-fit: cover; border: 3px solid var(--soft); }
.typing { display: inline-flex; gap: 4px; padding: 14px 16px; }
.typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); animation: blink 1s infinite; }
.typing i:nth-child(2) { animation-delay: .15s; } .typing i:nth-child(3) { animation-delay: .3s; }
@keyframes blink { 0%, 60%, 100% { opacity: .25; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
.js .chat > * { opacity: 0; transform: translateY(14px) scale(.96); transition: opacity .45s var(--ease), transform .6s var(--spring); }
.js .chat > .me { transform-origin: right bottom; }
.js .chat > .ai { transform-origin: left bottom; }
.js .chat > .shown { opacity: 1; transform: none; }
.js .chat > .ai .txt { transition: opacity .3s; }
.js .chat > .ai.wait .txt { display: none; }
.sugg { display: flex; gap: 8px; overflow-x: auto; margin: 16px calc(var(--gut) * -1) 0; padding: 0 var(--gut); scrollbar-width: none; }
.sugg::-webkit-scrollbar { display: none; }
.sugg span { flex: none; padding: 10px 14px; border-radius: 99px; box-shadow: inset 0 0 0 1px var(--line); font: 500 14px var(--text); }

/* ---------- S09 and also ---------- */
.widget { flex: none; display: flex; flex-direction: column; width: 136px; aspect-ratio: 1; padding: 14px; border-radius: 24px; background: var(--bg); box-shadow: 0 0 0 .5px var(--line), 0 16px 30px -20px rgba(0,0,0,.35); }
.widget .wn { margin-top: 4px; font: 750 32px/1 var(--num); letter-spacing: -.04em; }
.widget .d { margin: 0; }
.widget .spark { margin-top: auto; height: 22px; }
.siri { position: relative; margin-top: 12px; padding: 13px 15px 13px 46px; border-radius: 20px; background: var(--bg); box-shadow: 0 0 0 .5px var(--line); font: 600 14px/1.3 var(--text); }
.siri .orb { position: absolute; left: 12px; top: 13px; width: 24px; height: 24px; border-radius: 50%; background: conic-gradient(from 0deg, #ff5fa2, #8f5cff, #2fb5ff, #ffb04a, #ff5fa2); filter: blur(.4px) saturate(1.2); animation: spin 4s linear infinite; }
.siri .orb::after { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff, rgba(255,255,255,.2)); opacity: .8; }
@keyframes spin { to { transform: rotate(360deg); } }
.siri small { display: block; margin-top: 4px; font: 500 12px var(--text); color: var(--muted); }
.notif { margin-top: 12px; padding: 11px 13px; border-radius: 18px; background: var(--bg); box-shadow: 0 0 0 .5px var(--line), 0 14px 30px -20px rgba(0,0,0,.3); font: 500 13px/1.3 var(--text); }
.notif .t { display: flex; align-items: center; gap: 7px; margin-bottom: 4px; font: 600 11px var(--text); color: var(--muted); }
.notif .t img { width: 16px; height: 16px; border-radius: 4px; }
.js .bento .notif { transform: translateY(-30px); opacity: 0; transition: transform .9s var(--spring) .6s, opacity .4s .6s; }
.js .bento.in .notif { transform: none; opacity: 1; }
.menu { margin-top: 12px; overflow: hidden; border-radius: 14px; background: var(--bg); box-shadow: 0 0 0 .5px var(--line), 0 14px 30px -20px rgba(0,0,0,.3); }
.menu div { display: flex; justify-content: space-between; padding: 9px 13px; border-top: 1px solid var(--line); font: 500 14px var(--text); }
.menu div:first-child { border-top: 0; }
.menu div.on::after { content: "✓"; font-weight: 700; color: var(--accent); }
.miles { display: flex; gap: 3px; margin-top: 12px; }
.miles i { flex: 1; height: 6px; border-radius: 3px; background: var(--plays); }
.miles i.off { background: var(--soft2); }
.js .bento .miles i:not(.off) { transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); transition-delay: calc(.5s + var(--i) * 90ms); }
.js .bento.in .miles i { transform: none; }
.share { display: flex; align-items: flex-end; gap: 10px; margin-top: 14px; }
.share > div { box-shadow: 0 12px 26px -14px rgba(0,0,0,.5); transition: transform .9s var(--spring); }
.share .st { display: flex; align-items: flex-end; width: 66px; aspect-ratio: 9/16; padding: 5px; border-radius: 12px; }
.share .po { display: flex; align-items: flex-end; justify-content: flex-end; width: 86px; aspect-ratio: 1; padding: 6px; border-radius: 12px; }
.share img { width: 100%; border-radius: 6px; }
.share .po img { width: 56%; }
.share .sk { width: 64px; height: 64px; overflow: hidden; border-radius: 50%; box-shadow: 0 0 0 3px #fff, 0 12px 26px -14px rgba(0,0,0,.5); }
.share .sk img { height: 100%; object-fit: cover; border-radius: 0; }
.js .bento .share .st { transform: translateX(40px) rotate(-8deg); }
.js .bento .share .sk { transform: translateX(-40px) rotate(8deg); }
.js .bento.in .share > div { transform: none; transition-delay: .5s; }
.stack3 { display: flex; margin-top: 12px; }
.stack3 img { width: 40px; height: 40px; margin-right: -12px; border-radius: 9px; object-fit: cover; border: 2px solid var(--soft); }

/* ---------- S10 free and premium ---------- */
.deal { display: grid; gap: 10px; margin-top: 30px; }
.plan { padding: 24px; border-radius: 28px; background: var(--soft); }
.plan.pro { background: var(--ink); color: var(--bg); }
.plan h3 { margin: 0 0 4px; font: 800 26px var(--text); letter-spacing: -.04em; }
.plan p { margin: 0; font: 500 14px var(--text); color: var(--muted); }
.plan.pro p { color: color-mix(in srgb, var(--bg) 60%, transparent); }
.checks { display: grid; gap: 11px; margin: 16px 0 0; padding: 0; list-style: none; font: 500 15px/1.35 var(--text); }
.checks li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; }
.checks li::before { content: "✓"; font-weight: 800; color: var(--accent); }
.promise { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.promise div { padding: 16px; border-radius: 22px; background: var(--soft); font: 650 15px/1.25 var(--text); }
.promise small { display: block; margin-top: 4px; font: 500 13px/1.3 var(--text); color: var(--muted); }

/* ---------- S11 end card ---------- */
.final { margin: 104px var(--gut) 0; padding: 48px 22px 0; overflow: hidden; border-radius: 36px; background: #0b0b0e; color: #fff; text-align: center; }
.final .app { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 22px; font: 700 17px var(--text); }
.final .app img { width: 44px; height: 44px; border-radius: 11px; }
.final .wave { --W: min(74vw, 440px); height: calc(var(--W) * .3); margin: 36px auto 0; align-items: flex-end; transform: none; opacity: 1; }
.final .wave i { border-radius: 99px 99px 0 0; box-shadow: none; transform-origin: bottom; }
.final .wave.go i { animation: rise 1.2s var(--spring) both, meter 1.1s ease-in-out infinite alternate; animation-delay: calc(var(--i) * 50ms), calc(1.2s + var(--i) * -.29s); }
@keyframes meter { 0% { transform: scaleY(1); } 50% { transform: scaleY(.55); } 100% { transform: scaleY(.85); } }

/* ---------- footer ---------- */
footer { margin-top: 40px; padding: 40px var(--gut) calc(48px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); }
footer nav { display: flex; flex-wrap: wrap; gap: 10px 22px; font: 600 15px var(--text); }
footer nav a, .langs a { text-decoration: none; }
footer nav a:hover { color: var(--accent); }
.langs { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 18px; font: 500 14px var(--text); color: var(--muted); }
.langs a[aria-current] { color: var(--ink); font-weight: 650; }
footer p { margin: 16px 0 0; font: 500 13px/1.5 var(--text); color: var(--muted); }
footer .imprint { color: inherit; text-decoration: none; }
footer .imprint:hover { text-decoration: underline; }

/* ---------- wide screens ---------- */
@media (min-width: 900px) {
  :root { --gut: max(32px, 7vw); }
  section { padding-top: 150px; }
  .split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
  .split > .head { position: sticky; top: 140px; }
  .split > .head .lead { font-size: 19px; }
  .bento { grid-template-columns: repeat(4, 1fr); }
  .deal { grid-template-columns: 1fr 1fr; }
  .promise { grid-template-columns: repeat(4, 1fr); }
  .stories .story.main { width: 270px; }
  .stories .story.side { width: 220px; }
  .final { padding-top: 72px; }
  .bento .tile:hover, .plan:hover, .promise div:hover { transform: translateY(-3px); }
  .bento .tile, .plan, .promise div { transition: transform .4s var(--ease); }
}

/* ---------- reduced motion: every piece in its final place, nothing loops ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js [data-in], .js [data-stagger] > *, .js [data-split] .w > span, .js .chat > * { opacity: 1 !important; transform: none !important; }
  .wave i { transform: none !important; }
  .wave { transform: none !important; opacity: 1 !important; }
}

/* ---------- legal pages ---------- */
.legal { max-width: 700px; margin: 0 auto; padding: 56px var(--gut) 40px; }
.legal .kick { margin: 0 0 10px; }
.legal h1 { margin: 0; font: 800 clamp(38px, 9vw, 60px)/1 var(--text); letter-spacing: -.05em; }
.legal .meta { margin: 12px 0 0; font: 500 14px var(--text); color: var(--muted); }
.legal .intro { margin: 28px 0 0; font: 500 19px/1.5 var(--text); letter-spacing: -.01em; }
.legal .toc { display: flex; flex-wrap: wrap; gap: 8px; margin: 28px 0 8px; }
.legal .toc a { padding: 8px 13px; border-radius: 99px; background: var(--soft); font: 550 13px var(--text); text-decoration: none; }
.legal .toc a:hover { color: var(--accent); }
.legal h2 { margin: 52px 0 0; scroll-margin-top: 80px; font: 750 26px/1.15 var(--text); letter-spacing: -.035em; }
.legal h3 { margin: 26px 0 0; font: 700 17px var(--text); letter-spacing: -.015em; }
.legal p, .legal li { font: 400 16.5px/1.6 var(--text); color: color-mix(in srgb, var(--ink) 86%, transparent); }
.legal p { margin: 10px 0 0; }
.legal a { color: var(--accent); text-decoration: none; }
.legal a:hover { text-decoration: underline; }
.legal code { font: 500 .9em ui-monospace, Menlo, monospace; padding: 1px 5px; border-radius: 5px; background: var(--soft); }
.legal .providers { margin: 14px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.legal .providers li { padding: 12px 14px; border-radius: 14px; background: var(--soft); }
.legal .providers b { color: var(--ink); }
.legal-page footer { margin-top: 24px; }

.legal .kick { color: var(--accent); }