/* Kaino Play — play.kainolab.io
   The site speaks the language of the App Store screenshots: full-bleed fields in the brand colours, a two-line
   headline whose second line carries the accent, devices rising out of the bottom edge of their field, halftone
   dots on the dark fields and flat concentric rings on the coloured ones. Surfaces are flat; the only gradient is
   the pink-to-cyan outline of the primary action. Generated pages: marketing/website in the app repository. */

:root {
  --cyan: #08F7FE;
  --pink: #FE53BB;
  --purple: #B008FE;
  --plum: #630C8F;
  --night: #0F0F1A;          /* the screenshots' dark field */
  --page: #090A12;           /* design-system dark.page */
  --surface: #14141D;        /* dark.card */
  --raised: #181A2A;         /* dark.surfaceRaised */
  --ink: #F8F7FC;
  --ink-2: rgba(255, 255, 255, .74);
  --ink-3: rgba(255, 255, 255, .48);
  --line: rgba(255, 255, 255, .11);
  --line-2: rgba(255, 255, 255, .22);

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --display: clamp(3.2rem, 1.4rem + 5.6vw, 6.6rem);
  --title: clamp(2.6rem, 1.5rem + 3vw, 4.1rem);
  --title-min: 2.2rem;
  --numeral: clamp(8.5rem, 4.5rem + 12vw, 14rem);
  --lead: clamp(1.15rem, 1rem + .45vw, 1.4rem);
  --gutter: clamp(20px, 5vw, 56px);
  --header: 64px;
  --sheet: 44px;            /* how far each field slides over the one before */
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--header); }
body {
  margin: 0; background: var(--page); color: var(--ink); font-family: var(--font);
  font-size: 1.0625rem; line-height: 1.55; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; border-radius: 6px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -48px; z-index: 100; padding: 10px 16px; border-radius: 999px; background: var(--cyan); color: #000; font-weight: 600; text-decoration: none; }
.skip:focus { top: 12px; }
.wrap { width: 100%; max-width: 1240px; margin: 0 auto; padding-inline: var(--gutter); }

/* ── Header ─────────────────────────────────────────────────────────────── */
.header {
  position: sticky; top: 0; z-index: 50; height: var(--header);
  background: rgba(15, 15, 26, .72); -webkit-backdrop-filter: blur(30px) saturate(150%); backdrop-filter: blur(30px) saturate(150%);
  border-bottom: 1px solid transparent; transition: border-color .2s ease;
}
.header.is-scrolled { border-bottom-color: rgba(255, 255, 255, .08); }
.header .wrap { display: flex; align-items: center; gap: 28px; height: 100%; }
.brand { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; font-size: 1.0625rem; font-weight: 700; letter-spacing: -.01em; text-decoration: none; }
.brand img { width: 32px; height: 32px; border-radius: 8px; }
.nav { display: flex; gap: 26px; margin-left: auto; }
.nav a { position: relative; padding: 6px 0; font-size: .9375rem; font-weight: 500; color: var(--ink-2); text-decoration: none; transition: color .2s ease; }
.nav a:hover { color: var(--ink); }
/* The chapter you are reading: white, with a short pink rule under it that slides in. */
.nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; border-radius: 2px; background: var(--pink); transform: scaleX(0); transition: transform .35s cubic-bezier(.2, .7, .2, 1); }
.nav a.is-current { color: var(--ink); }
.nav a.is-current::after { transform: scaleX(1); }
.header__chapter { display: none; }
.progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; pointer-events: none; }
.progress span { display: block; height: 100%; transform-origin: 0 50%; transform: scaleX(var(--progress, 0)); background: linear-gradient(90deg, var(--pink), var(--cyan)); }
.header__actions { display: flex; align-items: center; gap: 12px; }
.menu-toggle { display: none; }

/* Language: a native disclosure, so it works without script. */
.lang { position: relative; }
.lang summary {
  display: flex; align-items: center; gap: 6px; height: 36px; padding: 0 10px; border-radius: 999px; cursor: pointer;
  font-size: .875rem; font-weight: 600; color: var(--ink-2); list-style: none;
}
.lang summary::-webkit-details-marker { display: none; }
.lang summary:hover, .lang[open] summary { color: var(--ink); background: rgba(255, 255, 255, .06); }
.lang svg { width: 16px; height: 16px; }
.lang ul {
  position: absolute; right: 0; top: calc(100% + 8px); min-width: 170px; padding: 6px;
  background: var(--raised); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 18px 40px rgba(0, 0, 0, .5);
}
.lang a { display: block; padding: 8px 12px; border-radius: 9px; font-size: .9375rem; text-decoration: none; color: var(--ink-2); }
.lang a:hover { background: rgba(255, 255, 255, .06); color: var(--ink); }
.lang a[aria-current="true"] { color: var(--pink); background: rgba(254, 83, 187, .16); }

/* ── Actions ────────────────────────────────────────────────────────────── */
/* The primary action wears the brand outline, pink to cyan; its content stays white. */
.action {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 18px;
  border: 1.5px solid transparent; border-radius: 999px; font-size: .9375rem; font-weight: 600; white-space: nowrap; text-decoration: none;
  color: var(--ink); background: linear-gradient(var(--night), var(--night)) padding-box, linear-gradient(100deg, var(--pink), var(--cyan)) border-box;
  transition: background .2s ease;
}
.action:hover { background: linear-gradient(#1C1C30, #1C1C30) padding-box, linear-gradient(100deg, var(--pink), var(--cyan)) border-box; }
.action--large { height: 52px; padding: 0 26px; font-size: 1.0625rem; }
.store { display: inline-block; border-radius: 9px; }
.store img { height: 52px; width: auto; }

/* ── Bands ──────────────────────────────────────────────────────────────── */
.band {
  --bg: var(--night); --fg: var(--ink); --fg-2: var(--ink-2); --hi: var(--cyan); --accent: var(--cyan); --mark: var(--accent); --tick: var(--bg);
  position: relative; overflow: hidden; isolation: isolate; background: var(--bg); color: var(--fg);
}
.t-dark.a-pink { --hi: var(--pink); --accent: var(--pink); }
.t-cyan { --bg: var(--cyan); --fg: var(--night); --fg-2: rgba(15, 15, 26, .78); --hi: var(--purple); --accent: var(--purple); --mark: var(--night); }
.t-purple { --bg: var(--purple); --fg: #fff; --fg-2: rgba(255, 255, 255, .86); --hi: var(--cyan); --accent: var(--pink); --mark: #fff; }
.t-pink { --bg: var(--pink); --fg: var(--night); --fg-2: rgba(15, 15, 26, .8); --hi: var(--plum); --accent: var(--purple); --mark: var(--night); }

/* Halftone dots in the accent, fading away from the device's side (dark fields). The pattern is the child of a
   masked layer, so it can drift (see Motion) without the mask moving with it. */
.dots {
  position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; opacity: .7;
  -webkit-mask-image: radial-gradient(circle at var(--dots-x, 100%) var(--dots-y, 62%), #000 0, transparent 58%);
  mask-image: radial-gradient(circle at var(--dots-x, 100%) var(--dots-y, 62%), #000 0, transparent 58%);
}
.dots::before { content: ""; position: absolute; inset: -22px; background: radial-gradient(circle, var(--accent) 2.1px, transparent 2.7px) 0 0 / 22px 22px; }
.band--flip .dots { --dots-x: 0%; }
/* In the hero the field sits behind the television, clear of the text. */
.hero .dots {
  -webkit-mask-image: radial-gradient(circle 640px at 100% 100%, #000 0, transparent 100%);
  mask-image: radial-gradient(circle 640px at 100% 100%, #000 0, transparent 100%);
}

.band__inner {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 56px;
  min-height: 700px; padding-top: 76px;
}
.band--flip .band__inner { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.band--flip .band__text { order: 2; }
.band__text { position: relative; z-index: 1; max-width: 620px; padding-bottom: 112px; }
.band__visual { position: relative; min-height: 580px; }

/* Flat concentric rings behind the device (coloured fields), from the accent out to the field. */
.t-cyan .band__visual::before, .t-purple .band__visual::before, .t-pink .band__visual::before {
  content: ""; position: absolute; left: 50%; top: 330px; width: 920px; height: 920px; translate: -50% -50%; z-index: -1; border-radius: 50%;
  background: radial-gradient(circle,
    var(--accent) 0 18%,
    color-mix(in srgb, var(--accent) 78%, var(--bg)) 18% 32%,
    color-mix(in srgb, var(--accent) 56%, var(--bg)) 32% 46%,
    color-mix(in srgb, var(--accent) 36%, var(--bg)) 46% 60%,
    color-mix(in srgb, var(--accent) 18%, var(--bg)) 60% 74%,
    transparent 74%);
}

/* Type */
.band__text, .section__head, .faq__side { container-type: inline-size; }
.display, .title { font-weight: 800; letter-spacing: -.035em; line-height: .94; }
/* Each line of a headline is a line: the size comes down until the longest one fits the column. */
.display { font-size: max(var(--title-min), min(var(--display), calc(100cqi / (var(--chars, 14) * .46)))); }
.title { font-size: max(var(--title-min), min(var(--title), calc(100cqi / (var(--chars, 14) * .47)))); }
.display span, .title span { display: block; text-wrap: balance; }
.display span:last-child, .title span:last-child { color: var(--hi); }
.numeral { display: block; font-size: var(--numeral); font-weight: 800; line-height: .8; letter-spacing: -.06em; margin: 0 0 .06em -.05em; color: var(--accent); }
.numeral + .title span:first-child { color: var(--fg); }
/* "0 ads.", "5 players.": the figure stands beside the words instead of above them, as tall as two lines. */
.title--numeral { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: .14em; align-items: start; }
.title--numeral > .numeral { grid-row: 1 / span 3; font-size: 2.55em; line-height: .78; margin: 0 0 0 -.04em; }
.title--numeral > span:not(.numeral) { grid-column: 2; }
.title--numeral > span:nth-child(2) { color: var(--fg); }
.lead { margin-top: 22px; max-width: 30ch; font-size: var(--lead); font-weight: 500; line-height: 1.3; color: var(--fg-2); }

/* Premium: a small pill with the crown, never a warning line. Pink on dark fields, the field's ink elsewhere. */
.premium {
  display: inline-flex; align-items: center; gap: 6px; margin-bottom: 22px; padding: 5px 12px 5px 9px; border-radius: 999px;
  font-size: .8125rem; font-weight: 700; line-height: 1; letter-spacing: .01em;
  --c: var(--fg); color: var(--c); background: color-mix(in srgb, var(--c) 12%, transparent); border: 1px solid color-mix(in srgb, var(--c) 45%, transparent);
}
.t-dark .premium, .plans .premium { --c: var(--pink); background: color-mix(in srgb, var(--c) 13%, transparent); border-color: color-mix(in srgb, var(--c) 55%, transparent); }
.premium svg { width: 13px; height: 13px; fill: currentColor; }
.premium--free, .t-dark .premium--free { --c: var(--cyan); }
.t-cyan .premium--free, .t-pink .premium--free, .t-purple .premium--free { --c: var(--fg); }
.premium--free svg { fill: none; }
/* "New on Apple TV", beside the Premium pill: the same outline, with the Apple TV glyph. */
.premium--new { margin-left: 8px; }
.premium--new svg { width: 15px; height: 15px; fill: none; }
.chips .chip--premium { display: inline-flex; align-items: center; gap: 6px; }
.chips .chip--premium svg { width: 13px; height: 13px; fill: currentColor; }

/* Checkpoint lines: a filled mark in the accent, the feature in bold, its detail below. */
.checks { display: grid; gap: 18px; margin-top: 34px; }
.checks li { display: grid; grid-template-columns: 22px 1fr; column-gap: 12px; }
.checks svg { width: 22px; height: 22px; margin-top: 1px; }
.checks circle { fill: var(--mark); }
.checks path { stroke: var(--tick); }
.checks strong { display: block; font-size: 1.125rem; font-weight: 700; line-height: 1.25; }
.checks span { display: block; margin-top: 2px; font-size: 1rem; font-weight: 500; color: var(--fg-2); }
.checks--two { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; row-gap: 22px; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 30px; }
.chips li { padding: 6px 14px 7px; border: 1.5px solid var(--accent); border-radius: 999px; font-size: .9375rem; font-weight: 700; color: var(--accent); }
.t-cyan .chips li, .t-purple .chips li, .t-pink .chips li { border-color: var(--fg); color: var(--fg); }

.icons { display: flex; gap: 26px; margin-top: 34px; }
.icons li { display: grid; justify-items: center; gap: 8px; min-width: 64px; font-size: .9375rem; font-weight: 700; }
.icons svg { width: 40px; height: 40px; fill: currentColor; }

.steps { display: grid; gap: 18px; margin-top: 34px; counter-reset: step; }
.steps li { display: grid; grid-template-columns: 32px 1fr; column-gap: 14px; counter-increment: step; }
.steps li::before {
  content: counter(step); display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  border: 1.5px solid currentColor; font-size: .9375rem; font-weight: 700;
}
.steps strong { display: block; font-size: 1.125rem; font-weight: 700; line-height: 1.25; margin-top: 4px; }
.steps span { display: block; font-size: 1rem; font-weight: 500; color: var(--fg-2); }

/* ── Devices (drawn: the images are bare screens) ───────────────────────── */
.phone {
  --w: 320px; --rim: none;
  position: absolute; left: 50%; top: 0; width: var(--w); margin-left: calc(var(--w) / -2);
  padding: calc(var(--w) * .027); border-radius: calc(var(--w) * .158); background: #05050A;
  box-shadow: var(--rim-shadow, 0 0 0 1px rgba(255, 255, 255, .14)), 0 30px 70px rgba(0, 0, 0, .45);
}
.phone img { width: 100%; aspect-ratio: 1320 / 2868; border-radius: calc(var(--w) * .131); object-fit: cover; background: #000; }
.phone::after {
  content: ""; position: absolute; left: 50%; top: calc(var(--w) * .052); width: 29%; height: calc(var(--w) * .083); translate: -50% 0;
  border-radius: 999px; background: #000;
}
/* On a dark field the black phone would melt into it: a thin ring and a soft glow in the field's accent. */
.t-dark .phone { --rim-shadow: 0 0 0 2px var(--accent), 0 0 60px -6px color-mix(in srgb, var(--accent) 60%, transparent); }

.tv { position: relative; width: 100%; aspect-ratio: 1176 / 762; }
.tv__screen { position: absolute; left: 1.06%; top: 1.64%; width: 97.79%; height: 82.94%; overflow: hidden; background: #000; }
.tv__screen img { width: 100%; height: 100%; object-fit: cover; }
.tv__frame { position: absolute; inset: 0; width: 100%; height: 100%; }
.tv::after { content: ""; position: absolute; left: 10%; right: 10%; bottom: -1%; height: 4%; z-index: -1; border-radius: 50%; background: rgba(0, 0, 0, .55); filter: blur(10px); }

.laptop { position: relative; width: 100%; }
.laptop__lid { padding: 1.1%; border-radius: 3.4% 3.4% .8% .8% / 5.4% 5.4% 1.2% 1.2%; background: linear-gradient(145deg, #F4F5F8 0%, #C3C8D2 45%, #EDEFF3 70%, #A6ACB8 100%); }
.laptop__lid img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: left top; border: 10px solid #000; border-bottom-width: 14px; border-radius: 14px 14px 3px 3px; }
.laptop__base { height: 14px; margin: 0 -5.5%; border-radius: 3px 3px 14px 14px; background: linear-gradient(#F1F2F5, #B9BEC9 55%, #8D93A0); box-shadow: 0 18px 30px rgba(20, 0, 40, .35); }

/* ── Hero ─────────────────────────────────────────────────────────────────
   The whole first screen at once. Words on the left; on the right a scene: the television, lit, with the iPhone
   and the iPad standing in front of its lower corners, turned towards it, reflected on a dark floor. */
.hero { --accent: var(--purple); --tabs-room: clamp(88px, 11svh, 128px); }
.hero .band__inner {
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); column-gap: clamp(24px, 2.5vw, 40px);
  /* The words sit between two equal spaces, so their middle meets the middle of the iPhone and TV beside them. */
  grid-template-areas: ". stage" "text stage" "aside stage" "act stage" ". stage" ". .";
  grid-template-rows: 1fr auto auto auto 1fr var(--tabs-room);
  /* As tall as the window, but no taller than the pair needs: on a wide window the pair is limited by its width
     (TV and iPhone are --h tall, the stage about 0.636 of the content plus the bleed to the window's edge), and
     the empty band above it would grow with the screen. */
  --stage-w: calc(.636 * (min(100vw, 1240px) - 152px) + 56px + max(0px, (100vw - 1240px) / 2));
  min-height: min(calc(100svh - var(--header)), calc(28px + var(--sheet) + 12px + var(--tabs-room) + var(--stage-w) / 1.8));
  padding-top: clamp(12px, 2svh, 28px); padding-bottom: calc(var(--sheet) + 12px);
}
.hero .hero__text { grid-area: text; max-width: none; padding-bottom: 0; }
.hero__aside { grid-area: aside; margin-top: clamp(14px, 2.4svh, 24px); }
.hero__act { grid-area: act; align-self: start; }
.hero .display { font-size: max(2.4rem, min(var(--display), calc(100cqi / (var(--chars, 14) * .46)), 10.5svh)); }
/* "Un solo player." wears the gradient of the site in production: cyan, violet, pink. */
.hero .display span:last-child {
  width: fit-content; padding-bottom: .12em; margin-bottom: -.12em;
  background: linear-gradient(135deg, #00d4ff, #a855f7 52%, #ec4899); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.hero__aside .lead { margin-top: 0; max-width: 32ch; font-size: min(var(--lead), 2.8svh); }
.hero .chips { margin-top: clamp(14px, 2.4svh, 22px); }
.hero .chips li { border-color: rgba(255, 255, 255, .28); color: var(--ink); }
.hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 22px; margin-top: clamp(16px, 3svh, 30px); }
/* The devices it runs on, next to the download: glyph and name, in the page's secondary ink. */
.hero .hero__cta { flex-wrap: nowrap; gap: 20px; }
.platforms { display: flex; align-items: center; gap: 16px; height: 44px; padding-left: 20px; border-left: 1px solid var(--line-2); }
.platforms li { display: grid; justify-items: center; gap: 5px; min-width: 40px; font-size: .6875rem; font-weight: 600; line-height: 1; color: var(--ink-2); white-space: nowrap; }
.platforms svg { width: 22px; height: 22px; }
.hero__note { max-width: 34ch; margin-top: 12px; font-size: .9375rem; line-height: 1.4; color: var(--ink-3); }
.hero__stage {
  position: relative; grid-area: stage; container-type: size; display: flex; flex-direction: column; justify-content: center; min-height: 0;
  margin-right: calc(-1 * (var(--gutter) + max(0px, (100vw - 1240px) / 2)));
}
/* Only the pair is in the flow and it fills the stage's height; the tabs hang under it (past the mirror) in a row
   of their own (--tabs-room), which the words leave empty too, so the words' middle meets the pair's middle and
   nothing is reserved above the pair. */
.hero__stage > * { --h: min(100cqh, calc(100cqw / 1.8)); }
.hero__stage > .duo__tabs { position: absolute; left: 0; top: calc(50% + var(--h) / 2 + min(var(--h) * .1 + 8px, var(--tabs-room) - 46px)); margin: 0; }
/* --h: the height of the television's panel. Like a product shot: the iPhone, a little shorter, stands beside a
   flat panel with no foot, and the panel runs past the window's edge. No glow: the devices carry the colour. */
.duo { position: relative; display: flex; align-items: flex-end; gap: calc(var(--h) * .07); height: var(--h); }
.duo > figure { position: relative; margin: 0; flex: none; }
/* The iPhone as tall as the television's panel, so its screen reads as well as the TV's. */
.duo__phone { width: calc(var(--h) * .48); container-type: inline-size; z-index: 2; }
.duo__tv { width: calc(var(--h) * 1.7226); z-index: 1; }
/* Both devices in the same dark titanium: a brushed metal edge, black glass inside. The iPhone has its buttons. */
.handset, .tvpanel { --titanium: linear-gradient(145deg, #6a6c73 0%, #2b2c31 28%, #4b4d54 52%, #1e1f23 78%, #5a5c62 100%); }
.handset {
  position: relative; padding: calc(100cqi * .018); border-radius: calc(100cqi * .176); background: var(--titanium);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16), inset 0 1px 1px rgba(255, 255, 255, .3), 0 30px 60px rgba(0, 0, 0, .5);
}
/* Action button and volume on the left, side button on the right. */
.handset::before, .handset::after { content: ""; position: absolute; width: calc(100cqi * .016); border-radius: 2px; background: #3b3d43; }
.handset::before { left: calc(100cqi * -.012); top: 18%; height: 5%; box-shadow: 0 calc(100cqi * .17) 0 0 #3b3d43, 0 calc(100cqi * .33) 0 0 #3b3d43; }
.handset::after { right: calc(100cqi * -.012); top: 27%; height: 11%; }
.phone--static { position: relative; left: auto; top: auto; margin-left: 0; width: 100%; --w: 100cqi; }
.duo .phone { --rim-shadow: 0 0 0 0 transparent; box-shadow: none; }
/* The television: the same metal as a thin edge, a slim black bezel round a 16:9 screen, no foot. */
.tvpanel {
  padding: .9%; border: calc(var(--h) * .007) solid transparent; border-radius: 9px;
  background: linear-gradient(#050506, #050506) padding-box, var(--titanium) border-box;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .55);
}
.tvpanel .tv__screen { position: relative; inset: auto; width: 100%; height: auto; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 3px; background: #000; }
/* A light mirror under both, as on a glossy floor (Safari and Chrome draw it; elsewhere it is simply absent). */
.handset, .tvpanel { -webkit-box-reflect: below 8px linear-gradient(transparent 74%, rgba(255, 255, 255, .18)); }

/* The two screens show the same part of the app; they slide to the next one together (the TV a beat later). */
.duo .screens { overflow: hidden; border-radius: calc(var(--w) * .131); background: #000; }
.duo .track { display: flex; width: 100%; height: 100%; transform: translateX(calc(var(--scene, 0) * -100%)); transition: transform 1s cubic-bezier(.7, 0, .15, 1); }
.duo .track img { flex: 0 0 100%; width: 100%; height: 100%; border-radius: 0; object-fit: cover; }
.duo .tv__screen .track { transition-delay: .09s; }
.duo__tabs { display: flex; gap: clamp(16px, 2vw, 28px); margin-top: calc(var(--h) * .13 + 8px); padding-left: 2px; }
.duo__tabs button {
  position: relative; padding: 6px 0 10px; border: 0; background: none; cursor: pointer;
  font: 600 .9375rem/1.2 var(--font); color: var(--ink-3); transition: color .25s ease;
}
.duo__tabs button:hover, .duo__tabs button[aria-selected="true"] { color: var(--ink); }
.duo__tabs i { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px; background: rgba(255, 255, 255, .14); overflow: hidden; }
.duo__tabs i::after { content: ""; position: absolute; inset: 0; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, var(--pink), var(--purple)); }
.duo__tabs button[aria-selected="true"] i::after { transform: scaleX(1); }

/* Play: a round glass button on the screen, a faint ring round it. */
.tv-play {
  position: absolute; left: 50%; top: 50%; width: 84px; height: 84px; margin: -42px 0 0 -42px; z-index: 3;
  display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(15, 15, 26, .52); -webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%);
  box-shadow: 0 22px 50px rgba(0, 0, 0, .45);
  translate: var(--mx, 0px) var(--my, 0px); transition: translate .45s cubic-bezier(.2, .7, .2, 1), scale .35s cubic-bezier(.2, .7, .2, 1), background .25s ease, opacity .6s ease;
}
.tv-play:hover { scale: 1.06; background: rgba(15, 15, 26, .6); }
.tv-play:active { scale: .96; }
.tv-play__ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; rotate: -90deg; pointer-events: none; }
.tv-play__track { fill: none; stroke: rgba(255, 255, 255, .3); stroke-width: 1.4; }
.tv-play__comet { fill: none; stroke: url(#kp-ring); stroke-width: 3.2; stroke-linecap: round; stroke-dasharray: 0 100; opacity: 0; }
.tv-play__icon { display: grid; place-items: center; }
.tv-play__icon svg { width: 30px; height: 30px; margin-left: 5px; fill: #fff; filter: drop-shadow(0 0 10px color-mix(in srgb, var(--pink) 70%, transparent)); }
.tv-play__halo {
  position: absolute; inset: -26px; border-radius: 50%; pointer-events: none; opacity: 0; scale: .7;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--pink) 55%, transparent), color-mix(in srgb, var(--purple) 24%, transparent) 55%, transparent);
  transition: opacity .4s ease, scale .5s cubic-bezier(.2, .7, .2, 1);
}
.tv-play.is-near .tv-play__halo, .tv-play:hover .tv-play__halo { opacity: .8; scale: 1.05; }
/* Two rings that leave the button and fade, one after the other: the classic "press me", kept soft. They run on
   every device while the hero is on screen, until the first press (kaino.js: .is-calling). */
.tv-play::before, .tv-play::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none; opacity: 0;
  border: 2px solid rgba(255, 255, 255, .7); box-shadow: 0 0 14px color-mix(in srgb, var(--pink) 55%, transparent), inset 0 0 10px color-mix(in srgb, var(--pink) 35%, transparent);
}
@media (prefers-reduced-motion: no-preference) {
  .hero.is-calling .tv-play::before { animation: kp-pulse 2.8s cubic-bezier(.2, .6, .25, 1) infinite; }
  .hero.is-calling .tv-play::after { animation: kp-pulse 2.8s cubic-bezier(.2, .6, .25, 1) 1.4s infinite; }
  .hero.is-calling:not(.is-inviting) .tv-play__icon { animation: kp-nudge 2.8s cubic-bezier(.4, 0, .2, 1) infinite; }
  .hero.is-paused .tv-play::before, .hero.is-paused .tv-play::after, .hero.is-paused .tv-play__icon { animation-play-state: paused; }
}
@keyframes kp-pulse { 0% { scale: 1; opacity: .75; } 70% { opacity: .12; } 100% { scale: 1.95; opacity: 0; } }
@keyframes kp-nudge { 0%, 100% { scale: 1; } 12% { scale: 1.1; } 26% { scale: 1; } }
/* Without motion, the ring simply stays a little brighter. */
@media (prefers-reduced-motion: reduce) { .tv-play .tv-play__track { stroke: rgba(255, 255, 255, .6); } }

/* A light that crosses the glass of the screen. */
  content: ""; position: absolute; inset: -20% -50%; pointer-events: none; opacity: 0; translate: -55% 0;
  background: linear-gradient(100deg, transparent 40%, rgba(255, 255, 255, .06) 46%, rgba(255, 255, 255, .28) 50%, rgba(255, 255, 255, .06) 54%, transparent 60%);
  mix-blend-mode: screen;
}
/* The invitation, on computers only: every few seconds the light crosses the screen, and as it passes the
   centre a comet runs once round the ring, the button breathes and a soft halo opens. kaino.js starts it once
   the scene is in, pauses it out of view, and stops it after a few rounds or at the first click. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .hero.is-inviting .tv__screen::after { animation: kp-sheen 6.4s cubic-bezier(.45, .05, .25, 1) infinite; }
  .hero.is-inviting .tv-play__comet { animation: kp-comet 6.4s cubic-bezier(.65, 0, .35, 1) infinite; }
  .hero.is-inviting .tv-play__halo { animation: kp-halo 6.4s cubic-bezier(.2, .7, .2, 1) infinite; }
  .hero.is-inviting .tv-play__icon { animation: kp-breathe 6.4s cubic-bezier(.4, 0, .2, 1) infinite; }
  .hero.is-paused .tv__screen::after, .hero.is-paused .tv-play__comet, .hero.is-paused .tv-play__halo, .hero.is-paused .tv-play__icon { animation-play-state: paused; }
}
@keyframes kp-sheen { 0% { translate: -55% 0; opacity: 0; } 5% { opacity: 1; } 30% { translate: 55% 0; opacity: 1; } 34%, 100% { translate: 55% 0; opacity: 0; } }
@keyframes kp-comet {
  0%, 15% { stroke-dasharray: 0 100; stroke-dashoffset: 0; opacity: 0; }
  17% { opacity: 1; }
  33% { stroke-dasharray: 34 66; stroke-dashoffset: -30; }
  48% { stroke-dasharray: 0 100; stroke-dashoffset: -100; opacity: 1; }
  52%, 100% { stroke-dasharray: 0 100; stroke-dashoffset: -100; opacity: 0; }
}
@keyframes kp-halo { 0%, 26% { opacity: 0; scale: .7; } 36% { opacity: .85; scale: 1; } 64%, 100% { opacity: 0; scale: 1.4; } }
@keyframes kp-breathe { 0%, 27% { scale: 1; } 35% { scale: 1.09; } 46%, 100% { scale: 1; } }

/* The immersive player. */
html.is-immersive, html.is-immersive body { overflow: hidden; }
/* Above everything, the cookie banner included. */
.immersive { position: fixed; inset: 0; z-index: 100001; }
.immersive__backdrop { position: absolute; inset: 0; background: #000; opacity: 0; transition: opacity .8s ease; }
.immersive.is-open .immersive__backdrop { opacity: 1; }
.immersive__stage { position: absolute; overflow: hidden; background: #000; }
.immersive__stage img, .immersive__stage video { position: absolute; inset: 0; width: 100%; height: 100%; }
.immersive__stage img { object-fit: cover; transform-origin: 0 55%; }
.immersive__stage video { object-fit: contain; background: #000; opacity: 0; transition: opacity .7s ease; }
.immersive.is-playing video { opacity: 1; }
.immersive__ui { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .4s ease; }
.immersive.is-open.is-playing .immersive__ui { opacity: 1; }
.immersive__btn {
  position: absolute; top: max(16px, env(safe-area-inset-top)); display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%;
  color: #fff; cursor: pointer; pointer-events: auto; background: rgba(15, 15, 26, .55); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); transition: background .2s ease, scale .2s ease;
}
.immersive__btn:hover { background: rgba(15, 15, 26, .8); scale: 1.06; }
.immersive__btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.immersive__close { right: max(16px, env(safe-area-inset-right)); }
.immersive__mute { right: calc(max(16px, env(safe-area-inset-right)) + 56px); }
.immersive__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255, 255, 255, .14); }
.immersive__bar span { display: block; height: 100%; transform-origin: 0 50%; transform: scaleX(var(--t, 0)); background: linear-gradient(90deg, var(--pink), var(--purple), var(--cyan)); }
.is-immersive .header { opacity: 0; transition: opacity .4s ease; }

/* ── Sheets ───────────────────────────────────────────────────────────────
   Each field after the first slides over the one before: it starts with rounded shoulders that flatten as it
   reaches the top, while the field underneath sinks and dims a little. kaino.js writes --r and --x. */
.sheet { position: relative; margin-top: calc(var(--sheet) * -1); border-radius: var(--r, 0px) var(--r, 0px) 0 0; }

/* ── The hero's foot (wide screens) ──────────────────────────────────────
   The hero fills the window but for a sliver: the first field shows only its top, an arc (it flattens as the
   field reaches the top, like every sheet) with a line of light that breathes, and a glow of its violet rising
   into the hero. On the words' side, away from the device tabs, a cue to scroll. */
.scrollcue { display: none; }
@media (min-width: 961px) {
  /* --consent: the cookie banner's height while it is shown (kaino.js), so the sliver, the glow and the cue stay
     above it; when it goes, the hero grows back to the window. */
  .hero { --peek: 22px; display: flex; flex-direction: column; min-height: calc(100svh - var(--header) + var(--sheet) - var(--peek) - var(--consent, 0px)); transition: min-height .6s cubic-bezier(.2, .7, .2, 1); }
  /* The room left over goes mostly under the pair (a last row, 2fr), a little above it (rows 1 and 5): the band
     under the header stays short, as it was asked to be. */
  .hero > .band__inner {
    flex: 1 0 auto; width: 100%;
    grid-template-areas: ". stage" "text stage" "aside stage" "act stage" ". stage" ". ." ". .";
    grid-template-rows: 1fr auto auto auto 1fr var(--tabs-room) 2fr;
  }
  .hero::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 220px; z-index: -1; pointer-events: none;
    background: radial-gradient(60% 100% at 50% 100%, color-mix(in srgb, var(--purple) 40%, transparent), transparent 70%);
  }
  .hero + .sheet { border-radius: 50% 50% 0 0 / var(--r, 0px) var(--r, 0px) 0 0; }
  .hero + .sheet::after {
    content: ""; position: absolute; left: 50%; top: 0; z-index: 3; width: 50%; height: 2px; translate: -50% 0; border-radius: 2px; pointer-events: none;
    background: linear-gradient(90deg, transparent, #fff, transparent); opacity: .6;
  }
  .scrollcue {
    position: absolute; z-index: 5; bottom: calc(var(--sheet) + var(--peek) + 22px);
    left: calc(max(0px, (100vw - 1240px) / 2) + var(--gutter));
    display: inline-flex; align-items: center; gap: 12px; font-size: .9375rem; font-weight: 600; color: var(--ink-2); text-decoration: none; transition: color .2s ease;
  }
  /* The arrow in a ring (no fill), so it reads at a glance; the arrow itself bobs inside the ring. */
  .scrollcue svg {
    box-sizing: content-box; width: 22px; height: 22px; padding: 10px; border-radius: 50%; overflow: visible;
    fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round;
    border: 1.5px solid rgba(255, 255, 255, .38); background: transparent;
    transition: border-color .2s ease, color .2s ease;
  }
  .scrollcue:hover { color: var(--ink); }
  .scrollcue:hover svg { border-color: var(--pink); }
  @media (prefers-reduced-motion: no-preference) {
    .scrollcue svg path { transform-box: fill-box; transform-origin: center; animation: kp-cue 2.2s ease-in-out infinite; }
    .hero + .sheet::after { animation: kp-horizon 4.5s ease-in-out infinite; }
    @keyframes kp-cue { 0%, 100% { transform: translateY(-2px); opacity: .7; } 50% { transform: translateY(3px); opacity: 1; } }
    @keyframes kp-horizon { 0%, 100% { opacity: .35; width: 40%; } 50% { opacity: .9; width: 70%; } }
    .js .scrollcue { opacity: 0; transition: opacity .8s ease 1.8s, color .2s ease; }
    .js .hero.is-in .scrollcue { opacity: 1; }
  }
}
.plans.sheet { background: var(--page); }

/* ── Motion ───────────────────────────────────────────────────────────────
   Only with script (html.js) and only if the system allows motion: each field reveals its words line by line
   and its device rises out of the bottom edge as it scrolls in; rings open, dots drift. Nothing loops. */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .9s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(var(--i, 0) * 80ms); }
  .js .reveal-lines > span { opacity: 0; transform: translateY(.45em); transition: opacity .7s ease, transform .9s cubic-bezier(.2, .7, .2, 1); }
  .js .reveal-lines > span:nth-child(1) { transition-delay: 80ms; }
  .js .reveal-lines > span:nth-child(2) { transition-delay: 170ms; }
  .js .reveal-lines > span:nth-child(3) { transition-delay: 260ms; }
  .js .reveal-lines > span:nth-child(4) { transition-delay: 350ms; }
  .js .is-in .reveal, .js .is-in .reveal-lines > span { opacity: 1; transform: none; }

  .js .band__visual > * { transform: translateY(110px); opacity: 0; transition: transform 1.2s cubic-bezier(.16, .8, .2, 1) .15s, opacity .8s ease .15s, rotate .7s cubic-bezier(.2, .7, .2, 1); }
  .js .band__visual { perspective: 1400px; }
  .js .is-in .band__visual > * { transform: none; opacity: 1; }
  .js .band__visual::before { scale: .82; opacity: 0; transition: scale 1.6s cubic-bezier(.16, .8, .2, 1), opacity 1s ease; }
  .js .is-in .band__visual::before { scale: 1; opacity: 1; }
  .js .band__visual > * { translate: 0 calc(var(--p, 0) * -28px); }

  .js .duo > figure { opacity: 0; transition: transform 1.3s cubic-bezier(.16, .8, .2, 1), opacity .9s ease; }
  .js .duo__phone { transform: translateX(-90px); transition-delay: .55s; }
  .js .duo__tv { transform: translateX(140px); transition-delay: .3s; }
  .js .is-in .duo > figure { opacity: 1; transform: none; }
  /* The television switches on. */
  .js .duo .tv__screen .track { filter: brightness(0); transition: transform 1s cubic-bezier(.7, 0, .15, 1) .09s, filter 1.4s ease 1.1s; }
  .js .is-in .duo .tv__screen .track { filter: none; }
  .js .duo__tabs { opacity: 0; transition: opacity .8s ease 1.4s; }
  .js .is-in .duo__tabs { opacity: 1; }
  /* The active tab fills while its scene is on (kaino.js sets the duration). */
  .js .duo.is-auto + .duo__tabs button[aria-selected="true"] i::after { animation: kp-tab var(--dwell, 5s) linear both; }
  @keyframes kp-tab { from { transform: scaleX(0); } }
  /* Dots drift and rings breathe, slowly: the fields feel alive without pulling the eye. */
  .dots::before { animation: kp-dots 9s linear infinite; }
  @keyframes kp-dots { to { transform: translate(22px, 22px); } }
  .js .dots { transform: translateY(calc(var(--p, 0) * 40px)); }
  .t-cyan .band__visual::before, .t-purple .band__visual::before, .t-pink .band__visual::before { animation: kp-rings 8s ease-in-out infinite alternate; }
  @keyframes kp-rings { from { transform: scale(.96); } to { transform: scale(1.04); } }
  .js .tv-play { opacity: 0; transition-delay: 0s, 0s, 0s, 1.9s; }
  .js .is-in .tv-play { opacity: 1; }
  .js .hero > .band__inner, .js .sheet > .wrap { transform: translateY(calc(var(--x, 0) * 14svh)) scale(calc(1 - var(--x, 0) * .05)); opacity: calc(1 - var(--x, 0) * .55); transform-origin: 50% 0; }

  .js   .js   .js   .js 
  .store, .action, .price { transition: transform .25s cubic-bezier(.2, .7, .2, 1), background .2s ease, border-color .2s ease; }
  .store:hover, .action:hover { transform: translateY(-2px); }
  .price:hover { transform: translateY(-3px); border-color: var(--line-2); }
  .price--best:hover { border-color: var(--pink); }
  .faq details[open] .answer { animation: open .35s ease; }
  @keyframes open { from { opacity: 0; transform: translateY(-6px); } }
}

/* ── Feature visuals ────────────────────────────────────────────────────── */
.band__visual .phone { top: 6px; }
.server__stage { position: absolute; inset: 0; }
.server__stage .laptop { position: absolute; right: -6%; top: 40px; width: 112%; }
.server__stage .phone { --w: 210px; left: 0; top: 230px; margin-left: 0; }
/* Sources: words above, the pair below across the whole width, large enough to read both screens. */
.band--duo .band__inner { grid-template-columns: minmax(0, 1fr); min-height: 0; padding-top: 68px; }
.band--duo .band__text { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); column-gap: 64px; align-items: end; max-width: none; padding-bottom: 40px; }
.band--duo .band__text > * { grid-column: 1; }
.band--duo .band__text > .premium { justify-self: start; }
.band--duo .band__text > .checks { grid-column: 2; grid-row: 1 / span 4; margin-top: 0; row-gap: 14px; }
.band--duo .lead { max-width: 44ch; }
/* The title fits its own column (about 53% of the words' width), not the whole band. */
@media (min-width: 961px) {
  .band--duo .title { font-size: max(var(--title-min), min(var(--title), calc((53.5cqi - 34px) / (var(--chars, 14) * .52)))); }
}
.band__visual--duo {
  container-type: inline-size; display: flex; align-items: center; min-height: 0; padding-bottom: 72px;
  margin-right: calc(-1 * (var(--gutter) + max(0px, (100vw - 1240px) / 2)));
}
.band__visual--duo > * { --h: min(470px, calc(100cqw / 2.3)); }
/* The phone of the pair keeps its own scale (the bands' phones are sized in pixels). */
.band__visual--duo .duo .phone--static { --w: 100cqi; top: auto; }
/* The same flat rings as the Apple TV section, centred behind the television. */
.band__visual--duo::before { left: 62%; top: 46%; width: 1300px; height: 1300px; }

/* ── Handoff ──────────────────────────────────────────────────────────────
   The iPhone plays the film; its button sends it to the television: a pink arc carries the poster across, the TV
   goes from the film's page to the player at the same minute, and the phone says where it is playing. Then a
   violet arc brings it back. kaino.js runs the loop while the section is on screen. */
.handoff__note { margin-top: 14px; font-size: .875rem; color: var(--fg-2); }
/* Handoff: a little tighter than the sources band, the pair smaller; room above it for the arc that leaves the iPhone. */
.handoff .band__inner { padding-top: 60px; }
.handoff .band__text { padding-bottom: 56px; }
/* The return arc and the poster on it pass under the pair: room for them above the next field, which slides
   over this one by --sheet. */
.handoff .band__visual--duo { padding-bottom: calc(var(--sheet) + 64px); }
.handoff .band__visual--duo > * { --h: min(390px, calc(100cqw / 2.6)); }
.duo--handoff .hand { position: relative; aspect-ratio: 1320 / 2868; }
.duo--handoff .hand > img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; object-fit: cover; object-position: 50% 30%; transition: opacity .6s ease, filter .6s ease; }
.duo--handoff .hand::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(15, 15, 26, .35) 0%, rgba(15, 15, 26, 0) 22%, rgba(15, 15, 26, 0) 42%, rgba(15, 15, 26, .92) 72%, rgba(15, 15, 26, .98) 100%); }
.hand__ui { position: absolute; left: 7cqi; right: 7cqi; bottom: 9cqi; z-index: 1; color: #fff; }
.hand__title { font-size: 7.6cqi; font-weight: 800; line-height: 1.05; letter-spacing: -.02em; }
.hand__meta { margin-top: 1.8cqi; font-size: 4cqi; font-weight: 500; color: #C9C9D6; }
.hand__bar { margin-top: 5cqi; height: 1.3cqi; border-radius: 2cqi; background: rgba(255, 255, 255, .22); overflow: hidden; }
.hand__bar i { display: block; width: 38%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--pink), var(--purple)); }
.hand__times { display: flex; justify-content: space-between; margin-top: 1.8cqi; font-size: 3.6cqi; font-weight: 600; color: #C9C9D6; font-variant-numeric: tabular-nums; }
.hand__btn {
  display: flex; align-items: center; justify-content: center; gap: 2.4cqi; height: 14cqi; margin-top: 6cqi; border-radius: 8cqi;
  background: linear-gradient(100deg, var(--pink), var(--purple)); font-size: 4.6cqi; font-weight: 800; color: #fff;
  transition: opacity .45s ease, scale .45s cubic-bezier(.2, .7, .2, 1);
}
.hand__btn svg { width: 5.6cqi; height: 5.6cqi; fill: #fff; }
.hand__now {
  position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; gap: 2.4cqi; height: 14cqi;
  border-radius: 8cqi; border: 1px solid rgba(255, 255, 255, .28); background: rgba(15, 15, 26, .6);
  font-size: 4.2cqi; font-weight: 700; color: #fff; opacity: 0; scale: .94; transition: opacity .45s ease, scale .45s cubic-bezier(.2, .7, .2, 1);
}
.hand__now i { width: 2.4cqi; height: 2.4cqi; border-radius: 50%; background: var(--pink); box-shadow: 0 0 0 0 color-mix(in srgb, var(--pink) 60%, transparent); }
.duo--handoff[data-state="b"] .hand > img { opacity: .45; filter: saturate(.7); }
.duo--handoff[data-state="b"] .hand__btn { opacity: 0; scale: .92; }
.duo--handoff[data-state="b"] .hand__now { opacity: 1; scale: 1; }
.duo--handoff .tv__screen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .8s ease; }
.duo--handoff .hand__tv-b { opacity: 0; }
.duo--handoff[data-state="b"] .hand__tv-b { opacity: 1; }
.hand__arcs { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 4; }
.hand__arc { fill: none; stroke-width: 2.6; stroke-linecap: round; opacity: 0; filter: drop-shadow(0 0 3px rgba(254, 83, 187, .6)); }
.hand__arc--a { stroke: url(#kp-arc-a); }
.hand__arc--b { stroke: url(#kp-arc-b); filter: drop-shadow(0 0 3px rgba(176, 8, 254, .6)); }
.hand__card {
  position: absolute; left: 0; top: 0; z-index: 5; width: calc(var(--h) * .13); aspect-ratio: 720 / 1073; border-radius: 6px; overflow: hidden; opacity: 0; pointer-events: none;
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .85), 0 12px 30px rgba(15, 15, 26, .45), 0 0 30px -4px color-mix(in srgb, var(--pink) 70%, transparent);
}
.hand__card img { width: 100%; height: 100%; object-fit: cover; }
@media (prefers-reduced-motion: no-preference) {
  .duo--handoff[data-state="b"] .hand__now i { animation: kp-live 1.6s ease-out infinite; }
  @keyframes kp-live { to { box-shadow: 0 0 0 2.4cqi transparent; } }
}
/* Without motion: the film is on the television, both arcs drawn. */
@media (prefers-reduced-motion: reduce) { .hand__arc { opacity: .7; } }

/* ── Apple TV ───────────────────────────────────────────────────────────── */
.atv .band__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; min-height: 0; padding-top: 68px; padding-bottom: 0; }
.atv .band__text { padding-bottom: 0; }
.atv .band__visual { min-height: 0; }
.atv .band__visual .tv { width: 128%; }
.atv .band__visual::before { top: 46%; width: 1100px; height: 1100px; }
.atv__note { display: grid; justify-items: start; gap: 20px; margin-top: 28px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .28); }
.atv__note p { max-width: 46ch; font-size: 1rem; line-height: 1.5; color: var(--fg-2); }
.atv__note strong { color: var(--fg); }
.atv__checks { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 32px; row-gap: 24px; margin-top: 48px; padding-bottom: 96px; }

/* ── Plans ──────────────────────────────────────────────────────────────── */
.section { padding-block: 84px 120px; }
.plans { background: var(--page); }
.section__head { max-width: 1000px; }
.section__head .title span:last-child { color: var(--pink); }
.section__head .lead { max-width: 44ch; color: var(--ink-2); }
.plans__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 24px; margin-top: 64px; align-items: stretch; }
.plan { display: flex; flex-direction: column; padding: 34px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); }
.plan--premium { border: 1.5px solid transparent; background: linear-gradient(var(--surface), var(--surface)) padding-box, linear-gradient(120deg, var(--pink), var(--purple) 50%, var(--cyan)) border-box; }
.plan h3 { font-size: 1.75rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.plan__tag { margin-top: 6px; font-size: 1rem; color: var(--ink-2); }
.plan .premium { margin-bottom: 14px; align-self: flex-start; }
.plan__list { display: grid; gap: 12px; margin-top: 28px; }
.plan__list li { display: grid; grid-template-columns: 18px 1fr; column-gap: 12px; font-size: 1rem; line-height: 1.4; }
.plan__list svg { width: 18px; height: 18px; margin-top: 2px; fill: none; stroke: var(--cyan); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.plan--premium .plan__list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
.plan--premium .plan__list svg { stroke: var(--pink); }
.prices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 32px; }
.price { position: relative; padding: 18px 16px 16px; border-radius: 14px; background: var(--raised); border: 1px solid var(--line); }
.price--best { border: 1.5px solid var(--pink); }
.price__name { font-size: .9375rem; font-weight: 600; color: var(--ink-2); }
.price__amount { margin-top: 6px; font-size: 1.75rem; font-weight: 800; letter-spacing: -.02em; line-height: 1; font-variant-numeric: tabular-nums; }
.price__per { margin-top: 4px; font-size: .875rem; color: var(--ink-3); }
.price__trial { margin-top: 12px; font-size: .875rem; font-weight: 600; color: var(--ink); }
.price__badge { position: absolute; top: -11px; right: 12px; padding: 3px 9px; border-radius: 999px; background: var(--pink); color: var(--night); font-size: .75rem; font-weight: 700; white-space: nowrap; }
.plan__cta { margin-top: 26px; display: grid; gap: 12px; justify-items: start; }
.plan > .plan__cta:last-child { margin-top: auto; padding-top: 28px; }
.plan__fine { font-size: .875rem; color: var(--ink-3); }
.plans__notes { display: grid; gap: 6px; margin-top: 28px; max-width: 760px; font-size: .875rem; color: var(--ink-3); }

.compare { margin-top: 48px; border-top: 1px solid var(--line); }
.compare summary {
  display: flex; align-items: center; gap: 10px; padding: 22px 0; cursor: pointer; list-style: none;
  font-size: 1.0625rem; font-weight: 600;
}
.compare summary::-webkit-details-marker { display: none; }
.compare summary svg, .faq summary svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: rotate .2s ease; }
.compare[open] summary svg, .faq details[open] summary svg { rotate: 180deg; }
.compare table { width: 100%; border-collapse: collapse; font-size: 1rem; }
.compare th, .compare td { padding: 13px 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.compare thead th { font-size: .875rem; font-weight: 600; color: var(--ink-3); }
.compare th[scope="rowgroup"] { padding-top: 34px; font-size: 1.125rem; font-weight: 700; color: var(--ink); }
.compare td small { display: block; margin-top: 2px; font-size: .875rem; color: var(--ink-3); }
.compare .col { width: 120px; text-align: center; }
.compare .yes, .compare .no { display: inline-block; width: 18px; height: 18px; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.compare .yes { stroke: var(--cyan); }
.compare .no { stroke: var(--ink-3); }
.compare .col--premium .yes { stroke: var(--pink); }

/* ── FAQ ────────────────────────────────────────────────────────────────── */
.faq { background: var(--page); border-top: 1px solid var(--line); }
.faq .wrap { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 56px; }
.faq__side { position: sticky; top: calc(var(--header) + 40px); align-self: start; }
.faq__side h2 { font-size: clamp(2.2rem, 1.4rem + 2.4vw, 3.4rem); font-weight: 800; letter-spacing: -.035em; line-height: .98; }
.contact { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--line); }
.contact h3 { font-size: 1.25rem; font-weight: 700; }
.contact p { margin-top: 4px; color: var(--ink-2); }
.contact a { display: inline-block; margin-top: 12px; font-size: 1.0625rem; font-weight: 600; color: var(--cyan); text-decoration: none; }
.contact a:hover { text-decoration: underline; text-underline-offset: 4px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq details:first-child { border-top: 1px solid var(--line); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 22px 0; cursor: pointer; list-style: none;
  font-size: 1.1875rem; font-weight: 600; line-height: 1.35;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: #fff; }
.faq .answer { max-width: 64ch; padding: 0 40px 26px 0; color: var(--ink-2); }
.faq .answer strong { color: var(--ink); font-weight: 600; }

/* ── Closing ────────────────────────────────────────────────────────────── */
.closing .band__inner { grid-template-columns: 1fr; min-height: 0; padding-block: 88px 120px; }
.closing .band__text { max-width: 1000px; padding-bottom: 0; }
.closing .title span:last-child { color: var(--pink); }
.closing .hero__cta { margin-top: 40px; }

.trust { background: var(--page); border-top: 1px solid var(--line); }
.trust ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; padding-block: 56px; }
.trust strong { display: block; font-size: 1rem; font-weight: 700; }
.trust span { display: block; margin-top: 4px; font-size: .9375rem; line-height: 1.45; color: var(--ink-3); }

.footer { background: var(--page); border-top: 1px solid var(--line); padding-block: 44px 36px; font-size: .9375rem; color: var(--ink-3); }
.footer__top { display: grid; grid-template-columns: minmax(0, 6fr) auto auto; gap: 48px; align-items: start; }
.footer__about { max-width: 56ch; }
.footer__about p { margin-top: 14px; line-height: 1.5; }
.footer h2 { margin-bottom: 12px; font-size: .875rem; font-weight: 600; color: var(--ink-2); }
.footer li + li { margin-top: 8px; }
.footer a { text-decoration: none; color: var(--ink-3); transition: color .15s ease; }
.footer a:hover { color: var(--ink); }
.footer a[aria-current="true"] { color: var(--ink); }
.footer__bottom { margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--line); }

/* ── Narrower screens ───────────────────────────────────────────────────── */
@media (max-width: 1080px) {
  .nav { gap: 20px; }
  .plan--premium .plan__list { grid-template-columns: 1fr; }
}
@media (max-width: 960px) {
  .header .wrap { gap: 14px; }
  .nav {
    position: fixed; inset: var(--header) 0 auto 0; display: none; flex-direction: column; gap: 0; margin: 0;
    padding: 8px var(--gutter) 20px; background: rgba(15, 15, 26, .97); border-bottom: 1px solid var(--line);
  }
  .nav.is-open { display: flex; }
  .nav a { padding: 14px 0; font-size: 1.125rem; border-bottom: 1px solid var(--line); }
  .header__actions { margin-left: auto; }
  .header__chapter:not(:empty) {
    display: inline-flex; align-items: center; height: 28px; padding: 0 11px; border-radius: 999px;
    border: 1px solid var(--line-2); font-size: .8125rem; font-weight: 600; color: var(--ink);
  }
  .lang summary { height: 44px; }
  .menu-toggle {
    display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 999px; background: transparent; color: var(--ink); cursor: pointer;
  }
  .menu-toggle svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

  .band__inner, .hero .band__inner, .atv .band__inner { grid-template-columns: 1fr; min-height: 0; padding-top: 60px; }
  .band--flip .band__text { order: 0; }
  .band__text { padding-bottom: 48px; }
  .band__visual { min-height: 500px; }
  .band__visual .phone { --w: 268px; }
  .t-cyan .band__visual::before, .t-purple .band__visual::before, .t-pink .band__visual::before { top: 280px; width: 760px; height: 760px; }
  .band:not(.hero) .dots { -webkit-mask-image: radial-gradient(circle at 50% 78%, #000 0, transparent 62%); mask-image: radial-gradient(circle at 50% 78%, #000 0, transparent 62%); }

  .hero .band__inner {
    grid-template-columns: 1fr; grid-template-areas: "text" "aside" "stage" "act"; grid-template-rows: auto auto minmax(190px, 1fr) auto;
    padding-top: clamp(16px, 3svh, 40px); min-height: calc(100svh - var(--header));
  }
  .hero__stage { margin: clamp(10px, 2svh, 20px) calc(var(--gutter) * -1) 0 0; }
  .hero__act { margin-top: clamp(8px, 1.6svh, 18px); }
  .hero__act .hero__cta { margin-top: 0; }
  .hero__stage > * { --h: min(calc((100cqh - 84px) / 1.26), calc(100cqw / 1.8)); }
  .hero__stage > .duo__tabs { top: calc(50% + var(--h) * .63 + 8px); }
  .tvpanel { border-radius: 5px; }
  .duo__tabs { gap: 16px; }
  .duo__tabs button { font-size: .8125rem; }
  .tv-play { width: 60px; height: 60px; margin: -30px 0 0 -30px; }
  .tv-play__icon svg { width: 22px; height: 22px; margin-left: 4px; }
  :root { --sheet: 28px; }
  .band--flip .band__inner { grid-template-columns: 1fr; }
  .server__stage .laptop { right: -10%; width: 104%; top: 10px; }
  .server__stage .phone { --w: 190px; top: 170px; }
  .band--duo .band__text { display: block; padding-bottom: 32px; }
  .band--duo .band__text > .checks { margin-top: 30px; }
  .atv__checks { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-bottom: 72px; }
  .band--duo .checks { grid-template-columns: 1fr; }
  .band__visual--duo { padding-bottom: 96px; margin-right: calc(var(--gutter) * -1); }
  .band__visual--duo > * { --h: calc(100cqw / 1.9); }
  .band__visual.band__visual--duo { min-height: 0; }
  .handoff .band__visual--duo > * { --h: calc(100cqw / 1.9); }
  .handoff .band__text { padding-bottom: 40px; }
  .atv .band__inner { padding-top: 60px; }
  .atv .band__visual { order: -1; margin-bottom: 40px; }
  .atv .band__visual .tv { width: 100%; }
  
  .section { padding-block: 64px 88px; }
  .plans__grid { grid-template-columns: 1fr; }
  .faq .wrap { grid-template-columns: 1fr; gap: 32px; }
  .faq__side { position: static; }
  .closing .band__inner { padding-block: 64px 88px; }
  .trust ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__top { grid-template-columns: 1fr 1fr; }
  .footer__about { grid-column: 1 / -1; }
}
@media (max-width: 960px) and (max-height: 820px) {
  .hero__note { display: none; }
}
@media (max-width: 400px) {
  .hero .hero__cta { gap: 14px; }
  .platforms { gap: 12px; padding-left: 14px; }
  .header .wrap { gap: 8px; }
  .lang summary { padding: 0 8px; font-size: 0; gap: 0; }
  .lang summary svg { width: 18px; height: 18px; }
}
@media (max-width: 560px) {
  .store img { height: 48px; }
  .header .action { display: none; }
  .checks--two, .atv__checks { grid-template-columns: 1fr; }
  .title--numeral { display: block; }
  .title--numeral > .numeral { font-size: 2.3em; margin-bottom: .04em; }
  .icons { gap: 14px; }
  .icons li { min-width: 0; flex: 1; }
  .band__visual { min-height: 440px; }
  .band__visual .phone { --w: 240px; }
      .plan { padding: 26px 22px; }
  .prices { grid-template-columns: 1fr; }
  .price__badge { top: 16px; }
  .compare .col { width: 64px; }
  .faq summary { font-size: 1.0625rem; }
  .faq .answer { padding-right: 0; }
  .trust ul { grid-template-columns: 1fr; gap: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}