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

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role="list"],
ol[role="list"] {
  list-style: none;
}

/* Set core root defaults */
html:focus-within {
  scroll-behavior: smooth;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
}

/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}

/* Remove all animations and transitions for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* end reset */

@font-face {
  font-family: "Archivo";
  src: url("assets/fonts/archivo-latin.woff2") format("woff2");
  font-weight: 600 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("assets/fonts/source-sans-3-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("assets/fonts/ibm-plex-mono-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --canopy: #163a2f;
  --river-ink: #102a33;
  --clear-sky: #eaf4f8;
  --grove-green: #1f7a53;
  --new-growth: #b9e769;
  --signal-coral: #ef6a4c;
  --white: #fff;
  --sky-line: #bed6dc;
  --muted: #45636a;
  --shadow: 0 18px 48px rgba(16, 42, 51, 0.13);
  --content-width: 1240px;
  --page-gutter: clamp(1.25rem, 4vw, 3rem);
  --display: "Archivo", "Arial Narrow", sans-serif;
  --body: "Source Sans 3", Arial, sans-serif;
  --mono: "IBM Plex Mono", monospace;
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}
body {
  margin: 0;
  background: var(--clear-sky);
  color: var(--river-ink);
  font-family: var(--body);
  font-size: 1.08rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
::selection {
  background: var(--new-growth);
  color: var(--canopy);
}
a {
  color: inherit;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.24em;
}
a:hover {
  text-decoration-color: var(--signal-coral);
}
button,
a {
  touch-action: manipulation;
}
:focus-visible {
  outline: 3px solid var(--canopy);
  outline-offset: 4px;
  border-radius: 4px;
}
.site-footer :focus-visible {
  outline-color: var(--new-growth);
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  position: fixed;
  z-index: 100;
  top: 1rem;
  left: 1rem;
  padding: 0.7rem 1rem;
  background: var(--white);
  color: var(--canopy);
  transform: translateY(-180%);
}
.skip-link:focus {
  transform: translateY(0);
}
/* The header sticks to the top of the viewport. Its background is transparent
   at rest so the hero reads as one open field, but the rule under the
   navigation stays visible throughout. Once the page scrolls the header picks
   up a backdrop, because the ownership, pricing, closing and footer bands are
   dark and would otherwise swallow the near-black navigation text. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.35rem
    max(var(--page-gutter), calc((100vw - var(--content-width)) / 2));
  border-bottom: 1.5px solid var(--sky-line);
  transition:
    background 0.2s ease-out,
    box-shadow 0.2s ease-out;
}
.site-header.is-pinned {
  background: var(--clear-sky);
  box-shadow: 0 6px 20px rgba(16, 42, 51, 0.07);
}
.brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.brand img {
  display: block;
  height: auto;
  max-width: 100%;
}
.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 2.25rem);
  font-size: 0.94rem;
  font-weight: 600;
}
.site-nav a {
  text-decoration: none;
}
.site-nav > a:not(.header-cta):hover {
  color: var(--grove-green);
}
.header-cta {
  padding: 0.72rem 1.05rem;
  border: 1px solid var(--canopy);
  border-radius: 10px;
  background: var(--canopy);
  color: var(--white);
  box-shadow: 0 7px 18px rgba(22, 58, 47, 0.13);
}
.header-cta:hover {
  background: var(--grove-green);
}
.nav-toggle {
  display: none;
  border: 0;
  background: transparent;
  min-width: 44px;
  min-height: 44px;
  color: var(--canopy);
}
.nav-toggle-lines,
.nav-toggle-lines::before,
.nav-toggle-lines::after {
  display: block;
  width: 24px;
  height: 2px;
  background: currentColor;
  content: "";
  transition: transform 0.2s ease-out;
}
.nav-toggle-lines::before {
  transform: translateY(-7px);
}
.nav-toggle-lines::after {
  transform: translateY(5px);
}

.hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(3rem, 5vw, 5rem);
  min-height: 720px;
  padding: clamp(4rem, 7vw, 7rem)
    max(var(--page-gutter), calc((100vw - var(--content-width)) / 2));
  overflow: hidden;
}
.hero-copy {
  position: relative;
  z-index: 3;
  min-width: 0;
}
/* Full-bleed rule under the eyebrow. It hangs off .hero-context rather than
   sitting at a fixed offset in .hero, so it tracks the eyebrow wherever the
   headline pushes it instead of cutting through the h1 when type changes. */
/* The eyebrow sits on the content rail's left edge, so the rule bleeds out by
   exactly one page inset on each side to reach both viewport edges. */
.hero-context::after {
  --hero-rule-inset: max(
    var(--page-gutter),
    calc((100vw - var(--content-width)) / 2)
  );
  position: absolute;
  content: "";
  left: calc(var(--hero-rule-inset) * -1);
  top: calc(100% + 0.75rem);
  width: 100vw;
  height: 1px;
  background: var(--sky-line);
}
.hero-context {
  position: relative;
  margin: 0 0 1.5rem;
  color: var(--grove-green);
  font-family: var(--mono);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
h1,
h2,
h3 {
  font-family: var(--display);
  line-height: 1.02;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
h1 {
  max-width: 16ch;
  margin: 0;
  font-size: clamp(3.4rem, 5.4vw, 5.1rem);
  font-weight: 750;
  letter-spacing: -0.045em;
}
h1 span.green {
  color: var(--grove-green);
}
.hero-title-sub {
  display: block;
  margin-top: 0.5rem;
  max-width: 20ch;
  font-size: 0.46em;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.15;
  color: var(--muted);
}
.hero-intro {
  max-width: 62ch;
  margin: 2rem 0 0;
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  color: var(--muted);
}
.hero-actions {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  margin-top: 2rem;
  flex-wrap: wrap;
}
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 0.78rem 1.35rem;
  border-radius: 12px;
  font-weight: 700;
  text-decoration: none;
  transition:
    background 0.2s ease-out,
    color 0.2s ease-out,
    transform 0.2s ease-out,
    box-shadow 0.2s ease-out;
}
.button:hover {
  transform: translateY(-2px);
}
.button-primary {
  background: var(--signal-coral);
  color: #23130f;
  box-shadow: 0 10px 24px rgba(129, 53, 35, 0.18);
}
.button-primary:hover {
  background: #f17d63;
  box-shadow: 0 14px 30px rgba(129, 53, 35, 0.24);
}
.text-link {
  font-weight: 650;
  color: var(--canopy);
}
.deployment-route {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--route-max-width, none);
  min-width: 0;
  margin: 0 0 0 auto;
}
.route-lines {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.route-lines path {
  fill: none;
  stroke-linecap: round;
}
.route-base {
  stroke: var(--canopy);
  stroke-width: 6;
}
/* Dash values track the route path length (~574 user units); the flow starts as
   a short travelling segment and grows to cover the full route on arrival. */
.route-flow {
  stroke: var(--new-growth);
  stroke-width: 4;
  stroke-dasharray: 18 580;
  stroke-dashoffset: 0;
}
.route-branch {
  stroke: var(--sky-line);
  stroke-width: 2;
  stroke-dasharray: 6 8;
}
.route-stop {
  fill: var(--clear-sky);
  stroke: var(--canopy);
  stroke-width: 4;
}
.route-stop-live {
  fill: var(--new-growth);
}
.route-stop-note {
  fill: var(--signal-coral);
  stroke-width: 2;
}
.route-code {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.12em;
  fill: var(--grove-green);
}
.route-name {
  font-family: var(--display);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.02em;
  fill: var(--river-ink);
}
.route-note {
  font-family: var(--mono);
  font-size: 13px;
  fill: var(--muted);
}
.deployment-route.is-ready .route-flow {
  animation: travel 2.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.deployment-route.is-ready .route-stop-live {
  animation: arrive 0.6s 1.8s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes travel {
  to {
    stroke-dasharray: 580 8;
  }
}
/* transform-origin must match the live stop's viewBox coordinates, otherwise
   the scale displaces the circle away from the end of the route. */
@keyframes arrive {
  0% {
    transform: scale(0.6);
    transform-origin: 580px 66px;
  }
  100% {
    transform: scale(1);
    transform-origin: 580px 66px;
  }
}

.ownership {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 6vw, 7rem);
  padding: clamp(4rem, 8vw, 7rem)
    max(var(--page-gutter), calc((100vw - var(--content-width)) / 2));
  background: var(--canopy);
  color: var(--white);
}
.ownership h2 {
  max-width: 12ch;
  margin: 0;
  font-size: clamp(2.6rem, 5vw, 4.8rem);
  color: var(--new-growth);
}
.ownership p {
  max-width: 31ch;
  margin: auto 0;
  font-size: clamp(1.25rem, 2.5vw, 1.8rem);
  color: #d5ebe4;
}
.section {
  padding: clamp(5rem, 9vw, 9rem)
    max(var(--page-gutter), calc((100vw - var(--content-width)) / 2));
}
.section-heading {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(260px, 0.7fr);
  align-items: end;
  gap: 3rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid var(--sky-line);
}
.section-heading h2,
.responsibility h2 {
  max-width: 13ch;
  margin: 0;
  font-size: clamp(2.7rem, 5vw, 4.8rem);
}
.section-heading p {
  max-width: 42ch;
  margin: 0;
  color: var(--muted);
  font-size: 1.2rem;
}
.process-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.process-list li {
  display: grid;
  grid-template-columns: 1.75rem 1fr;
  gap: 1rem;
  padding: 2.2rem 0;
  border-bottom: 1px solid var(--sky-line);
}
.step-number {
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--grove-green);
}
.process-list h3 {
  margin: 0 0 0.55rem;
  font-size: clamp(1.5rem, 3vw, 2.35rem);
}
.process-list p {
  max-width: 64ch;
  margin: 0;
  color: var(--muted);
}
.capabilities {
  background: var(--white);
}
.capabilities > .section-heading,
.capability-ledger,
.stack-line {
  max-width: none;
  margin-left: auto;
  margin-right: auto;
}
.capability-ledger article {
  display: grid;
  grid-template-columns: minmax(230px, 0.75fr) minmax(280px, 1.4fr) minmax(
      170px,
      0.55fr
    );
  gap: 2.5rem;
  align-items: baseline;
  padding: 2rem 0;
  border-bottom: 1px solid #cfdddf;
}
.capability-ledger h3 {
  margin: 0;
  font-size: 1.45rem;
}
.capability-ledger p {
  max-width: 58ch;
  margin: 0;
  color: var(--muted);
}
.capability-ledger span {
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--grove-green);
  text-align: right;
}
.stack-line {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 3rem;
  flex-wrap: wrap;
}
.stack-line span {
  margin-right: auto;
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.stack-line strong {
  padding: 0.5rem 0.8rem;
  border: 1px solid #bad0cb;
  border-radius: 999px;
  font-size: 0.88rem;
  color: var(--canopy);
}
.responsibility {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: clamp(3rem, 7vw, 8rem);
}
.responsibility-intro p {
  max-width: 40ch;
  color: var(--muted);
}
.responsibility-table {
  border-top: 3px solid var(--canopy);
}
.responsibility-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  padding: 1.1rem 0.4rem;
  border-bottom: 1px solid var(--sky-line);
}
.responsibility-row span:last-child {
  color: var(--muted);
}
.responsibility-head {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.responsibility-head span:last-child {
  color: var(--river-ink);
}
.pricing {
  background: var(--canopy);
  color: var(--white);
}
.pricing-lead {
  display: grid;
  grid-template-columns: 1.1fr 0.8fr;
  align-items: end;
  gap: clamp(2rem, 7vw, 8rem);
  margin: auto;
  padding-bottom: 3rem;
  border-bottom: 1px solid rgba(213, 235, 228, 0.35);
}
.pricing-lead h2 {
  max-width: 12ch;
  margin: 0;
  color: var(--new-growth);
  font-size: clamp(2.7rem, 5vw, 4.8rem);
}
.pricing-lead p {
  max-width: 40ch;
  margin: 0;
  color: #d5ebe4;
  font-size: 1.2rem;
}
.pricing-routes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(2rem, 5vw, 4rem);
  margin: auto;
}
.pricing-route {
  padding: clamp(2rem, 4vw, 3.5rem) 0 2rem;
}
.pricing-routes .pricing-route + .pricing-route {
  border-top: 1px solid var(--sky-line);
}
@media (min-width: 861px) {
  .pricing-routes .pricing-route + .pricing-route {
    padding-left: clamp(2rem, 5vw, 4rem);
    border-top: 0;
    border-left: 1px solid var(--sky-line);
  }
}
.price-top {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2rem;
  align-items: start;
}
.price-top h3 {
  margin: 0;
  font-size: clamp(1.7rem, 3vw, 2.5rem);
}
.price-top p:not(.price) {
  margin: 0.5rem 0 0;
  color: #bcd6cf;
}
.price {
  display: grid;
  justify-items: end;
  margin: 0;
  font-variant-numeric: tabular-nums;
}
.price strong {
  font-family: var(--display);
  font-size: clamp(3rem, 5vw, 4.8rem);
  line-height: 0.85;
  letter-spacing: -0.04em;
  color: var(--new-growth);
}
.price .currency {
  font-size: 0.52em;
  vertical-align: top;
}
.price > span {
  margin-top: 0.55rem;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.05em;
  color: #bcd6cf;
  text-transform: uppercase;
}
.price-list {
  list-style: none;
  margin: 2.5rem 0;
  padding: 0;
  border-top: 1px solid rgba(213, 235, 228, 0.35);
}
.price-list li {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1rem 0;
  border-bottom: 1px solid rgba(213, 235, 228, 0.2);
}
.price-list span {
  color: #bcd6cf;
}
.price-list strong {
  text-align: right;
}
.button-hosted {
  background: var(--signal-coral);
  color: #281610;
}
.button-hosted:hover {
  background: #f17d63;
}
.pricing :focus-visible {
  outline-color: var(--new-growth);
}
.pricing-note {
  margin: 1rem auto 0;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(213, 235, 228, 0.35);
  color: #bcd6cf;
  font-size: 0.95rem;
}
.faq {
  display: grid;
  grid-template-columns: 0.7fr 1.3fr;
  gap: clamp(3rem, 8vw, 9rem);
  border-top: 1px solid var(--sky-line);
}
.faq .section-heading {
  display: block;
  border: 0;
  padding: 0;
}
.faq-list {
  border-top: 3px solid var(--canopy);
}
.faq details {
  border-bottom: 1px solid var(--sky-line);
}
.faq summary {
  position: relative;
  padding: 1.35rem 3rem 1.35rem 0;
  cursor: pointer;
  font-family: var(--display);
  font-size: 1.18rem;
  font-weight: 650;
  list-style: none;
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary::after {
  position: absolute;
  right: 0.2rem;
  content: "+";
  font-family: var(--mono);
  color: var(--grove-green);
}
.faq details[open] summary::after {
  content: "−";
}
.faq details p {
  max-width: 65ch;
  margin: 0 0 1.4rem;
  color: var(--muted);
}
.closing {
  position: relative;
  overflow: hidden;
  padding: clamp(5rem, 10vw, 10rem)
    max(var(--page-gutter), calc((100vw - var(--content-width)) / 2));
  background: var(--signal-coral);
  color: #281610;
}
.closing h2 {
  position: relative;
  z-index: 2;
  max-width: 14ch;
  margin: 0;
  font-size: clamp(3rem, 6vw, 5.8rem);
}
.closing p {
  position: relative;
  z-index: 2;
  max-width: 52ch;
  margin: 1.5rem 0 2rem;
  font-size: 1.25rem;
}
.button-light {
  position: relative;
  z-index: 2;
  background: var(--canopy);
  color: var(--white);
  box-shadow: 0 12px 28px rgba(55, 22, 15, 0.18);
}
.button-light:hover {
  background: var(--river-ink);
}
.closing-route {
  position: absolute;
  right: -4rem;
  top: 0;
  width: 42%;
  height: 100%;
  border-left: 3px solid rgba(40, 22, 16, 0.8);
}
.closing-route span {
  position: absolute;
  left: 0;
  width: 85%;
  height: 2px;
  background: rgba(40, 22, 16, 0.8);
  transform-origin: left;
}
.closing-route span:nth-child(1) {
  top: 25%;
  transform: rotate(-20deg);
}
.closing-route span:nth-child(2) {
  top: 50%;
  transform: rotate(0);
}
.closing-route span:nth-child(3) {
  top: 75%;
  transform: rotate(20deg);
}
.site-footer {
  display: flex;
  align-items: center;
  gap: 2rem;
  padding: 2rem
    max(var(--page-gutter), calc((100vw - var(--content-width)) / 2));
  background: var(--river-ink);
  color: #d9e8ea;
  font-size: 0.9rem;
}
.footer-brand {
  filter: brightness(0) invert(1);
}
.site-footer p {
  margin-right: auto;
}
.site-footer > a:last-child {
  font-weight: 700;
  color: var(--new-growth);
}

@media (max-width: 1100px) {
  .hero {
    grid-template-columns: 1fr;
    align-content: start;
    gap: 0;
    min-height: auto;
  }
  /* Stacked under the copy the route would otherwise run the full content
     width and overpower the headline, so cap it and keep it left-aligned. */
  .deployment-route {
    max-width: 620px;
    margin: 2.5rem auto 0 0;
  }
  .ownership,
  .responsibility,
  .faq {
    grid-template-columns: 1fr;
  }
  .section-heading,
  .pricing-lead {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .capability-ledger article {
    grid-template-columns: 1fr;
    gap: 0.55rem;
  }
  .capability-ledger span {
    text-align: left;
  }
  .faq {
    gap: 2rem;
  }
}
@media (max-width: 760px) {
  html {
    scroll-padding-top: 5rem;
  }
  .site-header {
    padding: 0.9rem 1.1rem;
  }
  .brand img {
    width: 175px;
  }
  .nav-toggle {
    display: grid;
    place-items: center;
  }
  .site-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 1rem;
    right: 1rem;
    align-items: stretch;
    padding: 1rem;
    background: var(--white);
    border-radius: 14px;
    box-shadow: var(--shadow);
  }
  .site-nav.is-open {
    display: grid;
  }
  .site-nav a {
    min-height: 44px;
    padding: 0.7rem;
  }
  .header-cta {
    text-align: center;
  }
  .hero {
    padding-top: 4rem;
  }
  h1 {
    font-size: clamp(3rem, 14vw, 4.7rem);
  }
  .hero-actions {
    align-items: flex-start;
    flex-direction: column;
  }
  /* The route keeps its aspect ratio, so on narrow screens it renders small.
     Scale the type up in viewBox units to hold the labels legible. */
  .route-code {
    font-size: 17px;
  }
  .route-name {
    font-size: 24px;
  }
  .route-note {
    font-size: 17px;
  }
  .ownership {
    grid-template-columns: 1fr;
  }
  .process-list li {
    grid-template-columns: 2rem 1fr;
    gap: 1rem;
  }
  .responsibility-row {
    gap: 0.75rem;
    font-size: 0.94rem;
  }
  .site-footer {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.8rem;
  }
  .site-footer p {
    margin: 0;
  }
  .closing-route {
    opacity: 0.45;
    width: 60%;
  }
}
@media (max-width: 430px) {
  .route-code {
    font-size: 22px;
  }
  .route-name {
    font-size: 31px;
  }
  .route-note {
    font-size: 22px;
  }
  .responsibility-row {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .responsibility-head {
    display: none;
  }
  .responsibility-row span::before {
    content: attr(data-owner);
    display: block;
    margin-bottom: 0.25rem;
    font-family: var(--mono);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--river-ink);
  }
  .price-top {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .price {
    justify-items: start;
  }
  .price-list li {
    display: grid;
    gap: 0.2rem;
  }
  .price-list strong {
    text-align: left;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .button:hover {
    transform: none;
  }
}