:root {
  --blue: #087ef1;
  --blue-deep: #075bb0;
  --ink: #111820;
  --muted: #5b6672;
  --paper: #ffffff;
  --soft: #f3f5f7;
  --line: #d8dde3;
  --code: #121a23;
  --code-line: #2a3540;
  --content: 1180px;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  --sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-width: 320px;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

:focus-visible {
  outline: 3px solid #ffb42a;
  outline-offset: 3px;
}

::selection {
  color: #fff;
  background: var(--blue);
}

.status-strip {
  display: flex;
  justify-content: space-between;
  min-height: 30px;
  padding: 7px max(24px, calc((100vw - var(--content)) / 2));
  color: #fff;
  background: var(--blue);
  font: 700 10px/1.5 var(--mono);
  letter-spacing: 0.12em;
}

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: min(var(--content), calc(100% - 48px));
  min-height: 88px;
  margin: 0 auto;
  border-bottom: 1px solid var(--line);
}

.wordmark,
.footer-mark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  font-size: 25px;
  font-weight: 760;
  letter-spacing: -0.045em;
  text-decoration: none;
}

.wordmark img {
  width: 34px;
  height: 34px;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(20px, 3vw, 42px);
}

.site-nav a {
  position: relative;
  padding: 34px 0 31px;
  color: #2c343d;
  font-size: 14px;
  font-weight: 650;
  text-decoration: none;
}

.site-nav a::after {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 2px;
  background: var(--blue);
  content: "";
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 180ms ease;
}

.site-nav a:hover::after,
.site-nav a.active::after {
  transform: scaleX(1);
  transform-origin: left;
}

.home-page main,
.packages-main {
  width: min(var(--content), calc(100% - 48px));
  margin: 0 auto;
}

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.03fr) minmax(380px, 0.82fr);
  align-items: center;
  gap: clamp(56px, 8vw, 110px);
  min-height: 660px;
  padding: 88px 0 92px;
}

.section-label,
.doc-kicker {
  margin: 0 0 27px;
  color: var(--muted);
  font: 700 11px/1.4 var(--mono);
  letter-spacing: 0.13em;
}

.section-label span {
  display: inline-block;
  margin-right: 13px;
  color: var(--blue);
}

.hero h1,
.packages-hero h1,
.docs-hero h1 {
  margin: 0;
  font-size: clamp(54px, 6.2vw, 88px);
  font-weight: 760;
  line-height: 0.98;
  letter-spacing: -0.065em;
  text-wrap: balance;
}

.hero-lede {
  max-width: 640px;
  margin: 32px 0 0;
  color: #46515d;
  font-size: clamp(19px, 2vw, 23px);
  line-height: 1.55;
  letter-spacing: -0.018em;
  text-wrap: pretty;
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 40px;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  min-height: 50px;
  padding: 0 20px;
  border: 1px solid var(--ink);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: color 150ms ease, background 150ms ease, border-color 150ms ease;
}

.button-primary {
  color: #fff;
  border-color: var(--blue);
  background: var(--blue);
}

.button-primary:hover {
  border-color: var(--blue-deep);
  background: var(--blue-deep);
}

.button-quiet:hover {
  color: #fff;
  background: var(--ink);
}

.preview-note {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  max-width: 570px;
  margin: 24px 0 0;
  color: #6c7580;
  font: 12px/1.55 var(--mono);
}

.status-dot {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  margin-top: 6px;
  border-radius: 50%;
  background: #ffb42a;
}

.code-window {
  overflow: hidden;
  color: #eaf2f9;
  border: 1px solid #0b1118;
  background: var(--code);
  box-shadow: 12px 12px 0 #dce8f4;
}

.code-titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 40px;
  padding: 0 16px;
  color: #aab8c5;
  border-bottom: 1px solid var(--code-line);
  font: 10px/1 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.code-window pre,
.terminal pre {
  margin: 0;
  overflow: auto;
}

.code-window pre code {
  display: block;
  padding: clamp(25px, 3vw, 38px);
  color: #eaf2f9;
  font: 13px/1.8 var(--mono);
  white-space: pre;
}

.hero-code {
  position: relative;
  transform: translateY(5px);
}

.hero-code::before {
  position: absolute;
  top: 39px;
  bottom: 48px;
  left: 46px;
  width: 1px;
  background: #22303d;
  content: "";
}

.hero-code pre code {
  padding-left: 70px;
}

.code-result {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 25px;
  padding: 15px 18px;
  color: #8fa1b1;
  border-top: 1px solid var(--code-line);
  background: #0d141b;
  font: 11px/1.4 var(--mono);
}

.code-result strong {
  color: #7cc3ff;
  font-weight: 500;
}

.ruled-section {
  border-top: 1px solid var(--ink);
}

.principles {
  display: grid;
  grid-template-columns: minmax(280px, 0.7fr) minmax(0, 1.3fr);
  gap: clamp(50px, 9vw, 130px);
  padding: 92px 0 110px;
}

.section-intro h2,
.ecosystem h2,
.docs-invite h2,
.package-policy h2 {
  max-width: 570px;
  margin: 0;
  font-size: clamp(38px, 4.8vw, 64px);
  font-weight: 740;
  line-height: 1.03;
  letter-spacing: -0.055em;
  text-wrap: balance;
}

.principle-grid {
  border-top: 1px solid var(--line);
}

.principle-grid article {
  display: grid;
  grid-template-columns: 34px minmax(170px, 0.6fr) minmax(220px, 1fr);
  gap: 20px;
  padding: 26px 0;
  border-bottom: 1px solid var(--line);
}

.article-number,
.package-index,
.catalog-number,
.doc-section-number {
  color: var(--blue);
  font: 700 11px/1.5 var(--mono);
}

.principle-grid h3 {
  margin: 0;
  font-size: 18px;
  line-height: 1.35;
  letter-spacing: -0.02em;
}

.principle-grid p,
.ecosystem-intro > p {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.65;
}

code {
  font-family: var(--mono);
}

.principle-grid code,
.doc-copy p code,
.catalog-item p code,
.package-policy p code {
  padding: 0.12em 0.3em;
  color: var(--blue-deep);
  background: #edf5fc;
  font-size: 0.9em;
}

.ecosystem {
  padding: 92px 0 110px;
}

.ecosystem-intro {
  display: grid;
  grid-template-columns: 1fr minmax(290px, 0.55fr);
  align-items: end;
  gap: 70px;
  margin-bottom: 70px;
}

.package-ledger {
  border-top: 1px solid var(--ink);
}

.package-ledger a {
  display: grid;
  grid-template-columns: 80px minmax(170px, 0.55fr) minmax(280px, 1fr) 26px;
  align-items: center;
  gap: 24px;
  min-height: 92px;
  padding: 18px 16px 18px 0;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  transition: color 150ms ease, background 150ms ease, padding 150ms ease;
}

.package-ledger a:hover {
  padding-left: 16px;
  color: var(--blue-deep);
  background: #f5f9fd;
}

.package-ledger strong {
  font-size: 20px;
  letter-spacing: -0.025em;
}

.package-ledger a > span:nth-child(3) {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}

.package-ledger b {
  color: var(--blue);
  font-size: 20px;
}

.docs-invite {
  display: grid;
  grid-template-columns: 0.65fr 1fr;
  gap: clamp(50px, 10vw, 160px);
  padding: 100px 6vw 108px;
  color: #fff;
  border-color: var(--blue);
  background: var(--blue);
}

.docs-invite .section-label {
  color: #dceeff;
}

.docs-invite .section-label span {
  color: #fff;
}

.docs-invite p:not(.section-label) {
  max-width: 600px;
  margin: 28px 0;
  color: #e2f0fc;
  font-size: 17px;
  line-height: 1.7;
}

.docs-stamp {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  justify-self: center;
  width: 230px;
  height: 230px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  transform: rotate(-7deg);
}

.docs-stamp img {
  width: 86px;
  height: 86px;
  filter: grayscale(1) brightness(0) invert(1);
}

.docs-stamp span {
  margin-left: 12px;
  font: 700 11px/1.3 var(--mono);
  letter-spacing: 0.12em;
}

.community-invite {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  gap: clamp(50px, 9vw, 130px);
  padding: 92px 0 100px;
}

.community-invite h2 {
  max-width: 570px;
  margin: 0;
  font-size: clamp(38px, 4.8vw, 64px);
  font-weight: 740;
  line-height: 1.03;
  letter-spacing: -0.055em;
  text-wrap: balance;
}

.community-invite > div:last-child {
  padding-left: clamp(28px, 5vw, 72px);
  border-left: 1px solid var(--line);
}

.community-invite > div:last-child p {
  max-width: 570px;
  margin: 0 0 30px;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.7;
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 30px;
  padding-bottom: 7px;
  border-bottom: 1px solid currentColor;
  font-size: 15px;
  font-weight: 750;
  text-decoration: none;
}

.text-link span {
  transition: transform 150ms ease;
}

.text-link:hover span {
  transform: translateX(4px);
}

.site-footer {
  display: grid;
  grid-template-columns: 0.6fr 1fr auto;
  align-items: center;
  gap: 40px;
  width: min(var(--content), calc(100% - 48px));
  margin: 0 auto;
  padding: 56px 0 32px;
}

.footer-mark img {
  width: 30px;
  height: 30px;
}

.site-footer p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}

.site-footer > div {
  display: flex;
  gap: 24px;
}

.site-footer > div a {
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}

.site-footer > div a:hover {
  color: var(--blue);
}

.site-footer small {
  grid-column: 1 / -1;
  padding-top: 24px;
  color: #7c858e;
  border-top: 1px solid var(--line);
  font: 10px/1.5 var(--mono);
  letter-spacing: 0.08em;
}

/* Documentation */

.docs-shell {
  display: grid;
  grid-template-columns: 230px minmax(0, 820px);
  gap: clamp(70px, 10vw, 150px);
  width: min(var(--content), calc(100% - 48px));
  margin: 0 auto;
  padding: 72px 0 120px;
}

.docs-sidebar {
  position: sticky;
  top: 28px;
  align-self: start;
  padding-top: 10px;
}

.docs-sidebar > p {
  margin: 0 0 22px;
  color: var(--muted);
  font: 700 10px/1.4 var(--mono);
  letter-spacing: 0.12em;
}

.docs-sidebar nav {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--ink);
}

.docs-sidebar nav a {
  padding: 13px 0;
  color: #4f5963;
  border-bottom: 1px solid var(--line);
  font: 12px/1.4 var(--mono);
  text-decoration: none;
}

.docs-sidebar nav a:hover {
  color: var(--blue);
}

.sidebar-github {
  display: inline-block;
  margin-top: 24px;
  color: var(--blue-deep);
  font: 700 11px/1.4 var(--mono);
  text-decoration: none;
}

.docs-content {
  min-width: 0;
}

.docs-hero {
  padding: 5px 0 90px;
}

.docs-hero h1 {
  font-size: clamp(62px, 8vw, 104px);
}

.docs-hero > p:last-child {
  max-width: 650px;
  margin: 30px 0 0;
  color: var(--muted);
  font-size: 19px;
  line-height: 1.6;
}

.doc-section {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 24px;
  padding: 78px 0 90px;
  border-top: 1px solid var(--ink);
  scroll-margin-top: 18px;
}

.doc-section-number {
  padding-top: 5px;
}

.doc-kicker {
  margin-bottom: 18px;
  color: var(--blue-deep);
}

.doc-copy h2 {
  max-width: 670px;
  margin: 0 0 28px;
  font-size: clamp(32px, 4.5vw, 52px);
  line-height: 1.05;
  letter-spacing: -0.048em;
  text-wrap: balance;
}

.doc-copy h2 code {
  color: var(--blue);
  font-size: 0.9em;
}

.doc-copy > p {
  max-width: 720px;
  margin: 0 0 24px;
  color: #46515d;
  font-size: 17px;
  line-height: 1.75;
}

.terminal {
  margin: 34px 0 30px;
  color: #e5edf5;
  border: 1px solid #202a34;
  background: #10171e;
}

.terminal > div {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  padding: 0 14px;
  border-bottom: 1px solid #29323b;
}

.terminal > div span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #67727d;
}

.terminal > div b {
  margin-left: auto;
  color: #83909c;
  font: 10px/1 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.terminal pre code {
  display: block;
  padding: 27px 30px;
  font: 13px/1.75 var(--mono);
}

.terminal.compact {
  margin: 18px 0 26px;
}

.doc-code {
  margin: 36px 0 32px;
  box-shadow: 9px 9px 0 #dce8f4;
}

.doc-note {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 30px;
  margin: 32px 0 0;
  padding: 24px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.doc-note strong {
  font-size: 14px;
}

.doc-note p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.65;
}

.command-list {
  margin: 35px 0 34px;
  border-top: 1px solid var(--ink);
}

.command-list > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 190px;
  gap: 20px;
  padding: 19px 0;
  border-bottom: 1px solid var(--line);
}

.command-list code {
  color: var(--blue-deep);
  font-size: 12px;
}

.command-list span {
  color: var(--muted);
  font-size: 13px;
}

.doc-next {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: 52px;
  border-top: 1px solid var(--ink);
}

.doc-next p {
  grid-column: 1 / -1;
  margin: 0;
  padding: 20px 0;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
  font: 700 10px/1.4 var(--mono);
  letter-spacing: 0.12em;
}

.doc-next a {
  display: flex;
  justify-content: space-between;
  padding: 18px 18px 18px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}

.doc-next a:nth-of-type(odd) {
  margin-right: 25px;
}

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

.compact-footer {
  border-top: 1px solid var(--line);
}

/* Packages */

.packages-hero {
  padding: 100px 0 112px;
}

.packages-hero h1 {
  max-width: 930px;
  font-size: clamp(60px, 8.4vw, 112px);
}

.packages-hero > p:not(.section-label) {
  max-width: 710px;
  margin: 37px 0 0;
  color: var(--muted);
  font-size: 19px;
  line-height: 1.7;
}

.install-ribbon {
  display: flex;
  align-items: stretch;
  max-width: 930px;
  margin-top: 45px;
  border: 1px solid var(--ink);
}

.install-ribbon code {
  flex: 1;
  padding: 18px 20px;
  overflow: auto;
  color: var(--blue-deep);
  font-size: 12px;
  white-space: nowrap;
}

.install-ribbon span {
  display: grid;
  place-items: center;
  padding: 0 17px;
  color: #fff;
  background: var(--ink);
  font: 10px/1 var(--mono);
  text-transform: uppercase;
}

.package-catalog {
  border-top: 1px solid var(--ink);
}

.catalog-item {
  position: relative;
  display: grid;
  grid-template-columns: 55px minmax(190px, 0.55fr) minmax(270px, 1fr) 180px 36px;
  align-items: center;
  gap: 25px;
  min-height: 155px;
  padding: 28px 0;
  border-bottom: 1px solid var(--line);
}

.catalog-item.featured {
  color: #fff;
  border-color: var(--blue);
  background: var(--blue);
  box-shadow: 20px 0 0 var(--blue), -20px 0 0 var(--blue);
}

.catalog-item.featured .catalog-number,
.catalog-item.featured p,
.catalog-item.featured .catalog-title span {
  color: #e5f2fe;
}

.catalog-title span {
  color: var(--muted);
  font: 700 9px/1.4 var(--mono);
  letter-spacing: 0.1em;
}

.catalog-title h2 {
  margin: 7px 0 0;
  font-size: 27px;
  letter-spacing: -0.035em;
}

.catalog-item p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.65;
}

.catalog-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.catalog-tags span {
  padding: 5px 7px;
  border: 1px solid currentColor;
  font: 700 9px/1 var(--mono);
  letter-spacing: 0.05em;
}

.catalog-item > a {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid currentColor;
  font-size: 18px;
  text-decoration: none;
  transition: color 150ms ease, background 150ms ease;
}

.catalog-item > a:hover {
  color: #fff;
  border-color: var(--blue);
  background: var(--blue);
}

.catalog-item.featured > a:hover {
  color: var(--blue);
  border-color: #fff;
  background: #fff;
}

.package-policy {
  display: grid;
  grid-template-columns: 1fr 0.75fr;
  gap: clamp(55px, 10vw, 150px);
  margin: 110px 0 120px;
  padding-top: 90px;
  border-top: 1px solid var(--ink);
}

.package-policy > div:last-child {
  padding-top: 40px;
}

.package-policy > div:last-child > p {
  margin: 0 0 22px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.7;
}

.package-policy .text-link {
  margin-top: 16px;
  color: var(--blue-deep);
}

@media (max-width: 980px) {
  .hero {
    grid-template-columns: 1fr;
    min-height: 0;
    gap: 58px;
  }

  .hero-copy {
    max-width: 760px;
  }

  .hero-code {
    width: min(100%, 700px);
  }

  .principles,
  .ecosystem-intro,
  .package-policy {
    grid-template-columns: 1fr;
  }

  .principles,
  .package-policy {
    gap: 55px;
  }

  .ecosystem-intro {
    align-items: start;
    gap: 28px;
  }

  .ecosystem-intro > p {
    max-width: 650px;
  }

  .docs-shell {
    grid-template-columns: 180px minmax(0, 1fr);
    gap: 55px;
  }

  .catalog-item {
    grid-template-columns: 45px 210px minmax(240px, 1fr) 36px;
  }

  .catalog-tags {
    display: none;
  }

  .package-policy > div:last-child {
    max-width: 700px;
    padding-top: 0;
  }
}

@media (max-width: 720px) {
  .status-strip {
    justify-content: center;
  }

  .status-strip span:last-child {
    display: none;
  }

  .site-header,
  .home-page main,
  .packages-main,
  .docs-shell,
  .site-footer {
    width: min(100% - 32px, var(--content));
  }

  .site-header {
    min-height: 72px;
  }

  .site-nav {
    gap: 16px;
  }

  .site-nav a {
    padding: 27px 0 24px;
    font-size: 12px;
  }

  .site-nav a:last-child {
    display: none;
  }

  .wordmark {
    font-size: 22px;
  }

  .wordmark img {
    width: 29px;
    height: 29px;
  }

  .hero {
    gap: 46px;
    padding: 62px 0 72px;
  }

  .hero h1,
  .packages-hero h1,
  .docs-hero h1 {
    font-size: clamp(45px, 14vw, 68px);
  }

  .hero-lede,
  .packages-hero > p:not(.section-label) {
    font-size: 17px;
  }

  .hero-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .button {
    width: 100%;
  }

  .code-window {
    box-shadow: 7px 7px 0 #dce8f4;
  }

  .hero-code pre code,
  .code-window pre code {
    padding: 24px 20px;
    font-size: 11px;
    line-height: 1.75;
  }

  .hero-code::before {
    display: none;
  }

  .code-result {
    grid-template-columns: 1fr;
    gap: 5px;
  }

  .principles,
  .ecosystem {
    padding: 66px 0 78px;
  }

  .section-intro h2,
  .ecosystem h2,
  .docs-invite h2,
  .community-invite h2,
  .package-policy h2 {
    font-size: 40px;
  }

  .principle-grid article {
    grid-template-columns: 26px 1fr;
    gap: 14px;
  }

  .principle-grid article p {
    grid-column: 2;
  }

  .package-ledger a {
    grid-template-columns: 48px 1fr 22px;
    gap: 12px;
    min-height: 108px;
    padding-right: 0;
  }

  .package-ledger a > span:nth-child(3) {
    grid-column: 2;
  }

  .package-ledger b {
    grid-column: 3;
    grid-row: 1 / 3;
  }

  .docs-invite {
    grid-template-columns: 1fr;
    gap: 55px;
    margin-right: -16px;
    margin-left: -16px;
    padding: 70px 28px 75px;
  }

  .docs-stamp {
    justify-self: start;
    width: 165px;
    height: 165px;
  }

  .docs-stamp img {
    width: 60px;
    height: 60px;
  }

  .community-invite {
    grid-template-columns: 1fr;
    gap: 36px;
    padding: 66px 0 74px;
  }

  .community-invite > div:last-child {
    padding: 30px 0 0;
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .site-footer {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .site-footer > div {
    flex-wrap: wrap;
  }

  .docs-shell {
    display: block;
    padding-top: 55px;
  }

  .docs-sidebar {
    position: static;
    margin-bottom: 75px;
  }

  .docs-sidebar nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .docs-sidebar nav a:nth-child(odd) {
    margin-right: 18px;
  }

  .docs-hero {
    padding-bottom: 68px;
  }

  .doc-section {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 58px 0 70px;
  }

  .doc-copy h2 {
    font-size: 36px;
  }

  .doc-copy > p {
    font-size: 15px;
  }

  .doc-note,
  .command-list > div,
  .doc-next {
    grid-template-columns: 1fr;
  }

  .doc-note {
    gap: 10px;
  }

  .command-list > div {
    gap: 8px;
  }

  .doc-next a:nth-of-type(odd) {
    margin-right: 0;
  }

  .packages-hero {
    padding: 70px 0 82px;
  }

  .install-ribbon {
    align-items: stretch;
    flex-direction: column;
  }

  .install-ribbon span {
    min-height: 28px;
  }

  .catalog-item {
    grid-template-columns: 35px 1fr 34px;
    gap: 14px;
    min-height: 0;
    padding: 28px 0;
  }

  .catalog-item p {
    grid-column: 2 / 4;
  }

  .catalog-item > a {
    grid-column: 3;
    grid-row: 1;
  }

  .catalog-title h2 {
    font-size: 23px;
  }

  .package-policy {
    margin: 80px 0 90px;
    padding-top: 65px;
  }
}

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

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
  }
}