/* MacBat site. Colours, glass and type follow the feature reel, which follows the app. */
:root {
  color-scheme: dark;
  --page: #5a3a9e; /* the blend's average, under the canvas while it loads */
  --ink: #f3f0ff;
  --muted: rgba(255, 255, 255, .72);
  --mint: #00DEC5;
  --teal: #34D1BF;
  --dusk: #4320B9;
  --ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, system-ui, sans-serif;
  --display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, system-ui, sans-serif;
  --gutter: max(16px, env(safe-area-inset-left));
  --foot-h: 76px;
}
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--page); -webkit-text-size-adjust: 100%; }
/* The whole page sits on the onboarding blend, like the app's own windows. */
.backdrop { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -10; }
/* Past the hero the page settles into macOS Dark Mode: the window background,
   with a trace of the blend left showing, like wallpaper tinting. */
.backdrop-dark { position: fixed; inset: 0; z-index: -9; background: rgb(33, 31, 39); opacity: 0; pointer-events: none; }
body {
  margin: 0; background: transparent; color: var(--ink); font: 400 17px/1.5 var(--ui);
  -webkit-font-smoothing: antialiased; overflow-x: clip;
}
a { color: inherit; }
img, svg { display: block; }

/* ---------- glass pills (NeoGlass: clear glass, dark, black 0.14 tint) ---------- */
.pill {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  border-radius: 999px; text-decoration: none; white-space: nowrap; color: #fff;
  transition: transform .18s cubic-bezier(.3, .7, .4, 1), background-color .18s;
}
.pill:active { transform: scale(.96); }
.pill:focus-visible { outline: 2px solid var(--mint); outline-offset: 3px; }
.pill-mint { font-weight: 600; }

/* The capsule itself: an SVG squircle drawn by glassCapsule() in ui.js — the
   continuous-corner ends of NSGlassEffectView, which border-radius can't make. */
.pill, .npill, .ins { isolation: isolate; }
.sq { position: absolute; left: 0; top: 0; z-index: -1; overflow: visible; pointer-events: none; filter: drop-shadow(0 2px 6px rgba(0,0,0,.2)); }
.sq path { transition: fill .18s, opacity .22s; }
.sq .base { fill: rgba(210,210,225,.1); }
.sq .fn { fill: rgba(6,6,10,.72); opacity: 0; }
.sq .fc { fill: rgba(52,209,191,.68); opacity: 0; }
.sq .rim { stroke-width: .5; }
.sq .edge { stroke-width: 3.5; }
.npill.on .sq .edge { opacity: .5; }
.npill.on .sq .rim { opacity: .6; }
.pill-glass:hover .sq .base { fill: rgba(255,255,255,.14); }
/* Controlled, selected: the teal fill the panel uses. */
.pill-mint .sq .base { fill: rgba(52,209,191,.78); }
.pill-mint .sq { filter: drop-shadow(0 8px 16px rgba(0,222,197,.35)); }
.pill-mint:hover .sq .base { fill: rgba(52,209,191,.9); }
.pill-sm { height: 32px; padding: 0 16px; font: 500 14px/1 var(--ui); }
.pill-lg { height: 50px; padding: 0 26px; font-size: 17px; line-height: 1; }

/* ---------- navigation ---------- */
.nav {
  position: fixed; inset: 0 0 auto; z-index: 50; height: 56px; padding: 0 var(--gutter);
  display: flex; align-items: center; justify-content: space-between;
  transition: background-color .3s, box-shadow .3s, opacity .5s;
}
.nav.scrolled {
  background: rgba(255,255,255,.08); box-shadow: 0 .5px 0 rgba(255,255,255,.18);
  -webkit-backdrop-filter: blur(20px) saturate(1.5); backdrop-filter: blur(20px) saturate(1.5);
}
.nav-brand { display: flex; align-items: center; gap: 9px; text-decoration: none; font: 700 17px/1 var(--display); letter-spacing: -.01em; }
.nav-brand img { width: 28px; height: 28px; }

/* ---------- hero ---------- */
.hero {
  position: relative; min-height: 100vh; min-height: 100svh; overflow: hidden; isolation: isolate;
  display: grid; place-items: center; padding: 96px var(--gutter) 72px; text-align: center;
}
.hero-stack { display: flex; flex-direction: column; align-items: center; max-width: 900px; }
.hero-icon { height: var(--icon-rest, 72px); display: flex; align-items: center; justify-content: center; }
.hero-icon svg { flex: none; overflow: visible; transform-origin: 50% 50%; will-change: transform; }
.hero-title { margin: 30px 0 0; font-weight: inherit; }
.wordmark {
  display: block; font: 800 clamp(64px, 12vw, 128px)/1 var(--display); letter-spacing: -.045em; color: #fff;
}
.wordmark .w {
  background: linear-gradient(100deg, #fff 0%, #fff 42%, #9ffff1 48%, #fff 54%, #fff 100%);
  background-size: 300% 100%; background-position: 0 0; -webkit-background-clip: text; background-clip: text; color: transparent;
}
.tagline {
  display: block; margin-top: 18px; font: 500 clamp(21px, 3vw, 31px)/1.25 var(--display); letter-spacing: -.01em;
  color: rgba(255,255,255,.88); text-wrap: balance;
}
.w { display: inline-block; white-space: pre; }
.hero-cta { margin-top: 38px; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.hero-meta { margin: 22px 0 0; font-size: 14px; line-height: 1.55; color: var(--muted); text-wrap: balance; }
.hero-meta span { color: rgba(255,255,255,.55); }

/* Before the script takes over (and without it) everything is simply shown. */
.intro .hero-title:not(.split), .intro #hero-cta, .intro .hero-meta, .intro .hero-icon svg { opacity: 0; }
.intro .nav { opacity: 0; }

@media (max-width: 560px) {
  .pill-lg { height: 48px; padding: 0 22px; font-size: 16px; }
  .hero-cta { flex-direction: column; align-items: stretch; width: min(100%, 320px); }
}

/* ---------- feature sections ---------- */
.feature { max-width: 1200px; margin: 0 auto; padding: clamp(96px, 13vw, 170px) var(--gutter) 0; }
/* Captions: three steps only — a small label, the headline, then one body block
   (the first sentence brighter). Moderate sizes and even spacing so it reads at
   a glance and sits balanced beside its window. */
.cap { max-width: 34em; }
.cap .k { margin: 0; font: 600 15px/1.2 var(--ui); letter-spacing: .01em; color: rgba(255,255,255,.62); }
.cap h2 { margin: 12px 0 0; max-width: 15em; font: 700 clamp(34px, 4.2vw, 50px)/1.08 var(--display); letter-spacing: -.025em; text-wrap: balance; }
.cap .lead { margin: 22px 0 0; font: 500 clamp(19px, 1.7vw, 22px)/1.4 var(--display); color: rgba(255,255,255,.9); text-wrap: pretty; }
.cap .more { margin: 10px 0 0; font: 400 17px/1.55 var(--ui); color: rgba(255,255,255,.66); text-wrap: pretty; }
.feature > .stage { margin-top: 48px; }
@media (min-width: 900px) {
  .feature.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 5vw, 72px); align-items: center; }
  .feature.split > .stage { margin-top: 0; }
}
@media (max-width: 899px) { .feature.split > .stage { margin-top: 36px; } }

/* Entrances: the headline's words rise out of a blur; the rest fades up once. */
.cap .k, .cap .lead, .cap .more { transition: opacity .7s, transform .7s cubic-bezier(.2, .7, .2, 1); }
.cap:not(.shown) .k, .cap:not(.shown) .lead, .cap:not(.shown) .more { opacity: 0; transform: translateY(12px); }
.cap.shown .lead { transition-delay: .3s; } .cap.shown .more { transition-delay: .4s; }

/* ---------- stages: the Mac's screen, drawn at real points and scaled ---------- */
.stage {
  /* A Mac display's corner: small enough to sit inside the 24 pt menu bar. */
  position: relative; border-radius: 10px; overflow: hidden; background: #4320B9;
  /* A Mac window on the page: hairline edge and a soft, coloured shadow — no black. */
  box-shadow: 0 0 0 .5px rgba(255,255,255,.28), 0 24px 60px -20px rgba(40,12,90,.45);
}
.screen {
  position: absolute; left: 0; top: 0; transform-origin: 0 0; overflow: hidden; color: #fff; font-family: var(--ui); user-select: none; -webkit-user-select: none;
  /* The desktop: one plain gradient from the app's violet (#4320B9), bright
     enough to stand out from the Dark Mode page around it. */
  background: linear-gradient(165deg, #2b2a8f 0%, #4320B9 45%, #7a4fd6 100%);
}
.screen canvas.wall { position: absolute; inset: 0; width: 100%; height: 100%; }

.mb {
  /* The macOS menu bar on a display without a notch: 24 pt, 13 pt text, transparent. */
  position: absolute; left: 0; top: 0; height: 24px; width: calc(100% / var(--mbz, 1)); transform: scale(var(--mbz, 1)); transform-origin: 0 0;
  display: flex; align-items: center; justify-content: space-between; padding: 0 12px 0 14px;
  font: 500 13px/1 var(--ui); color: #fff; z-index: 4; white-space: nowrap;
}
.mb-left, .mb-right { display: flex; align-items: center; }
.mb-left { gap: 19px; } .mb-left b { font-weight: 700; }
.mb-left .apple { font: 400 15px/1 -apple-system, BlinkMacSystemFont, sans-serif; margin-right: 2px; transform: translateY(-.5px); }
.mb-right { gap: 14px; margin-left: auto; }
.mb .glyph { width: 17px; height: 13px; flex: none; }
.mb .glyph.cc { width: 16px; height: 14px; }
.mb .glyph.wifi { width: 16px; height: 12px; }
.status { position: relative; display: flex; align-items: center; height: 22px; padding: 0 6px; margin: 0 -2px; border-radius: 11px; }
.status .hi { position: absolute; inset: 0; border-radius: 11px; background: rgba(255,255,255,.22); opacity: 0; transition: opacity .25s; }
.status.open .hi { opacity: 1; }
/* The pointer and its click ripple, for the menu opening. */
.cursor { position: absolute; left: 0; top: 0; width: 18px; height: 25px; z-index: 20; opacity: 0; transform-origin: 2px 2px; pointer-events: none; filter: drop-shadow(0 1.5px 2.5px rgba(0,0,0,.45)); }
.cursor svg { display: block; width: 100%; height: 100%; }
.ripple { position: absolute; left: 0; top: 0; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.85); opacity: 0; z-index: 19; pointer-events: none; }
.sthost { position: relative; display: flex; align-items: center; }
.sthost .ic { position: relative; height: 14px; transition: width .25s cubic-bezier(.3,.7,.4,1); }
.sthost .ic > div { position: absolute; left: 0; top: 50%; }
.sthost svg { display: block; overflow: visible; }
.sttitle { font: 400 12px/1 var(--ui); margin-left: 4px; white-space: pre; }
.sttitle:empty { display: none; }
.bi .body .f { fill: rgba(255,255,255,.3); }
.bi .body .s { fill: none; stroke: rgba(255,255,255,.3); }
.bi.cl .body .f { fill: #fff; }
.bi.cl .body .s { fill: none; stroke: #fff; }

/* Neo panel pills (NeoGlass on macOS 27: clear glass, dark appearance) */
.prow { position: absolute; display: flex; gap: 8px; justify-content: flex-end; }
.npill {
  position: relative; height: 38px; padding: 0 20px; display: flex; align-items: center; border: 0; margin: 0; background: none;
  font: 400 15px/1 var(--ui); color: rgba(240,240,245,.88); white-space: nowrap; cursor: default;
  /* No transition on transform: the opening animation sets it every frame. */
}
.npill.on { color: #fff; }
/* Hover, as NeoBotaoPilula: the pill shrinks a touch and its tint deepens. */
.npill { transition: color .2s, scale .22s cubic-bezier(.3,1.4,.5,1); }
.npill.hov { scale: .955; }
.npill.hov:not(.on) .sq .base { fill: rgba(255,255,255,.05); }
/* Processes: revealed beside Sentinel on hover; its place is always kept. */
.npill.aux { opacity: 0; translate: 12px 0; transition: opacity .24s, translate .24s cubic-bezier(.2,.8,.3,1), color .2s, scale .22s; }
.npill.aux.show { opacity: 1; translate: 0 0; } .npill.on .sq .fn { opacity: 1; }
/* While the menu opens, the moving pieces get their own layers. */
.panel.animating .npill, .panel.animating .ins, .panel.animating .procs { will-change: transform, opacity; }

.ins {
  position: absolute; height: 21px; padding: 0 10px; display: flex; align-items: center;
  font: 400 12px/1 var(--ui); color: rgba(255,255,255,.86); white-space: nowrap;
}
.ins .sq { filter: none; }
.ins .sq .base { fill: rgba(38,36,48,.8); }
.ins .sq .sheen { display: none; }
.ins .sq .rim { stroke: rgba(255,255,255,.06); stroke-width: .5; }
.curtain { position: absolute; inset: 0; background: rgba(0,0,0,.10); z-index: 3; pointer-events: none; opacity: 0; }
.panel { position: absolute; inset: 0; z-index: 6; }

/* "Choose Icon…" window: the onboarding icon page */
.pwin {
  position: absolute; width: 720px; height: 560px; border-radius: 26px; z-index: 7; background: transparent;
  box-shadow: 0 0 0 .5px rgba(255,255,255,.18), 0 28px 70px rgba(0,0,0,.5), 0 10px 24px rgba(0,0,0,.3);
}
.pwin-in { position: absolute; inset: 0; border-radius: 26px; overflow: hidden; clip-path: inset(0 round 26px); }
.pwin canvas { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 26px; }
.gridclip {
  position: absolute; inset: 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent 108px, #000 136px, #000 452px, transparent 480px);
  mask-image: linear-gradient(to bottom, transparent 108px, #000 136px, #000 452px, transparent 480px);
}
.doc { position: relative; width: 720px; margin-top: 108px; }
.ghead { position: absolute; font: 600 13px/16px var(--ui); color: rgba(235,235,245,.6); }
.card { position: absolute; width: 100px; height: 86px; border-radius: 12px; transition: background-color .15s; }
.card .ico { position: absolute; left: 14px; top: 11px; width: 72px; height: 38px; display: flex; align-items: center; justify-content: center; }
.card .ico svg { display: block; overflow: visible; }
.card .nm { position: absolute; left: 4px; right: 4px; bottom: 8px; text-align: center; font: 400 11px/13px var(--ui); color: rgba(235,235,245,.6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card.hov { background: rgba(255,255,255,.1); }
.card.sel { background: rgba(10,132,255,.12); box-shadow: inset 0 0 0 2px #0A84FF; }
.card.sel .nm { color: rgba(255,255,255,.86); }
.phead { position: absolute; left: 0; right: 0; top: 20px; text-align: center; pointer-events: none; }
.phead h3 { margin: 0; font: 700 22px/1.2 var(--ui); }
.phead p { margin: 10px 0 0; font: 400 13px/1.3 var(--ui); color: rgba(235,235,245,.6); }
.round {
  position: absolute; right: 8px; top: 8px; width: 36px; height: 36px; border-radius: 18px; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.02) 45%, rgba(255,255,255,.05)), rgba(0,0,0,.14);
  box-shadow: inset 0 .7px 0 rgba(255,255,255,.62), inset 0 -.6px 0 rgba(255,255,255,.22), inset 0 0 0 .6px rgba(255,255,255,.2);
}
.done {
  position: absolute; left: 50%; bottom: 24px; height: 30px; padding: 0 20px; transform: translateX(-50%); border-radius: 15px; display: flex; align-items: center;
  font: 500 13px/1 var(--ui); color: #fff; background: #0A84FF;
}

/* Controlled: the selected pills turn teal, as in the app's panel. */
.panel.ctl .npill.on .sq .fn { opacity: 0; }
.panel.ctl .npill.on .sq .fc, .npill.teal .sq .fc { opacity: 1; }
.npill.teal .sq .fn { opacity: 0; }

/* The processes view (alternates with the insights in the app). */
.procs { position: absolute; width: 250px; height: 80px; }
.proc { position: absolute; left: 10px; right: 0; height: 21px; font: 400 12px/21px var(--ui); color: rgba(255,255,255,.86); }
.proc .n { position: absolute; left: 0; top: 0; right: 118px; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.proc .tr { position: absolute; right: 46px; top: 8.5px; width: 64px; height: 4px; border-radius: 2px; background: rgba(255,255,255,.2); }
.proc .br { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 2px; }
.proc .v { position: absolute; right: 0; top: 0; width: 38px; text-align: right; font-variant-numeric: tabular-nums; }

/* Stage on the left, caption on the right, for rhythm down the page. */
@media (min-width: 900px) {
  .feature.split.flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .feature.split.flip > .stage { order: -1; }
}

/* ---------- Battery Data window: a standard AppKit window, dark ---------- */
.dwin { position: absolute; width: 980px; height: 620px; border-radius: 26px; overflow: hidden; z-index: 7; background: #1e1e20;
  box-shadow: 0 0 0 .5px rgba(255,255,255,.16), 0 30px 80px rgba(0,0,0,.55), 0 10px 26px rgba(0,0,0,.35); }
.dwin .side { position: absolute; left: 8px; top: 8px; bottom: 8px; width: 222px; border-radius: 19px; background: rgba(60,60,66,.62); box-shadow: inset 0 0 0 .5px rgba(255,255,255,.09); }
.dwin .lights { position: absolute; left: 14px; top: 14px; display: flex; gap: 9px; }
.dwin .lights i { width: 13px; height: 13px; border-radius: 50%; display: block; }
.dwin .sgrp { position: absolute; left: 18px; top: 56px; font: 600 11px/1 var(--ui); color: rgba(235,235,245,.5); }
.dwin .srow { position: absolute; left: 10px; right: 10px; height: 28px; border-radius: 8px; display: flex; align-items: center; gap: 8px; padding: 0 10px;
  font: 400 13px/1 var(--ui); color: rgba(255,255,255,.88); transition: background-color .18s; }
.dwin .srow svg { width: 17px; height: 17px; flex: none; }
.dwin .srow.sel { background: rgba(255,255,255,.13); }
.dwin .dtitle { position: absolute; left: 252px; top: 17px; font: 700 15px/18px var(--ui); }
.dwin .tbtn { position: absolute; isolation: isolate; top: 9px; height: 34px; display: flex; align-items: center; justify-content: center; gap: 6px; color: rgba(255,255,255,.8); font: 400 13px/1 var(--ui); }
.tbtn .sq { filter: none; } .tbtn .sq .base { fill: rgba(255,255,255,.08); } .tbtn .sq .sheen { display: none; } .tbtn .sq .rim { stroke: url(#sqRimSoft); }
.dwin .table { position: absolute; left: 238px; top: 52px; right: 0; bottom: 0; overflow: hidden; }
.dwin .thead, .dwin .trow { position: absolute; left: 10px; height: 24px; display: flex; align-items: center; white-space: nowrap; }
.dwin .thead { top: 4px; font: 400 11px/1 var(--ui); color: rgba(235,235,245,.55); }
.dwin .trow { font: 400 11px/1 var(--ui); color: rgba(255,255,255,.88); border-radius: 6px; font-variant-numeric: tabular-nums; }
.dwin .trow.alt { background: rgba(255,255,255,.04); }
.dwin .trow.cur { font-weight: 600; }
.dwin .c { flex: none; padding: 0 7px; text-align: right; }
.dwin .c.l { text-align: left; }
.dwin .c.na { color: rgba(235,235,245,.3); }
.dwin .hsep { position: absolute; left: 10px; right: 0; top: 30px; height: .5px; background: rgba(255,255,255,.12); }
.dwin .rows { position: absolute; inset: 0; transition: opacity .25s; }

/* Sentinel's processes window (SentinelaWindowController), in dark mode. */
.swin { position: absolute; width: 540px; height: 366px; border-radius: 26px; overflow: hidden; z-index: 7; background: #1e1e1e; transform-origin: 0 0;
  box-shadow: 0 0 0 .5px rgba(255,255,255,.16), 0 30px 80px rgba(0,0,0,.55), 0 10px 26px rgba(0,0,0,.35); }
.swin .lights { position: absolute; left: 20px; top: 20px; display: flex; gap: 9px; }
.swin .lights i { width: 13px; height: 13px; border-radius: 50%; display: block; }
.swin .stitle { position: absolute; left: 90px; top: 9px; height: 34px; display: flex; flex-direction: column; justify-content: center; white-space: nowrap; }
.swin .stitle b { font: 700 15px/18px var(--ui); }
.swin .stitle span { font: 400 11px/13px var(--ui); color: rgba(235,235,245,.55); }
.swin .tbtn { position: absolute; isolation: isolate; top: 9px; height: 34px; display: flex; align-items: center; justify-content: center; gap: 6px; color: rgba(255,255,255,.8); font: 400 13px/1 var(--ui); }
.swin .seg { left: 229px; width: 128px; gap: 0; padding: 0 3px; }
.swin .seg span { position: relative; z-index: 1; flex: 1; text-align: center; font-size: 13px; color: rgba(255,255,255,.88); }
.swin .seg .knob { position: absolute; z-index: 1; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px); border-radius: 14px; background: rgba(255,255,255,.16); transition: transform .28s cubic-bezier(.3,1.3,.5,1); }
.swin .seg.on1 .knob { transform: translateX(100%); }
.swin .stable { position: absolute; left: 10px; right: 10px; top: 52px; bottom: 0; overflow: hidden; }
.swin .shead { position: absolute; left: 0; right: 0; top: 0; height: 28px; font: 500 11px/28px var(--ui); color: rgba(235,235,245,.55); box-shadow: 0 .5px 0 rgba(255,255,255,.1); }
.swin .shead .c { position: absolute; top: 0; height: 28px; padding: 0 8px; box-sizing: border-box; white-space: nowrap; }
.swin .shead .c + .c::before { content: ""; position: absolute; left: 0; top: 7px; height: 14px; width: .5px; background: rgba(255,255,255,.14); }
.swin .shead .sort { position: absolute; right: 7px; top: 11px; width: 9px; height: 6px; }
.swin .sbody { position: absolute; left: 0; right: 0; top: 32px; bottom: 0; }
.swin .srow2 { position: absolute; left: 0; right: 0; height: 24px; border-radius: 6px; font: 400 11px/24px var(--ui); color: rgba(255,255,255,.88); font-variant-numeric: tabular-nums; transition: top .3s; }
.swin .srow2.alt { background: rgba(255,255,255,.04); }
.swin .srow2 .c { position: absolute; top: 0; height: 24px; padding: 0 8px; box-sizing: border-box; white-space: nowrap; overflow: hidden; }
.swin .srow2 .n { display: flex; align-items: center; gap: 6px; }
.swin .srow2 .ic { width: 16px; height: 16px; flex: none; }
.swin .srow2 .ic svg { display: block; width: 16px; height: 16px; }
.swin .srow2 .t { overflow: hidden; text-overflow: ellipsis; }
.swin .srow2 .v { text-align: right; }
.swin .srow2.locked .c { color: rgba(235,235,245,.55); }
.swin .srow2 .lim { display: flex; justify-content: flex-end; padding-right: calc(5% + 8px); }
.swin .pop { display: inline-flex; align-items: center; gap: 5px; }
.swin .pop svg { width: 8px; height: 5px; opacity: .8; }
.swin .sys { font-size: 12px; color: rgba(235,235,245,.3); padding-right: 13px; }
/* NSMenu, dark: glass sheet, accent highlight in the inset rounded shape. */
.nsmenu { position: absolute; z-index: 9; padding: 5px; min-width: 200px; border-radius: 12px; transform-origin: 0 0; white-space: nowrap;
  background: rgba(40,40,44,.95); -webkit-backdrop-filter: blur(24px) saturate(1.6); backdrop-filter: blur(24px) saturate(1.6);
  box-shadow: 0 0 0 .5px rgba(255,255,255,.18), inset 0 .5px 0 rgba(255,255,255,.12), 0 14px 38px rgba(0,0,0,.5); transition: opacity .12s; }
.nsmenu .mi { position: relative; height: 22px; padding: 0 16px 0 24px; border-radius: 7px; font: 400 13px/22px var(--ui); color: rgba(255,255,255,.9); }
.nsmenu .mi .ck { position: absolute; left: 8px; top: 0; font-size: 12px; font-weight: 600; }
.nsmenu .mi.hl { background: #0A64D8; color: #fff; }
.nsmenu .sep { height: .5px; margin: 5px 10px; background: rgba(255,255,255,.14); }

/* ---------- Specs and Notarized ---------- */
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.specs-sec { text-align: center; }
.specs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px 24px; }
.specs li { display: flex; flex-direction: column; align-items: center; }
.specs .big { margin: 0; font: 800 clamp(56px, 7.5vw, 104px)/1 var(--display); letter-spacing: -.05em; }
.specs .lab { margin: 14px 0 0; font: 500 clamp(16px, 1.6vw, 20px)/1.3 var(--display); color: rgba(255,255,255,.78); text-wrap: balance; }
.specs .seal { display: flex; align-items: center; height: 1em; }
.specs .seal svg { width: .92em; height: .92em; }
.privacy { margin: clamp(56px, 7vw, 88px) auto 0; max-width: 34ch; font: 500 clamp(18px, 2vw, 23px)/1.35 var(--display); color: rgba(255,255,255,.7); text-wrap: balance; }
@media (max-width: 720px) { .specs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Each figure rises into place once, the first time it's in view. */
.reveal { transition: opacity .8s, transform .8s cubic-bezier(.2, .7, .2, 1), filter .8s; }
.reveal:not(.shown) { opacity: 0; transform: translateY(18px) scale(1.06); filter: blur(8px); }

/* ---------- Get MacBat: the end card ---------- */
/* Fills the screen above the footer and centres the card in it, so at the very
   end of the page the card sits in the middle (the top bar's 56 px set aside). */
.get { max-width: 900px; margin: 0 auto; min-height: calc(100vh - var(--foot-h, 76px)); min-height: calc(100svh - var(--foot-h, 76px));
  padding: 88px var(--gutter) 40px; box-sizing: border-box; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.get-icon { width: 176px; height: 176px; filter: drop-shadow(0 22px 50px rgba(0, 222, 197, .35)); }
.get-title { margin: 18px 0 0; font: 800 clamp(64px, 10vw, 104px)/1 var(--display); letter-spacing: -.045em; }
.get-try { margin: 14px 0 0; font: 600 clamp(24px, 3vw, 34px)/1.2 var(--display); letter-spacing: -.015em; }
.get .hero-cta { margin-top: 34px; }
.not-mac-note { display: none; margin: 18px 0 0; font-size: 15px; color: rgba(255,255,255,.8); }
.not-mac .not-mac-note { display: block; }
.brew { margin-top: 44px; width: min(100%, 560px); }
.brew-label { margin: 0 0 10px; font-size: 15px; color: rgba(255,255,255,.72); }
.brew-box { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 18px; border-radius: 14px; background: rgba(0,0,0,.28); box-shadow: inset 0 0 0 .5px rgba(255,255,255,.14); text-align: left; }
.brew-box code { flex: 1; min-width: 0; overflow-x: auto; white-space: nowrap; font: 500 14px/1.4 ui-monospace, "SF Mono", Menlo, monospace; color: #fff; scrollbar-width: none; }
.brew-copy { flex: none; height: 32px; padding: 0 14px; border: 0; border-radius: 9px; background: rgba(255,255,255,.12); color: #fff; font: 500 13px/1 var(--ui); cursor: pointer; transition: background-color .15s; }
.brew-copy:hover { background: rgba(255,255,255,.2); }
.brew-copy.copied { background: rgba(52,209,191,.78); }
.brew-copy:focus-visible { outline: 2px solid var(--mint); outline-offset: 2px; }
.get-fine { margin: 34px 0 0; font-size: 14px; line-height: 1.6; color: rgba(255,255,255,.7); text-wrap: balance; }
.get-fine span { color: rgba(255,255,255,.55); }

.foot { max-width: 1200px; min-height: var(--foot-h); box-sizing: border-box; margin: 0 auto; padding: 28px var(--gutter) max(28px, env(safe-area-inset-bottom)); display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between; align-items: center; font-size: 13px; color: rgba(255,255,255,.6); box-shadow: 0 -.5px 0 rgba(255,255,255,.12); }
.foot nav { display: flex; gap: 20px; }
.foot a { color: rgba(255,255,255,.75); text-decoration: none; }
.foot a:hover { color: #fff; }
.foot p { margin: 0; }