:root {
  color-scheme: light dark;
  --space-hairline: 2px;
  --space-2xs: 4px;
  --space-xs: 6px;
  --space-s: 8px;
  --space-m: 12px;
  --space-l: 16px;
  --space-inset: 20px;
  --space-xl: 24px;
  --space-2xl: 32px;
  --radius-s: 8px;
  --radius-m: 16px;
  --radius-l: 22px;
  --radius-group: 26px;
  --bar-height: 10px;
  --badge-m: 36px;
  --readable: 560px;
  --page: 1080px;

  --background: #f2f2f7;
  --row: #ffffff;
  --label: #000000;
  --secondary: #6c6c70;
  --separator: rgba(60, 60, 67, 0.18);
  --ink: #1c1c1e;
  --paper: #ffffff;

  --sky: #2477b8;
  --mustard: #b8841c;
  --orange: #c2602a;
  --rust: #a63d2c;
  --olive: #5f7a2e;
  --teal: #2a7069;
  --denim: #3d5f86;
  --plum: #74415f;
  --brown: #7e5536;
  --cream: #f0e6d2;

  --tint: var(--sky);
  --tint-text: #1d5f93;
  --on-tint: #ffffff;
  --positive: var(--olive);
  --negative: var(--rust);
  --warning: var(--mustard);
  --pro: var(--mustard);
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #000000;
    --row: #1c1c1e;
    --label: #ffffff;
    --secondary: #98989f;
    --separator: rgba(84, 84, 88, 0.6);
    --ink: #f5f2eb;
    --paper: #1c1c1e;

    --sky: #5ab0ea;
    --mustard: #e3b04b;
    --orange: #e38049;
    --rust: #dc6a54;
    --olive: #9db35c;
    --teal: #62aba2;
    --denim: #7fa0c6;
    --plum: #b57fa0;
    --brown: #bc8a62;
    --cream: #e6dac2;

    --tint-text: #7cc2f0;
    --on-tint: #04121d;
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-padding-top: 72px; }

body {
  margin: 0;
  background: var(--background);
  color: var(--label);
  font: 1.0625rem/1.47 ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: var(--tint-text); }

h1, h2, h3, p, li, summary { overflow-wrap: break-word; }
h1, h2, h3 { hyphens: auto; }

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

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

.skip-link {
  position: absolute;
  left: var(--space-l);
  top: -60px;
  z-index: 30;
  padding: var(--space-s) var(--space-l);
  border-radius: 999px;
  background: var(--tint);
  color: var(--on-tint);
  font-weight: 700;
  text-decoration: none;
}

.skip-link:focus { top: var(--space-s); }

.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.page {
  max-width: var(--page);
  margin: 0 auto;
  padding: 0 var(--space-l);
}

/* Navigation */

.nav {
  position: sticky;
  top: 0;
  z-index: 10;
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  background: color-mix(in srgb, var(--background) 78%, transparent);
  border-bottom: 1px solid var(--separator);
}

.nav .page {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
  height: 56px;
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--space-s);
  color: var(--label);
  text-decoration: none;
  font-weight: 800;
  font-size: 1.1875rem;
}

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

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-l);
  font-size: 0.9375rem;
  font-weight: 600;
}

.nav-links a { color: var(--secondary); text-decoration: none; }
.nav-links a:hover { color: var(--label); }

@media (max-width: 720px) {
  .nav-links .optional { display: none; }
}

.icon-light { display: block; }
.icon-dark { display: none; }

@media (prefers-color-scheme: dark) {
  .icon-light { display: none; }
  .icon-dark { display: block; }
}

/* Shared pieces */

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  padding: var(--space-2xs) var(--space-s);
  border-radius: var(--radius-s);
  background: color-mix(in srgb, var(--chip, var(--tint)) 16%, transparent);
  color: color-mix(in srgb, var(--chip, var(--tint)) 72%, var(--label));
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
}

.chip.capsule { border-radius: 999px; padding: var(--space-2xs) var(--space-m); }

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-s);
  min-height: 50px;
  padding: 0 var(--space-xl);
  border-radius: 999px;
  background: var(--tint);
  color: var(--on-tint);
  font-weight: 700;
  font-size: 1.0625rem;
  text-decoration: none;
  border: 0;
}

.button:hover { background: color-mix(in srgb, var(--tint) 88%, var(--label)); }

.button.quiet {
  background: color-mix(in srgb, var(--secondary) 14%, transparent);
  color: var(--label);
}

.button.small { min-height: 34px; padding: 0 var(--space-l); font-size: 0.9375rem; }
.nav-links a.button.small, .nav-links a.button.small:hover { color: var(--on-tint); }

.footnote { font-size: 0.8125rem; color: var(--secondary); }

.eyebrow {
  display: inline-block;
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--accent, var(--tint)) 72%, var(--label));
  margin-bottom: var(--space-s);
}

section h2 {
  font-size: clamp(1.875rem, 4vw, 2.5rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  font-weight: 800;
  margin: 0 0 var(--space-m);
}

section p.lead { font-size: 1.1875rem; color: var(--secondary); margin: 0 0 var(--space-l); }

.section-head { text-align: center; max-width: 44rem; margin: 0 auto var(--space-xl); }
.section-head h2 { margin-bottom: var(--space-s); }
.section-head .lead { margin: 0; }

.points { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-s); }
.points li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: var(--space-s); }
.points li::before {
  content: "";
  width: 8px;
  height: 8px;
  margin: 9px 0 0 6px;
  border-radius: 999px;
  background: var(--accent, var(--tint));
}

.chips { display: flex; flex-wrap: wrap; gap: var(--space-s); }

.bar {
  position: relative;
  height: var(--bar-height);
  border-radius: 999px;
  background: color-mix(in srgb, var(--bar, var(--tint)) 22%, transparent);
}

.bar > i {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  border-radius: inherit;
  background: var(--bar, var(--tint));
  transition: width 1s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.bar.filled > i { width: var(--value); }

/* Hero */

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: var(--space-2xl);
  align-items: center;
  padding: 72px 0 56px;
}

.hero-icon { width: 104px; height: 104px; margin-bottom: var(--space-xl); filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.18)); }

.hero h1 {
  font-size: clamp(2.375rem, 6vw, 4rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
  font-weight: 900;
  margin: 0 0 var(--space-l);
}

.hero h1 span { color: var(--tint-text); }

.hero .lead {
  font-size: 1.3125rem;
  color: var(--secondary);
  margin: 0 0 var(--space-xl);
  max-width: 36ch;
}

.hero .footnote { margin: 0 0 var(--space-l); max-width: 46ch; }

.actions { display: flex; flex-wrap: wrap; gap: var(--space-m); align-items: center; margin-bottom: var(--space-xl); }

.platforms { display: flex; flex-wrap: wrap; gap: var(--space-s); }

/* iPhone */

.iphone {
  --metal: #22344d;
  --metal-light: #4a6587;
  --metal-dark: #0e1826;
  position: relative;
  justify-self: center;
  width: min(100%, 350px);
  container-type: inline-size;
  aspect-ratio: 440 / 956;
  border-radius: 17% / 7.9%;
  padding: 1.6%;
  background:
    linear-gradient(90deg, var(--metal-dark), var(--metal-light) 3%, var(--metal) 9%, var(--metal) 91%, var(--metal-light) 97%, var(--metal-dark)),
    var(--metal);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.18),
    inset 0 2px 3px rgba(255, 255, 255, 0.25),
    0 50px 90px -40px rgba(14, 40, 70, 0.7),
    0 20px 40px -20px rgba(0, 0, 0, 0.35);
}

.side {
  position: absolute;
  width: 1.2%;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--metal-dark), var(--metal-light), var(--metal));
}

.side.action { left: -1%; top: 17%; height: 4.5%; }
.side.volume-up { left: -1%; top: 24.5%; height: 8%; }
.side.volume-down { left: -1%; top: 34%; height: 8%; }
.side.power { right: -1%; top: 27%; height: 12%; transform: scaleX(-1); }
.side.camera { right: -0.6%; top: 58%; height: 7%; width: 0.8%; background: linear-gradient(90deg, var(--metal), #060b12); }

.bezel {
  height: 100%;
  border-radius: 15.4% / 7.1%;
  padding: 2.4%;
  background: #050505;
}

.screen {
  position: relative;
  height: 100%;
  border-radius: 13.4% / 6.2%;
  background: var(--background);
  padding: 15% 0 0;
  overflow: hidden;
  font-size: calc(100cqw / 21);
}

.status {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5.2% 9% 0 11%;
  font-size: 0.95em;
  font-weight: 700;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif;
}

.status-icons { display: flex; align-items: center; gap: 0.35em; }
.status-icons svg { height: 0.7em; width: auto; fill: currentColor; }

.battery {
  position: relative;
  width: 1.5em;
  height: 0.75em;
  border: 1px solid color-mix(in srgb, var(--label) 45%, transparent);
  border-radius: 0.25em;
  padding: 1px;
}

.battery::after { content: ""; position: absolute; right: -0.2em; top: 0.22em; width: 0.1em; height: 0.28em; border-radius: 0 1px 1px 0; background: color-mix(in srgb, var(--label) 45%, transparent); }
.battery i { display: block; width: 80%; height: 100%; border-radius: 0.12em; background: var(--label); }

.island {
  position: absolute;
  top: 2.4%;
  left: 50%;
  width: 29%;
  height: 3.6%;
  transform: translateX(-50%);
  border-radius: 999px;
  background: #000000;
}

.toolbar { display: flex; justify-content: flex-end; gap: 0.5em; padding: 0 4.6%; }

.toolbar span {
  display: grid;
  place-items: center;
  width: 2.3em;
  height: 2.3em;
  border-radius: 999px;
  background: color-mix(in srgb, var(--row) 72%, transparent);
  box-shadow: 0 0.2em 0.6em rgba(0, 0, 0, 0.08), inset 0 0 0 0.5px color-mix(in srgb, var(--label) 12%, transparent);
  color: var(--label);
}

.toolbar svg, .glyph { width: 1.15em; height: 1.15em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.screen-title { display: flex; align-items: center; gap: 0.25em; font-size: 2em; font-weight: 800; margin: 0.15em 4.6% 0.2em; line-height: 1.2; }
.screen-title svg { width: 0.5em; height: 0.5em; fill: none; stroke: var(--tint); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; margin-top: 0.15em; }

.tabbar {
  position: absolute;
  left: 4.6%;
  right: 4.6%;
  bottom: 3.4%;
  display: flex;
  gap: 0.55em;
  align-items: center;
}

.tabbar-pill, .tabbar-solo {
  background: color-mix(in srgb, var(--row) 72%, transparent);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  box-shadow: 0 0.4em 1.2em rgba(0, 0, 0, 0.12), inset 0 0 0 0.5px color-mix(in srgb, var(--label) 12%, transparent);
}

.tabbar-pill {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding: 0.27em;
  border-radius: 999px;
}

.tabbar-pill span {
  display: grid;
  justify-items: center;
  gap: 1px;
  padding: 0.33em 0 0.27em;
  border-radius: 999px;
  font-size: 0.6em;
  font-weight: 600;
  color: var(--label);
  white-space: nowrap;
  overflow: hidden;
}

.tabbar-pill span.selected { color: var(--tint-text); background: color-mix(in srgb, var(--secondary) 14%, transparent); }

.tabbar svg { width: 2.1em; height: 2.1em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tabbar-solo svg { width: 1.3em; height: 1.3em; }

.tabbar-solo {
  display: grid;
  place-items: center;
  width: 3.4em;
  height: 3.4em;
  flex: none;
  border-radius: 999px;
  color: var(--label);
}

.home-indicator {
  position: absolute;
  bottom: 1.1%;
  left: 50%;
  width: 36%;
  height: 0.33em;
  transform: translateX(-50%);
  border-radius: 999px;
  background: var(--label);
}

/* Feed rows, shared by every device (sizes in em) */

.feed { display: grid; }

.post-row {
  display: grid;
  gap: 0.3em;
  padding: 0.75em 4.6%;
  border-bottom: 1px solid var(--separator);
  background: var(--background);
}

.post-row.selected { background: color-mix(in srgb, var(--tint) 14%, var(--row)); }

.byline { display: flex; align-items: center; gap: 0.35em; font-size: 0.82em; color: var(--secondary); min-width: 0; }
.byline b { color: var(--label); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 1.5em;
  height: 1.5em;
  border-radius: 999px;
  background: color-mix(in srgb, var(--avatar, var(--tint)) 22%, transparent);
  color: color-mix(in srgb, var(--avatar, var(--tint)) 72%, var(--label));
  font-size: 0.85em;
  font-weight: 800;
}

.post-title { margin: 0; font-size: 1.02em; font-weight: 700; line-height: 1.28; }

.post-source { display: flex; align-items: center; gap: 0.3em; font-size: 0.8em; color: var(--secondary); }
.post-source svg { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

.post-meta { display: flex; gap: 1em; font-size: 0.8em; color: var(--secondary); font-variant-numeric: tabular-nums; }
.post-meta span { display: inline-flex; align-items: center; gap: 0.3em; }
.post-meta svg { width: 1.05em; height: 1.05em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.post-meta .coins { color: color-mix(in srgb, var(--olive) 80%, var(--label)); font-weight: 700; }
.post-meta .coins svg { fill: currentColor; stroke: none; }

.progress { height: 0.25em; border-radius: 999px; background: color-mix(in srgb, var(--tint) 20%, transparent); overflow: hidden; }
.progress i { display: block; height: 100%; width: var(--value); background: var(--tint); border-radius: inherit; }

/* Section rhythm */

.values {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-m);
  padding: 0 0 56px;
}

.value { background: var(--row); border-radius: var(--radius-l); padding: var(--space-l) var(--space-inset); }
.value strong { display: block; font-size: 1.75rem; font-weight: 900; color: color-mix(in srgb, var(--accent) 78%, var(--label)); line-height: 1.15; }
.value span { color: var(--secondary); font-size: 0.9375rem; }

.everywhere, .explore, .versus, .tips, .pricing, .faq { padding: 64px 0; border-top: 1px solid var(--separator); }

/* Mac */

.devices { position: relative; padding-bottom: 6%; }

.macbook { width: 86%; margin-left: auto; }

.mac-lid {
  container-type: inline-size;
  aspect-ratio: 1.54;
  padding: 1.6% 1.6% 2.2%;
  border-radius: 3.2% / 4.9%;
  background: #0b0b0c;
  box-shadow: inset 0 0 0 2px #c9cacc, 0 30px 60px -30px rgba(0, 0, 0, 0.45);
}

.mac-display {
  position: relative;
  height: 100%;
  overflow: hidden;
  border-radius: 1.6% / 2.5%;
  font-size: calc(100cqw / 84);
  background:
    radial-gradient(120% 90% at 10% 0%, color-mix(in srgb, var(--sky) 60%, transparent), transparent 60%),
    radial-gradient(100% 80% at 100% 100%, color-mix(in srgb, var(--teal) 55%, transparent), transparent 60%),
    linear-gradient(160deg, var(--denim), var(--mustard));
  color: var(--label);
}

.menubar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 2.4em;
  padding: 0 1.2em;
  font-size: 1em;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
  background: color-mix(in srgb, var(--background) 55%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.menubar > span:first-child { display: flex; gap: 1.6em; }

.notch {
  position: absolute;
  top: 0;
  left: 50%;
  width: 14%;
  height: 2.4em;
  transform: translateX(-50%);
  border-radius: 0 0 0.9em 0.9em;
  background: #0b0b0c;
}

.window {
  position: absolute;
  top: 4.4em;
  left: 4%;
  right: 4%;
  bottom: 4%;
  display: grid;
  grid-template-columns: 17% 33% minmax(0, 1fr);
  border-radius: 1.4em;
  overflow: hidden;
  background: var(--background);
  box-shadow: 0 2em 4em -1em rgba(0, 0, 0, 0.45), 0 0 0 0.08em color-mix(in srgb, var(--label) 18%, transparent);
}

.mac-sidebar {
  display: flex;
  flex-direction: column;
  gap: 0.3em;
  padding: 1.2em 0.8em;
  margin: 0.6em;
  border-radius: 1em;
  background: color-mix(in srgb, var(--row) 70%, transparent);
  box-shadow: 0 0 0 0.08em color-mix(in srgb, var(--label) 8%, transparent);
}

.lights { display: flex; gap: 0.6em; margin: 0 0 1.4em 0.4em; }
.lights i { width: 1.1em; height: 1.1em; border-radius: 50%; background: #ff5f57; }
.lights i:nth-child(2) { background: #febc2e; }
.lights i:nth-child(3) { background: #28c840; }

.side-item { display: flex; align-items: center; gap: 0.6em; padding: 0.5em 0.6em; border-radius: 0.7em; font-size: 1.15em; font-weight: 600; white-space: nowrap; overflow: hidden; }
.side-item.selected { background: color-mix(in srgb, var(--tint) 18%, transparent); color: var(--tint-text); }
.side-item svg { width: 1.4em; height: 1.4em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.mac-list { display: flex; flex-direction: column; min-width: 0; border-right: 0.08em solid var(--separator); font-size: 1.15em; overflow: hidden; }
.mac-list .d-title { padding: 0.9em 0.9em 0.3em; }
.mac-list .post-row { padding: 0.7em 0.9em; }

.d-title { margin: 0; font-size: 2em; font-weight: 800; line-height: 1.2; }

.reader { display: flex; flex-direction: column; gap: 0.8em; padding: 2em 2.4em; min-width: 0; overflow: hidden; background: var(--row); font-size: 1.15em; }
.reader h3 { margin: 0; font-size: 1.9em; line-height: 1.15; font-weight: 800; }
.reader h4 { margin: 0.2em 0 0; font-size: 1.25em; font-weight: 800; }
.reader p { margin: 0; line-height: 1.5; }
.reader .byline { font-size: 0.9em; }

.vote {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  width: fit-content;
  padding: 0.35em 0.8em;
  border-radius: 999px;
  background: color-mix(in srgb, var(--secondary) 12%, transparent);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.vote svg { width: 0.9em; height: 0.9em; fill: currentColor; }
.vote .up { color: color-mix(in srgb, var(--olive) 80%, var(--label)); }
.vote .down { color: color-mix(in srgb, var(--rust) 80%, var(--label)); }

.code {
  margin: 0;
  padding: 0.8em 1em;
  border-radius: 0.8em;
  background: color-mix(in srgb, var(--secondary) 12%, transparent);
  font: 0.92em/1.5 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  white-space: pre;
  overflow: hidden;
}

.code .k { color: color-mix(in srgb, var(--plum) 85%, var(--label)); font-weight: 700; }
.code .s { color: color-mix(in srgb, var(--rust) 85%, var(--label)); }
.code .t { color: color-mix(in srgb, var(--teal) 85%, var(--label)); }
.code .c { color: var(--secondary); }

.mac-base {
  position: relative;
  width: 108%;
  margin-left: -4%;
  aspect-ratio: 30;
  border-radius: 0 0 40% 40% / 0 0 100% 100%;
  background: linear-gradient(#e3e4e6, #b9babd 70%, #8f9093);
}

.mac-base::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 14%;
  height: 40%;
  transform: translateX(-50%);
  border-radius: 0 0 1em 1em;
  background: linear-gradient(#a9aaad, #c8c9cb);
}

/* iPad */

.ipad {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 46%;
  container-type: inline-size;
  aspect-ratio: 1.39;
  padding: 1.7%;
  border-radius: 5.4% / 7.5%;
  background: #0b0b0c;
  box-shadow: inset 0 0 0 0.35em #c9cacc, 0 40px 70px -30px rgba(0, 0, 0, 0.55);
}

.ipad-display {
  position: relative;
  height: 100%;
  overflow: hidden;
  border-radius: 3.6% / 5%;
  font-size: calc(100cqw / 46);
  background: var(--background);
  color: var(--label);
}

.ipad-camera { position: absolute; top: 0.7em; left: 50%; width: 0.7em; height: 0.7em; transform: translateX(-50%); border-radius: 50%; background: #1d1d20; z-index: 1; }

.ipad-status { display: flex; justify-content: space-between; align-items: center; padding: 0.9em 2em 0; font-size: 1.05em; font-weight: 700; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif; }
.ipad-status .battery { width: 2.2em; height: 1.1em; }
.ipad-status .status-icons svg { height: 1em; }

.ipad-tabs {
  display: flex;
  gap: 0.2em;
  width: fit-content;
  margin: 0.6em auto 0;
  padding: 0.3em;
  border-radius: 999px;
  background: color-mix(in srgb, var(--row) 80%, transparent);
  box-shadow: 0 0.4em 1.2em rgba(0, 0, 0, 0.1), inset 0 0 0 0.06em color-mix(in srgb, var(--label) 12%, transparent);
  font-size: 1.05em;
  font-weight: 600;
}

.ipad-tabs span { padding: 0.35em 0.9em; border-radius: 999px; white-space: nowrap; }
.ipad-tabs span.selected { background: color-mix(in srgb, var(--secondary) 16%, transparent); color: var(--tint-text); }

.ipad-columns { position: absolute; top: 5.4em; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: 40% minmax(0, 1fr); }
.ipad-columns .mac-list { font-size: 1em; }
.ipad-columns .reader { font-size: 1em; padding: 1.4em 1.8em; }
.ipad-indicator { bottom: 1.5%; width: 26%; height: 0.4em; }

.translated { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6em; font-size: 0.9em; }
.translated .chip { font-size: 0.95em; }
.translated .link { color: var(--tint-text); font-weight: 700; }

/* Apple TV */

.tv { margin: var(--space-2xl) auto 0; width: min(100%, 760px); }

.tv-screen {
  container-type: inline-size;
  aspect-ratio: 16 / 9;
  padding: 1%;
  border-radius: 1.2% / 2.1%;
  background: #0b0b0c;
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.5);
}

.tv-display {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4%;
  height: 100%;
  padding: 5% 6% 9%;
  border-radius: 0.6% / 1%;
  background: var(--background);
  color: var(--label);
  font-size: calc(100cqw / 54);
  overflow: hidden;
}

.tv-page { display: flex; flex-direction: column; gap: 0.8em; min-width: 0; overflow: hidden; }
.tv-page h3 { margin: 0; font-size: 2em; line-height: 1.15; font-weight: 800; }
.tv-page p { margin: 0; font-size: 1.15em; line-height: 1.5; }
.tv-page .byline { font-size: 1em; }
.tv-pages { position: absolute; left: 0; right: 0; bottom: 3.5%; text-align: center; font-size: 1em; font-weight: 700; color: var(--secondary); }
.tv-stand { width: 18%; height: 10px; margin: 0 auto; border-radius: 0 0 8px 8px; background: linear-gradient(#3a3a3e, #1c1c1e); }

/* Feature explorer */

.tabs {
  display: flex;
  gap: var(--space-s);
  overflow-x: auto;
  scrollbar-width: none;
  padding: var(--space-2xs);
  margin: 0 auto var(--space-xl);
  width: fit-content;
  max-width: 100%;
  background: var(--row);
  border-radius: 999px;
}

.tabs::-webkit-scrollbar { display: none; }

.tabs button {
  flex: none;
  border: 0;
  border-radius: 999px;
  padding: var(--space-s) var(--space-l);
  background: transparent;
  color: var(--secondary);
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 700;
  cursor: pointer;
}

.tabs button:hover { color: var(--label); }
.tabs button[aria-selected="true"] { background: var(--tint); color: var(--on-tint); }
.tabs button:focus-visible { outline-offset: -3px; outline-color: var(--label); }

.panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-2xl);
  align-items: center;
}

.panel[hidden] { display: none; }
.panel h3 { font-size: clamp(1.625rem, 3.4vw, 2.125rem); line-height: 1.12; font-weight: 800; margin: 0 0 var(--space-m); }
.panel .lead { font-size: 1.1875rem; color: var(--secondary); margin: 0 0 var(--space-l); }

.feature-media {
  border-radius: var(--radius-l);
  background: color-mix(in srgb, var(--accent, var(--tint)) 12%, var(--row));
  padding: var(--space-l);
  display: grid;
  gap: var(--space-m);
  min-width: 0;
}

.lottie { aspect-ratio: 16 / 9; width: 100%; }

.mini {
  background: var(--row);
  border-radius: var(--radius-m);
  padding: var(--space-m) var(--space-l);
  font-size: 0.9375rem;
  display: grid;
  gap: var(--space-s);
  min-width: 0;
}

.mini .post-row { padding: 0.5em 0; background: transparent; }
.mini .post-row:last-child { border-bottom: 0; }

.mini-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-s); font-weight: 700; }
.mini-head span { color: var(--secondary); font-size: 0.8125rem; font-weight: 600; }

.balance { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-s); }
.balance strong { font-size: 2.125rem; font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; }

.week-bars { display: flex; align-items: flex-end; gap: 4px; height: 64px; }
.week-bars i { flex: 1; height: var(--h); border-radius: 3px; background: var(--tint); transform-origin: bottom; }

.cloud { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 0.2em 0.65em; padding: var(--space-s) 0; line-height: 1.15; }
.cloud span { font-size: calc(0.9375rem * var(--s, 1)); font-weight: 700; color: var(--secondary); }
.cloud span.top { color: var(--tint-text); font-weight: 800; }
.cloud span.mid { color: var(--label); }

.segmented { display: grid; grid-template-columns: 1fr 1fr; padding: 3px; border-radius: 999px; background: color-mix(in srgb, var(--secondary) 14%, transparent); font-size: 0.8125rem; font-weight: 700; text-align: center; }
.segmented span { padding: 4px 8px; border-radius: 999px; }
.segmented span.on { background: var(--row); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12); }

.source-row { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: var(--space-m); align-items: center; }
.source-row + .source-row { border-top: 1px solid var(--separator); padding-top: var(--space-s); }
.source-row b { display: block; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.source-row small { color: var(--secondary); font-size: 0.8125rem; }
.source-row .badge { width: 32px; height: 32px; }

.badge {
  display: grid;
  place-items: center;
  width: var(--badge-m);
  height: var(--badge-m);
  border-radius: 10px;
  background: color-mix(in srgb, var(--badge) 20%, transparent);
  color: color-mix(in srgb, var(--badge) 80%, var(--label));
}

.badge svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Comparison and pricing tables */

.table {
  position: relative;
  max-width: 820px;
  margin: 0 auto;
  background: var(--row);
  border-radius: var(--radius-group);
  padding: var(--space-2xs) var(--space-l);
}

.table .line { display: grid; grid-template-columns: minmax(0, 1fr) 80px 80px; gap: var(--space-s); align-items: center; padding: var(--space-m) 0; }
.table .line + .line { border-top: 1px solid var(--separator); }
.table .line.head { font-size: 0.8125rem; font-weight: 800; color: var(--secondary); text-transform: uppercase; letter-spacing: 0.04em; }
.table .line > :not(:first-child) { text-align: center; }
.table.wide .line { grid-template-columns: minmax(0, 1.5fr) repeat(4, minmax(0, 1fr)); }
.table-scroll { position: relative; max-width: 820px; margin: 0 auto; overflow-x: auto; border-radius: var(--radius-group); overscroll-behavior-x: contain; }
.brandcol { color: var(--tint-text); }
.procol { color: color-mix(in srgb, var(--pro) 75%, var(--label)); }
.yes { color: color-mix(in srgb, var(--positive) 80%, var(--label)); font-weight: 800; }
.no { color: var(--secondary); }
.some { color: var(--secondary); font-size: 0.8125rem; font-weight: 700; }
.table .text { font-size: 0.8125rem; font-weight: 700; color: var(--label); }

.plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-m); max-width: 860px; margin: 0 auto var(--space-xl); }

.plan {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
  background: var(--row);
  border-radius: var(--radius-group);
  padding: var(--space-xl);
}

.plan.featured { box-shadow: inset 0 0 0 2px var(--pro); }
.plan .chip { align-self: flex-start; }
.plan h3 { font-size: 1.75rem; font-weight: 900; margin: 0; }
.plan .price { margin: 0; font-size: 1.0625rem; color: var(--secondary); }
.plan .price strong { color: var(--label); font-size: 1.375rem; }
.plan .points { margin-bottom: var(--space-s); }
.plan .button { margin-top: auto; }
.plan .footnote { margin: 0; }

/* Tips */

.filters { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-s); margin-bottom: var(--space-xl); }

.filters button {
  border: 0;
  border-radius: 999px;
  padding: var(--space-xs) var(--space-l);
  background: color-mix(in srgb, var(--accent, var(--secondary)) 14%, transparent);
  color: color-mix(in srgb, var(--accent, var(--label)) 72%, var(--label));
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 700;
  cursor: pointer;
}

.filters button[aria-pressed="true"] { background: var(--tint); color: var(--on-tint); }

.tip-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-m); }

.tip {
  --chip: var(--accent);
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  background: var(--row);
  border-radius: var(--radius-l);
  padding: var(--space-inset);
}

.tip[hidden] { display: none; }
.tip .chip { align-self: flex-start; }
.tip h3 { font-size: 1.1875rem; font-weight: 800; margin: var(--space-2xs) 0 0; }
.tip p { margin: 0; color: var(--secondary); font-size: 0.9375rem; }
.where { margin-top: auto; padding-top: var(--space-s); font-size: 0.8125rem; font-weight: 700; color: color-mix(in srgb, var(--accent) 72%, var(--label)); }

/* FAQ */

.faq-list { max-width: 720px; margin: 0 auto; background: var(--row); border-radius: var(--radius-group); padding: var(--space-2xs) var(--space-inset); }
.faq-list details + details { border-top: 1px solid var(--separator); }
.faq-list summary { cursor: pointer; padding: var(--space-l) 0; font-weight: 700; list-style: none; display: flex; justify-content: space-between; gap: var(--space-m); }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+" / ""; color: var(--tint-text); font-weight: 800; }
.faq-list details[open] summary::after { content: "−" / ""; }
.faq-list p { margin: 0 0 var(--space-l); color: var(--secondary); }

.closing { text-align: center; padding: 72px 0; border-top: 1px solid var(--separator); }
.closing img { width: 88px; height: 88px; margin: 0 auto var(--space-l); }
.closing .actions { justify-content: center; }

/* Footer */

footer.site {
  border-top: 1px solid var(--separator);
  padding: var(--space-xl) 0 48px;
  color: var(--secondary);
  font-size: 0.875rem;
}

footer.site .page { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-m); }
footer.site a { color: var(--secondary); text-decoration: none; }
footer.site a:hover { color: var(--label); }
footer.site .footer-links { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-l); }
footer.site .footer-end { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-l); }

.locale-picker { position: relative; }
.locale-picker summary { display: flex; align-items: center; gap: var(--space-xs); cursor: pointer; list-style: none; }
.locale-picker summary::-webkit-details-marker { display: none; }
.locale-picker summary:hover { color: var(--label); }
.locale-picker summary svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.locale-picker .label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.locale-picker ul {
  position: absolute;
  right: 0;
  bottom: calc(100% + var(--space-s));
  z-index: 10;
  min-width: 200px;
  margin: 0;
  padding: var(--space-xs);
  list-style: none;
  background: var(--row);
  border-radius: var(--radius-m);
  box-shadow: 0 0 0 1px var(--separator), 0 12px 32px rgba(0, 0, 0, 0.16);
}

footer.site .locale-picker a { display: block; margin: 0; padding: var(--space-xs) var(--space-m); border-radius: var(--radius-s); color: var(--label); font-size: 0.9375rem; }
footer.site .locale-picker a:hover { background: var(--background); }
footer.site .locale-picker a[aria-current] { color: var(--tint-text); font-weight: 700; }

html.i18n-pending body { visibility: hidden; }

/* Legal pages */

.doc { max-width: 720px; margin: 0 auto; padding: 48px var(--space-l) 64px; }
.doc h1 { font-size: clamp(2rem, 6vw, 2.5rem); line-height: 1.1; font-weight: 900; margin: 0 0 var(--space-s); }
.doc h2 { font-size: 1.375rem; font-weight: 800; margin: var(--space-2xl) 0 var(--space-s); }
.doc .lead { color: var(--secondary); font-size: 1.1875rem; margin: 0 0 var(--space-xl); }
.doc .updated { margin: 0 0 var(--space-l); }
.doc .notice { background: var(--row); border-radius: var(--radius-m); padding: var(--space-s) var(--space-l); margin: 0 0 var(--space-xl); }
.doc .card { background: var(--row); border-radius: var(--radius-l); padding: var(--space-l) var(--space-inset); margin: var(--space-l) 0; font-weight: 700; }
.doc li + li { margin-top: var(--space-xs); }
.doc .faq-list { margin: var(--space-l) 0; }

@media (max-width: 860px) {
  .hero, .panel, .plans { grid-template-columns: minmax(0, 1fr); }
  .devices { display: grid; gap: var(--space-2xl); padding-bottom: 0; }
  .macbook { width: 100%; }
  .ipad { position: relative; width: 100%; }
  .values { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tip-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tabs { width: auto; margin-left: calc(var(--space-l) * -1); margin-right: calc(var(--space-l) * -1); border-radius: 0; background: transparent; padding: var(--space-2xs) var(--space-l); }
  .tabs button:not([aria-selected="true"]) { background: var(--row); }
  .hero { padding-top: 40px; }
}

@media (max-width: 560px) {
  .tip-grid { grid-template-columns: minmax(0, 1fr); }
  .table { padding: var(--space-2xs) var(--space-m); }
  .table .line { grid-template-columns: minmax(0, 1fr) 64px 64px; font-size: 0.9375rem; }
  .table.wide { min-width: 34rem; }
  .table.wide .line.head { font-size: 0.75rem; letter-spacing: 0; text-transform: none; }
  .value strong { font-size: 1.375rem; }
  .values { gap: var(--space-s); }
  .value { padding: var(--space-m) var(--space-l); }
  .hero .lead { font-size: 1.1875rem; }
  .actions .button { flex: 1 1 auto; }
}

@media (prefers-reduced-motion: reduce) {
  .bar > i { transition: none; }
  html { scroll-behavior: auto; }
}

@media (max-width: 720px) {
  .button.small { min-height: 44px; }
  .tabs button, .filters button { min-height: 44px; }
  footer.site .footer-links a, .locale-picker summary { display: inline-flex; align-items: center; min-height: 44px; }
  footer.site .locale-picker a { display: flex; align-items: center; min-height: 44px; }
}

@media (forced-colors: active) {
  [aria-selected="true"], [aria-pressed="true"], [aria-current="page"], [aria-current="true"] { outline: 2px solid Highlight; outline-offset: 2px; }
  .button, .tabs button, .filters button, .chip, .table, .plan, .tip, .value { border: 1px solid CanvasText; }
}