/* Visavis — same identity as the app: monospaced, square, hairline grid,
   the icon's three colors (eggshell, green, red) and nothing else. */

:root {
  color-scheme: light;
  --paper: #f6f2e6;
  --paper-2: #efeada;
  --ink: #14130e;
  --muted: #6b675b;
  --rule: #d9d3bf;
  --rule-strong: #c3bca4;
  --green: #31bc59;
  --red: #ed2947;
  --green-ink: #1c7f3b;
  --red-ink: #b81733;
  --block-bg: #14130e;
  --block-ink: #f6f2e6;
  --block-muted: #9c9684;
  --block-rule: #302e25;
  --bar: #eae5d4;
  --wall-lqip: url("data:image/webp;base64,UklGRlQAAABXRUJQVlA4IEgAAAAQBACdASogABQAPrVMn0s3JCKhqA1S4BaJZQDGfBXzQvQ7ticL9hiTwAD+8JiUatOexq2qE9RvGI1Mv+yCt/RVerYKbIgAAAA=");
  --mb-ink: #1d1d1f;
  --mb-scrim: rgba(255, 255, 255, 0.34);
  --mb-pill: rgba(255, 255, 255, 0.42);
  --mb-hover: rgba(0, 0, 0, 0.08);
  --pop-face: #fafafa;
  --pop-edge: rgba(20, 19, 14, 0.08);
  --hero-scrim: rgba(246, 242, 230, 0.66);
  --mb-green: rgb(64, 194, 74);
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, "Roboto Mono", monospace;
  /* Resolves to the real San Francisco on macOS without shipping a font file. */
  --ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "Segoe UI", system-ui, sans-serif;
  --shell: min(1180px, 100% - 64px);
  --row: 44px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper: #111110;
    --paper-2: #171715;
    --ink: #f0ece0;
    --muted: #8c877a;
    --rule: #2a2926;
    --rule-strong: #3b3a35;
    --green: #3ecf67;
    --red: #f24358;
    --green-ink: #3ecf67;
    --red-ink: #f24358;
    --block-bg: #1a1a17;
    --block-ink: #f0ece0;
    --block-muted: #8c877a;
    --block-rule: #302f2b;
    --bar: #1c1c19;
  --wall-lqip: url("data:image/webp;base64,UklGRkoAAABXRUJQVlA4ID4AAAAQAwCdASogABQAPrVQoUwuJKcoKAqpwBaJZwDM0BgPjkAA/vN8Rwy1iorNDfaHM2xiFxFbVEN64z9093/AAA==");
  --mb-ink: #f5f5f7;
  --mb-scrim: rgba(0, 0, 0, 0.42);
  --mb-pill: rgba(255, 255, 255, 0.16);
  --mb-hover: rgba(255, 255, 255, 0.14);
  --pop-face: #101010;
  --pop-edge: rgba(240, 236, 224, 0.10);
  --hero-scrim: rgba(9, 9, 8, 0.6);
  --mb-green: rgb(64, 194, 74);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #111110;
  --paper-2: #171715;
  --ink: #f0ece0;
  --muted: #8c877a;
  --rule: #2a2926;
  --rule-strong: #3b3a35;
  --green: #3ecf67;
  --red: #f24358;
  --green-ink: #3ecf67;
  --red-ink: #f24358;
  --block-bg: #1a1a17;
  --block-ink: #f0ece0;
  --block-muted: #8c877a;
  --block-rule: #302f2b;
  --bar: #1c1c19;
  --wall-lqip: url("data:image/webp;base64,UklGRkoAAABXRUJQVlA4ID4AAAAQAwCdASogABQAPrVQoUwuJKcoKAqpwBaJZwDM0BgPjkAA/vN8Rwy1iorNDfaHM2xiFxFbVEN64z9093/AAA==");
  --mb-ink: #f5f5f7;
  --mb-scrim: rgba(0, 0, 0, 0.42);
  --mb-pill: rgba(255, 255, 255, 0.16);
  --mb-hover: rgba(255, 255, 255, 0.14);
  --pop-face: #101010;
  --pop-edge: rgba(240, 236, 224, 0.10);
  --hero-scrim: rgba(9, 9, 8, 0.6);
  --mb-green: rgb(64, 194, 74);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
h1, h2, h3, p, dl, ol, ul { margin: 0; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }

.shell { width: var(--shell); margin-inline: auto; }
/* Grid tracks size from content by default; never let a wide child widen the page. */
.split > *, .features > *, .steps > *, .states > *,
.math-body > *, .faq > *, .mini-row > * { min-width: 0; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.skip-link {
  position: absolute; top: -60px; left: 16px; z-index: 50;
  background: var(--ink); color: var(--paper); padding: 10px 16px; font-size: 12px;
}
.skip-link:focus { top: 12px; }

/* Appearance-paired assets: exactly one of each pair is ever shown. */
.only-dark { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .only-light { display: none; }
  :root:not([data-theme="light"]) .only-dark { display: block; }
}
:root[data-theme="dark"] .only-light { display: none; }
:root[data-theme="dark"] .only-dark { display: block; }

/* Header */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 10;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  transition: opacity 0.28s ease, transform 0.28s ease, visibility 0.28s;
}
.topbar[data-gate="closed"] { visibility: hidden; opacity: 0; transform: translateY(-100%); }
.topbar[data-gate="open"] { visibility: visible; opacity: 1; transform: none; }
main > section[id] { scroll-margin-top: 72px; }
.topbar-inner {
  height: 64px;
  display: flex; align-items: center; gap: 32px;
}
.brand {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 16px; font-weight: 500; letter-spacing: -0.02em;
}
/* The wordmark is the icon without its tile: ↑ green, the name, ↓ red. */
.brand { gap: 0.5em; }
.brand .arrow { width: 0.52em; height: 0.64em; }
.brand .arrow.is-green { color: var(--green); }
.brand .arrow.is-red { color: var(--red); }
.topbar-nav { display: flex; gap: 26px; font-size: 12px; letter-spacing: 0.12em; color: var(--muted); }
.topbar-nav a { padding: 4px 0; border-bottom: 1px solid transparent; }
.topbar-nav a:hover, .topbar-nav a[aria-current="true"] { color: var(--ink); border-bottom-color: var(--ink); }
.topbar-end { margin-left: auto; display: flex; align-items: center; gap: 10px; }

.square-button {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border: 1px solid var(--rule-strong); background: transparent;
  cursor: pointer;
}
.square-button:hover { background: var(--paper-2); }
.square-button svg { width: 16px; height: 16px; }

.button {
  display: inline-flex; align-items: center; gap: 12px;
  height: 38px; padding: 0 16px;
  border: 1px solid var(--rule-strong);
  font-size: 13px;
}
.button:hover { background: var(--paper-2); }
.button-solid {
  height: var(--row); padding: 0 20px;
  background: var(--ink); color: var(--paper); border-color: var(--ink);
}
.button-solid:hover { background: var(--green-ink); border-color: var(--green-ink); color: var(--paper); }

.text-link {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--muted);
  border-bottom: 1px solid var(--rule-strong); padding-bottom: 4px;
}
.text-link:hover { color: var(--ink); border-bottom-color: var(--ink); }

.eyebrow {
  display: flex; align-items: center; gap: 10px;
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--muted);
}
.marker { width: 7px; height: 7px; flex: none; }
.marker-green { background: var(--green); }
.marker-red { background: var(--red); }

h1 {
  font-size: clamp(40px, 6.6vw, 76px);
  font-weight: 500; letter-spacing: -0.055em; line-height: 1.02;
}
h1 em { font-style: normal; color: var(--green-ink); }
h1 em.r { color: var(--red-ink); }
h2 {
  font-size: clamp(28px, 3.7vw, 46px);
  font-weight: 500; letter-spacing: -0.04em; line-height: 1.1;
}
h3 { font-size: 16px; font-weight: 500; letter-spacing: -0.015em; }
.lede { font-size: 15px; line-height: 1.7; color: var(--muted); max-width: 46ch; }

/* Hero — a Mac desktop. The menu bar runs the full width and the panel hangs
   from the Visavis status item on the right, beside the system icons. */
.hero {
  position: relative; isolation: isolate;
  min-height: 100svh;
  display: flex; flex-direction: column;
  /* One unit scales the entire desktop UI from native macOS point sizes. */
  --desktop-unit: clamp(0.95625px, 0.06640625vw, 1.434375px);
  --pop-w: calc(320 * var(--desktop-unit));
  --pop-h: calc(var(--pop-w) * 1.1);
}
/* The page paper takes over at the bottom edge so the image has no hard cut. */
.hero::after {
  content: ""; position: absolute; z-index: -1; left: 0; right: 0; bottom: 0;
  height: 200px; pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--paper));
}

/* The wallpaper. A 32px inline copy holds the colour until the real file
   decodes; the image-set declaration is dropped whole by browsers without it,
   which is what leaves the plain jpeg above it standing. */
.desk-bg {
  position: absolute; inset: 0; z-index: -1;
  background: var(--wall-lqip) 50% 50% / cover no-repeat;
}
.desk-bg::after {
  content: ""; position: absolute; inset: 0;
  background-position: 50% 50%; background-size: cover; background-repeat: no-repeat;
  background-image: url("assets/desktop-light-2560.jpg");
  background-image: image-set(
    url("assets/desktop-light-2560.avif") type("image/avif"),
    url("assets/desktop-light-2560.webp") type("image/webp"),
    url("assets/desktop-light-2560.jpg") type("image/jpeg"));
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .desk-bg::after {
    background-image: url("assets/desktop-dark-2560.jpg");
    background-image: image-set(
      url("assets/desktop-dark-2560.avif") type("image/avif"),
      url("assets/desktop-dark-2560.webp") type("image/webp"),
      url("assets/desktop-dark-2560.jpg") type("image/jpeg"));
  }
}
:root[data-theme="dark"] .desk-bg::after {
  background-image: url("assets/desktop-dark-2560.jpg");
  background-image: image-set(
    url("assets/desktop-dark-2560.avif") type("image/avif"),
    url("assets/desktop-dark-2560.webp") type("image/webp"),
    url("assets/desktop-dark-2560.jpg") type("image/jpeg"));
}
@media (max-width: 800px) {
  .desk-bg::after {
    background-image: url("assets/desktop-light-1280.jpg");
    background-image: image-set(
      url("assets/desktop-light-1280.avif") type("image/avif"),
      url("assets/desktop-light-1280.webp") type("image/webp"),
      url("assets/desktop-light-1280.jpg") type("image/jpeg"));
  }
  :root[data-theme="dark"] .desk-bg::after {
    background-image: url("assets/desktop-dark-1280.jpg");
    background-image: image-set(
      url("assets/desktop-dark-1280.avif") type("image/avif"),
      url("assets/desktop-dark-1280.webp") type("image/webp"),
      url("assets/desktop-dark-1280.jpg") type("image/jpeg"));
  }
}

/* Menu bar */
.menubar {
  position: relative; z-index: 2; flex: none;
  display: flex; align-items: center; gap: calc(21 * var(--desktop-unit));
  height: calc(38 * var(--desktop-unit)); padding: 0 calc(20 * var(--desktop-unit));
  font-family: var(--ui);
  font-size: calc(14 * var(--desktop-unit)); font-weight: 400; letter-spacing: 0; white-space: nowrap;
  color: var(--mb-ink);
  --pop-gap: calc(13 * var(--desktop-unit));                                 /* panel top at 44px, below the selected status pill */
  --tail-w: calc(var(--pop-w) * 0.082);           /* 26pt on a 318pt panel */
  --tail-h: calc(var(--tail-w) * 0.423);          /* 11pt tall */
}
/* No tint and no separator — the wallpaper runs straight through, as it does on
   macOS 27. A scrim that fades out holds the text without drawing an edge. */
.menubar::before {
  content: ""; position: absolute; z-index: -1;
  left: 0; right: 0; top: 0; height: calc(72 * var(--desktop-unit));
  pointer-events: none;
  background: linear-gradient(to bottom, var(--mb-scrim), transparent);
}
/* The mark carries its own optical centre, so it is nudged rather than centred. */
.mb-apple { display: inline-flex; margin-top: calc(-1 * var(--desktop-unit)); }
.mb-apple svg { display: block; width: calc(16.5 * var(--desktop-unit)); height: calc(16.5 * var(--desktop-unit)); }
.mb-app { font-weight: 600; }
/* Reference screenshot at 2x: battery 51×24, Wi-Fi 32×24, Control Centre 26×26.
   Gaps are measured between visible shapes, not square SVG canvases. */
.mb-right { margin-left: auto; display: flex; align-items: center; gap: 0; }
.mb-battery { display: block; flex: none; width: calc(25.5 * var(--desktop-unit)); height: calc(12 * var(--desktop-unit)); margin-right: calc(22 * var(--desktop-unit)); }
.mb-wifi { display: block; flex: none; width: calc(16 * var(--desktop-unit)); height: calc(12 * var(--desktop-unit)); margin-right: calc(29.15 * var(--desktop-unit)); }
.mb-icon { display: block; flex: none; width: calc(25 * var(--desktop-unit)); height: calc(25 * var(--desktop-unit)); }
.mb-clock { margin-left: calc(25.3 * var(--desktop-unit)); font-size: calc(14 * var(--desktop-unit)); font-variant-numeric: tabular-nums; }
.mb-time { margin-left: calc(7 * var(--desktop-unit)); }
.mb-control-center {
  display: grid; place-items: center; flex: none;
  width: calc(13 * var(--desktop-unit)); height: calc(13 * var(--desktop-unit));
}
/* Pad the SVG viewport without shrinking the native 32-unit drawing. */
.mb-control-center svg {
  display: block; overflow: visible;
  width: calc(13.8125 * var(--desktop-unit)); height: calc(13.8125 * var(--desktop-unit));
}

/* The status item, and the popover hanging off it */
.mb-status {
  position: relative; display: flex; align-items: center; height: calc(24 * var(--desktop-unit));
  /* Reference gap 18.5pt × 1.10, less the pill’s 13pt right padding. */
  margin-right: calc(7.35 * var(--desktop-unit));
  font-family: var(--mono); font-size: calc(12 * var(--desktop-unit));
  color: var(--mb-green);
}
/* macOS highlights a status item while its popover is open. */
.mb-pill {
  position: relative;
  display: inline-flex; align-items: center; gap: calc(6 * var(--desktop-unit));
  height: calc(24 * var(--desktop-unit)); padding: 0 calc(13 * var(--desktop-unit));
  border-radius: 999px;
  background: var(--mb-pill);
}
/* AppKit renders the complete title at the same 12pt regular as the app. */
.mb-native-title { display: block; flex: none; width: calc(52 * var(--desktop-unit)); height: calc(15 * var(--desktop-unit)); max-width: none; }
.pop-tail {
  /* Translucent tip blends into the opaque panel without a line across its base. */
  position: absolute; z-index: 2; left: 50%;
  top: calc(100% + var(--pop-gap) - var(--tail-h));
  width: var(--tail-w); height: var(--tail-h);
  margin-left: calc(var(--tail-w) / -2);
}
.pop-tail svg { width: 100%; height: 100%; display: block; overflow: visible; }
.tail-edge { stroke: var(--pop-edge); stroke-width: 0.5; }
.popover {
  position: absolute; z-index: 1; top: calc(100% + var(--pop-gap));
  left: 50%; transform: translateX(-50%);
  margin: 0; width: var(--pop-w); max-width: calc(100vw - 20px);
  border: calc(.5 * var(--desktop-unit)) solid var(--pop-edge);
  border-top: 0;
  /* The real popover is a rounded rect; the radius rides with the panel scale. */
  border-radius: calc(21 * var(--desktop-unit));
  overflow: hidden; isolation: isolate; contain: paint;
  box-shadow: 0 calc(26 * var(--desktop-unit)) calc(64 * var(--desktop-unit)) rgba(0, 0, 0, 0.34), 0 calc(3 * var(--desktop-unit)) calc(10 * var(--desktop-unit)) rgba(0, 0, 0, 0.18);
}
.popover img { width: 100%; height: auto; }

/* Hero copy, centred in the desktop; the popover clears it to the right */
.hero-copy {
  position: relative; z-index: 1;
  flex: 1 1 auto;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  padding: 20px 0;
}
.hero-copy::before {
  content: ""; position: absolute; z-index: -1; inset: -6% -12%;
  pointer-events: none;
  background: radial-gradient(58% 54% at 50% 52%, var(--hero-scrim) 0, transparent 74%);
}
.hero-copy > * + * { margin-top: 20px; }
.hero-copy h1 { font-size: clamp(38px, 5.6vw, 68px); }
.hero-copy .lede { max-width: 58ch; }
/* The wordmark leads the hero: ↑ green, the name, ↓ red. */
.hero-mark {
  display: inline-flex; align-items: center; gap: 0.5em;
  font-size: 22px; font-weight: 500; letter-spacing: -0.02em; line-height: 1;
}
.hero-mark .arrow { width: 0.52em; height: 0.64em; }
.hero-mark .arrow.is-green { color: var(--green); }
.hero-mark .arrow.is-red { color: var(--red); }
.hero-copy .hero-mark + h1 { margin-top: 28px; }
.hero-actions { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; justify-content: center; }

@media (max-width: 1000px) {
  :root { --shell: min(1180px, 100% - 48px); }
}

@media (max-width: 720px) {
  :root { --shell: min(1180px, 100% - 40px); }
  .topbar-inner { gap: 16px; }
  .topbar-nav { display: none; }
  .hero-copy > * + * { margin-top: 20px; }
  /* Narrow screens put the panel over the copy, so keep the old clearance. */
  .hero-copy { padding: calc(var(--pop-h) + 24px) 0 24px; }
  .mb-menu { display: none; }
}

@media (max-width: 640px) {
  .hero { --desktop-unit: min(0.95625px, calc((100vw - 32px) / 320 * 0.85)); }
  /* Keep the panel on screen while its arrow remains on the status item. */
  .mb-status { position: static; }
  .popover { top: calc(44 * var(--desktop-unit)); left: auto; right: 16px; transform: none; }
}

@media (max-width: 480px) {
  .mb-app { display: none; }
  .mb-clock { display: none; }
}

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

/* Interactive replica: PanelView's 320 × 352 pt grid, scaled with the desktop. */
.mb-pill { border: 0; color: inherit; font: inherit; cursor: pointer; }
.mb-pill[aria-expanded="false"] { background: transparent; }
.mb-pill[aria-expanded="false"] .pop-tail { display: none; }
.demo-status { font-size: calc(12 * var(--desktop-unit)); min-width: calc(52 * var(--desktop-unit)); text-align: center; }
.demo-status.is-consumption { color: #d1243b; }
.demo-panel, .demo-dialog {
  --demo-bg: #fafafa; --demo-fg: #1f1f1f; --demo-muted: #878787;
  --demo-rule: #e3e3e3; --demo-hover: rgb(0 0 0 / 6%); --demo-press: rgb(0 0 0 / 14%);
  --demo-green: #40c24a; --demo-red: #d1243b;
  background: var(--demo-bg); color: var(--demo-fg);
  font-family: var(--mono); font-weight: 400; letter-spacing: 0;
}
[data-theme="dark"] .demo-panel, [data-theme="dark"] .demo-dialog {
  --demo-bg: #101010; --demo-fg: #e6e6e6; --demo-muted: #6e6e6e;
  --demo-rule: #202020; --demo-hover: rgb(255 255 255 / 6%); --demo-press: rgb(255 255 255 / 14%);
}
.demo-panel { font-size: calc(12 * var(--desktop-unit)); line-height: 1; }
.demo-panel[hidden] { display: none; }
.demo-panel button { border: 0; border-radius: 0; padding: 0; margin: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.demo-panel button:not(.demo-stop):hover { background: var(--demo-hover); }
.demo-panel button:not(.demo-stop):active { background: var(--demo-press); }
.demo-panel button:focus-visible, .demo-list:focus-visible, .mb-pill:focus-visible { outline: 2px solid var(--demo-green, #40c24a); outline-offset: -3px; }
.demo-panel svg { width: calc(14 * var(--desktop-unit)); height: calc(14 * var(--desktop-unit)); fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.demo-metrics, .demo-summary, .demo-row, .demo-footer { display: grid; height: calc(44 * var(--desktop-unit)); flex-shrink: 0; }
.demo-metrics { grid-template-columns: 1fr 1fr; position: relative; font-size: calc(11.5 * var(--desktop-unit)); }
.demo-metrics > div { display: flex; align-items: center; gap: calc(5 * var(--desktop-unit)); padding-left: calc(16 * var(--desktop-unit)); }
.demo-metrics::after { content: ''; position: absolute; bottom: 0; width: 100%; height: calc(.5 * var(--desktop-unit)); background: linear-gradient(to right, var(--demo-green) var(--ratio, 70%), var(--demo-red) var(--ratio, 70%)); }
.demo-metrics.is-empty::after { background: var(--demo-rule); }
.demo-production { color: var(--demo-green); }
.demo-consumption { color: var(--demo-red); }
.demo-summary { grid-template-columns: 72.5% 13.75% 13.75%; border-bottom: calc(.5 * var(--desktop-unit)) solid var(--demo-rule); }
.demo-summary > div { display: flex; align-items: center; justify-content: space-between; padding: 0 calc(16 * var(--desktop-unit)); color: var(--demo-muted); border-right: calc(.5 * var(--desktop-unit)) solid var(--demo-rule); }
.demo-summary .is-showing { color: var(--demo-green); }
.demo-summary [data-history] { border-right: calc(.5 * var(--desktop-unit)) solid var(--demo-rule); }
/* Square corner buttons must follow the popover's rounded corners, or a hover tint shows outside them. */
.demo-footer button:first-child { border-bottom-left-radius: calc(21 * var(--desktop-unit)); }
.demo-footer button:last-child { border-bottom-right-radius: calc(21 * var(--desktop-unit)); }
.demo-history { height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: calc(6 * var(--desktop-unit)); }
.demo-months { display: grid; grid-template-columns: repeat(13, calc(22 * var(--desktop-unit))); font-size: calc(10 * var(--desktop-unit)); color: var(--demo-muted); }
.demo-months span { padding-left: calc(2 * var(--desktop-unit)); white-space: nowrap; }
.demo-weeks { display: grid; grid-template-columns: repeat(13, calc(22 * var(--desktop-unit))); }
.demo-day { width: calc(22 * var(--desktop-unit)); height: calc(22 * var(--desktop-unit)); display: flex; align-items: center; justify-content: center; }
.demo-square { position: relative; width: calc(18 * var(--desktop-unit)); height: calc(18 * var(--desktop-unit)); background: var(--demo-red); }
.demo-square::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: var(--ratio, 0); background: var(--demo-green); }
.demo-square.is-empty { background: var(--demo-rule); }
.demo-square.is-unclassified { background: color-mix(in srgb, var(--demo-muted) 35%, transparent); }
.demo-day.is-hovered .demo-square { box-shadow: inset 0 0 0 calc(1 * var(--desktop-unit)) var(--demo-fg); }
.demo-list { height: calc(220 * var(--desktop-unit)); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
.demo-list::-webkit-scrollbar { display: none; }
.demo-row { grid-template-columns: 72.5% 13.75% 13.75%; border-bottom: calc(.5 * var(--desktop-unit)) solid var(--demo-rule); }
.demo-detail { display: flex; align-items: center; gap: calc(6 * var(--desktop-unit)); padding: 0 calc(16 * var(--desktop-unit)); min-width: 0; border-right: calc(.5 * var(--desktop-unit)) solid var(--demo-rule); }
.demo-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.demo-spacer { flex: 1; min-width: calc(2 * var(--desktop-unit)); }
.demo-time { font-variant-numeric: tabular-nums; flex-shrink: 0; }
.demo-active { width: calc(4 * var(--desktop-unit)); height: calc(4 * var(--desktop-unit)); background: var(--demo-green); border-radius: 50%; flex-shrink: 0; }
.demo-panel .demo-stop { opacity: 0; color: var(--demo-muted); flex-shrink: 0; width: calc(12 * var(--desktop-unit)); height: calc(12 * var(--desktop-unit)); }
.demo-stop svg { width: calc(11 * var(--desktop-unit)); height: calc(11 * var(--desktop-unit)); }
.demo-row:hover .demo-stop, .demo-row:focus-within .demo-stop { opacity: 1; }
.demo-panel .demo-category { color: color-mix(in srgb, var(--demo-muted) 60%, transparent); border-right: calc(.5 * var(--desktop-unit)) solid var(--demo-rule); }
.demo-category.production[aria-pressed="true"], .demo-panel .demo-restore { color: var(--demo-green); }
.demo-category.consumption[aria-pressed="true"] { color: var(--demo-red); }
/* As in the app, the chosen arrow is tinted in its own colour (20 %). */
.demo-panel .demo-category { transition: background-color 0.35s ease-out, color 0.35s ease-out; }
.demo-panel .demo-category.production[aria-pressed="true"] { background: color-mix(in srgb, var(--demo-green) 20%, transparent); }
.demo-panel .demo-category.consumption[aria-pressed="true"] { background: color-mix(in srgb, var(--demo-red) 20%, transparent); }
.demo-row.is-ignored { grid-template-columns: 72.5% 27.5%; color: var(--demo-muted); }
.demo-empty { margin: 0; padding: calc(16 * var(--desktop-unit)); color: var(--demo-muted); font-size: calc(11 * var(--desktop-unit)); white-space: normal; line-height: 1.5; }
.demo-footer { grid-template-columns: 13.75% 43.125% 43.125%; border-top: calc(.5 * var(--desktop-unit)) solid var(--demo-rule); }
.demo-footer button + button { border-left: calc(.5 * var(--desktop-unit)) solid var(--demo-rule); }
.demo-dialog { width: min(340px, calc(100vw - 32px)); padding: 24px; border: 1px solid var(--demo-rule); border-radius: 16px; box-shadow: 0 20px 60px #0005; font-size: 12px; }
.demo-dialog::backdrop { background: #0004; }
.demo-dialog h2 { font: 600 15px/1.4 var(--ui); letter-spacing: 0; margin: 0 0 12px; }
.demo-dialog p { line-height: 1.6; color: var(--demo-muted); }
.demo-dialog form > div { display: flex; gap: 8px; margin-top: 20px; }
.demo-dialog button { flex: 1; border: 1px solid var(--demo-rule); border-radius: 6px; padding: 8px; font: inherit; color: inherit; background: var(--demo-hover); cursor: pointer; }
.demo-dialog .demo-confirm { color: #fff; background: #c42339; border-color: transparent; }
@media (hover: none) { .demo-panel .demo-stop { opacity: 1; } }

/* Self-contained native symbols, exported by AppKit at PanelView's exact sizes. */
.native-symbol, .demo-panel svg.native-symbol, .demo-panel svg.native-symbol, .demo-panel svg.native-symbol, .demo-panel svg.native-symbol { display: inline-block; flex: none; width: calc(var(--symbol-w) * var(--desktop-unit)); height: calc(var(--symbol-h) * var(--desktop-unit)); fill: currentColor; stroke: none; }
.demo-status { display: inline-flex; align-items: center; justify-content: center; color: #40c24a; }
.demo-status.is-muted { color: var(--muted); }
.demo-production, .demo-consumption { display: inline-flex; align-items: center; gap: calc(5 * var(--desktop-unit)); }
.symbol-eye-slash { --symbol-w: 19; --symbol-h: 15; }
.symbol-xmark-square { --symbol-w: 11; --symbol-h: 11; }
.symbol-plus-square { --symbol-w: 13; --symbol-h: 13; }
.symbol-pause { --symbol-w: 10; --symbol-h: 13; }
.symbol-play { --symbol-w: 12; --symbol-h: 13; }
.symbol-moon { --symbol-w: 16; --symbol-h: 16; }
.symbol-sun-max { --symbol-w: 17; --symbol-h: 17; }
.symbol-arrow-up { --symbol-w: 7.014; --symbol-h: 8.685; }
.symbol-arrow-down { --symbol-w: 7.014; --symbol-h: 8.685; }

.native-status-title { display: block; flex: none; }

/* ————————————————————————————————————————————————————————————————
   Below the desktop. The page borrows the panel's grammar: a 44 px row,
   hairline rules, square hit areas that tint on hover (6 %) and press (14 %),
   ↑ green for production, ↓ red for consumption. Nothing the app doesn't have.
   ———————————————————————————————————————————————————————————————— */
:root {
  --hover: rgb(20 19 14 / 6%);
  --press: rgb(20 19 14 / 14%);
  /* AppDelegate.updateStatus() tints, and secondaryLabelColor when paused. */
  --status-green: rgb(64 194 74);
  --status-red: rgb(209 36 59);
  --status-muted: rgb(0 0 0 / 50%);
  --section-pad: 128px;
}
:root[data-theme="dark"] { --hover: rgb(240 236 224 / 6%); --press: rgb(240 236 224 / 14%); --status-muted: rgb(255 255 255 / 55%); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --hover: rgb(240 236 224 / 6%); --press: rgb(240 236 224 / 14%); --status-muted: rgb(255 255 255 / 55%); }
}

@property --mratio { syntax: "<percentage>"; inherits: true; initial-value: 70%; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.arrow { display: inline-block; flex: none; width: 0.52em; height: 0.64em; }
.arrow.up, .is-green { color: var(--green-ink); }
.arrow.down, .is-red { color: var(--red-ink); }

/* Section titles read at a glance, without numbering. The hero keeps its own. */
main > section:not(.hero) .eyebrow, .faq .eyebrow {
  gap: 12px; font-size: 13px; letter-spacing: 0.14em; color: var(--ink);
}
main > section:not(.hero) .eyebrow .marker { width: 8px; height: 8px; }
.privacy .eyebrow { color: var(--block-ink) !important; }
.label { font-size: 12px; font-weight: 400; letter-spacing: 0.14em; text-transform: uppercase; }

/* The menu bar title, drawn from the app's own glyph outlines. */
.status-title { display: inline-flex; align-items: center; font-size: 34px; line-height: 1; white-space: nowrap; }
.status-title svg { display: block; fill: currentColor; }
.status-title.is-green { color: var(--status-green); }
.status-title.is-red { color: var(--status-red); }
.status-title.is-muted { color: var(--status-muted); }

.split { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 64px; align-items: end; }
.section-heading > * + * { margin-top: 20px; }
.aside { border-left: 1px solid var(--rule); padding-left: 24px; color: var(--muted); max-width: 46ch; font-size: 15px; }
p.aside, .aside p { color: var(--muted); }

.chip-button {
  height: 28px; padding: 0 12px;
  border: 1px solid var(--rule-strong); background: transparent; cursor: pointer;
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted);
}
.chip-button:hover { background: var(--hover); color: var(--ink); }
.chip-button:active { background: var(--press); }

/* Arrival: one short rise, once. Content is visible without JavaScript. */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.6s ease, transform 0.6s cubic-bezier(.2, .7, .2, 1); }
.reveal.is-in { opacity: 1; transform: none; }

/* Ticker — the panel's rows running along the foot of the desktop */
.ticker {
  position: relative; z-index: 1; flex: none; overflow: hidden;
  height: var(--row);
  border-block: 1px solid var(--rule);
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  font-size: 12px;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.ticker-track { display: flex; width: max-content; height: 100%; }
.js .ticker-track { animation: ticker 60s linear infinite; }
.ticker:hover .ticker-track { animation-play-state: paused; }
.ticker-list { list-style: none; padding: 0; display: flex; height: 100%; }
.ticker-list li {
  display: flex; align-items: center; gap: 12px;
  padding: 0 28px; border-right: 1px solid var(--rule); white-space: nowrap;
}
.ticker-list .arrow { font-size: 15px; }
@keyframes ticker { to { transform: translateX(-50%); } }

/* O essencial */
.intro { padding: var(--section-pad) 0; }
.block { margin-top: 72px; border: 1px solid var(--rule); background: var(--paper); }
.block + .block { margin-top: 24px; }
.block-head {
  min-height: var(--row); padding: 8px 8px 8px 20px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  border-bottom: 1px solid var(--rule);
}

.states { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); }
.state { padding: 32px 24px; }
.state + .state { border-left: 1px solid var(--rule); }
.state h3 { margin-top: 28px; font-size: 15px; }
.state p { margin-top: 4px; font-size: 13px; color: var(--muted); }

/* The panel's table: 72.5 % detail, 13.75 % per arrow, 0.5 pt rules. */
.math-body { display: grid; grid-template-columns: 1.1fr 0.9fr; }
.math-table { border-right: 1px solid var(--rule); }
.math-metrics {
  position: relative;
  display: grid; grid-template-columns: 1fr 1fr; height: var(--row);
  font-size: 12px; text-transform: uppercase;
  transition: --mratio 0.5s cubic-bezier(.2, .7, .2, 1);
}
.math-metrics > span { display: flex; align-items: center; gap: 6px; padding-left: 16px; }
.math-metrics b { font-weight: 400; font-variant-numeric: tabular-nums; }
.math-metrics::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(to right, var(--green) var(--mratio), var(--red) var(--mratio));
}
.math-rows { list-style: none; padding: 0; }
.math-row {
  display: grid; grid-template-columns: 1fr var(--row) var(--row);
  height: var(--row); border-top: 1px solid var(--rule);
  font-size: 13px;
}
.math-detail { display: flex; align-items: center; gap: 8px; padding: 0 16px; border-right: 1px solid var(--rule); }
.math-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.math-time { font-variant-numeric: tabular-nums; }
.math-row .up, .math-row .down {
  display: grid; place-items: center; font-size: 15px;
  color: color-mix(in srgb, var(--muted) 60%, transparent);
  transition: color 0.4s, background-color 0.4s;
}
.math-row .down { border-left: 1px solid var(--rule); }
.math-row .up.is-on { color: var(--green-ink); background: color-mix(in srgb, var(--green) 20%, transparent); }
.math-row .down.is-on { color: var(--red-ink); background: color-mix(in srgb, var(--red) 20%, transparent); }
/* The arrow that was just chosen pulses once, so the swap is easy to follow. */
.math-row .is-on.is-changed { animation: math-pick 0.9s cubic-bezier(.2, .7, .2, 1); }
@keyframes math-pick { 0% { background-color: color-mix(in srgb, currentColor 45%, transparent); transform: scale(1.12); } 100% { transform: none; } }

.math-readout {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  padding: 32px 24px; text-align: center;
}
.math-result .status-title { font-size: clamp(44px, 5.4vw, 72px); }
.formula { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* Feature cards — three crops of the real panel */
.features {
  margin-top: 24px;
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--rule); border-left: 1px solid var(--rule);
}
.card {
  display: flex; flex-direction: column;
  padding: 28px 28px 0;
  border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  transition: background 0.25s;
}
.card:hover { background: var(--hover); }
.card > p { margin: 8px 0 32px; color: var(--muted); }
.card-shot { margin: auto -28px 0; border-top: 1px solid var(--rule); background: var(--paper-2); overflow: hidden; }
.card-shot img { width: 100%; height: auto; transition: transform 0.6s cubic-bezier(.2, .7, .2, 1); }
.card:hover .card-shot img { transform: scale(1.025); }

/* Privacidade — always the dark block, in either appearance */
.privacy {
  --green-ink: var(--green); --red-ink: var(--red);
  padding: var(--section-pad) 0;
  background: var(--block-bg); color: var(--block-ink);
}
.privacy .aside { border-color: var(--block-rule); }
.privacy .aside p { color: var(--block-muted); }
.facts { list-style: none; padding: 0; margin-top: 24px; display: flex; flex-wrap: wrap; gap: 8px; }
.facts li {
  display: flex; align-items: center; gap: 10px;
  border: 1px solid var(--block-rule); padding: 9px 12px;
  font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--block-ink);
}
.facts li::before { content: ""; width: 7px; height: 7px; background: var(--green); }

.url { margin: 72px 0 0; border: 1px solid var(--block-rule); }
.url-row { display: grid; grid-template-columns: 180px 1fr; align-items: center; min-height: 112px; }
.url-row + .url-row { border-top: 1px solid var(--block-rule); }
.url-row .label { padding-left: 24px; color: var(--block-muted); }
.url-text {
  padding: 20px 24px 20px 0;
  font-size: clamp(18px, 2.8vw, 36px); letter-spacing: -0.035em; line-height: 1.25;
  overflow-wrap: anywhere;
}
.url-drop {
  text-decoration: line-through; text-decoration-color: transparent; text-decoration-thickness: 2px;
  transition: color 0.6s ease 0.3s, text-decoration-color 0.4s ease;
}
.url.is-cut .url-drop { color: color-mix(in srgb, var(--block-muted) 55%, transparent); text-decoration-color: var(--red); }
.url-keep { transition: color 0.5s ease 0.7s; }
.url.is-cut .url-keep { color: var(--green); }
.url-result .url-keep { color: var(--block-ink); opacity: 0.25; transition: opacity 0.5s ease 1.1s; }
.url.is-cut .url-result .url-keep { opacity: 1; }

/* No dia a dia */
.how { padding: var(--section-pad) 0; }
.steps {
  list-style: none; padding: 0; margin-top: 64px;
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--rule);
}
.step { padding: 28px 32px 8px 0; }
.step + .step { border-left: 1px solid var(--rule); padding-left: 32px; }
.step p { margin-top: 8px; color: var(--muted); max-width: 34ch; }

/* A fragment of the real UI for each step. */
.mini {
  height: 120px; margin-bottom: 28px; padding: 0 12px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--rule); background: var(--paper-2);
  font-size: 12px;
}
.mini-row {
  width: 100%; max-width: 250px; height: var(--row);
  display: flex; align-items: center; gap: 8px;
  padding-left: 16px;
  background: var(--paper); border: 1px solid var(--rule);
}
.mini-name { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-dot { flex: none; width: 5px; height: 5px; border-radius: 50%; background: var(--green); animation: breathe 2s ease-in-out infinite; }
.mini-time { flex: none; padding-right: 16px; font-variant-numeric: tabular-nums; }
.mini-choice { gap: 0; }
.mini-choice .mini-name { padding-right: 8px; }
.mini-key {
  flex: none; width: var(--row); height: 100%;
  display: grid; place-items: center;
  border-left: 1px solid var(--rule);
  color: color-mix(in srgb, var(--muted) 60%, transparent);
  font-size: 15px; transition: color 0.3s, background 0.3s;
}
.mini-key.is-on:nth-child(2) { color: var(--green-ink); background: var(--hover); }
.mini-key.is-on:nth-child(3) { color: var(--red-ink); background: var(--hover); }
/* The right half of the hero's menu bar: status item in colour, the rest greyed.
   Sized in em so the whole strip scales down with a narrow column. */
.mini { container-type: inline-size; }
.mini-bar {
  font-size: min(12px, calc(6.4cqi - 1.6px));
  width: 100%; max-width: 250px; height: 2.8em;
  display: flex; align-items: center; justify-content: center; gap: 1.2em;
  padding: 0 0.8em;
  background: linear-gradient(to bottom, var(--rule), transparent);
  color: var(--muted);
}
.mini-pill { display: inline-flex; align-items: center; flex: none; height: 1.85em; padding: 0 0.85em; border-radius: 999px; background: var(--hover); }
.mini-pill .status-title { font-size: 1em; }
.mini-battery { width: 1.9em; height: 0.9em; flex: none; opacity: 0.55; }
.mini-wifi { width: 1.25em; height: 0.92em; flex: none; opacity: 0.55; }
.mini-cc { width: 1.08em; height: 1.08em; flex: none; opacity: 0.55; overflow: visible; }
@keyframes breathe { 50% { opacity: 0.3; } }

.faq { margin-top: 112px; display: grid; grid-template-columns: 1fr 2fr; gap: 64px; align-items: start; }
.faq .eyebrow { padding-top: 20px; }
.faq-list { border-top: 1px solid var(--rule); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  min-height: 60px; padding-left: 16px;
  font-size: 15px; letter-spacing: -0.01em;
  transition: background 0.2s;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { background: var(--hover); }
.faq summary:active { background: var(--press); }
.faq summary:focus-visible { outline-offset: -2px; }
.faq summary::after {
  content: "+"; flex: none;
  width: 60px; height: 60px; display: grid; place-items: center;
  border-left: 1px solid var(--rule);
  font-size: 18px; color: var(--muted);
}
.faq details[open] summary::after { content: "−"; color: var(--green-ink); }
.faq details p { padding: 0 76px 22px 16px; color: var(--muted); max-width: 64ch; }
.faq details[open] p { animation: open 0.3s ease; }
@keyframes open { from { opacity: 0; transform: translateY(-4px); } }

/* Instalação */
.install { background: var(--paper-2); border-top: 1px solid var(--rule); padding: var(--section-pad) 0; }
.install .split { grid-template-columns: 0.9fr 1.1fr; align-items: start; }
.specs { margin-top: 36px !important; border-top: 1px solid var(--rule); max-width: 440px; }
.specs > div {
  display: grid; grid-template-columns: 140px 1fr; align-items: center;
  height: var(--row); border-bottom: 1px solid var(--rule); font-size: 13px;
}
.specs dt { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.specs dd { margin: 0; }
.availability { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.section-heading .availability { margin-top: 28px; }

.install-card { background: var(--paper); border: 1px solid var(--rule); }
.install-card-head { min-height: var(--row); display: flex; align-items: center; padding: 0 20px; border-bottom: 1px solid var(--rule); }
.install-steps { list-style: none; padding: 0; }
.install-steps li { display: grid; grid-template-columns: 64px 1fr; border-bottom: 1px solid var(--rule); }
.install-num {
  display: grid; place-items: start center; padding-top: 18px;
  border-right: 1px solid var(--rule);
  font-size: 12px; color: var(--red-ink); font-variant-numeric: tabular-nums;
}
.install-steps p { padding: 16px 20px 18px; }
.install-steps li:hover { background: var(--hover); }
.install-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 18px 20px; }
.install-note { font-size: 13px; color: var(--muted); }

@media (max-width: 1000px) {
  :root { --section-pad: 96px; }
  .split, .install .split { grid-template-columns: 1fr; gap: 32px; align-items: start; }
  .aside { border-left: 0; border-top: 1px solid var(--rule); padding: 24px 0 0; }
  .states { grid-template-columns: 1fr 1fr; }
  .state:nth-child(3) { border-left: 0; }
  .state:nth-child(n + 3) { border-top: 1px solid var(--rule); }
  .math-body { grid-template-columns: 1fr; }
  .math-table { border-right: 0; border-bottom: 1px solid var(--rule); }
  .features { grid-template-columns: 1fr 1fr; }
  .card:last-child { grid-column: 1 / -1; }
  .faq { grid-template-columns: 1fr; gap: 24px; }
  .faq .eyebrow { padding-top: 0; }
  /* One step per row: the fragment on the left, the words beside it. */
  .steps { grid-template-columns: 1fr; margin-top: 48px; }
  .step, .step + .step {
    display: grid; grid-template-columns: minmax(0, 300px) 1fr; column-gap: 32px; align-content: center;
    border-left: 0; border-bottom: 1px solid var(--rule); padding: 24px 0;
  }
  .step .mini { grid-row: span 2; margin: 0; }
  .step h3 { align-self: end; }
}

@media (max-width: 720px) {
  :root { --section-pad: 72px; }
  .block { margin-top: 48px; }
  .states { grid-template-columns: 1fr 1fr; }
  .state { padding: 24px 16px; }
  .status-title { font-size: 24px; }
  .state h3 { margin-top: 18px; font-size: 14px; }
  .features { grid-template-columns: 1fr; }
  .card:last-child { grid-column: auto; }
  .card { padding: 24px 24px 0; }
  .card-shot { margin: 0 -24px; }
  .url { margin-top: 48px; }
  .url-row { grid-template-columns: 1fr; min-height: 0; }
  .url-row .label { padding: 18px 16px 0; }
  .url-text { padding: 8px 16px 18px; }
  .steps { margin-top: 40px; }
  .step, .step + .step { display: block; }
  .step .mini { margin-bottom: 24px; }
  .faq { margin-top: 72px; }
  .faq summary { font-size: 14px; padding-left: 12px; }
  .faq summary::after { width: 52px; }
  .faq details p { padding: 0 12px 20px; }
  .specs > div { grid-template-columns: 120px 1fr; }
  .install-steps li { grid-template-columns: 48px 1fr; }
  .install-steps p { padding: 14px 16px 16px; }
  .install-foot { padding: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
  .js .ticker-track { animation: none; }
}

/* Caps labels, as in the panel (ZERAR, SAIR, PRODUÇÃO, MONITORANDO). */
.caps { letter-spacing: 0.12em; font-size: 12px; }
.state h3 { font-size: 13px; letter-spacing: 0.1em; }
.availability { letter-spacing: 0.1em; font-size: 12px; }
.formula { letter-spacing: 0.06em; font-size: 12px; }
.install-foot .text-link { letter-spacing: 0.12em; font-size: 12px; }

/* ————————————————————————————————————————————————————————————————
   Bigger, tighter, flatter. Borrowed from typesafe.ai: oversized headlines,
   chips pinned flush to the corners, crop marks at the corners of each
   section and one flat colour slab. Still the app's own square grammar.
   ———————————————————————————————————————————————————————————————— */
h2 { font-size: clamp(34px, 5vw, 68px); letter-spacing: -0.065em; line-height: 0.98; }
.section-heading > * + * { margin-top: 28px; }
.state h3, .card h3 { text-transform: none; }
.card h3 { font-size: 22px; letter-spacing: -0.05em; line-height: 1.12; max-width: 14ch; }
.step h3 { font-size: 20px; letter-spacing: -0.045em; line-height: 1.15; }
.faq summary { font-size: 17px; letter-spacing: -0.03em; }

/* Crop marks at the corners of each section's content. */
.intro, .how, .privacy, .install { position: relative; --crop: var(--rule-strong); }
.privacy { --crop: var(--block-rule); }
.intro::before, .how::before, .privacy::before, .install::before {
  content: ""; position: absolute; inset: 32px 32px; pointer-events: none;
  --m: 10px; --t: 1px;
  background:
    linear-gradient(var(--crop), var(--crop)) 0 0 / var(--m) var(--t) no-repeat,
    linear-gradient(var(--crop), var(--crop)) 0 0 / var(--t) var(--m) no-repeat,
    linear-gradient(var(--crop), var(--crop)) 100% 0 / var(--m) var(--t) no-repeat,
    linear-gradient(var(--crop), var(--crop)) 100% 0 / var(--t) var(--m) no-repeat,
    linear-gradient(var(--crop), var(--crop)) 0 100% / var(--m) var(--t) no-repeat,
    linear-gradient(var(--crop), var(--crop)) 0 100% / var(--t) var(--m) no-repeat,
    linear-gradient(var(--crop), var(--crop)) 100% 100% / var(--m) var(--t) no-repeat,
    linear-gradient(var(--crop), var(--crop)) 100% 100% / var(--t) var(--m) no-repeat;
}

/* Header: no bar, only chips flush to the edges. */
.topbar { background: none; border: 0; pointer-events: none; }
.topbar-inner { width: 100%; max-width: none; height: auto; padding: 0; gap: 0; align-items: flex-start; position: relative; }
.topbar a, .topbar button { pointer-events: auto; }
.brand, .topbar-nav a, .square-button, .topbar-end .button {
  height: var(--row); display: inline-flex; align-items: center;
  background: var(--paper); border: 0; padding: 0 16px;
}
.topbar-nav { position: absolute; left: 50%; transform: translateX(-50%); gap: 1px; color: var(--ink); }
.topbar-nav a { border-bottom: 0; }
.topbar-nav a:hover, .topbar-nav a[aria-current="true"] { background: var(--ink); color: var(--paper); }
.topbar-end { gap: 1px; }
.square-button { width: var(--row); padding: 0; justify-content: center; }
.topbar-end .button { background: var(--ink); color: var(--paper); }
.topbar-end .button:hover { background: var(--green-ink); color: var(--paper); }
.square-button:hover { background: var(--paper-2); }

/* Primary button: heavier, same square. */
.button-solid { height: 52px; padding: 0 28px; letter-spacing: 0.12em; }

/* Install: the one flat slab. */
.install {
  --paper: var(--green); --paper-2: color-mix(in srgb, var(--green) 88%, #000);
  --ink: #0d0d0a; --muted: #143b21; --rule: #0d0d0a; --rule-strong: #0d0d0a;
  --hover: rgb(0 0 0 / 8%); --press: rgb(0 0 0 / 16%); --green-ink: #0d0d0a; --red-ink: #0d0d0a; --crop: #0d0d0a;
  background: var(--green); color: var(--ink); border-top: 0;
}
.install .install-card { background: var(--paper); }
.install .marker { background: var(--ink); }
.install .install-num { color: var(--ink); }

@media (max-width: 1000px) {
  .intro::before, .how::before, .privacy::before, .install::before { inset: 20px 16px; }
  .topbar-nav { display: none; }
}
@media (max-width: 720px) {
  .intro::before, .how::before, .privacy::before, .install::before { display: none; }
  h2 { letter-spacing: -0.055em; }
}

/* "Uma seta muda tudo": laid out like a feature card, on a white panel-coloured field. */
.math { padding: 28px 28px 0; }
.math-intro h3 { font-size: 22px; letter-spacing: -0.05em; line-height: 1.12; max-width: 14ch; text-transform: none; }
.math-intro p { margin: 8px 0 32px; color: var(--muted); }
.math-body { margin: 0 -28px; border-top: 1px solid var(--rule); background: #fff; }
:root[data-theme="dark"] .math-body { background: var(--paper-2); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .math-body { background: var(--paper-2); } }
@media (max-width: 640px) { .math { padding: 24px 24px 0; } .math-body { margin: 0 -24px; } }

/* Comprar — the price, what is and is not included, and who sells */
.price { display: flex; align-items: baseline; gap: 16px; margin-top: 32px; flex-wrap: wrap; }
.price-value { font-size: clamp(56px, 7vw, 84px); font-weight: 500; letter-spacing: -0.06em; line-height: 1; }
.section-heading .button-solid { margin-top: 24px; }
.pay-note { margin-top: 12px; font-size: 13px; color: var(--muted); }
.section-heading .specs { margin-top: 40px; }
.inline { border-bottom: 1px solid var(--rule-strong); }
.inline:hover { border-bottom-color: var(--ink); }
.install-cards { display: grid; gap: 24px; }
.install-lede { padding: 16px 20px; border-bottom: 1px solid var(--rule); }
.not-included { list-style: none; padding: 0; }
.not-included li {
  display: flex; align-items: center; gap: 12px; min-height: var(--row); padding: 8px 20px;
  border-bottom: 1px solid var(--rule); color: var(--muted);
}
.not-included li:last-child { border-bottom: 0; }
.not-included li::before { content: ""; width: 7px; height: 7px; flex: none; background: var(--red); }
.seller { margin-top: 56px; border-top: 1px solid var(--rule); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; column-gap: 32px; }
.seller-info { display: flex; flex-wrap: wrap; gap: 4px 24px; padding: 12px 0; font-size: 12px; color: var(--muted); }
.legal-links { display: flex; flex-wrap: wrap; font-size: 12px; letter-spacing: 0.12em; }
.legal-links a { height: var(--row); display: flex; align-items: center; padding-left: 24px; color: var(--muted); }
.legal-links a:hover { color: var(--ink); }

@media (max-width: 720px) {
  .seller { margin-top: 40px; }
  .legal-links a { padding: 0 20px 0 0; }
  .install-lede { padding: 14px 16px; }
  .not-included li { padding: 8px 16px; }
}

/* Documents: terms, privacy, refund */
.doc-head { border-bottom: 1px solid var(--rule); }
.doc-head .shell { height: 64px; display: flex; align-items: center; justify-content: space-between; }
.doc { width: min(760px, 100% - 40px); margin: 0 auto; padding: 72px 0 120px; }
.doc h1 { font-size: clamp(30px, 5vw, 44px); letter-spacing: -0.045em; }
.doc .updated { margin-top: 12px; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.doc > .lede { margin-top: 24px; max-width: none; }
.doc section { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--rule); }
.doc h2 { font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 400; }
.doc section > * + * { margin-top: 14px; }
.doc p, .doc li { color: var(--muted); }
.doc ul { padding-left: 20px; }
.doc li + li { margin-top: 6px; }
.doc li::marker { color: var(--red-ink); }
.doc strong { color: var(--ink); font-weight: 500; }
.doc a:not(.brand):not(.text-link) { border-bottom: 1px solid var(--rule-strong); color: var(--ink); }

.pay-note + .text-link { margin-top: 16px; }

/* Highlighter blocks and dashed structure — from butterfly.so and baseten.co.
   A flat colour behind the phrase that matters, in the icon's own green and red. */
.hl { padding: 0 0.12em; margin-inline: -0.12em; color: var(--paper); box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.hl.g { background: var(--green); color: #0d0d0a; }
.hl.r { background: var(--red); color: #fff; }
.hl.k { background: #0d0d0a; color: var(--green); }
h1 em, h1 em.r { padding: 0 0.1em; margin-inline: -0.1em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
h1 em { background: var(--green); color: #0d0d0a; }
h1 em.r { background: var(--red); color: #fff; }

.features { border-top-style: dashed; border-left-style: dashed; }
.card { border-right-style: dashed; border-bottom-style: dashed; }
.card-shot { border-top-style: dashed; }
.steps, .faq-list { border-top-style: dashed; }
.step + .step { border-left-style: dashed; }
.faq details { border-bottom-style: dashed; }
.faq summary::after { border-left-style: dashed; }
.install-card { border-style: dashed; }
@media (max-width: 1000px) { .step, .step + .step { border-left-style: none; border-bottom-style: dashed; } }

/* Scroll: highlights wipe in, cells arrive one after another, crop marks
   close in on the section. Only where .reveal is set (never with reduced motion). */
.hl, h1 em { background-repeat: no-repeat; background-position: 0 0; background-size: 100% 100%; transition: background-size 0.7s cubic-bezier(.2, .7, .2, 1) 0.25s, color 0.2s ease 0.45s; }
.hl.g, h1 em { background-image: linear-gradient(var(--green), var(--green)); background-color: transparent; }
.hl.r, h1 em.r { background-image: linear-gradient(var(--red), var(--red)); background-color: transparent; }
.hl.k { background-image: linear-gradient(#0d0d0a, #0d0d0a); background-color: transparent; }
.reveal:not(.is-in) .hl { background-size: 0% 100%; color: inherit; }
@media (prefers-reduced-motion: no-preference) {
  h1 em { animation: wipe 0.8s cubic-bezier(.2, .7, .2, 1) 0.5s backwards; }
  h1 em.r { animation-delay: 0.75s; }
  @keyframes wipe { from { background-size: 0% 100%; color: var(--ink); } }
}

.reveal:not(.is-in) :is(.state, .card, .step, .faq details, .install-steps li) { opacity: 0; transform: translateY(12px); }
:is(.state, .card, .step, .faq details, .install-steps li) { transition: opacity 0.6s ease, transform 0.6s cubic-bezier(.2, .7, .2, 1); }
.reveal.is-in :is(.state, .card, .step, .faq details, .install-steps li):nth-child(2) { transition-delay: 0.08s; }
.reveal.is-in :is(.state, .card, .step, .faq details, .install-steps li):nth-child(3) { transition-delay: 0.16s; }
.reveal.is-in :is(.state, .card, .step, .faq details, .install-steps li):nth-child(4) { transition-delay: 0.24s; }
.reveal.is-in :is(.faq details):nth-child(n + 5) { transition-delay: 0.32s; }
.card { transition: background 0.25s, opacity 0.6s ease, transform 0.6s cubic-bezier(.2, .7, .2, 1); }

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .intro::before, .how::before, .privacy::before, .install::before {
      animation: close-in linear both; animation-timeline: view(); animation-range: entry 0% cover 40%;
    }
    @keyframes close-in { from { inset: 96px 8px; opacity: 0; } to { inset: 32px 32px; opacity: 1; } }
  }
}

/* Hero: the statement sits left and large, the panel hangs on the right. */
@media (min-width: 721px) {
  .hero-copy { align-items: flex-start; text-align: left; justify-content: center; padding-bottom: 72px; }
  .hero-copy::before { left: calc(50% - 50vw); right: calc(50% - 50vw); inset-block: -6%; background: radial-gradient(38% 56% at 36% 52%, var(--hero-scrim) 0, transparent 74%); }
  .hero-copy h1 { font-size: clamp(40px, 6.2vw, 92px); letter-spacing: -0.065em; line-height: 1.08; }
  .hero-copy .lede { font-size: 16px; max-width: 44ch; }
  .hero-copy > * + * { margin-top: 28px; }
  .hero-copy .hero-mark + h1 { margin-top: 36px; }
  .hero-actions { justify-content: flex-start; gap: 28px; }
}
/* The arrow gets its own square cell, as on baseten's buttons. */
.hero-actions .button-solid { padding-right: 0; gap: 20px; }
.hero-actions .button-solid span[aria-hidden] {
  width: 52px; height: 100%; display: grid; place-items: center;
  border-left: 1px solid rgb(246 242 230 / 22%);
}

/* Fragments of the panel: the same rows, arrows and rules, alive. */
.frag { background: #fff; padding: 0; margin-bottom: 0; }
:root[data-theme="dark"] .frag { background: var(--paper-2); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .frag { background: var(--paper-2); } }
.frag .math-row:first-child { border-top: 0; }
.frag .math-row { transition: opacity 0.3s; }
.frag-line { display: flex; align-items: center; justify-content: space-between; height: var(--row); padding: 0 16px; border-top: 1px solid var(--rule); font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.math-dot { flex: none; width: 5px; height: 5px; border-radius: 50%; background: var(--green); opacity: 0; transition: opacity 0.3s; }
.math-row.is-active .math-dot { opacity: 1; animation: breathe 2s ease-in-out infinite; }
.math-row button.up, .math-row button.down { border: 0; padding: 0; background: transparent; font: inherit; cursor: pointer; }
.math-row button.down { border-left: 1px solid var(--rule); }
.math-row button:not(.is-on):hover { background: var(--hover); }
.math-row button:not(.is-on):active { background: var(--press); }
.math-row button:focus-visible { outline-offset: -3px; }
.frag-foot { display: grid; grid-template-columns: var(--row) 1fr 1fr; height: var(--row); border-top: 1px solid var(--rule); font-size: 12px; letter-spacing: 0.08em; }
.frag-foot > * { display: grid; place-items: center; border: 0; background: transparent; padding: 0; }
.frag-foot > * + * { border-left: 1px solid var(--rule); }
.frag-pause { cursor: pointer; }
.frag-pause:hover { background: var(--hover); }
.frag-pause:active { background: var(--press); }
.frag-pause::before { content: ""; width: 10px; height: 12px; background: linear-gradient(to right, currentColor 0 30%, transparent 30% 70%, currentColor 70%); }
.frag-pause[aria-pressed="true"]::before { width: 11px; background: currentColor; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.frag-pause:focus-visible { outline-offset: -3px; }
.frag-foot button { font: inherit; letter-spacing: inherit; color: inherit; cursor: pointer; }
.frag-reset:hover { background: var(--hover); }
.frag-reset:active { background: var(--press); }
.frag-foot button:focus-visible { outline-offset: -3px; }
.frag-foot .frag-quit { color: var(--muted); opacity: 0.4; cursor: not-allowed; }

/* Safari paints a child's hover tint outside an ancestor's rounded overflow clip,
   which showed square corners beyond the panel. The corner buttons are clipped
   themselves, so the tint can never leave the panel's outline. */
.popover { isolation: isolate; }
.demo-footer { overflow: hidden; border-bottom-left-radius: calc(21 * var(--desktop-unit)); border-bottom-right-radius: calc(21 * var(--desktop-unit)); }
.demo-footer button:first-child { clip-path: inset(0 round 0 0 0 calc(21 * var(--desktop-unit))); }
.demo-footer button:last-child { clip-path: inset(0 round 0 0 calc(21 * var(--desktop-unit)) 0); }

/* As in the app, the row's × only takes room while the pointer (or keyboard focus) is on it,
   so a long name like this site's keeps its full middle-truncated form at rest. */
.demo-panel .demo-stop { width: 0; margin-left: calc(-6 * var(--desktop-unit)); overflow: hidden; }
.demo-row:hover .demo-stop, .demo-row:focus-within .demo-stop { width: calc(12 * var(--desktop-unit)); margin-left: 0; }
@media (hover: none) { .demo-panel .demo-stop { width: calc(12 * var(--desktop-unit)); margin-left: 0; } }

/* The name clips its overflow for the ellipsis; with line-height 1 that also cut the
   descenders (the tail of g, y, p). A taller line box keeps them whole. */
.demo-name { line-height: 1.5; padding-block: 0.1em; }