/* ──────────────────────────────────────────────────────────────────────
   Make/Shift Public Site — base stylesheet

   Consumes CSS custom properties from siteSettingsCSS() (server-injected
   inline above this file's <link>). Display sizes use clamp() so the
   hero scales fluidly between phone and desktop without needing the
   modular scale to do double duty as both body and display.
   ────────────────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

html { color-scheme: light dark; }
body {
  margin: 0;
  font-family: var(--ms-font-text);
  font-size: var(--ms-fs-base);
  line-height: 1.5;
  color: var(--ms-fg);
  background: var(--ms-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }

/* ─── Color cascade (Brand Kit → page palette → block override) ────────
   --page-* default to the Brand Kit tokens; the page palette overrides them
   on .site-main; a block's _colors override them on a .block-colorscope.   */
:root {
  --page-bg:       var(--ms-bg);
  --page-headline: var(--ms-fg);
  --page-text:     var(--ms-fg);
}
.site-main { background: var(--page-bg); color: var(--page-text); }
.block-shell { background: var(--page-bg); color: var(--page-text); }

/* Block layout controls (width / spacing / bg-image), carried on .block-shell */
.block-shell { margin-top: var(--shell-mt, 0); margin-bottom: var(--shell-mb, 0); }
.block-shell--wide > .block { max-width: 1440px; }
.block-shell--full > .block { max-width: none; padding-left: 0; padding-right: 0; }
.block-shell--bg-image { background-size: cover; background-position: center; }
.block-shell--bg-image > .block { position: relative; }
/* Headline-tier elements take --page-headline (canvases set their own colors
   and are intentionally excluded). */
.hero-typo__headline, .hero-split__headline, .big-quote__text,
.block--prose h1, .block--prose h2, .block--prose h3,
.feature-trio__title, .workflow__title, .pricing__amount,
.product-grid__name, .latest__headline, .thanks__headline, .recover__headline {
  color: var(--page-headline);
}

::selection { background: var(--ms-fg); color: var(--ms-bg); }

/* Display sizes — fluid, outside the modular scale.
   Hero: 56px (phone) → 144px (desktop)
   Sub:  36px → 80px
   Quote: 32px → 64px  */
:root {
  --ms-display-hero: clamp(56px, 9vw, 144px);
  --ms-display-sub:  clamp(36px, 5.5vw, 80px);
  --ms-display-quote: clamp(28px, 4vw, 56px);
  --ms-max-content: 1180px;
  --ms-max-prose:   62ch;
  --ms-gutter:      clamp(20px, 4vw, 56px);

  /* Product palette fallbacks — chrome + non-product pages get these.
     Each product page overrides --product-* via [data-product="<slug>"]. */
  --product-primary:     var(--ms-accent);
  --product-secondary:   var(--ms-fg);
  --product-on-primary:  #ffffff;
  --product-canvas-bg:   #0a0a0a;
  --product-canvas-fg:   #fafafa;
}

/* Per-product palettes are now emitted dynamically from each product's
   `theme` JSON (see lib/products.php::productThemeCSS + layout.php). A new
   product gets its colors from data — no CSS edit required. The :root
   fallbacks above cover chrome + non-product pages. */

/* ─── Site chrome ──────────────────────────────────────────────────── */
.site-header {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(var(--ms-space) * 2.5) var(--ms-gutter);
  background: color-mix(in srgb, var(--ms-bg) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--ms-border);
}

.wordmark {
  font-family: var(--ms-font-display);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
  display: inline-flex; align-items: baseline;
  line-height: 1;
}
.wordmark__make  { font-weight: 700; }
.wordmark__slash {
  color: var(--ms-accent);
  font-weight: 400;
  padding: 0 0.04em;
  transform: translateY(-0.02em);
  display: inline-block;
}
.wordmark__shift { font-weight: 300; letter-spacing: 0.04em; }

.site-nav {
  display: flex; gap: calc(var(--ms-space) * 4);
  font-size: var(--ms-fs-sm);
}
.site-nav a {
  color: var(--ms-mute);
  transition: color var(--ms-hover-ms) ease-out;
  text-decoration: none;
  font-weight: 500;
  letter-spacing: -0.005em;
}
.site-nav a:hover { color: var(--ms-fg); text-decoration: none; }

.site-main { min-height: 70vh; }

.site-footer {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: var(--ms-gutter);
  padding: calc(var(--ms-space) * 12) var(--ms-gutter) calc(var(--ms-space) * 6);
  border-top: 1px solid var(--ms-border);
  font-size: var(--ms-fs-sm);
  margin-top: calc(var(--ms-space) * 12);
}
.site-footer__col {
  display: flex; flex-direction: column;
  gap: 6px;
}
.site-footer__col--meta { gap: calc(var(--ms-space) * 2); align-items: flex-start; }
.site-footer__label {
  font-family: var(--ms-font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ms-mute);
  margin-bottom: calc(var(--ms-space) * 1);
}
.site-footer a { color: var(--ms-mute); }
.site-footer a:hover { color: var(--ms-fg); }
.site-footer__copyright {
  grid-column: 1 / -1;
  padding-top: calc(var(--ms-space) * 4);
  margin-top: calc(var(--ms-space) * 4);
  border-top: 1px solid var(--ms-border);
  font-size: 11px;
  color: var(--ms-mute);
  font-family: var(--ms-font-mono);
}

.theme-toggle {
  background: none; border: 1px solid var(--ms-border);
  font-family: inherit; font-size: 10px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ms-mute); padding: 6px 12px;
  cursor: pointer; align-self: flex-start;
  transition: color var(--ms-hover-ms) ease-out, border-color var(--ms-hover-ms) ease-out;
}
.theme-toggle:hover { color: var(--ms-fg); border-color: var(--ms-fg); }

/* ─── Block frame defaults ─────────────────────────────────────────── */
.block {
  max-width: var(--ms-max-content);
  margin: 0 auto;
  padding: calc(var(--ms-space) * 6) var(--ms-gutter);
}

/* ─── Block stub (admin/preview only) ──────────────────────────────── */
.block-stub {
  display: inline-block;
  padding: 2px 6px;
  background: var(--ms-border);
  color: var(--ms-mute);
  font-family: var(--ms-font-mono);
  font-size: 10px;
  border-radius: 2px;
}

/* ─── Hero typographic ─────────────────────────────────────────────── */
.block--hero-typographic {
  padding: clamp(80px, 14vw, 200px) var(--ms-gutter) clamp(60px, 8vw, 120px);
}
.hero-typo__eyebrow {
  font-family: var(--ms-font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ms-mute);
  margin-bottom: calc(var(--ms-space) * 3);
}
.hero-typo__headline {
  font-family: var(--ms-font-display);
  font-size: var(--ms-display-hero);
  font-weight: 500;
  letter-spacing: -0.045em;
  line-height: 0.95;
  margin: 0 0 calc(var(--ms-space) * 4);
  max-width: 18ch;
}
.hero-typo__lede {
  max-width: var(--ms-max-prose);
  font-size: clamp(16px, 1.6vw, 20px);
  color: var(--ms-mute);
  line-height: 1.45;
}
.hero-typo__lede p { margin: 0; }

/* ─── Hero split ───────────────────────────────────────────────────── */
.block--hero-split {
  display: grid; grid-template-columns: 1.1fr 1fr;
  gap: calc(var(--ms-space) * 8);
  align-items: center;
  padding-top: calc(var(--ms-space) * 10);
  padding-bottom: calc(var(--ms-space) * 10);
}
.hero-split__headline {
  font-family: var(--ms-font-display);
  font-size: var(--ms-display-sub);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.0;
  margin: 0 0 calc(var(--ms-space) * 3);
  max-width: 12ch;
}
.hero-split__lede {
  color: var(--ms-mute);
  font-size: clamp(15px, 1.4vw, 18px);
  max-width: 40ch;
  line-height: 1.5;
}
.hero-split__image {
  aspect-ratio: 4 / 3;
  background: var(--ms-border);
  overflow: hidden;
}
.hero-split__image picture,
.hero-split__image img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ─── Bespoke canvases ─────────────────────────────────────────────── */
.block--canvas {
  padding: calc(var(--ms-space) * 4) var(--ms-gutter);
  max-width: var(--ms-max-content);
}

/* Product pages: the hero (first module — the bespoke canvas) sits flush
   under the sticky header, no top gap. Handles both a bare block and a
   shell-wrapped one. Home/about keep their normal top breathing room. */
body[data-product] .site-main > .block:first-child,
body[data-product] .site-main > .block-shell:first-child > .block { padding-top: 0; }
body[data-product] .site-main > .block-shell:first-child { margin-top: 0; }

/* FontFlip canvas — dark poster, white type, hard cuts */
/* Bespoke canvas slabs paint their own colors. Block-level Appearance
   overrides (--ovr-*, emitted only when explicitly set) win when present;
   otherwise fall back to the product canvas theme. */
.canvas-slab {
  position: relative;
  aspect-ratio: 16 / 9;
  /* Layered: color base → optional bg image → color-tint overlay. The tint
     is the slab color at --canvas-tint opacity, mixing the image with the
     canvas color (Klim-style). No image set → tint paints same-color-over-
     same-color = invisible, so the slab looks unchanged. */
  background-color: var(--ovr-bg, var(--product-canvas-bg));
  background-image:
    linear-gradient(color-mix(in srgb, var(--ovr-bg, var(--product-canvas-bg)) var(--canvas-tint, 100%), transparent),
                    color-mix(in srgb, var(--ovr-bg, var(--product-canvas-bg)) var(--canvas-tint, 100%), transparent)),
    var(--canvas-bg-image, none);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: var(--ovr-text, var(--product-canvas-fg));
  padding: clamp(24px, 4vw, 56px);
  display: flex; flex-direction: column; justify-content: space-between;
  font-family: var(--ms-font-display);
  overflow: hidden;
}
.canvas-slab::after {
  /* subtle film grain so the slab doesn't feel like flat web color */
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.015) 1px, transparent 1px);
  background-size: 3px 3px;
  pointer-events: none;
}
.canvas-slab__topbar {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 10px; letter-spacing: 0.3em;
  position: relative; z-index: 2;
}
.canvas-slab__brand {
  display: inline-flex; align-items: center; gap: 16px;
}
.canvas-slab__icon {
  display: inline-block;
  width: clamp(56px, 7vw, 88px);
  height: clamp(56px, 7vw, 88px);
  /* full opacity — small text gets the mute treatment, the mark stays bright */
}
.canvas-slab__icon img,
.canvas-slab__icon picture { display: block; width: 100%; height: 100%; }
.canvas-slab__wordmark { font-weight: 700; opacity: 0.6; }
.canvas-slab__tag { font-family: var(--ms-font-mono); letter-spacing: 0.1em; opacity: 0.5; }
.canvas-slab__passage {
  font-size: clamp(28px, 5.5vw, 72px);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1.0;
  max-width: 22ch;
  color: var(--ovr-headline, inherit);
  position: relative; z-index: 2;
  /* hard cuts — no fade, no slide. Matches the in-app BrandCanvas. */
}
.canvas-slab__counter {
  font-family: var(--ms-font-mono);
  font-size: 10px; letter-spacing: 0.1em;
  opacity: 0.4;
  position: relative; z-index: 2;
  display: flex; justify-content: space-between;
}

/* GridLove canvas */
.canvas-grid {
  position: relative;
  aspect-ratio: 16 / 9;
  /* Layered: color base → optional bg image → color-tint overlay. The tint
     is the slab color at --canvas-tint opacity, mixing the image with the
     canvas color (Klim-style). No image set → tint paints same-color-over-
     same-color = invisible, so the slab looks unchanged. */
  background-color: var(--ovr-bg, var(--product-canvas-bg));
  background-image:
    linear-gradient(color-mix(in srgb, var(--ovr-bg, var(--product-canvas-bg)) var(--canvas-tint, 100%), transparent),
                    color-mix(in srgb, var(--ovr-bg, var(--product-canvas-bg)) var(--canvas-tint, 100%), transparent)),
    var(--canvas-bg-image, none);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: var(--ovr-text, var(--product-canvas-fg));
  padding: clamp(24px, 4vw, 56px);
  display: flex; flex-direction: column;
  overflow: hidden;
  font-family: var(--ms-font-display);
}
.canvas-grid__topbar {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 10px; letter-spacing: 0.3em;
  position: relative; z-index: 2;
}
.canvas-grid__brand {
  display: inline-flex; align-items: center; gap: 16px;
}
.canvas-grid__icon {
  display: inline-block;
  width: clamp(56px, 7vw, 88px);
  height: clamp(56px, 7vw, 88px);
}
.canvas-grid__icon img,
.canvas-grid__icon picture { display: block; width: 100%; height: 100%; }
.canvas-grid__wordmark { font-weight: 700; opacity: 0.6; }
.canvas-grid__tag { font-family: var(--ms-font-mono); letter-spacing: 0.1em; opacity: 0.5; }
.canvas-grid__demo {
  flex: 1;
  margin-top: calc(var(--ms-space) * 3);
  margin-bottom: calc(var(--ms-space) * 3);
  display: grid;
  grid-template-columns: repeat(var(--gridlove-cols, 12), 1fr);
  grid-auto-rows: 1fr;
  gap: 2px;
  position: relative;
}
.canvas-grid__col {
  background: var(--product-secondary);
  opacity: 0.08;
  grid-row: 1 / -1;
}
.canvas-grid__cell {
  background: var(--product-secondary);
  opacity: 1;
  z-index: 1;
}
/* The one "snapped" cell uses the primary accent — the product idea visualized. */
.canvas-grid__cell--snapped { background: var(--ovr-headline, var(--product-primary)); }
.canvas-grid__counter {
  display: flex; justify-content: space-between;
  font-family: var(--ms-font-mono);
  font-size: 10px; letter-spacing: 0.1em;
  opacity: 0.5;
  position: relative; z-index: 2;
}
.canvas-grid__hint { letter-spacing: 0.2em; }

/* ReKey canvas */
.canvas-keys {
  position: relative;
  aspect-ratio: 16 / 9;
  /* Layered: color base → optional bg image → color-tint overlay. The tint
     is the slab color at --canvas-tint opacity, mixing the image with the
     canvas color (Klim-style). No image set → tint paints same-color-over-
     same-color = invisible, so the slab looks unchanged. */
  background-color: var(--ovr-bg, var(--product-canvas-bg));
  background-image:
    linear-gradient(color-mix(in srgb, var(--ovr-bg, var(--product-canvas-bg)) var(--canvas-tint, 100%), transparent),
                    color-mix(in srgb, var(--ovr-bg, var(--product-canvas-bg)) var(--canvas-tint, 100%), transparent)),
    var(--canvas-bg-image, none);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: var(--ovr-text, var(--product-canvas-fg));
  padding: clamp(24px, 4vw, 56px);
  display: flex; flex-direction: column;
  overflow: hidden;
  font-family: var(--ms-font-display);
}
.canvas-keys__topbar {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 10px; letter-spacing: 0.3em;
  position: relative; z-index: 2;
}
.canvas-keys__brand {
  display: inline-flex; align-items: center; gap: 16px;
}
.canvas-keys__icon {
  display: inline-block;
  width: clamp(56px, 7vw, 88px);
  height: clamp(56px, 7vw, 88px);
}
.canvas-keys__icon img,
.canvas-keys__icon picture { display: block; width: 100%; height: 100%; }
.canvas-keys__wordmark { font-weight: 700; opacity: 0.6; }
.canvas-keys__tag { font-family: var(--ms-font-mono); letter-spacing: 0.1em; opacity: 0.5; }
.canvas-keys__board {
  flex: 1;
  display: flex; flex-direction: column;
  justify-content: center;
  gap: 8px;
  margin: calc(var(--ms-space) * 3) 0;
  position: relative; z-index: 2;
}
.canvas-keys__remap {
  display: flex; align-items: center;
  gap: 12px;
  margin-bottom: clamp(16px, 2.5vw, 32px);
  font-family: var(--ms-font-mono);
  font-size: 11px;
  letter-spacing: 0.15em;
  opacity: 0.85;
}
.canvas-keys__row { display: flex; gap: 6px; justify-content: flex-start; }
.canvas-keys__row--mid { padding-left: clamp(8px, 1.5vw, 16px); }
.canvas-keys__key {
  display: inline-grid; place-items: center;
  min-width: clamp(28px, 4vw, 44px);
  height: clamp(28px, 4vw, 44px);
  border: 1px solid rgba(255,255,255,0.18);
  font-family: var(--ms-font-mono);
  font-size: clamp(10px, 1.2vw, 13px);
  letter-spacing: 0.05em;
  color: rgba(250,250,250,0.7);
}
.canvas-keys__key--from {
  border-color: rgba(250,250,250,0.6);
  color: rgba(250,250,250,0.4);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  min-width: 56px;
}
.canvas-keys__key--to {
  background: var(--ovr-headline, var(--product-primary));
  border-color: var(--ovr-headline, var(--product-primary));
  color: var(--product-on-primary);
  min-width: 56px;
}
.canvas-keys__arrow { font-family: var(--ms-font-mono); opacity: 0.6; font-size: 14px; }
.canvas-keys__remap-label {
  font-family: var(--ms-font-mono);
  font-size: 9px; letter-spacing: 0.3em;
  opacity: 0.4;
  margin-left: 8px;
}
.canvas-keys__counter {
  display: flex; justify-content: space-between;
  font-family: var(--ms-font-mono);
  font-size: 10px; letter-spacing: 0.1em;
  opacity: 0.4;
  position: relative; z-index: 2;
}
.canvas-keys__hint { letter-spacing: 0.2em; }

/* ─── Prose ────────────────────────────────────────────────────────── */
.block--prose {
  max-width: var(--ms-max-prose);
  padding-top: calc(var(--ms-space) * 4);
  padding-bottom: calc(var(--ms-space) * 4);
  font-size: clamp(15px, 1.4vw, 17px);
  line-height: 1.6;
}
.block--prose h1 { font-family: var(--ms-font-display); font-size: var(--ms-display-sub); letter-spacing: -0.035em; margin: calc(var(--ms-space) * 6) 0 calc(var(--ms-space) * 2); line-height: 1; }
.block--prose h2 { font-family: var(--ms-font-display); font-size: clamp(24px, 3vw, 32px); letter-spacing: -0.02em; margin: calc(var(--ms-space) * 5) 0 calc(var(--ms-space) * 1.5); line-height: 1.1; }
.block--prose h3 { font-family: var(--ms-font-display); font-size: clamp(18px, 2vw, 22px); margin: calc(var(--ms-space) * 4) 0 calc(var(--ms-space) * 1); letter-spacing: -0.01em; }
.block--prose p  { margin: 0 0 calc(var(--ms-space) * 2); }
.block--prose ul, .block--prose ol { padding-left: 1.2em; margin: 0 0 calc(var(--ms-space) * 2); }
.block--prose li { margin-bottom: 4px; }
.block--prose strong { font-weight: 700; }
.block--prose a { color: var(--ms-fg); border-bottom: 1px solid var(--ms-fg); text-decoration: none; }
.block--prose a:hover { color: var(--ms-accent); border-bottom-color: var(--ms-accent); text-decoration: none; }

/* ─── Feature trio ─────────────────────────────────────────────────── */
.block--feature-trio { padding-top: calc(var(--ms-space) * 8); padding-bottom: calc(var(--ms-space) * 8); }
.feature-trio__grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: calc(var(--ms-space) * 6);
}
.feature-trio__item {
  border-top: 2px solid var(--ms-fg);
  padding-top: calc(var(--ms-space) * 3);
  text-decoration: none;
  color: inherit;
  display: block;
}
.feature-trio__item--link {
  transition: transform var(--ms-hover-ms) ease-out;
}
.feature-trio__item--link:hover { transform: translateY(-2px); text-decoration: none; }
.feature-trio__icon {
  width: clamp(96px, 11vw, 144px);
  height: clamp(96px, 11vw, 144px);
  margin-bottom: calc(var(--ms-space) * 4);
  display: block;
}
.feature-trio__icon img,
.feature-trio__icon picture { display: block; width: 100%; height: 100%; }
.feature-trio__icon-img {
  /* App icon PNGs are already squircle-shaped; no cropping needed. */
  border-radius: 0;
}
.feature-trio__title {
  font-family: var(--ms-font-display);
  font-size: clamp(20px, 2vw, 26px);
  font-weight: 500; letter-spacing: -0.02em;
  margin: 0 0 calc(var(--ms-space) * 1.5);
}
.feature-trio__body {
  color: var(--ms-mute);
  font-size: 14px; line-height: 1.55;
  margin: 0;
}

/* ─── Big quote ────────────────────────────────────────────────────── */
.block--big-quote {
  text-align: left;
  padding-top: calc(var(--ms-space) * 12);
  padding-bottom: calc(var(--ms-space) * 12);
}
.big-quote__text {
  font-family: var(--ms-font-display);
  font-size: var(--ms-display-quote);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.05;
  max-width: 20ch;
  margin: 0 0 calc(var(--ms-space) * 3);
  text-wrap: balance;
}
.big-quote__attribution {
  color: var(--ms-mute);
  font-family: var(--ms-font-mono);
  font-size: 12px;
  letter-spacing: 0.05em;
}

/* ─── Media ────────────────────────────────────────────────────────── */
.media__frame {
  aspect-ratio: var(--ratio, 16/9);
  background: var(--ms-border);
  display: grid; place-items: center;
  overflow: hidden;
}
.media__frame img { width: 100%; height: 100%; object-fit: var(--fit, cover); }
.media__caption {
  font-size: 12px; color: var(--ms-mute);
  font-family: var(--ms-font-mono); letter-spacing: 0.02em;
  margin-top: calc(var(--ms-space) * 1.5);
}

/* ─── Workflow ─────────────────────────────────────────────────────── */
.block--workflow {
  padding-top: calc(var(--ms-space) * 6);
  padding-bottom: calc(var(--ms-space) * 6);
}
.workflow__steps {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: calc(var(--ms-space) * 6);
}
.workflow__step {
  border-top: 2px solid var(--ms-fg);
  padding-top: calc(var(--ms-space) * 2);
}
.workflow__num {
  font-family: var(--ms-font-mono);
  font-size: 11px;
  color: var(--ms-accent);
  letter-spacing: 0.1em;
  margin-bottom: calc(var(--ms-space) * 1);
}
body[data-product] .workflow__num { color: var(--product-primary); }
.workflow__title {
  font-family: var(--ms-font-display);
  font-size: clamp(18px, 1.8vw, 22px);
  font-weight: 500; letter-spacing: -0.015em;
  margin: 0 0 calc(var(--ms-space) * 1);
}
.workflow__body { color: var(--ms-mute); line-height: 1.55; margin: 0; font-size: 14px; }

/* ─── Pricing ──────────────────────────────────────────────────────── */
.block--pricing {
  text-align: center;
  padding-top: calc(var(--ms-space) * 10);
  padding-bottom: calc(var(--ms-space) * 10);
  border-top: 1px solid var(--ms-border);
  border-bottom: 1px solid var(--ms-border);
  max-width: none;
}
.pricing__amount {
  font-family: var(--ms-font-display);
  font-size: clamp(48px, 7vw, 96px);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1;
  margin-bottom: calc(var(--ms-space) * 4);
}
.pricing__currency {
  font-size: 0.3em;
  color: var(--ms-mute);
  margin-left: 6px;
  font-family: var(--ms-font-mono);
  letter-spacing: 0.05em;
  vertical-align: 0.6em;
}
.pricing__form { margin: 0; }
.pricing__button {
  background: var(--ms-fg); color: var(--ms-bg);
  border: none;
  font-family: var(--ms-font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 14px 32px;
  cursor: pointer;
  transition: transform var(--ms-hover-ms) ease-out, filter var(--ms-hover-ms) ease-out;
}
.pricing__button:hover { transform: translateY(-1px); filter: brightness(1.08); }
body[data-product] .pricing__button {
  background: var(--product-primary);
  color: var(--product-on-primary);
}
.pricing__subtitle {
  color: var(--ms-mute);
  font-size: 12px;
  font-family: var(--ms-font-mono);
  letter-spacing: 0.05em;
  margin-top: calc(var(--ms-space) * 2);
}
.pricing__download {
  margin-top: calc(var(--ms-space) * 3);
  font-size: 13px;
}
.pricing__download a {
  color: var(--ms-mute);
  border-bottom: 1px solid var(--ms-border);
  padding-bottom: 1px;
  transition: color var(--ms-hover-ms) ease-out, border-color var(--ms-hover-ms) ease-out;
}
.pricing__download a:hover {
  color: var(--ms-fg);
  border-bottom-color: var(--ms-fg);
  text-decoration: none;
}
body[data-product] .pricing__download a:hover {
  color: var(--product-primary);
  border-bottom-color: var(--product-primary);
}

/* ─── Buy CTA (shared: pricing block + canvases) ───────────────────── */
.block--pricing { text-align: center; }
.buy { text-align: center; }
.buy__amount {
  font-family: var(--ms-font-display);
  font-size: clamp(40px, 6vw, 88px); font-weight: 500;
  letter-spacing: -0.04em; line-height: 1; margin-bottom: calc(var(--ms-space) * 3);
}
.buy__currency { font-size: 0.3em; color: var(--ms-mute); margin-left: 6px; font-family: var(--ms-font-mono); letter-spacing: 0.05em; vertical-align: 0.6em; }
.buy__form { margin: 0; }
.buy__button {
  background: var(--ms-fg); color: var(--ms-bg);
  border: none; font-family: var(--ms-font-display);
  font-size: 13px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase;
  padding: 14px 32px; cursor: pointer;
  transition: transform var(--ms-hover-ms) ease-out, filter var(--ms-hover-ms) ease-out;
}
.buy__button:hover { transform: translateY(-1px); filter: brightness(1.08); }
/* Product pages default the button to the product accent (inline bg/fg from
   the block's button color override still wins via the style attribute). */
body[data-product] .buy__button { background: var(--product-primary); color: var(--product-on-primary); }
.buy__subtitle { color: var(--ms-mute); font-size: 12px; font-family: var(--ms-font-mono); letter-spacing: 0.05em; margin-top: calc(var(--ms-space) * 2); }
.buy__status { font-family: var(--ms-font-mono); font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ms-mute); padding: 12px 0; }
.buy__download { margin-top: calc(var(--ms-space) * 3); font-size: 13px; }
.buy__download a { color: var(--ms-mute); border-bottom: 1px solid var(--ms-border); padding-bottom: 1px; }
.buy__download a:hover { color: var(--ms-fg); border-bottom-color: var(--ms-fg); text-decoration: none; }
body[data-product] .buy__download a:hover { color: var(--product-primary); border-bottom-color: var(--product-primary); }

/* Canvas buy: sits under the slab, centered. */
.canvas-buy { padding: calc(var(--ms-space) * 4) var(--ms-gutter) calc(var(--ms-space) * 2); text-align: center; }
.canvas-buy .buy__amount { font-size: clamp(32px, 4vw, 56px); }

/* ─── System reqs ──────────────────────────────────────────────────── */
.block--system-reqs {
  padding-top: calc(var(--ms-space) * 5);
  padding-bottom: calc(var(--ms-space) * 5);
}
.system-reqs__list {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 8px 32px;
  margin: 0; max-width: 480px;
}
.system-reqs__list dt {
  color: var(--ms-mute);
  font-size: 10px;
  letter-spacing: 0.22em; text-transform: uppercase;
  align-self: center;
}
.system-reqs__list dd {
  margin: 0;
  font-family: var(--ms-font-mono);
  font-size: 13px;
}
.system-reqs__iconrow {
  display: flex; flex-wrap: wrap;
  gap: calc(var(--ms-space) * 6);
}
.system-reqs__icon-item { display: flex; flex-direction: column; gap: 4px; }
.system-reqs__icon-item .system-reqs__label {
  font-size: 10px;
  color: var(--ms-mute);
  letter-spacing: 0.22em; text-transform: uppercase;
}
.system-reqs__icon-item .system-reqs__value {
  font-family: var(--ms-font-mono);
  font-size: 13px;
}

/* ─── Changelog peek ───────────────────────────────────────────────── */
.changelog-peek__heading {
  font-family: var(--ms-font-display);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ms-mute);
  margin-bottom: calc(var(--ms-space) * 2);
}
.changelog-peek__list { list-style: none; padding: 0; margin: 0; }
.changelog-peek__item {
  padding: calc(var(--ms-space) * 1.5) 0;
  border-bottom: 1px solid var(--ms-border);
  display: grid; grid-template-columns: max-content 1fr;
  gap: 8px 24px;
}
.changelog-peek__item:last-child { border-bottom: none; }
.changelog-peek__version {
  font-family: var(--ms-font-mono);
  font-size: 13px;
}
.changelog-peek__date {
  color: var(--ms-mute);
  font-family: var(--ms-font-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
}
.changelog-peek__notes {
  grid-column: 1 / -1;
  color: var(--ms-mute);
  font-size: 13px;
  line-height: 1.5;
  margin-top: 4px;
}
.changelog-peek__empty { color: var(--ms-mute); font-size: 13px; font-family: var(--ms-font-mono); }

/* ─── Credits ──────────────────────────────────────────────────────── */
.credits__list {
  display: grid; grid-template-columns: max-content 1fr;
  gap: 6px 24px; margin: 0;
}
.credits__role {
  font-size: 10px; color: var(--ms-mute);
  letter-spacing: 0.22em; text-transform: uppercase;
  align-self: center;
}
.credits__name { margin: 0; font-size: 13px; }

/* ─── Link list ────────────────────────────────────────────────────── */
.link-list__heading {
  font-family: var(--ms-font-display);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ms-mute);
  margin-bottom: calc(var(--ms-space) * 1.5);
}
.link-list__items {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column;
  gap: 4px;
  font-size: 14px;
}
.link-list__items a { color: var(--ms-fg); }
.link-list__items a:hover {
  color: var(--ms-accent);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
body[data-product] .link-list__items a:hover { color: var(--product-primary); }
body[data-product] .block--prose a:hover { color: var(--product-primary); border-bottom-color: var(--product-primary); }

/* ─── Thanks page ──────────────────────────────────────────────────── */
.block--thanks { padding-top: clamp(60px, 10vw, 140px); padding-bottom: clamp(60px, 10vw, 140px); }
.thanks { max-width: 560px; }
.thanks__eyebrow {
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--ms-mute); margin-bottom: calc(var(--ms-space) * 3);
}
.thanks__headline {
  font-family: var(--ms-font-display);
  font-size: var(--ms-display-sub);
  font-weight: 500; letter-spacing: -0.035em;
  line-height: 1.0;
  margin: 0 0 calc(var(--ms-space) * 5);
}
.thanks__details {
  border-top: 1px solid var(--ms-border);
  margin-bottom: calc(var(--ms-space) * 4);
}
.thanks__row {
  display: grid; grid-template-columns: 140px 1fr;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--ms-border);
  font-size: 13px;
}
.thanks__label {
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ms-mute);
  align-self: center;
}
.thanks__value.mono { font-family: var(--ms-font-mono); }
.thanks__copy { font-size: 15px; line-height: 1.55; color: var(--ms-mute); margin-bottom: calc(var(--ms-space) * 3); }
.thanks__copy a { color: var(--ms-fg); border-bottom: 1px solid var(--ms-fg); }
.thanks__cta {
  display: inline-block;
  font-family: var(--ms-font-display);
  font-size: 13px; font-weight: 700;
  letter-spacing: 0.15em; text-transform: uppercase;
  padding: 14px 28px;
  background: var(--ms-fg); color: var(--ms-bg);
  text-decoration: none;
}
.thanks__cta:hover { text-decoration: none; filter: brightness(1.1); }

/* ─── Pricing status (coming soon / sunset) ────────────────────────── */
.pricing__status {
  font-family: var(--ms-font-mono);
  font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ms-mute);
  padding: 12px 0;
}

/* ─── /latest release history ──────────────────────────────────────── */
.block--latest { padding-top: clamp(60px, 9vw, 120px); padding-bottom: clamp(60px, 9vw, 120px); }
.latest { max-width: 680px; }
.latest__eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--ms-mute); margin-bottom: calc(var(--ms-space) * 2);
}
.latest__headline {
  font-family: var(--ms-font-display); font-size: var(--ms-display-sub);
  font-weight: 500; letter-spacing: -0.035em; line-height: 1; margin: 0 0 calc(var(--ms-space) * 5);
}
.latest__current {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: calc(var(--ms-space) * 3); margin-bottom: calc(var(--ms-space) * 6);
  background: var(--product-canvas-bg, #0a0a0a); color: var(--product-canvas-fg, #fafafa);
}
.latest__current-version { font-size: 22px; font-weight: 700; }
.latest__current-date { font-size: 11px; opacity: 0.6; margin-top: 2px; }
.latest__download {
  background: var(--product-primary, var(--ms-accent)); color: var(--product-on-primary, #fff);
  font-family: var(--ms-font-display); font-size: 12px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; padding: 12px 22px; white-space: nowrap;
}
.latest__download:hover { text-decoration: none; filter: brightness(1.08); }
.latest__list { list-style: none; padding: 0; margin: 0; }
.latest__rel { padding: calc(var(--ms-space) * 3) 0; border-bottom: 1px solid var(--ms-border); }
.latest__rel-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 8px; }
.latest__rel-version { font-size: 15px; font-weight: 700; }
.latest__rel-date { font-size: 11px; color: var(--ms-mute); }
.latest__rel-os { font-size: 10px; color: var(--ms-mute); letter-spacing: 0.05em; }
.latest__rel-notes { color: var(--ms-mute); font-size: 14px; line-height: 1.6; }
.latest__rel-notes ul { padding-left: 1.2em; margin: 0; }
.latest__empty { color: var(--ms-mute); }
.latest__back { margin-top: calc(var(--ms-space) * 5); font-size: 13px; }
.latest__back a { color: var(--ms-fg); border-bottom: 1px solid var(--ms-border); }

/* ─── Product grid (storefront) ─────────────────────────────────────── */
.block--product-grid { padding-top: calc(var(--ms-space) * 6); padding-bottom: calc(var(--ms-space) * 6); }
.product-grid__heading {
  font-family: var(--ms-font-display); font-size: var(--ms-fs-xl);
  font-weight: 500; letter-spacing: -0.02em; margin: 0 0 calc(var(--ms-space) * 4);
}
.product-grid__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--ms-space) * 3); }
.product-grid__card {
  display: block; padding: calc(var(--ms-space) * 3);
  border: 1px solid var(--ms-border); color: inherit;
  transition: transform var(--ms-hover-ms) ease-out, border-color var(--ms-hover-ms) ease-out;
}
.product-grid__card:hover { transform: translateY(-2px); border-color: var(--ms-fg); text-decoration: none; }
.product-grid__icon { width: clamp(64px, 8vw, 96px); height: clamp(64px, 8vw, 96px); margin-bottom: calc(var(--ms-space) * 2); }
.product-grid__icon img, .product-grid__icon picture { display: block; width: 100%; height: 100%; }
.product-grid__name { font-family: var(--ms-font-display); font-size: var(--ms-fs-md); font-weight: 500; margin-bottom: 4px; }
.product-grid__tagline { color: var(--ms-mute); font-size: 13px; line-height: 1.5; margin-bottom: calc(var(--ms-space) * 1.5); }
.product-grid__price { font-size: 13px; color: var(--ms-fg); }
.product-grid__empty { color: var(--ms-mute); }
@media (max-width: 720px) { .product-grid__grid { grid-template-columns: 1fr; } }

/* ─── Recover page ─────────────────────────────────────────────────── */
.block--recover { padding-top: clamp(60px, 10vw, 140px); padding-bottom: clamp(60px, 10vw, 140px); }
.recover { max-width: 520px; }
.recover__eyebrow {
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--ms-mute); margin-bottom: calc(var(--ms-space) * 3);
}
.recover__headline {
  font-family: var(--ms-font-display);
  font-size: var(--ms-display-sub);
  font-weight: 500; letter-spacing: -0.035em;
  line-height: 1.0;
  margin: 0 0 calc(var(--ms-space) * 3);
}
.recover__copy { font-size: 15px; color: var(--ms-mute); margin-bottom: calc(var(--ms-space) * 4); line-height: 1.55; }
.recover__message {
  padding: 12px 16px; margin-bottom: calc(var(--ms-space) * 3);
  font-size: 13px; line-height: 1.5;
}
.recover__message--ok  { background: #eef7f0; border-left: 3px solid #16a34a; color: #14532d; }
.recover__message--err { background: #fdeaea; border-left: 3px solid #b91c1c; color: #7f1d1d; }
.recover__form {
  display: flex; gap: 8px; margin-bottom: calc(var(--ms-space) * 4);
}
.recover__form input {
  flex: 1;
  padding: 12px 14px;
  border: 1px solid var(--ms-border);
  font-family: inherit; font-size: 14px;
  background: var(--ms-bg); color: var(--ms-fg);
}
.recover__form input:focus { outline: none; border-color: var(--ms-fg); }
.recover__form button {
  background: var(--ms-fg); color: var(--ms-bg);
  border: none;
  font-family: var(--ms-font-display);
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.15em; text-transform: uppercase;
  padding: 0 24px;
  cursor: pointer;
  white-space: nowrap;
}
.recover__form button:hover { filter: brightness(1.08); }
.recover__support { font-size: 12px; color: var(--ms-mute); }
.recover__support a { color: var(--ms-fg); border-bottom: 1px solid var(--ms-fg); }

/* ─── Spacer ───────────────────────────────────────────────────────── */
.block--spacer { padding: 0; }
.block--spacer-sm { height: calc(var(--ms-space) * 3); }
.block--spacer-md { height: calc(var(--ms-space) * 6); }
.block--spacer-lg { height: calc(var(--ms-space) * 12); }
.block--spacer-xl { height: calc(var(--ms-space) * 20); }

/* ─── Reduced motion ───────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ─── Mobile nav: hamburger + full overlay ─────────────────────────── */
.nav-toggle {
  display: none;            /* shown only on mobile via the breakpoint below */
  flex-direction: column; justify-content: center; gap: 5px;
  width: 40px; height: 40px; padding: 0;
  background: none; border: none; cursor: pointer;
}
.nav-toggle__bar {
  display: block; width: 22px; height: 2px;
  background: var(--ms-fg); margin: 0 auto;
  transition: transform var(--ms-transition-ms) ease, opacity var(--ms-transition-ms) ease;
}

.nav-overlay {
  position: fixed; inset: 0; z-index: 100;
  background: var(--ms-bg);
  display: flex; flex-direction: column; align-items: flex-start;
  justify-content: center;
  padding: var(--ms-gutter);
  opacity: 0; transition: opacity var(--ms-transition-ms) ease-out;
}
.nav-overlay.is-open { opacity: 1; }
.nav-overlay[hidden] { display: none; }
.nav-overlay__close {
  position: absolute; top: 20px; right: var(--ms-gutter);
  background: none; border: none; cursor: pointer;
  font-size: 34px; line-height: 1; color: var(--ms-fg);
}
.nav-overlay__nav { display: flex; flex-direction: column; gap: calc(var(--ms-space) * 3); }
.nav-overlay__nav a {
  font-family: var(--ms-font-display);
  font-size: clamp(28px, 9vw, 48px);
  font-weight: 500; letter-spacing: -0.03em;
  color: var(--ms-fg);
}
.nav-overlay__nav a:hover { color: var(--ms-accent); text-decoration: none; }

/* ─── Responsive ───────────────────────────────────────────────────── */
@media (max-width: 880px) {
  .site-footer { grid-template-columns: 1fr 1fr; }
  .block--hero-split { grid-template-columns: 1fr; gap: calc(var(--ms-space) * 4); }
  .feature-trio__grid, .workflow__steps { grid-template-columns: 1fr; gap: calc(var(--ms-space) * 4); }
}

/* Nav collapses to hamburger at ≤720px. */
@media (max-width: 720px) {
  .site-nav { display: none; }
  .nav-toggle { display: flex; }
}

@media (max-width: 560px) {
  .site-footer { grid-template-columns: 1fr; gap: calc(var(--ms-space) * 4); }
  .hero-typo__headline { font-size: clamp(40px, 12vw, 72px); }

  /* Canvases: 16:9 is too short on a phone — go portrait-ish for breathing room. */
  .canvas-slab, .canvas-grid, .canvas-keys { aspect-ratio: 4 / 5; }
  .canvas-slab__topbar, .canvas-grid__topbar, .canvas-keys__topbar { font-size: 9px; letter-spacing: 0.2em; }
  .canvas-slab__icon, .canvas-grid__icon, .canvas-keys__icon { width: 44px; height: 44px; }
  .canvas-slab__tag, .canvas-grid__tag, .canvas-keys__tag { display: none; }  /* drop the right-side tag, too crowded */
  .canvas-keys__key { min-width: 22px; height: 22px; font-size: 9px; }
  .canvas-keys__board { gap: 5px; }

  /* /latest current-version row: stack the version + download. */
  .latest__current { flex-direction: column; align-items: flex-start; gap: calc(var(--ms-space) * 2); }
  .latest__download { width: 100%; text-align: center; }

  /* Feature/workflow item top-rules read better with a touch less top pad. */
  .feature-trio__item, .workflow__step { padding-top: calc(var(--ms-space) * 2); }
}

/* Very narrow phones: shrink the gutter so content isn't pinched. */
@media (max-width: 380px) {
  :root { --ms-gutter: 18px; }
  .canvas-keys__row { flex-wrap: wrap; }
}