/* Thumb – site
   Same look as the iPhone app: near-black with slow contour lines, frosted glass cards, mint accent,
   bold titles and small monospaced labels. The page follows the app's default dark theme.

   1. Tokens          5. Hero and switcher       9. Drawn iPhone screens
   2. Base            6. Sections               10. Small screens, reduced motion
   3. Header          7. Scenes: PC + iPhone
   4. Buttons         8. Drawn PC desktop                                                     */


/* ===== 1. Tokens ===== */

:root {
  --bg: #090D11;
  --glass: rgba(110, 120, 128, 0.14);
  --glass-2: rgba(255, 255, 255, 0.07);
  --stroke: rgba(255, 255, 255, 0.1);
  --line: rgba(255, 255, 255, 0.09);
  --ink: #F2F5F3;
  --muted: #A3ACB0;
  --dim: #737D82;
  --accent: #BEECD0;
  --accent-ink: #0E1419;

  /* Device screens */
  --dev: #000000;
  --scr: #10181E;
  --scr-ink: #E8F2EC;
  --scr-dim: #93A49C;
  --mint: #BEECD0;

  --font-display: -apple-system, "SF Pro Display", "Inter", "Segoe UI", system-ui, sans-serif;
  --font-body: -apple-system, "SF Pro Text", "Inter", "Segoe UI", system-ui, sans-serif;
  --font-mono: "SF Mono", "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  --step--1: 0.875rem;
  --step-0: 1.0625rem;
  --step-1: 1.25rem;
  --step-2: clamp(1.9rem, 1.3rem + 2vw, 2.9rem);
  --step-3: clamp(2.6rem, 1.5rem + 4.4vw, 5rem);

  color-scheme: dark;
}


/* ===== 2. Base ===== */

* { box-sizing: border-box; }

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

body {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* The app's background (AppBackground.swift): grey at the top left, the accent at the top right, purple at the bottom
   left, blue at the bottom right (radius: 85 % of the width, capped on a wide screen), and a light grain. */
:root {
  --grain: url("data:image/png;base64,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");
}
#halo { position: fixed; inset: 0; z-index: -1; pointer-events: none;
  --r: min(85vw, 760px);
  background: var(--grain),
    radial-gradient(circle var(--r) at 0 0, rgb(61, 61, 64), transparent),
    radial-gradient(circle var(--r) at 100% 100%, rgba(41, 61, 94, 0.75), transparent),
    radial-gradient(circle var(--r) at 0 100%, rgba(173, 54, 105, 0.55), transparent),
    radial-gradient(circle var(--r) at 100% 0, rgba(44, 138, 91, 0.55), transparent); }

.sprite { position: absolute; }

a { color: inherit; }
p { margin: 0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 10px; }

h1, h2, h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

kbd, code {
  font-family: var(--font-mono);
  font-size: 0.8em;
  padding: 0.14em 0.5em;
  border-radius: 7px;
  border: 1px solid var(--stroke);
  background: var(--glass-2);
  white-space: nowrap;
}

.wrap {
  max-width: 1160px;
  margin-inline: auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}

/* The app's small labels: monospaced, uppercase, widely tracked, with the "connected" dot */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font: 600 0.72rem var(--font-mono);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
}
.eyebrow::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent);
}

/* The grab handle on top of the app's panels */
.grabber::before {
  content: "";
  position: absolute;
  top: 12px;
  left: 50%;
  translate: -50% 0;
  width: 40px;
  height: 4px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.25);
}


/* ===== 3. Header: a floating glass bar, like the app's dock ===== */

/* The bar floats over the page; the strip above and around it fades the content scrolling under it, so the
   glass never lies on another glass card (two translucent layers make both unreadable). */
header.top { position: sticky; top: 0; z-index: 20; padding-top: 12px; padding-bottom: 14px; margin-bottom: -14px; }
header.top::before {
  content: "";
  position: absolute;
  inset: 0 0 -10px;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(180deg, var(--bg) 0%, rgba(9, 13, 17, 0.88) 55%, rgba(9, 13, 17, 0));
  opacity: 0;
  transition: opacity 0.25s ease;
}
/* Only once the page has scrolled: at the top, the hero's glow shows through. */
header.top.scrolled::before { opacity: 1; }

.top .bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 7px 7px 7px 12px;
  border-radius: 999px;
  background: rgba(30, 35, 40, 0.82);
  border: 1px solid var(--stroke);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(22px) saturate(1.4);
  -webkit-backdrop-filter: blur(22px) saturate(1.4);
}

.brand { display: flex; align-items: center; min-height: 44px; gap: 10px; text-decoration: none; font-weight: 700; font-size: 1.05rem; letter-spacing: -0.01em; }
.brand svg { width: 30px; height: 30px; border-radius: 9px; }

.top nav { margin-left: auto; display: flex; align-items: center; gap: 2px; }
.top nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 13px; border-radius: 999px; text-decoration: none; color: var(--muted); font-size: var(--step--1); font-weight: 500; }

.lang { display: inline-flex; gap: 2px; padding: 3px; margin-left: 6px; border-radius: 999px; border: 1px solid var(--stroke); background: rgba(255, 255, 255, 0.04); }
.lang button { min-width: 44px; min-height: 38px; padding: 6px 11px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font: 600 0.74rem var(--font-mono); letter-spacing: 0.12em; cursor: pointer; }
/* 38 px drawn, 44 px to tap: the extra 3 px above and below reach over the pill's edge. */
.lang button { position: relative; }
.lang button::after { content: ""; position: absolute; inset: -3px 0; }
.lang button[aria-pressed="true"] { background: rgba(255, 255, 255, 0.14); color: var(--ink); }


/* ===== 4. Buttons: the app's pills ===== */

.ctas { display: flex; flex-wrap: wrap; gap: 10px; }
/* Unsigned installer: how to get past SmartScreen. Shown once the Windows download starts. */
.dl-hint { flex-basis: 100%; max-width: 46ch; margin-top: 12px; font-size: 0.9rem; line-height: 1.5; color: var(--muted); }
.dl-hint b, .smartscreen b { color: var(--ink); font-weight: 600; }
.steps p.smartscreen { font-size: 0.9rem; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 58px;
  padding: 9px 26px 9px 20px;
  border-radius: 999px;
  text-decoration: none;
  transition: transform 0.3s cubic-bezier(0.2, 0.9, 0.3, 1), box-shadow 0.2s ease, background 0.2s ease;
}
/* Pressed: at once, and back with a little spring when released. */
.btn:active { transform: scale(0.96); transition-duration: 0.08s; }
.btn svg { flex: none; width: 22px; height: 22px; }
.btn .two { display: grid; line-height: 1.15; }
.btn .two small { font-size: 0.72rem; opacity: 0.7; }
.btn .two strong { font-size: 1rem; font-weight: 700; }
.btn[aria-disabled="true"] { opacity: 0.55; pointer-events: none; }
.btn[hidden], .dl-ms[hidden], .smartscreen[hidden] { display: none !important; }
/* Microsoft's Store badge, as they make it: only its height is set, to line up with the other buttons. */
.dl-ms { display: inline-flex; align-items: center; }
.dl-ms img { display: block; height: 58px; width: auto; }
ms-store-badge::part(img) { max-height: 58px; }

.btn-win { background: var(--accent); color: var(--accent-ink); }

.btn-store { background: var(--glass-2); color: var(--ink); border: 1px solid var(--stroke); }

/* Android: announced, not out yet */
.btn-soon { background: transparent; color: var(--muted); border: 1px dashed rgba(255, 255, 255, 0.22); cursor: default; }
.btn-soon[aria-disabled="true"] { opacity: 1; }


/* ===== 5. Hero and switcher ===== */

.hero { padding-block: clamp(36px, 6vw, 80px) clamp(48px, 7vw, 96px); }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.hero h1 { margin-top: 20px; font-size: var(--step-3); }
.hero h1 em { font-style: normal; color: var(--accent); }
.hero .lede { max-width: 36ch; margin-top: 24px; font-size: var(--step-1); line-height: 1.45; color: var(--muted); }
.hero .ctas { margin-top: 32px; }

.meta-line { margin-top: 18px; font: 600 0.7rem/1.6 var(--font-mono); letter-spacing: 0.2em; text-transform: uppercase; color: var(--dim); text-wrap: balance; }

.hero-stage { display: grid; justify-items: center; gap: 22px; width: 100%; min-width: 0; }

/* Picks the screen shown in the hero; looks like the app's dock. Always one line: scrolls if too narrow. */
.switcher {
  display: flex;
  gap: 3px;
  max-width: 100%;
  padding: 4px;
  border-radius: 999px;
  overflow-x: auto;
  scrollbar-width: none;
  background: rgba(110, 120, 128, 0.2);
  border: 1px solid var(--stroke);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.switcher::-webkit-scrollbar { display: none; }

.switcher button {
  position: relative;
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  padding: 9px 13px;
  border: 0;
  border-radius: 999px;
  overflow: hidden;
  background: transparent;
  color: var(--muted);
  font: 500 var(--step--1) var(--font-body);
  white-space: nowrap;
  cursor: pointer;
}
.switcher button svg { width: 15px; height: 15px; }
.switcher button[aria-pressed="true"] { color: var(--ink); background: rgba(255, 255, 255, 0.12); }

/* Progress until the next screen (its length is set by script when a video plays) */
.switcher .bar {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 3px;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
  opacity: 0.8;
  transform: scaleX(0);
  transform-origin: left;
}
.switcher button[aria-pressed="true"].auto .bar { animation: fill 4.2s linear forwards; }
@keyframes fill { to { transform: scaleX(1); } }


/* ===== 6. Sections ===== */

section { padding-block: clamp(44px, 6vw, 84px); }
section.overview-section { padding-block: clamp(40px, 6vw, 72px); }

.head { display: grid; gap: 16px; max-width: 46rem; margin-bottom: clamp(32px, 4vw, 52px); }
.head h2 { font-size: var(--step-2); }
.head p:not(.eyebrow) { color: var(--muted); font-size: 1.05rem; }
.overview-section .head { margin-bottom: 28px; }

/* Overview: laid out like the app's home tiles */
.overview { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
/* 11 tiles: the last one takes two places, so every row ends flush (4 + 4 + 3, 3 × 3 + 2, 2 × 5 + 1) */
.overview a:last-child { grid-column: span 2; }
.overview a {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 150px;
  padding: 16px;
  border-radius: 24px;
  text-decoration: none;
  background: rgba(110, 120, 128, 0.16);
  border: 1px solid var(--stroke);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: transform 0.3s cubic-bezier(0.2, 0.9, 0.3, 1), background 0.2s ease;
}
.overview a:active { transform: scale(0.96); transition-duration: 0.08s; }
.overview a::after { content: "→"; position: absolute; right: 18px; top: 16px; font-size: 1rem; line-height: 1; color: var(--dim); transition: transform 0.2s cubic-bezier(0.2, 0.9, 0.3, 1), color 0.2s ease; }
.overview svg { width: 40px; height: 40px; margin-bottom: auto; padding: 10px; border-radius: 12px; color: var(--accent); background: rgba(255, 255, 255, 0.07); border: 1px solid var(--stroke); }
.overview b { margin-top: 18px; font-weight: 800; font-size: 1.05rem; letter-spacing: -0.02em; }
.overview span { min-height: 2.8em; font-size: 0.84rem; line-height: 1.4; color: var(--muted); }   /* two lines kept: titles line up */

/* Feature: the demo on top, large, on a frosted panel like the app's sheets; the text below it,
   the title on the left and the explanation on the right. */
.feature .wrap { display: grid; gap: clamp(28px, 4vw, 48px); }
.feature .text { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 18px clamp(32px, 6vw, 88px); align-items: start; min-width: 0; }
.feature .lead { display: grid; gap: 16px; align-content: start; }
.feature .body { display: grid; gap: 18px; align-content: start; min-width: 0; }
.feature h2 { font-size: var(--step-2); }
.feature .body > p { max-width: 60ch; color: var(--muted); font-size: 1.05rem; }

.feature .visual {
  position: relative;
  display: flex;
  justify-content: center;
  min-width: 0;
  padding: clamp(26px, 4vw, 64px) clamp(16px, 4vw, 64px) clamp(16px, 3.4vw, 52px);
  border-radius: 44px;
  background: linear-gradient(180deg, rgba(110, 120, 128, 0.2), rgba(110, 120, 128, 0.08));
  border: 1px solid var(--stroke);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
/* The demo fills the panel, up to 960 px wide. Wider than the hero's: the PC gets the room, the iPhone
   stands in front of it at the bottom left. --phone is the iPhone's width as a share of the scene. */
.feature .scene { --phone: 0.25; max-width: 960px; aspect-ratio: 16 / 9.6; }
.feature .scene .monitor { width: 80%; }
.feature .scene.land { --phone: 0.5; aspect-ratio: 16 / 9.4; }
.feature .scene.land .monitor { width: 84%; }

.points { display: grid; gap: 8px; margin: 4px 0 0; padding: 0; list-style: none; }
.points li { position: relative; padding: 12px 16px 12px 40px; border-radius: 18px; background: var(--glass); border: 1px solid var(--stroke); font-size: 0.97rem; }
.points li::before { content: ""; position: absolute; left: 17px; top: 1.15em; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); }

.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.chips span {
  padding: 8px 13px;
  border-radius: 99px;
  font: 600 0.68rem var(--font-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  background: rgba(190, 236, 208, 0.1);
  border: 1px solid rgba(190, 236, 208, 0.22);
}

/* Widgets, Siri…: numbered cards */
.more { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; counter-reset: m; }
.more div { counter-increment: m; display: grid; gap: 10px; align-content: start; min-width: 0; padding: 22px; border-radius: 26px; background: var(--glass); border: 1px solid var(--stroke); }
.more div::before { content: "0" counter(m); font: 600 0.7rem var(--font-mono); letter-spacing: 0.24em; color: var(--accent); }
.more h3 { font-weight: 700; font-size: var(--step-1); letter-spacing: -0.02em; }
.more p { color: var(--muted); font-size: 0.97rem; }

/* The Thumb window on Windows */
.winshot { padding: 8px; border-radius: 22px; overflow: hidden; background: var(--glass); border: 1px solid var(--stroke); box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.9); }
.winshot img { display: block; width: 100%; height: auto; border-radius: 15px; }

/* Setup */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; counter-reset: s; }
.steps li { counter-increment: s; display: grid; gap: 12px; align-content: start; min-width: 0; padding: 24px; border-radius: 28px; background: var(--glass); border: 1px solid var(--stroke); }
.steps li::before { content: "0" counter(s); display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; font: 700 0.85rem var(--font-mono); color: var(--accent-ink); background: var(--accent); }
.steps h3 { font-weight: 700; font-size: var(--step-1); letter-spacing: -0.02em; }
.steps p { color: var(--muted); }

.code { display: inline-flex; gap: 6px; font: 700 1.35rem var(--font-mono); }
.code b { display: grid; place-items: center; width: 1.65em; height: 2.1em; border-radius: 12px; background: var(--glass-2); border: 1px solid var(--stroke); }

/* Downloads, in a big panel */
.final .sheet {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 32px;
  align-items: end;
  padding: clamp(36px, 5vw, 64px) clamp(22px, 5vw, 64px) clamp(28px, 4vw, 52px);
  border-radius: 44px;
  background: linear-gradient(180deg, rgba(110, 120, 128, 0.24), rgba(110, 120, 128, 0.1));
  border: 1px solid var(--stroke);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.final h2 { max-width: 18ch; font-size: var(--step-2); }
.final p { max-width: 44ch; margin-top: 14px; color: var(--muted); }
.reqs { display: grid; gap: 8px; margin-top: 22px; font: 600 0.66rem var(--font-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--dim); }

footer { padding-block: 28px 44px; color: var(--dim); font-size: var(--step--1); }
footer .wrap { display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: center; padding-top: 24px; border-top: 1px solid var(--line); }
footer .wrap span:first-child { margin-right: auto; font-weight: 700; color: var(--muted); }
/* Small text, a full-size target: the padding grows the tappable area, the negative margin keeps the layout. */
footer a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; margin: 0 -6px; text-decoration: none; }


/* ===== 7. Scenes: the PC's screen with the iPhone in front of it =====
   Both are drawn at a fixed size (PC 640×360, iPhone 300 or 560 wide) and scaled to fit by js/main.js. */

.scene { position: relative; width: 100%; max-width: 640px; aspect-ratio: 640 / 530; overflow: clip; overflow-clip-margin: 16px; }
.scene.land { aspect-ratio: 640 / 480; }

.scene .monitor { position: absolute; right: 0; top: 0; width: 84%; }
.scene.land .monitor { width: 92%; }

.bezel { padding: 2.2%; border-radius: 14px; background: var(--dev); box-shadow: 0 18px 30px -22px rgba(14, 20, 25, 0.55), inset 0 0 0 1.5px rgba(232, 242, 236, 0.1); }
.pcscreen { position: relative; aspect-ratio: 16 / 9; border-radius: 6px; overflow: hidden; background: #0F171D; }
.stand { width: 20%; height: 22px; margin: 0 auto; background: linear-gradient(#1A242B, #0B1014); clip-path: polygon(20% 0, 80% 0, 100% 100%, 0 100%); }
.foot { width: 34%; height: 6px; margin: 0 auto; border-radius: 4px 4px 0 0; background: #0B1014; }

/* The iPhone: the screen itself, with rounded corners, a black border around it and the Dynamic Island
   on top. Sizes are in cqmin (1 % of the screen's short side), so they hold upright and on its side.
   The screen keeps the screenshots' own shape (1320×2868), so nothing is cropped. */
.phone {
  --bezel: 3.4cqmin;
  position: relative;
  flex: none;
  width: 300px;
  aspect-ratio: 1320 / 2868;
  container-type: size;
}
.phone.land { width: 560px; aspect-ratio: 2868 / 1320; }

.scr {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 14cqmin;
  background: var(--scr);
  color: var(--scr-ink);
  font-size: 11px;
  line-height: 1.3;
  /* Black border outside the screen, a thin edge so it reads on the dark page, and a soft shadow */
  box-shadow:
    0 0 0 var(--bezel) #000,
    0 0 0 calc(var(--bezel) + 1.5px) rgba(232, 242, 236, 0.16),
    0 24px 50px -16px rgba(0, 0, 0, 0.8);
}

.island { position: absolute; z-index: 3; top: 3cqmin; left: 50%; translate: -50% 0; width: 31cqmin; height: 9cqmin; border-radius: 99px; background: #000; }
.phone.land .island { top: 50%; left: 3cqmin; translate: 0 -50%; width: 9cqmin; height: 31cqmin; }

.scene .phone {
  position: absolute;
  /* Leave room for the border, which is drawn outside the screen (300 × 3.4 % ≈ 10 px before scaling) */
  left: calc(10px * var(--k, 0.5));
  bottom: calc(10px * var(--k, 0.5));
  transform-origin: bottom left;
  transform: scale(var(--k, 0.5));
}

/* A screenshot or a video of the app (see MEDIA in js/config.js) */
.scr.shot { background: #000; }
.scr.shot img,
.scr.shot video,
.pcscreen.shot img,
.pcscreen.shot video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.pcscreen.shot { background: #000; }


/* ===== 8. Drawn PC desktop (js/pc.js) ===== */

.desk {
  position: absolute;
  left: 0;
  top: 0;
  width: 640px;
  height: 360px;
  overflow: hidden;
  transform-origin: top left;
  transform: scale(var(--pk, 1));
  color: #E8F2EC;
  font-size: 11px;
  line-height: 1.3;
  background: radial-gradient(90% 80% at 15% 10%, rgba(44, 138, 91, 0.45), transparent 60%), radial-gradient(90% 90% at 90% 100%, rgba(42, 74, 120, 0.85), transparent 60%), #0D151B;
}
.desk .row { display: flex; align-items: center; gap: 6px; }
.desk .dim { color: var(--scr-dim); }
.spacer { flex: 1; }

/* Taskbar */
.tb { position: absolute; left: 0; right: 0; bottom: 0; height: 30px; display: flex; align-items: center; justify-content: center; gap: 6px; background: rgba(12, 18, 23, 0.86); border-top: 1px solid rgba(232, 242, 236, 0.08); }
.tb i { position: relative; width: 18px; height: 18px; border-radius: 5px; background: var(--c, rgba(232, 242, 236, 0.22)); }
.tb i.on::after { content: ""; position: absolute; left: 5px; right: 5px; bottom: -5px; height: 2px; border-radius: 2px; background: var(--mint); }
.tb .tray { position: absolute; right: 10px; display: flex; align-items: center; gap: 8px; font-size: 9.5px; color: #C7D3CD; }
.tb .tray svg { width: 12px; height: 12px; }

/* Windows */
.w { position: absolute; overflow: hidden; border-radius: 9px; background: rgba(22, 31, 38, 0.97); border: 1px solid rgba(232, 242, 236, 0.1); box-shadow: 0 20px 40px -18px rgba(0, 0, 0, 0.8); }
.w .tt { display: flex; align-items: center; gap: 7px; height: 26px; padding: 0 10px; background: rgba(232, 242, 236, 0.05); font-weight: 600; font-size: 10.5px; }
.w .tt i { width: 11px; height: 11px; border-radius: 3px; background: var(--c, var(--mint)); }
.w .tt span:last-child { margin-left: auto; letter-spacing: 4px; opacity: 0.5; font-size: 9px; }
.w .wb { display: grid; gap: 8px; padding: 12px; }
.ln { height: 7px; border-radius: 4px; background: rgba(232, 242, 236, 0.1); }
.thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.thumbs i { aspect-ratio: 4 / 3; border-radius: 5px; background: var(--g); }
.thumbs span { overflow: hidden; font-size: 8.5px; color: var(--scr-dim); white-space: nowrap; text-overflow: ellipsis; }
.cursor { position: absolute; width: 16px; height: 22px; }

.slider { position: relative; height: 6px; border-radius: 9px; background: rgba(232, 242, 236, 0.12); }
.slider i { position: absolute; inset: 0 auto 0 0; width: var(--v); border-radius: 9px; background: var(--mint); }
.slider i::after { content: ""; position: absolute; right: -7px; top: 50%; translate: 0 -50%; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4); }

/* Volume flyout and notifications, above the taskbar */
.flyout,
.notif { position: absolute; right: 10px; bottom: 40px; display: grid; background: rgba(28, 38, 46, 0.97); border: 1px solid rgba(232, 242, 236, 0.12); box-shadow: 0 20px 40px -14px rgba(0, 0, 0, 0.8); }
.flyout { width: 230px; gap: 12px; padding: 14px; border-radius: 12px; }
.notif { width: 250px; gap: 4px; padding: 11px 12px; border-radius: 10px; }
.notif .row svg { flex: none; width: 14px; height: 14px; border-radius: 4px; }

/* Task View */
.tv { position: absolute; inset: 0 0 30px; display: grid; align-content: center; gap: 26px; padding: 0 40px; background: rgba(8, 12, 15, 0.55); backdrop-filter: blur(3px); }
.tv .wins { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.tv .wins div { display: grid; gap: 6px; font-size: 10px; }
.tv .wins b { display: block; aspect-ratio: 16 / 10; border-radius: 8px; border: 1px solid rgba(232, 242, 236, 0.18); background: var(--g); }
.tv .wins div:first-child b { outline: 2px solid var(--mint); outline-offset: 2px; }
.tv .desks { display: flex; justify-content: center; gap: 10px; }
.tv .desks span { padding: 6px 14px; border-radius: 8px; background: rgba(232, 242, 236, 0.1); font-size: 9.5px; }
.tv .desks span.on { background: rgba(190, 236, 208, 0.25); }


/* ===== 9. Drawn iPhone screens (js/phone.js): Color and theme, PC files ===== */

.scr.app > .app { position: absolute; inset: 0; }

.scr.app { background: #090D11; color: #F2F5F3; font-family: -apple-system, "SF Pro Text", "Segoe UI", system-ui, sans-serif; font-size: 11px; line-height: 1.25; }
.ap { position: absolute; inset: 0; display: flex; flex-direction: column; }
/* The app's background, at the scale of the drawn screen (radius: 85 % of a 393 × 852 iPhone's width, upright or on its side) */
.scr.app { --rx: 85%; --ry: 39%;
  background: var(--grain),
    radial-gradient(var(--rx) var(--ry) at 0 0, rgb(61, 61, 64), transparent),
    radial-gradient(var(--rx) var(--ry) at 100% 100%, rgba(41, 61, 94, 0.75), transparent),
    radial-gradient(var(--rx) var(--ry) at 0 100%, rgba(173, 54, 105, 0.55), transparent),
    radial-gradient(var(--rx) var(--ry) at 100% 0, rgba(44, 138, 91, 0.55), transparent), #0D1217; }
.phone.land .scr.app { --rx: 85%; --ry: 184%; }

.ap-circle { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.12); }
.ap-circle svg { width: 13px; height: 13px; color: #E6ECE9; }

/* Home, blurred behind the panel */
.ap-home { padding: 40px 12px 12px; gap: 9px; }
.ap-top { display: flex; align-items: center; gap: 6px; }
.ap-top .who { display: grid; gap: 1px; }
.ap-top .st { display: flex; align-items: center; gap: 5px; color: #9AA3A8; font-size: 9.5px; }
.ap-top b { font-size: 12px; font-weight: 600; letter-spacing: 0.01em; }
.ap-top .dotg { width: 6px; height: 6px; border-radius: 50%; background: #BEECD0; box-shadow: 0 0 6px #BEECD0; }

.ap-grid { flex: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); gap: 8px; min-height: 0; }
.ap-tile { position: relative; display: flex; flex-direction: column; justify-content: space-between; min-width: 0; padding: 8px 9px; border-radius: 16px; background: rgba(110, 120, 128, 0.2); border: 1px solid rgba(255, 255, 255, 0.1); }
.ap-tile .st { position: absolute; right: 10px; top: 10px; width: 5px; height: 5px; border-radius: 50%; background: rgba(255, 255, 255, 0.28); }
.ap-tile .st.on { background: #BEECD0; box-shadow: 0 0 5px rgba(190, 236, 208, 0.7); }
.ap-tile b { overflow: hidden; font-size: 12.5px; font-weight: 800; color: #C9CFCC; letter-spacing: -0.01em; white-space: nowrap; text-overflow: ellipsis; }
.ap-tile small { display: block; margin-top: 1px; font: 600 6.5px var(--font-mono); letter-spacing: 0.2em; color: #8E979B; text-transform: uppercase; white-space: nowrap; }
.ap-ic { display: grid; place-items: center; width: 34px; height: 34px; }
.ap-ic svg { width: 100%; height: 100%; }
.ap-ic.sq { border-radius: 10px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.1); color: #BEECD0; }
.ap-ic.sq svg { width: 52%; height: 52%; }
.ap-ic.sq.off { color: #9AA3A8; }
.ap-ic.sq.live { background: rgba(190, 236, 208, 0.14); border: 1.5px solid rgba(190, 236, 208, 0.5); }

.ap-dots { display: flex; justify-content: center; gap: 4px; }
.ap-dots i { width: 5px; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, 0.3); }
.ap-dots i.on { width: 14px; background: #F2F5F3; }

/* The tab bar: the first tabs, then "More"; the open one tinted */
.ap-tabs { display: flex; gap: 2px; padding: 3px; border-radius: 99px; background: rgba(28, 34, 40, 0.9); border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: 0 8px 20px -8px rgba(0, 0, 0, 0.6); }
.ap-tabs span { flex: 1; display: grid; justify-items: center; gap: 2px; padding: 6px 0 5px; border-radius: 99px; font-size: 8px; font-weight: 600; color: #DDE3E0; }
.ap-tabs span.on { background: rgba(255, 255, 255, 0.09); color: #BEECD0; }
.ap-tabs svg { width: 14px; height: 14px; }

/* Landscape home */
.phone.land .ap-home { padding: 10px 34px 8px 46px; gap: 6px; }
.phone.land .ap-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
.phone.land .ap-tile { padding: 6px 7px; border-radius: 13px; }
.phone.land .ap-tile b { font-size: 10.5px; }
.phone.land .ap-ic { width: 24px; height: 24px; }
.phone.land .ap-tabs { align-self: center; padding: 2px; }
.phone.land .ap-tabs span { display: flex; align-items: center; gap: 5px; padding: 5px 11px; }

/* Panel: a frosted sheet over the blurred home */
.ap-blur { position: absolute; inset: 0; filter: blur(8px) brightness(0.75); transform: scale(1.04); }
.ap-sheet {
  position: absolute;
  left: 5px;
  right: 5px;
  bottom: 5px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px 12px 12px;
  border-radius: 30px 30px 40px 40px;
  background: #11161B;
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(14px);
}
.ap-sheet::before { content: ""; position: absolute; top: 6px; left: 50%; translate: -50% 0; width: 26px; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, 0.3); }
.phone.land .ap-sheet { left: 40px; right: 40px; top: 10px; bottom: 6px; gap: 6px; padding: 16px 12px 10px; border-radius: 26px; }

.ap-head { display: flex; align-items: flex-start; gap: 8px; padding: 0 4px; }
.ap-head h5 { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -0.01em; }
.ap-head .eb { margin: 3px 0 0; font: 600 6.5px var(--font-mono); letter-spacing: 0.2em; text-transform: uppercase; color: #9AA3A8; }
/* Screens' content sits at the bottom, under the thumb; cards like the app's */
.ap-gap { flex: 1; }
.ap-card { display: grid; gap: 7px; padding: 10px; border-radius: 16px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); }
.ap-card > b { font-size: 11px; padding: 0 2px; }
.ap-head .ap-circle { margin-left: auto; width: 28px; height: 28px; }
.phone.land .ap-head h5 { font-size: 15px; }

/* Color and theme */
.ap-seg { display: flex; padding: 2px; border-radius: 99px; background: rgba(255, 255, 255, 0.08); }
.ap-seg span { flex: 1; padding: 6px 0; border-radius: 99px; text-align: center; font-size: 10px; }
.ap-seg span.on { background: rgba(255, 255, 255, 0.28); }
.ap-colors { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px 4px; justify-items: center; }
.ap-colors div { display: grid; justify-items: center; gap: 5px; font-size: 9px; color: #B4BCC0; }
.ap-colors i { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--c); color: #0E1419; }
.ap-colors i svg { width: 13px; height: 13px; }
.ap-colors div.on { color: #F2F5F3; font-weight: 600; }
.ap-colors div.on i { box-shadow: 0 0 0 3px rgba(14, 20, 25, 0.9), 0 0 0 5px #BEECD0; }

/* PC files: the iOS system list */
.ap-list { position: absolute; inset: 28px 0 0; display: flex; flex-direction: column; padding: 14px 14px 0; border-radius: 26px 26px 0 0; background: #1C1C1E; }
.ap-list h5 { margin: 10px 0 6px; font-size: 21px; font-weight: 700; }
.ap-close { align-self: flex-start; padding: 7px 13px; border-radius: 99px; background: #2C2C2E; color: #BEECD0; font-size: 11px; }
.ap-li { display: flex; align-items: center; gap: 14px; padding: 9px 0 9px 2px; font-size: 11.5px; }
.ap-li svg { flex: none; width: 16px; height: 16px; color: #BEECD0; }
.ap-li span { flex: 1; display: flex; padding-bottom: 9px; margin-bottom: -9px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.ap-li span::after { content: "›"; margin-left: auto; color: #6E6E73; font-size: 14px; line-height: 0.8; }
.ap-search { display: flex; align-items: center; gap: 8px; margin: auto 0 14px; padding: 10px 14px; border-radius: 99px; background: #2C2C2E; color: #8E8E93; font-size: 11.5px; }
.ap-search svg { width: 13px; height: 13px; }


/* ===== 10. Small screens, reduced motion ===== */

@media (max-width: 1440px) {
  .switcher button svg { display: none; }
}

@media (max-width: 1000px) {
  .overview { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .more { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
  .hero .wrap,
  .final .sheet { grid-template-columns: minmax(0, 1fr); }
  .hero-stage { order: 2; }
  .feature .text { grid-template-columns: minmax(0, 1fr); }
  .feature .scene { --phone: 0.32; aspect-ratio: 16 / 12; }
  .feature .scene.land { --phone: 0.62; aspect-ratio: 16 / 11; }
}

@media (max-width: 620px) {
  .steps,
  .more { grid-template-columns: minmax(0, 1fr); }
  .overview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .overview a { min-height: 130px; }
  .top nav a.hide-sm { display: none; }
  .switcher button { padding: 8px 10px; }
  .eyebrow, .meta-line { letter-spacing: 0.12em; }
}

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

@media (hover: hover) {
  .top nav a:hover { color: var(--ink); background: var(--glass-2); }
  .btn-win:hover { box-shadow: 0 0 0 6px rgba(190, 236, 208, 0.16), 0 12px 40px -12px rgba(190, 236, 208, 0.6); }
  .btn-store:hover { background: rgba(255, 255, 255, 0.11); }
  .switcher button:hover { color: var(--ink); }
  .overview a:hover { background: rgba(110, 120, 128, 0.26); }
  .overview a:hover::after { color: var(--accent); transform: translateX(3px); }
  footer a:hover { color: var(--ink); }
  .tst-close:hover { background: rgba(255, 255, 255, 0.12); }
  .tst-foot a:hover { color: var(--ink); }
}

/* "Reduce transparency": the glass becomes solid, without blur. */
@media (prefers-reduced-transparency: reduce) {
  .top .bar, .switcher, .overview a, .feature .visual, .points li, .more div, .steps li, .btn-store {
    background: #1A2026;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

/* "Increase contrast": solid surfaces, clear borders, brighter secondary text. */
@media (prefers-contrast: more) {
  :root { --muted: #D2D8DB; --dim: #B3BCC0; --stroke: rgba(255, 255, 255, 0.45); }
  .top .bar, .switcher, .overview a, .feature .visual, .points li, .more div, .steps li, .btn-store {
    background: #141A1F;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}


/* ===== Android testers: the invitation (Google Play's closed test) ===== */

.testers { width: min(620px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 0; border: 0; background: transparent; color: var(--ink); overflow: visible; }
/* No backdrop-filter: a blur over the page's videos made the dialog flash in some browsers. */
.testers::backdrop { background: rgba(4, 7, 9, 0.86); }
/* The card grows out of the button that opened it and goes back into it: js/main.js (openTesters). */
.testers[open]::backdrop { animation: tst-fade 0.32s ease; }
@keyframes tst-fade { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .testers[open]::backdrop { animation: none; } }

.tst-card { position: relative; max-height: calc(100dvh - 32px); overflow-y: auto; padding: 36px 36px 28px; border-radius: 32px;
  background: radial-gradient(420px 260px at 0% 0%, rgba(190, 236, 208, 0.14), transparent 70%), #0E1419;
  border: 1px solid var(--stroke); box-shadow: 0 40px 120px -30px rgba(0, 0, 0, 0.9); }
.tst-card .eyebrow { margin: 0 0 10px; }
.tst-card h2 { margin: 0; padding-right: 40px; font: 700 clamp(1.6rem, 1.2rem + 1.6vw, 2.1rem)/1.1 var(--font-display); letter-spacing: -0.025em; }
.tst-lede { margin: 14px 0 0; color: var(--muted); font-size: 1rem; line-height: 1.55; }
.tst-close { position: absolute; top: 18px; right: 18px; width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 50%;
  background: var(--glass-2); color: var(--ink); cursor: pointer; }
.tst-close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

.tst-count { display: grid; grid-template-columns: auto 1fr auto 1fr; align-items: center; gap: 4px 12px; margin-top: 22px; padding: 14px 18px;
  border-radius: 20px; background: var(--glass-2); border: 1px solid var(--stroke); }
.tst-count b { font: 700 1.9rem/1 var(--font-display); color: var(--accent); letter-spacing: -0.03em; }
.tst-count span { font-size: 0.88rem; line-height: 1.25; color: var(--muted); }

.tst-steps { list-style: none; margin: 22px 0 0; padding: 0; counter-reset: tst; display: grid; gap: 10px; }
.tst-steps li { counter-increment: tst; display: grid; grid-template-columns: 34px 1fr; gap: 6px 14px; padding: 16px 18px; border-radius: 20px; border: 1px solid var(--line); }
.tst-steps li::before { content: counter(tst); width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%;
  background: rgba(190, 236, 208, 0.14); color: var(--accent); font: 700 0.9rem var(--font-mono); }
.tst-steps h3 { margin: 4px 0 4px; font-size: 1.02rem; font-weight: 650; letter-spacing: -0.01em; }
.tst-steps p { margin: 0; color: var(--muted); font-size: 0.92rem; line-height: 1.5; }
.tst-steps .btn { grid-column: 2; justify-self: start; margin-top: 8px; padding: 10px 18px; font-size: 0.95rem; font-weight: 650; text-decoration: none; }
.tst-steps .btn[hidden] { display: none; }

.tst-foot { margin: 18px 0 0; color: var(--dim); font-size: 0.86rem; line-height: 1.5; }
.tst-foot a { color: var(--muted); }

@media (max-width: 520px) {
  .tst-card { padding: 28px 20px 22px; border-radius: 26px; }
  .tst-count { grid-template-columns: auto 1fr; }
  .tst-steps li { padding: 14px; grid-template-columns: 30px 1fr; gap: 6px 12px; }
}