/* WinSpace landing and privacy pages. Plain CSS, no build step; light and dark follow the system.
   The page reads one made-up drive (the app's own demo C:) from top to bottom, so its colours are the app's: amber
   safe to clear, blue build files, lavender worth a look, slate Windows' own, grey yours, mint for accounted for and
   for proofs, and amber for the one thing to press. Data sits on paper; prose sits on the ground.
   Nothing moves by itself: the only transitions answer a hover, a press or a tab picked. The /winspace/* CSP allows
   no inline style, so every size is a class here. Fonts are the app's own: Inter WP and JetBrains Mono (paths). */

@font-face { font-family: "Inter WS Display"; src: url(fonts/InterWP-Display-700.woff2) format("woff2"); font-weight: 600 800; font-display: swap; }
@font-face { font-family: "Inter WS"; src: url(fonts/InterWP-Text-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter WS"; src: url(fonts/InterWP-Text-500.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Inter WS"; src: url(fonts/InterWP-Text-600.woff2) format("woff2"); font-weight: 600 700; font-display: swap; }
@font-face { font-family: "JetBrains Mono WS"; src: url(fonts/JetBrainsMono-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }

:root {
  color-scheme: light;
  --ground: #f5f5f7;
  --paper: #ffffff;
  --ink: #1c1d1f;
  --muted: #55595e;
  --faint: #6b6f75;
  --rule: #e3e3e8;
  --rule-2: #d2d2d8;
  --track: #e2e2e7;
  --hover: #ebebef;
  --amber: #f2a93b;
  --amber-hover: #f4b452;
  --on-amber: #22180a;
  --amber-text: #9a5a00;
  --blue: #5aa9f8;
  --lavender: #b794f6;
  --slate: #8291a1;
  --grey: #a2a8ae;
  --mint-text: #1f7a50;
  --focus: #1d68b8;
  --shadow: 0 1px 2px rgb(28 29 31 / 0.05), 0 20px 48px -24px rgb(28 29 31 / 0.18);
  --shot-shadow: 0 1px 2px rgb(28 29 31 / 0.06), 0 28px 60px -28px rgb(28 29 31 / 0.28);
  --gutter: 24px;
  --sec-y: clamp(64px, 10svh, 120px);
  --display: "Inter WS Display", "Segoe UI", system-ui, sans-serif;
  --body: "Inter WS", "Segoe UI", system-ui, sans-serif;
  --mono: "JetBrains Mono WS", ui-monospace, Consolas, monospace;
  --ease: cubic-bezier(0.23, 1, 0.32, 1);
}
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --ground: #141618;
    --paper: #1e2124;
    --ink: #f4f5f6;
    --muted: #a7acb1;
    --faint: #8f949a;
    --rule: #2b2f32;
    --rule-2: #383d40;
    --track: #2f3336;
    --hover: #1c1f22;
    --amber-text: #f6bd63;
    --grey: #5b636b;
    --mint-text: #9fdcbc;
    --focus: #5aa9f8;
    --shadow: 0 1px 2px rgb(0 0 0 / 0.4), 0 20px 48px -24px rgb(0 0 0 / 0.6);
    --shot-shadow: 0 1px 2px rgb(0 0 0 / 0.45), 0 28px 60px -28px rgb(0 0 0 / 0.7);
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 80px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background: var(--ground); color: var(--ink); font: 400 16px/1.6 var(--body); -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums; }
h1, h2, h3, p, figure, ol, ul { margin: 0; }
h1, h2 { font-family: var(--display); font-weight: 700; text-wrap: balance; }
a { color: inherit; }
img { display: block; max-width: 100%; height: auto; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.skip { position: absolute; left: 16px; top: -48px; padding: 8px 14px; border-radius: 8px; background: var(--paper); color: var(--ink); z-index: 20; }
.skip:focus { top: 12px; }
.wrap { max-width: 1240px; margin-inline: auto; padding-inline: var(--gutter); }
@media (max-width: 699px) { :root { --gutter: 16px; --sec-y: 64px; } }

/* ---- the top bar ---- */
/* A plain bar that stays at the top. Once the page has scrolled (app.js watches a sentinel), a hairline appears
   under it; nothing moves. */
.top-sentinel { position: absolute; top: 0; left: 0; width: 1px; height: 8px; pointer-events: none; }
.top { position: sticky; top: 0; z-index: 10; background-color: color-mix(in srgb, var(--ground) 88%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid transparent; transition: border-color 0.15s ease-out; }
.top[data-scrolled] { border-bottom-color: var(--rule); }
.top-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font: 700 18px var(--display); letter-spacing: -0.01em; min-height: 44px; }
.brand-mark { width: 26px; height: 26px; flex: none; }
.top-nav { display: flex; align-items: center; gap: 24px; }
.top-link { color: var(--muted); text-decoration: none; font-size: 15px; padding-block: 10px; }
@media (hover: hover) { .top-link:hover { color: var(--ink); } }
@media (max-width: 819px) { .top-link { display: none; } }

/* ---- buttons ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px; border: 0; border-radius: 12px;
  background: var(--amber); color: var(--on-amber); font: 600 16px var(--body); text-decoration: none; cursor: pointer;
  transition: background-color 0.15s ease-out, transform 0.12s ease-out; }
@media (hover: hover) { .btn:hover { background: var(--amber-hover); } }
.btn:active { transform: scale(0.97); }
.btn-small { min-height: 40px; padding: 0 16px; font-size: 15px; border-radius: 10px; }
/* A computer gets the file; a phone gets the link to send to its PC (app.js sets data-os). */
.share { display: none; }
:root[data-os="mobile"] .dl { display: none; }
:root[data-os="mobile"] .share { display: inline-flex; }
:root[data-os="mobile"] .top-get { display: none; }
@media (prefers-reduced-motion: reduce) { .btn { transition: background-color 0.15s ease-out; } .btn:active { transform: none; } }

.fine { font-size: 14px; color: var(--faint); }
.fine a { color: var(--muted); text-underline-offset: 3px; }
.dl-status:empty { display: none; }
.sub { font-size: 18px; line-height: 1.6; color: var(--muted); max-width: 60ch; }
@media (max-width: 699px) { .sub { font-size: 16px; } }

/* ---- the hero: the words, and the drive they are about ---- */
.hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 480px); gap: clamp(40px, 6vw, 88px); align-items: center;
  padding-block: clamp(32px, 8svh, 96px) var(--sec-y); }
.hero-copy { display: grid; gap: 20px; justify-items: start; }
/* The small line over a heading: the hero names the app; every band after it opens with the question it answers. */
.eyebrow, .ask { font: 500 16px/1.4 var(--body); color: var(--faint); }
.hero h1 { font-size: clamp(44px, min(6.4vw, 10svh), 80px); line-height: 1.02; letter-spacing: -0.035em; }
.lede { font-size: 19px; line-height: 1.55; color: var(--muted); max-width: 46ch; }
.cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 8px; }
@media (max-width: 1023px) {
  .hero { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .reading { max-width: 560px; }
}
@media (max-width: 699px) {
  .hero { padding-block: 28px var(--sec-y); gap: 40px; }
  .hero-copy { gap: 16px; }
  .lede { font-size: 17px; }
  .cta { width: 100%; }
  .cta .btn { width: 100%; }
}

/* The reading: the made-up C: as WinSpace reads it, one line per kind, in the app's own words and numbers. */
.reading { display: grid; gap: 12px; }
.reading > .fine { padding-inline: 4px; }
.sheet { background: var(--paper); border: 1px solid var(--rule); border-radius: 20px; padding: 24px 26px 20px; box-shadow: var(--shadow); }
.sheet-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.sheet-title { font: 600 16px var(--body); }
.sheet-size { font: 500 15px var(--body); color: var(--muted); }
.bar { display: flex; gap: 2px; height: 14px; margin: 16px 0 6px; }
.seg { min-width: 3px; border-radius: 3px; }
.seg:first-child { border-radius: 7px 3px 3px 7px; }
.seg:last-child { border-radius: 3px 7px 7px 3px; }
.kinds li[data-k] { cursor: default; }
/* Pointing at a kind lights its share of the bar and dims the rest, as the app's legend lifts its slice. */
@media (hover: hover) {
  .bar:has(+ .kinds li[data-k]:hover) .seg { opacity: 0.28; }
  .bar:has(+ .kinds li[data-k="safe"]:hover) .s-safe,
  .bar:has(+ .kinds li[data-k="build"]:hover) .s-build,
  .bar:has(+ .kinds li[data-k="worth"]:hover) .s-worth,
  .bar:has(+ .kinds li[data-k="windows"]:hover) .s-windows,
  .bar:has(+ .kinds li[data-k="yours"]:hover) .s-yours,
  .bar:has(+ .kinds li[data-k="free"]:hover) .s-free { opacity: 1; }
}
@media (prefers-reduced-motion: no-preference) { .seg { transition: opacity 0.12s ease-out; } }
/* Flex weights are the sizes in tenths of a GB, as the legend says them. */
.s-safe { flex: 311 1 0; background: var(--amber); }
.s-build { flex: 199 1 0; background: var(--blue); }
.s-worth { flex: 260 1 0; background: var(--lavender); }
.s-windows { flex: 467 1 0; background: var(--slate); }
.s-yours { flex: 2935 1 0; background: var(--grey); }
.s-free { flex: 2108 1 0; background: var(--track); }
.kinds { list-style: none; padding: 0; }
.kinds li { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; gap: 0 14px; align-items: center; padding: 10px 0; }
.kinds li + li { border-top: 1px solid var(--rule); }
.k-name { font: 500 15px/1.3 var(--body); }
.k-sub { display: block; font: 400 13px/1.4 var(--body); color: var(--faint); }
.k-size { font: 600 15px var(--body); }
.dot { display: block; width: 10px; height: 10px; border-radius: 50%; }
.k-safe { background: var(--amber); }
.k-build { background: var(--blue); }
.k-worth { background: var(--lavender); }
.k-windows { background: var(--slate); }
.k-yours { background: var(--grey); }
.k-free { border: 1.5px solid var(--faint); }
.sheet-foot { display: flex; align-items: center; gap: 8px; margin-top: 6px; padding-top: 14px; border-top: 1px solid var(--rule); font: 600 14px var(--body); color: var(--mint-text); }
.ok { width: 16px; height: 16px; flex: none; }
@media (max-width: 699px) { .sheet { padding: 20px 18px 16px; border-radius: 16px; } }

/* ---- bands ---- */
.band { padding-block: var(--sec-y); }
.band h2 { font-size: clamp(30px, 3.4vw, 44px); line-height: 1.08; letter-spacing: -0.03em; }
.band h3 { font: 600 17px/1.4 var(--body); }
.head { display: grid; gap: 16px; max-width: 720px; }
.center { display: grid; justify-items: center; text-align: center; gap: 18px; }
.center .sub { max-width: 56ch; }

/* ---- the tour: four pages in one fixed frame, picked from the list beside it ---- */
/* The viewer keeps a little less air around it than the other bands, so its frame can be as large as a laptop
   screen allows with the heading still in view. */
.band.tour { padding-block: calc(0.6 * var(--sec-y)); }
.tour-grid { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 48px; align-items: start; margin-top: 36px; }
.tour-side { display: grid; gap: 20px; }
.made-up { padding-inline: 16px; }
.tabs { display: grid; gap: 4px; }
.tab { display: grid; gap: 4px; padding: 14px 16px; border: 1px solid transparent; border-radius: 12px; background: transparent; color: inherit;
  font: inherit; text-align: left; cursor: pointer; transition: background-color 0.15s ease-out, border-color 0.15s ease-out; }
.tab-name { font: 600 16px/1.3 var(--body); color: var(--muted); }
.tab-sub { font-size: 14px; line-height: 1.45; color: var(--faint); }
.tab[aria-selected="true"] { background: var(--paper); border-color: var(--rule); box-shadow: 0 1px 2px rgb(0 0 0 / 0.04); }
.tab[aria-selected="true"] .tab-name { color: var(--ink); }
.tab[aria-selected="true"] .tab-sub { color: var(--muted); }
@media (hover: hover) { .tab:not([aria-selected="true"]):hover { background: var(--hover); } .tab:not([aria-selected="true"]):hover .tab-name { color: var(--ink); } }
.panes { display: grid; justify-items: start; }
/* One page at a time, whole, never taller than the screen leaves under the bar. */
.pane { display: none; width: min(100%, calc((100svh - 64px - 1.2 * var(--sec-y) - 132px) * 1280 / 820)); }
.pane[data-on] { display: block; }
.shot img { width: 100%; border-radius: 12px; border: 1px solid var(--rule-2); box-shadow: var(--shot-shadow); }
.pane-name, .pane-sub, .swipe-note { display: none; }
/* A page picked from the list fades in; the first one is simply there. */
@media (prefers-reduced-motion: no-preference) {
  .panes[data-picked] .pane[data-on] { transition: opacity 0.18s var(--ease); }
  @starting-style { .panes[data-picked] .pane[data-on] { opacity: 0; } }
}
/* Below a laptop's width: the four pages as cards to swipe, each whole, sized so a card fits one screen. */
@media (max-width: 1023px) {
  .band.tour { padding-block: var(--sec-y); }
  .tour-grid { grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: 28px; }
  .tour-side { display: none; }
  .panes { grid-auto-flow: column; grid-auto-columns: min(86%, 640px, calc((100svh - 150px) * 1280 / 820)); gap: 14px; justify-items: stretch; align-items: start;
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-inline: calc(-1 * var(--gutter)); padding: 0 var(--gutter) 20px; scroll-padding-inline: var(--gutter); }
  .panes::-webkit-scrollbar { display: none; }
  .pane { display: block; width: auto; scroll-snap-align: start; }
  .pane-name { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 10px; font: 600 15px var(--body); }
  .pane-name span { font-weight: 400; font-size: 13px; color: var(--faint); }
  .pane-sub { display: block; margin-top: 10px; font-size: 14px; line-height: 1.5; color: var(--muted); }
  .swipe-note { display: block; margin-top: 4px; }
  .shot img { border-radius: 8px; }
}

/* ---- how it knows: what is offered with its proof, and what never is ---- */
.pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 40px; }
.list { background: var(--paper); border: 1px solid var(--rule); border-radius: 20px; padding: 22px 26px 6px; }
.list-h { font: 600 13px var(--body); letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); margin-bottom: 4px; }
.items { list-style: none; padding: 0; }
.item { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; gap: 0 14px; padding: 16px 0; }
.item + .item { border-top: 1px solid var(--rule); }
.item .dot { margin-top: 7px; }
.item-name { font: 600 16px/1.4 var(--body); }
/* Paths break after a backslash (<wbr> in the HTML), and inside a name only when a name is wider than the line. */
.path { margin-top: 2px; font: 400 13px/1.5 var(--mono); color: var(--muted); overflow-wrap: break-word; }
.proof { display: flex; align-items: center; gap: 6px; margin-top: 8px; font: 500 14px/1.4 var(--body); color: var(--mint-text); }
.why { margin-top: 8px; font-size: 14px; line-height: 1.5; color: var(--muted); }
.item-size { font: 600 15px/1.6 var(--body); }
@media (max-width: 899px) { .pair { grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 36px; } }
@media (max-width: 699px) { .list { padding: 18px 18px 4px; border-radius: 16px; } }

/* ---- two columns: a heading on one side, its answer on the other ---- */
.split { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(40px, 6vw, 88px); align-items: start; }
.split-head { display: grid; gap: 16px; }
@media (max-width: 899px) { .split { grid-template-columns: minmax(0, 1fr); gap: 32px; } }

.steps { list-style: none; padding: 0; }
.steps li { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 0 12px; padding: 22px 0; }
.steps li:first-child { padding-top: 6px; }
.steps li + li { border-top: 1px solid var(--rule); }
.step-n { font: 600 15px/1.6 var(--body); color: var(--faint); }
.steps p { margin-top: 6px; color: var(--muted); }

.scan-copy { display: grid; gap: 18px; }
.scan-copy .sub { font-size: 17px; }
/* The measurement as one sentence, set large: a real number, with where and how it was measured under it. */
.measure { display: grid; gap: 20px; padding: 36px 36px 30px; background: var(--paper); border: 1px solid var(--rule); border-radius: 20px; align-self: center; }
.m-big { font: 700 clamp(36px, 4.2vw, 54px)/1.08 var(--display); letter-spacing: -0.03em; }
.m-big span { display: block; }
.m-big span + span { color: var(--muted); }
.m-label { font-size: 15px; line-height: 1.5; color: var(--faint); max-width: 44ch; }
@media (max-width: 699px) { .measure { padding: 24px 20px 20px; border-radius: 16px; gap: 16px; } .m-big { font-size: 32px; } }

.more { margin-top: 4px; }
.more a { color: var(--amber-text); font-weight: 600; text-underline-offset: 3px; }

.big-mark { width: 56px; height: 56px; }
.center-cta { justify-content: center; margin-top: 4px; }
.note { max-width: 60ch; }
@media (max-width: 699px) { .center-cta { width: 100%; } }

/* ---- the footer ---- */
.foot { border-top: 1px solid var(--rule); padding-block: 20px 32px; color: var(--faint); font-size: 14px; }
.foot-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; }
.foot a { color: var(--muted); text-underline-offset: 3px; }
.foot-brand { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; }
.foot-brand a { display: inline-flex; align-items: center; min-height: 44px; }
.foot-mark { width: 18px; height: 18px; flex: none; }
.foot-nav { display: flex; flex-wrap: wrap; gap: 0 20px; }
.foot-nav a { display: inline-flex; align-items: center; min-height: 44px; }
/* Slint's royalty-free licence asks for its badge where the app is offered. */
.slint { display: inline-flex; min-height: 44px; align-items: center; }
.slint img { width: 106px; height: 48px; }

/* ---- the privacy page ---- */
.doc { padding-block: clamp(32px, 7svh, 72px) clamp(56px, 10svh, 104px); }
.doc-wrap { max-width: 720px; }
.doc h1 { font-size: clamp(38px, 5vw, 56px); line-height: 1.04; letter-spacing: -0.035em; }
.doc .summary { font-size: 19px; color: var(--muted); margin-top: 14px; }
.promises { list-style: none; padding: 0; margin-top: 36px; background: var(--paper); border: 1px solid var(--rule); border-radius: 20px; padding-inline: 26px; }
.promises li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 0 12px; padding: 20px 0; }
.promises li + li { border-top: 1px solid var(--rule); }
.promises .step-n { line-height: 1.55; }
.promises strong { display: block; font: 600 17px/1.45 var(--body); }
.promises p { margin-top: 4px; color: var(--muted); }
.doc .after { margin-top: 28px; color: var(--muted); }
.doc .after a { color: var(--amber-text); text-underline-offset: 3px; }
.doc .updated { margin-top: 12px; font-size: 14px; color: var(--faint); }
@media (max-width: 699px) { .promises { padding-inline: 18px; border-radius: 16px; } }