/* WinPulse landing page: a quiet page with one demo viewer. Nothing moves on its own, nothing
   overlaps, and the only layered things are the viewer's two render layers inside their own stage.
   The demo brings its own styles (demo/*.css); this file is the page around it. */

@font-face { font-family: "WinPulse Display"; src: url("fonts/InterWP-Display-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }

:root {
  --bg: #ffffff;
  --surface: #f5f5f7;
  --surface-hi: #ebebef;
  --raised: #ffffff;
  --ink: #1c1c1e;
  --ink-2: #6e6e73;
  --hair: #e5e5ea;
  /* WinPulse green, the app's one accent (theme.slint brand, on-brand, brand-text). */
  --action: #0a7f3f;
  --action-hover: #086c35;
  --on-action: #ffffff;
  --link: #0a7a3b;
  --focus: #0a7f3f;
  --shadow-win: 0 0 0 1px rgb(0 0 0 / 0.08), 0 30px 80px -20px rgb(15 30 70 / 0.28);
  /* The Overview is everything, so it takes the text's colour; Sound is coral (round 10). */
  --m-overview: #1c1c1e; --m-cpu: #3278cc; --m-memory: #8176d0; --m-disk: #b37700;
  --m-network: #148d63; --m-gpu: #c04874; --m-battery: #299632; --m-sound: #d0533a;
  /* The drawn Windows parts in "Also in the box" (the demo's own values, demo/tokens.css). */
  --os-taskbar: #eeeeee; --os-taskbar-edge: rgb(0 0 0 / 0.08); --os-ink: #1c1c1c; --os-ink-2: rgb(0 0 0 / 0.62);
  --os-toast: #f9f9f9; --os-toast-border: rgb(0 0 0 / 0.08); --os-button: rgb(255 255 255 / 0.7); --os-button-border: rgb(0 0 0 / 0.06);
  --os-shadow: 0 14px 28px rgb(0 0 0 / 0.12), 0 0 8px rgb(0 0 0 / 0.08);
  --font-text: "Inter WP Text", "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  --font-display: "WinPulse Display", "Inter WP Text", "Segoe UI Variable Display", system-ui, sans-serif;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  /* The room above and below a section: a share of the screen's height, so a short laptop screen
     never shows one section floating in a band of nothing (the owner, 2026-09-27). */
  --sec-y: clamp(56px, 9svh, 112px);
  --nav-h: 64px;
  /* The hero's room above and below: less on short screens, so the whole first screen fits. */
  --hero-pad: clamp(20px, 5svh, 96px);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #131315; --surface: #1c1c1f; --surface-hi: #27272b; --raised: #2c2c30;
    --ink: #f5f5f7; --ink-2: #a1a1a6; --hair: rgb(255 255 255 / 0.10);
    --action: #10e36c; --action-hover: #0dc95f; --on-action: #04140a; --link: #10e36c; --focus: #10e36c;
    --shadow-win: 0 0 0 1px rgb(255 255 255 / 0.10), 0 30px 80px -20px rgb(0 0 0 / 0.70);
    --m-overview: #f2f2f4; --m-cpu: #4a93ea; --m-memory: #9c91ee; --m-disk: #d39417;
    --m-network: #22ae7d; --m-gpu: #e0628f; --m-battery: #3cb445; --m-sound: #f2775b;
    --os-taskbar: #1c1c1c; --os-taskbar-edge: rgb(255 255 255 / 0.08); --os-ink: #ffffff; --os-ink-2: rgb(255 255 255 / 0.79);
    --os-toast: #2c2c2c; --os-toast-border: rgb(255 255 255 / 0.08); --os-button: rgb(255 255 255 / 0.06); --os-button-border: rgb(255 255 255 / 0.09);
    --os-shadow: 0 14px 28px rgb(0 0 0 / 0.28), 0 0 8px rgb(0 0 0 / 0.20);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #131315; --surface: #1c1c1f; --surface-hi: #27272b; --raised: #2c2c30;
  --ink: #f5f5f7; --ink-2: #a1a1a6; --hair: rgb(255 255 255 / 0.10);
  --action: #10e36c; --action-hover: #0dc95f; --on-action: #04140a; --link: #10e36c; --focus: #10e36c;
  --shadow-win: 0 0 0 1px rgb(255 255 255 / 0.10), 0 30px 80px -20px rgb(0 0 0 / 0.70);
  --m-overview: #f2f2f4; --m-cpu: #4a93ea; --m-memory: #9c91ee; --m-disk: #d39417;
  --m-network: #22ae7d; --m-gpu: #e0628f; --m-battery: #3cb445; --m-sound: #f2775b;
  --os-taskbar: #1c1c1c; --os-taskbar-edge: rgb(255 255 255 / 0.08); --os-ink: #ffffff; --os-ink-2: rgb(255 255 255 / 0.79);
  --os-toast: #2c2c2c; --os-toast-border: rgb(255 255 255 / 0.08); --os-button: rgb(255 255 255 / 0.06); --os-button-border: rgb(255 255 255 / 0.09);
  --os-shadow: 0 14px 28px rgb(0 0 0 / 0.28), 0 0 8px rgb(0 0 0 / 0.20);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0; background: var(--bg); color: var(--ink-2);
  font: 400 17px/1.6 var(--font-text); font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
button { font: inherit; }
img, svg { display: block; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 6px; }

/* The icon definitions take no room and sit in the flow. */
.pg-defs { width: 0; height: 0; overflow: hidden; }
.skip { display: block; height: 0; overflow: hidden; color: var(--ink); font-weight: 600; font-size: 15px; }
.skip:focus { height: auto; padding: 10px 24px; }

.wrap { max-width: 1120px; margin-inline: auto; padding-inline: 24px; }
/* The middle of the page takes the Tour's width, so a big screen is not two thirds margin. */
.wrap-wide { max-width: 1320px; padding-inline: clamp(24px, 4.5vw, 64px); }
.center { text-align: center; }
.nowrap { white-space: nowrap; }

/* ---- type ---- */
h1 {
  font: 600 56px/1.05 var(--font-display); letter-spacing: -0.03em; color: var(--ink);
  max-width: 12ch; text-wrap: balance;
}
h2 {
  font: 600 40px/1.1 var(--font-display); letter-spacing: -0.025em; color: var(--ink);
  font-size: clamp(40px, 1.25vw + 24px, 52px);
  text-wrap: balance;
}
h3 { font: 600 19px/1.3 var(--font-text); letter-spacing: -0.01em; color: var(--ink); }
.lead { font-size: 20px; line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }
.body { font-size: 17px; line-height: 1.6; color: var(--ink-2); text-wrap: pretty; }
.small { font-size: 14px; line-height: 1.55; color: var(--ink-2); }
.link { color: var(--link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
@media (hover: hover) { .link:hover { text-decoration-thickness: 2px; } }

/* ---- buttons ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; padding: 0 20px; border: 0; border-radius: 999px; cursor: pointer;
  font: 600 15px/1 var(--font-text); text-decoration: none; white-space: nowrap;
  transition: background-color 150ms ease-out, color 150ms ease-out, transform 100ms ease-out;
}
.btn:active { transform: scale(0.985); }
.btn, .tg-b, .faq summary { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.btn .i { width: 18px; height: 18px; flex: none; }
.btn-primary { background: var(--action); color: var(--on-action); }
.btn-quiet { background: var(--surface); color: var(--ink); }
@media (hover: hover) {
  .btn-primary:hover { background: var(--action-hover); }
  .btn-quiet:hover { background: var(--surface-hi); }
}
.btn-small { height: 36px; padding: 0 18px; }
.btn-big { height: 48px; padding: 0 26px; font-size: 16px; }
.btn-band { height: 52px; padding: 0 32px; }
.for-phone { display: none; }
.only-narrow { display: none; }

/* ---- nav: part of the page at the top, a floating bar once the page scrolls (the owner,
   2026-09-29, after emdashcms.com). top.js sets data-floating from a sentinel; the bar eases
   into place with the page's ease-out, and without movement under reduced motion. ---- */
:root { --bar-drop: 10px; }
html { scroll-padding-top: calc(var(--nav-h) + var(--bar-drop) + 12px); }
body { padding-top: var(--nav-h); }
.top-sentinel { position: absolute; top: 0; left: 0; width: 1px; height: 24px; pointer-events: none; }
.top { position: fixed; top: 0; left: 0; right: 0; z-index: 50; pointer-events: none; }
.top-row {
  display: flex; align-items: center; justify-content: space-between; height: var(--nav-h);
  pointer-events: auto; border: 1px solid transparent; border-radius: 0; background-color: transparent;
  transition-property: max-width, padding, transform, border-radius, background-color, border-color, box-shadow, backdrop-filter;
  transition-duration: 250ms; transition-timing-function: var(--ease-out);
}
.top[data-floating] .top-row {
  max-width: min(880px, calc(100% - 24px)); padding-inline: 20px 12px; border-radius: 18px;
  transform: translateY(var(--bar-drop));
  background-color: color-mix(in srgb, var(--bg) 78%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(1.6); backdrop-filter: blur(16px) saturate(1.6);
  border-color: var(--hair); box-shadow: 0 12px 32px -20px rgb(0 0 0 / 0.35);
}
@media (prefers-reduced-motion: reduce) {
  .top-row { transition-property: background-color, border-color, box-shadow; transition-duration: 150ms; }
}
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font-weight: 600; font-size: 17px; letter-spacing: -0.01em; }
.brand-mark { width: 28px; height: 28px; }
.top-nav { display: flex; align-items: center; gap: 32px; }
.top-link { font-size: 15px; font-weight: 500; color: var(--ink-2); text-decoration: none; transition: color 150ms ease-out; }
@media (hover: hover) { .top-link:hover { color: var(--ink); } }
.top-get { margin-left: -8px; }

/* ---- hero ---- */
.hero { padding-block: var(--hero-pad); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 80px; align-items: center; }
.hero-copy .lead { margin-top: 28px; max-width: 30rem; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 40px; }
.cta-row.center { justify-content: center; }
.hero-copy .small { margin-top: 16px; }
.hero-copy .small + .dl-status { margin-top: 4px; }
.dl-status { min-height: 1.55em; }
.hero-shot { display: flex; justify-content: center; }
.hero-shot .wp-app, .table-shot .wp-app { pointer-events: none; cursor: default; }
/* The mini window as drawn is 384 x 584 (the window and the app's 12 px edge). Its box takes what
   the first screen has left under the nav, never more than that natural size, and app.js scales
   the drawing to the box, so the whole window shows, uncropped, at any laptop height. */
.hero-fit {
  position: relative; height: 584px;
  height: min(584px, max(300px, calc(100svh - var(--nav-h) - 2 * var(--hero-pad))));
  aspect-ratio: 384 / 584;
}
.mini-still { position: absolute; left: 0; top: 0; width: 384px; height: 584px; transform-origin: 0 0; }
/* Let the window's shadow fall past its drawing box (the box would cut it off square). */
.mini-still.wp-stage { overflow: visible; }

/* The demo's drawn panel wears the page's one product shadow. */
.hero-shot .wp-panel-shadow, .viewer .wp-panel-shadow { box-shadow: var(--shadow-win); }

/* ---- sections ---- */
.sec { padding-block: var(--sec-y); }
.faq details { scroll-margin-top: 24px; }
.sec-head .lead { margin-top: 20px; }
.sec-head.center h2 { max-width: 20ch; margin-inline: auto; }
.sec-head.center .lead { max-width: 40rem; margin-inline: auto; }

/* ---- the viewer ---- */
/* The Tour fits one screen from its top: a smaller top on short screens, the heading on one line
   where it fits, and app.js scales the window to the height left (never past its own size). */
.tour { padding-top: clamp(32px, 6svh, 128px); }
@media (min-width: 600px) { .tour .sec-head h2 { max-width: none; } }
.viewer { margin-top: 32px; }

.tabgrid { display: none; }

.stage { position: relative; margin-top: 16px; height: 640px; overflow: hidden; }
.layer {
  position: absolute; inset: 0; opacity: 0; visibility: hidden;
  transition: opacity 180ms var(--ease-out), visibility 0s linear 180ms;
}
.layer.is-on { opacity: 1; visibility: visible; transition: opacity 180ms var(--ease-out), visibility 0s; }
/* The full window's top view: app.js sets this layer's height so it ends just under the first
   screenful (under the Overview's six cards), with a short fade into the page. */
.layer-full {
  bottom: auto; padding: 12px 16px 0;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 24px), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 24px), transparent);
}
.full-box { height: 100%; margin-inline: auto; }
.full-host { transform-origin: 0 0; }
.full-host .wp-win { box-shadow: var(--shadow-win); }
.full-host .wp-win::after, .table-host .wp-win::after { display: none; }
.full-host .wp-win-body, .table-host .wp-win-body { overflow: hidden !important; }

.caption {
  max-width: 56ch; min-height: 3.1em; margin: 20px auto 0; text-align: center;
  font-size: 15px; line-height: 1.55; color: var(--ink-2); text-wrap: balance;
}
.caption strong { color: var(--ink); font-weight: 600; }
.caption-note { display: none; }

/* The Tour off phones (the owner, 2026-09-27: "its a live demo so it needs to be a lil bigger ...
   just the title and small subheading and then most of the space should be used by the demo"):
   the title and its one line centred above the demo, which takes the rest of the width and
   height; only the full window ("only keep main window here, no need for mini version") ("title on extreme left, switcher in extreme right, looks odd"). No
   per-tab caption here. */
.tour-wrap { max-width: 1320px; }
.tour { padding-top: clamp(20px, 4svh, 96px); }
.tour .sec-head { text-align: center; }
/* A smaller heading on short screens leaves the demo more of the height. */
.tour .sec-head h2 { margin-inline: auto; max-width: none; font-size: clamp(28px, 5svh, 48px); }
.tour .sec-head .lead { margin: 8px auto 0; max-width: none; font-size: clamp(16px, 2.6svh, 20px); }
.tour .viewer { margin-top: clamp(12px, 2.2svh, 20px); }
.tour .stage { margin-top: clamp(10px, 2svh, 20px); }
.tour .caption, .tour .caption-note { display: none; }

/* ---- split sections ---- */
.split { display: grid; grid-template-columns: 5fr 6fr; column-gap: 80px; align-items: center; }
.split-4-7, .split-wide { grid-template-columns: 4fr 7fr; }
.split-top { align-items: start; }
.split-copy h2 { max-width: 16ch; }
.split-copy .body { margin-top: 20px; max-width: 32rem; }
.split-copy .lead, .split-copy .small { margin-top: 20px; }
/* "One app, one row": the copy and a bigger crop of the list, which app.js scales to its column. */
.split-row { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); column-gap: clamp(40px, 4vw, 72px); }
.split-row .body { font-size: clamp(17px, 0.3vw + 13.5px, 19px); max-width: 30rem; }
/* A link that wraps has a box spanning both lines, over its neighbour: keep each on one line. */
.split-copy .small .link { white-space: nowrap; }

.table-shot { border-radius: 12px; box-shadow: var(--shadow-win); overflow: hidden; }
.table-host { transform-origin: 0 0; }
.table-host .wp-win { border-radius: 0; box-shadow: none; }
.table-host .wp-win-title, .table-host .wp-win-toolbar, .table-host .wp-win-status,
.table-host .wp-mp-top, .table-host .wp-tiles, .table-host .wp-sortby, .table-host .wp-t-status { display: none !important; }
.table-host .wp-win-body { padding: 0 !important; }
.table-host .wp-page { padding: 0 !important; gap: 0 !important; }
.table-host .wp-table { border-radius: 0; margin: 0; }
.table-host .wp-win-body { scrollbar-gutter: auto; }
/* Fixed columns just wide enough for their numbers, so the name keeps the room (app.js TABLE_W). */
.table-host .wp-th, .table-host .wp-tr { grid-template-columns: minmax(0, 1fr) 128px 92px 84px; }
.table-host .wp-quit { display: none; }

/* ---- also in the box ---- */
/* Three cards, each a small still picture of the thing it names (drawn here from the demo's own
   Windows parts and values) over the title and its sentence. The cards share their rows, so the
   pictures and the text line up across. Nothing in them moves. */
.cards3 {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto auto;
  gap: 24px; margin-top: clamp(32px, 6svh, 56px);
}
.card {
  display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: 0;
  border-radius: 20px; background: var(--surface); overflow: hidden;
}
.card-art {
  display: flex; align-items: center; justify-content: center; min-height: clamp(184px, 30svh, 232px); padding: 24px;
  background: linear-gradient(170deg, color-mix(in srgb, var(--acc) 16%, var(--surface)), color-mix(in srgb, var(--acc) 6%, var(--surface)));
  color: var(--os-ink);
}
.card-text { padding: 24px 28px 30px; }
.card h3 { display: flex; align-items: flex-start; gap: 10px; font-size: 20px; }
.g-i { width: 22px; height: 22px; flex: none; margin-top: 2px; fill: currentColor; color: var(--acc); }
.card-text p { margin-top: 10px; font-size: 16px; line-height: 1.6; }

/* It remembers: a week of CPU, the busiest day in full colour. */
.art-hist {
  width: min(100%, 300px); padding: 16px 18px 12px; border-radius: 14px;
  background: var(--raised); box-shadow: var(--os-shadow); color: var(--ink);
}
.art-hist-h { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; line-height: 16px; color: var(--ink-2); }
.art-hist-k { font-weight: 600; color: var(--ink); }
.art-bars { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; align-items: end; height: 84px; margin-top: 14px; }
.art-bars i { display: block; height: 40%; border-radius: 4px 4px 2px 2px; background: color-mix(in srgb, var(--acc) 38%, var(--raised)); }
.art-bars i:nth-child(1) { height: 34%; }
.art-bars i:nth-child(2) { height: 48%; }
.art-bars i:nth-child(3) { height: 40%; }
.art-bars i:nth-child(4) { height: 100%; background: var(--acc); }
.art-bars i:nth-child(5) { height: 52%; }
.art-bars i:nth-child(6) { height: 22%; }
.art-bars i:nth-child(7) { height: 30%; }
.art-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; margin-top: 8px; font-size: 11px; line-height: 14px; text-align: center; color: var(--ink-2); }

/* It taps you on the shoulder: the Windows notification the app really sends (toast.rs). */
.art-toast {
  width: min(100%, 320px); border-radius: 8px; overflow: hidden;
  background: var(--os-toast); border: 1px solid var(--os-toast-border); box-shadow: var(--os-shadow);
  font-size: 13px; line-height: 18px; color: var(--os-ink); text-align: left;
}
.art-toast-head { display: flex; align-items: center; gap: 8px; padding: 12px 14px 8px; font-size: 12px; color: var(--os-ink-2); }
.art-toast-mark { width: 16px; height: 16px; flex: none; }
.art-toast-title { padding: 0 14px; font-weight: 600; }
.art-toast-detail { padding: 0 14px; color: var(--os-ink-2); text-wrap: pretty; }
.art-toast-btn {
  margin: 12px 14px 14px; height: 30px; display: flex; align-items: center; justify-content: center;
  border-radius: 4px; background: var(--os-button); border: 1px solid var(--os-button-border);
}

/* A number by the clock: the taskbar's corner, the tray icon showing CPU as a number, its tooltip.
   Kept to the time and two quick icons, so the tooltip fits whole over the number in the narrowest
   card (about 270 px). */
.art-desk { align-items: flex-end; padding: 0; }
.art-taskbar {
  display: flex; align-items: center; justify-content: flex-end; width: 100%; height: 48px; padding-right: 8px;
  background: var(--os-taskbar); box-shadow: inset 0 1px 0 var(--os-taskbar-edge); color: var(--os-ink);
  font-size: 12px; line-height: 16px;
}
.art-tb-i { width: 16px; height: 16px; flex: none; fill: currentColor; }
.art-taskbar > .art-tb-i { margin-inline: 8px; }
.art-tb-num {
  position: relative; display: flex; align-items: center; justify-content: center; width: 34px; height: 40px;
  border-radius: 4px; background: color-mix(in srgb, var(--os-ink) 7%, transparent);
  font: 600 15px/1 var(--font-display); letter-spacing: -0.02em;
}
.art-tip {
  position: absolute; bottom: calc(100% + 16px); left: 50%; transform: translateX(-50%); white-space: nowrap;
  padding: 6px 10px; border-radius: 6px; background: var(--os-toast); border: 1px solid var(--os-toast-border); box-shadow: var(--os-shadow);
  font: 400 12px/16px var(--font-text); letter-spacing: 0; color: var(--os-ink);
}
.art-tb-quick { display: flex; align-items: center; gap: 12px; padding: 0 10px; }
.art-tb-clock { padding: 0 8px 0 4px; white-space: nowrap; }

[data-acc="overview"] { --acc: var(--m-overview); }
[data-acc="cpu"] { --acc: var(--m-cpu); }
[data-acc="memory"] { --acc: var(--m-memory); }
[data-acc="disk"] { --acc: var(--m-disk); }
[data-acc="network"] { --acc: var(--m-network); }
[data-acc="gpu"] { --acc: var(--m-gpu); }
[data-acc="battery"] { --acc: var(--m-battery); }
[data-acc="sound"] { --acc: var(--m-sound); }

/* ---- the numbers ---- */
/* Four big numbers across the width, a hairline between them. */
.facts {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: clamp(32px, 6svh, 56px); text-align: center;
  border-block: 1px solid var(--hair);
}
.facts li { padding: clamp(28px, 5svh, 48px) 16px; }
.facts li + li { border-left: 1px solid var(--hair); }
.fact-n { font: 600 clamp(56px, 4.2vw + 10px, 96px)/1 var(--font-display); letter-spacing: -0.035em; color: var(--ink); font-variant-numeric: tabular-nums; }
.fact-n span { margin-left: 0.12em; font: 400 clamp(20px, 1.2vw + 5px, 30px)/1 var(--font-text); letter-spacing: 0; color: var(--ink-2); }
.fact-l { max-width: 22ch; margin: 16px auto 0; font-size: 16px; line-height: 1.5; text-wrap: balance; }
.facts-note { margin-top: 28px; }

/* ---- no catch ---- */
.promises { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px; row-gap: 32px; }
.promises h3 { font-size: 17px; }
.promises p { margin-top: 6px; font-size: 16px; line-height: 1.6; }

/* ---- download band ---- */
.band { background: var(--surface); padding-block: var(--sec-y); }
.band-inner { max-width: calc(40rem + 48px); text-align: center; }
.band-mark { width: 56px; height: 56px; margin-inline: auto; }
.band h2 { margin-top: 24px; }
.band .lead { margin-top: 16px; }
.band .body.for-phone { margin-top: 12px; }
.band .cta-row { margin-top: 32px; }
.band .cta-row + .small { margin-top: 16px; }
.band .dl-status { margin-top: 4px; }
.warn-h { margin-top: 60px; }
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 16px; }
.steps li { font-size: 15px; line-height: 1.5; }
.step-n { display: block; font: 600 15px/1.5 var(--font-text); color: var(--ink); }
.steps p { margin-top: 4px; }
.steps-after { max-width: 34rem; margin: 24px auto 0; }

/* ---- questions ---- */
.faq { border-top: 1px solid var(--hair); }
.faq details { border-bottom: 1px solid var(--hair); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px 0; cursor: pointer; list-style: none;
  font: 600 17px/1.4 var(--font-text); color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:focus-visible { outline-offset: 4px; }
.chev { width: 16px; height: 16px; flex: none; color: var(--ink-2); }
.faq details[open] .chev { transform: rotate(180deg); }
.faq details p, .faq details ul { max-width: 60ch; font-size: 16px; line-height: 1.6; }
.faq details > p:last-child, .faq details > ul:last-child { padding-bottom: 20px; }
.faq details p + ul, .faq details ul + p { margin-top: 12px; }
.faq details ul { list-style: disc; padding-left: 20px; font-size: 15px; }

/* ---- footer ---- */
.foot { border-top: 1px solid var(--hair); padding-block: 40px; }
.foot-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand-small { font-size: 15px; gap: 8px; }
.brand-small .brand-mark { width: 20px; height: 20px; }
.foot-nav { display: flex; gap: 24px; margin-left: auto; }
.foot-nav a { font-size: 14px; color: var(--ink-2); text-decoration: none; transition: color 150ms ease-out; }
@media (hover: hover) { .foot-nav a:hover { color: var(--ink); } }
.slint picture, .slint img { display: block; width: 106px; height: 48px; }
.foot-fine { margin-top: 24px; }

/* ---- privacy ---- */
.doc-wrap { max-width: calc(680px + 48px); padding-block: 56px 112px; }
.doc h1 { font-size: 40px; max-width: none; }
.doc .updated { margin-top: 40px; font-size: 14px; }
.doc .summary { margin-top: 16px; font-size: 20px; line-height: 1.5; color: var(--ink); }
.doc h2 { margin-top: 40px; font: 600 20px/1.3 var(--font-text); letter-spacing: -0.01em; }
.doc p, .doc ul { margin-top: 12px; font-size: 17px; line-height: 1.6; }
.doc ul { list-style: disc; padding-left: 22px; }
.doc li + li { margin-top: 6px; }
.doc strong { color: var(--ink); font-weight: 600; }
.doc a { color: var(--link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* ---- tablet ---- */
@media (max-width: 959px) {
  :root { --sec-y: clamp(56px, 9svh, 96px); }
  .hero { padding-block: 64px 96px; }
  .hero-grid { grid-template-columns: minmax(0, 1fr); row-gap: 48px; }
  .hero-copy { text-align: center; max-width: 34rem; margin-inline: auto; }
  .hero-copy h1, .hero-copy .lead { margin-inline: auto; }
  .hero-copy .cta-row { justify-content: center; }
  .split, .split-4-7, .split-wide, .split-row { grid-template-columns: minmax(0, 1fr); row-gap: 40px; }
  /* One card a row, the picture beside its words. */
  .cards3 { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; gap: 16px; }
  .card { grid-row: auto; grid-template-rows: none; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
  .card-art { height: 100%; }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); border-block: 0; row-gap: 16px; }
  .facts li { padding: 24px 12px; }
  .facts li + li { border-left: 0; }
}

/* ---- phone: its own layout ---- */
@media (max-width: 599px) {
  :root { --sec-y: 72px; }
  .wrap { padding-inline: 20px; }
  .top-row { height: 56px; }
  body { padding-top: 56px; }
  html { scroll-padding-top: calc(56px + var(--bar-drop) + 12px); }
  .top[data-floating] .top-row { max-width: calc(100% - 16px); padding-inline: 16px 8px; border-radius: 16px; }
  .top-link { display: none; }
  .top-get { margin-left: 0; height: 44px; background: var(--surface); color: var(--ink); }
  .only-wide { display: none; }
  .only-narrow { display: inline; }
  .for-pc { display: none; }
  .for-phone { display: inline-flex; }
  p.for-phone { display: block; }

  h1 { font-size: 36px; }
  h2 { font-size: 30px; }
  h3 { font-size: 18px; }
  .lead { font-size: 18px; }
  .body { font-size: 16px; }

  .hero { padding-block: 40px 0; }
  .tour { padding-top: 56px; }
  .dl-status:empty { display: none; }
  .hero-copy { text-align: left; max-width: none; }
  .hero-copy h1, .hero-copy .lead { margin-inline: 0; }
  .hero-copy .lead { margin-top: 20px; }
  .hero-copy .cta-row { flex-direction: column; margin-top: 32px; }
  .hero-copy .cta-row .btn { width: 100%; }
  /* The mini window under the buttons, whole, as wide as the column allows (never past its own
     384 x 584): the first thing a phone shows is the product (the owner, 2026-09-27). */
  .hero { padding-bottom: 8px; }
  .hero-grid { row-gap: 32px; }
  .hero-fit { width: min(100%, 384px); height: auto; }

  .sec-head.center { text-align: left; }
  .sec-head.center h2, .sec-head.center .lead { margin-inline: 0; }
  .sec-head .lead { margin-top: 16px; font-size: 17px; }

  .split-copy .body { margin-top: 16px; }
  /* Three columns a phone can read whole: the name, CPU as a number, and the process count. */
  .table-host .wp-th, .table-host .wp-tr { grid-template-columns: minmax(0, 1fr) 40px 68px; gap: 8px; padding: 0 12px 0 4px; }
  .table-host .wp-col-mem, .table-host .wp-td-b, .table-host .wp-th-i, .table-host .wp-chev { display: none !important; }
  .table-host .wp-th-name { padding-left: 8px; }
  .table-host .wp-td-name { padding-left: 8px; }
  .cards3 { margin-top: 32px; }
  .card { grid-template-columns: minmax(0, 1fr); }
  .card-art { min-height: 200px; height: auto; padding: 24px 20px; }
  .art-desk { padding: 0; }
  .card-text { padding: 20px 20px 24px; }
  .card h3 { font-size: 18px; }
  .facts { gap: 32px 16px; margin-top: 32px; }
  .facts li { padding: 0; }
  .fact-n { font-size: 44px; }
  .fact-n span { font-size: 18px; }
  .fact-l { margin-top: 8px; font-size: 15px; }
  .promises { grid-template-columns: minmax(0, 1fr); row-gap: 24px; }
  .band-inner { text-align: left; }
  .band-mark { margin-inline: 0; }
  .band .cta-row { justify-content: flex-start; }
  .band .cta-row .btn { width: 100%; }
  .steps { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .steps li { display: flex; gap: 12px; }
  .steps p { margin-top: 0; }
  .steps-after { margin-inline: 0; }
  .foot-row { flex-direction: column; align-items: center; gap: 8px; text-align: center; }
  .foot-nav { margin-left: 0; gap: 16px; }
  .foot-nav a { display: inline-flex; align-items: center; min-height: 44px; padding-inline: 4px; }
  .foot-fine { text-align: center; }
  .doc-wrap { padding-block: 40px 96px; }
  .doc h1 { font-size: 30px; }
  .doc .summary { font-size: 18px; }
}

/* ---- the viewer on phones, upright or sideways (app.js uses the same query) ---- */
@media (max-width: 599px), (pointer: coarse) and (max-height: 500px) {
  /* Phones keep their own stacked Tour, with the per-tab caption. */
  .tour-wrap { display: block; }
  .tour .sec-head h2 { font-size: 30px; }
  .tour .sec-head .lead { margin-top: 16px; font-size: 17px; }
  .tour .viewer { display: flex; }
  .tour .caption { display: block; }
  .tour .stage { margin-top: 12px; }
  .viewer { display: flex; flex-direction: column; margin-top: 24px; }
  .tabgrid { order: 2; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; margin-top: 12px; }
  .tg-b {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    min-height: 52px; padding: 6px 2px; border: 0; border-radius: 12px; cursor: pointer;
    background: transparent; color: var(--ink-2); font: 500 12.5px/1.1 var(--font-text);
    transition: background-color 150ms ease-out, color 150ms ease-out;
  }
  .tg-i { width: 16px; height: 16px; fill: currentColor; color: var(--acc); }
  .tg-b[aria-selected="true"] { color: var(--ink); background: color-mix(in srgb, var(--acc) 14%, var(--bg)); }
  .tg-b:focus-visible { outline-offset: 1px; border-radius: 12px; }
  /* The caption sits above the window, so it stays put while the window changes height. */
  .caption { order: 3; max-width: none; min-height: 4.65em; margin: 16px 0 0; text-align: left; text-wrap: pretty; }
  .caption-note { order: 4; }
  .viewer[data-mode="full"] .caption-note { display: block; }
  .stage { order: 5; margin-top: 12px; height: auto; overflow: visible; }
  .layer, .layer.is-on { position: static; opacity: 1; visibility: visible; transition: none; }
  .layer:not(.is-on) { display: none; }
  .viewer .wp-no-taskbar .wp-panel-anchor { bottom: auto; top: 12px; }
  .layer-full { padding: 0; }
  .full-box { overflow: hidden; border-radius: 8px 8px 0 0; }
}
@media (pointer: coarse) and (max-height: 500px) and (min-width: 600px) {
    .tabgrid { grid-template-columns: repeat(8, minmax(0, 1fr)); }
}

/* Which download button: a Windows browser always gets the file, a phone or tablet always gets
   the link to send, whatever the width (app.js sets data-os from the browser's own report). */
:root[data-os="win"] .for-pc { display: inline-flex; }
:root[data-os="win"] .for-phone { display: none; }
:root[data-os="mobile"] .for-pc { display: none; }
:root[data-os="mobile"] .for-phone { display: inline-flex; }
:root[data-os="mobile"] p.for-phone { display: block; }

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