/*!
 * Site styles
 */
:root {
  --tok-s: hsl(319 68% 62%);
  --tok-display: 'Archivo Black', Arial, Helvetica, sans-serif;
  --tok-step-80: 80px;
  --tok-step-6: 6px;
  --tok-rounded-box: 10px;
  --tok-step-18: 18px;
  --tok-step-16: 16px;
  --tok-step-56: 56px;
  --tok-step-96: 96px;
  --tok-step-14: 14px;
  --tok-step-36: 36px;
  --tok-step-24: 24px;
  --tok-step-12: 12px;
  --tok-step-8: 8px;
  --tok-step-72: 72px;
  --tok-base: hsl(179 8% 4%);
  --tok-step-20: 20px;
  --tok-p: hsl(179 78% 55%);
  --tok-neutral: hsl(179 6% 62%);
  --tok-step-64: 64px;
  --tok-step-32: 32px;
  --tok-step-28: 28px;
  --tok-hero-content: hsl(179 8% 97%);
  --tok-step-48: 48px;
  --tok-step-4: 4px;
  --tok-step-40: 40px;
  --tok-pf: hsl(179 78% 45%);
  --tok-sans: 'Lato', Arial, Helvetica, sans-serif;
  --tok-step-10: 10px;
  --tok-step-2: 2px;
  --tok-base-100: hsl(179 10% 11%);
  --tok-base-200: hsl(179 8% 8%);
  --tok-base-content: hsl(179 8% 95%);
  --tok-base-300: hsl(179 8% 15%);
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0px;
  font-family: var(--tok-sans);
}
body {
  color: var(--tok-base-content);
  font-size: 15px;
}
body {
  line-height: 1.55;
  background-color: var(--tok-base);
}
img {
  display: block;
  block-size: auto;
  max-inline-size: 100%;
}
a {
  color: var(--tok-p);
}
a:hover {
  color: var(--tok-pf);
}
h1,h2,h3,h4 {
  font-family: var(--tok-display);
  letter-spacing: 0;
  font-weight: 400;
  margin: 0 0 .6em;
  line-height: 1.2;
}
h1 {
  font-size: 2.12rem;
}
h2 {
  margin-block-start: 1.87em;
  font-size: 1.35rem;
}
h3 {
  font-size: 1.08rem;
  margin-block-start: 1.39em;
}
h2[id],h3[id] {
  scroll-margin-block-start: 90px;
}
.yk-reading {
  max-inline-size: 780px;
}
.yk-reading p {
  margin: 0 0 1.24em;
}
.yk-reading ul,.yk-reading ol {
  padding-inline-start: 1.29em;
  margin-block-end: 1.08em;
}
.yk-reading li {
  margin-block-end: .32em;
  margin-block-start: .32em;
}
.yk-reading table {
  margin-block-start: 1.37em;
  inline-size: 100%;
  margin-block-end: 1.37em;
  border-collapse: collapse;
}
.yk-reading table {
  font-size: .99em;
  overflow-x: auto;
  display: block;
}
.yk-reading th,.yk-reading td {
  text-align: start;
  border: 1px solid var(--tok-base-300);
  padding-inline: 12px;
  padding-block: 8px;
}
.yk-reading th {
  background-color: var(--tok-base-100);
  font-weight: 600;
}
.yk-reading blockquote {
  background-color: var(--tok-base-200);
  padding-inline: 17px;
  border-inline-start: 4px solid var(--tok-s);
  margin-inline: 0;
  padding-block: 12px;
  border-radius: var(--tok-rounded-box);
  margin-block: 1.22em;
}
.yk-reading sup a {
  padding: 0 var(--tok-step-2) 0 var(--tok-step-2);
  font-size: .69em;
  text-decoration: none;
}
.yk-reading code {
  background-color: var(--tok-base-100);
  border-radius: 4px;
}
.yk-reading code {
  padding-inline: 5px;
  padding-block: 1px;
  font-size: .89em;
}
.yk-reading img {
  margin-block: .88em;
  border-radius: 9px;
  margin-inline: 0;
}
.yk-lead-box {
  font-size: .91em;
  border-radius: 9px;
  margin-block-end: 27px;
  background-color: var(--tok-base-100);
  padding-block: 19px;
  border-inline-start: 4px solid var(--tok-p);
  padding-inline: 24px;
}
.yk-lead-box p:last-child {
  margin-block-end: 0;
}
.yk-for-against {
  margin-block: 18px;
  inline-size: 100%;
  margin-inline: -18px;
  border-collapse: separate;
}
.yk-for-against {
  table-layout: fixed;
  border-spacing: 19px 0;
}
.yk-for-against th {
  font-size: 1.06em;
  padding: 0 23px var(--tok-step-8);
  text-align: start;
  font-family: var(--tok-display);
}
.yk-for-against td {
  padding-block: 12px;
  border: 1px solid var(--tok-base-300);
  padding-inline: 20px;
  background-color: var(--tok-base-200);
  border-radius: 11px;
}
.yk-for-against ul {
  margin: 0;
  padding-inline-start: 1.17em;
}
.yk-references {
  margin: 39px 0 0;
}
.yk-references {
  border-block-start: 1px solid var(--tok-base-300);
  padding-block-start: var(--tok-step-18);
}
.yk-references {
  color: var(--tok-neutral);
  font-size: .81em;
}
.yk-references ol {
  padding-inline-start: 1.31em;
}
.yk-references li {
  margin-block-end: .28em;
  margin-block-start: .28em;
}
.yk-references a {
  color: var(--tok-neutral);
}
.yk-pullquote {
  border-inline-start: 4px solid var(--tok-s);
  padding-inline: 29px;
  font-size: .98em;
  font-style: italic;
  padding-block: 23px;
}
.yk-pullquote {
  background-color: var(--tok-base-200);
  border-radius: 9px;
  margin-block-start: 21px;
  margin-block-end: 21px;
}
.yk-pullquote blockquote {
  background-color: transparent;
  padding: 0;
}
.yk-pullquote blockquote {
  border: 0;
  margin: 0;
}
.yk-pullquote figcaption {
  font-size: .97em;
}
.yk-pullquote figcaption {
  color: var(--tok-neutral);
  margin-block-start: var(--tok-step-8);
  font-style: normal;
}
.yk-highlight-box {
  padding: 37px;
  color: #fff;
  margin-block: 45px;
  text-align: center;
  margin-inline: 0;
  border-radius: var(--tok-rounded-box);
  background-color: var(--tok-p);
}
.yk-highlight-box h3 {
  color: inherit;
  margin-block-start: 0;
}
.yk-highlight-box p:last-child {
  margin: 0;
}
.yk-action {
  display: inline-block;
  margin-block-start: 11px;
  font-weight: 600;
  background-color: var(--tok-s);
}
.yk-action {
  border-radius: var(--tok-rounded-box);
  color: #fff;
}
.yk-action {
  padding: 13px 29px 13px 29px;
  text-decoration-line: none;
}
.yk-action:hover {
  color: #fff;
}
.yk-listing {
  column-gap: 21px;
  row-gap: 21px;
  margin-block-start: 23px;
  display: grid;
  margin-block-end: 23px;
  grid-template-columns: repeat(auto-fill,minmax(250px,1fr));
}
.yk-tile {
  padding: var(--tok-step-18);
  border: 1px solid var(--tok-base-300);
  row-gap: 8px;
  background-color: var(--tok-base-200);
  display: grid;
}
.yk-tile {
  border-radius: 9px;
  column-gap: 8px;
}
.yk-tile h3 {
  font-size: 1.1em;
  margin: 0;
}
.yk-tile p {
  font-size: 1.03em;
  margin: 0;
  color: var(--tok-neutral);
}
.yk-tile a {
  font-weight: 600;
  text-decoration: none;
}
.yk-burger-state {
  display: none;
}
.yk-menu-button {
  block-size: 22px;
  align-items: center;
  display: none;
  inline-size: 28px;
  cursor: pointer;
}
.yk-menu-button span {
  inline-size: 100%;
  position: relative;
  block-size: 2px;
  display: block;
  background: currentColor;
}
.yk-menu-button span::before,.yk-menu-button span::after {
  inset-inline-end: 0;
  display: block;
  block-size: 2px;
  content: "";
}
.yk-menu-button span::before,.yk-menu-button span::after {
  position: absolute;
  inset-inline-start: 0;
  background: currentColor;
}
.yk-menu-button span::before {
  inset-block-start: -8px;
}
.yk-menu-button span::after {
  inset-block-end: -8px;
}
.yk-byline {
  gap: 7px 17px;
  color: var(--tok-neutral);
  margin: 0 0 var(--tok-step-18);
  display: flex;
  font-size: .86em;
  flex-wrap: wrap;
}
.yk-you-are-here {
  font-size: .78em;
  color: var(--tok-neutral);
  margin-block-end: var(--tok-step-14);
}
.yk-you-are-here a {
  color: var(--tok-neutral);
  text-decoration-line: none;
}
.yk-section-tag {
  display: inline-block;
  color: var(--tok-s);
}
.yk-section-tag {
  font-size: .85em;
  font-weight: 700;
}
.yk-section-tag {
  margin-block-end: var(--tok-step-10);
  text-transform: uppercase;
  letter-spacing: .08em;
}
.yk-illustration>p {
  font-size: .94em;
  color: var(--tok-neutral);
  margin: 9px 0 0;
}
.yk-recommended {
  margin-block-start: 55px;
}
ul.yk-byline {
  list-style-type: none;
  padding: 0;
}
.yk-you-are-here ol {
  flex-wrap: wrap;
  margin: 0;
  display: flex;
  gap: var(--tok-step-6);
  list-style-type: none;
  padding: 0;
}
.yk-you-are-here li+li::before {
  content: "/";
  margin: 0 7px 0 0;
  opacity: .7;
}
p.yk-section-tag {
  margin: 0 0 11px;
}
.yk-opening-block hgroup {
  margin: 0;
}
.yk-faq {
  row-gap: 17px;
  grid-template-columns: repeat(auto-fill,minmax(280px,1fr));
  column-gap: 17px;
  display: grid;
}
.yk-faq>div {
  padding: var(--tok-step-16) 19px var(--tok-step-16) 19px;
  border: 1px solid var(--tok-base-300);
  background-color: var(--tok-base-200);
  border-radius: 11px;
}
.yk-faq h3 {
  font-size: 1.12em;
  margin-block-end: var(--tok-step-8);
}
.yk-procedure {
  padding: 0 0 0 22px;
  border-inline-start: 3px solid var(--tok-base-300);
  counter-reset: s;
  margin: var(--tok-step-20) 0 var(--tok-step-20) 0;
}
.yk-procedure dt {
  margin: var(--tok-step-16) 0 var(--tok-step-4);
  font-family: var(--tok-display);
  font-size: 1.14em;
  font-weight: 700;
}
.yk-procedure dt::before {
  counter-increment: s;
  content: counter(s) ". ";
  color: var(--tok-s);
}
.yk-procedure dd {
  margin: 0px;
}
@media (max-width:640px) {
.yk-for-against {
  grid-template-columns: 1fr;
}
}