/* Craft Planner website.
   Material theme, dark slate and black with an amber accent.
   Own work only. No font, picture or script is loaded from another host.

   Content
   1. Tokens and schemes
   2. Base: text, links, focus, header, buttons, tables
   3. Page change and scroll reveal
   4. Picture frames, cropped details and captions
   5. Home hero
   6. Home sections: rows, cards, steps, limits, closing block
   7. Download cards
   8. Enlarged picture view
   9. Footer
   10. Reduced motion and print
*/

/* ---------- 1. Tokens and schemes ---------- */

:root {
  --cp-amber: #ffb224;
  --cp-amber-hi: #ffd27a;
  --cp-amber-lo: #e08a00;
  --cp-amber-ink: #1c1303;
  --cp-night: #0b0d12;
  --cp-night-2: #10131b;
  --cp-night-3: #171b26;
  --cp-snow: #eef1f8;
  --cp-radius: 14px;
  --cp-radius-sm: 9px;
  --cp-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --cp-font: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --cp-font-display: "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

body[data-md-color-primary="black"] {
  --md-primary-fg-color: var(--cp-night);
  --md-primary-fg-color--light: #1a1e29;
  --md-primary-fg-color--dark: #07080b;
  --md-footer-bg-color: #0a0c10;
  --md-footer-bg-color--dark: #07080b;
}

body[data-md-color-scheme="slate"][data-md-color-accent="amber"] {
  --md-default-bg-color: #0f1218;
  --md-code-bg-color: #171b25;
  --md-accent-fg-color: var(--cp-amber);
  --md-accent-fg-color--transparent: rgba(255, 178, 36, 0.12);
  --md-typeset-a-color: #ffc35a;
  --cp-surface: #151924;
  --cp-surface-2: #1b202d;
  --cp-line: rgba(255, 255, 255, 0.09);
  --cp-line-strong: rgba(255, 255, 255, 0.45);
  --cp-text-soft: rgba(226, 232, 245, 0.74);
  --cp-accent-text: #ffc35a;
  --cp-accent-tint: rgba(255, 178, 36, 0.1);
  --cp-accent-line: rgba(255, 178, 36, 0.45);
  --cp-shadow: 0 30px 60px -28px rgba(0, 0, 0, 0.85), 0 6px 18px rgba(0, 0, 0, 0.35);
  --cp-shadow-sm: 0 10px 26px -16px rgba(0, 0, 0, 0.8);
  --cp-focus: #ffd27a;
}

body[data-md-color-scheme="default"][data-md-color-accent="amber"] {
  --md-default-bg-color: #f7f5ef;
  --md-code-bg-color: #edeae1;
  --md-accent-fg-color: #9a5c00;
  --md-accent-fg-color--transparent: rgba(154, 92, 0, 0.1);
  --md-typeset-a-color: #8a5300;
  --cp-surface: #ffffff;
  --cp-surface-2: #fffdf8;
  --cp-line: rgba(28, 22, 6, 0.12);
  --cp-line-strong: rgba(28, 22, 6, 0.55);
  --cp-text-soft: rgba(22, 24, 32, 0.74);
  --cp-accent-text: #8a5300;
  --cp-accent-tint: rgba(255, 178, 36, 0.16);
  --cp-accent-line: rgba(176, 106, 0, 0.55);
  --cp-shadow: 0 30px 56px -30px rgba(46, 32, 0, 0.45), 0 4px 14px rgba(46, 32, 0, 0.1);
  --cp-shadow-sm: 0 12px 26px -18px rgba(46, 32, 0, 0.4);
  --cp-focus: #7a4800;
}

/* ---------- 2. Base ---------- */

body,
input {
  font-family: var(--cp-font);
}

.md-typeset h1,
.md-typeset h2,
.md-typeset h3 {
  font-family: var(--cp-font-display);
  font-weight: 700;
  letter-spacing: -0.012em;
  color: var(--md-default-fg-color);
}
.md-typeset h1 {
  font-size: 2rem;
  line-height: 1.15;
}
.md-typeset h2 {
  font-size: 1.4rem;
  line-height: 1.2;
  margin-top: 2em;
}
.md-typeset h3 {
  font-size: 1.05rem;
  font-weight: 650;
}
.md-typeset a {
  text-decoration: underline;
  text-decoration-color: var(--cp-accent-line);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: color 0.2s, text-decoration-color 0.2s;
}
.md-typeset a:hover {
  text-decoration-color: currentColor;
}
.md-typeset .headerlink,
.md-typeset .md-button,
.md-typeset a.cp-frame {
  text-decoration: none;
}

/* One focus ring for every control that the keyboard can reach. */
a:focus-visible,
button:focus-visible,
.md-typeset a:focus-visible,
.md-typeset .md-button:focus-visible {
  outline: 3px solid var(--cp-focus);
  outline-offset: 3px;
}
.md-header a:focus-visible,
.md-header button:focus-visible,
.md-header label:focus-visible,
.md-tabs a:focus-visible,
.md-footer a:focus-visible,
.cp-hero a:focus-visible {
  outline-color: #ffd27a;
}

.md-header {
  background: rgba(11, 13, 18, 0.92);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  backdrop-filter: saturate(1.4) blur(12px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.07);
}
.md-header__title {
  font-family: var(--cp-font-display);
  font-weight: 700;
  letter-spacing: -0.01em;
}
.md-header__button.md-logo {
  color: var(--cp-amber);
}
.md-tabs {
  background: var(--cp-night);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.07);
}
.md-tabs__link {
  position: relative;
  opacity: 0.78;
  transition: opacity 0.2s, color 0.2s;
}
.md-tabs__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.55rem;
  height: 2px;
  border-radius: 2px;
  background: var(--cp-amber);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.3s var(--cp-ease);
}
.md-tabs__link:hover::after,
.md-tabs__item--active .md-tabs__link::after {
  transform: scaleX(1);
}
.md-tabs__item--active .md-tabs__link {
  opacity: 1;
}

/* Buttons. The hero stands outside the article, so the rules name both places. */
.md-typeset .md-button,
.cp-hero .md-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.2;
  padding: 0.72em 1.5em;
  border: 1.5px solid var(--cp-line-strong);
  border-radius: 10px;
  background: transparent;
  color: var(--md-default-fg-color);
  cursor: pointer;
  transition: transform 0.25s var(--cp-ease), box-shadow 0.25s, background-color 0.25s, border-color 0.25s, color 0.25s;
}
.md-typeset .md-button:hover,
.md-typeset .md-button:focus,
.cp-hero .md-button:hover,
.cp-hero .md-button:focus {
  background: var(--cp-accent-tint);
  border-color: var(--cp-accent-line);
  color: var(--md-default-fg-color);
  transform: translateY(-2px);
}
.md-typeset .md-button--primary,
.cp-hero .md-button--primary {
  background: linear-gradient(180deg, #ffc247, var(--cp-amber));
  border-color: transparent;
  color: var(--cp-amber-ink);
  box-shadow: 0 10px 24px -12px rgba(255, 178, 36, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.45);
}
.md-typeset .md-button--primary:hover,
.md-typeset .md-button--primary:focus,
.cp-hero .md-button--primary:hover,
.cp-hero .md-button--primary:focus {
  background: linear-gradient(180deg, #ffd27a, #ffbd3d);
  border-color: transparent;
  color: var(--cp-amber-ink);
  box-shadow: 0 16px 30px -12px rgba(255, 178, 36, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.55);
}
.md-typeset .md-button:active,
.cp-hero .md-button:active {
  transform: translateY(0);
}
.md-typeset .md-button + .md-button {
  margin-left: 0.5rem;
}

.md-typeset table:not([class]) {
  border: 1px solid var(--cp-line);
  border-radius: var(--cp-radius-sm);
  background: var(--cp-surface);
  box-shadow: none;
}
.md-typeset table:not([class]) th {
  font-size: 0.66rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--cp-text-soft);
}
.md-typeset table:not([class]) tbody tr {
  transition: background-color 0.2s;
}

.md-typeset .cp-tag {
  display: inline-block;
  vertical-align: middle;
  font-family: var(--cp-font);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.6;
  text-transform: uppercase;
  padding: 0.1em 0.8em;
  border-radius: 1em;
  border: 1px solid var(--cp-accent-line);
  background: var(--cp-accent-tint);
  color: var(--cp-accent-text);
  white-space: nowrap;
}

.md-typeset a.cp-more {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-weight: 650;
}
.md-typeset a.cp-more::after {
  content: "";
  width: 0.5em;
  height: 0.5em;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.25s var(--cp-ease);
}
.md-typeset a.cp-more:hover::after {
  transform: translateX(4px) rotate(45deg);
}

/* ---------- 3. Page change and scroll reveal ---------- */

@keyframes cp-rise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
}
@keyframes cp-fade {
  from {
    opacity: 0;
  }
}
@keyframes cp-draw {
  from {
    stroke-dashoffset: 1;
  }
}
@keyframes cp-stage-in {
  from {
    opacity: 0;
    transform: translateY(34px) scale(0.97);
  }
}

@media (prefers-reduced-motion: no-preference) {
  /* A change of page fades where the browser supports it. Other browsers change the page at once. */
  @view-transition {
    navigation: auto;
  }
  ::view-transition-old(root) {
    animation: 0.16s ease both cp-vt-out;
  }
  ::view-transition-new(root) {
    animation: 0.3s var(--cp-ease) both cp-vt-in;
  }
  .md-header {
    view-transition-name: cp-header;
  }
  .md-content {
    animation: cp-rise 0.45s var(--cp-ease) both;
  }

  /* Scroll reveal. The start state exists only while the class cp-js is set by the script. */
  .cp-reveal {
    transition: opacity 0.7s var(--cp-ease), translate 0.7s var(--cp-ease);
  }
  .cp-js .cp-reveal:not(.is-in) {
    opacity: 0;
    translate: 0 26px;
  }
}
@keyframes cp-vt-out {
  to {
    opacity: 0;
  }
}
@keyframes cp-vt-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}

/* ---------- 4. Picture frames ---------- */

/* A window frame around every screenshot. The pictures show dark programs, so the frame is dark in both schemes. */
.cp-frame,
.md-typeset figure.screen a {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--cp-radius);
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: #0d0f15;
  box-shadow: var(--cp-shadow, 0 30px 60px -28px rgba(0, 0, 0, 0.85));
  transition: transform 0.45s var(--cp-ease), box-shadow 0.45s, border-color 0.3s;
}
.cp-frame::before,
.md-typeset figure.screen a::before {
  content: "";
  display: block;
  height: 22px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background:
    radial-gradient(circle at 16px 50%, rgba(255, 178, 36, 0.9) 0 4px, transparent 4.6px),
    radial-gradient(circle at 32px 50%, rgba(255, 255, 255, 0.28) 0 4px, transparent 4.6px),
    radial-gradient(circle at 48px 50%, rgba(255, 255, 255, 0.16) 0 4px, transparent 4.6px),
    linear-gradient(180deg, #1c202c, #151924);
}
.cp-frame--plain::before {
  display: none;
}
.cp-frame img,
.md-typeset figure.screen a img {
  display: block;
  width: 100%;
  height: auto;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
a.cp-frame,
.md-typeset figure.screen a {
  cursor: zoom-in;
}
/* The mark of the enlarged view. It shows on hover and on keyboard focus. */
a.cp-frame::after,
.md-typeset figure.screen a::after {
  content: "";
  position: absolute;
  right: 12px;
  bottom: 12px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: rgba(11, 13, 18, 0.82);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffc35a' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='10.500' cy='10.500' r='5.500'/%3E%3Cpath d='M15 15l4.500 4.500M8 10.500h5M10.500 8v5'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 22px 22px;
  border: 1px solid rgba(255, 178, 36, 0.5);
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.25s, transform 0.25s var(--cp-ease);
}
a.cp-frame:hover,
.md-typeset figure.screen a:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 178, 36, 0.5);
  box-shadow: 0 36px 70px -30px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(255, 178, 36, 0.18), 0 0 60px -20px rgba(255, 178, 36, 0.4);
}
a.cp-frame:hover::after,
a.cp-frame:focus-visible::after,
.md-typeset figure.screen a:hover::after,
.md-typeset figure.screen a:focus-visible::after {
  opacity: 1;
  transform: scale(1);
}
a.cp-frame:focus-visible,
.md-typeset figure.screen a:focus-visible {
  border-radius: var(--cp-radius);
}

/* A detail of a picture. --cx, --cy, --cw and --ch name the region in picture pixels, --iw the picture width. */
.cp-crop {
  --iw: 1400;
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: var(--cw) / var(--ch);
}
.cp-crop + .cp-crop {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.cp-frame .cp-crop img,
.md-typeset .cp-frame .cp-crop img {
  position: absolute;
  left: calc(var(--cx) / var(--cw) * -100%);
  top: calc(var(--cy) / var(--ch) * -100%);
  width: calc(var(--iw) / var(--cw) * 100%);
  max-width: none;
  height: auto;
}

.md-typeset figure.screen,
.md-typeset figure.cp-shot {
  display: block;
  width: auto;
  max-width: 920px;
  margin: 1.4em auto 2.2em;
  text-align: left;
}
.md-typeset figure.cp-shot {
  max-width: none;
  margin: 0;
}
.md-typeset figure.screen p {
  margin: 0;
}
.md-typeset figure.screen figcaption,
.md-typeset figure.cp-shot figcaption,
.cp-hero__visual figcaption {
  position: relative;
  max-width: none;
  margin: 0.9em 0 0;
  padding-left: 1.1em;
  font-size: 0.68rem;
  font-style: normal;
  line-height: 1.5;
  text-align: left;
  color: var(--cp-text-soft);
}
.md-typeset figure.screen figcaption::before,
.md-typeset figure.cp-shot figcaption::before,
.cp-hero__visual figcaption::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.2em;
  bottom: 0.2em;
  width: 3px;
  border-radius: 3px;
  background: var(--cp-amber);
}

/* ---------- 5. Home hero ---------- */

.cp-hero {
  --cp-line-strong: rgba(255, 255, 255, 0.45);
  --cp-accent-tint: rgba(255, 178, 36, 0.12);
  --cp-accent-line: rgba(255, 178, 36, 0.6);
  --md-default-fg-color: var(--cp-snow);
  --cp-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.9), 0 8px 22px rgba(0, 0, 0, 0.45);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  overflow: clip;
  padding: clamp(2rem, 6vw, 4.4rem) 0 clamp(2.6rem, 7vw, 5rem);
  color: var(--cp-snow);
  font-family: var(--cp-font);
  background:
    radial-gradient(52rem 28rem at 88% -12%, rgba(255, 178, 36, 0.22), transparent 62%),
    radial-gradient(40rem 26rem at -8% 112%, rgba(84, 116, 255, 0.18), transparent 62%),
    linear-gradient(180deg, var(--cp-night) 0%, var(--cp-night-2) 58%, #0f1218 100%);
}
/* A fine grid that fades towards the edges. */
.cp-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(ellipse 75% 85% at 68% 42%, #000 15%, transparent 78%);
  mask-image: radial-gradient(ellipse 75% 85% at 68% 42%, #000 15%, transparent 78%);
}
.cp-hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 178, 36, 0.55) 30%, rgba(255, 178, 36, 0.55) 70%, transparent);
}
.cp-hero__route {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  opacity: 0.38;
  pointer-events: none;
}
.cp-route {
  fill: none;
  stroke: var(--cp-amber);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
  vector-effect: non-scaling-stroke;
}
.cp-route--branch {
  stroke: #8fa2ff;
  opacity: 0.55;
}
.cp-node {
  fill: var(--cp-night);
  stroke: var(--cp-amber);
  stroke-width: 2;
}
.cp-node--miss {
  stroke: #8fa2ff;
}
.cp-node--goal {
  fill: var(--cp-amber);
}

.cp-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(1.6rem, 4vw, 3.2rem);
  align-items: center;
  padding: 0 1.2rem;
}
.cp-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  margin: 0 0 1rem;
  padding: 0.3em 0.9em;
  border: 1px solid rgba(255, 178, 36, 0.4);
  border-radius: 2em;
  background: rgba(255, 178, 36, 0.09);
  color: #ffd27a;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.cp-hero__eyebrow::before {
  content: "";
  width: 0.55em;
  height: 0.55em;
  border-radius: 50%;
  background: var(--cp-amber);
  box-shadow: 0 0 0 4px rgba(255, 178, 36, 0.2);
}
.cp-hero h1 {
  margin: 0 0 1rem;
  font-family: var(--cp-font-display);
  font-size: clamp(1.75rem, 4.3vw, 2.75rem);
  font-weight: 750;
  line-height: 1.06;
  letter-spacing: -0.025em;
  color: #ffffff;
  text-wrap: balance;
}
.cp-hero__lead {
  margin: 0 0 1.3rem;
  font-size: 0.92rem;
  line-height: 1.55;
  color: rgba(238, 241, 248, 0.86);
}
.cp-hero__safe {
  display: flex;
  gap: 0.7em;
  align-items: flex-start;
  margin: 0 0 1.5rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-left: 3px solid var(--cp-amber);
  border-radius: var(--cp-radius-sm);
  background: rgba(255, 255, 255, 0.05);
  font-size: 0.76rem;
  line-height: 1.5;
  color: var(--cp-snow);
}
.cp-hero__safe svg {
  flex: none;
  margin-top: 0.05em;
  color: var(--cp-amber);
}
.cp-hero__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin: 0 0 1rem;
}
.cp-hero .md-button {
  font-size: 0.82rem;
  color: var(--cp-snow);
}
.cp-hero .md-button--primary {
  color: var(--cp-amber-ink);
}
.cp-hero__note {
  margin: 0;
  font-size: 0.7rem;
  color: rgba(238, 241, 248, 0.74);
}

.cp-hero__visual {
  margin: 0;
  min-width: 0;
}
.cp-stage {
  --cp-tilt: rotateY(-11deg) rotateX(4deg);
  --cp-tilt-near: rotateY(-5deg) rotateX(2deg);
  position: relative;
  margin: 7% 3% 13% 5%;
  perspective: 1700px;
}
/* The glow behind the pictures. */
.cp-stage::before {
  content: "";
  position: absolute;
  inset: 8% -6% -10% -4%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 178, 36, 0.3), transparent);
  filter: blur(34px);
}
.cp-stage__main {
  transform: var(--cp-tilt);
  transform-origin: 30% 50%;
  translate: 0 calc(var(--cp-scroll, 0) * 22px);
}
.cp-hero__visual:hover .cp-stage__main,
.cp-hero a.cp-stage__main:hover,
.cp-stage__main:focus-visible {
  transform: var(--cp-tilt-near);
  border-color: rgba(255, 178, 36, 0.5);
}
.cp-stage__float {
  position: absolute;
  border-color: rgba(255, 255, 255, 0.22);
  border-radius: 11px;
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.95), 0 0 0 1px rgba(255, 178, 36, 0.14);
}
.cp-stage__float--1 {
  left: -9%;
  bottom: -15%;
  width: 62%;
  translate: 0 calc(var(--cp-scroll, 0) * -46px);
}
.cp-stage__float--2 {
  right: -6%;
  top: -11%;
  width: 46%;
  translate: 0 calc(var(--cp-scroll, 0) * -22px);
}
.cp-stage__label {
  display: flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.45em 0.9em;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background: linear-gradient(180deg, #1c202c, #151924);
  color: #ffd27a;
  font-size: 0.54rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.3;
  text-transform: uppercase;
}
.cp-stage__label::before {
  content: "";
  flex: none;
  width: 0.6em;
  height: 0.6em;
  border-radius: 50%;
  background: var(--cp-amber);
}
.cp-hero__visual figcaption {
  color: rgba(238, 241, 248, 0.74);
  font-size: 0.64rem;
}

@media (prefers-reduced-motion: no-preference) {
  .cp-hero__text > * {
    animation: cp-rise 0.7s var(--cp-ease) both;
  }
  .cp-hero__text > :nth-child(2) {
    animation-delay: 0.06s;
  }
  .cp-hero__text > :nth-child(3) {
    animation-delay: 0.12s;
  }
  .cp-hero__text > :nth-child(4) {
    animation-delay: 0.18s;
  }
  .cp-hero__text > :nth-child(5) {
    animation-delay: 0.24s;
  }
  .cp-hero__text > :nth-child(6) {
    animation-delay: 0.3s;
  }
  .cp-stage {
    animation: cp-stage-in 0.9s var(--cp-ease) 0.1s both;
  }
  .cp-stage__float {
    animation: cp-rise 0.8s var(--cp-ease) both;
  }
  .cp-stage__float--1 {
    animation-delay: 0.45s;
  }
  .cp-stage__float--2 {
    animation-delay: 0.6s;
  }
  .cp-hero__visual figcaption {
    animation: cp-fade 0.8s ease 0.7s both;
  }
  .cp-route {
    animation: cp-draw 1.8s var(--cp-ease) 0.2s both;
  }
  .cp-route--branch {
    animation-delay: 0.9s;
  }
  .cp-node {
    animation: cp-fade 0.6s ease 1.2s both;
  }
}

@media screen and (max-width: 59.9375em) {
  .cp-hero__inner {
    grid-template-columns: minmax(0, 1fr);
    padding: 0 0.8rem;
  }
  .cp-stage {
    --cp-tilt: rotateY(-6deg) rotateX(3deg);
    --cp-tilt-near: rotateY(-3deg) rotateX(1deg);
    margin: 9% 5% 15% 7%;
  }
  .cp-hero__route {
    opacity: 0.32;
  }
}
@media screen and (max-width: 30em) {
  .cp-hero .md-button {
    flex: 1 1 auto;
  }
  .cp-hero__eyebrow {
    font-size: 0.54rem;
    letter-spacing: 0.04em;
  }
  .cp-stage__label {
    padding: 0.3em 0.7em;
    font-size: 0.46rem;
  }
}

/* ---------- 6. Home sections ---------- */

.md-typeset .cp-row {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(1.4rem, 4.5vw, 3.4rem);
  align-items: center;
  margin: clamp(2.6rem, 8vw, 5rem) 0;
}
.md-typeset .cp-row:first-child {
  margin-top: clamp(1.4rem, 4vw, 2.6rem);
}
.md-typeset .cp-row--flip .cp-row__text {
  order: 2;
}
.md-typeset .cp-row__text h2 {
  margin: 0 0 0.7em;
  font-size: 1.55rem;
  text-wrap: balance;
}
.md-typeset .cp-row__text p {
  color: var(--cp-text-soft);
}
.md-typeset .cp-row__text p:last-child {
  margin-bottom: 0;
}
.md-typeset .cp-kicker {
  display: flex;
  align-items: center;
  gap: 0.7em;
  margin: 0 0 0.6rem;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cp-accent-text);
}
.md-typeset .cp-row__text p.cp-kicker {
  color: var(--cp-accent-text);
}
.md-typeset .cp-kicker::before {
  content: "";
  width: 1.8em;
  height: 2px;
  border-radius: 2px;
  background: var(--cp-amber);
}
.md-typeset .cp-shot {
  position: relative;
  isolation: isolate;
}
/* A soft light behind each picture of a row. */
.md-typeset .cp-row .cp-shot::before {
  content: "";
  position: absolute;
  inset: 12% 6% 6%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 178, 36, 0.22), transparent);
  filter: blur(30px);
}
.md-typeset .cp-sample-note {
  margin: 0 0 clamp(2rem, 6vw, 3.4rem);
  font-size: 0.68rem;
  color: var(--cp-text-soft);
  text-align: center;
}
@media screen and (max-width: 59.9375em) {
  .md-typeset .cp-row {
    grid-template-columns: minmax(0, 1fr);
  }
  .md-typeset .cp-row--flip .cp-row__text {
    order: 0;
  }
}

/* Cards: the two programs on the home page and the two downloads. */
.md-typeset .cp-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: 1.1rem;
  margin: 1.4em 0 2em;
}
.md-typeset .cp-card {
  position: relative;
  overflow: hidden;
  padding: 1.3rem 1.4rem 1.4rem;
  border: 1px solid var(--cp-line);
  border-radius: var(--cp-radius);
  background: linear-gradient(180deg, var(--cp-surface-2), var(--cp-surface));
  box-shadow: var(--cp-shadow-sm);
  transition: transform 0.35s var(--cp-ease), box-shadow 0.35s, border-color 0.35s, opacity 0.7s var(--cp-ease), translate 0.7s var(--cp-ease);
}
.md-typeset .cp-card::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--cp-amber), rgba(255, 178, 36, 0));
}
.md-typeset .cp-card:hover,
.md-typeset .cp-card:focus-within {
  transform: translateY(-4px);
  border-color: var(--cp-accent-line);
  box-shadow: var(--cp-shadow);
}
.md-typeset .cp-cards .cp-card:nth-child(2) {
  transition-delay: 0s, 0s, 0s, 0.12s, 0.12s;
}
.md-typeset .cp-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  margin-bottom: 0.9rem;
  border: 1px solid var(--cp-accent-line);
  border-radius: 12px;
  background: var(--cp-accent-tint);
  color: var(--cp-accent-text);
}
.md-typeset .cp-card__icon svg {
  width: 1.9rem;
  height: 1.9rem;
}
.md-typeset .cp-card h2,
.md-typeset .cp-card h3 {
  margin: 0 0 0.6em;
  font-size: 1.2rem;
}
.md-typeset .cp-card h2 .cp-tag,
.md-typeset .cp-card h3 .cp-tag {
  margin-left: 0.4em;
}
.md-typeset .cp-card > p:last-child {
  margin-bottom: 0;
}

/* The four steps of "How it works". */
.md-typeset ol.cp-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  margin: 1.4em 0 2em;
  padding: 0;
  list-style: none;
  counter-reset: cp-step;
}
.md-typeset ol.cp-steps li {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.9rem;
  margin: 0;
  padding: 3.4rem 1.1rem 1.1rem;
  border: 1px solid var(--cp-line);
  border-radius: var(--cp-radius);
  background: var(--cp-surface);
  counter-increment: cp-step;
  transition: transform 0.35s var(--cp-ease), border-color 0.35s, opacity 0.7s var(--cp-ease), translate 0.7s var(--cp-ease);
}
.md-typeset ol.cp-steps li::before {
  content: counter(cp-step);
  position: absolute;
  left: 1.1rem;
  top: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 50%;
  background: var(--cp-amber);
  color: var(--cp-amber-ink);
  font-family: var(--cp-font-display);
  font-size: 0.85rem;
  font-weight: 750;
}
/* The line that joins a step to the next one. */
.md-typeset ol.cp-steps li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 3.3rem;
  right: -1.1rem;
  top: 1.85rem;
  height: 2px;
  background: linear-gradient(90deg, var(--cp-accent-line), transparent);
}
.md-typeset ol.cp-steps li:hover {
  transform: translateY(-3px);
  border-color: var(--cp-accent-line);
}
.md-typeset ol.cp-steps li:nth-child(2) {
  transition-delay: 0s, 0s, 0.08s, 0.08s;
}
.md-typeset ol.cp-steps li:nth-child(3) {
  transition-delay: 0s, 0s, 0.16s, 0.16s;
}
.md-typeset ol.cp-steps li:nth-child(4) {
  transition-delay: 0s, 0s, 0.24s, 0.24s;
}
.md-typeset .cp-steps__what {
  flex: 1;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.4;
}
@media screen and (max-width: 59.9375em) {
  .md-typeset ol.cp-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .md-typeset ol.cp-steps li::after {
    display: none;
  }
}
@media screen and (max-width: 30em) {
  .md-typeset ol.cp-steps {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* What the programs do not do. */
.md-typeset .cp-nots ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: 0.9rem;
  margin: 1.2em 0;
  padding: 0;
  list-style: none;
}
.md-typeset .cp-nots ul li {
  position: relative;
  margin: 0;
  padding: 0.9rem 1rem 0.9rem 3.1rem;
  border: 1px solid var(--cp-line);
  border-radius: var(--cp-radius-sm);
  background: var(--cp-surface);
  font-weight: 600;
}
/* A crossed circle, drawn with two gradients. */
.md-typeset .cp-nots ul li::before {
  content: "";
  position: absolute;
  left: 1rem;
  top: 50%;
  width: 1.4rem;
  height: 1.4rem;
  margin-top: -0.7rem;
  border: 2px solid var(--cp-accent-text);
  border-radius: 50%;
  background: linear-gradient(45deg, transparent calc(50% - 1px), var(--cp-accent-text) calc(50% - 1px), var(--cp-accent-text) calc(50% + 1px), transparent calc(50% + 1px));
  box-sizing: border-box;
}

/* The closing block. */
.md-typeset .cp-cta {
  position: relative;
  overflow: hidden;
  margin: clamp(2.4rem, 7vw, 4rem) 0 1rem;
  padding: clamp(1.4rem, 4vw, 2.4rem);
  border: 1px solid var(--cp-accent-line);
  border-radius: calc(var(--cp-radius) + 4px);
  background:
    radial-gradient(34rem 16rem at 100% 0%, rgba(255, 178, 36, 0.2), transparent 65%),
    linear-gradient(180deg, var(--cp-surface-2), var(--cp-surface));
  box-shadow: var(--cp-shadow-sm);
}
.md-typeset .cp-cta h2 {
  margin-top: 0;
}
.md-typeset .cp-cta p {
  max-width: 44rem;
}
.md-typeset .cp-cta p:last-child {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin: 1.4em 0 0;
}
.md-typeset .cp-cta .md-button + .md-button {
  margin-left: 0;
}

/* ---------- 7. Download cards ---------- */

.md-typeset .cp-cards--download {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  align-items: stretch;
}
.md-typeset .cp-cards--download .cp-card {
  display: flex;
  flex-direction: column;
}
.md-typeset .cp-cards--download .cp-card__icon {
  align-self: flex-start;
}
.md-typeset .cp-cards--download .cp-card > p:last-child {
  margin-top: auto;
  padding-top: 0.4rem;
  font-size: 0.7rem;
  color: var(--cp-text-soft);
}
.md-typeset .cp-cards--download .md-button {
  width: 100%;
}
.md-typeset table.cp-specs {
  display: table;
  width: 100%;
  margin: 0.6rem 0 1.2rem;
  border-collapse: collapse;
  font-size: 0.7rem;
  line-height: 1.45;
}
.md-typeset table.cp-specs th,
.md-typeset table.cp-specs td {
  padding: 0.6em 0;
  border-top: 1px solid var(--cp-line);
  text-align: left;
  vertical-align: top;
}
.md-typeset table.cp-specs tr:last-child th,
.md-typeset table.cp-specs tr:last-child td {
  border-bottom: 1px solid var(--cp-line);
}
.md-typeset table.cp-specs th {
  width: 38%;
  padding-right: 1em;
  font-weight: 600;
  color: var(--cp-text-soft);
}
.md-typeset table.cp-specs td {
  overflow-wrap: anywhere;
}

/* ---------- 8. Enlarged picture view ---------- */

.cp-lightbox {
  width: 100vw;
  max-width: 100vw;
  height: 100vh;
  height: 100dvh;
  max-height: 100dvh;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--cp-snow);
  font-family: var(--cp-font);
  overflow: hidden;
}
.cp-lightbox::backdrop {
  background: rgba(5, 6, 9, 0.9);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.cp-lightbox__inner {
  box-sizing: border-box;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 0.6rem;
  width: 100%;
  height: 100%;
  padding: 0.7rem clamp(0.6rem, 3vw, 2rem) 0.9rem;
}
.cp-lightbox__bar {
  display: flex;
  justify-content: flex-end;
}
.cp-lightbox__close {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.5em 1em;
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  border-radius: 10px;
  background: rgba(20, 23, 32, 0.9);
  color: var(--cp-snow);
  font: 700 0.72rem/1.2 var(--cp-font);
  cursor: pointer;
  transition: border-color 0.2s, background-color 0.2s;
}
.cp-lightbox__close:hover {
  border-color: var(--cp-amber);
  background: rgba(255, 178, 36, 0.14);
}
.cp-lightbox__close:focus-visible,
.cp-lightbox a:focus-visible {
  outline: 3px solid #ffd27a;
  outline-offset: 3px;
}
.cp-lightbox__view {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  cursor: zoom-out;
}
.cp-lightbox__view img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 10px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.8);
  cursor: default;
}
.cp-lightbox__caption {
  max-width: 60rem;
  margin: 0 auto;
  font-size: 0.7rem;
  line-height: 1.5;
  text-align: center;
  color: rgba(238, 241, 248, 0.86);
}
.cp-lightbox__caption a {
  color: #ffc35a;
  font-weight: 650;
  white-space: nowrap;
}
html.cp-lock,
html.cp-lock body {
  overflow: hidden;
}
@media (prefers-reduced-motion: no-preference) {
  .cp-lightbox[open] .cp-lightbox__view img {
    animation: cp-zoom-in 0.32s var(--cp-ease) both;
  }
  .cp-lightbox[open]::backdrop {
    animation: cp-fade 0.25s ease both;
  }
}
@keyframes cp-zoom-in {
  from {
    opacity: 0;
    transform: scale(0.94);
  }
}

/* ---------- 9. Footer ---------- */

.md-footer-meta {
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}
.cp-disclaimer {
  font-weight: 700;
}
.cp-footer-links {
  margin: 0.3em 0;
}
.cp-footer-links a {
  margin-right: 1.2em;
}
html .md-footer-meta.md-typeset a:hover,
html .md-footer-meta.md-typeset a:focus {
  color: #ffc35a;
}

/* ---------- 10. Reduced motion and print ---------- */

@media (prefers-reduced-motion: reduce) {
  .cp-reveal,
  .cp-js .cp-reveal:not(.is-in) {
    opacity: 1;
    translate: none;
    transition: none;
  }
  .cp-stage__main,
  .cp-stage__float {
    translate: none;
  }
  .cp-frame,
  .md-typeset figure.screen a,
  .md-typeset .cp-card,
  .md-typeset ol.cp-steps li,
  .md-typeset .md-button,
  .cp-hero .md-button,
  .md-tabs__link::after,
  .md-typeset a.cp-more::after {
    transition: none;
  }
  a.cp-frame:hover,
  .md-typeset figure.screen a:hover,
  .md-typeset .cp-card:hover,
  .md-typeset .cp-card:focus-within,
  .md-typeset ol.cp-steps li:hover,
  .md-typeset .md-button:hover,
  .md-typeset .md-button:focus,
  .cp-hero .md-button:hover,
  .cp-hero .md-button:focus {
    transform: none;
  }
  .cp-hero__visual:hover .cp-stage__main,
  .cp-hero a.cp-stage__main:hover,
  .cp-stage__main:focus-visible {
    transform: var(--cp-tilt);
  }
}

@media print {
  .cp-js .cp-reveal:not(.is-in) {
    opacity: 1;
    translate: none;
  }
}