/* ==========================================================================
   XeoPlayer — one stylesheet for every page.

   The palette is taken from the app icon (electric blue, violet, lilac) and
   the app's own dark-only interface. The phone mockups use iOS's dark system
   colours and fonts so they read as the real screens, and are sized in iOS
   points: `--pt` is one point of a 390-point-wide iPhone, whatever width the
   phone is drawn at.

   No external requests: fonts are served from this site.
   ========================================================================== */

/* ---- Fonts ------------------------------------------------------------- */

@font-face {
  font-family: "Commissioner";
  src: url("../fonts/commissioner-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Commissioner";
  src: url("../fonts/commissioner-latin-ext.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, 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: "Commissioner";
  src: url("../fonts/commissioner-cyrillic.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* ---- Tokens ------------------------------------------------------------ */

:root {
  color-scheme: dark;

  /* Page */
  --ink: #060a1f;          /* ground: the icon's darkest blue */
  --night: #0d1535;        /* raised surfaces */
  --night-hi: #141e48;
  --rule: #1e2a5a;         /* hairlines */
  --frost: #eaefff;        /* primary text */
  --frost-soft: #cdd5f5;   /* long-form text */
  --mist: #97a3ce;         /* secondary text */
  --dim: #7482b5;          /* meta text, still AA on --ink */
  --volt: #2f5bff;         /* actions, the playing track */
  --lilac: #b99ffc;        /* the icon's play triangle; progress */
  --periwinkle: #8db6fc;   /* links */
  --cyan: #03aafe;         /* the icon's light, top left */
  --violet: #4720fd;       /* the icon's light, bottom right */
  --brass: #c9963f;        /* borrowed from the import page: "renamed", "out of place" */

  /* iOS, dark appearance */
  --ios-bg: #000;
  --ios-label: #fff;
  --ios-gray: #8e8e93;
  --ios-secondary: rgba(235, 235, 245, 0.6);
  --ios-sep: rgba(84, 84, 88, 0.65);
  --ios-fill: rgba(118, 118, 128, 0.24);
  --ios-blue: #0a84ff;
  --ios-indigo: #5e5ce6;
  --ios-green: #30d158;
  --ios-red: #ff453a;
  --ios-purple: #bf5af2;

  /* The page XeoPlayer serves to a computer's browser */
  --web-ground: #171a21;
  --web-panel: #1f232c;
  --web-rule: #2e343f;
  --web-ink: #eceae4;
  --web-muted: #9aa0ab;
  --web-arrived: #79b77d;

  /* Type */
  --font: "Commissioner", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-ios: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", system-ui, "Segoe UI", Roboto, sans-serif;
  --font-ios-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --voice-display: "FLAR" 100, "VOLM" 40;
  --voice-text: "FLAR" 0, "VOLM" 0;

  --step--1: 0.875rem;
  --step-0: 1.0625rem;
  --step-1: 1.25rem;
  --step-2: 1.625rem;
  --step-3: clamp(2rem, 1.35rem + 2.2vw, 3.1rem);
  --step-4: clamp(2.6rem, 1.3rem + 4.3vw, 4.6rem);

  /* Layout */
  --wrap: 72rem;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --section: clamp(3.5rem, 7vw, 6rem);
}

/* ---- Base -------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

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

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--frost);
  font-family: var(--font);
  font-size: var(--step-0);
  font-weight: 400;
  line-height: 1.6;
  font-variation-settings: var(--voice-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img,
svg {
  display: block;
  max-width: 100%;
}

h1,
h2,
h3 {
  margin: 0;
  font-variation-settings: var(--voice-display);
  text-wrap: balance;
}

p,
ul,
ol,
figure,
dl,
dd {
  margin: 0;
}

a {
  color: var(--periwinkle);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

a:hover {
  color: var(--frost);
}

:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
  border-radius: 4px;
}

code {
  font-family: var(--font-ios-mono);
  font-size: 0.88em;
  padding: 0.1em 0.35em;
  border-radius: 5px;
  background: var(--night);
  color: var(--frost);
  overflow-wrap: anywhere;
}

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

.skip {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 10;
  padding: 0.6rem 1rem;
  border-radius: 8px;
  background: var(--frost);
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
}

.skip:focus {
  top: 1rem;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

[hidden] {
  display: none !important;
}

.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* ---- Header ------------------------------------------------------------ */

.site-header {
  padding-block: 1.25rem;
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  color: var(--frost);
  font-size: 1.1875rem;
  font-weight: 620;
  letter-spacing: -0.01em;
  font-variation-settings: var(--voice-display);
  text-decoration: none;
}

.brand img {
  width: 32px;
  height: 32px;
}

.brand--small {
  font-size: 1rem;
}

.brand--small img {
  width: 24px;
  height: 24px;
}

.brand:hover {
  color: var(--frost);
}

.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.6vw, 2.25rem);
}

.site-nav a {
  color: var(--mist);
  font-size: 0.975rem;
  text-decoration: none;
}

.site-nav a:hover,
.site-nav a[aria-current="page"] {
  color: var(--frost);
}

/* ---- Shared pieces ----------------------------------------------------- */

.section {
  padding-block: var(--section);
}

.section__title {
  font-size: var(--step-3);
  font-weight: 540;
  line-height: 1.06;
  letter-spacing: -0.022em;
}

.section__lead {
  margin-top: 1.25rem;
  max-width: 36rem;
  color: var(--mist);
  font-size: 1.125rem;
}

.section__lead code {
  white-space: nowrap;
}

.store-badge {
  display: inline-block;
  flex: none;
  border-radius: 10px;
  line-height: 0;
}

.store-badge img {
  width: auto;
  height: 52px;
}

.i {
  width: 1em;
  height: 1em;
  flex: none;
}

/* ---- Hero -------------------------------------------------------------- */

.hero {
  padding-block: clamp(2rem, 5vw, 4rem) clamp(1rem, 3vw, 2rem);
  /* the glow may spread past the screen edge, never the page */
  overflow-x: clip;
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  align-items: center;
  gap: clamp(2.5rem, 6vw, 5rem);
}

.hero h1 {
  font-size: var(--step-4);
  font-weight: 540;
  line-height: 1.02;
  letter-spacing: -0.028em;
}

.hero__lead {
  margin-top: 1.6rem;
  max-width: 33rem;
  color: var(--mist);
  font-size: 1.1875rem;
  line-height: 1.55;
}

.hero__cta {
  margin-top: 2.25rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
}

.hero__note {
  max-width: 17rem;
  color: var(--mist);
  font-size: var(--step--1);
  line-height: 1.45;
}

.hero__device {
  position: relative;
  isolation: isolate;
  justify-self: center;
  width: 100%;
  max-width: 300px;
}

/* The one light on the page: the icon's blue and violet, behind the phone. */
.hero__device::before {
  content: "";
  position: absolute;
  inset: -16% -38% -12%;
  z-index: -1;
  background:
    radial-gradient(38% 30% at 34% 28%, rgba(3, 170, 254, 0.34), transparent 72%),
    radial-gradient(46% 38% at 66% 66%, rgba(71, 32, 253, 0.42), transparent 74%),
    radial-gradient(28% 22% at 58% 44%, rgba(185, 159, 252, 0.22), transparent 70%);
  pointer-events: none;
}

/* ---- Phone ------------------------------------------------------------- */

.phone {
  width: 100%;
  padding: 3.4%;
  border-radius: 17% / 7.9%;
  background: linear-gradient(150deg, #1d2444 0%, #0a0d1c 48%, #171d3a 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.09),
    0 0 0 1px rgba(0, 0, 0, 0.7),
    0 40px 80px -32px rgba(0, 0, 0, 0.95);
}

.phone__screen {
  position: relative;
  aspect-ratio: 390 / 844;
  overflow: hidden;
  border-radius: 14.5% / 6.7%;
  background: var(--ios-bg);
  container-type: inline-size;
}

/* Dynamic Island */
.phone__screen::before {
  content: "";
  position: absolute;
  top: 1.3%;
  left: 50%;
  z-index: 2;
  width: 32%;
  height: 4.4%;
  border-radius: 999px;
  background: #000;
  transform: translateX(-50%);
}

.ios {
  --pt: calc(100cqw / 390);
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  color: var(--ios-label);
  font-family: var(--font-ios);
  font-size: calc(17 * var(--pt));
  font-variation-settings: normal;
  line-height: 1.29;
  letter-spacing: -0.02em;
}

.ios svg {
  display: block;
}

.ios-status {
  flex: none;
  height: calc(54 * var(--pt));
  padding: calc(17 * var(--pt)) calc(30 * var(--pt)) 0 calc(50 * var(--pt));
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.ios-status__icons {
  display: flex;
  align-items: center;
  gap: calc(6 * var(--pt));
  padding-top: calc(4 * var(--pt));
}

.ios-status__signal {
  width: calc(18 * var(--pt));
  height: calc(12 * var(--pt));
}

.ios-status__wifi {
  width: calc(16 * var(--pt));
  height: calc(12 * var(--pt));
}

.ios-status__battery {
  width: calc(27 * var(--pt));
  height: calc(13 * var(--pt));
}

.ios-nav {
  flex: none;
  height: calc(44 * var(--pt));
  padding: 0 calc(16 * var(--pt)) 0 calc(8 * var(--pt));
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
}

.ios-nav__back {
  display: flex;
  align-items: center;
  gap: calc(4 * var(--pt));
  min-width: 0;
  color: var(--ios-blue);
}

.ios-nav__back svg {
  flex: none;
  width: calc(12 * var(--pt));
  height: calc(21 * var(--pt));
}

.ios-nav__back span {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ios-nav__title {
  max-width: calc(172 * var(--pt));
  overflow: hidden;
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ios-nav__actions {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: calc(16 * var(--pt));
  color: var(--ios-blue);
}

.ios-nav__actions svg {
  width: calc(23 * var(--pt));
  height: calc(23 * var(--pt));
}

.ios-nav__done {
  font-weight: 600;
}

/* Library rows, as PlayListRow draws them */
.ios-list {
  flex: 1 1 auto;
  min-height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  list-style: none;
}

.ios-track {
  position: relative;
  padding: calc(11 * var(--pt)) calc(16 * var(--pt)) calc(10 * var(--pt)) calc(20 * var(--pt));
  color: var(--ios-gray);
}

.ios-track::after {
  content: "";
  position: absolute;
  left: calc(20 * var(--pt));
  right: 0;
  bottom: 0;
  height: max(1px, calc(0.5 * var(--pt)));
  background: var(--ios-sep);
}

.ios-track__head {
  display: flex;
  gap: calc(8 * var(--pt));
}

.ios-track__title {
  font-weight: 600;
}

.ios-track--playing .ios-track__title {
  color: var(--ios-indigo);
}

.ios-track__meta {
  display: flex;
  align-items: center;
  margin-top: calc(6 * var(--pt));
}

.ios-track__tags {
  flex: 1;
  min-width: 0;
  line-height: 1.25;
}

.ios-track__tags span {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ios-track__note {
  width: calc(17 * var(--pt));
  height: calc(17 * var(--pt));
  color: var(--ios-green);
}

.ios-track__info {
  display: grid;
  place-items: center;
  width: calc(45 * var(--pt));
  height: calc(45 * var(--pt));
  color: #fff;
}

.ios-track__info svg {
  width: calc(21 * var(--pt));
  height: calc(21 * var(--pt));
}

.ios-track__time {
  min-width: calc(46 * var(--pt));
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* Player controls, as PlayerControls draws them */
.ios-player {
  flex: none;
  padding: calc(14 * var(--pt)) calc(16 * var(--pt)) calc(30 * var(--pt));
  background: #000;
}

.ios-transport {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(25 * var(--pt));
}

.ios-btn {
  flex: none;
  display: grid;
  place-items: center;
  border: calc(2 * var(--pt)) solid var(--ios-gray);
  border-radius: 50%;
  color: var(--ios-gray);
}

.ios-btn svg {
  width: calc(16 * var(--pt));
  height: calc(16 * var(--pt));
}

.ios-btn--skip {
  width: calc(35 * var(--pt));
  height: calc(35 * var(--pt));
  margin-inline: calc(4.5 * var(--pt));
}

.ios-btn--track {
  width: calc(45 * var(--pt));
  height: calc(45 * var(--pt));
}

.ios-btn--main {
  width: calc(70 * var(--pt));
  height: calc(70 * var(--pt));
  color: var(--ios-red);
}

.ios-btn--main svg {
  width: calc(25 * var(--pt));
  height: calc(25 * var(--pt));
}

.ios-progress {
  display: flex;
  align-items: center;
  gap: calc(10 * var(--pt));
  margin-top: calc(10 * var(--pt));
}

.ios-time {
  font-size: calc(12 * var(--pt));
  font-variant-numeric: tabular-nums;
}

.ios-slider {
  position: relative;
  flex: 1;
  height: calc(4 * var(--pt));
  border-radius: 999px;
  background: rgba(120, 120, 128, 0.32);
}

.ios-slider::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 52%;
  border-radius: inherit;
  background: var(--ios-purple);
}

.ios-slider::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 52%;
  width: calc(22 * var(--pt));
  height: calc(22 * var(--pt));
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 calc(2 * var(--pt)) calc(6 * var(--pt)) rgba(0, 0, 0, 0.35);
  transform: translate(-50%, -50%);
}

.ios-gauge {
  flex: none;
  width: calc(40 * var(--pt));
  height: calc(40 * var(--pt));
  overflow: visible;
}

.ios-gauge__ring {
  fill: none;
  stroke: rgba(142, 142, 147, 0.5);
  stroke-width: 3.2;
  stroke-linecap: round;
}

.ios-gauge__dot {
  fill: #fff;
  stroke: #000;
  stroke-width: 1.2;
}

.ios-gauge text {
  fill: #fff;
  font-family: var(--font-ios);
  text-anchor: middle;
}

.ios-gauge__value {
  font-size: 13px;
  font-weight: 600;
}

.ios-gauge__end {
  font-size: 8px;
}

.ios-shuffle {
  display: grid;
  place-items: center;
  width: calc(32 * var(--pt));
  height: calc(32 * var(--pt));
  color: var(--ios-secondary);
}

.ios-shuffle svg {
  width: calc(19 * var(--pt));
  height: calc(19 * var(--pt));
}

.ios-home {
  position: absolute;
  bottom: calc(8 * var(--pt));
  left: 50%;
  width: calc(134 * var(--pt));
  height: calc(5 * var(--pt));
  border-radius: 999px;
  background: #fff;
  transform: translateX(-50%);
}

/* The Import screen, as ImportView draws it */
.ios-import {
  flex: 1 1 auto;
  min-height: 0;
  padding: calc(8 * var(--pt)) calc(16 * var(--pt)) 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(24 * var(--pt));
  text-align: center;
}

.ios-import__group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(12 * var(--pt));
  width: 100%;
}

.ios-import__group--wifi {
  gap: calc(16 * var(--pt));
}

.ios-callout {
  color: var(--ios-secondary);
  font-size: calc(16 * var(--pt));
}

.ios-footnote {
  color: var(--ios-secondary);
  font-size: calc(13 * var(--pt));
  line-height: 1.35;
}

.ios-prominent {
  display: inline-flex;
  align-items: center;
  gap: calc(7 * var(--pt));
  padding: calc(9 * var(--pt)) calc(16 * var(--pt));
  border-radius: 999px;
  background: var(--ios-blue);
  color: #fff;
}

.ios-prominent svg,
.ios-bordered svg {
  width: calc(18 * var(--pt));
  height: calc(18 * var(--pt));
}

.ios-or {
  display: flex;
  align-items: center;
  gap: calc(12 * var(--pt));
  width: 100%;
  color: var(--ios-secondary);
  font-size: calc(13 * var(--pt));
}

.ios-or::before,
.ios-or::after {
  content: "";
  flex: 1;
  height: max(1px, calc(0.5 * var(--pt)));
  background: var(--ios-sep);
}

.ios-url {
  font-family: var(--font-ios-mono);
  font-size: calc(21 * var(--pt));
  letter-spacing: 0;
}

.ios-pair {
  display: flex;
  gap: calc(12 * var(--pt));
}

.ios-bordered {
  display: inline-flex;
  align-items: center;
  gap: calc(6 * var(--pt));
  padding: calc(7 * var(--pt)) calc(14 * var(--pt));
  border-radius: 999px;
  background: rgba(10, 132, 255, 0.18);
  color: var(--ios-blue);
  font-size: calc(15 * var(--pt));
}

.ios-qr {
  padding: calc(12 * var(--pt));
  border-radius: calc(12 * var(--pt));
  background: #fff;
}

.ios-qr img {
  width: calc(150 * var(--pt));
  height: calc(150 * var(--pt));
  image-rendering: pixelated;
}

.ios-import__notes {
  align-self: stretch;
  display: grid;
  gap: calc(8 * var(--pt));
  padding-top: calc(14 * var(--pt));
  border-top: max(1px, calc(0.5 * var(--pt))) solid var(--ios-sep);
  color: var(--ios-secondary);
  font-size: calc(16 * var(--pt));
  text-align: left;
}

.ios-import__state {
  align-self: stretch;
  display: flex;
  align-items: center;
  gap: calc(6 * var(--pt));
  color: var(--ios-secondary);
  font-size: calc(16 * var(--pt));
}

.ios-import__state svg {
  width: calc(18 * var(--pt));
  height: calc(18 * var(--pt));
}

/* ---- Order: Chapter 2 before Chapter 10 -------------------------------- */

.order__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 27rem);
  align-items: center;
  gap: clamp(2.5rem, 7vw, 6rem);
}

.order__text p {
  max-width: 34rem;
  margin-top: 1.25rem;
  color: var(--mist);
  font-size: 1.125rem;
}

.order__text p:first-of-type {
  margin-top: 1.75rem;
}

.folder {
  padding: 1.25rem 1.25rem 1rem;
  border-radius: 20px;
  background: var(--night);
  box-shadow: inset 0 0 0 1px var(--rule);
}

.folder__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  padding: 0 0.25rem 0.9rem;
}

.folder__name {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  font-size: 1rem;
}

.folder__name svg {
  width: 1.15rem;
  height: 1.15rem;
  color: var(--mist);
}

.seg {
  display: inline-flex;
  padding: 3px;
  border-radius: 10px;
  background: var(--ink);
  box-shadow: inset 0 0 0 1px var(--rule);
}

.seg__btn {
  appearance: none;
  border: 0;
  margin: 0;
  padding: 0.4rem 0.8rem;
  border-radius: 7px;
  background: transparent;
  color: var(--mist);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 560;
  cursor: pointer;
}

.seg__btn:hover {
  color: var(--frost);
}

.seg__btn[aria-pressed="true"] {
  background: var(--volt);
  color: #fff;
}

.folder__list {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: position;
}

.folder__row {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.5rem 0.25rem;
  border-top: 1px solid var(--rule);
  font-variant-numeric: tabular-nums;
  counter-increment: position;
}

.folder__row::before {
  content: counter(position) ".";
  color: var(--dim);
  font-size: 0.875rem;
}

.folder__file {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.folder__time {
  color: var(--dim);
  font-size: 0.875rem;
}

.folder__row--jumped .folder__file {
  color: var(--brass);
}

.folder__caption {
  min-height: 3em;
  padding: 0.75rem 0.25rem 0;
  border-top: 1px solid var(--rule);
  color: var(--mist);
  font-size: var(--step--1);
  line-height: 1.5;
}

/* ---- Import ------------------------------------------------------------ */

.import__head {
  max-width: 44rem;
}

.import__stage {
  position: relative;
  margin-top: clamp(2.5rem, 6vw, 4rem);
  padding-right: clamp(0px, 22vw, 16rem);
}

.browser {
  overflow: hidden;
  border-radius: 12px;
  background: var(--web-ground);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.07),
    0 30px 70px -30px rgba(0, 0, 0, 0.95);
  container-type: inline-size;
}

.browser__bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: #20242d;
  border-bottom: 1px solid var(--web-rule);
}

.browser__dots {
  display: flex;
  gap: 7px;
}

.browser__dots i {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #3a404c;
}

.browser__url {
  flex: 0 1 22rem;
  margin-inline: auto;
  padding: 4px 12px;
  border-radius: 7px;
  background: var(--web-ground);
  color: var(--web-muted);
  font-family: var(--font-ios);
  font-size: 12.5px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* The import page itself, scaled from a 760px-wide window */
.webpage {
  --px: calc(100cqw / 980);
  padding: calc(46 * var(--px)) calc(64 * var(--px)) calc(40 * var(--px));
  color: var(--web-ink);
  font-family: var(--font-ios);
  font-size: calc(16 * var(--px));
  font-variation-settings: normal;
  line-height: 1.55;
}

.webpage__h1 {
  margin: 0;
  font-size: calc(40 * var(--px));
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.webpage__lead {
  margin: calc(10 * var(--px)) 0 calc(30 * var(--px));
  color: var(--web-muted);
}

.webpage__zone {
  position: relative;
  padding: calc(34 * var(--px)) calc(24 * var(--px));
  border: 1px solid var(--web-rule);
  background: var(--web-panel);
  text-align: center;
}

.webpage__zone::after {
  content: "";
  position: absolute;
  inset: calc(6 * var(--px));
  border: 1px solid var(--web-rule);
  pointer-events: none;
}

.webpage__zone-title {
  margin: 0 0 calc(18 * var(--px));
  font-size: calc(18 * var(--px));
  font-weight: 600;
}

.webpage__pick {
  display: inline-block;
  margin: 0 calc(5 * var(--px));
  padding: calc(9 * var(--px)) calc(17 * var(--px));
  border: 1px solid var(--web-rule);
  border-radius: 3px;
  background: var(--web-ground);
  font-size: calc(15 * var(--px));
}

.webpage__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(16 * var(--px));
  margin-top: calc(30 * var(--px));
  padding: calc(12 * var(--px)) 0;
  border-block: 1px solid var(--web-rule);
  font-size: calc(15 * var(--px));
  font-variant-numeric: tabular-nums;
}

.webpage__track {
  flex: 0 0 calc(144 * var(--px));
  height: 2px;
  background: var(--web-rule);
}

.webpage__track i {
  display: block;
  width: 39%;
  height: 100%;
  background: var(--brass);
}

.webpage__rows {
  margin: 0;
  padding: 0;
  list-style: none;
}

.webpage__row {
  display: grid;
  grid-template-columns: calc(30 * var(--px)) minmax(0, 1fr) auto;
  gap: calc(14 * var(--px));
  align-items: baseline;
  padding: calc(8 * var(--px)) 0;
  border-bottom: 1px solid var(--web-rule);
}

.webpage__num {
  color: var(--web-muted);
  font-size: calc(13 * var(--px));
  font-variant-numeric: tabular-nums;
}

.webpage__name {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.webpage__state {
  color: var(--web-muted);
  font-size: calc(14 * var(--px));
  font-variant-numeric: tabular-nums;
}

.webpage__state--arrived {
  color: var(--web-arrived);
}

.import__phone {
  position: absolute;
  right: 0;
  bottom: -2.5rem;
  width: clamp(190px, 24vw, 272px);
}

.import__ways {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2.5rem clamp(2rem, 6vw, 5rem);
  margin-top: clamp(4.5rem, 9vw, 6.5rem);
}

.way h3 {
  font-size: var(--step-1);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.way p,
.way ol {
  margin-top: 0.9rem;
  max-width: 32rem;
  color: var(--mist);
}

.way ol {
  padding-left: 1.3rem;
}

.way li + li {
  margin-top: 0.35rem;
}

.way li::marker {
  color: var(--frost);
  font-weight: 600;
}

.way code {
  font-size: 0.85em;
}

/* ---- Details ----------------------------------------------------------- */

.details__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(2rem, 6vw, 5rem);
  margin-top: clamp(2.5rem, 6vw, 4rem);
}

.detail {
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  padding-bottom: clamp(2.75rem, 5vw, 4rem);
}

.detail__spec {
  display: flex;
  align-items: center;
  min-height: 7rem;
  margin-bottom: 1.25rem;
}

.detail h3 {
  font-size: var(--step-1);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.detail p {
  margin-top: 0.6rem;
  max-width: 30rem;
  color: var(--mist);
}

/* Specimen: resume */
.spec-resume {
  width: min(100%, 22rem);
  font-family: var(--font-ios);
}

.spec-resume__title {
  color: var(--frost);
  font-weight: 600;
}

.spec-resume__title span {
  margin-right: 0.35rem;
  color: var(--ios-gray);
  font-weight: 400;
}

.spec-resume__bar {
  position: relative;
  height: 4px;
  margin: 1.35rem 0 0.55rem;
  border-radius: 999px;
  background: rgba(120, 120, 128, 0.32);
}

.spec-resume__bar::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 52%;
  border-radius: inherit;
  background: var(--ios-purple);
}

.spec-resume__bar::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 52%;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  transform: translate(-50%, -50%);
}

.spec-resume__times {
  display: flex;
  justify-content: space-between;
  color: var(--mist);
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
}

.spec-resume__times b {
  color: var(--frost);
  font-weight: 600;
}

/* Specimen: search */
.spec-search {
  width: min(100%, 22rem);
  font-family: var(--font-ios);
}

.spec-search__field {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-radius: 10px;
  background: var(--ios-fill);
  color: var(--frost);
}

.spec-search__field svg {
  width: 1.05rem;
  height: 1.05rem;
  color: var(--ios-gray);
}

.spec-search__caret {
  width: 2px;
  height: 1.2em;
  margin-left: -0.35rem;
  background: var(--ios-blue);
}

.spec-search__hit {
  margin-top: 0.85rem;
  padding: 0 0.75rem;
  color: var(--ios-gray);
  line-height: 1.35;
}

.spec-search__hit strong {
  color: var(--frost);
  font-weight: 600;
}

.spec-search__hit small {
  display: block;
  font-size: 0.875rem;
}

/* Specimen: repaired names */
.spec-repair {
  display: grid;
  grid-template-columns: auto auto auto;
  align-items: center;
  gap: 0.7rem 1rem;
  font-size: 1.125rem;
}

.spec-repair__from {
  color: var(--dim);
  font-family: var(--font-ios);
}

.spec-repair__to {
  color: var(--frost);
  font-weight: 560;
}

.spec-repair svg {
  width: 1.1rem;
  height: 1.1rem;
  color: var(--lilac);
}

/* Specimen: shuffle gauges */
.spec-shuffle {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.spec-shuffle .ios-gauge {
  width: 3.4rem;
  height: 3.4rem;
}

.spec-shuffle__sep {
  width: 1.1rem;
  height: 1.1rem;
  color: var(--dim);
}

/* Specimen: Dynamic Island while audio plays in the background */
.spec-island {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 15.5rem;
  height: 3.1rem;
  padding: 0 1rem 0 0.55rem;
  border-radius: 999px;
  background: #000;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.spec-island__art {
  width: 2rem;
  height: 2rem;
  border-radius: 7px;
  background: url("../img/icon-96.png") center / cover;
}

.spec-island__bars {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 1.2rem;
}

.spec-island__bars i {
  width: 3px;
  border-radius: 2px;
  background: var(--lilac);
}

.spec-island__bars i:nth-child(1) { height: 45%; }
.spec-island__bars i:nth-child(2) { height: 100%; }
.spec-island__bars i:nth-child(3) { height: 65%; }
.spec-island__bars i:nth-child(4) { height: 85%; }
.spec-island__bars i:nth-child(5) { height: 35%; }

/* Specimen: swipe to delete */
.spec-swipe {
  display: flex;
  width: min(100%, 22rem);
  overflow: hidden;
  border-radius: 12px;
  font-family: var(--font-ios);
}

.spec-swipe__row {
  flex: 1;
  min-width: 0;
  padding: 0.85rem 1rem;
  background: #000;
  color: var(--ios-gray);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.spec-swipe__row span {
  margin-right: 0.4rem;
  font-weight: 400;
}

.spec-swipe__row b {
  font-weight: 600;
}

.spec-swipe__action {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  width: 5.25rem;
  background: var(--ios-red);
  color: #fff;
  font-size: 0.8125rem;
}

.spec-swipe__action svg {
  width: 1.2rem;
  height: 1.2rem;
}

/* Specimen: languages */
.spec-langs {
  max-width: 28rem;
  color: var(--mist);
  font-size: 0.9375rem;
  line-height: 1.65;
}

.spec-langs span {
  color: var(--frost);
}

/* Specimen: formats, spaced the way the import page prints them */
.spec-formats {
  max-width: 24rem;
  color: var(--frost);
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.7;
  word-spacing: 0.55em;
}

/* ---- Pricing ----------------------------------------------------------- */

.pricing__timeline {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: 0 clamp(1rem, 3vw, 2rem);
  margin-top: clamp(3rem, 7vw, 4.5rem);
}

.phase__bar {
  position: relative;
  height: 10px;
  border-radius: 999px;
}

.phase--trial .phase__bar {
  background: var(--volt);
}

.phase--after .phase__bar {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--lilac);
}

.phase__when {
  margin-top: 1.1rem;
  color: var(--frost);
  font-size: var(--step-1);
  font-weight: 600;
  font-variation-settings: var(--voice-display);
}

.phase__text {
  margin-top: 0.6rem;
  max-width: 26rem;
  color: var(--mist);
}

.phase__split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem clamp(1.5rem, 4vw, 3rem);
  margin-top: 0.6rem;
}

.phase__split h3 {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0;
}

.phase__split p {
  margin-top: 0.35rem;
  color: var(--mist);
}

.pricing__foot {
  max-width: 44rem;
  margin-top: clamp(2.5rem, 6vw, 3.5rem);
  color: var(--mist);
  font-size: var(--step--1);
}

/* ---- Privacy ----------------------------------------------------------- */

.privacy-note {
  padding: clamp(2rem, 6vw, 4rem);
  border-radius: 28px;
  background: var(--night);
  box-shadow: inset 0 0 0 1px var(--rule);
}

.privacy-note p {
  max-width: 40rem;
  margin-top: 1.25rem;
  color: var(--frost-soft);
  font-size: 1.125rem;
}

.privacy-note a {
  display: inline-block;
  margin-top: 1.5rem;
}

/* ---- Closing call to action -------------------------------------------- */

.closing {
  padding-block: var(--section);
  text-align: center;
}

.closing__icon {
  width: 104px;
  height: 104px;
  margin: 0 auto 2rem;
}

.closing h2 {
  max-width: 20ch;
  margin-inline: auto;
}

.closing__cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  margin-top: 2.25rem;
}

.closing__note {
  color: var(--mist);
  font-size: var(--step--1);
}

/* ---- Footer ------------------------------------------------------------ */

.site-footer {
  padding-block: 2.5rem 3rem;
  border-top: 1px solid var(--rule);
  color: var(--dim);
  font-size: var(--step--1);
}

.site-footer__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem 2rem;
}

.site-footer__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.75rem;
}

.site-footer__nav a {
  color: var(--mist);
  text-decoration: none;
}

.site-footer__nav a:hover,
.site-footer__nav a[aria-current="page"] {
  color: var(--frost);
}

.site-footer__legal {
  max-width: 62ch;
  margin-top: 1.5rem;
  font-size: 0.8125rem;
  line-height: 1.55;
}

/* ---- Document pages: Terms, Privacy, Support, 404 ---------------------- */

.doc {
  padding-block: clamp(2rem, 6vw, 4.5rem) clamp(4rem, 9vw, 7rem);
}

.doc__body {
  max-width: 44rem;
}

.doc__head h1 {
  font-size: var(--step-3);
  font-weight: 540;
  line-height: 1.06;
  letter-spacing: -0.022em;
}

.doc__meta {
  margin-top: 0.9rem;
  color: var(--dim);
  font-size: var(--step--1);
}

.doc__lead {
  margin-top: 1.1rem;
  color: var(--mist);
  font-size: 1.125rem;
}

.doc__summary,
.doc__contact {
  margin-top: 2.25rem;
  padding: 1.35rem 1.6rem 1.5rem;
  border-radius: 18px;
  background: var(--night);
  box-shadow: inset 0 0 0 1px var(--rule);
}

.doc__summary h2 {
  font-size: var(--step-1);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.doc__summary ul {
  margin-top: 0.75rem;
  padding-left: 1.15rem;
  color: var(--frost-soft);
}

.doc__summary li + li {
  margin-top: 0.4rem;
}

.doc__contact p {
  color: var(--frost-soft);
}

.prose {
  margin-top: 1rem;
  color: var(--frost-soft);
}

.prose h2 {
  margin-top: 2.9rem;
  color: var(--frost);
  font-size: var(--step-2);
  font-weight: 560;
  line-height: 1.2;
  letter-spacing: -0.015em;
  scroll-margin-top: 1.5rem;
}

.prose h3 {
  margin-top: 1.9rem;
  color: var(--frost);
  font-size: var(--step-1);
  font-weight: 600;
  line-height: 1.3;
}

.prose p,
.prose ul,
.prose ol {
  margin-top: 1rem;
}

.prose ul,
.prose ol {
  padding-left: 1.3rem;
}

.prose li + li {
  margin-top: 0.45rem;
}

.prose strong {
  color: var(--frost);
  font-weight: 620;
}

.faq {
  margin-top: 3.25rem;
}

.faq h2 {
  margin-bottom: 0.75rem;
  font-size: var(--step-2);
  font-weight: 560;
  line-height: 1.2;
  letter-spacing: -0.015em;
  scroll-margin-top: 1.5rem;
}

.qa {
  border-top: 1px solid var(--rule);
}

.qa:last-child {
  border-bottom: 1px solid var(--rule);
}

.qa summary {
  position: relative;
  padding: 1.05rem 2.5rem 1.05rem 0;
  list-style: none;
  color: var(--frost);
  font-size: 1.0625rem;
  font-weight: 600;
  cursor: pointer;
}

.qa summary::-webkit-details-marker {
  display: none;
}

.qa summary::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0.35rem;
  width: 0.6rem;
  height: 0.6rem;
  border-right: 2px solid var(--mist);
  border-bottom: 2px solid var(--mist);
  transform: translateY(-70%) rotate(45deg);
}

.qa[open] summary::after {
  transform: translateY(-25%) rotate(-135deg);
}

.qa summary:hover::after {
  border-color: var(--frost);
}

.qa__body {
  padding: 0 0 1.35rem;
  color: var(--frost-soft);
}

.qa__body > * + * {
  margin-top: 0.8rem;
}

.qa__body ul,
.qa__body ol {
  padding-left: 1.3rem;
}

.qa__body li + li {
  margin-top: 0.35rem;
}

.lost {
  padding-block: clamp(4rem, 12vw, 9rem);
}

.lost p {
  max-width: 34rem;
  margin-top: 1.25rem;
  color: var(--mist);
  font-size: 1.125rem;
}

.lost__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.75rem;
  margin-top: 2rem;
}

/* ---- Narrower screens -------------------------------------------------- */

@media (max-width: 56rem) {
  .hero__grid,
  .order__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero__device {
    max-width: 272px;
  }

  .order__grid .folder {
    max-width: 30rem;
  }

  .import__stage {
    padding-right: 0;
    padding-bottom: 0;
  }

  .import__phone {
    position: relative;
    right: auto;
    bottom: auto;
    width: min(62%, 248px);
    margin: -5rem 1rem 0 auto;
  }

  .import__ways {
    margin-top: 3.5rem;
  }
}

@media (max-width: 44rem) {
  .site-nav__opt {
    display: none;
  }

  .import__ways,
  .details__list,
  .phase__split {
    grid-template-columns: minmax(0, 1fr);
  }

  .pricing__timeline {
    grid-template-columns: minmax(0, 1fr);
    gap: 2.5rem;
  }

  .detail__spec {
    min-height: 5rem;
  }
}

@media (max-width: 26rem) {
  .hero__cta {
    flex-direction: column;
    align-items: flex-start;
  }

  .spec-repair {
    font-size: 1rem;
    gap: 0.6rem 0.75rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}