/* 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;
  }
}

/* Eagle3D mini site — "production workshop / print bed".
   Source: _tools/site/products/eagle3d/site.css (build-site.cjs copies it to site/eagle3d/assets/site.css).
   Dark graphite bed, steel surfaces, logo blue as the main accent and a small nozzle orange for fine details
   (feature numbers, the active menu item, focus). Headings: ARN Smart Utility in capitals; technical labels: monospace.
   Layout changes for feature, pricing and guide sections: templates.cjs. */

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

@font-face {
  font-family: "ARN Smart Utility";
  src: url("fonts/ARNSmartUtility-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "ARN Smart Utility";
  src: url("fonts/ARNSmartUtility-Demi.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "ARN Smart Utility";
  src: url("fonts/ARNSmartUtility-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

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

:root {
  color-scheme: dark;

  /* Surfaces: the print bed and the steel parts around it. */
  --bed: #121519;
  --bed-deep: #0d1013;
  --bed-raised: #171b20;
  --steel: #1c2228;
  --steel-2: #252c34;
  --line: #2e3741;
  --line-strong: #3f4a56;

  /* Text (contrast on --bed: 15.6, 10.6 and 6.9 to 1). */
  --text: #e9eef3;
  --text-soft: #bcc6d0;
  --text-muted: #93a0ad;

  /* Accents: logo blue (7.4 to 1 on --bed), its deep tone for fills, nozzle orange (7.8 to 1) for small details. */
  --blue: #5dade2;
  --blue-hover: #8cc8ee;
  --blue-deep: #297fb8;
  --orange: #ff8a3d;
  --on-blue: #0b0f13;

  /* Print bed grid and layer lines. */
  --grid-line: rgba(93, 173, 226, 0.07);
  --layer-line: rgba(233, 238, 243, 0.045);

  --font: "ARN Smart Utility", "Segoe UI", system-ui, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", Consolas, monospace;

  --wrap: 1320px;
  --gutter: 24px;
  --header-h: 105px;
  --toc-h: 0px;
  --section-space: clamp(64px, 8vw, 112px);
}

body.page-topic {
  --toc-h: 49px;
}

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

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

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

body {
  margin: 0;
  background: var(--bed);
  color: var(--text);
  font-family: var(--font);
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
}

a {
  color: var(--blue);
}

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

:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
}

::selection {
  background: rgba(255, 138, 61, 0.35);
  color: var(--text);
}

h1,
h2,
h3 {
  margin: 0;
  color: var(--text);
  line-height: 1.15;
}

h1,
h2 {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

h3 {
  font-weight: 600;
}

section[id] {
  scroll-margin-top: calc(var(--header-h) + var(--toc-h) + 12px);
}

main > section {
  --section-bg: var(--bed);
  background-color: var(--section-bg);
}

main > section + section {
  border-top: 1px solid var(--line);
}

/* Alternate sections lie on the print bed: a lighter plate with its grid. */
main > section.tint {
  --section-bg: var(--bed-raised);
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 44px 44px;
  background-position: center top;
}

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 100;
  padding: 10px 16px;
  background: var(--orange);
  color: var(--on-blue);
  font-weight: 700;
  text-decoration: none;
}

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

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 22px;
  border: 1px solid transparent;
  border-radius: 2px;
  font-family: var(--font);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}

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

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

.btn--secondary,
.btn--ghost-light {
  background: transparent;
  border-color: var(--line-strong);
  color: var(--text);
}

.btn--secondary:hover,
.btn--ghost-light:hover {
  border-color: var(--blue);
  color: var(--text);
}

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

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

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

/* Two tiers on wide screens: brand and action on top, the page rail below (backgrounds drawn full width). */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: linear-gradient(to bottom, var(--bed-deep) 0 60px, var(--line) 60px 61px, #14181d 61px);
  border-bottom: 1px solid var(--line);
}

.site-header__row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas:
    "brand . action"
    "nav nav nav";
  align-items: center;
  column-gap: 16px;
}

.brand {
  grid-area: brand;
  display: flex;
  align-items: center;
  height: 60px;
  text-decoration: none;
}

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

.site-header__action {
  grid-area: action;
  min-height: 40px;
  padding: 0 16px;
  font-size: 0.8125rem;
}

.main-nav {
  grid-area: nav;
  counter-reset: nav;
}

.main-nav ul {
  display: flex;
  justify-content: space-between;
  margin: 0;
  padding: 0;
  list-style: none;
}

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

.main-nav a {
  display: flex;
  align-items: center;
  height: 44px;
  padding: 0 4px;
  color: var(--text-soft);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
}

.main-nav a::before {
  content: counter(nav, decimal-leading-zero);
  margin-right: 8px;
  color: var(--text-muted);
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0;
}

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

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

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

.nav-toggle {
  grid-area: toggle;
  display: none;
  align-items: center;
  gap: 10px;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  background: transparent;
  color: var(--text);
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
}

.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  display: block;
  width: 16px;
  height: 2px;
  background: currentColor;
  transition: transform 160ms ease, background-color 160ms ease;
}

.nav-toggle__bars {
  position: relative;
}

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

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

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

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

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

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

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

/* Centered hero (site.json hero.layout "center"): eyebrow, title, summary, the Overview's points and the actions
   stand as one block on the print bed. */
.hero {
  position: relative;
  overflow: hidden;
  padding: clamp(56px, 7vw, 104px) 0 clamp(56px, 6vw, 96px);
  text-align: center;
}

main > .hero {
  background:
    radial-gradient(1000px 500px at 50% 28%, rgba(41, 127, 184, 0.22), transparent 65%),
    var(--bed-deep);
}

/* Print bed grid, fading out at the top and bottom. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 30%, #000 75%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 30%, #000 75%, transparent);
  pointer-events: none;
}

/* Printed layer lines at both edges, fading out toward the text. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(to bottom, var(--layer-line) 0 1px, transparent 1px 6px);
  -webkit-mask-image: linear-gradient(to right, #000, transparent 32%, transparent 68%, #000);
  mask-image: linear-gradient(to right, #000, transparent 32%, transparent 68%, #000);
  pointer-events: none;
}

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

.hero h1 {
  max-width: 22ch;
  margin-bottom: 24px;
  font-size: clamp(2.4rem, 1.5rem + 3.4vw, 4.4rem);
  line-height: 1.02;
}

.hero--home h1 {
  max-width: 30ch;
  font-size: clamp(2.1rem, 1.3rem + 2.6vw, 3.6rem);
  line-height: 1.04;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 18px;
  color: var(--blue);
  font-family: var(--mono);
  font-size: 0.8125rem;
  letter-spacing: 0.16em;
}

.eyebrow::before {
  content: "";
  flex: none;
  width: 10px;
  height: 10px;
  background: var(--orange);
}

.hero__summary {
  max-width: 62ch;
  color: var(--text-soft);
  font-size: clamp(1.05rem, 1rem + 0.3vw, 1.2rem);
}

.hero__summary p {
  margin: 0;
}

/* The Overview's points as three steel plates under the summary. */
.hero__points {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  width: 100%;
  max-width: 1080px;
  margin: 36px 0 0;
  padding: 0;
  list-style: none;
  text-align: left;
}

.hero__point {
  position: relative;
  padding: 20px 22px 22px 44px;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: var(--steel);
  color: var(--text);
  font-size: 1rem;
  line-height: 1.55;
}

.hero__point::before {
  content: "";
  position: absolute;
  top: 28px;
  left: 22px;
  width: 8px;
  height: 8px;
  background: var(--blue);
}

.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
  color: var(--text-muted);
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.breadcrumb li + li::before {
  content: "/";
  margin: 0 10px;
}

.breadcrumb a {
  color: var(--blue);
  text-decoration: none;
}

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

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

.toc {
  position: sticky;
  top: var(--header-h);
  z-index: 40;
  background: rgba(23, 27, 32, 0.97);
  border-bottom: 1px solid var(--line);
}

.toc__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 16px;
  min-height: 48px;
}

.toc__toggle,
.toc__steps {
  display: none;
}

/* Without the script the list stays a plain row of section links. */
.toc__list {
  grid-column: 1 / -1;
  display: flex;
  gap: 4px 20px;
  margin: 0;
  padding: 10px 0;
  overflow-x: auto;
  list-style: none;
}

.toc__list a {
  display: flex;
  align-items: baseline;
  gap: 8px;
  color: var(--text-soft);
  font-size: 0.9375rem;
  text-decoration: none;
  white-space: nowrap;
}

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

.toc__num {
  color: var(--text-muted);
  font-family: var(--mono);
  font-size: 0.75rem;
}

.toc__list a.is-active {
  color: var(--text);
}

.toc__list a.is-active .toc__num {
  color: var(--orange);
}

.js .toc__toggle {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  height: 48px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  font-family: var(--font);
  text-align: left;
  cursor: pointer;
}

.js .toc__toggle::after {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  margin-left: 2px;
  border-right: 2px solid var(--blue);
  border-bottom: 2px solid var(--blue);
  transform: translateY(-3px) rotate(45deg);
  transition: transform 160ms ease;
}

.js .toc--open .toc__toggle::after {
  transform: translateY(2px) rotate(-135deg);
}

.toc__label {
  flex: none;
  color: var(--text-muted);
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.toc__current {
  min-width: 0;
  overflow: hidden;
  font-size: 0.9375rem;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.js .toc__steps {
  display: flex;
  gap: 6px;
}

.toc__step {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 12px;
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  color: var(--text-soft);
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-decoration: none;
  text-transform: uppercase;
}

.toc__step:hover {
  border-color: var(--blue);
  color: var(--text);
}

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

/* The panel's containing block is the list's grid area, i.e. the content width of the bar. */
.js .toc__list {
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  display: none;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 24px;
  max-height: calc(100vh - var(--header-h) - var(--toc-h) - 24px);
  padding: 12px;
  overflow-y: auto;
  background: var(--bed-deep);
  border: 1px solid var(--line-strong);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.5);
}

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

.js .toc__list a {
  display: grid;
  grid-template-columns: 2.4em minmax(0, 1fr);
  padding: 9px 12px;
  border-left: 2px solid transparent;
  white-space: normal;
}

.js .toc__list a:hover {
  background: var(--steel);
}

.js .toc__list a.is-active {
  border-left-color: var(--orange);
  background: var(--steel);
}

/* ---------- Sections ---------- */

.block {
  padding: var(--section-space) 0;
}

/* Section heads open with a small measuring ruler. */
.section-head {
  max-width: 820px;
  margin-bottom: 44px;
}

.section-head::before,
.pricing__intro h2::before,
.guide__intro h2::before,
.workflow__panel h2::before {
  content: "";
  display: block;
  width: 64px;
  height: 8px;
  margin-bottom: 18px;
  background:
    linear-gradient(var(--orange), var(--orange)) left bottom / 14px 3px no-repeat,
    repeating-linear-gradient(90deg, var(--line-strong) 0 1px, transparent 1px 8px) left bottom / 100% 8px no-repeat;
}

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

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

.section-head h2,
.pricing__intro h2,
.guide__intro h2,
.workflow__panel h2,
.closing h2 {
  font-size: clamp(1.8rem, 1.2rem + 1.8vw, 2.75rem);
}

.section-head__lead {
  margin: 14px 0 0;
  color: var(--text-soft);
  font-size: 1.2rem;
}

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

.prose {
  color: var(--text-soft);
}

.prose p {
  margin: 0 0 1.05em;
}

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

.prose strong {
  color: var(--text);
  font-weight: 600;
}

.prose a {
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.prose ul {
  margin: 0 0 1.05em;
  padding: 0;
  list-style: none;
}

.prose li {
  position: relative;
  margin: 0.45em 0;
  padding-left: 22px;
}

.prose ul li::before {
  content: "";
  position: absolute;
  top: 0.62em;
  left: 2px;
  width: 7px;
  height: 7px;
  background: var(--blue);
}

.prose code {
  padding: 1px 6px;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: var(--steel-2);
  color: var(--text);
  font-family: var(--mono);
  font-size: 0.88em;
}

.prose--center {
  max-width: 680px;
  margin-inline: auto;
  text-align: center;
}

/* Tables read like a spec sheet. */
.table-wrap {
  margin: 1.4em 0;
  overflow-x: auto;
  border: 1px solid var(--line);
  background: rgba(13, 16, 19, 0.6);
}

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

.table-wrap th {
  padding: 10px 14px;
  border-bottom: 1px solid var(--line-strong);
  background: var(--steel-2);
  color: var(--text-muted);
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-align: left;
  text-transform: uppercase;
}

.table-wrap td {
  padding: 12px 14px;
  border-top: 1px solid var(--line);
  vertical-align: top;
}

.table-wrap td:first-child {
  color: var(--text);
  font-weight: 600;
}

/* ---------- Figures: image plates with registration marks ---------- */

.figure {
  margin: 0;
}

.figure__link {
  --mark: var(--blue);
  position: relative;
  display: block;
  padding: clamp(10px, 1.4vw, 18px);
  border: 1px solid var(--line);
  background-color: var(--bed-deep);
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 16px 16px;
}

.figure__link:hover {
  --mark: var(--orange);
}

.figure__link img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 2px;
}

.figure__link::before,
.pricing__card::before {
  content: "";
  position: absolute;
  inset: -1px;
  background:
    linear-gradient(var(--mark), var(--mark)) left top / 18px 2px no-repeat,
    linear-gradient(var(--mark), var(--mark)) left top / 2px 18px no-repeat,
    linear-gradient(var(--mark), var(--mark)) right top / 18px 2px no-repeat,
    linear-gradient(var(--mark), var(--mark)) right top / 2px 18px no-repeat,
    linear-gradient(var(--mark), var(--mark)) left bottom / 18px 2px no-repeat,
    linear-gradient(var(--mark), var(--mark)) left bottom / 2px 18px no-repeat,
    linear-gradient(var(--mark), var(--mark)) right bottom / 18px 2px no-repeat,
    linear-gradient(var(--mark), var(--mark)) right bottom / 2px 18px no-repeat;
  pointer-events: none;
}

.figure__link:focus-visible {
  outline-offset: 4px;
}

.image-placeholder {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  border: 1px dashed var(--line-strong);
  color: var(--text-muted);
  font-family: var(--mono);
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

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

.feature {
  padding: var(--section-space) 0;
}

.feature__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 40px 32px;
  align-items: start;
}

.feature__head {
  grid-column: 1 / -1;
}

.feature__kicker {
  display: flex;
  align-items: center;
  gap: 14px;
}

.feature__number {
  flex: none;
  padding: 3px 8px;
  border: 1px solid rgba(255, 138, 61, 0.5);
  color: var(--orange);
  font-family: var(--mono);
  font-size: 0.8125rem;
  line-height: 1.4;
}

.feature__label {
  color: var(--blue);
  font-size: 0.9375rem;
  letter-spacing: 0.14em;
  line-height: 1.3;
}

/* Measuring ruler from the label to the edge of the section. */
.feature__kicker::after {
  content: "";
  flex: 1 1 40px;
  height: 7px;
  background:
    linear-gradient(var(--line-strong), var(--line-strong)) left bottom / 100% 1px no-repeat,
    repeating-linear-gradient(90deg, var(--line-strong) 0 1px, transparent 1px 12px) left bottom / 100% 7px no-repeat;
}

.feature__title {
  max-width: 34ch;
  margin-top: 20px;
  font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.3rem);
  line-height: 1.18;
}

/* A feature with an image: the heading and the text share the wider column, the image plate stands beside both
   and is never taller than 400px, so the plate and the text keep about the same height. */
.feature--figure .feature__grid {
  grid-template-rows: auto 1fr;
  row-gap: 24px;
}

.feature--figure .feature__head {
  grid-column: 1 / span 7;
  grid-row: 1;
}

.feature--figure .feature__prose {
  grid-column: 1 / span 7;
  grid-row: 2;
}

.feature--figure .feature__media {
  grid-column: 8 / -1;
  grid-row: 1 / span 2;
  align-self: center;
}

.feature--reverse .feature__head,
.feature--reverse .feature__prose {
  grid-column: 6 / -1;
}

.feature--reverse .feature__media {
  grid-column: 1 / span 5;
}

.feature__media .figure__link {
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
}

.feature__media .figure__link img {
  width: auto;
  max-width: 100%;
  max-height: 400px;
}

/* A feature without its own image: the heading across the section, the text below it in two columns; a paragraph,
   list or table is never split between the columns. */
.feature--text .feature__grid {
  row-gap: 28px;
}

.feature--text .feature__prose {
  grid-column: 1 / -1;
  columns: 2;
  column-gap: 56px;
}

.feature--text .feature__prose > * {
  break-inside: avoid;
}

/* ---------- Cards: module spec sheets ---------- */

/* Four equal cards to a row; a shorter last row is centered. */
.cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  counter-reset: card;
}

.card {
  position: relative;
  display: flex;
  flex: 0 1 calc((100% - 3 * 20px) / 4);
  flex-direction: column;
  border: 1px solid var(--line);
  background: var(--steel);
  counter-increment: card;
  transition: border-color 160ms ease;
}

.card:hover {
  border-color: var(--blue);
}

/* Label strip: module number and a ruler. */
.card::before {
  content: counter(card, decimal-leading-zero);
  display: block;
  padding: 7px 16px;
  border-bottom: 1px solid var(--line);
  background:
    repeating-linear-gradient(90deg, var(--line-strong) 0 1px, transparent 1px 8px) right 16px center / 38% 8px no-repeat,
    var(--steel-2);
  color: var(--orange);
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
}

.card__media {
  padding: 12px 12px 0;
}

.card__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 2px;
  background: #fff;
}

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

.card__title {
  margin-bottom: 10px;
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.card__body p {
  margin: 0 0 18px;
  color: var(--text-soft);
  font-size: 1rem;
}

.card__link {
  margin-top: auto;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-decoration: none;
  text-transform: uppercase;
}

/* The whole card is the link target; its outline is drawn around the card. */
.card__link::after {
  content: "";
  position: absolute;
  inset: 0;
}

.card__link:focus-visible {
  outline: none;
}

.card__link:focus-visible::after {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
}

/* ---------- Steps: the production line ---------- */

.steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

/* Conveyor rail behind the station numbers. */
.steps::before {
  content: "";
  position: absolute;
  top: 20px;
  right: 0;
  left: 0;
  height: 1px;
  background: repeating-linear-gradient(90deg, var(--line-strong) 0 8px, transparent 8px 14px);
}

.steps__item {
  position: relative;
  padding: 64px 24px 0 0;
  counter-increment: step;
}

.steps__item::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--blue);
  background: var(--section-bg);
  color: var(--blue);
  font-family: var(--mono);
  font-size: 0.8125rem;
}

.steps__title {
  margin-bottom: 8px;
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.steps__text {
  color: var(--text-soft);
  font-size: 1rem;
}

.steps__text p {
  margin: 0;
}

.steps__figure {
  max-width: 760px;
  margin: 48px auto 0;
}

/* ---------- Audience tiles ---------- */

.tiles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.tile {
  position: relative;
  overflow: hidden;
  padding: 26px 22px 28px;
  border: 1px solid var(--line);
  border-top: 3px solid var(--blue);
  background: var(--steel);
}

/* Layer lines fading in at the bottom corner. */
.tile::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 110px;
  height: 70px;
  background: repeating-linear-gradient(to bottom, rgba(93, 173, 226, 0.2) 0 1px, transparent 1px 5px);
  -webkit-mask-image: linear-gradient(135deg, transparent 45%, #000);
  mask-image: linear-gradient(135deg, transparent 45%, #000);
  pointer-events: none;
}

.tile p {
  position: relative;
  z-index: 1;
  margin: 0;
  color: var(--text-soft);
  font-size: 1rem;
}

.tile p.tile__title {
  margin-bottom: 10px;
  color: var(--text);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.35;
  text-transform: uppercase;
}

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

.pricing {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 40px 56px;
  align-items: start;
}

.pricing__lead,
.guide__lead {
  margin-top: 18px;
  font-size: clamp(1.2rem, 1rem + 0.6vw, 1.45rem);
  line-height: 1.3;
}

.pricing__intro .prose,
.guide__intro .prose {
  margin-top: 18px;
}

.pricing__card {
  --mark: var(--blue);
  position: relative;
  border: 1px solid var(--line-strong);
  background: var(--steel);
}

.pricing__price {
  padding: 26px 24px 6px;
}

.pricing__price p {
  margin: 0;
  color: var(--text);
  font-size: clamp(1.3rem, 1.05rem + 0.8vw, 1.7rem);
  font-weight: 700;
  line-height: 1.3;
}

.pricing__checkout {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 20px 24px 28px;
}

.pricing__buy {
  flex: 1 1 180px;
}

.pricing__buy + .pricing__buy {
  border-color: var(--blue);
  background: transparent;
  color: var(--blue);
}

.pricing__buy + .pricing__buy:hover {
  background: rgba(93, 173, 226, 0.14);
  color: var(--text);
}

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

.pricing__terms {
  grid-column: 1 / -1;
}

.pricing__terms p {
  max-width: 78ch;
}

/* ---------- Getting started ---------- */

.guide {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 32px 56px;
  align-items: start;
}

.guide__intro {
  grid-row: 1 / span 2;
}

.guide__steps ol {
  margin: 0;
  padding: 0;
  border: 1px solid var(--line);
  background: var(--steel);
  list-style: none;
  counter-reset: setup;
}

.guide__steps li {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  padding: 16px 20px;
  border-top: 1px solid var(--line);
  color: var(--text-soft);
  counter-increment: setup;
}

.guide__steps li:first-child {
  border-top: 0;
}

.guide__steps li::before {
  content: counter(setup, decimal-leading-zero);
  color: var(--orange);
  font-family: var(--mono);
  font-size: 0.8125rem;
  line-height: 2.1;
}

.guide__steps .actions {
  margin-top: 20px;
}

/* ---------- Questions ---------- */

.faq {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 36px 40px;
}

.faq__item {
  position: relative;
  padding-top: 22px;
  border-top: 1px solid var(--line-strong);
}

.faq__item::before {
  content: "";
  position: absolute;
  top: -4px;
  left: 0;
  width: 8px;
  height: 8px;
  background: var(--orange);
}

.faq__item h3 {
  margin-bottom: 10px;
  font-size: 1.15rem;
  line-height: 1.35;
}

/* ---------- Practical workflow: the print queue ---------- */

.workflow {
  padding: var(--section-space) 0;
}

main > .workflow {
  background-color: var(--bed-deep);
  background-image: repeating-linear-gradient(to bottom, var(--layer-line) 0 1px, transparent 1px 7px);
}

.workflow__panel ol {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: queue;
}

.workflow__panel li {
  position: relative;
  margin: 0;
  padding: 54px 18px 22px;
  border: 1px solid var(--line);
  background: var(--steel);
  font-size: 1rem;
  counter-increment: queue;
}

.workflow__panel li::before {
  content: counter(queue, decimal-leading-zero);
  position: absolute;
  top: 16px;
  left: 18px;
  color: var(--orange);
  font-family: var(--mono);
  font-size: 0.8125rem;
}

/* Arrow to the next job in the queue. */
.workflow__panel li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 22px;
  right: -11px;
  z-index: 1;
  width: 8px;
  height: 8px;
  border-top: 2px solid var(--blue);
  border-right: 2px solid var(--blue);
  transform: rotate(45deg);
}

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

.closing {
  position: relative;
  overflow: hidden;
  padding: clamp(72px, 9vw, 128px) 0;
  text-align: center;
}

main > .closing {
  background-color: var(--bed-deep);
}

.closing::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(to bottom, rgba(93, 173, 226, 0.08) 0 1px, transparent 1px 7px);
  -webkit-mask-image: radial-gradient(ellipse at center, #000, transparent 70%);
  mask-image: radial-gradient(ellipse at center, #000, transparent 70%);
  pointer-events: none;
}

.closing::after {
  content: "";
  position: absolute;
  top: -1px;
  left: 50%;
  width: 120px;
  height: 2px;
  background: var(--orange);
  transform: translateX(-50%);
}

.closing__inner {
  position: relative;
  z-index: 1;
}

.closing h2 {
  max-width: 24ch;
  margin: 0 auto 20px;
}

/* ---------- Page footer ---------- */

.page-review {
  margin: 0 auto;
  padding-block: 22px;
  color: var(--text-muted);
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
}

.site-footer {
  padding: 56px 0 44px;
  border-top: 1px solid var(--line);
  background: var(--bed-deep);
  color: var(--text-muted);
}

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

.site-footer__brand img {
  display: block;
  width: 220px;
  height: auto;
}

.site-footer__nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
  columns: 2;
  column-gap: 32px;
}

.site-footer__nav a {
  display: inline-block;
  padding: 5px 0;
  color: var(--text-soft);
  font-size: 0.9375rem;
  text-decoration: none;
}

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

.site-footer__publisher {
  text-align: right;
}

.site-footer__publisher img {
  width: 140px;
  height: auto;
}

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

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

.lightbox {
  max-width: min(1400px, 94vw);
  max-height: 92vh;
  padding: 0;
  overflow: auto;
  border: 1px solid var(--line-strong);
  background: var(--bed-deep);
  color: var(--text);
}

.lightbox::backdrop {
  background: rgba(5, 7, 9, 0.86);
}

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

.lightbox__close {
  position: sticky;
  top: 0;
  z-index: 1;
  display: block;
  min-height: 40px;
  margin-left: auto;
  padding: 0 16px;
  border: 0;
  background: var(--steel-2);
  color: var(--text);
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
}

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

@media (max-width: 1339px) {
  .main-nav a::before {
    display: none;
  }
}

@media (max-width: 1179px) {
  :root {
    --header-h: 61px;
  }

  .site-header__row {
    grid-template-columns: auto 1fr auto auto;
    grid-template-areas:
      "brand . action toggle"
      "nav nav nav nav";
  }

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

  html:not(.js) .nav-toggle {
    display: none;
  }

  /* Without the script the full menu stays open, so the header scrolls away instead of sticking. */
  html:not(.js) {
    --header-h: 0px;
  }

  html:not(.js) .site-header {
    position: relative;
  }

  .main-nav ul {
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 0 20px;
  }

  .main-nav a {
    height: 40px;
  }

  .main-nav a::before {
    display: inline;
  }

  .js .main-nav {
    display: none;
  }

  .js .nav-open .main-nav {
    display: block;
    padding: 6px 0 14px;
  }

  .js .main-nav ul {
    flex-direction: column;
    gap: 0;
  }

  .js .main-nav a {
    height: 48px;
    border-bottom: 1px solid var(--line);
    font-size: 0.9375rem;
  }

  .js .main-nav a[aria-current="page"] {
    box-shadow: inset 3px 0 0 var(--orange);
    padding-left: 14px;
  }

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

  .card {
    flex-basis: calc((100% - 20px) / 2);
  }

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

  .workflow__panel li:nth-child(3)::after {
    display: none;
  }
}

@media (max-width: 1023px) {
  .hero__points {
    grid-template-columns: minmax(0, 1fr);
    max-width: 640px;
    gap: 12px;
  }

  .feature__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }

  .feature--figure .feature__grid {
    grid-template-rows: none;
  }

  .feature--figure .feature__head,
  .feature--figure .feature__media,
  .feature--figure .feature__prose,
  .feature--reverse .feature__head,
  .feature--reverse .feature__media,
  .feature--reverse .feature__prose,
  .feature--text .feature__prose {
    grid-column: 1;
    grid-row: auto;
  }

  .feature--text .feature__prose {
    columns: 1;
  }

  .feature__prose {
    max-width: 760px;
  }

  .steps {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
    max-width: 720px;
    margin-inline: auto;
  }

  .steps::before {
    top: 0;
    bottom: 0;
    left: 20px;
    width: 1px;
    height: auto;
    background: repeating-linear-gradient(to bottom, var(--line-strong) 0 8px, transparent 8px 14px);
  }

  .steps__item {
    min-height: 40px;
    padding: 6px 0 0 64px;
  }

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

  .guide__intro {
    grid-row: auto;
  }

  .faq {
    grid-template-columns: minmax(0, 1fr);
    max-width: 760px;
  }

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

  .site-footer__publisher {
    grid-column: 1 / -1;
    text-align: left;
  }
}

@media (max-width: 759px) {
  :root {
    --gutter: 16px;
  }

  .site-header__row {
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
      "brand . toggle"
      "nav nav nav";
  }

  .site-header__action {
    display: none;
  }

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

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

  .card {
    flex-basis: 100%;
  }

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

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

  .workflow__panel li {
    padding: 18px 18px 18px 60px;
  }

  .workflow__panel li:not(:last-child)::after {
    display: none;
  }

  .pricing__price,
  .pricing__checkout {
    padding-inline: 18px;
  }

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

  .site-footer__nav ul {
    columns: 1;
  }
}