:root {
  color: #20211d;
  background: #f1eee4;
  font-family: Manrope, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
  --ink: #20211d;
  --muted: #625f57;
  --paper: #fbfaf6;
  --line: rgba(32, 33, 29, 0.17);
  --lime: #dcef71;
  --orange: #f45d34;
  --violet: #6c63ea;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-width: 320px;
  background:
    linear-gradient(rgba(32, 33, 29, 0.034) 1px, transparent 1px),
    linear-gradient(90deg, rgba(32, 33, 29, 0.034) 1px, transparent 1px),
    #f1eee4;
  background-size: 32px 32px;
}

a { color: inherit; }

a:focus-visible {
  outline: 3px solid rgba(108, 99, 234, 0.42);
  outline-offset: 4px;
}

.skip-link {
  position: fixed;
  z-index: 30;
  top: 10px;
  left: 10px;
  padding: 9px 12px;
  color: var(--ink);
  background: var(--lime);
  border-radius: 6px;
  font-weight: 850;
  transform: translateY(-160%);
}

.skip-link:focus { transform: translateY(0); }

.wrap {
  width: min(1080px, calc(100% - 40px));
  margin-inline: auto;
}

.site-header {
  color: #f8f6ef;
  background: var(--ink);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.site-header .wrap {
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #f8f6ef;
  font-size: 19px;
  font-weight: 900;
  letter-spacing: -0.045em;
  text-decoration: none;
}

.brand > span:last-child,
.site-footer .brand span { color: var(--lime); }

.brand-mark {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 2px solid #f8f6ef;
  border-radius: 50%;
}

.brand-mark::after {
  width: 7px;
  height: 7px;
  border: 2px solid var(--orange);
  border-radius: 50%;
  content: "";
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 24px;
  color: #c6c4bd;
  font-size: 12px;
  font-weight: 750;
}

.site-nav a { text-decoration: none; }
.site-nav a:hover { color: #fff; }

.nav-cta {
  padding: 10px 14px;
  color: var(--ink) !important;
  background: var(--lime);
  border-radius: 7px;
}

.breadcrumbs {
  margin: 0 0 26px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  color: #747168;
  font-size: 12px;
}

.breadcrumbs a { text-underline-offset: 3px; }

.hero {
  position: relative;
  overflow: hidden;
  padding: 77px 0 68px;
  background: rgba(241, 238, 228, 0.78);
  border-bottom: 1px solid var(--line);
}

.hero::after {
  position: absolute;
  z-index: -1;
  top: -205px;
  right: max(-140px, calc((100vw - 1080px) / 2 - 165px));
  width: 510px;
  height: 510px;
  background: radial-gradient(circle, rgba(220, 239, 113, 0.42), transparent 68%);
  border-radius: 50%;
  content: "";
}

.kicker {
  color: #8b331b;
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

h1, h2, h3 {
  color: var(--ink);
  letter-spacing: -0.045em;
}

h1 {
  max-width: 900px;
  margin: 16px 0 21px;
  font-size: clamp(45px, 7.3vw, 78px);
  line-height: 0.96;
}

.dek {
  max-width: 760px;
  margin: 0;
  color: #504d46;
  font-size: clamp(17px, 2.3vw, 21px);
  line-height: 1.65;
}

.byline {
  margin: 25px 0 0;
  color: #77736a;
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: 9px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.layout {
  padding-block: 64px 90px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 276px;
  gap: 76px;
}

.article { min-width: 0; }

.article h2 {
  margin: 53px 0 14px;
  font-size: clamp(28px, 4vw, 39px);
  line-height: 1.08;
}

.article h2:first-child { margin-top: 0; }

.article h3 {
  margin: 30px 0 9px;
  font-size: 22px;
}

.article p,
.article li,
.card p {
  color: #514e47;
  font-size: 16px;
  line-height: 1.78;
}

.article strong { color: #292a26; }

.article ul,
.article ol { padding-left: 23px; }

.article li + li { margin-top: 9px; }

.formula,
.note {
  margin: 30px 0;
  padding: 25px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 11px;
}

.formula small,
.note small {
  margin-bottom: 9px;
  display: block;
  color: #8b331b;
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: 0.1em;
}

.formula code {
  display: block;
  overflow-wrap: anywhere;
  color: #282923;
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: clamp(16px, 2.25vw, 20px);
  font-weight: 750;
  line-height: 1.6;
}

.note {
  background: #e7edbd;
  border-color: rgba(89, 96, 32, 0.28);
}

.note p { margin: 0; }

.result-grid {
  margin: 29px 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  overflow: hidden;
  background: #393a35;
  border: 1px solid #393a35;
  border-radius: 11px;
}

.result-grid div {
  min-width: 0;
  padding: 21px;
  color: #fff;
  background: var(--ink);
}

.result-grid span {
  margin-bottom: 7px;
  display: block;
  color: #aaa79f;
  font-size: 10px;
  font-weight: 750;
  text-transform: uppercase;
}

.result-grid strong {
  color: var(--lime);
  font-size: clamp(21px, 4vw, 31px);
  overflow-wrap: anywhere;
}

.side {
  position: sticky;
  top: 24px;
  align-self: start;
}

.side-card {
  padding: 23px;
  color: #fff;
  background: var(--ink);
  border-radius: 12px;
  box-shadow: 0 20px 55px rgba(32, 33, 29, 0.14);
}

.side-card .kicker { color: var(--lime); }

.side-card h2 {
  margin: 9px 0 10px;
  color: #fff;
  font-size: 25px;
  line-height: 1.08;
}

.side-card p {
  margin: 0 0 20px;
  color: #c7c5be;
  font-size: 13px;
  line-height: 1.68;
}

.button {
  min-height: 44px;
  padding: 11px 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  background: var(--lime);
  border-radius: 7px;
  font-size: 13px;
  font-weight: 850;
  text-decoration: none;
}

.related {
  margin-top: 57px;
  padding-top: 31px;
  border-top: 1px solid var(--line);
}

.related > h2 { margin-top: 0; }

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

.card {
  padding: 25px;
  display: block;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 11px;
  text-decoration: none;
  transition: border-color 150ms ease, transform 150ms ease;
}

.card:hover,
.card:focus-visible {
  border-color: #949b68;
  transform: translateY(-2px);
}

.card h2,
.card h3 {
  margin: 9px 0 8px;
  font-size: 23px;
  line-height: 1.12;
}

.card p {
  margin: 0;
  font-size: 14px;
}

.card .arrow {
  margin-top: 17px;
  display: inline-block;
  color: #675d12;
  font-size: 13px;
  font-weight: 850;
}

.feature-card {
  background: #e7edbd;
  border-color: rgba(89, 96, 32, 0.28);
}

.wide-main { padding-block: 64px 91px; }
.wide-main > p { max-width: 780px; }
.wide-main .card-grid { margin-top: 33px; }

.cta-band {
  padding: 52px 0;
  color: #fff;
  background: var(--violet);
}

.cta-band .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}

.cta-band h2 {
  margin: 0 0 7px;
  color: #fff;
  font-size: 32px;
}

.cta-band p {
  margin: 0;
  color: #fff;
  line-height: 1.6;
}

.site-footer {
  padding: 32px 0;
  color: #a9a69f;
  background: var(--ink);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.site-footer .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  font-size: 12px;
}

.footer-links a { text-decoration: none; }
.footer-links a:hover { color: #fff; }

@media (max-width: 800px) {
  .layout {
    grid-template-columns: 1fr;
    gap: 39px;
  }

  .side { position: static; }
}

@media (max-width: 600px) {
  .wrap { width: min(100% - 30px, 1080px); }

  .site-nav a:not(.nav-cta) { display: none; }

  .hero { padding-block: 52px 46px; }
  h1 { font-size: 44px; }

  .layout,
  .wide-main { padding-block: 45px 65px; }

  .result-grid,
  .related-grid,
  .card-grid { grid-template-columns: 1fr; }

  .cta-band .wrap,
  .site-footer .wrap {
    align-items: flex-start;
    flex-direction: column;
  }
}

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