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

/* Cardix mini site — design: "the participant page".
   Source: _tools/site/products/cardix/site.css. build-site.cjs copies it to site/cardix/assets/site.css; edit only this file.
   The look of Cardix's own participant page: white panels on a soft blush ground, the coral of the logo for actions,
   and the deep navy of the product's sample cards for headings and the dark bands. Screenshots sit beside the text at
   the same weight; the hero is centered (site.json hero.layout). No motion. */

/* ---------- Fonts (ARN Smart web font package) ---------- */

@font-face {
  font-family: "ARN Smart Utility";
  src: url("fonts/ARNSmartUtility-Medium.woff2") format("woff2");
  font-weight: 400 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 700;
  font-style: normal;
  font-display: swap;
}

/* Exuberant 2 has the rounded letters of the Cardix word mark; used bold for headings, numbers and the price. */
@font-face {
  font-family: "ARN Smart Exuberant 2";
  src: url("fonts/ARNSmartExuberant2-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

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

:root {
  --white: #ffffff;
  --blush-50: #fdf6f3;
  --blush-100: #fbede7;
  --blush-200: #f6d9ce;
  --line: #efe1da;
  --coral: #e05d45;
  /* Darker coral for text and buttons: white on it and it on the blush ground both pass 4.5:1. */
  --coral-deep: #b93e27;
  --coral-ink: #a1341f;
  --peach: #f4a27c;
  --navy: #1a2346;
  --navy-900: #121935;
  --navy-700: #26336a;
  --text: #383d54;
  --muted: #5b6078;
  --on-dark: #ffffff;
  --on-dark-muted: #c9cfe6;
  --radius-lg: 26px;
  --radius: 18px;
  --radius-sm: 12px;
  --shadow: 0 1px 2px rgba(26, 35, 70, 0.06), 0 14px 34px rgba(26, 35, 70, 0.1);
  --shadow-shot: 0 1px 2px rgba(26, 35, 70, 0.08), 0 12px 28px rgba(26, 35, 70, 0.14);
  /* The header has a brand row and a menu row; only the menu row stays on screen (see "Header and menu"). */
  --brand-row: 64px;
  --nav-row: 48px;
  --stick-h: var(--nav-row);
  --toc-h: 56px;
  --wrap: 1200px;
  --gutter: 24px;
  --block-pad: 88px;
  --shot-max: 440px;
  --focus: var(--coral-deep);
  --font-body: "ARN Smart Utility", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  --font-display: "ARN Smart Exuberant 2", "ARN Smart Utility", "Segoe UI", system-ui, sans-serif;
  color-scheme: light;
}

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

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

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

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

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

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

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

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

h1,
h2,
h3 {
  margin: 0;
  color: var(--navy);
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.15;
}

h2 {
  font-size: clamp(1.75rem, 1.35rem + 1.3vw, 2.4rem);
}

h3 {
  font-size: clamp(1.2rem, 1.08rem + 0.4vw, 1.4rem);
}

p {
  margin: 0 0 1em;
}

code {
  padding: 0.1em 0.4em;
  border-radius: 6px;
  background: var(--blush-100);
  color: var(--navy);
  font-size: 0.9em;
}

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

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

.wrap {
  width: min(100% - 2 * var(--gutter), var(--wrap));
  margin: 0 auto;
}

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

.tint {
  background: var(--blush-50);
}

.skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 100;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--navy);
  color: var(--on-dark);
  font-weight: 600;
}

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

/* The two short coral bars that open each step of the participant page, above section headings. */
.section-head h2::before,
.pricing__intro h2::before,
.guide__intro h2::before,
.workflow__panel h2::before,
.closing h2::before {
  content: "";
  display: block;
  width: 20px;
  height: 6px;
  margin: 0 0 18px;
  border-radius: 3px;
  background: var(--coral);
  box-shadow: 26px 0 0 var(--coral);
}

.section-head--center h2::before,
.workflow__panel h2::before,
.closing h2::before {
  margin-left: calc(50% - 23px);
}

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 12px 26px;
  border: 1.5px solid transparent;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.btn--primary {
  background: var(--coral-deep);
  color: var(--white);
  box-shadow: 0 8px 18px rgba(185, 62, 39, 0.22);
}

.btn--primary:hover {
  background: var(--coral-ink);
  color: var(--white);
}

.btn--secondary {
  border-color: var(--blush-200);
  background: var(--white);
  color: var(--navy);
}

.btn--secondary:hover {
  border-color: var(--coral-deep);
  color: var(--coral-deep);
}

.btn--ghost-light {
  border-color: rgba(255, 255, 255, 0.45);
  background: transparent;
  color: var(--on-dark);
}

.btn--ghost-light:hover {
  border-color: var(--on-dark);
  background: rgba(255, 255, 255, 0.08);
  color: var(--on-dark);
}

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

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

/* ---------- Header and menu ---------- */

/* Wide screens: the brand row and the action on top, the seven pages in a menu row of their own below. The header
   is pinned with a negative top, so the brand row scrolls away and only the menu row stays on screen. */
.site-header {
  position: sticky;
  top: calc(var(--stick-h) - var(--brand-row) - var(--nav-row));
  z-index: 50;
  border-bottom: 1px solid var(--line);
  background:
    linear-gradient(var(--line), var(--line)) 0 var(--brand-row) / 100% 1px no-repeat,
    var(--white);
}

.site-header__row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "brand . action"
    "nav nav nav";
  align-items: center;
}

.brand {
  grid-area: brand;
  display: inline-flex;
  align-items: center;
  min-height: var(--brand-row);
  text-decoration: none;
}

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

.site-header__action {
  grid-area: action;
  min-height: 42px;
  padding: 9px 20px;
  font-size: 15px;
}

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

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

.main-nav a {
  display: flex;
  align-items: center;
  min-height: var(--nav-row);
  color: var(--navy);
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.25;
  text-decoration: none;
  white-space: nowrap;
}

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

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

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

.nav-toggle {
  grid-area: toggle;
  display: none;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 8px 16px;
  border: 1.5px solid var(--blush-200);
  border-radius: 999px;
  background: var(--white);
  color: var(--navy);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}

.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}

.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, the Overview's points and the actions as
   one block on the blush ground of the participant page, with its faint dot grid at the sides. */
.hero {
  position: relative;
  padding: 64px 0 72px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, var(--blush-100) 0%, var(--blush-50) 100%);
  text-align: center;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 1px 1px, rgba(224, 93, 69, 0.22) 1.2px, transparent 0) 0 0 / 20px 20px;
  -webkit-mask-image: linear-gradient(to right, #000, transparent 30%, transparent 70%, #000);
  mask-image: linear-gradient(to right, #000, transparent 30%, transparent 70%, #000);
  pointer-events: none;
}

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

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

.hero h1 {
  max-width: 22ch;
  margin-bottom: 20px;
  font-size: clamp(2.2rem, 1.5rem + 2.4vw, 3.6rem);
  line-height: 1.08;
}

.page-topic .hero h1 {
  font-size: clamp(2.1rem, 1.5rem + 2vw, 3.2rem);
}

.eyebrow {
  margin-bottom: 14px;
  color: var(--coral-deep);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.16em;
  line-height: 1.4;
}

.hero__summary {
  max-width: 46rem;
  font-size: 18px;
}

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

/* The Overview's points as three white cards, each with a coral tick. */
.hero__points {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  width: 100%;
  max-width: 1040px;
  margin: 36px 0 0;
  padding: 0;
  list-style: none;
  text-align: left;
}

.hero__point {
  position: relative;
  padding: 20px 22px 22px 56px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  font-size: 16px;
  line-height: 1.55;
}

.hero__point::before,
.hero__point::after {
  content: "";
  position: absolute;
}

.hero__point::before {
  top: 22px;
  left: 22px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--coral-deep);
}

.hero__point::after {
  top: 26px;
  left: 29px;
  width: 6px;
  height: 10px;
  border-right: 2px solid var(--white);
  border-bottom: 2px solid var(--white);
  transform: rotate(45deg);
}

/* ---------- Breadcrumb ---------- */

.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
  color: var(--muted);
  font-size: 14.5px;
  font-weight: 600;
}

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

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

.breadcrumb a:hover {
  color: var(--coral-deep);
  text-decoration: underline;
}

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

/* Sticky bar under the menu row; without JavaScript it shows the full list, wrapped onto several lines. */
.toc {
  position: sticky;
  top: var(--stick-h);
  z-index: 40;
  border-bottom: 1px solid var(--line);
  background: var(--white);
  box-shadow: 0 8px 18px -14px rgba(26, 35, 70, 0.35);
}

.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: 10px;
  color: var(--navy);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  text-decoration: none;
}

.toc__list a:hover {
  background: var(--blush-50);
}

.toc__list a.is-active {
  background: var(--blush-100);
}

.toc__num {
  flex: 0 0 auto;
  min-width: 1.6em;
  color: var(--coral-deep);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
}

.js .toc__toggle {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: 12px;
  min-width: 0;
  min-height: var(--toc-h);
  padding: 0;
  border: 0;
  background: none;
  color: var(--navy);
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  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 var(--coral-deep);
  border-bottom: 2px solid var(--coral-deep);
  transform: rotate(45deg);
}

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

.toc__label {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 12.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.toc__current {
  overflow: hidden;
  color: var(--navy);
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  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: 38px;
  padding: 6px 14px;
  border: 1.5px solid var(--blush-200);
  border-radius: 999px;
  background: var(--white);
  color: var(--navy);
  font-size: 14.5px;
  font-weight: 600;
  text-decoration: none;
}

.toc__step:hover {
  border-color: var(--coral-deep);
  color: var(--coral-deep);
}

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

.js .toc__list {
  position: absolute;
  top: calc(100% + 1px);
  right: 0;
  left: 0;
  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(--white);
  box-shadow: var(--shadow);
}

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

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

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

/* Text and screenshot share the row equally; the screenshot never grows past --shot-max in height. */
.feature {
  padding: var(--block-pad) 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: 14px;
  margin-bottom: 14px;
}

.feature__number {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  min-width: 40px;
  height: 32px;
  padding: 0 8px;
  border-radius: 9px;
  background: var(--blush-100);
  color: var(--coral-deep);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
}

.tint .feature__number {
  background: var(--white);
  box-shadow: inset 0 0 0 1px var(--blush-200);
}

.feature__label {
  color: var(--coral-deep);
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  line-height: 1.35;
  text-transform: uppercase;
}

.feature__title {
  margin-bottom: 20px;
  font-size: clamp(1.55rem, 1.2rem + 1.1vw, 2.1rem);
  line-height: 1.15;
}

/* The screenshot lies on a blush panel, like the card on the participant page; white panel on tinted sections. */
.feature__media,
.steps__figure,
.guide__figure {
  padding: 22px;
  border-radius: var(--radius-lg);
  background: var(--blush-100);
}

.tint .feature__media,
.tint .guide__figure {
  background: var(--white);
  box-shadow: inset 0 0 0 1px var(--line);
}

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

.figure {
  margin: 0;
}

.figure__link {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  border-radius: var(--radius-sm);
  cursor: zoom-in;
}

.figure__link img {
  width: auto;
  max-height: var(--shot-max);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-shot);
}

/* A phone screenshot keeps the rounder corners of the phone. */
.figure--tall .figure__link img {
  border-radius: 24px;
}

.image-placeholder {
  display: grid;
  place-items: center;
  min-height: 260px;
  border: 2px dashed var(--blush-200);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--muted);
  font-weight: 600;
}

/* ---------- Text ---------- */

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

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

.prose ul,
.prose ol {
  margin: 0 0 1.1em;
  padding: 0;
  list-style: none;
}

.prose li {
  position: relative;
  margin-bottom: 0.5em;
  padding-left: 26px;
}

.prose ul > li::before {
  content: "";
  position: absolute;
  top: 0.6em;
  left: 4px;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--coral);
}

.prose ol {
  counter-reset: prose-step;
}

.prose ol > li {
  counter-increment: prose-step;
  padding-left: 36px;
}

.prose ol > li::before {
  content: counter(prose-step);
  position: absolute;
  top: 0.12em;
  left: 0;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--blush-100);
  color: var(--coral-deep);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
}

.prose--center {
  max-width: 720px;
  margin: 0 auto 32px;
  text-align: center;
}

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

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

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

.table-wrap {
  margin: 0 0 1.3em;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--white);
}

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

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

.table-wrap th {
  background: var(--blush-50);
  color: var(--navy);
  font-weight: 600;
}

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

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

/* ---------- Section heads ---------- */

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

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

/* ---------- Overview: Explore cards ---------- */

.cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--white);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.card:hover,
.card:focus-within {
  border-color: var(--blush-200);
  box-shadow: var(--shadow);
}

/* Every card shows the top left of its screenshot, where the screen's title and menu are. */
.card__media {
  overflow: hidden;
  aspect-ratio: 16 / 10;
  border-bottom: 1px solid var(--line);
  background: var(--blush-100);
}

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

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

.card__body p {
  font-size: 16px;
}

.card__title {
  margin-bottom: 10px;
  font-size: 1.3rem;
}

.card__link {
  margin-top: auto;
  color: var(--coral-deep);
  font-weight: 600;
  text-decoration: none;
}

/* The whole card is the link's click area. */
.card__link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.card__link:hover {
  text-decoration: underline;
}

/* ---------- Steps ---------- */

/* Steps with a screenshot: the numbered steps on the left, the screenshot beside them. */
.wrap:has(> .steps__figure) {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 0 64px;
  align-items: center;
}

.wrap:has(> .steps__figure) > .section-head {
  grid-column: 1 / -1;
}

.steps {
  display: grid;
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

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

.steps__item::before {
  content: counter(step);
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--coral-deep);
  color: var(--white);
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
}

/* A dashed thread joins the numbers. */
.steps__item:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 52px;
  bottom: -20px;
  left: 21px;
  border-left: 2px dashed var(--blush-200);
}

.steps__title {
  margin: 8px 0 6px;
  font-size: 1.2rem;
}

.steps__text {
  font-size: 16px;
}

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

.steps__figure {
  margin: 0;
}

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

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

.tile {
  padding: 26px 24px 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
}

.tile::before {
  content: "";
  display: block;
  width: 14px;
  height: 5px;
  margin-bottom: 18px;
  border-radius: 3px;
  background: var(--coral);
  box-shadow: 19px 0 0 var(--coral);
}

.tile p {
  margin: 0;
  font-size: 16px;
}

.tile .tile__title {
  margin-bottom: 8px;
  color: var(--navy);
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.25;
}

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

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

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

.pricing__lead {
  margin-bottom: 18px;
  color: var(--coral-deep);
  font-size: clamp(1.2rem, 1.08rem + 0.4vw, 1.4rem);
}

/* The price card is drawn like the navy sample card of the participant page: a peach circle in the top corner,
   a deeper circle low on the left. */
.pricing__card {
  --focus: var(--peach);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 40px 40px 40px;
  border-radius: var(--radius-lg);
  background: var(--navy);
  color: var(--on-dark-muted);
  box-shadow: 0 24px 48px rgba(26, 35, 70, 0.22);
}

.pricing__card::before,
.pricing__card::after {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: 50%;
}

.pricing__card::before {
  top: -70px;
  right: -60px;
  width: 170px;
  height: 170px;
  background: linear-gradient(135deg, var(--coral) 0%, var(--peach) 100%);
}

.pricing__card::after {
  bottom: -170px;
  left: -110px;
  width: 320px;
  height: 320px;
  background: var(--navy-700);
}

.pricing__card .prose {
  font-size: 16px;
}

.pricing__card .prose p:first-child {
  margin-bottom: 16px;
  color: var(--on-dark);
  font-size: 1.5rem;
  line-height: 1.3;
}

.pricing__card .prose p:first-child strong {
  color: var(--on-dark);
  font-family: var(--font-display);
  font-weight: 700;
}

.pricing__checkout {
  display: grid;
  gap: 12px;
  margin-top: 26px;
}

.pricing__buy {
  width: 100%;
  font-size: 17px;
  box-shadow: none;
}

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

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

/* The introduction beside the screenshot, the numbered steps in one row below both. */
.guide {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 72px;
  align-items: start;
}

.guide__intro {
  display: contents;
}

.guide__intro > * {
  grid-column: 1;
}

.guide__intro h2 {
  margin-bottom: 14px;
}

.guide__lead {
  margin-bottom: 18px;
  color: var(--coral-deep);
  font-size: clamp(1.2rem, 1.08rem + 0.4vw, 1.4rem);
}

.guide__intro .guide__figure {
  grid-column: 2;
  grid-row: 1 / span 4;
  align-self: center;
}

.guide__steps {
  grid-column: 1 / -1;
  margin-top: 48px;
}

.guide__steps ol {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: guide-step;
}

.guide__steps li {
  position: relative;
  padding: 64px 22px 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  counter-increment: guide-step;
  font-size: 16px;
  line-height: 1.55;
}

.guide__steps li::before {
  content: counter(guide-step);
  position: absolute;
  top: 20px;
  left: 22px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--coral-deep);
  color: var(--white);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
}

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

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

.faq__item {
  padding: 26px 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
}

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

.faq__item .prose {
  font-size: 16px;
}

/* ---------- Dark sections: workflow and closing ---------- */

.workflow,
.closing {
  --focus: var(--peach);
  background: var(--navy);
  color: var(--on-dark-muted);
}

.workflow__panel h2 {
  margin-bottom: 12px;
  color: var(--on-dark);
  text-align: center;
}

.workflow__panel h3 {
  margin-bottom: 12px;
  color: var(--peach);
  text-align: center;
}

.workflow__panel .prose {
  margin-top: 40px;
}

/* The workflow list becomes a row of numbered cards. */
.workflow__panel .prose ol {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin: 0;
}

.workflow__panel .prose ol > li {
  margin: 0;
  padding: 62px 20px 22px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.04);
  color: var(--on-dark);
  font-size: 16px;
  line-height: 1.55;
}

.workflow__panel .prose ol > li::before {
  top: 20px;
  left: 20px;
  width: 30px;
  height: 30px;
  background: var(--peach);
  color: var(--navy);
  font-size: 14px;
}

/* The closing band carries the circles of the sample card at its edges. */
.closing {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: var(--block-pad) 0;
  text-align: center;
}

.closing::before,
.closing::after {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: 50%;
}

.closing::before {
  top: -150px;
  right: -110px;
  width: 340px;
  height: 340px;
  background: linear-gradient(135deg, var(--coral) 0%, var(--peach) 100%);
  opacity: 0.9;
}

.closing::after {
  bottom: -220px;
  left: -140px;
  width: 440px;
  height: 440px;
  background: var(--navy-700);
}

.closing__inner {
  max-width: 760px;
}

.closing h2 {
  margin-bottom: 16px;
  color: var(--on-dark);
  font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.7rem);
}

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

.page-review {
  margin-top: 32px;
  margin-bottom: 32px;
  color: var(--muted);
  font-size: 14px;
  text-align: center;
}

.site-footer {
  --focus: var(--peach);
  padding: 52px 0 44px;
  background: var(--navy-900);
  color: var(--on-dark-muted);
}

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

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

.site-footer__nav ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 22px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer a {
  color: var(--on-dark);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
}

.site-footer a:hover {
  color: var(--peach);
  text-decoration: underline;
}

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

.site-footer__publisher img {
  width: 130px;
  height: auto;
  margin-left: auto;
}

.site-footer__publisher p {
  margin: 10px 0 0;
  font-size: 13.5px;
}

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

.lightbox {
  width: min(96vw, 1400px);
  max-width: none;
  max-height: 94vh;
  padding: 14px;
  border: 0;
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: 0 30px 60px rgba(18, 25, 53, 0.4);
}

.lightbox::backdrop {
  background: rgba(18, 25, 53, 0.85);
}

.lightbox img {
  width: 100%;
  max-height: calc(94vh - 90px);
  object-fit: contain;
}

.lightbox__close {
  display: block;
  margin: 0 0 10px auto;
  padding: 8px 18px;
  border: 0;
  border-radius: 999px;
  background: var(--navy);
  color: var(--on-dark);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}

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

  .btn,
  .card {
    transition: none;
  }
}

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

/* The seven menu labels take about 960px; below 1240px their gaps get too tight, so the menu opens from a button. */
@media (max-width: 1240px) {
  :root {
    --stick-h: 64px;
  }

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

  .site-header__row {
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    grid-template-areas:
      "brand . action toggle"
      "nav nav nav nav";
    column-gap: 12px;
  }

  .brand {
    min-height: var(--stick-h);
  }

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

  /* Without JavaScript the menu stays a wrapped row under the brand. */
  .main-nav ul {
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 0 22px;
  }

  .js .main-nav {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    display: none;
    padding: 10px var(--gutter) 20px;
    border-bottom: 1px solid var(--line);
    background: var(--white);
    box-shadow: var(--shadow);
  }

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

  .js .main-nav ul {
    flex-direction: column;
    gap: 2px;
    max-width: var(--wrap);
    margin: 0 auto;
  }

  .js .main-nav a {
    min-height: 0;
    padding: 12px 14px;
    border-radius: 10px;
    font-size: 17px;
  }

  .js .main-nav a[aria-current="page"] {
    background: var(--blush-100);
    box-shadow: inset 3px 0 0 var(--coral);
  }
}

@media (max-width: 1024px) {
  .feature__grid,
  .pricing,
  .guide,
  .wrap:has(> .steps__figure) {
    grid-template-columns: minmax(0, 1fr);
  }

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

  .feature__grid,
  .pricing {
    gap: 40px;
  }

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

  .feature__media {
    width: 100%;
    max-width: 680px;
    justify-self: center;
  }

  .steps__figure {
    margin-top: 40px;
  }

  .guide__intro .guide__figure {
    grid-column: 1;
    grid-row: auto;
    margin-top: 32px;
  }

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

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

  .pricing__card {
    width: 100%;
    max-width: 560px;
    justify-self: center;
  }

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

  .site-footer__grid {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    text-align: center;
  }

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

@media (max-width: 720px) {
  :root {
    --gutter: 16px;
    --stick-h: 60px;
    --toc-h: 52px;
    --block-pad: 60px;
    --shot-max: 380px;
  }

  body {
    font-size: 16.5px;
  }

  .hero,
  .hero--home {
    padding: 44px 0 56px;
  }

  .hero__summary {
    font-size: 17px;
  }

  .brand__wordmark {
    height: 26px;
  }

  .site-header__action {
    display: none;
  }

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

  .toc__step {
    padding: 6px 12px;
  }

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

  .feature__media,
  .steps__figure,
  .guide__figure {
    padding: 12px;
    border-radius: var(--radius);
  }

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

  .pricing__card {
    padding: 32px 24px;
  }

  .faq__item {
    padding: 22px 20px;
  }

  .closing::before {
    top: -110px;
    right: -120px;
    width: 220px;
    height: 220px;
  }

  .closing::after {
    bottom: -170px;
    left: -150px;
    width: 300px;
    height: 300px;
  }
}