/* === THEME TOKENS:BEGIN === */
/* Acsaven brand — generated from theme/tokens.json */
:root,
html[data-theme='dark'] {
  color-scheme: dark;
  --bg: #101216;
  --panel: #171a20;
  --surface: #22262e;
  --rim: #343a45;
  --ink: #f1f5f9;
  --muted: #a8b0bc;
  --faint: #7b8494;
  --brand: #94a3b8;
  --brand-dim: #64748b;
  --accent: #cbd5e1;
  --love: #a8a29e;
  --on-brand: #0f1419;
  --shadow: 0 22px 56px rgb(0 0 0 / 0.45);
  --backdrop: rgb(12 14 18 / 0.72);
  --glow: color-mix(in srgb, var(--brand) 16%, transparent);
  --glow-warm: color-mix(in srgb, var(--love) 10%, transparent);
  --radius: 0.85rem;
  --radius-lg: 1.25rem;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

html[data-theme='light'] {
  color-scheme: light;
  --bg: #f3f4f6;
  --panel: #fafafa;
  --surface: #e8eaee;
  --rim: #cfd4dc;
  --ink: #12151a;
  --muted: #4b5563;
  --faint: #6b7280;
  --brand: #475569;
  --brand-dim: #334155;
  --accent: #334155;
  --love: #78716c;
  --on-brand: #f8fafc;
  --shadow: 0 18px 48px rgb(18 21 26 / 0.1);
  --backdrop: rgb(18 21 26 / 0.4);
  --glow: color-mix(in srgb, var(--brand) 11%, transparent);
  --glow-warm: color-mix(in srgb, var(--love) 9%, transparent);
  --radius: 0.85rem;
  --radius-lg: 1.25rem;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}
/* === THEME TOKENS:END === */

* {
  box-sizing: border-box;
}

/*
 * Same stage as TryTokka dashboard / marketing `.content-app`:
 * max-w-6xl (72rem), xl:max-w-7xl (80rem), px-4 / sm:px-6 / lg:px-8.
 * Header, wrap, footer, home `.stage`, and inner-page flagship marks share it
 * so the hub is one column — not a 42rem essay in a cinema shell.
 */
:root {
  --content-app: 72rem;
  --content-pad: 1rem;
}

@media (min-width: 40rem) {
  :root {
    --content-pad: 1.5rem;
  }
}

@media (min-width: 64rem) {
  :root {
    --content-pad: 2rem;
  }
}

@media (min-width: 80rem) {
  :root {
    --content-app: 80rem;
  }
}

/* Same-origin Inter for brand titles only — no CDN. Body stays system stack.
   size-adjust / ascent-override approximate system-ui metrics to cut swap CLS. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  /* optional: late Inter must not swap brand title and shift the sticky header (CLS). */
  font-display: optional;
  src: url('./brand/fonts/Inter-Bold.woff2') format('woff2');
  size-adjust: 107%;
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: optional;
  src: url('./brand/fonts/Inter-ExtraBold.woff2') format('woff2');
  size-adjust: 107%;
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
}

html,
body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
  line-height: 1.6;
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

body:not(.page-home) {
  background:
    radial-gradient(ellipse 80% 40% at 50% -10%, var(--glow), transparent 55%),
    var(--bg);
}

a {
  color: var(--accent);
  text-decoration: none;
  transition: color 0.15s ease;
}

a:hover {
  color: var(--brand);
}

/*
 * WCAG 1.4.1 (Use of Color): a link sitting inside a block of text cannot be
 * distinguished by colour alone. The global rule above strips underlines, which
 * is right for buttons, cards, nav and footer lists — those carry their own
 * affordances and all have classes. Bare inline links in prose do not, so give
 * them an underline back. Scoped to <p> so card/grid anchors are untouched.
 */
main p a:not([class]) {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

/*
 * WCAG 1.4.10 (Reflow): the embed snippets on /developers/ are ~110-character
 * unbreakable tokens, which pushed the document to 372-404px and forced sideways
 * scroll at 320/375px. There are no <pre> blocks on this site, so every <code> is
 * inline prose and safe to break.
 */
code {
  overflow-wrap: anywhere;
}

.wrap {
  width: 100%;
  max-width: var(--content-app);
  margin-inline: auto;
  padding: 0 var(--content-pad) 3.5rem;
  flex: 1 0 auto;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 80;
  margin: 0;
  padding: 0;
  /* Fixed block size reserves sticky header space — cuts CLS when fonts/icons settle. */
  min-height: 3.85rem;
  border-bottom: 1px solid color-mix(in srgb, var(--rim) 55%, transparent);
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  backdrop-filter: saturate(1.4) blur(18px);
  -webkit-backdrop-filter: saturate(1.4) blur(18px);
  overflow: visible;
}

.site-header-inner {
  width: 100%;
  max-width: var(--content-app);
  margin-inline: auto;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.55rem var(--content-pad);
  min-height: 3.85rem;
  height: 3.85rem;
  box-sizing: border-box;
}

.header-end {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.65rem 0.85rem;
  min-width: 0;
  flex: 1 1 auto;
  justify-content: flex-end;
  overflow: visible;
}

.site-header-actions {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 0.5rem;
}

.brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--ink);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: -0.06em;
  flex-shrink: 0;
}

.brand-lockup:hover {
  color: var(--brand);
}

.mark {
  width: 2rem;
  height: 2rem;
  border-radius: 0.55rem;
  background: linear-gradient(145deg, var(--brand-dim), var(--brand));
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 0.95rem;
  letter-spacing: -0.04em;
  color: var(--on-brand);
  flex-shrink: 0;
}

.brand-logo-mark {
  width: 2rem;
  height: auto;
  aspect-ratio: 232.7 / 209.2;
  border-radius: 0;
  flex-shrink: 0;
  display: block;
  object-fit: contain;
  background: transparent;
  overflow: visible;
  color: var(--ink);
}

.brand-logo-mark--hero {
  width: 3rem;
  height: 3rem;
  border-radius: 0.75rem;
}

.brand-hero-lockup {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.brand-hero-lockup h1 {
  margin: 0;
  font-size: clamp(2.25rem, 6vw, 3rem);
  line-height: 1;
  letter-spacing: -0.04em;
  font-weight: 700;
}

.brand-logo-hero {
  width: min(17.5rem, 100%);
  height: auto;
  display: block;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.noscript-notice {
  position: sticky;
  top: 0;
  z-index: 10000;
  margin: 0;
  padding: 0.75rem 1rem;
  background: color-mix(in srgb, var(--bg) 88%, var(--brand));
  border-bottom: 1px solid color-mix(in srgb, var(--brand) 28%, var(--rim));
}

.noscript-notice__panel {
  position: relative;
  max-width: 40rem;
  margin: 0 auto;
  padding: 1rem 1.2rem 1.05rem 1.3rem;
  overflow: hidden;
  background: var(--panel);
  border: 1px solid color-mix(in srgb, var(--brand) 24%, var(--rim));
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  text-align: left;
}

.noscript-notice__accent {
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: linear-gradient(180deg, var(--brand), color-mix(in srgb, var(--brand) 40%, var(--panel)));
}

.noscript-notice__title {
  margin: 0 0 0.35rem;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.noscript-notice__body {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--muted);
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: 1rem;
  z-index: 100;
  padding: 0.65rem 1rem;
  border-radius: 0.5rem;
  background: var(--panel);
  color: var(--ink);
  border: 2px solid var(--brand);
  font-weight: 600;
  text-decoration: none;
  box-shadow: var(--shadow);
}

.skip-link:not(:focus):not(:focus-visible) {
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.site-nav {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.15rem 0.85rem;
  font-size: 0.78rem;
  font-weight: 550;
  letter-spacing: -0.01em;
  max-width: 100%;
  /* Must stay visible so the Products dropdown panel is not clipped */
  overflow: visible;
  padding-inline-end: 0.15rem;
}

.site-nav::-webkit-scrollbar {
  display: none;
}

.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0.45rem 0.55rem;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  color: var(--ink);
  opacity: 0.82;
  transition:
    color 0.18s var(--ease),
    opacity 0.18s var(--ease),
    border-color 0.18s var(--ease);
}

/* Products disclosure ? fewer top-level choices (Hick?s / Miller?s) */
.nav-products {
  position: relative;
  z-index: 50;
  flex-shrink: 0;
}

.nav-products-summary {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0.45rem 0.55rem;
  list-style: none;
  cursor: pointer;
  color: var(--ink);
  opacity: 0.82;
  font: inherit;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  border-bottom: 2px solid transparent;
  user-select: none;
}

.nav-products-summary::-webkit-details-marker {
  display: none;
}

.nav-products-summary:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

.nav-products-summary::after {
  content: '';
  width: 0.35rem;
  height: 0.35rem;
  margin-left: 0.4rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-0.1rem);
  opacity: 0.7;
  transition: transform 0.18s var(--ease);
}

.nav-products[open] > .nav-products-summary {
  color: var(--brand);
  opacity: 1;
}

.nav-products:has([aria-current='page']) > .nav-products-summary {
  color: var(--brand);
  opacity: 1;
  border-bottom-color: var(--brand);
  font-weight: 650;
}

.nav-products[open] > .nav-products-summary::after {
  transform: rotate(225deg) translateY(-0.05rem);
}

.nav-products-panel {
  position: absolute;
  top: calc(100% + 0.35rem);
  left: 0;
  z-index: 60;
  display: grid;
  gap: 0.15rem;
  min-width: 16.5rem;
  padding: 0.45rem;
  border-radius: 0.75rem;
  border: 1px solid var(--rim);
  background: var(--panel);
  box-shadow: var(--shadow);
}

.nav-products-link {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.1rem;
  min-height: 2.75rem;
  padding: 0.45rem 0.65rem;
  border-radius: 0.5rem;
  border-bottom: 0;
  text-decoration: none;
  color: inherit;
}

.nav-products-link-title {
  font-weight: 600;
  line-height: 1.25;
}

.nav-products-link-desc {
  font-size: 0.72rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--muted);
}

/* The learn links now carry a title + description like the open links, so they inherit
   the base column layout instead of the old single-line flex. Only the weight differs,
   to keep "open the app" the primary action of the two groups. */
.nav-products-link--learn .nav-products-link-title {
  font-weight: 500;
}

.nav-products-link--learn:hover {
  color: var(--ink);
}

.nav-products-panel a {
  min-height: 2.5rem;
  padding: 0.45rem 0.65rem;
  border-radius: 0.5rem;
  border-bottom: 0;
}

.nav-products-panel a:not([aria-current='page']):hover,
.nav-products-link:not([aria-current='page']):hover {
  background: color-mix(in srgb, var(--brand) 6%, var(--panel));
}

.nav-products-panel a[aria-current='page'],
.nav-products-link[aria-current='page'] {
  background: color-mix(in srgb, var(--brand) 14%, var(--panel));
  border: 1px solid color-mix(in srgb, var(--brand) 35%, var(--rim));
  color: var(--ink);
  font-weight: 650;
}

/* Hamburger drawer (mirrors Try utility MobileNav) */
.site-nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  min-width: 2.75rem;
  min-height: 2.75rem;
  border-radius: 0.65rem;
  border: 1px solid var(--rim);
  background: var(--panel);
  color: var(--ink);
  cursor: pointer;
  flex-shrink: 0;
  transition:
    border-color 0.15s var(--ease),
    background-color 0.15s var(--ease),
    color 0.15s var(--ease);
}

.site-nav-toggle:hover {
  border-color: var(--brand);
  color: var(--brand);
}

.site-nav-toggle:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

@media (min-width: 1024px) {
  .site-nav-toggle {
    display: none;
  }
}

@media (max-width: 1023px) {
  .site-nav {
    display: none;
  }

  .site-header-inner {
    flex-wrap: nowrap;
  }

  .header-end {
    flex: 0 0 auto;
    min-width: 0;
    justify-content: flex-end;
  }

  /* Keep theme in the header chrome on phones (drawer still has a copy). */
}

/*
 * Below ~380px the header row cannot fit: menu 44 + brand 103 + search 44 +
 * the three 44px theme buttons (142 with gaps) measures 377px, so the document
 * scrolled sideways at both 320px and 375px with the dark hero stopping short
 * of the right edge. The buttons are 44px on purpose (touch targets), so drop
 * the header copy of the switch instead of shrinking it — the nav drawer
 * carries a full, labelled three-button theme control at every width.
 */
@media (max-width: 380px) {
  .header-end .theme-switch--compact {
    display: none;
  }
}

.site-nav-dialog-theme {
  margin: 1rem 0.35rem 0;
  padding-top: 0.85rem;
  border-top: 1px solid var(--rim);
}

.site-nav-dialog-theme .site-nav-section-label {
  margin-left: 0;
  margin-right: 0;
}

.site-nav-dialog-theme .theme-switch {
  width: 100%;
  margin-top: 0.35rem;
}

.site-nav-dialog {
  margin: 0;
  margin-right: auto;
  padding: 0;
  width: min(22rem, 100vw);
  max-width: 100vw;
  height: 100%;
  max-height: 100%;
  border: none;
  border-right: 1px solid var(--rim);
  background: transparent;
  color: var(--ink);
}

.site-nav-dialog::backdrop {
  background: var(--backdrop);
  backdrop-filter: blur(2px);
}

.site-nav-dialog-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--panel);
  color: var(--ink);
  box-shadow: 12px 0 40px rgb(0 0 0 / 0.28);
}

.site-nav-dialog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.1rem;
  border-bottom: 1px solid var(--rim);
}

.site-nav-dialog-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.site-nav-dialog-close {
  min-height: 2.75rem;
  min-width: 2.75rem;
  padding: 0.45rem 0.75rem;
  border-radius: 0.5rem;
  border: 1px solid var(--rim);
  background: var(--surface);
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
}

.site-nav-dialog-close:hover {
  color: var(--ink);
  border-color: var(--brand);
}

.site-nav-dialog-nav {
  overflow: auto;
  padding: 0.75rem 0.85rem 1.5rem;
  overscroll-behavior: contain;
}

.site-nav-section-label {
  margin: 0.85rem 0.35rem 0.4rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.site-nav-dialog-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.35rem;
}

.site-nav-dialog-list--compact {
  grid-template-columns: 1fr 1fr;
}

.site-nav-dialog-link {
  display: block;
  padding: 0.7rem 0.8rem;
  border-radius: 0.75rem;
  border: 1px solid transparent;
  text-decoration: none;
  color: var(--ink);
  transition:
    background-color 0.15s var(--ease),
    border-color 0.15s var(--ease);
}

.site-nav-dialog-link:hover {
  background: color-mix(in srgb, var(--brand) 6%, var(--panel));
  border-color: color-mix(in srgb, var(--brand) 18%, var(--rim));
}

.site-nav-dialog-link.is-active {
  background: color-mix(in srgb, var(--brand) 14%, var(--panel));
  border-color: color-mix(in srgb, var(--brand) 35%, var(--rim));
  box-shadow: inset 3px 0 0 var(--brand);
  font-weight: 650;
  color: var(--ink);
}

.site-nav-dialog-link.is-active .site-nav-dialog-link-title {
  font-weight: 700;
}

.site-nav-dialog-link-title {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
}

.site-nav-dialog-link-desc {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.75rem;
  line-height: 1.35;
  color: var(--muted);
}

.site-nav-dialog-list--compact .site-nav-dialog-link {
  text-align: center;
  font-weight: 600;
  font-size: 0.875rem;
}

.site-nav > a:not([aria-current='page']):hover {
  color: var(--brand);
  opacity: 0.95;
  border-bottom-color: color-mix(in srgb, var(--brand) 45%, transparent);
}

.site-nav > a[aria-current='page'] {
  color: var(--brand);
  opacity: 1;
  border-bottom-width: 3px;
  border-bottom-color: var(--brand);
  font-weight: 650;
}

.site-nav > a[aria-current='page']:hover {
  color: var(--brand);
  opacity: 1;
  border-bottom-color: var(--brand);
}

html[data-theme='light'] .site-nav a {
  color: var(--ink);
  opacity: 0.88;
}

html[data-theme='light'] .site-nav > a:not([aria-current='page']):hover {
  opacity: 0.95;
}

html[data-theme='light'] .site-nav > a[aria-current='page'] {
  color: var(--brand);
  opacity: 1;
}

.nav-sep {
  display: inline-block;
  width: 1px;
  height: 1em;
  margin: 0 0.15rem;
  background: color-mix(in srgb, var(--rim) 90%, var(--muted));
  vertical-align: middle;
}

/* Header search ? matches utils sites: circular pill next to theme switch */
.site-search-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  min-width: 2.75rem;
  min-height: 2.75rem;
  flex-shrink: 0;
  padding: 0;
  border-radius: 9999px;
  border: 1px solid var(--rim);
  background: var(--panel);
  color: var(--muted);
  font: inherit;
  cursor: pointer;
  transition:
    color 0.15s ease,
    border-color 0.15s ease,
    background 0.15s ease;
}

.site-search-btn:hover {
  color: var(--brand);
  border-color: var(--brand);
}

.site-search-btn:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .site-search-btn {
    transition: none;
  }
}

.search-dialog {
  width: min(36rem, calc(100vw - 2rem));
  max-height: min(70vh, 36rem);
  margin: 12vh auto auto;
  padding: 0;
  border: 1px solid var(--rim);
  border-radius: 0.85rem;
  background: var(--panel);
  color: var(--ink);
  box-shadow: var(--shadow);
  overflow: hidden;
  z-index: 60;
}

.search-dialog::backdrop {
  background: var(--backdrop);
}

.search-dialog-form {
  display: flex;
  flex-direction: column;
  max-height: inherit;
  margin: 0;
}

.search-dialog-bar {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--rim);
  color: var(--muted);
}

.search-dialog-bar input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 1rem;
  outline: none;
}

.search-dialog-close {
  flex-shrink: 0;
  min-height: 2.75rem;
  min-width: 2.75rem;
  padding: 0.45rem 0.75rem;
  border: 1px solid var(--rim);
  border-radius: 0.4rem;
  background: transparent;
  color: var(--muted);
  font-size: 0.7rem;
  cursor: pointer;
}

.search-results {
  list-style: none;
  margin: 0;
  padding: 0.4rem;
  overflow: auto;
  max-height: min(50vh, 22rem);
}

.search-empty {
  padding: 1rem;
  color: var(--muted);
  font-size: 0.9rem;
}

.search-result a {
  display: grid;
  gap: 0.15rem;
  padding: 0.65rem 0.75rem;
  border-radius: 0.55rem;
  color: inherit;
}

.search-result a:hover {
  background: color-mix(in srgb, var(--brand) 8%, var(--panel));
}

.search-result.is-active a {
  background: color-mix(in srgb, var(--brand) 14%, var(--panel));
  outline: 2px solid color-mix(in srgb, var(--brand) 45%, var(--rim));
  outline-offset: -2px;
  box-shadow: inset 3px 0 0 var(--brand);
}

.search-result-cat {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.search-result-title {
  font-weight: 600;
  color: var(--ink);
}

.search-result-desc {
  font-size: 0.85rem;
  color: var(--muted);
}

.search-dialog-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem;
  margin: 0;
  padding: 0.65rem 1rem;
  border-top: 1px solid var(--rim);
  font-size: 0.8rem;
  color: var(--faint);
}

.search-dialog-hint kbd {
  font-size: 0.7rem;
}

.hero {
  display: grid;
  gap: 1.25rem;
  max-width: none;
  padding: 2.75rem 0 1.75rem;
}

.hero-product {
  max-width: none;
  position: relative;
}

.hero-product--with-peek {
  gap: 1.5rem 2.5rem;
  align-items: center;
}

.hero-product--with-peek .hero-product-copy {
  display: grid;
  gap: 1.25rem;
  min-width: 0;
}

.hero-product--with-peek .workshop-peek {
  margin: 0;
  width: min(100%, 28rem);
  justify-self: center;
}

.workshop-peek--starter {
  --chapter: var(--brand);
  --chapter-dim: var(--brand-dim);
}

.workshop-cli {
  padding: 0;
  overflow-x: auto;
}

.workshop-cli p {
  white-space: nowrap;
}

@media (min-width: 64rem) {
  .hero-product--with-peek {
    grid-template-columns: minmax(0, 1fr) minmax(22rem, 28rem);
  }

  .hero-product--with-peek .workshop-peek {
    justify-self: end;
  }
}

.hero h1,
.hero-product h1 {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight: 800;
  letter-spacing: -0.04em;
}

/* ---------- Flagship field (inner pages) — mountain + Try family, quiet ---------- */

.page-flagship {
  position: relative;
  isolation: isolate;
}

.flagship-field {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  contain: paint;
}

.page-flagship .wrap,
.page-flagship .site-footer {
  position: relative;
  z-index: 1;
}

.flagship-wash {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 72% 48% at 50% 0%, var(--glow), transparent 62%),
    radial-gradient(ellipse 42% 36% at 100% 18%, var(--glow-warm), transparent 72%),
    radial-gradient(ellipse 38% 32% at 0% 78%, color-mix(in srgb, var(--brand) 14%, transparent), transparent 68%);
}

.flagship-mountain {
  position: absolute;
  left: 50%;
  top: 5.5rem;
  width: min(22rem, 34vw);
  height: auto;
  /* Sit in the open right of the content-app column (copy stays ~40rem). */
  transform: translateX(clamp(6rem, 14vw, 16rem));
  opacity: 0.12;
  object-fit: contain;
}

.flagship-family {
  display: none;
  list-style: none;
  margin: 0;
  padding: 0;
}

.flagship-family-tile {
  position: absolute;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.85rem;
  background: color-mix(in srgb, var(--panel) 88%, transparent);
  border: 1px solid var(--rim);
  display: grid;
  place-items: center;
  box-shadow: 0 10px 28px color-mix(in srgb, var(--ink) 8%, transparent);
}

.flagship-family-tile img {
  width: 1.65rem;
  height: 1.65rem;
  object-fit: contain;
}

@media (min-width: 48rem) {
  .flagship-family {
    display: block;
    position: absolute;
    left: 50%;
    top: 4.25rem;
    width: min(var(--content-app), 100%);
    height: 16rem;
    transform: translateX(-50%);
  }

  /* Keep tiles in the unused right of the stage so they don't cover the title. */
  .flagship-family--a { left: auto; right: 28%; top: 14%; }
  .flagship-family--a img { transform: rotate(-8deg); }
  .flagship-family--b { left: auto; right: var(--content-pad); top: 8%; }
  .flagship-family--b img { transform: rotate(7deg); }
  .flagship-family--c { left: auto; right: 38%; top: 62%; }
  .flagship-family--c img { transform: rotate(6deg); }
  .flagship-family--d { left: auto; right: 9%; top: 52%; }
  .flagship-family--d img { transform: rotate(-11deg); }
}

html[data-theme='light'] .flagship-mountain {
  /* The source SVG is white (for the dark field). Ink it, then hold a watermark
     opacity — 0.09 white on #f3f4f6 was effectively invisible. */
  opacity: 0.2;
  filter: brightness(0);
}

html[data-theme='light'] .flagship-family-tile {
  opacity: 0.72;
}

/* ---------- Home: family orbit around the mountain-A ---------- */

.cinema-hero-cast {
  position: relative;
  width: min(28rem, 82vw);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  margin: 0 auto 0.15rem;
  overflow: visible;
}

.cinema-hero-cast .cinema-hero-character {
  width: min(48vw, 14.5rem);
  margin: 0;
  z-index: 2;
}

.cinema-orbit-glow {
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    color-mix(in srgb, #38bdf8 32%, transparent),
    color-mix(in srgb, #a78bfa 16%, transparent) 48%,
    transparent 72%
  );
  pointer-events: none;
  z-index: 0;
}

.cinema-orbit-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, #38bdf8 40%, transparent);
  box-shadow: 0 0 28px color-mix(in srgb, #38bdf8 22%, transparent);
  pointer-events: none;
  z-index: 0;
}

.cinema-orbit-ring--a {
  inset: 7%;
}

.cinema-orbit-ring--b {
  inset: -8%;
  opacity: 0.7;
  border-color: color-mix(in srgb, #a78bfa 38%, transparent);
  box-shadow: 0 0 32px color-mix(in srgb, #a78bfa 26%, transparent);
}

.family-orbit {
  display: none;
  list-style: none;
  margin: 0;
  padding: 0;
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.family-orbit-tile {
  --orbit-accent: #a78bfa;
  --orbit-ang: 0deg;
  --orbit-r: 43%;
  position: absolute;
  left: calc(50% + (sin(var(--orbit-ang)) * var(--orbit-r)));
  top: calc(50% - (cos(var(--orbit-ang)) * var(--orbit-r)));
  translate: -50% -50%;
  width: 3.35rem;
  height: 3.35rem;
  border-radius: 1rem;
  display: grid;
  place-items: center;
  background:
    linear-gradient(
      155deg,
      color-mix(in srgb, var(--orbit-accent) 22%, transparent),
      color-mix(in srgb, #0a0a0b 58%, transparent)
    );
  border: 1px solid color-mix(in srgb, var(--orbit-accent) 62%, #fff);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #fff 16%, transparent),
    0 0 0 1px color-mix(in srgb, var(--orbit-accent) 24%, transparent),
    0 0 18px color-mix(in srgb, var(--orbit-accent) 46%, transparent),
    0 12px 28px rgb(0 0 0 / 0.42);
  -webkit-backdrop-filter: blur(12px) saturate(1.25);
  backdrop-filter: blur(12px) saturate(1.25);
}

.family-orbit-tile img {
  width: 1.75rem;
  height: 1.75rem;
  object-fit: contain;
}

/* Inner ring inset 7% → r 43%. Outer inset -8% → r 58%. Two on each path. */
.family-orbit--a {
  --orbit-accent: #a78bfa;
  --orbit-ang: -52deg;
  --orbit-r: 58%;
}
.family-orbit--b {
  --orbit-accent: #38bdf8;
  --orbit-ang: 48deg;
  --orbit-r: 43%;
}
.family-orbit--c {
  --orbit-accent: #fbbf24;
  --orbit-ang: 228deg;
  --orbit-r: 43%;
}
.family-orbit--d {
  --orbit-accent: #34d399;
  --orbit-ang: 132deg;
  --orbit-r: 58%;
}

@media (min-width: 641px) {
  .family-orbit {
    display: block;
  }

  .family-orbit--a img { transform: rotate(-9deg); }
  .family-orbit--b img { transform: rotate(8deg); }
  .family-orbit--c img { transform: rotate(5deg); }
  .family-orbit--d img { transform: rotate(-10deg); }
}

/* Tablet: constellation under the pitch, scaled so rings and tiles stay in frame */
@media (min-width: 641px) and (max-width: 63.99rem) {
  .cinema-hero-content--split {
    justify-items: center;
    text-align: center;
  }

  .cinema-hero-copy {
    justify-items: center;
    width: min(36rem, 100%);
  }

  .cinema-hero-logo {
    display: none;
  }

  .cinema-hero-cast {
    width: min(20.5rem, 72vw);
    margin-block: 0.35rem 0.85rem;
  }

  .cinema-hero-cast .cinema-hero-character {
    width: min(54%, 10.75rem);
  }

  .cinema-orbit-ring--b {
    inset: 2%;
  }

  .family-orbit--a,
  .family-orbit--d {
    --orbit-r: 48%;
  }

  .family-orbit-tile {
    width: 2.7rem;
    height: 2.7rem;
    border-radius: 0.8rem;
  }

  .family-orbit-tile img {
    width: 1.4rem;
    height: 1.4rem;
  }
}

@media (min-width: 64rem) {
  .cinema-hero-cast {
    width: min(32rem, 56vw);
  }

  .family-orbit-tile {
    width: 4.15rem;
    height: 4.15rem;
    border-radius: 1.15rem;
  }

  .family-orbit-tile img {
    width: 2.35rem;
    height: 2.35rem;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .flagship-family--a { animation: haven-bob 8s ease-in-out 2.5s infinite alternate; }
  .flagship-family--b { animation: haven-bob 9.5s ease-in-out 2.8s infinite alternate-reverse; }
  .flagship-family--c { animation: haven-bob 7.5s ease-in-out 3s infinite alternate; }
  .flagship-family--d { animation: haven-bob 10s ease-in-out 2.2s infinite alternate-reverse; }
}

h1 {
  margin: 0;
  font-size: clamp(2rem, 5vw, 2.75rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
}

h2 {
  margin: 0 0 0.5rem;
  font-size: 1.05rem;
}

.lead {
  margin: 0;
  font-size: 1.05rem;
  color: var(--muted);
  max-width: 38rem;
}

.lead strong {
  color: var(--ink);
  font-weight: 650;
}

/* ---------- Home: cinematic chapters (Apple / Claude / Cyberpunk craft) ---------- */

.wrap--home {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0 0 0;
}

.page-home {
  background: var(--bg);
}

.page-home .site-footer {
  margin-top: 0;
}

.stage {
  width: 100%;
  max-width: var(--content-app);
  margin-inline: auto;
  padding-inline: var(--content-pad);
}

.btn-lg {
  min-height: 2.75rem;
  min-width: 2.75rem;
  padding: 0.85rem 1.5rem;
  font-size: 1rem;
  border-radius: 0.75rem;
}

.cinema-hero {
  position: relative;
  display: grid;
  place-items: center;
  /* Shorter than full viewport so #quick-start picker lands in first screen (esp. mobile). */
  min-height: min(58vh, 32rem);
  padding: 5.5rem 1.25rem 2rem;
  overflow: hidden;
  isolation: isolate;
  text-align: center;
  /* Night cinema in both site themes — light pages keep this first screen. */
  --ink: #f1f5f9;
  --muted: #a8b0bc;
  --faint: #7b8494;
  --brand: #94a3b8;
  --brand-dim: #64748b;
  --accent: #cbd5e1;
  --on-brand: #0f1419;
  --bg: #0a0a0b;
  --panel: #171a20;
  --surface: #22262e;
  --rim: #343a45;
  background-color: #0a0a0b;
}

/* Brand + Quick start share one haven field — one composition, not two stacked sections. */
.cinema-hero--with-picker {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  place-items: stretch;
  min-height: auto;
  padding: 6.25rem 0 0;
  text-align: initial;
}

.cinema-hero--with-picker .cinema-hero-content {
  padding-inline: 0;
  padding-bottom: 0.35rem;
}

/* Keep haven continuous under Quick Start — no mid-hero opaque shelf. */
.cinema-hero--with-picker .cinema-hero-drift {
  background: linear-gradient(
    180deg,
    transparent 0%,
    transparent 72%,
    color-mix(in srgb, var(--bg) 28%, transparent) 90%,
    var(--bg) 100%
  );
}

/* Soft CSS mist on the veil — no stepped mask (those read as ring edges). */
.cinema-hero--with-picker .cinema-hero-veil {
  -webkit-mask-image: none;
  mask-image: none;
}

.cinema-hero--with-picker .cinema-hero-stars {
  -webkit-mask-image: radial-gradient(
    ellipse 100% 80% at 50% 36%,
    #000 0%,
    rgba(0, 0, 0, 0.55) 55%,
    rgba(0, 0, 0, 0.15) 78%,
    transparent 100%
  );
  mask-image: radial-gradient(
    ellipse 100% 80% at 50% 36%,
    #000 0%,
    rgba(0, 0, 0, 0.55) 55%,
    rgba(0, 0, 0, 0.15) 78%,
    transparent 100%
  );
}

@media (max-width: 640px) {
  .cinema-hero {
    min-height: auto;
    padding: 4.25rem 1rem 0.75rem;
  }

  .cinema-hero--with-picker {
    padding: 4.25rem 0 0;
  }

  .cinema-hero--with-picker .cinema-hero-content {
    padding-inline: 0;
    padding-bottom: 0.15rem;
  }

  .cinema-hero-content--split {
    gap: 0.85rem;
    justify-items: center;
    text-align: center;
  }

  .cinema-hero-copy {
    justify-items: center;
    width: 100%;
  }

  /* One mark on phones: the lockup above the word. The neon constellation is desktop/tablet. */
  .cinema-hero-cast {
    display: none;
  }

  .cinema-brand-lockup .cinema-hero-logo {
    width: auto;
    height: 1.08em;
    margin-bottom: 0.2rem;
  }

  .cinema-brand {
    font-size: clamp(2.6rem, 12vw, 3.35rem);
  }

  .cinema-brand-rest {
    display: block;
    margin-top: 0.2rem;
    font-size: clamp(0.92rem, 3.6vw, 1.1rem);
  }

  .cinema-promise {
    display: block;
    max-width: 36rem;
    padding-inline: 0;
    font-size: 0.95rem;
    line-height: 1.4;
  }

  .cinema-cta {
    margin-top: 0.25rem;
    width: 100%;
  }

  .btn.cinema-cta-punch {
    width: 100%;
    max-width: 22rem;
  }

  .cinema-trust {
    justify-self: center;
  }

  .cinema-hero-secondary {
    margin-top: 0.25rem;
    font-size: 0.8rem;
  }

  .tool-picker--on-hero {
    scroll-margin-top: 4.5rem;
    padding-top: 0.65rem;
  }

  .tool-picker--on-hero .eyebrow {
    margin-bottom: 0.15rem;
  }

  .tool-picker--on-hero .home-display--sm {
    font-size: 1.05rem;
  }

  .tool-picker-lead,
  .tool-picker-trust {
    font-size: 0.78rem;
    margin-top: 0.2rem;
  }

  .tool-picker-trust {
    margin-bottom: 0.45rem;
  }

  /* Peek first Visit cards in the initial viewport */
  .tool-picker--on-hero .tool-picker-grid {
    max-height: none;
  }

  .tool-picker--on-hero .tool-picker-card {
    min-height: 0;
    padding: 0.65rem 0.75rem;
  }

  .tool-picker--on-hero .tool-picker-desc {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

.cinema-hero-atmosphere {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  /* One paint layer that scrolls as a bitmap — avoids per-frame re-blend. */
  contain: paint;
  transform: translateZ(0);
  /*
    Do NOT CSS-blur this stack. Real-user LCP flagged the hero as slow when we
    applied filter:blur(36px) + scale(1.12) across the full-bleed mesh/veil/stars
    composite — that forces an expensive offscreen raster every paint. The veil
    WebP already bakes the soft look; mesh gradients stay soft without a second pass.
  */
}

.cinema-hero-wash,
.acsaven-haven-mesh {
  --hm-void: var(--bg);
  --hm-ink: var(--bg);
  --hm-steel: #6b7280;
  --hm-mist: #9ca3af;
  --hm-silver: #e5e7eb;
  --hm-cloud: #d1d5db;
  --hm-ash: #4b5563;
  position: absolute;
  inset: 0;
  background-color: var(--hm-void);
  background-image:
    radial-gradient(ellipse 110% 90% at 0% 0%, color-mix(in srgb, #000 55%, transparent) 0%, transparent 78%),
    radial-gradient(ellipse 110% 90% at 100% 100%, color-mix(in srgb, #000 50%, transparent) 0%, transparent 78%),
    radial-gradient(
      ellipse 72% 58% at 50% 36%,
      color-mix(in srgb, var(--hm-silver) 12%, transparent) 0%,
      color-mix(in srgb, var(--hm-silver) 8%, transparent) 18%,
      color-mix(in srgb, var(--hm-cloud) 5%, transparent) 36%,
      color-mix(in srgb, var(--hm-cloud) 2.5%, transparent) 55%,
      color-mix(in srgb, var(--hm-mist) 1%, transparent) 72%,
      transparent 92%
    ),
    radial-gradient(
      ellipse 78% 70% at 16% 32%,
      color-mix(in srgb, var(--hm-mist) 12%, transparent) 0%,
      color-mix(in srgb, var(--hm-mist) 7%, transparent) 28%,
      color-mix(in srgb, var(--hm-steel) 3%, transparent) 52%,
      color-mix(in srgb, var(--hm-steel) 1%, transparent) 74%,
      transparent 94%
    ),
    radial-gradient(
      ellipse 76% 66% at 86% 28%,
      color-mix(in srgb, var(--hm-cloud) 10%, transparent) 0%,
      color-mix(in srgb, var(--hm-cloud) 5.5%, transparent) 28%,
      color-mix(in srgb, var(--hm-mist) 2.5%, transparent) 52%,
      color-mix(in srgb, var(--hm-mist) 1%, transparent) 74%,
      transparent 94%
    ),
    radial-gradient(
      ellipse 64% 58% at 30% 70%,
      color-mix(in srgb, var(--hm-steel) 7%, transparent) 0%,
      color-mix(in srgb, var(--hm-steel) 2.5%, transparent) 40%,
      transparent 82%
    ),
    radial-gradient(
      ellipse 68% 60% at 76% 72%,
      color-mix(in srgb, var(--hm-ash) 8%, transparent) 0%,
      color-mix(in srgb, var(--hm-ash) 3%, transparent) 40%,
      transparent 84%
    ),
    radial-gradient(
      ellipse 92% 42% at 50% 60%,
      color-mix(in srgb, var(--hm-silver) 5%, transparent) 0%,
      color-mix(in srgb, var(--hm-silver) 2%, transparent) 45%,
      transparent 88%
    ),
    linear-gradient(180deg, var(--hm-void) 0%, var(--hm-ink) 100%);
  /* screen only — soft-light was re-compositing on every scroll frame */
  background-blend-mode:
    multiply, multiply, screen, screen, screen, screen, screen, screen, normal;
  /* No animation here on purpose: animating background-position across an
     11-layer gradient + blend-mode stack forces the browser to recompute
     this whole composite every frame, for 40s, continuously - real-user
     Core Web Vitals data showed this exact hero as a slow LCP/loading spot,
     and a purely decorative background drift isn't worth that cost. */
}

.cinema-hero-veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  /* Extra-long stop ramps so mist reads as one cloud, not layered ovals.
     No mix-blend-mode: that forced sibling re-blend while scrolling. */
  opacity: 0.88;
  mix-blend-mode: normal;
  background-image:
    radial-gradient(
      ellipse 88% 64% at 50% 40%,
      color-mix(in srgb, var(--hm-silver, #e5e7eb) 22%, transparent) 0%,
      color-mix(in srgb, var(--hm-silver, #e5e7eb) 15%, transparent) 14%,
      color-mix(in srgb, var(--hm-cloud, #d1d5db) 10%, transparent) 28%,
      color-mix(in srgb, var(--hm-cloud, #d1d5db) 5.5%, transparent) 44%,
      color-mix(in srgb, var(--hm-mist, #9ca3af) 2.8%, transparent) 62%,
      color-mix(in srgb, var(--hm-ash, #4b5563) 1%, transparent) 78%,
      transparent 100%
    ),
    radial-gradient(
      ellipse 62% 52% at 14% 46%,
      color-mix(in srgb, var(--hm-mist, #9ca3af) 13%, transparent) 0%,
      color-mix(in srgb, var(--hm-mist, #9ca3af) 6.5%, transparent) 30%,
      color-mix(in srgb, var(--hm-steel, #6b7280) 2.8%, transparent) 58%,
      transparent 100%
    ),
    radial-gradient(
      ellipse 62% 52% at 86% 46%,
      color-mix(in srgb, var(--hm-cloud, #d1d5db) 11%, transparent) 0%,
      color-mix(in srgb, var(--hm-cloud, #d1d5db) 5.5%, transparent) 30%,
      color-mix(in srgb, var(--hm-ash, #4b5563) 2.2%, transparent) 58%,
      transparent 100%
    );
  -webkit-mask-image: none;
  mask-image: none;
}

.cinema-hero-veil img {
  display: none;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  /* Near-invisible grain — any residual WebP steps stay below perception. */
  opacity: 0.08;
  filter: none;
}

/* Theme-aware veil: dark uses the WebP grain; light uses CSS mist only (TryTokka). */
.cinema-hero-veil .veil-dark { display: block; }
.cinema-hero-veil .veil-light { display: none !important; }

.cinema-hero-stars {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.2;
  mix-blend-mode: normal;
  -webkit-mask-image: radial-gradient(
    ellipse 105% 85% at 50% 36%,
    #000 0%,
    rgba(0, 0, 0, 0.65) 40%,
    rgba(0, 0, 0, 0.25) 68%,
    rgba(0, 0, 0, 0.08) 85%,
    transparent 100%
  );
  mask-image: radial-gradient(
    ellipse 105% 85% at 50% 36%,
    #000 0%,
    rgba(0, 0, 0, 0.65) 40%,
    rgba(0, 0, 0, 0.25) 68%,
    rgba(0, 0, 0, 0.08) 85%,
    transparent 100%
  );
}

.cinema-hero-stars img {
  display: none;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 28%;
}

/* Dark stars on the night field; light theme hides them below. */
.cinema-hero-stars .stars-dark { display: block; }
.cinema-hero-stars .stars-light { display: none !important; }

.cinema-hero-range,
.cinema-hero-range-mist,
.cinema-hero-light-sheet { display: none !important; }

.cinema-hero-grain {
  position: absolute;
  inset: 0;
  z-index: 3;
  opacity: 0.025;
  mix-blend-mode: normal;
  pointer-events: none;
  /* No network image — a CSS-only speck avoids haven-grain.webp competing for LCP. */
  background-image:
    radial-gradient(circle at 20% 30%, color-mix(in srgb, #fff 35%, transparent) 0 0.6px, transparent 1px),
    radial-gradient(circle at 70% 55%, color-mix(in srgb, #fff 28%, transparent) 0 0.5px, transparent 1px),
    radial-gradient(circle at 40% 80%, color-mix(in srgb, #fff 22%, transparent) 0 0.45px, transparent 0.9px),
    radial-gradient(circle at 85% 20%, color-mix(in srgb, #fff 30%, transparent) 0 0.55px, transparent 1px);
  background-size: 6px 6px, 7px 7px, 5px 5px, 8px 8px;
}

.cinema-hero-beam {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(ellipse 80% 50% at 92% -8%, color-mix(in srgb, #fff 32%, transparent), transparent 55%);
  mix-blend-mode: screen;
  opacity: 0.9;
}

.cinema-hero-drift {
  position: absolute;
  inset: 0;
  z-index: 3;
  /* Long soft ramp into the page canvas — no hard shelf at Quick start. */
  background: linear-gradient(
    180deg,
    transparent 0%,
    transparent 58%,
    color-mix(in srgb, var(--bg) 22%, transparent) 82%,
    color-mix(in srgb, var(--bg) 72%, transparent) 94%,
    var(--bg) 100%
  );
  opacity: 1;
}

html[data-theme='light'] .cinema-hero-logo {
  filter: unset;
}

.cinema-hero-content {
  position: relative;
  z-index: 4;
  display: grid;
  gap: 1rem;
  width: 100%;
  margin-inline: auto;
  justify-items: center;
  text-align: center;
}

.cinema-hero-content--split {
  gap: 1.25rem 2.5rem;
}

.cinema-hero-copy {
  display: grid;
  gap: 1rem;
  justify-items: center;
  align-content: center;
  min-width: 0;
  text-align: center;
}

.cinema-hero-logo {
  display: block;
  width: auto;
  height: 1.08em;
  aspect-ratio: 233 / 209;
  margin: 0 auto 0.28rem;
  filter: drop-shadow(0 10px 28px rgb(0 0 0 / 0.5));
  animation: none;
}

.cinema-brand-lockup {
  display: grid;
  justify-items: center;
  width: max-content;
}

.cinema-brand-name {
  display: block;
}

.cinema-hero-content--split .cinema-hero-cast {
  justify-self: center;
}

/* Rim glow only — the SVG stays steel, not a neon fill. Static for LCP/INP. */
.cinema-hero-content--split .cinema-hero-character {
  filter:
    drop-shadow(0 0 6px #f8fafc)
    drop-shadow(0 0 16px #38bdf8)
    drop-shadow(0 0 32px #a78bfa)
    drop-shadow(0 18px 36px rgb(0 0 0 / 0.5));
}

@media (min-width: 64rem) {
  .cinema-hero-content--split {
    grid-template-columns: minmax(0, 0.92fr) minmax(22rem, 1.28fr);
    align-items: center;
    justify-items: stretch;
    text-align: left;
    min-height: min(78vh, 44rem);
    padding-top: 1.35rem;
    gap: 1.25rem 1rem;
  }

  .cinema-hero-copy {
    justify-items: start;
    text-align: left;
  }

  .cinema-hero-content--split .cinema-brand,
  .cinema-hero-content--split .cinema-promise {
    text-align: left;
    max-width: 38rem;
  }

  .cinema-hero-content--split .cinema-cta {
    justify-content: flex-start;
  }

  .cinema-hero-content--split .cinema-brand {
    font-size: clamp(3.9rem, 8.8vw, 6.85rem);
  }

  .cinema-hero-content--split .cinema-brand-rest {
    font-size: clamp(1.2rem, 2.2vw, 1.7rem);
    color: var(--muted);
  }

  .cinema-hero-content--split .cinema-hero-cast {
    width: min(36rem, 118%);
    justify-self: end;
    transform: translateX(8%);
  }

  .cinema-hero-content--split .cinema-hero-character {
    width: min(70%, 21rem);
    filter:
      drop-shadow(0 0 8px #f8fafc)
      drop-shadow(0 0 20px #38bdf8)
      drop-shadow(0 0 42px #a78bfa)
      drop-shadow(0 28px 50px rgb(0 0 0 / 0.55));
  }
}

.cinema-hero-character {
  position: relative;
  display: block;
  width: min(48vw, 14.5rem);
  height: auto;
  aspect-ratio: 1;
  margin: 0 auto 0.35rem;
  padding: 0;
  border: 0;
  background: transparent;
  transform: none;
  left: auto;
  top: auto;
  opacity: 1;
  filter: none;
  /* Delay bob until after the LCP window so first paint / early taps stay cheap (INP). */
  animation: haven-bob 9s ease-in-out 2.5s infinite alternate;
  pointer-events: none;
  z-index: 2;
  object-fit: contain;
}

.cinema-brand {
  margin: 0;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: clamp(3.6rem, 12vw, 7rem);
  line-height: 0.92;
  letter-spacing: -0.06em;
  font-weight: 800;
  color: var(--ink);
  text-align: center;
  /* Transform-only rise — opacity stays 1 so LCP text paints immediately. */
  animation: cinema-rise 0.9s var(--ease, ease) both;
}

.cinema-brand-rest {
  display: block;
  margin-top: 0.35rem;
  font-size: clamp(1.05rem, 2.6vw, 1.45rem);
  line-height: 1.25;
  letter-spacing: -0.02em;
  font-weight: 600;
  color: var(--muted);
}

.cinema-promise {
  margin: 0;
  max-width: 42rem;
  font-size: clamp(1.05rem, 2.2vw, 1.32rem);
  line-height: 1.45;
  color: var(--muted);
  text-align: center;
  animation: cinema-rise 0.9s var(--ease, ease) 0.08s both;
}

.cinema-cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.7rem;
  margin-top: 0.55rem;
  animation: cinema-rise 0.9s var(--ease, ease) 0.14s both;
}

.btn.cinema-cta-punch {
  background: #f1f5f9;
  color: #0f1419;
  min-height: 3.15rem;
  padding: 1rem 1.95rem;
  font-size: 1.08rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  border-radius: 999px;
  box-shadow:
    0 0 0 1px color-mix(in srgb, #fff 50%, transparent),
    0 14px 40px color-mix(in srgb, #fff 16%, transparent);
}

.btn.cinema-cta-punch:hover {
  background: #fff;
  color: #0f1419;
  filter: none;
  transform: scale(1.03);
}

.cinema-trust {
  list-style: none;
  margin: 0.15rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.4rem;
  animation: cinema-rise 0.9s var(--ease, ease) 0.18s both;
}

.cinema-trust li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.35;
  color: var(--muted);
}

.cinema-trust li::before {
  content: '';
  flex: none;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: color-mix(in srgb, #34d399 70%, #f1f5f9);
  box-shadow: 0 0 0 3px color-mix(in srgb, #34d399 22%, transparent);
}

.cinema-hero-secondary {
  margin: 0.45rem 0 0;
  text-align: center;
  font-size: 0.9rem;
  animation: cinema-rise 0.9s var(--ease, ease) 0.18s both;
}

.cinema-hero-secondary .muted-inline {
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.cinema-hero-secondary .muted-inline:hover {
  color: var(--ink, var(--text));
}

.tool-picker-trust {
  margin: 0.35rem 0 0.75rem;
  text-align: center;
  font-size: 0.85rem;
  color: var(--muted);
}

@keyframes cinema-rise {
  from {
    transform: translateY(18px);
  }
  to {
    transform: translateY(0);
  }
}

@keyframes cinema-mark {
  from {
    opacity: 0.14;
    transform: translate(-50%, -50%) scale(1);
  }
  to {
    opacity: 0.22;
    transform: translate(-50%, -52%) scale(1.04);
  }
}

@keyframes haven-bob {
  from {
    transform: translateY(0) scale(1);
  }
  to {
    transform: translateY(-0.45rem) scale(1.03);
  }
}

.home-display {
  margin: 0;
  font-size: clamp(1.85rem, 4.5vw, 3rem);
  line-height: 1.1;
  letter-spacing: -0.04em;
  font-weight: 700;
  color: var(--ink);
}

.home-display--sm {
  font-size: clamp(1.45rem, 3vw, 2rem);
}

.home-credo {
  padding: 5rem 0 4rem;
  border-top: none;
  background: color-mix(in srgb, var(--panel) 55%, var(--bg));
}

.home-credo .home-display {
  margin-bottom: 2.5rem;
}

.credo-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.75rem 2.5rem;
}

@media (min-width: 800px) {
  .credo-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.credo-list li {
  display: grid;
  gap: 0.45rem;
  padding: 0;
  border: 0;
  background: none;
}

.credo-list strong,
.credo-list h3 {
  margin: 0;
  font-size: 1.05rem;
  letter-spacing: -0.02em;
  font-weight: 650;
  color: var(--ink);
}

.credo-list span {
  font-size: 0.98rem;
  line-height: 1.55;
  color: var(--muted);
}

.family-section {
  padding: 4.5rem 0 2.5rem;
  scroll-margin-top: 4.5rem;
}

.family-intro-inner {
  max-width: 36rem;
  margin-inline: auto;
  text-align: center;
  margin-bottom: 0.5rem;
}

.family-intro-lead {
  margin: 1rem auto 0;
  max-width: 36rem;
  font-size: 1.1rem;
  color: var(--muted);
}

.home-video-section {
  padding: 3rem 0 3.5rem;
  text-align: center;
}

.home-video-section .home-display--sm {
  margin-bottom: 1.5rem;
}

.home-video-section .yt-facade {
  width: 100%;
  max-width: none;
}

.yt-facade {
  position: relative;
  margin-inline: auto;
  display: block;
  width: 100%;
  max-width: none;
  aspect-ratio: 16/9;
  overflow: hidden;
  border-radius: 0.75rem;
  border: 1px solid color-mix(in srgb, #fff 14%, transparent);
  /* Always black stage — light theme --panel washed out dark thumbs. */
  background: #0a0a0b;
  color-scheme: dark;
}

/* Portrait Shorts: phone-shaped frame after youtube-facade.js reads the thumb. */
.yt-facade[data-yt-shape='portrait'] {
  width: 100%;
  max-width: 280px;
}

@media (min-width: 640px) {
  .yt-facade[data-yt-shape='portrait'] {
    max-width: 320px;
  }
}

.yt-facade[data-yt-shape='landscape'] {
  width: 100%;
  max-width: none;
}

.yt-facade-thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.yt-facade-play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 56px;
  height: 56px;
  border-radius: 9999px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.yt-facade-play:hover,
.yt-facade-play:focus-visible {
  background: rgba(0, 0, 0, 0.8);
}

.yt-facade iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.home-pick-again {
  padding: 2.25rem 0 2.5rem;
  border-top: 1px solid color-mix(in srgb, var(--rim) 80%, transparent);
  text-align: center;
}

.home-pick-again-inner {
  max-width: 28rem;
  margin-inline: auto;
  display: grid;
  gap: 0.75rem;
  justify-items: center;
}

.home-pick-again-lead {
  margin: 0;
  max-width: 24rem;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--muted);
}

.home-hub-note {
  padding: 2.5rem 0 3.5rem;
  border-top: 1px solid color-mix(in srgb, var(--rim) 80%, transparent);
}

.home-hub-inner {
  max-width: 36rem;
  margin-inline: auto;
  text-align: center;
}

.home-hub-note .eyebrow {
  margin-bottom: 0.65rem;
}

.home-hub-note-lead {
  margin: 1rem auto 0;
  max-width: 32rem;
  font-size: 1.08rem;
  line-height: 1.55;
  color: var(--muted);
}

.home-hub-hubline {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 0.45rem 0.65rem;
  margin: 1.5rem 0 0;
  font-size: 0.98rem;
  line-height: 1.5;
  color: var(--muted);
}

.home-hub-label {
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
}

.home-hub-hubline-body strong {
  color: var(--ink);
  font-weight: 650;
}

.home-hub-domains {
  list-style: none;
  margin: 1.15rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.55rem 1.15rem;
}

.home-hub-domains a {
  color: var(--brand);
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--brand) 35%, transparent);
}

.home-hub-domains a:hover {
  border-bottom-color: var(--brand);
}

.home-hub-cite {
  margin: 1.35rem 0 0;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--muted);
}

.home-hub-cite a {
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 28%, transparent);
}

.home-hub-cite a:hover {
  border-bottom-color: var(--ink);
}

.tool-picker {
  position: relative;
  padding: 2.5rem 0 2.75rem;
  scroll-margin-top: 4.5rem;
  isolation: isolate;
}

.tool-picker--on-hero {
  z-index: 4;
  padding: 1.35rem 0 2.75rem;
  scroll-margin-top: 4.5rem;
  isolation: isolate;
}

.tool-picker--on-hero .stage {
  text-align: left;
}

.tool-picker::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 55% 70% at 12% 20%, color-mix(in srgb, #6d28d9 10%, transparent), transparent 58%),
    radial-gradient(ellipse 45% 60% at 88% 30%, color-mix(in srgb, #0369a1 9%, transparent), transparent 55%),
    radial-gradient(ellipse 50% 55% at 30% 95%, color-mix(in srgb, #b45309 8%, transparent), transparent 52%),
    radial-gradient(ellipse 48% 50% at 78% 90%, color-mix(in srgb, #047857 9%, transparent), transparent 55%);
}

html[data-theme='dark'] .tool-picker::before {
  background:
    radial-gradient(ellipse 55% 70% at 12% 20%, color-mix(in srgb, #a78bfa 14%, transparent), transparent 58%),
    radial-gradient(ellipse 45% 60% at 88% 30%, color-mix(in srgb, #38bdf8 12%, transparent), transparent 55%),
    radial-gradient(ellipse 50% 55% at 30% 95%, color-mix(in srgb, #fbbf24 10%, transparent), transparent 52%),
    radial-gradient(ellipse 48% 50% at 78% 90%, color-mix(in srgb, #34d399 12%, transparent), transparent 55%);
}

/* Hero is locked night in both themes — use the bright haven washes always. */
html[data-theme='light'] .tool-picker--on-hero::before {
  background:
    radial-gradient(ellipse 58% 72% at 10% 18%, color-mix(in srgb, #a78bfa 18%, transparent), transparent 60%),
    radial-gradient(ellipse 50% 64% at 90% 22%, color-mix(in srgb, #38bdf8 16%, transparent), transparent 58%),
    radial-gradient(ellipse 52% 58% at 28% 92%, color-mix(in srgb, #fbbf24 14%, transparent), transparent 56%),
    radial-gradient(ellipse 50% 54% at 80% 88%, color-mix(in srgb, #34d399 16%, transparent), transparent 58%);
}

html[data-theme='dark'] .tool-picker--on-hero::before {
  background:
    radial-gradient(ellipse 58% 72% at 10% 18%, color-mix(in srgb, #a78bfa 18%, transparent), transparent 60%),
    radial-gradient(ellipse 50% 64% at 90% 22%, color-mix(in srgb, #38bdf8 16%, transparent), transparent 58%),
    radial-gradient(ellipse 52% 58% at 28% 92%, color-mix(in srgb, #fbbf24 14%, transparent), transparent 56%),
    radial-gradient(ellipse 50% 54% at 80% 88%, color-mix(in srgb, #34d399 16%, transparent), transparent 58%);
}

.tool-picker-lead {
  margin: 0.65rem 0 0;
  max-width: 36rem;
  font-size: 1.02rem;
  line-height: 1.55;
  color: var(--muted);
}

.tool-picker-grid {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.85rem;
  align-items: stretch;
  grid-template-columns: 1fr;
}

@media (min-width: 36rem) {
  .tool-picker-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 64rem) {
  .tool-picker-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.tool-picker-grid > li {
  display: flex;
  min-height: 0;
}

.tool-picker-card {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 0.95rem 1.05rem;
  border-radius: 0.9rem;
  /* Glass panel — frosted over the section wash */
  background:
    linear-gradient(
      155deg,
      color-mix(in srgb, var(--picker-accent, var(--brand)) 14%, transparent) 0%,
      color-mix(in srgb, var(--panel) 48%, transparent) 52%,
      color-mix(in srgb, var(--panel) 38%, transparent) 100%
    );
  border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  border-left: 3px solid var(--picker-accent, var(--brand));
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #fff 55%, transparent),
    0 10px 28px -18px color-mix(in srgb, var(--ink) 28%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(1.35);
  backdrop-filter: blur(18px) saturate(1.35);
  text-decoration: none;
  overflow: hidden;
  transition:
    border-color 0.22s ease,
    transform 0.22s ease,
    box-shadow 0.22s ease,
    background 0.22s ease;
}

html[data-theme='dark'] .tool-picker-card {
  background:
    linear-gradient(
      155deg,
      color-mix(in srgb, var(--picker-accent, var(--brand)) 18%, transparent) 0%,
      color-mix(in srgb, #fff 7%, transparent) 42%,
      color-mix(in srgb, var(--panel) 28%, transparent) 100%
    );
  border-color: color-mix(in srgb, #fff 16%, transparent);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #fff 16%, transparent),
    0 12px 32px -16px rgba(0, 0, 0, 0.55);
}

.tool-picker-card::after {
  content: '';
  position: absolute;
  inset: auto -20% -55% 40%;
  height: 70%;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--picker-accent, var(--brand)) 22%, transparent), transparent 70%);
  opacity: 0.45;
  pointer-events: none;
  transition: opacity 0.22s ease, transform 0.22s ease;
}

.tool-picker-card:hover,
.tool-picker-card:focus-visible {
  border-color: color-mix(in srgb, var(--picker-accent, var(--brand)) 48%, transparent);
  border-left-color: var(--picker-accent, var(--brand));
  transform: translateY(-3px);
  background:
    linear-gradient(
      155deg,
      color-mix(in srgb, var(--picker-accent, var(--brand)) 20%, transparent) 0%,
      color-mix(in srgb, var(--panel) 58%, transparent) 55%,
      color-mix(in srgb, var(--panel) 42%, transparent) 100%
    );
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #fff 65%, transparent),
    0 16px 36px -14px color-mix(in srgb, var(--picker-accent, var(--brand)) 45%, transparent),
    0 0 0 1px color-mix(in srgb, var(--picker-accent, var(--brand)) 18%, transparent);
  outline: none;
}

html[data-theme='dark'] .tool-picker-card:hover,
html[data-theme='dark'] .tool-picker-card:focus-visible {
  background:
    linear-gradient(
      155deg,
      color-mix(in srgb, var(--picker-accent, var(--brand)) 24%, transparent) 0%,
      color-mix(in srgb, #fff 10%, transparent) 45%,
      color-mix(in srgb, var(--panel) 32%, transparent) 100%
    );
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #fff 20%, transparent),
    0 16px 36px -14px color-mix(in srgb, var(--picker-accent, var(--brand)) 40%, transparent),
    0 0 0 1px color-mix(in srgb, var(--picker-accent, var(--brand)) 22%, transparent);
}

.tool-picker-card:hover::after,
.tool-picker-card:focus-visible::after {
  opacity: 0.75;
  transform: translate(-8%, -12%) scale(1.08);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .tool-picker-card {
    background:
      linear-gradient(
        155deg,
        color-mix(in srgb, var(--picker-accent, var(--brand)) 10%, var(--panel)) 0%,
        var(--panel) 55%
      );
  }
}

.tool-picker-icon-wrap {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  min-width: 2.6rem;
  min-height: 2.6rem;
  margin-top: 0.05rem;
  border-radius: 0.7rem;
  background: color-mix(in srgb, var(--picker-accent, var(--brand)) 18%, transparent);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #fff 35%, transparent),
    inset 0 0 0 1px color-mix(in srgb, var(--picker-accent, var(--brand)) 28%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: transform 0.22s ease, background 0.22s ease;
}

.tool-picker-card:hover .tool-picker-icon-wrap,
.tool-picker-card:focus-visible .tool-picker-icon-wrap {
  transform: scale(1.05) rotate(-2deg);
  background: color-mix(in srgb, var(--picker-accent, var(--brand)) 28%, transparent);
}

.tool-picker-icon {
  width: 1.55rem;
  height: 1.55rem;
}

.tool-picker-body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  flex: 1;
  min-width: 0;
  min-height: 100%;
}

.tool-picker-card h3 {
  margin: 0;
  min-width: 0;
  font-size: 0.95rem;
  font-weight: 650;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.tool-picker-desc {
  font-size: 0.82rem;
  line-height: 1.35;
  color: var(--muted);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

/* Visit + .com share one bottom row so long names never push Visit onto its own line. */
.tool-picker-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 0.75rem;
  margin-top: auto;
  padding-top: 0.15rem;
  min-width: 0;
}

.tool-picker-go {
  display: inline-flex;
  align-items: center;
  flex: none;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
  min-height: 0;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
  color: var(--picker-accent, var(--brand));
  transition: gap 0.2s ease, color 0.2s ease;
}

.tool-picker-dest {
  display: block;
  min-width: 0;
  margin: 0;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-align: right;
  color: var(--picker-accent, var(--brand));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav-products-meta {
  margin-left: 0.35rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--muted);
}

.tool-picker-card:hover .tool-picker-go,
.tool-picker-card:focus-visible .tool-picker-go {
  gap: 0.4rem;
}

@media (prefers-reduced-motion: reduce) {
  .tool-picker-card,
  .tool-picker-card::after,
  .tool-picker-icon-wrap,
  .tool-picker-go {
    transition: none;
  }

  .tool-picker-card:hover,
  .tool-picker-card:focus-visible {
    transform: none;
  }

  .tool-picker-card:hover .tool-picker-icon-wrap,
  .tool-picker-card:focus-visible .tool-picker-icon-wrap {
    transform: none;
  }
}

/* Per-product accent — same hex values as the chapter sections below, for visual continuity */
.tool-picker-card--tryquickimg { --picker-accent: #6d28d9; }
.tool-picker-card--trydevsnip { --picker-accent: #0369a1; }
.tool-picker-card--trycalculatingnow { --picker-accent: #b45309; }
.tool-picker-card--trytokka { --picker-accent: #047857; }

html[data-theme='dark'] .tool-picker-card--tryquickimg { --picker-accent: #a78bfa; }
html[data-theme='dark'] .tool-picker-card--trydevsnip { --picker-accent: #38bdf8; }
html[data-theme='dark'] .tool-picker-card--trycalculatingnow { --picker-accent: #fbbf24; }
html[data-theme='dark'] .tool-picker-card--trytokka { --picker-accent: #34d399; }

/* Glass panels on the dark haven field */
.tool-picker--on-hero .tool-picker-card--tryquickimg { --picker-accent: #a78bfa; }
.tool-picker--on-hero .tool-picker-card--trydevsnip { --picker-accent: #38bdf8; }
.tool-picker--on-hero .tool-picker-card--trycalculatingnow { --picker-accent: #fbbf24; }
.tool-picker--on-hero .tool-picker-card--trytokka { --picker-accent: #34d399; }

/* Glass panels on the night haven field (hero is locked dark in both themes) */
.tool-picker--on-hero .tool-picker-card {
  background:
    linear-gradient(
      155deg,
      color-mix(in srgb, var(--picker-accent, var(--brand)) 18%, transparent) 0%,
      color-mix(in srgb, #fff 7%, transparent) 42%,
      color-mix(in srgb, var(--panel) 28%, transparent) 100%
    );
  border-color: color-mix(in srgb, #fff 16%, transparent);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #fff 16%, transparent),
    0 12px 32px -16px rgba(0, 0, 0, 0.55);
}

.tool-picker--on-hero .tool-picker-card:hover,
.tool-picker--on-hero .tool-picker-card:focus-visible {
  background:
    linear-gradient(
      155deg,
      color-mix(in srgb, var(--picker-accent, var(--brand)) 24%, transparent) 0%,
      color-mix(in srgb, #fff 10%, transparent) 45%,
      color-mix(in srgb, var(--panel) 32%, transparent) 100%
    );
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #fff 20%, transparent),
    0 16px 36px -14px color-mix(in srgb, var(--picker-accent, var(--brand)) 40%, transparent),
    0 0 0 1px color-mix(in srgb, var(--picker-accent, var(--brand)) 22%, transparent);
}

/* Full-bleed stacked product chapters ? centered, gradient-led */
.product-chapter {
  position: relative;
  display: grid;
  place-items: center;
  min-height: min(62vh, 30rem);
  margin: 0;
  padding: 4.75rem 1.25rem;
  overflow: hidden;
  isolation: isolate;
  --chapter: var(--brand);
  --chapter-dim: var(--brand-dim);
  border: 0;
  border-top: 1px solid color-mix(in srgb, var(--chapter) 16%, transparent);
  box-shadow: none;
  text-align: center;
  background:
    radial-gradient(ellipse 70% 55% at 50% 0%, color-mix(in srgb, var(--chapter) 30%, transparent), transparent 62%),
    radial-gradient(ellipse 55% 60% at 0% 100%, color-mix(in srgb, var(--chapter-dim) 22%, transparent), transparent 55%),
    radial-gradient(ellipse 55% 60% at 100% 85%, color-mix(in srgb, var(--chapter) 18%, transparent), transparent 55%),
    linear-gradient(
      165deg,
      color-mix(in srgb, var(--bg) 45%, #0a0807) 0%,
      color-mix(in srgb, var(--panel) 70%, var(--chapter)) 48%,
      color-mix(in srgb, var(--bg) 78%, #080605) 100%
    );
}

html[data-theme='light'] .product-chapter {
  background:
    radial-gradient(ellipse 70% 55% at 50% 0%, color-mix(in srgb, var(--chapter) 18%, transparent), transparent 62%),
    radial-gradient(ellipse 55% 60% at 0% 100%, color-mix(in srgb, var(--chapter) 12%, transparent), transparent 55%),
    radial-gradient(ellipse 55% 60% at 100% 85%, color-mix(in srgb, var(--chapter-dim) 10%, transparent), transparent 55%),
    linear-gradient(
      165deg,
      color-mix(in srgb, var(--panel) 96%, var(--chapter)) 0%,
      var(--panel) 50%,
      color-mix(in srgb, var(--bg) 80%, var(--chapter)) 100%
    );
  border-top-color: color-mix(in srgb, var(--chapter) 14%, var(--rim));
}

.product-chapter-visual {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.product-chapter-wash {
  position: absolute;
  inset: -10% -5%;
  background:
    radial-gradient(circle at 30% 40%, color-mix(in srgb, var(--chapter) 22%, transparent), transparent 52%),
    radial-gradient(circle at 75% 60%, color-mix(in srgb, var(--chapter-dim) 16%, transparent), transparent 48%);
  opacity: 0.9;
}

.product-chapter-wash--2 {
  inset: auto;
  left: 50%;
  top: 8%;
  width: min(70vw, 34rem);
  height: min(40vw, 18rem);
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, color-mix(in srgb, var(--chapter) 28%, transparent), transparent 70%);
  filter: blur(8px);
  opacity: 0.55;
}

.product-chapter-stage {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;
  width: min(40rem, 100%);
  margin-inline: auto;
  text-align: center;
}

.product-chapter-copy {
  display: grid;
  gap: 0.75rem;
  justify-items: center;
  width: 100%;
  max-width: 36rem;
  text-align: center;
}

.product-chapter-lane {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--chapter);
  text-shadow: 0 0 18px color-mix(in srgb, var(--chapter) 40%, transparent);
}

.product-chapter-name {
  margin: 0;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: clamp(2.2rem, 6vw, 3.6rem);
  line-height: 1;
  letter-spacing: -0.06em;
  font-weight: 800;
  color: var(--ink);
  text-align: center;
}

.product-chapter-line {
  margin: 0;
  max-width: 32rem;
  font-size: clamp(1.02rem, 2.1vw, 1.22rem);
  line-height: 1.5;
  color: var(--muted);
  text-align: center;
}

.product-chapter-rating {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.86rem;
  color: var(--muted);
}

/* The element is always rendered (see gen-site.mjs/gen-static-pages.mjs) so
   functions/_middleware.js always has something to show/update live even at
   0 votes — explicit [hidden] override since the class's own `display:flex`
   would otherwise beat the UA stylesheet's [hidden] rule at equal specificity. */
.product-chapter-rating[hidden] {
  display: none;
}

.hero-product .product-chapter-rating {
  margin-top: 0.6rem;
}

.product-chapter-rating strong {
  color: var(--ink);
  font-weight: 700;
}

.product-chapter-rating-star {
  color: var(--chapter, var(--brand));
}

.product-chapter-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.65rem;
  margin-top: 0.45rem;
}

.product-chapter-icon {
  width: clamp(4.75rem, 11vw, 6.25rem);
  height: auto;
  border-radius: 1.2rem;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--chapter) 35%, transparent),
    0 0 36px color-mix(in srgb, var(--chapter) 28%, transparent),
    0 14px 32px rgb(0 0 0 / 0.3);
  transition: transform 0.35s var(--ease, ease), box-shadow 0.35s var(--ease, ease);
}

.product-chapter:hover .product-chapter-icon {
  transform: translateY(-4px) scale(1.04);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--chapter) 55%, transparent),
    0 0 52px color-mix(in srgb, var(--chapter) 40%, transparent),
    0 18px 40px rgb(0 0 0 / 0.36);
}

/* Schematic workshop frames — decorative, not live product UI */
.workshop-peek {
  width: min(100%, 28rem);
  margin: 0.35rem 0 0;
  border-radius: 0.95rem;
  border: 1px solid color-mix(in srgb, var(--chapter) 28%, var(--rim));
  background: color-mix(in srgb, var(--panel) 88%, var(--chapter));
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--chapter) 10%, transparent),
    0 20px 44px rgb(0 0 0 / 0.28);
  overflow: hidden;
  text-align: left;
}

.workshop-peek-chrome {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 2.2rem;
  padding: 0.4rem 0.75rem 0.4rem 0.65rem;
  background: color-mix(in srgb, var(--bg) 72%, var(--panel));
  border-bottom: 1px solid color-mix(in srgb, var(--rim) 85%, var(--chapter));
}

.workshop-peek-dots {
  width: 0.42rem;
  height: 0.42rem;
  flex-shrink: 0;
  margin-right: 1.55rem;
  border-radius: 50%;
  background: #f87171;
  box-shadow: 0.7rem 0 #fbbf24, 1.4rem 0 #34d399;
}

.workshop-peek-url {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: ui-monospace, 'Cascadia Code', 'Segoe UI Mono', monospace;
  font-size: 0.68rem;
  letter-spacing: 0.01em;
  color: var(--faint);
}

.workshop-peek-body {
  display: grid;
  gap: 0.7rem;
  padding: 0.9rem 0.85rem 1rem;
}

.workshop-appbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin: -0.15rem 0 0.15rem;
}

.workshop-appbar span {
  display: inline-flex;
  align-items: center;
  min-height: 1.7rem;
  padding: 0.12rem 0.55rem;
  border-radius: 0.45rem;
  font-size: 0.68rem;
  font-weight: 650;
  color: var(--muted);
  background: color-mix(in srgb, var(--bg) 55%, transparent);
  border: 1px solid color-mix(in srgb, var(--rim) 80%, var(--chapter));
}

.workshop-appbar span.is-on {
  color: var(--ink);
  background: color-mix(in srgb, var(--chapter) 18%, var(--panel));
  border-color: color-mix(in srgb, var(--chapter) 42%, var(--rim));
}

.workshop-slider {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.68rem;
  font-weight: 650;
  color: var(--muted);
}

.workshop-slider-track {
  position: relative;
  height: 0.35rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--rim) 70%, var(--bg));
}

.workshop-slider-thumb {
  position: absolute;
  top: 50%;
  left: 62%;
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 50%;
  translate: -50% -50%;
  background: var(--chapter);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--chapter) 22%, transparent);
}

.workshop-split {
  display: grid;
  gap: 0.45rem;
}

@media (min-width: 28rem) {
  .workshop-split {
    grid-template-columns: 1fr 1fr;
  }
}

.workshop-code--out {
  color: color-mix(in srgb, var(--chapter) 40%, #bbf7d0);
}

.workshop-fields {
  display: grid;
  gap: 0.4rem;
}

.workshop-fields label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 2.2rem;
  padding: 0.35rem 0.65rem;
  border-radius: 0.5rem;
  border: 1px solid color-mix(in srgb, var(--rim) 80%, var(--chapter));
  background: color-mix(in srgb, var(--bg) 50%, transparent);
  font-size: 0.72rem;
  color: var(--muted);
}

.workshop-fields label span {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.92rem;
  font-weight: 750;
  color: var(--ink);
}

.workshop-dash-head .workshop-scout-kicker {
  text-align: left;
  margin: 0;
}

.workshop-dash-status {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 650;
  color: var(--chapter);
}

.workshop-providers {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.45rem;
}

.workshop-providers li {
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.68rem;
  font-weight: 650;
  color: var(--muted);
}

.workshop-bar--sm {
  height: 0.32rem;
}

.workshop-bar-fill--a { width: 78%; }
.workshop-bar-fill--b { width: 54%; }
.workshop-bar-fill--c { width: 31%; }

.workshop-drop {
  display: grid;
  justify-items: center;
  gap: 0.28rem;
  padding: 1.15rem 0.75rem;
  border-radius: 0.7rem;
  border: 1.5px dashed color-mix(in srgb, var(--chapter) 45%, var(--rim));
  background: color-mix(in srgb, var(--bg) 45%, transparent);
}

.workshop-drop-mark {
  width: 1.35rem;
  height: 1.35rem;
  margin-bottom: 0.15rem;
  border-radius: 0.3rem;
  background:
    linear-gradient(var(--chapter), var(--chapter)) center / 0.14rem 0.7rem no-repeat,
    linear-gradient(var(--chapter), var(--chapter)) center / 0.7rem 0.14rem no-repeat;
}

.workshop-drop-title,
.workshop-calc-kicker,
.workshop-scout-kicker {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 650;
  color: var(--ink);
}

.workshop-drop-meta,
.workshop-calc-meta,
.workshop-scout-line,
.workshop-scout-meta {
  margin: 0;
  font-size: 0.72rem;
  line-height: 1.4;
  color: var(--muted);
  text-align: center;
}

.workshop-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0;
  justify-content: center;
}

.workshop-chips span {
  display: inline-flex;
  align-items: center;
  min-height: 1.65rem;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--chapter) 32%, var(--rim));
  background: color-mix(in srgb, var(--chapter) 12%, var(--panel));
  font-size: 0.68rem;
  font-weight: 650;
  color: var(--ink);
}

.workshop-code {
  margin: 0;
  padding: 0.7rem 0.8rem;
  border-radius: 0.55rem;
  background: color-mix(in srgb, var(--bg) 70%, #000);
  color: color-mix(in srgb, var(--chapter) 55%, #e2e8f0);
  font-family: ui-monospace, 'Cascadia Code', 'Segoe UI Mono', monospace;
  font-size: 0.78rem;
  line-height: 1.45;
  overflow: auto;
}

.workshop-calc-kicker,
.workshop-scout-kicker {
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.68rem;
  color: var(--chapter);
  text-align: center;
}

.workshop-calc-value {
  margin: 0;
  text-align: center;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 2.4rem;
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 1;
  color: var(--ink);
}

.workshop-scout-line {
  text-align: left;
}

.workshop-bar {
  height: 0.45rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--rim) 70%, var(--bg));
  overflow: hidden;
}

.workshop-bar-fill {
  display: block;
  width: 62%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--chapter-dim), var(--chapter));
}

.workshop-scout-meta {
  text-align: left;
}

@media (min-width: 64rem) {
  .product-chapter {
    min-height: min(68vh, 34rem);
    padding-block: 4.25rem;
  }

  .product-chapter-stage {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(22rem, 28rem);
    align-items: center;
    justify-items: stretch;
    gap: 2rem 3.25rem;
    width: min(72rem, 100%);
    text-align: left;
  }

  .product-chapter-copy {
    justify-items: start;
    text-align: left;
    max-width: none;
  }

  .product-chapter-name,
  .product-chapter-line {
    text-align: left;
  }

  .product-chapter-actions {
    justify-content: flex-start;
  }

  .workshop-peek {
    margin: 0;
    width: 100%;
  }

  .product-chapter--trydevsnip .workshop-peek,
  .product-chapter--trytokka .workshop-peek {
    order: -1;
  }
}

/* === PRODUCT CHAPTERS:BEGIN === */
/* Product chapter accents — from theme/tokens.json */
.product-chapter--tryquickimg { --chapter: #6d28d9; --chapter-dim: #5b21b6; }
.product-chapter--trydevsnip { --chapter: #0369a1; --chapter-dim: #075985; }
.product-chapter--trycalculatingnow { --chapter: #b45309; --chapter-dim: #92400e; }
.product-chapter--trytokka { --chapter: #047857; --chapter-dim: #065f46; }

html[data-theme='dark'] .product-chapter--tryquickimg { --chapter: #a78bfa; --chapter-dim: #8b5cf6; }
html[data-theme='dark'] .product-chapter--trydevsnip { --chapter: #38bdf8; --chapter-dim: #0ea5e9; }
html[data-theme='dark'] .product-chapter--trycalculatingnow { --chapter: #fbbf24; --chapter-dim: #d97706; }
html[data-theme='dark'] .product-chapter--trytokka { --chapter: #34d399; --chapter-dim: #10b981; }
/* === PRODUCT CHAPTERS:END === */

.product-chapter .btn-primary {
  background: linear-gradient(145deg, var(--chapter-dim), var(--chapter));
  color: #fff;
  border-color: transparent;
  box-shadow: 0 0 24px color-mix(in srgb, var(--chapter) 28%, transparent);
}

html[data-theme='dark'] .product-chapter--trycalculatingnow .btn-primary,
html[data-theme='dark'] .product-chapter--trydevsnip .btn-primary,
html[data-theme='dark'] .product-chapter--tryquickimg .btn-primary,
html[data-theme='dark'] .product-chapter--trytokka .btn-primary {
  color: #0c1924;
}

.product-chapter .btn-ghost {
  border-color: color-mix(in srgb, var(--chapter) 40%, var(--rim));
  background: color-mix(in srgb, var(--panel) 55%, transparent);
}

.product-chapter .btn-ghost:hover {
  border-color: color-mix(in srgb, var(--chapter) 65%, var(--rim));
  color: var(--ink);
}

@media (prefers-reduced-motion: reduce) {
  .product-chapter:hover .product-chapter-icon {
    transform: none;
  }
}

.product-hero-lockup {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  flex-wrap: wrap;
}

.product-hero-icon {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 0.9rem;
  flex-shrink: 0;
  display: block;
}

.product-hero-lockup h1 {
  margin: 0;
}

.card--product {
  gap: 0.4rem;
}

.card-icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.65rem;
  margin-bottom: 0.25rem;
}

.product-about-list {
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 0;
  display: grid;
  gap: 1rem;
}

@media (min-width: 48rem) {
  .product-about-list {
    grid-template-columns: 1fr 1fr;
    gap: 0 2rem;
  }

  .product-about-item:nth-last-child(2) {
    border-bottom: 1px solid var(--rim);
  }
}

.product-about-item {
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
  padding: 1rem 0;
  border-top: 1px solid var(--rim);
}

.product-about-item:last-child {
  border-bottom: 1px solid var(--rim);
}

.product-about-icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.65rem;
  flex-shrink: 0;
}

.product-about-name {
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.product-about-tag {
  margin: 0.2rem 0 0.35rem;
  font-size: 0.92rem;
  color: var(--muted);
}

.home-human {
  padding: 5rem 0 5.5rem;
  text-align: center;
  background:
    radial-gradient(ellipse 60% 50% at 50% 0%, var(--glow), transparent 65%),
    var(--bg);
}

.home-human-inner {
  max-width: 36rem;
}

.home-human-lead {
  margin: 1.1rem auto 0;
  font-size: 1.1rem;
  color: var(--muted);
}

.home-human-mail {
  margin: 1.5rem 0 0;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.home-notes {
  padding: 4.5rem 0 4rem;
  border-top: 1px solid color-mix(in srgb, var(--rim) 80%, transparent);
  background: color-mix(in srgb, var(--panel) 78%, var(--bg));
  scroll-margin-top: 4.5rem;
}

.home-notes-intro {
  max-width: 36rem;
  margin: 0 auto 2rem;
  text-align: center;
}

.home-notes-lead {
  margin: 0.85rem auto 0;
  font-size: 1.05rem;
  color: var(--muted);
}

.home-notes-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1rem;
}

@media (min-width: 800px) {
  .home-notes-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.15rem;
  }
}

.home-note-card {
  margin: 0;
  min-height: 100%;
}

.home-note-card a {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.55rem;
  height: 100%;
  padding: 1.35rem 1.3rem;
  border-radius: var(--radius-lg, 1.25rem);
  border: 1px solid var(--rim);
  background: var(--panel);
  color: var(--ink);
  transition:
    transform 0.22s var(--ease, ease),
    border-color 0.22s var(--ease, ease),
    box-shadow 0.22s var(--ease, ease);
}

.home-note-card a:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--brand) 40%, var(--rim));
  box-shadow: var(--shadow);
  color: var(--ink);
}

.home-note-date {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
}

.home-note-title {
  margin: 0;
  font-size: 1.08rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.3;
  color: inherit;
}

.home-note-card a:hover .home-note-title {
  color: var(--brand);
}

.home-note-summary {
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--muted);
  flex: 1 1 auto;
}

.home-note-cta {
  margin-top: 0.35rem;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--brand);
}

.home-notes-more {
  margin: 1.75rem 0 0;
  text-align: center;
}

html.js-reveal [data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 0.7s ease,
    transform 0.7s ease;
}

html.js-reveal [data-reveal].is-in {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .cinema-brand,
  .cinema-hero-logo,
  .cinema-promise,
  .cinema-cta,
  .cinema-trust,
  .cinema-hero-drift,
  .cinema-hero-character,
  .family-orbit-tile,
  .flagship-family-tile {
    animation: none;
  }

  html.js-reveal [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .product-tile:hover,
  .card:hover,
  .btn:hover {
    transform: none;
  }

  .btn.cinema-cta-punch:hover {
    transform: none;
  }
}

/* keep older .lead strong override removed conflict ? brand-tinted strong for product pages */
.hero-product .lead strong {
  color: var(--brand);
}

.muted-inline {
  color: var(--muted);
  font-size: 0.9em;
}

.eyebrow {
  margin: 0;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
}

.pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.25rem;
}

.pill {
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  border: 1px solid var(--rim);
  background: color-mix(in srgb, var(--panel) 88%, transparent);
  font-size: 0.75rem;
  color: var(--muted);
}

.section-title {
  margin: 2rem 0 1rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
}

.grid {
  display: grid;
  gap: 0.85rem;
}

@media (min-width: 640px) {
  .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.card {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 1.15rem 1.2rem;
  border-radius: var(--radius-lg, 1.25rem);
  border: 1px solid transparent;
  background: var(--panel);
  color: inherit;
  transition:
    transform 0.22s var(--ease, ease),
    background 0.22s var(--ease, ease),
    box-shadow 0.22s var(--ease, ease);
}

.card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
  background: color-mix(in srgb, var(--panel) 88%, var(--brand));
}

.card-name {
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.card-blurb {
  font-size: 0.85rem;
  color: var(--muted);
}

.panel {
  margin-top: 1.75rem;
  padding: 1.5rem 0 0;
  border-radius: 0;
  border: 0;
  border-top: 1px solid var(--rim);
  background: transparent;
}

/* Status board — card rows aligned with Try product /status pages */
.status-page {
  max-width: none;
  margin: 0;
  padding: 1.5rem 0 3rem;
}

.status-page-hero {
  text-align: center;
}

.status-page-hero .eyebrow {
  margin-bottom: 0.5rem;
}

.status-page-hero h1 {
  margin: 0;
  font-size: clamp(1.75rem, 4vw, 2.35rem);
  letter-spacing: -0.03em;
}

.status-page-lead {
  margin: 0.85rem auto 0;
  max-width: 34rem;
  font-size: 0.95rem;
  color: var(--muted);
  line-height: 1.55;
}

.status-banner {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 1.25rem auto 0;
  padding: 0.55rem 0.95rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, #16a34a 28%, var(--rim));
  background: color-mix(in srgb, #16a34a 10%, var(--panel));
  color: color-mix(in srgb, #15803d 70%, var(--ink));
  font-size: 0.8rem;
  font-weight: 650;
}

.status-dot {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
  background: #16a34a;
  flex-shrink: 0;
}

.status-block {
  margin-top: 2rem;
}

.status-block h2 {
  margin: 0 0 0.35rem;
  font-size: 1.05rem;
  color: var(--ink);
}

.status-block-intro {
  margin: 0 0 0.85rem;
  font-size: 0.85rem;
  color: var(--muted);
  line-height: 1.5;
}

.status-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.65rem;
}

.status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1rem;
  border-radius: var(--radius, 0.85rem);
  border: 1px solid var(--rim);
  background: var(--panel);
}

.status-row-name {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 650;
  color: var(--ink);
}

.status-row-name a {
  color: inherit;
  text-decoration: none;
}

.status-row-name a:hover {
  color: var(--brand, var(--ink));
  text-decoration: underline;
}

.status-row-desc {
  margin: 0.2rem 0 0;
  font-size: 0.75rem;
  color: var(--muted);
  line-height: 1.45;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex-shrink: 0;
  font-size: 0.75rem;
  font-weight: 650;
  color: color-mix(in srgb, #15803d 75%, var(--ink));
  white-space: nowrap;
}

.status-note {
  margin-top: 1.75rem;
  padding: 1rem 1.1rem;
  border-radius: var(--radius, 0.85rem);
  border: 1px solid var(--rim);
  background: var(--panel);
}

.status-note-title {
  margin: 0 0 0.4rem;
  font-size: 0.9rem;
  color: var(--ink);
}

.status-note p {
  margin: 0;
  font-size: 0.8rem;
  color: var(--muted);
  line-height: 1.55;
}

.status-footer-links {
  margin: 1.75rem 0 0;
  text-align: center;
  font-size: 0.8rem;
  color: var(--muted);
}

.status-footer-links a {
  color: var(--brand, var(--ink));
}

@media (max-width: 560px) {
  .status-row {
    flex-direction: column;
    align-items: flex-start;
  }
}

.rate-widget {
  margin-top: 1rem;
  padding: 1.1rem 1.3rem;
  border-radius: var(--radius, 0.85rem);
  border: 1px solid var(--rim);
  background: var(--panel);
  max-width: 26rem;
}

.rate-widget-prompt {
  margin: 0;
  font-weight: 600;
  color: var(--ink);
}

.rate-widget-current {
  margin: 0.3rem 0 0;
  font-size: 0.85rem;
  color: var(--muted);
  min-height: 1.2em;
}

.rate-widget-buttons {
  display: flex;
  gap: 0.15rem;
  margin-top: 0.75rem;
}

.rate-widget-star {
  background: none;
  border: none;
  padding: 2px;
  min-width: 2.75rem;
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: color-mix(in srgb, var(--muted) 45%, transparent);
  line-height: 0;
}

.rate-widget-star svg {
  fill: currentColor;
}

.rate-widget-star:hover,
.rate-widget-star:focus-visible,
.rate-widget-star.is-preview,
.rate-widget-star.is-filled {
  color: light-dark(#b45309, #fbbf24);
}

.rate-widget-star:disabled {
  cursor: default;
}

.rate-widget-status {
  margin: 0.5rem 0 0;
  font-size: 0.85rem;
  color: var(--muted);
}

.panel h2 {
  margin: 0 0 0.65rem;
  font-size: clamp(1.25rem, 2.5vw, 1.55rem);
  letter-spacing: -0.03em;
  font-weight: 700;
  color: var(--ink);
}

.panel p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--muted);
}

.newsletter-form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1rem;
}

.newsletter-form input[type='email'] {
  flex: 1 1 16rem;
  min-height: 2.75rem;
  padding: 0.5rem 0.85rem;
  border: 1px solid var(--rim);
  border-radius: 0.5rem;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
}

.newsletter-form input[type='email']:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

.newsletter-note {
  margin-top: 0.6rem;
  font-size: 0.85rem;
  color: var(--muted);
}

.feature-list {
  margin: 1rem 0 0;
  padding-left: 1.15rem;
  color: var(--muted);
  font-size: 0.98rem;
}

.feature-list li + li {
  margin-top: 0.5rem;
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.72rem 1.2rem;
  border-radius: var(--radius, 0.85rem);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  border: 1px solid transparent;
  transition:
    transform 0.18s var(--ease, ease),
    background 0.18s var(--ease, ease),
    border-color 0.18s var(--ease, ease),
    color 0.18s var(--ease, ease),
    opacity 0.18s var(--ease, ease);
}

.btn:hover {
  transform: scale(1.02);
}

.btn-primary {
  background: var(--brand);
  color: var(--on-brand);
}

.btn-primary:hover {
  color: var(--on-brand);
  filter: brightness(1.06);
}

.btn-sm {
  padding: 0.48rem 0.95rem;
  font-size: 0.8rem;
}

.btn-ghost {
  border-color: color-mix(in srgb, var(--rim) 80%, var(--ink));
  color: var(--ink);
  background: transparent;
}

.btn-ghost:hover {
  color: var(--ink);
  background: color-mix(in srgb, var(--ink) 6%, transparent);
  border-color: var(--ink);
}

.social {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: 2rem;
  font-size: 0.85rem;
}

.social a {
  color: var(--faint);
}

.social a:hover {
  color: var(--ink);
}

/* Site footer ? Apple-like clean columns */
.site-footer {
  margin-top: auto;
  border-top: 1px solid var(--rim);
  background: color-mix(in srgb, var(--panel) 70%, var(--bg));
}

.site-footer-inner {
  width: 100%;
  max-width: var(--content-app);
  margin-inline: auto;
  padding: 3.25rem var(--content-pad) 1.75rem;
}

.site-footer-grid {
  display: grid;
  gap: 2rem 1.5rem;
}

@media (min-width: 40rem) {
  .site-footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 64rem) {
  .site-footer-grid {
    grid-template-columns: minmax(12rem, 1.35fr) repeat(4, minmax(0, 1fr));
  }
}

.site-footer-brand {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.footer-brand-lockup {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.55rem;
  color: var(--ink);
  text-decoration: none;
  transition: opacity 0.15s ease, filter 0.15s ease;
}

.footer-brand-lockup:hover {
  color: var(--ink);
  opacity: 0.95;
  filter: brightness(1.06);
}

.footer-brand-mark {
  width: 1.5rem;
  height: auto;
  aspect-ratio: 232.7 / 209.2;
  border-radius: 0;
  display: block;
  color: var(--ink);
}

.footer-brand-wordmark {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.06em;
}

.footer-brand-tagline {
  margin: 0;
  max-width: 20rem;
  font-size: 0.75rem;
  line-height: 1.55;
}

.footer-brand-tagline-head {
  display: block;
  font-weight: 600;
  color: var(--brand);
}

.footer-brand-tagline-sub {
  display: block;
  margin-top: 0.15rem;
  color: color-mix(in srgb, var(--muted) 86%, transparent);
}

.footer-brand-meta,
.footer-brand-parent {
  margin: 0;
  font-size: 0.75rem;
  color: color-mix(in srgb, var(--muted) 82%, transparent);
}

.footer-brand-parent strong {
  color: var(--ink);
  font-weight: 600;
}

.footer-social {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  padding-top: 0.1rem;
}

.footer-social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  min-height: 2.75rem;
  color: color-mix(in srgb, var(--muted) 70%, transparent);
  transition: color 0.15s ease, transform 0.15s ease;
}

.footer-social-link:hover {
  color: var(--brand);
  transform: translateY(-1px);
}

.footer-heading {
  margin: 0;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
}

.footer-heading--nested {
  margin-top: 1.35rem;
}

.footer-list {
  margin: 0.85rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.45rem;
}

.footer-link {
  display: inline-flex;
  align-items: center;
  min-height: 2.5rem;
  padding: 0.2rem 0;
  color: var(--muted);
  text-decoration: none;
  font-size: 0.85rem;
  transition: color 0.15s ease;
}

.footer-link:hover {
  color: var(--brand);
}

.footer-link-strong {
  font-weight: 600;
  color: var(--ink);
}

.site-footer-family {
  margin-top: 2.25rem;
  padding-top: 1.75rem;
  border-top: 1px solid color-mix(in srgb, var(--rim) 85%, transparent);
}

.footer-family-note {
  margin: 0.5rem 0 0;
  max-width: 36rem;
  font-size: 0.75rem;
  color: var(--muted);
}

.footer-family-list {
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.65rem;
}

@media (min-width: 640px) {
  .footer-family-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 900px) {
  .footer-family-list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.footer-family-card {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto auto;
  column-gap: 0.7rem;
  row-gap: 0.12rem;
  align-items: start;
  height: 100%;
  padding: 0.85rem 1rem;
  border-radius: 0.85rem;
  border: 1px solid var(--rim);
  background: color-mix(in srgb, var(--panel) 88%, transparent);
  text-decoration: none;
  transition:
    transform 0.18s var(--ease, ease),
    border-color 0.18s ease,
    box-shadow 0.22s ease;
}

.footer-family-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--brand) 40%, var(--rim));
  box-shadow: var(--shadow);
}

.footer-family-icon {
  grid-row: 1 / span 3;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 0.45rem;
  margin-top: 0.1rem;
}

.footer-family-name {
  font-weight: 600;
  color: var(--brand);
  font-size: 0.9rem;
}

.footer-family-blurb {
  font-size: 0.75rem;
  color: var(--muted);
  line-height: 1.4;
}

.footer-family-dest {
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: color-mix(in srgb, var(--muted) 90%, transparent);
}

.site-footer-bar {
  margin-top: 1.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid color-mix(in srgb, var(--rim) 80%, transparent);
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  align-items: flex-start;
  font-size: 0.75rem;
  color: var(--muted);
}

.site-footer-bar p {
  margin: 0;
}

@media (min-width: 640px) {
  .site-footer-bar {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

.site-footer-bar-note {
  opacity: 0.85;
}

/* Theme switch ? Light / Dark / System (utility-site pattern) */
.theme-switch {
  position: relative;
  z-index: 2;
  isolation: isolate;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: stretch;
  gap: 0;
  padding: 4px;
  border-radius: 9999px;
  background: var(--panel);
  border: 1px solid var(--rim);
  box-shadow: inset 0 1px 2px color-mix(in srgb, var(--ink) 6%, transparent);
  flex-shrink: 0;
  align-self: center;
}

.theme-switch--pending {
  pointer-events: none;
}

.theme-switch--ready {
  pointer-events: auto;
}

.theme-switch--compact .theme-switch-btn {
  min-height: 2.75rem;
  min-width: 2.75rem;
  padding: 0.4rem 0.55rem;
}

.theme-switch-btn {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 2.75rem;
  min-width: 2.75rem;
  padding: 0.4rem 0.55rem;
  border-radius: 9999px;
  font: inherit;
  color: var(--muted);
  cursor: pointer;
  touch-action: manipulation;
  border: 1px solid transparent;
  background: transparent;
  transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.theme-switch-btn:hover {
  color: var(--ink);
}

.theme-switch-btn[aria-pressed='true'] {
  color: var(--brand);
  background: color-mix(in srgb, var(--brand) 14%, var(--panel));
  border-color: color-mix(in srgb, var(--brand) 28%, var(--rim));
  box-shadow: 0 1px 2px color-mix(in srgb, var(--ink) 8%, transparent);
}

.theme-switch-icon {
  display: block;
  width: 1.125rem;
  height: 1.125rem;
  flex-shrink: 0;
  color: inherit;
  pointer-events: none;
}

/* Long-form marketing content */
.panel-intro {
  margin: 0 0 1rem;
  font-size: 0.9rem;
  color: var(--muted);
}

.capability-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}

@media (min-width: 640px) {
  .capability-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.capability-card {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.85rem 1rem;
  border-radius: 0.75rem;
  border: 1px solid var(--rim);
  background: color-mix(in srgb, var(--panel) 90%, transparent);
  text-decoration: none;
  color: inherit;
  transition:
    border-color 0.15s ease,
    background 0.15s ease,
    transform 0.15s ease;
}

a.capability-card:hover {
  border-color: color-mix(in srgb, var(--brand) 45%, var(--rim));
  background: color-mix(in srgb, var(--brand) 8%, var(--panel));
}

.capability-name {
  font-weight: 600;
  color: var(--brand);
}

.capability-blurb {
  font-size: 0.85rem;
  color: var(--muted);
}

.cta-band {
  margin: 2rem 0;
  padding: 1.35rem 1.4rem;
  border-radius: 1rem;
  border: 1px solid color-mix(in srgb, var(--brand) 35%, var(--rim));
  background: color-mix(in srgb, var(--brand) 10%, var(--panel));
}

.post-header .cta-band {
  margin: 1rem 0 0;
}

.cta-band-title {
  margin: 0 0 0.35rem;
  font-weight: 700;
  font-size: 1.05rem;
}

.cta-band-copy {
  margin: 0 0 1rem;
  font-size: 0.9rem;
  color: var(--muted);
}

.faq-list {
  margin: 0.85rem 0 0;
}

.faq-item {
  padding: 0.85rem 0;
  border-top: 1px solid var(--rim);
}

.faq-item:last-child {
  border-bottom: 1px solid var(--rim);
}

.faq-item dt {
  font-weight: 600;
  color: var(--ink);
}

.faq-item dd {
  margin: 0.35rem 0 0;
  color: var(--muted);
  font-size: 0.95rem;
}

.prose {
  max-width: 42rem;
  font-size: 1.02rem;
  color: var(--muted);
}

.prose p,
.prose ul {
  margin: 0 0 1rem;
}

.prose li + li {
  margin-top: 0.35rem;
}

.prose strong {
  color: var(--ink);
}

.post-header {
  margin-bottom: 1.5rem;
}

.post-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1rem;
}

.post-list-card,
.post-list > li {
  padding: 1rem 1.1rem;
  border-radius: 0.85rem;
  border: 1px solid var(--rim);
  background: var(--panel);
}

.post-list-title {
  font-weight: 700;
  color: var(--brand);
}

.post-list-meta {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.75rem;
  color: var(--faint);
}

.post-list-summary {
  margin: 0.4rem 0 0;
  font-size: 0.9rem;
  color: var(--muted);
}

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.5rem;
}

.chip {
  font-size: 0.7rem;
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
  border: 1px solid var(--rim);
  color: var(--muted);
  background: color-mix(in srgb, var(--surface) 80%, transparent);
}

/* ---------- Product hub skins (match official .com brand colors) ---------- */
/* TryQuickImg violet | TryDevSnip sky | TryCalculatingNow amber | TryTokka emerald */

.product-skin {
  --product-glow: color-mix(in srgb, var(--brand) 16%, transparent);
  --product-glow-dim: color-mix(in srgb, var(--brand-dim) 14%, transparent);
}

.product-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

/* The eyebrow style is uppercase by design ("A PRODUCT OF") but the brand
   name itself should read as "Acsaven", not "ACSAVEN" — it's a proper noun,
   not a label. */
.product-eyebrow a {
  text-transform: none;
}

.product-dot {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 999px;
  background: var(--brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 22%, transparent);
  flex-shrink: 0;
}

.product-skin .hero-product .lead strong,
.product-skin .card-name,
.product-skin .capability-name,
.product-skin .cta-band-title {
  color: var(--brand);
}

.product-skin .capability-card:hover,
.product-skin .card:hover {
  border-color: color-mix(in srgb, var(--brand) 45%, var(--rim));
}

.product-skin .btn-primary {
  background: linear-gradient(145deg, var(--brand-dim), var(--brand));
  color: var(--on-brand);
  border-color: transparent;
  box-shadow: 0 0 24px color-mix(in srgb, var(--brand) 28%, transparent);
}

.product-skin .btn-ghost {
  border-color: color-mix(in srgb, var(--brand) 40%, var(--rim));
  background: color-mix(in srgb, var(--panel) 55%, transparent);
}

.product-skin .btn-ghost:hover {
  border-color: color-mix(in srgb, var(--brand) 65%, var(--rim));
  color: var(--ink);
}

.product-skin .cta-band {
  border-color: color-mix(in srgb, var(--brand) 35%, var(--rim));
  background:
    radial-gradient(ellipse 80% 80% at 0% 0%, color-mix(in srgb, var(--brand) 18%, transparent), transparent 55%),
    radial-gradient(ellipse 60% 70% at 100% 100%, color-mix(in srgb, var(--brand-dim) 14%, transparent), transparent 50%),
    var(--panel);
}

/* Full-page brand wash ? same gradient logic as home product chapters */
body.page-product {
  background-color: var(--bg);
  background-image:
    radial-gradient(ellipse 70% 50% at 50% -8%, color-mix(in srgb, var(--brand) 34%, transparent), transparent 62%),
    radial-gradient(ellipse 55% 45% at 0% 35%, color-mix(in srgb, var(--brand-dim) 22%, transparent), transparent 55%),
    radial-gradient(ellipse 50% 40% at 100% 20%, color-mix(in srgb, var(--brand) 18%, transparent), transparent 55%),
    radial-gradient(ellipse 60% 50% at 80% 100%, color-mix(in srgb, var(--brand-dim) 16%, transparent), transparent 58%),
    linear-gradient(
      165deg,
      color-mix(in srgb, var(--bg) 42%, #0a0807) 0%,
      color-mix(in srgb, var(--panel) 62%, var(--brand)) 46%,
      color-mix(in srgb, var(--bg) 78%, #080605) 100%
    );
  background-attachment: fixed;
  min-height: 100vh;
}

html[data-theme='light'] body.page-product {
  background-image:
    radial-gradient(ellipse 70% 50% at 50% -8%, color-mix(in srgb, var(--brand) 20%, transparent), transparent 62%),
    radial-gradient(ellipse 55% 45% at 0% 35%, color-mix(in srgb, var(--brand) 12%, transparent), transparent 55%),
    radial-gradient(ellipse 50% 40% at 100% 20%, color-mix(in srgb, var(--brand-dim) 10%, transparent), transparent 55%),
    radial-gradient(ellipse 60% 50% at 80% 100%, color-mix(in srgb, var(--brand) 10%, transparent), transparent 58%),
    linear-gradient(
      165deg,
      color-mix(in srgb, var(--panel) 92%, var(--brand)) 0%,
      var(--panel) 48%,
      color-mix(in srgb, var(--bg) 78%, var(--brand)) 100%
    );
}

body.page-product .site-header {
  background: color-mix(in srgb, var(--bg) 55%, transparent);
  border-bottom-color: color-mix(in srgb, var(--brand) 18%, var(--rim));
}

body.page-product .wrap {
  background: transparent;
}

/* Shared tokens: body (page glow) + wrap (content accents) */
body.page-product--trydevsnip,
.product-skin--trydevsnip {
  --brand: #0369a1;
  --brand-dim: #075985;
  --accent: #0284c7;
  --on-brand: #ffffff;
  --love: #0369a1;
  --product-glow: color-mix(in srgb, #0369a1 14%, transparent);
}

html[data-theme='dark'] body.page-product--trydevsnip,
html[data-theme='dark'] .product-skin--trydevsnip {
  --brand: #38bdf8;
  --brand-dim: #0ea5e9;
  --accent: #7dd3fc;
  --on-brand: #0c4a6e;
  --love: #38bdf8;
  --product-glow: color-mix(in srgb, #38bdf8 16%, transparent);
}

body.page-product--trycalculatingnow,
.product-skin--trycalculatingnow {
  --brand: #b45309;
  --brand-dim: #92400e;
  --accent: #d97706;
  --on-brand: #ffffff;
  --love: #b45309;
  --product-glow: color-mix(in srgb, #b45309 14%, transparent);
}

html[data-theme='dark'] body.page-product--trycalculatingnow,
html[data-theme='dark'] .product-skin--trycalculatingnow {
  --brand: #fbbf24;
  --brand-dim: #f59e0b;
  --accent: #fcd34d;
  --on-brand: #422006;
  --love: #fbbf24;
  --product-glow: color-mix(in srgb, #fbbf24 16%, transparent);
}

body.page-product--trytokka,
.product-skin--trytokka {
  --brand: #047857;
  --brand-dim: #065f46;
  --accent: #0e7490;
  --on-brand: #ffffff;
  --love: #047857;
  --product-glow: color-mix(in srgb, #047857 14%, transparent);
}

html[data-theme='dark'] body.page-product--trytokka,
html[data-theme='dark'] .product-skin--trytokka {
  --brand: #34e89a;
  --brand-dim: #22c55e;
  --accent: #5af0a8;
  --on-brand: #042014;
  --love: #34e89a;
  --product-glow: color-mix(in srgb, #34e89a 16%, transparent);
}

body.page-product--tryquickimg,
.product-skin--tryquickimg {
  --brand: #6d28d9;
  --brand-dim: #5b21b6;
  --accent: #7c3aed;
  --on-brand: #ffffff;
  --love: #6d28d9;
  --product-glow: color-mix(in srgb, #6d28d9 14%, transparent);
}

html[data-theme='dark'] body.page-product--tryquickimg,
html[data-theme='dark'] .product-skin--tryquickimg {
  --brand: #a78bfa;
  --brand-dim: #8b5cf6;
  --accent: #c4b5fd;
  --on-brand: #1e1b4b;
  --love: #a78bfa;
  --product-glow: color-mix(in srgb, #a78bfa 16%, transparent);
}

html[data-theme='dark'] body.page-product--trycalculatingnow .product-skin .btn-primary,
html[data-theme='dark'] body.page-product--trydevsnip .product-skin .btn-primary,
html[data-theme='dark'] body.page-product--tryquickimg .product-skin .btn-primary {
  color: #0c1924;
}

/* Back to top ? Try family floating control */
.scroll-to-top {
  position: fixed;
  right: max(1rem, env(safe-area-inset-right));
  bottom: calc(1.5rem + env(safe-area-inset-bottom));
  z-index: 55;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: 0.75rem;
  border-radius: 0.75rem;
  border: 1px solid var(--rim);
  background-color: var(--panel);
  color: var(--ink);
  box-shadow: var(--shadow);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px) scale(0.92);
  transition:
    opacity 0.25s ease,
    transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
    visibility 0.25s,
    color 0.15s ease,
    border-color 0.15s ease,
    background-color 0.15s ease;
  pointer-events: none;
}

.scroll-to-top--visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.scroll-to-top--hidden {
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px) scale(0.92);
  pointer-events: none;
}

.scroll-to-top:hover {
  border-color: color-mix(in srgb, var(--brand) 35%, var(--rim));
  color: var(--brand);
  background-color: var(--surface);
}

.scroll-to-top:active {
  transform: translateY(0) scale(0.98);
}

.scroll-to-top--scrolling {
  color: var(--brand);
  border-color: color-mix(in srgb, var(--brand) 35%, var(--rim));
  pointer-events: none;
}

.scroll-to-top--scrolling svg {
  animation: scroll-to-top-launch 1.1s ease-out infinite;
}

@keyframes scroll-to-top-launch {
  0%,
  100% {
    transform: translateY(0);
    opacity: 1;
  }

  50% {
    transform: translateY(-4px);
    opacity: 0.9;
  }
}

@media (prefers-reduced-motion: reduce) {
  .scroll-to-top,
  .scroll-to-top--scrolling svg {
    transition: none;
    animation: none;
  }
}

@media print {
  .scroll-to-top,
  #scroll-to-top {
    display: none !important;
  }
}

/* Branded confirm / alert — replaces browser window.confirm / alert */
.try-confirm-dialog {
  /* Explicit viewport center (UA dialog centering is inconsistent with width:100%). */
  position: fixed;
  inset: 0;
  margin: auto;
  height: fit-content;
  max-height: min(90vh, 40rem);
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--brand) 28%, var(--rim));
  border-radius: var(--radius-lg);
  background: transparent;
  color: var(--ink);
  max-width: min(26rem, calc(100vw - 2rem));
  width: 100%;
  box-shadow: var(--shadow);
}

.try-confirm-dialog::backdrop {
  background: var(--backdrop);
}

.try-confirm-inner {
  position: relative;
  margin: 0;
  padding: 1.4rem 1.35rem 1.2rem;
  background: var(--panel);
  border-radius: inherit;
  overflow: hidden;
}

.try-confirm-accent {
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, var(--brand), color-mix(in srgb, var(--brand) 40%, var(--panel)));
}

.try-confirm-dialog--danger .try-confirm-accent {
  background: linear-gradient(90deg, #dc2626, #f59e0b);
}

.try-confirm-title {
  margin: 0.35rem 0 0.55rem;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--ink);
}

.try-confirm-message {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--muted);
}

.try-confirm-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.65rem;
  margin-top: 1.35rem;
}

.try-confirm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  min-width: 5.5rem;
  padding: 0.55rem 1.1rem;
  border-radius: var(--radius);
  border: 1px solid transparent;
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease;
}

.try-confirm-btn:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

.try-confirm-btn--ghost {
  background: transparent;
  border-color: var(--rim);
  color: var(--ink);
}

.try-confirm-btn--ghost:hover {
  background: color-mix(in srgb, var(--brand) 10%, var(--panel));
  border-color: color-mix(in srgb, var(--brand) 30%, var(--rim));
}

.try-confirm-btn--primary {
  background: var(--brand);
  color: var(--on-brand);
}

.try-confirm-btn--primary:hover {
  background: var(--brand-dim);
}

.try-confirm-btn--danger {
  background: #dc2626;
  color: #fff;
  border-color: #dc2626;
}

.try-confirm-btn--danger:hover {
  background: #b91c1c;
}

.try-confirm-dialog--warning .try-confirm-accent {
  background: linear-gradient(90deg, #d97706, var(--brand));
}

.try-confirm-btn--warning {
  background: #d97706;
  color: #fff;
  border-color: #d97706;
}

.try-confirm-btn--warning:hover {
  background: #b45309;
}

.try-confirm-dialog--info .try-confirm-accent {
  background: linear-gradient(90deg, color-mix(in srgb, var(--brand) 65%, #0384c7), var(--brand));
}

.try-confirm-btn--info {
  background: color-mix(in srgb, var(--brand) 80%, #0384c7);
  color: var(--on-brand);
  border-color: transparent;
}

.try-confirm-btn--info:hover {
  background: var(--brand-dim);
}

@media (prefers-reduced-motion: reduce) {
  .try-confirm-btn {
    transition: none;
  }
}

/* Footer badge row. Sits on its own full-width line (not inside .site-footer-bar,
   which is a flex row shared with the copyright and the nav note) so the badges fit
   one line instead of colliding with the text. Same breakpoints as the Try sites:
   single row from 680px, stacked column on phones. Widths are per-badge because the
   two have different intrinsic ratios (494x148 and 250x54); height stays auto so
   neither is ever stretched. */
.site-footer-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
  margin-top: 1.4rem;
}
.site-footer-badges img {
  width: auto !important;
  height: 40px !important;
  max-height: 40px !important;
  max-width: 100%;
  object-fit: contain;
}
.site-footer-badges .badge-ph,
.site-footer-badges .badge-peerlist,
.site-footer-badges .badge-saashub,
.site-footer-badges .badge-pys {
  width: auto !important;
  height: 40px !important;
  max-height: 40px !important;
}
@media (min-width: 680px) {
  .site-footer-badges {
    flex-wrap: nowrap;
    justify-content: flex-start;
  }
}
@media (max-width: 639px) {
  .site-footer-badges {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.85rem;
  }
}
.site-footer-directory-notes {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.55rem;
  margin-top: 0.7rem;
}
.site-footer-badges-note {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--muted);
}
.site-footer-badges-note-label {
  margin-right: 0.2rem;
}
@media (min-width: 680px) {
  .site-footer-directory-notes {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.45rem 1.75rem;
  }
  .site-footer-badges-note {
    flex: 0 1 auto;
    min-width: 0;
  }
}
@media (max-width: 679px) {
  .site-footer-directory-notes {
    flex-direction: column;
  }
}

/* --- Products menu: "Open the app" vs "Learn on Acsaven" ------------------
   Two labelled groups rather than eight alternating links, so the reader
   chooses a kind of destination first (leave for the tool's own site, or stay
   here and read) and only then a product. Same split in the mobile dialog. */
.nav-products-group-label {
  margin: 0.5rem 0.35rem 0.2rem;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
}
.nav-products-group-label:first-child {
  margin-top: 0.15rem;
}
.nav-products-group {
  display: grid;
  gap: 0.1rem;
}
/* Hairline between the two groups reinforces the split without adding weight. */
.nav-products-group + .nav-products-group-label {
  padding-top: 0.5rem;
  border-top: 1px solid var(--rim);
}

/* Mobile dialog: one-line clarification under a section heading. */
.site-nav-section-note {
  margin: -0.2rem 0.35rem 0.4rem;
  font-size: 0.72rem;
  line-height: 1.35;
  color: var(--muted);
}

/* --- Product hub badge row -------------------------------------------------
   Directory listings on each product's studio page. Widths are per-badge because
   the four have different intrinsic ratios (250x54, 494x148, 300x100, 500x131) —
   a shared rule would distort whichever did not match. Height stays auto. */
.product-badges {
  margin-top: 2rem;
}
.product-badges-note {
  margin: 0.25rem 0 0.9rem;
  font-size: 0.85rem;
  color: var(--muted);
}
.product-badges-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
}
.product-badge {
  display: inline-grid;
  place-items: center start;
  border-bottom: 0;
}
.product-badge .product-badge-img {
  grid-area: 1 / 1;
}
.product-badge:focus-visible {
  outline: 2px solid var(--brand, currentColor);
  outline-offset: 3px;
  border-radius: 6px;
}
.product-badge-img {
  width: auto;
  height: 40px;
  max-height: 40px;
  max-width: 100%;
  object-fit: contain;
}
.product-badge-img--ph,
.product-badge-img--peerlist,
.product-badge-img--saashub,
.product-badge-img--uneed {
  width: auto;
  height: 40px;
  max-height: 40px;
}
/* Text chip for directories that publish no official badge asset. Matches the 40px
   image badges beside it and uses theme tokens, so it holds up in light and dark. */
.product-badge-chip {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.1rem;
  height: 40px;
  padding: 0 0.85rem;
  border: 1px solid var(--border, color-mix(in srgb, var(--ink) 18%, transparent));
  border-radius: 8px;
  background: var(--panel);
  line-height: 1.15;
}
.product-badge-chip__eyebrow {
  font-size: 0.5rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.product-badge-chip__name {
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
}

/* Theme-swapped badge variants (PH / Peerlist / SaaSHub / Uneed). */
.badge-theme--on-dark { display: none !important; }
html[data-theme='dark'] .badge-theme--on-light { display: none !important; }
html[data-theme='dark'] .badge-theme--on-dark { display: inline-block !important; }

/* Product demo list on the watch page — one line per tool, comfortable tap targets. */
.product-demo-list {
  margin: 0.85rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.15rem;
}
.product-demo-list li a {
  display: block;
  min-height: 2.75rem;
  padding: 0.55rem 0.65rem;
  border-radius: 0.5rem;
  border-bottom: 0;
}

/* ── /social/ ───────────────────────────────────────────────────────────────
   Post wall and profile grid. Colours are all existing tokens, so both themes
   follow automatically; nothing here hard-codes a hex.
   The platform badge is a text label rather than a brand logo — an official
   mark would either be a third-party image (banned by check:external) or an
   inlined trademark, and neither is worth it for a chip. */
.social-profiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: 0.7rem;
  margin: 0.4rem 0 1.1rem;
  padding: 0;
  list-style: none;
}

.social-profile {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  height: 100%;
  padding: 0.8rem 0.9rem;
  border: 1px solid var(--rim);
  border-radius: var(--radius);
  background: var(--panel);
  text-decoration: none;
  transition: border-color 0.18s var(--ease), transform 0.18s var(--ease);
}

.social-profile:hover,
.social-profile:focus-visible {
  border-color: var(--brand);
  transform: translateY(-1px);
}

.social-profile-name {
  color: var(--ink);
  font-weight: 650;
  font-size: 0.98rem;
}

.social-profile-handle {
  color: var(--muted);
  font-size: 0.85rem;
}

/* Default is the "Follow" state — an invitation, so it gets the brand colour and an
   arrow that nudges on hover. The muted treatment is reserved for "Posts shown below",
   which is a statement of fact rather than something to act on. */
.social-profile-note {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-top: 0.35rem;
  color: var(--brand);
  font-size: 0.78rem;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.social-profile-note::after {
  /* Literal glyph, not a CSS unicode escape. The escape had to survive a generator,
     a Python string and a shell heredoc on the way here, and one of them read it as
     an octal escape — what shipped was a control character followed by a visible
     "92". A literal character has no layers to lose. */
  content: '→';
  transition: transform 0.18s var(--ease);
}

.social-profile:hover .social-profile-note::after,
.social-profile:focus-visible .social-profile-note::after {
  transform: translateX(3px);
}

.social-profile-note--live {
  color: var(--faint);
  font-weight: 600;
}

.social-profile-note--live::after {
  content: none;
}

.social-note {
  margin: 0.8rem 0 0;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.55;
}

.social-status {
  margin: 0.3rem 0 0.9rem;
  color: var(--muted);
  font-size: 0.92rem;
}

.social-posts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.social-post-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid var(--rim);
  border-radius: var(--radius);
  background: var(--panel);
  text-decoration: none;
  overflow: hidden;
  transition: border-color 0.18s var(--ease), transform 0.18s var(--ease);
}

/* Fixed-ratio well. Reserving the box up front means revealing a thumbnail after load
   never shifts the card below it — the images arrive at different times and a 16:9 hole
   that pops open would reflow the whole grid. */
.social-post-media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--surface);
  overflow: hidden;
}

.social-post-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  transition: opacity 0.25s var(--ease);
}

.social-post-media.is-loaded .social-post-img {
  opacity: 1;
}

.social-post-body {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  flex: 1;
  padding: 0.9rem 1rem;
}

.social-post-link:hover,
.social-post-link:focus-visible {
  border-color: var(--brand);
  transform: translateY(-1px);
}

.social-post-platform {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  align-self: flex-start;
  padding: 0.15rem 0.5rem;
  border: 1px solid var(--rim);
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.social-post-title {
  color: var(--ink);
  font-weight: 600;
  line-height: 1.4;
  /* Feed titles are arbitrary length; clamp so one long title cannot stretch a card. */
  overflow-wrap: anywhere;
}

.social-post-summary {
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.social-post-time {
  margin-top: auto;
  padding-top: 0.2rem;
  color: var(--faint);
  font-size: 0.8rem;
}

@media (prefers-reduced-motion: reduce) {
  .social-profile,
  .social-post-link {
    transition: none;
  }
  .social-profile:hover,
  .social-profile:focus-visible,
  .social-post-link:hover,
  .social-post-link:focus-visible {
    transform: none;
  }
  .social-profile:hover .social-profile-note::after,
  .social-profile:focus-visible .social-profile-note::after {
    transform: none;
  }
}

/* Platform glyphs. Sized in em so they scale with whatever text they sit beside, and
   flex-shrink:0 so a long title can never squash the mark into an ellipse. */
.social-icon {
  width: 1em;
  height: 1em;
  flex-shrink: 0;
}

.social-profile-head {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.social-profile-icon {
  width: 1.05rem;
  height: 1.05rem;
  color: var(--brand);
}

.social-post-platform .social-icon {
  width: 0.95em;
  height: 0.95em;
}

/* Trailing "visit profile" cards for the platforms with no readable feed.
   Deliberately distinguishable from a real post: dashed edge, the platform glyph where a
   thumbnail would be, and no timestamp. Someone scanning the wall should be able to tell
   at a glance that these are an invitation, not something we published. */
.social-post--follow .social-post-link {
  border-style: dashed;
  background: transparent;
}

.social-post--follow .social-post-link:hover,
.social-post--follow .social-post-link:focus-visible {
  border-style: solid;
  background: var(--panel);
}

.social-post-media--glyph {
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--brand) 8%, transparent);
}

.social-follow-glyph {
  width: 2.4rem;
  height: 2.4rem;
  color: var(--brand);
  opacity: 0.85;
}

.social-follow-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-top: auto;
  padding-top: 0.35rem;
  color: var(--brand);
  font-size: 0.82rem;
  font-weight: 650;
}

.social-follow-cta::after {
  content: '→';
  transition: transform 0.18s var(--ease);
}

.social-post--follow .social-post-link:hover .social-follow-cta::after,
.social-post--follow .social-post-link:focus-visible .social-follow-cta::after {
  transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {
  .social-follow-cta::after,
  .social-post--follow .social-post-link:hover .social-follow-cta::after,
  .social-post--follow .social-post-link:focus-visible .social-follow-cta::after {
    transition: none;
    transform: none;
  }
}

/*
 * Email signup status line + free-download row.
 *
 * Reuses .newsletter-form (above) rather than introducing a second form component —
 * the /blog/ signup and the /free/ signup are the same thing and post to the same
 * endpoint. The error state deliberately keeps --ink rather than adding a red token:
 * this theme has no danger colour, an unvalidated one risks the dark-mode contrast
 * problems already fixed once across these sites, and the message states the problem
 * in words, so nothing is conveyed by colour alone.
 */
.newsletter-status {
  flex-basis: 100%;
  margin: 0.15rem 0 0;
  min-height: 1.25rem;
  font-size: 0.88rem;
  color: var(--muted);
}

.newsletter-status.is-error {
  color: var(--ink);
  font-weight: 600;
}

.free-download {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
  margin-top: 1.25rem;
}

.free-download-meta {
  font-size: 0.88rem;
  color: var(--muted);
}

/* --- Free download: hero, sheet preview, homepage card ---------------------- */

.free-hero {
  display: grid;
  gap: 1.75rem;
  align-items: center;
  padding: 2.5rem 0 1.25rem;
}

@media (min-width: 60rem) {
  .free-hero {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: 2.5rem;
  }
}

.free-hero-copy {
  display: grid;
  gap: 1rem;
  max-width: 34rem;
}

.free-download {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
  margin-top: 0.35rem;
}

.free-download-meta {
  font-size: 0.88rem;
  color: var(--muted);
}

/*
 * Mock of the spreadsheet. Marked role="img" with a description rather than exposed as a
 * real table: it is illustrative, and making a screen reader walk fabricated rows to reach
 * the download link would be worse than one honest sentence. Numbers are shown filled in
 * because that is what the sheet looks like in use — the caption says you supply the
 * prices, since the file itself ships with those columns blank on purpose.
 */
.sheet-preview {
  border: 1px solid var(--rim);
  border-radius: var(--radius-lg);
  background: var(--panel);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.sheet-preview-bar {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.6rem 0.85rem;
  border-bottom: 1px solid var(--rim);
  background: var(--surface);
}

.sheet-preview-dot {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--rim);
}

.sheet-preview-name {
  margin-left: 0.35rem;
  font-size: 0.75rem;
  letter-spacing: 0.01em;
  color: var(--faint);
}

/* Wide content scrolls inside its own box so the page body never scrolls sideways. */
.sheet-preview-scroll {
  overflow-x: auto;
}

.sheet-preview table {
  width: 100%;
  min-width: 30rem;
  border-collapse: collapse;
  font-size: 0.78rem;
}

.sheet-preview th,
.sheet-preview td {
  padding: 0.5rem 0.7rem;
  text-align: left;
  white-space: nowrap;
  border-bottom: 1px solid color-mix(in srgb, var(--rim) 60%, transparent);
}

.sheet-preview th {
  font-weight: 600;
  color: var(--faint);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.sheet-preview td {
  color: var(--muted);
}

.sheet-preview .num {
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.sheet-preview .cost {
  color: var(--ink);
  font-weight: 600;
}

.sheet-preview tr:last-child td {
  border-bottom: 0;
}

.sheet-preview-total td {
  background: color-mix(in srgb, var(--brand) 8%, transparent);
  color: var(--ink);
  font-weight: 600;
}

.sheet-preview-caption {
  margin: 0.6rem 0 0;
  font-size: 0.8rem;
  color: var(--faint);
}

/*
 * Homepage extras: tracker + starter. One grid so they never sit flush, and two
 * distinct skins so they do not read as cloned slabs. Copy is unchanged.
 */
.home-studio-offers {
  padding: 0.5rem 0 3.5rem;
}

.home-studio-offers-grid {
  display: grid;
  gap: 1.75rem;
}

@media (min-width: 54rem) {
  .home-studio-offers-grid {
    gap: 2.25rem;
  }
}

.home-free-card {
  --free-accent: var(--brand);
  position: relative;
  display: grid;
  gap: 1.5rem;
  padding: 1.6rem 1.5rem 1.35rem;
  isolation: isolate;
  border: 1px solid color-mix(in srgb, var(--rim) 85%, transparent);
  border-radius: calc(var(--radius-lg) + 0.15rem);
  background:
    radial-gradient(90% 80% at 100% 0%, color-mix(in srgb, var(--free-accent) 22%, transparent), transparent 58%),
    linear-gradient(180deg, color-mix(in srgb, var(--panel) 88%, transparent), var(--panel));
  box-shadow: var(--shadow);
}

.home-free-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 1.15rem;
  bottom: 1.15rem;
  width: 3px;
  border-radius: 999px;
  background: var(--free-accent);
  z-index: 1;
}

.home-free-card--tracker {
  --free-accent: #34d399;
}

.home-free-card--starter {
  --free-accent: #7dd3fc;
}

html[data-theme='light'] .home-free-card--tracker {
  --free-accent: #047857;
}

html[data-theme='light'] .home-free-card--starter {
  --free-accent: #0369a1;
}

@media (min-width: 54rem) {
  .home-free-card {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    align-items: center;
    gap: 2rem 2.25rem;
    padding: 2rem 2.15rem 1.85rem 2.35rem;
  }

  .home-free-card--starter {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  }

  .home-free-card--starter .home-free-copy {
    order: 2;
  }

  .home-free-card--starter .home-free-visual {
    order: 1;
  }
}

.home-free-copy {
  display: grid;
  gap: 0.75rem;
  position: relative;
  z-index: 1;
}

.home-free-copy h2 {
  margin: 0;
}

.home-free-lead {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}

.home-free-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem 1rem;
  margin-top: 0.35rem;
}

.home-free-actions .btn {
  min-height: 2.75rem;
  min-width: 2.75rem;
}

.home-free-aside {
  margin: 0;
  font-size: 0.85rem;
  color: var(--faint);
}

.home-free-visual {
  position: relative;
  z-index: 1;
  min-width: 0;
}

.home-free-card .sheet-preview,
.home-free-card .cli-preview {
  border-color: color-mix(in srgb, var(--free-accent) 28%, var(--rim));
  border-radius: var(--radius-lg);
  box-shadow:
    0 18px 40px rgb(0 0 0 / 0.35),
    0 0 0 1px color-mix(in srgb, var(--free-accent) 12%, transparent);
}

.home-free-card--starter .cli-ok {
  color: var(--free-accent);
}

.home-free-card .sheet-preview-dot:nth-child(1) {
  background: #ff5f57;
}

.home-free-card .sheet-preview-dot:nth-child(2) {
  background: #febc2e;
}

.home-free-card .sheet-preview-dot:nth-child(3) {
  background: #28c840;
}

@media (min-width: 54rem) {
  .home-free-card--tracker .home-free-visual {
    transform: rotate(-1.6deg) translate(0.35rem, 0.55rem);
  }

  .home-free-card--starter .home-free-visual {
    transform: rotate(1.6deg) translate(-0.2rem, 0.45rem);
  }

  .home-free-card--tracker:hover .home-free-visual,
  .home-free-card--tracker:focus-within .home-free-visual,
  .home-free-card--starter:hover .home-free-visual,
  .home-free-card--starter:focus-within .home-free-visual {
    transform: rotate(0deg) translate(0, 0);
  }

  .home-free-visual {
    transition: transform 0.45s var(--ease, ease);
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-free-card--tracker .home-free-visual,
  .home-free-card--starter .home-free-visual,
  .home-free-card--tracker:hover .home-free-visual,
  .home-free-card--starter:hover .home-free-visual {
    transform: none;
    transition: none;
  }
}

/*
 * Grid items default to min-width:auto, so a child holding an overflow-x:auto box will
 * still refuse to shrink below that box's content width — the scroll container then never
 * engages and the whole PAGE scrolls sideways instead. Measured 123px of body overflow at
 * 375px before this. Same class of defect as the sr-only fieldset one on the Try sites.
 */
.free-hero > *,
.home-free-card > * {
  min-width: 0;
}

/* --- AI spend dashboard (/free/ai-spend-tracker/) ---------------------------
 * Chart colours are separately chosen steps per theme, each validated for >=3:1
 * against the surface it actually draws on (panel #171a20 dark / #fafafa light) —
 * not one hue flipped between modes.
 */
[data-spend-dashboard] {
  --viz-series: #3987e5;
  --viz-area: color-mix(in srgb, #3987e5 20%, transparent);
  --viz-grid: color-mix(in srgb, var(--rim) 75%, transparent);
}

html[data-theme='light'] [data-spend-dashboard] {
  --viz-series: #2a78d6;
  --viz-area: color-mix(in srgb, #2a78d6 14%, transparent);
}

.dash-drop {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1rem;
  padding: 1.1rem;
  border: 1px dashed var(--rim);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface) 45%, transparent);
  transition: border-color 0.18s var(--ease), background 0.18s var(--ease);
}

.dash-drop.is-over {
  border-color: var(--viz-series);
  background: color-mix(in srgb, var(--viz-series) 8%, transparent);
}

.dash-drop input[type='file'] {
  max-width: 100%;
  font: inherit;
  font-size: 0.9rem;
  color: var(--muted);
}

.dash-status {
  margin: 0.75rem 0 0;
  min-height: 1.25rem;
  font-size: 0.88rem;
  color: var(--muted);
}

.dash-status.is-error {
  color: var(--ink);
  font-weight: 600;
}

.dash-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  gap: 0.75rem;
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
}

.dash-tile {
  display: grid;
  gap: 0.25rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--rim);
  border-radius: var(--radius);
  background: var(--panel);
}

.dash-tile-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--faint);
}

/* Proportional figures: tabular-nums makes a standalone number look loose. */
.dash-tile-value {
  font-size: 1.45rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.dash-charts {
  display: grid;
  gap: 1.5rem;
  margin-top: 1.5rem;
}

@media (min-width: 56rem) {
  .dash-charts {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
    align-items: start;
  }
}

.dash-charts > * {
  min-width: 0;
}

.dash-figure {
  margin: 0;
  padding: 1.1rem 1.2rem 1.2rem;
  border: 1px solid var(--rim);
  border-radius: var(--radius-lg);
  background: var(--panel);
}

.dash-figcaption {
  margin-bottom: 0.9rem;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--ink);
}

.dash-bars {
  display: grid;
  gap: 0.7rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.dash-bar-row {
  display: grid;
  grid-template-columns: minmax(4.5rem, 6.5rem) minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.7rem;
}

.dash-bar-name {
  font-size: 0.82rem;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dash-bar-track {
  height: 0.6rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--rim) 55%, transparent);
}

/* 4px rounded data-end, anchored at the baseline. */
.dash-bar-fill {
  display: block;
  height: 100%;
  border-radius: 0 4px 4px 0;
  background: var(--viz-series);
}

.dash-bar-value {
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  font-weight: 600;
}

.dash-chart {
  position: relative;
}

.dash-chart svg {
  display: block;
  width: 100%;
  height: auto;
}

.dash-grid {
  stroke: var(--viz-grid);
  stroke-width: 1;
}

.dash-axis {
  fill: var(--faint);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}

.dash-area {
  fill: var(--viz-area);
}

.dash-line {
  fill: none;
  stroke: var(--viz-series);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.dash-dot {
  fill: var(--viz-series);
  stroke: var(--panel);
  stroke-width: 2;
}

.dash-cross {
  stroke: var(--rim);
  stroke-width: 1;
}

.dash-tip {
  position: absolute;
  z-index: 2;
  display: grid;
  gap: 0.1rem;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--rim);
  border-radius: 0.5rem;
  background: var(--surface);
  box-shadow: var(--shadow);
  pointer-events: none;
  white-space: nowrap;
  font-size: 0.78rem;
}

.dash-tip strong {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.dash-tip span {
  color: var(--faint);
}

.dash-table {
  width: 100%;
  margin-top: 1rem;
  border-collapse: collapse;
  font-size: 0.85rem;
}

.dash-table th,
.dash-table td {
  padding: 0.45rem 0.6rem;
  text-align: left;
  border-bottom: 1px solid color-mix(in srgb, var(--rim) 60%, transparent);
  color: var(--muted);
}

.dash-table .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.dash-table thead th,
.dash-table tfoot th {
  color: var(--ink);
  font-weight: 600;
}

/*
 * .dash-tip sets display:grid and .btn sets display:inline-flex — both are (0,1,0)
 * class selectors, same specificity as the UA's [hidden]{display:none}, and ours load
 * later, so they WIN and the element renders while still marked hidden. Symptom was an
 * empty tooltip pill parked in the corner of the chart and the table toggle showing
 * before any data was loaded. Scoped rather than global so it cannot surprise the rest
 * of the site.
 */
[data-spend-dashboard] [hidden] {
  display: none !important;
}

/* === Store (/store/) ===========================================================
   A shop layout, not an essay: a card grid where every item shows the same four
   things in the same place — what it is, what it costs, what you get, and the one
   button that acts on it. The previous version was five stacked prose sections; a
   visitor could not answer "what can I get and what does it cost" without reading
   all of it.

   Built on the existing card/pill/btn tokens rather than a new visual language, so
   the page still reads as the same site.
   ============================================================================= */

.store-grid {
  display: grid;
  gap: 1rem;
  margin: 0 0 0.5rem;
}

@media (min-width: 46rem) {
  .store-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.store-card {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1.3rem 1.35rem 1.4rem;
  border: 1px solid var(--rim);
  border-radius: var(--radius-lg, 1.25rem);
  background: var(--panel);
  /* min-width:0 so a long word in a blurb cannot push a grid column wider than
     its track and force the whole row to overflow. */
  min-width: 0;
}

/* Only the buyable/downloadable cards lift. A card you cannot act on yet should
   not invite a click it will not reward. */
.store-card:not(.store-card--soon) {
  transition:
    transform 0.22s var(--ease, ease),
    box-shadow 0.22s var(--ease, ease);
}

.store-card:not(.store-card--soon):hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

@media (prefers-reduced-motion: reduce) {
  .store-card:not(.store-card--soon):hover {
    transform: none;
  }
}

.store-card--soon {
  background: color-mix(in srgb, var(--panel) 60%, transparent);
  border-style: dashed;
}

.store-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.store-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.7rem;
  background: color-mix(in srgb, var(--brand) 14%, transparent);
  color: var(--brand);
  flex: none;
}

.store-card-icon svg {
  width: 1.35rem;
  height: 1.35rem;
}

.store-card-name {
  margin: 0.15rem 0 0;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.store-card-blurb {
  margin: 0;
  font-size: 0.92rem;
  color: var(--muted);
}

.store-card-facts {
  list-style: none;
  margin: 0.2rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.35rem;
  font-size: 0.86rem;
  color: var(--muted);
}

.store-card-facts li {
  display: grid;
  grid-template-columns: 1rem 1fr;
  gap: 0.45rem;
  align-items: start;
}

/* margin-top:auto pins the price/CTA row to the bottom so buttons line up across
   cards of different text length. */
.store-card-foot {
  margin-top: auto;
  padding-top: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.store-price {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.store-price--none {
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--faint);
}

.pill--free {
  border-color: color-mix(in srgb, var(--brand) 45%, var(--rim));
  color: var(--brand);
  font-weight: 700;
}

.pill--soon {
  border-style: dashed;
  color: var(--faint);
}

/* The "why we cut two products" reasoning is worth publishing but is not what a
   shopper came for. Collapsed by default: available to anyone who wants it,
   out of the way of everyone else. */
.store-note {
  margin: 1.75rem 0 0;
  border: 1px solid var(--rim);
  border-radius: var(--radius, 0.85rem);
  background: color-mix(in srgb, var(--panel) 55%, transparent);
  padding: 0.9rem 1.1rem;
}

.store-note > summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 0.92rem;
}

.store-note[open] > summary {
  margin-bottom: 0.6rem;
}

.store-note ul {
  margin: 0.5rem 0 0;
  padding-left: 1.1rem;
  display: grid;
  gap: 0.5rem;
  font-size: 0.9rem;
  color: var(--muted);
}

/* One item should not sit in a two-column track — the empty half reads as a card
   that failed to load. Widens the single card instead of stretching it edge to
   edge, so it still looks like a card and not a banner. */
@media (min-width: 46rem) {
  .store-grid--single {
    grid-template-columns: minmax(0, 0.62fr);
  }
}

/* --- Store icons -------------------------------------------------------------
   All inline SVG (check:external fails the build on a third-party asset, which an
   icon font would be) and all aria-hidden — each sits next to text that already
   says the same thing, so announcing them makes a screen reader read every line
   twice. currentColor throughout so one glyph serves both themes.
   ---------------------------------------------------------------------------- */

.store-card-icon--sm {
  width: 1.85rem;
  height: 1.85rem;
  border-radius: 0.5rem;
}

.store-card-icon--sm svg {
  width: 1rem;
  height: 1rem;
}

/* The three real product marks, overlapped like a stack of cards. Recognisable
   from the product sites in a way a generic glyph is not. */
.store-marks {
  display: inline-flex;
  align-items: center;
  flex: none;
}

.store-mark {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 0.5rem;
  background: var(--panel);
  /* Ring in the card's own background colour so the overlap reads as separate
     marks rather than one merged shape. */
  box-shadow: 0 0 0 3px var(--panel);
}

.store-mark + .store-mark {
  margin-left: -0.6rem;
}

.store-card-facts li {
  /* Was a 1rem track for the CSS dot; the icon needs a little more. */
  grid-template-columns: 1.05rem 1fr;
  gap: 0.5rem;
}

.fact-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.05rem;
  height: 1.05rem;
  margin-top: 0.12rem;
  color: var(--brand);
}

.fact-mark svg {
  width: 100%;
  height: 100%;
}

/* Planned features get a dashed ring, not a check. A check on an unbuilt product
   reads as "you get this today". */
.store-card-facts--planned .fact-mark {
  color: var(--faint);
}

.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.05rem;
  height: 1.05rem;
  flex: none;
}

.btn-icon svg {
  width: 100%;
  height: 100%;
}

/* Gap only between the icon and the label, so a leading icon pushes right and a
   trailing icon pushes left without either needing its own margin rule. */
.btn-icon:first-child {
  margin-right: 0.5rem;
}

.btn-icon:last-child {
  margin-left: 0.45rem;
}

.store-note > summary {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

/* list-item marker plus a flex summary would show both the disclosure triangle and
   our icon, misaligned. The [open] rotation is the affordance instead. */
.store-note > summary::-webkit-details-marker {
  display: none;
}

.store-note > summary::marker {
  content: '';
}

.store-note-icon {
  display: inline-flex;
  width: 1.1rem;
  height: 1.1rem;
  flex: none;
  color: var(--brand);
  transition: transform 0.2s var(--ease, ease);
}

.store-note-icon svg {
  width: 100%;
  height: 100%;
}

.store-note[open] > summary .store-note-icon {
  transform: rotate(12deg);
}

@media (prefers-reduced-motion: reduce) {
  .store-note-icon {
    transition: none;
  }
}

.store-notify-heading {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

/* The mark stack must occupy the same height as an .store-card-icon tile (2.5rem).
   Without this the head row is 32px on the marks card and 40px on the icon cards, so
   every element below it sits 8px higher — which defeats the reason this page is a
   grid at all: the same things in the same place across cards. */
.store-marks {
  min-height: 2.5rem;
}

/* --- Paid card ---------------------------------------------------------------
   The one item on the page that takes money, so it gets the only accented rim.
   Everything else stays neutral: if every card is emphasised, none of them is.
   ---------------------------------------------------------------------------- */

.store-card--paid {
  border-color: color-mix(in srgb, var(--brand) 38%, var(--rim));
}

.pill--paid {
  border-color: color-mix(in srgb, var(--brand) 45%, var(--rim));
  background: color-mix(in srgb, var(--brand) 12%, transparent);
  color: var(--brand);
  font-weight: 700;
}

/* A product mark used as the card badge, sized to match .store-card-icon so the
   head row height — and therefore every row below it — stays identical across
   cards whether the badge is a glyph tile, a mark stack or a single mark. */
.store-card-mark {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.7rem;
  flex: none;
}

.store-price--paid {
  color: var(--ink);
}

/* "/month" rides at the price's weight but not its size — the number is what a
   reader scans for. */
.store-price-unit {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--muted);
  margin-left: 0.1rem;
}

/* Consecutive paragraphs inside a panel had no space between them — `.panel p` sets
   margin 0, which was invisible while every panel held a single paragraph. Any page that
   actually explains something (the starter page, /developers/) ran its paragraphs
   together into one block of text.

   `p + p` rather than a blanket margin, so the first paragraph keeps sitting tight under
   its heading and only the gaps BETWEEN paragraphs open up. */
.panel p + p {
  margin-top: 0.9rem;
}

/* Same for a heading that follows a paragraph: without this, an h3 introducing the next
   section starts immediately under the previous sentence. */
.panel p + h3,
.panel ul + h3,
.panel p + h2,
.panel ul + h2 {
  margin-top: 1.75rem;
}

/* --- CLI preview (homepage) --------------------------------------------------
   Companion to .sheet-preview: same chrome bar, monospace body. On the homepage the
   starter card flips this window to the left so the pair is not two identical slabs.
   ---------------------------------------------------------------------------- */
.cli-preview {
  border: 1px solid var(--rim);
  border-radius: var(--radius, 0.85rem);
  background: color-mix(in srgb, var(--bg) 70%, var(--panel));
  overflow: hidden;
  min-width: 0;
}

.cli-preview-body {
  padding: 0.9rem 1rem 1rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.78rem;
  line-height: 1.7;
  /* Long gate lines scroll inside the box rather than widening the grid column and
     pushing the whole card past the viewport. */
  overflow-x: auto;
}

.cli-preview-body p {
  margin: 0;
  white-space: nowrap;
  color: var(--muted);
}

.cli-ok {
  color: var(--brand);
  font-weight: 700;
  margin-right: 0.4rem;
}

.cli-dim {
  color: var(--faint);
}

.cli-total {
  margin-top: 0.5rem !important;
  padding-top: 0.5rem;
  border-top: 1px solid var(--rim);
  color: var(--ink) !important;
  font-weight: 600;
}

/* Install command — the primary call to action on the astro-ops page.
   A developer's next move is `npm i`, not "clone the repo", so the command itself is
   presented as the thing to take rather than buried in prose. Uses the existing rim and
   surface tokens so it stays correct in both themes. */
.install-cmd {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin: 0 0 0.85rem;
  padding: 0.7rem 0.95rem;
  border: 1px solid var(--rim);
  border-radius: 10px;
  background: var(--surface);
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.92rem;
  overflow-x: auto;
}
.install-cmd .prompt { color: var(--muted, #8b95a5); user-select: none; }
.install-cmd code { background: none; padding: 0; font: inherit; color: var(--ink); }
.install-links { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }