/* Niewz — niewz.com
   One stylesheet. Colors come from the app: the five themes (AppTheme) and the fifteen accents (ColorPresets).
   The theme is html[data-theme]; the accent is --accent (set by js/site.js, which also derives --accent-ink and
   --on-accent so text on and in the accent keeps a 4.5:1 contrast). */

@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("../fonts/Inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+2000-206F, U+20AC, U+2122, U+2190-2199, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("../fonts/Inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("../fonts/Inter-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("../fonts/Inter-vietnamese.woff2") format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }

:root {
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --serif: ui-serif, "New York", Georgia, "Times New Roman", serif;
  --rounded: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, "Inter", "Arial Rounded MT Bold", sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --accent: #F1B63A;
  --accent-ink: #8A5F00;      /* accent as text on the page (js keeps 4.5:1) */
  --on-accent: #000;          /* text on an accent fill */

  /* type scale (Apple product page rhythm) */
  --fs-hero: clamp(44px, 5.7vw, 80px);
  --fs-h2: clamp(36px, 4.5vw, 64px);
  --fs-h3: clamp(21px, 1.7vw, 25px);
  --fs-intro: clamp(19px, 1.6vw, 24px);
  --fs-body: clamp(17px, 1.25vw, 19px);
  --fs-small: 15px;

  /* layout */
  --wrap: 1120px;
  --gutter: clamp(16px, 4.4vw, 48px);
  --gap: clamp(64px, 7.5vw, 108px);
  --panel-pad: clamp(48px, 6vw, 88px);
  --radius-panel: clamp(28px, 3.2vw, 40px);
  --radius-card: clamp(24px, 2.4vw, 32px);
  --ease: cubic-bezier(.2, .7, .1, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --ease-soft: cubic-bezier(.33, .9, .25, 1);
  --header-h: 78px;

  /* White (default; also Automatic in light mode) */
  --bg: #FFFFFF; --card: #F2F2F6; --text: #000000; --text-2: #6F6F6F; --sep: #D1D1D1;
  --raised: #FFFFFF;
  --glass: rgba(255, 255, 255, .78); --glass-edge: rgba(255, 255, 255, .7); --glass-line: rgba(0, 0, 0, .07);
  --shadow: 0 10px 40px rgba(0, 0, 0, .08), 0 2px 8px rgba(0, 0, 0, .05);
  --soft-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 8px 24px rgba(0, 0, 0, .06);
  --glow-strength: 1;
  color-scheme: light;
}
html[data-theme="paper"] { --bg: #EEEDED; --card: #E0DFDE; --text: #4D4D4D; --text-2: #636363; --sep: #D1D0D0; --raised: #F6F5F5;
  --glass: rgba(238, 237, 237, .8); --glass-edge: rgba(255, 255, 255, .6); --glass-line: rgba(77, 77, 77, .08); }
html[data-theme="sepia"] { --bg: #F0E1C8; --card: #F4E8D5; --text: #604534; --text-2: #79604E; --sep: #D6C5AD; --raised: #F9F0E2;
  --glass: rgba(244, 232, 213, .8); --glass-edge: rgba(255, 250, 240, .6); --glass-line: rgba(96, 69, 52, .1);
  --shadow: 0 10px 40px rgba(96, 69, 52, .1), 0 2px 8px rgba(96, 69, 52, .06);
  --soft-shadow: 0 1px 2px rgba(96, 69, 52, .06), 0 8px 24px rgba(96, 69, 52, .08); }
html[data-theme="dark"] { --bg: #4D4D4D; --card: #5A5A5A; --text: #EEEDED; --text-2: #D1D1D1; --sep: #6A6A6A; --raised: #636363;
  --glass: rgba(77, 77, 77, .84); --glass-edge: rgba(255, 255, 255, .14); --glass-line: rgba(255, 255, 255, .08);
  --shadow: 0 10px 40px rgba(0, 0, 0, .25), 0 2px 8px rgba(0, 0, 0, .15);
  --soft-shadow: 0 1px 2px rgba(0, 0, 0, .12), 0 8px 24px rgba(0, 0, 0, .18); --glow-strength: .85; color-scheme: dark; }
html[data-theme="black"] { --bg: #000000; --card: #1D1D1F; --text: #FFFFFF; --text-2: #A1A1A6; --sep: #2E2E2E; --raised: #2A2A2D;
  --glass: rgba(22, 22, 24, .78); --glass-edge: rgba(255, 255, 255, .12); --glass-line: rgba(255, 255, 255, .07);
  --shadow: 0 10px 40px rgba(0, 0, 0, .5), 0 2px 8px rgba(0, 0, 0, .4);
  --soft-shadow: 0 0 0 1px rgba(255, 255, 255, .04), 0 8px 24px rgba(0, 0, 0, .4); --glow-strength: .9; color-scheme: dark; }
@media (prefers-color-scheme: dark) {
  html:not(.js) { --bg: #000000; --card: #1D1D1F; --text: #FFFFFF; --text-2: #A1A1A6; --sep: #2E2E2E; --raised: #2A2A2D;
    --glass: rgba(22, 22, 24, .74); --glass-edge: rgba(255, 255, 255, .12); --glass-line: rgba(255, 255, 255, .07); color-scheme: dark; }
}

/* ------------------------------------------------------------------ base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 12px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 400 var(--fs-body)/1.5 var(--font); letter-spacing: -.011em;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
  overflow-x: clip;
  transition: background-color .5s var(--ease), color .5s var(--ease);
}
img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
a { color: inherit; -webkit-tap-highlight-color: transparent; }
:focus { outline: none; }
:focus-visible { outline: 2.5px solid var(--accent-ink); outline-offset: 3px; border-radius: 12px; }
h1, h2, h3, p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.vh { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ic { width: 18px; height: 18px; flex: none; }
.skip { position: absolute; z-index: 100; inset-inline-start: 16px; top: -60px; padding: 10px 16px; border-radius: 12px;
  background: var(--text); color: var(--bg); text-decoration: none; font-weight: 600; transition: top .2s; }
.skip:focus { top: 16px; }
.i18n-pending main, .i18n-pending .site-header .bar, .i18n-pending .site-footer { opacity: 0; }
main, .site-header .bar, .site-footer { transition: opacity .25s linear; }

.wrap { width: min(var(--wrap), 100% - 2 * var(--gutter)); margin-inline: auto; }
.narrow-wrap { --wrap: 820px; }
.center { text-align: center; }

.display, .headline {
  font-family: var(--font-display); font-weight: 700; text-wrap: balance;
  overflow-wrap: normal; word-break: normal; hyphens: manual;
}
.display { font-size: var(--fs-hero); line-height: 1.04; letter-spacing: -.032em; }
.headline { font-size: var(--fs-h2); line-height: 1.06; letter-spacing: -.028em; }
.lead, .sub { font-size: var(--fs-intro); line-height: 1.4; letter-spacing: -.016em; text-wrap: pretty; color: var(--text); }
.sub { margin-top: clamp(16px, 1.6vw, 24px); }
.sub strong { font-weight: 650; display: block; margin-bottom: 2px; }
.sub.narrow { max-width: 27em; }
.center .sub { margin-inline: auto; max-width: 31em; }
:lang(ar) .display, :lang(ar) .headline, :lang(hi) .display, :lang(hi) .headline, :lang(vi) .display, :lang(vi) .headline,
:lang(zh-Hans) .display, :lang(zh-Hans) .headline, :lang(ar) body, :lang(hi) body, :lang(vi) body, :lang(zh-Hans) body,
:lang(ar) .lead, :lang(ar) .sub, :lang(hi) .lead, :lang(hi) .sub, :lang(vi) .lead, :lang(vi) .sub, :lang(zh-Hans) .lead, :lang(zh-Hans) .sub { letter-spacing: 0; }
:lang(hi) .display, :lang(hi) .headline, :lang(vi) .display, :lang(vi) .headline { line-height: 1.24; }
:lang(ar) .display, :lang(ar) .headline { line-height: 1.22; }
:lang(zh-Hans) .display, :lang(zh-Hans) .headline { line-height: 1.16; }
:lang(ru) .display { letter-spacing: -.026em; }

/* ------------------------------------------------------------------ accent glow */
.glow {
  position: fixed; inset: 0 0 auto 0; height: min(560px, 72vh); z-index: 0; pointer-events: none;
  /* full accent at the very top edge, so no seam shows under the browser's status bar and top chrome (js/site.js gives
     the theme-color the same color); --glow-strength thins out the rest of the fade in the dark themes */
  background: linear-gradient(to bottom,
    var(--accent) 0%,
    color-mix(in srgb, var(--accent) calc(70% * var(--glow-strength)), transparent) 10%,
    color-mix(in srgb, var(--accent) calc(44% * var(--glow-strength)), transparent) 24%,
    color-mix(in srgb, var(--accent) calc(22% * var(--glow-strength)), transparent) 40%,
    color-mix(in srgb, var(--accent) calc(9% * var(--glow-strength)), transparent) 58%,
    color-mix(in srgb, var(--accent) calc(3% * var(--glow-strength)), transparent) 76%,
    transparent 100%);
  opacity: var(--glow, 1);
  transition: background .6s var(--ease);
}
main, .site-footer { position: relative; z-index: 1; }
main { overflow-x: clip; }

/* ------------------------------------------------------------------ header */
.site-header { position: fixed; z-index: 50; inset: 0 0 auto 0; overflow-x: clip; padding-top: max(14px, env(safe-area-inset-top)); pointer-events: none; }
.bar { width: min(var(--wrap), 100% - 2 * var(--gutter)); margin-inline: auto; display: flex; justify-content: space-between; align-items: center; gap: 12px; position: relative; }
/* The capsule's geometry is two numbers: its height and the inset every control keeps from its inner edge (top, bottom and
   the ends). A control's pill is concentric with the capsule: same inset all round, radius = the capsule's radius - inset. */
.capsule {
  --cap-h: 52px; --cap-inset: 7px; --cap-r: calc(var(--cap-h) / 2); --pill-h: calc(var(--cap-h) - 2 * var(--cap-inset)); --pill-r: calc(var(--cap-r) - var(--cap-inset));
  pointer-events: auto; display: flex; align-items: center; gap: 4px; height: var(--cap-h); padding: 0 var(--cap-inset); border-radius: var(--cap-r); flex: none;
  background: var(--glass);
  -webkit-backdrop-filter: blur(24px) saturate(1.8); backdrop-filter: blur(24px) saturate(1.8);
  box-shadow: inset 0 0 0 1px var(--glass-edge), 0 0 0 1px var(--glass-line), 0 8px 32px rgba(0, 0, 0, .07);
  transition: background-color .5s var(--ease), box-shadow .3s;
}
/* The logo (the app's rounded square, then the word) is drawn in the designer's proportions from one height, --logo-h: the square is --logo-h
   wide, the word 2.5033 times that, and 0.2122 of it lies between them. The height is chosen so that the pill keeps the width it had
   with the wordmark in text (134.7 px; 124.6 px on a phone): the logo is 3.7155 times its height. The same space each side: the logo sits centered in the pill. */
.brand { --logo-h: 26.5px; padding: 0 18px; gap: calc(var(--logo-h) * .2122); text-decoration: none; }
/* the full app icon (its rounded square and contour), crisp at 1x, 2x and 3x */
.brand-mark { width: var(--logo-h); height: var(--logo-h); flex: none; }
/* the word as outlines in the text's color, as tall as the square (516.07 : 206.16 in the designer's lockup) */
.brand-name { width: calc(var(--logo-h) * 2.5033); height: var(--logo-h); flex: none; color: var(--text); fill: currentColor; }
.tools { padding: 0 var(--cap-inset); }
.round { width: var(--pill-h); height: var(--pill-h); border-radius: 50%; display: grid; place-items: center; color: var(--text); flex: none;
  background: color-mix(in srgb, var(--text) 6%, transparent); transition: background-color .2s, transform .2s var(--ease); }
.round:hover { background: color-mix(in srgb, var(--text) 12%, transparent); }
.round:active { transform: scale(.94); }
.round[aria-expanded="true"] { background: color-mix(in srgb, var(--text) 15%, transparent); }
.round:focus-visible { border-radius: 50%; }
.accent-ic { color: var(--accent); filter: drop-shadow(0 0 .6px color-mix(in srgb, var(--text) 50%, transparent)); }
.pill-dark { display: inline-flex; align-items: center; height: var(--pill-h); padding: 0 17px; margin-inline-start: 4px; border-radius: var(--pill-r);
  background: var(--text); color: var(--bg); font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap; letter-spacing: -.01em;
  transition: transform .2s var(--ease), background-color .3s var(--ease), color .3s var(--ease); }
/* on hover and keyboard focus it takes the chosen accent; --on-accent (js/site.js) is the black or white that reads best on it */
.pill-dark:hover, .pill-dark:focus-visible, .pill-dark:active { background: var(--accent); color: var(--on-accent); }
.pill-dark:active { transform: scale(.97); }
.pill-dark:focus-visible { border-radius: var(--pill-r); }
.pill-dark .short { display: none; }
.popover {
  pointer-events: auto; position: absolute; top: calc(100% + 10px); inset-inline-end: 0; z-index: 60;
  padding: 18px; border-radius: 28px; min-width: 200px;
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  -webkit-backdrop-filter: blur(30px) saturate(1.8); backdrop-filter: blur(30px) saturate(1.8);
  box-shadow: inset 0 0 0 1px var(--glass-edge), 0 0 0 1px var(--glass-line), 0 24px 64px rgba(0, 0, 0, .18);
  transform-origin: var(--arrow, 50%) 0; animation: pop .28s var(--ease);
}
.popover[hidden] { display: none; }
@keyframes pop { from { opacity: 0; transform: translateY(-6px) scale(.96); } }
.pop-cols { display: flex; gap: 22px; }
.pop-col { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.pop-head { height: 22px; display: grid; place-items: center; color: var(--text-2); }
.swatch-grid { display: grid; gap: 10px; }
.swatch-grid.accents { grid-template-columns: repeat(3, 30px); }
.swatch-grid.themes { grid-template-columns: 30px; }
.swatch { width: 30px; height: 30px; border-radius: 50%; position: relative; background: var(--c);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); transition: transform .2s var(--ease); }
.swatch:hover { transform: scale(1.1); }
.swatch[aria-checked="true"]::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2.5px solid var(--text); }
.swatch:focus-visible { outline-offset: 6px; border-radius: 50%; }
.auto-theme { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 16px; padding: 10px 12px;
  border-radius: 14px; font-size: 14px; font-weight: 600; color: var(--text); background: color-mix(in srgb, var(--text) 6%, transparent); transition: background-color .2s; }
.auto-theme:hover { background: color-mix(in srgb, var(--text) 10%, transparent); }
.auto-theme[aria-pressed="true"] { background: var(--text); color: var(--bg); }
.lang-grid { display: grid; grid-template-columns: repeat(2, minmax(124px, auto)); gap: 4px 6px; }
.lang-grid button { text-align: start; padding: 10px 14px; border-radius: 13px; font-size: 16px; font-weight: 600; color: var(--text-2); transition: background-color .2s, color .2s; }
.lang-grid button:hover { background: color-mix(in srgb, var(--text) 6%, transparent); color: var(--text); }
.lang-grid button[aria-checked="true"] { color: var(--accent-ink); background: color-mix(in srgb, var(--accent) 16%, transparent); }

/* ------------------------------------------------------------------ hero */
/* the hand goes on below the hero, behind the next panel: no hard cut across the wrist */
.hero { position: relative; z-index: 0; padding-top: calc(var(--header-h) + clamp(8px, 2.4vw, 40px)); overflow-x: clip; }
.hero + .section { position: relative; z-index: 1; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(0, 1fr); align-items: center; gap: clamp(8px, 2vw, 32px); }
.hero-copy { padding-bottom: clamp(24px, 5vw, 80px); }
.hero-copy .display { max-width: 9.6em; }
.hero-copy .lead { margin-top: clamp(18px, 1.8vw, 26px); max-width: 23em; }
.store-badge { display: inline-flex; align-items: center; gap: 9px; margin-top: clamp(26px, 2.6vw, 36px); height: 56px; padding: 0 20px 0 16px; border-radius: 14px;
  background: #000; color: #fff; text-decoration: none; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3);
  transition: transform .25s var(--ease), box-shadow .25s; }
.store-badge:hover { transform: translateY(-1px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .4), 0 12px 28px rgba(0, 0, 0, .2); }
.store-badge:focus-visible { border-radius: 14px; }
.store-badge .apple { width: 25px; height: 30px; margin-top: -3px; }
.store-text { display: flex; flex-direction: column; line-height: 1.05; }
.store-text .small { font-size: 12px; letter-spacing: .01em; }
.store-text .big { font-size: 23px; font-weight: 600; letter-spacing: -.022em; }
.views { display: flex; gap: 8px; margin-top: clamp(28px, 3vw, 44px); flex-wrap: wrap; }
/* the label is centered by the pill itself (whole-pixel line height and height, so it never lands half a pixel high) */
.views button { display: inline-flex; align-items: center; justify-content: center; min-height: 36px; padding: 0 17px; border-radius: 999px; font-size: 15px; line-height: 18px; white-space: nowrap; font-weight: 600; color: var(--text-2);
  background: color-mix(in srgb, var(--text) 5%, transparent); transition: color .3s, background-color .3s; }
.views button:hover { color: var(--text); background: color-mix(in srgb, var(--text) 8%, transparent); }
.views button[aria-pressed="true"] { color: var(--text); background: color-mix(in srgb, var(--text) 11%, transparent); }
.views button:focus-visible { border-radius: 999px; }

.hero-device { position: relative; width: min(100%, 620px); justify-self: end; margin-bottom: -40px; }
[dir="rtl"] .hero-device { justify-self: start; }
.photo-stage { position: relative; }
.photo-stage .photo { position: relative; z-index: 2; width: 100%; }
/* the screens are drawn in the photo's perspective by the image build: flat pictures, cross-faded under the photo */
.plane-screen { position: absolute; z-index: 1; left: var(--x); top: var(--y); width: var(--w); height: var(--h); }
.plane-screen .scr { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; opacity: 0; transition: opacity .8s var(--ease-io);
  /* always on their own layer: a fade that promotes and demotes a layer re-snaps the photo by a pixel */
  will-change: opacity; backface-visibility: hidden; transform: translateZ(0); }
.photo-stage, .photo-stage .photo { transform: translateZ(0); backface-visibility: hidden; }
.plane-screen .scr.is-on { opacity: 1; }
/* the Home Screen page is two pictures (wallpaper and Niewz icon in the accent, then the widgets): one fades as a whole */
.plane-screen span.scr { display: block; }
.plane-screen .scr img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }

/* ------------------------------------------------------------------ sections and panels */
/* One rhythm for the whole page: every block (a rounded panel, a full-width band or a plain section) starts one --gap
   below the previous one, and inside a colored block the content starts --panel-pad from its edge. */
.section { margin-top: var(--gap); }
.hero + .section { margin-top: 0; }
.panel { position: relative; overflow: hidden; overflow: clip; border-radius: var(--radius-panel); background: var(--card); transition: background-color .5s var(--ease); }
.band { position: relative; margin-top: var(--gap); background: var(--card); padding-top: var(--panel-pad); transition: background-color .5s var(--ease); }

/* device photos with their screens beneath (the photo's screen is transparent) */
.device-photo { position: relative; }
.device-photo .photo { position: relative; z-index: 2; width: 100%; }
.screen-layer { position: absolute; z-index: 1; left: var(--x); top: var(--y); width: var(--w); height: var(--h); max-width: none; object-fit: cover; object-position: left top; border-radius: var(--radius, 0); }

/* Classic */
.classic { padding-top: var(--panel-pad); }
.classic header { padding-inline: 24px; }
/* no negative bottom margin here: the panel is clipped with overflow: clip, which is not a block formatting context, so a
   negative margin would collapse through its bottom edge and eat into the --gap above the next block (the gazette band) */
.classic-stage { margin-top: clamp(0px, 1vw, 12px); }
.classic-stage .device-photo { width: min(100%, 1040px); margin-inline: auto; margin-top: -7%; }
.classic .fold { display: none; position: absolute; z-index: 1; top: var(--y); height: var(--h); left: calc(var(--x) + var(--w) / 2 - 1.2%); width: 2.4%;
  background: linear-gradient(90deg, transparent, rgba(0, 0, 0, .05) 40%, rgba(255, 255, 255, .08) 50%, rgba(0, 0, 0, .05) 60%, transparent); pointer-events: none; }

/* Gazette */
/* --panel-pad above the title; the devices stand on the band's bottom edge (the lineup picture ends on their feet, and
   the picture is a block so no line-height gap is left under it) */
.gazette { padding-bottom: 0; }
.gazette .device-photo picture, .gazette .device-photo .photo { display: block; }
.gazette header { max-width: 700px; }
.gazette-stage { position: relative; margin-top: clamp(40px, 5vw, 72px); }  /* the lineup spans the text column, as in the design */
.devices { width: 100%; }  /* one lineup at every width, scaled with the page */

/* Rules */
/* The list at the left; at the right the title and text, then a large portrait iPad that runs down into the panel's bottom
   edge: the panel clips it (the crop box shows the top 86 % of the device), so no gap is left under it and the whole device
   is never shown. Stacked (tablets and phones): title, list, then the iPad, still cut by the panel's bottom. */
.rules { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); grid-template-rows: auto 1fr; grid-template-areas: "list head" "list pad";
  column-gap: clamp(24px, 3vw, 48px); padding: var(--panel-pad) clamp(28px, 5vw, 72px) 0; }
.rules-list { grid-area: list; padding-bottom: var(--panel-pad); }
.rules-head { grid-area: head; margin-bottom: clamp(32px, 4vw, 52px); }
@media (min-width: 981px) {  /* the title on two lines, the text balanced on two, as in the design */
  .rules { padding-inline: var(--panel-pad); }  /* the first option starts as far from the panel's left (right in RTL) edge as from its top */
  .rules-head .headline { max-width: 7em; margin-inline: auto; }
  :lang(ru) .rules-head .headline { max-width: 9.2em; }
  .rules-head .sub { max-width: 24em; text-wrap: balance; }
}
.ipad-crop { grid-area: pad; align-self: end; justify-self: center; width: min(100%, clamp(380px, 36vw, 520px)); min-height: 0; position: relative; overflow: hidden; overflow: clip; }  /* its aspect ratio (the part of the iPad that shows) is set in the page, from img/layout.json */
/* the iPad is cut by the panel's bottom edge: its lower part fades into the panel (the theme's own color), so the device
   ends softly instead of being sliced where its screen has the same color as the panel */
.ipad-crop::after { content: ""; position: absolute; inset: auto 0 0 0; height: 34%; z-index: 3; pointer-events: none;
  background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--card) 8%, transparent) 30%, color-mix(in srgb, var(--card) 36%, transparent) 66%, color-mix(in srgb, var(--card) 86%, transparent)); }
.ipad-mini { position: relative; width: 100%; container-type: inline-size; }
.ipad-mini .photo { position: relative; z-index: 2; width: 100%; pointer-events: none; }
.ipad-screen { position: absolute; z-index: 1; left: var(--x); top: var(--y); width: var(--w); height: var(--h); overflow: hidden; border-radius: var(--r, 2.3cqw);
  background: var(--bg); container-type: inline-size; transition: background-color .5s var(--ease); }
.ipad-screen .state { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: left top; opacity: 0; transition: opacity .55s var(--ease-io), transform .9s var(--ease); }
.ipad-screen img.state { bottom: auto; height: auto; object-fit: fill; }  /* the whole width of the screenshot: the iPad mini is narrower than the iPad it was taken on */
.ipad-screen .state.is-on { opacity: 1; }
.ipad-screen .zoom-folders { transform-origin: 0 0; transform: scale(1.02); }
.ipad-screen .zoom-folders.is-on { transform: scale(1.9); }
.ipad-screen .zoom-folder { transform-origin: 60% 0; transform: scale(1.02); }
.ipad-screen .zoom-folder.is-on { transform: scale(1.75); }
.ipad-screen img[data-state="widgets"] { object-position: 50% 30%; }

/* the reader inside the iPad mini (the app's reader is a web page, so this is how it looks) */
.reader { background: var(--bg); color: var(--text); font-family: var(--font); transition: background-color .5s var(--ease), color .5s var(--ease); overflow: hidden; }
.reader-bar { display: flex; align-items: center; gap: 3.4cqw; padding: 3.2cqw 4.4cqw 2cqw; color: var(--text); }
.reader-bar svg { width: 4.6cqw; height: 4.6cqw; }
.reader-bar .up { transform: rotate(180deg); }
.reader-bar .sp { flex: 1; }
.reader-body { padding: 4cqw 7.5cqw; }
.reader .kicker { font-size: 2.7cqw; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--accent-ink); }
.reader .r-title { margin-top: 1.4cqw; font-size: 6.4cqw; line-height: 1.1; font-weight: 700; letter-spacing: -.022em; text-wrap: balance; }
.reader .r-date { margin-top: 1.6cqw; font-size: 2.7cqw; color: var(--text-2); }
.reader img { width: 100%; margin: 4.4cqw 0; border-radius: 3.6cqw; }
.reader-body > p:not(.kicker):not(.r-title):not(.r-date) { font-size: 3.2cqw; line-height: 1.56; margin-top: 2.4cqw; }
.reader[data-font="serif"] { font-family: var(--serif); }
.reader[data-font="serif"] .r-title { letter-spacing: -.01em; }
.reader[data-font="rounded"] { font-family: var(--rounded); }
.reader[data-font="mono"] { font-family: var(--mono); }
.reader[data-font="mono"] .r-title { font-size: 5.2cqw; letter-spacing: -.03em; }
.reader[data-font="mono"] .reader-body > p:not(.kicker):not(.r-title):not(.r-date) { font-size: 2.8cqw; }

/* accordion (rules and FAQ) */
.accordion { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.acc-item { width: 100%; }
.acc-item h3 { font: inherit; }
.rules .acc-item { border-radius: 24px; transition: background-color .35s var(--ease); width: auto; max-width: 100%; }
.rules .acc-btn { display: inline-flex; align-items: center; gap: 10px; padding: 11px 20px 11px 13px; border-radius: 999px; font-size: 16px; font-weight: 600; letter-spacing: -.012em;
  background: color-mix(in srgb, var(--text) 7%, transparent); color: var(--text); text-align: start; transition: background-color .25s, padding .35s var(--ease); }
.rules .acc-btn:hover { background: color-mix(in srgb, var(--text) 12%, transparent); }
.rules .acc-btn:focus-visible { border-radius: 999px; }
.rules .acc-btn .plus { width: 20px; height: 20px; transition: transform .45s var(--ease), opacity .3s; }
.rules .acc-item.is-open { background: color-mix(in srgb, var(--text) 7%, transparent); width: min(100%, 360px); }
.rules .acc-item.is-open .acc-btn { background: transparent; padding: 18px 20px 2px; cursor: default; font-size: 17px; }
.rules .acc-item.is-open .acc-btn .plus { transform: rotate(45deg) scale(.6); opacity: 0; width: 0; margin-inline-end: -10px; }
.acc-panel { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .45s var(--ease); }
.acc-panel[hidden] { display: none; }
.acc-panel.closing { grid-template-rows: 0fr; }
.acc-panel.opening { grid-template-rows: 0fr; }
.acc-inner { overflow: hidden; min-height: 0; }
.rules .acc-inner { padding: 0 20px; }
.rules .acc-inner > p { font-size: 15px; line-height: 1.45; color: var(--text-2); padding-top: 5px; }
.rules .acc-inner > :last-child { margin-bottom: 20px; }
.mini-swatches { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; padding: 4px; }
.mini-swatches .swatch { width: 28px; height: 28px; }
.mini-accents { display: grid; grid-template-columns: repeat(5, 28px); gap: 10px 12px; }
.layout-picker, .font-picker, .icon-picker { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.layout-picker button { width: 56px; height: 48px; border-radius: 13px; display: grid; place-items: center; color: var(--text); transition: background-color .2s, color .2s; }
.layout-picker svg { width: 32px; height: 32px; }
.layout-picker button[aria-checked="true"], .font-picker button[aria-checked="true"], .icon-picker button[aria-checked="true"] { background: var(--text); color: var(--bg); }
.font-picker button { min-width: 52px; height: 46px; padding: 0 8px; border-radius: 13px; font-size: 23px; line-height: 1; transition: background-color .2s, color .2s; }
.font-picker .f-serif { font-family: var(--serif); }
.font-picker .f-rounded { font-family: var(--rounded); }
.font-picker .f-mono { font-family: var(--mono); font-size: 20px; }
.layout-picker button:hover, .font-picker button:hover, .icon-picker button:hover { background: color-mix(in srgb, var(--text) 9%, transparent); }
.layout-picker button[aria-checked="true"]:hover, .font-picker button[aria-checked="true"]:hover, .icon-picker button[aria-checked="true"]:hover { background: var(--text); }
.icon-picker button { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; transition: background-color .2s, color .2s; }
.icon-picker svg { width: 21px; height: 21px; }
.tile-demo { display: flex; flex-direction: column; gap: 4px; }
.mini-tile { --tile: #4473AC; margin-top: 14px; width: 156px; height: 86px; border-radius: 26px; padding: 13px 15px; color: #fff; position: relative;
  background: linear-gradient(160deg, color-mix(in srgb, var(--tile) 80%, #fff), var(--tile) 62%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), inset 0 0 0 1px rgba(255, 255, 255, .18), 0 8px 18px color-mix(in srgb, var(--tile) 32%, transparent);
  transition: background .45s var(--ease), box-shadow .45s var(--ease); }
.mini-tile svg { width: 22px; height: 22px; transition: transform .35s var(--ease); }
.mini-tile span { position: absolute; left: 15px; bottom: 12px; font-size: 14px; font-weight: 650; }
.mini-tile b { position: absolute; right: 15px; bottom: 12px; font-size: 14px; font-weight: 600; opacity: .9; }
[dir="rtl"] .mini-tile span { left: auto; right: 15px; }
[dir="rtl"] .mini-tile b { right: auto; left: 15px; }
.mini-tile.bump svg { transform: scale(1.25); }
.feed-demo { margin-top: 14px; }
.feed-row { display: inline-flex; align-items: center; gap: 9px; padding: 9px 15px 9px 11px; border-radius: 14px; background: var(--raised); font-size: 15px; font-weight: 650; color: var(--feed, var(--text-2));
  box-shadow: 0 1px 2px rgba(0, 0, 0, .06); transition: color .4s var(--ease); }
.feed-row .feed-ic { width: 18px; height: 18px; }
.feed-row.tinted { --feed: #31A7D3; }
.widget-demo { display: grid; grid-template-columns: repeat(5, 40px); gap: 8px; margin-top: 16px; }
.widget-demo span { height: 44px; border-radius: 13px; background: linear-gradient(160deg, color-mix(in srgb, var(--c) 75%, #fff), var(--c)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); }
.widget-demo span:first-child { grid-column: span 2; }

/* Listen: the open iPhone Duo, the designer's photo cut into two halves at the hinge (img/listen/, built by
   scripts/duo_open.py). Each half is a picture of the frame, its screen transparent, over the app's screen for that half
   (the list, then the article); the halves fold around the hinge while the Listen demo plays. */
/* The section sits on the plain page background (no panel: it comes right after "Your app, your rules", which is one).
   Stacked (phones and tablets): title and text, the Duo, the Listen button and its note, centered. From 900 px two
   columns: the text, the button and the note (left-aligned, centered as a group) beside the open Duo, which gets the
   larger share; right-to-left mirrors them. The Duo's fold and lyrics are the same in both layouts. */
.listen-grid { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "stage" "ctrl"; justify-items: center;
  text-align: center; }
.listen-head { grid-area: head; max-width: 34em; }
.listen-head .sub { max-width: 27em; margin-inline: auto; }
.listen-stage { grid-area: stage; width: 100%; margin-top: clamp(32px, 5vw, 56px); display: flex; justify-content: center; }
.listen-controls { grid-area: ctrl; }
@media (min-width: 900px) {
  .listen-grid { grid-template-columns: minmax(0, 35fr) minmax(0, 65fr); column-gap: clamp(6px, 1vw, 16px);
    grid-template-rows: 1fr auto auto 1fr; grid-template-areas: ". stage" "head stage" "ctrl stage" ". stage";
    justify-items: start; text-align: start;
    padding-bottom: clamp(24px, 2.6vw, 36px); }   /* room for the Duo's floor shadow, which hangs below the section's content */
  .listen-head { max-width: none; }
  .listen-head .headline { font-size: clamp(32px, 3.5vw, 52px); }
  .listen-head .sub { max-width: none; margin-inline: 0; font-size: clamp(17px, 1.4vw, 20px); line-height: 1.42; }
  .listen-stage { margin-top: 0; align-self: center; }
}
.duo { --fold: 0deg; --persp: 2600px; width: min(780px, 100%); position: relative; container-type: inline-size; }
.duo-body { position: absolute; inset: 0; z-index: 1; transition: transform 1.4s var(--ease-soft); direction: ltr; }
.duo-half { position: absolute; left: var(--x); top: var(--y); width: var(--w); height: var(--h); transform-origin: var(--ox) 50%;
  transition: transform 1.4s var(--ease-soft); }
/* each half carries its own perspective, centered on the hinge (its transform origin), so both fold around the same axis
   with the same vanishing point in every browser, whatever the parent's 3D context does */
.duo[data-playing="true"] .duo-half.left { transform: perspective(var(--persp)) rotateY(var(--fold)); }
.duo[data-playing="true"] .duo-half.right { transform: perspective(var(--persp)) rotateY(calc(-1 * var(--fold))); }
.duo-frame { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.duo-frame img { width: 100%; height: 100%; max-width: none; }
/* the app's screen of this half; its own color extends 2px under the frame on the three outer sides (not at the hinge), so
   no edge of the glass shows */
.duo-screen { position: absolute; z-index: 1; left: var(--x); top: var(--y); width: var(--w); height: var(--h); overflow: hidden;
  border-radius: var(--radius); background: var(--bg); transition: background-color .5s var(--ease), box-shadow .5s var(--ease); }
.duo-half.left .duo-screen { box-shadow: -2px 0 0 0 var(--bg), 0 -2px 0 0 var(--bg), 0 2px 0 0 var(--bg); }
.duo-half.right .duo-screen { box-shadow: 2px 0 0 0 var(--bg), 0 -2px 0 0 var(--bg), 0 2px 0 0 var(--bg); }
/* one picture holds both panels: each half shows its own */
.duo-screen .idle { position: absolute; top: 0; height: 100%; width: 200%; max-width: none; object-fit: cover; transition: opacity .6s var(--ease-io); }
.duo-half.left .idle { left: 0; }
.duo-half.right .idle { right: 0; }
[dir="rtl"] .duo-screen { direction: rtl; }
/* the light on the glass, and the crease at the hinge (each half shades its own side and covers the seam; the frame hides
   the part of it that falls on the bezel) */
.duo-screen::before { content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.duo-half.left .duo-screen::before { background: linear-gradient(112deg, rgba(255, 255, 255, .12) 0%, rgba(255, 255, 255, .04) 24%, transparent 40%); }
.duo-half.right .duo-screen::before { background: linear-gradient(112deg, transparent 60%, rgba(255, 255, 255, .04) 80%, rgba(255, 255, 255, .09)); }
.duo-half::after { content: ""; position: absolute; z-index: 1; top: 0; bottom: 0; width: 3.4%; pointer-events: none; }
.duo-half.left::after { right: 0; background: linear-gradient(90deg, transparent, rgba(0, 0, 0, .11)); }
.duo-half.right::after { left: 0; background: linear-gradient(90deg, rgba(0, 0, 0, .11), transparent); }
.duo-screen .shade { position: absolute; inset: 0; z-index: 3; pointer-events: none; background: #000; opacity: 0; transition: opacity 1.5s var(--ease-soft); }
.duo-half.left .shade { opacity: .01; }
.duo-half.right .shade { opacity: .04; }
/* the floor under the standing Duo */
.duo-shadow { position: absolute; z-index: 0; left: 7%; right: 7%; bottom: -4.5%; height: 10%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, .34), rgba(0, 0, 0, .13) 58%, transparent); filter: blur(10px);
  opacity: .6; transform: scaleX(.92); transition: opacity 1.4s var(--ease-soft), transform 1.5s var(--ease-soft); }
html[data-theme="dark"] .duo-shadow, html[data-theme="black"] .duo-shadow { background: radial-gradient(closest-side, rgba(0, 0, 0, .72), rgba(0, 0, 0, .3) 58%, transparent); }

.np, .lyrics { position: absolute; inset: 0; z-index: 2; opacity: 0; transition: opacity .7s var(--ease-io) .5s; color: var(--text); background: var(--bg); }
.np { display: flex; flex-direction: column; justify-content: center; padding: 8% 11%; container-type: inline-size; }
.np img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 4.5cqw; box-shadow: 0 12px 30px rgba(0, 0, 0, .2); }
.np .kicker { margin-top: 7cqw; font-size: 3.6cqw; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--accent-ink); }
.np-title { margin-top: 1.6cqw; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; font-size: 5.8cqw; font-weight: 700; line-height: 1.14; letter-spacing: -.022em; text-wrap: balance; }
.np-progress { margin-top: 7cqw; height: 1.2cqw; border-radius: 1cqw; background: color-mix(in srgb, var(--text) 14%, transparent); overflow: hidden; }
.np-progress i { display: block; height: 100%; width: var(--progress, 0%); background: var(--accent); border-radius: inherit; transition: width .6s linear; }
.np-controls { display: flex; justify-content: center; align-items: center; gap: 11cqw; margin-top: 6cqw; }
.np-controls svg { width: 7cqw; height: 7cqw; }
.np-controls .big { width: 10cqw; height: 10cqw; }
.lyrics { overflow: hidden; container-type: inline-size;
  -webkit-mask-image: linear-gradient(transparent, #000 20%, #000 72%, transparent); mask-image: linear-gradient(transparent, #000 20%, #000 72%, transparent); }
.lyrics .lines { position: absolute; left: 0; right: 0; top: 0; padding: 0 10% 0 9%; transition: transform .9s var(--ease); }
.lyrics li { font-size: 6.4cqw; line-height: 1.2; font-weight: 750; letter-spacing: -.022em; margin-bottom: 4.4cqw; color: var(--text); opacity: .2;
  filter: blur(.5px); transition: opacity .6s var(--ease), filter .6s var(--ease); }
.lyrics li.past { opacity: .38; filter: none; }
.lyrics li.now { opacity: 1; filter: none; }
:lang(ar) .lyrics li, :lang(hi) .lyrics li, :lang(vi) .lyrics li, :lang(zh-Hans) .lyrics li { letter-spacing: 0; line-height: 1.4; }

.duo[data-playing="true"] { --fold: 14deg; }
.duo[data-playing="true"] .duo-body { transform: translateY(-1.2%); }
.duo[data-playing="true"] .duo-shadow { opacity: .85; transform: translateY(18%) scaleX(.8); }
.duo[data-playing="true"] .duo-half.left .shade { opacity: 0; }
.duo[data-playing="true"] .duo-half.right .shade { opacity: .06; }
.duo[data-playing="true"] .idle { opacity: 0; }
.duo[data-playing="true"] .np, .duo[data-playing="true"] .lyrics { opacity: 1; }

.listen-controls { margin-top: clamp(36px, 5vw, 52px); display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
@media (min-width: 900px) { .listen-controls { margin-top: clamp(28px, 3vw, 40px); align-items: flex-start; text-align: start; } }
.play { width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; color: #fff;
  background: radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--accent-deep, var(--accent)) 82%, #fff), var(--accent-deep, var(--accent)) 62%);
  box-shadow: 0 14px 34px -6px color-mix(in srgb, var(--accent-deep, var(--accent)) 55%, transparent), inset 0 1px 0 rgba(255, 255, 255, .28), inset 0 -1px 0 rgba(0, 0, 0, .12);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.play:hover { transform: scale(1.04); box-shadow: 0 18px 40px -6px color-mix(in srgb, var(--accent-deep, var(--accent)) 62%, transparent), inset 0 1px 0 rgba(255, 255, 255, .28), inset 0 -1px 0 rgba(0, 0, 0, .12); }
.play:active { transform: scale(.96); }
.play:focus-visible { border-radius: 50%; outline-offset: 5px; }
.play .ic { width: 32px; height: 32px; grid-area: 1 / 1; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .18)); transition: opacity .25s, transform .35s var(--ease); }
.play .i-play { transform: translateX(-2.3px); } /* the glyph sits right of its box; this leaves a slight optical shift */
.play .i-pause { opacity: 0; transform: scale(.6); }
.play[aria-pressed="true"] .i-play { opacity: 0; transform: scale(.6); }
.play[aria-pressed="true"] .i-pause { opacity: 1; transform: none; }
.listen-note { font-size: var(--fs-small); line-height: 1.5; color: var(--text-2); max-width: 32em; text-wrap: pretty; }

/* Purchase */
.purchase { padding-bottom: var(--panel-pad); }
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 1.8vw, 24px); margin-top: clamp(44px, 5vw, 72px); }
.card { --pad: clamp(14px, 1.3vw, 18px); --tpad: clamp(10px, 1.1vw, 16px);
  background: var(--bg); border-radius: var(--radius-card); padding: 0 0 clamp(28px, 2.6vw, 36px); display: flex; flex-direction: column;
  overflow: hidden; /* the illustration runs edge to edge: the card's rounded corners clip it */
  box-shadow: var(--soft-shadow); transition: background-color .5s var(--ease), transform .5s var(--ease), box-shadow .5s var(--ease); }
.card:hover { transform: translateY(-3px); box-shadow: var(--soft-shadow), 0 18px 40px rgba(0, 0, 0, .07); }
.card h3 { font: 700 var(--fs-h3)/1.18 var(--font-display); letter-spacing: -.022em; margin: clamp(22px, 2.2vw, 30px) calc(var(--pad) + var(--tpad)) 0; text-wrap: balance; }
.card p { margin: 10px calc(var(--pad) + var(--tpad)) 0; font-size: 17px; line-height: 1.47; color: var(--text-2); text-wrap: pretty; }
:lang(ar) .card h3, :lang(hi) .card h3, :lang(vi) .card h3, :lang(zh-Hans) .card h3 { letter-spacing: 0; line-height: 1.3; }
.card-art { height: 248px; /* tall enough, at every width, for the lock screen's player to show whole */ background: var(--card); position: relative; overflow: hidden; transition: background-color .5s var(--ease); isolation: isolate; }

/* card 1: an endless list of feeds */
/* the art runs edge to edge and the page behind the card is the same gray: a hint of the accent from the top keeps the card's rounded top corners readable */
.art-feeds { background: linear-gradient(180deg, color-mix(in srgb, var(--card) 92%, var(--accent)), color-mix(in srgb, var(--card) 82%, var(--accent))); }
.feed-list { position: absolute; inset: 0 calc(var(--pad) + var(--tpad)); overflow: hidden; /* the rows line up with the text below */
  -webkit-mask-image: linear-gradient(transparent 0, #000 14%, #000 46%, transparent 76%); mask-image: linear-gradient(transparent 0, #000 14%, #000 46%, transparent 76%); }
.feed-list::before { content: ""; display: block; height: 18px; }
.feed-list li { display: flex; align-items: center; gap: 11px; height: 44px; margin-bottom: 8px; padding: 0 14px 0 8px; border-radius: 14px; background: var(--raised);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 4px 12px rgba(0, 0, 0, .04); font-size: 15px; font-weight: 600; color: var(--text); letter-spacing: -.01em; }
.card.is-in .feed-list li { animation: feeds 16s linear infinite; }
@keyframes feeds { to { transform: translateY(-260px); } }
.feed-list .fi { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; flex: none; color: #fff;
  background: linear-gradient(160deg, color-mix(in srgb, var(--c) 78%, #fff), var(--c)); }
.feed-list .fi svg { width: 17px; height: 17px; }
.feed-list .fn { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.feed-list b { font-size: 14px; font-weight: 600; color: var(--text-2); font-variant-numeric: tabular-nums; }
.inf-badge { position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%); display: grid; place-items: center; width: 84px; height: 48px; border-radius: 999px;
  background: var(--accent); color: var(--on-accent); box-shadow: 0 10px 26px color-mix(in srgb, var(--accent) 45%, transparent), inset 0 1px 0 rgba(255, 255, 255, .35); }
.inf-badge svg { width: 46px; height: 23px; }
.inf-badge use { stroke-dasharray: 160; }
.card.is-in .inf-badge use { animation: draw 2.2s var(--ease) both .3s; }
@keyframes draw { from { stroke-dashoffset: 160; } to { stroke-dashoffset: 0; } }

/* card 2: the app icon in its colors (a small carousel) */
/* --u scales the carousel with the card, so the outer icon always sits half over each side edge instead of showing as a sliver */
.art-icons { --u: clamp(.74px, .263cqw, 1.1px); container-type: inline-size;
  background: radial-gradient(120% 90% at 50% 100%, color-mix(in srgb, var(--accent) 22%, var(--card)), transparent 70%), color-mix(in srgb, var(--card) 92%, var(--accent)); }
.art-icons img { position: absolute; top: 50%; left: 50%; border-radius: 22.5%; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .15));
  transform: translate(calc(-50% + var(--dx, 0px)), -50%); transition: transform .7s var(--ease), opacity .5s; }
.art-icons .i0 { width: calc(92 * var(--u)); height: calc(92 * var(--u)); z-index: 4; filter: drop-shadow(0 12px 22px rgba(0, 0, 0, .22)); }
.art-icons .i1 { width: calc(62 * var(--u)); height: calc(62 * var(--u)); z-index: 3; --dx: calc(-84 * var(--u)); }
.art-icons .i2 { width: calc(46 * var(--u)); height: calc(46 * var(--u)); z-index: 2; --dx: calc(-144 * var(--u)); opacity: .85; }
.art-icons .i3 { width: calc(34 * var(--u)); height: calc(34 * var(--u)); z-index: 1; --dx: calc(-190 * var(--u)); opacity: .6; }
.art-icons .i1 ~ .i0 ~ .i1 { --dx: calc(84 * var(--u)); }
.art-icons .i0 ~ .i2 { --dx: calc(144 * var(--u)); }
.art-icons .i0 ~ .i3 { --dx: calc(190 * var(--u)); }
.card:hover .art-icons .i0 { transform: translate(-50%, -54%) scale(1.04); }

/* card 3: Listen on the Lock Screen */
.art-lock { background: linear-gradient(180deg, color-mix(in srgb, var(--card) 92%, var(--accent)), color-mix(in srgb, var(--card) 84%, var(--accent))); }
.lock-phone { position: absolute; left: 50%; top: 22px; width: min(78%, 250px); height: 120%; transform: translateX(-50%); border-radius: 40px 40px 0 0;
  border: 6px solid #111113; border-bottom: 0; overflow: hidden; color: #fff; text-align: center;
  background:
    radial-gradient(90% 60% at 20% 10%, color-mix(in srgb, var(--accent) 70%, #fff) 0%, transparent 70%),
    radial-gradient(80% 70% at 90% 60%, color-mix(in srgb, var(--accent) 60%, #2a3550) 0%, transparent 75%),
    linear-gradient(170deg, color-mix(in srgb, var(--accent) 80%, #1b2233), #1a2030 80%);
  box-shadow: 0 0 0 1.5px #a9a9ae, 0 18px 40px rgba(0, 0, 0, .22); }
.island { position: absolute; top: 9px; left: 50%; width: 58px; height: 17px; border-radius: 10px; background: #000; transform: translateX(-50%); }
.lock-ic { width: 13px; height: 13px; margin: 34px auto 0; opacity: .9; }
.lock-time { display: block; margin-top: 2px; font: 600 52px/1 var(--rounded); letter-spacing: -.02em; text-shadow: 0 1px 12px rgba(0, 0, 0, .12); }
.npw { position: absolute; left: 10px; right: 10px; top: 118px; padding: 10px 11px 9px; border-radius: 18px; text-align: start;
  background: rgba(255, 255, 255, .2); -webkit-backdrop-filter: blur(14px) saturate(1.5); backdrop-filter: blur(14px) saturate(1.5);
  box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .35); }
.npw-top { display: flex; align-items: center; gap: 9px; }
.npw-top img { width: 34px; height: 34px; border-radius: 8px; object-fit: cover; flex: none; }
.npw-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.npw-text b { font-size: 12px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.npw-text span { font-size: 11px; opacity: .75; }
.npw-bar { display: block; margin-top: 9px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .3); overflow: hidden; }
.npw-bar i { display: block; width: 42%; height: 100%; background: #fff; border-radius: inherit; }
.card.is-in .npw-bar i { animation: listen-progress 9s linear infinite; }
@keyframes listen-progress { from { width: 18%; } to { width: 86%; } }
.npw-ctl { display: flex; justify-content: center; align-items: center; gap: 26px; margin-top: 7px; }
.npw-ctl svg { width: 17px; height: 17px; }
.npw-ctl .big { width: 21px; height: 21px; }

.cta { margin-top: clamp(44px, 5vw, 64px); display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.pill-accent { display: inline-flex; align-items: center; justify-content: center; min-width: 200px; height: 58px; padding: 0 34px; border-radius: 999px;
  background: var(--accent); color: var(--on-accent); font-size: 18px; font-weight: 650; text-decoration: none; letter-spacing: -.01em;
  box-shadow: 0 12px 32px color-mix(in srgb, var(--accent) 40%, transparent), inset 0 1px 0 rgba(255, 255, 255, .3); transition: transform .25s var(--ease), box-shadow .25s; }
.pill-accent:hover { transform: translateY(-1px) scale(1.02); }
.pill-accent:active { transform: scale(.98); }
.pill-accent:focus-visible { border-radius: 999px; }
.fine { font-size: var(--fs-small); line-height: 1.5; color: var(--text-2); max-width: 34em; text-wrap: pretty; }

/* FAQ */
.faq-list { margin-top: clamp(36px, 4.4vw, 60px); gap: 0; }
.faq-list .acc-item { border-bottom: 1px solid var(--sep); }
.faq-list .acc-item:first-child { border-top: 1px solid var(--sep); }
.faq-list .acc-btn { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: clamp(22px, 2vw, 28px) 2px; text-align: start;
  font: 600 clamp(18px, 1.55vw, 22px)/1.3 var(--font-display); letter-spacing: -.018em; color: var(--text); transition: opacity .2s; }
.faq-list .acc-btn:hover { opacity: .72; }
.faq-list .acc-btn:focus-visible { border-radius: 8px; }
.faq-list .chev { width: 24px; height: 24px; color: var(--text-2); transition: transform .45s var(--ease); }
.faq-list .acc-btn[aria-expanded="true"] .chev { transform: rotate(180deg); }
.faq { padding-bottom: var(--gap); }
.faq-list .acc-inner p { padding: 0 2px clamp(24px, 2.2vw, 30px); font-size: var(--fs-body); line-height: 1.55; color: var(--text-2); max-width: 38em; text-wrap: pretty; }
:lang(ar) .faq-list .acc-btn, :lang(hi) .faq-list .acc-btn, :lang(vi) .faq-list .acc-btn, :lang(zh-Hans) .faq-list .acc-btn { letter-spacing: 0; }

/* Footer */
.site-footer { padding: clamp(40px, 4vw, 56px) 0 calc(clamp(36px, 3.6vw, 52px) + env(safe-area-inset-bottom)); font-size: 14px; color: var(--text-2); background: var(--card); transition: background-color .5s var(--ease); }
.foot-top { display: flex; justify-content: space-between; align-items: center; gap: 16px 32px; flex-wrap: wrap; padding-bottom: 24px; border-bottom: 1px solid color-mix(in srgb, var(--text) 12%, transparent); }
.foot-brand { display: inline-flex; align-items: center; gap: 9px; color: var(--text); text-decoration: none; font: 700 20px/1 var(--font-display); letter-spacing: -.02em; }
.foot-brand svg { width: 22px; height: 22px; }
.foot-links { display: flex; gap: 8px 28px; flex-wrap: wrap; }
.foot-links a { color: var(--text); text-decoration: none; font-size: 15px; font-weight: 500; }
.foot-links a:hover { text-decoration: underline; text-underline-offset: 3px; }
.foot-bottom { display: flex; flex-direction: column; gap: 10px; padding-top: 20px; }
.foot-note { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.foot-note .copy { white-space: nowrap; }
.foot-legal { font-size: 12px; line-height: 1.5; max-width: 60em; }

/* ------------------------------------------------------------------ reveal on scroll (only what starts below the fold; see js) */
.js .reveal.pre { opacity: 0; transform: translateY(32px); }
.js .reveal.is-in { opacity: 1; transform: none; transition: opacity .9s var(--ease), transform 1.1s var(--ease); }
.js .classic.reveal.pre { transform: translateY(40px) scale(.985); }
.js .cards .card.reveal:nth-child(2) { transition-delay: .08s; }
.js .cards .card.reveal:nth-child(3) { transition-delay: .16s; }
.js .cards .card.reveal.is-in:hover { transition-delay: 0s; }

/* ------------------------------------------------------------------ responsive */
@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; gap: 0; }
  .hero-copy { padding-bottom: 0; text-align: center; display: flex; flex-direction: column; align-items: center; }
  .hero-copy .display { max-width: 11em; }
  .hero-copy .lead { margin-inline: auto; }
  .views { justify-content: center; }
  .hero-device { justify-self: center; width: min(100%, 560px); margin-top: 20px; }
  [dir="rtl"] .hero-device { justify-self: center; }
  .rules { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "head" "list" "pad"; }
  .rules-head { margin-bottom: 0; }
  .rules-list { padding-top: clamp(32px, 5vw, 48px); padding-bottom: 0; }
  .ipad-crop { margin-top: clamp(44px, 7vw, 64px); width: min(100%, 520px); }
  .rules .acc-item.is-open { width: min(100%, 420px); }
  .cards { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; }
}
@media (max-width: 760px) {
  }
@media (max-width: 600px) {
  :root { --header-h: 66px; --fs-hero: clamp(38px, 11.2vw, 50px); --fs-h2: clamp(32px, 9.4vw, 42px); --fs-intro: 19px; --fs-body: 17px; --panel-pad: 52px; }
  .capsule { --cap-h: 48px; --cap-inset: 6px; }
  .brand { --logo-h: 25.5px; padding: 0 15px; }
  .tools { gap: 3px; }
  /* the Download button is always there, with the short label: logo, theme, language, Download */
  .pill-dark { padding: 0 13px; margin-inline-start: 2px; font-size: 14px; }
  .pill-dark .long { display: none; }
  .pill-dark .short { display: inline; }
  .popover { position: fixed; top: calc(max(14px, env(safe-area-inset-top)) + 58px); left: 12px !important; right: 12px !important; }
  .pop-cols { justify-content: center; gap: 30px; }
  .swatch-grid.accents { grid-template-columns: repeat(3, 34px); gap: 12px; }
  .swatch-grid.themes { grid-template-columns: 34px; gap: 12px; }
  .swatch { width: 34px; height: 34px; }
  .lang-grid { grid-template-columns: 1fr 1fr; }
  .hero-copy .lead { max-width: 21em; }
  .store-badge { height: 52px; }
  .views { gap: 6px; }
  .views button { min-height: 33px; padding: 0 14px; font-size: 14px; line-height: 17px; }
  /* the phone in the hand fills the width: the hand bleeds off the left edge. The arm fades out under the phone and the
     photo ends above the next card, with a gap: it never touches or slides under the card's rounded corners */
  /* the whole photo, smaller: the arm's cut slides under the next panel (no fade) */
  /* 42 px above the photo (its top 3 px are transparent): 3 times the room it had under the App Store badge */
  .hero-device { width: min(100%, 440px); max-width: none; justify-self: center; margin: 42px 0 calc(min(100vw - 34px, 440px) * -0.11); }
  [dir="rtl"] .hero-device { justify-self: center; }
  .hero { padding-bottom: 0; }
  .classic header { padding-inline: 20px; }
  .classic-stage { margin-inline: -22%; }
  .classic-stage .device-photo { margin-top: -5%; }
  .rules { padding-inline: 18px; }
  /* the options in two columns, as compact chips, so the iPad below stays in view while one taps them; the open option
     (its text and its picker) spans both columns. "dense" lets the next chip fill the gap an open one leaves in the row. */
  .rules .accordion { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: row dense; gap: 8px; align-items: stretch; }
  .rules .acc-item { width: auto; }
  .rules .acc-item:not(.is-open) { display: flex; }
  .rules .acc-item:not(.is-open) h3 { display: flex; flex: 1; min-width: 0; }
  .rules .acc-item:not(.is-open) .acc-btn { flex: 1; min-width: 0; min-height: 44px; gap: 6px; padding: 8px 12px 8px 10px; border-radius: 22px; font-size: 14px; line-height: 1.2; letter-spacing: -.01em; }
  .rules .acc-btn .plus { width: 16px; height: 16px; }
  .rules .acc-item.is-open { grid-column: 1 / -1; width: 100%; }
  .rules .acc-panel.closing { display: none; }
  .ipad-crop { margin-top: 32px; width: 88%; }
  .duo { width: 100%; }
  .lyrics li { font-size: 7cqw; }
  .np { padding: 6% 9%; }
  .faq-list .acc-btn { padding: 20px 2px; }
  .foot-top { flex-direction: column; align-items: flex-start; }
}

/* ------------------------------------------------------------------ reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important; }
  .js .reveal, .js .reveal.pre { opacity: 1; transform: none; }
  .plane-screen .scr, .ipad-screen .state, .np, .lyrics, .duo-screen .idle { transition: opacity .2s linear !important; }
  /* no fold: the Duo stays flat and only the lyrics move */
  .duo[data-playing="true"] .duo-half.left, .duo[data-playing="true"] .duo-half.right { transform: none; }
  .duo[data-playing="true"] .duo-body { transform: none; }
  .duo[data-playing="true"] .duo-shadow { opacity: .6; transform: scaleX(.92); }
  .card.is-in .npw-bar i, .card.is-in .feed-list li { animation: none; }
}

@media print {
  .site-header, .glow, .listen-controls { display: none; }
  .js .reveal { opacity: 1; transform: none; }
}

/* media controls and progress keep their direction in right-to-left languages, as on Apple devices */
.np-controls, .np-progress, .npw-ctl, .npw-bar { direction: ltr; }
:lang(ar) body { font-size: calc(var(--fs-body) * 1.06); }
:lang(ar) .lead, :lang(ar) .sub { font-size: calc(var(--fs-intro) * 1.06); }