/* VPNonly, one stylesheet for every page.
   Plain paper for reading, a proper Mac wallpaper behind the product, and
   the maker's own words. Light and dark follow the system. */

:root {
  color-scheme: light dark;
  --bg: #f9f8f6;
  --ink: #161513;
  --text: #37352f;
  --muted: #69675f;
  --line: #e4e1da;
  --soft: #f2f0eb;
  --card: #ffffff;
  --dot: rgba(22, 21, 19, .09);
  --underline: #c6c2b8;
  --btn: #161513;
  --btn-text: #f9f8f6;
  --btn-hover: #36342f;
  --ring: #0a64d8;
  --new-ink: #1d7a33;
  --new-line: rgba(40, 160, 70, .45);

  /* the macOS replica, in Apple's own system colours */
  --mac-green: #28cd41;
  --mac-orange: #ff9500;
  --mac-blue: #007aff;
  --pop-bg: rgba(248, 248, 250, .86);
  --pop-ink: rgba(0, 0, 0, .86);
  --pop-2: rgba(0, 0, 0, .52);
  --pop-fill: rgba(0, 0, 0, .04);
  --pop-field: rgba(0, 0, 0, .055);
  --pop-line: rgba(0, 0, 0, .09);
  --pop-btn: #ffffff;
  --pop-btn-edge: rgba(0, 0, 0, .14);
  --sw-off: rgba(0, 0, 0, .1);
  --mb-bg: rgba(255, 255, 255, .5);
  --mb-ink: rgba(0, 0, 0, .84);
  --mb-hi: rgba(0, 0, 0, .1);
  --shadow-pop: 0 0 0 .5px rgba(0, 0, 0, .18), 0 22px 44px -14px rgba(24, 20, 60, .38), 0 4px 12px -4px rgba(20, 24, 34, .12);

  /* the desktop behind the popup: a slowly moving wallpaper */
  --wv0: #b8c8ff;
  --wv1: #d8c8ff;
  --wv2: #ffd0bb;
  --wglow: rgba(255, 255, 255, .75);
  --wr1a: #4a67ff;
  --wr1b: #a35bff;
  --wr2a: #ff6aa8;
  --wr2b: #ffa35a;
  --wsheen: rgba(255, 255, 255, .85);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  --grain-o: .32;
  --desk-shadow: 0 0 0 1px rgba(0, 0, 0, .06), 0 34px 64px -36px rgba(40, 30, 90, .55);

  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #151514;
    --ink: #f1efea;
    --text: #cfccc4;
    --muted: #9d9a92;
    --line: #2c2b28;
    --soft: #1b1a19;
    --card: #1f1e1c;
    --dot: rgba(255, 255, 255, .075);
    --underline: #57544d;
    --btn: #f1efea;
    --btn-text: #151514;
    --btn-hover: #d6d3cc;
    --ring: #4c9dff;
    --new-ink: #5ee07a;
    --new-line: rgba(94, 224, 122, .4);

    --mac-green: #32d74b;
    --mac-orange: #ff9f0a;
    --mac-blue: #0a84ff;
    --pop-bg: rgba(36, 36, 40, .82);
    --pop-ink: rgba(255, 255, 255, .88);
    --pop-2: rgba(255, 255, 255, .55);
    --pop-fill: rgba(255, 255, 255, .04);
    --pop-field: rgba(255, 255, 255, .07);
    --pop-line: rgba(255, 255, 255, .1);
    --pop-btn: rgba(255, 255, 255, .16);
    --pop-btn-edge: rgba(255, 255, 255, .06);
    --sw-off: rgba(255, 255, 255, .16);
    --mb-bg: rgba(12, 12, 20, .35);
    --mb-ink: rgba(255, 255, 255, .92);
    --mb-hi: rgba(255, 255, 255, .2);
    --shadow-pop: 0 0 0 1px rgba(0, 0, 0, .55), inset 0 0 0 .5px rgba(255, 255, 255, .14), 0 22px 44px -14px rgba(0, 0, 0, .65);

    --wv0: #0a0f2c;
    --wv1: #170f3d;
    --wv2: #2a0d2a;
    --wglow: rgba(90, 110, 255, .38);
    --wr1a: #2d49e6;
    --wr1b: #7d3ff4;
    --wr2a: #bd2f7c;
    --wr2b: #f07b3c;
    --wsheen: rgba(255, 255, 255, .5);
    --grain-o: .22;
    --desk-shadow: 0 0 0 1px rgba(255, 255, 255, .07), 0 34px 64px -36px rgba(0, 0, 0, .85);
  }
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--text);
  font: 400 17px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, svg, video { display: block; }
a {
  color: var(--ink);
  text-decoration: underline; text-decoration-color: var(--underline);
  text-decoration-thickness: 1px; text-underline-offset: 3px;
}
a:hover { text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--ring); outline-offset: 3px; border-radius: 4px; }
[id] { scroll-margin-top: 12px; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.wrap { max-width: 1160px; margin-left: auto; margin-right: auto; padding-left: 20px; padding-right: 20px; }
@media (min-width: 720px) { .wrap { padding-left: 32px; padding-right: 32px; } }

/* ── nav, on every page ──────────────────────────────────────────── */
.nav { display: flex; flex-wrap: wrap; align-items: center; column-gap: 26px; row-gap: 2px; padding-top: 16px; padding-bottom: 12px; }
.brand {
  display: inline-flex; align-items: center; gap: 8px; min-height: 36px;
  color: var(--ink); text-decoration: none; font-weight: 700; font-size: 17px; letter-spacing: -.01em;
}
.brand svg { width: 18px; height: 21px; }
.nav nav { order: 3; flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 4px 20px; }
.nav nav a { color: var(--text); text-decoration: none; font-size: 15px; }
.nav nav a:hover, .nav nav a[aria-current] { color: var(--ink); text-decoration: underline; text-decoration-color: var(--underline); text-underline-offset: 6px; }
.nav-buy {
  margin-left: auto; display: inline-flex; align-items: center; height: 34px; padding: 0 13px;
  border-radius: 8px; background: var(--btn); color: var(--btn-text);
  text-decoration: none; font-weight: 600; font-size: 14.5px;
}
.nav-buy:hover { background: var(--btn-hover); }
@media (min-width: 760px) {
  .nav { flex-wrap: nowrap; padding-top: 14px; padding-bottom: 14px; }
  .nav nav { order: 0; flex-basis: auto; gap: 22px; margin-left: 10px; }
}

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 48px; padding: 0 22px; border-radius: 10px;
  background: var(--btn); color: var(--btn-text); text-decoration: none;
  font-weight: 600; font-size: 16.5px;
}
.btn:hover { background: var(--btn-hover); }

/* ── footer, on every page ───────────────────────────────────────── */
.foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px;
  position: relative; margin-top: 72px; padding-top: 26px; padding-bottom: 56px;
  font-size: 15px; color: var(--muted);
}
/* the rule spans the text, not the padding around it */
.foot::before { content: ""; position: absolute; top: 0; left: 20px; right: 20px; height: 1px; background: var(--line); }
@media (min-width: 720px) { .foot::before { left: 32px; right: 32px; } }
.foot a { color: var(--muted); text-decoration: none; }
.foot a:hover { color: var(--ink); }
.foot .me { margin-right: auto; }
.foot .me a { text-decoration: underline; text-decoration-color: var(--underline); }
@media (max-width: 720px) { .foot .me { flex-basis: 100%; } }
.home .foot { margin-top: 0; }

/* ── articles: guides, FAQ, install, changelog and the rest ─────── */
.solo { max-width: 720px; margin: 0 auto; padding: 36px 20px 8px; }
@media (min-width: 720px) { .solo { padding: 64px 32px 8px; } }
.solo h1 {
  color: var(--ink); font-size: clamp(30px, 4.4vw, 42px); line-height: 1.12;
  letter-spacing: -.022em; font-weight: 700; text-wrap: balance; margin-bottom: 22px;
}
.solo h2 {
  color: var(--ink); font-size: 23px; line-height: 1.3; letter-spacing: -.012em;
  font-weight: 650; margin: 46px 0 12px; text-wrap: balance;
}
.solo h3 { color: var(--ink); font-size: 18.5px; font-weight: 650; margin: 28px 0 8px; }
.solo p, .solo ul, .solo ol, .solo pre, .solo figure, .solo .tablewrap { margin-bottom: 18px; }
.solo p, .solo li { font-size: 18px; line-height: 1.68; text-wrap: pretty; }
.solo ul, .solo ol { padding-left: 24px; }
.solo li { margin-bottom: 8px; padding-left: 4px; }
.solo li::marker { color: var(--muted); }
.solo strong, .solo b { color: var(--ink); font-weight: 650; }
.solo code { font: 15px var(--mono); background: var(--soft); padding: 1px 5px; border-radius: 5px; color: var(--ink); }
.solo pre { background: var(--soft); border-radius: 10px; padding: 16px 18px; overflow-x: auto; }
.solo pre code { background: none; padding: 0; font-size: 14px; line-height: 1.6; }
.solo .cta { margin-top: 36px; }
.solo .note { font-size: 15.5px; color: var(--muted); }
.solo .note a { color: var(--text); }
.crumb { margin-bottom: 12px; font-size: 15px; }
.crumb a { color: var(--muted); text-decoration: none; }
.crumb a:hover { color: var(--ink); }
.crumb a::before { content: "← "; }
.lead { font-size: 20px !important; color: var(--ink); }

/* changelog entries carry the release script's inline colour; keep them calm */
.solo h2 > span[style] { font-weight: 400 !important; color: var(--muted) !important; font-size: 15px !important; }

.tablewrap { overflow-x: auto; }
.solo table { width: 100%; border-collapse: collapse; font-size: 15.5px; margin-bottom: 18px; }
/* wide tables scroll inside their wrapper; a bare table just fits the screen */
.tablewrap table { min-width: 520px; }
.solo th, .solo td { text-align: left; vertical-align: top; padding: 10px 14px 10px 0; border-bottom: 1px solid var(--line); }
.solo th { color: var(--muted); font-size: 13.5px; font-weight: 600; }
.solo td:first-child { color: var(--ink); font-weight: 600; }
.solo td.yes, .solo td.no { color: var(--ink); }
.solo td.part { color: var(--muted); }

details.qsec { border-top: 1px solid var(--line); padding-top: 20px; margin-bottom: 8px; }
details.qsec summary { list-style: none; cursor: pointer; }
details.qsec summary::-webkit-details-marker { display: none; }
details.qsec summary h2 { display: inline; margin: 0; font-size: 21px; }
details.qsec[open] summary { margin-bottom: 10px; }
details.qsec:not([open]) { padding-bottom: 18px; }

figure.demo { margin: 26px 0 30px; }
figure.demo .shot { border-radius: 12px; overflow: hidden; border: 1px solid var(--line); background: #000; }
figure.demo video { width: 100%; height: auto; }
figure.demo figcaption { margin-top: 10px; font-size: 15px; color: var(--muted); }

.ownerbar { background: var(--soft); border-radius: 10px; padding: 14px 16px; font-size: 16px !important; }

/* the guides page: every guide newest first, each with its icon and date */
.index { display: grid; margin-top: 16px; }
.entry {
  display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 16px; padding: 20px 0 22px;
  border-top: 1px solid var(--line); color: inherit; text-decoration: none;
}
.entry .ic { width: 36px; height: 36px; display: grid; place-items: center; color: var(--ink); }
.entry .ic img { width: 36px; height: 36px; }
.entry .ic svg { width: 24px; height: 24px; }
.entry b { display: block; color: var(--ink); font-size: 18.5px; font-weight: 650; line-height: 1.35; }
.entry .bl { display: block; margin-top: 4px; color: var(--text); font-size: 16.5px; line-height: 1.55; }
.entry time { display: block; margin-top: 6px; color: var(--muted); font-size: 14px; }
.entry:hover b { text-decoration: underline; text-decoration-color: var(--underline); text-underline-offset: 3px; }
.tag {
  display: inline-block; margin-left: 8px; padding: 0 6px; border-radius: 5px; border: 1px solid var(--new-line);
  color: var(--new-ink); font-style: normal; font-size: 11.5px; font-weight: 650; line-height: 18px; vertical-align: 2px;
}

/* ── the homepage ────────────────────────────────────────────────── */
.hero { display: grid; gap: 40px; padding-top: 28px; padding-bottom: 88px; }
.hero h1 {
  color: var(--ink); line-height: 1.04; letter-spacing: -.034em; font-weight: 700;
  /* each sentence is ~8.7em wide in SF; 9.3 leaves room for wider fonts */
  font-size: min(58px, calc((100vw - 40px) / 9.3));
}
.hero h1 span { display: block; }
.hero .lede { margin-top: 22px; max-width: 30em; font-size: 19px; line-height: 1.55; text-wrap: pretty; }
.hero .cta { margin-top: 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.hero .cta > a:not(.btn) { font-size: 16px; }
.hero .terms { margin-top: 14px; font-size: 15px; color: var(--muted); }
@media (max-width: 560px) { .hero .cta .btn { flex: 1 1 100%; } }
@media (max-width: 1099px) { .hero .shot { max-width: 620px; } }
@media (min-width: 1100px) {
  .hero {
    grid-template-columns: minmax(0, 1fr) 540px; grid-template-areas: "copy shot" "works shot";
    grid-template-rows: auto 1fr; column-gap: 56px; row-gap: 0; align-items: start; padding-top: 64px; padding-bottom: 104px;
  }
  .hero .copy { grid-area: copy; }
  .hero .shot { grid-area: shot; }
  .hero .works { grid-area: works; margin-top: 34px; }
  .hero h1 { font-size: min(56px, calc((min(100vw, 1160px) - 660px) / 9.3)); }
  .hero .pop-row { justify-content: flex-end; padding-right: 30px; }
  .hero .pop { --z: 1.1; }
}

.works { padding-top: 18px; border-top: 1px solid var(--line); }
.works p { font-size: 14.5px; color: var(--muted); }
.works ul { margin-top: 16px; list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px 6px; }
.works a {
  display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center;
  color: var(--text); text-decoration: none; font-size: 13.5px; font-weight: 550; white-space: nowrap;
}
.works a:hover { color: var(--ink); }
.works svg { width: 22px; height: 22px; }
@media (max-width: 420px) { .works a { font-size: 12px; } }

.shot { margin: 0; }
.shot figcaption { margin-top: 12px; font-size: 14px; line-height: 1.5; color: var(--muted); }

/* sections: a hairline between each, and one band for the diagram */
.block { border-top: 1px solid var(--line); padding-top: 80px; padding-bottom: 88px; }
@media (min-width: 900px) { .block { padding-top: 104px; padding-bottom: 112px; } }
.band { background: var(--soft); }
.block h2 { color: var(--ink); font-size: clamp(28px, 3.4vw, 40px); line-height: 1.12; letter-spacing: -.026em; font-weight: 700; text-wrap: balance; }
.block .intro { margin-top: 14px; max-width: 38em; font-size: 18.5px; line-height: 1.6; text-wrap: pretty; }

.cases { margin-top: 34px; display: grid; column-gap: 48px; }
@media (min-width: 860px) { .cases { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.case {
  display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 16px; padding: 22px 0 24px;
  border-top: 1px solid var(--line); color: inherit; text-decoration: none;
}
.case .ic { width: 40px; height: 40px; display: grid; place-items: center; color: var(--ink); }
.case .ic img { width: 40px; height: 40px; }
.case .ic svg { width: 26px; height: 26px; }
.case b { display: block; color: var(--ink); font-size: 17.5px; font-weight: 650; line-height: 1.35; }
.case span { display: block; margin-top: 4px; font-size: 16px; line-height: 1.55; }
.case em {
  display: inline-block; margin-top: 7px; font-style: normal; font-size: 15px; color: var(--ink);
  text-decoration: underline; text-decoration-color: var(--underline); text-underline-offset: 3px;
}
.case:hover em { text-decoration-color: currentColor; }
.viewall-row { margin-top: 30px; }
.viewall {
  display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 18px;
  border-radius: 10px; border: 1px solid var(--line); background: var(--card);
  color: var(--ink); text-decoration: none; font-weight: 600; font-size: 15.5px;
}
.viewall::after { content: "→"; transition: transform .15s; }
.viewall:hover { border-color: var(--underline); }
.viewall:hover::after { transform: translateX(2px); }

/* how it works: your apps, VPNonly in the middle, two ways out */
.flowchart {
  --fc-dir: row;
  position: relative; margin-top: 40px; padding: 40px 36px;
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; column-gap: 88px;
  border-radius: 20px; border: 1px solid var(--line);
  background-color: var(--card);
  background-image: radial-gradient(var(--dot) 1px, transparent 1.3px); background-size: 18px 18px; background-position: 9px 9px;
}
.wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 0; }
.wire { fill: none; stroke: var(--underline); stroke-width: 1.5; }
.wire.vpn { stroke: var(--mac-green); stroke-width: 2; stroke-opacity: .75; }
.pulse { fill: var(--muted); }
.pulse.vpn { fill: var(--mac-green); }
.fc-col { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 12px; }
.fc-apps { align-items: flex-start; }
.fc-mid { align-items: center; }
.fc-out { align-items: flex-end; gap: 76px; }
.fc-app {
  display: flex; align-items: center; gap: 10px; min-width: 220px; padding: 8px 12px 8px 8px;
  border-radius: 12px; background: var(--bg); border: 1px solid var(--line);
  color: var(--ink); font-size: 15px; font-weight: 600;
}
.fc-app img { width: 28px; height: 28px; flex: none; }
.fc-app span { flex: 1; }
.fc-app.on { border-color: rgba(40, 205, 65, .6); box-shadow: 0 0 0 3px rgba(40, 205, 65, .13); }
.fc-hub {
  display: grid; justify-items: center; gap: 3px; padding: 20px 24px 18px; text-align: center;
  border-radius: 20px; background: var(--bg); border: 1px solid var(--line);
  box-shadow: 0 0 0 6px var(--card), 0 18px 44px -18px rgba(40, 205, 65, .55);
}
.fc-hub img { width: 60px; height: 60px; margin-bottom: 6px; }
.fc-hub b { color: var(--ink); font-size: 16.5px; }
.fc-hub span { font-size: 13px; color: var(--muted); }
.fc-dest {
  display: grid; gap: 2px; min-width: 230px; padding: 12px 16px;
  border-radius: 12px; background: var(--bg); border: 1px solid var(--line);
}
.fc-dest.vpn { border-color: rgba(40, 205, 65, .6); box-shadow: 0 0 0 3px rgba(40, 205, 65, .13); }
.fc-k { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--muted); }
.fc-k::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--muted); }
.fc-dest.vpn .fc-k::before { background: var(--mac-green); box-shadow: 0 0 6px rgba(40, 205, 65, .8); }
.fc-dest b { color: var(--ink); font-size: 16px; }
.fc-ip { font: 12.5px var(--mono); color: var(--muted); }
@media (max-width: 859px) {
  .flowchart { --fc-dir: column; grid-template-columns: minmax(0, 1fr); row-gap: 64px; padding: 28px 16px; }
  .fc-apps { flex-direction: row; justify-content: space-between; align-items: center; }
  .fc-app { min-width: 0; padding: 6px; }
  .fc-app span, .fc-app .sw { display: none; }
  .fc-out { flex-direction: row; align-items: stretch; gap: 12px; }
  .fc-dest { min-width: 0; flex: 1; padding: 10px 12px; }
  .fc-dest b { font-size: 14.5px; }
  .fc-k { font-size: 11.5px; }
}

.steps { margin-top: 40px; list-style: none; counter-reset: step; display: grid; gap: 26px; }
@media (min-width: 860px) { .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; } }
.steps li { counter-increment: step; font-size: 16px; line-height: 1.6; text-wrap: pretty; }
.steps li::before {
  content: counter(step); display: grid; place-items: center; width: 26px; height: 26px; margin-bottom: 12px;
  border-radius: 50%; border: 1px solid var(--underline); color: var(--ink); font-size: 13px; font-weight: 650;
}
.steps b { display: block; margin-bottom: 4px; color: var(--ink); font-size: 17px; font-weight: 650; }
.more { margin-top: 30px; font-size: 16px; }

/* the maker: one small card that rises, straightens and settles in the
   middle as it scrolls into view */
.note-card {
  max-width: 440px; margin: 0 auto; padding: 34px 30px 28px; text-align: center;
  border-radius: 22px; background: var(--card); border: 1px solid var(--line);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 30px 60px -30px rgba(30, 24, 60, .3);
}
@media (prefers-color-scheme: dark) { .note-card { box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .8); } }
.note-card .avatar { width: 64px; height: 64px; margin: 0 auto 16px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px var(--card), 0 0 0 4px var(--line); }
.note-card h2 { font-size: 21px; font-weight: 650; letter-spacing: -.012em; }
.note-card p { margin-top: 10px; font-size: 16.5px; line-height: 1.6; color: var(--text); text-wrap: pretty; }
.note-links { margin-top: 20px; display: flex; justify-content: center; gap: 10px; }
.note-links a {
  width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%;
  border: 1px solid var(--line); background: var(--bg); color: var(--text); text-decoration: none;
}
.note-links a:hover { color: var(--ink); border-color: var(--underline); }
.note-links svg { width: 15px; height: 15px; }
@keyframes card-in { 0% { opacity: 0; transform: translateY(56px) scale(.94) rotate(-2deg); } 45% { opacity: 1; } 100% { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .note-card { animation: card-in linear both; animation-timeline: view(); animation-range: entry 5% cover 42%; }
  }
  @supports not (animation-timeline: view()) {
    .js .note-card { opacity: 0; transform: translateY(40px) scale(.95) rotate(-2deg); transition: opacity .7s ease, transform .9s cubic-bezier(.2, .8, .2, 1); }
    .js .note-card.in { opacity: 1; transform: none; }
  }
}

.duo { display: grid; gap: 64px; }
@media (min-width: 900px) { .duo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; } }
.limits { margin-top: 20px; padding-left: 20px; }
.limits li { margin-bottom: 12px; padding-left: 4px; font-size: 16.5px; line-height: 1.6; text-wrap: pretty; }
.limits li::marker { color: var(--muted); }
.qa { margin-top: 20px; }
.qa dt { margin-top: 18px; color: var(--ink); font-weight: 650; font-size: 17px; }
.qa dt:first-child { margin-top: 0; }
.qa dd { margin-top: 4px; font-size: 16.5px; line-height: 1.6; text-wrap: pretty; }

/* the last ask: one icon, one line, one button */
.end { display: grid; justify-items: center; text-align: center; }
.end img { width: 72px; height: 72px; margin-bottom: 20px; }
.end h2 { font-size: clamp(30px, 3.8vw, 46px); }
.end .sub { margin-top: 12px; font-size: 18px; color: var(--text); }
.end .btn { margin-top: 28px; }
.end .small { margin-top: 18px; font-size: 14.5px; color: var(--muted); }
.end .small a { color: var(--text); }

/* ── the desktop and the popup replica ───────────────────────────── */
.desk {
  position: relative; overflow: hidden; isolation: isolate;
  border-radius: 16px; box-shadow: var(--desk-shadow);
  background: linear-gradient(135deg, var(--wv0) 0%, var(--wv1) 55%, var(--wv2) 100%);
  padding-bottom: 28px;
}
/* Two colour bands, each twice as wide as the frame and repeating exactly
   once, slide in opposite directions and bob gently; the glow behind them
   drifts. Only whole layers move, so nothing is re-blurred each frame. */
.wall-waves { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.wv-glow {
  position: absolute; top: -20%; right: -24%; width: 100%; height: 66%; border-radius: 50%;
  background: radial-gradient(closest-side, var(--wglow), transparent);
  will-change: transform; animation: wv-glow 19s ease-in-out infinite alternate;
}
.wv-bob { position: absolute; inset: 0; will-change: transform; animation: wv-bob 10s ease-in-out infinite alternate; }
.wv-bob-2 { animation-duration: 13s; animation-delay: -5s; }
.wv-layer { position: absolute; top: 0; left: 0; width: 200%; height: 100%; will-change: transform; animation: wv-slide 34s linear infinite; }
.wv-2 { animation-duration: 48s; animation-direction: reverse; }
.wv-layer svg { width: 100%; height: 100%; }
.wv-sheen { fill: none; stroke: var(--wsheen); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.wv-2 .wv-sheen { stroke-width: 1.2; opacity: .7; }
@keyframes wv-slide { to { transform: translateX(-50%); } }
@keyframes wv-bob { from { transform: translateY(-2.2%); } to { transform: translateY(2.2%); } }
@keyframes wv-glow { from { transform: translate(0, 0) scale(1); } to { transform: translate(-9%, 7%) scale(1.14); } }
.desk.still .wall-waves * { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .wall-waves * { animation: none; } }
.grain {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: var(--grain); background-size: 180px 180px; opacity: var(--grain-o); mix-blend-mode: overlay;
}
.desk > .menubar, .desk > .pop-row { position: relative; z-index: 1; }
.menubar {
  display: flex; justify-content: flex-end; align-items: center; gap: 3px;
  height: 28px; padding: 0 10px; background: var(--mb-bg); color: var(--mb-ink);
  -webkit-backdrop-filter: blur(20px) saturate(1.4); backdrop-filter: blur(20px) saturate(1.4);
  font-size: 13px; font-weight: 500;
}
.mb { display: grid; place-items: center; height: 22px; min-width: 26px; padding: 0 5px; border-radius: 6px; }
.mb.hi { background: var(--mb-hi); }
.mb svg { height: 15px; width: auto; }
.mb .half { opacity: 0; transition: opacity .3s; }
.desk[data-shield="on"] .mb .half { opacity: 1; }
.mb-time { padding: 0 6px 0 8px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pop-row { display: flex; justify-content: center; padding: 12px 12px 0; }
.pop-row .pop { flex: none; }

.cursor {
  position: absolute; left: 0; top: 0; z-index: 3; pointer-events: none;
  transform: translate(var(--x, 0px), var(--y, 0px));
  transition: transform .85s cubic-bezier(.45, .05, .2, 1), opacity .35s; opacity: 0;
}
.cursor.on { opacity: 1; }
.cursor svg { width: 19px; height: 25px; transition: transform .12s; transform-origin: 3px 3px; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .28)); }
.cursor.down svg { transform: scale(.84); }

.pop {
  width: 360px; height: 542px; /* its tallest moment, so it never resizes mid-demo */ zoom: var(--z, 1); overflow: hidden; text-align: left; cursor: default;
  display: flex; flex-direction: column;
  border-radius: 12px; background: var(--pop-bg); box-shadow: var(--shadow-pop);
  -webkit-backdrop-filter: blur(30px) saturate(1.8); backdrop-filter: blur(30px) saturate(1.8);
  color: var(--pop-ink); font: 400 13px/1.25 var(--sans); letter-spacing: 0;
  -webkit-user-select: none; user-select: none;
}
/* phones: the frame is the screen minus 64px, and the popup is 360 wide */
@media (max-width: 440px) { .pop { --z: .9; } }
@media (max-width: 384px) { .pop { --z: .85; } }
@media (max-width: 364px) { .pop { --z: .8; } }
@media (max-width: 344px) { .pop { --z: .74; } }
@media (max-width: 329px) { .pop { --z: .7; } }

.p-status, .p-div, .p-search, .p-count, .p-card-wrap, .p-foot { flex: none; }
.p-status { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--pop-fill); }
.p-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: rgba(128, 128, 128, .4); transition: background .3s, box-shadow .3s; }
.pop[data-up] .p-dot { background: var(--mac-green); box-shadow: 0 0 4px rgba(40, 205, 65, .6); }
.p-st { flex: 1; min-width: 0; min-height: 56px; display: flex; flex-direction: column; justify-content: center; gap: 1px; }
.p-label { font-size: 10.5px; color: var(--pop-2); }
.p-primary { font-size: 12.5px; font-weight: 600; }
.p-live { font-size: 10px; color: var(--pop-2); }
.p-live:empty { display: none; }
.p-btn {
  flex: none; font-size: 11px; line-height: 1; padding: 4px 9px; border-radius: 5px;
  background: var(--pop-btn); box-shadow: 0 0 0 .5px var(--pop-btn-edge), 0 1px 1px rgba(0, 0, 0, .06);
  white-space: nowrap; transition: opacity .2s;
}
.pop[data-busy] .p-btn, .pop[data-busy] .p-right { opacity: .45; }
.p-div { height: 1px; background: var(--pop-line); }
.p-search {
  display: flex; align-items: center; gap: 6px; margin: 10px 12px 6px; padding: 7px 10px;
  border-radius: 7px; background: var(--pop-field); font-size: 12.5px; color: var(--pop-2);
}
.p-search svg, .p-sel svg { width: 11px; height: 11px; }
.p-count { display: flex; justify-content: space-between; align-items: center; padding: 0 16px 4px; font-size: 10.5px; font-weight: 500; color: var(--pop-2); }
.p-sel { display: inline-flex; align-items: center; gap: 4px; }
.p-right.is-link { color: var(--mac-blue); }
.p-card-wrap { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .4s ease; }
.pop:not([data-card]) .p-card-wrap { grid-template-rows: 0fr; }
.pop.measure .p-card-wrap { transition: none; }
.p-card-clip { min-height: 0; overflow: hidden; }
.p-card { display: flex; align-items: flex-start; gap: 8px; margin: 0 12px 8px; padding: 9px; border-radius: 7px; background: rgba(128, 128, 128, .1); }
.p-ic { flex: none; width: 12px; height: 12px; margin-top: 1px; }
.p-ic.ok { color: var(--mac-green); }
.p-card-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.p-card-h { font-size: 11px; font-weight: 500; }
.p-grid { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; row-gap: 1px; font: 10px/1.3 var(--mono); color: var(--pop-2); }
.p-x { flex: none; width: 9px; height: 9px; margin-top: 2px; color: var(--pop-2); }
.p-list { flex: 1 1 292px; min-height: 0; overflow: hidden; padding: 4px 0; }
.p-sec { font-size: 9.5px; font-weight: 600; color: var(--pop-2); padding: 8px 16px 3px; }
.p-row { display: flex; align-items: center; gap: 10px; padding: 5px 14px; }
.p-row img { flex: none; width: 28px; height: 28px; }
.p-meta { flex: 1; min-width: 0; min-height: 30px; display: flex; flex-direction: column; justify-content: center; gap: 1px; }
.p-name { font-size: 13px; font-weight: 500; }
.p-sub { font-size: 10.5px; color: var(--pop-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-sub:empty { display: none; }
.p-sub.ok { color: var(--mac-green); }
.sw { position: relative; flex: none; width: 30px; height: 17px; border-radius: 99px; background: var(--sw-off); transition: background .25s; }
.sw::after {
  content: ""; position: absolute; top: 1.5px; left: 1.5px; width: 14px; height: 14px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .25), 0 0 0 .5px rgba(0, 0, 0, .05);
  transition: transform .25s cubic-bezier(.3, .7, .4, 1);
}
.sw.on { background: var(--mac-blue); }
.sw.on::after { transform: translateX(13px); }
.p-foot { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--pop-fill); font-size: 11.5px; }
.p-menu { display: inline-flex; align-items: center; gap: 5px; }
.p-menu svg { width: 12px; height: 12px; }
.p-menu .chev { width: 7px; height: 6px; margin-left: 1px; opacity: .7; }
.p-tools { margin-left: auto; display: flex; gap: 12px; opacity: .8; }
.p-tools svg { width: 13px; height: 13px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .cursor, .pulse { display: none; }
  .sw, .sw::after, .p-dot, .p-card-wrap, .mb .half { transition: none; }
}