/* ARN Smart bar: one thin row above every product header (build-site.cjs, renderArnBar), the same on every site
   (user decision 2026-11-02). build-site.cjs puts this file in front of the product's site.css. The bar scrolls
   away with the page; the product header below it stays sticky. Values are fixed here, not taken from the product's
   variables, so the bar looks the same on all fourteen sites. */
.arn-bar {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: #18191c;
  color: #c9ccd2;
  font: 500 13px/1.2 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

.arn-bar__row {
  display: flex;
  align-items: center;
  gap: 20px;
  max-width: 1440px;
  min-height: 36px;
  margin: 0 auto;
  padding: 0 clamp(16px, 3vw, 32px);
}

.arn-bar a {
  color: #e7e9ec;
  text-decoration: none;
}

.arn-bar a:hover,
.arn-bar a:focus-visible {
  color: #ffffff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.arn-bar__home {
  display: flex;
  flex: none;
}

.arn-bar__home img {
  display: block;
  width: auto;
  height: 18px;
}

.arn-bar__contact {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  border-right: 1px solid rgba(255, 255, 255, 0.18);
  list-style: none;
}

.arn-bar__contact li {
  margin: 0;
  padding: 0 12px;
  border-left: 1px solid rgba(255, 255, 255, 0.18);
  white-space: nowrap;
}

.arn-bar__links {
  display: flex;
  gap: 18px;
  margin-left: auto;
  white-space: nowrap;
}

@media (max-width: 999.98px) {
  .arn-bar__place,
  .arn-bar__extra {
    display: none;
  }
}

@media (max-width: 639.98px) {
  .arn-bar__row {
    gap: 10px;
  }

  .arn-bar__contact li {
    padding: 0 10px;
  }

  .arn-bar__mail {
    display: none;
  }
}

/* The narrowest phones keep the logo (arnsmart.com) and the phone number. */
@media (max-width: 359.98px) {
  .arn-bar__links {
    display: none;
  }
}

/* Visioix mini site — design.
   Source: _tools/site/products/visioix/site.css. build-site.cjs copies it to site/visioix/assets/site.css; edit only this file.
   Direction: an analytics dashboard. Dark graphite control-panel bands (header, hero, workflow, price card, closing)
   with a fine grid; light report sections with chart gridlines; signal orange, amber and graphite gray as the
   only data colours. Colours come from the Visioix logo (orange #f34c25, gray #666666, graphite #303030).
   Fonts (SIL Open Font License 1.1, files in fonts/): Manrope variable (The Manrope Project Authors) for headings
   and text; IBM Plex Mono Regular and Bold (IBM Corp.) for labels, numbers and metrics. */

/* ---------- Fonts ---------- */

@font-face {
  font-family: "Manrope";
  src: url("fonts/Manrope-VariableFont_wght.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("fonts/IBMPlexMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("fonts/IBMPlexMono-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ---------- */

:root {
  /* Graphite, from the logo's #303030 and #666666. */
  --ink-950: #111214;
  --ink-900: #18191c;
  --ink-850: #1e1f23;
  --ink-800: #26272b;
  --ink-700: #303030;
  --gray-500: #666666;
  --gray-400: #8d9097;
  --gray-300: #c3c5c9;
  --gray-200: #dfe0e3;
  --gray-100: #eeeef0;
  /* Data colours: signal orange (logo), its darker text tone, a light hover tone and amber. */
  --orange-400: #ff6a45;
  --orange-500: #f34c25;
  --orange-700: #c2381a;
  --orange-100: #fde3da;
  --orange-50: #fff4f0;
  --amber-400: #ffb547;
  /* Surfaces and text. */
  --paper: #ffffff;
  --paper-tint: #f6f5f3;
  --text: #1b1c1f;
  --muted: #55575d;
  --line: #e3e3e6;
  --on-dark: #f3f3f4;
  --on-dark-muted: #b4b6bb;
  --line-dark: rgba(255, 255, 255, 0.1);
  --grid-dark: rgba(255, 255, 255, 0.045);
  --grid-light: rgba(48, 48, 48, 0.055);
  --focus: var(--orange-700);
  /* Shape and layout. */
  --radius-lg: 20px;
  --radius: 14px;
  --radius-sm: 10px;
  --shadow-sm: 0 1px 2px rgba(17, 18, 20, 0.06);
  --shadow: 0 1px 2px rgba(17, 18, 20, 0.05), 0 18px 40px -16px rgba(17, 18, 20, 0.22);
  --bar-h: 64px;
  --tabs-h: 46px;
  --toc-h: 54px;
  /* Height that stays on screen while scrolling: the page tabs on wide screens, the header bar below. */
  --sticky-h: var(--tabs-h);
  --wrap: 1200px;
  --gutter: 24px;
  --font-sans: "Manrope", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  /* Panel backgrounds: a fine grid on graphite, chart gridlines on light paper. */
  --dark-grid:
    linear-gradient(var(--grid-dark) 1px, transparent 1px) 0 0 / 48px 48px,
    linear-gradient(90deg, var(--grid-dark) 1px, transparent 1px) 0 0 / 48px 48px;
  color-scheme: light;
}

/* ---------- Base ---------- */

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: var(--orange-700);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

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

a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 6px;
}

h1,
h2,
h3 {
  margin: 0;
  color: var(--ink-900);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.022em;
}

h2 {
  font-size: clamp(1.8rem, 1.25rem + 1.7vw, 2.6rem);
}

h3 {
  font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
}

p {
  margin: 0 0 1em;
}

code {
  padding: 1px 6px;
  border-radius: 5px;
  background: var(--gray-100);
  font-family: var(--font-mono);
  font-size: 0.86em;
}

main section[id] {
  scroll-margin-top: calc(var(--sticky-h) + 16px);
}

.page-topic main section[id] {
  scroll-margin-top: calc(var(--sticky-h) + var(--toc-h));
}

.wrap {
  width: 100%;
  max-width: calc(var(--wrap) + 2 * var(--gutter));
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* Light report sections carry faint horizontal chart gridlines. */
.tint {
  background:
    linear-gradient(var(--grid-light) 1px, transparent 1px) 0 0 / 100% 40px,
    var(--paper-tint);
}

.skip-link {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  background: var(--orange-500);
  color: var(--ink-950);
  font-weight: 700;
}

.skip-link:focus {
  top: 12px;
}

/* Edition badges: "(Pro)" in headings (build-site.cjs) and in bold lead-ins (templates.cjs). */
.edition {
  display: inline-block;
  padding: 2px 7px 1px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.5;
  text-transform: uppercase;
  vertical-align: 0.12em;
}

.edition--pro {
  background: var(--ink-900);
  color: var(--orange-500);
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 11px 22px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.btn--primary {
  background: var(--orange-500);
  color: var(--ink-950);
}

.btn--primary:hover {
  background: var(--orange-400);
  color: var(--ink-950);
}

.btn--secondary {
  border-color: var(--gray-300);
  background: var(--paper);
  color: var(--ink-900);
}

.btn--secondary:hover {
  border-color: var(--ink-900);
  color: var(--ink-900);
}

/* Secondary buttons on the dark hero and price card: white text, light outline. */
.btn--ghost-light,
.hero .btn--secondary,
.pricing__card .btn--secondary {
  border-color: rgba(255, 255, 255, 0.4);
  background: transparent;
  color: #fff;
}

.btn--ghost-light:hover,
.hero .btn--secondary:hover,
.pricing__card .btn--secondary:hover {
  border-color: #fff;
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}

/* Live demo and Download free open another site: a small up-right arrow drawn with two borders. */
.btn--external::after {
  content: "";
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  margin-top: -1px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  opacity: 0.8;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}

.actions--center {
  justify-content: center;
}

/* ---------- Header ---------- */

/* Two rows on wide screens: brand and action, then the page tabs. The header sticks with its first row
   scrolled away, so only the tabs stay on screen. */
.site-header {
  position: sticky;
  top: calc(-1 * var(--bar-h));
  z-index: 50;
  background:
    linear-gradient(var(--line-dark), var(--line-dark)) 0 var(--bar-h) / 100% 1px no-repeat,
    linear-gradient(var(--ink-900) var(--bar-h), var(--ink-850) var(--bar-h));
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
  color: var(--on-dark);
}

.site-header__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 16px;
}

.brand {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  min-height: var(--bar-h);
}

.brand__wordmark {
  width: auto;
  height: 36px;
}

.site-header__action {
  flex: 0 0 auto;
  min-height: 40px;
  margin-left: auto;
  padding: 8px 18px;
  font-size: 14.5px;
}

.main-nav {
  order: 3;
  flex: 0 0 100%;
}

.main-nav ul {
  display: flex;
  margin: 0 0 0 -12px;
  padding: 0;
  list-style: none;
}

.main-nav a {
  display: flex;
  align-items: center;
  min-height: var(--tabs-h);
  padding: 0 12px;
  color: var(--on-dark-muted);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: inset 0 -2px 0 transparent;
  transition: color 0.15s ease, box-shadow 0.15s ease;
}

.main-nav a:hover {
  color: #fff;
  box-shadow: inset 0 -2px 0 var(--gray-500);
}

.main-nav a[aria-current="page"] {
  color: #fff;
  box-shadow: inset 0 -3px 0 var(--orange-500);
}

.main-nav a:focus-visible {
  outline-offset: -3px;
}

.nav-toggle {
  display: none;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 8px 14px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: var(--radius-sm);
  background: transparent;
  color: #fff;
  font: inherit;
  font-size: 14.5px;
  font-weight: 700;
  cursor: pointer;
}

.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 0.2s ease, background-color 0.2s ease;
}

.nav-toggle__bars {
  position: relative;
}

.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: "";
  position: absolute;
  left: 0;
}

.nav-toggle__bars::before {
  top: -6px;
}

.nav-toggle__bars::after {
  top: 6px;
}

.nav-open .nav-toggle__bars {
  background: transparent;
}

.nav-open .nav-toggle__bars::before {
  transform: translateY(6px) rotate(45deg);
}

.nav-open .nav-toggle__bars::after {
  transform: translateY(-6px) rotate(-45deg);
}

/* ---------- Hero ---------- */

/* Centered hero (site.json hero.layout "center"): eyebrow, title, summary and actions read as one block on the
   graphite control panel. The product's chart language stays in the background: the fine grid, a signal glow at the
   top and two faint series along the bottom. */
.hero {
  position: relative;
  overflow: hidden;
  padding: 64px 0 88px;
  background:
    var(--dark-grid),
    radial-gradient(ellipse 50% 60% at 50% 0%, rgba(243, 76, 37, 0.2), transparent 70%),
    var(--ink-900);
  color: var(--on-dark);
  text-align: center;
}

/* This period in signal orange over its faint area, the previous period dashed in gray. On wide screens the series
   rise from the lower left to the upper right and fade out behind the text column; below 1024px they run under the
   buttons, in the band's bottom padding. The backslash at each line end continues the SVG data URL on the next line. */
.hero::before {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 52%;
  background: url("data:image/svg+xml,\
%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 200' preserveAspectRatio='none'%3E\
%3Cpolygon points='0,200 0,168 100,150 200,158 300,126 400,134 500,104 600,112 700,80 800,90 900,58 1000,66 1100,34 1200,26 1200,200' fill='%23f34c25' fill-opacity='0.12'/%3E\
%3Cpolyline points='0,186 100,172 200,178 300,154 400,160 500,138 600,146 700,122 800,128 900,102 1000,108 1100,86 1200,80' fill='none' stroke='%238d9097' stroke-width='1.5' stroke-dasharray='5 7' vector-effect='non-scaling-stroke'/%3E\
%3Cpolyline points='0,168 100,150 200,158 300,126 400,134 500,104 600,112 700,80 800,90 900,58 1000,66 1100,34 1200,26' fill='none' stroke='%23f34c25' stroke-width='2' vector-effect='non-scaling-stroke'/%3E\
%3C/svg%3E") 0 100% / 100% 100% no-repeat;
  opacity: 0.6;
  mask-image: linear-gradient(90deg, #000 4%, transparent 34%, transparent 66%, #000 96%);
  pointer-events: none;
}

/* A thin data-colour rule closes the dark band. */
.hero::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--orange-500) 30%, var(--amber-400) 65%, transparent);
  opacity: 0.7;
}

.hero--home {
  padding: 88px 0 120px;
}

.hero__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero h1 {
  max-width: 25ch;
  color: #fff;
  font-size: clamp(2.4rem, 1.4rem + 3.4vw, 4.2rem);
  line-height: 1.04;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.page-topic .hero h1 {
  max-width: 22ch;
  font-size: clamp(2.2rem, 1.5rem + 2.4vw, 3.4rem);
}

/* Eyebrow between two series keys: signal orange before, amber after. */
.eyebrow {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  max-width: 46rem;
  margin-bottom: 20px;
  color: var(--orange-500);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.5;
}

.eyebrow::before,
.eyebrow::after {
  content: "";
  flex: 0 0 auto;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: var(--orange-500);
}

.eyebrow::after {
  background: var(--amber-400);
}

.hero__summary {
  max-width: 44rem;
  margin-top: 24px;
  color: var(--on-dark-muted);
  font-size: clamp(1.05rem, 1rem + 0.3vw, 1.2rem);
}

.hero__summary p:last-child {
  margin-bottom: 0;
}

/* The Overview's four buttons (page links, Live demo, Download free) never split three and one: one row on wide
   screens, two pairs on tablets and one column on phones. */
.hero--home .actions {
  display: grid;
  grid-template-columns: repeat(4, auto);
  justify-content: center;
  margin-top: 36px;
}

.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 0 0 24px;
  padding: 0;
  color: var(--on-dark-muted);
  font-family: var(--font-mono);
  font-size: 13px;
  list-style: none;
}

.breadcrumb li + li::before {
  content: "/";
  margin-right: 8px;
  color: var(--gray-500);
}

.breadcrumb a {
  color: var(--on-dark-muted);
  text-decoration: none;
}

.breadcrumb a:hover {
  color: #fff;
  text-decoration: underline;
}

.breadcrumb [aria-current="page"] {
  color: #fff;
}

/* ---------- On this page ---------- */

/* Sticky bar: current section, previous/next links and a panel that lists every section.
   Without JavaScript the bar shows the full list, wrapped onto as many lines as it needs. */

.toc {
  position: sticky;
  top: var(--sticky-h);
  z-index: 40;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 8px 20px -14px rgba(17, 18, 20, 0.3);
}

.toc__inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: var(--toc-h);
}

.toc__toggle,
.toc__steps {
  display: none;
}

.toc__list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin: 0;
  padding: 10px 0;
  list-style: none;
}

.toc__list a {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 6px 12px;
  border-radius: 8px;
  color: var(--ink-700);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  text-decoration: none;
}

.toc__list a:hover {
  background: var(--paper-tint);
  color: var(--ink-900);
}

.toc__list a.is-active {
  background: var(--orange-50);
  color: var(--ink-900);
  box-shadow: inset 3px 0 0 var(--orange-500);
}

.toc__num {
  flex: 0 0 auto;
  min-width: 1.9em;
  color: var(--orange-700);
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 700;
}

.js .toc__toggle {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: 14px;
  min-width: 0;
  min-height: var(--toc-h);
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink-900);
  font: inherit;
  font-size: 15.5px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

.js .toc__toggle::after {
  content: "";
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  margin: -4px 0 0 2px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}

.js .toc--open .toc__toggle::after {
  margin-top: 4px;
  transform: rotate(-135deg);
}

.toc__label {
  flex: 0 0 auto;
  padding: 3px 8px;
  border: 1px solid var(--gray-200);
  border-radius: 5px;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.toc__current {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.js .toc__steps {
  display: flex;
  flex: 0 0 auto;
  gap: 8px;
}

.toc__step {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 6px 13px;
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  color: var(--ink-800);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}

.toc__step:hover {
  border-color: var(--ink-700);
  color: var(--ink-900);
}

.toc__step[aria-disabled="true"] {
  opacity: 0.4;
  pointer-events: none;
}

.js .toc__list {
  position: absolute;
  top: 100%;
  right: var(--gutter);
  left: var(--gutter);
  display: none;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px 16px;
  max-height: min(70vh, 520px);
  padding: 16px;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-top: 0;
  border-radius: 0 0 var(--radius) var(--radius);
  background: var(--paper);
  box-shadow: var(--shadow);
}

.js .toc--open .toc__list {
  display: grid;
}

.js .toc__list a {
  padding: 10px 12px;
}

/* ---------- Feature sections ---------- */

.feature {
  padding: 104px 0;
}

.feature__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 72px;
  align-items: center;
}

.feature--reverse .feature__media {
  order: -1;
}

.feature__kicker {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}

.feature__number {
  flex: 0 0 auto;
  padding: 3px 8px 2px;
  border: 1px solid var(--orange-500);
  border-radius: 6px;
  background: var(--orange-50);
  color: var(--orange-700);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
}

.feature__label {
  color: var(--ink-700);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.4;
  text-transform: uppercase;
}

.feature__title {
  max-width: 24ch;
  margin-bottom: 22px;
  font-size: clamp(1.7rem, 1.25rem + 1.3vw, 2.4rem);
}

.spark {
  flex: 0 0 auto;
  width: 64px;
  height: auto;
  margin-left: 4px;
  overflow: visible;
}

.spark__line {
  fill: none;
  stroke: var(--orange-500);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
}

.spark__dot {
  fill: var(--orange-500);
}

.feature__media {
  display: grid;
  gap: 28px;
}

/* A section whose image already appears higher up: one widget card with a metric drawing beside the text. */
.feature--text {
  padding: 80px 0;
}

.feature__card {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 56px;
  padding: 48px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--paper);
  box-shadow: var(--shadow);
}

.feature__card .feature__title {
  margin-bottom: 0;
}

.metric {
  display: block;
  width: 100%;
  max-width: 360px;
  height: auto;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px dashed var(--gray-200);
}

.metric__grid line {
  stroke: var(--gray-200);
  stroke-width: 1;
}

.metric__area {
  fill: var(--orange-500);
  opacity: 0.1;
}

.metric__line {
  fill: none;
  stroke: var(--orange-500);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
}

.metric__line--previous {
  stroke: var(--gray-400);
  stroke-width: 2;
  stroke-dasharray: 5 6;
}

.metric__bar {
  fill: var(--gray-300);
}

.metric__bar--warm,
.metric__meter--warm {
  fill: var(--amber-400);
}

.metric__bar--signal,
.metric__meter--signal {
  fill: var(--orange-500);
}

.metric__meter--base {
  fill: var(--gray-500);
}

.metric__track {
  fill: var(--gray-100);
}

.metric__ring-track,
.metric__ring {
  fill: none;
  stroke-width: 14;
}

.metric__ring-track {
  stroke: var(--gray-100);
}

.metric__ring {
  stroke: var(--orange-500);
  stroke-dasharray: var(--value) 100;
  stroke-linecap: round;
  transform: rotate(-90deg);
  transform-origin: 66px 76px;
}

/* ---------- Figures ---------- */

.figure {
  margin: 0;
}

/* Images sit in a widget frame: a header strip with three legend swatches above the picture. */
.figure__link {
  position: relative;
  display: block;
  overflow: hidden;
  padding-top: 34px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  box-shadow: var(--shadow);
  cursor: zoom-in;
}

.figure__link::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1;
  height: 34px;
  border-bottom: 1px solid var(--line);
  background:
    linear-gradient(var(--orange-500), var(--orange-500)) 16px 50% / 22px 6px no-repeat,
    linear-gradient(var(--amber-400), var(--amber-400)) 44px 50% / 14px 6px no-repeat,
    linear-gradient(var(--gray-300), var(--gray-300)) 64px 50% / 10px 6px no-repeat,
    var(--paper-tint);
}

.figure__link img {
  width: 100%;
  transition: transform 0.3s ease;
}

.figure__link:hover img {
  transform: scale(1.015);
}

.figure--tall .figure__link {
  max-height: min(640px, 72vh);
}

.figure--tall .figure__link img {
  object-fit: cover;
  object-position: top;
}

.figure--tall .figure__link::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 96px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), var(--paper) 85%);
}

.figure figcaption {
  margin-top: 14px;
  padding-left: 12px;
  border-left: 2px solid var(--orange-500);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.55;
}

/* ---------- Prose ---------- */

.prose > :last-child {
  margin-bottom: 0;
}

.prose strong {
  color: var(--ink-900);
  font-weight: 800;
}

.prose ol {
  margin: 0 0 1.2em;
  padding: 0;
  counter-reset: item;
  list-style: none;
}

.prose ol > li {
  position: relative;
  margin-bottom: 0.6em;
  padding-left: 44px;
  counter-increment: item;
}

.prose ol > li::before {
  content: counter(item, decimal-leading-zero);
  position: absolute;
  top: 0.15em;
  left: 0;
  color: var(--orange-700);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
}

.prose--center {
  max-width: 46rem;
  margin: 0 auto;
  text-align: center;
}

.prose--light,
.prose--light strong {
  color: var(--on-dark-muted);
}

.prose--light a {
  color: var(--amber-400);
}

/* Edition table on the Overview: graphite header, mono column labels, Yes and dash cells as indicators. */
.table-wrap {
  margin: 28px 0 1.4em;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  box-shadow: var(--shadow-sm);
}

.table-wrap table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  line-height: 1.5;
}

.table-wrap th,
.table-wrap td {
  padding: 13px 16px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.table-wrap th {
  background: var(--ink-900);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.table-wrap th:not(:first-child),
.table-wrap td:not(:first-child) {
  text-align: center;
}

.table-wrap tr:nth-child(even) td {
  background: var(--paper-tint);
}

.table-wrap tr:last-child td {
  border-bottom: 0;
}

.table-wrap .cell-yes,
.table-wrap .cell-no {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

.table-wrap .cell-yes {
  color: var(--orange-700);
}

.table-wrap .cell-yes::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--orange-500);
  vertical-align: 0.05em;
}

.table-wrap .cell-no {
  color: var(--muted);
}

/* ---------- Generic blocks ---------- */

.block {
  padding: 104px 0;
}

.section-head {
  max-width: 46rem;
  margin-bottom: 44px;
}

/* A short signal bar above section headings, like a chart's series key. */
.section-head::before {
  content: "";
  display: block;
  width: 44px;
  height: 4px;
  margin-bottom: 20px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--orange-500) 60%, var(--amber-400) 60%);
}

.section-head--center {
  margin-right: auto;
  margin-left: auto;
  text-align: center;
}

.section-head--center::before {
  margin-right: auto;
  margin-left: auto;
}

/* Explore cards: a widget grid of three wider widgets, then rows of four. The top meter fills on hover;
   the mono number is a CSS counter. */

.cards {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 20px;
  counter-reset: card;
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  grid-column: span 3;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  box-shadow: var(--shadow-sm);
  counter-increment: card;
  transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

.card:nth-child(-n + 3) {
  grid-column: span 4;
}

.card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 28%;
  height: 3px;
  background: var(--orange-500);
  transition: width 0.35s ease;
}

.card:hover {
  border-color: var(--gray-300);
  box-shadow: var(--shadow);
  transform: translateY(-3px);
}

.card:hover::before {
  width: 100%;
}

.card__media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}

.card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  padding: 20px 22px 24px;
}

.card__body::before {
  content: counter(card, decimal-leading-zero);
  margin-bottom: 10px;
  color: var(--orange-700);
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 700;
}

.card__body p {
  color: var(--muted);
  font-size: 15.5px;
  line-height: 1.6;
}

.card__title {
  margin-bottom: 10px;
  font-size: 1.2rem;
  line-height: 1.25;
  letter-spacing: -0.015em;
}

.card__link {
  margin-top: auto;
  color: var(--orange-700);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
}

.card__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
}

.card__link:hover {
  color: var(--orange-700);
  text-decoration: underline;
}

/* ---------- Practical workflow: dark control panel; an ordered list becomes a timeline ---------- */

.workflow {
  padding: 32px 0;
}

.wrap.workflow__panel {
  position: relative;
  overflow: hidden;
  max-width: var(--wrap);
  padding: 64px;
  border-radius: 24px;
  background:
    var(--dark-grid),
    radial-gradient(ellipse 50% 80% at 100% 0%, rgba(243, 76, 37, 0.14), transparent 70%),
    var(--ink-900);
  color: var(--on-dark);
}

.workflow__panel h2 {
  position: relative;
  max-width: 34rem;
  margin-bottom: 20px;
  color: #fff;
}

.workflow__panel h3 {
  margin-bottom: 14px;
  color: #fff;
}

.workflow__panel .prose {
  position: relative;
  font-size: 1.12rem;
}

.workflow__panel .prose > p {
  max-width: 50rem;
}

.trend {
  position: absolute;
  top: 48px;
  right: 56px;
  width: 240px;
  height: auto;
  overflow: visible;
}

.trend__line {
  fill: none;
  stroke: var(--orange-500);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
}

.trend__node {
  fill: var(--ink-900);
  stroke: var(--gray-400);
  stroke-width: 3;
}

.trend__node:last-child {
  stroke: var(--orange-500);
}

.workflow__panel .prose ol {
  position: relative;
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  gap: 28px;
  margin: 44px 0 0;
}

.workflow__panel .prose ol::before {
  content: "";
  position: absolute;
  top: 17px;
  right: 0;
  left: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--orange-500), var(--amber-400) 70%, rgba(255, 181, 71, 0.2));
  transform-origin: left;
}

.workflow__panel .prose ol > li {
  margin: 0;
  padding: 56px 0 0;
  color: var(--on-dark);
  font-size: 1rem;
  line-height: 1.55;
}

.workflow__panel .prose ol > li::before {
  top: 0;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 2px solid var(--orange-500);
  border-radius: 50%;
  background: var(--ink-900);
  color: #fff;
  font-size: 12px;
}

/* ---------- Pricing ---------- */

.pricing {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  gap: 48px;
  align-items: start;
}

.pricing__intro h2 {
  margin-bottom: 20px;
}

.pricing__card {
  position: sticky;
  top: calc(var(--sticky-h) + 24px);
  overflow: hidden;
  padding: 40px 34px 36px;
  border-radius: var(--radius-lg);
  background:
    var(--dark-grid),
    radial-gradient(ellipse 80% 60% at 100% 0%, rgba(243, 76, 37, 0.2), transparent 70%),
    var(--ink-900);
  box-shadow: var(--shadow);
  color: var(--on-dark-muted);
}

.pricing__card::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--orange-500) 55%, var(--amber-400) 55% 80%, var(--gray-500) 80%);
}

.pricing__price p {
  margin: 0;
  font-size: 1.1rem;
  line-height: 1.45;
}

.pricing__price strong {
  color: #fff;
  font-weight: 700;
}

.pricing__amount {
  display: block;
  margin: 10px 0 8px;
  color: #fff;
  font-family: var(--font-mono);
  font-size: clamp(2.6rem, 2rem + 2vw, 3.5rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.05;
}

.pricing__checkout {
  margin-top: 30px;
}

.pricing__buy {
  width: 100%;
  font-size: 16.5px;
  cursor: pointer;
}

.pricing__buy:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Two buttons side by side when the card is wide enough, otherwise stacked. */
.pricing__links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.pricing__links .btn {
  min-height: 44px;
  padding: 9px 14px;
  font-size: 14.5px;
}

.pricing__notes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-top: 56px;
}

.pricing__note {
  padding: 26px 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--muted);
  font-size: 15.5px;
  line-height: 1.65;
}

.pricing__note p > strong:first-child {
  display: block;
  margin-bottom: 8px;
  color: var(--orange-700);
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ---------- Questions: report rows, question beside its answer ---------- */

.faq {
  padding: 0 32px;
  border: 1px solid var(--line);
  border-top: 3px solid var(--ink-900);
  border-radius: 0 0 var(--radius) var(--radius);
  background: var(--paper);
  box-shadow: var(--shadow-sm);
  counter-reset: faq;
}

.faq__item {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 40px;
  padding: 28px 0;
  border-bottom: 1px solid var(--line);
  counter-increment: faq;
}

.faq__item:last-child {
  border-bottom: 0;
}

.faq__item h3 {
  display: flex;
  gap: 16px;
  font-size: 1.15rem;
  line-height: 1.35;
  letter-spacing: -0.01em;
}

.faq__item h3::before {
  content: counter(faq, decimal-leading-zero);
  flex: 0 0 auto;
  padding-top: 0.2em;
  color: var(--orange-700);
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0;
}

.faq__item .prose {
  color: var(--muted);
}

/* ---------- Closing band ---------- */

.closing {
  position: relative;
  overflow: hidden;
  padding: 112px 0 136px;
  background:
    var(--dark-grid),
    radial-gradient(ellipse 60% 80% at 50% 110%, rgba(243, 76, 37, 0.22), transparent 70%),
    var(--ink-900);
  color: var(--on-dark);
  text-align: center;
}

.closing__inner {
  position: relative;
}

.closing h2 {
  max-width: 22ch;
  margin: 0 auto 20px;
  color: #fff;
  font-size: clamp(2rem, 1.4rem + 2vw, 3rem);
}

.skyline {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 120px;
}

.skyline__bar {
  fill: rgba(255, 255, 255, 0.05);
}

.skyline__bar--signal {
  fill: rgba(243, 76, 37, 0.35);
}

.page-review {
  margin: 0 auto;
  padding-top: 28px;
  padding-bottom: 28px;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 12.5px;
  text-align: center;
}

/* ---------- Footer ---------- */

.site-footer {
  padding: 56px 0 44px;
  border-top: 1px solid var(--line-dark);
  background: var(--ink-950);
  color: var(--on-dark-muted);
  font-size: 15px;
}

.site-footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 5fr) minmax(0, 2fr);
  gap: 40px;
  align-items: start;
}

.site-footer__brand img {
  width: 200px;
  height: auto;
}

.site-footer__nav ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer a {
  color: var(--on-dark);
  text-decoration: none;
}

.site-footer a:hover {
  color: #fff;
  text-decoration: underline;
}

.site-footer__publisher {
  justify-self: end;
  text-align: right;
}

.site-footer__publisher img {
  width: 120px;
  height: auto;
  margin: 0 0 10px auto;
}

.site-footer__publisher p {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 13px;
}

/* ---------- Image viewer ---------- */

.lightbox {
  width: min(1400px, 96vw);
  max-width: none;
  max-height: 94vh;
  padding: 0;
  overflow: auto;
  border: 0;
  border-radius: var(--radius);
  background: var(--paper);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
}

.lightbox::backdrop {
  background: rgba(17, 18, 20, 0.86);
}

.lightbox img {
  width: 100%;
}

.lightbox__close {
  position: sticky;
  top: 12px;
  z-index: 1;
  float: right;
  margin: 12px 12px -56px 0;
  padding: 8px 16px;
  border: 0;
  border-radius: 8px;
  background: var(--ink-900);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}

/* ---------- Motion ---------- */

/* Section charts draw when site.js marks the section visible. */
@media (prefers-reduced-motion: no-preference) {
  .vx-motion .spark__line,
  .vx-motion .metric__line,
  .vx-motion .trend__line {
    stroke-dashoffset: 1;
    transition: stroke-dashoffset 1.4s cubic-bezier(0.6, 0, 0.2, 1) 0.2s;
  }

  .vx-motion .is-visible .spark__line,
  .vx-motion .is-visible .metric__line,
  .vx-motion .is-visible .trend__line {
    stroke-dashoffset: 0;
  }

  .vx-motion .metric__line--previous,
  .vx-motion .metric__area,
  .vx-motion .spark__dot,
  .vx-motion .trend__node {
    opacity: 0;
    transition: opacity 0.6s ease 1s;
  }

  .vx-motion .is-visible .spark__dot,
  .vx-motion .is-visible .trend__node {
    opacity: 1;
  }

  .vx-motion .is-visible .metric__line--previous {
    stroke-dashoffset: 0;
    opacity: 1;
  }

  .vx-motion .is-visible .metric__area {
    opacity: 0.1;
  }

  .vx-motion .metric__bar,
  .vx-motion .metric__meter,
  .vx-motion .skyline__bar {
    transform-box: fill-box;
    transition: transform 0.7s cubic-bezier(0.3, 0, 0.2, 1);
    transition-delay: calc(0.2s + var(--i) * 0.05s);
  }

  .vx-motion .metric__bar,
  .vx-motion .skyline__bar {
    transform: scaleY(0);
    transform-origin: 50% 100%;
  }

  .vx-motion .metric__meter {
    transform: scaleX(0);
    transform-origin: 0 50%;
  }

  .vx-motion .is-visible .metric__bar,
  .vx-motion .is-visible .metric__meter,
  .vx-motion .is-visible .skyline__bar {
    transform: none;
  }

  .vx-motion .metric__ring {
    stroke-dasharray: 0 100;
    transition: stroke-dasharray 1.3s cubic-bezier(0.6, 0, 0.2, 1) 0.3s;
  }

  .vx-motion .is-visible .metric__ring {
    stroke-dasharray: var(--value) 100;
  }

  .vx-motion .workflow__panel .prose ol::before {
    transform: scaleX(0);
    transition: transform 1.4s cubic-bezier(0.6, 0, 0.2, 1) 0.2s;
  }

  .vx-motion .workflow.is-visible .prose ol::before {
    transform: none;
  }
}

/* ---------- Responsive ---------- */

/* The eight page tabs need about 1190px: below this width the header becomes one bar with a menu. */
@media (max-width: 1260px) {
  :root {
    --bar-h: 60px;
    --sticky-h: var(--bar-h);
  }

  .site-header {
    top: 0;
    background: var(--ink-900);
  }

  .site-header__row {
    min-height: var(--bar-h);
  }

  .nav-toggle {
    display: inline-flex;
  }

  .js .site-header__row {
    flex-wrap: nowrap;
  }

  .js .main-nav {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    display: none;
    padding: 12px var(--gutter) 22px;
    border-top: 1px solid var(--line-dark);
    background: var(--ink-900);
    box-shadow: 0 24px 40px -20px rgba(0, 0, 0, 0.6);
  }

  .js .nav-open .main-nav {
    display: block;
  }

  .js .main-nav ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px 16px;
    max-width: var(--wrap);
    margin: 0 auto;
    counter-reset: tab;
  }

  .js .main-nav li {
    counter-increment: tab;
  }

  .js .main-nav a {
    gap: 14px;
    min-height: 0;
    padding: 12px 14px;
    border-radius: 8px;
    font-size: 16px;
    white-space: normal;
  }

  .js .main-nav a::before {
    content: counter(tab, decimal-leading-zero);
    color: var(--gray-400);
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 700;
  }

  .js .main-nav a:hover {
    background: rgba(255, 255, 255, 0.05);
    box-shadow: none;
  }

  .js .main-nav a[aria-current="page"] {
    background: rgba(243, 76, 37, 0.12);
    box-shadow: inset 3px 0 0 var(--orange-500);
  }

  .js .main-nav a[aria-current="page"]::before {
    color: var(--orange-500);
  }

  html:not(.js) .main-nav ul {
    flex-wrap: wrap;
  }
}

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

  .card,
  .card:nth-child(-n + 3) {
    grid-column: auto;
  }
}

/* In the two-column card grid an odd last card fills its row, image beside the text. */
@media (min-width: 761px) and (max-width: 1180px) {
  .card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    flex-direction: row;
  }

  .card:last-child:nth-child(odd) .card__media {
    flex: 0 0 50%;
    border-right: 1px solid var(--line);
    border-bottom: 0;
  }

  .card:last-child:nth-child(odd) .card__body {
    justify-content: center;
    padding: 28px;
  }
}

@media (max-width: 1023px) {
  .feature__grid,
  .feature__card,
  .pricing {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero {
    padding-bottom: 112px;
  }

  .hero::before {
    height: 88px;
    mask-image: none;
    opacity: 0.5;
  }

  .hero--home .actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    max-width: 30rem;
  }

  .feature__grid {
    gap: 44px;
  }

  .feature--reverse .feature__media {
    order: 0;
  }

  .feature__media {
    max-width: 600px;
  }

  .feature__card {
    gap: 32px;
  }

  .metric {
    max-width: 320px;
  }

  .feature,
  .block {
    padding: 72px 0;
  }

  .closing {
    padding: 88px 0 120px;
  }

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

  .pricing__card {
    position: relative;
    top: 0;
    max-width: 520px;
  }

  .wrap.workflow__panel {
    padding: 48px 36px;
  }

  .trend {
    display: none;
  }

  /* The timeline runs downwards once five steps no longer fit side by side. */
  .workflow__panel .prose ol {
    grid-auto-flow: row;
    gap: 22px;
  }

  .workflow__panel .prose ol::before {
    top: 0;
    right: auto;
    bottom: 0;
    left: 17px;
    width: 2px;
    height: auto;
    background: linear-gradient(180deg, var(--orange-500), var(--amber-400) 70%, rgba(255, 181, 71, 0.2));
    transform-origin: top;
  }

  .workflow__panel .prose ol > li {
    min-height: 36px;
    padding: 6px 0 0 56px;
  }

  .vx-motion .workflow__panel .prose ol::before {
    transform: scaleY(0);
  }

  .faq__item {
    gap: 24px;
  }

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

  .site-footer__brand {
    grid-column: 1 / -1;
  }

  .site-footer__publisher {
    justify-self: start;
    text-align: left;
  }

  .site-footer__publisher img {
    margin-left: 0;
  }
}

@media (max-width: 760px) {
  :root {
    --bar-h: 58px;
    --toc-h: 52px;
    --gutter: 16px;
  }

  body {
    font-size: 16px;
  }

  .brand__wordmark {
    height: 30px;
  }

  .site-header__row {
    column-gap: 10px;
  }

  .js .main-nav ul {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero,
  .hero--home {
    padding: 52px 0 92px;
  }

  .hero::before {
    height: 68px;
  }

  /* Long eyebrows wrap on phones; the two series keys would float beside the lines. */
  .eyebrow::before,
  .eyebrow::after {
    display: none;
  }

  .actions .btn {
    flex: 1 1 100%;
  }

  .toc__inner {
    gap: 10px;
  }

  .toc__label,
  .toc__step-text {
    display: none;
  }

  .js .toc__toggle {
    font-size: 15px;
  }

  .toc__step {
    justify-content: center;
    width: 38px;
    padding: 0;
    font-size: 18px;
  }

  .js .toc__list {
    right: 0;
    left: 0;
    grid-template-columns: minmax(0, 1fr);
    padding: 8px var(--gutter) 16px;
    border-right: 0;
    border-left: 0;
    border-radius: 0;
  }

  .feature,
  .block {
    padding: 60px 0;
  }

  .feature__card {
    padding: 28px 22px;
  }

  .metric {
    max-width: 260px;
    margin-top: 24px;
    padding-top: 18px;
  }

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

  .workflow {
    padding: 0;
  }

  .wrap.workflow__panel {
    padding: 44px 22px;
    border-radius: 0;
  }

  .table-wrap table {
    font-size: 14.5px;
  }

  .table-wrap th,
  .table-wrap td {
    padding: 11px 10px;
  }

  .table-wrap th {
    font-size: 11px;
  }

  .pricing__card {
    padding: 32px 24px 28px;
  }

  .pricing__note {
    padding: 22px;
  }

  .faq {
    padding: 0 20px;
  }

  .faq__item {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    padding: 24px 0;
  }

  .faq__item .prose {
    padding-left: 34px;
  }

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

/* Very narrow phones: the header keeps the brand and the menu; Choose Visioix stays in the hero, where the
   Overview's buttons stack in one column. */
@media (max-width: 480px) {
  .site-header__action {
    display: none;
  }

  .nav-toggle {
    margin-left: auto;
  }

  .hero--home .actions {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .btn,
  .card,
  .card::before,
  .figure__link img,
  .main-nav a,
  .nav-toggle__bars,
  .nav-toggle__bars::before,
  .nav-toggle__bars::after,
  .js .toc__toggle::after {
    transition: none;
  }

  .card:hover,
  .figure__link:hover img {
    transform: none;
  }
}