/* SystemStory website - clean light pass (November 2026). Off-white pages, pale gray bands, white rounded cards, charcoal
   headings, gray copy and familiar blue links and pills; the green SS mark stays the identity. Native product panels (.demo,
   .ev-art, .ts-art) stay dark with their own scoped tokens. System font. Motion: transform/opacity only, once per demo,
   paused offscreen, when hidden, by the visible control, and off under prefers-reduced-motion (see site.js). */
:root {
  /* --navy is the text/ink colour, --white the card, --page the page, --paper the tinted band. */
  --navy: #1D1D1F;
  --white: #FFFFFF;
  --page: #FBFBFD;
  --paper: #F5F5F7;
  --blue: #0066CC;
  --action: #0071E3;
  --orange: #F27924;
  --orange-text: #B64400;
  --muted: #6E6E73;
  --line: #D2D2D7;
  --mist: #E8E8ED;
  --sky: #F5F5F7;
  --dark: #1D1D1F;
  --control-line: #86868B;
  --deco: 0, 102, 204;
  --ink-on-light: #FFFFFF;
  --max: 1180px;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; }
body { margin: 0; background: var(--page); color: var(--navy); font: 400 16px/1.65 var(--font); -webkit-font-smoothing: antialiased; }
img, video, svg { display: block; max-width: 100%; }
img, video { height: auto; }
a { color: var(--blue); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--navy); }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; border-radius: 2px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 16px; top: -80px; z-index: 100; background: var(--navy); color: var(--ink-on-light); padding: 12px 16px; border-radius: 4px; font-weight: 600; }
.skip:focus { top: 12px; color: var(--ink-on-light); }
.wrap { max-width: var(--max); width: calc(100% - 112px); margin: 0 auto; }

h1, h2, h3 { margin: 0; font-weight: 600; color: var(--navy); }
h1 { font-size: clamp(48px, 6.2vw, 88px); line-height: 1.02; letter-spacing: -0.065em; }
h2 { font-size: clamp(34px, 4vw, 54px); line-height: 1.1; letter-spacing: -0.05em; }
h3, .h3 { font-size: clamp(24px, 2.2vw, 30px); line-height: 1.2; letter-spacing: -0.035em; }
p { margin: 14px 0 0; }
.lede { font-size: clamp(17px, 1.4vw, 19px); line-height: 1.7; color: var(--muted); margin-top: 22px; }
.eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--blue); margin: 0 0 18px; }
.small { font-size: 14px; color: var(--muted); }
.page-title { font-size: clamp(44px, 5.6vw, 80px); }
.icon { width: 22px; height: 22px; flex: none; color: var(--blue); }

/* Tinted bands (features, upgrade, invite): the same components on pale gray. */
.tint { background: var(--paper); }

/* Preview notice: every page, quiet, always visible. */
.preview-notice { background: #1C5C96; color: #FFFFFF; font-size: 13px; line-height: 1.5; text-align: center; padding: 8px 20px; }
.preview-notice strong { color: #FFFFFF; font-weight: 600; letter-spacing: 0.04em; }

/* Header */
.site-header { position: sticky; top: 0; z-index: 40; background: var(--page); border-bottom: 1px solid var(--line); }
.bar { display: flex; align-items: center; gap: 28px; min-height: 76px; }
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
/* The nav wordmark is the approved kit SVG, scaled by height. */
.brand .wordmark { height: 28px; width: auto; }
.nav { display: flex; align-items: center; gap: 28px; margin-left: auto; }
.nav a:not(.button) { color: var(--navy); text-decoration: none; font-size: 14px; font-weight: 600; padding: 6px 0; border-bottom: 1px solid transparent; }
.nav a:not(.button):hover, .nav a[aria-current="page"] { border-bottom-color: currentColor; }
.menu-toggle { display: none; margin-left: auto; min-height: 44px; padding: 8px 14px; background: var(--white); border: 1px solid var(--control-line); border-radius: 4px; font-size: 14px; font-weight: 600; cursor: pointer; }

/* Buttons and links */
.button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 13px 20px; border-radius: 4px;
  font: 600 15px/1.2 var(--font); text-decoration: none; cursor: pointer; border: 1px solid transparent; transition: background .15s ease, border-color .15s ease; }
.button.primary { background: var(--navy); color: var(--ink-on-light); }
.button.primary:hover { background: var(--dark); color: var(--ink-on-light); }
.button.secondary { background: var(--white); color: var(--navy); border-color: var(--navy); }
.button.secondary:hover { background: var(--mist); color: var(--navy); }
.button.small { min-height: 44px; padding: 10px 16px; font-size: 14px; }
.text-link { font-weight: 600; color: var(--navy); text-decoration: none; border-bottom: 1px solid currentColor; padding: 6px 0; }
.text-link:hover { color: var(--blue); }
.text-button { background: none; border: 0; border-bottom: 1px solid currentColor; padding: 4px 0; color: var(--navy); font-weight: 600; font-size: 14px; cursor: pointer; }
.actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: 32px; }

/* Status label: words first, an orange square as the only accent. */
.status { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--navy); }
.status::before { content: ""; width: 8px; height: 8px; background: var(--orange); }
.status.available::before { background: var(--blue); }
.availability { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: 14px; color: var(--muted); margin-top: 16px; }
.actions .availability { margin-top: 0; }

/* Hero */
.hero { display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); gap: 56px; align-items: center; padding: 64px 0 80px; }
.hero h1 { max-width: 9em; }
.hero-sub { margin-top: 22px; font-size: clamp(21px, 2.1vw, 27px); font-weight: 600; letter-spacing: -0.035em; line-height: 1.25; color: var(--navy); }
.hero .hero-sub + .lede { margin-top: 14px; }
.facts { display: flex; flex-wrap: wrap; gap: 6px 0; list-style: none; padding: 20px 0 0; margin: 28px 0 0; border-top: 1px solid var(--line); font-size: 14px; color: var(--muted); }
.facts li + li::before { content: "·"; margin: 0 10px; color: var(--muted); }

/* Product screenshots: a quiet sky field, a 2 px image frame, no shadow. */
.field { background: var(--sky); border-radius: 8px; padding: clamp(20px, 3.4vw, 48px); }
.field.small { padding: clamp(16px, 2.4vw, 32px); }
.shot { margin: 0; }
.shot .frame { display: block; width: 100%; border-radius: 2px; overflow: hidden; background: #1E1E1E; }
.shot .frame img { width: 100%; }
.shot figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 14px; font-size: 14px; color: var(--navy); }
.shot.narrow { max-width: 380px; }
.tag { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--navy); background: var(--white); border: 1px solid var(--line); border-radius: 4px; padding: 2px 8px; }

/* Technical backdrops: three selected areas only (hero, RAM showcase, history band). Static, low opacity, behind
   content; text sits on clear white/paper and the screenshots on their own field. */
.backdrop { position: relative; isolation: isolate; overflow: hidden; }
.backdrop::before, .backdrop::after { content: ""; position: absolute; z-index: -1; pointer-events: none; }
.backdrop-hero::before { inset: 0;
  background-image: linear-gradient(to right, rgba(var(--deco), 0.08) 1px, transparent 1px), linear-gradient(to bottom, rgba(var(--deco), 0.08) 1px, transparent 1px);
  background-size: 32px 32px; background-position: center top;
  -webkit-mask-image: radial-gradient(ellipse 55% 75% at 76% 48%, #000 25%, transparent 78%);
  mask-image: radial-gradient(ellipse 55% 75% at 76% 48%, #000 25%, transparent 78%); }
.backdrop-hero::after { left: 0; right: 0; bottom: 0; height: 150px; background: url("decor/plot-dark.svg?v=1") center bottom / 100% 100% no-repeat; opacity: 0.8; }
.backdrop-ram::before { right: max(0px, calc((100% - var(--max)) / 2 - 40px)); top: 56px; width: min(44vw, 600px); aspect-ratio: 4 / 3;
  background: url("decor/ss-mark.svg?v=1") right top / contain no-repeat; opacity: 0.07; }
.backdrop-plot::before { left: 0; right: 0; top: 0; height: 220px; background: url("decor/plot-dark.svg?v=1") center top / 100% 100% no-repeat; opacity: 0.6; }

/* Supporting linework, used in selected open areas only: a corner grid, a single quiet trace, a ruler edge. */
.backdrop-grid::before { top: 0; right: 0; width: min(50%, 680px); height: 100%;
  background-image: linear-gradient(to right, rgba(var(--deco), 0.07) 1px, transparent 1px), linear-gradient(to bottom, rgba(var(--deco), 0.07) 1px, transparent 1px);
  background-size: 32px 32px; background-position: right top;
  -webkit-mask-image: radial-gradient(ellipse 100% 90% at 100% 0%, #000 10%, transparent 70%);
  mask-image: radial-gradient(ellipse 100% 90% at 100% 0%, #000 10%, transparent 70%); }
.backdrop-trace::before { left: 0; right: 0; bottom: 16px; height: 110px; background: url("decor/trace-dark.svg?v=1") center / 100% 100% no-repeat; opacity: 0.8; }
.backdrop-ruler::after { left: 0; right: 0; bottom: 0; height: 22px; background: url("decor/ruler-dark.svg?v=1") left bottom / 80px 22px repeat-x; opacity: 0.6; }

/* Hero device (3 Nov 2026): a photoreal blank-screen MacBook plate with the app's actual renders on its screen. The
   screen box sits exactly on the plate's display (x 244-1292, y 112-746 of 1536 × 1024), starting below the camera
   notch so the plate's own bezel and notch show. One brief rise on load; reduced motion shows it settled. */
.hero .hero-device { position: relative; max-width: 1080px; margin: 48px auto 0; text-align: left; }
.device { position: relative; animation: device-in .9s cubic-bezier(.2, .7, .2, 1) both; }
.device-plate { display: block; width: 100%; height: auto; border-radius: 28px; }
.device-screen { position: absolute; left: 15.885%; top: 10.938%; width: 68.229%; height: 61.914%; overflow: hidden;
  border-radius: 0 0 0.4% 0.4% / 0 0 0.7% 0.7%; background: radial-gradient(ellipse 80% 70% at 30% 20%, #1F2A33, #121418 70%); }
.device-screen img { position: absolute; display: block; height: auto; border-radius: 1.1% / 1.3%; }
.screen-advisor { left: 3%; top: 4%; width: 65%; box-shadow: 0 1.2vw 2.6vw rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.07); }
.screen-panel { right: 2.4%; top: 0; width: 41%; border-top-left-radius: 0; border-top-right-radius: 0;
  box-shadow: 0 1.4vw 3vw rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.08); }
.device-tag { position: absolute; left: 2.4%; top: 3.6%; z-index: 2; background: rgba(16, 36, 62, 0.92); color: #EAF2FB; border-color: #3B5F86; }
.device-detail { position: absolute; right: 1.5%; bottom: 5%; width: min(40%, 380px); margin: 0; padding: 18px 20px 20px;
  border-radius: 18px; background: rgba(255, 255, 255, 0.94); border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 18px 44px rgba(16, 24, 40, 0.18), 0 4px 12px rgba(16, 24, 40, 0.06);
  animation: device-in .9s cubic-bezier(.2, .7, .2, 1) .35s both; }
.device-detail-label { display: flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 600; color: var(--muted); }
.device-detail-label .icon { width: 18px; height: 18px; color: #6F6BEA; }
.device-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 14px; padding: 0; }
.device-chips li { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px 4px 8px; border-radius: 999px; background: var(--cb); font-size: 14px; font-weight: 600; line-height: 1.3; }
.device-chips .icon { width: 16px; height: 16px; color: var(--c); }
.device-chips .c-dev { color: #1F5FAF; } .device-chips .c-everyday { color: #7A5634; } .device-chips .c-video { color: #17707F; }
.device-detail-title { display: block; font-size: 20px; line-height: 1.25; letter-spacing: -0.015em; color: var(--navy); }
.device-detail-text { display: block; margin-top: 6px; font-size: 15px; line-height: 1.5; color: var(--muted); }
@keyframes device-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@media (max-width: 900px) {
  .hero .hero-device { margin-top: 36px; }
  .device-plate { border-radius: 20px; }
  .device-detail { position: static; width: auto; max-width: 520px; margin: 16px auto 0; }
}
@media (max-width: 600px) {
  .device-plate { border-radius: 14px; }
  .device-tag { font-size: 10px; padding: 1px 6px; }
}

/* Slow background glows: a few transform/opacity layers, not a full-page effect. Paused until their section is in
   view, when the page is hidden, and removed under reduced motion. */
.glows { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.glow { position: absolute; width: 60%; aspect-ratio: 1; border-radius: 50%; opacity: 0.85;
  background: radial-gradient(closest-side, rgba(64, 150, 230, 0.30), rgba(64, 150, 230, 0) 72%);
  animation: glow-drift 34s ease-in-out infinite alternate; animation-play-state: paused; }
.glow.g1 { left: -6%; top: 6%; }
.glow.g2 { right: -4%; bottom: -2%; width: 54%; background: radial-gradient(closest-side, rgba(52, 208, 160, 0.16), rgba(52, 208, 160, 0) 72%); animation-duration: 42s; animation-delay: -12s; }
.glow.g3 { right: 4%; top: -10%; width: 42%; }
.glow.g4 { left: 8%; bottom: -40%; width: 40%; animation-duration: 40s; }
.in-view .glow { animation-play-state: running; }
html.motion-paused .glow, html.doc-hidden .glow { animation-play-state: paused; }
@keyframes glow-drift {
  from { transform: translate3d(0, 0, 0) scale(1); opacity: 0.7; }
  to { transform: translate3d(6%, -5%, 0) scale(1.08); opacity: 1; }
}


/* Sections */
.section { padding: 104px 0; }
.wrap.section { padding-left: 0; padding-right: 0; }
.band { background: var(--paper); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.page-top { padding-top: 72px; }
.section-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 18px 48px; margin-bottom: 44px; }
/* Title and lede share a row only when the whole title fits beside the lede; otherwise the lede moves below. */
.section-head > div { flex: 1 1 auto; min-width: 0; }
.section-head h2 { max-width: none; }
.section-head .lede { flex: 1 1 22em; margin: 0; font-size: 17px; }
.feature { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 72px; align-items: center; }
.feature.top-aligned { align-items: start; }
.split { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 72px; align-items: start; }
.top-rule { border-top: 1px solid var(--line); padding-top: 40px; margin-top: 64px; }
.points { list-style: none; padding: 0; margin: 32px 0 0; display: grid; gap: 18px; }
.points li { position: relative; padding-left: 22px; color: var(--muted); }
.points li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 7px; height: 7px; background: var(--navy); }
.points strong { color: var(--navy); font-weight: 600; }
.points.two { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 48px; }

/* Disclosures: readable notes behind a small ? control. */
details { border-top: 1px solid var(--line); }
details:last-of-type { border-bottom: 1px solid var(--line); }
summary { position: relative; cursor: pointer; list-style: none; padding: 18px 40px 18px 0; font-weight: 600; font-size: 17px; color: var(--navy); }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; position: absolute; right: 4px; top: 13px; font-size: 24px; font-weight: 400; color: var(--navy); }
details[open] > summary::after { content: "–"; }
details > div { padding: 0 0 22px; color: var(--navy); max-width: 44em; }
details > div p:first-child { margin-top: 0; }
details.learn { margin-top: 32px; border-bottom: 1px solid var(--line); }
details.learn summary { display: flex; align-items: center; gap: 10px; font-size: 15px; padding: 14px 40px 14px 0; }
details.learn summary::after { top: 9px; }

/* History example */
.example { background: var(--white); border: 1px solid var(--line); border-radius: 8px; padding: clamp(20px, 3vw, 40px); }
.example-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.example-note { font-size: 14px; color: var(--muted); }
.example-head .text-button { margin-left: auto; }
.period { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 32px; margin-top: 28px; padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.period p { margin: 0; }
.period-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 22px; font-size: 14px; color: var(--muted); }
.period-label { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--navy); }
.period-controls .on { color: var(--navy); font-weight: 700; box-shadow: inset 0 -2px 0 var(--orange); }
.coverage { font-size: 15px; font-variant-numeric: tabular-nums; }
.figures { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; }
.figures > div { padding: 28px 24px 28px 0; }
.figures > div + div { padding-left: 24px; border-left: 1px solid var(--line); }
.figures dt { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; }
.figures dd { margin: 10px 0 0; }
.figures .num { display: block; font-size: clamp(36px, 3.4vw, 48px); font-weight: 600; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.figures .sub { display: block; margin-top: 8px; font-size: 13px; color: var(--muted); }
.compare { width: 100%; border-collapse: collapse; margin-top: 8px; font-variant-numeric: tabular-nums; border-top: 1px solid var(--line); }
.compare caption { text-align: left; font-weight: 600; font-size: 15px; padding: 22px 0 12px; }
.compare caption span { color: var(--muted); font-weight: 400; margin-left: 8px; }
.compare th, .compare td { padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 15px; vertical-align: middle; }
.compare thead th { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); background: var(--paper); padding: 9px 0; }
.compare thead th:first-child { padding-left: 10px; }
.compare thead th:not(:first-child), .compare td { text-align: right; padding-right: 10px; width: 22%; }
.compare tbody th { text-align: left; font-weight: 400; padding-left: 10px; }
.compare .row-label { display: flex; align-items: center; gap: 10px; }
.compare td:nth-child(2) { font-weight: 600; }
.compare td:nth-child(3) { color: var(--muted); }
.compare .icon { width: 18px; height: 18px; }
.band .points.two { margin-top: 40px; }

/* Tour */
.thumb { display: block; width: 100%; border: 1px solid var(--line); border-radius: 2px; overflow: hidden; background: #1E1E1E; aspect-ratio: 4 / 3; }
.thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top; }

/* Pricing */
.price-row { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--navy); }
.price-row li { padding: 24px 24px 28px 0; display: flex; flex-direction: column; gap: 4px; }
.price-row li + li { padding-left: 24px; border-left: 1px solid var(--line); }
.price-row .macs { font-weight: 600; font-size: 15px; }
.price-row .price { font-size: clamp(40px, 3.6vw, 52px); font-weight: 600; letter-spacing: -0.05em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.price-row .per { font-size: 13px; color: var(--muted); }
.price-row .quote a { margin-top: auto; font-weight: 600; }
.packs-set { border: 0; padding: 0; margin: 48px 0 0; }
.packs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.pack { position: relative; }
.pack input { position: absolute; opacity: 0; pointer-events: none; }
.pack label { display: flex; flex-direction: column; gap: 4px; height: 100%; padding: 28px 26px; background: var(--white); border: 1px solid var(--control-line); border-radius: 8px; cursor: pointer; }
.pack label:hover { background: var(--paper); }
.pack input:checked + label { border-color: var(--navy); box-shadow: inset 0 0 0 1px var(--navy); background: var(--paper); }
.pack input:checked + label .macs::after { content: "Selected"; margin-left: 10px; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--orange-text); }
.pack input:focus-visible + label { outline: 3px solid var(--navy); outline-offset: 3px; }
.pack .macs { font-weight: 600; }
.pack .price { font-size: 52px; font-weight: 600; letter-spacing: -0.05em; line-height: 1.15; margin-top: 6px; font-variant-numeric: tabular-nums; }
.pack .per { color: var(--muted); font-size: 14px; }
.pack .note { margin-top: 14px; color: var(--navy); font-size: 15px; }
.buybar { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; margin-top: 28px; }
.buybar .availability { margin: 0; }
.includes { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 36px; }
.includes li { position: relative; padding-left: 22px; }
.includes li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 7px; height: 7px; background: var(--navy); }
.volume { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 18px 40px; }
.volume p { color: var(--muted); margin-top: 8px; }
.draft { margin-top: 48px; border-left: 3px solid var(--orange); padding: 4px 0 4px 20px; max-width: 54em; }
.draft p { margin: 0; }

/* FAQ, invite */
.faq { min-width: 0; }
.invite { padding: 80px 0; }
.invite .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); gap: 48px; align-items: end; }
.invite p:not(.eyebrow) { color: var(--muted); }
.invite-actions { display: grid; gap: 20px; justify-items: start; }
.copy-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 28px; }
.invite .copy-row { margin-top: 0; }
.copy-target { font-size: 15px; font-weight: 600; color: var(--navy); user-select: all; }

/* Partners */
.paths { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; padding-top: 0; }
.path { display: flex; flex-direction: column; align-items: flex-start; padding: 32px 32px 8px 0; border-top: 1px solid var(--navy); }
.path + .path { padding-left: 32px; border-left: 1px solid var(--line); }
.path-head { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; width: 100%; }
.path-head .eyebrow { margin: 0; }
.path h2 { margin-top: 18px; }
.path p { color: var(--muted); }
.path .button { margin-top: auto; }
.path p:last-of-type { margin-bottom: 24px; }
.paths > .small { grid-column: 1 / -1; margin-top: 24px; }
.downloads { list-style: none; padding: 0; margin: 28px 0 0; border-top: 1px solid var(--line); }
.downloads li { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.downloads a { font-weight: 600; }
.downloads span { color: var(--muted); font-size: 14px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.facts-table { width: 100%; border-collapse: collapse; border-top: 1px solid var(--navy); }
.facts-table th, .facts-table td { text-align: left; vertical-align: top; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.facts-table th { width: 30%; font-weight: 600; padding-right: 20px; }
.brand-tiles { display: grid; grid-template-columns: 1fr 1fr 0.6fr; gap: 14px; margin-top: 32px; }
.brand-tiles figure { margin: 0; }
.brand-tiles .tile { height: 120px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 8px; padding: 20px; }
.brand-tiles .tile.light { background: #F7FAFE; border-color: #F7FAFE; }
.brand-tiles .tile.light + figcaption, .brand-tiles figcaption { color: var(--muted); }
.brand-tiles .tile.dark { background: var(--dark); border-color: var(--dark); }
.brand-tiles img { max-height: 58px; width: auto; }
.brand-tiles figcaption { font-size: 13px; color: var(--muted); margin-top: 8px; }

/* Support */
.support-grid { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 64px; align-items: start; margin-top: 64px; }
.toc { position: sticky; top: 100px; display: grid; gap: 4px; border-left: 1px solid var(--line); padding-left: 18px; }
.toc a { color: var(--navy); text-decoration: none; font-size: 14px; font-weight: 600; padding: 6px 0; }
.toc a:hover { color: var(--blue); }
.doc { max-width: 52em; }
.doc h2 { font-size: clamp(28px, 3vw, 40px); margin-top: 88px; scroll-margin-top: 100px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.doc h2:first-child { margin-top: 0; }
.doc .faq { margin-top: 24px; }
.glossary { margin: 28px 0 0; display: grid; gap: 22px; }
.glossary dt { font-weight: 600; font-size: 18px; letter-spacing: -0.02em; scroll-margin-top: 100px; }
.glossary dd { margin: 4px 0 0; }
.copy-link { background: var(--white); border: 1px solid var(--control-line); color: var(--navy); border-radius: 4px; font: 600 12px/1 var(--font); letter-spacing: 0; padding: 8px 10px; min-height: 32px; cursor: pointer; }
.copy-link:hover { background: var(--mist); }
.log { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 28px; }
.log h3 { font-size: 20px; }
.log ul { margin: 10px 0 0; padding-left: 20px; }
.steps { counter-reset: step; list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 20px; }
.steps li { counter-increment: step; position: relative; padding-left: 48px; color: var(--muted); }
.steps li::before { content: counter(step); position: absolute; left: 0; top: 0; width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid var(--navy); border-radius: 4px; color: var(--navy); font-weight: 700; font-size: 14px; }
.steps strong { color: var(--navy); }

/* Footer */
.site-footer { border-top: 1px solid var(--line); padding: 56px 0 40px; }
.foot-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 40px 64px; }
.foot-brand p { color: var(--muted); font-size: 14px; margin-top: 14px; }
.site-footer .cols { display: flex; flex-wrap: wrap; gap: 28px 64px; font-size: 14px; }
.site-footer .cols div { display: grid; gap: 8px; align-content: start; }
.site-footer .cols strong { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 4px; }
.site-footer .cols a { color: var(--navy); text-decoration: none; }
.site-footer .cols a:hover { text-decoration: underline; }
.foot-maker { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--line); }
.foot-maker p { margin: 0; font-size: 13px; color: var(--muted); }
.maker-link { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--muted); font-size: 13px; }
.maker-link img { height: 26px; width: auto; }

/* Dialogs and toast */
dialog { border: 1px solid var(--line); border-radius: 8px; background: var(--white); color: var(--navy); padding: 0; width: 100%; max-width: min(520px, calc(100vw - 32px)); }
dialog::backdrop { background: rgba(14, 35, 62, 0.55); }
dialog .inner { padding: 36px 34px 30px; }
dialog h2 { font-size: 30px; letter-spacing: -0.04em; }
dialog p { color: var(--navy); }
dialog .fineprint { color: var(--muted); font-size: 13px; margin-top: 18px; }
dialog .actions { margin-top: 26px; }
.toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); max-width: calc(100vw - 32px); background: var(--navy); color: var(--ink-on-light); padding: 12px 18px; border-radius: 4px; font-weight: 600; font-size: 14px; opacity: 0; transition: opacity .2s ease; pointer-events: none; z-index: 80; }
.toast.show { opacity: 1; }

/* Responsive */
@media (max-width: 1100px) {
  .wrap { width: calc(100% - 64px); }
  .hero, .feature, .split, .invite .wrap { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .hero { padding-top: 56px; }
  .figures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .figures > div:nth-child(3) { border-left: 0; padding-left: 0; }
  .figures > div:nth-child(n+3) { border-top: 1px solid var(--line); }
  .price-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .price-row li:nth-child(3) { border-left: 0; padding-left: 0; }
  .price-row li:nth-child(n+3) { border-top: 1px solid var(--line); }
  .paths { grid-template-columns: minmax(0, 1fr); }
  .path + .path { padding-left: 0; border-left: 0; }
  .support-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .toc { position: static; display: flex; flex-wrap: wrap; gap: 4px 18px; border-left: 0; padding-left: 0; }
  .section-head { display: block; }
  .section-head .lede { margin-top: 18px; }
}
@media (max-width: 960px) {
  .menu-toggle { display: inline-block; }
  .site-header .bar { position: relative; }
  .nav { display: none; position: absolute; left: -32px; right: -32px; top: 100%; flex-direction: column; align-items: stretch; gap: 0; margin: 0;
    background: var(--white); border-bottom: 1px solid var(--line); box-shadow: 0 15px 20px rgba(20, 45, 78, 0.07); padding: 8px 32px 24px; }
  .nav.open { display: flex; }
  .nav a:not(.button) { padding: 14px 0; font-size: 16px; border-bottom: 1px solid var(--line); }
  .nav a:not(.button):hover, .nav a[aria-current="page"] { border-bottom-color: var(--line); text-decoration: underline; }
  .nav .button { margin-top: 18px; }
  .packs { grid-template-columns: minmax(0, 1fr); }
  .includes, .points.two { grid-template-columns: minmax(0, 1fr); }
  .section { padding: 80px 0; }
}
@media (max-width: 600px) {
  .wrap { width: calc(100% - 40px); }
  .nav { left: -20px; right: -20px; padding: 8px 20px 24px; }
  .bar { min-height: 64px; gap: 12px; }
  h1 { font-size: clamp(42px, 12vw, 56px); }
  .page-title { font-size: clamp(40px, 11vw, 52px); }
  h2 { font-size: clamp(30px, 8.4vw, 38px); }
  .hero { padding: 40px 0 56px; gap: 32px; }
  .section { padding: 64px 0; }
  .page-top { padding-top: 48px; }
  .actions .button { width: 100%; }
  .figures, .price-row { grid-template-columns: minmax(0, 1fr); }
  .figures > div, .figures > div + div, .price-row li, .price-row li + li { border-left: 0; padding-left: 0; padding-right: 0; }
  .figures > div + div, .price-row li + li { border-top: 1px solid var(--line); }
  .figures > div { padding: 18px 0; }
  .price-row li { padding: 18px 0; }
  .example-head .text-button { margin-left: 0; }
  .compare thead th:first-child { padding-left: 0; }
  .compare tbody th { padding-left: 0; }
  .compare th, .compare td { font-size: 14px; }
  .compare thead th:not(:first-child), .compare td { width: auto; padding-left: 8px; padding-right: 4px; white-space: nowrap; }
  .compare .icon { display: none; }
  .brand-tiles { grid-template-columns: 1fr 1fr; }
  .downloads li { flex-direction: column; gap: 2px; }
  dialog .inner { padding: 28px 22px 22px; }
  .pack .price { font-size: 46px; }
}
@media (max-width: 1100px) {
  .backdrop-hero::before { -webkit-mask-image: radial-gradient(ellipse 80% 45% at 50% 72%, #000 25%, transparent 80%); mask-image: radial-gradient(ellipse 80% 45% at 50% 72%, #000 25%, transparent 80%); }
  .backdrop-ram::before { top: auto; bottom: 40px; width: 70vw; }
}
@media (max-width: 600px) {
  .backdrop-hero::after { height: 90px; opacity: 0.6; }
  .backdrop-ram::before { width: 86vw; opacity: 0.035; }
  .backdrop-plot::before { height: 140px; opacity: 0.4; }
  .backdrop-grid::before, .backdrop-trace::before { display: none; }
}
@media (max-width: 600px) {
  .glow.g2, .glow.g3 { display: none; }
}
/* What SystemStory shows: two spacious product demonstrations (original HTML/SVG, example data, labelled). The markup is
   the final state. site.js arms each demo (first frame, paused) and plays a short arrival once when it first comes into
   view, then removes the classes; only transform and opacity animate. No JS, reduced motion or a paused page: static. */
.features.tint { position: relative; isolation: isolate; overflow: hidden; background: var(--paper); }
.features .glows { inset: 0; }
.showpiece { display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); gap: clamp(32px, 5vw, 72px); align-items: center; margin-top: 72px; }
.showpiece.flip { grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr); }
.showpiece.flip .showpiece-copy { order: 2; }
.showpiece-copy h3 { margin: 0; font-size: clamp(24px, 2.4vw, 32px); line-height: 1.18; letter-spacing: -0.025em; }
.showpiece-copy p:not(.eyebrow) { margin: 14px 0 0; color: var(--muted); font-size: 16px; line-height: 1.6; }
.demo { position: relative; isolation: isolate; overflow: hidden; border: 1px solid #2F5277; border-radius: 14px; padding: 22px;
  background: linear-gradient(180deg, #16355A, #112B48); box-shadow: 0 32px 70px rgba(4, 12, 24, 0.5), inset 0 1px 0 rgba(155, 203, 243, 0.08); }
.demo::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(260px circle at var(--mx, -400px) var(--my, -400px), rgba(110, 180, 245, 0.10), rgba(110, 180, 245, 0) 70%); }
.demo-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin-bottom: 16px; }
.demo-title { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; }
.demo-icon { width: 20px; height: 20px; color: #5FD38A; }
.demo .tag { background: rgba(16, 36, 62, 0.92); color: #EAF2FB; border-color: #3B5F86; }
.demo-note { margin: 16px 0 0; font-size: 13px; line-height: 1.5; color: var(--muted); }

/* Grouped RAM */
.demo-cols { display: grid; grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1.3fr); font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.demo-cols span:first-child { text-align: right; }
.demo-cols span:last-child { grid-column: 3; }
.ram-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ram-line { display: grid; grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1.3fr); align-items: center; min-height: 58px; }
.pchips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; }
.pchip { padding: 3px 8px; border: 1px solid #36597C; border-radius: 999px; background: rgba(12, 28, 48, 0.75); color: var(--muted); font-size: 12px; line-height: 1.4; white-space: nowrap; }
.traces { display: block; width: 100%; height: 46px; overflow: visible; }
.traces path { fill: none; stroke: #4C8FD6; stroke-opacity: 0.55; stroke-width: 1.3; vector-effect: non-scaling-stroke; }
.traces path:last-child { stroke: #5FD38A; stroke-opacity: 0.6; }
.app-row { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 4px 10px;
  padding: 8px 12px; border: 1px solid #2E5378; border-radius: 10px; background: rgba(255, 255, 255, 0.035); }
.app-glyph rect { fill: #2E7DE9; }
.app-glyph.g-exec rect { fill: #202428; stroke: #4A5057; stroke-width: 0.8; }
.app-glyph.g-phone rect { fill: #5F6B78; }
.app-glyph.g-compass rect { fill: #1F8BF0; }
.app-glyph.g-cup rect { fill: #E2CF45; }
.app-glyph { grid-row: 1; }
.app-name { grid-column: 2; grid-row: 1; min-width: 0; }
.app-name strong { display: block; font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.badge { display: inline-block; margin-right: 6px; padding: 1px 6px; border-radius: 4px; background: rgba(155, 203, 243, 0.12); font-size: 11px; color: #CFDDEB; vertical-align: 1px; }
.procs { display: inline; font-size: 12px; color: var(--muted); }
.app-bar { grid-column: 2 / 4; grid-row: 2; height: 6px; border-radius: 3px; background: rgba(155, 203, 243, 0.12); overflow: hidden; }
.app-bar i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, #3C8FD9, #5FD38A); transform-origin: left center; }
.app-bar .w100 { width: 100%; } .app-bar .w58 { width: 58%; } .app-bar .w39 { width: 39%; } .app-bar .w33 { width: 33%; } .app-bar .w6 { width: 6%; }
.app-gb { grid-column: 3; grid-row: 1; font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Usage Advisor: workflows, each one's sessions with the whole Mac's pressure, and the RAM fit (build 26). */
.demo-tools { display: inline-flex; align-items: center; gap: 8px; }
.demo-pause { font: inherit; font-size: 12px; font-weight: 600; line-height: 1.4; color: var(--navy); background: rgba(16, 36, 62, 0.92); border: 1px solid #3B5F86; border-radius: 999px; padding: 3px 10px; cursor: pointer; }
.demo-pause:hover { border-color: #6FA6DA; }
.adv-coverage { margin: 0 0 14px; font-size: 14px; }
.wf-heading { margin: 0 0 8px; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.c-dev { --c: #3D8EF0; --cb: rgba(61, 142, 240, 0.2); } .c-everyday { --c: #C49A72; --cb: rgba(196, 154, 114, 0.2); }
.c-video { --c: #4FC3D6; --cb: rgba(79, 195, 214, 0.2); } .c-idle { --c: #4A5566; --cb: rgba(74, 85, 102, 0.3); }
.lv-freq { --l: #EF5B54; } .lv-some { --l: #F3A045; } .lv-none { --l: #5FD38A; } .lv-unknown { --l: #6B7686; }
.wf-time { display: flex; height: 12px; margin: 0; border-radius: 6px; overflow: hidden; background: rgba(155, 203, 243, 0.08); }
.wf-seg { display: block; height: 100%; background: var(--c); transform-origin: left center; }
.wf-seg.s0 { flex: 43 0 0; } .wf-seg.s1 { flex: 23 0 0; } .wf-seg.s2 { flex: 4 0 0; } .wf-seg.s3 { flex: 30 0 0; }
.wf-key { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 8px 0 14px; padding: 0; font-size: 12px; color: var(--muted); }
.wf-key li { display: inline-flex; align-items: center; gap: 5px; }
.wf-key i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.wf-key b { font-weight: 600; color: var(--navy); }
.wf-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.wf-row { width: 100%; display: grid; grid-template-columns: 34px minmax(0, 1fr) minmax(0, 1.25fr); align-items: center; gap: 4px 12px; padding: 9px 12px;
  font: inherit; color: var(--navy); text-align: left; cursor: pointer; border: 1px solid #2E5378; border-radius: 10px; background: rgba(255, 255, 255, 0.035); }
.wf-row:hover { border-color: #4677A8; }
.wf-row[aria-pressed="true"] { border-color: #6FA6DA; background: rgba(110, 166, 218, 0.13); }
.wf-row:focus-visible, .wf-bar:focus-visible, .demo-pause:focus-visible { outline: 2px solid #9BCBF3; outline-offset: 2px; }
.wf-ico { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: var(--cb); }
.wf-ico .icon { width: 19px; height: 19px; color: var(--c); }
.wf-name { min-width: 0; }
.wf-name strong { display: block; font-size: 14px; font-weight: 600; }
.wf-name span { font-size: 12px; color: var(--muted); }
.wf-advice { display: flex; align-items: center; gap: 7px; font-size: 13px; line-height: 1.35; }
.wf-advice i { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--l); }
.wf-detail { margin-top: 10px; padding: 14px; border: 1px solid #2E5378; border-radius: 10px; background: rgba(6, 18, 34, 0.45); }
.wf-detail[hidden] { display: none; }
.wf-detail-text { margin: 0; font-size: 13px; line-height: 1.5; }
.wf-sessions-label { display: flex; justify-content: space-between; gap: 8px; margin: 12px 0 6px; font-size: 12px; font-weight: 700; color: var(--muted); }
.wf-sessions-label span { font-weight: 400; }
.wf-bars { list-style: none; margin: 0; padding: 0; height: 64px; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; border-bottom: 1px solid rgba(155, 203, 243, 0.22); }
.wf-bars li { display: flex; align-items: flex-end; min-width: 0; }
.wf-bar { display: block; width: 100%; padding: 0; border: 0; border-radius: 4px 4px 1px 1px; background: var(--l); opacity: 0.72; cursor: pointer; transform-origin: bottom center; }
.wf-bar:hover { opacity: 0.9; }
.wf-bar[aria-pressed="true"] { opacity: 1; box-shadow: 0 0 0 2px #EAF2FB; }
.wf-bar.h1 { height: 10%; } .wf-bar.h2 { height: 20%; } .wf-bar.h3 { height: 30%; } .wf-bar.h4 { height: 40%; } .wf-bar.h5 { height: 50%; }
.wf-bar.h6 { height: 60%; } .wf-bar.h7 { height: 70%; } .wf-bar.h8 { height: 80%; } .wf-bar.h9 { height: 90%; } .wf-bar.h10 { height: 100%; }
.wf-session { margin: 8px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.wf-fit { display: flex; align-items: center; gap: 14px; margin-top: 12px; padding: 12px 14px; border: 1px solid rgba(239, 91, 84, 0.5); border-radius: 10px; background: rgba(239, 91, 84, 0.07); }
.wf-ring { flex: none; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: conic-gradient(#F3A045 0 7%, #4CAF6A 7% 100%); }
.wf-ring b { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #13304F; font-size: 13px; }
.wf-fit p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--muted); }
.wf-fit strong { display: block; margin-bottom: 2px; font-size: 14px; color: var(--navy); }

/* Quiet supporting points */
.quiet-points { list-style: none; margin: 72px 0 0; padding: 24px 0 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 32px; font-size: 14px; line-height: 1.55; color: var(--muted); }
.quiet-points li { display: flex; gap: 12px; align-items: flex-start; }
.quiet-points .icon { flex: none; width: 22px; height: 22px; color: var(--blue); }
.quiet-points strong { color: var(--navy); }
.features .learn { margin-top: 28px; }

/* The one-time arrival (only while armed; transform and opacity only). */
[data-demo].is-armed .pchip { animation: demo-chip .9s cubic-bezier(.2, .7, .2, 1) both; }
[data-demo].is-armed .pchip:nth-child(even) { animation-name: demo-chip-alt; }
[data-demo].is-armed .traces { animation: demo-fade .7s ease both; }
[data-demo].is-armed .app-row { animation: demo-row .7s cubic-bezier(.2, .7, .2, 1) both; }
[data-demo].is-armed .app-bar i { animation: demo-bar .9s cubic-bezier(.3, .7, .2, 1) both; }
[data-demo].is-armed .wf-seg { animation: demo-bar .8s cubic-bezier(.3, .7, .2, 1) both; }
[data-demo].is-armed .wf-item { animation: demo-rise .7s cubic-bezier(.2, .7, .2, 1) both; }
[data-demo].is-armed .wf-detail .wf-bar { animation: demo-grow .5s cubic-bezier(.3, .7, .2, 1) both; }
[data-demo].is-armed .wf-fit { animation: demo-rise .7s cubic-bezier(.2, .7, .2, 1) 3000ms both; }
[data-demo].is-armed:not(.is-running) * { animation-play-state: paused; }
/* The visitor's Pause (shown only while an arrival runs) holds it where it is. */
[data-demo].is-paused *, [data-demo].is-paused *::after { animation-play-state: paused !important; }
[data-demo].is-armed .pchip.d0 { animation-delay: 0ms; }
[data-demo].is-armed .pchip.d1 { animation-delay: 60ms; }
[data-demo].is-armed .pchip.d2 { animation-delay: 120ms; }
[data-demo].is-armed .pchip.d3 { animation-delay: 180ms; }
[data-demo].is-armed .pchip.d4 { animation-delay: 240ms; }
[data-demo].is-armed .pchip.d5 { animation-delay: 300ms; }
[data-demo].is-armed .pchip.d6 { animation-delay: 360ms; }
[data-demo].is-armed .pchip.d7 { animation-delay: 420ms; }
[data-demo].is-armed .pchip.d8 { animation-delay: 480ms; }
[data-demo].is-armed .pchip.d9 { animation-delay: 540ms; }
[data-demo].is-armed .pchip.d10 { animation-delay: 600ms; }
[data-demo].is-armed .pchip.d11 { animation-delay: 660ms; }
[data-demo].is-armed .pchip.d12 { animation-delay: 720ms; }
[data-demo].is-armed .pchip.d13 { animation-delay: 780ms; }
[data-demo].is-armed [data-row="0"] .traces { animation-delay: 700ms; }
[data-demo].is-armed [data-row="0"] .app-row { animation-delay: 1200ms; }
[data-demo].is-armed [data-row="0"] .app-bar i { animation-delay: 1500ms; }
[data-demo].is-armed [data-row="1"] .traces { animation-delay: 820ms; }
[data-demo].is-armed [data-row="1"] .app-row { animation-delay: 1340ms; }
[data-demo].is-armed [data-row="1"] .app-bar i { animation-delay: 1640ms; }
[data-demo].is-armed [data-row="2"] .traces { animation-delay: 940ms; }
[data-demo].is-armed [data-row="2"] .app-row { animation-delay: 1480ms; }
[data-demo].is-armed [data-row="2"] .app-bar i { animation-delay: 1780ms; }
[data-demo].is-armed [data-row="3"] .traces { animation-delay: 1060ms; }
[data-demo].is-armed [data-row="3"] .app-row { animation-delay: 1620ms; }
[data-demo].is-armed [data-row="3"] .app-bar i { animation-delay: 1920ms; }
[data-demo].is-armed [data-row="4"] .traces { animation-delay: 1180ms; }
[data-demo].is-armed [data-row="4"] .app-row { animation-delay: 1760ms; }
[data-demo].is-armed [data-row="4"] .app-bar i { animation-delay: 2060ms; }
[data-demo].is-armed .wf-seg.s0 { animation-delay: 0ms; }
[data-demo].is-armed .wf-seg.s1 { animation-delay: 250ms; }
[data-demo].is-armed .wf-seg.s2 { animation-delay: 450ms; }
[data-demo].is-armed .wf-seg.s3 { animation-delay: 550ms; }
[data-demo].is-armed .wf-item.r0 { animation-delay: 900ms; }
[data-demo].is-armed .wf-item.r1 { animation-delay: 1050ms; }
[data-demo].is-armed .wf-item.r2 { animation-delay: 1200ms; }
[data-demo].is-armed .wf-bar.b0 { animation-delay: 1600ms; }
[data-demo].is-armed .wf-bar.b1 { animation-delay: 1690ms; }
[data-demo].is-armed .wf-bar.b2 { animation-delay: 1780ms; }
[data-demo].is-armed .wf-bar.b3 { animation-delay: 1870ms; }
[data-demo].is-armed .wf-bar.b4 { animation-delay: 1960ms; }
[data-demo].is-armed .wf-bar.b5 { animation-delay: 2050ms; }
[data-demo].is-armed .wf-bar.b6 { animation-delay: 2140ms; }
[data-demo].is-armed .wf-bar.b7 { animation-delay: 2230ms; }
[data-demo].is-armed .wf-bar.b8 { animation-delay: 2320ms; }
[data-demo].is-armed .wf-bar.b9 { animation-delay: 2410ms; }
[data-demo].is-armed .wf-bar.b10 { animation-delay: 2500ms; }
[data-demo].is-armed .wf-bar.b11 { animation-delay: 2590ms; }
@keyframes demo-chip { from { opacity: 0; transform: translate(-26px, -12px) scale(0.9); } to { opacity: 1; transform: none; } }
@keyframes demo-chip-alt { from { opacity: 0; transform: translate(-18px, 14px) scale(0.9); } to { opacity: 1; transform: none; } }
@keyframes demo-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes demo-row { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
@keyframes demo-bar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes demo-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes demo-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* Footer: a large, subdued wordmark with the green SS mark, purely decorative and clipped to the footer. */
.site-footer { position: relative; overflow: hidden; }
.foot-mark { max-width: var(--max); margin: 40px auto -14px; padding: 0 40px; opacity: 0.16; pointer-events: none; }
.foot-mark img { display: block; width: 100%; height: auto; }

@media (max-width: 1199px) {
  .showpiece, .showpiece.flip { grid-template-columns: minmax(0, 1fr); gap: 28px; margin-top: 56px; }
  .showpiece.flip .showpiece-copy { order: 0; }
  .showpiece-copy { max-width: 720px; }
}
@media (max-width: 960px) {
  .quiet-points { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .demo { padding: 16px; }
  .demo-cols, .traces { display: none; }
  .ram-line { grid-template-columns: minmax(0, 1fr); gap: 6px; min-height: 0; }
  .pchips { justify-content: flex-start; }
  .app-row { grid-template-columns: 26px minmax(0, 1fr) auto; }
  .wf-row { grid-template-columns: 30px minmax(0, 1fr); padding: 9px 10px; }
  .wf-ico { width: 30px; height: 30px; }
  .wf-advice { grid-column: 2; font-size: 12.5px; }
  .wf-bars { gap: 3px; }
  .wf-fit { align-items: flex-start; }
  .foot-mark { padding: 0 20px; margin-top: 28px; opacity: 0.12; }
}
@media (prefers-reduced-motion: reduce) {
  .glow { animation: none !important; }
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* Before you upgrade: two example reports, two outcomes. Plain images, no zoom. */
.ram-compare h2 { max-width: none; }
.ram-compare-label { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin: 0 0 12px; }
.ram-compare-intro { font-size: clamp(16px, 1.3vw, 18px); color: var(--muted); margin: 16px 0 0; line-height: 1.65; }
.ram-compare-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; margin-top: 40px; align-items: stretch; }
.ram-compare-item { margin: 0; background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: 20px; box-shadow: 0 18px 40px rgba(4, 14, 30, 0.35); }
.ram-compare-item figcaption { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-bottom: 16px; font-size: 16px; }
.ram-compare-item .frame { border-radius: 6px; overflow: hidden; background: #1E1E1E; border: 1px solid rgba(255, 255, 255, 0.08); }
.ram-compare-item .frame img { display: block; width: 100%; height: auto; }
.ram-compare-item p { margin: 16px 0 0; font-size: 16px; line-height: 1.6; color: var(--muted); }
.ram-compare-item p strong { color: var(--navy); }
.tag.tag-ok { color: #0E2A1A; background: #7FE0A2; border-color: #7FE0A2; }
.tag.tag-warn { color: #3A1C05; background: #F7A066; border-color: #F7A066; }
@media (max-width: 900px) {
  .ram-compare-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .ram-compare-item { padding: 14px; }
}

/* Everyday decisions: three always-visible cards, each with a small HTML illustration. The markup is the final state;
   [data-demo] (site.js) plays a short, once-only arrival with the existing keyframes. */
.everyday { list-style: none; padding: 0; margin: 48px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.ev-card { display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 18px 18px 26px; }
.ev-card h3 { margin: 24px 8px 0; font-size: 21px; line-height: 1.25; letter-spacing: -0.02em; }
.ev-card p { margin: 10px 8px 0; color: var(--muted); font-size: 15.5px; line-height: 1.6; }
.ev-card p.ev-fine { font-size: 13.5px; }
.ev-link { color: var(--blue); font-weight: 700; text-decoration: none; }
.ev-link:hover { text-decoration: underline; }
.ev-art { position: relative; overflow: hidden; min-height: 196px; border-radius: 10px; border: 1px solid #2F5277; padding: 18px;
  background: linear-gradient(180deg, #16355A, #112B48); box-shadow: inset 0 1px 0 rgba(155, 203, 243, 0.08); display: flex; flex-direction: column; justify-content: center; }
.ev-tag { position: absolute; top: 12px; left: 12px; background: rgba(16, 36, 62, 0.92); color: #EAF2FB; border-color: #3B5F86; }

/* 1. Menu bar */
.ev-menubar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px; border-radius: 8px; background: rgba(8, 20, 36, 0.72); border: 1px solid rgba(155, 203, 243, 0.14); font-size: 12.5px; color: #DCE8F4; }
.ev-dots { display: inline-flex; gap: 5px; }
.ev-dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(220, 232, 244, 0.35); }
.ev-items { display: inline-flex; gap: 12px; white-space: nowrap; }
.ev-item { display: inline-flex; align-items: center; gap: 4px; font-variant-numeric: tabular-nums; }
.ev-item b { color: #9BCBF3; font-size: 11px; letter-spacing: 0.06em; }
.ev-ok { width: 7px; height: 7px; border-radius: 50%; background: #5FD38A; margin-left: 3px; box-shadow: 0 0 0 3px rgba(95, 211, 138, 0.18); }
.ev-drop { margin: 10px 0 0 auto; width: 68%; padding: 12px; border-radius: 8px; background: rgba(8, 20, 36, 0.5); border: 1px solid rgba(155, 203, 243, 0.12); display: grid; gap: 9px; }
.ev-line { display: block; height: 6px; border-radius: 3px; background: rgba(155, 203, 243, 0.12); overflow: hidden; }
.ev-line i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, #3C8FD9, #5FD38A); transform-origin: left center; }
.ev-line.l1 i { width: 34%; } .ev-line.l2 i { width: 18%; } .ev-line.l3 i { width: 56%; }

/* 2. Notification (native style, example only) */
.ev-note { display: flex; gap: 12px; align-items: flex-start; margin-top: 18px; padding: 12px 14px; border-radius: 14px; background: rgba(236, 242, 249, 0.10);
  border: 1px solid rgba(236, 242, 249, 0.16); box-shadow: 0 14px 30px rgba(4, 12, 24, 0.45); font-size: 12.5px; line-height: 1.45; color: #DCE8F4; }
.ev-appicon { flex: none; display: inline-flex; align-items: flex-end; gap: 2px; width: 32px; height: 32px; padding: 7px 6px; border-radius: 8px; background: #10243E; border: 1px solid #2F5277; }
.ev-appicon i { flex: 1; border-radius: 1.5px; background: #5FD38A; height: 100%; }
.ev-appicon i:nth-child(2) { height: 60%; }
.ev-note-text { display: grid; gap: 2px; min-width: 0; }
.ev-note-text > b { color: #FFFFFF; font-size: 13px; }
.ev-note-head { display: flex; justify-content: space-between; gap: 8px; color: #9DB3C9; font-size: 11.5px; }
.ev-note-head b { color: #9DB3C9; font-weight: 700; letter-spacing: 0.02em; }

/* 3. Decision flow */
.ev-flow { display: grid; justify-items: center; font-size: 12.5px; line-height: 1.4; }
.ev-node { display: block; padding: 9px 12px; border-radius: 8px; border: 1px solid #3B5F86; background: rgba(8, 20, 36, 0.55); color: #DCE8F4; text-align: center; }
.ev-node b { display: block; color: #FFFFFF; margin-bottom: 2px; }
.ev-start { font-weight: 700; color: #FFFFFF; }
.ev-split { position: relative; display: block; width: 52%; height: 22px; }
.ev-split::before { content: ""; position: absolute; left: 50%; top: 0; width: 1px; height: 11px; background: #5B82AB; }
.ev-split i { position: absolute; left: 0; right: 0; top: 11px; height: 11px; border: 1px solid #5B82AB; border-bottom: 0; border-radius: 6px 6px 0 0; transform-origin: center top; }
.ev-branches { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; }
.ev-ok-node { border-color: rgba(95, 211, 138, 0.6); box-shadow: inset 3px 0 0 #5FD38A; }
.ev-warn-node { border-color: rgba(247, 160, 102, 0.6); box-shadow: inset 3px 0 0 #F7A066; }

.ev-share { display: flex; gap: 14px; align-items: flex-start; margin: 40px 0 0; padding: 20px 24px; border: 1px solid var(--line); border-radius: 12px; color: var(--muted); font-size: 15.5px; line-height: 1.6; }
.ev-share .icon { flex: none; width: 22px; height: 22px; margin-top: 2px; color: #5FD38A; }
.ev-share strong { color: var(--navy); }

/* Arrival (transform/opacity only, once; settled state is the markup). */
[data-demo].is-armed .ev-item { animation: demo-fade .6s ease both; }
[data-demo].is-armed .ev-item.e1 { animation-delay: 150ms; }
[data-demo].is-armed .ev-item.e2 { animation-delay: 300ms; }
[data-demo].is-armed .ev-item.e3 { animation-delay: 450ms; }
[data-demo].is-armed .ev-drop { animation: demo-rise .7s cubic-bezier(.2, .7, .2, 1) 700ms both; }
[data-demo].is-armed .ev-line i { animation: demo-bar .9s cubic-bezier(.3, .7, .2, 1) 1000ms both; }
[data-demo].is-armed .ev-note { animation: demo-row .8s cubic-bezier(.2, .7, .2, 1) 300ms both; }
[data-demo].is-armed .ev-start { animation: demo-fade .5s ease both; }
[data-demo].is-armed .ev-split i { animation: demo-bar .6s cubic-bezier(.3, .7, .2, 1) 450ms both; }
[data-demo].is-armed .ev-ok-node { animation: demo-rise .6s cubic-bezier(.2, .7, .2, 1) 950ms both; }
[data-demo].is-armed .ev-warn-node { animation: demo-rise .6s cubic-bezier(.2, .7, .2, 1) 1150ms both; }

/* Three columns: one art height for all cards, so the headings line up (the notification is the tallest). */
@media (min-width: 1101px) {
  .ev-art { min-height: 272px; }
}
@media (max-width: 1100px) {
  .everyday { grid-template-columns: minmax(0, 1fr); max-width: 620px; }
  .ev-art { min-height: 0; }
}
@media (max-width: 600px) {
  .everyday { margin-top: 32px; gap: 20px; }
  .ev-card { padding: 12px 12px 22px; }
  /* Narrow menu bar: no decorative dots or status dot; three equal columns, label above value, nothing clipped. */
  .ev-menubar { padding: 8px 10px; }
  .ev-dots, .ev-ok { display: none; }
  .ev-items { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; width: 100%; }
  .ev-item { flex-direction: column; gap: 0; text-align: center; }
  .ev-drop { width: 100%; }
  .ev-branches { grid-template-columns: minmax(0, 1fr); }
  .ev-split { display: none; }
  .ev-ok-node { margin-top: 10px; }
  .ev-share { padding: 16px; }
}


/* Temperature and fans strip (What SystemStory shows): copy beside an example Thermal row. Numbers are tabular. Motion is
   once-only inside the [data-demo] window (rise, thermometer glow, two fan turns, RPM highlight); it never loops and
   isn't tied to any temperature, so it implies no fan threshold. */
.thermal-strip { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 40px; align-items: center; margin-top: 40px; padding: 28px 32px;
  border: 1px solid #2F5277; border-radius: 14px; background: linear-gradient(180deg, #16355A, #112B48); box-shadow: inset 0 1px 0 rgba(155, 203, 243, 0.08); }
.ts-copy h3 { margin: 0; font-size: clamp(21px, 2vw, 26px); line-height: 1.22; letter-spacing: -0.02em; }
.ts-copy p { margin: 10px 0 0; color: var(--muted); font-size: 15.5px; line-height: 1.6; }
.ts-copy p.ts-note { font-size: 13.5px; }
.ts-art { position: relative; display: grid; gap: 14px; justify-items: start; padding: 18px; border-radius: 10px; background: rgba(8, 20, 36, 0.55); border: 1px solid rgba(155, 203, 243, 0.14); }
.ts-art .tag { background: rgba(16, 36, 62, 0.92); color: #EAF2FB; border-color: #3B5F86; }
.ts-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; width: 100%; padding: 12px 14px; border-radius: 8px; background: rgba(30, 30, 30, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.08); color: #DCE8F4; font-size: 15px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ts-row .icon { width: 18px; height: 18px; flex: none; }
.ts-label, .ts-state, .ts-fans { display: inline-flex; align-items: center; gap: 7px; }
.ts-label b { color: #FFFFFF; }
.ts-label .icon { color: #9BCBF3; }
.ts-state i { width: 8px; height: 8px; border-radius: 50%; background: #5FD38A; box-shadow: 0 0 0 3px rgba(95, 211, 138, 0.18); }
.ts-state { color: #8FE3AE; font-weight: 700; }
.ts-temp { color: #FFFFFF; font-weight: 700; }
.ts-fans { color: #DCE8F4; }
.ts-fans .icon { color: #9BCBF3; }
[data-demo].is-armed .ts-row { animation: demo-rise .7s cubic-bezier(.2, .7, .2, 1) 200ms both; }
/* Once-only arrival inside the 4.2 s demo window: a green glow passes up the thermometer, the fan icon turns twice and
   comes to rest exactly as drawn (3 blades, 720°), and a soft highlight passes behind the RPM. Text never moves or
   changes width; nothing is linked to a temperature. The settled state is the markup (glow and highlight hidden). */
.ts-therm { position: relative; display: inline-flex; }
.ts-therm-fill { position: absolute; inset: 0; color: #5FD38A; opacity: 0; }
.ts-rpm { position: relative; }
.ts-rpm::after { content: ""; position: absolute; inset: -3px -6px; border-radius: 5px; background: rgba(95, 211, 138, 0.16); opacity: 0; pointer-events: none; }
[data-demo].is-armed .ts-therm-fill { animation: ts-glow 1.5s ease 900ms both; }
[data-demo].is-armed .ts-fan { animation: ts-spin 3s cubic-bezier(.25, .6, .25, 1) 1000ms both; }
[data-demo].is-armed .ts-rpm::after { animation: ts-glow 1.6s ease 1600ms both; }
@keyframes ts-glow { 0% { opacity: 0; transform: translateY(3px); } 40% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes ts-spin { from { transform: rotate(0deg); } to { transform: rotate(720deg); } }
/* Hold the thermal animations on their first frame until the demo is on screen. The shared paused rule above has equal
   specificity and comes earlier, so the shorthands here would override it; it also doesn't reach ::after. */
.ts-art.is-armed:not(.is-running) *, .ts-art.is-armed:not(.is-running) *::after { animation-play-state: paused; }
@media (max-width: 960px) {
  .thermal-strip { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 22px; }
}
@media (max-width: 600px) {
  .thermal-strip { padding: 16px; }
  .ts-art { padding: 14px; }
  .ts-row { font-size: 14px; gap: 8px 12px; padding: 10px 12px; }
}

/* ===== Clean light design layer (November 2026) ===== */
body { background: var(--page); letter-spacing: -0.01em; }
h1 { font-size: clamp(44px, 6.4vw, 80px); line-height: 1.05; letter-spacing: -0.035em; font-weight: 600; }
h2 { font-size: clamp(32px, 4vw, 48px); line-height: 1.1; letter-spacing: -0.03em; }
h3, .h3 { letter-spacing: -0.02em; }
a:hover { color: var(--blue); text-decoration: underline; }
:focus-visible { outline: 3px solid rgba(0, 113, 227, 0.55); outline-offset: 3px; border-radius: 4px; }
.eyebrow { letter-spacing: 0.08em; }
.preview-notice { background: var(--paper); color: var(--navy); border-bottom: 1px solid var(--line); font-size: 12.5px; padding: 7px 20px; }
.preview-notice strong { color: var(--navy); }

/* Slim translucent header: wordmark left, small nav, one blue Buy pill; Menu on small screens. */
.site-header { background: rgba(251, 251, 253, 0.82); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid rgba(0, 0, 0, 0.08); }
.bar { min-height: 52px; gap: 24px; }
.brand .wordmark { height: 24px; }
.nav { gap: 26px; }
.nav a:not(.button) { color: var(--navy); font-size: 13px; font-weight: 400; padding: 4px 0; border-bottom: 0; opacity: 0.85; }
.nav a:not(.button):hover { color: var(--navy); opacity: 1; text-decoration: none; }
.nav a[aria-current="page"] { font-weight: 600; opacity: 1; }
.buy-pill { display: inline-flex; align-items: center; min-height: 28px; padding: 3px 13px; border-radius: 980px; background: var(--action); color: #FFFFFF; font-size: 13px; font-weight: 500; text-decoration: none; }
.buy-pill:hover { background: #0077ED; color: #FFFFFF; text-decoration: none; }
.menu-toggle { margin-left: 0; min-height: 40px; padding: 6px 4px; background: none; border: 0; border-radius: 6px; color: var(--navy); font-size: 14px; font-weight: 500; }

/* Buttons: blue pill primary, outlined pill secondary, plain blue text links. */
.button { min-height: 44px; padding: 11px 22px; border-radius: 980px; font: 500 16px/1.2 var(--font); letter-spacing: -0.01em; }
.button.primary { background: var(--action); color: #FFFFFF; }
.button.primary:hover { background: #0077ED; color: #FFFFFF; text-decoration: none; }
.button.secondary { background: transparent; color: var(--blue); border-color: var(--blue); }
.button.secondary:hover { background: rgba(0, 113, 227, 0.06); color: var(--blue); text-decoration: none; }
.button.small { min-height: 36px; padding: 7px 16px; font-size: 14px; }
.text-link { color: var(--blue); border-bottom: 0; }
.text-link:hover { color: var(--blue); text-decoration: underline; }
.text-button { color: var(--blue); border-bottom: 0; }

/* Hero: centred copy, Buy pill and Learn more, preview pricing line, the product device beneath. */
.hero-band { position: relative; isolation: isolate; overflow: hidden; background: radial-gradient(ellipse 60% 40% at 50% 78%, rgba(0, 113, 227, 0.07), rgba(0, 113, 227, 0) 70%), var(--page); }
.hero { display: block; padding: 64px 0 88px; text-align: center; }
.hero-copy { margin: 0 auto; }
.hero h1 { max-width: none; }
.hero-accent { display: inline-block; color: #1A7F47; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .hero-accent { background: linear-gradient(90deg, #1A8A4C, #0066CC); -webkit-background-clip: text; background-clip: text; color: transparent; }
}
.hero-lede { margin: 22px auto 0; font-size: clamp(19px, 2vw, 26px); line-height: 1.38; color: var(--muted); letter-spacing: -0.015em; }
.hero-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px 30px; margin-top: 34px; }
.hero-actions .button { min-width: 96px; font-size: 17px; }
.learn-more { color: var(--blue); font-size: 17px; text-decoration: none; }
.learn-more:hover { text-decoration: underline; }
.hero-price { margin-top: 18px; font-size: 13px; color: var(--muted); }
.hero-price a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.hero-version { margin-top: 6px; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.hero-version a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.hero .availability { justify-content: center; margin-top: 8px; font-size: 13px; }
.glow { opacity: 0.45; }

/* Bands, cards, technical backdrops removed. */
.backdrop::before, .backdrop::after { display: none; }
.band { background: var(--paper); border: 0; }
.section-head .lede { color: var(--muted); }
.example, .ev-card, .ram-compare-item, .thermal-strip, .ev-share { background: var(--white); border: 1px solid rgba(0, 0, 0, 0.06); border-radius: 18px; box-shadow: 0 2px 14px rgba(16, 24, 40, 0.05); }
.ev-share { box-shadow: none; }
.field { background: var(--paper); border-radius: 18px; }
.shot .frame, .ram-compare-item .frame { border-radius: 10px; }
.quiet-points { border-top-color: var(--line); }

/* Native product panels stay dark with their own tokens, framed on light surfaces. */
.demo, .ev-art, .ts-art { --navy: #EAF2FB; --muted: #B3C7DD; --blue: #9BCBF3; --line: #2E4B70; --white: #1A3756; color: var(--navy); }
.demo { box-shadow: 0 24px 50px rgba(16, 24, 40, 0.18); }
.thermal-strip { border-color: rgba(0, 0, 0, 0.06); }
.ts-art { background: linear-gradient(180deg, #16355A, #112B48); border: 1px solid #2F5277; }

/* Pricing, support, partners, footer: the same light system. */
.price-row { border-top-color: var(--line); }
.pack label { border-radius: 18px; border-color: var(--line); background: var(--white); }
.pack label:hover { background: var(--white); border-color: var(--control-line); }
.pack input:checked + label { border-color: var(--action); box-shadow: inset 0 0 0 1px var(--action); background: var(--white); }
.pack input:focus-visible + label { outline: 3px solid rgba(0, 113, 227, 0.55); }
.path { border-top-color: var(--line); }
.facts-table { border-top-color: var(--line); }
.brand-tiles .tile.light { background: var(--white); border-color: var(--line); }
.steps li::before { border-color: var(--line); border-radius: 50%; }
.copy-link { border-radius: 980px; border-color: var(--line); }
.draft { border-left-color: var(--orange); }
.site-footer { background: var(--paper); border-top: 1px solid var(--line); }
.site-footer .cols strong { color: var(--navy); }
.site-footer .cols a { color: var(--muted); }
.site-footer .cols a:hover { color: var(--navy); }
.foot-mark { opacity: 0.08; }
dialog { border-radius: 18px; }
dialog::backdrop { background: rgba(0, 0, 0, 0.35); }
.toast { border-radius: 980px; }

@media (max-width: 960px) {
  .nav { background: rgba(251, 251, 253, 0.98); border-bottom: 1px solid var(--line); box-shadow: 0 16px 24px rgba(16, 24, 40, 0.08); }
  .nav a:not(.button) { font-size: 16px; opacity: 1; border-bottom: 1px solid var(--line); }
  .buy-pill { margin-left: auto; min-height: 32px; padding: 5px 15px; }
}
@media (max-width: 600px) {
  .bar { min-height: 52px; }
  .hero { padding: 40px 0 64px; }
  h1 { font-size: clamp(36px, 10.4vw, 52px); }
  .hero-lede { font-size: 19px; }
  .hero-actions { gap: 12px 24px; }
  .hero .hero-device { margin-top: 32px; }
  .example, .ev-card, .ram-compare-item, .thermal-strip { border-radius: 16px; }
}

/* Everyday cards: hold their arrival on the first frame until on screen (the shorthands above come after the shared
   paused rule and would otherwise override it), as for the thermal row. */
.ev-art.is-armed:not(.is-running) *, .ev-art.is-armed:not(.is-running) *::after { animation-play-state: paused; }
/* Bars are animated by "[data-demo].is-armed .x i" (0,3,1), which outranks the "*" pauses (0,3,0): pause the i elements
   explicitly too (Everyday line/split bars and the RAM demo's app bars). */
[data-demo].is-armed:not(.is-running) i, [data-demo].is-armed:not(.is-running) i::after { animation-play-state: paused; }


/* History example: real period controls (added by site.js; static labels without JS) and the inline Custom range. */
.period-controls .period-btn { min-height: 32px; padding: 4px 12px; border: 1px solid transparent; border-radius: 980px; background: none; color: var(--muted); font-size: 14px; cursor: pointer; }
.period-controls .period-btn:hover { color: var(--navy); border-color: var(--line); }
.period-controls .period-btn[aria-pressed="true"] { background: var(--navy); color: #FFFFFF; font-weight: 600; }
.period-controls[role="group"] { gap: 6px 4px; }
.period-controls[role="group"] .period-label { margin-right: 8px; }
.custom-range { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; margin-top: 16px; padding: 16px; border-radius: 14px; background: var(--paper); }
.custom-range[hidden] { display: none; }
.custom-range label { display: grid; gap: 4px; font-size: 13px; font-weight: 600; color: var(--navy); }
.custom-range input { min-height: 36px; padding: 4px 10px; border: 1px solid var(--control-line); border-radius: 8px; background: var(--white); color: var(--navy); font: 15px var(--font); }
.custom-range .custom-note { flex-basis: 100%; margin: 0; font-size: 13px; color: var(--muted); }
.custom-range .custom-error { flex-basis: 100%; margin: 0; font-size: 14px; font-weight: 600; color: #B3261E; }
.custom-range .custom-error:empty { display: none; }

/* Natural, balanced wrapping instead of forced breaks. */
h1, h2, h3 { text-wrap: pretty; }
p { text-wrap: pretty; }

/* Download details: one deliberate row per fact (linked version, file, signature) and the full SHA-256 on its own
   row: one unbroken, copyable line, scaled to the column where possible (container units; 12 px without them) and
   scrolling sideways on narrow phones instead of shrinking below 11 px or widening the page. */
.release-meta { margin: 24px 0 0; border-top: 1px solid var(--line); container-type: inline-size; }
.release-meta > div { display: grid; grid-template-columns: 7.5em minmax(0, 1fr); gap: 4px 16px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14px; line-height: 1.5; }
.release-meta dt { color: var(--muted); font-weight: 600; }
.release-meta dd { margin: 0; min-width: 0; color: var(--navy); }
.release-meta .release-hash { grid-template-columns: minmax(0, 1fr); }
.release-meta code { display: block; overflow-x: auto; white-space: nowrap; padding: 6px 10px; border-radius: 8px; background: var(--paper);
  border: 1px solid rgba(16, 24, 40, 0.06); font: 12px/1.6 ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;
  font-size: clamp(11px, calc((100cqw - 22px) / 38.6), 13px); -webkit-user-select: all; user-select: all; }

/* Optional analytics notice: compact, bottom corner, equal Reject / Accept. Footer "Analytics settings" reopens it. */
.consent { position: fixed; z-index: 90; left: 16px; right: 16px; bottom: 16px; max-width: 420px; margin-left: auto; padding: 16px 18px; background: #FFFFFF; color: var(--navy); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.10); font-size: 14px; line-height: 1.5; }
.consent[hidden] { display: none; }
.consent p { margin: 0 0 10px; }
.consent .consent-state { margin: 0; color: var(--muted); font-size: 13px; }
.consent .consent-state:empty { display: none; }
.consent-actions { display: flex; gap: 10px; margin-top: 12px; }
.consent-actions .button { flex: 1; }
.footer-link { display: block; padding: 0; margin: 0; border: 0; background: none; color: var(--muted); font: inherit; text-align: left; cursor: pointer; }
.footer-link:hover { text-decoration: underline; }

/* ===== Glass preview layer (4 Nov 2026, local preview only) =====
   The native app's hierarchy carried to the site: thin luminous rims, a protective neutral tint, modest blur only where
   something sits behind (header, hero card), shallow depth. Dense text stays protected (the hero card is 95% white,
   up from 94%, for 4.5:1 over black; the header keeps its 82%). No new animation, no blur on rows, no pointer or background effects. Brand action and status
   colours are untouched. Reduce transparency, more contrast, forced colours and no backdrop-filter all fall back to
   opaque, solid-edged surfaces. */
:root {
  --gl-rim-light: rgba(255, 255, 255, 0.9);          /* top-edge highlight on light glass */
  --gl-edge-light: rgba(16, 24, 40, 0.08);            /* hairline outline on light glass */
  --gl-depth-light: 0 1px 2px rgba(16, 24, 40, 0.04), 0 10px 28px rgba(16, 24, 40, 0.07);
  --gl-blur: saturate(170%) blur(20px);
  --gl-rim-dark: rgba(255, 255, 255, 0.14);           /* top-edge highlight on the dark product panels */
  --gl-edge-dark: rgba(155, 203, 243, 0.12);          /* inner ring on the dark product panels */
  --gl-sheen-dark: linear-gradient(160deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0) 42%);
  --gl-panel: linear-gradient(180deg, #16355A, #112B48); /* the panels' existing fill, unchanged */
  --gl-row-rim: rgba(255, 255, 255, 0.07);            /* rows inside dark panels: a rim only, no effect */
}

/* Header: the existing 82% tint and blur, now with a luminous lower rim and shallow depth. */
.site-header { border-bottom-color: var(--gl-edge-light);
  box-shadow: inset 0 1px 0 var(--gl-rim-light), inset 0 -1px 0 rgba(255, 255, 255, 0.55), 0 6px 20px rgba(16, 24, 40, 0.04); }

/* Hero card over the device: frosted (what shows through the 5% is blurred, not sharp), luminous rim; 95% keeps 4.5:1 secondary text even over black. */
.device-detail { background: rgba(255, 255, 255, 0.95); -webkit-backdrop-filter: var(--gl-blur); backdrop-filter: var(--gl-blur);
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: inset 0 1px 0 var(--gl-rim-light), 0 0 0 0.5px var(--gl-edge-light), 0 18px 44px rgba(16, 24, 40, 0.18), 0 4px 12px rgba(16, 24, 40, 0.06); }

/* Light content cards on the flat page: no blur (nothing behind them), a lit top edge and shallow depth. */
.ev-card, .ram-compare-item, .thermal-strip, .example { border-color: var(--gl-edge-light);
  box-shadow: inset 0 1px 0 var(--gl-rim-light), var(--gl-depth-light); }

/* Dark product panels (illustrations): a soft top-left sheen over their own fill, a luminous top edge and inner ring. */
.demo, .ev-art, .ts-art { background: var(--gl-sheen-dark), var(--gl-panel); }
.demo { box-shadow: inset 0 1px 0 var(--gl-rim-dark), inset 0 0 0 1px var(--gl-edge-dark), 0 24px 50px rgba(16, 24, 40, 0.18); }
.ev-art, .ts-art { box-shadow: inset 0 1px 0 var(--gl-rim-dark), inset 0 0 0 1px var(--gl-edge-dark); }
/* Native-style surfaces inside them (menu bar, its panel, the notification, rows): a rim only. */
.ev-menubar, .ev-drop, .ev-note, .app-row, .wf-row, .ts-row { box-shadow: inset 0 1px 0 var(--gl-row-rim); }
.ev-note { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 14px 30px rgba(4, 12, 24, 0.45); }

/* Fallbacks: no backdrop-filter, reduced transparency, more contrast, forced colours. */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .site-header { background: var(--page); }
  .device-detail { background: #FFFFFF; }
}
@media (prefers-reduced-transparency: reduce) {
  .site-header, .device-detail { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .site-header { background: var(--page); }
  .device-detail { background: #FFFFFF; }
  .demo, .ev-art, .ts-art { background: var(--gl-panel); }
}
@media (prefers-contrast: more) {
  .site-header, .device-detail { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .site-header { background: var(--page); border-bottom: 1px solid var(--control-line); box-shadow: none; }
  .device-detail { background: #FFFFFF; border-color: var(--control-line); box-shadow: 0 18px 44px rgba(16, 24, 40, 0.18); }
  .ev-card, .ram-compare-item, .thermal-strip, .example { background: var(--white); border-color: var(--control-line); box-shadow: none; }
  .demo, .ev-art, .ts-art { background: var(--gl-panel); border-color: #6FA6DA; box-shadow: none; }
  .ev-menubar, .ev-drop, .ev-note, .app-row, .wf-row, .ts-row { box-shadow: none; }
}
@media (forced-colors: active) {
  .site-header, .device-detail { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .site-header, .device-detail, .ev-card, .ram-compare-item, .thermal-strip, .example, .demo, .ev-art, .ts-art,
  .ev-menubar, .ev-drop, .ev-note, .app-row, .wf-row, .ts-row { box-shadow: none; }
}

/* ===== Pricing glass revision (4 Nov 2026, local preview only) =====
   The expressive marketing variant of Mercury Glass, for pricing.html and the homepage #pricing only: a static pale
   blue / sea-green silk scene with one soft SystemStory-navy ribbon (assets/decor/glass-ribbons.svg) that visibly runs through frosted pack cards. The
   selected pack is deeper navy glass, and a soft glow slides to it. Luminous bevelled rims, shallow depth and
   illuminated pills. Text protection (card tint + scene text colours, every pair >= 4.5:1 over the darkest and
   lightest part of the scene) is kept separate from the highlights (pseudo-element layers under the text). Motion
   only answers a real change of pack; nothing loops, no animated blur, no pointer tracking. Prices, packs, links and
   copy are unchanged. */
:root {
  --gs-ink: #111827;                     /* primary text inside the scene */
  --gs-muted: #404857;                   /* secondary text inside the scene */
  --gs-link: #0A4F9E;                    /* links and the secondary pill inside the scene */
  --gs-frost: linear-gradient(170deg, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.40));
  --gs-frost-hover: linear-gradient(170deg, rgba(255, 255, 255, 0.70), rgba(255, 255, 255, 0.48));
  --gs-smoke: linear-gradient(170deg, rgba(22, 53, 90, 0.86), rgba(17, 43, 72, 0.92));   /* #16355A / #112B48 */
  --gs-blur: blur(22px) saturate(160%);
  --gs-rim: rgba(255, 255, 255, 0.85);
  --gs-bevel: inset 0 1.5px 0 rgba(255, 255, 255, 0.95), inset 0 -1px 0 rgba(255, 255, 255, 0.35),
    inset 1px 0 0 rgba(255, 255, 255, 0.30), inset -1px 0 0 rgba(255, 255, 255, 0.22);
  --gs-depth: 0 1px 2px rgba(17, 43, 72, 0.06), 0 18px 40px rgba(17, 43, 72, 0.14);
  --gs-depth-up: 0 2px 4px rgba(17, 43, 72, 0.07), 0 26px 52px rgba(17, 43, 72, 0.20);
  --gs-ease: cubic-bezier(.2, .8, .2, 1);
}

/* The scene: a rounded, self-contained backdrop behind the cards (never the whole page). */
.glass-scene { position: relative; isolation: isolate; overflow: hidden; margin-top: 48px; padding: clamp(20px, 4vw, 52px); border-radius: 32px;
  background: url("decor/glass-ribbons.svg?v=2") center / cover no-repeat, linear-gradient(160deg, #DCEAF8, #E2F1EC 50%, #E7EFFA);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 0 0 1px rgba(255, 255, 255, 0.45), 0 30px 70px rgba(17, 43, 72, 0.12); }

/* Frosted glass surface shared by the pack cards, the homepage cards and the buy tray. */
.glass-scene .pack label, .glass-scene-home .price-card, .glass-scene-home .quote, .glass-scene .buybar {
  position: relative; isolation: isolate; overflow: hidden; color: var(--gs-ink);
  background: var(--gs-frost); -webkit-backdrop-filter: var(--gs-blur); backdrop-filter: var(--gs-blur);
  border: 1px solid var(--gs-rim); box-shadow: var(--gs-bevel), var(--gs-depth); }
/* Specular highlight: its own layer under the text, apart from the protective tint. */
.glass-scene .pack label::after, .glass-scene-home .price-card::after, .glass-scene-home .quote::after {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: radial-gradient(120% 70% at 12% 0%, rgba(255, 255, 255, 0.70), rgba(255, 255, 255, 0) 55%);
  transition: opacity .35s var(--gs-ease); }

/* pricing.html: three genuine pack choices (the existing keyboard-operable radios). */
.glass-scene .packs-set { margin: 0; }
.glass-scene .packs { position: relative; gap: 20px; }
.glass-scene .pack { z-index: 1; }
.glass-scene .pack label { padding: 28px 26px 30px; border-radius: 26px;
  transition: transform .35s var(--gs-ease), box-shadow .35s var(--gs-ease), border-color .35s var(--gs-ease); }
.glass-scene .pack .macs, .glass-scene .pack .price, .glass-scene .pack .note { color: var(--gs-ink); transition: color .3s var(--gs-ease); }
.glass-scene .pack .per { color: var(--gs-muted); transition: color .3s var(--gs-ease); }
/* Smoky glass for the selected pack: a layer that fades in, so the change reads as the glass deepening. */
.glass-scene .pack label::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: var(--gs-smoke); opacity: 0; transition: opacity .35s var(--gs-ease); }
@media (hover: hover) {
  .glass-scene .pack label:hover { background: var(--gs-frost-hover); border-color: var(--gs-rim); transform: translateY(-3px); box-shadow: var(--gs-bevel), var(--gs-depth-up); }
}
.glass-scene .pack input:checked + label { background: var(--gs-frost); border-color: rgba(255, 255, 255, 0.55);
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.45), inset 0 -1px 0 rgba(0, 0, 0, 0.25), 0 2px 6px rgba(9, 26, 44, 0.14), 0 26px 54px rgba(17, 43, 72, 0.32); }
.glass-scene .pack input:checked + label::before { opacity: 1; }
.glass-scene .pack input:checked + label::after { opacity: 0.28; }
.glass-scene .pack input:checked + label .macs, .glass-scene .pack input:checked + label .price,
.glass-scene .pack input:checked + label .note { color: #FFFFFF; }
.glass-scene .pack input:checked + label .per { color: #D3E4F4; }
/* "Selected" (the existing state label, not a plan tier) becomes a small glass chip on the card's top line. */
.glass-scene .pack .macs { display: flex; align-items: center; min-height: 26px; }
.glass-scene .pack input:checked + label .macs::after { margin-left: auto; padding: 2px 10px; border-radius: 999px; color: #FFFFFF;
  background: rgba(255, 255, 255, 0.16); border: 1px solid rgba(255, 255, 255, 0.30); letter-spacing: 0.08em; }

/* The glow that slides to the chosen pack (three equal columns only; it follows the real :checked radio). */
@supports selector(:has(*)) {
  @media (min-width: 961px) {
    .glass-scene .packs::before { content: ""; position: absolute; z-index: 0; top: -10px; bottom: -10px; left: -10px; width: calc((100% - 40px) / 3 + 20px);
      border-radius: 34px; pointer-events: none;
      background: radial-gradient(70% 55% at 50% 0%, rgba(255, 255, 255, 0.80), rgba(255, 255, 255, 0) 70%),
        radial-gradient(80% 60% at 50% 100%, rgba(60, 143, 217, 0.32), rgba(60, 143, 217, 0) 70%);
      box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.60), 0 0 44px rgba(60, 143, 217, 0.30);
      transition: transform .55s cubic-bezier(.3, 1.3, .4, 1); }
    .glass-scene .packs:has(#pack-3:checked)::before { transform: translateX(100%); }
    .glass-scene .packs:has(#pack-10:checked)::before { transform: translateX(200%); }
  }
}

/* Buy tray: denser frost for the VAT and checkout copy; illuminated pills. */
.glass-scene .buybar { margin-top: 28px; padding: 20px 24px; border-radius: 26px;
  background: linear-gradient(170deg, rgba(255, 255, 255, 0.76), rgba(255, 255, 255, 0.66)); }
.glass-scene .buybar .availability { color: var(--gs-muted); }
.glass-scene .buybar .availability a { color: var(--gs-link); }
.glass-scene .button, #pricing .actions .button { min-height: 52px; padding: 14px 28px; font-size: 17px; }
.glass-scene .button.primary, #pricing .actions .button.primary { background: linear-gradient(180deg, #0071E3, #005FC4); color: #FFFFFF;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.50), inset 0 10px 12px -10px rgba(255, 255, 255, 0.55), inset 0 -1px 0 rgba(0, 0, 0, 0.14),
    0 8px 22px rgba(0, 113, 227, 0.34), 0 2px 6px rgba(0, 113, 227, 0.22); }
/* Hover deepens rather than lightens: the top stop stays the brand blue (white text 4.7:1), the lower stop darkens and
   the light shadow grows. */
.glass-scene .button.primary:hover, #pricing .actions .button.primary:hover { background: linear-gradient(180deg, #0071E3, #0055B3); color: #FFFFFF;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.50), inset 0 10px 12px -10px rgba(255, 255, 255, 0.55), inset 0 -1px 0 rgba(0, 0, 0, 0.18),
    0 12px 28px rgba(0, 113, 227, 0.42), 0 3px 8px rgba(0, 113, 227, 0.28); }
.glass-scene .button.secondary, #pricing .actions .button.secondary { color: var(--gs-link); border: 1px solid rgba(255, 255, 255, 0.95);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.66));
  -webkit-backdrop-filter: blur(12px) saturate(160%); backdrop-filter: blur(12px) saturate(160%);
  box-shadow: inset 0 1px 0 #FFFFFF, inset 0 -1px 0 rgba(17, 43, 72, 0.10), 0 6px 18px rgba(17, 43, 72, 0.16); }
.glass-scene .button.secondary:hover, #pricing .actions .button.secondary:hover { color: var(--gs-link); background: #FFFFFF; }
#pricing .actions .button.secondary { border-color: rgba(10, 79, 158, 0.35); }
/* The selected price rolls in once when the chosen pack changes (site.js adds .is-rolling); width holds steady. */
.glass-scene #buy-selected { overflow: hidden; min-width: 250px; }
.buy-roll { display: inline-block; }
#buy-selected.is-rolling .buy-roll { animation: gs-roll .42s var(--gs-ease) both; }
@keyframes gs-roll { from { opacity: 0; transform: translateY(70%); } to { opacity: 1; transform: none; } }

/* Homepage #pricing: linked glass cards opening pricing.html with that pack selected; no checkout here. */
.glass-scene-home { margin-top: 0; }
.glass-scene-home .price-row { border-top: 0; gap: 18px; }
.glass-scene-home .price-row li, .glass-scene-home .price-row li + li { padding: 0; border: 0; }
.glass-scene-home .price-card, .glass-scene-home .quote { display: flex; flex-direction: column; gap: 4px; height: 100%; padding: 24px 24px 26px; border-radius: 24px;
  text-decoration: none; transition: transform .3s var(--gs-ease), box-shadow .3s var(--gs-ease); }
/* The quote card is the li itself, so it needs to outrank the li reset above (0,3,1 beats 0,2,2) for the same padding. */
.glass-scene-home .price-row li.quote { padding: 24px 24px 26px; }
.glass-scene-home .price-card .macs, .glass-scene-home .quote .macs { color: var(--gs-ink); }
.glass-scene-home .price-card .price { color: var(--gs-ink); }
.glass-scene-home .price-card .per { color: var(--gs-muted); }
.glass-scene-home .quote a { color: var(--gs-link); }
.glass-scene-home .price-card:hover { color: var(--gs-ink); text-decoration: none; }
@media (hover: hover) {
  .glass-scene-home .price-card:hover { background: var(--gs-frost-hover); transform: translateY(-3px); box-shadow: var(--gs-bevel), var(--gs-depth-up); }
}

@media (max-width: 960px) {
  .glass-scene { padding: 24px; border-radius: 26px; }
}
@media (max-width: 600px) {
  .glass-scene { margin-top: 32px; padding: 14px; border-radius: 22px; }
  .glass-scene .packs { gap: 14px; }
  .glass-scene .pack label { padding: 22px 20px 24px; border-radius: 20px; }
  .glass-scene .buybar { padding: 16px; border-radius: 20px; }
  .glass-scene .buybar .button, .glass-scene #buy-selected { width: 100%; min-width: 0; }
  .glass-scene-home .price-row { gap: 12px; }
  .glass-scene-home .price-card, .glass-scene-home .quote { padding: 20px; border-radius: 20px; }
  .glass-scene-home .price-row li.quote { padding: 20px; }
}

/* Fallbacks. Without backdrop-filter or with reduced transparency: opaque cards and tray (the scene stays behind as
   a plain picture). More contrast: no scene, solid surfaces and edges. Forced colours: system colours only. Reduced
   motion: no slide, roll, lift or fade (the global rule), selection still shown at once. */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .glass-scene .pack label, .glass-scene-home .price-card, .glass-scene-home .quote, .glass-scene .buybar, .glass-scene .button.secondary { background: #FFFFFF; }
  .glass-scene .pack input:checked + label { background: #16355A; }
  .glass-scene .pack input:checked + label::before { opacity: 0; }
}
@media (prefers-reduced-transparency: reduce) {
  .glass-scene .pack label, .glass-scene-home .price-card, .glass-scene-home .quote, .glass-scene .buybar, .glass-scene .button.secondary {
    -webkit-backdrop-filter: none; backdrop-filter: none; background: #FFFFFF; }
  .glass-scene .pack input:checked + label { background: #16355A; }
  .glass-scene .pack input:checked + label::before { opacity: 0; }
}
@media (prefers-contrast: more) {
  .glass-scene { background: var(--paper); box-shadow: inset 0 0 0 1px var(--control-line); }
  .glass-scene .pack label, .glass-scene-home .price-card, .glass-scene-home .quote, .glass-scene .buybar, .glass-scene .button.secondary {
    -webkit-backdrop-filter: none; backdrop-filter: none; background: #FFFFFF; border-color: var(--navy); box-shadow: none; }
  .glass-scene .pack label::after, .glass-scene-home .price-card::after, .glass-scene-home .quote::after, .glass-scene .packs::before { display: none; }
  .glass-scene .pack input:checked + label { background: #1D1D1F; border-color: #1D1D1F; box-shadow: 0 0 0 2px #1D1D1F; }
  .glass-scene .pack input:checked + label::before { opacity: 0; }
  .glass-scene .button.primary, #pricing .actions .button.primary { background: var(--action); box-shadow: none; }
}
@media (forced-colors: active) {
  .glass-scene { background: Canvas; box-shadow: none; }
  .glass-scene .pack label, .glass-scene-home .price-card, .glass-scene-home .quote, .glass-scene .buybar {
    -webkit-backdrop-filter: none; backdrop-filter: none; background: Canvas; border: 1px solid CanvasText; box-shadow: none; }
  .glass-scene .pack label::before, .glass-scene .pack label::after, .glass-scene-home .price-card::after, .glass-scene-home .quote::after, .glass-scene .packs::before { display: none; }
  .glass-scene .pack input:checked + label { outline: 3px solid Highlight; outline-offset: 2px; }
}
@media (prefers-reduced-motion: reduce) {
  .glass-scene .pack label:hover, .glass-scene-home .price-card:hover { transform: none; }
  #buy-selected.is-rolling .buy-roll { animation: none; }
}

/* ===== Footer glass slab (4 Nov 2026, local preview only) =====
   Every page: the existing footer content sits on one broad, rounded silver-glass slab with a metallic rim (bright top
   and bottom, shaded sides), shallow elevation and small glass action pills that reuse existing destinations
   (Download, contact email, Mercury Apps). Links, Terms/Privacy, Analytics settings, attribution and copyright are
   unchanged. The slab is a near-opaque tinted fill (no backdrop-filter: only a soft gradient lies behind it), so text
   contrast doesn't depend on what is underneath. */
:root {
  --gf-fill: linear-gradient(135deg, rgba(226, 228, 234, 0.92), rgba(246, 247, 250, 0.90) 46%, rgba(217, 219, 227, 0.92));
  --gf-rim: linear-gradient(180deg, #FFFFFF 0%, #A7ABB5 32%, #8C909B 55%, #C9CCD3 80%, #FFFFFF 100%);
  --gf-text: #4A505B;                    /* secondary text on the slab (>= 5.8:1) */
  --gf-link: #3F4550;                    /* footer links on the slab (>= 6.9:1) */
  --gf-line: rgba(60, 64, 80, 0.14);
}
.site-footer { border-top: 0; padding: 64px 0 0;
  background: radial-gradient(70% 90% at 18% 0%, rgba(214, 226, 250, 0.55), rgba(214, 226, 250, 0) 70%),
    radial-gradient(60% 80% at 86% 8%, rgba(214, 240, 226, 0.50), rgba(214, 240, 226, 0) 70%), linear-gradient(180deg, var(--page), #EEF0F5); }
.site-footer > .wrap { position: relative; isolation: isolate; padding: 44px 48px 28px; border-radius: 36px; background: var(--gf-fill);
  box-shadow: inset 0 2px 1px rgba(255, 255, 255, 0.95), inset 0 -2px 1px rgba(255, 255, 255, 0.80),
    inset 5px 0 9px -5px rgba(70, 74, 86, 0.30), inset -5px 0 9px -5px rgba(70, 74, 86, 0.30),
    0 2px 4px rgba(30, 34, 48, 0.05), 0 26px 54px rgba(30, 34, 48, 0.12); }
/* Metallic rim: a 1.5 px gradient ring (masked to the edge, so it never tints the slab's interior). */
@supports ((mask-composite: exclude) or (-webkit-mask-composite: xor)) {
  .site-footer > .wrap::before { content: ""; position: absolute; inset: 0; z-index: -1; padding: 1.5px; border-radius: inherit; pointer-events: none;
    background: var(--gf-rim);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; }
}
.site-footer .foot-brand p, .site-footer .foot-maker p { color: var(--gf-text); }
.site-footer .cols a, .site-footer .footer-link { color: var(--gf-link); }
.site-footer .cols a:hover, .site-footer .footer-link:hover { color: var(--navy); }
.site-footer .foot-maker { border-top-color: var(--gf-line); margin-top: 40px; }

/* Small glass pills: Download (dark, like the primary action), Contact and Made by Mercury Apps (light). */
.foot-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.foot-pill, .site-footer .maker-link { display: inline-flex; align-items: center; min-height: 44px; border-radius: 999px; text-decoration: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.64)); border: 1px solid rgba(255, 255, 255, 0.95);
  box-shadow: inset 0 1px 0 #FFFFFF, inset 0 -1px 0 rgba(60, 64, 80, 0.08), 0 4px 12px rgba(30, 34, 48, 0.10); }
.foot-pill { padding: 10px 20px; font-size: 14px; font-weight: 600; color: var(--navy); }
.foot-pill:hover { color: var(--navy); text-decoration: none; background: #FFFFFF; }
.foot-pill-dark { color: #FFFFFF; background: linear-gradient(180deg, #3A3C42, #111216); border-color: rgba(0, 0, 0, 0.6);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 6px 16px rgba(0, 0, 0, 0.22); }
.foot-pill-dark:hover { color: #FFFFFF; background: linear-gradient(180deg, #46484F, #1B1C21); }
.site-footer .maker-link { padding: 6px 16px 6px 14px; color: var(--gf-text); }
.site-footer .maker-link:hover { color: var(--navy); text-decoration: none; background: #FFFFFF; }

@media (max-width: 600px) {
  .site-footer { padding-top: 40px; }
  .site-footer > .wrap { padding: 28px 22px 22px; border-radius: 26px; }
}

/* Fallbacks: reduced transparency and no backdrop support get an opaque slab; more contrast a white slab with a solid
   edge and darker text; forced colours system colours only. */
@media (prefers-reduced-transparency: reduce) {
  .site-footer > .wrap { background: linear-gradient(135deg, #E2E4EA, #F6F7FA 46%, #D9DBE3); }
  .foot-pill, .site-footer .maker-link { background: #FFFFFF; }
  .foot-pill-dark { background: #1D1D1F; }
}
@media (prefers-contrast: more) {
  .site-footer > .wrap { background: #FFFFFF; border: 1px solid var(--navy); box-shadow: none; }
  .site-footer > .wrap::before { display: none; }
  .site-footer .foot-brand p, .site-footer .foot-maker p, .site-footer .cols a, .site-footer .footer-link, .site-footer .maker-link { color: var(--navy); }
  .foot-pill, .site-footer .maker-link { background: #FFFFFF; border-color: var(--navy); box-shadow: none; }
  .foot-pill-dark { background: #1D1D1F; color: #FFFFFF; }
}
@media (forced-colors: active) {
  .site-footer, .site-footer > .wrap { background: Canvas; box-shadow: none; }
  .site-footer > .wrap { border: 1px solid CanvasText; }
  .site-footer > .wrap::before { display: none; }
  .foot-pill, .site-footer .maker-link { background: Canvas; border: 1px solid LinkText; box-shadow: none; }
}

/* ===== Glass controls, website-wide (5 Nov 2026) =====
   Every button-like control shares the approved pricing pill family: illuminated brand-blue primary, white-glass
   secondary and chips, smoky glass for a pressed/selected/open state. Navigation, text links and dense demo rows keep
   their roles. Geometry is unchanged except the mobile Menu toggle, which gains 8 px side padding so its glass reads.
   Hover never lightens a white-text fill above #0071E3 (4.7:1); the old #0077ED hovers (4.32:1) are replaced. Only
   transform/shadow/colour transitions, removed under reduced motion; no blur on controls or rows. */
:root {
  --gc-primary: linear-gradient(180deg, #0071E3, #005FC4);
  --gc-primary-hover: linear-gradient(180deg, #0071E3, #0055B3);
  --gc-primary-active: linear-gradient(180deg, #0062C8, #004E9E);
  --gc-primary-light: inset 0 1px 0 rgba(255, 255, 255, 0.50), inset 0 10px 12px -10px rgba(255, 255, 255, 0.55), inset 0 -1px 0 rgba(0, 0, 0, 0.14);
  --gc-glass: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.70));
  --gc-glass-rim: inset 0 1px 0 #FFFFFF, inset 0 -1px 0 rgba(16, 24, 40, 0.06);
  --gc-glass-depth: 0 1px 2px rgba(16, 24, 40, 0.06), 0 4px 12px rgba(16, 24, 40, 0.08);
  --gc-glass-depth-up: 0 2px 4px rgba(16, 24, 40, 0.07), 0 8px 20px rgba(16, 24, 40, 0.12);
  --gc-smoke: linear-gradient(170deg, #3A3C4E, #1F2130);
  --gc-ease: cubic-bezier(.2, .8, .2, 1);
}

/* Shared motion for every button-like control. */
.button, .buy-pill, .menu-toggle, .copy-link, .period-controls .period-btn, .demo-pause, summary::after {
  transition: background .18s var(--gc-ease), border-color .18s var(--gc-ease), box-shadow .18s var(--gc-ease), transform .18s var(--gc-ease), color .18s var(--gc-ease); }

/* Primary: header Buy, hero Buy, Choose a pack, Download, Buy on pricing (the pricing scene keeps its larger size). */
.button.primary, .buy-pill { background: var(--gc-primary); color: #FFFFFF;
  box-shadow: var(--gc-primary-light), 0 6px 16px rgba(0, 113, 227, 0.26), 0 1px 3px rgba(0, 113, 227, 0.20); }
.button.primary:hover, .buy-pill:hover { background: var(--gc-primary-hover); color: #FFFFFF; text-decoration: none;
  box-shadow: var(--gc-primary-light), 0 10px 24px rgba(0, 113, 227, 0.36), 0 2px 6px rgba(0, 113, 227, 0.24); }
.button.primary:active, .buy-pill:active, .glass-scene .button.primary:active, #pricing .actions .button.primary:active {
  background: var(--gc-primary-active); transform: translateY(1px);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.22), inset 0 -1px 0 rgba(255, 255, 255, 0.12), 0 2px 6px rgba(0, 113, 227, 0.22); }

/* Secondary and small: white glass with the existing blue label and a blue-tinted edge. */
.button.secondary { background: var(--gc-glass); color: var(--blue); border-color: rgba(0, 102, 204, 0.42);
  box-shadow: var(--gc-glass-rim), var(--gc-glass-depth); }
.button.secondary:hover { background: #FFFFFF; color: var(--blue); border-color: rgba(0, 102, 204, 0.62); text-decoration: none;
  box-shadow: var(--gc-glass-rim), var(--gc-glass-depth-up); }
.button.secondary:active, .copy-link:active, .menu-toggle:active, .period-controls .period-btn:active { transform: translateY(1px);
  box-shadow: inset 0 2px 4px rgba(16, 24, 40, 0.12), 0 1px 2px rgba(16, 24, 40, 0.06); }
.button[disabled], .button[aria-disabled="true"], .copy-link[disabled], .period-controls .period-btn[disabled] {
  opacity: 0.5; cursor: default; transform: none; box-shadow: none; }

/* Small chips: support page Copy link, mobile Menu. */
.copy-link, .menu-toggle { background: var(--gc-glass); border: 1px solid rgba(16, 24, 40, 0.12); color: var(--navy);
  box-shadow: var(--gc-glass-rim), var(--gc-glass-depth); }
.copy-link:hover, .menu-toggle:hover { background: #FFFFFF; border-color: rgba(16, 24, 40, 0.22); box-shadow: var(--gc-glass-rim), var(--gc-glass-depth-up); }
.menu-toggle { border-radius: 980px; padding: 6px 12px; }
/* Open menu: the selected (smoky) state. */
.menu-toggle[aria-expanded="true"] { background: var(--gc-smoke); color: #FFFFFF; border-color: rgba(0, 0, 0, 0.5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 4px 12px rgba(20, 22, 40, 0.22); }

/* History example period controls: quiet until hovered; the pressed period is smoky glass. */
.period-controls .period-btn:hover { background: var(--gc-glass); border-color: rgba(16, 24, 40, 0.12); box-shadow: var(--gc-glass-rim), var(--gc-glass-depth); }
.period-controls .period-btn[aria-pressed="true"], .period-controls .period-btn[aria-expanded="true"] {
  background: var(--gc-smoke); color: #FFFFFF; border-color: rgba(0, 0, 0, 0.5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 3px 10px rgba(20, 22, 40, 0.20); }
.custom-range { background: linear-gradient(180deg, rgba(255, 255, 255, 0.85), rgba(245, 245, 247, 0.95)); border: 1px solid rgba(16, 24, 40, 0.08);
  box-shadow: inset 0 1px 0 #FFFFFF, 0 6px 18px rgba(16, 24, 40, 0.06); }

/* Dark demo Pause: a small dark-glass pill with a lit top edge. */
.demo-pause { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 2px 6px rgba(4, 12, 24, 0.35); }
.demo-pause[aria-pressed="true"] { background: rgba(155, 203, 243, 0.22); border-color: #9BCBF3; }

/* FAQ disclosure: the +/– becomes a small glass control; open is smoky. */
summary::after { top: 50%; right: 0; width: 30px; height: 30px; margin-top: -15px; display: grid; place-items: center;
  border-radius: 50%; font-size: 20px; line-height: 1; background: var(--gc-glass); border: 1px solid rgba(16, 24, 40, 0.12);
  box-shadow: var(--gc-glass-rim), var(--gc-glass-depth); }
details.learn summary::after { top: 50%; }
summary:hover::after { background: #FFFFFF; border-color: rgba(16, 24, 40, 0.22); box-shadow: var(--gc-glass-rim), var(--gc-glass-depth-up); }
details[open] > summary::after { background: var(--gc-smoke); color: #FFFFFF; border-color: rgba(0, 0, 0, 0.5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 3px 10px rgba(20, 22, 40, 0.20); }

/* Analytics notice: an overlapping card, so the protective overlay recipe (95% white, blur, luminous edge). */
.consent { background: rgba(255, 255, 255, 0.95); -webkit-backdrop-filter: saturate(170%) blur(20px); backdrop-filter: saturate(170%) blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 0 0 0.5px rgba(16, 24, 40, 0.10), 0 14px 34px rgba(16, 24, 40, 0.14); }

/* Fallbacks. */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .consent { background: #FFFFFF; }
}
@media (prefers-reduced-transparency: reduce) {
  .button.secondary, .copy-link, .menu-toggle, .period-controls .period-btn:hover, summary::after, .custom-range { background: #FFFFFF; }
  .consent { background: #FFFFFF; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .menu-toggle[aria-expanded="true"], .period-controls .period-btn[aria-pressed="true"], .period-controls .period-btn[aria-expanded="true"],
  details[open] > summary::after { background: #2A2C3C; }
}
@media (prefers-contrast: more) {
  .button.primary, .buy-pill { background: var(--action); border-color: #00448A; box-shadow: none; }
  .button.primary:hover, .buy-pill:hover { background: #005FC4; box-shadow: none; }
  .button.secondary { background: #FFFFFF; border-color: var(--blue); box-shadow: none; }
  .copy-link, .menu-toggle, summary::after, .period-controls .period-btn:hover { background: #FFFFFF; border-color: var(--navy); box-shadow: none; }
  .menu-toggle[aria-expanded="true"], .period-controls .period-btn[aria-pressed="true"], .period-controls .period-btn[aria-expanded="true"],
  details[open] > summary::after { background: #1D1D1F; border-color: #1D1D1F; box-shadow: none; }
  .consent { background: #FFFFFF; -webkit-backdrop-filter: none; backdrop-filter: none; border-color: var(--navy); box-shadow: none; }
  .custom-range { background: #FFFFFF; border-color: var(--navy); box-shadow: none; }
}
@media (forced-colors: active) {
  .button, .buy-pill, .copy-link, .menu-toggle, .period-controls .period-btn, .demo-pause, summary::after {
    background: ButtonFace; color: ButtonText; border: 1px solid ButtonText; box-shadow: none; }
  .menu-toggle[aria-expanded="true"], .period-controls .period-btn[aria-pressed="true"], .period-controls .period-btn[aria-expanded="true"],
  details[open] > summary::after { background: Highlight; color: HighlightText; border-color: Highlight; }
  .consent, .custom-range { background: Canvas; color: CanvasText; border: 1px solid CanvasText; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-reduced-motion: reduce) {
  .button:active, .buy-pill:active, .copy-link:active, .menu-toggle:active, .period-controls .period-btn:active { transform: none; }
}